diff --git a/package-lock.json b/package-lock.json
index 6101faf..583a8fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "astro": "^4.16.7",
         "astro-og-canvas": "^0.5.4",
         "svelte": "^5.1.1",
+        "tailwind-merge": "^2.5.4",
         "tailwindcss": "^3.4.14",
         "typescript": "^5.6.3"
       },
@@ -6839,6 +6840,15 @@
         "typescript": "^4.9.4 || ^5.0.0"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",
+      "integrity": "sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
diff --git a/package.json b/package.json
index 778f008..4f8abaa 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "astro": "^4.16.7",
     "astro-og-canvas": "^0.5.4",
     "svelte": "^5.1.1",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.6.3"
   },
diff --git a/src/assets/earth.jpg b/src/assets/earth.jpg
index 01f7435..23cddae 100644
Binary files a/src/assets/earth.jpg and b/src/assets/earth.jpg differ
diff --git a/src/components/CodeCopyButton.svelte b/src/components/CodeCopyButton.astro
similarity index 80%
rename from src/components/CodeCopyButton.svelte
rename to src/components/CodeCopyButton.astro
index 180ab57..3be65ce 100644
--- a/src/components/CodeCopyButton.svelte
+++ b/src/components/CodeCopyButton.astro
@@ -1,7 +1,5 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-
-  onMount(() => {
+<script is:inline>
+  document.addEventListener("DOMContentLoaded", () => {
     let copyButtonLabel = "copy";
     let codeBlocks = Array.from(document.querySelectorAll("pre"));
     for (let codeBlock of codeBlocks) {
@@ -13,21 +11,25 @@
         "opacity-50 sm:opacity-20 group-hover:opacity-100 transition-opacity duration-500 absolute top-2 right-2 text-xs bg-base-200 dark:bg-base-700 border border-base-400 dark:border-base-600 py-1 px-2 rounded-xl dark:hover:bg-base-600 hover:bg-base-300";
       copyButton.innerHTML = copyButtonLabel;
 
-      // add class group to codeBlock
+      // Add class 'group' to codeBlock
       codeBlock.classList.add("group");
 
       codeBlock.setAttribute("tabindex", "0");
       codeBlock.appendChild(copyButton);
 
-      codeBlock.parentNode?.insertBefore(wrapper, codeBlock);
-      wrapper.appendChild(codeBlock);
+      // Wrap the codeBlock with the wrapper div
+      let parent = codeBlock.parentNode;
+      if (parent) {
+        parent.insertBefore(wrapper, codeBlock);
+        wrapper.appendChild(codeBlock);
+      }
 
       copyButton.addEventListener("click", async () => {
         await copyCode(codeBlock, copyButton);
       });
     }
 
-    async function copyCode(block: HTMLElement, button: HTMLElement) {
+    async function copyCode(block, button) {
       let code = block.querySelector("code");
       if (!code) return;
 
@@ -39,7 +41,6 @@
       let oldClassName = button.className;
       button.className =
         "opacity-100 transition-opacity duration-500 absolute top-2 right-2 text-xs bg-green-200 dark:bg-green-900 border border-green-300 dark:border-green-700 text-green-800 dark:text-green-300 py-1 px-2 rounded-xl";
-
       button.innerText = "copied!";
 
       setTimeout(() => {
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 982274a..2045108 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -5,11 +5,12 @@ import {
   SEARCH_ENABLED,
   SITE_FAVICON,
 } from "../config.json";
-import ThemeToggle from "./ThemeToggle.svelte";
-import Search from "./search/Search.svelte";
+import ThemeToggle from "./ThemeToggle.astro";
 import HeaderLink from "./HeaderLink.astro";
+import CodeCopyButton from "./CodeCopyButton.astro";
+
 import CommandPalette from "./search/CommandPalette.svelte";
-import CodeCopyButton from "./CodeCopyButton.svelte";
+import Search from "./search/Search.svelte";
 
 const { active } = Astro.props;
 ---
@@ -38,7 +39,7 @@ const { active } = Astro.props;
         class="text-sm font-semibold leading-6">About</HeaderLink
       >
 
-      {MANUAL_DARK_MODE ? <ThemeToggle client:visible /> : null}
+      {MANUAL_DARK_MODE ? <ThemeToggle /> : null}
 
       {SEARCH_ENABLED ? <Search client:visible /> : null}
     </div>
@@ -46,4 +47,4 @@ const { active } = Astro.props;
 </header>
 
 <CommandPalette client:load />
-<CodeCopyButton client:load />
+<CodeCopyButton />
diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro
index 513b858..c54ee83 100644
--- a/src/components/Pagination.astro
+++ b/src/components/Pagination.astro
@@ -2,6 +2,12 @@
 import { BASE } from "../config.json";
 import PaginationNumber from "./PaginationNumber.astro";
 
+type Props = {
+  total: number;
+  current: number;
+  tag?: string;
+};
+
 const { total, current, tag } = Astro.props;
 
 function getVisiblePages(total: number, current: number): Array<number | null> {
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
new file mode 100644
index 0000000..0b2d334
--- /dev/null
+++ b/src/components/ThemeToggle.astro
@@ -0,0 +1,99 @@
+---
+import { cn } from "../utils";
+import type { HTMLAttributes } from "astro/types";
+
+export type Props = HTMLAttributes<"button">;
+
+const { class: className, ...props } = Astro.props;
+---
+
+<button
+  class={cn(
+    "flex items-center justify-center text-base-950 hover:text-base-600 dark:text-base-50 dark:hover:text-base-400",
+    className
+  )}
+  data-theme-toggle
+  {...props}
+>
+  <span class="sr-only">Theme Toggle</span>
+
+  <!-- Dark Mode Icon -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-6 h-6 hidden dark:block"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+    ></path>
+  </svg>
+
+  <!-- Light Mode Icon -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-6 h-6 block dark:hidden"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386
+      6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591
+      1.591M5.25 12H3m4.227-4.773L5.636
+      5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0
+      017.5 0z"
+    ></path>
+  </svg>
+</button>
+
+<script>
+  (() => {
+    let darkMode = false;
+
+    function setTheme(dark: boolean) {
+      const root = document.documentElement;
+      if (dark) {
+        root.classList.add("dark");
+      } else {
+        root.classList.remove("dark");
+      }
+    }
+
+    function toggleTheme() {
+      darkMode = !darkMode;
+      localStorage.setItem("darkMode", JSON.stringify(darkMode));
+      setTheme(darkMode);
+    }
+
+    // Initialize theme on page load
+    const savedDarkMode = localStorage.getItem("darkMode");
+    if (savedDarkMode !== null) {
+      darkMode = JSON.parse(savedDarkMode);
+    } else {
+      darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+    setTheme(darkMode);
+
+    // Listen to system theme changes
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", (e) => e.matches && toggleTheme());
+
+    window
+      .matchMedia("(prefers-color-scheme: light)")
+      .addEventListener("change", (e) => e.matches && toggleTheme());
+
+    // Add click event to toggle button
+    document
+      .querySelector("button[data-theme-toggle]")
+      ?.addEventListener("click", toggleTheme);
+  })();
+</script>
diff --git a/src/components/ThemeToggle.svelte b/src/components/ThemeToggle.svelte
deleted file mode 100644
index 6d48646..0000000
--- a/src/components/ThemeToggle.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-
-  let darkMode = false;
-
-  onMount(() => {
-    // load from local storage
-    const savedDarkMode = localStorage.getItem("darkMode");
-    if (savedDarkMode) {
-      darkMode = JSON.parse(savedDarkMode);
-    } else {
-      // prefers color scheme?
-      darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    }
-
-    // remove local storage
-    // localStorage.removeItem("darkMode");
-    setTheme(darkMode);
-
-    // recommended method for newer browsers: specify event-type as first argument
-    window
-      .matchMedia("(prefers-color-scheme: dark)")
-      .addEventListener("change", (e) => e.matches && toggleTheme());
-
-    window
-      .matchMedia("(prefers-color-scheme: light)")
-      .addEventListener("change", (e) => e.matches && toggleTheme());
-  });
-
-  function setTheme(dark: Boolean) {
-    var root = document.getElementsByTagName("html")[0];
-
-    if (dark) {
-      root.classList.add("dark");
-    } else {
-      root.classList.remove("dark");
-    }
-  }
-
-  function toggleTheme() {
-    darkMode = !darkMode;
-    // save to local storage
-    localStorage.setItem("darkMode", JSON.stringify(darkMode));
-    setTheme(darkMode);
-  }
-
-  let classes = "";
-  export { classes as class };
-
-  export let id = "";
-</script>
-
-<button
-  on:click={toggleTheme}
-  class="flex items-center justify-center text-base-950 hover:text-base-600 dark:text-base-50 dark:hover:text-base-400 {classes}"
-  {id}
->
-  <span class="sr-only">Theme Toggle</span>
-
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    class="w-6 h-6 hidden dark:block"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
-    />
-  </svg>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    class="w-6 h-6 block dark:hidden"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
-    />
-  </svg>
-</button>
diff --git a/src/components/alerts/ErrorAlert.astro b/src/components/alerts/ErrorAlert.astro
new file mode 100644
index 0000000..37d7edf
--- /dev/null
+++ b/src/components/alerts/ErrorAlert.astro
@@ -0,0 +1,41 @@
+---
+import { cn } from "../../utils";
+
+interface Props {
+  title: string;
+  class?: string;
+}
+
+const { title, class: className } = Astro.props;
+---
+
+<div
+  class={cn(
+    "rounded-xl bg-red-50 dark:bg-red-500/5 p-4 dark:ring-1 dark:ring-red-500/10 not-prose max-w-full",
+    className
+  )}
+>
+  <div class="flex">
+    <div class="flex-shrink-0">
+      <svg
+        class="h-5 w-5 text-red-500"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+          clip-rule="evenodd"></path>
+      </svg>
+    </div>
+    <div class="ml-3">
+      <h3 class="text-sm font-medium text-red-800 dark:text-red-500">
+        {title}
+      </h3>
+      <div class="mt-2 text-sm text-red-700 dark:text-red-400">
+        <slot />
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/components/alerts/ErrorAlert.svelte b/src/components/alerts/ErrorAlert.svelte
deleted file mode 100644
index b6eb934..0000000
--- a/src/components/alerts/ErrorAlert.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-	export let title: string;
-
-	let classes: string;
-
-	export { classes as class };
-</script>
-
-<div class="rounded-xl bg-red-50 dark:bg-red-500/5 p-4 dark:ring-1 dark:ring-red-500/10 not-prose max-w-full {classes}">
-	<div class="flex">
-		<div class="flex-shrink-0">
-			<svg class="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-				<path
-					fill-rule="evenodd"
-					d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		</div>
-		<div class="ml-3">
-			<h3 class="text-sm font-medium text-red-800 dark:text-red-500">
-				{title}
-			</h3>
-			<div class="mt-2 text-sm text-red-700 dark:text-red-400">
-				<slot />
-			</div>
-		</div>
-	</div>
-</div>
diff --git a/src/components/alerts/InfoAlert.astro b/src/components/alerts/InfoAlert.astro
new file mode 100644
index 0000000..75e4293
--- /dev/null
+++ b/src/components/alerts/InfoAlert.astro
@@ -0,0 +1,41 @@
+---
+import { cn } from "../../utils";
+
+interface Props {
+  title: string;
+  class?: string;
+}
+
+const { title, class: className } = Astro.props;
+---
+
+<div
+  class={cn(
+    "rounded-xl bg-blue-50 dark:bg-blue-500/5 p-4 dark:ring-1 dark:ring-blue-500/10 not-prose max-w-full",
+    className
+  )}
+>
+  <div class="flex">
+    <div class="flex-shrink-0">
+      <svg
+        class="h-5 w-5 text-blue-500"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+          clip-rule="evenodd"></path>
+      </svg>
+    </div>
+    <div class="ml-3">
+      <h3 class="text-sm font-medium text-blue-800 dark:text-blue-500">
+        {title}
+      </h3>
+      <div class="mt-2 text-sm text-blue-700 dark:text-blue-400">
+        <slot />
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/components/alerts/InfoAlert.svelte b/src/components/alerts/InfoAlert.svelte
deleted file mode 100644
index ab6258f..0000000
--- a/src/components/alerts/InfoAlert.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-	export let title: string;
-
-	let classes: string;
-
-	export { classes as class };
-</script>
-
-<div class="rounded-xl bg-blue-50 dark:bg-blue-500/5 p-4 dark:ring-1 dark:ring-blue-500/10 not-prose max-w-full {classes}">
-	<div class="flex">
-		<div class="flex-shrink-0">
-			<svg class="h-5 w-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-				<path
-					fill-rule="evenodd"
-					d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		</div>
-		<div class="ml-3">
-			<h3 class="text-sm font-medium text-blue-800 dark:text-blue-500">{title}</h3>
-			<div class="mt-2 text-sm text-blue-700 dark:text-blue-400">
-				<slot></slot>
-			</div>
-		</div>
-	</div>
-</div>
diff --git a/src/components/alerts/SuccessAlert.astro b/src/components/alerts/SuccessAlert.astro
new file mode 100644
index 0000000..87650ee
--- /dev/null
+++ b/src/components/alerts/SuccessAlert.astro
@@ -0,0 +1,43 @@
+---
+import { cn } from "../../utils";
+
+interface Props {
+  title: string;
+  class?: string;
+}
+
+const { title, class: className } = Astro.props;
+---
+
+<div
+  class={cn(
+    "rounded-xl bg-green-50 dark:bg-green-500/5 p-4 dark:ring-1 dark:ring-green-500/10 not-prose max-w-full",
+    className
+  )}
+>
+  <div class="flex">
+    <div class="flex-shrink-0">
+      <svg
+        class="h-5 w-5 text-green-500"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+          clip-rule="evenodd"></path>
+      </svg>
+    </div>
+    <div class="ml-3">
+      <h3 class="text-sm font-medium text-green-800 dark:text-green-500">
+        {title}
+      </h3>
+      <div class="mt-2 text-sm text-green-700 dark:text-green-400">
+        <p>
+          <slot />
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/components/alerts/SuccessAlert.svelte b/src/components/alerts/SuccessAlert.svelte
deleted file mode 100644
index a8f66ba..0000000
--- a/src/components/alerts/SuccessAlert.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-	export let title: string;
-
-	let classes: string;
-
-	export { classes as class };
-</script>
-<div class="rounded-xl bg-green-50 dark:bg-green-500/5 p-4 dark:ring-1 dark:ring-green-500/10 not-prose max-w-full {classes}">
-	<div class="flex">
-		<div class="flex-shrink-0">
-			<svg
-				class="h-5 w-5 text-green-500"
-				viewBox="0 0 20 20"
-				fill="currentColor"
-				aria-hidden="true"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		</div>
-		<div class="ml-3">
-			<h3 class="text-sm font-medium text-green-800 dark:text-green-500">{title}</h3>
-			<div class="mt-2 text-sm text-green-700 dark:text-green-400">
-				<p>
-					<slot></slot>
-				</p>
-			</div>
-		</div>
-	</div>
-</div>
diff --git a/src/components/alerts/WarningAlert.astro b/src/components/alerts/WarningAlert.astro
new file mode 100644
index 0000000..4f4de88
--- /dev/null
+++ b/src/components/alerts/WarningAlert.astro
@@ -0,0 +1,43 @@
+---
+import { cn } from "../../utils";
+
+interface Props {
+  title: string;
+  class?: string;
+}
+
+const { title, class: className } = Astro.props;
+---
+
+<div
+  class={cn(
+    "rounded-xl bg-amber-50 dark:bg-amber-500/5 p-4 dark:ring-1 dark:ring-amber-500/10 not-prose max-w-full",
+    className
+  )}
+>
+  <div class="flex">
+    <div class="flex-shrink-0">
+      <svg
+        class="h-5 w-5 text-amber-500"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+          clip-rule="evenodd"></path>
+      </svg>
+    </div>
+    <div class="ml-3">
+      <h3 class="text-sm font-medium text-amber-800 dark:text-amber-400">
+        {title}
+      </h3>
+      <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
+        <p>
+          <slot />
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/components/alerts/WarningAlert.svelte b/src/components/alerts/WarningAlert.svelte
deleted file mode 100644
index f51ef0d..0000000
--- a/src/components/alerts/WarningAlert.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-	export let title: string;
-	let classes: string;
-
-	export { classes as class };
-</script>
-
-<div class="rounded-xl bg-amber-50 dark:bg-amber-500/5 p-4 dark:ring-1 dark:ring-amber-500/10 not-prose max-w-full {classes}">
-	<div class="flex">
-		<div class="flex-shrink-0">
-			<svg
-				class="h-5 w-5 text-amber-500"
-				viewBox="0 0 20 20"
-				fill="currentColor"
-				aria-hidden="true"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		</div>
-		<div class="ml-3">
-			<h3 class="text-sm font-medium text-amber-800 dark:text-amber-400">{title}</h3>
-			<div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
-				<p>
-					<slot></slot>
-				</p>
-			</div>
-		</div>
-	</div>
-</div>
diff --git a/src/components/search/CommandPalette.svelte b/src/components/search/CommandPalette.svelte
index e3edb86..b63682d 100644
--- a/src/components/search/CommandPalette.svelte
+++ b/src/components/search/CommandPalette.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { BASE } from "../../config.json";
+
   import { fade, slide } from "svelte/transition";
   import type { Pagefind } from "vite-plugin-pagefind/types";
   import { showSearch } from "./CommandPaletteStore";
@@ -67,7 +69,7 @@
     try {
       // @ts-ignore
       pagefind = await import(
-        import.meta.env.BASE_URL + "/pagefind/pagefind.js"
+        BASE + "/pagefind/pagefind.js"
       );
     } catch (error) {
       console.error("Pagefind module not found, will retry after build");
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 7820dfa..2b12da0 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -49,10 +49,10 @@ const { title, description, image } = Astro.props;
   </head>
 
   <body
-    class="bg-base-100 dark:bg-base-950 min-h-full flex mx-1 sm:mx-4 transition-all duration-150"
+    class="bg-base-100 dark:bg-base-950 flex mx-1 sm:mx-4 transition-all duration-150"
   >
     <div
-      class="max-w-6xl mx-auto rounded-xl my-1 sm:my-8 w-full min-h-screen bg-base-50 ring-1 ring-base-200 dark:bg-base-900 dark:ring-base-300/20"
+      class="shadow-lg max-w-6xl mx-auto rounded-xl my-1 sm:my-8 w-full bg-base-50 ring-1 ring-base-200 dark:bg-base-900 dark:ring-base-300/20"
     >
       <div class="w-full">
         <slot />
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 04879a4..eeeb5fd 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -1,33 +1,9 @@
 ---
-import { colorBaseClasses, colorAccentClasses } from "src/colors";
-import { ACCENT_COLOR, BASE_COLOR } from "../config.json";
-
-const { includeSearch } = Astro.props;
+import ProseWrapper from "./ProseWrapper.astro";
 ---
 
-{
-  includeSearch ? (
-    <main
-      data-pagefind-body
-      class={
-        "prose prose-img:rounded-xl dark:prose-invert prose-a:no-underline prose-inline-code:bg-base-100 dark:prose-inline-code:bg-base-800 prose-inline-code:p-1 prose-inline-code:rounded-md " +
-        colorBaseClasses[BASE_COLOR] +
-        " " +
-        colorAccentClasses[ACCENT_COLOR]
-      }
-    >
-      <slot />
-    </main>
-  ) : (
-    <main
-      class={
-        "prose prose-img:rounded-xl dark:prose-invert prose-a:no-underline prose-inline-code:bg-base-100 dark:prose-inline-code:bg-base-800 prose-inline-code:p-1 prose-inline-code:rounded-md " +
-        colorBaseClasses[BASE_COLOR] +
-        " " +
-        colorAccentClasses[ACCENT_COLOR]
-      }
-    >
-      <slot />
-    </main>
-  )
-}
+<ProseWrapper>
+  <main data-pagefind-body>
+    <slot />
+  </main>
+</ProseWrapper>
diff --git a/src/layouts/PostList.astro b/src/layouts/PostList.astro
new file mode 100644
index 0000000..f9ec6cd
--- /dev/null
+++ b/src/layouts/PostList.astro
@@ -0,0 +1,40 @@
+---
+import { SITE_TITLE, SITE_DESCRIPTION } from "../config.json";
+
+import Footer from "$components/Footer.astro";
+import Header from "$components/Header.astro";
+import BaseLayout from "$layouts/BaseLayout.astro";
+import BlogEntry from "$components/BlogEntry.astro";
+
+import Pagination from "$components/Pagination.astro";
+import ProseWrapper from "./ProseWrapper.astro";
+
+type Props = {
+  posts: Array<any>;
+  totalPages: number;
+  currentPage: number;
+  tag?: string;
+};
+
+const { posts, totalPages, currentPage, tag } = Astro.props;
+---
+
+<BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
+  <Header active="blog" />
+  <main class="max-w-2xl lg:max-w-3xl mx-auto mt-16 px-4">
+    <ProseWrapper>
+      <slot />
+    </ProseWrapper>
+    <div class="my-14 space-y-16 max-w-3xl">
+      {posts.map((post: any) => <BlogEntry {...post.data} slug={post.slug} />)}
+    </div>
+
+    {
+      totalPages > 1 ? (
+        <Pagination current={currentPage} total={totalPages} {tag} />
+      ) : null
+    }
+  </main>
+
+  <Footer />
+</BaseLayout>
diff --git a/src/layouts/ProseWrapper.astro b/src/layouts/ProseWrapper.astro
new file mode 100644
index 0000000..d4ba890
--- /dev/null
+++ b/src/layouts/ProseWrapper.astro
@@ -0,0 +1,16 @@
+---
+import { colorBaseClasses, colorAccentClasses } from "src/colors";
+import { ACCENT_COLOR, BASE_COLOR } from "../config.json";
+import { cn } from "../utils";
+---
+
+<div
+  class={cn(
+    "prose prose-img:rounded-xl dark:prose-invert prose-a:no-underline",
+    "prose-inline-code:bg-base-100 dark:prose-inline-code:bg-base-800 prose-inline-code:p-1 prose-inline-code:rounded-md",
+    colorBaseClasses[BASE_COLOR],
+    colorAccentClasses[ACCENT_COLOR]
+  )}
+>
+  <slot />
+</div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 219e93d..3fae82b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,37 +1,15 @@
 ---
-import { SITE_TITLE, SITE_DESCRIPTION, POSTS_PER_PAGE } from "../config.json";
-
-import Footer from "$components/Footer.astro";
-import Header from "$components/Header.astro";
-import BaseLayout from "$layouts/BaseLayout.astro";
-import BlogPost from "$layouts/BlogPost.astro";
-import BlogEntry from "$components/BlogEntry.astro";
+import { POSTS_PER_PAGE } from "../config.json";
 
 import { Content } from "$content/info/description.md";
-import Pagination from "$components/Pagination.astro";
 import { getBlogPosts } from "src/utils";
+import PostList from "$layouts/PostList.astro";
 
 const posts = (await getBlogPosts()).splice(0, POSTS_PER_PAGE);
 
 const total = Math.ceil((await getBlogPosts()).length / POSTS_PER_PAGE);
 ---
 
-<BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <Header active="blog" />
-  <main class="max-w-2xl lg:max-w-3xl mx-auto mt-16 px-4">
-    <BlogPost>
-      <Content />
-      <div class="my-14 space-y-16 max-w-3xl not-prose">
-        {
-          posts.map((post: any) => (
-            <BlogEntry {...post.data} slug={post.slug} />
-          ))
-        }
-      </div>
-    </BlogPost>
-
-    {total > 1 ? <Pagination current={1} total={total} /> : null}
-  </main>
-
-  <Footer />
-</BaseLayout>
+<PostList {posts} totalPages={total} currentPage={1}>
+  <Content />
+</PostList>
diff --git a/src/pages/pages/[...index].astro b/src/pages/pages/[...index].astro
index 94fbebf..29d35b1 100644
--- a/src/pages/pages/[...index].astro
+++ b/src/pages/pages/[...index].astro
@@ -1,18 +1,7 @@
 ---
-import {
-  SITE_TITLE,
-  SITE_DESCRIPTION,
-  POSTS_PER_PAGE,
-} from "../../config.json";
-
-import Header from "$components/Header.astro";
-import Footer from "$components/Footer.astro";
-import BaseLayout from "$layouts/BaseLayout.astro";
-import BlogEntry from "$components/BlogEntry.astro";
-import Pagination from "$components/Pagination.astro";
+import { POSTS_PER_PAGE } from "../../config.json";
 import { getBlogPosts } from "src/utils";
-
-import BlogPost from "$layouts/BlogPost.astro";
+import PostList from "$layouts/PostList.astro";
 
 export async function getStaticPaths() {
   const posts = await getBlogPosts();
@@ -33,23 +22,6 @@ const posts = (await getBlogPosts()).splice(
 const total = Math.ceil((await getBlogPosts()).length / POSTS_PER_PAGE);
 ---
 
-<BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <Header active="blog" />
-
-  <main class="mx-auto max-w-2xl lg:max-w-3xl py-16 px-4">
-    <BlogPost>
-      <h1>All blog posts</h1>
-      <div class="my-14 space-y-16 max-w-3xl not-prose">
-        {
-          posts.map((post: any) => (
-            <BlogEntry {...post.data} slug={post.slug} />
-          ))
-        }
-      </div>
-    </BlogPost>
-
-    {total > 1 ? <Pagination current={index} total={total} /> : null}
-  </main>
-
-  <Footer />
-</BaseLayout>
+<PostList {posts} totalPages={total} currentPage={index}>
+  <h1>All blog posts</h1>
+</PostList>
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 150b21e..9a8058b 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -44,7 +44,7 @@ if (replacedHero && !images[replacedHero])
         />
       ) : null
     }
-    <BlogPost includeSearch={true}>
+    <BlogPost>
       <div class="flex mt-8 items-center gap-x-4 text-xs">
         <FormattedDate date={post.data.pubDate} />
         <div class="flex gap-x-2">
diff --git a/src/pages/tags/[...tag]/[...index].astro b/src/pages/tags/[...tag]/[...index].astro
index e298095..f419db7 100644
--- a/src/pages/tags/[...tag]/[...index].astro
+++ b/src/pages/tags/[...tag]/[...index].astro
@@ -1,24 +1,14 @@
 ---
-import {
-  SITE_TITLE,
-  SITE_DESCRIPTION,
-  POSTS_PER_PAGE,
-  ACCENT_COLOR,
-  BASE_COLOR,
-} from "../../../config.json";
+import { POSTS_PER_PAGE } from "../../../config.json";
 
-import Header from "$components/Header.astro";
-import Footer from "$components/Footer.astro";
-import BaseLayout from "$layouts/BaseLayout.astro";
-import BlogEntry from "$components/BlogEntry.astro";
-import Pagination from "$components/Pagination.astro";
-import { colorBaseClasses, colorAccentClasses } from "src/colors";
 import { getBlogPosts } from "src/utils";
+import PostList from "$layouts/PostList.astro";
 
 export async function getStaticPaths() {
   const posts = await getBlogPosts();
   const tags = new Map<string, number>();
 
+  // get number of posts for each tag
   posts.forEach((post: any) => {
     post.data.tags?.forEach((tag: string) =>
       tags.set(tag, (tags.get(tag) || 0) + 1)
@@ -31,23 +21,15 @@ export async function getStaticPaths() {
   }[] = [];
 
   Array.from(tags).forEach(([tag, count]) => {
-    const sanitizedTag = tag.split(" ").join("-"); // Replace spaces with hyphens
+    const sanitizedTag = tag.split(" ").join("-");
     const totalPages = Math.ceil(count / POSTS_PER_PAGE);
 
-    // 1. Path without index (defaults to page 1)
     paths.push({
       params: { tag: sanitizedTag },
       props: { tag, index: 1 },
     });
 
-    // 2. Path with index=1 (same as no index)
-    paths.push({
-      params: { tag: sanitizedTag, index: "1" },
-      props: { tag, index: 1 },
-    });
-
-    // 3. Additional paginated paths (from page 2 onwards)
-    for (let i = 2; i <= totalPages; i++) {
+    for (let i = 1; i <= totalPages; i++) {
       paths.push({
         params: { tag: sanitizedTag, index: i.toString() },
         props: { tag, index: i },
@@ -70,36 +52,14 @@ const total = Math.ceil(
 );
 ---
 
-<BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <Header active="blog" />
-
-  <main class="mx-auto max-w-2xl lg:max-w-3xl py-16">
-    <div
-      class={"prose dark:prose-invert text-base-900 dark:text-base-50 px-4 " +
-        colorBaseClasses[BASE_COLOR] +
-        " " +
-        colorAccentClasses[ACCENT_COLOR]}
-    >
-      <h1 class="inline-flex gap-4 flex-col sm:flex-row sm:items-center">
-        Posts tagged with <div>
-          <p
-            class="not-prose bold text-xl rounded-full inline-block bg-base-200 px-4 py-1.5 text-base-800 dark:bg-base-800 dark:text-base-300 border border-base-300 dark:border-base-700"
-          >
-            {tag}
-          </p>
-        </div>
-      </h1>
+<PostList {posts} totalPages={total} currentPage={index ?? 1} {tag}>
+  <h1 class="inline-flex gap-4 flex-col sm:flex-row sm:items-center">
+    Posts tagged with <div>
+      <p
+        class="not-prose bold text-xl rounded-full inline-block bg-base-200 px-4 py-1.5 text-base-800 dark:bg-base-800 dark:text-base-300 border border-base-300 dark:border-base-700"
+      >
+        {tag}
+      </p>
     </div>
-    <div class="my-14 space-y-16 max-w-3xl px-4">
-      {posts.map((post: any) => <BlogEntry {...post.data} slug={post.slug} />)}
-    </div>
-
-    {
-      total > 1 ? (
-        <Pagination current={index ?? 1} total={total} tag={tag} />
-      ) : null
-    }
-  </main>
-
-  <Footer />
-</BaseLayout>
+  </h1>
+</PostList>
diff --git a/src/utils.ts b/src/utils.ts
index 197eb68..cf79983 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,11 @@
 import { getCollection } from "astro:content";
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
 
 export const getBlogPosts = async () => {
   const posts = (await getCollection("blog"))