diff --git a/packages/status-react/src/components/main-sidebar/components/channels/channel-group.tsx b/packages/status-react/src/components/main-sidebar/components/channels/channel-group.tsx
index 4168fb57..048077f1 100644
--- a/packages/status-react/src/components/main-sidebar/components/channels/channel-group.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/channels/channel-group.tsx
@@ -48,9 +48,10 @@ const CollapsibleTrigger = styled(Collapsible.Trigger, {
   padding: 8,
   borderRadius: 8,
   height: 34,
+  color: '$accent-1',
 
   '&:hover': {
-    background: '#E9EDF1',
+    background: '$gray-3',
   },
 
   '&[aria-expanded="true"] svg': {
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 e2875b90..4f6dc2e8 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
@@ -28,7 +28,7 @@ export const CommunityDialog = () => {
           justify="center"
           align="center"
           direction="column"
-          css={{ padding: '8px 0 16px' }}
+          css={{ padding: '8px 0 16px', color: '$accent-1' }}
         >
           <svg
             width="171"
@@ -49,7 +49,7 @@ export const CommunityDialog = () => {
             />
             <path
               d="M77.1738 37.3143H81.8509C81.8509 38.0971 82.0739 38.6594 82.521 39.0011C82.9682 39.3429 83.5413 39.5131 84.2426 39.5131C84.8203 39.5131 85.294 39.408 85.6591 39.1966C86.0346 38.976 86.2218 38.6194 86.2218 38.1269C86.2218 37.8354 86.1409 37.6 85.9792 37.4183C85.8267 37.2286 85.5875 37.0629 85.2628 36.9223C84.8579 36.7422 84.4405 36.591 84.0138 36.4697C83.5054 36.3189 82.8965 36.128 82.186 35.8983C81.5764 35.7076 80.972 35.5014 80.3731 35.28C79.8456 35.0762 79.3484 34.8025 78.8954 34.4663C78.4761 34.1531 78.1326 33.7514 77.8902 33.2903C77.6568 32.8286 77.5401 32.256 77.5401 31.5726C77.5401 30.7897 77.6972 30.112 78.0127 29.5383C78.3282 28.9648 78.7833 28.4781 79.3367 28.1223C79.9064 27.7509 80.5869 27.4754 81.3783 27.2937C82.2372 27.0956 83.1169 26.9996 83.9988 27.008C85.1658 27.008 86.171 27.1383 87.0144 27.4C87.8579 27.6606 88.5476 28.0171 89.0861 28.4697C89.6245 28.9211 90.0208 29.4537 90.2738 30.0663C90.5384 30.6789 90.6701 31.3371 90.6701 32.04H85.963C85.963 31.4274 85.8012 30.9497 85.4754 30.6091C85.1611 30.2663 84.6782 30.096 84.0288 30.096C83.532 30.096 83.1045 30.2069 82.7498 30.4274C82.394 30.6389 82.216 30.96 82.216 31.392C82.216 31.6834 82.2969 31.92 82.4598 32.1006C82.6331 32.272 82.8815 32.4263 83.2062 32.568C83.5309 32.7086 83.933 32.8537 84.4101 33.0046C84.8873 33.1451 85.435 33.3154 86.0554 33.5166C86.7256 33.6971 87.3495 33.8983 87.9283 34.1189C88.5072 34.3406 89.0144 34.6114 89.4512 34.9326C89.8983 35.2446 90.2484 35.6411 90.5026 36.1234C90.7672 36.5954 90.8989 37.1977 90.8989 37.9314C90.8989 38.7954 90.7163 39.5337 90.3501 40.1463C89.9846 40.7488 89.4777 41.2553 88.8723 41.6229C88.2634 42.0046 87.5528 42.2754 86.7406 42.4366C85.9283 42.608 85.0745 42.6926 84.1814 42.6926C81.9572 42.6926 80.231 42.2354 79.0017 41.3211C77.7839 40.3977 77.1738 39.0629 77.1738 37.3143ZM92.0866 30.9257V27.4149H94.4483V23H99.2005V27.4149H102.627V30.9257H99.2005V36.2434C99.2005 36.7966 99.2513 37.2377 99.353 37.5691C99.4547 37.8914 99.5956 38.1474 99.7793 38.3383C99.9723 38.5189 100.201 38.64 100.464 38.6994C100.739 38.7497 101.043 38.7749 101.378 38.7749C101.582 38.7749 101.841 38.7703 102.156 38.76C102.47 38.7406 102.745 38.7097 102.978 38.6686V42.2857C102.623 42.3463 102.176 42.4011 101.637 42.4514C101.014 42.5057 100.389 42.5308 99.7643 42.5269C99.2051 42.5269 98.617 42.4869 97.9966 42.4069C97.3815 42.3281 96.7927 42.1116 96.275 41.7737C95.7481 41.4309 95.3114 40.9097 94.9659 40.2069C94.6205 39.4937 94.4483 38.5189 94.4483 37.2834V30.9257H92.0866ZM104.349 34.8423C104.349 33.728 104.527 32.6937 104.882 31.7394C105.219 30.8313 105.731 29.9967 106.391 29.2823C107.033 28.5953 107.803 28.038 108.66 27.6411C109.537 27.236 110.495 27.0299 111.463 27.0377C112.589 27.0377 113.566 27.2743 114.387 27.7463C115.219 28.2183 115.844 28.816 116.261 29.5394V27.4137H121.028V42.2857H116.261V40.1909C115.885 40.8743 115.28 41.4571 114.447 41.9394C113.615 42.4217 112.621 42.6629 111.463 42.6629C110.467 42.6629 109.533 42.4617 108.66 42.0594C107.803 41.6623 107.033 41.1046 106.391 40.4171C105.733 39.696 105.221 38.8574 104.882 37.9463C104.519 36.9511 104.339 35.9 104.349 34.8423ZM109.086 34.8423C109.086 35.3554 109.173 35.848 109.345 36.3189C109.527 36.7817 109.772 37.1829 110.076 37.5246C110.392 37.856 110.767 38.1269 111.204 38.3383C111.641 38.5394 112.128 38.64 112.666 38.64C113.204 38.64 113.692 38.5394 114.128 38.3383C114.554 38.1424 114.937 37.866 115.255 37.5246C115.57 37.1829 115.814 36.7817 115.986 36.3189C116.169 35.8571 116.261 35.3646 116.261 34.8423C116.261 34.3303 116.169 33.848 115.986 33.3966C115.819 32.9536 115.572 32.5449 115.255 32.1909C114.949 31.8385 114.57 31.5558 114.143 31.3623C113.679 31.1555 113.175 31.0525 112.666 31.0606C112.127 31.0606 111.641 31.1611 111.204 31.3623C110.774 31.5581 110.39 31.8403 110.076 32.1909C109.771 32.5429 109.527 32.9451 109.345 33.3966C109.172 33.848 109.086 34.3303 109.086 34.8423ZM123.588 30.9257V27.4149H125.948V23H130.701V27.4149H134.128V30.9257H130.701V36.2434C130.701 36.7966 130.752 37.2377 130.853 37.5691C130.954 37.8914 131.097 38.1474 131.28 38.3383C131.473 38.5189 131.701 38.64 131.965 38.6994C132.239 38.7497 132.544 38.7749 132.879 38.7749C133.083 38.7749 133.342 38.7703 133.656 38.76C133.971 38.7406 134.245 38.7097 134.478 38.6686V42.2857C134.124 42.3463 133.677 42.4011 133.138 42.4514C132.515 42.5057 131.89 42.5309 131.264 42.5269C130.706 42.5269 130.117 42.4869 129.498 42.4069C128.882 42.328 128.294 42.1115 127.776 41.7737C127.248 41.4309 126.811 40.9097 126.467 40.2069C126.121 39.4937 125.948 38.5189 125.948 37.2834V30.9257H123.588ZM136.84 36.2434V27.4149H141.577V35.0377C141.577 36.1029 141.77 36.9726 142.156 37.6457C142.542 38.3086 143.232 38.64 144.228 38.64C145.223 38.64 145.954 38.3029 146.421 37.6297C146.898 36.9474 147.137 36.0274 147.137 34.8731V27.4149H151.904V42.2857H147.137V40.1611C146.72 40.9451 146.086 41.5577 145.233 41.9989C144.379 42.4411 143.359 42.6617 142.171 42.6617C141.135 42.6617 140.282 42.5017 139.612 42.1806C138.993 41.8905 138.443 41.4746 137.998 40.96C137.519 40.386 137.194 39.7022 137.053 38.9714C136.911 38.2171 136.84 37.3086 136.84 36.2434ZM154.981 37.3143H159.658C159.658 38.0971 159.881 38.6594 160.328 39.0011C160.774 39.3429 161.349 39.5131 162.049 39.5131C162.628 39.5131 163.1 39.408 163.466 39.1966C163.842 38.976 164.029 38.6194 164.029 38.1269C164.029 37.8354 163.948 37.6 163.785 37.4183C163.634 37.2286 163.395 37.0629 163.07 36.9223C162.665 36.7424 162.248 36.5912 161.821 36.4697C161.313 36.3189 160.704 36.128 159.993 35.8983C159.384 35.7076 158.779 35.5015 158.18 35.28C157.653 35.0764 157.156 34.8026 156.703 34.4663C156.283 34.153 155.94 33.7513 155.698 33.2903C155.464 32.8286 155.347 32.256 155.347 31.5726C155.347 30.7897 155.505 30.112 155.819 29.5383C156.135 28.9649 156.59 28.4782 157.144 28.1223C157.714 27.7509 158.393 27.4754 159.186 27.2937C160.045 27.0955 160.924 26.9996 161.806 27.008C162.973 27.008 163.978 27.1383 164.822 27.4C165.664 27.6606 166.355 28.0171 166.893 28.4697C167.432 28.9211 167.827 29.4537 168.081 30.0663C168.348 30.6906 168.483 31.3623 168.477 32.04H163.77C163.77 31.4274 163.609 30.9497 163.283 30.6091C162.968 30.2663 162.486 30.096 161.836 30.096C161.338 30.096 160.912 30.2069 160.556 30.4274C160.201 30.6389 160.023 30.96 160.023 31.392C160.023 31.6834 160.104 31.92 160.267 32.1006C160.439 32.272 160.689 32.4263 161.014 32.568C161.338 32.7086 161.739 32.8537 162.216 33.0046C162.695 33.1451 163.242 33.3154 163.862 33.5166C164.532 33.6971 165.157 33.8983 165.736 34.1189C166.315 34.3406 166.822 34.6114 167.258 34.9326C167.706 35.2446 168.056 35.6411 168.31 36.1234C168.573 36.5954 168.706 37.1977 168.706 37.9314C168.706 38.7954 168.523 39.5337 168.157 40.1463C167.792 40.7489 167.285 41.2554 166.68 41.6229C166.071 42.0046 165.36 42.2754 164.548 42.4366C163.734 42.608 162.882 42.6926 161.989 42.6926C159.765 42.6926 158.038 42.2354 156.809 41.3211C155.591 40.3977 154.981 39.0629 154.981 37.3143Z"
-              fill="black"
+              fill="currentColor"
             />
           </svg>
           <Button href="https://status.im/get">Download Status for Mac</Button>
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 57f9b6b5..439d4ce7 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
@@ -34,6 +34,6 @@ const Button = styled('button', {
   alignItems: 'center',
 
   '&:hover': {
-    background: '#E9EDF1',
+    background: '$gray-3',
   },
 })
diff --git a/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx b/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx
index c9570ec7..223dc2cc 100644
--- a/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx
@@ -40,7 +40,7 @@ const Link = styled(NavLink, {
   fontWeight: '$500',
   fontSize: 15,
   display: 'inline-flex',
-  color: 'rgba(0, 0, 0, 0.7)',
+  color: '$accent-4',
   alignItems: 'center',
   width: '100%',
   gap: '$2',
@@ -48,19 +48,21 @@ const Link = styled(NavLink, {
   padding: 8,
 
   '&:hover': {
-    background: '#E9EDF1',
+    background: '$gray-3',
   },
 
   '&.active': {
-    background: 'rgba(233, 237, 241, 1)',
+    color: '$accent-1',
+    background: '$gray-3',
   },
 
   variants: {
     state: {
       muted: {
-        color: 'rgba(0, 0, 0, 0.4)',
+        color: '$accent-5',
       },
       unread: {
+        color: '$accent-1',
         fontWeight: '$600',
         '&::after': {
           content: '"1"',
diff --git a/packages/status-react/src/components/main-sidebar/index.tsx b/packages/status-react/src/components/main-sidebar/index.tsx
index 55a6e194..a843451c 100644
--- a/packages/status-react/src/components/main-sidebar/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { styled } from '~/src/styles/config'
+import { Separator } from '~/src/system'
 
 import { Channels } from './components/channels'
 import { CommunityInfo } from './components/community-info'
@@ -12,9 +13,9 @@ export const MainSidebar = () => {
     <Wrapper>
       <CommunityInfo />
       <Channels />
-      <Separator />
+      <Separator css={{ margin: '16px 0' }} />
       <Messages />
-      <Separator />
+      <Separator css={{ margin: '16px 0' }} />
       <GetStarted />
     </Wrapper>
   )
@@ -26,17 +27,10 @@ const Wrapper = styled('div', {
   flexDirection: 'column',
   padding: '10px 16px',
   display: 'none',
-  backgroundColor: '#F6F8FA',
+  backgroundColor: '$gray-4',
   overflowY: 'scroll',
 
   '@medium': {
     display: 'flex',
   },
 })
-
-const Separator = styled('div', {
-  margin: '16px 0',
-  height: 1,
-  background: 'rgba(0, 0, 0, 0.1)',
-  flexShrink: 0,
-})
diff --git a/packages/status-react/src/components/member-sidebar/index.tsx b/packages/status-react/src/components/member-sidebar/index.tsx
index 70a36893..790bf7d1 100644
--- a/packages/status-react/src/components/member-sidebar/index.tsx
+++ b/packages/status-react/src/components/member-sidebar/index.tsx
@@ -50,7 +50,7 @@ const Wrapper = styled('div', {
   flexShrink: 0,
   padding: '18px 16px',
   display: 'none',
-  backgroundColor: '#F6F8FA',
+  backgroundColor: '$gray-4',
   overflowY: 'scroll',
 
   '@medium': {
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 154fbf5a..c3287ad2 100644
--- a/packages/status-react/src/components/member-sidebar/member-item.tsx
+++ b/packages/status-react/src/components/member-sidebar/member-item.tsx
@@ -23,7 +23,7 @@ export const MemberItem = (props: Props) => {
       />
       <div>
         <Flex align="center" gap={1}>
-          <Text size="15" color="black-70">
+          <Text size="15" color="accent">
             {children}
           </Text>
           {verified && (
diff --git a/packages/status-react/src/modules/community/index.tsx b/packages/status-react/src/modules/community/index.tsx
index 7aa4ddc3..2f465831 100644
--- a/packages/status-react/src/modules/community/index.tsx
+++ b/packages/status-react/src/modules/community/index.tsx
@@ -1,7 +1,6 @@
 import React, { useRef } from 'react'
 
 import { BrowserRouter } from 'react-router-dom'
-import styled, { ThemeProvider } from 'styled-components'
 
 import { AppProvider } from '~/src/contexts/app-context'
 import { ChatStateProvider } from '~/src/contexts/chatStateProvider'
@@ -12,6 +11,7 @@ import { ModalProvider } from '~/src/contexts/modalProvider'
 import { NarrowProvider } from '~/src/contexts/narrowProvider'
 import { ScrollProvider } from '~/src/contexts/scrollProvider'
 import { ToastProvider } from '~/src/contexts/toastProvider'
+import { styled } from '~/src/styles/config'
 import { GlobalStyle } from '~/src/styles/GlobalStyle'
 
 import { Messenger } from './messenger'
@@ -34,30 +34,28 @@ export const Community = (props: Props) => {
     <Router>
       <AppProvider config={props}>
         <DialogProvider>
-          <ThemeProvider theme={theme}>
-            <NarrowProvider myRef={ref}>
-              <ModalProvider>
-                <ToastProvider>
-                  <Wrapper ref={ref}>
-                    <GlobalStyle />
-                    <IdentityProvider>
-                      <MessengerProvider
-                        publicKey={publicKey}
-                        environment={environment}
-                      >
-                        <ChatStateProvider>
-                          <ScrollProvider>
-                            <Messenger />
-                            <div id="modal-root" />
-                          </ScrollProvider>
-                        </ChatStateProvider>
-                      </MessengerProvider>
-                    </IdentityProvider>
-                  </Wrapper>
-                </ToastProvider>
-              </ModalProvider>
-            </NarrowProvider>
-          </ThemeProvider>
+          <NarrowProvider myRef={ref}>
+            <ModalProvider>
+              <ToastProvider>
+                <Wrapper ref={ref} className={theme}>
+                  <GlobalStyle />
+                  <IdentityProvider>
+                    <MessengerProvider
+                      publicKey={publicKey}
+                      environment={environment}
+                    >
+                      <ChatStateProvider>
+                        <ScrollProvider>
+                          <Messenger />
+                          <div id="portal" data-radix-portal />
+                        </ScrollProvider>
+                      </ChatStateProvider>
+                    </MessengerProvider>
+                  </IdentityProvider>
+                </Wrapper>
+              </ToastProvider>
+            </ModalProvider>
+          </NarrowProvider>
         </DialogProvider>
       </AppProvider>
     </Router>
@@ -66,7 +64,7 @@ export const Community = (props: Props) => {
 
 export type { Props as CommunityProps }
 
-const Wrapper = styled.div`
-  height: 100%;
-  overflow: hidden;
-`
+const Wrapper = styled('div', {
+  height: '100%',
+  overflow: 'hidden',
+})
diff --git a/packages/status-react/src/modules/community/messenger.tsx b/packages/status-react/src/modules/community/messenger.tsx
index fb7364cd..ef373498 100644
--- a/packages/status-react/src/modules/community/messenger.tsx
+++ b/packages/status-react/src/modules/community/messenger.tsx
@@ -28,4 +28,5 @@ const Wrapper = styled('div', {
   height: '100%',
   display: 'flex',
   alignItems: 'stretch',
+  background: '$background',
 })
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 7dd6bcab..e4945869 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
@@ -235,7 +235,7 @@ const Wrapper = styled('div', {
   transitionDuration: '100ms',
 
   '&:hover, &[data-open="true"], &[data-active="true"]': {
-    background: '#EEF2F5',
+    background: '$gray-4',
   },
 
   a: {
diff --git a/packages/status-react/src/routes/index.tsx b/packages/status-react/src/routes/index.tsx
index 40f8a8a8..1c728e18 100644
--- a/packages/status-react/src/routes/index.tsx
+++ b/packages/status-react/src/routes/index.tsx
@@ -52,4 +52,5 @@ const Wrapper = styled('div', {
   height: '100%',
   display: 'flex',
   alignItems: 'stretch',
+  background: '$background',
 })
diff --git a/packages/status-react/src/routes/new-chat/index.tsx b/packages/status-react/src/routes/new-chat/index.tsx
index 7ad2b865..1a23fa35 100644
--- a/packages/status-react/src/routes/new-chat/index.tsx
+++ b/packages/status-react/src/routes/new-chat/index.tsx
@@ -250,7 +250,6 @@ const Wrapper = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'stretch',
-  background: '#fff',
 })
 
 const NavbarWrapper = styled('div', {
diff --git a/packages/status-react/src/styles/config.tsx b/packages/status-react/src/styles/config.tsx
index 13876a11..baa30650 100644
--- a/packages/status-react/src/styles/config.tsx
+++ b/packages/status-react/src/styles/config.tsx
@@ -4,6 +4,7 @@ import type { CSS as StitchesCSS } from '@stitches/react'
 
 export type { VariantProps } from '@stitches/react'
 export type CSS = StitchesCSS<typeof config>
+export type Theme = typeof theme
 
 export const {
   styled,
@@ -31,6 +32,9 @@ export const {
       current: 'currentColor',
       transparent: 'transparent',
 
+      background: 'rgb(255, 255, 255)',
+      overlay: 'rgba(0, 0, 0, 0.4)',
+
       'primary-1': 'rgba(67, 96, 223, 1)',
       'primary-2': 'rgba(67, 96, 223, 0.2)',
       'primary-3': 'rgba(67, 96, 223, 0.1)',
@@ -107,6 +111,9 @@ export const {
 
 export const darkTheme = createTheme({
   colors: {
+    background: 'rgb(0, 0, 0)',
+    overlay: 'rgba(255, 255, 255, 0.4)',
+
     'primary-1': 'rgba(136, 176, 255, 1)',
     'primary-2': 'rgba(134, 158, 255, 0.3)',
     'primary-3': 'rgba(134, 158, 255, 0.2)',
diff --git a/packages/status-react/src/system/avatar/styles.tsx b/packages/status-react/src/system/avatar/styles.tsx
index 0942d0b9..86b76aa6 100644
--- a/packages/status-react/src/system/avatar/styles.tsx
+++ b/packages/status-react/src/system/avatar/styles.tsx
@@ -6,7 +6,7 @@ export type Variants = VariantProps<typeof Base>
 
 export const Base = styled('div', {
   position: 'relative',
-  background: '#F6F8FA',
+  background: '$accent-6',
   borderRadius: '100%',
   flexShrink: 0,
 
@@ -53,7 +53,7 @@ export const Indicator = styled('span', {
   right: -2,
   bottom: -2,
   borderRadius: '100%',
-  border: '2px solid #fff',
+  border: '2px solid $gray-4',
 
   variants: {
     size: {
@@ -71,10 +71,10 @@ export const Indicator = styled('span', {
     },
     state: {
       online: {
-        backgroundColor: '#4EBC60',
+        backgroundColor: '$success-1',
       },
       offline: {
-        backgroundColor: '#939BA1',
+        backgroundColor: '$gray-1',
       },
     },
   },
diff --git a/packages/status-react/src/system/dialog/styles.tsx b/packages/status-react/src/system/dialog/styles.tsx
index 05bf26e1..9f3cc408 100644
--- a/packages/status-react/src/system/dialog/styles.tsx
+++ b/packages/status-react/src/system/dialog/styles.tsx
@@ -18,7 +18,7 @@ const overlayAnimation = keyframes({
 export const Overlay = styled('div', {
   inset: 0,
   position: 'fixed',
-  backgroundColor: 'rgba(0,0,0,0.4)',
+  backgroundColor: '$overlay',
 
   '@motion': {
     animation: `${overlayAnimation} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`,
@@ -37,7 +37,7 @@ const contentAnimation = keyframes({
 })
 
 export const Content = styled('div', {
-  backgroundColor: 'white',
+  backgroundColor: '$background',
   borderRadius: 8,
   boxShadow:
     'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
@@ -75,7 +75,7 @@ export const Header = styled('div', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  borderBottom: '1px solid #eee',
+  borderBottom: '1px solid $gray-2',
 })
 
 export const Body = styled(Flex, {
@@ -91,6 +91,6 @@ export const Actions = styled('div', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'flex-end',
-  borderTop: '1px solid #EEF2F5',
+  borderTop: '1px solid $gray-2',
   gap: 16,
 })
diff --git a/packages/status-react/src/system/icon-button/styles.tsx b/packages/status-react/src/system/icon-button/styles.tsx
index f66f102e..9817da62 100644
--- a/packages/status-react/src/system/icon-button/styles.tsx
+++ b/packages/status-react/src/system/icon-button/styles.tsx
@@ -14,39 +14,39 @@ export const Base = styled('button', {
   borderRadius: 8,
 
   '&:hover': {
-    background: '#EEF2F5',
+    background: '$gray-3',
   },
 
   '&[aria-expanded="true"]': {
-    background: '#F6F8FA',
+    background: '$gray-4',
   },
 
   variants: {
     color: {
       default: {
-        color: '#000',
+        color: '$accent-1',
       },
       gray: {
-        color: '#939BA1',
+        color: '$gray-1',
       },
     },
     intent: {
       info: {
         '&:hover': {
-          background: 'rgba(67, 96, 223, 0.1)',
-          color: '#4360DF',
+          background: '$primary-3',
+          color: '$primary-1',
         },
       },
       danger: {
         '&:hover': {
-          background: 'rgba(255, 45, 85, 0.2)',
-          color: '#FF2D55',
+          background: '$danger-2',
+          color: '$danger-1',
         },
       },
     },
     active: {
       true: {
-        background: '#F6F8FA',
+        background: '$gray-4',
       },
     },
   },