diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
index 43ca3960e..817940652 100644
--- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
+++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
@@ -2,14 +2,14 @@ import { useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { displayStyleState } from "@/Cabinet/recoil/atoms";
 import DisplayStyleCard from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard";
-import {
-  isDeviceDarkMode,
-  updateBodyDisplayStyle,
-} from "@/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer";
 import {
   DisplayStyleToggleType,
   DisplayStyleType,
 } from "@/Cabinet/types/enum/displayStyle.type.enum";
+import {
+  isDeviceDarkMode,
+  updateBodyDisplayStyle,
+} from "@/Cabinet/utils/displayStyleUtils";
 
 // 로컬스토리지의 display-style-toggle 값에 따라 DisplayStyleType 반환
 export const getInitialDisplayStyle = (
diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx
index 2c447bec6..0c3d1d1f9 100644
--- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx
+++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx
@@ -8,6 +8,7 @@ import { ReactComponent as MonitorMobileIcon } from "@/Cabinet/assets/images/mon
 import { ReactComponent as MoonIcon } from "@/Cabinet/assets/images/moon.svg";
 import { ReactComponent as SunIcon } from "@/Cabinet/assets/images/sun.svg";
 import { DisplayStyleToggleType } from "@/Cabinet/types/enum/displayStyle.type.enum";
+import useDisplayStyleToggle from "@/Cabinet/hooks/useDisplayStyleToggle";
 
 interface IToggleItemSeparated {
   name: string;
@@ -41,11 +42,10 @@ export const updateLocalStorageDisplayStyleToggle = (
 
 const DisplayStyleCard = () => {
   const [toggleType, setToggleType] = useRecoilState(displayStyleState);
-
+  const { updateToggleType } = useDisplayStyleToggle();
   const handleButtonClick = (key: DisplayStyleToggleType) => {
     if (toggleType === key) return;
-    setToggleType(key);
-    updateLocalStorageDisplayStyleToggle(key);
+    updateToggleType(key);
   };
 
   return (
diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts
index 4dd66b8bc..d4e4b4112 100644
--- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts
+++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/displayStyleInitializer.ts
@@ -3,23 +3,11 @@ import {
   DisplayStyleToggleType,
   DisplayStyleType,
 } from "@/Cabinet/types/enum/displayStyle.type.enum";
-
-export const getDisplayStyleFromLocalStorage: () => DisplayStyleToggleType =
-  () => {
-    return (
-      (localStorage.getItem(
-        "display-style-toggle"
-      ) as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE
-    );
-  };
-
-export const updateBodyDisplayStyle = (style: DisplayStyleType) => {
-  document.body.setAttribute("display-style", style);
-};
-
-export const isDeviceDarkMode = () => {
-  return window.matchMedia("(prefers-color-scheme: dark)");
-};
+import {
+  getDisplayStyleFromLocalStorage,
+  isDeviceDarkMode,
+  updateBodyDisplayStyle,
+} from "@/Cabinet/utils/displayStyleUtils";
 
 (function () {
   const isClient = typeof window !== "undefined";
diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
index 9c924830c..9453bb265 100644
--- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
+++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
@@ -2,19 +2,19 @@ import { useCallback, useEffect, useState } from "react";
 import { useRecoilState } from "recoil";
 import styled from "styled-components";
 import { displayStyleState } from "@/Cabinet/recoil/atoms";
-import { updateLocalStorageDisplayStyleToggle } from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard";
 import { getInitialDisplayStyle } from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container";
-import {
-  getDisplayStyleFromLocalStorage,
-  isDeviceDarkMode,
-  updateBodyDisplayStyle,
-} 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 {
   DisplayStyleToggleType,
   DisplayStyleType,
 } from "@/Cabinet/types/enum/displayStyle.type.enum";
+import useDisplayStyleToggle from "@/Cabinet/hooks/useDisplayStyleToggle";
+import {
+  getDisplayStyleFromLocalStorage,
+  isDeviceDarkMode,
+  updateBodyDisplayStyle,
+} from "@/Cabinet/utils/displayStyleUtils";
 
 const DarkModeToggleSwitch = ({ id }: { id: string }) => {
   const [toggleType, setToggleType] = useRecoilState(displayStyleState);
@@ -29,6 +29,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => {
   );
 
   const isDarkMode = displayStyleType === DisplayStyleType.DARK;
+  const { updateToggleType } = useDisplayStyleToggle();
 
   useEffect(() => {
     setToggleType(getDisplayStyleFromLocalStorage());
@@ -70,8 +71,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => {
           : DisplayStyleToggleType.LIGHT;
     }
 
-    updateLocalStorageDisplayStyleToggle(newToggleType);
-    setToggleType(newToggleType);
+    updateToggleType(newToggleType);
   }, [displayStyleType]);
 
   return (
diff --git a/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts b/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts
new file mode 100644
index 000000000..3742c4a4e
--- /dev/null
+++ b/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts
@@ -0,0 +1,17 @@
+import { useRecoilState } from "recoil";
+import { displayStyleState } from "@/Cabinet/recoil/atoms";
+import { updateLocalStorageDisplayStyleToggle } from "@/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard";
+import { DisplayStyleToggleType } from "@/Cabinet/types/enum/displayStyle.type.enum";
+
+export const useDisplayStyleToggle = () => {
+  const [toggleType, setToggleType] = useRecoilState(displayStyleState);
+
+  const updateToggleType = (newToggleType: DisplayStyleToggleType) => {
+    setToggleType(newToggleType);
+    updateLocalStorageDisplayStyleToggle(newToggleType);
+  };
+
+  return { updateToggleType };
+};
+
+export default useDisplayStyleToggle;
diff --git a/frontend/src/Cabinet/utils/displayStyleUtils.ts b/frontend/src/Cabinet/utils/displayStyleUtils.ts
new file mode 100644
index 000000000..04ea15343
--- /dev/null
+++ b/frontend/src/Cabinet/utils/displayStyleUtils.ts
@@ -0,0 +1,21 @@
+import {
+  DisplayStyleToggleType,
+  DisplayStyleType,
+} from "@/Cabinet/types/enum/displayStyle.type.enum";
+
+export const getDisplayStyleFromLocalStorage: () => DisplayStyleToggleType =
+  () => {
+    return (
+      (localStorage.getItem(
+        "display-style-toggle"
+      ) as DisplayStyleToggleType) || DisplayStyleToggleType.DEVICE
+    );
+  };
+
+export const updateBodyDisplayStyle = (style: DisplayStyleType) => {
+  document.body.setAttribute("display-style", style);
+};
+
+export const isDeviceDarkMode = () => {
+  return window.matchMedia("(prefers-color-scheme: dark)");
+};