diff --git a/packages/client/src/pages/Home/InfoPanel/Body/styles/groups.styled.ts b/packages/client/src/pages/Home/InfoPanel/Body/styles/groups.styled.ts
index b3a35c1b8b..e642791e66 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/groups.styled.ts
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/groups.styled.ts
@@ -83,7 +83,7 @@ export const GroupsContent = styled.div<{}>`
       margin-inline-start: auto;
       .group-manager-tag {
         white-space: nowrap;
-        color: #d0d5da;
+        color: ${(props) => props.theme.infoPanel.groups.tagColor};
         font-size: 12px;
         font-weight: 600;
         line-height: 16px;
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js
index 0485e9aad3..a5f3e18324 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js
@@ -81,7 +81,8 @@ const StyledComponent = styled.div`
   }
 
   .add-theme {
-    background: #d0d5da;
+    background: ${(props) =>
+      props.theme.client.settings.common.appearance.addThemeBackground};
     padding-top: 16px;
     ${(props) =>
       props.theme.interfaceDirection === "rtl"
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js
index 92e6e717ca..3678944b7e 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import {
   getCorrectBorderRadius,
   getCorrectFourValuesStyle,
@@ -44,7 +44,9 @@ const StyledComponent = styled.div`
 
     height: 100%;
     background: ${(props) =>
-      props.themePreview === "Light" ? "#f8f9f9" : "#292929"};
+      props.themePreview === "Light"
+        ? globalColors.grayLight
+        : globalColors.darkGrayLight};
     ${(props) =>
       props.withBorder &&
       css`
@@ -69,7 +71,9 @@ const StyledComponent = styled.div`
     width: 20px;
     height: 1px;
     background: ${(props) =>
-      props.themePreview === "Light" ? "#eceef1" : "#474747"};
+      props.themePreview === "Light"
+        ? globalColors.grayLightMid
+        : globalColors.grayDarkStrong};
     margin: 0 20px 31px 20px;
   }
 
@@ -81,7 +85,8 @@ const StyledComponent = styled.div`
 
     circle {
       fill: ${(props) => props.colorPreview};
-      stroke: ${(props) => props.themePreview === "Dark" && "#292929"};
+      stroke: ${(props) =>
+        props.themePreview === "Dark" && globalColors.darkGrayLight};
     }
   }
 
@@ -136,7 +141,7 @@ const StyledComponent = styled.div`
               `}
       `}
     background: ${(props) =>
-      props.themePreview === "Light" ? "#FFFFFF" : "#333333"};
+      props.themePreview === "Light" ? globalColors.white : globalColors.black};
   }
 
   .section-header {
@@ -217,7 +222,7 @@ const StyledComponent = styled.div`
   .color-badge rect {
     fill: ${(props) =>
       props.themePreview === "Dark" && props.selectThemeId === 7
-        ? "#FFFFFF"
+        ? globalColors.white
         : props.colorPreview} !important;
   }
 
@@ -225,7 +230,7 @@ const StyledComponent = styled.div`
     fill: ${(props) =>
       props.themePreview === "Light"
         ? `${props.colorPreview} !important`
-        : `#FFFFFF !important`};
+        : `${globalColors.white} !important`};
   }
 
   .menu-section {
@@ -241,7 +246,9 @@ const StyledComponent = styled.div`
 
   .loaders-theme {
     background-color: ${(props) =>
-      props.themePreview === "Light" ? "#FFF" : "#858585"};
+      props.themePreview === "Light"
+        ? globalColors.white
+        : globalColors.grayDark};
     border-radius: 3px;
   }
 
@@ -289,7 +296,7 @@ const StyledComponent = styled.div`
     padding-top: 9px;
     padding-bottom: 9px !important;
     background: ${(props) =>
-      props.themePreview === "Light" ? "#f0f0f0" : "#333333"};
+      props.themePreview === "Light" ? globalColors.white : globalColors.black};
   }
 
   .section-tile {
@@ -302,7 +309,9 @@ const StyledComponent = styled.div`
 
   .border-color {
     border-color: ${(props) =>
-      props.themePreview === "Light" ? "#d0d5da" : "#474747"};
+      props.themePreview === "Light"
+        ? globalColors.grayStrong
+        : globalColors.grayDarkStrong};
   }
 
   .tile {
@@ -315,7 +324,9 @@ const StyledComponent = styled.div`
 
   .background {
     background: ${(props) =>
-      props.themePreview === "Light" ? "#FFF" : "#292929"};
+      props.themePreview === "Light"
+        ? globalColors.white
+        : globalColors.darkGrayLight};
   }
 
   .tile-name {
@@ -411,7 +422,7 @@ const StyledComponent = styled.div`
       fill: ${(props) =>
         props.themePreview === "Light"
           ? `${props.colorPreview} !important`
-          : `#FFFFFF !important`};
+          : `${globalColors.white} !important`};
     }
   }
 
