diff --git a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
index 817940652..cd54e2466 100644
--- a/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
+++ b/frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.container.tsx
@@ -6,6 +6,7 @@ import {
   DisplayStyleToggleType,
   DisplayStyleType,
 } from "@/Cabinet/types/enum/displayStyle.type.enum";
+import useDisplayStyleToggle from "@/Cabinet/hooks/useDisplayStyleToggle";
 import {
   isDeviceDarkMode,
   updateBodyDisplayStyle,
@@ -32,6 +33,7 @@ export const getInitialDisplayStyle = (
 const DisplayStyleCardContainer = () => {
   const darkModeQuery = isDeviceDarkMode();
   const toggleType = useRecoilValue(displayStyleState);
+  const { addDarkModeListener } = useDisplayStyleToggle();
 
   useEffect(() => {
     const applyDisplayStyle = () => {
@@ -40,13 +42,7 @@ const DisplayStyleCardContainer = () => {
     };
 
     applyDisplayStyle();
-
-    if (toggleType === DisplayStyleToggleType.DEVICE) {
-      darkModeQuery.addEventListener("change", applyDisplayStyle);
-      return () => {
-        darkModeQuery.removeEventListener("change", applyDisplayStyle);
-      };
-    }
+    addDarkModeListener(darkModeQuery, applyDisplayStyle);
   }, [toggleType]);
 
   return <DisplayStyleCard />;
diff --git a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
index 9453bb265..5eb8f52c5 100644
--- a/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
+++ b/frontend/src/Cabinet/components/Common/DarkModeToggleSwitch.tsx
@@ -29,7 +29,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => {
   );
 
   const isDarkMode = displayStyleType === DisplayStyleType.DARK;
-  const { updateToggleType } = useDisplayStyleToggle();
+  const { updateToggleType, addDarkModeListener } = useDisplayStyleToggle();
 
   useEffect(() => {
     setToggleType(getDisplayStyleFromLocalStorage());
@@ -45,12 +45,7 @@ const DarkModeToggleSwitch = ({ id }: { id: string }) => {
     };
 
     updateDisplayStyleType();
-    if (toggleType === DisplayStyleToggleType.DEVICE) {
-      darkModeQuery.addEventListener("change", updateDisplayStyleType);
-      return () => {
-        darkModeQuery.removeEventListener("change", updateDisplayStyleType);
-      };
-    }
+    addDarkModeListener(darkModeQuery, updateDisplayStyleType);
   }, [toggleType]);
 
   useEffect(() => {
diff --git a/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts b/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts
index 3742c4a4e..6d6df1356 100644
--- a/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts
+++ b/frontend/src/Cabinet/hooks/useDisplayStyleToggle.ts
@@ -11,7 +11,18 @@ export const useDisplayStyleToggle = () => {
     updateLocalStorageDisplayStyleToggle(newToggleType);
   };
 
-  return { updateToggleType };
+  const addDarkModeListener = (
+    darkModeQuery: MediaQueryList,
+    callback: () => void
+  ) => {
+    if (toggleType === DisplayStyleToggleType.DEVICE) {
+      darkModeQuery.addEventListener("change", callback);
+      return () => {
+        darkModeQuery.removeEventListener("change", callback);
+      };
+    }
+  };
+  return { updateToggleType, addDarkModeListener };
 };
 
 export default useDisplayStyleToggle;