diff --git a/frontend/components/basic/InputField.tsx b/frontend/components/basic/InputField.tsx
index 08afa975d..241410959 100644
--- a/frontend/components/basic/InputField.tsx
+++ b/frontend/components/basic/InputField.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { memo,useState } from 'react';
 import { faCircle, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -140,4 +140,4 @@ const InputField = (
   }
 };
 
-export default React.memo(InputField);
+export default memo(InputField);
diff --git a/frontend/components/basic/table/ServiceTokenTable.js b/frontend/components/basic/table/ServiceTokenTable.js
index fda94e477..6e5cc65ea 100644
--- a/frontend/components/basic/table/ServiceTokenTable.js
+++ b/frontend/components/basic/table/ServiceTokenTable.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { faX } from '@fortawesome/free-solid-svg-icons';
 
diff --git a/frontend/components/basic/table/UserTable.js b/frontend/components/basic/table/UserTable.js
index 99ec0ee75..449d23cc6 100644
--- a/frontend/components/basic/table/UserTable.js
+++ b/frontend/components/basic/table/UserTable.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/router';
 import { faX } from '@fortawesome/free-solid-svg-icons';
 
diff --git a/frontend/components/dashboard/DashboardInputField.tsx b/frontend/components/dashboard/DashboardInputField.tsx
index cb75dcf8c..3ede5b051 100644
--- a/frontend/components/dashboard/DashboardInputField.tsx
+++ b/frontend/components/dashboard/DashboardInputField.tsx
@@ -1,4 +1,4 @@
-import React, { SyntheticEvent, useRef } from 'react';
+import { memo, SyntheticEvent, useRef } from 'react';
 import { faCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -153,4 +153,4 @@ const DashboardInputField = ({
   return <>Something Wrong</>;
 };
 
-export default React.memo(DashboardInputField);
+export default memo(DashboardInputField);
diff --git a/frontend/components/integrations/Integration.tsx b/frontend/components/integrations/Integration.tsx
index 3bba41534..ae9a1a613 100644
--- a/frontend/components/integrations/Integration.tsx
+++ b/frontend/components/integrations/Integration.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import {
     faArrowRight,
diff --git a/frontend/components/navigation/NavBarDashboard.tsx b/frontend/components/navigation/NavBarDashboard.tsx
index 1834d8117..23f7c0677 100644
--- a/frontend/components/navigation/NavBarDashboard.tsx
+++ b/frontend/components/navigation/NavBarDashboard.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react/jsx-key */
-import React, { Fragment, useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { faGithub, faSlack } from '@fortawesome/free-brands-svg-icons';
diff --git a/frontend/components/navigation/NavHeader.tsx b/frontend/components/navigation/NavHeader.tsx
index 3d64c2eda..6e9fabe39 100644
--- a/frontend/components/navigation/NavHeader.tsx
+++ b/frontend/components/navigation/NavHeader.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import {
   faAngleRight,
diff --git a/frontend/pages/dashboard.js b/frontend/pages/dashboard.js
index 5954a9db2..e183347aa 100644
--- a/frontend/pages/dashboard.js
+++ b/frontend/pages/dashboard.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 
diff --git a/frontend/pages/dashboard/[id].js b/frontend/pages/dashboard/[id].js
index 36f5eb3f2..8438c6625 100644
--- a/frontend/pages/dashboard/[id].js
+++ b/frontend/pages/dashboard/[id].js
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import { Fragment, useCallback, useEffect, useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
diff --git a/frontend/pages/heroku.js b/frontend/pages/heroku.js
index 088c96500..3302c0dac 100644
--- a/frontend/pages/heroku.js
+++ b/frontend/pages/heroku.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 const queryString = require("query-string");
diff --git a/frontend/pages/home/[id].tsx b/frontend/pages/home/[id].tsx
index d433600d3..6df85adb1 100644
--- a/frontend/pages/home/[id].tsx
+++ b/frontend/pages/home/[id].tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index 5fc3aab22..f1412e16c 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useRouter } from "next/router";
 
 export default function Home() {
diff --git a/frontend/pages/integrations/[id].js b/frontend/pages/integrations/[id].js
index 32a8e515e..ae203563a 100644
--- a/frontend/pages/integrations/[id].js
+++ b/frontend/pages/integrations/[id].js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Head from "next/head";
 import Image from "next/image";
 import { useRouter } from "next/router";
diff --git a/frontend/pages/login.tsx b/frontend/pages/login.tsx
index 036902de0..83a6920e2 100644
--- a/frontend/pages/login.tsx
+++ b/frontend/pages/login.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
diff --git a/frontend/pages/netlify.js b/frontend/pages/netlify.js
index 6907d6db4..fc58042d5 100644
--- a/frontend/pages/netlify.js
+++ b/frontend/pages/netlify.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 const queryString = require("query-string");
diff --git a/frontend/pages/password-reset.tsx b/frontend/pages/password-reset.tsx
index a09b85ab0..45d17d194 100644
--- a/frontend/pages/password-reset.tsx
+++ b/frontend/pages/password-reset.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
diff --git a/frontend/pages/settings/billing/[id].js b/frontend/pages/settings/billing/[id].js
index 00d1db23f..485dfab8d 100644
--- a/frontend/pages/settings/billing/[id].js
+++ b/frontend/pages/settings/billing/[id].js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Head from "next/head";
 
 import Plan from "~/components/billing/Plan";
diff --git a/frontend/pages/settings/org/[id].js b/frontend/pages/settings/org/[id].js
index 80f6efc5d..c54e8e193 100644
--- a/frontend/pages/settings/org/[id].js
+++ b/frontend/pages/settings/org/[id].js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import {
diff --git a/frontend/pages/settings/personal/[id].js b/frontend/pages/settings/personal/[id].js
index aa497bbfd..60dcba1be 100644
--- a/frontend/pages/settings/personal/[id].js
+++ b/frontend/pages/settings/personal/[id].js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Head from "next/head";
 import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
diff --git a/frontend/pages/settings/project/[id].js b/frontend/pages/settings/project/[id].js
index ec4864919..64ea96093 100644
--- a/frontend/pages/settings/project/[id].js
+++ b/frontend/pages/settings/project/[id].js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { faCheck, faPlus } from "@fortawesome/free-solid-svg-icons";
diff --git a/frontend/pages/signup.tsx b/frontend/pages/signup.tsx
index a98e5cf29..e1a50406c 100644
--- a/frontend/pages/signup.tsx
+++ b/frontend/pages/signup.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import ReactCodeInput from 'react-code-input';
 import Head from 'next/head';
 import Image from 'next/image';
diff --git a/frontend/pages/signupinvite.js b/frontend/pages/signupinvite.js
index a41010aea..7686161a2 100644
--- a/frontend/pages/signupinvite.js
+++ b/frontend/pages/signupinvite.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
diff --git a/frontend/pages/users/[id].js b/frontend/pages/users/[id].js
index fe96ded3a..c1739b0a9 100644
--- a/frontend/pages/users/[id].js
+++ b/frontend/pages/users/[id].js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
diff --git a/frontend/pages/vercel.js b/frontend/pages/vercel.js
index adfffe77e..7b15769b1 100644
--- a/frontend/pages/vercel.js
+++ b/frontend/pages/vercel.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 const queryString = require("query-string");
diff --git a/frontend/pages/verify-email.tsx b/frontend/pages/verify-email.tsx
index 7dfc1427e..ae2c9fff1 100644
--- a/frontend/pages/verify-email.tsx
+++ b/frontend/pages/verify-email.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';