diff --git a/components/app/index.jsx b/components/app/index.jsx
index 35a1a73d..8790234d 100644
--- a/components/app/index.jsx
+++ b/components/app/index.jsx
@@ -8,7 +8,7 @@ const App = (props) => {
   }
 
   return (
-    <div className={className}>
+    <div className={className} data-react-toolbox='app'>
       {props.children}
     </div>
   );
diff --git a/components/app_bar/index.jsx b/components/app_bar/index.jsx
index ae65577d..f53601fe 100644
--- a/components/app_bar/index.jsx
+++ b/components/app_bar/index.jsx
@@ -8,7 +8,7 @@ const AppBar = (props) => {
   if (props.flat) className += ` ${style.flat}`;
 
   return (
-    <header className={className}>
+    <header className={className} data-react-toolbox='app-bar'>
       {props.children}
     </header>
   );
diff --git a/spec/root.jsx b/spec/root.jsx
index f6e69aa2..388a668b 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import App from '../components/app';
+import AppBar from '../components/app_bar';
 import Autocomplete from './components/autocomplete';
 import Button from './components/button';
 import Card from './components/card';
@@ -22,8 +23,10 @@ import style from './style';
 
 const Root = () => (
   <App className={style.app}>
-    <h1>React Toolbox</h1>
-    <h3>Component Spec v0.10.20</h3>
+    <AppBar fixed flat className={style['app-bar']}>
+      <h1>React Toolbox</h1>
+      <span>Component Spec v0.10.20</span>
+    </AppBar>
 
     <Autocomplete />
     <Button />
diff --git a/spec/style.scss b/spec/style.scss
index 5058eda3..79ad9321 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -1,5 +1,5 @@
 .app {
-  padding: 1.6rem;
+  padding: 5.5rem 1.6rem;
   > h1, > h3 {
     line-height: 100%;
   }
@@ -14,3 +14,11 @@
     margin: 1.6rem 1.6rem 0 0;
   }
 }
+
+.app-bar {
+  padding: 1.6rem;
+  justify-content: center;
+  > span {
+    margin-left: 1rem;
+  }
+}