diff --git a/packages/client/src/components/Badges.js b/packages/client/src/components/Badges.js
index 644f1b605a..93ea58c566 100644
--- a/packages/client/src/components/Badges.js
+++ b/packages/client/src/components/Badges.js
@@ -44,7 +44,7 @@ import { Badge } from "@docspace/shared/components/badge";
 import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
 
 import { RoomsType, ShareAccessRights } from "@docspace/shared/enums";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 import { isTablet, isDesktop, size, classNames } from "@docspace/shared/utils";
 
@@ -56,7 +56,7 @@ const StyledWrapper = styled.div`
   background: ${(props) => props.theme.filesBadges.backgroundColor};
   padding: 6px;
   border-radius: 4px;
-  box-shadow: 0px 2px 4px rgba(4, 15, 27, 0.16);
+  box-shadow: 0px 2px 4px ${globalColors.badgeShadow};
 `;
 
 StyledWrapper.defaultProps = { theme: Base };
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownDesktop.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownDesktop.js
index 9771749f8e..4525cbad9b 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownDesktop.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownDesktop.js
@@ -28,7 +28,7 @@ import React from "react";
 import styled from "styled-components";
 
 import RoomType from "@docspace/shared/components/room-type";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { RoomsTypeValues } from "@docspace/shared/utils/common";
 
 const StyledDropdownDesktop = styled.div`
@@ -56,7 +56,7 @@ const StyledDropdownDesktop = styled.div`
     display: flex;
     flex-direction: column;
     padding: 6px 0;
-    box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
+    box-shadow: 0px 12px 40px ${globalColors.popupShadow};
     border-radius: 6px;
   }
 `;
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js
index 5441903b34..6d0ca23437 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js
@@ -31,7 +31,7 @@ import RoomType from "@docspace/shared/components/room-type";
 import { RoomsTypeValues } from "@docspace/shared/utils/common";
 import { Backdrop } from "@docspace/shared/components/backdrop";
 
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const StyledDropdownMobile = styled.div`
   visibility: ${(props) => (props.isOpen ? "visible" : "hidden")};
@@ -44,7 +44,7 @@ const StyledDropdownMobile = styled.div`
     theme.interfaceDirection === "rtl"
       ? `margin-right: -16px;`
       : `margin-left: -16px;`}
-  box-shadow: 0px -4px 60px rgba(4, 15, 27, 0.12);
+  box-shadow: 0px -4px 60px ${globalColors.popupShadow};
   border-radius: 6px 6px 0px 0px;
   background: ${(props) =>
     props.theme.createEditRoomDialog.roomTypeDropdown.mobile.background};
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js
index 4dd829fe6b..53dc7a3b25 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js
@@ -29,7 +29,7 @@ import styled from "styled-components";
 import { mobile } from "@docspace/shared/utils";
 
 import { DropDown } from "@docspace/shared/components/drop-down";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const StyledDropDownWrapper = styled.div`
   width: 100%;
@@ -43,7 +43,7 @@ const StyledDropDown = styled(DropDown)`
     props.theme.createEditRoomDialog.dropdown.background};
   border: 1px solid
     ${(props) => props.theme.createEditRoomDialog.dropdown.borderColor};
-  box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
+  box-shadow: 0px 12px 40px ${globalColors.popupShadow};
   border-radius: 3px;
   overflow: hidden;
   ${(props) => !props.hasItems && "visibility: hidden"};
diff --git a/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Progress.js b/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Progress.js
index b99c24953c..56dfb7f928 100644
--- a/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Progress.js
+++ b/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Progress.js
@@ -32,13 +32,13 @@ import styled from "styled-components";
 import CheckIcon from "PUBLIC_DIR/images/check.edit.react.svg";
 import InterruptIcon from "PUBLIC_DIR/images/interrupt.icon.react.svg";
 import { commonIconsStyles } from "@docspace/shared/utils";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { withTranslation, Trans } from "react-i18next";
 
 const StyledCheckIcon = styled(CheckIcon)`
   ${commonIconsStyles}
   path {
-    fill: rgba(53, 173, 23, 1) !important;
+    fill: ${globalColors.lightStatusPositive} !important;
   }
 `;
 
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
index 5af82e8f55..0b4f1e0280 100644
--- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
@@ -533,7 +533,7 @@ const StyledIcons = styled.div`
     background: ${(props) =>
       props.theme.filesSection.tilesView.tile.backgroundBadgeColor};
     border-radius: 4px;
-    box-shadow: 0px 2px 4px rgba(4, 15, 27, 0.16);
+    box-shadow: 0px 2px 4px ${globalColors.badgeShadow};
   }
 `;
 
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 3678944b7e..38ad17c545 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js
@@ -454,7 +454,7 @@ const StyledFloatingButton = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
+  box-shadow: 0px 12px 40px ${globalColors.popupShadow};
 `;
 
 StyledFloatingButton.defaultProps = { theme: Base };
