diff --git a/apps/frontend/src/components/tiptap.jsx b/apps/frontend/src/components/tiptap.jsx
index 13be8b0bd..ec164aa62 100644
--- a/apps/frontend/src/components/tiptap.jsx
+++ b/apps/frontend/src/components/tiptap.jsx
@@ -7,6 +7,7 @@ import {
   MenuList,
   Text,
   useColorMode,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import {
   autoUpdate,
@@ -273,6 +274,7 @@ function ToolBar({ editor, user }) {
 }
 
 function BubbleMenuBar({ editor, isLinkHover }) {
+  const menuBgColor = useColorModeValue("white", "gray.700");
   const addLink = () => {
     const url = window.prompt("URL");
 
@@ -292,7 +294,7 @@ function BubbleMenuBar({ editor, isLinkHover }) {
         borderRadius="lg"
         overflowX="auto"
         id="bubble-menu"
-        background="white"
+        background={menuBgColor}
       >
         <Button
           variant="ghost"
@@ -337,6 +339,8 @@ function HoverMenuBar({
   linkEl,
   setLinkEl,
 }) {
+  const menuBgColor = useColorModeValue("white", "gray.700");
+
   return (
     <Box
       p="0.2rem"
@@ -344,7 +348,7 @@ function HoverMenuBar({
       borderRadius="lg"
       overflowX="auto"
       id="bubble-menu"
-      background="white"
+      background={menuBgColor}
       width="fit-content"
       visibility={
         floatingMiddleware.hide?.referenceHidden ? "hidden" : "visible"