diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index f6c3e0fa..26ee736f 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -20,7 +20,7 @@ export default function Button({ text, onClick, className, logo, logoPosition, d
     <button onClick={onClick} disabled={disabled || false} type={type || "button"}
     className={`
         px-4 py-2 rounded-3xl font-medium text-black border-2 active:bg-primary-900 active:border-primary-900 active:text-white
-        flex items-center justify-center transition-opacity
+        h-fit flex items-center justify-center transition-opacity
         ${className} ${disabled
           ? "cursor-not-allowed opacity-50"
           : "hover:opacity-90"}
diff --git a/frontend/src/components/InputField.tsx b/frontend/src/components/InputField.tsx
index 719e827e..61361037 100644
--- a/frontend/src/components/InputField.tsx
+++ b/frontend/src/components/InputField.tsx
@@ -5,6 +5,7 @@ type InputFieldProps = {
   label: string;
   required?: boolean;
   error?: boolean;
+  className?: string;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "id" | "className">;
 
 /**
@@ -20,7 +21,7 @@ export default function InputField({
 }: InputFieldProps) {
   return (
     <div className="w-full">
-      <label htmlFor={id} className="block text-left font-bold text-black">
+      <label htmlFor={id} className="block text-left font-semibold">
         {label}
         {required && <span className="text-red">*</span>}
       </label>
@@ -29,7 +30,7 @@ export default function InputField({
           id={id}
           {...inputProps}
           className={`block w-full rounded-md py-2.5 pl-4 pr-3 text-base border-2 placeholder:text-grey-500 ${
-            error ? "border-red bg-red-lightest" : "border-grey-500 bg-white "
+            error ? "border-red bg-red-lightest" : "border-grey-500 bg-grey-100 " 
           }`}
           
         />
diff --git a/frontend/src/external/bcanSatchel/store.ts b/frontend/src/external/bcanSatchel/store.ts
index 4af136d9..d99637e0 100644
--- a/frontend/src/external/bcanSatchel/store.ts
+++ b/frontend/src/external/bcanSatchel/store.ts
@@ -3,6 +3,8 @@ import { User } from '../../../../middle-layer/types/User'
 import { Grant } from '../../../../middle-layer/types/Grant'
 import { Status } from '../../../../middle-layer/types/Status'
 import { Notification } from '../../../../middle-layer/types/Notification'
+import { CashflowRevenue } from '../../../../middle-layer/types/CashflowRevenue'
+import { CashflowCost } from '../../../../middle-layer/types/CashflowCost'
 
 export interface AppState {
   isAuthenticated: boolean;
@@ -25,6 +27,8 @@ export interface AppState {
   userSort: {header: keyof User, sort: "asc" | "desc" | "none"} | null;
   notifications: Notification[];
   userQuery: string;
+  revenueSource: CashflowRevenue[];
+  costSource: CashflowCost[];
 }
 
 // Define initial state
@@ -48,6 +52,8 @@ const initialState: AppState = {
   sort: null,
   userSort: null,
   userQuery: '',
+  revenueSource: [],
+  costSource: [],
 };
 
 /**
diff --git a/frontend/src/main-page/cash-flow/CashFlowPage.tsx b/frontend/src/main-page/cash-flow/CashFlowPage.tsx
index 2d96988c..1fc1da5e 100644
--- a/frontend/src/main-page/cash-flow/CashFlowPage.tsx
+++ b/frontend/src/main-page/cash-flow/CashFlowPage.tsx
@@ -1,58 +1,62 @@
-import "../dashboard/styles/Dashboard.css";
 import { observer } from "mobx-react-lite";
+import CashFlowCard from "./components/CashFlowCard";
+import {
+  faDollarSign,
+  faArrowTrendUp,
+  faUserGroup,
+} from "@fortawesome/free-solid-svg-icons";
+import "../dashboard/styles/Dashboard.css";
+import CashPosition from "./components/CashPosition";
+import CashAnnualSettings from "./components/CashAnnualSettings";
+import CashProjection from "./components/CashProjection";
+import CashAdd from "./components/CashCreateLineItem";
+import CashSourceList from "./components/CashSourceList";
 
 const CashFlowPage = observer(() => {
   return (
-    <div className="dashboard-page">
-      <div className="grid grid-cols-4 grid-rows-[1fr_3fr_3fr] gap-4 min-h-screen">
+    <div className="">
+      <div className="grid grid-cols-4 grid-rows-[auto_auto_1fr] gap-4">
         {/* Row 1 */}
-        <div className="chart-container h-full">
-          {/* Card 1 placeholder */}
-        </div>
-
-        <div className="chart-container h-full">
-          {/* Card 2 placeholder */}
-        </div>
-
-        <div className="chart-container h-full">
-          {/* Card 3 placeholder */}
-        </div>
-
-        <div className="chart-container h-full">
-          {/* Card 4 placeholder */}
-        </div>
+        <CashFlowCard
+          text="Current Cash"
+          value="$50,000"
+          logo={faDollarSign}
+          className="text-blue"
+        />
+        <CashFlowCard
+          text="Total Revenue"
+          value="$50,000"
+          logo={faArrowTrendUp}
+          className="text-green"
+        />
+        <CashFlowCard
+          text="Monthly Costs"
+          value="$50,000"
+          logo={faUserGroup}
+          className="text-primary"
+        />
+        <CashFlowCard
+          text="Annual Increases"
+          value="Salary: 4.5% | Benefits: 4%"
+          logo={faArrowTrendUp}
+          className="text-green"
+          size="small"
+        />
 
         {/* Row 2 */}
-        <div className="chart-container col-span-2 h-full">
-          {/* Card 1 placeholder */}
-          <div className="bg-grey-200 px-2 py-2 h-14 rounded-full">
-            <div className="bg-white h-full w-1/2 rounded-full">
-            </div>
-          </div>
-        </div>
-
-        <div className="chart-container col-span-2 h-full flex flex-col">
-          {/* Card 2 placeholder */}
-          <div className="mt-auto flex gap-2">
-            {/* 4 buttons at bottom */}
-            <div className="bg-grey-200 rounded-md flex-1 h-14"></div>
-            <div className="bg-grey-200 rounded-md flex-1 h-14"></div>
-            <div className="bg-grey-200 rounded-md flex-1 h-14"></div>
-            <div className="bg-grey-200 rounded-md flex-1 h-14"></div>
-          </div>
-        </div>
+        <CashPosition />
+        <CashAnnualSettings />
 
         {/* Row 3 */}
-        <div className="chart-container col-span-2 h-full">
-          {/* Card 1 placeholder */}
-        </div>
+        <CashAdd />
+        <CashProjection />
 
-        <div className="chart-container col-span-2 h-full">
-          {/* Card 2 placeholder */}
-        </div>
+        {/* Row 4 */}
+        <CashSourceList type="Revenue" />
+        <CashSourceList type="Cost" />
       </div>
     </div>
   );
 });
 
-export default CashFlowPage;
\ No newline at end of file
+export default CashFlowPage;
diff --git a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
new file mode 100644
index 00000000..35f0c9f9
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
@@ -0,0 +1,39 @@
+import { CostType } from "../../../../../middle-layer/types/CostType";
+import Button from "../../../components/Button";
+import InputField from "../../../components/InputField";
+import CashCategoryDropdown from "./CashCategoryDropdown";
+
+export default function CashAddCosts() {
+  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 lg:grid-cols-2 w-full justify-between gap-4">
+        <div className="flex flex-col col-span-1 w-full gap-3">
+          <CashCategoryDropdown type={CostType} onChange={() => {}} />
+        </div>
+        <div className="flex flex-col col-span-1 gap-3">
+          <InputField
+            type="text"
+            id="cost_name"
+            label="Cost Item Name"
+            value={"Program Directory"}
+          />
+        </div>
+      </div>
+      <InputField
+        type="number"
+        id="amount"
+        label="Annual Amount ($)"
+        value={"325000"}
+        className="w-full"
+      />
+      <Button
+        text="Add Cost Item"
+        onClick={() => alert("add cost source")}
+        className="bg-primary text-white mt-2"
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
new file mode 100644
index 00000000..82282597
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
@@ -0,0 +1,52 @@
+import { RevenueType } from "../../../../../middle-layer/types/RevenueType";
+import Button from "../../../components/Button";
+import InputField from "../../../components/InputField";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import CashCategoryDropdown from "./CashCategoryDropdown";
+
+export default function CashAddRevenue() {
+  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 Revenue Source"}
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 w-full justify-between gap-4">
+        <div className="flex flex-col col-span-1 w-full gap-2">
+          <CashCategoryDropdown type={RevenueType} onChange={() => {}} />
+          <InputField
+            type="number"
+            id="amount"
+            label="Amount ($)"
+            value={"325000"}
+          />
+        </div>
+        <div className="flex flex-col col-span-1 gap-2">
+          <InputField
+            type="text"
+            id="source_name"
+            label="Revenue Source Name"
+            value={"Foundation Grant"}
+          />
+          <InputField
+            type="date"
+            id="date"
+            label="Date"
+            value={new Date().toDateString()}
+          />
+        </div>
+      </div>
+      <Button
+        text="Add Installment"
+        onClick={() => alert("add installment")}
+        logo={faPlus}
+        logoPosition="left"
+        className="bg-primary-900 text-white w-fit ml-auto text-sm"
+      />
+      <Button
+        text="Add Revenue Source"
+        onClick={() => alert("add revenue source")}
+        className="bg-green text-white mt-2"
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx b/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx
new file mode 100644
index 00000000..e3ef8253
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashAnnualSettings.tsx
@@ -0,0 +1,27 @@
+import InputField from "../../../components/InputField";
+
+export default function CashAnnualSettings() {
+
+  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">
+        {"Annual Increase Settings"}
+      </div>
+      <div className="flex flex-row justify-between gap-4">
+        <InputField
+          type="number"
+          id="salary_increase"
+          label="Personnel Salary Increase (%)"
+          value={"3.5"}
+          className=""
+        />
+        <InputField
+          type="number"
+          id="benefits_increase"
+          label="Personnel Benefits Increase (%)"
+          value={"4.0"}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
new file mode 100644
index 00000000..ce417fe5
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
@@ -0,0 +1,35 @@
+import { CostType } from "../../../../../middle-layer/types/CostType";
+import { RevenueType } from "../../../../../middle-layer/types/RevenueType";
+
+type CashCategoryDropdown = {
+  type: typeof RevenueType | typeof CostType;
+  onChange: () => void;
+};
+
+export default function CashCategoryDropdown({
+  type,
+  onChange,
+}: CashCategoryDropdown) {
+  return (
+    <div className="w-full">
+      <label htmlFor={"Category"} className="block text-left font-semibold">
+        {"Category"}
+      </label>
+      <div className="mt-2 flex items-center rounded-md">
+        <select
+          id="Category"
+          value={"Grants"}
+          onChange={onChange}
+          className="block w-full rounded-md py-2.5 pl-4 pr-3 text-base border-2 placeholder:text-grey-500 ${
+            border-grey-500 bg-grey-100  h-[3rem]"
+        >
+          {Object.values(type).map((r) => (
+            <option key={r} value={r}>
+              {r}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx b/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
new file mode 100644
index 00000000..4f93c670
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+import Button from "../../../components/Button";
+import CashAddRevenue from "./CashAddRevenue";
+import CashAddCosts from "./CashAddCosts";
+
+export default function CashCreateLineItem() {
+  const [showCosts, setShowCosts] = useState<boolean>(false);
+
+  return (
+    <div className="chart-container col-span-2 h-full">
+      <div className="flex flex-row rounded-4xl p-1 border border-grey-500 mb-2">
+        <Button
+          text="Revenue"
+          onClick={() => setShowCosts(!showCosts)}
+          className={`w-1/2 font-semibold ${!showCosts ? "bg-primary-900 text-white" : "bg-white"}`}
+        />
+        <Button
+          text="Costs"
+          onClick={() => setShowCosts(!showCosts)}
+          className={`w-1/2 font-semibold ${showCosts ? "bg-primary-900 text-white" : "bg-white"}`}
+        />
+      </div>
+
+      <div className="">
+        {!showCosts && <CashAddRevenue />}
+        {showCosts && <CashAddCosts />}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx b/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
new file mode 100644
index 00000000..9348f3d4
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
@@ -0,0 +1,54 @@
+import { useState } from "react";
+import Button from "../../../components/Button";
+import { faTrash, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
+
+type CashEditLineItemProps = {
+  cardText: React.ReactNode;
+  children: React.ReactNode;
+  sourceName: string;
+  onRemove: () => void;
+};
+
+export default function CashEditLineItem({
+  cardText,
+  children,
+  sourceName,
+  onRemove,
+}: CashEditLineItemProps) {
+  const [editting, setEditing] = useState<Boolean>(false);
+
+  const onEdit = () => {
+    setEditing(true);
+  };
+
+  return (
+    <div className="rounded border border-grey-500 p-4">
+      {!editting && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
+          <div className="flex flex-col text-start">
+            <div className="text-lg lg:text-xl font-bold">{sourceName}</div>
+            {cardText}
+          </div>
+
+          <div className="flex flex-wrap gap-2 lg:ml-auto">
+            <Button
+              text="Edit"
+              onClick={onEdit}
+              logo={faPenToSquare}
+              logoPosition="right"
+              className="bg-white text-black border-grey-500"
+            />
+            <Button
+              text="Remove"
+              logo={faTrash}
+              logoPosition="right"
+              onClick={onRemove}
+              className="bg-red-light text-red"
+            />
+          </div>
+        </div>
+      )}
+      {editting && <div>{children}</div>}
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashFlowCard.tsx b/frontend/src/main-page/cash-flow/components/CashFlowCard.tsx
new file mode 100644
index 00000000..a24c88e6
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashFlowCard.tsx
@@ -0,0 +1,37 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+
+type CardProps = {
+  text: string;
+  value: string;
+  className: string;
+  logo: IconProp;
+  size?: "small" | "medium";
+};
+
+export default function CashFlowCard({
+  text,
+  value,
+  className,
+  logo,
+  size,
+}: CardProps) {
+  return (
+    <div className="flex  flex-col bg-white rounded-md py-4 px-6">
+      <div className="flex flex-row justify-between mb-1 lg:mb-2">
+        <div className="text-md lg:text-lg  w-full text-left font-semibold">
+          {text}
+        </div>
+        <FontAwesomeIcon
+          icon={logo}
+          className="text-lg w-4 h-4 justify-self-end hidden lg:block"
+        />
+      </div>
+      <div
+        className={`font-semibold text-start mt-auto  ${className} ${size == "small" ? "text-sm lg:text-base" : "text-lg lg:text-2xl"}`}
+      >
+        {value}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashPosition.tsx b/frontend/src/main-page/cash-flow/components/CashPosition.tsx
new file mode 100644
index 00000000..05e7055f
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashPosition.tsx
@@ -0,0 +1,17 @@
+import InputField from "../../../components/InputField";
+
+export default function CashPosition() {
+  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={"25000"}
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashProjection.tsx b/frontend/src/main-page/cash-flow/components/CashProjection.tsx
new file mode 100644
index 00000000..253f047a
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashProjection.tsx
@@ -0,0 +1,38 @@
+import CashProjectionChart from "./CashProjectionChart";
+
+export default function CashProjection() {
+
+  // replace with actual data
+  const cards = [
+    { field: "Final Balance", value: 38784, color: "text-blue" },
+    { field: "Lowest Point", value: 38784, color: "text-grey" },
+    { field: "Total Revenue", value: 20000, color: "text-green" },
+    { field: "36-Mo Costs", value: 31212, color: "text-primary" },
+  ];
+
+  return (
+    <div className="chart-container col-span-2 h-full flex flex-col">
+      <div className="text-lg lg:text-xl mb-2 w-full text-left font-bold">
+        {"36-Month Cash Flow Projection"}
+      </div>
+      <CashProjectionChart />
+      <div className="flex-wrap gap-2 items-center grid grid-cols-2 lg:grid-cols-4 mt-1">
+        {cards.map((c) => (
+          <div
+            key={c.field}
+            className="bg-grey-150 rounded px-2 py-2 min-w-0 flex-1 flex flex-col h-full"
+          >
+            <div className={`font-semibold ${c.color}`}>{c.field}</div>
+            <div>
+              {c.value.toLocaleString("en-US", {
+                style: "currency",
+                currency: "USD",
+                maximumFractionDigits: 0,
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/cash-flow/components/CashProjectionChart.tsx b/frontend/src/main-page/cash-flow/components/CashProjectionChart.tsx
new file mode 100644
index 00000000..4e30b80b
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashProjectionChart.tsx
@@ -0,0 +1,111 @@
+import {
+  LineChart,
+  Line,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import { observer } from "mobx-react-lite";
+import "../../dashboard/styles/Dashboard.css";
+
+const CashProjectionChart = observer(({}: {}) => {
+
+  // replace with actual data, filter for 36 months
+  const data = [
+    { date: new Date(), cash_balance: 68333, revenue: 10000, costs: 833 },
+    {
+      date: new Date("2026-04-20"),
+      cash_balance: 7856,
+      revenue: 19000,
+      costs: 793,
+    },
+    {
+      date: new Date("2026-05-19"),
+      cash_balance: 98000,
+      revenue: 16789,
+      costs: 1000,
+    },
+  ];
+
+  // Sort by date to ensure correct line order
+  data.sort((a, b) => a.date.getTime() - b.date.getTime());
+
+  return (
+    <div className="h-full">
+      <ResponsiveContainer width="100%" height="100%">
+        <LineChart
+          data={data}
+          margin={{ top: 20, right: 30, left: 30, bottom: 20 }}
+        >
+          <CartesianGrid
+            vertical={false}
+            stroke="lightgray"
+            strokeDasharray="5 5"
+          />
+          <Line
+            type="monotone"
+            dataKey="cash_balance"
+            stroke="var(--color-blue)"
+            strokeWidth={2}
+            dot={{ r: 4 }}
+            name="Cash Balance"
+          />
+
+          <Line
+            type="monotone"
+            dataKey="revenue"
+            stroke="var(--color-green)"
+            strokeWidth={2}
+            dot={{ r: 4 }}
+            name="Revenue"
+          />
+          <Line
+            type="monotone"
+            dataKey="costs"
+            stroke="var(--color-primary)"
+            strokeWidth={2}
+            dot={{ r: 4 }}
+            name="Costs"
+          />
+          <XAxis
+            dataKey="date"
+            type="number"
+            domain={["auto", "auto"]}
+            scale="time"
+            dy={10}
+            style={{ fontSize: "var(--font-size-sm)" }}
+            tickFormatter={(date: Date) => date.getMonth().toLocaleString() + "/" + date.getFullYear()}
+            axisLine={false}
+            tickLine={false}
+          />
+
+          <YAxis
+            axisLine={false}
+            tickLine={false}
+            width="auto"
+            dx={-10}
+            className="axis"
+            tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`}
+          />
+
+          <Tooltip
+            contentStyle={{
+              borderRadius: "12px",
+              backgroundColor: "white",
+              border: "1px solid lightgray",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+            }}
+            labelFormatter={(date: Date) =>
+              date.getMonth().toLocaleString() + "/" + date.getFullYear()
+            }
+            formatter={(value: number) => `$${value.toLocaleString()}`}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+});
+
+export default CashProjectionChart;
diff --git a/frontend/src/main-page/cash-flow/components/CashSourceList.tsx b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
new file mode 100644
index 00000000..6977061b
--- /dev/null
+++ b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
@@ -0,0 +1,29 @@
+import CashEditLineItem from "./CashEditLineItem";
+
+type SourceProps = {
+  type: "Revenue" | "Cost";
+};
+
+export default function CashSourceList({ type }: SourceProps) {
+  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">
+        {type}
+        {" Sources"}
+      </div>
+      {/* map over list of source and put casheditlineitem for each */}
+      <CashEditLineItem
+        cardText={
+          <div className="flex flex-col">
+            <div className="font-semibold">{"Individual Donations"}</div>
+            <div>{"$10,000 | 3/13/2323"}</div>
+          </div>
+        }
+        sourceName="Source Name"
+        onRemove={() => alert("remove")}
+      >
+        <div>{"Edit form"}</div>
+      </CashEditLineItem>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/grants/grant-list/GrantCard.tsx b/frontend/src/main-page/grants/grant-list/GrantCard.tsx
index 69ec5779..46050b45 100644
--- a/frontend/src/main-page/grants/grant-list/GrantCard.tsx
+++ b/frontend/src/main-page/grants/grant-list/GrantCard.tsx
@@ -51,7 +51,7 @@ const GrantCard: React.FC<GrantCardProps> = ({ grant, isSelected, onClick }) =>
             {grant.organization}
           </div>
           <div className="text-md font-medium text-gray-900 text-left">
-            ${grant.amount}
+            ${grant.amount.toLocaleString()}
           </div>
         </div>
       </div>
diff --git a/frontend/src/sign-up/PasswordField.tsx b/frontend/src/sign-up/PasswordField.tsx
index 5f89ff6e..c3dfb499 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-bold text-black">
+      <label htmlFor={id} className="block text-left font-semibold text-black">
         {label}
         {required && <span className="text-red">*</span>}
       </label>
@@ -78,7 +78,7 @@ export default function PasswordField({
           id={id}
           type={visible ? "text" : "password"}
           className={`block w-full rounded-md border-2 py-2.5 pl-4 pr-10 text-base placeholder:text-grey-500 ${
-            error ? "border-red bg-red-lightest" : "border-grey-500 bg-white "
+            error ? "border-red bg-red-lightest" : "border-grey-500 bg-grey-100 "
           }`}
           {...inputProps}
         />
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index d255d631..a6de3a09 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -44,6 +44,7 @@
 
   --color-primary-900: #e16f39;
   --color-primary-800: #e78c61;
+  --color-primary: #e78c61;
   --color-primary-700: #eca380;
 
   --color-secondary-900: #001733;