diff --git a/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js b/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
index fb473c700b..4dc0552df0 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
@@ -32,6 +32,7 @@ import { Button } from "@docspace/shared/components/button";
 import { withTranslation } from "react-i18next";
 import { isMobileOnly } from "react-device-detect";
 import { isMobile } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledComponent = styled(ModalDialog)`
   .modal-dialog-aside-footer {
@@ -46,7 +47,7 @@ const StyledComponent = styled(ModalDialog)`
             left: 0;
           `}
     padding: 16px;
-    box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
+    box-shadow: 0px 12px 40px ${globalColors.popupShadow};
   }
 
   .flex {
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js
index a91a9db72d..40deb20f14 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js
@@ -41,6 +41,7 @@ import { Text } from "@docspace/shared/components/text";
 import ChangeTypeReactSvgUrl from "PUBLIC_DIR/images/change.type.react.svg?url";
 import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
 import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledRowContainer = styled(RowContainer)`
   margin: 0 0 20px;
@@ -66,7 +67,7 @@ const StyledRowContainer = styled(RowContainer)`
     .table-container_group-menu {
       padding: 0px 16px;
       border-image-slice: 0;
-      box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
+      box-shadow: ${globalColors.menuShadow} 0px 15px 20px;
     }
 
     .table-container_group-menu-checkbox {
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js
index 6c08a8b719..2d4489580e 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js
@@ -26,7 +26,7 @@
 
 import { useState, useRef } from "react";
 import { inject, observer } from "mobx-react";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import styled, { css } from "styled-components";
 
 import UsersTypeTableHeader from "./UsersTypeTableHeader";
@@ -62,7 +62,7 @@ const StyledTableContainer = styled(TableContainer)`
       border-image-source: none;
       border-bottom: ${(props) =>
         props.theme.client.settings.migration.workspaceBorder};
-      box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
+      box-shadow: ${globalColors.menuShadow} 0px 15px 20px;
       padding: 0px;
     }
 
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js
index 061b463e21..4fb84f9c50 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js
@@ -41,6 +41,7 @@ import { Text } from "@docspace/shared/components/text";
 import ChangeTypeReactSvgUrl from "PUBLIC_DIR/images/change.type.react.svg?url";
 import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
 import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledRowContainer = styled(RowContainer)`
   margin: 0 0 20px;
@@ -66,7 +67,7 @@ const StyledRowContainer = styled(RowContainer)`
     .table-container_group-menu {
       padding: 0px 16px;
       border-image-slice: 0;
-      box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
+      box-shadow: ${globalColors.menuShadow} 0px 15px 20px;
     }
 
     .table-container_group-menu-checkbox {
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js
index 71688eebd0..c0b76626bf 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js
@@ -26,7 +26,7 @@
 
 import { useState, useRef } from "react";
 import { inject, observer } from "mobx-react";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import styled, { css } from "styled-components";
 
 import UsersTableHeader from "./UsersTableHeader";
@@ -60,7 +60,7 @@ const UserSelectTableContainer = styled(StyledTableContainer)`
       border-image-source: none;
       border-bottom: ${(props) =>
         props.theme.client.settings.migration.workspaceBorder};
-      box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
+      box-shadow: ${globalColors.menuShadow} 0px 15px 20px;
       padding: 0px;
     }
 
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js
index 5a0a1706ab..fd05b8b099 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js
@@ -41,6 +41,7 @@ import { Text } from "@docspace/shared/components/text";
 import ChangeTypeReactSvgUrl from "PUBLIC_DIR/images/change.type.react.svg?url";
 import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
 import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledRowContainer = styled(RowContainer)`
   margin: 0 0 20px;
@@ -66,7 +67,7 @@ const StyledRowContainer = styled(RowContainer)`
     .table-container_group-menu {
       padding: 0px 16px;
       border-image-slice: 0;
-      box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
+      box-shadow: ${globalColors.menuShadow} 0px 15px 20px;
     }
 
     .table-container_group-menu-checkbox {
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js
index dbf83d184e..58b6036f88 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js
@@ -26,7 +26,7 @@
 
 import { useState, useRef } from "react";
 import { inject, observer } from "mobx-react";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import styled, { css } from "styled-components";
 
 import UsersTypeTableHeader from "./UsersTypeTableHeader";
@@ -62,7 +62,7 @@ const StyledTableContainer = styled(TableContainer)`
       border-image-source: none;
       border-bottom: ${(props) =>
         props.theme.client.settings.migration.workspaceBorder};
-      box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
+      box-shadow: ${globalColors.menuShadow} 0px 15px 20px;
       padding: 0px;
     }
 
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 127c74dd0b..ca370f59ab 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
@@ -32,6 +32,7 @@ import { inject, observer } from "mobx-react";
 
 import DangerIcon from "PUBLIC_DIR/images/danger.toast.react.svg?url";
 import { useTranslation } from "react-i18next";
+import { globalColors } from "@docspace/shared/themes";
 
 const DetailsWrapper = styled.div`
   width: 100%;
@@ -61,7 +62,7 @@ const ErrorMessageTooltip = styled.div`
   background: ${(props) =>
     props.theme.client.settings.webhooks.toastBackground};
 
-  box-shadow: 0px 5px 20px rgba(4, 15, 27, 0.07);
+  box-shadow: 0px 5px 20px ${globalColors.menuShadow};
   border-radius: 6px;
   display: flex;
   align-items: center;
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 b7d20517d2..556688c530 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
@@ -98,7 +98,7 @@ const EmptyFilter = (props) => {
           <Text
             fontSize="12px"
             color={
-              theme.isBase ? globalColors.grayText : "rgba(255, 255, 255, 0.6)"
+              theme.isBase ? globalColors.grayText : globalColors.grayDarkText
             }
           >
             {t("NoResultsMatched")}