diff --git a/src/style/app.module.css b/src/style/app.module.css
index 4a44aecfa2..65e80a2ddd 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -1,43 +1,104 @@
 :root {
+  /* Neutral Colors */
+  --grey-light: #eaebef;
+  --grey-dark: #707070;
+  --grey-border: #e8e5e5;
+  --input-shadow: #dddddd;
+
+  /* Blue Shades */
+  --blue-primary: #0056b3;
+  --blue-subtle: #7c9beb;
+  --blue-subtle-hover: #5f7e91;
+  --blue-search-bg: #a8c7fa;
+  --toggle-bg: #1e4e8c;
+  --dropdown-hover: #eff1f7;
+
+  /* Red Shades */
+  --red-delete-bg: #f8d6dc;
+  --red-delete-text: #ff4d4f;
+
+  /* Yellow/Orange Shades */
+  --loader-color: #febc59;
+
+  /* Miscellaneous */
   --brown-color: #555555;
+  --blue-color: #0000ff;
+  --light-blue-color: #286fe0;
+  --dimp-white: #b5b5b5;
+  --gray-blue: #1e293b;
+  --gray-white: #808080;
   --dropdown-hover-color: #eff1f7;
   --grey-bg-color: #eaebef;
+  --light-dark-green: #08780b;
+  --light-green: #31bb6b;
+  --green-color: #21d015;
+  --light-more-green: #39a440;
+  --off-light-green: #31bb6a60;
+  --dark-emerald-green: #23864c;
+  --light-neon-green: #afffe8;
+  --white-color: #ffffff;
+  --off-white-color: #ffffff97;
+  --black-color: #000000;
+  --black-shadow-color: #00000029;
+  --white-shadow-color: #ffffff33;
+  --light-dark-gray-color: #505050;
+  --light-orange: #febc59;
   --grey-border-box-color: #e8e5e5;
   --subtle-blue-grey: #7c9beb;
   --subtle-blue-grey-hover: #5f7e91;
+  --white: #fff;
+  --black: black;
+
+  /* Background and Border */
+  --table-bg: #eaebef;
+  --tablerow-bg: #eff1f7;
+  --date-picker-bg: #f2f2f2;
+  --table-bg-color: var(--grey-bg-color);
+  --tablerow-bg-color: var(--dropdown-hover-color);
+  --row-background: var(--bs-white, var(--bs-white));
+
+  /* Font Sizes */
+  --font-size-header: 16px;
+
+  /* Borders and Radius */
+  --primary-border-solid: 1px solid var(--dropdown-border-color);
+  --table-head-radius: 20px;
+
+  /* Loader Sizes */
+  --loader-size: 10em;
+  --loader-border-width: 1.1em;
+
+  /* Image Sizes */
+  --table-image-size: 50px;
+  --table-image-small-size: 25px;
+
+  /* Modal Dimensions */
   --modal-width: 670px;
   --modal-max-width: 680px;
+
+  /* Additional Variables */
   --input-shadow-color: #dddddd;
   --delete-button-bg: #f8d6dc;
   --delete-button-color: #ff4d4f;
   --search-button-bg: #a8c7fa;
-  --search-button-border: #555555;
-  --table-image-size: 50px;
-  --table-image-small-size: 25px;
+  --search-button-border: var(--brown-color);
   --bs-primary: #0056b3;
   --bs-white: #fff;
+  --bs-gray-600: #4b5563;
+  --bs-gray-400: #9ca3af;
+  --bs-gray-300: #d1d5db;
   --toggle-button-bg: #1e4e8c;
-  --table-head-bg: var(
-    --bs-primary,
-    blue
-  ); /* Assuming var(--bs-primary) is defined elsewhere */
-  --loader-size: 10em;
-  --loader-border-width: 1.1em;
-  --loader-color: #febc59;
-  --table-head-color: white;
-  --table-header-color: var(--bs-greyish-black, black);
-  --table-head-radius: 20px;
-  --table-bg-color: #eaebef;
-  --tablerow-bg-color: #eff1f7;
-  --row-background: var(--bs-white, white);
-  --font-size-header: 16px;
+  --table-head-bg: var(--bs-primary, var(--blue-color));
+  --table-head-color: var(--bs-white, var(--white-color));
+  --table-header-color: var(--bs-greyish-black, var(--black-color));
   --input-area-color: #f1f3f6;
   --date-picker-background: #f2f2f2;
   --grey-bg-color-dark: #707070;
+  --dropdown-border-color: #cccccc;
   --primary-border-solid: 1px solid var(--dropdown-border-color);
 }
 .fonts {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 .fonts > span {
@@ -79,7 +140,7 @@
 
 .capacityLabel {
   background-color: var(--bs-primary);
-  color: white;
+  color: var(--white-color);
   height: 22.19px;
   font-size: 12px;
   font-weight: bolder;
@@ -100,7 +161,7 @@
   height: 100%;
 }
 .sidebar:after {
-  background-color: #f7f7f7;
+  background-color: var(--grey-border-box-color);
   position: absolute;
   width: 2px;
   height: 600px;
@@ -117,22 +178,22 @@
 }
 
 .logintitle {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 20px;
   margin-bottom: 30px;
   padding-bottom: 5px;
-  border-bottom: 3px solid #31bb6b;
+  border-bottom: 3px solid var(--light-green);
   width: 15%;
 }
 
 .searchtitle {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 18px;
   margin-bottom: 20px;
   padding-bottom: 5px;
-  border-bottom: 3px solid #31bb6b;
+  border-bottom: 3px solid var(--light-green);
   width: 60%;
 }
 
@@ -217,7 +278,7 @@
 }
 
 .dropdown:is(:focus, :focus-visible) {
-  outline: 2px solid var(--highlight-color, #a8c7fa);
+  outline: 2px solid var(--highlight-color, var(--search-button-bg));
 }
 
 .dropdownItem {
@@ -228,16 +289,19 @@
 
 .dropdownItem:focus,
 .dropdownItem:hover {
-  outline: 2px solid var(--highlight-color, #a8c7fa);
+  outline: 2px solid var(--highlight-color, var(--search-button-bg));
 }
 
 .dropdownItem:hover,
 .dropdownItem:focus,
 .dropdownItem:active {
-  background-color: var(--dropdown-hover-color, #e0e0e0) !important;
+  background-color: var(
+    --dropdown-hover-color,
+    var(--grey-border-box-color)
+  ) !important;
   color: var(--brown-color) !important;
   outline: none !important;
-  box-shadow: 0 0 4px var(--highlight-color, #a8c7fa);
+  box-shadow: 0 0 4px var(--highlight-color, var(--search-button-bg));
 }
 
 .input {
@@ -312,7 +376,7 @@
 
 .createButton {
   background-color: var(--grey-bg-color) !important;
-  color: black !important;
+  color: var(--black-color) !important;
   margin-top: 10px;
   margin-left: 5px;
   border: 1px solid var(--brown-color);
@@ -320,7 +384,7 @@
 
 .createButton:hover {
   background-color: var(--grey-bg-color) !important;
-  color: black !important;
+  color: var(--black-color) !important;
   border: 1px solid var(--brown-color) !important;
 }
 
@@ -367,7 +431,7 @@
 }
 
 .searchButton:hover {
-  background-color: var(--search-button-hover-bg, #286fe0);
+  background-color: var(--search-button-hover-bg, var(--light-blue-color));
   border-color: var(--search-button-border);
 }
 
@@ -382,7 +446,7 @@
 }
 
 .addButton:hover {
-  background-color: #286fe0;
+  background-color: var(--light-blue-color);
   border-color: var(--search-button-border);
 }
 
@@ -404,7 +468,7 @@
 }
 
 .infoButton:hover {
-  background-color: #286fe0;
+  background-color: var(--light-blue-color);
   border-color: var(--search-button-border);
 }
 
@@ -442,7 +506,7 @@
 
 .errorIcon {
   transform: scale(1.5);
-  color: var(--bs-danger);
+  color: var(--bs-danger, var(--delete-button-color));
   margin-bottom: 1rem;
   /* Add error icon for non-color indication */
   &::before {
@@ -462,7 +526,7 @@
   font-size: 16px;
   letter-spacing: 0;
   line-height: 1;
-  color: #08780b;
+  color: var(--light-dark-green);
 }
 
 .subTagsLink i {
@@ -489,7 +553,7 @@
 }
 
 .tagsBreadCrumbs:hover {
-  color: var(--bs-blue);
+  color: var(--blue-color);
   font-weight: 600;
   text-decoration: underline;
 }
@@ -508,7 +572,7 @@ input[type='checkbox']:checked + label {
 }
 
 input[type='radio']:checked + label:hover {
-  color: black !important;
+  color: var(--black-color) !important;
 }
 
 .actionItemsContainer {
@@ -568,7 +632,7 @@ hr {
   flex-direction: row;
   font-weight: 900;
   font-size: 16px;
-  color: rgb(80, 80, 80);
+  color: var(--light-dark-gray-color);
 }
 
 .rankings {
@@ -615,7 +679,7 @@ hr {
 .pageNotFound h1.head {
   font-size: 250px;
   font-weight: 900;
-  color: #31bb6b;
+  color: var(--light-green);
   letter-spacing: 25px;
   margin: 10px 0 0 0;
 }
@@ -695,7 +759,7 @@ hr {
 
 .inputFieldPledge {
   background-color: var(--bs-white);
-  box-shadow: 0 1px 1px #31bb6b;
+  box-shadow: 0 1px 1px var(--light-green);
 }
 
 .dropdownPledge {
@@ -748,9 +812,9 @@ hr {
   justify-content: space-between;
   margin: 1.5rem 0 0 0;
   padding: 1.25rem 2rem;
-  background-color: rgba(255, 255, 255, 0.591);
+  background-color: var(--off-white-color);
 
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+  box-shadow: var(--black-shadow-color) 0px 1px 4px;
   border-radius: 0.5rem;
 }
 
@@ -763,7 +827,7 @@ hr {
 .titleContainer h3 {
   font-size: 1.75rem;
   font-weight: 750;
-  color: #5e5e5e;
+  color: var(--light-dark-gray-color);
   margin-top: 0.2rem;
 }
 
@@ -771,7 +835,7 @@ hr {
   font-size: 0.9rem;
   margin-left: 0.5rem;
   font-weight: lighter;
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 .raisedAmount {
@@ -780,7 +844,7 @@ hr {
   align-items: center;
   font-size: 1.25rem;
   font-weight: 750;
-  color: #5e5e5e;
+  color: var(--light-dark-gray-color);
 }
 
 .progressContainer {
@@ -834,7 +898,7 @@ hr {
   padding: 0.75rem;
   border: 1px solid #e2e8f0;
   background-color: var(--bs-white);
-  color: #1e293b;
+  color: var(--gray-blue);
   box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.15);
   display: flex;
   flex-direction: column;
@@ -861,7 +925,7 @@ hr {
 }
 
 .toggleBtnPledge:hover {
-  color: #31bb6b !important;
+  color: var(--light-green) !important;
 }
 
 .card {
@@ -884,7 +948,7 @@ hr {
   font-weight: normal;
   padding-bottom: 0;
   font-size: 1rem;
-  color: black;
+  color: var(--black-color);
 }
 
 .cardBody {
@@ -908,7 +972,7 @@ hr {
 .eventDetailsBox {
   position: relative;
   box-sizing: border-box;
-  background: #ffffff;
+  background: var(--white-color);
   width: 66%;
   padding: 0.3rem;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
@@ -920,15 +984,15 @@ hr {
   padding: 20px;
   width: 100%;
   display: flex;
-  background-color: #ffffff;
+  background-color: var(--white-color);
   margin: 0 4px;
   justify-content: space-between;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 8px var(--black-shadow-color);
   align-items: center;
   border-radius: 20px;
 }
 .ctacards span {
-  color: rgb(181, 181, 181);
+  color: var(--dimp-white);
   font-size: small;
 }
 
@@ -952,13 +1016,13 @@ hr {
   color: var(--delete-button-color);
   margin-right: 5px;
   background-color: var(--delete-button-bg);
-  border: white;
+  border: var(--white-color);
 }
 
 .closeButtonOrganizationEvents:hover {
   color: var(--delete-button-bg) !important;
   background-color: var(--delete-button-color) !important;
-  border: white;
+  border: var(--white-color);
 }
 
 .datedivOrganizationEvents {
@@ -1001,7 +1065,7 @@ hr {
 
 .createButtonOrganizationEvents {
   background-color: var(--search-button-bg) !important;
-  color: black !important;
+  color: var(--black-color) !important;
   margin: 15px 0 0;
   padding: 10px 10px;
   border-radius: 5px;
@@ -1018,7 +1082,7 @@ hr {
 
 .createButtonOrganizationEvents:hover {
   background-color: var(--bs-primary) !important;
-  color: white !important;
+  color: var(--white-color) !important;
   border: 1px solid var(--search-button-border) !important;
 }
 
@@ -1030,7 +1094,7 @@ hr {
   width: 33%;
 
   box-sizing: border-box;
-  background: #ffffff;
+  background: var(--white-color);
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   margin-bottom: 0;
@@ -1050,7 +1114,7 @@ hr {
 
 .startDate,
 .endDate {
-  color: #808080;
+  color: var(--gray-white);
   font-size: 14px;
 }
 
@@ -1066,7 +1130,7 @@ hr {
 }
 
 .description {
-  color: #737373;
+  color: var(--gray-white);
   font-weight: 300;
   font-size: 14px;
   word-wrap: break-word;
@@ -1080,7 +1144,7 @@ hr {
 }
 
 .toporgloc span {
-  color: #737373;
+  color: var(--gray-white);
 }
 
 .eventAgendaItemContainer h2 {
@@ -1102,7 +1166,7 @@ hr {
 }
 
 .customcell {
-  background-color: #31bb6b !important;
+  background-color: var(--light-green) !important;
   color: var(--bs-white) !important;
   font-size: medium !important;
   font-weight: 500 !important;
@@ -1112,23 +1176,23 @@ hr {
 
 .eventsAttended,
 .membername {
-  color: blue;
+  color: var(--blue-color);
 }
 .actionBtn {
-  background-color: #ffffff !important;
+  background-color: var(--white-color) !important;
 }
 .actionBtn:hover,
 .actionBtn:focus,
 .actionBtn:active {
-  color: #39a440 !important;
+  color: var(--light-more-green) !important;
 }
 
 .table-body > .table-row {
-  background-color: #fff !important;
+  background-color: var(--white-color) !important;
 }
 
 .table-body > .table-row:nth-child(2n) {
-  background: #afffe8 !important;
+  background: var(--light-neon-green) !important;
 }
 
 .organizationFundCampaignContainer {
@@ -1168,7 +1232,7 @@ hr {
 
 .goalButtonOrganizationFundCampaign {
   border: 1px solid var(--grey-border-box-color) !important;
-  color: #707070 !important;
+  color: var(--grey-bg-color-dark) !important;
   width: 75%;
   padding: 10px;
   border-radius: 8px;
@@ -1202,7 +1266,7 @@ hr {
   cursor: pointer;
 }
 .campaignNameInfo:hover {
-  color: blue;
+  color: var(--blue-color);
   transform: translateY(-2px);
 }
 
@@ -1216,7 +1280,7 @@ hr {
   border: 1px solid var(--grey-border-box-color);
   position: relative;
   display: inline-block;
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 .btnsContainerOrganizationFundCampaign {
@@ -1514,7 +1578,7 @@ hr {
 }
 
 .subTagsLink {
-  color: var(--bs-blue);
+  color: var(--blue-color);
   font-weight: 500;
   cursor: pointer;
   /* Prevent layout shift */
@@ -1544,7 +1608,7 @@ hr {
 
 .tagsBreadCrumbs:hover,
 .tagsBreadCrumbs:focus {
-  color: var(--bs-blue);
+  color: var(--blue-color);
   font-weight: 600;
   text-decoration: underline;
 }
@@ -1564,7 +1628,7 @@ hr {
 }
 
 .toggleBtn:hover {
-  color: #31bb6b !important;
+  color: var(--light-green) !important;
 }
 
 input[type='radio']:checked + label {
@@ -1572,7 +1636,7 @@ input[type='radio']:checked + label {
 }
 
 input[type='radio']:checked + label:hover {
-  color: black !important;
+  color: var(--black-color) !important;
 }
 
 .dropdownToggle {
@@ -1661,11 +1725,11 @@ input[type='radio']:checked + label:hover {
 }
 
 .noOutline input:disabled {
-  -webkit-text-fill-color: black !important;
+  -webkit-text-fill-color: var(--black-color) !important;
 }
 
 .noOutline textarea:disabled {
-  color: var(--bs-black) !important;
+  color: var(--black-color) !important;
   opacity: 1;
 }
 
@@ -1675,10 +1739,10 @@ input[type='radio']:checked + label:hover {
 
 .dropdowns {
   background-color: var(--bs-white);
-  border: 1px solid #31bb6b;
+  border: 1px solid var(--light-green);
   position: relative;
   display: inline-block;
-  color: #31bb6b;
+  color: var(--light-green);
 }
 
 .chipIcon {
@@ -1707,7 +1771,7 @@ input[type='radio']:checked + label:hover {
 }
 
 .titlemodal {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 32px;
   width: 65%;
@@ -1823,16 +1887,16 @@ input[type='radio']:checked + label:hover {
 .sampleOrgCreationBtn {
   width: 100%;
   background-color: transparent;
-  color: #707070;
-  border-color: #707070;
+  color: var(--grey-bg-color-dark);
+  border-color: var(--grey-bg-color-dark);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .sampleHover:hover {
-  border-color: grey;
-  color: grey;
+  border-color: var(--gray-white);
+  color: var(--gray-white);
 }
 
 .sampleModalTitle {
@@ -1924,13 +1988,13 @@ input[type='radio']:checked + label:hover {
 }
 
 .searchtitleMemberDetail {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 18px;
   margin-top: 60px;
   margin-bottom: 20px;
   padding-bottom: 5px;
-  border-bottom: 3px solid #eaebef;
+  border-bottom: 3px solid var(--grey-bg-color);
   width: 60%;
 }
 
@@ -1952,23 +2016,23 @@ input[type='radio']:checked + label:hover {
 }
 
 .logintitleMemberDetail {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 20px;
   margin-bottom: 30px;
   padding-bottom: 5px;
-  border-bottom: 3px solid #eaebef;
+  border-bottom: 3px solid var(--grey-bg-color);
   width: 30%;
 }
 
 .logintitleadmin {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 20px;
   margin-top: 50px;
   margin-bottom: 40px;
   padding-bottom: 5px;
-  border-bottom: 3px solid #eaebef;
+  border-bottom: 3px solid var(--grey-bg-color);
   width: 60%;
 }
 
@@ -2026,7 +2090,7 @@ input[type='radio']:checked + label:hover {
   transition:
     transform 0.2s,
     box-shadow 0.2s;
-  background-color: #eaebef;
+  background-color: var(--grey-bg-color);
   margin-right: 13px;
 }
 
@@ -2047,7 +2111,7 @@ input[type='radio']:checked + label:hover {
   flex-direction: column;
   width: 30%;
   padding: 40px 30px;
-  background: #ffffff;
+  background: var(--white-color);
   border-color: var(--grey-border-box-color);
   border-width: 5px;
   border-radius: 10px;
@@ -2063,12 +2127,12 @@ input[type='radio']:checked + label:hover {
 }
 
 .titlemodalMemberDetail {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 20px;
   margin-bottom: 20px;
   padding-bottom: 5px;
-  border-bottom: 3px solid #eaebef;
+  border-bottom: 3px solid var(--grey-bg-color);
   width: 65%;
 }
 
@@ -2094,7 +2158,7 @@ input[type='radio']:checked + label:hover {
   margin-top: 5px;
   transform: scale(1.2);
   cursor: pointer;
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 .greenregbtnMemberDetail {
@@ -2104,7 +2168,7 @@ input[type='radio']:checked + label:hover {
   box-shadow: 0 2px 2px var(--grey-border-box-color);
   padding: 10px 10px;
   border-radius: 5px;
-  background-color: #eaebef;
+  background-color: var(--grey-bg-color);
   font-size: 16px;
   color: var(--bs-white);
   outline: none;
@@ -2119,12 +2183,12 @@ input[type='radio']:checked + label:hover {
   margin: 1rem 0 0;
   margin-right: 2px;
   margin-top: 10px;
-  border: 1px solid #eaebef;
+  border: 1px solid var(--grey-bg-color);
   padding: 10px 10px;
   border-radius: 5px;
   background-color: var(--bs-white);
   font-size: 16px;
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   outline: none;
   font-weight: 600;
   cursor: pointer;
@@ -2209,7 +2273,7 @@ input[type='radio']:checked + label:hover {
 .memberfontcreatedbtn {
   border-radius: 7px;
   border-color: var(--grey-border-box-color);
-  background-color: #eaebef;
+  background-color: var(--grey-bg-color);
   color: var(--bs-white);
   box-shadow: none;
   height: 2.5rem;
@@ -2236,30 +2300,30 @@ input[type='radio']:checked + label:hover {
 .activeBtn {
   width: 100%;
   display: flex;
-  color: #fff;
-  border: 1px solid #000;
-  background-color: #eaebef;
+  color: var(--white-color);
+  border: 1px solid var(--black-color);
+  background-color: var(--grey-bg-color);
   transition: 0.5s;
 }
 
 .activeBtn:hover {
-  color: #fff;
-  background: #23864c;
+  color: var(--white-color);
+  background: var(--dark-emerald-green);
   transition: 0.5s;
 }
 
 .inactiveBtn {
   width: 100%;
   display: flex;
-  color: #707070;
-  border: 1px solid #31bb6a60;
-  background-color: #fff;
+  color: var(--grey-bg-color-dark);
+  border: 1px solid var(--off-light-green);
+  background-color: var(--white-color);
   transition: 0.5s;
 }
 
 .inactiveBtn:hover {
-  color: #fff;
-  background: #eaebef;
+  color: var(--white-color);
+  background: var(--grey-bg-color);
   transition: 0.5s;
 }
 
@@ -2285,27 +2349,27 @@ input[type='radio']:checked + label:hover {
 }
 
 .activeBtn .bgFill {
-  background-color: #fff;
+  background-color: var(--white-color);
 }
 
 .activeBtn i {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 .inactiveBtn .bgFill {
-  background-color: #eaebef;
+  background-color: var(--grey-bg-color);
 }
 
 .inactiveBtn:hover .bgFill {
-  background-color: #fff;
+  background-color: var(--white-color);
 }
 
 .inactiveBtn i {
-  color: #fff;
+  color: var(--white-color);
 }
 
 .inactiveBtn:hover i {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 .topRadius {
@@ -2328,11 +2392,11 @@ input[type='radio']:checked + label:hover {
 }
 
 .toporglocMemberDetail span {
-  color: #737373;
+  color: var(--grey-bg-color-dark);
 }
 
 .inputColor {
-  background: #f1f3f6;
+  background: var(--input-area-color);
 }
 
 .cardHeaderMemberDetail {
@@ -2375,7 +2439,7 @@ input[type='radio']:checked + label:hover {
 
 .dateboxMemberDetail > div > input {
   padding: 0.5rem 0 0.5rem 0.5rem !important; /* top, right, bottom, left */
-  background-color: #f1f3f6;
+  background-color: var(--input-area-color);
   border-radius: var(--bs-border-radius) !important;
   border: none !important;
 }
@@ -2386,17 +2450,17 @@ input[type='radio']:checked + label:hover {
 
 .dateboxMemberDetail > div > fieldset {
   border: none !important;
-  /* background-color: #f1f3f6; */
-  border-radius: var(--bs-border-radius) !important;
+  /* background-color: var(--input-area-color); */
+  border-radius: var(--bs-border-radius, 4px) !important;
 }
 
 .dateboxMemberDetail > div {
   margin: 0.5rem !important;
-  background-color: #f1f3f6;
+  background-color: var(--input-area-color);
 }
 
 input::file-selector-button {
-  background-color: black;
+  background-color: var(--black-color);
   color: var(--bs-white);
 }
 
@@ -2412,7 +2476,7 @@ input::file-selector-button {
 
 .tagLink:hover {
   font-weight: 800;
-  color: var(--bs-blue);
+  color: var(--blue-color);
   text-decoration: underline;
 }
 
@@ -2531,7 +2595,7 @@ input::file-selector-button {
 .cardBody .textWrapper .secondaryText {
   font-size: 14px;
   display: block;
-  color: var(--bs-secondary);
+  color: var(--bs-secondary, var(--bs-gray-400));
 }
 
 /* Loading OrgList CSS */
@@ -2542,7 +2606,7 @@ input::file-selector-button {
   height: calc(120px + 2rem);
   padding: 1rem;
   border-radius: 8px;
-  outline: 1px solid var(--bs-gray-200);
+  outline: 1px solid var(--bs-gray-200, var(--bs-gray-300));
   position: relative;
 }
 
@@ -2564,7 +2628,7 @@ input::file-selector-button {
 }
 
 .titlemodaldialog {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-size: 20px;
   margin-bottom: 20px;
   padding-bottom: 5px;
@@ -2574,7 +2638,7 @@ form label {
   font-weight: bold;
   padding-bottom: 1px;
   font-size: 14px;
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 form > input {
@@ -2675,7 +2739,7 @@ form > input {
 }
 
 .row .right_portion::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--black-shadow-color);
   border-radius: 4px;
 }
 
@@ -2724,14 +2788,14 @@ form > input {
   height: 100%;
   display: flex;
   background-color: var(--search-button-bg);
-  border-color: var(--search-button-border);
+  border-color: var(--search-button-border, var(--black-color));
   justify-content: center;
   align-items: center;
 }
 
 .login_btn {
   background-color: var(--search-button-bg);
-  border-color: var(--search-button-border);
+  border-color: var(--search-button-border, var(--black-color));
   margin-top: 1rem;
   margin-bottom: 1rem;
   width: 100%;
@@ -2896,9 +2960,9 @@ form > input {
 
 .cardTemplate {
   padding: 2rem;
-  background-color: #fff;
+  background-color: var(--white-color);
   border-radius: 0.8rem;
-  border: 1px solid var(--bs-gray-200);
+  border: 1px solid var(--bs-gray-200, var(--bs-gray-300));
 }
 
 .keyWrapper {
@@ -3136,7 +3200,7 @@ form > input {
   transform: scale(1.2);
   cursor: pointer;
   border: none;
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 16px;
 }
@@ -3155,10 +3219,10 @@ button[data-testid='createPostBtn'] {
   font-size: 10px;
   position: relative;
   text-indent: -9999em;
-  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
-  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
-  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
-  border-left: 1.1em solid #febc59;
+  border-top: 1.1em solid var(--white-shadow-color);
+  border-right: 1.1em solid var(--white-shadow-color);
+  border-bottom: 1.1em solid var(--white-shadow-color);
+  border-left: 1.1em solid var(--light-orange);
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
@@ -3276,7 +3340,7 @@ button[data-testid='createPostBtn'] {
 
 .cardItem .creator {
   font-size: 1rem;
-  color: var(--bs-success, #21d015);
+  color: var(--bs-success, var(--green-color));
 }
 .rightCard {
   display: flex;
@@ -3314,7 +3378,7 @@ button[data-testid='createPostBtn'] {
     display: flex !important;
     align-items: center;
     background-color: transparent;
-    color: #31bb6b;
+    color: var(--light-green);
   }
 
   .entryaction .spinner-grow {
@@ -3333,7 +3397,7 @@ button[data-testid='createPostBtn'] {
   display: flex;
   flex-direction: column;
   padding: 1rem 1rem 0 1rem;
-  background-color: #f6f8fc;
+  background-color: var(--input-area-color);
   transition: 0.5s;
   font-family: var(--bs-leftDrawer-font-family);
 }
@@ -3398,7 +3462,7 @@ button[data-testid='createPostBtn'] {
 
 .leftDrawer .profileContainer:focus {
   outline: none;
-  background-color: var(--bs-gray-100);
+  background-color: var(--bs-gray-100, var(--white-color));
 }
 
 .leftDrawer .imageContainer {
@@ -3637,7 +3701,7 @@ button[data-testid='createPostBtn'] {
 
 .recurrenceRuleSubmitBtn:hover {
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px var(--black-shadow-color);
 }
 
 .recurrenceRuleSubmitBtn:focus-visible {
@@ -3646,7 +3710,7 @@ button[data-testid='createPostBtn'] {
 }
 
 .attendance-modal .borderRightGreen {
-  border-right: 1px solid green;
+  border-right: 1px solid var(--light-dark-green);
 }
 .attendance-modal .positionedTopRight {
   top: 10px;
@@ -3796,16 +3860,16 @@ button[data-testid='createPostBtn'] {
   background-color: rgba(0, 0, 0, 0);
   padding: 0;
   border: none;
-  color: black;
+  color: var(--black-color);
   transition: all 0.2s ease-in-out;
   border-radius: 4px;
 }
 
 .cardActionBtn:hover,
 .cardActionBtn:focus-visible {
-  background-color: ghostwhite;
+  background-color: var(--dropdown-hover-color);
   border: none;
-  color: black !important;
+  color: var(--black-color) !important;
   outline: 2px solid var(--subtle-blue-grey);
   outline-offset: 2px;
 }
@@ -4036,7 +4100,7 @@ button[data-testid='createPostBtn'] {
   padding-right: 40px;
   width: 100%;
   border-radius: 4px;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--bs-gray-300);
 }
 
 .submitBtn {