diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index e118fcf54f..a74b017164 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,8 +1,12 @@
 import type { AppProps } from 'next/app';
-import { ThemeProvider } from '@/styles';
+import dynamic from 'next/dynamic';
 
 import '../../public/globals.css';
 
+const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), {
+  ssr: false,
+});
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider>
diff --git a/src/styles/themeProvider.tsx b/src/styles/themeProvider.tsx
index 95187d3415..af87a29e7c 100644
--- a/src/styles/themeProvider.tsx
+++ b/src/styles/themeProvider.tsx
@@ -75,3 +75,5 @@ export const ThemeProvider = ({
     </ThemeContext.Provider>
   );
 };
+
+export default ThemeProvider;