diff --git a/index.html b/index.html
index c657c31..be4d082 100644
--- a/index.html
+++ b/index.html
@@ -88,13 +88,13 @@
 
       <!-- mobile bottom nav start -->
       <div class="w-full hidden flex-col bg-bgMain2 text-bgMain border-t-[1px] border-bgMain/10 fixed bottom-[0px] max-lg:flex">
-        <div popupID="MobileNav" popupKeepScroll class="hide-scrollbar w-full h-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10">
+        <div popupID="MobileNav" popupKeepScroll class="hide-scrollbar w-full h-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10 whitespace-nowrap">
           <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Sake</a>
           <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Coffee</a>
           <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Spirits & Liqueurs</a>
           <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Wine</a>
         </div>
-        <div popupID="ProfileMobile" popupKeepScroll class="hide-scrollbar w-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10">
+        <div popupID="ProfileMobile" popupKeepScroll class="hide-scrollbar w-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10 whitespace-nowrap">
           <a href="profile.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Profile</a>
           <a href="settings.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Settings</a>
           <a href="index.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Logout</a>
diff --git a/product.html b/product.html
index da82557..2862378 100644
--- a/product.html
+++ b/product.html
@@ -98,6 +98,43 @@
           </div>
         </div>
       </div>
+
+      <!-- mobile bottom nav start -->
+      <div class="w-full hidden flex-col bg-bgMain2 text-bgMain border-t-[1px] border-bgMain/10 fixed bottom-[0px] max-lg:flex">
+        <div popupID="MobileNav" popupKeepScroll class="hide-scrollbar w-full h-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10 whitespace-nowrap">
+          <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Sake</a>
+          <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Coffee</a>
+          <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Spirits & Liqueurs</a>
+          <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Wine</a>
+        </div>
+        <div popupID="ProfileMobile" popupKeepScroll class="hide-scrollbar w-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10 whitespace-nowrap">
+          <a href="profile.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Profile</a>
+          <a href="settings.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Settings</a>
+          <a href="index.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Logout</a>
+        </div>
+
+        <div class="w-full flex flex-row gap-[10px]">
+          <a href="index.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+            <i class="bx bxs-home text-2xl"></i>
+          </a>
+          <a href="promotions.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+            <i class="bx bx-purchase-tag text-2xl"></i>
+          </a>
+          <a href="events.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+            <i class="bx bx-calendar-event text-2xl"></i>
+          </a>
+          <a href="search.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+            <i class="bx bx-search text-2xl"></i>
+          </a>
+          <button popupAction="openProfileMobile" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+            <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-[30px] h-[30px] object-cover bg-black/50">
+          </button>
+          <d popupAction="openMobileNav" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+            <i class="bx bx-menu text-2xl"></i>
+          </d>
+        </div>
+      </div>
+      <!-- mobile bottom nav end -->
     </div>
     <!-- main navbar end -->
 
diff --git a/profile.html b/profile.html
index bc970f3..cc9e4e0 100644
--- a/profile.html
+++ b/profile.html
@@ -96,13 +96,13 @@
 
       <!-- mobile bottom nav start -->
       <div class="w-full hidden flex-col bg-bgMain2 text-bgMain border-t-[1px] border-bgMain/10 fixed bottom-[0px] max-lg:flex">
-        <div popupID="MobileNav" popupKeepScroll class="hide-scrollbar w-full h-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10">
+        <div popupID="MobileNav" popupKeepScroll class="hide-scrollbar w-full h-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10 whitespace-nowrap">
           <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Sake</a>
           <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Coffee</a>
           <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Spirits & Liqueurs</a>
           <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Wine</a>
         </div>
-        <div popupID="ProfileMobile" popupKeepScroll class="hide-scrollbar w-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10">
+        <div popupID="ProfileMobile" popupKeepScroll class="hide-scrollbar w-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10 whitespace-nowrap">
           <a href="profile.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Profile</a>
           <a href="settings.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Settings</a>
           <a href="index.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Logout</a>
diff --git a/search.html b/search.html
index d7ace02..d00b57f 100644
--- a/search.html
+++ b/search.html
@@ -98,6 +98,43 @@
           </div>
         </div>
       </div>
+
+      <!-- mobile bottom nav start -->
+      <div class="w-full hidden flex-col bg-bgMain2 text-bgMain border-t-[1px] border-bgMain/10 fixed bottom-[0px] max-lg:flex">
+        <div popupID="MobileNav" popupKeepScroll class="hide-scrollbar w-full h-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10 whitespace-nowrap">
+          <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Sake</a>
+          <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Coffee</a>
+          <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Spirits & Liqueurs</a>
+          <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Wine</a>
+        </div>
+        <div popupID="ProfileMobile" popupKeepScroll class="hide-scrollbar w-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10 whitespace-nowrap">
+          <a href="profile.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Profile</a>
+          <a href="settings.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Settings</a>
+          <a href="index.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Logout</a>
+        </div>
+
+        <div class="w-full flex flex-row gap-[10px]">
+          <a href="index.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+            <i class="bx bxs-home text-2xl"></i>
+          </a>
+          <a href="promotions.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+            <i class="bx bx-purchase-tag text-2xl"></i>
+          </a>
+          <a href="events.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+            <i class="bx bx-calendar-event text-2xl"></i>
+          </a>
+          <a href="search.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+            <i class="bx bx-search text-2xl"></i>
+          </a>
+          <button popupAction="openProfileMobile" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+            <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-[30px] h-[30px] object-cover bg-black/50">
+          </button>
+          <d popupAction="openMobileNav" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+            <i class="bx bx-menu text-2xl"></i>
+          </d>
+        </div>
+      </div>
+      <!-- mobile bottom nav end -->
     </div>
     <!-- main navbar end -->