diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index eb91124..a1cc0ed 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -4,6 +4,7 @@ import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 
 import { SessionProvider } from "@/context/SessionContext";
+import ReactQueryProvider from "@/lib/ReactQueryProvider";
 
 const poppins = Poppins({
   subsets: ["latin"],
@@ -31,13 +32,15 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <head />
       <SessionProvider>
-        <body className={`${poppins.variable}`}>
-          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            <div className="relative flex min-h-screen flex-col">
-              <div className="flex-1 bg-background">{children}</div>
-            </div>
-          </ThemeProvider>
-        </body>
+        <ReactQueryProvider>
+          <body className={`${poppins.variable}`}>
+            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+              <div className="relative flex min-h-screen flex-col">
+                <div className="flex-1 bg-background">{children}</div>
+              </div>
+            </ThemeProvider>
+          </body>
+        </ReactQueryProvider>
       </SessionProvider>
     </html>
   );
diff --git a/frontend/lib/ReactQueryProvider.tsx b/frontend/lib/ReactQueryProvider.tsx
new file mode 100644
index 0000000..219cb7a
--- /dev/null
+++ b/frontend/lib/ReactQueryProvider.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+
+const ReactQueryProvider = ({ children }: { children: React.ReactNode }) => {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+};
+
+export default ReactQueryProvider;
