diff --git a/.nuxt/components.d.ts b/.nuxt/components.d.ts
index 4eef2b8..850f62e 100644
--- a/.nuxt/components.d.ts
+++ b/.nuxt/components.d.ts
@@ -3,7 +3,8 @@ import type { DefineComponent, SlotsType } from 'vue'
 type IslandComponent<T extends DefineComponent> = T & DefineComponent<{}, {refresh: () => Promise<void>}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, SlotsType<{ fallback: { error: unknown } }>>
 interface _GlobalComponents {
       'CardSurat': typeof import("../components/CardSurat.vue")['default']
-    'HeaderNavbar': typeof import("../components/header/Navbar.vue")['default']
+    'Footer': typeof import("../components/Footer.vue")['default']
+    'Navbar': typeof import("../components/Navbar.vue")['default']
     'ToggleMode': typeof import("../components/toggleMode.vue")['default']
     'UAccordion': typeof import("../node_modules/@nuxt/ui/dist/runtime/components/elements/Accordion.vue")['default']
     'UAlert': typeof import("../node_modules/@nuxt/ui/dist/runtime/components/elements/Alert.vue")['default']
@@ -90,7 +91,8 @@ interface _GlobalComponents {
     'USlideovers': IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
     'NuxtRouteAnnouncer': IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
       'LazyCardSurat': typeof import("../components/CardSurat.vue")['default']
-    'LazyHeaderNavbar': typeof import("../components/header/Navbar.vue")['default']
+    'LazyFooter': typeof import("../components/Footer.vue")['default']
+    'LazyNavbar': typeof import("../components/Navbar.vue")['default']
     'LazyToggleMode': typeof import("../components/toggleMode.vue")['default']
     'LazyUAccordion': typeof import("../node_modules/@nuxt/ui/dist/runtime/components/elements/Accordion.vue")['default']
     'LazyUAlert': typeof import("../node_modules/@nuxt/ui/dist/runtime/components/elements/Alert.vue")['default']
@@ -183,7 +185,8 @@ declare module 'vue' {
 }
 
 export const CardSurat: typeof import("../components/CardSurat.vue")['default']
-export const HeaderNavbar: typeof import("../components/header/Navbar.vue")['default']
+export const Footer: typeof import("../components/Footer.vue")['default']
+export const Navbar: typeof import("../components/Navbar.vue")['default']
 export const ToggleMode: typeof import("../components/toggleMode.vue")['default']
 export const UAccordion: typeof import("../node_modules/@nuxt/ui/dist/runtime/components/elements/Accordion.vue")['default']
 export const UAlert: typeof import("../node_modules/@nuxt/ui/dist/runtime/components/elements/Alert.vue")['default']
@@ -270,7 +273,8 @@ export const UModals: IslandComponent<typeof import("../node_modules/nuxt/dist/a
 export const USlideovers: IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
 export const NuxtRouteAnnouncer: IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
 export const LazyCardSurat: typeof import("../components/CardSurat.vue")['default']
-export const LazyHeaderNavbar: typeof import("../components/header/Navbar.vue")['default']
+export const LazyFooter: typeof import("../components/Footer.vue")['default']
+export const LazyNavbar: typeof import("../components/Navbar.vue")['default']
 export const LazyToggleMode: typeof import("../components/toggleMode.vue")['default']
 export const LazyUAccordion: typeof import("../node_modules/@nuxt/ui/dist/runtime/components/elements/Accordion.vue")['default']
 export const LazyUAlert: typeof import("../node_modules/@nuxt/ui/dist/runtime/components/elements/Alert.vue")['default']
diff --git a/.nuxt/manifest/latest.json b/.nuxt/manifest/latest.json
index f3b97f0..d3030c6 100644
--- a/.nuxt/manifest/latest.json
+++ b/.nuxt/manifest/latest.json
@@ -1 +1 @@
-{"id":"dev","timestamp":1728123471456}
\ No newline at end of file
+{"id":"dev","timestamp":1728132253230}
\ No newline at end of file
diff --git a/.nuxt/manifest/meta/dev.json b/.nuxt/manifest/meta/dev.json
index 2da5388..85c0dd8 100644
--- a/.nuxt/manifest/meta/dev.json
+++ b/.nuxt/manifest/meta/dev.json
@@ -1 +1 @@
-{"id":"dev","timestamp":1728123471456,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}
\ No newline at end of file
+{"id":"dev","timestamp":1728132253230,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}
\ No newline at end of file
diff --git a/.nuxt/nitro.json b/.nuxt/nitro.json
index aac8add..b39e523 100644
--- a/.nuxt/nitro.json
+++ b/.nuxt/nitro.json
@@ -1,5 +1,5 @@
 {
-  "date": "2024-10-05T10:18:19.423Z",
+  "date": "2024-10-05T12:44:37.428Z",
   "preset": "nitro-dev",
   "framework": {
     "name": "nuxt",
@@ -9,9 +9,9 @@
     "nitro": "2.9.7"
   },
   "dev": {
-    "pid": 29888,
+    "pid": 68558,
     "workerAddress": {
-      "socketPath": "/tmp/nitro/worker-29888-1.sock"
+      "socketPath": "/tmp/nitro/worker-68558-1.sock"
     }
   }
 }
\ No newline at end of file
diff --git a/.nuxt/nuxt.d.ts b/.nuxt/nuxt.d.ts
index c3d2b77..af9aa0d 100644
--- a/.nuxt/nuxt.d.ts
+++ b/.nuxt/nuxt.d.ts
@@ -4,8 +4,8 @@
 /// <reference types="@nuxtjs/color-mode" />
 /// <reference types="@nuxtjs/google-fonts" />
 /// <reference types="@nuxt/image" />
-/// <reference types="@nuxt/telemetry" />
 /// <reference types="@nuxt/devtools" />
+/// <reference types="@nuxt/telemetry" />
 /// <reference types="nuxt" />
 /// <reference path="types/app-defaults.d.ts" />
 /// <reference path="types/plugins.d.ts" />
diff --git a/.nuxt/tsconfig.json b/.nuxt/tsconfig.json
index f072687..1be98b6 100644
--- a/.nuxt/tsconfig.json
+++ b/.nuxt/tsconfig.json
@@ -117,7 +117,7 @@
         "./tailwind.config/*"
       ],
       "#app-manifest": [
-        "./manifest/meta/dev.json"
+        "./manifest/meta/dev"
       ],
       "#build": [
         "."
diff --git a/components/Footer.vue b/components/Footer.vue
new file mode 100644
index 0000000..2114049
--- /dev/null
+++ b/components/Footer.vue
@@ -0,0 +1,12 @@
+<script setup>
+const since = new Date().getFullYear();
+</script>
+<template>
+  <footer class="py-6">
+    <p class="text-sm text-center text-slate-600 dark:text-slate-300">
+      &copy;
+      <span class="font-semibold">2022 - {{ since }}</span> Ngajee. All rights
+      reserved
+    </p>
+  </footer>
+</template>
diff --git a/components/header/Navbar.vue b/components/Navbar.vue
similarity index 97%
rename from components/header/Navbar.vue
rename to components/Navbar.vue
index 153f8b9..3f40e2c 100644
--- a/components/header/Navbar.vue
+++ b/components/Navbar.vue
@@ -27,7 +27,9 @@ const toggleTheme = () => {
       <div class="flex items-center justify-between">
         <div class="relative">
           <NuxtLink to="/">
-            <h1 class="text-lg md:text-2xl font-semibold dark:text-slate-100">
+            <h1
+              class="text-lg md:text-2xl font-semibold text-primary dark:text-slate-100"
+            >
               Ngajee.
             </h1>
           </NuxtLink>
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 3064ef2..6153ad0 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -1,19 +1,19 @@
 <script setup>
 const { data: surat } = await useFetch("https://equran.id/api/v2/surat");
-// const userName = ref(getItem("username"));
-const userName = ref("username");
 
-// function getItem(item) {
-//   if (process.client) {
-//     return localStorage.getItem(item);
-//   } else {
-//     return undefined;
-//   }
-// }
+const userName = ref(getItem("username"));
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item);
+  } else {
+    return undefined;
+  }
+}
 </script>
 <template>
   <div>
-    <HeaderNavbar />
+    <Navbar />
     <main class="pt-24 container">
       <div
         class="bg-primary dark:bg-teal-900 flex flex-col px-6 py-4 rounded-2xl shadow-md"
@@ -36,5 +36,6 @@ const userName = ref("username");
         />
       </div>
     </main>
+    <Footer />
   </div>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index f2fbc48..7e1c1a7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,14 +2,16 @@
 const isOpen = ref(true);
 const name = ref("");
 
-// definePageMeta({
-//   middleware: "auth",
-// });
+definePageMeta({
+  middleware: "auth",
+});
 
 function setName() {
   if (process.client) {
     localStorage.setItem("username", name.value);
     navigateTo("/dashboard");
+  } else {
+    return undefined;
   }
 }
 </script>
@@ -40,7 +42,6 @@ function setName() {
               type="text"
               placeholder="Masukkan Namamu"
               v-model="name"
-              required
             />
           </label>