diff --git a/public/stylesheets/index.css b/public/stylesheets/index.css
index 3bcc069..89b3c69 100644
--- a/public/stylesheets/index.css
+++ b/public/stylesheets/index.css
@@ -44,12 +44,22 @@ h1 {
     grid-gap: 15px;
 } */
 
+.wrapper {
+    display: grid;
+    grid-template-columns: 20% 60% 20%;
+    grid-gap: 10px;
+    margin: 30px;
+}
+
 .test {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 10px;
     margin: 30px;
-    max-width: 700;
+}
+
+a {
+    text-decoration: none;
 }
 
 img {
diff --git a/views/index.pug b/views/index.pug
index 63f448c..7ac6cae 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -14,14 +14,16 @@ block content
       h1 MixTrail
         div(class="search")
           input(type="text" id="search-bar" class="search-bar" placeholder="Find your next trail!")
-  div(class="test")
-    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}
-            img(src=`./trails/trail-${trail.id}.jpg` alt=`${trail.name}` class=`trail-image-${trail.id}`)
-
+  div(class="wrapper")
+    div
+    div(class="test")
+      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}
+              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')