From 715fa05c2ccfe723a46a12a265346cad0a348f0a Mon Sep 17 00:00:00 2001
From: Adam Trincas <atrincas@gmail.com>
Date: Mon, 23 Dec 2024 10:52:20 +0100
Subject: [PATCH] Project details implementation

---
 client/src/app/(overview)/store.ts            |  27 +-
 client/src/app/(overview)/url-store.ts        |  22 +-
 client/src/components/ui/bar-chart/index.tsx  |  71 ---
 client/src/components/ui/graph.tsx            |  62 ++-
 .../src/containers/overview/filters/index.tsx |   4 +-
 .../src/containers/overview/header/index.tsx  |   4 +-
 .../overview/header/parameters/index.tsx      |  16 +-
 .../overview/map/layers/projects/index.tsx    |   4 +-
 .../abatement-potential/index.tsx             |  44 ++
 .../project-details/compare-button/index.tsx  |  19 +
 .../project-details/cost-estimates/index.tsx  |  59 ++
 .../overview/project-details/cost/index.tsx   |  66 +++
 .../overview/project-details/footer/index.tsx |  60 ++
 .../overview/project-details/index.tsx        | 520 +++---------------
 .../project-details/left-over/index.tsx       |  60 ++
 .../project-details/navigation/index.tsx      |  54 ++
 .../project-details/parameters/index.tsx      |  25 +-
 .../score-card-rating/index.tsx               |  38 ++
 .../score-card-ratings/index.tsx              |  64 +++
 .../overview/project-details/utils.ts         |  44 ++
 .../overview/table/toolbar/search/index.tsx   |   4 +-
 .../overview/table/view/key-costs/index.tsx   |   7 +-
 .../overview/table/view/overview/index.tsx    |  16 +-
 .../view/scorecard-prioritization/index.tsx   |  12 +-
 .../cost-details/table/utils.ts               |  42 +-
 .../projects/custom-project/cost/index.tsx    |  57 +-
 .../custom-project/left-over/index.tsx        |  49 +-
 client/src/hooks/use-feature-flags.ts         |   1 +
 client/src/lib/format.tsx                     |  17 -
 client/src/lib/query-keys.ts                  |   7 +-
 client/src/lib/utils.ts                       |  18 +
 shared/contracts/projects.contract.ts         |   3 +
 shared/dtos/projects/project-scorecard.dto.ts |  24 +-
 33 files changed, 806 insertions(+), 714 deletions(-)
 delete mode 100644 client/src/components/ui/bar-chart/index.tsx
 create mode 100644 client/src/containers/overview/project-details/abatement-potential/index.tsx
 create mode 100644 client/src/containers/overview/project-details/compare-button/index.tsx
 create mode 100644 client/src/containers/overview/project-details/cost-estimates/index.tsx
 create mode 100644 client/src/containers/overview/project-details/cost/index.tsx
 create mode 100644 client/src/containers/overview/project-details/footer/index.tsx
 create mode 100644 client/src/containers/overview/project-details/left-over/index.tsx
 create mode 100644 client/src/containers/overview/project-details/navigation/index.tsx
 create mode 100644 client/src/containers/overview/project-details/score-card-rating/index.tsx
 create mode 100644 client/src/containers/overview/project-details/score-card-ratings/index.tsx
 create mode 100644 client/src/containers/overview/project-details/utils.ts

diff --git a/client/src/app/(overview)/store.ts b/client/src/app/(overview)/store.ts
index 0d7fe945..1d0108e5 100644
--- a/client/src/app/(overview)/store.ts
+++ b/client/src/app/(overview)/store.ts
@@ -1,6 +1,14 @@
 import { MapMouseEvent } from "react-map-gl";
 
+import {
+  COST_TYPE_SELECTOR,
+  PROJECT_PRICE_TYPE,
+  PROJECT_SIZE_FILTER,
+} from "@shared/entities/projects.entity";
 import { atom } from "jotai";
