diff --git a/src/screens/ManageTag/ManageTag.tsx b/src/screens/ManageTag/ManageTag.tsx
index e8eb9bb8df..428dad7981 100644
--- a/src/screens/ManageTag/ManageTag.tsx
+++ b/src/screens/ManageTag/ManageTag.tsx
@@ -1,7 +1,7 @@
 import type { FormEvent } from 'react';
 import React, { useEffect, useState } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
-import { WarningAmberRounded } from '@mui/icons-material';
+import { Search, WarningAmberRounded } from '@mui/icons-material';
 import SortIcon from '@mui/icons-material/Sort';
 import Loader from 'components/Loader/Loader';
 import IconComponent from 'components/IconComponent/IconComponent';
@@ -13,7 +13,7 @@ import Row from 'react-bootstrap/Row';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import type { InterfaceQueryUserTagsAssignedMembers } from 'utils/interfaces';
-import styles from './ManageTag.module.css';
+import styles from '../../style/app.module.css';
 import { DataGrid } from '@mui/x-data-grid';
 import type {
   InterfaceTagAssignedMembersQuery,
@@ -356,11 +356,10 @@ function ManageTag(): JSX.Element {
         <div className={styles.mainpageright}>
           <div className={styles.btnsContainer}>
             <div className={styles.input}>
-              <i className="fa fa-search position-absolute text-body-tertiary end-0 top-50 translate-middle" />
               <Form.Control
                 type="text"
                 id="userName"
-                className="bg-white"
+                className={`${styles.inputField} `}
                 placeholder={tCommon('searchByName')}
                 onChange={(e) =>
                   setAssignedMemberSearchInput(e.target.value.trim())
@@ -368,6 +367,13 @@ function ManageTag(): JSX.Element {
                 data-testid="searchByName"
                 autoComplete="off"
               />
+              <Button
+                tabIndex={-1}
+                className={styles.searchButton}
+                data-testid="searchBtn"
+              >
+                <Search />
+              </Button>
             </div>
             <div className={styles.btnsBlock}>
               <Dropdown
@@ -378,6 +384,7 @@ function ManageTag(): JSX.Element {
                 <Dropdown.Toggle
                   variant="outline-success"
                   data-testid="sortPeople"
+                  className={styles.dropdown}
                 >
                   <SortIcon className={'me-1'} />
                   {assignedMemberSortOrder === 'DESCENDING'
@@ -402,7 +409,7 @@ function ManageTag(): JSX.Element {
               <Button
                 variant="success"
                 onClick={() => redirectToSubTags(currentTagId as string)}
-                className="mx-4"
+                className={`${styles.createButton} mb-2`}
                 data-testid="subTagsBtn"
               >
                 {t('subTags')}
@@ -412,7 +419,7 @@ function ManageTag(): JSX.Element {
               variant="success"
               onClick={showAddPeopleToTagModal}
               data-testid="addPeopleToTagBtn"
-              className="ms-auto"
+              className={`${styles.createButton} mb-2 ms-3`}
             >
               <i className={'fa fa-plus me-2'} />
               {t('addPeopleToTag')}
diff --git a/src/screens/OrganizationActionItems/ItemModal.tsx b/src/screens/OrganizationActionItems/ItemModal.tsx
index a66052d25a..b7555af121 100644
--- a/src/screens/OrganizationActionItems/ItemModal.tsx
+++ b/src/screens/OrganizationActionItems/ItemModal.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Modal, Form, Button } from 'react-bootstrap';
 import type { ChangeEvent, FC } from 'react';
-import styles from './OrganizationActionItems.module.css';
+import styles from '../../style/app.module.css';
 import { DatePicker } from '@mui/x-date-pickers';
 import dayjs from 'dayjs';
 import type { Dayjs } from 'dayjs';
@@ -379,7 +379,7 @@ const ItemModal: FC<InterfaceItemModalProps> = ({
         <Button
           variant="danger"
           onClick={hide}
-          className={styles.modalCloseBtn}
+          className={styles.closeButton}
           data-testid="modalCloseBtn"
         >
           <i className="fa fa-times"></i>
@@ -634,7 +634,7 @@ const ItemModal: FC<InterfaceItemModalProps> = ({
 
           <Button
             type="submit"
-            className={styles.greenregbtn}
+            className={styles.addButton}
             data-testid="submitBtn"
           >
             {editMode ? t('updateActionItem') : t('createActionItem')}
diff --git a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx
index 6b709a1929..640fdde032 100644
--- a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx
+++ b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx
@@ -2,7 +2,7 @@ import React, { type FC, type FormEvent, useEffect, useState } from 'react';
 import { Modal, Button, Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { FormControl, TextField } from '@mui/material';
-import styles from './OrganizationActionItems.module.css';
+import styles from '../../style/app.module.css';
 import { useMutation } from '@apollo/client';
 import { UPDATE_ACTION_ITEM_MUTATION } from 'GraphQl/Mutations/ActionItemMutations';
 import { toast } from 'react-toastify';
@@ -89,7 +89,7 @@ const ItemUpdateStatusModal: FC<InterfaceItemUpdateStatusModalProps> = ({
         <Button
           variant="danger"
           onClick={hide}
-          className={styles.modalCloseBtn}
+          className={styles.closeButton}
           data-testid="modalCloseBtn"
         >
           <i className="fa fa-times"></i>
@@ -123,7 +123,7 @@ const ItemUpdateStatusModal: FC<InterfaceItemUpdateStatusModalProps> = ({
           ) : (
             <Button
               type="submit"
-              className={styles.greenregbtn}
+              className={styles.addButton}
               data-testid="createBtn"
             >
               {t('markCompletion')}
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.module.css b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
index 97a20848ec..ac86e19f3f 100644
--- a/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
@@ -1,4 +1,4 @@
-.actionItemsContainer {
+actionItemsContainer {
   height: 90vh;
 }
 
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.tsx b/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
index 429338b93c..8e0defbfd4 100644
--- a/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
@@ -19,7 +19,7 @@ import type {
   InterfaceActionItemInfo,
   InterfaceActionItemList,
 } from 'utils/interfaces';
-import styles from './OrganizationActionItems.module.css';
+import styles from '../../style/app.module.css';
 import Loader from 'components/Loader/Loader';
 import {
   DataGrid,
@@ -46,27 +46,6 @@ enum ModalState {
   STATUS = 'status',
 }
 
-const dataGridStyle = {
-  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
-    outline: 'none !important',
-  },
-  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
-    outline: 'none',
-  },
-  '& .MuiDataGrid-row:hover': {
-    backgroundColor: 'transparent',
-  },
-  '& .MuiDataGrid-row.Mui-hovered': {
-    backgroundColor: 'transparent',
-  },
-  '& .MuiDataGrid-root': {
-    borderRadius: '0.5rem',
-  },
-  '& .MuiDataGrid-main': {
-    borderRadius: '0.5rem',
-  },
-};
-
 /**
  * Component for managing and displaying action items within an organization.
  *
@@ -328,10 +307,10 @@ function organizationActionItems(): JSX.Element {
         return (
           <>
             <Button
-              variant="success"
+              // variant="success"
               size="sm"
               style={{ minWidth: '32px' }}
-              className="me-2 rounded"
+              className={styles.infoButton}
               data-testid={`viewItemBtn${params.row.id}`}
               onClick={() => handleModalClick(params.row, ModalState.VIEW)}
             >
@@ -340,7 +319,7 @@ function organizationActionItems(): JSX.Element {
             <Button
               variant="success"
               size="sm"
-              className="me-2 rounded"
+              className={styles.infoButton}
               data-testid={`editItemBtn${params.row.id}`}
               onClick={() => handleModalClick(params.row, ModalState.SAME)}
             >
@@ -349,7 +328,7 @@ function organizationActionItems(): JSX.Element {
             <Button
               size="sm"
               variant="danger"
-              className="rounded"
+              className={styles.actionItemDeleteButton}
               data-testid={`deleteItemBtn${params.row.id}`}
               onClick={() => handleModalClick(params.row, ModalState.DELETE)}
             >
@@ -374,6 +353,7 @@ function organizationActionItems(): JSX.Element {
             <Form.Check
               type="checkbox"
               data-testid={`statusCheckbox${params.row.id}`}
+              className={styles.checkboxButton}
               checked={params.row.isCompleted}
               onChange={() => handleModalClick(params.row, ModalState.STATUS)}
             />
@@ -405,8 +385,7 @@ function organizationActionItems(): JSX.Element {
           />
           <Button
             tabIndex={-1}
-            className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center`}
-            style={{ marginBottom: '10px' }}
+            className={styles.searchButton}
             data-testid="searchBtn"
           >
             <Search />
@@ -500,7 +479,7 @@ function organizationActionItems(): JSX.Element {
             <Button
               variant="success"
               onClick={() => handleModalClick(null, ModalState.SAME)}
-              style={{ marginTop: '11px' }}
+              className={styles.createButton}
               data-testid="createActionItemBtn"
             >
               <i className={'fa fa-plus me-2'} />
@@ -523,7 +502,29 @@ function organizationActionItems(): JSX.Element {
             </Stack>
           ),
         }}
-        sx={dataGridStyle}
+        sx={{
+          borderRadius: '20px',
+          backgroundColor: 'EAEBEF)',
+          '& .MuiDataGrid-row': {
+            backgroundColor: '#eff1f7',
+            '&:focus-within': {
+              // outline: '2px solid #000',
+              outlineOffset: '-2px',
+            },
+          },
+          '& .MuiDataGrid-row:hover': {
+            backgroundColor: '#EAEBEF',
+            boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+          },
+          '& .MuiDataGrid-row.Mui-hovered': {
+            backgroundColor: '#EAEBEF',
+            boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+          },
+          '& .MuiDataGrid-cell:focus': {
+            // outline: '2px solid #000',
+            // outlineOffset: '-2px',
+          },
+        }}
         getRowClassName={() => `${styles.rowBackground}`}
         autoHeight
         rowHeight={65}
diff --git a/src/screens/OrganizationPeople/AddMember.tsx b/src/screens/OrganizationPeople/AddMember.tsx
index 403ea5a923..750d831abf 100644
--- a/src/screens/OrganizationPeople/AddMember.tsx
+++ b/src/screens/OrganizationPeople/AddMember.tsx
@@ -417,8 +417,9 @@ function AddMember(): JSX.Element {
                                   createMember(userDetails.user._id);
                                 }}
                                 data-testid="addBtn"
-                                className={styles.searchButton}
+                                className={styles.addButton}
                               >
+                                <i className={'fa fa-plus me-2'} />
                                 Add
                               </Button>
                             </StyledTableCell>
diff --git a/src/screens/OrganizationPeople/OrganizationPeople.tsx b/src/screens/OrganizationPeople/OrganizationPeople.tsx
index 849135f120..36efdba63c 100644
--- a/src/screens/OrganizationPeople/OrganizationPeople.tsx
+++ b/src/screens/OrganizationPeople/OrganizationPeople.tsx
@@ -296,7 +296,7 @@ function organizationPeople(): JSX.Element {
                 />
                 <Button
                   type="submit"
-                  className={`${styles.searchButton} position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center`}
+                  className={`${styles.searchButton} `}
                   data-testid={'searchbtn'}
                 >
                   <Search className={styles.searchIcon} />
diff --git a/src/screens/OrganizationTags/OrganizationTags.module.css b/src/screens/OrganizationTags/OrganizationTags.module.css
deleted file mode 100644
index aa2e2abb40..0000000000
--- a/src/screens/OrganizationTags/OrganizationTags.module.css
+++ /dev/null
@@ -1,150 +0,0 @@
-.btnsContainer {
-  display: flex;
-  margin: 2rem 0;
-}
-
-.btnsContainer .btnsBlock {
-  display: flex;
-  width: max-content;
-}
-
-.btnsContainer .btnsBlock button {
-  margin-left: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.btnsContainer .input {
-  flex: 1;
-  position: relative;
-  max-width: 60%;
-  justify-content: space-between;
-}
-
-.btnsContainer input {
-  outline: 1px solid var(--bs-gray-400);
-}
-
-.btnsContainer .input button {
-  width: 52px;
-}
-
-@media (max-width: 1120px) {
-  .contract {
-    padding-left: calc(250px + 2rem + 1.5rem);
-  }
-
-  .listBox .itemCard {
-    width: 100%;
-  }
-}
-
-@media (max-width: 1020px) {
-  .btnsContainer {
-    flex-direction: column;
-    margin: 1.5rem 0;
-  }
-
-  .btnsContainer .btnsBlock {
-    margin: 1.5rem 0 0 0;
-    justify-content: space-between;
-  }
-
-  .btnsContainer .btnsBlock button {
-    margin: 0;
-  }
-
-  .btnsContainer .btnsBlock div button {
-    margin-right: 1.5rem;
-  }
-}
-
-/* For mobile devices  */
-
-@media (max-width: 520px) {
-  .btnsContainer {
-    margin-bottom: 0;
-  }
-
-  .btnsContainer .btnsBlock {
-    display: block;
-    margin-top: 1rem;
-    margin-right: 0;
-  }
-
-  .btnsContainer .btnsBlock div {
-    flex: 1;
-  }
-
-  .btnsContainer .btnsBlock div[title='Sort organizations'] {
-    margin-right: 0.5rem;
-  }
-
-  .btnsContainer .btnsBlock button {
-    margin-bottom: 1rem;
-    margin-right: 0;
-    width: 100%;
-  }
-}
-
-.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;
-}
-
-.subTagsLink {
-  color: var(--bs-blue);
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.subTagsLink i {
-  visibility: hidden;
-}
-
-.subTagsLink:hover {
-  font-weight: 600;
-  text-decoration: underline;
-}
-
-.subTagsLink:hover i {
-  visibility: visible;
-}
-
-.tagsBreadCrumbs {
-  color: var(--bs-gray);
-  cursor: pointer;
-}
-
-.orgUserTagsScrollableDiv {
-  scrollbar-width: auto;
-  scrollbar-color: var(--bs-gray-400) var(--bs-white);
-
-  max-height: calc(100vh - 18rem);
-  overflow: auto;
-  position: sticky;
-}
diff --git a/src/screens/OrganizationTags/OrganizationTags.tsx b/src/screens/OrganizationTags/OrganizationTags.tsx
index b59da67fd0..55134b75ac 100644
--- a/src/screens/OrganizationTags/OrganizationTags.tsx
+++ b/src/screens/OrganizationTags/OrganizationTags.tsx
@@ -2,7 +2,6 @@ import { useMutation, useQuery } from '@apollo/client';
 import { WarningAmberRounded } from '@mui/icons-material';
 import SortIcon from '@mui/icons-material/Sort';
 import Loader from 'components/Loader/Loader';
-import IconComponent from 'components/IconComponent/IconComponent';
 import { useNavigate, useParams, Link } from 'react-router-dom';
 import type { ChangeEvent } from 'react';
 import React, { useEffect, useState } from 'react';
@@ -13,20 +12,18 @@ import Modal from 'react-bootstrap/Modal';
 import Row from 'react-bootstrap/Row';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
+import IconComponent from 'components/IconComponent/IconComponent';
 import type {
   InterfaceQueryOrganizationUserTags,
   InterfaceTagData,
 } from 'utils/interfaces';
-import styles from './OrganizationTags.module.css';
+import styles from '../../style/app.module.css';
 import { DataGrid } from '@mui/x-data-grid';
 import type {
   InterfaceOrganizationTagsQuery,
   SortedByType,
 } from 'utils/organizationTagsUtils';
-import {
-  dataGridStyle,
-  TAGS_QUERY_DATA_CHUNK_SIZE,
-} from 'utils/organizationTagsUtils';
+import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
 import type { GridCellParams, GridColDef } from '@mui/x-data-grid';
 import { Stack } from '@mui/material';
 import { ORGANIZATION_USER_TAGS_LIST } from 'GraphQl/Queries/OrganizationQueries';
@@ -288,6 +285,7 @@ function OrganizationTags(): JSX.Element {
             variant="outline-primary"
             onClick={() => redirectToManageTag(params.row._id)}
             data-testid="manageTagBtn"
+            className={styles.addButton}
           >
             {t('manageTag')}
           </Button>
@@ -306,7 +304,7 @@ function OrganizationTags(): JSX.Element {
               <Form.Control
                 type="text"
                 id="tagName"
-                className="bg-white"
+                className={styles.inputField}
                 placeholder={tCommon('searchByName')}
                 data-testid="searchByName"
                 onChange={(e) => setTagSearchName(e.target.value.trim())}
@@ -322,6 +320,7 @@ function OrganizationTags(): JSX.Element {
                 <Dropdown.Toggle
                   variant="outline-success"
                   data-testid="sortTags"
+                  className={styles.dropdown}
                 >
                   <SortIcon className={'me-1'} />
                   {tagSortOrder === 'DESCENDING'
@@ -344,15 +343,17 @@ function OrganizationTags(): JSX.Element {
                 </Dropdown.Menu>
               </Dropdown>
             </div>
-            <Button
-              variant="success"
-              onClick={showCreateTagModal}
-              data-testid="createTagBtn"
-              className="ms-auto"
-            >
-              <i className={'fa fa-plus me-2'} />
-              {t('createTag')}
-            </Button>
+            <div>
+              <Button
+                // variant="success"
+                onClick={showCreateTagModal}
+                data-testid="createTagBtn"
+                className={styles.createButton}
+              >
+                <i className={'fa fa-plus me-2'} />
+                {t('createTag')}
+              </Button>
+            </div>
           </div>
 
           {orgUserTagsLoading || createUserTagLoading ? (
@@ -400,7 +401,29 @@ function OrganizationTags(): JSX.Element {
                         </Stack>
                       ),
                     }}
-                    sx={dataGridStyle}
+                    sx={{
+                      borderRadius: '20px',
+                      backgroundColor: '#EAEBEF',
+                      '& .MuiDataGrid-row': {
+                        backgroundColor: '#eff1f7',
+                        '&:focus-within': {
+                          // outline: '2px solid #000',
+                          outlineOffset: '-2px',
+                        },
+                      },
+                      '& .MuiDataGrid-row:hover': {
+                        backgroundColor: '#EAEBEF',
+                        boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+                      },
+                      '& .MuiDataGrid-row.Mui-hovered': {
+                        backgroundColor: '#EAEBEF',
+                        boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+                      },
+                      '& .MuiDataGrid-cell:focus': {
+                        // outline: '2px solid #000',
+                        outlineOffset: '-2px',
+                      },
+                    }}
                     getRowClassName={() => `${styles.rowBackground}`}
                     autoHeight
                     rowHeight={65}
@@ -427,11 +450,11 @@ function OrganizationTags(): JSX.Element {
         centered
       >
         <Modal.Header
-          className="bg-primary"
+          className={styles.tableHeader}
           data-testid="modalOrganizationHeader"
           closeButton
         >
-          <Modal.Title className="text-white">{t('tagDetails')}</Modal.Title>
+          <Modal.Title>{t('tagDetails')}</Modal.Title>
         </Modal.Header>
         <Form onSubmitCapture={createTag}>
           <Modal.Body>
@@ -456,6 +479,7 @@ function OrganizationTags(): JSX.Element {
               variant="secondary"
               onClick={(): void => hideCreateTagModal()}
               data-testid="closeCreateTagModal"
+              className={styles.closeButton}
             >
               {tCommon('cancel')}
             </Button>
@@ -463,6 +487,7 @@ function OrganizationTags(): JSX.Element {
               type="submit"
               value="invite"
               data-testid="createTagSubmitBtn"
+              className={styles.addButton}
             >
               {tCommon('create')}
             </Button>
diff --git a/src/screens/SubTags/SubTags.tsx b/src/screens/SubTags/SubTags.tsx
index 063ce9f028..930232aaca 100644
--- a/src/screens/SubTags/SubTags.tsx
+++ b/src/screens/SubTags/SubTags.tsx
@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from '@apollo/client';
-import { WarningAmberRounded } from '@mui/icons-material';
+import { Search, WarningAmberRounded } from '@mui/icons-material';
 import SortIcon from '@mui/icons-material/Sort';
 import Loader from 'components/Loader/Loader';
 import IconComponent from 'components/IconComponent/IconComponent';
@@ -14,7 +14,7 @@ import Row from 'react-bootstrap/Row';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import type { InterfaceQueryUserTagChildTags } from 'utils/interfaces';
-import styles from './SubTags.module.css';
+import styles from '../../style/app.module.css';
 import { DataGrid } from '@mui/x-data-grid';
 import type {
   InterfaceOrganizationSubTagsQuery,
@@ -278,66 +278,73 @@ function SubTags(): JSX.Element {
 
   return (
     <>
-      <Row className={styles.head}>
-        <div className={styles.mainpageright}>
-          <div className={styles.btnsContainer}>
-            <div className={styles.input}>
-              <i className="fa fa-search position-absolute text-body-tertiary end-0 top-50 translate-middle" />
+      <Row>
+        <div>
+          <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+            <div className={`${styles.input} mb-1`}>
               <Form.Control
                 type="text"
                 id="tagName"
-                className="bg-white"
+                className={`${styles.inputField} `}
                 placeholder={tCommon('searchByName')}
                 onChange={(e) => setTagSearchName(e.target.value.trim())}
                 data-testid="searchByName"
                 autoComplete="off"
               />
-            </div>
-            <div className={styles.btnsBlock}>
-              <Dropdown
-                aria-expanded="false"
-                title="Sort Tag"
-                data-testid="sort"
-              >
-                <Dropdown.Toggle
-                  variant="outline-success"
-                  data-testid="sortTags"
-                >
-                  <SortIcon className={'me-1'} />
-                  {tagSortOrder === 'DESCENDING'
-                    ? tCommon('Latest')
-                    : tCommon('Oldest')}
-                </Dropdown.Toggle>
-                <Dropdown.Menu>
-                  <Dropdown.Item
-                    data-testid="latest"
-                    onClick={() => setTagSortOrder('DESCENDING')}
-                  >
-                    {tCommon('Latest')}
-                  </Dropdown.Item>
-                  <Dropdown.Item
-                    data-testid="oldest"
-                    onClick={() => setTagSortOrder('ASCENDING')}
-                  >
-                    {tCommon('Oldest')}
-                  </Dropdown.Item>
-                </Dropdown.Menu>
-              </Dropdown>
-
               <Button
-                variant="success"
-                onClick={() => redirectToManageTag(parentTagId as string)}
-                data-testid="manageCurrentTagBtn"
-                className="mx-4"
+                tabIndex={-1}
+                className={styles.searchButton}
+                data-testid="searchBtn"
               >
-                {`${t('manageTag')} ${subTagsData?.getChildTags.name}`}
+                <Search />
               </Button>
             </div>
+
+            <Dropdown
+              title="Sort Tag"
+              // className={styles.dropdown}
+              // className="ms-4 mb-4"
+              data-testid="sort"
+            >
+              <Dropdown.Toggle
+                data-testid="sortTags"
+                // className="color-red"
+                className={styles.dropdown}
+              >
+                <SortIcon className={'me-1'} />
+                {tagSortOrder === 'DESCENDING'
+                  ? tCommon('Latest')
+                  : tCommon('Oldest')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  data-testid="latest"
+                  onClick={() => setTagSortOrder('DESCENDING')}
+                >
+                  {tCommon('Latest')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  data-testid="oldest"
+                  onClick={() => setTagSortOrder('ASCENDING')}
+                >
+                  {tCommon('Oldest')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+
+            <Button
+              onClick={() => redirectToManageTag(parentTagId as string)}
+              data-testid="manageCurrentTagBtn"
+              className={`${styles.createButton} mb-3`}
+            >
+              {`${t('manageTag')} ${subTagsData?.getChildTags.name}`}
+            </Button>
+
             <Button
               variant="success"
               onClick={showAddSubTagModal}
               data-testid="addSubTagBtn"
-              className="ms-auto"
+              className={`${styles.createButton} mb-3`}
             >
               <i className={'fa fa-plus me-2'} />
               {t('addChildTag')}
@@ -347,7 +354,7 @@ function SubTags(): JSX.Element {
           {subTagsLoading || createUserTagLoading ? (
             <Loader />
           ) : (
-            <div className="mb-4">
+            <div className="mb-2 ">
               <div className="bg-white light border rounded-top mb-0 py-2 d-flex align-items-center">
                 <div className="ms-3 my-1">
                   <IconComponent name="Tag" />
@@ -365,7 +372,7 @@ function SubTags(): JSX.Element {
                 {orgUserTagAncestors?.map((tag, index) => (
                   <div
                     key={index}
-                    className={`ms-2 my-1 ${tag._id === parentTagId ? `fs-4 fw-semibold text-secondary` : `${styles.tagsBreadCrumbs} fs-6`}`}
+                    className={`ms-2  ${tag._id === parentTagId ? `fs-4 fw-semibold text-secondary` : `${styles.tagsBreadCrumbs} fs-6`}`}
                     onClick={() => redirectToSubTags(tag._id as string)}
                     data-testid="redirectToSubTags"
                   >
@@ -436,11 +443,11 @@ function SubTags(): JSX.Element {
         centered
       >
         <Modal.Header
-          className="bg-primary"
+          className={styles.tableHeader}
           data-testid="tagHeader"
           closeButton
         >
-          <Modal.Title className="text-white">{t('tagDetails')}</Modal.Title>
+          <Modal.Title>{t('tagDetails')}</Modal.Title>
         </Modal.Header>
         <Form onSubmitCapture={addSubTag}>
           <Modal.Body>
@@ -465,10 +472,16 @@ function SubTags(): JSX.Element {
               variant="secondary"
               onClick={(): void => hideAddSubTagModal()}
               data-testid="addSubTagModalCloseBtn"
+              className={styles.closeButton}
             >
               {tCommon('cancel')}
             </Button>
-            <Button type="submit" value="add" data-testid="addSubTagSubmitBtn">
+            <Button
+              type="submit"
+              value="add"
+              data-testid="addSubTagSubmitBtn"
+              className={styles.addButton}
+            >
               {tCommon('create')}
             </Button>
           </Modal.Footer>
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 3196965193..45449b7bf1 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -1,6 +1,8 @@
 :root {
   --dropdown-border-color: #555555;
   --dropdown-text-color: #555555;
+  --dropdown-hover-color: #eff1f7;
+  --grey-bg-color: #eaebef;
   --subtle-blue-grey: #7c9beb;
   --subtle-blue-grey-hover: #5f7e91;
   --modal-width: 670px;
@@ -18,14 +20,31 @@
   --table-head-color: white;
   --table-header-color: var(--bs-greyish-black, black);
   --table-head-radius: 20px;
+  --table-bg-color: #eaebef;
+  --tablerow-bg-color: #eff1f7;
   --row-background: var(--bs-white, white);
   --font-size-header: 16px;
 }
 
+.noOutline input {
+  outline: none;
+}
+
+.noOutline:is(:hover, :focus, :active, :focus-visible, .show) {
+  outline: none !important;
+}
+
 .closeButton {
   color: var(--delete-button-color);
   margin-right: 5px;
   background-color: var(--delete-button-bg);
+  border: white;
+}
+
+.closeButton:hover {
+  color: var(--delete-button-bg) !important;
+  background-color: var(--delete-button-color) !important;
+  border: white;
 }
 
 .modalContent {
@@ -68,7 +87,7 @@
 .dropdownItem:hover,
 .dropdownItem:focus,
 .dropdownItem:active {
-  background-color: white !important;
+  background-color: var(--dropdown-hover-color) !important;
   color: var(--dropdown-text-color) !important;
   outline: none !important;
   box-shadow: none !important;
@@ -76,6 +95,7 @@
 
 .input {
   flex: 1;
+
   position: relative;
 }
 
@@ -117,6 +137,26 @@
   gap: 8px;
 }
 
+.actionItemDeleteButton {
+  background-color: var(--delete-button-bg);
+  color: var(--delete-button-color);
+  border: none;
+}
+
+.createButton {
+  background-color: var(--grey-bg-color) !important;
+  color: black !important;
+  margin-top: 10px;
+  margin-left: 5px;
+  border: 1px solid var(--dropdown-border-color);
+}
+
+.createButton:hover {
+  background-color: var(--grey-bg-color) !important;
+  color: black !important;
+  border: 1px solid var(--dropdown-border-color) !important;
+}
+
 .visuallyHidden {
   position: absolute;
   width: 1px;
@@ -150,7 +190,27 @@
   margin-bottom: 10px;
   background-color: var(--search-button-bg);
   border-color: var(--search-button-border);
+  position: absolute;
+  z-index: 10;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
+
+.addButton {
+  margin-bottom: 10px;
+  background-color: var(--search-button-bg);
+  border-color: var(--grey-bg-color);
+  color: #555555;
+}
+
+.addButton:hover {
+  background-color: #286fe0;
+  border-color: var(--search-button-border);
+}
+
 .yesButton {
   background-color: var(--search-button-bg);
   border-color: var(--search-button-border);
@@ -160,9 +220,23 @@
   color: var(--dropdown-text-color);
 }
 
+.infoButton {
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
+  color: var(--dropdown-text-color);
+  margin-right: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.infoButton:hover {
+  background-color: #286fe0;
+  border-color: var(--search-button-border);
+}
+
 .TableImage {
   object-fit: cover;
-  margin-top: 15px !important;
+  /* margin-top: px !important; */
+  margin-right: 5px;
   width: var(--table-image-size) !important;
   height: var(--table-image-size) !important;
   border-radius: 100% !important;
@@ -193,6 +267,223 @@
   font-size: var(--font-size-header);
 }
 
+.orgUserTagsScrollableDiv {
+  scrollbar-width: auto;
+  scrollbar-color: var(--bs-gray-400) var(--bs-white);
+
+  max-height: calc(100vh - 18rem);
+  overflow: auto;
+  position: sticky;
+}
+
+.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;
+}
+
+.subTagsLink {
+  color: var(--subtle-blue-grey);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.subTagsLink i {
+  visibility: hidden;
+}
+
+.subTagsLink:hover {
+  color: var(--subtle-blue-grey-hover);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.subTagsLink:hover i {
+  visibility: visible;
+}
+
+.tagsBreadCrumbs {
+  color: var(--bs-gray);
+  cursor: pointer;
+}
+
+.orgUserTagsScrollableDiv {
+  scrollbar-width: auto;
+  scrollbar-color: var(--bs-gray-400) var(--bs-white);
+
+  max-height: calc(100vh - 18rem);
+  overflow: auto;
+  position: sticky;
+}
+
+/* .checkboxButton{
+  background-color: transparent;
+}
+
+.checkboxButton:checked{
+  background-color: var(--subtle-blue-grey);
+  color:white
+} */
+
+input[type='checkbox']:checked + label {
+  background-color: var(--subtle-blue-grey) !important;
+}
+
+input[type='radio']:checked + label:hover {
+  color: black !important;
+}
+
+.actionItemsContainer {
+  height: 90vh;
+}
+
+.actionItemModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.datediv {
+  display: flex;
+  flex-direction: row;
+}
+
+.datebox {
+  width: 90%;
+  border-radius: 7px;
+  outline: none;
+  box-shadow: none;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background-color: var(--bs-gray-500);
+  margin: 1rem;
+}
+
+.iconContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+.icon {
+  margin: 1px;
+}
+
+.message {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.preview {
+  display: flex;
+  flex-direction: row;
+  font-weight: 900;
+  font-size: 16px;
+  color: rgb(80, 80, 80);
+}
+
+.rankings {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  width: 50px;
+}
+
+.toggleGroup {
+  width: 50%;
+  min-width: 20rem;
+  margin: 0.5rem 0rem;
+}
+
+.toggleBtn {
+  padding: 0rem;
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.toggleBtn:hover {
+  color: var(--bs-primary) !important;
+}
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainer .btnsBlock div {
+    flex: 1;
+  }
+
+  .btnsContainer .btnsBlock div[title='Sort organizations'] {
+    margin-right: 0.5rem;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+
+@media (max-width: 1120px) {
+  .contract {
+    padding-left: calc(250px + 2rem + 1.5rem);
+  }
+
+  .listBox .itemCard {
+    width: 100%;
+  }
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-right: 1.5rem;
+  }
+}
+
 @-webkit-keyframes load8 {
   0% {
     -webkit-transform: rotate(0deg);
diff --git a/src/utils/organizationTagsUtils.ts b/src/utils/organizationTagsUtils.ts
index 99faca3bf2..56654a3abb 100644
--- a/src/utils/organizationTagsUtils.ts
+++ b/src/utils/organizationTagsUtils.ts
@@ -30,7 +30,7 @@ export const dataGridStyle = {
   },
   '& .MuiDataGrid-topContainer': {
     position: 'fixed',
-    top: 259,
+    top: 290,
     zIndex: 1,
   },
   '& .MuiDataGrid-virtualScrollerContent': {