diff --git a/client/src/App.tsx b/client/src/App.tsx
index 15c94dbb5..c07aa5496 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -43,8 +43,8 @@ function App() {
 					theme={mode}
 					style={
 						{
-							"--toastify-color-progress-light": "#7C8BA1",
-							"--toastify-color-progress-dark": "#7C8BA1",
+							"--toastify-color-progress-light": theme.palette.primary.main,
+							"--toastify-color-progress-dark": theme.palette.primary.main,
 						} as CSSProperties
 					}
 				/>
diff --git a/client/src/Components/design-elements/Tooltip.tsx b/client/src/Components/design-elements/Tooltip.tsx
index f83b1331c..f9bbbb92b 100644
--- a/client/src/Components/design-elements/Tooltip.tsx
+++ b/client/src/Components/design-elements/Tooltip.tsx
@@ -16,16 +16,15 @@ export const Tooltip = ({ placement = "top", ...props }: StyledTooltipProps) =>
 			slotProps={{
 				tooltip: {
 					sx: {
-						background:
+						backgroundColor:
 							theme.palette.mode === "dark"
-								? "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)"
-								: "linear-gradient(135deg, #2c3e50 0%, #1a252f 100%)",
-						backgroundColor: "transparent",
-						color: "#ffffff",
+								? theme.palette.grey[900]
+								: theme.palette.grey[800],
+						color: theme.palette.common.white,
 						fontSize: "13px",
 						padding: `${theme.spacing(4)} ${theme.spacing(5)}`,
 						borderRadius: `${theme.shape.borderRadius}px`,
-						boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)",
+						boxShadow: theme.shadows[6],
 					},
 				},
 			}}