diff --git a/src/App.tsx b/src/App.tsx
index db9644c89..0a9ee81e8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -44,10 +44,8 @@ import DiscordModeration from "./modules/Dashboard/modules/DiscordModeration/Dis
 import Test from "./modules/Dashboard/modules/Test/Test";
 import Analytics from "./modules/Dashboard/modules/UrlShortener/Pages/Analytics";
 import Donation from "./modules/Public/Donation/Donation";
-import DonationTest from "./modules/Public/Donation/pages/Donate";
 import Refund from "./modules/Public/Donation/pages/Refund";
 
-
 const Profile = lazy(
     () => import("./modules/Dashboard/modules/Profile/pages/Profile")
 );
@@ -270,10 +268,6 @@ function App() {
             path: "donation",
             element: <Donation />
         },
-        {
-            path: "donation-test",
-            element: <DonationTest />
-        },
         {
             path: "donation/refund",
             element: <Refund />
diff --git a/src/modules/Public/Donation/Donation.module.css b/src/modules/Public/Donation/Donation.module.css
index a1a21f775..90fd1c359 100644
--- a/src/modules/Public/Donation/Donation.module.css
+++ b/src/modules/Public/Donation/Donation.module.css
@@ -1,16 +1,349 @@
-.fieldsContainer{
+.LClandingPage {
+    position: relative;
+    overflow-x: hidden;
+}
+
+.joinCircle {
+    background: var(--blue);
+    border-radius: var(--borderRadius);
+    padding: 0.5rem 1rem;
+    font-size: 0.8rem;
+    margin-top: 1rem;
+    width: 6rem;
+    color: #fff;
+}
+
+.backgroundImage {
+    top: 0;
+    position: absolute;
+
+    z-index: -2;
+}
+
+.backgroundImage img {
+    width: 100vw;
+    height: 110vh;
+}
+
+.LClandingPageHero {
+    /* background-image: url(https://i.ibb.co/cCvB4r6/Learning-BG.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center; */
+    position: relative;
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    gap: 1rem;
+    padding-top: 5rem;
+}
+
+.LClandingPageHero span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    font-size: 3.5rem;
+    color: #000;
+}
+
+.LClandingPageHero span img {
+    position: relative;
+    top: 0.75rem;
+    height: 3rem;
+}
+
+.LClandingPageHero .dash {
+    position: absolute;
+    top: -50%;
+    width: 120%;
+    height: 100%;
+    border: 5px solid #accaf6;
+    border-style: dashed;
+    border-radius: 45%;
+}
+
+.LClandingPageHero .heroTitle b:nth-child(2) {
+    font-size: 4rem;
+    color: var(--blue);
+    position: relative;
+    top: -1rem;
+    background-image: linear-gradient(to right, #ddecff, #eaf3ff);
+    border-radius: 10%;
+    height: -1rem;
+    padding: 0rem 0.5rem;
+}
+
+.LClandingPageHero p {
+    width: 75%;
+    font-weight: 600;
+    font-size: 1.1rem;
+}
+
+.DonationSection {
+    position: relative;
+    max-width: 100vw;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 6rem;
+}
+
+.DonationFormElement {
+    background: #fff;
+    box-shadow: -1.6px 6.4px 32px 3.2px rgba(0, 0, 0, 0.15);
+    width: 80%;
+    top: -25%;
+    padding: 1.5rem 3rem;
+    display: flex;
+    gap: 2rem;
+}
+
+.DetailsContainer {
+    width: 100%;
     display: flex;
     flex-direction: column;
-    gap: 10px;
-    margin-bottom: 10px;
+    padding: 1rem 0;
+    gap: 0.2rem;
+}
+
+.DetailsContainer h1,
+.DonationInputStyles {
+    margin-bottom: 0.7rem;
+}
+
+.DetailsContainer label {
+    margin: 0.2rem 0.5rem;
+}
+
+.DetailsContainer h1 {
+    font-weight: 600;
+    font-size: 1.7rem;
 }
 
-.inputStyles{
-    padding: 10px;  
-    border-radius: 4px;
-    outline: none;
-    background-color: #f3f3f4;
-    font-size: 14px;
+.DonateButtonContainer {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.DonateButtonContainer button {
+    background-color: #fff;
+    width: 100%;
+    color: var(--blue);
+    border: 2px solid var(--blue);
+    border-radius: 0.5rem;
+    padding: 0.9rem 1.4rem;
+    margin-bottom: 1rem;
+}
+
+.DonateButtonContainer button:hover {
+    background-color: var(--blue);
+    color: #fff;
+}
+
+.DonateButtonContainer button.selectedButton {
+    background-color: var(--blue);
+    color: #fff;
+}
+
+.DonationInputStyles {
+    border-radius: 0.4rem;
+    border: 1.12px solid rgba(45, 191, 252, 0.25);
+    box-shadow: 0px 1.6px 6.4px 0px rgba(0, 0, 0, 0.1);
+    padding: 0.4rem 1rem;
     width: 100%;
-    box-sizing: border-box;
-}
\ No newline at end of file
+}
+
+.AmountField {
+    font-size: 1.8rem;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+}
+
+.CurrencyContainer {
+    position: relative;
+}
+
+.CurrencyContainer p {
+    position: absolute;
+    cursor: default;
+    font-weight: 200;
+    color: rgba(0, 0, 0, 0.5);
+    right: 1rem;
+    top: 20%;
+}
+
+.TermsContainer {
+    display: flex;
+    align-items: center;
+}
+
+.TermsContainer input {
+    width: 1rem;
+}
+
+.TermsContainer label {
+    cursor: default;
+    font-size: 0.7rem;
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.SubmitButton {
+    margin-top: 1rem;
+    font-size: 1.4rem;
+    width: 60%;
+    align-self: center;
+}
+
+.SubmitButton button {
+    padding: 0.7rem 1rem;
+}
+
+/* Refund Page */
+
+.refundSection {
+    display: flex;
+    margin-top: 30vh;
+    justify-content: center;
+    margin-bottom: 5rem;
+}
+
+.textContainer {
+    width: 95%;
+    box-shadow: -1.6px 6.4px 32px 3.2px rgba(0, 0, 0, 0.15);
+    background-color: #fff;
+    padding: 2rem 10rem;
+}
+
+@media (width<=955px) {
+    .LClandingPageHero .dash {
+        top: -46%;
+        border-radius: 38%;
+    }
+
+    .textContainer {
+        padding: 2rem 6rem;
+    }
+}
+
+@media (width <=820px) {
+    .LClandingPageHero span {
+        font-size: 1.7rem;
+        gap: 0.5rem;
+    }
+
+    .LClandingPageHero span img {
+        top: 0.5rem;
+        height: 2.2rem;
+    }
+
+    .LClandingPageHero .heroTitle b:nth-child(2) {
+        font-size: 2.5rem;
+        top: 0rem;
+    }
+
+    .LClandingPageHero p {
+        width: 90%;
+        font-size: 0.8rem;
+    }
+
+    .LClandingPageHero button {
+        padding: 0.5rem 1rem;
+    }
+
+    .DonationFormElement {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .SubmitButton {
+        width: 100%;
+        align-items: center;
+    }
+}
+
+@media (width<=550px) {
+    .LClandingPageHero .dash {
+        top: -48%;
+        border-radius: 35%;
+    }
+
+    .LClandingPageHero .heroTitle b:nth-child(2) {
+        font-size: 1.75rem;
+        top: 0rem;
+    }
+
+    .LClandingPageHero span {
+        font-size: 1.8rem;
+        gap: 0.7rem;
+    }
+    .LClandingPageHero span img {
+        top: 0.18rem;
+        height: 1.7rem;
+    }
+
+    .DonationFormElement {
+        top: -10%;
+        width: 96%;
+    }
+
+    .DonateButtonContainer {
+        /* flex-direction: column; */
+        align-items: center;
+        gap: 0.3rem;
+    }
+    .DonateButtonContainer button {
+        width: 100%;
+        padding: 0.4rem 0.8rem;
+        margin-bottom: 0.6rem;
+        font-size: 0.8rem;
+    }
+
+    .CurrencyContainer p,
+    .DetailsContainer label {
+        font-size: 0.9rem;
+    }
+
+    .DonationInputStyles {
+        font-size: 0.9rem;
+        padding: 0.6rem 0.9rem;
+    }
+
+    .DetailsContainer h1 {
+        font-size: 1.5rem;
+    }
+
+    .AmountField {
+        font-size: 1.4rem;
+    }
+
+    .TermsContainer label {
+        font-size: 0.6rem;
+    }
+
+    .SubmitButton {
+        font-size: 1rem;
+    }
+
+    .textContainer {
+        padding: 2rem;
+        width: 100%;
+        box-shadow: -1.6px -6.4px 62px 3.2px rgba(0, 0, 0, 0.15);
+    }
+}
+
+@media (width<=380px) {
+    .LClandingPageHero .dash {
+        top: -47%;
+        border-radius: 35%;
+    }
+
+    .LClandingPageHero span {
+        font-size: 1.7rem;
+        padding: 0;
+    }
+}
diff --git a/src/modules/Public/Donation/Donation.tsx b/src/modules/Public/Donation/Donation.tsx
index 3c0ad76e6..98f189baa 100644
--- a/src/modules/Public/Donation/Donation.tsx
+++ b/src/modules/Public/Donation/Donation.tsx
@@ -1,14 +1,19 @@
-import React, { useState, useRef } from "react";
-import MuModal from "@/MuLearnComponents/MuModal/MuModal";
+import { useEffect, useRef, useState } from "react";
+import toast from "react-hot-toast";
+import Footer from "./components/Footer";
+import Navbar from "./components/Navbar";
 import { submitForm } from "./services/api";
 import styles from "./Donation.module.css";
-import toast from "react-hot-toast";
+
 const Donation = () => {
     const [amount, setAmount] = useState<number>();
     const [name, setName] = useState("");
     const [email, setEmail] = useState("");
     const [mobile, setMobile] = useState<number>();
     const [pan, setPan] = useState("");
+    const [selectedAmount, setSelectedAmount] = useState<number>(10000);
+    const [isOrganisation, setIsOrganisation] = useState(false);
+    const [company, setCompany] = useState("");
 
     const callRazorpay = () => {
         if (!amount || !name || !email || !mobile || !pan) {
@@ -16,74 +21,264 @@ const Donation = () => {
             return;
         }
 
-        submitForm({
-            amount: amount,
-            name: name,
-            email: email,
-            mobile: mobile,
-            pan: pan
-        });
+        // if (!validatePAN(pan)) {
+        //     toast.error("Invalid PAN number");
+        //     return;
+        // }
+
+        if (isOrganisation) {
+            submitForm({
+                amount: amount,
+                name: name,
+                company: company,
+                email: email,
+                mobile: mobile,
+                pan: pan
+            });
+        } else {
+            submitForm({
+                amount: amount,
+                name: name,
+                email: email,
+                mobile: mobile,
+                pan: pan
+            });
+        }
+    };
+
+    // const validatePAN = (pan: string) => /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(pan);
+
+    const targetRef = useRef<HTMLDivElement>(null); // Create a ref
+
+    const isElementInViewport = (el: HTMLElement | null) => {
+        if (!el) {
+            return false;
+        }
+        const rect = el.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <=
+                (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <=
+                (window.innerWidth || document.documentElement.clientWidth)
+        );
+    };
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (isElementInViewport(targetRef.current)) {
+                // Start counter logic here
+            }
+        };
+
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
+    }, []);
+
+    const handleAmountClick = (amount: number) => {
+        setSelectedAmount(amount);
+        setAmount(amount);
     };
 
     return (
-        <>
-            <MuModal
-                isOpen={true}
-                onClose={() => console.log("closed")}
-                title="Donation"
-                type="success"
-                onDone={() => callRazorpay()}
-            >
-                <label htmlFor="amount">Amount{" in INR"}*</label>
-                <input
-                    type="number"
-                    id="amount"
-                    className={styles.inputStyles}
-                    value={amount}
-                    onChange={e => setAmount(Number(e.target.value))}
-                    required
-                />
-
-                <label htmlFor="name">Name*</label>
-                <input
-                    type="text"
-                    id="name"
-                    className={styles.inputStyles}
-                    value={name}
-                    onChange={e => setName(e.target.value)}
-                    required
-                />
-
-                <label htmlFor="email">Email*</label>
-                <input
-                    type="email"
-                    id="email"
-                    className={styles.inputStyles}
-                    value={email}
-                    onChange={e => setEmail(e.target.value)}
-                    required
-                />
-
-                <label htmlFor="mobile">Mobile No*</label>
-                <input
-                    type="number"
-                    id="mobile"
-                    className={styles.inputStyles}
-                    value={mobile}
-                    onChange={e => setMobile(Number(e.target.value))}
-                    required
-                />
-                <label htmlFor="pan">PAN*</label>
-                <input
-                    type="text"
-                    id="pan"
-                    className={styles.inputStyles}
-                    value={pan}
-                    onChange={e => setPan(e.target.value)}
-                    required
-                />
-            </MuModal>
-        </>
+        <div className={styles.LClandingPage}>
+            <Navbar />
+
+            <div className={styles.LClandingPageHero}>
+                <div className={styles.backgroundImage}>
+                    <img
+                        src="https://i.ibb.co/cCvB4r6/Learning-BG.png"
+                        alt="textured background"
+                    ></img>
+                </div>
+                <div className={styles.dash}></div>
+                <div className={styles.heroTitle}>
+                    <span>
+                        <b>Donate to</b>{" "}
+                        <img src="https://i.ibb.co/FDQ2M4n/Learn.png" alt="" />
+                    </span>
+                    <b>Let's grow together</b>
+                </div>
+                <p>
+                    An informal mechanism for bringing together learners who are
+                    interested in the same topic from across different fields
+                    and disciplines. A fantastic way to spend a small amount of
+                    time learning about new things with a group of people with
+                    same interests!
+                </p>
+            </div>
+
+            <div className={styles.DonationSection}>
+                <div className={styles.heightFixer}></div>
+                <form
+                    title="Donation"
+                    className={styles.DonationFormElement}
+                    onSubmit={e => {
+                        e.preventDefault();
+                        callRazorpay();
+                    }}
+                >
+                    <div className={styles.DetailsContainer}>
+                        <h1>Details</h1>
+                        <label htmlFor="name">Name:</label>
+                        <input
+                            type="text"
+                            id="name"
+                            placeholder="Phil Anthropist"
+                            aria-label="Name"
+                            className={styles.DonationInputStyles}
+                            value={name}
+                            onChange={e => setName(e.target.value)}
+                            required
+                        />
+                        <div className={styles.TermsContainer}>
+                            <input
+                                id="checkc"
+                                type="checkbox"
+                                onClick={() =>
+                                    setIsOrganisation(!isOrganisation)
+                                }
+                            ></input>
+                            <label htmlFor="checkc">
+                                Are you trying to pay for an organisation?
+                            </label>
+                        </div>
+                        {isOrganisation && (
+                            <>
+                                <label htmlFor="company">Organization:</label>
+                                <input
+                                    type="text"
+                                    id="company"
+                                    placeholder="Organisation Name"
+                                    className={styles.DonationInputStyles}
+                                    value={company}
+                                    onChange={e => setCompany(e.target.value)}
+                                    required
+                                />
+                            </>
+                        )}
+                        <label htmlFor="email">Email:</label>
+                        <input
+                            type="email"
+                            id="email"
+                            placeholder="generousphil@gmail.com"
+                            aria-label="Email"
+                            className={styles.DonationInputStyles}
+                            value={email}
+                            onChange={e => setEmail(e.target.value)}
+                            required
+                        />
+                        <label htmlFor="mobile">Mobile No:</label>
+                        <input
+                            type="number"
+                            id="mobile"
+                            placeholder="98765 43210"
+                            aria-label="Mobile Number"
+                            className={styles.DonationInputStyles}
+                            value={mobile || ""}
+                            onChange={e => setMobile(Number(e.target.value))}
+                            required
+                        />
+                        <label htmlFor="pan">PAN:</label>
+                        <input
+                            type="text"
+                            id="pan"
+                            placeholder="BUKCS5678H"
+                            aria-label="PAN"
+                            className={styles.DonationInputStyles}
+                            value={pan}
+                            onChange={e => setPan(e.target.value)}
+                            required
+                        />
+                    </div>
+
+                    <div className={styles.DetailsContainer}>
+                        <h1>Donate</h1>
+                        <label
+                            htmlFor="amount"
+                            className={styles.DonateButtonContainer}
+                        >
+                            <button
+                                type="button"
+                                className={
+                                    selectedAmount === 10000
+                                        ? styles.selectedButton
+                                        : ""
+                                }
+                                onClick={() => handleAmountClick(10000)}
+                            >
+                                10,000
+                            </button>
+                            <button
+                                type="button"
+                                className={
+                                    selectedAmount === 15000
+                                        ? styles.selectedButton
+                                        : ""
+                                }
+                                onClick={() => handleAmountClick(15000)}
+                            >
+                                15,000
+                            </button>
+                            <button
+                                type="button"
+                                className={
+                                    selectedAmount === 20000
+                                        ? styles.selectedButton
+                                        : ""
+                                }
+                                onClick={() => handleAmountClick(20000)}
+                            >
+                                20,000
+                            </button>
+                        </label>
+                        <div className={styles.CurrencyContainer}>
+                            <p>{"INR"}</p>
+                            <input
+                                type="number"
+                                id="amount"
+                                placeholder="10,000"
+                                aria-label="Amount"
+                                className={[
+                                    styles.DonationInputStyles,
+                                    styles.AmountField
+                                ].join(" ")}
+                                value={amount || ""}
+                                onChange={e =>
+                                    setAmount(Number(e.target.value))
+                                }
+                                required
+                            />
+                        </div>
+
+                        <div className={styles.TermsContainer}>
+                            <input id="check" type="checkbox" required></input>
+                            <label htmlFor="check">
+                                Terms and condition Lorem ipsum dolor sit amet,
+                                consectetur adipiscing elit. In viverra augue
+                                eget lacus commodo euismod. Phasellu ultrices.
+                            </label>
+                        </div>
+                        <div
+                            className={[
+                                styles.DonateButtonContainer,
+                                styles.SubmitButton
+                            ].join(" ")}
+                        >
+                            <button
+                                type="submit"
+                                className={styles.selectedButton}
+                            >
+                                Donate
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+
+            <Footer />
+        </div>
     );
 };
 
diff --git a/src/modules/Public/Donation/pages/Donate.module.css b/src/modules/Public/Donation/pages/Donate.module.css
deleted file mode 100644
index 90fd1c359..000000000
--- a/src/modules/Public/Donation/pages/Donate.module.css
+++ /dev/null
@@ -1,349 +0,0 @@
-.LClandingPage {
-    position: relative;
-    overflow-x: hidden;
-}
-
-.joinCircle {
-    background: var(--blue);
-    border-radius: var(--borderRadius);
-    padding: 0.5rem 1rem;
-    font-size: 0.8rem;
-    margin-top: 1rem;
-    width: 6rem;
-    color: #fff;
-}
-
-.backgroundImage {
-    top: 0;
-    position: absolute;
-
-    z-index: -2;
-}
-
-.backgroundImage img {
-    width: 100vw;
-    height: 110vh;
-}
-
-.LClandingPageHero {
-    /* background-image: url(https://i.ibb.co/cCvB4r6/Learning-BG.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center; */
-    position: relative;
-    height: 100vh;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    text-align: center;
-    gap: 1rem;
-    padding-top: 5rem;
-}
-
-.LClandingPageHero span {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    font-size: 3.5rem;
-    color: #000;
-}
-
-.LClandingPageHero span img {
-    position: relative;
-    top: 0.75rem;
-    height: 3rem;
-}
-
-.LClandingPageHero .dash {
-    position: absolute;
-    top: -50%;
-    width: 120%;
-    height: 100%;
-    border: 5px solid #accaf6;
-    border-style: dashed;
-    border-radius: 45%;
-}
-
-.LClandingPageHero .heroTitle b:nth-child(2) {
-    font-size: 4rem;
-    color: var(--blue);
-    position: relative;
-    top: -1rem;
-    background-image: linear-gradient(to right, #ddecff, #eaf3ff);
-    border-radius: 10%;
-    height: -1rem;
-    padding: 0rem 0.5rem;
-}
-
-.LClandingPageHero p {
-    width: 75%;
-    font-weight: 600;
-    font-size: 1.1rem;
-}
-
-.DonationSection {
-    position: relative;
-    max-width: 100vw;
-    display: flex;
-    justify-content: center;
-    margin-bottom: 6rem;
-}
-
-.DonationFormElement {
-    background: #fff;
-    box-shadow: -1.6px 6.4px 32px 3.2px rgba(0, 0, 0, 0.15);
-    width: 80%;
-    top: -25%;
-    padding: 1.5rem 3rem;
-    display: flex;
-    gap: 2rem;
-}
-
-.DetailsContainer {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 1rem 0;
-    gap: 0.2rem;
-}
-
-.DetailsContainer h1,
-.DonationInputStyles {
-    margin-bottom: 0.7rem;
-}
-
-.DetailsContainer label {
-    margin: 0.2rem 0.5rem;
-}
-
-.DetailsContainer h1 {
-    font-weight: 600;
-    font-size: 1.7rem;
-}
-
-.DonateButtonContainer {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-}
-
-.DonateButtonContainer button {
-    background-color: #fff;
-    width: 100%;
-    color: var(--blue);
-    border: 2px solid var(--blue);
-    border-radius: 0.5rem;
-    padding: 0.9rem 1.4rem;
-    margin-bottom: 1rem;
-}
-
-.DonateButtonContainer button:hover {
-    background-color: var(--blue);
-    color: #fff;
-}
-
-.DonateButtonContainer button.selectedButton {
-    background-color: var(--blue);
-    color: #fff;
-}
-
-.DonationInputStyles {
-    border-radius: 0.4rem;
-    border: 1.12px solid rgba(45, 191, 252, 0.25);
-    box-shadow: 0px 1.6px 6.4px 0px rgba(0, 0, 0, 0.1);
-    padding: 0.4rem 1rem;
-    width: 100%;
-}
-
-.AmountField {
-    font-size: 1.8rem;
-    font-weight: 500;
-    padding: 0.5rem 1rem;
-}
-
-.CurrencyContainer {
-    position: relative;
-}
-
-.CurrencyContainer p {
-    position: absolute;
-    cursor: default;
-    font-weight: 200;
-    color: rgba(0, 0, 0, 0.5);
-    right: 1rem;
-    top: 20%;
-}
-
-.TermsContainer {
-    display: flex;
-    align-items: center;
-}
-
-.TermsContainer input {
-    width: 1rem;
-}
-
-.TermsContainer label {
-    cursor: default;
-    font-size: 0.7rem;
-    color: rgba(0, 0, 0, 0.8);
-}
-
-.SubmitButton {
-    margin-top: 1rem;
-    font-size: 1.4rem;
-    width: 60%;
-    align-self: center;
-}
-
-.SubmitButton button {
-    padding: 0.7rem 1rem;
-}
-
-/* Refund Page */
-
-.refundSection {
-    display: flex;
-    margin-top: 30vh;
-    justify-content: center;
-    margin-bottom: 5rem;
-}
-
-.textContainer {
-    width: 95%;
-    box-shadow: -1.6px 6.4px 32px 3.2px rgba(0, 0, 0, 0.15);
-    background-color: #fff;
-    padding: 2rem 10rem;
-}
-
-@media (width<=955px) {
-    .LClandingPageHero .dash {
-        top: -46%;
-        border-radius: 38%;
-    }
-
-    .textContainer {
-        padding: 2rem 6rem;
-    }
-}
-
-@media (width <=820px) {
-    .LClandingPageHero span {
-        font-size: 1.7rem;
-        gap: 0.5rem;
-    }
-
-    .LClandingPageHero span img {
-        top: 0.5rem;
-        height: 2.2rem;
-    }
-
-    .LClandingPageHero .heroTitle b:nth-child(2) {
-        font-size: 2.5rem;
-        top: 0rem;
-    }
-
-    .LClandingPageHero p {
-        width: 90%;
-        font-size: 0.8rem;
-    }
-
-    .LClandingPageHero button {
-        padding: 0.5rem 1rem;
-    }
-
-    .DonationFormElement {
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    .SubmitButton {
-        width: 100%;
-        align-items: center;
-    }
-}
-
-@media (width<=550px) {
-    .LClandingPageHero .dash {
-        top: -48%;
-        border-radius: 35%;
-    }
-
-    .LClandingPageHero .heroTitle b:nth-child(2) {
-        font-size: 1.75rem;
-        top: 0rem;
-    }
-
-    .LClandingPageHero span {
-        font-size: 1.8rem;
-        gap: 0.7rem;
-    }
-    .LClandingPageHero span img {
-        top: 0.18rem;
-        height: 1.7rem;
-    }
-
-    .DonationFormElement {
-        top: -10%;
-        width: 96%;
-    }
-
-    .DonateButtonContainer {
-        /* flex-direction: column; */
-        align-items: center;
-        gap: 0.3rem;
-    }
-    .DonateButtonContainer button {
-        width: 100%;
-        padding: 0.4rem 0.8rem;
-        margin-bottom: 0.6rem;
-        font-size: 0.8rem;
-    }
-
-    .CurrencyContainer p,
-    .DetailsContainer label {
-        font-size: 0.9rem;
-    }
-
-    .DonationInputStyles {
-        font-size: 0.9rem;
-        padding: 0.6rem 0.9rem;
-    }
-
-    .DetailsContainer h1 {
-        font-size: 1.5rem;
-    }
-
-    .AmountField {
-        font-size: 1.4rem;
-    }
-
-    .TermsContainer label {
-        font-size: 0.6rem;
-    }
-
-    .SubmitButton {
-        font-size: 1rem;
-    }
-
-    .textContainer {
-        padding: 2rem;
-        width: 100%;
-        box-shadow: -1.6px -6.4px 62px 3.2px rgba(0, 0, 0, 0.15);
-    }
-}
-
-@media (width<=380px) {
-    .LClandingPageHero .dash {
-        top: -47%;
-        border-radius: 35%;
-    }
-
-    .LClandingPageHero span {
-        font-size: 1.7rem;
-        padding: 0;
-    }
-}
diff --git a/src/modules/Public/Donation/pages/Donate.tsx b/src/modules/Public/Donation/pages/Donate.tsx
deleted file mode 100644
index 6f6fe639f..000000000
--- a/src/modules/Public/Donation/pages/Donate.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import styles from "./Donate.module.css";
-import { Form, Link, useNavigate } from "react-router-dom";
-import { submitForm } from "../services/api";
-import MuModal from "@/MuLearnComponents/MuModal/MuModal";
-import Select from "react-select";
-import MuLoader from "@/MuLearnComponents/MuLoader/MuLoader";
-import { MuButton } from "@/MuLearnComponents/MuButtons/MuButton";
-import toast from "react-hot-toast";
-import Modal from "@/MuLearnComponents/Modal/Modal";
-import { style } from "d3";
-import Footer from "../components/Footer";
-import Navbar from "../components/Navbar";
-
-interface Option {
-    value: string;
-    label: string;
-}
-const DonationTest = () => {
-        const [amount, setAmount] = useState<number>();
-        const [name, setName] = useState("");
-        const [email, setEmail] = useState("");
-        const [mobile, setMobile] = useState<number>();
-        const [pan, setPan] = useState("");
-    
-        const callRazorpay = () => {
-            if (!amount || !name || !email || !mobile || !pan) {
-                toast.error("Please fill all the fields");
-                return;
-            }
-    
-            submitForm({
-                amount: amount,
-                name: name,
-                email: email,
-                mobile: mobile,
-                pan: pan
-            });
-        };
-
-    const navigate = useNavigate();
-    const customStyles: any = {
-        control: (provided: any) => ({
-            ...provided,
-            backgroundColor: "#F3F3F4",
-            border: "none",
-            borderRadius: "10px",
-            fontSize: "12px",
-            fontWeight: "bold",
-            color: "#000",
-            width: "100%",
-            padding: ".3rem .4rem",
-            minWidth: "200px"
-        }),
-        placeholder: (provided: any) => ({
-            ...provided,
-            color: "#000"
-        }),
-        indicatorSeparator: (provided: any) => ({
-            ...provided,
-            display: "none"
-        })
-    };
-
-    const [counters, setCounters] = useState<number[]>([0, 0, 0, 0, 0]); // Initialize counters
-    const durationInSeconds = 3; // Duration in seconds
-
-    const targetRef = useRef<HTMLDivElement>(null); // Create a ref
-
-    const isElementInViewport = (el: HTMLElement | null) => {
-        if (!el) {
-            return false;
-        }
-        const rect = el.getBoundingClientRect();
-        return (
-            rect.top >= 0 &&
-            rect.left >= 0 &&
-            rect.bottom <=
-            (window.innerHeight || document.documentElement.clientHeight) &&
-            rect.right <=
-            (window.innerWidth || document.documentElement.clientWidth)
-        );
-    };
-    
-    return (
-        <div className={styles.LClandingPage}>
-            <Navbar />
-
-            <div className={styles.LClandingPageHero}>
-                <div className={styles.backgroundImage}><img src="https://i.ibb.co/cCvB4r6/Learning-BG.png" alt="textured background" ></img></div>
-                <div className={styles.dash}></div>
-                <div className={styles.heroTitle}>
-                    <span>
-                        <b>Donate to</b>{" "}
-                        <img src="https://i.ibb.co/FDQ2M4n/Learn.png" alt="" />
-                    </span>
-                    <b>Let's grow together</b>
-                </div>
-                <p>
-                    An informal mechanism for bringing together learners who are
-                    interested in the same topic from across different fields
-                    and disciplines. A fantastic way to spend a small amount of
-                    time learning about new things with a group of people with
-                    same interests!
-                </p>
-            </div>
-
-            <div className={styles.DonationSection}>
-                <div className={styles.heightFixer}></div>
-                <form
-                    title="Donation"
-                    className={styles.DonationFormElement}
-                    onSubmit={() => callRazorpay()}
-                >
-
-                    <div className={styles.DetailsContainer}>
-                        <h1>Details</h1>
-                        <label htmlFor="name">Name:</label>
-                        <input
-                            type="text"
-                            id="name"
-                            placeholder="Phil Anthropist"
-                            className={styles.DonationInputStyles}
-                            value={name}
-                            onChange={e => setName(e.target.value)}
-                            required
-                        />
-                        <label htmlFor="email">Email:</label>
-                        <input
-                            type="email"
-                            id="email"
-                            placeholder="generousphil@gmail.com"
-                            className={styles.DonationInputStyles}
-                            value={email}
-                            onChange={e => setEmail(e.target.value)}
-                            required
-                        />
-                        <label htmlFor="mobile">Mobile No:</label>
-                        <input
-                            type="number"
-                            id="mobile"
-                            placeholder="+91 98765 43210"
-                            className={styles.DonationInputStyles}
-                            value={mobile}
-                            onChange={e => setMobile(Number(e.target.value))}
-                            required
-                        />
-                        <label htmlFor="pan">PAN:</label>
-                        <input
-                            type="text"
-                            id="pan"
-                            placeholder="BUKCS5678H"
-                            className={styles.DonationInputStyles}
-                            value={pan}
-                            onChange={e => setPan(e.target.value)}
-                            required
-                        />
-                    </div>
-
-                    <div className={styles.DetailsContainer}>
-                        <h1>Donate</h1>
-                        <label htmlFor="amount" className={styles.DonateButtonContainer}>
-                            <button className={styles.selectedButton}>10,000</button>
-                            <button>15,000</button>
-                            <button>20,000</button>
-                        </label>
-                        <div className={styles.CurrencyContainer}>
-                            
-                            <p>{"INR"}</p>
-                            <input
-                                type="number"
-                                id="amount"
-                                placeholder="10,000"
-                                className={[styles.DonationInputStyles,styles.AmountField].join(" ")}
-                                value={amount}
-                                onChange={e => setAmount(Number(e.target.value))}
-                                required
-                            />
-                        </div>
-
-                        <div className={styles.TermsContainer}>
-                            <input id="check" type="checkbox" required></input>
-                            <label htmlFor="check">Terms and condition Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra  augue eget lacus commodo euismod. Phasellu ultrices.</label>
-                        </div>
-                        <div className={[styles.DonateButtonContainer, styles.SubmitButton].join(" ")}>
-                            <button className={styles.selectedButton}>Donate</button>    
-                        </div>
-                </div>
-            </form>
-            </div>
-
-            <Footer />
-        </div>
-    );
-};
-
-export default DonationTest;
diff --git a/src/modules/Public/Donation/pages/Refund.tsx b/src/modules/Public/Donation/pages/Refund.tsx
index 27d2e64c8..9ef3315a9 100644
--- a/src/modules/Public/Donation/pages/Refund.tsx
+++ b/src/modules/Public/Donation/pages/Refund.tsx
@@ -1,13 +1,18 @@
-import styles from "./Donate.module.css";
+import styles from "../Donation.module.css";
 import Footer from "../components/Footer";
 import Navbar from "../components/Navbar";
 import RefundPage from "../components/RefundText";
 
 const Refund = () => {
-    return(
+    return (
         <div className={styles.LClandingPage}>
             <Navbar />
-            <div className={styles.backgroundImage}><img src="https://i.ibb.co/cCvB4r6/Learning-BG.png" alt="textured background" ></img></div>
+            <div className={styles.backgroundImage}>
+                <img
+                    src="https://i.ibb.co/cCvB4r6/Learning-BG.png"
+                    alt="textured background"
+                ></img>
+            </div>
             <div className={styles.refundSection}>
                 <div className={styles.textContainer}>
                     <RefundPage />
@@ -15,7 +20,7 @@ const Refund = () => {
             </div>
             <Footer />
         </div>
-    )
+    );
 };
 
-export default Refund
\ No newline at end of file
+export default Refund;
diff --git a/src/modules/Public/Donation/services/api.ts b/src/modules/Public/Donation/services/api.ts
index 7eb77e07e..c089dbd21 100644
--- a/src/modules/Public/Donation/services/api.ts
+++ b/src/modules/Public/Donation/services/api.ts
@@ -12,12 +12,14 @@ declare global {
 export const submitForm = async ({
     amount,
     name,
+    company,
     email,
     mobile,
-    pan
+  pan
 }: {
         amount: number;
         name: string;
+        company?: string;
         email: string;
         mobile: number;
         pan: string;
@@ -32,6 +34,7 @@ export const submitForm = async ({
     .post(donationRoutes.order, {
         amount,
         name,
+        company,
         email,
         mobile
     })