+import { z } from "zod";
+
+import { filtersSchema } from "@/app/(overview)/url-store";
 
 export const projectsUIState = atom<{
   filtersOpen: boolean;
@@ -15,8 +23,23 @@ export const popupAtom = atom<{
 
 export const projectDetailsAtom = atom<{
   isOpen: boolean;
-  projectName: string;
+  id: string;
+  visibleProjectIds: string[];
 }>({
   isOpen: false,
-  projectName: "",
+  id: "",
+  visibleProjectIds: [],
 });
+
+export type ProjectDetailsFilters = Pick<
+  z.infer<typeof filtersSchema>,
+  "projectSizeFilter" | "priceType" | "costRangeSelector"
+>;
+
+const INITIAL_FILTERS_STATE: ProjectDetailsFilters = {
+  projectSizeFilter: PROJECT_SIZE_FILTER.MEDIUM,
+  priceType: PROJECT_PRICE_TYPE.MARKET_PRICE,
+  costRangeSelector: COST_TYPE_SELECTOR.NPV,
+};
+
+export const projectDetailsFiltersAtom = atom(INITIAL_FILTERS_STATE);
diff --git a/client/src/app/(overview)/url-store.ts b/client/src/app/(overview)/url-store.ts
index 93570745..ee06d7f7 100644
--- a/client/src/app/(overview)/url-store.ts
+++ b/client/src/app/(overview)/url-store.ts
@@ -1,5 +1,3 @@
-import { ReactNode } from "react";
-
 import {
   ACTIVITY,
   RESTORATION_ACTIVITY_SUBTYPE,
@@ -25,18 +23,16 @@ import { TABLE_VIEWS } from "@/containers/overview/table/toolbar/table-selector"
 
 const SUB_ACTIVITIES = RESTORATION_ACTIVITY_SUBTYPE;
 
-interface ParameterOption {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-
-export interface Parameter {
-  key: keyof Omit<z.infer<typeof filtersSchema>, "keyword">;
+export interface Parameter<T = keyof z.infer<typeof filtersSchema>> {
+  key: T;
   label: string;
   className: string;
-  options: ParameterOption[];
-  tooltipContent?: ReactNode;
+  tooltipContent?: React.ReactNode;
+  options: {
+    label: string;
+    value: string;
+    disabled?: boolean;
+  }[];
 }
 
 export const filtersSchema = z.object({
@@ -65,7 +61,7 @@ export const INITIAL_FILTERS_STATE: z.infer<typeof filtersSchema> = {
   abatementPotentialRange: INITIAL_ABATEMENT_POTENTIAL_RANGE,
 };
 
-export function useGlobalFilters() {
+export function useProjectOverviewFilters() {
   const [popup, setPopup] = useAtom(popupAtom);
   const [filters, setFilters] = useQueryState(
     "filters",
diff --git a/client/src/components/ui/bar-chart/index.tsx b/client/src/components/ui/bar-chart/index.tsx
deleted file mode 100644
index 972983e6..00000000
--- a/client/src/components/ui/bar-chart/index.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { toCompactAmount } from "@/lib/format";
-
-interface BarChartProps {
-  total: number;
-  segments: {
-    value: number;
-    label: string;
-    colorClass: string;
-  }[];
-  orientation?: "horizontal" | "vertical";
-}
-
-const BarChart = ({
-  total,
-  segments,
-  orientation = "horizontal",
-}: BarChartProps) => {
-  const getSize = (value: number) => {
-    const percentage = (value / total) * 100;
-    return `${Math.max(percentage, 0)}%`;
-  };
-
-  if (orientation === "horizontal") {
-    return (
-      <div className="relative h-full min-h-[150px] w-full overflow-hidden rounded-lg">
-        <div className="absolute flex h-full w-full flex-row gap-1">
-          {segments.map((segment, index) => (
-            <div
-              key={index}
-              style={{
-                height: getSize(segment.value),
-                width: "100%",
-              }}
-              className={`relative h-full rounded transition-all duration-300 ease-in-out ${segment.colorClass}`}
-            >
-              <div className="absolute bottom-1 left-0 right-0 mx-1">
-                <div className="rounded bg-white/50 px-1.5 py-0.5 text-center text-xs font-semibold text-big-stone-950">
-                  ${toCompactAmount(segment.value)}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="relative h-40 w-full overflow-hidden rounded-lg">
-      <div className="absolute flex h-full w-full flex-col gap-1">
-        {segments.map((segment, index) => (
-          <div
-            key={index}
-            style={{
-              height: getSize(segment.value),
-            }}
-            className={`relative min-h-[30px] w-full transition-all duration-300 ease-in-out ${segment.colorClass}`}
-          >
-            <div className="absolute bottom-1 left-0 right-0 mx-1">
-              <div className="rounded bg-white/50 px-1.5 py-0.5 text-center text-xs font-semibold text-big-stone-950">
-                ${toCompactAmount(segment.value)}
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default BarChart;
diff --git a/client/src/components/ui/graph.tsx b/client/src/components/ui/graph.tsx
index 4a910ad4..7f5a38a6 100644
--- a/client/src/components/ui/graph.tsx
+++ b/client/src/components/ui/graph.tsx
@@ -30,7 +30,7 @@ const getSize = (value: number, total: number) => {
  * 2. Split mode (when leftover is provided): Shows total on left and segments with leftover on right
  */
 const Graph: FC<GraphProps> = ({ total, leftover, segments }) => {
-  if (leftover) {
+  if (typeof leftover === "number") {
     return (
       <div className="relative h-full min-h-[150px] w-full max-w-[400px] overflow-hidden rounded-md">
         <div className="absolute flex h-full w-full flex-row gap-1 rounded-md">
@@ -149,4 +149,62 @@ const GraphLegend: FC<GraphLegendProps> = ({ items }) => {
   );
 };
 
-export { Graph, GraphLegend };
+interface GraphWithLegendProps {
+  /** The total value to be displayed */
+  total: number;
+  /** Optional value that, when provided, shows a split view with total on left and segments with leftover on right */
+  leftover?: number;
+  /** Array of segments with their corresponding legend items */
+  items: Array<{
+    value: number;
+    label: string;
+    textColor: string;
+    bgColor: string;
+  }>;
+}
+
+const GraphWithLegend: FC<GraphWithLegendProps> = ({
+  total,
+  leftover,
+  items,
+}) => {
+  return (
+    <div className="flex min-h-[160px] justify-between gap-4">
+      <div className="flex max-w-[148px] flex-1 flex-col justify-between">
+        <div>
+          <span className="text-xl font-normal">
+            {renderCurrency(leftover || total)}
+          </span>
+        </div>
+        <GraphLegend
+          items={[
+            ...(leftover
+              ? [
+                  {
+                    label: "Total Revenue",
+                    textColor: "text-yellow-500",
+                    bgColor: "bg-yellow-500",
+                  },
+                ]
+              : []),
+            ...items.map(({ label, textColor, bgColor }) => ({
+              label,
+              textColor,
+              bgColor,
+            })),
+          ]}
+        />
+      </div>
+      <Graph
+        total={total}
+        segments={items.map(({ value, bgColor }) => ({
+          value,
+          colorClass: bgColor,
+        }))}
+        leftover={leftover}
+      />
+    </div>
+  );
+};
+
+export { Graph, GraphLegend, GraphWithLegend };
diff --git a/client/src/containers/overview/filters/index.tsx b/client/src/containers/overview/filters/index.tsx
index afcce826..bd6b173d 100644
--- a/client/src/containers/overview/filters/index.tsx
+++ b/client/src/containers/overview/filters/index.tsx
@@ -15,7 +15,7 @@ import { cn } from "@/lib/utils";
 import { projectsUIState } from "@/app/(overview)/store";
 import {
   INITIAL_FILTERS_STATE,
-  useGlobalFilters,
+  useProjectOverviewFilters,
 } from "@/app/(overview)/url-store";
 
 import { Button } from "@/components/ui/button";
@@ -39,7 +39,7 @@ import {
 export const FILTERS_SIDEBAR_WIDTH = 320;
 
 export default function ProjectsFilters() {
-  const [filters, setFilters] = useGlobalFilters();
+  const [filters, setFilters] = useProjectOverviewFilters();
   const setFiltersOpen = useSetAtom(projectsUIState);
   const [costValuesState, setCostValuesState] = useState([
     filters.costRange[0] || INITIAL_COST_RANGE[filters.costRangeSelector][0],
diff --git a/client/src/containers/overview/header/index.tsx b/client/src/containers/overview/header/index.tsx
index 42c3b542..edb6a62f 100644
--- a/client/src/containers/overview/header/index.tsx
+++ b/client/src/containers/overview/header/index.tsx
@@ -7,7 +7,7 @@ import { Settings2Icon } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 import { projectsUIState } from "@/app/(overview)/store";
-import { useGlobalFilters } from "@/app/(overview)/url-store";
+import { useProjectOverviewFilters } from "@/app/(overview)/url-store";
 import { INITIAL_FILTERS_STATE } from "@/app/(overview)/url-store";
 
 import ParametersProjects from "@/containers/overview/header/parameters";
@@ -17,7 +17,7 @@ import { SidebarTrigger } from "@/components/ui/sidebar";
 
 export default function ProjectsHeader() {
   const setFiltersOpen = useSetAtom(projectsUIState);
-  const [filters] = useGlobalFilters();
+  const [filters] = useProjectOverviewFilters();
 
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const {
diff --git a/client/src/containers/overview/header/parameters/index.tsx b/client/src/containers/overview/header/parameters/index.tsx
index 525dc726..0c1fccf1 100644
--- a/client/src/containers/overview/header/parameters/index.tsx
+++ b/client/src/containers/overview/header/parameters/index.tsx
@@ -3,11 +3,12 @@ import {
   COST_TYPE_SELECTOR,
   PROJECT_PRICE_TYPE,
 } from "@shared/entities/projects.entity";
-import { z } from "zod";
 
 import { FILTER_KEYS } from "@/app/(overview)/constants";
-import { Parameter, useGlobalFilters } from "@/app/(overview)/url-store";
-import { filtersSchema } from "@/app/(overview)/url-store";
+import {
+  Parameter,
+  useProjectOverviewFilters,
+} from "@/app/(overview)/url-store";
 
 import { FILTERS } from "@/constants/tooltip";
 
@@ -80,10 +81,11 @@ export const PROJECT_PARAMETERS: Parameter[] = [
 ] as const;
 
 export default function ParametersProjects() {
-  const [filters, setFilters] = useGlobalFilters();
+  const [filters, setFilters] = useProjectOverviewFilters();
+
   const handleParameters = async (
     v: string,
-    parameter: keyof Omit<z.infer<typeof filtersSchema>, "keyword">,
+    parameter: keyof typeof filters,
   ) => {
     await setFilters((prev) => ({
       ...prev,
@@ -104,7 +106,9 @@ export default function ParametersProjects() {
           </InfoButton>
           <Select
             name={parameter.label}
-            defaultValue={String(filters[parameter.key])}
+            defaultValue={String(
+              filters[parameter.key as keyof typeof filters],
+            )}
             onValueChange={(v) => {
               handleParameters(v, parameter.key);
             }}
diff --git a/client/src/containers/overview/map/layers/projects/index.tsx b/client/src/containers/overview/map/layers/projects/index.tsx
index fdf4ddcd..79898dba 100644
--- a/client/src/containers/overview/map/layers/projects/index.tsx
+++ b/client/src/containers/overview/map/layers/projects/index.tsx
@@ -6,14 +6,14 @@ import { FillLayerSpecification } from "mapbox-gl";
 import { client } from "@/lib/query-client";
 import { geometriesKeys } from "@/lib/query-keys";
 
-import { useGlobalFilters } from "@/app/(overview)/url-store";
+import { useProjectOverviewFilters } from "@/app/(overview)/url-store";
 
 import { generateColorRamp } from "@/containers/overview/map/layers/projects/utils";
 
 export const LAYER_ID = "cost-abatement-layer";
 
 export default function ProjectsLayer() {
-  const [filters] = useGlobalFilters();
+  const [filters] = useProjectOverviewFilters();
 
   const queryKey = geometriesKeys.all(filters).queryKey;
 
diff --git a/client/src/containers/overview/project-details/abatement-potential/index.tsx b/client/src/containers/overview/project-details/abatement-potential/index.tsx
new file mode 100644
index 00000000..c782060b
--- /dev/null
+++ b/client/src/containers/overview/project-details/abatement-potential/index.tsx
@@ -0,0 +1,44 @@
+import { FC } from "react";
+
+import { formatNumber } from "@/lib/format";
+
+import { PROJECT_DETAILS } from "@/constants/tooltip";
+
+import { Label } from "@/components/ui/label";
+
+interface AbatementPotentialProps {
+  value?: number;
+}
+
+const AbatementPotential: FC<AbatementPotentialProps> = ({ value }) => {
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Label
+            className="text-md font-medium"
+            tooltip={{
+              title: "Abatement potential",
+              content: PROJECT_DETAILS.ABATEMENT_POTENTIAL,
+            }}
+          >
+            <h3 className="text-base font-semibold">Abatement potential</h3>
+          </Label>
+        </div>
+        <span className="space-x-1 text-xl font-normal">
+          <span
+            className={"inline-block align-top text-xs text-muted-foreground"}
+          >
+            tCO2e/yr&nbsp;
+          </span>
+          <span>{formatNumber(value || 0)}</span>
+        </span>
+      </div>
+      <div className="mt-4 space-y-2 text-sm text-muted-foreground">
+        <p>Estimation of total CO2 expected during the project.</p>
+      </div>
+    </>
+  );
+};
+
+export default AbatementPotential;
diff --git a/client/src/containers/overview/project-details/compare-button/index.tsx b/client/src/containers/overview/project-details/compare-button/index.tsx
new file mode 100644
index 00000000..b38bb88e
--- /dev/null
+++ b/client/src/containers/overview/project-details/compare-button/index.tsx
@@ -0,0 +1,19 @@
+import { Plus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+
+const CompareButton = () => {
+  return (
+    <div className="flex items-center gap-2">
+      <Label className="text-xs text-big-stone-200">
+        Compare with a different project
+      </Label>
+      <Button variant="outline" className="h-8 w-8 p-0 hover:bg-transparent">
+        <Plus className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+};
+
+export default CompareButton;
diff --git a/client/src/containers/overview/project-details/cost-estimates/index.tsx b/client/src/containers/overview/project-details/cost-estimates/index.tsx
new file mode 100644
index 00000000..c59ab36c
--- /dev/null
+++ b/client/src/containers/overview/project-details/cost-estimates/index.tsx
@@ -0,0 +1,59 @@
+import { FC } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { useFeatureFlags } from "@/hooks/use-feature-flags";
+
+import CompareButton from "@/containers/overview/project-details/compare-button";
+import { CostItem } from "@/containers/projects/custom-project/cost-details/table";
+
+import { Label } from "@/components/ui/label";
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+
+interface CostEstimatesProps {
+  items: CostItem[];
+}
+const CostEstimates: FC<CostEstimatesProps> = ({ items }) => {
+  const { "compare-with-other-project": compareWithOtherProject } =
+    useFeatureFlags();
+  return (
+    <>
+      <div className="flex items-center justify-between p-4 py-2">
+        <div className="flex items-center gap-2">
+          <Label
+            className="text-md font-medium"
+            tooltip={{
+              title: "Cost estimates",
+              content:
+                "Refers to the summary of Capital Expenditure and Operating Expenditure",
+            }}
+          >
+            <h3 className="text-md">Cost estimates</h3>
+          </Label>
+        </div>
+        {compareWithOtherProject && <CompareButton />}
+      </div>
+      <Table className="rounded-2xl">
+        <TableBody>
+          {items.map(({ costName, label, value }) => (
+            <TableRow
+              key={costName}
+              className={cn({
+                "divide-background": true,
+                "bg-big-stone-950 hover:bg-big-stone-950":
+                  costName === "capex" ||
+                  costName === "opex" ||
+                  costName === "totalCost",
+              })}
+            >
+              <TableCell className="text-muted-foreground">{label}</TableCell>
+              <TableCell className="px-4">{value}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+export default CostEstimates;
diff --git a/client/src/containers/overview/project-details/cost/index.tsx b/client/src/containers/overview/project-details/cost/index.tsx
new file mode 100644
index 00000000..23b21981
--- /dev/null
+++ b/client/src/containers/overview/project-details/cost/index.tsx
@@ -0,0 +1,66 @@
+import { FC } from "react";
+
+import { ProjectScorecardDto } from "@shared/dtos/projects/project-scorecard.dto";
+import { COST_TYPE_SELECTOR } from "@shared/entities/projects.entity";
+import { useAtomValue } from "jotai";
+
+import { projectDetailsFiltersAtom } from "@/app/(overview)/store";
+
+import { PROJECT_DETAILS } from "@/constants/tooltip";
+
+import { GraphWithLegend } from "@/components/ui/graph";
+import { Label } from "@/components/ui/label";
+
+interface ProjectDetailsCostProps {
+  data?: ProjectScorecardDto["projectCost"];
+}
+const ProjectDetailsCost: FC<ProjectDetailsCostProps> = ({ data }) => {
+  const { costRangeSelector } = useAtomValue(projectDetailsFiltersAtom);
+  const tooltipContent =
+    costRangeSelector === COST_TYPE_SELECTOR.NPV
+      ? PROJECT_DETAILS.TOTAL_PROJECT_COST_NPV
+      : PROJECT_DETAILS.TOTAL_PROJECT_COST;
+
+  return (
+    <>
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <Label
+              className="text-md font-medium"
+              tooltip={{
+                title: "Total project cost",
+                content: tooltipContent,
+              }}
+            >
+              <h3 className="text-md">Total project cost</h3>
+            </Label>
+          </div>
+          <div className="text-sm text-muted-foreground">
+            Refers to the summary of Capital Expenditure and Operating
+            Expenditure
+          </div>
+        </div>
+      </div>
+      <GraphWithLegend
+        total={data?.[costRangeSelector].totalCost || 0}
+        items={[
+          {
+            value: data?.[costRangeSelector].capex || 0,
+            label: "CapEx",
+            textColor: "text-sky-blue-500",
+            bgColor: "bg-sky-blue-500",
+          },
+          {
+            value: data?.[costRangeSelector].opex || 0,
+            label: "OpEx",
+            textColor: "text-sky-blue-200",
+            bgColor: "bg-sky-blue-200",
+          },
+        ]}
+      />
+    </>
+  );
+};
+
+export default ProjectDetailsCost;
diff --git a/client/src/containers/overview/project-details/footer/index.tsx b/client/src/containers/overview/project-details/footer/index.tsx
new file mode 100644
index 00000000..761c185f
--- /dev/null
+++ b/client/src/containers/overview/project-details/footer/index.tsx
@@ -0,0 +1,60 @@
+import { Link, NotebookPen } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+const Footer = () => {
+  return (
+    <div className="sticky bottom-0 flex w-full flex-wrap justify-between gap-4 border-t border-t-sky-900 bg-background px-6 py-2">
+      <div className="text-xs">
+        <div>
+          Values considered for a{" "}
+          <span className="font-bold">small project (40 ha).</span>
+        </div>
+        <div>For more detailed analysis, create a custom project.</div>
+      </div>
+      <div>
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button>
+              <NotebookPen className="h-4 w-4" />
+              Create Custom Project
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader className="flex flex-row items-center gap-2">
+              <NotebookPen className="h-6 w-6 text-sky-blue-300" />
+              <DialogTitle className="!m-0">
+                Create a Custom Project
+              </DialogTitle>
+            </DialogHeader>
+            <DialogDescription>
+              By creating a custom project you will generate a customizable
+              version where you can edit all parameters to fit your specific
+              needs.
+            </DialogDescription>
+            <DialogFooter>
+              <DialogClose>
+                <Button variant="outline">Cancel</Button>
+              </DialogClose>
+              <Button>
+                <Link href={"/projects/new"}>Create</Link>
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/client/src/containers/overview/project-details/index.tsx b/client/src/containers/overview/project-details/index.tsx
index b3d01232..3cfe3fdf 100644
--- a/client/src/containers/overview/project-details/index.tsx
+++ b/client/src/containers/overview/project-details/index.tsx
@@ -1,37 +1,29 @@
-import Link from "next/link";
+import { useMemo } from "react";
 
-import { PROJECT_SCORE } from "@shared/entities/project-score.enum";
-import { useAtom } from "jotai";
-import { ChevronUp, ChevronDown, NotebookPen, Plus } from "lucide-react";
+import { keepPreviousData } from "@tanstack/react-query";
+import { useAtom, useAtomValue } from "jotai";
 
-import {
-  renderCurrency,
-  formatCurrency,
-  renderAbatementCurrency,
-} from "@/lib/format";
-import { cn } from "@/lib/utils";
-
-import { projectDetailsAtom } from "@/app/(overview)/store";
-
-import { useFeatureFlags } from "@/hooks/use-feature-flags";
+import { client } from "@/lib/query-client";
+import { queryKeys } from "@/lib/query-keys";
 
+import {
+  projectDetailsAtom,
+  projectDetailsFiltersAtom,
+} from "@/app/(overview)/store";
+
+import AbatementPotential from "@/containers/overview/project-details/abatement-potential";
+import ProjectDetailsCost from "@/containers/overview/project-details/cost";
+import CostEstimates from "@/containers/overview/project-details/cost-estimates";
+import Footer from "@/containers/overview/project-details/footer";
+import ProjectDetailsLeftover from "@/containers/overview/project-details/left-over";
+import Navigation from "@/containers/overview/project-details/navigation";
 import ParametersProjects from "@/containers/overview/project-details/parameters";
+import ScoreCardRating from "@/containers/overview/project-details/score-card-rating";
+import ScoreCardRatings from "@/containers/overview/project-details/score-card-ratings";
+import { parseCostEstimatesForTable } from "@/containers/overview/project-details/utils";
 
-import BarChart from "@/components/ui/bar-chart";
-import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogClose,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import { ScoreIndicator, DEFAULT_BG_CLASSES } from "@/components/ui/score-card";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Sheet,
   SheetContent,
@@ -39,442 +31,86 @@ import {
   SheetTitle,
 } from "@/components/ui/sheet";
 
-const CreateProjectDetails = () => (
-  <Dialog>
-    <DialogTrigger asChild>
-      <Button>
-        <NotebookPen className="h-4 w-4" />
-        Create Custom Project
-      </Button>
-    </DialogTrigger>
-    <DialogContent className="sm:max-w-md">
-      <DialogHeader className="flex flex-row items-center gap-2">
-        <NotebookPen className="h-6 w-6 text-sky-blue-300" />
-        <DialogTitle className="!m-0">Create a Custom Project</DialogTitle>
-      </DialogHeader>
-      <DialogDescription>
-        By creating a custom project you will generate a customizable version
-        where you can edit all parameters to fit your specific needs.
-      </DialogDescription>
-      <DialogFooter>
-        <DialogClose>
-          <Button variant="outline">Cancel</Button>
-        </DialogClose>
-        <Button>
-          <Link href={"/projects/new"}>Create</Link>
-        </Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-);
-
-//////// Legend component ////////
-const Legend = ({
-  name,
-  textColor,
-  bgColor,
-}: {
-  name: string;
-  textColor: string;
-  bgColor: string;
-}) => {
-  return (
-    <div className="flex items-center gap-4">
-      <div className="flex items-center gap-2">
-        <div className={`h-3 w-3 rounded-full ${bgColor}`}></div>
-        <span className={`text-xs ${textColor}`}>{name}</span>
-      </div>
-    </div>
-  );
-};
-
-// Mock data - to be replaced with API data later
-const projectData = {
-  name: "Australian Mangrove Conservation",
-  size: "Small",
-  carbonPricingType: "Market (30$)",
-  cost: "NPV",
-  totalCost: 38023789,
-  capEx: 1500000,
-  opEx: 36500000,
-  leftover: 4106132,
-  totalRevenue: 40600000,
-  opExRevenue: 36500000,
-  abatement: 962991,
-  overallScore: "medium",
-  scorecard: [
-    { name: "Economic feasibility", rating: "high" },
-    { name: "Legal feasibility", rating: "low" },
-    { name: "Implementation risk", rating: "high" },
-    { name: "Social feasibility", rating: "medium" },
-    { name: "Security risk", rating: "medium" },
-    { name: "Value for money", rating: "low" },
-    { name: "Overall", rating: "medium" },
-  ],
-  costEstimates: [
+export default function ProjectDetails() {
+  const filters = useAtomValue(projectDetailsFiltersAtom);
+  const [projectDetails, setProjectDetails] = useAtom(projectDetailsAtom);
+  const { costRangeSelector } = filters;
+  const queryKey = queryKeys.projects.one(projectDetails.id, filters).queryKey;
+  const { data: projectData } = client.projects.getProject.useQuery(
+    queryKey,
     {
-      name: "Capital expenditure",
-      value: 1514218,
-      items: [
-        { name: "Feasibility analysis", value: 70000 },
-        { name: "Conservation planning and admin", value: 629559 },
-        { name: "Data collection and field costs", value: 76963 },
-        { name: "Community representation", value: 286112 },
-        { name: "Blue carbon project planning", value: 111125 },
-        { name: "Establishing carbon rights", value: 296010 },
-        { name: "Validation", value: 44450 },
-        { name: "Implementation labor", value: 0 },
-      ],
+      query: {
+        filter: filters,
+      },
+      params: { id: projectDetails.id },
     },
     {
-      name: "Operating expenditure",
-      value: 36509571,
-      items: [
-        { name: "Monitoring and Maintenance", value: 402322 },
-        { name: "Community benefit sharing fund", value: 34523347 },
-        { name: "Carbon standard fees", value: 227875 },
-        { name: "Baseline reassessment", value: 75812 },
-        { name: "MRV", value: 223062 },
-      ],
+      queryKey,
+      select: (data) => data.body.data,
+      enabled: projectDetails.isOpen && !!projectDetails.id,
+      placeholderData: keepPreviousData,
     },
-    { name: "Total cost", value: 38023789 },
-  ],
-};
-
-export default function ProjectDetails() {
-  const [projectDetails, setProjectDetails] = useAtom(projectDetailsAtom);
-  const { "project-comparison": projectComparison } = useFeatureFlags();
+  );
+  const costItems = useMemo(
+    () =>
+      projectData?.projectCost[costRangeSelector]
+        ? parseCostEstimatesForTable(
+            projectData?.projectCost[costRangeSelector],
+          )
+        : [],
+    [projectData?.projectCost, costRangeSelector],
+  );
 
   const handleOpenDetails = (open: boolean) =>
     setProjectDetails({ ...projectDetails, isOpen: open });
 
   return (
     <Sheet open={projectDetails.isOpen} onOpenChange={handleOpenDetails}>
-      <SheetContent className="overflow-y-scroll pb-0 sm:max-w-[50%]">
-        <SheetHeader className="space-y-6">
+      <SheetContent className="flex h-full flex-col gap-0 overflow-hidden px-0 pb-0 sm:max-w-[50%]">
+        <SheetHeader className="space-y-6 px-6 pb-6">
           <div className="flex gap-4">
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                className="h-8 w-8 p-0 hover:bg-transparent"
-              >
-                <ChevronDown className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="outline"
-                className="h-8 w-8 p-0 hover:bg-transparent"
-              >
-                <ChevronUp className="h-4 w-4" />
-              </Button>
-            </div>
+            <Navigation />
             <div className="flex items-center justify-between">
-              <SheetTitle>{projectDetails.projectName}</SheetTitle>
+              <SheetTitle>{projectData?.projectName}</SheetTitle>
             </div>
           </div>
           <ParametersProjects />
         </SheetHeader>
 
-        <div className="mb-8 mt-6 space-y-6">
-          <div className="grid grid-cols-2 gap-4">
-            <Card className="flex flex-col gap-4 p-4">
-              <div className="flex flex-col gap-2">
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center gap-2">
-                    <Label
-                      htmlFor="totalProjectCost"
-                      className="text-md font-medium"
-                      tooltip={{
-                        title: "Total project cost",
-                        content:
-                          "Refers to the summary of Capital Expenditure and Operating Expenditure",
-                      }}
-                    >
-                      <h3 className="text-md">Total project cost</h3>
-                    </Label>
-                  </div>
-                  <div className="text-sm text-muted-foreground">
-                    Refers to the summary of Capital Expenditure and Operating
-                    Expenditure
-                  </div>
-                </div>
-              </div>
-              <div className="flex min-h-[160px] gap-4">
-                <div className="flex flex-col justify-between">
-                  <div>
-                    <span className="text-xl font-normal">
-                      {renderCurrency(projectData.totalCost)}
-                    </span>
-                  </div>
-                  <div className="mt-4 space-y-2">
-                    <Legend
-                      name="CapEx"
-                      textColor="text-sky-blue-500"
-                      bgColor="bg-sky-blue-500"
-                    />
-                    <Legend
-                      name="OpEx"
-                      textColor="text-sky-blue-200"
-                      bgColor="bg-sky-blue-200"
-                    />
-                  </div>
-                </div>
-                <div className="flex-1">
-                  <BarChart
-                    orientation="vertical"
-                    total={projectData.totalRevenue}
-                    segments={[
-                      {
-                        value: projectData.capEx,
-                        label: "CapEx Revenue",
-                        colorClass: "bg-sky-blue-500",
-                      },
-                      {
-                        value: projectData.opExRevenue,
-                        label: "OpEx",
-                        colorClass: "bg-sky-blue-200",
-                      },
-                    ]}
-                  />
-                </div>
-              </div>
-            </Card>
-
-            <Card className="flex flex-col gap-4 p-4">
-              <div className="flex flex-col gap-2">
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center gap-2">
-                    <Label
-                      htmlFor="totalProjectCost"
-                      className="text-md font-medium"
-                      tooltip={{
-                        title: "Total project cost",
-                        content:
-                          "Refers to the summary of Capital Expenditure and Operating Expenditure",
-                      }}
-                    >
-                      <h3 className="text-md">Total project cost</h3>
-                    </Label>
-                  </div>
-                  <div className="text-sm text-muted-foreground">
-                    Refers to the summary of Capital Expenditure and Operating
-                    Expenditure
-                  </div>
-                </div>
-              </div>
-              <div className="flex min-h-[160px] gap-4">
-                <div className="flex flex-col justify-between">
-                  <div>
-                    <span className="text-xl font-normal">
-                      {renderCurrency(projectData.totalCost)}
-                    </span>
-                  </div>
-                  <div className="mt-4 space-y-2">
-                    <Legend
-                      name="CapEx"
-                      textColor="text-yellow-500"
-                      bgColor="bg-yellow-500"
-                    />
-                    <Legend
-                      name="OpEx"
-                      textColor="text-sky-blue-200"
-                      bgColor="bg-sky-blue-200"
-                    />
-                  </div>
-                </div>
-                <div className="flex-1">
-                  <BarChart
-                    total={projectData.totalRevenue}
-                    segments={[
-                      {
-                        value: projectData.totalRevenue,
-                        label: "Total Revenue",
-                        colorClass: "bg-yellow-500",
-                      },
-                      {
-                        value: projectData.opExRevenue,
-                        label: "OpEx",
-                        colorClass: "bg-sky-blue-200",
-                      },
-                    ]}
-                  />
-                </div>
-              </div>
-            </Card>
-          </div>
-
-          <div className="flex gap-4">
-            <Card className="w-3/4 p-4">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <Label
-                    htmlFor="abatementPotential"
-                    className="text-md font-medium"
-                    tooltip={{
-                      title: "Abatement potential",
-                      content:
-                        "Refers to the summary of Capital Expenditure and Operating Expenditure",
-                    }}
-                  >
-                    <h3 className="text-md">Abatement potential</h3>
-                  </Label>
-                </div>
-                <span className="text-xl font-normal">
-                  {renderAbatementCurrency(projectData.abatement)}
-                </span>
-              </div>
-              <div className="mt-4 space-y-2 text-sm text-muted-foreground">
-                <p>Estimation of total CO2 expected during the project.</p>
-              </div>
-            </Card>
-
-            <Card className="w-1/4 p-4">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <Label
-                    htmlFor="overallScore"
-                    className="text-md font-medium"
-                    tooltip={{
-                      title: "Overall score",
-                      content:
-                        "Refers to the summary of Capital Expenditure and Operating Expenditure",
-                    }}
-                  >
-                    <h3 className="text-md">Overall score</h3>
-                  </Label>
-                </div>
-              </div>
-              <div className="mt-4 space-y-2">
-                <span className="text-xl font-normal text-wheat-200">
-                  {projectData.overallScore}
-                </span>
-              </div>
-            </Card>
-          </div>
-
-          <Card className="p-4 pb-0 pt-2">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Label
-                  htmlFor="scorecardRatings"
-                  className="text-md font-medium"
-                  tooltip={{
-                    title: "Scorecard ratings",
-                    content:
-                      "Refers to the summary of Capital Expenditure and Operating Expenditure",
-                  }}
-                >
-                  <h3 className="text-md">Scorecard ratings</h3>
-                </Label>
-              </div>
-              {projectComparison && (
-                <div className="flex items-center gap-2">
-                  <Label className="text-xs text-muted-foreground">
-                    Compare with a different project
-                  </Label>
-                  <Button
-                    variant="outline"
-                    className="h-8 w-8 p-0 hover:bg-transparent"
-                  >
-                    <Plus className="h-4 w-4" />
-                  </Button>
-                </div>
-              )}
-            </div>
-            <div className="mt-2">
-              {projectData.scorecard.map((item, index) => (
-                <>
-                  {index === 0 && <hr className="m-0" />}
-                  <div key={item.name} className="flex">
-                    <div className="w-2/3 content-center py-2">{item.name}</div>
-                    <ScoreIndicator
-                      className={cn(
-                        "w-1/3",
-                        DEFAULT_BG_CLASSES[item.rating as PROJECT_SCORE],
-                      )}
-                    >
-                      {item.rating}
-                    </ScoreIndicator>
-                  </div>
-                  {projectData.scorecard.length !== index + 1 && (
-                    <hr className="m-0" />
-                  )}
-                </>
-              ))}
+        <ScrollArea>
+          <div className="h-full space-y-6 px-6 pb-6">
+            <div className="grid grid-cols-2 gap-4">
+              <Card variant="secondary" className="flex flex-col gap-4 p-4">
+                <ProjectDetailsCost data={projectData?.projectCost} />
+              </Card>
+
+              <Card variant="secondary" className="flex flex-col gap-4 p-4">
+                <ProjectDetailsLeftover
+                  data={projectData?.projectCost}
+                  leftoverAfterOpex={projectData?.leftoverAfterOpex}
+                />
+              </Card>
             </div>
-          </Card>
 
-          <Card className="p-0">
-            <div className="flex items-center justify-between p-4 py-2">
-              <div className="flex items-center gap-2">
-                <Label
-                  htmlFor="costEstimates"
-                  className="text-md font-medium"
-                  tooltip={{
-                    title: "Cost estimates",
-                    content:
-                      "Refers to the summary of Capital Expenditure and Operating Expenditure",
-                  }}
-                >
-                  <h3 className="text-md">Cost estimates</h3>
-                </Label>
-              </div>
-              {projectComparison && (
-                <div className="flex items-center gap-2">
-                  <Label className="text-xs text-muted-foreground">
-                    Compare with a different project
-                  </Label>
-                  <Button
-                    variant="outline"
-                    className="h-8 w-8 p-0 hover:bg-transparent"
-                  >
-                    <Plus className="h-4 w-4" />
-                  </Button>
-                </div>
-              )}
-            </div>
-            <div>
-              {projectData.costEstimates.map((estimate) => (
-                <div key={estimate.name}>
-                  <div className="flex bg-big-stone-900 px-2 last:rounded-bl-lg last:rounded-br-lg">
-                    <div className="w-2/3 content-center py-2 pl-2 font-medium">
-                      {estimate.name}
-                    </div>
-                    <div className="w-1/3 content-center py-2">
-                      <span className="font-medium">
-                        {formatCurrency(estimate.value)}
-                      </span>
-                    </div>
-                  </div>
-                  {estimate.items?.map((item) => (
-                    <div key={item.name} className="flex px-2">
-                      <div className="w-2/3 content-center py-2 pl-2">
-                        {item.name}
-                      </div>
-                      <div className="w-1/3 content-center py-2">
-                        <span className="font-normal">
-                          {formatCurrency(item.value)}
-                        </span>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ))}
-            </div>
-          </Card>
-        </div>
+            <div className="flex gap-4">
+              <Card variant="secondary" className="w-3/4 p-4">
+                <AbatementPotential value={projectData?.abatementPotential} />
+              </Card>
 
-        <div className="sticky bottom-0 flex w-full flex-wrap justify-between gap-4 border-t border-t-sky-900 bg-background py-2">
-          <div className="text-xs">
-            <div>
-              Values considered for a{" "}
-              <span className="font-bold">small project (40 ha).</span>
+              <Card variant="secondary" className="w-1/4 p-4">
+                <ScoreCardRating value={projectData?.scoreCardRating} />
+              </Card>
             </div>
-            <div>For more detailed analysis, create a custom project.</div>
-          </div>
-          <div>
-            <CreateProjectDetails />
+
+            <Card variant="secondary" className="p-0">
+              <ScoreCardRatings data={projectData?.scorecard} />
+            </Card>
+            <Card variant="secondary" className="overflow-hidden p-0">
+              <CostEstimates items={costItems} />
+            </Card>
           </div>
-        </div>
+        </ScrollArea>
+        <Footer />
       </SheetContent>
     </Sheet>
   );
diff --git a/client/src/containers/overview/project-details/left-over/index.tsx b/client/src/containers/overview/project-details/left-over/index.tsx
new file mode 100644
index 00000000..a8cb747f
--- /dev/null
+++ b/client/src/containers/overview/project-details/left-over/index.tsx
@@ -0,0 +1,60 @@
+import { FC } from "react";
+
+import { ProjectScorecardDto } from "@shared/dtos/projects/project-scorecard.dto";
+import { useAtomValue } from "jotai";
+
+import { projectDetailsFiltersAtom } from "@/app/(overview)/store";
+
+import { PROJECT_DETAILS } from "@/constants/tooltip";
+
+import { GraphWithLegend } from "@/components/ui/graph";
+import { Label } from "@/components/ui/label";
+
+interface ProjectDetailsLeftoverProps {
+  data?: ProjectScorecardDto["projectCost"];
+  leftoverAfterOpex?: number;
+}
+
+const ProjectDetailsLeftover: FC<ProjectDetailsLeftoverProps> = ({
+  data,
+  leftoverAfterOpex,
+}) => {
+  const { costRangeSelector } = useAtomValue(projectDetailsFiltersAtom);
+  return (
+    <>
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <Label
+              className="text-md font-medium"
+              tooltip={{
+                title: "Leftover after OpEx",
+                content: PROJECT_DETAILS.LEFTOVER_AFTER_OPEX,
+              }}
+            >
+              <h3 className="text-md">Leftover after OpEx</h3>
+            </Label>
+          </div>
+          <div className="text-sm text-big-stone-200">
+            Refers to the difference between Total Revenue and Operating
+            Expenditure.
+          </div>
+        </div>
+      </div>
+      <GraphWithLegend
+        total={data?.[costRangeSelector].totalRevenue || 0}
+        leftover={leftoverAfterOpex || 0}
+        items={[
+          {
+            value: data?.[costRangeSelector].opex || 0,
+            label: "OpEx",
+            textColor: "text-sky-blue-200",
+            bgColor: "bg-sky-blue-200",
+          },
+        ]}
+      />
+    </>
+  );
+};
+
+export default ProjectDetailsLeftover;
diff --git a/client/src/containers/overview/project-details/navigation/index.tsx b/client/src/containers/overview/project-details/navigation/index.tsx
new file mode 100644
index 00000000..c9e9ad85
--- /dev/null
+++ b/client/src/containers/overview/project-details/navigation/index.tsx
@@ -0,0 +1,54 @@
+import { useAtom } from "jotai";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+import { projectDetailsAtom } from "@/app/(overview)/store";
+
+import { Button } from "@/components/ui/button";
+
+const Navigation = () => {
+  const [projectDetails, setProjectDetails] = useAtom(projectDetailsAtom);
+  const currentProjectNavigationIndex =
+    projectDetails.visibleProjectIds.indexOf(projectDetails.id);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button
+        variant="outline"
+        className="h-8 w-8 p-0"
+        disabled={
+          projectDetails.id ===
+          projectDetails.visibleProjectIds[
+            projectDetails.visibleProjectIds.length - 1
+          ]
+        }
+        onClick={() => {
+          setProjectDetails({
+            ...projectDetails,
+            id: projectDetails.visibleProjectIds[
+              currentProjectNavigationIndex + 1
+            ],
+          });
+        }}
+      >
+        <ChevronDown className="h-4 w-4" />
+      </Button>
+      <Button
+        variant="outline"
+        className="h-8 w-8 p-0"
+        disabled={projectDetails.id === projectDetails.visibleProjectIds[0]}
+        onClick={() => {
+          setProjectDetails({
+            ...projectDetails,
+            id: projectDetails.visibleProjectIds[
+              currentProjectNavigationIndex - 1
+            ],
+          });
+        }}
+      >
+        <ChevronUp className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+};
+
+export default Navigation;
diff --git a/client/src/containers/overview/project-details/parameters/index.tsx b/client/src/containers/overview/project-details/parameters/index.tsx
index e7cea781..75ae1803 100644
--- a/client/src/containers/overview/project-details/parameters/index.tsx
+++ b/client/src/containers/overview/project-details/parameters/index.tsx
@@ -3,11 +3,12 @@ import {
   COST_TYPE_SELECTOR,
   PROJECT_PRICE_TYPE,
 } from "@shared/entities/projects.entity";
-import { atom, useAtom } from "jotai";
-import { z } from "zod";
+import { useAtom } from "jotai";
 
 import { FILTER_KEYS } from "@/app/(overview)/constants";
-import { filtersSchema, Parameter } from "@/app/(overview)/url-store";
+import { projectDetailsFiltersAtom } from "@/app/(overview)/store";
+import type { ProjectDetailsFilters } from "@/app/(overview)/store";
+import { Parameter } from "@/app/(overview)/url-store";
 
 import { Label } from "@/components/ui/label";
 import {
@@ -18,15 +19,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 
-const INITIAL_FILTERS_STATE: Partial<z.infer<typeof filtersSchema>> = {
-  projectSizeFilter: PROJECT_SIZE_FILTER.MEDIUM,
-  priceType: PROJECT_PRICE_TYPE.MARKET_PRICE,
-  costRangeSelector: COST_TYPE_SELECTOR.NPV,
-};
-
-const filtersAtom = atom(INITIAL_FILTERS_STATE);
-
-export const PROJECT_PARAMETERS: Parameter[] = [
+export const PROJECT_PARAMETERS: Parameter<keyof ProjectDetailsFilters>[] = [
   {
     key: FILTER_KEYS[1],
     label: "Project size",
@@ -79,16 +72,12 @@ export const PROJECT_PARAMETERS: Parameter[] = [
   },
 ] as const;
 
-function useFilters() {
-  return useAtom(filtersAtom);
-}
-
 export default function ParametersProjects() {
-  const [filters, setFilters] = useFilters();
+  const [filters, setFilters] = useAtom(projectDetailsFiltersAtom);
 
   const handleParameters = (
     v: string,
-    parameter: keyof Omit<z.infer<typeof filtersSchema>, "keyword">,
+    parameter: keyof ProjectDetailsFilters,
   ) => {
     setFilters((prev) => ({ ...prev, [parameter]: v }));
   };
diff --git a/client/src/containers/overview/project-details/score-card-rating/index.tsx b/client/src/containers/overview/project-details/score-card-rating/index.tsx
new file mode 100644
index 00000000..71178708
--- /dev/null
+++ b/client/src/containers/overview/project-details/score-card-rating/index.tsx
@@ -0,0 +1,38 @@
+import { FC } from "react";
+
+import { PROJECT_SCORE } from "@shared/entities/project-score.enum";
+
+import { PROJECT_DETAILS } from "@/constants/tooltip";
+
+import { Label } from "@/components/ui/label";
+
+interface ScoreCardRatingProps {
+  value?: PROJECT_SCORE;
+}
+
+const ScoreCardRating: FC<ScoreCardRatingProps> = ({ value }) => {
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Label
+            className="text-md font-medium"
+            tooltip={{
+              title: "Overall score",
+              content: PROJECT_DETAILS.OVERALL_SCORE,
+            }}
+          >
+            <h3 className="text-base font-semibold">Overall score</h3>
+          </Label>
+        </div>
+      </div>
+      <div className="mt-4 space-y-2">
+        <span className="text-xl font-normal capitalize text-wheat-200">
+          {value}
+        </span>
+      </div>
+    </>
+  );
+};
+
+export default ScoreCardRating;
diff --git a/client/src/containers/overview/project-details/score-card-ratings/index.tsx b/client/src/containers/overview/project-details/score-card-ratings/index.tsx
new file mode 100644
index 00000000..f602c794
--- /dev/null
+++ b/client/src/containers/overview/project-details/score-card-ratings/index.tsx
@@ -0,0 +1,64 @@
+import { FC } from "react";
+
+import { Scorecard } from "@shared/dtos/projects/project-scorecard.dto";
+
+import { useFeatureFlags } from "@/hooks/use-feature-flags";
+
+import CompareButton from "@/containers/overview/project-details/compare-button";
+
+import { Label } from "@/components/ui/label";
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+
+const scoreCardMap = {
+  financialFeasibility: "Economic feasibility",
+  legalFeasibility: "Legal feasibility",
+  implementationFeasibility: "Implementation risk",
+  socialFeasibility: "Social feasibility",
+  securityRating: "Security risk",
+  availabilityOfExperiencedLabor: "Availability of experienced labor",
+  availabilityOfAlternatingFunding: "Alt. funding access",
+  coastalProtectionBenefits: "Coastal protection benefits",
+  biodiversityBenefit: "Biodiversity benefit",
+};
+
+const ScoreCardRatings: FC<{ data?: Scorecard }> = ({ data }) => {
+  const { "compare-with-other-project": compareWithOtherProject } =
+    useFeatureFlags();
+  return (
+    <>
+      <div className="flex items-center justify-between py-2 pl-4 pr-2">
+        <div className="flex items-center gap-2">
+          <Label
+            className="text-md font-medium"
+            tooltip={{
+              title: "Scorecard ratings",
+              content:
+                "Refers to the summary of Capital Expenditure and Operating Expenditure",
+            }}
+          >
+            <h3 className="text-base font-semibold">Scorecard ratings</h3>
+          </Label>
+        </div>
+        {compareWithOtherProject && <CompareButton />}
+      </div>
+      <Table>
+        <TableBody>
+          {data &&
+            Object.entries(data).map(([key, value]) => (
+              <TableRow
+                key={`scorecard-item-${key}`}
+                className="divide-background first:border-t"
+              >
+                <TableCell className="py-2 pl-4 text-sm font-normal text-big-stone-200">
+                  {scoreCardMap[key as keyof Scorecard]}
+                </TableCell>
+                <TableCell className="w-[240px] font-medium">{value}</TableCell>
+              </TableRow>
+            ))}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+export default ScoreCardRatings;
diff --git a/client/src/containers/overview/project-details/utils.ts b/client/src/containers/overview/project-details/utils.ts
new file mode 100644
index 00000000..fae731c1
--- /dev/null
+++ b/client/src/containers/overview/project-details/utils.ts
@@ -0,0 +1,44 @@
+import { ProjectScorecardDto } from "@shared/dtos/projects/project-scorecard.dto";
+
+import { parseTableData } from "@/lib/utils";
+
+import { CostItem } from "@/containers/projects/custom-project/cost-details/table";
+
+/**
+ * TODO: This is a duplicate mapping, we should refactor this to be shared.
+ * Starting by defining a common interface (see type CostEstimates)
+ */
+type CostEstimates = ProjectScorecardDto["projectCost"]["total"];
+
+const costEstimatesLabelMap: Record<
+  Exclude<
+    keyof CostEstimates,
+    "monitoringMaintenance" | "costPerTCO2e" | "totalRevenue"
+  >,
+  string
+> = {
+  capex: "Capital expenditure",
+  feasibilityAnalysis: "Feasibility analysis",
+  conservationPlanning: "Conservation planning and admin",
+  dataCollection: "Data collection and field costs",
+  communityRepresentation: "Community representation",
+  blueCarbonProjectPlanning: "Blue carbon project planning",
+  establishingCarbonRights: "Establishing carbon rights",
+  validation: "Validation",
+  implementationLabor: "Implementation labor",
+  opex: "Operating expenditure",
+  monitoring: "Monitoring",
+  maintenance: "Maintenance",
+  communityBenefit: "Community benefit sharing fund",
+  carbonStandardFees: "Carbon standard fees",
+  baselineReassessment: "Baseline reassessment",
+  mrv: "MRV",
+  longTermProjectOperating: "Long-term project operating",
+  totalCost: "Total cost",
+} as const;
+
+function parseCostEstimatesForTable(data: CostEstimates): CostItem[] {
+  return parseTableData(data, costEstimatesLabelMap);
+}
+
+export { parseCostEstimatesForTable };
diff --git a/client/src/containers/overview/table/toolbar/search/index.tsx b/client/src/containers/overview/table/toolbar/search/index.tsx
index b0971626..6b3ba0cf 100644
--- a/client/src/containers/overview/table/toolbar/search/index.tsx
+++ b/client/src/containers/overview/table/toolbar/search/index.tsx
@@ -1,11 +1,11 @@
 import { ComponentProps } from "react";
 
-import { useGlobalFilters } from "@/app/(overview)/url-store";
+import { useProjectOverviewFilters } from "@/app/(overview)/url-store";
 
 import Search from "@/components/ui/search";
 
 export default function SearchProjectsTable() {
-  const [{ keyword }, setFilters] = useGlobalFilters();
+  const [{ keyword }, setFilters] = useProjectOverviewFilters();
 
   const handleSearch = async (
     v: Parameters<ComponentProps<typeof Search>["onChange"]>[0],
diff --git a/client/src/containers/overview/table/view/key-costs/index.tsx b/client/src/containers/overview/table/view/key-costs/index.tsx
index 9adc09c5..2ff562bc 100644
--- a/client/src/containers/overview/table/view/key-costs/index.tsx
+++ b/client/src/containers/overview/table/view/key-costs/index.tsx
@@ -18,7 +18,10 @@ import { client } from "@/lib/query-client";
 import { queryKeys } from "@/lib/query-keys";
 import { cn } from "@/lib/utils";
 
-import { useGlobalFilters, useTableView } from "@/app/(overview)/url-store";
+import {
+  useProjectOverviewFilters,
+  useTableView,
+} from "@/app/(overview)/url-store";
 
 import { useTablePaginationReset } from "@/hooks/use-table-pagination-reset";
 
@@ -42,7 +45,7 @@ import TablePagination, {
 
 export function KeyCostsTable() {
   const [tableView] = useTableView();
-  const [filters] = useGlobalFilters();
+  const [filters] = useProjectOverviewFilters();
   const [sorting, setSorting] = useState<SortingState>([
     {
       id: "projectName",
diff --git a/client/src/containers/overview/table/view/overview/index.tsx b/client/src/containers/overview/table/view/overview/index.tsx
index 168ad08a..0766a04a 100644
--- a/client/src/containers/overview/table/view/overview/index.tsx
+++ b/client/src/containers/overview/table/view/overview/index.tsx
@@ -24,7 +24,10 @@ import { queryKeys } from "@/lib/query-keys";
 import { cn } from "@/lib/utils";
 
 import { projectDetailsAtom } from "@/app/(overview)/store";
-import { useGlobalFilters, useTableView } from "@/app/(overview)/url-store";
+import {
+  useProjectOverviewFilters,
+  useTableView,
+} from "@/app/(overview)/url-store";
 
 import { useTablePaginationReset } from "@/hooks/use-table-pagination-reset";
 
@@ -61,7 +64,7 @@ export interface TableStateWithMaximums extends TableState {
 
 export function OverviewTable() {
   const [tableView] = useTableView();
-  const [filters] = useGlobalFilters();
+  const [filters] = useProjectOverviewFilters();
   const [, setProjectDetails] = useAtom(projectDetailsAtom);
   const [sorting, setSorting] = useState<SortingState>([
     {
@@ -89,7 +92,7 @@ export function OverviewTable() {
     {
       query: {
         ...filtersToQueryParams(filters),
-        fields: ["capex", "capexNPV", "opex", "opexNPV"].concat(
+        fields: ["id", "capex", "capexNPV", "opex", "opexNPV"].concat(
           columnsBasedOnFilters.map((column) => column.accessorKey),
         ) as filterFields,
         ...(sorting.length > 0 && {
@@ -113,6 +116,10 @@ export function OverviewTable() {
     },
   );
 
+  const visibleProjectIds = useMemo(() => {
+    return data?.data.map((item) => item.id!) || [];
+  }, [data]);
+
   const maximums = useMemo(
     () => ({
       maxAbatementPotential: isSuccess
@@ -202,7 +209,8 @@ export function OverviewTable() {
                 onClick={() => {
                   setProjectDetails({
                     isOpen: true,
-                    projectName: row.original.projectName ?? "",
+                    id: row.original.id!,
+                    visibleProjectIds,
                   });
                 }}
               >
diff --git a/client/src/containers/overview/table/view/scorecard-prioritization/index.tsx b/client/src/containers/overview/table/view/scorecard-prioritization/index.tsx
index 19ca5bfc..561344a6 100644
--- a/client/src/containers/overview/table/view/scorecard-prioritization/index.tsx
+++ b/client/src/containers/overview/table/view/scorecard-prioritization/index.tsx
@@ -22,7 +22,10 @@ import { queryKeys } from "@/lib/query-keys";
 import { cn } from "@/lib/utils";
 
 import { projectDetailsAtom } from "@/app/(overview)/store";
-import { useGlobalFilters, useTableView } from "@/app/(overview)/url-store";
+import {
+  useProjectOverviewFilters,
+  useTableView,
+} from "@/app/(overview)/url-store";
 
 import { useTablePaginationReset } from "@/hooks/use-table-pagination-reset";
 
@@ -51,8 +54,8 @@ type sortFields = z.infer<typeof projectScorecardQuerySchema.shape.sort>;
 
 export function ScoredCardPrioritizationTable() {
   const [tableView] = useTableView();
-  const [filters] = useGlobalFilters();
-  const [, setProjectDetails] = useAtom(projectDetailsAtom);
+  const [filters] = useProjectOverviewFilters();
+  const [projectDetails, setProjectDetails] = useAtom(projectDetailsAtom);
   const [sorting, setSorting] = useState<SortingState>([
     {
       id: "projectName",
@@ -165,8 +168,9 @@ export function ScoredCardPrioritizationTable() {
                 className="cursor-pointer hover:bg-muted/50"
                 onClick={() => {
                   setProjectDetails({
+                    ...projectDetails,
                     isOpen: true,
-                    projectName: row.original.projectName ?? "",
+                    id: row.original.id,
                   });
                 }}
               >
diff --git a/client/src/containers/projects/custom-project/cost-details/table/utils.ts b/client/src/containers/projects/custom-project/cost-details/table/utils.ts
index 6bc1c744..f8032ba6 100644
--- a/client/src/containers/projects/custom-project/cost-details/table/utils.ts
+++ b/client/src/containers/projects/custom-project/cost-details/table/utils.ts
@@ -1,21 +1,14 @@
 import { CustomProjectCostDetails } from "@shared/dtos/custom-projects/custom-project-output.dto";
 
-import { formatCurrency } from "@/lib/format";
+import { parseTableData } from "@/lib/utils";
 
 import { CostItem } from "@/containers/projects/custom-project/cost-details/table";
 
-const capitalExpenditurePattern =
-  /^(capitalExpenditure|feasibilityAnalysis|conservationPlanningAndAdmin|dataCollectionAndFieldCost|communityRepresentation|blueCarbonProjectPlanning|establishingCarbonRights|validation|implementationLabor)$/;
-const operationalExpenditurePattern =
-  /^(operationalExpenditure|monitoring|maintenance|communityBenefitSharingFund|carbonStandardFees|baselineReassessment|mrv|longTermProjectOperatingCost)$/;
-const currencySettings = { maximumFractionDigits: 0 };
 const customProjectCostDetailsLabelMap: Record<
   keyof CustomProjectCostDetails,
   string
 > = {
   capitalExpenditure: "Capital expenditure",
-  operationalExpenditure: "Operating expenditure",
-  totalCost: "Total cost",
   feasibilityAnalysis: "Feasibility analysis",
   conservationPlanningAndAdmin: "Conservation planning and admin",
   dataCollectionAndFieldCost: "Data collection and field costs",
@@ -24,6 +17,7 @@ const customProjectCostDetailsLabelMap: Record<
   establishingCarbonRights: "Establishing carbon rights",
   validation: "Validation",
   implementationLabor: "Implementation labor",
+  operationalExpenditure: "Operating expenditure",
   monitoring: "Monitoring",
   maintenance: "Maintenance",
   communityBenefitSharingFund: "Community benefit sharing fund",
@@ -31,39 +25,11 @@ const customProjectCostDetailsLabelMap: Record<
   baselineReassessment: "Baseline reassessment",
   mrv: "MRV",
   longTermProjectOperatingCost: "Long-term project operating",
+  totalCost: "Total cost",
 } as const;
 
 function parseCostDetailsForTable(data: CustomProjectCostDetails): CostItem[] {
-  const capitalItems: CostItem[] = [];
-  const operationalItems: CostItem[] = [];
-
-  Object.entries(data).forEach(([key, value]) => {
-    if (key === "totalCost") {
-      return;
-    }
-
-    const costItem: CostItem = {
-      costName: key,
-      label:
-        customProjectCostDetailsLabelMap[key as keyof CustomProjectCostDetails],
-      value: formatCurrency(value, currencySettings),
-    };
-
-    if (capitalExpenditurePattern.test(key)) {
-      capitalItems.push(costItem);
-    } else if (operationalExpenditurePattern.test(key)) {
-      operationalItems.push(costItem);
-    }
-  });
-
-  const totalCostItem: CostItem = {
-    costName: "totalCost",
-    label: "Total cost",
-    value: formatCurrency(data.totalCost, currencySettings),
-  };
-
-  // Array should be in this order
-  return [...capitalItems, ...operationalItems, totalCostItem];
+  return parseTableData(data, customProjectCostDetailsLabelMap);
 }
 
 export { parseCostDetailsForTable };
diff --git a/client/src/containers/projects/custom-project/cost/index.tsx b/client/src/containers/projects/custom-project/cost/index.tsx
index 39bcbc21..98497fe3 100644
--- a/client/src/containers/projects/custom-project/cost/index.tsx
+++ b/client/src/containers/projects/custom-project/cost/index.tsx
@@ -2,15 +2,13 @@ import { FC } from "react";
 
 import { useSetAtom } from "jotai";
 
-import { renderCurrency } from "@/lib/format";
-
 import { showCostDetailsAtom } from "@/app/projects/store";
 
 import { CUSTOM_PROJECT_OUTPUTS } from "@/constants/tooltip";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Graph, GraphLegend } from "@/components/ui/graph";
+import { GraphWithLegend } from "@/components/ui/graph";
 import { Label } from "@/components/ui/label";
 
 interface ProjectCostProps {
@@ -53,42 +51,23 @@ const ProjectCost: FC<ProjectCostProps> = ({ total, capex, opex }) => {
       </CardHeader>
 
       <CardContent className="px-4 pb-4">
-        <div className="flex justify-between gap-4">
-          <div className="flex max-w-[148px] flex-1 flex-col justify-between">
-            <div>
-              <span className="text-xl font-normal">
-                {renderCurrency(total)}
-              </span>
-            </div>
-            <GraphLegend
-              items={[
-                {
-                  label: "CapEx",
-                  textColor: "text-sky-blue-500",
-                  bgColor: "bg-sky-blue-500",
-                },
-                {
-                  label: "OpEx",
-                  textColor: "text-sky-blue-200",
-                  bgColor: "bg-sky-blue-200",
-                },
-              ]}
-            />
-          </div>
-          <Graph
-            total={total}
-            segments={[
-              {
-                value: capex,
-                colorClass: "bg-sky-blue-500",
-              },
-              {
-                value: opex,
-                colorClass: "bg-sky-blue-200",
-              },
-            ]}
-          />
-        </div>
+        <GraphWithLegend
+          total={total}
+          items={[
+            {
+              label: "CapEx",
+              value: capex,
+              textColor: "text-sky-blue-500",
+              bgColor: "bg-sky-blue-500",
+            },
+            {
+              label: "OpEx",
+              value: opex,
+              textColor: "text-sky-blue-200",
+              bgColor: "bg-sky-blue-200",
+            },
+          ]}
+        />
       </CardContent>
     </Card>
   );
diff --git a/client/src/containers/projects/custom-project/left-over/index.tsx b/client/src/containers/projects/custom-project/left-over/index.tsx
index f558278a..eb4aad12 100644
--- a/client/src/containers/projects/custom-project/left-over/index.tsx
+++ b/client/src/containers/projects/custom-project/left-over/index.tsx
@@ -1,11 +1,9 @@
 import { FC } from "react";
 
-import { renderCurrency } from "@/lib/format";
-
 import { CUSTOM_PROJECT_OUTPUTS } from "@/constants/tooltip";
 
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Graph, GraphLegend } from "@/components/ui/graph";
+import { GraphWithLegend } from "@/components/ui/graph";
 import { Label } from "@/components/ui/label";
 
 interface LeftoverProps {
@@ -39,39 +37,18 @@ const LeftOver: FC<LeftoverProps> = ({ total, leftover, opex }) => {
       </CardHeader>
 
       <CardContent className="px-4 pb-4">
-        <div className="flex justify-between gap-4">
-          <div className="flex max-w-[148px] flex-1 flex-col justify-between">
-            <div>
-              <span className="text-xl font-normal">
-                {renderCurrency(leftover)}
-              </span>
-            </div>
-            <GraphLegend
-              items={[
-                {
-                  label: "Total Revenue",
-                  textColor: "text-yellow-500",
-                  bgColor: "bg-yellow-500",
-                },
-                {
-                  label: "OpEx",
-                  textColor: "text-sky-blue-200",
-                  bgColor: "bg-sky-blue-200",
-                },
-              ]}
-            />
-          </div>
-          <Graph
-            total={total}
-            segments={[
-              {
-                value: opex,
-                colorClass: "bg-sky-blue-200",
-              },
-            ]}
-            leftover={leftover}
-          />
-        </div>
+        <GraphWithLegend
+          total={total}
+          leftover={leftover}
+          items={[
+            {
+              value: opex,
+              label: "OpEx",
+              textColor: "text-sky-blue-200",
+              bgColor: "bg-sky-blue-200",
+            },
+          ]}
+        />
       </CardContent>
     </Card>
   );
diff --git a/client/src/hooks/use-feature-flags.ts b/client/src/hooks/use-feature-flags.ts
index 11c48cda..4b747098 100644
--- a/client/src/hooks/use-feature-flags.ts
+++ b/client/src/hooks/use-feature-flags.ts
@@ -19,6 +19,7 @@ const FEATURE_FLAGS = {
   "update-selection": false,
   /** Controls the visibility of the methodology page */
   "methodology-page": false,
+  "compare-with-other-project": false,
 } as const;
 
 type FeatureFlags = typeof FEATURE_FLAGS;
diff --git a/client/src/lib/format.tsx b/client/src/lib/format.tsx
index 4b5c7437..6cafafa6 100644
--- a/client/src/lib/format.tsx
+++ b/client/src/lib/format.tsx
@@ -23,23 +23,6 @@ export const formatNumber = (
   }).format(value);
 };
 
-export const renderAbatementCurrency = (
-  value: number,
-  options: Intl.NumberFormatOptions = {},
-) => {
-  let formatted = formatCurrency(value, options);
-  formatted = formatted.replace(/\.\d+/, "");
-  const [, amount] = formatted.match(/^(\D*)(.+)$/)!.slice(1);
-  return (
-    <>
-      <span className={"inline-block align-top text-xs text-muted-foreground"}>
-        tCO2e/yr &nbsp;
-      </span>
-      {amount}
-    </>
-  );
-};
-
 export function renderCurrency(
   value: number,
   options: Intl.NumberFormatOptions = {},
diff --git a/client/src/lib/query-keys.ts b/client/src/lib/query-keys.ts
index 79d78956..9328f7d3 100644
--- a/client/src/lib/query-keys.ts
+++ b/client/src/lib/query-keys.ts
@@ -10,6 +10,7 @@ import { ECOSYSTEM } from "@shared/entities/ecosystem.enum";
 import { PaginationState, SortingState } from "@tanstack/react-table";
 import { z } from "zod";
 
+import { ProjectDetailsFilters } from "@/app/(overview)/store";
 import { filtersSchema } from "@/app/(overview)/url-store";
 
 import { TABLE_VIEWS } from "@/containers/overview/table/toolbar/table-selector";
@@ -40,7 +41,10 @@ export const tableKeys = createQueryKeys("tables", {
       pagination?: PaginationState;
     },
   ) => ["all", tableView, filters],
-  id: (id: string) => [id],
+});
+
+export const projectKeys = createQueryKeys("projects", {
+  one: (id: string, filters: ProjectDetailsFilters) => [id, filters],
 });
 
 export const customProjectKeys = createQueryKeys("customProjects", {
@@ -87,4 +91,5 @@ export const queryKeys = mergeQueryKeys(
   tableKeys,
   countriesKeys,
   customProjectKeys,
+  projectKeys,
 );
diff --git a/client/src/lib/utils.ts b/client/src/lib/utils.ts
index 6ef2f4d7..e4596d8e 100644
--- a/client/src/lib/utils.ts
+++ b/client/src/lib/utils.ts
@@ -1,6 +1,10 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
+import { formatCurrency } from "@/lib/format";
+
+import { CostItem } from "@/containers/projects/custom-project/cost-details/table";
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
@@ -10,3 +14,17 @@ export const getAuthHeader = (token: string | undefined) => {
 
   return { Authorization: `Bearer ${token}` };
 };
+
+export const parseTableData = <
+  T extends Record<string, number>,
+  K extends keyof T,
+>(
+  data: T,
+  labelMap: Record<K, string>,
+): CostItem[] => {
+  return Object.keys(labelMap).map((key) => ({
+    costName: key,
+    label: labelMap[key as K],
+    value: formatCurrency(data[key as K], { maximumFractionDigits: 0 }),
+  }));
+};
diff --git a/shared/contracts/projects.contract.ts b/shared/contracts/projects.contract.ts
index feef86f5..caba471b 100644
--- a/shared/contracts/projects.contract.ts
+++ b/shared/contracts/projects.contract.ts
@@ -25,6 +25,8 @@ export const otherParams = z.object({
   withMaximums: z.coerce.boolean().optional(),
 });
 export const projectsQuerySchema = generateEntityQuerySchema(Project);
+export const projectQuerySchema =
+  generateEntityQuerySchema(ProjectScorecardDto);
 export const projectScorecardQuerySchema =
   generateEntityQuerySchema(ProjectScorecardView);
 
@@ -60,6 +62,7 @@ export const projectsContract = contract.router({
     responses: {
       200: contract.type<ApiResponse<ProjectScorecardDto>>(),
     },
+    query: projectQuerySchema,
   },
   getProjectCountries: {
     method: "GET",
diff --git a/shared/dtos/projects/project-scorecard.dto.ts b/shared/dtos/projects/project-scorecard.dto.ts
index 6f54b78d..53712643 100644
--- a/shared/dtos/projects/project-scorecard.dto.ts
+++ b/shared/dtos/projects/project-scorecard.dto.ts
@@ -1,3 +1,4 @@
+import { CustomProjectCostDetails } from "@shared/dtos/custom-projects/custom-project-output.dto";
 import {
   ACTIVITY,
   RESTORATION_ACTIVITY_SUBTYPE,
@@ -9,6 +10,17 @@ import {
   PROJECT_SIZE_FILTER,
 } from "@shared/entities/projects.entity";
 
+export interface Scorecard {
+  financialFeasibility: PROJECT_SCORE;
+  legalFeasibility: PROJECT_SCORE;
+  implementationFeasibility: PROJECT_SCORE;
+  socialFeasibility: PROJECT_SCORE;
+  securityRating: PROJECT_SCORE;
+  availabilityOfExperiencedLabor: PROJECT_SCORE;
+  availabilityOfAlternatingFunding: PROJECT_SCORE;
+  coastalProtectionBenefits: PROJECT_SCORE;
+  biodiversityBenefit: PROJECT_SCORE;
+}
 export class ProjectScorecardDto {
   id: string;
   countryCode: string;
@@ -24,17 +36,7 @@ export class ProjectScorecardDto {
   priceType: PROJECT_PRICE_TYPE;
 
   scoreCardRating: PROJECT_SCORE;
-  scorecard: {
-    financialFeasibility: PROJECT_SCORE;
-    legalFeasibility: PROJECT_SCORE;
-    implementationFeasibility: PROJECT_SCORE;
-    socialFeasibility: PROJECT_SCORE;
-    securityRating: PROJECT_SCORE;
-    availabilityOfExperiencedLabor: PROJECT_SCORE;
-    availabilityOfAlternatingFunding: PROJECT_SCORE;
-    coastalProtectionBenefits: PROJECT_SCORE;
-    biodiversityBenefit: PROJECT_SCORE;
-  };
+  scorecard: Scorecard;
   projectCost: {
     total: {
       totalCost: number;