@@ -420,7 +431,7 @@ const StyledComponent = styled.div`
   }
 
   .main-button_text {
-    color: #ffffff !important;
+    color: ${globalColors.white} !important;
   }
 `;
 
@@ -465,10 +476,12 @@ const StyledMobilePreview = styled.div`
   border-radius: 16px;
   padding: 0px 16px;
   background: ${({ themePreview }) =>
-    themePreview === "Light" ? "#FFFFFF" : "#333333"};
+    themePreview === "Light" ? globalColors.white : globalColors.black};
 
   border: ${({ themePreview }) =>
-    themePreview === "Light" ? "1px solid #d0d5da" : "1px solid #474747"};
+    themePreview === "Light"
+      ? `1px solid ${globalColors.grayStrong}`
+      : `1px solid ${globalColors.grayDarkStrong}`};
 
   .section-search {
     height: 30px;
@@ -494,7 +507,7 @@ const StyledMobilePreview = styled.div`
   .color-badge rect {
     fill: ${(props) =>
       props.themePreview === "Dark" && props.selectThemeId === 7
-        ? "#FFFFFF"
+        ? globalColors.white
         : props.colorPreview} !important;
   }
 
@@ -502,7 +515,7 @@ const StyledMobilePreview = styled.div`
     fill: ${(props) =>
       props.themePreview === "Light"
         ? `${props.colorPreview} !important`
-        : `#FFFFFF !important`};
+        : `${globalColors.white} !important`};
   }
 
   .menu-section {
@@ -513,33 +526,41 @@ const StyledMobilePreview = styled.div`
 
   .loaders-theme {
     background-color: ${(props) =>
-      props.themePreview === "Light" ? "#FFF" : "#545454"};
+      props.themePreview === "Light"
+        ? globalColors.white
+        : globalColors.grayDark};
     border-radius: 3px;
   }
 
   .loaders-tile-theme {
     background: ${(props) =>
-      props.themePreview === "Light" ? "#F1F1F1" : "#333333"};
+      props.themePreview === "Light" ? globalColors.white : globalColors.black};
 
     border-radius: 3px;
   }
 
   .loaders-tile-text-theme {
     background: ${(props) =>
-      props.themePreview === "Light" ? "#D0D5DA" : "#858585"};
+      props.themePreview === "Light"
+        ? globalColors.grayStrong
+        : globalColors.grayDark};
 
     border-radius: 3px;
   }
 
   .loaders-theme-avatar {
     background-color: ${(props) =>
-      props.themePreview === "Light" ? "#FFF" : "#545454"};
+      props.themePreview === "Light"
+        ? globalColors.white
+        : globalColors.grayDark};
     border-radius: 50px;
   }
 
   .border-color {
     border-color: ${(props) =>
-      props.themePreview === "Light" ? "#d0d5da" : "#474747"};
+      props.themePreview === "Light"
+        ? globalColors.grayStrong
+        : globalColors.grayDarkStrong};
   }
 
   .tile {
@@ -552,7 +573,9 @@ const StyledMobilePreview = styled.div`
 
   .background {
     background: ${(props) =>
-      props.themePreview === "Light" ? "#FFF" : "#292929"};
+      props.themePreview === "Light"
+        ? globalColors.white
+        : globalColors.darkGrayLight};
   }
 
   .tile-name {
@@ -607,7 +630,7 @@ const StyledMobilePreview = styled.div`
       fill: ${(props) =>
         props.themePreview === "Light"
           ? `${props.colorPreview} !important`
-          : `#FFFFFF !important`};
+          : `${globalColors.white} !important`};
     }
   }
 
