diff --git a/packages/swingset/src/stories/flow.component.stories.tsx b/packages/swingset/src/stories/flow.component.stories.tsx
index 9c751a06852..d383f62d7dc 100644
--- a/packages/swingset/src/stories/flow.component.stories.tsx
+++ b/packages/swingset/src/stories/flow.component.stories.tsx
@@ -23,47 +23,48 @@ export function Default(): JSX.Element {
   };
 
   return (
-    <Flow.Root
-      render={<Card.Root />}
-      value={step}
-      direction={direction}
-      state={{ step }}
-    >
-      {state => (
-        <>
-          <Flow.Step ids={['details', 'details-pending']}>
-            <Card.Header>
-              <Card.Title>Account details</Card.Title>
-              <Card.Description>Current controller state: {state.step}</Card.Description>
-            </Card.Header>
-            <Card.Footer>
-              <Button
-                fullWidth
-                onClick={() => navigate('confirm', 1)}
-              >
-                Continue
-              </Button>
-            </Card.Footer>
-          </Flow.Step>
-          <Flow.Step ids={['confirm']}>
-            <Card.Header>
-              <Card.Title>Confirm changes</Card.Title>
-              <Card.Description>Review the final step before submitting.</Card.Description>
-            </Card.Header>
-            <Card.Footer>
-              <Button
-                fullWidth
-                variant='outline'
-                color='neutral'
-                onClick={() => navigate('details', -1)}
-              >
-                Back
-              </Button>
-              <Button fullWidth>Submit</Button>
-            </Card.Footer>
-          </Flow.Step>
-        </>
-      )}
-    </Flow.Root>
+    <Card.Root>
+      <Flow.Root
+        value={step}
+        direction={direction}
+        state={{ step }}
+      >
+        {state => (
+          <>
+            <Flow.Step ids={['details', 'details-pending']}>
+              <Card.Header>
+                <Card.Title>Account details</Card.Title>
+                <Card.Description>Current controller state: {state.step}</Card.Description>
+              </Card.Header>
+              <Card.Footer>
+                <Button
+                  fullWidth
+                  onClick={() => navigate('confirm', 1)}
+                >
+                  Continue
+                </Button>
+              </Card.Footer>
+            </Flow.Step>
+            <Flow.Step ids={['confirm']}>
+              <Card.Header>
+                <Card.Title>Confirm changes</Card.Title>
+                <Card.Description>Review the final step before submitting.</Card.Description>
+              </Card.Header>
+              <Card.Footer>
+                <Button
+                  fullWidth
+                  variant='outline'
+                  color='neutral'
+                  onClick={() => navigate('details', -1)}
+                >
+                  Back
+                </Button>
+                <Button fullWidth>Submit</Button>
+              </Card.Footer>
+            </Flow.Step>
+          </>
+        )}
+      </Flow.Root>
+    </Card.Root>
   );
 }
diff --git a/packages/swingset/src/stories/reverification.stories.tsx b/packages/swingset/src/stories/reverification.stories.tsx
index 77952417ce2..735806025dc 100644
--- a/packages/swingset/src/stories/reverification.stories.tsx
+++ b/packages/swingset/src/stories/reverification.stories.tsx
@@ -95,8 +95,7 @@ function WorkingExample({ onComplete }: { onComplete: () => void }): JSX.Element
       setFieldError('That password is incorrect. Try again.');
       return;
     }
-    setMethodId('otp');
-    navigate('otp', 1);
+    onComplete();
   };
 
   const submitOtp = async (code: string) => {
@@ -152,7 +151,7 @@ function WorkingExample({ onComplete }: { onComplete: () => void }): JSX.Element
     onValueChange('');
   };
 
