diff --git a/documentation/src/components/server-card.tsx b/documentation/src/components/server-card.tsx
index e7b3fce54f1a..779b47f71ec9 100644
--- a/documentation/src/components/server-card.tsx
+++ b/documentation/src/components/server-card.tsx
@@ -11,15 +11,15 @@ export function ServerCard({ server }: { server: MCPServer }) {
   const [isCommandVisible, setIsCommandVisible] = useState(false);
 
   return (
-    <div className="server-card">
-      <div className="card-glow"></div>
-      <div className="card">
-        <div className="card-header">
-          <div className="card-header-content">
-            <Link
-              to={`/extensions/detail?id=${server.id}`}
-              className="extension-title"
-            >
+    <Link
+      to={`/extensions/detail?id=${server.id}`}
+      className="extension-title h-full"
+    >
+      <div className="server-card interactive w-full h-full">
+        <div className="card-glow"></div>
+        <div className="card">
+          <div className="card-header">
+            <div className="card-header-content">
               <svg
                 className="extension-icon"
                 width="13"
@@ -41,94 +41,99 @@ export function ServerCard({ server }: { server: MCPServer }) {
                   />
                 </g>
               </svg>
-              <div className="home-page-server-name">
-                {server.name}
-              </div>
-            </Link>
+              <div className="home-page-server-name">{server.name}</div>
+            </div>
           </div>
-        </div>
-        <div className="card-content">
-          <div>
+          <div className="card-content">
             <div>
-              <p className="card-description">{server.description}</p>
-            </div>
+              <div>
+                <p className="card-description">{server.description}</p>
+              </div>
 
-            <div className="py-4">
-              {server.is_builtin ? (
-                <div className="flex items-center gap-2">
-                  <Info style={{ width: '12px', height: '12px' }} className="text-textSubtle shrink-0" />
-                  <span style={{ fontSize: '12px' }} className="text-textSubtle leading-normal">Can be enabled in the goose settings page</span>
-                </div>
-              ) : (
-                <>
-                  <button
-                    onClick={() => setIsCommandVisible(!isCommandVisible)}
-                    className="command-toggle"
-                  >
-                    <Terminal className="h-4 w-4" />
-                    <h4 className="mx-2">Command</h4>
-                    <ChevronRight
-                      className={`ml-auto transition-transform ${
-                        isCommandVisible ? "rotate-90" : ""
-                      }`}
+              <div className="py-4">
+                {server.is_builtin ? (
+                  <div className="flex items-center gap-2">
+                    <Info
+                      style={{ width: "12px", height: "12px" }}
+                      className="text-textSubtle shrink-0"
                     />
-                  </button>
-                  <AnimatePresence>
-                    {isCommandVisible && (
-                      <motion.div
-                        className="command-content"
-                        initial={{ opacity: 0, translateY: -20 }}
-                        animate={{ opacity: 1, translateY: 0 }}
-                        exit={{
-                          opacity: 0,
-                          translateY: -20,
-                          transition: { duration: 0.1 },
-                        }}
-                      >
-                        <code>
-                          {`goose session --with-extension "${server.command}"`}
-                        </code>
-                      </motion.div>
-                    )}
-                  </AnimatePresence>
-                </>
-              )}
+                    <span
+                      style={{ fontSize: "12px" }}
+                      className="text-textSubtle leading-normal"
+                    >
+                      Can be enabled in the goose settings page
+                    </span>
+                  </div>
+                ) : (
+                  <>
+                    <button
+                      onClick={() => setIsCommandVisible(!isCommandVisible)}
+                      className="command-toggle"
+                    >
+                      <Terminal className="h-4 w-4" />
+                      <h4 className="mx-2">Command</h4>
+                      <ChevronRight
+                        className={`ml-auto transition-transform ${
+                          isCommandVisible ? "rotate-90" : ""
+                        }`}
+                      />
+                    </button>
+                    <AnimatePresence>
+                      {isCommandVisible && (
+                        <motion.div
+                          className="command-content"
+                          initial={{ opacity: 0, translateY: -20 }}
+                          animate={{ opacity: 1, translateY: 0 }}
+                          exit={{
+                            opacity: 0,
+                            translateY: -20,
+                            transition: { duration: 0.1 },
+                          }}
+                        >
+                          <code>
+                            {`goose session --with-extension "${server.command}"`}
+                          </code>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </>
+                )}
+              </div>
             </div>
-          </div>
 
-          <div className="card-footer">
-            <a
-              href={server.link}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="card-stats"
-            >
-              <Star className="h-4 w-4" />
-              <span>{server.githubStars} on Github</span>
-            </a>
-            <div className="card-action">
-              {server.is_builtin ? (
-                <div
-                  className="built-in-badge"
-                  title="This extension is built into goose and can be enabled in the settings page"
-                >
-                  Built-in
-                </div>
-              ) : (
-                <a
-                  href={getGooseInstallLink(server)}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="install-button"
-                >
-                  <span>Install</span>
-                  <Download className="h-4 w-4" />
-                </a>
-              )}
+            <div className="card-footer">
+              <Link
+                to={server.link}
+                className="card-stats"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <Star className="h-4 w-4" />
+                <span>{server.githubStars} on Github</span>
+              </Link>
+              <div className="card-action">
+                {server.is_builtin ? (
+                  <div
+                    className="built-in-badge"
+                    title="This extension is built into goose and can be enabled in the settings page"
+                  >
+                    Built-in
+                  </div>
+                ) : (
+                  <a
+                    href={getGooseInstallLink(server)}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="install-button"
+                  >
+                    <span>Install</span>
+                    <Download className="h-4 w-4" />
+                  </a>
+                )}
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </Link>
   );
-}
\ No newline at end of file
+}
diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css
index 5fb4d9e9e954..dcb36098a045 100644
--- a/documentation/src/css/custom.css
+++ b/documentation/src/css/custom.css
@@ -48,7 +48,7 @@
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-  
+
   /* Additional Arcade color system variables */
   --background-app: var(--constant-white);
   --background-prominent: var(--grey-80);
@@ -181,8 +181,7 @@
   /* video adnomition */
   --ifm-color-video-alert-contrast-background: #336e62;
   --ifm-color-video-alert-contrast-foreground: rgb(216 251 216);
-  --ifm-color-video-alert-border: #99d5c5
-  ;
+  --ifm-color-video-alert-border: #99d5c5;
 }
 
 /* overrides */
@@ -274,8 +273,59 @@ html[data-theme="light"] .hide-in-light {
 }
 
 .alert--video {
-  --ifm-alert-background-color: var(--ifm-color-video-alert-contrast-background);
+  --ifm-alert-background-color: var(
+    --ifm-color-video-alert-contrast-background
+  );
   --ifm-alert-background-color-highlight: rgba(84, 199, 236, 0.15);
-  --ifm-alert-foreground-color: var(--ifm-color-video-alert-contrast-foreground);
+  --ifm-alert-foreground-color: var(
+    --ifm-color-video-alert-contrast-foreground
+  );
   --ifm-alert-border-color: var(--ifm-color-video-alert-border);
-}
\ No newline at end of file
+}
+
+.navbar {
+  border-bottom: 1px solid var(--border-divider);
+}
+
+.navbar__item {
+  display: flex;
+  align-items: center;
+}
+
+.iconExternalLink_nPIU {
+  margin-left: 8px !important;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+.container {
+  width: 100%;
+}
diff --git a/documentation/src/css/extensions.css b/documentation/src/css/extensions.css
index 3336b897ecee..485fecb0b04d 100644
--- a/documentation/src/css/extensions.css
+++ b/documentation/src/css/extensions.css
@@ -45,7 +45,7 @@
   transition: all 0.3s ease;
 }
 
