diff --git a/.github/workflows/backend-tests.yml b/.github/workflows/backend-tests.yml
index 8235f50d28..fcb990f01d 100644
--- a/.github/workflows/backend-tests.yml
+++ b/.github/workflows/backend-tests.yml
@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-20.04, macos-latest, windows-2019]
+        os: [ubuntu-20.04, macos-12, windows-2019]
 
     steps:
       - name: "Print OS"
diff --git a/.github/workflows/desktop-build.yml b/.github/workflows/desktop-build.yml
index 7781362d15..68a52349d5 100644
--- a/.github/workflows/desktop-build.yml
+++ b/.github/workflows/desktop-build.yml
@@ -96,7 +96,7 @@ jobs:
 
   build-macos:
     # needs: run-e2e-tests-mac
-    runs-on: macos-latest
+    runs-on: macos-12
     if: |
       startsWith(github.ref, 'refs/tags/@quiet/desktop')
 
diff --git a/.github/workflows/desktop-rtl-tests.yml b/.github/workflows/desktop-rtl-tests.yml
index 8e8343b736..7262c6bce6 100644
--- a/.github/workflows/desktop-rtl-tests.yml
+++ b/.github/workflows/desktop-rtl-tests.yml
@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-20.04, macos-latest]
+        os: [ubuntu-20.04, macos-12]
 
     steps:
       - name: "Print OS"
diff --git a/.github/workflows/desktop-tests.yml b/.github/workflows/desktop-tests.yml
index 38fbf3592f..5971ab6924 100644
--- a/.github/workflows/desktop-tests.yml
+++ b/.github/workflows/desktop-tests.yml
@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-20.04, macos-latest]
+        os: [ubuntu-20.04, macos-12]
 
     steps:
       - name: "Print OS"
diff --git a/.github/workflows/e2e-android-self.yml b/.github/workflows/e2e-android-self.yml
index 113d6e1d6f..1cf7ab9493 100644
--- a/.github/workflows/e2e-android-self.yml
+++ b/.github/workflows/e2e-android-self.yml
@@ -10,7 +10,7 @@ on:
 
 jobs:
   detox-android-self-hosted:
-    timeout-minutes: 10
+    timeout-minutes: 25
     runs-on: [self-hosted, macOS, ARM64, android]
 
     steps:
@@ -32,6 +32,14 @@ jobs:
           ndk.path=/Users/quiet/Library/Android/sdk/ndk/25.1.8937393
           EOF
 
+      - name: Install pm2
+        run: npm install pm2@latest -g
+
+      - name: Start metro
+        run: |
+          cd packages/mobile
+          pm2 --name METRO start npm -- start
+
       - name: Build Detox
         run: |
           export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home
@@ -41,4 +49,8 @@ jobs:
       - name: Run basic tests
         run: |
           cd packages/mobile
-          detox test starter -c android.emu.debug.ci
\ No newline at end of file
+          detox test starter -c android.emu.debug.ci
+
+      - name: Stop metro
+        if: always() 
+        run: pm2 stop METRO
diff --git a/.github/workflows/e2e-android.yml b/.github/workflows/e2e-android.yml
index 08a9ee19de..7a1826b096 100644
--- a/.github/workflows/e2e-android.yml
+++ b/.github/workflows/e2e-android.yml
@@ -5,7 +5,7 @@ on: workflow_dispatch
 jobs:
   detox-android:
     timeout-minutes: 25
-    runs-on: [macos-latest-xlarge]
+    runs-on: [macos-14-xlarge]
 
     steps:
       - uses: actions/checkout@v4
diff --git a/.github/workflows/e2e-mac.yml b/.github/workflows/e2e-mac.yml
index e8d3d0fc61..ff9002b06b 100644
--- a/.github/workflows/e2e-mac.yml
+++ b/.github/workflows/e2e-mac.yml
@@ -3,7 +3,7 @@ name: E2E Mac
 on: [workflow_call]
 jobs:
   mac:
-    runs-on: macos-latest
+    runs-on: macos-12
     timeout-minutes: 180
     env:
       ELECTRON_CUSTOM_VERSION: 23.0.0
diff --git a/.github/workflows/identity-tests.yml b/.github/workflows/identity-tests.yml
index ea66be2b38..9019564c57 100644
--- a/.github/workflows/identity-tests.yml
+++ b/.github/workflows/identity-tests.yml
@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-20.04, macos-latest, windows-2019]
+        os: [ubuntu-20.04, macos-12, windows-2019]
 
     steps:
       - name: "Print OS"
diff --git a/.github/workflows/mobile-deploy-ios.yml b/.github/workflows/mobile-deploy-ios.yml
index 6560298c51..657cc5df20 100644
--- a/.github/workflows/mobile-deploy-ios.yml
+++ b/.github/workflows/mobile-deploy-ios.yml
@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [macOS-latest]
+        os: [macos-12]
 
     steps:
       - name: "Print OS"
diff --git a/.github/workflows/state-manager-tests.yml b/.github/workflows/state-manager-tests.yml
index cd68e78a5b..61d97d1ed9 100644
--- a/.github/workflows/state-manager-tests.yml
+++ b/.github/workflows/state-manager-tests.yml
@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-20.04, macos-latest]
+        os: [ubuntu-20.04, macos-12]
 
     steps:
       - name: "Print OS"
diff --git a/.github/workflows/utils-tests.yml b/.github/workflows/utils-tests.yml
index 15edc17f60..b002c21ee3 100644
--- a/.github/workflows/utils-tests.yml
+++ b/.github/workflows/utils-tests.yml
@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-20.04, macos-latest, windows-2019]
+        os: [ubuntu-20.04, macos-12, windows-2019]
 
     steps:
       - name: "Print OS"
