diff --git a/.storybook/addons.js b/.storybook/addons.js
new file mode 100644
index 0000000..badd4c7
--- /dev/null
+++ b/.storybook/addons.js
@@ -0,0 +1 @@
+import '@storybook/addon-knobs/register'
diff --git a/.storybook/config.js b/.storybook/config.js
index c88c75d..f6e500c 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,5 +1,6 @@
 import { h } from 'preact';
 import { configure, addDecorator } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
 
 import { Layout } from '../src/components/Layout';
 
@@ -8,6 +9,7 @@ addDecorator(story => (
         { story() }
     </Layout>
 ));
+addDecorator(withKnobs);
 
 function loadStories() {
     require('./stories');
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 0000000..70cd8b5
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
diff --git a/.storybook/stories.js b/.storybook/stories.js
index e69de29..2ec8353 100644
--- a/.storybook/stories.js
+++ b/.storybook/stories.js
@@ -0,0 +1 @@
+require('../src/components/Header/Header.story');
diff --git a/package-lock.json b/package-lock.json
index e7269c1..33d92de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,26 @@
         "uuid": "3.1.0"
       }
     },
+    "@storybook/addon-knobs": {
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-3.2.8.tgz",
+      "integrity": "sha1-60ghQJ5i8viG166TM7zJXksHFOs=",
+      "dev": true,
+      "requires": {
+        "@storybook/addons": "3.2.6",
+        "babel-runtime": "6.26.0",
+        "deep-equal": "1.0.1",
+        "global": "4.3.2",
+        "insert-css": "1.1.0",
+        "lodash.debounce": "4.0.8",
+        "moment": "2.18.1",
+        "prop-types": "15.5.10",
+        "react-color": "2.13.8",
+        "react-datetime": "2.10.1",
+        "react-textarea-autosize": "4.3.2",
+        "util-deprecate": "1.0.2"
+      }
+    },
     "@storybook/addon-links": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-3.2.6.tgz",
@@ -198,6 +218,12 @@
         "redux": "3.7.2"
       }
     },
+    "@types/react": {
+      "version": "16.0.5",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.0.5.tgz",
+      "integrity": "sha512-Wo/JT6Cpl7XuLA1Ov2M2Rso4Tep7rX6h1csbqhNDaSxqeY8nxUbrDkT6vJrKVu+7tw7vmJP9libZSReV9GsG9A==",
+      "dev": true
+    },
     "accepts": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.4.tgz",
@@ -373,8 +399,7 @@
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
     "asn1": {
       "version": "0.2.3",
@@ -2344,6 +2369,17 @@
         "sha.js": "2.4.8"
       }
     },
+    "create-react-class": {
+      "version": "15.6.0",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.0.tgz",
+      "integrity": "sha1-q0SEl8JlZuHilBPogyB9V8/nvtQ=",
+      "dev": true,
+      "requires": {
+        "fbjs": "0.8.14",
+        "loose-envify": "1.3.1",
+        "object-assign": "4.1.1"
+      }
+    },
     "cross-spawn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -2803,7 +2839,6 @@
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
       "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-      "dev": true,
       "requires": {
         "iconv-lite": "0.4.18"
       }
@@ -3157,7 +3192,6 @@
       "version": "0.8.14",
       "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.14.tgz",
       "integrity": "sha1-0dviviVMNakeCfMfnNUKQLKg7Rw=",
-      "dev": true,
       "requires": {
         "core-js": "1.2.7",
         "isomorphic-fetch": "2.2.1",
@@ -3171,8 +3205,7 @@
         "core-js": {
           "version": "1.2.7",
           "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
-          "dev": true
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
         }
       }
     },
@@ -4649,8 +4682,7 @@
     "iconv-lite": {
       "version": "0.4.18",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.18.tgz",
-      "integrity": "sha512-sr1ZQph3UwHTR0XftSbK85OvBbxe/abLGzEnPENCQwmHf7sck8Oyu4ob3LgBxWWxRoM+QszeUyl7jbqapu2TqA==",
-      "dev": true
+      "integrity": "sha512-sr1ZQph3UwHTR0XftSbK85OvBbxe/abLGzEnPENCQwmHf7sck8Oyu4ob3LgBxWWxRoM+QszeUyl7jbqapu2TqA=="
     },
     "icss-replace-symbols": {
       "version": "1.1.0",
@@ -4800,6 +4832,12 @@
         }
       }
     },
