diff --git a/src/constants.scss b/src/constants.scss
index 2afb37a95a..c4704d992c 100644
--- a/src/constants.scss
+++ b/src/constants.scss
@@ -119,7 +119,7 @@ $c-neutrals-100-hover: #e1e1e1;
 $c-neutrals-100-shadow: 4px 4px 0px #e2e2e2;
 $c-neutrals-200: #d5d5e4;
 $c-neutrals-300: #979bba;
-$c-neutrals-600: #001a36;
+$c-neutrals-600: var(--primary-text);
 $c-notification-100: #f9faff;
 $c-shades-white: #ffffff;
 $c-shades-black: #000000;
@@ -143,8 +143,8 @@ $c-pink-active-feed-cards-light: #fcf4ff;
 $c-pink-active-feed-cards: #a75a93;
 $c-pink-hover-feed-cards: #fff9fd;
 $c-gray-5: #f4f5f5;
-$c-gray-10: #eef0f4;
-$c-gray-20: #dcdee7;
+$c-gray-10: var(--gentle-stroke);
+$c-gray-20: var(--gentle-stroke);
 $c-gray-30: #b7bcd2;
 $c-gray-40: #8d91a9;
 $c-gray-50: #7a819c;
diff --git a/src/pages/App/providers/NotificationProvider/Notification/index.scss b/src/pages/App/providers/NotificationProvider/Notification/index.scss
index 9799551310..c44b1454c5 100644
--- a/src/pages/App/providers/NotificationProvider/Notification/index.scss
+++ b/src/pages/App/providers/NotificationProvider/Notification/index.scss
@@ -2,17 +2,19 @@
 @import "../../../../../styles/sizes";
 
 .notification-wrapper {
-  background-color: $purple;
+  background-color: var(--primary-background);
   padding: 0.5rem;
   margin: 0.5rem 0;
   display: flex;
   justify-content: space-between;
   border-radius: 0.25rem;
+  box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
+  color: var(--primary-text);
 
   .dismiss-btn {
     background: none;
     border: none;
-    color: $white;
+    color: inherit;
     font-weight: bold;
     cursor: pointer;
     &:hover {
diff --git a/src/pages/MyAccount/components/Billing/AddingCard/index.scss b/src/pages/MyAccount/components/Billing/AddingCard/index.scss
index ba8ff2152c..2f13d3cb4d 100644
--- a/src/pages/MyAccount/components/Billing/AddingCard/index.scss
+++ b/src/pages/MyAccount/components/Billing/AddingCard/index.scss
@@ -8,7 +8,7 @@
   flex-wrap: wrap;
   align-items: center;
   border-radius: 0.875rem;
-  background-color: $light-gray-4;
+  background-color: var(--secondary-background);
   box-sizing: border-box;
   justify-content: space-around;
 }
@@ -30,6 +30,7 @@
   font-size: $xsmall;
   text-align: center;
   white-space: pre-line;
+  color: var(--primary-text);
 }
 
 .billing-adding-card__content__button {
diff --git a/src/pages/MyAccount/components/Billing/index.scss b/src/pages/MyAccount/components/Billing/index.scss
index d2db0f7536..efdbeb07e9 100644
--- a/src/pages/MyAccount/components/Billing/index.scss
+++ b/src/pages/MyAccount/components/Billing/index.scss
@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   font-family: PoppinsSans, sans-serif;
-  color: $secondary-blue;
+  color: var(--primary-text);
 
   @include tablet {
     padding-top: 0;
diff --git a/src/pages/MyAccount/components/Profile/DeleteUserModal/MainStep/index.scss b/src/pages/MyAccount/components/Profile/DeleteUserModal/MainStep/index.scss
index 6c1e4df7f2..74ac6b7a99 100644
--- a/src/pages/MyAccount/components/Profile/DeleteUserModal/MainStep/index.scss
+++ b/src/pages/MyAccount/components/Profile/DeleteUserModal/MainStep/index.scss
@@ -34,8 +34,8 @@
   margin: 0.875rem 0 1.125rem;
   padding: 1.25rem 1.375rem;
   font-size: $small;
-  background-color: $light-gray-11;
-  border: 1px solid $light-gray-1;
+  background-color: var(--secondary-background);
+  border: 1px solid var(--gentle-stroke);
   border-radius: 0.5rem;
 }
 
diff --git a/src/pages/MyAccount/components/Profile/Profile.module.scss b/src/pages/MyAccount/components/Profile/Profile.module.scss
index dd4e764f0d..2a2f91289b 100644
--- a/src/pages/MyAccount/components/Profile/Profile.module.scss
+++ b/src/pages/MyAccount/components/Profile/Profile.module.scss
@@ -5,6 +5,7 @@
 .container {
   position: relative;
   width: 100%;
+  color: var(--primary-text);
 }
 
 .content {
@@ -30,6 +31,7 @@
   position: absolute;
   top: 1.5rem;
   right: 0;
+  color: var(--primary-text);
 
   @include tablet {
     position: static;
diff --git a/src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss b/src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss
index 9af7df8f38..ea31cb856c 100644
--- a/src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss
+++ b/src/pages/MyAccount/components/Profile/components/UserDetails/UserDetails.module.scss
@@ -10,7 +10,7 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  color: $secondary-blue;
+  color: var(--primary-text);
 }
 
 .form {
@@ -153,8 +153,6 @@
 
   .textFieldLabelWrapper {
     @include body-sm-regular;
-
-    color: $c-gray-80;
   }
 
   .textFieldInput {
diff --git a/src/pages/MyAccount/components/Profile/components/UserDetails/components/UserDetailsPreview/UserDetailsPreview.module.scss b/src/pages/MyAccount/components/Profile/components/UserDetails/components/UserDetailsPreview/UserDetailsPreview.module.scss
index 6daf9b9e98..dca23a5828 100644
--- a/src/pages/MyAccount/components/Profile/components/UserDetails/components/UserDetailsPreview/UserDetailsPreview.module.scss
+++ b/src/pages/MyAccount/components/Profile/components/UserDetails/components/UserDetailsPreview/UserDetailsPreview.module.scss
@@ -16,7 +16,7 @@
 
 .name {
   @include h6;
-
+  color: var(--primary-text);
   margin: 0 0 0.25rem;
   text-align: left;
 }
diff --git a/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/AddBankDetails/index.scss b/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/AddBankDetails/index.scss
index d638c8769f..6fc00028db 100644
--- a/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/AddBankDetails/index.scss
+++ b/src/pages/OldCommon/components/CommonDetailContainer/AddProposalComponent/AddBankDetails/index.scss
@@ -13,7 +13,6 @@
     font-weight: bold;
     line-height: 1.33;
     text-align: center;
-    color: $secondary-blue;
     margin-top: -1.5rem;
   }
 
@@ -22,7 +21,6 @@
     font-size: 0.875rem;
     line-height: 1.43;
     text-align: center;
-    color: $secondary-blue;
     padding-bottom: 1rem;
     border-bottom: 1px solid $light-gray-1;
     margin-bottom: 2rem;
diff --git a/src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss b/src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss
index a76e3d3505..e5bbf6a424 100644
--- a/src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss
+++ b/src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/index.scss
@@ -18,13 +18,13 @@
     font-weight: bold;
     line-height: 1.8rem;
     letter-spacing: normal;
-    color: $secondary-blue;
+    color: var(--primary-text);
   }
 
   .members__common-name {
     font-size: $small;
     font-weight: bold;
-    color: $purple-2;
+    color: var(--primary-text);
     margin-top: 0.5rem;
   }
 }
@@ -126,8 +126,8 @@
       justify-content: space-between;
       align-items: center;
       padding: 1rem;
-      background-color: $c-shades-white;
-      box-shadow: 0 0.1875rem 0.5rem $box-shadow-color;
+      background-color: var(--primary-background);
+      box-shadow: 0 0.1875rem 0.5rem var(--drop-shadow);
       margin-bottom: 1rem;
 
       .members__section__common-member-details {
@@ -155,7 +155,7 @@
           font-style: normal;
           font-weight: 700;
           font-size: $xsmall;
-          color: $secondary-blue;
+          color: var(--primary-text);
         }
       }
 
diff --git a/src/pages/billing/Billing.module.scss b/src/pages/billing/Billing.module.scss
index 779c11b95f..a58c2d7b00 100644
--- a/src/pages/billing/Billing.module.scss
+++ b/src/pages/billing/Billing.module.scss
@@ -6,8 +6,8 @@
   max-width: 49.5rem;
   padding-top: var(--header-h);
   padding-bottom: 3rem;
-  border-left: 0.0625rem solid $c-gray-10;
-  border-right: 0.0625rem solid $c-gray-10;
+  border-left: 0.0625rem solid var(--gentle-stroke);
+  border-right: 0.0625rem solid var(--gentle-stroke);
 
   @include tablet {
     padding-top: 0;
diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss
index d1b7f368d9..e9bc2fe9d8 100644
--- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss
+++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss
@@ -68,7 +68,7 @@
   line-height: 1.5rem;
   border-radius: 1.25rem;
   background-color: var(--secondary-background);
-  border: 0.0625rem solid $c-neutrals-200;
+  border: 0.0625rem solid var(--gentle-stroke);
   outline: none;
   resize: none;
   font-size: 0.875rem;
@@ -106,7 +106,7 @@
   margin-bottom: 0.8rem;
   border: none;
   outline: none;
-  background: $c-input-100;
+  background: transparent;
 
   &:disabled {
     cursor: not-allowed;
diff --git a/src/pages/common/components/ChatComponent/components/MessageReply/MessageReply.module.scss b/src/pages/common/components/ChatComponent/components/MessageReply/MessageReply.module.scss
index bea30b1c7b..5a2a74f296 100644
--- a/src/pages/common/components/ChatComponent/components/MessageReply/MessageReply.module.scss
+++ b/src/pages/common/components/ChatComponent/components/MessageReply/MessageReply.module.scss
@@ -3,10 +3,10 @@
 .container {
   display: flex;
   flex-direction: row;
-  background-color: $white;
+  background-color: var(--primary-background);
   padding: 0.4375rem 2rem 0.625rem;
-  border-top: 0.0625rem solid $c-neutrals-100;
-  border-bottom: 0.0625rem solid $c-neutrals-100;
+  border-top: 0.0625rem solid var(--gentle-stroke);
+  border-bottom: 0.0625rem solid var(--gentle-stroke);
 }
 
 .containerEmpty {
@@ -67,4 +67,5 @@
 
 .closeButton {
   margin-left: 1.375rem;
+  color: var(--primary-text);
 }
diff --git a/src/pages/common/components/CommonCard/CommonCard.module.scss b/src/pages/common/components/CommonCard/CommonCard.module.scss
index 44af2e6159..6d12cd00c5 100644
--- a/src/pages/common/components/CommonCard/CommonCard.module.scss
+++ b/src/pages/common/components/CommonCard/CommonCard.module.scss
@@ -6,6 +6,6 @@
 }
 .containerWithCardStyles {
   padding: 1.125rem 1.25rem;
-  background-color: $c-shades-white;
-  box-shadow: 0 0.1875rem 0.5rem #{$c-common-card-shadow};
+  background-color: var(--primary-background);
+  box-shadow: 0 0.1875rem 0.5rem var(--drop-shadow);
 }
diff --git a/src/pages/common/components/CommonManagement/CommonManagement.module.scss b/src/pages/common/components/CommonManagement/CommonManagement.module.scss
index e84cb37ed6..089bf6bd9a 100644
--- a/src/pages/common/components/CommonManagement/CommonManagement.module.scss
+++ b/src/pages/common/components/CommonManagement/CommonManagement.module.scss
@@ -5,7 +5,7 @@
   margin-top: 1.75rem;
   display: flex;
   align-items: center;
-  border-bottom: 0.0625rem solid #{$c-neutrals-200};
+  border-bottom: 0.0625rem solid var(--gentle-stroke);
 }
 
 .tabs {
@@ -15,7 +15,7 @@
 }
 
 .memberInfo {
-  border-left: 0.0625rem solid #{$c-neutrals-100};
+  border-left: 0.0625rem solid var(--gentle-stroke);
 }
 
 .commonMenuButtonContainer {
@@ -23,12 +23,11 @@
   display: flex;
   align-items: center;
   padding-left: 1.875rem;
-  border-left: 0.0625rem solid #{$c-neutrals-100};
+  border-left: 0.0625rem solid var(--gentle-stroke);
 }
 
 .commonMenuButton {
   padding: 0.625rem;
-  //background-color: $c-neutrals-100;
   border-radius: 0.375rem;
   transition: background-color 0.2s;
 
diff --git a/src/pages/common/components/CommonMemberInfo/components/PopoverButton/PopoverButton.module.scss b/src/pages/common/components/CommonMemberInfo/components/PopoverButton/PopoverButton.module.scss
index 07bf21cc39..4f6a6a2cb2 100644
--- a/src/pages/common/components/CommonMemberInfo/components/PopoverButton/PopoverButton.module.scss
+++ b/src/pages/common/components/CommonMemberInfo/components/PopoverButton/PopoverButton.module.scss
@@ -10,7 +10,7 @@
   align-items: center;
 
   &:hover {
-    background-color: $light-gray-11;
+    background-color: var(--hover-fill);
   }
 
   @include tablet {
@@ -44,7 +44,7 @@
   font-weight: bold;
   font-size: $xxsmall-2;
   line-height: 120%;
-  color: $c-neutrals-300;
+  color: var(--primary-text);
 }
 
 .circleNames {
@@ -65,7 +65,7 @@
   height: 1.5rem;
   transform: rotate(90deg);
   transition: all 0.2s;
-  color: $light-gray-2;
+  color: var(--primary-text);
   margin-left: 1rem;
 
   @include tablet {
diff --git a/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.module.scss b/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.module.scss
index 54f7d890c4..8787b2c5e2 100644
--- a/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.module.scss
+++ b/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.module.scss
@@ -1,9 +1,9 @@
 @import "../../../../../../constants";
 
 .item {
-  --item-color: #{$c-neutrals-600};
-  --item-bg-color: #{$c-shades-white};
-  --item-border: 0.0625rem solid #{$c-neutrals-100};
+  --item-color: var(--primary-text);
+  --item-bg-color: var(--primary-background);
+  --item-border: 0.0625rem solid var(--gentle-stroke);
 
   display: flex;
   justify-content: space-between;
@@ -67,7 +67,7 @@
 .pendingStatus {
   font-size: $small;
   line-height: 1.25rem;
-  color: $light-gray-2;
+  color: var(--primary-text);
   margin: 0;
 }
 
diff --git a/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx b/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx
index 0bc159aee1..b7c0c5cea1 100644
--- a/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx
+++ b/src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx
@@ -97,7 +97,7 @@ export const PopoverItem: FC<CommonMemberInfoProps> = (props) => {
     return (
       <Button
         className={styles.actionButton}
-        variant={ButtonVariant.OutlineBlue}
+        variant={ButtonVariant.OutlinePink}
         disabled={!canRequestToJoin}
         onClick={() =>
           onJoinCircle(
diff --git a/src/pages/common/components/CommonMemberInfo/components/PopoverPanel/PopoverPanel.module.scss b/src/pages/common/components/CommonMemberInfo/components/PopoverPanel/PopoverPanel.module.scss
index 09c81a260f..3ed8741bfb 100644
--- a/src/pages/common/components/CommonMemberInfo/components/PopoverPanel/PopoverPanel.module.scss
+++ b/src/pages/common/components/CommonMemberInfo/components/PopoverPanel/PopoverPanel.module.scss
@@ -21,7 +21,7 @@
   list-style-type: none;
   background-color: $c-shades-white;
   border-radius: var(--items-br);
-  box-shadow: 0 0.25rem 0.9375rem #{$c-sidebar-user-menu-shadow};
+  box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
 
   @include tablet {
     top: 3rem;
diff --git a/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewDiscussionCreation/components/PermissionSelection/PermissionSelection.module.scss b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewDiscussionCreation/components/PermissionSelection/PermissionSelection.module.scss
index 0d5cfa7be0..137f81f3a3 100644
--- a/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewDiscussionCreation/components/PermissionSelection/PermissionSelection.module.scss
+++ b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewDiscussionCreation/components/PermissionSelection/PermissionSelection.module.scss
@@ -1,8 +1,6 @@
 @import "../../../../../../../../../../constants";
 
 .button {
-  --btn-bg-color: transparent;
-
   margin: 0;
   padding: 0 0.25rem;
   display: flex;
@@ -11,10 +9,10 @@
   font-family: PoppinsSans, sans-serif;
   font-size: $xsmall;
   font-weight: normal;
-  color: $c-neutrals-600;
+  color: var(--primary-text);
   line-height: 143%;
   letter-spacing: 0.02em;
-  background-color: $c-neutrals-100;
+  background-color: var(--secondary-background);
   border: 0;
   border-radius: 0.25rem;
   overflow: hidden;
@@ -25,7 +23,7 @@
   box-sizing: border-box;
 
   &:hover {
-    background-color: $c-neutrals-200;
+    background-color: var(--hover-fill);
   }
 
   &:disabled {
diff --git a/src/pages/common/components/FeedCard/FeedCard.module.scss b/src/pages/common/components/FeedCard/FeedCard.module.scss
index f872dde4c5..56ce3765c7 100644
--- a/src/pages/common/components/FeedCard/FeedCard.module.scss
+++ b/src/pages/common/components/FeedCard/FeedCard.module.scss
@@ -11,7 +11,7 @@
   color: $c-neutrals-600;
 }
 .containerActive {
-  border: 0.0625rem solid $c-neutrals-200;
+  border: 0.0625rem solid var(--gentle-stroke);
   border-bottom-width: 0.125rem;
   border-top: none;
   margin: 0 -1.4375rem 0 -1.5rem;
diff --git a/src/pages/common/components/FeedCard/components/FeedCardContent/FeedCardContent.module.scss b/src/pages/common/components/FeedCard/components/FeedCardContent/FeedCardContent.module.scss
index b2b73bf3ff..03c749a157 100644
--- a/src/pages/common/components/FeedCard/components/FeedCardContent/FeedCardContent.module.scss
+++ b/src/pages/common/components/FeedCard/components/FeedCardContent/FeedCardContent.module.scss
@@ -6,7 +6,7 @@
   min-height: 4.5rem;
   justify-content: space-between;
   width: 100%;
-  background-color: $white;
+  background-color: var(--primary-background);
   padding: 1rem var(--feed-card-ph, 1.5rem);
   box-sizing: border-box;
 }
@@ -17,7 +17,7 @@
 
 .title {
   font-size: $moderate;
-  color: $c-neutrals-600;
+  color: var(--primary-text);
   line-height: 1.375rem;
   margin-bottom: 0.5rem;
   font-family: Lexend, sans-serif;
diff --git a/src/pages/common/components/FeedCard/components/FeedCardHeader/FeedCardHeader.module.scss b/src/pages/common/components/FeedCard/components/FeedCardHeader/FeedCardHeader.module.scss
index 4639c23de3..e141136c9c 100644
--- a/src/pages/common/components/FeedCard/components/FeedCardHeader/FeedCardHeader.module.scss
+++ b/src/pages/common/components/FeedCard/components/FeedCardHeader/FeedCardHeader.module.scss
@@ -6,7 +6,7 @@
   min-height: 4.5rem;
   justify-content: space-between;
   width: 100%;
-  background-color: $white;
+  background-color: var(--primary-background);
   padding: 1rem var(--feed-card-ph, 1.5rem);
   box-sizing: border-box;
 }
@@ -28,7 +28,7 @@
 
 .title {
   font-size: $small;
-  color: $c-neutrals-600;
+  color: var(--primary-text);
   font-weight: 500;
   line-height: 1.3125rem;
   word-break: break-word;
@@ -64,4 +64,5 @@
   height: 1.5rem;
   margin-left: 1.5rem;
   background-color: transparent;
+  color: var(--primary-text);
 }
diff --git a/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss b/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss
index 6e6ac3f979..34457f2ab7 100644
--- a/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss
+++ b/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss
@@ -47,7 +47,7 @@
 }
 
 .containerExpanded {
-  border: 0.0625rem solid $c-neutrals-200;
+  border: 0.0625rem solid var(--gentle-stroke);
   border-bottom: none;
 }
 
diff --git a/src/pages/commonCreation/components/CreationForm/CreationForm.module.scss b/src/pages/commonCreation/components/CreationForm/CreationForm.module.scss
index f99b77e048..852effb4d7 100644
--- a/src/pages/commonCreation/components/CreationForm/CreationForm.module.scss
+++ b/src/pages/commonCreation/components/CreationForm/CreationForm.module.scss
@@ -21,6 +21,7 @@
 .termsAgreementText {
   margin-top: 1rem;
   font-size: $xsmall;
+  color: var(--primary-text);
 }
 
 .submitButton {
diff --git a/src/pages/commonCreation/components/ProjectCreation/ProjectCreation.module.scss b/src/pages/commonCreation/components/ProjectCreation/ProjectCreation.module.scss
index 8bc32d041f..a227825495 100644
--- a/src/pages/commonCreation/components/ProjectCreation/ProjectCreation.module.scss
+++ b/src/pages/commonCreation/components/ProjectCreation/ProjectCreation.module.scss
@@ -41,6 +41,7 @@
   font-weight: normal;
   font-size: $large-1;
   line-height: 133%;
+  color: var(--primary-text);
 }
 
 .subtitle {
diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss
index 94c11d3a16..cbba965aed 100644
--- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss
+++ b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss
@@ -6,7 +6,7 @@
   width: 100%;
   max-height: 29.25rem;
   border-radius: 0;
-  box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.15259);
+  box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
 
   :global(.modal__header-wrapper--with-modal-padding) {
     .modalHeader {
diff --git a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/SearchInput/SearchInput.module.scss b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/SearchInput/SearchInput.module.scss
index deeb4e4362..d7cc47fc9e 100644
--- a/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/SearchInput/SearchInput.module.scss
+++ b/src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/SearchInput/SearchInput.module.scss
@@ -26,9 +26,9 @@
   font-size: $moderate-xsmall;
   font-weight: normal;
   line-height: 127%;
-  color: $c-neutrals-600;
-  background-color: $c-shades-white;
-  border: 0.0625rem solid $c-neutrals-200;
+  color: var(--primary-text);
+  background-color: var(--secondary-background);
+  border: 0.0625rem solid var(--gentle-stroke);
   border-radius: 0.25rem;
   outline: none;
   box-sizing: border-box;
diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss
index 6ce375e5af..10e99bb3be 100644
--- a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss
+++ b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss
@@ -44,7 +44,7 @@
 }
 
 .containerExpanded {
-  border: 0.0625rem solid $c-neutrals-200;
+  border: 0.0625rem solid var(--gentle-stroke);
   border-bottom: none;
 }
 
@@ -106,7 +106,7 @@
 }
 
 .title {
-  color: $secondary-blue;
+  color: var(--primary-text);
   font-size: $moderate-xsmall;
   line-height: 1.5rem;
   text-overflow: ellipsis;
diff --git a/src/pages/inbox/components/HeaderContent/components/PlusButton/PlusButton.module.scss b/src/pages/inbox/components/HeaderContent/components/PlusButton/PlusButton.module.scss
index 5cd45faf8c..7998017df6 100644
--- a/src/pages/inbox/components/HeaderContent/components/PlusButton/PlusButton.module.scss
+++ b/src/pages/inbox/components/HeaderContent/components/PlusButton/PlusButton.module.scss
@@ -5,14 +5,14 @@
   background-color: transparent;
 
   &:hover {
-    background-color: $light-gray-1;
+    background-color: var(--hover-fill);
   }
 }
 
 .icon {
   width: 1rem;
   height: 1rem;
-  color: $c-gray-800;
+  color: inherit;
 
   @include tablet {
     width: 0.875rem;
diff --git a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss
index 5f1116d826..5c270bae76 100644
--- a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss
+++ b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss
@@ -6,7 +6,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     &:hover {
-      background-color: $light-gray-1;
+      background-color: var(--hover-fill);
     }
   }
 }
diff --git a/src/pages/settings/components/Settings/Settings.module.scss b/src/pages/settings/components/Settings/Settings.module.scss
index be50aa9287..319c185d3f 100644
--- a/src/pages/settings/components/Settings/Settings.module.scss
+++ b/src/pages/settings/components/Settings/Settings.module.scss
@@ -4,6 +4,7 @@
 .container {
   position: relative;
   width: 100%;
+  color: var(--primary-text);
 }
 
 .content {
diff --git a/src/shared/components/BackgroundNotification/index.scss b/src/shared/components/BackgroundNotification/index.scss
index b698e41655..9f5b4119a4 100644
--- a/src/shared/components/BackgroundNotification/index.scss
+++ b/src/shared/components/BackgroundNotification/index.scss
@@ -29,7 +29,7 @@
     line-height: 1.2;
     letter-spacing: normal;
     text-align: center;
-    color: #000;
+    color: var(--primary-text);
     margin-top: 1.5rem;
   }
 
@@ -42,7 +42,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      span{
+      span {
         font-size: 0.75rem;
         font-weight: normal;
         font-stretch: normal;
@@ -50,16 +50,13 @@
         line-height: 1.2;
         letter-spacing: normal;
         text-align: center;
-
       }
       &.approved {
-
         background: $light-green;
 
         span {
           color: $green;
         }
-
       }
 
       &.rejected {
@@ -68,7 +65,6 @@
         span {
           color: $red;
         }
-
       }
     }
 
@@ -77,7 +73,7 @@
     object-fit: contain;
     border-radius: 0.875rem;
     box-shadow: 0 0.188rem 0.5rem 0 $shadow-2;
-    background-color: #fff;
+    background-color: var(--secondary-background);
     margin-top: 1.5rem;
 
     .notification-content,
@@ -96,11 +92,11 @@
       margin-top: 1.5rem;
     }
   }
-  .notification-actions{
+  .notification-actions {
     margin-top: 1.5rem;
 
     text-align: center;
-    button{
+    button {
       width: 100%;
     }
   }
@@ -109,8 +105,6 @@
 @media only screen and (max-width: $mobile-portrait) {
   .notification-layout-wrapper {
     .notification-img-wrapper {
-
-
       &.fundingRequestRejected {
         img {
           width: 4.5rem;
diff --git a/src/shared/components/DeleteModal/index.scss b/src/shared/components/DeleteModal/index.scss
index d9546fbd67..5e71e466ea 100644
--- a/src/shared/components/DeleteModal/index.scss
+++ b/src/shared/components/DeleteModal/index.scss
@@ -21,7 +21,6 @@
 
 .delete-modal__title {
   font-size: $moderate;
-  color: $secondary-blue;
   text-align: center;
   margin-top: 0;
 }
diff --git a/src/shared/components/Dropdown/index.scss b/src/shared/components/Dropdown/index.scss
index fd92e174eb..48ee823698 100644
--- a/src/shared/components/Dropdown/index.scss
+++ b/src/shared/components/Dropdown/index.scss
@@ -2,7 +2,7 @@
 
 .custom-dropdown-wrapper {
   position: relative;
-  color: $secondary-blue;
+  color: var(--primary-text);
   font-family: PoppinsSans, sans-serif;
   font-size: $xsmall;
   z-index: $dropdown-z-index;
@@ -26,8 +26,8 @@
   align-items: center;
   padding: 0.75rem 0.8rem;
   border-radius: 3px;
-  border: 1px solid $light-gray-1;
-  background-color: $white;
+  border: 1px solid var(--gentle-stroke);
+  background-color: var(--secondary-background);
   user-select: none;
   box-sizing: border-box;
 
@@ -37,7 +37,7 @@
 }
 .custom-dropdown-wrapper__menu-button--disabled {
   color: $c-gray-30;
-  border-color: $c-gray-20;
+  border-color: var(--gentle-stroke);
 }
 
 .custom-dropdown-wrapper__value {
@@ -63,8 +63,8 @@
 .custom-dropdown-wrapper__menu {
   position: absolute;
   width: 100%;
-  border: 1px solid $light-gray-1;
-  background-color: $white;
+  border: 1px solid var(--gentle-stroke);
+  background-color: var(--secondary-background);
   box-sizing: border-box;
 
   &:hover {
@@ -104,11 +104,11 @@
   transition: all 0.2s;
 
   &:hover {
-    background-color: $light-gray-1;
+    background-color: var(--hover-fill);
   }
 }
 .custom-dropdown-wrapper__menu-item--active {
-  background-color: $light-gray-6;
+  background-color: var(--secondary-background);
 }
 
 .custom-dropdown-wrapper__global-overlay {
diff --git a/src/shared/components/ElementDropdown/index.scss b/src/shared/components/ElementDropdown/index.scss
index bbcf3a6f09..8eaeca3cc8 100644
--- a/src/shared/components/ElementDropdown/index.scss
+++ b/src/shared/components/ElementDropdown/index.scss
@@ -19,7 +19,7 @@
     height: 2.5rem;
     padding: 0.65625rem 1.5rem;
     font-size: $small;
-    box-shadow: inset 0 -0.0625rem 0 $c-neutrals-100;
+    box-shadow: inset 0 -0.0625rem 0 var(--drop-shadow);
 
     > :first-child {
       margin-right: 0.3rem;
diff --git a/src/shared/components/Form/Checkbox/index.scss b/src/shared/components/Form/Checkbox/index.scss
index 8b1b73aea1..64d23afc35 100644
--- a/src/shared/components/Form/Checkbox/index.scss
+++ b/src/shared/components/Form/Checkbox/index.scss
@@ -53,7 +53,7 @@
     font-family: PoppinsSans, sans-serif;
     font-size: $xsmall;
     line-height: 1.42;
-    color: $secondary-blue;
+    color: var(--primary-text);
     cursor: pointer;
     user-select: none;
   }
diff --git a/src/shared/components/Form/Input/index.scss b/src/shared/components/Form/Input/index.scss
index 646545f165..c842037f23 100644
--- a/src/shared/components/Form/Input/index.scss
+++ b/src/shared/components/Form/Input/index.scss
@@ -7,7 +7,7 @@ $custom-input-vertical-padding: 14px;
   flex-direction: column;
   font-family: PoppinsSans, sans-serif;
   font-weight: normal;
-  color: $secondary-blue;
+  color: var(--primary-text);
 
   .custom-input__label-wrapper {
     margin-bottom: 10px;
@@ -28,7 +28,7 @@ $custom-input-vertical-padding: 14px;
     margin-bottom: 8px;
     font-size: $xxsmall;
     line-height: 1.42;
-    color: $light-gray-2;
+    color: var(--primary-text);
   }
 
   .custom-input__hint {
@@ -48,14 +48,14 @@ $custom-input-vertical-padding: 14px;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-
+    color: var(--primary-text);
     width: 100%;
     height: 3rem;
     margin: 0;
     padding: $custom-input-vertical-padding 12px;
     border-radius: 3px;
-    border: solid 1px $light-gray-1;
-    background-color: $white;
+    border: solid 1px var(--gentle-stroke);
+    background-color: var(--secondary-background);
     font-family: inherit;
     font-size: $xsmall;
     line-height: 1.42;
@@ -72,7 +72,7 @@ $custom-input-vertical-padding: 14px;
     height: unset;
   }
   .custom-input__input--error {
-    border-color: $error;
+    border-color: var(--warning);
   }
 
   .custom-input__input-length {
diff --git a/src/shared/components/Modal/components/ClosePrompt/index.scss b/src/shared/components/Modal/components/ClosePrompt/index.scss
index 2360eb5e27..b07252ddb7 100644
--- a/src/shared/components/Modal/components/ClosePrompt/index.scss
+++ b/src/shared/components/Modal/components/ClosePrompt/index.scss
@@ -14,10 +14,10 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background-color: $white;
+    background-color: var(--primary-background);
     margin: auto;
     border-radius: 12px;
-    box-shadow: 0 4px 15px 0 $shadow;
+    box-shadow: 0 4px 15px 0 var(--drop-shadow);
     padding: 50px;
     text-align: center;
   }
diff --git a/src/shared/components/Modal/index.scss b/src/shared/components/Modal/index.scss
index bcdbe47545..460c4daeba 100644
--- a/src/shared/components/Modal/index.scss
+++ b/src/shared/components/Modal/index.scss
@@ -29,6 +29,7 @@ $modal-mobile-padding: 1.5rem;
   outline: 0;
   box-sizing: border-box;
   backdrop-filter: blur(2px);
+  color: var(--primary-text);
 
   @include big-phone {
     display: flex;
diff --git a/src/shared/components/ReportModal/ReportModal.tsx b/src/shared/components/ReportModal/ReportModal.tsx
index 5eb9932d36..8329d46d43 100644
--- a/src/shared/components/ReportModal/ReportModal.tsx
+++ b/src/shared/components/ReportModal/ReportModal.tsx
@@ -8,7 +8,7 @@ import React, {
 import { useDispatch } from "react-redux";
 import { createReport } from "@/pages/OldCommon/store/actions";
 import { subscribeToMessageRefresh } from "@/pages/OldCommon/store/saga";
-import { Loader, Button } from "@/shared/components";
+import { Loader } from "@/shared/components";
 import { Colors, EntityTypes } from "@/shared/constants";
 import { useNotification } from "@/shared/hooks";
 import {
@@ -17,6 +17,7 @@ import {
   Proposal,
   Common,
 } from "@/shared/models";
+import { Button, ButtonVariant } from "@/shared/ui-kit";
 import { emptyFunction } from "@/shared/utils";
 import { Modal } from "../Modal";
 import "./index.scss";
@@ -151,6 +152,7 @@ const ReportModal: FC<PropsWithChildren<ReportModalProps>> = (props) => {
           disabled={isLoading}
           className="report-modal__button-container__button report-modal__button-container__cancel"
           onClick={onClose}
+          variant={ButtonVariant.OutlineDarkPink}
         >
           Cancel
         </Button>
@@ -158,6 +160,7 @@ const ReportModal: FC<PropsWithChildren<ReportModalProps>> = (props) => {
           disabled={isLoading || !message}
           className="report-modal__button-container__button report-modal__button-container__send"
           onClick={sendReport}
+          variant={ButtonVariant.PrimaryPink}
         >
           {isLoading ? (
             <Loader className="report-modal__button-container__send__loader" />
diff --git a/src/shared/components/ReportModal/index.scss b/src/shared/components/ReportModal/index.scss
index 51ae5b77e1..c440ff1bdc 100644
--- a/src/shared/components/ReportModal/index.scss
+++ b/src/shared/components/ReportModal/index.scss
@@ -20,7 +20,8 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  
+  overflow: hidden;
+
   @media screen and (min-width: $mobile-breakpoint) {
     padding: 2rem 3rem !important;
   }
@@ -28,7 +29,6 @@
 
 .report-modal__title {
   font-size: $xsmall;
-  color: $secondary-blue;
 }
 
 .report-modal__input {
@@ -36,8 +36,9 @@
   width: 100%;
   border-width: 0;
   outline: 0;
-  border: 0.0625rem $light-gray-3 solid;
+  border: 0.0625rem var(--gentle-stroke) solid;
   height: 100%;
+  background-color: var(--secondary-background);
 }
 
 .report-modal__button-container {
@@ -54,8 +55,6 @@
 }
 
 .report-modal__button-container__cancel {
-  background-color: $light-gray-1;
-  color: $light-gray-2;
   margin-right: 0.75rem;
 }
 
@@ -64,12 +63,10 @@
 }
 
 .report-modal__button-container__send {
-  background-color: $purple;
-  color: $white;
   margin-left: 0.75rem;
 }
 
 .report-modal__button-container__send__loader {
   height: 1.25rem;
   width: 1.25rem;
-}
\ No newline at end of file
+}
diff --git a/src/shared/components/SocialLinks/index.scss b/src/shared/components/SocialLinks/index.scss
index 7ec52fac10..6eeb2901e2 100644
--- a/src/shared/components/SocialLinks/index.scss
+++ b/src/shared/components/SocialLinks/index.scss
@@ -7,7 +7,6 @@
   margin: 1.5rem 0;
   border-radius: 1.875rem;
   box-shadow: 0 0.25rem 1rem 0 $shadow;
-  background-color: $white;
   top: 4rem;
   right: 10%;
 
diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss
index 6461d9be01..fb37129fb9 100644
--- a/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss
+++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss
@@ -32,6 +32,7 @@
   align-items: center;
   font-family: PoppinsSans, sans-serif;
   font-size: 1rem;
+  color: var(--primary-text);
 
   &:hover {
     text-decoration: underline;
diff --git a/src/shared/ui-kit/TextEditor/TextEditor.module.scss b/src/shared/ui-kit/TextEditor/TextEditor.module.scss
index bc7b69ad1e..cfd9b110e2 100644
--- a/src/shared/ui-kit/TextEditor/TextEditor.module.scss
+++ b/src/shared/ui-kit/TextEditor/TextEditor.module.scss
@@ -6,14 +6,13 @@
 }
 
 .editorWrapper {
-  --text-editor-border: 0.0625rem solid #{$c-neutrals-100};
+  --text-editor-border: 0.0625rem solid var(--gentle-stroke);
   --text-editor-elements-margin: 0.5rem;
   --text-editor-elements-indent: 1.5rem;
   --text-editor-elements-fs: #{$xsmall};
 
   display: flex;
   flex-direction: column;
-  //background-color: $c-shades-white;
 }
 .editorWrapperReadOnly {
   --text-editor-border: 0;
diff --git a/src/shared/ui-kit/TextEditor/components/Header/Header.module.scss b/src/shared/ui-kit/TextEditor/components/Header/Header.module.scss
index 5013915bd2..3f9cb35cd3 100644
--- a/src/shared/ui-kit/TextEditor/components/Header/Header.module.scss
+++ b/src/shared/ui-kit/TextEditor/components/Header/Header.module.scss
@@ -6,7 +6,7 @@
   justify-content: space-between;
   font-size: $xsmall;
   line-height: 120%;
-  color: $c-neutrals-600;
+  color: var(--primary-text);
 }
 
 .optionalHint {
diff --git a/src/shared/ui-kit/UploadFiles/components/Header/Header.module.scss b/src/shared/ui-kit/UploadFiles/components/Header/Header.module.scss
index 5013915bd2..3f9cb35cd3 100644
--- a/src/shared/ui-kit/UploadFiles/components/Header/Header.module.scss
+++ b/src/shared/ui-kit/UploadFiles/components/Header/Header.module.scss
@@ -6,7 +6,7 @@
   justify-content: space-between;
   font-size: $xsmall;
   line-height: 120%;
-  color: $c-neutrals-600;
+  color: var(--primary-text);
 }
 
 .optionalHint {
diff --git a/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss b/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss
index 0e53876b57..840d469c38 100644
--- a/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss
+++ b/src/shared/ui-kit/UploadFiles/components/Trigger/Trigger.module.scss
@@ -1,9 +1,9 @@
 @import "../../../../../constants";
 
 .container {
-  --upload-trigger-color: $c-pink-light;
-  --upload-trigger-border-color: #{$c-neutrals-100};
-  --upload-trigger-border: 0.0625rem solid var(--upload-trigger-border-color);
+  --upload-trigger-color: var(--primary-text);
+  --upload-trigger-border-color: var(--gentle-stroke);
+  --upload-trigger-border: 0.0625rem solid var(--gentle-stroke);
 
   position: relative;
   width: 6.25rem;
@@ -14,7 +14,7 @@
   justify-content: center;
   align-items: center;
   color: var(--upload-trigger-color);
-  background-color: $c-shades-white;
+  background-color: var(--primary-background);
   border: var(--upload-trigger-border);
   cursor: pointer;
   transition: color 0.2s, border-color 0.2s;
diff --git a/src/shared/utils/getTheme.ts b/src/shared/utils/getTheme.ts
index 79652e5c44..c3166cf646 100644
--- a/src/shared/utils/getTheme.ts
+++ b/src/shared/utils/getTheme.ts
@@ -1,19 +1,14 @@
-//import { StorageKey } from "@/shared/constants";
+import { StorageKey } from "../constants";
 import { Theme } from "../constants/theme";
 
 export const getTheme = () => {
-  /**
-   * Light mode is the default until we have a complete color scheme for dark mode.
-   */
-  return Theme.Light;
+  const theme = localStorage.getItem(StorageKey.Theme) as Theme | null;
+  if (theme && Object.values(Theme).includes(theme)) {
+    return theme;
+  }
 
-  // const theme = localStorage.getItem(StorageKey.Theme) as Theme | null;
-  // if (theme && Object.values(Theme).includes(theme)) {
-  //   return theme;
-  // }
-
-  // const isDarkThemePreferred = window.matchMedia(
-  //   `(prefers-color-scheme: ${Theme.Dark})`,
-  // );
-  // return isDarkThemePreferred ? Theme.Dark : Theme.Light;
+  const isDarkThemePreferred = window.matchMedia(
+    `(prefers-color-scheme: ${Theme.Dark})`,
+  );
+  return isDarkThemePreferred ? Theme.Dark : Theme.Light;
 };