diff --git a/packages/shared/components/all/All.stories.tsx b/packages/shared/components/all/All.stories.tsx
index 0822662acc..856c699f05 100644
--- a/packages/shared/components/all/All.stories.tsx
+++ b/packages/shared/components/all/All.stories.tsx
@@ -61,6 +61,7 @@ import { Text } from "../text";
 import { Toast, toastr } from "../toast";
 import { ToggleContent } from "../toggle-content";
 import { Tooltip } from "../tooltip";
+import { globalColors } from "../../themes";
 
 const arrayItems = [
   {
@@ -259,7 +260,7 @@ const Template = () => (
                 <Text isBold fontSize="16px">
                   {arrayUsers[+content].name}
                 </Text>
-                <Text color="#A3A9AE" fontSize="13px">
+                <Text color={globalColors.gray} fontSize="13px">
                   {arrayUsers[+content].email}
                 </Text>
                 <Text fontSize="13px">{arrayUsers[+content].position}</Text>
@@ -302,40 +303,6 @@ const Template = () => (
           }
         />
       </div>
-      {/*
-          <div style={{ padding: "8px 0" }}>
-          <ContextMenuButton
-            iconName={VerticalDotsReactSvgUrl}
-            size={16}
-            color="#A3A9AE"
-            isDisabled={false}
-            title="Actions"
-            getData={() => [
-              {
-                key: "key",
-                label: "label",
-                onClick: () => {}
-              }
-            ]}
-          />
-        </div>
-        */}
-      {/* <div style={{ padding: "8px 0" }}>
-          <div style={{ display: "flex" }}>
-            <div style={{ marginRight: 16 }}>
-              <IconButton
-                size="25"
-                isDisabled={false}
-                onClick={() => {}}
-                iconName={VerticalDotsReactSvgUrl}
-                isFill
-                isClickable={false}
-              />
-            </div>
-            <HelpButton tooltipContent="Paste you tooltip content here" />
-          </div>
-        </div>
-        */}
     </div>
     <div style={{ justifySelf: "center" }}>
       <div style={{ padding: "8px 0" }}>
@@ -386,26 +353,6 @@ const Template = () => (
         </StringValue> */}
       </div>
 
-      {/* <div style={{ padding: "8px 0" }}>
-        <DatePicker
-          onChange={(date) => {
-            console.log("Selected date", date);
-          }}
-          selectedDate={new Date()}
-          minDate={new Date("1970/01/01")}
-          maxDate={new Date(new Date().getFullYear() + 1 + "/01/01")}
-          isDisabled={false}
-          isReadOnly={false}
-          hasError={false}
-          isOpen={false}
-          themeColor="#ED7309"
-          locale="en"
-          setSelectedDate={(date) => {
-            console.log("Selected date", date);
-          }}
-        />
-      </div> */}
-
       <div style={{ padding: "8px 0" }}>
         {/* <StringValue>
           {({ value, set }: any) => ( */}
@@ -491,7 +438,6 @@ const Template = () => (
       <div style={{ padding: "8px 0" }}>
         <Calendar
           onChange={() => {}}
-          //   themeColor="#ED7309"
           selectedDate={moment()}
           minDate={new Date("1970/01/01")}
           maxDate={new Date("3000/01/01")}
diff --git a/packages/shared/components/article-item/ArticleItem.styled.ts b/packages/shared/components/article-item/ArticleItem.styled.ts
index 2f69426677..6f78ea76cc 100644
--- a/packages/shared/components/article-item/ArticleItem.styled.ts
+++ b/packages/shared/components/article-item/ArticleItem.styled.ts
@@ -78,7 +78,7 @@ const StyledArticleItemHeaderContainer = styled.div<{
     font-weight: 600;
     font-size: 11px;
     line-height: 14px;
-    color: #a3a9ae;
+    color: ${(props) => props.theme.catalogItem.header.color};
   }
 
   @media ${tablet} {
@@ -98,7 +98,7 @@ const StyledArticleItemHeaderContainer = styled.div<{
           line-height: 1px;
           height: 1px;
 
-          background: #d0d5da;
+          background: ${props.theme.catalogItem.header.background};
         }
       `}
   }
diff --git a/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts b/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts
index 1105008af4..72534e9134 100644
--- a/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts
+++ b/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts
@@ -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 "../../themes";
+import { Base, globalColors } from "../../themes";
 import { tablet, mobile } from "../../utils/device";
 
 const BannerWrapper = styled.div<{
@@ -77,7 +77,7 @@ const BannerWrapper = styled.div<{
     top: 18px;
 
     path {
-      fill: "#A3A9AE";
+      fill: ${globalColors.gray};
     }
   }
 `;
diff --git a/packages/shared/components/context-menu-button/ContextMenuButton.test.tsx b/packages/shared/components/context-menu-button/ContextMenuButton.test.tsx
index c400d401f1..1fdcde9deb 100644
--- a/packages/shared/components/context-menu-button/ContextMenuButton.test.tsx
+++ b/packages/shared/components/context-menu-button/ContextMenuButton.test.tsx
@@ -32,6 +32,7 @@ import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?u
 
 import { ContextMenuButton } from "./ContextMenuButton";
 import { ContextMenuButtonDisplayType } from "./ContextMenuButton.enums";
+import { globalColors } from "../../themes";
 
 const baseData = () => [
   {
@@ -45,7 +46,7 @@ const baseProps = {
   title: "Actions",
   iconName: VerticalDotsReactSvgUrl,
   size: 16,
-  color: "#A3A9AE",
+  color: globalColors.gray,
   getData: baseData,
   isDisabled: false,
 };
diff --git a/packages/shared/components/date-picker/DatePicker.tsx b/packages/shared/components/date-picker/DatePicker.tsx
index de51d7719c..63381dd553 100644
--- a/packages/shared/components/date-picker/DatePicker.tsx
+++ b/packages/shared/components/date-picker/DatePicker.tsx
@@ -40,6 +40,7 @@ import {
   Wrapper,
 } from "./DatePicker.styled";
 import { DatePickerProps } from "./DatePicker.types";
+import { globalColors } from "../../themes";
 
 const DatePicker = (props: DatePickerProps) => {
   const {
@@ -136,7 +137,7 @@ const DatePicker = (props: DatePickerProps) => {
             className="mr-8 add-delivery-date-button"
             iconName={CalendarIconUrl}
           />
-          <Text isInline fontWeight={600} color="#A3A9AE">
+          <Text isInline fontWeight={600} color={globalColors.gray}>
             {selectDateText}
           </Text>
         </DateSelector>
diff --git a/packages/shared/components/file-input/FileInput.tsx b/packages/shared/components/file-input/FileInput.tsx
index 9408c10857..25c44ad41d 100644
--- a/packages/shared/components/file-input/FileInput.tsx
+++ b/packages/shared/components/file-input/FileInput.tsx
@@ -40,6 +40,7 @@ import { toastr } from "../toast";
 
 import StyledFileInput from "./FileInput.styled";
 import { FileInputProps } from "./FileInput.types";
+import { globalColors } from "../../themes";
 
 const FileInputPure = ({
   onInput,
@@ -177,7 +178,7 @@ const FileInputPure = ({
                       ? DocumentReactSvgUrl
                       : CatalogFolderReactSvgUrl
                   }
-                  color="#A3A9AE"
+                  color={globalColors.gray}
                   size={iconSize}
                   isDisabled={isDisabled}
                 />
diff --git a/packages/shared/components/filling-role-selector/FillingRoleSelector.styled.ts b/packages/shared/components/filling-role-selector/FillingRoleSelector.styled.ts
index 5f998a1c35..54c45a0d00 100644
--- a/packages/shared/components/filling-role-selector/FillingRoleSelector.styled.ts
+++ b/packages/shared/components/filling-role-selector/FillingRoleSelector.styled.ts
@@ -29,7 +29,7 @@ import styled, { css } from "styled-components";
 import AddRoleButton from "PUBLIC_DIR/images/add.role.button.react.svg";
 import EveryoneRoleIcon from "PUBLIC_DIR/images/everyone.role.button.react.svg";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const StyledFillingRoleSelector = styled.div`
   display: flex;
@@ -65,7 +65,7 @@ const StyledNumber = styled.div`
   font-weight: 600;
   font-size: 14px;
   line-height: 16px;
-  color: #a3a9ae;
+  color: ${globalColors.gray};
 `;
 
 const StyledAvatar = styled.img`
@@ -128,13 +128,13 @@ const StyledEveryoneRoleContainer = styled.div`
     font-weight: 400;
     font-size: 10px;
     line-height: 14px;
-    color: #657077;
+    color: ${globalColors.lightGrayDark};
   }
 `;
 
 const StyledTooltip = styled.div`
-  background: #f8f7bf;
-  color: #333;
+  background: ${globalColors.lightToastInfo};
+  color: ${globalColors.black};
   border-radius: 6px;
   font-weight: 400;
   font-size: 12px;
diff --git a/packages/shared/components/filling-status-line/FillingStatusLine.styled.ts b/packages/shared/components/filling-status-line/FillingStatusLine.styled.ts
index f08555d112..39ca30ce43 100644
--- a/packages/shared/components/filling-status-line/FillingStatusLine.styled.ts
+++ b/packages/shared/components/filling-status-line/FillingStatusLine.styled.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const FillingStatusContainer = styled.div<{
   isDone?: boolean;
@@ -36,13 +36,15 @@ const FillingStatusContainer = styled.div<{
   padding: 10px;
 
   .status-done-text {
-    color: ${(props) => (props.isDone ? "#4781D1" : "#A3A9AE")};
+    color: ${(props) =>
+      props.isDone ? globalColors.lightBlueMain : globalColors.gray};
   }
 
   .status-done-icon {
     circle,
     path {
-      stroke: ${(props) => (props.isDone ? "#4781D1" : "#A3A9AE")};
+      stroke: ${(props) =>
+        props.isDone ? globalColors.lightBlueMain : globalColors.gray};
     }
   }
 
@@ -85,9 +87,10 @@ const AccordionItem = styled.div<{
 
     .user-avatar {
       padding: 1px;
-      border: 2px solid #a3a9ae;
+      border: 2px solid ${globalColors.gray};
       border-color: ${(props) =>
-        (props.isDone && "#4781D1") || (props.isInterrupted && "#F2675A")};
+        (props.isDone && globalColors.lightBlueMain) ||
+        (props.isInterrupted && globalColors.mainRed)};
       border-radius: 50%;
     }
 
@@ -96,7 +99,8 @@ const AccordionItem = styled.div<{
     }
 
     .accordion-role {
-      color: ${(props) => (props.theme.isBase ? "#657077" : "#FFFFFF99")};
+      color: ${(props) =>
+        props.theme.isBase ? globalColors.lightGrayDark : "#FFFFFF99"};
     }
 
     .arrow-icon {
@@ -107,7 +111,8 @@ const AccordionItem = styled.div<{
       transform: ${(props) =>
         props.isOpen ? "rotate(270deg)" : "rotate(90deg)"};
       path {
-        fill: ${(props) => (props.isOpen ? "#4781d1" : "#A3A9AE")};
+        fill: ${(props) =>
+          props.isOpen ? globalColors.lightBlueMain : globalColors.gray};
       }
     }
   }
@@ -132,25 +137,28 @@ const AccordionItem = styled.div<{
     ${(props) => {
       const borderValue = `2px ${
         props.isDone || props.isInterrupted ? "solid" : "dashed"
-      } #A3A9AE;`;
+      } ${globalColors.gray};`;
 
       return props.theme.interfaceDirection === "rtl"
         ? `border-right: ${borderValue}`
         : `border-left: ${borderValue}`;
     }}
     border-color: ${(props) =>
-      (props.isDone && "#4781D1") || (props.isInterrupted && "#F2675A")};
+      (props.isDone && globalColors.lightBlueMain) ||
+      (props.isInterrupted && globalColors.mainRed)};
 
     .status-text {
       ${(props) =>
         props.theme.interfaceDirection === "rtl"
           ? `margin-right: 15px;`
           : `margin-left: 15px;`}
-      color: ${(props) => (props.theme.isBase ? "#657077" : "#FFFFFF99")};
+      color: ${(props) =>
+        props.theme.isBase ? globalColors.lightGrayDark : "#FFFFFF99"};
     }
 
     .status-date {
-      color: ${(props) => (props.theme.isBase ? "#657077" : "#FFFFFF99")};
+      color: ${(props) =>
+        props.theme.isBase ? globalColors.lightGrayDark : "#FFFFFF99"};
     }
 
     .filled-status-text {
@@ -158,7 +166,8 @@ const AccordionItem = styled.div<{
         props.theme.interfaceDirection === "rtl"
           ? `margin-right: 15px;`
           : `margin-left: 15px;`}
-      color: ${(props) => (props.isDone ? "#4781D1" : "#657077")};
+      color: ${(props) =>
+        props.isDone ? globalColors.lightBlueMain : globalColors.lightGrayDark};
     }
   }
 `;
diff --git a/packages/shared/components/password-input/PasswordInput.tsx b/packages/shared/components/password-input/PasswordInput.tsx
index badf4d7a4a..4826685c31 100644
--- a/packages/shared/components/password-input/PasswordInput.tsx
+++ b/packages/shared/components/password-input/PasswordInput.tsx
@@ -58,6 +58,7 @@ import {
   TPasswordSettings,
   TPasswordValidation,
 } from "./PasswordInput.types";
+import { globalColors } from "../../themes";
 
 const PasswordInput = React.forwardRef(
   (
@@ -417,7 +418,7 @@ const PasswordInput = React.forwardRef(
           <Text
             className="text-tooltip"
             fontSize="10px"
-            color="#A3A9AE"
+            color={globalColors.gray}
             as="span"
           >
             {settings?.minLength ? length : null}{" "}
diff --git a/packages/shared/components/report-dialog/index.tsx b/packages/shared/components/report-dialog/index.tsx
index cb9f8709ab..05ed408227 100644
--- a/packages/shared/components/report-dialog/index.tsx
+++ b/packages/shared/components/report-dialog/index.tsx
@@ -46,6 +46,7 @@ import { ModalDialogType, ModalDialog } from "../modal-dialog";
 
 import { ModalDialogContainer } from "./ReportDialog.styled";
 import type { ReportDialogProps } from "./ReportDialog.types";
+import { globalColors } from "../../themes";
 
 const ReportDialog = (props: ReportDialogProps) => {
   const { t, ready } = useTranslation(["Common"]);
@@ -123,7 +124,7 @@ const ReportDialog = (props: ReportDialogProps) => {
           <img src={FileReactSvgUrl} className="file-icon" alt="" />
           <Text as="div" fontWeight={600} noSelect className="report-filename">
             {fileTitle}
-            <Text fontWeight={600} noSelect color="#A3A9AE">
+            <Text fontWeight={600} noSelect color={globalColors.gray}>
               .json
             </Text>
           </Text>
diff --git a/packages/shared/components/share/Share.styled.ts b/packages/shared/components/share/Share.styled.ts
index 272e76712e..e60b98d81c 100644
--- a/packages/shared/components/share/Share.styled.ts
+++ b/packages/shared/components/share/Share.styled.ts
@@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled from "styled-components";
+import { globalColors } from "../../themes";
 
 const StyledLinks = styled.div`
   margin-top: 20px;
@@ -32,7 +33,7 @@ const StyledLinks = styled.div`
   .title-link {
     margin-bottom: 12px;
     line-height: 16px;
-    color: #a3a9ae;
+    color: ${globalColors.gray};
   }
 
   .additional-link {
diff --git a/packages/shared/dialogs/conflict-resolve/ConflictResolve.styled.ts b/packages/shared/dialogs/conflict-resolve/ConflictResolve.styled.ts
index 91500886ac..4ac3fb8018 100644
--- a/packages/shared/dialogs/conflict-resolve/ConflictResolve.styled.ts
+++ b/packages/shared/dialogs/conflict-resolve/ConflictResolve.styled.ts
@@ -27,6 +27,7 @@
 import styled from "styled-components";
 
 import { ModalDialog } from "../../components/modal-dialog";
+import { globalColors } from "../../themes";
 
 const StyledModalDialog = styled(ModalDialog)`
   .radio {
@@ -73,7 +74,7 @@ const StyledModalDialog = styled(ModalDialog)`
     .radio-option-description {
       font-size: 12px;
       line-height: 16px;
-      color: #a3a9ae;
+      color: ${globalColors.gray};
     }
   }
 `;
diff --git a/packages/shared/pages/PreparationPortal/PreparationPortal.styled.ts b/packages/shared/pages/PreparationPortal/PreparationPortal.styled.ts
index 694b7266bc..8ed652f75e 100644
--- a/packages/shared/pages/PreparationPortal/PreparationPortal.styled.ts
+++ b/packages/shared/pages/PreparationPortal/PreparationPortal.styled.ts
@@ -26,6 +26,7 @@
 
 import styled from "styled-components";
 import { tablet } from "@docspace/shared/utils";
+import { globalColors } from "../../themes";
 
 const StyledPreparationPortal = styled.div<{
   errorMessage?: boolean;
@@ -40,7 +41,7 @@ const StyledPreparationPortal = styled.div<{
     font-size: 23px;
   }
   #text {
-    color: #a3a9ae;
+    color: ${globalColors.gray};
     font-size: 13px;
     line-height: 20px;
     max-width: 480px;
diff --git a/packages/shared/selectors/People/index.tsx b/packages/shared/selectors/People/index.tsx
index b61b3c00cc..21c9453e60 100644
--- a/packages/shared/selectors/People/index.tsx
+++ b/packages/shared/selectors/People/index.tsx
@@ -53,6 +53,7 @@ import { Text } from "../../components/text";
 
 import { PeopleSelectorProps } from "./PeopleSelector.types";
 import { PRODUCT_NAME } from "../../constants";
+import { globalColors } from "../../themes";
 
 const toListItem = (
   item: TUser,
@@ -367,7 +368,7 @@ const PeopleSelector = ({
               fontSize="12px"
               noSelect
               truncate
-              color="#A3A9AE"
+              color={globalColors.gray}
               dir="auto"
             >
               {`${userType} | ${email}`}
diff --git a/packages/shared/skeletons/share/index.tsx b/packages/shared/skeletons/share/index.tsx
index 1cb30a49a6..f45ee3b2a9 100644
--- a/packages/shared/skeletons/share/index.tsx
+++ b/packages/shared/skeletons/share/index.tsx
@@ -30,6 +30,7 @@ import styled from "styled-components";
 import { Text } from "../../components/text";
 import { TTranslation } from "../../types";
 import { RectangleSkeleton, CircleSkeleton } from "../index";
+import { globalColors } from "../../themes";
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -43,7 +44,7 @@ const StyledWrapper = styled.div`
   .title-link {
     margin-bottom: 12px;
     line-height: 16px;
-    color: #a3a9ae;
+    color: ${globalColors.gray};
   }
 `;