diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 331938e1ea..c876c5abf9 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,4 +1,5 @@
 import '../app/styles/tailwind.css';
+import '../stories/theme.css';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
diff --git a/stories/Header.tsx b/stories/Header.tsx
index 99fd34d618..a9007d99fc 100644
--- a/stories/Header.tsx
+++ b/stories/Header.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Button } from './Button';
+import Button from '../app/soapbox/components/ui/button/button';
+
 import './header.css';
 
 type User = {
@@ -42,12 +43,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
             <span className='welcome'>
               Welcome, <b>{user.name}</b>!
             </span>
-            <Button size='small' onClick={onLogout} label='Log out' />
+            <Button size='sm' onClick={onLogout} text='Log out' />
           </>
         ) : (
           <>
-            <Button size='small' onClick={onLogin} label='Log in' />
-            <Button primary size='small' onClick={onCreateAccount} label='Sign up' />
+            <Button size='sm' onClick={onLogin} text='Log in' />
+            <Button theme='primary' size='sm' onClick={onCreateAccount} text='Sign up' />
           </>
         )}
       </div>
diff --git a/stories/theme.css b/stories/theme.css
new file mode 100644
index 0000000000..cf6b093c44
Binary files /dev/null and b/stories/theme.css differ