diff --git a/docs/ensnode.io/src/components/atoms/ENSNodeServiceCard.astro b/docs/ensnode.io/src/components/atoms/ENSNodeServiceCard.astro
index 101c9451f..2ba0ab67c 100644
--- a/docs/ensnode.io/src/components/atoms/ENSNodeServiceCard.astro
+++ b/docs/ensnode.io/src/components/atoms/ENSNodeServiceCard.astro
@@ -10,7 +10,7 @@ interface ENSNodeServiceCardProps {
 const { title, description, href } = Astro.props as ENSNodeServiceCardProps;
 ---
 
-<a href={href} class="not-content group w-full h-fit min-h-[100px] flex flex-row justify-between items-center gap-5 border border-gray-200 hover:border-gray-300 hover:shadow-xs cursor-pointer rounded-2xl overflow-hidden p-4">
+<a href={href} class="not-content group w-full h-fit min-h-[100px] flex flex-row justify-between items-center gap-5 border border-gray-200 hover:border-[#4a5c63] hover:shadow cursor-pointer rounded-2xl overflow-hidden p-4 transition-all duration-200">
     <div class="w-fit flex flex-row justify-start items-center gap-5">
         <slot name="icon"/>
         <div class="not-content w-full h-fit flex flex-col justify-start items-start gap-2">
@@ -18,5 +18,5 @@ const { title, description, href } = Astro.props as ENSNodeServiceCardProps;
             <p class="not-content text-base leading-normal text-[var(--sl-color-text)]">{description}</p>
         </div>
     </div>
-    <Icon name="lucide:chevron-right" class="not-content h-10 w-10 shrink-0 text-gray-200 group-hover:text-gray-300" />
+    <Icon name="lucide:chevron-right" class="not-content h-10 w-10 shrink-0 text-gray-200 group-hover:text-[#4a5c63]" />
 </a>
diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx
index 3ff146694..025d39653 100644
--- a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx
+++ b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx
@@ -7,6 +7,7 @@ sidebar:
   order: 2
 ---
 
+import { Icon } from "@astrojs/starlight/components";
 import EnskitExampleInteractivePlayground from "@components/organisms/EnskitExampleInteractivePlayground";
 import HostedInstanceSdkVersionWarning from "@components/molecules/HostedInstanceSdkVersionWarning.astro";
 
@@ -26,4 +27,7 @@ StackBlitz is having problems with embedded WebContainer projects as of **May 19
 
 <EnskitExampleInteractivePlayground client:load />
 
-[Back to enskit overview](/docs/integrate/integration-options/enskit)
+<a class="group w-fit flex flex-row justify-start items-center gap-2 mt-4" href="/docs/integrate/integration-options/enskit">
+  <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-white)] transition-colors duration-200" />
+  <p class="not-content m-0 underline underline-offset-4 group-hover:underline-offset-2 transition-all duration-200">Back to enskit overview</p>
+</a>
diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx
index 3f9940c0f..fa6b37c1d 100644
--- a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx
+++ b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx
@@ -7,6 +7,7 @@ sidebar:
   order: 2
 ---
 
+import { Icon } from "@astrojs/starlight/components";
 import EnssdkExampleInteractivePlayground from "@components/organisms/EnssdkExampleInteractivePlayground";
 import HostedInstanceSdkVersionWarning from "@components/molecules/HostedInstanceSdkVersionWarning.astro";
 
@@ -26,4 +27,7 @@ StackBlitz is having problems with embedded WebContainer projects as of **May 19
 
 <EnssdkExampleInteractivePlayground client:load height="700" />
 
