diff --git a/src/components/common/IconMenuButton/IconMenuButton.tsx b/src/components/common/IconMenuButton/IconMenuButton.tsx
index eb8937785bccc76f39dfd6427e5ceac46ec652fd..6379a8cade15f529a49172a481f9e4bdc4abb31e 100644
--- a/src/components/common/IconMenuButton/IconMenuButton.tsx
+++ b/src/components/common/IconMenuButton/IconMenuButton.tsx
@@ -63,6 +63,7 @@ export const IconMenuButton = ({
           className={className}
           id={`${id}icon-menu-button-button`}
           onClick={singleItem ? menuItems[0]?.action : handleClick}
+          sx={{ color: (theme) => theme.palette.primaryContrastText.main }}
           aria-label={
             // eslint-disable-next-line no-nested-ternary
             singleItem
diff --git a/src/stories/common/IconMenuButton/IconMenuButton.stories.jsx b/src/stories/common/IconMenuButton/IconMenuButton.stories.tsx
similarity index 59%
rename from src/stories/common/IconMenuButton/IconMenuButton.stories.jsx
rename to src/stories/common/IconMenuButton/IconMenuButton.stories.tsx
index 56dbe4f72dda8287aa40ad0667e6b8852ff98212..cd7d9ebc95c3fefba574f29822f349531d6bb65f 100644
--- a/src/stories/common/IconMenuButton/IconMenuButton.stories.jsx
+++ b/src/stories/common/IconMenuButton/IconMenuButton.stories.tsx
@@ -1,6 +1,7 @@
+import { Box } from "@mui/material";
 import { BugReport, AddBoxOutlined } from "@mui/icons-material";
-import { ButtonAppBar } from "../../../components/navigation/ButtonAppBar";
 import { IconMenuButton } from "../../../components/common/IconMenuButton";
+import { IconMenuButtonProps } from "../../../components/common/IconMenuButton/IconMenuButton";
 
 import { sbDisabledArg } from "../../utils/common-args";
 
@@ -10,9 +11,16 @@ export default {
     iconMenuButton: sbDisabledArg
   }
 };
-
-export const SingleButton = (args) => <ButtonAppBar {...args} />;
-const singleButtonProps = {
+export const SingleButton = (args: IconMenuButtonProps) => (
+  <Box
+    sx={{
+      background: (theme) => theme.palette.primary.main
+    }}
+  >
+    <IconMenuButton {...args} />
+  </Box>
+);
+SingleButton.args = {
   id: "single-story-",
   menuItems: [
     {
@@ -21,12 +29,17 @@ const singleButtonProps = {
     }
   ]
 };
-SingleButton.args = {
-  iconMenuButton: <IconMenuButton {...singleButtonProps} />
-};
 
-export const MenuButton = (args) => <ButtonAppBar {...args} />;
-const menuButtonProps = {
+export const MenuButton = (args: IconMenuButtonProps) => (
+  <Box
+    sx={{
+      background: (theme) => theme.palette.primary.main
+    }}
+  >
+    <IconMenuButton {...args} />
+  </Box>
+);
+MenuButton.args = {
   id: "menu-story-",
   icon: <AddBoxOutlined />,
   menuItems: [
@@ -41,6 +54,3 @@ const menuButtonProps = {
     }
   ]
 };
-MenuButton.args = {
-  iconMenuButton: <IconMenuButton {...menuButtonProps} />
-};
diff --git a/src/style/Theme.ts b/src/style/Theme.ts
index 4209adb5b3914488f70b3b5d91a61ba41d38e5cc..21ad353b09c3d3a3be2074b6bfbe45398174c12e 100644
--- a/src/style/Theme.ts
+++ b/src/style/Theme.ts
@@ -35,6 +35,7 @@ declare module "@mui/material/styles" {
       lab: Palette["primary"];
       development: Palette["primary"];
     };
+    primaryContrastText: Palette["primary"];
   }
 
   interface PaletteOptions {
@@ -51,6 +52,7 @@ declare module "@mui/material/styles" {
       lab: Palette["primary"];
       development: Palette["primary"];
     };
+    primaryContrastText: Palette["primary"];
   }
 }