diff --git a/src/index.css b/src/index.css
index 0df1fc9..6d975fa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -61,14 +61,12 @@ nav {
 }
 
 .navbar {
-    list-style-type: none;
     margin: 0;
     padding: 0;
-}
-
-.navbar li {
-    display: inline;
-    margin: 0 .25em;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    align-items: center;
+    align-self: center;
 }
 
 table {
diff --git a/src/index.html b/src/index.html
index d3e1d00..f89ebb8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -55,26 +55,26 @@
                 <div>
                     <span><img src="img/twemoji_trans.svg" width="32px" height="32px" alt="🏳️‍⚧️" class="icon"/></span>&nbsp;<i id="__name">Nexus</i>
                 </div>          
-                <ul class="navbar">
-                    <li><a href="index.html">Home</a></li>
-                    <li><a href="/chat/#/user/@nex:nexy7574.co.uk" class="icon"><img src="img/matrix-color.svg" width="32px" height="32px" alt="Chat" title="Chat" class="icon"/></a></li>
-                    <li><a href="/status" class="icon"><img src="img/server.svg" alt="Service Status" title="Service Status" width="32px" height="32px" class="icon"/></a></li>
-                    <li>
+                <div class="navbar">
+                    <div><a href="index.html">Home</a></div>
+                    <div><a href="/chat/#/user/@nex:nexy7574.co.uk" class="icon"><img src="img/matrix-color.svg" width="32px" height="32px" alt="Chat" title="Chat" class="icon"/></a></div>
+                    <div><a href="/status" class="icon"><img src="img/server.svg" alt="Service Status" title="Service Status" width="32px" height="32px" class="icon"/></a></div>
+                    <div>
                         <a href="https://github.com/nexy7574" rel="noopener noreferrer" target="_blank" class="icon">
                             <img src="img/github.svg" alt="GitHub" title="GitHub" width="32px" height="32px" class="icon">
                         </a>
-                    </li>
-                    <li>
+                    </div>
+                    <div>
                         <a href="https://git.i-am.nexus/nex/nexy7574.co.uk-b" rel="noopener" target="_blank" class="icon">
                             <img src="img/forgejo-color.svg" alt="Forgejo" title="Forgejo (git) & source code" width="32px" height="32px" class="icon">
                         </a>
-                    </li>
-                    <li>
+                    </div>
+                    <div>
                         <a href="https://mastodon.nexy7574.co.uk" rel="noopener noreferrer" target="_blank" class="icon">
                             <img src="img/mastodon-color.svg" alt="Mastodon" title="Mastodon" width="32px" height="32px" class="icon">
                         </a>
-                    </li>
-                </ul>
+                    </div>
+                </div>
             </nav>
         </header>
         <main>
diff --git a/src/responsive.css b/src/responsive.css
index 0e52db9..0be51d5 100644
--- a/src/responsive.css
+++ b/src/responsive.css
@@ -24,12 +24,8 @@
     nav {
         flex-direction: column;
         padding: 0;
-    }
-    ul.navbar {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
+        gap: 2em;
+        padding: 1em 0;
     }
     .navbar span {
         display: none