diff --git a/app/components/DynamicMainApp.tsx b/app/components/DynamicMainApp.tsx
new file mode 100644
index 0000000..4a1e024
--- /dev/null
+++ b/app/components/DynamicMainApp.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { Center, Spinner } from '@chakra-ui/react';
+import ClientOnly from './ClientOnly';
+
+const MainApp = dynamic(() => import('./MainApp'), {
+  ssr: false,
+  loading: () => (
+    <Center h="100vh">
+      <Spinner size="xl" />
+    </Center>
+  ),
+});
+
+export default function DynamicMainApp() {
+  return (
+    <ClientOnly>
+      <MainApp />
+    </ClientOnly>
+  );
+} 
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 340ad81..956f1b8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,20 +1,5 @@
-import dynamic from 'next/dynamic';
-import { Center, Spinner } from '@chakra-ui/react';
-import ClientOnly from './components/ClientOnly';
-
-const MainApp = dynamic(() => import('./components/MainApp'), {
-  ssr: false,
-  loading: () => (
-    <Center h="100vh">
-      <Spinner size="xl" />
-    </Center>
-  ),
-});
+import DynamicMainApp from './components/DynamicMainApp';
 
 export default function Home() {
-  return (
-    <ClientOnly>
-      <MainApp />
-    </ClientOnly>
-  );
+  return <DynamicMainApp />;
 } 
\ No newline at end of file