diff --git a/app/menu/page.tsx b/app/menu/page.tsx
index 384ec72..8deb282 100644
--- a/app/menu/page.tsx
+++ b/app/menu/page.tsx
@@ -25,15 +25,20 @@ export default function Menu() {
     const menu = document.querySelector("#menu ul");
     const scrollPosition = document.body.scrollTop; // Lấy vị trí cuộn của body
     console.log('scroll body', scrollPosition);
+    const modeDiv = document.querySelector('.mode-mobile');
 
     if (!menu)
       return;
     if (scrollPosition > lastScrollY) {
       // Cuộn xuống -> ẩn menu
       menu.classList.add('hidden');
+      if (modeDiv)
+        modeDiv.classList.remove('mode');
     } else {
       // Cuộn lên -> hiện menu
       menu.classList.remove('hidden');
+      if (modeDiv)
+        modeDiv.classList.add('mode');
     }
 
     // Cập nhật lastScrollY để so sánh trong lần cuộn tiếp theo
@@ -65,7 +70,7 @@ export default function Menu() {
           </li>
           {/* Add other links similarly */}
         </ul>
-        <div className="mode">
+        <div className="mode-mobile">
           <button onClick={toggleMode}>
             <i className={`bx ${isDarkMode ? 'bx-moon' : 'bx-sun'} sun-moon`}></i>
           </button>
diff --git a/styles/main.css b/styles/main.css
index aa50a4e..e562008 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -16,17 +16,6 @@ i {
 }
 
 
-.mode button i {
-  font-size: 20px;
-}
-
-
-.menu .mode {
-  position: fixed;
-  left: 22px;
-  bottom: 60px;
-}
-
 .main {
   min-height: calc(100vh - 100px);
   /* Adjust 100px to match your footer's height */
@@ -34,7 +23,7 @@ i {
   flex-direction: column;
 }
 
-.menu .mode button {
+.menu .mode-mobile button {
   width: 44px;
   height: 44px;
   display: flex;
@@ -48,7 +37,7 @@ i {
   cursor: pointer;
 }
 
-.menu .mode ._icon_1plrx_24 {
+.menu .mode-mobile ._icon_1plrx_24 {
   position: relative;
   width: 100%;
   height: 100%;
diff --git a/styles/menu.css b/styles/menu.css
index 926a89a..37676fb 100644
--- a/styles/menu.css
+++ b/styles/menu.css
@@ -6,6 +6,22 @@
 }
 
 
+.mode-mobile button i {
+  font-size: 20px;
+}
+
+
+.menu .mode-mobile {
+  position: fixed;
+  left: 22px;
+  bottom: 60px;
+}
+
+
+
+
+
+
 .menu ul {
   list-style: none;
   padding: 0;
@@ -101,8 +117,10 @@ svg:not(:host).svg-inline--fa {
     justify-content: space-around;
     align-items: center;
     padding-bottom: 45px;
+  }
 
-
+  .menu .mode.mode-mobile {
+    bottom: 20px;
   }
 
   .hidden {
diff --git a/styles/mode.css b/styles/mode.css
index 486b903..d64fc7c 100644
--- a/styles/mode.css
+++ b/styles/mode.css
@@ -53,7 +53,7 @@
   color: rgb(250, 250, 250);
 }
 
-.dark-mode .mode:hover i {
+.dark-mode .mode-mobile:hover i {
   color: #009688;
 }
 
@@ -88,7 +88,7 @@
   color: rgb(255, 255, 255);
 }
 
-.dark-mode .mode {
+.dark-mode .mode-mobile {
   color: aliceblue
 }