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 42e0b1f..84bf706 100644
--- a/frontend/src/main-page/MainPage.tsx
+++ b/frontend/src/main-page/MainPage.tsx
@@ -6,25 +6,34 @@ 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 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 h-screen overflow-hiden">
+      <div>
+        <NavBar />
+      </div>
+      <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 />} />
+            <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/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/dashboard/DateFilter.tsx b/frontend/src/main-page/dashboard/DateFilter.tsx
index 7fcb8b9..34e2207 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"
@@ -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 f22c0ac..016d9f6 100644
--- a/frontend/src/main-page/dashboard/styles/Dashboard.css
+++ b/frontend/src/main-page/dashboard/styles/Dashboard.css
@@ -47,12 +47,11 @@ 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;
   overflow-x: hidden;
-  padding-bottom: 1em;
 }
 
 .chart-container {
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/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/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 4911d45..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: white;
-    border-color: var(--color-grey-100);
-    width: 100%;
-    padding: 1em;
-    
-    /* Text */
-    font-size: 1.3rem;
-    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: 0.90rem;
-    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);
+}
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",
       },