diff --git a/src/components/atoms/Toggle.tsx b/src/components/atoms/Toggle.tsx
index 56ad1b0..875f1c6 100644
--- a/src/components/atoms/Toggle.tsx
+++ b/src/components/atoms/Toggle.tsx
@@ -1,27 +1,12 @@
 import React from 'react';
-import { extendTheme, ThemeProvider, CSSReset, Switch } from '@chakra-ui/react';
-
-const customTheme = extendTheme({
-  colors: {
-    primary2: {
-      500: '#3CAA8D',
-    },
-  },
-});
+import { Switch } from '@chakra-ui/react';
 
 const Toggle: React.FC<{
   isToggleOn?: boolean;
   onClick?: () => void;
 }> = ({ isToggleOn, onClick }) => {
   return (
-    <ThemeProvider theme={customTheme}>
-      <CSSReset />
-      <Switch
-        colorScheme="primary2"
-        isChecked={isToggleOn}
-        onChange={onClick}
-      />
-    </ThemeProvider>
+    <Switch colorScheme="primary2" isChecked={isToggleOn} onChange={onClick} />
   );
 };
 
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 90b16a2..a39fb8c 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,3 +1,4 @@
+import { ChakraProvider, CSSReset, extendTheme } from '@chakra-ui/react';
 import Layout from '@/components/templates/Layout';
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
@@ -6,12 +7,21 @@ import 'dayjs/locale/ko';
 import dayjs from 'dayjs';
 dayjs.locale('ko');
 
+const theme = extendTheme({
+  colors: {
+    primary2: { 500: '#3CAA8D' },
+  },
+});
+
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
   return (
     <RecoilRoot>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
+      <ChakraProvider theme={theme}>
+        <CSSReset />
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </ChakraProvider>
     </RecoilRoot>
   );
 }