From f587ccc6ee7b81658cc00fee98fbd2ccb8c160c6 Mon Sep 17 00:00:00 2001
From: Mike <142341848+mike-kiss@users.noreply.github.com>
Date: Mon, 22 Apr 2024 16:00:09 -0400
Subject: [PATCH] refactor: initial theme refactor #2445 (#2446)

---
 .../ChangeUsername.component.tsx              |  2 +-
 .../UsernameChanged.component.tsx             |  2 +-
 .../components/Channel/ChannelComponent.tsx   |  2 +-
 .../CreateChannel/CreateChannelComponent.tsx  |  2 +-
 .../DeleteChannel/DeleteChannel.test.tsx      |  6 +-
 .../File/FileComponent/FileComponent.tsx      |  4 +-
 .../File/UploadedImage/UploadedImage.test.tsx |  4 +-
 .../UploadedImagePlaceholder.test.tsx         | 10 +--
 .../UploadedImagePlaceholder.tsx              |  6 +-
 .../Channel/File/UploadingPreview.tsx         |  4 +-
 .../ChannelCreationModal.test.tsx             |  2 +-
 .../ContextMenu/ContextMenu.component.tsx     | 12 +--
 .../UserProfileContextMenu.container.tsx      |  8 +-
 .../PerformCommunityActionComponent.tsx       |  2 +-
 .../CreateUsernameComponent.tsx               |  2 +-
 .../UsernameCreated/UsernameCreated.test.tsx  |  2 +-
 .../JoiningPanelComponent.test.tsx            |  4 +-
 .../LoadingPanel/JoiningPanelComponent.tsx    |  2 +-
 .../StartingPanelComponent.test.tsx           |  2 +-
 .../LoadingPanel/StartingPanelComponent.tsx   |  2 +-
 .../SearchModal/SearchModal.test.tsx          |  6 +-
 .../SearchModal/SearchModelComponent.tsx      |  6 +-
 .../components/Settings/SettingsComponent.tsx |  4 +-
 .../Tabs/Invite/Invite.component.test.tsx     |  8 +-
 .../LeaveCommunity/LeaveCommunity.test.tsx    |  6 +-
 .../Tabs/Notifications/Notifications.test.tsx | 14 +--
 .../ChannelsPanel/ChannelsPanel.test.tsx      | 24 ++---
 .../IdentityPanel/IdentityPanel.test.tsx      |  6 +-
 .../src/renderer/components/Titlebar.tsx      |  3 +-
 .../ui/ErrorModal/ErrorModal.test.tsx         |  8 +-
 .../ui/ErrorModal/ErrorModalComponent.tsx     |  2 +-
 .../ui/LoadingButton/LoadingButton.test.tsx   |  2 +-
 .../renderer/components/ui/Modal/Modal.tsx    | 10 +--
 .../ui/OpenlinkModal/OpenlinkModal.test.tsx   | 10 +--
 .../ui/OpenlinkModal/OpenlinkModal.tsx        |  4 +-
 .../renderer/components/ui/Page/Page.test.tsx |  2 +-
 .../components/ui/Page/PageHeader.test.tsx    |  2 +-
 .../components/ui/Page/PageHeader.tsx         |  2 +-
 .../ui/PopupMenu/PopupMenu.test.tsx           |  8 +-
 .../ui/ProgressFab/ProgressFab.test.tsx       | 10 +--
 .../ui/QuitApp/QuitAppDialog.test.tsx         |  2 +-
 .../components/ui/QuitApp/QuitAppDialog.tsx   |  4 +-
 .../components/ui/Slider/Slider.test.tsx      |  6 +-
 .../components/ui/Spinner/SpinnerLoader.tsx   |  2 +-
 .../components/widgets/MessagesDivider.tsx    |  2 +-
 .../WarningModal/WarningModal.test.tsx        |  4 +-
 .../widgets/channels/BasicMessage.test.tsx    |  8 +-
 .../widgets/channels/BasicMessage.tsx         |  6 +-
 .../widgets/channels/ChannelHeader.test.tsx   |  4 +-
 .../widgets/channels/ChannelHeader.tsx        |  6 +-
 .../ChannelInput/ChannelInput.test.tsx        |  4 +-
 .../channels/ChannelInput/ChannelInput.tsx    |  6 +-
 .../ChannelInput/MentionElement.test.tsx      |  4 +-
 .../channels/ChannelInput/MentionElement.tsx  |  2 +-
 .../ChannelInput/MentionPoper.test.tsx        |  2 +-
 .../widgets/channels/ChannelMessages.test.tsx |  4 +-
 .../widgets/channels/ChannelMessages.tsx      |  2 +-
 .../channels/NestedMessageContent.test.tsx    |  4 +-
 .../widgets/channels/TextMessage.tsx          |  6 +-
 .../widgets/channels/WelcomeMessage.test.tsx  |  2 +-
 .../widgets/channels/WelcomeMessage.tsx       |  2 +-
 .../PossibleImpersonationAttackModal.test.tsx |  2 +-
 .../sentryWarning/SentryWarningComponent.tsx  |  2 +-
 .../components/widgets/update/UpdateModal.tsx |  2 +-
 .../update/UpdateModalComponent.test.tsx      |  4 +-
 .../widgets/update/UpdateModalComponent.tsx   |  2 +-
 .../duplicate/DuplicateModal.test.tsx         |  2 +-
 .../unregistered/UnregisteredModal.test.tsx   |  4 +-
 .../components/windows/Index.test.tsx         | 12 +--
 .../components/windows/Loading.test.tsx       |  6 +-
 .../renderer/components/windows/Main.test.tsx |  6 +-
 packages/desktop/src/renderer/theme.ts        | 90 +++++++++++--------
 72 files changed, 226 insertions(+), 205 deletions(-)

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 5bff2b131f..17acb92ff1 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,