diff --git a/components/Navbar/logo.tsx b/components/Navbar/logo.tsx
index 51f5b3d..badd23e 100644
--- a/components/Navbar/logo.tsx
+++ b/components/Navbar/logo.tsx
@@ -25,13 +25,13 @@ export const StackedLogo: FC<LogoProps> = ({ shiftInterval, customColorList, cus
     return (
         <div id="venn-diagram-logo-container" className="flex w-full h-auto justify-center">
             <div onMouseEnter={shift} onMouseOut={shift} className={`absolute flex flex-col z-40 items-center justify-center animate-logo-throw-left h-16 w-16 bg-opacity-75 ${firstColor} transition-colors duration-[5000ms] ease rounded-full`}>
-                <p className="text-6xl font-bold opacity-100">M</p>
+                <p className="text-black dark:text-white text-6xl font-bold opacity-100">M</p>
             </div>
             <div onMouseEnter={shift} onMouseOut={shift} className={`absolute flex flex-col items-center justify-center animate-logo-throw-down h-16 w-16 bg-opacity-75 ${secondColor} transition-colors duration-[5000ms] ease rounded-full`}>
-                <p className="text-6xl font-bold opacity-100 z-50">C</p>
+                <p className="text-black dark:text-white text-6xl font-bold opacity-100 z-50">C</p>
             </div>
             <div onMouseEnter={shift} onMouseOut={shift} className={`absolute flex flex-col items-center justify-center animate-logo-throw-right h-16 w-16 bg-opacity-75 ${thirdColor} transition-colors duration-[5000ms] ease rounded-full`}>
-                <p className="text-6xl font-bold opacity-100">D</p>
+                <p className="text-black dark:text-white text-6xl font-bold opacity-100">D</p>
             </div>
         </div>
     )
@@ -51,15 +51,15 @@ export const InlineLogo: FC<LogoProps> = ({ shiftInterval, customColorList, cust
     if (customHookInstance) return (
         <button onClick={() => router.push('/')} id="inline-logo-container" className="flex w-auto h-auto justify-center">
             <div className={`flex flex-col items-center justify-center h-16 w-16 bg-opacity-75 ${customHookInstance.firstColor} transition-colors duration-[5000ms] rounded-full`}>
-                <p className="text-2xl font-bold opacity-100">M</p>
+                <p className="text-black dark:text-white text-2xl font-bold opacity-100">M</p>
             </div>
 
             <div className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${customHookInstance.secondColor} transition-colors duration-[5000ms] rounded-full`}>
-                <p className="text-2xl font-bold opacity-100">C</p>
+                <p className="text-black dark:text-white text-2xl font-bold opacity-100">C</p>
             </div>
 
             <div className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${customHookInstance.thirdColor} transition-colors duration-[5000ms] rounded-full`}>
-                <p className="text-2xl font-bold opacity-100">D</p>
+                <p className="text-black dark:text-white text-2xl font-bold opacity-100">D</p>
             </div>
         </button>
     )
@@ -67,15 +67,15 @@ export const InlineLogo: FC<LogoProps> = ({ shiftInterval, customColorList, cust
     return (
         <button onClick={() => router.push('/')} id="inline-logo-container" className="flex w-auto h-auto justify-center">
             <div className={`flex flex-col items-center justify-center h-16 w-16 bg-opacity-75 ${firstColor} transition-colors duration-[5000ms] rounded-full`}>
-                <p className="text-2xl font-bold opacity-100">M</p>
+                <p className="text-black dark:text-white text-2xl font-bold opacity-100">M</p>
             </div>
 
             <div className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${secondColor} transition-colors duration-[5000ms] rounded-full`}>
-                <p className="text-2xl font-bold opacity-100">C</p>
+                <p className="text-black dark:text-white text-2xl font-bold opacity-100">C</p>
             </div>
 
             <div className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${thirdColor} transition-colors duration-[5000ms] rounded-full`}>
-                <p className="text-2xl font-bold opacity-100">D</p>
+                <p className="text-black dark:text-white text-2xl font-bold opacity-100">D</p>
             </div>
         </button>
     )