diff --git a/frontend/cypress/e2e/canDetail.cy.js b/frontend/cypress/e2e/canDetail.cy.js
index ff60365116..575397ad5a 100644
--- a/frontend/cypress/e2e/canDetail.cy.js
+++ b/frontend/cypress/e2e/canDetail.cy.js
@@ -182,7 +182,6 @@ describe("CAN detail page", () => {
         cy.get("[data-cy='can-budget-fy-card']").should("contain", "0");
         cy.get("#budget-amount").type(can504.budgetAmount);
         cy.get("#budget-amount").clear();
-        cy.get(".usa-error-message").should("exist").contains("This is required information");
         cy.get("#budget-amount").type(can504.budgetAmount);
         cy.get(".usa-error-message").should("not.exist");
         cy.get("#add-fy-budget").click();
@@ -197,16 +196,57 @@ describe("CAN detail page", () => {
             .and("contain", `FY ${currentFiscalYear}`)
             .and("contain", "$5,000,000.00");
     });
+    it("handle funding received form", () => {
+        cy.visit(`/cans/${can504.number}/funding`);
+        cy.get("#fiscal-year-select").select(currentFiscalYear);
+        cy.get("#edit").click();
+        // check that all buttons (saved, all funding received) are disabled
+        cy.get("[data-cy=add-funding-received-btn]").should("be.disabled");
+        cy.get("[data-cy=save-btn]").should("be.disabled");
+        // enter amount into input
+        cy.get("#funding-received-amount").type("1_000_000");
+        cy.get("#funding-received-amount").blur();
+        cy.get("[data-cy=add-funding-received-btn]").should("be.enabled");
+        // clear and check validation
+        cy.get("#funding-received-amount").clear();
+        cy.get("[data-cy=add-funding-received-btn]").should("be.disabled");
+        // Test received amount over budget amount
+        cy.get("#funding-received-amount").type("6_000_000");
+        cy.get("[data-cy=add-funding-received-btn]").should("be.disabled");
+        cy.get(".usa-error-message").should("exist").contains("Amount cannot exceed FY Budget");
+        cy.get("#funding-received-amount").clear();
+        cy.get("#funding-received-amount").type("1_000_000");
+        cy.get("#funding-received-amount").blur();
+        cy.get("[data-cy=add-funding-received-btn]").should("be.enabled");
+        // enter and click on add funding received
+        cy.get("#notes").type("Test notes");
+        cy.get("[data-cy=add-funding-received-btn]").click();
+        // check card on the right
+        cy.get("[data-cy=budget-received-card]").should("exist").and("contain", "1,000,000.00");
+        // click on button at bottom of form
+        cy.get("[data-cy=save-btn]").click();
+        // check success alert
+        cy.get(".usa-alert__body").should("contain", `The CAN ${can504.nickname} has been successfully updated.`);
+        // check that table and card are updated
+        cy.get("[data-cy=budget-received-card]")
+            .should("exist")
+            .and("contain", "Received $1,000,000.00 of $5,000,000.00");
+        cy.get("tbody").children().should("contain", "2025").and("contain", "$1,000,000.00").and("contain", "20%");
+    });
     it("handles cancelling from budget form", () => {
         cy.visit(`/cans/${can504.number}/funding`);
         cy.get("#fiscal-year-select").select(currentFiscalYear);
         cy.get("#edit").click();
-        cy.get("#carry-forward-card").should("contain", "0");
+        cy.get("#carry-forward-card").should("contain", "$ 5,000,000.00");
         cy.get("[data-cy='can-budget-fy-card']").should("contain", "5,000,000.00");
         cy.get("#budget-amount").type("6_000_000");
         cy.get("#add-fy-budget").click();
         cy.get("[data-cy='can-budget-fy-card']").should("contain", "6,000,000.00");
         cy.get("#save-changes").should("be.enabled");
+        // test funding received form
+        cy.get("#funding-received-amount").type("1_000_000");
+        cy.get("[data-cy=add-funding-received-btn]").click();
+        // cancel changes
         cy.get("[data-cy=cancel-button]").should("be.enabled");
         cy.get("[data-cy=cancel-button]").click();
         cy.get(".usa-modal__heading").should(
@@ -214,11 +254,15 @@ describe("CAN detail page", () => {
             "Are you sure you want to cancel editing? Your changes will not be saved."
         );
         cy.get("[data-cy='confirm-action']").click();
-        cy.get("[data-cy=budget-received-card]").should("exist").and("contain", "Received $0.00 of $5,000,000.00");
+        cy.get("[data-cy=budget-received-card]")
+            .should("exist")
+            .and("contain", "Received $1,000,000.00 of $5,000,000.00");
         cy.get("[data-cy=can-budget-fy-card]")
             .should("exist")
             .and("contain", "CAN Budget by FY")
             .and("contain", `FY ${currentFiscalYear}`)
             .and("contain", "$5,000,000.00");
+        // check table has one row
+        cy.get("tbody").children().should("have.length", 1);
     });
 });
diff --git a/frontend/src/api/opsAPI.js b/frontend/src/api/opsAPI.js
index 1536f99d43..d48fca42a2 100644
--- a/frontend/src/api/opsAPI.js
+++ b/frontend/src/api/opsAPI.js
@@ -230,6 +230,15 @@ export const opsApi = createApi({
             }),
             invalidatesTags: ["Cans", "CanFunding"]
         }),