+    "insert-css": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-1.1.0.tgz",
+      "integrity": "sha1-Sj96Png4dzgbuEcaZFLR0nMV254=",
+      "dev": true
+    },
     "interpret": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.0.3.tgz",
@@ -5015,8 +5053,7 @@
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
     "is-svg": {
       "version": "2.1.0",
@@ -5064,7 +5101,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
       "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
-      "dev": true,
       "requires": {
         "node-fetch": "1.7.2",
         "whatwg-fetch": "2.0.3"
@@ -5085,8 +5121,7 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-      "dev": true
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
     },
     "js-yaml": {
       "version": "3.7.0",
@@ -5364,7 +5399,6 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
       "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
-      "dev": true,
       "requires": {
         "js-tokens": "3.0.2"
       }
@@ -5420,6 +5454,12 @@
         }
       }
     },
+    "material-colors": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.5.tgz",
+      "integrity": "sha1-UpJZPmdUyxvMK5gDDk4Najr8nqE=",
+      "dev": true
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -5594,6 +5634,12 @@
       "integrity": "sha1-zz2C0YwMp/RY2PKiQIF7PcflSgE=",
       "dev": true
     },
+    "moment": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz",
+      "integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8=",
+      "dev": true
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -5632,7 +5678,6 @@
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.2.tgz",
       "integrity": "sha512-xZZUq2yDhKMIn/UgG5q//IZSNLJIwW2QxS14CNH5spuiXkITM2pUitjdq58yLSaU7m4M0wBNaM2Gh/ggY4YJig==",
-      "dev": true,
       "requires": {
         "encoding": "0.1.12",
         "is-stream": "1.1.0"
@@ -5746,8 +5791,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-keys": {
       "version": "1.0.11",
@@ -7237,7 +7281,6 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
       "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
       "requires": {
         "asap": "2.0.6"
       }
@@ -7257,7 +7300,6 @@
       "version": "15.5.10",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.10.tgz",
       "integrity": "sha1-J5ffwxJhguOpXj37suiT3ddFYVQ=",
-      "dev": true,
       "requires": {
         "fbjs": "0.8.14",
         "loose-envify": "1.3.1"
@@ -7418,6 +7460,40 @@
       "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
       "dev": true
     },
+    "react-color": {
+      "version": "2.13.8",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.13.8.tgz",
+      "integrity": "sha1-vMWPeaciub/DfEAuaM0Y8mlwruQ=",
+      "dev": true,
+      "requires": {
+        "lodash": "4.17.4",
+        "material-colors": "1.2.5",
+        "prop-types": "15.5.10",
+        "reactcss": "1.2.3",
+        "tinycolor2": "1.4.1"
+      }
+    },
+    "react-datetime": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/react-datetime/-/react-datetime-2.10.1.tgz",
+      "integrity": "sha512-Q/xI/Zys8JoRfJfYxANL2Kee4bJLpDXEGKeCCOPucidsXGegefY/NWa4mnKXiZH2fe+qargIe+/drHn7cCbLLQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "16.0.5",
+        "create-react-class": "15.6.0",
+        "object-assign": "3.0.0",
+        "prop-types": "15.5.10",
+        "react-onclickoutside": "5.11.1"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
+          "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=",
+          "dev": true
+        }
+      }
+    },
     "react-docgen": {
       "version": "2.17.0",
       "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-2.17.0.tgz",
@@ -7447,6 +7523,14 @@
       "integrity": "sha1-xQaSrF/xrbOdht/m2+NIXaz1hFU=",
       "dev": true
     },
+    "react-fontawesome": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.6.1.tgz",
+      "integrity": "sha1-7dzhfn3HMaoJ/UoYZoimF5OhbFw=",
+      "requires": {
+        "prop-types": "15.5.10"
+      }
+    },
     "react-html-attributes": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.1.tgz",
@@ -7519,6 +7603,15 @@
         "react-dom-factories": "1.0.1"
       }
     },
