few adjustments

frontend/src/app/components/icons/ellipsis.jsx

@@ -1,17 +1,23 @@
 import React from "react";
 
-const ellipsis = () => {
+const ellipsis = ({
+  width = "24",
+  height = "24",
+  color = "#858699",
+  style,
+}) => {
   return (
     <svg
+      className={style}
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={width}
+      height={height}
       viewBox="0 0 24 24"
       fill="none"
     >
       <path
         d="M12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 14 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10ZM12 4C13.1046 4 14 4.89543 14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4Z"
-        fill="#858699"
+        fill={color}
       />
     </svg>
   );

frontend/src/app/components/icons/verticalEllipsis.jsx

@@ -1,21 +0,0 @@
-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;

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

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import EllipsisIcon from "../../icons/ellipsis";
 import ProfileDropdown from "./ProfileDropdown";
 import styles from "./styles.module.css";
-import VerticalEllipsis from "../../icons/verticalEllipsis";
 import useIsMobile from "@/app/hooks/useIsMobile";
 const Profile = () => {
   const isMobile = useIsMobile();
@@ -43,7 +42,7 @@ const Profile = () => {
         {/* Mobile Ellipsis */}
         {isMobile && (
           <div className={styles.mobileEllipsis} onClick={() => setOpen(!open)}>
-            <VerticalEllipsis />
+            <EllipsisIcon style={isMobile ? styles.rotated : ""} />
           </div>
         )}
 

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

@@ -150,6 +150,9 @@
   font-weight: 400;
   line-height: normal;
 }
+.rotated {
+  transform: rotate(90deg);
+}
 
 /* Mobile */
 @media (max-width: 768px) {
@@ -176,6 +179,7 @@
     gap: 10px;
     padding-right: 10px;
   }
+
   .profileBadge {
     display: flex;
     padding: 12px 16px;