diff --git a/CHANGELOG.md b/CHANGELOG.md
index f507a44..f78eb63 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # create-docubase
 
+## 1.1.1
+
+### Patch Changes
+
+- 707a3c8: UI Update website
+
+## 1.1.0
+
+### Minor Changes
+
+- 6420e72: Add dark mode support with theme toggle functionality
+
 ## 1.0.2
 
 ### Patch Changes
diff --git a/astro.config.mjs b/astro.config.mjs
index ea33506..529bc68 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -34,7 +34,6 @@ export default defineConfig({
     rehypePlugins: [rehypeSlug],
     shikiConfig: {
       theme: 'github-dark',
-      wrap: true,
     },
   },
 });
\ No newline at end of file
diff --git a/package.json b/package.json
index 62ff963..eabbd67 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-docubase",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "Create a new DocuBase documentation site",
   "type": "module",
   "bin": {
diff --git a/template/astro.config.mjs b/template/astro.config.mjs
index 9abaec9..d554a02 100644
--- a/template/astro.config.mjs
+++ b/template/astro.config.mjs
@@ -32,7 +32,6 @@ export default defineConfig({
     rehypePlugins: [rehypeSlug],
     shikiConfig: {
       theme: 'github-dark',
-      wrap: true,
     },
   },
 });
