diff --git a/frontend/src/components/DropDown/DropDown.styles.scss b/frontend/src/components/DropDown/DropDown.styles.scss
index 6042acd07c..3527c1385a 100644
--- a/frontend/src/components/DropDown/DropDown.styles.scss
+++ b/frontend/src/components/DropDown/DropDown.styles.scss
@@ -2,6 +2,10 @@
     color: #fff;
 }
 
+.Dropdown-button--dark {
+    color: #000;
+}
+
 .Dropdown-icon {
     font-size: 1.2rem;
 }
\ No newline at end of file
diff --git a/frontend/src/components/DropDown/DropDown.tsx b/frontend/src/components/DropDown/DropDown.tsx
index 2f45a6a1a7..c76ff8daec 100644
--- a/frontend/src/components/DropDown/DropDown.tsx
+++ b/frontend/src/components/DropDown/DropDown.tsx
@@ -2,8 +2,11 @@ import './DropDown.styles.scss';
 
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Button, Dropdown, MenuProps, Space } from 'antd';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 
 function DropDown({ element }: { element: JSX.Element[] }): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+
 	const items: MenuProps['items'] = element.map(
 		(e: JSX.Element, index: number) => ({
 			label: e,
@@ -15,7 +18,7 @@ function DropDown({ element }: { element: JSX.Element[] }): JSX.Element {
 		<Dropdown menu={{ items }} className="Dropdown-container">
 			<Button
 				type="link"
-				className="Dropdown-button"
+				className={!isDarkMode ? 'Dropdown-button--dark' : 'Dropdown-button'}
 				onClick={(e): void => e.preventDefault()}
 			>
 				<Space>