From 51cb218d6db94c31034ac8f76cbcf9d3e99a4c3a Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sun, 12 Apr 2026 15:02:59 -0400
Subject: [PATCH 1/6] Remove remember me and forgot

---
 frontend/src/login/Login.tsx           | 6 +++---
 frontend/src/sign-up/PasswordField.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/login/Login.tsx b/frontend/src/login/Login.tsx
index 8b45648f..06fc4e8e 100644
--- a/frontend/src/login/Login.tsx
+++ b/frontend/src/login/Login.tsx
@@ -37,7 +37,7 @@ const Login = observer(() => {
           <h1 className="text-3xl lg:text-4xl font-bold flex justify-start">Log in</h1>
         </div>
         <form onSubmit={handleSubmit} className="w-full">
-          <div className="grid grid-cols-1 gap-x-6 gap-y-4">
+          <div className="grid grid-cols-1 gap-x-6">
             <div className="mb-4">
               <div>
                 <InputField id="email" label="Email" type="email" required placeholder="Enter your email address" value={email} onChange={(e) => setEmail(e.target.value)} error={failure} />
@@ -59,7 +59,7 @@ const Login = observer(() => {
           </div>
 
           {/* Remember Me & Forgot Password */}
-          <div className="flex items-center justify-between mb-6">
+          {/* <div className="flex items-center justify-between mb-6">
             <label className="flex items-center cursor pointer">
               <input
                 type="checkbox"
@@ -76,7 +76,7 @@ const Login = observer(() => {
             >
               Forgot Password?
             </button>
-          </div>
+          </div> */}
 
           {/* Error Message */}
           <div className="">
diff --git a/frontend/src/sign-up/PasswordField.tsx b/frontend/src/sign-up/PasswordField.tsx
index c3dfb499..027a5634 100644
--- a/frontend/src/sign-up/PasswordField.tsx
+++ b/frontend/src/sign-up/PasswordField.tsx
@@ -69,7 +69,7 @@ export default function PasswordField({
 
   return (
     <div className="w-full">
-      <label htmlFor={id} className="block text-left font-semibold text-black">
+      <label htmlFor={id} className="block text-left font-semibold text-black text-sm lg:text-base">
         {label}
         {required && <span className="text-red">*</span>}
       </label>

From 854630b6a06d56f43b1bedf8e92087b94bedaa43 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sun, 12 Apr 2026 15:40:35 -0400
Subject: [PATCH 2/6] Money rounding

---
 frontend/src/main-page/cash-flow/CashFlowPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/main-page/cash-flow/CashFlowPage.tsx b/frontend/src/main-page/cash-flow/CashFlowPage.tsx
index 32cd1e43..6625735a 100644
--- a/frontend/src/main-page/cash-flow/CashFlowPage.tsx
+++ b/frontend/src/main-page/cash-flow/CashFlowPage.tsx
@@ -17,7 +17,7 @@ export const formatMoney = (amount: number) => {
   return amount.toLocaleString("en-US", {
     style: "currency",
     currency: "USD",
-    maximumFractionDigits: 0,
+    maximumFractionDigits: 2,
   });
 };
 

From 142f276edd7c89d2865723dca1682fa365121071 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sun, 12 Apr 2026 16:00:27 -0400
Subject: [PATCH 3/6] Fixing settings to input field

---
 frontend/src/main-page/settings/Settings.tsx | 37 ++++----------------
 1 file changed, 7 insertions(+), 30 deletions(-)

diff --git a/frontend/src/main-page/settings/Settings.tsx b/frontend/src/main-page/settings/Settings.tsx
index bbe44431..dd653299 100644
--- a/frontend/src/main-page/settings/Settings.tsx
+++ b/frontend/src/main-page/settings/Settings.tsx
@@ -13,6 +13,7 @@ import ChangePasswordModal, { ChangePasswordFormValues } from "./ChangePasswordM
 import { getAppStore } from "../../external/bcanSatchel/store";
 import { setActiveUsers, updateUserProfile } from "../../external/bcanSatchel/actions";
 import { User } from "../../../../middle-layer/types/User";
+import { InputField } from "../../sign-up";
 
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
@@ -245,40 +246,16 @@ function Settings() {
         editContent={
           <>
             <div className="grid grid-cols-2 gap-6 text-left mb-6">
-              <div>
-                <label className="block text-sm text-gray-500 mb-1">First Name</label>
-                <input
-                  type="text"
-                  value={editForm.firstName}
-                  onChange={(e) =>
+                <InputField required={true} id="firstName" error={personalInfoError?.includes("First") || false} label="First Name" value={editForm.firstName} onChange={(e) =>
                     setEditForm((f) => ({ ...f, firstName: e.target.value }))
-                  }
-                  className="w-full px-3 py-2 rounded-md border border-gray-300 bg-white text-gray-900"
-                />
-              </div>
-              <div>
-                <label className="block text-sm text-gray-500 mb-1">Last Name</label>
-                <input
-                  type="text"
-                  value={editForm.lastName}
-                  onChange={(e) =>
+                  } />
+                <InputField required={true} id="lastName" label="Last Name" error={personalInfoError?.includes("Last") || false} value={editForm.lastName} onChange={(e) =>
                     setEditForm((f) => ({ ...f, lastName: e.target.value }))
-                  }
-                  className="w-full px-3 py-2 rounded-md border border-gray-300 bg-white text-gray-900"
-                />
-              </div>
+                  } />
               <div className="col-span-2">
-                <label className="block text-sm text-gray-500 mb-1">Email Address</label>
-                <input
-                  type="email"
-                  value={editForm.email}
-                  onChange={(e) =>
+                <InputField required={true} id="email" error={personalInfoError?.includes("Email") || false} label="Email Address" value={editForm.email} onChange={(e) =>
                     setEditForm((f) => ({ ...f, email: e.target.value }))
-                  }
-                  className={`w-full px-3 py-2 rounded-md border bg-white text-gray-900 ${
-                    personalInfoError ? "border-[#CC0000]" : "border-gray-300"
-                  }`}
-                />
+                  } />
               </div>
             </div>
             {personalInfoError && (

From 294ad045303bbf3e65d3de923b9b63eb506a73f7 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sun, 12 Apr 2026 16:41:37 -0400
Subject: [PATCH 4/6] Squashed commit of the following:

commit 2202e50d58780d600758d540178e5d9957edd01e
Merge: 08a77c8 c70cae6
Author: prooflesben <122566738+prooflesben@users.noreply.github.com>
Date:   Sun Apr 12 16:36:14 2026 -0400

    Merge pull request #395 from Code-4-Community/389-dev-change-cost-type-and-frontend-for-cost

    Enhance cashflow with frequency and projection start date

commit c70cae69b574a0e5bc493f0b77608abfd1eaecfc
Author: prooflesben <prooflesben@gmail.com>
Date:   Sun Apr 12 16:34:01 2026 -0400

    fixed error

commit 99417b35854a6f7133e9cfcfea15dd0824412dd0
Merge: fece561 08a77c8
Author: prooflesben <122566738+prooflesben@users.noreply.github.com>
Date:   Sun Apr 12 15:56:31 2026 -0400

    Merge branch 'main' into 389-dev-change-cost-type-and-frontend-for-cost

commit 08a77c871e52fd1b1e7621f59a10917466b6a6d6
Merge: 1da382c c2b410b
Author: prooflesben <122566738+prooflesben@users.noreply.github.com>
Date:   Sun Apr 12 15:19:03 2026 -0400

    Merge pull request #387 from Code-4-Community/383-dev---ensure-edit-revenue-works

    edit revenue

commit fece5618c98d0a64abe8a635c7a2c6fa7cd0456b
Merge: 27dcfa8 1da382c
Author: prooflesben <122566738+prooflesben@users.noreply.github.com>
Date:   Sun Apr 12 14:00:22 2026 -0400

    Merge branch 'main' into 389-dev-change-cost-type-and-frontend-for-cost

commit 27dcfa88b82e620c2b2ec5ccc36afa3653936e97
Author: Jane Kamata <janekamata8@gmail.com>
Date:   Sun Apr 5 02:29:05 2026 -0400

    Updating start date default for cost

commit 2cf186e301ee886ac1b6d999b59773dd933fb5f3
Author: Jane Kamata <janekamata8@gmail.com>
Date:   Sun Apr 5 02:18:55 2026 -0400

    Styling changes

commit 3a7ce4b983eb8cffec6f17da6c0ef3eca36dc21c
Author: Jane Kamata <janekamata8@gmail.com>
Date:   Sun Apr 5 02:02:47 2026 -0400

    Added alpha sort to line items, added scrolling

commit 60c9145009fb91ba8f8099804397005dcb64be6e
Author: Jane Kamata <janekamata8@gmail.com>
Date:   Sun Apr 5 01:53:14 2026 -0400

    Updating frequency type

commit 39479c1d7608606532671d720b143dc3b15d5ad8
Author: Jane Kamata <janekamata8@gmail.com>
Date:   Sun Apr 5 01:28:32 2026 -0400

    Adding success message animation

commit c38b79c0ba1716bc33221f13958639f6d98f1958
Author: Jane Kamata <janekamata8@gmail.com>
Date:   Sun Apr 5 00:57:26 2026 -0400

    Updating service check

commit b5c2c2f62e5fe32c2b0ee2da447681d3e789db4a
Author: Jane Kamata <janekamata8@gmail.com>
Date:   Sun Apr 5 00:45:55 2026 -0400

    Updating default values tests

commit 35fb77935fcedad18f1cbade2e6d00460f4ecaba
Author: Jane Kamata <janekamata8@gmail.com>
Date:   Sun Apr 5 00:37:31 2026 -0400

    Updating tests

commit 488b03007a430fc8c146f94553a60b56a6caa50f
Author: Jane Kamata <janekamata8@gmail.com>
Date:   Sat Apr 4 23:52:47 2026 -0400

    Styling fixes

commit 6f96c7deda3965fd183a5630a03919c46d946b63
Author: Jane Kamata <janekamata8@gmail.com>
Date:   Sat Apr 4 23:42:00 2026 -0400

    Adding start date

commit 8c59d004d0023ba83136fb51ad81bd093aaa6a6a
Author: Jane Kamata <janekamata8@gmail.com>
Date:   Sat Apr 4 22:43:22 2026 -0400

    Updating add/edit cost

commit dea1ff7d27c7862936367f8669abdb2215cffdc6
Author: Jane Kamata <janekamata8@gmail.com>
Date:   Sat Apr 4 18:58:06 2026 -0400

    Updating types and checks

commit c2b410b8cd7f5c64d29e467a5a2dc008a0232164
Author: adityapat24 <appathak46@gmail.com>
Date:   Thu Apr 2 16:18:58 2026 -0400

    edit revenue
---
 .../__test__/cashflow-cost.service.spec.ts    |  64 ++++
 backend/src/cost/cashflow-cost.service.ts     |  13 +
 backend/src/cost/types/cost.types.ts          |   5 +
 .../__test__/default-values.service.spec.ts   |  49 +++
 .../default-values.controller.ts              |   9 +-
 .../default-values/default-values.service.ts  |  13 +-
 .../types/default-values.types.ts             |   5 +-
 .../cash-flow/components/CashAddCosts.tsx     | 146 --------
 .../cash-flow/components/CashAddEditCost.tsx  | 262 +++++++++++++
 .../cash-flow/components/CashAddRevenue.tsx   |  39 +-
 .../components/CashCategoryDropdown.tsx       |  17 +-
 .../components/CashCreateLineItem.tsx         |   4 +-
 .../cash-flow/components/CashEditCost.tsx     |  84 -----
 .../cash-flow/components/CashEditRevenue.tsx  | 343 ++++++++++++++++++
 .../cash-flow/components/CashPosition.tsx     |  41 ++-
 .../components/CashRevenueInstallment.tsx     |  21 +-
 .../cash-flow/components/CashSourceList.tsx   |  51 +--
 .../cash-flow/processCashflowData.ts          |   5 +-
 .../cash-flow/processCashflowDataEditSave.ts  |  24 +-
 frontend/src/main-page/grants/GrantPage.tsx   |   2 +-
 .../main-page/grants/grant-view/GrantView.tsx |   2 +-
 frontend/tailwind.config.ts                   |  10 +-
 middle-layer/types/CashflowCost.ts            |   2 +
 middle-layer/types/CashflowSettings.ts        |   3 +
 middle-layer/types/Frequency.ts               |  57 +++
 25 files changed, 951 insertions(+), 320 deletions(-)
 delete mode 100644 frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
 create mode 100644 frontend/src/main-page/cash-flow/components/CashAddEditCost.tsx
 delete mode 100644 frontend/src/main-page/cash-flow/components/CashEditCost.tsx
 create mode 100644 frontend/src/main-page/cash-flow/components/CashEditRevenue.tsx
 create mode 100644 middle-layer/types/Frequency.ts

diff --git a/backend/src/cost/__test__/cashflow-cost.service.spec.ts b/backend/src/cost/__test__/cashflow-cost.service.spec.ts
index 8e9b33a5..45b9187e 100644
--- a/backend/src/cost/__test__/cashflow-cost.service.spec.ts
+++ b/backend/src/cost/__test__/cashflow-cost.service.spec.ts
@@ -8,6 +8,7 @@ import {
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { CostService } from '../cashflow-cost.service';
 import { CostType } from '../../../../middle-layer/types/CostType';
+import { Frequency } from '../../../../middle-layer/types/Frequency';
 import { CashflowCost } from '../../../../middle-layer/types/CashflowCost';
 import { TDateISO } from '../../utils/date';
 
@@ -170,6 +171,7 @@ describe('CostService', () => {
         name: '  Food  ',
         amount: 200,
         type: CostType.MealsFood,
+        frequency: Frequency.Yearly,
         date: '2026-03-22' as TDateISO,
       };
 
@@ -179,6 +181,7 @@ describe('CostService', () => {
         name: 'Food',
         amount: 200,
         type: CostType.MealsFood,
+        frequency: Frequency.Yearly,
         date: '2026-03-22',
       });
       expect(mockPut).toHaveBeenCalledWith({
@@ -187,6 +190,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 200,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22',
         },
         ConditionExpression: 'attribute_not_exists(#name)',
@@ -202,6 +206,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 0,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(BadRequestException);
@@ -210,6 +215,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 0,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow('amount must be a finite positive number');
@@ -221,6 +227,19 @@ describe('CostService', () => {
           name: 'Food',
           amount: 100,
           type: 'INVALID' as unknown as CostType,
+          frequency: Frequency.Yearly,
+          date: '2026-03-22' as TDateISO,
+        }),
+      ).rejects.toThrow(BadRequestException);
+    });
+
+    it('throws BadRequestException for invalid frequency', async () => {
+      await expect(
+        service.createCost({
+          name: 'Food',
+          amount: 100,
+          type: CostType.MealsFood,
+          frequency: 'INVALID' as unknown as Frequency,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(BadRequestException);
@@ -232,6 +251,7 @@ describe('CostService', () => {
           name: '   ',
           amount: 100,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(BadRequestException);
@@ -240,6 +260,7 @@ describe('CostService', () => {
           name: '   ',
           amount: 100,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow('name must be a non-empty string');
@@ -253,6 +274,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 100,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(ConflictException);
@@ -261,6 +283,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 100,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow('Cost with name Food already exists');
@@ -274,6 +297,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 100,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(InternalServerErrorException);
@@ -287,6 +311,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 100,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(InternalServerErrorException);
@@ -295,6 +320,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 100,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow('Failed to create cost');
@@ -308,6 +334,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 200,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22',
         },
       });
@@ -318,6 +345,7 @@ describe('CostService', () => {
         name: 'Food',
         amount: 300,
         type: CostType.Services,
+        frequency: Frequency.OneTime,
         date: '2026-03-22' as TDateISO,
       };
       mockPutPromise.mockResolvedValue({});
@@ -326,6 +354,7 @@ describe('CostService', () => {
         name: 'Food',
         amount: 300,
         type: CostType.Services,
+        frequency: Frequency.OneTime,
         date: '2026-03-22' as TDateISO,
       });
 
@@ -340,6 +369,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 300,
           type: CostType.Services,
+          frequency: Frequency.OneTime,
           date: '2026-03-22',
         },
         ConditionExpression: 'attribute_exists(#name)',
@@ -354,6 +384,7 @@ describe('CostService', () => {
         name: 'Food',
         amount: 200,
         type: CostType.MealsFood,
+        frequency: Frequency.Yearly,
         date: '2026-03-22' as TDateISO,
       });
 
@@ -361,6 +392,7 @@ describe('CostService', () => {
         name: 'Food',
         amount: 200,
         type: CostType.MealsFood,
+        frequency: Frequency.Yearly,
         date: '2026-03-22',
       });
       expect(mockPut).not.toHaveBeenCalled();
@@ -373,6 +405,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: Number.NaN,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(BadRequestException);
@@ -384,6 +417,19 @@ describe('CostService', () => {
           name: 'Food',
           amount: 250,
           type: 'INVALID' as unknown as CostType,
+          frequency: Frequency.Yearly,
+          date: '2026-03-22' as TDateISO,
+        }),
+      ).rejects.toThrow(BadRequestException);
+    });
+
+    it('throws BadRequestException for invalid frequency', async () => {
+      await expect(
+        service.updateCost('Food', {
+          name: 'Food',
+          amount: 250,
+          type: CostType.MealsFood,
+          frequency: 'INVALID' as unknown as Frequency,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(BadRequestException);
@@ -395,6 +441,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 250,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: 'not-a-date' as unknown as TDateISO,
         }),
       ).rejects.toThrow(BadRequestException);
@@ -403,6 +450,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 250,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: 'not-a-date' as unknown as TDateISO,
         }),
       ).rejects.toThrow('date must be a valid ISO 8601 format string');
@@ -416,6 +464,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 250,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(NotFoundException);
@@ -424,6 +473,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 250,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow('Cost with name Food not found');
@@ -438,6 +488,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 250,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(InternalServerErrorException);
@@ -446,6 +497,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 250,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow('Failed to update cost Food');
@@ -461,6 +513,7 @@ describe('CostService', () => {
         name: 'Meals',
         amount: 300,
         type: CostType.MealsFood,
+        frequency: Frequency.Yearly,
         date: '2026-03-22' as TDateISO,
       });
 
@@ -468,6 +521,7 @@ describe('CostService', () => {
         name: 'Meals',
         amount: 300,
         type: CostType.MealsFood,
+        frequency: Frequency.Yearly,
         date: '2026-03-22',
       });
       expect(mockGet).toHaveBeenCalledWith({
@@ -483,6 +537,7 @@ describe('CostService', () => {
                 name: 'Meals',
                 amount: 300,
                 type: CostType.MealsFood,
+                frequency: Frequency.Yearly,
                 date: '2026-03-22',
               },
               ConditionExpression: 'attribute_not_exists(#name)',
@@ -515,6 +570,7 @@ describe('CostService', () => {
         name: 'Meals',
         amount: 300,
         type: CostType.MealsFood,
+        frequency: Frequency.Yearly,
         date: '2026-03-22' as TDateISO,
       });
 
@@ -522,6 +578,7 @@ describe('CostService', () => {
         name: 'Meals',
         amount: 300,
         type: CostType.MealsFood,
+        frequency: Frequency.Yearly,
         date: '2026-03-22',
       });
     });
@@ -534,6 +591,7 @@ describe('CostService', () => {
           name: 'Meals',
           amount: 300,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(NotFoundException);
@@ -542,6 +600,7 @@ describe('CostService', () => {
           name: 'Meals',
           amount: 300,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow('Cost with name Food not found');
@@ -560,6 +619,7 @@ describe('CostService', () => {
           name: 'Meals',
           amount: 300,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(ConflictException);
@@ -568,6 +628,7 @@ describe('CostService', () => {
           name: 'Meals',
           amount: 300,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow('Cost with name Meals already exists');
@@ -584,6 +645,7 @@ describe('CostService', () => {
           name: 'Meals',
           amount: 300,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(InternalServerErrorException);
@@ -592,6 +654,7 @@ describe('CostService', () => {
           name: 'Meals',
           amount: 300,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow('Failed to update cost Food');
@@ -605,6 +668,7 @@ describe('CostService', () => {
           name: 'Food',
           amount: 200,
           type: CostType.MealsFood,
+          frequency: Frequency.Yearly,
           date: '2026-03-22' as TDateISO,
         }),
       ).rejects.toThrow(InternalServerErrorException);
diff --git a/backend/src/cost/cashflow-cost.service.ts b/backend/src/cost/cashflow-cost.service.ts
index c988bb19..b4a20f83 100644
--- a/backend/src/cost/cashflow-cost.service.ts
+++ b/backend/src/cost/cashflow-cost.service.ts
@@ -9,6 +9,7 @@ import {
 import * as AWS from 'aws-sdk';
 import { CashflowCost } from '../../../middle-layer/types/CashflowCost';
 import { CostType } from '../../../middle-layer/types/CostType';
+import { Frequency } from '../../../middle-layer/types/Frequency';
 
 interface UpdateCostBody {
   amount?: number;
@@ -30,6 +31,15 @@ export class CostService {
     }
   }
 
+  private validateFrequency(frequency: string) {
+    if (!Object.values(Frequency).includes(frequency as Frequency) || frequency === null) {
+      throw new BadRequestException(
+        `frequency must be one of: ${Object.values(Frequency).join(', ')}`,
+      );
+    }
+  }
+
+
   private validateAmount(amount: number) {
     if (!Number.isFinite(amount) || amount <= 0 || amount === null) {
       throw new BadRequestException('amount must be a finite positive number');
@@ -121,6 +131,7 @@ export class CostService {
     const tableName = process.env.CASHFLOW_COST_TABLE_NAME || '';
     this.validateAmount(cost.amount);
     this.validateCostType(cost.type);
+    this.validateFrequency(cost.frequency);
     this.validateName(cost.name);
     const normalizedName = cost.name.trim();
 
@@ -178,6 +189,7 @@ export class CostService {
 
     this.validateAmount(updates.amount);
     this.validateCostType(updates.type);
+    this.validateFrequency(updates.frequency);
 
     if (updates.name !== undefined) {
       this.validateName(updates.name);
@@ -209,6 +221,7 @@ export class CostService {
       existingCost.name === updates.name &&
       existingCost.amount === updates.amount &&
       existingCost.type === updates.type &&
+      existingCost.frequency === updates.frequency &&
       datesAreEqual;
 
     if (isUnchanged) {
diff --git a/backend/src/cost/types/cost.types.ts b/backend/src/cost/types/cost.types.ts
index f8ad075f..8ed23f90 100644
--- a/backend/src/cost/types/cost.types.ts
+++ b/backend/src/cost/types/cost.types.ts
@@ -9,6 +9,7 @@ import {
 } from 'class-validator';
 import { CashflowCost } from '../../../../middle-layer/types/CashflowCost';
 import { CostType } from '../../../../middle-layer/types/CostType';
+import { Frequency } from '../../../../middle-layer/types/Frequency';
 import { TDateISO } from '../../utils/date';
 
 export class CashflowCostDTO implements CashflowCost {
@@ -26,6 +27,10 @@ export class CashflowCostDTO implements CashflowCost {
   @IsEnum(CostType)
   type!: CostType;
 
+  @ApiProperty({ description: 'The frequency type of cost', enum: Frequency, example: Frequency.Yearly })
+  @IsEnum(Frequency)
+  frequency!: Frequency;
+
   @ApiProperty({ description: 'Cost date in ISO 8601 format', example: '2026-03-14T00:00:00.000Z' })
   @IsDateString()
   date!: TDateISO;
diff --git a/backend/src/default-values/__test__/default-values.service.spec.ts b/backend/src/default-values/__test__/default-values.service.spec.ts
index 820ecbce..2df217e8 100644
--- a/backend/src/default-values/__test__/default-values.service.spec.ts
+++ b/backend/src/default-values/__test__/default-values.service.spec.ts
@@ -6,11 +6,13 @@ import {
   NotFoundException,
 } from '@nestjs/common';
 import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { start } from 'repl';
 
 const mockDefaultValues = [
   { name: 'startingCash', value: 10000 },
   { name: 'benefitsIncrease', value: 3.5 },
   { name: 'salaryIncrease', value: 2.0 },
+  { name: 'startDate', value: '2023-01-01' },
 ];
 
 const mockPromise = vi.fn();
@@ -64,6 +66,7 @@ describe('DefaultValuesService', () => {
         startingCash: 10000,
         benefitsIncrease: 3.5,
         salaryIncrease: 2.0,
+        startDate: '2023-01-01',
       });
       expect(mockDocumentClient.scan).toHaveBeenCalledWith({
         TableName: 'DefaultValues',
@@ -75,6 +78,7 @@ describe('DefaultValuesService', () => {
       const incompleteValues = [
         { name: 'benefitsIncrease', value: 3.5 },
         { name: 'salaryIncrease', value: 2.0 },
+        { name: 'startDate', value: '2023-01-01' },
       ];
       mockPromise.mockResolvedValue({ Items: incompleteValues });
 
@@ -90,6 +94,7 @@ describe('DefaultValuesService', () => {
       const incompleteValues = [
         { name: 'startingCash', value: 10000 },
         { name: 'salaryIncrease', value: 2.0 },
+        { name: 'startDate', value: '2023-01-01' },
       ];
       mockPromise.mockResolvedValue({ Items: incompleteValues });
 
@@ -102,6 +107,7 @@ describe('DefaultValuesService', () => {
       const incompleteValues = [
         { name: 'startingCash', value: 10000 },
         { name: 'benefitsIncrease', value: 3.5 },
+        { name: 'startDate', value: '2023-01-01' },
       ];
       mockPromise.mockResolvedValue({ Items: incompleteValues });
 
@@ -149,6 +155,7 @@ describe('DefaultValuesService', () => {
         { name: 'startingCash', value: -5000 },
         { name: 'benefitsIncrease', value: -1.5 },
         { name: 'salaryIncrease', value: -0.5 },
+        { name: 'startDate', value: '2023-01-01' },
       ];
       mockPromise.mockResolvedValue({ Items: negativeValues });
 
@@ -158,6 +165,7 @@ describe('DefaultValuesService', () => {
         startingCash: -5000,
         benefitsIncrease: -1.5,
         salaryIncrease: -0.5,
+        startDate: '2023-01-01',
       });
     });
   });
@@ -171,6 +179,7 @@ describe('DefaultValuesService', () => {
             { name: 'startingCash', value: 15000 },
             { name: 'benefitsIncrease', value: 3.5 },
             { name: 'salaryIncrease', value: 2.0 },
+            { name: 'startDate', value: '2023-01-01' },
           ],
         });
 
@@ -180,6 +189,7 @@ describe('DefaultValuesService', () => {
         startingCash: 15000,
         benefitsIncrease: 3.5,
         salaryIncrease: 2.0,
+        startDate: '2023-01-01',
       });
       expect(mockDocumentClient.put).toHaveBeenCalledWith({
         TableName: 'DefaultValues',
@@ -202,6 +212,7 @@ describe('DefaultValuesService', () => {
             { name: 'startingCash', value: 10000 },
             { name: 'benefitsIncrease', value: 5.0 },
             { name: 'salaryIncrease', value: 2.0 },
+            { name: 'startDate', value: '2023-01-01' },
           ],
         });
 
@@ -211,6 +222,7 @@ describe('DefaultValuesService', () => {
         startingCash: 10000,
         benefitsIncrease: 5.0,
         salaryIncrease: 2.0,
+        startDate: '2023-01-01',
       });
       expect(mockDocumentClient.put).toHaveBeenCalledWith({
         TableName: 'DefaultValues',
@@ -225,6 +237,39 @@ describe('DefaultValuesService', () => {
       });
     });
 
+    it('should successfully update startDate', async () => {
+      mockPromise
+        .mockResolvedValueOnce({})
+        .mockResolvedValueOnce({
+          Items: [
+            { name: 'startingCash', value: 15000 },
+            { name: 'benefitsIncrease', value: 3.5 },
+            { name: 'salaryIncrease', value: 2.0 },
+            { name: 'startDate', value: '2023-02-01' },
+          ],
+        });
+
+      const result = await service.updateDefaultValue('startDate', '2023-02-01');
+
+      expect(result).toEqual({
+        startingCash: 15000,
+        benefitsIncrease: 3.5,
+        salaryIncrease: 2.0,
+        startDate: '2023-02-01',
+      });
+      expect(mockDocumentClient.put).toHaveBeenCalledWith({
+        TableName: 'DefaultValues',
+        Item: {
+          name: 'startDate',
+          value: '2023-02-01',
+        },
+        ConditionExpression: 'attribute_exists(#name)',
+        ExpressionAttributeNames: {
+          '#name': 'name',
+        },
+      });
+    });
+
     it('should successfully update salaryIncrease', async () => {
       mockPromise
         .mockResolvedValueOnce({})
@@ -233,6 +278,7 @@ describe('DefaultValuesService', () => {
             { name: 'startingCash', value: 10000 },
             { name: 'benefitsIncrease', value: 3.5 },
             { name: 'salaryIncrease', value: 3.0 },
+            { name: 'startDate', value: '2023-01-01' },
           ],
         });
 
@@ -242,6 +288,7 @@ describe('DefaultValuesService', () => {
         startingCash: 10000,
         benefitsIncrease: 3.5,
         salaryIncrease: 3.0,
+        startDate: '2023-01-01',
       });
       expect(mockDocumentClient.put).toHaveBeenCalledWith({
         TableName: 'DefaultValues',
@@ -305,6 +352,7 @@ describe('DefaultValuesService', () => {
             { name: 'startingCash', value: -1000 },
             { name: 'benefitsIncrease', value: 3.5 },
             { name: 'salaryIncrease', value: 2.0 },
+            { name: 'startDate', value: '2023-01-01' },
           ],
         });
 
@@ -314,6 +362,7 @@ describe('DefaultValuesService', () => {
         startingCash: -1000,
         benefitsIncrease: 3.5,
         salaryIncrease: 2.0,
+        startDate: '2023-01-01',
       });
       expect(mockDocumentClient.put).toHaveBeenCalledWith({
         TableName: 'DefaultValues',
diff --git a/backend/src/default-values/default-values.controller.ts b/backend/src/default-values/default-values.controller.ts
index 4dc56828..096698b9 100644
--- a/backend/src/default-values/default-values.controller.ts
+++ b/backend/src/default-values/default-values.controller.ts
@@ -51,8 +51,13 @@ export class DefaultValuesController {
     @ApiBody({ schema: {
         type: 'object',
         properties: {
-          key: { type: 'string', enum: ['startingCash', 'benefitsIncrease', 'salaryIncrease'] },
-          value: { type: 'number' }
+          key: { type: 'string', enum: ['startingCash', 'benefitsIncrease', 'salaryIncrease', 'startDate'] },
+          value: {
+            oneOf: [
+              { type: 'number' },
+              { type: 'string' },
+            ],
+          },
         }
       }})
     @ApiResponse({
diff --git a/backend/src/default-values/default-values.service.ts b/backend/src/default-values/default-values.service.ts
index bcdb8793..597953d1 100644
--- a/backend/src/default-values/default-values.service.ts
+++ b/backend/src/default-values/default-values.service.ts
@@ -7,6 +7,7 @@ import {
 } from '@nestjs/common';
 import * as AWS from 'aws-sdk';
 import { DefaultValuesResponse } from './types/default-values.types';
+import { TDateISO } from '../utils/date';
 
 @Injectable()
 export class DefaultValuesService {
@@ -35,8 +36,9 @@ export class DefaultValuesService {
       const startingCash = items.find((item) => item.name === 'startingCash')?.value ?? null;
       const benefitsIncrease = items.find((item) => item.name === 'benefitsIncrease')?.value ?? null;
       const salaryIncrease = items.find((item) => item.name === 'salaryIncrease')?.value ?? null;
+      const startDate = items.find((item) => item.name === 'startDate')?.value ?? null;
 
-      if (startingCash === null || benefitsIncrease === null || salaryIncrease === null) {
+      if (startingCash === null || benefitsIncrease === null || salaryIncrease === null || startDate === null) {
         this.logger.error('Default values table is missing required fields');
         throw new NotFoundException('Default values not found');
       }
@@ -45,6 +47,7 @@ export class DefaultValuesService {
         startingCash,
         benefitsIncrease,
         salaryIncrease,
+        startDate,
       };
 
       return defaultValues;
@@ -64,7 +67,7 @@ export class DefaultValuesService {
 
   async updateDefaultValue(
     key: string,
-    value: number,
+    value: number | TDateISO,
   ): Promise<DefaultValuesResponse> {
     const tableName = process.env.CASHFLOW_DEFAULT_VALUE_TABLE_NAME;
 
@@ -73,13 +76,13 @@ export class DefaultValuesService {
       throw new InternalServerErrorException('Server configuration error');
     }
 
-    if (!Number.isFinite(value)) {
+    if (typeof value == 'number' && !Number.isFinite(value)) {
       throw new BadRequestException('Value must be a valid number');
     }
 
-    if (!(key === 'startingCash' || key === 'benefitsIncrease' || key === 'salaryIncrease')) {
+    if (!(key === 'startingCash' || key === 'benefitsIncrease' || key === 'salaryIncrease' || key === 'startDate')) {
       throw new BadRequestException(
-        'Default value must be one of: startingCash, benefitsIncrease, salaryIncrease',
+        'Default value must be one of: startingCash, benefitsIncrease, salaryIncrease, startDate',
       );
     }
 
diff --git a/backend/src/default-values/types/default-values.types.ts b/backend/src/default-values/types/default-values.types.ts
index 93b3d485..1d007a99 100644
--- a/backend/src/default-values/types/default-values.types.ts
+++ b/backend/src/default-values/types/default-values.types.ts
@@ -1,10 +1,13 @@
+import { TDateISO } from "../../utils/date";
+
 export interface DefaultValuesResponse {
   startingCash: number;
   benefitsIncrease: number;
   salaryIncrease: number;
+  startDate: TDateISO;
 }
 
 export interface UpdateDefaultValueBody {
   key: string;
-  value: number;
+  value: number | TDateISO;
 }
diff --git a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
deleted file mode 100644
index 05b60523..00000000
--- a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { useState } from "react";
-import { CashflowCost } from "../../../../../middle-layer/types/CashflowCost";
-import { CostType } from "../../../../../middle-layer/types/CostType";
-import Button from "../../../components/Button";
-import InputField from "../../../components/InputField";
-import CashCategoryDropdown from "./CashCategoryDropdown";
-import { createNewCost } from "../processCashflowDataEditSave";
-
-type FieldErrors = {
-  type?: string;
-  name?: string;
-  amount?: string;
-  submit?: string;
-};
-
-export default function CashAddCosts() {
-  const [type, setType] = useState<CostType | null>(null);
-  const [costName, setCostName] = useState<string>("");
-  const [amount, setAmount] = useState<number | null>(null);
-  const [errors, setErrors] = useState<FieldErrors>({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [successMessage, setSuccessMessage] = useState<string | null>(null);
-
-  const getTodayIsoDate = () => {
-    return new Date().toISOString();
-  };
-
-  const buildPayload = (): CashflowCost | null => {
-    const nextErrors: FieldErrors = {};
-
-    if (!type) {
-      nextErrors.type = "Please select a category.";
-    }
-
-    if (!costName.trim()) {
-      nextErrors.name = "Please enter a cost item name.";
-    }
-
-    if (amount === null || !Number.isFinite(amount) || amount <= 0) {
-      nextErrors.amount = "Annual amount must be greater than 0.";
-    }
-
-    setErrors(nextErrors);
-
-    if (Object.keys(nextErrors).length > 0 || !type || amount === null) {
-      return null;
-    }
-
-    return {
-      name: costName.trim(),
-      type,
-      amount,
-      date: getTodayIsoDate(),
-    };
-  };
-
-  const resetForm = () => {
-    setType(null);
-    setCostName("");
-    setAmount(null);
-    setErrors({});
-  }
-
-  const handleSubmit = async () => {
-    setSuccessMessage(null);
-    const payload = buildPayload();
-    if (!payload) {
-      return;
-    }
-
-    setIsSubmitting(true);
-    setErrors((previous) => ({ ...previous, submit: undefined }));
-
-    const result = await createNewCost(payload);
-    if (!result.success) {
-      setErrors((previous) => ({
-        ...previous,
-        submit: result.error || "Unable to create cost item.",
-      }));
-      setSuccessMessage(null);
-      setIsSubmitting(false);
-      return;
-    }
-
-    setIsSubmitting(false);
-    resetForm();
-    setSuccessMessage("Cost item created successfully.");
-  };
-
-  return (
-    <div className="flex flex-col pt-2 px-2 col-span-2 h-full gap-2">
-      <div className="text-lg lg:text-xl w-full text-left font-bold">
-        {"Add Cost Source"}
-      </div>
-      <div className="grid grid-cols-1 xl:grid-cols-2 w-full justify-between gap-4">
-        <div className="flex flex-col col-span-1 w-full gap-1">
-          <CashCategoryDropdown
-            type={CostType}
-            onChange={(event) => {
-              const nextType = event.target.value;
-              setType(nextType ? (nextType as CostType) : null);
-            }}
-            value={type ?? ""}
-            error={Boolean(errors.type)}
-          />
-          {errors.type ? <p className="text-red text-sm">{errors.type}</p> : null}
-        </div>
-        <div className="flex flex-col col-span-1 gap-1">
-          <InputField
-            type="text"
-            id="cost_name"
-            label="Cost Item Name"
-            value={costName}
-            onChange={(event) => setCostName(event.target.value)}
-            error={Boolean(errors.name)}
-          />
-          {errors.name ? <p className="text-red text-sm">{errors.name}</p> : null}
-        </div>
-      </div>
-      <div className="flex flex-col gap-1 mt-2">
-        <InputField
-          type="number"
-          id="amount"
-          label="Annual Amount ($)"
-          value={amount ?? ""}
-          className="w-full"
-          error={Boolean(errors.amount)}
-          onChange={(event) =>
-            setAmount(event.target.value === "" ? null : Number(event.target.value))
-          }
-        />
-        {errors.amount ? <p className="text-red text-sm">{errors.amount}</p> : null}
-      </div>
-      {errors.submit ? <p className="text-red text-sm">{errors.submit}</p> : null}
-      {successMessage ? (
-        <p className="text-green text-sm">{successMessage}</p>
-      ) : null}
-      <Button
-        text="Add Cost Item"
-        onClick={handleSubmit}
-        disabled={isSubmitting}
-        className="bg-primary text-white mt-2 text-sm lg:text-base"
-      />
-    </div>
-  );
-}
diff --git a/frontend/src/main-page/cash-flow/components/CashAddEditCost.tsx b/frontend/src/main-page/cash-flow/components/CashAddEditCost.tsx
new file mode 100644
index 00000000..ccc09cda
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashAddEditCost.tsx
@@ -0,0 +1,262 @@
+import { useState } from "react";
+import { CashflowCost } from "../../../../../middle-layer/types/CashflowCost";
+import { CostType } from "../../../../../middle-layer/types/CostType";
+import Button from "../../../components/Button";
+import InputField from "../../../components/InputField";
+import CashCategoryDropdown from "./CashCategoryDropdown";
+import { createNewCost, saveCostEdits } from "../processCashflowDataEditSave";
+import { Frequency } from "../../../../../middle-layer/types/Frequency";
+import { TDateISO } from "../../../../../backend/src/utils/date";
+import { getAppStore } from "../../../external/bcanSatchel/store";
+
+type FieldErrors = {
+  type?: string;
+  name?: string;
+  frequency?: string;
+  date?: string;
+  amount?: string;
+  submit?: string;
+};
+
+type CashEditCostProps = {
+  costItem?: CashflowCost;
+  onClose?: () => void;
+};
+
+export default function CashAddEditCost({
+  costItem,
+  onClose = () => {},
+}: CashEditCostProps) {
+  const [type, setType] = useState<CostType | null>(
+    costItem ? costItem.type : null,
+  );
+  const [frequency, setFrequency] = useState<Frequency | null>(
+    costItem ? costItem.frequency : null,
+  );
+  const [costName, setCostName] = useState<string>(
+    costItem ? costItem.name : "",
+  );
+  const [amount, setAmount] = useState<number | null>(
+    costItem ? costItem.amount : null,
+  );
+  const [date, setDate] = useState<TDateISO | null>(
+    costItem ? costItem.date : null,
+  );
+  const [errors, setErrors] = useState<FieldErrors>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  const { cashflowSettings } = getAppStore();
+
+  const showSuccessMessage = (message: string) => {
+    setSuccessMessage(message);
+    setTimeout(() => {
+      setSuccessMessage(null);
+    }, 3500);
+  };
+
+  const buildPayload = (): CashflowCost | null => {
+    const nextErrors: FieldErrors = {};
+
+    if (!type) {
+      nextErrors.type = "Please select a category.";
+    }
+
+    if (!frequency) {
+      nextErrors.frequency = "Please select a frequency.";
+    }
+
+    if (!date) {
+      nextErrors.date = "Please select a start date.";
+    }
+
+    if (!costName.trim()) {
+      nextErrors.name = "Please enter a cost item name.";
+    }
+
+    if (amount === null || !Number.isFinite(amount) || amount <= 0) {
+      nextErrors.amount = "Annual amount must be greater than 0.";
+    }
+
+    setErrors(nextErrors);
+
+    if (
+      Object.keys(nextErrors).length > 0 ||
+      !type ||
+      !frequency ||
+      !date ||
+      amount === null
+    ) {
+      return null;
+    }
+
+    return {
+      name: costName.trim(),
+      type,
+      amount,
+      frequency,
+      date,
+    };
+  };
+
+  const resetForm = () => {
+    setType(null);
+    setFrequency(null);
+    setCostName("");
+    setAmount(null);
+    setDate(null);
+    setErrors({});
+  };
+
+  const handleSubmit = async () => {
+    setSuccessMessage(null);
+    const payload = buildPayload();
+    if (!payload) {
+      return;
+    }
+
+    setIsSubmitting(true);
+    setErrors((previous) => ({ ...previous, submit: undefined }));
+
+    const result = costItem
+      ? await saveCostEdits(payload, costItem!.name)
+      : await createNewCost(payload);
+    if (!result.success) {
+      setErrors((previous) => ({
+        ...previous,
+        submit: result.error || "Unable to create cost item.",
+      }));
+      setSuccessMessage(null);
+      setIsSubmitting(false);
+      return;
+    }
+
+    if (costItem) {
+      onClose();
+    } else {
+      setIsSubmitting(false);
+      resetForm();
+      showSuccessMessage("Cost item created successfully.");
+    }
+  };
+
+  return (
+    <div className="flex flex-col pt-2 px-2 col-span-2 h-full gap-2">
+      {!costItem && (
+        <div className="text-lg lg:text-xl w-full text-left font-bold">
+          {"Add Cost Source"}
+        </div>
+      )}
+      <div className="grid grid-cols-1 xl:grid-cols-2 w-full justify-between gap-4">
+        <div className="flex flex-col col-span-1 w-full gap-1">
+          <CashCategoryDropdown
+            type={CostType}
+            onChange={(event) => {
+              const nextType = event.target.value;
+              setType(nextType ? (nextType as CostType) : null);
+            }}
+            value={type ?? ""}
+            error={Boolean(errors.type)}
+          />
+          {errors.type ? (
+            <p className="text-red text-sm">{errors.type}</p>
+          ) : null}
+        </div>
+        <div className="flex flex-col col-span-1 gap-1">
+          <InputField
+            type="text"
+            id="cost_name"
+            label="Cost Source Name"
+            placeholder="Enter item name..."
+            value={costName}
+            onChange={(event) => setCostName(event.target.value)}
+            error={Boolean(errors.name)}
+          />
+          {errors.name ? (
+            <p className="text-red text-sm">{errors.name}</p>
+          ) : null}
+        </div>
+      </div>
+      <div className="grid grid-cols-1 xl:grid-cols-2 w-full justify-between gap-4 mt-2">
+        <div className="flex flex-col col-span-1 w-full gap-1">
+          <CashCategoryDropdown
+            type={Frequency}
+            onChange={(event) => {
+              const nextFrequency = event.target.value;
+              setFrequency(nextFrequency ? (nextFrequency as Frequency) : null);
+            }}
+            name="Frequency"
+            value={frequency ?? ""}
+            error={Boolean(errors.frequency)}
+          />
+          {errors.frequency ? (
+            <p className="text-red text-sm">{errors.frequency}</p>
+          ) : null}
+        </div>
+        <div className="flex flex-col col-span-1 gap-1">
+          <InputField
+            type="date"
+            id="date"
+            label="Start Date"
+            value={date ?? cashflowSettings?.startDate}
+            onChange={(event) =>
+              setDate(
+                event.target.value ? (event.target.value as TDateISO) : null,
+              )
+            }
+            error={Boolean(errors.date)}
+          />
+          {errors.date ? (
+            <p className="text-red text-sm">{errors.date}</p>
+          ) : null}
+        </div>
+      </div>
+      <div className="flex flex-col gap-1 mt-2">
+        <InputField
+          type="number"
+          id="amount"
+          label="Amount ($)"
+          value={amount ?? ""}
+          placeholder="e.g. 1000"
+          className="w-full"
+          error={Boolean(errors.amount)}
+          onChange={(event) =>
+            setAmount(
+              event.target.value === "" ? null : Number(event.target.value),
+            )
+          }
+        />
+        {errors.amount ? (
+          <p className="text-red text-sm">{errors.amount}</p>
+        ) : null}
+      </div>
+      {errors.submit ? (
+        <p className="text-red text-sm">{errors.submit}</p>
+      ) : null}
+      {successMessage ? (
+        <p className="text-green text-sm animate-[fadeout_0.3s_ease-in-out_3s_forwards]">{successMessage}</p>
+      ) : null}
+      {!costItem ? (
+        <Button
+          text="Add Cost Item"
+          onClick={handleSubmit}
+          disabled={isSubmitting}
+          className="bg-primary text-white mt-2 text-sm lg:text-base"
+        />
+      ) : (
+        <div className="flex flex-row justify-end gap-2 mt-2 items-center">
+          <Button
+            text="Cancel"
+            onClick={() => onClose()}
+            className="bg-white text-black border border-grey-500 mt-2 text-sm lg:text-base"
+          />
+          <Button
+            text="Save"
+            onClick={() => handleSubmit()}
+            className="bg-primary-900 text-white mt-2 text-sm lg:text-base"
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
index 2874abf1..f03cec25 100644
--- a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
@@ -9,7 +9,7 @@ import CashCategoryDropdown from "./CashCategoryDropdown";
 import CashRevenueInstallment, {
   EditableInstallment,
 } from "./CashRevenueInstallment";
-import { createNewRevenue } from "../../cash-flow/processCashflowDataEditSave";
+import { createNewRevenue, isValidInstallment, toInstallment } from "../../cash-flow/processCashflowDataEditSave";
 
 type FieldErrors = {
   type?: string;
@@ -20,11 +20,6 @@ type FieldErrors = {
   submit?: string;
 };
 
-const EMPTY_INSTALLMENT: EditableInstallment = {
-  amount: null,
-  date: null,
-};
-
 const toDateInputValue = (date: Date | null) => {
   if (!date || Number.isNaN(date.getTime())) {
     return "";
@@ -36,6 +31,11 @@ const toDateInputValue = (date: Date | null) => {
   return `${year}-${month}-${day}`;
 };
 
+const EMPTY_INSTALLMENT: EditableInstallment = {
+  amount: null,
+  date: null,
+};
+
 export default function CashAddRevenue() {
   const [isMultipleInstallments, setIsMultipleInstallments] = useState(false);
   const [singleInstallment, setSingleInstallment] =
@@ -47,23 +47,11 @@ export default function CashAddRevenue() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
 
-  const isValidInstallment = (installment: EditableInstallment) => {
-    if (installment.amount === null || installment.date === null) {
-      return false;
-    }
-
-    return (
-      Number.isFinite(installment.amount) &&
-      installment.amount > 0 &&
-      !Number.isNaN(installment.date.getTime())
-    );
-  };
-
-  const toInstallment = (installment: EditableInstallment): Installment => {
-    return {
-      amount: installment.amount as number,
-      date: installment.date as Date,
-    };
+  const showSuccessMessage = (message: string) => {
+    setSuccessMessage(message);
+    setTimeout(() => {
+      setSuccessMessage(null);
+    }, 3500);
   };
 
   const buildPayload = (): CashflowRevenue | null => {
@@ -155,7 +143,7 @@ export default function CashAddRevenue() {
 
     setIsSubmitting(false);
     resetForm();
-    setSuccessMessage("Revenue source created successfully.");
+    showSuccessMessage("Revenue source created successfully.");
   };
 
   const addInstallment = () => {
@@ -226,6 +214,7 @@ export default function CashAddRevenue() {
               type="text"
               id="source_name"
               label="Revenue Source Name"
+              placeholder="Enter item name..."
               value={name}
               onChange={(event) => setName(event.target.value)}
               error={Boolean(errors.name)}
@@ -296,7 +285,7 @@ export default function CashAddRevenue() {
         )}
         {errors.submit ? <p className="text-red text-sm">{errors.submit}</p> : null}
         {successMessage ? (
-          <p className="text-green text-sm">{successMessage}</p>
+          <p className="text-green text-sm animate-[fadeout_0.3s_ease-in-out_3s_forwards]">{successMessage}</p>
         ) : null}
       </div>
       <Button
diff --git a/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
index c7c36843..88b37bd9 100644
--- a/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
@@ -1,12 +1,13 @@
 import { useId } from "react";
 import { CostType } from "../../../../../middle-layer/types/CostType";
 import { RevenueType } from "../../../../../middle-layer/types/RevenueType";
+import { Frequency } from "../../../../../middle-layer/types/Frequency";
 
 type CashCategoryDropdown = {
-  type: typeof RevenueType | typeof CostType;
+  type: typeof RevenueType | typeof CostType | typeof Frequency;
   onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-  value: RevenueType | CostType | "";
-  placeholder?: string;
+  value: RevenueType | CostType | Frequency | "";
+  name?: string;
   error?: boolean;
 };
 
@@ -14,7 +15,7 @@ export default function CashCategoryDropdown({
   type,
   onChange,
   value,
-  placeholder = "Select a category",
+  name = "Category",
   error,
 }: CashCategoryDropdown) {
   const generatedId = useId();
@@ -25,7 +26,7 @@ export default function CashCategoryDropdown({
         htmlFor={generatedId}
         className="block text-left font-semibold text-sm lg:text-base"
       >
-        {"Category"}
+        {name}
       </label>
       <div className="mt-2 flex items-center rounded-md ">
         <select
@@ -33,10 +34,10 @@ export default function CashCategoryDropdown({
           value={value}
           onChange={onChange}
           className={`block w-full rounded-md py-2.5 pl-4 pr-3 text-sm lg:text-base border-2 placeholder:text-grey-500 h-[2.71rem] lg:h-[2.95rem] ${
-            error ? "border-red bg-red-lightest" : "border-grey-500 bg-grey-100"
-          }`}
+            error ? "border-red bg-red-lightest" : "border-grey-500 bg-grey-100"}
+            ${!value && "text-grey-700"}`}
         >
-          <option value="">{placeholder}</option>
+          <option value="" disabled hidden>{"Select a "}{name.toLowerCase()}</option>
           {Object.values(type).map((r) => (
             <option key={r} value={r}>
               {r}
diff --git a/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx b/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
index 805a6428..69694d39 100644
--- a/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import Button from "../../../components/Button";
 import CashAddRevenue from "./CashAddRevenue";
-import CashAddCosts from "./CashAddCosts";
+import CashAddEditCost from "./CashAddEditCost";
 
 export default function CashCreateLineItem() {
   const [showCosts, setShowCosts] = useState<boolean>(false);
@@ -43,7 +43,7 @@ export default function CashCreateLineItem() {
 
       <div className="">
         {!showCosts && <CashAddRevenue />}
-        {showCosts && <CashAddCosts />}
+        {showCosts && <CashAddEditCost  />}
       </div>
     </div>
   );
diff --git a/frontend/src/main-page/cash-flow/components/CashEditCost.tsx b/frontend/src/main-page/cash-flow/components/CashEditCost.tsx
deleted file mode 100644
index f6a862fd..00000000
--- a/frontend/src/main-page/cash-flow/components/CashEditCost.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import Button from "../../../components/Button";
-import InputField from "../../../components/InputField";
-import CashCategoryDropdown from "./CashCategoryDropdown";
-import { CostType } from "../../../../../middle-layer/types/CostType";
-import { useState } from "react";
-import { CashflowCost } from "../../../../../middle-layer/types/CashflowCost";
-import { saveCostEdits } from "../processCashflowDataEditSave";
-import { formatMoney } from "../CashFlowPage";
-
-type CashEditCostProps = {
-  costItem: CashflowCost;
-  onClose: () => void;
-};
-
-export default function CashEditCost({ costItem, onClose }: CashEditCostProps) {
-  const [type, setType] = useState<CostType>(costItem.type);
-  const [name, setName] = useState<string>(costItem.name);
-  const [amount, setAmount] = useState<number>(costItem.amount);
-
-  const handleChangeCategory = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setType(e.target.value as CostType);
-  };
-
-  const handleChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setName(e.target.value);
-  };
-
-  const handleChangeAmount = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setAmount(e.target.valueAsNumber);
-  };
-
-  const handleSave = () => {
-    saveCostEdits({ name, type, amount, date: "2020-01-01" }, costItem.name);
-    onClose();
-  };
-
-  return (
-    <div>
-      <div className="grid grid-cols-1 lg:grid-cols-2 w-full justify-between gap-4 mb-2">
-        <div className="flex flex-col col-span-1 w-full gap-3">
-          <CashCategoryDropdown
-            type={CostType}
-            value={type}
-            onChange={handleChangeCategory}
-          />
-        </div>
-        <div className="flex flex-col col-span-1 gap-3">
-          <InputField
-            type="text"
-            id="cost_name"
-            label="Cost Item Name"
-            value={name}
-            onChange={handleChangeName}
-          />
-        </div>
-      </div>
-      <InputField
-        type="number"
-        id="amount"
-        label="Annual Amount ($)"
-        value={amount}
-        className="w-full"
-        onChange={handleChangeAmount}
-      />
-
-      <div className="flex flex-row justify-end gap-2 mt-2 items-center">
-        <div className="font-semibold mr-auto text-start text-sm lg:text-base">
-          {formatMoney(amount / 12)}
-          {"/month"}
-        </div>
-        <Button
-          text="Cancel"
-          onClick={() => onClose()}
-          className="bg-white text-black border border-grey-500 mt-2 text-sm lg:text-base"
-        />
-        <Button
-          text="Save"
-          onClick={() => handleSave()}
-          className="bg-primary-900 text-white mt-2 text-sm lg:text-base"
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/main-page/cash-flow/components/CashEditRevenue.tsx b/frontend/src/main-page/cash-flow/components/CashEditRevenue.tsx
new file mode 100644
index 00000000..72eeeefb
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashEditRevenue.tsx
@@ -0,0 +1,343 @@
+import { useState } from "react";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { CashflowRevenue } from "../../../../../middle-layer/types/CashflowRevenue";
+import { Installment } from "../../../../../middle-layer/types/Installment";
+import { RevenueType } from "../../../../../middle-layer/types/RevenueType";
+import Button from "../../../components/Button";
+import InputField from "../../../components/InputField";
+import {
+  saveRevenueEdits,
+} from "../processCashflowDataEditSave";
+import CashCategoryDropdown from "./CashCategoryDropdown";
+import CashRevenueInstallment, {
+  EditableInstallment,
+} from "./CashRevenueInstallment";
+import { formatMoney } from "../CashFlowPage";
+
+type CashEditRevenueProps = {
+  revenueItem: CashflowRevenue;
+  onClose: () => void;
+};
+
+type FieldErrors = {
+  type?: string;
+  name?: string;
+  singleAmount?: string;
+  singleDate?: string;
+  installments?: string;
+  submit?: string;
+};
+
+const EMPTY_INSTALLMENT: EditableInstallment = {
+  amount: null,
+  date: null,
+};
+
+const toDateValue = (dateValue: Date | string | null | undefined) => {
+  if (!dateValue) {
+    return null;
+  }
+
+  const parsedDate = new Date(dateValue);
+  if (Number.isNaN(parsedDate.getTime())) {
+    return null;
+  }
+
+  return parsedDate;
+};
+
+const toEditableInstallment = (
+  installment: Installment,
+): EditableInstallment => ({
+  amount: Number.isFinite(installment.amount) ? installment.amount : null,
+  date: toDateValue(installment.date),
+});
+
+export default function CashEditRevenue({
+  revenueItem,
+  onClose,
+}: CashEditRevenueProps) {
+  const initialInstallments = revenueItem.installments.map(toEditableInstallment);
+  const [name, setName] = useState<string>(revenueItem.name);
+  const [type, setType] = useState<RevenueType | null>(revenueItem.type);
+  const [isMultipleInstallments, setIsMultipleInstallments] = useState(
+    initialInstallments.length > 1,
+  );
+  const [singleInstallment, setSingleInstallment] = useState<EditableInstallment>(
+    initialInstallments[0] ?? EMPTY_INSTALLMENT,
+  );
+  const [installments, setInstallments] = useState<EditableInstallment[]>(
+    initialInstallments.length > 1 ? initialInstallments : [],
+  );
+  const [errors, setErrors] = useState<FieldErrors>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const isValidInstallment = (installment: EditableInstallment) => {
+    if (installment.amount === null || installment.date === null) {
+      return false;
+    }
+
+    return (
+      Number.isFinite(installment.amount) &&
+      installment.amount > 0 &&
+      !Number.isNaN(installment.date.getTime())
+    );
+  };
+
+  const toInstallment = (installment: EditableInstallment): Installment => ({
+    amount: installment.amount as number,
+    date: installment.date as Date,
+  });
+
+  const buildPayload = (): CashflowRevenue | null => {
+    const nextErrors: FieldErrors = {};
+
+    if (!type) {
+      nextErrors.type = "Please select a category.";
+    }
+
+    if (!name.trim()) {
+      nextErrors.name = "Please enter a name.";
+    }
+
+    let cleanedInstallments: Installment[] = [];
+    if (isMultipleInstallments) {
+      const allValid =
+        installments.length > 0 && installments.every(isValidInstallment);
+
+      if (!allValid) {
+        nextErrors.installments =
+          "Please fill all installment amounts and dates with valid values.";
+      } else {
+        cleanedInstallments = installments.map(toInstallment);
+      }
+    } else {
+      if (singleInstallment.amount === null || singleInstallment.amount <= 0) {
+        nextErrors.singleAmount = "Amount must be greater than 0.";
+      }
+
+      if (
+        singleInstallment.date === null ||
+        Number.isNaN(singleInstallment.date.getTime())
+      ) {
+        nextErrors.singleDate = "Please enter a valid date.";
+      }
+
+      if (!nextErrors.singleAmount && !nextErrors.singleDate) {
+        cleanedInstallments = [toInstallment(singleInstallment)];
+      }
+    }
+
+    setErrors(nextErrors);
+    if (Object.keys(nextErrors).length > 0 || !type) {
+      return null;
+    }
+
+    const totalAmount = cleanedInstallments.reduce(
+      (sum, installment) => sum + installment.amount,
+      0,
+    );
+
+    return {
+      amount: totalAmount,
+      type,
+      name: name.trim(),
+      installments: cleanedInstallments,
+    };
+  };
+
+  const addInstallment = () => {
+    if (!isMultipleInstallments) {
+      setInstallments([singleInstallment, EMPTY_INSTALLMENT]);
+      setIsMultipleInstallments(true);
+      return;
+    }
+
+    setInstallments((previousInstallments) => [
+      ...previousInstallments,
+      EMPTY_INSTALLMENT,
+    ]);
+  };
+
+  const updateInstallment = (
+    installmentIndex: number,
+    key: "amount" | "date",
+    value: number | Date | null,
+  ) => {
+    setInstallments((previousInstallments) =>
+      previousInstallments.map((installment, index) =>
+        index === installmentIndex
+          ? { ...installment, [key]: value }
+          : installment,
+      ),
+    );
+  };
+
+  const removeInstallment = (installmentIndex: number) => {
+    setInstallments((previousInstallments) => {
+      const updatedInstallments = previousInstallments.filter(
+        (_, index) => index !== installmentIndex,
+      );
+
+      if (updatedInstallments.length <= 1) {
+        setIsMultipleInstallments(false);
+        setSingleInstallment(updatedInstallments[0] ?? EMPTY_INSTALLMENT);
+        return [];
+      }
+
+      return updatedInstallments;
+    });
+  };
+
+  const totalAmount = isMultipleInstallments
+    ? installments.reduce(
+        (sum, installment) => sum + (installment.amount ?? 0),
+        0,
+      )
+    : (singleInstallment.amount ?? 0);
+
+  const handleSave = async () => {
+    const payload = buildPayload();
+    if (!payload) {
+      return;
+    }
+
+    setIsSubmitting(true);
+    setErrors((previous) => ({ ...previous, submit: undefined }));
+
+    const result = await saveRevenueEdits(revenueItem.name, payload);
+    if (!result.success) {
+      setErrors((previous) => ({
+        ...previous,
+        submit: result.error || "Unable to update revenue source.",
+      }));
+      setIsSubmitting(false);
+      return;
+    }
+
+    setIsSubmitting(false);
+    onClose();
+  };
+
+  return (
+    <div className="flex flex-col w-full gap-4">
+      <div className="grid grid-cols-1 xl:grid-cols-2 w-full gap-4">
+        <div className="flex flex-col gap-1">
+          <InputField
+            type="text"
+            id="revenue_source_name"
+            label="Revenue Source Name"
+            value={name}
+            error={Boolean(errors.name)}
+            onChange={(event) => setName(event.target.value)}
+          />
+          {errors.name ? <p className="text-red text-sm">{errors.name}</p> : null}
+        </div>
+        <div className="flex flex-col gap-1">
+          <CashCategoryDropdown
+            type={RevenueType}
+            onChange={(event) => {
+              const nextType = event.target.value;
+              setType(nextType ? (nextType as RevenueType) : null);
+            }}
+            value={type ?? ""}
+            error={Boolean(errors.type)}
+          />
+          {errors.type ? <p className="text-red text-sm">{errors.type}</p> : null}
+        </div>
+      </div>
+
+      {isMultipleInstallments ? (
+        <>
+          {installments.map((installment, index) => (
+            <CashRevenueInstallment
+              key={index}
+              id={`edit_${index}`}
+              installment={installment}
+              onAmountChange={(value) => updateInstallment(index, "amount", value)}
+              onDateChange={(value) => updateInstallment(index, "date", value)}
+              onDelete={() => removeInstallment(index)}
+            />
+          ))}
+          {errors.installments ? (
+            <p className="text-red text-sm">{errors.installments}</p>
+          ) : null}
+        </>
+      ) : (
+        <div className="grid grid-cols-1 xl:grid-cols-2 w-full gap-4">
+          <div className="flex flex-col gap-1">
+            <InputField
+              type="number"
+              id="edit_amount"
+              label="Amount ($)"
+              value={singleInstallment.amount ?? ""}
+              placeholder="e.g. 1000"
+              error={Boolean(errors.singleAmount)}
+              onChange={(event) =>
+                setSingleInstallment((previous) => ({
+                  ...previous,
+                  amount: event.target.value === "" ? null : Number(event.target.value),
+                }))
+              }
+            />
+            {errors.singleAmount ? (
+              <p className="text-red text-sm">{errors.singleAmount}</p>
+            ) : null}
+          </div>
+          <div className="flex flex-col gap-1">
+            <InputField
+              type="date"
+              id="edit_date"
+              label="Date"
+              value={
+                singleInstallment.date
+                  ? `${singleInstallment.date.getFullYear()}-${`${singleInstallment.date.getMonth() + 1}`.padStart(2, "0")}-${`${singleInstallment.date.getDate()}`.padStart(2, "0")}`
+                  : ""
+              }
+              placeholder="MM/DD/YYYY"
+              error={Boolean(errors.singleDate)}
+              onChange={(event) =>
+                setSingleInstallment((previous) => ({
+                  ...previous,
+                  date: event.target.value
+                    ? new Date(`${event.target.value}T00:00:00`)
+                    : null,
+                }))
+              }
+            />
+            {errors.singleDate ? (
+              <p className="text-red text-sm">{errors.singleDate}</p>
+            ) : null}
+          </div>
+        </div>
+      )}
+
+      {errors.submit ? <p className="text-red text-sm">{errors.submit}</p> : null}
+
+      <div className="flex flex-wrap items-center gap-2 mt-2">
+        <Button
+          text="Add Installment"
+          onClick={addInstallment}
+          logo={faPlus}
+          logoPosition="left"
+          className="bg-primary-900 text-white text-sm"
+        />
+        <div className="font-semibold ml-auto text-sm lg:text-base">
+          {"Total: "}
+          {formatMoney(totalAmount)}
+        </div>
+        <Button
+          text="Cancel"
+          onClick={onClose}
+          className="bg-white text-black border border-grey-500 text-sm lg:text-base"
+        />
+        <Button
+          text={isSubmitting ? "Saving..." : "Save"}
+          onClick={handleSave}
+          disabled={isSubmitting}
+          className="bg-primary-900 text-white text-sm lg:text-base"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashPosition.tsx b/frontend/src/main-page/cash-flow/components/CashPosition.tsx
index d58c9527..f5b73910 100644
--- a/frontend/src/main-page/cash-flow/components/CashPosition.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashPosition.tsx
@@ -2,12 +2,12 @@ import InputField from "../../../components/InputField";
 import { observer } from "mobx-react-lite";
 import { getAppStore } from "../../../external/bcanSatchel/store";
 import { setCashflowSettings } from "../../../external/bcanSatchel/actions";
+import { TDateISO } from "../../../../../backend/src/utils/date";
 
 const CashPosition = observer(() => {
-
   const { cashflowSettings } = getAppStore();
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleBalanceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!cashflowSettings) return;
     setCashflowSettings({
       ...cashflowSettings,
@@ -15,20 +15,41 @@ const CashPosition = observer(() => {
     });
   };
 
+  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!cashflowSettings) return;
+    setCashflowSettings({
+      ...cashflowSettings,
+      startDate: e.target.value as TDateISO,
+    });
+  };
+
   return (
     <div className="chart-container col-span-2 h-full">
       <div className="text-lg lg:text-xl mb-2 w-full text-left font-bold">
         {"Starting Cash Position"}
       </div>
-      <InputField
-        type="number"
-        id="starting_balance"
-        label="Current Cash Balance"
-        value={cashflowSettings?.startingCash ?? 0}
-        onChange={handleChange}
-      />
+      <div className="flex flex-col xl:flex-row justify-between gap-4">
+        <InputField
+          type="number"
+          id="starting_balance"
+          label="Current Cash Balance"
+          value={cashflowSettings?.startingCash ?? 0}
+          onChange={handleBalanceChange}
+        />
+        <InputField
+          type="date"
+          id="start_date"
+          label="Projection Start Date"
+          value={
+            cashflowSettings?.startDate
+              ? cashflowSettings.startDate
+              : ""
+          }
+          onChange={handleDateChange}
+        />
+      </div>
     </div>
   );
 });
 
-export default CashPosition;
\ No newline at end of file
+export default CashPosition;
diff --git a/frontend/src/main-page/cash-flow/components/CashRevenueInstallment.tsx b/frontend/src/main-page/cash-flow/components/CashRevenueInstallment.tsx
index 6e1895e1..5a4ba790 100644
--- a/frontend/src/main-page/cash-flow/components/CashRevenueInstallment.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashRevenueInstallment.tsx
@@ -1,6 +1,6 @@
 import InputField from "../../../components/InputField";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import Button from "../../../components/Button";
 
 export type EditableInstallment = {
   amount: number | null;
@@ -72,16 +72,15 @@ export default function CashRevenueInstallment({
           />
         </div>
         {showDelete ? (
-          <button
-            type="button"
-            aria-label="Delete installment"
-            onClick={onDelete}
-            className="rounded-full bg-red hover:bg-red-light text-white w-10 h-10 flex items-center justify-center mb-1.5 shrink-0"
-          >
-            <FontAwesomeIcon icon={faXmark} className="text-lg" />
-          </button>
+          <Button
+            text=""
+            onClick={() => onDelete?.()}
+            logo={faTrash}
+            logoPosition="center"
+            className="bg-red-light text-red w-10 h-10 p-0 rounded-full mb-1.5 shrink-0 border-0"
+          />
         ) : (
-          <div className="hidden xl:block w-10 h-10 shrink-0" />
+          <div className="hidden xl:block w-8 h-8 shrink-0" />
         )}
       </div>
     </div>
diff --git a/frontend/src/main-page/cash-flow/components/CashSourceList.tsx b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
index a41548da..7dc46516 100644
--- a/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
@@ -2,8 +2,10 @@ import { CashflowCost } from "../../../../../middle-layer/types/CashflowCost";
 import { CashflowRevenue } from "../../../../../middle-layer/types/CashflowRevenue";
 import { deleteCost, deleteRevenue } from "../processCashflowDataEditSave";
 import CashEditLineItem from "./CashEditLineItem";
-import CashEditCost from "./CashEditCost";
+import CashEditRevenue from "./CashEditRevenue";
 import { formatMoney } from "../CashFlowPage";
+import { formatDateByFrequency, frequencyLabels } from "../../../../../middle-layer/types/Frequency";
+import CashAddEditCost from "./CashAddEditCost";
 
 type SourceProps = {
   type: "Revenue" | "Cost";
@@ -16,7 +18,9 @@ const formatInstallmentDate = (dateValue: Date | string) => {
     return "Invalid date";
   }
 
-  return parsedDate.toLocaleDateString("en-US");
+  
+
+  return parsedDate.toLocaleDateString();
 };
 
 export default function CashSourceList({ type, lineItems }: SourceProps) {
@@ -27,7 +31,7 @@ export default function CashSourceList({ type, lineItems }: SourceProps) {
         {" Sources"}
       </div>
       {/* map over list of source and put casheditlineitem for each */}
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2 h-[30rem] overflow-y-auto pr-1">
         {lineItems.map((item) => (
           <div key={item.name}>
             <CashEditLineItem
@@ -35,28 +39,28 @@ export default function CashSourceList({ type, lineItems }: SourceProps) {
                 <div className="flex flex-col text-sm lg:text-base gap-1">
                   <div className="font-semibold">{item.type}</div>
                   {type === "Cost" && (
-                    <div>
-                      <div>
-                        {formatMoney(item.amount)}
-                        {"/year"}
-                      </div>
                       <div>
-                        {formatMoney(item.amount / 12)}
-                        {"/month"}
+                        {formatMoney(item.amount)}{frequencyLabels.find(
+                          (label) => label.value === (item as CashflowCost).frequency,
+                        )?.label}
+                        {" on "}
+                        {formatDateByFrequency((item as CashflowCost).date, (item as CashflowCost).frequency)}
                       </div>
-                    </div>
                   )}
                   {type === "Revenue" && (
                     <div>
-                      {(item as CashflowRevenue).installments.map((installment, index) => (
-                        <div key={`${item.name}-installment-${index}`}>
-                          {formatMoney(installment.amount)}
-                          {" • "}
-                          {formatInstallmentDate(installment.date)}
-                        </div>
-                      ))}
+                      {(item as CashflowRevenue).installments.map(
+                        (installment, index) => (
+                          <div key={`${item.name}-installment-${index}`}>
+                            {formatMoney(installment.amount)}
+                            {" • "}
+                            {formatInstallmentDate(installment.date)}
+                          </div>
+                        ),
+                      )}
                       <div className="font-semibold pt-1">
-                        {"Total: "}{formatMoney(item.amount)}
+                        {"Total: "}
+                        {formatMoney(item.amount)}
                       </div>
                     </div>
                   )}
@@ -70,11 +74,16 @@ export default function CashSourceList({ type, lineItems }: SourceProps) {
               }
             >
               {(onClose) =>
-                type === "Cost" && (
-                  <CashEditCost
+                type === "Cost" ? (
+                  <CashAddEditCost
                     costItem={item as CashflowCost}
                     onClose={onClose}
                   />
+                ) : (
+                  <CashEditRevenue
+                    revenueItem={item as CashflowRevenue}
+                    onClose={onClose}
+                  />
                 )
               }
             </CashEditLineItem>
diff --git a/frontend/src/main-page/cash-flow/processCashflowData.ts b/frontend/src/main-page/cash-flow/processCashflowData.ts
index 0fc2dd47..35a6d566 100644
--- a/frontend/src/main-page/cash-flow/processCashflowData.ts
+++ b/frontend/src/main-page/cash-flow/processCashflowData.ts
@@ -75,5 +75,8 @@ export const ProcessCashflowData = () => {
     if (!cashflowSettings) fetchCashflowSettings();
   }, [cashflowSettings]);
 
-  return { costs: costSources, revenues: revenueSources, cashflowSettings };
+  const sortedCosts = costSources.slice().sort((a, b) => a.name.localeCompare(b.name));
+  const sortedRevenues = revenueSources.slice().sort((a, b) => a.name.localeCompare(b.name));
+
+  return { costs: sortedCosts, revenues: sortedRevenues, cashflowSettings };
 };
diff --git a/frontend/src/main-page/cash-flow/processCashflowDataEditSave.ts b/frontend/src/main-page/cash-flow/processCashflowDataEditSave.ts
index 48c9b532..d34dd69b 100644
--- a/frontend/src/main-page/cash-flow/processCashflowDataEditSave.ts
+++ b/frontend/src/main-page/cash-flow/processCashflowDataEditSave.ts
@@ -3,6 +3,8 @@ import {CashflowCost} from "../../../../middle-layer/types/CashflowCost.ts";
 import { CashflowSettings } from "../../../../middle-layer/types/CashflowSettings.ts";
 import { api } from "../../api.ts";
 import { fetchCosts, fetchRevenues, fetchCashflowSettings } from "./processCashflowData.ts";
+import { EditableInstallment } from "./components/CashRevenueInstallment.tsx";
+import { Installment } from "../../../../middle-layer/types/Installment.ts";
 
 // This has not been tested yet but the basic structure when implemented should be the same
 // Mirrored format for processGrantDataEditSave.ts
@@ -214,6 +216,7 @@ export const saveCashflowSettings = async (settings: CashflowSettings) => {
       { key: "startingCash", value: settings.startingCash },
       { key: "salaryIncrease", value: settings.salaryIncrease },
       { key: "benefitsIncrease", value: settings.benefitsIncrease },
+      { key: "startDate", value: settings.startDate },
     ];
 
     for (const update of updates) {
@@ -237,4 +240,23 @@ export const saveCashflowSettings = async (settings: CashflowSettings) => {
       error: error instanceof Error ? error.message : "Server error. Please try again.",
     };
   }
-};
\ No newline at end of file
+};
+
+export const isValidInstallment = (installment: EditableInstallment) => {
+    if (installment.amount === null || installment.date === null) {
+      return false;
+    }
+
+    return (
+      Number.isFinite(installment.amount) &&
+      installment.amount > 0 &&
+      !Number.isNaN(installment.date.getTime())
+    );
+  };
+
+  export const toInstallment = (installment: EditableInstallment): Installment => {
+    return {
+      amount: installment.amount as number,
+      date: installment.date as Date,
+    };
+  };
\ No newline at end of file
diff --git a/frontend/src/main-page/grants/GrantPage.tsx b/frontend/src/main-page/grants/GrantPage.tsx
index e90fd20c..3bd452fb 100644
--- a/frontend/src/main-page/grants/GrantPage.tsx
+++ b/frontend/src/main-page/grants/GrantPage.tsx
@@ -100,7 +100,7 @@ function GrantPage() {
       </div>
 
       {curGrant ? (<div className="flex w-full gap-2 flex-1 overflow-hidden justify-between mt-4">
-        <div className="flex flex-col w-[33%] overflow-y-auto mr-2">
+        <div className="flex flex-col w-[33%] overflow-y-auto mr-2 pr-1">
           {grants.map((grant) => (
             <GrantCard
               key={grant.grantId}
diff --git a/frontend/src/main-page/grants/grant-view/GrantView.tsx b/frontend/src/main-page/grants/grant-view/GrantView.tsx
index 3b9f306b..8445fe9e 100644
--- a/frontend/src/main-page/grants/grant-view/GrantView.tsx
+++ b/frontend/src/main-page/grants/grant-view/GrantView.tsx
@@ -68,7 +68,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(({ grant }) => {
 
   return (
     <div>
-      <div className="w-full bg-white rounded-md flex flex-col gap-6 p-6 h-full overflow-y-auto ">
+      <div className="w-full bg-white rounded-md flex flex-col gap-6 p-6 h-full overflow-y-auto">
         {/* Top header part */}
         <div className="flex justify-between">
           {/* Left side */}
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index e326bed8..d889a7b3 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -4,7 +4,6 @@ export default {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx,html}"],
   theme: {
     colors: {
-
       green: {
         dark: "#007E4C",
         DEFAULT: "#04A967",
@@ -101,6 +100,15 @@ export default {
         lg: "1rem",
         "4xl": "2rem",
       },
+      keyframes: {
+        fadeout: {
+          "0%": { opacity: "1" },
+          "100%": { opacity: "0" },
+        },
+      },
+      animation: {
+        fadeout: "fadeout 0.5s ease-in-out 4s forwards",
+      },
     },
   },
   plugins: [],
diff --git a/middle-layer/types/CashflowCost.ts b/middle-layer/types/CashflowCost.ts
index 82ce3a27..6417cec8 100644
--- a/middle-layer/types/CashflowCost.ts
+++ b/middle-layer/types/CashflowCost.ts
@@ -1,5 +1,6 @@
 import { TDateISO } from "../../backend/src/utils/date";
 import { CostType } from "./CostType";
+import { Frequency } from "./Frequency";
 
 // Type defintion of a cost object of the cashflow portion of the app
 export interface CashflowCost {
@@ -7,4 +8,5 @@ export interface CashflowCost {
     amount: number;
     type: CostType;
     date: TDateISO;
+    frequency: Frequency;
 }
\ No newline at end of file
diff --git a/middle-layer/types/CashflowSettings.ts b/middle-layer/types/CashflowSettings.ts
index e16415e5..5cd7d282 100644
--- a/middle-layer/types/CashflowSettings.ts
+++ b/middle-layer/types/CashflowSettings.ts
@@ -1,5 +1,8 @@
+import { TDateISO } from "../../backend/src/utils/date";
+
 export interface CashflowSettings {
   startingCash: number;
   salaryIncrease: number;
   benefitsIncrease: number;
+  startDate: TDateISO;
 }
\ No newline at end of file
diff --git a/middle-layer/types/Frequency.ts b/middle-layer/types/Frequency.ts
new file mode 100644
index 00000000..6722db2a
--- /dev/null
+++ b/middle-layer/types/Frequency.ts
@@ -0,0 +1,57 @@
+
+
+export enum Frequency {
+    Yearly = "Yearly",
+    Monthly = "Monthly",
+    OneTime = "One Time"
+}
+
+export const frequencyLabels = [
+    { value: Frequency.Yearly, label: "/year" },
+    { value: Frequency.Monthly, label: "/month" },
+    { value: Frequency.OneTime, label: "" }
+];
+
+export function formatDateByFrequency(
+  date: string | Date,
+  frequency: Frequency
+): string {
+  const parsedDate = typeof date === "string" ? new Date(date + "T00:00:00") : new Date(date + "T00:00:00");
+
+  if (isNaN(parsedDate.getTime())) return "";
+
+  switch (frequency) {
+    case Frequency.Yearly:
+      return new Intl.DateTimeFormat("en-US", {
+        month: "short",
+      }).format(parsedDate) + " " + getOrdinal(parsedDate.getDate());
+
+    case Frequency.OneTime:
+      return new Intl.DateTimeFormat("en-US", {
+        month: "numeric",
+        day: "numeric",
+        year: "numeric",
+      }).format(parsedDate);
+
+    case Frequency.Monthly:
+  return `the ${getOrdinal(parsedDate.getDate())}`;
+
+    default:
+      return "";
+  }
+}
+
+function getOrdinal(day: number): string {
+  if (day >= 11 && day <= 13) return `${day}th`;
+
+  switch (day % 10) {
+    case 1:
+      return `${day}st`;
+    case 2:
+      return `${day}nd`;
+    case 3:
+      return `${day}rd`;
+    default:
+      return `${day}th`;
+  }
+}
\ No newline at end of file

From 1ec38f5dcc9852e785d56bdaee9960d558737150 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sun, 12 Apr 2026 16:49:49 -0400
Subject: [PATCH 5/6] Adding default sort alpha

---
 frontend/src/external/bcanSatchel/store.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/external/bcanSatchel/store.ts b/frontend/src/external/bcanSatchel/store.ts
index a09d5441..cd64a805 100644
--- a/frontend/src/external/bcanSatchel/store.ts
+++ b/frontend/src/external/bcanSatchel/store.ts
@@ -51,8 +51,8 @@ const initialState: AppState = {
   activeUsers: [],
   inactiveUsers: [],
   notifications: [],
-  sort: null,
-  userSort: null,
+  sort: {header: "organization", asc: true},
+  userSort: {header: "firstName", sort: "desc"},
   userQuery: '',
   revenueSources: [],
   costSources: [],

From 3741fce76e1cee2c75620f991cd6a75afffdc1f8 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sun, 12 Apr 2026 16:52:27 -0400
Subject: [PATCH 6/6] Removing unused value

---
 frontend/src/login/Login.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/login/Login.tsx b/frontend/src/login/Login.tsx
index 06fc4e8e..1a890290 100644
--- a/frontend/src/login/Login.tsx
+++ b/frontend/src/login/Login.tsx
@@ -12,7 +12,7 @@ import { BrandingPanel, InputField, PasswordField } from "../sign-up";
 const Login = observer(() => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [rememberMe, setRememberMe] = useState(false);
+  // const [rememberMe, setRememberMe] = useState(false);
   const [failure, setFailure] = useState(false);
   const navigate = useNavigate();
   const { login } = useAuthContext();