diff --git a/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx b/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx
index 6235c69744..55bda3ff9b 100644
--- a/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx
+++ b/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx
@@ -38,7 +38,7 @@ const classes = {
 }
 
 const StyledGrid = styled(Grid)(({ theme }) => ({
-  backgroundColor: theme.palette.colors.white,
+  backgroundColor: theme.palette.background.default,
   padding: '0px 32px',
 
   [`& .${classes.focus}`]: {
diff --git a/packages/desktop/src/renderer/components/ChangeUsername/UsernameChanged/UsernameChanged.component.tsx b/packages/desktop/src/renderer/components/ChangeUsername/UsernameChanged/UsernameChanged.component.tsx
index dac4a0f8e7..a3332cdf01 100644
--- a/packages/desktop/src/renderer/components/ChangeUsername/UsernameChanged/UsernameChanged.component.tsx
+++ b/packages/desktop/src/renderer/components/ChangeUsername/UsernameChanged/UsernameChanged.component.tsx
@@ -16,7 +16,7 @@ const classes = {
 }
 
 const StyledGrid = styled(Grid)(({ theme }) => ({
-  backgroundColor: theme.palette.colors.white,
+  backgroundColor: theme.palette.background.default,
   padding: '0px 32px',
 
   [`& .${classes.button}`]: {
diff --git a/packages/desktop/src/renderer/components/Channel/ChannelComponent.tsx b/packages/desktop/src/renderer/components/Channel/ChannelComponent.tsx
index a74d127d53..752a06f0e1 100644
--- a/packages/desktop/src/renderer/components/Channel/ChannelComponent.tsx
+++ b/packages/desktop/src/renderer/components/Channel/ChannelComponent.tsx
@@ -30,7 +30,7 @@ import { HandleOpenModalType } from '../widgets/userLabel/UserLabel.types'
 const ChannelMessagesWrapperStyled = styled(Grid)(({ theme }) => ({
   position: 'relative',
   height: 0,
-  backgroundColor: theme.palette.colors.white,
+  backgroundColor: theme.palette.background.default,
 }))
 
 export interface ChannelComponentProps {
diff --git a/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannelComponent.tsx b/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannelComponent.tsx
index cd576d6583..51197f2a59 100644
--- a/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannelComponent.tsx
+++ b/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannelComponent.tsx
@@ -30,7 +30,7 @@ const classes = {
 }
 
 const StyledModalContent = styled(Grid)(({ theme }) => ({
-  backgroundColor: theme.palette.colors.white,
+  backgroundColor: theme.palette.background.default,
   padding: '0px 32px',
 
   [`& .${classes.fullContainer}`]: {
diff --git a/packages/desktop/src/renderer/components/Channel/DeleteChannel/DeleteChannel.test.tsx b/packages/desktop/src/renderer/components/Channel/DeleteChannel/DeleteChannel.test.tsx
index 61eb7e67cf..54c839013f 100644
--- a/packages/desktop/src/renderer/components/Channel/DeleteChannel/DeleteChannel.test.tsx
+++ b/packages/desktop/src/renderer/components/Channel/DeleteChannel/DeleteChannel.test.tsx
@@ -21,7 +21,7 @@ describe('LeaveCommunity', () => {
           aria-hidden="true"
         />
         <div
-          class="MuiModal-root css-1vjugmr-MuiModal-root"
+          class="MuiModal-root css-1evs64r-MuiModal-root"
           role="presentation"
         >
           <div
@@ -121,7 +121,7 @@ describe('LeaveCommunity', () => {
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto DeleteChannelbuttonContainer css-1wrgmsj-MuiGrid-root"
                   >
                     <button
-                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth DeleteChannelbutton css-14mi2mx-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth DeleteChannelbutton css-jk7ztx-MuiButtonBase-root-MuiButton-root"
                       data-testid="deleteChannelButton"
                       tabindex="0"
                       type="button"
@@ -136,7 +136,7 @@ describe('LeaveCommunity', () => {
                     class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 DeleteChannelsecondaryButtonContainer css-s2k0j8-MuiGrid-root"
                   >
                     <button
-                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth DeleteChannelsecondaryButton css-14mi2mx-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth DeleteChannelsecondaryButton css-jk7ztx-MuiButtonBase-root-MuiButton-root"
                       tabindex="0"
                       type="button"
                     >
diff --git a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx
index e55dd313b7..abb1818f39 100644
--- a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx
@@ -31,14 +31,14 @@ const FileComponentStyled = styled('div')(({ theme }) => ({
   padding: '16px',
   backgroundColor: theme.palette.colors.white,
   borderRadius: '8px',
-  border: `1px solid ${theme.palette.colors.veryLightGray}`,
+  border: `1px solid ${theme.palette.colors.border01}`,
 
   [`& .${classes.icon}`]: {
     minWidth: '40px',
     width: '40px',
     height: '40px',
     borderRadius: '8px',
-    backgroundColor: '#F0F0F0',
+    backgroundColor: theme.palette.background.paper,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.test.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.test.tsx
index 52d913fa1a..be24ec1abf 100644
--- a/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.test.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.test.tsx
@@ -55,7 +55,7 @@ describe('UploadedFile', () => {
             class="css-gd4qex"
           >
             <div
-              class="css-ytr8bc"
+              class="css-1i8wbh6"
               data-testid="abcd1234-imagePlaceholder"
             >
               <p
@@ -82,7 +82,7 @@ describe('UploadedFile', () => {
                       class="UploadedImagePlaceholdericon"
                     >
                       <span
-                        class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-9a4009-MuiCircularProgress-root"
+                        class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-acfop9-MuiCircularProgress-root"
                         role="progressbar"
                         style="width: 18px; height: 18px; position: absolute; color: rgb(178, 178, 178);"
                       >
diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.test.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.test.tsx
index 82b49d7b6e..7dd196d659 100644
--- a/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.test.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.test.tsx
@@ -27,7 +27,7 @@ describe('UploadedImagePlaceholder', () => {
       <body>
         <div>
           <div
-            class="css-ytr8bc"
+            class="css-1i8wbh6"
             data-testid="hvb45FGa-imagePlaceholder"
           >
             <p
@@ -54,7 +54,7 @@ describe('UploadedImagePlaceholder', () => {
                     class="UploadedImagePlaceholdericon"
                   >
                     <span
-                      class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-9a4009-MuiCircularProgress-root"
+                      class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-acfop9-MuiCircularProgress-root"
                       role="progressbar"
                       style="width: 18px; height: 18px; position: absolute; color: rgb(178, 178, 178);"
                     >
@@ -107,7 +107,7 @@ describe('UploadedImagePlaceholder', () => {
       <body>
         <div>
           <div
-            class="css-ytr8bc"
+            class="css-1i8wbh6"
             data-testid="hvb45FGa-imagePlaceholder"
           >
             <p
@@ -134,7 +134,7 @@ describe('UploadedImagePlaceholder', () => {
                   >
                     <span
                       aria-valuenow="100"
-                      class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1rhqaqh-MuiCircularProgress-root"
+                      class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1036n7b-MuiCircularProgress-root"
                       role="progressbar"
                       style="width: 18px; height: 18px; transform: rotate(-90deg); position: absolute; color: rgb(231, 231, 231);"
                     >
@@ -155,7 +155,7 @@ describe('UploadedImagePlaceholder', () => {
                     </span>
                     <span
                       aria-valuenow="10"
-                      class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1rhqaqh-MuiCircularProgress-root"
+                      class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1036n7b-MuiCircularProgress-root"
                       role="progressbar"
                       style="width: 18px; height: 18px; transform: rotate(-90deg); color: rgb(178, 178, 178);"
                     >
diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx
index 15f9f60c44..bbf25e41f2 100644
--- a/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx
@@ -18,7 +18,7 @@ const classes = {
   icon: `${PREFIX}icon`,
 }
 
-const Root = styled('div')(() => ({
+const Root = styled('div')(({ theme }) => ({
   maxWidth: '400px',
   height: '100%',
 
@@ -29,7 +29,7 @@ const Root = styled('div')(() => ({
     alignItems: 'center',
     minWidth: '50px',
     minHeight: '50px',
-    backgroundColor: '#e0e0e0',
+    backgroundColor: theme.palette.background.paper,
   },
 
   [`& .${classes.placeholderIcon}`]: {
@@ -41,7 +41,7 @@ const Root = styled('div')(() => ({
     width: '40px',
     height: '40px',
     borderRadius: '8px',
-    backgroundColor: '#F0F0F0',
+    backgroundColor: theme.palette.background.paper,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx
index efc5d8de0b..54ef0f18da 100644
--- a/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx
@@ -22,7 +22,7 @@ const classes = {
   tooltip: `${PREFIX}tooltip`,
 }
 
-const StyledFilePreviewComponent = styled('div')(() => ({
+const StyledFilePreviewComponent = styled('div')(({ theme }) => ({
   display: 'inline-block',
   float: 'left',
   cursor: 'pointer',
@@ -49,7 +49,7 @@ const StyledFilePreviewComponent = styled('div')(() => ({
     width: '64px',
     height: '64px',
     borderRadius: '15%',
-    backgroundColor: '#F0F0F0',
+    backgroundColor: theme.palette.background.paper,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
diff --git a/packages/desktop/src/renderer/components/ChannelCreationModal/ChannelCreationModal.test.tsx b/packages/desktop/src/renderer/components/ChannelCreationModal/ChannelCreationModal.test.tsx
index 66d868e221..693fc72055 100644
--- a/packages/desktop/src/renderer/components/ChannelCreationModal/ChannelCreationModal.test.tsx
+++ b/packages/desktop/src/renderer/components/ChannelCreationModal/ChannelCreationModal.test.tsx
@@ -13,7 +13,7 @@ describe('Create ChannelCreationModalComponent', () => {
           aria-hidden="true"
         />
         <div
-          class="MuiModal-root css-1vjugmr-MuiModal-root"
+          class="MuiModal-root css-1evs64r-MuiModal-root"
           role="presentation"
         >
           <div
diff --git a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
index 5078d29005..05aa046e87 100644
--- a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
+++ b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
@@ -10,6 +10,8 @@ import Icon from '../ui/Icon/Icon'
 import arrowLeft from '../../static/images/arrowLeft.svg'
 import arrowRightShort from '../../static/images/arrowRightShort.svg'
 
+import theme from '../../theme'
+
 export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handleBack, title, children }) => {
   const ref = useRef<HTMLDivElement>(null)
 
@@ -50,8 +52,8 @@ export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handle
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'flex-start',
-          backgroundColor: '#ffffff',
-          boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.25)',
+          backgroundColor: theme.palette.background.default,
+          boxShadow: theme.shadows[1],
           maxWidth: '375px',
           pointerEvents: 'auto',
         }}
@@ -65,7 +67,7 @@ export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handle
             textAlign: 'center',
             height: 60,
             width: '100%',
-            borderBottom: '1px solid #F0F0F0',
+            borderBottom: `1px solid ${theme.palette.colors.border01}`,
           }}
         >
           <Grid
@@ -101,7 +103,7 @@ export const ContextMenuHint: FC<ContextMenuHintProps> = ({ hint }) => {
         width: '100%',
         padding: 16,
         borderTopWidth: 1,
-        borderColor: '#F0F0F0',
+        borderColor: theme.palette.colors.border01,
       }}
     >
       <Typography fontSize={14} fontWeight={'normal'}>
@@ -136,7 +138,7 @@ export const ContextMenuItem: FC<ContextMenuItemProps> = ({ title, action }) =>
         padding: '11px 16px',
         width: '100%',
         cursor: 'pointer',
-        borderBottom: '1px solid #F0F0F0',
+        borderBottom: `1px solid ${theme.palette.colors.border01}`,
       }}
       onClick={action}
       data-testid={`contextMenuItem${title}`}
diff --git a/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx b/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
index 2e02ff2dbd..31ab730701 100644
--- a/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
+++ b/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
@@ -26,7 +26,7 @@ const classes = {
   editPhotoButton: `${PREFIX}editPhotoButton`,
 }
 
-const StyledContextMenuContent = styled(Grid)(() => ({
+const StyledContextMenuContent = styled(Grid)(({ theme }) => ({
   zIndex: 9002,
   flex: 1,
 
@@ -67,10 +67,10 @@ const StyledContextMenuContent = styled(Grid)(() => ({
 
   [`& .${classes.editUsernameField}`]: {
     color: '#33333380',
-    background: '#F0F0F0',
+    background: theme.palette.background.paper,
     margin: '0px 16px',
     padding: '16px',
-    border: '1px solid #B3B3B3',
+    border: `1px solid ${theme.palette.colors.border02}`,
     borderRadius: '8px',
     fontSize: '14px',
     fontWeight: '400',
@@ -81,7 +81,7 @@ const StyledContextMenuContent = styled(Grid)(() => ({
     background: 'inherit',
     padding: '6px 12px',
     borderRadius: '16px',
-    border: '1px solid #B3B3B3',
+    border: `1px solid ${theme.palette.colors.border02}`,
     fontSize: '14px',
     fontWeight: '400',
     textTransform: 'none',
diff --git a/packages/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx b/packages/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx
index ee008a7f7e..b1e3546e60 100644
--- a/packages/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx
+++ b/packages/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx
@@ -42,7 +42,7 @@ const classes = {
 }
 
 const StyledModalContent = styled(Grid)(({ theme }) => ({
-  backgroundColor: theme.palette.colors.white,
+  backgroundColor: theme.palette.background.default,
   padding: '0px 32px',
 
   [`& .${classes.focus}`]: {
diff --git a/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx b/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx
index 0f8bf7b54c..387ac4c5b1 100644
--- a/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx
+++ b/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx
@@ -42,7 +42,7 @@ const classes = {
 }
 
 const StyledGrid = styled(Grid)(({ theme }) => ({
-  backgroundColor: theme.palette.colors.white,
+  backgroundColor: theme.palette.background.default,
   padding: '0px 32px',
 
   [`& .${classes.focus}`]: {
diff --git a/packages/desktop/src/renderer/components/CreateUsername/UsernameCreated/UsernameCreated.test.tsx b/packages/desktop/src/renderer/components/CreateUsername/UsernameCreated/UsernameCreated.test.tsx
index 113b477827..74ac9b74d7 100644
--- a/packages/desktop/src/renderer/components/CreateUsername/UsernameCreated/UsernameCreated.test.tsx
+++ b/packages/desktop/src/renderer/components/CreateUsername/UsernameCreated/UsernameCreated.test.tsx
@@ -32,7 +32,7 @@ describe('UsernameCreated', () => {
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto UsernameCreatedbuttonContainer css-1wrgmsj-MuiGrid-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth UsernameCreatedbutton css-14mi2mx-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth UsernameCreatedbutton css-jk7ztx-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
diff --git a/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.test.tsx b/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.test.tsx
index 32da36980e..b4bfe5a299 100644
--- a/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.test.tsx
+++ b/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.test.tsx
@@ -22,7 +22,7 @@ describe('Create JoiningPanelComponent', () => {
           aria-hidden="true"
         />
         <div
-          class="MuiModal-root css-1vjugmr-MuiModal-root"
+          class="MuiModal-root css-1evs64r-MuiModal-root"
           role="presentation"
         >
           <div
@@ -158,7 +158,7 @@ describe('Create JoiningPanelComponent', () => {
           aria-hidden="true"
         />
         <div
-          class="MuiModal-root css-1vjugmr-MuiModal-root"
+          class="MuiModal-root css-1evs64r-MuiModal-root"
           role="presentation"
         >
           <div
diff --git a/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx b/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx
index bdcb919c9b..44aa1f233f 100644
--- a/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx
+++ b/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx
@@ -62,7 +62,7 @@ const StyledGrid = styled(Grid)(({ theme, width }) => ({
     color: theme.palette.colors.black30,
   },
   [`& .${classes.progressBar}`]: {
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.background.paper,
     width: '300px',
     height: '4px',
     position: 'relative',
diff --git a/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.test.tsx b/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.test.tsx
index 01aa4da8c8..5ed44ae426 100644
--- a/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.test.tsx
+++ b/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.test.tsx
@@ -13,7 +13,7 @@ describe('Create StartingPanelComponent', () => {
           aria-hidden="true"
         />
         <div
-          class="MuiModal-root css-1vjugmr-MuiModal-root"
+          class="MuiModal-root css-1evs64r-MuiModal-root"
           role="presentation"
         >
           <div
diff --git a/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx b/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx
index b86951ced2..e1cee21c83 100644
--- a/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx
+++ b/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx
@@ -45,7 +45,7 @@ const StyledGrid = styled(Grid)(({ theme, width }) => ({
     color: theme.palette.colors.black30,
   },
   [`& .${classes.progressBar}`]: {
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.background.paper,
     width: '300px',
     height: '4px',
     position: 'relative',
diff --git a/packages/desktop/src/renderer/components/SearchModal/SearchModal.test.tsx b/packages/desktop/src/renderer/components/SearchModal/SearchModal.test.tsx
index caf624a64a..5a10f28be0 100644
--- a/packages/desktop/src/renderer/components/SearchModal/SearchModal.test.tsx
+++ b/packages/desktop/src/renderer/components/SearchModal/SearchModal.test.tsx
@@ -77,7 +77,7 @@ describe('Search Modal', () => {
             aria-hidden="true"
           />
           <div
-            class="MuiModal-root css-1vjugmr-MuiModal-root"
+            class="MuiModal-root css-1evs64r-MuiModal-root"
             role="presentation"
           >
             <div
@@ -145,7 +145,7 @@ describe('Search Modal', () => {
                   class="MuiGrid-root MuiGrid-container MuiGrid-item Modalcontent Modaltransparent css-1f064cs-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column SearchModalComponentroot css-tno7k-MuiGrid-root"
+                    class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column SearchModalComponentroot css-oy8l91-MuiGrid-root"
                   >
                     <div
                       class="MuiGrid-root MuiGrid-container SearchModalComponentoverlay css-1hbmzt3-MuiGrid-root"
@@ -168,7 +168,7 @@ describe('Search Modal', () => {
                               data-testid="searchChannelInput"
                             >
                               <div
-                                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl css-11mf5jz-MuiInputBase-root-MuiInput-root"
+                                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl css-o4kyh4-MuiInputBase-root-MuiInput-root"
                               >
                                 <input
                                   aria-invalid="false"
diff --git a/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx b/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx
index 66999b1c9b..c9f1b38fc8 100644
--- a/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx
+++ b/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx
@@ -40,8 +40,8 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
     height: '100%',
   },
   [`& .${classes.modalContainer}`]: {
-    backgroundColor: '#FFFFFF',
-    boxShadow: '0px 2px 25px rgba(0, 0, 0, 0.2)',
+    backgroundColor: theme.palette.background.default,
+    boxShadow: theme.shadows[4],
     borderRadius: '8px',
     width: '60%',
     overflow: 'hidden',
@@ -68,7 +68,7 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
   [`& .${classes.line}`]: {
     width: '100%',
     height: '1px',
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.background.paper,
   },
   [`& .${classes.channel}`]: {},
   [`& .${classes.channelWrapper}`]: {
diff --git a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
index fbe4b1b6ed..04e09ff3be 100644
--- a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
+++ b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
@@ -31,8 +31,8 @@ const StyledTabsWrapper = styled(Grid)(() => ({
 }))
 
 const StyledAppBar = styled(AppBar, { label: 'xxxxx' })(({ theme }) => ({
-  backgroundColor: '#fff',
-  boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.0)',
+  backgroundColor: theme.palette.background.default,
+  boxShadow: theme.shadows[3],
 
   [`& .${classes.leaveComunity}`]: {
     opacity: '1',
diff --git a/packages/desktop/src/renderer/components/Settings/Tabs/Invite/Invite.component.test.tsx b/packages/desktop/src/renderer/components/Settings/Tabs/Invite/Invite.component.test.tsx
index c993e2619c..8e68ac4eaa 100644
--- a/packages/desktop/src/renderer/components/Settings/Tabs/Invite/Invite.component.test.tsx
+++ b/packages/desktop/src/renderer/components/Settings/Tabs/Invite/Invite.component.test.tsx
@@ -90,7 +90,7 @@ describe('CopyLink', () => {
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall css-1qc8nxe-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall css-26fd2i-MuiSvgIcon-root"
                       data-testid="VisibilityOffIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -110,7 +110,7 @@ describe('CopyLink', () => {
               class="MuiGrid-root css-vj1n65-MuiGrid-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium InviteToCommunitybutton css-1skytee-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium InviteToCommunitybutton css-18k1y27-MuiButtonBase-root-MuiButton-root"
                 data-testid="copy-invitation-link"
                 tabindex="0"
                 type="button"
@@ -200,7 +200,7 @@ describe('CopyLink', () => {
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall css-1qc8nxe-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall css-26fd2i-MuiSvgIcon-root"
                       data-testid="VisibilityIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -220,7 +220,7 @@ describe('CopyLink', () => {
               class="MuiGrid-root css-vj1n65-MuiGrid-root"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium InviteToCommunitybutton css-1skytee-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium InviteToCommunitybutton css-18k1y27-MuiButtonBase-root-MuiButton-root"
                 data-testid="copy-invitation-link"
                 tabindex="0"
                 type="button"
diff --git a/packages/desktop/src/renderer/components/Settings/Tabs/LeaveCommunity/LeaveCommunity.test.tsx b/packages/desktop/src/renderer/components/Settings/Tabs/LeaveCommunity/LeaveCommunity.test.tsx
index d0417fcbe3..6d9a00f5b4 100644
--- a/packages/desktop/src/renderer/components/Settings/Tabs/LeaveCommunity/LeaveCommunity.test.tsx
+++ b/packages/desktop/src/renderer/components/Settings/Tabs/LeaveCommunity/LeaveCommunity.test.tsx
@@ -22,7 +22,7 @@ describe('LeaveCommunity', () => {
           aria-hidden="true"
         />
         <div
-          class="MuiModal-root css-1vjugmr-MuiModal-root"
+          class="MuiModal-root css-1evs64r-MuiModal-root"
           role="presentation"
         >
           <div
@@ -121,7 +121,7 @@ describe('LeaveCommunity', () => {
                     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto LeaveCommunitybuttonContainer css-1wrgmsj-MuiGrid-root"
                   >
                     <button
-                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth LeaveCommunitybutton css-14mi2mx-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth LeaveCommunitybutton css-jk7ztx-MuiButtonBase-root-MuiButton-root"
                       tabindex="0"
                       type="button"
                     >
@@ -135,7 +135,7 @@ describe('LeaveCommunity', () => {
                     class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 LeaveCommunitysecondaryButtonContainer css-s2k0j8-MuiGrid-root"
                   >
                     <button
-                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth LeaveCommunitysecondaryButton css-14mi2mx-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth LeaveCommunitysecondaryButton css-jk7ztx-MuiButtonBase-root-MuiButton-root"
                       tabindex="0"
                       type="button"
                     >
diff --git a/packages/desktop/src/renderer/components/Settings/Tabs/Notifications/Notifications.test.tsx b/packages/desktop/src/renderer/components/Settings/Tabs/Notifications/Notifications.test.tsx
index 5f9915e0f3..2f14a0c62c 100644
--- a/packages/desktop/src/renderer/components/Settings/Tabs/Notifications/Notifications.test.tsx
+++ b/packages/desktop/src/renderer/components/Settings/Tabs/Notifications/Notifications.test.tsx
@@ -52,7 +52,7 @@ describe('Notifications', () => {
                   class="MuiFormControlLabel-root NotificationsradioIcon MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked MuiCheckbox-root MuiCheckbox-colorPrimary css-hkw0i8-MuiButtonBase-root-MuiCheckbox-root"
+                    class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked MuiCheckbox-root MuiCheckbox-colorPrimary css-qaev87-MuiButtonBase-root-MuiCheckbox-root"
                   >
                     <input
                       checked=""
@@ -101,7 +101,7 @@ describe('Notifications', () => {
                   class="MuiFormControlLabel-root NotificationsradioIcon MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-hkw0i8-MuiButtonBase-root-MuiCheckbox-root"
+                    class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-qaev87-MuiButtonBase-root-MuiCheckbox-root"
                   >
                     <input
                       class="PrivateSwitchBase-input css-1m9pwf3"
@@ -161,7 +161,7 @@ describe('Notifications', () => {
                     class="MuiFormControlLabel-root NotificationsradioSound MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                   >
                     <span
-                      class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-hkw0i8-MuiButtonBase-root-MuiCheckbox-root"
+                      class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-qaev87-MuiButtonBase-root-MuiCheckbox-root"
                       data-testid="sound-librarianShhh-radio"
                     >
                       <input
@@ -191,7 +191,7 @@ describe('Notifications', () => {
                     class="MuiFormControlLabel-root NotificationsradioSound MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                   >
                     <span
-                      class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-hkw0i8-MuiButtonBase-root-MuiCheckbox-root"
+                      class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-qaev87-MuiButtonBase-root-MuiCheckbox-root"
                       data-testid="sound-pow-radio"
                     >
                       <input
@@ -221,7 +221,7 @@ describe('Notifications', () => {
                     class="MuiFormControlLabel-root NotificationsradioSound MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                   >
                     <span
-                      class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked MuiCheckbox-root MuiCheckbox-colorPrimary css-hkw0i8-MuiButtonBase-root-MuiCheckbox-root"
+                      class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked MuiCheckbox-root MuiCheckbox-colorPrimary css-qaev87-MuiButtonBase-root-MuiCheckbox-root"
                       data-testid="sound-bang-radio"
                     >
                       <input
@@ -252,7 +252,7 @@ describe('Notifications', () => {
                     class="MuiFormControlLabel-root NotificationsradioSound MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                   >
                     <span
-                      class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-hkw0i8-MuiButtonBase-root-MuiCheckbox-root"
+                      class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-qaev87-MuiButtonBase-root-MuiCheckbox-root"
                       data-testid="sound-splat-radio"
                     >
                       <input
@@ -282,7 +282,7 @@ describe('Notifications', () => {
                     class="MuiFormControlLabel-root NotificationsradioSound MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                   >
                     <span
-                      class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-hkw0i8-MuiButtonBase-root-MuiCheckbox-root"
+                      class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-qaev87-MuiButtonBase-root-MuiCheckbox-root"
                       data-testid="sound-none-radio"
                     >
                       <input
diff --git a/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsPanel.test.tsx b/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsPanel.test.tsx
index ff758a187e..ff8c536301 100644
--- a/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsPanel.test.tsx
+++ b/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsPanel.test.tsx
@@ -134,7 +134,7 @@ describe('Channels panel', () => {
                   data-testid="channelsList"
                 >
                   <div
-                    class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-1u7u4xu-MuiButtonBase-root-MuiListItemButton-root"
+                    class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
                     data-testid="general-link"
                     role="button"
                     tabindex="0"
@@ -166,7 +166,7 @@ describe('Channels panel', () => {
                     />
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1u7u4xu-MuiButtonBase-root-MuiListItemButton-root"
+                    class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
                     data-testid="allergies-link"
                     role="button"
                     tabindex="0"
@@ -198,7 +198,7 @@ describe('Channels panel', () => {
                     />
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1u7u4xu-MuiButtonBase-root-MuiListItemButton-root"
+                    class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
                     data-testid="antiques-link"
                     role="button"
                     tabindex="0"
@@ -230,7 +230,7 @@ describe('Channels panel', () => {
                     />
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1u7u4xu-MuiButtonBase-root-MuiListItemButton-root"
+                    class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
                     data-testid="croatia-link"
                     role="button"
                     tabindex="0"
@@ -262,7 +262,7 @@ describe('Channels panel', () => {
                     />
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1u7u4xu-MuiButtonBase-root-MuiListItemButton-root"
+                    class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
                     data-testid="pets-link"
                     role="button"
                     tabindex="0"
@@ -294,7 +294,7 @@ describe('Channels panel', () => {
                     />
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1u7u4xu-MuiButtonBase-root-MuiListItemButton-root"
+                    class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
                     data-testid="sailing-link"
                     role="button"
                     tabindex="0"
@@ -395,7 +395,7 @@ describe('Channels panel', () => {
                 data-testid="channelsList"
               >
                 <div
-                  class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-1u7u4xu-MuiButtonBase-root-MuiListItemButton-root"
+                  class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
                   data-testid="general-link"
                   role="button"
                   tabindex="0"
@@ -427,7 +427,7 @@ describe('Channels panel', () => {
                   />
                 </div>
                 <div
-                  class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1u7u4xu-MuiButtonBase-root-MuiListItemButton-root"
+                  class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
                   data-testid="allergies-link"
                   role="button"
                   tabindex="0"
@@ -459,7 +459,7 @@ describe('Channels panel', () => {
                   />
                 </div>
                 <div
-                  class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1u7u4xu-MuiButtonBase-root-MuiListItemButton-root"
+                  class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
                   data-testid="antiques-link"
                   role="button"
                   tabindex="0"
@@ -491,7 +491,7 @@ describe('Channels panel', () => {
                   />
                 </div>
                 <div
-                  class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1u7u4xu-MuiButtonBase-root-MuiListItemButton-root"
+                  class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
                   data-testid="croatia-link"
                   role="button"
                   tabindex="0"
@@ -523,7 +523,7 @@ describe('Channels panel', () => {
                   />
                 </div>
                 <div
-                  class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1u7u4xu-MuiButtonBase-root-MuiListItemButton-root"
+                  class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
                   data-testid="pets-link"
                   role="button"
                   tabindex="0"
@@ -555,7 +555,7 @@ describe('Channels panel', () => {
                   />
                 </div>
                 <div
-                  class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1u7u4xu-MuiButtonBase-root-MuiListItemButton-root"
+                  class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
                   data-testid="sailing-link"
                   role="button"
                   tabindex="0"
diff --git a/packages/desktop/src/renderer/components/Sidebar/IdentityPanel/IdentityPanel.test.tsx b/packages/desktop/src/renderer/components/Sidebar/IdentityPanel/IdentityPanel.test.tsx
index 55b92570fd..dc712af98e 100644
--- a/packages/desktop/src/renderer/components/Sidebar/IdentityPanel/IdentityPanel.test.tsx
+++ b/packages/desktop/src/renderer/components/Sidebar/IdentityPanel/IdentityPanel.test.tsx
@@ -32,7 +32,7 @@ describe('IdentityPanel', () => {
             class="css-1c9y83e"
           >
             <span
-              class="MuiButtonBase-root MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1skytee-MuiButtonBase-root-MuiButton-root"
+              class="MuiButtonBase-root MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-18k1y27-MuiButtonBase-root-MuiButton-root"
               data-testid="settings-panel-button"
               role="button"
               tabindex="0"
@@ -82,7 +82,7 @@ describe('IdentityPanel', () => {
             class="css-1c9y83e"
           >
             <span
-              class="MuiButtonBase-root MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1skytee-MuiButtonBase-root-MuiButton-root"
+              class="MuiButtonBase-root MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-18k1y27-MuiButtonBase-root-MuiButton-root"
               data-testid="settings-panel-button"
               role="button"
               tabindex="0"
@@ -139,7 +139,7 @@ describe('IdentityPanel', () => {
             class="css-1c9y83e"
           >
             <span
-              class="MuiButtonBase-root MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1skytee-MuiButtonBase-root-MuiButton-root"
+              class="MuiButtonBase-root MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-18k1y27-MuiButtonBase-root-MuiButton-root"
               data-testid="settings-panel-button"
               role="button"
               tabindex="0"
diff --git a/packages/desktop/src/renderer/components/Titlebar.tsx b/packages/desktop/src/renderer/components/Titlebar.tsx
index 66e4b680c6..da6b6caaf8 100644
--- a/packages/desktop/src/renderer/components/Titlebar.tsx
+++ b/packages/desktop/src/renderer/components/Titlebar.tsx
@@ -1,10 +1,11 @@
 import { Titlebar, Color } from 'custom-electron-titlebar'
+import theme from '../theme'
 
 export const addTitlebar = () => {
   setTimeout(() => {
     // eslint-disable-next-line
     const titlebar = new Titlebar({
-      backgroundColor: Color.fromHex('#521c74'),
+      backgroundColor: Color.fromHex(theme.palette.primary.main),
       overflow: 'hidden',
     })
   }, 0)
diff --git a/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModal.test.tsx b/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModal.test.tsx
index aac43af589..09c35d23d3 100644
--- a/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModal.test.tsx
+++ b/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModal.test.tsx
@@ -23,7 +23,7 @@ describe('ErrorModal', () => {
           aria-hidden="true"
         />
         <div
-          class="MuiModal-root css-1vjugmr-MuiModal-root"
+          class="MuiModal-root css-1evs64r-MuiModal-root"
           role="presentation"
         >
           <div
@@ -94,7 +94,7 @@ describe('ErrorModal', () => {
                 style="width: 600px;"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 MuiGrid-direction-xs-column css-h8xj8w-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 MuiGrid-direction-xs-column css-10n3y47-MuiGrid-root"
                 >
                   <div
                     class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column css-67pqv6-MuiGrid-root"
@@ -128,7 +128,7 @@ describe('ErrorModal', () => {
                         class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
                       >
                         <div
-                          class="MuiInputBase-root MuiOutlinedInput-root ErrorModalComponenttextfield MuiInputBase-colorPrimary Mui-disabled ErrorModalComponentcssDisabled MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline ErrorModalComponentstackTrace css-yhedpx-MuiInputBase-root-MuiOutlinedInput-root"
+                          class="MuiInputBase-root MuiOutlinedInput-root ErrorModalComponenttextfield MuiInputBase-colorPrimary Mui-disabled ErrorModalComponentcssDisabled MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline ErrorModalComponentstackTrace css-159m4o8-MuiInputBase-root-MuiOutlinedInput-root"
                         >
                           <textarea
                             aria-invalid="false"
@@ -168,7 +168,7 @@ describe('ErrorModal', () => {
                       class="MuiGrid-root MuiGrid-container MuiGrid-item css-capmjd-MuiGrid-root"
                     >
                       <button
-                        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium ErrorModalComponentbutton css-sx27b8-MuiButtonBase-root-MuiButton-root"
+                        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium ErrorModalComponentbutton css-pfmuyw-MuiButtonBase-root-MuiButton-root"
                         tabindex="0"
                         type="button"
                       >
diff --git a/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx b/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx
index a86644a198..14f7a7552d 100644
--- a/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx
+++ b/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx
@@ -54,7 +54,7 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
   [`& .${classes.textfield}`]: {},
 
   [`& .${classes.cssDisabled}`]: {
-    backgroundColor: theme.palette.colors.inputGray,
+    backgroundColor: theme.palette.background.paper,
     color: theme.palette.colors.red,
   },
 
diff --git a/packages/desktop/src/renderer/components/ui/LoadingButton/LoadingButton.test.tsx b/packages/desktop/src/renderer/components/ui/LoadingButton/LoadingButton.test.tsx
index f8af84f1ec..a0420b27cc 100644
--- a/packages/desktop/src/renderer/components/ui/LoadingButton/LoadingButton.test.tsx
+++ b/packages/desktop/src/renderer/components/ui/LoadingButton/LoadingButton.test.tsx
@@ -10,7 +10,7 @@ describe('Loading button', () => {
       <body>
         <div>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium LoadingButtonbutton css-sx27b8-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium LoadingButtonbutton css-pfmuyw-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
diff --git a/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx b/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx
index 6a0b4e924c..3ff750b5d5 100644
--- a/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx
+++ b/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx
@@ -67,12 +67,12 @@ const StyledMaterialModal = styled(StyledMaterialModalWithProps)(({ theme, zInde
   },
 
   [`& .${classes.header}`]: {
-    background: theme.palette.colors.white,
+    background: theme.palette.background.default,
     height: constants.headerHeight,
   },
 
   [`& .${classes.headerBorder}`]: {
-    borderBottom: `1px solid ${theme.palette.colors.contentGray}`,
+    borderBottom: `1px solid ${theme.palette.colors.border03}`,
   },
 
   [`& .${classes.actions}`]: {
@@ -81,7 +81,7 @@ const StyledMaterialModal = styled(StyledMaterialModalWithProps)(({ theme, zInde
   },
 
   [`& .${classes.content}`]: {
-    background: theme.palette.colors.white,
+    background: theme.palette.background.default,
   },
 
   [`& .${classes.fullPage}`]: {
@@ -100,7 +100,7 @@ const StyledMaterialModal = styled(StyledMaterialModalWithProps)(({ theme, zInde
   },
 
   [`& .${classes.centered}`]: {
-    background: theme.palette.colors.white,
+    background: theme.palette.background.default,
     width: '100vw',
     position: 'absolute',
     top: '50%',
@@ -110,7 +110,7 @@ const StyledMaterialModal = styled(StyledMaterialModalWithProps)(({ theme, zInde
   },
 
   [`& .${classes.window}`]: {
-    background: theme.palette.colors.white,
+    background: theme.palette.background.default,
     width: 'fit-content',
     position: 'absolute',
     top: '50%',
diff --git a/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.test.tsx b/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.test.tsx
index c46e7a344e..3d413ec07b 100644
--- a/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.test.tsx
+++ b/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.test.tsx
@@ -24,7 +24,7 @@ describe('OpenlinkModal', () => {
           aria-hidden="true"
         />
         <div
-          class="MuiModal-root css-1vjugmr-MuiModal-root"
+          class="MuiModal-root css-1evs64r-MuiModal-root"
           role="presentation"
         >
           <div
@@ -143,7 +143,7 @@ describe('OpenlinkModal', () => {
                               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                             >
                               <span
-                                class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-hkw0i8-MuiButtonBase-root-MuiCheckbox-root"
+                                class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-qaev87-MuiButtonBase-root-MuiCheckbox-root"
                               >
                                 <input
                                   class="PrivateSwitchBase-input css-1m9pwf3"
@@ -185,7 +185,7 @@ describe('OpenlinkModal', () => {
                               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                             >
                               <span
-                                class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-hkw0i8-MuiButtonBase-root-MuiCheckbox-root"
+                                class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-qaev87-MuiButtonBase-root-MuiCheckbox-root"
                               >
                                 <input
                                   class="PrivateSwitchBase-input css-1m9pwf3"
@@ -228,7 +228,7 @@ describe('OpenlinkModal', () => {
                               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                             >
                               <span
-                                class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-hkw0i8-MuiButtonBase-root-MuiCheckbox-root"
+                                class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root MuiCheckbox-colorPrimary css-qaev87-MuiButtonBase-root-MuiCheckbox-root"
                               >
                                 <input
                                   class="PrivateSwitchBase-input css-1m9pwf3"
@@ -264,7 +264,7 @@ describe('OpenlinkModal', () => {
                               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                             >
                               <button
-                                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge OpenlinkModalbuttonBack css-1eslh5b-MuiButtonBase-root-MuiButton-root"
+                                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge OpenlinkModalbuttonBack css-1emapyx-MuiButtonBase-root-MuiButton-root"
                                 tabindex="0"
                                 type="button"
                               >
diff --git a/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx b/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx
index 2fec9632fb..ddc6f5c1d6 100644
--- a/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx
+++ b/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx
@@ -16,6 +16,8 @@ import Icon from '../Icon/Icon'
 import exclamationMark from '../../../static/images/exclamationMark.svg'
 import Modal from '../Modal/Modal'
 
+import theme from '../../../theme'
+
 const PREFIX = 'OpenlinkModal'
 
 const classes = {
@@ -201,7 +203,7 @@ export const OpenlinkModal: React.FC<OpenLinkModalProps> = ({
                   <Grid item xs>
                     <a
                       style={{
-                        color: '#67BFD3',
+                        color: theme.palette.colors.lushSky,
                         textDecoration: 'none',
                         wordBreak: 'break-all',
                       }}
diff --git a/packages/desktop/src/renderer/components/ui/Page/Page.test.tsx b/packages/desktop/src/renderer/components/ui/Page/Page.test.tsx
index 11ab288c1d..b84a4d7796 100644
--- a/packages/desktop/src/renderer/components/ui/Page/Page.test.tsx
+++ b/packages/desktop/src/renderer/components/ui/Page/Page.test.tsx
@@ -22,7 +22,7 @@ describe('Page', () => {
             style="height: 100vh;"
           >
             <div
-              class="MuiGrid-root MuiGrid-item PageHeaderroot css-1rrhga1-MuiGrid-root"
+              class="MuiGrid-root MuiGrid-item PageHeaderroot css-1soy4gb-MuiGrid-root"
             >
               <div>
                 Test header
diff --git a/packages/desktop/src/renderer/components/ui/Page/PageHeader.test.tsx b/packages/desktop/src/renderer/components/ui/Page/PageHeader.test.tsx
index a882a33bc3..dbe861ae68 100644
--- a/packages/desktop/src/renderer/components/ui/Page/PageHeader.test.tsx
+++ b/packages/desktop/src/renderer/components/ui/Page/PageHeader.test.tsx
@@ -15,7 +15,7 @@ describe('PageHeader', () => {
       <body>
         <div>
           <div
-            class="MuiGrid-root MuiGrid-item PageHeaderroot css-1rrhga1-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-item PageHeaderroot css-1soy4gb-MuiGrid-root"
           >
             <div>
               Test Header
diff --git a/packages/desktop/src/renderer/components/ui/Page/PageHeader.tsx b/packages/desktop/src/renderer/components/ui/Page/PageHeader.tsx
index bc8ca2c08b..1311c8ac90 100644
--- a/packages/desktop/src/renderer/components/ui/Page/PageHeader.tsx
+++ b/packages/desktop/src/renderer/components/ui/Page/PageHeader.tsx
@@ -12,7 +12,7 @@ const classes = {
 
 const StyledGrid = styled(Grid)(({ theme }) => ({
   [`&.${classes.root}`]: {
-    background: theme.palette.colors.white,
+    background: theme.palette.background.default,
     order: -1,
     zIndex: 9,
   },
diff --git a/packages/desktop/src/renderer/components/ui/PopupMenu/PopupMenu.test.tsx b/packages/desktop/src/renderer/components/ui/PopupMenu/PopupMenu.test.tsx
index ceb8c56e91..2f4795cf15 100644
--- a/packages/desktop/src/renderer/components/ui/PopupMenu/PopupMenu.test.tsx
+++ b/packages/desktop/src/renderer/components/ui/PopupMenu/PopupMenu.test.tsx
@@ -15,7 +15,7 @@ describe('PopupMenu', () => {
       <body>
         <div>
           <div
-            class="PopupMenupopper css-hpnfa6-MuiPopper-root MuiPopperUnstyled-root"
+            class="PopupMenupopper css-onm1r1-MuiPopper-root MuiPopperUnstyled-root"
             role="tooltip"
             style="position: fixed; top: 0px; left: 0px;"
           >
@@ -24,7 +24,7 @@ describe('PopupMenu', () => {
               style="opacity: 1; transform: scale(1, 1); transform-origin: center bottom; transition: opacity 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 PopupMenupaper css-1ps6pg7-MuiPaper-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 PopupMenupaper css-cjelvf-MuiPaper-root"
               >
                 <div>
                   Content
@@ -65,7 +65,7 @@ describe('PopupMenu', () => {
       <body>
         <div>
           <div
-            class="PopupMenupopper css-hpnfa6-MuiPopper-root MuiPopperUnstyled-root"
+            class="PopupMenupopper css-onm1r1-MuiPopper-root MuiPopperUnstyled-root"
             role="tooltip"
             style="position: fixed; top: 0px; left: 0px;"
           >
@@ -74,7 +74,7 @@ describe('PopupMenu', () => {
               style="opacity: 1; transform: scale(1, 1); transform-origin: center bottom; transition: opacity 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 PopupMenupaper css-1ps6pg7-MuiPaper-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 PopupMenupaper css-cjelvf-MuiPaper-root"
               >
                 <div>
                   Content
diff --git a/packages/desktop/src/renderer/components/ui/ProgressFab/ProgressFab.test.tsx b/packages/desktop/src/renderer/components/ui/ProgressFab/ProgressFab.test.tsx
index 6af2a13abd..4d813b0529 100644
--- a/packages/desktop/src/renderer/components/ui/ProgressFab/ProgressFab.test.tsx
+++ b/packages/desktop/src/renderer/components/ui/ProgressFab/ProgressFab.test.tsx
@@ -19,7 +19,7 @@ describe('ProgressFab', () => {
             class="ProgressFabwrapper css-jv05tx"
           >
             <button
-              class="MuiButtonBase-root MuiFab-root ProgressFabroot MuiFab-circular MuiFab-sizeLarge MuiFab-default MuiFab-root ProgressFabroot MuiFab-circular MuiFab-sizeLarge MuiFab-default css-1juup33-MuiButtonBase-root-MuiFab-root"
+              class="MuiButtonBase-root MuiFab-root ProgressFabroot MuiFab-circular MuiFab-sizeLarge MuiFab-default MuiFab-root ProgressFabroot MuiFab-circular MuiFab-sizeLarge MuiFab-default css-1g105mj-MuiButtonBase-root-MuiFab-root"
               tabindex="0"
               type="button"
             >
@@ -49,7 +49,7 @@ describe('ProgressFab', () => {
             class="ProgressFabwrapper css-jv05tx"
           >
             <button
-              class="MuiButtonBase-root MuiFab-root ProgressFabroot ProgressFabbuttonSuccess MuiFab-circular MuiFab-sizeLarge MuiFab-default MuiFab-root ProgressFabroot ProgressFabbuttonSuccess MuiFab-circular MuiFab-sizeLarge MuiFab-default css-1juup33-MuiButtonBase-root-MuiFab-root"
+              class="MuiButtonBase-root MuiFab-root ProgressFabroot ProgressFabbuttonSuccess MuiFab-circular MuiFab-sizeLarge MuiFab-default MuiFab-root ProgressFabroot ProgressFabbuttonSuccess MuiFab-circular MuiFab-sizeLarge MuiFab-default css-1g105mj-MuiButtonBase-root-MuiFab-root"
               tabindex="0"
               type="button"
             >
@@ -87,7 +87,7 @@ describe('ProgressFab', () => {
             class="ProgressFabwrapper css-jv05tx"
           >
             <button
-              class="MuiButtonBase-root MuiFab-root ProgressFabroot MuiFab-circular MuiFab-sizeLarge MuiFab-default MuiFab-root ProgressFabroot MuiFab-circular MuiFab-sizeLarge MuiFab-default css-1juup33-MuiButtonBase-root-MuiFab-root"
+              class="MuiButtonBase-root MuiFab-root ProgressFabroot MuiFab-circular MuiFab-sizeLarge MuiFab-default MuiFab-root ProgressFabroot MuiFab-circular MuiFab-sizeLarge MuiFab-default css-1g105mj-MuiButtonBase-root-MuiFab-root"
               tabindex="0"
               type="button"
             >
@@ -99,7 +99,7 @@ describe('ProgressFab', () => {
               />
             </button>
             <span
-              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary ProgressFabfabProgress css-9a4009-MuiCircularProgress-root"
+              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary ProgressFabfabProgress css-acfop9-MuiCircularProgress-root"
               role="progressbar"
               style="width: 68px; height: 68px;"
             >
@@ -136,7 +136,7 @@ describe('ProgressFab', () => {
             class="ProgressFabwrapper css-jv05tx"
           >
             <button
-              class="MuiButtonBase-root MuiFab-root ProgressFabroot ProgressFabbuttonSuccess MuiFab-circular MuiFab-sizeLarge MuiFab-default Mui-disabled MuiFab-root ProgressFabroot ProgressFabbuttonSuccess MuiFab-circular MuiFab-sizeLarge MuiFab-default css-1juup33-MuiButtonBase-root-MuiFab-root"
+              class="MuiButtonBase-root MuiFab-root ProgressFabroot ProgressFabbuttonSuccess MuiFab-circular MuiFab-sizeLarge MuiFab-default Mui-disabled MuiFab-root ProgressFabroot ProgressFabbuttonSuccess MuiFab-circular MuiFab-sizeLarge MuiFab-default css-1g105mj-MuiButtonBase-root-MuiFab-root"
               disabled=""
               tabindex="-1"
               type="button"
diff --git a/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.test.tsx b/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.test.tsx
index 9d5527d5ee..67658154dd 100644
--- a/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.test.tsx
+++ b/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.test.tsx
@@ -35,7 +35,7 @@ describe('QuitAppDialog', () => {
           >
             <div
               aria-labelledby=":r0:"
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm css-1t1j96h-MuiPaper-root-MuiDialog-paper"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm css-dwk3d9-MuiPaper-root-MuiDialog-paper"
               role="dialog"
             >
               <div
diff --git a/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.tsx b/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.tsx
index d3c128e089..d451e4ddf9 100644
--- a/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.tsx
+++ b/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.tsx
@@ -28,11 +28,11 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
   },
 
   [`& .${classes.dialogContent}`]: {
-    borderBottom: `1px solid ${theme.palette.colors.veryLightGray}`,
+    borderBottom: `1px solid ${theme.palette.colors.border01}`,
   },
 
   [`& .${classes.buttonNo}`]: {
-    borderRight: `1px solid ${theme.palette.colors.veryLightGray}`,
+    borderRight: `1px solid ${theme.palette.colors.border01}`,
     cursor: 'pointer',
     padding: 10,
   },
diff --git a/packages/desktop/src/renderer/components/ui/Slider/Slider.test.tsx b/packages/desktop/src/renderer/components/ui/Slider/Slider.test.tsx
index 3de1ba0c04..0f55bfb67d 100644
--- a/packages/desktop/src/renderer/components/ui/Slider/Slider.test.tsx
+++ b/packages/desktop/src/renderer/components/ui/Slider/Slider.test.tsx
@@ -44,7 +44,7 @@ describe('Slider', () => {
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true SlidersliderContainer css-1vd824g-MuiGrid-root"
                 >
                   <span
-                    class="MuiSlider-root SlidersliderRoot MuiSlider-colorPrimary MuiSlider-sizeMedium css-1v7afla-MuiSlider-root"
+                    class="MuiSlider-root SlidersliderRoot MuiSlider-colorPrimary MuiSlider-sizeMedium css-1diqobq-MuiSlider-root"
                   >
                     <span
                       class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
@@ -114,7 +114,7 @@ describe('Slider', () => {
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true SlidersliderContainer css-1vd824g-MuiGrid-root"
                 >
                   <span
-                    class="MuiSlider-root SlidersliderRoot MuiSlider-colorPrimary MuiSlider-sizeMedium css-1v7afla-MuiSlider-root"
+                    class="MuiSlider-root SlidersliderRoot MuiSlider-colorPrimary MuiSlider-sizeMedium css-1diqobq-MuiSlider-root"
                   >
                     <span
                       class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
@@ -184,7 +184,7 @@ describe('Slider', () => {
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true SlidersliderContainer css-1vd824g-MuiGrid-root"
                 >
                   <span
-                    class="MuiSlider-root SlidersliderRoot MuiSlider-colorPrimary MuiSlider-sizeMedium css-1v7afla-MuiSlider-root"
+                    class="MuiSlider-root SlidersliderRoot MuiSlider-colorPrimary MuiSlider-sizeMedium css-1diqobq-MuiSlider-root"
                   >
                     <span
                       class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
diff --git a/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx b/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx
index dcb917480a..4627e2ba1e 100644
--- a/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx
+++ b/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx
@@ -16,7 +16,7 @@ const classes = {
 const StyledGrid = styled(Grid)(({ theme }) => ({
   [`& .${classes.message}`]: {
     marginTop: theme.spacing(2),
-    color: theme.palette.primary.main,
+    color: theme.palette.colors.mediumGray,
   },
 
   [`& .${classes.spinner}`]: (props: any) => ({
diff --git a/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx b/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx
index d2e8792d38..cb3913da05 100644
--- a/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx
+++ b/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx
@@ -19,7 +19,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
 
   [`& .${classes.divider}`]: {
     height: 1,
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.colors.border01,
   },
 
   [`& .${classes.titleDiv}`]: {
diff --git a/packages/desktop/src/renderer/components/widgets/WarningModal/WarningModal.test.tsx b/packages/desktop/src/renderer/components/widgets/WarningModal/WarningModal.test.tsx
index 2617b0439f..150a1d7532 100644
--- a/packages/desktop/src/renderer/components/widgets/WarningModal/WarningModal.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/WarningModal/WarningModal.test.tsx
@@ -15,7 +15,7 @@ describe('WarningModal', () => {
           aria-hidden="true"
         />
         <div
-          class="MuiModal-root css-1vjugmr-MuiModal-root"
+          class="MuiModal-root css-1evs64r-MuiModal-root"
           role="presentation"
         >
           <div
@@ -132,7 +132,7 @@ describe('WarningModal', () => {
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
                     >
                       <button
-                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-fullWidth WarningModalbutton css-n0wap0-MuiButtonBase-root-MuiButton-root"
+                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-fullWidth WarningModalbutton css-6lwcrk-MuiButtonBase-root-MuiButton-root"
                         data-testid="warningModalSubmit"
                         tabindex="0"
                         type="submit"
diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.test.tsx
index 47367f9b79..2b9beeff3d 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.test.tsx
@@ -32,7 +32,7 @@ describe('BasicMessage', () => {
       <body>
         <div>
           <li
-            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-13gdcvl-MuiListItem-root"
+            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-w0zr2t-MuiListItem-root"
           >
             <div
               class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
@@ -121,7 +121,7 @@ describe('BasicMessage', () => {
       <body>
         <div>
           <li
-            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-13gdcvl-MuiListItem-root"
+            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-w0zr2t-MuiListItem-root"
           >
             <div
               class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
@@ -220,7 +220,7 @@ describe('BasicMessage', () => {
       <body>
         <div>
           <li
-            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding  css-13gdcvl-MuiListItem-root"
+            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding  css-w0zr2t-MuiListItem-root"
           >
             <div
               class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
@@ -323,7 +323,7 @@ describe('BasicMessage', () => {
       <body>
         <div>
           <li
-            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-13gdcvl-MuiListItem-root"
+            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-w0zr2t-MuiListItem-root"
           >
             <div
               class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
index 0f92ddfe6b..1a43ad6625 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
@@ -52,7 +52,7 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({
   },
 
   [`&.${classes.wrapper}`]: {
-    backgroundColor: theme.palette.colors.white,
+    backgroundColor: theme.palette.background.default,
     '&:hover': {
       backgroundColor: theme.palette.colors.gray03,
     },
@@ -67,7 +67,7 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({
   },
 
   [`& .${classes.wrapperPending}`]: {
-    background: theme.palette.colors.white,
+    background: theme.palette.background.default,
   },
 
   [`& .${classes.username}`]: {
@@ -97,7 +97,7 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({
     marginRight: 10,
     marginBottom: 4,
     borderRadius: 4,
-    backgroundColor: theme.palette.colors.grayBackgroud,
+    backgroundColor: theme.palette.background.paper,
   },
 
   [`& .${classes.alignAvatar}`]: {
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.test.tsx
index ca8ea8b5f6..5f986fe37e 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.test.tsx
@@ -10,7 +10,7 @@ describe('ChannelHeader', () => {
       <body>
         <div>
           <div
-            class="ChannelHeaderComponentwrapper css-duzuvw"
+            class="ChannelHeaderComponentwrapper css-1og65k3"
           >
             <div
               class="MuiGrid-root MuiGrid-container ChannelHeaderComponentroot css-9cyib4-MuiGrid-root"
@@ -49,7 +49,7 @@ describe('ChannelHeader', () => {
       <body>
         <div>
           <div
-            class="ChannelHeaderComponentwrapper css-duzuvw"
+            class="ChannelHeaderComponentwrapper css-1og65k3"
           >
             <div
               class="MuiGrid-root MuiGrid-container ChannelHeaderComponentroot css-9cyib4-MuiGrid-root"
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
index 0d065ecd10..cc3b03e414 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
@@ -36,7 +36,7 @@ const Root = styled('div')(({ theme }) => ({
     height: '75px',
     paddingLeft: 20,
     paddingRight: 24,
-    borderBottom: `1px solid ${theme.palette.colors.veryLightGray}`,
+    borderBottom: `1px solid ${theme.palette.colors.border01}`,
   },
 
   [`& .${classes.title}`]: {
@@ -91,8 +91,8 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.descriptionDiv}`]: {
     top: 75,
     padding: '12px 25px 12px 20px',
-    backgroundColor: theme.palette.colors.white,
-    boxShadow: `0px 1px 0px ${theme.palette.colors.veryLightGray}`,
+    backgroundColor: theme.palette.background.default,
+    boxShadow: theme.shadows[2],
   },
 
   [`&.${classes.wrapper}`]: {},
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.test.tsx
index 7af8a90005..819b4da6b9 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.test.tsx
@@ -28,7 +28,7 @@ describe('ChannelInput', () => {
       <body>
         <div>
           <div
-            class="MuiGrid-root ChannelInputroot css-1n4ubjj-MuiGrid-root"
+            class="MuiGrid-root ChannelInputroot css-2s8abn-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column ChannelInputrootContent css-6gh8l0-MuiGrid-root"
@@ -114,7 +114,7 @@ describe('ChannelInput', () => {
       <body>
         <div>
           <div
-            class="MuiGrid-root ChannelInputroot ChannelInputnotAllowed css-1n4ubjj-MuiGrid-root"
+            class="MuiGrid-root ChannelInputroot ChannelInputnotAllowed css-2s8abn-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column ChannelInputrootContent css-6gh8l0-MuiGrid-root"
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
index 7f5d2d2aac..88dbcbb14c 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
@@ -45,12 +45,12 @@ const maxHeight = 300
 
 const StyledChannelInput = styled(Grid)(({ theme }) => ({
   [`&.${classes.root}`]: {
-    background: '#fff',
+    background: theme.palette.background.default,
     height: '100%',
     width: '100%',
   },
   [`& .${classes.rootContent}`]: {
-    background: '#fff',
+    background: theme.palette.background.default,
     height: '100%',
     width: '100%',
   },
@@ -86,7 +86,7 @@ const StyledChannelInput = styled(Grid)(({ theme }) => ({
     paddingRight: '60px',
   },
   [`& .${classes.textfield}`]: {
-    border: `1px solid ${theme.palette.colors.veryLightGray}`,
+    border: `1px solid ${theme.palette.colors.border01}`,
     maxHeight: maxHeight,
     overflowY: 'auto',
     borderRadius: 4,
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.test.tsx
index 9973745e00..fcde528eb7 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.test.tsx
@@ -19,7 +19,7 @@ describe('MentionElement', () => {
       <body>
         <div>
           <div
-            class="MuiGrid-root MuiGrid-container MentionElementroot MentionElementhighlight css-1mfbfa2-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MentionElementroot MentionElementhighlight css-1t8z9cn-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item MentionElementavatarDiv css-13i4rnv-MuiGrid-root"
@@ -64,7 +64,7 @@ describe('MentionElement', () => {
       <body>
         <div>
           <div
-            class="MuiGrid-root MuiGrid-container MentionElementroot css-1mfbfa2-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MentionElementroot css-1t8z9cn-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item MentionElementavatarDiv css-13i4rnv-MuiGrid-root"
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx
index 7d97ae2030..ccfe988c84 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx
@@ -28,7 +28,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     maxHeight: 18,
     maxWidth: 18,
     borderRadius: 4,
-    backgroundColor: theme.palette.colors.grayBackgroud,
+    backgroundColor: theme.palette.background.paper,
   },
 
   [`& .${classes.alignAvatar}`]: {
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionPoper.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionPoper.test.tsx
index cdcc46eb8b..690e619074 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionPoper.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionPoper.test.tsx
@@ -22,7 +22,7 @@ describe('MentionPoper', () => {
           style="position: fixed; top: 0px; left: 0px; transform: translate3d(0px,0px,0px; z-index: -1;"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1ps6pg7-MuiPaper-root"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-cjelvf-MuiPaper-root"
           >
             <div
               class="rc-scrollbars-container"
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.test.tsx
index 6c0b32cfc8..24b937b94d 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.test.tsx
@@ -46,7 +46,7 @@ describe('ChannelMessages', () => {
       <body>
         <div>
           <div
-            class="ChannelMessagesComponentscroll css-gca61p"
+            class="ChannelMessagesComponentscroll css-t1qm6i"
             data-testid="channelContent"
           >
             <ul
@@ -83,7 +83,7 @@ describe('ChannelMessages', () => {
                   </div>
                 </div>
                 <li
-                  class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-13gdcvl-MuiListItem-root"
+                  class="MuiListItem-root MuiListItem-gutters MuiListItem-padding BasicMessageComponentwrapper css-w0zr2t-MuiListItem-root"
                 >
                   <div
                     class="MuiListItemText-root BasicMessageComponentmessageCard css-tlelie-MuiListItemText-root"
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx
index b2277f4c5e..5445b7170d 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx
@@ -42,7 +42,7 @@ const Root = styled('div')(({ theme }) => ({
   },
 
   [`& .${classes.list}`]: {
-    backgroundColor: theme.palette.colors.white,
+    backgroundColor: theme.palette.background.default,
     width: '100%',
   },
 
diff --git a/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.test.tsx
index 77c423288e..f59ebae54f 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.test.tsx
@@ -233,7 +233,7 @@ describe('NestedMessageContent', () => {
                     >
                       <span
                         aria-valuenow="100"
-                        class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1rhqaqh-MuiCircularProgress-root"
+                        class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1036n7b-MuiCircularProgress-root"
                         role="progressbar"
                         style="width: 18px; height: 18px; transform: rotate(-90deg); position: absolute; color: rgb(231, 231, 231);"
                       >
@@ -254,7 +254,7 @@ describe('NestedMessageContent', () => {
                       </span>
                       <span
                         aria-valuenow="50"
-                        class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1rhqaqh-MuiCircularProgress-root"
+                        class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1036n7b-MuiCircularProgress-root"
                         role="progressbar"
                         style="width: 18px; height: 18px; transform: rotate(-90deg); color: rgb(178, 178, 178);"
                       >
diff --git a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
index a129eb8236..51ad2dcb41 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
@@ -55,12 +55,12 @@ const StyledTypography = styled(Typography)(() => ({
   },
 
   [`& .${classes.code}`]: {
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.background.paper,
     padding: '.25em',
   },
 
   [`& .${classes.pre}`]: {
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.background.paper,
     padding: '.25em',
   },
 
@@ -95,7 +95,7 @@ const StyledTypography = styled(Typography)(() => ({
   [`& .${classes.tableHeaderCell}`]: {
     borderBottom: 'solid',
     borderBottomWidth: 1,
-    borderColor: theme.palette.colors.veryLightGray,
+    borderColor: theme.palette.colors.border01,
     textAlign: 'center',
   },
 
diff --git a/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.test.tsx
index 1f9578136d..70f9a847e3 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.test.tsx
@@ -17,7 +17,7 @@ describe('WelcomeMessage', () => {
       <body>
         <div>
           <li
-            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding WelcomeMessagewrapper css-eob61c-MuiListItem-root"
+            class="MuiListItem-root MuiListItem-gutters MuiListItem-padding WelcomeMessagewrapper css-142ua8s-MuiListItem-root"
           >
             <div
               class="MuiListItemText-root MuiListItemText-multiline WelcomeMessagemessageCard css-konndc-MuiListItemText-root"
diff --git a/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.tsx
index 6abe9cf642..63223cd8b6 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/WelcomeMessage.tsx
@@ -31,7 +31,7 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({
   },
 
   [`&.${classes.wrapper}`]: {
-    backgroundColor: theme.palette.colors.white,
+    backgroundColor: theme.palette.background.default,
   },
 
   [`& .${classes.username}`]: {
diff --git a/packages/desktop/src/renderer/components/widgets/possibleImpersonationAttackModal/PossibleImpersonationAttackModal.test.tsx b/packages/desktop/src/renderer/components/widgets/possibleImpersonationAttackModal/PossibleImpersonationAttackModal.test.tsx
index 0946bdce3e..e8677f7de2 100644
--- a/packages/desktop/src/renderer/components/widgets/possibleImpersonationAttackModal/PossibleImpersonationAttackModal.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/possibleImpersonationAttackModal/PossibleImpersonationAttackModal.test.tsx
@@ -19,7 +19,7 @@ describe('PossibleImpersonationAttackModal', () => {
           aria-hidden="true"
         />
         <div
-          class="MuiModal-root css-1vjugmr-MuiModal-root"
+          class="MuiModal-root css-1evs64r-MuiModal-root"
           role="presentation"
         >
           <div
diff --git a/packages/desktop/src/renderer/components/widgets/sentryWarning/SentryWarningComponent.tsx b/packages/desktop/src/renderer/components/widgets/sentryWarning/SentryWarningComponent.tsx
index d049a373aa..fc5a4afa2d 100644
--- a/packages/desktop/src/renderer/components/widgets/sentryWarning/SentryWarningComponent.tsx
+++ b/packages/desktop/src/renderer/components/widgets/sentryWarning/SentryWarningComponent.tsx
@@ -13,7 +13,7 @@ const classes = {
 }
 
 const StyledModalContent = styled(Grid)(({ theme }) => ({
-  backgroundColor: theme.palette.colors.white,
+  backgroundColor: theme.palette.background.default,
   padding: '0px 32px',
 
   [`& .${classes.title}`]: {
diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx
index 9f372f17fa..02b99a03a8 100644
--- a/packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx
+++ b/packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx
@@ -23,7 +23,7 @@ const classes = {
 }
 
 const StyledModalContent = styled(Grid)(({ theme }) => ({
-  backgroundColor: theme.palette.colors.white,
+  backgroundColor: theme.palette.background.default,
   border: 'none',
 
   [`& .${classes.info}`]: {
diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.test.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.test.tsx
index ea7762187f..aa7d337213 100644
--- a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.test.tsx
@@ -22,7 +22,7 @@ describe('UpdateModal', () => {
           aria-hidden="true"
         />
         <div
-          class="MuiModal-root css-1vjugmr-MuiModal-root"
+          class="MuiModal-root css-1evs64r-MuiModal-root"
           role="presentation"
         >
           <div
@@ -91,7 +91,7 @@ describe('UpdateModal', () => {
                 style="width: 600px;"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1xjw49x-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-18p20vr-MuiGrid-root"
                 >
                   <div
                     class="MuiGrid-root css-vj1n65-MuiGrid-root"
diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.tsx
index 242d7b52fa..68606f9a81 100644
--- a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.tsx
+++ b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.tsx
@@ -15,7 +15,7 @@ const classes = {
 }
 
 const StyledModalContent = styled(Grid)(({ theme }) => ({
-  backgroundColor: theme.palette.colors.white,
+  backgroundColor: theme.palette.background.default,
   border: 'none',
   marginTop: '-60px',
 
diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx
index 940530e206..62e2f26f56 100644
--- a/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx
@@ -19,7 +19,7 @@ describe('DuplicateModalComponent', () => {
           aria-hidden="true"
         />
         <div
-          class="MuiModal-root css-1vjugmr-MuiModal-root"
+          class="MuiModal-root css-1evs64r-MuiModal-root"
           role="presentation"
         >
           <div
diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.test.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.test.tsx
index 784ce2eb8e..f6d3b47b49 100644
--- a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.test.tsx
+++ b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.test.tsx
@@ -19,7 +19,7 @@ describe('UnregisteredModalComponent', () => {
           aria-hidden="true"
         />
         <div
-          class="MuiModal-root css-1vjugmr-MuiModal-root"
+          class="MuiModal-root css-1evs64r-MuiModal-root"
           role="presentation"
         >
           <div
@@ -109,7 +109,7 @@ describe('UnregisteredModalComponent', () => {
                      will be registered automatically and this alert will go away.
                   </p>
                   <button
-                    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium UnregisteredModalComponent-button css-1skytee-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium UnregisteredModalComponent-button css-18k1y27-MuiButtonBase-root-MuiButton-root"
                     data-testid="unregistered-button"
                     tabindex="0"
                     type="button"
diff --git a/packages/desktop/src/renderer/components/windows/Index.test.tsx b/packages/desktop/src/renderer/components/windows/Index.test.tsx
index 660a935ace..e6a146a757 100644
--- a/packages/desktop/src/renderer/components/windows/Index.test.tsx
+++ b/packages/desktop/src/renderer/components/windows/Index.test.tsx
@@ -27,14 +27,14 @@ describe('Index', () => {
                 class="MuiGrid-root MuiGrid-item LoadingprogressBarContainer css-13i4rnv-MuiGrid-root"
               >
                 <span
-                  class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate LoadingprogressBar css-1sitdca-MuiLinearProgress-root"
+                  class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate LoadingprogressBar css-11iigj6-MuiLinearProgress-root"
                   role="progressbar"
                 >
                   <span
-                    class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-16ee83t-MuiLinearProgress-bar1"
+                    class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-1yjyqie-MuiLinearProgress-bar1"
                   />
                   <span
-                    class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1f9igvw-MuiLinearProgress-bar2"
+                    class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1lju9te-MuiLinearProgress-bar2"
                   />
                 </span>
               </div>
@@ -77,14 +77,14 @@ describe('Index', () => {
                 class="MuiGrid-root MuiGrid-item LoadingprogressBarContainer css-13i4rnv-MuiGrid-root"
               >
                 <span
-                  class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate LoadingprogressBar css-1sitdca-MuiLinearProgress-root"
+                  class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate LoadingprogressBar css-11iigj6-MuiLinearProgress-root"
                   role="progressbar"
                 >
                   <span
-                    class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-16ee83t-MuiLinearProgress-bar1"
+                    class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-1yjyqie-MuiLinearProgress-bar1"
                   />
                   <span
-                    class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1f9igvw-MuiLinearProgress-bar2"
+                    class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1lju9te-MuiLinearProgress-bar2"
                   />
                 </span>
               </div>
diff --git a/packages/desktop/src/renderer/components/windows/Loading.test.tsx b/packages/desktop/src/renderer/components/windows/Loading.test.tsx
index 2d6fa9f07c..e88075c481 100644
--- a/packages/desktop/src/renderer/components/windows/Loading.test.tsx
+++ b/packages/desktop/src/renderer/components/windows/Loading.test.tsx
@@ -24,14 +24,14 @@ describe('Loading', () => {
               class="MuiGrid-root MuiGrid-item LoadingprogressBarContainer css-13i4rnv-MuiGrid-root"
             >
               <span
-                class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate LoadingprogressBar css-1sitdca-MuiLinearProgress-root"
+                class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate LoadingprogressBar css-11iigj6-MuiLinearProgress-root"
                 role="progressbar"
               >
                 <span
-                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-16ee83t-MuiLinearProgress-bar1"
+                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-1yjyqie-MuiLinearProgress-bar1"
                 />
                 <span
-                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1f9igvw-MuiLinearProgress-bar2"
+                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1lju9te-MuiLinearProgress-bar2"
                 />
               </span>
             </div>
diff --git a/packages/desktop/src/renderer/components/windows/Main.test.tsx b/packages/desktop/src/renderer/components/windows/Main.test.tsx
index 13c7b82857..07bf1bc4fe 100644
--- a/packages/desktop/src/renderer/components/windows/Main.test.tsx
+++ b/packages/desktop/src/renderer/components/windows/Main.test.tsx
@@ -46,7 +46,7 @@ describe('Main', () => {
                           class="css-1c9y83e"
                         >
                           <span
-                            class="MuiButtonBase-root MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1skytee-MuiButtonBase-root-MuiButton-root"
+                            class="MuiButtonBase-root MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root IdentityPanelbutton MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-18k1y27-MuiButtonBase-root-MuiButton-root"
                             data-testid="settings-panel-button"
                             role="button"
                             tabindex="0"
@@ -151,7 +151,7 @@ describe('Main', () => {
                                     data-testid="channelsList"
                                   >
                                     <div
-                                      class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-1u7u4xu-MuiButtonBase-root-MuiListItemButton-root"
+                                      class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
                                       data-testid="general-link"
                                       role="button"
                                       tabindex="0"
@@ -249,7 +249,7 @@ describe('Main', () => {
                           class="css-9zw54k"
                         >
                           <div
-                            class="MuiButtonBase-root MuiButton-root UserProfilePanel-button MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root UserProfilePanel-button MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1skytee-MuiButtonBase-root-MuiButton-root"
+                            class="MuiButtonBase-root MuiButton-root UserProfilePanel-button MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root UserProfilePanel-button MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-18k1y27-MuiButtonBase-root-MuiButton-root"
                             data-testid="user-profile-menu-button"
                             role="button"
                             tabindex="0"
diff --git a/packages/desktop/src/renderer/theme.ts b/packages/desktop/src/renderer/theme.ts
index 46bcafd117..1f42d01060 100644
--- a/packages/desktop/src/renderer/theme.ts
+++ b/packages/desktop/src/renderer/theme.ts
@@ -62,53 +62,65 @@ export default createTheme({
     },
   },
   palette: {
+    background: {
+      // Background colors (white-ish for light theme, black-ish for dark)
+      default: '#ffffff',
+      paper: '#F0F0F0',
+    },
+    // text: {}, // font colors (black-ish for light theme, white-ish for dark)
     primary: {
-      light: '#e9e9e9',
-      main: '#8d8d8d',
-      dark: '#4a4a4a',
+      // Primary Quiet brand purple
+      main: '#521C74',
+      dark: '#461863',
+    },
+    secondary: {
+      // Secondary Quiet brand red (TODO: Make sure this is Secondary, not error/warning)
+      main: '#E42656',
+      dark: '#C41743',
     },
+    // TO BE ADDED IF NEEDED: Success, Warning, Error, Neutral
     colors: {
-      contentGray: '#D2D2D2',
-      titleGray: '#555555',
-      white: '#FFFFFF',
+      // Misc colors. For primary / secondary brand, text, and background colors, use those objects
+      // For canonical colors, see: https://www.figma.com/file/0j7Nna9zWmfOSNmRmQK1Uh/Quiet-Design-Library?type=design&node-id=2667-0&mode=design&t=i0cXovHohRKxWGaA-0
+      // Blues
       blue: '#2196f3',
-      purple: '#521C74',
-      darkPurple: '#4d1a6d',
+      purple: '#521C74', // To be replaced with theme.palette.primary.main
+      quietBlue: '#521c74', // To be replaced with theme.palette.primary.main
+      darkPurple: '#4d1a6d', // To be replaced with theme.palette.primary.dark?
+      lushSky: '#67BFD3',
+      lushSky12: '#EDF7FA',
+      linkBlue: '#59c0d5', // Used in a variety of places - likely wants to be split / consolidated
+      // Reds
+      red: '#FF0000', // Replace with D13135 ?
+      hotRed: '#E42656', // Replaced by theme.palette.secondary.main?
+      hotPink: '#E42656', // Replaced by theme.palette.secondary.main?
+      error: '#D13135', // Need to align with Figma and replace with theme.palette.error.main
+      // Grays (including white and black)
+      white: '#FFFFFF',
+      trueBlack: '#000000', // To be replaced with text color and border color
       gray: '#e7e7e7',
-      inputGray: '#E0E0E0',
-      black: '#333333',
-      trueBlack: '#000000',
-      quietBlue: '#521c74',
-      captionPurple: '#9B60A5',
       darkGray: '#7F7F7F',
+      mediumGray: '#8d8d8d',
+      lightGray: '#B2B2B2', // To be replaced with gray30?
       gray03: '#F7F7F7',
+      gray30: '#FAFAFA', // Unused and not aligned with Figma
       gray40: '#999999',
-      lushSky: '#67BFD3',
-      lushSky12: '#EDF7FA',
-      lightGray: '#B2B2B2',
-      veryLightGray: '#F0F0F0',
-      green: '#4CBB17',
-      greenDark: '#9BD174',
-      red: '#FF0000',
-      hotRed: '#E42656',
-      hotPink: '#E42656',
-      linkBlue: '#59c0d5',
-      buttonGray: '#E3E3E3',
-      black30: '#4C4C4C',
-      gray30: '#FAFAFA',
-      grayBackgroud: '#F3F0F6',
-      gray50: '#B3B3B3',
-      error: '#D13135',
-      logsDark: '#252526',
-      logsActiveDark: '#1E1E1E',
-      logsInactiveDark: '#2D2D2D',
-      logsTitleGray: '#D4D4D4',
-      logsTabWhite: '#A9A9A9',
-      logsScrollBar: '#3D3D3D',
-      logsScrollBarThumb: ' #787878',
-      yellow: '#E6BB46',
+      gray50: '#7F7F7F',
+      black30: '#4C4C4C', // Rename to gray70
+      // Border colors
+      border01: '#F0F0F0',
+      border02: '#B3B3B3',
+      border03: '#D2D2D2',
     },
   },
+  //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820
+  shadows: [
+    'none',
+    '0px 0px 4px rgba(0, 0, 0, 0.25)',
+    '0px 1px 0px #F0F0F0',
+    '0px 1px 3px rgba(0, 0, 0, 0.0)',
+    '0px 2px 25px rgba(0, 0, 0, 0.2)',
+  ],
   components: {
     // Body font size changed in mui v5: https://mui.com/material-ui/migration/v5-component-changes/#update-body-font-size
     MuiCssBaseline: {
@@ -121,6 +133,7 @@ export default createTheme({
       },
     },
     MuiSnackbarContent: {
+      // Replace with atomic Snackbar component. Put styling in that file.
       styleOverrides: {
         root: {
           wordBreak: 'break-all',
@@ -128,6 +141,7 @@ export default createTheme({
       },
     },
     MuiButton: {
+      // Replace with atomic Button component. Put styling in that file.
       styleOverrides: {
         sizeSmall: {
           textTransform: 'none',
@@ -154,11 +168,13 @@ export default createTheme({
       },
     },
     MuiOutlinedInput: {
+      // Replace with atomic Input component. Put styling in that file.
       styleOverrides: {
         input: {},
       },
     },
     MuiPopover: {
+      // Replace with atomic Popover component. Put styling in that file.
       styleOverrides: {
         paper: {
           borderRadius: 8,
diff --git a/packages/mobile/android/app/src/main/java/com/quietmobile/Backend/BackendWorker.kt b/packages/mobile/android/app/src/main/java/com/quietmobile/Backend/BackendWorker.kt
index b25ff8ef7f..57ea48a0ee 100644
--- a/packages/mobile/android/app/src/main/java/com/quietmobile/Backend/BackendWorker.kt
+++ b/packages/mobile/android/app/src/main/java/com/quietmobile/Backend/BackendWorker.kt
@@ -9,14 +9,12 @@ import androidx.core.app.NotificationCompat
 import androidx.work.CoroutineWorker
 import androidx.work.ForegroundInfo
 import androidx.work.WorkerParameters
-import com.google.gson.Gson
 import com.quietmobile.BuildConfig
 import com.quietmobile.Communication.CommunicationModule
+import com.quietmobile.MainApplication
 import com.quietmobile.Notification.NotificationHandler
 import com.quietmobile.R
-import com.quietmobile.Scheme.WebsocketConnectionPayload
 import com.quietmobile.Utils.Const
-import com.quietmobile.Utils.Const.WEBSOCKET_CONNECTION_DELAY
 import com.quietmobile.Utils.Utils
 import com.quietmobile.Utils.isAppOnForeground
 import io.socket.client.IO
@@ -98,9 +96,12 @@ class BackendWorker(private val context: Context, workerParams: WorkerParameters
         withContext(Dispatchers.IO) {
 
             // Get and store data port for usage in methods across the app
-            val dataPort = Utils.getOpenPort(11000)
+            val socketPort = Utils.getOpenPort(11000)
             val socketIOSecret = Utils.generateRandomString(20)
 
+            (applicationContext as MainApplication).setSocketPort(socketPort)
+            (applicationContext as MainApplication).setSocketIOSecret(socketIOSecret)
+
             // Init nodejs project
             launch {
                 nodeProject.init()
@@ -108,21 +109,7 @@ class BackendWorker(private val context: Context, workerParams: WorkerParameters
 
             launch {
                 notificationHandler = NotificationHandler(context)
-                subscribePushNotifications(dataPort, socketIOSecret)
-            }
-
-            launch {
-                /*
-                 * Wait for CommunicationModule to be initialized with reactContext
-                 * (there's no callback we can use for that purpose).
-                 *
-                 * Code featured below suspends nothing but the websocket connection
-                 * and it doesn't affect anything besides that.
-                 *
-                 * In any case, websocket won't connect until data server starts listening
-                 */
-                delay(WEBSOCKET_CONNECTION_DELAY)
-                startWebsocketConnection(dataPort, socketIOSecret)
+                subscribePushNotifications(socketPort, socketIOSecret)
             }
 
             val dataPath = Utils.createDirectory(context)
@@ -139,7 +126,7 @@ class BackendWorker(private val context: Context, workerParams: WorkerParameters
                  * https://github.com/TryQuiet/quiet/issues/2214
                  */
                 delay(500)
-                startNodeProjectWithArguments("bundle.cjs --torBinary $torBinary --dataPath $dataPath --dataPort $dataPort --platform $platform --socketIOSecret $socketIOSecret")
+                startNodeProjectWithArguments("bundle.cjs --torBinary $torBinary --dataPath $dataPath --dataPort $socketPort --platform $platform --socketIOSecret $socketIOSecret")
             }
         }
 
@@ -155,8 +142,6 @@ class BackendWorker(private val context: Context, workerParams: WorkerParameters
         return Result.success()
     }
 
-    private external fun sendMessageToNodeChannel(channelName: String, message: String): Void
-
     private external fun startNodeWithArguments(
         arguments: Array<String?>?,
         modulesPath: String?
@@ -214,17 +199,6 @@ class BackendWorker(private val context: Context, workerParams: WorkerParameters
             notificationHandler.notify(message, username)
         }
 
-    private fun startWebsocketConnection(port: Int, socketIOSecret: String) {
-        Log.d("WEBSOCKET CONNECTION", "Starting on $port")
-        // Proceed only if data port is defined
-        val websocketConnectionPayload = WebsocketConnectionPayload(port, socketIOSecret)
-        CommunicationModule.handleIncomingEvents(
-            CommunicationModule.WEBSOCKET_CONNECTION_CHANNEL,
-            Gson().toJson(websocketConnectionPayload),
-            "" // Empty extras
-        )
-    }
-
     fun handleNodeMessages(channelName: String, msg: String?) {
         print("handle node message - channel name $channelName")
         print("handle node message - msg $msg")
diff --git a/packages/mobile/android/app/src/main/java/com/quietmobile/Communication/CommunicationModule.java b/packages/mobile/android/app/src/main/java/com/quietmobile/Communication/CommunicationModule.java
index e51ee1f125..ff186756b6 100644
--- a/packages/mobile/android/app/src/main/java/com/quietmobile/Communication/CommunicationModule.java
+++ b/packages/mobile/android/app/src/main/java/com/quietmobile/Communication/CommunicationModule.java
@@ -10,7 +10,10 @@
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.modules.core.RCTNativeAppEventEmitter;
+import com.google.gson.Gson;
+import com.quietmobile.MainApplication;
 import com.quietmobile.Notification.NotificationHandler;
+import com.quietmobile.Scheme.WebsocketConnectionPayload;
 
 import androidx.annotation.NonNull;
 
@@ -24,6 +27,8 @@
 
 public class CommunicationModule extends ReactContextBaseJavaModule {
 
+    public static final String APP_READY_CHANNEL = "_APP_READY_";
+
     public static final String PUSH_NOTIFICATION_CHANNEL = "_PUSH_NOTIFICATION_";
     public static final String WEBSOCKET_CONNECTION_CHANNEL = "_WEBSOCKET_CONNECTION_";
     public static final String INIT_CHECK_CHANNEL = "_INIT_CHECK_";
@@ -48,14 +53,16 @@ public CommunicationModule(ReactApplicationContext reactContext) {
     }
 
     @ReactMethod
-    public static void handleIncomingEvents(String event, String payload, String extra) {
+    public static void handleIncomingEvents(String event, @Nullable String payload, @Nullable String extra) {
         switch (event) {
+            case APP_READY_CHANNEL:
+                startWebsocketConnection();
+                break;
             case PUSH_NOTIFICATION_CHANNEL:
                 String message = payload;
                 String username = extra;
                 notificationHandler.notify(message, username);
                 break;
-            case WEBSOCKET_CONNECTION_CHANNEL:
             case INIT_CHECK_CHANNEL:
             case BACKEND_CLOSED_CHANNEL:
                 passDataToReact(event, payload);
@@ -88,6 +95,15 @@ private static void sendEvent(@Nullable WritableMap params) {
         }
     }
 
+    private static void startWebsocketConnection() {
+        Context context = reactContext.getApplicationContext();
+        int port                = ((MainApplication) context).getSocketPort();
+        String socketIOSecret   = ((MainApplication) context).getSocketIOSecret();
+
+        WebsocketConnectionPayload websocketConnectionPayload = new WebsocketConnectionPayload(port, socketIOSecret);
+        passDataToReact(WEBSOCKET_CONNECTION_CHANNEL, new Gson().toJson(websocketConnectionPayload));
+    }
+
     @ReactMethod
     private static void deleteBackendData() {
         Context context = reactContext.getApplicationContext();
diff --git a/packages/mobile/android/app/src/main/java/com/quietmobile/MainApplication.kt b/packages/mobile/android/app/src/main/java/com/quietmobile/MainApplication.kt
index 901a31de38..6b29a6d01a 100644
--- a/packages/mobile/android/app/src/main/java/com/quietmobile/MainApplication.kt
+++ b/packages/mobile/android/app/src/main/java/com/quietmobile/MainApplication.kt
@@ -52,6 +52,25 @@ class MainApplication : Application(), ReactApplication {
         createNotificationChannel()
     }
 
+    private var socketPort: Int = 0
+    private var socketIOSecret: String = ""
+
+    fun getSocketPort(): Int {
+        return socketPort
+    }
+
+    fun setSocketPort(value: Int) {
+        this.socketPort = value
+    }
+
+    fun getSocketIOSecret(): String {
+        return socketIOSecret
+    }
+
+    fun setSocketIOSecret(value: String) {
+        this.socketIOSecret = value
+    }
+
     private fun createForegroundServiceNotificationChannel() {
         // Create the NotificationChannel, but only on API 26+ because
         // the NotificationChannel class is new and not in the support library
diff --git a/packages/mobile/android/app/src/main/java/com/quietmobile/Utils/Const.kt b/packages/mobile/android/app/src/main/java/com/quietmobile/Utils/Const.kt
index ae769aa39d..7254e6a0dc 100644
--- a/packages/mobile/android/app/src/main/java/com/quietmobile/Utils/Const.kt
+++ b/packages/mobile/android/app/src/main/java/com/quietmobile/Utils/Const.kt
@@ -22,7 +22,4 @@ object Const {
     const val NODEJS_PROJECT_DIR = "nodejs-project"
     const val NODEJS_BUILTIN_NATIVE_ASSETS_PREFIX = "nodejs-native-assets-"
     const val NODEJS_TRASH_DIR = "nodejs-project-trash"
-
-    // Websocket
-    const val WEBSOCKET_CONNECTION_DELAY: Long = 7000
 }
diff --git a/packages/mobile/android/app/src/main/java/com/quietmobile/Utils/Utils.kt b/packages/mobile/android/app/src/main/java/com/quietmobile/Utils/Utils.kt
index 29491191a0..7d38d92c2a 100644
--- a/packages/mobile/android/app/src/main/java/com/quietmobile/Utils/Utils.kt
+++ b/packages/mobile/android/app/src/main/java/com/quietmobile/Utils/Utils.kt
@@ -30,6 +30,7 @@ object Utils {
         return dataDirectory.absolutePath
     }
 
+    @JvmStatic
     fun generateRandomString(length: Int): String {
         val CHARACTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
         val secureRandom = SecureRandom()
@@ -43,6 +44,7 @@ object Utils {
         return randomString.toString()
     }
 
+    @JvmStatic
     suspend fun getOpenPort(starting: Int) = suspendCoroutine<Int> { continuation ->
         val port = checkPort(starting)
         continuation.resume(port)
diff --git a/packages/mobile/ios/Quiet.xcodeproj/project.pbxproj b/packages/mobile/ios/Quiet.xcodeproj/project.pbxproj
index c101495008..3a85467e84 100644
--- a/packages/mobile/ios/Quiet.xcodeproj/project.pbxproj
+++ b/packages/mobile/ios/Quiet.xcodeproj/project.pbxproj
@@ -5482,7 +5482,8 @@
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"$(inherited)",
-					" ",
+					"-Wl",
+					"-ld_classic",
 				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
@@ -5547,7 +5548,8 @@
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"$(inherited)",
-					" ",
+					"-Wl",
+					"-ld_classic",
 				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
diff --git a/packages/mobile/src/App.tsx b/packages/mobile/src/App.tsx
index f5128ddc39..4a2666ddfd 100644
--- a/packages/mobile/src/App.tsx
+++ b/packages/mobile/src/App.tsx
@@ -1,7 +1,9 @@
 import React, { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 
-import { LogBox, StatusBar } from 'react-native'
+import { LogBox, NativeModules, StatusBar } from 'react-native'
+
+import { APP_READY_CHANNEL } from '@quiet/state-manager'
 
 import WebviewCrypto from 'react-native-webview-crypto'
 
@@ -28,7 +30,6 @@ import { NavigationContainer } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 
 import { navigationRef } from './RootNavigation'
-import { initActions } from './store/init/init.slice'
 import { navigationActions } from './store/navigation/navigation.slice'
 
 import { rootSaga } from './store/root.saga'
diff --git a/packages/mobile/src/store/init/blindConnection/blindConnection.saga.ts b/packages/mobile/src/store/init/blindConnection/blindConnection.saga.ts
deleted file mode 100644
index 44571067c0..0000000000
--- a/packages/mobile/src/store/init/blindConnection/blindConnection.saga.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { select, put } from 'typed-redux-saga'
-import { initSelectors } from '../init.selectors'
-import { initActions } from '../init.slice'
-
-export function* blindConnectionSaga(): Generator {
-  const isWebsocketConnected = yield* select(initSelectors.isWebsocketConnected)
-  const lastKnownSocketIOData = yield* select(initSelectors.lastKnownSocketIOData)
-
-  console.log('WEBSOCKET', 'Entered blind connection saga', isWebsocketConnected, lastKnownSocketIOData)
-
-  if (!isWebsocketConnected && lastKnownSocketIOData.dataPort !== 0) {
-    console.log('WEBSOCKET', 'Hooking up blindly at last known data port: ', lastKnownSocketIOData.dataPort)
-    yield* put(initActions.startWebsocketConnection(lastKnownSocketIOData))
-  }
-}
diff --git a/packages/mobile/src/store/init/init.master.saga.ts b/packages/mobile/src/store/init/init.master.saga.ts
index af5ddec265..82fc31efd1 100644
--- a/packages/mobile/src/store/init/init.master.saga.ts
+++ b/packages/mobile/src/store/init/init.master.saga.ts
@@ -1,12 +1,10 @@
-import { all, takeEvery, takeLatest, takeLeading } from 'typed-redux-saga'
+import { all, takeLatest, takeLeading } from 'typed-redux-saga'
 import { initActions } from './init.slice'
-import { blindConnectionSaga } from './blindConnection/blindConnection.saga'
 import { startConnectionSaga } from './startConnection/startConnection.saga'
 import { deepLinkSaga } from './deepLink/deepLink.saga'
 
 export function* initMasterSaga(): Generator {
   yield all([
-    takeEvery(initActions.blindWebsocketConnection.type, blindConnectionSaga),
     takeLatest(initActions.startWebsocketConnection.type, startConnectionSaga),
     takeLeading(initActions.deepLink.type, deepLinkSaga),
   ])
diff --git a/packages/mobile/src/store/init/init.slice.ts b/packages/mobile/src/store/init/init.slice.ts
index f256964c22..f9106199d6 100644
--- a/packages/mobile/src/store/init/init.slice.ts
+++ b/packages/mobile/src/store/init/init.slice.ts
@@ -60,7 +60,6 @@ export const initSlice = createSlice({
         id: event,
       })
     },
-    blindWebsocketConnection: state => state,
     startWebsocketConnection: (state, _action: PayloadAction<WebsocketConnectionPayload>) => state,
     suspendWebsocketConnection: state => {
       state.isWebsocketConnected = false
diff --git a/packages/mobile/src/store/init/startConnection/restoreConnection/restoreConnection.saga.test.ts b/packages/mobile/src/store/init/startConnection/restoreConnection/restoreConnection.saga.test.ts
deleted file mode 100644
index c9fe7cc4dd..0000000000
--- a/packages/mobile/src/store/init/startConnection/restoreConnection/restoreConnection.saga.test.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { socket } from '@quiet/state-manager'
-import { combineReducers } from '@reduxjs/toolkit'
-import { expectSaga } from 'redux-saga-test-plan'
-import { StoreKeys } from '../../../store.keys'
-import { initActions, initReducer, InitState } from '../../init.slice'
-import { restoreConnectionSaga } from './restoreConnection.saga'
-
-describe('restoreConnectionSaga', () => {
-  test('do nothing if connection is already started', async () => {
-    const socketIOData = {
-      dataPort: 9477,
-      socketIOSecret: 'secret',
-    }
-    await expectSaga(restoreConnectionSaga)
-      .withReducer(combineReducers({ [StoreKeys.Init]: initReducer }), {
-        [StoreKeys.Init]: {
-          ...new InitState(),
-          isWebsocketConnected: true,
-          lastKnownSocketIOData: socketIOData,
-        },
-      })
-      .not.put(initActions.startWebsocketConnection(socketIOData))
-      .run()
-  })
-  test('do nothing if last known data port is not set', async () => {
-    const socketIOData = {
-      dataPort: 0,
-      socketIOSecret: 'secret',
-    }
-    await expectSaga(restoreConnectionSaga)
-      .withReducer(combineReducers({ [StoreKeys.Init]: initReducer }), {
-        [StoreKeys.Init]: {
-          ...new InitState(),
-          isWebsocketConnected: false,
-          lastKnownSocketIOData: socketIOData,
-        },
-      })
-      .not.put(initActions.startWebsocketConnection(socketIOData))
-      .run()
-  })
-})
diff --git a/packages/mobile/src/store/init/startConnection/restoreConnection/restoreConnection.saga.ts b/packages/mobile/src/store/init/startConnection/restoreConnection/restoreConnection.saga.ts
deleted file mode 100644
index 3a7c001360..0000000000
--- a/packages/mobile/src/store/init/startConnection/restoreConnection/restoreConnection.saga.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { delay, put, select } from 'typed-redux-saga'
-import { initSelectors } from '../../init.selectors'
-import { initActions } from '../../init.slice'
-
-const WEBSOCKET_CONNECTION_DELAY = 15000
-
-export function* restoreConnectionSaga(): Generator {
-  // Give the worker time to init websocket connection
-  yield* delay(WEBSOCKET_CONNECTION_DELAY + 1000)
-
-  const isWebsocketConnected = yield* select(initSelectors.isWebsocketConnected)
-  const socketIOData = yield* select(initSelectors.lastKnownSocketIOData)
-
-  console.log('WEBSOCKET', 'Entered restore connection saga', isWebsocketConnected, socketIOData)
-
-  if (!isWebsocketConnected && socketIOData.dataPort !== 0) {
-    console.log('WEBSOCKET', 'Restoring connection with data port: ', socketIOData.dataPort)
-    yield* put(initActions.startWebsocketConnection(socketIOData))
-  }
-}
diff --git a/packages/mobile/src/store/init/startConnection/startConnection.saga.ts b/packages/mobile/src/store/init/startConnection/startConnection.saga.ts
index 6cf1f49ef3..8b19e75084 100644
--- a/packages/mobile/src/store/init/startConnection/startConnection.saga.ts
+++ b/packages/mobile/src/store/init/startConnection/startConnection.saga.ts
@@ -1,5 +1,5 @@
 import { io } from 'socket.io-client'
-import { select, put, call, cancel, fork, takeEvery, FixedTask } from 'typed-redux-saga'
+import { select, put, call, cancel, fork, takeEvery, delay, FixedTask } from 'typed-redux-saga'
 import { PayloadAction } from '@reduxjs/toolkit'
 import { socket as stateManager, Socket } from '@quiet/state-manager'
 import { encodeSecret } from '@quiet/common'
@@ -13,6 +13,16 @@ export function* startConnectionSaga(
   const isAlreadyConnected = yield* select(initSelectors.isWebsocketConnected)
   if (isAlreadyConnected) return
 
+  while (true) {
+    const isCryptoEngineInitialized = yield* select(initSelectors.isCryptoEngineInitialized)
+    console.log('WEBSOCKET', 'Waiting for crypto engine to initialize')
+    if (!isCryptoEngineInitialized) {
+      yield* delay(500)
+    } else {
+      break
+    }
+  }
+
   const { dataPort, socketIOSecret } = action.payload
 
   console.log('WEBSOCKET', 'Entered start connection saga', dataPort)
diff --git a/packages/mobile/src/store/navigation/redirection/redirection.saga.test.ts b/packages/mobile/src/store/navigation/redirection/redirection.saga.test.ts
index 6d8dab20d0..66ea6b5496 100644
--- a/packages/mobile/src/store/navigation/redirection/redirection.saga.test.ts
+++ b/packages/mobile/src/store/navigation/redirection/redirection.saga.test.ts
@@ -12,11 +12,18 @@ import { reducers } from '../../root.reducer'
 
 import { redirectionSaga } from './redirection.saga'
 import { initActions } from '../../init/init.slice'
+import { NativeModules } from 'react-native'
 
 describe('redirectionSaga', () => {
   let store: Store
   let factory: FactoryGirl
 
+  beforeAll(() => {
+    NativeModules.CommunicationModule = {
+      handleIncomingEvents: jest.fn(),
+    }
+  })
+
   beforeEach(async () => {
     setupCrypto()
     store = (await prepareStore()).store
diff --git a/packages/mobile/src/store/navigation/redirection/redirection.saga.ts b/packages/mobile/src/store/navigation/redirection/redirection.saga.ts
index 798ab18390..7c903adfc5 100644
--- a/packages/mobile/src/store/navigation/redirection/redirection.saga.ts
+++ b/packages/mobile/src/store/navigation/redirection/redirection.saga.ts
@@ -1,12 +1,16 @@
-import { put, take, select } from 'typed-redux-saga'
+import { NativeModules } from 'react-native'
+import { call, put, take, select } from 'typed-redux-saga'
 import { initSelectors } from '../../init/init.selectors'
 import { navigationSelectors } from '../navigation.selectors'
 import { navigationActions } from '../navigation.slice'
 import { ScreenNames } from '../../../const/ScreenNames.enum'
-import { identity } from '@quiet/state-manager'
+import { APP_READY_CHANNEL, identity } from '@quiet/state-manager'
 import { initActions } from '../../init/init.slice'
 
 export function* redirectionSaga(): Generator {
+  // Let the native modules know to init web socket connection
+  yield* call(NativeModules.CommunicationModule.handleIncomingEvents, APP_READY_CHANNEL, null, null)
+
   // Do not redirect if user opened the app from url (quiet://)
   const deepLinking = yield* select(initSelectors.deepLinking)
   if (deepLinking) {
diff --git a/packages/mobile/src/store/root.saga.ts b/packages/mobile/src/store/root.saga.ts
index b77b14dfb4..9b2fffff52 100644
--- a/packages/mobile/src/store/root.saga.ts
+++ b/packages/mobile/src/store/root.saga.ts
@@ -1,4 +1,4 @@
-import { all, takeEvery, fork } from 'typed-redux-saga'
+import { all, takeEvery } from 'typed-redux-saga'
 import { nativeServicesMasterSaga } from './nativeServices/nativeServices.master.saga'
 import { navigationMasterSaga } from './navigation/navigation.master.saga'
 import { initMasterSaga } from './init/init.master.saga'
@@ -6,7 +6,6 @@ import { initActions } from './init/init.slice'
 import { setupCryptoSaga } from './init/setupCrypto/setupCrypto.saga'
 import { publicChannels } from '@quiet/state-manager'
 import { showNotificationSaga } from './nativeServices/showNotification/showNotification.saga'
-import { restoreConnectionSaga } from './init/startConnection/restoreConnection/restoreConnection.saga'
 
 export function* rootSaga(): Generator {
   yield all([
@@ -14,7 +13,6 @@ export function* rootSaga(): Generator {
     takeEvery(initActions.setStoreReady.type, initMasterSaga),
     takeEvery(initActions.setStoreReady.type, navigationMasterSaga),
     takeEvery(initActions.setStoreReady.type, nativeServicesMasterSaga),
-    fork(restoreConnectionSaga),
     // Below line is reponsible for displaying notifications about messages from channels other than currently viewing one
     takeEvery(publicChannels.actions.markUnreadChannel.type, showNotificationSaga),
   ])
diff --git a/packages/state-manager/src/constants.ts b/packages/state-manager/src/constants.ts
index a8f9ac9130..848b3409ca 100644
--- a/packages/state-manager/src/constants.ts
+++ b/packages/state-manager/src/constants.ts
@@ -1,5 +1,6 @@
 export const AUTODOWNLOAD_SIZE_LIMIT = 20971520 // 20 MB
 
+export const APP_READY_CHANNEL = '_APP_READY_'
 export const PUSH_NOTIFICATION_CHANNEL = '_PUSH_NOTIFICATION_'
 export const WEBSOCKET_CONNECTION_CHANNEL = '_WEBSOCKET_CONNECTION_'
 export const INIT_CHECK_CHANNEL = '_INIT_CHECK_'