From 351d571d68a8ce4b23594d675806c3ab0fc3e17b Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 16:32:52 +0530
Subject: [PATCH 01/15] chore: remove shikiConfig from markdown settings and
 update table styles for better integration with prose

---
 astro.config.mjs                    |  4 ----
 template/astro.config.mjs           |  4 ----
 template/src/components/Table.astro |  6 +++---
 template/src/components/Tabs.astro  | 10 +++++-----
 template/src/styles/global.css      | 20 +++++++++++---------
 5 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index ea33506..4b68305 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -32,9 +32,5 @@ export default defineConfig({
   ],
   markdown: {
     rehypePlugins: [rehypeSlug],
-    shikiConfig: {
-      theme: 'github-dark',
-      wrap: true,
-    },
   },
 });
\ No newline at end of file
diff --git a/template/astro.config.mjs b/template/astro.config.mjs
index 9abaec9..2336e0a 100644
--- a/template/astro.config.mjs
+++ b/template/astro.config.mjs
@@ -30,9 +30,5 @@ export default defineConfig({
   ],
   markdown: {
     rehypePlugins: [rehypeSlug],
-    shikiConfig: {
-      theme: 'github-dark',
-      wrap: true,
-    },
   },
 });
\ No newline at end of file
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/Tabs.astro b/template/src/components/Tabs.astro
index 935260f..d9225f4 100644
--- a/template/src/components/Tabs.astro
+++ b/template/src/components/Tabs.astro
@@ -23,8 +23,8 @@ const tabsId = id || `tabs-${hashString(labels.join('-'))}`;
             'rounded-t-lg',
             '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-white bg-gray-800'
+              : 'text-gray-400 bg-transparent hover:text-gray-200',
           ]}
           data-tab-index={index}
           aria-selected={index === defaultIndex}
@@ -40,7 +40,7 @@ const tabsId = id || `tabs-${hashString(labels.join('-'))}`;
     })}
   </div>
   <div class:list={[
-      'tab-panels p-4 rounded-tr-lg rounded-br-lg rounded-bl-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 [&_p]:!text-gray-800 dark:[&_p]:!text-gray-100 [&_li]:!text-gray-800 dark:[&_li]:!text-gray-100',
+      'tab-panels p-4 rounded-tr-lg rounded-br-lg rounded-bl-lg bg-gray-800 text-gray-100 [&_p]:!text-gray-100 [&_li]:!text-gray-100',
       defaultIndex !== 0 && 'rounded-tl-lg'
     ]}>
     <slot />
