diff --git a/public/stylesheets/index.css b/public/stylesheets/index.css
index 89b3c69..3765ee6 100644
--- a/public/stylesheets/index.css
+++ b/public/stylesheets/index.css
@@ -5,6 +5,26 @@ h1 {
     bottom: 5px;
 }
 
+/* .header {
+    position: fixed;
+    width: 100%;
+} */
+
+.nav-bar {
+    display: flex;
+    justify-content: space-between;
+}
+
+.nav-div {
+    display: flex;
+}
+
+.search {
+    display: flex;
+    width: 80%;
+    justify-content: center;
+}
+
 .logout-btn {
     float: right;
     margin: 10px;
@@ -19,9 +39,9 @@ h1 {
 
 .search-bar {
     border-radius: 30px;
-    width: 70%;
-    height: 45px;
-    font-size: 22px;
+    width: 150px;
+    height: 30px;
+    font-size: 15px;
     text-align: center;
     position: relative;
     top: 10px;
@@ -29,33 +49,58 @@ h1 {
 
 
 
-/* .trail-div {
+.trail-div {
+    padding: 5px;
+}
+
+.wrapper {
+    margin: 0 auto;
+    padding: 32px;
+    max-width: 1400px;
     display: flex;
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 0;
-    flex-direction: row;
-} */
+    flex-flow: row wrap;
+}
 
-/* .trail-list-item {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: repeat(4, 5vw);
-    grid-gap: 15px;
-} */
+.sidebar {
+    background-color:	#6C547B;
+    border-radius: 3px;
+    margin: 0 32px 32px 0;
+    padding: 0 20px 32px 20px;
+    max-height: 130px;
+    max-width:  180px;
+    width: 20%;
+    flex-basis: 220px;
+    position: fixed;
+}
+
+.sidebar-container {
+    background-color:	transparent;
+    border-radius: 3px;
+    margin: 0 32px 32px 0;
+    padding: 0 20px 32px 20px;
+    max-height: 130px;
+    max-width:  180px;
+    width: 20%;
+    flex-basis: 220px;
 
-.wrapper {
-    display: grid;
-    grid-template-columns: 20% 60% 20%;
-    grid-gap: 10px;
-    margin: 30px;
 }
 
-.test {
+/* .trail-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 10px;
     margin: 30px;
+} */
+
+.trail-list-item {
+    max-width: 225px;
+    height: 200px;
+}
+
+.trail-container {
+    display: flex;
+    flex-wrap: wrap;
+    width: 80%;
 }
 
 a {
@@ -63,8 +108,8 @@ a {
 }
 
 img {
-    width: 450px;
-    height: 300px;
+    width: 225px;
+    height: 150px;
     grid-column-start: 2;
     grid-column-end: 4;
     grid-row-start: 2;
@@ -77,4 +122,13 @@ img {
 
 .name {
     text-align: center;
+    margin: 0;
+    padding: 0;
+}
+
+.state {
+    text-align: center;
+    font-size: 10px;
+    margin: 2px;
+    padding: 2px;
 }
diff --git a/views/index.pug b/views/index.pug
index 7ac6cae..0b9cc6f 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -8,22 +8,29 @@ block content
   header
     div
       nav(id="nav" class="nav-bar")
-        form(action="/" method="post" id="demo" class="demo")
-          button(type="submit" class="logout-btn") Logout
-    div(class="header")
-      h1 MixTrail
-        div(class="search")
+        h1
+        h1
+        div(class="nav-div")
           input(type="text" id="search-bar" class="search-bar" placeholder="Find your next trail!")
-  div(class="wrapper")
+          form(action="/" method="post" id="demo" class="demo")
+            button(type="submit" class="logout-btn") Logout
     div
-    div(class="test")
+      h1 MixTrail
+  div(class="wrapper")
+    div(class="sidebar-container")
+      div(class="sidebar")
+        div(class="sidebar-content")
+        p= Hello
+        a(href='/login') Login
+    div(class="trail-container")
       each trail in trails
         div(class="trail-div")
           a(class='btn btn-primary' href=`/trail/${trail.id}` role='button')
             div(id=`trail-${trail.id}` class='trail-list-item')
-              p(class="name") #{trail.name}, #{trail.state}
+              p(class="name") #{trail.name}
+              p(class="state") #{trail.state}
               img(src=`./trails/trail-${trail.id}.jpg` alt=`${trail.name}` class=`trail-image-${trail.id}`)
-    div
+
   //- div
   //-   table(class='table table-striped table-hover')
   //-     thead(class='thead-dark')