diff --git a/apps/docs/app/styles/geistdocs.css b/apps/docs/app/styles/geistdocs.css
index 0fcd49a9..4c7ceda3 100644
--- a/apps/docs/app/styles/geistdocs.css
+++ b/apps/docs/app/styles/geistdocs.css
@@ -14,6 +14,18 @@
   html {
     text-rendering: optimizelegibility;
   }
+
+  /* Shiki dark mode styles */
+  html.dark .shiki,
+  html.dark .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* Optional, if you also want font styles */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+
   body {
     @apply min-h-dvh;
   }
diff --git a/apps/docs/components/custom/preview.tsx b/apps/docs/components/custom/preview.tsx
index 2028694e..56071710 100644
--- a/apps/docs/components/custom/preview.tsx
+++ b/apps/docs/components/custom/preview.tsx
@@ -100,7 +100,7 @@ export const Preview = async ({ path, className }: ComponentPreviewProps) => {
       </CodeBlockTab>
       <CodeBlockTab className="p-0" value="code">
         <div className="not-prose h-[600px] overflow-y-auto">
-          <CodeBlock>
+          <CodeBlock className="pt-0">
             {/** biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed." */}
             <pre dangerouslySetInnerHTML={{ __html: highlightedCode }} />
           </CodeBlock>