diff --git a/__snapshots__/pages-page--logged-in-snap.png b/__snapshots__/pages-page--logged-in-snap.png
index 55c368e8..ac28c9d9 100644
Binary files a/__snapshots__/pages-page--logged-in-snap.png and b/__snapshots__/pages-page--logged-in-snap.png differ
diff --git a/__snapshots__/pages-page--logged-out-snap.png b/__snapshots__/pages-page--logged-out-snap.png
index 7e434076..699c4295 100644
Binary files a/__snapshots__/pages-page--logged-out-snap.png and b/__snapshots__/pages-page--logged-out-snap.png differ
diff --git a/stories/atoms/Button.js b/stories/atoms/Button.jsx
similarity index 100%
rename from stories/atoms/Button.js
rename to stories/atoms/Button.jsx
diff --git a/stories/molecules/Header.js b/stories/molecules/Header.jsx
similarity index 87%
rename from stories/molecules/Header.js
rename to stories/molecules/Header.jsx
index 5958f103..8577f117 100644
--- a/stories/molecules/Header.js
+++ b/stories/molecules/Header.jsx
@@ -28,7 +28,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
       </div>
       <div>
         {user ? (
-          <Button size="small" onClick={onLogout} label="Log out" />
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button size="small" onClick={onLogout} label="Log out" />
+          </>
         ) : (
           <>
             <Button size="small" onClick={onLogin} label="Log in" />
diff --git a/stories/molecules/Header.stories.js b/stories/molecules/Header.stories.jsx
similarity index 77%
rename from stories/molecules/Header.stories.js
rename to stories/molecules/Header.stories.jsx
index e11fe56f..49ca70cd 100644
--- a/stories/molecules/Header.stories.js
+++ b/stories/molecules/Header.stories.jsx
@@ -4,14 +4,18 @@ import { Header } from './Header';
 
 export default {
   component: Header,
-  play: async () => {},
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 const Template = (args) => <Header {...args} />;
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});
diff --git a/stories/molecules/__snapshots__/Header.stories.js.snap b/stories/molecules/__snapshots__/Header.stories.jsx.snap
similarity index 95%
rename from stories/molecules/__snapshots__/Header.stories.js.snap
rename to stories/molecules/__snapshots__/Header.stories.jsx.snap
index 2953a50a..f5b93032 100644
--- a/stories/molecules/__snapshots__/Header.stories.js.snap
+++ b/stories/molecules/__snapshots__/Header.stories.jsx.snap
@@ -31,6 +31,13 @@ exports[`Molecules/Header LoggedIn smoke-test 2`] = `
       </h1>
     </div>
     <div>
+      <span class="welcome">
+        Welcome,
+        <b>
+          Jane Doe
+        </b>
+        !
+      </span>
       <button type="button"
               class="storybook-button storybook-button--small storybook-button--secondary"
       >
diff --git a/stories/molecules/header.css b/stories/molecules/header.css
index acadc9ec..830610e6 100644
--- a/stories/molecules/header.css
+++ b/stories/molecules/header.css
@@ -24,3 +24,9 @@ h1 {
 button + button {
   margin-left: 10px;
 }
+
+.welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}
diff --git a/stories/pages/Page.js b/stories/pages/Page.js
deleted file mode 100644
index 92ad072e..00000000
--- a/stories/pages/Page.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Header } from '../molecules/Header';
-import './page.css';
-
-export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (
-  <article>
-    <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
-
-    <section>
-      <h2>Pages in Storybook</h2>
-      <p>
-        We recommend building UIs with a{' '}
-        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-          <strong>component-driven</strong>
-        </a>{' '}
-        process starting with atomic components and ending with pages.
-      </p>
-      <p>
-        Render pages with mock data. This makes it easy to build and review page states without
-        needing to navigate to them in your app. Here are some handy patterns for managing page data
-        in Storybook:
-      </p>
-      <ul>
-        <li>
-          Use a higher-level connected component. Storybook helps you compose such data from the
-          "args" of child component stories
-        </li>
-        <li>
-          Assemble data in the page component from your services. You can mock these services out
-          using Storybook.
-        </li>
-      </ul>
-      <p>
-        Get a guided tutorial on component-driven development at{' '}
-        <a href="https://www.learnstorybook.com" target="_blank" rel="noopener noreferrer">
-          Learn Storybook
-        </a>
-        . Read more in the{' '}
-        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
-          docs
-        </a>
-        .
-      </p>
-      <div className="tip-wrapper">
-        <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a"
-              fill="#999"
-            />
-          </g>
-        </svg>
-        Viewports addon in the toolbar
-      </div>
-    </section>
-  </article>
-);
-Page.propTypes = {
-  user: PropTypes.shape({}),
-  onLogin: PropTypes.func.isRequired,
-  onLogout: PropTypes.func.isRequired,
-  onCreateAccount: PropTypes.func.isRequired,
-};
-
-Page.defaultProps = {
-  user: null,
-};
diff --git a/stories/pages/Page.jsx b/stories/pages/Page.jsx
new file mode 100644
index 00000000..fafdc003
--- /dev/null
+++ b/stories/pages/Page.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { Header } from '../molecules/Header';
+import './page.css';
+
+export const Page = () => {
+  const [user, setUser] = React.useState();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section>
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong>
+          </a>{' '}
+          process starting with atomic components and ending with pages.
+        </p>
+        <p>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+            Storybook tutorials
+          </a>
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};
diff --git a/stories/pages/Page.stories.js b/stories/pages/Page.stories.js
deleted file mode 100644
index ac13192e..00000000
--- a/stories/pages/Page.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { Page } from './Page';
-import * as HeaderStories from '../molecules/Header.stories';
-
-export default {
-  title: 'Pages/Page',
-  component: Page,
-  play: async () => {},
-};
-
-const Template = (args) => <Page {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  ...HeaderStories.LoggedIn.args,
-};
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
-};
diff --git a/stories/pages/Page.stories.jsx b/stories/pages/Page.stories.jsx
new file mode 100644
index 00000000..c3563cc6
--- /dev/null
+++ b/stories/pages/Page.stories.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { within, userEvent } from '@storybook/testing-library';
+
+import { Page } from './Page';
+
+export default {
+  title: 'Pages/Page',
+  component: Page,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const Template = (args) => <Page {...args} />;
+
+export const LoggedOut = Template.bind({});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  await userEvent.click(loginButton);
+};
diff --git a/stories/pages/__snapshots__/Page.stories.js.snap b/stories/pages/__snapshots__/Page.stories.jsx.snap
similarity index 94%
rename from stories/pages/__snapshots__/Page.stories.js.snap
rename to stories/pages/__snapshots__/Page.stories.jsx.snap
index 88e8e0b0..00fd1838 100644
--- a/stories/pages/__snapshots__/Page.stories.js.snap
+++ b/stories/pages/__snapshots__/Page.stories.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Pages/Page LoggedIn smoke-test 2`] = `
+exports[`Pages/Page LoggedIn play-test 2`] = `
 <article>
   <header>
     <div class="wrapper">
