diff --git a/docs/ensnode.io/src/components/atoms/ENSAdminCTAButton.astro b/docs/ensnode.io/src/components/atoms/ENSAdminCTAButton.astro
new file mode 100644
index 000000000..49a57e379
--- /dev/null
+++ b/docs/ensnode.io/src/components/atoms/ENSAdminCTAButton.astro
@@ -0,0 +1,23 @@
+---
+import ENSAdminLogoDark from "@components/atoms/logos/astro/ENSAdminLogoDark.astro";
+import cc from "classcat";
+
+interface ENSAdminCTAButtonProps {
+  ensAdminHref: string;
+  text: string;
+}
+
+const { ensAdminHref, text } = Astro.props as ENSAdminCTAButtonProps;
+
+const styles =
+  "w-fit inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-lg bg-[var(--sl-color-text-accent)] p-1.5 pr-2 text-sm font-medium text-[var(--sl-color-black)] transition-colors hover:bg-[var(--sl-color-accent-high)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--sl-color-text-accent)]";
+---
+
+<a
+  class={cc([styles, "no-underline"])}
+  href={ensAdminHref}
+  target="_blank"
+  rel="noopener noreferrer">
+  <ENSAdminLogoDark className="h-5 w-auto shrink-0" />
+  {text}
+</a>
diff --git a/docs/ensnode.io/src/components/molecules/HostedEnsNodeInstance.astro b/docs/ensnode.io/src/components/molecules/HostedEnsNodeInstance.astro
index d7755f133..01fb9211b 100644
--- a/docs/ensnode.io/src/components/molecules/HostedEnsNodeInstance.astro
+++ b/docs/ensnode.io/src/components/molecules/HostedEnsNodeInstance.astro
@@ -1,5 +1,5 @@
 ---
-import ENSAdminLogoDark from "@components/atoms/logos/astro/ENSAdminLogoDark.astro";
+import ENSAdminCTAButton from "@components/atoms/ENSAdminCTAButton.astro";
 import { ACTIVE_OMNIGRAPH_VERSION } from "@data/omnigraph-examples/active";
 
 const { instanceURL, connectWithENSAdminURL, namespace, ensVersions, plugins } = Astro.props;
@@ -17,17 +17,9 @@ const hostedEnsNodeVersion = ACTIVE_OMNIGRAPH_VERSION;
           class="sl-markdown-content underline underline-offset-4 hover:underline-offset-2 transition-[text-underline-offset] duration-200"
           href={instanceURL}>{instanceURL}</a
         >
-        <a
-          class="not-content w-fit open-in-ensadmin flex flex-row flex-nowrap justify-start items-center gap-1 min-[400px]:gap-2 transition-all button-as-child bg-[var(--sl-color-accent)]
-                hover:bg-[var(--sl-color-accent-high)] pl-1 pr-2 py-1 min-[400px]:pl-2 min-[400px]:pr-3 min-[400px]:py-2 rounded-lg"
-          target="_blank"
-          rel="noopener noreferrer"
-          href={connectWithENSAdminURL}>
-          <ENSAdminLogoDark className="h-6.5 w-auto shrink-0" />
-          <p class="text-[var(--sl-color-black)] text-xs min-[400px]:text-base font-normal">
-            Connect with ENSAdmin
-          </p>
-        </a>
+        <div class="not-content">
+          <ENSAdminCTAButton ensAdminHref={connectWithENSAdminURL} text="Connect with ENSAdmin" />
+        </div>
       </td>
     </tr>
     <tr>
diff --git a/docs/ensnode.io/src/components/molecules/omnigraph-static-example/StaticExampleActionBar.astro b/docs/ensnode.io/src/components/molecules/omnigraph-static-example/StaticExampleActionBar.astro
index 3f806619f..b074cc0b1 100644
--- a/docs/ensnode.io/src/components/molecules/omnigraph-static-example/StaticExampleActionBar.astro
+++ b/docs/ensnode.io/src/components/molecules/omnigraph-static-example/StaticExampleActionBar.astro
@@ -1,7 +1,7 @@
 ---
 import type { ENSNamespaceId } from "@ensnode/ensnode-sdk";
 