-  const showMethods = () => navigate('method-picker', 1);
+  const showMethods = () => navigate('method-picker', -1);
   const viewState: ReverificationState = {
     status,
     password: {
@@ -223,7 +222,7 @@ function WorkingExample({ onComplete }: { onComplete: () => void }): JSX.Element
       pendingMethodId,
       onSelect: id => void selectMethod(id),
       onHelp: () => navigate('help', 1),
-      onBack: () => navigate(methodId, -1),
+      onBack: () => navigate(methodId, 1),
     },
     help: {
       messages: helpMessages,
diff --git a/packages/ui/src/mosaic/blocks/destructive/destructive.tsx b/packages/ui/src/mosaic/blocks/destructive/destructive.tsx
index b2902669272..8bc93a7cb51 100644
--- a/packages/ui/src/mosaic/blocks/destructive/destructive.tsx
+++ b/packages/ui/src/mosaic/blocks/destructive/destructive.tsx
@@ -116,7 +116,6 @@ export function Destructive({
               />
             }
           >
-            <Dialog.CloseButton />
             <Card.Header>
               <Dialog.Title render={<Heading />}>{title}</Dialog.Title>
               <Dialog.Description render={<Text />}>{description}</Dialog.Description>
diff --git a/packages/ui/src/mosaic/blocks/reverification/reverification-method-picker.tsx b/packages/ui/src/mosaic/blocks/reverification/reverification-method-picker.tsx
index 0567b7b7880..9d481bbe504 100644
--- a/packages/ui/src/mosaic/blocks/reverification/reverification-method-picker.tsx
+++ b/packages/ui/src/mosaic/blocks/reverification/reverification-method-picker.tsx
@@ -88,23 +88,25 @@ export function ReverificationMethodPicker({
             {messages.backButton}
           </Button>
         ) : null}
-      </Card.Content>
-      <Card.Footer>
         <Text
           size='xs'
           color='neutral'
+          style={{
+            textAlign: 'center',
+            marginBlockStart: space['1'],
+          }}
         >
-          {messages.helpText}
+          {messages.helpText}{' '}
+          <Button
+            type='button'
+            size='sm'
+            variant='link'
+            onClick={onHelp}
+          >
+            {messages.helpButton}
+          </Button>
         </Text>
-        <Button
-          type='button'
-          size='sm'
-          variant='link'
-          onClick={onHelp}
-        >
-          {messages.helpButton}
-        </Button>
-      </Card.Footer>
+      </Card.Content>
     </>
   );
 }
diff --git a/packages/ui/src/mosaic/blocks/reverification/reverification.test.tsx b/packages/ui/src/mosaic/blocks/reverification/reverification.test.tsx
index a74be6132d5..8afbefe8e2d 100644
--- a/packages/ui/src/mosaic/blocks/reverification/reverification.test.tsx
+++ b/packages/ui/src/mosaic/blocks/reverification/reverification.test.tsx
@@ -92,7 +92,7 @@ describe('Reverification', () => {
     const passwordStep = screen.getByLabelText('Password').closest('.cl-flow-step');
 
     expect(card).not.toBeNull();
-    expect(flow).toBe(card);
+    expect(card).toContainElement(flow);
     expect(flow).toHaveAttribute('data-value', 'password');
 
     const pendingPassword = state('password');
diff --git a/packages/ui/src/mosaic/blocks/reverification/reverification.tsx b/packages/ui/src/mosaic/blocks/reverification/reverification.tsx
index 6fb5f9800e4..6f4bfb35169 100644
--- a/packages/ui/src/mosaic/blocks/reverification/reverification.tsx
+++ b/packages/ui/src/mosaic/blocks/reverification/reverification.tsx
@@ -33,39 +33,40 @@ export interface ReverificationProps {
 
 export function Reverification({ state, direction }: ReverificationProps): JSX.Element {
   return (
-    <Flow.Root
-      render={<Card.Root />}
-      value={state.status}
-      direction={direction}
-      state={state}
-    >
-      {current => (
-        <>
-          <Flow.Step ids={['password']}>
-            <ReverificationPassword {...current.password} />
-          </Flow.Step>
+    <Card.Root>
+      <Flow.Root
+        value={state.status}
+        direction={direction}
+        state={state}
+      >
+        {current => (
+          <>
+            <Flow.Step ids={['password']}>
+              <ReverificationPassword {...current.password} />
+            </Flow.Step>
 
-          <Flow.Step ids={['passkey']}>
-            <ReverificationPasskey {...current.passkey} />
-          </Flow.Step>
+            <Flow.Step ids={['passkey']}>
+              <ReverificationPasskey {...current.passkey} />
+            </Flow.Step>
 
-          <Flow.Step ids={['otp']}>
-            <ReverificationOTP {...current.otp} />
-          </Flow.Step>
+            <Flow.Step ids={['otp']}>
+              <ReverificationOTP {...current.otp} />
+            </Flow.Step>
 
-          <Flow.Step ids={['backup-code']}>
-            <ReverificationBackupCode {...current.backupCode} />
-          </Flow.Step>
+            <Flow.Step ids={['backup-code']}>
+              <ReverificationBackupCode {...current.backupCode} />
+            </Flow.Step>
 
-          <Flow.Step ids={['method-picker']}>
-            <ReverificationMethodPicker {...current.methodPicker} />
-          </Flow.Step>
+            <Flow.Step ids={['method-picker']}>
+              <ReverificationMethodPicker {...current.methodPicker} />
+            </Flow.Step>
 
-          <Flow.Step ids={['help']}>
-            <ReverificationHelp {...current.help} />
-          </Flow.Step>
-        </>
-      )}
-    </Flow.Root>
+            <Flow.Step ids={['help']}>
+              <ReverificationHelp {...current.help} />
+            </Flow.Step>
+          </>
+        )}
+      </Flow.Root>
+    </Card.Root>
   );
 }
diff --git a/packages/ui/src/mosaic/components/flow/flow.styles.ts b/packages/ui/src/mosaic/components/flow/flow.styles.ts
index f64c9f7daf0..a7e202b8217 100644
--- a/packages/ui/src/mosaic/components/flow/flow.styles.ts
+++ b/packages/ui/src/mosaic/components/flow/flow.styles.ts
@@ -1,9 +1,54 @@
 import * as stylex from '@stylexjs/stylex';
 
+import { durationVars, easingVars } from '../../tokens.stylex';
+
 export const styles = stylex.create({
+  root: {
+    overflow: 'hidden',
+    position: 'relative',
+    transitionDuration: {
+      default: durationVars['--cl-duration-slow'],
+      ':where([data-initial])': durationVars['--cl-duration-instant'],
+    },
+    transitionProperty: {
+      default: 'height',
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
+    transitionTimingFunction: easingVars['--cl-ease-enter'],
+    height: 'var(--cl-flow-step-height)',
+  },
   step: {
     display: 'flex',
     flexDirection: 'column',
+    insetBlockStart: {
+      default: null,
+      ':where([data-closed])': 0,
+    },
+    insetInlineStart: {
+      default: null,
+      ':where([data-closed])': 0,
+    },
+    position: {
+      default: 'relative',
+      ':where([data-closed])': 'absolute',
+    },
+    transform: {
+      default: 'translateX(0)',
+      ':where([data-ending-style])': 'translateX(calc(var(--cl-flow-transition-direction, 1) * -100%))',
+      ':where([data-starting-style])': 'translateX(calc(var(--cl-flow-transition-direction, 1) * 100%))',
+      '@media (prefers-reduced-motion: reduce)': {
+        default: 'translateX(0)',
+        ':where([data-ending-style])': 'translateX(0)',
+        ':where([data-starting-style])': 'translateX(0)',
+      },
+    },
+    transitionDuration: durationVars['--cl-duration-slow'],
+    transitionProperty: {
+      default: 'transform',
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
+    transitionTimingFunction: easingVars['--cl-ease-enter'],
+    willChange: 'transform',
     minWidth: 0,
     width: '100%',
   },
diff --git a/packages/ui/src/mosaic/components/flow/flow.tsx b/packages/ui/src/mosaic/components/flow/flow.tsx
index d256a9dc5d7..78234056581 100644
--- a/packages/ui/src/mosaic/components/flow/flow.tsx
+++ b/packages/ui/src/mosaic/components/flow/flow.tsx
@@ -28,7 +28,7 @@ function FlowRoot<State>(
 ): JSX.Element {
   return (
     <HeadlessFlow.Root
-      {...mergeStyleProps(themeProps('flow-root', { value }), stylex.props(reset.base), className, style)}
+      {...mergeStyleProps(themeProps('flow-root', { value }), stylex.props(reset.base, styles.root), className, style)}
       {...rest}
       ref={ref}
       render={render}