diff --git a/components/web-footer.vue b/components/web-footer.vue
index 426e743..8d7b16b 100644
--- a/components/web-footer.vue
+++ b/components/web-footer.vue
@@ -1,12 +1,18 @@
+<script setup lang="ts">
+import WebThemeToggle from './web-theme-toggle.vue';
+
+</script>
+
 <template>
-    <footer id="web-footer">
-        <section id="web-footer-content">
-            <hr>
+    <footer class="article">
+        <section class="web-section">
+            <h3 class="text-5xl mb-4">Techit's Home ////////// thawia.ng</h3>
             <small>
                 Copyright &copy; Techit Thawiang 2025 (2568). All rights reserved.<br>
                 PGP/GPG Key: <code style="font-size: 12px;"><a href="/portal/f/Techit Thawiang_0xE649CED321557334_public.asc">4116 33BE 1B4A 19D4 8D77  9ADE E649 CED3 2155 7334</a></code><br>
                 Powered by <a href="https://dailitation.xyz">dailitation.xyz</a>, <a href="https://github.com/TechitWinner/web">Source Code</a>.
-            </small>
+            </small><br/>
+            <WebThemeToggle/>
         </section>
     </footer>
 </template>
\ No newline at end of file
diff --git a/components/web-header.vue b/components/web-header.vue
new file mode 100644
index 0000000..1f8120f
--- /dev/null
+++ b/components/web-header.vue
@@ -0,0 +1,39 @@
+<template>
+    <header class="web-header">
+        <section class="web-heading">
+            <NuxtLink href="/" class="web-heading-left-section hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10">
+                <div class="flex items-center h-full bg-[#0066FF]">
+                    <img width="36" height="36"src="/favicon.ico">
+                </div>
+                <p class="web-nav-title mx-2 text-(--ui-text)">thawia.ng</p>
+            </NuxtLink>
+            <div class="web-heading-right-section">
+                <nav class="nav-links">
+                    <ul class="nav-wrapper">
+                        <li class="nav-link">
+                            <NuxtLink href="/">Home</NuxtLink>
+                        </li>
+                        <!-- <li class="nav-link">
+                            <NuxtLink href="/blog">Blog</NuxtLink>
+                        </li>
+                        <li class="nav-link">
+                            <NuxtLink href="/projects">Projects</NuxtLink>
+                        </li> 
+                        <li class="nav-link">
+                            <NuxtLink href="/about">About</NuxtLink>
+                        </li>-->
+                        <li class="nav-link">
+                            <NuxtLink href="/contact">Contact</NuxtLink>
+                        </li>
+                        <li class="nav-link">
+                            <NuxtLink href="/fonts">Fonts</NuxtLink>
+                        </li>
+                        <li class="nav-link">
+                            <NuxtLink href="/collections">Collections</NuxtLink>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </section>
+    </header>
+</template>
\ No newline at end of file
diff --git a/components/web-theme-toggle.vue b/components/web-theme-toggle.vue
new file mode 100644
index 0000000..b5e8ac9
--- /dev/null
+++ b/components/web-theme-toggle.vue
@@ -0,0 +1,25 @@
+<script setup>
+const colorMode = useColorMode()
+defineProps({
+  isCompact: Boolean,
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+})
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <button @click="isDark = !isDark" class="btn btn-neutral">Toggle Theme</button>
+
+    <template #fallback>
+      <button class="btn btn-neutral">Loading...</button>
+    </template>
+  </ClientOnly>
+</template>
diff --git a/layouts/default.vue b/layouts/default.vue
index eefafd4..c1111c0 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,14 +1,6 @@
 <template>
     <div>
-        <header id="web-header">
-            <section id="web-heading">
-                <img width="36" height="42" style="filter:invert(var(--ui-header-logo-inverted))" src="/thawiang-symbol.svg">
-            </section>
-            <nav id="web-nav">
-                <p class="nav-text"><NuxtLink href="/">Home</NuxtLink>, <NuxtLink href="/contact">Contact</NuxtLink>, <NuxtLink href="/fonts">Fonts</NuxtLink>, <NuxtLink href="/collections">Collections</NuxtLink></p>
-                <hr>
-            </nav>
-        </header>
+        <WebHeader/>
         <slot/>
         <WebFooter/>
     </div>