From 0ed204fc4ec5c5dc8346d1f7713fd092bb491933 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sun, 15 Feb 2026 17:20:20 -0500
Subject: [PATCH 1/4] Stylign fixes

---
 frontend/src/main-page/MainPage.tsx           | 32 ++++++++++---------
 .../src/main-page/dashboard/Dashboard.tsx     |  8 ++---
 frontend/src/main-page/navbar/NavBar.tsx      |  2 +-
 frontend/src/main-page/settings/Settings.tsx  |  4 +--
 frontend/src/styles/Footer.css                |  6 ++--
 5 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/frontend/src/main-page/MainPage.tsx b/frontend/src/main-page/MainPage.tsx
index 42e0b1f..e7a2597 100644
--- a/frontend/src/main-page/MainPage.tsx
+++ b/frontend/src/main-page/MainPage.tsx
@@ -11,22 +11,24 @@ import Settings from "./settings/Settings";
 function MainPage() {
 
   return (
-    <div className="w-full h-screen flex flex-row">
-      <NavBar/>
-      <div className="flex-1 overflow-auto">
-      <Routes>
-        <Route path="/dashboard" element={<Dashboard />} />
-        <Route path="/all-grants" element={<GrantPage showOnlyMyGrants={false} />} />
-        <Route path="/my-grants" element={<GrantPage showOnlyMyGrants={true} />} /> 
-        <Route path="/users" element={<Users />} />
-        <Route path="/restricted" element={<RestrictedPage />} />
-        <Route path="/cash-flow" element={<CashFlowPage />} />
-        <Route path="/settings" element={<Settings />} />
-        {/* fallback route */}
-        <Route path="*" element={<GrantPage />} />
-      </Routes>
+    <div className="w-full flex-row flex">
+      <div>
+<NavBar />
       </div>
-    </div>
+    <div className="px-6 lg:px-12 py-8 pt-16 w-full">
+    <Routes>
+      <Route path="/dashboard" element={<Dashboard />} />
+      <Route path="/all-grants" element={<GrantPage showOnlyMyGrants={false} />} />
+      <Route path="/my-grants" element={<GrantPage showOnlyMyGrants={true} />} />
+      <Route path="/users" element={<Users />} />
+      <Route path="/restricted" element={<RestrictedPage />} />
+      <Route path="/cash-flow" element={<CashFlowPage />} />
+      <Route path="/settings" element={<Settings />} />
+      <Route path="*" element={<GrantPage />} />
+    </Routes>
+  </div>
+</div>
+
   );
 }
 
