diff --git a/.changeset/extend-mosaic-spacing-scale.md b/.changeset/extend-mosaic-spacing-scale.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/extend-mosaic-spacing-scale.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/user-profile-section-style-alignment.md b/.changeset/user-profile-section-style-alignment.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/user-profile-section-style-alignment.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/swingset/src/stories/section.mdx b/packages/swingset/src/stories/section.mdx
index 640904aedb6..c19ff9a638e 100644
--- a/packages/swingset/src/stories/section.mdx
+++ b/packages/swingset/src/stories/section.mdx
@@ -26,9 +26,9 @@ import { Section } from '@clerk/ui/mosaic/components/section';
 </Section.Root>
 ```
 
-`Section.Group` owns the outlined surface. Its direct `Section.Row` children own separation and may stack one or more `Section.Item` entries. Each item lays out optional media, flexible content, and trailing actions. `Section.Media` accepts `md` and `lg` sizes.
+`Section.Group` owns the outlined surface. Its direct `Section.Row` children own separation and may stack one or more `Section.Item` entries. Each item lays out optional media, flexible content, and trailing actions. `Section.Media` accepts `sm`, `md`, `lg`, and `xl` sizes.
 
-Use `Section.Items` for a nested value list beneath a row's header item. The row keeps an 8px header-to-list gap, nested items stack without gaps at a 44px minimum height, and their content receives 12px vertical padding.
+Use `Section.Items` for a nested value list beneath a row's header item. The row keeps a 12px header-to-list gap, and nested items stack without gaps with 4px vertical padding.
 
 ## Examples
 
diff --git a/packages/swingset/src/stories/section.stories.tsx b/packages/swingset/src/stories/section.stories.tsx
index 44dfec684c8..6cdc9b945c8 100644
--- a/packages/swingset/src/stories/section.stories.tsx
+++ b/packages/swingset/src/stories/section.stories.tsx
@@ -3,6 +3,7 @@ import { Badge } from '@clerk/ui/mosaic/components/badge';
 import { Button } from '@clerk/ui/mosaic/components/button';
 import { Icon } from '@clerk/ui/mosaic/components/icon';
 import { Section } from '@clerk/ui/mosaic/components/section';
+import * as stylex from '@stylexjs/stylex';
 
 import type { StoryMeta } from '@/lib/types';
 
@@ -10,13 +11,33 @@ export { default as __source } from './section.stories?raw';
 
 const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
 
+const styles = stylex.create({
+  providerMedia: {
+    backgroundColor: 'var(--cl-color-background)',
+    borderColor: 'light-dark(var(--cl-color-border-faded), var(--cl-color-background))',
+    borderRadius: 'var(--cl-radius-lg)',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+  },
+  providerIcon: {
+    display: 'block',
+    height: '20px',
+    width: '20px',
+  },
+});
+
 function ProviderIcon({ provider }: { provider: string }) {
   return (
-    <img
-      alt=''
-      src={providerIconUrl(provider)}
-      style={{ display: 'block', height: 24, width: 24 }}
-    />
+    <Section.Media
+      size='lg'
+      {...stylex.props(styles.providerMedia)}
+    >
+      <img
+        alt=''
+        src={providerIconUrl(provider)}
+        {...stylex.props(styles.providerIcon)}
+      />
+    </Section.Media>
   );
 }
 
@@ -33,18 +54,27 @@ export function Default() {
       <Section.Group>
         <Section.Row>
           <Section.Item>
-            <Section.Content>
-              <Section.Label>Profile picture</Section.Label>
-              <Section.Description>PNG or JPEG, Recommended size 1:1, up to 10MB.</Section.Description>
-            </Section.Content>
-            <Section.Actions>
-              <Avatar.Root size='lg'>
+            <Section.Media size='lg'>
+              <Avatar.Root size='fit'>
                 <Avatar.Image
                   alt='Preston Booth'
                   src='https://avatars.githubusercontent.com/u/51144033?v=4'
                 />
                 <Avatar.Fallback>PB</Avatar.Fallback>
               </Avatar.Root>
+            </Section.Media>
+            <Section.Content>
+              <Section.Label>Profile picture</Section.Label>
+              <Section.Description>Recommend size 1:1, up to 10MB.</Section.Description>
+            </Section.Content>
+            <Section.Actions>
+              <Button
+                color='neutral'
+                size='sm'
+                variant='outline'
+              >
+                Upload
+              </Button>
             </Section.Actions>
           </Section.Item>
         </Section.Row>
@@ -61,7 +91,7 @@ export function Default() {
                 size='sm'
                 variant='outline'
               >
-                Update name
+                Edit name
               </Button>
             </Section.Actions>
           </Section.Item>
@@ -79,7 +109,7 @@ export function Default() {
                 size='sm'
                 variant='outline'
               >
-                Update username
+                Edit username
               </Button>
             </Section.Actions>
           </Section.Item>
@@ -114,18 +144,27 @@ export function MultipleEmailAndPhoneNumbers() {
       <Section.Group>
         <Section.Row>
           <Section.Item>
-            <Section.Content>
-              <Section.Label>Profile picture</Section.Label>
-              <Section.Description>PNG or JPEG, Recommended size 1:1, up to 10MB.</Section.Description>
-            </Section.Content>
-            <Section.Actions>
-              <Avatar.Root size='lg'>
+            <Section.Media size='lg'>
+              <Avatar.Root size='fit'>
                 <Avatar.Image
                   alt='Preston Booth'
                   src='https://avatars.githubusercontent.com/u/51144033?v=4'
                 />
                 <Avatar.Fallback>PB</Avatar.Fallback>
               </Avatar.Root>
+            </Section.Media>
+            <Section.Content>
+              <Section.Label>Profile picture</Section.Label>
+              <Section.Description>Recommend size 1:1, up to 10MB.</Section.Description>
+            </Section.Content>
+            <Section.Actions>
+              <Button
+                color='neutral'
+                size='sm'
+                variant='outline'
+              >
+                Upload
+              </Button>
             </Section.Actions>
           </Section.Item>
         </Section.Row>
@@ -142,7 +181,7 @@ export function MultipleEmailAndPhoneNumbers() {
                 size='sm'
                 variant='outline'
               >
-                Update name
+                Edit name
               </Button>
             </Section.Actions>
           </Section.Item>
@@ -160,7 +199,7 @@ export function MultipleEmailAndPhoneNumbers() {
                 size='sm'
                 variant='outline'
               >
-                Update username
+                Edit username
               </Button>
             </Section.Actions>
           </Section.Item>
@@ -177,12 +216,7 @@ export function MultipleEmailAndPhoneNumbers() {
                 size='sm'
                 variant='outline'
               >
-                Add
-                <Icon
-                  name='plus'
-                  placement='inline-end'
-                  size='sm'
-                />
+                Add email
               </Button>
             </Section.Actions>
           </Section.Item>
@@ -236,12 +270,7 @@ export function MultipleEmailAndPhoneNumbers() {
                 size='sm'
                 variant='outline'
               >
-                Add
-                <Icon
-                  name='plus'
-                  placement='inline-end'
-                  size='sm'
-                />
+                Add phone number
               </Button>
             </Section.Actions>
           </Section.Item>
@@ -279,9 +308,7 @@ export function ConnectedAccounts() {
       <Section.Group>
         <Section.Row>
           <Section.Item>
-            <Section.Media>
-              <ProviderIcon provider='google' />
-            </Section.Media>
+            <ProviderIcon provider='google' />
             <Section.Content>
               <Section.Label>Google</Section.Label>
               <Section.Description>test@google.com</Section.Description>
@@ -301,9 +328,7 @@ export function ConnectedAccounts() {
         </Section.Row>
         <Section.Row>
           <Section.Item>
-            <Section.Media>
-              <ProviderIcon provider='apple' />
-            </Section.Media>
+            <ProviderIcon provider='apple' />
             <Section.Content>
               <Section.Label>Apple</Section.Label>
             </Section.Content>
@@ -314,6 +339,11 @@ export function ConnectedAccounts() {
                 variant='outline'
               >
                 Connect
+                <Icon
+                  name='arrow-right-top'
+                  placement='inline-end'
+                  size='sm'
+                />
               </Button>
             </Section.Actions>
           </Section.Item>
@@ -340,7 +370,7 @@ export function Destructive() {
               <Button
                 color='negative'
                 size='sm'
-                variant='ghost'
+                variant='outline'
               >
                 Delete account
               </Button>
diff --git a/packages/ui/src/mosaic/components/section/section.styles.ts b/packages/ui/src/mosaic/components/section/section.styles.ts
new file mode 100644
index 00000000000..df51f9e5472
--- /dev/null
+++ b/packages/ui/src/mosaic/components/section/section.styles.ts
@@ -0,0 +1,117 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { colorVars, fontWeightVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex';
+import { sectionItemsMarker } from './section.markers.stylex';
+
+/* eslint-disable @stylexjs/no-lookahead-selectors -- Mosaic's supported browsers include :has();
+   the marker keeps this selector scoped to Section.Items. */
+export const styles = stylex.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: space['2'],
+    width: '100%',
+  },
+  title: {
+    fontWeight: fontWeightVars['--cl-font-medium'],
+  },
+  group: {
+    borderColor: colorVars['--cl-color-border'],
+    borderRadius: radiusVars['--cl-radius-xl'],
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    overflow: 'hidden',
+    backgroundColor: colorVars['--cl-color-card'],
+    width: '100%',
+  },
+  row: {
+    marginInline: space['4'],
+    borderBlockStartColor: colorVars['--cl-color-border'],
+    borderBlockStartStyle: 'solid',
+    borderBlockStartWidth: {
+      default: '1px',
+      ':first-child': '0px',
+    },
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBlockEnd: {
+      default: space['4'],
+      [stylex.when.descendant('[data-nested]', sectionItemsMarker)]: space['1'],
+    },
+    paddingBlockStart: space['4'],
+    rowGap: {
+      default: space['2'],
+      [stylex.when.descendant('[data-nested]', sectionItemsMarker)]: space['3'],
+    },
+    minHeight: `calc(${space['18.5']} + 1px)`,
+    width: 'auto',
+  },
+  items: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+  },
+  item: {
+    alignItems: 'center',
+    columnGap: space['3'],
+    display: 'flex',
+    flexWrap: 'nowrap',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  nestedItem: {
+    paddingBlock: space['1'],
+  },
+  mediaBase: {
+    alignItems: 'center',
+    alignSelf: 'center',
+    aspectRatio: '1/1',
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'center',
+  },
+  mediaSm: {
+    height: space['4'],
+    width: space['4'],
+  },
+  mediaMd: {
+    height: space['6'],
+    width: space['6'],
+  },
+  mediaLg: {
+    height: space['10'],
+    width: space['10'],
+  },
+  mediaXl: {
+    height: space['12'],
+    width: space['12'],
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    justifyContent: 'center',
+    rowGap: space['0.5'],
+    minWidth: 0,
+  },
+  label: {
+    color: colorVars['--cl-color-card-foreground'],
+    fontSize: typeScaleVars['--cl-text-sm-size'],
+    fontWeight: fontWeightVars['--cl-font-medium'],
+    lineHeight: typeScaleVars['--cl-text-sm-leading'],
+  },
+  description: {
+    color: colorVars['--cl-color-neutral-faded'],
+    fontSize: typeScaleVars['--cl-text-sm-size'],
+    fontWeight: fontWeightVars['--cl-font-normal'],
+    lineHeight: typeScaleVars['--cl-text-sm-leading'],
+    textWrap: 'balance',
+  },
+  actions: {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'flex-end',
+  },
+});
+/* eslint-enable @stylexjs/no-lookahead-selectors */
diff --git a/packages/ui/src/mosaic/components/section/section.tsx b/packages/ui/src/mosaic/components/section/section.tsx
index 601e9bddfab..944166d2a8e 100644
--- a/packages/ui/src/mosaic/components/section/section.tsx
+++ b/packages/ui/src/mosaic/components/section/section.tsx
@@ -5,11 +5,11 @@ import React from 'react';
 
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
-import { colorVars, fontWeightVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex';
 import type { HeadingProps } from '../heading';
 import { Heading } from '../heading';
 import { reset } from '../reset.styles';
 import { sectionItemsMarker } from './section.markers.stylex';
+import { styles } from './section.styles';
 
 export type SectionRootProps = Omit<MosaicComponentProps<'section'>, 'title'>;
 export type SectionTitleProps = Omit<HeadingProps, 'size'>;
@@ -17,123 +17,18 @@ export type SectionGroupProps = MosaicComponentProps<'div'>;
 export type SectionRowProps = MosaicComponentProps<'div'>;
 export type SectionItemsProps = MosaicComponentProps<'div'>;
 export type SectionItemProps = MosaicComponentProps<'div'>;
-export type SectionMediaSize = 'sm' | 'md' | 'lg';
+export type SectionMediaSize = 'sm' | 'md' | 'lg' | 'xl';
 export type SectionMediaProps = MosaicComponentProps<'div'> & { size?: SectionMediaSize };
 export type SectionContentProps = MosaicComponentProps<'div'>;
 export type SectionLabelProps = MosaicComponentProps<'div'>;
 export type SectionDescriptionProps = MosaicComponentProps<'div'>;
 export type SectionActionsProps = MosaicComponentProps<'div'>;
 
-/* eslint-disable @stylexjs/no-lookahead-selectors -- Mosaic's supported browsers include :has();
-   the marker keeps this selector scoped to Section.Items. */
-const styles = stylex.create({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    rowGap: space['2'],
-    width: '100%',
-  },
-  group: {
-    borderColor: colorVars['--cl-color-border'],
-    borderRadius: radiusVars['--cl-radius-xl'],
-    borderStyle: 'solid',
-    borderWidth: '1px',
-    overflow: 'hidden',
-    backgroundColor: colorVars['--cl-color-background'],
-    width: '100%',
-  },
-  row: {
-    marginInline: space['4'],
-    borderBlockStartColor: colorVars['--cl-color-border'],
-    borderBlockStartStyle: 'solid',
-    borderBlockStartWidth: {
-      default: '1px',
-      ':first-child': '0px',
-    },
-    display: 'flex',
-    flexDirection: 'column',
-    paddingBlockEnd: {
-      default: space['4'],
-      [stylex.when.descendant('[data-nested]', sectionItemsMarker)]: space['1'],
-    },
-    paddingBlockStart: space['4'],
-    rowGap: space['2'],
-    width: 'auto',
-  },
-  items: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
-  item: {
-    alignItems: 'center',
-    columnGap: space['3'],
-    display: 'flex',
-    flexWrap: 'nowrap',
-    justifyContent: 'space-between',
-    width: '100%',
-  },
-  nestedItem: {
-    minHeight: space['11'],
-  },
-  mediaBase: {
-    alignItems: 'center',
-    alignSelf: 'center',
-    aspectRatio: '1/1',
-    display: 'flex',
-    flexShrink: 0,
-    justifyContent: 'center',
-  },
-  mediaSm: {
-    height: space['4'],
-    width: space['4'],
-  },
-  mediaMd: {
-    height: space['6'],
-    width: space['6'],
-  },
-  mediaLg: {
-    height: space['8'],
-    width: space['8'],
-  },
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 1,
-    justifyContent: 'center',
-    rowGap: space['0.5'],
-    minWidth: 0,
-  },
-  nestedContent: {
-    paddingBlock: space['3'],
-  },
-  label: {
-    color: colorVars['--cl-color-card-foreground'],
-    fontSize: typeScaleVars['--cl-text-sm-size'],
-    fontWeight: fontWeightVars['--cl-font-medium'],
-    lineHeight: typeScaleVars['--cl-text-sm-leading'],
-  },
-  description: {
-    color: colorVars['--cl-color-neutral-faded'],
-    fontSize: typeScaleVars['--cl-text-sm-size'],
-    fontWeight: fontWeightVars['--cl-font-medium'],
-    lineHeight: typeScaleVars['--cl-text-sm-leading'],
-    textWrap: 'balance',
-  },
-  actions: {
-    alignItems: 'center',
-    display: 'flex',
-    flexShrink: 0,
-    justifyContent: 'flex-end',
-    marginInlineStart: space['3'],
-  },
-});
-/* eslint-enable @stylexjs/no-lookahead-selectors */
-
 const mediaSizes = {
   sm: styles.mediaSm,
   md: styles.mediaMd,
   lg: styles.mediaLg,
+  xl: styles.mediaXl,
 };
 
 const SectionTitleContext = React.createContext<React.Dispatch<React.SetStateAction<string[]>> | null>(null);
@@ -183,7 +78,7 @@ const Title = React.forwardRef<HTMLHeadingElement, SectionTitleProps>(function S
       id={id}
       render={render ?? (props => <h4 {...props} />)}
       size='sm'
-      {...mergeStyleProps(themeProps('section-title'), className, style)}
+      {...mergeStyleProps(themeProps('section-title'), stylex.props(styles.title), className, style)}
       {...rest}
     />
   );
@@ -296,7 +191,7 @@ const Content = React.forwardRef<HTMLDivElement, SectionContentProps>(function S
     props: {
       ...mergeStyleProps(
         themeProps('section-content', { nested }),
-        stylex.props(reset.base, styles.content, nested && styles.nestedContent),
+        stylex.props(reset.base, styles.content),
         className,
         style,
       ),
diff --git a/packages/ui/src/mosaic/icons/registry.tsx b/packages/ui/src/mosaic/icons/registry.tsx
index 26a28cda818..a652c87c706 100644
--- a/packages/ui/src/mosaic/icons/registry.tsx
+++ b/packages/ui/src/mosaic/icons/registry.tsx
@@ -94,6 +94,13 @@ const Plus = glyph(
   />,
 );
 
+const ArrowRightTop = glyph(
+  <path
+    d='M6.35014 5.40727L10.8285 5.17157M10.8285 5.17157L10.5928 9.64991M10.8285 5.17157L5.17163 10.8284'
+    {...strokeProps}
+  />,
+);
+
 const Pen = glyph(
   <path
     d='M12.03 3.972a1.59 1.59 0 0 0-2.261 0l-.01.01-5.056 4.89a1.25 1.25 0 0 0-.351.627l-.61 2.747 2.542-.598a1.25 1.25 0 0 0 .59-.325L12.085 6.2c.573-.638.549-1.62-.057-2.228M8.71 2.909a3.09 3.09 0 0 1 4.383.005 3.126 3.126 0 0 1 .06 4.341l-5.228 5.138a2.75 2.75 0 0 1-1.298.715l-3.705.872a.75.75 0 0 1-.904-.893l.87-3.914a2.75 2.75 0 0 1 .772-1.38z'
@@ -142,6 +149,7 @@ const AlertCircle = glyph(
 /** Runtime name → glyph map. `Icon`'s `name` prop is typed from these keys. */
 export const iconRegistry = {
   'alert-circle': AlertCircle,
+  'arrow-right-top': ArrowRightTop,
   'chevron-right': ChevronRight,
   'chevron-left': ChevronLeft,
   'chevron-down': ChevronDown,
diff --git a/packages/ui/src/mosaic/tokens.stylex.ts b/packages/ui/src/mosaic/tokens.stylex.ts
index a7de1823eba..7d285c86ae2 100644
--- a/packages/ui/src/mosaic/tokens.stylex.ts
+++ b/packages/ui/src/mosaic/tokens.stylex.ts
@@ -44,7 +44,7 @@ const colorDefaults = {
   '--cl-color-warning-foreground': 'oklch(0.985 0 0)',
   '--cl-color-warning-faded': 'light-dark(oklch(0.9799 0.0147 70.89), oklch(0.2725 0.0547 55.7))',
 
-  '--cl-color-background': 'light-dark(oklch(0.985 0 0), oklch(0.205 0 0))',
+  '--cl-color-background': 'light-dark(oklch(0.985 0 0), oklch(0.2686 0 0))',
 
   '--cl-color-card': 'light-dark(oklch(1 0 0), oklch(0.205 0 0))',
   '--cl-color-card-foreground': 'light-dark(oklch(0.145 0 0), oklch(0.985 0 0))',
@@ -53,7 +53,7 @@ const colorDefaults = {
   '--cl-color-input-placeholder': '#a3a3a3',
 
   '--cl-color-border': 'light-dark(oklch(0.9219 0 0), oklch(0.3715 0 0))',
-  '--cl-color-border-faded': 'light-dark(oklch(0.9587 0.0027 286.35), oklch(0.296 0.0126 285.61))',
+  '--cl-color-border-faded': 'light-dark(oklch(0.9702 0 0), oklch(0.296 0.0126 285.61))',
 } as const;
 
 export const colorVars = stylex.defineVars(colorDefaults);
@@ -205,14 +205,76 @@ export const space = stylex.defineVars({
   '4': step(4),
   '4.5': step(4.5),
   '5': step(5),
+  '5.5': step(5.5),
   '6': step(6),
+  '6.5': step(6.5),
   '7': step(7),
+  '7.5': step(7.5),
   '8': step(8),
+  '8.5': step(8.5),
   '9': step(9),
+  '9.5': step(9.5),
   '10': step(10),
+  '10.5': step(10.5),
   '11': step(11),
+  '11.5': step(11.5),
   '12': step(12),
+  '12.5': step(12.5),
   '13': step(13),
+  '13.5': step(13.5),
+  '14': step(14),
+  '14.5': step(14.5),
+  '15': step(15),
+  '15.5': step(15.5),
+  '16': step(16),
+  '16.5': step(16.5),
+  '17': step(17),
+  '17.5': step(17.5),
+  '18': step(18),
+  '18.5': step(18.5),
+  '19': step(19),
+  '19.5': step(19.5),
+  '20': step(20),
+  '20.5': step(20.5),
+  '21': step(21),
+  '21.5': step(21.5),
+  '22': step(22),
+  '22.5': step(22.5),
+  '23': step(23),
+  '23.5': step(23.5),
+  '24': step(24),
+  '24.5': step(24.5),
+  '25': step(25),
+  '25.5': step(25.5),
+  '26': step(26),
+  '26.5': step(26.5),
+  '27': step(27),
+  '27.5': step(27.5),
+  '28': step(28),
+  '28.5': step(28.5),
+  '29': step(29),
+  '29.5': step(29.5),
+  '30': step(30),
+  '30.5': step(30.5),
+  '31': step(31),
+  '31.5': step(31.5),
+  '32': step(32),
+  '32.5': step(32.5),
+  '33': step(33),
+  '33.5': step(33.5),
+  '34': step(34),
+  '34.5': step(34.5),
+  '35': step(35),
+  '35.5': step(35.5),
+  '36': step(36),
+  '36.5': step(36.5),
+  '37': step(37),
+  '37.5': step(37.5),
+  '38': step(38),
+  '38.5': step(38.5),
+  '39': step(39),
+  '39.5': step(39.5),
+  '40': step(40),
 });
 
 // =============================================================================