diff --git a/server/static/css/main.css b/server/static/css/main.css
index dbd52cb..013226a 100644
--- a/server/static/css/main.css
+++ b/server/static/css/main.css
@@ -5,28 +5,33 @@
     color: hsl(0, 0%, 48%);
     padding-left: 8px;
 }
-.sidebar-list {
+ul.sidebar-list {
     /* margin-top: 2px; */
     padding-top: 10px;
     padding-left: 5px;
     margin-bottom: 25px;
+    width: 100%;
 }
-.sidebar-list li button {
-    padding-left: 8px;
+ul.sidebar-list li {
+    cursor: pointer;
     padding-top: 10px;
     padding-bottom: 10px;
     padding-right: 5px;
     border-radius: 2.5px;
-    /* margin-top: 4px; */
-    width: 100%;
+}
+ul.sidebar-list li a {
+    padding-left: 8px;
     text-align: left;
+    color: black;
+    text-decoration: none;
+}
+ul.sidebar-list li:hover,
+ul.sidebar-list li.is-active {
+    background-color: rgb(235, 235, 235);
 }
 .sidebar i {
     padding-right: 4px;
 }
-.sidebar-list li button:hover, .sidebar-list li button.is-active {
-    background-color: lightgray;
-}
 
 .sidebar-column {
     height: 100%;
diff --git a/server/templates/partials/sidebar.html.hbs b/server/templates/partials/sidebar.html.hbs
index 8b36f59..c17018c 100644
--- a/server/templates/partials/sidebar.html.hbs
+++ b/server/templates/partials/sidebar.html.hbs
@@ -1,18 +1,18 @@
 <aside class="sidebar pl-0 mb-0">
     <p class="sidebar-header">Workspace</p>
     <ul class="sidebar-list">
-        <li class="is-active"><button><i class="fa fa-file"></i> Files</button></li>
-        <li><button><i class="fas fa-heart"></i> Favorites</button></li>
-        <li><button><i class="fas fa-clock"></i> Activities</button></li>
+        <li  class="is-active"><a href="#"><i class="fa fa-file"></i> Files</a></li>
+        <li><a href="#"><i class="fas fa-heart"></i> Favorites</a></li>
+        <li><a href="#"><i class="fas fa-clock"></i> Activities</a></li>
     </ul>
     <p class="sidebar-header">Help</p>
     <ul class="sidebar-list">
-        <li><button>Help</button></li>
-        <li><button>About</button></li>
+        <li><a href="#">Help</a></li>
+        <li><a href="#">About</a></li>
     </ul>
 </aside>
 
-<style>
+{{!-- <style>
     .sidebar {
 
     }
@@ -20,13 +20,26 @@
         color: hsl(0, 0%, 48%);
         padding-left: 8px;
     }
-    .sidebar-list {
+    ul.sidebar-list {
         /* margin-top: 2px; */
         padding-top: 10px;
         padding-left: 5px;
         margin-bottom: 25px;
+        li a {
+            padding-left: 8px;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            padding-right: 5px;
+            border-radius: 2.5px;
+            /* margin-top: 4px; */
+            width: 100%;
+            text-align: left;
+        }
+        li a:hover, li a.is-active {
+            background-color: lightgray;
+        }
     }
-    .sidebar-list li button {
+    ul.sidebar-list li a {
         padding-left: 8px;
         padding-top: 10px;
         padding-bottom: 10px;
@@ -35,11 +48,12 @@
         /* margin-top: 4px; */
         width: 100%;
         text-align: left;
+    }
+      ul.sidebar-list li a:hover, ul.sidebar-list li a.is-active {
+            background-color: lightgray;
     }
     .sidebar i {
         margin-left: 2px;
     }
-    .sidebar-list li button:hover, .sidebar-list li button.is-active {
-        background-color: lightgray;
-    }
-</style>
\ No newline at end of file
+  
+</style> --}}
\ No newline at end of file