diff --git a/frontend/src/main-page/dashboard/Dashboard.tsx b/frontend/src/main-page/dashboard/Dashboard.tsx
index 293cb38..b744008 100644
--- a/frontend/src/main-page/dashboard/Dashboard.tsx
+++ b/frontend/src/main-page/dashboard/Dashboard.tsx
@@ -46,14 +46,14 @@ const Dashboard = observer(() => {
   const { grants } = ProcessGrantData();
 
   return (
-    <div className="dashboard-page px-12 py-4 mb-8 ">
-      <div className="flex flex-row justify-start gap-4 mb-12 mt-12 items-center">
-        <div className="text-3xl font-bold mr-4">Dashboard</div>
+    <div className="dashboard-page">
+      <div className="flex flex-row justify-start gap-4 mb-12 items-center">
+        <div className="text-3xl lg:text-4xl font-bold mr-4">Dashboard</div>
         <DateFilter />
         <CsvExportButton />
       </div>
 
-      <div className="gap-5 grid grid-cols-4">
+      <div className="gap-3 lg:gap-5 grid grid-cols-4">
         {/* ROW 1 */}
         <div className="col-span-2 h-full">
           <KPICards
diff --git a/frontend/src/main-page/navbar/NavBar.tsx b/frontend/src/main-page/navbar/NavBar.tsx
index 7a1a40c..2c93cd8 100644
--- a/frontend/src/main-page/navbar/NavBar.tsx
+++ b/frontend/src/main-page/navbar/NavBar.tsx
@@ -32,7 +32,7 @@ const NavBar: React.FC = observer(() => {
   };
   
   return (
-    <aside className="left-0 top-0 h-screen w-56 bg-white flex flex-col">
+    <aside className="left-0 top-0 h-screen w-56 bg-white flex flex-col rounded-br-2xl">
       {/* Logo at top */}
       <div className="p-6 flex items-center justify-center mr-6">
         <img className="w-12 h-12" src={NavBarBranding.logo} alt={`${NavBarBranding.name} Logo`} />
diff --git a/frontend/src/main-page/settings/Settings.tsx b/frontend/src/main-page/settings/Settings.tsx
index 1753fef..61fe0a4 100644
--- a/frontend/src/main-page/settings/Settings.tsx
+++ b/frontend/src/main-page/settings/Settings.tsx
@@ -4,8 +4,8 @@ import logo from "../../images/logo.svg";
 
 export default function Settings() {
   return (
-    <div className="px-12 py-8 max-w-5xl">
-      <h1 className="text-4xl font-bold mb-8 flex justify-start">Settings</h1>
+    <div className="max-w-5xl ">
+      <h1 className="text-3xl lg:text-4xl font-bold mb-8 flex justify-start">Settings</h1>
 
       <div className="mb-12">
         <div className="flex items-center gap-6">
diff --git a/frontend/src/styles/Footer.css b/frontend/src/styles/Footer.css
index 4911d45..f26b619 100644
--- a/frontend/src/styles/Footer.css
+++ b/frontend/src/styles/Footer.css
@@ -7,13 +7,13 @@
 flex-grow: 1;
 
   
-    background-color: white;
+    background-color: var(--color-grey-400);
     border-color: var(--color-grey-100);
     width: 100%;
     padding: 1em;
     
     /* Text */
-    font-size: 1.3rem;
+    font-size: var(--font-size-base);
     color: var(--color-grey-700);
 }
 
@@ -25,7 +25,7 @@ flex-grow: 1;
 }
 
 .northeastern-uni-caption {
-    font-size: 0.90rem;
+    font-size: var(--font-size-sm);
     line-height: 1rem;
     color: var(--color-grey-600);
 }
\ No newline at end of file

From cb19efb3e248c15e40d56d688954a0dee5f1e607 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sun, 15 Feb 2026 18:08:33 -0500
Subject: [PATCH 2/4] Fixing nav bar scroll with footer

---
 frontend/src/App.tsx                          |  2 -
 frontend/src/main-page/MainPage.tsx           | 43 +++++++-----
 .../dashboard/Charts/DonutMoneyApplied.tsx    |  2 +-
 .../dashboard/Charts/LineChartSuccessRate.tsx |  2 +-
 .../src/main-page/dashboard/DateFilter.tsx    |  4 +-
 .../main-page/dashboard/styles/Dashboard.css  |  1 -
 frontend/src/main-page/navbar/NavBar.tsx      |  2 +-
 frontend/src/routes/AppRoutes.tsx             | 67 ++++++++++++++-----
 frontend/src/styles/Footer.css                | 43 ++++++------
 9 files changed, 102 insertions(+), 64 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index cb89a91..a519c46 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -10,7 +10,6 @@ import { observer } from "mobx-react-lite";
 // Register store and mutators
 import "./external/bcanSatchel/mutators";
 import AppRoutes from "./routes/AppRoutes";
-import Footer from "./main-page/Footer";
 
 /**
  * Main app component that renders routes
@@ -23,7 +22,6 @@ const App = observer(() => {
         <div className="app-container">
           <AppRoutes />
         </div>
-        <Footer/>
         </div>
       </ChakraProvider>
     </Router>
diff --git a/frontend/src/main-page/MainPage.tsx b/frontend/src/main-page/MainPage.tsx
index e7a2597..1b45093 100644
--- a/frontend/src/main-page/MainPage.tsx
+++ b/frontend/src/main-page/MainPage.tsx
@@ -6,29 +6,36 @@ import Users from "./users/Users";
 import RestrictedPage from "./restricted/RestrictedPage";
 import CashFlowPage from "./cash-flow/CashFlowPage";
 import Settings from "./settings/Settings";
-
+import Footer from "./Footer";
 
 function MainPage() {
-
   return (
-    <div className="w-full flex-row flex">
+    <div className="w-full flex-row flex h-screen overflow-hiden">
       <div>
-<NavBar />
+        <NavBar />
       </div>
-    <div className="px-6 lg:px-12 py-8 pt-16 w-full">
-    <Routes>
-      <Route path="/dashboard" element={<Dashboard />} />
-      <Route path="/all-grants" element={<GrantPage showOnlyMyGrants={false} />} />
-      <Route path="/my-grants" element={<GrantPage showOnlyMyGrants={true} />} />
-      <Route path="/users" element={<Users />} />
-      <Route path="/restricted" element={<RestrictedPage />} />
-      <Route path="/cash-flow" element={<CashFlowPage />} />
-      <Route path="/settings" element={<Settings />} />
-      <Route path="*" element={<GrantPage />} />
-    </Routes>
-  </div>
-</div>
-
+      <div className="px-6 lg:px-12 py-8 pt-16 w-full h-screen overflow-y-auto">
+        <div className="min-h-screen mb-16">
+          <Routes>
+            <Route path="/dashboard" element={<Dashboard />} />
+            <Route
+              path="/all-grants"
+              element={<GrantPage showOnlyMyGrants={false} />}
+            />
+            <Route
+              path="/my-grants"
+              element={<GrantPage showOnlyMyGrants={true} />}
+            />
+            <Route path="/users" element={<Users />} />
+            <Route path="/restricted" element={<RestrictedPage />} />
+            <Route path="/cash-flow" element={<CashFlowPage />} />
+            <Route path="/settings" element={<Settings />} />
+            <Route path="*" element={<GrantPage />} />
+          </Routes>
+        </div>
+        <Footer />
+      </div>
+    </div>
   );
 }
 
diff --git a/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx b/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx
index 75b9ac5..936f8a8 100644
--- a/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx
+++ b/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx
@@ -64,7 +64,7 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => {
   };
 
   return (
-    <div className="flex flex-col align-center h-full">
+    <div className="flex flex-col align-center h-full relative">
       <div className={`w-full ${width > 250 ? "mb-0" : "mb-14"}`}>
         {/* Title */}
         <div className="text-md lg:text-lg font-semibold text-left h-full align">
diff --git a/frontend/src/main-page/dashboard/Charts/LineChartSuccessRate.tsx b/frontend/src/main-page/dashboard/Charts/LineChartSuccessRate.tsx
index 774e29a..d8a914c 100644
--- a/frontend/src/main-page/dashboard/Charts/LineChartSuccessRate.tsx
+++ b/frontend/src/main-page/dashboard/Charts/LineChartSuccessRate.tsx
@@ -89,7 +89,7 @@ const LineChartSuccessRate = observer(({ grants }: { grants: Grant[] }) => {
   data.sort((a, b) => a.date.getTime() - b.date.getTime());
 
   return (
-    <div className="h-full">
+    <div className="h-full relative">
       {/* Title */}
       <div className="text-md lg:text-lg w-full text-left font-semibold align absolute">
         Success Rate by Year
diff --git a/frontend/src/main-page/dashboard/DateFilter.tsx b/frontend/src/main-page/dashboard/DateFilter.tsx
index 7fcb8b9..921ec39 100644
--- a/frontend/src/main-page/dashboard/DateFilter.tsx
+++ b/frontend/src/main-page/dashboard/DateFilter.tsx
@@ -51,7 +51,7 @@ const DateFilter: React.FC = observer(() => {
   };
 
   return (
-    <div className="flex flex-col space-y-2 w-64 lg:w-80">
+    <div className="flex flex-col space-y-2 w-64 lg:w-80 relative">
       <button
         className="dashboard-button bg-white inline-flex items-center justify-between px-4 py-2  text-xs lg:text-sm text-center text-white bg-blue-700 rounded-lg"
         type="button"
@@ -68,7 +68,7 @@ const DateFilter: React.FC = observer(() => {
         <FaChevronDown className="ms-2 text-sm" />
       </button>
       <div
-        className={`z-[100] absolute  top-56  w-64 lg:w-80 bg-white ${showDropdown ? "" : "hidden"} rounded-md border-2 border-gray-200 shadow-lg`}
+        className={`z-[100] absolute  top-6 w-64 lg:w-80 bg-white ${showDropdown ? "" : "hidden"} rounded-md border-2 border-gray-200 shadow-lg`}
       >
         <button
           className="close-button absolute top-3 right-4 text-lg"
diff --git a/frontend/src/main-page/dashboard/styles/Dashboard.css b/frontend/src/main-page/dashboard/styles/Dashboard.css
index f22c0ac..1760746 100644
--- a/frontend/src/main-page/dashboard/styles/Dashboard.css
+++ b/frontend/src/main-page/dashboard/styles/Dashboard.css
@@ -52,7 +52,6 @@ input[type="checkbox"]:checked::before {
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  padding-bottom: 1em;
 }
 
 .chart-container {
diff --git a/frontend/src/main-page/navbar/NavBar.tsx b/frontend/src/main-page/navbar/NavBar.tsx
index 2c93cd8..7a1a40c 100644
--- a/frontend/src/main-page/navbar/NavBar.tsx
+++ b/frontend/src/main-page/navbar/NavBar.tsx
@@ -32,7 +32,7 @@ const NavBar: React.FC = observer(() => {
   };
   
   return (
-    <aside className="left-0 top-0 h-screen w-56 bg-white flex flex-col rounded-br-2xl">
+    <aside className="left-0 top-0 h-screen w-56 bg-white flex flex-col">
       {/* Logo at top */}
       <div className="p-6 flex items-center justify-center mr-6">
         <img className="w-12 h-12" src={NavBarBranding.logo} alt={`${NavBarBranding.name} Logo`} />
diff --git a/frontend/src/routes/AppRoutes.tsx b/frontend/src/routes/AppRoutes.tsx
index e226060..eef8676 100644
--- a/frontend/src/routes/AppRoutes.tsx
+++ b/frontend/src/routes/AppRoutes.tsx
@@ -6,8 +6,9 @@ import MainPage from "../main-page/MainPage";
 import Login from "../Login";
 import Register from "../Register";
 import RegisterLanding from "../RegisterLanding";
-import { getAppStore } from "../external/bcanSatchel/store"
+import { getAppStore } from "../external/bcanSatchel/store";
 import RestrictedPage from "../main-page/restricted/RestrictedPage";
+import Footer from "../main-page/Footer";
 
 /**
  * AppRoutes:
@@ -18,34 +19,70 @@ const AppRoutes = observer(() => {
   const { isAuthenticated } = useAuthContext();
   const user = getAppStore().user;
 
+  const FooterLayout = ({ children }: { children: React.ReactNode }) => {
+    return (
+      <div className="flex flex-col">
+        <div className="flex-1 min-h-screen ">{children}</div>
+        <Footer />
+      </div>
+    );
+  };
+
   return (
     <Routes location={location}>
       <Route
         path="/login"
-        element={isAuthenticated ? <Navigate to="/main/all-grants" /> : <Login />}
+        element={
+          isAuthenticated ? (
+            <Navigate to="/main/all-grants" />
+          ) : (
+            <FooterLayout>
+              <Login />
+            </FooterLayout>
+          )
+        }
       />
       <Route
         path="/register"
         element={
-          isAuthenticated ? <Navigate to="/main/all-grants" /> : <Register />
+          isAuthenticated ? (
+            <Navigate to="/main/all-grants" />
+          ) : (
+            <FooterLayout>
+              <Register />
+            </FooterLayout>
+          )
         }
-      /> 
+      />
       <Route
         path="/registered"
-        element={<RegisterLanding />}
+        element={
+          <FooterLayout>
+            <RegisterLanding />
+          </FooterLayout>
+        }
+      />
+      <Route
+        path="/restricted"
+        element={
+          <FooterLayout>
+            <RestrictedPage />
+          </FooterLayout>
+        }
       />
-      <Route path="/restricted" element={<RestrictedPage/>} />
-      
+
       {/* Check user status and render MainPage or redirect */}
-      <Route 
-        path="/main/*" 
+      <Route
+        path="/main/*"
         element={
-          user?.position === "Inactive" 
-            ? <Navigate to="/restricted" replace /> 
-            : <MainPage />
-        } 
+          user?.position === "Inactive" ? (
+            <Navigate to="/restricted" replace />
+          ) : (
+            <MainPage />
+          )
+        }
       />
-      
+
       <Route
         path="*"
         element={
@@ -56,4 +93,4 @@ const AppRoutes = observer(() => {
   );
 });
 
-export default AppRoutes;
\ No newline at end of file
+export default AppRoutes;
diff --git a/frontend/src/styles/Footer.css b/frontend/src/styles/Footer.css
index f26b619..fe1cce9 100644
--- a/frontend/src/styles/Footer.css
+++ b/frontend/src/styles/Footer.css
@@ -1,31 +1,28 @@
 .footer {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    flex-direction: column;
-    height: 100%;
-flex-grow: 1;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-direction: column;
+  flex-grow: 1;
 
-  
-    background-color: var(--color-grey-400);
-    border-color: var(--color-grey-100);
-    width: 100%;
-    padding: 1em;
-    
-    /* Text */
-    font-size: var(--font-size-base);
-    color: var(--color-grey-700);
+  border-color: var(--color-grey-100);
+  width: 100%;
+  padding: 1em;
+
+  /* Text */
+  font-size: var(--font-size-base);
+  color: var(--color-grey-700);
 }
 
 .text-block {
-    width: 50%;
-    display: flex;
-    flex-direction: column;
-    padding: 8px;
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
 }
 
 .northeastern-uni-caption {
-    font-size: var(--font-size-sm);
-    line-height: 1rem;
-    color: var(--color-grey-600);
-}
\ No newline at end of file
+  font-size: var(--font-size-sm);
+  line-height: 1rem;
+  color: var(--color-grey-600);
+}

From 16f3a0a618d1af931ea466cedd2dd232bd2a70f6 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sun, 15 Feb 2026 18:14:35 -0500
Subject: [PATCH 3/4] Spacing

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

diff --git a/frontend/src/main-page/MainPage.tsx b/frontend/src/main-page/MainPage.tsx
index 1b45093..84bf706 100644
--- a/frontend/src/main-page/MainPage.tsx
+++ b/frontend/src/main-page/MainPage.tsx
@@ -14,7 +14,7 @@ function MainPage() {
       <div>
         <NavBar />
       </div>
-      <div className="px-6 lg:px-12 py-8 pt-16 w-full h-screen overflow-y-auto">
+      <div className="px-6 lg:px-16 py-8 pt-16 w-full h-screen overflow-y-auto">
         <div className="min-h-screen mb-16">
           <Routes>
             <Route path="/dashboard" element={<Dashboard />} />

From a58a0150f8b01184288b87011921437ed04c35f4 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sun, 15 Feb 2026 18:25:58 -0500
Subject: [PATCH 4/4] Background grey

---
 .../src/main-page/dashboard/DateFilter.tsx    |  2 +-
 .../main-page/dashboard/styles/Dashboard.css  |  2 +-
 .../grant-details/CostBenefitAnalysis.tsx     |  6 ++--
 .../main-page/grants/grant-list/GrantItem.tsx |  8 ++---
 .../grants/new-grant/NewGrantModal.tsx        | 36 +++++++++----------
 .../src/main-page/grants/styles/GrantItem.css |  2 +-
 .../src/main-page/grants/styles/GrantPage.css |  2 +-
 .../main-page/grants/styles/NewGrantModal.css |  2 +-
 .../main-page/grants/styles/UserDropdown.css  |  4 +--
 frontend/src/styles/index.css                 |  3 +-
 frontend/tailwind.config.ts                   |  1 +
 11 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/frontend/src/main-page/dashboard/DateFilter.tsx b/frontend/src/main-page/dashboard/DateFilter.tsx
index 921ec39..34e2207 100644
--- a/frontend/src/main-page/dashboard/DateFilter.tsx
+++ b/frontend/src/main-page/dashboard/DateFilter.tsx
@@ -86,7 +86,7 @@ const DateFilter: React.FC = observer(() => {
               <div className="flex items-center p-2 rounded-sm">
                 <input
                   type="checkbox"
-                  className="w-4 h-4 rounded-sm accent-primary-900 bg-grey-200"
+                  className="w-4 h-4 rounded-sm accent-primary-900 bg-grey-150"
                   id={year.toString()}
                   value={year}
                   checked={selectedYears.includes(year)}
diff --git a/frontend/src/main-page/dashboard/styles/Dashboard.css b/frontend/src/main-page/dashboard/styles/Dashboard.css
index 1760746..016d9f6 100644
--- a/frontend/src/main-page/dashboard/styles/Dashboard.css
+++ b/frontend/src/main-page/dashboard/styles/Dashboard.css
@@ -47,7 +47,7 @@ input[type="checkbox"]:checked::before {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  background-color: var(--color-grey-200);
+  background-color: var(--color-grey-150);
   width: 100%;
   height: 100%;
   overflow-y: auto;
diff --git a/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx b/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx
index 1e416f7..9e6ab6c 100644
--- a/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx
+++ b/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx
@@ -68,7 +68,7 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
             placeholder="Enter rate"
             value={hourlyRate}
             onChange={(e) => setHourlyRate(e.target.value)}
-            className="w-full h-[42px]  px-3 py-4 border border-gray-400 rounded-md bg-grey-200"
+            className="w-full h-[42px]  px-3 py-4 border border-gray-400 rounded-md bg-grey-150"
           />
         </div>
 
@@ -85,7 +85,7 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
                 console.log('Time per report changed to:', e.target.value);
                 setTimePerReport(e.target.value);
             }}
-            className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md bg-grey-200"
+            className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md bg-grey-150"
           />
         </div>
 
@@ -102,7 +102,7 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
             <span className="text-sm font-semibold"> Net Benefit:</span>
         <div
           onClick={calculateNetBenefit}
-          className={`w-1/2 py-2 px-4 rounded-md bg-grey-200 border border-black overflow-auto text-center whitespace-nowrap [scrollbar-width:none] [-ms-overflow-style:none] ${
+          className={`w-1/2 py-2 px-4 rounded-md bg-grey-150 border border-black overflow-auto text-center whitespace-nowrap [scrollbar-width:none] [-ms-overflow-style:none] ${
             netBenefit !== null ? 'text-black' : 'text-gray-500'
           }`}
         >
diff --git a/frontend/src/main-page/grants/grant-list/GrantItem.tsx b/frontend/src/main-page/grants/grant-list/GrantItem.tsx
index 0012535..95894a0 100644
--- a/frontend/src/main-page/grants/grant-list/GrantItem.tsx
+++ b/frontend/src/main-page/grants/grant-list/GrantItem.tsx
@@ -367,7 +367,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                         >
                           <MdOutlinePerson2 className="w-1/5 h-full p-1" />
                           <div
-                            className="w-4/5 border-l border-black rounded-r-md bg-grey-200"
+                            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"
@@ -405,7 +405,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                         >
                           <MdOutlinePerson2 className="w-1/5 h-full p-1" />
                           <div
-                            className="w-4/5 border-l border-black bg-grey-200 rounded-r-md"
+                            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"
@@ -517,7 +517,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                                   {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-200 h-[42px] border border-black text-black"
+                                      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}
@@ -565,7 +565,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                 Description
               </label>
               <div
-                className="h-64 bg-grey-200 flex w-full rounded-md p-5 overflow-auto border border-black text-black"
+                className="h-64 bg-grey-150 flex w-full rounded-md p-5 overflow-auto border border-black text-black"
               >
                 {curGrant.description}
                 </div>
diff --git a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
index 0152f15..f854103 100644
--- a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
+++ b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
@@ -470,7 +470,7 @@ const NewGrantModal: React.FC<{
                 Organization Name *
               </label>
               <input
-                className="block w-full h-[42px] bg-grey-200 text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight"
+                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"
@@ -494,7 +494,7 @@ const NewGrantModal: React.FC<{
                       Application Date *
                     </label>
                     <input
-                      className={`appearance-none block w-full h-[42px] bg-grey-200 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500 ${
+                      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"
@@ -516,7 +516,7 @@ const NewGrantModal: React.FC<{
                       Grant Start Date *
                     </label>
                     <input
-                      className={`w-full appearance-none block w-full h-[42px] bg-grey-200 placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500 ${
+                      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"
@@ -540,7 +540,7 @@ const NewGrantModal: React.FC<{
                   <input
                     type="number"
                     min="0"
-                    className="appearance-none block w-full h-[42px] bg-grey-200 text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500"
+                    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) =>
@@ -573,7 +573,7 @@ const NewGrantModal: React.FC<{
                       <div key={index} className="flex gap-2 mb-2 w-full">
                         <input
                           key={index}
-                          className="flex-1 min-w-0 h-[42px] bg-grey-200 text-black rounded border border-black"
+                          className="flex-1 min-w-0 h-[42px] bg-grey-150 text-black rounded border border-black"
                           type="date"
                           value={
                             date
@@ -613,7 +613,7 @@ const NewGrantModal: React.FC<{
                   Timeline (in years) *
                 </label>
                 <input
-                  className="appearance-none block w-full h-[42px] bg-grey-200 text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none"
+                  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"
@@ -631,7 +631,7 @@ const NewGrantModal: React.FC<{
                   Amount (in $) *
                 </label>
                 <CurrencyInput
-                  className="appearance-none block w-full h-[42px] mb-[2px] bg-grey-200 text-gray-700 border border-black rounded px-4 leading-tight focus:outline-none "
+                  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"
@@ -662,7 +662,7 @@ const NewGrantModal: React.FC<{
                       }}
                       placeholder="Name"
                       />
-                        <input className="w-full h-[48px] bg-grey-200 text-gray-700 rounded border border-black"
+                        <input className="w-full h-[48px] bg-grey-150 text-gray-700 rounded border border-black"
                          placeholder="e-mail" 
                          value={bcanPocEmail}
                          readOnly
@@ -686,14 +686,14 @@ const NewGrantModal: React.FC<{
                   <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-200 text-gray-700 rounded border border-black"
+                      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-200 text-gray-700 rounded border border-black"
+                      className="w-full h-[42px] bg-grey-150 text-gray-700 rounded border border-black"
                       id="grid-city"
                       placeholder="e-mail"
                       value={grantProviderPocEmail}
@@ -717,7 +717,7 @@ const NewGrantModal: React.FC<{
                     Does BCAN qualify? *
                   </label>
                   <select
-                    className={`appearance-none block w-full h-[42px] bg-grey-200 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none ${
+                    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"
@@ -739,7 +739,7 @@ const NewGrantModal: React.FC<{
                     Status
                   </label>
                   <select
-                    className={`appearance-none block w-full h-[42px] bg-grey-200 placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none ${
+                    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"
@@ -764,7 +764,7 @@ const NewGrantModal: React.FC<{
                     Restriction type *
                   </label>
                   <select
-                    className={`appearance-none block w-full h-[42px] bg-grey-200 border border-black rounded py-3 px-4 leading-tight focus:outline-none ${
+                    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"
@@ -807,7 +807,7 @@ const NewGrantModal: React.FC<{
                       <input
                         type="text"
                         placeholder="Name"
-                        className="flex-1 px-2 h-[42px] bg-grey-200 border border-black rounded-md"
+                        className="flex-1 px-2 h-[42px] bg-grey-150 border border-black rounded-md"
                         value={currentAttachment.attachment_name}
                         onChange={(e) =>
                           setCurrentAttachment({
@@ -819,7 +819,7 @@ const NewGrantModal: React.FC<{
                       <input
                         type="text"
                         placeholder="URL"
-                        className="flex-1 px-2 h-[42px] bg-grey-200 border border-black rounded-md"
+                        className="flex-1 px-2 h-[42px] bg-grey-150 border border-black rounded-md"
                         value={currentAttachment.url}
                         onChange={(e) =>
                           setCurrentAttachment({
@@ -829,7 +829,7 @@ const NewGrantModal: React.FC<{
                         }
                       />
                       <select
-                        className="h-[42px] bg-grey-200 border border-black rounded-md px-2 items-center justify-center"
+                        className="h-[42px] bg-grey-150 border border-black rounded-md px-2 items-center justify-center"
                         value={currentAttachment.type}
                         onChange={(e) =>
                           setCurrentAttachment({
@@ -881,7 +881,7 @@ const NewGrantModal: React.FC<{
                         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-200 text-gray-700 border border-black flex items-center px-3 justify-between"
+                          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}
@@ -924,7 +924,7 @@ const NewGrantModal: React.FC<{
             Description
           </label>
           <textarea
-            className="h-48 block w-full bg-grey-200 text-gray-700 border border-black rounded py-3 px-4 mb-3 leading-tight"
+            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)}
diff --git a/frontend/src/main-page/grants/styles/GrantItem.css b/frontend/src/main-page/grants/styles/GrantItem.css
index d6e1a59..861a2e0 100644
--- a/frontend/src/main-page/grants/styles/GrantItem.css
+++ b/frontend/src/main-page/grants/styles/GrantItem.css
@@ -9,7 +9,7 @@
   /* justify-content: space-between; */
   border-radius: 15px;
 
-  background-color: var(--color-grey-200);
+  background-color: var(--color-grey-150);
   /* margin: 0; Remove margin */
   transition: background-color 0.2s ease;
   border: 0.1rem solid var(--color-primary-900);
diff --git a/frontend/src/main-page/grants/styles/GrantPage.css b/frontend/src/main-page/grants/styles/GrantPage.css
index 3c0575c..b92f714 100644
--- a/frontend/src/main-page/grants/styles/GrantPage.css
+++ b/frontend/src/main-page/grants/styles/GrantPage.css
@@ -10,7 +10,7 @@ html, body {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    background-color: -var(--color-grey-200);
+    background-color: -var(--color-grey-150);
     width: 100%;
     height: 100%;
     overflow-y: auto;
diff --git a/frontend/src/main-page/grants/styles/NewGrantModal.css b/frontend/src/main-page/grants/styles/NewGrantModal.css
index 3e5df33..91dccb9 100644
--- a/frontend/src/main-page/grants/styles/NewGrantModal.css
+++ b/frontend/src/main-page/grants/styles/NewGrantModal.css
@@ -102,7 +102,7 @@
   border: 0.075rem solid black;
   border-radius: 15px;
   box-sizing: border-box;
-  background-color: var(--color-grey-200);
+  background-color: var(--color-grey-150);
   color: black;
 }
 
diff --git a/frontend/src/main-page/grants/styles/UserDropdown.css b/frontend/src/main-page/grants/styles/UserDropdown.css
index e7540d8..9f83ab3 100644
--- a/frontend/src/main-page/grants/styles/UserDropdown.css
+++ b/frontend/src/main-page/grants/styles/UserDropdown.css
@@ -6,7 +6,7 @@
 .user-dropdown-input {
   height: 48px;
   width: 100%;
-  background-color: var(--color-grey-200);
+  background-color: var(--color-grey-150);
   border-style: solid;
   border-color: black;
   border-width: 1px;
@@ -29,7 +29,7 @@
   right: 0;
   max-height: 200px;
   overflow-y: auto;
-  background-color: var(--color-grey-200);
+  background-color: var(--color-grey-150);
   border-style: solid;
   border-color: black;
   border-width: 1px;
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index e75001e..a4ad591 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -68,6 +68,7 @@
   --color-grey-400: #ced4da;
   --color-grey-300: #dee2e6;
   --color-grey-200: #e9ecef;
+  --color-grey-150: #F2F2F2;
   --color-grey-100: #f8f9fa;
 
   --color-black: #000000;
@@ -80,7 +81,7 @@
 
   color-scheme: light dark;
   color: rgba(0, 0, 0, 0.87);
-  background-color: var(--color-grey-200);
+  background-color: var(--color-grey-150);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 557ecb6..9b53cff 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -62,6 +62,7 @@ export default {
         400: "#CED4DA",
         300: "#DEE2E6",
         200: "#E9ECEF",
+        150: "#F2F2F2",
         100: "#F8F9FA",
       },