diff --git a/src/components/common/Providers.tsx b/src/components/common/Providers.tsx
index c86cd10..88785a9 100644
--- a/src/components/common/Providers.tsx
+++ b/src/components/common/Providers.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { RecoilRoot } from 'recoil';
 
 import defaultThemeV1 from '@/styles/theme';
 import defaultThemeV2 from '@/styles/themeV2';
@@ -23,12 +24,14 @@ function Providers({ children }: Props) {
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={defaultThemeV1}>
-          <ThemeProvider theme={defaultThemeV2}>
-            <Router basename="/">{children}</Router>
-            <ReactQueryDevtools initialIsOpen={false} />
+        <RecoilRoot>
+          <ThemeProvider theme={defaultThemeV1}>
+            <ThemeProvider theme={defaultThemeV2}>
+              <Router basename="/">{children}</Router>
+              <ReactQueryDevtools initialIsOpen={false} />
+            </ThemeProvider>
           </ThemeProvider>
-        </ThemeProvider>
+        </RecoilRoot>
       </QueryClientProvider>
     </>
   );
diff --git a/src/recoil/atoms/modalAtom.ts b/src/recoil/atoms/modalAtom.ts
new file mode 100644
index 0000000..b69b99f
--- /dev/null
+++ b/src/recoil/atoms/modalAtom.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isModalOpenState = atom({
+  key: 'isModalOpenState',
+  default: false,
+});