diff --git a/client/src/components/Design/components/Button/Button.stories.tsx b/client/src/components/Design/components/Button/Button.stories.tsx
index 64288bcb5..efe54cc87 100644
--- a/client/src/components/Design/components/Button/Button.stories.tsx
+++ b/client/src/components/Design/components/Button/Button.stories.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import type {Meta, StoryObj} from '@storybook/react';
 
 import Button from './Button';
diff --git a/client/src/components/Design/components/Button/Button.tsx b/client/src/components/Design/components/Button/Button.tsx
index 5ce12118e..462797f72 100644
--- a/client/src/components/Design/components/Button/Button.tsx
+++ b/client/src/components/Design/components/Button/Button.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 
-import React, {forwardRef} from 'react';
+import {forwardRef} from 'react';
 
 import {useTheme} from '@theme/HDesignProvider';
 
diff --git a/client/src/components/Design/components/Input/Input.stories.tsx b/client/src/components/Design/components/Input/Input.stories.tsx
index 9b99700c5..a0fb0b493 100644
--- a/client/src/components/Design/components/Input/Input.stories.tsx
+++ b/client/src/components/Design/components/Input/Input.stories.tsx
@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
-import React, {useEffect, useState} from 'react';
+import {useState} from 'react';
 
 import Input from '@HDcomponents/Input/Input';
 import Flex from '@HDcomponents/Flex/Flex';
diff --git a/client/src/components/Design/components/Input/Input.tsx b/client/src/components/Design/components/Input/Input.tsx
index 5e567a84b..098e19b40 100644
--- a/client/src/components/Design/components/Input/Input.tsx
+++ b/client/src/components/Design/components/Input/Input.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
 
 import IconButton from '@HDcomponents/IconButton/IconButton';
 import {InputProps} from '@HDcomponents/Input/Input.type';
diff --git a/client/src/components/Design/components/ListButton/ListButton.tsx b/client/src/components/Design/components/ListButton/ListButton.tsx
index b0fff4fc8..78132690e 100644
--- a/client/src/components/Design/components/ListButton/ListButton.tsx
+++ b/client/src/components/Design/components/ListButton/ListButton.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import React, {forwardRef} from 'react';
+import {forwardRef} from 'react';
 
 import Text from '@HDcomponents/Text/Text';
 import IconButton from '@HDcomponents/IconButton/IconButton';
diff --git a/client/src/components/Design/components/Tabs/Tabs.stories.tsx b/client/src/components/Design/components/Tabs/Tabs.stories.tsx
index b5767e40b..2e1459229 100644
--- a/client/src/components/Design/components/Tabs/Tabs.stories.tsx
+++ b/client/src/components/Design/components/Tabs/Tabs.stories.tsx
@@ -1,7 +1,6 @@
+/** @jsxImportSource @emotion/react */
 import type {Meta, StoryObj} from '@storybook/react';
 
-import React from 'react';
-
 import Tabs from '@HDcomponents/Tabs/Tabs';
 
 import Tab from './Tab';
diff --git a/client/src/components/Design/components/Tabs/Tabs.tsx b/client/src/components/Design/components/Tabs/Tabs.tsx
index 8a5e3fad0..94444f5ba 100644
--- a/client/src/components/Design/components/Tabs/Tabs.tsx
+++ b/client/src/components/Design/components/Tabs/Tabs.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import React, {useEffect, useRef, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 
 import {useTheme} from '@theme/HDesignProvider';
 
diff --git a/client/src/components/Design/components/Text/Text.tsx b/client/src/components/Design/components/Text/Text.tsx
index 016416edc..cd91643f5 100644
--- a/client/src/components/Design/components/Text/Text.tsx
+++ b/client/src/components/Design/components/Text/Text.tsx
@@ -1,8 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import type {TextProps} from '@HDcomponents/Text/Text.type';
 
-import React from 'react';
-
 import {useTheme} from '@theme/HDesignProvider';
 
 import {getSizeStyling} from './Text.style';
diff --git a/client/src/components/Design/components/Top/Top.tsx b/client/src/components/Design/components/Top/Top.tsx
index 11b2b9586..644b61292 100644
--- a/client/src/components/Design/components/Top/Top.tsx
+++ b/client/src/components/Design/components/Top/Top.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import {css} from '@emotion/react';
-import React from 'react';
+import {Children, isValidElement} from 'react';
 
 import Line from './Line';
 import EditableLine from './EditableLine';
@@ -10,8 +10,8 @@ Top.EditableLine = EditableLine;
 
 export default function Top({children}: React.PropsWithChildren) {
   const childrenTexts: string[] = [];
-  React.Children.forEach(children, child => {
-    if (React.isValidElement(child) && child.type === Top.Line) {
+  Children.forEach(children, child => {
+    if (isValidElement(child) && child.type === Top.Line) {
       childrenTexts.push(child.props.text);
     }
   });
diff --git a/client/src/components/Design/theme/HDesignProvider.tsx b/client/src/components/Design/theme/HDesignProvider.tsx
index c5367afa1..0c03cad3e 100644
--- a/client/src/components/Design/theme/HDesignProvider.tsx
+++ b/client/src/components/Design/theme/HDesignProvider.tsx
@@ -1,4 +1,4 @@
-import React, {createContext, useContext, useState, ReactNode} from 'react';
+import {createContext, useContext, useState, ReactNode} from 'react';
 import {Global} from '@emotion/react';
 
 import {Theme} from '@theme/theme.type';
diff --git a/client/src/index.tsx b/client/src/index.tsx
index cb3fcb955..271deb32e 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
 import {RouterProvider} from 'react-router-dom';
 import * as Sentry from '@sentry/react';
 
@@ -24,9 +24,9 @@ Sentry.init({
 // }
 
 // enableMocking().then(() => {
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
     <RouterProvider router={router} />
-  </React.StrictMode>,
+  </StrictMode>,
 );
 // });