\ No newline at end of file
diff --git a/template/src/components/BlogCard.astro b/template/src/components/BlogCard.astro
index 2630d91..7e6938a 100644
--- a/template/src/components/BlogCard.astro
+++ b/template/src/components/BlogCard.astro
@@ -7,18 +7,18 @@ const { title, description, date, readTime = DEFAULTS.BLOG_CARD.readTime, image,
 
 <a
   href={href}
-  class="flex gap-6 p-4 bg-white border border-gray-200 rounded-2xl hover:border-gray-300 hover:shadow-sm transition-all"
+  class="flex gap-6 p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-sm transition-all"
 >
   {image && (
-    <div class="w-32 h-24 bg-gray-100 rounded-lg shrink-0">
+    <div class="w-32 h-24 bg-gray-100 dark:bg-gray-800 rounded-lg shrink-0">
       <img src={image} alt={title} class="w-full h-full object-cover rounded-lg" />
     </div>
   )}
 
   <div class="flex-1 min-w-0 pt-2">
-    <h3 class="font-semibold text-gray-900 mb-1">{title}</h3>
-    <p class="text-xs text-gray-600 mb-2">{description}</p>
-    <div class="flex items-center gap-3 text-xs text-gray-400">
+    <h3 class="font-semibold text-gray-900 dark:text-white mb-1">{title}</h3>
+    <p class="text-xs text-gray-600 dark:text-gray-400 mb-2">{description}</p>
+    <div class="flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500">
       <span>{date}</span>
       <span class="flex items-center gap-1">
         <iconify-icon icon="mdi:clock-outline" width="14" height="14"></iconify-icon>
@@ -27,7 +27,3 @@ const { title, description, date, readTime = DEFAULTS.BLOG_CARD.readTime, image,
     </div>
   </div>
 </a>
-
-<script>
-  import 'iconify-icon';
-</script>
diff --git a/template/src/components/BottomNav.astro b/template/src/components/BottomNav.astro
index cb118fa..fa1ad22 100644
--- a/template/src/components/BottomNav.astro
+++ b/template/src/components/BottomNav.astro
@@ -20,20 +20,20 @@ const defaultFallbackLinks: NavTarget[] = fallbackLinks || [
 ];
 ---
 
-<div class="bottom-nav pt-8 mt-8 not-prose" style="border-top: 1px solid rgb(229 231 235) !important;">
+<div class="bottom-nav pt-8 mt-8 not-prose border-t border-gray-200 dark:border-gray-700">
   {showProgress && (
-    <div class="mb-4 text-xs font-medium" style="color: rgb(55 65 81) !important;">
+    <div class="mb-4 text-xs font-medium">
       <div class="flex items-center justify-between mb-1.5">
-        <span style="color: rgb(55 65 81) !important;">
+        <span class="text-gray-600 dark:text-gray-400">
           Page {context.currentIndex} of {context.totalInBlock}
           {context.blockTitle && ` in ${context.blockTitle}`}
         </span>
-        <span style="color: rgb(55 65 81) !important;">{Math.round((context.currentIndex / context.totalInBlock) * 100)}% complete</span>
+        <span class="text-gray-600 dark:text-gray-400">{Math.round((context.currentIndex / context.totalInBlock) * 100)}% complete</span>
       </div>
-      <div class="w-full rounded-full h-1" style="background-color: rgb(229 231 235) !important;">
+      <div class="w-full rounded-full h-1 bg-gray-200 dark:bg-gray-700">
         <div
-          class="h-1 rounded-full transition-all duration-300"
-          style={`width: ${(context.currentIndex / context.totalInBlock) * 100}%; background-color: rgb(79 70 229) !important;`}
+          class="h-1 rounded-full transition-all duration-300 bg-indigo-600 dark:bg-indigo-500"
+          style={`width: ${(context.currentIndex / context.totalInBlock) * 100}%;`}
         ></div>
       </div>
     </div>
@@ -44,13 +44,12 @@ const defaultFallbackLinks: NavTarget[] = fallbackLinks || [
       {prev ? (
         <a
           href={prev.href}
-          class="group flex items-center gap-3 px-4 py-3 rounded-lg transition-all"
-          style="border: 1px solid rgb(229 231 235) !important;"
+          class="group flex items-center gap-3 px-4 py-3 rounded-lg transition-all border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
         >
-          <iconify-icon icon="mdi:chevron-left" width="20" height="20" style="color: rgb(17 24 39) !important;" class="shrink-0"></iconify-icon>
+          <iconify-icon icon="mdi:chevron-left" width="20" height="20" class="shrink-0 text-gray-900 dark:text-gray-100"></iconify-icon>
           <div class="flex flex-col">
-            <span class="text-xs" style="color: rgb(55 65 81) !important;">Previous</span>
-            <span class="text-sm font-semibold transition-colors" style="color: rgb(17 24 39) !important;">
+            <span class="text-xs text-gray-600 dark:text-gray-400">Previous</span>
+            <span class="text-sm font-semibold transition-colors text-gray-900 dark:text-gray-100">
               {prev.title}
             </span>
           </div>
@@ -62,16 +61,15 @@ const defaultFallbackLinks: NavTarget[] = fallbackLinks || [
       {next ? (
         <a
           href={next.href}
-          class="group flex items-center gap-3 px-4 py-3 rounded-lg transition-all ml-auto"
-          style="border: 1px solid rgb(229 231 235) !important;"
+          class="group flex items-center gap-3 px-4 py-3 rounded-lg transition-all ml-auto border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
         >
           <div class="flex flex-col text-right">
-            <span class="text-xs" style="color: rgb(55 65 81) !important;">Next</span>
-            <span class="text-sm font-semibold transition-colors" style="color: rgb(17 24 39) !important;">
+            <span class="text-xs text-gray-600 dark:text-gray-400">Next</span>
+            <span class="text-sm font-semibold transition-colors text-gray-900 dark:text-gray-100">
               {next.title}
             </span>
           </div>
-          <iconify-icon icon="mdi:chevron-right" width="20" height="20" style="color: rgb(17 24 39) !important;" class="shrink-0"></iconify-icon>
+          <iconify-icon icon="mdi:chevron-right" width="20" height="20" class="shrink-0 text-gray-900 dark:text-gray-100"></iconify-icon>
         </a>
       ) : (
         <div></div>
@@ -79,27 +77,26 @@ const defaultFallbackLinks: NavTarget[] = fallbackLinks || [
     </nav>
   ) : showFallback ? (
     <div class="text-center py-6">
-      <div class="inline-flex items-center justify-center w-12 h-12 rounded-full mb-3" style="background-color: rgb(224 231 255) !important;">
-        <iconify-icon icon="mdi:check-circle" width="24" height="24" style="color: rgb(79 70 229) !important;"></iconify-icon>
+      <div class="inline-flex items-center justify-center w-12 h-12 rounded-full mb-3 bg-indigo-100 dark:bg-indigo-900/50">
+        <iconify-icon icon="mdi:check-circle" width="24" height="24" class="text-indigo-600 dark:text-indigo-400"></iconify-icon>
       </div>
-      <h3 class="text-lg font-semibold mb-1" style="color: rgb(17 24 39) !important;">
+      <h3 class="text-lg font-semibold mb-1 text-gray-900 dark:text-gray-100">
         You've reached the end!
       </h3>
-      <p class="text-sm mb-4" style="color: rgb(55 65 81) !important;">
+      <p class="text-sm mb-4 text-gray-600 dark:text-gray-400">
         Explore other content to continue your journey
       </p>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-3 max-w-2xl mx-auto">
         {defaultFallbackLinks.map((link) => (
           <a
             href={link.href}
-            class="group p-3 rounded-lg transition-all"
-            style="border: 1px solid rgb(229 231 235) !important;"
+            class="group p-3 rounded-lg transition-all border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
           >
-            <div class="text-sm font-semibold transition-colors mb-0.5" style="color: rgb(17 24 39) !important;">
+            <div class="text-sm font-semibold transition-colors mb-0.5 text-gray-900 dark:text-gray-100">
               {link.title}
             </div>
             {link.description && (
-              <div class="text-xs" style="color: rgb(55 65 81) !important;">
+              <div class="text-xs text-gray-600 dark:text-gray-400">
                 {link.description}
               </div>
             )}
@@ -113,42 +110,21 @@ const defaultFallbackLinks: NavTarget[] = fallbackLinks || [
     <div class="mt-4">
       <a
         href={nextBlock.href}
-        class="group flex items-center gap-3 px-4 py-3 rounded-lg transition-all"
-        style="border: 2px dashed rgb(199 210 254) !important;"
+        class="group flex items-center gap-3 px-4 py-3 rounded-lg transition-all border-2 border-dashed border-indigo-200 dark:border-indigo-800 hover:border-indigo-300 dark:hover:border-indigo-700"
       >
         <div class="flex-1">
-          <div class="text-xs mb-0.5 font-semibold" style="color: rgb(79 70 229) !important;">Up Next</div>
-          <div class="text-sm font-semibold transition-colors" style="color: rgb(17 24 39) !important;">
+          <div class="text-xs mb-0.5 font-semibold text-indigo-600 dark:text-indigo-400">Up Next</div>
+          <div class="text-sm font-semibold transition-colors text-gray-900 dark:text-gray-100">
             {nextBlock.title}
           </div>
           {nextBlock.description && (
-            <div class="text-xs mt-0.5" style="color: rgb(55 65 81) !important;">
+            <div class="text-xs mt-0.5 text-gray-600 dark:text-gray-400">
               {nextBlock.description}
             </div>
           )}
         </div>
-        <iconify-icon icon="mdi:arrow-right" width="20" height="20" style="color: rgb(79 70 229) !important;" class="shrink-0"></iconify-icon>
+        <iconify-icon icon="mdi:arrow-right" width="20" height="20" class="shrink-0 text-indigo-600 dark:text-indigo-400"></iconify-icon>
       </a>
     </div>
   )}
 </div>
-
-<style>
-  .bottom-nav * {
-    color: rgb(17 24 39) !important;
-  }
-  .bottom-nav span,
-  .bottom-nav div:not(.bg-indigo-600):not(.bg-indigo-500) {
-    color: rgb(17 24 39) !important;
-  }
-  .bottom-nav .text-xs {
-    color: rgb(55 65 81) !important;
-  }
-  .bottom-nav a {
-    text-decoration: none !important;
-  }
-</style>
-
-<script>
-  import 'iconify-icon';
-</script>
diff --git a/template/src/components/Breadcrumb.astro b/template/src/components/Breadcrumb.astro
index 837224a..77492a9 100644
--- a/template/src/components/Breadcrumb.astro
+++ b/template/src/components/Breadcrumb.astro
@@ -4,16 +4,16 @@ import type { BreadcrumbProps } from '@/types';
 const { items } = Astro.props as BreadcrumbProps;
 ---
 
-<nav class="relative z-10 flex items-center gap-2 text-sm text-gray-500 mb-4">
+<nav class="relative z-10 flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
   {items.map((item, index) => (
     <>
-      {index > 0 && <span class="text-gray-400">&gt;</span>}
+      {index > 0 && <span class="text-gray-400 dark:text-gray-500">&gt;</span>}
       {item.href ? (
-        <a href={item.href} class="inline-block hover:text-gray-900 transition-colors">
+        <a href={item.href} class="inline-block hover:text-gray-900 dark:hover:text-gray-100 transition-colors">
           {item.label}
         </a>
       ) : (
-        <span class="text-gray-900 font-medium">{item.label}</span>
+        <span class="text-gray-900 dark:text-gray-100 font-medium">{item.label}</span>
       )}
     </>
   ))}
diff --git a/template/src/components/Button.astro b/template/src/components/Button.astro
index be0cded..b2cd49d 100644
--- a/template/src/components/Button.astro
+++ b/template/src/components/Button.astro
@@ -23,16 +23,16 @@ const Tag = href ? 'a' : 'button';
   class:list={['btn', `btn-${variant}`, className]}
 >
   {icon && iconPosition === 'left' && (
-    <iconify-icon icon={icon} class="mr-1.5" width="14" height="14" />
+    <iconify-icon icon={icon} class="mr-2" width="18" height="18" />
   )}
   <slot />
   {icon && iconPosition === 'right' && (
-    <iconify-icon icon={icon} class="ml-1.5" width="14" height="14" />
+    <iconify-icon icon={icon} class="ml-2" width="18" height="18" />
   )}
 </Tag>
 
-<style>
-  .btn :global(p) {
+<style is:global>
+  .btn :is(p) {
     margin-bottom: 0 !important;
   }
 
@@ -45,6 +45,15 @@ const Tag = href ? 'a' : 'button';
     font-weight: 500;
     border-radius: 9999px;
     transition: all 0.2s ease;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .btn iconify-icon {
+    display: inline-flex;
+    flex-shrink: 0;
   }
 
   .btn-primary {
@@ -56,6 +65,14 @@ const Tag = href ? 'a' : 'button';
     background: rgb(8 145 178);
   }
 
+  :global(html.dark) .btn-primary {
+    background: rgb(8 145 178);
+  }
+
+  :global(html.dark) .btn-primary:hover {
+    background: rgb(6 182 212);
+  }
+
   .btn-secondary {
     background: rgb(229 231 235);
     color: rgb(17 24 39);
@@ -65,6 +82,15 @@ const Tag = href ? 'a' : 'button';
     background: rgb(209 213 219);
   }
 
+  :global(html.dark) .btn-secondary {
+    background: rgb(55 65 81);
+    color: rgb(243 244 246);
+  }
+
+  :global(html.dark) .btn-secondary:hover {
+    background: rgb(75 85 99);
+  }
+
   .btn-glass {
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(12px);
@@ -83,8 +109,21 @@ const Tag = href ? 'a' : 'button';
       0 6px 20px rgba(0, 0, 0, 0.12),
       inset 0 1px 0 rgba(255, 255, 255, 0.5);
   }
-</style>
 
-<script>
-  import 'iconify-icon';
-</script>
+  :global(html.dark) .btn-glass {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: rgb(243 244 246);
+    box-shadow:
+      0 4px 16px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+
+  :global(html.dark) .btn-glass:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.25);
+    box-shadow:
+      0 6px 20px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  }
+</style>
diff --git a/template/src/components/Cloud.astro b/template/src/components/Cloud.astro
index 08ccf2e..86d1742 100644
--- a/template/src/components/Cloud.astro
+++ b/template/src/components/Cloud.astro
@@ -5,16 +5,24 @@ const { class: className = "" } = Astro.props as CloudProps;
 ---
 
 <div class={`relative ${className}`}>
-  <!-- Mobile cloud (simplified, fewer circles) -->
-  <svg class="absolute -inset-4 w-[calc(100%+2rem)] h-[calc(100%+2rem)] overflow-visible md:hidden" viewBox="0 0 300 140" preserveAspectRatio="xMidYMid slice" style="filter: blur(4px);">
+  <!-- Mobile cloud (simplified, fewer circles) - Light mode -->
+  <svg class="absolute -inset-4 w-[calc(100%+2rem)] h-[calc(100%+2rem)] overflow-visible md:hidden dark:hidden" viewBox="0 0 300 140" preserveAspectRatio="xMidYMid slice" style="filter: blur(4px);">
     <circle cx="40" cy="75" r="60" fill="#d4eef7" />
     <circle cx="120" cy="60" r="65" fill="#d4eef7" />
     <circle cx="200" cy="75" r="60" fill="#d4eef7" />
     <circle cx="270" cy="60" r="55" fill="#d4eef7" />
   </svg>
 
-  <!-- Desktop cloud (full version) -->
-  <svg class="absolute inset-0 w-full h-full overflow-visible hidden md:block" viewBox="0 0 600 160" preserveAspectRatio="xMidYMid meet" style="filter: blur(4px);">
+  <!-- Mobile cloud (simplified, fewer circles) - Dark mode -->
+  <svg class="absolute -inset-4 w-[calc(100%+2rem)] h-[calc(100%+2rem)] overflow-visible hidden dark:block dark:md:hidden" viewBox="0 0 300 140" preserveAspectRatio="xMidYMid slice" style="filter: blur(4px);">
+    <circle cx="40" cy="75" r="60" fill="#1e3a5f" />
+    <circle cx="120" cy="60" r="65" fill="#1e3a5f" />
+    <circle cx="200" cy="75" r="60" fill="#1e3a5f" />
+    <circle cx="270" cy="60" r="55" fill="#1e3a5f" />
+  </svg>
+
+  <!-- Desktop cloud (full version) - Light mode -->
+  <svg class="absolute inset-0 w-full h-full overflow-visible hidden md:block dark:md:hidden" viewBox="0 0 600 160" preserveAspectRatio="xMidYMid meet" style="filter: blur(4px);">
     <circle cx="50" cy="85" r="80" fill="#d4eef7" />
     <circle cx="150" cy="65" r="85" fill="#d4eef7" />
     <circle cx="260" cy="85" r="90" fill="#d4eef7" />
@@ -23,6 +31,16 @@ const { class: className = "" } = Astro.props as CloudProps;
     <circle cx="570" cy="65" r="85" fill="#d4eef7" />
   </svg>
 
+  <!-- Desktop cloud (full version) - Dark mode -->
+  <svg class="absolute inset-0 w-full h-full overflow-visible hidden dark:md:block" viewBox="0 0 600 160" preserveAspectRatio="xMidYMid meet" style="filter: blur(4px);">
+    <circle cx="50" cy="85" r="80" fill="#1e3a5f" />
+    <circle cx="150" cy="65" r="85" fill="#1e3a5f" />
+    <circle cx="260" cy="85" r="90" fill="#1e3a5f" />
+    <circle cx="380" cy="70" r="95" fill="#1e3a5f" />
+    <circle cx="490" cy="85" r="90" fill="#1e3a5f" />
+    <circle cx="570" cy="65" r="85" fill="#1e3a5f" />
+  </svg>
+
   <div class="relative z-10 flex items-center justify-center min-h-[120px] md:min-h-[160px] px-6 sm:px-10 md:px-16 py-6 md:py-10">
     <div class="max-w-lg text-center">
       <slot />
diff --git a/template/src/components/DocNav.astro b/template/src/components/DocNav.astro
index a537f9d..1fff8b0 100644
--- a/template/src/components/DocNav.astro
+++ b/template/src/components/DocNav.astro
@@ -37,7 +37,3 @@ const { prev, next } = Astro.props;
     <div></div>
   )}
 </nav>
-
-<script>
-  import 'iconify-icon';
-</script>
diff --git a/template/src/components/FeatureCard.astro b/template/src/components/FeatureCard.astro
index fb28feb..4f48f28 100644
--- a/template/src/components/FeatureCard.astro
+++ b/template/src/components/FeatureCard.astro
@@ -11,14 +11,14 @@ const Tag = href ? 'a' : 'div';
 <Tag
   href={href}
   class:list={[
-    'block p-6 bg-white border border-gray-200 rounded-2xl transition-all w-[250px] h-[225px]',
-    href && 'hover:border-gray-300 hover:shadow-sm cursor-pointer',
+    'block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl transition-all w-[250px] h-[225px]',
+    href && 'hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-sm cursor-pointer',
   ]}
 >
   <div class="flex flex-col items-center text-center">
-    <div class="text-gray-700 mb-4" set:html={iconHtml} />
-    <h3 class="font-semibold text-gray-900 mb-4">{title}</h3>
-    <div class="w-full h-px bg-gray-200 mb-5"></div>
-    <p class="text-sm text-gray-600 leading-relaxed">{description}</p>
+    <div class="text-gray-700 dark:text-gray-300 mb-4" set:html={iconHtml} />
+    <h3 class="font-semibold text-gray-900 dark:text-white mb-4">{title}</h3>
+    <div class="w-full h-px bg-gray-200 dark:bg-gray-700 mb-5"></div>
+    <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">{description}</p>
   </div>
 </Tag>
diff --git a/template/src/components/FlipCard.astro b/template/src/components/FlipCard.astro
index 7c085aa..9bdd725 100644
--- a/template/src/components/FlipCard.astro
+++ b/template/src/components/FlipCard.astro
@@ -78,25 +78,12 @@ const { title, description, icon } = Astro.props as Props;
     );
   }
 
-  /* Glow effect */
-  .neon-border::after {
-    content: '';
-    position: absolute;
-    inset: -4px;
-    border-radius: 1.2rem;
-    background: conic-gradient(
-      from var(--angle, 0deg),
-      transparent 0%,
-      transparent 75%,
-      #06b6d4 80%,
-      #22d3ee 85%,
-      #06b6d4 90%,
-      transparent 95%,
-      transparent 100%
+  :global(html.dark) .neon-border::before {
+    background: linear-gradient(
+      135deg,
+      rgba(17, 24, 39, 0.98) 0%,
+      rgba(31, 41, 55, 0.95) 100%
     );
-    filter: blur(15px);
-    opacity: 0.5;
-    z-index: -1;
   }
 
   @keyframes rotate-border {
@@ -141,6 +128,20 @@ const { title, description, icon } = Astro.props as Props;
       inset 0 -1px 0 rgba(0, 0, 0, 0.05);
   }
 
+  :global(html.dark) .flip-card-front,
+  :global(html.dark) .flip-card-back {
+    color: #f3f4f6;
+    background: linear-gradient(
+      135deg,
+      rgba(17, 24, 39, 0.95) 0%,
+      rgba(31, 41, 55, 0.9) 50%,
+      rgba(17, 24, 39, 0.95) 100%
+    );
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.2);
+  }
+
   .flip-card-front::before,
   .flip-card-back::before {
     content: '';
@@ -158,6 +159,15 @@ const { title, description, icon } = Astro.props as Props;
     pointer-events: none;
   }
 
+  :global(html.dark) .flip-card-front::before,
+  :global(html.dark) .flip-card-back::before {
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.1) 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+
   .flip-card-back {
     transform: rotateY(180deg);
     background: linear-gradient(
@@ -168,13 +178,18 @@ const { title, description, icon } = Astro.props as Props;
     );
   }
 
+  :global(html.dark) .flip-card-back {
+    background: linear-gradient(
+      135deg,
+      rgba(31, 41, 55, 0.98) 0%,
+      rgba(17, 24, 39, 0.95) 50%,
+      rgba(31, 41, 55, 0.98) 100%
+    );
+  }
+
   .flip-card-front h3,
   .flip-card-back p {
     position: relative;
     z-index: 1;
   }
 </style>
-
-<script>
-  import 'iconify-icon';
-</script>
diff --git a/template/src/components/Footer.astro b/template/src/components/Footer.astro
index eb9bc3f..ff09cc9 100644
--- a/template/src/components/Footer.astro
+++ b/template/src/components/Footer.astro
@@ -8,12 +8,12 @@ const { githubUrl = GITHUB_URL } = Astro.props;
 const currentYear = new Date().getFullYear();
 ---
 
-<footer class="border-t border-gray-200 bg-white">
+<footer class="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
   <div class="container mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex flex-col items-center gap-4 py-6 md:flex-row md:h-16 md:py-0 md:justify-between">
-      <a href="/" class="font-semibold text-lg">DocuBase</a>
+      <a href="/" class="font-semibold text-lg text-gray-900 dark:text-white">DocuBase</a>
 
-      <p class="text-xs text-gray-500 text-center order-last md:order-none">
+      <p class="text-xs text-gray-500 dark:text-gray-400 text-center order-last md:order-none">
         {currentYear} DocuBase All Rights Reserved
       </p>
 
@@ -21,7 +21,7 @@ const currentYear = new Date().getFullYear();
         href={githubUrl}
         target="_blank"
         rel="noopener noreferrer"
-        class="text-gray-600 hover:text-gray-900 transition-colors"
+        class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
         aria-label="GitHub"
       >
         <iconify-icon icon="mdi:github" width="20" height="20"></iconify-icon>
@@ -29,7 +29,3 @@ const currentYear = new Date().getFullYear();
     </div>
   </div>
 </footer>
-
-<script>
-  import 'iconify-icon';
-</script>
diff --git a/template/src/components/Header.astro b/template/src/components/Header.astro
index 8eae85e..733814f 100644
--- a/template/src/components/Header.astro
+++ b/template/src/components/Header.astro
@@ -9,8 +9,8 @@ const navLinks = NAV_LINKS;
 
 <header class="sticky top-4 z-50 w-full">
   <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="relative flex h-14 items-center justify-between bg-white/50 backdrop-blur-xl border border-white/30 shadow-lg shadow-black/5 rounded-full px-6">
-      <a href="/" class="flex items-center gap-1 font-semibold text-lg">
+    <div class="relative flex h-14 items-center justify-between bg-white/50 dark:bg-gray-900/50 backdrop-blur-xl border border-white/30 dark:border-gray-700/50 shadow-lg shadow-black/5 dark:shadow-black/20 rounded-full px-6">
+      <a href="/" class="flex items-center gap-1 font-semibold text-lg text-gray-900 dark:text-white">
           <img src="/favicon.svg" alt="DocuBase logo" class="w-8 h-8 -mt-1.5" />
           DocuBase
         </a>
@@ -20,10 +20,10 @@ const navLinks = NAV_LINKS;
           <a
             href={link.href}
             class:list={[
-              "text-sm font-medium transition-colors hover:text-gray-900",
+              "text-sm font-medium transition-colors hover:text-gray-900 dark:hover:text-white",
               currentPath === link.href || (link.href !== "/" && (currentPath === link.href || currentPath.startsWith(link.href + "/")))
-                ? "text-gray-900"
-                : "text-gray-600",
+                ? "text-gray-900 dark:text-white"
+                : "text-gray-600 dark:text-gray-400",
             ]}
           >
             {link.label}
@@ -31,16 +31,16 @@ const navLinks = NAV_LINKS;
         ))}
       </nav>
 
-      <div class="flex items-center gap-4">
+      <div class="flex items-center gap-2 sm:gap-4">
         <div class="relative hidden sm:block">
           <input
             type="text"
             placeholder="Search..."
             disabled
             title="Search coming soon"
-            class="w-40 lg:w-48 h-9 pl-3 pr-8 text-sm border-b border-gray-200 bg-transparent focus:outline-none focus:border-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            class="w-40 lg:w-48 h-9 pl-3 pr-8 text-sm border-b border-gray-200 dark:border-gray-700 bg-transparent text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:border-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
           />
-          <iconify-icon icon="mdi:magnify" class="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400" width="16" height="16"></iconify-icon>
+          <iconify-icon icon="mdi:magnify" class="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" width="16" height="16"></iconify-icon>
         </div>
 
         <button
@@ -51,46 +51,110 @@ const navLinks = NAV_LINKS;
           <iconify-icon icon="mdi:weather-sunny" class="hidden dark:block" width="20" height="20"></iconify-icon>
           <iconify-icon icon="mdi:weather-night" class="block dark:hidden" width="20" height="20"></iconify-icon>
         </button>
+
+        <button
+          id="mobile-menu-toggle"
+          class="p-2 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors md:hidden"
+          aria-label="Toggle mobile menu"
+          aria-expanded="false"
+        >
+          <svg class="menu-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <line x1="6" y1="6" x2="18" y2="6"></line>
+            <line x1="3" y1="12" x2="21" y2="12"></line>
+            <line x1="6" y1="18" x2="18" y2="18"></line>
+          </svg>
+          <iconify-icon icon="mdi:close" class="close-icon hidden" width="20" height="20"></iconify-icon>
+        </button>
       </div>
     </div>
+
+    <!-- Mobile Navigation Menu -->
+    <nav
+      id="mobile-menu"
+      class="mobile-menu hidden md:hidden mt-2 py-4 px-6 bg-white/90 dark:bg-gray-900/90 backdrop-blur-xl border border-white/30 dark:border-gray-700/50 shadow-lg shadow-black/5 dark:shadow-black/20 rounded-2xl"
+    >
+      <div class="flex flex-col gap-2">
+        {navLinks.map((link) => (
+          <a
+            href={link.href}
+            class:list={[
+              "block py-2 px-3 text-sm font-medium transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800",
+              currentPath === link.href || (link.href !== "/" && (currentPath === link.href || currentPath.startsWith(link.href + "/")))
+                ? "text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800"
+                : "text-gray-600 dark:text-gray-400",
+            ]}
+          >
+            {link.label}
+          </a>
+        ))}
+      </div>
+    </nav>
   </div>
 </header>
 
 <script>
-  import 'iconify-icon';
-
-  const THEME_STORAGE_KEY = 'theme';
-  const THEME_DARK = 'dark';
-  const THEME_LIGHT = 'light';
-
   (function() {
-    if ((window as any).__themeToggleInitialized) return;
-    (window as any).__themeToggleInitialized = true;
+    if ((window as any).__headerInitialized) return;
+    (window as any).__headerInitialized = true;
 
-    function getThemePreference(): 'dark' | 'light' {
-      const stored = localStorage.getItem(THEME_STORAGE_KEY);
-      if (stored === THEME_DARK || stored === THEME_LIGHT) return stored;
-      return window.matchMedia('(prefers-color-scheme: dark)').matches ? THEME_DARK : THEME_LIGHT;
-    }
+    function closeMobileMenu() {
+      const mobileToggle = document.getElementById('mobile-menu-toggle');
+      const mobileMenu = document.getElementById('mobile-menu');
+      if (!mobileToggle || !mobileMenu) return;
 
-    function setTheme(theme: 'dark' | 'light') {
-      document.documentElement.classList.toggle(THEME_DARK, theme === THEME_DARK);
-      localStorage.setItem(THEME_STORAGE_KEY, theme);
+      const menuIcon = mobileToggle.querySelector('.menu-icon');
+      const closeIcon = mobileToggle.querySelector('.close-icon');
+
+      mobileMenu.classList.add('hidden');
+      menuIcon?.classList.remove('hidden');
+      closeIcon?.classList.add('hidden');
+      mobileToggle.setAttribute('aria-expanded', 'false');
     }
 
-    function initTheme() {
-      setTheme(getThemePreference());
+    function initHeader() {
+      closeMobileMenu();
     }
 
-    document.addEventListener('click', (e) => {
+    // Theme toggle - using event delegation
+    document.addEventListener('click', function(e) {
       const toggle = (e.target as HTMLElement).closest('#theme-toggle');
       if (!toggle) return;
 
-      const isDark = document.documentElement.classList.contains(THEME_DARK);
-      setTheme(isDark ? THEME_LIGHT : THEME_DARK);
+      const isDark = document.documentElement.classList.contains('dark');
+      document.documentElement.classList.toggle('dark', !isDark);
+      localStorage.setItem('theme', isDark ? 'light' : 'dark');
+    });
+
+    // Mobile menu toggle - using event delegation
+    document.addEventListener('click', function(e) {
+      const toggle = (e.target as HTMLElement).closest('#mobile-menu-toggle');
+      if (toggle) {
+        e.stopPropagation();
+        const mobileMenu = document.getElementById('mobile-menu');
+        if (!mobileMenu) return;
+
+        const menuIcon = toggle.querySelector('.menu-icon');
+        const closeIcon = toggle.querySelector('.close-icon');
+        const isOpen = !mobileMenu.classList.contains('hidden');
+
+        mobileMenu.classList.toggle('hidden');
+        menuIcon?.classList.toggle('hidden');
+        closeIcon?.classList.toggle('hidden');
+        toggle.setAttribute('aria-expanded', String(!isOpen));
+        return;
+      }
+
+      // Close mobile menu when clicking outside
+      const mobileToggle = document.getElementById('mobile-menu-toggle');
+      const mobileMenu = document.getElementById('mobile-menu');
+      if (mobileToggle && mobileMenu) {
+        if (!mobileToggle.contains(e.target as Node) && !mobileMenu.contains(e.target as Node)) {
+          closeMobileMenu();
+        }
+      }
     });
 
-    initTheme();
-    document.addEventListener('astro:page-load', initTheme);
+    initHeader();
+    document.addEventListener('astro:page-load', initHeader);
   })();
 </script>
diff --git a/template/src/components/Hero.astro b/template/src/components/Hero.astro
index 68dad94..961a854 100644
--- a/template/src/components/Hero.astro
+++ b/template/src/components/Hero.astro
@@ -17,19 +17,19 @@ const {
   <section class="py-16 md:py-24 relative overflow-hidden">
     <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
       {subtitle && (
-        <p class="text-sm font-medium text-gray-600 mb-4">{subtitle}</p>
+        <p class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-4">{subtitle}</p>
       )}
 
-      <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-20">
+      <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-20">
         {title}{" "}
         {highlightedText && (
-          <span class="text-cyan-500">{highlightedText}</span>
+          <span class="text-cyan-500 dark:text-cyan-400">{highlightedText}</span>
         )}
       </h1>
 
       <div class="flex flex-col items-center">
         <Cloud class="mb-20">
-          <p class="text-base md:text-lg text-gray-700 leading-relaxed">
+          <p class="text-base md:text-lg text-gray-700 dark:text-gray-200 leading-relaxed">
             {description}
           </p>
         </Cloud>
diff --git a/template/src/components/ReadTime.astro b/template/src/components/ReadTime.astro
index b81a57c..e4013df 100644
--- a/template/src/components/ReadTime.astro
+++ b/template/src/components/ReadTime.astro
@@ -4,11 +4,7 @@ import type { ReadTimeProps } from '@/types';
 const { minutes } = Astro.props as ReadTimeProps;
 ---
 
-<div class="flex items-center gap-1.5 text-sm text-gray-500">
+<div class="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
   <iconify-icon icon="mdi:clock-outline" width="16" height="16"></iconify-icon>
   <span>{minutes} min read</span>
 </div>
-
-<script>
-  import 'iconify-icon';
-</script>
diff --git a/template/src/components/SectionHeader.astro b/template/src/components/SectionHeader.astro
index 1ab55a5..ff704f0 100644
--- a/template/src/components/SectionHeader.astro
+++ b/template/src/components/SectionHeader.astro
@@ -4,4 +4,4 @@ import type { SectionHeaderProps } from '@/types';
 const { title, class: className = "" } = Astro.props as SectionHeaderProps;
 ---
 
-<h2 class={`text-sm font-medium text-gray-500 mb-6 ${className}`}>{title}</h2>
+<h2 class={`text-sm font-medium text-gray-500 dark:text-gray-400 mb-6 ${className}`}>{title}</h2>
diff --git a/template/src/components/Sidebar.astro b/template/src/components/Sidebar.astro
index 168e97d..2f9040d 100644
--- a/template/src/components/Sidebar.astro
+++ b/template/src/components/Sidebar.astro
@@ -13,7 +13,7 @@ const { items, currentPath = "" } = Astro.props;
       <a
         href={item.href}
         class:list={[
-          "block py-2 text-sm transition-colors text-gray-900 hover:text-gray-600",
+          "block py-2 text-sm transition-colors text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300",
           currentPath === item.href && "font-medium"
         ]}
       >
@@ -25,7 +25,7 @@ const { items, currentPath = "" } = Astro.props;
             <a
               href={subItem.href}
               class:list={[
-                "block py-1.5 text-sm transition-colors text-gray-900 hover:text-gray-600",
+                "block py-1.5 text-sm transition-colors text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300",
                 currentPath === subItem.href && "font-medium"
               ]}
             >
diff --git a/template/src/components/Step.astro b/template/src/components/Step.astro
index 791b014..e74d8f6 100644
--- a/template/src/components/Step.astro
+++ b/template/src/components/Step.astro
@@ -6,7 +6,7 @@ const { title } = Astro.props as StepProps;
 
 <div class="step relative [counter-increment:step]">
   <div class="absolute -left-[calc(1.5rem+1px)] -translate-x-1/2 w-8 h-8 rounded-full bg-transparent border-2 border-primary-500 flex items-center justify-center text-sm font-semibold text-primary-700 dark:text-primary-300 before:content-[counter(step)] z-10" />
-  <div class="step-line absolute -left-[calc(1.5rem+1px)] -translate-x-1/2 top-10 w-0.5 rounded-full bg-gray-300 dark:bg-gray-700" style="height: calc(100% - 0.5rem);" />
+  <div class="step-line absolute -left-[calc(1.5rem+1px)] -translate-x-1/2 top-10 w-0.5 rounded-full bg-gray-300 dark:bg-gray-700" style="height: calc(100% - 2rem);" />
   <div>
     <h3 class="font-semibold text-lg mb-2 mt-0 leading-8">{title}</h3>
     <div class="text-gray-700 dark:text-gray-300 [&>p]:mb-3 [&>p:last-child]:mb-0">
@@ -16,7 +16,7 @@ const { title } = Astro.props as StepProps;
 </div>
 
 <style>
-  .step:last-child .step-line {
+  .step:last-of-type .step-line {
     display: none;
   }
 </style>
diff --git a/template/src/components/Table.astro b/template/src/components/Table.astro
index 0f51607..5ad9314 100644
--- a/template/src/components/Table.astro
+++ b/template/src/components/Table.astro
@@ -4,10 +4,10 @@ import type { TableProps } from '@/types';
 const { headers, rows, striped = true } = Astro.props as TableProps;
 ---
 
-<div class="my-6 inline-block min-w-[280px] max-w-full overflow-x-auto rounded-xl border border-white/20 dark:border-white/10 bg-white/60 dark:bg-gray-900/40 backdrop-blur-md shadow-lg shadow-gray-200/50 dark:shadow-black/20">
+<div class="my-6 inline-block min-w-[280px] max-w-full overflow-x-auto rounded-xl border border-gray-300/60 dark:border-white/10 bg-white/60 dark:bg-gray-900/40 backdrop-blur-md shadow-lg shadow-gray-200/50 dark:shadow-black/20">
   <table class="text-sm border-collapse">
     <thead>
-      <tr class="bg-white/50 dark:bg-white/5">
+      <tr class="bg-gray-100/80 dark:bg-white/5">
         {headers.map((header, i) => (
           <th class={`px-5 py-3 text-left font-semibold text-gray-950 dark:text-white whitespace-nowrap ${i === 0 ? 'rounded-tl-xl' : ''} ${i === headers.length - 1 ? 'rounded-tr-xl' : ''}`}>
             {header}
@@ -21,7 +21,7 @@ const { headers, rows, striped = true } = Astro.props as TableProps;
           {rowIndex !== 0 && !striped && (
             <tr>
               <td colspan={row.length} class="px-5 py-0">
-                <div class="border-t border-gray-300/40 dark:border-white/10"></div>
+                <div class="border-t border-gray-300/70 dark:border-white/10"></div>
               </td>
             </tr>
           )}
diff --git a/template/src/components/TableOfContents.astro b/template/src/components/TableOfContents.astro
index 68df840..7b8c353 100644
--- a/template/src/components/TableOfContents.astro
+++ b/template/src/components/TableOfContents.astro
@@ -10,11 +10,11 @@ const { items, title = DEFAULTS.TOC.title, showBorder = true, nested = false, co
 
 <div class:list={[
   "text-sm",
-  showBorder && "border-l border-gray-200 pl-4",
+  showBorder && "border-l border-gray-200 dark:border-gray-700 pl-4",
   collapsible && "toc-collapsible-wrapper"
 ]} data-toc data-toc-contextual={nested ? "true" : "false"} data-page-nav={isPageNav ? "true" : undefined}>
   {collapsible ? (
-    <div class="toc-collapsible-box border border-gray-200 rounded-[20px] p-4">
+    <div class="toc-collapsible-box border border-gray-200 dark:border-gray-700 dark:bg-gray-900 rounded-[20px] p-4">
       <div class="toc-icon">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <line x1="3" y1="12" x2="21" y2="12"></line>
@@ -23,14 +23,14 @@ const { items, title = DEFAULTS.TOC.title, showBorder = true, nested = false, co
         </svg>
       </div>
       <div class="toc-content">
-        <p class="font-semibold mb-4 text-base text-gray-900">{title}</p>
+        <p class="font-semibold mb-4 text-base text-gray-900 dark:text-gray-100">{title}</p>
         <nav class="space-y-2.5">
           {nested ? (
             items.map((item) => (
               <div data-h2-section data-h2-id={item.href.slice(1)}>
                 <a
                   href={item.href}
-                  class="toc-link block transition-all duration-200 transform font-medium text-gray-900 hover:text-blue-600"
+                  class="toc-link block transition-all duration-200 transform font-medium text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400"
                   data-toc-link={item.href}
                 >
                   {item.title}
@@ -40,7 +40,7 @@ const { items, title = DEFAULTS.TOC.title, showBorder = true, nested = false, co
                     {item.children.map((child) => (
                       <a
                         href={child.href}
-                        class="toc-link block transition-all duration-200 transform text-sm text-gray-900 hover:text-blue-600"
+                        class="toc-link block transition-all duration-200 transform text-sm text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400"
                         data-toc-link={child.href}
                       >
                         {child.title}
@@ -55,7 +55,7 @@ const { items, title = DEFAULTS.TOC.title, showBorder = true, nested = false, co
               <a
                 href={item.href}
                 class:list={[
-                  "toc-link block transition-all duration-200 transform text-gray-900 hover:text-blue-600",
+                  "toc-link block transition-all duration-200 transform text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400",
                   item.depth === 2 && "font-medium",
                   item.depth === 3 && "ml-4 text-sm",
                 ]}
@@ -71,14 +71,14 @@ const { items, title = DEFAULTS.TOC.title, showBorder = true, nested = false, co
     </div>
   ) : (
     <>
-      <p class="font-semibold mb-4 text-base text-gray-900">{title}</p>
+      <p class="font-semibold mb-4 text-base text-gray-900 dark:text-gray-100">{title}</p>
       <nav class="space-y-2.5">
         {nested ? (
           items.map((item) => (
             <div data-h2-section data-h2-id={item.href.slice(1)}>
               <a
                 href={item.href}
-                class="toc-link block transition-all duration-200 transform font-medium text-gray-900 hover:text-blue-600"
+                class="toc-link block transition-all duration-200 transform font-medium text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400"
                 data-toc-link={item.href}
               >
                 {item.title}
@@ -88,7 +88,7 @@ const { items, title = DEFAULTS.TOC.title, showBorder = true, nested = false, co
                   {item.children.map((child) => (
                     <a
                       href={child.href}
-                      class="toc-link block transition-all duration-200 transform text-sm text-gray-900 hover:text-blue-600"
+                      class="toc-link block transition-all duration-200 transform text-sm text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400"
                       data-toc-link={child.href}
                     >
                       {child.title}
@@ -103,7 +103,7 @@ const { items, title = DEFAULTS.TOC.title, showBorder = true, nested = false, co
             <a
               href={item.href}
               class:list={[
-                "toc-link block transition-all duration-200 transform text-gray-900 hover:text-blue-600",
+                "toc-link block transition-all duration-200 transform text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400",
                 item.depth === 2 && "font-medium",
                 item.depth === 3 && "ml-4 text-sm",
               ]}
@@ -146,6 +146,10 @@ const { items, title = DEFAULTS.TOC.title, showBorder = true, nested = false, co
     pointer-events: none;
   }
 
+  :global(html.dark) .toc-icon {
+    color: rgb(156 163 175);
+  }
+
   .toc-collapsible-box:not(:hover) .toc-icon {
     opacity: 1;
   }
diff --git a/template/src/components/Tabs.astro b/template/src/components/Tabs.astro
index 935260f..5e0aa3c 100644
--- a/template/src/components/Tabs.astro
+++ b/template/src/components/Tabs.astro
@@ -24,7 +24,7 @@ const tabsId = id || `tabs-${hashString(labels.join('-'))}`;
             'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-inset',
             index === defaultIndex
               ? 'text-primary-600 dark:text-white bg-gray-100 dark:bg-gray-800'
-              : 'text-gray-700 dark:text-gray-400 bg-transparent hover:text-gray-900 dark:hover:text-gray-200',
+              : 'text-gray-700 dark:text-gray-400 bg-transparent hover:text-primary-700 dark:hover:text-gray-200',
           ]}
           data-tab-index={index}
           aria-selected={index === defaultIndex}
@@ -53,7 +53,7 @@ const tabsId = id || `tabs-${hashString(labels.join('-'))}`;
     (window as any).__tabsInitialized = true;
 
     const TAB_ACTIVE_CLASSES = ['text-primary-600', 'dark:text-white', 'bg-gray-100', 'dark:bg-gray-800'];
-    const TAB_INACTIVE_CLASSES = ['text-gray-700', 'dark:text-gray-400'];
+    const TAB_INACTIVE_CLASSES = ['text-gray-700', 'dark:text-gray-400', 'bg-transparent'];
 
     function activateTab(container: Element, index: number) {
       const tabs = Array.from(container.querySelectorAll('.tab-button')) as HTMLElement[];
diff --git a/template/src/content/docs/installation/index.mdx b/template/src/content/docs/installation/index.mdx
index 4e41742..58e381b 100644
--- a/template/src/content/docs/installation/index.mdx
+++ b/template/src/content/docs/installation/index.mdx
@@ -322,17 +322,9 @@ Check the changelog before updating to review any breaking changes.
 
 Now that you have DocuBase installed, here's what to do next:
 
-<div class="flex flex-wrap gap-3 mt-4">
-  <Button href="/docs/getting-started" variant="primary" icon="mdi:rocket-launch">
-    Getting Started
-  </Button>
-  <Button href="/docs/core-concepts" variant="secondary" icon="mdi:book-open-page-variant">
-    Core Concepts
-  </Button>
-  <Button href="/docs/components" variant="secondary" icon="mdi:puzzle">
-    Components
-  </Button>
-</div>
+- [Getting Started](/docs/getting-started) - Learn the basics and start building your documentation
+- [Core Concepts](/docs/core-concepts) - Understand how DocuBase works under the hood
+- [Components](/docs/components) - Explore all available components and how to use them
 
 <Callout type="info" title="Need help?">
 If you run into any issues during installation, check the troubleshooting section above or visit our [GitHub repository](https://github.com/Sithumli/DocuBase/issues) to report a bug.
diff --git a/template/src/layouts/BaseLayout.astro b/template/src/layouts/BaseLayout.astro
index 2094dff..2ed1b70 100644
--- a/template/src/layouts/BaseLayout.astro
+++ b/template/src/layouts/BaseLayout.astro
@@ -22,9 +22,19 @@ const siteTitle = SITE_TITLE;
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
     <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
+    <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js" defer></script>
+    <script is:inline>
+      (function() {
+        const theme = localStorage.getItem('theme') ||
+          (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+        if (theme === 'dark') {
+          document.documentElement.classList.add('dark');
+        }
+      })();
+    </script>
     <slot name="head" />
   </head>
-  <body class="min-h-screen flex flex-col bg-white text-gray-900">
+  <body class="min-h-screen flex flex-col bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100">
     <slot />
   </body>
 </html>
diff --git a/template/src/layouts/DocsLayout.astro b/template/src/layouts/DocsLayout.astro
index 876126d..6daf6eb 100644
--- a/template/src/layouts/DocsLayout.astro
+++ b/template/src/layouts/DocsLayout.astro
@@ -89,12 +89,12 @@ if (isContentBased) {
               <Breadcrumb items={breadcrumbItems} />
 
               <div class="mt-4">
-                <h1 class="text-4xl font-bold text-gray-900 mb-2">{entry.data.title}</h1>
+                <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-2">{entry.data.title}</h1>
                 {entry.data.description && (
-                  <p class="text-lg text-gray-600 mb-4">{entry.data.description}</p>
+                  <p class="text-lg text-gray-600 dark:text-gray-400 mb-4">{entry.data.description}</p>
                 )}
 
-                <div class="flex items-center gap-4 text-sm text-gray-500 mb-8">
+                <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400 mb-8">
                   {entry.data.pubDate && (
                     <time datetime={entry.data.pubDate.toISOString()}>
                       {entry.data.pubDate.toLocaleDateString('en-US', {
@@ -111,7 +111,7 @@ if (isContentBased) {
                 {entry.data.tags && entry.data.tags.length > 0 && (
                   <div class="flex gap-2 mb-8">
                     {entry.data.tags.map((tag: string) => (
-                      <span class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full">
+                      <span class="px-3 py-1 text-xs bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full">
                         {tag}
                       </span>
                     ))}
diff --git a/template/src/pages/about.astro b/template/src/pages/about.astro
index 28b3122..1bae616 100644
--- a/template/src/pages/about.astro
+++ b/template/src/pages/about.astro
@@ -23,7 +23,7 @@ import Button from '@/components/Button.astro';
         <div class="max-w-3xl mx-auto">
           <SectionHeader title="Our Mission" class="ml-8" />
 
-          <div class="prose prose-gray max-w-none text-gray-600">
+          <div class="prose prose-gray max-w-none text-gray-600 dark:text-gray-400">
             <p class="text-lg leading-relaxed mb-6">
               DocuBase was created with a simple goal: to provide developers with a
               documentation template that looks great out of the box while remaining
@@ -80,7 +80,7 @@ import Button from '@/components/Button.astro';
           <SectionHeader title="Get Started" class="ml-8" />
 
           <div class="text-center">
-            <p class="text-lg text-gray-600 mb-8">
+            <p class="text-lg text-gray-600 dark:text-gray-400 mb-8">
               Ready to build your documentation? Check out our getting started guide.
             </p>
             <Button href="/docs/getting-started" variant="glass" icon="ion:chevron-forward">
diff --git a/template/src/pages/blog/index.astro b/template/src/pages/blog/index.astro
index 0b76b36..130c641 100644
--- a/template/src/pages/blog/index.astro
+++ b/template/src/pages/blog/index.astro
@@ -70,8 +70,8 @@ const entriesByYear = sortedEntries.reduce((acc, entry) => {
           {Object.entries(entriesByYear)
             .sort(([a], [b]) => Number(b) - Number(a))
             .map(([year, entries]) => (
-              <div class="flex gap-12 mb-12">
-                <h2 class="text-2xl font-bold text-gray-900 shrink-0 sticky top-24 self-start">
+              <div class="flex flex-col md:flex-row gap-4 md:gap-12 mb-12">
+                <h2 class="text-2xl font-bold text-gray-900 dark:text-white shrink-0 md:sticky md:top-24 md:self-start">
                   {year}
                 </h2>
 
@@ -99,7 +99,7 @@ const entriesByYear = sortedEntries.reduce((acc, entry) => {
           }
 
           {sortedEntries.length === 0 && (
-            <p class="text-center text-gray-600">No blog posts yet. Check back soon!</p>
+            <p class="text-center text-gray-600 dark:text-gray-400">No blog posts yet. Check back soon!</p>
           )}
         </div>
       </div>
diff --git a/template/src/pages/docs/index.astro b/template/src/pages/docs/index.astro
index 7d39f2d..2e9d42f 100644
--- a/template/src/pages/docs/index.astro
+++ b/template/src/pages/docs/index.astro
@@ -31,8 +31,8 @@ const docsByYear = {
           {Object.entries(docsByYear)
             .sort(([a], [b]) => Number(b) - Number(a))
             .map(([year, docs]) => (
-              <div class="flex gap-12 mb-12">
-                <h2 class="text-2xl font-bold text-gray-900 shrink-0 sticky top-24 self-start">
+              <div class="flex flex-col md:flex-row gap-4 md:gap-12 mb-12">
+                <h2 class="text-2xl font-bold text-gray-900 dark:text-white shrink-0 md:sticky md:top-24 md:self-start">
                   {year}
                 </h2>
 
@@ -52,7 +52,7 @@ const docsByYear = {
           }
 
           {sortedDocs.length === 0 && (
-            <p class="text-center text-gray-600">No documentation pages yet.</p>
+            <p class="text-center text-gray-600 dark:text-gray-400">No documentation pages yet.</p>
           )}
         </div>
       </div>
diff --git a/template/src/pages/tutorials/index.astro b/template/src/pages/tutorials/index.astro
index b43cdc3..d8da084 100644
--- a/template/src/pages/tutorials/index.astro
+++ b/template/src/pages/tutorials/index.astro
@@ -32,8 +32,8 @@ const tutorialsByYear = {
           {Object.entries(tutorialsByYear)
             .sort(([a], [b]) => Number(b) - Number(a))
             .map(([year, tutorials]) => (
-              <div class="flex gap-12 mb-12">
-                <h2 class="text-2xl font-bold text-gray-900 shrink-0 sticky top-24 self-start">
+              <div class="flex flex-col md:flex-row gap-4 md:gap-12 mb-12">
+                <h2 class="text-2xl font-bold text-gray-900 dark:text-white shrink-0 md:sticky md:top-24 md:self-start">
                   {year}
                 </h2>
 
@@ -53,7 +53,7 @@ const tutorialsByYear = {
           }
 
           {sortedTutorials.length === 0 && (
-            <p class="text-center text-gray-600">No tutorials yet. Check back soon!</p>
+            <p class="text-center text-gray-600 dark:text-gray-400">No tutorials yet. Check back soon!</p>
           )}
         </div>
       </div>
diff --git a/template/src/styles/global.css b/template/src/styles/global.css
index 579d5fd..bfd78d9 100644
--- a/template/src/styles/global.css
+++ b/template/src/styles/global.css
@@ -1,6 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
   --font-sans: "Comfortaa", system-ui, sans-serif;
 }
@@ -9,6 +11,7 @@ html, body {
   font-family: "Comfortaa", system-ui, sans-serif;
 }
 
+/* ===== PROSE LIGHT MODE ===== */
 :where(article.prose) h1 {
   font-size: 2.25rem;
   font-weight: 700;
@@ -50,7 +53,7 @@ html, body {
 :where(article.prose) p {
   font-size: 1rem;
   line-height: 1.75;
-  color: rgb(0 0 0);
+  color: rgb(17 24 39);
   margin-bottom: 1.25rem;
 }
 
@@ -65,6 +68,73 @@ html, body {
   line-height: 1.75;
 }
 
+:where(article.prose) a:not(.btn) {
+  color: rgb(6 182 212);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+:where(article.prose) a:not(.btn):hover {
+  color: rgb(8 145 178);
+}
+
+:where(article.prose) .btn,
+:where(article.prose) a.btn {
+  text-decoration: none;
+  margin: 0;
+  padding: 0.5rem 1.25rem;
+}
+
+:where(article.prose) strong {
+  color: rgb(17 24 39);
+  font-weight: 600;
+}
+
+:where(article.prose) code:not(pre code) {
+  background: rgb(243 244 246);
+  color: rgb(17 24 39);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+}
+
+:where(article.prose) blockquote {
+  border-left: 4px solid rgb(209 213 219);
+  padding-left: 1rem;
+  margin: 1.5rem 0;
+  color: rgb(75 85 99);
+  font-style: italic;
+}
+
+:where(article.prose) hr {
+  border-color: rgb(229 231 235);
+  margin: 2rem 0;
+}
+
+/* Exclude custom Table component from prose table styles */
+:where(article.prose) table:not(.text-sm) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+}
+
+:where(article.prose) table:not(.text-sm) th,
+:where(article.prose) table:not(.text-sm) td {
+  border: 1px solid rgb(229 231 235);
+  padding: 0.75rem;
+  text-align: left;
+}
+
+:where(article.prose) table:not(.text-sm) th {
+  background: rgb(249 250 251);
+  font-weight: 600;
+  color: rgb(17 24 39);
+}
+
+:where(article.prose) table:not(.text-sm) td {
+  color: rgb(55 65 81);
+}
+
 :where(article.prose) pre {
   position: relative;
   border-radius: 15px;
@@ -76,6 +146,80 @@ html, body {
   padding: 0;
 }
 
+/* ===== PROSE DARK MODE ===== */
+:where(html.dark article.prose) h1 {
+  color: rgb(243 244 246);
+}
+
+:where(html.dark article.prose) h2 {
+  color: rgb(243 244 246);
+  border-color: rgb(55 65 81);
+}
+
+:where(html.dark article.prose) h3 {
+  color: rgb(243 244 246);
+}
+
+:where(html.dark article.prose) h4 {
+  color: rgb(209 213 219);
+}
+
+:where(html.dark article.prose) p {
+  color: rgb(209 213 219);
+}
+
+:where(html.dark article.prose) li {
+  color: rgb(209 213 219);
+}
+
+:where(html.dark article.prose) a:not(.btn) {
+  color: rgb(34 211 238);
+}
+
+:where(html.dark article.prose) a:not(.btn):hover {
+  color: rgb(103 232 249);
+}
+
+/* Protect buttons from prose styles in dark mode */
+:where(html.dark article.prose) .btn,
+:where(html.dark article.prose) a.btn {
+  text-decoration: none;
+}
+
+:where(html.dark article.prose) strong {
+  color: rgb(243 244 246);
+}
+
+:where(html.dark article.prose) code:not(pre code) {
+  background: rgb(55 65 81);
+  color: rgb(243 244 246);
+}
+
+:where(html.dark article.prose) blockquote {
+  border-left-color: rgb(75 85 99);
+  color: rgb(156 163 175);
+}
+
+:where(html.dark article.prose) hr {
+  border-color: rgb(55 65 81);
+}
+
+/* Exclude custom Table component from prose table styles in dark mode */
+:where(html.dark article.prose) table:not(.text-sm) th,
+:where(html.dark article.prose) table:not(.text-sm) td {
+  border-color: rgb(55 65 81);
+}
+
+:where(html.dark article.prose) table:not(.text-sm) th {
+  background: rgb(31 41 55);
+  color: rgb(243 244 246);
+}
+
+:where(html.dark article.prose) table:not(.text-sm) td {
+  color: rgb(209 213 219);
+}
+
+/* ===== CODE COPY BUTTON ===== */
 .code-copy-btn {
   position: absolute;
   top: 0.5rem;
@@ -114,5 +258,4 @@ article.prose pre:focus-within .code-copy-btn {
 
 .code-copy-btn.copied iconify-icon {
   color: #22c55e;
-}
-
+}
\ No newline at end of file
diff --git a/template/src/types/constants.ts b/template/src/types/constants.ts
index 5236cc8..0dca849 100644
--- a/template/src/types/constants.ts
+++ b/template/src/types/constants.ts
@@ -2,7 +2,7 @@ export const SITE_TITLE = 'DocuBase';
 export const SITE_DESCRIPTION = 'Beautiful documentation that scales with your product';
 export const GITHUB_URL = 'https://github.com/Sithumli/DocuBase';
 
-export const ASSETS_CDN_BASE = 'https://cdn.jsdelivr.net/gh/Sithumli/DocuBase@__DOCUBASE_VERSION__/assets';
+export const ASSETS_CDN_BASE = 'https://cdn.jsdelivr.net/gh/Sithumli/DocuBase@main/assets';
 
 export const BANNER_IMAGES = {
   docs: `${ASSETS_CDN_BASE}/DocsBanner.webp`,