diff --git a/frontend/src/app/components/icons/hamburger.jsx b/frontend/src/app/components/icons/hamburger.jsx
new file mode 100644
index 0000000..8ff361a
--- /dev/null
+++ b/frontend/src/app/components/icons/hamburger.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const hamburger = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z"
+        fill="white"
+        style={{ fillOpacity: 1 }}
+      />
+    </svg>
+  );
+};
+
+export default hamburger;
diff --git a/frontend/src/app/components/icons/verticalEllipsis.jsx b/frontend/src/app/components/icons/verticalEllipsis.jsx
new file mode 100644
index 0000000..448a8ee
--- /dev/null
+++ b/frontend/src/app/components/icons/verticalEllipsis.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const verticalEllipsis = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M8 12C8 13.1046 7.1046 14 6 14C4.8954 14 4 13.1046 4 12C4 10.8954 4.8954 10 6 10C7.1046 10 8 10.8954 8 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 10 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM20 12C20 13.1046 19.1046 14 18 14C16.8954 14 16 13.1046 16 12C16 10.8954 16.8954 10 18 10C19.1046 10 20 10.8954 20 12Z"
+        fill="#858699"
+        style={{ fillOpacity: 1 }}
+      />
+    </svg>
+  );
+};
+
+export default verticalEllipsis;
diff --git a/frontend/src/app/components/navbar/Navbar.jsx b/frontend/src/app/components/navbar/Navbar.jsx
index 571ed8a..822dfbb 100644
--- a/frontend/src/app/components/navbar/Navbar.jsx
+++ b/frontend/src/app/components/navbar/Navbar.jsx
@@ -4,12 +4,23 @@ import React from "react";
 import styles from "./styles.module.css";
 import NavLeft from "./navleft/Header";
 import NavRight from "./navright/Profile";
+import HamburgerIcon from "../../components/icons/hamburger";
+import VerticalEllipsis from "../icons/verticalEllipsis";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
 const Navbar = () => {
+  const isMobile = useIsMobile();
   return (
     <div className={styles.mainContainer}>
-      <NavLeft />
-      <NavRight />
+      {/* Mobile Hamburger Button */}
+      <div className={styles.mobileHamburger}>
+        {isMobile && <HamburgerIcon />}
+        <NavLeft />
+      </div>
+      {/* Mobile Menu Button */}
+      <div className={styles.mobileEllipsis}>
+        {isMobile ? <VerticalEllipsis /> : <NavRight />}
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/app/components/navbar/navleft/Header.jsx b/frontend/src/app/components/navbar/navleft/Header.jsx
index 14b6aec..0277f22 100644
--- a/frontend/src/app/components/navbar/navleft/Header.jsx
+++ b/frontend/src/app/components/navbar/navleft/Header.jsx
@@ -9,22 +9,6 @@ const Header = () => {
       {/* Organization Header */}
       <div className={styles.organizationContainer}>
         <div className={styles.orgContainer}>
-          {/* Burger Button */}
-          {/* <div className={styles.burgerBtn}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width={24}
-              height={24}
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <path
-                d="M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z"
-                fill="white"
-                style={{ fillOpacity: 1 }}
-              />
-            </svg>
-          </div> */}
           {/* Logo */}
           <div className={styles.orgLogo}></div>
           <div className={styles.orgName}>
diff --git a/frontend/src/app/components/navbar/navleft/styles.module.css b/frontend/src/app/components/navbar/navleft/styles.module.css
index d00d53b..4d7cb87 100644
--- a/frontend/src/app/components/navbar/navleft/styles.module.css
+++ b/frontend/src/app/components/navbar/navleft/styles.module.css
@@ -10,9 +10,7 @@
   gap: 16px;
   border-radius: 4px;
 }
-.burgerBtn {
-  display: none;
-}
+
 .orgLogo {
   width: 38px;
   height: 38px;
diff --git a/frontend/src/app/components/navbar/navright/Profile.jsx b/frontend/src/app/components/navbar/navright/Profile.jsx
index 697ce25..1155ec4 100644
--- a/frontend/src/app/components/navbar/navright/Profile.jsx
+++ b/frontend/src/app/components/navbar/navright/Profile.jsx
@@ -22,22 +22,6 @@ const Profile = () => {
             <div className={styles.userPic}></div>
             <EllipsisIcon />
           </div>
-          {/* Burger Button */}
-          {/* <div className={styles.ellipsisBtn}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width={24}
-              height={24}
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <path
-                d="M8 12C8 13.1046 7.1046 14 6 14C4.8954 14 4 13.1046 4 12C4 10.8954 4.8954 10 6 10C7.1046 10 8 10.8954 8 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 10 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM20 12C20 13.1046 19.1046 14 18 14C16.8954 14 16 13.1046 16 12C16 10.8954 16.8954 10 18 10C19.1046 10 20 10.8954 20 12Z"
-                fill="#858699"
-                style={{ fillOpacity: 1 }}
-              />
-            </svg>
-          </div> */}
         </div>
 
         {/* Dropdown */}
diff --git a/frontend/src/app/components/navbar/navright/styles.module.css b/frontend/src/app/components/navbar/navright/styles.module.css
index 37682a2..5d2f4d4 100644
--- a/frontend/src/app/components/navbar/navright/styles.module.css
+++ b/frontend/src/app/components/navbar/navright/styles.module.css
@@ -69,9 +69,6 @@
   border-radius: 32px;
   background: url(/profile/PROFILE.svg) lightgray 50% / cover no-repeat;
 }
-.ellipsisBtn {
-  display: none;
-}
 
 .dropdownContainer {
   display: flex;
@@ -142,4 +139,7 @@
 }
 /* Mobile */
 @media (max-width: 768px) {
+  .profileBadge {
+    display: none;
+  }
 }
diff --git a/frontend/src/app/components/navbar/styles.module.css b/frontend/src/app/components/navbar/styles.module.css
index 1ed90bf..3554845 100644
--- a/frontend/src/app/components/navbar/styles.module.css
+++ b/frontend/src/app/components/navbar/styles.module.css
@@ -6,9 +6,31 @@
   align-items: center;
   align-self: stretch;
   border-bottom: 1px solid #2c2d3d;
-  border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
 }
 
 /* Mobile */
 @media (max-width: 768px) {
+  .mobileHamburger {
+    display: flex;
+    height: 61px;
+    padding-left: 16px;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .mobileEllipsis {
+    display: flex;
+    height: 61px;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .mainContainer {
+    display: flex;
+    padding: 12px 0px;
+    align-items: center;
+    border-bottom: none;
+  }
 }