-.server-card:hover {
+.server-card.interactive:hover {
   background-color: transparent;
   transform: translateY(-2px);
 }
@@ -63,7 +63,7 @@
   top: -150px;
   left: -50px;
   transform-origin: center;
-  background: linear-gradient(45deg, #13BBAF, #FF4F00);
+  background: linear-gradient(45deg, #13bbaf, #ff4f00);
   animation: rotate 6s linear infinite;
   z-index: -1;
   transition: opacity 0.2s;
@@ -178,7 +178,8 @@
 }
 
 .command-content code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
   font-size: 0.875rem;
 }
 
@@ -240,7 +241,7 @@
 }
 
 .install-button:hover svg {
-  color: #FA5204;
+  color: #fa5204;
 }
 
 .built-in-badge {
@@ -274,16 +275,16 @@
 }
 
 /* Dark mode adjustments */
-html[data-theme='dark'] .card {
+html[data-theme="dark"] .card {
   background-color: var(--background-app);
   border-color: var(--border-subtle);
   box-shadow: none;
 }
 
-html[data-theme='dark'] .command-content {
+html[data-theme="dark"] .command-content {
   background-color: rgba(255, 255, 255, 0.05);
 }
 
-html[data-theme='dark'] .built-in-badge {
+html[data-theme="dark"] .built-in-badge {
   background-color: rgba(255, 255, 255, 0.1);
-}
\ No newline at end of file
+}
diff --git a/documentation/src/css/tailwind.css b/documentation/src/css/tailwind.css
index bd6213e1dfe6..8619333c1f2e 100644
--- a/documentation/src/css/tailwind.css
+++ b/documentation/src/css/tailwind.css
@@ -1,3 +1,75 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* start arcade colors */
+    --constant-white: #ffffff;
+    --constant-black: #000000;
+    --grey-10: #101010;
+    --grey-20: #1e1e1e;
+    --grey-50: #666666;
+    --grey-60: #959595;
+    --grey-80: #cccccc;
+    --grey-85: #dadada;
+    --grey-90: #e8e8e8;
+    --grey-95: #f0f0f0;
+    --dark-grey-15: #1a1a1a;
+    --dark-grey-25: #232323;
+    --dark-grey-30: #2a2a2a;
+    --dark-grey-40: #333333;
+    --dark-grey-45: #595959;
+    --dark-grey-60: #878787;
+    --dark-grey-90: #e1e1e1;
+
+    --background-app: var(--constant-white);
+    --background-prominent: var(--grey-80);
+    --background-standard: var(--grey-90);
+    --background-subtle: var(--grey-95);
+
+    --border-divider: var(--grey-90);
+    --border-inverse: var(--constant-white);
+    --border-prominent: var(--grey-10);
+    --border-standard: var(--grey-60);
+    --border-subtle: var(--grey-90);
+
+    --icon-disabled: var(--grey-60);
+    --icon-extra-subtle: var(--grey-60);
+    --icon-inverse: var(--constant-white);
+    --icon-prominent: var(--grey-10);
+    --icon-standard: var(--grey-20);
+    --icon-subtle: var(--grey-50);
+
+    --text-placeholder: var(--grey-60);
+    --text-prominent: var(--grey-10);
+    --text-standard: var(--grey-20);
+    --text-subtle: var(--grey-50);
+
+    &.dark {
+      --background-app: var(--constant-black);
+      --background-prominent: var(--dark-grey-40);
+      --background-standard: var(--dark-grey-25);
+      --background-subtle: var(--dark-grey-15);
+
+      --border-divider: var(--dark-grey-25);
+      --border-inverse: var(--constant-black);
+      --border-prominent: var(--constant-white);
+      --border-standard: var(--dark-grey-45);
+      --border-subtle: var(--dark-grey-25);
+
+      --icon-disabled: var(--dark-grey-45);
+      --icon-extra-subtle: var(--dark-grey-45);
+      --icon-inverse: var(--constant-black);
+      --icon-prominent: var(--constant-white);
+      --icon-standard: var(--dark-grey-90);
+      --icon-subtle: var(--dark-grey-60);
+
+      --text-placeholder: var(--dark-grey-45);
+      --text-prominent: var(--constant-white);
+      --text-standard: var(--dark-grey-90);
+      --text-subtle: var(--dark-grey-60);
+    }
+    /* end arcade colors */
+  }
+}
diff --git a/documentation/src/pages/extensions/detail.tsx b/documentation/src/pages/extensions/detail.tsx
index 665aa91d04d5..32fadf02d743 100644
--- a/documentation/src/pages/extensions/detail.tsx
+++ b/documentation/src/pages/extensions/detail.tsx
@@ -3,11 +3,11 @@ import { Download, Terminal, Star, ArrowLeft, Info } from "lucide-react";
 import { Button } from "@site/src/components/ui/button";
 import { Badge } from "@site/src/components/ui/badge";
 import { getGooseInstallLink } from "@site/src/utils/install-links";
