diff --git a/assets/css/styles.css b/assets/css/styles.css
index 50a1a0a..9b536d0 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -87,7 +87,10 @@ header {
   @apply text-black;
 }
 #post .kg-bookmark-container {
-  @apply flex flex-row justify-between text-black border border-gray-500;
+  @apply flex flex-row justify-between text-black border border-gray-500 bg-white transition-bg;
+}
+#post .kg-bookmark-container:hover {
+  @apply bg-gray-400 transition-bg;
 }
 #post .kg-bookmark-content {
   @apply w-2/3 py-4 px-4;
@@ -121,19 +124,34 @@ footer {
   @apply py-4 px-4;
 }
 
+
 .nav {
-  @apply hidden flex flex-col w-full pl-0 my-0 h-12;
-  display: none;
+  @apply hidden flex-col w-full pl-0 my-0 absolute;
+  background-color: #085d93;
 }
 .nav li {
-  @apply flex flex-row justify-start items-center h-full my-0 py-2 text-white text-sm px-2;
+  @apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4;
 }
+.nav li a {
+  @apply align-middle w-full table-cell;
+  line-height: 3rem;
+}
+#menushow:hover .nav {
+  @apply block w-screen;
+  right: -1rem;
+}
+
 @screen md {
   .nav {
-    @apply w-auto block flex-row;
+    @apply block static w-auto flex-row h-12 bg-transparent;
   }
   .nav li {
-    @apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block px-4;
+    @apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block h-full;
+  }
+  #menushow:hover .nav {
+    @apply pt-0;
+    right: 0;
+    width: initial;
   }
 }
 
diff --git a/assets/js/nav-collapse.js b/assets/js/nav-collapse.js
index 8bbbba4..4a15f0d 100644
--- a/assets/js/nav-collapse.js
+++ b/assets/js/nav-collapse.js
@@ -1,7 +1,7 @@
     $(document).ready(function () {
         
         var nav = document.querySelector('.index-navbar');
-        var feed = document.querySelector('#post');
+        var feed = document.querySelector('.content');
 
         var lastScrollY = window.scrollY;
         var lastWindowHeight = window.innerHeight;
diff --git a/assets/js/nav.js b/assets/js/nav.js
deleted file mode 100644
index 07d70ea..0000000
--- a/assets/js/nav.js
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-function sliderheight(a) {
-        divHeight = $('.navbar').height();
-        if(a) {
-           $('.nav').css({'background-color' : '#3b90c6'});
-        } else {
-           $('.nav').css({'background-color' : ''});
-        }
-}
-
-      $("#menushow").click(function() {
-        var menu = $(".nav");
-        var menubtn = $("#menushow");
-        if(menu.is(":hidden")) {
-          sliderheight(true);
-          menu.slideDown(250);
-        } else {
-          menu.slideUp(250, function() {
-            sliderheight(false) ;
-          });
-        }
-      });
-
diff --git a/author.hbs b/author.hbs
index 7e02768..179526d 100644
--- a/author.hbs
+++ b/author.hbs
@@ -50,7 +50,7 @@
 </div>
 {{/author}}
 
-<div class="container px-6 my-6 flex flex-wrap justify-between mx-auto post-feed content">
+<div class="container px-2 md:px-12 my-6 flex flex-wrap justify-between mx-auto post-feed content">
 {{#foreach posts}}
   {{> "post-card"}}
 {{/foreach}}
diff --git a/index.hbs b/index.hbs
index 6c6529c..00729d5 100644
--- a/index.hbs
+++ b/index.hbs
@@ -9,7 +9,7 @@
   </div>
 </div>
 
-<div class="container px-6 my-6 flex flex-wrap justify-between mx-auto post-feed content">
+<div class="container px-2 md:px-12 my-6 flex flex-wrap justify-between mx-auto post-feed content">
 {{#foreach posts}}
   {{> "post-card"}}
 {{/foreach}}
diff --git a/partials/site-header.hbs b/partials/site-header.hbs
index 7e0dabb..aea4358 100644
--- a/partials/site-header.hbs
+++ b/partials/site-header.hbs
@@ -14,8 +14,8 @@
           <p class="text-sm text-white">{{@site.description}}</p>
         </div>
       </div>
-      <div id="menushow" class="block md:hidden flex flex-column items-center px-2 py-2 cursor-pointer">
-        <img src="{{asset "images/menu.svg"}}" class="h-8 text-white" style="filter: invert(1);" alt="menu"/>
+      <div id="menushow" class="cursor-pointer relative">
+        <img src="{{asset "images/menu.svg"}}" class="h-12 px-3 py-3 text-white md:hidden" style="filter: invert(1);" alt="menu"/>
+        {{navigation}}
       </div>
-      {{navigation}}
     </header>
diff --git a/tag.hbs b/tag.hbs
index db0d49f..886b406 100644
--- a/tag.hbs
+++ b/tag.hbs
@@ -27,7 +27,7 @@
 </div>
 {{/tag}}
 
-<div class="container px-6 my-6 flex flex-wrap justify-between mx-auto post-feed content">
+<div class="container px-2 md:px-12 my-6 flex flex-wrap justify-between mx-auto post-feed content">
 {{#foreach posts}}
   {{> "post-card"}}
 {{/foreach}}