diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.module.css b/src/screens/FundCampaignPledge/FundCampaignPledge.module.css
deleted file mode 100644
index cdf4476267..0000000000
--- a/src/screens/FundCampaignPledge/FundCampaignPledge.module.css
+++ /dev/null
@@ -1,273 +0,0 @@
-.pledgeContainer {
-  margin: 0.6rem 0;
-}
-
-.container {
-  min-height: 100vh;
-}
-
-.pledgeModal {
-  max-width: 80vw;
-  margin-top: 2vh;
-  margin-left: 13vw;
-}
-
-.titlemodal {
-  color: #707070;
-  font-weight: 600;
-  font-size: 32px;
-  width: 65%;
-  margin-bottom: 0px;
-}
-
-.modalCloseBtn {
-  width: 40px;
-  height: 40px;
-  padding: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.greenregbtn {
-  margin: 1rem 0 0;
-  margin-top: 15px;
-  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%;
-}
-.message {
-  margin-top: 25%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.errorIcon {
-  transform: scale(1.5);
-  color: var(--bs-danger);
-  margin-bottom: 1rem;
-}
-
-.btnsContainer {
-  display: flex;
-  gap: 0.8rem;
-  margin: 2.2rem 0 0.8rem 0;
-}
-
-.btnsContainer .input {
-  flex: 1;
-  min-width: 18rem;
-  position: relative;
-}
-
-.btnsContainer input {
-  outline: 1px solid var(--bs-gray-400);
-}
-
-.btnsContainer .input button {
-  width: 52px;
-}
-
-.inputField {
-  background-color: white;
-  box-shadow: 0 1px 1px #31bb6b;
-}
-
-.dropdown {
-  background-color: white;
-  border: 1px solid #31bb6b;
-  position: relative;
-  display: inline-block;
-  color: #31bb6b;
-}
-
-.tableHeader {
-  background-color: var(--bs-primary);
-  color: var(--bs-white);
-  font-size: 1rem;
-}
-
-.rowBackground {
-  background-color: var(--bs-white);
-  max-height: 120px;
-}
-
-.TableImage {
-  object-fit: cover;
-  width: 25px !important;
-  height: 25px !important;
-  border-radius: 100% !important;
-}
-
-.avatarContainer {
-  width: 28px;
-  height: 26px;
-}
-
-.imageContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pledgerContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0.1rem 0.25rem;
-  gap: 0.25rem;
-  padding: 0.25rem 0.45rem;
-  border-radius: 0.35rem;
-  background-color: #31bb6b33;
-  height: 2.2rem;
-  margin-top: 0.75rem;
-}
-
-.noOutline input {
-  outline: none;
-}
-
-.overviewContainer {
-  display: flex;
-  gap: 7rem;
-  width: 100%;
-  justify-content: space-between;
-  margin: 1.5rem 0 0 0;
-  padding: 1.25rem 2rem;
-  background-color: rgba(255, 255, 255, 0.591);
-
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-  border-radius: 0.5rem;
-}
-
-.titleContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-}
-
-.titleContainer h3 {
-  font-size: 1.75rem;
-  font-weight: 750;
-  color: #5e5e5e;
-  margin-top: 0.2rem;
-}
-
-.titleContainer span {
-  font-size: 0.9rem;
-  margin-left: 0.5rem;
-  font-weight: lighter;
-  color: #707070;
-}
-
-.raisedAmount {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1.25rem;
-  font-weight: 750;
-  color: #5e5e5e;
-}
-
-.progressContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex-grow: 1;
-}
-
-.progress {
-  margin-top: 0.2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-
-.endpoints {
-  display: flex;
-  position: relative;
-  font-size: 0.85rem;
-}
-
-.start {
-  position: absolute;
-  top: 0px;
-}
-
-.end {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-}
-
-.moreContainer {
-  display: flex;
-  align-items: center;
-}
-
-.moreContainer:hover {
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.popup {
-  z-index: 50;
-  border-radius: 0.5rem;
-  font-family: sans-serif;
-  font-weight: 500;
-  font-size: 0.875rem;
-  margin-top: 0.5rem;
-  padding: 0.75rem;
-  border: 1px solid #e2e8f0;
-  background-color: white;
-  color: #1e293b;
-  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.15);
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.popupExtra {
-  max-height: 15rem;
-  overflow-y: auto;
-}
-
-.toggleGroup {
-  width: 50%;
-  min-width: 27.75rem;
-  margin: 0.5rem 0rem;
-}
-
-.toggleBtn {
-  padding: 0rem;
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.toggleBtn:hover {
-  color: #31bb6b !important;
-}
-
-input[type='radio']:checked + label {
-  background-color: #31bb6a50 !important;
-}
-
-input[type='radio']:checked + label:hover {
-  color: black !important;
-}
diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
index d14ee9de06..8942265eea 100644
--- a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
+++ b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
@@ -9,7 +9,7 @@ import { Button, Dropdown, Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { Navigate, useParams } from 'react-router-dom';
 import { currencySymbols } from 'utils/currency';
-import styles from './FundCampaignPledge.module.css';
+import styles from '../../style/app.module.css';
 import PledgeDeleteModal from './PledgeDeleteModal';
 import PledgeModal from './PledgeModal';
 import { Breadcrumbs, Link, Stack, Typography } from '@mui/material';
@@ -233,14 +233,14 @@ const fundCampaignPledge = (): JSX.Element => {
                       src={user.image}
                       alt="pledge"
                       data-testid={`image${index + 1}`}
-                      className={styles.TableImage}
+                      className={styles.TableImagePledge}
                     />
                   ) : (
                     <div className={styles.avatarContainer}>
                       <Avatar
                         key={user._id + '1'}
-                        containerStyle={styles.imageContainer}
-                        avatarStyle={styles.TableImage}
+                        containerStyle={styles.imageContainerPledge}
+                        avatarStyle={styles.TableImagePledge}
                         name={user.firstName + ' ' + user.lastName}
                         alt={user.firstName + ' ' + user.lastName}
                       />
@@ -425,14 +425,14 @@ const fundCampaignPledge = (): JSX.Element => {
             >
               <input
                 type="radio"
-                className={`btn-check ${styles.toggleBtn}`}
+                className={`btn-check ${styles.toggleBtnPledge}`}
                 name="btnradio"
                 id="pledgedRadio"
                 checked={progressIndicator === 'pledged'}
                 onChange={() => setProgressIndicator('pledged')}
               />
               <label
-                className={`btn btn-outline-primary ${styles.toggleBtn}`}
+                className={`btn btn-outline-primary ${styles.toggleBtnPledge}`}
                 htmlFor="pledgedRadio"
               >
                 {t('pledgedAmount')}
@@ -447,7 +447,7 @@ const fundCampaignPledge = (): JSX.Element => {
                 checked={progressIndicator === 'raised'}
               />
               <label
-                className={`btn btn-outline-primary ${styles.toggleBtn}`}
+                className={`btn btn-outline-primary ${styles.toggleBtnPledge}`}
                 htmlFor="raisedRadio"
               >
                 {t('raisedAmount')}
@@ -470,14 +470,14 @@ const fundCampaignPledge = (): JSX.Element => {
           </div>
         </div>
       </div>
-      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
-        <div className={`${styles.input} mb-1`}>
+      <div className={`${styles.btnsContainerPledge} gap-4 flex-wrap`}>
+        <div className={`${styles.inputPledge} mb-1`}>
           <Form.Control
             type="name"
             placeholder={t('searchPledger')}
             autoComplete="off"
             required
-            className={styles.inputField}
+            className={styles.inputFieldPledge}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
             data-testid="searchPledger"
@@ -557,7 +557,7 @@ const fundCampaignPledge = (): JSX.Element => {
           ),
         }}
         sx={dataGridStyle}
-        getRowClassName={() => `${styles.rowBackground}`}
+        getRowClassName={() => `${styles.rowBackgroundPledge}`}
         autoHeight
         rowHeight={65}
         rows={pledges.map((pledge) => ({
@@ -607,14 +607,14 @@ const fundCampaignPledge = (): JSX.Element => {
                 src={user.image}
                 alt="pledger"
                 data-testid={`extraImage${index + 1}`}
-                className={styles.TableImage}
+                className={styles.TableImagePledge}
               />
             ) : (
               <div className={styles.avatarContainer}>
                 <Avatar
                   key={user._id + '1'}
-                  containerStyle={styles.imageContainer}
-                  avatarStyle={styles.TableImage}
+                  containerStyle={styles.imageContainerPledge}
+                  avatarStyle={styles.TableImagePledge}
                   name={user.firstName + ' ' + user.lastName}
                   alt={user.firstName + ' ' + user.lastName}
                   dataTestId={`extraAvatar${index + 1}`}
diff --git a/src/screens/FundCampaignPledge/PledgeDeleteModal.tsx b/src/screens/FundCampaignPledge/PledgeDeleteModal.tsx
index 288baa16ef..669611ffe6 100644
--- a/src/screens/FundCampaignPledge/PledgeDeleteModal.tsx
+++ b/src/screens/FundCampaignPledge/PledgeDeleteModal.tsx
@@ -1,5 +1,5 @@
 import { Button, Modal } from 'react-bootstrap';
-import styles from './FundCampaignPledge.module.css';
+import styles from '../../style/app.module.css';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from '@apollo/client';
diff --git a/src/screens/FundCampaignPledge/PledgeModal.tsx b/src/screens/FundCampaignPledge/PledgeModal.tsx
index 911d90e77e..04b8aae7da 100644
--- a/src/screens/FundCampaignPledge/PledgeModal.tsx
+++ b/src/screens/FundCampaignPledge/PledgeModal.tsx
@@ -8,7 +8,7 @@ import type {
   InterfacePledgeInfo,
   InterfaceUserInfo,
 } from 'utils/interfaces';
-import styles from './FundCampaignPledge.module.css';
+import styles from '../../style/app.module.css';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from '@apollo/client';
@@ -228,7 +228,7 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
           <Form.Group className="d-flex mb-3 w-100">
             <Autocomplete
               multiple
-              className={`${styles.noOutline} w-100`}
+              className={`${styles.noOutlinePledge} w-100`}
               limitTags={2}
               data-testid="pledgerSelect"
               options={pledgers}
@@ -258,7 +258,7 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
               format="DD/MM/YYYY"
               label={tCommon('startDate')}
               value={dayjs(pledgeStartDate)}
-              className={styles.noOutline}
+              className={styles.noOutlinePledge}
               onChange={(date: Dayjs | null): void => {
                 if (date) {
                   setFormState({
@@ -280,7 +280,7 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
             <DatePicker
               format="DD/MM/YYYY"
               label={tCommon('endDate')}
-              className={styles.noOutline}
+              className={styles.noOutlinePledge}
               value={dayjs(pledgeEndDate)}
               onChange={(date: Dayjs | null): void => {
                 if (date) {
@@ -327,7 +327,7 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
               <TextField
                 label={t('amount')}
                 variant="outlined"
-                className={styles.noOutline}
+                className={styles.noOutlinePledge}
                 value={pledgeAmount}
                 onChange={(e) => {
                   if (parseInt(e.target.value) > 0) {
@@ -343,7 +343,7 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
           {/* Button to submit the pledge form */}
           <Button
             type="submit"
-            className={styles.greenregbtn}
+            className={styles.greenregbtnPledge}
             data-testid="submitPledgeBtn"
           >
             {t(mode === 'edit' ? 'updatePledge' : 'createPledge')}
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 56dc7e8854..6d6413aa86 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -608,6 +608,229 @@ hr {
   right: -55%;
 }
 
+.pledgeContainer {
+  margin: 0.6rem 0;
+}
+
+.container {
+  min-height: 100vh;
+}
+
+.pledgeModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.greenregbtnPledge {
+  margin-top: 15px;
+  border: 1px solid var(--bs-gray-300);
+  box-shadow: 0 2px 2px #e8e5e5;
+  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;
+}
+
+.btnsContainerPledge {
+  display: flex;
+  gap: 0.8rem;
+  margin: 2.2rem 0 0.8rem 0;
+}
+
+.btnsContainerPledge .inputPledge {
+  flex: 1;
+  min-width: 18rem;
+  position: relative;
+}
+
+.btnsContainerPledge input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainerPledge .inputPledge button {
+  width: 52px;
+}
+
+.inputFieldPledge {
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+
+.dropdownPledge {
+  background-color: white;
+  border: 1px solid var(--bs-primary);
+  position: relative;
+  display: inline-block;
+  color: var(--bs-primary);
+}
+
+.rowBackgroundPledge {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.TableImagePledge {
+  object-fit: cover;
+  width: calc(var(--table-image-size) / 2) !important;
+  height: calc(var(--table-image-size) / 2) !important;
+  border-radius: 100% !important;
+}
+
+.imageContainerPledge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pledgerContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.1rem 0.25rem;
+  gap: 0.25rem;
+  padding: 0.25rem 0.45rem;
+  border-radius: 0.35rem;
+  background-color: var(--bs-primary-rgb, 49, 187, 107, 0.2);
+  height: 2.2rem;
+  margin-top: 0.75rem;
+}
+
+.noOutlinePledge input {
+  outline: none;
+}
+
+.overviewContainer {
+  display: flex;
+  gap: 7rem;
+  width: 100%;
+  justify-content: space-between;
+  margin: 1.5rem 0 0 0;
+  padding: 1.25rem 2rem;
+  background-color: rgba(255, 255, 255, 0.591);
+
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+  border-radius: 0.5rem;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.titleContainer h3 {
+  font-size: 1.75rem;
+  font-weight: 750;
+  color: #5e5e5e;
+  margin-top: 0.2rem;
+}
+
+.titleContainer span {
+  font-size: 0.9rem;
+  margin-left: 0.5rem;
+  font-weight: lighter;
+  color: #707070;
+}
+
+.raisedAmount {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.25rem;
+  font-weight: 750;
+  color: #5e5e5e;
+}
+
+.progressContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex-grow: 1;
+}
+
+.progress {
+  margin-top: 0.2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.endpoints {
+  display: flex;
+  position: relative;
+  font-size: 0.85rem;
+}
+
+.start {
+  position: absolute;
+  top: 0px;
+}
+
+.end {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+}
+
+.moreContainer {
+  display: flex;
+  align-items: center;
+}
+
+.moreContainer:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.popup {
+  z-index: 50;
+  border-radius: 0.5rem;
+  font-family: sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid #e2e8f0;
+  background-color: white;
+  color: #1e293b;
+  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.15);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.popupExtra {
+  max-height: 15rem;
+  overflow-y: auto;
+}
+
+.toggleGroupPledge {
+  width: 50%;
+  min-width: 27.75rem;
+  margin: 0.5rem 0rem;
+}
+
+.toggleBtnPledge {
+  padding: 0rem;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.toggleBtnPledge:hover {
+  color: #31bb6b !important;
+}
+
 @media (max-width: 1024px) {
   .pageNotFound h1.head {
     font-size: 200px;