-import { useLocation } from '@docusaurus/router';
+import { useLocation } from "@docusaurus/router";
 import { useEffect, useState } from "react";
 import type { MCPServer } from "@site/src/types/server";
 import { fetchMCPServers } from "@site/src/utils/mcp-servers";
-import Link from '@docusaurus/Link';
+import Link from "@docusaurus/Link";
 
 function ExtensionDetail({ server }: { server: MCPServer }) {
   return (
@@ -28,7 +28,6 @@ function ExtensionDetail({ server }: { server: MCPServer }) {
             </div>
 
             <div className="server-card flex-1">
-              <div className="card-glow"></div>
               <div className="card p-8">
                 <div className="card-header mb-6">
                   <div className="flex items-center gap-4">
@@ -45,12 +44,16 @@ function ExtensionDetail({ server }: { server: MCPServer }) {
 
                 <div className="card-content space-y-6">
                   <div>
-                    <p className="text-xl text-textSubtle m-0">{server.description}</p>
+                    <p className="text-xl text-textSubtle m-0">
+                      {server.description}
+                    </p>
                   </div>
 
                   {server.installation_notes && (
                     <div>
-                      <p className="text-md text-textSubtle m-0">{server.installation_notes}</p>
+                      <p className="text-md text-textSubtle m-0">
+                        {server.installation_notes}
+                      </p>
                     </div>
                   )}
 
@@ -79,7 +82,9 @@ function ExtensionDetail({ server }: { server: MCPServer }) {
 
                   {server.environmentVariables && (
                     <div className="space-y-4">
-                      <h2 className="text-lg font-medium text-textStandard m-0">Environment Variables</h2>
+                      <h2 className="text-lg font-medium text-textStandard m-0">
+                        Environment Variables
+                      </h2>
                       {server.environmentVariables.length > 0 ? (
                         <div>
                           {server.environmentVariables.map((env) => (
@@ -87,7 +92,9 @@ function ExtensionDetail({ server }: { server: MCPServer }) {
                               key={env.name}
                               className="border-b border-borderSubtle py-4 first:pt-0 last:border-0"
                             >
-                              <div className="text-sm text-textStandard font-medium">{env.name}</div>
+                              <div className="text-sm text-textStandard font-medium">
+                                {env.name}
+                              </div>
                               <div className="text-textSubtle text-sm mt-1">
                                 {env.description}
                               </div>
@@ -162,7 +169,7 @@ export default function DetailPage(): JSX.Element {
         const servers = await fetchMCPServers();
         // Get the ID from the query parameter
         const params = new URLSearchParams(location.search);
-        const id = params.get('id');
+        const id = params.get("id");
         if (!id) {
           setError("No extension ID provided");
           return;
@@ -236,7 +243,9 @@ export default function DetailPage(): JSX.Element {
               </div>
               <div className="server-card flex-1">
                 <div className="card p-8">
-                  <div className="text-red-500">{error || "Extension not found"}</div>
+                  <div className="text-red-500">
+                    {error || "Extension not found"}
+                  </div>
                 </div>
               </div>
             </div>
@@ -247,4 +256,4 @@ export default function DetailPage(): JSX.Element {
   }
 
   return <ExtensionDetail server={server} />;
-}
\ No newline at end of file
+}
diff --git a/documentation/src/pages/extensions/index.tsx b/documentation/src/pages/extensions/index.tsx
index fc8e9ca65973..85772c188a55 100644
--- a/documentation/src/pages/extensions/index.tsx
+++ b/documentation/src/pages/extensions/index.tsx
@@ -26,7 +26,7 @@ export default function HomePage() {
           ? await searchMCPServers(trimmedQuery)
           : await fetchMCPServers();
 
-        console.log('Loaded servers:', results);
+        console.log("Loaded servers:", results);
         setServers(results);
       } catch (err) {
         const errorMessage =
@@ -45,15 +45,19 @@ export default function HomePage() {
 
   return (
     <Layout>
-      <div className="container mx-auto px-4 pb-24">
+      <div className="container mx-auto px-4 p-24">
         <div className="pb-16">
-          <h1 className="text-[64px] font-medium">Browse Extensions</h1>
-          <p>Your central directory for discovering and installing extensions.</p>
+          <h1 className="text-[64px] font-medium text-textProminent">
+            Browse Extensions
+          </h1>
+          <p className="text-textProminent">
+            Your central directory for discovering and installing extensions.
+          </p>
         </div>
 
         <div className="search-container">
           <input
-            className="search-input"
+            className="bg-bgApp font-light text-textProminent placeholder-textPlaceholder w-full px-3 py-3 text-[40px] leading-[52px] border-b border-borderSubtle focus:outline-none focus:ring-purple-500 focus:border-borderProminent caret-[#FF4F00] pl-0"
             placeholder="Search for extensions"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
@@ -64,7 +68,7 @@ export default function HomePage() {
           <div className="p-4 bg-red-50 text-red-600 rounded-md">{error}</div>
         )}
 
-        <section className="pt-8">
+        <section className="">
           <div className={`${searchQuery ? "pb-2" : "pb-8"}`}>
             <p className="text-gray-600">
               {searchQuery
@@ -111,4 +115,4 @@ export default function HomePage() {
       </div>
     </Layout>
   );
-}
\ No newline at end of file
+}
diff --git a/documentation/tailwind.config.js b/documentation/tailwind.config.js
index f21ed4b32cb0..b568a8c0b8d9 100644
--- a/documentation/tailwind.config.js
+++ b/documentation/tailwind.config.js
@@ -24,9 +24,9 @@ module.exports = {
         iconSubtle: "var(--icon-subtle)",
       },
       fontFamily: {
-        sans: ['"Cash Sans"', 'sans-serif'],
+        sans: ['"Cash Sans"', "sans-serif"],
       },
     },
   },
   plugins: [],
-};
\ No newline at end of file
+};