diff --git a/DysonNetwork.Sphere/Pages/Index.cshtml b/DysonNetwork.Sphere/Pages/Index.cshtml
index 99dad6b..89e6254 100644
--- a/DysonNetwork.Sphere/Pages/Index.cshtml
+++ b/DysonNetwork.Sphere/Pages/Index.cshtml
@@ -16,7 +16,12 @@
             <a href="https://sn.solsynth.dev" target="_blank" class="btn-primary">
                 Get started
             </a>
-            <a href="https://kb.solsynth.dev" target="_blank" class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300">
+        </div>
+        <div class="flex items-center justify-center gap-x-6 mt-6">
+            <a href="/swagger" target="_blank" class="btn-text">
+                <span aria-hidden="true">λ&nbsp;</span> API Docs
+            </a>
+            <a href="https://kb.solsynth.dev" target="_blank" class="btn-text">
                 Learn more <span aria-hidden="true">→</span>
             </a>
         </div>
diff --git a/DysonNetwork.Sphere/wwwroot/css/site.css b/DysonNetwork.Sphere/wwwroot/css/site.css
index 5fc9ea2..a9c9763 100644
--- a/DysonNetwork.Sphere/wwwroot/css/site.css
+++ b/DysonNetwork.Sphere/wwwroot/css/site.css
@@ -27,6 +27,10 @@
     @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors dark:bg-blue-600 dark:hover:bg-blue-700;
 }
 
+.btn-text {
+    @apply text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300;
+}
+
 .container-default {
     @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
 }
\ No newline at end of file
diff --git a/DysonNetwork.Sphere/wwwroot/css/styles.css b/DysonNetwork.Sphere/wwwroot/css/styles.css
index 3f05f0a..e011b4d 100644
--- a/DysonNetwork.Sphere/wwwroot/css/styles.css
+++ b/DysonNetwork.Sphere/wwwroot/css/styles.css
@@ -9,24 +9,16 @@
     monospace;
     --color-yellow-100: oklch(97.3% 0.071 103.193);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
-    --color-yellow-500: oklch(79.5% 0.184 86.047);
-    --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-yellow-800: oklch(47.6% 0.114 61.907);
     --color-yellow-900: oklch(42.1% 0.095 57.708);
     --color-green-100: oklch(96.2% 0.044 156.743);
     --color-green-200: oklch(92.5% 0.084 155.995);
-    --color-green-500: oklch(72.3% 0.219 149.579);
-    --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-800: oklch(44.8% 0.119 151.328);
     --color-green-900: oklch(39.3% 0.095 152.535);
-    --color-blue-100: oklch(93.2% 0.032 255.585);
-    --color-blue-200: oklch(88.2% 0.059 254.128);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-blue-700: oklch(48.8% 0.243 264.376);
-    --color-blue-800: oklch(42.4% 0.199 265.638);
-    --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
@@ -59,7 +51,6 @@
     --font-weight-bold: 700;
     --tracking-tight: -0.025em;
     --radius-lg: 0.5rem;
-    --radius-xl: 0.75rem;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -377,10 +368,6 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
-  .leading-6 {
-    --tw-leading: calc(var(--spacing) * 6);
-    line-height: calc(var(--spacing) * 6);
-  }
   .leading-8 {
     --tw-leading: calc(var(--spacing) * 8);
     line-height: calc(var(--spacing) * 8);
@@ -473,13 +460,6 @@
       }
     }
   }
-  .hover\:text-gray-700 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-gray-700);
-      }
-    }
-  }
   .focus\:ring-2 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -523,11 +503,6 @@
       background-color: var(--color-yellow-900);
     }
   }
-  .dark\:text-gray-100 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-gray-100);
-    }
-  }
   .dark\:text-gray-300 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-gray-300);
@@ -562,15 +537,6 @@
       }
     }
   }
-  .dark\:hover\:text-gray-300 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          color: var(--color-gray-300);
-        }
-      }
-    }
-  }
 }
 @layer theme, base, components, utilities;
 @layer theme;
@@ -758,6 +724,30 @@
     }
   }
 }
+.btn-text {
+  font-size: var(--text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height));
+  --tw-leading: calc(var(--spacing) * 6);
+  line-height: calc(var(--spacing) * 6);
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-gray-900);
+  &:hover {
+    @media (hover: hover) {
+      color: var(--color-gray-700);
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-gray-100);
+  }
+  @media (prefers-color-scheme: dark) {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-300);
+      }
+    }
+  }
+}
 .container-default {
   margin-inline: auto;
   max-width: var(--container-7xl);