diff --git a/.changeset/organization-profile-general.md b/.changeset/organization-profile-general.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/organization-profile-general.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/mosaic/src/components/action-menu/action-menu.test.tsx b/packages/mosaic/src/components/action-menu/action-menu.test.tsx
new file mode 100644
index 00000000000..56bf6f568f9
--- /dev/null
+++ b/packages/mosaic/src/components/action-menu/action-menu.test.tsx
@@ -0,0 +1,39 @@
+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 { ActionMenu } from './action-menu';
+
+function renderMenu(actions: Parameters<typeof ActionMenu>[0]['actions']) {
+  return render(
+    <MosaicProvider>
+      <ActionMenu
+        label='Manage passkey'
+        actions={actions}
+      />
+    </MosaicProvider>,
+  );
+}
+
+describe('Mosaic ActionMenu', () => {
+  it('renders nothing when there are no actions', () => {
+    renderMenu([]);
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('names its trigger and runs the action picked from it', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    renderMenu([
+      { label: 'Rename', icon: 'pen', onClick },
+      { label: 'Remove', color: 'negative', onClick: vi.fn() },
+    ]);
+
+    await user.click(screen.getByRole('button', { name: 'Manage passkey' }));
+    await user.click(await screen.findByRole('menuitem', { name: 'Rename' }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});
diff --git a/packages/mosaic/src/features/user-profile/user-profile-action-menu.tsx b/packages/mosaic/src/components/action-menu/action-menu.tsx
similarity index 73%
rename from packages/mosaic/src/features/user-profile/user-profile-action-menu.tsx
rename to packages/mosaic/src/components/action-menu/action-menu.tsx
index 19750de3c17..480c4655625 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-action-menu.tsx
+++ b/packages/mosaic/src/components/action-menu/action-menu.tsx
@@ -1,26 +1,23 @@
 import type { Ref } from 'react';
 
-import { Icon } from '../../components/icon';
-import { Menu } from '../../components/menu';
 import type { IconName } from '../../icons/registry';
+import { Icon } from '../icon';
+import { Menu } from '../menu';
 
-export interface UserProfileMenuAction {
+export interface ActionMenuAction {
   label: string;
   color?: 'neutral' | 'negative';
   icon?: IconName;
   onClick: () => void;
 }
 
-export function UserProfileActionMenu({
-  label,
-  actions,
-  triggerRef,
-}: {
+export interface ActionMenuProps {
   label: string;
-  actions: UserProfileMenuAction[];
-  /** The trigger element, for a caller that has to hand focus back to this row. */
+  actions: ActionMenuAction[];
   triggerRef?: Ref<HTMLButtonElement>;
-}) {
+}
+
+export function ActionMenu({ label, actions, triggerRef }: ActionMenuProps) {
   if (actions.length === 0) {
     return null;
   }
diff --git a/packages/mosaic/src/components/action-menu/index.ts b/packages/mosaic/src/components/action-menu/index.ts
new file mode 100644
index 00000000000..677d8fd8576
--- /dev/null
+++ b/packages/mosaic/src/components/action-menu/index.ts
@@ -0,0 +1,2 @@
+export { ActionMenu } from './action-menu';
+export type { ActionMenuAction, ActionMenuProps } from './action-menu';
diff --git a/packages/mosaic/src/components/copy-button/copy-button.styles.ts b/packages/mosaic/src/components/copy-button/copy-button.styles.ts
new file mode 100644
index 00000000000..18c8307d6fa
--- /dev/null
+++ b/packages/mosaic/src/components/copy-button/copy-button.styles.ts
@@ -0,0 +1,49 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { colorVars, durationVars, easingVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex';
+
+export const styles = stylex.create({
+  toast: {
+    borderRadius: radiusVars['--cl-radius-md'],
+    gap: space['1'],
+    paddingBlock: space['1'],
+    paddingInline: space['1.5'],
+    alignItems: 'center',
+    backgroundColor: colorVars['--cl-color-foreground'],
+    color: colorVars['--cl-color-background'],
+    // A copy while one is still showing queues behind the `limit`; only the newest is wanted.
+    display: { default: 'flex', ':where([data-limited])': 'none' },
+    fontSize: typeScaleVars['--cl-text-sm-size'],
+    lineHeight: typeScaleVars['--cl-text-sm-leading'],
+    opacity: {
+      default: 1,
+      ':where([data-starting-style], [data-ending-style])': 0,
+    },
+    transform: {
+      default: 'scale(1)',
+      ':where([data-starting-style], [data-ending-style])': 'scale(0.94)',
+      '@media (prefers-reduced-motion: reduce)': {
+        default: 'scale(1)',
+        ':where([data-starting-style], [data-ending-style])': 'scale(1)',
+      },
+    },
+    transformOrigin: 'var(--cl-anchor-origin, center)',
+    transitionDuration: {
+      default: `${durationVars['--cl-duration-fast']}, ${durationVars['--cl-duration-base']}`,
+      ':where([data-ending-style])': durationVars['--cl-duration-fast'],
+    },
+    transitionProperty: {
+      default: 'opacity, transform',
+      '@media (prefers-reduced-motion: reduce)': 'opacity',
+    },
+    transitionTimingFunction: {
+      default: `${easingVars['--cl-ease-enter']}, ${easingVars['--cl-ease-default']}`,
+      ':where([data-ending-style])': easingVars['--cl-ease-exit'],
+    },
+    whiteSpace: 'nowrap',
+  },
+  title: {
+    font: 'inherit',
+    margin: 0,
+  },
+});
diff --git a/packages/mosaic/src/components/copy-button/copy-button.test.tsx b/packages/mosaic/src/components/copy-button/copy-button.test.tsx
new file mode 100644
index 00000000000..4c91fb33603
--- /dev/null
+++ b/packages/mosaic/src/components/copy-button/copy-button.test.tsx
@@ -0,0 +1,119 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { CopyButton } from './copy-button';
+
+describe('Mosaic CopyButton', () => {
+  it('writes the value to the clipboard', async () => {
+    const user = userEvent.setup();
+    render(<CopyButton value='acme-inc' />);
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    await expect(navigator.clipboard.readText()).resolves.toBe('acme-inc');
+  });
+
+  it('confirms the copy in a toast and keeps the button named', async () => {
+    const user = userEvent.setup();
+    render(<CopyButton value='acme-inc' />);
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    const toast = await screen.findByRole('dialog', { name: 'Copied' });
+    expect(toast.querySelector('.cl-icon')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Copy' })).toBeInTheDocument();
+  });
+
+  it('announces the copy from the region the button names', async () => {
+    const user = userEvent.setup();
+    render(
+      <CopyButton
+        value='acme-inc'
+        label='Copy slug'
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy slug' }));
+
+    expect(await screen.findByRole('region', { name: 'Copy slug' })).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Copied'));
+  });
+
+  it('takes the confirmation text from copiedLabel', async () => {
+    const user = userEvent.setup();
+    render(
+      <CopyButton
+        value='acme-inc'
+        copiedLabel='Slug copied'
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    expect(await screen.findByRole('dialog', { name: 'Slug copied' })).toBeInTheDocument();
+  });
+
+  it('settles back after the confirmation expires', async () => {
+    const user = userEvent.setup();
+    render(
+      <CopyButton
+        value='acme-inc'
+        resetAfter={200}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+    await screen.findByRole('dialog');
+
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  });
+
+  it('shows one confirmation when the value is copied twice', async () => {
+    const user = userEvent.setup();
+    render(<CopyButton value='acme-inc' />);
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+    await screen.findByRole('dialog');
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    await waitFor(() => expect(screen.getAllByRole('dialog')).toHaveLength(1));
+  });
+
+  it('copies through onCopy when one is given', async () => {
+    const onCopy = vi.fn();
+    const user = userEvent.setup();
+    const writeText = vi.spyOn(navigator.clipboard, 'writeText');
+    render(
+      <CopyButton
+        value='acme-inc'
+        onCopy={onCopy}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    expect(onCopy).toHaveBeenCalledWith('acme-inc');
+    expect(writeText).not.toHaveBeenCalled();
+  });
+
+  it('confirms nothing when the copy fails, and hands the caller the reason', async () => {
+    const onCopyError = vi.fn();
+    const denied = new Error('denied');
+    const user = userEvent.setup();
+    render(
+      <CopyButton
+        value='acme-inc'
+        onCopy={() => Promise.reject(denied)}
+        onCopyError={onCopyError}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    await waitFor(() => expect(onCopyError).toHaveBeenCalledWith(denied));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/mosaic/src/components/copy-button/copy-button.tsx b/packages/mosaic/src/components/copy-button/copy-button.tsx
new file mode 100644
index 00000000000..ff29996ff4b
--- /dev/null
+++ b/packages/mosaic/src/components/copy-button/copy-button.tsx
@@ -0,0 +1,127 @@
+import * as stylex from '@stylexjs/stylex';
+import React from 'react';
+
+import type { ToastSide } from '../../primitives/toast';
+import { Toast } from '../../primitives/toast';
+import { mergeStyleProps, themeProps } from '../../props';
+import type { ButtonProps } from '../button';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { styles } from './copy-button.styles';
+
+const SIDE_OFFSET = 4;
+
+export interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onCopy'> {
+  value: string;
+  label?: string;
+  copiedLabel?: string;
+  side?: ToastSide;
+  resetAfter?: number;
+  onCopy?: (value: string) => void | Promise<void>;
+  onCopyError?: (error: unknown) => void;
+}
+
+export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(function MosaicCopyButton(
+  { resetAfter = 2000, ...rest },
+  ref,
+) {
+  return (
+    <Toast.Provider
+      timeout={resetAfter}
+      limit={1}
+    >
+      <CopyButtonTrigger
+        ref={ref}
+        {...rest}
+      />
+    </Toast.Provider>
+  );
+});
+
+const CopyButtonTrigger = React.forwardRef<HTMLButtonElement, Omit<CopyButtonProps, 'resetAfter'>>(
+  function CopyButtonTrigger(
+    {
+      value,
+      label = 'Copy',
+      copiedLabel = 'Copied',
+      side = 'top',
+      onCopy,
+      onCopyError,
+      color = 'neutral',
+      variant = 'ghost',
+      size = 'xs',
+      shape = 'square',
+      onClick,
+      ...rest
+    },
+    ref,
+  ) {
+    const manager = Toast.useToastManager();
+
+    const copy = async (anchor: HTMLElement) => {
+      try {
+        await (onCopy ? onCopy(value) : navigator.clipboard.writeText(value));
+      } catch (error) {
+        // A blocked clipboard confirms nothing; the caller decides whether to say so.
+        onCopyError?.(error);
+        return;
+      }
+      manager.add({
+        title: copiedLabel,
+        positionerProps: { anchor, side, sideOffset: SIDE_OFFSET },
+      });
+    };
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) {
+        void copy(event.currentTarget);
+      }
+    };
+
+    return (
+      <>
+        <Button
+          ref={ref}
+          type='button'
+          aria-label={label}
+          color={color}
+          variant={variant}
+          size={size}
+          shape={shape}
+          onClick={handleClick}
+          {...rest}
+        >
+          <Icon
+            name='clipboard'
+            size='sm'
+          />
+        </Button>
+        <Toast.Portal>
+          <Toast.Viewport aria-label={label}>
+            {manager.toasts.map(toast => (
+              <Toast.Positioner
+                key={toast.id}
+                toast={toast}
+              >
+                <Toast.Root
+                  toast={toast}
+                  {...mergeStyleProps(themeProps('copy-button-toast'), stylex.props(styles.toast))}
+                >
+                  <Toast.Title
+                    {...mergeStyleProps(themeProps('copy-button-toast-title'), stylex.props(styles.title))}
+                  />
+                  <Icon
+                    name='checkmark'
+                    size='sm'
+                    aria-hidden='true'
+                  />
+                </Toast.Root>
+              </Toast.Positioner>
+            ))}
+          </Toast.Viewport>
+        </Toast.Portal>
+      </>
+    );
+  },
+);
diff --git a/packages/mosaic/src/components/copy-button/index.ts b/packages/mosaic/src/components/copy-button/index.ts
new file mode 100644
index 00000000000..067cd97f96b
--- /dev/null
+++ b/packages/mosaic/src/components/copy-button/index.ts
@@ -0,0 +1,2 @@
+export { CopyButton } from './copy-button';
+export type { CopyButtonProps } from './copy-button';
diff --git a/packages/mosaic/src/components/field/field.styles.ts b/packages/mosaic/src/components/field/field.styles.ts
index b7f5406c529..725113a9037 100644
--- a/packages/mosaic/src/components/field/field.styles.ts
+++ b/packages/mosaic/src/components/field/field.styles.ts
@@ -1,12 +1,10 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, durationVars, easingVars, fontWeightVars, space } from '../../tokens.stylex';
-
-const ROOT_GAP = space['2'];
+import { colorVars, fontWeightVars, space } from '../../tokens.stylex';
 
 export const styles = stylex.create({
   root: {
-    gap: ROOT_GAP,
+    gap: space['2'],
     display: 'flex',
     flexDirection: 'column',
   },
@@ -20,50 +18,4 @@ export const styles = stylex.create({
   description: {
     color: colorVars['--cl-color-foreground-secondary'],
   },
-  messageRoot: {
-    overflow: 'clip',
-    alignContent: 'start',
-    display: 'grid',
-    position: 'relative',
-    transitionDuration: durationVars['--cl-duration-slow'],
-    transitionProperty: {
-      default: 'height, margin-top',
-      '@media (prefers-reduced-motion: reduce)': 'none',
-    },
-    transitionTimingFunction: easingVars['--cl-ease-enter'],
-    height: {
-      default: 'var(--_cl-field-message-height)',
-      ':where(:not([data-open]), [data-starting-style])': 0,
-    },
-    marginTop: {
-      default: 0,
-      ':where(:not([data-open]), [data-starting-style])': `calc(-1 * ${ROOT_GAP})`,
-    },
-  },
-  feedback: {
-    inset: { default: null, ':where([data-ending-style])': '0 0 auto' },
-    gap: space['1'],
-    alignItems: 'flex-start',
-    display: 'flex',
-    opacity: { default: 1, ':where([data-starting-style], [data-ending-style])': 0 },
-    position: { default: null, ':where([data-ending-style])': 'absolute' },
-    textWrap: 'pretty',
-    transitionDuration: durationVars['--cl-duration-base'],
-    transitionProperty: 'opacity',
-    transitionTimingFunction: 'linear',
-  },
-  error: {
-    color: colorVars['--cl-color-negative'],
-  },
-  success: {
-    color: colorVars['--cl-color-positive'],
-  },
-  feedbackIcon: {
-    flexShrink: 0,
-    height: '1lh',
-  },
-});
-
-export const dynamic = stylex.create({
-  messageHeight: (height: number) => ({ '--_cl-field-message-height': `${height}px` }),
 });
diff --git a/packages/mosaic/src/components/field/field.test.tsx b/packages/mosaic/src/components/field/field.test.tsx
index 1eea5b36df5..8d5a1e61c10 100644
--- a/packages/mosaic/src/components/field/field.test.tsx
+++ b/packages/mosaic/src/components/field/field.test.tsx
@@ -391,7 +391,7 @@ describe('Mosaic Field', () => {
           '@media (prefers-reduced-motion: reduce)': 'none',
         },
         height: {
-          default: 'var(--_cl-field-message-height)',
+          default: 'var(--_cl-feedback-height)',
           ':where(:not([data-open]), [data-starting-style])': 0,
         },
       },
diff --git a/packages/mosaic/src/components/field/field.tsx b/packages/mosaic/src/components/field/field.tsx
index e2cf715b14c..28b5c1470b0 100644
--- a/packages/mosaic/src/components/field/field.tsx
+++ b/packages/mosaic/src/components/field/field.tsx
@@ -1,4 +1,3 @@
-import { useSafeLayoutEffect } from '@clerk/shared/react';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
@@ -7,10 +6,11 @@ import { useTransition } from '../../primitives/hooks';
 import { useRender } from '../../primitives/utils';
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
+import { FeedbackBody, hasMessage, useHeldMessage, useMessageHeight } from '../../utils/feedback';
+import { feedbackHeight, feedbackStyles } from '../../utils/feedback.styles';
 import { reset } from '../../utils/reset.styles';
 import { sizes as typographySizes, styles as typographyStyles } from '../../utils/typography.styles';
 import { visuallyHidden } from '../../utils/visually-hidden.styles';
-import { Icon } from '../icon';
 import {
   FieldMessageProvider,
   FieldProvider,
@@ -18,7 +18,7 @@ import {
   useRegisterFieldMessage,
   useRegisterFieldPartId,
 } from './field.context';
-import { dynamic, styles } from './field.styles';
+import { styles } from './field.styles';
 
 function useNativeLabelWarning(label: HTMLElement | null) {
   React.useEffect(() => {
@@ -139,29 +139,6 @@ const Description = React.forwardRef<HTMLParagraphElement, FieldDescriptionProps
 /** Props for the container that animates field feedback height and crossfades its messages. */
 export type FieldMessageProps = MosaicComponentProps<'div'>;
 
-function useMessageHeight(active: HTMLElement | null) {
-  const [height, setHeight] = React.useState(0);
-
-  useSafeLayoutEffect(() => {
-    if (!active) {
-      return undefined;
-    }
-
-    const measure = () => setHeight(active.offsetHeight);
-    measure();
-
-    if (typeof ResizeObserver === 'undefined') {
-      return undefined;
-    }
-
-    const observer = new ResizeObserver(measure);
-    observer.observe(active);
-    return () => observer.disconnect();
-  }, [active]);
-
-  return height;
-}
-
 const Message = React.forwardRef<HTMLDivElement, FieldMessageProps>(function MosaicFieldMessage(
   { render, xstyle, children, ...rest },
   ref,
@@ -186,7 +163,7 @@ const Message = React.forwardRef<HTMLDivElement, FieldMessageProps>(function Mos
     props: {
       ...mergeStyleProps(
         themeProps('field-message'),
-        stylex.props(reset.base, styles.messageRoot, dynamic.messageHeight(height), xstyle),
+        stylex.props(reset.base, feedbackStyles.collapse, feedbackHeight.measured(height), xstyle),
         { role: 'status', ...transitionProps },
         rest,
       ),
@@ -200,18 +177,14 @@ const Message = React.forwardRef<HTMLDivElement, FieldMessageProps>(function Mos
 type FieldFeedbackKind = 'error' | 'success';
 
 const FEEDBACK: Record<FieldFeedbackKind, { slot: string; icon: IconName; color: stylex.StyleXStyles }> = {
-  error: { slot: 'field-error', icon: 'exclamation-circle', color: styles.error },
-  success: { slot: 'field-success', icon: 'checkmark', color: styles.success },
+  error: { slot: 'field-error', icon: 'exclamation-circle', color: feedbackStyles.error },
+  success: { slot: 'field-success', icon: 'checkmark', color: feedbackStyles.success },
 };
 
 interface FieldFeedbackProps extends MosaicComponentProps<'p'> {
   kind: FieldFeedbackKind;
 }
 
-function hasMessage(children: React.ReactNode) {
-  return React.Children.toArray(children).some(child => child !== '');
-}
-
 const FieldFeedback = React.forwardRef<HTMLParagraphElement, FieldFeedbackProps>(function MosaicFieldFeedback(
   { render, xstyle, id: idProp, children, kind, ...rest },
   ref,
@@ -223,10 +196,7 @@ const FieldFeedback = React.forwardRef<HTMLParagraphElement, FieldFeedbackProps>
   const open = hasMessage(children);
   const element = React.useRef<HTMLElement | null>(null);
   const { mounted, transitionProps } = useTransition({ open, ref: element });
-  const lastMessage = React.useRef(children);
-  if (open) {
-    lastMessage.current = children;
-  }
+  const message = useHeldMessage(children, open);
   useRegisterFieldPartId(open ? id : undefined, context?.setMessageIds);
   const registerMessage = useRegisterFieldMessage(open);
   return useRender({
@@ -237,30 +207,12 @@ const FieldFeedback = React.forwardRef<HTMLParagraphElement, FieldFeedbackProps>
     props: {
       ...mergeStyleProps(
         themeProps(slot),
-        stylex.props(
-          reset.base,
-          typographyStyles.base,
-          typographySizes.xs,
-          styles.message,
-          styles.feedback,
-          color,
-          xstyle,
-        ),
+        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, feedbackStyles.message, color, xstyle),
         { 'aria-hidden': open ? undefined : true, ...transitionProps },
         rest,
       ),
       id,
-      children: (
-        <>
-          <Icon
-            name={icon}
-            size='sm'
-            aria-hidden='true'
-            xstyle={styles.feedbackIcon}
-          />
-          <span>{lastMessage.current}</span>
-        </>
-      ),
+      children: <FeedbackBody icon={icon}>{message}</FeedbackBody>,
     },
   });
 });
diff --git a/packages/mosaic/src/components/profile/index.ts b/packages/mosaic/src/components/profile/index.ts
index 6c45a55fe12..7f599456c0b 100644
--- a/packages/mosaic/src/components/profile/index.ts
+++ b/packages/mosaic/src/components/profile/index.ts
@@ -1,3 +1,4 @@
+export { panelStyles } from './profile.styles';
 export { Profile } from './profile';
 export type {
   ProfileContentProps,
diff --git a/packages/mosaic/src/components/profile/profile.styles.ts b/packages/mosaic/src/components/profile/profile.styles.ts
index 2b8f0e2a71c..140902ae036 100644
--- a/packages/mosaic/src/components/profile/profile.styles.ts
+++ b/packages/mosaic/src/components/profile/profile.styles.ts
@@ -352,3 +352,21 @@ export const styles = stylex.create({
 export const contentScroll = scrollAreaRoot;
 // A held gutter: switching to a page that does not scroll must not reflow the one that did.
 export const contentViewportScroll = scrollAreaViewport('stable');
+
+/**
+ * The layout every page inside `Profile.Content` is built on: a column under the headline, and a
+ * column of sections under that. Composed by the panel views rather than applied by
+ * `Profile.ContentPanel`, so each page keeps a slot of its own to theme against.
+ */
+export const panelStyles = stylex.create({
+  root: {
+    gap: space['4'],
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  sections: {
+    gap: space['10'],
+    display: 'flex',
+    flexDirection: 'column',
+  },
+});
diff --git a/packages/mosaic/src/components/section/section.styles.ts b/packages/mosaic/src/components/section/section.styles.ts
index a886e8d57fe..f115c72135e 100644
--- a/packages/mosaic/src/components/section/section.styles.ts
+++ b/packages/mosaic/src/components/section/section.styles.ts
@@ -131,17 +131,7 @@ export const styles = stylex.create({
   // Sits under the row's item rather than inside its content, so a message never shifts the
   // media and actions off the centre line they share.
   error: {
-    margin: 0,
-    gap: space['1'],
-    alignItems: 'flex-start',
-    color: colorVars['--cl-color-negative'],
-    display: 'flex',
-    textWrap: 'pretty',
     width: '100%',
   },
-  errorIcon: {
-    flexShrink: 0,
-    height: '1lh',
-  },
 });
 /* eslint-enable @stylexjs/no-lookahead-selectors */
diff --git a/packages/mosaic/src/components/section/section.test.tsx b/packages/mosaic/src/components/section/section.test.tsx
index 10afc633570..425884ef539 100644
--- a/packages/mosaic/src/components/section/section.test.tsx
+++ b/packages/mosaic/src/components/section/section.test.tsx
@@ -1,5 +1,5 @@
 import * as stylex from '@stylexjs/stylex';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
@@ -205,4 +205,46 @@ describe('Section', () => {
     expect(icon).toHaveAttribute('aria-hidden', 'true');
     expect(icon).toHaveAttribute('data-size', 'sm');
   });
+
+  it('renders nothing while the row has no message', () => {
+    render(
+      <Section.Row>
+        <Section.Item>
+          <Section.Content>
+            <Section.Label>Profile picture</Section.Label>
+          </Section.Content>
+        </Section.Item>
+        <Section.Error data-testid='error'>{undefined}</Section.Error>
+      </Section.Row>,
+    );
+
+    expect(screen.queryByTestId('error')).not.toBeInTheDocument();
+  });
+
+  it('opens on a new message and leaves when it clears', async () => {
+    function Host({ message }: { message?: string }) {
+      return (
+        <Section.Row>
+          <Section.Item>
+            <Section.Content>
+              <Section.Label>Profile picture</Section.Label>
+            </Section.Content>
+          </Section.Item>
+          <Section.Error data-testid='error'>{message}</Section.Error>
+        </Section.Row>
+      );
+    }
+
+    const { rerender } = render(<Host />);
+    rerender(<Host message='File type not supported.' />);
+
+    const error = await screen.findByTestId('error');
+    await waitFor(() => expect(error).toHaveAttribute('data-open'));
+    expect(error).toHaveTextContent('File type not supported.');
+    expect(error).not.toHaveAttribute('aria-hidden');
+
+    // jsdom runs no transitions, so the exit finishes at once and the row empties again.
+    rerender(<Host />);
+    await waitFor(() => expect(screen.queryByTestId('error')).not.toBeInTheDocument());
+  });
 });
diff --git a/packages/mosaic/src/components/section/section.tsx b/packages/mosaic/src/components/section/section.tsx
index 7ab7c420fa4..570d20ec9a1 100644
--- a/packages/mosaic/src/components/section/section.tsx
+++ b/packages/mosaic/src/components/section/section.tsx
@@ -2,14 +2,16 @@ import { useSafeLayoutEffect } from '@clerk/shared/react';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
+import { useTransition } from '../../primitives/hooks/use-transition';
 import { useRender } from '../../primitives/utils';
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
+import { FeedbackBody, hasMessage, useHeldMessage, useMessageHeight } from '../../utils/feedback';
+import { feedbackHeight, feedbackStyles } from '../../utils/feedback.styles';
 import { reset } from '../../utils/reset.styles';
 import { sizes as typographySizes, styles as typographyStyles } from '../../utils/typography.styles';
 import type { HeadingProps } from '../heading';
 import { Heading } from '../heading';
-import { Icon } from '../icon';
 import { sectionItemsMarker } from './section.markers.stylex';
 import { styles } from './section.styles';
 
@@ -228,32 +230,52 @@ const Actions = React.forwardRef<HTMLDivElement, SectionActionsProps>(function S
  * sibling of `Section.Item` inside `Section.Row`, not inside `Section.Content`: the item stays a
  * single centred line, so the media and actions hold their position whether or not it is showing.
  * Carries `role='alert'` for the announcement a `Field.Root` would otherwise wire up.
+ *
+ * It opens and closes on the message it is given, so render it with that message —
+ * `<Section.Error>{error}</Section.Error>` — rather than behind a conditional.
  */
 const SectionError = React.forwardRef<HTMLParagraphElement, SectionErrorProps>(function SectionError(
   { render, xstyle, children, ...rest },
   ref,
 ) {
+  const open = hasMessage(children);
+  const element = React.useRef<HTMLElement | null>(null);
+  const [messageElement, setMessageElement] = React.useState<HTMLElement | null>(null);
+  const height = useMessageHeight(messageElement);
+  const { mounted, transitionProps } = useTransition({ open, ref: element });
+  const message = useHeldMessage(children, open);
+  const messageProps = stylex.props(reset.base, feedbackStyles.message, feedbackStyles.error);
+
   return useRender({
     defaultTagName: 'p',
     render,
-    ref,
+    enabled: mounted,
+    ref: [ref, element],
     props: {
       role: 'alert',
       ...mergeStyleProps(
         themeProps('section-error'),
-        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, styles.error, xstyle),
+        stylex.props(
+          reset.base,
+          typographyStyles.base,
+          typographySizes.xs,
+          feedbackStyles.collapse,
+          feedbackHeight.measured(height),
+          styles.error,
+          xstyle,
+        ),
+        { 'aria-hidden': open ? undefined : true, ...transitionProps },
         rest,
       ),
       children: (
-        <>
-          <Icon
-            name='exclamation-circle'
-            size='sm'
-            aria-hidden='true'
-            xstyle={styles.errorIcon}
-          />
-          <span>{children}</span>
-        </>
+        <span
+          ref={setMessageElement}
+          {...messageProps}
+          {...transitionProps}
+          style={{ ...messageProps.style, ...transitionProps.style }}
+        >
+          <FeedbackBody icon='exclamation-circle'>{message}</FeedbackBody>
+        </span>
       ),
     },
   });
diff --git a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx
new file mode 100644
index 00000000000..759098b4c1f
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx
@@ -0,0 +1,159 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { MosaicProvider } from '../../../MosaicProvider';
+import { OrganizationProfileSaveError } from '../organization-profile.types';
+import type { OrganizationProfileGeneralPanelViewProps } from '../organization-profile-general-panel.view';
+import { OrganizationProfileGeneralPanelView } from '../organization-profile-general-panel.view';
+
+function renderPanel(overrides: Partial<OrganizationProfileGeneralPanelViewProps> = {}) {
+  const props: OrganizationProfileGeneralPanelViewProps = {
+    name: 'Clerk',
+    slug: 'clerkWorkspace-177654156132154',
+    memberCount: 20,
+    ...overrides,
+  };
+  return render(
+    <MosaicProvider>
+      <OrganizationProfileGeneralPanelView {...props} />
+    </MosaicProvider>,
+  );
+}
+
+describe('organization profile general panel', () => {
+  it('shows the workspace details as read-only when nothing can be edited', () => {
+    renderPanel();
+
+    expect(screen.getByRole('heading', { name: 'Workspace details' })).toBeVisible();
+    expect(screen.getByText('Clerk')).toBeVisible();
+    expect(screen.getByText('clerkWorkspace-177654156132154')).toBeVisible();
+    expect(screen.queryByRole('button', { name: 'Edit name' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Upload' })).not.toBeInTheDocument();
+  });
+
+  it('hides the danger zone when neither action is available', () => {
+    renderPanel();
+
+    expect(screen.queryByRole('heading', { name: 'Danger zone' })).not.toBeInTheDocument();
+  });
+
+  it('offers a copy button for the slug, and keeps the full value reachable when it truncates', () => {
+    renderPanel();
+
+    expect(screen.getByRole('button', { name: 'Copy slug' })).toBeVisible();
+    expect(screen.getByText('clerkWorkspace-177654156132154')).toHaveAttribute(
+      'title',
+      'clerkWorkspace-177654156132154',
+    );
+  });
+
+  it('saves a new name', async () => {
+    const user = userEvent.setup();
+    const onSubmitName = vi.fn().mockResolvedValue(undefined);
+    renderPanel({ onSubmitName });
+
+    await user.click(screen.getByRole('button', { name: 'Edit name' }));
+    const field = await screen.findByRole('textbox', { name: 'Name' });
+    await user.clear(field);
+    await user.type(field, 'Clerk Inc');
+    await user.click(screen.getByRole('button', { name: 'Save changes' }));
+
+    await waitFor(() => expect(onSubmitName).toHaveBeenCalledWith('Clerk Inc'));
+  });
+
+  it('names the slug field without showing a label, and explains the change under the title', async () => {
+    const user = userEvent.setup();
+    renderPanel({ onSubmitSlug: vi.fn().mockResolvedValue(undefined) });
+
+    await user.click(screen.getByRole('button', { name: 'Edit slug' }));
+    const dialog = await screen.findByRole('dialog');
+
+    expect(within(dialog).getByRole('textbox', { name: 'Slug' })).toBeVisible();
+    expect(within(dialog).getByText('Slug')).toHaveAttribute('data-visually-hidden', '');
+    expect(
+      within(dialog).getByText('A unique identifier used in workspace URLs. Changing it may break existing links.'),
+    ).toBeVisible();
+  });
+
+  it('names the name field without showing a label', async () => {
+    const user = userEvent.setup();
+    renderPanel({ onSubmitName: vi.fn().mockResolvedValue(undefined) });
+
+    await user.click(screen.getByRole('button', { name: 'Edit name' }));
+    const dialog = await screen.findByRole('dialog');
+
+    expect(within(dialog).getByRole('textbox', { name: 'Name' })).toBeVisible();
+    expect(within(dialog).getByText('Name')).toHaveAttribute('data-visually-hidden', '');
+  });
+
+  it('shows a rejected save under the field it names and leaves the dialog open', async () => {
+    const user = userEvent.setup();
+    const onSubmitSlug = vi.fn().mockRejectedValue(new OrganizationProfileSaveError('Slug is taken', 'slug'));
+    renderPanel({ onSubmitSlug });
+
+    await user.click(screen.getByRole('button', { name: 'Edit slug' }));
+    const field = await screen.findByRole('textbox', { name: 'Slug' });
+    await user.type(field, '-2');
+    await user.click(screen.getByRole('button', { name: 'Save changes' }));
+
+    const dialog = await screen.findByRole('dialog');
+    expect(await within(dialog).findByText('Slug is taken')).toBeVisible();
+    expect(within(dialog).getByRole('textbox', { name: 'Slug' })).toBeEnabled();
+    expect(within(dialog).getByRole('textbox', { name: 'Slug' })).toBeInvalid();
+  });
+
+  it('shows an unscoped rejection in the banner instead', async () => {
+    const user = userEvent.setup();
+    const onSubmitName = vi.fn().mockRejectedValue(new Error('Something went wrong.'));
+    renderPanel({ onSubmitName });
+
+    await user.click(screen.getByRole('button', { name: 'Edit name' }));
+    await user.type(await screen.findByRole('textbox', { name: 'Name' }), '!');
+    await user.click(screen.getByRole('button', { name: 'Save changes' }));
+
+    const dialog = await screen.findByRole('dialog');
+    expect(await within(dialog).findByRole('alert')).toHaveTextContent('Something went wrong.');
+    expect(within(dialog).getByRole('textbox', { name: 'Name' })).toBeValid();
+  });
+
+  it('keeps each danger action inert until the workspace name is typed', async () => {
+    const user = userEvent.setup();
+    const onDelete = vi.fn().mockResolvedValue(undefined);
+    renderPanel({ onDelete });
+
+    await user.click(screen.getByRole('button', { name: 'Delete Workspace' }));
+    const dialog = await screen.findByRole('dialog');
+    const confirm = within(dialog).getByRole('button', { name: 'Delete Workspace' });
+    expect(dialog).toHaveTextContent(
+      'Are you sure you want to delete Clerk? This removes 20 members and permanently deletes all Workspace data.',
+    );
+
+    await user.click(confirm);
+    expect(onDelete).not.toHaveBeenCalled();
+
+    await user.type(within(dialog).getByRole('textbox'), 'Clerk');
+    await user.click(confirm);
+
+    await waitFor(() => expect(onDelete).toHaveBeenCalled());
+  });
+
+  it('shows both danger rows and asks for the name in each', async () => {
+    const user = userEvent.setup();
+    const onLeave = vi.fn().mockResolvedValue(undefined);
+    renderPanel({ onLeave, onDelete: vi.fn().mockResolvedValue(undefined) });
+
+    expect(screen.getByRole('heading', { name: 'Danger zone' })).toBeVisible();
+
+    await user.click(screen.getByRole('button', { name: 'Leave Workspace' }));
+    const dialog = await screen.findByRole('dialog');
+    expect(within(dialog).getByRole('heading', { name: 'Leave Workspace' })).toBeVisible();
+    expect(within(dialog).getByText(/You will lose access to this workspace and its applications\./)).toBeVisible();
+    expect(within(dialog).getByText('Type “Clerk” below to continue')).toBeVisible();
+
+    await user.type(within(dialog).getByRole('textbox'), 'Clerk');
+    await user.click(within(dialog).getByRole('button', { name: 'Leave Workspace' }));
+
+    await waitFor(() => expect(onLeave).toHaveBeenCalled());
+  });
+});
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-action.controller.ts b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-action.controller.ts
new file mode 100644
index 00000000000..2c5c4c5fc00
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-action.controller.ts
@@ -0,0 +1,71 @@
+import { setup } from '../../../machine/setup';
+import { useMachine } from '../../../machine/useMachine';
+
+export interface OrganizationProfileDangerActionContext {
+  run: () => Promise<void>;
+  errorMessage: string | undefined;
+}
+
+export type OrganizationProfileDangerActionEvent = { type: 'OPEN' } | { type: 'CONFIRM' } | { type: 'CANCEL' };
+
+const { createMachine, assign, fromPromise } = setup<
+  OrganizationProfileDangerActionContext,
+  OrganizationProfileDangerActionEvent
+>();
+
+export const organizationProfileDangerActionMachine = createMachine({
+  id: 'organizationDangerAction',
+  initial: 'idle',
+  context: {
+    run: async () => {},
+    errorMessage: undefined,
+  },
+  states: {
+    idle: { on: { OPEN: 'confirming' } },
+    confirming: {
+      on: {
+        CONFIRM: 'running',
+        CANCEL: { target: 'idle', actions: assign(() => ({ errorMessage: undefined })) },
+      },
+    },
+    running: {
+      invoke: fromPromise(context => context.run(), {
+        onDone: 'done',
+        onError: {
+          target: 'confirming',
+          actions: assign((_, event) => ({
+            errorMessage:
+              event.error instanceof Error ? event.error.message : 'Something went wrong. Please try again.',
+          })),
+        },
+      }),
+    },
+    done: { type: 'final' },
+  },
+});
+
+export interface OrganizationProfileDangerActionControllerOptions {
+  onRun: () => Promise<void>;
+}
+
+export interface OrganizationProfileDangerActionController {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  isRunning: boolean;
+  errorMessage: string | undefined;
+}
+
+export function useOrganizationProfileDangerActionController({
+  onRun,
+}: OrganizationProfileDangerActionControllerOptions): OrganizationProfileDangerActionController {
+  const [snapshot, send] = useMachine(organizationProfileDangerActionMachine, { context: { run: onRun } });
+
+  return {
+    isOpen: snapshot.value === 'confirming' || snapshot.value === 'running',
+    onOpenChange: open => send({ type: open ? 'OPEN' : 'CANCEL' }),
+    onConfirm: () => send({ type: 'CONFIRM' }),
+    isRunning: snapshot.value === 'running',
+    errorMessage: snapshot.context.errorMessage,
+  };
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.messages.ts b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.messages.ts
new file mode 100644
index 00000000000..a088f27cd63
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.messages.ts
@@ -0,0 +1,25 @@
+export const organizationProfileDangerSectionMessages = {
+  sectionTitle: 'Danger zone',
+  fieldLabel: 'Type “{phrase}” below to continue',
+  cancelLabel: 'Cancel',
+  leave: {
+    label: 'Leave Workspace',
+    description: 'You will lose access to this Workspace and its applications.',
+    actionLabel: 'Leave Workspace',
+    dialogTitle: 'Leave Workspace',
+    dialogDescription:
+      'Are you sure you want to leave this Workspace? You will lose access to this workspace and its applications.',
+  },
+  delete: {
+    label: 'Delete Workspace',
+    description:
+      'Permanently delete this workspace and all its data. This cannot be undone. All members will lose access.',
+    actionLabel: 'Delete Workspace',
+    dialogTitle: 'Delete Workspace',
+    dialogDescription: {
+      one: 'Are you sure you want to delete {name}? This removes {count} member and permanently deletes all Workspace data. This can’t be undone.',
+      other:
+        'Are you sure you want to delete {name}? This removes {count} members and permanently deletes all Workspace data. This can’t be undone.',
+    },
+  },
+} as const;
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.view.tsx
new file mode 100644
index 00000000000..6d70e5a9bef
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.view.tsx
@@ -0,0 +1,114 @@
+import { Destructive } from '../../../blocks/destructive';
+import { Button } from '../../../components/button';
+import { Section } from '../../../components/section';
+import { fill, plural, useLocale, useMessages } from '../../../localization';
+import { useOrganizationProfileDangerActionController } from './organization-profile-danger-action.controller';
+
+export interface OrganizationProfileDangerSectionViewProps {
+  name: string;
+  memberCount: number;
+  onLeave?: () => Promise<void>;
+  onDelete?: () => Promise<void>;
+}
+
+export function OrganizationProfileDangerSectionView({
+  name,
+  memberCount,
+  onLeave,
+  onDelete,
+}: OrganizationProfileDangerSectionViewProps) {
+  const m = useMessages('organizationProfileDangerSection');
+  const locale = useLocale();
+
+  if (!onLeave && !onDelete) {
+    return null;
+  }
+
+  return (
+    <Section.Root>
+      <Section.Title>{m.sectionTitle}</Section.Title>
+      <Section.Group>
+        {onLeave ? (
+          <DangerRow
+            confirmationValue={name}
+            label={m.leave.label}
+            description={m.leave.description}
+            actionLabel={m.leave.actionLabel}
+            dialogTitle={m.leave.dialogTitle}
+            dialogDescription={m.leave.dialogDescription}
+            onRun={onLeave}
+          />
+        ) : null}
+        {onDelete ? (
+          <DangerRow
+            confirmationValue={name}
+            label={m.delete.label}
+            description={m.delete.description}
+            actionLabel={m.delete.actionLabel}
+            dialogTitle={m.delete.dialogTitle}
+            dialogDescription={plural(m.delete.dialogDescription, memberCount, locale, { name })}
+            onRun={onDelete}
+          />
+        ) : null}
+      </Section.Group>
+    </Section.Root>
+  );
+}
+
+function DangerRow({
+  confirmationValue,
+  label,
+  description,
+  actionLabel,
+  dialogTitle,
+  dialogDescription,
+  onRun,
+}: {
+  confirmationValue: string;
+  label: string;
+  description: string;
+  actionLabel: string;
+  dialogTitle: string;
+  dialogDescription: string;
+  onRun: () => Promise<void>;
+}) {
+  const m = useMessages('organizationProfileDangerSection');
+  const { isOpen, onOpenChange, onConfirm, isRunning, errorMessage } = useOrganizationProfileDangerActionController({
+    onRun,
+  });
+
+  return (
+    <Section.Row>
+      <Section.Item>
+        <Section.Content>
+          <Section.Label>{label}</Section.Label>
+          <Section.Description>{description}</Section.Description>
+        </Section.Content>
+        <Section.Actions>
+          <Destructive
+            open={isOpen}
+            onOpenChange={onOpenChange}
+            trigger={
+              <Button
+                color='negative'
+                size='sm'
+                variant='outline'
+              >
+                {actionLabel}
+              </Button>
+            }
+            title={dialogTitle}
+            description={dialogDescription}
+            fieldLabel={fill(m.fieldLabel, { phrase: confirmationValue })}
+            confirmationValue={confirmationValue}
+            actionLabel={actionLabel}
+            cancelLabel={m.cancelLabel}
+            onDelete={onConfirm}
+            isDeleting={isRunning}
+            errorMessage={errorMessage}
+          />
+        </Section.Actions>
+      </Section.Item>
+    </Section.Row>
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.view.tsx
new file mode 100644
index 00000000000..da696ac1733
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.view.tsx
@@ -0,0 +1,55 @@
+import * as stylex from '@stylexjs/stylex';
+import type { ReactElement } from 'react';
+
+import { panelStyles, Profile } from '../../components/profile';
+import { useMessages } from '../../localization';
+import { mergeStyleProps, themeProps } from '../../props';
+import type { OrganizationProfileDangerSectionViewProps } from './organization-profile-danger-section/organization-profile-danger-section.view';
+import { OrganizationProfileDangerSectionView } from './organization-profile-danger-section/organization-profile-danger-section.view';
+import type { OrganizationProfileWorkspaceSectionViewProps } from './organization-profile-workspace-section/organization-profile-workspace-section.view';
+import { OrganizationProfileWorkspaceSectionView } from './organization-profile-workspace-section/organization-profile-workspace-section.view';
+
+export interface OrganizationProfileGeneralPanelViewProps
+  extends OrganizationProfileWorkspaceSectionViewProps, Omit<OrganizationProfileDangerSectionViewProps, 'name'> {}
+
+export function OrganizationProfileGeneralPanelView({
+  name,
+  slug,
+  memberCount,
+  imageUrl,
+  hasImage,
+  onLogoChange,
+  onLogoReject,
+  onRemoveLogo,
+  onSubmitName,
+  onSubmitSlug,
+  onLeave,
+  onDelete,
+}: OrganizationProfileGeneralPanelViewProps): ReactElement {
+  const m = useMessages('organizationProfile');
+
+  return (
+    <div {...mergeStyleProps(themeProps('organization-profile-general-panel'), stylex.props(panelStyles.root))}>
+      <Profile.PageTitle>{m.pages.general}</Profile.PageTitle>
+      <div {...stylex.props(panelStyles.sections)}>
+        <OrganizationProfileWorkspaceSectionView
+          name={name}
+          slug={slug}
+          imageUrl={imageUrl}
+          hasImage={hasImage}
+          onLogoChange={onLogoChange}
+          onLogoReject={onLogoReject}
+          onRemoveLogo={onRemoveLogo}
+          onSubmitName={onSubmitName}
+          onSubmitSlug={onSubmitSlug}
+        />
+        <OrganizationProfileDangerSectionView
+          name={name}
+          memberCount={memberCount}
+          onLeave={onLeave}
+          onDelete={onDelete}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-placeholder-panel.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-placeholder-panel.view.tsx
new file mode 100644
index 00000000000..5c7d404a0e4
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-placeholder-panel.view.tsx
@@ -0,0 +1,22 @@
+import { EmptyState } from '../../components/empty-state';
+import { Profile } from '../../components/profile';
+import { fill, useMessages } from '../../localization';
+import type { OrganizationProfilePageId } from './organization-profile.types';
+
+export interface OrganizationProfilePlaceholderPanelViewProps {
+  page: OrganizationProfilePageId;
+}
+
+export function OrganizationProfilePlaceholderPanelView({ page }: OrganizationProfilePlaceholderPanelViewProps) {
+  const m = useMessages('organizationProfile');
+  const title = m.pages[page];
+
+  return (
+    <>
+      <Profile.PageTitle>{title}</Profile.PageTitle>
+      <EmptyState.Root>
+        <EmptyState.Label>{fill(m.placeholder, { page: title })}</EmptyState.Label>
+      </EmptyState.Root>
+    </>
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.controller.ts b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.controller.ts
new file mode 100644
index 00000000000..0d269a4b384
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.controller.ts
@@ -0,0 +1,113 @@
+import { setup } from '../../../machine/setup';
+import { useMachine } from '../../../machine/useMachine';
+import type { OrganizationProfileFormError } from '../organization-profile.types';
+import { OrganizationProfileSaveError } from '../organization-profile.types';
+
+export interface OrganizationProfileEditFieldContext {
+  save: (value: string) => Promise<void>;
+  savedValue: string;
+  value: string;
+  error: OrganizationProfileFormError | undefined;
+}
+
+export type OrganizationProfileEditFieldEvent =
+  | { type: 'OPEN' }
+  | { type: 'TYPE'; value: string }
+  | { type: 'SAVE' }
+  | { type: 'CANCEL' };
+
+const { createMachine, assign, fromPromise } = setup<
+  OrganizationProfileEditFieldContext,
+  OrganizationProfileEditFieldEvent
+>();
+
+function notSeated(): Promise<never> {
+  return Promise.reject(new Error('edit-field deps are not seated'));
+}
+
+function isSaveable(context: OrganizationProfileEditFieldContext): boolean {
+  return context.value !== context.savedValue && context.value !== '';
+}
+
+function toFormError(cause: unknown): OrganizationProfileFormError {
+  if (cause instanceof OrganizationProfileSaveError) {
+    return { message: cause.message, field: cause.field };
+  }
+  if (cause instanceof Error) {
+    return { message: cause.message };
+  }
+  return { message: 'Something went wrong. Please try again.' };
+}
+
+export const organizationProfileEditFieldMachine = createMachine({
+  id: 'editOrganizationField',
+  initial: 'idle',
+  context: {
+    save: notSeated,
+    savedValue: '',
+    value: '',
+    error: undefined,
+  },
+  states: {
+    idle: {
+      on: {
+        OPEN: {
+          target: 'editing',
+          actions: assign(context => ({ value: context.savedValue, error: undefined })),
+        },
+      },
+    },
+    editing: {
+      on: {
+        TYPE: { actions: assign((_, event) => ({ value: event.value })) },
+        SAVE: { target: 'saving', guard: isSaveable },
+        CANCEL: { target: 'idle', actions: assign(() => ({ error: undefined })) },
+      },
+    },
+    saving: {
+      invoke: fromPromise(context => context.save(context.value), {
+        onDone: { target: 'idle', actions: assign(() => ({ error: undefined })) },
+        onError: {
+          target: 'editing',
+          actions: assign((_, event) => ({ error: toFormError(event.error) })),
+        },
+      }),
+    },
+  },
+});
+
+export interface OrganizationProfileEditFieldControllerOptions {
+  value?: string;
+  onSubmit: (value: string) => Promise<void>;
+}
+
+export interface OrganizationProfileEditFieldController {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: string;
+  onValueChange: (value: string) => void;
+  onSubmit: () => void;
+  canSave: boolean;
+  isSaving: boolean;
+  error: OrganizationProfileFormError | undefined;
+}
+
+export function useOrganizationProfileEditFieldController({
+  value = '',
+  onSubmit,
+}: OrganizationProfileEditFieldControllerOptions): OrganizationProfileEditFieldController {
+  const [snapshot, send] = useMachine(organizationProfileEditFieldMachine, {
+    context: { save: onSubmit, savedValue: value },
+  });
+
+  return {
+    isOpen: snapshot.value === 'editing' || snapshot.value === 'saving',
+    onOpenChange: open => send({ type: open ? 'OPEN' : 'CANCEL' }),
+    value: snapshot.context.value,
+    onValueChange: next => send({ type: 'TYPE', value: next }),
+    onSubmit: () => send({ type: 'SAVE' }),
+    canSave: isSaveable(snapshot.context),
+    isSaving: snapshot.value === 'saving',
+    error: snapshot.context.error,
+  };
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.dialog.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.dialog.tsx
new file mode 100644
index 00000000000..e9f6565515e
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.dialog.tsx
@@ -0,0 +1,130 @@
+import type { FormEvent } from 'react';
+import { useId, useRef } from 'react';
+
+import { Banner } from '../../../components/banner';
+import { Button, SubmitButton } from '../../../components/button';
+import { Card } from '../../../components/card';
+import type { DialogTriggerProps } from '../../../components/dialog';
+import { Dialog } from '../../../components/dialog';
+import { Field } from '../../../components/field';
+import { Input } from '../../../components/input';
+import type { OrganizationProfileFormError } from '../organization-profile.types';
+
+export interface OrganizationProfileEditFieldDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  trigger?: DialogTriggerProps['render'];
+  title: string;
+  description?: string;
+  fieldLabel: string;
+  cancelLabel: string;
+  saveLabel: string;
+  value: string;
+  onValueChange: (value: string) => void;
+  canSave?: boolean;
+  isSaving?: boolean;
+  error?: OrganizationProfileFormError;
+  onSubmit: () => void;
+}
+
+export function OrganizationProfileEditFieldDialog({
+  open,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  fieldLabel,
+  cancelLabel,
+  saveLabel,
+  value,
+  onValueChange,
+  canSave = true,
+  isSaving = false,
+  error,
+  onSubmit,
+}: OrganizationProfileEditFieldDialogProps) {
+  const formId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (canSave && !isSaving) {
+      onSubmit();
+    }
+  };
+
+  return (
+    <Dialog.Root
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      {trigger ? <Dialog.Trigger render={trigger} /> : null}
+      <Dialog.Popup
+        variant='card'
+        initialFocus={inputRef}
+      >
+        <Card.Root
+          elevation='overlay'
+          renderBranding={false}
+        >
+          <Card.Header>
+            <Card.Title>{title}</Card.Title>
+            {description ? <Card.Description>{description}</Card.Description> : null}
+          </Card.Header>
+
+          <Card.Content
+            render={
+              <form
+                id={formId}
+                onSubmit={handleSubmit}
+              />
+            }
+          >
+            {error?.message && !error.field ? (
+              <Banner.Root
+                role='alert'
+                color='negative'
+              >
+                <Banner.Label>{error.message}</Banner.Label>
+              </Banner.Root>
+            ) : null}
+            <Field.Root invalid={Boolean(error?.field)}>
+              <Field.Label visuallyHidden>{fieldLabel}</Field.Label>
+              <Input
+                ref={inputRef}
+                disabled={isSaving}
+                value={value}
+                onChange={event => onValueChange(event.target.value)}
+              />
+              <Field.Message>
+                <Field.Error>{error?.field ? error.message : undefined}</Field.Error>
+              </Field.Message>
+            </Field.Root>
+          </Card.Content>
+          <Card.Footer>
+            <Dialog.Close
+              render={
+                <Button
+                  variant='outline'
+                  color='neutral'
+                  fullWidth
+                >
+                  {cancelLabel}
+                </Button>
+              }
+            />
+            <SubmitButton
+              form={formId}
+              fullWidth
+              isPending={isSaving}
+              disabled={!canSave}
+              focusableWhenDisabled
+            >
+              {saveLabel}
+            </SubmitButton>
+          </Card.Footer>
+        </Card.Root>
+      </Dialog.Popup>
+    </Dialog.Root>
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-logo-row.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-logo-row.view.tsx
new file mode 100644
index 00000000000..9685ad99cca
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-logo-row.view.tsx
@@ -0,0 +1,141 @@
+import { useState } from 'react';
+
+import type { ActionMenuAction } from '../../../components/action-menu';
+import { ActionMenu } from '../../../components/action-menu';
+import { Avatar } from '../../../components/avatar';
+import { Button } from '../../../components/button';
+import { Section } from '../../../components/section';
+import { useMessages } from '../../../localization';
+import type { FileRejection } from '../../../primitives/file-upload';
+import { FileUpload } from '../../../primitives/file-upload';
+
+const LOGO_MIME_TYPES = 'image/png,image/jpeg,image/gif,image/webp';
+const LOGO_MAX_BYTES = 10 * 1000 * 1000;
+
+export interface OrganizationProfileLogoRowViewProps {
+  name: string;
+  imageUrl?: string;
+  hasImage?: boolean;
+  errorMessage?: string;
+  onChange?: (file: File) => void;
+  onReject?: (rejections: FileRejection[]) => void;
+  onRemove?: () => void;
+}
+
+export function OrganizationProfileLogoRowView({
+  name,
+  imageUrl,
+  hasImage = false,
+  errorMessage,
+  onChange,
+  onReject,
+  onRemove,
+}: OrganizationProfileLogoRowViewProps) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+  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={LOGO_MIME_TYPES}
+      maxSize={LOGO_MAX_BYTES}
+      render={<Section.Row />}
+      onReject={rejections => {
+        const rejection = rejections[0];
+        setRejectionError(rejection ? m.logo.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
+            shape='square'
+            size='fit'
+          >
+            <Avatar.Image
+              alt={name}
+              src={imageUrl}
+            />
+            <Avatar.Fallback>{initials}</Avatar.Fallback>
+          </Avatar.Root>
+        </Section.Media>
+        <Section.Content>
+          <Section.Label>{m.logo.label}</Section.Label>
+          <Section.Description>{m.logo.description}</Section.Description>
+        </Section.Content>
+        <LogoActions
+          canChange={Boolean(onChange)}
+          hasImage={hasImage}
+          onRemove={onRemove}
+        />
+      </Section.Item>
+      <Section.Error>{displayedError}</Section.Error>
+    </FileUpload.Root>
+  );
+}
+
+function LogoActions({
+  hasImage,
+  canChange,
+  onRemove,
+}: {
+  hasImage: boolean;
+  canChange: boolean;
+  onRemove?: () => void;
+}) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+  const { openFilePicker } = FileUpload.useFileUpload();
+  const actions: ActionMenuAction[] = [];
+
+  if (hasImage && canChange) {
+    actions.push({ label: m.logo.change, icon: 'pen', onClick: openFilePicker });
+  }
+
+  if (hasImage && onRemove) {
+    actions.push({ label: m.logo.remove, icon: 'x', onClick: onRemove });
+  }
+
+  if (actions.length > 0) {
+    return (
+      <Section.Actions>
+        <ActionMenu
+          actions={actions}
+          label={m.logo.manage}
+        />
+      </Section.Actions>
+    );
+  }
+
+  if (!hasImage && canChange) {
+    return (
+      <Section.Actions>
+        <FileUpload.Trigger
+          render={
+            <Button
+              color='neutral'
+              size='sm'
+              variant='outline'
+            />
+          }
+        >
+          {m.logo.upload}
+        </FileUpload.Trigger>
+      </Section.Actions>
+    );
+  }
+
+  return null;
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-name-row.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-name-row.view.tsx
new file mode 100644
index 00000000000..a91c912e2fc
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-name-row.view.tsx
@@ -0,0 +1,57 @@
+import { Button } from '../../../components/button';
+import { Section } from '../../../components/section';
+import { useMessages } from '../../../localization';
+import { useOrganizationProfileEditFieldController } from './organization-profile-edit-field.controller';
+import { OrganizationProfileEditFieldDialog } from './organization-profile-edit-field.dialog';
+
+export interface OrganizationProfileNameRowViewProps {
+  name: string;
+  onSubmit?: (name: string) => Promise<void>;
+}
+
+export function OrganizationProfileNameRowView({ name, onSubmit }: OrganizationProfileNameRowViewProps) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+  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
+              name={name}
+              onSubmit={onSubmit}
+            />
+          </Section.Actions>
+        ) : null}
+      </Section.Item>
+    </Section.Row>
+  );
+}
+
+function EditName({ name, onSubmit }: { name: string; onSubmit: (name: string) => Promise<void> }) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+  const controller = useOrganizationProfileEditFieldController({ value: name, onSubmit });
+
+  return (
+    <OrganizationProfileEditFieldDialog
+      {...controller}
+      open={controller.isOpen}
+      title={m.name.dialogTitle}
+      fieldLabel={m.name.fieldLabel}
+      cancelLabel={m.name.cancel}
+      saveLabel={m.name.save}
+      trigger={
+        <Button
+          color='neutral'
+          size='sm'
+          variant='outline'
+        >
+          {m.name.edit}
+        </Button>
+      }
+    />
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-slug-row.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-slug-row.view.tsx
new file mode 100644
index 00000000000..e11ed2c6b84
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-slug-row.view.tsx
@@ -0,0 +1,76 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { Button } from '../../../components/button';
+import { CopyButton } from '../../../components/copy-button';
+import { Section } from '../../../components/section';
+import { useMessages } from '../../../localization';
+import { truncationStyles } from '../../../utils/typography.styles';
+import { useOrganizationProfileEditFieldController } from './organization-profile-edit-field.controller';
+import { OrganizationProfileEditFieldDialog } from './organization-profile-edit-field.dialog';
+import { styles } from './organization-profile-workspace-section.styles';
+
+export interface OrganizationProfileSlugRowViewProps {
+  slug: string;
+  onSubmit?: (slug: string) => Promise<void>;
+}
+
+export function OrganizationProfileSlugRowView({ slug, onSubmit }: OrganizationProfileSlugRowViewProps) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+  return (
+    <Section.Row>
+      <Section.Item>
+        <Section.Content>
+          <Section.Label>{m.slug.label}</Section.Label>
+          <Section.Description xstyle={styles.copyableValue}>
+            <span
+              {...stylex.props(truncationStyles.singleLine, styles.copyableText)}
+              title={slug}
+            >
+              {slug}
+            </span>
+            <CopyButton
+              value={slug}
+              label={m.slug.copy}
+              copiedLabel={m.slug.copied}
+              xstyle={styles.copyAction}
+            />
+          </Section.Description>
+        </Section.Content>
+        {onSubmit ? (
+          <Section.Actions>
+            <EditSlug
+              slug={slug}
+              onSubmit={onSubmit}
+            />
+          </Section.Actions>
+        ) : null}
+      </Section.Item>
+    </Section.Row>
+  );
+}
+
+function EditSlug({ slug, onSubmit }: { slug: string; onSubmit: (slug: string) => Promise<void> }) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+  const controller = useOrganizationProfileEditFieldController({ value: slug, onSubmit });
+
+  return (
+    <OrganizationProfileEditFieldDialog
+      {...controller}
+      open={controller.isOpen}
+      title={m.slug.dialogTitle}
+      description={m.slug.dialogDescription}
+      fieldLabel={m.slug.fieldLabel}
+      cancelLabel={m.slug.cancel}
+      saveLabel={m.slug.save}
+      trigger={
+        <Button
+          color='neutral'
+          size='sm'
+          variant='outline'
+        >
+          {m.slug.edit}
+        </Button>
+      }
+    />
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.messages.ts b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.messages.ts
new file mode 100644
index 00000000000..c9cb5417eb0
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.messages.ts
@@ -0,0 +1,38 @@
+export const organizationProfileWorkspaceSectionMessages = {
+  sectionTitle: 'Workspace details',
+  logo: {
+    label: 'Logo',
+    description: 'Recommended size 1:1, up to 10MB.',
+    upload: 'Upload',
+    manage: 'Manage logo',
+    change: 'Change logo',
+    remove: 'Remove logo',
+
+    errors: {
+      accept: 'File type not supported. Please upload a JPG, PNG, GIF, or WEBP image.',
+      size: 'File size exceeds the maximum limit of 10MB. Please choose a smaller file.',
+      overflow: 'Only one file can be uploaded at a time.',
+    },
+  },
+  name: {
+    label: 'Name',
+    edit: 'Edit name',
+
+    dialogTitle: 'Edit name',
+    fieldLabel: 'Name',
+    cancel: 'Cancel',
+    save: 'Save changes',
+  },
+  slug: {
+    label: 'Slug',
+    edit: 'Edit slug',
+    copy: 'Copy slug',
+    copied: 'Copied',
+
+    dialogTitle: 'Edit slug',
+    dialogDescription: 'A unique identifier used in workspace URLs. Changing it may break existing links.',
+    fieldLabel: 'Slug',
+    cancel: 'Cancel',
+    save: 'Save changes',
+  },
+} as const;
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.styles.ts b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.styles.ts
new file mode 100644
index 00000000000..512d0b115cc
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.styles.ts
@@ -0,0 +1,14 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { space } from '../../../tokens.stylex';
+
+export const styles = stylex.create({
+  copyableValue: {
+    gap: space['1'],
+    alignItems: 'center',
+    display: 'flex',
+    minWidth: 0,
+  },
+  copyableText: { minWidth: 0 },
+  copyAction: { flexShrink: 0 },
+});
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.view.tsx
new file mode 100644
index 00000000000..11d06db54d8
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.view.tsx
@@ -0,0 +1,56 @@
+import { Section } from '../../../components/section';
+import { useMessages } from '../../../localization';
+import type { FileRejection } from '../../../primitives/file-upload';
+import { OrganizationProfileLogoRowView } from './organization-profile-logo-row.view';
+import { OrganizationProfileNameRowView } from './organization-profile-name-row.view';
+import { OrganizationProfileSlugRowView } from './organization-profile-slug-row.view';
+
+export interface OrganizationProfileWorkspaceSectionViewProps {
+  name: string;
+  slug: string;
+  imageUrl?: string;
+  hasImage?: boolean;
+  onLogoChange?: (file: File) => void;
+  onLogoReject?: (rejections: FileRejection[]) => void;
+  onRemoveLogo?: () => void;
+  onSubmitName?: (name: string) => Promise<void>;
+  onSubmitSlug?: (slug: string) => Promise<void>;
+}
+
+export function OrganizationProfileWorkspaceSectionView({
+  name,
+  slug,
+  imageUrl,
+  hasImage = false,
+  onLogoChange,
+  onLogoReject,
+  onRemoveLogo,
+  onSubmitName,
+  onSubmitSlug,
+}: OrganizationProfileWorkspaceSectionViewProps) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+
+  return (
+    <Section.Root>
+      <Section.Title>{m.sectionTitle}</Section.Title>
+      <Section.Group>
+        <OrganizationProfileLogoRowView
+          name={name}
+          imageUrl={imageUrl}
+          hasImage={hasImage}
+          onChange={onLogoChange}
+          onReject={onLogoReject}
+          onRemove={onRemoveLogo}
+        />
+        <OrganizationProfileNameRowView
+          name={name}
+          onSubmit={onSubmitName}
+        />
+        <OrganizationProfileSlugRowView
+          slug={slug}
+          onSubmit={onSubmitSlug}
+        />
+      </Section.Group>
+    </Section.Root>
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile.layout.ts b/packages/mosaic/src/features/organization-profile/organization-profile.layout.ts
new file mode 100644
index 00000000000..d9e9747fada
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile.layout.ts
@@ -0,0 +1,48 @@
+import type { IconName } from '../../icons/registry';
+import { applyOrder } from '../../utils/apply-order';
+import type {
+  CustomOrganizationProfilePage,
+  OrganizationProfilePageId,
+  OrganizationProfilePages,
+} from './organization-profile.types';
+
+export const ORGANIZATION_PROFILE_PAGE_IDS: readonly OrganizationProfilePageId[] = [
+  'general',
+  'members',
+  'security',
+  'billing',
+  'apiKeys',
+];
+
+export const ORGANIZATION_PROFILE_PAGE_ICONS: Record<OrganizationProfilePageId, IconName> = {
+  general: 'building',
+  members: 'users',
+  security: 'security-lock-square',
+  billing: 'credit-card',
+  apiKeys: 'key',
+};
+
+export type OrganizationProfileNavEntry =
+  | { id: OrganizationProfilePageId; custom?: undefined }
+  | { id: string; custom: CustomOrganizationProfilePage };
+
+export function getAvailableOrganizationProfilePages(pages: OrganizationProfilePages): OrganizationProfilePageId[] {
+  return ORGANIZATION_PROFILE_PAGE_IDS.filter(id => pages[id] !== undefined);
+}
+
+export function resolveOrganizationProfilePages(
+  builtIn: readonly OrganizationProfilePageId[],
+  customPages: readonly CustomOrganizationProfilePage[] = [],
+  order?: readonly string[],
+): OrganizationProfileNavEntry[] {
+  const customById = new Map(customPages.map(page => [page.path, page]));
+  const builtInIds = new Set<string>(builtIn);
+  const entries: OrganizationProfileNavEntry[] = [
+    ...builtIn.map((id): OrganizationProfileNavEntry => {
+      const custom = customById.get(id);
+      return custom ? { id, custom } : { id };
+    }),
+    ...customPages.filter(page => !builtInIds.has(page.path)).map(page => ({ id: page.path, custom: page })),
+  ];
+  return applyOrder(order, entries, entry => entry.id);
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile.messages.ts b/packages/mosaic/src/features/organization-profile/organization-profile.messages.ts
new file mode 100644
index 00000000000..9dd9cf3775e
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile.messages.ts
@@ -0,0 +1,11 @@
+export const organizationProfileMessages = {
+  label: 'Workspace',
+  pages: {
+    general: 'General',
+    members: 'Members',
+    security: 'Security',
+    billing: 'Billing',
+    apiKeys: 'API Keys',
+  },
+  placeholder: '{page} is not built yet.',
+} as const;
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile.types.ts b/packages/mosaic/src/features/organization-profile/organization-profile.types.ts
new file mode 100644
index 00000000000..af9601569d1
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile.types.ts
@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+import type { OrganizationProfileGeneralPanelViewProps } from './organization-profile-general-panel.view';
+
+export type OrganizationProfilePageId = 'general' | 'members' | 'security' | 'billing' | 'apiKeys';
+
+export interface OrganizationProfilePages {
+  general: OrganizationProfileGeneralPanelViewProps;
+  members?: Record<string, never>;
+  security?: Record<string, never>;
+  billing?: Record<string, never>;
+  apiKeys?: Record<string, never>;
+}
+
+export interface CustomOrganizationProfilePage {
+  label: string;
+  path: string;
+  href?: never;
+  icon?: ReactNode;
+  content: ReactNode;
+}
+
+export interface OrganizationProfileFormError {
+  message?: string;
+  /** Names the control the failure belongs to. Set, and `message` renders under it instead of in the banner. */
+  field?: string;
+}
+
+export class OrganizationProfileSaveError extends Error {
+  readonly field?: string;
+
+  constructor(message: string, field?: string) {
+    super(message);
+    this.name = 'OrganizationProfileSaveError';
+    this.field = field;
+  }
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile.view.tsx
new file mode 100644
index 00000000000..466e73d0d37
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile.view.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+
+import { Icon } from '../../components/icon';
+import type { ProfileRootProps } from '../../components/profile';
+import { Profile } from '../../components/profile';
+import { useMessages } from '../../localization';
+import {
+  getAvailableOrganizationProfilePages,
+  ORGANIZATION_PROFILE_PAGE_ICONS,
+  resolveOrganizationProfilePages,
+} from './organization-profile.layout';
+import type {
+  CustomOrganizationProfilePage,
+  OrganizationProfilePageId,
+  OrganizationProfilePages,
+} from './organization-profile.types';
+import { OrganizationProfileGeneralPanelView } from './organization-profile-general-panel.view';
+import { OrganizationProfilePlaceholderPanelView } from './organization-profile-placeholder-panel.view';
+
+export interface OrganizationProfileViewProps extends Omit<ProfileRootProps, 'children' | 'value' | 'onValueChange'> {
+  label?: string;
+  activePage: OrganizationProfilePageId | (string & {});
+  pages: OrganizationProfilePages;
+  customPages?: readonly CustomOrganizationProfilePage[];
+  pageOrder?: readonly (OrganizationProfilePageId | (string & {}))[];
+  onPageChange: (page: OrganizationProfilePageId | (string & {})) => void;
+}
+
+function BuiltInPage({
+  id,
+  pages,
+}: {
+  id: OrganizationProfilePageId;
+  pages: OrganizationProfilePages;
+}): React.ReactElement | null {
+  if (id === 'general') {
+    return <OrganizationProfileGeneralPanelView {...pages.general} />;
+  }
+  return <OrganizationProfilePlaceholderPanelView page={id} />;
+}
+
+export const OrganizationProfileView = React.forwardRef<HTMLDivElement, OrganizationProfileViewProps>(
+  function OrganizationProfileView({ activePage, pages, customPages, pageOrder, onPageChange, label, ...rest }, ref) {
+    const m = useMessages('organizationProfile');
+    const entries = resolveOrganizationProfilePages(
+      getAvailableOrganizationProfilePages(pages),
+      customPages,
+      pageOrder,
+    );
+    const resolvedPage = entries.some(entry => entry.id === activePage) ? activePage : entries[0].id;
+
+    return (
+      <Profile.Root
+        ref={ref}
+        value={resolvedPage}
+        onValueChange={onPageChange}
+        {...rest}
+      >
+        <Profile.Title>{label ?? m.label}</Profile.Title>
+        <Profile.Nav>
+          {entries.map(entry => (
+            <Profile.NavItem
+              key={entry.id}
+              value={entry.id}
+              icon={
+                entry.custom ? (
+                  entry.custom.icon
+                ) : (
+                  <Icon
+                    name={ORGANIZATION_PROFILE_PAGE_ICONS[entry.id]}
+                    size='sm'
+                  />
+                )
+              }
+            >
+              {entry.custom ? entry.custom.label : m.pages[entry.id]}
+            </Profile.NavItem>
+          ))}
+        </Profile.Nav>
+        <Profile.Content>
+          {entries.map(entry => (
+            <Profile.ContentPanel
+              key={entry.id}
+              value={entry.id}
+            >
+              {entry.custom ? (
+                entry.custom.content
+              ) : (
+                <BuiltInPage
+                  id={entry.id}
+                  pages={pages}
+                />
+              )}
+            </Profile.ContentPanel>
+          ))}
+        </Profile.Content>
+      </Profile.Root>
+    );
+  },
+);
diff --git a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-list-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-list-row.view.tsx
index 9f950b2461b..42dee231f9a 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-list-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-list-row.view.tsx
@@ -1,12 +1,12 @@
 import type { ReactNode } from 'react';
 
+import type { ActionMenuAction } from '../../../components/action-menu';
+import { ActionMenu } from '../../../components/action-menu';
 import { Badge } from '../../../components/badge';
 import { Button } from '../../../components/button';
 import { Icon } from '../../../components/icon';
 import { Section } from '../../../components/section';
 import { fill, useMessages } from '../../../localization';
-import type { UserProfileMenuAction } from '../user-profile-action-menu';
-import { UserProfileActionMenu } from '../user-profile-action-menu';
 import { styles } from '../user-profile-profile-panel.styles';
 
 export interface UserProfileContactListRowViewProps {
@@ -69,7 +69,7 @@ export function UserProfileContactListRowView({
           </Section.Item>
         ) : (
           items.map(item => {
-            const actions: UserProfileMenuAction[] = [];
+            const actions: ActionMenuAction[] = [];
 
             if (item.isVerified === false && onVerify) {
               actions.push({
@@ -98,7 +98,7 @@ export function UserProfileContactListRowView({
                 </Section.Content>
                 {actions.length > 0 ? (
                   <Section.Actions>
-                    <UserProfileActionMenu
+                    <ActionMenu
                       actions={actions}
                       label={fill(m.manageValue, { value: item.value })}
                     />
diff --git a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx
index 4eef4285037..ff827ccb985 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx
@@ -1,13 +1,13 @@
 import { useState } from 'react';
 
+import type { ActionMenuAction } from '../../../components/action-menu';
+import { ActionMenu } from '../../../components/action-menu';
 import { Avatar } from '../../../components/avatar';
 import { Button } from '../../../components/button';
 import { Section } from '../../../components/section';
 import { useMessages } from '../../../localization';
 import type { FileRejection } from '../../../primitives/file-upload';
 import { FileUpload } from '../../../primitives/file-upload';
-import type { UserProfileMenuAction } from '../user-profile-action-menu';
-import { UserProfileActionMenu } from '../user-profile-action-menu';
 
 const PROFILE_PICTURE_MIME_TYPES = 'image/png,image/jpeg,image/gif,image/webp';
 /** Matches the limit the row's own description advertises. */
@@ -80,7 +80,7 @@ export function UserProfilePictureRowView({
           onRemove={onRemove}
         />
       </Section.Item>
-      {displayedError ? <Section.Error>{displayedError}</Section.Error> : null}
+      <Section.Error>{displayedError}</Section.Error>
     </FileUpload.Root>
   );
 }
@@ -96,7 +96,7 @@ function ProfilePictureActions({
 }) {
   const m = useMessages('userProfileAccountSection');
   const { openFilePicker } = FileUpload.useFileUpload();
-  const actions: UserProfileMenuAction[] = [];
+  const actions: ActionMenuAction[] = [];
 
   if (hasImage && canChange) {
     actions.push({ label: m.picture.change, icon: 'pen', onClick: openFilePicker });
@@ -109,7 +109,7 @@ function ProfilePictureActions({
   if (actions.length > 0) {
     return (
       <Section.Actions>
-        <UserProfileActionMenu
+        <ActionMenu
           actions={actions}
           label={m.picture.manage}
         />
diff --git a/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx
index f238eab6987..4ad560377c2 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx
@@ -3,6 +3,8 @@ import type { Ref } from 'react';
 import { useMemo, useRef, useState } from 'react';
 
 import { Confirmation } from '../../blocks/confirmation';
+import type { ActionMenuAction } from '../../components/action-menu';
+import { ActionMenu } from '../../components/action-menu';
 import { Badge } from '../../components/badge';
 import { Button } from '../../components/button';
 import { Dialog } from '../../components/dialog';
@@ -10,8 +12,6 @@ import { Section } from '../../components/section';
 import { useListRemovalFocus } from '../../hooks/useListRemovalFocus';
 import type { MosaicMessages } from '../../localization';
 import { fill, plural, useLocale, useMessages } from '../../localization';
-import type { UserProfileMenuAction } from './user-profile-action-menu';
-import { UserProfileActionMenu } from './user-profile-action-menu';
 import type { UserProfileDevice } from './user-profile-active-devices.types';
 import { UserProfileDeviceDetailsDialog } from './user-profile-device-details.dialog';
 import { UserProfileSecurityIcon } from './user-profile-security-icon';
@@ -211,7 +211,7 @@ function DeviceItem({
   onSignOut?: (device: UserProfileDevice) => void;
 }) {
   const m = useMessages('userProfileActiveDevices');
-  const actions: UserProfileMenuAction[] = [{ label: m.viewDetails, onClick: () => onViewDetails(device) }];
+  const actions: ActionMenuAction[] = [{ label: m.viewDetails, onClick: () => onViewDetails(device) }];
 
   if (onSignOut) {
     actions.push({ label: m.signOut, onClick: () => onSignOut(device) });
@@ -235,7 +235,7 @@ function DeviceItem({
         {device.description ? <Section.Description>{device.description}</Section.Description> : null}
       </Section.Content>
       <Section.Actions>
-        <UserProfileActionMenu
+        <ActionMenu
           actions={actions}
           label={fill(m.manageLabel, { name: device.name })}
           triggerRef={triggerRef}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.styles.ts
index c2439445187..168858bb2e8 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.styles.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.styles.ts
@@ -96,12 +96,6 @@ export const styles = stylex.create({
     alignItems: 'center',
     display: 'flex',
   },
-  root: {
-    gap: space['6'],
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
   row: {
     borderBlockStartColor: colorVars['--cl-color-border'],
     borderBlockStartStyle: 'solid',
diff --git a/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx
index 4e0e2e50f1a..3c400b9db7f 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx
@@ -6,7 +6,7 @@ import { Button } from '../../components/button';
 import { Icon } from '../../components/icon';
 import { Input } from '../../components/input';
 import { Menu } from '../../components/menu';
-import { Profile } from '../../components/profile';
+import { panelStyles, Profile } from '../../components/profile';
 import { mergeStyleProps, themeProps } from '../../props';
 import { rtl } from '../../utils/rtl.styles';
 import { styles } from './user-profile-api-keys-panel.styles';
@@ -65,7 +65,7 @@ export function UserProfileApiKeysPanelView({
   };
 
   return (
-    <div {...mergeStyleProps(themeProps('user-profile-api-keys-panel'), stylex.props(styles.root))}>
+    <div {...mergeStyleProps(themeProps('user-profile-api-keys-panel'), stylex.props(panelStyles.root))}>
       <Profile.PageTitle>API Keys</Profile.PageTitle>
       <div {...stylex.props(styles.toolbar)}>
         <div {...stylex.props(styles.searchWrapper)}>
diff --git a/packages/mosaic/src/features/user-profile/user-profile-billing-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-billing-panel.styles.ts
index 639aa008564..100d8be4f42 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-billing-panel.styles.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-billing-panel.styles.ts
@@ -1,6 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, fontWeightVars, space, typeScaleVars } from '../../tokens.stylex';
+import { colorVars, fontWeightVars, typeScaleVars } from '../../tokens.stylex';
 
 export const styles = stylex.create({
   amount: {
@@ -9,16 +9,4 @@ export const styles = stylex.create({
     fontWeight: fontWeightVars['--cl-font-semibold'],
     lineHeight: typeScaleVars['--cl-text-base-leading'],
   },
-  root: {
-    gap: space['4'],
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
-  sections: {
-    gap: space['4'],
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
 });
diff --git a/packages/mosaic/src/features/user-profile/user-profile-billing-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-billing-panel.view.tsx
index 0c8678ba65f..ddfba8d14d6 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-billing-panel.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-billing-panel.view.tsx
@@ -1,14 +1,13 @@
 import * as stylex from '@stylexjs/stylex';
 import type { ReactElement } from 'react';
 
-import { Profile } from '../../components/profile';
+import { panelStyles, Profile } from '../../components/profile';
 import { mergeStyleProps, themeProps } from '../../props';
 import type {
   UserProfileBillingHistoryItem,
   UserProfileBillingHistoryPagination,
 } from './user-profile-billing-history-section.view';
 import { UserProfileBillingHistorySectionView } from './user-profile-billing-history-section.view';
-import { styles } from './user-profile-billing-panel.styles';
 import type { UserProfilePaymentMethod } from './user-profile-payment-methods-section.view';
 import { UserProfilePaymentMethodsSectionView } from './user-profile-payment-methods-section.view';
 import type { UserProfileSubscription } from './user-profile-subscription-section.view';
@@ -49,9 +48,9 @@ export function UserProfileBillingPanelView({
   onViewInvoice,
 }: UserProfileBillingPanelViewProps): ReactElement {
   return (
-    <div {...mergeStyleProps(themeProps('user-profile-billing-panel'), stylex.props(styles.root))}>
+    <div {...mergeStyleProps(themeProps('user-profile-billing-panel'), stylex.props(panelStyles.root))}>
       <Profile.PageTitle>Billing</Profile.PageTitle>
-      <div {...stylex.props(styles.sections)}>
+      <div {...stylex.props(panelStyles.sections)}>
         <UserProfileSubscriptionSectionView
           subscription={subscription}
           onChangePlan={onChangePlan}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx
index e953d8ccdfc..78c1f4a7c50 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx
@@ -1,12 +1,12 @@
 import * as stylex from '@stylexjs/stylex';
 
+import type { ActionMenuAction } from '../../components/action-menu';
+import { ActionMenu } from '../../components/action-menu';
 import { Badge } from '../../components/badge';
 import { Button } from '../../components/button';
 import { Icon, IconFrame } from '../../components/icon';
 import { Section } from '../../components/section';
 import { fill, useMessages } from '../../localization';
-import type { UserProfileMenuAction } from './user-profile-action-menu';
-import { UserProfileActionMenu } from './user-profile-action-menu';
 import { styles } from './user-profile-connected-accounts.styles';
 import type { UserProfileConnectedAccount } from './user-profile-connected-accounts-section.view';
 
@@ -23,7 +23,7 @@ export function UserProfileConnectedAccountRowView({
 }) {
   const m = useMessages('userProfileConnectedAccounts');
   const iconUrl = account.iconUrl?.trim();
-  const actions: UserProfileMenuAction[] = [];
+  const actions: ActionMenuAction[] = [];
   if (account.status === 'reconnect' && onReconnect) {
     actions.push({ label: m.reconnect, onClick: () => onReconnect(account.id) });
   }
@@ -85,18 +85,16 @@ export function UserProfileConnectedAccountRowView({
           </Section.Actions>
         ) : actions.length > 0 ? (
           <Section.Actions>
-            <UserProfileActionMenu
+            <ActionMenu
               label={fill(m.manageLabel, { provider: account.provider })}
               actions={actions}
             />
           </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.Error>{account.connectError}</Section.Error>
+      <Section.Error>{account.reconnectError}</Section.Error>
+      <Section.Error>{account.status === 'error' ? account.verificationError : undefined}</Section.Error>
     </Section.Row>
   );
 }
diff --git a/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx
index f6330c2052f..b37b3e4ac29 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx
@@ -88,7 +88,7 @@ export function UserProfileEnterpriseAccountRowView({
           </Section.Actions>
         ) : null}
       </Section.Item>
-      {onConnect && account.connectError ? <Section.Error>{account.connectError}</Section.Error> : null}
+      <Section.Error>{onConnect ? account.connectError : undefined}</Section.Error>
     </Section.Row>
   );
 }
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-row.view.tsx
index 25cd5afc34c..8bd28ef15c9 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-row.view.tsx
@@ -1,8 +1,8 @@
+import type { ActionMenuAction } from '../../components/action-menu';
+import { ActionMenu } from '../../components/action-menu';
 import { Badge } from '../../components/badge';
 import { Section } from '../../components/section';
 import { fill, useMessages } from '../../localization';
-import type { UserProfileMenuAction } from './user-profile-action-menu';
-import { UserProfileActionMenu } from './user-profile-action-menu';
 import { styles } from './user-profile-mfa-section.styles';
 import type { UserProfileMfaMethod, UserProfileMfaSectionViewProps } from './user-profile-mfa-section.view';
 import { UserProfileSecurityIcon } from './user-profile-security-icon';
@@ -23,7 +23,7 @@ export function UserProfileMfaRowView({
     method.type === 'sms' && method.description
       ? fill(m.manageSms, { label, phoneNumber: method.description })
       : fill(m.manage, { label });
-  const actions: UserProfileMenuAction[] = [];
+  const actions: ActionMenuAction[] = [];
 
   if (method.type === 'sms' && method.canSetDefault && !method.isDefault && onSetDefault) {
     actions.push({ label: m.setDefault, onClick: () => onSetDefault(method.id) });
@@ -49,7 +49,7 @@ export function UserProfileMfaRowView({
       </Section.Content>
       {actions.length > 0 ? (
         <Section.Actions>
-          <UserProfileActionMenu
+          <ActionMenu
             actions={actions}
             label={manageLabel}
           />
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
index ee428cc0ef0..1263e0b2847 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
@@ -1,12 +1,12 @@
 import type { Ref } from 'react';
 import { useMemo } from 'react';
 
+import type { ActionMenuAction } from '../../components/action-menu';
+import { ActionMenu } from '../../components/action-menu';
 import { Dialog } from '../../components/dialog';
 import { Icon, IconFrame } from '../../components/icon';
 import { Section } from '../../components/section';
 import { fill } from '../../localization/messages';
-import type { UserProfileMenuAction } from './user-profile-action-menu';
-import { UserProfileActionMenu } from './user-profile-action-menu';
 import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
 import { styles } from './user-profile-passkeys-section.styles';
 import type { UserProfilePasskey } from './user-profile-passkeys-section.view';
@@ -31,7 +31,7 @@ export function UserProfilePasskeyRowView({
       ? fill(m.details, { createdAt: passkey.createdAtLabel, lastUsedAt: passkey.lastUsedAtLabel })
       : passkey.createdAtLabel || passkey.lastUsedAtLabel;
 
-  const actions: UserProfileMenuAction[] = [];
+  const actions: ActionMenuAction[] = [];
   if (onRename) {
     actions.push({ label: m.rename, onClick: () => renameDialog.open(undefined) });
   }
@@ -61,7 +61,7 @@ export function UserProfilePasskeyRowView({
         </Section.Content>
         {actions.length > 0 ? (
           <Section.Actions>
-            <UserProfileActionMenu
+            <ActionMenu
               triggerRef={triggerRef}
               actions={actions}
               label={fill(m.manage, { name: passkey.name })}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-payment-methods-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-payment-methods-section.view.tsx
index e27c7bfd6fa..1a58aa7fd1f 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-payment-methods-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-payment-methods-section.view.tsx
@@ -1,9 +1,9 @@
+import type { ActionMenuAction } from '../../components/action-menu';
+import { ActionMenu } from '../../components/action-menu';
 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 { UserProfileProviderIcon } from './user-profile-provider-icon';
 
 export interface UserProfilePaymentMethod {
@@ -87,7 +87,7 @@ function PaymentMethodItem({
   onMakeDefault?: (id: string) => void;
   onRemove?: (id: string) => void;
 }) {
-  const actions: UserProfileMenuAction[] = [];
+  const actions: ActionMenuAction[] = [];
 
   if (!paymentMethod.isDefault && onMakeDefault) {
     actions.push({ label: 'Make default', onClick: () => onMakeDefault(paymentMethod.id) });
@@ -106,7 +106,7 @@ function PaymentMethodItem({
         {paymentMethod.expiryLabel ? <Section.Description>{paymentMethod.expiryLabel}</Section.Description> : null}
       </Section.Content>
       <Section.Actions>
-        <UserProfileActionMenu
+        <ActionMenu
           actions={actions}
           label={`Manage ${paymentMethod.label}`}
         />
diff --git a/packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts
index 3c975ee22fc..3935170e88a 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts
@@ -20,15 +20,4 @@ export const styles = stylex.create({
     height: space['5'],
     width: space['5'],
   },
-  root: {
-    gap: space['4'],
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  sections: {
-    gap: space['8'],
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
 });
diff --git a/packages/mosaic/src/features/user-profile/user-profile-profile-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-profile-panel.view.tsx
index 3d79c599f22..cb33e5ab840 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-profile-panel.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-profile-panel.view.tsx
@@ -1,7 +1,7 @@
 import * as stylex from '@stylexjs/stylex';
 import type { ReactElement } from 'react';
 
-import { Profile } from '../../components/profile';
+import { panelStyles, Profile } from '../../components/profile';
 import { mergeStyleProps, themeProps } from '../../props';
 import type {
   UserProfileAccountSectionViewProps,
@@ -15,7 +15,6 @@ import type {
 } 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';
 import type { UserProfileWeb3Provider, UserProfileWeb3Wallet } from './user-profile-web3-wallets-section.view';
 import { UserProfileWeb3WalletsSectionView } from './user-profile-web3-wallets-section.view';
 
@@ -84,9 +83,9 @@ export function UserProfileProfilePanelView({
   onDeleteAccount,
 }: UserProfileProfilePanelViewProps): ReactElement {
   return (
-    <div {...mergeStyleProps(themeProps('user-profile-profile-panel'), stylex.props(styles.root))}>
+    <div {...mergeStyleProps(themeProps('user-profile-profile-panel'), stylex.props(panelStyles.root))}>
       <Profile.PageTitle>Account</Profile.PageTitle>
-      <div {...stylex.props(styles.sections)}>
+      <div {...stylex.props(panelStyles.sections)}>
         <UserProfileAccountSectionView
           allowMultipleAccounts={allowMultipleAccounts}
           emails={emails}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts
index 438797596fa..67454eca28a 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts
@@ -22,24 +22,12 @@ export const styles = stylex.create({
     borderWidth: '1px',
     backgroundColor: colorVars['--cl-color-background-subtle'],
   },
-  root: {
-    gap: space['4'],
-    display: 'flex',
-    flexDirection: 'column',
-  },
   sectionCards: {
     gap: space['3'],
     display: 'flex',
     flexDirection: 'column',
-    width: '100%',
   },
   emptySectionCards: {
     display: 'none',
   },
-  sections: {
-    gap: space['10'],
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
 });
diff --git a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
index 5f432029909..b92721f077a 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
@@ -1,7 +1,7 @@
 import * as stylex from '@stylexjs/stylex';
 import type { ReactElement, ReactNode } from 'react';
 
-import { Profile } from '../../components/profile';
+import { panelStyles, Profile } from '../../components/profile';
 import { mergeStyleProps, themeProps } from '../../props';
 import type {
   UserProfileActiveDevicesSectionViewProps,
@@ -83,9 +83,9 @@ export function UserProfileSecurityPanelView({
   const hasAuthentication = showPassword || showPasskeys || mfaMethods !== undefined;
 
   return (
-    <div {...mergeStyleProps(themeProps('user-profile-security-panel'), stylex.props(styles.root))}>
+    <div {...mergeStyleProps(themeProps('user-profile-security-panel'), stylex.props(panelStyles.root))}>
       <Profile.PageTitle>Security</Profile.PageTitle>
-      <div {...stylex.props(styles.sections)}>
+      <div {...stylex.props(panelStyles.sections)}>
         <div {...stylex.props(styles.sectionCards, !hasAuthentication && styles.emptySectionCards)}>
           {showPassword ? (
             <UserProfilePasswordSectionView
diff --git a/packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx
index 5027b5c64da..eb4b77413ac 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx
@@ -1,12 +1,12 @@
 import * as stylex from '@stylexjs/stylex';
 
+import type { ActionMenuAction } from '../../components/action-menu';
+import { ActionMenu } from '../../components/action-menu';
 import { Badge } from '../../components/badge';
 import { Button } from '../../components/button';
 import { Icon, IconFrame } from '../../components/icon';
 import { Section } from '../../components/section';
 import { fill, useMessages } from '../../localization';
-import type { UserProfileMenuAction } from './user-profile-action-menu';
-import { UserProfileActionMenu } from './user-profile-action-menu';
 import { styles } from './user-profile-web3-wallets.styles';
 import type { UserProfileWeb3Provider, UserProfileWeb3Wallet } from './user-profile-web3-wallets-section.view';
 
@@ -26,7 +26,7 @@ export function UserProfileWeb3WalletRowView({
   const linkedWallet = 'address' in wallet ? wallet : undefined;
   const address = linkedWallet?.address;
   const shortAddress = address && (address.length <= 10 ? address : `${address.slice(0, 6)}...${address.slice(-4)}`);
-  const actions: UserProfileMenuAction[] = [];
+  const actions: ActionMenuAction[] = [];
 
   if (linkedWallet && !linkedWallet.isPrimary && linkedWallet.isVerified && onSetPrimary) {
     actions.push({ label: m.setPrimary, onClick: () => onSetPrimary(wallet.id) });
@@ -93,15 +93,15 @@ export function UserProfileWeb3WalletRowView({
           </Section.Actions>
         ) : actions.length > 0 ? (
           <Section.Actions>
-            <UserProfileActionMenu
+            <ActionMenu
               actions={actions}
               label={fill(m.manageLabel, { wallet: wallet.provider || address || '' })}
             />
           </Section.Actions>
         ) : null}
       </Section.Item>
-      {'connectError' in wallet && wallet.connectError ? <Section.Error>{wallet.connectError}</Section.Error> : null}
-      {linkedWallet?.primaryError ? <Section.Error>{linkedWallet.primaryError}</Section.Error> : null}
+      <Section.Error>{'connectError' in wallet ? wallet.connectError : undefined}</Section.Error>
+      <Section.Error>{linkedWallet?.primaryError}</Section.Error>
     </Section.Row>
   );
 }
diff --git a/packages/mosaic/src/localization/registry.ts b/packages/mosaic/src/localization/registry.ts
index 6c37b74b67b..a194045f8a1 100644
--- a/packages/mosaic/src/localization/registry.ts
+++ b/packages/mosaic/src/localization/registry.ts
@@ -1,3 +1,6 @@
+import { organizationProfileMessages } from '../features/organization-profile/organization-profile.messages';
+import { organizationProfileDangerSectionMessages } from '../features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.messages';
+import { organizationProfileWorkspaceSectionMessages } from '../features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.messages';
 import { reverificationMessages } from '../features/reverification/reverification.messages';
 import { userButtonMessages } from '../features/user-button/user-button.messages';
 import { userProfileMessages } from '../features/user-profile/user-profile.messages';
@@ -19,6 +22,9 @@ import { userProfilePasswordSectionMessages } from '../features/user-profile/use
 import { userProfileWeb3WalletsMessages } from '../features/user-profile/user-profile-web3-wallets.messages';
 
 export const mosaicMessages = {
+  organizationProfile: organizationProfileMessages,
+  organizationProfileDangerSection: organizationProfileDangerSectionMessages,
+  organizationProfileWorkspaceSection: organizationProfileWorkspaceSectionMessages,
   reverification: reverificationMessages,
   userButton: userButtonMessages,
   userProfile: userProfileMessages,
diff --git a/packages/mosaic/src/utils/feedback.styles.ts b/packages/mosaic/src/utils/feedback.styles.ts
new file mode 100644
index 00000000000..92bcd4fbd4c
--- /dev/null
+++ b/packages/mosaic/src/utils/feedback.styles.ts
@@ -0,0 +1,56 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { colorVars, durationVars, easingVars, space } from '../tokens.stylex';
+
+const GAP = space['2'];
+
+export const feedbackStyles = stylex.create({
+  collapse: {
+    overflow: 'clip',
+    alignContent: 'start',
+    display: 'grid',
+    position: 'relative',
+    transitionDuration: durationVars['--cl-duration-slow'],
+    transitionProperty: {
+      default: 'height, margin-top',
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
+    transitionTimingFunction: easingVars['--cl-ease-enter'],
+    height: {
+      default: 'var(--_cl-feedback-height)',
+      ':where(:not([data-open]), [data-starting-style])': 0,
+    },
+    marginTop: {
+      default: 0,
+      ':where(:not([data-open]), [data-starting-style])': `calc(-1 * ${GAP})`,
+    },
+  },
+  message: {
+    inset: { default: null, ':where([data-ending-style])': '0 0 auto' },
+    margin: 0,
+    gap: space['1'],
+    alignItems: 'flex-start',
+    display: 'flex',
+    opacity: { default: 1, ':where([data-starting-style], [data-ending-style])': 0 },
+    // Leaves the flow while it exits so the message arriving behind it takes the row.
+    position: { default: null, ':where([data-ending-style])': 'absolute' },
+    textWrap: 'pretty',
+    transitionDuration: durationVars['--cl-duration-base'],
+    transitionProperty: 'opacity',
+    transitionTimingFunction: 'linear',
+  },
+  icon: {
+    flexShrink: 0,
+    height: '1lh',
+  },
+  error: {
+    color: colorVars['--cl-color-negative'],
+  },
+  success: {
+    color: colorVars['--cl-color-positive'],
+  },
+});
+
+export const feedbackHeight = stylex.create({
+  measured: (height: number) => ({ '--_cl-feedback-height': `${height}px` }),
+});
diff --git a/packages/mosaic/src/utils/feedback.tsx b/packages/mosaic/src/utils/feedback.tsx
new file mode 100644
index 00000000000..48419840072
--- /dev/null
+++ b/packages/mosaic/src/utils/feedback.tsx
@@ -0,0 +1,55 @@
+import { useSafeLayoutEffect } from '@clerk/shared/react';
+import React from 'react';
+
+import { Icon } from '../components/icon';
+import type { IconName } from '../icons/registry';
+import { feedbackStyles } from './feedback.styles';
+
+export function hasMessage(children: React.ReactNode) {
+  return React.Children.toArray(children).some(child => child !== '');
+}
+
+export function useMessageHeight(active: HTMLElement | null) {
+  const [height, setHeight] = React.useState(0);
+
+  useSafeLayoutEffect(() => {
+    if (!active) {
+      return undefined;
+    }
+
+    const measure = () => setHeight(active.offsetHeight);
+    measure();
+
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(measure);
+    observer.observe(active);
+    return () => observer.disconnect();
+  }, [active]);
+
+  return height;
+}
+
+export function useHeldMessage(children: React.ReactNode, open: boolean) {
+  const held = React.useRef(children);
+  if (open) {
+    held.current = children;
+  }
+  return held.current;
+}
+
+export function FeedbackBody({ icon, children }: { icon: IconName; children: React.ReactNode }) {
+  return (
+    <>
+      <Icon
+        name={icon}
+        size='sm'
+        aria-hidden='true'
+        xstyle={feedbackStyles.icon}
+      />
+      <span>{children}</span>
+    </>
+  );
+}
diff --git a/packages/swingset/src/components/Composition.tsx b/packages/swingset/src/components/Composition.tsx
index 37d0d781440..0a525e5a687 100644
--- a/packages/swingset/src/components/Composition.tsx
+++ b/packages/swingset/src/components/Composition.tsx
@@ -13,7 +13,15 @@ export interface CompositionPiece {
 
 // Mosaic layers, high → low. Drives the order the composition groups render in.
 // Matches the sidebar group names.
-const LAYER_ORDER = ['User Button', 'User Profile', 'Blocks', 'Components', 'Styles', 'Primitives'];
+const LAYER_ORDER = [
+  'User Button',
+  'User Profile',
+  'Organization Profile',
+  'Blocks',
+  'Components',
+  'Styles',
+  'Primitives',
+];
 
 function layerRank(layer: string): number {
   const i = LAYER_ORDER.indexOf(layer);
diff --git a/packages/swingset/src/components/DocsViewer.tsx b/packages/swingset/src/components/DocsViewer.tsx
index 152f5fddbf8..1e3027bab2c 100644
--- a/packages/swingset/src/components/DocsViewer.tsx
+++ b/packages/swingset/src/components/DocsViewer.tsx
@@ -39,6 +39,14 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
     'user-profile-web3wallets-section': dynamic(() => import('../stories/user-profile-web3-wallets-section.mdx')),
     'user-profile-delete-section': dynamic(() => import('../stories/user-profile-delete-section.mdx')),
   },
+  'organization-profile': {
+    'organization-profile': dynamic(() => import('../stories/organization-profile.mdx')),
+    'organization-profile-general-panel': dynamic(() => import('../stories/organization-profile-general-panel.mdx')),
+    'organization-profile-workspace-section': dynamic(
+      () => import('../stories/organization-profile-workspace-section.mdx'),
+    ),
+    'organization-profile-danger-section': dynamic(() => import('../stories/organization-profile-danger-section.mdx')),
+  },
   reverification: {
     reverification: dynamic(() => import('../stories/reverification.mdx')),
   },
@@ -54,6 +62,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
     card: dynamic(() => import('../stories/card.component.mdx')),
     checkbox: dynamic(() => import('../stories/checkbox.mdx')),
     combobox: dynamic(() => import('../stories/combobox.mdx')),
+    'copy-button': dynamic(() => import('../stories/copy-button.mdx')),
     'data-list': dynamic(() => import('../stories/data-list.mdx')),
     input: dynamic(() => import('../stories/input.mdx')),
     'input-group': dynamic(() => import('../stories/input-group.mdx')),
diff --git a/packages/swingset/src/lib/registry.ts b/packages/swingset/src/lib/registry.ts
index 7a2d9402bdd..f15fd0d8c5a 100644
--- a/packages/swingset/src/lib/registry.ts
+++ b/packages/swingset/src/lib/registry.ts
@@ -42,6 +42,12 @@ import {
   meta as confirmationMeta,
   WithError as ConfirmationWithError,
 } from '../stories/confirmation.stories';
+import {
+  Default as CopyButtonDefault,
+  Inline as CopyButtonInline,
+  Labelled as CopyButtonLabelled,
+  meta as copyButtonMeta,
+} from '../stories/copy-button.stories';
 import { Default as DataListDefault, meta as dataListMeta, Plain as DataListPlain } from '../stories/data-list.stories';
 import {
   Default as DestructiveDefault,
@@ -124,6 +130,27 @@ import {
 } from '../stories/localization.stories';
 import { Default as MenuComponentDefault, meta as menuComponentMeta } from '../stories/menu.component.stories';
 import { meta as menuMeta } from '../stories/menu.stories';
+import {
+  Default as OrganizationProfileDefault,
+  meta as organizationProfileMeta,
+  Overlay as OrganizationProfileOverlay,
+} from '../stories/organization-profile.stories';
+import {
+  Default as OrganizationProfileDangerSectionDefault,
+  LeaveOnly as OrganizationProfileDangerSectionLeaveOnly,
+  meta as organizationProfileDangerSectionMeta,
+  WithError as OrganizationProfileDangerSectionWithError,
+} from '../stories/organization-profile-danger-section.stories';
+import {
+  Default as OrganizationProfileGeneralPanelDefault,
+  meta as organizationProfileGeneralPanelMeta,
+  ReadOnly as OrganizationProfileGeneralPanelReadOnly,
+} from '../stories/organization-profile-general-panel.stories';
+import {
+  Default as OrganizationProfileWorkspaceSectionDefault,
+  meta as organizationProfileWorkspaceSectionMeta,
+  SaveFails as OrganizationProfileWorkspaceSectionSaveFails,
+} from '../stories/organization-profile-workspace-section.stories';
 import {
   Default as OtpComponentDefault,
   Disabled as OtpComponentDisabled,
@@ -398,6 +425,38 @@ const comboboxModule: StoryModule = {
   Scrolling: ComboboxScrolling,
 };
 
+const copyButtonModule: StoryModule = {
+  meta: copyButtonMeta,
+  Default: CopyButtonDefault,
+  Inline: CopyButtonInline,
+  Labelled: CopyButtonLabelled,
+};
+
+const organizationProfileModule: StoryModule = {
+  meta: organizationProfileMeta,
+  Default: OrganizationProfileDefault,
+  Overlay: OrganizationProfileOverlay,
+};
+
+const organizationProfileGeneralPanelModule: StoryModule = {
+  meta: organizationProfileGeneralPanelMeta,
+  Default: OrganizationProfileGeneralPanelDefault,
+  ReadOnly: OrganizationProfileGeneralPanelReadOnly,
+};
+
+const organizationProfileWorkspaceSectionModule: StoryModule = {
+  meta: organizationProfileWorkspaceSectionMeta,
+  Default: OrganizationProfileWorkspaceSectionDefault,
+  SaveFails: OrganizationProfileWorkspaceSectionSaveFails,
+};
+
+const organizationProfileDangerSectionModule: StoryModule = {
+  meta: organizationProfileDangerSectionMeta,
+  Default: OrganizationProfileDangerSectionDefault,
+  WithError: OrganizationProfileDangerSectionWithError,
+  LeaveOnly: OrganizationProfileDangerSectionLeaveOnly,
+};
+
 const avatarModule: StoryModule = {
   meta: avatarMeta,
   Primary: AvatarPrimary,
@@ -787,6 +846,13 @@ export const registry: StoryModule[] = [
   userProfileEnterpriseAccountsSectionModule,
   userProfileWeb3WalletsSectionModule,
   userProfileDeleteSectionModule,
+  // Organization Profile
+  organizationProfileModule,
+  // Organization Profile · Panels
+  organizationProfileGeneralPanelModule,
+  // Organization Profile · Sections
+  organizationProfileWorkspaceSectionModule,
+  organizationProfileDangerSectionModule,
   // Reverification
   reverificationModule,
   // Blocks — flows assembled from components, wired by the caller's machine.
@@ -800,6 +866,7 @@ export const registry: StoryModule[] = [
   cardComponentModule,
   checkboxModule,
   comboboxModule,
+  copyButtonModule,
   flowComponentModule,
   inputModule,
   inputGroupModule,
diff --git a/packages/swingset/src/stories/copy-button.mdx b/packages/swingset/src/stories/copy-button.mdx
new file mode 100644
index 00000000000..9ae30fd7c10
--- /dev/null
+++ b/packages/swingset/src/stories/copy-button.mdx
@@ -0,0 +1,45 @@
+import * as Stories from './copy-button.stories';
+
+# CopyButton
+
+Puts a value on the clipboard and confirms it in a toast anchored to the button, which settles after
+`resetAfter`. A toast rather than a tooltip because the confirmation is an event, not a description
+of the control: it announces itself, `F6` reaches it and `Escape` dismisses it.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[{ name: 'Button', href: '/components/button', layer: 'Components' }]}
+/>
+
+## Props
+
+<PropTable
+  meta={Stories.meta}
+  extra={[
+    { name: 'value', type: 'string' },
+    { name: 'label', type: 'string', default: 'Copy' },
+    { name: 'copiedLabel', type: 'string', default: 'Copied' },
+    { name: 'side', type: "'top' | 'bottom' | 'left' | 'right'", default: 'top' },
+    { name: 'resetAfter', type: 'number', default: '2000' },
+    { name: 'onCopy', type: '(value: string) => void | Promise<void>' },
+    { name: 'onCopyError', type: '(error: unknown) => void' },
+  ]}
+/>
+
+## Inline with the value
+
+<Story
+  name='Inline'
+  storyModule={Stories}
+/>
+
+## Naming what it copies
+
+The button keeps its name while the copy is fresh; the confirmation is announced by the toast's own
+live region, from a landmark the `label` names.
+
+<Story
+  name='Labelled'
+  storyModule={Stories}
+/>
diff --git a/packages/swingset/src/stories/copy-button.stories.tsx b/packages/swingset/src/stories/copy-button.stories.tsx
new file mode 100644
index 00000000000..8b34f3ad844
--- /dev/null
+++ b/packages/swingset/src/stories/copy-button.stories.tsx
@@ -0,0 +1,65 @@
+import { CopyButton } from '@clerk/mosaic/components/copy-button';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './copy-button.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Components',
+  status: 'stable',
+  title: 'CopyButton',
+  source: 'packages/mosaic/src/components/copy-button/copy-button.tsx',
+  styles: {
+    _variants: {
+      color: { primary: {}, neutral: {}, negative: {} },
+      variant: { filled: {}, outline: {}, ghost: {}, link: {} },
+      size: { xs: {}, sm: {}, md: {}, lg: {} },
+      shape: { default: {}, square: {}, circle: {} },
+    },
+    _defaultVariants: {
+      color: 'neutral',
+      variant: 'ghost',
+      size: 'xs',
+      shape: 'square',
+    },
+  },
+};
+
+function knobsAsProps(props: Record<string, unknown>) {
+  return props as unknown as Record<string, never>;
+}
+
+export function Default(props: Record<string, unknown>) {
+  return (
+    <CopyButton
+      {...knobsAsProps(props)}
+      value='clerkWorkspace-177654156132154'
+    />
+  );
+}
+
+export function Inline(props: Record<string, unknown>) {
+  return (
+    <div style={{ display: 'flex', gap: 4, alignItems: 'center', fontSize: 14 }}>
+      <span>clerkWorkspace-177654156132154</span>
+      <CopyButton
+        {...knobsAsProps(props)}
+        value='clerkWorkspace-177654156132154'
+        label='Copy slug'
+      />
+    </div>
+  );
+}
+
+export function Labelled(props: Record<string, unknown>) {
+  return (
+    <CopyButton
+      {...knobsAsProps(props)}
+      value='sk_test_0000000000000000000000000000'
+      label='Copy API key'
+      copiedLabel='API key copied'
+      variant='outline'
+      size='sm'
+    />
+  );
+}
diff --git a/packages/swingset/src/stories/fixtures/organization-profile.ts b/packages/swingset/src/stories/fixtures/organization-profile.ts
new file mode 100644
index 00000000000..af162a81f71
--- /dev/null
+++ b/packages/swingset/src/stories/fixtures/organization-profile.ts
@@ -0,0 +1,56 @@
+import { OrganizationProfileSaveError } from '@clerk/mosaic/features/organization-profile/organization-profile.types';
+import type { OrganizationProfileViewProps } from '@clerk/mosaic/features/organization-profile/organization-profile.view';
+import { useState } from 'react';
+
+import { usePreviewImage } from './use-preview-image';
+
+const INITIAL_NAME = 'Clerk';
+const INITIAL_SLUG = 'clerkWorkspace-177654156132154';
+const MEMBER_COUNT = 20;
+
+const settleAfter = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms));
+
+export interface OrganizationProfileFixtureOptions {
+  /** Rejects that field's save with this message, scoped to the field so it renders under it. */
+  failWith?: Partial<Record<'name' | 'slug', string>>;
+}
+
+export function useOrganizationProfileFixture({ failWith }: OrganizationProfileFixtureOptions = {}) {
+  const [activePage, setActivePage] = useState<OrganizationProfileViewProps['activePage']>('general');
+  const [name, setName] = useState(INITIAL_NAME);
+  const [slug, setSlug] = useState(INITIAL_SLUG);
+  const { imageUrl, showFile, clearImage } = usePreviewImage();
+
+  const save = async (field: 'name' | 'slug', apply: () => void) => {
+    await settleAfter(800);
+    const message = failWith?.[field];
+    if (message) {
+      throw new OrganizationProfileSaveError(message, field);
+    }
+    apply();
+  };
+
+  const general: OrganizationProfileViewProps['pages']['general'] = {
+    name,
+    slug,
+    memberCount: MEMBER_COUNT,
+    imageUrl,
+    hasImage: Boolean(imageUrl),
+    onLogoChange: showFile,
+    onRemoveLogo: clearImage,
+    onSubmitName: async next => save('name', () => setName(next)),
+    onSubmitSlug: async next => save('slug', () => setSlug(next)),
+    onLeave: () => settleAfter(1200),
+    onDelete: () => settleAfter(1200),
+  };
+
+  const pages: OrganizationProfileViewProps['pages'] = {
+    general,
+    members: {},
+    security: {},
+    billing: {},
+    apiKeys: {},
+  };
+
+  return { activePage, setActivePage, pages, general, name };
+}
diff --git a/packages/swingset/src/stories/organization-profile-danger-section.mdx b/packages/swingset/src/stories/organization-profile-danger-section.mdx
new file mode 100644
index 00000000000..3fc943b842c
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile-danger-section.mdx
@@ -0,0 +1,34 @@
+import * as Stories from './organization-profile-danger-section.stories';
+
+# OrganizationProfileDangerSection
+
+Leaving and deleting the workspace. Both ask for the workspace's name to be typed out, as the
+legacy organization profile does.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+    { name: 'Section', href: '/components/section', layer: 'Components' },
+  ]}
+/>
+
+## A failed action
+
+The dialog stays up and renders the reason under the confirmation field.
+
+<Story
+  name='WithError'
+  storyModule={Stories}
+/>
+
+## One action only
+
+A row appears only when its callback is given, so a member who cannot delete the workspace is left
+with leaving it.
+
+<Story
+  name='LeaveOnly'
+  storyModule={Stories}
+/>
diff --git a/packages/swingset/src/stories/organization-profile-danger-section.stories.tsx b/packages/swingset/src/stories/organization-profile-danger-section.stories.tsx
new file mode 100644
index 00000000000..6f8630a1e3e
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile-danger-section.stories.tsx
@@ -0,0 +1,66 @@
+import { OrganizationProfileDangerSectionView } from '@clerk/mosaic/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.view';
+import { useState } from 'react';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './organization-profile-danger-section.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Organization Profile',
+  status: 'wip',
+  substatus: 'needs wire-up',
+  title: 'OrganizationProfileDangerSection',
+  label: 'Danger zone',
+  navigation: { category: 'Sections' },
+  source:
+    'packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.view.tsx',
+};
+
+const settleAfter = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms));
+
+export function Default() {
+  const [runId, setRunId] = useState(0);
+
+  // Both actions are terminal in the real flow, so the story remounts the section to repeat.
+  const settle = async () => {
+    await settleAfter(1500);
+    setRunId(current => current + 1);
+  };
+
+  return (
+    <OrganizationProfileDangerSectionView
+      key={runId}
+      name='Clerk'
+      memberCount={20}
+      onLeave={settle}
+      onDelete={settle}
+    />
+  );
+}
+
+export function WithError() {
+  return (
+    <OrganizationProfileDangerSectionView
+      name='Clerk'
+      memberCount={20}
+      onLeave={async () => {
+        await settleAfter(1500);
+        throw new Error('You are the last admin. Promote another member before you leave.');
+      }}
+      onDelete={async () => {
+        await settleAfter(1500);
+        throw new Error('This workspace has an active subscription. Cancel it before you delete.');
+      }}
+    />
+  );
+}
+
+export function LeaveOnly() {
+  return (
+    <OrganizationProfileDangerSectionView
+      name='Clerk'
+      memberCount={1}
+      onLeave={() => settleAfter(1500)}
+    />
+  );
+}
diff --git a/packages/swingset/src/stories/organization-profile-general-panel.mdx b/packages/swingset/src/stories/organization-profile-general-panel.mdx
new file mode 100644
index 00000000000..4ac9768f947
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile-general-panel.mdx
@@ -0,0 +1,24 @@
+import * as Stories from './organization-profile-general-panel.stories';
+
+# OrganizationProfileGeneralPanel
+
+The workspace's General page: its details, and the danger zone under them.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    { name: 'Workspace details', href: '/organization-profile/organization-profile-workspace-section', layer: 'Organization Profile' },
+    { name: 'Danger zone', href: '/organization-profile/organization-profile-danger-section', layer: 'Organization Profile' },
+  ]}
+/>
+
+## Without permission to manage
+
+Each action appears only when the panel is handed its callback, so a member who cannot manage the
+workspace sees the details and nothing to act on.
+
+<Story
+  name='ReadOnly'
+  storyModule={Stories}
+/>
diff --git a/packages/swingset/src/stories/organization-profile-general-panel.stories.tsx b/packages/swingset/src/stories/organization-profile-general-panel.stories.tsx
new file mode 100644
index 00000000000..ae48d62a07b
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile-general-panel.stories.tsx
@@ -0,0 +1,35 @@
+import { OrganizationProfileGeneralPanelView } from '@clerk/mosaic/features/organization-profile/organization-profile-general-panel.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+import { useOrganizationProfileFixture } from './fixtures/organization-profile';
+
+export { default as __source } from './organization-profile-general-panel.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Organization Profile',
+  status: 'wip',
+  substatus: 'needs wire-up',
+  title: 'OrganizationProfileGeneralPanel',
+  label: 'General panel',
+  navigation: { category: 'Panels' },
+  source: 'packages/mosaic/src/features/organization-profile/organization-profile-general-panel.view.tsx',
+};
+
+export function Default() {
+  const { general } = useOrganizationProfileFixture();
+  return <OrganizationProfileGeneralPanelView {...general} />;
+}
+
+export function ReadOnly() {
+  const { general } = useOrganizationProfileFixture();
+  return (
+    <OrganizationProfileGeneralPanelView
+      name={general.name}
+      slug={general.slug}
+      memberCount={general.memberCount}
+      imageUrl={general.imageUrl}
+      hasImage={general.hasImage}
+    />
+  );
+}
diff --git a/packages/swingset/src/stories/organization-profile-workspace-section.mdx b/packages/swingset/src/stories/organization-profile-workspace-section.mdx
new file mode 100644
index 00000000000..9f441942104
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile-workspace-section.mdx
@@ -0,0 +1,24 @@
+import * as Stories from './organization-profile-workspace-section.stories';
+
+# OrganizationProfileWorkspaceSection
+
+The workspace's logo, name, and slug. The slug carries a `CopyButton` beside its value.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    { name: 'Section', href: '/components/section', layer: 'Components' },
+    { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+    { name: 'CopyButton', href: '/components/copy-button', layer: 'Components' },
+  ]}
+/>
+
+## A rejected save
+
+The dialog stays open and renders the reason in its banner.
+
+<Story
+  name='SaveFails'
+  storyModule={Stories}
+/>
diff --git a/packages/swingset/src/stories/organization-profile-workspace-section.stories.tsx b/packages/swingset/src/stories/organization-profile-workspace-section.stories.tsx
new file mode 100644
index 00000000000..574e5167cef
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile-workspace-section.stories.tsx
@@ -0,0 +1,50 @@
+import { OrganizationProfileWorkspaceSectionView } from '@clerk/mosaic/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+import { useOrganizationProfileFixture } from './fixtures/organization-profile';
+
+export { default as __source } from './organization-profile-workspace-section.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Organization Profile',
+  status: 'wip',
+  substatus: 'needs wire-up',
+  title: 'OrganizationProfileWorkspaceSection',
+  label: 'Workspace details',
+  navigation: { category: 'Sections' },
+  source:
+    'packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.view.tsx',
+};
+
+export function Default() {
+  const { general } = useOrganizationProfileFixture();
+  return (
+    <OrganizationProfileWorkspaceSectionView
+      name={general.name}
+      slug={general.slug}
+      imageUrl={general.imageUrl}
+      hasImage={general.hasImage}
+      onLogoChange={general.onLogoChange}
+      onRemoveLogo={general.onRemoveLogo}
+      onSubmitName={general.onSubmitName}
+      onSubmitSlug={general.onSubmitSlug}
+    />
+  );
+}
+
+export function SaveFails() {
+  const { general } = useOrganizationProfileFixture({ failWith: { slug: 'That slug is already taken.' } });
+  return (
+    <OrganizationProfileWorkspaceSectionView
+      name={general.name}
+      slug={general.slug}
+      imageUrl={general.imageUrl}
+      hasImage={general.hasImage}
+      onLogoChange={general.onLogoChange}
+      onRemoveLogo={general.onRemoveLogo}
+      onSubmitName={general.onSubmitName}
+      onSubmitSlug={general.onSubmitSlug}
+    />
+  );
+}
diff --git a/packages/swingset/src/stories/organization-profile.mdx b/packages/swingset/src/stories/organization-profile.mdx
new file mode 100644
index 00000000000..b30bff04dd4
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile.mdx
@@ -0,0 +1,25 @@
+import * as Stories from './organization-profile.stories';
+
+# OrganizationProfile
+
+The organization profile: a `Profile` whose navigation lists the General, Members, Security,
+Billing, and API Keys pages it was given content for, then any pages of the consumer's own, in the
+order asked for. Only General is built — the rest hold their place with a placeholder.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    { name: 'General panel', href: '/organization-profile/organization-profile-general-panel', layer: 'Organization Profile' },
+  ]}
+/>
+
+## As an overlay
+
+The same view inside a `profile` dialog, opened from a trigger on the page. The dialog positions
+and animates the popup; the profile paints it, names it, and carries the dismiss.
+
+<Story
+  name='Overlay'
+  storyModule={Stories}
+/>
diff --git a/packages/swingset/src/stories/organization-profile.stories.tsx b/packages/swingset/src/stories/organization-profile.stories.tsx
new file mode 100644
index 00000000000..70ce6a0f492
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile.stories.tsx
@@ -0,0 +1,47 @@
+import { Button } from '@clerk/mosaic/components/button';
+import { Dialog } from '@clerk/mosaic/components/dialog';
+import { OrganizationProfileView } from '@clerk/mosaic/features/organization-profile/organization-profile.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+import { useOrganizationProfileFixture } from './fixtures/organization-profile';
+
+export { default as __source } from './organization-profile.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Organization Profile',
+  status: 'wip',
+  substatus: 'needs wire-up',
+  title: 'OrganizationProfile',
+  label: 'Organization profile',
+  layout: 'wide',
+  source: 'packages/mosaic/src/features/organization-profile/organization-profile.view.tsx',
+};
+
+export function Default() {
+  const { activePage, setActivePage, pages } = useOrganizationProfileFixture();
+  return (
+    <OrganizationProfileView
+      activePage={activePage}
+      pages={pages}
+      onPageChange={setActivePage}
+      elevation='flush'
+    />
+  );
+}
+
+export function Overlay() {
+  const { activePage, setActivePage, pages } = useOrganizationProfileFixture();
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button />}>Manage workspace</Dialog.Trigger>
+      <Dialog.Popup variant='profile'>
+        <OrganizationProfileView
+          activePage={activePage}
+          pages={pages}
+          onPageChange={setActivePage}
+        />
+      </Dialog.Popup>
+    </Dialog.Root>
+  );
+}