diff --git a/index.html b/index.html
index 4ba9f20..740d2c0 100644
--- a/index.html
+++ b/index.html
@@ -111,9 +111,19 @@
         <div class="site-shell site-panel-frame px-[2ch] py-[1ch]">
           <div class="site-panel-frost" aria-hidden="true"></div>
           <div class="site-panel-border" aria-hidden="true"></div>
-          <div class="site-panel-content flex justify-center gap-[2ch]">
-            <a href="/" data-nav-link>[HOME]</a>
-            <a href="/qa" data-nav-link>[Q&amp;A]</a>
+          <div
+            class="site-panel-content site-nav-links flex justify-center gap-[2ch]"
+          >
+            <a href="/" data-nav-link class="site-nav-link"
+              ><span class="site-nav-marker" aria-hidden="true">&gt;</span
+              ><span>Home</span
+              ><span class="site-nav-marker" aria-hidden="true">&lt;</span></a
+            >
+            <a href="/qa" data-nav-link class="site-nav-link"
+              ><span class="site-nav-marker" aria-hidden="true">&gt;</span
+              ><span>Q&amp;A</span
+              ><span class="site-nav-marker" aria-hidden="true">&lt;</span></a
+            >
           </div>
         </div>
       </nav>
diff --git a/src/lib/site.ts b/src/lib/site.ts
index dbdb0ae..713bd0d 100644
--- a/src/lib/site.ts
+++ b/src/lib/site.ts
@@ -32,13 +32,13 @@ export function renderFooter() {
       <div class="site-panel-frost" aria-hidden="true"></div>
       <div class="site-panel-border" aria-hidden="true"></div>
       <div class="site-panel-content site-footer-inner">
-        <a href="${REPO_URL}">src</a>
+        <a href="${REPO_URL}">Src</a>
         <span aria-hidden="true">|</span>
-        <a href="/qa/rss.xml" data-native-link>rss</a>
+        <a href="/qa/rss.xml" data-native-link>RSS</a>
         <span aria-hidden="true">|</span>
-        <a href="/pgp.txt" data-native-link>pgp</a>
+        <a href="/pgp.txt" data-native-link>PGP</a>
         <span aria-hidden="true">|</span>
-        <a href="/ssh.txt" data-native-link>ssh</a>
+        <a href="/ssh.txt" data-native-link>SSH</a>
         <span aria-hidden="true">|</span>
         <a href="${mirror.href}">${mirror.label}</a>
       </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 1db2b17..dd79965 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -221,6 +221,36 @@ a[aria-current="page"] {
   text-decoration: underline;
 }
 
+.site-nav-link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--light-blue);
+  text-decoration: none;
+}
+
+.site-nav-link:hover,
+.site-nav-link:focus-visible {
+  background-color: transparent;
+  color: var(--light-blue);
+  text-decoration: none;
+}
+
+.site-nav-link[aria-current="page"] {
+  color: var(--yellow);
+  text-decoration: none;
+}
+
+.site-nav-marker {
+  display: inline-block;
+  width: 1ch;
+  color: currentColor;
+  visibility: hidden;
+}
+
+.site-nav-link[aria-current="page"] .site-nav-marker {
+  visibility: visible;
+}
+
 .skip-link {
   position: absolute;
   left: 1rem;