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..450051794c 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,
@@ -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())
@@ -396,16 +399,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/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..f7ffef8d38 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,
@@ -270,7 +270,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
         centered
       >
         <Modal.Header
-          className="bg-primary"
+          className={styles.modalHeader}
           data-testid="modalOrganizationHeader"
           closeButton
         >
@@ -312,7 +312,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 +388,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..05e3564a9b 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';
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 38466f6f11..d2af763dae 100644
--- a/src/screens/ManageTag/ManageTag.tsx
+++ b/src/screens/ManageTag/ManageTag.tsx
@@ -292,7 +292,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>;
@@ -304,7 +304,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">
@@ -321,7 +321,7 @@ function ManageTag(): JSX.Element {
       minWidth: 100,
       headerAlign: 'center',
       sortable: false,
-      headerClassName: `${styles.tableHeaders}`,
+      headerClassName: `${styles.tableHeader}`,
       renderCell: (params: GridCellParams) => {
         return (
           <div>
@@ -330,7 +330,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>
@@ -519,7 +521,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')}
@@ -543,7 +545,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/OrganizationTags/OrganizationTags.tsx b/src/screens/OrganizationTags/OrganizationTags.tsx
index 558eb4eaf8..3c732b0c6b 100644
--- a/src/screens/OrganizationTags/OrganizationTags.tsx
+++ b/src/screens/OrganizationTags/OrganizationTags.tsx
@@ -285,7 +285,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>
@@ -407,6 +407,7 @@ function OrganizationTags(): JSX.Element {
                       '& .MuiDataGrid-row': {
                         backgroundColor: 'var(--tablerow-bg-color)',
                         '&:focus-within': {
+                          outline: '2px solid #000',
                           outlineOffset: '-2px',
                         },
                       },
@@ -419,6 +420,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',
                       },
                     }}
@@ -460,7 +462,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"
@@ -477,7 +479,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 6a20e875ec..e0763997e3 100644
--- a/src/screens/SubTags/SubTags.tsx
+++ b/src/screens/SubTags/SubTags.tsx
@@ -266,9 +266,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>
@@ -445,7 +445,7 @@ function SubTags(): JSX.Element {
         centered
       >
         <Modal.Header
-          className={styles.tableHeader}
+          className={styles.modalHeader}
           data-testid="tagHeader"
           closeButton
         >
@@ -457,7 +457,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"
@@ -474,7 +474,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 981ff08b1e..5580f21ab2 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -491,6 +491,11 @@
   border-color: var(--search-button-border);
 }
 
+.addButton:not(:hover, :active, :focus) {
+  background-color: #286fe0 !important;
+  border-color: var(--search-button-border);
+}
+
 .removeButton {
   margin-bottom: 10px;
   background-color: var(--delete-button-bg);
@@ -558,6 +563,37 @@
   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);
@@ -630,6 +666,7 @@
   scrollbar-color: var(--bs-gray-400) var(--bs-white);
   max-height: calc(100vh - 18rem);
   overflow: auto;
+  margin-top: 20px !important;
 }
 
 .tagsBreadCrumbs:hover {
@@ -737,7 +774,7 @@ hr {
 }
 
 .switch input {
-  /* box-shadow: 0 0 0.1rem 0.2rem var(--bg-blue); */
+  box-shadow: 0 0 0.1rem 0.2rem var(--bg-blue);
 }
 
 .switch input:checked {
@@ -1650,6 +1687,8 @@ hr {
 .modalHeader {
   border: none;
   padding-bottom: 0;
+  background-color: var(--bs-primary) !important;
+  padding: 1rem 1rem;
 }
 
 .label {
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