diff --git a/packages/client/src/components/TariffBar/helpers.js b/packages/client/src/components/TariffBar/helpers.js
index 92af9bb53f..2c27d3d080 100644
--- a/packages/client/src/components/TariffBar/helpers.js
+++ b/packages/client/src/components/TariffBar/helpers.js
@@ -24,8 +24,10 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-const ORANGE = "#F97A0B";
-const RED = "#F2665A";
+import { globalColors } from "@docspace/shared/themes";
+
+const ORANGE = globalColors.mainOrange;
+const RED = globalColors.mainRed;
 
 export const getSaasBar = (
   t,
diff --git a/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js b/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js
index 1696a855cf..a329c64fc1 100644
--- a/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js
+++ b/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js
@@ -89,8 +89,9 @@ const StyledBody = styled.div`
     }
 
     .embedding-panel_link_active {
-      color: #ffffff;
-      background: #265a8f;
+      color: ${(props) => props.theme.filesPanels.embedding.linkColor};
+      background: ${(props) =>
+        props.theme.filesPanels.embedding.linkBackground};
     }
   }
 
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js b/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js
index d3836b0f73..ceafd96b8b 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js
@@ -156,8 +156,9 @@ export const GroupsRow = styled(Row)`
     font-size: 12px;
     font-weight: 700;
     line-height: 16px;
-    background: #eceef1;
-    color: #333;
+    background: ${(props) =>
+      props.theme.filesSection.tableView.row.backgroundGroup};
+    color: ${(props) => props.theme.filesSection.tableView.row.color};
     border-radius: 50%;
   }
 `;
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js b/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
index 9a34b22bbd..3735bec2c7 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
@@ -52,6 +52,7 @@ import {
 
 import isEqual from "lodash/isEqual";
 import { DeviceType, WhiteLabelLogoType } from "@docspace/shared/enums";
+import { globalColors } from "@docspace/shared/themes";
 
 const WhiteLabel = (props) => {
   const {
@@ -162,7 +163,7 @@ const WhiteLabel = (props) => {
         options.height,
         options.text,
         options.fontSize,
-        isDocsEditorName ? "#fff" : "#000",
+        isDocsEditorName ? globalColors.white : globalColors.darkBlack,
         options.alignCenter,
       );
       const logoDark = generateLogo(
@@ -170,7 +171,7 @@ const WhiteLabel = (props) => {
         options.height,
         options.text,
         options.fontSize,
-        "#fff",
+        globalColors.white,
         options.alignCenter,
       );
       newLogos[i].path.light = logoLight;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/MainElementParameter.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/MainElementParameter.js
index 3ec0cb4584..019c2de78e 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/MainElementParameter.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/MainElementParameter.js
@@ -41,6 +41,7 @@ import {
   RowContainer,
 } from "../presets/StyledPresets";
 import { PRODUCT_NAME } from "@docspace/shared/constants";
+import { globalColors } from "@docspace/shared/themes";
 
 export const MainElementParameter = ({
   t,
@@ -118,7 +119,7 @@ export const MainElementParameter = ({
             <ColorInput
               scale
               handleChange={setButtonColor}
-              defaultColor={"#5299E0"}
+              defaultColor={globalColors.lightSecondMain}
             />
           </ControlsGroup>
           <ControlsGroup>
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
index ccdbaad02c..6695708539 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
@@ -111,7 +111,7 @@ const InfoBar = styled.div`
     .header-icon {
       svg {
         path {
-          fill: #ed7309;
+          fill: ${(props) => props.theme.infoBar.iconFill};
         }
       }
     }
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js
index 096a29069b..fa63804f19 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js
@@ -31,7 +31,7 @@ import styled, { css } from "styled-components";
 import { Box } from "@docspace/shared/components/box";
 import { Text } from "@docspace/shared/components/text";
 import ConsumerToggle from "./consumerToggle";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { thirdpartiesLogo } from "@docspace/shared/utils/image-thirdparties";
 
 const StyledItem = styled.div`
@@ -53,17 +53,17 @@ const StyledBox = styled(Box)`
       !props.theme.isBase &&
       css`
         path {
-          fill: #ffffff;
+          fill: ${globalColors.white};
           opacity: 1;
         }
         ${props.isLinkedIn &&
         css`
           path:nth-child(8) {
-            fill: #333333;
+            fill: ${globalColors.black};
             opacity: 1;
           }
           path:nth-child(9) {
-            fill: #333333;
+            fill: ${globalColors.black};
             opacity: 1;
           }
         `}
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js
index 7b7c7b26eb..b36f44e50c 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js
@@ -63,11 +63,15 @@ const StyledBody = styled.div`
         css`
           svg {
             path {
-              fill: #adadad !important;
+              fill: ${(props) =>
+                props.theme.client.settings.payment.benefitsContainer
+                  .iconsColor} !important;
             }
             mask + path {
               fill: none !important;
-              stroke: #adadad !important;
+              stroke: ${(props) =>
+                props.theme.client.settings.payment.benefitsContainer
+                  .iconsColor} !important;
             }
           }
         `}
