diff --git a/assets/styles/kraken.scss b/assets/styles/kraken.scss
index c5c0c9f..a4a83fe 100644
--- a/assets/styles/kraken.scss
+++ b/assets/styles/kraken.scss
@@ -1,3 +1,62 @@
+$nav-width: 200px;
+
+$box-shadow-1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+$box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+
body{
background: lightgrey;
}
+
+#main-nav{
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: $nav-width;
+ height: 100%;
+ padding: 20px 0;
+ background: #212121;
+ color: white;
+ box-shadow: $box-shadow-1;
+ box-sizing: border-box;
+
+ h3{
+ text-align: center;
+ }
+
+ ul{
+ list-style: none;
+
+ li{
+ margin: 0;
+ border-bottom: 1px solid #999;
+
+ &:first-child{
+ border-top: 1px solid #999;
+ }
+ }
+
+ a{
+ display: block;
+ box-sizing: border-box;
+ width: $nav-width;
+ padding: 10px 15px;
+ color: limegreen;
+ font-size: 2.5rem;
+ text-decoration: none;
+ transition: all 230ms ease-in-out;
+
+ &:hover{
+ background: rgba(255, 255, 255, 0.1);
+ }
+ }
+ }
+}
+
+#main-wrapper{
+ max-width: 1200px;
+ margin-top: 25px;
+ padding: 20px 30px;
+ background: white;
+ border-radius: 5px;
+ box-shadow: $box-shadow-2;
+}
diff --git a/views/layout.erb b/views/layout.erb
index 6947b9a..37e298e 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -9,6 +9,17 @@
- <%= yield %>
+
+
+
+
+ <%= yield %>
+