diff --git a/sass/_main.scss b/sass/_main.scss
index 413d0f1..ad46f67 100644
--- a/sass/_main.scss
+++ b/sass/_main.scss
@@ -283,12 +283,9 @@ img:not(.no-hover):hover {
 }
 
 // NAVBAR
-.site-nav {
-  z-index: 1;
-  width: 80%;
-  top: 1rem;
-  position: sticky;
+.nav {
   overflow: auto;
+  width: 80%;
   max-width: var(--content-width);
   margin: 1rem auto;
   box-shadow: var(--shadow);
@@ -296,10 +293,14 @@ img:not(.no-hover):hover {
   background-color: var(--fg05);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
+  position: sticky;
+  top: 1rem;
+  z-index: 1;
 
-  // bootstrap icons
-  .bi {
-    font-size: 1rem;
+  &-container {
+    margin: 0.5rem 0.5rem;
+    position: relative;
+    text-align: center;
   }
 
   ul {
@@ -310,71 +311,57 @@ img:not(.no-hover):hover {
   }
 
   li {
-    color: var(--fg50);
+    transition: var(--transition);
+    color: var(--default-color);
     display: inline-block;
   }
 
   a {
     display: inline-block;
-    font-size: 0.9rem;
     padding: 0.4rem 1rem;
     border-radius: var(--rounded-corner);
     background-color: transparent;
     color: var(--fg50);
     transition: var(--transition);
     text-decoration: none;
-  }
 
-  a:hover {
-    background-color: var(--fg05);
-    color: var(--primary-color);
+    &:hover,
+    &:focus {
+      background-color: var(--fg05);
+      color: var(--primary-color);
+    }
   }
+}
 
-  a.site-nav-title {
-    line-height: normal; // unset line height
-    font-size: 1.2rem;
+@media (min-width: 600px) {
+  .nav {
+    &-container {
+      text-align: left;
+    }
+
+    ul {
+      bottom: 0;
+      position: absolute;
+      right: 0;
+    }
   }
-
-  // svg {
-  //   transform: translateY(-0.125rem) translateX(-0.125rem); // fix icon position
-  // }
 }
 
 @media only screen and (max-device-width: 480px) {
-  .site-nav {
-    position: static;
+  .nav {
     width: 90%;
   }
 }
 
-.site-nav-container {
-  display: block;
-  margin: 0.5rem 0.5rem;
-  position: relative;
-  text-align: center;
-}
-
-@media (min-width: 640px) {
-  .site-nav-container {
-    text-align: left;
-  }
-
-  .site-nav ul {
-    bottom: 0;
-    position: absolute;
-    right: 0;
-  }
-}
-
 // FOOTER
-.site-footer {
+.footer {
   text-align: center;
   padding: 3rem 0 3rem;
   font-size: 1rem;
   margin-top: 4rem;
 }
 
-.site-footer {
+.footer {
   details {
     all: unset;
   }
diff --git a/templates/includes/footer.html b/templates/includes/footer.html
index e780b67..0ddf4e7 100644
--- a/templates/includes/footer.html
+++ b/templates/includes/footer.html
@@ -1,4 +1,4 @@
-<footer class="site-footer">
+<footer class="footer">
   {% if config.extra.footer.show_copyright %}
   <p title="Last built at {{ now() | date(format='%F %R %Z') }}">&copy; {{ config.title }}, 2023</p>
   {% endif %}
diff --git a/templates/includes/nav.html b/templates/includes/nav.html
index 4b25b99..d3e87a3 100644
--- a/templates/includes/nav.html
+++ b/templates/includes/nav.html
@@ -1,6 +1,7 @@
-<nav class="site-nav">
-  <div class="site-nav-container">
-    <a class="site-nav-title" href="{{ config.base_url }}">
+<nav class="nav">
+  <div class="nav-container">
+    <a href="{{ config.base_url }}">
+      <i class="bi bi-house-fill"></i>
       {{ config.title }}
     </a>
     <ul>