diff --git a/stories/atoms/__snapshots__/Button.stories.js.snap b/stories/atoms/__snapshots__/Button.stories.tsx.snap
similarity index 100%
rename from stories/atoms/__snapshots__/Button.stories.js.snap
rename to stories/atoms/__snapshots__/Button.stories.tsx.snap
diff --git a/stories/molecules/__snapshots__/Header.stories.jsx.snap b/stories/molecules/__snapshots__/Header.stories.tsx.snap
similarity index 97%
rename from stories/molecules/__snapshots__/Header.stories.jsx.snap
rename to stories/molecules/__snapshots__/Header.stories.tsx.snap
index f5b93032..c59d3370 100644
--- a/stories/molecules/__snapshots__/Header.stories.jsx.snap
+++ b/stories/molecules/__snapshots__/Header.stories.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Molecules/Header LoggedIn smoke-test 2`] = `
 <header>
-  <div class="wrapper">
+  <div class="storybook-header">
     <div>
       <svg width="32"
            height="32"
@@ -50,7 +50,7 @@ exports[`Molecules/Header LoggedIn smoke-test 2`] = `
 
 exports[`Molecules/Header LoggedOut smoke-test 2`] = `
 <header>
-  <div class="wrapper">
+  <div class="storybook-header">
     <div>
       <svg width="32"
            height="32"
diff --git a/stories/molecules/header.css b/stories/molecules/header.css
index 830610e6..d9a70528 100644
--- a/stories/molecules/header.css
+++ b/stories/molecules/header.css
@@ -1,4 +1,4 @@
-.wrapper {
+.storybook-header {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
@@ -7,13 +7,13 @@
   justify-content: space-between;
 }
 
-svg {
+.storybook-header svg {
   display: inline-block;
   vertical-align: top;
 }
 
-h1 {
-  font-weight: 900;
+.storybook-header h1 {
+  font-weight: 700;
   font-size: 20px;
   line-height: 1;
   margin: 6px 0 6px 10px;
@@ -21,11 +21,11 @@ h1 {
   vertical-align: top;
 }
 
-button + button {
+.storybook-header button + button {
   margin-left: 10px;
 }
 
-.welcome {
+.storybook-header .welcome {
   color: #333;
   font-size: 14px;
   margin-right: 10px;
diff --git a/stories/pages/Page.stories.tsx b/stories/pages/Page.stories.tsx
index 544d1286..fe55d19a 100644
--- a/stories/pages/Page.stories.tsx
+++ b/stories/pages/Page.stories.tsx
@@ -4,6 +4,7 @@ import { within, userEvent } from '@storybook/testing-library';
 import { Page } from './Page';
 
 const meta = {
+  title: 'Pages/page',
   component: Page,
   parameters: {
     layout: 'fullscreen',
diff --git a/stories/pages/__snapshots__/Page.stories.jsx.snap b/stories/pages/__snapshots__/Page.stories.tsx.snap
similarity index 96%
rename from stories/pages/__snapshots__/Page.stories.jsx.snap
rename to stories/pages/__snapshots__/Page.stories.tsx.snap
index 00fd1838..cfa592a6 100644
--- a/stories/pages/__snapshots__/Page.stories.jsx.snap
+++ b/stories/pages/__snapshots__/Page.stories.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Pages/Page LoggedIn play-test 2`] = `
+exports[`Pages/page LoggedIn play-test 2`] = `
 <article>
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32"
              height="32"
@@ -47,7 +47,7 @@ exports[`Pages/Page LoggedIn play-test 2`] = `
       </div>
     </div>
   </header>
-  <section>
+  <section class="storybook-page">
     <h2>
       Pages in Storybook
     </h2>
@@ -117,10 +117,10 @@ exports[`Pages/Page LoggedIn play-test 2`] = `
 </article>
 `;
 
-exports[`Pages/Page LoggedOut smoke-test 2`] = `
+exports[`Pages/page LoggedOut smoke-test 2`] = `
 <article>
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32"
              height="32"
@@ -162,7 +162,7 @@ exports[`Pages/Page LoggedOut smoke-test 2`] = `
       </div>
     </div>
   </header>
-  <section>
+  <section class="storybook-page">
     <h2>
       Pages in Storybook
     </h2>
diff --git a/stories/pages/page.css b/stories/pages/page.css
index fbc32aea..098dad11 100644
--- a/stories/pages/page.css
+++ b/stories/pages/page.css
@@ -1,4 +1,4 @@
-section {
+.storybook-page {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
@@ -8,8 +8,8 @@ section {
   color: #333;
 }
 
-section h2 {
-  font-weight: 900;
+.storybook-page h2 {
+  font-weight: 700;
   font-size: 32px;
   line-height: 1;
   margin: 0 0 4px;
@@ -17,25 +17,25 @@ section h2 {
   vertical-align: top;
 }
 
-section p {
+.storybook-page p {
   margin: 1em 0;
 }
 
-section a {
+.storybook-page a {
   text-decoration: none;
   color: #1ea7fd;
 }
 
-section ul {
+.storybook-page ul {
   padding-left: 30px;
   margin: 1em 0;
 }
 
-section li {
+.storybook-page li {
   margin-bottom: 8px;
 }
 
-section .tip {
+.storybook-page .tip {
   display: inline-block;
   border-radius: 1em;
   font-size: 11px;
@@ -48,14 +48,14 @@ section .tip {
   vertical-align: top;
 }
 
-section .tip-wrapper {
+.storybook-page .tip-wrapper {
   font-size: 13px;
   line-height: 20px;
   margin-top: 40px;
   margin-bottom: 40px;
 }
 
-section .tip-wrapper svg {
+.storybook-page .tip-wrapper svg {
   display: inline-block;
   height: 12px;
   width: 12px;
@@ -64,6 +64,6 @@ section .tip-wrapper svg {
   margin-top: 3px;
 }
 
-section .tip-wrapper svg path {
+.storybook-page .tip-wrapper svg path {
   fill: #1ea7fd;
 }