diff --git a/src/components/HeaderComponent.vue b/src/components/HeaderComponent.vue
index 1c1146f4b30274c67034212b6833d2ff07adebc3..5bc08e5e4e01cf437091e0ce7b208bcd52c77a78 100644
--- a/src/components/HeaderComponent.vue
+++ b/src/components/HeaderComponent.vue
@@ -12,31 +12,37 @@
       <nav class="flex justify-around flex-auto basis-[42.86%] text-xl">
         <router-link
           to="/home"
+          class="hover:text-gray transition-colors"
           :class="currentPage === 'home' ? 'font-bold' : ''"
           >Home</router-link
         >
         <router-link
-          to="/home"
+          to="/services"
+          class="hover:text-gray transition-colors"
           :class="currentPage === 'services' ? 'font-bold' : ''"
           >Services</router-link
         >
         <router-link
           to="/home"
+          class="hover:text-gray transition-colors"
           :class="currentPage === 'about us' ? 'font-bold' : ''"
           >About us</router-link
         >
         <router-link
           to="/home"
+          class="hover:text-gray transition-colors"
           :class="currentPage === 'team' ? 'font-bold' : ''"
           >Team</router-link
         >
         <router-link
           to="/home"
+          class="hover:text-gray transition-colors"
           :class="currentPage === 'contact' ? 'font-bold' : ''"
           >Contact</router-link
         >
         <router-link
           to="/home"
+          class="hover:text-gray transition-colors"
           :class="currentPage === 'blog' ? 'font-bold' : ''"
           >Blog</router-link
         >
@@ -65,7 +71,7 @@
           <nav class="text-xl text-black">
             <div>
               <router-link
-                to="#"
+                to="/"
                 class="flex justify-between items-center gap-3"
               >
                 <span
@@ -79,7 +85,7 @@
 
             <div class="mt-2">
               <router-link
-                to="#"
+                to="/services"
                 class="flex justify-between items-center gap-3"
               >
                 <span
diff --git a/src/pages/ServicesPage.vue b/src/pages/ServicesPage.vue
index e6cba9b64d1b5e42447c15e91748fcd3a6ea9a47..cb1ea1625aec62cf5c61e2f948cadeffd6904967 100644
--- a/src/pages/ServicesPage.vue
+++ b/src/pages/ServicesPage.vue
@@ -1,7 +1,8 @@
 <template>
-  <div>
+  <div class="overflow-hidden">
     <HeaderComponent current-page="services"></HeaderComponent>
-    <section class="relative">
+    
+    <section class="relative z-10">
       <h1 class="text-black text-[2rem] mt-[87px] ml-[7%]">
         {{ curService.name }}
         <FeatureSvg
@@ -65,12 +66,19 @@
         </div>
       </div>
     </section>
-    <footer class="text-blue-line mt-[70px] mb-[21px] text-smleading-4 text-center">      
+
+    <footer class="text-blue-line mt-[70px] mb-[21px] text-smleading-4 text-center relative">   
+      <div class="relative z-10">
         Terms of Service
         <span class="text-black font-gilroy font-normal">and</span> Privacy
         Policy.
+      </div>   
+        
+
+        <div
+        class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[230px] h-[207px] z-0 -left-[35px] -top-[120px]"
+      ></div>
     </footer>
-    
   </div>
 </template>
 
@@ -97,6 +105,10 @@ export default {
           this.$set(service.categories[parseInt(this.$route.query.category)], "expanded", true);
         }
       });
+    }else{
+      if(this.services[0]){
+        this.curService = this.services[0];
+      }
     }
   },
   methods: {