diff --git a/README.md b/README.md
index 40a6e5160..9b27eb8e6 100644
--- a/README.md
+++ b/README.md
@@ -40,8 +40,6 @@ yarn add @logicalclocks/quartz
 ### Usage
 
 ```tsx
-import React from 'react';
-
 import { ThemeProvider, Button } from '@logicalclocks/quartz';
 
 const App = () => (
@@ -103,10 +101,9 @@ Delete `node_modules` and `dist` folders then follow **Build locally** or **Run
 
 Follow **Build locally** or **Run locally** instruction
 
-
 ## Using locally
+
 You can use the library locally with the help of [yalc](https://github.com/wclr/yalc).
 Just run `yarn publish-local` here and then do a `yalc link @logicalclocks/quartz` wherever you wanna use it.
 
 To publish changes you can do `yarn dlx yalc push`. After that, the changes will be "published" to the local registry.
-
diff --git a/src/components/alternative-header/AlternativeHeader.tsx b/src/components/alternative-header/AlternativeHeader.tsx
index a4a432249..b88222047 100644
--- a/src/components/alternative-header/AlternativeHeader.tsx
+++ b/src/components/alternative-header/AlternativeHeader.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Box, BoxProps, Flex } from 'rebass';
 import Value from '../typography/value';
 import * as S from './styles';
@@ -23,7 +23,7 @@ export interface Props extends Omit<BoxProps, 'css'> {
   withBase?: boolean;
 }
 
-export const AlternativeHeader: FC<Props> = ({
+export const AlternativeHeader = ({
   title,
   tabs,
   withBase = false,
diff --git a/src/components/alternative-header/stories.tsx b/src/components/alternative-header/stories.tsx
index 9dca3c7c5..e718fd665 100644
--- a/src/components/alternative-header/stories.tsx
+++ b/src/components/alternative-header/stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Box } from 'rebass';
 import { AlternativeHeader } from './index';
 
diff --git a/src/components/animated-progress/AnimatedProgress.tsx b/src/components/animated-progress/AnimatedProgress.tsx
index 6e2436eac..098b6e4bb 100644
--- a/src/components/animated-progress/AnimatedProgress.tsx
+++ b/src/components/animated-progress/AnimatedProgress.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useNProgress } from '@tanem/react-nprogress';
 import { Options } from '@tanem/react-nprogress/dist/types';
 
diff --git a/src/components/animated-progress/Bar.tsx b/src/components/animated-progress/Bar.tsx
index 7a7d1ad91..be7bce928 100644
--- a/src/components/animated-progress/Bar.tsx
+++ b/src/components/animated-progress/Bar.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
 import { Flex } from 'rebass';
 
-const Bar: React.FC<{
+interface Props {
   animationDuration: number;
   progress: number;
   variant: string;
-}> = ({ animationDuration, progress, variant }) => (
+}
+const Bar = ({ animationDuration, progress, variant }: Props) => (
   <Flex
     variant={variant}
     sx={{
diff --git a/src/components/animated-progress/Container.tsx b/src/components/animated-progress/Container.tsx
index c0197be5f..515f414df 100644
--- a/src/components/animated-progress/Container.tsx
+++ b/src/components/animated-progress/Container.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Flex } from 'rebass';
 
 const Container = ({ children }: React.PropsWithChildren) => (
diff --git a/src/components/animated-progress/stories.tsx b/src/components/animated-progress/stories.tsx
index 1d466a1fb..0b2b7141e 100644
--- a/src/components/animated-progress/stories.tsx
+++ b/src/components/animated-progress/stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box } from '../box';
 import { Button } from '../button';
 import { Flex } from '../flex';
diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
index 17ba8e375..e2e72afe4 100644
--- a/src/components/badge/Badge.tsx
+++ b/src/components/badge/Badge.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Flex, FlexProps, SxStyleProp } from 'rebass';
 import { useTheme } from '../../theme/theme';
 import { getIcon, IconName } from '../icon/list';
diff --git a/src/components/badge/stories.tsx b/src/components/badge/stories.tsx
index 65be0bc4e..e7c5c6278 100644
--- a/src/components/badge/stories.tsx
+++ b/src/components/badge/stories.tsx
@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 import { Badge } from './Badge';
 import { IconName } from '../icon/list';
 
diff --git a/src/components/bar/Bar.tsx b/src/components/bar/Bar.tsx
index 6785beefc..e191552e0 100644
--- a/src/components/bar/Bar.tsx
+++ b/src/components/bar/Bar.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import * as R from 'ramda';
 
 import { Box, BoxProps } from '../box';
diff --git a/src/components/bar/stories.tsx b/src/components/bar/stories.tsx
index 65bea4e76..fbcf562f9 100644
--- a/src/components/bar/stories.tsx
+++ b/src/components/bar/stories.tsx
@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 import { Flex } from '../flex';
 import { Bar } from './Bar';
 
diff --git a/src/components/box/Box.tsx b/src/components/box/Box.tsx
index 5068f8100..39e723e4d 100644
--- a/src/components/box/Box.tsx
+++ b/src/components/box/Box.tsx
@@ -1,10 +1,12 @@
-import React, { FC, forwardRef } from 'react';
+import { PropsWithChildren, forwardRef } from 'react';
 import { Box as RebassBox, BoxProps } from 'rebass';
 
 export interface Props extends Omit<BoxProps, 'css'> {}
 
-export const Box: FC<Props> = forwardRef(({ children, ...rest }, ref) => (
-  <RebassBox ref={ref} {...rest}>
-    {children}
-  </RebassBox>
-));
+export const Box = forwardRef(
+  ({ children, ...rest }: PropsWithChildren<Props>, ref) => (
+    <RebassBox ref={ref} {...rest}>
+      {children}
+    </RebassBox>
+  ),
+);
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index bcbe701b5..d5a5d9591 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -1,5 +1,4 @@
 import * as R from 'ramda';
-import React from 'react';
 import { Button as RebassButton, ButtonProps } from 'rebass';
 
 // Styles
diff --git a/src/components/button/stories.tsx b/src/components/button/stories.tsx
index c9ca1e84d..2610eb0e8 100644
--- a/src/components/button/stories.tsx
+++ b/src/components/button/stories.tsx
@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import { Button } from './Button';
diff --git a/src/components/callout/index.tsx b/src/components/callout/index.tsx
index 256cb00d7..472b10c4e 100644
--- a/src/components/callout/index.tsx
+++ b/src/components/callout/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Box, Flex, FlexProps, Text } from 'rebass';
 import styles from './callout.styles';
 import { Color } from '../../theme/types';
@@ -23,12 +22,7 @@ export interface ICalloutProps extends Omit<FlexProps, 'content' | 'css'> {
   cta?: React.ReactNode;
 }
 
-const Callout: FC<ICalloutProps> = ({
-  type,
-  content,
-  cta,
-  ...props
-}: ICalloutProps) => (
+const Callout = ({ type, content, cta, ...props }: ICalloutProps) => (
   <Flex
     width="100%"
     variant={`callout.${type}`}
diff --git a/src/components/callout/stories.tsx b/src/components/callout/stories.tsx
index 891a622b7..055a4b1f8 100644
--- a/src/components/callout/stories.tsx
+++ b/src/components/callout/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Box } from 'rebass';
diff --git a/src/components/calloutWithButton/index.tsx b/src/components/calloutWithButton/index.tsx
index 773a7a055..e6052e7d5 100644
--- a/src/components/calloutWithButton/index.tsx
+++ b/src/components/calloutWithButton/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { FlexProps } from 'rebass';
 import Callout, { CalloutTypes } from '../callout';
 import { Button } from '../button';
@@ -14,7 +13,7 @@ export interface ICalloutWithButtonProps
   isButtonLoading?: boolean;
 }
 
-const CalloutWithButton: FC<ICalloutWithButtonProps> = ({
+const CalloutWithButton = ({
   buttonContent,
   content,
   onClick,
diff --git a/src/components/card-header/index.tsx b/src/components/card-header/index.tsx
index 0157f8974..f4d2789f8 100644
--- a/src/components/card-header/index.tsx
+++ b/src/components/card-header/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Box, BoxProps, Flex } from 'rebass';
 import styles from './card-header.styles';
 
@@ -8,13 +7,13 @@ export interface CardHeaderProps extends Omit<BoxProps, 'title' | 'css'> {
   withShadow?: boolean;
   withBorderBottom?: boolean;
 }
-const CardHeader: FC<CardHeaderProps> = ({
+const CardHeader = ({
   title,
   actions,
   withShadow = false,
   withBorderBottom = false,
   ...props
-}) => (
+}: CardHeaderProps) => (
   <Box {...props} sx={{ ...styles(withShadow, withBorderBottom), ...props.sx }}>
     {title && (
       <Flex alignItems="center" as="h4">
diff --git a/src/components/card-header/stories.tsx b/src/components/card-header/stories.tsx
index d8568ca6e..c5f7daa5d 100644
--- a/src/components/card-header/stories.tsx
+++ b/src/components/card-header/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { action } from '@storybook/addon-actions';
 
 import { Box, Button } from 'rebass';
diff --git a/src/components/card/card-secondary.tsx b/src/components/card/card-secondary.tsx
index 2dfb7f639..527b2f6d5 100644
--- a/src/components/card/card-secondary.tsx
+++ b/src/components/card/card-secondary.tsx
@@ -1,4 +1,4 @@
-import React, { FC, memo, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import {
   Box,
   Flex,
@@ -18,7 +18,7 @@ export interface CardSecondaryProps
   readonly?: boolean;
 }
 
-const CardSecondary: FC<CardSecondaryProps> = ({
+const CardSecondary = ({
   title,
   children,
   maxHeight,
diff --git a/src/components/card/index.tsx b/src/components/card/index.tsx
index 8bf79e669..1571ece81 100644
--- a/src/components/card/index.tsx
+++ b/src/components/card/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, memo, useRef } from 'react';
+import { memo, useRef } from 'react';
 import { Box, Card as RebassCard, CardProps as RebassCardProps } from 'rebass';
 
 // Styles
@@ -20,7 +20,7 @@ export interface CardProps extends Omit<RebassCardProps, 'css' | 'title'> {
   expandable?: boolean;
 }
 
-const Card: FC<CardProps> = ({
+const Card = ({
   title,
   actions,
   children,
diff --git a/src/components/card/stories.tsx b/src/components/card/stories.tsx
index 47ff1c115..e9984ecef 100644
--- a/src/components/card/stories.tsx
+++ b/src/components/card/stories.tsx
@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
 import Card from '.';
diff --git a/src/components/checkbox/checkbox-group.tsx b/src/components/checkbox/checkbox-group.tsx
index 99b903e75..f3cdccb72 100644
--- a/src/components/checkbox/checkbox-group.tsx
+++ b/src/components/checkbox/checkbox-group.tsx
@@ -1,6 +1,5 @@
-import React, { FC, useCallback } from 'react';
+import { useCallback } from 'react';
 
-// Components
 import Label, { LabelProps } from '../label';
 import Checkbox from './index';
 import { TooltipProps } from '../tooltip';
@@ -15,7 +14,7 @@ export interface CheckboxGroupProps
   tooltipProps?: Omit<TooltipProps, 'children'>;
 }
 
-const CheckboxGroup: FC<CheckboxGroupProps> = ({
+const CheckboxGroup = ({
   label,
   options,
   value,
diff --git a/src/components/checkbox/group.stories.tsx b/src/components/checkbox/group.stories.tsx
index 5c5b26bda..a5832f967 100644
--- a/src/components/checkbox/group.stories.tsx
+++ b/src/components/checkbox/group.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import CheckboxGroup from './checkbox-group';
 
diff --git a/src/components/checkbox/index.tsx b/src/components/checkbox/index.tsx
index 718cf4e4a..972ad5c2b 100644
--- a/src/components/checkbox/index.tsx
+++ b/src/components/checkbox/index.tsx
@@ -1,10 +1,8 @@
 import { CheckboxProps as RebassCheckboxProps } from '@rebass/forms';
-import React, { FC, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Box, Flex } from 'rebass';
 
-// Components
 import Labeling from '../typography/labeling';
-// Styles
 import styles from './checkbox-styles';
 import Tooltip, { TooltipProps } from '../tooltip';
 
@@ -14,7 +12,7 @@ export interface CheckboxProps extends Omit<RebassCheckboxProps, 'css'> {
   tooltipProps?: Omit<TooltipProps, 'children'>;
 }
 
-const Checkbox: FC<CheckboxProps> = forwardRef(
+const Checkbox = forwardRef(
   (
     {
       label,
diff --git a/src/components/checkbox/stories.tsx b/src/components/checkbox/stories.tsx
index aaed8fbce..baf95cb6a 100644
--- a/src/components/checkbox/stories.tsx
+++ b/src/components/checkbox/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import Checkbox from './index';
 
diff --git a/src/components/code-input/index.tsx b/src/components/code-input/index.tsx
index d6b884b92..39ff7d385 100644
--- a/src/components/code-input/index.tsx
+++ b/src/components/code-input/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Box, Flex } from 'rebass';
 
 import { loadLanguage } from '@uiw/codemirror-extensions-langs';
@@ -31,7 +31,7 @@ export interface CodeInputProps
   intent?: Intents;
 }
 
-const CodeInput: FC<CodeInputProps> = forwardRef(
+const CodeInput = forwardRef(
   ({
     label = '',
     value,
diff --git a/src/components/code-input/stories.tsx b/src/components/code-input/stories.tsx
index 2867158ae..6c83e20f6 100644
--- a/src/components/code-input/stories.tsx
+++ b/src/components/code-input/stories.tsx
@@ -1,6 +1,5 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 
 import CodeInput from '.';
 
diff --git a/src/components/code/code.styles.ts b/src/components/code/code.styles.ts
index 3ca55f404..bbe0a518e 100644
--- a/src/components/code/code.styles.ts
+++ b/src/components/code/code.styles.ts
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const boxStyles: React.CSSProperties = {
   width: '100%',
   lineHeight: '16px',
diff --git a/src/components/code/index.tsx b/src/components/code/index.tsx
index f53de2c4f..4db0dcb6b 100644
--- a/src/components/code/index.tsx
+++ b/src/components/code/index.tsx
@@ -1,5 +1,5 @@
 import { EditorView } from '@codemirror/view';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box, Flex, FlexProps } from 'rebass';
 
 import { LanguageName, loadLanguage } from '@uiw/codemirror-extensions-langs';
diff --git a/src/components/code/stories.tsx b/src/components/code/stories.tsx
index 30ccabc2a..7040c8b7d 100644
--- a/src/components/code/stories.tsx
+++ b/src/components/code/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { Box } from 'rebass';
 import Code, { defaultPopupProps } from './index';
diff --git a/src/components/collapse/index.tsx b/src/components/collapse/index.tsx
index 632a8c86f..edf65a76b 100644
--- a/src/components/collapse/index.tsx
+++ b/src/components/collapse/index.tsx
@@ -1,5 +1,5 @@
+import { memo, useEffect, useRef, useState } from 'react';
 import { Box, BoxProps, Flex } from 'rebass';
-import React, { FC, memo, useEffect, useRef, useState } from 'react';
 
 import Labeling from '../typography/labeling';
 import styles, { contentStyles, containerStyles } from './collapse.styles';
@@ -13,7 +13,7 @@ export interface CollapseProps extends Omit<BoxProps, 'css' | 'title'> {
   openChange?: (value: boolean) => void;
 }
 
-const Collapse: FC<CollapseProps> = ({
+const Collapse = ({
   title,
   contentProps,
   secondaryContent,
@@ -21,7 +21,7 @@ const Collapse: FC<CollapseProps> = ({
   isOpenProps = false,
   openChange,
   ...props
-}) => {
+}: CollapseProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
 
diff --git a/src/components/collapse/stories.tsx b/src/components/collapse/stories.tsx
index bd23fa859..a917e211a 100644
--- a/src/components/collapse/stories.tsx
+++ b/src/components/collapse/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from 'rebass';
 import { StoryObj, Meta } from '@storybook/react';
 
diff --git a/src/components/compact-button/compact-button.tsx b/src/components/compact-button/compact-button.tsx
index a0131da1f..1f9c6ee60 100644
--- a/src/components/compact-button/compact-button.tsx
+++ b/src/components/compact-button/compact-button.tsx
@@ -1,4 +1,4 @@
-import React, { FC, memo, CSSProperties } from 'react';
+import { memo, CSSProperties } from 'react';
 import { Button, ButtonProps, Flex, Box } from 'rebass';
 import { GetIcon, IconName } from '../icon';
 
@@ -30,7 +30,7 @@ const getLinkProps = ({ href, newTab }: LinkRelatedProps): Partial<Props> =>
       }
     : {};
 
-const CompactButton: FC<Props> = ({
+const CompactButton = ({
   icon,
   href,
   children,
@@ -40,7 +40,7 @@ const CompactButton: FC<Props> = ({
   newTab = false,
   mode = 'default',
   ...props
-}) => (
+}: Props) => (
   <Button
     {...props}
     {...getLinkProps({ newTab, href })}
diff --git a/src/components/compact-button/stories.tsx b/src/components/compact-button/stories.tsx
index 81ed983fe..cb25549c8 100644
--- a/src/components/compact-button/stories.tsx
+++ b/src/components/compact-button/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import CompactButton from '.';
diff --git a/src/components/datepicker/index.tsx b/src/components/datepicker/index.tsx
index c923c3b3c..3ee852fd6 100644
--- a/src/components/datepicker/index.tsx
+++ b/src/components/datepicker/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, forwardRef, memo, useState } from 'react';
+import { forwardRef, memo, useState } from 'react';
 import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker';
 import { Flex, SxStyleProp } from 'rebass';
 
@@ -19,12 +19,12 @@ export interface DatePickerProps extends ReactDatePickerProps {
 const getPlacement = (align: DatePickerProps['datePickerAlign']) =>
   align === 'right' ? 'bottom-end' : 'bottom-start';
 
-const DatePicker: FC<DatePickerProps> = ({
+const DatePicker = ({
   selectProps,
   datePickerAlign = 'right',
   sx,
   ...props
-}) => {
+}: DatePickerProps) => {
   const [isOpen, setOpen] = useState(false);
   return (
     <Flex flexDirection="column" sx={{ ...styles, ...sx }}>
diff --git a/src/components/datepicker/stories.tsx b/src/components/datepicker/stories.tsx
index 0d3a7c7b5..b928b9b89 100644
--- a/src/components/datepicker/stories.tsx
+++ b/src/components/datepicker/stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { addDays, subDays } from 'date-fns/fp';
 
diff --git a/src/components/divider/index.tsx b/src/components/divider/index.tsx
index d6d3fbab5..b2d2b9c6d 100644
--- a/src/components/divider/index.tsx
+++ b/src/components/divider/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Box, BoxProps } from 'rebass';
 import Microlabeling from '../typography/microlabeling';
 
@@ -13,7 +12,7 @@ export interface DividerProps extends Omit<BoxProps, 'css'> {
   legend?: string;
 }
 
-const Divider: FC<DividerProps> = ({
+const Divider = ({
   mt = '20px',
   mb = '20px',
   mr = '0',
@@ -21,7 +20,7 @@ const Divider: FC<DividerProps> = ({
   width,
   legend,
   ...props
-}) => (
+}: DividerProps) => (
   <Box
     mt={mt}
     mb={mb}
diff --git a/src/components/divider/stories.tsx b/src/components/divider/stories.tsx
index b96d68d04..6bb56c4f4 100644
--- a/src/components/divider/stories.tsx
+++ b/src/components/divider/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import Divider from './index';
 
diff --git a/src/components/dot/Dot.tsx b/src/components/dot/Dot.tsx
index d03ddec1a..50668323d 100644
--- a/src/components/dot/Dot.tsx
+++ b/src/components/dot/Dot.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Flex, FlexProps } from 'rebass';
 import Tooltip from '../tooltip';
 import TooltipPositions from '../tooltip/positions';
diff --git a/src/components/dot/stories.tsx b/src/components/dot/stories.tsx
index f8d02ac22..bc0f3521f 100644
--- a/src/components/dot/stories.tsx
+++ b/src/components/dot/stories.tsx
@@ -1,5 +1,4 @@
 import { StoryObj } from '@storybook/react';
-import React from 'react';
 import { Dot } from './Dot';
 
 export default {
diff --git a/src/components/dropdown-button/DropdownButton.tsx b/src/components/dropdown-button/DropdownButton.tsx
index eb3d8ada3..e62c0bbdc 100644
--- a/src/components/dropdown-button/DropdownButton.tsx
+++ b/src/components/dropdown-button/DropdownButton.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { Flex, FlexProps } from 'rebass';
 import * as R from 'ramda';
 
@@ -36,7 +36,7 @@ export interface Props extends Omit<FlexProps, 'css'> {
   }) => React.ReactNode;
 }
 
-export const DropdownButton: React.FC<Props> = ({
+export const DropdownButton = ({
   alignLeft = false,
   containerOpenSx = {},
   dropdownSx = {},
@@ -44,7 +44,7 @@ export const DropdownButton: React.FC<Props> = ({
   renderButton,
   sx = {},
   ...restProps
-}) => {
+}: Props) => {
   const [isOpen, handleToggle, handleClickOutside] = useDropdown();
   const containerRef = useRef<HTMLElement>();
   const dropdownItems = useMemo(
diff --git a/src/components/dropdown-button/stories.tsx b/src/components/dropdown-button/stories.tsx
index 3dc2acb3f..2f448e009 100644
--- a/src/components/dropdown-button/stories.tsx
+++ b/src/components/dropdown-button/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { Box } from 'rebass';
 import { action } from '@storybook/addon-actions';
diff --git a/src/components/dropdown-wrapper/DropdownWrapper.tsx b/src/components/dropdown-wrapper/DropdownWrapper.tsx
index 65d9afc6e..f0d996457 100644
--- a/src/components/dropdown-wrapper/DropdownWrapper.tsx
+++ b/src/components/dropdown-wrapper/DropdownWrapper.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import useOnClickOutside from '../../utils/useClickOutside';
 import StickyPortal, { CONTENT_ID } from '../sticky-portal/StickyPortal';
 
@@ -8,12 +7,12 @@ interface DropdownWrapperProps {
   appendToBody: any;
   onClickOutside: any;
 }
-const DropdownWrapper: FC<DropdownWrapperProps> = ({
+const DropdownWrapper = ({
   children,
   containerRef,
   appendToBody,
   onClickOutside,
-}) => {
+}: DropdownWrapperProps) => {
   useOnClickOutside<HTMLDivElement>(
     onClickOutside,
     [containerRef],
diff --git a/src/components/dropdown/index.tsx b/src/components/dropdown/index.tsx
index 831778626..e455dfca1 100644
--- a/src/components/dropdown/index.tsx
+++ b/src/components/dropdown/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useRef } from 'react';
+import { useRef } from 'react';
 import { Flex } from 'rebass';
 
 // Components
@@ -19,7 +19,7 @@ export interface DropdownProps extends Omit<ListProps, 'css' | 'children'> {
   onClickOutside?: () => void;
 }
 
-const Dropdown: FC<DropdownProps> = ({
+const Dropdown = ({
   items,
   isOpen = true,
   onClickOutside = () => {},
diff --git a/src/components/dropdown/stories.tsx b/src/components/dropdown/stories.tsx
index 2dd1b8535..a6437eeb3 100644
--- a/src/components/dropdown/stories.tsx
+++ b/src/components/dropdown/stories.tsx
@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import React from 'react';
 import { Box } from 'rebass';
 import { StoryObj, Meta } from '@storybook/react';
 
diff --git a/src/components/editableSelect/Chip.tsx b/src/components/editableSelect/Chip.tsx
index fe3f2ee2d..5e0c0fc52 100644
--- a/src/components/editableSelect/Chip.tsx
+++ b/src/components/editableSelect/Chip.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Box, Flex, FlexProps } from 'rebass';
 import { GetIcon, IconName } from '../icon';
 
@@ -15,7 +15,7 @@ export interface ChipProps extends Omit<FlexProps, 'css'> {
   onDelete: (value: string) => void;
 }
 
-const Chip: FC<ChipProps> = ({
+const Chip = ({
   value,
   onDelete,
   disabled,
@@ -23,7 +23,7 @@ const Chip: FC<ChipProps> = ({
   deletable = true,
   variant = 'primary',
   ...props
-}) => {
+}: ChipProps) => {
   const [hover, setHover] = useState(false);
 
   const handleHover = useCallback(
diff --git a/src/components/editableSelect/EditableSelectContainer.tsx b/src/components/editableSelect/EditableSelectContainer.tsx
index 3a4366334..95af5dcae 100644
--- a/src/components/editableSelect/EditableSelectContainer.tsx
+++ b/src/components/editableSelect/EditableSelectContainer.tsx
@@ -1,12 +1,4 @@
-import React, {
-  FC,
-  forwardRef,
-  useCallback,
-  Dispatch,
-  useRef,
-  useEffect,
-  KeyboardEvent,
-} from 'react';
+import { forwardRef, useCallback, useRef, useEffect } from 'react';
 import { Box, BoxProps, Flex } from 'rebass';
 import { Input } from '@rebass/forms';
 
@@ -32,11 +24,11 @@ export interface EditableSelectContainerProps
   type: EditableSelectTypes;
   variant: ChipsVariants;
   children: React.ReactNode;
-  setSearch: Dispatch<React.SetStateAction<string>>;
+  setSearch: React.Dispatch<React.SetStateAction<string>>;
   onChange: (value: string[]) => void;
 }
 
-const EditableSelectContainer: FC<EditableSelectContainerProps> = forwardRef(
+const EditableSelectContainer = forwardRef(
   (
     {
       type,
@@ -129,7 +121,7 @@ const EditableSelectContainer: FC<EditableSelectContainerProps> = forwardRef(
                 counterRef.current = 1;
                 setSearch(target.value);
               }}
-              onKeyUp={(e: KeyboardEvent<HTMLInputElement>) => {
+              onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {
                 if (e.key === 'Backspace') {
                   handleDelete();
                 }
diff --git a/src/components/editableSelect/EditableSelectDropdown.tsx b/src/components/editableSelect/EditableSelectDropdown.tsx
index 51034b751..e4ff6197d 100644
--- a/src/components/editableSelect/EditableSelectDropdown.tsx
+++ b/src/components/editableSelect/EditableSelectDropdown.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { Box } from 'rebass';
 import ListItem from '../list/item';
@@ -23,7 +23,7 @@ export interface EditableSelectDropdownProps {
   onClose: () => void;
 }
 
-const EditableSelectDropdown: FC<EditableSelectDropdownProps> = ({
+const EditableSelectDropdown = ({
   type,
   value,
   width,
@@ -35,7 +35,7 @@ const EditableSelectDropdown: FC<EditableSelectDropdownProps> = ({
   onChange,
   maxHeight,
   appendToBody,
-}) => {
+}: EditableSelectDropdownProps) => {
   const handleClick = useCallback(
     (option: string) => () => {
       if (option) onChange([option]);
diff --git a/src/components/editableSelect/EditableSelectInfo.tsx b/src/components/editableSelect/EditableSelectInfo.tsx
index bb2ce4a29..2403f5362 100644
--- a/src/components/editableSelect/EditableSelectInfo.tsx
+++ b/src/components/editableSelect/EditableSelectInfo.tsx
@@ -1,9 +1,6 @@
-import React, { FC } from 'react';
 import { Text, TextProps } from 'rebass';
 
-// Types
 import { Intents } from '../intents';
-// Styles
 import styles from './editableSelectInfo.styles';
 
 export interface EditableSelectInfoProps extends Omit<TextProps, 'css'> {
@@ -11,7 +8,7 @@ export interface EditableSelectInfoProps extends Omit<TextProps, 'css'> {
   children: React.ReactNode;
 }
 
-const EditableSelectInfo: FC<EditableSelectInfoProps> = ({
+const EditableSelectInfo = ({
   intent = 'error',
   children,
   ...props
diff --git a/src/components/editableSelect/index.tsx b/src/components/editableSelect/index.tsx
index 5b2205d8c..d62358c20 100644
--- a/src/components/editableSelect/index.tsx
+++ b/src/components/editableSelect/index.tsx
@@ -1,11 +1,4 @@
-import React, {
-  FC,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import useDropdown from '../../utils/useDropdown';
 import { Intents } from '../intents';
 import Label, { LabelProps } from '../label';
@@ -37,7 +30,7 @@ export interface EditableSelectProps
   onChange: (value: string[]) => void;
 }
 
-const EditableSelect: FC<EditableSelectProps> = ({
+const EditableSelect = ({
   info,
   label = '',
   value,
@@ -57,7 +50,7 @@ const EditableSelect: FC<EditableSelectProps> = ({
   maxListHeight = '150px',
   noDataMessage = 'no options',
   ...props
-}) => {
+}: EditableSelectProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [search, setSearch] = useState(isMulti ? '' : value[0] || '');
 
diff --git a/src/components/editableSelect/stories.tsx b/src/components/editableSelect/stories.tsx
index 4a5ee0031..bdb03e588 100644
--- a/src/components/editableSelect/stories.tsx
+++ b/src/components/editableSelect/stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Box } from 'rebass';
diff --git a/src/components/embedded-tabs/EmbeddedTabs.tsx b/src/components/embedded-tabs/EmbeddedTabs.tsx
index d86fccb46..3695196b9 100644
--- a/src/components/embedded-tabs/EmbeddedTabs.tsx
+++ b/src/components/embedded-tabs/EmbeddedTabs.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box, BoxProps } from 'rebass';
 import * as S from './styles';
 import Tab, { Props as EmbeddedTabItem } from './Tab';
diff --git a/src/components/embedded-tabs/Tab.tsx b/src/components/embedded-tabs/Tab.tsx
index c0d1178c7..0240ea357 100644
--- a/src/components/embedded-tabs/Tab.tsx
+++ b/src/components/embedded-tabs/Tab.tsx
@@ -1,5 +1,4 @@
 import * as R from 'ramda';
-import React, { FC } from 'react';
 import { Box, SxStyleProp } from 'rebass';
 import Label from '../label';
 import * as S from './styles';
@@ -18,7 +17,7 @@ const getStyles = ({ active, disabled }: Pick<Props, 'active' | 'disabled'>) =>
     ...(disabled ? S.disabledTab : {}),
   } as SxStyleProp);
 
-const Tab: FC<Props> = ({ title, ...props }) => {
+const Tab = ({ title, ...props }: Props) => {
   const propagatedProps = R.pick(['disabled', 'onClick'], props);
 
   return (
diff --git a/src/components/embedded-tabs/stories.tsx b/src/components/embedded-tabs/stories.tsx
index d7f1ff0ca..baa1f8aea 100644
--- a/src/components/embedded-tabs/stories.tsx
+++ b/src/components/embedded-tabs/stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box, Flex } from 'rebass';
 import Labeling from '../typography/labeling';
 import EmbeddedTabs from '.';
diff --git a/src/components/expand-viewer/index.tsx b/src/components/expand-viewer/index.tsx
index 8ffdfdb14..4af8b080d 100644
--- a/src/components/expand-viewer/index.tsx
+++ b/src/components/expand-viewer/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import { useState } from 'react';
 import { Box, Button as RebassButton, Flex } from 'rebass';
 import { useTheme } from '../../theme/theme';
 import Popup, { PopupProps } from '../popup';
@@ -8,17 +8,17 @@ import expandViewButtonStyle from './expand-viewer.styles';
 
 export interface ExpandViewerProps {
   title?: string;
-  NormalComponent: FC;
-  BriefComponent: FC;
+  NormalComponent: React.FC;
+  BriefComponent: React.FC;
   popupProps?: Omit<PopupProps, 'children' | 'isOpen' | 'onClose'>;
 }
 
-const ExpandViewer: FC<ExpandViewerProps> = ({
+const ExpandViewer = ({
   title,
   NormalComponent,
   BriefComponent,
   popupProps,
-}) => {
+}: ExpandViewerProps) => {
   const [expanded, setExpanded] = useState(false);
 
   // if it's not expanded yet then render the Brief with a button to expand
@@ -63,7 +63,7 @@ export default ExpandViewer;
 interface ExpandButtonProps {
   onClick: () => void;
 }
-const ExpandButton: FC<ExpandButtonProps> = ({ onClick }) => {
+const ExpandButton = ({ onClick }: ExpandButtonProps) => {
   const theme = useTheme();
   return (
     <RebassButton variant="ghost" sx={expandViewButtonStyle} onClick={onClick}>
diff --git a/src/components/expand-viewer/stories.tsx b/src/components/expand-viewer/stories.tsx
index bb00eb51c..3fb36ba8f 100644
--- a/src/components/expand-viewer/stories.tsx
+++ b/src/components/expand-viewer/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { Box } from 'rebass';
 import ExpandViewer from './index';
diff --git a/src/components/file-button/index.tsx b/src/components/file-button/index.tsx
index 2b934fce1..484b9e401 100644
--- a/src/components/file-button/index.tsx
+++ b/src/components/file-button/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box, Button as RebassButton, ButtonProps, Flex } from 'rebass';
 import { GetIcon, IconName } from '../icon';
 // Styles
diff --git a/src/components/file-button/project-file-button.tsx b/src/components/file-button/project-file-button.tsx
index 4dddd75e7..f27104827 100644
--- a/src/components/file-button/project-file-button.tsx
+++ b/src/components/file-button/project-file-button.tsx
@@ -1,8 +1,5 @@
-import React, { FC } from 'react';
 import { Box, Button as RebassButton, ButtonProps } from 'rebass';
 import { GetIcon, IconName } from '../icon';
-
-// Styles
 import { fileButton } from './file-button.styles';
 
 export interface QuartzFileButtonProps extends Omit<ButtonProps, 'css'> {
@@ -11,7 +8,7 @@ export interface QuartzFileButtonProps extends Omit<ButtonProps, 'css'> {
   href?: string;
 }
 
-const FileButton: FC<QuartzFileButtonProps> = ({
+const FileButton = ({
   intent = 'secondary',
   children,
   href,
diff --git a/src/components/file-button/stories.tsx b/src/components/file-button/stories.tsx
index c2933cfd2..5d3be1367 100644
--- a/src/components/file-button/stories.tsx
+++ b/src/components/file-button/stories.tsx
@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import FileButton from './index';
diff --git a/src/components/file-loader/index.tsx b/src/components/file-loader/index.tsx
index 8ce64cc1c..478e4c8e0 100644
--- a/src/components/file-loader/index.tsx
+++ b/src/components/file-loader/index.tsx
@@ -1,7 +1,5 @@
-import React, { FC } from 'react';
 import { Box, BoxProps, Flex, Text } from 'rebass';
 
-// Styles
 import styles, {
   fileNameBox,
   statusAndLocationBox,
@@ -21,7 +19,7 @@ export interface QuartzFileLoaderProps extends Omit<BoxProps, 'css'> {
   removeHandler: (id: any) => void;
 }
 
-const FileLoader: FC<QuartzFileLoaderProps> = ({
+const FileLoader = ({
   id,
   fileName,
   isLoading,
diff --git a/src/components/file-loader/stories.tsx b/src/components/file-loader/stories.tsx
index fb30dc785..ac26f21cd 100644
--- a/src/components/file-loader/stories.tsx
+++ b/src/components/file-loader/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import FileLoader from '.';
diff --git a/src/components/file-system-explorer/empty-folder-info/index.tsx b/src/components/file-system-explorer/empty-folder-info/index.tsx
index b3c8dbbf3..97cfd2e29 100644
--- a/src/components/file-system-explorer/empty-folder-info/index.tsx
+++ b/src/components/file-system-explorer/empty-folder-info/index.tsx
@@ -1,11 +1,8 @@
-import React, { FC } from 'react';
-import { Box, BoxProps } from 'rebass';
+import { Box } from 'rebass';
 import Value from '../../typography/value';
 import styles from './empty-folder-info.styles';
 
-export interface EmptyFolderInfoProps extends Omit<BoxProps, 'css'> {}
-
-const EmptyFolderInfo: FC<EmptyFolderInfoProps> = () => (
+const EmptyFolderInfo = () => (
   <Box sx={styles}>
     <Value as="h2" textAlign="center">
       Empty folder
diff --git a/src/components/file-system-explorer/file-explorer-column/index.tsx b/src/components/file-system-explorer/file-explorer-column/index.tsx
index f076f63b2..80f63e28a 100644
--- a/src/components/file-system-explorer/file-explorer-column/index.tsx
+++ b/src/components/file-system-explorer/file-explorer-column/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import { useState } from 'react';
 import { Box, BoxProps } from 'rebass';
 
 import FolderItemExplorer from '../folder';
@@ -20,7 +20,7 @@ export interface FileExplorerColumnProps
   setIsEmptyFolder: (value: boolean) => void;
 }
 
-const FileExplorerColumn: FC<FileExplorerColumnProps> = ({
+const FileExplorerColumn = ({
   items,
   mode,
   index,
diff --git a/src/components/file-system-explorer/file-item-explorer/FileItemExplorer.tsx b/src/components/file-system-explorer/file-item-explorer/FileItemExplorer.tsx
index 57655fd30..a27292512 100644
--- a/src/components/file-system-explorer/file-item-explorer/FileItemExplorer.tsx
+++ b/src/components/file-system-explorer/file-item-explorer/FileItemExplorer.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import { useState } from 'react';
 import { Box } from 'rebass';
 
 // Styles
@@ -21,7 +21,7 @@ export interface Props {
   setIsEmptyFolder: (value: boolean) => void;
 }
 
-const FileItemExplorer: FC<Props> = ({
+const FileItemExplorer = ({
   isActive,
   setActiveFolder,
   setActiveFile,
@@ -33,7 +33,7 @@ const FileItemExplorer: FC<Props> = ({
   isFileSelected,
   isValidExtension,
   setIsEmptyFolder,
-}) => {
+}: Props) => {
   const [active, setActive] = useState(isActive);
   const [selectedFile, setSelectedFile] = useState(selected);
 
diff --git a/src/components/file-system-explorer/file-item-explorer/stories.tsx b/src/components/file-system-explorer/file-item-explorer/stories.tsx
index af1d5236e..2dfafa6b3 100644
--- a/src/components/file-system-explorer/file-item-explorer/stories.tsx
+++ b/src/components/file-system-explorer/file-item-explorer/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Story, Meta } from '@storybook/react';
 
 import FileItemExplorer, {
diff --git a/src/components/file-system-explorer/folder/index.tsx b/src/components/file-system-explorer/folder/index.tsx
index fd52e03b0..abdcfccd1 100644
--- a/src/components/file-system-explorer/folder/index.tsx
+++ b/src/components/file-system-explorer/folder/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import { useState } from 'react';
 import { Box, Flex } from 'rebass';
 import { GetIcon, IconName } from '../../icon';
 import Tooltip from '../../tooltip';
@@ -23,7 +23,7 @@ export interface QuartzFileExplorerFolderProps {
   itemInfo: any;
 }
 
-const FolderExplorer: FC<QuartzFileExplorerFolderProps> = ({
+const FolderExplorer = ({
   setActiveFile,
   selectPathListValue,
   mode,
diff --git a/src/components/file-system-explorer/folder/stories.tsx b/src/components/file-system-explorer/folder/stories.tsx
index 30159242d..101366c90 100644
--- a/src/components/file-system-explorer/folder/stories.tsx
+++ b/src/components/file-system-explorer/folder/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import FileExplorerFolder from '.';
diff --git a/src/components/file-system-explorer/footer/index.tsx b/src/components/file-system-explorer/footer/index.tsx
index 982be35ef..09687c1cc 100644
--- a/src/components/file-system-explorer/footer/index.tsx
+++ b/src/components/file-system-explorer/footer/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Box, Flex } from 'rebass';
 import styles, { boxStyles, boxButtonStyles } from './footer.styles';
 import Labeling from '../../typography/labeling';
@@ -15,7 +14,7 @@ export interface Props {
   rootDir: string;
 }
 
-const FooterFileExplorer: FC<Props> = ({
+const FooterFileExplorer = ({
   value,
   activeFile,
   mode = FileExplorerMode.oneFile,
diff --git a/src/components/file-system-explorer/footer/stories.tsx b/src/components/file-system-explorer/footer/stories.tsx
index f1cba2838..4f386ae8c 100644
--- a/src/components/file-system-explorer/footer/stories.tsx
+++ b/src/components/file-system-explorer/footer/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import FooterFileExplorer from './index';
diff --git a/src/components/file-system-explorer/header/index.tsx b/src/components/file-system-explorer/header/index.tsx
index 0205cc5fb..20bb58eb7 100644
--- a/src/components/file-system-explorer/header/index.tsx
+++ b/src/components/file-system-explorer/header/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Box, BoxProps, Flex } from 'rebass';
 
 // Styles
@@ -10,7 +9,7 @@ export interface FileExplorerHeaderProps
   title?: string;
 }
 
-const FileExplorerHeader: FC<FileExplorerHeaderProps> = ({
+const FileExplorerHeader = ({
   title,
   shortcutActions,
 }: FileExplorerHeaderProps) => {
diff --git a/src/components/file-system-explorer/index.tsx b/src/components/file-system-explorer/index.tsx
index dbc0bac6f..0d778d762 100644
--- a/src/components/file-system-explorer/index.tsx
+++ b/src/components/file-system-explorer/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, memo, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import {
   Box,
   Card as RebassCard,
@@ -32,7 +32,7 @@ export interface FileSystemExplorerProps
   handleDownloadFile: (file: any) => void;
 }
 
-const FileSystemExplorer: FC<FileSystemExplorerProps> = ({
+const FileSystemExplorer = ({
   title = 'Select a file',
   onClose = () => console.log('Close'),
   shortcutActions,
diff --git a/src/components/file-system-explorer/info/index.tsx b/src/components/file-system-explorer/info/index.tsx
index 9e4a92dc5..d2f5221b0 100644
--- a/src/components/file-system-explorer/info/index.tsx
+++ b/src/components/file-system-explorer/info/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Box, BoxProps, Flex } from 'rebass';
 
 import { format } from 'date-fns';
@@ -22,16 +21,14 @@ export interface FileExplorerInfoProps extends Omit<BoxProps, 'css'> {
   handleDownloadFile: (file: any) => void;
 }
 
-const FileExplorerInfo: FC<FileExplorerInfoProps> = ({
+const FileExplorerInfo = ({
   children,
   activeFile,
   disableDownload,
   handleDownloadFile,
 }: FileExplorerInfoProps) => {
-  const dateFormat = (date: string) => {
-    // eslint-disable-next-line
-    return format(new Date(date), 'yyyy-MM-dd - HH:mm:ss');
-  };
+  const dateFormat = (date: string) =>
+    format(new Date(date), 'yyyy-MM-dd - HH:mm:ss');
 
   return (
     <Box
diff --git a/src/components/file-system-explorer/stories.tsx b/src/components/file-system-explorer/stories.tsx
index d851ac207..cbc61fb39 100644
--- a/src/components/file-system-explorer/stories.tsx
+++ b/src/components/file-system-explorer/stories.tsx
@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import FileSystemExplorer from '.';
diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index 2a45d9ab7..9d213b043 100644
--- a/src/components/flex/Flex.tsx
+++ b/src/components/flex/Flex.tsx
@@ -1,4 +1,4 @@
-import React, { FC, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Flex as RebassFlex, FlexProps } from 'rebass';
 
 export interface Props extends Omit<FlexProps, 'css'> {
@@ -6,10 +6,8 @@ export interface Props extends Omit<FlexProps, 'css'> {
   gap?: string;
 }
 
-export const Flex: FC<Props> = forwardRef(
-  ({ children, gap, sx, ...rest }, ref) => (
-    <RebassFlex ref={ref} sx={{ gap, ...sx }} {...rest}>
-      {children}
-    </RebassFlex>
-  ),
-);
+export const Flex = forwardRef(({ children, gap, sx, ...rest }: Props, ref) => (
+  <RebassFlex ref={ref} sx={{ gap, ...sx }} {...rest}>
+    {children}
+  </RebassFlex>
+));
diff --git a/src/components/flex/stories.tsx b/src/components/flex/stories.tsx
index 889ddbd4e..b3446a9b4 100644
--- a/src/components/flex/stories.tsx
+++ b/src/components/flex/stories.tsx
@@ -1,5 +1,4 @@
 import { StoryObj } from '@storybook/react';
-import React from 'react';
 import { Box } from '../box';
 import { Flex } from './index';
 
diff --git a/src/components/footer-button/index.tsx b/src/components/footer-button/index.tsx
index c03724779..e1e63748a 100644
--- a/src/components/footer-button/index.tsx
+++ b/src/components/footer-button/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Button as RebassButton, ButtonProps } from 'rebass';
 
 // Styles
@@ -9,7 +8,7 @@ export interface QuartzFooterButtonProps extends Omit<ButtonProps, 'css'> {
   intent?: 'primary';
 }
 
-const FooterButton: FC<QuartzFooterButtonProps> = ({
+const FooterButton = ({
   intent = 'primary',
   children,
   ...props
diff --git a/src/components/footer-button/stories.tsx b/src/components/footer-button/stories.tsx
index 84665d6b4..c8692f054 100644
--- a/src/components/footer-button/stories.tsx
+++ b/src/components/footer-button/stories.tsx
@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import FooterButton from '.';
diff --git a/src/components/form-summary-container/index.tsx b/src/components/form-summary-container/index.tsx
index 06e83ef1a..0ce2f2071 100644
--- a/src/components/form-summary-container/index.tsx
+++ b/src/components/form-summary-container/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Flex, FlexProps } from 'rebass';
 import styles, { mainBoxStyles } from './form-summary-container.styles';
 
@@ -7,7 +6,7 @@ export interface FormSummaryContainerProps extends Omit<FlexProps, 'css'> {
   children: any;
 }
 
-const FormSummaryContainer: FC<FormSummaryContainerProps> = ({
+const FormSummaryContainer = ({
   hasScrollOnScreen = true,
   children,
   ...props
diff --git a/src/components/form-summary-container/stories.tsx b/src/components/form-summary-container/stories.tsx
index 692af039d..fc8f79c47 100644
--- a/src/components/form-summary-container/stories.tsx
+++ b/src/components/form-summary-container/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { Box } from 'rebass';
 import FormSummaryContainer from './index';
diff --git a/src/components/form-tabs/index.tsx b/src/components/form-tabs/index.tsx
index 1e2ebccf8..dcc524ae9 100644
--- a/src/components/form-tabs/index.tsx
+++ b/src/components/form-tabs/index.tsx
@@ -1,11 +1,4 @@
-import React, {
-  FC,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Box, Flex } from 'rebass';
 import * as R from 'ramda';
 
@@ -38,13 +31,13 @@ export interface TabItem {
 
 export interface FormTabsProps {
   tabs: TabItem[];
-  SubmitButton: FC<any>;
+  SubmitButton: React.FC<any>;
   initialTab?: string;
   onTabChange: (tabId: string) => void;
   hasScrollOnScreen?: boolean;
 }
 
-const FormTabs: FC<FormTabsProps> = ({
+const FormTabs = ({
   tabs,
   SubmitButton,
   onTabChange,
diff --git a/src/components/form-tabs/stories.tsx b/src/components/form-tabs/stories.tsx
index d8ea03a01..16668e9df 100644
--- a/src/components/form-tabs/stories.tsx
+++ b/src/components/form-tabs/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { StoryObj, Meta } from '@storybook/react';
 import { Box } from 'rebass';
diff --git a/src/components/form-tabs/tab/Tab.tsx b/src/components/form-tabs/tab/Tab.tsx
index 3d9b492b4..5b75c3ed4 100644
--- a/src/components/form-tabs/tab/Tab.tsx
+++ b/src/components/form-tabs/tab/Tab.tsx
@@ -1,4 +1,4 @@
-import React, { FC, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { Flex } from 'rebass';
 import TabDescription from './TabDescription';
 import styles from './tab.styles';
@@ -12,12 +12,12 @@ export interface TabProps {
   onClick: () => any;
 }
 
-const Tab: FC<TabProps> = ({
+const Tab = ({
   title,
   active,
   state = TabState.default,
   onClick,
-}) => {
+}: TabProps) => {
   const titleColor = useMemo(
     () => (active ? 'labels.green' : 'black'),
     [active],
diff --git a/src/components/form-tabs/tab/TabDescription.tsx b/src/components/form-tabs/tab/TabDescription.tsx
index 86ed02eab..d44766ef9 100644
--- a/src/components/form-tabs/tab/TabDescription.tsx
+++ b/src/components/form-tabs/tab/TabDescription.tsx
@@ -1,4 +1,4 @@
-import React, { FC, memo } from 'react';
+import { memo } from 'react';
 import { Flex } from 'rebass';
 import Label from '../../label';
 import { TabState } from '../types';
@@ -8,7 +8,7 @@ export interface TabDescriptionProps {
   state: TabState;
 }
 
-const TabDescription: FC<TabDescriptionProps> = ({ state }) => {
+const TabDescription = ({ state }: TabDescriptionProps) => {
   switch (state) {
     case TabState.default:
       return null;
diff --git a/src/components/form-tabs/tab/stories.tsx b/src/components/form-tabs/tab/stories.tsx
index fef03a07a..9359f1569 100644
--- a/src/components/form-tabs/tab/stories.tsx
+++ b/src/components/form-tabs/tab/stories.tsx
@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { Flex } from 'rebass';
 import Tab from './Tab';
diff --git a/src/components/freshness-bar/Bar.tsx b/src/components/freshness-bar/Bar.tsx
index d0fb5fc53..4f4da7fb2 100644
--- a/src/components/freshness-bar/Bar.tsx
+++ b/src/components/freshness-bar/Bar.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box, BoxProps, SxStyleProp } from 'rebass';
 
 interface Props extends Omit<BoxProps, 'css'> {
diff --git a/src/components/freshness-bar/FreshnessBar.tsx b/src/components/freshness-bar/FreshnessBar.tsx
index 3652a1863..314e91114 100644
--- a/src/components/freshness-bar/FreshnessBar.tsx
+++ b/src/components/freshness-bar/FreshnessBar.tsx
@@ -1,5 +1,4 @@
 import { differenceInMilliseconds, format } from 'date-fns';
-import React from 'react';
 import * as R from 'ramda';
 
 import Tooltip from '../tooltip';
diff --git a/src/components/freshness-bar/stories.tsx b/src/components/freshness-bar/stories.tsx
index 7ef82f5d1..ed006a745 100644
--- a/src/components/freshness-bar/stories.tsx
+++ b/src/components/freshness-bar/stories.tsx
@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 
 import { addMonths } from 'date-fns';
 import { FreshnessBar } from './FreshnessBar';
diff --git a/src/components/graphs/split-graph/index.tsx b/src/components/graphs/split-graph/index.tsx
index 94d5b74d5..5c4c7b1c7 100644
--- a/src/components/graphs/split-graph/index.tsx
+++ b/src/components/graphs/split-graph/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Box, Flex } from 'rebass';
 import * as R from 'ramda';
 
@@ -53,7 +53,7 @@ export interface SplitGraphProps extends Omit<FlexProps, 'children'> {
   alignGraphAndLabel?: AlignGraphAndLabel;
 }
 
-const SplitGraph: FC<SplitGraphProps> = ({
+const SplitGraph = ({
   values,
   withoutPercentage = false,
   labelProps,
diff --git a/src/components/graphs/split-graph/stories.tsx b/src/components/graphs/split-graph/stories.tsx
index cca91c296..90dacdf97 100644
--- a/src/components/graphs/split-graph/stories.tsx
+++ b/src/components/graphs/split-graph/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { Box, Flex } from 'rebass';
 import SplitGraph, { defaultGraphColors } from './index';
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index 9c0baff56..b53c2307b 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Box, BoxProps } from 'rebass';
 
 // Styles
@@ -14,7 +13,7 @@ export interface HeaderProps extends Omit<BoxProps, 'css'> {
   logoAction?: () => void;
 }
 
-const Header: FC<HeaderProps> = ({
+const Header = ({
   children,
   user,
   actions,
diff --git a/src/components/header/menu-button.tsx b/src/components/header/menu-button.tsx
index 47f678980..e8282a117 100644
--- a/src/components/header/menu-button.tsx
+++ b/src/components/header/menu-button.tsx
@@ -1,6 +1,4 @@
-import React, { FC } from 'react';
-
-const MenuButton: FC = () => (
+const MenuButton = () => (
   <svg width="5" height="21" viewBox="0 0 5 21" fill="none">
     <rect width="5" height="4.84615" fill="#272727" />
     <rect y="8.0769" width="5" height="4.84616" fill="#272727" />
diff --git a/src/components/header/stories.tsx b/src/components/header/stories.tsx
index 00b432060..1273dd2d3 100644
--- a/src/components/header/stories.tsx
+++ b/src/components/header/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { Box } from 'rebass';
 
diff --git a/src/components/holy-table/cell/cell.tsx b/src/components/holy-table/cell/cell.tsx
index 707b2beb6..8160b82e9 100644
--- a/src/components/holy-table/cell/cell.tsx
+++ b/src/components/holy-table/cell/cell.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useContext } from 'react';
+import { ReactNode, useContext } from 'react';
 import { Box, BoxProps } from 'rebass';
 import HolyTableContext from '../holy-table.context';
 import styles from './styles';
@@ -7,7 +7,7 @@ interface Props extends Omit<BoxProps, 'css'> {
   children: ReactNode;
 }
 
-const Cell: FC<Props> = ({ sx, children, ...props }: Props) => {
+const Cell = ({ sx, children, ...props }: Props) => {
   const { padded } = useContext(HolyTableContext);
 
   const style = {
diff --git a/src/components/holy-table/head-cell/head-cell.tsx b/src/components/holy-table/head-cell/head-cell.tsx
index 945956948..f1e12b8bb 100644
--- a/src/components/holy-table/head-cell/head-cell.tsx
+++ b/src/components/holy-table/head-cell/head-cell.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { BoxProps } from 'rebass';
 import Labeling from '../../typography/labeling';
 import styles from './styles';
diff --git a/src/components/holy-table/holy-table.tsx b/src/components/holy-table/holy-table.tsx
index f0b616d16..3072bee4f 100644
--- a/src/components/holy-table/holy-table.tsx
+++ b/src/components/holy-table/holy-table.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { Box } from 'rebass';
 import HeadCell from './head-cell/head-cell';
 import HolyTableContext from './holy-table.context';
@@ -15,7 +15,7 @@ export interface Props {
   rowHeight?: string;
 }
 
-const HolyTable: FC<Props> = ({
+const HolyTable = ({
   legend,
   children,
   middleColumn,
@@ -25,7 +25,7 @@ const HolyTable: FC<Props> = ({
   standalone = false,
   rowHeight = '50px',
   ...props
-}) => {
+}: Props) => {
   const value = useMemo(
     () => ({
       bordered,
diff --git a/src/components/holy-table/row/row.tsx b/src/components/holy-table/row/row.tsx
index cd718e582..e96ce7b5f 100644
--- a/src/components/holy-table/row/row.tsx
+++ b/src/components/holy-table/row/row.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useContext } from 'react';
+import { ReactNode, useContext } from 'react';
 import { Box, BoxProps } from 'rebass';
 import HolyTableContext from '../holy-table.context';
 import styles from './styles';
@@ -7,7 +7,7 @@ interface Props extends Omit<BoxProps, 'css'> {
   children: ReactNode;
 }
 
-const Row: FC<Props> = ({ sx, children, ...props }: Props) => {
+const Row = ({ sx, children, ...props }: Props) => {
   const { bordered, hoverable, rowHeight, standalone } =
     useContext(HolyTableContext);
 
diff --git a/src/components/holy-table/stories.tsx b/src/components/holy-table/stories.tsx
index eb6c79cba..ec71424df 100644
--- a/src/components/holy-table/stories.tsx
+++ b/src/components/holy-table/stories.tsx
@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 import { Box } from 'rebass';
 import HT from '.';
 
diff --git a/src/components/icon-button/index.tsx b/src/components/icon-button/index.tsx
index 334ebe429..ffc50e6be 100644
--- a/src/components/icon-button/index.tsx
+++ b/src/components/icon-button/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { ButtonProps } from 'rebass';
 
@@ -21,7 +20,7 @@ export interface IconButtonProps extends Omit<ButtonProps, 'css'> {
   onClickIcon?: React.MouseEventHandler<HTMLAnchorElement>;
 }
 
-export const IconButton: FC<IconButtonProps> = ({
+export const IconButton = ({
   intent: _, // TODO remove this
   tooltip,
   icon,
diff --git a/src/components/icon-button/stories.tsx b/src/components/icon-button/stories.tsx
index 7ac49137d..77c1402d9 100644
--- a/src/components/icon-button/stories.tsx
+++ b/src/components/icon-button/stories.tsx
@@ -1,6 +1,5 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 
 import { IconButton } from '.';
 import { IconName } from '../icon/list';
diff --git a/src/components/icon/GetIcon.tsx b/src/components/icon/GetIcon.tsx
index bc7221327..78dc1b1b5 100644
--- a/src/components/icon/GetIcon.tsx
+++ b/src/components/icon/GetIcon.tsx
@@ -1,5 +1,4 @@
 import { path, prop, split } from 'ramda';
-import React, { FC } from 'react';
 import { BoxProps, Flex } from 'rebass';
 import { useTheme } from '../../theme/theme';
 import { Color, IconSizes } from '../../theme/types';
@@ -11,12 +10,12 @@ export interface GetIconProps extends Omit<BoxProps, 'css' | 'color'> {
   /** width of the svg, height will scale accordingly */
   size?: IconSizes;
 }
-const GetIcon: FC<GetIconProps> = ({
+const GetIcon = ({
   icon,
   color = 'black',
   size = 'lg',
   ...props
-}) => {
+}: GetIconProps) => {
   const theme = useTheme();
   const themeColor = path<string>(split('.', color), theme.colors)!;
   const iconSize = prop(size, theme.iconSizes);
diff --git a/src/components/icon/list.tsx b/src/components/icon/list.tsx
index c3eb32494..989514fec 100644
--- a/src/components/icon/list.tsx
+++ b/src/components/icon/list.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 import theme from '../../theme/theme';
 
 // Instructions to add a new icons
diff --git a/src/components/icon/stories.tsx b/src/components/icon/stories.tsx
index b4ae8b49b..cdd707ffa 100644
--- a/src/components/icon/stories.tsx
+++ b/src/components/icon/stories.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import { Box, Flex } from 'rebass';
diff --git a/src/components/input-info/index.tsx b/src/components/input-info/index.tsx
index 910f9d13d..9e1e8812b 100644
--- a/src/components/input-info/index.tsx
+++ b/src/components/input-info/index.tsx
@@ -1,17 +1,13 @@
-import React, { FC } from 'react';
 import { Text, TextProps } from 'rebass';
 
-// Types
 import { Intents } from '../intents';
-// Styles
 import styles from './input-info.styles';
 
 export interface InputInfoProps extends Omit<TextProps, 'css'> {
   intent?: Intents;
-  children: React.ReactNode;
 }
 
-const InputInfo: FC<InputInfoProps> = ({
+const InputInfo = ({
   intent = 'error',
   children,
   sx = {},
diff --git a/src/components/input-info/stories.tsx b/src/components/input-info/stories.tsx
index 9d59866b6..c6633324a 100644
--- a/src/components/input-info/stories.tsx
+++ b/src/components/input-info/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import InputInfo from '.';
diff --git a/src/components/input/index.tsx b/src/components/input/index.tsx
index 5a2f736b5..d5211edd0 100644
--- a/src/components/input/index.tsx
+++ b/src/components/input/index.tsx
@@ -1,13 +1,10 @@
 import { Box, Flex } from 'rebass';
-import React, { FC, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { InputProps as RebassInputProps } from 'rebass__forms';
 
-// Components
 import Label, { LabelProps } from '../label';
 import InputInfo from '../input-info';
-// Types
 import { Intents } from '../intents';
-// Styles
 import getStyles, { getIconStyle } from './input.styles';
 import Labeling from '../typography/labeling';
 import Tooltip from '../tooltip';
@@ -32,7 +29,7 @@ export interface InputProps extends Omit<RebassInputProps, 'css'> {
   tooltipInfo?: string;
 }
 
-const Input: FC<InputProps> = forwardRef(
+const Input = forwardRef(
   (
     {
       placeholder,
diff --git a/src/components/input/stories.tsx b/src/components/input/stories.tsx
index 9dbbae1d4..6a6a52c0c 100644
--- a/src/components/input/stories.tsx
+++ b/src/components/input/stories.tsx
@@ -1,6 +1,5 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 
 import { Box } from 'rebass';
 import Input from '.';
diff --git a/src/components/label/index.tsx b/src/components/label/index.tsx
index f76670cac..b5f33853c 100644
--- a/src/components/label/index.tsx
+++ b/src/components/label/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Flex, FlexProps } from 'rebass';
 
 import styles from './label.styles';
@@ -11,7 +10,7 @@ export interface LabelProps extends Omit<FlexProps, 'css' | 'action'> {
   children: React.ReactNode;
 }
 
-const Label: FC<LabelProps> = ({
+const Label = ({
   action,
   text,
   children,
diff --git a/src/components/label/stories.tsx b/src/components/label/stories.tsx
index c63f1e430..d69211fc5 100644
--- a/src/components/label/stories.tsx
+++ b/src/components/label/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import Label from '.';
diff --git a/src/components/list/container/index.tsx b/src/components/list/container/index.tsx
index 327f917ac..758dda4b6 100644
--- a/src/components/list/container/index.tsx
+++ b/src/components/list/container/index.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Box, BoxProps } from 'rebass';
 
 export interface ListProps extends Omit<BoxProps, 'css'> {
diff --git a/src/components/list/item/index.tsx b/src/components/list/item/index.tsx
index 27a0b3f57..f45a4424d 100644
--- a/src/components/list/item/index.tsx
+++ b/src/components/list/item/index.tsx
@@ -1,9 +1,7 @@
-import React, { FC, memo } from 'react';
+import { memo } from 'react';
 import { Box, BoxProps } from 'rebass';
 
-// Components
 import { Button } from '../../button';
-// Styles
 import styles, { withoutBorder } from './list-item.styles';
 
 export interface ListItemProps extends Omit<BoxProps, 'css' | 'action'> {
@@ -15,7 +13,7 @@ export interface ListItemProps extends Omit<BoxProps, 'css' | 'action'> {
   isActive?: boolean;
 }
 
-const ListItem: FC<ListItemProps> = ({
+const ListItem = ({
   children,
   variant = 'primary',
   hasDivider,
diff --git a/src/components/list/item/stories.tsx b/src/components/list/item/stories.tsx
index 03bc17136..eff118e5c 100644
--- a/src/components/list/item/stories.tsx
+++ b/src/components/list/item/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from 'rebass';
 import { StoryObj, Meta } from '@storybook/react';
 import { ListItem } from '../../..';
diff --git a/src/components/list/stories.tsx b/src/components/list/stories.tsx
index f11ea06fc..9f84b4176 100644
--- a/src/components/list/stories.tsx
+++ b/src/components/list/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from 'rebass';
 import { StoryObj, Meta } from '@storybook/react';
 
diff --git a/src/components/logo/index.tsx b/src/components/logo/index.tsx
index ef97b7157..a3304c346 100644
--- a/src/components/logo/index.tsx
+++ b/src/components/logo/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { useTheme } from '../../theme/theme';
 
 export interface LogoProps {
@@ -7,11 +6,7 @@ export interface LogoProps {
   withName?: boolean;
 }
 
-const Logo: FC<LogoProps> = ({
-  width = 114,
-  height = 22,
-  withName = false,
-}: LogoProps) => {
+const Logo = ({ width = 114, height = 22, withName = false }: LogoProps) => {
   const theme = useTheme();
 
   /* sadly, we can't use theme colors directly in svg :/ */
diff --git a/src/components/navigation/category/index.tsx b/src/components/navigation/category/index.tsx
index b7f7980ef..6b107632e 100644
--- a/src/components/navigation/category/index.tsx
+++ b/src/components/navigation/category/index.tsx
@@ -1,14 +1,10 @@
 import { Box } from 'rebass';
-import React, { FC, memo, useCallback, useContext } from 'react';
+import { memo, useCallback, useContext } from 'react';
 
-// Components
 import NavigationItem from '../item';
 import Labeling from '../../typography/labeling';
-// Styles
 import styles from './navigation-category.styles';
-// Content
 import NavigationContext from '../context/navigation.context';
-// Types
 import { NavigationItemProps } from '../types';
 
 export interface NavigationCategoryProps
@@ -17,7 +13,7 @@ export interface NavigationCategoryProps
   hideBack?: boolean;
 }
 
-const NavigationCategory: FC<NavigationCategoryProps> = ({
+const NavigationCategory = ({
   children,
   title,
   hideBack = false,
diff --git a/src/components/navigation/container/index.tsx b/src/components/navigation/container/index.tsx
index bbb4da254..327b19d48 100644
--- a/src/components/navigation/container/index.tsx
+++ b/src/components/navigation/container/index.tsx
@@ -1,21 +1,17 @@
 import { Box } from 'rebass';
-import React, { FC, ReactElement, useMemo, useState } from 'react';
+import { ReactElement, useMemo, useState } from 'react';
 
-// Components
 import NavigationItem from '../item';
 import NavigationProvider from '../context/navigation.provider';
 import NavigationCategory, { NavigationCategoryProps } from '../category';
-// Types
 import { NavigationItemProps, TreeNode } from '../types';
-// Styles
 import styles from './navigation.styles';
-// Utils
 import buildComponentsTree from '../context/buildComponentsTree';
 import buildTree from '../context/buildTree';
 
-type INavigation<P> = FC<P> & {
-  Item: FC<NavigationItemProps>;
-  Category: FC<NavigationCategoryProps>;
+type INavigation<P> = React.FC<P> & {
+  Item: React.FC<NavigationItemProps>;
+  Category: React.FC<NavigationCategoryProps>;
 };
 
 export interface NavigationProps {
@@ -34,7 +30,7 @@ const Navigation: INavigation<NavigationProps> = ({
   children,
   tree: propsTree,
   ...props
-}: NavigationProps) => {
+}) => {
   const tree = useMemo(() => {
     if (!propsTree) {
       return buildTree(children as ReactElement<NavigationItemProps>);
diff --git a/src/components/navigation/context/buildComponentsTree.ts b/src/components/navigation/context/buildComponentsTree.ts
index e8e37a447..7e3034cc4 100644
--- a/src/components/navigation/context/buildComponentsTree.ts
+++ b/src/components/navigation/context/buildComponentsTree.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement } from 'react';
 import NavigationCategory from '../category';
 import NavigationItem from '../item';
 import { TreeNode } from '../types';
@@ -12,14 +12,14 @@ const buildComponentsTree = (
   }
 
   if (Array.isArray(tree.children)) {
-    return React.createElement(
+    return createElement(
       isFirstLevel ? NavigationCategory : NavigationItem,
       { ...tree, key: tree.id } as any,
       buildComponentsTree(tree.children, false),
     );
   }
 
-  return React.createElement(NavigationItem, { ...tree, key: tree.id } as any);
+  return createElement(NavigationItem, { ...tree, key: tree.id } as any);
 };
 
 export default buildComponentsTree;
diff --git a/src/components/navigation/context/navigation.context.ts b/src/components/navigation/context/navigation.context.ts
index c74c3b59c..3c996d835 100644
--- a/src/components/navigation/context/navigation.context.ts
+++ b/src/components/navigation/context/navigation.context.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import { createContext } from 'react';
 import { TreeNode } from '../types';
 
 export interface NavigationContextValue {
@@ -10,7 +10,7 @@ export interface NavigationContextValue {
   onBack: (name: string) => void;
 }
 
-const NavigationContext = React.createContext<NavigationContextValue>({
+const NavigationContext = createContext<NavigationContextValue>({
   trackBy: 'id',
   activePath: [],
   tree: [],
diff --git a/src/components/navigation/context/navigation.provider.tsx b/src/components/navigation/context/navigation.provider.tsx
index 5b84d2235..b304c3848 100644
--- a/src/components/navigation/context/navigation.provider.tsx
+++ b/src/components/navigation/context/navigation.provider.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 // Context
 import NavigationContext from './navigation.context';
@@ -17,7 +17,7 @@ export interface CategoriesProviderProps {
   takeActivePath?: any;
 }
 
-const NavigationProvider: FC<CategoriesProviderProps> = ({
+const NavigationProvider = ({
   tree,
   trackBy = 'title',
   children,
diff --git a/src/components/navigation/item/index.tsx b/src/components/navigation/item/index.tsx
index efb2a9eee..b7f220321 100644
--- a/src/components/navigation/item/index.tsx
+++ b/src/components/navigation/item/index.tsx
@@ -1,21 +1,11 @@
 import * as R from 'ramda';
-import React, {
-  FC,
-  memo,
-  ReactElement,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-} from 'react';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import { Box } from 'rebass';
 import { Link } from 'react-router-dom';
-import { useTheme } from '../../../theme/theme';
 
-// Context
+import { useTheme } from '../../../theme/theme';
 import NavigationContext from '../context/navigation.context';
 import { NavigationItemProps } from '../types';
-// Styles
 import Tooltip from '../../tooltip';
 import TooltipPositions from '../../tooltip/positions';
 import styles from './navigation-item.styles';
@@ -28,9 +18,7 @@ const getVariant = (isDisabled = false, isActive = false): string => {
   return isActive ? 'active' : 'default';
 };
 
-const NavigationItem: FC<NavigationItemProps> = (
-  props: NavigationItemProps,
-) => {
+const NavigationItem = (props: NavigationItemProps) => {
   const { activePath, onActivate, trackBy } = useContext(NavigationContext);
   const theme = useTheme();
 
@@ -63,7 +51,7 @@ const NavigationItem: FC<NavigationItemProps> = (
   const childs = useMemo(
     () =>
       React.Children.map(children, (child) =>
-        React.cloneElement(child as ReactElement<NavigationItemProps>, {
+        React.cloneElement(child as React.ReactElement<NavigationItemProps>, {
           isSubItem: true,
         }),
       ),
@@ -151,4 +139,4 @@ const NavigationItem: FC<NavigationItemProps> = (
   );
 };
 
-export default memo(NavigationItem);
+export default React.memo(NavigationItem);
diff --git a/src/components/navigation/stories.tsx b/src/components/navigation/stories.tsx
index 202648092..23f5ad516 100644
--- a/src/components/navigation/stories.tsx
+++ b/src/components/navigation/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from 'rebass';
 import { action } from '@storybook/addon-actions';
 import { StoryObj, Meta } from '@storybook/react';
diff --git a/src/components/navigation/types.ts b/src/components/navigation/types.ts
index bd3f75e99..ab0bcb029 100644
--- a/src/components/navigation/types.ts
+++ b/src/components/navigation/types.ts
@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps } from 'rebass';
 
 export interface NavigationItemProps extends Omit<BoxProps, 'css' | 'id'> {
diff --git a/src/components/notifications/index.tsx b/src/components/notifications/index.tsx
deleted file mode 100644
index 04797057e..000000000
--- a/src/components/notifications/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
-
-import { FlexProps } from 'rebass';
-import NotificationManager, {
-  SystemNotification,
-} from './notifications-manager';
-// Components
-import NotificationsItemsContainer from './notifications-container';
-
-export interface NotificationContainerProps extends Omit<FlexProps, 'css'> {}
-
-const NotificationsContainer: FC<NotificationContainerProps> = (props) => {
-  const [notifications, setNotifications] = useState<SystemNotification[]>([]);
-
-  const handleChange = useCallback((list: SystemNotification[]) => {
-    setNotifications(list.slice());
-  }, []);
-
-  useEffect(() => {
-    NotificationManager.addChangeListener(handleChange);
-
-    return () => {
-      NotificationManager.removeChangeListener(handleChange);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <NotificationsItemsContainer {...props} notifications={notifications} />
-  );
-};
-
-export default NotificationsContainer;
diff --git a/src/components/notifications/notification.tsx b/src/components/notifications/notification.tsx
deleted file mode 100644
index 7ad7d69dc..000000000
--- a/src/components/notifications/notification.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { FC, memo, useCallback, useEffect, useState } from 'react';
-import { Box, Flex } from 'rebass';
-import { GetIcon, IconName } from '../icon';
-import Tooltip from '../tooltip';
-import NotificationManager, {
-  SystemNotification,
-} from './notifications-manager';
-import styles from './notifications-styles';
-
-const Notification: FC<SystemNotification> = ({
-  id,
-  type,
-  content,
-  duration,
-  isError = true,
-}) => {
-  const [timeout, setTimeoutNumber] = useState<ReturnType<
-    typeof setTimeout
-  > | null>(null);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      NotificationManager.remove(id);
-    }, duration);
-
-    setTimeoutNumber(timeout);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const hoverHandler = useCallback(() => {
-    if (timeout) {
-      clearTimeout(timeout);
-      setTimeoutNumber(null);
-    }
-  }, [timeout]);
-
-  const removeHandler = useCallback(
-    (id: number) => () => {
-      NotificationManager.remove(id);
-    },
-    [],
-  );
-
-  return (
-    <Box
-      sx={{
-        ...styles.notification,
-        borderLeftColor: isError ? 'labels.red' : 'labels.green',
-      }}
-      key={id}
-      onMouseEnter={hoverHandler}
-      mb="20px"
-      p="20px"
-      tx="notification.secondary"
-      variant="notification"
-    >
-      <Flex justifyContent="space-between" alignItems="flex-start">
-        {type}
-        <Tooltip mainText="Hide">
-          <Box
-            mt="-5px"
-            mr="-7px"
-            onClick={removeHandler(id)}
-            p="2px"
-            height="30px"
-            sx={{
-              borderWidth: '1px',
-              borderStyle: 'solid',
-              borderColor: 'transparent',
-              cursor: 'pointer',
-
-              ':hover': {
-                backgroundColor: 'grayShade3',
-                borderColor: 'grayShade3',
-              },
-            }}
-          >
-            <GetIcon icon={IconName.cross} />
-          </Box>
-        </Tooltip>
-      </Flex>
-      <Box sx={{ whiteSpace: 'nowrap' }} maxWidth="fit-content">
-        {content}
-      </Box>
-    </Box>
-  );
-};
-
-export default memo(Notification);
diff --git a/src/components/notifications/notifications-container.tsx b/src/components/notifications/notifications-container.tsx
deleted file mode 100644
index fb8685f2b..000000000
--- a/src/components/notifications/notifications-container.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { FC } from 'react';
-import { Flex, FlexProps } from 'rebass';
-import { useTransition, animated } from 'react-spring';
-
-// Types
-import { SystemNotification } from './notifications-manager';
-// Components
-import Notification from './notification';
-
-import styles from './notifications-styles';
-
-export interface NotificationsItemsContainerProps
-  extends Omit<FlexProps, 'css'> {
-  notifications: SystemNotification[];
-}
-
-const NotificationsItemsContainer: FC<NotificationsItemsContainerProps> = ({
-  notifications,
-  ...props
-}) => {
-  const transitions = useTransition<SystemNotification, {}>(
-    notifications,
-    (item) => item.id,
-    {
-      from: { transform: 'translate3d(100%, 0, 0)' },
-      enter: { transform: 'translate3d(-5%, 0, 0)' },
-      leave: { transform: 'translate3d(110%, 0, 0)' },
-    },
-  );
-
-  return (
-    <Flex {...props} flexDirection="column" sx={styles.wrapper}>
-      {transitions.map(({ item: notification, props, key }) => (
-        <animated.div key={key} style={props}>
-          <Notification key={notification.id} {...notification} />
-        </animated.div>
-      ))}
-    </Flex>
-  );
-};
-
-export default NotificationsItemsContainer;
diff --git a/src/components/notifications/notifications-manager.ts b/src/components/notifications/notifications-manager.ts
deleted file mode 100644
index c986ae8ed..000000000
--- a/src/components/notifications/notifications-manager.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { EventEmitter } from 'events';
-import { ReactNode } from 'react';
-
-export interface Notification {
-  type: ReactNode;
-  content: ReactNode;
-  duration?: number;
-  isError?: boolean;
-}
-
-export interface SystemNotification extends Notification {
-  id: number;
-}
-
-class NotificationsManager extends EventEmitter {
-  listNotify: SystemNotification[] = [];
-
-  constructor() {
-    super();
-    this.listNotify = [];
-  }
-
-  create(notify: Notification) {
-    const defaultNotification: SystemNotification = {
-      id: Date.now(),
-      duration: 5000,
-      ...notify,
-    };
-
-    this.listNotify.unshift(defaultNotification);
-    this.emitChange();
-  }
-
-  remove(id: number) {
-    this.listNotify = this.listNotify.filter((n) => id !== n.id);
-    this.emitChange();
-  }
-
-  emitChange() {
-    this.emit('CHANGE', this.listNotify);
-  }
-
-  addChangeListener(callback: (list: SystemNotification[]) => void) {
-    this.addListener('CHANGE', callback);
-  }
-
-  removeChangeListener(callback: (list: SystemNotification[]) => void) {
-    this.removeListener('CHANGE', callback);
-  }
-
-  closeAllNotifications() {
-    setTimeout(() => {
-      this.listNotify = [];
-      this.emitChange();
-    }, 2000);
-  }
-}
-
-export default new NotificationsManager();
diff --git a/src/components/notifications/notifications-styles.ts b/src/components/notifications/notifications-styles.ts
deleted file mode 100644
index 3d08ca37a..000000000
--- a/src/components/notifications/notifications-styles.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export default {
-  notification: {
-    minWidth: '291px',
-
-    borderWidth: '1px',
-    borderStyle: 'solid',
-
-    boxSizing: 'border-box',
-    boxShadow: 'notification',
-    border: 'none',
-    borderLeftStyle: 'solid',
-    borderLeftWidth: '5px',
-  },
-  wrapper: {
-    paddingLeft: '30px',
-    position: 'absolute',
-    maxHeight: '70vh',
-    top: 0,
-    right: '20px',
-    overflow: 'hidden',
-    zIndex: 'notifications',
-  },
-  hideButton: {},
-};
diff --git a/src/components/notifier/Notification.tsx b/src/components/notifier/Notification.tsx
index b6ff64ba9..ac2e5e4f9 100644
--- a/src/components/notifier/Notification.tsx
+++ b/src/components/notifier/Notification.tsx
@@ -5,13 +5,13 @@ import {
   AlertTitle,
   CloseButton,
 } from '@chakra-ui/react';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Flex } from '../flex';
 
 interface Props extends Omit<AlertProps, 'title' | 'content'> {
   onClose: any;
-  title: ReactNode;
-  content: ReactNode;
+  title: React.ReactNode;
+  content: React.ReactNode;
 }
 
 export const Notification = ({
diff --git a/src/components/notifier/notifier.tsx b/src/components/notifier/notifier.tsx
index 5d82d6afb..8b27bd881 100644
--- a/src/components/notifier/notifier.tsx
+++ b/src/components/notifier/notifier.tsx
@@ -4,7 +4,7 @@ import {
   ToastId,
   useToast,
 } from '@chakra-ui/react';
-import React, { ReactNode, useCallback, useMemo } from 'react';
+import { ReactNode, useCallback, useMemo } from 'react';
 import { standaloneToast } from '../../theme-chakra/ChakraThemeProvider';
 import { Notification } from './Notification';
 
diff --git a/src/components/notifier/stories.tsx b/src/components/notifier/stories.tsx
index 1e3753d48..1c2a23975 100644
--- a/src/components/notifier/stories.tsx
+++ b/src/components/notifier/stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, waitFor, within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 import { Box } from '../box';
 import { Button } from '../button';
diff --git a/src/components/pagination/index.tsx b/src/components/pagination/index.tsx
index 85e29a8e7..f2379415f 100644
--- a/src/components/pagination/index.tsx
+++ b/src/components/pagination/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Box, Flex, FlexProps } from 'rebass';
 
 // Components
@@ -19,7 +19,7 @@ export interface PaginationProps extends Omit<FlexProps, 'css' | 'onChange'> {
   onChange: (page: number) => void;
 }
 
-const Pagination: FC<PaginationProps> = ({
+const Pagination = ({
   totalPages,
   currentPage,
   disabled,
@@ -27,7 +27,7 @@ const Pagination: FC<PaginationProps> = ({
   onChange,
   variant = 'primary',
   ...props
-}) => {
+}: PaginationProps) => {
   const [current, setCurrent] = useState<string>(String(currentPage));
   const [error, setError] = useState<string>('');
 
diff --git a/src/components/pagination/stories.tsx b/src/components/pagination/stories.tsx
index 4ed2fd035..02df0b7a3 100644
--- a/src/components/pagination/stories.tsx
+++ b/src/components/pagination/stories.tsx
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import Label from '../label';
 
diff --git a/src/components/performance-bar/index.tsx b/src/components/performance-bar/index.tsx
index 45670fff6..a5361ac08 100644
--- a/src/components/performance-bar/index.tsx
+++ b/src/components/performance-bar/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Flex } from 'rebass';
 
 import * as s from './performance-bar.styles';
@@ -12,9 +11,7 @@ export interface PerformanceBarProps {
   bars: Bar[];
 }
 
-const PerformanceBar: FC<PerformanceBarProps> = ({
-  bars,
-}: PerformanceBarProps) => {
+const PerformanceBar = ({ bars }: PerformanceBarProps) => {
   const renderBarPortion = (bar: Bar) => (
     <Flex
       key={bar.variant}
diff --git a/src/components/performance-bar/stories.tsx b/src/components/performance-bar/stories.tsx
index fb3addad2..273947d52 100644
--- a/src/components/performance-bar/stories.tsx
+++ b/src/components/performance-bar/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import PerformanceBar from '.';
 
diff --git a/src/components/performance-card/index.tsx b/src/components/performance-card/index.tsx
index 13da0014b..c0cf52a49 100644
--- a/src/components/performance-card/index.tsx
+++ b/src/components/performance-card/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Card, CardProps } from 'rebass';
 
 import PerformanceBar from '../performance-bar';
@@ -14,7 +13,7 @@ export interface PerformanceCardProps extends Omit<CardProps, 'css'> {
   children: React.ReactNode;
 }
 
-const PerformanceCard: FC<PerformanceCardProps> = ({
+const PerformanceCard = ({
   bars,
   children,
   ...props
diff --git a/src/components/performance-card/stories.tsx b/src/components/performance-card/stories.tsx
index 03167c138..5e7ffec54 100644
--- a/src/components/performance-card/stories.tsx
+++ b/src/components/performance-card/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import Labeling from '../typography/labeling';
 
diff --git a/src/components/popup/drawer/drawer-section.tsx b/src/components/popup/drawer/drawer-section.tsx
index 2e06f6a91..169ac1cc7 100644
--- a/src/components/popup/drawer/drawer-section.tsx
+++ b/src/components/popup/drawer/drawer-section.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Box, BoxProps } from 'rebass';
 
 // Components
@@ -14,7 +13,7 @@ export interface DrawerSectionProps
   children?: React.ReactNode;
 }
 
-const DrawerSection: FC<DrawerSectionProps> = ({
+const DrawerSection = ({
   title,
   action,
   children,
diff --git a/src/components/popup/drawer/index.tsx b/src/components/popup/drawer/index.tsx
index 369243926..f149c985d 100644
--- a/src/components/popup/drawer/index.tsx
+++ b/src/components/popup/drawer/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Box } from 'rebass';
 import {
   Drawer as ChakraDrawer,
@@ -15,8 +14,8 @@ import { PopupProps } from '../index';
 import FooterButton from '../../footer-button';
 import DrawerSection, { DrawerSectionProps } from './drawer-section';
 
-type IDrawer<P> = FC<P> & {
-  Section: FC<DrawerSectionProps>;
+type IDrawer<P> = React.FC<P> & {
+  Section: React.FC<DrawerSectionProps>;
 };
 
 type Children = React.ReactElement<DrawerSectionProps> | null;
diff --git a/src/components/popup/drawer/stories.tsx b/src/components/popup/drawer/stories.tsx
index 5b85a813d..9e4662521 100644
--- a/src/components/popup/drawer/stories.tsx
+++ b/src/components/popup/drawer/stories.tsx
@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Box, BoxProps } from 'rebass';
diff --git a/src/components/popup/index.tsx b/src/components/popup/index.tsx
index 7bbee78cb..e278b0c31 100644
--- a/src/components/popup/index.tsx
+++ b/src/components/popup/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Modal,
   ModalCloseButton,
diff --git a/src/components/popup/stories.tsx b/src/components/popup/stories.tsx
index 5c70273e5..a32068592 100644
--- a/src/components/popup/stories.tsx
+++ b/src/components/popup/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within, screen, waitFor } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
diff --git a/src/components/popup/tiny/index.tsx b/src/components/popup/tiny/index.tsx
index ad125dfbc..9f52676bc 100644
--- a/src/components/popup/tiny/index.tsx
+++ b/src/components/popup/tiny/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Flex } from '@chakra-ui/react';
 import { Button } from '../../button';
 
diff --git a/src/components/popup/tiny/stories.tsx b/src/components/popup/tiny/stories.tsx
index ac6474f08..5c2cfe888 100644
--- a/src/components/popup/tiny/stories.tsx
+++ b/src/components/popup/tiny/stories.tsx
@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button, Input, usePopup } from '../../..';
diff --git a/src/components/project-badge/ProjectBadge.tsx b/src/components/project-badge/ProjectBadge.tsx
index 3fdf5b402..55ccd352a 100644
--- a/src/components/project-badge/ProjectBadge.tsx
+++ b/src/components/project-badge/ProjectBadge.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Flex, FlexProps } from 'rebass';
 
 import Value from '../typography/value';
diff --git a/src/components/project-badge/stories.tsx b/src/components/project-badge/stories.tsx
index c60a7100f..b0f7f8bc5 100644
--- a/src/components/project-badge/stories.tsx
+++ b/src/components/project-badge/stories.tsx
@@ -1,5 +1,4 @@
 import { StoryObj } from '@storybook/react';
-import React from 'react';
 import { ProjectBadge } from './ProjectBadge';
 
 export default {
diff --git a/src/components/radio/group-stories.tsx b/src/components/radio/group-stories.tsx
index 09d9aa156..e8f0afd6f 100644
--- a/src/components/radio/group-stories.tsx
+++ b/src/components/radio/group-stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import RadioGroup from './radio-group';
 
diff --git a/src/components/radio/index.tsx b/src/components/radio/index.tsx
index 0269756a9..9f1f04058 100644
--- a/src/components/radio/index.tsx
+++ b/src/components/radio/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { RadioProps as RebassRadioProps } from '@rebass/forms';
 import { Box, Flex } from 'rebass';
 import Tooltip, { TooltipProps } from '../tooltip';
@@ -15,7 +15,7 @@ export interface RadioProps extends Omit<RebassRadioProps, 'css'> {
   tooltipPosition?: TooltipProps['position'];
 }
 
-const Radio: FC<RadioProps> = forwardRef(
+const Radio = forwardRef(
   (
     {
       label,
diff --git a/src/components/radio/radio-group.tsx b/src/components/radio/radio-group.tsx
index dc58ff569..34d292062 100644
--- a/src/components/radio/radio-group.tsx
+++ b/src/components/radio/radio-group.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { Flex } from 'rebass';
 
 // Components
diff --git a/src/components/radio/stories.tsx b/src/components/radio/stories.tsx
index 6cda05c39..8d7a3853d 100644
--- a/src/components/radio/stories.tsx
+++ b/src/components/radio/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import Radio from './index';
 
diff --git a/src/components/range-slider/range-slider.tsx b/src/components/range-slider/range-slider.tsx
index f5d04d014..e9bace8d2 100644
--- a/src/components/range-slider/range-slider.tsx
+++ b/src/components/range-slider/range-slider.tsx
@@ -5,7 +5,6 @@ import {
   RangeSliderThumb,
   RangeSliderTrack,
 } from '@chakra-ui/react';
-import React from 'react';
 import { Flex } from 'rebass';
 import Labeling from '../typography/labeling';
 import Value from '../typography/value';
diff --git a/src/components/range-slider/stories.tsx b/src/components/range-slider/stories.tsx
index 1edecf6b3..0bc89a9d7 100644
--- a/src/components/range-slider/stories.tsx
+++ b/src/components/range-slider/stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box } from 'rebass';
 import RangeSlider from './range-slider';
 import Value from '../typography/value';
diff --git a/src/components/row/button/index.tsx b/src/components/row/button/index.tsx
index fcf4f9844..9d2fa377f 100644
--- a/src/components/row/button/index.tsx
+++ b/src/components/row/button/index.tsx
@@ -1,5 +1,3 @@
-import React, { FC } from 'react';
-// Components
 import { Button } from 'rebass';
 import { ButtonProps } from '../../button';
 import Tooltip from '../../tooltip';
@@ -12,7 +10,7 @@ export interface RowButtonProps extends Omit<ButtonProps, 'icon'> {
   disabled?: boolean;
 }
 
-const RowButton: FC<RowButtonProps> = ({
+const RowButton = ({
   onClick,
   icon,
   mainText,
diff --git a/src/components/row/container/index.tsx b/src/components/row/container/index.tsx
index 4a1a6956a..68bcc0302 100644
--- a/src/components/row/container/index.tsx
+++ b/src/components/row/container/index.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentType, FC, useMemo } from 'react';
+import { ComponentType, useMemo } from 'react';
 import { Box } from 'rebass';
 import TableRow from '../group';
 import { Mode } from './types';
@@ -16,7 +16,7 @@ export interface RowProps {
   onRowClick?: (event: any, index: number) => void;
 }
 
-const Row: FC<RowProps> = ({
+const Row = ({
   mode = Mode.full,
   groupComponents,
   groupProps,
diff --git a/src/components/row/group/index.tsx b/src/components/row/group/index.tsx
index 94f17b569..429c36d9d 100644
--- a/src/components/row/group/index.tsx
+++ b/src/components/row/group/index.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentType, FC, useMemo } from 'react';
+import { ComponentType, useMemo } from 'react';
 import { Box } from 'rebass';
 import TableItem from '../item';
 import styles from './row-group.styles';
@@ -16,7 +16,7 @@ export interface RowGroupProps {
   index: number;
 }
 
-const RowGroup: FC<RowGroupProps> = ({
+const RowGroup = ({
   mode = Mode.full,
   components,
   componentsProps,
diff --git a/src/components/row/item/index.tsx b/src/components/row/item/index.tsx
index 0f7c1f9be..2a58a7deb 100644
--- a/src/components/row/item/index.tsx
+++ b/src/components/row/item/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ComponentType } from 'react';
+import { ComponentType } from 'react';
 import { Box } from 'rebass';
 import styles from './row-item.styles';
 import { TableItemPosition } from './types';
@@ -12,7 +12,7 @@ export interface RowItemProps {
   fillSpace?: boolean;
 }
 
-const RowItem: FC<RowItemProps> = ({
+const RowItem = ({
   mode = Mode.full,
   component: Component,
   componentProps,
diff --git a/src/components/row/stories.tsx b/src/components/row/stories.tsx
index 659d5d212..b73c7ea38 100644
--- a/src/components/row/stories.tsx
+++ b/src/components/row/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from 'rebass';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
diff --git a/src/components/select/index.tsx b/src/components/select/index.tsx
index 5565845b0..b25fe7c30 100644
--- a/src/components/select/index.tsx
+++ b/src/components/select/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 // Components
 import { Box, Flex } from 'rebass';
 // Hooks
@@ -52,7 +52,7 @@ export interface SelectProps extends Omit<LabelProps, 'onChange' | 'children'> {
   needSwap?: boolean;
 }
 
-const Select: FC<SelectProps> = ({
+const Select = ({
   labelAction,
   label,
   width = '180px',
diff --git a/src/components/select/info/index.tsx b/src/components/select/info/index.tsx
index cb294dd65..5825d2e73 100644
--- a/src/components/select/info/index.tsx
+++ b/src/components/select/info/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Text, TextProps } from 'rebass';
 
 // Types
@@ -11,7 +10,7 @@ export interface SelectInfoProps extends Omit<TextProps, 'css'> {
   children: React.ReactNode;
 }
 
-const SelectInfo: FC<SelectInfoProps> = ({
+const SelectInfo = ({
   intent = 'error',
   children,
   ...props
diff --git a/src/components/select/label.tsx b/src/components/select/label.tsx
index bed4f3443..df592af54 100644
--- a/src/components/select/label.tsx
+++ b/src/components/select/label.tsx
@@ -1,4 +1,4 @@
-import React, { FC, forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { Box, BoxProps, Flex } from 'rebass';
 import { GetIcon, IconName } from '../icon';
 
@@ -56,7 +56,7 @@ const getLabelText = (
   return value.length === options.length && isMulti ? 'all' : value.join(', ');
 };
 
-const SelectLabel: FC<SelectLabelProps> = forwardRef(
+const SelectLabel = forwardRef(
   (
     {
       variant,
diff --git a/src/components/select/lists/list.types.ts b/src/components/select/lists/list.types.ts
index 3c6c42224..9a6964c87 100644
--- a/src/components/select/lists/list.types.ts
+++ b/src/components/select/lists/list.types.ts
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export interface SelectListProps {
   options: string[];
   value: string[];
diff --git a/src/components/select/lists/select-list-multi.tsx b/src/components/select/lists/select-list-multi.tsx
index 82030e86d..68f5cd1a2 100644
--- a/src/components/select/lists/select-list-multi.tsx
+++ b/src/components/select/lists/select-list-multi.tsx
@@ -1,10 +1,8 @@
-import React, { FC, useCallback } from 'react';
-
-// Components
+import { useCallback } from 'react';
 import { Box } from 'rebass';
+
 import Checkbox from '../../checkbox';
 import ListItem from '../../list/item';
-// Types
 import { SelectListProps } from './list.types';
 import Labeling from '../../typography/labeling';
 import useArrowsSelect from '../../select2/useArrowsSelect';
@@ -14,7 +12,7 @@ const toggleValue = (value: string[], option: string) =>
     ? value.filter((o) => o !== option)
     : [...value, option];
 
-const SelectListMulti: FC<SelectListProps> = ({
+const SelectListMulti = ({
   options,
   value,
   additionalTexts,
@@ -49,7 +47,7 @@ const SelectListMulti: FC<SelectListProps> = ({
 
   return (
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    <React.Fragment>
+    <>
       {options?.map((option, index) => (
         <ListItem
           // eslint-disable-next-line react/no-array-index-key
@@ -85,7 +83,7 @@ const SelectListMulti: FC<SelectListProps> = ({
           )}
         </ListItem>
       ))}
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/src/components/select/lists/select-list.tsx b/src/components/select/lists/select-list.tsx
index ca77b9332..5e3a99315 100644
--- a/src/components/select/lists/select-list.tsx
+++ b/src/components/select/lists/select-list.tsx
@@ -1,14 +1,12 @@
-import React, { FC, useCallback } from 'react';
-
-// Components
+import { useCallback } from 'react';
 import { Box } from 'rebass';
+
 import ListItem from '../../list/item';
-// Types
 import { SelectListProps } from './list.types';
 import Labeling from '../../typography/labeling';
 import useArrowsSelect from '../../select2/useArrowsSelect';
 
-const SelectList: FC<SelectListProps> = ({
+const SelectList = ({
   options,
   value,
   onClose,
@@ -30,7 +28,7 @@ const SelectList: FC<SelectListProps> = ({
 
   return (
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    <React.Fragment>
+    <>
       {options?.map((option, index) => (
         <ListItem
           // eslint-disable-next-line react/no-array-index-key
@@ -50,7 +48,7 @@ const SelectList: FC<SelectListProps> = ({
           )}
         </ListItem>
       ))}
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/src/components/select/stories.tsx b/src/components/select/stories.tsx
index 43a8fefec..35ec1b99b 100644
--- a/src/components/select/stories.tsx
+++ b/src/components/select/stories.tsx
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import { Box } from 'rebass';
diff --git a/src/components/select2/index.tsx b/src/components/select2/index.tsx
index 445d84d1d..b6650c4de 100644
--- a/src/components/select2/index.tsx
+++ b/src/components/select2/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
 // Components
 import { Box, Flex } from 'rebass';
@@ -66,7 +66,7 @@ export interface Select2Props
   info?: string;
 }
 
-const Select: FC<Select2Props> = ({
+const Select = ({
   label,
   value,
   options,
diff --git a/src/components/select2/info/index.tsx b/src/components/select2/info/index.tsx
index cb294dd65..5825d2e73 100644
--- a/src/components/select2/info/index.tsx
+++ b/src/components/select2/info/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Text, TextProps } from 'rebass';
 
 // Types
@@ -11,7 +10,7 @@ export interface SelectInfoProps extends Omit<TextProps, 'css'> {
   children: React.ReactNode;
 }
 
-const SelectInfo: FC<SelectInfoProps> = ({
+const SelectInfo = ({
   intent = 'error',
   children,
   ...props
diff --git a/src/components/select2/label.tsx b/src/components/select2/label.tsx
index a603f1b6b..bbe869d68 100644
--- a/src/components/select2/label.tsx
+++ b/src/components/select2/label.tsx
@@ -1,4 +1,4 @@
-import React, { FC, forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { Box, BoxProps, Flex } from 'rebass';
 
 import Labeling from '../typography/labeling';
@@ -38,7 +38,7 @@ const getLabelText = (
     : value.map((x) => x.label).join(', ');
 };
 
-const SelectLabel: FC<SelectLabelProps> = forwardRef(
+const SelectLabel = forwardRef(
   (
     {
       label,
diff --git a/src/components/select2/lists/select-list-multi.tsx b/src/components/select2/lists/select-list-multi.tsx
index 97e331539..a1c65b2cd 100644
--- a/src/components/select2/lists/select-list-multi.tsx
+++ b/src/components/select2/lists/select-list-multi.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 // Components
 import { Box } from 'rebass';
@@ -22,11 +22,7 @@ const toggleValue = (value: SelectOpt[], option: SelectOpt) => {
   return result.map((x) => ({ key: x.key, label: x.label }));
 };
 
-const SelectListMulti: FC<SelectListProps> = ({
-  options,
-  value,
-  onChange,
-}: SelectListProps) => {
+const SelectListMulti = ({ options, value, onChange }: SelectListProps) => {
   const handleClick = useCallback(
     (option: SelectOpt) => (event?: React.MouseEvent<HTMLDivElement>) => {
       if (event) {
@@ -55,7 +51,7 @@ const SelectListMulti: FC<SelectListProps> = ({
 
   return (
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    <React.Fragment>
+    <>
       {options?.map((option, index) => (
         <ListItem
           key={option.key}
@@ -90,7 +86,7 @@ const SelectListMulti: FC<SelectListProps> = ({
           )}
         </ListItem>
       ))}
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/src/components/select2/lists/select-list.tsx b/src/components/select2/lists/select-list.tsx
index c230ce374..02548fba0 100644
--- a/src/components/select2/lists/select-list.tsx
+++ b/src/components/select2/lists/select-list.tsx
@@ -1,20 +1,13 @@
-import React, { FC, useCallback } from 'react';
-// Components
+import { useCallback } from 'react';
 import { Box } from 'rebass';
+
 import ListItem from '../../list/item';
 import Labeling from '../../typography/labeling';
-// Hook
 import useArrowsSelect from '../useArrowsSelect';
-// Types
 import { SelectListProps } from './list.types';
 import { SelectOpt } from '../types';
 
-const SelectList: FC<SelectListProps> = ({
-  options,
-  value,
-  onClose,
-  onChange,
-}: SelectListProps) => {
+const SelectList = ({ options, value, onClose, onChange }: SelectListProps) => {
   const handleClick = useCallback(
     (option: SelectOpt) => () => {
       const selection = { key: option.key, label: option.label };
diff --git a/src/components/select2/stories.tsx b/src/components/select2/stories.tsx
index 2390c4832..76f0e0471 100644
--- a/src/components/select2/stories.tsx
+++ b/src/components/select2/stories.tsx
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import { Box } from 'rebass';
diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx
index ff351f224..cba55fb43 100644
--- a/src/components/slider/slider.tsx
+++ b/src/components/slider/slider.tsx
@@ -5,7 +5,6 @@ import {
   SliderThumb,
   SliderTrack,
 } from '@chakra-ui/react';
-import React from 'react';
 import { Flex } from 'rebass';
 import Labeling from '../typography/labeling';
 import Value from '../typography/value';
diff --git a/src/components/slider/stories.tsx b/src/components/slider/stories.tsx
index 24d1a9971..2cbd3f16b 100644
--- a/src/components/slider/stories.tsx
+++ b/src/components/slider/stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box } from 'rebass';
 import Slider from './slider';
 
diff --git a/src/components/spinner/index.tsx b/src/components/spinner/index.tsx
index 871d90c14..83b3851fd 100644
--- a/src/components/spinner/index.tsx
+++ b/src/components/spinner/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Box, BoxProps } from 'rebass';
 // Styles
 import styles from './spinner-styles';
@@ -8,11 +7,7 @@ export interface SpinnerProps extends Omit<BoxProps, 'css'> {
   color?: string;
 }
 
-const Spinner: FC<SpinnerProps> = ({
-  size = 20,
-  color = 'primary',
-  ...props
-}: SpinnerProps) => (
+const Spinner = ({ size = 20, color = 'primary', ...props }: SpinnerProps) => (
   <Box sx={{ ...styles(size, color) }} {...props}>
     <div />
     <div />
diff --git a/src/components/spinner/stories.tsx b/src/components/spinner/stories.tsx
index 76804da72..5276c427c 100644
--- a/src/components/spinner/stories.tsx
+++ b/src/components/spinner/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import Spinner from '.';
 
diff --git a/src/components/sticky-portal/StickyPortal.tsx b/src/components/sticky-portal/StickyPortal.tsx
index dd44e5c4a..11726e481 100644
--- a/src/components/sticky-portal/StickyPortal.tsx
+++ b/src/components/sticky-portal/StickyPortal.tsx
@@ -1,5 +1,5 @@
 import { createPortal } from 'react-dom';
-import { FC, useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 export interface StickyPortalProps {
   children: any;
@@ -9,11 +9,7 @@ export interface StickyPortalProps {
 
 export const CONTENT_ID = 'portal-content';
 
-const StickyPortal: FC<StickyPortalProps> = ({
-  children,
-  refEl,
-  handleClose,
-}: StickyPortalProps) => {
+const StickyPortal = ({ children, refEl, handleClose }: StickyPortalProps) => {
   const rootElemRef = useRef(document.createElement('div'));
 
   useEffect(() => {
diff --git a/src/components/sticky-summary/index.tsx b/src/components/sticky-summary/index.tsx
index 366d19249..0d5adf772 100644
--- a/src/components/sticky-summary/index.tsx
+++ b/src/components/sticky-summary/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { boxStyles, boxButtonStyles } from './sticky-summary.styles';
 import Title from '../typography/title';
 import Labeling from '../typography/labeling';
@@ -17,7 +16,7 @@ export interface StickySummaryProps {
   hasScrollOnScreen?: boolean;
 }
 
-const StickySummary: FC<StickySummaryProps> = ({
+const StickySummary = ({
   title,
   firstValue,
   secondValue,
diff --git a/src/components/sticky-summary/stories.tsx b/src/components/sticky-summary/stories.tsx
index c370c290e..cae290ebe 100644
--- a/src/components/sticky-summary/stories.tsx
+++ b/src/components/sticky-summary/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { Box } from 'rebass';
 import Stickydescription from './index';
diff --git a/src/components/symbol/index.tsx b/src/components/symbol/index.tsx
index 4a524d287..6fcf21a52 100644
--- a/src/components/symbol/index.tsx
+++ b/src/components/symbol/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import { useState } from 'react';
 import styles from './symbol.styles';
 import { getSymbolIcon } from './utils';
 import Text, { TextProps } from '../typography/text';
@@ -21,7 +21,7 @@ const defaultTooltipText = {
   [SymbolMode.bulk]: 'Add all features to basket',
 };
 
-const Symbol: FC<SymbolProps> = ({
+const Symbol = ({
   inBasket,
   handleClick,
   tooltipProps,
@@ -30,7 +30,7 @@ const Symbol: FC<SymbolProps> = ({
   iconProps,
   possible = true,
   mode = SymbolMode.single,
-}) => {
+}: SymbolProps) => {
   const [hover, setHover] = useState(false);
   const mainText = tooltipMainText || defaultTooltipText[mode];
 
diff --git a/src/components/symbol/stories.tsx b/src/components/symbol/stories.tsx
index f2809dc3d..64c96bedb 100644
--- a/src/components/symbol/stories.tsx
+++ b/src/components/symbol/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import Symbol from './index';
 import TooltipPositions from '../tooltip/positions';
diff --git a/src/components/table/editable/blur-input.tsx b/src/components/table/editable/blur-input.tsx
index 179d9a189..7710285f1 100644
--- a/src/components/table/editable/blur-input.tsx
+++ b/src/components/table/editable/blur-input.tsx
@@ -1,4 +1,4 @@
-import React, { FC, memo, useCallback, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import Input, { InputProps } from '../../input';
 
 interface TInputProps extends Omit<InputProps, 'onChange'> {
@@ -14,7 +14,7 @@ interface TInputProps extends Omit<InputProps, 'onChange'> {
  * https://github.com/facebook/react/issues/2291
  * https://erikmartinjordan.com/onblur-prevents-onclick-react
  */
-const BlurInput: FC<TInputProps> = ({ defaultValue, onChange, ...props }) => {
+const BlurInput = ({ defaultValue, onChange, ...props }: TInputProps) => {
   const [value, setValue] = useState(defaultValue);
 
   const handleChange = useCallback(
diff --git a/src/components/table/editable/index.tsx b/src/components/table/editable/index.tsx
index 19cccb18f..5cbe1f7fe 100644
--- a/src/components/table/editable/index.tsx
+++ b/src/components/table/editable/index.tsx
@@ -1,25 +1,19 @@
-import React, { FC, memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import { Box } from 'rebass';
 
-// Components
 import { TableProps } from '../index';
-// Utils
 import KeysCollection from '../../../utils/KeysCollection';
-// Styles
 import {
   containerStyles,
   tableStyles,
   theadStyles,
   trowStyles,
 } from '../table.styles';
-// Components
 import RowLeftContent from './row-left-content';
-// types
 import { TableCell, TableHeader, TableRowComponent } from '../type';
 import Thead from '../thead';
 import Label from '../../label';
 
-/* eslint-disable implicit-arrow-linebreak */
 export interface EditableTableProps extends Omit<TableProps, 'value'> {
   initialStaticColumn?: string;
   values: TableCell[][];
@@ -38,9 +32,7 @@ export interface EditableTableProps extends Omit<TableProps, 'value'> {
   hasFreezeButton?: boolean;
 }
 
-/* eslint-disable arrow-body-style */
-
-const EditableTable: FC<EditableTableProps> = ({
+const EditableTable = ({
   onChangeData,
   onDeleteRow,
   initialStaticColumn,
diff --git a/src/components/table/editable/row-left-content.tsx b/src/components/table/editable/row-left-content.tsx
index a6934972d..3752f8ef5 100644
--- a/src/components/table/editable/row-left-content.tsx
+++ b/src/components/table/editable/row-left-content.tsx
@@ -1,4 +1,4 @@
-import React, { FC, memo } from 'react';
+import { memo } from 'react';
 import { Box } from 'rebass';
 import { IconButton } from '../../icon-button';
 import { IconName } from '../../icon/list';
@@ -30,7 +30,7 @@ const styles = {
   },
 };
 
-const RowLeftContent: FC<RowLeftContentProps> = ({ index, onDelete }) => (
+const RowLeftContent = ({ index, onDelete }: RowLeftContentProps) => (
   <Box as="td" id={String(index + 1)} onClick={onDelete} sx={styles}>
     <span>{index + 1}</span>
     <IconButton
diff --git a/src/components/table/index.tsx b/src/components/table/index.tsx
index b5c2847d5..3ec1af633 100644
--- a/src/components/table/index.tsx
+++ b/src/components/table/index.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Box, BoxProps } from 'rebass';
 import { TableCell, TableHeader } from './type';
 
@@ -8,9 +7,7 @@ export interface TableProps extends Omit<BoxProps, 'css'> {
   columnHeaders: Array<TableHeader>;
 }
 
-const Table: FC<TableProps> = ({
-  variant = 'read-only',
-  values,
-  ...props
-}: TableProps) => <Box {...props} tx="table" variant={variant} />;
+const Table = ({ variant = 'read-only', values, ...props }: TableProps) => (
+  <Box {...props} tx="table" variant={variant} />
+);
 export default Table;
diff --git a/src/components/table/read-only/index.tsx b/src/components/table/read-only/index.tsx
index 480aea31e..28f657fdb 100644
--- a/src/components/table/read-only/index.tsx
+++ b/src/components/table/read-only/index.tsx
@@ -1,17 +1,13 @@
-import React, { FC, useState } from 'react';
+import { useState } from 'react';
 import { Box } from 'rebass';
 
-// Components
 import { TableProps } from '../index';
-
-// Styles
 import {
   containerStyles,
   tableStyles,
   theadStyles,
   trowStyles,
 } from '../table.styles';
-
 import Thead from '../thead';
 import { TableCell, TableHeader } from '../type';
 import Label from '../../label';
@@ -26,9 +22,7 @@ export interface ReadOnlyTableProps extends Omit<TableProps, 'value'> {
   }>;
 }
 
-/* eslint-disable arrow-body-style */
-
-const ReadOnlyTable: FC<ReadOnlyTableProps> = ({
+const ReadOnlyTable = ({
   initialStaticColumn,
   values,
   columnHeaders,
diff --git a/src/components/table/stories.tsx b/src/components/table/stories.tsx
index 0d0a10208..ad8a8d0eb 100644
--- a/src/components/table/stories.tsx
+++ b/src/components/table/stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import { Box } from 'rebass';
diff --git a/src/components/table/thead.tsx b/src/components/table/thead.tsx
index 414443e31..721aac2fe 100644
--- a/src/components/table/thead.tsx
+++ b/src/components/table/thead.tsx
@@ -1,4 +1,4 @@
-import React, { FC, memo, useCallback, useRef } from 'react';
+import { memo, useCallback, useRef } from 'react';
 import { Box } from 'rebass';
 import useDropdown from '../../utils/useDropdown';
 import useOnClickOutside from '../../utils/useClickOutside';
@@ -16,12 +16,7 @@ export interface TheadProps {
   }>;
 }
 
-const Thead: FC<TheadProps> = ({
-  column,
-  className,
-  headerRender,
-  actions,
-}: TheadProps) => {
+const Thead = ({ column, className, headerRender, actions }: TheadProps) => {
   const containerRef = useRef(null);
   const [isOpen, handleToggle, handleClickOutside] = useDropdown();
   useOnClickOutside<HTMLDivElement>(handleClickOutside, [containerRef]);
diff --git a/src/components/table/type.ts b/src/components/table/type.ts
index 6b97eb84e..0041d4700 100644
--- a/src/components/table/type.ts
+++ b/src/components/table/type.ts
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export type TableCellType = string | string[] | boolean;
 
 export interface TableCell {
diff --git a/src/components/text-value-badge/TextValueBadge.tsx b/src/components/text-value-badge/TextValueBadge.tsx
index 4dae98167..f75fc4283 100644
--- a/src/components/text-value-badge/TextValueBadge.tsx
+++ b/src/components/text-value-badge/TextValueBadge.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box, BoxProps } from 'rebass';
 
 import Value from '../typography/value';
diff --git a/src/components/text-value-badge/stories.tsx b/src/components/text-value-badge/stories.tsx
index c249abdbf..827010888 100644
--- a/src/components/text-value-badge/stories.tsx
+++ b/src/components/text-value-badge/stories.tsx
@@ -1,5 +1,4 @@
 import { StoryObj } from '@storybook/react';
-import React from 'react';
 import { TextValueBadge } from './TextValueBadge';
 
 export default {
diff --git a/src/components/toggle-button/index.tsx b/src/components/toggle-button/index.tsx
index 9143a1d26..1dff73fe0 100644
--- a/src/components/toggle-button/index.tsx
+++ b/src/components/toggle-button/index.tsx
@@ -1,11 +1,8 @@
 import { Flex } from 'rebass';
-import React, { FC } from 'react';
 import { CheckboxProps as RebassCheckboxProps } from '@rebass/forms';
 import * as R from 'ramda';
 
-// Components
 import Labeling from '../typography/labeling';
-// Styles
 import styles from './toggle-button.styles';
 
 export interface ToggleButtonProps extends Omit<RebassCheckboxProps, 'css'> {
@@ -13,7 +10,7 @@ export interface ToggleButtonProps extends Omit<RebassCheckboxProps, 'css'> {
   variant?: 'primary' | 'white';
 }
 
-const ToggleButton: FC<ToggleButtonProps> = ({
+const ToggleButton = ({
   name,
   id,
   disabled,
diff --git a/src/components/toggle-button/stories.tsx b/src/components/toggle-button/stories.tsx
index 09e845791..e008a131e 100644
--- a/src/components/toggle-button/stories.tsx
+++ b/src/components/toggle-button/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import ToggleButton from './index';
 
diff --git a/src/components/tooltip/index.tsx b/src/components/tooltip/index.tsx
index babc6ebb4..e6201d44d 100644
--- a/src/components/tooltip/index.tsx
+++ b/src/components/tooltip/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Tooltip as ChakraTooltip,
   PlacementWithLogical,
diff --git a/src/components/tooltip/stories.tsx b/src/components/tooltip/stories.tsx
index 16d28596e..db29c116f 100644
--- a/src/components/tooltip/stories.tsx
+++ b/src/components/tooltip/stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { Button } from '../button';
 import Tooltip from './index';
diff --git a/src/components/typography/hoverable.tsx b/src/components/typography/hoverable.tsx
index f463c3797..021022897 100644
--- a/src/components/typography/hoverable.tsx
+++ b/src/components/typography/hoverable.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { Text, TextProps, LinkProps, Link as RebassLink } from 'rebass';
 
@@ -13,15 +12,13 @@ const styles = {
   transition: 'all .4s',
 };
 
-export const HoverableText: FC<HoverableTextProps> = (
-  props: HoverableTextProps,
-) => {
+export const HoverableText = (props: HoverableTextProps) => {
   let { sx } = { ...props };
   sx = { ...sx, ...styles };
   return <Text {...props} variant="title" sx={sx} />;
 };
 
-export const HoverableLink: FC<HoverableLinkProps> = ({
+export const HoverableLink = ({
   href,
   target,
   ...props
diff --git a/src/components/typography/input-validation/input-validation.tsx b/src/components/typography/input-validation/input-validation.tsx
index db229cbbe..9905d02d2 100644
--- a/src/components/typography/input-validation/input-validation.tsx
+++ b/src/components/typography/input-validation/input-validation.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Flex, Text, TextProps } from 'rebass';
 import { getIcon } from './utils';
 
@@ -6,7 +5,7 @@ export interface InputValidationProps extends Omit<TextProps, 'css'> {
   intent?: 'success' | 'fail' | 'warning' | 'neutral';
 }
 
-const InputValidation: FC<InputValidationProps> = ({
+const InputValidation = ({
   intent = 'neutral',
   ...props
 }: InputValidationProps) => {
diff --git a/src/components/typography/input-validation/utils.tsx b/src/components/typography/input-validation/utils.tsx
index 3ff43f9eb..8727a8d24 100644
--- a/src/components/typography/input-validation/utils.tsx
+++ b/src/components/typography/input-validation/utils.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { GetIcon, IconName } from '../../icon';
 
 const icons: Record<string, React.ReactElement> = {
diff --git a/src/components/typography/labeling.tsx b/src/components/typography/labeling.tsx
index 0cd476465..9c06d4cb2 100644
--- a/src/components/typography/labeling.tsx
+++ b/src/components/typography/labeling.tsx
@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Text, TextProps } from 'rebass';
 
 export interface LabelingProps extends Omit<TextProps, 'css'> {
@@ -6,13 +5,7 @@ export interface LabelingProps extends Omit<TextProps, 'css'> {
   gray?: boolean;
 }
 
-const Labeling: FC<LabelingProps> = ({
-  children,
-  bold,
-  gray,
-  sx,
-  ...props
-}: LabelingProps) => (
+const Labeling = ({ children, bold, gray, sx, ...props }: LabelingProps) => (
   <Text
     variant={`labeling${gray ? 'Gray' : ''}`}
     fontWeight={bold ? 'label' : undefined}
diff --git a/src/components/typography/microlabeling.tsx b/src/components/typography/microlabeling.tsx
index 1896c4aed..75a0fdbcc 100644
--- a/src/components/typography/microlabeling.tsx
+++ b/src/components/typography/microlabeling.tsx
@@ -1,15 +1,10 @@
-import React, { FC } from 'react';
 import { Text, TextProps } from 'rebass';
 
 export interface MicrolabelingProps extends Omit<TextProps, 'css'> {
   gray?: boolean;
 }
 
-const Microlabeling: FC<MicrolabelingProps> = ({
-  gray,
-  sx,
-  ...props
-}: MicrolabelingProps) => (
+const Microlabeling = ({ gray, sx, ...props }: MicrolabelingProps) => (
   <Text
     {...props}
     as="h6"
diff --git a/src/components/typography/subtitle.tsx b/src/components/typography/subtitle.tsx
index 98d5f0720..fb8ced931 100644
--- a/src/components/typography/subtitle.tsx
+++ b/src/components/typography/subtitle.tsx
@@ -1,9 +1,8 @@
-import React, { FC } from 'react';
 import { Text, TextProps } from 'rebass';
 
 export interface SubtitleProps extends Omit<TextProps, 'css'> {}
 
-const Subtitle: FC<SubtitleProps> = (props: SubtitleProps) => (
+const Subtitle = (props: SubtitleProps) => (
   <Text {...props} as="h2" variant="subtitle" />
 );
 
diff --git a/src/components/typography/text.tsx b/src/components/typography/text.tsx
index 0fdc2f82c..5e7192aa9 100644
--- a/src/components/typography/text.tsx
+++ b/src/components/typography/text.tsx
@@ -1,9 +1,8 @@
-import React, { FC } from 'react';
 import { TextProps as RebassTextProps, Text as RebassText } from 'rebass';
 
 export interface TextProps extends Omit<RebassTextProps, 'css'> {}
 
-const Text: FC<TextProps> = ({ ...props }: TextProps) => (
+const Text = ({ ...props }: TextProps) => (
   <RebassText fontFamily="Inter" {...props} as="p" variant="text" />
 );
 
diff --git a/src/components/typography/title.tsx b/src/components/typography/title.tsx
index e9adbb43a..3c3779267 100644
--- a/src/components/typography/title.tsx
+++ b/src/components/typography/title.tsx
@@ -1,11 +1,10 @@
-import React, { FC } from 'react';
 import { Text, TextProps } from 'rebass';
 
 export interface TitleProps extends Omit<TextProps, 'css'> {
   uppercase?: boolean;
 }
 
-const Title: FC<TitleProps> = ({ uppercase = false, ...props }: TitleProps) => (
+const Title = ({ uppercase = false, ...props }: TitleProps) => (
   <Text
     {...props}
     as="h1"
diff --git a/src/components/typography/typography.stories.tsx b/src/components/typography/typography.stories.tsx
index ae22055ee..82dbcacb9 100644
--- a/src/components/typography/typography.stories.tsx
+++ b/src/components/typography/typography.stories.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { Box } from 'rebass';
 
 import Value from './value';
@@ -14,7 +13,7 @@ export default {
   title: 'Typography',
 } as Meta;
 
-const Template: Story = () => (
+const Template = () => (
   <Box
     sx={{
       display: 'flex',
@@ -36,7 +35,7 @@ const Template: Story = () => (
   </Box>
 );
 
-export const DefaultInfo: Story = () => (
+export const DefaultInfo = () => (
   <Box
     sx={{
       display: 'flex',
diff --git a/src/components/typography/value.tsx b/src/components/typography/value.tsx
index 75ef74a80..2e32da808 100644
--- a/src/components/typography/value.tsx
+++ b/src/components/typography/value.tsx
@@ -1,11 +1,10 @@
-import React, { FC } from 'react';
 import { Text, TextProps } from 'rebass';
 
 export interface ValueProps extends Omit<TextProps, 'css'> {
   primary?: boolean;
 }
 
-const Value: FC<ValueProps> = ({ primary, sx, ...props }: ValueProps) => (
+const Value = ({ primary, sx, ...props }: ValueProps) => (
   <Text
     fontFamily="Inter"
     sx={{
diff --git a/src/components/user/User.tsx b/src/components/user/User.tsx
index bbb58ff65..972ada943 100644
--- a/src/components/user/User.tsx
+++ b/src/components/user/User.tsx
@@ -1,5 +1,4 @@
 import * as R from 'ramda';
-import React from 'react';
 import { Flex } from 'rebass';
 import Label from '../label';
 import Tooltip from '../tooltip';
diff --git a/src/components/user/stories.tsx b/src/components/user/stories.tsx
index eba73c384..e12448a26 100644
--- a/src/components/user/stories.tsx
+++ b/src/components/user/stories.tsx
@@ -1,8 +1,7 @@
-import { Story } from '@storybook/react';
-import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
 import { Flex } from 'rebass';
 import Labeling from '../typography/labeling';
-import { User, UserProps } from './index';
+import { User } from './index';
 
 export default {
   title: 'User',
@@ -11,15 +10,18 @@ export default {
     firstName: 'Martin',
     lastName: 'Heidegger',
   },
-};
-
-const Template: Story<UserProps> = (props) => <User {...props} />;
+} as Meta<typeof User>;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof User>;
+export const Default: Story = {
+  render: (props) => <User {...props} />,
+};
 
-export const WithSecondaryText = Template.bind({});
-WithSecondaryText.args = {
-  secondaryText: 'you can add some stuff here',
+export const WithSecondaryText: Story = {
+  ...Default,
+  args: {
+    secondaryText: 'you can add some stuff here',
+  },
 };
 
 export const WithTitle = () => (
diff --git a/src/index.ts b/src/index.ts
index 9078ff51c..d20963c65 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -39,8 +39,6 @@ import Select from './components/select';
 import Select2 from './components/select2';
 import EditableSelect from './components/editableSelect';
 import ToggleButton from './components/toggle-button';
-import NotificationsContainer from './components/notifications/index';
-import NotificationsManager from './components/notifications/notifications-manager';
 import DatePicker from './components/datepicker';
 import Divider from './components/divider';
 import Symbol from './components/symbol';
@@ -196,9 +194,6 @@ export {
   NavigationProvider,
   NavigationContext,
   FormTabs,
-  // Notifications
-  NotificationsContainer,
-  NotificationsManager,
   // Hooks
   useDropdown,
   useNavigation,
diff --git a/src/sources/basketSvgs.tsx b/src/sources/basketSvgs.tsx
index f1352641f..f82309e4a 100644
--- a/src/sources/basketSvgs.tsx
+++ b/src/sources/basketSvgs.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 const inBasket = (
   <svg
     width="20"
diff --git a/src/theme-chakra/ChakraThemeProvider.tsx b/src/theme-chakra/ChakraThemeProvider.tsx
index 827af34b3..15cb1e823 100644
--- a/src/theme-chakra/ChakraThemeProvider.tsx
+++ b/src/theme-chakra/ChakraThemeProvider.tsx
@@ -1,5 +1,5 @@
 import { ChakraProvider, createStandaloneToast } from '@chakra-ui/react';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { chakraTheme as theme } from './theme';
 
 const { ToastContainer, toast } = createStandaloneToast({
diff --git a/src/theme/ThemeProvider.tsx b/src/theme/ThemeProvider.tsx
index 317048f5d..0d5b20a3c 100644
--- a/src/theme/ThemeProvider.tsx
+++ b/src/theme/ThemeProvider.tsx
@@ -1,7 +1,7 @@
 import { useColorMode } from '@chakra-ui/react';
 import { css, Global } from '@emotion/core';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
-import React, { FC, useEffect } from 'react';
+import { useEffect } from 'react';
 
 import defaultTheme, { darkTheme } from './theme';
 
@@ -12,7 +12,7 @@ export interface ThemeProviderProps {
   colorMode?: ThemeVariant;
 }
 
-const ThemeProvider: FC<ThemeProviderProps> = ({
+const ThemeProvider = ({
   children,
   colorMode: colorModeFromProps,
 }: ThemeProviderProps) => {
@@ -25,7 +25,7 @@ const ThemeProvider: FC<ThemeProviderProps> = ({
   const colorModeToUse = colorModeFromProps ?? colorMode; // the outer one overrides inner state
 
   return (
-    <React.Fragment>
+    <>
       <Global
         styles={css`
           @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap');
@@ -37,7 +37,7 @@ const ThemeProvider: FC<ThemeProviderProps> = ({
       >
         {children}
       </EmotionThemeProvider>
-    </React.Fragment>
+    </>
   );
 };
 
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 5296b9e01..d061183cc 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const copyToClipboard = async (content: string): Promise<boolean> => {
   return navigator.clipboard
     .writeText(content)
diff --git a/tsconfig.json b/tsconfig.json
index 101ed6161..1ef2ec666 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
     "module": "esnext",
     "lib": ["dom", "esnext"],
     "moduleResolution": "node",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "sourceMap": true,
     "declaration": true,
     "esModuleInterop": true,