diff --git a/frontend/src/components/features/settings/styled-switch-component.tsx b/frontend/src/components/features/settings/styled-switch-component.tsx
index c00a55d18c..9299b08b30 100644
--- a/frontend/src/components/features/settings/styled-switch-component.tsx
+++ b/frontend/src/components/features/settings/styled-switch-component.tsx
@@ -12,13 +12,14 @@ export function StyledSwitchComponent({
       className={cn(
         "w-12 h-6 rounded-xl flex items-center p-1.5 cursor-pointer",
         isToggled && "justify-end bg-primary",
-        !isToggled && "justify-start bg-[#1F2228] border border-tertiary-alt",
+        !isToggled &&
+          "justify-start bg-base-secondary border border-tertiary-light",
       )}
     >
       <div
         className={cn(
-          "bg-[#1F2228] w-3 h-3 rounded-xl",
-          isToggled ? "bg-[#1F2228]" : "bg-tertiary-alt",
+          "w-3 h-3 rounded-xl",
+          isToggled ? "bg-base-secondary" : "bg-tertiary-light",
         )}
       />
     </div>