+    "react-onclickoutside": {
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-5.11.1.tgz",
+      "integrity": "sha1-ADFOUlZ89V+rqUyrus0RlhkHBiM=",
+      "dev": true,
+      "requires": {
+        "create-react-class": "15.6.0"
+      }
+    },
     "react-simple-di": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/react-simple-di/-/react-simple-di-1.2.0.tgz",
@@ -7558,6 +7651,15 @@
         "prop-types": "15.5.10"
       }
     },
+    "react-textarea-autosize": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-4.3.2.tgz",
+      "integrity": "sha1-lipSxoys6uQIwYrOzsKQSbgeQvo=",
+      "dev": true,
+      "requires": {
+        "prop-types": "15.5.10"
+      }
+    },
     "react-transition-group": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.0.tgz",
@@ -7585,6 +7687,15 @@
         "velocity-react": "1.3.3"
       }
     },
+    "reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "dev": true,
+      "requires": {
+        "lodash": "4.17.4"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -8011,8 +8122,7 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
-      "dev": true
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
     "setprototypeof": {
       "version": "1.0.3",
@@ -8446,6 +8556,12 @@
         "setimmediate": "1.0.5"
       }
     },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=",
+      "dev": true
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -8517,8 +8633,7 @@
     "ua-parser-js": {
       "version": "0.7.14",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.14.tgz",
-      "integrity": "sha1-EQ1T+kw/MmwSEpK76skE0uAzh8o=",
-      "dev": true
+      "integrity": "sha1-EQ1T+kw/MmwSEpK76skE0uAzh8o="
     },
     "uglify-js": {
       "version": "2.8.29",
@@ -8837,8 +8952,7 @@
     "whatwg-fetch": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz",
-      "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=",
-      "dev": true
+      "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ="
     },
     "whet.extend": {
       "version": "0.9.9",
diff --git a/package.json b/package.json
index 59498ad..d335c01 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,11 @@
   },
   "homepage": "https://github.com/21-23/cssqd-ui#readme",
   "dependencies": {
-    "preact": "^8.2.5"
+    "preact": "^8.2.5",
+    "react-fontawesome": "^1.6.1"
   },
   "devDependencies": {
+    "@storybook/addon-knobs": "^3.2.8",
     "@storybook/react": "^3.2.8",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
diff --git a/src/assets/images/header-bg.png b/src/assets/images/header-bg.png
new file mode 100644
index 0000000..98ae561
Binary files /dev/null and b/src/assets/images/header-bg.png differ
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
new file mode 100644
index 0000000..8d5a5ae
--- /dev/null
+++ b/src/components/Header/Header.js
@@ -0,0 +1,30 @@
+import { h } from 'preact';
+import Icon from 'react-fontawesome';
+
+const Header = ({ productName, username, backgroundImageUrl }) => (
+    <header style={{ backgroundImage: `url(${backgroundImageUrl})` }}>
+        <span>{ productName }</span>
+
+        <span>
+            <Icon name="user" className="user-icon" />
+            { username }
+        </span>
+        <style jsx>{`
+            header {
+                padding: 10px;
+                flex: 1;
+                display: flex;
+                justify-content: space-between;
+                background-size: auto 100%;
+                color: white;
+                box-sizing: border-box;
+            }
+
+            .user-icon {
+                margin-right: 5px;
+            }
+        `}</style>
+    </header>
+);
+
+export { Header };
diff --git a/src/components/Header/Header.story.js b/src/components/Header/Header.story.js
new file mode 100644
index 0000000..8c9cbb6
--- /dev/null
+++ b/src/components/Header/Header.story.js
@@ -0,0 +1,16 @@
+import { h } from 'preact';
+import { storiesOf } from '@storybook/react';
+import { text } from '@storybook/addon-knobs';
+
+import { Header } from './Header';
+
+const backgroundImageUrl = require('../../assets/images/header-bg.png');
+
+storiesOf('Header', module)
+    .add('default', () => (
+        <Header
+            productName={text('productName', 'CSS Quickdraw')}
+            username={text('username', 'username')}
+            backgroundImageUrl={backgroundImageUrl}
+        />
+    ));