diff --git a/.changeset/connected-account-removal-dialog.md b/.changeset/connected-account-removal-dialog.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/connected-account-removal-dialog.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/connected-accounts-view-states.md b/.changeset/connected-accounts-view-states.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/connected-accounts-view-states.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/swingset/src/lib/registry.ts b/packages/swingset/src/lib/registry.ts
index bc9fe0a5055..a469462e1e3 100644
--- a/packages/swingset/src/lib/registry.ts
+++ b/packages/swingset/src/lib/registry.ts
@@ -222,8 +222,15 @@ import {
   meta as userProfileBillingPanelMeta,
 } from '../stories/user-profile-billing-panel.stories';
 import {
+  ConnectionError as ConnectedAccountsConnectionError,
+  ConnectOnly as ConnectedAccountsConnectOnly,
   Default as UserProfileConnectedAccountsSectionDefault,
+  LinkedAccounts as ConnectedAccountsLinkedAccounts,
   meta as userProfileConnectedAccountsSectionMeta,
+  ReconnectRequired as ConnectedAccountsReconnectRequired,
+  RemovalError as ConnectedAccountsRemovalError,
+  RemovalPending as ConnectedAccountsRemovalPending,
+  VerificationError as ConnectedAccountsVerificationError,
 } from '../stories/user-profile-connected-accounts-section.stories';
 import {
   Default as UserProfileDeleteSectionDefault,
@@ -532,6 +539,13 @@ const userProfilePaymentMethodsSectionModule: StoryModule = {
 const userProfileConnectedAccountsSectionModule: StoryModule = {
   meta: userProfileConnectedAccountsSectionMeta,
   Default: UserProfileConnectedAccountsSectionDefault,
+  LinkedAccounts: ConnectedAccountsLinkedAccounts,
+  ConnectOnly: ConnectedAccountsConnectOnly,
+  ReconnectRequired: ConnectedAccountsReconnectRequired,
+  VerificationError: ConnectedAccountsVerificationError,
+  ConnectionError: ConnectedAccountsConnectionError,
+  RemovalPending: ConnectedAccountsRemovalPending,
+  RemovalError: ConnectedAccountsRemovalError,
 };
 const userProfileWeb3WalletsSectionModule: StoryModule = {
   meta: userProfileWeb3WalletsSectionMeta,
diff --git a/packages/swingset/src/stories/fixtures/user-profile-connected-accounts.ts b/packages/swingset/src/stories/fixtures/user-profile-connected-accounts.ts
new file mode 100644
index 00000000000..b2ddebf7df9
--- /dev/null
+++ b/packages/swingset/src/stories/fixtures/user-profile-connected-accounts.ts
@@ -0,0 +1,64 @@
+import type {
+  UserProfileConnectedAccount,
+  UserProfileConnectionProvider,
+} from '@clerk/ui/mosaic/features/user-profile/user-profile-connected-accounts-section.view';
+import { useState } from 'react';
+
+export const connectedAccount = {
+  id: 'google',
+  provider: 'Google',
+  identifier: 'test@example.com',
+  iconUrl: 'https://img.clerk.com/static/google.svg',
+};
+const connectionProviders: UserProfileConnectionProvider[] = [
+  { id: 'google', provider: 'Google', iconUrl: 'https://img.clerk.com/static/google.svg' },
+  { id: 'apple', provider: 'Apple', iconUrl: 'https://img.clerk.com/static/apple.svg' },
+];
+
+export function useConnectedAccountsFixture({
+  initialAccounts = [connectedAccount],
+  providers = connectionProviders,
+  removalState,
+}: {
+  initialAccounts?: UserProfileConnectedAccount[];
+  providers?: UserProfileConnectionProvider[];
+  removalState?: 'pending' | 'error';
+} = {}) {
+  const [accounts, setAccounts] = useState(initialAccounts);
+  const availableProviders = providers.filter(provider => !accounts.some(account => account.id === provider.id));
+
+  return {
+    accounts,
+    availableProviders,
+    onConnect: (id: string) => {
+      const provider = providers.find(item => item.id === id);
+      if (provider) {
+        setAccounts(current => [
+          ...current,
+          { id: provider.id, provider: provider.provider, iconUrl: provider.iconUrl, identifier: 'test@example.com' },
+        ]);
+      }
+    },
+    onReconnect: (id: string) =>
+      setAccounts(current =>
+        current.map(account =>
+          account.id === id
+            ? { ...account, status: 'connected', reconnectError: undefined, verificationError: undefined }
+            : account,
+        ),
+      ),
+    onRemove: (id: string) =>
+      setAccounts(current => {
+        const account = current.find(item => item.id === id);
+        if (removalState === 'pending') {
+          return current.map(item => (item.id === id ? { ...item, isRemoving: true } : item));
+        }
+        if (removalState === 'error' && account && !account.removalError) {
+          return current.map(item =>
+            item.id === id ? { ...item, removalError: 'Unable to remove this account. Please try again.' } : item,
+          );
+        }
+        return current.filter(item => item.id !== id);
+      }),
+  };
+}
diff --git a/packages/swingset/src/stories/fixtures/user-profile.ts b/packages/swingset/src/stories/fixtures/user-profile.ts
index ccf6fe53617..bc1bdc1a66f 100644
--- a/packages/swingset/src/stories/fixtures/user-profile.ts
+++ b/packages/swingset/src/stories/fixtures/user-profile.ts
@@ -18,6 +18,7 @@ import { useMemo, useState } from 'react';
 import { usePreviewImage } from './use-preview-image';
 import { createUserProfileAddEmailFixture } from './user-profile-add-email';
 import { createUserProfileAddPhoneFixture } from './user-profile-add-phone';
+import { useConnectedAccountsFixture } from './user-profile-connected-accounts';
 import { useUserProfileEditNameFixture } from './user-profile-edit-name';
 import { useUserProfileEditUsernameFixture } from './user-profile-edit-username';
 
@@ -49,6 +50,7 @@ const initialAPIKeys: UserProfileAPIKey[] = [
  * stories that need a realistic profile surface without being about it.
  */
 export function useUserProfileFixture({ onAddEmail }: UserProfileFixtureOptions = {}) {
+  const connections = useConnectedAccountsFixture();
   const editName = useUserProfileEditNameFixture();
   const editUsername = useUserProfileEditUsernameFixture();
   const [activePage, setActivePage] = useState<UserProfileViewProps['activePage']>('account');
@@ -123,6 +125,11 @@ export function useUserProfileFixture({ onAddEmail }: UserProfileFixtureOptions
     account: {
       ...editName,
       ...editUsername,
+      connectedAccounts: connections.accounts,
+      availableConnectionProviders: connections.availableProviders,
+      onConnectAccount: connections.onConnect,
+      onReconnectAccount: connections.onReconnect,
+      onRemoveConnectedAccount: connections.onRemove,
       allowMultipleAccounts: true,
       hasImage: Boolean(imageUrl),
       imageUrl,
diff --git a/packages/swingset/src/stories/user-profile-connected-accounts-section.mdx b/packages/swingset/src/stories/user-profile-connected-accounts-section.mdx
index ef3e6e1564e..ea938dfcc4f 100644
--- a/packages/swingset/src/stories/user-profile-connected-accounts-section.mdx
+++ b/packages/swingset/src/stories/user-profile-connected-accounts-section.mdx
@@ -2,14 +2,40 @@ import * as Stories from './user-profile-connected-accounts-section.stories';
 
 # UserProfileConnectedAccountsSection
 
-Connected and available external identity providers with provider-specific actions.
-
-<Story
-  name='Default'
-  storyModule={Stories}
-  composition={[
-    { name: 'Section', href: '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/components/section', layer: 'Components' },
-    { name: 'Button', href: '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/components/button', layer: 'Components' },
-    { name: 'Icon', href: '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/components/icon', layer: 'Components' },
-  ]}
-/>
+Linked accounts and available providers are supplied separately. These examples simulate state through props; they do not start OAuth or mutate a user. Reload to reset interactive examples.
+
+<Story name='Default' storyModule={Stories} />
+
+## Linked Accounts
+
+<Story name='LinkedAccounts' storyModule={Stories} />
+
+## Connect Only
+
+<Story name='ConnectOnly' storyModule={Stories} />
+
+## Reconnect Required
+
+Recoverable verification errors and additional scope requirements show a Disconnected badge. Choose Reconnect from the account menu to restore the connection.
+
+<Story name='ReconnectRequired' storyModule={Stories} />
+
+## Verification Error
+
+<Story name='VerificationError' storyModule={Stories} />
+
+## Connection Error
+
+<Story name='ConnectionError' storyModule={Stories} />
+
+## Removal Pending
+
+Choose Remove from the row menu, then confirm to show the pending state.
+
+<Story name='RemovalPending' storyModule={Stories} />
+
+## Removal Error
+
+The first removal attempt shows an error inside the dialog. Retry succeeds.
+
+<Story name='RemovalError' storyModule={Stories} />
diff --git a/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx b/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx
index 41ce1a8260a..bd4276360a7 100644
--- a/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx
+++ b/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx
@@ -2,8 +2,9 @@ import { UserProfileConnectedAccountsSectionView } from '@clerk/ui/mosaic/featur
 
 import type { StoryMeta } from '@/lib/types';
 
-export { default as __source } from './user-profile-connected-accounts-section.stories?raw';
+import { connectedAccount, useConnectedAccountsFixture } from './fixtures/user-profile-connected-accounts';
 
+export { default as __source } from './user-profile-connected-accounts-section.stories?raw';
 export const meta: StoryMeta = {
   group: 'User Profile',
   status: 'wip',
@@ -12,27 +13,49 @@ export const meta: StoryMeta = {
   navigation: { category: 'Sections' },
   source: 'packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts-section.view.tsx',
 };
-
 export function Default() {
-  return (
-    <UserProfileConnectedAccountsSectionView
-      accounts={[
-        {
-          id: 'google',
-          provider: 'Google',
-          identifier: 'test@google.com',
-          iconUrl: 'https://img.clerk.com/static/google.svg',
-          connected: true,
-        },
-        {
-          id: 'apple',
-          provider: 'Apple',
-          iconUrl: 'https://img.clerk.com/static/apple.svg',
-          connected: false,
-        },
-      ]}
-      onConnect={() => undefined}
-      onManage={() => undefined}
-    />
-  );
+  const fixture = useConnectedAccountsFixture();
+  return <UserProfileConnectedAccountsSectionView {...fixture} />;
+}
+export function LinkedAccounts() {
+  const fixture = useConnectedAccountsFixture({ providers: [connectedAccount] });
+  return <UserProfileConnectedAccountsSectionView {...fixture} />;
+}
+export function ConnectOnly() {
+  const fixture = useConnectedAccountsFixture({ initialAccounts: [] });
+  return <UserProfileConnectedAccountsSectionView {...fixture} />;
+}
+export function ReconnectRequired() {
+  const fixture = useConnectedAccountsFixture({ initialAccounts: [{ ...connectedAccount, status: 'reconnect' }] });
+  return <UserProfileConnectedAccountsSectionView {...fixture} />;
+}
+export function VerificationError() {
+  const fixture = useConnectedAccountsFixture({
+    initialAccounts: [
+      { ...connectedAccount, status: 'error', verificationError: 'The provider could not verify this account.' },
+    ],
+  });
+  return <UserProfileConnectedAccountsSectionView {...fixture} />;
+}
+export function ConnectionError() {
+  const fixture = useConnectedAccountsFixture({
+    providers: [
+      connectedAccount,
+      {
+        id: 'apple',
+        provider: 'Apple',
+        iconUrl: 'https://img.clerk.com/static/apple.svg',
+        connectError: 'Unable to connect. Please try again.',
+      },
+    ],
+  });
+  return <UserProfileConnectedAccountsSectionView {...fixture} />;
+}
+export function RemovalPending() {
+  const fixture = useConnectedAccountsFixture({ removalState: 'pending' });
+  return <UserProfileConnectedAccountsSectionView {...fixture} />;
+}
+export function RemovalError() {
+  const fixture = useConnectedAccountsFixture({ removalState: 'error' });
+  return <UserProfileConnectedAccountsSectionView {...fixture} />;
 }
diff --git a/packages/swingset/src/stories/user-profile-profile-panel.stories.tsx b/packages/swingset/src/stories/user-profile-profile-panel.stories.tsx
index 5991daf46dd..14b2eaa5256 100644
--- a/packages/swingset/src/stories/user-profile-profile-panel.stories.tsx
+++ b/packages/swingset/src/stories/user-profile-profile-panel.stories.tsx
@@ -10,6 +10,7 @@ import type { StoryMeta } from '@/lib/types';
 import { usePreviewImage } from './fixtures/use-preview-image';
 import { createUserProfileAddEmailFixture } from './fixtures/user-profile-add-email';
 import { createUserProfileAddPhoneFixture } from './fixtures/user-profile-add-phone';
+import { useConnectedAccountsFixture } from './fixtures/user-profile-connected-accounts';
 import { useUserProfileEditNameFixture } from './fixtures/user-profile-edit-name';
 import { useUserProfileEditUsernameFixture } from './fixtures/user-profile-edit-username';
 
@@ -36,6 +37,7 @@ export function Default(_args: Record<string, unknown>) {
     { id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true },
   ]);
   const { imageUrl, showFile, clearImage } = usePreviewImage(profileImageUrl);
+  const connections = useConnectedAccountsFixture();
   const editName = useUserProfileEditNameFixture();
   const editUsername = useUserProfileEditUsernameFixture();
   const emailFlow = createUserProfileAddEmailFixture({
@@ -49,16 +51,9 @@ export function Default(_args: Record<string, unknown>) {
       {...emailFlow}
       allowMultipleAccounts
       emails={emails}
-      connectedAccounts={[
-        {
-          id: 'google',
-          provider: 'Google',
-          identifier: 'test@google.com',
-          iconUrl: providerIconUrl('google'),
-          connected: true,
-        },
-        { id: 'apple', provider: 'Apple', iconUrl: providerIconUrl('apple'), connected: false },
-      ]}
+      connectedAccounts={connections.accounts}
+      availableConnectionProviders={connections.availableProviders}
+      onReconnectAccount={connections.onReconnect}
       web3Wallets={[
         {
           id: 'metamask',
@@ -81,12 +76,12 @@ export function Default(_args: Record<string, unknown>) {
       {...createUserProfileAddPhoneFixture({
         onVerified: value => setPhones(current => [...current, { id: `phone_${Date.now()}`, value, isVerified: true }]),
       })}
-      onConnectAccount={() => undefined}
+      onConnectAccount={connections.onConnect}
       onDeleteAccount={() => Promise.resolve()}
       onManageEmail={() => undefined}
       onManagePhone={() => undefined}
       onProfilePictureChange={showFile}
-      onRemoveConnectedAccount={() => undefined}
+      onRemoveConnectedAccount={connections.onRemove}
       onRemoveProfilePicture={clearImage}
       onRemoveEmail={id => setEmails(current => current.filter(email => email.id !== id))}
       onRemovePhone={id => setPhones(current => current.filter(phone => phone.id !== id))}
diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-connected-accounts-actions.test.tsx b/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-connected-accounts-actions.test.tsx
new file mode 100644
index 00000000000..d9ef673f720
--- /dev/null
+++ b/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-connected-accounts-actions.test.tsx
@@ -0,0 +1,86 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { MosaicProvider } from '../../../MosaicProvider';
+import { UserProfileConnectedAccountsSectionView } from '../user-profile-connected-accounts-section.view';
+
+const account = { id: 'github', provider: 'GitHub', identifier: 'test' };
+
+function renderAccounts(onRemove: (id: string) => void) {
+  return render(
+    <MosaicProvider>
+      <UserProfileConnectedAccountsSectionView
+        accounts={[account]}
+        onRemove={onRemove}
+      />
+    </MosaicProvider>,
+  );
+}
+
+async function openRemoval(user: ReturnType<typeof userEvent.setup>) {
+  await user.click(screen.getByRole('button', { name: 'Manage GitHub' }));
+  await user.click(screen.getByRole('menuitem', { name: 'Remove' }));
+}
+
+describe('connected account removal', () => {
+  it('returns keyboard focus to the menu when canceled', async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+    renderAccounts(onRemove);
+    const trigger = screen.getByRole('button', { name: 'Manage GitHub' });
+    trigger.focus();
+    await user.keyboard('{Enter}{Enter}');
+    expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+    await user.keyboard('{Escape}');
+    await waitFor(() => expect(trigger).toHaveFocus());
+    expect(onRemove).not.toHaveBeenCalled();
+  });
+
+  it('closes confirmation when the caller removes the account', async () => {
+    const user = userEvent.setup();
+    function Example() {
+      const [accounts, setAccounts] = useState([account]);
+      return (
+        <MosaicProvider>
+          <UserProfileConnectedAccountsSectionView
+            accounts={accounts}
+            onRemove={id => setAccounts(current => current.filter(item => item.id !== id))}
+          />
+        </MosaicProvider>
+      );
+    }
+    render(<Example />);
+    await openRemoval(user);
+    await user.click(within(screen.getByRole('alertdialog')).getByRole('button', { name: 'Remove' }));
+    await waitFor(() => expect(screen.queryByRole('button', { name: 'Manage GitHub' })).not.toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
+  });
+
+  it('shows a removal failure and allows retrying', async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+    function Example() {
+      const [removalError, setRemovalError] = useState<string>();
+      return (
+        <MosaicProvider>
+          <UserProfileConnectedAccountsSectionView
+            accounts={[{ ...account, removalError }]}
+            onRemove={id => {
+              onRemove(id);
+              setRemovalError(onRemove.mock.calls.length === 1 ? 'Unable to disconnect' : undefined);
+            }}
+          />
+        </MosaicProvider>
+      );
+    }
+    render(<Example />);
+    await openRemoval(user);
+    await user.click(within(screen.getByRole('alertdialog')).getByRole('button', { name: 'Remove' }));
+    expect(await screen.findByRole('alert')).toHaveTextContent('Unable to disconnect');
+    await user.click(within(screen.getByRole('alertdialog')).getByRole('button', { name: 'Remove' }));
+    expect(onRemove).toHaveBeenCalledTimes(2);
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-connected-accounts-section.view.test.tsx b/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-connected-accounts-section.view.test.tsx
new file mode 100644
index 00000000000..f7cd162a1ec
--- /dev/null
+++ b/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-connected-accounts-section.view.test.tsx
@@ -0,0 +1,112 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { UserProfileConnectedAccountsSectionView } from '../user-profile-connected-accounts-section.view';
+
+const account = { id: 'account_1', provider: 'Google', identifier: 'test@example.com' };
+
+describe('connected accounts section', () => {
+  it.each([{ availableProviders: [] }, { availableProviders: [{ id: 'google', provider: 'Google' }] }])(
+    'hides the entire section without accounts or actionable providers (%j)',
+    ({ availableProviders }) => {
+      const { container } = render(
+        <UserProfileConnectedAccountsSectionView
+          accounts={[]}
+          availableProviders={availableProviders}
+        />,
+      );
+      expect(container).toBeEmptyDOMElement();
+    },
+  );
+
+  it('shows provider names without announcing decorative logos', () => {
+    render(
+      <UserProfileConnectedAccountsSectionView
+        accounts={[{ ...account, iconUrl: 'https://img.clerk.com/static/google.svg' }]}
+      />,
+    );
+    expect(screen.getByText('Google')).toBeVisible();
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('shows connection errors while keeping Connect available', () => {
+    render(
+      <UserProfileConnectedAccountsSectionView
+        accounts={[]}
+        availableProviders={[{ id: 'apple', provider: 'Apple', connectError: 'Connection failed' }]}
+        onConnect={vi.fn()}
+      />,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Connection failed');
+    expect(screen.getByRole('button', { name: 'Connect Apple' })).toBeEnabled();
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+
+  it('keeps confirmation open for pending and error props and forwards retry', async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+    const { rerender } = render(
+      <UserProfileConnectedAccountsSectionView
+        accounts={[account]}
+        onRemove={onRemove}
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: 'Manage Google' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Remove' }));
+    const dialog = screen.getByRole('alertdialog');
+    expect(dialog).toHaveTextContent('dependent features');
+    await user.click(within(dialog).getByRole('button', { name: 'Remove', exact: true }));
+    expect(onRemove).toHaveBeenCalledExactlyOnceWith('account_1');
+    rerender(
+      <UserProfileConnectedAccountsSectionView
+        accounts={[{ ...account, isRemoving: true }]}
+        onRemove={onRemove}
+      />,
+    );
+    expect(within(dialog).getByRole('button', { name: 'Remove', exact: true })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+    expect(within(dialog).getByRole('progressbar')).toBeInTheDocument();
+    await user.click(within(dialog).getByRole('button', { name: 'Remove', exact: true }));
+    expect(onRemove).toHaveBeenCalledTimes(1);
+    expect(within(dialog).getByRole('button', { name: 'Cancel' })).toBeDisabled();
+    await user.click(within(dialog).getByRole('button', { name: 'Cancel' }));
+    expect(dialog).toBeInTheDocument();
+    rerender(
+      <UserProfileConnectedAccountsSectionView
+        accounts={[{ ...account, removalError: 'Try again' }]}
+        onRemove={onRemove}
+      />,
+    );
+    expect(within(dialog).getByRole('alert')).toHaveTextContent('Try again');
+    expect(within(dialog).getByRole('button', { name: 'Cancel' })).toBeEnabled();
+    await user.click(within(dialog).getByRole('button', { name: 'Remove', exact: true }));
+    expect(onRemove).toHaveBeenCalledTimes(2);
+    await user.click(within(dialog).getByRole('button', { name: 'Cancel' }));
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
+    expect(screen.getByRole('button', { name: 'Manage Google' })).toHaveFocus();
+  });
+
+  it('renders reconnect and verification errors without a generic manage action', async () => {
+    const user = userEvent.setup();
+    const onReconnect = vi.fn();
+    render(
+      <UserProfileConnectedAccountsSectionView
+        accounts={[
+          { ...account, status: 'reconnect', reconnectError: 'Reconnection failed' },
+          { id: 'other', provider: 'Other', status: 'error', verificationError: 'Provider error' },
+        ]}
+        onReconnect={onReconnect}
+      />,
+    );
+    expect(screen.getByText('Disconnected')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Reconnect' })).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Manage Google' }));
+    expect(screen.getByRole('menuitem', { name: 'Reconnect' })).toBeEnabled();
+    expect(screen.getByText('Provider error')).toBeInTheDocument();
+    expect(screen.getAllByRole('alert').some(alert => alert.textContent?.includes('Reconnection failed'))).toBe(true);
+    expect(screen.queryByRole('button', { name: 'Manage Other' })).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx b/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx
index 6901098a761..b1ab09dbfa4 100644
--- a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx
+++ b/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx
@@ -29,6 +29,24 @@ function renderView(overrides: Partial<UserProfileProfilePanelViewProps> = {}) {
 }
 
 describe('UserProfileProfilePanelView', () => {
+  it('hides connected accounts when only providers without a connect callback are supplied', () => {
+    renderView({
+      connectedAccounts: [],
+      availableConnectionProviders: [{ id: 'google', provider: 'Google' }],
+    });
+    expect(screen.queryByRole('region', { name: 'Connected accounts' })).not.toBeInTheDocument();
+  });
+
+  it('keeps available providers visible without connected accounts', () => {
+    const onConnectAccount = vi.fn();
+    renderView({
+      connectedAccounts: [],
+      availableConnectionProviders: [{ id: 'google', provider: 'Google' }],
+      onConnectAccount,
+    });
+    expect(screen.getByRole('button', { name: 'Connect Google' })).toBeVisible();
+  });
+
   it.each([false, true])('formats normalized phone numbers with multiple accounts set to %s', allowMultipleAccounts => {
     renderView({
       allowMultipleAccounts,
@@ -196,44 +214,33 @@ describe('UserProfileProfilePanelView', () => {
   });
 
   it('renders connected accounts and the danger zone when provided', async () => {
-    const onConnectAccount = vi.fn();
-    const onManageConnectedAccount = vi.fn();
+    const onRemoveConnectedAccount = vi.fn();
     const onDeleteAccount = vi.fn(() => Promise.resolve());
     const user = userEvent.setup();
     renderView({
       connectedAccounts: [
         { id: 'google', provider: 'Google', identifier: 'test@google.com', iconUrl: 'https://example.com/google.svg' },
-        { id: 'apple', provider: 'Apple', connected: false },
       ],
-      onConnectAccount,
-      onManageConnectedAccount,
+      onRemoveConnectedAccount,
       onDeleteAccount,
     });
 
     expect(screen.getByRole('heading', { level: 4, name: 'Connected accounts' })).toBeInTheDocument();
-    expect(
-      screen.getByRole('region', { name: 'Connected accounts' }).querySelector('.cl-section-media[data-size="lg"] img'),
-    ).toHaveAttribute('src', 'https://example.com/google.svg');
+    expect(screen.getByText('Google')).toBeVisible();
     expect(screen.getByRole('heading', { level: 4, name: 'Danger zone' })).toBeInTheDocument();
     expect(screen.getByText('Delete account', { selector: '.cl-section-label' })).toBeInTheDocument();
     expect(screen.getByText('Permanently delete this account and all its data. This cannot be undone.')).toHaveClass(
       'cl-section-description',
     );
-    await user.click(screen.getByRole('button', { name: 'Manage Google' }));
-    expect(onManageConnectedAccount).not.toHaveBeenCalled();
-    await user.click(screen.getByRole('menuitem', { name: 'Manage' }));
-    await user.click(screen.getByRole('button', { name: 'Connect' }));
     await user.click(screen.getByRole('button', { name: 'Delete account' }));
     const deleteDialog = screen.getByRole('dialog');
     await user.type(within(deleteDialog).getByRole('textbox'), 'Delete account');
     await user.click(within(deleteDialog).getByRole('button', { name: 'Delete account' }));
 
-    expect(onManageConnectedAccount).toHaveBeenCalledWith('google');
-    expect(onConnectAccount).toHaveBeenCalledWith('apple');
     expect(onDeleteAccount).toHaveBeenCalledOnce();
   });
 
-  it('renders provider images in icon frames', () => {
+  it('renders connected provider and Web3 images inside icon frames', () => {
     const { container } = renderView({
       connectedAccounts: [{ id: 'google', provider: 'Google', iconUrl: '/google.svg' }],
       web3Wallets: [{ id: 'metamask', provider: 'MetaMask', iconUrl: '/metamask.svg' }],
@@ -242,6 +249,7 @@ describe('UserProfileProfilePanelView', () => {
     const frames = container.querySelectorAll('.cl-icon-frame');
     const images = container.querySelectorAll('img');
     expect(frames).toHaveLength(2);
+    expect(screen.queryByRole('img', { name: 'Google' })).not.toBeInTheDocument();
     expect(frames[0]).toContainElement(images[0]);
     expect(frames[1]).toContainElement(images[1]);
     frames.forEach(frame => expect(frame.closest('.cl-section-media')).toHaveAttribute('data-size', 'lg'));
@@ -459,6 +467,12 @@ describe('UserProfileProfilePanelView', () => {
     const removeConnectedAccount = screen.getByRole('menuitem', { name: 'Remove' });
     expect(removeConnectedAccount).toHaveAttribute('data-color', 'negative');
     await user.click(removeConnectedAccount);
+    expect(onRemoveConnectedAccount).not.toHaveBeenCalled();
+    await user.click(
+      within(screen.getByRole('alertdialog', { name: 'Remove connected account' })).getByRole('button', {
+        name: 'Remove',
+      }),
+    );
     expect(onRemoveConnectedAccount).toHaveBeenCalledWith('github');
   });
 
diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-connected-account-row.view.tsx b/packages/ui/src/mosaic/features/user-profile/user-profile-connected-account-row.view.tsx
new file mode 100644
index 00000000000..e2b1b7152a4
--- /dev/null
+++ b/packages/ui/src/mosaic/features/user-profile/user-profile-connected-account-row.view.tsx
@@ -0,0 +1,115 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+
+import { Badge } from '../../components/badge';
+import { Button } from '../../components/button';
+import { Icon, IconFrame } from '../../components/icon';
+import { Section } from '../../components/section';
+import type { UserProfileMenuAction } from './user-profile-action-menu';
+import { UserProfileActionMenu } from './user-profile-action-menu';
+import { userProfileConnectedAccountsMessages as m } from './user-profile-connected-accounts.messages';
+import { styles } from './user-profile-connected-accounts.styles';
+import type { UserProfileConnectedAccount } from './user-profile-connected-accounts-section.view';
+import { UserProfileRemoveConnectedAccountDialog } from './user-profile-remove-connected-account.dialog';
+
+export function UserProfileConnectedAccountRowView({
+  account,
+  onConnect,
+  onReconnect,
+  onRemove,
+}: {
+  account: UserProfileConnectedAccount;
+  onConnect?: (id: string) => void;
+  onReconnect?: (id: string) => void;
+  onRemove?: (id: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const iconUrl = account.iconUrl?.trim();
+  const actions: UserProfileMenuAction[] = [];
+  if (account.status === 'reconnect' && onReconnect) {
+    actions.push({ label: m.reconnect, onClick: () => onReconnect(account.id) });
+  }
+  if (onRemove && account.canRemove !== false) {
+    actions.push({ label: m.remove, color: 'negative', onClick: () => setOpen(true) });
+  }
+  return (
+    <Section.Row xstyle={onConnect && styles.connectRow}>
+      <Section.Item>
+        <Section.Media size='lg'>
+          <IconFrame>
+            {iconUrl ? (
+              <img
+                src={iconUrl}
+                alt=''
+                aria-hidden
+                {...stylex.props(styles.icon)}
+              />
+            ) : (
+              <span
+                aria-hidden
+                {...stylex.props(styles.fallback)}
+              >
+                {account.provider.trim().charAt(0).toUpperCase()}
+              </span>
+            )}
+          </IconFrame>
+        </Section.Media>
+        <Section.Content>
+          <Section.Label xstyle={styles.label}>
+            <span title={account.provider}>{account.provider}</span>
+            {account.status === 'reconnect' ? <Badge color='warning'>{m.disconnected}</Badge> : null}
+          </Section.Label>
+          {account.identifier ? (
+            <Section.Description
+              xstyle={styles.text}
+              title={account.identifier}
+            >
+              {account.identifier}
+            </Section.Description>
+          ) : null}
+        </Section.Content>
+        {onConnect ? (
+          <Section.Actions>
+            <Button
+              size='sm'
+              variant='outline'
+              color='neutral'
+              aria-label={m.connectLabel.replace('{provider}', account.provider)}
+              onClick={() => onConnect(account.id)}
+            >
+              {m.connect}
+              <Icon
+                name='arrow-right-top'
+                placement='inline-end'
+                size='sm'
+              />
+            </Button>
+          </Section.Actions>
+        ) : actions.length > 0 ? (
+          <Section.Actions>
+            <UserProfileActionMenu
+              label={m.manageLabel.replace('{provider}', account.provider)}
+              actions={actions}
+            >
+              {onRemove && account.canRemove !== false ? (
+                <UserProfileRemoveConnectedAccountDialog
+                  provider={account.provider}
+                  open={open}
+                  onOpenChange={setOpen}
+                  onConfirm={() => onRemove(account.id)}
+                  isPending={account.isRemoving}
+                  errorMessage={account.removalError}
+                />
+              ) : null}
+            </UserProfileActionMenu>
+          </Section.Actions>
+        ) : null}
+      </Section.Item>
+      {account.connectError ? <Section.Error>{account.connectError}</Section.Error> : null}
+      {account.reconnectError ? <Section.Error>{account.reconnectError}</Section.Error> : null}
+      {account.status === 'error' && account.verificationError ? (
+        <Section.Error>{account.verificationError}</Section.Error>
+      ) : null}
+    </Section.Row>
+  );
+}
diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts-section.view.tsx b/packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts-section.view.tsx
index f0b4b990981..5a951ec4fe0 100644
--- a/packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts-section.view.tsx
+++ b/packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts-section.view.tsx
@@ -1,80 +1,64 @@
-import { Button } from '../../components/button';
-import { Icon } from '../../components/icon';
 import { Section } from '../../components/section';
-import type { UserProfileMenuAction } from './user-profile-action-menu';
-import { UserProfileActionMenu } from './user-profile-action-menu';
-import { UserProfileProviderIcon } from './user-profile-provider-icon';
+import { UserProfileConnectedAccountRowView } from './user-profile-connected-account-row.view';
+import { userProfileConnectedAccountsMessages as m } from './user-profile-connected-accounts.messages';
 
-export interface UserProfileConnectedAccount {
+export interface UserProfileConnectionProvider {
   id: string;
   provider: string;
-  identifier?: string;
   iconUrl?: string;
-  connected?: boolean;
+  connectError?: string;
+}
+
+export interface UserProfileConnectedAccount extends UserProfileConnectionProvider {
+  identifier?: string;
   canRemove?: boolean;
+  status?: 'connected' | 'reconnect' | 'error';
+  verificationError?: string;
+  reconnectError?: string;
+  isRemoving?: boolean;
+  removalError?: string;
 }
 
 export interface UserProfileConnectedAccountsSectionViewProps {
   accounts: UserProfileConnectedAccount[];
+  availableProviders?: UserProfileConnectionProvider[];
   onConnect?: (id: string) => void;
-  onManage?: (id: string) => void;
+  onReconnect?: (id: string) => void;
   onRemove?: (id: string) => void;
 }
 
 export function UserProfileConnectedAccountsSectionView({
   accounts,
+  availableProviders = [],
   onConnect,
-  onManage,
+  onReconnect,
   onRemove,
 }: UserProfileConnectedAccountsSectionViewProps) {
+  if (accounts.length === 0 && (availableProviders.length === 0 || !onConnect)) {
+    return null;
+  }
+
   return (
     <Section.Root>
-      <Section.Title>Connected accounts</Section.Title>
+      <Section.Title>{m.title}</Section.Title>
       <Section.Group>
-        {accounts.map(account => {
-          const connected = account.connected ?? Boolean(account.identifier);
-          const actions: UserProfileMenuAction[] = [];
-          if (onRemove && account.canRemove !== false) {
-            actions.push({ label: 'Remove', color: 'negative', onClick: () => onRemove(account.id) });
-          } else if (!onRemove && onManage) {
-            actions.push({ label: 'Manage', onClick: () => onManage(account.id) });
-          }
-
-          return (
-            <Section.Row key={account.id}>
-              <Section.Item>
-                {account.iconUrl ? <UserProfileProviderIcon iconUrl={account.iconUrl} /> : null}
-                <Section.Content>
-                  <Section.Label>{account.provider}</Section.Label>
-                  {account.identifier ? <Section.Description>{account.identifier}</Section.Description> : null}
-                </Section.Content>
-                <Section.Actions>
-                  {connected ? (
-                    <UserProfileActionMenu
-                      actions={actions}
-                      label={`Manage ${account.provider}`}
-                    />
-                  ) : null}
-                  {!connected && onConnect ? (
-                    <Button
-                      color='neutral'
-                      size='sm'
-                      variant='outline'
-                      onClick={() => onConnect(account.id)}
-                    >
-                      Connect
-                      <Icon
-                        name='arrow-right-top'
-                        placement='inline-end'
-                        size='sm'
-                      />
-                    </Button>
-                  ) : null}
-                </Section.Actions>
-              </Section.Item>
-            </Section.Row>
-          );
-        })}
+        {accounts.map(account => (
+          <UserProfileConnectedAccountRowView
+            key={account.id}
+            account={account}
+            onReconnect={onReconnect}
+            onRemove={onRemove}
+          />
+        ))}
+        {onConnect
+          ? availableProviders.map(provider => (
+              <UserProfileConnectedAccountRowView
+                key={provider.id}
+                account={provider}
+                onConnect={onConnect}
+              />
+            ))
+          : null}
       </Section.Group>
     </Section.Root>
   );
diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts.messages.ts b/packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts.messages.ts
new file mode 100644
index 00000000000..1efd85fdc17
--- /dev/null
+++ b/packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts.messages.ts
@@ -0,0 +1,17 @@
+export const userProfileConnectedAccountsMessages = {
+  title: 'Connected accounts',
+  connect: 'Connect',
+  connectLabel: 'Connect {provider}',
+  reconnect: 'Reconnect',
+  disconnected: 'Disconnected',
+  manageLabel: 'Manage {provider}',
+  remove: 'Remove',
+  removeDialog: {
+    title: 'Remove connected account',
+    description:
+      '{provider} will be removed from this account. You will no longer be able to use this connected account and any dependent features will no longer work.',
+    confirm: 'Remove',
+    pending: 'Removing…',
+    cancel: 'Cancel',
+  },
+};
diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts.styles.ts b/packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts.styles.ts
new file mode 100644
index 00000000000..1cc5a4d1947
--- /dev/null
+++ b/packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts.styles.ts
@@ -0,0 +1,21 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { colorVars, radiusVars, space } from '../../tokens.stylex';
+
+export const styles = stylex.create({
+  connectRow: { justifyContent: 'center' },
+  icon: { display: 'block', objectFit: 'contain', height: space['6'], width: space['6'] },
+  fallback: {
+    borderRadius: radiusVars['--cl-radius-sm'],
+    alignItems: 'center',
+    backgroundColor: `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 8%, transparent)`,
+    color: colorVars['--cl-color-neutral'],
+    display: 'inline-flex',
+    fontSize: '0.625rem',
+    justifyContent: 'center',
+    height: space['6'],
+    width: space['6'],
+  },
+  label: { gap: space['2'], alignItems: 'center', display: 'flex', flexWrap: 'wrap' },
+  text: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 },
+});
diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-profile-panel.view.tsx b/packages/ui/src/mosaic/features/user-profile/user-profile-profile-panel.view.tsx
index 774c0681390..f80433f4901 100644
--- a/packages/ui/src/mosaic/features/user-profile/user-profile-profile-panel.view.tsx
+++ b/packages/ui/src/mosaic/features/user-profile/user-profile-profile-panel.view.tsx
@@ -9,7 +9,10 @@ import type {
   UserProfilePhone,
 } from './user-profile-account-section/user-profile-account-section.view';
 import { UserProfileAccountSectionView } from './user-profile-account-section/user-profile-account-section.view';
-import type { UserProfileConnectedAccount } from './user-profile-connected-accounts-section.view';
+import type {
+  UserProfileConnectedAccount,
+  UserProfileConnectionProvider,
+} from './user-profile-connected-accounts-section.view';
 import { UserProfileConnectedAccountsSectionView } from './user-profile-connected-accounts-section.view';
 import { UserProfileDeleteSectionView } from './user-profile-delete-section/user-profile-delete-section.view';
 import { styles } from './user-profile-profile-panel.styles';
@@ -25,9 +28,10 @@ export type { UserProfileEditNameValue } from './user-profile-account-section/us
 
 export interface UserProfileProfilePanelViewProps extends UserProfileAccountSectionViewProps {
   connectedAccounts?: UserProfileConnectedAccount[];
+  availableConnectionProviders?: UserProfileConnectionProvider[];
+  onReconnectAccount?: (id: string) => void;
   web3Wallets?: UserProfileWeb3Wallet[];
   onConnectAccount?: (id: string) => void;
-  onManageConnectedAccount?: (id: string) => void;
   onRemoveConnectedAccount?: (id: string) => void;
   onConnectWeb3Wallet?: (id: string) => void;
   onManageWeb3Wallet?: (id: string) => void;
@@ -50,6 +54,8 @@ export function UserProfileProfilePanelView({
   emails = [],
   phones = [],
   connectedAccounts = [],
+  availableConnectionProviders = [],
+  onReconnectAccount,
   web3Wallets = [],
   onProfilePictureChange,
   onProfilePictureReject,
@@ -70,7 +76,6 @@ export function UserProfileProfilePanelView({
   onSetPrimaryPhone,
   onRemovePhone,
   onConnectAccount,
-  onManageConnectedAccount,
   onRemoveConnectedAccount,
   onConnectWeb3Wallet,
   onManageWeb3Wallet,
@@ -113,11 +118,12 @@ export function UserProfileProfilePanelView({
           onSubmitName={onSubmitName}
           onSubmitUsername={onSubmitUsername}
         />
-        {connectedAccounts.length > 0 ? (
+        {connectedAccounts.length > 0 || (availableConnectionProviders.length > 0 && onConnectAccount) ? (
           <UserProfileConnectedAccountsSectionView
             accounts={connectedAccounts}
+            availableProviders={availableConnectionProviders}
+            onReconnect={onReconnectAccount}
             onConnect={onConnectAccount}
-            onManage={onManageConnectedAccount}
             onRemove={onRemoveConnectedAccount}
           />
         ) : null}
diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-remove-connected-account.dialog.tsx b/packages/ui/src/mosaic/features/user-profile/user-profile-remove-connected-account.dialog.tsx
new file mode 100644
index 00000000000..2664ea40c4f
--- /dev/null
+++ b/packages/ui/src/mosaic/features/user-profile/user-profile-remove-connected-account.dialog.tsx
@@ -0,0 +1,64 @@
+import { Banner } from '../../components/banner';
+import { Button, SubmitButton } from '../../components/button';
+import { Dialog } from '../../components/dialog';
+import { Heading } from '../../components/heading';
+import { Text } from '../../components/text';
+import { userProfileConnectedAccountsMessages as m } from './user-profile-connected-accounts.messages';
+
+export interface UserProfileRemoveConnectedAccountDialogProps {
+  provider: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  isPending?: boolean;
+  errorMessage?: string;
+}
+
+export function UserProfileRemoveConnectedAccountDialog({
+  provider,
+  open,
+  onOpenChange,
+  onConfirm,
+  isPending,
+  errorMessage,
+}: UserProfileRemoveConnectedAccountDialogProps) {
+  return (
+    <Dialog.Root
+      role='alertdialog'
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      <Dialog.Popup>
+        <Dialog.Title render={<Heading size='sm' />}>{m.removeDialog.title}</Dialog.Title>
+        <Dialog.Description render={<Text />}>
+          {m.removeDialog.description.replace('{provider}', provider)}
+        </Dialog.Description>
+        {errorMessage ? (
+          <Banner.Root
+            role='alert'
+            color='negative'
+          >
+            <Banner.Label>{errorMessage}</Banner.Label>
+          </Banner.Root>
+        ) : null}
+        <Dialog.Actions>
+          <Dialog.Close
+            disabled={isPending}
+            render={<Button variant='outline' />}
+          >
+            {m.removeDialog.cancel}
+          </Dialog.Close>
+          <SubmitButton
+            type='button'
+            color='negative'
+            isPending={isPending}
+            pendingLabel={m.removeDialog.pending}
+            onClick={onConfirm}
+          >
+            {m.removeDialog.confirm}
+          </SubmitButton>
+        </Dialog.Actions>
+      </Dialog.Popup>
+    </Dialog.Root>
+  );
+}