diff --git a/.DS_Store b/.DS_Store
index 2e6d09f..df2b77f 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/client/src/App.js b/client/src/App.js
index 75f12c4..38b8463 100755
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -18,6 +18,7 @@ import {black, white} from './utils'
 // Components
 // Layout
 import Navbar from "./components/layout/Navbar";
+import Sidebar from './components/layout/Sidebar'
 import Homepage from "./components/homepage/Homepage";
 import Footer from "./components/layout/Footer";
 
@@ -48,7 +49,7 @@ class App extends Component {
                         <Navbar/>
                         <ContentWrapper>
                             <SidebarWrapper>
-                                Navigation
+                                <Sidebar/>
                             </SidebarWrapper>
                             <MainbarWrapper>
                                 <Route exact path="/" component={Homepage}/>
@@ -78,12 +79,11 @@ const AppWrapper = styled.div`
 
 const ContentWrapper = styled.div`
     display: flex;
-    margin-top: 30rem;
 `;
 
-const SidebarWrapper = styled.div`
+const SidebarWrapper = styled.nav`
     background-color: ${black};
-    flex: 0 0 18%;
+    flex: 0 0 15%;
     color: ${white};
 `;
 
diff --git a/client/src/components/layout/Navbar.js b/client/src/components/layout/Navbar.js
index 6d77b6d..8ec3f4b 100644
--- a/client/src/components/layout/Navbar.js
+++ b/client/src/components/layout/Navbar.js
@@ -2,7 +2,7 @@ import React, {Component} from "react";
 import {Link} from "react-router-dom";
 import {connect} from "react-redux";
 import styled from 'styled-components'
-import {darken, lighten} from 'polished'
+import {darken} from 'polished'
 
 // REDUX ACTIONS
 import {logoutUser} from "../../actions/authActions";
@@ -143,9 +143,9 @@ const NavbarStyled = styled.header`
             }
         }
 
-        &__input:focus + &__button {
+        /* &__input:focus + &__button {
             background-color: red;
-        }
+        } */
 
         &__button {
             border: none;
diff --git a/client/src/components/layout/Sidebar.js b/client/src/components/layout/Sidebar.js
new file mode 100644
index 0000000..5506a8f
--- /dev/null
+++ b/client/src/components/layout/Sidebar.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import {Link} from 'react-router-dom'
+
+// ASSETS
+import sprites from '../../img/sprite.svg'
+
+const Sidebar = () => {
+    return (
+        <ul className='side-nav'>
+            <li className='side-nav__item'>
+                <Link to='/'>
+                    <svg className='side-nav__icon'>
+                        <use xlinkHref={`${sprites}#icon-home`} />
+                    </svg>
+                    <span>Home</span>
+                </Link>
+            </li>
+            <li className='side-nav__item'>
+                <Link to='/'>
+                    <svg className='side-nav__icon'>
+                        <use xlinkHref={`${sprites}#icon-price-tag`} />
+                    </svg>
+                    <span>Tags</span>
+                </Link>
+            </li>
+            <li className='side-nav__item'>
+                <Link to='/'>
+                    <svg className='side-nav__icon'>
+                        <use xlinkHref={`${sprites}#icon-slideshare`} />
+                    </svg>
+                    <span>Users</span>
+                </Link>
+            </li>
+        </ul>
+    );
+}
+
+export default Sidebar;
\ No newline at end of file
diff --git a/client/src/elements/Buttons.js b/client/src/elements/Buttons.js
index 15eaf0c..c31671f 100644
--- a/client/src/elements/Buttons.js
+++ b/client/src/elements/Buttons.js
@@ -22,7 +22,7 @@ export const Button = styled.button`
 `;
 
 const SignUpButton = styled(Button)`
-    background: ${secondary};
+    background: ${primary};
     
     &:hover {
         background: ${darken(0.2, primary)};
diff --git a/client/src/img/sprite.svg b/client/src/img/sprite.svg
index 371f8ba..5f20239 100755
--- a/client/src/img/sprite.svg
+++ b/client/src/img/sprite.svg
@@ -1,8 +1,36 @@
 <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
+<symbol id="icon-triangle-down" viewBox="0 0 20 20">
+<title>triangle-down</title>
+<path d="M5 6h10l-5 9-5-9z"></path>
+</symbol>
+<symbol id="icon-triangle-up" viewBox="0 0 20 20">
+<title>triangle-up</title>
+<path d="M15 14h-10l5-9 5 9z"></path>
+</symbol>
+<symbol id="icon-home" viewBox="0 0 20 20">
+<title>home</title>
+<path d="M18.672 11h-1.672v6c0 0.445-0.194 1-1 1h-4v-6h-4v6h-4c-0.806 0-1-0.555-1-1v-6h-1.672c-0.598 0-0.47-0.324-0.060-0.748l8.024-8.032c0.195-0.202 0.451-0.302 0.708-0.312 0.257 0.010 0.513 0.109 0.708 0.312l8.023 8.031c0.411 0.425 0.539 0.749-0.059 0.749z"></path>
+</symbol>
 <symbol id="icon-magnifying-glass" viewBox="0 0 20 20">
 <title>magnifying-glass</title>
 <path d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
 </symbol>
+<symbol id="icon-price-tag" viewBox="0 0 20 20">
+<title>price-tag</title>
+<path d="M19.388 0.405c-0.111-0.314-0.454-0.48-0.769-0.371s-0.481 0.455-0.372 0.77c0.929 2.67-0.915 4.664-2.321 5.732l-0.568-0.814c-0.191-0.273-0.618-0.5-0.95-0.504l-3.188 0.014c-0.332-0.006-0.825 0.146-1.097 0.338l-9.394 6.587c-0.455 0.32-0.565 0.947-0.247 1.404l4.269 6.108c0.32 0.455 0.831 0.4 1.287 0.082l9.394-6.588c0.27-0.191 0.582-0.603 0.692-0.918l0.998-3.145c0.11-0.314 0.043-0.793-0.148-1.066l-0.346-0.496c1.888-1.447 3.848-4.004 2.76-7.133zM15.017 9.763c-0.727 0.51-1.731 0.332-2.24-0.396-0.511-0.73-0.333-1.734 0.395-2.246 0.578-0.405 1.328-0.376 1.868 0.017-0.272 0.164-0.459 0.26-0.494 0.275-0.301 0.143-0.43 0.504-0.288 0.805 0.104 0.219 0.321 0.348 0.547 0.348 0.086 0 0.174-0.020 0.257-0.059 0.194-0.092 0.402-0.201 0.619-0.33 0.097 0.594-0.139 1.217-0.664 1.586z"></path>
+</symbol>
+<symbol id="icon-thumbs-down" viewBox="0 0 20 20">
+<title>thumbs-down</title>
+<path d="M6.352 12.638c0.133 0.356-3.539 3.634-1.397 6.291 0.501 0.621 2.201-2.975 4.615-4.602 1.331-0.899 4.43-2.811 4.43-3.868v-6.842c0-1.271-4.914-2.617-8.648-2.617-1.369 0-3.352 8.576-3.352 9.939 0 1.367 4.221 1.343 4.352 1.699zM15 12.543c0.658 0 3-0.4 3-3.123v-4.848c0-2.721-2.342-3.021-3-3.021-0.657 0 1 0.572 1 2.26v6.373c0 1.768-1.657 2.359-1 2.359z"></path>
+</symbol>
+<symbol id="icon-thumbs-up" viewBox="0 0 20 20">
+<title>thumbs-up</title>
+<path d="M13.648 7.362c-0.133-0.355 3.539-3.634 1.398-6.291-0.501-0.621-2.201 2.975-4.615 4.603-1.332 0.898-4.431 2.81-4.431 3.867v6.842c0 1.271 4.914 2.617 8.648 2.617 1.369 0 3.352-8.576 3.352-9.938 0-1.368-4.221-1.344-4.352-1.7zM5 7.457c-0.658 0-3 0.4-3 3.123v4.848c0 2.721 2.342 3.021 3 3.021 0.657 0-1-0.572-1-2.26v-6.373c0-1.768 1.657-2.359 1-2.359z"></path>
+</symbol>
+<symbol id="icon-slideshare" viewBox="0 0 20 20">
+<title>slideshare</title>
+<path d="M13 7.080c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5-2.5 1.119-2.5 2.5 1.12 2.5 2.5 2.5zM18.845 5.943c-3.58 2.555-5.229 2.108-6.845 2.057-1.118-0.057-1.5 0.298-1.5 1.080l0.001 6c0 5 8.421 3.43 5.165-4.949 1.671-0.959 3.076-2.434 3.876-3.412 0.411-0.608-0.028-1.245-0.697-0.776zM7 2.080c-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5 2.5-1.119 2.5-2.5-1.12-2.5-2.5-2.5zM8 8c-1.616 0.051-3.265 0.498-6.845-2.057-0.669-0.469-1.108 0.168-0.697 0.775 0.8 0.979 2.205 2.453 3.876 3.412-3.256 8.379 5.165 9.949 5.165 4.949l0.001-6c0-0.781-0.382-1.136-1.5-1.079z"></path>
+</symbol>
 </defs>
 </svg>
diff --git a/client/src/utils/Colors.js b/client/src/utils/Colors.js
index 72a75b9..d977f4e 100644
--- a/client/src/utils/Colors.js
+++ b/client/src/utils/Colors.js
@@ -1,5 +1,5 @@
 export const primary = '#5EC5B6'
-export const secondary = '#85DAEF'
+export const secondary = '#54C0E4'
 export const secondary_light = '#8EEEEF'
 
 export const black = '#242729'