diff --git a/frontend/src/main-page/Footer.tsx b/frontend/src/main-page/Footer.tsx
index 9a029dab..44b05ceb 100644
--- a/frontend/src/main-page/Footer.tsx
+++ b/frontend/src/main-page/Footer.tsx
@@ -9,11 +9,11 @@ const Footer: React.FC = () => {
       <Group className="text-block">
         <Text>
           {FooterText.C4C_Motto}
-          <Link variant="underline" href={FooterText.C4C_Link}>
+          <Link className="font-medium" variant="underline" href={FooterText.C4C_Link}>
             {FooterText.C4C}
           </Link>{" "}
           for{" "}
-          <Link variant="underline" _hover={{color: "var(--color-primary-900)"}}  href={FooterText.Org_Link}>
+          <Link className="font-medium" variant="underline" _hover={{color: "var(--color-primary-900)"}}  href={FooterText.Org_Link}>
             {FooterText.Org}
           </Link>
         </Text>
diff --git a/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx b/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx
deleted file mode 100644
index 9e6ab6c1..00000000
--- a/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React, { useState } from 'react';
-import { Grant } from '../../../../../middle-layer/types/Grant';
-import '../styles/CostBenefitAnalysis.css';
-
-interface CostBenefitAnalysisProps {
-  grant: Grant;
-}
-
-export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant }) => {
-  const [hourlyRate, setHourlyRate] = useState<string>('');
-  const [timePerReport, setTimePerReport] = useState<string>('');
-  const [netBenefit, setNetBenefit] = useState<number | null>(null);
-
-  const calculateNetBenefit = () => {
-    console.log('Called calculate')
-    console.log('hourlyRate state:', hourlyRate)
-    console.log('timePerReport state:', timePerReport)
-    const rate = parseFloat(hourlyRate);
-    const timeReport = parseFloat(timePerReport);
-
-    console.log('Parsed rate:', rate)
-    console.log('Parsed timeReport:', timeReport)
-
-    // Validation
-    if (isNaN(rate) || isNaN(timeReport) || rate <= 0 || timeReport <= 0) {
-      alert('Please enter valid positive numbers for hourly rate and time per report.');
-      return;
-    }
-
-    const reportCount = grant.report_deadlines?.length ?? 0;
-    const grantAmount = grant.amount;
-    const estimatedTime = grant.estimated_completion_time | 5;
-
-    console.log('Grant values - Amount:', grantAmount, 'EstTime:', estimatedTime, 'ReportCount:', reportCount);
-
-    // Formula: NetBenefit = GrantAmount - ((EstimatedCompletionTime + ReportCount * TimePerReport) * StaffHourlyRate)
-    const result = grantAmount - ((estimatedTime + reportCount * timeReport) * rate);
-    
-    console.log('Final result:', result);
-
-    setNetBenefit(result);
-  };
-
-  const formatCurrency = (amount: number): string => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      maximumFractionDigits: 2
-    }).format(amount);
-  };
-
-  return (
-    <div className="cost-benefit-analysis">
-      <label className="text-lg flex block tracking-wide text-gray-700 font-semibold text-left">
-        Cost Benefit Analysis
-      </label>
-      
-      <div 
-        className="cost-benefit-container p-1 rounded-lg h-full flex flex-col bg-white"
-      >
-        {/* Hourly Rate Input */}
-        <div className="mb-3">
-          <label className="block text-left text-gray-700 text-sm mb-1">
-            Hourly rate
-          </label>
-          <input
-            type="number"
-            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-150"
-          />
-        </div>
-
-        {/* Time Per Report Input */}
-        <div className="mb-3">
-          <label className="block text-left text-gray-700 text-sm mb-1">
-            Time per report (in hours)
-          </label>
-          <input
-            type="number"
-            placeholder="Enter time"
-            value={timePerReport}
-            onChange={(e) => {
-                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-150"
-          />
-        </div>
-
-        {/* Calculate Button */}
-        <button
-          onClick={calculateNetBenefit}
-          className="w-full py-1 px-4 rounded-md mb-7 bg-primary-800 text-black border border-black"
-        >
-          calculate
-        </button>
-
-        {/* Analysis Button - Shows the net benefit result */}
-        <div className="flex justify-end items-center gap-2">
-            <span className="text-sm font-semibold"> Net Benefit:</span>
-        <div
-          onClick={calculateNetBenefit}
-          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'
-          }`}
-        >
-          {netBenefit !== null ? formatCurrency(netBenefit) : 'Analysis'}
-        </div>
-        </div>
-      </div>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/frontend/src/main-page/grants/grant-details/GrantAttributes.tsx b/frontend/src/main-page/grants/grant-details/GrantAttributes.tsx
deleted file mode 100644
index b1a3c516..00000000
--- a/frontend/src/main-page/grants/grant-details/GrantAttributes.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from 'react';
-import '../styles/GrantAttributes.css';
-import { Grant } from '../../../../../middle-layer/types/Grant';
-
-interface GrantAttributesProps {
-  isEditing: boolean;
-  curGrant: Grant;
-  setCurGrant: React.Dispatch<React.SetStateAction<Grant>>;
-}
-
-export const GrantAttributes: React.FC<GrantAttributesProps> = ({curGrant, setCurGrant, isEditing}) => {
-
-    // placeholder for now  before reworking, will remove redundant useState()
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const {name, value} = event.target;
-
-        // only modifies the changed field
-        setCurGrant(curGrant => ({
-            ...curGrant,
-            [name]: value
-        }));
-    };
-
-    return (
-        <div className="grant-attributes bg-primary-800">
-            <div className="attribute-row">
-                <div className="attribute-label">Status</div>
-                <input
-                    type="text"
-                    name="status"
-                    className="attribute-value"
-                    value={curGrant.status}
-                    onChange={handleChange}
-                    readOnly={!isEditing}
-                />
-            </div>
-            <div className="attribute-row">
-                <div className="attribute-label">Does BCAN qualify?</div>
-                <input
-                    type="text"
-                    className="attribute-value"
-                    name="is_bcan_qualifying"
-                    value={curGrant.does_bcan_qualify ? "Yes" : "No"}
-                    onChange={handleChange}
-                    readOnly={!isEditing}
-                />
-            </div>
-            <div className="attribute-row">
-                <div className="attribute-label">Deadline</div>
-                <input
-                    type="text"
-                    className="attribute-value"
-                    name="deadline"
-                    value={curGrant.application_deadline}
-                    onChange={handleChange}
-                    readOnly={!isEditing}
-                />
-            </div>
-            <div className="attribute-row">
-                <div className="attribute-label">Notification Date</div>
-                <input
-                    type="text"
-                    className="attribute-value"
-                    name="notificationDate"
-                    readOnly={!isEditing}
-                />
-            </div>
-            <div className="attribute-row">
-                <div className="attribute-label">Report Due:</div>
-                <input
-                    type="text"
-                    className="attribute-value"
-                    readOnly={!isEditing}
-                />
-            </div>
-            <div className="attribute-row">
-                <div className="attribute-label">Estimated Completion Time:</div>
-                <input
-                    type="text"
-                    className="attribute-value"
-                    readOnly={!isEditing}
-                />
-            </div>
-            <div className="attribute-row">
-                <div className="attribute-label">Scope Document:</div>
-                <input
-                    type="text"
-                    className="attribute-value"
-                    readOnly={!isEditing}
-                />
-            </div>
-            <div className="attribute-row">
-                <div className="attribute-label">Grantmaker POC:</div>
-                <input
-                    type="text"
-                    className="attribute-value"
-                    name="point_of_contacts"
-                    value={curGrant.grantmaker_poc?.POC_name ?? ""} // placeholder, will need to change
-                    onChange={handleChange}
-                    readOnly={!isEditing}
-                />
-            </div>
-            <div className="attribute-row">
-                <div className="attribute-label">Timeline:</div>
-                <input
-                    type="text"
-                    className="attribute-value"
-                    readOnly={!isEditing}
-                />
-            </div>
-        </div>
-    );
-};
diff --git a/frontend/src/main-page/grants/grant-list/GrantItem.tsx b/frontend/src/main-page/grants/grant-list/GrantItem.tsx
index 427bec67..3960fd1f 100644
--- a/frontend/src/main-page/grants/grant-list/GrantItem.tsx
+++ b/frontend/src/main-page/grants/grant-list/GrantItem.tsx
@@ -9,7 +9,7 @@ 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-details/CostBenefitAnalysis";
+import { CostBenefitAnalysis } from "../grant-view/CostBenefitAnalysis";
 import ActionConfirmation from "../../../custom/ActionConfirmation";
 import { observer } from "mobx-react-lite";
 import { fetchGrants } from "../filter-bar/processGrantData";
diff --git a/frontend/src/main-page/grants/grant-list/GrantList.tsx b/frontend/src/main-page/grants/grant-list/GrantList.tsx
index be350d1a..b0808215 100644
--- a/frontend/src/main-page/grants/grant-list/GrantList.tsx
+++ b/frontend/src/main-page/grants/grant-list/GrantList.tsx
@@ -8,7 +8,8 @@ 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 { getAppStore } from "../../../external/bcanSatchel/store";
+import GrantView from "../grant-view/GrantView";
 
 const ITEMS_PER_PAGE = 6;
 
@@ -27,24 +28,24 @@ const GrantList: React.FC<GrantListProps> = observer(
     currentUserEmail,
   }) => {
     const { grants } = ProcessGrantData();
-    const {filterStatus} = getAppStore();
+    const { filterStatus } = getAppStore();
     const [currentPage, setPage] = useState(1);
     const [showNewGrantModal, setShowNewGrantModal] = useState(false);
-    // @ts-ignore 
+    // @ts-ignore
     const [wasGrantSubmitted, setWasGrantSubmitted] = useState(false);
 
     const displayedGrants = showOnlyMyGrants
       ? grants.filter(
           (grant: Grant) =>
             grant.bcan_poc?.POC_email?.toLowerCase() ===
-            currentUserEmail?.toLowerCase()
+            currentUserEmail?.toLowerCase(),
         )
       : grants;
 
     useEffect(() => {
       if (selectedGrantId !== undefined && grants.length > 0) {
         const index = grants.findIndex(
-          (grant) => grant.grantId === Number(selectedGrantId)
+          (grant) => grant.grantId === Number(selectedGrantId),
         );
         if (index !== -1) {
           const targetPage = Math.floor(index / ITEMS_PER_PAGE) + 1;
@@ -56,8 +57,8 @@ const GrantList: React.FC<GrantListProps> = observer(
     }, [selectedGrantId, grants, currentPage]);
 
     useEffect(() => {
-        setPage(1);
-    },[filterStatus, showOnlyMyGrants]);
+      setPage(1);
+    }, [filterStatus, showOnlyMyGrants]);
 
     const count = displayedGrants.length;
     const startRange = (currentPage - 1) * ITEMS_PER_PAGE;
@@ -65,72 +66,93 @@ const GrantList: React.FC<GrantListProps> = observer(
     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) => (
-                        <GrantItem key={grant.grantId}
-                         grant={grant}
-                        defaultExpanded={grant.grantId === Number(selectedGrantId)} />
-                    ))}
-                    {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 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/GrantStatus.tsx b/frontend/src/main-page/grants/grant-list/GrantStatus.tsx
deleted file mode 100644
index dd630444..00000000
--- a/frontend/src/main-page/grants/grant-list/GrantStatus.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export function isActiveStatus(status: string): boolean {
-    return ["Pending", "In Review", "Awaiting Submission"].includes(status);
-}
-
-
diff --git a/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx b/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx
index 5344a319..884176a2 100644
--- a/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx
+++ b/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx
@@ -1,23 +1,26 @@
 // StatusIndicator.tsx
 
 import React from "react";
-import { FaCircle } from "react-icons/fa";
-import { Status, getColorStatus } from "../../../../../middle-layer/types/Status.ts";
+import {
+  Status,
+  getColorStatus,
+} from "../../../../../middle-layer/types/Status.ts";
 
 interface StatusIndicatorProps {
   curStatus: Status;
 }
 
 const StatusIndicator: React.FC<StatusIndicatorProps> = ({ curStatus }) => {
-  const circleColor = getColorStatus(curStatus.toString())
+  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="justify-self-center">
-    <span className="flex items-center">
-      <FaCircle style={{ color: circleColor}} className="mr-4" />
-      <span className="w-20 text-left">{labelText}</span>
-    </span>
+    <div
+      className="inline-flex w-fit flex-none items-center rounded-sm px-2 py-1"
+      style={{ color: darkColor, backgroundColor: lightColor }}
+    >
+      <span className="text-md">{labelText}</span>
     </div>
   );
 };
diff --git a/frontend/src/main-page/grants/grant-view/ContactCard.tsx b/frontend/src/main-page/grants/grant-view/ContactCard.tsx
new file mode 100644
index 00000000..843b2549
--- /dev/null
+++ b/frontend/src/main-page/grants/grant-view/ContactCard.tsx
@@ -0,0 +1,41 @@
+import POC from "../../../../../middle-layer/types/POC";
+import logo from "../../../images/logo.svg";
+
+type ContactCardProps = {
+  contact?: POC;
+  type?: "BCAN" | "Granter";
+};
+
+export default function ContactCard({ contact, type }: ContactCardProps) {
+  return (
+    <div className="flex flex-row gap-4 w-full justify-items-start rounded-sm border p-3 h-full border-grey-500">
+      <img
+        src={logo}
+        alt="Profile"
+        className="max-w-14 rounded-full hidden lg:block"
+      />
+      <div className="flex flex-col align-middle justify-center">
+        <p className="text-black text-md font-semibold ">
+          {contact?.POC_name || "N/A"}
+        </p>
+        <p className="text-black text-sm break-all">
+          <a
+            href={"mailto:" + contact?.POC_email}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline break-words"
+          >
+            {contact?.POC_email}
+          </a>
+        </p>
+      </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"}`}
+        >
+          {type}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/grants/grant-view/CostBenefitAnalysis.tsx b/frontend/src/main-page/grants/grant-view/CostBenefitAnalysis.tsx
new file mode 100644
index 00000000..5fc6fd57
--- /dev/null
+++ b/frontend/src/main-page/grants/grant-view/CostBenefitAnalysis.tsx
@@ -0,0 +1,153 @@
+import React, { useState } from "react";
+import { Grant } from "../../../../../middle-layer/types/Grant";
+import InputField from "../../../sign-up/InputField";
+import Button from "../../../main-page/settings/components/Button";
+
+interface CostBenefitAnalysisProps {
+  grant: Grant;
+}
+
+interface CostBenefitResult {
+  totalReportingCost: number;
+  totalReportingTime: number;
+  overhead: number;
+  costPerReport: number;
+  grantAmount: number;
+}
+
+export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({
+  grant,
+}) => {
+  const [hourlyRate, setHourlyRate] = useState<string>("");
+  const [timePerReport, setTimePerReport] = useState<string>("");
+  const [costBenefitResult, setCostBenefitResult] =
+    useState<CostBenefitResult | null>(null);
+
+  const calculateCostBenefit = () => {
+    console.log("Called calculate");
+    console.log("hourlyRate state:", hourlyRate);
+    console.log("timePerReport state:", timePerReport);
+    const rate = parseFloat(hourlyRate);
+    const timeReport = parseFloat(timePerReport);
+
+    console.log("Parsed rate:", rate);
+    console.log("Parsed timeReport:", timeReport);
+
+    // Validation
+    if (isNaN(rate) || isNaN(timeReport) || rate <= 0 || timeReport <= 0) {
+      alert(
+        "Please enter valid positive numbers for hourly rate and time per report.",
+      );
+      return;
+    }
+
+    const reportCount = grant.report_deadlines?.length ?? 0;
+    const grantAmount = grant.amount;
+    const estimatedTime = grant.estimated_completion_time | 5;
+
+    console.log(
+      "Grant values - Amount:",
+      grantAmount,
+      "EstTime:",
+      estimatedTime,
+      "ReportCount:",
+      reportCount,
+    );
+
+    // Formula: NetBenefit = GrantAmount - ((EstimatedCompletionTime + ReportCount * TimePerReport) * StaffHourlyRate)
+    const totalReportingCost = reportCount * timeReport * rate;
+
+    const resultObj = {
+      totalReportingCost: totalReportingCost,
+      totalReportingTime: reportCount * timeReport,
+      overhead: (totalReportingCost / grantAmount) * 100 || 0,
+      costPerReport: totalReportingCost / reportCount || 0,
+      grantAmount: grantAmount,
+    };
+
+    setCostBenefitResult(resultObj);
+  };
+
+  const formatCurrency = (amount: number): string => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0,
+    }).format(amount);
+  };
+
+  return (
+    <div className="grid grid-cols-1 xl:grid-cols-2 gap-8 xl:gap-16 lg:w-[85%] h-full">
+
+      {/* Input form */}
+      <div className="flex flex-col w-full gap-6 items-start text-left col-span-1">
+        {/* Hourly Rate Input */}
+        <div className="text-sm w-full">
+          <InputField
+            id="hourlyRate"
+            label="Hourly Rate"
+            placeholder="Enter rate"
+            value={hourlyRate}
+            onChange={(e) => setHourlyRate(e.target.value)}
+          />
+        </div>
+
+        {/* Time Per Report Input */}
+        <div className="text-sm w-full">
+          <InputField
+            id="timePerReport"
+            label="Time Per Report (hours)"
+            placeholder="Enter time"
+            value={timePerReport}
+            onChange={(e) => setTimePerReport(e.target.value)}
+          />
+        </div>
+
+        {/* Calculate Button */}
+        <Button
+          text="Calculate"
+          onClick={calculateCostBenefit}
+          className="text-white border-2 ml-auto"
+        />
+      </div>
+
+      {/* Shows the net benefit result */}
+      <div className="flex flex-col w-full gap-4 items-start text-left col-span-1 xl:mt-7">
+        {costBenefitResult && (
+          <div className="flex flex-col w-full gap-3">
+            <div className="text-center rounded-sm border-grey-400 border p-4">
+              <p className="text-gray-600 text-2xl font-bold">
+                {formatCurrency(costBenefitResult.costPerReport)}
+              </p>
+              <p className="text-sm text-gray-600">Cost per report</p>
+            </div>
+            <div className="flex flex-col gap-1">
+              <div className="text-sm text-gray-600">
+                Total reporting cost:
+                <span className="font-semibold ml-1">
+                  {formatCurrency(costBenefitResult.totalReportingCost)}
+                </span>
+              </div>
+              <div className="text-sm text-gray-600">
+                Total reporting time:
+                <span className="font-semibold ml-1">
+                  {new Intl.NumberFormat("en-US").format(
+                    costBenefitResult.totalReportingTime,
+                  )}{" "}
+                  hours
+                </span>
+              </div>
+              <div className="text-sm text-gray-600">
+                Overhead:
+                <span className="font-semibold ml-1">
+                  {costBenefitResult.overhead.toFixed(1)}% of{" "}
+                  {formatCurrency(costBenefitResult.grantAmount)} grant
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/main-page/grants/grant-view/GrantFieldCol.tsx b/frontend/src/main-page/grants/grant-view/GrantFieldCol.tsx
new file mode 100644
index 00000000..efdb2c96
--- /dev/null
+++ b/frontend/src/main-page/grants/grant-view/GrantFieldCol.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+type InfoField = {
+  label: string;
+  value?: string | number | boolean;
+  item?: React.ReactNode;
+  important?: boolean;
+};
+
+type GrantFieldColProps = {
+  fields: InfoField[];
+  colspan?: 1 | 2;
+};
+
+export default function GrantFieldCol({
+  fields,
+  colspan = 1,
+}: GrantFieldColProps) {
+  return (
+    <div
+      className={
+        `flex flex-col w-full gap-6 items-start text-left ` +
+        (colspan === 2 ? "col-span-2" : "col-span-1")
+      }
+    >
+      {fields.map((field) => (
+        <div className="w-full" key={field.label}>
+          <p className="text-grey-600 mb-1">{field.label}</p>
+          <div className={`text-black ${field.important && "font-semibold"}`}>
+            {field.item ? field.item : field.value || "N/A"}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/main-page/grants/grant-view/GrantView.tsx b/frontend/src/main-page/grants/grant-view/GrantView.tsx
new file mode 100644
index 00000000..534f01bd
--- /dev/null
+++ b/frontend/src/main-page/grants/grant-view/GrantView.tsx
@@ -0,0 +1,293 @@
+import React, { useEffect, useState, useLayoutEffect } from "react";
+import { Grant } from "../../../../../middle-layer/types/Grant";
+import { api } from "../../../api";
+import { observer } from "mobx-react-lite";
+import StatusIndicator from "../../grants/grant-list/StatusIndicator";
+import {
+  faPenToSquare,
+  faCheckSquare,
+  faXmarkSquare,
+} from "@fortawesome/free-solid-svg-icons";
+import Button from "../../settings/components/Button";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ContactCard from "./ContactCard";
+import GrantFieldCol from "./GrantFieldCol";
+import { CostBenefitAnalysis } from "./CostBenefitAnalysis";
+
+interface GrantItemProps {
+  grant: Grant;
+}
+
+const GrantItem: React.FC<GrantItemProps> = observer(({ grant }) => {
+  const [curGrant, setCurGrant] = useState(grant);
+  const [wasGrantSubmitted, setWasGrantSubmitted] = useState(false);
+
+  const useTruncatedElement = ({
+    ref,
+  }: {
+    ref: React.RefObject<HTMLElement>;
+  }) => {
+    const [isTruncated, setIsTruncated] = useState(false);
+    const [isShowingMore, setIsShowingMore] = useState(false);
+
+    useLayoutEffect(() => {
+      const { offsetHeight, scrollHeight } = ref.current || {};
+
+      if (offsetHeight && scrollHeight && offsetHeight < scrollHeight) {
+        setIsTruncated(true);
+      } else {
+        setIsTruncated(false);
+      }
+    }, [ref]);
+
+    const toggleIsShowingMore = () => setIsShowingMore((prev) => !prev);
+
+    return {
+      isTruncated,
+      isShowingMore,
+      toggleIsShowingMore,
+    };
+  };
+  const ref = React.useRef(null);
+  const { isTruncated, isShowingMore, toggleIsShowingMore } =
+    useTruncatedElement({
+      ref,
+    });
+
+  // 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 (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();
+  }, [wasGrantSubmitted]);
+
+  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}`;
+  }
+
+  function formatCurrency(amount: number): string {
+    const formattedCurrency = new Intl.NumberFormat().format(amount);
+    return formattedCurrency;
+  }
+
+  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">{curGrant.organization}</h2>
+          <StatusIndicator curStatus={curGrant.status} />
+        </div>
+        {/* Right side */}
+        <div className="flex flex-col gap-2 items-end">
+          <Button
+            text="Edit"
+            onClick={() => alert("edit personal info")}
+            className="bg-white text-black border-2 border-grey-500"
+            logo={faPenToSquare}
+            logoPosition="right"
+          />
+        </div>
+      </div>
+      <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}
+                  >
+                    {curGrant?.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(curGrant.amount),
+                important: true,
+              },
+              {
+                label: "BCAN Eligible",
+                important: true,
+                item: curGrant.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(curGrant.application_deadline),
+              },
+              {
+                label: "Application Date",
+                value: "TBD (add to DB)",
+              },
+            ]}
+          />
+          <GrantFieldCol
+            fields={[
+              {
+                label: "Grant Start Date",
+                value: formatDate(curGrant.grant_start_date),
+              },
+              {
+                label: "Report Deadlines",
+                item:
+                  curGrant.report_deadlines &&
+                  curGrant.report_deadlines.length > 0 ? (
+                    curGrant.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: curGrant.timeline,
+              },
+              {
+                label: "Estimated Completion Time (hours)",
+                value: curGrant.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: "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:
+                curGrant.attachments && curGrant.attachments.length > 0 ? (
+                  <div className="columns-2 xl:columns-4 gap-4 lg:w-[90%]">
+                    {curGrant.attachments.map((attachment, index) => (
+                      <p key={index} className="text-sm truncate w-full mb-1">
+                        <a
+                          href={attachment.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-secondary font-medium text-sm 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
+          fields={[
+            {
+              label: "Cost Analysis Calculator",
+              item: (
+                <CostBenefitAnalysis grant={curGrant} />
+              ),
+            },
+          ]}
+        />
+    </div>
+    </div>
+  );
+});
+
+export default GrantItem;
diff --git a/frontend/src/main-page/settings/Settings.tsx b/frontend/src/main-page/settings/Settings.tsx
index 61fe0a47..1bf0b6dd 100644
--- a/frontend/src/main-page/settings/Settings.tsx
+++ b/frontend/src/main-page/settings/Settings.tsx
@@ -1,6 +1,7 @@
 import Button from "./components/Button";
 import InfoCard from "./components/InfoCard";
 import logo from "../../images/logo.svg";
+import { faPenToSquare } from "@fortawesome/free-solid-svg-icons";
 
 export default function Settings() {
   return (
@@ -45,10 +46,11 @@ export default function Settings() {
         title="Personal Information"
         action={
           <Button
-            //To-do: add a edit logo next to the "Edit" button
             text="Edit"
             onClick={() => alert("edit personal info")}
             className="bg-white text-black border-2 border-grey-500"
+            logo={faPenToSquare}
+            logoPosition="right"
           />
         }
         fields={[
diff --git a/frontend/src/main-page/settings/components/Button.tsx b/frontend/src/main-page/settings/components/Button.tsx
index 2da0f168..72efd36e 100644
--- a/frontend/src/main-page/settings/components/Button.tsx
+++ b/frontend/src/main-page/settings/components/Button.tsx
@@ -1,8 +1,11 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+
 type ButtonProps = {
     text: string;
     onClick: () => void;
     className?: string;
-    logo?: string;
+    logo?: IconProp;
     logoPosition?: 'left' | 'right';
 }
 
@@ -21,13 +24,12 @@ export default function Button({ text, onClick, className, logo, logoPosition }:
     >
       {logo && logoPosition === 'left' &&
       <span className="mr-2">
-        <img src={logo}
-        alt="" className="w-4 h-4" />
+        <FontAwesomeIcon icon={logo} className="text-lg w-4 h-4" />
       </span>}
       {text}
       {logo && logoPosition === 'right' &&
       <span className="ml-2">
-        <img src={logo} alt="" className="w-4 h-4" />
+        <FontAwesomeIcon icon={logo} className="text-lg w-4 h-4" />
       </span>}
     </button>
   );
diff --git a/frontend/src/sign-up/InputField.tsx b/frontend/src/sign-up/InputField.tsx
index 490438e6..1fdaa467 100644
--- a/frontend/src/sign-up/InputField.tsx
+++ b/frontend/src/sign-up/InputField.tsx
@@ -28,7 +28,7 @@ export default function InputField({
         <input
           id={id}
           className={`block w-full rounded-md border bg-white py-2.5 pl-4 pr-3 text-base placeholder:text-grey-500 ${
-            error ? "border-red" : "border-grey-400"
+            error ? "border-red" : "border-grey-500"
           }`}
           {...inputProps}
         />
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index ab168ff4..4501a0d7 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -86,7 +86,6 @@
 }
 
 a {
-  font-weight: 500;
   color: var(--color-secondary-500);
   text-decoration: inherit;
 }
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 0d38fbc6..bec42b29 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -88,10 +88,15 @@ export default {
         "8xl": "96rem",
         "9xl": "128rem",
       },
+      borderWidth: {
+        DEFAULT: "1.5px",
+        0: "0",
+      },
       borderRadius: {
-        "4xl": "2rem",
+        sm: "0.5rem",
         md: "0.75rem",
         DEFAULT: "0.75rem",
+        "4xl": "2rem",
       },
     },
   },
diff --git a/middle-layer/types/Status.ts b/middle-layer/types/Status.ts
index 34833450..c5d8ac9b 100644
--- a/middle-layer/types/Status.ts
+++ b/middle-layer/types/Status.ts
@@ -5,57 +5,96 @@
  *  (3) Inactive: Grant earnings are used up
  */
 export enum Status {
-    Potential = "Potential",
-    Active = "Active",
-    Inactive = "Inactive",
-    Rejected = "Rejected",
-    Pending = "Pending"
+  Potential = "Potential",
+  Active = "Active",
+  Inactive = "Inactive",
+  Rejected = "Rejected",
+  Pending = "Pending",
 }
 
 // TODO: 1) override stringify behavior of status enum 2) stringify, and then go back and modify enum (create helper function to generalize)
 // 3) turn enums to string
 
 // string rep of status
-export function stringToStatus(status: string): Status | null{
-    switch (status) {
-        case 'All': return null; // no filter
-        case 'Active': return Status.Active;
-        case 'Inactive': return Status.Inactive;
-        case 'Potential': return Status.Potential;
-        case 'Rejected': return Status.Rejected;
-        case 'Pending': return Status.Pending;
-        default: throw new Error(`Unknown status: ${status}`);
-    }
+export function stringToStatus(status: string): Status | null {
+  switch (status) {
+    case "All":
+      return null; // no filter
+    case "Active":
+      return Status.Active;
+    case "Inactive":
+      return Status.Inactive;
+    case "Potential":
+      return Status.Potential;
+    case "Rejected":
+      return Status.Rejected;
+    case "Pending":
+      return Status.Pending;
+    default:
+      throw new Error(`Unknown status: ${status}`);
+  }
 }
 
-export function statusToString(status : Status): string {
-    switch (status) {
-        case  Status.Active : return 'Active';
-        case Status.Inactive : return "Inactive";
-        case Status.Potential : return "Potential";
-        case Status.Rejected : return "Rejected";
-        case Status.Pending : return "Pending";   
-    }   
+export function statusToString(status: Status): string {
+  switch (status) {
+    case Status.Active:
+      return "Active";
+    case Status.Inactive:
+      return "Inactive";
+    case Status.Potential:
+      return "Potential";
+    case Status.Rejected:
+      return "Rejected";
+    case Status.Pending:
+      return "Pending";
+  }
 }
 
 // color associated with status on UI, represented as a string
-export function getColorStatus(status: string) {
+export function getColorStatus(
+  status: string,
+  variant: "light" | "dark" = "dark",
+): string {
+  if (variant === "light") {
     switch (status) {
-        case "Active": return "var(--color-green)"; // green
-        case "Inactive": return "var(--color-grey-500)" // gray
-        case "Potential": return "var(--color-blue-dark)" // blue
-        // TODO add colors for rejected and pending
-        case "Rejected": return "var(--color-red)" // red
-        case "Pending": return "var(--color-yellow-dark)" // yellow
-        default: return 'gray';
+      case "Active":
+        return "var(--color-green-light)"; // green
+      case "Inactive":
+        return "var(--color-grey-400)"; // gray
+      case "Potential":
+        return "var(--color-blue-light)"; // blue
+      // TODO add colors for rejected and pending
+      case "Rejected":
+        return "var(--color-red-light)"; // red
+      case "Pending":
+        return "var(--color-yellow-light)"; // yellow
+      default:
+        return "gray";
     }
+  } else {
+    switch (status) {
+      case "Active":
+        return "var(--color-green-dark)"; // green
+      case "Inactive":
+        return "var(--color-grey-700)"; // gray
+      case "Potential":
+        return "var(--color-blue-dark)"; // blue
+      // TODO add colors for rejected and pending
+      case "Rejected":
+        return "var(--color-red-dark)"; // red
+      case "Pending":
+        return "var(--color-yellow-dark)"; // yellow
+      default:
+        return "gray";
+    }
+  }
 }
 
 // Get list of status types for received and unreceived grants
-export function getListApplied(received: boolean){
-    if(received){
-        return ["Active", "Inactive"]
-    } else{
-        return ["Pending", "Rejected"]
-    }
-}
\ No newline at end of file
+export function getListApplied(received: boolean) {
+  if (received) {
+    return ["Active", "Inactive"];
+  } else {
+    return ["Pending", "Rejected"];
+  }
+}