4 files changed, 17 insertions, 9 deletions
diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css
index db0b7432..9b0f55bf 100644
--- a/FrontEnd/src/views/common/menu/Menu.css
+++ b/FrontEnd/src/views/common/menu/Menu.css
@@ -7,12 +7,12 @@
   padding: 0.5em 1.5em;
   cursor: pointer;
   transition: all 0.5s;
-  color: var(--cru-key-color);
+  color: var(--cru-button-normal-color);
 }
 
 .cru-menu-item:hover {
-  color: var(--cru-key-on-color);
-  background-color: var(--cru-key-color);
+  color: white;
+  background-color: var(--cru-button-normal-color);
 }
 
 .cru-menu-item-icon {
@@ -21,5 +21,5 @@
 
 .cru-menu-divider {
   border-width: 0;
-  border-top: 1px solid var(--cru-key-color);
+  border-top: 1px solid var(--cru-button-normal-color);
 }
 \ No newline at end of file
diff --git a/FrontEnd/src/views/common/menu/Menu.tsx b/FrontEnd/src/views/common/menu/Menu.tsx
index a9ebfedf..65cd55b4 100644
--- a/FrontEnd/src/views/common/menu/Menu.tsx
+++ b/FrontEnd/src/views/common/menu/Menu.tsx
@@ -21,6 +21,7 @@ export type MenuItem =
 export type MenuItems = MenuItem[];
 
 export type MenuProps = {
+  color?: ThemeColor;
   items: MenuItems;
   onItemClicked?: () => void;
   className?: string;
@@ -28,6 +29,7 @@ export type MenuProps = {
 };
 
 export default function Menu({
+  color,
   items,
   onItemClicked,
   className,
@@ -37,7 +39,7 @@ export default function Menu({
 
   return (
     <div
-      className={classNames("cru-menu cru-primary", className)}
+      className={classNames(`cru-menu cru-button-${color ?? "primary"}`, className)}
       style={style}
     >
       {items.map((item, index) => {
@@ -48,7 +50,7 @@ export default function Menu({
           return (
             <div
               key={index}
-              className={`cru-menu-item cru-${color ?? "primary"}`}
+              className={`cru-menu-item cru-button-${color ?? "primary"}`}
               onClick={() => {
                 onClick();
                 onItemClicked?.();
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css
index 38171ffd..b8dfe265 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.css
+++ b/FrontEnd/src/views/common/menu/PopupMenu.css
@@ -1,6 +1,6 @@
 .cru-popup-menu-menu-container {
   z-index: 1040;
   border-radius: 5px;
-  border: var(--cru-primary-color) 1px solid;
-  background-color: var(--cru-surface-color);
+  border: var(--cru-button-normal-color) 1px solid;
+  background-color: var(--cru-background-color);
 }
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx
index 7ac12755..035f5602 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.tsx
+++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx
@@ -7,9 +7,12 @@ import { useClickOutside } from "@/utilities/hooks";
 
 import Menu, { MenuItems } from "./Menu";
 
+import { ThemeColor } from "../common";
+
 import "./PopupMenu.css";
 
 export interface PopupMenuProps {
+  color?: ThemeColor;
   items: MenuItems;
   children?: ReactNode;
   containerClassName?: string;
@@ -17,6 +20,7 @@ export interface PopupMenuProps {
 }
 
 export default function PopupMenu({
+  color,
   items,
   children,
   containerClassName,
@@ -48,7 +52,9 @@ export default function PopupMenu({
         createPortal(
           <div
             ref={setPopperElement}
-            className="cru-popup-menu-menu-container"
+            className={`cru-popup-menu-menu-container cru-button-${
+              color ?? "primary"
+            }`}
             style={styles.popper}
             {...attributes.popper}
           >