diff --git a/frontend/src/app/providers/BaseProvider.tsx b/frontend/src/app/providers/BaseProvider.tsx
index fc97ad34..3b7af4af 100644
--- a/frontend/src/app/providers/BaseProvider.tsx
+++ b/frontend/src/app/providers/BaseProvider.tsx
@@ -1,25 +1,27 @@
 'use client';
 
-import client from '@/lib/client';
-import { ApolloProvider } from '@apollo/client';
+import dynamic from 'next/dynamic';
 import { ThemeProvider } from 'next-themes';
 import { Toaster } from 'sonner';
 import { AuthProvider } from './AuthProvider';
 
+const DynamicApolloProvider = dynamic(() => import('./DynamicApolloProvider'), {
+  ssr: false,
+});
+
 interface ProvidersProps {
   children: React.ReactNode;
 }
 
-// Base Provider for the app
 export function BaseProviders({ children }: ProvidersProps) {
   return (
     <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
-      <ApolloProvider client={client}>
+      <DynamicApolloProvider>
         <AuthProvider>
           {children}
           <Toaster position="top-right" />
         </AuthProvider>
-      </ApolloProvider>
+      </DynamicApolloProvider>
     </ThemeProvider>
   );
 }
diff --git a/frontend/src/app/providers/DynamicApolloProvider.tsx b/frontend/src/app/providers/DynamicApolloProvider.tsx
new file mode 100644
index 00000000..498c36e7
--- /dev/null
+++ b/frontend/src/app/providers/DynamicApolloProvider.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+import { ApolloProvider } from '@apollo/client';
+import client from '@/lib/client';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function DynamicApolloProvider({ children }: Props) {
+  return <ApolloProvider client={client}>{children}</ApolloProvider>;
+}