diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 09fdf45..c478469 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -47,7 +47,7 @@
           <a
             :href="item.href"
             class="block text-white hover:text-primary ease-linear text-2xl md:text-lg"
-            @click2="scrollToSection(item.href)"
+            @click="scrollToSection(item.href)"
           >
             {{ item.name }}
           </a>
@@ -58,7 +58,9 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
+
+const isMenuOpen = ref(false);
 
 const Menu = ref([
   { name: "Services", href: "#services" },
@@ -69,7 +71,16 @@ const Menu = ref([
   { name: "Contact", href: "#contact" },
 ]);
 
-const isMenuOpen = ref(false);
+watch(isMenuOpen, (open) => {
+  if (open) {
+    // Disable scrolling
+    document.body.style.overflow = "hidden";
+  } else {
+    // Re-enable scrolling
+    document.body.style.overflow = "";
+  }
+});
+
 const scrollToSection = (href) => {
   isMenuOpen.value = false;
   const section = document.querySelector(href);