This UI is really damn easy to replicate

src/components/Header.astro

@@ -0,0 +1,14 @@
+---
+import { Icon } from "astro-icon/components";
+---
+<div class="h-14 bg-(--background) border-b border-b-(--border) px-4 fixed w-full z-10 flex items-center">
+    <div class="flex items-center gap-3">
+        <button class="inline-flex items-center justify-center whitespcae-nowrap rounded-lg text-sm font-medium ring-(--offset-background) h-10 w-10">
+            <Icon name="lucide:menu" class="text-(--foreground) h-7 w-7" />
+        </button>
+        <a class="flex items-center gap-2" href="/">
+            <Icon name="lucide:radius" class="w-8 h-8 rotate-180 text-(--foreground)" />
+            <h1 class="text-xl font-bold text-(--foreground)"> Radius </h1>
+        </a>
+    </div>
+</div>

src/components/SettingsLoader.astro

@@ -1,4 +1,8 @@
 <script>
     import { Settings } from "@utils/settings.ts";
     const settings = new Settings();
+    window.settings = settings;
+    document.addEventListener('astro:after-swap', async () => {
+        settings.theme()
+    });
 </script>