diff --git a/components/FooterCom.vue b/components/FooterCom.vue
index 8bf4b6d..69064d2 100644
--- a/components/FooterCom.vue
+++ b/components/FooterCom.vue
@@ -1,5 +1,35 @@
+<script setup lang="ts">
+const theme = ref("light");
+</script>
+
 <template>
-  <div>
-    <h1>Footer Component</h1>
-  </div>
+  <header class="p-3 mt-10 bg-[#a2d9ff] font-poppins">
+    <div class="container px-4 mx-auto max-w-6xl flex justify-center">
+      <ul class="flex space-x-2 text-sm text-slate-800 items-end justify-start">
+        <li>Copyright &#169; 2022 - Present</li>
+        <li>|</li>
+        <li>
+          All Rights Reserved by
+          <nuxt-link
+            class="underline"
+            target="_blank"
+            to="https://nurriyad.xyz"
+          >
+            Al Asad Nur Riyad
+          </nuxt-link>
+        </li>
+        <li>|</li>
+        <li>
+          Site source on
+          <nuxt-link
+            class="underline"
+            target="_blank"
+            to="https://github.com/nurRiyad/blogs"
+          >
+            GitHub.
+          </nuxt-link>
+        </li>
+      </ul>
+    </div>
+  </header>
 </template>
diff --git a/components/NavbarCom.vue b/components/NavbarCom.vue
index 9b3caad..be9e137 100644
--- a/components/NavbarCom.vue
+++ b/components/NavbarCom.vue
@@ -1,24 +1,53 @@
 <script setup lang="ts">
+const route = useRoute();
 const theme = ref("light");
+
+const activeNavbar = computed(() => {
+  const path = route.fullPath;
+  const splitedPath = path.split("/");
+  const navbarName = splitedPath[1];
+  return navbarName;
+});
 </script>
 
 <template>
   <header class="sticky top-0 p-3 bg-[#a2d9ff] font-poppins">
     <div class="container px-4 mx-auto max-w-6xl flex justify-between">
-      <ul class="flex space-x-8 items-end">
+      <ul class="flex space-x-8 items-end justify-start">
         <li class="align">
           <nuxt-link to="/">
-            <icon class="text-blue-700" size="35" name="mdi:robot-excited" />
+            <icon
+              class="text-cyan-500 hover:scale-110 hover:transition"
+              size="35"
+              name="mdi:robot-excited"
+            />
           </nuxt-link>
         </li>
         <li>
-          <nuxt-link to="/latest">Latest</nuxt-link>
-        </li>
-        <li class="space-x-2">
-          <nuxt-link to="/category">Category</nuxt-link>
+          <nuxt-link :class="{ underline: activeNavbar === '' }" to="/"
+            >Home</nuxt-link
+          >
         </li>
         <li>
-          <nuxt-link to="/archive">Archive</nuxt-link>
+          <nuxt-link
+            :class="{ underline: activeNavbar === 'latest' }"
+            to="/latest"
+            >Latest</nuxt-link
+          >
+        </li>
+        <li>
+          <nuxt-link
+            :class="{ underline: activeNavbar === 'category' }"
+            to="/category"
+            >Category</nuxt-link
+          >
+        </li>
+        <li>
+          <nuxt-link
+            :class="{ underline: activeNavbar === 'archive' }"
+            to="/archive"
+            >Archive</nuxt-link
+          >
         </li>
       </ul>
       <ul class="flex space-x-3 items-end">