diff --git a/app/Wrapper.js b/app/Wrapper.js
new file mode 100644
index 0000000..d8e51c9
--- /dev/null
+++ b/app/Wrapper.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import Navbar from './components/Navbar/Navbar';
+
+//styling
+import './scss/index.scss';
+
+export default class Wrapper extends React.Component {
+
+    render() {
+        return (
+            <div>
+                <Navbar/>
+                <div className="content">
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+Wrapper.propTypes = {
+    children: React.PropTypes.node,
+};
diff --git a/app/app.js b/app/app.js
index bb9857c..8eed983 100644
--- a/app/app.js
+++ b/app/app.js
@@ -2,39 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 
+import Wrapper from './Wrapper';
+import NotFound from './pages/NotFound/NotFound';
+
 //pages
-import Home from './pages/Home';
-import New from './pages/New';
-import Default from './pages/Default';
-
-//components
-import Navbar from './components/Navbar';
-
-//styling
-import './scss/index.scss';
-
-class Wrapper extends React.Component {
-
-    render() {
-        return (
-            <div>
-                <Navbar/>
-                {this.props.children}
-            </div>
-        );
-    }
-}
-
-Wrapper.propTypes = {
-    children: React.PropTypes.node,
-};
+import Home from './pages/Home/Home';
 
 ReactDOM.render(
     <Router history={browserHistory}>
         <Route path="/" component={Wrapper}>
             <IndexRoute component={Home}/>
-            <Route path="/new" component={New}/>
-            <Route path="*" component={Default}/>
+            <Route path="*" component={NotFound}/>
         </Route>
     </Router>
 , document.getElementById('app'));
diff --git a/app/components/Footer.js b/app/components/Footer.js
deleted file mode 100644
index e69de29..0000000
diff --git a/app/components/Navbar.js b/app/components/Navbar/Navbar.js
similarity index 68%
rename from app/components/Navbar.js
rename to app/components/Navbar/Navbar.js
index d1e868a..f5c856b 100644
--- a/app/components/Navbar.js
+++ b/app/components/Navbar/Navbar.js
@@ -1,13 +1,16 @@
 import React from 'react';
 import { Link } from 'react-router';
 
+import './Navbar.scss';
+
 export default class Navbar extends React.Component {
 
     render() {
         return (
             <div className="Navbar">
-                <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="active">Home</Link>
-                <Link to="/new" className="Navbar__item" activeClassName="active">New</Link>
+                <div className="Navbar__header">Title</div>
+                <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
+                <Link to="/new" className="Navbar__item" activeClassName="Navbar__item--active">New</Link>
             </div>
         );
     }
diff --git a/app/components/Navbar/Navbar.scss b/app/components/Navbar/Navbar.scss
new file mode 100644
index 0000000..e414f58
--- /dev/null
+++ b/app/components/Navbar/Navbar.scss
@@ -0,0 +1,47 @@
+@import '../../scss/variables';
+
+.Navbar {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: $navbarWidth;
+    background-color: $gray2;
+    border-right: 1px solid darken($gray2, 2%);
+    overflow-y: auto;
+}
+
+.Navbar__header {
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $gray2;
+}
+
+.Navbar__item {
+    min-height: 50px;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: $white;
+    transition: background-color 0.1s linear;
+    
+    &:hover {
+        background-color: $gray1; 
+    }
+    
+    & + .Navbar__item {
+        border-top: 1px solid $gray1;
+    }
+    
+}
+
+.Navbar__item--active {
+    padding-left: 4px;
+    border-right: 4px solid $primaryBlue;
+}
diff --git a/app/pages/Home.js b/app/pages/Home/Home.js
similarity index 100%
rename from app/pages/Home.js
rename to app/pages/Home/Home.js
diff --git a/app/pages/New.js b/app/pages/New.js
deleted file mode 100644
index 86b0bfa..0000000
--- a/app/pages/New.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-export default class New extends React.Component {
-
-    render() {
-        return (
-            <div>
-                Test new page
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/app/pages/Default.js b/app/pages/NotFound/NotFound.js
similarity index 61%
rename from app/pages/Default.js
rename to app/pages/NotFound/NotFound.js
index ffad07b..1adc60f 100644
--- a/app/pages/Default.js
+++ b/app/pages/NotFound/NotFound.js
@@ -1,10 +1,11 @@
 import React from 'react';
+import './NotFound.scss';
 
 export default class Default extends React.Component {
     render() {
         return (
-            <div className="Default">
-                404
+            <div className="NotFound">
+                404 Not Found
             </div>
         );
     }
diff --git a/app/scss/Default.scss b/app/pages/NotFound/NotFound.scss
similarity index 56%
rename from app/scss/Default.scss
rename to app/pages/NotFound/NotFound.scss
index cc46eae..58005ea 100644
--- a/app/scss/Default.scss
+++ b/app/pages/NotFound/NotFound.scss
@@ -1,9 +1,8 @@
-.Default {
+.NotFound {
     height: 100%;
-    width: 100%;
     display: flex;
-    justify-content: center;
     align-items: center;
-    text-align: center;
-    font-size: 5em;
+    justify-content: center;
+    
+    font-size: 20px;
 }
\ No newline at end of file
diff --git a/app/scss/Home.scss b/app/scss/Home.scss
deleted file mode 100644
index 4737e1e..0000000
--- a/app/scss/Home.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.Home {
-    max-width: 800px;
-    margin-left: auto;
-    margin-right: auto;
-}
\ No newline at end of file
diff --git a/app/scss/Navbar.scss b/app/scss/Navbar.scss
deleted file mode 100644
index f819b60..0000000
--- a/app/scss/Navbar.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.Navbar {
-    position: fixed;
-    top: 0px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: $navbarHeight;
-    background-color: darken(white, 5%);
-    border-bottom: 1px solid darken(white, 10%);
-    
-    .active {
-        background-color: darken(white, 2%);
-    }
-}
-
-.Navbar__item {
-    align-self: stretch;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100px;
-    background-color: white;
-    color: gray;
-    cursor: pointer;
-    text-decoration: none;
-    
-    &:hover {
-        background-color: darken(white, 2%);
-    }
-
-    & + .Navbar__item {
-        border-left: 1px solid darken(white, 5%);
-    }
-}
\ No newline at end of file
diff --git a/app/scss/index.scss b/app/scss/index.scss
index 0d9cce9..31a5bc0 100644
--- a/app/scss/index.scss
+++ b/app/scss/index.scss
@@ -1,8 +1,3 @@
 @import '../assets/normalize.css';
 @import './variables.scss';
-
-// import all css files
 @import './style.scss';
-@import './Navbar.scss';
-@import './Default.scss';
-@import './Home.scss';
diff --git a/app/scss/style.scss b/app/scss/style.scss
index adfa5ad..c1b3f13 100644
--- a/app/scss/style.scss
+++ b/app/scss/style.scss
@@ -1,3 +1,11 @@
 body {
-    padding-top: $navbarHeight;
+    background-color: $gray1;
+    color: $white;
+    padding-left: $navbarWidth;
 }
+
+.content {
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/app/scss/variables.scss b/app/scss/variables.scss
index 8b1deea..45bcd69 100644
--- a/app/scss/variables.scss
+++ b/app/scss/variables.scss
@@ -1 +1,13 @@
-$navbarHeight: 50px;
\ No newline at end of file
+$navbarWidth: 200px;
+
+
+// colors
+$primaryBlue: #42adf4;
+$white: darken(white, 10%);
+
+$gray1: #686a6e;
+$gray2: #424549;
+$gray3: #36393e;
+$gray4: #2e3136;
+$gray5: #282b30;
+$gray6: #1e2124;
diff --git a/package.json b/package.json
index 81909b5..8293f48 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "eslint-plugin-react": "^6.8.0",
     "extract-text-webpack-plugin": "2.0.0-rc.1",
     "html-webpack-plugin": "^2.24.1",
-    "node-sass": "^4.1.1",
+    "node-sass": "^4.5.0",
     "postcss-loader": "^1.2.1",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
diff --git a/yarn.lock b/yarn.lock
index 5e84ab0..1f647ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -898,8 +898,8 @@ batch@0.5.3:
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
 
 bcrypt-pbkdf@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz#3ca76b85241c7170bf7d9703e7b9aa74630040d4"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
   dependencies:
     tweetnacl "^0.14.3"
 
@@ -1077,18 +1077,17 @@ camelcase@^3.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
 
 caniuse-api@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.2.tgz#8f393c682f661c0a997b77bba6e826483fb3600e"
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.3.tgz#5018e674b51c393e4d50614275dc017e27c4a2a2"
   dependencies:
     browserslist "^1.0.1"
     caniuse-db "^1.0.30000346"
     lodash.memoize "^4.1.0"
     lodash.uniq "^4.3.0"
-    shelljs "^0.7.0"
 
 caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000617, caniuse-db@^1.0.30000618:
-  version "1.0.30000618"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000618.tgz#821258ff484f662864f28ffbcf849a6247acf1fa"
+  version "1.0.30000619"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000619.tgz#bffaa8150637c3182d3914a9718369b079299529"
 
 caseless@~0.11.0:
   version "0.11.0"
@@ -1992,8 +1991,8 @@ faye-websocket@~0.11.0:
     websocket-driver ">=0.5.1"
 
 fbjs@^0.8.1, fbjs@^0.8.4:
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.8.tgz#02f1b6e0ea0d46c24e0b51a2d24df069563a5ad6"
+  version "0.8.9"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.9.tgz#180247fbd347dcc9004517b904f865400a0c8f14"
   dependencies:
     core-js "^1.0.0"
     isomorphic-fetch "^2.1.1"
@@ -2823,10 +2822,6 @@ lodash.clonedeep@^4.3.2:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
 
-lodash.indexof@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
-
 lodash.memoize@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -2884,10 +2879,8 @@ map-obj@^1.0.0, map-obj@^1.0.1:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
 
 math-expression-evaluator@^1.2.14:
-  version "1.2.15"
-  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.15.tgz#38dc5f0194c5bf5ff1c690ad4c4b64df71ac0187"
-  dependencies:
-    lodash.indexof "^4.0.5"
+  version "1.2.16"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9"
 
 media-typer@0.3.0:
   version "0.3.0"
@@ -3076,8 +3069,8 @@ node-libs-browser@^2.0.0:
     vm-browserify "0.0.4"
 
 node-pre-gyp@^0.6.29:
-  version "0.6.32"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.32.tgz#fc452b376e7319b3d255f5f34853ef6fd8fe1fd5"
+  version "0.6.33"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.33.tgz#640ac55198f6a925972e0c16c4ac26a034d5ecc9"
   dependencies:
     mkdirp "~0.5.1"
     nopt "~3.0.6"
@@ -3089,9 +3082,9 @@ node-pre-gyp@^0.6.29:
     tar "~2.2.1"
     tar-pack "~3.3.0"
 
-node-sass@^4.1.1:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.4.0.tgz#ff08ff2fded2a1d0bee270e8ed1275f7bc9c5a16"
+node-sass@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.0.tgz#532e37bad0ce587348c831535dbc98ea4289508b"
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -4144,7 +4137,7 @@ sha.js@^2.3.6:
   dependencies:
     inherits "^2.0.1"
 
-shelljs@^0.7.0, shelljs@^0.7.5:
+shelljs@^0.7.5:
   version "0.7.6"
   resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.6.tgz#379cccfb56b91c8601e4793356eb5382924de9ad"
   dependencies:
@@ -4630,8 +4623,8 @@ wbuf@^1.1.0, wbuf@^1.4.0:
     minimalistic-assert "^1.0.0"
 
 webpack-dev-middleware@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.9.0.tgz#a1c67a3dfd8a5c5d62740aa0babe61758b4c84aa"
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.0.tgz#7d5be2651e692fddfafd8aaed177c16ff51f0eb8"
   dependencies:
     memory-fs "~0.4.1"
     mime "^1.3.4"