diff --git a/components/footer/devloper.vue b/components/footer/developer.vue
similarity index 100%
rename from components/footer/devloper.vue
rename to components/footer/developer.vue
diff --git a/components/main/footer.vue b/components/main/footer.vue
index bc489a5..fc3181b 100644
--- a/components/main/footer.vue
+++ b/components/main/footer.vue
@@ -9,14 +9,14 @@ const path = computed(() => route.fullPath.replace('/', ''))
     <div class="px-6 container max-w-5xl mx-auto">
       <div class="grid grid-cols-1 md:grid-cols-3">
         <FooterSite v-if="path === 'about'" />
-        <FooterDevloper v-else />
+        <FooterDeveloper v-else />
 
         <FooterLink />
         <FooterConnect />
       </div>
 
       <div class="border-t dark:border-gray-800 mt-5 text-center p-2">
-        © 2020-2023 No Right is reserved. Who cares 🤷‍♂️? It's
+        © 2020-2024 No Right is reserved. Who cares 🤷‍♂️? It's
         <a href="https://github.com/nurriyad/blog" target="_blank" rel="nofollow" class="underline">open source</a>
         anyway.
       </div>
diff --git a/components/main/header.vue b/components/main/header.vue
index 33177e3..92ea1ab 100644
--- a/components/main/header.vue
+++ b/components/main/header.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-const route = useRoute()
-
-const path = computed(() => route.fullPath.replace('/', ''))
-
 const colorMode = useColorMode()
 function onClick(val: string) {
   colorMode.preference = val
@@ -14,23 +10,23 @@ function onClick(val: string) {
     <div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline ">
       <ul class="flex items-baseline space-x-5">
         <li class="text-base sm:text-2xl font-bold">
-          <NuxtLink to="/" :class="{ underline: path === '' }">
+          <NuxtLink to="/">
             Riyad's Blog
           </NuxtLink>
         </li>
       </ul>
       <ul class="flex items-center space-x-3 sm:space-x-6 text-sm sm:text-lg">
         <li>
-          <NuxtLink to="/blogs" :class="{ underline: path === 'blogs' }">
+          <NuxtLink to="/blogs">
             Blogs
           </NuxtLink>
         </li>
         <li>
-          <NuxtLink to="/categories" :class="{ underline: path === 'categories' }">
+          <NuxtLink to="/categories">
             Categories
           </NuxtLink>
         </li>
-        <li title="About Me" :class="{ underline: path === 'about' }">
+        <li title="About Me">
           <NuxtLink to="/about" aria-label="About me">
             About
           </NuxtLink>
@@ -65,3 +61,9 @@ function onClick(val: string) {
     </div>
   </div>
 </template>
+
+<style>
+.router-link-active .router-link-exact-active  {
+  @apply underline
+}
+</style>