diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 016f2d4..ea489a4 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,12 +1,12 @@
 <template>
   <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link> |
-    <router-link to="/story">Stories</router-link> |
-    <router-link to="/board">Boards</router-link> |
-    <router-link to="/worklist">Worklists</router-link> |
-    <router-link to="/project">Projects</router-link> |
+    <router-link to="/">Home</router-link>
+    <router-link to="/about">About</router-link>
+    <router-link to="/board">Boards</router-link>
+    <router-link to="/worklist">Worklists</router-link>
     <router-link to="/project-group">Project Groups</router-link>
+    <router-link to="/project">Projects</router-link>
+    <router-link to="/story">Stories</router-link>
   </div>
 </template>
 
@@ -19,14 +19,28 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 #nav {
-  padding: 30px;
+  padding: 0px;
+  position: fixed;
+  top: 60px;
+  left: 0;
+  height: calc(100vh - 60px);
+  background-color: #333;
+  box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.5);
 
   a {
     font-weight: bold;
-    color: #2c3e50;
+    color: #f9f0eb;
+    display: block;
+    padding: 20px 20px;
+    text-decoration: none;
 
     &.router-link-exact-active {
-      color: #42b983;
+      color: #f7f6f4;
+      background-color: #a03427;
+    }
+    &:hover {
+      color: #f7f6f4;
+      background-color: #7c342b;
     }
   }
 }