diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 92948c1f..c0b2ce39 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,43 +2,43 @@ name: CI
 
 on:
   push:
-    branches: ["main"]
+    branches: ['main']
   pull_request:
     types: [opened, synchronize]
 
 jobs:
   build:
-      name: Build and Test
-      timeout-minutes: 15
-      runs-on: ${{ matrix.os }}
+    name: Build and Test
+    timeout-minutes: 15
+    runs-on: ${{ matrix.os }}
 
-      strategy:
-        matrix:
-          os: [ubuntu-latest, macos-latest]
+    strategy:
+      matrix:
+        os: [ubuntu-latest, macos-latest]
 
-      steps:
-        - name: Check out code
-          uses: actions/checkout@v3
-          with:
-            fetch-depth: 2
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
 
-        - name: Setup Node.js ${{ matrix.node-version }}
-          uses: actions/setup-node@v3
-          with:
-            node-version: 16
-            cache: 'yarn'
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'yarn'
 
-        - name: Install dependencies
-          run: yarn --frozen-lockfile
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
 
-        - name: Build
-          run: yarn build
+      - name: Build
+        run: yarn build
 
-        - name: Typecheck
-          run: yarn typecheck
+      - name: Typecheck
+        run: yarn typecheck
 
-        - name: Lint
-          run: yarn lint && yarn format:check
+      - name: Lint
+        run: yarn lint && yarn format:check
 
-        - name: Test
-          run: yarn test
+      - name: Test
+        run: yarn test
diff --git a/apps/mobile/screens/channel.tsx b/apps/mobile/screens/channel.tsx
index a2cc5e41..a383df38 100644
--- a/apps/mobile/screens/channel.tsx
+++ b/apps/mobile/screens/channel.tsx
@@ -1,6 +1,3 @@
-// eslint-disable-next-line eslint-comments/disable-enable-pair
-/* eslint-disable import/namespace */
-
 import { useRef } from 'react'
 
 import { Composer, Messages } from '@status-im/components'
