diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
index 7ce25c6c4d..de71a7dca6 100644
--- a/fixtures/dom/src/components/Header.js
+++ b/fixtures/dom/src/components/Header.js
@@ -35,11 +35,11 @@ class Header extends React.Component {
           <span className="header__logo">
             <img
               src={process.env.PUBLIC_URL + '/react-logo.svg'}
-              alt=""
-              width="32"
-              height="32"
+              alt="React"
+              width="20"
+              height="20"
             />
-            React Sandbox (v{React.version})
+            <a href="/">DOM Test Fixtures (v{React.version})</a>
           </span>
 
           <div className="header-controls">
diff --git a/fixtures/dom/src/components/fixtures/home.js b/fixtures/dom/src/components/fixtures/home.js
new file mode 100644
index 0000000000..65450f6830
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/home.js
@@ -0,0 +1,117 @@
+const React = window.React;
+
+export default function Home() {
+  return (
+    <main>
+      <h1>DOM Test Fixtures</h1>
+      <p>
+        Use this site to test browser quirks and other behavior that can not be
+        captured through unit tests.
+      </p>
+      <section>
+        <h2>Tested Browsers</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>Browser</th>
+              <th>Versions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Chrome - Desktop</td>
+              <td>
+                49<sup>*</sup>, Latest
+              </td>
+            </tr>
+            <tr>
+              <td>Chrome - Android</td>
+              <td>Latest</td>
+            </tr>
+            <tr>
+              <td>Firefox Desktop</td>
+              <td>
+                <a href="https://www.mozilla.org/en-US/firefox/organizations/">
+                  ESR<sup>†</sup>
+                </a>, Latest
+              </td>
+            </tr>
+            <tr>
+              <td>Internet Explorer</td>
+              <td>9, 10, 11</td>
+            </tr>
+            <tr>
+              <td>Microsoft Edge</td>
+              <td>14, Latest</td>
+            </tr>
+            <tr>
+              <td>Safari - Desktop</td>
+              <td>7, Latest</td>
+            </tr>
+            <tr>
+              <td>Safari - iOS</td>
+              <td>7, Latest</td>
+            </tr>
+          </tbody>
+        </table>
+        <footer>
+          <small>* Chrome 49 is the last release for Windows XP.</small>
+          <br />
+          <small>
+            † Firefox Extended Support Release (ESR) is used by many
+            institutions.
+          </small>
+        </footer>
+      </section>
+      <section>
+        <h2>How do I test browsers I don't have access to?</h2>
+        <p>
+          Getting test coverage across all of these browsers can be difficult,
+          particularly for older versions of evergreen browsers. Fortunately
+          there are a handful of tools that make browser testing easy.
+        </p>
+        <section>
+          <h3>Paid services</h3>
+          <ul>
+            <li>
+              <a href="https://browserstack.com">BrowserStack</a>
+            </li>
+            <li>
+              <a href="https://saucelabs.com">Sauce Labs</a>
+            </li>
+            <li>
+              <a href="https://crossbrowsertesting.com/">CrossBrowserTesting</a>
+            </li>
+          </ul>
+          <p>
+            These services provide access to all browsers we test, however they
+            cost money. There is no obligation to pay for them. Maintainers have
+            access to a BrowserStack subscription; feel free to contact a
+            maintainer or mention browsers where extra testing is required.
+          </p>
+        </section>
+        <section>
+          <h3>Browser downloads</h3>
+          <p>A handful of browsers are available for download directly:</p>
+          <ul>
+            <li>
+              <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">
+                Internet Explorer (9-11) and MS Edge virtual machines
+              </a>
+            </li>
+            <li>
+              <a href="https://www.chromium.org/getting-involved/download-chromium#TOC-Downloading-old-builds-of-Chrome-Chromium">
+                Chromium snapshots (for older versions of Chrome)
+              </a>
+            </li>
+            <li>
+              <a href="https://www.mozilla.org/en-US/firefox/organizations/">
+                Firefox Extended Support Release (ESR)
+              </a>
+            </li>
+          </ul>
+        </section>
+      </section>
+    </main>
+  );
+}
diff --git a/fixtures/dom/src/components/fixtures/index.js b/fixtures/dom/src/components/fixtures/index.js
index 3107f535f9..69b220034f 100644
--- a/fixtures/dom/src/components/fixtures/index.js
+++ b/fixtures/dom/src/components/fixtures/index.js
@@ -1,63 +1,62 @@
-import RangeInputFixtures from './range-inputs';
-import TextInputFixtures from './text-inputs';
-import SelectFixtures from './selects';
-import TextAreaFixtures from './textareas';
-import InputChangeEvents from './input-change-events';
-import NumberInputFixtures from './number-inputs';
-import PasswordInputFixtures from './password-inputs';
-import ButtonFixtures from './buttons';
-import DateInputFixtures from './date-inputs';
-import ErrorHandling from './error-handling';
-import EventPooling from './event-pooling';
-import CustomElementFixtures from './custom-elements';
-import MediaEventsFixtures from './media-events';
-import PointerEventsFixtures from './pointer-events';
-import MouseEventsFixtures from './mouse-events';
-import SelectionEventsFixtures from './selection-events';
-
 const React = window.React;
+const fixturePath = window.location.pathname;
 
 /**
  * A simple routing component that renders the appropriate
  * fixture based on the location pathname.
  */
-function FixturesPage() {
-  switch (window.location.pathname) {
-    case '/text-inputs':
-      return <TextInputFixtures />;
-    case '/range-inputs':
-      return <RangeInputFixtures />;
-    case '/selects':
-      return <SelectFixtures />;
-    case '/textareas':
-      return <TextAreaFixtures />;
-    case '/input-change-events':
-      return <InputChangeEvents />;
-    case '/number-inputs':
-      return <NumberInputFixtures />;
-    case '/password-inputs':
-      return <PasswordInputFixtures />;
-    case '/buttons':
-      return <ButtonFixtures />;
-    case '/date-inputs':
-      return <DateInputFixtures />;
-    case '/error-handling':
-      return <ErrorHandling />;
-    case '/event-pooling':
-      return <EventPooling />;
-    case '/custom-elements':
-      return <CustomElementFixtures />;
-    case '/media-events':
-      return <MediaEventsFixtures />;
-    case '/pointer-events':
-      return <PointerEventsFixtures />;
-    case '/mouse-events':
-      return <MouseEventsFixtures />;
-    case '/selection-events':
-      return <SelectionEventsFixtures />;
-    default:
-      return <p>Please select a test fixture.</p>;
+class FixturesPage extends React.Component {
+  static defaultProps = {
+    fixturePath: fixturePath === '/' ? '/home' : fixturePath,
+  };
+
+  state = {
+    isLoading: true,
+    error: null,
+    Fixture: null,
+  };
+
+  componentDidMount() {
+    this.loadFixture();
+  }
+
+  async loadFixture() {
+    const {fixturePath} = this.props;
+
+    try {
+      const module = await import(`.${fixturePath}`);
+
+      this.setState({Fixture: module.default});
+    } catch (error) {
+      console.error(error);
+      this.setState({error});
+    } finally {
+      this.setState({isLoading: false});
+    }
+  }
+
+  render() {
+    const {Fixture, error, isLoading} = this.state;
+
+    if (isLoading) {
+      return null;
+    }
+
+    if (error) {
+      return <FixtureError error={error} />;
+    }
+
+    return <Fixture />;
   }
 }
 
+function FixtureError({error}) {
+  return (
+    <section>
+      <h2>Error loading fixture</h2>
+      <p>{error.message}</p>
+    </section>
+  );
+}
+
 export default FixturesPage;
diff --git a/fixtures/dom/src/style.css b/fixtures/dom/src/style.css
index a8e1391e1d..675f358081 100644
--- a/fixtures/dom/src/style.css
+++ b/fixtures/dom/src/style.css
@@ -4,14 +4,13 @@
   box-sizing: border-box;
 }
 
-html {
-  font-size: 10px;
-}
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Arimo", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
-  font-size: 1.4rem;
+  font-size: 15px;
+  line-height: 24px;
   margin: 0;
   padding: 0;
 }
@@ -26,17 +25,78 @@ button {
   padding: 6px 8px;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #171717;
+  font-weight: 600;
+}
+
+h1 {
+  font-size: 32px;
+  margin: 24px 0;
+}
+
+h2 {
+  font-size: 24px;
+  margin: 24px 0 16px;
+}
+
+h3 {
+  font-size: 18px;
+  margin: 8px 0 16px;
+}
+
+h4, h4, h5, h6 {
+  font-size: 16px;
+  margin: 0 0 16px;
+}
+
+code {
+  font-size: 90%;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:link:hover,
+a:link:focus {
+  text-decoration: underline;
+}
+
+textarea {
+  border-radius: 2px;
+  border: 1px solid #d9d9d9;
+  font-size: 12px;
+  min-height: 100px;
+  min-width: 300px;
+  padding: 8px;
+}
+
 .header {
-  background: #222;
+  background: #171717;
   box-shadow: inset 0 -1px 3px #000;
-  font-size: 1.6rem;
-  line-height: 3.2rem;
   overflow: hidden;
-  padding: .8rem 1.6rem;
+  padding: 8px;
+}
+
+.header a {
+  text-decoration: none;
+  color: white;
+}
+
+.header a:hover,
+.header a:focus{
+  text-decoration: underline;
 }
 
 .header select {
-  width: 12rem;
+  margin-left: 8px;
+  max-width: 150px;
 }
 
 .header__inner {
@@ -108,11 +168,11 @@ fieldset {
 
 ul,
 ol {
-  margin: 0 0 2rem 0;
+  margin: 0 0 16px 0;
 }
 
-li {
-  margin-bottom: 0.4rem;
+p {
+  margin: 16px 0;
 }
 
 .type-subheading {
@@ -130,11 +190,10 @@ li {
 .footnote {
   border-left: 4px solid #aaa;
   color: #444;
+  font-size: 14px;
   font-style: italic;
-  line-height: 1.5;
-  margin-bottom: 2.4rem;
-  margin-left: 0.4rem;
-  padding-left: 1.6rem;
+  margin-left: 8px;
+  padding-left: 16px;
 }
 
 .test-case {
@@ -222,3 +281,24 @@ li {
 .field-group {
   overflow: hidden;
 }
+
+table {
+  border: 1px solid #d9d9d9;
+  border-width: 1px 1px 1px 0;
+  border-collapse: collapse;
+  margin: 16px 0;
+  font-size: 14px;
+  line-height: 20px;
+  width: 100%;
+}
+
+td,
+th {
+  text-align: left;
+  border: 1px solid #d9d9d9;
+  padding: 6px;
+}
+
+tbody tr:nth-child(even) {
+  background: #f0f0f0;
+}