diff --git a/resources/js/nav-menu.js b/resources/js/nav-menu.js
new file mode 100644
index 0000000..5919a29
--- /dev/null
+++ b/resources/js/nav-menu.js
@@ -0,0 +1,11 @@
+const openBtn = document.getElementById('openBtn');
+const closeBtn = document.getElementById('closeBtn');
+const mobileMenu = document.getElementById('mobileMenu');
+
+openBtn.addEventListener('click', () => {
+    mobileMenu.classList.remove('hidden')
+})
+
+closeBtn.addEventListener('click', () => {
+    mobileMenu.classList.add('hidden')
+})
diff --git a/resources/views/components/how-it-works.blade.php b/resources/views/components/how-it-works.blade.php
index 3452bf5..6f59a11 100644
--- a/resources/views/components/how-it-works.blade.php
+++ b/resources/views/components/how-it-works.blade.php
@@ -5,7 +5,7 @@
         A simple, three step process to connect buyers with trusted sellers and service<br/>providers
     </p>
 
-    <section class="grid grid-cols-1 md:grid-cols-3 gap-8">
+    <section class="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-12">
 
         <x-card class="relative">
             <x-card-number text="01" />
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index ef506d9..f4d0e32 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -3,6 +3,7 @@
         <a href="" class="font-bold text-2xl">{{config('app.name')}}</a>
     </div>
 
+    <!-- desktop menu -->
     <div class="nav-links  hidden sm:block">
         <ul class="flex space-x-8 text-accent-600">
             <x-nav-links :link="route('home')" name="Home" />
@@ -16,4 +17,27 @@
         <a href="">Login</a>
         <a href="" 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>
+
 </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 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" />
+            <a href="">Login</a>
+            <a href="" class="ui-btn ui-btn-neutral w-fit">Register</a>
+        </ul>
+    </div>
+</div>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 7c974dc..69e909f 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -5,4 +5,5 @@
     <x-how-it-works />
     <x-get-in-touch />
     <x-footer />
+    @vite('resources/js/nav-menu.js')
 </x-layout>