diff --git a/assets/partials/_nav.scss b/assets/partials/_nav.scss
index 8e0d81f..2ec0e0e 100644
--- a/assets/partials/_nav.scss
+++ b/assets/partials/_nav.scss
@@ -20,14 +20,24 @@ nav {
       ul {
         display: flex;
         padding: 0;
-      }
-      li {
-        list-style-type: none;
-        padding: 10px 0 10px 30px;
-      }
-      a {
-        color: rgb(245, 245, 245);
-        text-decoration: none;
+        margin: 0;
+        li {
+          list-style-type: none;
+          a {
+            color: rgb(245, 245, 245);
+            text-decoration: none;
+            padding: 20px 30px;
+            display: block;
+            transition: background .2s;
+          }
+          a:hover {
+            background: rgb(50, 50, 75);
+          }
+          .seperator {
+            padding: 20px 10px;
+            display: block;
+          }
+        }
       }
     }
   }
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 7e90991..7e4c59c 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -14,7 +14,9 @@
             </a>
           </li>
         {{ end }}
-        <li>|</li>
+        <li>
+          <span class="seperator">&middot;</span>
+        </li>
         {{ range .Site.Menus.links }}
           <li>
             <a href="{{ .URL }}">