diff --git a/resources/js/nav-menu.js b/resources/js/nav-menu.js
index 5919a29..3ba60b1 100644
--- a/resources/js/nav-menu.js
+++ b/resources/js/nav-menu.js
@@ -1,11 +1,14 @@
 const openBtn = document.getElementById('openBtn');
 const closeBtn = document.getElementById('closeBtn');
 const mobileMenu = document.getElementById('mobileMenu');
+const body = document.body;
 
 openBtn.addEventListener('click', () => {
-    mobileMenu.classList.remove('hidden')
+    mobileMenu.classList.remove('hidden');
+    body.style.overflow = 'hidden';
 })
 
 closeBtn.addEventListener('click', () => {
-    mobileMenu.classList.add('hidden')
+    mobileMenu.classList.add('hidden');
+    body.style.overflow = 'visible';
 })
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 4fe0d03..84a7791 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,41 +1,45 @@
 <nav class="flex justify-between items-center wrapper py-6 shadow-xl">
-    <div class="logo">
+    <div class="logo flex space-x-2 items-center">
+        <x-logo />
         <a href="" class="font-bold text-2xl">{{config('app.name')}}</a>
     </div>
 
     <!-- desktop menu -->
-    <div class="nav-links  hidden sm:block">
+    <div class="nav-links  hidden md:block">
         <ul class="flex space-x-8 text-accent-600">
-            <x-nav-links :link="route('home')" name="Home" />
-            <x-nav-links :link="route('home')" name="Explore deals" />
-            <x-nav-links :link="route('home')" name="About" />
-            <x-nav-links :link="route('home')" name="Contact" />
+            <x-nav-links :link="route('home')" name="Home"/>
+            <x-nav-links :link="route('home')" name="Explore deals"/>
+            <x-nav-links :link="route('home')" name="About"/>
+            <x-nav-links :link="route('home')" name="Contact"/>
         </ul>
     </div>
 
-    <div class="nav-buttons space-x-4 font-medium hidden sm:block ">
+    <div class="nav-buttons space-x-4 font-medium hidden md:block ">
         <a href="{{route('login')}}">Login</a>
         <a href="{{route('register')}}" class="ui-btn ui-btn-neutral">Register</a>
     </div>
 
     <!-- mobile menu btn-->
-    <x-button class="sm:hidden" id="openBtn">
-        <x-heroicon-o-bars-3 class="w-8" />
+    <x-button class="md:hidden" id="openBtn">
+        <x-heroicon-o-bars-3 class="w-8"/>
     </x-button>
 
 </nav>
 
 <!-- mobile menu btn-->
-<div id='mobileMenu' class="hidden absolute top-0 h-full w-full bg-gray-200 text-xl z-1 p-10 pt-20">
-    <x-button id="closeBtn" class="w-full">
-        <x-heroicon-o-x-mark class="w-8 ml-auto"/>
-    </x-button>
+<div id='mobileMenu' class="hidden absolute top-0 h-[101vh] overflow-y-hidden w-[101vw] bg-gray-200 text-xl z-1 p-10 pt-20">
+    <div class="flex justify-between mb-8">
+        <x-logo/>
+        <x-button id="closeBtn">
+            <x-heroicon-o-x-mark class="w-8 ml-auto"/>
+        </x-button>
+    </div>
     <div class="nav-links mb-10">
         <ul class="flex flex-col space-y-8 text-accent-600">
-            <x-nav-links :link="route('home')" name="Home" />
-            <x-nav-links :link="route('home')" name="Explore deals" />
-            <x-nav-links :link="route('home')" name="About" />
-            <x-nav-links :link="route('home')" name="Contact" />
+            <x-nav-links :link="route('home')" name="Home"/>
+            <x-nav-links :link="route('home')" name="Explore deals"/>
+            <x-nav-links :link="route('home')" name="About"/>
+            <x-nav-links :link="route('home')" name="Contact"/>
             <a href="{{route('login')}}">Login</a>
             <a href="{{route('register')}}" class="ui-btn ui-btn-neutral w-fit">Register</a>
         </ul>