diff --git a/backend/src/grant/grant.controller.ts b/backend/src/grant/grant.controller.ts
index b4638601..7996f3f6 100644
--- a/backend/src/grant/grant.controller.ts
+++ b/backend/src/grant/grant.controller.ts
@@ -64,7 +64,7 @@ export class GrantController {
     @ApiResponse({ status: 403, description: 'Forbidden - User does not have access to this resource' })
     @ApiResponse({ status: 500, description: 'Internal Server Error', example: 'Internal Server Error' })
     async addGrant(
-      @Body(new ValidationPipe({ whitelist: true, forbidNonWhitelisted: true }))
+      @Body()
       grant: AddGrantBody
     ): Promise<number> {
       this.logger.log(`POST /grant/new-grant - Creating new grant for organization: ${grant.organization}`);
diff --git a/backend/src/grant/grant.service.ts b/backend/src/grant/grant.service.ts
index ac294ff5..89fdad2e 100644
--- a/backend/src/grant/grant.service.ts
+++ b/backend/src/grant/grant.service.ts
@@ -384,6 +384,7 @@ export class GrantService {
           amount: grant.amount,
           grant_start_date: grant.grant_start_date,
           application_deadline: grant.application_deadline,
+          application_date: grant.application_date,
           report_deadlines: grant.report_deadlines,
           description: grant.description,
           timeline: grant.timeline,
diff --git a/backend/src/grant/types/grant.types.ts b/backend/src/grant/types/grant.types.ts
index 2d090a29..a50cae4f 100644
--- a/backend/src/grant/types/grant.types.ts
+++ b/backend/src/grant/types/grant.types.ts
@@ -22,6 +22,9 @@ export class GrantResponseDto {
   
   @ApiProperty({ description: 'When grant submission is due', example: '2024-06-01T00:00:00.000Z' })
   application_deadline!: string;
+
+  @ApiProperty({ description: 'When grant was submitted', example: '2024-06-01T00:00:00.000Z' })
+  application_date?: string;
   
   @ApiProperty({ description: 'Multiple report dates', type: [String], required: false })
   report_deadlines?: string[];
@@ -75,6 +78,9 @@ export class AddGrantBody {
   
   @ApiProperty({ description: 'When grant submission is due', example: '2024-06-01T00:00:00.000Z' })
   application_deadline!: string;
+
+  @ApiProperty({ description: 'When grant was submitted', example: '2024-06-01T00:00:00.000Z' })
+  application_date?: string;
   
   @ApiProperty({ description: 'Multiple report dates', type: [String], required: false, example: ['2024-12-01T00:00:00.000Z'] })
   report_deadlines?: string[];
@@ -122,6 +128,9 @@ export class UpdateGrantBody {
   
   @ApiProperty({ description: 'When grant submission is due', required: false })
   application_deadline?: string;
+
+  @ApiProperty({ description: 'When grant was submitted', required: false })
+  application_date?: string;
   
   @ApiProperty({ description: 'Multiple report dates', type: [String], required: false })
   report_deadlines?: string[];
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e3fada70..c34185eb 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -45,7 +45,6 @@
         "@types/react-transition-group": "^4.4.12",
         "@vitejs/plugin-react": "^4.3.1",
         "autoprefixer": "^10.4.20",
-        "baseline-browser-mapping": "^2.8.29",
         "eslint": "^9.9.0",
         "eslint-plugin-react-hooks": "^5.1.0-rc.0",
         "eslint-plugin-react-refresh": "^0.4.9",
@@ -6226,12 +6225,15 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.29",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.29.tgz",
-      "integrity": "sha512-sXdt2elaVnhpDNRDz+1BDx1JQoJRuNk7oVlAlbGiFkLikHCAQiccexF/9e91zVi6RCgqspl04aP+6Cnl9zRLrA==",
+      "version": "2.10.8",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.8.tgz",
+      "integrity": "sha512-PCLz/LXGBsNTErbtB6i5u4eLpHeMfi93aUv5duMmj6caNu6IphS4q6UevDnL36sZQv9lrP11dbPKGMaXPwMKfQ==",
       "license": "Apache-2.0",
       "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
     "node_modules/binary-extensions": {
@@ -6515,9 +6517,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001743",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001743.tgz",
-      "integrity": "sha512-e6Ojr7RV14Un7dz6ASD0aZDmQPT/A+eZU+nuTNfjqmRrmkmQlnTNWH0SKmqagx9PeW87UVqapSurtAXifmtdmw==",
+      "version": "1.0.30001779",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001779.tgz",
+      "integrity": "sha512-U5og2PN7V4DMgF50YPNtnZJGWVLFjjsN3zb6uMT5VGYIewieDj1upwfuVNXf4Kor+89c3iCRJnSzMD5LmTvsfA==",
       "funding": [
         {
           "type": "opencollective",
diff --git a/frontend/package.json b/frontend/package.json
index c0e5558b..4f28f545 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -48,7 +48,6 @@
     "@types/react-transition-group": "^4.4.12",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
-    "baseline-browser-mapping": "^2.8.29",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
diff --git a/frontend/src/Footer.tsx b/frontend/src/Footer.tsx
index ad2aa5d9..34927a24 100644
--- a/frontend/src/Footer.tsx
+++ b/frontend/src/Footer.tsx
@@ -4,7 +4,7 @@ import { FooterText } from "./translations/general";
 
 const Footer: React.FC = () => {
   return (
-    <div className="footer flex flex-col items-center justify-center py-10 px-4 text-base text-grey-700">
+    <div className="footer flex flex-col items-center justify-center py-12 pt-16 px-4 text-base text-grey-700">
       <Group className="flex flex-col p-2">
         <Text>
           {FooterText.C4C_Motto}
diff --git a/frontend/src/custom/ActionConfirmation.tsx b/frontend/src/components/ActionConfirmation.tsx
similarity index 91%
rename from frontend/src/custom/ActionConfirmation.tsx
rename to frontend/src/components/ActionConfirmation.tsx
index 34dafc21..fd066ea8 100644
--- a/frontend/src/custom/ActionConfirmation.tsx
+++ b/frontend/src/components/ActionConfirmation.tsx
@@ -27,7 +27,7 @@ import { IoIosWarning } from "react-icons/io";
         onClick={onCloseDelete}
       >
         <div 
-          className=" bg-white border-2 rounded-md shadow-2xl p-8 max-w-xl w-full mx-4 transform transition-all duration-300"
+          className=" bg-white rounded-md shadow-2xl p-8 max-w-xl w-full mx-4 transform transition-all duration-300"
           onClick={(e) => e.stopPropagation()}
         >
 
@@ -53,7 +53,7 @@ import { IoIosWarning } from "react-icons/io";
               <IoIosWarning size={24} className="text-red"/>
               <p className="font-bold px-1 text-lg text-red"> Warning </p>
             </div>
-            <p className=" text-left text-lg font-semibold text-red">
+            <p className=" text-left font-semibold text-red">
               {warningMessage}
             </p>
 
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index 26ee736f..dc5a300c 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -2,39 +2,58 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 type ButtonProps = {
-    text: string;
-    onClick: () => void;
-    className?: string;
-    logo?: IconProp;
-    logoPosition?: 'left' | 'right';
-    disabled?: boolean;
-    type?: "button" | "submit" | "reset";
-}
-
+  text: string;
+  onClick: () => void;
+  className?: string;
+  logo?: IconProp;
+  logoPosition?: "left" | "right" | "center";
+  disabled?: boolean;
+  type?: "button" | "submit" | "reset";
+};
 
 // Button component where you can pass in text, onClick handler, optional className
 // for styling, and an optional logo with its position.
 //Styling is default, but can be overridden by passing in a className prop
-export default function Button({ text, onClick, className, logo, logoPosition, disabled, type }: ButtonProps) {
+export default function Button({
+  text,
+  onClick,
+  className,
+  logo,
+  logoPosition,
+  disabled,
+  type,
+}: ButtonProps) {
   return (
-    <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
-        h-fit flex items-center justify-center transition-opacity
-        ${className} ${disabled
-          ? "cursor-not-allowed opacity-50"
-          : "hover:opacity-90"}
+    <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
+        h-fit flex-grow-0 items-center justify-center     
+        transition-opacity flex whitespace-nowrap
+        ${className} ${
+          disabled ? "cursor-not-allowed opacity-50" : "hover:opacity-90"
+        }
       `}
     >
-      {logo && logoPosition === 'left' &&
-      <span className="mr-2">
-        <FontAwesomeIcon icon={logo} className="text-lg w-4 h-4" />
-      </span>}
+      {logo && logoPosition === "left" && (
+        <span className="mr-2">
+          <FontAwesomeIcon icon={logo} className="" />
+        </span>
+      )}
       {text}
-      {logo && logoPosition === 'right' &&
-      <span className="ml-2">
-        <FontAwesomeIcon icon={logo} className="text-lg w-4 h-4" />
-      </span>}
+      {logo && logoPosition === "right" && (
+        <span className="ml-2">
+          <FontAwesomeIcon icon={logo} className="" />
+        </span>
+      )}
+      {logo && logoPosition === "center" && (
+        <span className="">
+          <FontAwesomeIcon icon={logo} className="" />
+        </span>
+      )}
     </button>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/InputField.tsx b/frontend/src/components/InputField.tsx
index 61361037..4f850af5 100644
--- a/frontend/src/components/InputField.tsx
+++ b/frontend/src/components/InputField.tsx
@@ -21,7 +21,7 @@ export default function InputField({
 }: InputFieldProps) {
   return (
     <div className="w-full">
-      <label htmlFor={id} className="block text-left font-semibold">
+      <label htmlFor={id} className="block text-left font-semibold text-sm lg:text-base">
         {label}
         {required && <span className="text-red">*</span>}
       </label>
@@ -29,7 +29,7 @@ export default function InputField({
         <input
           id={id}
           {...inputProps}
-          className={`block w-full rounded-md py-2.5 pl-4 pr-3 text-base border-2 placeholder:text-grey-500 ${
+          className={`block w-full rounded-md py-2.5 pl-4 pr-3 text-sm lg:text-base border-2 placeholder:text-grey-500 ${
             error ? "border-red bg-red-lightest" : "border-grey-500 bg-grey-100 " 
           }`}
           
diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
index debac718..5e7eb79e 100644
--- a/frontend/src/components/SearchBar.tsx
+++ b/frontend/src/components/SearchBar.tsx
@@ -27,7 +27,7 @@ export default function SearchBar({
       />
       <input
         placeholder={`Search for a ${text}...`}
-        className="w-full px-4 py-2 rounded-3xl font-medium text-black border-2 flex items-center justify-center border-grey-500"
+        className="w-full px-4 py-2 rounded-3xl font-medium text-sm lg:text-base text-black border-2 flex items-center justify-center border-grey-500"
         onChange={handleInputChange}
         value={userInput}
         style={{ paddingLeft: "2rem" }} // make room for the icon
diff --git a/frontend/src/external/bcanSatchel/actions.ts b/frontend/src/external/bcanSatchel/actions.ts
index 3c4f28a3..8c390996 100644
--- a/frontend/src/external/bcanSatchel/actions.ts
+++ b/frontend/src/external/bcanSatchel/actions.ts
@@ -42,6 +42,8 @@ export const logoutUser = action("logoutUser");
  */
 export const removeProfilePic = action("removeProfilePic");
 
+export const clearAllFilters = action("clearAllFilters");
+
 /**
  * Moves along the all grants that are fetched from back end to mutator.
  */
diff --git a/frontend/src/external/bcanSatchel/mutators.ts b/frontend/src/external/bcanSatchel/mutators.ts
index 190cf596..588bdfa8 100644
--- a/frontend/src/external/bcanSatchel/mutators.ts
+++ b/frontend/src/external/bcanSatchel/mutators.ts
@@ -1,11 +1,12 @@
-import { mutator } from 'satcheljs';
+import { mutator } from "satcheljs";
 import {
   setAuthState,
   updateUserProfile,
   logoutUser,
   fetchAllGrants,
   updateFilter,
-  updateStartDateFilter, updateEndDateFilter,
+  updateStartDateFilter,
+  updateEndDateFilter,
   updateSearchQuery,
   updateYearFilter,
   updateUserEmailFilter,
@@ -15,25 +16,27 @@ import {
   updateSort,
   updateUserQuery,
   updateUserSort,
+  clearAllFilters,
+  setActiveUsers, 
+  setInactiveUsers,
   removeProfilePic,
   fetchCashflowRevenues,
   fetchCashflowCosts,
-} from './actions';
-import { getAppStore, persistToSessionStorage } from './store';
-import { setActiveUsers, setInactiveUsers } from './actions';
+} from "./actions";
+import { getAppStore, persistToSessionStorage } from "./store";
 
-/** 
+/**
  * setActiveUsers mutator
-*/
+ */
 mutator(setActiveUsers, (actionMessage) => {
   const store = getAppStore();
   store.activeUsers = actionMessage.users;
   persistToSessionStorage();
 });
 
-/** 
+/**
  * setInactiveUsers mutator
-*/
+ */
 mutator(setInactiveUsers, (actionMessage) => {
   const store = getAppStore();
   store.inactiveUsers = actionMessage.users;
@@ -44,13 +47,13 @@ mutator(setInactiveUsers, (actionMessage) => {
  * setAuthState mutator
  */
 mutator(setAuthState, (actionMessage) => {
-  console.log('=== setAuthState MUTATOR CALLED ===');
+  console.log("=== setAuthState MUTATOR CALLED ===");
   const store = getAppStore();
-  console.log('Setting user:', actionMessage.user);
+  console.log("Setting user:", actionMessage.user);
   store.isAuthenticated = actionMessage.isAuthenticated;
   store.user = actionMessage.user;
   store.accessToken = actionMessage.accessToken;
-  console.log('Calling persistToSessionStorage...');
+  console.log("Calling persistToSessionStorage...");
   persistToSessionStorage();
 });
 
@@ -101,9 +104,23 @@ mutator(logoutUser, () => {
   store.isAuthenticated = false;
   store.user = null;
   store.accessToken = null;
-  sessionStorage.removeItem('bcanAppStore');
+  sessionStorage.removeItem("bcanAppStore");
 });
 
+// Clears all store filters
+mutator(clearAllFilters, () => {
+  const store = getAppStore();
+  store.filterStatus = null;
+  store.startDateFilter = null;
+  store.endDateFilter = null;
+  store.searchQuery = "";
+  store.yearFilter = [];
+  store.userQuery = "";
+  store.emailFilter = false;
+  store.eligibleOnly = false;
+  store.amountMinFilter = null;
+  store.amountMaxFilter = null;
+});
 
 /**
  * Reassigns all grants to new grants from the backend.
@@ -129,16 +146,32 @@ mutator(fetchCashflowRevenues, (actionMessage) => {
 mutator(updateFilter, (actionMessage) => {
   const store = getAppStore();
   store.filterStatus = actionMessage.status;
-})
+});
 
 mutator(updateStartDateFilter, (actionMessage) => {
   const store = getAppStore();
   store.startDateFilter = actionMessage.startDateFilter;
-})
+});
 
 mutator(updateEndDateFilter, (actionMessage) => {
   const store = getAppStore();
   store.endDateFilter = actionMessage.endDateFilter;
+});
+
+mutator(updateUserEmailFilter, (actionMessage) => {
+  const store = getAppStore();
+  store.emailFilter = actionMessage.userEmailFilter;
+})
+
+mutator(updateEligibleOnly, (actionMessage) => {
+  const store = getAppStore();
+  store.eligibleOnly = actionMessage.eligibleOnly;
+})
+
+mutator(updateAmountRange, (actionMessage) => {
+  const store = getAppStore();
+  store.amountMinFilter = actionMessage.amountMinFilter;
+  store.amountMaxFilter = actionMessage.amountMaxFilter;
 })
 
 mutator(updateUserEmailFilter, (actionMessage) => {
@@ -160,33 +193,32 @@ mutator(updateAmountRange, (actionMessage) => {
 mutator(updateSearchQuery, (actionMessage) => {
   const store = getAppStore();
   store.searchQuery = actionMessage.searchQuery;
-})
+});
 
 mutator(updateYearFilter, (actionMessage) => {
   const store = getAppStore();
   store.yearFilter = actionMessage.yearFilter;
-})
+});
 
 mutator(setNotifications, (actionMessage) => {
   const store = getAppStore();
   store.notifications = actionMessage.notifications;
-})
+});
 
 mutator(updateSort, (actionMessage) => {
   const store = getAppStore();
   store.sort = actionMessage.sort;
-})
+});
 
 mutator(updateUserQuery, (actionMessage) => {
   const store = getAppStore();
   store.userQuery = actionMessage.userQuery;
-  console.log('Updated userQuery:', store.userQuery);
-})
+});
 
 mutator(updateUserSort, (actionMessage) => {
   const store = getAppStore();
   store.userSort = actionMessage.sort;
-}) 
+});
 
 mutator(removeProfilePic, () => {
   const store = getAppStore();
@@ -204,4 +236,4 @@ mutator(removeProfilePic, () => {
   }
 
   persistToSessionStorage();
-});
\ No newline at end of file
+});
diff --git a/frontend/src/main-page/MainPage.tsx b/frontend/src/main-page/MainPage.tsx
index 07f91eba..8149cb35 100644
--- a/frontend/src/main-page/MainPage.tsx
+++ b/frontend/src/main-page/MainPage.tsx
@@ -1,4 +1,4 @@
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, useLocation } from "react-router-dom";
 import Dashboard from "./dashboard/Dashboard";
 import GrantPage from "./grants/GrantPage";
 import NavBar from "./navbar/NavBar";
@@ -12,8 +12,9 @@ import { UserStatus } from "../../../middle-layer/types/UserStatus";
 import { observer } from "mobx-react-lite";
 import { Navigate } from "react-router-dom";
 import { getAppStore } from "../external/bcanSatchel/store";
-import BellButton from "./navbar/Bell";
-import { useState } from "react";
+import BellButton from "./notifications/Bell";
+import { useEffect, useState } from "react";
+import { clearAllFilters } from "../external/bcanSatchel/actions";
 
 interface PositionGuardProps {
   children: React.ReactNode;
@@ -48,13 +49,20 @@ const PositionGuard = observer(
 function MainPage() {
   const [openModal, setOpenModal] = useState(false);
 
+  const location = useLocation();
+
+  // Clears all store filters when page changes
+  useEffect(() => {
+    clearAllFilters();
+  }, [location]);
+
   return (
     <div className="w-full flex-row flex h-screen overflow-hiden">
       <div>
         <NavBar />
       </div>
-      <div className="px-6 lg:px-10 py-8 pt-8 w-full h-screen overflow-y-auto">
-        <div className="min-h-screen mb-8">
+      <div className="px-6 lg:px-10 pt-8 w-full h-screen overflow-y-auto">
+        <div className="">
           <div className="bell-container flex justify-end w-full">
             <BellButton setOpenModal={setOpenModal} openModal={openModal} />
           </div>
@@ -64,6 +72,7 @@ function MainPage() {
               element={
                 <PositionGuard adminOnly={false}>
                   <Dashboard />
+                  <Footer />
                 </PositionGuard>
               }
             />
@@ -80,6 +89,7 @@ function MainPage() {
               element={
                 <PositionGuard adminOnly={true}>
                   <UsersPage />
+                  <Footer />
                 </PositionGuard>
               }
             />
@@ -89,6 +99,7 @@ function MainPage() {
               element={
                 <PositionGuard adminOnly={false}>
                   <CashFlowPage />
+                  <Footer />
                 </PositionGuard>
               }
             />
@@ -97,6 +108,7 @@ function MainPage() {
               element={
                 <PositionGuard adminOnly={false}>
                   <Settings />
+                  <Footer />
                 </PositionGuard>
               }
             />
@@ -110,7 +122,6 @@ function MainPage() {
             />
           </Routes>
         </div>
-        <Footer />
       </div>
     </div>
   );
diff --git a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
index 35f0c9f9..90a155b6 100644
--- a/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAddCosts.tsx
@@ -32,7 +32,7 @@ export default function CashAddCosts() {
       <Button
         text="Add Cost Item"
         onClick={() => alert("add cost source")}
-        className="bg-primary text-white mt-2"
+        className="bg-primary text-white mt-2 text-sm lg:text-base"
       />
     </div>
   );
diff --git a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
index 82282597..7e8a5108 100644
--- a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
@@ -45,7 +45,7 @@ export default function CashAddRevenue() {
       <Button
         text="Add Revenue Source"
         onClick={() => alert("add revenue source")}
-        className="bg-green text-white mt-2"
+        className="bg-green text-white mt-2 text-sm lg:text-base"
       />
     </div>
   );
diff --git a/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
index ce417fe5..5ec999ba 100644
--- a/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
@@ -12,15 +12,15 @@ export default function CashCategoryDropdown({
 }: CashCategoryDropdown) {
   return (
     <div className="w-full">
-      <label htmlFor={"Category"} className="block text-left font-semibold">
+      <label htmlFor={"Category"} className="block text-left font-semibold text-sm lg:text-base">
         {"Category"}
       </label>
-      <div className="mt-2 flex items-center rounded-md">
+      <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 ${
+          className="block w-full rounded-md py-2.5 pl-4 pr-3 text-sm lg:text-base border-2 placeholder:text-grey-500 ${
             border-grey-500 bg-grey-100  h-[3rem]"
         >
           {Object.values(type).map((r) => (
diff --git a/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx b/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
index 4f93c670..94c74787 100644
--- a/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashCreateLineItem.tsx
@@ -8,7 +8,7 @@ export default function CashCreateLineItem() {
 
   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">
+      <div className="flex flex-row rounded-4xl p-1 border border-grey-500 mb-2 text-sm lg:text-base">
         <Button
           text="Revenue"
           onClick={() => setShowCosts(!showCosts)}
diff --git a/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx b/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
index 9348f3d4..200601d6 100644
--- a/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
@@ -36,14 +36,14 @@ export default function CashEditLineItem({
               onClick={onEdit}
               logo={faPenToSquare}
               logoPosition="right"
-              className="bg-white text-black border-grey-500"
+              className="bg-white text-black border-grey-500 text-sm lg:text-base"
             />
             <Button
               text="Remove"
               logo={faTrash}
               logoPosition="right"
               onClick={onRemove}
-              className="bg-red-light text-red"
+              className="bg-red-light text-red text-sm lg:text-base"
             />
           </div>
         </div>
diff --git a/frontend/src/main-page/cash-flow/components/CashProjection.tsx b/frontend/src/main-page/cash-flow/components/CashProjection.tsx
index 9fd2aa41..6ff57297 100644
--- a/frontend/src/main-page/cash-flow/components/CashProjection.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashProjection.tsx
@@ -27,7 +27,7 @@ export default function CashProjection({costs, revenues}:ProjectionProps) {
         {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"
+            className="bg-grey-150 rounded px-2 py-2 min-w-0 flex-1 flex flex-col h-full text-sm lg:text-base"
           >
             <div className={`font-semibold ${c.color}`}>{c.field}</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 5246775a..03efdfb3 100644
--- a/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
@@ -17,7 +17,7 @@ export default function CashSourceList({ type }: SourceProps) {
       {/* map over list of source and put casheditlineitem for each */}
       <CashEditLineItem
         cardText={
-          <div className="flex flex-col">
+          <div className="flex flex-col text-sm lg:text-base">
             <div className="font-semibold">{"Individual Donations"}</div>
             <div>{"$10,000 | 3/13/2323"}</div>
           </div>
diff --git a/frontend/src/main-page/dashboard/Dashboard.tsx b/frontend/src/main-page/dashboard/Dashboard.tsx
index dc490c83..30013291 100644
--- a/frontend/src/main-page/dashboard/Dashboard.tsx
+++ b/frontend/src/main-page/dashboard/Dashboard.tsx
@@ -1,34 +1,18 @@
-import CsvExportButton from "./CsvExportButton";
+import CsvExportButton from "./components/CsvExportButton";
 
-import DateFilter from "./DateFilter";
+import DateFilter from "./components/DateFilter";
 import "./styles/Dashboard.css";
 import { observer } from "mobx-react-lite";
-import StackedBarMoneyReceived from "./Charts/StackedBarMoneyReceived";
-import { useEffect } from "react";
-import {
-  updateYearFilter,
-  updateFilter,
-  updateEndDateFilter,
-  updateStartDateFilter,
-  updateSearchQuery,
-} from "../../external/bcanSatchel/actions";
+import StackedBarMoneyReceived from "./components/StackedBarMoneyReceived";
 import { getAppStore } from "../../external/bcanSatchel/store";
-import BarYearGrantStatus from "./Charts/BarYearGrantStatus";
-import LineChartSuccessRate from "./Charts/LineChartSuccessRate";
-import GanttYearGrantTimeline from "./Charts/GanttYearGrantTimeline";
-import DonutMoneyApplied from "./Charts/DonutMoneyApplied";
+import BarYearGrantStatus from "./components/BarYearGrantStatus";
+import LineChartSuccessRate from "./components/LineChartSuccessRate";
+import GanttYearGrantTimeline from "./components/GanttYearGrantTimeline";
+import DonutMoneyApplied from "./components/DonutMoneyApplied";
 import { ProcessGrantData } from "../grants/filter-bar/processGrantData";
-import KPICards from "./Charts/KPICards";
+import KPICards from "./components/KPICards";
 
 const Dashboard = observer(() => {
-  // reset filters on initial render
-  useEffect(() => {
-    updateYearFilter([]);
-    updateFilter(null);
-    updateEndDateFilter(null);
-    updateStartDateFilter(null);
-    updateSearchQuery("");
-  }, []);
 
   const { yearFilter, allGrants } = getAppStore();
 
diff --git a/frontend/src/main-page/dashboard/Charts/BarYearGrantStatus.tsx b/frontend/src/main-page/dashboard/components/BarYearGrantStatus.tsx
similarity index 98%
rename from frontend/src/main-page/dashboard/Charts/BarYearGrantStatus.tsx
rename to frontend/src/main-page/dashboard/components/BarYearGrantStatus.tsx
index 821a6ec2..2081871c 100644
--- a/frontend/src/main-page/dashboard/Charts/BarYearGrantStatus.tsx
+++ b/frontend/src/main-page/dashboard/components/BarYearGrantStatus.tsx
@@ -115,7 +115,7 @@ const BarYearGrantStatus = observer(
                 formatter={(label: any) =>
                   typeof label === "number"
                     ? checked
-                      ? `$${label / 1000}k`
+                      ? `$${(label / 1000).toFixed(0)}k`
                       : `${label}`
                     : label
                 }
diff --git a/frontend/src/main-page/dashboard/CsvExportButton.tsx b/frontend/src/main-page/dashboard/components/CsvExportButton.tsx
similarity index 88%
rename from frontend/src/main-page/dashboard/CsvExportButton.tsx
rename to frontend/src/main-page/dashboard/components/CsvExportButton.tsx
index 5df10059..2594fe51 100644
--- a/frontend/src/main-page/dashboard/CsvExportButton.tsx
+++ b/frontend/src/main-page/dashboard/components/CsvExportButton.tsx
@@ -1,13 +1,13 @@
 import { useState } from "react";
-import { downloadCsv, CsvColumn } from "../../utils/csvUtils";
-import { Grant } from "../../../../middle-layer/types/Grant";
-import { ProcessGrantData } from "../../main-page/grants/filter-bar/processGrantData";
+import { downloadCsv, CsvColumn } from "../../../utils/csvUtils";
+import { Grant } from "../../../../../middle-layer/types/Grant";
+import { ProcessGrantData } from "../../grants/filter-bar/processGrantData";
 import { observer } from "mobx-react-lite";
-import { getAppStore } from "../../external/bcanSatchel/store";
+import { getAppStore } from "../../../external/bcanSatchel/store";
 import { faDownload } from "@fortawesome/free-solid-svg-icons";
-import Attachment from "../../../../middle-layer/types/Attachment";
-import POC from "../../../../middle-layer/types/POC";
-import Button from "../../components/Button";
+import Attachment from "../../../../../middle-layer/types/Attachment";
+import POC from "../../../../../middle-layer/types/POC";
+import Button from "../../../components/Button";
 // Define the columns for the CSV export, including any necessary formatting.
 const columns: CsvColumn<Grant>[] = [
   { key: "grantId", title: "Grant ID" },
diff --git a/frontend/src/main-page/dashboard/DateFilter.tsx b/frontend/src/main-page/dashboard/components/DateFilter.tsx
similarity index 90%
rename from frontend/src/main-page/dashboard/DateFilter.tsx
rename to frontend/src/main-page/dashboard/components/DateFilter.tsx
index 3317ce07..1ad4ea5b 100644
--- a/frontend/src/main-page/dashboard/DateFilter.tsx
+++ b/frontend/src/main-page/dashboard/components/DateFilter.tsx
@@ -1,10 +1,10 @@
 import { useState, useEffect } from "react";
-import { updateYearFilter } from "../../external/bcanSatchel/actions";
-import { getAppStore } from "../../external/bcanSatchel/store";
+import { updateYearFilter } from "../../../external/bcanSatchel/actions";
+import { getAppStore } from "../../../external/bcanSatchel/store";
 import { observer } from "mobx-react-lite";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
-import Button from "../../components/Button";
+import Button from "../../../components/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const DateFilter: React.FC = observer(() => {
@@ -52,7 +52,7 @@ const DateFilter: React.FC = observer(() => {
   };
 
   return (
-    <div className="flex flex-col space-y-2 w-64 lg:w-80 relative">
+    <div className="flex flex-col space-y-2 relative">
       <Button
         text={selectedYears.length === 0
             ? "Select years"
@@ -65,7 +65,7 @@ const DateFilter: React.FC = observer(() => {
         className="bg-white border-grey-500 inline-flex items-center justify-between text-sm lg:text-base"
       />
       <div
-        className={`z-[100] absolute  top-10 w-64 lg:w-80 bg-white ${showDropdown ? "" : "hidden"} rounded-md border-2 border-grey-500 shadow-lg`}
+        className={`z-[100] absolute  top-10 w-64 bg-white ${showDropdown ? "" : "hidden"} rounded-md border-2 border-grey-500 shadow-lg`}
       >
         <button
           className="close-button absolute top-3 right-4 text-lg"
diff --git a/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx b/frontend/src/main-page/dashboard/components/DonutMoneyApplied.tsx
similarity index 100%
rename from frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx
rename to frontend/src/main-page/dashboard/components/DonutMoneyApplied.tsx
diff --git a/frontend/src/main-page/dashboard/Charts/GanttYearGrantTimeline.tsx b/frontend/src/main-page/dashboard/components/GanttYearGrantTimeline.tsx
similarity index 100%
rename from frontend/src/main-page/dashboard/Charts/GanttYearGrantTimeline.tsx
rename to frontend/src/main-page/dashboard/components/GanttYearGrantTimeline.tsx
diff --git a/frontend/src/main-page/dashboard/Charts/KPICard.tsx b/frontend/src/main-page/dashboard/components/KPICard.tsx
similarity index 100%
rename from frontend/src/main-page/dashboard/Charts/KPICard.tsx
rename to frontend/src/main-page/dashboard/components/KPICard.tsx
diff --git a/frontend/src/main-page/dashboard/Charts/KPICards.tsx b/frontend/src/main-page/dashboard/components/KPICards.tsx
similarity index 100%
rename from frontend/src/main-page/dashboard/Charts/KPICards.tsx
rename to frontend/src/main-page/dashboard/components/KPICards.tsx
diff --git a/frontend/src/main-page/dashboard/Charts/LineChartSuccessRate.tsx b/frontend/src/main-page/dashboard/components/LineChartSuccessRate.tsx
similarity index 100%
rename from frontend/src/main-page/dashboard/Charts/LineChartSuccessRate.tsx
rename to frontend/src/main-page/dashboard/components/LineChartSuccessRate.tsx
diff --git a/frontend/src/main-page/dashboard/Charts/StackedBarMoneyReceived.tsx b/frontend/src/main-page/dashboard/components/StackedBarMoneyReceived.tsx
similarity index 100%
rename from frontend/src/main-page/dashboard/Charts/StackedBarMoneyReceived.tsx
rename to frontend/src/main-page/dashboard/components/StackedBarMoneyReceived.tsx
diff --git a/frontend/src/main-page/grants/GrantPage.tsx b/frontend/src/main-page/grants/GrantPage.tsx
index 97b75141..1bf04626 100644
--- a/frontend/src/main-page/grants/GrantPage.tsx
+++ b/frontend/src/main-page/grants/GrantPage.tsx
@@ -1,153 +1,81 @@
-import AddGrantButton from "./new-grant/AddGrant.tsx";
 import GrantSearch from "./filter-bar/GrantSearch.tsx";
-import NewGrantModal from "./new-grant/NewGrantModal.tsx";
 import { useEffect, useState } from "react";
-import { Grant } from "../../../../middle-layer/types/Grant.ts";
 import FilterBar from "./filter-bar/FilterBar.tsx";
 import GrantItem from "./grant-view/GrantView.tsx";
-import { useAuthContext } from "../../context/auth/authContext";
-import {
-  updateEndDateFilter,
-  updateFilter,
-  updateSearchQuery,
-  updateStartDateFilter,
-  updateYearFilter,
-  fetchAllGrants,
-} from "../../external/bcanSatchel/actions.ts";
-import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import { ProcessGrantData } from "./filter-bar/processGrantData.ts";
-import { UserStatus } from "../../../../middle-layer/types/UserStatus.ts";
-import { Navigate } from "react-router-dom";
-import GrantCard from "./grant-list/GrantCard.tsx";
-import { api } from "../../api.ts";
-//import Button from "../../components/Button.tsx";
+import GrantCard from "./grant-view/components/GrantCard.tsx";
+import Button from "../../components/Button.tsx";
+import EditGrant from "./edit-grant/EditGrant.tsx";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+
+// still needed potentially?
+interface GrantPageProps {
+  showOnlyMyGrants?: boolean; //if true, filters grants by user email
+}
+
+function GrantPage({}: GrantPageProps) {
+  const [showEditGrant, setShowEditGrant] = useState(false);
 
-function GrantPage() {
-  const [showNewGrantModal, setShowNewGrantModal] = useState(false);
-  const [wasGrantSubmitted, setWasGrantSubmitted] = useState(false);
-  
   // Use ProcessGrantData reactively to get filtered grants
   const { grants } = ProcessGrantData();
-  const [curGrant, setCurGrant] = useState<Grant | null>(null);
+  const [curId, setCurId] = useState<number | null>(null);
+
+  const curGrant =
+  grants.find((g) => g.grantId === curId) ??
+  grants[0] ??
+  null;
 
   // When the first grant in the list changes (sort/filter/initial load), show it
   const firstGrantId = grants[0]?.grantId ?? null;
   useEffect(() => {
-    setCurGrant(grants.length > 0 ? grants[0] : null);
+    setCurId(grants.length > 0 ? grants[0].grantId : null);
   }, [firstGrantId]);
 
-   // If the NewGrantModal has been closed and a new grant submitted (or existing grant edited),
-   // refetch the grants list and update the current grant to reflect any changes
-   // SHOULD BE CHANGED TO ALSO ACCOMODATE DELETIONS (CURRENTLY ONLY UPDATES IF GRANT WAS CREATED/EDITED, NOT DELETED)
-    useEffect(() => {
-      if (!wasGrantSubmitted || !curGrant) return;
-
-      const updateGrant = async () => {
-        try {
-          const response = await api(`/grant/${curGrant.grantId}`, {
-            method: "GET",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          });
-
-          if (response.ok) {
-            const updatedGrant = await response.json();
-            setCurGrant(updatedGrant);
-            console.log("✅ Grant refreshed:", updatedGrant);
-          } else {
-            console.error("❌ Failed to fetch updated grant");
-          }
-        } catch (err) {
-          console.error("Error fetching updated grant:", err);
-        }
-      };
-
-      const updateGrants = async () => {
-        try {
-          const response = await api("/grant");
-          if (!response.ok) {
-            throw new Error(`HTTP Error, Status: ${response.status}`);
-          }
-          const updatedGrants: Grant[] = await response.json();
-          fetchAllGrants(updatedGrants);
-          console.log("✅ Grants list refreshed");
-        } catch (error) {
-          console.error("Error fetching grants:", error);
-        }
-      };
-
-      updateGrants();
-      updateGrant();
-      setWasGrantSubmitted(false);
-    }, [wasGrantSubmitted]);
-  
-  const { user } = useAuthContext(); //gets current logged in user
-  const userObj = toJS(user);
-
-  // const currentUserEmail = userObj?.email || ""; //safe fallback
-
-  console.log("Current logged-in user:", userObj);
-  // reset filters on initial render
-  useEffect(() => {
-    updateYearFilter([]);
-    updateFilter(null);
-    updateEndDateFilter(null);
-    updateStartDateFilter(null);
-    updateSearchQuery("");
-  }, []);
-
-  return user ? (
-    user?.position !== UserStatus.Inactive ? (
-      <div className="grant-page w-full items-end">
-        <GrantSearch />
-        <div className="flex w-full justify-between py-2 gap-4">
-          <span className="text-lg font-semibold">
+  return (
+    <div className="grant-page w-full items-end flex flex-col h-[86vh]">
+      <GrantSearch />
+      <div className="flex w-full py-2 place-items-start gap-4">
+        <div className="text-lg w-fit font-semibold">
             <FilterBar />
-          </span>
-          <AddGrantButton onClick={() => setShowNewGrantModal(true)} />
-        </div>
-
-        <div className="flex flex-row w-full gap-2 justify-between mt-4">
-          <div className="flex flex-col w-[33%] h-[150vh] overflow-y-scroll pr-2">
-            {grants.map((grant) => (
-              <GrantCard
-                key={grant.grantId}
-                grant={grant}
-                isSelected={curGrant?.grantId === grant.grantId}
-                onClick={() => setCurGrant(grant)}
-              />
-            ))}
-          </div>
-          <div className="w-[65%]">
-            {curGrant ? (
-              <GrantItem grant={curGrant} />
-            ) : (
-              <div className="flex items-center justify-center h-full text-gray-500">
-                No grants found.
-              </div>
-            )}
           </div>
-        </div>
-        <div className="hidden-features">
-          {showNewGrantModal && (
-            <NewGrantModal
-              grantToEdit={null}
-              onClose={async () => {
-                setShowNewGrantModal(false);
-                setWasGrantSubmitted(true);
-              }}
-              isOpen={showNewGrantModal}
+        <Button
+          text="Add"
+          logo={faPlus}
+          logoPosition="left"
+          className="bg-primary-900 text-white rounded-full border-2 border-solid ml-auto text-sm lg:text-base"
+          onClick={() => setShowEditGrant(true)}
+        />
+      </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">
+          {grants.map((grant) => (
+            <GrantCard
+              key={grant.grantId}
+              grant={grant}
+              isSelected={curGrant?.grantId === grant.grantId}
+              onClick={() => setCurId(grant.grantId)}
             />
-          )}
+          ))}
+        </div>
+        <div className="flex-1 overflow-y-auto rounded-md">
+          <GrantItem grant={curGrant} />
         </div>
+      </div>) : (<div className="flex w-full h-full justify-center mt-24 text-gray-500 text-2xl">
+              No grants found.
+            </div>)}
+      <div className="hidden-features">
+        {showEditGrant && (
+          <EditGrant
+            grantToEdit={null}
+            onClose={async () => {
+              setShowEditGrant(false);
+            }}
+          />
+        )}
       </div>
-    ) : (
-      <Navigate to="/restricted" replace />
-    )
-  ) : (
-    <Navigate to="/login" replace />
+    </div>
   );
 }
 
diff --git a/frontend/src/main-page/grants/edit-grant/EditGrant.tsx b/frontend/src/main-page/grants/edit-grant/EditGrant.tsx
new file mode 100644
index 00000000..43f7592b
--- /dev/null
+++ b/frontend/src/main-page/grants/edit-grant/EditGrant.tsx
@@ -0,0 +1,223 @@
+import { useReducer, useState } from "react";
+import Button from "../../../components/Button.tsx";
+import { Grant } from "../../../../../middle-layer/types/Grant.ts";
+import { observer } from "mobx-react-lite";
+import { TDateISO } from "../../../../../backend/src/utils/date.ts";
+import { Status } from "../../../../../middle-layer/types/Status.ts";
+import Attachment from "../../../../../middle-layer/types/Attachment.ts";
+import {
+  createNewGrant,
+  reducer,
+  saveGrantEdits,
+  deleteGrant
+} from "./processGrantDataEditSave.ts";
+import EditGrantContacts from "./components/EditGrantContacts.tsx";
+import ErrorPopup from "./components/ErrorPopup.tsx";
+import EditGrantInfo from "./components/EditGrantInfo.tsx";
+import EditGrantHeader from "./components/EditGrantHeader.tsx";
+import { EditGrantDocuments } from "./components/EditGrantDocuments.tsx";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import ActionConfirmation from "../../../components/ActionConfirmation.tsx";
+
+export interface GrantFormState {
+  organization: string;
+  applicationDate: TDateISO | "";
+  applicationDeadline: TDateISO | "";
+  grantStartDate: TDateISO | "";
+  reportDates: (TDateISO | "")[];
+  timeline: number;
+  estimatedCompletionTime: number;
+  doesBcanQualify: "yes" | "no" | "";
+  isRestricted: "restricted" | "unrestricted" | "";
+  status: Status;
+  amount: number;
+  description: string;
+  attachments: Attachment[];
+  bcanPocName: string;
+  bcanPocEmail: string;
+  grantProviderPocName: string;
+  grantProviderPocEmail: string;
+}
+
+const EditGrant: React.FC<{
+  grantToEdit: Grant | null;
+  onClose: () => void;
+}> = observer(({ grantToEdit, onClose }) => {
+  // State to track if form was submitted successfully
+  const [saving, setSaving] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  const [form, dispatch] = useReducer(reducer, {
+    organization: grantToEdit?.organization ?? "",
+    applicationDate: grantToEdit?.application_date ?? "",
+    applicationDeadline: grantToEdit?.application_deadline ?? "",
+    grantStartDate: grantToEdit?.grant_start_date ?? "",
+    reportDates: grantToEdit?.report_deadlines ?? [],
+    timeline: grantToEdit?.timeline ?? 0,
+    estimatedCompletionTime: grantToEdit?.estimated_completion_time ?? 0,
+    doesBcanQualify: grantToEdit
+      ? grantToEdit.does_bcan_qualify
+        ? "yes"
+        : "no"
+      : "",
+    isRestricted: grantToEdit
+      ? grantToEdit.isRestricted
+        ? "restricted"
+        : "unrestricted"
+      : "",
+    status: grantToEdit?.status ?? Status.Inactive,
+    amount: grantToEdit?.amount ?? 0,
+    description: grantToEdit?.description ?? "",
+    attachments: grantToEdit?.attachments ?? [],
+    bcanPocName: grantToEdit?.bcan_poc?.POC_name ?? "",
+    bcanPocEmail: grantToEdit?.bcan_poc?.POC_email ?? "",
+    grantProviderPocName: grantToEdit?.grantmaker_poc?.POC_name ?? "",
+    grantProviderPocEmail: grantToEdit?.grantmaker_poc?.POC_email ?? "",
+  });
+
+  const validateInputs = (): string | null => {
+    if (!form.organization.trim()) return "Organization Name is required";
+    if (!form.status) return "Status is required";
+    if (form.amount == null || form.amount <= 0) return "Amount must be greater than 0";
+    if (!form.applicationDeadline) return "Due Date is required";
+    if (!form.grantStartDate) return "Grant Start Date is required";
+    if (!form.estimatedCompletionTime || form.estimatedCompletionTime <= 0) return "Estimated completion time must be greater than 0";
+    if (!form.doesBcanQualify) return "BCAN eligibility is required";
+    if(form.reportDates.length > 0 && !form.reportDates.every((date) => date !== "")) return "Report deadlines must have a value";
+    if (!form.timeline || form.timeline <= 0) return "Timeline must be greater than 0";
+    if (!form.bcanPocEmail) return "BCAN contact required";
+    if (!form.grantProviderPocEmail) return "Grant provider contact required";
+    if(form.attachments.length > 0 && !form.attachments.every((attachment) => attachment.url !== "")) return "Attachments must have a value";
+    return null;
+  };
+
+  const buildGrant = (): Grant => ({
+    grantId: grantToEdit?.grantId ?? 0,
+    organization: form.organization,
+    does_bcan_qualify: form.doesBcanQualify === "yes",
+    amount: form.amount ?? 0,
+    grant_start_date: form.grantStartDate as TDateISO,
+    application_deadline: form.applicationDeadline as TDateISO,
+    application_date: form.applicationDate as TDateISO,
+    status: form.status as Status,
+    report_deadlines: form.reportDates as TDateISO[],
+    timeline: form.timeline ?? 0,
+    estimated_completion_time: form.estimatedCompletionTime ?? 0,
+    description: form.description,
+    attachments: form.attachments,
+    isRestricted: form.isRestricted === "restricted",
+    bcan_poc: {
+      POC_name: form.bcanPocName,
+      POC_email: form.bcanPocEmail,
+    },
+    grantmaker_poc: {
+      POC_name: form.grantProviderPocName,
+      POC_email: form.grantProviderPocEmail,
+    },
+  });
+
+  const [_errorMessage, setErrorMessage] = useState<string>("");
+  const [showErrorPopup, setShowErrorPopup] = useState(false);
+
+  const handleDelete = async () => {
+    setShowDeleteModal(false);
+    deleteGrant(grantToEdit?.grantId)
+    onClose();
+  }
+
+  const handleSubmit = async () => {
+    setSaving(true);
+    const error = validateInputs();
+
+    if (error) {
+      setErrorMessage(error);
+      setShowErrorPopup(true);
+      setSaving(false);
+      return;
+    }
+
+    const grantData = buildGrant();
+    console.log(grantData)
+
+    const result = grantToEdit
+      ? await saveGrantEdits(grantData)
+      : await createNewGrant(grantData);
+
+    if (result.success) {
+      setSaving(false);
+      onClose();
+    } else {
+      setErrorMessage(result.error ?? "An error occurred");
+      setShowErrorPopup(true);
+      setSaving(false);
+    }
+    
+  };
+
+  return (
+    <div>
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="bg-white rounded-lg p-6 max-w-6xl w-full mx-4 max-h-[90vh] overflow-y-auto flex flex-col gap-6">
+          {/* Header with Buttons */}
+          <div className="flex justify-between items-start">
+            <EditGrantHeader form={form} dispatch={dispatch} />
+            <div className="flex gap-2">
+              <Button
+                text="Cancel"
+                className="border-2 border-grey-500"
+                onClick={onClose}
+              />
+              <Button
+                text="Save"
+                className="bg-primary-900 text-white px-3 py-1"
+                onClick={handleSubmit}
+                disabled={saving}
+              />
+            </div>
+          </div>
+
+          {/* Divider */}
+          <hr className="border-grey-400 border-t-2 rounded-full" />
+
+          {/* Description */}
+          <EditGrantInfo form={form} dispatch={dispatch} />
+
+          {/* Divider */}
+          <hr className="border-grey-400 border-t-2 rounded-full" />
+
+          {/* Contacts and Documents Section */}
+            {/* Contacts */}
+            <EditGrantContacts form={form} dispatch={dispatch} />
+            {/* Documents */}
+            <EditGrantDocuments form={form} dispatch={dispatch} />  
+
+          {/* Divider */}
+          {grantToEdit && (<div>
+          <hr className="border-grey-400 border-t-2 rounded-full" />
+          <Button text="Delete Grant" logo={faTrash} logoPosition="right" className="w-fit mt-6 ml-auto text-red bg-red-light" onClick={() => setShowDeleteModal(true)}/>
+          <ActionConfirmation
+                      isOpen={showDeleteModal}
+                      onCloseDelete={() => setShowDeleteModal(false)}
+                      onConfirmDelete={() => {
+                        handleDelete();
+                      }}
+                      title="Delete Grant"
+                      subtitle={"Are you sure you want to delete"}
+                      boldSubtitle={form.organization}
+                      warningMessage="By deleting this grant, they won't be available in the system anymore."
+                    />
+          </div>)}
+        </div>
+      </div>
+      {/* Error Popup */}
+      {showErrorPopup && (
+        <ErrorPopup
+          message={_errorMessage}
+          setShowErrorPopup={() => setShowErrorPopup(false)}
+        />
+      )}
+    </div>
+  );
+});
+
+export default EditGrant;
diff --git a/frontend/src/main-page/grants/edit-grant/components/AddAttachmentPopup.tsx b/frontend/src/main-page/grants/edit-grant/components/AddAttachmentPopup.tsx
new file mode 100644
index 00000000..7eac171f
--- /dev/null
+++ b/frontend/src/main-page/grants/edit-grant/components/AddAttachmentPopup.tsx
@@ -0,0 +1,88 @@
+import { InputField } from "../../../../sign-up";
+import Button from "../../../../components/Button";
+import { Action } from "../processGrantDataEditSave";
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+type AddPopupProps = {
+  setShowPopup: () => void;
+  dispatch: React.Dispatch<Action>;
+};
+
+const AddAttachmentPopup = observer(
+  ({ setShowPopup, dispatch }: AddPopupProps) => {
+    const [attachment, setAttachment] = useState<any>(null);
+
+    const handleAdd = () => {
+      dispatch({
+        type: "ADD_ATTACHMENT",
+        attachment: { ...attachment },
+      });
+
+      setShowPopup();
+    };
+
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="flex flex-col bg-white rounded-md px-8 py-6 max-w-xl mx-4 gap-3 w-full">
+          <div className="text-2xl font-bold text-start">Add Attachment</div>
+
+          <div className="gap-2 flex flex-col">
+            <InputField
+              id="name"
+              label="Link Title"
+              placeholder="Enter link title..."
+              required
+              onChange={(e) => {
+                setAttachment({
+                  ...attachment,
+                  attachment_name: e.target.value,
+                });
+              }}
+            />
+
+            <InputField
+              id="url"
+              label="Link"
+              type="url"
+              placeholder="Enter link URL..."
+              required
+              onChange={(e) => {
+                let value = e.target.value.trim();
+
+                if (value && !/^https?:\/\//i.test(value)) {
+                  value = `https://${value}`;
+                }
+
+                setAttachment({
+                  ...attachment,
+                  url: value,
+                });
+              }}
+            />
+          </div>
+
+          {/* ACTION BUTTONS */}
+          <div className="flex justify-end gap-2 mt-6">
+            <Button
+              text="Cancel"
+              onClick={setShowPopup}
+              className="text-black border-grey-500 text-sm"
+            />
+
+            <Button
+              text="Add"
+              onClick={handleAdd}
+              disabled={
+                !(attachment && attachment.attachment_name && attachment.url)
+              }
+              className="text-white bg-primary-900 text-sm"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+export default AddAttachmentPopup;
diff --git a/frontend/src/main-page/grants/edit-grant/components/AddContactPopup.tsx b/frontend/src/main-page/grants/edit-grant/components/AddContactPopup.tsx
new file mode 100644
index 00000000..b74830ba
--- /dev/null
+++ b/frontend/src/main-page/grants/edit-grant/components/AddContactPopup.tsx
@@ -0,0 +1,237 @@
+import { InputField } from "../../../../sign-up";
+import Button from "../../../../components/Button";
+import { Action } from "../processGrantDataEditSave";
+import { GrantFormState } from "../EditGrant";
+import { useState } from "react";
+import UserSearch from "../../../users/components/UserSearch";
+import { ProcessUserData } from "../../../../main-page/users/processUserData";
+import { observer } from "mobx-react-lite";
+import logo from "../../../../images/logo.svg";
+
+type AddPopupProps = {
+  setShowPopup: () => void;
+  dispatch: React.Dispatch<Action>;
+  form: GrantFormState;
+};
+
+type ContactType = "BCAN" | "Granter";
+
+const AddContactPopup = observer(
+  ({ setShowPopup, dispatch, form }: AddPopupProps) => {
+    const [type, setType] = useState<ContactType>(
+      form.bcanPocEmail ? "Granter" : "BCAN",
+    );
+    const [selectedUser, setSelectedUser] = useState<any | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    const { activeUsers } = ProcessUserData();
+
+    const validateUser = () => {
+      if (!selectedUser) {
+        setError("No user selected");
+        return false;
+      }
+
+      if (!selectedUser.firstName) {
+        setError("firstName");
+        return false;
+      }
+
+      if (!selectedUser.lastName) {
+        setError("lastName");
+        return false;
+      }
+
+      if (!emailRegex.test(selectedUser.email)) {
+        setError("email");
+        return false;
+      }
+
+      setError(null);
+      return true;
+    };
+
+    const handleAdd = () => {
+      if (!validateUser() || !selectedUser) return;
+
+      const name = `${selectedUser.firstName} ${selectedUser.lastName}`;
+
+      if (type === "BCAN") {
+        dispatch({
+          type: "SET_FIELD",
+          field: "bcanPocEmail",
+          value: selectedUser.email,
+        });
+        dispatch({ type: "SET_FIELD", field: "bcanPocName", value: name });
+      } else {
+        dispatch({
+          type: "SET_FIELD",
+          field: "grantProviderPocEmail",
+          value: selectedUser.email,
+        });
+        dispatch({
+          type: "SET_FIELD",
+          field: "grantProviderPocName",
+          value: name,
+        });
+      }
+
+      setShowPopup();
+    };
+
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="flex flex-col bg-white rounded-md px-8 py-6 max-w-xl mx-4 gap-3 w-full h-[35rem]">
+          <div className="text-2xl font-bold text-start">Add Contact</div>
+
+          {/* Contact Type Selector */}
+          <div className="flex gap-2">
+            {(["BCAN", "Granter"] as ContactType[]).map((t) => (
+              <button
+                key={t}
+                onClick={() => {
+                  setType(t);
+                  setSelectedUser(null);
+                  setError(null);
+                }}
+                className={`py-2 px-3 text-xs rounded-full border
+                  ${
+                    type === t
+                      ? t === "BCAN"
+                        ? "bg-primary-900 text-white"
+                        : "bg-secondary-500 text-white"
+                      : "bg-white border-grey-400"
+                  }`}
+              >
+                {t}
+              </button>
+            ))}
+          </div>
+
+          {/* BCAN USER PICKER */}
+          {type === "BCAN" && (
+            <div className="flex flex-col mt-2 gap-2">
+              <UserSearch />
+
+              <div className="flex flex-col gap-2 max-h-64 overflow-y-scroll rounded justify-items-start text-start">
+                {activeUsers.map((user) => (
+                  <div
+                    key={user.email}
+                    onClick={() => setSelectedUser(user)}
+                    className={`p-2 rounded cursor-pointer border border-grey-300
+                      ${
+                        selectedUser?.email === user.email
+                          ? "border-primary-900"
+                          : "hover:bg-grey-100"
+                      }`}
+                  >
+                    <div className="flex flex-row">
+                    <img
+                      src={user.profilePicUrl || logo}
+                      alt="Profile"
+                      className="w-10 h-10 object-cover ml-2 mr-4 rounded-full aspect-square block"
+                    />
+                    <div>
+                    <div className="font-medium">
+                      {user.firstName} {user.lastName}
+                    </div>
+
+                    <div className="text-xs text-gray-500">{user.email}</div>
+                  </div>
+                  </div>
+                  </div>
+                ))}
+              </div>
+
+              {selectedUser && (
+                <div className="text-sm text-gray-600 mt-4">
+                  Selected: {selectedUser.firstName} {selectedUser.lastName}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* GRANTER FORM */}
+          {type === "Granter" && (
+            <div className="flex flex-col gap-2 mt-2">
+              <div className="flex gap-2">
+                <InputField
+                  id="firstName"
+                  label="First Name"
+                  placeholder="Enter first name..."
+                  required
+                  error={error === "firstName"}
+                  onChange={(e) => {
+                    setSelectedUser({
+                      ...selectedUser,
+                      firstName: e.target.value,
+                    });
+                  }}
+                />
+
+                <InputField
+                  id="lastName"
+                  label="Last Name"
+                  placeholder="Enter last name..."
+                  required
+                  error={error === "lastName"}
+                  onChange={(e) => {
+                    setSelectedUser({
+                      ...selectedUser,
+                      lastName: e.target.value,
+                    });
+                  }}
+                />
+              </div>
+
+              <InputField
+                id="email"
+                label="Email"
+                type="email"
+                placeholder="Enter email address..."
+                required
+                error={error === "email"}
+                onChange={(e) => {
+                  setSelectedUser({ ...selectedUser, email: e.target.value });
+                }}
+              />
+            </div>
+          )}
+
+          {(error) && (
+            <div className="rounded-2xl bg-[#FFEEEE] px-4 py-3 text-sm font-bold text-[#CC0000]">
+              {"Please enter a valid email."}
+            </div>
+          )}
+
+          {/* ACTION BUTTONS */}
+          <div className="flex justify-end gap-2 mt-auto">
+            <Button
+              text="Cancel"
+              onClick={setShowPopup}
+              className="text-black border-grey-500 text-sm"
+            />
+
+            <Button
+              text="Add"
+              onClick={handleAdd}
+              disabled={
+                !(
+                  selectedUser &&
+                  selectedUser.firstName &&
+                  selectedUser.lastName &&
+                  selectedUser.email
+                )
+              }
+              className="text-white bg-primary-900 text-sm"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+export default AddContactPopup;
diff --git a/frontend/src/main-page/grants/edit-grant/components/EditGrantContacts.tsx b/frontend/src/main-page/grants/edit-grant/components/EditGrantContacts.tsx
new file mode 100644
index 00000000..8fe71628
--- /dev/null
+++ b/frontend/src/main-page/grants/edit-grant/components/EditGrantContacts.tsx
@@ -0,0 +1,94 @@
+import Button from "../../../../components/Button";
+import { faPlusCircle } from "@fortawesome/free-solid-svg-icons";
+import ContactCard from "../../grant-view/components/ContactCard";
+import { GrantFormState } from "../EditGrant";
+import EditGrantDeleteItem from "./EditGrantDeleteItem";
+import { Action } from "../processGrantDataEditSave";
+import { useState } from "react";
+import AddContactPopup from "./AddContactPopup";
+import { observer } from "mobx-react-lite";
+
+type EditGrantProps = {
+  form: GrantFormState;
+  dispatch: React.Dispatch<Action>;
+};
+
+const EditGrantContacts = ({ dispatch, form }: EditGrantProps) => {
+  const [showPopup, setShowPopup] = useState(false);
+
+  const onDelete = (type: "BCAN" | "Granter") => {
+    const prefix = type === "BCAN" ? "bcanPoc" : "grantProviderPoc";
+
+    dispatch({
+      type: "SET_FIELD",
+      field: `${prefix}Email`,
+      value: "",
+    });
+
+    dispatch({
+      type: "SET_FIELD",
+      field: `${prefix}Name`,
+      value: "",
+    });
+  };
+
+  return (
+    <div className="w-full h-full">
+      <label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
+        Contacts
+      </label>
+
+      <div className="grid grid-cols-2 gap-4 min-h-24 w-full lg:w-[80%] ml-2">
+        {form.bcanPocEmail !== "" && (
+          <EditGrantDeleteItem
+            position="top"
+            item={
+              <ContactCard
+                contact={{
+                  POC_name: form.bcanPocName,
+                  POC_email: form.bcanPocEmail,
+                }}
+                type="BCAN"
+              />
+            }
+            onDelete={() => onDelete("BCAN")}
+          />
+        )}
+        {!(form.bcanPocEmail && form.grantProviderPocEmail) && (
+          <Button
+            text=""
+            logoPosition="center"
+            className="rounded-md border-grey-400 text-primary-900 text-2xl min-h-24 w-full"
+            logo={faPlusCircle}
+            onClick={() => setShowPopup(true)}
+          />
+        )}
+        {form.grantProviderPocEmail !== "" && (
+          <EditGrantDeleteItem
+            position="top"
+            item={
+              <ContactCard
+                contact={{
+                  POC_name: form.grantProviderPocName,
+                  POC_email: form.grantProviderPocEmail,
+                }}
+                type="Granter"
+              />
+            }
+            onDelete={() => onDelete("Granter")}
+          />
+        )}
+
+        {showPopup && (
+          <AddContactPopup
+            dispatch={dispatch}
+            form={form}
+            setShowPopup={() => setShowPopup(false)}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default observer(EditGrantContacts);
\ No newline at end of file
diff --git a/frontend/src/main-page/grants/edit-grant/components/EditGrantDeleteItem.tsx b/frontend/src/main-page/grants/edit-grant/components/EditGrantDeleteItem.tsx
new file mode 100644
index 00000000..8d80a118
--- /dev/null
+++ b/frontend/src/main-page/grants/edit-grant/components/EditGrantDeleteItem.tsx
@@ -0,0 +1,25 @@
+import { FaXmark } from "react-icons/fa6";
+
+type EditGrantDeleteItemProps = {
+  item: React.ReactNode;
+  onDelete: () => void;
+  position?: 'middle' | 'top'
+};
+
+export default function EditGrantDeleteItem({
+  item,
+  onDelete,
+  position = "middle",
+}: EditGrantDeleteItemProps) {
+  return (
+    <div className="relative">
+      <div
+        className={`rounded-full bg-red hover:bg-red-light w-fit p-1 hover:cursor-pointer absolute ${position === "middle" ? "-left-2 bottom-2" : "-left-2"}`}
+        onClick={onDelete}
+      >
+        <FaXmark className="text-white text-xs" />
+      </div>
+      {item}
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/grants/edit-grant/components/EditGrantDocuments.tsx b/frontend/src/main-page/grants/edit-grant/components/EditGrantDocuments.tsx
new file mode 100644
index 00000000..059221da
--- /dev/null
+++ b/frontend/src/main-page/grants/edit-grant/components/EditGrantDocuments.tsx
@@ -0,0 +1,60 @@
+import Button from "../../../../components/Button";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { GrantFormState } from "../EditGrant";
+import { Action } from "../processGrantDataEditSave";
+import EditGrantDeleteItem from "./EditGrantDeleteItem";
+import { useState } from "react";
+import AddAttachmentPopup from "./AddAttachmentPopup";
+
+type EditGrantProps = {
+  form: GrantFormState;
+  dispatch: React.Dispatch<Action>;
+};
+
+export const EditGrantDocuments = ({ dispatch, form }: EditGrantProps) => {
+
+const [showPopup, setShowPopup] = useState<boolean>(false);
+
+  return (
+    <div className="w-full">
+      <label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
+        Documents
+      </label>
+      <div className="columns-2 xl:columns-4 gap-6 space-y-2 lg:w-[90%] ml-2">
+        {form.attachments.map((attachment, index) => (
+          <EditGrantDeleteItem
+            key={index}
+            item={
+              <div className="flex flex-col">
+                <a
+                  href={attachment.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-full h-[2.25rem] px-5 flex items-center border border-grey-300 rounded-md text-secondary underline truncate"
+                >
+                  {attachment.attachment_name || attachment.url}
+                </a>
+              </div>
+            }
+            onDelete={() =>
+              dispatch({ type: "REMOVE_ATTACHMENT", index: index })
+            }
+          />
+        ))}
+      </div>
+      <Button
+        logo={faPlus}
+        logoPosition="left"
+        text="Add"
+        className="text-white bg-primary-900 text-xs mt-2"
+        onClick={() => setShowPopup(true)}
+      />
+      {showPopup && (
+          <AddAttachmentPopup
+            dispatch={dispatch}
+            setShowPopup={() => setShowPopup(false)}
+          />
+        )}
+    </div>
+  );
+};
diff --git a/frontend/src/main-page/grants/edit-grant/components/EditGrantHeader.tsx b/frontend/src/main-page/grants/edit-grant/components/EditGrantHeader.tsx
new file mode 100644
index 00000000..4926976e
--- /dev/null
+++ b/frontend/src/main-page/grants/edit-grant/components/EditGrantHeader.tsx
@@ -0,0 +1,59 @@
+import { GrantFormState } from "../EditGrant";
+import { Action } from "../processGrantDataEditSave";
+import StatusIndicator from "../../grant-view/components/StatusIndicator";
+import { Status } from "../../../../../../middle-layer/types/Status";
+
+type EditGrantProps = {
+  form: GrantFormState;
+  dispatch: React.Dispatch<Action>;
+};
+
+const buttonOptions = [
+  { id: Status.Active, label: "Active" },
+  { id: Status.Pending, label: "Pending" },
+  { id: Status.Potential, label: "Potential" },
+  { id: Status.Rejected, label: "Rejected" },
+  { id: Status.Inactive, label: "Inactive" },
+];
+
+export default function EditGrantHeader({ form, dispatch }: EditGrantProps) {
+  return (
+    <div className="w-full">
+      <div className="w-full pr-4">
+        <input
+          className="block w-full  lg:w-[80%] text-gray-700 text-2xl border-2 bg-white border-grey-300 rounded placeholder:text-gray-700 px-3 py-2 font-bold resize-none"
+          placeholder="Enter grant name..."
+          value={form.organization}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") e.preventDefault();
+          }}
+          onChange={(e) =>
+            dispatch({
+              type: "SET_FIELD",
+              field: "organization",
+              value: e.target.value,
+            })
+          }
+        />
+      </div>
+      {/* 5 Horizontal Buttons */}
+      <div className="flex flex-row flex-wrap gap-2 mt-3">
+        {buttonOptions.map((btn) => (
+          <div key={btn.id}>
+            <StatusIndicator
+              curStatus={btn.id}
+              active={btn.id === form.status}
+              onClick={() =>
+                dispatch({
+                  type: "SET_FIELD",
+                  field: "status",
+                  value: btn.id,
+                })
+              }
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/grants/edit-grant/components/EditGrantInfo.tsx b/frontend/src/main-page/grants/edit-grant/components/EditGrantInfo.tsx
new file mode 100644
index 00000000..3e3360c7
--- /dev/null
+++ b/frontend/src/main-page/grants/edit-grant/components/EditGrantInfo.tsx
@@ -0,0 +1,243 @@
+import Button from "../../../../components/Button";
+import { GrantFormState } from "../EditGrant";
+import { TDateISO } from "../../../../../../backend/src/utils/date";
+import { Action } from "../processGrantDataEditSave";
+import {
+  faCheckSquare,
+  faPlus,
+  faSquareXmark,
+} from "@fortawesome/free-solid-svg-icons";
+import EditGrantDeleteItem from "./EditGrantDeleteItem";
+
+type EditGrantProps = {
+  form: GrantFormState;
+  dispatch: React.Dispatch<Action>;
+};
+
+export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
+  return (
+    <div className="w-full">
+      <div className="mb-6">
+        <label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
+          Description
+        </label>
+        <textarea
+          className="h-32 block w-full text-gray-700 border bg-white border-grey-300 rounded placeholder:text-gray-700 p-2"
+          placeholder="Enter grant description..."
+          value={form.description}
+          onChange={(e) =>
+            dispatch({
+              type: "SET_FIELD",
+              field: "description",
+              value: e.target.value,
+            })
+          }
+        />
+      </div>
+      <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 w-full gap-4">
+        {/* Left Column */}
+        <div className="flex flex-col w-full gap-6 items-start text-left col-span-1">
+          {/* Amount */}
+          <div className="w-3/4">
+            <label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
+              Amount ($)
+            </label>
+            <input
+              type="number"
+              min={0}
+              className="appearance-none block w-full h-[2.25rem] text-gray-700 placeholder:text-gray-700 border border-grey-300 rounded-md py-2 px-4"
+              value={form.amount}
+              onChange={(e) =>
+                dispatch({
+                  type: "SET_FIELD",
+                  field: "amount",
+                  value: e.target.valueAsNumber,
+                })
+              }
+            />
+          </div>
+
+          {/* BCAN Eligible */}
+          <div className="w-fit">
+            <label className="flex text-gray-700 sm:text-sm lg:text-base mb-1 whitespace-nowrap">
+              BCAN Eligible?
+            </label>
+            <div className="flex flex-col gap-1">
+              <Button
+                logo={faCheckSquare}
+                logoPosition="left"
+                text="Yes"
+                className={`text-gray-700 px-3 py-1 text-sm border-2 hover:border-green active:bg-white ${form.doesBcanQualify === "yes" ? "text-green border-green" : "border-grey-300 text-grey-700"}`}
+                onClick={() =>
+                  dispatch({
+                    type: "SET_FIELD",
+                    field: "doesBcanQualify",
+                    value: "yes",
+                  })
+                }
+              />
+              <Button
+                logo={faSquareXmark}
+                logoPosition="left"
+                text="No"
+                className={`text-gray-700 px-3 py-1 text-sm border-2 hover:border-red active:bg-white ${form.doesBcanQualify === "no" ? "text-red border-red" : "border-grey-300 text-grey-700"}`}
+                onClick={() =>
+                  dispatch({
+                    type: "SET_FIELD",
+                    field: "doesBcanQualify",
+                    value: "no",
+                  })
+                }
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Center Column - Dates */}
+        <div className="flex flex-col w-full gap-6 items-start text-left col-span-1">
+          {/* Due Date */}
+          <div className="">
+            <label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
+              Due Date
+            </label>
+            <input
+              type="date"
+              className="appearance-none block w-full h-[2.25rem] text-gray-700 placeholder:text-gray-700 border border-grey-300 rounded-md py-2 px-4"
+              value={form.applicationDeadline}
+              onChange={(e) =>
+                dispatch({
+                  type: "SET_FIELD",
+                  field: "applicationDeadline",
+                  value: e.target.value as TDateISO,
+                })
+              }
+            />
+          </div>
+          {/* Application Date */}
+          <div className="">
+            <label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
+              Application Date
+            </label>
+            <input
+              type="date"
+              className="appearance-none block w-full h-[2.25rem] text-gray-700 placeholder:text-gray-700 border border-grey-300 rounded-md py-2 px-4"
+              value={form.applicationDate}
+              onChange={(e) =>
+                dispatch({
+                  type: "SET_FIELD",
+                  field: "applicationDate",
+                  value: e.target.value as TDateISO,
+                })
+              }
+            />
+          </div>
+        </div>
+        {/* Right Column */}
+        <div className="flex flex-col w-full gap-6 items-start text-left col-span-1">
+          {/* Grant Start Date */}
+          <div>
+            <label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
+              Grant Start Date
+            </label>
+            <input
+              type="date"
+              className="appearance-none block w-full h-[2.25rem] text-gray-700 placeholder:text-gray-700 border border-grey-300 rounded-md py-2 px-4"
+              value={form.grantStartDate}
+              onChange={(e) =>
+                dispatch({
+                  type: "SET_FIELD",
+                  field: "grantStartDate",
+                  value: e.target.value as TDateISO,
+                })
+              }
+            />
+          </div>
+
+          {/* Report Deadlines */}
+          <div className="">
+            <label className="flex text-gray-700 sm:text-sm lg:text-base mb-1">
+              Report Deadlines
+            </label>
+            <div className="flex flex-col gap-2">
+              <div className="ml-2 flex flex-col gap-2">
+              {form.reportDates.map((date, index) => (
+                <EditGrantDeleteItem
+                  key={index}
+                  item={
+                    <input
+                      type="date"
+                      value={date}
+                      onChange={(e) =>
+                        dispatch({
+                          type: "UPDATE_REPORT_DATE",
+                          index: index,
+                          value: e.target.value as TDateISO,
+                        })
+                      }
+                      className="appearance-none block w-full h-[2.25rem] text-gray-700 placeholder:text-gray-700 border border-grey-300 rounded-md py-2 px-4 "
+                    />
+                  }
+                  onDelete={() =>
+                    dispatch({ type: "REMOVE_REPORT_DATE", index: index })
+                  }
+                />
+              ))}
+              </div>
+              <Button
+                      logo={faPlus}
+                      logoPosition="left"
+                      text="Add"
+                      className="text-white bg-primary-900 text-xs w-fit"
+                      onClick={() =>
+                        dispatch({
+                          type: "ADD_REPORT_DATE",
+                        })
+                      }
+                    />
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col w-full gap-6 items-start text-left col-span-1">
+          {/* Timeline */}
+          <div className="">
+            <label className="flex text-gray-700 sm:text-sm lg:text-base mb-1 ">
+              Timeline (years)
+            </label>
+            <input
+              type="number"
+              min="0"
+              className="appearance-none block w-full h-[2.25rem] text-gray-700 placeholder:text-gray-700 border border-grey-300 rounded-md py-2 px-4"
+              value={form.timeline}
+              onChange={(e) =>
+                dispatch({
+                  type: "SET_FIELD",
+                  field: "timeline",
+                  value: e.target.valueAsNumber,
+                })
+              }
+            />
+          </div>
+          {/* Estimated Completion Time */}
+          <div className="">
+            <label className="flex text-gray-700 sm:text-sm lg:text-base mb-1 whitespace-nowrap">
+              Estimated Completion Time (hours)
+            </label>
+            <input
+              type="number"
+              min="0"
+              className="appearance-none block h-[2.25rem] text-gray-700 placeholder:text-gray-700 border border-grey-300 rounded-md py-2 px-4"
+              value={form.estimatedCompletionTime}
+              onChange={(e) =>
+                dispatch({
+                  type: "SET_FIELD",
+                  field: "estimatedCompletionTime",
+                  value: e.target.valueAsNumber,
+                })
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/grants/edit-grant/components/ErrorPopup.tsx b/frontend/src/main-page/grants/edit-grant/components/ErrorPopup.tsx
new file mode 100644
index 00000000..03d0f3e3
--- /dev/null
+++ b/frontend/src/main-page/grants/edit-grant/components/ErrorPopup.tsx
@@ -0,0 +1,25 @@
+import Button from "../../../../components/Button";
+
+type ErrorPopupProps = {
+  message: string;
+  setShowErrorPopup: () => void;
+};
+
+export default function ErrorPopup({
+  message,
+  setShowErrorPopup,
+}: ErrorPopupProps) {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center justify-items-center z-50">
+      <div className="bg-white rounded-md px-12 py-8 max-w-md mx-4 grid place-items-center">
+        <h3 className="text-xl font-bold mb-2">Error</h3>
+        <p className="mb-4">{message}</p>
+        <Button
+          text="Close"
+          onClick={setShowErrorPopup}
+          className="text-white bg-primary-900"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/grants/edit-grant/processGrantDataEditSave.ts b/frontend/src/main-page/grants/edit-grant/processGrantDataEditSave.ts
new file mode 100644
index 00000000..81b956b7
--- /dev/null
+++ b/frontend/src/main-page/grants/edit-grant/processGrantDataEditSave.ts
@@ -0,0 +1,153 @@
+import Attachment from "../../../../../middle-layer/types/Attachment.ts";
+import { Grant } from "../../../../../middle-layer/types/Grant.ts";
+import { api } from "../../../api.ts";
+import { GrantFormState } from "./EditGrant.tsx";
+import { fetchGrants } from "../filter-bar/processGrantData.ts";
+
+// save a new grant
+export const createNewGrant = async (newGrant: Grant) => {
+  try {
+    const response = await api("/grant/new-grant", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(newGrant),
+    });
+
+    if (response.ok) {
+      await fetchGrants();
+      return { success: true };
+    } else {
+      const errorData = await response.json();
+      throw new Error(errorData.message || "Failed to create grant");
+    }
+  } catch (error) {
+    console.error("Error creating grant:", error);
+    console.log(newGrant);
+    console.log(newGrant.attachments);
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : "Server error. Please try again.",
+    };
+  }
+};
+
+export const saveGrantEdits = async (updatedGrant: Grant) => {
+  try {
+    const response = await api("/grant/save", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(updatedGrant),
+    });
+
+    if (response.ok) {
+      await fetchGrants();
+      return { success: true };
+    } else {
+      const errorData = await response.json();
+      throw new Error(errorData.message || "Failed to update grant");
+    }
+  } catch (error) {
+    console.error("Error updating grant:", error);
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : "Server error. Please try again.",
+    };
+  }
+};
+
+export const deleteGrant = async (grantId: any) => {
+  
+        try {
+          const response = await api(`/grant/${grantId}`, {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          });
+  
+          console.log("Response status:", response.status);
+          console.log("Response ok:", response.ok);
+  
+          if (response.ok) {
+            console.log("✅ Grant deleted successfully");
+            // Refetch grants to update UI
+            await fetchGrants();
+          } else {
+            // Get error details
+            const errorText = await response.text();
+            console.error("❌ Error response:", errorText);
+  
+            let errorData;
+            try {
+              errorData = JSON.parse(errorText);
+              console.error("Parsed error:", errorData);
+            } catch {
+              console.error("Could not parse error response");
+            }
+          }
+        } catch (err) {
+          console.error("=== EXCEPTION CAUGHT ===");
+          console.error(
+            "Error type:",
+            err instanceof Error ? "Error" : typeof err
+          );
+          console.error(
+            "Error message:",
+            err instanceof Error ? err.message : err
+          );
+          console.error("Full error:", err);
+        }
+      };
+
+export type Action =
+  | { type: "SET_FIELD"; field: keyof GrantFormState; value: any }
+  | { type: "ADD_REPORT_DATE" }
+  | { type: "UPDATE_REPORT_DATE"; index: number; value: any }
+  | { type: "REMOVE_REPORT_DATE"; index: number }
+  | { type: "ADD_ATTACHMENT"; attachment: Attachment }
+  | { type: "REMOVE_ATTACHMENT"; index: number };
+
+export function reducer(state: GrantFormState, action: Action): GrantFormState {
+  switch (action.type) {
+    case "SET_FIELD":
+      return { ...state, [action.field]: action.value };
+
+    case "ADD_REPORT_DATE":
+      return { ...state, reportDates: [...state.reportDates, ""] };
+
+    case "UPDATE_REPORT_DATE":
+      return {
+        ...state,
+        reportDates: state.reportDates.map((date, i) =>
+  i === action.index ? action.value : date
+),
+      };
+
+    case "REMOVE_REPORT_DATE":
+      return {
+        ...state,
+        reportDates: state.reportDates.filter((_, i) => i !== action.index),
+      };
+
+    case "ADD_ATTACHMENT":
+      return {
+        ...state,
+        attachments: [...state.attachments, action.attachment],
+      };
+
+    case "REMOVE_ATTACHMENT":
+      return {
+        ...state,
+        attachments: state.attachments.filter((_, i) => i !== action.index),
+      };
+
+    default:
+      return state;
+  }
+}
diff --git a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
index b0729c35..8a9c6c62 100644
--- a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
+++ b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
@@ -10,7 +10,7 @@ import {
 } from "../../../external/bcanSatchel/actions.ts";
 import { observer } from "mobx-react-lite";
 import { getAppStore } from "../../../external/bcanSatchel/store.ts";
-import StatusDropdown from "./StatusDropdown";
+import StatusDropdown from "./components/StatusDropdown.tsx";
 import Button from "../../../components/Button";
 import { faChevronDown, faChevronUp, faSort, faSortUp, faSortDown } from "@fortawesome/free-solid-svg-icons";
 import FilterCard from "./components/FilterCard";
@@ -176,14 +176,14 @@ const FilterBar: React.FC = observer(() => {
         <Button
           text="My Grants"
           onClick={handleMyGrantsClick}
-          className={`bg-white text-base whitespace-nowrap border-b-4 ${
+          className={`bg-white text-sm lg:text-base whitespace-nowrap border-b-4 ${
             emailFilter ? activeButtonClass : inactiveButtonClass
           }`}
         />
         <Button
           text="BCAN Eligible"
           onClick={handleEligibleClick}
-          className={`bg-white text-base whitespace-nowrap ${
+          className={`bg-white text-sm lg:text-base whitespace-nowrap ${
             eligibleOnly ? activeButtonClass : inactiveButtonClass
           }`}
         />
@@ -192,7 +192,7 @@ const FilterBar: React.FC = observer(() => {
           onClick={handleAlphabeticalClick}
           logo={getSortIcon("organization")}
           logoPosition="left"
-          className={`bg-white text-base whitespace-nowrap ${
+          className={`bg-white text-sm lg:text-base whitespace-nowrap ${
             sort?.header === "organization"
               ? activeButtonClass
               : inactiveButtonClass
@@ -208,7 +208,7 @@ const FilterBar: React.FC = observer(() => {
             }}
             logo={getSortIcon("application_deadline")}
             logoPosition="left"
-            className={`bg-white text-base whitespace-nowrap ${
+            className={`bg-white text-sm lg:text-base whitespace-nowrap ${
               dueDateActive ? activeButtonClass : inactiveButtonClass
             }`}
           />
@@ -243,7 +243,7 @@ const FilterBar: React.FC = observer(() => {
             }}
             logo={getSortIcon("amount")}
             logoPosition="left"
-            className={`bg-white text-base whitespace-nowrap ${
+            className={`bg-white text-sm lg:text-base whitespace-nowrap ${
               amountActive ? activeButtonClass : inactiveButtonClass
             }`}
           />
@@ -278,7 +278,7 @@ const FilterBar: React.FC = observer(() => {
             }}
             logo={showStatusDropdown ? faChevronUp : faChevronDown}
             logoPosition="right"
-            className={`bg-white text-base whitespace-nowrap ${
+            className={`bg-white text-sm lg:text-base whitespace-nowrap ${
               showStatusDropdown || selectedStatus ? activeButtonClass : inactiveButtonClass
             }`}
           />
diff --git a/frontend/src/main-page/grants/filter-bar/StatusContext.tsx b/frontend/src/main-page/grants/filter-bar/StatusContext.tsx
deleted file mode 100644
index 3e768bb8..00000000
--- a/frontend/src/main-page/grants/filter-bar/StatusContext.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// will later be renamed to "GrantContext" when front/backend schemas are aligned
-import { createContext } from "react";
-
-// Define the shape of the context
-interface StatusContextType {
-    curStatus: string;
-    setCurStatus: React.Dispatch<React.SetStateAction<string>>;
-}
-
-
-export const StatusContext = createContext<StatusContextType>({
-    curStatus: "",
-    setCurStatus: () => {}, // No-op function as default
-});
\ No newline at end of file
diff --git a/frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx b/frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx
deleted file mode 100644
index eac6c779..00000000
--- a/frontend/src/main-page/grants/filter-bar/StatusDropdown.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-
-import React from "react";
-import {
-  Status,
-  getColorStatus,
-} from "../../../../../middle-layer/types/Status.ts";
-import { observer } from "mobx-react-lite";
-
-interface StatusDropdownProps {
-  selected: Status | null;
-  onSelect: (status: Status) => void;
-}
-
-const StatusDropdown: React.FC<StatusDropdownProps> = observer(({ selected, onSelect }) => {
-  const statuses = Object.values(Status);
-
-  return (
-    <div className="absolute left-0 top-full mt-2 bg-white border border-primary-900 rounded-md p-4 z-50 shadow-lg min-w-[25rem] overflow-x-auto">
-      <div className="grid grid-cols-3 gap-2">
-        {statuses.map((status) => (
-          <label
-            key={status}
-            htmlFor={`status-filter-${String(status)}`}
-            className="flex items-center gap-2 cursor-pointer"
-          >
-            <input
-              id={`status-filter-${String(status)}`}
-              type="checkbox"
-              checked={selected === status}
-              onChange={() => onSelect(status)}
-              aria-label={`Filter by ${String(status)} status`}
-              className="cursor-pointer w-4 h-4 flex-shrink-0"
-            />
-            <span
-              className="px-3 py-1 rounded-full text-sm font-medium"
-              style={{
-                backgroundColor: getColorStatus(status, "light"),
-                color: getColorStatus(status, "dark"),
-              }}
-            >
-              {status}
-            </span>
-          </label>
-        ))}
-      </div>
-    </div>
-  );
-});
-
-export default StatusDropdown;
diff --git a/frontend/src/main-page/grants/filter-bar/components/StatusDropdown.tsx b/frontend/src/main-page/grants/filter-bar/components/StatusDropdown.tsx
index 137f6dbe..27456bc9 100644
--- a/frontend/src/main-page/grants/filter-bar/components/StatusDropdown.tsx
+++ b/frontend/src/main-page/grants/filter-bar/components/StatusDropdown.tsx
@@ -14,21 +14,21 @@ interface StatusDropdownProps {
 const StatusDropdown: React.FC<StatusDropdownProps> = observer(({ selected, onSelect }) => {
   const statuses = Object.values(Status);
 
-  
-
   return (
     <div className="absolute left-0 top-full mt-2 bg-white border border-primary-900 rounded-md p-4 z-50 shadow-lg min-w-[25rem] overflow-x-auto">
       <div className="grid grid-cols-3 gap-2">
         {statuses.map((status) => (
-          <div
+          <label
             key={status}
+            htmlFor={`status-filter-${String(status)}`}
             className="flex items-center gap-2 cursor-pointer"
-            onClick={() => onSelect(status)}
           >
             <input
+              id={`status-filter-${String(status)}`}
               type="checkbox"
               checked={selected === status}
               onChange={() => onSelect(status)}
+              aria-label={`Filter by ${String(status)} status`}
               className="cursor-pointer w-4 h-4 flex-shrink-0"
             />
             <span
@@ -40,7 +40,7 @@ const StatusDropdown: React.FC<StatusDropdownProps> = observer(({ selected, onSe
             >
               {status}
             </span>
-          </div>
+          </label>
         ))}
       </div>
     </div>
diff --git a/frontend/src/main-page/grants/grant-list/GrantItem.tsx b/frontend/src/main-page/grants/grant-list/GrantItem.tsx
deleted file mode 100644
index f1a819e7..00000000
--- a/frontend/src/main-page/grants/grant-list/GrantItem.tsx
+++ /dev/null
@@ -1,639 +0,0 @@
-import React, { useEffect, useState } from "react";
-import "../styles/GrantItem.css";
-import StatusIndicator from "./StatusIndicator";
-import { FaChevronDown, FaChevronRight } from "react-icons/fa";
-import { Grant } from "../../../../../middle-layer/types/Grant";
-// import { DoesBcanQualifyText } from "../../../translations/general";
-import { api } from "../../../api";
-import { MdOutlinePerson2 } from "react-icons/md";
-import Attachment from "../../../../../middle-layer/types/Attachment";
-import NewGrantModal from "../new-grant/NewGrantModal";
-import { CostBenefitAnalysis } from "../grant-view/CostBenefitAnalysis";
-import ActionConfirmation from "../../../custom/ActionConfirmation";
-import { observer } from "mobx-react-lite";
-import { fetchGrants } from "../filter-bar/processGrantData";
-
-interface GrantItemProps {
-  grant: Grant;
-  defaultExpanded?: boolean;
-}
-
-const GrantItem: React.FC<GrantItemProps> = observer(
-  ({ grant, defaultExpanded = false }) => {
-    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-    const [isEditing, setIsEditing] = useState(false);
-    const [curGrant, setCurGrant] = useState(grant);
-    const [showNewGrantModal, setShowNewGrantModal] = useState(false);
-    const [wasGrantSubmitted, setWasGrantSubmitted] = useState(false);
-    const [showDeleteModal, setShowDeleteModal] = useState(false);
-
-    const toggleExpand = () => {
-      // Toggle edit mode off now that we are leaving this specific grant in view
-      if (isExpanded) {
-        toggleEdit();
-      }
-      setIsExpanded(!isExpanded);
-    };
-
-    // Sync isExpanded with the defaultExpanded prop.
-    useEffect(() => {
-      setIsExpanded(defaultExpanded);
-    }, [defaultExpanded]);
-
-    // If the NewGrantModal has been closed and a new grant submitted (or existing grant edited),
-    // fetch the grant at this index so that all new changes are immediately reflected
-    useEffect(() => {
-      const updateGrant = async () => {
-        if (!showNewGrantModal && wasGrantSubmitted) {
-          try {
-            const response = await api(`/grant/${grant.grantId}`, {
-              method: "GET",
-              headers: {
-                "Content-Type": "application/json",
-              },
-            });
-
-            if (response.ok) {
-              const updatedGrant = await response.json();
-              setCurGrant(updatedGrant);
-              console.log("✅ Grant refreshed:", updatedGrant);
-            } else {
-              console.error("❌ Failed to fetch updated grant");
-            }
-          } catch (err) {
-            console.error("Error fetching updated grant:", err);
-          }
-          setWasGrantSubmitted(false);
-        }
-      };
-
-      updateGrant();
-    }, [showNewGrantModal, wasGrantSubmitted]);
-
-    const toggleEdit = async () => {
-      if (isEditing) {
-        // Save changes when exiting edit mode.
-        try {
-          const response = await api("/grant/save", {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(curGrant),
-          });
-          const result = await response.json();
-          console.log(result);
-        } catch (err) {
-          console.error("Error saving data:", err);
-        }
-      }
-      setIsEditing(!isEditing);
-    };
-
-    const deleteGrant = async () => {
-      setShowDeleteModal(false);
-
-      console.log("=== DELETE GRANT DEBUG ===");
-      console.log("Current grant:", curGrant);
-      console.log("Grant ID:", curGrant.grantId);
-      console.log("Organization:", curGrant.organization);
-      console.log("Full URL:", `/grant/${curGrant.grantId}`);
-
-      try {
-        const response = await api(`/grant/${curGrant.grantId}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-
-        console.log("Response status:", response.status);
-        console.log("Response ok:", response.ok);
-
-        if (response.ok) {
-          console.log("✅ Grant deleted successfully");
-          // Refetch grants to update UI
-          await fetchGrants();
-        } else {
-          // Get error details
-          const errorText = await response.text();
-          console.error("❌ Error response:", errorText);
-
-          let errorData;
-          try {
-            errorData = JSON.parse(errorText);
-            console.error("Parsed error:", errorData);
-          } catch {
-            console.error("Could not parse error response");
-          }
-        }
-      } catch (err) {
-        console.error("=== EXCEPTION CAUGHT ===");
-        console.error(
-          "Error type:",
-          err instanceof Error ? "Error" : typeof err
-        );
-        console.error(
-          "Error message:",
-          err instanceof Error ? err.message : err
-        );
-        console.error("Full error:", err);
-      }
-    };
-
-    function formatDate(isoString: string): string {
-      const date = new Date(isoString);
-      const month = String(date.getMonth() + 1).padStart(2, "0");
-      const day = String(date.getDate()).padStart(2, "0");
-      const year = date.getFullYear();
-      return `${month}/${day}/${year}`;
-    }
-
-    function formatCurrency(amount: number): string {
-      const formattedCurrency = new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: "USD",
-        maximumFractionDigits: 0,
-      }).format(amount);
-      return formattedCurrency;
-    }
-
-    return (
-      <div className="grant-item-wrapper w-fit">
-        <div
-          className={`grant-summary p-4 ${
-            isExpanded ? "expanded rounded-b-none" : ""
-          } grid grid-cols-5 items-center`}
-          onClick={toggleExpand}
-        >
-          <li className="font-bold text-left flex items-center">
-            {isExpanded ? <FaChevronDown /> : <FaChevronRight />}
-            <span className="ml-2 truncate">{curGrant.organization}</span>
-          </li>
-          <li className="application-date">
-            {curGrant.application_deadline
-              ? new Date(curGrant.application_deadline).toLocaleDateString()
-              : "No date"}
-          </li>
-          <li className="amount">{formatCurrency(curGrant.amount)}</li>
-          {/* <li className="does-bcan-qualify px-8 w-full" >
-            {curGrant.does_bcan_qualify ? (
-              <RingButton
-                text={DoesBcanQualifyText.Yes}
-                color={ButtonColorOption.GREEN}
-              />
-            ) : (
-              <RingButton
-                text={DoesBcanQualifyText.No}
-                color={ButtonColorOption.GRAY}
-              />
-            )}
-          </li> */}
-          <li className="flex justify-center items-center text-center">
-            <StatusIndicator curStatus={curGrant.status} />
-          </li>
-        </div>
-
-        <div className={`grant-body bg-white ${isExpanded ? "expanded" : ""}`}>
-          {isExpanded && (
-            <div>
-              <div className="m-4">
-                {/*div for the two columns above description*/}
-                <div className="flex">
-                  {/*Left column */}
-                  <div className="w-1/2">
-                    {/*Organization name (only div in the first row) */}
-                    <div className="text-left mb-6 text-lg">
-                      <label className="font-semibold text-left text-lg">
-                        {" "}
-                        Organization Name
-                      </label>
-                      <div className="text-left ">{curGrant.organization}</div>
-                    </div>
-
-                    {/*Col of gray labels + col of report deadliens (below org name) */}
-                    <div className="flex justify-between ">
-                      {/*Left column of gray labels */}
-                      <div className="w-1/2 mr-2">
-                        {/*Application date and grant start date row*/}
-                        <div className="flex space-x-4 w-full">
-                          {/*Application date*/}
-                          <div className="w-1/2 mb-3">
-                            <label
-                              className="flex block tracking-wide text-gray-700 font-bold mb-2 text-left text-sm lg:text-wrap xl:text-nowrap"
-                              htmlFor="grid-city"
-                            >
-                              Application Date
-                            </label>
-                            <div
-                              className="bg-grey-400 text-black h-9 flex items-center justify-center w-full rounded-full px-4"
-                            >
-                              {formatDate(curGrant.application_deadline)}
-                            </div>
-                          </div>
-                          {/*Grant Start Date */}
-                          <div className=" w-1/2">
-                            <label
-                              className="flex block tracking-wide text-gray-700 font-bold mb-2 text-left text-sm"
-                              htmlFor="grid-state"
-                            >
-                              Grant Start Date
-                            </label>
-                            <div
-                              className={`bg-grey-400 text-black h-9 flex items-center justify-center w-full rounded-full px-4 ${
-                                curGrant.grant_start_date ? "normal" : "italic"
-                              }`}
-                            >
-                              {curGrant.grant_start_date
-                                ? formatDate(curGrant.grant_start_date)
-                                : "-------"}
-                            </div>
-                          </div>
-
-                          {/*End application date and grant start date row */}
-                        </div>
-
-                        {/*Estimated completion time row*/}
-                        <div className="w-full justify-center">
-                          <label
-                            className="mt-2 flex block tracking-wide text-gray-700 font-bold mb-2 text-left  sm:text-sm lg:text-base"
-                            htmlFor="grid-state"
-                          >
-                            Estimated Completion Time
-                          </label>
-                          <div
-                            className={`text-left sm:text-sm lg:text-base h-10 flex w-2/3 text-black ${
-                              curGrant.estimated_completion_time ? "normal" : "italic"
-                            }`}
-                          >
-                            {curGrant.estimated_completion_time
-                              ? curGrant.estimated_completion_time + " hours"
-                              : "No est completion time"}
-                          </div>
-                        </div>
-                        {/*Timeline and Amount row*/}
-                        <div className="flex space-x-4 mt-5 w-full">
-                          {/*Timeline*/}
-                          <div className="w-full">
-                            <label
-                              className=" sm:text-sm lg:text-base flex block tracking-wide text-gray-700 font-bold mb-2"
-                              htmlFor="grid-city"
-                            >
-                              Timeline
-                            </label>
-                            <div
-                              className={`text-left sm:text-sm lg:text-base h-10 w-full text-black ${
-                                curGrant.timeline ? "" : "italic"
-                              }`}
-                            >
-                              {curGrant.timeline
-                                ? curGrant.timeline + " years"
-                                : "No timeline"}
-                            </div>
-                          </div>
-                          {/*Amount */}
-                          <div className=" w-full">
-                            <label
-                              className=" sm:text-sm lg:text-base flex block tracking-wide text-gray-700 font-bold mb-2"
-                              htmlFor="grid-state"
-                            >
-                              Amount
-                            </label>
-                            <div
-                              className="text-left sm:text-sm lg:text-base h-10 w-full text-black"
-                            >
-                              {formatCurrency(curGrant.amount)}
-                            </div>
-                          </div>
-                          {/*End timeline and amount row */}
-                        </div>
-
-                        {/*End column of gray labels */}
-                      </div>
-
-                      {/*Report deadlines div*/}
-                      <div className="w-1/2 h-full pl-5">
-                        <label className="flex block tracking-wide text-gray-700 font-bold mb-2 text-left  sm:text-sm lg:text-base">
-                          Report Deadlines
-                        </label>
-                        <div
-                          className="p-2 rounded-md h-[13.5rem] w-4/5 overflow-auto grip bg-primary-800 border border-black"
-                        >
-                          {/*Map each available report deadline to a div label
-                    If no deadlines, add "No deadlines" text */}
-                          {curGrant.report_deadlines &&
-                          curGrant.report_deadlines.length > 0 ? (
-                            curGrant.report_deadlines.map(
-                              (deadline: string, index: number) => (
-                                <div
-                                  key={index}
-                                  className="h-10 flex items-center justify-center w-full rounded-full mb-2 px-4 bg-grey-400 text-black"
-                                >
-                                  {formatDate(deadline)}
-                                </div>
-                              )
-                            )
-                          ) : (
-                            <div className="text-center text-gray-700 italic">
-                              No deadlines
-                            </div>
-                          )}
-                        </div>
-                        {/*End report deadlines div*/}
-                      </div>
-
-                      {/* End row of gray labels (application date, grant start date, estimated completion time) to next of report deadline + report deadline */}
-                    </div>
-
-                    {/*End left column */}
-                  </div>
-
-                  {/*Right column */}
-                  <div className="w-1/2 ">
-                    {/*POC row */}
-                    <div className="flex w-full mb-4">
-                      {/*BCAN POC div*/}
-                      <div className="w-1/2 pr-3">
-                        <label
-                          className=" sm:text-sm lg:text-base mb-2 flex block tracking-wide text-gray-700 font-bold "
-                          htmlFor="grid-zip"
-                        >
-                          BCAN POC
-                        </label>
-                        {/*Box div*/}
-                        <div
-                          className="items-center flex rounded-md bg-primary-800 border border-black"
-                        >
-                          <MdOutlinePerson2 className="w-1/5 h-full p-1" />
-                          <div
-                            className="w-4/5 border-l border-black rounded-r-md bg-grey-150"
-                          >
-                            <h2
-                              className="truncate px-2 text-left font-bold h-8 w-full text-gray-700 rounded flex items-center"
-                              id="grid-city"
-                            >
-                              {" "}
-                              {curGrant.bcan_poc?.POC_name ?? "Unknown"}{" "}
-                            </h2>
-                            <h2
-                              className="truncate px-2 text-left h-8 w-full text-gray-700 rounded flex items-center"
-                              id="grid-city"
-                              title={
-                                curGrant.bcan_poc?.POC_email ?? "----------"
-                              }
-                            >
-                              {" "}
-                              {curGrant.bcan_poc?.POC_email ??
-                                "----------"}{" "}
-                            </h2>
-                          </div>
-                        </div>
-                      </div>
-
-                      {/*Grant Provider POC div*/}
-                      <div className="w-1/2 pl-3">
-                        <label
-                          className=" sm:text-sm lg:text-base mb-2 flex block tracking-wide text-gray-700 font-bold text-left"
-                          htmlFor="grid-zip"
-                        >
-                          Grant Provider POC
-                        </label>
-                        {/*Box div*/}
-                        <div
-                          className="items-center flex rounded-md bg-primary-800 border border-black"
-                        >
-                          <MdOutlinePerson2 className="w-1/5 h-full p-1" />
-                          <div
-                            className="w-4/5 border-l border-black bg-grey-150 rounded-r-md"
-                          >
-                            <h2
-                              className="truncate px-2 text-left font-bold h-8 w-full text-gray-700 rounded-md flex items-center"
-                              id="grid-city"
-                            >
-                              {" "}
-                              {curGrant.grantmaker_poc?.POC_name ?? "Unknown"}
-                            </h2>
-                            <h2
-                              className="truncate px-2 text-left h-8 w-full text-gray-700 rounded-md flex items-center"
-                              id="grid-city"
-                              title={
-                                curGrant.grantmaker_poc?.POC_email ??
-                                "----------"
-                              }
-                            >
-                              {" "}
-                              {curGrant.grantmaker_poc?.POC_email ??
-                                "----------"}{" "}
-                            </h2>
-                          </div>
-                        </div>
-                      </div>
-                      {/*End POC row */}
-                    </div>
-
-                    {/* Colored attributes  + scope documents row*/}
-                    <div className="flex justify-between">
-                      {/*Colored attributes col */}
-                      <div className="w-1/2 pr-3 ">
-                        {/*Does BCAN qualify  */}
-                        <div className="w-full mb-3">
-                          <label
-                            className=" sm:text-sm lg:text-base flex block tracking-wide text-gray-700 font-bold mb-1 text-left"
-                            htmlFor="grid-city"
-                          >
-                            Does BCAN qualify?
-                          </label>
-                          <div
-                            className={`w-3/5 h-9 flex items-center justify-center rounded-full px-4 text-black ${
-                              curGrant.does_bcan_qualify
-                                ? "bg-green"
-                                : "bg-grey-400"
-                            }`}
-                          >
-                            {curGrant.does_bcan_qualify ? "Yes" : "No"}
-                          </div>
-                        </div>
-
-                        {/*Status*/}
-                        <div className="w-full mb-3">
-                          <label
-                            className=" sm:text-sm lg:text-base flex block tracking-wide text-gray-700 font-bold mb-1"
-                            htmlFor="grid-city"
-                          >
-                            Status
-                          </label>
-                          <div
-                            className={`w-3/5 h-9 flex items-center justify-center rounded-full px-4 text-black ${
-                              curGrant.status === "Active"
-                                ? "bg-green"
-                                : curGrant.status === "Potential"
-                                ? "bg-blue-dark"
-                                : "bg-grey-400"
-                            }`}
-                          >
-                            {curGrant.status}
-                          </div>
-                        </div>
-
-                        {/*Restriction*/}
-                        <div className="w-full mb-3">
-                          <label
-                            className=" sm:text-sm lg:text-base flex block tracking-wide text-gray-700 font-bold mb-1 text-left"
-                            htmlFor="grid-city"
-                          >
-                            Is BCAN Restricted?
-                          </label>
-                          <div
-                            className={`w-3/5 h-9 flex items-center justify-center rounded-full px-4 text-black ${
-                              curGrant.isRestricted ? "bg-red-light" : "bg-grey-400"
-                            }`}
-                          >
-                            {curGrant.isRestricted
-                              ? "Restricted"
-                              : "Not Restricted"}
-                          </div>
-                        </div>
-                        {/*End colored attributes col*/}
-                      </div>
-
-                      {/*Scope documents div*/}
-                      <div className="w-1/2 pl-3">
-                        <label className=" sm:text-sm lg:text-base flex block tracking-wide text-gray-700 font-bold mb-2 text-left">
-                          Scope Documents
-                        </label>
-                        <div
-                          className={`p-2 rounded-md h-[11.5rem] overflow-auto grip grid-cols-1 gap-4 border border-black ${
-                            "bg-grey-400"
-                          }`}
-                        >
-                          {/*Map each available report deadline to a div label
-                      If no deadlines, add "No deadlines" text */}
-                          {curGrant.attachments &&
-                          curGrant.attachments.length > 0 ? (
-                            curGrant.attachments.map(
-                              (attachment: Attachment, index: number) => (
-                                <div className="">
-                                  {attachment.url && (
-                                    <div
-                                      key={index}
-                                      className="items-center truncate overflow-x-scroll overflow-hidden text-left justify-center w-full rounded-md p-2 mb-2 bg-grey-150 h-[42px] border border-black text-black"
-                                    >
-                                      <a
-                                        href={attachment.url}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="text-blue-600 underline truncate"
-                                      >
-                                        {attachment.attachment_name ||
-                                          "Untitled"}
-                                      </a>
-                                    </div>
-                                  )}
-                                </div>
-                              )
-                            )
-                          ) : (
-                            <div className="text-center text-gray-700 italic">
-                              No documents
-                            </div>
-                          )}
-                        </div>
-                        {/*End scope docs div*/}
-                      </div>
-                    </div>
-
-                    {/*End right column */}
-                  </div>
-
-                  {/*End two main left right columns */}
-                </div>
-
-                {/*Cost Benefit Analysis and Description Row*/}
-            <div className="flex w-full mb-3 space-x-4 items-stretch">
-              {/* Cost Benefit Analysis */}
-              <div className="w-1/3 mr-2">
-                <CostBenefitAnalysis grant={curGrant} />
-                </div>
-
-              {/*Description */}
-              <div className="w-2/3">
-              <label
-                className="text-lg flex block tracking-wide text-gray-700  font-semibold mb-2"
-                htmlFor="grid-city"
-              >
-                Description
-              </label>
-              <div
-                className="h-64 bg-grey-150 flex w-full rounded-md p-5 overflow-auto border border-black text-black"
-              >
-                {curGrant.description}
-                </div>
-              </div>
-            </div>
-
-                {/*bottom buttons */}
-                <div className="flex justify-between items-center w-full mt-6">
-                  <>
-                    <button
-                      className="py-2 px-4 rounded-md hover:bg-red-600 transition-colors bg-red text-white border border-black"
-                      onClick={() => setShowDeleteModal(true)}
-                    >
-                      Delete
-                    </button>
-
-                    <ActionConfirmation
-                      isOpen={showDeleteModal}
-                      onCloseDelete={() => setShowDeleteModal(false)}
-                      onConfirmDelete={() => {
-                        deleteGrant();
-                      }}
-                      title="Delete Grant"
-                      subtitle={"Are you sure you want to delete"}
-                      boldSubtitle={curGrant.organization}
-                      warningMessage="By deleting this grant, they won't be available in the system anymore."
-                    />
-                  </>
-
-                  <div className="space-x-4">
-                    <button
-                      className="py-2 px-4 rounded-md bg-white text-black border border-black"
-                      onClick={() => setIsExpanded(false)}
-                    >
-                      {"Close"}
-                    </button>
-
-                    <button
-                      className={`py-2 px-4 rounded-md text-black border border-black ${
-                        "bg-primary-800"
-                      }`}
-                      onClick={() => setShowNewGrantModal(true)}
-                    >
-                      {"Edit"}
-                    </button>
-                  </div>
-                </div>
-
-                {/*End expanded div */}
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="hidden-features">
-          {showNewGrantModal && (
-            <NewGrantModal
-              grantToEdit={curGrant}
-              onClose={async () => {
-                setShowNewGrantModal(false);
-                setWasGrantSubmitted(true);
-              }}
-              isOpen={showNewGrantModal}
-            />
-          )}
-        </div>
-      </div>
-    );
-  }
-);
-
-export default GrantItem;
diff --git a/frontend/src/main-page/grants/grant-list/GrantLabels.tsx b/frontend/src/main-page/grants/grant-list/GrantLabels.tsx
deleted file mode 100644
index bc420f05..00000000
--- a/frontend/src/main-page/grants/grant-list/GrantLabels.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import "../styles/GrantLabels.css";
-import { useState } from "react";
-import { Grant } from "../../../../../middle-layer/types/Grant";
-import { updateSort } from "../../../external/bcanSatchel/actions";
-
-const GrantLabels = () => {
-  const [labels, setLabels] = useState({
-    header: "applicationDate",
-    asc: true,
-  });
-
-  function buttonHandler(header: keyof Grant) {
-    const isAsc = labels.header == header ? !labels.asc : true;
-    updateSort({header, asc: isAsc});
-    setLabels({ header: header, asc: isAsc });
-  }
-
-  return (
-    <ul className="grant-labels grid grid-cols-5 justify-stretch font-semibold pt-4 px-8">
-      <li className="text-center">
-        <button
-          className="grant-name"
-          onClick={() => buttonHandler("organization")}
-        >
-          Organization Name{" "}
-          {labels.header == "organization" ? (labels.asc ? "▲" : "▼") : ""}
-        </button>
-      </li>
-      <li className="text-center">
-        <button
-          className="application-date"
-          onClick={() => buttonHandler("application_deadline")}
-        >
-          Application Deadline{" "}
-          {labels.header == "application_deadline"
-            ? labels.asc
-              ? "▲"
-              : "▼"
-            : ""}
-        </button>
-      </li>
-      <li className="text-center">
-        <button className="amount" onClick={() => buttonHandler("amount")}>
-          Amount {labels.header == "amount" ? (labels.asc ? "▲" : "▼") : ""}
-        </button>
-      </li>
-      <li className="text-center">
-        <button
-          className="does_bcan_qualify"
-          onClick={() => buttonHandler("does_bcan_qualify")}
-        >
-          Does BCAN Qualify?{" "}
-          {labels.header == "does_bcan_qualify" ? (labels.asc ? "▲" : "▼") : ""}
-        </button>
-      </li>
-      <li className="text-center">
-        <button className="status" onClick={() => buttonHandler("status")}>
-          Status {labels.header == "status" ? (labels.asc ? "▲" : "▼") : ""}
-        </button>
-      </li>
-    </ul>
-  );
-};
-
-export default GrantLabels;
diff --git a/frontend/src/main-page/grants/grant-list/GrantList.tsx b/frontend/src/main-page/grants/grant-list/GrantList.tsx
deleted file mode 100644
index b0808215..00000000
--- a/frontend/src/main-page/grants/grant-list/GrantList.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import "../styles/GrantList.css";
-import { observer } from "mobx-react-lite";
-import { useState, useEffect } from "react";
-import GrantItem from "./GrantItem";
-import GrantLabels from "./GrantLabels";
-import { ButtonGroup, IconButton, Pagination } from "@chakra-ui/react";
-import { HiChevronLeft, HiChevronRight } from "react-icons/hi";
-import { ProcessGrantData } from "../filter-bar/processGrantData";
-import NewGrantModal from "../new-grant/NewGrantModal";
-import { Grant } from "../../../../../middle-layer/types/Grant";
-import { getAppStore } from "../../../external/bcanSatchel/store";
-import GrantView from "../grant-view/GrantView";
-
-const ITEMS_PER_PAGE = 6;
-
-interface GrantListProps {
-  selectedGrantId?: number;
-  onClearSelectedGrant?: () => void;
-  showOnlyMyGrants?: boolean;
-  currentUserEmail?: string;
-}
-
-const GrantList: React.FC<GrantListProps> = observer(
-  ({
-    selectedGrantId,
-    onClearSelectedGrant,
-    showOnlyMyGrants = false,
-    currentUserEmail,
-  }) => {
-    const { grants } = ProcessGrantData();
-    const { filterStatus } = getAppStore();
-    const [currentPage, setPage] = useState(1);
-    const [showNewGrantModal, setShowNewGrantModal] = useState(false);
-    // @ts-ignore
-    const [wasGrantSubmitted, setWasGrantSubmitted] = useState(false);
-
-    const displayedGrants = showOnlyMyGrants
-      ? grants.filter(
-          (grant: Grant) =>
-            grant.bcan_poc?.POC_email?.toLowerCase() ===
-            currentUserEmail?.toLowerCase(),
-        )
-      : grants;
-
-    useEffect(() => {
-      if (selectedGrantId !== undefined && grants.length > 0) {
-        const index = grants.findIndex(
-          (grant) => grant.grantId === Number(selectedGrantId),
-        );
-        if (index !== -1) {
-          const targetPage = Math.floor(index / ITEMS_PER_PAGE) + 1;
-          if (targetPage !== currentPage) {
-            setPage(targetPage);
-          }
-        }
-      }
-    }, [selectedGrantId, grants, currentPage]);
-
-    useEffect(() => {
-      setPage(1);
-    }, [filterStatus, showOnlyMyGrants]);
-
-    const count = displayedGrants.length;
-    const startRange = (currentPage - 1) * ITEMS_PER_PAGE;
-    const endRange = startRange + ITEMS_PER_PAGE;
-    const visibleItems = displayedGrants.slice(startRange, endRange);
-
-    return (
-      <div className="paginated-grant-list">
-        <div className="bg-primary-700 rounded-[1.2rem] pt-2">
-          <GrantLabels />
-          <div className="grant-list p-4">
-            {visibleItems.map((grant) => (
-              <div>
-                <GrantItem
-                  key={grant.grantId}
-                  grant={grant}
-                  defaultExpanded={grant.grantId === Number(selectedGrantId)}
-                />
-                <GrantView
-                  grant={grant}
-                />
-              </div>
-            ))}
-            {visibleItems.length === 0 && (
-              <p className="text-center text-gray-500 py-6">
-                {showOnlyMyGrants
-                  ? "You currently have no grants assigned as BCAN POC."
-                  : "No grants found :("}
-              </p>
-            )}
-          </div>
-        </div>
-        <Pagination.Root
-          className="pt-4"
-          count={count}
-          pageSize={ITEMS_PER_PAGE}
-          page={currentPage}
-          onClick={() => {
-            if (onClearSelectedGrant) {
-              onClearSelectedGrant();
-            }
-          }}
-          onPageChange={(e) => {
-            setPage(e.page);
-          }}
-        >
-          <ButtonGroup variant="ghost" size="md">
-            <Pagination.PrevTrigger asChild>
-              <IconButton>
-                <HiChevronLeft />
-              </IconButton>
-            </Pagination.PrevTrigger>
-            <Pagination.Context>
-              {({ pages }) =>
-                pages.map((page, index) =>
-                  page.type === "page" ? (
-                    <IconButton
-                      key={index}
-                      className={
-                        currentPage === page.value
-                          ? "text-secondary-500 underline"
-                          : "ghost"
-                      }
-                      onClick={() => setPage(page.value)}
-                      aria-label={`Go to page ${page.value}`}
-                    >
-                      {page.value}
-                    </IconButton>
-                  ) : (
-                    "..."
-                  ),
-                )
-              }
-            </Pagination.Context>
-            <Pagination.NextTrigger asChild>
-              <IconButton>
-                <HiChevronRight />
-              </IconButton>
-            </Pagination.NextTrigger>
-          </ButtonGroup>
-        </Pagination.Root>
-        {showNewGrantModal && (
-          <NewGrantModal
-            grantToEdit={null}
-            onClose={async () => {
-              setShowNewGrantModal(false);
-              setWasGrantSubmitted(true);
-            }}
-            isOpen={showNewGrantModal}
-          />
-        )}
-      </div>
-    );
-  },
-);
-
-export default GrantList;
diff --git a/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx b/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx
deleted file mode 100644
index 3f13c5b9..00000000
--- a/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// StatusIndicator.tsx
-
-import React from "react";
-import {
-  Status,
-  getColorStatus,
-} from "../../../../../middle-layer/types/Status.ts";
-
-interface StatusIndicatorProps {
-  curStatus: Status;
-}
-
-const StatusIndicator: React.FC<StatusIndicatorProps> = ({ curStatus }) => {
-  const lightColor = getColorStatus(curStatus.toString(), "light");
-  const darkColor = getColorStatus(curStatus.toString(), "dark");
-  const labelText = curStatus; // curStatus from the json is stored as a string, so can directly use
-
-  return (
-    <div
-      className="inline-flex w-fit flex-none items-center rounded-full px-3 py-1"
-      style={{ color: darkColor, backgroundColor: lightColor }}
-    >
-      <span className="text-md">{labelText}</span>
-    </div>
-  );
-};
-
-export default StatusIndicator;
diff --git a/frontend/src/main-page/grants/grant-view/GrantView.tsx b/frontend/src/main-page/grants/grant-view/GrantView.tsx
index 4b2b851e..49ab3395 100644
--- a/frontend/src/main-page/grants/grant-view/GrantView.tsx
+++ b/frontend/src/main-page/grants/grant-view/GrantView.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useLayoutEffect, useEffect } from "react";
 import { Grant } from "../../../../../middle-layer/types/Grant";
 import { observer } from "mobx-react-lite";
-import StatusIndicator from "../../grants/grant-list/StatusIndicator";
+import StatusIndicator from "./components/StatusIndicator";
 import {
   faPenToSquare,
   faCheckSquare,
@@ -9,19 +9,21 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import Button from "../../../components/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import ContactCard from "./ContactCard";
-import GrantFieldCol from "./GrantFieldCol";
-import { CostBenefitAnalysis } from "./CostBenefitAnalysis";
+import ContactCard from "./components/ContactCard";
+import GrantFieldCol from "./components/GrantFieldCol";
+import { CostBenefitAnalysis } from "./components/CostBenefitAnalysis";
+import EditGrant from "../edit-grant/EditGrant";
+import Footer from "../../../Footer";
 
 interface GrantItemProps {
   grant: Grant;
 }
 
 const GrantItem: React.FC<GrantItemProps> = observer(({ grant }) => {
-  
-  useEffect(() => {
-  }, [grant]);
-  
+  const [showEditGrant, setShowEditGrant] = useState(false);
+
+  useEffect(() => {}, [grant]);
+
   const useTruncatedElement = ({
     ref,
   }: {
@@ -56,11 +58,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(({ grant }) => {
 
   function formatDate(isoString: string): string {
     if (!isoString) return "N/A";
-    const date = new Date(isoString);
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
-    const year = date.getFullYear();
-    return `${month}/${day}/${year}`;
+    return new Date(isoString + "T00:00:00").toLocaleDateString();
   }
 
   function formatCurrency(amount: number): string {
@@ -69,193 +67,207 @@ const GrantItem: React.FC<GrantItemProps> = observer(({ grant }) => {
   }
 
   return (
-    <div className="w-full bg-white rounded-md flex flex-col gap-6 p-6">
-      {/* Top header part */}
-      <div className="flex justify-between">
-        {/* Left side */}
-        <div className="flex flex-col gap-2 items-start text-left">
-          <h2 className="text-2xl font-semibold">{grant.organization}</h2>
-          <StatusIndicator curStatus={grant.status} />
-        </div>
-        {/* Right side */}
-        <div className="flex flex-col gap-2 items-end">
-          <Button
-            text="Edit"
-            onClick={() => alert("edit grant info")}
-            className="bg-white text-black border-2 border-grey-500"
-            logo={faPenToSquare}
-            logoPosition="right"
-          />
+    <div>
+      <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 */}
+          <div className="flex flex-col gap-2 items-start text-left">
+            <h2 className="text-2xl font-semibold">{grant.organization}</h2>
+            <StatusIndicator curStatus={grant.status} />
+          </div>
+          {/* Right side */}
+          <div className="flex flex-col gap-2 items-end">
+            <Button
+              text="Edit"
+              onClick={() => setShowEditGrant(true)}
+              className="bg-white text-black border-2 border-grey-500 text-sm lg:text-base"
+              logo={faPenToSquare}
+              logoPosition="right"
+            />
+          </div>
         </div>
-      </div>
-      <hr className="border-grey-400 border-t-2 rounded-full" />
+        <hr className="border-grey-400 border-t-2 rounded-full" />
 
-      {/* Middle info part */}
-      <div className="flex flex-col gap-6 items-start text-left">
-        {/* Description */}
-        <GrantFieldCol
-          fields={[
-            {
-              label: "Description",
-              item: (
-                <div>
-                  <p
-                    ref={ref}
-                    className={` ${!isShowingMore && "line-clamp-3"}`}
-                    onClick={toggleIsShowingMore}
-                  >
-                    {grant?.description || "N/A"}
-                  </p>
-                  {isTruncated && (
-                    <button
-                      className="text-secondary"
-                      onClick={toggleIsShowingMore}
-                    >
-                      {isShowingMore ? "Show less" : "show more"}
-                    </button>
-                  )}
-                </div>
-              ),
-            },
-          ]}
-        />
-        {/* Other details */}
-        <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 w-full gap-4">
+        {/* Middle info part */}
+        <div className="flex flex-col gap-6 items-start text-left">
+          {/* Description */}
           <GrantFieldCol
             fields={[
               {
-                label: "Amount ($)",
-                value: formatCurrency(grant.amount),
-                important: true,
-              },
-              {
-                label: "BCAN Eligible",
-                important: true,
-                item: grant.does_bcan_qualify ? (
-                  <span className="text-green">
-                    <FontAwesomeIcon icon={faCheckSquare} /> Yes
-                  </span>
-                ) : (
-                  <span className="text-red">
-                    <FontAwesomeIcon icon={faXmarkSquare} /> No
-                  </span>
+                label: "Description",
+                item: (
+                  <div>
+                    <p
+                      ref={ref}
+                      className={` ${!isShowingMore && "line-clamp-3"}`}
+                      onClick={toggleIsShowingMore}
+                    >
+                      {grant?.description || "N/A"}
+                    </p>
+                    {isTruncated && (
+                      <button
+                        className="text-secondary"
+                        onClick={toggleIsShowingMore}
+                      >
+                        {isShowingMore ? "Show less" : "show more"}
+                      </button>
+                    )}
+                  </div>
                 ),
               },
             ]}
           />
+          {/* Other details */}
+          <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 w-full gap-4">
+            <GrantFieldCol
+              fields={[
+                {
+                  label: "Amount ($)",
+                  value: formatCurrency(grant.amount),
+                  important: true,
+                },
+                {
+                  label: "BCAN Eligible",
+                  important: true,
+                  item: grant.does_bcan_qualify ? (
+                    <span className="text-green">
+                      <FontAwesomeIcon icon={faCheckSquare} /> Yes
+                    </span>
+                  ) : (
+                    <span className="text-red">
+                      <FontAwesomeIcon icon={faXmarkSquare} /> No
+                    </span>
+                  ),
+                },
+              ]}
+            />
+            <GrantFieldCol
+              fields={[
+                {
+                  label: "Due Date",
+                  important: true,
+                  value: formatDate(grant.application_deadline),
+                },
+                {
+                  label: "Application Date",
+                  value: grant.application_date ? formatDate(grant.application_date) : "N/A",
+                },
+              ]}
+            />
+            <GrantFieldCol
+              fields={[
+                {
+                  label: "Grant Start Date",
+                  value: formatDate(grant.grant_start_date),
+                },
+                {
+                  label: "Report Deadlines",
+                  item:
+                    grant.report_deadlines &&
+                    grant.report_deadlines.length > 0 ? (
+                      grant.report_deadlines.map(
+                        (deadline: string, index: number) => (
+                          <div key={index} className="text-black">
+                            {formatDate(deadline)}
+                          </div>
+                        ),
+                      )
+                    ) : (
+                      <div className="">N/A</div>
+                    ),
+                },
+              ]}
+            />
+            <GrantFieldCol
+              colspan={2}
+              fields={[
+                {
+                  label: "Timeline (years)",
+                  value: grant.timeline,
+                },
+                {
+                  label: "Estimated Completion Time (hours)",
+                  value: grant.estimated_completion_time,
+                },
+              ]}
+            />
+          </div>
+        </div>
+        <hr className="border-grey-400 border-t-2 rounded-full" />
+
+        {/* Bottom info */}
+        <div className="flex flex-col gap-6 items-start text-left">
+          {/* Contacts */}
           <GrantFieldCol
             fields={[
               {
-                label: "Due Date",
-                important: true,
-                value: formatDate(grant.application_deadline),
-              },
-              {
-                label: "Application Date",
-                value: "TBD (add to DB)",
+                label: "Contacts",
+                item: (
+                  <div className="grid grid-cols-1 xl:grid-cols-2 w-full h-full lg:w-[85%] gap-6">
+                    <ContactCard contact={grant.bcan_poc} type="BCAN" />
+                    <ContactCard
+                      contact={grant.grantmaker_poc}
+                      type="Granter"
+                    />
+                  </div>
+                ),
               },
             ]}
           />
+          {/* Documents */}
           <GrantFieldCol
             fields={[
               {
-                label: "Grant Start Date",
-                value: formatDate(grant.grant_start_date),
-              },
-              {
-                label: "Report Deadlines",
+                label: "Documents",
                 item:
-                  grant.report_deadlines &&
-                  grant.report_deadlines.length > 0 ? (
-                    grant.report_deadlines.map(
-                      (deadline: string, index: number) => (
-                        <div key={index} className="text-black">
-                          {formatDate(deadline)}
-                        </div>
-                      ),
-                    )
+                  grant.attachments && grant.attachments.length > 0 ? (
+                    <div className="columns-2 xl:columns-4 gap-4 lg:w-[90%]">
+                      {grant.attachments.map((attachment, index) => (
+                        <p key={index} className="truncate w-full mb-1">
+                          <a
+                            href={attachment.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-secondary underline"
+                          >
+                            {attachment.attachment_name || attachment.url}
+                          </a>
+                        </p>
+                      ))}
+                    </div>
                   ) : (
                     <div className="">N/A</div>
                   ),
               },
             ]}
           />
+        </div>
+        <hr className="border-grey-400 border-t-2 rounded-full" />
+
+        {/* Cost Benefit */}
+        <div className="flex flex-col gap-6 items-start text-left">
           <GrantFieldCol
-            colspan={2}
             fields={[
               {
-                label: "Timeline (years)",
-                value: grant.timeline,
-              },
-              {
-                label: "Estimated Completion Time (hours)",
-                value: grant.estimated_completion_time,
+                label: "Cost Analysis Calculator",
+                item: <CostBenefitAnalysis grant={grant} />,
               },
             ]}
           />
         </div>
       </div>
-      <hr className="border-grey-400 border-t-2 rounded-full" />
-
-      {/* Bottom info */}
-      <div className="flex flex-col gap-6 items-start text-left">
-        {/* Contacts */}
-        <GrantFieldCol
-          fields={[
-            {
-              label: "Contacts",
-              item: (
-                <div className="grid grid-cols-1 xl:grid-cols-2 w-full h-full lg:w-[85%] gap-6">
-                  <ContactCard contact={grant.bcan_poc} type="BCAN" />
-                  <ContactCard contact={grant.grantmaker_poc} type="Granter" />
-                </div>
-              ),
-            },
-          ]}
-        />
-        {/* Documents */}
-        <GrantFieldCol
-          fields={[
-            {
-              label: "Documents",
-              item:
-                grant.attachments && grant.attachments.length > 0 ? (
-                  <div className="columns-2 xl:columns-4 gap-4 lg:w-[90%]">
-                    {grant.attachments.map((attachment, index) => (
-                      <p key={index} className="truncate w-full mb-1">
-                        <a
-                          href={attachment.url}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-secondary underline"
-                        >
-                          {attachment.attachment_name || attachment.url}
-                        </a>
-                      </p>
-                    ))}
-                  </div>
-                ) : (
-                  <div className="">N/A</div>
-                ),
-            },
-          ]}
-        />
+      <Footer/>
+      <div>
+        {showEditGrant && (
+          <EditGrant
+            grantToEdit={grant}
+            onClose={async () => {
+              setShowEditGrant(false);
+            }}
+          />
+        )}
       </div>
-      <hr className="border-grey-400 border-t-2 rounded-full" />
-
-      {/* Cost Benefit */}
-      <div className="flex flex-col gap-6 items-start text-left">
-      <GrantFieldCol
-          fields={[
-            {
-              label: "Cost Analysis Calculator",
-              item: (
-                <CostBenefitAnalysis grant={grant} />
-              ),
-            },
-          ]}
-        />
-    </div>
     </div>
   );
 });
diff --git a/frontend/src/main-page/grants/grant-view/ContactCard.tsx b/frontend/src/main-page/grants/grant-view/components/ContactCard.tsx
similarity index 57%
rename from frontend/src/main-page/grants/grant-view/ContactCard.tsx
rename to frontend/src/main-page/grants/grant-view/components/ContactCard.tsx
index d565a393..2d42464f 100644
--- a/frontend/src/main-page/grants/grant-view/ContactCard.tsx
+++ b/frontend/src/main-page/grants/grant-view/components/ContactCard.tsx
@@ -1,32 +1,33 @@
-import { getAppStore } from "../../../external/bcanSatchel/store";
-import POC from "../../../../../middle-layer/types/POC";
-import Avatar from "../../../components/Avatar";
-import logo from "../../../images/logo.svg";
+import { getAppStore } from "../../../../external/bcanSatchel/store";
+import POC from "../../../../../../middle-layer/types/POC";
+import Avatar from "../../../../components/Avatar";
+import logo from "../../../../images/logo.svg";
 
 type ContactCardProps = {
   contact?: POC;
   type?: "BCAN" | "Granter";
 };
 
-const store = getAppStore()
+const store = getAppStore();
 const activeUsers = store.activeUsers || [];
 
 export default function ContactCard({ contact, type }: ContactCardProps) {
-
-const contactPhoto =
-  type === "BCAN"
-    ? activeUsers.find((user) => user.email === contact?.POC_email)
-        ?.profilePicUrl
-    : logo;
+  const contactPhoto =
+    type === "BCAN"
+      ? activeUsers.find((user) => user.email === contact?.POC_email)
+          ?.profilePicUrl
+      : logo;
 
   return (
-    <div className="flex flex-row gap-4 w-full justify-items-start rounded border-2 p-3 h-full border-grey-500">
-      <Avatar
+    <div className="flex gap-4 w-full text-left justify-items-start rounded border-2 p-3 h-full border-grey-500">
+      <div className="lg:flex h-full items-center hidden aspect-square">
+        <Avatar
         src={contactPhoto}
         alt="Profile"
         className="max-w-14 rounded-full object-cover hidden lg:block"
         fallbackSrc={logo}
       />
+      </div>
       <div className="flex flex-col align-middle justify-center">
         <p className="text-black text-md font-semibold ">
           {contact?.POC_name || "N/A"}
@@ -44,7 +45,7 @@ const contactPhoto =
       </div>
       <div className="place-items-end justify-end ml-auto flex items-start">
         <div
-          className={`w-fit h-fit p-2 text-xs rounded-full text-white ${type === "BCAN" ? "bg-primary-900" : "bg-secondary-500"}`}
+          className={`w-fit h-fit py-2 px-3 text-xs rounded-full text-white ${type === "BCAN" ? "bg-primary-900" : "bg-secondary-500"}`}
         >
           {type}
         </div>
diff --git a/frontend/src/main-page/grants/grant-view/CostBenefitAnalysis.tsx b/frontend/src/main-page/grants/grant-view/components/CostBenefitAnalysis.tsx
similarity index 95%
rename from frontend/src/main-page/grants/grant-view/CostBenefitAnalysis.tsx
rename to frontend/src/main-page/grants/grant-view/components/CostBenefitAnalysis.tsx
index 4320a1b6..a8a95d36 100644
--- a/frontend/src/main-page/grants/grant-view/CostBenefitAnalysis.tsx
+++ b/frontend/src/main-page/grants/grant-view/components/CostBenefitAnalysis.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-import { Grant } from "../../../../../middle-layer/types/Grant";
-import InputField from "../../../components/InputField";
-import Button from "../../../components/Button";
+import { Grant } from "../../../../../../middle-layer/types/Grant";
+import InputField from "../../../../components/InputField";
+import Button from "../../../../components/Button";
 
 interface CostBenefitAnalysisProps {
   grant: Grant;
@@ -108,7 +108,7 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({
           text="Calculate"
           onClick={calculateCostBenefit}
           disabled={!hourlyRate || !timePerReport}
-          className="border-2 ml-auto bg-primary-900 text-white"
+          className="border-2 ml-auto bg-primary-900 text-white text-sm"
         />
       </div>
 
diff --git a/frontend/src/main-page/grants/grant-list/GrantCard.tsx b/frontend/src/main-page/grants/grant-view/components/GrantCard.tsx
similarity index 97%
rename from frontend/src/main-page/grants/grant-list/GrantCard.tsx
rename to frontend/src/main-page/grants/grant-view/components/GrantCard.tsx
index 46050b45..157beb67 100644
--- a/frontend/src/main-page/grants/grant-list/GrantCard.tsx
+++ b/frontend/src/main-page/grants/grant-view/components/GrantCard.tsx
@@ -1,7 +1,7 @@
 // Meant to replace GrantItem.tsx when we implement new design
 
 import React from "react";
-import { Grant } from "../../../../../middle-layer/types/Grant";
+import { Grant } from "../../../../../../middle-layer/types/Grant";
 import StatusIndicator from "./StatusIndicator";
 
 interface GrantCardProps {
diff --git a/frontend/src/main-page/grants/grant-view/GrantFieldCol.tsx b/frontend/src/main-page/grants/grant-view/components/GrantFieldCol.tsx
similarity index 91%
rename from frontend/src/main-page/grants/grant-view/GrantFieldCol.tsx
rename to frontend/src/main-page/grants/grant-view/components/GrantFieldCol.tsx
index efdb2c96..106e5f30 100644
--- a/frontend/src/main-page/grants/grant-view/GrantFieldCol.tsx
+++ b/frontend/src/main-page/grants/grant-view/components/GrantFieldCol.tsx
@@ -20,7 +20,7 @@ export default function GrantFieldCol({
     <div
       className={
         `flex flex-col w-full gap-6 items-start text-left ` +
-        (colspan === 2 ? "col-span-2" : "col-span-1")
+        (colspan === 2 ? "col-span-1 md:col-span-2" : "col-span-1")
       }
     >
       {fields.map((field) => (
diff --git a/frontend/src/main-page/grants/grant-view/components/StatusIndicator.tsx b/frontend/src/main-page/grants/grant-view/components/StatusIndicator.tsx
new file mode 100644
index 00000000..48d57ef0
--- /dev/null
+++ b/frontend/src/main-page/grants/grant-view/components/StatusIndicator.tsx
@@ -0,0 +1,33 @@
+// StatusIndicator.tsx
+
+import React from "react";
+import {
+  Status,
+  getColorStatus,
+} from "../../../../../../middle-layer/types/Status.ts";
+
+interface StatusIndicatorProps {
+  curStatus: Status;
+  onClick?: () => void; 
+  active?: boolean;
+}
+
+const StatusIndicator: React.FC<StatusIndicatorProps> = ({ curStatus, onClick, active }) => {
+  const lightColor = getColorStatus(curStatus.toString(), "light");
+  const darkColor = getColorStatus(curStatus.toString(), "dark");
+  const labelText = curStatus; // curStatus from the json is stored as a string, so can directly use
+
+  return (
+    <button
+      className="inline-flex w-fit cursor-default flex-none items-center rounded-full px-3 py-1 border-grey-300 border-2 text-gray-700 hover:border-primary-900 text-sm lg:text-base"
+      style={active !== false ? { color: darkColor, backgroundColor: lightColor, borderColor: lightColor } : {}}
+      onClick={onClick}
+
+     // text-gray-700 px-3 py-1 text-sm border-2 ${status === btn.id ? "bg-primary-800 border-primary-800" : "border-grey-300
+    >
+      <span className="text-md">{labelText}</span>
+    </button>
+  );
+};
+
+export default StatusIndicator;
diff --git a/frontend/src/main-page/grants/new-grant/AddGrant.tsx b/frontend/src/main-page/grants/new-grant/AddGrant.tsx
deleted file mode 100644
index f86d1082..00000000
--- a/frontend/src/main-page/grants/new-grant/AddGrant.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import Button from '../../../components/Button.tsx';
-
-// TODO: Fix 'any' typing here
-const AddGrantButton = ({ onClick } : any) => {
-
-  return (
-    <Button text= "+ Add" className="bg-white rounded-full border-2 border-grey-500 border-solid" onClick={onClick} />
-  );
-};
-
-export default AddGrantButton;
diff --git a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
deleted file mode 100644
index 7ffdbdf5..00000000
--- a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
+++ /dev/null
@@ -1,973 +0,0 @@
-// frontend/src/grant-info/components/NewGrantModal.tsx
-import React, { useEffect, useState } from "react";
-import CurrencyInput from "react-currency-input-field";
-import "../styles/NewGrantModal.css";
-import { MdOutlinePerson2 } from "react-icons/md";
-import { FiUpload } from "react-icons/fi";
-import { Grant } from "../../../../../middle-layer/types/Grant";
-import { TDateISO } from "../../../../../backend/src/utils/date";
-import { Status } from "../../../../../middle-layer/types/Status";
-import {
-  createNewGrant,
-  saveGrantEdits,
-} from "../new-grant/processGrantDataEditSave";
-import { fetchGrants } from "../filter-bar/processGrantData";
-import { observer } from "mobx-react-lite";
-import  UserDropdown  from "./UserDropdown";
-
-/** Attachment type from your middle layer */
-enum AttachmentType {
-  SCOPE_DOCUMENT = 0,
-  SUPPORTING_RESOURCE = 1,
-}
-
-/** Attachment interface */
-interface Attachment {
-  attachment_name: string;
-  url: string;
-  type: AttachmentType;
-}
-// const FilterBar: React.FC = observer(() => {
-
-const NewGrantModal: React.FC<{
-  grantToEdit: Grant | null;
-  onClose: () => void;
-  isOpen: boolean;
-}> = observer(({ grantToEdit, onClose, isOpen }) => {
-  /*
-      grantId: number;
-      organization: string;
-      does_bcan_qualify: boolean;
-      status: Status;
-      amount: number;
-      grant_start_date: TDateISO; // when the grant was started
-      application_deadline: TDateISO; // when was grant submission due
-      report_deadlines: TDateISO[];       // multiple report dates
-      description: string;
-      timeline: number; // Need to specify
-      estimated_completion_time: number,
-      grantmaker_poc: POC; // person of contact at organization giving the grant
-      // bcan_poc may need to be changed later to be a validated account
-      bcan_poc: POC; // person of contact at BCAN
-      attachments: Attachment[];
-      restricted_or_unrestricted: string; // "restricted" or "unrestricted"
-  */
-  // Form fields, renamed to match your screenshot
-
-  // Used
-  const [organization, _setOrganization] = useState<string>(
-    grantToEdit ? grantToEdit.organization : ""
-  );
-
-  // Helper function to normalize dates to YYYY-MM-DD format
-  const normalizeDateToISO = (date: TDateISO | ""): TDateISO | "" => {
-    if (!date) return "";
-    // If it has time component, extract just the date part
-    return date.split("T")[0] as TDateISO;
-  };
-
-  // Used
-  const [applicationDate, _setApplicationDate] = useState<TDateISO | "">(
-    grantToEdit?.application_deadline
-      ? normalizeDateToISO(grantToEdit.application_deadline)
-      : ""
-  );
-
-  const [grantStartDate, _setGrantStartDate] = useState<TDateISO | "">(
-    grantToEdit?.grant_start_date
-      ? normalizeDateToISO(grantToEdit.grant_start_date)
-      : ""
-  );
-
-  const [reportDates, setReportDates] = useState<(TDateISO | "")[]>(
-    grantToEdit?.report_deadlines?.map((date) => normalizeDateToISO(date)) || []
-  );
-
-  // Used
-  const [timelineInYears, _setTimelineInYears] = useState<number>(
-    grantToEdit ? grantToEdit.timeline : 1
-  );
-
-  // Used
-  const [estimatedCompletionTimeInHours, _setEstimatedCompletionTimeInHours] =
-    useState<number>(grantToEdit ? grantToEdit.estimated_completion_time : 10);
-
-  // Used
-  const [doesBcanQualify, _setDoesBcanQualify] = useState<string>(
-    grantToEdit ? (grantToEdit.does_bcan_qualify ? "yes" : "no") : ""
-  );
-
-  // Used
-  const [isRestricted, _setIsRestricted] = useState<string>(
-    grantToEdit ? String(grantToEdit.isRestricted) : ""
-  );
-
-  // Used
-  const [status, _setStatus] = useState<Status | string>(
-    grantToEdit ? grantToEdit.status : ""
-  );
-
-  // Used
-  const [amount, _setAmount] = useState<number>(
-    grantToEdit ? grantToEdit.amount : 1000
-  );
-  // Used
-  const [description, _setDescription] = useState<string>(
-    grantToEdit ? (grantToEdit.description ? grantToEdit.description : "") : ""
-  );
-
-  // Attachments array
-  // Used
-  const [attachments, setAttachments] = useState<Attachment[]>(
-    grantToEdit?.attachments || []
-  );
-  // Used
-  const [isAddingAttachment, setIsAddingAttachment] = useState(false);
-  const [currentAttachment, setCurrentAttachment] = useState<Attachment>({
-    attachment_name: "",
-    url: "",
-    type: AttachmentType.SCOPE_DOCUMENT,
-  });
-
-  // Used
-  const [bcanPocName, setBcanPocName] = useState(
-    grantToEdit
-      ? grantToEdit.bcan_poc
-        ? grantToEdit.bcan_poc.POC_name
-        : ""
-      : ""
-  );
-  // Used?
-  const [bcanPocEmail, setBcanPocEmail] = useState(
-    grantToEdit
-      ? grantToEdit.bcan_poc
-        ? grantToEdit.bcan_poc.POC_email
-        : ""
-      : ""
-  );
-  // Used
-  const [grantProviderPocName, setGrantProviderPocName] = useState(
-    grantToEdit
-      ? grantToEdit.grantmaker_poc
-        ? grantToEdit.grantmaker_poc.POC_name
-        : ""
-      : ""
-  );
-  // Used
-  const [grantProviderPocEmail, setGrantProviderPocEmail] = useState(
-    grantToEdit
-      ? grantToEdit.grantmaker_poc
-        ? grantToEdit.grantmaker_poc.POC_email
-        : ""
-      : ""
-  );
-
-  // For error handling
-  // @ts-ignore
-  const [_errorMessage, setErrorMessage] = useState<string>("");
-  const [showErrorPopup, setShowErrorPopup] = useState(false);
-
-  // State to track if form was submitted successfully
-  const [wasSubmitted, setWasSubmitted] = useState(false);
-
-  // Add the useEffect
-  useEffect(() => {
-    if (!isOpen && wasSubmitted) {
-      fetchGrants();
-      setWasSubmitted(false); // Reset for next time
-    }
-  }, [isOpen, wasSubmitted]);
-
-  /* Add a new blank report date to the list */
-  // Used
-  const _addReportDate = () => {
-    setReportDates([...reportDates, ""]);
-  };
-
-  // Used
-  const _removeReportDate = (index: number) => {
-    const updated = [...reportDates];
-    updated.splice(index, 1);
-    setReportDates(updated);
-  };
-
-  // Used
-  const _addAttachment = () => {
-    setIsAddingAttachment(true);
-    // Validate fields are not empty
-    if (!currentAttachment.attachment_name || !currentAttachment.url) {
-      // Optional: show error message
-      return;
-    }
-
-    // Add the current attachment to the list
-    setAttachments([...attachments, currentAttachment]);
-
-    // Clear the input fields
-    setCurrentAttachment({
-      attachment_name: "",
-      url: "",
-      type: AttachmentType.SCOPE_DOCUMENT,
-    });
-  };
-
-  // Used
-  const _removeAttachment = (index: number) => {
-    const updated = attachments.filter((_, i) => i !== index);
-    setAttachments(updated);
-    if (updated.length === 0) {
-      setIsAddingAttachment(false);
-    }
-  };
-
-  /** Basic validations based on your screenshot fields */
-  const validateInputs = (): boolean => {
-    // Timeline check
-
-
-    // Organization validation
-    if (!organization || organization.trim() === "") {
-      setErrorMessage("Organization Name is required.");
-      return false;
-    }
-    // Does BCAN Qualify validation
-    if (doesBcanQualify === "") {
-      setErrorMessage("Set Does BCAN Qualify? to 'yes' or 'no'");
-      return false;
-    }
-    // Status validation
-    if (status === "" || status == null) {
-      setErrorMessage("Status is required.");
-      return false;
-    }
-    const validStatuses = [
-      Status.Active,
-      Status.Inactive,
-      Status.Potential,
-      Status.Pending,
-      Status.Rejected,
-    ];
-    if (!validStatuses.includes(status as Status)) {
-      setErrorMessage("Invalid status selected.");
-      return false;
-    }
-    // Amount validation
-    if (amount <= 0) {
-      setErrorMessage("Amount must be greater than 0.");
-      return false;
-    }
-    if (isNaN(amount) || !isFinite(amount)) {
-      setErrorMessage("Amount must be a valid number.");
-      return false;
-    }
-    // Date validations
-    if (!applicationDate || applicationDate.trim() === "") {
-      setErrorMessage("Application Deadline is required.");
-      return false;
-    }
-    if (!grantStartDate || grantStartDate.trim() === "") {
-      setErrorMessage("Grant Start Date is required.");
-      return false;
-    }
-
-    // const isoDateRegex = /^\d{4}-\d{2}-\d{2}$/;
-    // if (!isoDateRegex.test(applicationDate)) {
-    //   setErrorMessage("Application Deadline must be in valid date format (YYYY-MM-DD). instead of " + applicationDate);
-    //   return false;
-    // }
-    // if (!isoDateRegex.test(grantStartDate)) {
-    //   setErrorMessage("Grant Start Date must be in valid date format (YYYY-MM-DD).");
-    //   return false;
-    // }
-    // Validate dates are actual valid dates
-    const appDate = new Date(applicationDate);
-    const startDate = new Date(grantStartDate);
-    if (isNaN(appDate.getTime())) {
-      setErrorMessage("Application Deadline is not a valid date.");
-      return false;
-    }
-    if (isNaN(startDate.getTime())) {
-      setErrorMessage("Grant Start Date is not a valid date.");
-      return false;
-    }
-    // Logical date validation - grant start should typically be after application deadline
-    if (startDate < appDate) {
-      setErrorMessage(
-        "Grant Start Date should typically be after Application Deadline."
-      );
-      return false;
-    }
-
-    // Report deadlines validation
-    if (reportDates && reportDates.length > 0) {
-      for (let i = 0; i < reportDates.length; i++) {
-        const reportDate = reportDates[i];
-
-        // Skip empty entries (if you allow them)
-        if (!reportDate) {
-          setErrorMessage(
-            `Report Date ${i + 1} cannot be empty. Remove it if not needed.`
-          );
-          return false;
-        }
-
-        const repDate = new Date(reportDate);
-        if (isNaN(repDate.getTime())) {
-          setErrorMessage(`Report Date ${i + 1} is not a valid date.`);
-          return false;
-        }
-      }
-    }
-    // Timeline validation
-    if (timelineInYears < 0) {
-      setErrorMessage("Timeline cannot be negative.");
-      return false;
-    }
-    // Estimated completion time validation
-    if (estimatedCompletionTimeInHours <= 0) {
-      setErrorMessage("Estimated Completion Time cannot be negative.");
-      return false;
-    }
-    if (estimatedCompletionTimeInHours <= 0) {
-      setErrorMessage("Estimated Completion Time must be greater than 0.");
-      return false;
-    }
-    // Restriction type validation
-    if (isRestricted === "") {
-      setErrorMessage("Set Restriction Type to 'restricted' or 'unrestricted'");
-      return false;
-    }
-    // BCAN POC validation
-    if (!bcanPocName || bcanPocName.trim() === "") {
-      setErrorMessage("BCAN Point of Contact Name is required.");
-      return false;
-    }
-    if (!bcanPocEmail || bcanPocEmail.trim() === "") {
-      setErrorMessage("BCAN Point of Contact Email is required.");
-      return false;
-    }
-    // Email format validation
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(bcanPocEmail)) {
-      setErrorMessage(
-        "BCAN Point of Contact Email must be a valid email address."
-      );
-      return false;
-    }
-    // Grant Provider POC validation (optional, but if provided must be valid)
-    if (grantProviderPocName && grantProviderPocName.trim() !== "") {
-      if (grantProviderPocName.trim().length < 2) {
-        setErrorMessage(
-          "Grant Provider Point of Contact Name must be at least 2 characters."
-        );
-        return false;
-      }
-    }
-    if (grantProviderPocEmail && grantProviderPocEmail.trim() !== "") {
-      if (!emailRegex.test(grantProviderPocEmail)) {
-        setErrorMessage(
-          "Grant Provider Point of Contact Email must be a valid email address."
-        );
-        return false;
-      }
-    }
-    // Attachments validation
-    if (attachments && attachments.length > 0) {
-      for (let i = 0; i < attachments.length; i++) {
-        const attachment = attachments[i];
-        if (
-          !attachment.attachment_name ||
-          attachment.attachment_name.trim() === ""
-        ) {
-          setErrorMessage(`Attachment ${i + 1} must have a name.`);
-          return false;
-        }
-        if (!attachment.url || attachment.url.trim() === "") {
-          setErrorMessage(`Attachment ${i + 1} must have a URL.`);
-          return false;
-        }
-        // Basic URL validation
-        try {
-          new URL(attachment.url);
-        } catch {
-          setErrorMessage(`Attachment ${i + 1} URL is not valid.`);
-          return false;
-        }
-      }
-    }
-    // Description validation (optional but reasonable length if provided)
-    if (description && description.length > 5000) {
-      setErrorMessage("Description is too long (max 5000 characters).");
-      return false;
-    }
-
-    return true;
-  };
-
-  const handleSubmit = async () => {
-    if (!validateInputs()) {
-      setShowErrorPopup(true);
-      return;
-    }
-
-    const grantData: Grant = {
-      grantId: grantToEdit ? grantToEdit.grantId : 0,
-      organization: organization,
-      does_bcan_qualify: doesBcanQualify === "yes",
-      amount,
-      grant_start_date: grantStartDate as TDateISO,
-      application_deadline: applicationDate as TDateISO,
-      status: status as Status,
-      bcan_poc: { POC_name: bcanPocName, POC_email: bcanPocEmail },
-      grantmaker_poc:
-        grantProviderPocName && grantProviderPocEmail
-          ? { POC_name: grantProviderPocName, POC_email: grantProviderPocEmail }
-          : { POC_name: "", POC_email: "" },
-      report_deadlines: reportDates as TDateISO[],
-      timeline: timelineInYears,
-      estimated_completion_time: estimatedCompletionTimeInHours,
-      description: description ? description : "",
-      attachments: attachments,
-      isRestricted: isRestricted === "restricted",
-    };
-
-    const result = grantToEdit
-      ? await saveGrantEdits(grantData)
-      : await createNewGrant(grantData);
-
-    if (result.success) {
-      console.log("Handle submit success in NewGrantModal");
-      setWasSubmitted(true);
-      isOpen = false;
-      onClose();
-      //await fetchGrants(); // ← Call it here instead
-    } else {
-      setErrorMessage(result.error || "An error occurred");
-      setShowErrorPopup(true);
-    }
-    // onClose();
-  };
-
-  return (
-    <div className="modal-overlay">
-      {" "}
-      {/*Greyed out background */}
-      <div className="modal-content ">
-        {" "}
-        {/*Popup container */}
-        <h2 className="">New Grant</h2>
-        <div className="flex">
-          {" "}
-          {/* Major components in two columns */}
-          {/*left column */}
-          <div className="w-1/2  pr-5">
-            {/*Organization name and input */}
-            <div className="w-full md:mb-0">
-              <label
-                className=" sm:text-sm lg:text-base flex block text-black  mb-1"
-                htmlFor="grid-first-name"
-              >
-                Organization Name *
-              </label>
-              <input
-                className="block w-full h-[42px] bg-grey-150 text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight"
-                id="grid-first-name"
-                type="text"
-                placeholder="Type Here"
-                value={organization}
-                onChange={(e) => _setOrganization(e.target.value)}
-              />
-            </div>
-
-            {/*Top left quadrant - from app date, start date, report deadlines, est completion time*/}
-            <div className="flex  w-full space-x-4 mt-5 ">
-              {/* Left column: Application + Grant Start row */}
-              <div className="w-[55%]">
-                {/*Application date and grant start date */}
-                <div className="flex space-x-4">
-                  {/*Application date and input */}
-                  <div className="w-1/2">
-                    <label
-                      className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
-                      htmlFor="grid-city"
-                    >
-                      Application Date *
-                    </label>
-                    <input
-                      className={`appearance-none block w-full h-[42px] bg-grey-150 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500 ${
-                        applicationDate ? "text-black" : "text-gray-500"
-                      }`}
-                      id="grid-city"
-                      type="date"
-                      value={
-                        applicationDate ? applicationDate.split("T")[0] : ""
-                      }
-                      onChange={(e) =>
-                        _setApplicationDate(e.target.value as TDateISO)
-                      }
-                    />
-                  </div>
-                  {/*Grant Start Date and input */}
-                  <div className=" w-1/2">
-                    <label
-                      className="flex block tracking-wide text-black text-black  sm:text-sm lg:text-base mb-1"
-                      htmlFor="grid-state"
-                    >
-                      Grant Start Date *
-                    </label>
-                    <input
-                      className={`w-full appearance-none block w-full h-[42px] bg-grey-150 placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500 ${
-                        grantStartDate ? "text-black" : "text-gray-500"
-                      }`}
-                      id="grid-city"
-                      type="date"
-                      value={grantStartDate ? grantStartDate.split("T")[0] : ""}
-                      onChange={(e) =>
-                        _setGrantStartDate(e.target.value as TDateISO)
-                      }
-                    />
-                  </div>
-                </div>
-
-                {/*Estimated completition time and input - need to make wider (length of application date and grant start date)*/}
-                <div className="w-full mt-11">
-                  <label
-                    className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
-                    htmlFor="grid-state"
-                  >
-                    Estimated Completion Time (in hours) *
-                  </label>
-                  <input
-                    type="number"
-                    min="0"
-                    className="appearance-none block w-full h-[42px] bg-grey-150 text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500"
-                    id="grid-city"
-                    value={estimatedCompletionTimeInHours}
-                    onChange={(e) =>
-                      _setEstimatedCompletionTimeInHours(Number(e.target.value))
-                    }
-                  />
-                </div>
-              </div>
-
-              {/*Right column*/}
-              <div className="w-[45%] sm:pl-4 lg:pl-4">
-                {/*Report deadlines label and grey box */}
-                <div className="h-full">
-                  <label
-                    className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
-                    htmlFor="grid-zip"
-                  >
-                    Report Deadlines
-                  </label>
-                  <div
-                    className="p-2 rounded-[1.2rem] sm:h-52 xl:h-40 overflow-y-auto overflow-x-hidden bg-grey-400 border border-black"
-                  >
-                    <button
-                      className="w-full h-[42px] text-xs mb-2 flex items-center justify-center bg-primary-800 hover:bg-primary-900 text-black border border-black"
-                      onClick={_addReportDate}
-                    >
-                      Add Deadline +
-                    </button>
-                    {reportDates.map((date, index) => (
-                      <div key={index} className="flex gap-2 mb-2 w-full">
-                        <input
-                          key={index}
-                          className="flex-1 min-w-0 h-[42px] bg-grey-150 text-black rounded border border-black"
-                          type="date"
-                          value={
-                            date
-                              ? date.includes("T")
-                                ? date.split("T")[0]
-                                : date
-                              : ""
-                          }
-                          onChange={(e) => {
-                            const newDates = [...reportDates];
-                            newDates[index] = e.target.value as TDateISO | "";
-                            setReportDates(newDates);
-                          }}
-                        />
-                        {reportDates.length > 0 && (
-                          <button
-                            className="w-5 h-[42px] flex-shrink-0 rounded text-white font-bold flex items-center justify-center bg-red-light border border-black"
-                            onClick={() => _removeReportDate(index)}
-                          >
-                            ✕
-                          </button>
-                        )}
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="flex flex-col justify-between mt-4 h-[160px]">
-              {/*Timeline label and input */}
-              <div className="w-full">
-                <label
-                  className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
-                  htmlFor="grid-first-name"
-                >
-                  Timeline (in years) *
-                </label>
-                <input
-                  className="appearance-none block w-full h-[42px] bg-grey-150 text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none"
-                  type="number"
-                  min="0"
-                  placeholder="Type Here"
-                  value={timelineInYears}
-                  onChange={(e) => _setTimelineInYears(Number(e.target.value))}
-                />
-              </div>
-
-              {/*Amount label and input */}
-              <div className="w-full ">
-                <label
-                  className="flex block tracking-wide text-black placeholder:text-gray-400  sm:text-sm lg:text-base mb-1"
-                  htmlFor="grid-first-name"
-                >
-                  Amount (in $) *
-                </label>
-                <CurrencyInput
-                  className="appearance-none block w-full h-[42px] mb-[2px] bg-grey-150 text-gray-700 border border-black rounded px-4 leading-tight focus:outline-none "
-                  min={0}
-                  decimalsLimit={2}
-                  placeholder="Type Here"
-                  value={amount}
-                  onValueChange={(value) => _setAmount(Number(value))}
-                />
-              </div>
-            </div>
-          </div>
-          {/*Right column */}
-          <div className="w-1/2 pl-5">
-            {/*POC row */}
-            <div className="flex w-full mb-16">
-              {/*BCAN POC div*/}
-              <div className="w-full pr-3">
-                  <label className="mb-1 flex block tracking-wide  sm:text-sm lg:text-base text-black" htmlFor="grid-zip">
-                      BCAN POC *
-                  </label>
-                  {/*Box div*/} 
-                  <div className="items-center flex p-3 rounded-[1.2rem] h-full bg-primary-800 border border-black">
-                      <MdOutlinePerson2 className="w-1/4 h-full p-1"/>
-                      <div className="w-3/4">
-                      <UserDropdown
-                      selectedUser={bcanPocName && bcanPocEmail ? {name: bcanPocName, email: bcanPocEmail } : null}
-                      onSelect={(user) => {
-                        setBcanPocName(user.firstName + " " + user.lastName);
-                        setBcanPocEmail(user.email)
-                      }}
-                      placeholder="Name"
-                      />
-                        <input className="w-full h-[48px] bg-grey-150 text-gray-700 rounded border border-black"
-                         placeholder="e-mail" 
-                         value={bcanPocEmail}
-                         readOnly
-                         />
-                      </div> 
-                  </div>
-                </div>
-
-              {/*Grant Provider POC div*/}
-              <div className="w-full pl-3">
-                <label
-                  className="mb-1 flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1 text-left"
-                  htmlFor="grid-zip"
-                >
-                  Grant Provider POC
-                </label>
-                {/*Box div*/}
-                <div
-                  className="flex p-3 rounded-[1.2rem] items-center h-full bg-primary-800 border border-black"
-                >
-                  <MdOutlinePerson2 className="sm:p-1 lg:p-2 w-1/4 h-full" />
-                  <div className="w-3/4">
-                    <input
-                      className="w-full h-[42px] bg-grey-150 text-gray-700 rounded border border-black"
-                      id="grid-city"
-                      placeholder="Name"
-                      value={grantProviderPocName}
-                      onChange={(e) => setGrantProviderPocName(e.target.value)}
-                    />
-                    <input
-                      className="w-full h-[42px] bg-grey-150 text-gray-700 rounded border border-black"
-                      id="grid-city"
-                      placeholder="e-mail"
-                      value={grantProviderPocEmail}
-                      onChange={(e) => setGrantProviderPocEmail(e.target.value)}
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/*bottom  right row*/}
-            <div className="flex w-full">
-              {/* Select option menus */}
-              <div className="w-1/2 flex flex-col pr-3 justify-between">
-                {/*Qualify label and input */}
-                <div className="w-full ">
-                  <label
-                    className="flex block tracking-wide text-black sm:text-sm lg:text-base mb-1 text-left"
-                    htmlFor="grid-first-name"
-                  >
-                    Does BCAN qualify? *
-                  </label>
-                  <select
-                    className={`appearance-none block w-full h-[42px] bg-grey-150 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none ${
-                      doesBcanQualify == "" ? "text-gray-500" : "text-black"
-                    }`}
-                    id="grid-first-name"
-                    value={doesBcanQualify}
-                    onChange={(e) => _setDoesBcanQualify(e.target.value)}
-                  >
-                    <option value="">Select...</option>
-                    <option value="yes">Yes</option>
-                    <option value="no">No</option>
-                  </select>
-                </div>
-
-                {/*Status label and input */}
-                <div className="w-full">
-                  <label
-                    className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
-                    htmlFor="grid-first-name"
-                  >
-                    Status
-                  </label>
-                  <select
-                    className={`appearance-none block w-full h-[42px] bg-grey-150 placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none ${
-                      status == null ? "text-gray-500" : "text-black"
-                    }`}
-                    id="grid-first-name"
-                    value={status}
-                    onChange={(e) => _setStatus(e.target.value as Status)}
-                  >
-                    <option value="">Select...</option>
-                    <option value="Potential">Potential</option>
-                    <option value="Active">Active</option>
-                    <option value="Inactive">Inactive</option>
-                    <option value="Rejected">Rejected</option>
-                    <option value="Pending">Pending</option>
-                  </select>
-                </div>
-
-                {/*Restriction types label and input */}
-                <div className="w-full">
-                  <label
-                    className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1 text0left"
-                    htmlFor="grid-first-name"
-                  >
-                    Restriction type *
-                  </label>
-                  <select
-                    className={`appearance-none block w-full h-[42px] bg-grey-150 border border-black rounded py-3 px-4 leading-tight focus:outline-none ${
-                      isRestricted == "" ? "text-gray-500" : "text-black"
-                    }`}
-                    id="grid-first-name"
-                    value={isRestricted}
-                    onChange={(e) => _setIsRestricted(e.target.value)}
-                  >
-                    <option value="">Select...</option>
-                    <option className="text-black" value="unrestricted">
-                      Unrestricted
-                    </option>
-                    <option className="text-black" value="restricted">
-                      Restricted
-                    </option>
-                  </select>
-                </div>
-              </div>
-
-              {/*Scope Documents div p-2 h-full w-1/2 flex-col*/}
-              <div className="w-1/2 flex-col pl-3">
-                <label className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1 text-start">
-                  Scope Documents
-                </label>
-
-                {/* Upload button */}
-                {!isAddingAttachment && (
-                  <button
-                    type="button"
-                    onClick={_addAttachment}
-                    className="items-center flex w-full h-[42px] mt-1 mb-2 justify-center  bg-primary-800 hover:bg-primary-900 text-black border border-black"
-                  >
-                    <FiUpload className="mr-2" />
-                    <span>Upload Documents</span>
-                  </button>
-                )}
-
-                {/* Editable attachment rows */}
-                {isAddingAttachment && (
-                  <div className="  mt-1 mb-2">
-                    <div className="gap-2 items-center">
-                      <input
-                        type="text"
-                        placeholder="Name"
-                        className="flex-1 px-2 h-[42px] bg-grey-150 border border-black rounded-md"
-                        value={currentAttachment.attachment_name}
-                        onChange={(e) =>
-                          setCurrentAttachment({
-                            ...currentAttachment,
-                            attachment_name: e.target.value,
-                          })
-                        }
-                      />
-                      <input
-                        type="text"
-                        placeholder="URL"
-                        className="flex-1 px-2 h-[42px] bg-grey-150 border border-black rounded-md"
-                        value={currentAttachment.url}
-                        onChange={(e) =>
-                          setCurrentAttachment({
-                            ...currentAttachment,
-                            url: e.target.value,
-                          })
-                        }
-                      />
-                      <select
-                        className="h-[42px] bg-grey-150 border border-black rounded-md px-2 items-center justify-center"
-                        value={currentAttachment.type}
-                        onChange={(e) =>
-                          setCurrentAttachment({
-                            ...currentAttachment,
-                            type: Number(e.target.value) as AttachmentType,
-                          })
-                        }
-                      >
-                        <option value={AttachmentType.SCOPE_DOCUMENT}>
-                          Scope
-                        </option>
-                        <option value={AttachmentType.SUPPORTING_RESOURCE}>
-                          Supporting
-                        </option>
-                      </select>
-
-                      <div className="flex justify-end">
-                        <button
-                          type="button"
-                          className="mr-2 h-[21px] bg-grey-400 text-black border border-black rounded-md flex items-center justify-center"
-                          onClick={() => setIsAddingAttachment(false)}
-                        >
-                          Close
-                        </button>
-
-                        <button
-                          type="button"
-                          onClick={_addAttachment}
-                          className="h-[21px] bg-primary-800 text-black border border-black rounded-md flex items-center justify-center"
-                        >
-                          Add +
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                )}
-
-                {/* Gray box showing added links */}
-                <div
-                  className={`p-2 rounded-md overflow-y-auto overflow-x-hidden bg-grey-400 border border-black ${
-                    isAddingAttachment ? "h-[77px]" : "h-[168px]"
-                  }`}
-                >
-                  {attachments
-                    .filter((a) => a.url) // show only filled ones
-                    .map((attachment, index) => (
-                      <div
-                        key={index}
-                        className="flex gap-2 mb-2 w-full items-center"
-                      >
-                        <div
-                          className="overflow-hidden rounded-md flex-1 min-w-0 h-[42px] bg-grey-150 text-gray-700 border border-black flex items-center px-3 justify-between"
-                        >
-                          <a
-                            href={attachment.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-blue-600 underline truncate"
-                          >
-                            {attachment.attachment_name || "Untitled"}
-                          </a>
-                          <span className="ml-2 text-xs text-gray-600">
-                            (
-                            {attachment.type === AttachmentType.SCOPE_DOCUMENT
-                              ? "Scope"
-                              : "Supporting"}
-                            )
-                          </span>
-                        </div>
-                        <button
-                          className="w-5 h-[42px] flex-shrink-0 rounded text-white font-bold flex items-center justify-center bg-red-light border border-black"
-                          onClick={() => _removeAttachment(index)}
-                        >
-                          ✕
-                        </button>
-                      </div>
-                    ))}
-                </div>
-              </div>
-              {/*End bottom right row */}
-            </div>
-            {/*End right column */}
-          </div>
-          {/*End grid content*/}
-        </div>
-        {/*Description and input */}
-        <div className="w-full mt-4">
-          <label
-            className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
-            htmlFor="grid-first-name"
-          >
-            Description
-          </label>
-          <textarea
-            className="h-48 block w-full bg-grey-150 text-gray-700 border border-black rounded py-3 px-4 mb-3 leading-tight"
-            id="grid-first-name"
-            value={description}
-            onChange={(e) => _setDescription(e.target.value)}
-          />
-        </div>
-        <div className="button-row">
-          <button
-            className="h-[42px] flex items-center justify-center text-black bg-white border border-black"
-            onClick={onClose}
-          >
-            Close
-          </button>
-          <button
-            className="h-[42px] flex items-center justify-center text-black bg-primary-800 border border-black"
-            onClick={handleSubmit}
-          >
-            Save
-          </button>
-        </div>
-        {/*End modal content */}
-      </div>
-      {/* Error Popup */}
-      {showErrorPopup && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div
-            className="bg-white rounded-md p-6 max-w-md mx-4 border-2 border-black"
-          >
-            <h3 className="text-xl font-bold mb-2">
-              Error
-            </h3>
-            <p className="mb-4">{_errorMessage}</p>
-            <button
-              onClick={() => setShowErrorPopup(false)}
-              className="px-4 py-2 rounded hover:opacity-80 bg-primary-800 text-black border border-black"
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      )}
-      {/*End modal overlay */}
-    </div>
-  );
-});
-
-export default NewGrantModal;
diff --git a/frontend/src/main-page/grants/new-grant/UserDropdown.tsx b/frontend/src/main-page/grants/new-grant/UserDropdown.tsx
deleted file mode 100644
index a284c604..00000000
--- a/frontend/src/main-page/grants/new-grant/UserDropdown.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { User } from '../../../../../middle-layer/types/User';
-import { getAppStore } from '../../../external/bcanSatchel/store';
-import '../styles/UserDropdown.css';
-
-interface UserDropdownProps {
-  selectedUser: { name: string; email: string } | null;
-  // Might be worth combining first and last into one fieldto display
-  onSelect: (user: { firstName: string; lastName : string; email: string }) => void;
-  placeholder?: string;
-}
-
-const UserDropdown: React.FC<UserDropdownProps> = ({ 
-  selectedUser, 
-  onSelect,
-  placeholder = "Select a user"
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchTerm, setSearchTerm] = useState('');
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  
-  const store = getAppStore();
-  const activeUsers = store.activeUsers || [];
-
-  // Filter users based on search
-  const filteredUsers = activeUsers.filter((user: User) =>
-    user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-  user.lastName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    user.email.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  const handleUserSelect = (user: User) => {
-    onSelect({ firstName: user.firstName,lastName:user.lastName, email: user.email });
-    setIsOpen(false);
-    setSearchTerm('');
-  };
-
-  return (
-    <div ref={dropdownRef} className="user-dropdown-container">
-      {/* Input field that opens dropdown */}
-      <input
-        className="user-dropdown-input"
-        placeholder={placeholder}
-        value={selectedUser ? selectedUser.name : searchTerm}
-        onChange={(e) => {
-          setSearchTerm(e.target.value);
-          setIsOpen(true);
-        }}
-        onFocus={() => setIsOpen(true)}
-        readOnly={!!selectedUser}
-      />
-
-      {/* Dropdown menu */}
-      {isOpen && (
-        <div className="user-dropdown-menu">
-          {filteredUsers.length > 0 ? (
-            filteredUsers.map((user: User) => (
-              <div
-                key={user.email}
-                onClick={() => handleUserSelect(user)}
-                className="user-dropdown-item"
-              >
-                <div className="user-dropdown-name">{user.firstName} {user.lastName}</div>
-                <div className="user-dropdown-email">{user.email}</div>
-              </div>
-            ))
-          ) : (
-            <div className="user-dropdown-empty">No users found</div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default UserDropdown;
\ No newline at end of file
diff --git a/frontend/src/main-page/grants/new-grant/processGrantDataEditSave.ts b/frontend/src/main-page/grants/new-grant/processGrantDataEditSave.ts
deleted file mode 100644
index ca899a84..00000000
--- a/frontend/src/main-page/grants/new-grant/processGrantDataEditSave.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Grant } from "../../../../../middle-layer/types/Grant";
-import { api } from "../../../api.ts";
-import { fetchGrants } from "../filter-bar/processGrantData.ts";
-
-// save a new grant
-export const createNewGrant = async (newGrant: Grant) => {
-  try {
-    const response = await api("/grant/new-grant", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(newGrant),
-    });
-
-    if (response.ok) {
-      await fetchGrants();
-      return { success: true };
-    } else {
-      const errorData = await response.json();
-      throw new Error(errorData.message || "Failed to create grant");
-    }
-  } catch (error) {
-    console.error("Error creating grant:", error);
-    console.log(newGrant);
-    console.log(newGrant.attachments);
-    return {
-      success: false,
-      error: error instanceof Error ? error.message : "Server error. Please try again."
-    };
-  }
-};
-
-export const saveGrantEdits = async (updatedGrant: Grant) => {
-  try {
-    const response = await api("/grant/save", {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(updatedGrant),
-    });
-
-    if (response.ok) {
-      await fetchGrants();
-      return { success: true };
-    } else {
-      const errorData = await response.json();
-      throw new Error(errorData.message || "Failed to update grant");
-    }
-  } catch (error) {
-    console.error("Error updating grant:", error);
-    return {
-      success: false,
-      error: error instanceof Error ? error.message : "Server error. Please try again."
-    };
-  }
-};
\ No newline at end of file
diff --git a/frontend/src/main-page/grants/styles/CalendarDropdown.css b/frontend/src/main-page/grants/styles/CalendarDropdown.css
deleted file mode 100644
index 5813e9bb..00000000
--- a/frontend/src/main-page/grants/styles/CalendarDropdown.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.calendar-dropdown {
-    position: relative;
-}
-
-.calendar-toggle-button {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    border: 0.1rem solid black;
-    border-radius: 15px;
-    background-color: white;
-    cursor: pointer;
-    font-size: 1rem;
-    font-family: var(--font-sans);
-    width: 100%;
-    height: 42px;
-}
-
-.calendar-toggle-button:hover {
-    background-color: var(--color-primary-700);
-    border-color: black;
-}
-
-.calendar-popup {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin-top: 0.5rem;
-    border-radius: 15px;
-    z-index: 9999;
-    background-color: white;
-    padding: 1rem;
-    border: 0.1rem solid lightgray;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-}
\ No newline at end of file
diff --git a/frontend/src/main-page/grants/styles/NewGrantModal.css b/frontend/src/main-page/grants/styles/NewGrantModal.css
deleted file mode 100644
index 91dccb99..00000000
--- a/frontend/src/main-page/grants/styles/NewGrantModal.css
+++ /dev/null
@@ -1,184 +0,0 @@
-/* NewGrantModal.css */
-
-/* 
-  Modal overlay covers the entire screen with a semi-transparent backdrop.
-  We'll keep it scrollable for tall content.
-*/
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 2;
-}
-
-/* 
-    Container for the modal.
-    We'll use a background color similar to the screenshot's peach tone.
-  */
-.modal-content {
-  background: white; /* Peach background */
-  max-width: 85%;
-  max-height: 85%; /* More width to accommodate multiple columns */
-  padding: 2rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-  border: 2px solid black;
-  border-radius: 1.2rem;
-  flex: 1 1 auto;
-  box-sizing: border-box;
-
-  /* Scroll if content exceeds max height */
-}
-
-/*
-  h-16 block w-full text-gray-700 border rounded py-3 px-4 mb-3 leading-tight
-  
-  /* 
-    We'll define a grid layout that lines up labels and inputs
-    in a more horizontal fashion, similar to your screenshot.
-  */
-.new-grant-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* label-col is narrower, input-col is wider */
-  grid-auto-rows: auto;
-  column-gap: 1rem;
-  row-gap: 1rem;
-}
-
-/* For label columns and input columns specifically */
-.label-col {
-  align-self: center; /* vertically center label text */
-  font-weight: bold;
-}
-
-.left-cols {
-  grid-column: 1 / span 3;
-  text-align: left;
-}
-
-.date-entry {
-  text-align: left;
-  display: flex;
-  align-self: center;
-  gap: 10px;
-}
-
-.inputs {
-  padding-bottom: 20px;
-}
-
-/* 
-    If you want certain rows to span the entire width,
-    you can place them outside the grid or use grid-column: span 2;
-  */
-
-/* Headline / Title */
-.modal-content h2 {
-  grid-column: 1 / span 2; /* let the title span across both columns */
-  margin-top: 0;
-  margin-bottom: 1rem;
-  font-size: var(--font-size-2xl);
-  font-weight: 600;
-  text-align: center;
-  text-align: left;
-}
-
-/* For text inputs, selects, textareas */
-.modal-content input,
-.modal-content select,
-.modal-content textarea {
-  width: 100%;
-  padding: 0.6rem;
-  font-size: var(--font-size-base);
-  margin-bottom: 0.25rem;
-  border: 0.075rem solid black;
-  border-radius: 15px;
-  box-sizing: border-box;
-  background-color: var(--color-grey-150);
-  color: black;
-}
-
-/* Make textareas bigger by default */
-.modal-content textarea {
-  min-height: 80px;
-  resize: vertical;
-}
-
-/* 
-    POC boxes
-    We'll place them in the input column, so they have a bit of 
-    internal spacing.
-  */
-.poc-box {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* Each POC entry row */
-.poc-entry {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* Each report date entry row */
-.report-date-entry {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* The dropdown for Email/Phone in each POC entry */
-.poc-entry select {
-  min-width: 120px;
-}
-
-/* Attachments container in the input-col */
-.attachments-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* Each attachment row */
-.attachment-entry {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* 
-    For the row of buttons (Close / Save), 
-    let's let them span the full grid and appear at the bottom.
-  */
-.button-row {
-  grid-column: 1 / span 2;
-  display: flex;
-  justify-content: flex-end;
-  gap: 1rem;
-  margin-top: 2rem;
-}
-
-/* 
-    Buttons 
-  */
-.modal-content button {
-  border: black 0.075rem solid;
-  color: black;
-  padding: 0.75rem 1.25rem;
-  font-size: var(--font-size-base);
-  border-radius: 15px;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
diff --git a/frontend/src/main-page/grants/styles/UserDropdown.css b/frontend/src/main-page/grants/styles/UserDropdown.css
deleted file mode 100644
index 9f83ab32..00000000
--- a/frontend/src/main-page/grants/styles/UserDropdown.css
+++ /dev/null
@@ -1,77 +0,0 @@
-.user-dropdown-container {
-  position: relative;
-  width: 100%;
-}
-
-.user-dropdown-input {
-  height: 48px;
-  width: 100%;
-  background-color: var(--color-grey-150);
-  border-style: solid;
-  border-color: black;
-  border-width: 1px;
-  border-radius: 4px;
-  padding: 0 12px;
-  cursor: pointer;
-  color: var(--color-grey-800);
-  font-size: 16px;
-}
-
-.user-dropdown-input:focus {
-  outline: none;
-  border-color: var(--color-primary-800);
-}
-
-.user-dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  max-height: 200px;
-  overflow-y: auto;
-  background-color: var(--color-grey-150);
-  border-style: solid;
-  border-color: black;
-  border-width: 1px;
-  border-radius: 4px;
-  margin-top: 4px;
-  z-index: 1000;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  scrollbar-width: none;
-}
-
-.user-dropdown-item {
-  padding: 12px;
-  cursor: pointer;
-  border-bottom: 1px solid var(--color-grey-400);
-  transition: background-color 0.2s;
-}
-
-.user-dropdown-item:hover {
-  background-color: var(--color-grey-400);
-}
-
-.user-dropdown-item:last-child {
-  border-bottom: none;
-}
-
-.user-dropdown-name {
-  font-size: 16px;
-  color: black;
-  font-weight: 500;
-}
-
-.user-dropdown-email {
-  font-size: 14px;
-  color: gray;
-  margin-top: 2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.user-dropdown-empty {
-  padding: 12px;
-  color: gray;
-  text-align: center;
-}
\ No newline at end of file
diff --git a/frontend/src/main-page/navbar/NavBar.tsx b/frontend/src/main-page/navbar/NavBar.tsx
index 69f5e6c5..8a16bd67 100644
--- a/frontend/src/main-page/navbar/NavBar.tsx
+++ b/frontend/src/main-page/navbar/NavBar.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import {
+  clearAllFilters,
   logoutUser
 } from "../../external/bcanSatchel/actions.ts";
 import { observer } from "mobx-react-lite";
@@ -27,11 +28,12 @@ const NavBar: React.FC = observer(() => {
 
   const handleLogout = () => {
     logoutUser();
+    clearAllFilters();
     navigate("/login");
   };
   
   return (
-    <aside className="left-0 top-0 h-screen w-48 lg:w-56 bg-white flex flex-col">
+    <aside className="left-0 top-0 min-h-screen w-48 lg:w-56 bg-white flex flex-col">
       {/* Logo at top */}
       <div className="p-6 flex items-center justify-center mr-2">
         <img className="w-12 h-12" src={NavBarBranding.logo} alt={`${NavBarBranding.name} Logo`} />
diff --git a/frontend/src/main-page/navbar/Bell.tsx b/frontend/src/main-page/notifications/Bell.tsx
similarity index 96%
rename from frontend/src/main-page/navbar/Bell.tsx
rename to frontend/src/main-page/notifications/Bell.tsx
index f3a3e6fc..da4e5531 100644
--- a/frontend/src/main-page/navbar/Bell.tsx
+++ b/frontend/src/main-page/notifications/Bell.tsx
@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBell } from "@fortawesome/free-solid-svg-icons";
 import { useEffect } from "react";
-import NotificationPopup from "../notifications/NotificationPopup";
+import NotificationPopup from "./NotificationPopup";
 import { setNotifications as setNotificationsAction } from "../../external/bcanSatchel/actions";
 import { getAppStore } from "../../external/bcanSatchel/store";
 import { observer } from "mobx-react-lite";
diff --git a/frontend/src/main-page/settings/Settings.tsx b/frontend/src/main-page/settings/Settings.tsx
index 109ac02c..bb857234 100644
--- a/frontend/src/main-page/settings/Settings.tsx
+++ b/frontend/src/main-page/settings/Settings.tsx
@@ -168,7 +168,7 @@ function Settings() {
         }
 
   return (
-    <div className="max-w-5xl ">
+    <div className="max-w-5xl min-h-[86vh]">
       <h1 className="text-3xl lg:text-4xl font-bold mb-8 flex justify-start">Settings</h1>
 
       <div className="mb-12">
diff --git a/frontend/src/main-page/users/UsersPage.tsx b/frontend/src/main-page/users/UsersPage.tsx
index 639527a0..e1bd08d0 100644
--- a/frontend/src/main-page/users/UsersPage.tsx
+++ b/frontend/src/main-page/users/UsersPage.tsx
@@ -3,12 +3,12 @@ import { useState } from "react";
 
 import { observer } from "mobx-react-lite";
 import Button from "../../components/Button.tsx";
-import UserSearch from "./UserSearch.tsx";
+import UserSearch from "./components/UserSearch.tsx";
 import { ProcessUserData } from "./processUserData.ts";
-import UserRow from "./user-rows/UserRow.tsx";
-import UserMenu from "./user-rows/UserMenu.tsx";
-import UserRowHeader from "./user-rows/UserRowHeader.tsx";
-import UserApprove from "./user-rows/UserApprove.tsx";
+import UserRow from "./components/UserRow.tsx";
+import UserMenu from "./components/UserMenu.tsx";
+import UserRowHeader from "./components/UserRowHeader.tsx";
+import UserApprove from "./components/UserApprove.tsx";
 
 const UsersPage = observer(() => {
   const [showAll, setShowAll] = useState(true);
@@ -30,9 +30,9 @@ const UsersPage = observer(() => {
   // const currentPageUsers = filteredUsers.slice(pageStartIndex, pageEndIndex);
   const currentPageUsers = filteredUsers; // Temporarily disable pagination by showing all users
   return (
-    <div className="grant-page w-full items-end">
+    <div className="grant-page w-full min-h-[86vh] items-end">
       <UserSearch />
-      <div className="flex w-full py-2 gap-2">
+      <div className="flex w-full py-2 gap-2 text-sm lg:text-base">
         <Button
           text="Active Users"
           onClick={() => setShowAll(true)}
@@ -51,7 +51,7 @@ const UsersPage = observer(() => {
       </div>
 
       <div className="flex flex-row w-full gap-2 justify-between mt-4 bg-white rounded-md">
-        <div className="flex flex-col w-full overflow-y-scroll text-start">
+        <div className="flex flex-col w-full overflow-y-auto text-start">
           <UserRowHeader />
           {currentPageUsers.map((user) => (
             <div key={user.email}>
diff --git a/frontend/src/main-page/users/user-rows/UserApprove.tsx b/frontend/src/main-page/users/components/UserApprove.tsx
similarity index 100%
rename from frontend/src/main-page/users/user-rows/UserApprove.tsx
rename to frontend/src/main-page/users/components/UserApprove.tsx
diff --git a/frontend/src/main-page/users/user-rows/UserMenu.tsx b/frontend/src/main-page/users/components/UserMenu.tsx
similarity index 97%
rename from frontend/src/main-page/users/user-rows/UserMenu.tsx
rename to frontend/src/main-page/users/components/UserMenu.tsx
index e94e7394..b613fbdc 100644
--- a/frontend/src/main-page/users/user-rows/UserMenu.tsx
+++ b/frontend/src/main-page/users/components/UserMenu.tsx
@@ -1,7 +1,7 @@
 import { Menu } from "@chakra-ui/react";
 import { UserStatus } from "../../../../../middle-layer/types/UserStatus";
 import { faUserPen, faTrash } from "@fortawesome/free-solid-svg-icons";
-import ActionConfirmation from "../../../custom/ActionConfirmation";
+import ActionConfirmation from "../../../components/ActionConfirmation";
 import { useState } from "react";
 import { User } from "../../../../../middle-layer/types/User";
 import Button from "../../../components/Button";
diff --git a/frontend/src/main-page/users/user-rows/UserPositionCard.tsx b/frontend/src/main-page/users/components/UserPositionCard.tsx
similarity index 100%
rename from frontend/src/main-page/users/user-rows/UserPositionCard.tsx
rename to frontend/src/main-page/users/components/UserPositionCard.tsx
diff --git a/frontend/src/main-page/users/user-rows/UserRow.tsx b/frontend/src/main-page/users/components/UserRow.tsx
similarity index 92%
rename from frontend/src/main-page/users/user-rows/UserRow.tsx
rename to frontend/src/main-page/users/components/UserRow.tsx
index 481cf90c..51a15c45 100644
--- a/frontend/src/main-page/users/user-rows/UserRow.tsx
+++ b/frontend/src/main-page/users/components/UserRow.tsx
@@ -17,7 +17,7 @@ const UserRow = ({ user, action }: UserRowProps) => {
         <Avatar
           src={user.profilePicUrl}
           alt="Profile"
-          className="max-w-12 mr-4 rounded-full object-cover hidden lg:block"
+          className="w-12 h-12 object-cover mr-4 rounded-full hidden lg:block"
           fallbackSrc={logo}
         />
         {user.firstName}&nbsp;{user.lastName}
diff --git a/frontend/src/main-page/users/user-rows/UserRowHeader.tsx b/frontend/src/main-page/users/components/UserRowHeader.tsx
similarity index 100%
rename from frontend/src/main-page/users/user-rows/UserRowHeader.tsx
rename to frontend/src/main-page/users/components/UserRowHeader.tsx
diff --git a/frontend/src/main-page/users/user-rows/UserRowHeaderButton.tsx b/frontend/src/main-page/users/components/UserRowHeaderButton.tsx
similarity index 86%
rename from frontend/src/main-page/users/user-rows/UserRowHeaderButton.tsx
rename to frontend/src/main-page/users/components/UserRowHeaderButton.tsx
index 0fde6780..a148699f 100644
--- a/frontend/src/main-page/users/user-rows/UserRowHeaderButton.tsx
+++ b/frontend/src/main-page/users/components/UserRowHeaderButton.tsx
@@ -16,10 +16,9 @@ interface UserRowHeaderButtonProps {
 const UserRowHeaderButton = (props: UserRowHeaderButtonProps) => {
   return (
     <button
-      className="font-medium flex items-centerpx-0 hover:border-white col-span-1 justify-start hover:text-grey-500 text-grey-600"
+      className="font-medium flex w-fit items-center px-0 hover:border-white col-span-1 justify-start hover:text-grey-500 text-grey-600"
       onClick={props.onClick}
     >
-      <button />
       <span className="mr-2">
         <FontAwesomeIcon
           icon={
diff --git a/frontend/src/main-page/users/UserSearch.tsx b/frontend/src/main-page/users/components/UserSearch.tsx
similarity index 76%
rename from frontend/src/main-page/users/UserSearch.tsx
rename to frontend/src/main-page/users/components/UserSearch.tsx
index 2f1c3281..5f3ec4f1 100644
--- a/frontend/src/main-page/users/UserSearch.tsx
+++ b/frontend/src/main-page/users/components/UserSearch.tsx
@@ -1,9 +1,9 @@
 import { useState } from "react";
 import Fuse from "fuse.js";
-import { getAppStore } from "../../external/bcanSatchel/store";
-import { updateUserQuery } from "../../external/bcanSatchel/actions";
-import { User } from "../../../../middle-layer/types/User";
-import SearchBar from "../../components/SearchBar";
+import { getAppStore } from "../../../external/bcanSatchel/store";
+import { updateUserQuery } from "../../../external/bcanSatchel/actions";
+import { User } from "../../../../../middle-layer/types/User";
+import SearchBar from "../../../components/SearchBar";
 
 function UserSearch() {
   const [userInput, setUserInput] = useState(getAppStore().userQuery || "");
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index a6de3a09..6bb4e773 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -26,21 +26,21 @@
   --font-size-4xl: 2.25rem;
   --font-size-hero: 3.2rem;
 
-  --color-green-dark: #007E4C;
-  --color-green: #04A967;
-  --color-green-light: #D0FFEF;
+  --color-green-dark: #007e4c;
+  --color-green: #04a967;
+  --color-green-light: #d0ffef;
 
-  --color-blue-dark: #006CA1;
-  --color-blue: #006CA1;
-  --color-blue-light: #D0EDFF;
+  --color-blue-dark: #006ca1;
+  --color-blue: #006ca1;
+  --color-blue-light: #d0edff;
 
-  --color-yellow-dark: #9B6000;
-  --color-yellow-light: #FFF0D3;
+  --color-yellow-dark: #9b6000;
+  --color-yellow-light: #fff0d3;
 
-  --color-red-dark: #C80000;
-  --color-red: #C80000;
-  --color-red-light: #FFD8D8;
-  --color-red-lightest: #FFF0F0;
+  --color-red-dark: #c80000;
+  --color-red: #c80000;
+  --color-red-light: #ffd8d8;
+  --color-red-lightest: #fff0f0;
 
   --color-primary-900: #e16f39;
   --color-primary-800: #e78c61;
@@ -67,7 +67,7 @@
   --color-grey-400: #ced4da;
   --color-grey-300: #dee2e6;
   --color-grey-200: #e9ecef;
-  --color-grey-150: #F2F2F2;
+  --color-grey-150: #f2f2f2;
   --color-grey-100: #f8f9fa;
 
   --color-black: #000000;
@@ -126,11 +126,7 @@ textarea {
 }
 
 button:hover {
-  border-color:  var(--color-primary-900);
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+  border-color: var(--color-primary-900);
 }
 
 @media (prefers-color-scheme: light) {
@@ -152,6 +148,39 @@ input {
 }
 
 input:focus {
-  border-color: var(--color-primary-900);
-  outline: transparent;
+  outline: 2px solid var(--color-primary-900);
+  /* outline: transparent; */
+}
+
+textarea:focus {
+  outline: 2px solid var(--color-primary-900);
+  /* outline: transparent; */
+}
+
+button:focus,
+button:focus-visible {
+  outline: 1px solid var(--color-primary-700);
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator {
+  /* Example: Invert the icon color for dark backgrounds */
+  color-scheme: light;
+}
+
+::-webkit-scrollbar {
+  width: 8px; 
 }
+
+::-webkit-scrollbar-track {
+  background: var(--color-grey-200); 
+  border-radius: 0.75rem; 
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-grey-400); 
+  border-radius: 0.75rem; 
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-grey-500); 
+}
\ No newline at end of file
diff --git a/middle-layer/types/Attachment.ts b/middle-layer/types/Attachment.ts
index 3df5b8ba..56536ce7 100644
--- a/middle-layer/types/Attachment.ts
+++ b/middle-layer/types/Attachment.ts
@@ -15,5 +15,5 @@ enum AttachmentType {
 export default interface Attachment {
     attachment_name: string,
     url: string,
-    type: AttachmentType
+    type?: AttachmentType
 }
\ No newline at end of file
diff --git a/middle-layer/types/Grant.ts b/middle-layer/types/Grant.ts
index 620d3597..03f3a339 100644
--- a/middle-layer/types/Grant.ts
+++ b/middle-layer/types/Grant.ts
@@ -12,6 +12,7 @@ export interface Grant {
     amount: number; // amount of money given by the grant
     grant_start_date: TDateISO; // when the grant money will start being issued
     application_deadline: TDateISO; // when was grant submission due
+    application_date?: TDateISO; // when was grant submitted
     report_deadlines?: TDateISO[];  // multiple report dates
     description?: string; // any additional information about the grant
     timeline: number; // how long the grant will last BCAN (e.g. grant will last 6 months --> 0.5 years)