-import ENSAdminLogoDark from "@components/atoms/logos/astro/ENSAdminLogoDark.astro";
+import ENSAdminCTAButton from "@components/atoms/ENSAdminCTAButton.astro";
 import StackBlitzLogo from "@components/atoms/logos/astro/StackBlitzLogo.astro";
 
 import StaticExamplePlaygroundHint from "./StaticExamplePlaygroundHint.astro";
@@ -20,20 +20,13 @@ const { variant, adminUrl, hostedInstanceDocUrl, hostedInstanceNamespace, static
 const actionBarClass =
   "flex flex-wrap items-center gap-3 border-b border-black/[0.06] bg-[var(--sl-color-gray-6)] px-4 py-4 dark:border-white/[0.08] dark:bg-[var(--sl-color-gray-7)] md:px-5";
 const actionButtonClass =
-  "inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-lg bg-[var(--sl-color-text-accent)] p-1.5 pr-2 text-sm font-semibold text-[var(--sl-color-black)] transition-opacity hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--sl-color-text-accent)]";
+  "inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-lg bg-[var(--sl-color-text-accent)] p-1.5 pr-2 text-sm font-medium text-[var(--sl-color-black)] transition-colors hover:bg-[var(--sl-color-accent-high)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--sl-color-text-accent)]";
 ---
 
 <div class={actionBarClass}>
   {
     variant === "ensadmin" ? (
-      <a
-        class={`${actionButtonClass} no-underline`}
-        href={adminUrl}
-        target="_blank"
-        rel="noopener noreferrer">
-        <ENSAdminLogoDark className="h-5 w-auto shrink-0" />
-        Run in ENSAdmin
-      </a>
+      adminUrl && <ENSAdminCTAButton ensAdminHref={adminUrl} text="Run in ENSAdmin" />
     ) : (
       <button type="button" class={actionButtonClass} data-static-example-id={staticExampleId}>
         <StackBlitzLogo className="h-5 w-auto shrink-0" />
diff --git a/docs/ensnode.io/src/components/molecules/omnigraph-static-example/StaticExamplePlaygroundHint.astro b/docs/ensnode.io/src/components/molecules/omnigraph-static-example/StaticExamplePlaygroundHint.astro
index b6ca81776..17d8908e7 100644
--- a/docs/ensnode.io/src/components/molecules/omnigraph-static-example/StaticExamplePlaygroundHint.astro
+++ b/docs/ensnode.io/src/components/molecules/omnigraph-static-example/StaticExamplePlaygroundHint.astro
@@ -10,7 +10,7 @@ interface Props {
 const { variant, hostedInstanceDocUrl, hostedInstanceNamespace } = Astro.props;
 
 const hostedInstanceLinkClass =
-  "text-sm font-semibold text-[var(--sl-color-gray-1)] underline decoration-[var(--sl-color-gray-4)] underline-offset-2 transition-colors hover:text-[var(--sl-color-text-accent)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--sl-color-text-accent)]";
+  "text-sm font-semibold text-[var(--sl-color-accent)] underline underline-offset-4 hover:underline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--sl-color-text-accent)] transition-[text-underline-offset] duration-200";
 ---
 
 <span class="hidden text-xs leading-snug text-[var(--sl-color-gray-3)] sm:block">
diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css
index 15303569b..cdd597730 100644
--- a/docs/ensnode.io/src/styles/starlight.css
+++ b/docs/ensnode.io/src/styles/starlight.css
@@ -337,12 +337,6 @@ starlight-toc a:hover {
   }
 }
 
-.open-in-ensadmin {
-  @media screen and (max-width: 400px) {
-    font-size: 14px;
-  }
-}
-
 /* Enhance hover and selected states for sidebar items */
 #starlight__sidebar a {
   transition:
@@ -482,6 +476,10 @@ starlight-tabs ul[role="tablist"] {
 
   & a {
     color: var(--aside-text-color, var(--aside-color));
+
+    &:hover {
+      color: var(--aside-text-color, var(--aside-color));
+    }
   }
 
   & code {