From 4548d9dc626cbe600ce35ca9e3534726cc693a95 Mon Sep 17 00:00:00 2001
From: Pranav Nathe <93403830+pranavnathe@users.noreply.github.com>
Date: Sun, 5 Jan 2025 22:24:58 +0530
Subject: [PATCH] #2883 Refactor CSS files in miscellaneous components (#3116)

* src/components/UpdateSession/UpdateSession.css

* src/components/UserListCard/UserListCard.module.css

* Refactor src/components/UserPasswordUpdate/UserPasswordUpdate.module.css

* src/components/Venues/VenueModal.module.css

* src/components/EventCalendar/YearlyEventCalender.module.css

* Refactor src/components/AgendaItems/AgendaItemsContainer.module.css

* Refactor src/components/AddOn/core/AddOnStore/AddOnStore.module.css

* Refactor src/components/Advertisements/Advertisements.module.css

* Refactor src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css

* Refactor src/components/EventCalendar/EventCalendar.module.css

* Refactor src/components/EventListCard/EventListCard.module.css

* Refactor CSS OrgPostCard.module.css && fixed eslint destructuring props error

* Refactor src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.module.css

* CSS fix

* consolidating button styles in greenregbtnUserPasswordUpdate

* CSS bugfixes

* Replaced hardcoded color values to CSS variables

* removed role from .calendar__weekdays and .calendar__days

* refactor: extract DeletePostModal from OrgPostCard to fix file-length test

* TSDoc added for src/components/OrgPostCard/DeletePostModal.tsx

* removed duplicate cursor property
---
 .../core/AddOnStore/AddOnStore.module.css     |   72 -
 .../AddOn/core/AddOnStore/AddOnStore.tsx      |   35 +-
 .../Advertisements/Advertisements.module.css  |   47 -
 .../Advertisements/Advertisements.tsx         |   27 +-
 .../AdvertisementRegister.module.css          |   57 -
 .../AdvertisementRegister.tsx                 |    9 +-
 .../AgendaItemsContainer.module.css           |  230 ---
 .../AgendaItems/AgendaItemsContainer.tsx      |    4 +-
 .../AgendaItems/AgendaItemsCreateModal.tsx    |    8 +-
 .../AgendaItems/AgendaItemsDeleteModal.tsx    |    2 +-
 .../AgendaItems/AgendaItemsPreviewModal.tsx   |    4 +-
 .../AgendaItems/AgendaItemsUpdateModal.tsx    |    8 +-
 .../EventCalendar/EventCalendar.module.css    |  572 -------
 .../EventCalendar/EventCalendar.tsx           |    6 +-
 src/components/EventCalendar/EventHeader.tsx  |   15 +-
 .../YearlyEventCalender.module.css            |  354 ----
 .../EventCalendar/YearlyEventCalender.tsx     |   16 +-
 .../EventListCard/EventListCard.module.css    |  223 ---
 .../EventListCard/EventListCard.tsx           |    6 +-
 .../EventListCard/EventListCardModals.tsx     |   26 +-
 .../OrgPostCard/DeletePostModal.spec.tsx      |   77 +
 .../OrgPostCard/DeletePostModal.tsx           |   65 +
 .../OrgPostCard/OrgPostCard.module.css        |  278 ---
 src/components/OrgPostCard/OrgPostCard.tsx    |  191 +--
 .../ActionItemCategories/CategoryModal.tsx    |    2 +-
 .../OrgActionItemCategories.module.css        |  138 --
 .../OrgActionItemCategories.tsx               |   14 +-
 .../UpdateSession/UpdateSession.css           |   96 --
 .../UpdateSession/UpdateSession.tsx           |   26 +-
 .../UserListCard/UserListCard.module.css      |   74 -
 src/components/UserListCard/UserListCard.tsx  |    7 +-
 .../UserPasswordUpdate.module.css             |   97 --
 .../UserPasswordUpdate/UserPasswordUpdate.tsx |    8 +-
 src/components/Venues/VenueModal.module.css   |   53 -
 src/components/Venues/VenueModal.tsx          |    2 +-
 src/style/app.module.css                      | 1521 +++++++++++++++++
 36 files changed, 1862 insertions(+), 2508 deletions(-)
 delete mode 100644 src/components/AddOn/core/AddOnStore/AddOnStore.module.css
 delete mode 100644 src/components/Advertisements/Advertisements.module.css
 delete mode 100644 src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css
 delete mode 100644 src/components/AgendaItems/AgendaItemsContainer.module.css
 delete mode 100644 src/components/EventCalendar/EventCalendar.module.css
 delete mode 100644 src/components/EventCalendar/YearlyEventCalender.module.css
 delete mode 100644 src/components/EventListCard/EventListCard.module.css
 create mode 100644 src/components/OrgPostCard/DeletePostModal.spec.tsx
 create mode 100644 src/components/OrgPostCard/DeletePostModal.tsx
 delete mode 100644 src/components/OrgPostCard/OrgPostCard.module.css
 delete mode 100644 src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.module.css
 delete mode 100644 src/components/UpdateSession/UpdateSession.css
 delete mode 100644 src/components/UserListCard/UserListCard.module.css
 delete mode 100644 src/components/UserPasswordUpdate/UserPasswordUpdate.module.css
 delete mode 100644 src/components/Venues/VenueModal.module.css

