diff --git a/.changeset/wild-carpets-make.md b/.changeset/wild-carpets-make.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/wild-carpets-make.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/swingset/src/stories/fixtures/user-profile-edit-name.ts b/packages/swingset/src/stories/fixtures/user-profile-edit-name.ts
index c6e729cfecd..7604e9f09b1 100644
--- a/packages/swingset/src/stories/fixtures/user-profile-edit-name.ts
+++ b/packages/swingset/src/stories/fixtures/user-profile-edit-name.ts
@@ -1,6 +1,6 @@
 import type { UserProfileFormError } from '@clerk/ui/mosaic/user-profile/user-profile-account-section/user-profile-account-section.types';
 import { UserProfileSaveError } from '@clerk/ui/mosaic/user-profile/user-profile-account-section/user-profile-account-section.types';
-import type { UserProfileEditNameValue } from '@clerk/ui/mosaic/user-profile/user-profile-account-section/user-profile-edit-name.view';
+import type { UserProfileEditNameValue } from '@clerk/ui/mosaic/user-profile/user-profile-account-section/user-profile-edit-name.dialog';
 import { useState } from 'react';
 
 export interface UserProfileEditNameFixtureOptions {
diff --git a/packages/ui/src/mosaic/user-profile/__tests__/user-profile-edit-name.view.test.tsx b/packages/ui/src/mosaic/user-profile/__tests__/user-profile-edit-name.dialog.test.tsx
similarity index 92%
rename from packages/ui/src/mosaic/user-profile/__tests__/user-profile-edit-name.view.test.tsx
rename to packages/ui/src/mosaic/user-profile/__tests__/user-profile-edit-name.dialog.test.tsx
index 3676ee01d29..7578a86d811 100644
--- a/packages/ui/src/mosaic/user-profile/__tests__/user-profile-edit-name.view.test.tsx
+++ b/packages/ui/src/mosaic/user-profile/__tests__/user-profile-edit-name.dialog.test.tsx
@@ -4,11 +4,11 @@ import { describe, expect, it, vi } from 'vitest';
 
 import { Button } from '../../components/button';
 import { MosaicProvider } from '../../MosaicProvider';
-import type { UserProfileEditNameViewProps } from '../user-profile-account-section/user-profile-edit-name.view';
-import { UserProfileEditNameView } from '../user-profile-account-section/user-profile-edit-name.view';
+import type { UserProfileEditNameDialogProps } from '../user-profile-account-section/user-profile-edit-name.dialog';
+import { UserProfileEditNameDialog } from '../user-profile-account-section/user-profile-edit-name.dialog';
 
-function renderView(overrides: Partial<UserProfileEditNameViewProps> = {}) {
-  const props: UserProfileEditNameViewProps = {
+function renderView(overrides: Partial<UserProfileEditNameDialogProps> = {}) {
+  const props: UserProfileEditNameDialogProps = {
     open: true,
     onOpenChange: vi.fn(),
     firstName: 'Preston',
@@ -22,7 +22,7 @@ function renderView(overrides: Partial<UserProfileEditNameViewProps> = {}) {
     props,
     ...render(
       <MosaicProvider>
-        <UserProfileEditNameView {...props} />
+        <UserProfileEditNameDialog {...props} />
       </MosaicProvider>,
     ),
   };
@@ -32,7 +32,7 @@ const firstNameField = () => screen.getByLabelText('First name');
 const lastNameField = () => screen.getByLabelText('Last name');
 const saveButton = () => screen.getByRole('button', { name: 'Save changes' });
 
-describe('UserProfileEditNameView', () => {
+describe('UserProfileEditNameDialog', () => {
   it('renders nothing until the caller opens it', () => {
     renderView({ open: false });
 
diff --git a/packages/ui/src/mosaic/user-profile/__tests__/user-profile-edit-username.view.test.tsx b/packages/ui/src/mosaic/user-profile/__tests__/user-profile-edit-username.dialog.test.tsx
similarity index 90%
rename from packages/ui/src/mosaic/user-profile/__tests__/user-profile-edit-username.view.test.tsx
rename to packages/ui/src/mosaic/user-profile/__tests__/user-profile-edit-username.dialog.test.tsx
index 1ea123854d3..19d94dc953a 100644
--- a/packages/ui/src/mosaic/user-profile/__tests__/user-profile-edit-username.view.test.tsx
+++ b/packages/ui/src/mosaic/user-profile/__tests__/user-profile-edit-username.dialog.test.tsx
@@ -4,11 +4,11 @@ import { describe, expect, it, vi } from 'vitest';
 
 import { Button } from '../../components/button';
 import { MosaicProvider } from '../../MosaicProvider';
-import type { UserProfileEditUsernameViewProps } from '../user-profile-account-section/user-profile-edit-username.view';
-import { UserProfileEditUsernameView } from '../user-profile-account-section/user-profile-edit-username.view';
+import type { UserProfileEditUsernameDialogProps } from '../user-profile-account-section/user-profile-edit-username.dialog';
+import { UserProfileEditUsernameDialog } from '../user-profile-account-section/user-profile-edit-username.dialog';
 
-function renderView(overrides: Partial<UserProfileEditUsernameViewProps> = {}) {
-  const props: UserProfileEditUsernameViewProps = {
+function renderView(overrides: Partial<UserProfileEditUsernameDialogProps> = {}) {
+  const props: UserProfileEditUsernameDialogProps = {
     open: true,
     onOpenChange: vi.fn(),
     username: 'prestonxyz',
@@ -20,7 +20,7 @@ function renderView(overrides: Partial<UserProfileEditUsernameViewProps> = {}) {
     props,
     ...render(
       <MosaicProvider>
-        <UserProfileEditUsernameView {...props} />
+        <UserProfileEditUsernameDialog {...props} />
       </MosaicProvider>,
     ),
   };
@@ -29,7 +29,7 @@ function renderView(overrides: Partial<UserProfileEditUsernameViewProps> = {}) {
 const usernameField = () => screen.getByLabelText('Username');
 const saveButton = () => screen.getByRole('button', { name: 'Save changes' });
 
-describe('UserProfileEditUsernameView', () => {
+describe('UserProfileEditUsernameDialog', () => {
   it('renders nothing until the caller opens it', () => {
     renderView({ open: false });
 
diff --git a/packages/ui/src/mosaic/user-profile/__tests__/user-profile-picture-row.view.test.tsx b/packages/ui/src/mosaic/user-profile/__tests__/user-profile-picture-row.view.test.tsx
new file mode 100644
index 00000000000..6fac24fcc7b
--- /dev/null
+++ b/packages/ui/src/mosaic/user-profile/__tests__/user-profile-picture-row.view.test.tsx
@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { MosaicProvider } from '../../MosaicProvider';
+import type { UserProfilePictureRowViewProps } from '../user-profile-account-section/user-profile-picture-row.view';
+import { UserProfilePictureRowView } from '../user-profile-account-section/user-profile-picture-row.view';
+
+function renderView(overrides: Partial<UserProfilePictureRowViewProps> = {}) {
+  return render(
+    <MosaicProvider>
+      <UserProfilePictureRowView
+        name='Preston Booth'
+        {...overrides}
+      />
+    </MosaicProvider>,
+  );
+}
+
+describe('UserProfilePictureRowView', () => {
+  it('renders and clears the error supplied by the section', () => {
+    const { rerender } = renderView({ errorMessage: 'File size exceeds the maximum limit of 10MB.' });
+
+    expect(screen.getByRole('alert')).toHaveTextContent('File size exceeds the maximum limit of 10MB.');
+
+    rerender(
+      <MosaicProvider>
+        <UserProfilePictureRowView name='Preston Booth' />
+      </MosaicProvider>,
+    );
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  it('offers Upload while the avatar is only a generated default', () => {
+    renderView({
+      hasImage: false,
+      imageUrl: 'https://img.clerk.com/generated-default.png',
+      onChange: vi.fn(),
+      onRemove: vi.fn(),
+    });
+
+    expect(screen.getByRole('button', { name: 'Upload' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Manage profile picture' })).toBeNull();
+  });
+
+  it('offers change and remove in a menu once a profile picture is set', async () => {
+    const onChange = vi.fn();
+    const onRemove = vi.fn();
+    const user = userEvent.setup();
+    renderView({
+      hasImage: true,
+      imageUrl: 'https://example.com/avatar.png',
+      onChange,
+      onRemove,
+    });
+
+    expect(screen.queryByRole('button', { name: 'Upload' })).toBeNull();
+    await user.click(screen.getByRole('button', { name: 'Manage profile picture' }));
+
+    expect(screen.getByRole('menuitem', { name: 'Change avatar' })).toBeInTheDocument();
+    await user.click(screen.getByRole('menuitem', { name: 'Remove avatar' }));
+
+    expect(onRemove).toHaveBeenCalledOnce();
+  });
+});
diff --git a/packages/ui/src/mosaic/user-profile/__tests__/user-profile-profile-panel.view.test.tsx b/packages/ui/src/mosaic/user-profile/__tests__/user-profile-profile-panel.view.test.tsx
index 391198f30e5..55235bb68be 100644
--- a/packages/ui/src/mosaic/user-profile/__tests__/user-profile-profile-panel.view.test.tsx
+++ b/packages/ui/src/mosaic/user-profile/__tests__/user-profile-profile-panel.view.test.tsx
@@ -71,9 +71,11 @@ describe('UserProfileProfilePanelView', () => {
     expect(screen.queryByRole('button', { name: 'Manage profile picture' })).toBeNull();
 
     const input = container.querySelector<HTMLInputElement>('input[type="file"]');
-    expect(input).not.toBeNull();
+    if (!input) {
+      throw new Error('File picker not found');
+    }
     const file = new File(['avatar'], 'avatar.png', { type: 'image/png' });
-    await user.upload(input as HTMLInputElement, file);
+    await user.upload(input, file);
 
     expect(onProfilePictureChange).toHaveBeenCalledWith(file);
   });
@@ -85,7 +87,11 @@ describe('UserProfileProfilePanelView', () => {
     const { container } = renderView({ onProfilePictureChange, onProfilePictureReject });
 
     const oversized = new File([new Uint8Array(10 * 1000 * 1000 + 1)], 'big.png', { type: 'image/png' });
-    await user.upload(container.querySelector<HTMLInputElement>('input[type="file"]') as HTMLInputElement, oversized);
+    const input = container.querySelector<HTMLInputElement>('input[type="file"]');
+    if (!input) {
+      throw new Error('File picker not found');
+    }
+    await user.upload(input, oversized);
 
     expect(onProfilePictureChange).not.toHaveBeenCalled();
     expect(onProfilePictureReject).toHaveBeenCalledWith([{ file: oversized, reason: 'size' }]);
@@ -96,7 +102,10 @@ describe('UserProfileProfilePanelView', () => {
   it('clears the rejection once an acceptable file is picked', async () => {
     const user = userEvent.setup();
     const { container } = renderView({ onProfilePictureChange: vi.fn() });
-    const input = container.querySelector<HTMLInputElement>('input[type="file"]') as HTMLInputElement;
+    const input = container.querySelector<HTMLInputElement>('input[type="file"]');
+    if (!input) {
+      throw new Error('File picker not found');
+    }
 
     await user.upload(input, new File([new Uint8Array(10 * 1000 * 1000 + 1)], 'big.png', { type: 'image/png' }));
     expect(screen.getByRole('alert')).toBeInTheDocument();
@@ -105,38 +114,6 @@ describe('UserProfileProfilePanelView', () => {
     expect(screen.queryByRole('alert')).toBeNull();
   });
 
-  it('offers Upload while the avatar is only a generated default', () => {
-    renderView({
-      hasImage: false,
-      imageUrl: 'https://img.clerk.com/generated-default.png',
-      onProfilePictureChange: vi.fn(),
-      onRemoveProfilePicture: vi.fn(),
-    });
-
-    expect(screen.getByRole('button', { name: 'Upload' })).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Manage profile picture' })).toBeNull();
-  });
-
-  it('offers change and remove in a menu once a profile picture is set', async () => {
-    const onProfilePictureChange = vi.fn();
-    const onRemoveProfilePicture = vi.fn();
-    const user = userEvent.setup();
-    renderView({
-      hasImage: true,
-      imageUrl: 'https://example.com/avatar.png',
-      onProfilePictureChange,
-      onRemoveProfilePicture,
-    });
-
-    expect(screen.queryByRole('button', { name: 'Upload' })).toBeNull();
-    await user.click(screen.getByRole('button', { name: 'Manage profile picture' }));
-
-    expect(screen.getByRole('menuitem', { name: 'Change avatar' })).toBeInTheDocument();
-    await user.click(screen.getByRole('menuitem', { name: 'Remove avatar' }));
-
-    expect(onRemoveProfilePicture).toHaveBeenCalledOnce();
-  });
-
   it('breaks out both contact types when multiple accounts are allowed', () => {
     renderView({
       emails: [{ id: 'email_1', value: 'item1@clerk.dev', isDefault: true }],
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-account-section.styles.ts b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-account-section.styles.ts
new file mode 100644
index 00000000000..e171b342c3a
--- /dev/null
+++ b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-account-section.styles.ts
@@ -0,0 +1,12 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { space } from '../../tokens.stylex';
+
+export const styles = stylex.create({
+  sections: {
+    gap: space['8'],
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+  },
+});
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-account-section.view.tsx b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-account-section.view.tsx
index d389730b187..0f293495329 100644
--- a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-account-section.view.tsx
+++ b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-account-section.view.tsx
@@ -1,27 +1,20 @@
-import type { FileRejection, FileRejectionReason } from '@clerk/headless/file-upload';
-import { FileUpload } from '@clerk/headless/file-upload';
+import type { FileRejection } from '@clerk/headless/file-upload';
 import * as stylex from '@stylexjs/stylex';
-import { useState } from 'react';
 
-import { Avatar } from '../../components/avatar';
 import { Badge } from '../../components/badge';
 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 { styles } from '../user-profile-profile-panel.styles';
+import { styles as panelStyles } from '../user-profile-profile-panel.styles';
 import { fill, userProfileAccountSectionBase as m } from './user-profile-account-section.messages';
+import { styles } from './user-profile-account-section.styles';
 import type { UserProfileNameAttribute } from './user-profile-account-section.types';
-import { useUserProfileEditNameController } from './user-profile-edit-name.controller';
-import type { UserProfileEditNameValue } from './user-profile-edit-name.view';
-import { UserProfileEditNameView } from './user-profile-edit-name.view';
-import { useUserProfileEditUsernameController } from './user-profile-edit-username.controller';
-import { UserProfileEditUsernameView } from './user-profile-edit-username.view';
-
-const PROFILE_PICTURE_MIME_TYPES = 'image/png,image/jpeg,image/gif,image/webp';
-/** Matches the limit the row's own description advertises. */
-const PROFILE_PICTURE_MAX_BYTES = 10 * 1000 * 1000;
+import type { UserProfileEditNameValue } from './user-profile-edit-name.dialog';
+import { UserProfileNameRowView } from './user-profile-name-row.view';
+import { UserProfilePictureRowView } from './user-profile-picture-row.view';
+import { UserProfileUsernameRowView } from './user-profile-username-row.view';
 
 export interface UserProfileEmail {
   id: string;
@@ -102,92 +95,31 @@ export function UserProfileAccountSectionView({
   onSetPrimaryPhone,
   onRemovePhone,
 }: UserProfileAccountSectionViewProps) {
-  const initials = name
-    .split(/\s+/)
-    .map(part => part[0])
-    .join('')
-    .slice(0, 2)
-    .toUpperCase();
-  const [rejection, setRejection] = useState<FileRejectionReason | null>(null);
-
   return (
-    <FileUpload.Root
-      accept={PROFILE_PICTURE_MIME_TYPES}
-      maxSize={PROFILE_PICTURE_MAX_BYTES}
-      render={<div {...stylex.props(styles.sections)} />}
-      onReject={rejections => {
-        setRejection(rejections[0]?.reason ?? null);
-        onProfilePictureReject?.(rejections);
-      }}
-      onValueChange={files => {
-        const file = files[0];
-        if (file) {
-          setRejection(null);
-          onProfilePictureChange?.(file);
-        }
-      }}
-    >
+    <div {...stylex.props(styles.sections)}>
       <Section.Root aria-label={m.sectionLabel}>
         <Section.Title>{m.sectionTitle}</Section.Title>
         <Section.Group>
-          <Section.Row>
-            <Section.Item>
-              <Section.Media size='lg'>
-                <Avatar.Root size='fit'>
-                  <Avatar.Image
-                    alt={name}
-                    src={imageUrl}
-                  />
-                  <Avatar.Fallback>{initials}</Avatar.Fallback>
-                </Avatar.Root>
-              </Section.Media>
-              <Section.Content>
-                <Section.Label>{m.picture.label}</Section.Label>
-                <Section.Description>{m.picture.description}</Section.Description>
-              </Section.Content>
-              <ProfilePictureActions
-                canChange={Boolean(onProfilePictureChange)}
-                hasImage={hasImage}
-                onRemove={onRemoveProfilePicture}
-              />
-            </Section.Item>
-            {rejection ? <Section.Error>{m.picture.errors[rejection]}</Section.Error> : null}
-          </Section.Row>
-          <Section.Row>
-            <Section.Item>
-              <Section.Content>
-                <Section.Label>{m.name.label}</Section.Label>
-                <Section.Description>{name}</Section.Description>
-              </Section.Content>
-              {onSubmitName ? (
-                <Section.Actions>
-                  <EditName
-                    firstName={firstName}
-                    lastName={lastName}
-                    firstNameAttribute={firstNameAttribute}
-                    lastNameAttribute={lastNameAttribute}
-                    onSubmit={onSubmitName}
-                  />
-                </Section.Actions>
-              ) : null}
-            </Section.Item>
-          </Section.Row>
-          <Section.Row>
-            <Section.Item>
-              <Section.Content>
-                <Section.Label>{m.username.label}</Section.Label>
-                <Section.Description>{username}</Section.Description>
-              </Section.Content>
-              {onSubmitUsername ? (
-                <Section.Actions>
-                  <EditUsername
-                    username={username}
-                    onSubmit={onSubmitUsername}
-                  />
-                </Section.Actions>
-              ) : null}
-            </Section.Item>
-          </Section.Row>
+          <UserProfilePictureRowView
+            name={name}
+            imageUrl={imageUrl}
+            hasImage={hasImage}
+            onChange={onProfilePictureChange}
+            onReject={onProfilePictureReject}
+            onRemove={onRemoveProfilePicture}
+          />
+          <UserProfileNameRowView
+            name={name}
+            firstName={firstName}
+            lastName={lastName}
+            firstNameAttribute={firstNameAttribute}
+            lastNameAttribute={lastNameAttribute}
+            onSubmit={onSubmitName}
+          />
+          <UserProfileUsernameRowView
+            username={username}
+            onSubmit={onSubmitUsername}
+          />
           {!allowMultipleAccounts ? (
             <SingleContactRow
               items={emails}
@@ -232,113 +164,7 @@ export function UserProfileAccountSectionView({
           onVerify={onVerifyPhone}
         />
       ) : null}
-    </FileUpload.Root>
-  );
-}
-
-function ProfilePictureActions({
-  hasImage,
-  canChange,
-  onRemove,
-}: {
-  hasImage: boolean;
-  canChange: boolean;
-  onRemove?: () => void;
-}) {
-  const { openFilePicker } = FileUpload.useFileUpload();
-  const actions: UserProfileMenuAction[] = [];
-
-  if (hasImage && canChange) {
-    actions.push({ label: m.picture.change, icon: 'pen', onClick: openFilePicker });
-  }
-
-  if (hasImage && onRemove) {
-    actions.push({ label: m.picture.remove, icon: 'close', onClick: onRemove });
-  }
-
-  if (actions.length > 0) {
-    return (
-      <Section.Actions>
-        <UserProfileActionMenu
-          actions={actions}
-          label={m.picture.manage}
-        />
-      </Section.Actions>
-    );
-  }
-
-  if (!hasImage && canChange) {
-    return (
-      <Section.Actions>
-        <FileUpload.Trigger
-          render={
-            <Button
-              color='neutral'
-              size='sm'
-              variant='outline'
-            />
-          }
-        >
-          {m.picture.upload}
-        </FileUpload.Trigger>
-      </Section.Actions>
-    );
-  }
-
-  return null;
-}
-
-function EditName({
-  firstName,
-  lastName,
-  firstNameAttribute,
-  lastNameAttribute,
-  onSubmit,
-}: {
-  firstName?: string;
-  lastName?: string;
-  firstNameAttribute?: UserProfileNameAttribute;
-  lastNameAttribute?: UserProfileNameAttribute;
-  onSubmit: (value: UserProfileEditNameValue) => Promise<void>;
-}) {
-  const controller = useUserProfileEditNameController({ firstName, lastName, onSubmit });
-
-  return (
-    <UserProfileEditNameView
-      {...controller}
-      firstNameAttribute={firstNameAttribute}
-      lastNameAttribute={lastNameAttribute}
-      open={controller.isOpen}
-      trigger={
-        <Button
-          color='neutral'
-          size='sm'
-          variant='outline'
-        >
-          {m.name.edit}
-        </Button>
-      }
-    />
-  );
-}
-
-function EditUsername({ username, onSubmit }: { username: string; onSubmit: (username: string) => Promise<void> }) {
-  const controller = useUserProfileEditUsernameController({ username, onSubmit });
-
-  return (
-    <UserProfileEditUsernameView
-      {...controller}
-      open={controller.isOpen}
-      trigger={
-        <Button
-          color='neutral'
-          size='sm'
-          variant='outline'
-        >
-          {m.username.edit}
-        </Button>
-      }
-    />
+    </div>
   );
 }
 
@@ -375,7 +201,7 @@ function SingleContactRow({ kind, label, items, onAdd, onManage }: ContactSectio
         <Section.Content>
           <Section.Label>{label}</Section.Label>
           {item ? (
-            <Section.Description xstyle={styles.contactValue}>
+            <Section.Description xstyle={panelStyles.contactValue}>
               <span>{item.value}</span>
               {item.isDefault ? <Badge color='neutral'>{m.primary}</Badge> : null}
             </Section.Description>
@@ -464,7 +290,7 @@ function ContactRow({ kind, label, items, onAdd, onManage, onVerify, onSetPrimar
             return (
               <Section.Item key={item.id}>
                 <Section.Content>
-                  <Section.Description xstyle={styles.contactValue}>
+                  <Section.Description xstyle={panelStyles.contactValue}>
                     <span>{item.value}</span>
                     {item.isDefault ? <Badge color='neutral'>{m.primary}</Badge> : null}
                   </Section.Description>
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-name.controller.ts b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-name.controller.ts
index 7b521029cf6..3a2af00f2e6 100644
--- a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-name.controller.ts
+++ b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-name.controller.ts
@@ -2,7 +2,7 @@ import { setup } from '../../machine/setup';
 import { useMachine } from '../../machine/useMachine';
 import type { UserProfileFormError } from './user-profile-account-section.types';
 import { UserProfileSaveError } from './user-profile-account-section.types';
-import type { UserProfileEditNameField, UserProfileEditNameValue } from './user-profile-edit-name.view';
+import type { UserProfileEditNameField, UserProfileEditNameValue } from './user-profile-edit-name.dialog';
 
 export interface UserProfileEditNameContext {
   saveName: (value: UserProfileEditNameValue) => Promise<void>;
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-name.view.tsx b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-name.dialog.tsx
similarity index 97%
rename from packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-name.view.tsx
rename to packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-name.dialog.tsx
index 3c917184f57..46f17bfd989 100644
--- a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-name.view.tsx
+++ b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-name.dialog.tsx
@@ -18,7 +18,7 @@ export interface UserProfileEditNameValue {
   lastName: string;
 }
 
-export interface UserProfileEditNameViewProps {
+export interface UserProfileEditNameDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   /** Rendering the opener here is what returns focus to it on close. */
@@ -40,7 +40,7 @@ export interface UserProfileEditNameViewProps {
  * `required` the instance asks for: the name the API will take is the API's to decide, so the action
  * stays live and a rejection comes back as `error`.
  */
-export function UserProfileEditNameView({
+export function UserProfileEditNameDialog({
   open,
   onOpenChange,
   trigger,
@@ -53,7 +53,7 @@ export function UserProfileEditNameView({
   isSaving = false,
   error,
   onSubmit,
-}: UserProfileEditNameViewProps) {
+}: UserProfileEditNameDialogProps) {
   const formId = useId();
   const initialFocusRef = useRef<HTMLInputElement>(null);
   const { enabled: showFirstName = true, required: firstNameRequired = false } = firstNameAttribute;
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-username.controller.ts b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-username.controller.ts
index a9cd97a4797..e17d1b74a9b 100644
--- a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-username.controller.ts
+++ b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-username.controller.ts
@@ -2,7 +2,7 @@ import { setup } from '../../machine/setup';
 import { useMachine } from '../../machine/useMachine';
 import type { UserProfileFormError } from './user-profile-account-section.types';
 import { UserProfileSaveError } from './user-profile-account-section.types';
-import type { UserProfileEditUsernameField } from './user-profile-edit-username.view';
+import type { UserProfileEditUsernameField } from './user-profile-edit-username.dialog';
 
 export interface UserProfileEditUsernameContext {
   saveUsername: (username: string) => Promise<void>;
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-username.view.tsx b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-username.dialog.tsx
similarity index 95%
rename from packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-username.view.tsx
rename to packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-username.dialog.tsx
index 28382a0dc9c..ea3372e4082 100644
--- a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-username.view.tsx
+++ b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-edit-username.dialog.tsx
@@ -13,7 +13,7 @@ import type { UserProfileFormError } from './user-profile-account-section.types'
 
 export type UserProfileEditUsernameField = 'username';
 
-export interface UserProfileEditUsernameViewProps {
+export interface UserProfileEditUsernameDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   trigger?: DialogTriggerProps['render'];
@@ -25,7 +25,7 @@ export interface UserProfileEditUsernameViewProps {
   onSubmit: () => void;
 }
 
-export function UserProfileEditUsernameView({
+export function UserProfileEditUsernameDialog({
   open,
   onOpenChange,
   trigger,
@@ -35,7 +35,7 @@ export function UserProfileEditUsernameView({
   isSaving = false,
   error,
   onSubmit,
-}: UserProfileEditUsernameViewProps) {
+}: UserProfileEditUsernameDialogProps) {
   const formId = useId();
   const usernameRef = useRef<HTMLInputElement>(null);
 
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-name-row.view.tsx b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-name-row.view.tsx
new file mode 100644
index 00000000000..bb94d3b00f2
--- /dev/null
+++ b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-name-row.view.tsx
@@ -0,0 +1,81 @@
+import { Button } from '../../components/button';
+import { Section } from '../../components/section';
+import { userProfileAccountSectionBase as m } from './user-profile-account-section.messages';
+import type { UserProfileNameAttribute } from './user-profile-account-section.types';
+import { useUserProfileEditNameController } from './user-profile-edit-name.controller';
+import type { UserProfileEditNameValue } from './user-profile-edit-name.dialog';
+import { UserProfileEditNameDialog } from './user-profile-edit-name.dialog';
+
+export interface UserProfileNameRowViewProps {
+  name: string;
+  firstName?: string;
+  lastName?: string;
+  firstNameAttribute?: UserProfileNameAttribute;
+  lastNameAttribute?: UserProfileNameAttribute;
+  onSubmit?: (value: UserProfileEditNameValue) => Promise<void>;
+}
+
+export function UserProfileNameRowView({
+  name,
+  firstName,
+  lastName,
+  firstNameAttribute,
+  lastNameAttribute,
+  onSubmit,
+}: UserProfileNameRowViewProps) {
+  return (
+    <Section.Row>
+      <Section.Item>
+        <Section.Content>
+          <Section.Label>{m.name.label}</Section.Label>
+          <Section.Description>{name}</Section.Description>
+        </Section.Content>
+        {onSubmit ? (
+          <Section.Actions>
+            <EditName
+              firstName={firstName}
+              lastName={lastName}
+              firstNameAttribute={firstNameAttribute}
+              lastNameAttribute={lastNameAttribute}
+              onSubmit={onSubmit}
+            />
+          </Section.Actions>
+        ) : null}
+      </Section.Item>
+    </Section.Row>
+  );
+}
+
+function EditName({
+  firstName,
+  lastName,
+  firstNameAttribute,
+  lastNameAttribute,
+  onSubmit,
+}: {
+  firstName?: string;
+  lastName?: string;
+  firstNameAttribute?: UserProfileNameAttribute;
+  lastNameAttribute?: UserProfileNameAttribute;
+  onSubmit: (value: UserProfileEditNameValue) => Promise<void>;
+}) {
+  const controller = useUserProfileEditNameController({ firstName, lastName, onSubmit });
+
+  return (
+    <UserProfileEditNameDialog
+      {...controller}
+      firstNameAttribute={firstNameAttribute}
+      lastNameAttribute={lastNameAttribute}
+      open={controller.isOpen}
+      trigger={
+        <Button
+          color='neutral'
+          size='sm'
+          variant='outline'
+        >
+          {m.name.edit}
+        </Button>
+      }
+    />
+  );
+}
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx
new file mode 100644
index 00000000000..87dad81fe40
--- /dev/null
+++ b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx
@@ -0,0 +1,137 @@
+import type { FileRejection } from '@clerk/headless/file-upload';
+import { FileUpload } from '@clerk/headless/file-upload';
+import { useState } from 'react';
+
+import { Avatar } from '../../components/avatar';
+import { Button } from '../../components/button';
+import { Section } from '../../components/section';
+import type { UserProfileMenuAction } from '../user-profile-action-menu';
+import { UserProfileActionMenu } from '../user-profile-action-menu';
+import { userProfileAccountSectionBase as m } from './user-profile-account-section.messages';
+
+const PROFILE_PICTURE_MIME_TYPES = 'image/png,image/jpeg,image/gif,image/webp';
+/** Matches the limit the row's own description advertises. */
+const PROFILE_PICTURE_MAX_BYTES = 10 * 1000 * 1000;
+
+export interface UserProfilePictureRowViewProps {
+  name: string;
+  imageUrl?: string;
+  hasImage?: boolean;
+  errorMessage?: string;
+  onChange?: (file: File) => void;
+  onReject?: (rejections: FileRejection[]) => void;
+  onRemove?: () => void;
+}
+
+export function UserProfilePictureRowView({
+  name,
+  imageUrl,
+  hasImage = false,
+  errorMessage,
+  onChange,
+  onReject,
+  onRemove,
+}: UserProfilePictureRowViewProps) {
+  const [rejectionError, setRejectionError] = useState<string>();
+  const displayedError = errorMessage ?? rejectionError;
+  const initials = name
+    .split(/\s+/)
+    .map(part => part[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+
+  return (
+    <FileUpload.Root
+      accept={PROFILE_PICTURE_MIME_TYPES}
+      maxSize={PROFILE_PICTURE_MAX_BYTES}
+      render={<Section.Row />}
+      onReject={rejections => {
+        const rejection = rejections[0];
+        setRejectionError(rejection ? m.picture.errors[rejection.reason] : undefined);
+        onReject?.(rejections);
+      }}
+      onValueChange={files => {
+        const file = files[0];
+        if (file) {
+          setRejectionError(undefined);
+          onChange?.(file);
+        }
+      }}
+    >
+      <Section.Item>
+        <Section.Media size='lg'>
+          <Avatar.Root size='fit'>
+            <Avatar.Image
+              alt={name}
+              src={imageUrl}
+            />
+            <Avatar.Fallback>{initials}</Avatar.Fallback>
+          </Avatar.Root>
+        </Section.Media>
+        <Section.Content>
+          <Section.Label>{m.picture.label}</Section.Label>
+          <Section.Description>{m.picture.description}</Section.Description>
+        </Section.Content>
+        <ProfilePictureActions
+          canChange={Boolean(onChange)}
+          hasImage={hasImage}
+          onRemove={onRemove}
+        />
+      </Section.Item>
+      {displayedError ? <Section.Error>{displayedError}</Section.Error> : null}
+    </FileUpload.Root>
+  );
+}
+
+function ProfilePictureActions({
+  hasImage,
+  canChange,
+  onRemove,
+}: {
+  hasImage: boolean;
+  canChange: boolean;
+  onRemove?: () => void;
+}) {
+  const { openFilePicker } = FileUpload.useFileUpload();
+  const actions: UserProfileMenuAction[] = [];
+
+  if (hasImage && canChange) {
+    actions.push({ label: m.picture.change, icon: 'pen', onClick: openFilePicker });
+  }
+
+  if (hasImage && onRemove) {
+    actions.push({ label: m.picture.remove, icon: 'close', onClick: onRemove });
+  }
+
+  if (actions.length > 0) {
+    return (
+      <Section.Actions>
+        <UserProfileActionMenu
+          actions={actions}
+          label={m.picture.manage}
+        />
+      </Section.Actions>
+    );
+  }
+
+  if (!hasImage && canChange) {
+    return (
+      <Section.Actions>
+        <FileUpload.Trigger
+          render={
+            <Button
+              color='neutral'
+              size='sm'
+              variant='outline'
+            />
+          }
+        >
+          {m.picture.upload}
+        </FileUpload.Trigger>
+      </Section.Actions>
+    );
+  }
+
+  return null;
+}
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-username-row.view.tsx b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-username-row.view.tsx
new file mode 100644
index 00000000000..b5adeb23984
--- /dev/null
+++ b/packages/ui/src/mosaic/user-profile/user-profile-account-section/user-profile-username-row.view.tsx
@@ -0,0 +1,51 @@
+import { Button } from '../../components/button';
+import { Section } from '../../components/section';
+import { userProfileAccountSectionBase as m } from './user-profile-account-section.messages';
+import { useUserProfileEditUsernameController } from './user-profile-edit-username.controller';
+import { UserProfileEditUsernameDialog } from './user-profile-edit-username.dialog';
+
+export interface UserProfileUsernameRowViewProps {
+  username: string;
+  onSubmit?: (username: string) => Promise<void>;
+}
+
+export function UserProfileUsernameRowView({ username, onSubmit }: UserProfileUsernameRowViewProps) {
+  return (
+    <Section.Row>
+      <Section.Item>
+        <Section.Content>
+          <Section.Label>{m.username.label}</Section.Label>
+          <Section.Description>{username}</Section.Description>
+        </Section.Content>
+        {onSubmit ? (
+          <Section.Actions>
+            <EditUsername
+              username={username}
+              onSubmit={onSubmit}
+            />
+          </Section.Actions>
+        ) : null}
+      </Section.Item>
+    </Section.Row>
+  );
+}
+
+function EditUsername({ username, onSubmit }: { username: string; onSubmit: (username: string) => Promise<void> }) {
+  const controller = useUserProfileEditUsernameController({ username, onSubmit });
+
+  return (
+    <UserProfileEditUsernameDialog
+      {...controller}
+      open={controller.isOpen}
+      trigger={
+        <Button
+          color='neutral'
+          size='sm'
+          variant='outline'
+        >
+          {m.username.edit}
+        </Button>
+      }
+    />
+  );
+}
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx b/packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx
index e77f736336e..fe998896899 100644
--- a/packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx
+++ b/packages/ui/src/mosaic/user-profile/user-profile-profile-panel.view.tsx
@@ -21,7 +21,7 @@ export type {
   UserProfileFormError,
   UserProfileNameAttribute,
 } from './user-profile-account-section/user-profile-account-section.types';
-export type { UserProfileEditNameValue } from './user-profile-account-section/user-profile-edit-name.view';
+export type { UserProfileEditNameValue } from './user-profile-account-section/user-profile-edit-name.dialog';
 
 export interface UserProfileProfilePanelViewProps extends UserProfileAccountSectionViewProps {
   connectedAccounts?: UserProfileConnectedAccount[];