diff --git a/src/_components/navbar.tsx b/src/_components/navbar.tsx
index 0622e34..18d9357 100644
--- a/src/_components/navbar.tsx
+++ b/src/_components/navbar.tsx
@@ -1,51 +1,58 @@
-export default function () {
-  const iconStyle = {
-    filter: "var(--filter-green)",
-  };
+const items = [
+  {
+    title: "Home",
+    path: "/",
+    icon: {
+      src:
+        "https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/home.svg",
+      alt: "home icon",
+    },
+  },
+  {
+    title: "Blog",
+    path: "/blog",
+    icon: {
+      src:
+        "https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/news.svg",
+      alt: "blog icon",
+    },
+  },
+  {
+    title: "Resume",
+    path: "/resume",
+    icon: {
+      src:
+        "https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/file-cv.svg",
+      alt: "resume icon",
+    },
+  },
+  {
+    title: "GPG Key",
+    path: "/gpg-key",
+    icon: {
+      src:
+        "https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/key.svg",
+      alt: "key icon",
+    },
+  },
+];
 
+export default function Navbar() {
   return (
     <nav className="navbar">
       <ul className="navbar-list">
-        <li className="navbar-list-item home">
-          <a href="/" title="Home">
-            <img
-              src="https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/home.svg"
-              className="icon"
-              style={iconStyle}
-              alt="home"
-            />
-          </a>
-        </li>
-        <li className="navbar-list-item">
-          <a href="/blog/" title="Blog">
-            <img
-              src="https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/news.svg"
-              className="icon"
-              style={iconStyle}
-              alt="blog"
-            />
-          </a>
-        </li>
-        <li className="navbar-list-item">
-          <a href="/resume/" title="Resume">
-            <img
-              src="https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/file-cv.svg"
-              className="icon"
-              style={iconStyle}
-              alt="resume"
-            />
-          </a>
-        </li>
-        <li className="navbar-list-item">
-          <a href="/gpg-key/" title="GPG Key">
-            <img
-              src="https://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/outline/key.svg"
-              className="icon"
-              style={iconStyle}
-              alt="gpg key"
-            />
-          </a>
-        </li>
+        {items.map((item) => (
+          <li>
+            <a href={item.path} className="button">
+              <img
+                alt={item.icon.alt}
+                className="icon"
+                src={item.icon.src}
+              />
+              <div>{item.title}</div>
+            </a>
+          </li>
+        ))}
       </ul>
     </nav>
   );
diff --git a/src/_includes/styles/base.scss b/src/_includes/styles/base.scss
index 8e24229..717553a 100644
--- a/src/_includes/styles/base.scss
+++ b/src/_includes/styles/base.scss
@@ -345,3 +345,27 @@ kbd {
   background-color: var(--color-bg--layer-01);
   border: 1px solid var(--color-black);
 }
+
+.button {
+  align-items: center;
+  border-radius: 10px;
+  color: var(--color-green);
+  display: flex;
+  gap: 0.25em;
+  justify-items: center;
+  padding: 0.5em;
+  border: 1px solid var(--color-green);
+
+  img.icon {
+    font-size: 1.25em;
+    filter: var(--filter-green);
+  }
+
+  &:hover {
+    background-color: var(--color-green);
+    color: var(--color-bg);
+    img.icon {
+      filter: var(--filter-bg);
+    }
+  }
+}
diff --git a/src/_includes/styles/components/navbar.scss b/src/_includes/styles/components/navbar.scss
index 6e70d49..a889400 100644
--- a/src/_includes/styles/components/navbar.scss
+++ b/src/_includes/styles/components/navbar.scss
@@ -4,45 +4,26 @@ .navbar {
   margin: 0 auto;
   max-width: var(--page--max-width);
   padding: 1rem;
-}
 
-.navbar-list {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  list-style: none;
-  padding-left: 0;
-  padding-right: 1rem;
-}
+  .navbar-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    list-style: none;
+    padding-left: 0;
+    padding-right: 1rem;
 
-.navbar-list-item {
-  margin: 0;
-  font-size: 2rem;
-  &.home {
-    margin-right: auto;
-  }
-  a {
-    text-decoration: none;
-  }
-}
-
-.navbar-actions {
-  display: flex;
-  align-items: center;
-  border-left: 1px solid var(--color-black);
-  padding-left: 1rem;
-}
-
-button.navbar-theme-switcher {
-  background-color: transparent;
-  border-radius: 2px;
-  border: 1px solid var(--color-white);
-  padding: 0.5em;
-  cursor: pointer;
-  color: var(--color-white);
-
-  &:hover {
-    color: var(--color-green);
-    border-color: var(--color-green);
+    li {
+      margin: 0;
+      a {
+        text-decoration: none;
+      }
+      @media (min-width: $bp-sm) {
+        &:first-child {
+          margin-right: auto;
+        }
+      }
+    }
   }
 }
diff --git a/src/_includes/styles/variables.scss b/src/_includes/styles/variables.scss
index e2be481..a8022ff 100644
--- a/src/_includes/styles/variables.scss
+++ b/src/_includes/styles/variables.scss
@@ -1,10 +1,17 @@
+/* Breakpoints */
+$bp-sm: 640px;
+$bp-md: 768px;
+$bp-lg: 1024px;
+$bp-xl: 1280px;
+$bp-2xl: 1536px;
+
 :root {
   /* Breakpoints */
-  --bp-sm: 640px;
-  --bp-md: 768px;
-  --bp-lg: 1024px;
-  --bp-xl: 1280px;
-  --bp-2xl: 1536px;
+  --bp-sm: $bp-sm;
+  --bp-md: $bp-md;
+  --bp-lg: $bp-lg;
+  --bp-xl: $bp-xl;
+  --bp-2xl: $bp-2xl;
 
   /* Text */
   --text-xs: 0.75rem;