+        addCanFundingReceived: builder.mutation({
+            query: ({ data }) => ({
+                url: `/cans-funding-received/`,
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: data
+            }),
+            invalidatesTags: ["Cans", "CanFunding"]
+        }),
         getCanFundingSummary: builder.query({
             query: ({ ids, fiscalYear, activePeriod, transfer, portfolio, fyBudgets }) => {
                 const queryParams = [];
@@ -433,6 +442,7 @@ export const {
     useUpdateCanMutation,
     useAddCanFundingBudgetsMutation,
     useUpdateCanFundingBudgetMutation,
+    useAddCanFundingReceivedMutation,
     useGetCanFundingSummaryQuery,
     useGetNotificationsByUserIdQuery,
     useGetNotificationsByUserIdAndAgreementIdQuery,
diff --git a/frontend/src/components/CANs/CANBudgetForm/CANBudgetForm.jsx b/frontend/src/components/CANs/CANBudgetForm/CANBudgetForm.jsx
index 07f727ed60..5c4c6ceac2 100644
--- a/frontend/src/components/CANs/CANBudgetForm/CANBudgetForm.jsx
+++ b/frontend/src/components/CANs/CANBudgetForm/CANBudgetForm.jsx
@@ -3,6 +3,7 @@ import icons from "../../../uswds/img/sprite.svg";
 
 /**
  * @typedef {Object} CANBudgetFormProps
+ * @property {string} totalFunding
  * @property {string} budgetAmount
  * @property {(arg: string) => string} cn
  * @property {Object} res
@@ -17,14 +18,13 @@ import icons from "../../../uswds/img/sprite.svg";
  * @param {CANBudgetFormProps} props
  * @returns  {JSX.Element} - The component JSX.
  */
-const CANBudgetForm = ({ budgetAmount, cn, res, fiscalYear, handleAddBudget, runValidate, setBudgetAmount }) => {
+const CANBudgetForm = ({ totalFunding, budgetAmount, cn, res, fiscalYear, handleAddBudget, runValidate, setBudgetAmount }) => {
     const fillColor = budgetAmount ? "#005ea2" : "#757575";
 
     return (
         <form
             onSubmit={(e) => {
                 handleAddBudget(e);
-                setBudgetAmount("");
             }}
         >
             <div style={{ width: "383px" }}>
@@ -38,6 +38,7 @@ const CANBudgetForm = ({ budgetAmount, cn, res, fiscalYear, handleAddBudget, run
                     value={budgetAmount || ""}
                     messages={res.getErrors("budget-amount")}
                     className={cn("budget-amount")}
+                    placeholder={`$${totalFunding}`}
                 />
             </div>
             <button
diff --git a/frontend/src/components/CANs/CANBudgetForm/CANBudgetForm.test.jsx b/frontend/src/components/CANs/CANBudgetForm/CANBudgetForm.test.jsx
index 7c8da82f0d..f97561e35a 100644
--- a/frontend/src/components/CANs/CANBudgetForm/CANBudgetForm.test.jsx
+++ b/frontend/src/components/CANs/CANBudgetForm/CANBudgetForm.test.jsx
@@ -47,7 +47,6 @@ describe("CANBudgetForm", () => {
         await user.click(screen.getByRole("button", { name: /add fy budget/i }));
 
         expect(defaultProps.handleAddBudget).toHaveBeenCalled();
-        expect(defaultProps.setBudgetAmount).toHaveBeenCalledWith("");
     });
 
     test("calls runValidate when currency input changes", () => {
diff --git a/frontend/src/components/CANs/CANBudgetForm/suite.js b/frontend/src/components/CANs/CANBudgetForm/suite.js
deleted file mode 100644
index 5ec1e807fa..0000000000
--- a/frontend/src/components/CANs/CANBudgetForm/suite.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { create, test, enforce, only } from "vest";
-
-const suite = create((data = {}, fieldName) => {
-    only(fieldName);
-
-    test("budget-amount", "This is required information", () => {
-        enforce(data["budget-amount"]).isNotBlank();
-    });
-});
-
-export default suite;
diff --git a/frontend/src/components/CANs/CANFundingReceivedForm/CanFundingReceivedForm.jsx b/frontend/src/components/CANs/CANFundingReceivedForm/CanFundingReceivedForm.jsx
new file mode 100644
index 0000000000..d02283e67e
--- /dev/null
+++ b/frontend/src/components/CANs/CANFundingReceivedForm/CanFundingReceivedForm.jsx
@@ -0,0 +1,80 @@
+import CurrencyInput from "../../UI/Form/CurrencyInput";
+import TextArea from "../../UI/Form/TextArea";
+import icons from "../../../uswds/img/sprite.svg";
+
+/**
+ * @typedef {Object} CANFundingReceivedFormProps
+ * @property {(arg: string) => string} cn
+ * @property {Object} res
+ * @property {string} receivedFundingAmount
+ * @property {(e: React.FormEvent<HTMLFormElement>) => void} handleSubmit
+ * @property {(name: string, value: string) => void} runValidate
+ * @property { React.Dispatch<React.SetStateAction<string>>} setReceivedFundingAmount
+ * @property {string} notes
+ * @property { React.Dispatch<React.SetStateAction<string>>} setNotes
+ */
+
+/**
+ * @component - The CAN Funding Received Form component.
+ * @param {CANFundingReceivedFormProps} props
+ * @returns  {JSX.Element} - The component JSX.
+ */
+
+const CANFundingReceivedForm = ({
+    cn,
+    res,
+    runValidate,
+    handleSubmit,
+    receivedFundingAmount,
+    setReceivedFundingAmount,
+    notes,
+    setNotes
+}) => {
+    const isFormInValid = !receivedFundingAmount || res.hasErrors("funding-received-amount");
+    const fillColor = !isFormInValid ? "#005ea2" : "#757575";
+
+    return (
+        <form
+            onSubmit={(e) => {
+                handleSubmit(e);
+            }}
+        >
+            <div style={{ width: "383px" }}>
+                <CurrencyInput
+                    name="funding-received-amount"
+                    label="Funding Received"
+                    onChange={(name, value) => {
+                        runValidate("funding-received-amount", value);
+                    }}
+                    setEnteredAmount={setReceivedFundingAmount}
+                    value={receivedFundingAmount || ""}
+                    messages={res.getErrors("funding-received-amount")}
+                    className={`${cn("funding-received-amount")} margin-top-0`}
+                />
+                <TextArea
+                    maxLength={75}
+                    name="notes"
+                    label="Notes (optional)"
+                    value={notes}
+                    onChange={(name, value) => setNotes(value)}
+                    textAreaStyle={{ height: "51px" }}
+                />{" "}
+            </div>
+            <button
+                className="usa-button usa-button--outline margin-top-4"
+                disabled={isFormInValid}
+                data-cy="add-funding-received-btn"
+            >
+                <svg
+                    className="height-2 width-2 margin-right-05 cursor-pointer"
+                    style={{ fill: fillColor }}
+                >
+                    <use xlinkHref={`${icons}#add`}></use>
+                </svg>
+                Add Funding Received
+            </button>
+        </form>
+    );
+};
+
+export default CANFundingReceivedForm;
diff --git a/frontend/src/components/CANs/CANFundingReceivedForm/CanFundingReceivedForm.test.jsx b/frontend/src/components/CANs/CANFundingReceivedForm/CanFundingReceivedForm.test.jsx
new file mode 100644
index 0000000000..c1f7ca3002
--- /dev/null
+++ b/frontend/src/components/CANs/CANFundingReceivedForm/CanFundingReceivedForm.test.jsx
@@ -0,0 +1,78 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import CANFundingReceivedForm from "./CanFundingReceivedForm";
+
+describe("CANFundingReceivedForm", () => {
+    let user;
+    const defaultProps = {
+        cn: vi.fn(),
+        res: {
+            hasErrors: vi.fn().mockReturnValue(false),
+            getErrors: vi.fn().mockReturnValue([])
+        },
+        receivedFundingAmount: "",
+        handleSubmit: vi.fn(),
+        runValidate: vi.fn(),
+        setReceivedFundingAmount: vi.fn(),
+        notes: "",
+        setNotes: vi.fn()
+    };
+
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+    });
+
+    it("renders the form correctly", () => {
+        render(<CANFundingReceivedForm {...defaultProps} />);
+
+        expect(screen.getByLabelText(/Funding Received/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/Notes \(optional\)/i)).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: /Add Funding Received/i })).toBeInTheDocument();
+    });
+
+    it("calls setNotes when typing in notes field", async () => {
+        render(<CANFundingReceivedForm {...defaultProps} />);
+        const textarea = screen.getByLabelText(/Notes \(optional\)/i);
+
+        await user.type(textarea, "Test note");
+        expect(defaultProps.setNotes).toHaveBeenCalledTimes(9);
+    });
+
+    it("calls setReceivedFundingAmount when typing amount", async () => {
+        render(<CANFundingReceivedForm {...defaultProps} />);
+        const input = screen.getByLabelText(/Funding Received/i);
+
+        await user.type(input, "1000");
+
+        expect(defaultProps.setReceivedFundingAmount).toHaveBeenCalledWith(1000);
+    });
+
+    it("calls handleSubmit when form is submitted", async () => {
+        render(
+            <CANFundingReceivedForm
+                {...defaultProps}
+                receivedFundingAmount="1000"
+            />
+        );
+
+        await user.click(screen.getByRole("button", { name: /Add Funding Received/i }));
+
+        expect(defaultProps.handleSubmit).toHaveBeenCalled();
+    });
+
+    it("disables submit button when form is invalid", () => {
+        render(
+            <CANFundingReceivedForm
+                {...defaultProps}
+                res={{
+                    ...defaultProps.res,
+                    hasErrors: vi.fn().mockReturnValue(true)
+                }}
+            />
+        );
+
+        expect(screen.getByRole("button", { name: /Add Funding Received/i })).toBeDisabled();
+    });
+});
diff --git a/frontend/src/components/CANs/CANFundingReceivedForm/index.js b/frontend/src/components/CANs/CANFundingReceivedForm/index.js
new file mode 100644
index 0000000000..c54a7a7f34
--- /dev/null
+++ b/frontend/src/components/CANs/CANFundingReceivedForm/index.js
@@ -0,0 +1 @@
+export { default } from "./CanFundingReceivedForm";
diff --git a/frontend/src/components/CANs/CANFundingReceivedTable/CANFundingReceivedTable.jsx b/frontend/src/components/CANs/CANFundingReceivedTable/CANFundingReceivedTable.jsx
index cd86be2343..969b97e539 100644
--- a/frontend/src/components/CANs/CANFundingReceivedTable/CANFundingReceivedTable.jsx
+++ b/frontend/src/components/CANs/CANFundingReceivedTable/CANFundingReceivedTable.jsx
@@ -1,16 +1,6 @@
-import { faClock } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import CurrencyFormat from "react-currency-format";
-import { calculatePercent, formatDateToMonthDayYear } from "../../../helpers/utils";
 import Table from "../../UI/Table";
-import TableRowExpandable from "../../UI/TableRowExpandable";
-import {
-    changeBgColorIfExpanded,
-    expandedRowBGColor,
-    removeBorderBottomIfExpanded
-} from "../../UI/TableRowExpandable/TableRowExpandable.helpers";
-import { useTableRow } from "../../UI/TableRowExpandable/TableRowExpandable.hooks";
-import { NO_DATA } from "../../../constants";
+import CANFundingReceivedTableRow from "./CANFundingReceivedTableRow";
+
 /**
  * @typedef {import("../../../components/CANs/CANTypes").FundingReceived} FundingReceived
  */
@@ -27,128 +17,14 @@ import { NO_DATA } from "../../../constants";
  * @returns  {JSX.Element} - The component JSX.
  */
 const CANFundingReceivedTable = ({ fundingReceived, totalFunding }) => {
-    const { isExpanded, setIsExpanded, setIsRowActive } = useTableRow();
-    const borderExpandedStyles = removeBorderBottomIfExpanded(isExpanded);
-    const bgExpandedStyles = changeBgColorIfExpanded(isExpanded);
-
-    /**
-     * Component for displaying funding received data in a table format
-     * @component ExpandedData - Displays additional details when a row is expanded
-     * @param {Object} props
-     * @param {string} props.createdBy - Name of user who created the funding entry
-     * @param {string} props.createdOn - Date when funding entry was created
-     * @param {string} [props.notes] - Additional notes for the funding entry
-     * @returns {JSX.Element} Table cell containing expanded details
-     */
-    const ExpandedData = ({ createdBy, createdOn, notes }) => (
-        <td
-            colSpan={9}
-            className="border-top-none"
-            style={expandedRowBGColor}
-        >
-            <div className="display-flex padding-right-9">
-                <dl className="font-12px">
-                    <dt className="margin-0 text-base-dark">Created By</dt>
-                    <dd
-                        id={`created-by-name`}
-                        className="margin-0"
-                    >
-                        {createdBy ?? NO_DATA}
-                    </dd>
-                    <dt className="margin-0 text-base-dark display-flex flex-align-center margin-top-2">
-                        <FontAwesomeIcon
-                            icon={faClock}
-                            className="height-2 width-2 margin-right-1"
-                        />
-                        {formatDateToMonthDayYear(createdOn)}
-                    </dt>
-                </dl>
-                <dl
-                    className="font-12px"
-                    style={{ marginLeft: "9.0625rem" }}
-                >
-                    <dt className="margin-0 text-base-dark">Notes</dt>
-                    <dd
-                        className="margin-0"
-                        style={{ maxWidth: "400px" }}
-                    >
-                        {notes ?? "No notes added."}
-                    </dd>
-                </dl>
-            </div>
-        </td>
-    );
-
-    /**
-     * @component TableRowData component renders a table row
-     * @param {Object} props - The properties object.
-     * @param {number} props.rowId - The identifier for the row.
-     * @param {number} props.fiscalYear - The fiscal year for the funding data.
-     * @param {number} [props.funding] - The amount of funding received.
-     * @param {number} props.totalFunding - The total funding available.
-     * @returns {JSX.Element} The rendered table row data.
-     */
-    const TableRowData = ({ rowId, fiscalYear, funding = 0, totalFunding }) => (
-        <>
-            <th
-                scope="row"
-                className={`${borderExpandedStyles}`}
-                style={bgExpandedStyles}
-            >
-                {rowId}
-            </th>
-            <td
-                className={borderExpandedStyles}
-                style={bgExpandedStyles}
-            >
-                {fiscalYear}
-            </td>
-            <td
-                className={borderExpandedStyles}
-                style={bgExpandedStyles}
-            >
-                <CurrencyFormat
-                    value={funding}
-                    displayType={"text"}
-                    thousandSeparator={true}
-                    prefix={"$"}
-                    decimalScale={2}
-                    fixedDecimalScale
-                />
-            </td>
-            <td
-                className={borderExpandedStyles}
-                style={bgExpandedStyles}
-            >
-                {calculatePercent(funding, totalFunding)}%
-            </td>
-        </>
-    );
-
     return (
         <Table tableHeadings={["Funding ID", "FY", "Funding Received", "% of Total FY Budget"]}>
-            {fundingReceived.map((row) => {
+            {fundingReceived.map((fundingRow) => {
                 return (
-                    <TableRowExpandable
-                        key={row.id}
-                        tableRowData={
-                            <TableRowData
-                                rowId={row.id}
-                                fiscalYear={row.fiscal_year}
-                                funding={row.funding}
-                                totalFunding={totalFunding}
-                            />
-                        }
-                        expandedData={
-                            <ExpandedData
-                                createdBy={row.created_by_user}
-                                createdOn={row.created_on}
-                                notes={row.notes}
-                            />
-                        }
-                        isExpanded={isExpanded}
-                        setIsExpanded={setIsExpanded}
-                        setIsRowActive={setIsRowActive}
+                    <CANFundingReceivedTableRow
+                        key={fundingRow.id}
+                        fundingReceived={fundingRow}
+                        totalFunding={totalFunding}
                     />
                 );
             })}
diff --git a/frontend/src/components/CANs/CANFundingReceivedTable/CANFundingReceivedTableRow.jsx b/frontend/src/components/CANs/CANFundingReceivedTable/CANFundingReceivedTableRow.jsx
new file mode 100644
index 0000000000..d623c27fd0
--- /dev/null
+++ b/frontend/src/components/CANs/CANFundingReceivedTable/CANFundingReceivedTableRow.jsx
@@ -0,0 +1,152 @@
+import { faClock } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import CurrencyFormat from "react-currency-format";
+import { calculatePercent, formatDateToMonthDayYear } from "../../../helpers/utils";
+import {
+    changeBgColorIfExpanded,
+    expandedRowBGColor,
+    removeBorderBottomIfExpanded
+} from "../../UI/TableRowExpandable/TableRowExpandable.helpers";
+import { useTableRow } from "../../UI/TableRowExpandable/TableRowExpandable.hooks";
+import { NO_DATA } from "../../../constants";
+import TableRowExpandable from "../../UI/TableRowExpandable";
+
+/**
+ * @typedef {import("../../../components/CANs/CANTypes").FundingReceived} FundingReceived
+ */
+
+/**
+ * @typedef {Object} CANFundingReceivedTableRowProps
+ * @property {string} totalFunding
+ * @property {FundingReceived} fundingReceived data for table
+ */
+
+/**
+ * @component - The CAN Funding component.
+ * @param {CANFundingReceivedTableRowProps} props
+ * @returns  {JSX.Element} - The component JSX.
+ */
+
+const CANFundingReceivedTableRow = ({ fundingReceived, totalFunding }) => {
+    const { isExpanded, setIsExpanded, setIsRowActive } = useTableRow();
+    const borderExpandedStyles = removeBorderBottomIfExpanded(isExpanded);
+    const bgExpandedStyles = changeBgColorIfExpanded(isExpanded);
+
+    /**
+     * Component for displaying funding received data in a table format
+     * @component ExpandedData - Displays additional details when a row is expanded
+     * @param {Object} props
+     * @param {string} props.createdBy - Name of user who created the funding entry
+     * @param {string} props.createdOn - Date when funding entry was created
+     * @param {string} [props.notes] - Additional notes for the funding entry
+     * @returns {JSX.Element} Table cell containing expanded details
+     */
+    const ExpandedData = ({ createdBy, createdOn, notes }) => (
+        <td
+            colSpan={9}
+            className="border-top-none"
+            style={expandedRowBGColor}
+        >
+            <div className="display-flex padding-right-9">
+                <dl className="font-12px">
+                    <dt className="margin-0 text-base-dark">Created By</dt>
+                    <dd
+                        id={`created-by-name`}
+                        className="margin-0"
+                    >
+                        {createdBy ?? NO_DATA}
+                    </dd>
+                    <dt className="margin-0 text-base-dark display-flex flex-align-center margin-top-2">
+                        <FontAwesomeIcon
+                            icon={faClock}
+                            className="height-2 width-2 margin-right-1"
+                        />
+                        {formatDateToMonthDayYear(createdOn)}
+                    </dt>
+                </dl>
+                <dl
+                    className="font-12px"
+                    style={{ marginLeft: "9.0625rem" }}
+                >
+                    <dt className="margin-0 text-base-dark">Notes</dt>
+                    <dd
+                        className="margin-0"
+                        style={{ maxWidth: "400px" }}
+                    >
+                        {notes ?? "No notes added."}
+                    </dd>
+                </dl>
+            </div>
+        </td>
+    );
+
+    /**
+     * @component TableRowData component renders a table row
+     * @param {Object} props - The properties object.
+     * @param {number} props.rowId - The identifier for the row.
+     * @param {number} props.fiscalYear - The fiscal year for the funding data.
+     * @param {number} [props.funding] - The amount of funding received.
+     * @param {number} props.totalFunding - The total funding available.
+     * @returns {JSX.Element} The rendered table row data.
+     */
+    const TableRowData = ({ rowId, fiscalYear, funding = 0, totalFunding }) => (
+        <>
+            <th
+                scope="row"
+                className={`${borderExpandedStyles}`}
+                style={bgExpandedStyles}
+            >
+                {rowId}
+            </th>
+            <td
+                className={borderExpandedStyles}
+                style={bgExpandedStyles}
+            >
+                {fiscalYear}
+            </td>
+            <td
+                className={borderExpandedStyles}
+                style={bgExpandedStyles}
+            >
+                <CurrencyFormat
+                    value={funding}
+                    displayType={"text"}
+                    thousandSeparator={true}
+                    prefix={"$"}
+                    decimalScale={2}
+                    fixedDecimalScale
+                />
+            </td>
+            <td
+                className={borderExpandedStyles}
+                style={bgExpandedStyles}
+            >
+                {calculatePercent(funding, totalFunding)}%
+            </td>
+        </>
+    );
+    return (
+        <TableRowExpandable
+            tableRowData={
+                <TableRowData
+                    rowId={fundingReceived.id}
+                    fiscalYear={fundingReceived.fiscal_year}
+                    funding={fundingReceived.funding}
+                    totalFunding={+totalFunding}
+                />
+            }
+            expandedData={
+                <ExpandedData
+                    createdBy={fundingReceived.created_by_user?.full_name}
+                    createdOn={fundingReceived.created_on}
+                    notes={fundingReceived.notes}
+                />
+            }
+            isExpanded={isExpanded}
+            setIsExpanded={setIsExpanded}
+            setIsRowActive={setIsRowActive}
+        />
+    );
+};
+
+export default CANFundingReceivedTableRow;
diff --git a/frontend/src/components/UI/DataViz/LineGraph/LineGraph.jsx b/frontend/src/components/UI/DataViz/LineGraph/LineGraph.jsx
index bcdad14d52..0593f26c83 100644
--- a/frontend/src/components/UI/DataViz/LineGraph/LineGraph.jsx
+++ b/frontend/src/components/UI/DataViz/LineGraph/LineGraph.jsx
@@ -41,7 +41,7 @@ const LineGraph = ({ data = [], setActiveId = () => {}, isStriped = false, overB
             <div
                 className={`${styles.leftBar} ${styles.dottedBar}`}
                 style={{
-                    flex: ratio,
+                    flex: `0  1 ${ratio * 100}%`,
                     backgroundColor: leftColor,
                     backgroundImage:
                         isStriped && !overBudget
diff --git a/frontend/src/components/UI/DataViz/LineGraph/ReverseLineGraph.jsx b/frontend/src/components/UI/DataViz/LineGraph/ReverseLineGraph.jsx
index f9c6d1f1c3..d89ddf5f00 100644
--- a/frontend/src/components/UI/DataViz/LineGraph/ReverseLineGraph.jsx
+++ b/frontend/src/components/UI/DataViz/LineGraph/ReverseLineGraph.jsx
@@ -55,8 +55,10 @@ const ReverseLineGraph = ({ data = [], setActiveId = () => {} }) => {
                 <div
                     className={`${styles.leftBar}`}
                     style={{
-                        flex: `${ratio * 100}%`,
-                        backgroundColor: leftColor
+                        flex: `0  1 ${ratio * 100}%`,
+                        backgroundColor: leftColor,
+                        borderTopRightRadius: ratio === 1 ? "4px" : "0",
+                        borderBottomRightRadius: ratio === 1 ? "4px" : "0"
                     }}
                     onMouseEnter={() => setActiveId(leftId)}
                     onMouseLeave={() => setActiveId(0)}
@@ -73,7 +75,9 @@ const ReverseLineGraph = ({ data = [], setActiveId = () => {} }) => {
                         transparent 5px,
                         var(--data-viz-budget-graph-1) 5px,
                         var(--data-viz-budget-graph-1) 6px
-                    )`
+                    )`,
+                    borderTopLeftRadius: "4px",
+                    borderBottomLeftRadius: "4px"
                 }}
                 onMouseEnter={() => setActiveId(rightId)}
                 onMouseLeave={() => setActiveId(0)}
diff --git a/frontend/src/components/UI/Form/CurrencyInput/CurrencyInput.jsx b/frontend/src/components/UI/Form/CurrencyInput/CurrencyInput.jsx
index 9983a8a43f..4a260de2a6 100644
--- a/frontend/src/components/UI/Form/CurrencyInput/CurrencyInput.jsx
+++ b/frontend/src/components/UI/Form/CurrencyInput/CurrencyInput.jsx
@@ -13,6 +13,7 @@ import CurrencyFormat from "react-currency-format";
  * @param {string | number} [props.value] - The value of the input field.(optional)
  * @param {string} [props.className] - Additional CSS classes to apply to the component (optional).
  * @param {Function} [props.setEnteredAmount] - A function to call when the input value changes.
+ * @param {string} [props.placeholder] - The placeholder text to display in the input
  * @returns {JSX.Element} - The rendered component.
  */
 const CurrencyInput = ({
@@ -23,7 +24,8 @@ const CurrencyInput = ({
     messages = [],
     value,
     className,
-    setEnteredAmount
+    setEnteredAmount,
+    placeholder = "$"
 }) => {
     return (
         <div className={cx("usa-form-group", pending && "pending", className)}>
@@ -49,7 +51,7 @@ const CurrencyInput = ({
                 thousandSeparator={true}
                 decimalScale={2}
                 renderText={(value) => value}
-                placeholder="$"
+                placeholder={placeholder}
                 onValueChange={(values) => {
                     const { floatValue } = values;
                     setEnteredAmount(floatValue);
diff --git a/frontend/src/pages/cans/detail/CanFunding.hooks.js b/frontend/src/pages/cans/detail/CanFunding.hooks.js
index bc36f2a764..e542bb7298 100644
--- a/frontend/src/pages/cans/detail/CanFunding.hooks.js
+++ b/frontend/src/pages/cans/detail/CanFunding.hooks.js
@@ -1,9 +1,19 @@
 import React from "react";
-import { useAddCanFundingBudgetsMutation, useUpdateCanFundingBudgetMutation } from "../../../api/opsAPI.js";
+import {
+    useAddCanFundingBudgetsMutation,
+    useUpdateCanFundingBudgetMutation,
+    useAddCanFundingReceivedMutation
+} from "../../../api/opsAPI.js";
 import { getCurrentFiscalYear } from "../../../helpers/utils.js";
 import useAlert from "../../../hooks/use-alert.hooks";
-import suite from "../../../components/CANs/CANBudgetForm/suite.js";
+import suite from "./CanFundingSuite.js";
 import classnames from "vest/classnames";
+import { NO_DATA } from "../../../constants.js";
+import { useSelector } from "react-redux";
+
+/**
+ * @typedef {import("../../../components/CANs/CANTypes").FundingReceived} FundingReceived
+ */
 
 /**
  * @description - Custom hook for the CAN Funding component.
@@ -14,6 +24,8 @@ import classnames from "vest/classnames";
  * @param {boolean} isBudgetTeamMember
  * @param {boolean} isEditMode
  * @param {() => void} toggleEditMode
+ * @param {string} receivedFunding
+ * @param {FundingReceived[]} fundingReceived
  * @param {number} [currentFiscalYearFundingId] - The id of the current fiscal year funding. optional
  */
 export default function useCanFunding(
@@ -24,14 +36,15 @@ export default function useCanFunding(
     isBudgetTeamMember,
     isEditMode,
     toggleEditMode,
+    receivedFunding,
+    fundingReceived,
     currentFiscalYearFundingId
 ) {
     const currentFiscalYear = getCurrentFiscalYear();
     const showButton = isBudgetTeamMember && fiscalYear === Number(currentFiscalYear) && !isEditMode;
-    const [budgetAmount, setBudgetAmount] = React.useState("");
-    const [submittedAmount, setSubmittedAmount] = React.useState("");
-    const [isBudgetFormSubmitted, setIsBudgetFormSubmitted] = React.useState(false);
     const [showModal, setShowModal] = React.useState(false);
+    const [totalReceived, setTotalReceived] = React.useState(parseFloat(receivedFunding || "0"));
+    const [enteredFundingReceived, setEnteredFundingReceived] = React.useState([...fundingReceived]);
     const [modalProps, setModalProps] = React.useState({
         heading: "",
         actionButtonText: "",
@@ -39,13 +52,58 @@ export default function useCanFunding(
         handleConfirm: () => {}
     });
 
+    const [budgetForm, setBudgetForm] = React.useState({
+        enteredAmount: "",
+        submittedAmount: "",
+        isSubmitted: false
+    });
+
+    const [fundingReceivedForm, setFundingReceivedForm] = React.useState({
+        enteredAmount: "",
+        submittedAmount: "",
+        enteredNotes: "",
+        submittedNotes: "",
+        isSubmitted: false
+    });
+
     const [addCanFundingBudget] = useAddCanFundingBudgetsMutation();
     const [updateCanFundingBudget] = useUpdateCanFundingBudgetMutation();
+    const [addCanFundingReceived] = useAddCanFundingReceivedMutation();
     const { setAlert } = useAlert();
+    const activeUserFullName = useSelector((state) => state.auth?.activeUser?.full_name) || "";
 
     React.useEffect(() => {
-        setSubmittedAmount(totalFunding);
+        setBudgetForm({ ...budgetForm, submittedAmount: totalFunding });
     }, [totalFunding]);
+
+    React.useEffect(() => {
+        setEnteredFundingReceived([...fundingReceived]);
+    }, [fundingReceived]);
+
+    const handleEnteredBudgetAmount = (value) => {
+        const nextForm = {
+            ...budgetForm,
+            enteredAmount: value
+        };
+        setBudgetForm(nextForm);
+    };
+
+    const handleEnteredFundingReceivedAmount = (value) => {
+        const nextForm = {
+            ...fundingReceivedForm,
+            enteredAmount: value
+        };
+        setFundingReceivedForm(nextForm);
+    };
+
+    const handleEnteredNotes = (value) => {
+        const nextForm = {
+            ...fundingReceivedForm,
+            enteredNotes: value
+        };
+        setFundingReceivedForm(nextForm);
+    };
+
     // Validation
     let res = suite.get();
 
@@ -60,31 +118,101 @@ export default function useCanFunding(
         const payload = {
             fiscal_year: fiscalYear,
             can_id: canId,
-            budget: submittedAmount
+            budget: budgetForm.submittedAmount
         };
-        setAlert({
-            type: "success",
-            heading: "CAN Funding Updated",
-            message: `The CAN ${canNumber} has been successfully updated.`
-        });
-        if (currentFiscalYearFundingId) {
-            updateCanFundingBudget({
-                id: currentFiscalYearFundingId,
-                data: payload
-            });
-        } else {
-            addCanFundingBudget({
-                data: payload
-            });
-        }
+        const fundingPayload = {
+            fiscal_year: fiscalYear,
+            can_id: canId,
+            funding: fundingReceivedForm.submittedAmount,
+            notes: fundingReceivedForm.submittedNotes
+        };
+
+        const updateFunding = async () => {
+            try {
+                if (+payload.budget > 0) {
+                    if (currentFiscalYearFundingId) {
+                        // PATCH for existing CAN Funding
+                        await updateCanFundingBudget({
+                            id: currentFiscalYearFundingId,
+                            data: payload
+                        }).unwrap();
+                        console.log("CAN Funding Updated");
+                    } else {
+                        // POST for new CAN Funding
+                        await addCanFundingBudget({
+                            data: payload
+                        }).unwrap();
+                        console.log("CAN Funding Added");
+                    }
+                }
 
+                if (+fundingPayload.funding > 0) {
+                    await addCanFundingReceived({
+                        data: fundingPayload
+                    }).unwrap();
+                    console.log("Funding Received Updated");
+                }
+
+                setAlert({
+                    type: "success",
+                    heading: "CAN Funding Updated",
+                    message: `The CAN ${canNumber} has been successfully updated.`
+                });
+            } catch (error) {
+                console.error("Error Updating CAN", error);
+                setAlert({
+                    type: "error",
+                    heading: "Error",
+                    message: "An error occurred while updating the CAN.",
+                    redirectUrl: "/error"
+                });
+            }
+        };
+
+        updateFunding();
         cleanUp();
     };
 
     const handleAddBudget = (e) => {
         e.preventDefault();
-        setSubmittedAmount(budgetAmount);
-        setIsBudgetFormSubmitted(true);
+
+        const nextForm = {
+            ...budgetForm,
+            enteredAmount: "",
+            submittedAmount: budgetForm.enteredAmount,
+            isSubmitted: true
+        };
+        setBudgetForm(nextForm);
+    };
+
+    const handleAddFundingReceived = (e) => {
+        e.preventDefault();
+
+        // Update total received first using the functional update pattern
+        setTotalReceived((currentTotal) => currentTotal + +fundingReceivedForm.enteredAmount);
+
+        // update the table data
+        const newFundingReceived = {
+            id: NO_DATA,
+            created_on: new Date().toISOString(),
+            created_by_user: {
+                full_name: activeUserFullName
+            },
+            notes: fundingReceivedForm.enteredNotes,
+            funding: +fundingReceivedForm.enteredAmount,
+            fiscal_year: fiscalYear
+        };
+        setEnteredFundingReceived([...enteredFundingReceived, newFundingReceived]);
+        // Then update the form state
+        const nextForm = {
+            ...fundingReceivedForm,
+            enteredAmount: "",
+            submittedAmount: fundingReceivedForm.enteredAmount,
+            enteredNotes: "",
+            submittedNotes: fundingReceivedForm.enteredNotes,
+            isSubmitted: true
+        };
+        setFundingReceivedForm(nextForm);
     };
 
     const handleCancel = () => {
@@ -93,15 +221,19 @@ export default function useCanFunding(
             heading: "Are you sure you want to cancel editing? Your changes will not be saved.",
             actionButtonText: "Cancel Edits",
             secondaryButtonText: "Continue Editing",
-            handleConfirm: () => cleanUp()
+            handleConfirm: () => {
+                setTotalReceived(parseFloat(receivedFunding || "0"));
+                cleanUp();
+            }
         });
     };
 
     const cleanUp = () => {
-        setBudgetAmount("");
-        setSubmittedAmount(totalFunding);
-        setIsBudgetFormSubmitted(false);
+        setEnteredFundingReceived([...fundingReceived]);
+        setBudgetForm({ enteredAmount: "", submittedAmount: totalFunding, isSubmitted: false });
         setShowModal(false);
+        const nextForm = { ...fundingReceivedForm, enteredAmount: "", enteredNotes: "" };
+        setFundingReceivedForm(nextForm);
         toggleEditMode();
         setModalProps({
             heading: "",
@@ -113,28 +245,27 @@ export default function useCanFunding(
     };
 
     const runValidate = (name, value) => {
-        suite(
-            {
-                ...{ [name]: value }
-            },
-            name
-        );
+        suite({ remainingAmount: +budgetForm.submittedAmount - totalReceived, ...{ [name]: value } }, name);
     };
 
     return {
-        budgetAmount,
         handleAddBudget,
+        handleAddFundingReceived,
         handleCancel,
         handleSubmit,
         modalProps,
         runValidate,
         res,
         cn,
-        setBudgetAmount,
         setShowModal,
         showButton,
         showModal,
-        submittedAmount,
-        isBudgetFormSubmitted
+        budgetForm,
+        handleEnteredBudgetAmount,
+        fundingReceivedForm,
+        handleEnteredFundingReceivedAmount,
+        handleEnteredNotes,
+        totalReceived,
+        enteredFundingReceived
     };
 }
diff --git a/frontend/src/pages/cans/detail/CanFunding.jsx b/frontend/src/pages/cans/detail/CanFunding.jsx
index f23f6e3653..cd29551a1c 100644
--- a/frontend/src/pages/cans/detail/CanFunding.jsx
+++ b/frontend/src/pages/cans/detail/CanFunding.jsx
@@ -11,6 +11,7 @@ import CurrencyCard from "../../../components/UI/Cards/CurrencyCard";
 import ConfirmationModal from "../../../components/UI/Modals/index.js";
 import RoundedBox from "../../../components/UI/RoundedBox";
 import useCanFunding from "./CanFunding.hooks.js";
+import CANFundingReceivedForm from "../../../components/CANs/CANFundingReceivedForm";
 
 /**
  * @typedef {import("../../../components/CANs/CANTypes").FundingDetails} FundingDetails
@@ -56,20 +57,24 @@ const CanFunding = ({
     carryForwardFunding
 }) => {
     const {
-        budgetAmount,
         handleAddBudget,
+        handleAddFundingReceived,
         handleCancel,
         handleSubmit,
         modalProps,
         runValidate,
         cn,
         res,
-        setBudgetAmount,
         setShowModal,
         showButton,
         showModal,
-        submittedAmount,
-        isBudgetFormSubmitted
+        budgetForm,
+        handleEnteredBudgetAmount,
+        fundingReceivedForm,
+        handleEnteredFundingReceivedAmount,
+        handleEnteredNotes,
+        totalReceived,
+        enteredFundingReceived
     } = useCanFunding(
         canId,
         canNumber,
@@ -78,6 +83,8 @@ const CanFunding = ({
         isBudgetTeamMember,
         isEditMode,
         toggleEditMode,
+        receivedFunding,
+        fundingReceived,
         currentFiscalYearFundingId
     );
 
@@ -148,59 +155,90 @@ const CanFunding = ({
                     </div>
                 </section>
             ) : (
-                <section
-                    id="can-budget-form-section"
-                    className="margin-bottom-8"
-                >
-                    <h2>{`Add FY ${fiscalYear} CAN Budget`}</h2>
-                    <p>{`Enter the FY ${fiscalYear} CAN Budget that teams will utilize for planning. For Multi-Year CANs, the Previous FYs Carry-Forward will display for you to review and enter as-is or edit, if needed.`}</p>
-                    <div className="display-flex flex-justify margin-top-4">
-                        <div
-                            className="border-right-1px border-base-light"
-                            style={{ minWidth: "46%" }}
-                        >
-                            <RoundedBox
-                                className="font-12px"
-                                style={{ minHeight: "69px", width: "313px", padding: "17px 0 0 13px" }}
-                                id="carry-forward-card"
+                <div>
+                    <section
+                        id="can-budget-form-section"
+                        className="margin-bottom-8"
+                    >
+                        <h2>{`Add FY ${fiscalYear} CAN Budget`}</h2>
+                        <p>{`Enter the FY ${fiscalYear} CAN Budget that teams will utilize for planning. For Multi-Year CANs, the Previous FYs Carry-Forward will display for you to review and enter as-is or edit, if needed.`}</p>
+                        <div className="display-flex flex-justify margin-top-4">
+                            <div
+                                className="border-right-1px border-base-light"
+                                style={{ minWidth: "46%" }}
                             >
-                                <p className="margin-0 text-base-dark">Previous FYs Carry Forward</p>
-                                <CurrencyFormat
-                                    value={carryForwardFunding}
-                                    displayType="text"
-                                    thousandSeparator={true}
-                                    decimalScale={2}
-                                    fixedDecimalScale={true}
-                                    prefix="$ "
+                                <RoundedBox
+                                    className="font-12px"
+                                    style={{ minHeight: "69px", width: "313px", padding: "17px 0 0 13px" }}
+                                    id="carry-forward-card"
+                                >
+                                    <p className="margin-0 text-base-dark">Previous FYs Carry Forward</p>
+                                    <CurrencyFormat
+                                        value={carryForwardFunding}
+                                        displayType="text"
+                                        thousandSeparator={true}
+                                        decimalScale={2}
+                                        fixedDecimalScale={true}
+                                        prefix="$ "
+                                    />
+                                </RoundedBox>
+                                <CANBudgetForm
+                                    totalFunding={
+                                        budgetForm.submittedAmount ? budgetForm.submittedAmount : totalFunding
+                                    }
+                                    budgetAmount={budgetForm.enteredAmount}
+                                    cn={cn}
+                                    res={res}
+                                    fiscalYear={fiscalYear}
+                                    handleAddBudget={handleAddBudget}
+                                    runValidate={runValidate}
+                                    setBudgetAmount={handleEnteredBudgetAmount}
                                 />
-                            </RoundedBox>
-                            <CANBudgetForm
-                                budgetAmount={budgetAmount}
-                                cn={cn}
-                                res={res}
-                                fiscalYear={fiscalYear}
-                                handleAddBudget={handleAddBudget}
-                                runValidate={runValidate}
-                                setBudgetAmount={setBudgetAmount}
+                            </div>
+                            <CurrencyCard
+                                amount={+budgetForm.submittedAmount}
+                                dataCy="can-budget-fy-card"
+                                headerText={`FY ${fiscalYear} CAN Budget`}
                             />
                         </div>
-                        <CurrencyCard
-                            amount={submittedAmount}
-                            dataCy="can-budget-fy-card"
-                            headerText={`FY ${fiscalYear} CAN Budget`}
-                        />
-                    </div>
-                </section>
+                    </section>
+                    <section id="can-funding-received-form-section" className="margin-bottom-4">
+                        <h2>{`Add FY ${fiscalYear} Funding Received YTD`}</h2>
+                        <p>{`Add funding received towards the Total FY ${fiscalYear} Budget or come back to add funding later. Funding Received means the money is in OPRE’s hands and ready to spend against.`}</p>
+                        <div className="display-flex flex-justify margin-top-4">
+                            <div
+                                className="border-right-1px border-base-light"
+                                style={{ minWidth: "46%" }}
+                            >
+                                <CANFundingReceivedForm
+                                    receivedFundingAmount={fundingReceivedForm.enteredAmount}
+                                    setReceivedFundingAmount={handleEnteredFundingReceivedAmount}
+                                    handleSubmit={handleAddFundingReceived}
+                                    setNotes={handleEnteredNotes}
+                                    notes={fundingReceivedForm.enteredNotes}
+                                    cn={cn}
+                                    res={res}
+                                    runValidate={runValidate}
+                                />
+                            </div>
+                            <ReceivedFundingCard
+                                title={`FY ${fiscalYear} Funding Received YTD`}
+                                totalReceived={totalReceived.toString() || "0"}
+                                totalFunding={budgetForm.submittedAmount}
+                            />
+                        </div>
+                    </section>
+                </div>
             )}
             <Accordion
                 heading="Funding Received YTD"
                 level={2}
             >
-                {fundingReceived.length === 0 ? (
+                {enteredFundingReceived.length === 0 ? (
                     <p className="text-center">No funding received data available for this CAN.</p>
                 ) : (
                     <CANFundingReceivedTable
-                        fundingReceived={fundingReceived}
+                        fundingReceived={enteredFundingReceived}
                         totalFunding={totalFunding}
                     />
                 )}
@@ -217,7 +255,7 @@ const CanFunding = ({
                     <button
                         id="save-changes"
                         className="usa-button"
-                        disabled={!isBudgetFormSubmitted}
+                        disabled={!budgetForm.isSubmitted && !fundingReceivedForm.isSubmitted}
                         data-cy="save-btn"
                         onClick={(e) => handleSubmit(e)}
                     >
diff --git a/frontend/src/pages/cans/detail/CanFundingSuite.js b/frontend/src/pages/cans/detail/CanFundingSuite.js
new file mode 100644
index 0000000000..9bac300578
--- /dev/null
+++ b/frontend/src/pages/cans/detail/CanFundingSuite.js
@@ -0,0 +1,12 @@
+import { create, test, enforce, only } from "vest";
+
+const suite = create((data = {}, fieldName) => {
+    only(fieldName);
+
+    test("funding-received-amount", "Amount cannot exceed FY Budget", () => {
+        const fundingReceivedAmount = data["funding-received-amount"].replace(/,/g, "") || "0";
+        enforce(fundingReceivedAmount).lessThanOrEquals(data.remainingAmount);
+    });
+});
+
+export default suite;