@@ -32,6 +32,13 @@ exports[`Pages/Page LoggedIn smoke-test 2`] = `
         </h1>
       </div>
       <div>
+        <span class="welcome">
+          Welcome,
+          <b>
+            Jane Doe
+          </b>
+          !
+        </span>
         <button type="button"
                 class="storybook-button storybook-button--small storybook-button--secondary"
         >
@@ -69,11 +76,11 @@ exports[`Pages/Page LoggedIn smoke-test 2`] = `
     </ul>
     <p>
       Get a guided tutorial on component-driven development at
-      <a href="https://www.learnstorybook.com"
+      <a href="https://storybook.js.org/tutorials/"
          target="_blank"
          rel="noopener noreferrer"
       >
-        Learn Storybook
+        Storybook tutorials
       </a>
       . Read more in the
       <a href="https://storybook.js.org/docs"
@@ -184,11 +191,11 @@ exports[`Pages/Page LoggedOut smoke-test 2`] = `
     </ul>
     <p>
       Get a guided tutorial on component-driven development at
-      <a href="https://www.learnstorybook.com"
+      <a href="https://storybook.js.org/tutorials/"
          target="_blank"
          rel="noopener noreferrer"
       >
-        Learn Storybook
+        Storybook tutorials
       </a>
       . Read more in the
       <a href="https://storybook.js.org/docs"
diff --git a/stories/pages/page.css b/stories/pages/page.css
index 51c9d099..fbc32aea 100644
--- a/stories/pages/page.css
+++ b/stories/pages/page.css
@@ -8,7 +8,7 @@ section {
   color: #333;
 }
 
-h2 {
+section h2 {
   font-weight: 900;
   font-size: 32px;
   line-height: 1;
@@ -17,25 +17,25 @@ h2 {
   vertical-align: top;
 }
 
-p {
+section p {
   margin: 1em 0;
 }
 
-a {
+section a {
   text-decoration: none;
   color: #1ea7fd;
 }
 
-ul {
+section ul {
   padding-left: 30px;
   margin: 1em 0;
 }
 
-li {
+section li {
   margin-bottom: 8px;
 }
 
-.tip {
+section .tip {
   display: inline-block;
   border-radius: 1em;
   font-size: 11px;
@@ -48,14 +48,14 @@ li {
   vertical-align: top;
 }
 
-.tip-wrapper {
+section .tip-wrapper {
   font-size: 13px;
   line-height: 20px;
   margin-top: 40px;
   margin-bottom: 40px;
 }
 
-.tip-wrapper svg {
+section .tip-wrapper svg {
   display: inline-block;
   height: 12px;
   width: 12px;
@@ -64,6 +64,6 @@ li {
   margin-top: 3px;
 }
 
-.tip-wrapper svg path {
+section .tip-wrapper svg path {
   fill: #1ea7fd;
 }