diff --git a/twenty-frontend/src/js/components/App.tsx b/twenty-frontend/src/js/components/App.tsx
index db38870..9eb4bba 100644
--- a/twenty-frontend/src/js/components/App.tsx
+++ b/twenty-frontend/src/js/components/App.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
 import { ParamContext } from "/Context";
 
diff --git a/twenty-frontend/src/js/components/Group.tsx b/twenty-frontend/src/js/components/Group.tsx
index e620403..cb81b8a 100644
--- a/twenty-frontend/src/js/components/Group.tsx
+++ b/twenty-frontend/src/js/components/Group.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import type { Task } from "/types/schema";
 import classnames from "classnames";
 import { DateTime } from "luxon";
diff --git a/twenty-frontend/src/js/components/Icons.tsx b/twenty-frontend/src/js/components/Icons.tsx
index 160b39a..f0bdb83 100644
--- a/twenty-frontend/src/js/components/Icons.tsx
+++ b/twenty-frontend/src/js/components/Icons.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 type Props = { name: IconName; onClick: (e: React.MouseEvent) => void };
 type IconName = "start-task" | "complete-task" | "destroy-task";
 type IconSet = Record<IconName, (props: Props) => JSX.Element>;
diff --git a/twenty-frontend/src/js/components/NavBar.tsx b/twenty-frontend/src/js/components/NavBar.tsx
index 706c7c8..9cd2fca 100644
--- a/twenty-frontend/src/js/components/NavBar.tsx
+++ b/twenty-frontend/src/js/components/NavBar.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 import { ParamContext } from "/Context";
 import { Maybe } from "/types/schema";
 import { ProjectSelect } from "/components/ProjectSelect";
diff --git a/twenty-frontend/src/js/components/ProjectSelect.tsx b/twenty-frontend/src/js/components/ProjectSelect.tsx
index 98d4b08..3f9d1ed 100644
--- a/twenty-frontend/src/js/components/ProjectSelect.tsx
+++ b/twenty-frontend/src/js/components/ProjectSelect.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { useProjects } from "/hooks/queries/useProjects";
 import { Project, Maybe } from "/types/schema";
 import { Select, Option } from "/components/Select";
diff --git a/twenty-frontend/src/js/components/Projects.tsx b/twenty-frontend/src/js/components/Projects.tsx
index cc42080..da623a1 100644
--- a/twenty-frontend/src/js/components/Projects.tsx
+++ b/twenty-frontend/src/js/components/Projects.tsx
@@ -1,5 +1,5 @@
 import { useSetRandomProjectColor } from "/hooks/mutations/useSetRandomProjectColor";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { NavBar } from "/components/NavBar";
 import { useProjects } from "/hooks/queries/useProjects";
 import { Project } from "/types/schema";