diff --git a/src/components/AddOn/core/AddOnStore/AddOnStore.module.css b/src/components/AddOn/core/AddOnStore/AddOnStore.module.css
deleted file mode 100644
index 9f5bb6c868..0000000000
--- a/src/components/AddOn/core/AddOnStore/AddOnStore.module.css
+++ /dev/null
@@ -1,72 +0,0 @@
-.container {
-  display: flex;
-}
-
-.logintitle {
-  color: #707070;
-  font-weight: 600;
-  font-size: 20px;
-  margin-bottom: 30px;
-  padding-bottom: 5px;
-  border-bottom: 3px solid #31bb6b;
-  width: 15%;
-}
-.input {
-  display: flex;
-  position: relative;
-  width: 560px;
-}
-/* .actioninput {
-  text-decoration: none;
-  margin-bottom: 50px;
-  border-color: #e8e5e5;
-  width: 80%;
-  border-radius: 7px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-right: 10px;
-  padding-left: 10px;
-  box-shadow: none;
-} */
-.actioninput {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  background-color: white;
-  box-shadow: 0 1px 1px #31bb6b;
-}
-.inputField > button {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.actionradio input {
-  width: fit-content;
-  margin: inherit;
-}
-.cardGridItem {
-  width: 38vw;
-}
-.justifysp {
-  display: grid;
-  width: 100%;
-  justify-content: space-between;
-  align-items: baseline;
-  grid-template-rows: auto;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 0.8rem 0.4rem;
-}
-
-@media screen and (max-width: 600px) {
-  .cardGridItem {
-    width: 100%;
-  }
-  .justifysp {
-    display: grid;
-    width: 100%;
-    justify-content: center;
-    align-items: start;
-    grid-template-rows: auto;
-    grid-template-columns: 1fr;
-    grid-gap: 0.8rem 0.4rem;
-  }
-}
diff --git a/src/components/AddOn/core/AddOnStore/AddOnStore.tsx b/src/components/AddOn/core/AddOnStore/AddOnStore.tsx
index 90a32d9bb3..3da19f8a51 100644
--- a/src/components/AddOn/core/AddOnStore/AddOnStore.tsx
+++ b/src/components/AddOn/core/AddOnStore/AddOnStore.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import styles from './AddOnStore.module.css';
+import styles from '../../../../style/app.module.css';
 import AddOnEntry from '../AddOnEntry/AddOnEntry';
 import { useQuery } from '@apollo/client';
 import { PLUGIN_GET } from 'GraphQl/Queries/Queries'; // PLUGIN_LIST
@@ -122,36 +122,19 @@ function addOnStore(): JSX.Element {
 
   return (
     <>
-      <Row
-        className=""
-        style={{
-          backgroundColor: 'white',
-          margin: '2px',
-          padding: '10px',
-          borderRadius: '20px',
-        }}
-      >
-        <Col
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <div className={styles.input}>
+      <Row className={styles.containerAddOnStore}>
+        <Col className={styles.colAddOnStore}>
+          <div className={styles.inputAddOnStore}>
             <Form.Control
               type="name"
               id="searchname"
-              className={styles.actioninput}
+              className={styles.inputField}
               placeholder={t('searchName')}
               autoComplete="off"
               required
               onChange={(e): void => setSearchText(e.target.value)}
             />
-            <Button
-              className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center `}
-              style={{ marginBottom: '10px' }}
-            >
+            <Button className={styles.searchButton}>
               <Search />
             </Button>
           </div>
@@ -199,7 +182,7 @@ function addOnStore(): JSX.Element {
               title={t('available')}
               style={{ backgroundColor: 'white' }}
             >
-              <div className={styles.justifysp}>
+              <div className={styles.justifyspAddOnStore}>
                 {(() => {
                   const filteredPlugins = filterPlugins(
                     data?.getPlugins || [],
@@ -211,7 +194,7 @@ function addOnStore(): JSX.Element {
                   }
 
                   return (
-                    <div className={styles.justifysp}>
+                    <div className={styles.justifyspAddOnStore}>
                       {filteredPlugins.map((plug, i) => (
                         <div className={styles.cardGridItem} key={i}>
                           <AddOnEntry
@@ -236,7 +219,7 @@ function addOnStore(): JSX.Element {
               title={t('install')}
               data-testid="installed-tab"
             >
-              <div className={styles.justifysp}>
+              <div className={styles.justifyspAddOnStore}>
                 {(() => {
                   const installedPlugins = (data?.getPlugins || []).filter(
                     (plugin) => !plugin.uninstalledOrgs.includes(orgId ?? ''),
diff --git a/src/components/Advertisements/Advertisements.module.css b/src/components/Advertisements/Advertisements.module.css
deleted file mode 100644
index 6d9eb7f612..0000000000
--- a/src/components/Advertisements/Advertisements.module.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.container {
-  display: flex;
-}
-.listBox {
-  display: grid;
-  width: 100%;
-  grid-template-rows: auto;
-  grid-template-columns: repeat(6, 1fr);
-  grid-gap: 0.8rem 0.4rem;
-}
-
-.logintitle {
-  color: #707070;
-  font-weight: 600;
-  font-size: 20px;
-  margin-bottom: 30px;
-  padding-bottom: 5px;
-  border-bottom: 3px solid #31bb6b;
-  width: 15%;
-}
-.input {
-  display: flex;
-  position: relative;
-  width: 560px;
-}
-.justifysp {
-  display: grid;
-  width: 100%;
-  margin-top: 30px;
-}
-.actioninput {
-  text-decoration: none;
-  /* margin-bottom: 50px; */
-  border-color: #e8e5e5;
-  background-color: white;
-  border-radius: 7px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-right: 10px;
-  padding-left: 10px;
-  box-shadow: none;
-}
-
-.actionradio input {
-  width: fit-content;
-  margin: inherit;
-}
diff --git a/src/components/Advertisements/Advertisements.tsx b/src/components/Advertisements/Advertisements.tsx
index 5f0e2b2033..f428b569a0 100644
--- a/src/components/Advertisements/Advertisements.tsx
+++ b/src/components/Advertisements/Advertisements.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import styles from './Advertisements.module.css';
+import styles from '../../style/app.module.css';
 import { useQuery } from '@apollo/client';
 import { ORGANIZATION_ADVERTISEMENT_LIST } from 'GraphQl/Queries/Queries';
 import { Button, Col, Form, Row, Tab, Tabs } from 'react-bootstrap';
@@ -79,29 +79,20 @@ export default function advertisements(): JSX.Element {
   return (
     <>
       <Row data-testid="advertisements">
-        <Col col={8} style={{ backgroundColor: 'white', borderRadius: '20px' }}>
-          <div className={styles.justifysp}>
-            <Col
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                padding: '10px',
-              }}
-            >
-              <div className={styles.input}>
+        <Col col={8} className={styles.containerAdvertisements}>
+          <div className={styles.justifyspAdvertisements}>
+            <Col className={styles.colAdvertisements}>
+              <div className={styles.inputAdvertisements}>
                 <Form.Control
                   type="name"
                   id="searchname"
-                  className={styles.actioninput}
+                  className={styles.inputField}
                   placeholder={'Search..'}
                   autoComplete="off"
                   required
                   // onChange={(e): void => setSearchText("search")}
                 />
-                <Button
-                  className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center `}
-                >
+                <Button className={styles.searchButton}>
                   <Search />
                 </Button>
               </div>
@@ -145,7 +136,7 @@ export default function advertisements(): JSX.Element {
                     orgAdvertisementListData?.organizations[0].advertisements
                       .pageInfo.hasNextPage ?? false
                   }
-                  className={styles.listBox}
+                  className={styles.listBoxAdvertisements}
                   data-testid="organizations-list"
                   endMessage={
                     advertisements.filter(
@@ -221,7 +212,7 @@ export default function advertisements(): JSX.Element {
                     orgAdvertisementListData?.organizations[0].advertisements
                       .pageInfo.hasNextPage ?? false
                   }
-                  className={styles.listBox}
+                  className={styles.listBoxAdvertisements}
                   data-testid="organizations-list"
                   endMessage={
                     advertisements.filter(
diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css
deleted file mode 100644
index 9d009cf021..0000000000
--- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.modalbtn {
-  margin-top: 1rem;
-  display: flex !important;
-  margin-left: auto;
-  align-items: center;
-}
-
-.modalbtn i,
-.button i {
-  height: min-content;
-  margin-right: 4px;
-}
-
-.preview {
-  display: flex;
-  position: relative;
-  width: 100%;
-  margin-top: 10px;
-  justify-content: center;
-}
-.preview img {
-  width: 400px;
-  height: auto;
-}
-.preview video {
-  width: 400px;
-  height: auto;
-}
-
-.closeButton {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  background: transparent;
-  transform: scale(1.2);
-  cursor: pointer;
-  border: none;
-  color: #707070;
-  font-weight: 600;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.button {
-  min-width: 102px;
-}
-
-.editHeader {
-  background-color: #31bb6b;
-  color: white;
-}
-
-.link_check {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-}
diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx
index c347ae8959..e329ce6855 100644
--- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx
+++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx
@@ -314,7 +314,10 @@ function advertisementRegister({
                 }}
               />
               {formState.advertisementMedia && (
-                <div className={styles.preview} data-testid="mediaPreview">
+                <div
+                  className={styles.previewAdvertisementRegister}
+                  data-testid="mediaPreview"
+                >
                   {formState.advertisementMedia.includes('video') ? (
                     <video
                       muted
@@ -332,7 +335,7 @@ function advertisementRegister({
                     <img src={formState.advertisementMedia} />
                   )}
                   <button
-                    className={styles.closeButton}
+                    className={styles.closeButtonAdvertisementRegister}
                     onClick={(e): void => {
                       e.preventDefault();
                       setFormState({
@@ -405,7 +408,7 @@ function advertisementRegister({
           <Button
             variant="secondary"
             onClick={handleClose}
-            className={styles.closeButton}
+            className={styles.closeButtonAdvertisementRegister}
             data-testid="addonclose"
           >
             {tCommon('close')}
diff --git a/src/components/AgendaItems/AgendaItemsContainer.module.css b/src/components/AgendaItems/AgendaItemsContainer.module.css
deleted file mode 100644
index f254e7aad7..0000000000
--- a/src/components/AgendaItems/AgendaItemsContainer.module.css
+++ /dev/null
@@ -1,230 +0,0 @@
-.createModal {
-  margin-top: 20vh;
-  margin-left: 13vw;
-  max-width: 80vw;
-}
-
-.titlemodal {
-  color: var(--bs-gray-600);
-  font-weight: 600;
-  font-size: 20px;
-  margin-bottom: 20px;
-  padding-bottom: 5px;
-  border-bottom: 3px solid var(--bs-primary);
-  width: 65%;
-}
-
-.agendaItemsOptionsButton {
-  width: 24px;
-  height: 24px;
-}
-
-.agendaItemModal {
-  max-width: 80vw;
-  margin-top: 2vh;
-  margin-left: 13vw;
-}
-
-.iconContainer {
-  display: flex;
-  justify-content: flex-end;
-}
-.icon {
-  margin: 1px;
-}
-
-.errorIcon {
-  transform: scale(1.5);
-  color: var(--bs-danger);
-  margin-bottom: 1rem;
-}
-
-.greenregbtn {
-  margin: 1rem 0 0;
-  margin-top: 15px;
-  border: 1px solid var(--bs-gray-300);
-  box-shadow: 0 2px 2px var(--bs-gray-300);
-  padding: 10px 10px;
-  border-radius: 5px;
-  background-color: var(--bs-primary);
-  width: 100%;
-  font-size: 16px;
-  color: var(--bs-white);
-  outline: none;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s;
-  width: 100%;
-}
-
-.preview {
-  display: flex;
-  flex-direction: row;
-  font-weight: 900;
-  font-size: 16px;
-  color: rgb(80, 80, 80);
-}
-
-.view {
-  margin-left: 2%;
-  font-weight: 600;
-  font-size: 16px;
-  color: var(--bs-gray-600);
-}
-
-.previewFile {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  margin-top: 10px;
-}
-
-.previewFile img,
-.previewFile video {
-  width: 100%;
-  max-width: 400px;
-  height: auto;
-  margin-bottom: 10px;
-}
-
-.attachmentPreview {
-  position: relative;
-  width: 100%;
-}
-
-.closeButtonFile {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: transparent;
-  transform: scale(1.2);
-  cursor: pointer;
-  border: none;
-  color: #707070;
-  font-weight: 600;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.tableHeader {
-  background-color: var(--bs-primary);
-  color: var(--bs-white);
-  font-size: 16px;
-}
-
-.noOutline input {
-  outline: none;
-}
-
-.categoryContainer {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  justify-content: center;
-}
-
-.categoryChip {
-  display: inline-flex;
-  align-items: center;
-  background-color: #e0e0e0;
-  border-radius: 16px;
-  padding: 0 12px;
-  font-size: 14px;
-  height: 32px;
-  margin: 5px;
-}
-
-.urlListItem {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 5px 0;
-}
-
-.urlIcon {
-  margin-right: 10px;
-}
-
-.deleteButton {
-  margin-left: auto;
-  padding: 2px 5px;
-}
-
-.urlListItem a {
-  text-decoration: none;
-  color: inherit;
-}
-
-.urlListItem a:hover {
-  text-decoration: underline;
-}
-
-.agendaItemRow {
-  border: 1px solid #dee2e6;
-  border-radius: 4px;
-  transition: box-shadow 0.2s ease;
-  background-color: #fff;
-}
-.agendaItemRow:hover {
-  background-color: #f0f0f0;
-}
-
-.dragging {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-  z-index: 1000;
-  background-color: #f0f0f0;
-}
-
-.droppable {
-  background-color: #f9f9f9; /* Background color of droppable area */
-}
-
-.droppableDraggingOver {
-  background-color: #e6f7ff; /* Background color of droppable area while dragging over */
-}
-
-.tableHead {
-  background-color: #31bb6b !important;
-  color: white;
-  border-radius: 20px 20px 0px 0px !important;
-  padding: 20px;
-}
-
-@media (max-width: 768px) {
-  .createModal,
-  .agendaItemModal {
-    margin: 10vh auto;
-    max-width: 90%;
-  }
-
-  .titlemodal {
-    width: 90%;
-  }
-
-  .greenregbtn {
-    width: 90%;
-  }
-
-  /* Add more specific styles for smaller screens as needed */
-}
-
-@media (max-width: 576px) {
-  .createModal,
-  .agendaItemModal {
-    margin: 5vh auto;
-    max-width: 95%;
-  }
-
-  .titlemodal {
-    width: 100%;
-  }
-
-  .greenregbtn {
-    width: 100%;
-  }
-
-  /* Additional specific styles for even smaller screens */
-}
diff --git a/src/components/AgendaItems/AgendaItemsContainer.tsx b/src/components/AgendaItems/AgendaItemsContainer.tsx
index 4e50cb5fe8..d5c6ef003a 100644
--- a/src/components/AgendaItems/AgendaItemsContainer.tsx
+++ b/src/components/AgendaItems/AgendaItemsContainer.tsx
@@ -15,7 +15,7 @@ import type {
   InterfaceAgendaItemInfo,
   InterfaceAgendaItemCategoryInfo,
 } from 'utils/interfaces';
-import styles from './AgendaItemsContainer.module.css';
+import styles from '../../style/app.module.css';
 
 import AgendaItemsPreviewModal from 'components/AgendaItems/AgendaItemsPreviewModal';
 import AgendaItemsDeleteModal from 'components/AgendaItems/AgendaItemsDeleteModal';
@@ -258,7 +258,7 @@ function AgendaItemsContainer({
           className={` shadow-sm ${agendaItemConnection === 'Event' ? 'rounded-top-4 mx-4' : 'rounded-top-2 mx-0'}`}
         >
           <Row
-            className={`${styles.tableHead} mx-0 border border-light-subtle py-3 ${agendaItemConnection === 'Event' ? 'rounded-top-4' : 'rounded-top-2'}`}
+            className={`${styles.tableHeadAgendaItems} mx-0 border border-light-subtle py-3 ${agendaItemConnection === 'Event' ? 'rounded-top-4' : 'rounded-top-2'}`}
           >
             <Col
               xs={6}
diff --git a/src/components/AgendaItems/AgendaItemsCreateModal.tsx b/src/components/AgendaItems/AgendaItemsCreateModal.tsx
index a37ab329a2..0755852d32 100644
--- a/src/components/AgendaItems/AgendaItemsCreateModal.tsx
+++ b/src/components/AgendaItems/AgendaItemsCreateModal.tsx
@@ -4,7 +4,7 @@ import { Autocomplete, TextField } from '@mui/material';
 
 import { FaLink, FaTrash } from 'react-icons/fa';
 import { toast } from 'react-toastify';
-import styles from './AgendaItemsContainer.module.css';
+import styles from '../../style/app.module.css';
 import type { ChangeEvent } from 'react';
 import type { InterfaceAgendaItemCategoryInfo } from 'utils/interfaces';
 import convertToBase64 from 'utils/convertToBase64';
@@ -151,7 +151,7 @@ const AgendaItemsCreateModal: React.FC<
       onHide={hideCreateModal}
     >
       <Modal.Header>
-        <p className={styles.titlemodal}>{t('agendaItemDetails')}</p>
+        <p className={styles.titlemodalAgendaItems}>{t('agendaItemDetails')}</p>
         <Button
           variant="danger"
           onClick={hideCreateModal}
@@ -260,7 +260,7 @@ const AgendaItemsCreateModal: React.FC<
                 <Button
                   variant="danger"
                   size="sm"
-                  className={styles.deleteButton}
+                  className={styles.deleteButtonAgendaItems}
                   data-testid="deleteUrl"
                   onClick={() => handleRemoveUrl(url)}
                 >
@@ -315,7 +315,7 @@ const AgendaItemsCreateModal: React.FC<
           )}
           <Button
             type="submit"
-            className={styles.greenregbtn}
+            className={styles.greenregbtnAgendaItems}
             value="createAgendaItem"
             data-testid="createAgendaItemFormBtn"
           >
diff --git a/src/components/AgendaItems/AgendaItemsDeleteModal.tsx b/src/components/AgendaItems/AgendaItemsDeleteModal.tsx
index cba3b29446..5d513b743c 100644
--- a/src/components/AgendaItems/AgendaItemsDeleteModal.tsx
+++ b/src/components/AgendaItems/AgendaItemsDeleteModal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Modal, Button } from 'react-bootstrap';
-import styles from './AgendaItemsContainer.module.css';
+import styles from '../../style/app.module.css';
 
 interface InterfaceAgendaItemsDeleteModalProps {
   agendaItemDeleteModalIsOpen: boolean;
diff --git a/src/components/AgendaItems/AgendaItemsPreviewModal.tsx b/src/components/AgendaItems/AgendaItemsPreviewModal.tsx
index 299165656c..d2d72caa33 100644
--- a/src/components/AgendaItems/AgendaItemsPreviewModal.tsx
+++ b/src/components/AgendaItems/AgendaItemsPreviewModal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Modal, Form, Button } from 'react-bootstrap';
-import styles from './AgendaItemsContainer.module.css';
+import styles from '../../style/app.module.css';
 import { FaLink } from 'react-icons/fa';
 
 interface InterfaceFormStateType {
@@ -101,7 +101,7 @@ const AgendaItemsPreviewModal: React.FC<
       onHide={hidePreviewModal}
     >
       <Modal.Header>
-        <p className={styles.titlemodal}>{t('agendaItemDetails')}</p>
+        <p className={styles.titlemodalAgendaItems}>{t('agendaItemDetails')}</p>
         <Button
           onClick={hidePreviewModal}
           data-testid="previewAgendaItemModalCloseBtn"
diff --git a/src/components/AgendaItems/AgendaItemsUpdateModal.tsx b/src/components/AgendaItems/AgendaItemsUpdateModal.tsx
index 7761c912ca..7137ddfc67 100644
--- a/src/components/AgendaItems/AgendaItemsUpdateModal.tsx
+++ b/src/components/AgendaItems/AgendaItemsUpdateModal.tsx
@@ -6,7 +6,7 @@ import { FaLink, FaTrash } from 'react-icons/fa';
 import { toast } from 'react-toastify';
 import convertToBase64 from 'utils/convertToBase64';
 
-import styles from './AgendaItemsContainer.module.css';
+import styles from '../../style/app.module.css';
 import type { InterfaceAgendaItemCategoryInfo } from 'utils/interfaces';
 
 interface InterfaceFormStateType {
@@ -157,7 +157,7 @@ const AgendaItemsUpdateModal: React.FC<
       onHide={hideUpdateModal}
     >
       <Modal.Header>
-        <p className={styles.titlemodal}>{t('updateAgendaItem')}</p>
+        <p className={styles.titlemodalAgendaItems}>{t('updateAgendaItem')}</p>
         <Button
           onClick={hideUpdateModal}
           data-testid="updateAgendaItemModalCloseBtn"
@@ -266,7 +266,7 @@ const AgendaItemsUpdateModal: React.FC<
                   variant="danger"
                   size="sm"
                   data-testid="deleteUrl"
-                  className={styles.deleteButton}
+                  className={styles.deleteButtonAgendaItems}
                   onClick={() => handleRemoveUrl(url)}
                 >
                   <FaTrash />
@@ -320,7 +320,7 @@ const AgendaItemsUpdateModal: React.FC<
           )}
           <Button
             type="submit"
-            className={styles.greenregbtn}
+            className={styles.greenregbtnAgendaItems}
             data-testid="updateAgendaItemBtn"
           >
             {t('update')}
diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css
deleted file mode 100644
index 607d750f85..0000000000
--- a/src/components/EventCalendar/EventCalendar.module.css
+++ /dev/null
@@ -1,572 +0,0 @@
-.calendar {
-  font-family: sans-serif;
-  font-size: 1.2rem;
-  margin-bottom: 20px;
-  background: var(--grey-bg-color);
-  border-radius: 10px;
-  padding: 5px;
-}
-
-.calendar__header {
-  display: flex;
-  margin-bottom: 2rem;
-  align-items: center;
-  margin: 0px 10px 0px 10px;
-}
-
-.input {
-  flex: 1;
-  position: relative;
-}
-
-.calendar__header_month {
-  margin: 0.5rem;
-  color: #707070;
-  font-weight: 800;
-  font-size: 55px;
-  display: flex;
-  gap: 23px;
-  flex-direction: row;
-}
-
-.calendar__header_month div {
-  font-weight: 400;
-  color: black;
-  font-family: Outfit;
-}
-
-.searchbutton {
-  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;
-}
-
-.searchbutton:hover {
-  background-color: var(--search-button-bg);
-  border-color: var(--search-button-border);
-}
-
-.space {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
-
-.button {
-  border-radius: 100px;
-  color: #707070;
-  background-color: rgba(194, 247, 182, 0);
-  font-weight: bold;
-  border: 0px;
-  font-size: 20px;
-}
-
-.calendar__weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  background-color: black;
-  font-family: Outfit;
-  height: 60px;
-}
-
-.calendar__scroll {
-  height: 80vh;
-  padding: 10px;
-}
-
-.weekday {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: white;
-  font-weight: 600;
-}
-
-.calendar__days {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  grid-template-rows: repeat(6, 1fr);
-}
-
-.calendar_hour_text_container {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  border-right: 1px solid #8d8d8d55;
-  width: 40px;
-}
-
-.calendar_hour_text {
-  top: -10px;
-  left: -5px;
-  position: relative;
-  color: #707070;
-  font-size: 12px;
-}
-
-.calendar_timezone_text {
-  top: -10px;
-  left: -11px;
-  position: relative;
-  color: #707070;
-  font-size: 9px;
-}
-
-.calendar_hour_block {
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid #8d8d8d55;
-  position: relative;
-  height: 50px;
-  border-bottom-right-radius: 5px;
-}
-
-.event_list_parent {
-  position: relative;
-  width: 100%;
-}
-
-.event_list_parent_current {
-  background-color: #def6e1;
-  position: relative;
-  width: 100%;
-}
-
-.dummyWidth {
-  width: 1px;
-}
-
-.day {
-  background-color: #ffffff;
-  padding-left: 0.3rem;
-  padding-right: 0.3rem;
-  border-radius: 10px;
-  margin: 5px;
-  background-color: white;
-  border: 1px solid #8d8d8d55;
-  color: #4b4b4b;
-  font-weight: 600;
-  height: 9rem;
-  position: relative;
-}
-
-.day_weekends {
-  background-color: rgba(49, 187, 107, 0.2);
-}
-
-.day__outside {
-  background-color: white;
-  color: #89898996;
-}
-
-.day__selected {
-  background-color: #007bff;
-  color: #707070;
-}
-
-.day__today {
-  background-color: #def6e1;
-  font-weight: 700;
-  text-decoration: underline;
-  color: #31bb6b;
-}
-
-.day__events {
-  background-color: white;
-}
-
-.btn__today {
-  transition: ease-in all 200ms;
-  font-family: Arial;
-  color: #ffffff;
-  font-size: 18px;
-  padding: 10px 20px 10px 20px;
-  text-decoration: none;
-  margin-left: 20px;
-  border: none;
-}
-
-.btnsContainer {
-  display: flex;
-  margin: 2.5rem 0 2.5rem 0;
-}
-
-.btnsContainer .btnsBlock {
-  display: flex;
-}
-
-.btnsContainer .btnsBlock button {
-  margin-left: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dropdown {
-  border: 1px solid var(--dropdown-border-color);
-  background-color: white;
-  color: var(--dropdown-text-color);
-  box-shadow: 0px 2px 1px var(--grey-bg-color);
-  /* Added blur effect */
-}
-
-.dropdown:is(:hover, :focus, :active, :focus-visible, .show) {
-  background-color: transparent !important;
-  border: 1px solid var(--dropdown-border-color);
-  color: var(--dropdown-text-color) !important;
-}
-
-.btnsContainer .input {
-  flex: 1;
-  position: relative;
-}
-
-.btnsContainer input {
-  outline: 1px solid var(--bs-gray-400);
-}
-
-.btnsContainer .input button {
-  width: 52px;
-}
-
-.searchBtn {
-  margin-bottom: 10px;
-}
-
-.inputField {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  background-color: white;
-  box-shadow: 0 1px 1px var(--search-button-bg);
-}
-
-.inputField > button {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.btn__more {
-  border: 0px;
-  font-size: 14px;
-  background-color: initial;
-  color: #262727;
-  font-weight: 600;
-  transition: all 200ms;
-  position: relative;
-  display: block;
-  margin: 2px;
-}
-
-.btn__more:hover {
-  color: #454645;
-}
-
-.expand_event_list {
-  display: block;
-}
-.event_list_hour {
-  display: flex;
-  flex-direction: row;
-}
-
-.createButton {
-  background-color: var(--grey-bg-color) !important;
-  color: black !important;
-
-  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;
-}
-
-.expand_list_container {
-  width: 200px;
-  max-height: 250px;
-  z-index: 10;
-  position: absolute;
-  left: auto;
-  right: auto;
-  overflow: auto;
-  padding: 10px 4px 0px 4px;
-  background-color: rgb(241, 241, 241);
-  border: 1px solid rgb(201, 201, 201);
-  border-radius: 5px;
-  margin: 5px;
-}
-
-.flex_grow {
-  flex-grow: 1;
-}
-
-@media only screen and (max-width: var(--mobile-breakpoint)) {
-  /** @breakpoint --mobile-breakpoint: 768px */
-  .event_list {
-    display: none;
-  }
-
-  .expand_list_container {
-    width: 150px;
-    padding: 4px 4px 0px 4px;
-  }
-
-  .day {
-    height: 5rem;
-  }
-}
-
-@media only screen and (max-width: var(--small-mobile-breakpoint)) {
-  .btn__more {
-    font-size: 12px;
-  }
-}
-
-.calendar__infocards {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 10px;
-  margin-top: 35px;
-}
-.base_card {
-  flex: 1;
-  padding: 20px;
-  border-radius: 10px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-}
-
-.holidays_card {
-  composes: base_card;
-  background-color: var(--holiday-card-bg);
-}
-
-.events_card {
-  composes: base_card;
-  background-color: #ffffff;
-}
-.card__holidays {
-  background-color: rgba(246, 242, 229, 1);
-  display: flex;
-  flex-direction: column;
-  width: 50%;
-  font-family: Outfit;
-  border-radius: 20px;
-  padding: 30px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.month__holidays {
-  display: flex;
-  flex-direction: column;
-}
-
-.holiday__data {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-}
-
-.holiday__date {
-  font-size: 20px;
-  color: rgba(234, 183, 86, 1);
-  font-weight: 700;
-}
-
-.holiday__name {
-  font-size: 20px;
-  margin-left: 35px;
-}
-
-.card__events {
-  background-color: rgba(244, 244, 244, 1);
-  display: flex;
-  flex-direction: column;
-  width: 50%;
-  font-family: Outfit;
-  border-radius: 20px;
-  padding: 30px;
-}
-
-.innercard__events {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 1rem;
-}
-
-.innercard__events p {
-  margin-bottom: 0;
-}
-
-.orgEvent__color {
-  height: 15px;
-  width: 40px;
-  background-color: rgba(82, 172, 255, 0.5);
-  border-radius: 10px;
-}
-
-.holidays__color {
-  height: 15px;
-  width: 40px;
-  background: rgba(0, 0, 0, 0.15);
-  border-radius: 10px;
-}
-
-.baseIndicator {
-  border-radius: 5px;
-  width: 20px;
-  height: 12px;
-  display: inline-block;
-}
-
-.holidayText {
-  font-size: 14px;
-  color: #555555;
-}
-.eventsLegend {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.list_container {
-  padding: 5px;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  gap: var(--indicator-spacing);
-}
-
-.holidayIndicator {
-  composes: baseIndicator;
-  background-color: rgba(0, 0, 0, 0.15);
-}
-
-:root {
-  /* Color scheme for holiday-related elements */
-  --color-user-event: rgba(139, 195, 74, 1);
-  /* Holiday colors */
-  --color-holiday-indicator: rgba(0, 0, 0, 0.15);
-  --color-holiday-date: rgba(255, 152, 0, 1);
-  /* Breakpoints for responsive design */
-  --mobile-breakpoint: 700px;
-  --small-mobile-breakpoint: 480px;
-  --text-color-primary: rgba(51, 51, 51, 1);
-  --text-color-secondary: rgba(85, 85, 85, 1);
-  /* Card styles */
-  --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --holiday-card-bg: #f6f2e5;
-  --holiday-date-color: #d35400;
-  --indicator-spacing: 8px;
-  /* Interactive states */
-  --hover-bg-color: rgba(0, 0, 0, 0.05);
-}
-.organizationIndicator {
-  composes: baseIndicator;
-  background-color: rgba(82, 172, 255, 0.5);
-}
-
-.legendText {
-  font-size: 14px;
-  color: #555555;
-}
-@media only screen and (max-width: var(--mobile-breakpoint)) {
-  .list_container,
-  .eventsLegend {
-    gap: 4px;
-  }
-
-  .holidayIndicator,
-  .organizationIndicator {
-    width: 16px;
-    height: 10px;
-  }
-
-  .holidayText,
-  .legendText {
-    font-size: 12px;
-  }
-}
-.card_title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-color-primary);
-  margin-bottom: 15px;
-}
-
-.card_list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.card_list_item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  font-size: 14px;
-  color: var(--text-color-secondary);
-}
-
-.holiday_date {
-  font-weight: 500;
-  margin-right: 10px;
-  color: var(--holiday-date-color);
-}
-
-.calendar_infocards {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 20px;
-  padding: 20px;
-  background-color: var(--grey-bg-color);
-}
-.holidays_card,
-.events_card {
-  flex: 1;
-  padding: 20px;
-  border-radius: 10px;
-  box-shadow: var(--card-shadow);
-}
-
-.holidays_card {
-  background-color: var(--holiday-card-bg);
-}
-
-.events_card {
-  background-color: white;
-}
-
-.legend {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.userEvents__color {
-  composes: baseIndicator;
-  display: inline-block;
-  background-color: rgba(139, 195, 74, 1);
-}
-
-.card_list_item:hover {
-  background-color: var(--hover-bg-color);
-  transition: background-color 0.2s ease;
-}
-.card_list_item:focus-visible {
-  background-color: var(--hover-bg-color);
-  transition: background-color 0.2s ease;
-}
diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx
index ebcf8be942..c9048eb552 100644
--- a/src/components/EventCalendar/EventCalendar.tsx
+++ b/src/components/EventCalendar/EventCalendar.tsx
@@ -2,7 +2,7 @@ import EventListCard from 'components/EventListCard/EventListCard';
 import dayjs from 'dayjs';
 import React, { useState, useEffect, useMemo } from 'react';
 import Button from 'react-bootstrap/Button';
-import styles from './EventCalendar.module.css';
+import styles from '../../style/app.module.css';
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 import { ViewType } from 'screens/OrganizationEvents/OrganizationEvents';
 import HolidayCard from '../HolidayCards/HolidayCard';
@@ -521,7 +521,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
         <div className={styles.calendar__header}>
           <Button
             variant="outlined"
-            className={styles.button}
+            className={styles.buttonEventCalendar}
             onClick={
               viewType == ViewType.DAY ? handlePrevDate : handlePrevMonth
             }
@@ -539,7 +539,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
           </div>
           <Button
             variant="outlined"
-            className={styles.button}
+            className={styles.buttonEventCalendar}
             onClick={
               viewType == ViewType.DAY ? handleNextDate : handleNextMonth
             }
diff --git a/src/components/EventCalendar/EventHeader.tsx b/src/components/EventCalendar/EventHeader.tsx
index 08039796e2..d8f949ca97 100644
--- a/src/components/EventCalendar/EventHeader.tsx
+++ b/src/components/EventCalendar/EventHeader.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Button, Dropdown, Form } from 'react-bootstrap';
 import { Search } from '@mui/icons-material';
-import styles from './EventCalendar.module.css';
+import styles from '../../style/app.module.css';
 import { ViewType } from '../../screens/OrganizationEvents/OrganizationEvents';
 import { useTranslation } from 'react-i18next';
 
@@ -34,7 +34,7 @@ function eventHeader({
   });
 
   return (
-    <div className={styles.calendar}>
+    <div className={styles.calendarEventHeader}>
       <div className={styles.calendar__header}>
         <div className={styles.input}>
           <Form.Control
@@ -55,7 +55,7 @@ function eventHeader({
             onChange={(e) => setEventName(e.target.value)}
           />
           <Button
-            className={styles.searchbutton}
+            className={styles.searchButton}
             style={{ marginBottom: '10px' }}
           >
             <Search />
@@ -64,7 +64,10 @@ function eventHeader({
         <div className={styles.flex_grow}></div>
         <div className={styles.space}>
           <div>
-            <Dropdown onSelect={handleChangeView} className={styles.selectType}>
+            <Dropdown
+              onSelect={handleChangeView}
+              className={styles.selectTypeEventHeader}
+            >
               <Dropdown.Toggle
                 id="dropdown-basic"
                 className={styles.dropdown}
@@ -92,7 +95,7 @@ function eventHeader({
             </Dropdown>
           </div>
           <div>
-            <Dropdown className={styles.selectType}>
+            <Dropdown className={styles.selectTypeEventHeader}>
               <Dropdown.Toggle
                 id="dropdown-basic"
                 className={styles.dropdown}
@@ -112,7 +115,7 @@ function eventHeader({
           </div>
           <Button
             variant="success"
-            className={styles.createButton}
+            className={styles.createButtonEventHeader}
             onClick={showInviteModal}
             data-testid="createEventModalBtn"
           >
diff --git a/src/components/EventCalendar/YearlyEventCalender.module.css b/src/components/EventCalendar/YearlyEventCalender.module.css
deleted file mode 100644
index 723cb20e22..0000000000
--- a/src/components/EventCalendar/YearlyEventCalender.module.css
+++ /dev/null
@@ -1,354 +0,0 @@
-.calendar {
-  font-family: sans-serif;
-  font-size: 1.2rem;
-  margin-bottom: 20px;
-}
-.calendar__header {
-  display: flex;
-  margin-bottom: 2rem;
-  align-items: center;
-  margin: 0px 10px 0px 10px;
-}
-.input {
-  flex: 1;
-  position: relative;
-}
-.calendar__header_month {
-  margin: 0.5rem;
-  color: #707070;
-  font-weight: bold;
-}
-.space {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
-.button {
-  color: #707070;
-  background-color: rgba(0, 0, 0, 0);
-  font-weight: bold;
-  border: 0px;
-}
-.calendar__weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  background-color: #707070;
-  height: 60px;
-}
-.calendar__scroll {
-  height: 80vh;
-  padding: 10px;
-}
-.weekday {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #fff;
-  background-color: #31bb6b;
-  font-weight: 600;
-}
-.calendar__days {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  grid-template-rows: repeat(6, 1fr);
-}
-.calendar_hour_text_container {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  border-right: 1px solid #8d8d8d55;
-  width: 40px;
-}
-.calendar_hour_text {
-  top: -10px;
-  left: -5px;
-  position: relative;
-  color: #707070;
-  font-size: 12px;
-}
-.calendar_timezone_text {
-  top: -10px;
-  left: -11px;
-  position: relative;
-  color: #707070;
-  font-size: 9px;
-}
-.calendar_hour_block {
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid #8d8d8d55;
-  position: relative;
-  height: 50px;
-  border-bottom-right-radius: 5px;
-}
-.event_list_parent {
-  position: relative;
-  width: 100%;
-}
-.event_list_parent_current {
-  background-color: #def6e1;
-  position: relative;
-  width: 100%;
-}
-.dummyWidth {
-  width: 1px;
-}
-.day {
-  background-color: #ffffff;
-  padding-left: 0.3rem;
-  padding-right: 0.3rem;
-  background-color: white;
-  border: 1px solid #8d8d8d55;
-  color: black;
-  font-weight: 600;
-  height: 8rem;
-  position: relative;
-}
-.day__outside {
-  /* background-color: #ededee !important; */
-  color: #89898996 !important;
-}
-.day__selected {
-  background-color: #007bff;
-  color: #707070;
-}
-.day__today {
-  background-color: #def6e1;
-  font-weight: 700;
-  text-decoration: underline;
-  color: #31bb6b;
-}
-.day__events {
-  background-color: #def6e1;
-}
-/* yearly calender styling */
-.yearlyCalender {
-  background-color: #ffffff;
-  box-sizing: border-box;
-}
-
-.circularButton {
-  width: 25px;
-  height: 25px;
-  border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0);
-  border: none;
-  cursor: pointer;
-  margin-left: 0.75rem;
-}
-.circularButton:hover {
-  background-color: rgba(82, 172, 255, 0.5);
-}
-.closebtn {
-  padding: 10px;
-}
-
-.yearlyCalendarHeader {
-  display: flex;
-  flex-direction: row;
-}
-
-.yearlyCalendarHeader > div {
-  font-weight: 600;
-  font-size: 2rem;
-  padding: 0 10px;
-  color: #4b4b4b;
-}
-.noEventAvailable {
-  background-color: rgba(255, 255, 255, 0);
-}
-
-.card {
-  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
-  padding: 16px;
-  text-align: center;
-  /* background-color: #f1f1f1; */
-  height: 21rem;
-}
-.cardHeader {
-  text-align: left;
-}
-
-.row {
-  margin: 1px -5px;
-}
-
-/* Clear floats after the columns */
-.row:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.weekday__yearly {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  /* color: #fff; */
-  background-color: #ffffff;
-  font-weight: 600;
-}
-.day__yearly {
-  background-color: #ffffff;
-  padding-left: 0.3rem;
-  padding-right: 0.3rem;
-  background-color: white;
-  /* border: 1px solid #8d8d8d55; */
-  color: #4b4b4b;
-  font-weight: 600;
-  height: 2rem;
-  position: relative;
-}
-* {
-  box-sizing: border-box;
-}
-
-/* Float four columns side by side */
-.column {
-  float: left;
-  width: 25%;
-  padding: 10px;
-}
-
-/* Remove extra left and right margins, due to padding */
-.row {
-  margin: 0 -5px;
-}
-
-/* Clear floats after the columns */
-.row:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-/* yearly calender styling ends */
-.btn__today {
-  transition: ease-in all 200ms;
-  font-family: Arial;
-  color: #ffffff;
-  font-size: 18px;
-  padding: 10px 20px 10px 20px;
-  text-decoration: none;
-  margin-left: 20px;
-  border: none;
-}
-.btnsContainer {
-  display: flex;
-  margin: 2.5rem 0 2.5rem 0;
-}
-
-.btnsContainer .btnsBlock {
-  display: flex;
-}
-
-.btnsContainer .btnsBlock button {
-  margin-left: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dropdown {
-  border-color: #31bb6b;
-  background-color: white;
-  color: #31bb6b;
-  box-shadow: 0px 2px 1px rgba(49, 187, 107, 0.5); /* Added blur effect */
-}
-
-.btnsContainer .input {
-  flex: 1;
-  position: relative;
-}
-
-.btnsContainer input {
-  outline: 1px solid var(--bs-gray-400);
-}
-
-.btnsContainer .input button {
-  width: 52px;
-}
-.searchBtn {
-  margin-bottom: 10px;
-}
-
-.inputField {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  background-color: white;
-  box-shadow: 0 1px 1px #31bb6b;
-}
-.inputField > button {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-.btn__more {
-  border: 0px;
-  font-size: 14px;
-  background-color: initial;
-  font-weight: 600;
-  transition: all 200ms;
-  position: relative;
-  display: block;
-  margin: -9px;
-  margin-top: -28px;
-}
-.btn__more:hover {
-  color: #3ce080;
-}
-
-.expand_event_list {
-  display: block;
-}
-.list_container {
-  padding: 5px;
-  width: fit-content;
-  display: flex;
-  flex-direction: row;
-}
-.event_list_hour {
-  display: flex;
-  flex-direction: row;
-}
-.expand_list_container {
-  width: 200px;
-  max-height: 250px;
-  z-index: 10;
-  position: absolute;
-  left: auto;
-  right: auto;
-  overflow: auto;
-  padding: 10px 4px 0px 4px;
-  background-color: rgb(241, 241, 241);
-  border: 1px solid rgb(201, 201, 201);
-  border-radius: 5px;
-  margin: 5px;
-}
-.flex_grow {
-  flex-grow: 1;
-}
-
-@media only screen and (max-width: 700px) {
-  .event_list {
-    display: none;
-  }
-  .expand_list_container {
-    width: 150px;
-    padding: 4px 4px 0px 4px;
-  }
-  .day {
-    height: 5rem;
-  }
-}
-
-@media only screen and (max-width: 500px) {
-  .btn__more {
-    font-size: 12px;
-  }
-
-  .column {
-    float: left;
-    width: 100%;
-    padding: 10px;
-  }
-}
diff --git a/src/components/EventCalendar/YearlyEventCalender.tsx b/src/components/EventCalendar/YearlyEventCalender.tsx
index facf75038c..55e7332357 100644
--- a/src/components/EventCalendar/YearlyEventCalender.tsx
+++ b/src/components/EventCalendar/YearlyEventCalender.tsx
@@ -2,7 +2,7 @@ import EventListCard from 'components/EventListCard/EventListCard';
 import dayjs from 'dayjs';
 import Button from 'react-bootstrap/Button';
 import React, { useState, useEffect } from 'react';
-import styles from './YearlyEventCalender.module.css';
+import styles from '../../style/app.module.css';
 import type { ViewType } from 'screens/OrganizationEvents/OrganizationEvents';
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 import type { InterfaceRecurrenceRule } from 'utils/recurrenceUtils';
@@ -310,7 +310,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
                   onClick={() => toggleExpand(`${monthInx}-${dayIndex}`)}
                 >
                   {expandedY === `${monthInx}-${dayIndex}` ? (
-                    <div className={styles.closebtn}>
+                    <div className={styles.closebtnYearlyEventCalender}>
                       <br />
                       <p>Close</p>
                     </div>
@@ -325,7 +325,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
                   onClick={() => toggleExpand(`${monthInx}-${dayIndex}`)}
                 >
                   {expandedY === `${monthInx}-${dayIndex}` ? (
-                    <div className={styles.closebtn}>
+                    <div className={styles.closebtnYearlyEventCalender}>
                       <br />
                       <br />
                       No Event Available!
@@ -343,9 +343,11 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
       });
 
       renderedMonths.push(
-        <div className={styles.column} key={monthInx}>
-          <div className={styles.card}>
-            <h6 className={styles.cardHeader}>{months[monthInx]}</h6>
+        <div className={styles.columnYearlyEventCalender} key={monthInx}>
+          <div className={styles.cardYearlyEventCalender}>
+            <h6 className={styles.cardHeaderYearlyEventCalender}>
+              {months[monthInx]}
+            </h6>
             <div className={styles.calendar__weekdays}>
               {weekdaysShorthand.map((weekday, index) => (
                 <div key={index} className={styles.weekday__yearly}>
@@ -388,7 +390,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
           </Button>
         </div>
 
-        <div className={styles.row}>
+        <div className={styles.rowYearlyEventCalender}>
           <div>{renderMonthDays()}</div>
         </div>
       </div>
diff --git a/src/components/EventListCard/EventListCard.module.css b/src/components/EventListCard/EventListCard.module.css
deleted file mode 100644
index 1e47972a42..0000000000
--- a/src/components/EventListCard/EventListCard.module.css
+++ /dev/null
@@ -1,223 +0,0 @@
-.cards h2 {
-  font-size: 15px;
-  color: #4e4c4c;
-  font-weight: 500;
-}
-.cards > h3 {
-  font-size: 17px;
-}
-.cards > p {
-  font-size: 14px;
-  margin-top: 0px;
-  margin-bottom: 7px;
-}
-.cards a {
-  color: #fff;
-  font-weight: 600;
-}
-.cards a:hover {
-  color: black;
-}
-.cards {
-  position: relative;
-  overflow: hidden;
-  transition: all 0.3s;
-  margin-bottom: 5px;
-}
-.dispflex {
-  display: flex;
-  cursor: pointer;
-  justify-content: space-between;
-  margin: 10px 5px 5px 0px;
-}
-.eventtitle {
-  margin-bottom: 0px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.iconContainer {
-  display: flex;
-  justify-content: flex-end;
-}
-.icon {
-  margin: 2px;
-}
-
-.cards {
-  width: 100%;
-  background: #5cacf7 !important;
-  padding: 2px 3px;
-  border-radius: 5px;
-  border: 1px solid #e8e8e8;
-  box-shadow: 0 3px 2px #e8e8e8;
-  color: #737373;
-  box-sizing: border-box;
-}
-.cards:last-child:nth-last-child(odd) {
-  grid-column: auto / span 2;
-}
-
-.cards:first-child:nth-last-child(even),
-.cards:first-child:nth-last-child(even) ~ .box {
-  grid-column: auto / span 1;
-}
-
-.sidebarsticky > input {
-  text-decoration: none;
-  margin-bottom: 50px;
-  border-color: #e8e5e5;
-  width: 80%;
-  border-radius: 7px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-right: 10px;
-  padding-left: 10px;
-  box-shadow: none;
-}
-.datediv {
-  display: flex;
-  flex-direction: row;
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-.datebox {
-  width: 90%;
-  border-radius: 7px;
-  border-color: #e8e5e5;
-  outline: none;
-  box-shadow: none;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-right: 5px;
-  padding-left: 5px;
-}
-.datediv > div > p {
-  margin-bottom: 0.5rem;
-}
-
-.startDate {
-  margin-right: 0.25rem;
-}
-.endDate {
-  margin-left: 1.5rem;
-}
-
-.checkboxdiv > div label {
-  margin-right: 50px;
-}
-.checkboxdiv > label > input {
-  margin-left: 10px;
-}
-
-.dispflex > input {
-  width: 20%;
-  border: none;
-  box-shadow: none;
-  margin-top: 5px;
-}
-
-.checkboxContainer {
-  display: flex;
-  justify-content: space-between;
-}
-
-.checkboxdiv {
-  display: flex;
-  flex-direction: column;
-}
-
-.preview {
-  display: flex;
-  flex-direction: row;
-  font-weight: 700;
-  font-size: 16px;
-  color: #000000;
-  margin: 0;
-}
-.view {
-  margin-left: 2%;
-  font-weight: 600;
-  font-size: 16px;
-  color: #707070;
-}
-.flexdir {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  border: none;
-}
-
-.form_wrapper {
-  margin-top: 27px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  padding: 20px 30px;
-  background: #ffffff;
-  border-color: #e8e5e5;
-  border-width: 5px;
-  border-radius: 10px;
-  width: 40%;
-}
-
-.form_wrapper form {
-  display: flex;
-  align-items: left;
-  justify-content: left;
-  flex-direction: column;
-}
-.titlemodal {
-  color: #000000;
-  font-weight: 600;
-  font-size: 24px;
-  margin-bottom: 20px;
-  padding-bottom: 5px;
-  border-bottom: 4px solid #31bb6b;
-  width: 50%;
-}
-.cancel > i {
-  margin-top: 5px;
-  transform: scale(1.2);
-  cursor: pointer;
-  color: #707070;
-}
-.modalbody {
-  width: 50px;
-}
-.list_box {
-  height: 70vh;
-  overflow-y: auto;
-  width: auto;
-}
-@media only screen and (max-width: 600px) {
-  .form_wrapper {
-    width: 90%;
-    top: 45%;
-  }
-  .checkboxContainer {
-    flex-direction: column;
-  }
-
-  .datediv {
-    flex-direction: column;
-  }
-
-  .datediv > div {
-    width: 100%;
-    margin-left: 0;
-    margin-bottom: 10px;
-  }
-
-  .datediv > div p {
-    margin-bottom: 5px;
-  }
-}
-
-.customButton {
-  width: 90%;
-  margin: 0 auto;
-}
diff --git a/src/components/EventListCard/EventListCard.tsx b/src/components/EventListCard/EventListCard.tsx
index ffa508ff7c..dba2ef4541 100644
--- a/src/components/EventListCard/EventListCard.tsx
+++ b/src/components/EventListCard/EventListCard.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import styles from './EventListCard.module.css';
+import styles from '../../style/app.module.css';
 import { Navigate, useParams } from 'react-router-dom';
 import EventListCardModals from './EventListCardModals';
 import type { InterfaceRecurrenceRule } from 'utils/recurrenceUtils';
@@ -74,14 +74,14 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
   return (
     <>
       <div
-        className={styles.cards}
+        className={styles.cardsEventListCard}
         style={{
           backgroundColor: '#d9d9d9',
         }}
         onClick={showViewModal}
         data-testid="card"
       >
-        <div className={styles.dispflex}>
+        <div className={styles.dispflexEventListCard}>
           <h2 className={styles.eventtitle}>
             {props.eventName ? <>{props.eventName}</> : <>Dogs Care</>}
           </h2>
diff --git a/src/components/EventListCard/EventListCardModals.tsx b/src/components/EventListCard/EventListCardModals.tsx
index 7755da2a5a..6f93c709fd 100644
--- a/src/components/EventListCard/EventListCardModals.tsx
+++ b/src/components/EventListCard/EventListCardModals.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Form, Modal, Popover } from 'react-bootstrap';
-import styles from './EventListCard.module.css';
+import styles from '../../style/app.module.css';
 import { DatePicker, TimePicker } from '@mui/x-date-pickers';
 import dayjs from 'dayjs';
 import type { Dayjs } from 'dayjs';
@@ -401,7 +401,9 @@ function EventListCardModals({
         </Modal.Header>
         <Modal.Body>
           <Form>
-            <p className={styles.preview}>{t('eventTitle')}</p>
+            <p className={styles.previewEventListCardModals}>
+              {t('eventTitle')}
+            </p>
             <Form.Control
               type="title"
               id="eventitle"
@@ -425,7 +427,9 @@ function EventListCardModals({
                 eventListCardProps.userRole === Role.USER
               }
             />
-            <p className={styles.preview}>{tCommon('description')}</p>
+            <p className={styles.previewEventListCardModals}>
+              {tCommon('description')}
+            </p>
             <Form.Control
               type="eventdescrip"
               id="eventdescrip"
@@ -449,7 +453,9 @@ function EventListCardModals({
                 eventListCardProps.userRole === Role.USER
               }
             />
-            <p className={styles.preview}>{tCommon('location')}</p>
+            <p className={styles.previewEventListCardModals}>
+              {tCommon('location')}
+            </p>
             <Form.Control
               type="text"
               id="eventLocation"
@@ -555,8 +561,8 @@ function EventListCardModals({
               </div>
             )}
             <div className={styles.checkboxContainer}>
-              <div className={styles.checkboxdiv}>
-                <div className={styles.dispflex}>
+              <div className={styles.checkboxdivEventListCardModals}>
+                <div className={styles.dispflexEventListCardModals}>
                   <label htmlFor="allday">{t('allDay')}?</label>
                   <Form.Switch
                     id="allday"
@@ -572,7 +578,7 @@ function EventListCardModals({
                     }
                   />
                 </div>
-                <div className={styles.dispflex}>
+                <div className={styles.dispflexEventListCardModals}>
                   <label htmlFor="recurring">{t('recurringEvent')}:</label>
                   <Form.Switch
                     id="recurring"
@@ -589,8 +595,8 @@ function EventListCardModals({
                   />
                 </div>
               </div>
-              <div className={styles.checkboxdiv}>
-                <div className={styles.dispflex}>
+              <div className={styles.checkboxdivEventListCardModals}>
+                <div className={styles.dispflexEventListCardModals}>
                   <label htmlFor="ispublic">{t('isPublic')}?</label>
                   <Form.Switch
                     id="ispublic"
@@ -606,7 +612,7 @@ function EventListCardModals({
                     }
                   />
                 </div>
-                <div className={styles.dispflex}>
+                <div className={styles.dispflexEventListCardModals}>
                   <label htmlFor="registrable">{t('isRegistrable')}?</label>
                   <Form.Switch
                     id="registrable"
diff --git a/src/components/OrgPostCard/DeletePostModal.spec.tsx b/src/components/OrgPostCard/DeletePostModal.spec.tsx
new file mode 100644
index 0000000000..2a4ed220b2
--- /dev/null
+++ b/src/components/OrgPostCard/DeletePostModal.spec.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { vi } from 'vitest';
+
+import DeletePostModal from './DeletePostModal';
+import i18nForTest from 'utils/i18nForTest';
+
+describe('DeletePostModal', () => {
+  it('renders the delete modal with correct text', () => {
+    const mockOnHide = vi.fn();
+    const mockOnDelete = vi.fn();
+
+    render(
+      <I18nextProvider i18n={i18nForTest}>
+        <DeletePostModal
+          show={true}
+          onHide={mockOnHide}
+          onDelete={mockOnDelete}
+        />
+      </I18nextProvider>,
+    );
+
+    expect(screen.getByTestId('delete-post-modal')).toBeInTheDocument();
+    expect(screen.getByText(/delete post/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/do you want to remove this post\?/i),
+    ).toBeInTheDocument();
+  });
+
+  it('hides the modal when "No" is clicked', () => {
+    const mockOnHide = vi.fn();
+    const mockOnDelete = vi.fn();
+
+    render(
+      <I18nextProvider i18n={i18nForTest}>
+        <DeletePostModal
+          show={true}
+          onHide={mockOnHide}
+          onDelete={mockOnDelete}
+        />
+      </I18nextProvider>,
+    );
+
+    fireEvent.click(screen.getByTestId('deleteModalNoBtn'));
+    expect(mockOnHide).toHaveBeenCalledTimes(1);
+    expect(mockOnDelete).not.toHaveBeenCalled();
+  });
+
+  it('calls onDelete and onHide when "Yes" is clicked', () => {
+    const mockOnHide = vi.fn();
+    const mockOnDelete = vi.fn();
+
+    render(
+      <I18nextProvider i18n={i18nForTest}>
+        <DeletePostModal
+          show={true}
+          onHide={mockOnHide}
+          onDelete={mockOnDelete}
+        />
+      </I18nextProvider>,
+    );
+
+    fireEvent.click(screen.getByTestId('deletePostBtn'));
+    expect(mockOnDelete).toHaveBeenCalledTimes(1);
+    expect(mockOnHide).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render the modal when show is false', () => {
+    const { queryByTestId } = render(
+      <I18nextProvider i18n={i18nForTest}>
+        <DeletePostModal show={false} onHide={vi.fn()} onDelete={vi.fn()} />
+      </I18nextProvider>,
+    );
+    expect(queryByTestId('delete-post-modal')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/OrgPostCard/DeletePostModal.tsx b/src/components/OrgPostCard/DeletePostModal.tsx
new file mode 100644
index 0000000000..67f301ba72
--- /dev/null
+++ b/src/components/OrgPostCard/DeletePostModal.tsx
@@ -0,0 +1,65 @@
+import React, { type FC } from 'react';
+import { Modal, Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * A modal component that confirms a post delete operation.
+ *
+ * @param show - Whether the modal is visible.
+ * @param onHide - Callback invoked when the modal is dismissed.
+ * @param onDelete - Callback invoked to actually delete the post.
+ * @returns A rendered React Bootstrap Modal for post deletion.
+ */
+
+interface InterfaceDeletePostModalProps {
+  show: boolean;
+  onHide: () => void;
+  onDelete: () => void;
+}
+
+const DeletePostModal: FC<InterfaceDeletePostModalProps> = ({
+  show,
+  onHide,
+  onDelete,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgPostCard',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const handleConfirmDelete = (): void => {
+    onDelete();
+    onHide();
+  };
+
+  return (
+    <Modal show={show} onHide={onHide} data-testid="delete-post-modal">
+      <Modal.Header>
+        <h5>{t('deletePost')}</h5>
+        <Button variant="danger" onClick={onHide}>
+          <i className="fa fa-times" />
+        </Button>
+      </Modal.Header>
+      <Modal.Body>{t('deletePostMsg')}</Modal.Body>
+      <Modal.Footer>
+        <Button
+          variant="danger"
+          onClick={onHide}
+          data-testid="deleteModalNoBtn"
+        >
+          {tCommon('no')}
+        </Button>
+        <Button
+          type="button"
+          className="btn btn-success"
+          onClick={handleConfirmDelete}
+          data-testid="deletePostBtn"
+        >
+          {tCommon('yes')}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default DeletePostModal;
diff --git a/src/components/OrgPostCard/OrgPostCard.module.css b/src/components/OrgPostCard/OrgPostCard.module.css
deleted file mode 100644
index c7ff8073d2..0000000000
--- a/src/components/OrgPostCard/OrgPostCard.module.css
+++ /dev/null
@@ -1,278 +0,0 @@
-.cards h2 {
-  font-size: 20px;
-}
-.cards > h3 {
-  font-size: 17px;
-}
-.card {
-  width: 100%;
-  height: 20rem;
-  margin-bottom: 2rem;
-}
-.postimage {
-  border-radius: 0px;
-  width: 100%;
-  height: 12rem;
-  max-width: 100%;
-  max-height: 12rem;
-  object-fit: cover;
-  position: relative;
-  color: black;
-}
-.preview {
-  display: flex;
-  position: relative;
-  width: 100%;
-  margin-top: 10px;
-  justify-content: center;
-}
-.preview img {
-  width: 400px;
-  height: auto;
-}
-.preview video {
-  width: 400px;
-  height: auto;
-}
-.nopostimage {
-  border-radius: 0px;
-  width: 100%;
-  height: 12rem;
-  max-height: 12rem;
-  object-fit: cover;
-  position: relative;
-}
-.cards:hover {
-  filter: brightness(0.8);
-}
-.cards:hover::before {
-  opacity: 0.5;
-}
-.knowMoreText {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  opacity: 0;
-  color: white;
-  padding: 10px;
-  font-weight: bold;
-  font-size: 1.5rem;
-  transition: opacity 0.3s ease-in-out;
-}
-
-.cards:hover .knowMoreText {
-  opacity: 1;
-}
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(
-    0,
-    0,
-    0,
-    0.9
-  ); /* Dark grey modal background with transparency */
-  z-index: 9999;
-}
-
-.modalContent {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #fff;
-  padding: 20px;
-  max-width: 800px;
-  max-height: 600px;
-  overflow: auto;
-}
-
-.modalImage {
-  flex: 1;
-  margin-right: 20px;
-  width: 25rem;
-  height: 15rem;
-}
-.nomodalImage {
-  flex: 1;
-  margin-right: 20px;
-  width: 100%;
-  height: 15rem;
-}
-
-.modalImage img,
-.modalImage video {
-  border-radius: 0px;
-  width: 100%;
-  height: 25rem;
-  max-width: 25rem;
-  max-height: 15rem;
-  object-fit: cover;
-  position: relative;
-}
-.modalInfo {
-  flex: 1;
-}
-.title {
-  font-size: 16px;
-  color: #000;
-  font-weight: 600;
-}
-.text {
-  font-size: 13px;
-  color: #000;
-  font-weight: 300;
-}
-.author {
-  color: #737373;
-  font-weight: 100;
-  font-size: 13px;
-}
-.closeButton {
-  position: relative;
-  bottom: 5rem;
-  right: 10px;
-  padding: 4px;
-  background-color: red; /* Red close button color */
-  color: #fff;
-  border: none;
-  cursor: pointer;
-}
-.closeButtonP {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  background: transparent;
-  transform: scale(1.2);
-  cursor: pointer;
-  border: none;
-  color: #707070;
-  font-weight: 600;
-  font-size: 16px;
-  cursor: pointer;
-}
-.cards:hover::after {
-  opacity: 1;
-  mix-blend-mode: normal;
-}
-.cards > p {
-  font-size: 14px;
-  margin-top: 0px;
-  margin-bottom: 7px;
-}
-.cards a {
-  color: #737373;
-  font-weight: 600;
-}
-.cards a:hover {
-  color: black;
-}
-.infodiv {
-  margin-bottom: 7px;
-  width: 15rem;
-  text-align: justify;
-  word-wrap: break-word;
-}
-.infodiv > p {
-  margin: 0;
-}
-.dispflex {
-  display: flex;
-  justify-content: space-between;
-}
-.iconContainer {
-  display: flex;
-}
-.icon {
-  transform: scale(0.75);
-  cursor: pointer;
-}
-/* .cards {
-  width: 75%;
-  background: #fcfcfc;
-  margin: 10px 40px;
-  padding: 20px 30px;
-  border-radius: 5px;
-  border: 1px solid #e8e8e8;
-  box-shadow: 0 3px 5px #c9c9c9;
-  margin-right: 30px;
-  color: #737373;
-  box-sizing: border-box;
-} */
-.cards:last-child:nth-last-child(odd) {
-  grid-column: auto / span 2;
-}
-.cards:first-child:nth-last-child(even),
-.cards:first-child:nth-last-child(even) ~ .box {
-  grid-column: auto / span 1;
-}
-.toggleClickBtn {
-  color: #31bb6b;
-  cursor: pointer;
-  border: none;
-  font-size: 12px;
-  background-color: white;
-}
-.toggleClickBtnNone {
-  display: none;
-}
-/* Menu Modal Styles */
-.menuModal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, 0.7); /* Dark grey modal background */
-  z-index: 9999;
-}
-
-.menuContent {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #fff;
-  padding-top: 20px;
-  max-width: 700px;
-  max-height: 500px;
-  overflow: hidden;
-  position: relative;
-}
-
-.menuOptions {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-.menuOptions li {
-  padding: 10px;
-  border-bottom: 1px solid #ccc;
-  padding-left: 100px;
-  padding-right: 100px;
-  cursor: pointer;
-}
-
-.moreOptionsButton {
-  position: relative;
-  bottom: 5rem;
-  right: 10px;
-  padding: 2px;
-  background-color: transparent;
-  color: #000;
-  border: none;
-  cursor: pointer;
-}
-.list {
-  color: red;
-  cursor: pointer;
-}
diff --git a/src/components/OrgPostCard/OrgPostCard.tsx b/src/components/OrgPostCard/OrgPostCard.tsx
index b7cc419d12..5bc9ca1407 100644
--- a/src/components/OrgPostCard/OrgPostCard.tsx
+++ b/src/components/OrgPostCard/OrgPostCard.tsx
@@ -14,7 +14,8 @@ import { toast } from 'react-toastify';
 import convertToBase64 from 'utils/convertToBase64';
 import { errorHandler } from 'utils/errorHandler';
 import type { InterfacePostForm } from 'utils/interfaces';
-import styles from './OrgPostCard.module.css';
+import styles from '../../style/app.module.css';
+import DeletePostModal from './DeletePostModal';
 interface InterfaceOrgPostCardProps {
   postID: string;
   id: string;
@@ -29,8 +30,14 @@ export default function OrgPostCard(
   props: InterfaceOrgPostCardProps,
 ): JSX.Element {
   const {
-    postID, // Destructure the key prop from props
-    // ...rest // Spread the rest of the props
+    postID,
+    id,
+    postTitle,
+    postInfo,
+    postAuthor,
+    postPhoto,
+    postVideo,
+    pinned,
   } = props;
   const [postformState, setPostFormState] = useState<InterfacePostForm>({
     posttitle: '',
@@ -51,11 +58,7 @@ export default function OrgPostCard(
   const [toggle] = useMutation(TOGGLE_PINNED_POST);
   const togglePostPin = async (id: string, pinned: boolean): Promise<void> => {
     try {
-      const { data } = await toggle({
-        variables: {
-          id,
-        },
-      });
+      const { data } = await toggle({ variables: { id } });
       if (data) {
         setModalVisible(false);
         setMenuVisible(false);
@@ -66,7 +69,6 @@ export default function OrgPostCard(
       }
     } catch (error: unknown) {
       if (error instanceof Error) {
-        /* istanbul ignore next */
         errorHandler(t, error);
       }
     }
@@ -100,10 +102,7 @@ export default function OrgPostCard(
     setMenuVisible(true);
   };
   const clearImageInput = (): void => {
-    setPostFormState({
-      ...postformState,
-      postphoto: '',
-    });
+    setPostFormState({ ...postformState, postphoto: '' });
     setPostPhotoUpdated(true);
     const fileInput = document.getElementById(
       'postImageUrl',
@@ -150,11 +149,11 @@ export default function OrgPostCard(
   }
   useEffect(() => {
     setPostFormState({
-      posttitle: props.postTitle,
-      postinfo: props.postInfo,
-      postphoto: props.postPhoto,
-      postvideo: props.postVideo,
-      pinned: props.pinned,
+      posttitle: postTitle,
+      postinfo: postInfo,
+      postphoto: postPhoto,
+      postvideo: postVideo,
+      pinned: pinned,
     });
   }, []);
   const { t } = useTranslation('translation', {
@@ -166,9 +165,7 @@ export default function OrgPostCard(
   const deletePost = async (): Promise<void> => {
     try {
       const { data } = await deletePostMutation({
-        variables: {
-          id: props.id,
-        },
+        variables: { id },
       });
       if (data) {
         toast.success(t('postDeleted') as string);
@@ -197,7 +194,7 @@ export default function OrgPostCard(
     try {
       const { data } = await updatePostMutation({
         variables: {
-          id: props.id,
+          id: id,
           title: postformState.posttitle,
           text: postformState.postinfo,
           ...(postPhotoUpdated && {
@@ -228,13 +225,13 @@ export default function OrgPostCard(
         data-testid="post-item"
       >
         <div
-          className={styles.cards}
+          className={styles.cardsOrgPostCard}
           onClick={handleCardClick}
           data-testid="cardStructure"
         >
-          {props.postVideo && (
+          {postVideo && (
             <Card
-              className={styles.card}
+              className={styles.cardOrgPostCard}
               data-testid="cardVid"
               onMouseEnter={handleVideoPlay}
               onMouseLeave={handleVideoPause}
@@ -242,15 +239,15 @@ export default function OrgPostCard(
               <video
                 ref={videoRef}
                 muted
-                className={styles.postimage}
+                className={styles.postimageOrgPostCard}
                 autoPlay={playing}
                 loop={true}
                 playsInline
               >
-                <source src={props?.postVideo} type="video/mp4" />
+                <source src={postVideo} type="video/mp4" />
               </video>
               <Card.Body>
-                {props.pinned && (
+                {pinned && (
                   <PushPin
                     color="success"
                     fontSize="large"
@@ -258,40 +255,46 @@ export default function OrgPostCard(
                     data-testid="pin-icon"
                   />
                 )}
-                <Card.Title className={styles.title} data-testid="card-title">
-                  {props.postTitle}
+                <Card.Title
+                  className={styles.titleOrgPostCard}
+                  data-testid="card-title"
+                >
+                  {postTitle}
                 </Card.Title>
-                <Card.Text className={styles.text} data-testid="card-text">
-                  {props.postInfo}
+                <Card.Text
+                  className={styles.textOrgPostCard}
+                  data-testid="card-text"
+                >
+                  {postInfo}
                 </Card.Text>
-                <Card.Link data-testid="card-authour">
-                  {props.postAuthor}
-                </Card.Link>
+                <Card.Link data-testid="card-authour">{postAuthor}</Card.Link>
               </Card.Body>
             </Card>
           )}
-          {props.postPhoto ? (
-            <Card className={styles.card}>
+          {postPhoto ? (
+            <Card className={styles.cardOrgPostCard}>
               <Card.Img
-                className={styles.postimage}
+                className={styles.postimageOrgPostCard}
                 variant="top"
-                src={props.postPhoto}
+                src={postPhoto}
                 alt="image"
               />
               <Card.Body>
-                {props.pinned && (
+                {pinned && (
                   <PushPin color="success" fontSize="large" className="fs-5" />
                 )}
-                <Card.Title className={styles.title}>
-                  {props.postTitle}
+                <Card.Title className={styles.titleOrgPostCard}>
+                  {postTitle}
                 </Card.Title>
-                <Card.Text className={styles.text}>{props.postInfo}</Card.Text>
-                <Card.Link>{props.postAuthor}</Card.Link>
+                <Card.Text className={styles.textOrgPostCard}>
+                  {postInfo}
+                </Card.Text>
+                <Card.Link>{postAuthor}</Card.Link>
               </Card.Body>
             </Card>
-          ) : !props.postVideo ? (
+          ) : !postVideo ? (
             <span>
-              <Card className={styles.card}>
+              <Card className={styles.cardOrgPostCard}>
                 <Card.Img
                   variant="top"
                   src={AboutImg}
@@ -299,24 +302,22 @@ export default function OrgPostCard(
                   className={styles.nopostimage}
                 />
                 <Card.Body>
-                  {props.pinned && (
+                  {pinned && (
                     <PushPin
                       color="success"
                       fontSize="large"
                       className="fs-5"
                     />
                   )}
-                  <Card.Title className={styles.title}>
-                    {props.postTitle}
+                  <Card.Title className={styles.titleOrgPostCard}>
+                    {postTitle}
                   </Card.Title>
-                  <Card.Text className={styles.text}>
-                    {props.postInfo && props.postInfo.length > 20
-                      ? props.postInfo.substring(0, 20) + '...'
-                      : props.postInfo}
+                  <Card.Text className={styles.textOrgPostCard}>
+                    {postInfo && postInfo.length > 20
+                      ? postInfo.substring(0, 20) + '...'
+                      : postInfo}
                   </Card.Text>{' '}
-                  <Card.Link className={styles.author}>
-                    {props.postAuthor}
-                  </Card.Link>
+                  <Card.Link className={styles.author}>{postAuthor}</Card.Link>
                 </Card.Body>
               </Card>
             </span>
@@ -325,21 +326,24 @@ export default function OrgPostCard(
           )}
         </div>
         {modalVisible && (
-          <div className={styles.modal} data-testid={'imagepreviewmodal'}>
-            <div className={styles.modalContent}>
-              {props.postPhoto && (
+          <div
+            className={styles.modalOrgPostCard}
+            data-testid={'imagepreviewmodal'}
+          >
+            <div className={styles.modalContentOrgPostCard}>
+              {postPhoto && (
                 <div className={styles.modalImage}>
-                  <img src={props.postPhoto} alt="Post Image" />
+                  <img src={postPhoto} alt="Post Image" />
                 </div>
               )}
-              {props.postVideo && (
+              {postVideo && (
                 <div className={styles.modalImage}>
                   <video controls autoPlay loop muted>
-                    <source src={props?.postVideo} type="video/mp4" />
+                    <source src={postVideo} type="video/mp4" />
                   </video>
                 </div>
               )}
-              {!props.postPhoto && !props.postVideo && (
+              {!postPhoto && !postVideo && (
                 <div className={styles.modalImage}>
                   {' '}
                   <img src={AboutImg} alt="Post Image" />
@@ -347,23 +351,23 @@ export default function OrgPostCard(
               )}
               <div className={styles.modalInfo}>
                 <p>
-                  {t('author')}:<span> {props.postAuthor}</span>
+                  {t('author')}:<span> {postAuthor}</span>
                 </p>
                 <div className={styles.infodiv}>
                   {togglePost === 'Read more' ? (
                     <p data-testid="toggleContent">
-                      {props.postInfo.length > 43
-                        ? props.postInfo.substring(0, 40) + '...'
-                        : props.postInfo}
+                      {postInfo.length > 43
+                        ? postInfo.substring(0, 40) + '...'
+                        : postInfo}
                     </p>
                   ) : (
-                    <p data-testid="toggleContent">{props.postInfo}</p>
+                    <p data-testid="toggleContent">{postInfo}</p>
                   )}
                   <button
                     role="toggleBtn"
                     data-testid="toggleBtn"
                     className={`${
-                      props.postInfo.length > 43
+                      postInfo.length > 43
                         ? styles.toggleClickBtn
                         : styles.toggleClickBtnNone
                     }`}
@@ -381,7 +385,7 @@ export default function OrgPostCard(
                 <MoreVert />
               </button>
               <button
-                className={styles.closeButton}
+                className={styles.closeButtonOrgPostCard}
                 onClick={(): void => setModalVisible(false)}
                 data-testid="closeiconbtn"
               >
@@ -396,7 +400,7 @@ export default function OrgPostCard(
               <ul className={styles.menuOptions}>
                 <li
                   data-toggle="modal"
-                  data-target={`#editPostModal${props.id}`}
+                  data-target={`#editPostModal${id}`}
                   onClick={handleEditModal}
                   data-testid="editPostModalBtn"
                 >
@@ -404,7 +408,7 @@ export default function OrgPostCard(
                 </li>
                 <li
                   data-toggle="modal"
-                  data-target={`#deletePostModal${props.id}`}
+                  data-target={`#deletePostModal${id}`}
                   onClick={handleDeleteModal}
                   data-testid="deletePostModalBtn"
                 >
@@ -412,11 +416,9 @@ export default function OrgPostCard(
                 </li>
                 <li
                   data-testid="pinpostBtn"
-                  onClick={(): Promise<void> =>
-                    togglePostPin(props.id, props.pinned)
-                  }
+                  onClick={(): Promise<void> => togglePostPin(id, pinned)}
                 >
-                  {!props.pinned ? 'Pin post' : 'Unpin post'}
+                  {!pinned ? 'Pin post' : 'Unpin post'}
                 </li>
                 <li
                   className={styles.list}
@@ -430,28 +432,11 @@ export default function OrgPostCard(
           </div>
         )}
       </div>
-      <Modal show={showDeleteModal} onHide={toggleShowDeleteModal}>
-        <Modal.Header>
-          <h5>{t('deletePost')}</h5>
-          <Button variant="danger" onClick={toggleShowDeleteModal}>
-            <i className="fa fa-times"></i>
-          </Button>
-        </Modal.Header>
-        <Modal.Body>{t('deletePostMsg')}</Modal.Body>
-        <Modal.Footer>
-          <Button variant="danger" onClick={toggleShowDeleteModal}>
-            {tCommon('no')}
-          </Button>
-          <Button
-            type="button"
-            className="btn btn-success"
-            onClick={deletePost}
-            data-testid="deletePostBtn"
-          >
-            {tCommon('yes')}
-          </Button>
-        </Modal.Footer>
-      </Modal>
+      <DeletePostModal
+        show={showDeleteModal}
+        onHide={toggleShowDeleteModal}
+        onDelete={() => deletePost()}
+      />
       <Modal
         show={showEditModal}
         onHide={toggleShowEditModal}
@@ -494,7 +479,7 @@ export default function OrgPostCard(
               data-testid="updateText"
               required
             />
-            {!props.postPhoto && (
+            {!postPhoto && (
               <>
                 <Form.Label htmlFor="postPhoto">{t('image')}</Form.Label>
                 <Form.Control
@@ -522,10 +507,10 @@ export default function OrgPostCard(
                     }
                   }}
                 />
-                {props.postPhoto && (
+                {postPhoto && (
                   <>
                     {postformState.postphoto && (
-                      <div className={styles.preview}>
+                      <div className={styles.previewOrgPostCard}>
                         <img
                           src={postformState.postphoto}
                           alt="Post Image Preview"
@@ -543,7 +528,7 @@ export default function OrgPostCard(
                 )}
               </>
             )}
-            {!props.postVideo && (
+            {!postVideo && (
               <>
                 <Form.Label htmlFor="postvideo">{t('video')}</Form.Label>
                 <Form.Control
@@ -574,7 +559,7 @@ export default function OrgPostCard(
                   }}
                 />
                 {postformState.postvideo && (
-                  <div className={styles.preview}>
+                  <div className={styles.previewOrgPostCard}>
                     <video controls>
                       <source src={postformState.postvideo} type="video/mp4" />
                       {t('tag')}
diff --git a/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx b/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx
index 43018db0ab..aabc5f6640 100644
--- a/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx
+++ b/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx
@@ -1,6 +1,6 @@
 import React, { type ChangeEvent, type FC, useEffect, useState } from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
-import styles from './OrgActionItemCategories.module.css';
+import styles from '../../../style/app.module.css';
 import { useTranslation } from 'react-i18next';
 import type { InterfaceActionItemCategoryInfo } from 'utils/interfaces';
 import { useMutation } from '@apollo/client';
diff --git a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.module.css b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.module.css
deleted file mode 100644
index 919421b0f2..0000000000
--- a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.module.css
+++ /dev/null
@@ -1,138 +0,0 @@
-/* Button Styles */
-.addButton {
-  /* Position and size of the button */
-  width: 7em;
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-}
-
-/* Modal Styles */
-.createModal {
-  /* Position and size of the modal */
-  margin-top: 20vh;
-  margin-left: 13vw;
-  max-width: 80vw;
-}
-
-.icon {
-  /* Size and color of the icon */
-  transform: scale(1.5);
-  color: var(--bs-danger);
-  margin-bottom: 1rem;
-}
-
-.message {
-  /* Centering the content of the modal */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.titlemodal {
-  /* Styling for the modal title */
-  color: #707070;
-  font-weight: 600;
-  font-size: 32px;
-  width: 65%;
-  margin-bottom: 0px;
-}
-
-.modalCloseBtn {
-  /* Styling for the modal close button */
-  width: 40px;
-  height: 40px;
-  padding: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-/* Input Styles */
-.noOutline input {
-  /* Removing the outline from the input */
-  outline: none;
-}
-
-/* Header and Action Item Categories Styles */
-.btnsContainer {
-  /* Styling for the container of the buttons */
-  display: flex;
-  margin: 0.5rem 0 1.5rem 0;
-}
-
-.btnsContainer .input {
-  /* Styling for the input field */
-  flex: 1;
-  min-width: 18rem;
-  position: relative;
-}
-
-.btnsContainer input {
-  /* Styling for the input border */
-  outline: 1px solid var(--bs-gray-400);
-}
-
-.btnsContainer .input button {
-  /* Styling for the button in the input field */
-  width: 52px;
-}
-
-.inputField {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  background-color: white;
-  box-shadow: 0 1px 1px #31bb6b;
-}
-
-.inputField > button {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-/* Dropdown Styles */
-.dropdown {
-  /* Styling for the dropdown */
-  background-color: white;
-  border: 1px solid #31bb6b;
-  position: relative;
-  display: inline-block;
-  color: #31bb6b;
-}
-
-/* Datagrid Styles */
-.rowBackground {
-  /* Styling for the row background */
-  background-color: var(--bs-white);
-  max-height: 120px;
-}
-
-.tableHeader {
-  /* Styling for the table header */
-  background-color: var(--bs-primary);
-  color: var(--bs-white);
-  font-size: 1rem;
-}
-
-.chipIcon {
-  /* Styling for the chip icon */
-  height: 0.9rem !important;
-}
-
-.chip {
-  /* Styling for the chip */
-  height: 1.5rem !important;
-}
-
-.active {
-  /* Styling for the active state */
-  background-color: #31bb6a50 !important;
-}
-
-.pending {
-  /* Styling for the pending state */
-  background-color: #ffd76950 !important;
-  color: #bb952bd0 !important;
-  border-color: #bb952bd0 !important;
-}
diff --git a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx
index 49cf47dd49..3f1001c88b 100644
--- a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx
+++ b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Button, Dropdown, Form } from 'react-bootstrap';
-import styles from './OrgActionItemCategories.module.css';
+import styles from '../../../style/app.module.css';
 import { useTranslation } from 'react-i18next';
 
 import { useQuery } from '@apollo/client';
@@ -148,7 +148,10 @@ const OrgActionItemCategories: FC<InterfaceActionItemCategoryProps> = ({
   if (catError) {
     return (
       <div className={styles.message} data-testid="errorMsg">
-        <WarningAmberRounded className={styles.icon} fontSize="large" />
+        <WarningAmberRounded
+          className={styles.iconOrgActionItemCategories}
+          fontSize="large"
+        />
         <h6 className="fw-bold text-danger text-center">
           {tErrors('errorLoading', { entity: 'Action Item Categories' })}
           <br />
@@ -276,7 +279,9 @@ const OrgActionItemCategories: FC<InterfaceActionItemCategoryProps> = ({
   return (
     <div className="mx-4">
       {/* Header with search, filter  and Create Button */}
-      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+      <div
+        className={`${styles.btnsContainerOrgActionItemCategories} gap-4 flex-wrap`}
+      >
         <div className={`${styles.input} mb-1`}>
           <Form.Control
             type="name"
@@ -297,8 +302,7 @@ const OrgActionItemCategories: FC<InterfaceActionItemCategoryProps> = ({
           />
           <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}
             onClick={() => setSearchTerm(searchValue)}
             data-testid="searchBtn"
           >
diff --git a/src/components/UpdateSession/UpdateSession.css b/src/components/UpdateSession/UpdateSession.css
deleted file mode 100644
index 073bbf973d..0000000000
--- a/src/components/UpdateSession/UpdateSession.css
+++ /dev/null
@@ -1,96 +0,0 @@
-/* Card styles */
-.update-timeout-card {
-  width: 700px;
-  background: #ffffff;
-  border: none;
-  border-radius: 16px;
-  filter: drop-shadow(0px 4px 15.3px rgba(0, 0, 0, 0.08));
-  padding: 20px;
-}
-
-.update-timeout-card-header {
-  background: none;
-  padding: 16px;
-  border-bottom: none;
-}
-
-.update-timeout-card-title {
-  font-family: 'Lato', sans-serif;
-  font-weight: 600;
-  font-size: 24px;
-  color: #000000;
-}
-
-.update-timeout-card-body {
-  padding: 20px;
-}
-
-.update-timeout-current {
-  font-family: 'Lato', sans-serif;
-  font-weight: 400;
-  font-size: 16px;
-  color: #000000;
-  margin-bottom: 20px; /* Increased margin to create more space */
-}
-
-.update-timeout-label {
-  font-family: 'Lato', sans-serif;
-  font-weight: 400;
-  font-size: 16px;
-  color: #000000;
-  margin-bottom: 10px; /* Keep the same margin to maintain spacing with the slider */
-}
-
-.update-timeout-labels-container {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-}
-
-.update-timeout-value {
-  color: #14ae5c;
-  font-weight: bold;
-}
-
-.update-timeout-slider-labels {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.9rem;
-  color: #757575;
-}
-
-.update-timeout-button-container {
-  display: flex;
-  justify-content: right;
-  margin-top: 20px;
-}
-
-.update-timeout-button {
-  width: 112px;
-  height: 36px;
-  background: #31bb6b;
-  border-radius: 6px;
-  font-family: 'Lato', sans-serif;
-  font-weight: 500;
-  font-size: 16px;
-  color: #ffffff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  box-shadow: none;
-}
-
-.update-timeout-button:hover {
-  background-color: #28a745;
-  border-color: #28a745;
-  box-shadow: none;
-}
-
-.update-timeout-button:active {
-  transform: scale(0.98);
-}
-
-.update-timeout-slider-container {
-  position: relative;
-}
diff --git a/src/components/UpdateSession/UpdateSession.tsx b/src/components/UpdateSession/UpdateSession.tsx
index dace588aad..57cbe98901 100644
--- a/src/components/UpdateSession/UpdateSession.tsx
+++ b/src/components/UpdateSession/UpdateSession.tsx
@@ -8,7 +8,7 @@ import { GET_COMMUNITY_SESSION_TIMEOUT_DATA } from 'GraphQl/Queries/Queries';
 import { toast } from 'react-toastify';
 import { errorHandler } from 'utils/errorHandler';
 import { UPDATE_SESSION_TIMEOUT } from 'GraphQl/Mutations/mutations';
-import './UpdateSession.css';
+import styles from '../../style/app.module.css';
 import Loader from 'components/Loader/Loader';
 
 /**
@@ -127,17 +127,19 @@ const UpdateTimeout: React.FC<TestInterfaceUpdateTimeoutProps> = ({
 
   return (
     <>
-      <Card className="update-timeout-card rounded-4 shadow-sm">
-        <Card.Header className="update-timeout-card-header">
-          <div className="update-timeout-card-title">Login Session Timeout</div>
+      <Card className={`${styles.updateTimeoutCard} rounded-4 shadow-sm`}>
+        <Card.Header className={styles.updateTimeoutCardHeader}>
+          <div className={styles.updateTimeoutCardTitle}>
+            Login Session Timeout
+          </div>
         </Card.Header>
-        <Card.Body className="update-timeout-card-body">
+        <Card.Body className={styles.updateTimeoutCardBody}>
           <Form onSubmit={handleOnSubmit}>
-            <div className="update-timeout-labels-container">
-              <Form.Label className="update-timeout-current">
+            <div className={styles.updateTimeoutLabelsContainer}>
+              <Form.Label className={styles.updateTimeoutCurrent}>
                 Current Timeout:
                 <span
-                  className="update-timeout-value"
+                  className={styles.updateTimeoutValue}
                   data-testid="timeout-value"
                 >
                   {communityTimeout !== undefined
@@ -146,7 +148,7 @@ const UpdateTimeout: React.FC<TestInterfaceUpdateTimeoutProps> = ({
                 </span>
               </Form.Label>
 
-              <Form.Label className="update-timeout-label">
+              <Form.Label className={styles.updateTimeoutLabel}>
                 Update Timeout
               </Form.Label>
             </div>
@@ -176,7 +178,7 @@ const UpdateTimeout: React.FC<TestInterfaceUpdateTimeoutProps> = ({
             </Box>
 
             <div
-              className="update-timeout-slider-labels"
+              className={styles.updateTimeoutSliderLabels}
               data-testid="slider-labels"
             >
               <span>15 min</span>
@@ -184,11 +186,11 @@ const UpdateTimeout: React.FC<TestInterfaceUpdateTimeoutProps> = ({
               <span>45 min</span>
               <span>60 min</span>
             </div>
-            <div className="update-timeout-button-container">
+            <div className={styles.updateTimeoutButtonContainer}>
               <Button
                 type="submit"
                 variant="success"
-                className="update-timeout-button"
+                className={styles.updateTimeoutButton}
                 data-testid="update-button"
               >
                 Update
diff --git a/src/components/UserListCard/UserListCard.module.css b/src/components/UserListCard/UserListCard.module.css
deleted file mode 100644
index 187757a531..0000000000
--- a/src/components/UserListCard/UserListCard.module.css
+++ /dev/null
@@ -1,74 +0,0 @@
-.memberlist {
-  margin-top: -1px;
-}
-.memberimg {
-  width: 200px;
-  height: 100px;
-  border-radius: 7px;
-  margin-left: 20px;
-}
-.singledetails {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.singledetails p {
-  margin-bottom: -5px;
-}
-.singledetails_data_left {
-  margin-top: 10px;
-  margin-left: 10px;
-  color: #707070;
-}
-.singledetails_data_right {
-  justify-content: right;
-  margin-top: 10px;
-  text-align: right;
-  color: #707070;
-}
-.membername {
-  font-size: 16px;
-  font-weight: bold;
-}
-.memberfont {
-  margin-top: 3px;
-}
-.memberfont > span {
-  width: 80%;
-}
-.memberfontcreated {
-  margin-top: 18px;
-}
-.memberfontcreatedbtn {
-  margin-top: 33px;
-  border-radius: 7px;
-  border-color: #31bb6b;
-  background-color: #31bb6b;
-  color: white;
-  padding-right: 10px;
-  padding-left: 10px;
-  justify-content: flex-end;
-  float: right;
-  text-align: right;
-  box-shadow: none;
-}
-#grid_wrapper {
-  align-items: left;
-}
-.peoplelistdiv {
-  margin-right: 50px;
-}
-@media only screen and (max-width: 600px) {
-  .singledetails {
-    margin-left: 20px;
-  }
-  .memberimg {
-    margin: auto;
-  }
-  .singledetails_data_right {
-    margin-right: -52px;
-  }
-  .singledetails_data_left {
-    margin-left: 0px;
-  }
-}
diff --git a/src/components/UserListCard/UserListCard.tsx b/src/components/UserListCard/UserListCard.tsx
index 76ad110ea1..157c18f404 100644
--- a/src/components/UserListCard/UserListCard.tsx
+++ b/src/components/UserListCard/UserListCard.tsx
@@ -5,7 +5,7 @@ import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 
 import { ADD_ADMIN_MUTATION } from 'GraphQl/Mutations/mutations';
-import styles from './UserListCard.module.css';
+import styles from '../../style/app.module.css';
 import { useParams } from 'react-router-dom';
 import { errorHandler } from 'utils/errorHandler';
 
@@ -60,7 +60,10 @@ function userListCard(props: InterfaceUserListCardProps): JSX.Element {
 
   return (
     <>
-      <Button className={styles.memberfontcreatedbtn} onClick={addAdmin}>
+      <Button
+        className={styles.memberfontcreatedbtnUserListCard}
+        onClick={addAdmin}
+      >
         {t('addAdmin')}
       </Button>
     </>
diff --git a/src/components/UserPasswordUpdate/UserPasswordUpdate.module.css b/src/components/UserPasswordUpdate/UserPasswordUpdate.module.css
deleted file mode 100644
index 90b5c09be3..0000000000
--- a/src/components/UserPasswordUpdate/UserPasswordUpdate.module.css
+++ /dev/null
@@ -1,97 +0,0 @@
-/* .userupdatediv{
-  border: 1px solid #e8e5e5;
-  box-shadow: 2px 1px #e8e5e5;
-  padding:25px 16px;
-  border-radius: 5px;
-  background:#fdfdfd;
-} */
-.settingstitle {
-  color: #707070;
-  font-size: 20px;
-  margin-bottom: 30px;
-  text-align: center;
-  margin-top: -10px;
-}
-.dispflex {
-  display: flex;
-  justify-content: flex-start;
-  margin: 0 auto;
-}
-.dispbtnflex {
-  width: 90%;
-  margin-top: 20px;
-  display: flex;
-  margin: 0 30%;
-}
-.dispflex > div {
-  width: 50%;
-  margin-right: 50px;
-}
-
-.radio_buttons > input {
-  margin-bottom: 20px;
-  border: none;
-  box-shadow: none;
-  padding: 0 0;
-  border-radius: 5px;
-  background: none;
-  width: 50%;
-}
-
-.whitebtn {
-  margin: 1rem 0 0;
-  margin-top: 10px;
-  border: 1px solid #e8e5e5;
-  box-shadow: 0 2px 2px #e8e5e5;
-  padding: 10px 20px;
-  border-radius: 5px;
-  background: none;
-  width: 20%;
-  font-size: 16px;
-  color: #31bb6b;
-  outline: none;
-  font-weight: 600;
-  cursor: pointer;
-  float: left;
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s;
-}
-.greenregbtn {
-  margin: 1rem 0 0;
-  margin-top: 10px;
-  margin-right: 30px;
-  border: 1px solid #e8e5e5;
-  box-shadow: 0 2px 2px #e8e5e5;
-  padding: 10px 10px;
-  border-radius: 5px;
-  background-color: #31bb6b;
-  width: 20%;
-  font-size: 16px;
-  color: white;
-  outline: none;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s;
-}
-.radio_buttons {
-  width: 55%;
-  margin-top: 10px;
-  display: flex;
-  color: #707070;
-  font-weight: 600;
-  font-size: 14px;
-}
-.radio_buttons > input {
-  transform: scale(1.2);
-}
-.radio_buttons > label {
-  margin-top: -4px;
-  margin-left: 0px;
-  margin-right: 7px;
-}
-.idtitle {
-  width: 88%;
-}
diff --git a/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx b/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx
index 1ea75811c1..c3e6c21248 100644
--- a/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx
+++ b/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx
@@ -3,7 +3,7 @@ import { useMutation } from '@apollo/client';
 import { UPDATE_USER_PASSWORD_MUTATION } from 'GraphQl/Mutations/mutations';
 import { useTranslation } from 'react-i18next';
 import Button from 'react-bootstrap/Button';
-import styles from './UserPasswordUpdate.module.css';
+import styles from '../../style/app.module.css';
 import { toast } from 'react-toastify';
 import { Form } from 'react-bootstrap';
 
@@ -93,7 +93,7 @@ const UserUpdate: React.FC<
       <div id="userupdate" className={styles.userupdatediv}>
         <form>
           {/* <h3 className={styles.settingstitle}>Update Your Details</h3> */}
-          <div className={styles.dispflex}>
+          <div className={styles.dispflexUserPasswordUpdate}>
             <div>
               <label>{t('previousPassword')}</label>
               <Form.Control
@@ -112,7 +112,7 @@ const UserUpdate: React.FC<
               />
             </div>
           </div>
-          <div className={styles.dispflex}>
+          <div className={styles.dispflexUserPasswordUpdate}>
             <div>
               <label>{t('newPassword')}</label>
               <Form.Control
@@ -131,7 +131,7 @@ const UserUpdate: React.FC<
               />
             </div>
           </div>
-          <div className={styles.dispflex}>
+          <div className={styles.dispflexUserPasswordUpdate}>
             <div>
               <label>{t('confirmNewPassword')}</label>
               <Form.Control
diff --git a/src/components/Venues/VenueModal.module.css b/src/components/Venues/VenueModal.module.css
deleted file mode 100644
index e88b022187..0000000000
--- a/src/components/Venues/VenueModal.module.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.titlemodal {
-  color: #707070;
-  font-weight: 600;
-  font-size: 32px;
-  width: 65%;
-  margin-bottom: 0px;
-}
-
-.greenregbtn {
-  margin: 1rem 0 0;
-  margin-top: 10px;
-  border: 1px solid #e8e5e5;
-  box-shadow: 0 2px 2px #e8e5e5;
-  padding: 10px 10px;
-  border-radius: 5px;
-  background-color: #31bb6b;
-  width: 100%;
-  font-size: 16px;
-  color: white;
-  outline: none;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s;
-  width: 100%;
-}
-
-.preview {
-  display: flex;
-  position: relative;
-  width: 100%;
-  margin-top: 10px;
-  justify-content: center;
-}
-.preview img {
-  width: 400px;
-  height: auto;
-}
-
-.closeButtonP {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  background: transparent;
-  transform: scale(1.2);
-  cursor: pointer;
-  border: none;
-  color: #707070;
-  font-weight: 600;
-  font-size: 16px;
-  cursor: pointer;
-}
diff --git a/src/components/Venues/VenueModal.tsx b/src/components/Venues/VenueModal.tsx
index 1d0fbe0af4..0e3ab48466 100644
--- a/src/components/Venues/VenueModal.tsx
+++ b/src/components/Venues/VenueModal.tsx
@@ -246,7 +246,7 @@ const VenueModal = ({
             }}
           />
           {venueImage && (
-            <div className={styles.preview}>
+            <div className={styles.previewVenueModal}>
               <img src={imageURL} alt="Venue Image Preview" />
               <button
                 className={styles.closeButtonP}
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 79702a54be..b9f7d49328 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -56,6 +56,7 @@
   --table-bg-color: var(--grey-bg-color);
   --tablerow-bg-color: var(--dropdown-hover-color);
   --row-background: var(--bs-white, var(--bs-white));
+  --modal-background: rgba(0, 0, 0, 0.7);
 
   /* Font Sizes */
   --font-size-header: 16px;
@@ -97,6 +98,12 @@
   --grey-bg-color-dark: #707070;
   --dropdown-border-color: #cccccc;
   --primary-border-solid: 1px solid var(--dropdown-border-color);
+  --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  /* breakpoints */
+  --breakpoint-mobile: 576px;
+  --breakpoint-tablet: 768px;
+  --breakpoint-desktop: 1024px;
 }
 .fonts {
   color: var(--grey-bg-color-dark);
@@ -4365,3 +4372,1517 @@ button[data-testid='createPostBtn'] {
 .tableRow:last-child th {
   border: 0;
 }
+
+/* UpdateSession.tsx */
+
+.updateTimeoutCard {
+  width: 700px;
+  background: var(--white-color);
+  border: none;
+  border-radius: 16px;
+  filter: drop-shadow(0px 4px 15.3px rgba(0, 0, 0, 0.08));
+  padding: 20px;
+}
+
+.updateTimeoutCardHeader {
+  background: none;
+  padding: 16px;
+  border-bottom: none;
+}
+
+.updateTimeoutCardTitle {
+  font-family: 'Lato', sans-serif;
+  font-weight: 600;
+  font-size: 24px;
+  color: var(--black-color);
+}
+
+.updateTimeoutCardBody {
+  padding: 20px;
+}
+
+.updateTimeoutCurrent {
+  font-family: 'Lato', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  color: var(--black-color);
+  margin-bottom: 20px;
+}
+
+.updateTimeoutLabel {
+  font-family: 'Lato', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  color: var(--black-color);
+  margin-bottom: 10px;
+}
+
+.updateTimeoutLabelsContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+.updateTimeoutValue {
+  color: var(--light-more-green);
+  font-weight: bold;
+}
+
+.updateTimeoutSliderLabels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.9rem;
+  color: var(--grey-dark);
+}
+
+.updateTimeoutButtonContainer {
+  display: flex;
+  justify-content: right;
+  margin-top: 20px;
+}
+
+.updateTimeoutButton {
+  width: 112px;
+  height: 36px;
+  background: var(--light-green);
+  border-radius: 6px;
+  font-family: 'Lato', sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--white-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  box-shadow: none;
+}
+
+.updateTimeoutButton:hover {
+  background-color: var(--light-more-green);
+  border-color: var(--light-more-green);
+  box-shadow: none;
+}
+
+.updateTimeoutButton:active {
+  transform: scale(0.98);
+}
+
+/* UserListCard.tsx */
+
+.memberlist {
+  margin-top: -1px;
+}
+
+.memberimg {
+  width: 12.5rem;
+  height: 6.25rem;
+  border-radius: 7px;
+  margin-left: 20px;
+}
+
+.singledetails {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.singledetails p {
+  margin-bottom: -5px;
+}
+
+.singledetails_data_left {
+  margin-top: 10px;
+  margin-left: 10px;
+  color: var(--grey-dark);
+}
+
+.singledetails_data_right {
+  justify-content: right;
+  margin-top: 10px;
+  text-align: right;
+  color: var(--grey-dark);
+}
+
+.membername {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.memberfont {
+  margin-top: 3px;
+}
+
+.memberfont > span {
+  width: 80%;
+}
+
+.memberfontcreated {
+  margin-top: 18px;
+}
+
+.memberfontcreatedbtnUserListCard {
+  margin-top: 33px;
+  border-radius: 7px;
+  border-color: var(--light-green);
+  background-color: var(--light-green);
+  color: var(--white-color);
+  padding-right: 10px;
+  padding-left: 10px;
+  justify-content: flex-end;
+  float: right;
+  text-align: right;
+  box-shadow: none;
+}
+
+@media only screen and (max-width: var(--breakpoint-mobile)) {
+  .singledetails {
+    margin-left: 20px;
+  }
+
+  .memberimg {
+    margin: auto;
+  }
+
+  .singledetails_data_right {
+    margin-right: -52px;
+  }
+
+  .singledetails_data_left {
+    margin-left: 0px;
+  }
+}
+
+/* UserPasswordUpdate.tsx */
+
+.userupdatediv {
+  border: 1px solid var(--grey-border);
+  box-shadow: 2px 1px var(--grey-border);
+  padding: 25px 16px;
+  border-radius: 5px;
+  background: var(--white-color);
+}
+
+.dispflexUserPasswordUpdate {
+  display: flex;
+  justify-content: flex-start;
+  margin: 0 auto;
+}
+
+.dispbtnflex {
+  width: 90%;
+  display: flex;
+  margin: 20px 30% 0 30%;
+}
+
+.dispflexUserPasswordUpdate > div {
+  width: 50%;
+  margin-right: 50px;
+}
+
+.whitebtn {
+  margin: 1rem 0 0;
+  margin-top: 10px;
+  border: 1px solid var(--grey-border);
+  box-shadow: 0 2px 2px var(--grey-border);
+  padding: 10px 20px;
+  border-radius: 5px;
+  background: none;
+  width: 20%;
+  font-size: 16px;
+  color: var(--light-green);
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  float: left;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+
+/* VenueModal.tsx */
+
+.previewVenueModal {
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  justify-content: center;
+}
+
+.previewVenueModal img {
+  width: 400px;
+  height: auto;
+}
+
+.closeButtonP {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background: transparent;
+  transform: scale(1.2);
+  cursor: pointer;
+  border: none;
+  color: var(--grey-dark);
+  font-weight: 600;
+  font-size: 16px;
+}
+
+/* YearlyEventCalender.tsx */
+
+.calendar__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  background-color: var(--grey-dark);
+  height: 60px;
+}
+
+.calendar__days {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  grid-template-rows: repeat(6, 1fr);
+}
+
+.day__outside {
+  color: var(--grey-dark) !important;
+}
+
+.day__selected {
+  background-color: var(--blue-primary);
+  color: var(--grey-dark);
+}
+
+.day__today {
+  background-color: var(--light-neon-green);
+  font-weight: 700;
+  text-decoration: underline;
+  color: var(--light-green);
+}
+
+.yearlyCalender {
+  background-color: var(--white-color);
+  box-sizing: border-box;
+}
+
+.closebtnYearlyEventCalender {
+  padding: 10px;
+}
+
+.yearlyCalendarHeader {
+  display: flex;
+  flex-direction: row;
+}
+
+.yearlyCalendarHeader > div {
+  font-weight: 600;
+  font-size: 2rem;
+  padding: 0 10px;
+  color: var(--grey-dark);
+}
+
+.cardYearlyEventCalender {
+  padding: 16px;
+  text-align: center;
+  height: 21rem;
+}
+
+.cardHeaderYearlyEventCalender {
+  text-align: left;
+}
+
+.rowYearlyEventCalender {
+  margin: 1px -5px;
+}
+
+.rowYearlyEventCalender:after {
+  content: '';
+  display: table;
+  clear: both;
+  margin: 0 -5px;
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.weekday__yearly {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--white-color);
+  font-weight: 600;
+}
+
+.columnYearlyEventCalender {
+  float: left;
+  width: 25%;
+  padding: 10px;
+}
+
+.btn__more {
+  border: 0px;
+  font-size: 14px;
+  background-color: initial;
+  font-weight: 600;
+  transition: all 200ms;
+  position: relative;
+  display: block;
+  margin: -9px;
+  margin-top: -28px;
+}
+
+.btn__more:hover {
+  color: var(--light-green);
+}
+
+.expand_event_list {
+  display: block;
+}
+
+.expand_list_container {
+  width: 200px;
+  max-height: 250px;
+  z-index: 10;
+  position: absolute;
+  left: auto;
+  right: auto;
+  overflow: auto;
+  padding: 10px 4px 0px 4px;
+  background-color: var(--grey-bg-color);
+  border: 1px solid var(--grey-border);
+  border-radius: 5px;
+  margin: 5px;
+}
+
+@media only screen and (max-width: var(--breakpoint-tablet)) {
+  .event_list {
+    display: none;
+  }
+
+  .expand_list_container {
+    width: 150px;
+    padding: 4px 4px 0px 4px;
+  }
+}
+
+@media only screen and (max-width: var(--breakpoint-mobile)) {
+  .btn__more {
+    font-size: 12px;
+  }
+
+  .columnYearlyEventCalender {
+    float: left;
+    width: 100%;
+    padding: 10px;
+  }
+}
+
+/* AgendaItems */
+
+.titlemodalAgendaItems {
+  color: var(--bs-gray-600);
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid var(--bs-primary);
+  width: 65%;
+}
+
+.agendaItemsOptionsButton {
+  width: 24px;
+  height: 24px;
+}
+
+.agendaItemModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.greenregbtnAgendaItems {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid var(--bs-gray-300);
+  box-shadow: 0 2px 2px var(--bs-gray-300);
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: var(--bs-primary);
+  width: 100%;
+  font-size: 16px;
+  color: var(--bs-white);
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+
+.previewFile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.previewFile img,
+.previewFile video {
+  width: 100%;
+  max-width: 400px;
+  height: auto;
+  margin-bottom: 10px;
+}
+
+.attachmentPreview {
+  position: relative;
+  width: 100%;
+}
+
+.closeButtonFile {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: transparent;
+  transform: scale(1.2);
+  cursor: pointer;
+  border: none;
+  color: var(--grey-dark);
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.categoryContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+}
+
+.categoryChip {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--grey-bg-color);
+  border-radius: 16px;
+  padding: 0 12px;
+  font-size: 14px;
+  height: 32px;
+  margin: 5px;
+}
+
+.urlListItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 0;
+}
+
+.urlIcon {
+  margin-right: 10px;
+}
+
+.deleteButtonAgendaItems {
+  margin-left: auto;
+  padding: 2px 5px;
+}
+
+.urlListItem a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.urlListItem a:hover {
+  text-decoration: underline;
+}
+
+.agendaItemRow {
+  border: 1px solid var(--grey-border);
+  border-radius: 4px;
+  transition: box-shadow 0.2s ease;
+  background-color: var(--white-color);
+}
+
+.agendaItemRow:hover {
+  background-color: var(--white-color);
+}
+
+.dragging {
+  box-shadow: 0 4px 8px var(--grey-border-box-color);
+  z-index: 1000;
+  background-color: var(--grey-bg-color);
+}
+
+.droppable {
+  background-color: var(--grey-bg-color);
+}
+
+.droppableDraggingOver {
+  background-color: var(--grey-bg-color);
+}
+
+.tableHeadAgendaItems {
+  background-color: var(--light-green) !important;
+  color: var(--white);
+  border-radius: 20px 20px 0px 0px !important;
+  padding: 20px;
+}
+
+@media (max-width: 768px) {
+  .agendaItemModal {
+    margin: 10vh auto;
+    max-width: 90%;
+  }
+
+  .titlemodalAgendaItems {
+    width: 90%;
+  }
+
+  .greenregbtnAgendaItems {
+    width: 90%;
+  }
+}
+
+@media (max-width: 576px) {
+  .agendaItemModal {
+    margin: 5vh auto;
+    max-width: 95%;
+  }
+
+  .titlemodalAgendaItems {
+    width: 100%;
+  }
+
+  .greenregbtnAgendaItems {
+    width: 100%;
+  }
+}
+
+/* AddOnStore.tsx */
+
+.containerAddOnStore {
+  display: flex;
+  flex-direction: column;
+  background: var(--white);
+  margin: 2px;
+  padding: 10px;
+  border-radius: 20px;
+}
+
+.colAddOnStore {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.inputAddOnStore {
+  display: flex;
+  position: relative;
+  width: 560px;
+}
+
+.cardGridItem {
+  width: 38vw;
+}
+
+.justifyspAddOnStore {
+  display: grid;
+  width: 100%;
+  justify-content: space-between;
+  align-items: baseline;
+  grid-template-rows: auto;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0.8rem 0.4rem;
+}
+
+@media screen and (max-width: 600px) {
+  .cardGridItem {
+    width: 100%;
+  }
+  .justifyspAddOnStore {
+    grid-template-columns: 1fr;
+    justify-content: center;
+    align-items: start;
+  }
+}
+
+/* Advertisements.tsx */
+
+.containerAdvertisements {
+  background-color: var(--white);
+  border-radius: 20px;
+}
+
+.justifyspAdvertisements {
+  display: grid;
+  width: 100%;
+  margin-top: 30px;
+}
+
+.colAdvertisements {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+}
+
+.inputAdvertisements {
+  display: flex;
+  position: relative;
+  width: 560px;
+}
+
+.listBoxAdvertisements {
+  display: grid;
+  width: 100%;
+  grid-template-rows: auto;
+  grid-template-columns: repeat(6, 1fr);
+  grid-gap: 0.8rem 0.4rem;
+}
+
+/* AdvertisementRegister.tsx */
+
+.modalbtn {
+  margin-top: 1rem;
+  display: flex !important;
+  margin-left: auto;
+  align-items: center;
+}
+
+.modalbtn i,
+.button i {
+  height: min-content;
+  margin-right: 4px;
+}
+
+.previewAdvertisementRegister {
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  justify-content: center;
+}
+
+.previewAdvertisementRegister img {
+  width: 400px;
+  height: auto;
+}
+
+.previewAdvertisementRegister video {
+  width: 400px;
+  height: auto;
+}
+
+.closeButtonAdvertisementRegister {
+  background: transparent;
+  cursor: pointer;
+  border: none;
+  color: var(--grey-dark);
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+
+.buttonAdvertisementRegister {
+  min-width: 102px;
+}
+
+.editHeader {
+  background-color: var(--light-green);
+  color: var(--white-color);
+}
+
+.link_check {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+/* EventCalendar.tsx */
+
+.calendar {
+  font-family: sans-serif;
+  font-size: 1.2rem;
+  margin-bottom: 20px;
+  background: var(--grey-bg-color);
+  border-radius: 10px;
+  padding: 5px;
+}
+
+.calendar__header {
+  display: flex;
+  align-items: center;
+  margin: 2rem 10px 0px 10px;
+}
+
+.calendar__header_month {
+  margin: 0.5rem;
+  color: var(--grey-dark);
+  font-weight: 800;
+  font-size: 55px;
+  display: flex;
+  gap: 23px;
+  flex-direction: row;
+}
+
+.calendar__header_month div {
+  font-weight: 400;
+  color: var(--black-color);
+  font-family: Outfit;
+}
+
+.buttonEventCalendar {
+  border-radius: 100px;
+  color: var(--bs-gray-600);
+  background-color: var(--black-shadow-color);
+  font-weight: bold;
+  border: 0px;
+  font-size: 20px;
+}
+
+.calendar__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  background-color: var(--black-color);
+  font-family: Outfit;
+  height: 60px;
+}
+
+.calendar__scroll {
+  height: 80vh;
+  padding: 10px;
+}
+
+.weekday {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--white);
+  font-weight: 600;
+}
+
+.calendar__days {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  grid-template-rows: repeat(6, 1fr);
+}
+
+.calendar_hour_text_container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  border-right: 1px solid var(--grey-border);
+  width: 40px;
+}
+
+.calendar_timezone_text {
+  top: -10px;
+  left: -11px;
+  position: relative;
+  color: var(--grey-dark);
+  font-size: 9px;
+}
+
+.calendar_hour_block {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid var(--grey-border);
+  position: relative;
+  height: 50px;
+  border-bottom-right-radius: 5px;
+}
+
+.btn__more {
+  border: 0px;
+  font-size: 14px;
+  background-color: initial;
+  color: var(--gray-blue);
+  font-weight: 600;
+  transition: all 200ms;
+  position: relative;
+  display: block;
+  margin: 2px;
+}
+
+.btn__more:hover {
+  color: var(--grey-dark);
+}
+
+.event_list_parent {
+  position: relative;
+  width: 100%;
+}
+
+.event_list_parent_current {
+  background-color: var(--grey-bg-color);
+  position: relative;
+  width: 100%;
+}
+
+.dummyWidth {
+  width: 1px;
+}
+
+.day {
+  background-color: var(--white);
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+  border-radius: 10px;
+  margin: 5px;
+  background-color: var(--white);
+  border: 1px solid var(--grey-border);
+  color: var(--grey-dark);
+  font-weight: 600;
+  height: 9rem;
+  position: relative;
+}
+
+.day_weekends {
+  background-color: var(--black-shadow-color);
+}
+
+.day__outside {
+  background-color: var(--white);
+  color: var(--grey-dark);
+}
+
+.day__selected {
+  background-color: var(--blue-primary);
+  color: var(--grey-dark);
+}
+
+.day__today {
+  background-color: var(--grey-bg-color);
+  font-weight: 700;
+  text-decoration: underline;
+  color: var(--light-green);
+}
+
+.day__events {
+  background-color: var(--white);
+}
+
+.expand_event_list {
+  display: block;
+}
+
+.event_list_hour {
+  display: flex;
+  flex-direction: row;
+}
+
+.expand_list_container {
+  width: 200px;
+  max-height: 250px;
+  z-index: 10;
+  position: absolute;
+  left: auto;
+  right: auto;
+  overflow: auto;
+  padding: 10px 4px 0px 4px;
+  background-color: var(--black-shadow-color);
+  border: 1px solid var(--grey-border);
+  border-radius: 5px;
+  margin: 5px;
+}
+
+.holidays_card {
+  background-color: var(--black-shadow-color);
+}
+
+.events_card {
+  background-color: var(--white);
+}
+
+.holidayText {
+  font-size: 14px;
+  color: var(--grey-dark);
+}
+
+.eventsLegend {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.list_container {
+  padding: 5px;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.holidayIndicator {
+  background-color: var(--grey-bg-color-dark);
+}
+
+.organizationIndicator {
+  background-color: var(--gray-blue);
+}
+
+.legendText {
+  font-size: 14px;
+  color: var(--grey-dark);
+}
+
+.card_list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.card_list_item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: var(--grey-bg-color-dark);
+}
+
+.holiday_date {
+  font-weight: 500;
+  margin-right: 10px;
+  color: var(--burnt-orange);
+}
+
+.calendar_infocards {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 20px;
+  background-color: var(--grey-bg-color);
+}
+
+.holidays_card,
+.events_card {
+  flex: 1;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: var(--card-shadow);
+}
+
+.holidays_card {
+  background-color: var(--white);
+}
+
+.events_card {
+  background-color: var(--white-color);
+}
+
+.legend {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.card_list_item:hover {
+  background-color: var(--grey-bg-color-dark);
+  transition: background-color 0.2s ease;
+}
+
+.card_list_item:focus-visible {
+  background-color: var(--grey-bg-color-dark);
+  transition: background-color 0.2s ease;
+}
+
+@media only screen and (max-width: var(--breakpoint-mobile)) {
+  .btn__more {
+    font-size: 12px;
+  }
+}
+
+@media only screen and (max-width: var(--breakpoint-tablet)) {
+  .holidayIndicator,
+  .organizationIndicator {
+    width: 16px;
+    height: 10px;
+  }
+
+  .expand_list_container {
+    width: 150px;
+    padding: 4px 4px 0px 4px;
+  }
+}
+
+/* EventHeader.tsx */
+
+.calendarEventHeader {
+  width: 100%;
+  margin-bottom: 20px;
+  background: var(--grey-bg-color);
+  border-radius: 10px;
+  padding: 5px;
+}
+
+.flex_grow {
+  flex-grow: 1;
+}
+
+.space {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.createButtonEventHeader {
+  background-color: var(--grey-bg-color);
+  color: var(--black-color);
+  width: 130px;
+  margin-left: 5px;
+  border: 1px solid var(--brown-color);
+}
+
+.createButtonEventHeader:hover {
+  background-color: var(--grey-bg-color);
+  color: var(--black-color);
+  border: 1px solid var(--brown-color);
+}
+
+.selectTypeEventHeader {
+  border-radius: 10px;
+  margin-left: 5px;
+}
+
+/* EventListCardModals.tsx */
+
+.dispflexEventListCardModals {
+  display: flex;
+  cursor: pointer;
+  justify-content: space-between;
+  margin: 10px 5px 5px 0px;
+}
+
+.eventtitle {
+  margin-bottom: 0px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.checkboxdivEventListCardModals > div label {
+  margin-right: 50px;
+}
+
+.checkboxdivEventListCardModals > label > input {
+  margin-left: 10px;
+}
+
+.dispflexEventListCardModals > input {
+  width: 20%;
+  border: none;
+  box-shadow: none;
+  margin-top: 5px;
+}
+
+.checkboxContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.checkboxdivEventListCardModals {
+  display: flex;
+  flex-direction: column;
+}
+
+.previewEventListCardModals {
+  display: flex;
+  flex-direction: row;
+  font-weight: 700;
+  font-size: 16px;
+  color: var(--black-color);
+  margin: 0;
+}
+
+@media only screen and (max-width: 600px) {
+  .checkboxContainer {
+    flex-direction: column;
+  }
+
+  .datediv {
+    flex-direction: column;
+  }
+
+  .datediv > div {
+    width: 100%;
+    margin-left: 0;
+    margin-bottom: 10px;
+  }
+
+  .datediv > div p {
+    margin-bottom: 5px;
+  }
+}
+
+.customButton {
+  width: 90%;
+  margin: 0 auto;
+}
+
+/* EventListCard.tsx */
+
+.cardsEventListCard {
+  width: 100%;
+  background: var(--subtle-blue-grey) !important;
+  padding: 2px 3px;
+  border-radius: 5px;
+  border: 1px solid var(--grey-border);
+  box-shadow: 0 3px 2px var(--grey-border-box-color);
+  color: var(--grey-dark);
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s;
+  margin-bottom: 5px;
+}
+
+.cardsEventListCard h2 {
+  font-size: 15px;
+  color: var(--grey-dark);
+  font-weight: 500;
+}
+
+.cardsEventListCard > h3 {
+  font-size: 17px;
+}
+
+.cardsEventListCard > p {
+  font-size: 14px;
+  margin-top: 0px;
+  margin-bottom: 7px;
+}
+
+.cardsEventListCard a {
+  color: var(--white-color);
+  font-weight: 600;
+}
+
+.cardsEventListCard a:hover {
+  color: var(--black-color);
+}
+
+.cardsEventListCard:last-child:nth-last-child(odd) {
+  grid-column: auto / span 2;
+}
+
+.cardsEventListCard:first-child:nth-last-child(even),
+.cardsEventListCard:first-child:nth-last-child(even) ~ .box {
+  grid-column: auto / span 1;
+}
+
+.dispflexEventListCard {
+  display: flex;
+  cursor: pointer;
+  justify-content: space-between;
+  margin: 10px 5px 5px 0px;
+}
+
+.dispflexEventListCard > input {
+  width: 20%;
+  border: none;
+  box-shadow: none;
+  margin-top: 5px;
+}
+
+/* OrgPostCard.tsx */
+
+.cardOrgPostCard {
+  width: 100%;
+  height: 20rem;
+  margin-bottom: 2rem;
+}
+
+.cardsOrgPostCard h2 {
+  font-size: 20px;
+}
+
+.cardsOrgPostCard > h3 {
+  font-size: 17px;
+}
+
+.cardOrgPostCard {
+  width: 100%;
+  height: 20rem;
+  margin-bottom: 2rem;
+}
+
+.cardsOrgPostCard:hover {
+  filter: brightness(0.8);
+}
+
+.cardsOrgPostCard:hover::before {
+  opacity: 0.5;
+}
+
+.postimageOrgPostCard {
+  border-radius: 0px;
+  width: 100%;
+  height: 12rem;
+  max-width: 100%;
+  max-height: 12rem;
+  object-fit: cover;
+  position: relative;
+  color: var(--black-color);
+}
+
+.previewOrgPostCard {
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  justify-content: center;
+}
+
+.previewOrgPostCard img {
+  width: 400px;
+  height: auto;
+}
+
+.previewOrgPostCard video {
+  width: 400px;
+  height: auto;
+}
+
+.nopostimage {
+  border-radius: 0px;
+  width: 100%;
+  height: 12rem;
+  max-height: 12rem;
+  object-fit: cover;
+  position: relative;
+}
+
+.menuModal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--black-shadow-color);
+  z-index: 100;
+}
+
+.modalOrgPostCard {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--modal-background);
+  z-index: 100;
+}
+
+.modalContentOrgPostCard {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--white);
+  padding: 20px;
+  max-width: 800px;
+  max-height: 600px;
+  overflow: auto;
+}
+
+.modalImage {
+  flex: 1;
+  margin-right: 20px;
+  width: 25rem;
+  height: 15rem;
+}
+
+.modalImage img,
+.modalImage video {
+  border-radius: 0px;
+  width: 100%;
+  height: 25rem;
+  max-width: 25rem;
+  max-height: 15rem;
+  object-fit: cover;
+  position: relative;
+}
+
+.modalInfo {
+  flex: 1;
+}
+
+.titleOrgPostCard {
+  font-size: 16px;
+  color: var(--black-color);
+  font-weight: 600;
+}
+
+.textOrgPostCard {
+  font-size: 13px;
+  color: var(--black-color);
+  font-weight: 300;
+}
+
+.author {
+  color: var(--grey-dark);
+  font-weight: 100;
+  font-size: 13px;
+}
+
+.closeButtonOrgPostCard {
+  position: relative;
+  bottom: 5rem;
+  right: 10px;
+  padding: 4px;
+  background-color: var(--red-delete-bg);
+  color: var(--white-color);
+  border: none;
+  cursor: pointer;
+}
+
+.closeButtonP {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background: transparent;
+  transform: scale(1.2);
+  cursor: pointer;
+  border: none;
+  color: var(--grey-dark);
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.cardsOrgPostCard:hover::after {
+  opacity: 1;
+  mix-blend-mode: normal;
+}
+
+.cardsOrgPostCard > p {
+  font-size: 14px;
+  margin-top: 0px;
+  margin-bottom: 7px;
+}
+
+.cardsOrgPostCard a {
+  color: var(--grey-dark);
+  font-weight: 600;
+}
+
+.cardsOrgPostCard a:hover {
+  color: var(--black-color);
+}
+
+.infodiv {
+  margin-bottom: 7px;
+  width: 15rem;
+  text-align: justify;
+  word-wrap: break-word;
+}
+
+.infodiv > p {
+  margin: 0;
+}
+
+.cardsOrgPostCard:last-child:nth-last-child(odd) {
+  grid-column: auto / span 2;
+}
+
+.cardsOrgPostCard:first-child:nth-last-child(even),
+.cardsOrgPostCard:first-child:nth-last-child(even) ~ .box {
+  grid-column: auto / span 1;
+}
+
+.toggleClickBtn {
+  color: var(--light-green);
+  cursor: pointer;
+  border: none;
+  font-size: 12px;
+  background-color: var(--white-color);
+}
+
+.toggleClickBtnNone {
+  display: none;
+}
+
+.menuContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--white-color);
+  padding-top: 20px;
+  max-width: 700px;
+  max-height: 500px;
+  overflow: hidden;
+  position: relative;
+}
+
+.menuOptions {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.menuOptions li {
+  padding: 10px;
+  border-bottom: 1px solid var(--grey-border);
+  padding-left: 100px;
+  padding-right: 100px;
+  cursor: pointer;
+}
+
+.moreOptionsButton {
+  position: relative;
+  bottom: 5rem;
+  right: 10px;
+  padding: 2px;
+  background-color: transparent;
+  color: var(--black-color);
+  border: none;
+  cursor: pointer;
+}
+
+.list {
+  color: var(--red-delete-text);
+  cursor: pointer;
+}
+
+/* OrgActionItemCategories.tsx */
+
+.iconOrgActionItemCategories {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.btnsContainerOrgActionItemCategories {
+  display: flex;
+  margin: 0.5rem 0 1.5rem 0;
+}
+
+.btnsContainerOrgActionItemCategories .input {
+  flex: 1;
+  min-width: 18rem;
+  position: relative;
+}
+
+.btnsContainerOrgActionItemCategories input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainerOrgActionItemCategories .input button {
+  width: 52px;
+}
+
+/* CategoryModal.tsx */
+
+.createModal {
+  margin-top: 20vh;
+  margin-left: 13vw;
+  max-width: 80vw;
+}