diff --git a/twenty-frontend/src/js/components/App.tsx b/twenty-frontend/src/js/components/App.tsx
new file mode 100644
index 0000000..64f606b
--- /dev/null
+++ b/twenty-frontend/src/js/components/App.tsx
@@ -0,0 +1,14 @@
+import React, { PropsWithChildren } from "react";
+import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
+
+export function App({children}: PropsWithChildren<{}>) {
+  const client = new ApolloClient({
+    uri: "/graphql",
+    cache: new InMemoryCache(),
+  });
+  return (
+    <ApolloProvider client={client}>
+      {children}
+    </ApolloProvider>
+  )
+}
diff --git a/twenty-frontend/src/js/constants.ts b/twenty-frontend/src/js/constants.ts
deleted file mode 100644
index d04733a..0000000
--- a/twenty-frontend/src/js/constants.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { InMemoryCache } from "@apollo/client";
-export const CLIENT_OPTIONS = {
-  uri: "/graphql",
-  cache: new InMemoryCache(),
-}
diff --git a/twenty-frontend/src/js/main/projects.tsx b/twenty-frontend/src/js/main/projects.tsx
index 116af46..31721c5 100644
--- a/twenty-frontend/src/js/main/projects.tsx
+++ b/twenty-frontend/src/js/main/projects.tsx
@@ -1,15 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { App } from "/components/App";
 import { Projects } from "/components/Projects";
-import { CLIENT_OPTIONS } from "/constants";
-import { ApolloProvider, ApolloClient } from "@apollo/client";
 
 (function () {
   const root = document.querySelector(".react-root")!;
-  const client = new ApolloClient(CLIENT_OPTIONS);
   ReactDOM.createRoot(root).render(
-    <ApolloProvider client={client}>
+    <App>
       <Projects />
-    </ApolloProvider>,
+    </App>,
   );
 })();
diff --git a/twenty-frontend/src/js/main/task/edit.tsx b/twenty-frontend/src/js/main/task/edit.tsx
index 68db5d8..4a2b614 100644
--- a/twenty-frontend/src/js/main/task/edit.tsx
+++ b/twenty-frontend/src/js/main/task/edit.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { ApolloProvider, ApolloClient } from "@apollo/client";
-import { CLIENT_OPTIONS } from "/constants";
-import { Task as Component } from "/components/Task";
+import { App } from "/components/App";
+import { Task } from "/components/Task";
 
 (function () {
   const params = Object.fromEntries(
@@ -11,11 +10,10 @@ import { Task as Component } from "/components/Task";
       .split(",")
       .map(e => e.split("=")),
   );
-  const client = new ApolloClient(CLIENT_OPTIONS);
   const root = document.querySelector(".react-root")!;
   ReactDOM.createRoot(root).render(
-    <ApolloProvider client={client}>
-      <Component taskId={Number(params.id)} />
-    </ApolloProvider>,
+    <App>
+      <Task taskId={Number(params.id)} />
+    </App>,
   );
 })();
diff --git a/twenty-frontend/src/js/main/task/new.tsx b/twenty-frontend/src/js/main/task/new.tsx
index beac107..e8301b7 100644
--- a/twenty-frontend/src/js/main/task/new.tsx
+++ b/twenty-frontend/src/js/main/task/new.tsx
@@ -1,15 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { CLIENT_OPTIONS } from "/constants";
-import { ApolloClient, ApolloProvider } from "@apollo/client";
+import { App } from "/components/App";
 import { Task } from "/components/Task";
 
 (function () {
   const root = document.querySelector(".react-root")!;
-  const client = new ApolloClient(CLIENT_OPTIONS);
   ReactDOM.createRoot(root).render(
-    <ApolloProvider client={client}>
+    <App>
       <Task />
-    </ApolloProvider>,
+    </App>,
   );
 })();
diff --git a/twenty-frontend/src/js/main/tasks.tsx b/twenty-frontend/src/js/main/tasks.tsx
index f4bb98c..ee8258d 100644
--- a/twenty-frontend/src/js/main/tasks.tsx
+++ b/twenty-frontend/src/js/main/tasks.tsx
@@ -1,15 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { CLIENT_OPTIONS } from "/constants";
-import { ApolloClient, ApolloProvider } from "@apollo/client";
+import { App } from "/components/App";
 import { Tasks } from "/components/Tasks";
 
 (function () {
   const root = document.querySelector(".react-root")!;
-  const client = new ApolloClient(CLIENT_OPTIONS);
   ReactDOM.createRoot(root).render(
-    <ApolloProvider client={client}>
+    <App>
       <Tasks />
-    </ApolloProvider>,
+    </App>,
   );
 })();