diff --git a/twenty-frontend/src/js/components/Select.tsx b/twenty-frontend/src/js/components/Select.tsx
index 1718750..6d08b9a 100644
--- a/twenty-frontend/src/js/components/Select.tsx
+++ b/twenty-frontend/src/js/components/Select.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState, useEffect } from "react";
+import { ReactNode, useState, useEffect } from "react";
 
 const LI_CLASSNAME = [
   "flex",
diff --git a/twenty-frontend/src/js/components/Tabs.tsx b/twenty-frontend/src/js/components/Tabs.tsx
index 99c066f..c2522c0 100644
--- a/twenty-frontend/src/js/components/Tabs.tsx
+++ b/twenty-frontend/src/js/components/Tabs.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import classnames from "classnames";
 
 export type Tab = {
diff --git a/twenty-frontend/src/js/components/Task.tsx b/twenty-frontend/src/js/components/Task.tsx
index 7ab08ab..d9596c7 100644
--- a/twenty-frontend/src/js/components/Task.tsx
+++ b/twenty-frontend/src/js/components/Task.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from "react";
+import { useEffect, useState, useContext } from "react";
 import { ParamContext } from "/Context";
 import { useForm } from "react-hook-form";
 import { useCreateTask } from "/hooks/mutations/useCreateTask";
diff --git a/twenty-frontend/src/js/components/TaskStatusSelect.tsx b/twenty-frontend/src/js/components/TaskStatusSelect.tsx
index f7c4ea9..55b6c9c 100644
--- a/twenty-frontend/src/js/components/TaskStatusSelect.tsx
+++ b/twenty-frontend/src/js/components/TaskStatusSelect.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Task, TaskStatus } from "/types/schema";
 import { useUpdateTask } from "hooks/mutations/useUpdateTask";
 import { GET_TASKS } from "/hooks/queries/useTasks";
diff --git a/twenty-frontend/src/js/components/Tasks.tsx b/twenty-frontend/src/js/components/Tasks.tsx
index 3f79ca8..1e6044e 100644
--- a/twenty-frontend/src/js/components/Tasks.tsx
+++ b/twenty-frontend/src/js/components/Tasks.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from "react";
+import { useEffect, useContext } from "react";
 import { ParamContext } from "/Context";
 import { NavBar } from "/components/NavBar";
 import { Group } from "/components/Group";
diff --git a/twenty-frontend/src/js/components/forms/Select.tsx b/twenty-frontend/src/js/components/forms/Select.tsx
index 38c4144..6253502 100644
--- a/twenty-frontend/src/js/components/forms/Select.tsx
+++ b/twenty-frontend/src/js/components/forms/Select.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 type Props = {
   children: JSX.Element[];
   className?: string;
diff --git a/twenty-frontend/src/js/main/projects.tsx b/twenty-frontend/src/js/main/projects.tsx
index 31721c5..4e6a917 100644
--- a/twenty-frontend/src/js/main/projects.tsx
+++ b/twenty-frontend/src/js/main/projects.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "/components/App";
 import { Projects } from "/components/Projects";
diff --git a/twenty-frontend/src/js/main/task/edit.tsx b/twenty-frontend/src/js/main/task/edit.tsx
index e8301b7..339412a 100644
--- a/twenty-frontend/src/js/main/task/edit.tsx
+++ b/twenty-frontend/src/js/main/task/edit.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "/components/App";
 import { Task } from "/components/Task";
diff --git a/twenty-frontend/src/js/main/task/new.tsx b/twenty-frontend/src/js/main/task/new.tsx
index e8301b7..339412a 100644
--- a/twenty-frontend/src/js/main/task/new.tsx
+++ b/twenty-frontend/src/js/main/task/new.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "/components/App";
 import { Task } from "/components/Task";
diff --git a/twenty-frontend/src/js/main/tasks.tsx b/twenty-frontend/src/js/main/tasks.tsx
index ee8258d..18d42cd 100644
--- a/twenty-frontend/src/js/main/tasks.tsx
+++ b/twenty-frontend/src/js/main/tasks.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "/components/App";
 import { Tasks } from "/components/Tasks";
diff --git a/twenty-frontend/tsconfig.json b/twenty-frontend/tsconfig.json
index 7cfd7d9..945cfa9 100644
--- a/twenty-frontend/tsconfig.json
+++ b/twenty-frontend/tsconfig.json
@@ -10,7 +10,7 @@
     "jsx": "react",
     "allowJs": true,
     "lib": [ "ES2022", "DOM" ],
-
+    "allowUmdGlobalAccess": true,
     "baseUrl": "src/",
     "paths": { "*": ["js/*"] },
   }
diff --git a/twenty-frontend/webpack.config.js b/twenty-frontend/webpack.config.js
index 6711ec2..0a969d7 100644
--- a/twenty-frontend/webpack.config.js
+++ b/twenty-frontend/webpack.config.js
@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const path = require('path');
 const process = require('process');
 
@@ -17,4 +18,9 @@ module.exports = {
       },
     ],
   },
+  plugins: [
+    new webpack.ProvidePlugin({
+      React: 'react',
+    }),
+  ]
 }