-[Back to enssdk overview](/docs/integrate/integration-options/enssdk)
+<a class="group w-fit flex flex-row justify-start items-center gap-2 mt-4" href="/docs/integrate/integration-options/enssdk">
+  <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-white)] transition-colors duration-200" />
+  <p class="not-content m-0 underline underline-offset-4 group-hover:underline-offset-2 transition-all duration-200">Back to enssdk overview</p>
+</a>
diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css
index 584e8e0c6..dd3f4aef8 100644
--- a/docs/ensnode.io/src/styles/starlight.css
+++ b/docs/ensnode.io/src/styles/starlight.css
@@ -82,7 +82,7 @@
 /* Docked sidebar: narrow peek strip on desktop; expands on hover or keyboard focus within nav */
 @media (min-width: 50rem) {
   .page[data-sidebar-docked] {
-    --sl-sidebar-docked-peek: 1rem;
+    --sl-sidebar-docked-peek: 4rem;
     /* Match Starlight splash / no-sidebar content width (default with sidebar is 45rem). */
     --sl-content-width: 67.5rem;
   }
@@ -94,7 +94,6 @@
   .page[data-sidebar-docked] nav.sidebar {
     position: fixed;
     inset-block: var(--sl-nav-height) 0;
-    inset-inline-start: 0;
     z-index: var(--sl-z-index-menu);
     width: var(--sl-sidebar-docked-peek);
     overflow: hidden;
@@ -116,24 +115,24 @@
     border-inline-end: none;
   }
 
-  .page[data-sidebar-docked] nav.sidebar::after {
-    content: "›";
-    position: absolute;
-    inset-block: 0;
-    inset-inline-end: 0;
-    width: var(--sl-sidebar-docked-peek);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--sl-color-gray-3);
-    font-size: 1.125rem;
-    line-height: 1;
-    pointer-events: none;
+  /* Docked + collapsed: show only the top-level topic icons */
+  .page[data-sidebar-docked] nav.sidebar:not(:hover):not(:focus-within)
+    .sidebar-content
+    > :not(.starlight-sidebar-topics) {
+    display: none;
+  }
+
+  .page[data-sidebar-docked]
+    nav.sidebar:not(:hover):not(:focus-within)
+    .starlight-sidebar-topics-icon
+    + div {
+    display: none;
   }
 
-  .page[data-sidebar-docked] nav.sidebar:hover::after,
-  .page[data-sidebar-docked] nav.sidebar:focus-within::after {
-    opacity: 0;
+  /* Docked + collapsed: Highlight only the icon of the current topic */
+  .page[data-sidebar-docked] nav.sidebar:not(:hover):not(:focus-within)
+    a.starlight-sidebar-topics-current {
+    background-color: transparent !important;
   }
 }
 
@@ -308,13 +307,36 @@ a[rel="prev"]:hover {
     background-color 0.2s ease-in-out;
 }
 
-/* Only apply hover effects to non-selected items */
-#starlight__sidebar a:not([aria-current="page"]):hover {
+/* Only apply hover effects to: 
+* * non-selected items 
+* * expandable items (in all states), including nested ones
+*/
+#starlight__sidebar a:not([aria-current="page"]):hover,
+#starlight__sidebar details details > summary:hover,
+#starlight__sidebar details > summary:hover {
   background-color: rgba(128, 128, 128, 0.1);
   transform: translateX(2px);
   border-radius: 6px;
 }
 
+/** Additional styling required for the
+ * expandable items in the sidebar
+ */
+#starlight__sidebar details details > summary:hover {
+  & span {
+    color: var(--sl-color-white);
+  }
+}
+
+#starlight__sidebar details details > summary,
+#starlight__sidebar details > summary {
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    color: var(--sl-color-white);
+  }
+}
+
 a.starlight-sidebar-topics-current {
   background-color: rgb(0, 128, 188) !important;
   color: white !important;
@@ -332,13 +354,18 @@ a.starlight-sidebar-topics-current .starlight-sidebar-topics-icon {
     box-shadow 0.2s ease-in-out;
 }
 
-/* Make sure that all non-top-level sidebar items are not enlarged and non-bold */
+/* Make sure that all non-top-level sidebar items are:
+ * * not enlarged
+ * * not bolded 
+ * * the same color as the rest of the sidebar text
+ */
 ul.top-level details details > summary .group-label span {
   @media (min-width: 50rem) {
     font-size: var(--sl-text-sm);
   }
 
   font-weight: normal;
+  color: var(--sl-color-gray-2);
 }
 
 /* Make sure that social icons in the sidebar do not move on hover */