diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts
index cf658c23f..c2d63161f 100644
--- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts
+++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts
@@ -4,9 +4,14 @@ import {
   DisplayStyleType,
 } from "@/Cabinet/types/enum/displayStyle.type.enum";
 
-export const savedDisplayStyleToggle =
-  (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) ||
-  DisplayStyleToggleType.DEVICE;
+export const getDisplayStyleFromLocalStorage: () => DisplayStyleToggleType =
+  () => {
+    return (
+      (localStorage.getItem(
+        "display-style-toggle"
+      ) as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE
+    );
+  };
 
 (function () {
   const isClient = typeof window !== "undefined";
@@ -14,7 +19,7 @@ export const savedDisplayStyleToggle =
     const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
     const colorMode = getInitialDisplayStyle(
-      savedDisplayStyleToggle,
+      getDisplayStyleFromLocalStorage(),
       darkModeQuery
     );
 
diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
index fa6ce1633..725cdb86b 100644
--- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
+++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
@@ -3,7 +3,7 @@ import { useRecoilState } from "recoil";
 import styled from "styled-components";
 import { displayStyleState } from "@/Cabinet/recoil/atoms";
 import { getInitialDisplayStyle } from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container";
-import { savedDisplayStyleToggle } from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer";
+import { getDisplayStyleFromLocalStorage } from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer";
 import { ReactComponent as MoonIcon } from "@/Cabinet/assets/images/moonIcon.svg";
 import { ReactComponent as SunIcon } from "@/Cabinet/assets/images/sunIcon.svg";
 import {
@@ -17,17 +17,17 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => {
   const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
   const [displayStyleType, setDisplayStyleType] = useState<DisplayStyleType>(
     () => {
-      return getInitialDisplayStyle(savedDisplayStyleToggle, darkModeQuery);
+      return getInitialDisplayStyle(
+        getDisplayStyleFromLocalStorage(),
+        darkModeQuery
+      );
     }
   );
 
   const isDarkMode = displayStyleType === DisplayStyleType.DARK;
-  const toggleType =
-    (localStorage.getItem("display-style-toggle") as DisplayStyleToggleType) ||
-    DisplayStyleToggleType.DEVICE;
 
   useEffect(() => {
-    setDisplayStyleToggle(toggleType);
+    setDisplayStyleToggle(getDisplayStyleFromLocalStorage());
   }, []);
 
   useEffect(() => {