diff --git a/packages/client/src/pages/PortalSettings/categories/storage-management/sub-components/Diagram.js b/packages/client/src/pages/PortalSettings/categories/storage-management/sub-components/Diagram.js
index 22e64bcaf8..0eb7d6148a 100644
--- a/packages/client/src/pages/PortalSettings/categories/storage-management/sub-components/Diagram.js
+++ b/packages/client/src/pages/PortalSettings/categories/storage-management/sub-components/Diagram.js
@@ -35,6 +35,7 @@ import {
   StyledFolderTagSection,
 } from "../StyledComponent";
 import { getConvertedSize } from "@docspace/shared/utils/common";
+import { globalColors } from "@docspace/shared/themes";
 
 const calculateSize = (size, common) => {
   if (common === -1) return 0;
@@ -51,7 +52,12 @@ const getTags = (
   usedPortalSpace,
 ) => {
   const array = [];
-  const colors = ["#13B7EC", "#22C386", "#FF9933", "#FFD30F"];
+  const colors = [
+    globalColors.mainBlueLight,
+    globalColors.secondGreen,
+    globalColors.secondOrange,
+    globalColors.mainYellow,
+  ];
 
   let i = 0;
   let commonSize = standalone ? tenantCustomQuota : maxTotalSizeByQuota;
diff --git a/packages/client/src/pages/PortalSettings/utils/commonSettingsStyles.js b/packages/client/src/pages/PortalSettings/utils/commonSettingsStyles.js
index 0038eb66ea..cd9aa3b13a 100644
--- a/packages/client/src/pages/PortalSettings/utils/commonSettingsStyles.js
+++ b/packages/client/src/pages/PortalSettings/utils/commonSettingsStyles.js
@@ -43,7 +43,7 @@ export const commonSettingsStyles = css`
     }
 
     .category-item-description {
-      color: #555f65;
+      color: ${(props) => props.theme.client.settings.descriptionColor};
       font-size: 12px;
       max-width: 1024px;
     }
diff --git a/packages/client/src/pages/PortalSettings/utils/whiteLabelHelper.js b/packages/client/src/pages/PortalSettings/utils/whiteLabelHelper.js
index eced8a07ae..6ce7f4e6d7 100644
--- a/packages/client/src/pages/PortalSettings/utils/whiteLabelHelper.js
+++ b/packages/client/src/pages/PortalSettings/utils/whiteLabelHelper.js
@@ -27,13 +27,14 @@
 import axios from "axios";
 import config from "PACKAGE_FILE";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
+import { globalColors } from "@docspace/shared/themes";
 
 export const generateLogo = (
   width,
   height,
   text,
   fontSize = 18,
-  fontColor = "#000",
+  fontColor = globalColors.darkBlack,
   alignCenter,
 ) => {
   const canvas = document.createElement("canvas");