diff --git a/src/assets/css/app.css b/src/assets/css/app.css
index bd34d56907..f2bc9f3aaf 100644
--- a/src/assets/css/app.css
+++ b/src/assets/css/app.css
@@ -3901,7 +3901,7 @@ fieldset:disabled .btn {
   --bs-dropdown-link-hover-color: var(--bs-body-color);
   --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
   --bs-dropdown-link-active-color: #fff;
-  --bs-dropdown-link-active-bg: #31bb6b;
+  --bs-dropdown-link-active-bg: #a8c7fa;
   --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
   --bs-dropdown-item-padding-x: 1rem;
   --bs-dropdown-item-padding-y: 0.25rem;
@@ -5645,7 +5645,7 @@ fieldset:disabled .btn {
   --bs-progress-border-radius: var(--bs-border-radius);
   --bs-progress-box-shadow: var(--bs-box-shadow-inset);
   --bs-progress-bar-color: #fff;
-  --bs-progress-bar-bg: #31bb6b;
+  --bs-progress-bar-bg: #0056b3;
   --bs-progress-bar-transition: width 0.6s ease;
   display: flex;
   height: var(--bs-progress-height);
diff --git a/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx b/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx
index 0d317266d9..9c9a822e22 100644
--- a/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx
+++ b/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx
@@ -113,7 +113,11 @@ function addOnEntry({
           </Card.Subtitle>
           <Card.Text>{description}</Card.Text>
           <Button
-            className={styles.entryaction}
+            className={
+              uninstalledOrgs.includes(currentOrg)
+                ? styles.addButton
+                : `btn btn-danger ${styles.removeButton}`
+            }
             variant="primary"
             // disabled={buttonLoading || !configurable}
             disabled={buttonLoading}
diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.module.css b/src/components/AddPeopleToTag/AddPeopleToTag.module.css
deleted file mode 100644
index 5dd04ffed5..0000000000
--- a/src/components/AddPeopleToTag/AddPeopleToTag.module.css
+++ /dev/null
@@ -1,54 +0,0 @@
-.errorContainer {
-  min-height: 100vh;
-}
-
-.errorMessage {
-  margin-top: 25%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.errorIcon {
-  transform: scale(1.5);
-  color: var(--bs-danger);
-  margin-bottom: 1rem;
-}
-
-.tableHeader {
-  background-color: var(--bs-primary);
-  color: var(--bs-white);
-  font-size: 1rem;
-}
-
-.rowBackground {
-  background-color: var(--bs-white);
-  max-height: 120px;
-}
-
-.scrollContainer {
-  height: 100px;
-  overflow-y: auto;
-  margin-bottom: 1rem;
-}
-
-.memberBadge {
-  display: flex;
-  align-items: center;
-  padding: 5px 10px;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px var(--bs-gray-400);
-  max-width: calc(100% - 2rem);
-}
-
-.removeFilterIcon {
-  cursor: pointer;
-}
-
-.loadingDiv {
-  min-height: 300px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.tsx b/src/components/AddPeopleToTag/AddPeopleToTag.tsx
index 51d21a6a1c..29eeb4a56c 100644
--- a/src/components/AddPeopleToTag/AddPeopleToTag.tsx
+++ b/src/components/AddPeopleToTag/AddPeopleToTag.tsx
@@ -7,7 +7,7 @@ import React, { useEffect, useState } from 'react';
 import { Modal, Form, Button } from 'react-bootstrap';
 import { useParams } from 'react-router-dom';
 import type { InterfaceQueryUserTagsMembersToAssignTo } from 'utils/interfaces';
-import styles from './AddPeopleToTag.module.css';
+import styles from '../../style/app.module.css';
 import type { InterfaceTagUsersToAssignToQuery } from 'utils/organizationTagsUtils';
 import {
   TAGS_QUERY_DATA_CHUNK_SIZE,
@@ -106,7 +106,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
           };
         },
       ) => {
-        if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
+        if (!fetchMoreResult) return prevResult;
 
         return {
           getUsersToAssignTo: {
@@ -127,7 +127,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
   const userTagMembersToAssignTo =
     userTagsMembersToAssignToData?.getUsersToAssignTo.usersToAssignTo.edges.map(
       (edge) => edge.node,
-    ) ?? /* istanbul ignore next */ [];
+    ) ?? [];
 
   const handleAddOrRemoveMember = (member: InterfaceMemberData): void => {
     setAssignToMembers((prevMembers) => {
@@ -173,7 +173,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
         hideAddPeopleToTagModal();
         setAssignToMembers([]);
       }
-    } catch (error: unknown) /* istanbul ignore next */ {
+    } catch (error: unknown) {
       const errorMessage =
         error instanceof Error ? error.message : tErrors('unknownError');
       toast.error(errorMessage);
@@ -244,7 +244,10 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
             data-testid={
               isToBeAssigned ? 'deselectMemberBtn' : 'selectMemberBtn'
             }
-            variant={!isToBeAssigned ? 'primary' : 'danger'}
+            // variant={!isToBeAssigned ? 'primary' : 'danger'}
+            className={
+              !isToBeAssigned ? styles.editButton : `btn btn-danger btn-sm`
+            }
           >
             {isToBeAssigned ? 'x' : '+'}
           </Button>
@@ -263,7 +266,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
         centered
       >
         <Modal.Header
-          className="bg-primary"
+          className={`bg-primary ${styles.modalHeader}`}
           data-testid="modalOrganizationHeader"
           closeButton
         >
@@ -301,7 +304,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
                 <Form.Control
                   type="text"
                   id="firstName"
-                  className="bg-light"
+                  className={`bg-light ${styles.inputField}`}
                   placeholder={tCommon('firstName')}
                   onChange={(e) =>
                     setMemberToAssignToSearchFirstName(e.target.value.trim())
@@ -315,7 +318,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
                 <Form.Control
                   type="text"
                   id="lastName"
-                  className="bg-light"
+                  className={`bg-light ${styles.inputField}`}
                   placeholder={tCommon('lastName')}
                   onChange={(e) =>
                     setMemberToAssignToSearchLastName(e.target.value.trim())
@@ -345,8 +348,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
                     next={loadMoreMembersToAssignTo}
                     hasMore={
                       userTagsMembersToAssignToData?.getUsersToAssignTo
-                        .usersToAssignTo.pageInfo.hasNextPage ??
-                      /* istanbul ignore next */ false
+                        .usersToAssignTo.pageInfo.hasNextPage ?? false
                     }
                     loader={<InfiniteScrollLoader />}
                     scrollableTarget="addPeopleToTagScrollableDiv"
@@ -357,7 +359,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
                       hideFooter={true}
                       getRowId={(row) => row.id}
                       slots={{
-                        noRowsOverlay: /* istanbul ignore next */ () => (
+                        noRowsOverlay: () => (
                           <Stack
                             height="100%"
                             alignItems="center"
@@ -396,16 +398,17 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
           <Modal.Footer>
             <Button
               onClick={hideAddPeopleToTagModal}
-              variant="outline-secondary"
+              variant="outline-danger"
               data-testid="closeAddPeopleToTagModal"
+              className={styles.removeButton}
             >
               {tCommon('cancel')}
             </Button>
             <Button
               type="submit"
               disabled={addPeopleToTagLoading}
-              variant="primary"
               data-testid="assignPeopleBtn"
+              className={styles.addButton}
             >
               {t('assign')}
             </Button>
diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css
deleted file mode 100644
index e4f244807f..0000000000
--- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css
+++ /dev/null
@@ -1,79 +0,0 @@
-.entrytoggle {
-  margin: 24px 24px 0 auto;
-  width: fit-content;
-}
-
-.entryaction {
-  display: flex !important;
-}
-
-.entryaction i {
-  margin-right: 8px;
-  margin-top: 4px;
-}
-
-.entryaction .spinner-grow {
-  height: 1rem;
-  width: 1rem;
-  margin-right: 8px;
-}
-
-.admedia {
-  object-fit: cover;
-  height: 16rem;
-}
-
-.buttons {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.card {
-  width: 28rem;
-}
-
-.dropdownButton {
-  background-color: transparent;
-  color: #000;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  width: 100%;
-  justify-content: flex-end;
-  padding: 8px 10px;
-}
-
-.dropdownContainer {
-  position: relative;
-  display: inline-block;
-}
-
-.dropdownmenu {
-  display: none;
-  position: absolute;
-  z-index: 1;
-  background-color: white;
-  width: 120px;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  padding: 5px 0;
-  margin: 0;
-  list-style-type: none;
-  right: 0;
-  top: 100%;
-}
-
-.dropdownmenu li {
-  cursor: pointer;
-  padding: 8px 16px;
-  text-decoration: none;
-  display: block;
-  color: #333;
-}
-
-.dropdownmenu li:hover {
-  background-color: #f1f1f1;
-}
-
-.dropdownContainer:hover .dropdownmenu {
-  display: block;
-}
diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx
index 7656f1f0cf..dca9adb45a 100644
--- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx
+++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import styles from './AdvertisementEntry.module.css';
+import styles from '../../../../style/app.module.css';
 import { Button, Card, Col, Row, Spinner, Modal } from 'react-bootstrap';
 import { DELETE_ADVERTISEMENT_BY_ID } from 'GraphQl/Mutations/mutations';
 import { useMutation } from '@apollo/client';
@@ -99,7 +99,7 @@ function AdvertisementEntry({
       <Row data-testid="AdEntry" xs={1} md={2} className="g-4">
         {Array.from({ length: 1 }).map((_, idx) => (
           <Col key={idx}>
-            <Card className={styles.card}>
+            <Card className={styles.addCard}>
               <div className={styles.dropdownContainer}>
                 <button
                   className={styles.dropdownButton}
@@ -163,7 +163,7 @@ function AdvertisementEntry({
                 </Card.Subtitle>
                 <div className={styles.buttons}>
                   <Button
-                    className={styles.entryaction}
+                    className={`${styles.entryaction} ${styles.addButton}`}
                     variant="primary"
                     disabled={buttonLoading}
                     data-testid="AddOnEntry_btn_install"
@@ -189,12 +189,15 @@ function AdvertisementEntry({
                     {t('deleteAdvertisementMsg')}
                   </Modal.Body>
                   <Modal.Footer>
-                    <Button variant="danger" onClick={toggleShowDeleteModal}>
+                    <Button
+                      className={`btn btn-danger ${styles.removeButton}`}
+                      onClick={toggleShowDeleteModal}
+                    >
                       {tCommon('no')}
                     </Button>
                     <Button
                       type="button"
-                      className="btn btn-success"
+                      className={`btn ${styles.addButton}`}
                       onClick={(): void => {
                         onDelete();
                       }}
diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx
index e329ce6855..24290d7b13 100644
--- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx
+++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx
@@ -249,7 +249,7 @@ function advertisementRegister({
     <>
       {formStatus === 'register' ? (
         <Button
-          className={styles.modalbtn}
+          className={styles.dropdown}
           variant="primary"
           onClick={handleShow}
           data-testid="createAdvertisement"
@@ -286,6 +286,7 @@ function advertisementRegister({
                     name: e.target.value,
                   });
                 }}
+                className={styles.inputField}
               />
             </Form.Group>
             <Form.Group className="mb-3">
@@ -312,6 +313,7 @@ function advertisementRegister({
                     });
                   }
                 }}
+                className={styles.inputField}
               />
               {formState.advertisementMedia && (
                 <div
@@ -367,6 +369,7 @@ function advertisementRegister({
                     type: e.target.value,
                   });
                 }}
+                className={styles.inputField}
               >
                 <option value="POPUP">Popup Ad</option>
                 <option value="BANNER">Banner Ad </option>
@@ -385,6 +388,7 @@ function advertisementRegister({
                     startDate: new Date(e.target.value),
                   });
                 }}
+                className={styles.inputField}
               />
             </Form.Group>
 
@@ -400,6 +404,7 @@ function advertisementRegister({
                     endDate: new Date(e.target.value),
                   });
                 }}
+                className={styles.inputField}
               />
             </Form.Group>
           </Form>
@@ -408,14 +413,13 @@ function advertisementRegister({
           <Button
             variant="secondary"
             onClick={handleClose}
-            className={styles.closeButtonAdvertisementRegister}
+            className={`btn btn-danger ${styles.removeButton}`}
             data-testid="addonclose"
           >
             {tCommon('close')}
           </Button>
           {formStatus === 'register' ? (
             <Button
-              variant="primary"
               onClick={handleRegister}
               data-testid="addonregister"
               className={styles.addButton}
@@ -424,9 +428,9 @@ function advertisementRegister({
             </Button>
           ) : (
             <Button
-              variant="primary"
               onClick={handleUpdate}
               data-testid="addonupdate"
+              className={styles.addButton}
             >
               {tCommon('saveChanges')}
             </Button>
diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx
index c9048eb552..397df845fb 100644
--- a/src/components/EventCalendar/EventCalendar.tsx
+++ b/src/components/EventCalendar/EventCalendar.tsx
@@ -549,7 +549,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
           </Button>
           <div>
             <Button
-              className={styles.btn__today}
+              className={styles.editButton}
               onClick={handleTodayButton}
               data-testid="today"
             >
diff --git a/src/components/EventCalendar/EventHeader.tsx b/src/components/EventCalendar/EventHeader.tsx
index 9201e8b696..6fe1814969 100644
--- a/src/components/EventCalendar/EventHeader.tsx
+++ b/src/components/EventCalendar/EventHeader.tsx
@@ -52,7 +52,7 @@ function eventHeader({
              *
              * @param e - The event object from the input change.
              */
-            /*istanbul ignore next*/
+
             onChange={(e) => setEventName(e.target.value)}
           />
           <Button
@@ -90,7 +90,7 @@ function eventHeader({
           />
           <Button
             variant="success"
-            className={styles.createButtonEventHeader}
+            className={styles.dropdown}
             onClick={showInviteModal}
             data-testid="createEventModalBtn"
           >
diff --git a/src/components/EventListCard/EventListCardModals.tsx b/src/components/EventListCard/EventListCardModals.tsx
index 6f93c709fd..3bcdf38df8 100644
--- a/src/components/EventListCard/EventListCardModals.tsx
+++ b/src/components/EventListCard/EventListCardModals.tsx
@@ -407,7 +407,7 @@ function EventListCardModals({
             <Form.Control
               type="title"
               id="eventitle"
-              className="mb-3"
+              className={`mb-3 ${styles.inputField}`}
               autoComplete="off"
               data-testid="updateTitle"
               required
@@ -433,7 +433,7 @@ function EventListCardModals({
             <Form.Control
               type="eventdescrip"
               id="eventdescrip"
-              className="mb-3"
+              className={`mb-3 ${styles.inputField}`}
               autoComplete="off"
               data-testid="updateDescription"
               required
@@ -459,7 +459,7 @@ function EventListCardModals({
             <Form.Control
               type="text"
               id="eventLocation"
-              className="mb-3"
+              className={`mb-3 ${styles.inputField}`}
               autoComplete="off"
               data-testid="updateLocation"
               required
@@ -568,6 +568,7 @@ function EventListCardModals({
                     id="allday"
                     type="checkbox"
                     data-testid="updateAllDay"
+                    className={styles.switch}
                     checked={alldaychecked}
                     onChange={(): void => {
                       setAllDayChecked(!alldaychecked);
@@ -584,6 +585,7 @@ function EventListCardModals({
                     id="recurring"
                     type="checkbox"
                     data-testid="updateRecurring"
+                    className={styles.switch}
                     checked={recurringchecked}
                     onChange={(): void => {
                       setRecurringChecked(!recurringchecked);
@@ -602,6 +604,7 @@ function EventListCardModals({
                     id="ispublic"
                     type="checkbox"
                     data-testid="updateIsPublic"
+                    className={styles.switch}
                     checked={publicchecked}
                     onChange={(): void => {
                       setPublicChecked(!publicchecked);
@@ -618,6 +621,7 @@ function EventListCardModals({
                     id="registrable"
                     type="checkbox"
                     data-testid="updateRegistrable"
+                    className={styles.switch}
                     checked={registrablechecked}
                     onChange={(): void => {
                       setRegistrableChecked(!registrablechecked);
@@ -651,7 +655,7 @@ function EventListCardModals({
               variant="success"
               onClick={openEventDashboard}
               data-testid="showEventDashboardBtn"
-              className={styles.icon}
+              className={styles.addButton}
             >
               {' '}
               Show Event Dashboard{' '}
@@ -661,7 +665,7 @@ function EventListCardModals({
             eventListCardProps.creator?._id === userId) && (
             <Button
               variant="success"
-              className={styles.icon}
+              className={styles.addButton}
               data-testid="updateEventBtn"
               onClick={handleEventUpdate}
             >
@@ -673,7 +677,7 @@ function EventListCardModals({
             <Button
               variant="danger"
               data-testid="deleteEventModalBtn"
-              className={styles.icon}
+              className={styles.removeButton}
               onClick={toggleDeleteModal}
             >
               {t('deleteEvent')}
@@ -682,16 +686,12 @@ function EventListCardModals({
           {eventListCardProps.userRole === Role.USER &&
             !(eventListCardProps.creator?._id === userId) &&
             (isRegistered ? (
-              <Button
-                className={styles.customButton}
-                variant="success"
-                disabled
-              >
+              <Button className={styles.addButton} variant="success" disabled>
                 {t('alreadyRegistered')}
               </Button>
             ) : (
               <Button
-                className={styles.customButton}
+                className={styles.addButton}
                 variant="success"
                 onClick={registerEventHandler}
                 data-testid="registerEventBtn"
@@ -712,7 +712,7 @@ function EventListCardModals({
         keyboard={false}
         centered
       >
-        <Modal.Header closeButton className="bg-primary">
+        <Modal.Header closeButton className={`${styles.modalHeader}`}>
           <Modal.Title
             className="text-white"
             id={`recurringEventUpdateOptionsLabel${eventListCardProps.id}`}
@@ -737,6 +737,7 @@ function EventListCardModals({
                   }
                   defaultChecked={option === recurringEventUpdateType}
                   data-testid={`update-${option}`}
+                  className={styles.switch}
                 />
               </div>
             ))}
@@ -745,7 +746,7 @@ function EventListCardModals({
         <Modal.Footer>
           <Button
             type="button"
-            className="btn btn-danger"
+            className={`btn btn-danger ${styles.removeButton}`}
             data-dismiss="modal"
             onClick={toggleRecurringEventUpdateModal}
             data-testid="eventUpdateOptionsModalCloseBtn"
@@ -754,7 +755,7 @@ function EventListCardModals({
           </Button>
           <Button
             type="button"
-            className="btn btn-success"
+            className={`btn ${styles.addButton}`}
             onClick={updateEventHandler}
             data-testid="recurringEventUpdateOptionSubmitBtn"
           >
@@ -773,7 +774,7 @@ function EventListCardModals({
         keyboard={false}
         centered
       >
-        <Modal.Header closeButton className="bg-primary">
+        <Modal.Header closeButton className={`${styles.modalHeader}`}>
           <Modal.Title
             className="text-white"
             id={`deleteEventModalLabel${eventListCardProps.id}`}
@@ -801,6 +802,7 @@ function EventListCardModals({
                       }
                       defaultChecked={option === recurringEventDeleteType}
                       data-testid={`delete-${option}`}
+                      className={styles.switch}
                     />
                   </div>
                 ))}
@@ -811,7 +813,7 @@ function EventListCardModals({
         <Modal.Footer>
           <Button
             type="button"
-            className="btn btn-danger"
+            className={`btn btn-danger ${styles.removeButton}`}
             data-dismiss="modal"
             onClick={toggleDeleteModal}
             data-testid="eventDeleteModalCloseBtn"
@@ -820,7 +822,7 @@ function EventListCardModals({
           </Button>
           <Button
             type="button"
-            className="btn btn-success"
+            className={`btn ${styles.addButton}`}
             onClick={deleteEventHandler}
             data-testid="deleteEventBtn"
           >
diff --git a/src/components/OrgListCard/OrgListCard.module.css b/src/components/OrgListCard/OrgListCard.module.css
index f242b39f01..292456f310 100644
--- a/src/components/OrgListCard/OrgListCard.module.css
+++ b/src/components/OrgListCard/OrgListCard.module.css
@@ -60,6 +60,10 @@
   border: 1px solid var(--dropdown-border-color);
 }
 
+.manageBtn:hover {
+  border: 1px solid var(--dropdown-border-color) !important;
+}
+
 .orgName {
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx b/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx
index e7171bff71..55c8757623 100644
--- a/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx
+++ b/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx
@@ -92,7 +92,7 @@ function orgPeopleListCard(
           {/* Button to confirm the removal action */}
           <Button
             type="button"
-            className={styles.yesButton}
+            className={styles.regularBtn}
             onClick={removeMember}
             data-testid="removeMemberBtn"
           >
diff --git a/src/components/OrgPostCard/DeletePostModal.tsx b/src/components/OrgPostCard/DeletePostModal.tsx
index 67f301ba72..7ed025de50 100644
--- a/src/components/OrgPostCard/DeletePostModal.tsx
+++ b/src/components/OrgPostCard/DeletePostModal.tsx
@@ -1,6 +1,7 @@
 import React, { type FC } from 'react';
 import { Modal, Button } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import styles from '../../style/app.module.css';
 
 /**
  * A modal component that confirms a post delete operation.
@@ -46,12 +47,13 @@ const DeletePostModal: FC<InterfaceDeletePostModalProps> = ({
           variant="danger"
           onClick={onHide}
           data-testid="deleteModalNoBtn"
+          className={styles.removeButton}
         >
           {tCommon('no')}
         </Button>
         <Button
           type="button"
-          className="btn btn-success"
+          className={`btn ${styles.addButton}`}
           onClick={handleConfirmDelete}
           data-testid="deletePostBtn"
         >
diff --git a/src/components/OrgPostCard/OrgPostCard.tsx b/src/components/OrgPostCard/OrgPostCard.tsx
index 5bc9ca1407..d0d8dc85ac 100644
--- a/src/components/OrgPostCard/OrgPostCard.tsx
+++ b/src/components/OrgPostCard/OrgPostCard.tsx
@@ -445,7 +445,7 @@ export default function OrgPostCard(
         centered
       >
         <Modal.Header
-          className="bg-primary"
+          className={styles.modalHeader}
           data-testid="modalOrganizationHeader"
           closeButton
         >
@@ -462,7 +462,7 @@ export default function OrgPostCard(
               onChange={handleInputEvent}
               data-testid="updateTitle"
               required
-              className="mb-3"
+              className={`mb-3 ${styles.inputField}`}
               placeholder={t('postTitle1')}
               autoComplete="off"
             />
@@ -470,7 +470,7 @@ export default function OrgPostCard(
             <Form.Control
               type="descrip"
               id="descrip"
-              className="mb-3"
+              className={`mb-3 ${styles.inputField}`}
               name="postinfo"
               value={postformState.postinfo}
               placeholder={t('information1')}
@@ -506,6 +506,7 @@ export default function OrgPostCard(
                       });
                     }
                   }}
+                  className={`mb-3 ${styles.inputField}`}
                 />
                 {postPhoto && (
                   <>
@@ -557,6 +558,7 @@ export default function OrgPostCard(
                       });
                     }
                   }}
+                  className={`mb-3 ${styles.inputField}`}
                 />
                 {postformState.postvideo && (
                   <div className={styles.previewOrgPostCard}>
@@ -578,14 +580,19 @@ export default function OrgPostCard(
           </Modal.Body>
           <Modal.Footer>
             <Button
-              variant="secondary"
+              className={styles.removeButton}
               onClick={toggleShowEditModal}
               data-testid="closeOrganizationModal"
               type="button"
             >
               {tCommon('close')}
             </Button>
-            <Button type="submit" value="invite" data-testid="updatePostBtn">
+            <Button
+              type="submit"
+              value="invite"
+              data-testid="updatePostBtn"
+              className={styles.addButton}
+            >
               {t('updatePost')}
             </Button>
           </Modal.Footer>
diff --git a/src/components/TagActions/TagActions.module.css b/src/components/TagActions/TagActions.module.css
deleted file mode 100644
index 079dffea65..0000000000
--- a/src/components/TagActions/TagActions.module.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.errorContainer {
-  min-height: 100vh;
-}
-
-.errorMessage {
-  margin-top: 25%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.errorIcon {
-  transform: scale(1.5);
-  color: var(--bs-danger);
-  margin-bottom: 1rem;
-}
-
-.scrollContainer {
-  height: 100px;
-  overflow-y: auto;
-}
-
-.tagBadge {
-  display: flex;
-  align-items: center;
-  padding: 5px 10px;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px var(--bs-gray-400);
-  max-width: calc(100% - 2rem);
-}
-
-.removeFilterIcon {
-  cursor: pointer;
-}
-
-.loadingDiv {
-  min-height: 300px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
diff --git a/src/components/TagActions/TagActions.tsx b/src/components/TagActions/TagActions.tsx
index 083341372f..f237c70212 100644
--- a/src/components/TagActions/TagActions.tsx
+++ b/src/components/TagActions/TagActions.tsx
@@ -7,7 +7,7 @@ import type {
   InterfaceQueryOrganizationUserTags,
   InterfaceTagData,
 } from 'utils/interfaces';
-import styles from './TagActions.module.css';
+import styles from '../../style/app.module.css';
 import { ORGANIZATION_USER_TAGS_LIST } from 'GraphQl/Queries/OrganizationQueries';
 import {
   ASSIGN_TO_TAGS,
@@ -82,7 +82,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
           };
         },
       ) => {
-        if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
+        if (!fetchMoreResult) return prevResult;
 
         return {
           organizations: [
@@ -106,7 +106,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
   const userTagsList =
     orgUserTagsData?.organizations[0]?.userTags.edges.map(
       (edge) => edge.node,
-    ) ?? /* istanbul ignore next */ [];
+    ) ?? [];
 
   // tags that we have selected to assigned
   const [selectedTags, setSelectedTags] = useState<InterfaceTagData[]>([]);
@@ -129,7 +129,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
   useEffect(() => {
     const newCheckedTags = new Set(checkedTags);
     const newAncestorTagsDataMap = new Map(ancestorTagsDataMap);
-    /* istanbul ignore next */
+
     addAncestorTagsData.forEach(
       (ancestorTag: InterfaceUserTagsAncestorData) => {
         const prevAncestorTagValue = ancestorTagsDataMap.get(ancestorTag._id);
@@ -148,7 +148,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
   useEffect(() => {
     const newCheckedTags = new Set(checkedTags);
     const newAncestorTagsDataMap = new Map(ancestorTagsDataMap);
-    /* istanbul ignore next */
+
     removeAncestorTagsData.forEach(
       (ancestorTag: InterfaceUserTagsAncestorData) => {
         const prevAncestorTagValue = ancestorTagsDataMap.get(ancestorTag._id);
@@ -178,7 +178,6 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
 
   const deSelectTag = (tag: InterfaceTagData): void => {
     if (!selectedTags.some((selectedTag) => selectedTag._id === tag._id)) {
-      /* istanbul ignore next */
       return;
     }
 
@@ -240,7 +239,6 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
         hideTagActionsModal();
       }
     } catch (error: unknown) {
-      /* istanbul ignore next */
       if (error instanceof Error) {
         toast.error(error.message);
       }
@@ -270,7 +268,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
         centered
       >
         <Modal.Header
-          className="bg-primary"
+          className={styles.modalHeader}
           data-testid="modalOrganizationHeader"
           closeButton
         >
@@ -312,7 +310,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
               <Form.Control
                 type="text"
                 id="userName"
-                className="bg-light"
+                className={styles.inputField}
                 placeholder={tCommon('searchByName')}
                 onChange={(e) => setTagSearchName(e.target.value.trim())}
                 data-testid="searchByName"
@@ -388,13 +386,18 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
 
           <Modal.Footer>
             <Button
-              variant="secondary"
+              className={`btn btn-danger ${styles.removeButton}`}
               onClick={(): void => hideTagActionsModal()}
               data-testid="closeTagActionsModalBtn"
             >
               {tCommon('cancel')}
             </Button>
-            <Button type="submit" value="add" data-testid="tagActionSubmitBtn">
+            <Button
+              type="submit"
+              value="add"
+              data-testid="tagActionSubmitBtn"
+              className={`btn ${styles.addButton}`}
+            >
               {tagActionType === 'assignToTags' ? t('assign') : t('remove')}
             </Button>
           </Modal.Footer>
diff --git a/src/components/TagActions/TagNode.tsx b/src/components/TagActions/TagNode.tsx
index fc41ef4066..22173e7834 100644
--- a/src/components/TagActions/TagNode.tsx
+++ b/src/components/TagActions/TagNode.tsx
@@ -7,7 +7,7 @@ import type {
 } from 'utils/interfaces';
 import type { InterfaceOrganizationSubTagsQuery } from 'utils/organizationTagsUtils';
 import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
-import styles from './TagActions.module.css';
+import styles from '../../style/app.module.css';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
 import { WarningAmberRounded } from '@mui/icons-material';
@@ -61,7 +61,7 @@ const TagNode: React.FC<InterfaceTagNodeProps> = ({
           fetchMoreResult?: { getChildTags: InterfaceQueryUserTagChildTags };
         },
       ) => {
-        if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
+        if (!fetchMoreResult) return prevResult;
 
         return {
           getChildTags: {
@@ -93,8 +93,7 @@ const TagNode: React.FC<InterfaceTagNodeProps> = ({
   }
 
   const subTagsList =
-    subTagsData?.getChildTags.childTags.edges.map((edge) => edge.node) ??
-    /* istanbul ignore next */ [];
+    subTagsData?.getChildTags.childTags.edges.map((edge) => edge.node) ?? [];
 
   const handleTagClick = (): void => {
     setExpanded(!expanded);
@@ -173,7 +172,6 @@ const TagNode: React.FC<InterfaceTagNodeProps> = ({
               next={loadMoreSubTags}
               hasMore={
                 subTagsData?.getChildTags.childTags.pageInfo.hasNextPage ??
-                /* istanbul ignore next */
                 false
               }
               loader={<InfiniteScrollLoader />}
diff --git a/src/components/Venues/VenueCard.tsx b/src/components/Venues/VenueCard.tsx
index 43da734bd6..557a5c77e4 100644
--- a/src/components/Venues/VenueCard.tsx
+++ b/src/components/Venues/VenueCard.tsx
@@ -85,22 +85,22 @@ const VenueCard = ({
           <div className="d-flex justify-content-end gap-2 mb-2 me-3">
             {/* Edit button */}
             <Button
-              variant="outline-secondary"
               size="sm"
               onClick={() => {
                 showEditVenueModal(venueItem);
               }}
               data-testid={`updateVenueBtn${index + 1}`}
+              className={`btn ${styles.addButton}`}
             >
               <i className="fa fa-pen me-1"></i>
               <span>{tCommon('edit')}</span>
             </Button>
             {/* Delete button */}
             <Button
-              variant="outline-danger"
               size="sm"
               data-testid={`deleteVenueBtn${index + 1}`}
               onClick={() => handleDelete(venueItem._id)}
+              className={`btn btn-danger ${styles.removeButton}`}
             >
               <i className="fa fa-trash me-2"></i>
               <span>{tCommon('delete')}</span>
diff --git a/src/components/Venues/VenueModal.tsx b/src/components/Venues/VenueModal.tsx
index 73aa0e49c5..97ae66c78e 100644
--- a/src/components/Venues/VenueModal.tsx
+++ b/src/components/Venues/VenueModal.tsx
@@ -181,6 +181,7 @@ const VenueModal = ({
                 name: e.target.value,
               });
             }}
+            className={styles.inputField}
           />
           <label htmlFor="venuedescrip">{tCommon('description')}</label>
           <Form.Control
@@ -198,6 +199,7 @@ const VenueModal = ({
                 description: e.target.value,
               });
             }}
+            className={styles.inputField}
           />
           <label htmlFor="venuecapacity">{t('capacity')}</label>
           <Form.Control
@@ -213,6 +215,7 @@ const VenueModal = ({
                 capacity: e.target.value,
               });
             }}
+            className={styles.inputField}
           />
           <Form.Label htmlFor="venueImg">{t('image')}</Form.Label>
           <Form.Control
@@ -240,6 +243,7 @@ const VenueModal = ({
                 });
               }
             }}
+            className={styles.inputField}
           />
           {venueImage && (
             <div className={styles.previewVenueModal}>
diff --git a/src/screens/BlockUser/BlockUser.tsx b/src/screens/BlockUser/BlockUser.tsx
index b7bee8fbfa..3da2bf8b8e 100644
--- a/src/screens/BlockUser/BlockUser.tsx
+++ b/src/screens/BlockUser/BlockUser.tsx
@@ -185,13 +185,13 @@ const Requests = (): JSX.Element => {
     <>
       <div>
         {/* Buttons Container */}
-        <div className={styles.btnsContainerBlockAndUnblock}>
-          <div className={styles.inputContainerBlockAndUnblock}>
-            <div className={styles.inputBlockAndUnblock}>
+        <div className={styles.head}>
+          <div className={styles.btnsContainer}>
+            <div className={styles.input}>
               <Form.Control
                 type="name"
                 id="searchBlockedUsers"
-                className="bg-white"
+                className={styles.inputField}
                 placeholder={
                   searchByFirstName
                     ? t('searchByFirstName')
@@ -206,16 +206,16 @@ const Requests = (): JSX.Element => {
               />
               <Button
                 tabIndex={-1}
-                className={styles.search}
+                className={styles.searchButton}
                 onClick={handleSearchByBtnClick}
                 data-testid="searchBtn"
               >
                 <Search />
               </Button>
             </div>
-          </div>
-          <div className={styles.btnsBlockBlockAndUnblock}>
-            <div className={styles.largeBtnsWrapper}>
+            {/* <div className={styles.btnsBlockBlockAndUnblock}> */}
+            {/* <div className={styles.largeBtnsWrapper}> */}
+            <div className={styles.btnsBlock}>
               <SortingButton
                 title={t('sortOrganizations')}
                 sortingOptions={[
@@ -231,7 +231,9 @@ const Requests = (): JSX.Element => {
                 dataTestIdPrefix="userFilter"
                 className={`${styles.createButton} mt-2`}
               />
+            </div>
 
+            <div className={styles.btnsBlock}>
               <SortingButton
                 title={t('sortByName')}
                 sortingOptions={[
@@ -251,6 +253,8 @@ const Requests = (): JSX.Element => {
               />
             </div>
           </div>
+          {/* </div> */}
+          {/* </div> */}
         </div>
         {/* Table */}
         {loadingMembers === false &&
diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
index 323f30aa67..68ecfeaced 100644
--- a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
+++ b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
@@ -359,7 +359,7 @@ const fundCampaignPledge = (): JSX.Element => {
             <Button
               variant="success"
               size="sm"
-              className="me-2 rounded"
+              className={`me-2 ${styles.editButton}`}
               data-testid="editPledgeBtn"
               onClick={() =>
                 handleOpenModal(params.row as InterfacePledgeInfo, 'edit')
@@ -392,10 +392,7 @@ const fundCampaignPledge = (): JSX.Element => {
           underline="hover"
           color="inherit"
           component="button"
-          onClick={
-            /* istanbul ignore next */
-            () => history.go(-2)
-          }
+          onClick={() => history.go(-2)}
         >
           {fundName}
         </Link>
@@ -403,10 +400,7 @@ const fundCampaignPledge = (): JSX.Element => {
           underline="hover"
           color="inherit"
           component="button"
-          onClick={
-            /* istanbul ignore next */
-            () => history.back()
-          }
+          onClick={() => history.back()}
         >
           {campaignInfo?.name}
         </Link>
@@ -432,7 +426,9 @@ const fundCampaignPledge = (): JSX.Element => {
                 name="btnradio"
                 id="pledgedRadio"
                 checked={progressIndicator === 'pledged'}
-                onChange={() => setProgressIndicator('pledged')}
+                onChange={() => {
+                  setProgressIndicator('pledged');
+                }}
               />
               <label
                 className={`btn btn-outline-primary ${styles.toggleBtnPledge}`}
@@ -443,7 +439,7 @@ const fundCampaignPledge = (): JSX.Element => {
 
               <input
                 type="radio"
-                className={`btn-check`}
+                className={`btn-check ${styles.toggleBtnPledge}`}
                 name="btnradio"
                 id="raisedRadio"
                 onChange={() => setProgressIndicator('raised')}
@@ -465,6 +461,7 @@ const fundCampaignPledge = (): JSX.Element => {
               max={campaignInfo?.goal}
               style={{ height: '1.5rem', fontSize: '0.9rem' }}
               data-testid="progressBar"
+              className={`${styles.progressBar}`}
             />
             <div className={styles.endpoints}>
               <div className={styles.start}>$0</div>
@@ -474,20 +471,20 @@ const fundCampaignPledge = (): JSX.Element => {
         </div>
       </div>
       <div className={`${styles.btnsContainerPledge} gap-4 flex-wrap`}>
-        <div className={`${styles.inputPledge} mb-1`}>
+        <div className={`${styles.input} mb-1`}>
           <Form.Control
             type="name"
             placeholder={t('searchPledger')}
             autoComplete="off"
             required
-            className={styles.inputFieldPledge}
+            className={styles.inputField}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
             data-testid="searchPledger"
           />
           <Button
             tabIndex={-1}
-            className={`position-absolute z-10 bottom-0 end-0  d-flex justify-content-center align-items-center`}
+            className={`${styles.searchButton}`}
             data-testid="searchBtn"
           >
             <Search />
@@ -519,7 +516,7 @@ const fundCampaignPledge = (): JSX.Element => {
           <div>
             <Button
               variant="success"
-              className={styles.orgFundCampaignButton}
+              className={styles.dropdown}
               disabled={endDate < new Date()}
               onClick={() => handleOpenModal(null, 'create')}
               data-testid="addPledgeBtn"
diff --git a/src/screens/FundCampaignPledge/PledgeModal.tsx b/src/screens/FundCampaignPledge/PledgeModal.tsx
index 04b8aae7da..a93d2c8f1d 100644
--- a/src/screens/FundCampaignPledge/PledgeModal.tsx
+++ b/src/screens/FundCampaignPledge/PledgeModal.tsx
@@ -111,7 +111,6 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
 
   useEffect(() => {
     if (memberData) {
-      /*istanbul ignore next*/
       setPledgers(memberData.organizations[0].members);
     }
   }, [memberData]);
@@ -124,7 +123,6 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
     pledgeEndDate,
   } = formState;
 
-  /*istanbul ignore next*/
   const updatePledgeHandler = useCallback(
     async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
       e.preventDefault();
@@ -194,7 +192,6 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
         });
         hide();
       } catch (error: unknown) {
-        /*istanbul ignore next*/
         toast.error((error as Error).message);
       }
     },
@@ -238,15 +235,12 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
               getOptionLabel={(member: InterfaceUserInfo): string =>
                 `${member.firstName} ${member.lastName}`
               }
-              onChange={
-                /*istanbul ignore next*/
-                (_, newPledgers): void => {
-                  setFormState({
-                    ...formState,
-                    pledgeUsers: newPledgers,
-                  });
-                }
-              }
+              onChange={(_, newPledgers): void => {
+                setFormState({
+                  ...formState,
+                  pledgeUsers: newPledgers,
+                });
+              }}
               renderInput={(params) => (
                 <TextField {...params} label="Pledgers" />
               )}
@@ -266,7 +260,6 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
                     pledgeStartDate: date.toDate(),
                     pledgeEndDate:
                       pledgeEndDate &&
-                      /*istanbul ignore next*/
                       (pledgeEndDate < date?.toDate()
                         ? date.toDate()
                         : pledgeEndDate),
@@ -305,15 +298,12 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
                 value={pledgeCurrency}
                 label={t('currency')}
                 data-testid="currencySelect"
-                onChange={
-                  /*istanbul ignore next*/
-                  (e) => {
-                    setFormState({
-                      ...formState,
-                      pledgeCurrency: e.target.value,
-                    });
-                  }
-                }
+                onChange={(e) => {
+                  setFormState({
+                    ...formState,
+                    pledgeCurrency: e.target.value,
+                  });
+                }}
               >
                 {currencyOptions.map((currency) => (
                   <MenuItem key={currency.label} value={currency.value}>
@@ -343,7 +333,7 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
           {/* Button to submit the pledge form */}
           <Button
             type="submit"
-            className={styles.greenregbtnPledge}
+            className={styles.addButton}
             data-testid="submitPledgeBtn"
           >
             {t(mode === 'edit' ? 'updatePledge' : 'createPledge')}
diff --git a/src/screens/ManageTag/EditUserTagModal.tsx b/src/screens/ManageTag/EditUserTagModal.tsx
index 5fa8ae2771..f75c19cbb8 100644
--- a/src/screens/ManageTag/EditUserTagModal.tsx
+++ b/src/screens/ManageTag/EditUserTagModal.tsx
@@ -2,6 +2,7 @@ import type { TFunction } from 'i18next';
 import type { FormEvent } from 'react';
 import React from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
+import styles from '../../style/app.module.css';
 
 /**
  * Edit UserTag Modal component for the Manage Tag screen.
@@ -37,7 +38,7 @@ const EditUserTagModal: React.FC<InterfaceEditUserTagModalProps> = ({
         centered
       >
         <Modal.Header
-          className="bg-primary"
+          className={styles.modalHeader}
           data-testid="modalOrganizationHeader"
           closeButton
         >
@@ -56,7 +57,7 @@ const EditUserTagModal: React.FC<InterfaceEditUserTagModalProps> = ({
             <Form.Control
               type="text"
               id="tagName"
-              className="mb-3"
+              className={`mb-3 ${styles.inputField}`}
               placeholder={t('tagNamePlaceholder')}
               data-testid="tagNameInput"
               autoComplete="off"
@@ -73,10 +74,16 @@ const EditUserTagModal: React.FC<InterfaceEditUserTagModalProps> = ({
               variant="secondary"
               onClick={(): void => hideEditUserTagModal()}
               data-testid="closeEditTagModalBtn"
+              className={styles.removeButton}
             >
               {tCommon('cancel')}
             </Button>
-            <Button type="submit" value="invite" data-testid="editTagSubmitBtn">
+            <Button
+              type="submit"
+              value="invite"
+              data-testid="editTagSubmitBtn"
+              className={styles.addButton}
+            >
               {tCommon('edit')}
             </Button>
           </Modal.Footer>
diff --git a/src/screens/ManageTag/ManageTag.tsx b/src/screens/ManageTag/ManageTag.tsx
index 0832b2ab3e..b0748a9bf3 100644
--- a/src/screens/ManageTag/ManageTag.tsx
+++ b/src/screens/ManageTag/ManageTag.tsx
@@ -131,7 +131,6 @@ function ManageTag(): JSX.Element {
           };
         },
       ) => {
-        /* istanbul ignore next -- @preserve */
         if (!fetchMoreResult) return prevResult;
 
         return {
@@ -174,7 +173,6 @@ function ManageTag(): JSX.Element {
       toggleUnassignUserTagModal();
       toast.success(t('successfullyUnassigned') as string);
     } catch (error: unknown) {
-      /* istanbul ignore next -- @preserve */
       if (error instanceof Error) {
         toast.error(error.message);
       }
@@ -209,14 +207,12 @@ function ManageTag(): JSX.Element {
         },
       });
 
-      /* istanbul ignore else -- @preserve */
       if (data) {
         toast.success(t('tagUpdationSuccess'));
         userTagAssignedMembersRefetch();
         setEditUserTagModalIsOpen(false);
       }
     } catch (error: unknown) {
-      /* istanbul ignore next -- @preserve */
       if (error instanceof Error) {
         toast.error(error.message);
       }
@@ -236,7 +232,6 @@ function ManageTag(): JSX.Element {
       toggleRemoveUserTagModal();
       toast.success(t('tagRemovalSuccess') as string);
     } catch (error: unknown) {
-      /* istanbul ignore next -- @preserve */
       if (error instanceof Error) {
         toast.error(error.message);
       }
@@ -259,7 +254,7 @@ function ManageTag(): JSX.Element {
   const userTagAssignedMembers =
     userTagAssignedMembersData?.getAssignedUsers.usersAssignedTo.edges.map(
       (edge) => edge.node,
-    ) ?? /* istanbul ignore next -- @preserve */ [];
+    ) ?? [];
 
   // get the ancestorTags array and push the current tag in it
   // used for the tag breadcrumbs
@@ -291,7 +286,7 @@ function ManageTag(): JSX.Element {
       minWidth: 100,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return <div>{params.row.id}</div>;
@@ -303,7 +298,7 @@ function ManageTag(): JSX.Element {
       flex: 2,
       minWidth: 100,
       sortable: false,
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       renderCell: (params: GridCellParams) => {
         return (
           <div data-testid="memberName">
@@ -320,7 +315,7 @@ function ManageTag(): JSX.Element {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       renderCell: (params: GridCellParams) => {
         return (
           <div>
@@ -329,7 +324,9 @@ function ManageTag(): JSX.Element {
               state={{ id: params.row._id }}
               data-testid="viewProfileBtn"
             >
-              <div className="btn btn-sm btn-primary me-3">
+              <div
+                className={`btn btn-sm btn-primary me-3 ${styles.editButton}`}
+              >
                 {t('viewProfile')}
               </div>
             </Link>
@@ -436,7 +433,6 @@ function ManageTag(): JSX.Element {
                     >
                       {tag.name}
                       {orgUserTagAncestors.length - 1 !== index && (
-                        /* istanbul ignore next -- @preserve */
                         <i className={'mx-2 fa fa-caret-right'} />
                       )}
                     </div>
@@ -452,8 +448,7 @@ function ManageTag(): JSX.Element {
                     next={loadMoreAssignedMembers}
                     hasMore={
                       userTagAssignedMembersData?.getAssignedUsers
-                        .usersAssignedTo.pageInfo.hasNextPage ??
-                      /* istanbul ignore next -- @preserve */ false
+                        .usersAssignedTo.pageInfo.hasNextPage ?? false
                     }
                     loader={<InfiniteScrollLoader />}
                     scrollableTarget="manageTagScrollableDiv"
@@ -464,16 +459,15 @@ function ManageTag(): JSX.Element {
                       hideFooter={true}
                       getRowId={(row) => row.id}
                       slots={{
-                        noRowsOverlay:
-                          /* istanbul ignore next -- @preserve */ () => (
-                            <Stack
-                              height="100%"
-                              alignItems="center"
-                              justifyContent="center"
-                            >
-                              {t('noAssignedMembersFound')}
-                            </Stack>
-                          ),
+                        noRowsOverlay: () => (
+                          <Stack
+                            height="100%"
+                            alignItems="center"
+                            justifyContent="center"
+                          >
+                            {t('noAssignedMembersFound')}
+                          </Stack>
+                        ),
                       }}
                       sx={dataGridStyle}
                       getRowClassName={() => `${styles.rowBackgrounds}`}
@@ -501,7 +495,7 @@ function ManageTag(): JSX.Element {
                       setTagActionType('assignToTags');
                       showTagActionsModal();
                     }}
-                    className="my-2 btn btn-primary btn-sm w-75"
+                    className={`my-2 btn btn-primary btn-sm w-75 ${styles.editButton}`}
                     data-testid="assignToTags"
                   >
                     {t('assignToTags')}
@@ -525,7 +519,7 @@ function ManageTag(): JSX.Element {
                   />
                   <div
                     onClick={showEditUserTagModal}
-                    className="mt-1 mb-2 btn btn-primary btn-sm w-75"
+                    className={`mt-1 mb-2 btn btn-primary btn-sm w-75 ${styles.editButton}`}
                     data-testid="editUserTag"
                   >
                     {tCommon('edit')}
diff --git a/src/screens/ManageTag/RemoveUserTagModal.tsx b/src/screens/ManageTag/RemoveUserTagModal.tsx
index dc000f443c..91ba0b38aa 100644
--- a/src/screens/ManageTag/RemoveUserTagModal.tsx
+++ b/src/screens/ManageTag/RemoveUserTagModal.tsx
@@ -1,6 +1,7 @@
 import type { TFunction } from 'i18next';
 import React from 'react';
 import { Button, Modal } from 'react-bootstrap';
+import styles from '../../style/app.module.css';
 
 /**
  * Remove UserTag Modal component for the Manage Tag screen.
@@ -33,7 +34,7 @@ const RemoveUserTagModal: React.FC<InterfaceRemoveUserTagModalProps> = ({
         keyboard={false}
         centered
       >
-        <Modal.Header closeButton className="bg-primary">
+        <Modal.Header closeButton className={styles.modalHeader}>
           <Modal.Title className="text-white" id="removeUserTag">
             {t('removeUserTag')}
           </Modal.Title>
@@ -44,7 +45,7 @@ const RemoveUserTagModal: React.FC<InterfaceRemoveUserTagModalProps> = ({
         <Modal.Footer>
           <Button
             type="button"
-            className="btn btn-danger"
+            className={`btn btn-danger ${styles.removeButton}`}
             data-dismiss="modal"
             role="button"
             aria-label={tCommon('no')}
@@ -55,7 +56,7 @@ const RemoveUserTagModal: React.FC<InterfaceRemoveUserTagModalProps> = ({
           </Button>
           <Button
             type="button"
-            className="btn btn-success"
+            className={`btn ${styles.addButton}`}
             role="button"
             aria-label={tCommon('yes')}
             onClick={handleRemoveUserTag}
diff --git a/src/screens/ManageTag/UnassignUserTagModal.tsx b/src/screens/ManageTag/UnassignUserTagModal.tsx
index 9d926790c3..d5448667d1 100644
--- a/src/screens/ManageTag/UnassignUserTagModal.tsx
+++ b/src/screens/ManageTag/UnassignUserTagModal.tsx
@@ -1,7 +1,7 @@
 import type { TFunction } from 'i18next';
 import React from 'react';
 import { Button, Modal } from 'react-bootstrap';
-
+import styles from '../../style/app.module.css';
 /**
  * Unassign UserTag Modal component for the Manage Tag screen.
  */
@@ -35,7 +35,7 @@ const UnassignUserTagModal: React.FC<InterfaceUnassignUserTagModalProps> = ({
       >
         <Modal.Header
           closeButton
-          className="bg-primary"
+          className={styles.modalHeader}
           aria-label={t('closeModal')}
         >
           <Modal.Title className="text-white" id={`unassignTag`}>
@@ -46,7 +46,7 @@ const UnassignUserTagModal: React.FC<InterfaceUnassignUserTagModalProps> = ({
         <Modal.Footer>
           <Button
             type="button"
-            className="btn btn-danger"
+            className={`btn btn-danger ${styles.removeButton}`}
             data-dismiss="modal"
             onClick={toggleUnassignUserTagModal}
             data-testid="unassignTagModalCloseBtn"
@@ -56,7 +56,7 @@ const UnassignUserTagModal: React.FC<InterfaceUnassignUserTagModalProps> = ({
           </Button>
           <Button
             type="button"
-            className="btn btn-success"
+            className={`btn ${styles.addButton}`}
             onClick={async (e) => {
               const btn = e.currentTarget;
               btn.disabled = true;
diff --git a/src/screens/OrgList/OrgList.tsx b/src/screens/OrgList/OrgList.tsx
index 880dccf98d..555eb0beff 100644
--- a/src/screens/OrgList/OrgList.tsx
+++ b/src/screens/OrgList/OrgList.tsx
@@ -334,7 +334,7 @@ function orgList(): JSX.Element {
           <Form.Control
             type="name"
             id="searchOrgname"
-            className={'bg-white'}
+            className={styles.inputField}
             placeholder={tCommon('searchByName')}
             data-testid="searchByName"
             autoComplete="off"
@@ -343,7 +343,8 @@ function orgList(): JSX.Element {
           />
           <Button
             tabIndex={-1}
-            className={styles.searchButtonOrgList}
+            // className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+            className={styles.searchButton}
             onClick={handleSearchByBtnClick}
             data-testid="searchBtn"
           >
diff --git a/src/screens/OrgPost/OrgPost.tsx b/src/screens/OrgPost/OrgPost.tsx
index 8ccdb47692..62a58f0e1a 100644
--- a/src/screens/OrgPost/OrgPost.tsx
+++ b/src/screens/OrgPost/OrgPost.tsx
@@ -167,7 +167,6 @@ function orgPost(): JSX.Element {
         },
       });
 
-      /* istanbul ignore next */
       if (data) {
         toast.success(t('postCreatedSuccess') as string);
         refetch();
@@ -273,7 +272,7 @@ function orgPost(): JSX.Element {
     if (a.pinned === b.pinned) {
       return 0;
     }
-    /* istanbul ignore next */
+
     if (a.pinned) {
       return -1;
     }
@@ -413,7 +412,7 @@ function orgPost(): JSX.Element {
             <Form.Control
               type="name"
               id="orgname"
-              className="mb-3"
+              className={`mb-3 ${styles.inputField}`}
               placeholder={t('postTitle1')}
               data-testid="modalTitle"
               autoComplete="off"
@@ -430,7 +429,7 @@ function orgPost(): JSX.Element {
             <Form.Control
               type="descrip"
               id="descrip"
-              className="mb-3"
+              className={`mb-3 ${styles.inputField}`}
               placeholder={t('information1')}
               data-testid="modalinfo"
               autoComplete="off"
@@ -455,6 +454,7 @@ function orgPost(): JSX.Element {
               multiple={false}
               onChange={handleAddMediaChange}
               data-testid="addMediaField"
+              className={`mb-3 ${styles.inputField}`}
             />
 
             {postformState.addMedia && file && (
@@ -506,13 +506,14 @@ function orgPost(): JSX.Element {
                   pinPost: !postformState.pinPost,
                 })
               }
+              className={styles.switch}
             />
           </Modal.Body>
 
           <Modal.Footer>
             <Button
               variant="secondary"
-              className={styles.closeButtonOrgPost}
+              className={styles.removeButton}
               onClick={(): void => hideInviteModal()}
               data-testid="closeOrganizationModal"
             >
@@ -522,7 +523,7 @@ function orgPost(): JSX.Element {
               type="submit"
               value="invite"
               data-testid="createPostBtn"
-              className={`${styles.addButtonOrgPost} mt-2`}
+              className={`${styles.addButton} mt-2`}
             >
               {t('addPost')}
             </Button>
diff --git a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx
index 640fdde032..099a897435 100644
--- a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx
+++ b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx
@@ -113,17 +113,24 @@ const ItemUpdateStatusModal: FC<InterfaceItemUpdateStatusModalProps> = ({
 
           {isCompleted ? (
             <div className="d-flex gap-3 justify-content-end">
-              <Button type="submit" variant="primary" data-testid="yesBtn">
+              <Button
+                type="submit"
+                className={styles.addButton}
+                data-testid="yesBtn"
+              >
                 {tCommon('yes')}
               </Button>
-              <Button variant="secondary" onClick={hide}>
+              <Button
+                className={`btn btn-danger ${styles.removeButton}`}
+                onClick={hide}
+              >
                 {tCommon('no')}
               </Button>
             </div>
           ) : (
             <Button
               type="submit"
-              className={styles.addButton}
+              className={`${styles.addButton}`}
               data-testid="createBtn"
             >
               {t('markCompletion')}
diff --git a/src/screens/OrganizationEvents/OrganizationEvents.tsx b/src/screens/OrganizationEvents/OrganizationEvents.tsx
index 08c5576159..d07631b64e 100644
--- a/src/screens/OrganizationEvents/OrganizationEvents.tsx
+++ b/src/screens/OrganizationEvents/OrganizationEvents.tsx
@@ -302,6 +302,7 @@ function organizationEvents(): JSX.Element {
               autoComplete="off"
               required
               value={formState.title}
+              className={styles.inputField}
               onChange={(e): void => {
                 setFormState({
                   ...formState,
@@ -317,6 +318,7 @@ function organizationEvents(): JSX.Element {
               autoComplete="off"
               required
               value={formState.eventdescrip}
+              className={styles.inputField}
               onChange={(e): void => {
                 setFormState({
                   ...formState,
@@ -424,7 +426,7 @@ function organizationEvents(): JSX.Element {
               <div className={styles.dispflexOrganizationEvents}>
                 <label htmlFor="allday">{t('allDay')}?</label>
                 <Form.Switch
-                  className="me-4"
+                  className={`me-4 ${styles.switch}`}
                   id="allday"
                   type="checkbox"
                   checked={alldaychecked}
@@ -435,7 +437,7 @@ function organizationEvents(): JSX.Element {
               <div className={styles.dispflexOrganizationEvents}>
                 <label htmlFor="ispublic">{t('isPublic')}?</label>
                 <Form.Switch
-                  className="me-4"
+                  className={`me-4 ${styles.switch}`}
                   id="ispublic"
                   type="checkbox"
                   data-testid="ispublicCheck"
@@ -448,7 +450,7 @@ function organizationEvents(): JSX.Element {
               <div className={styles.dispflexOrganizationEvents}>
                 <label htmlFor="recurring">{t('recurringEvent')}?</label>
                 <Form.Switch
-                  className="me-4"
+                  className={`me-4 ${styles.switch}`}
                   id="recurring"
                   type="checkbox"
                   data-testid="recurringCheck"
@@ -461,7 +463,7 @@ function organizationEvents(): JSX.Element {
               <div className={styles.dispflexOrganizationEvents}>
                 <label htmlFor="registrable">{t('isRegistrable')}?</label>
                 <Form.Switch
-                  className="me-4"
+                  className={`me-4 ${styles.switch}`}
                   id="registrable"
                   type="checkbox"
                   data-testid="registrableCheck"
@@ -476,7 +478,7 @@ function organizationEvents(): JSX.Element {
               <div className={styles.dispflex}>
                 <label htmlFor="createChat">{t('createChat')}?</label>
                 <Form.Switch
-                  className="me-4"
+                  className={`me-4 ${styles.switch}`}
                   id="chat"
                   type="checkbox"
                   data-testid="createChat"
@@ -500,7 +502,7 @@ function organizationEvents(): JSX.Element {
 
             <Button
               type="submit"
-              className={styles.createButtonOrganizationEvents}
+              className={styles.addButton}
               value="createevent"
               data-testid="createEventBtn"
             >
diff --git a/src/screens/OrganizationFundCampaign/CampaignModal.tsx b/src/screens/OrganizationFundCampaign/CampaignModal.tsx
index 6706b80ee5..a57c6e707a 100644
--- a/src/screens/OrganizationFundCampaign/CampaignModal.tsx
+++ b/src/screens/OrganizationFundCampaign/CampaignModal.tsx
@@ -127,7 +127,7 @@ const CampaignModal: React.FC<InterfaceCampaignModal> = ({
    * @param e - The form event.
    * @returns Promise<void>
    */
-  /*istanbul ignore next*/
+
   const updateCampaignHandler = async (
     e: ChangeEvent<HTMLFormElement>,
   ): Promise<void> => {
@@ -263,15 +263,12 @@ const CampaignModal: React.FC<InterfaceCampaignModal> = ({
                   value={campaignCurrency}
                   label={t('currency')}
                   data-testid="currencySelect"
-                  onChange={
-                    /*istanbul ignore next*/
-                    (e) => {
-                      setFormState({
-                        ...formState,
-                        campaignCurrency: e.target.value,
-                      });
-                    }
-                  }
+                  onChange={(e) => {
+                    setFormState({
+                      ...formState,
+                      campaignCurrency: e.target.value,
+                    });
+                  }}
                 >
                   {currencyOptions.map((currency) => (
                     <MenuItem key={currency.label} value={currency.value}>
@@ -301,7 +298,7 @@ const CampaignModal: React.FC<InterfaceCampaignModal> = ({
             {/* Button to create the campaign */}
             <Button
               type="submit"
-              className={styles.greenregbtnOrganizationFundCampaign}
+              className={styles.addButton}
               data-testid="submitCampaignBtn"
             >
               {t(mode === 'edit' ? 'updateCampaign' : 'createCampaign')}
diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx b/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx
index 184794bb17..c4d85a0eef 100644
--- a/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx
+++ b/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx
@@ -6,7 +6,7 @@ import {
   type GridCellParams,
   type GridColDef,
 } from '@mui/x-data-grid';
-import { Button, Form } from 'react-bootstrap';
+import { Button, Form, Row } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { Navigate, useNavigate, useParams } from 'react-router-dom';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -284,7 +284,7 @@ const orgFundCampaign = (): JSX.Element => {
             <Button
               variant="success"
               size="sm"
-              className="me-2 rounded"
+              className={styles.editButton}
               data-testid="editCampaignBtn"
               onClick={() =>
                 handleOpenModal(
@@ -313,7 +313,7 @@ const orgFundCampaign = (): JSX.Element => {
           <Button
             variant="outline-success"
             size="sm"
-            className="rounded"
+            className={styles.editButton}
             data-testid="viewBtn"
             onClick={() => handleClick(params.row.campaign._id as string)}
           >
@@ -340,27 +340,28 @@ const orgFundCampaign = (): JSX.Element => {
         <Typography color="text.primary">{t('title')}</Typography>
       </Breadcrumbs>
 
-      <div className={styles.btnsContainerOrganizationFundCampaign}>
-        <div className={styles.inputOrganizationFundCampaign}>
-          <Form.Control
-            type="name"
-            placeholder={tCommon('searchByName')}
-            autoComplete="off"
-            required
-            className={styles.inputFieldOrganizationFundCampaign}
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            data-testid="searchFullName"
-          />
-          <Button
-            className="position-absolute z-10 bottom-0 end-0  d-flex justify-content-center align-items-center"
-            data-testid="searchBtn"
-          >
-            <Search />
-          </Button>
-        </div>
-        <div className={styles.btnsBbtnsBlockOrganizationFundCampaignlock}>
-          <div className="d-flex justify-space-between">
+      <Row className={styles.head}>
+        <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+          <div className={`${styles.input} mb-1`}>
+            <Form.Control
+              type="name"
+              placeholder={tCommon('searchByName')}
+              autoComplete="off"
+              required
+              className={styles.inputField}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              data-testid="searchFullName"
+            />
+            <Button
+              className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center ${styles.searchButton}`}
+              data-testid="searchBtn"
+            >
+              <Search />
+            </Button>
+          </div>
+          {/* <div className={styles.btnsBbtnsBlockOrganizationFundCampaignlock}> */}
+          <div className={styles.btnsBlock}>
             <SortingButton
               sortingOptions={[
                 { label: t('lowestGoal'), value: 'fundingGoal_ASC' },
@@ -381,10 +382,10 @@ const orgFundCampaign = (): JSX.Element => {
               buttonLabel={tCommon('sort')}
             />
           </div>
-          <div>
+          <div className={styles.btnsBlock}>
             <Button
               variant="success"
-              className={styles.orgFundCampaignButton}
+              className={styles.dropdown}
               onClick={() => handleOpenModal(null, 'create')}
               data-testid="addCampaignBtn"
               disabled={isArchived}
@@ -393,8 +394,9 @@ const orgFundCampaign = (): JSX.Element => {
               {t('addCampaign')}
             </Button>
           </div>
+          {/* </div> */}
         </div>
-      </div>
+      </Row>
 
       <DataGrid
         disableColumnMenu
diff --git a/src/screens/OrganizationFunds/FundModal.tsx b/src/screens/OrganizationFunds/FundModal.tsx
index b33270b30f..ab02902c2f 100644
--- a/src/screens/OrganizationFunds/FundModal.tsx
+++ b/src/screens/OrganizationFunds/FundModal.tsx
@@ -115,7 +115,6 @@ const FundModal: React.FC<InterfaceFundModal> = ({
     }
   };
 
-  /*istanbul ignore next*/
   const updateFundHandler = async (
     e: ChangeEvent<HTMLFormElement>,
   ): Promise<void> => {
@@ -228,7 +227,7 @@ const FundModal: React.FC<InterfaceFundModal> = ({
                   type="checkbox"
                   checked={formState.taxDeductible}
                   data-testid="setTaxDeductibleSwitch"
-                  className="ms-2"
+                  className={`ms-2 ${styles.switch}`}
                   onChange={() =>
                     setFormState({
                       ...formState,
@@ -241,7 +240,7 @@ const FundModal: React.FC<InterfaceFundModal> = ({
                 <label>{t('default')} </label>
                 <Form.Switch
                   type="checkbox"
-                  className="ms-2"
+                  className={`ms-2 ${styles.switch}`}
                   data-testid="setDefaultSwitch"
                   checked={formState.isDefault}
                   onChange={() =>
@@ -259,7 +258,7 @@ const FundModal: React.FC<InterfaceFundModal> = ({
                     type="checkbox"
                     checked={formState.isArchived}
                     data-testid="archivedSwitch"
-                    className="ms-2"
+                    className={`ms-2 ${styles.switch}`}
                     onChange={() =>
                       setFormState({
                         ...formState,
diff --git a/src/screens/OrganizationFunds/OrganizationFunds.tsx b/src/screens/OrganizationFunds/OrganizationFunds.tsx
index 6af889ab83..3794da0338 100644
--- a/src/screens/OrganizationFunds/OrganizationFunds.tsx
+++ b/src/screens/OrganizationFunds/OrganizationFunds.tsx
@@ -161,7 +161,7 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return <div>{params.row.id}</div>;
@@ -175,11 +175,11 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       renderCell: (params: GridCellParams) => {
         return (
           <div
-            className="d-flex justify-content-center fw-bold"
+            className={`d-flex justify-content-center fw-bold ${styles.subtleBlueGrey}`}
             data-testid="fundName"
             onClick={() => handleClick(params.row._id as string)}
           >
@@ -196,7 +196,7 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       renderCell: (params: GridCellParams) => {
         return params.row.creator.firstName + ' ' + params.row.creator.lastName;
       },
@@ -208,7 +208,7 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       flex: 2,
       renderCell: (params: GridCellParams) => {
         return (
@@ -226,7 +226,7 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       renderCell: (params: GridCellParams) => {
         return params.row.isArchived ? 'Archived' : 'Active';
       },
@@ -239,7 +239,7 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       renderCell: (params: GridCellParams) => {
         return (
           <>
@@ -267,7 +267,7 @@ const organizationFunds = (): JSX.Element => {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       renderCell: (params: GridCellParams) => {
         return (
           <Button
@@ -286,57 +286,58 @@ const organizationFunds = (): JSX.Element => {
 
   return (
     <div>
-      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
-        <div className={`${styles.input} mb-1`}>
-          <Form.Control
-            type="name"
-            placeholder={tCommon('searchByName')}
-            autoComplete="off"
-            required
-            className={styles.inputFields}
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            data-testid="searchByName"
-          />
-          <Button
-            tabIndex={-1}
-            className={`${styles.searchButton} `}
-            style={{ marginBottom: '0px' }}
-            data-testid="searchBtn"
-          >
-            <Search className={styles.searchIcon} />
-          </Button>
-        </div>
-        <div className="d-flex gap-4 mb-1">
-          <SortingButton
-            title={tCommon('sort')}
-            sortingOptions={[
-              { label: t('createdLatest'), value: 'createdAt_DESC' },
-              { label: t('createdEarliest'), value: 'createdAt_ASC' },
-            ]}
-            selectedOption={
-              sortBy === 'createdAt_DESC'
-                ? t('createdLatest')
-                : t('createdEarliest')
-            }
-            onSortChange={(value) =>
-              setSortBy(value as 'createdAt_DESC' | 'createdAt_ASC')
-            }
-            dataTestIdPrefix="filter"
-            buttonLabel={tCommon('sort')}
-          />
-          <div>
+      <div className={styles.head}>
+        <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+          <div className={`${styles.input} mb-1`}>
+            <Form.Control
+              type="name"
+              placeholder={tCommon('searchByName')}
+              autoComplete="off"
+              required
+              className={styles.inputField}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              data-testid="searchByName"
+            />
             <Button
-              variant="success"
-              onClick={() => handleOpenModal(null, 'create')}
-              className={styles.createButton}
-              style={{ marginTop: '0px' }}
-              data-testid="createFundBtn"
+              tabIndex={-1}
+              className={` ${styles.searchButton} `}
+              data-testid="searchBtn"
             >
-              <i className={'fa fa-plus me-2'} />
-              {t('createFund')}
+              <Search className={styles.searchIcon} />
             </Button>
           </div>
+          <div className="d-flex gap-4 mb-1">
+            <SortingButton
+              title={tCommon('sort')}
+              sortingOptions={[
+                { label: t('createdLatest'), value: 'createdAt_DESC' },
+                { label: t('createdEarliest'), value: 'createdAt_ASC' },
+              ]}
+              selectedOption={
+                sortBy === 'createdAt_DESC'
+                  ? t('createdLatest')
+                  : t('createdEarliest')
+              }
+              onSortChange={(value) =>
+                setSortBy(value as 'createdAt_DESC' | 'createdAt_ASC')
+              }
+              dataTestIdPrefix="filter"
+              buttonLabel={tCommon('sort')}
+            />
+            <div>
+              <Button
+                variant="success"
+                onClick={() => handleOpenModal(null, 'create')}
+                className={styles.createButton}
+                style={{ marginTop: '0px' }}
+                data-testid="createFundBtn"
+              >
+                <i className={'fa fa-plus me-2'} />
+                {t('createFund')}
+              </Button>
+            </div>
+          </div>
         </div>
       </div>
 
diff --git a/src/screens/OrganizationPeople/AddMember.tsx b/src/screens/OrganizationPeople/AddMember.tsx
index 7743768611..a6f8fbe4b0 100644
--- a/src/screens/OrganizationPeople/AddMember.tsx
+++ b/src/screens/OrganizationPeople/AddMember.tsx
@@ -528,35 +528,29 @@ function AddMember(): JSX.Element {
               />
             </InputGroup>
           </div>
+        </Modal.Body>
+        <Modal.Footer>
           <div className={styles.createUserActionBtns}>
             <Button
-              className={`${styles.borderNone}`}
+              className={`${styles.removeButton}`}
               variant="danger"
               onClick={closeCreateNewUserModal}
               data-testid="closeBtn"
-              style={{
-                backgroundColor: 'var(--delete-button-bg)',
-                color: 'var(--delete-button-color)',
-              }}
             >
               <Close className={styles.closeButton} />
               {translateOrgPeople('cancel')}
             </Button>
             <Button
-              className={`${styles.colorPrimary} ${styles.borderNone}`}
+              className={`${styles.addButton}`}
               variant="success"
               onClick={handleCreateUser}
               data-testid="createBtn"
-              style={{
-                backgroundColor: 'var(--search-button-bg)',
-                border: '1px solid var(--dropdown-border-color)',
-              }}
             >
               <Check className={styles.searchIcon} />
               {translateOrgPeople('create')}
             </Button>
           </div>
-        </Modal.Body>
+        </Modal.Footer>
       </Modal>
     </>
   );
diff --git a/src/screens/OrganizationTags/OrganizationTags.tsx b/src/screens/OrganizationTags/OrganizationTags.tsx
index 0b233cfaef..39a2a26032 100644
--- a/src/screens/OrganizationTags/OrganizationTags.tsx
+++ b/src/screens/OrganizationTags/OrganizationTags.tsx
@@ -82,7 +82,6 @@ function OrganizationTags(): JSX.Element {
         first: TAGS_QUERY_DATA_CHUNK_SIZE,
         after:
           orgUserTagsData?.organizations?.[0]?.userTags?.pageInfo?.endCursor ??
-          /* istanbul ignore next */
           null,
       },
       updateQuery: (
@@ -95,7 +94,7 @@ function OrganizationTags(): JSX.Element {
           };
         },
       ) => {
-        if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
+        if (!fetchMoreResult) return prevResult;
 
         return {
           organizations: [
@@ -146,7 +145,6 @@ function OrganizationTags(): JSX.Element {
         setCreateTagModalIsOpen(false);
       }
     } catch (error: unknown) {
-      /* istanbul ignore next */
       if (error instanceof Error) {
         toast.error(error.message);
       }
@@ -283,7 +281,7 @@ function OrganizationTags(): JSX.Element {
             variant="outline-primary"
             onClick={() => redirectToManageTag(params.row._id)}
             data-testid="manageTagBtn"
-            className={styles.addButton}
+            className={styles.editButton}
           >
             {t('manageTag')}
           </Button>
@@ -366,7 +364,7 @@ function OrganizationTags(): JSX.Element {
                   next={loadMoreUserTags}
                   hasMore={
                     orgUserTagsData?.organizations?.[0]?.userTags?.pageInfo
-                      ?.hasNextPage ?? /* istanbul ignore next */ false
+                      ?.hasNextPage ?? false
                   }
                   loader={<InfiniteScrollLoader />}
                   scrollableTarget="orgUserTagsScrollableDiv"
@@ -377,7 +375,7 @@ function OrganizationTags(): JSX.Element {
                     hideFooter={true}
                     getRowId={(row) => row.id}
                     slots={{
-                      noRowsOverlay: /* istanbul ignore next */ () => (
+                      noRowsOverlay: () => (
                         <Stack
                           height="100%"
                           alignItems="center"
@@ -393,6 +391,7 @@ function OrganizationTags(): JSX.Element {
                       '& .MuiDataGrid-row': {
                         backgroundColor: 'var(--tablerow-bg-color)',
                         '&:focus-within': {
+                          outline: '2px solid #000',
                           outlineOffset: '-2px',
                         },
                       },
@@ -405,6 +404,7 @@ function OrganizationTags(): JSX.Element {
                         boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
                       },
                       '& .MuiDataGrid-cell:focus': {
+                        outline: '2px solid #000',
                         outlineOffset: '-2px',
                       },
                     }}
@@ -446,7 +446,7 @@ function OrganizationTags(): JSX.Element {
             <Form.Control
               type="name"
               id="orgname"
-              className="mb-3"
+              className={`mb-3 ${styles.inputField}`}
               placeholder={t('tagNamePlaceholder')}
               data-testid="tagNameInput"
               autoComplete="off"
@@ -463,7 +463,7 @@ function OrganizationTags(): JSX.Element {
               variant="secondary"
               onClick={(): void => hideCreateTagModal()}
               data-testid="closeCreateTagModal"
-              className={styles.closeButton}
+              className={styles.removeButton}
             >
               {tCommon('cancel')}
             </Button>
diff --git a/src/screens/SubTags/SubTags.tsx b/src/screens/SubTags/SubTags.tsx
index 034c7dfea9..cb2f7ba053 100644
--- a/src/screens/SubTags/SubTags.tsx
+++ b/src/screens/SubTags/SubTags.tsx
@@ -92,7 +92,6 @@ function SubTags(): JSX.Element {
           fetchMoreResult?: { getChildTags: InterfaceQueryUserTagChildTags };
         },
       ) => {
-        /* istanbul ignore next -- @preserve */
         if (!fetchMoreResult) return prevResult;
 
         return {
@@ -126,7 +125,6 @@ function SubTags(): JSX.Element {
         },
       });
 
-      /* istanbul ignore next -- @preserve */
       if (data) {
         toast.success(t('tagCreationSuccess') as string);
         subTagsRefetch();
@@ -134,7 +132,6 @@ function SubTags(): JSX.Element {
         setAddSubTagModalIsOpen(false);
       }
     } catch (error: unknown) {
-      /* istanbul ignore next -- @preserve */
       if (error instanceof Error) {
         toast.error(error.message);
       }
@@ -155,7 +152,6 @@ function SubTags(): JSX.Element {
   }
 
   const subTagsList =
-    /* istanbul ignore next -- @preserve */
     subTagsData?.getChildTags.childTags.edges.map((edge) => edge.node) ?? [];
 
   const parentTagName = subTagsData?.getChildTags.name;
@@ -265,9 +261,9 @@ function SubTags(): JSX.Element {
         return (
           <Button
             size="sm"
-            variant="outline-primary"
             onClick={() => redirectToManageTag(params.row._id)}
             data-testid="manageTagBtn"
+            className={styles.editButton}
           >
             {t('manageTag')}
           </Button>
@@ -373,7 +369,6 @@ function SubTags(): JSX.Element {
                   next={loadMoreSubTags}
                   hasMore={
                     subTagsData?.getChildTags.childTags.pageInfo.hasNextPage ??
-                    /* istanbul ignore next -- @preserve */
                     false
                   }
                   loader={<InfiniteScrollLoader />}
@@ -385,16 +380,15 @@ function SubTags(): JSX.Element {
                     hideFooter={true}
                     getRowId={(row) => row.id}
                     slots={{
-                      noRowsOverlay:
-                        /* istanbul ignore next -- @preserve */ () => (
-                          <Stack
-                            height="100%"
-                            alignItems="center"
-                            justifyContent="center"
-                          >
-                            {t('noTagsFound')}
-                          </Stack>
-                        ),
+                      noRowsOverlay: () => (
+                        <Stack
+                          height="100%"
+                          alignItems="center"
+                          justifyContent="center"
+                        >
+                          {t('noTagsFound')}
+                        </Stack>
+                      ),
                     }}
                     sx={dataGridStyle}
                     getRowClassName={() => `${styles.rowBackground}`}
@@ -423,7 +417,7 @@ function SubTags(): JSX.Element {
         centered
       >
         <Modal.Header
-          className={styles.tableHeader}
+          className={styles.modalHeader}
           data-testid="tagHeader"
           closeButton
         >
@@ -435,7 +429,7 @@ function SubTags(): JSX.Element {
             <Form.Control
               type="name"
               id="tagname"
-              className="mb-3"
+              className={`mb-3 ${styles.inputField}`}
               placeholder={t('tagNamePlaceholder')}
               data-testid="modalTitle"
               autoComplete="off"
@@ -452,7 +446,7 @@ function SubTags(): JSX.Element {
               variant="secondary"
               onClick={(): void => hideAddSubTagModal()}
               data-testid="addSubTagModalCloseBtn"
-              className={styles.closeButton}
+              className={styles.removeButton}
             >
               {tCommon('cancel')}
             </Button>
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 6763be4b24..dfba774886 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -55,7 +55,7 @@
   --tablerow-bg: #eff1f7;
   --date-picker-bg: #f2f2f2;
   --table-bg-color: var(--grey-bg-color);
-  --tablerow-bg-color: var(--dropdown-hover-color);
+  --tablerow-bg-color: #ffffff;
   --row-background: var(--bs-white, var(--bs-white));
   --modal-background: rgba(0, 0, 0, 0.7);
 
@@ -91,16 +91,16 @@
   --bs-gray-400: #9ca3af;
   --bs-gray-300: #d1d5db;
   --toggle-button-bg: #1e4e8c;
-
-  --table-head-bg: var(--blue-subtle, var(--blue-color));
+  --table-head-bg: #eaebef;
   --table-head-color: var(--bs-white, var(--white-color));
-
-  --table-header-color: var(--bs-white, var(--bs-gray-300));
+  --table-header-color: #000000;
   --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);
+  --light-blue: #a8c7fa;
+  --dark-blue: #1778f2;
   --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
   /* breakpoints */
@@ -195,7 +195,7 @@
   font-size: 20px;
   margin-bottom: 30px;
   padding-bottom: 5px;
-  border-bottom: 3px solid var(--light-green);
+  border-bottom: 3px solid var(--light-blue);
   width: 15%;
 }
 
@@ -205,7 +205,7 @@
   font-size: 18px;
   margin-bottom: 20px;
   padding-bottom: 5px;
-  border-bottom: 3px solid var(--light-green);
+  border-bottom: 3px solid var(--light-blue);
   width: 60%;
 }
 
@@ -283,7 +283,15 @@
   margin-bottom: 10px; */
 }
 
-.dropdown:is(:hover, :focus, :active, :focus-visible, .show) {
+.dropdown:is(
+    :hover,
+    :focus,
+    :active,
+    :focus-visible,
+    .show,
+    :disabled,
+    :checked
+  ) {
   background-color: transparent !important;
   border: 1px solid var(--brown-color);
   color: var(--brown-color) !important;
@@ -291,8 +299,21 @@
 
 .dropdown:is(:focus, :focus-visible) {
   outline: 2px solid var(--highlight-color, var(--search-button-bg));
+  border: 1px solid var(--brown-color);
 }
 
+.dropdown:not(:focus) {
+  background-color: var(--bs-white);
+  border: 1px solid var(--brown-color);
+  color: var(--brown-color) !important;
+}
+
+/* .dropdown:disabled {
+  background-color: transparent !important;
+  border: 1px solid var(--brown-color);
+  color: var(--brown-color) !important;
+} */
+
 .dropdownItem {
   background-color: var(--bs-white) !important;
   color: var(--brown-color) !important;
@@ -380,6 +401,11 @@
   gap: 8px;
 }
 
+.deleteButton:is(:hover, :active) {
+  background-color: var(--delete-button-color) !important;
+  color: white;
+}
+
 .actionItemDeleteButton {
   background-color: var(--delete-button-bg);
   color: var(--delete-button-color);
@@ -418,6 +444,10 @@
   box-shadow: 0 1px 1px var(--input-shadow-color);
 }
 
+.inputField:focus {
+  box-shadow: 0 0 0 0.25rem var(--light-blue);
+}
+
 .inputFieldModal {
   margin-bottom: 10px;
   background-color: var(--bs-white);
@@ -449,24 +479,49 @@
 
 .searchButton:active {
   transform: scale(0.95);
+  background-color: var(--search-button-hover-bg, #286fe0) !important;
+  border-color: transparent !important;
 }
 
 .addButton {
   margin-bottom: 10px;
-  background-color: var(--search-button-bg);
+  background-color: var(--light-blue);
   border-color: var(--grey-bg-color);
 }
 
-.addButton:hover {
-  background-color: var(--light-blue-color);
+.addButton:is(:hover, :active) {
+  background-color: var(--dark-blue) !important;
   border-color: var(--search-button-border);
 }
 
+.removeButton {
+  margin-bottom: 10px;
+  background-color: var(--delete-button-bg);
+  color: var(--delete-button-color);
+  margin-right: 10px;
+}
+
+.removeButton:is(:hover, :active, :focus) {
+  background-color: var(--delete-button-color) !important;
+  border-color: var(--delete-button-color);
+  color: white;
+}
+
 .yesButton {
   background-color: var(--search-button-bg);
   border-color: var(--search-button-border);
 }
 
+.regularBtn {
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
+}
+
+.regularBtn:is(:hover, :active) {
+  background-color: #286fe0 !important;
+  border-color: var(--search-button-border) !important;
+}
+
 .searchIcon {
   color: var(--brown-color);
 }
@@ -506,12 +561,56 @@
   overflow-y: auto;
 }
 
+.scrollContainer {
+  height: 100px;
+  overflow-y: auto;
+  margin-bottom: 1rem;
+}
+
+.memberBadge {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px var(--bs-gray-400);
+  max-width: calc(100% - 2rem);
+}
+
+.loadingDiv {
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tagBadge {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px var(--bs-gray-400);
+  max-width: calc(100% - 2rem);
+}
+
 .tableHeader {
   background-color: var(--table-head-bg);
   color: var(--table-header-color);
   font-size: var(--font-size-header);
 }
 
+.editButton {
+  background-color: var(--light-blue);
+  color: var(--brown-color);
+  border-color: var(--grey-bg-color);
+  --bs-btn-active-bg: var(--dark-blue);
+  --bs-btn-active-border-color: var(--grey-bg-color);
+}
+
+.editButton:is(:hover, :active) {
+  background-color: var(--dark-blue);
+  border-color: var(--search-button-border);
+}
+
 .errorContainer {
   min-height: 100vh;
 }
@@ -562,6 +661,7 @@
   scrollbar-color: var(--bs-gray-400) var(--bs-white);
   max-height: calc(100vh - 18rem);
   overflow: auto;
+  margin-top: 20px !important;
 }
 
 .tagsBreadCrumbs:hover {
@@ -665,6 +765,18 @@ hr {
   display: flex;
   justify-content: center;
   align-items: center;
+  /* background-color: var(--search-button-bg); */
+}
+
+.switch input {
+  /* box-shadow: 0 0 0.1rem 0.2rem var(--light-blue); */
+  --bs-form-switch-bg: transparent;
+}
+
+.switch input:checked {
+  background-color: var(--dark-blue);
+  border-color: var(--dark-blue);
+  box-shadow: 0 0 0.1rem 0.2rem var(--light-blue);
 }
 
 .pageNotFound {
@@ -691,7 +803,7 @@ hr {
 .pageNotFound h1.head {
   font-size: 250px;
   font-weight: 900;
-  color: var(--light-green);
+  color: var(--light-blue);
   letter-spacing: 25px;
   margin: 10px 0 0 0;
 }
@@ -734,10 +846,11 @@ hr {
 .greenregbtnPledge {
   margin-top: 15px;
   border: 1px solid var(--bs-gray-300);
+  border-color: var(--grey-bg-color);
   box-shadow: 0 2px 2px var(--grey-border-box-color);
   padding: 10px 10px;
   border-radius: 5px;
-  background-color: var(--bs-primary);
+  background-color: var(--search-button-bg);
   width: 100%;
   font-size: 16px;
   color: var(--bs-white);
@@ -771,7 +884,7 @@ hr {
 
 .inputFieldPledge {
   background-color: var(--bs-white);
-  box-shadow: 0 1px 1px var(--light-green);
+  box-shadow: 0 1px 1px var(--light-blue);
 }
 
 .dropdownPledge {
@@ -873,6 +986,10 @@ hr {
   gap: 0.3rem;
 }
 
+/* .progressBar .bg-info {
+  background-color: #286fe0 !important;
+} */
+
 .endpoints {
   display: flex;
   position: relative;
@@ -934,10 +1051,20 @@ hr {
   display: flex;
   justify-content: center;
   align-items: center;
+  border-color: var(--grey-border-box-color);
+}
+
+.toggleBtnPledge:is(:focus, :active, :checked) + label {
+  color: black !important;
+  border-color: black !important;
+}
+
+.toggleBtnPledge:not(:checked) + label {
+  color: var(--subtle-blue-grey-hover) !important;
 }
 
-.toggleBtnPledge:hover {
-  color: var(--light-green) !important;
+.toggleBtnPledge:is(:hover) + label {
+  color: var(--light-blue) !important;
 }
 
 .card {
@@ -1188,7 +1315,7 @@ hr {
 }
 
 .customcell {
-  background-color: var(--light-green) !important;
+  background-color: var(--light-blue) !important;
   color: var(--bs-white) !important;
   font-size: medium !important;
   font-weight: 500 !important;
@@ -1214,7 +1341,7 @@ hr {
 }
 
 .table-body > .table-row:nth-child(2n) {
-  background: var(--light-neon-green) !important;
+  background: var(--light-blue) !important;
 }
 
 .organizationFundCampaignContainer {
@@ -1235,11 +1362,12 @@ hr {
 .greenregbtnOrganizationFundCampaign {
   margin: 1rem 0 0;
   margin-top: 15px;
-  border: 1px solid var(--bs-gray-300);
+  /* border: 1px solid var(--search-button-bg); */
+  border-color: var(--grey-bg-color);
   box-shadow: 0 2px 2px var(--grey-border-box-color);
   padding: 10px 10px;
   border-radius: 5px;
-  background-color: var(--bs-primary);
+  background-color: var(--search-button-bg);
   width: 100%;
   font-size: 16px;
   color: var(--bs-white);
@@ -1252,6 +1380,11 @@ hr {
   flex: 1;
 }
 
+.greenregbtnOrganizationFundCampaign:hover {
+  background-color: #286fe0;
+  border-color: var(--grey-bg-color);
+}
+
 .goalButtonOrganizationFundCampaign {
   border: 1px solid var(--grey-border-box-color) !important;
   color: var(--grey-bg-color-dark) !important;
@@ -1575,6 +1708,13 @@ hr {
 .modalHeader {
   border: none;
   padding-bottom: 0;
+  background-color: var(--white-color) !important;
+  padding: 1rem 1rem;
+  color: #000000;
+}
+
+.modalHeader div {
+  color: #000000 !important;
 }
 
 .label {
@@ -1671,7 +1811,7 @@ hr {
 }
 
 .toggleBtn:hover {
-  color: var(--light-green) !important;
+  color: var(--light-blue) !important;
 }
 
 input[type='radio']:checked + label {
@@ -1780,6 +1920,14 @@ input[type='radio']:checked + label:hover {
   box-shadow: 0 1px 1px var(--brand-primary);
 }
 
+.dropdowns {
+  background-color: var(--bs-white);
+  border: 1px solid var(--dropdown-border-color);
+  position: relative;
+  display: inline-block;
+  color: black;
+}
+
 .chipIcon {
   height: 0.9rem !important;
 }
@@ -1790,12 +1938,19 @@ input[type='radio']:checked + label:hover {
 
 .active {
   background-color: var(--status-active-bg);
+  color: var(--light-blue) !important;
+  border-color: var(--light-blue) !important;
 }
 
 .pending {
   background-color: var(--status-pending-bg);
-  color: var(--status-pending-text);
-  border-color: var(--status-pending-border);
+  color: var(--light-blue) !important;
+  border-color: var(--light-blue) !important;
+}
+
+.checkboxButton input:checked {
+  background-color: var(--dark-blue);
+  border-color: var(--dark-blue);
 }
 
 /* Modals */
@@ -1876,6 +2031,7 @@ input[type='radio']:checked + label:hover {
   border: 0.5px solid var(--brown-color);
 }
 .searchButtonOrgList {
+  background-color: var(--light-blue);
   position: absolute;
   z-index: 10;
   bottom: 0;
@@ -3413,7 +3569,7 @@ button[data-testid='createPostBtn'] {
     display: flex !important;
     align-items: center;
     background-color: transparent;
-    color: var(--light-green);
+    color: var(--light-blue);
   }
 
   .entryaction .spinner-grow {
@@ -3423,6 +3579,86 @@ button[data-testid='createPostBtn'] {
   }
 }
 
+.entrytoggle {
+  margin: 24px 24px 0 auto;
+  width: fit-content;
+}
+
+.entryaction {
+  display: flex !important;
+}
+
+.entryaction i {
+  margin-right: 8px;
+  margin-top: 4px;
+}
+
+.entryaction .spinner-grow {
+  height: 1rem;
+  width: 1rem;
+  margin-right: 8px;
+}
+
+.admedia {
+  object-fit: cover;
+  height: 16rem;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.addCard {
+  width: 28rem;
+}
+
+.dropdownButton {
+  background-color: transparent;
+  color: #000;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  padding: 8px 10px;
+}
+
+.dropdownContainer {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdownmenu {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  background-color: white;
+  width: 120px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  padding: 5px 0;
+  margin: 0;
+  list-style-type: none;
+  right: 0;
+  top: 100%;
+}
+
+.dropdownmenu li {
+  cursor: pointer;
+  padding: 8px 16px;
+  text-decoration: none;
+  display: block;
+  color: #333;
+}
+
+.dropdownmenu li:hover {
+  background-color: #f1f1f1;
+}
+
+.dropdownContainer:hover .dropdownmenu {
+  display: block;
+}
+
 .leftDrawer {
   width: calc(300px + 2rem);
   position: fixed;
diff --git a/src/utils/organizationTagsUtils.ts b/src/utils/organizationTagsUtils.ts
index 56654a3abb..9105a5629e 100644
--- a/src/utils/organizationTagsUtils.ts
+++ b/src/utils/organizationTagsUtils.ts
@@ -18,9 +18,11 @@ export const dataGridStyle = {
   },
   '& .MuiDataGrid-row:hover': {
     backgroundColor: 'transparent',
+    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
   },
   '& .MuiDataGrid-row.Mui-hovered': {
     backgroundColor: 'transparent',
+    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
   },
   '& .MuiDataGrid-root': {
     borderRadius: '0.1rem',
@@ -36,6 +38,10 @@ export const dataGridStyle = {
   '& .MuiDataGrid-virtualScrollerContent': {
     marginTop: 6.5,
   },
+  '& .MuiDataGrid-cell:focus': {
+    outline: '2px solid #000',
+    outlineOffset: '-2px',
+  },
 };
 
 // the data chunk size for tag related queries