@@ -25,7 +22,8 @@ export const ChannelScreen = ({ route }: ChannelScreenProps) => {
   const theme = useTheme()
 
   // We need to get the channel name from the route params
-  const channelName = route.params.channelId
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const _channelName = route.params.channelId
   const scrollRef = useRef(null)
 
   return (
@@ -47,9 +45,7 @@ export const ChannelScreen = ({ route }: ChannelScreenProps) => {
 
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <Stack>
-          <Composer
-            pb={insets.bottom + Platform.select({ android: 12, ios: 0 })}
-          />
+          <Composer />
         </Stack>
       </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index e52e12b6..95b8ca8f 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -4,7 +4,7 @@ import '@tamagui/core/reset.css'
 import '@tamagui/font-inter/css/400.css'
 import '@tamagui/font-inter/css/700.css'
 
-import React from 'react'
+import { StrictMode } from 'react'
 
 import { Provider } from '@status-im/components'
 import { createRoot } from 'react-dom/client'
@@ -14,9 +14,9 @@ import App from './app'
 const root = document.getElementById('root') as HTMLElement
 
 createRoot(root).render(
-  <React.StrictMode>
+  <StrictMode>
     <Provider>
       <App />
     </Provider>
-  </React.StrictMode>
+  </StrictMode>
 )
diff --git a/packages/components/.storybook/preview.tsx b/packages/components/.storybook/preview.tsx
index 8e419500..0d1d407e 100644
--- a/packages/components/.storybook/preview.tsx
+++ b/packages/components/.storybook/preview.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Provider } from '../src'
 import { Parameters, Decorator } from '@storybook/react'
 
diff --git a/packages/components/src/accordion/accordion.tsx b/packages/components/src/accordion/accordion.tsx
index e9a2a0fd..1517e21d 100644
--- a/packages/components/src/accordion/accordion.tsx
+++ b/packages/components/src/accordion/accordion.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { Fragment, useState } from 'react'
 
 import { ChevronRightIcon } from '@status-im/icons/20'
 import { Stack } from '@tamagui/core'
@@ -104,9 +104,7 @@ const Accordion = ({
             </AnimatePresence>
           </Stack>
           <AnimatePresence>
-            {isExpanded && (
-              <React.Fragment key={title}>{children}</React.Fragment>
-            )}
+            {isExpanded && <Fragment key={title}>{children}</Fragment>}
           </AnimatePresence>
         </Stack>
       </Stack>
diff --git a/packages/components/src/author/author.tsx b/packages/components/src/author/author.tsx
index 8ea8f65d..280abf8c 100644
--- a/packages/components/src/author/author.tsx
+++ b/packages/components/src/author/author.tsx
@@ -17,7 +17,7 @@ interface Props {
 }
 
 const Author = (props: Props) => {
-  const { name, status, nickname, address, time } = props
+  const { name, status, address, time } = props
 
   return (
     <XStack space={8} alignItems="center">
diff --git a/packages/components/src/avatar/avatar.tsx b/packages/components/src/avatar/avatar.tsx
index 4732e935..87fc2f33 100644
--- a/packages/components/src/avatar/avatar.tsx
+++ b/packages/components/src/avatar/avatar.tsx
@@ -163,7 +163,7 @@ const Avatar = (props: Props) => {
 
   useEffect(() => {
     setStatus('idle')
-  }, [JSON.stringify(src)])
+  }, [src])
 
   return (
     <Base size={size} shape={shape} withOutline={withOutline}>
diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx
index 9601118e..a84a7442 100644
--- a/packages/components/src/button/button.tsx
+++ b/packages/components/src/button/button.tsx
@@ -8,6 +8,7 @@ import type { GetProps } from '@tamagui/core'
 import type { Ref } from 'react'
 
 const Base = styled(Stack, {
+  tag: 'button',
   name: 'Button',
   accessibilityRole: 'button',
 
diff --git a/packages/components/src/composer/composer.tsx b/packages/components/src/composer/composer.tsx
index 4d35e72b..c06b7593 100644
--- a/packages/components/src/composer/composer.tsx
+++ b/packages/components/src/composer/composer.tsx
@@ -20,9 +20,10 @@ import { useChatDispatch, useChatState } from '../provider'
 import { Reply } from '../reply'
 
 interface Props {
-  blur: boolean
+  blur?: boolean
 }
 
+// pb={insets.bottom + Platform.select({ android: 12, ios: 0 })}
 const Composer = (props: Props) => {
   const { blur } = props
 
diff --git a/packages/components/src/image/image.stories.tsx b/packages/components/src/image/image.stories.tsx
index 5c6d6610..a9ff10b6 100644
--- a/packages/components/src/image/image.stories.tsx
+++ b/packages/components/src/image/image.stories.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Stack } from '@tamagui/core'
 
 import { Image } from './image'
diff --git a/packages/components/src/messages/message.tsx b/packages/components/src/messages/message.tsx
index 06f0efdb..3a5dfb03 100644
--- a/packages/components/src/messages/message.tsx
+++ b/packages/components/src/messages/message.tsx
@@ -1,7 +1,6 @@
-import React from 'react'
-
 import { PinIcon } from '@status-im/icons/16'
-import { Stack, Unspaced, XStack, YStack } from 'tamagui'
+import { View } from 'react-native'
+import { Stack, styled, Unspaced, XStack, YStack } from 'tamagui'
 
 import { Author } from '../author/author'
 import { Avatar } from '../avatar'
@@ -22,6 +21,27 @@ interface Props {
   pinned?: boolean
 }
 
+const Wrapper = styled(View, {
+  position: 'relative',
+  paddingHorizontal: 8,
+  paddingVertical: 8,
+  borderRadius: 16,
+  alignItems: 'flex-start',
+
+  variants: {
+    active: {
+      true: {
+        backgroundColor: '$neutral-5',
+      },
+    },
+    pinned: {
+      true: {
+        backgroundColor: '$blue-50-opa-5',
+      },
+    },
+  } as const,
+})
+
 const Message = (props: Props) => {
   const { text, images, reactions, reply, pinned } = props
 
@@ -34,17 +54,10 @@ const Message = (props: Props) => {
   const dispatch = useChatDispatch()
 
   return (
-    <YStack
-      position="relative"
-      alignItems="flex-start"
-      paddingHorizontal={8}
-      paddingVertical={8}
-      borderRadius={16}
-      backgroundColor={
-        active ? '$neutral-5' : pinned ? '$blue-50-opa-5' : undefined
-      }
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
+    <Wrapper
+      active={active}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
     >
       {active && (
         <Unspaced>
@@ -122,7 +135,7 @@ const Message = (props: Props) => {
           )}
         </YStack>
       </XStack>
-    </YStack>
+    </Wrapper>
   )
 }
 
diff --git a/packages/components/src/tamagui.config.ts b/packages/components/src/tamagui.config.ts
index b3a8a066..8c6d5c9d 100644
--- a/packages/components/src/tamagui.config.ts
+++ b/packages/components/src/tamagui.config.ts
@@ -20,12 +20,12 @@ const interFont = createInterFont({
     7: 13,
     8: 15,
     9: 19,
-    10: 27
+    10: 27,
   },
   weight: {
     6: '400',
     7: '500',
-    8: '600'
+    8: '600',
   },
   letterSpacing: {
     5: 2,
@@ -36,19 +36,19 @@ const interFont = createInterFont({
     10: -3,
     12: -4,
     14: -5,
-    15: -6
+    15: -6,
   },
   face: {
     400: { normal: 'Inter' },
     500: { normal: 'Inter' },
-    600: { normal: 'InterBold' }
-  }
+    600: { normal: 'InterBold' },
+  },
 })
 
 const monoFont = createFont({
   family: 'UbuntuMono',
   weight: {
-    1: '500'
+    1: '500',
   },
   letterSpacing: {
     5: 2,
@@ -59,7 +59,7 @@ const monoFont = createFont({
     10: -3,
     12: -4,
     14: -5,
-    15: -6
+    15: -6,
   },
   size: {
     1: 11,
@@ -77,25 +77,25 @@ const monoFont = createFont({
     13: 72,
     14: 92,
     15: 114,
-    16: 124
+    16: 124,
   },
   lineHeight: {
     1: 14,
-    2: 15
-  }
+    2: 15,
+  },
 })
 
 export const config = createTamagui({
   fonts: {
     inter: interFont,
-    mono: monoFont
+    mono: monoFont,
   },
   themes,
   tokens: {
     colors: {
-      ...tokens.color
+      ...tokens.color,
     },
-    ...tokens
+    ...tokens,
   },
   shouldAddPrefersColorThemes: true,
   media: createMedia({
@@ -112,8 +112,8 @@ export const config = createTamagui({
     short: { maxHeight: 820 },
     tall: { minHeight: 820 },
     hoverNone: { hover: 'none' },
-    pointerCoarse: { pointer: 'coarse' }
+    pointerCoarse: { pointer: 'coarse' },
   }),
   shorthands,
-  animations
+  animations,
 })
diff --git a/packages/status-react/src/components/chat-menu/edit-group-chat-dialog.tsx b/packages/status-react/src/components/chat-menu/edit-group-chat-dialog.tsx
index b5ac7df7..12dffcc0 100644
--- a/packages/status-react/src/components/chat-menu/edit-group-chat-dialog.tsx
+++ b/packages/status-react/src/components/chat-menu/edit-group-chat-dialog.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Avatar, Dialog, TextInput } from '../../system'
 
 export const EditGroupChatDialog = () => {
diff --git a/packages/status-react/src/components/chat-menu/index.tsx b/packages/status-react/src/components/chat-menu/index.tsx
index b5f0aa26..3a8c44e5 100644
--- a/packages/status-react/src/components/chat-menu/index.tsx
+++ b/packages/status-react/src/components/chat-menu/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { BellIcon } from '../../icons/bell-icon'
 import { ContextMenu, DropdownMenu } from '../../system'
 // import { useAlertDialog } from '../../system/dialog/alert-dialog'
diff --git a/packages/status-react/src/components/create-profile-dialog/index.tsx b/packages/status-react/src/components/create-profile-dialog/index.tsx
index b863bab2..ef5cf186 100644
--- a/packages/status-react/src/components/create-profile-dialog/index.tsx
+++ b/packages/status-react/src/components/create-profile-dialog/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import {
   Avatar,
   Dialog,
diff --git a/packages/status-react/src/components/failed/index.tsx b/packages/status-react/src/components/failed/index.tsx
index 6892cef2..0a4936f4 100644
--- a/packages/status-react/src/components/failed/index.tsx
+++ b/packages/status-react/src/components/failed/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Text } from '../../system'
 
 export const Failed = () => {
diff --git a/packages/status-react/src/components/loading/index.tsx b/packages/status-react/src/components/loading/index.tsx
index 93fb2f0e..0da226bc 100644
--- a/packages/status-react/src/components/loading/index.tsx
+++ b/packages/status-react/src/components/loading/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import ContentLoader from 'react-content-loader'
 
 import { styled } from '../../styles/config'
diff --git a/packages/status-react/src/components/main-sidebar/components/chats/chat-category.tsx b/packages/status-react/src/components/main-sidebar/components/chats/chat-category.tsx
index 784a30f8..fbeae1d6 100644
--- a/packages/status-react/src/components/main-sidebar/components/chats/chat-category.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/chats/chat-category.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import * as Collapsible from '@radix-ui/react-collapsible'
 
diff --git a/packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx b/packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx
index e582e8e3..e202daaf 100644
--- a/packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import { NavLink } from 'react-router-dom'
 
diff --git a/packages/status-react/src/components/main-sidebar/components/chats/index.tsx b/packages/status-react/src/components/main-sidebar/components/chats/index.tsx
index 265a9ad2..90b26eb9 100644
--- a/packages/status-react/src/components/main-sidebar/components/chats/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/chats/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useSortedChats } from '../../../../protocol'
 import { Box } from '../../../../system'
 import { ChatCategory } from './chat-category'
diff --git a/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx b/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx
index f8c13530..688c0944 100644
--- a/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useProtocol } from '../../../../protocol'
 import { Button, CopyInput, Dialog, Flex, Grid, Text } from '../../../../system'
 
diff --git a/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx b/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx
index 0343c19f..04353c04 100644
--- a/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useProtocol } from '../../../../protocol'
 import { styled } from '../../../../styles/config'
 import { Avatar, DialogTrigger, Text } from '../../../../system'
diff --git a/packages/status-react/src/components/main-sidebar/components/get-started/connect-wallet-dialog.tsx b/packages/status-react/src/components/main-sidebar/components/get-started/connect-wallet-dialog.tsx
index 18d5014f..8e152cdf 100644
--- a/packages/status-react/src/components/main-sidebar/components/get-started/connect-wallet-dialog.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/get-started/connect-wallet-dialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { styled } from '../../../../styles/config'
 import { Dialog, Grid, Text } from '../../../../system'
diff --git a/packages/status-react/src/components/main-sidebar/components/get-started/index.tsx b/packages/status-react/src/components/main-sidebar/components/get-started/index.tsx
index f162ed7e..ddd109ea 100644
--- a/packages/status-react/src/components/main-sidebar/components/get-started/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/get-started/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useAccount } from '../../../../protocol'
 import { Button, Flex } from '../../../../system'
 import { Grid } from '../../../../system/grid'
diff --git a/packages/status-react/src/components/main-sidebar/components/get-started/sync-status-profile-dialog.tsx b/packages/status-react/src/components/main-sidebar/components/get-started/sync-status-profile-dialog.tsx
index bb605944..49655e2a 100644
--- a/packages/status-react/src/components/main-sidebar/components/get-started/sync-status-profile-dialog.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/get-started/sync-status-profile-dialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { QRCodeSVG } from 'qrcode.react'
 
diff --git a/packages/status-react/src/components/main-sidebar/components/get-started/throwaway-profile-found-dialog.tsx b/packages/status-react/src/components/main-sidebar/components/get-started/throwaway-profile-found-dialog.tsx
index 8a687893..96ed241a 100644
--- a/packages/status-react/src/components/main-sidebar/components/get-started/throwaway-profile-found-dialog.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/get-started/throwaway-profile-found-dialog.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import {
   Avatar,
   Dialog,
diff --git a/packages/status-react/src/components/main-sidebar/index.tsx b/packages/status-react/src/components/main-sidebar/index.tsx
index 4b5cf560..3feffeb7 100644
--- a/packages/status-react/src/components/main-sidebar/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useAppState } from '../../contexts/app-context'
 import { useAccount } from '../../protocol'
 import { styled } from '../../styles/config'
diff --git a/packages/status-react/src/components/member-sidebar/disconnect-dialog.tsx b/packages/status-react/src/components/member-sidebar/disconnect-dialog.tsx
index 39e8edf5..3db23fcc 100644
--- a/packages/status-react/src/components/member-sidebar/disconnect-dialog.tsx
+++ b/packages/status-react/src/components/member-sidebar/disconnect-dialog.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useAccount } from '../../protocol'
 import {
   Avatar,
diff --git a/packages/status-react/src/components/member-sidebar/index.tsx b/packages/status-react/src/components/member-sidebar/index.tsx
index 9939e9d3..28416e00 100644
--- a/packages/status-react/src/components/member-sidebar/index.tsx
+++ b/packages/status-react/src/components/member-sidebar/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useAccount, useMembers } from '../../protocol'
 import { styled } from '../../styles/config'
 import { Grid, Heading } from '../../system'
diff --git a/packages/status-react/src/components/member-sidebar/member-group.tsx b/packages/status-react/src/components/member-sidebar/member-group.tsx
index 797fc269..58c3f1be 100644
--- a/packages/status-react/src/components/member-sidebar/member-group.tsx
+++ b/packages/status-react/src/components/member-sidebar/member-group.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-
 import { Text } from '../../system'
 
+import type React from 'react'
+
 interface Props {
   label: string
   children: React.ReactElement[] | React.ReactElement
diff --git a/packages/status-react/src/components/member-sidebar/member-item.tsx b/packages/status-react/src/components/member-sidebar/member-item.tsx
index b3830848..21e91afd 100644
--- a/packages/status-react/src/components/member-sidebar/member-item.tsx
+++ b/packages/status-react/src/components/member-sidebar/member-item.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Avatar, EthAddress, Flex, Text } from '../../system'
 
 import type { Member } from '../../protocol'
diff --git a/packages/status-react/src/components/member-sidebar/user-item.tsx b/packages/status-react/src/components/member-sidebar/user-item.tsx
index 2f91c979..a64361da 100644
--- a/packages/status-react/src/components/member-sidebar/user-item.tsx
+++ b/packages/status-react/src/components/member-sidebar/user-item.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { styled } from '../../styles/config'
 import { Avatar, DialogTrigger, EthAddress, Flex, Text } from '../../system'
 import { DisconnectDialog } from './disconnect-dialog'
diff --git a/packages/status-react/src/components/reaction-popover/index.tsx b/packages/status-react/src/components/reaction-popover/index.tsx
index 52af43b1..e7665b14 100644
--- a/packages/status-react/src/components/reaction-popover/index.tsx
+++ b/packages/status-react/src/components/reaction-popover/index.tsx
@@ -1,10 +1,9 @@
-import React from 'react'
-
 import { useAccount } from '../../protocol'
 import { styled } from '../../styles/config'
 import { Flex, Image, Popover, PopoverTrigger } from '../../system'
 
 import type { Reaction, Reactions } from '../../protocol'
+import type React from 'react'
 
 interface Props {
   children: React.ReactElement
diff --git a/packages/status-react/src/components/user-profile-dialog/index.tsx b/packages/status-react/src/components/user-profile-dialog/index.tsx
index 6544db4d..7de9cf1c 100644
--- a/packages/status-react/src/components/user-profile-dialog/index.tsx
+++ b/packages/status-react/src/components/user-profile-dialog/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Avatar, Dialog, EmojiHash, Heading, Text } from '../../system'
 
 import type { Member } from '../../protocol'
diff --git a/packages/status-react/src/components/welcome-dialog/index.tsx b/packages/status-react/src/components/welcome-dialog/index.tsx
index 7b8c7363..156ee978 100644
--- a/packages/status-react/src/components/welcome-dialog/index.tsx
+++ b/packages/status-react/src/components/welcome-dialog/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { useProtocol } from '../../protocol'
 import { Avatar, Checkbox, Dialog, Flex, Text } from '../../system'
diff --git a/packages/status-react/src/contexts/app-context.tsx b/packages/status-react/src/contexts/app-context.tsx
index c065c20e..edb66cc0 100644
--- a/packages/status-react/src/contexts/app-context.tsx
+++ b/packages/status-react/src/contexts/app-context.tsx
@@ -1,6 +1,7 @@
-import React, { createContext, useContext, useMemo, useReducer } from 'react'
+import { createContext, useContext, useMemo, useReducer } from 'react'
 
 import type { Config } from '../types/config'
+import type React from 'react'
 import type { Dispatch, Reducer } from 'react'
 
 type Context = {
diff --git a/packages/status-react/src/contexts/chat-context.tsx b/packages/status-react/src/contexts/chat-context.tsx
index 3e1e5baf..07063d43 100644
--- a/packages/status-react/src/contexts/chat-context.tsx
+++ b/packages/status-react/src/contexts/chat-context.tsx
@@ -1,6 +1,7 @@
-import React, { createContext, useContext, useMemo, useReducer } from 'react'
+import { createContext, useContext, useMemo, useReducer } from 'react'
 
 import type { Member, Message } from '../protocol'
+import type React from 'react'
 import type { Dispatch, Reducer } from 'react'
 
 type Context = {
diff --git a/packages/status-react/src/contexts/dialog-context.tsx b/packages/status-react/src/contexts/dialog-context.tsx
index f5247bec..3d7541c4 100644
--- a/packages/status-react/src/contexts/dialog-context.tsx
+++ b/packages/status-react/src/contexts/dialog-context.tsx
@@ -1,4 +1,6 @@
-import React, { cloneElement, createContext, useContext, useState } from 'react'
+import { cloneElement, createContext, useContext, useState } from 'react'
+
+import type React from 'react'
 
 const DialogContext = createContext<
   ((dialog: React.ReactElement) => void) | null
diff --git a/packages/status-react/src/icons/bell-icon.tsx b/packages/status-react/src/icons/bell-icon.tsx
index 57d2752e..819415fa 100644
--- a/packages/status-react/src/icons/bell-icon.tsx
+++ b/packages/status-react/src/icons/bell-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const BellIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/chevron-down-icon.tsx b/packages/status-react/src/icons/chevron-down-icon.tsx
index a01397c1..42950940 100644
--- a/packages/status-react/src/icons/chevron-down-icon.tsx
+++ b/packages/status-react/src/icons/chevron-down-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/chevron-right-icon.tsx b/packages/status-react/src/icons/chevron-right-icon.tsx
index 9094fede..ad865eb3 100644
--- a/packages/status-react/src/icons/chevron-right-icon.tsx
+++ b/packages/status-react/src/icons/chevron-right-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const ChevronRightIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/cross-icon.tsx b/packages/status-react/src/icons/cross-icon.tsx
index 7ddbd567..2ac605b0 100644
--- a/packages/status-react/src/icons/cross-icon.tsx
+++ b/packages/status-react/src/icons/cross-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const CrossIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/dots-icon.tsx b/packages/status-react/src/icons/dots-icon.tsx
index f50d8a7d..229a54b0 100644
--- a/packages/status-react/src/icons/dots-icon.tsx
+++ b/packages/status-react/src/icons/dots-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const DotsIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/double-tick-icon.tsx b/packages/status-react/src/icons/double-tick-icon.tsx
index 0725b63a..420d3043 100644
--- a/packages/status-react/src/icons/double-tick-icon.tsx
+++ b/packages/status-react/src/icons/double-tick-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const DoubleTickIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/edit-icon.tsx b/packages/status-react/src/icons/edit-icon.tsx
index 95a59f08..e50c07f5 100644
--- a/packages/status-react/src/icons/edit-icon.tsx
+++ b/packages/status-react/src/icons/edit-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const EditIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/emoji-icon.tsx b/packages/status-react/src/icons/emoji-icon.tsx
index e80c8f55..f3f27f5c 100644
--- a/packages/status-react/src/icons/emoji-icon.tsx
+++ b/packages/status-react/src/icons/emoji-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const EmojiIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/exit-icon.tsx b/packages/status-react/src/icons/exit-icon.tsx
index f3041f06..0667e403 100644
--- a/packages/status-react/src/icons/exit-icon.tsx
+++ b/packages/status-react/src/icons/exit-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const ExitIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/gif-icon.tsx b/packages/status-react/src/icons/gif-icon.tsx
index e4c942c3..820e379d 100644
--- a/packages/status-react/src/icons/gif-icon.tsx
+++ b/packages/status-react/src/icons/gif-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const GifIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/group-icon.tsx b/packages/status-react/src/icons/group-icon.tsx
index b780b4c7..d6b01249 100644
--- a/packages/status-react/src/icons/group-icon.tsx
+++ b/packages/status-react/src/icons/group-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const GroupIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/image-icon.tsx b/packages/status-react/src/icons/image-icon.tsx
index 143dc54a..a650b6f2 100644
--- a/packages/status-react/src/icons/image-icon.tsx
+++ b/packages/status-react/src/icons/image-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const ImageIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/pencil-icon.tsx b/packages/status-react/src/icons/pencil-icon.tsx
index 4bf16352..f1468467 100644
--- a/packages/status-react/src/icons/pencil-icon.tsx
+++ b/packages/status-react/src/icons/pencil-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const PencilIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/pin-icon.tsx b/packages/status-react/src/icons/pin-icon.tsx
index 3aab7865..d0a05b94 100644
--- a/packages/status-react/src/icons/pin-icon.tsx
+++ b/packages/status-react/src/icons/pin-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const PinIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/reaction-icon.tsx b/packages/status-react/src/icons/reaction-icon.tsx
index bdce9195..e4d3f672 100644
--- a/packages/status-react/src/icons/reaction-icon.tsx
+++ b/packages/status-react/src/icons/reaction-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const ReactionIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/reply-icon.tsx b/packages/status-react/src/icons/reply-icon.tsx
index 916b7808..79f13fc0 100644
--- a/packages/status-react/src/icons/reply-icon.tsx
+++ b/packages/status-react/src/icons/reply-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const ReplyIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/sticker-icon.tsx b/packages/status-react/src/icons/sticker-icon.tsx
index ffedcb75..d447a24c 100644
--- a/packages/status-react/src/icons/sticker-icon.tsx
+++ b/packages/status-react/src/icons/sticker-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const StickerIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/tiny-chevron-right-icon.tsx b/packages/status-react/src/icons/tiny-chevron-right-icon.tsx
index ccfe8e07..70bfee86 100644
--- a/packages/status-react/src/icons/tiny-chevron-right-icon.tsx
+++ b/packages/status-react/src/icons/tiny-chevron-right-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const TinyChevronRightIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/tiny-community-icon.tsx b/packages/status-react/src/icons/tiny-community-icon.tsx
index 9ebbcc95..e38a4d52 100644
--- a/packages/status-react/src/icons/tiny-community-icon.tsx
+++ b/packages/status-react/src/icons/tiny-community-icon.tsx
@@ -1,5 +1,5 @@
 // todo: add to /tiny folder
-import React from 'react'
+import type React from 'react'
 
 export const TinyCommunityIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/tiny-reply-icon.tsx b/packages/status-react/src/icons/tiny-reply-icon.tsx
index 600f64ec..ac0698c5 100644
--- a/packages/status-react/src/icons/tiny-reply-icon.tsx
+++ b/packages/status-react/src/icons/tiny-reply-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const TinyReplyIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/trash-icon.tsx b/packages/status-react/src/icons/trash-icon.tsx
index 3d86cd18..f052b4cc 100644
--- a/packages/status-react/src/icons/trash-icon.tsx
+++ b/packages/status-react/src/icons/trash-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/icons/unpin-icon.tsx b/packages/status-react/src/icons/unpin-icon.tsx
index 32cc4414..5cb8e6c7 100644
--- a/packages/status-react/src/icons/unpin-icon.tsx
+++ b/packages/status-react/src/icons/unpin-icon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 export const UnpinIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
diff --git a/packages/status-react/src/protocol/provider.tsx b/packages/status-react/src/protocol/provider.tsx
index b315059e..5cd884b8 100644
--- a/packages/status-react/src/protocol/provider.tsx
+++ b/packages/status-react/src/protocol/provider.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useReducer } from 'react'
+import { createContext, useEffect, useReducer } from 'react'
 
 import { createClient } from '@status-im/js'
 
@@ -6,6 +6,7 @@ import { Failed } from '../components/failed'
 import { Loading } from '../components/loading'
 
 import type { Account, Client, ClientOptions, Community } from '@status-im/js'
+import type React from 'react'
 
 export const Context = createContext<State | undefined>(undefined)
 
diff --git a/packages/status-react/src/routes/chat/components/chat-info/index.tsx b/packages/status-react/src/routes/chat/components/chat-info/index.tsx
index b2da60bc..30560b29 100644
--- a/packages/status-react/src/routes/chat/components/chat-info/index.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-info/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 // import { PinIcon } from '../../../../icons/pin-icon'
 import { Avatar, Flex, Text } from '../../../../system'
 
diff --git a/packages/status-react/src/routes/chat/components/chat-info/pinned-messages-dialog.tsx b/packages/status-react/src/routes/chat/components/chat-info/pinned-messages-dialog.tsx
index 637aff1a..c0d75fb8 100644
--- a/packages/status-react/src/routes/chat/components/chat-info/pinned-messages-dialog.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-info/pinned-messages-dialog.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Dialog } from '../../../../system'
 
 export const PinnedMessagesDialog = () => {
diff --git a/packages/status-react/src/routes/chat/components/chat-input/index.tsx b/packages/status-react/src/routes/chat/components/chat-input/index.tsx
index 30cff605..1f602d36 100644
--- a/packages/status-react/src/routes/chat/components/chat-input/index.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-input/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { useChatContext } from '../../../../contexts/chat-context'
 import { useAccount } from '../../../../protocol'
@@ -10,6 +10,8 @@ import { styled } from '../../../../styles/config'
 // import { Box, Flex, IconButton } from '../../../../system'
 import { InputReply } from './input-reply'
 
+import type React from 'react'
+
 interface Props {
   mode?: 'normal' | 'editing'
   value?: string
diff --git a/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx b/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx
index 05527264..8a1bb038 100644
--- a/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useChatContext } from '../../../../contexts/chat-context'
 import { CrossIcon } from '../../../../icons/cross-icon'
 import { MessageContentType } from '../../../../protocol'
diff --git a/packages/status-react/src/routes/chat/components/chat-message/actions.tsx b/packages/status-react/src/routes/chat/components/chat-message/actions.tsx
index 1a9e46df..1c265080 100644
--- a/packages/status-react/src/routes/chat/components/chat-message/actions.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-message/actions.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ReactionPopover } from '../../../../components/reaction-popover'
 import { PencilIcon } from '../../../../icons/pencil-icon'
 // import { PinIcon } from '../../../../icons/pin-icon'
diff --git a/packages/status-react/src/routes/chat/components/chat-message/index.tsx b/packages/status-react/src/routes/chat/components/chat-message/index.tsx
index 7ccc9df5..2a5ad3e6 100644
--- a/packages/status-react/src/routes/chat/components/chat-message/index.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-message/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { useMatch } from 'react-router-dom'
 
diff --git a/packages/status-react/src/routes/chat/components/chat-message/message-reply.tsx b/packages/status-react/src/routes/chat/components/chat-message/message-reply.tsx
index dfcb4171..4b7414f1 100644
--- a/packages/status-react/src/routes/chat/components/chat-message/message-reply.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-message/message-reply.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { MessageContentType, useProtocol } from '../../../../protocol'
 import { styled } from '../../../../styles/config'
 import { Avatar, Box, Flex, Image, Text } from '../../../../system'
diff --git a/packages/status-react/src/routes/chat/components/chat-message/reactions.tsx b/packages/status-react/src/routes/chat/components/chat-message/reactions.tsx
index 6a7fe204..ade18f72 100644
--- a/packages/status-react/src/routes/chat/components/chat-message/reactions.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-message/reactions.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import {
   emojis,
diff --git a/packages/status-react/src/routes/chat/components/date-divider/index.tsx b/packages/status-react/src/routes/chat/components/date-divider/index.tsx
index 0a7ec31d..0753a92c 100644
--- a/packages/status-react/src/routes/chat/components/date-divider/index.tsx
+++ b/packages/status-react/src/routes/chat/components/date-divider/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import isSameDay from 'date-fns/isSameDay'
 
 import { Flex, Text } from '../../../../system'
diff --git a/packages/status-react/src/routes/chat/components/loading-toast/index.tsx b/packages/status-react/src/routes/chat/components/loading-toast/index.tsx
index 5766063d..9c5f3788 100644
--- a/packages/status-react/src/routes/chat/components/loading-toast/index.tsx
+++ b/packages/status-react/src/routes/chat/components/loading-toast/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { keyframes } from '../../../../styles/config'
 import { Box, Text } from '../../../../system'
 
diff --git a/packages/status-react/src/routes/chat/components/message-loader/index.tsx b/packages/status-react/src/routes/chat/components/message-loader/index.tsx
index 369f61bd..4bb73451 100644
--- a/packages/status-react/src/routes/chat/components/message-loader/index.tsx
+++ b/packages/status-react/src/routes/chat/components/message-loader/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import ContentLoader from 'react-content-loader'
 
 export const MessageLoader = () => {
diff --git a/packages/status-react/src/routes/chat/components/navbar/components/activity-center-popover/index.tsx b/packages/status-react/src/routes/chat/components/navbar/components/activity-center-popover/index.tsx
index a9c6d993..580b7689 100644
--- a/packages/status-react/src/routes/chat/components/navbar/components/activity-center-popover/index.tsx
+++ b/packages/status-react/src/routes/chat/components/navbar/components/activity-center-popover/index.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react'
+import { Fragment, useState } from 'react'
 
 import format from 'date-fns/format'
 import isSameDay from 'date-fns/isSameDay'
diff --git a/packages/status-react/src/routes/chat/components/navbar/index.tsx b/packages/status-react/src/routes/chat/components/navbar/index.tsx
index 9c2a1f30..c95c9b82 100644
--- a/packages/status-react/src/routes/chat/components/navbar/index.tsx
+++ b/packages/status-react/src/routes/chat/components/navbar/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useMatch } from 'react-router-dom'
 
 // import { ChatMenu } from '../../../../components/chat-menu'
diff --git a/packages/status-react/src/routes/chat/index.tsx b/packages/status-react/src/routes/chat/index.tsx
index 5fb625f4..4ba82fdc 100644
--- a/packages/status-react/src/routes/chat/index.tsx
+++ b/packages/status-react/src/routes/chat/index.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useRef } from 'react'
+import { Fragment, useEffect, useRef } from 'react'
 
 import isSameDay from 'date-fns/isSameDay'
 import { useLocation, useMatch } from 'react-router-dom'
diff --git a/packages/status-react/src/routes/index.tsx b/packages/status-react/src/routes/index.tsx
index e3657bb0..05e3301d 100644
--- a/packages/status-react/src/routes/index.tsx
+++ b/packages/status-react/src/routes/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import {
   BrowserRouter,
   Navigate,
diff --git a/packages/status-react/src/system/activity/activity.tsx b/packages/status-react/src/system/activity/activity.tsx
index ec5793a2..a3f50abf 100644
--- a/packages/status-react/src/system/activity/activity.tsx
+++ b/packages/status-react/src/system/activity/activity.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useNavigate } from 'react-router-dom'
 
 import { styled } from '../../styles/config'
diff --git a/packages/status-react/src/system/avatar/avatar.tsx b/packages/status-react/src/system/avatar/avatar.tsx
index 79a5f2dc..32b64f29 100644
--- a/packages/status-react/src/system/avatar/avatar.tsx
+++ b/packages/status-react/src/system/avatar/avatar.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { Image } from '../image'
 import { Base, Content, Indicator, Initials } from './styles'
diff --git a/packages/status-react/src/system/badge/badge.tsx b/packages/status-react/src/system/badge/badge.tsx
index 0224c491..3f2c78b9 100644
--- a/packages/status-react/src/system/badge/badge.tsx
+++ b/packages/status-react/src/system/badge/badge.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Text } from '../text'
 import { Base } from './styles'
 
diff --git a/packages/status-react/src/system/button-group/button-group.tsx b/packages/status-react/src/system/button-group/button-group.tsx
index 87cb5c2a..351ff465 100644
--- a/packages/status-react/src/system/button-group/button-group.tsx
+++ b/packages/status-react/src/system/button-group/button-group.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-
 import { Button, Group } from './styles'
 
+import type React from 'react'
+
 interface Props<V> {
   value: V
   onChange: (value: V) => void
diff --git a/packages/status-react/src/system/button/button.tsx b/packages/status-react/src/system/button/button.tsx
index 36e763da..3a60e760 100644
--- a/packages/status-react/src/system/button/button.tsx
+++ b/packages/status-react/src/system/button/button.tsx
@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import { Base } from './styles'
 
 import type { Variants } from './styles'
+import type React from 'react'
 import type { Ref } from 'react'
 
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
diff --git a/packages/status-react/src/system/checkbox/checkbox.tsx b/packages/status-react/src/system/checkbox/checkbox.tsx
index 74f0b99e..0d1d9acb 100644
--- a/packages/status-react/src/system/checkbox/checkbox.tsx
+++ b/packages/status-react/src/system/checkbox/checkbox.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import { Text } from '../text'
 import { Indicator, Root, Wrapper } from './styles'
diff --git a/packages/status-react/src/system/context-menu/context-menu.tsx b/packages/status-react/src/system/context-menu/context-menu.tsx
index e0b38003..1f45afd1 100644
--- a/packages/status-react/src/system/context-menu/context-menu.tsx
+++ b/packages/status-react/src/system/context-menu/context-menu.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement, useState } from 'react'
+import { cloneElement, useState } from 'react'
 
 import * as Primitive from '@radix-ui/react-context-menu'
 
@@ -10,6 +10,7 @@ import type {
   ContextMenuSeparatorProps,
   ContextMenuTriggerProps,
 } from '@radix-ui/react-context-menu'
+import type React from 'react'
 
 interface TriggerProps extends ContextMenuTriggerProps {
   children: [React.ReactElement, React.ReactElement]
diff --git a/packages/status-react/src/system/copy-input/copy-input.tsx b/packages/status-react/src/system/copy-input/copy-input.tsx
index 19cffe8a..cf919862 100644
--- a/packages/status-react/src/system/copy-input/copy-input.tsx
+++ b/packages/status-react/src/system/copy-input/copy-input.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from 'react'
+import { forwardRef, useRef } from 'react'
 
 import { composeRefs } from '@radix-ui/react-compose-refs'
 
diff --git a/packages/status-react/src/system/dialog/alert-dialog.tsx b/packages/status-react/src/system/dialog/alert-dialog.tsx
index 2f30506d..fcdc46fd 100644
--- a/packages/status-react/src/system/dialog/alert-dialog.tsx
+++ b/packages/status-react/src/system/dialog/alert-dialog.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement, useCallback, useRef } from 'react'
+import { cloneElement, useCallback, useRef } from 'react'
 
 import * as Primitive from '@radix-ui/react-alert-dialog'
 
@@ -12,6 +12,7 @@ import { Actions, Body, Content, Header, Overlay } from './styles'
 
 import type { ButtonProps } from '../button'
 import type { DialogContentProps } from '@radix-ui/react-dialog'
+import type React from 'react'
 
 interface TriggerProps {
   open?: boolean
diff --git a/packages/status-react/src/system/dialog/dialog.tsx b/packages/status-react/src/system/dialog/dialog.tsx
index 3906d808..4c4ff14b 100644
--- a/packages/status-react/src/system/dialog/dialog.tsx
+++ b/packages/status-react/src/system/dialog/dialog.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 
 import * as Primitive from '@radix-ui/react-dialog'
 
@@ -13,6 +13,7 @@ import { Actions, Body, Content, Header, Overlay } from './styles'
 import type { ButtonProps } from '../button'
 import type { Variants } from './styles'
 import type { DialogContentProps } from '@radix-ui/react-dialog'
+import type React from 'react'
 
 interface DialogTriggerProps {
   children: [React.ReactElement, React.ReactElement]
diff --git a/packages/status-react/src/system/dropdown-menu/dropdown-menu.tsx b/packages/status-react/src/system/dropdown-menu/dropdown-menu.tsx
index 9bd1bd82..4615fb6d 100644
--- a/packages/status-react/src/system/dropdown-menu/dropdown-menu.tsx
+++ b/packages/status-react/src/system/dropdown-menu/dropdown-menu.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import * as Primitive from '@radix-ui/react-dropdown-menu'
 
 import * as Menu from '../menu'
@@ -10,6 +8,7 @@ import type {
   DropdownMenuSeparatorProps,
   DropdownMenuTriggerProps,
 } from '@radix-ui/react-dropdown-menu'
+import type React from 'react'
 
 interface TriggerProps extends DropdownMenuTriggerProps {
   children: [React.ReactElement, React.ReactElement]
diff --git a/packages/status-react/src/system/emoji-hash/emoji-hash.tsx b/packages/status-react/src/system/emoji-hash/emoji-hash.tsx
index ac27e8bd..fac6daf7 100644
--- a/packages/status-react/src/system/emoji-hash/emoji-hash.tsx
+++ b/packages/status-react/src/system/emoji-hash/emoji-hash.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Base } from './styles'
 
 interface Props {
diff --git a/packages/status-react/src/system/eth-address/eth-address.tsx b/packages/status-react/src/system/eth-address/eth-address.tsx
index a0412012..5b83bc39 100644
--- a/packages/status-react/src/system/eth-address/eth-address.tsx
+++ b/packages/status-react/src/system/eth-address/eth-address.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Text } from '../text'
 
 import type { TextProps } from '../text'
diff --git a/packages/status-react/src/system/icon-button/icon-button.tsx b/packages/status-react/src/system/icon-button/icon-button.tsx
index 33457977..8b90bd63 100644
--- a/packages/status-react/src/system/icon-button/icon-button.tsx
+++ b/packages/status-react/src/system/icon-button/icon-button.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import { AccessibleIcon } from '@radix-ui/react-accessible-icon'
 import { Link } from 'react-router-dom'
@@ -7,6 +7,7 @@ import { Base } from './styles'
 
 import type { Variants } from './styles'
 import type Stitches from '@stitches/react'
+import type React from 'react'
 import type { Ref } from 'react'
 import type { LinkProps } from 'react-router-dom'
 
diff --git a/packages/status-react/src/system/icon/icon.tsx b/packages/status-react/src/system/icon/icon.tsx
index 37f78db2..e39ddf51 100644
--- a/packages/status-react/src/system/icon/icon.tsx
+++ b/packages/status-react/src/system/icon/icon.tsx
@@ -1,7 +1,9 @@
-import React, { cloneElement } from 'react'
+import { cloneElement } from 'react'
 
 import { Root } from '@radix-ui/react-accessible-icon'
 
+import type React from 'react'
+
 type Props = ({ label: string; hidden?: false } | { hidden: true }) & {
   children: React.ReactElement
 }
diff --git a/packages/status-react/src/system/image/image.tsx b/packages/status-react/src/system/image/image.tsx
index e1e3b21c..e01f4d0d 100644
--- a/packages/status-react/src/system/image/image.tsx
+++ b/packages/status-react/src/system/image/image.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Base } from './styles'
 
 import type { Variants } from './styles'
diff --git a/packages/status-react/src/system/menu/menu.tsx b/packages/status-react/src/system/menu/menu.tsx
index f392d7eb..ef8bc75c 100644
--- a/packages/status-react/src/system/menu/menu.tsx
+++ b/packages/status-react/src/system/menu/menu.tsx
@@ -1,10 +1,12 @@
-import React, { cloneElement } from 'react'
+import { cloneElement } from 'react'
 
 import { ChevronRightIcon } from '../../icons/chevron-right-icon'
 import { styled, theme } from '../../styles/config'
 import { Box } from '../box'
 import { Icon } from '../icon'
 
+import type React from 'react'
+
 const Content = styled('div', {
   minWidth: 176,
   padding: '8px 0',
diff --git a/packages/status-react/src/system/popover/popover.tsx b/packages/status-react/src/system/popover/popover.tsx
index 9eecc417..55d4f02e 100644
--- a/packages/status-react/src/system/popover/popover.tsx
+++ b/packages/status-react/src/system/popover/popover.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef } from 'react'
+import { cloneElement, forwardRef } from 'react'
 
 import * as Primitive from '@radix-ui/react-popover'
 
@@ -6,6 +6,7 @@ import { Content } from './styles'
 
 import type { PopoverContentProps } from '@radix-ui/react-popover'
 import type Stitches from '@stitches/react'
+import type React from 'react'
 import type { Ref } from 'react'
 
 interface TriggerProps {
diff --git a/packages/status-react/src/system/tabs/tabs.tsx b/packages/status-react/src/system/tabs/tabs.tsx
index 8a63b768..e451accc 100644
--- a/packages/status-react/src/system/tabs/tabs.tsx
+++ b/packages/status-react/src/system/tabs/tabs.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import * as TabsPrimitive from '@radix-ui/react-tabs'
 
diff --git a/packages/status-react/src/system/tag/tag.tsx b/packages/status-react/src/system/tag/tag.tsx
index feb83a78..c373acd3 100644
--- a/packages/status-react/src/system/tag/tag.tsx
+++ b/packages/status-react/src/system/tag/tag.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useNavigate } from 'react-router-dom'
 
 import { TinyChevronRightIcon } from '../../icons/tiny-chevron-right-icon'
diff --git a/packages/status-react/src/system/text-input/text-input.tsx b/packages/status-react/src/system/text-input/text-input.tsx
index 96199707..2c0e22a8 100644
--- a/packages/status-react/src/system/text-input/text-input.tsx
+++ b/packages/status-react/src/system/text-input/text-input.tsx
@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import { Box } from '../box'
 import { Text } from '../text'
 import { Base } from './styles'
 
+import type React from 'react'
 import type { Ref } from 'react'
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>
diff --git a/packages/status-react/src/system/tooltip/tooltip.tsx b/packages/status-react/src/system/tooltip/tooltip.tsx
index d5563ab6..0e9b5094 100644
--- a/packages/status-react/src/system/tooltip/tooltip.tsx
+++ b/packages/status-react/src/system/tooltip/tooltip.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef } from 'react'
+import { cloneElement, forwardRef } from 'react'
 
 import * as Primitive from '@radix-ui/react-tooltip'
 
@@ -8,6 +8,7 @@ import type {
   TooltipArrowProps,
   TooltipContentProps,
 } from '@radix-ui/react-tooltip'
+import type React from 'react'
 import type { Ref } from 'react'
 
 interface Props {
diff --git a/packages/status-react/src/system/visually-hidden/visually-hidden.tsx b/packages/status-react/src/system/visually-hidden/visually-hidden.tsx
index cbb7e9e5..aa1632d1 100644
--- a/packages/status-react/src/system/visually-hidden/visually-hidden.tsx
+++ b/packages/status-react/src/system/visually-hidden/visually-hidden.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-
 import { Root } from '@radix-ui/react-visually-hidden'
 
+import type React from 'react'
+
 type Props = {
   children: React.ReactNode
 }