@@ -626,7 +649,9 @@ const StyledMobilePreview = styled.div`
     padding: 0 16px;
 
     background: ${({ themePreview }) =>
-      themePreview === "Light" ? "#FFFFFF" : "#282828"};
+      themePreview === "Light"
+        ? globalColors.white
+        : globalColors.darkGrayLight};
 
     border-radius: 16px 16px 0px 0px;
   }
@@ -644,7 +669,7 @@ const StyledMobilePreview = styled.div`
   .color-badge rect {
     fill: ${({ themePreview, selectThemeId, colorPreview }) =>
       themePreview === "Dark" && selectThemeId === 7
-        ? "#FFFFFF"
+        ? globalColors.white
         : colorPreview} !important;
   }
   .section-badge {
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/StyledStepper.js b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/StyledStepper.js
index 0f0dc1472c..969038f12c 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/StyledStepper.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/StyledStepper.js
@@ -75,7 +75,7 @@ export const UsersInfoBlock = styled.div`
   display: flex;
   align-items: center;
   max-width: 660px;
-  background: #f8f9f9;
+  background: ${(props) => props.theme.client.settings.migration.background};
   padding: 12px 16px;
   border-radius: 6px;
   margin: 16px 0;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/RequestDetails.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/RequestDetails.js
index 77a9825252..127c74dd0b 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/RequestDetails.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/RequestDetails.js
@@ -58,7 +58,8 @@ const ErrorMessageTooltip = styled.div`
   width: 100%;
   max-width: 1200px;
   padding: 8px 12px;
-  background: #f7cdbe;
+  background: ${(props) =>
+    props.theme.client.settings.webhooks.toastBackground};
 
   box-shadow: 0px 5px 20px rgba(4, 15, 27, 0.07);
   border-radius: 6px;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/ResponseDetails.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/ResponseDetails.js
index 93ac6a0f2f..f42872581c 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/ResponseDetails.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/ResponseDetails.js
@@ -26,14 +26,16 @@
 
 import React from "react";
 import styled, { css } from "styled-components";
+import { inject, observer } from "mobx-react";
+import { useTranslation } from "react-i18next";
+import json_beautifier from "csvjson-json_beautifier";
+
 import { Textarea } from "@docspace/shared/components/textarea";
 import { Button } from "@docspace/shared/components/button";
 import { Text } from "@docspace/shared/components/text";
-import { inject, observer } from "mobx-react";
 
-import json_beautifier from "csvjson-json_beautifier";
 import { isMobile } from "@docspace/shared/utils";
-import { useTranslation } from "react-i18next";
+import { globalColors } from "@docspace/shared/themes";
 
 const DetailsWrapper = styled.div`
   width: 100%;
@@ -67,7 +69,7 @@ const LargePayloadStub = styled.div`
   padding: 12px 10px;
   margin-top: 4px;
 
-  background: #f8f9f9;
+  background: ${(props) => props.theme.client.settings.webhooks.background};
   border: ${(props) => props.theme.client.settings.webhooks.border};
   border-radius: 3px;
 
@@ -139,7 +141,7 @@ const ResponseDetails = ({ eventDetails }) => {
       </Text>
       {responsePayload.length > 4000 || numberOfLines > 100 ? (
         <LargePayloadStub>
-          <Text fontWeight={600} color="#657077">
+          <Text fontWeight={600} color={globalColors.lightGrayDark}>
             {t("PayloadIsTooLarge")}
           </Text>
           <Button
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/EmptyFilter.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/EmptyFilter.js
index a261ef987f..b7d20517d2 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/EmptyFilter.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/EmptyFilter.js
@@ -26,15 +26,15 @@
 
 import React from "react";
 import styled from "styled-components";
+import { inject, observer } from "mobx-react";
+import { useTranslation } from "react-i18next";
 
 import EmptyFilterImg from "PUBLIC_DIR/images/empty_filter.react.svg?url";
 import EmptyFilterDarkImg from "PUBLIC_DIR/images/empty_filter_dark.react.svg?url";
 import ClearEmptyFilterIcon from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
 import { Text } from "@docspace/shared/components/text";
 import { Link } from "@docspace/shared/components/link";
-
-import { inject, observer } from "mobx-react";
-import { useTranslation } from "react-i18next";
+import { globalColors } from "@docspace/shared/themes";
 
 const EmptyFilterWrapper = styled.div`
   width: 100%;
@@ -97,7 +97,9 @@ const EmptyFilter = (props) => {
           </Text>
           <Text
             fontSize="12px"
-            color={theme.isBase ? "#555F65" : "rgba(255, 255, 255, 0.6)"}
+            color={
+              theme.isBase ? globalColors.grayText : "rgba(255, 255, 255, 0.6)"
+            }
           >
             {t("NoResultsMatched")}
           </Text>
@@ -108,7 +110,7 @@ const EmptyFilter = (props) => {
               className="clearFilterIcon"
             />
             <Link
-              color={theme.isBase ? "#657077" : "inherit"}
+              color={theme.isBase ? globalColors.lightGrayDark : "inherit"}
               isHovered
               fontWeight={600}
               type="action"
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js
index 15357d9335..76fd740179 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js
@@ -48,7 +48,7 @@ import { useParams } from "react-router-dom";
 
 import { FloatingButton } from "@docspace/shared/components/floating-button";
 
-import Base from "@docspace/shared/themes/base";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const HeaderContainer = styled.div`
   position: sticky;
@@ -114,7 +114,7 @@ const HeaderContainer = styled.div`
       svg {
         path {
           fill: ${(props) =>
-            props.isDisabled ? "#d0d5da" : props.theme.color};
+            props.isDisabled ? globalColors.grayStrong : props.theme.color};
         }
       }
     }
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/styled-components/StyledCerticateDialog.js b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/styled-components/StyledCerticateDialog.js
index 1612409d19..0d88ad8de9 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/styled-components/StyledCerticateDialog.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/styled-components/StyledCerticateDialog.js
@@ -40,14 +40,11 @@ const StyledCertificateDialogBody = styled(Box)`
     flex-direction: column;
     gap: 4px;
     background-color: ${(props) =>
-      props.theme.isBase ? "#f8f9f9" : "#474747"};
-    border: 1px solid
-      ${(props) =>
-        props.hasError
-          ? "#F24724"
-          : props.theme.isBase
-            ? "#eceef1"
-            : "#474747"};
+      props.theme.client.settings.integration.ldap.certificateBackground};
+    border: ${(props) =>
+      props.hasError
+        ? props.theme.client.settings.integration.ldap.errorBorder
+        : props.theme.client.settings.integration.ldap.border};
     border-radius: 3px;
     padding: 4px;
     margin-bottom: 8px;
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js b/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
index afd50ed23c..97a0e35fa8 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
@@ -75,7 +75,8 @@ const MainContainer = styled.div`
 
   .login-subheader {
     font-size: 13px;
-    color: #657077;
+    color: ${(props) =>
+      props.theme.client.settings.security.loginHistory.subheaderColor};
   }
 
   .latest-text {
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js
index 063251fc0c..636f7ff3f9 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js
@@ -185,7 +185,7 @@ export const StyledInfo = styled.div`
     min-width: 12px;
 
     svg path {
-      fill: ${(props) => props.theme.isBase && `#657077`};
+      fill: ${(props) => props.theme.profile.main.iconFill};
     }
   }
 
@@ -344,7 +344,7 @@ export const StyledInfo = styled.div`
           min-width: 12px;
 
           svg path {
-            fill: ${(props) => props.theme.isBase && `#657077`};
+            fill: ${(props) => props.theme.profile.main.iconFill};
           }
         }