@@ -52,8 +52,8 @@ const tabsId = id || `tabs-${hashString(labels.join('-'))}`;
     if ((window as any).__tabsInitialized) return;
     (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_ACTIVE_CLASSES = ['text-white', 'bg-gray-800'];
+    const TAB_INACTIVE_CLASSES = ['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/styles/global.css b/template/src/styles/global.css
index b9f62b3..da194d4 100644
--- a/template/src/styles/global.css
+++ b/template/src/styles/global.css
@@ -104,26 +104,27 @@ html, body {
   margin: 2rem 0;
 }
 
-:where(article.prose) table {
+/* 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) th,
-:where(article.prose) td {
+:where(article.prose) th:not(.text-sm th),
+:where(article.prose) td:not(.text-sm td) {
   border: 1px solid rgb(229 231 235);
   padding: 0.75rem;
   text-align: left;
 }
 
-:where(article.prose) th {
+:where(article.prose) th:not(.text-sm th) {
   background: rgb(249 250 251);
   font-weight: 600;
   color: rgb(17 24 39);
 }
 
-:where(article.prose) td {
+:where(article.prose) td:not(.text-sm td) {
   color: rgb(55 65 81);
 }
 
@@ -190,17 +191,18 @@ html, body {
   border-color: rgb(55 65 81);
 }
 
-:where(html.dark article.prose) th,
-:where(html.dark article.prose) td {
+/* Exclude custom Table component from prose table styles in dark mode */
+:where(html.dark article.prose) th:not(.text-sm th),
+:where(html.dark article.prose) td:not(.text-sm td) {
   border-color: rgb(55 65 81);
 }
 
-:where(html.dark article.prose) th {
+:where(html.dark article.prose) th:not(.text-sm th) {
   background: rgb(31 41 55);
   color: rgb(243 244 246);
 }
 
-:where(html.dark article.prose) td {
+:where(html.dark article.prose) td:not(.text-sm td) {
   color: rgb(209 213 219);
 }
 

From 4e72e7ac1acc697651fea811df4707fe0b85f034 Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 21:45:37 +0530
Subject: [PATCH 02/15] chore: adjust step line height and fix CSS selector for
 last step

---
 template/src/components/Step.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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>

From ebbcbe237bb982a7904f7044caa9aedf9d7b407b Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 21:49:33 +0530
Subject: [PATCH 03/15] chore: update icon size and margin in Button component
 for better alignment

---
 template/src/components/Button.astro | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/template/src/components/Button.astro b/template/src/components/Button.astro
index 3002a9e..89b7a71 100644
--- a/template/src/components/Button.astro
+++ b/template/src/components/Button.astro
@@ -23,11 +23,11 @@ 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>
 
@@ -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 {

From e2991ce2049a287930f09a360ee4c68a7663a29e Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 21:53:29 +0530
Subject: [PATCH 04/15] chore: remove unused iconify-icon imports from multiple
 components

---
 template/src/components/BlogCard.astro  | 4 ----
 template/src/components/BottomNav.astro | 4 ----
 template/src/components/Button.astro    | 4 ----
 template/src/components/DocNav.astro    | 4 ----
 template/src/components/FlipCard.astro  | 4 ----
 template/src/components/Footer.astro    | 4 ----
 template/src/components/Header.astro    | 4 ----
 template/src/components/ReadTime.astro  | 4 ----
 template/src/layouts/BaseLayout.astro   | 1 +
 9 files changed, 1 insertion(+), 32 deletions(-)

diff --git a/template/src/components/BlogCard.astro b/template/src/components/BlogCard.astro
index bc3d07a..7e6938a 100644
--- a/template/src/components/BlogCard.astro
+++ b/template/src/components/BlogCard.astro
@@ -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 2585382..fa1ad22 100644
--- a/template/src/components/BottomNav.astro
+++ b/template/src/components/BottomNav.astro
@@ -128,7 +128,3 @@ const defaultFallbackLinks: NavTarget[] = fallbackLinks || [
     </div>
   )}
 </div>
-
-<script>
-  import 'iconify-icon';
-</script>
diff --git a/template/src/components/Button.astro b/template/src/components/Button.astro
index 89b7a71..f351eb8 100644
--- a/template/src/components/Button.astro
+++ b/template/src/components/Button.astro
@@ -127,7 +127,3 @@ const Tag = href ? 'a' : 'button';
       inset 0 1px 0 rgba(255, 255, 255, 0.15);
   }
 </style>
-
-<script>
-  import 'iconify-icon';
-</script>
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/FlipCard.astro b/template/src/components/FlipCard.astro
index 86d16d8..9bdd725 100644
--- a/template/src/components/FlipCard.astro
+++ b/template/src/components/FlipCard.astro
@@ -193,7 +193,3 @@ const { title, description, icon } = Astro.props as Props;
     z-index: 1;
   }
 </style>
-
-<script>
-  import 'iconify-icon';
-</script>
diff --git a/template/src/components/Footer.astro b/template/src/components/Footer.astro
index 16f655d..ff09cc9 100644
--- a/template/src/components/Footer.astro
+++ b/template/src/components/Footer.astro
@@ -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 79248de..733814f 100644
--- a/template/src/components/Header.astro
+++ b/template/src/components/Header.astro
@@ -92,10 +92,6 @@ const navLinks = NAV_LINKS;
   </div>
 </header>
 
-<script>
-  import 'iconify-icon';
-</script>
-
 <script>
   (function() {
     if ((window as any).__headerInitialized) return;
diff --git a/template/src/components/ReadTime.astro b/template/src/components/ReadTime.astro
index c2cd5e9..e4013df 100644
--- a/template/src/components/ReadTime.astro
+++ b/template/src/components/ReadTime.astro
@@ -8,7 +8,3 @@ const { minutes } = Astro.props as ReadTimeProps;
   <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/layouts/BaseLayout.astro b/template/src/layouts/BaseLayout.astro
index 63d251a..2ed1b70 100644
--- a/template/src/layouts/BaseLayout.astro
+++ b/template/src/layouts/BaseLayout.astro
@@ -22,6 +22,7 @@ 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') ||

From 8f797b4fc62846cdedebf413c1f122d9e6574c0a Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 21:56:17 +0530
Subject: [PATCH 05/15] chore: refactor Button components for improved
 readability in installation guide

---
 template/src/content/docs/installation/index.mdx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/template/src/content/docs/installation/index.mdx b/template/src/content/docs/installation/index.mdx
index 4e41742..4cf6b34 100644
--- a/template/src/content/docs/installation/index.mdx
+++ b/template/src/content/docs/installation/index.mdx
@@ -323,15 +323,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>
+  <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>
 
 <Callout type="info" title="Need help?">

From a05a871b808a2ecaf9dcf40ab3e9217c30c2f2ee Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 22:08:35 +0530
Subject: [PATCH 06/15] chore: update Button component styles and adjust link
 styles for better integration

---
 template/src/components/Button.astro             | 4 ++--
 template/src/content/docs/installation/index.mdx | 4 ++--
 template/src/styles/global.css                   | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/template/src/components/Button.astro b/template/src/components/Button.astro
index f351eb8..b2cd49d 100644
--- a/template/src/components/Button.astro
+++ b/template/src/components/Button.astro
@@ -31,8 +31,8 @@ const Tag = href ? 'a' : 'button';
   )}
 </Tag>
 
-<style>
-  .btn :global(p) {
+<style is:global>
+  .btn :is(p) {
     margin-bottom: 0 !important;
   }
 
diff --git a/template/src/content/docs/installation/index.mdx b/template/src/content/docs/installation/index.mdx
index 4cf6b34..b8ecd8e 100644
--- a/template/src/content/docs/installation/index.mdx
+++ b/template/src/content/docs/installation/index.mdx
@@ -324,8 +324,8 @@ 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>
+  <Button href="/docs/core-concepts" variant="primary" icon="mdi:book-open-page-variant">Core Concepts</Button>
+  <Button href="/docs/components" variant="primary" icon="mdi:puzzle">Components</Button>
 </div>
 
 <Callout type="info" title="Need help?">
diff --git a/template/src/styles/global.css b/template/src/styles/global.css
index da194d4..b982f95 100644
--- a/template/src/styles/global.css
+++ b/template/src/styles/global.css
@@ -68,13 +68,13 @@ html, body {
   line-height: 1.75;
 }
 
-:where(article.prose) a {
+:where(article.prose) a:not(.btn) {
   color: rgb(6 182 212);
   text-decoration: underline;
   text-underline-offset: 2px;
 }
 
-:where(article.prose) a:hover {
+:where(article.prose) a:not(.btn):hover {
   color: rgb(8 145 178);
 }
 
@@ -165,11 +165,11 @@ html, body {
   color: rgb(209 213 219);
 }
 
-:where(html.dark article.prose) a {
+:where(html.dark article.prose) a:not(.btn) {
   color: rgb(34 211 238);
 }
 
-:where(html.dark article.prose) a:hover {
+:where(html.dark article.prose) a:not(.btn):hover {
   color: rgb(103 232 249);
 }
 

From 5e618add8f3d733c3f78995da412bc8204fe05d9 Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 22:27:47 +0530
Subject: [PATCH 07/15] chore: enhance abbr styles for better text decoration
 consistency

---
 template/src/styles/global.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/template/src/styles/global.css b/template/src/styles/global.css
index b982f95..f404a6f 100644
--- a/template/src/styles/global.css
+++ b/template/src/styles/global.css
@@ -1,6 +1,17 @@
 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');
 @import "tailwindcss";
 
+abbr[title],
+a {
+  -webkit-text-decoration-line: inherit;
+  text-decoration: inherit;
+}
+
+abbr[title] {
+  -webkit-text-decoration-line: underline dotted;
+  text-decoration: underline dotted;
+}
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {

From c8a6641f43f2e2ae7fb64c0a18a4a6fe6bc6a29f Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 22:29:34 +0530
Subject: [PATCH 08/15] chore: remove abbr and anchor text decoration styles
 for cleaner design

---
 template/src/styles/global.css | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/template/src/styles/global.css b/template/src/styles/global.css
index f404a6f..b982f95 100644
--- a/template/src/styles/global.css
+++ b/template/src/styles/global.css
@@ -1,17 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');
 @import "tailwindcss";
 
-abbr[title],
-a {
-  -webkit-text-decoration-line: inherit;
-  text-decoration: inherit;
-}
-
-abbr[title] {
-  -webkit-text-decoration-line: underline dotted;
-  text-decoration: underline dotted;
-}
-
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {

From 38ea59d1112f877becf1ea6ee7a1a9a0230e18c6 Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 22:32:38 +0530
Subject: [PATCH 09/15] chore: update Button component styles to use 'glass'
 variant for improved design consistency

---
 template/src/content/docs/installation/index.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/template/src/content/docs/installation/index.mdx b/template/src/content/docs/installation/index.mdx
index b8ecd8e..15522f7 100644
--- a/template/src/content/docs/installation/index.mdx
+++ b/template/src/content/docs/installation/index.mdx
@@ -323,9 +323,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="primary" icon="mdi:book-open-page-variant">Core Concepts</Button>
-  <Button href="/docs/components" variant="primary" icon="mdi:puzzle">Components</Button>
+  <Button href="/docs/getting-started" variant="glass" icon="mdi:rocket-launch">Getting Started</Button>
+  <Button href="/docs/core-concepts" variant="glass" icon="mdi:book-open-page-variant">Core Concepts</Button>
+  <Button href="/docs/components" variant="glass" icon="mdi:puzzle">Components</Button>
 </div>
 
 <Callout type="info" title="Need help?">

From 0733b2ec2a8a27a70bf0184faf06c1d9a6b33fa4 Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 22:35:31 +0530
Subject: [PATCH 10/15] chore: update button styles in prose for consistency
 and improved design

---
 template/src/styles/global.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/template/src/styles/global.css b/template/src/styles/global.css
index b982f95..4187a95 100644
--- a/template/src/styles/global.css
+++ b/template/src/styles/global.css
@@ -78,6 +78,13 @@ html, body {
   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;
@@ -173,6 +180,12 @@ html, body {
   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);
 }

From 23e2b96fd30541570558bff2a8b54d3a27f0f032 Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 22:38:16 +0530
Subject: [PATCH 11/15] chore: refactor button layout for improved readability
 in installation guide

---
 template/src/content/docs/installation/index.mdx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/template/src/content/docs/installation/index.mdx b/template/src/content/docs/installation/index.mdx
index 15522f7..7fc3a3c 100644
--- a/template/src/content/docs/installation/index.mdx
+++ b/template/src/content/docs/installation/index.mdx
@@ -322,11 +322,11 @@ 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="glass" icon="mdi:rocket-launch">Getting Started</Button>
-  <Button href="/docs/core-concepts" variant="glass" icon="mdi:book-open-page-variant">Core Concepts</Button>
-  <Button href="/docs/components" variant="glass" icon="mdi:puzzle">Components</Button>
-</div>
+
+<Button href="/docs/getting-started" variant="glass" icon="mdi:rocket-launch">Getting Started</Button>
+<Button href="/docs/core-concepts" variant="glass" icon="mdi:book-open-page-variant">Core Concepts</Button>
+<Button href="/docs/components" variant="glass" icon="mdi:puzzle">Components</Button>
+
 
 <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.

From 9c218b2e2caa5b6a849504243d45bd48b8c060ac Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 22:42:33 +0530
Subject: [PATCH 12/15] chore: replace button components with markdown links
 for improved readability in installation guide

---
 template/src/content/docs/installation/index.mdx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/template/src/content/docs/installation/index.mdx b/template/src/content/docs/installation/index.mdx
index 7fc3a3c..58e381b 100644
--- a/template/src/content/docs/installation/index.mdx
+++ b/template/src/content/docs/installation/index.mdx
@@ -322,11 +322,9 @@ Check the changelog before updating to review any breaking changes.
 
 Now that you have DocuBase installed, here's what to do next:
 
-
-<Button href="/docs/getting-started" variant="glass" icon="mdi:rocket-launch">Getting Started</Button>
-<Button href="/docs/core-concepts" variant="glass" icon="mdi:book-open-page-variant">Core Concepts</Button>
-<Button href="/docs/components" variant="glass" icon="mdi:puzzle">Components</Button>
-
+- [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.

From 44a2d55735de9a1a5ae8b895eae005768fcf793f Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 22:45:08 +0530
Subject: [PATCH 13/15] chore: add margin to icon div for improved spacing in
 FeatureCard component

---
 template/src/components/FeatureCard.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/template/src/components/FeatureCard.astro b/template/src/components/FeatureCard.astro
index 6803961..4f48f28 100644
--- a/template/src/components/FeatureCard.astro
+++ b/template/src/components/FeatureCard.astro
@@ -16,7 +16,7 @@ const Tag = href ? 'a' : 'div';
   ]}
 >
   <div class="flex flex-col items-center text-center">
-    <div class="text-gray-700 dark:text-gray-300" set:html={iconHtml} />
+    <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>

From f9ab419cbf1adf7e75ad29cf73ebb2c16595efca Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 22:50:36 +0530
Subject: [PATCH 14/15] chore: update markdown theme to 'github-dark' and
 enhance tab styles for improved readability

---
 astro.config.mjs                   |  3 +++
 template/astro.config.mjs          |  3 +++
 template/src/components/Tabs.astro | 10 +++++-----
 template/src/styles/global.css     | 16 ++++++++--------
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 4b68305..529bc68 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -32,5 +32,8 @@ export default defineConfig({
   ],
   markdown: {
     rehypePlugins: [rehypeSlug],
+    shikiConfig: {
+      theme: 'github-dark',
+    },
   },
 });
\ No newline at end of file
diff --git a/template/astro.config.mjs b/template/astro.config.mjs
index 2336e0a..d554a02 100644
--- a/template/astro.config.mjs
+++ b/template/astro.config.mjs
@@ -30,5 +30,8 @@ export default defineConfig({
   ],
   markdown: {
     rehypePlugins: [rehypeSlug],
+    shikiConfig: {
+      theme: 'github-dark',
+    },
   },
 });
\ No newline at end of file
diff --git a/template/src/components/Tabs.astro b/template/src/components/Tabs.astro
index d9225f4..5e0aa3c 100644
--- a/template/src/components/Tabs.astro
+++ b/template/src/components/Tabs.astro
@@ -23,8 +23,8 @@ const tabsId = id || `tabs-${hashString(labels.join('-'))}`;
             'rounded-t-lg',
             'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-inset',
             index === defaultIndex
-              ? 'text-white bg-gray-800'
-              : 'text-gray-400 bg-transparent hover:text-gray-200',
+              ? 'text-primary-600 dark:text-white bg-gray-100 dark:bg-gray-800'
+              : '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}
@@ -40,7 +40,7 @@ const tabsId = id || `tabs-${hashString(labels.join('-'))}`;
     })}
   </div>
   <div class:list={[
-      'tab-panels p-4 rounded-tr-lg rounded-br-lg rounded-bl-lg bg-gray-800 text-gray-100 [&_p]:!text-gray-100 [&_li]:!text-gray-100',
+      'tab-panels p-4 rounded-tr-lg rounded-br-lg rounded-bl-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 [&_p]:!text-gray-800 dark:[&_p]:!text-gray-100 [&_li]:!text-gray-800 dark:[&_li]:!text-gray-100',
       defaultIndex !== 0 && 'rounded-tl-lg'
     ]}>
     <slot />
@@ -52,8 +52,8 @@ const tabsId = id || `tabs-${hashString(labels.join('-'))}`;
     if ((window as any).__tabsInitialized) return;
     (window as any).__tabsInitialized = true;
 
-    const TAB_ACTIVE_CLASSES = ['text-white', 'bg-gray-800'];
-    const TAB_INACTIVE_CLASSES = ['text-gray-400', 'bg-transparent'];
+    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', 'bg-transparent'];
 
     function activateTab(container: Element, index: number) {
       const tabs = Array.from(container.querySelectorAll('.tab-button')) as HTMLElement[];
diff --git a/template/src/styles/global.css b/template/src/styles/global.css
index 4187a95..bfd78d9 100644
--- a/template/src/styles/global.css
+++ b/template/src/styles/global.css
@@ -118,20 +118,20 @@ html, body {
   margin: 1.5rem 0;
 }
 
-:where(article.prose) th:not(.text-sm th),
-:where(article.prose) td:not(.text-sm td) {
+: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) th:not(.text-sm th) {
+:where(article.prose) table:not(.text-sm) th {
   background: rgb(249 250 251);
   font-weight: 600;
   color: rgb(17 24 39);
 }
 
-:where(article.prose) td:not(.text-sm td) {
+:where(article.prose) table:not(.text-sm) td {
   color: rgb(55 65 81);
 }
 
@@ -205,17 +205,17 @@ html, body {
 }
 
 /* Exclude custom Table component from prose table styles in dark mode */
-:where(html.dark article.prose) th:not(.text-sm th),
-:where(html.dark article.prose) td:not(.text-sm td) {
+: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) th:not(.text-sm th) {
+: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) td:not(.text-sm td) {
+:where(html.dark article.prose) table:not(.text-sm) td {
   color: rgb(209 213 219);
 }
 

From 707a3c8a1c5098b2587df2140255b9241956f17e Mon Sep 17 00:00:00 2001
From: Sithumli Nanayakkara <sithumlimethaya2007@gmail.com>
Date: Thu, 5 Feb 2026 23:11:13 +0530
Subject: [PATCH 15/15] chore: add initial changeset for UI update to website

---
 .changeset/green-cups-divide.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/green-cups-divide.md

diff --git a/.changeset/green-cups-divide.md b/.changeset/green-cups-divide.md
new file mode 100644
index 0000000..6b4f6db
--- /dev/null
+++ b/.changeset/green-cups-divide.md
@@ -0,0 +1,5 @@
+---
+"create-docubase": patch
+---
+
+UI Update website