thats all for today!!

frontend/src/app/components/navbar/navright/ProfileDropdown.jsx

@@ -11,7 +11,6 @@ const ProfileDropdown = ({ isMobile, user }) => {
       {/* Mobile View */}
       {isMobile && (
         <>
-          {" "}
           <div className={styles.profileBadge}>
             {/* User profile*/}
             <div className={styles.userImgContainer}>
@@ -28,20 +27,22 @@ const ProfileDropdown = ({ isMobile, user }) => {
         </>
       )}
 
-      <div className={styles.settingsBtn}>
+      <div className={styles.actionButtons}>
-        {/* Icon */}
+        <div className={styles.settingsBtn}>
-        <div className={styles.btn}>
+          {/* Icon */}
-          <SettingsIcon />
+          <div className={styles.btn}>
+            <SettingsIcon />
+          </div>
+          <p>Settings</p>
         </div>
-        <p>Settings</p>
+        {/* Logout */}
-      </div>
+        <div className={styles.logoutBtn}>
-      {/* Logout */}
+          {/* Icon */}
-      <div className={styles.logoutBtn}>
+          <div className={styles.btn}>
-        {/* Icon */}
+            <LogoutIcon />
-        <div className={styles.btn}>
+          </div>
-          <LogoutIcon />
+          <p>Logout</p>
         </div>
-        <p>Logout</p>
       </div>
     </div>
   );

frontend/src/app/components/navbar/navright/styles.module.css

@@ -100,6 +100,13 @@
   }
 }
 
+.actionButtons {
+  display: flex;
+  flex-direction: column;
+
+  gap: 6px;
+  width: 100%;
+}
 .settingsBtn,
 .logoutBtn {
   display: flex;
@@ -204,4 +211,11 @@
     align-self: stretch;
     background: #393d53;
   }
+  .actionButtons {
+    border-radius: 6px;
+    padding: 6px;
+    align-items: center;
+    gap: 6px;
+    align-self: stretch;
+  }
 }