diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index f51f21f5..956809bc 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -44,12 +44,9 @@ const HeaderLink: React.FC<{ link: HeaderLinkType }> = ({ link }) => {
     <UniLink
       href={link.url}
       onClick={link.onClick}
-      className={cn(
-        `xlog-site-navigation-item h-10 flex items-center space-x-1 transition-colors relative after:content-[''] hover:after:w-full hover:after:left-0 after:transition-[width,left] after:h-[2px] after:block after:absolute after:bottom-0`,
-        active
-          ? `text-accent after:w-full after:left-0 after:bg-accent`
-          : `hover:text-gray-700 after:w-0 after:left-1/2 after:bg-gray-700`,
-      )}
+      className={cn("xlog-site-navigation-item", {
+        "xlog-site-navigation-item-active": active,
+      })}
     >
       {link.icon && <span>{link.icon}</span>}
       <span className="whitespace-nowrap">{t(link.label)}</span>
@@ -342,7 +339,7 @@ export const SiteHeader: React.FC<{
           </div>
         </div>
         <div className="text-gray-500 flex items-center justify-between w-full mt-auto">
-          <div className="xlog-site-navigation flex items-center space-x-5 min-w-0 overflow-x-auto text-sm sm:text-base">
+          <div className="xlog-site-navigation flex items-center gap-1 mx-[-.5rem] min-w-0 text-sm sm:text-base">
             {leftLinks.map((link, i) => {
               return <HeaderLink link={link} key={`${link.label}${i}`} />
             })}
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index dd03204c..fee07066 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -15,6 +15,12 @@
   }
 }
 
+@layer utilities {
+  .focus-ring {
+    @apply focus-visible:outline focus-visible:outline-accent;
+  }
+}
+
 *,
 *:after,
 *:before {
@@ -91,6 +97,7 @@ a {
   @apply font-medium;
   @apply transition;
   @apply active:scale-95;
+  @apply focus-ring focus-within:ring-offset-1;
 }
 
 .button.is-auto-width {
@@ -398,3 +405,22 @@ textarea.input {
   font: unset;
   line-height: unset;
 }
+
+.xlog-site-navigation-item {
+  @apply h-10 px-2 flex items-center space-x-1 transition-colors focus-ring;
+  @apply hover:text-gray-700;
+
+  /* The underline */
+  @apply relative;
+  @apply after:absolute after:block after:content-[''] after:h-[2px] after:transition-[left,right] after:bottom-0 after:left-1/2 after:right-1/2 after:bg-gray-700;
+  @apply hover:after:left-2 hover:after:right-2;
+}
+
+/* TODO-Doma */
+/* Maybe use CSS nested syntax */
+.xlog-site-navigation-item-active {
+  @apply text-accent hover:text-accent;
+
+  /* The underline */
+  @apply after:left-2 after:right-2 after:bg-accent;
+}