diff --git a/src/assets/dot.png b/src/assets/dot.png
new file mode 100644
index 0000000000000000000000000000000000000000..80d349d9180b5f5ee710a4625d01748525b201b0
GIT binary patch
literal 102
zcmeAS@N?(olHy`uVBq!ia0y~yU|<Dd4mJh`hTeR&rwj}XoCO|{#S9F5M?jcysy3fA
z0|SGEr;B3<$IRq}156SNztpD~s^w^H<Vs>?@NH&fV?BJxkAZ=K!PC{xWt~$(69CwR
B7PtTa

literal 0
HcmV?d00001

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 6e574fe..beba98c 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,6 +1,5 @@
 ---
 import { urls, type nav } from "/site-config";
-
 ---
 
 <header>
@@ -39,8 +38,49 @@ import { urls, type nav } from "/site-config";
   header {
     image-rendering: pixelated;
     border-image: url("../assets/box-blr.png") 10 fill / 10px / 10px round;
-    margin: 10px;
+    margin: 0 10px 10px;
+    padding: 10px 20px;
     overflow: auto;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    @media (max-width: 600px) {
+      flex-direction: column;
+    }
+
+    & > ul {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: start;
+      max-width: 100%;
+      overflow-y: scroll;
+      gap: 10px;
+
+      & > li {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
+
+        &::marker {
+          content: none;
+        }
+
+        & + &::before {
+          content: "";
+          image-rendering: pixelated;
+          background-image: url("../assets/dot.png");
+          background-size: contain;
+          width: 9px;
+          height: 9px;
+          display: block;
+        }
+      }
+    }
   }
 
   h1 {