diff --git a/api/src/modules/calculations/cost.calculator.ts b/api/src/modules/calculations/cost.calculator.ts
index a25e17a9..b32e16da 100644
--- a/api/src/modules/calculations/cost.calculator.ts
+++ b/api/src/modules/calculations/cost.calculator.ts
@@ -17,8 +17,8 @@ import {
   CostPlanMap,
   CustomProjectCostDetails,
   CustomProjectSummary,
-  OutputCostNames,
   YearlyBreakdown,
+  YearlyBreakdownCostName,
 } from '@shared/dtos/custom-projects/custom-project-output.dto';
 
 export type CostPlans = Record<
@@ -410,7 +410,7 @@ export class CostCalculator {
       const totalCost = sum(Object.values(costValues));
       const totalNPV = this.calculateNpv(costValues, discountRate);
       yearlyBreakdown.push({
-        costName: costName as keyof OverridableCostInputs & OutputCostNames,
+        costName: costName as YearlyBreakdownCostName,
         totalCost,
         totalNPV,
         costValues,
diff --git a/client/package.json b/client/package.json
index b2e4fbdf..b98ba92f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -37,6 +37,7 @@
     "@ts-rest/react-query": "3.51.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
+    "country-iso-3-to-2": "^1.1.1",
     "d3": "7.9.0",
     "framer-motion": "11.11.9",
     "jotai": "2.10.1",
@@ -52,6 +53,7 @@
     "react-dropzone": "^14.3.5",
     "react-map-gl": "7.1.7",
     "react-resizable-panels": "2.1.6",
+    "recharts": "^2.13.3",
     "rooks": "7.14.1",
     "tailwind-merge": "2.5.3",
     "tailwindcss-animate": "1.0.7",
diff --git a/client/src/app/globals.css b/client/src/app/globals.css
index bae7e2b4..90ac670b 100644
--- a/client/src/app/globals.css
+++ b/client/src/app/globals.css
@@ -4,7 +4,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 body {
   font-family: Arial, Helvetica, sans-serif;
 }
@@ -50,6 +49,11 @@ body {
     --sidebar-accent-foreground: 192, 86%, 69%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 212, 57%, 24%;
+    --chart-1: 150 43% 61%;
+    --chart-2: 191 87% 82%;
+    --chart-3: 194 88% 43%;
+    --chart-4: 213 73% 97%;
+    --chart-5: 50 80% 58%;
   }
 }
 
@@ -65,31 +69,52 @@ body {
 /* mapbox styles */
 .mapboxgl-popup-anchor-top {
   .mapboxgl-popup-tip {
-    @apply !border-b-popover !z-10 relative;
+    @apply relative !z-10 !border-b-popover;
   }
 }
 
 .mapboxgl-popup-anchor-bottom {
   .mapboxgl-popup-tip {
-    @apply !border-t-popover !z-10 relative;
+    @apply relative !z-10 !border-t-popover;
   }
 }
 
 .mapboxgl-popup-anchor-left {
   .mapboxgl-popup-tip {
-    @apply !border-r-popover !z-10 relative;
+    @apply relative !z-10 !border-r-popover;
   }
 }
 
 .mapboxgl-popup-anchor-right {
   .mapboxgl-popup-tip {
-    @apply !border-l-popover !z-10 relative;
+    @apply relative !z-10 !border-l-popover;
   }
 }
 
 .mapboxgl-popup-content {
-  @apply !bg-popover !rounded-md border border-border text-big-stone-50 shadow-md;
+  @apply !rounded-md border border-border !bg-popover text-big-stone-50 shadow-md;
 }
 .mapboxgl-popup-close-button {
   @apply hidden;
-}
\ No newline at end of file
+}
+
+/* cashflow chart */
+.cashflow-chart {
+  .recharts-cartesian-grid-vertical line {
+    stroke-dasharray: 3, 3;
+
+    &:nth-last-child(1),
+    &:nth-last-child(2) {
+      stroke: transparent;
+    }
+  }
+
+  .recharts-cartesian-grid-horizontal line {
+    stroke-dasharray: 0;
+
+    &:first-of-type,
+    &:last-of-type {
+      stroke: transparent;
+    }
+  }
+}
diff --git a/client/src/app/projects/[id]/page.tsx b/client/src/app/projects/[id]/page.tsx
index c85b17fe..fd1cdb7f 100644
--- a/client/src/app/projects/[id]/page.tsx
+++ b/client/src/app/projects/[id]/page.tsx
@@ -1,5 +1,65 @@
+import { notFound } from "next/navigation";
+
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from "@tanstack/react-query";
+
+import { client } from "@/lib/query-client";
+import { queryKeys } from "@/lib/query-keys";
+import { getAuthHeader } from "@/lib/utils";
+
+import { auth } from "@/app/auth/api/[...nextauth]/config";
+
 import CustomProject from "@/containers/projects/custom-project";
 
-export default function CustomProjectPage() {
-  return <CustomProject />;
+async function getCustomProject(id: string, accessToken: string) {
+  const response = await client.customProjects.getCustomProject.query({
+    params: { id },
+    query: {
+      include: ["country"],
+    },
+    extraHeaders: {
+      ...getAuthHeader(accessToken),
+    },
+  });
+
+  if (response.status !== 200) {
+    throw new Error(`Failed to fetch project: ${response.status}`);
+  }
+
+  return response;
+}
+
+export default async function CustomProjectPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const queryClient = new QueryClient();
+
+  try {
+    const id = (await params).id;
+    const session = await auth();
+
+    if (!session?.accessToken) {
+      throw new Error("Unauthorized");
+    }
+
+    // Using fetchQuery because prefetchQuery will not throw or return any data
+    // https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientprefetchquery
+    await queryClient.fetchQuery({
+      queryKey: queryKeys.customProjects.one(id).queryKey,
+      queryFn: async () => getCustomProject(id, session.accessToken),
+    });
+
+    return (
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <CustomProject id={id} />
+      </HydrationBoundary>
+    );
+  } catch (e) {
+    notFound();
+  }
 }
diff --git a/client/src/app/projects/preview/page.tsx b/client/src/app/projects/preview/page.tsx
new file mode 100644
index 00000000..69fc3a1d
--- /dev/null
+++ b/client/src/app/projects/preview/page.tsx
@@ -0,0 +1,17 @@
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from "@tanstack/react-query";
+
+import CustomProject from "@/containers/projects/custom-project";
+
+export default function CustomProjectPreviewPage() {
+  const queryClient = new QueryClient();
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <CustomProject />
+    </HydrationBoundary>
+  );
+}
diff --git a/client/src/app/projects/store.ts b/client/src/app/projects/store.ts
new file mode 100644
index 00000000..3624fb32
--- /dev/null
+++ b/client/src/app/projects/store.ts
@@ -0,0 +1,12 @@
+import { COST_TYPE_SELECTOR } from "@shared/entities/projects.entity";
+import { atom } from "jotai";
+
+export const projectsUIState = atom<{
+  projectSummaryOpen: boolean;
+}>({
+  projectSummaryOpen: false,
+});
+export const showCostDetailsAtom = atom<boolean>(false);
+export const costDetailsFilterAtom = atom<COST_TYPE_SELECTOR>(
+  COST_TYPE_SELECTOR.TOTAL,
+);
diff --git a/client/src/app/projects/[id]/store.ts b/client/src/app/projects/url-store.ts
similarity index 51%
rename from client/src/app/projects/[id]/store.ts
rename to client/src/app/projects/url-store.ts
index 9eb5bf4e..e421675e 100644
--- a/client/src/app/projects/[id]/store.ts
+++ b/client/src/app/projects/url-store.ts
@@ -1,18 +1,10 @@
-import { atom } from "jotai";
 import { parseAsStringLiteral, useQueryState } from "nuqs";
 
 import { CASH_FLOW_VIEWS } from "@/containers/projects/custom-project/annual-project-cash-flow/header/tabs";
 
-export const projectsUIState = atom<{
-  projectSummaryOpen: boolean;
-}>({
-  projectSummaryOpen: false,
-});
-export const showCostDetailsAtom = atom<boolean>(false);
-
-export function useProjectCashFlowView() {
+export function useProjectCashFlowTab() {
   return useQueryState(
-    "cashflow",
+    "cashflowTab",
     parseAsStringLiteral(CASH_FLOW_VIEWS).withDefault("chart"),
   );
 }
diff --git a/client/src/components/ui/chart.tsx b/client/src/components/ui/chart.tsx
new file mode 100644
index 00000000..f0f6dd73
--- /dev/null
+++ b/client/src/components/ui/chart.tsx
@@ -0,0 +1,368 @@
+"use client";
+
+import * as React from "react";
+
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      hideIcon?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      hideIcon = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon && !hideIcon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            },
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className,
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
diff --git a/client/src/components/ui/metric.tsx b/client/src/components/ui/metric.tsx
index 1ce02697..d03b95a7 100644
--- a/client/src/components/ui/metric.tsx
+++ b/client/src/components/ui/metric.tsx
@@ -8,7 +8,7 @@ interface MetricProps {
   /** The numeric value to display
    * undefined -> renders "-"
    */
-  value?: number;
+  value?: number | null;
   /** Unit to display (e.g. "kg", "%", "m²") */
   unit: string;
   /** Optional CSS classes to apply to the wrapper */
diff --git a/client/src/components/ui/scroll-area.tsx b/client/src/components/ui/scroll-area.tsx
index 24c7b263..ac7ac2d1 100644
--- a/client/src/components/ui/scroll-area.tsx
+++ b/client/src/components/ui/scroll-area.tsx
@@ -8,8 +8,13 @@ import { cn } from "@/lib/utils";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+    /**
+     * When true, adds a horizontal scrollbar to the scroll area
+     */
+    hasHorizontalScroll?: boolean;
+  }
+>(({ className, children, hasHorizontalScroll, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn("relative overflow-hidden", className)}
@@ -19,6 +24,7 @@ const ScrollArea = React.forwardRef<
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
+    {hasHorizontalScroll && <ScrollBar orientation="horizontal" />}
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));
diff --git a/client/src/components/ui/table.tsx b/client/src/components/ui/table.tsx
index c8aeb781..9f1f8aca 100644
--- a/client/src/components/ui/table.tsx
+++ b/client/src/components/ui/table.tsx
@@ -2,6 +2,8 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+import { ScrollArea } from "@/components/ui/scroll-area";
+
 const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
@@ -16,6 +18,22 @@ const Table = React.forwardRef<
 ));
 Table.displayName = "Table";
 
+const ScrollableTable = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <ScrollArea hasHorizontalScroll>
+    <div className="table h-full w-full table-fixed">
+      <table
+        ref={ref}
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  </ScrollArea>
+));
+ScrollableTable.displayName = "ScrollableTable";
+
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
@@ -110,6 +128,7 @@ TableCaption.displayName = "TableCaption";
 
 export {
   Table,
+  ScrollableTable,
   TableHeader,
   TableBody,
   TableFooter,
diff --git a/client/src/constants/tooltip.tsx b/client/src/constants/tooltip.tsx
index f4421715..f3888794 100644
--- a/client/src/constants/tooltip.tsx
+++ b/client/src/constants/tooltip.tsx
@@ -1,3 +1,7 @@
+import { CustomProjectSummary } from "@shared/dtos/custom-projects/custom-project-output.dto";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+
 export const OVERVIEW = {
   SCORECARD_RATING:
     "The individual non-economic scores, in addition to the economic feasibility and abatement potential, are weighted using the weights on the left to an overall score per project",
@@ -567,39 +571,43 @@ export const CUSTOM_PROJECT_OUTPUTS = {
     "The net amount of cash generated or consumed by the project on an annual basis, accounting for revenues, CAPEX, and OPEX.",
 };
 
-export const PROJECT_SUMMARY = {
-  COST_PER_TCOE_NPV:
+export const PROJECT_SUMMARY: Record<keyof CustomProjectSummary, string> = {
+  "$/tCO2e (total cost, NPV)":
     "The NPV of the total cost (CAPEX & OPEX, excl. financing cost) divided by the total credits the project will generate.",
-  COST_PER_HA:
+  "$/ha":
     "The NPV of the total cost (CAPEX & OPEX, excl. financing cost) divided by the total ha of the project",
-  NPV_COVERING_TOTAL_COST:
+  "NPV covering cost":
     'The NPV of the carbon credit revenues subtracted by either the OPEX or the total cost (depending on parameter in "carbon revenues to cover")',
-  IRR_WHEN_PRICED_TO_COVER_OPEX:
+  "IRR when priced to cover OpEx":
     "The internal rate of return (IRR) calculated when carbon credits are priced to only cover the operating expenses (OPEX).",
-  IRR_WHEN_PRICED_TO_COVER_TOTAL_COST:
+  "IRR when priced to cover total cost":
     "The internal rate of return (IRR) calculated when carbon credits are priced to cover both capital (CAPEX) and operating expenses (OPEX).",
-  TOTAL_COST_NPV:
+  "Total cost (NPV)":
     "The NPV of the total cost associated with the hypothetical blue carbon project (incl. CAPEX and OPEX, excl. financing cost)",
-  CAPITAL_EXPENDITURE_NPV:
+  "Capital expenditure (NPV)":
     "The NPV of the CAPEX associated with the hypothetical blue carbon project",
-  OPERATING_EXPENDITURE_NPV:
+  "Operating expenditure (NPV)":
     "The NPV of the OPEX associated with the hypothetical blue carbon project",
-  CREDITS_ISSUED:
+  "Credits issued":
     "The carbon credits issued as part of the project. The buffer has already been subtracted from this total number",
-  TOTAL_REVENUE_NPV: "The NPV of the carbon credit revenues",
-  TOTAL_REVENUE_NON_DISCOUNTED: "The non-discounted carbon credit revenues",
-  FINANCING_COST:
+  "Total revenue (NPV)": "The NPV of the carbon credit revenues",
+  "Total revenue (non-discounted)": "The non-discounted carbon credit revenues",
+  "Financing cost":
     "The financing cost is the time, effort and cost associated with securing financing for the set up (pre-revenue) phase of the project. Calculated as the financing cost assumption (default 5%) multiplied by the non-discounted CAPEX total.",
-  FUNDING_GAP_NPV:
+  "Funding gap (NPV)":
     'The reverse of the "NPV covering OPEX" or "NPV covering total cost" metric.',
-  FUNDING_GAP_PER_TCOE_NPV:
+  "Funding gap per tCO2e (NPV)":
     'The reverse of the "NPV covering OPEX" or "NPV covering total cost" metric.',
-  COMMUNITY_BENEFIT_SHARING_FUND:
+  "Community benefit sharing fund":
     "The percentage of the revenues assumed to go back to the community as part of the community benefit sharing fund.",
+  "Leftover after OpEx / total cost":
+    "The remaining net revenue after accounting for all operating expenses (OPEX) associated with the project.",
+  "Funding gap":
+    'The reverse of the "NPV covering OPEX" or "NPV covering total cost" metric.',
 };
 
 export const COST_DETAILS = (
-  <div>
+  <ScrollArea>
     <p>
       The cost details provide a comprehensive breakdown of the financial
       requirements for the project, divided into capital expenditure (CAPEX) and
@@ -696,7 +704,7 @@ export const COST_DETAILS = (
       stakeholders a clear view of financial investment required for the
       hypothetical blue carbon project.
     </p>
-  </div>
+  </ScrollArea>
 );
 
 export const ANNUAL_PROJECT_CASHFLOW =
diff --git a/client/src/containers/auth/dialog/index.tsx b/client/src/containers/auth/dialog/index.tsx
index de7aa93d..55d6476c 100644
--- a/client/src/containers/auth/dialog/index.tsx
+++ b/client/src/containers/auth/dialog/index.tsx
@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -31,6 +32,7 @@ const AuthDialog: FC<AuthDialogProps> = ({ dialogTrigger, onSignIn }) => {
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
           <DialogTitle>Sign in</DialogTitle>
+          <DialogDescription />
         </DialogHeader>
         {showSignin ? <SignInForm onSignIn={onSignIn} /> : <SignUpForm />}
         <Separator />
diff --git a/client/src/containers/overview/table/view/overview/index.tsx b/client/src/containers/overview/table/view/overview/index.tsx
index 12daf0d1..b314b170 100644
--- a/client/src/containers/overview/table/view/overview/index.tsx
+++ b/client/src/containers/overview/table/view/overview/index.tsx
@@ -31,7 +31,7 @@ import {
 import { columns } from "@/containers/overview/table/view/overview/columns";
 
 import {
-  Table,
+  ScrollableTable,
   TableBody,
   TableCell,
   TableHead,
@@ -112,7 +112,7 @@ export function OverviewTable() {
   return (
     <>
       <ProjectDetails />
-      <Table>
+      <ScrollableTable>
         <TableHeader className="sticky top-0">
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id} className="divide-background">
@@ -189,7 +189,7 @@ export function OverviewTable() {
             </TableRow>
           )}
         </TableBody>
-      </Table>
+      </ScrollableTable>
       <TablePagination
         onChangePagination={setPagination}
         pagination={{
diff --git a/client/src/containers/projects/custom-project/annual-project-cash-flow/chart/index.tsx b/client/src/containers/projects/custom-project/annual-project-cash-flow/chart/index.tsx
new file mode 100644
index 00000000..cacae8af
--- /dev/null
+++ b/client/src/containers/projects/custom-project/annual-project-cash-flow/chart/index.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import { FC } from "react";
+
+import {
+  Bar,
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { formatCurrency } from "@/lib/format";
+
+import { YearlyBreakdownChartData } from "@/containers/projects/custom-project/annual-project-cash-flow/utils";
+
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+
+const CHART_COLORS = {
+  estimatedRevenuePlan: "hsl(var(--chart-1))",
+  opexTotalCostPlan: "hsl(var(--chart-2))",
+  capexTotalCostPlan: "hsl(var(--chart-3))",
+  annualNetCashFlow: "hsl(var(--chart-4)",
+  cumulativeNetIncomePlan: "hsl(var(--chart-5))",
+} as const;
+
+interface CashflowChartProps {
+  data: YearlyBreakdownChartData;
+}
+
+const CashflowChart: FC<CashflowChartProps> = ({ data }) => {
+  return (
+    <ChartContainer
+      config={{
+        estimatedRevenuePlan: {
+          label: "Est revenue",
+          color: "hsl(var(--chart-1))",
+        },
+        opexTotalCostPlan: {
+          label: "Total OpEx",
+          color: "hsl(var(--chart-2))",
+        },
+        capexTotalCostPlan: {
+          label: "Total CapEx",
+          color: "hsl(var(--chart-3))",
+        },
+        annualNetCashFlow: {
+          label: "Annual net cash flow",
+          color: "hsl(var(--chart-4))",
+          icon: () => <div className="h-[3px] w-[24px] bg-chart-4" />,
+        },
+        cumulativeNetIncomePlan: {
+          label: "Revenue OpEx",
+          color: "hsl(var(--chart-5))",
+          icon: () => <div className="h-[3px] w-[24px] bg-chart-5" />,
+        },
+      }}
+      className="cashflow-chart min-h-[200px] w-full"
+    >
+      <ComposedChart data={data} stackOffset="sign" accessibilityLayer>
+        <CartesianGrid
+          stroke="#194760"
+          strokeDasharray="0 0"
+          horizontal={true}
+          vertical={true}
+        />
+        <YAxis
+          axisLine={false}
+          tickLine={false}
+          tickFormatter={(value) => `${(value / 1000000).toFixed(1)}M`}
+        />
+
+        <ChartLegend
+          content={
+            <ChartLegendContent className="bg-big-stone-950/60 py-2 backdrop-blur-[2px]" />
+          }
+        />
+        <Bar
+          stackId="a"
+          dataKey="estimatedRevenuePlan"
+          fill={CHART_COLORS.estimatedRevenuePlan}
+          radius={[6, 6, 0, 0]}
+        />
+        <Bar
+          stackId="a"
+          dataKey="opexTotalCostPlan"
+          fill={CHART_COLORS.opexTotalCostPlan}
+          radius={[6, 6, 0, 0]}
+        />
+        <Bar
+          stackId="a"
+          dataKey="capexTotalCostPlan"
+          fill={CHART_COLORS.capexTotalCostPlan}
+          radius={[6, 6, 0, 0]}
+        />
+        <Line
+          type="linear"
+          dataKey="annualNetCashFlow"
+          stroke={CHART_COLORS.annualNetCashFlow}
+          dot={false}
+          strokeWidth={2}
+        />
+        <Line
+          type="linear"
+          dataKey="cumulativeNetIncomePlan"
+          stroke={CHART_COLORS.cumulativeNetIncomePlan}
+          dot={false}
+          strokeWidth={2}
+        />
+        <XAxis
+          dataKey="year"
+          tickLine={false}
+          axisLine={false}
+          className="-translate-y-[100%]"
+          tick={(props) => {
+            const { x, y, payload } = props;
+
+            // Not sure if needed, and from which number to count?
+            if (payload.value < 0) return <g></g>;
+
+            return (
+              <g transform={`translate(${x + 10},${y + 60})`}>
+                <foreignObject
+                  x="0"
+                  y="4"
+                  width="1"
+                  height="1"
+                  style={{
+                    overflow: "visible",
+                  }}
+                >
+                  <p className="inline-flex items-center justify-center gap-0.5 rounded-sm bg-big-stone-950/60 px-2 py-1 text-white backdrop-blur-[2px]">
+                    <span>{payload.value}</span>
+                  </p>
+                </foreignObject>
+              </g>
+            );
+          }}
+        />
+        <ChartTooltip
+          cursor={false}
+          content={
+            <ChartTooltipContent
+              indicator="dot"
+              className="border-border"
+              formatter={(v, n) => {
+                return (
+                  <p className="inline-flex w-full justify-between gap-2">
+                    <span className="text-muted-foreground">{n}</span>
+                    <span className="font-normal">
+                      {formatCurrency(v as number, {
+                        maximumFractionDigits: 0,
+                      })}
+                    </span>
+                  </p>
+                );
+              }}
+              hideIndicator
+              hideIcon
+              hideLabel
+            />
+          }
+        />
+      </ComposedChart>
+    </ChartContainer>
+  );
+};
+
+export default CashflowChart;
diff --git a/client/src/containers/projects/custom-project/annual-project-cash-flow/header/index.tsx b/client/src/containers/projects/custom-project/annual-project-cash-flow/header/index.tsx
index 4c18c1b1..152595c4 100644
--- a/client/src/containers/projects/custom-project/annual-project-cash-flow/header/index.tsx
+++ b/client/src/containers/projects/custom-project/annual-project-cash-flow/header/index.tsx
@@ -1,5 +1,7 @@
 import { FC } from "react";
 
+import { ANNUAL_PROJECT_CASHFLOW } from "@/constants/tooltip";
+
 import Tabs from "@/containers/projects/custom-project/annual-project-cash-flow/header/tabs";
 
 import InfoButton from "@/components/ui/info-button";
@@ -10,7 +12,9 @@ const Header: FC = () => {
       <h2 className="pl-4 text-base font-semibold">Annual project cash flow</h2>
       <Tabs />
       <div className="flex items-center p-3">
-        <InfoButton title="tooltip title">tooltip.content</InfoButton>
+        <InfoButton title="Annual project cash flow">
+          {ANNUAL_PROJECT_CASHFLOW}
+        </InfoButton>
       </div>
     </header>
   );
diff --git a/client/src/containers/projects/custom-project/annual-project-cash-flow/header/tabs/index.tsx b/client/src/containers/projects/custom-project/annual-project-cash-flow/header/tabs/index.tsx
index e7cbfb97..acfdaee8 100644
--- a/client/src/containers/projects/custom-project/annual-project-cash-flow/header/tabs/index.tsx
+++ b/client/src/containers/projects/custom-project/annual-project-cash-flow/header/tabs/index.tsx
@@ -1,6 +1,6 @@
 import { ChartNoAxesColumnIcon, Table2Icon } from "lucide-react";
 
-import { useProjectCashFlowView } from "@/app/projects/[id]/store";
+import { useProjectCashFlowTab } from "@/app/projects/url-store";
 
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
@@ -18,13 +18,13 @@ export const CASH_FLOW_TABS = [
 ] as const;
 
 export default function CashFlowTabs() {
-  const [view, setView] = useProjectCashFlowView();
+  const [tab, setTab] = useProjectCashFlowTab();
 
   return (
     <Tabs
-      defaultValue={view}
+      defaultValue={tab}
       onValueChange={async (v) => {
-        await setView(v as typeof view);
+        await setTab(v as typeof tab);
       }}
     >
       <TabsList>
diff --git a/client/src/containers/projects/custom-project/annual-project-cash-flow/index.tsx b/client/src/containers/projects/custom-project/annual-project-cash-flow/index.tsx
index 62645ffd..c6bc5cc8 100644
--- a/client/src/containers/projects/custom-project/annual-project-cash-flow/index.tsx
+++ b/client/src/containers/projects/custom-project/annual-project-cash-flow/index.tsx
@@ -1,13 +1,33 @@
 import { FC } from "react";
 
+import { YearlyBreakdown } from "@shared/dtos/custom-projects/custom-project-output.dto";
+
+import { useProjectCashFlowTab } from "@/app/projects/url-store";
+
+import CashflowChart from "@/containers/projects/custom-project/annual-project-cash-flow/chart";
 import Header from "@/containers/projects/custom-project/annual-project-cash-flow/header";
+import CashFlowTable from "@/containers/projects/custom-project/annual-project-cash-flow/table";
+import { YearlyBreakdownChartData } from "@/containers/projects/custom-project/annual-project-cash-flow/utils";
 
 import { Card } from "@/components/ui/card";
 
-const AnnualProjectCashFlow: FC = () => {
+interface AnnualProjectCashFlowProps {
+  chartData: YearlyBreakdownChartData;
+  tableData: YearlyBreakdown[];
+}
+const AnnualProjectCashFlow: FC<AnnualProjectCashFlowProps> = ({
+  tableData,
+  chartData,
+}) => {
+  const [tab] = useProjectCashFlowTab();
   return (
-    <Card variant="secondary" className="p-0">
+    <Card variant="secondary" className="flex flex-col overflow-hidden p-0">
       <Header />
+      {tab === "table" ? (
+        <CashFlowTable data={tableData} />
+      ) : (
+        <CashflowChart data={chartData} />
+      )}
     </Card>
   );
 };
diff --git a/client/src/containers/projects/custom-project/annual-project-cash-flow/table/columns.tsx b/client/src/containers/projects/custom-project/annual-project-cash-flow/table/columns.tsx
new file mode 100644
index 00000000..ddf98742
--- /dev/null
+++ b/client/src/containers/projects/custom-project/annual-project-cash-flow/table/columns.tsx
@@ -0,0 +1,40 @@
+import { YearlyBreakdownCostName } from "@shared/dtos/custom-projects/custom-project-output.dto";
+import { createColumnHelper } from "@tanstack/react-table";
+
+import { formatCurrency } from "@/lib/format";
+
+import { cashflowConfig } from "@/containers/projects/custom-project/annual-project-cash-flow/utils";
+
+interface CostValues {
+  [key: string]: number;
+}
+
+interface TableRow {
+  costName: string;
+  totalCost: number;
+  totalNPV: number;
+  costValues: CostValues;
+}
+
+const columnHelper = createColumnHelper<TableRow>();
+
+export const columns = (years: number[]) => [
+  columnHelper.accessor("costName", {
+    header: () => <span>Project</span>,
+    cell: (info) => (
+      <span>
+        {cashflowConfig[info.getValue() as YearlyBreakdownCostName].label}
+      </span>
+    ),
+  }),
+  ...years.map((year) =>
+    columnHelper.accessor(`costValues.${year}`, {
+      header: () => <span>{year}</span>,
+      cell: (info) => (
+        <span className="text-center">
+          {formatCurrency(info.getValue(), { maximumFractionDigits: 0 })}
+        </span>
+      ),
+    }),
+  ),
+];
diff --git a/client/src/containers/projects/custom-project/annual-project-cash-flow/table/index.tsx b/client/src/containers/projects/custom-project/annual-project-cash-flow/table/index.tsx
new file mode 100644
index 00000000..4867e6b0
--- /dev/null
+++ b/client/src/containers/projects/custom-project/annual-project-cash-flow/table/index.tsx
@@ -0,0 +1,125 @@
+import { FC, useState } from "react";
+
+import { YearlyBreakdown } from "@shared/dtos/custom-projects/custom-project-output.dto";
+import {
+  flexRender,
+  getCoreRowModel,
+  PaginationState,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import { cn } from "@/lib/utils";
+
+import { columns } from "@/containers/projects/custom-project/annual-project-cash-flow/table/columns";
+import { getBreakdownYears } from "@/containers/projects/custom-project/annual-project-cash-flow/utils";
+
+import {
+  ScrollableTable,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination, {
+  PAGINATION_SIZE_OPTIONS,
+} from "@/components/ui/table-pagination";
+
+interface CashFlowTableProps {
+  data: YearlyBreakdown[];
+}
+const CashFlowTable: FC<CashFlowTableProps> = ({ data }) => {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number.parseInt(PAGINATION_SIZE_OPTIONS[0]),
+  });
+  const table = useReactTable({
+    data,
+    columns: columns(getBreakdownYears(data)),
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    state: {
+      pagination,
+    },
+    onPaginationChange: setPagination,
+  });
+
+  return (
+    <div className="relative flex h-full flex-1 flex-col overflow-hidden">
+      <ScrollableTable>
+        <TableHeader className="sticky top-0">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="divide-background">
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead
+                    key={header.id}
+                    className={cn({
+                      "text-xs font-normal": true,
+                      "text-center": header.id !== "costName",
+                    })}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                className={cn({
+                  "divide-x-0": true,
+                  "bg-big-stone-950 hover:bg-big-stone-950":
+                    row.original.costName === "capexTotalCostPlan" ||
+                    row.original.costName === "opexTotalCostPlan" ||
+                    row.original.costName === "totalCost" ||
+                    row.original.costName === "estimatedRevenuePlan" ||
+                    row.original.costName === "annualNetCashFlow",
+                })}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell
+                    key={cell.id}
+                    className={cn({
+                      "px-2 py-2.5": true,
+                      "text-center": cell.column.id !== "costName",
+                    })}
+                    style={{
+                      minWidth: cell.column.columnDef.size,
+                      maxWidth: cell.column.columnDef.size,
+                    }}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </ScrollableTable>
+      <TablePagination
+        onChangePagination={setPagination}
+        pagination={{
+          ...pagination,
+          totalPages: 0,
+          totalItems: data.length,
+        }}
+      />
+    </div>
+  );
+};
+
+export default CashFlowTable;
diff --git a/client/src/containers/projects/custom-project/annual-project-cash-flow/utils.ts b/client/src/containers/projects/custom-project/annual-project-cash-flow/utils.ts
new file mode 100644
index 00000000..8dbbc6d9
--- /dev/null
+++ b/client/src/containers/projects/custom-project/annual-project-cash-flow/utils.ts
@@ -0,0 +1,190 @@
+import {
+  CostPlanMap,
+  YearlyBreakdown,
+  YearlyBreakdownCostName,
+} from "@shared/dtos/custom-projects/custom-project-output.dto";
+
+function getBreakdownYears(data: YearlyBreakdown[]): number[] {
+  if (data.length === 0) return [];
+
+  return Object.keys(data[0].costValues)
+    .map((y) => Number(y))
+    .sort((a, b) => a - b);
+}
+
+type ChartDataKeys =
+  | "estimatedRevenuePlan"
+  | "opexTotalCostPlan"
+  | "capexTotalCostPlan"
+  | "annualNetCashFlow"
+  | "cumulativeNetIncomePlan";
+
+type ChartData = Record<ChartDataKeys, CostPlanMap>;
+type YearlyBreakdownData = {
+  estimatedRevenuePlan: number;
+  opexTotalCostPlan: number;
+  capexTotalCostPlan: number;
+  annualNetCashFlow: number;
+  cumulativeNetIncomePlan: number;
+  year: number;
+};
+type YearlyBreakdownChartData = YearlyBreakdownData[];
+
+function parseYearlyBreakdownForChart(
+  data: YearlyBreakdown[],
+  years: number[],
+): YearlyBreakdownChartData {
+  if (data.length === 0) return [];
+
+  const chartData: ChartData = {
+    estimatedRevenuePlan: {},
+    opexTotalCostPlan: {},
+    capexTotalCostPlan: {},
+    annualNetCashFlow: {},
+    cumulativeNetIncomePlan: {},
+  };
+
+  // Populate chart data based on yearly breakdown
+  data.forEach(({ costName, costValues }) => {
+    if (costName in chartData) {
+      chartData[costName as ChartDataKeys] = costValues;
+    }
+  });
+
+  // Transform data for each year
+  return years.map((year) => ({
+    year,
+    ...Object.keys(chartData).reduce(
+      (acc, key) => ({
+        ...acc,
+        [key]: chartData[key as ChartDataKeys][year],
+      }),
+      {} as Record<ChartDataKeys, number>,
+    ),
+  }));
+}
+type CostNameConfig = {
+  order: number;
+  label: string;
+};
+
+const cashflowConfig: Record<YearlyBreakdownCostName, CostNameConfig> = {
+  feasibilityAnalysis: {
+    order: 0,
+    label: "Feasibility analysis",
+  },
+  conservationPlanningAndAdmin: {
+    order: 1,
+    label: "Conservation planning and admin",
+  },
+  dataCollectionAndFieldCost: {
+    order: 3,
+    label: "Data collection and field costs",
+  },
+  communityRepresentation: {
+    order: 4,
+    label: "Community representation",
+  },
+  blueCarbonProjectPlanning: {
+    order: 5,
+    label: "Blue carbon project planning",
+  },
+  establishingCarbonRights: {
+    order: 6,
+    label: "Establishing carbon rights",
+  },
+  validation: {
+    order: 7,
+    label: "Validation",
+  },
+  implementationLabor: {
+    order: 8,
+    label: "Implementation labor",
+  },
+  capexTotalCostPlan: {
+    order: 9,
+    label: "Total CapEx",
+  },
+  monitoring: {
+    order: 10,
+    label: "Monitoring",
+  },
+  maintenance: {
+    order: 11,
+    label: "Maintenance",
+  },
+  communityBenefitSharingFund: {
+    order: 12,
+    label: "Community benefit sharing fund",
+  },
+  carbonStandardFees: {
+    order: 13,
+    label: "Carbon standard fees",
+  },
+  baselineReassessment: {
+    order: 14,
+    label: "Baseline reassessment",
+  },
+  mrv: {
+    order: 15,
+    label: "MRV",
+  },
+  longTermProjectOperatingCost: {
+    order: 16,
+    label: "Long-term project operating",
+  },
+  opexTotalCostPlan: {
+    order: 17,
+    label: "Total OpEx",
+  },
+  totalCostPlan: {
+    order: 18,
+    label: "Total Cost",
+  },
+  creditsIssuedPlan: {
+    order: 19,
+    label: "Est. credits issued",
+  },
+  estimatedRevenuePlan: {
+    order: 20,
+    label: "Est. revenue",
+  },
+  financingCost: {
+    order: 21,
+    label: "Financing cost",
+  },
+  cumulativeNetIncomePlan: {
+    order: 22,
+    label: "Revenue OpEx",
+  },
+  cumulativeNetIncomeCapexOpex: {
+    order: 23,
+    label: "Revenue CapEx + OpEx",
+  },
+  annualNetIncome: {
+    order: 24,
+    label: "Revenue Opex",
+  },
+  annualNetCashFlow: {
+    order: 25,
+    label: "Annual net cash flow",
+  },
+};
+
+function parseYearlyBreakdownForTable(
+  data: YearlyBreakdown[],
+): YearlyBreakdown[] {
+  return [...data].sort((a, b) => {
+    const orderA = cashflowConfig[a.costName].order;
+    const orderB = cashflowConfig[b.costName].order;
+    return orderA - orderB;
+  });
+}
+
+export {
+  getBreakdownYears,
+  parseYearlyBreakdownForChart,
+  parseYearlyBreakdownForTable,
+  cashflowConfig,
+  type YearlyBreakdownChartData,
+};
diff --git a/client/src/containers/projects/custom-project/cost-details/index.tsx b/client/src/containers/projects/custom-project/cost-details/index.tsx
index 5a4f2cc0..e9729df8 100644
--- a/client/src/containers/projects/custom-project/cost-details/index.tsx
+++ b/client/src/containers/projects/custom-project/cost-details/index.tsx
@@ -2,7 +2,9 @@ import { FC } from "react";
 
 import { useAtom } from "jotai";
 
-import { showCostDetailsAtom } from "@/app/projects/[id]/store";
+import { showCostDetailsAtom } from "@/app/projects/store";
+
+import { COST_DETAILS } from "@/constants/tooltip";
 
 import CostDetailsParameters from "@/containers/projects/custom-project/cost-details/parameters";
 import CostDetailTable from "@/containers/projects/custom-project/cost-details/table";
@@ -15,7 +17,14 @@ import {
   SheetTitle,
 } from "@/components/ui/sheet";
 
-const CostDetails: FC = () => {
+interface CostDetailsProps {
+  data: {
+    costName: string;
+    label: string;
+    value: string;
+  }[];
+}
+const CostDetails: FC<CostDetailsProps> = ({ data }) => {
   const [isVisible, setIsVisible] = useAtom(showCostDetailsAtom);
 
   return (
@@ -24,11 +33,16 @@ const CostDetails: FC = () => {
         <SheetHeader>
           <SheetTitle className="flex items-center gap-2">
             <h2 className="text-xl font-semibold">Cost details</h2>
-            <InfoButton title="tooltip title">tooltip.content</InfoButton>
+            <InfoButton
+              title="Cost details"
+              className="max-h-screen overflow-y-auto"
+            >
+              {COST_DETAILS}
+            </InfoButton>
           </SheetTitle>
         </SheetHeader>
         <CostDetailsParameters />
-        <CostDetailTable />
+        <CostDetailTable data={data} />
       </SheetContent>
     </Sheet>
   );
diff --git a/client/src/containers/projects/custom-project/cost-details/parameters/index.tsx b/client/src/containers/projects/custom-project/cost-details/parameters/index.tsx
index 14efdaa6..c3bada29 100644
--- a/client/src/containers/projects/custom-project/cost-details/parameters/index.tsx
+++ b/client/src/containers/projects/custom-project/cost-details/parameters/index.tsx
@@ -1,6 +1,8 @@
 import { COST_TYPE_SELECTOR } from "@shared/entities/projects.entity";
+import { useAtom } from "jotai";
 
 import { FILTER_KEYS } from "@/app/(overview)/constants";
+import { costDetailsFilterAtom } from "@/app/projects/store";
 
 import { Label } from "@/components/ui/label";
 import {
@@ -15,7 +17,7 @@ const PARAMETERS = [
   {
     key: FILTER_KEYS[3],
     label: "Cost type",
-    className: "w-full",
+    className: "flex-1",
     options: [
       {
         label: COST_TYPE_SELECTOR.TOTAL,
@@ -27,38 +29,20 @@ const PARAMETERS = [
       },
     ],
   },
-  {
-    key: "carbon-price-type",
-    label: "Carbon pricing type",
-    className: "w-full",
-    options: [
-      {
-        label: "Initial carbon price assumption",
-        value: "mock",
-      },
-    ],
-  },
 ] as const;
 
 export default function CostDetailsParameters() {
-  // const handleParameters = async (
-  //   v: string,
-  //   // parameter: keyof Omit<z.infer<typeof filtersSchema>, "keyword">,
-  // ) => {
-  //   // TODO
-  // };
+  const [filter, setFilter] = useAtom(costDetailsFilterAtom);
 
   return (
     <div className="flex items-center space-x-4">
       {PARAMETERS.map((parameter) => (
-        <div key={parameter.label} className="flex items-center space-x-2">
+        <div key={parameter.label} className="flex items-center gap-2">
           <Label htmlFor={parameter.label}>{parameter.label}</Label>
           <Select
             name={parameter.label}
-            // defaultValue={filters[parameter.key]}
-            // onValueChange={(v) => {
-            // handleParameters(v, parameter.key);
-            // }}
+            value={filter}
+            onValueChange={(v) => setFilter(v as COST_TYPE_SELECTOR)}
           >
             <SelectTrigger className={parameter.className}>
               <SelectValue />
diff --git a/client/src/containers/projects/custom-project/cost-details/table/columns.tsx b/client/src/containers/projects/custom-project/cost-details/table/columns.tsx
index 6ef7cc89..8796e822 100644
--- a/client/src/containers/projects/custom-project/cost-details/table/columns.tsx
+++ b/client/src/containers/projects/custom-project/cost-details/table/columns.tsx
@@ -1,8 +1,10 @@
 import { createColumnHelper } from "@tanstack/react-table";
 
-import { CostItem } from "@/containers/projects/custom-project/cost-details/table";
-
-const columnHelper = createColumnHelper<CostItem>();
+const columnHelper = createColumnHelper<{
+  costName: string;
+  label: string;
+  value: string;
+}>();
 
 export const columns = [
   columnHelper.accessor("label", {
@@ -13,8 +15,4 @@ export const columns = [
     enableSorting: true,
     header: () => <span>Cost $/tCo2</span>,
   }),
-  columnHelper.accessor("value", {
-    enableSorting: true,
-    header: () => <span>Sensitive analysis</span>,
-  }),
 ];
diff --git a/client/src/containers/projects/custom-project/cost-details/table/index.tsx b/client/src/containers/projects/custom-project/cost-details/table/index.tsx
index 1b3d938a..e27250e7 100644
--- a/client/src/containers/projects/custom-project/cost-details/table/index.tsx
+++ b/client/src/containers/projects/custom-project/cost-details/table/index.tsx
@@ -1,6 +1,5 @@
 import { FC, useState } from "react";
 
-import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 import {
   useReactTable,
   getCoreRowModel,
@@ -8,12 +7,10 @@ import {
   SortingState,
   getSortedRowModel,
 } from "@tanstack/react-table";
-import { ChevronsUpDownIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
 import { columns } from "@/containers/projects/custom-project/cost-details/table/columns";
-import mockData from "@/containers/projects/custom-project/mock-data";
 
 import {
   Table,
@@ -25,15 +22,18 @@ import {
 } from "@/components/ui/table";
 
 export interface CostItem {
-  name: string;
+  costName: string;
   label: string;
-  value: number;
+  value: string;
 }
 
-const CostDetailTable: FC = () => {
+interface CostDetailTableProps {
+  data: CostItem[];
+}
+const CostDetailTable: FC<CostDetailTableProps> = ({ data }) => {
   const [sorting, setSorting] = useState<SortingState>([]);
   const table = useReactTable({
-    data: mockData.costDetails,
+    data,
     columns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -55,35 +55,9 @@ const CostDetailTable: FC = () => {
               {headerGroup.headers.map((header) => {
                 return (
                   <TableHead key={header.id}>
-                    {header.isPlaceholder ? null : (
-                      <div
-                        className={cn({
-                          "flex items-center justify-between": true,
-                          "cursor-pointer select-none":
-                            header.column.getCanSort(),
-                        })}
-                        onClick={header.column.getToggleSortingHandler()}
-                        title={
-                          header.column.getCanSort()
-                            ? header.column.getNextSortingOrder() === "asc"
-                              ? "Sort ascending"
-                              : header.column.getNextSortingOrder() === "desc"
-                                ? "Sort descending"
-                                : "Clear sort"
-                            : undefined
-                        }
-                      >
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
-                        {{
-                          asc: <ChevronUpIcon className="h-4 w-4" />,
-                          desc: <ChevronDownIcon className="h-4 w-4" />,
-                        }[header.column.getIsSorted() as string] ?? (
-                          <ChevronsUpDownIcon className="h-4 w-4" />
-                        )}
-                      </div>
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
                     )}
                   </TableHead>
                 );
@@ -99,13 +73,19 @@ const CostDetailTable: FC = () => {
                 className={cn({
                   "divide-background border-b-background": true,
                   "bg-big-stone-950 hover:bg-big-stone-950":
-                    row.original.name === "capitalExpenditure" ||
-                    row.original.name === "operatingExpenditure" ||
-                    row.original.name === "totalCost",
+                    row.original.costName === "capitalExpenditure" ||
+                    row.original.costName === "operationalExpenditure" ||
+                    row.original.costName === "totalCost",
                 })}
               >
                 {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
+                  <TableCell
+                    key={cell.id}
+                    className={cn({
+                      "px-4": cell.column.id === "value",
+                      "text-big-stone-200": cell.column.id === "label",
+                    })}
+                  >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
                 ))}
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
new file mode 100644
index 00000000..6bc1c744
--- /dev/null
+++ b/client/src/containers/projects/custom-project/cost-details/table/utils.ts
@@ -0,0 +1,69 @@
+import { CustomProjectCostDetails } from "@shared/dtos/custom-projects/custom-project-output.dto";
+
+import { formatCurrency } from "@/lib/format";
+
+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",
+  communityRepresentation: "Community representation",
+  blueCarbonProjectPlanning: "Blue carbon project planning",
+  establishingCarbonRights: "Establishing carbon rights",
+  validation: "Validation",
+  implementationLabor: "Implementation labor",
+  monitoring: "Monitoring",
+  maintenance: "Maintenance",
+  communityBenefitSharingFund: "Community benefit sharing fund",
+  carbonStandardFees: "Carbon standard fees",
+  baselineReassessment: "Baseline reassessment",
+  mrv: "MRV",
+  longTermProjectOperatingCost: "Long-term project operating",
+} 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];
+}
+
+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 27323722..60306f8c 100644
--- a/client/src/containers/projects/custom-project/cost/index.tsx
+++ b/client/src/containers/projects/custom-project/cost/index.tsx
@@ -4,16 +4,21 @@ import { useSetAtom } from "jotai";
 
 import { renderCurrency } from "@/lib/format";
 
-import { showCostDetailsAtom } from "@/app/projects/[id]/store";
+import { showCostDetailsAtom } from "@/app/projects/store";
 
-import mockData from "@/containers/projects/custom-project/mock-data";
+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 { Label } from "@/components/ui/label";
 
-const ProjectCost: FC = () => {
+interface ProjectCostProps {
+  total: number;
+  capex: number;
+  opex: number;
+}
+const ProjectCost: FC<ProjectCostProps> = ({ total, capex, opex }) => {
   const setShowCostDetails = useSetAtom(showCostDetailsAtom);
 
   return (
@@ -25,8 +30,7 @@ const ProjectCost: FC = () => {
               className="text-md font-medium"
               tooltip={{
                 title: "Total project cost",
-                content:
-                  "Refers to the summary of Capital Expenditure and Operating Expenditure",
+                content: CUSTOM_PROJECT_OUTPUTS.TOTAL_PROJECT_COST,
               }}
               asChild
             >
@@ -53,7 +57,7 @@ const ProjectCost: FC = () => {
           <div className="flex max-w-[148px] flex-1 flex-col justify-between">
             <div>
               <span className="text-xl font-normal">
-                {renderCurrency(mockData.totalCost)}
+                {renderCurrency(total)}
               </span>
             </div>
             <GraphLegend
@@ -72,14 +76,14 @@ const ProjectCost: FC = () => {
             />
           </div>
           <Graph
-            total={mockData.totalCost}
+            total={total}
             segments={[
               {
-                value: mockData.capEx,
+                value: capex,
                 colorClass: "bg-sky-blue-500",
               },
               {
-                value: mockData.opExRevenue,
+                value: opex,
                 colorClass: "bg-sky-blue-200",
               },
             ]}
diff --git a/client/src/containers/projects/custom-project/details/detail-item/index.tsx b/client/src/containers/projects/custom-project/details/detail-item/index.tsx
index bce374d1..5f21ea9a 100644
--- a/client/src/containers/projects/custom-project/details/detail-item/index.tsx
+++ b/client/src/containers/projects/custom-project/details/detail-item/index.tsx
@@ -2,6 +2,8 @@ import { FC } from "react";
 
 import ReactCountryFlag from "react-country-flag";
 
+import getCountryISO2 from "country-iso-3-to-2";
+
 import Metric from "@/components/ui/metric";
 
 interface SubValue {
@@ -43,7 +45,7 @@ const DetailItem: FC<DetailItemProps> = ({
         {countryCode && (
           <ReactCountryFlag
             className="h-[16px] w-[22px] rounded"
-            countryCode={countryCode}
+            countryCode={getCountryISO2(countryCode)}
             svg
           />
         )}
diff --git a/client/src/containers/projects/custom-project/details/index.tsx b/client/src/containers/projects/custom-project/details/index.tsx
index 2bfbd5e6..be8ca3e5 100644
--- a/client/src/containers/projects/custom-project/details/index.tsx
+++ b/client/src/containers/projects/custom-project/details/index.tsx
@@ -6,45 +6,47 @@ import { ECOSYSTEM } from "@shared/entities/ecosystem.enum";
 
 import DetailItem from "@/containers/projects/custom-project/details/detail-item";
 
-import FileEdit from "@/components/icons/file-edit";
-import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 
 interface ProjectDetailsProps {
-  country: { code: string; name: string };
-  projectSize: number;
-  projectLength: number;
-  ecosystem: ECOSYSTEM;
-  activity: ACTIVITY;
-  lossRate: number;
-  carbonRevenuesToCover: CARBON_REVENUES_TO_COVER;
-  initialCarbonPrice: number;
-  emissionFactors: {
-    emissionFactor: number;
-    emissionFactorAGB: number;
-    emissionFactorSOC: number;
+  data: {
+    country: { code: string; name: string };
+    projectSize: number;
+    projectLength: number;
+    ecosystem: ECOSYSTEM;
+    activity: ACTIVITY;
+    lossRate: number;
+    carbonRevenuesToCover: CARBON_REVENUES_TO_COVER;
+    initialCarbonPrice: number;
+    emissionFactors: {
+      emissionFactor: number | null;
+      emissionFactorAgb: number;
+      emissionFactorSoc: number;
+    };
   };
 }
 
-const ProjectDetails: FC<ProjectDetailsProps> = ({
-  country,
-  projectSize,
-  projectLength,
-  ecosystem,
-  carbonRevenuesToCover,
-  activity,
-  initialCarbonPrice,
-  lossRate,
-  emissionFactors,
-}) => {
+const ProjectDetails: FC<ProjectDetailsProps> = ({ data }) => {
+  const {
+    country,
+    projectSize,
+    projectLength,
+    ecosystem,
+    carbonRevenuesToCover,
+    activity,
+    initialCarbonPrice,
+    lossRate,
+    emissionFactors,
+  } = data;
   return (
     <Card className="flex-1 space-y-1">
       <div className="flex items-center justify-between">
         <h2 className="text-base font-semibold">Project details</h2>
-        <Button type="button" variant="ghost">
+        {/* TODO: Uncomment when feature is available */}
+        {/* <Button type="button" variant="ghost">
           <FileEdit />
           <span>Edit project</span>
-        </Button>
+        </Button> */}
       </div>
       <div className="grid grid-cols-3 gap-6">
         <div className="space-y-3">
@@ -94,12 +96,12 @@ const ProjectDetails: FC<ProjectDetailsProps> = ({
             subValues={[
               {
                 label: "AGB",
-                value: emissionFactors.emissionFactorAGB,
+                value: emissionFactors.emissionFactorAgb,
                 unit: "tCO2e/ha/yr",
               },
               {
                 label: "SOC",
-                value: emissionFactors.emissionFactorSOC,
+                value: emissionFactors.emissionFactorSoc,
                 unit: "tCO2e/ha/yr",
               },
             ]}
diff --git a/client/src/containers/projects/custom-project/header/index.tsx b/client/src/containers/projects/custom-project/header/index.tsx
index c1f2e2d2..67cb9ab8 100644
--- a/client/src/containers/projects/custom-project/header/index.tsx
+++ b/client/src/containers/projects/custom-project/header/index.tsx
@@ -1,12 +1,17 @@
-import { FC } from "react";
+import { FC, useCallback, useState } from "react";
 
+import Link from "next/link";
+
+import { CustomProject as CustomProjectEntity } from "@shared/entities/custom-project.entity";
 import { useAtom } from "jotai";
 import { LayoutListIcon } from "lucide-react";
-import { useSession } from "next-auth/react";
+import { Session } from "next-auth";
+import { getSession, useSession } from "next-auth/react";
 
-import { cn } from "@/lib/utils";
+import { client } from "@/lib/query-client";
+import { cn, getAuthHeader } from "@/lib/utils";
 
-import { projectsUIState } from "@/app/projects/[id]/store";
+import { projectsUIState } from "@/app/projects/store";
 
 import AuthDialog from "@/containers/auth/dialog";
 import CustomProjectParameters from "@/containers/projects/custom-project/header/parameters";
@@ -15,15 +20,73 @@ import Topbar from "@/containers/topbar";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/components/ui/toast/use-toast";
 
-const CustomProjectHeader: FC = () => {
+interface CustomProjectHeaderProps {
+  data: InstanceType<typeof CustomProjectEntity>;
+}
+const CustomProjectHeader: FC<CustomProjectHeaderProps> = ({ data }) => {
   const [{ projectSummaryOpen }, setProjectSummaryOpen] =
     useAtom(projectsUIState);
   const { data: session } = useSession();
   const { toast } = useToast();
-  const handleSaveButtonClick = () => {
-    // TODO: Add API call when available
-    toast({ description: "Project updated successfully." });
-  };
+  const [saved, setSaved] = useState<boolean>(false);
+  const SaveProject = useCallback(
+    async (arg: Session | null = session) => {
+      try {
+        const { status, body } =
+          await client.customProjects.saveCustomProject.mutation({
+            body: data,
+            extraHeaders: {
+              ...getAuthHeader(arg?.accessToken as string),
+            },
+          });
+
+        if (status === 201) {
+          toast({ description: "Project updated successfully." });
+          setSaved(true);
+        }
+
+        if (body?.errors) {
+          toast({
+            variant: "destructive",
+            description: body.errors[0].title,
+          });
+        }
+      } catch (e) {
+        toast({
+          variant: "destructive",
+          description: "Something went wrong saving the project",
+        });
+      }
+    },
+    [session, data, toast],
+  );
+  const handleOnSignIn = useCallback(async () => {
+    // session is undefined when onSignIn callback is called
+    const session = await getSession();
+    SaveProject(session);
+  }, [SaveProject]);
+  let ButtonComponent = (
+    <AuthDialog
+      dialogTrigger={<Button type="button">Save project</Button>}
+      onSignIn={handleOnSignIn}
+    />
+  );
+
+  if (session) {
+    ButtonComponent = (
+      <Button type="button" onClick={() => SaveProject()}>
+        Save project
+      </Button>
+    );
+  }
+
+  if (saved) {
+    ButtonComponent = (
+      <Button asChild>
+        <Link href="/my-projects">My custom projects</Link>
+      </Button>
+    );
+  }
 
   return (
     <Topbar title="Custom project - v01" className="gap-4">
@@ -44,16 +107,7 @@ const CustomProjectHeader: FC = () => {
           </span>
         </Button>
         <CustomProjectParameters />
-        {session ? (
-          <Button type="button" onClick={handleSaveButtonClick}>
-            Save project
-          </Button>
-        ) : (
-          <AuthDialog
-            dialogTrigger={<Button type="button">Save project</Button>}
-            onSignIn={handleSaveButtonClick}
-          />
-        )}
+        {ButtonComponent}
       </div>
     </Topbar>
   );
diff --git a/client/src/containers/projects/custom-project/header/parameters/index.tsx b/client/src/containers/projects/custom-project/header/parameters/index.tsx
index 91e25f9f..1282bad8 100644
--- a/client/src/containers/projects/custom-project/header/parameters/index.tsx
+++ b/client/src/containers/projects/custom-project/header/parameters/index.tsx
@@ -26,6 +26,7 @@ export const PROJECT_PARAMETERS = [
     key: FILTER_KEYS[3],
     label: "Project size",
     className: "w-[125px]",
+    disabled: false,
     options: [
       {
         label: COST_TYPE_SELECTOR.NPV,
@@ -41,6 +42,7 @@ export const PROJECT_PARAMETERS = [
     key: FILTER_KEYS[2],
     label: "Carbon pricing type",
     className: "w-[195px]",
+    disabled: true,
     options: [
       {
         label: PROJECT_PRICE_TYPE.MARKET_PRICE,
@@ -81,6 +83,7 @@ export default function CustomProjectParameters() {
             onValueChange={(v) => {
               handleParameters(v, parameter.key);
             }}
+            disabled={parameter.disabled}
           >
             <SelectTrigger className={parameter.className}>
               <SelectValue />
diff --git a/client/src/containers/projects/custom-project/index.tsx b/client/src/containers/projects/custom-project/index.tsx
index 6bd9f827..41b6a940 100644
--- a/client/src/containers/projects/custom-project/index.tsx
+++ b/client/src/containers/projects/custom-project/index.tsx
@@ -1,38 +1,83 @@
 "use client";
-import { FC } from "react";
+import { FC, useMemo } from "react";
 
+import { ConservationProjectOutput } from "@shared/dtos/custom-projects/custom-project-output.dto";
+import { CustomProject as CustomProjectEntity } from "@shared/entities/custom-project.entity";
 import { motion } from "framer-motion";
 import { useAtomValue } from "jotai";
 
 import { LAYOUT_TRANSITIONS } from "@/app/(overview)/constants";
-import { projectsUIState } from "@/app/projects/[id]/store";
+import { costDetailsFilterAtom, projectsUIState } from "@/app/projects/store";
+
+import { useGetCustomProject } from "@/hooks/use-get-custom-project";
 
 import AnnualProjectCashFlow from "@/containers/projects/custom-project/annual-project-cash-flow";
+import {
+  getBreakdownYears,
+  parseYearlyBreakdownForChart,
+  parseYearlyBreakdownForTable,
+} from "@/containers/projects/custom-project/annual-project-cash-flow/utils";
 import ProjectCost from "@/containers/projects/custom-project/cost";
 import CostDetails from "@/containers/projects/custom-project/cost-details";
+import { parseCostDetailsForTable } from "@/containers/projects/custom-project/cost-details/table/utils";
 import ProjectDetails from "@/containers/projects/custom-project/details";
 import CustomProjectHeader from "@/containers/projects/custom-project/header";
 import LeftOver from "@/containers/projects/custom-project/left-over";
-import mockData from "@/containers/projects/custom-project/mock-data";
 import ProjectSummary from "@/containers/projects/custom-project/summary";
+import { useCustomProjectFilters } from "@/containers/projects/url-store";
 
 import { useSidebar } from "@/components/ui/sidebar";
 
-const {
-  country,
-  projectSize,
-  projectLength,
-  ecosystem,
-  activity,
-  lossRate,
-  carbonRevenuesToCover,
-  initialCarbonPrice,
-  emissionFactors,
-} = mockData;
-export const SUMMARY_SIDEBAR_WIDTH = 400;
-const CustomProject: FC = () => {
+export const SUMMARY_SIDEBAR_WIDTH = 460;
+
+interface CustomProjectProps {
+  id?: string;
+}
+
+const CustomProject: FC<CustomProjectProps> = ({ id }) => {
+  const data = useGetCustomProject(id);
+
+  // TODO: Maybe add a spinner/skeleton?
+  if (!data) return null;
+
+  return <CustomProjectView data={data} />;
+};
+
+const CustomProjectView: FC<{
+  data: InstanceType<typeof CustomProjectEntity>;
+}> = ({ data }) => {
+  const [{ costRangeSelector }] = useCustomProjectFilters();
+  const costDetailsRangeSelector = useAtomValue(costDetailsFilterAtom);
   const { projectSummaryOpen } = useAtomValue(projectsUIState);
   const { open: navOpen } = useSidebar();
+  // TODO: should be replaced with correct type when available;
+  const output = data.output as ConservationProjectOutput;
+  const projectCostProps = output.totalProjectCost[costRangeSelector];
+  const leftOverProps = output.leftover[costRangeSelector];
+  const costDetailsProps = useMemo(
+    () =>
+      ({
+        total: parseCostDetailsForTable(output.costDetails.total),
+        npv: parseCostDetailsForTable(output.costDetails.npv),
+      })[costDetailsRangeSelector],
+    [
+      costDetailsRangeSelector,
+      output.costDetails.total,
+      output.costDetails.npv,
+    ],
+  );
+  const chartData = useMemo(
+    () =>
+      parseYearlyBreakdownForChart(
+        output.yearlyBreakdown,
+        getBreakdownYears(output.yearlyBreakdown),
+      ),
+    [output.yearlyBreakdown],
+  );
+  const tableData = useMemo(
+    () => parseYearlyBreakdownForTable(output.yearlyBreakdown),
+    [output.yearlyBreakdown],
+  );
 
   return (
     <motion.div
@@ -56,27 +101,29 @@ const CustomProject: FC = () => {
         transition={LAYOUT_TRANSITIONS}
         className="overflow-hidden"
       >
-        <ProjectSummary />
+        <ProjectSummary data={output.summary} />
       </motion.aside>
       <div className="mx-3 flex flex-1 flex-col">
-        <CustomProjectHeader />
+        <CustomProjectHeader data={data} />
         <div className="mb-4 mt-2 flex gap-4">
           <ProjectDetails
-            country={country}
-            projectSize={projectSize}
-            projectLength={projectLength}
-            ecosystem={ecosystem}
-            activity={activity}
-            lossRate={lossRate}
-            carbonRevenuesToCover={carbonRevenuesToCover}
-            initialCarbonPrice={initialCarbonPrice}
-            emissionFactors={emissionFactors}
+            data={{
+              country: data.country,
+              projectSize: data.projectSize,
+              projectLength: data.projectLength,
+              ecosystem: data.ecosystem,
+              carbonRevenuesToCover: output.carbonRevenuesToCover,
+              activity: data.activity,
+              initialCarbonPrice: output.initialCarbonPrice,
+              lossRate: output.lossRate,
+              emissionFactors: output.emissionFactors,
+            }}
           />
-          <ProjectCost />
-          <LeftOver />
-          <CostDetails />
+          <ProjectCost {...projectCostProps} />
+          <LeftOver {...leftOverProps} />
+          <CostDetails data={costDetailsProps} />
         </div>
-        <AnnualProjectCashFlow />
+        <AnnualProjectCashFlow tableData={tableData} chartData={chartData} />
       </div>
     </motion.div>
   );
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 9385996e..4cf858d4 100644
--- a/client/src/containers/projects/custom-project/left-over/index.tsx
+++ b/client/src/containers/projects/custom-project/left-over/index.tsx
@@ -2,13 +2,19 @@ import { FC } from "react";
 
 import { renderCurrency } from "@/lib/format";
 
-import mockData from "@/containers/projects/custom-project/mock-data";
+import { CUSTOM_PROJECT_OUTPUTS } from "@/constants/tooltip";
 
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Graph, GraphLegend } from "@/components/ui/graph";
 import { Label } from "@/components/ui/label";
 
-const LeftOver: FC = () => {
+interface LeftoverProps {
+  total: number;
+  leftover: number;
+  opex: number;
+}
+
+const LeftOver: FC<LeftoverProps> = ({ total, leftover, opex }) => {
   return (
     <Card variant="secondary" className="flex-1 p-0">
       <CardHeader className="p-4">
@@ -18,9 +24,8 @@ const LeftOver: FC = () => {
               htmlFor="totalProjectCost"
               className="text-md font-medium"
               tooltip={{
-                title: "Total project cost",
-                content:
-                  "Refers to the summary of Capital Expenditure and Operating Expenditure",
+                title: "Leftover after OpEx",
+                content: CUSTOM_PROJECT_OUTPUTS.LEFTOVER_AFTER_OPEX,
               }}
             >
               <h3 className="text-md">Leftover after OpEx</h3>
@@ -38,7 +43,7 @@ const LeftOver: FC = () => {
           <div className="flex max-w-[148px] flex-1 flex-col justify-between">
             <div>
               <span className="text-xl font-normal">
-                {renderCurrency(mockData.leftover)}
+                {renderCurrency(leftover)}
               </span>
             </div>
             <GraphLegend
@@ -57,14 +62,14 @@ const LeftOver: FC = () => {
             />
           </div>
           <Graph
-            total={mockData.totalRevenue}
+            total={total}
             segments={[
               {
-                value: mockData.opExRevenue,
+                value: opex,
                 colorClass: "bg-sky-blue-200",
               },
             ]}
-            leftover={mockData.leftover}
+            leftover={leftover}
           />
         </div>
       </CardContent>
diff --git a/client/src/containers/projects/custom-project/mock-data.ts b/client/src/containers/projects/custom-project/mock-data.ts
deleted file mode 100644
index 4031ac51..00000000
--- a/client/src/containers/projects/custom-project/mock-data.ts
+++ /dev/null
@@ -1,216 +0,0 @@
-import {
-  ACTIVITY,
-  RESTORATION_ACTIVITY_SUBTYPE,
-} from "@shared/entities/activity.enum";
-import { CARBON_REVENUES_TO_COVER } from "@shared/entities/custom-project.entity";
-import { ECOSYSTEM } from "@shared/entities/ecosystem.enum";
-
-// TODO: tooltip info will go to constants/tooltip-info.ts
-const tooltip = {
-  title: "Info",
-  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-};
-
-const mockData = {
-  country: { code: "ID", name: "Indonesia" },
-  projectSize: 20,
-  projectLength: 20,
-  ecosystem: ECOSYSTEM.SEAGRASS,
-  activity: ACTIVITY.CONSERVATION,
-  subActivity: RESTORATION_ACTIVITY_SUBTYPE.HYBRID,
-  lossRate: -0.1,
-  carbonRevenuesToCover: CARBON_REVENUES_TO_COVER.OPEX,
-  initialCarbonPrice: 30,
-  totalCost: 38023789,
-  capEx: 1500000,
-  opEx: 36500000,
-  leftover: 4106132,
-  totalRevenue: 40600000,
-  opExRevenue: 36500000,
-  emissionFactors: {
-    emissionFactor: 355,
-    emissionFactorAGB: 355,
-    emissionFactorSOC: 72,
-  },
-  details: [
-    [
-      {
-        label: "Country",
-        value: "Indonesia",
-        countryCode: "ID",
-      },
-      {
-        label: "Ecosystem",
-        value: "Seagrass",
-      },
-      {
-        label: "Carbon revenues to cover",
-        value: "Only Opex",
-      },
-    ],
-    [
-      {
-        label: "Project size",
-        value: 20,
-        unit: "hectares",
-      },
-      {
-        label: "Activity type",
-        value: "Conservation",
-      },
-      {
-        label: "Initial carbon price",
-        value: 30,
-        unit: "$",
-      },
-    ],
-    [
-      {
-        label: "Project length",
-        value: 20,
-        unit: "years",
-      },
-      {
-        label: "Loss rate",
-        value: "-0.10",
-        unit: "%",
-      },
-      {
-        label: "Emission factor",
-        subValues: [
-          {
-            label: "AGB",
-            value: 355,
-            unit: "tCO2e/ha/yr",
-          },
-          {
-            label: "SOC",
-            value: 72,
-            unit: "tCO2e/ha/yr",
-          },
-        ],
-      },
-    ],
-  ],
-  summary: [
-    {
-      name: "$/tCO2e (total cost, NPV)",
-      value: 16,
-      unit: "$",
-      tooltip,
-    },
-    {
-      name: "$/ha",
-      value: 358,
-      unit: "$",
-      tooltip,
-    },
-    {
-      name: "Leftover after OpEx / total cost",
-      value: 392807,
-      unit: "$",
-      tooltip,
-    },
-    {
-      name: "IRR when priced to cover opex",
-      value: 18.5,
-      unit: "%",
-      tooltip,
-    },
-    {
-      name: "IRR when priced to cover total costs",
-      value: -1.1,
-      unit: "%",
-      tooltip,
-    },
-    {
-      name: "Funding gap (NPV)",
-      unit: "%",
-      tooltip,
-    },
-  ],
-  costDetails: [
-    {
-      name: "capitalExpenditure",
-      value: 1514218,
-      label: "Capital expenditure",
-    },
-    {
-      name: "feasibilityAnalysis",
-      value: 70000,
-      label: "Feasibility analysis",
-    },
-    {
-      name: "conservationPlanningAndAdmin",
-      value: 629559,
-      label: "Conservation planning and admin",
-    },
-    {
-      name: "dataCollectionAndFieldCosts",
-      value: 76963,
-      label: "Data collection and field costs",
-    },
-    {
-      name: "communityRepresentation",
-      value: 286112,
-      label: "Community representation",
-    },
-    {
-      name: "blueCarbonProjectPlanning",
-      value: 111125,
-      label: "Blue carbon project planning",
-    },
-    {
-      name: "establishingCarbonRights",
-      value: 296010,
-      label: "Establishing carbon rights",
-    },
-    {
-      name: "validation",
-      value: 44450,
-      label: "Validation",
-    },
-    {
-      name: "implementationLabor",
-      value: 0,
-      label: "Implementation labor",
-    },
-    {
-      name: "operatingExpenditure",
-      value: 36509571,
-      label: "Operating expenditure",
-    },
-    {
-      name: "monitoringAndMaintenance",
-      value: 402322,
-      label: "Monitoring and Maintenance",
-    },
-    {
-      name: "communityBenefitSharingFund",
-      value: 34523347,
-      label: "Community benefit sharing fund",
-    },
-    {
-      name: "carbonStandardFees",
-      value: 227875,
-      label: "Carbon standard fees",
-    },
-    {
-      name: "baselineReassessment",
-      value: 75812,
-      label: "Baseline reassessment",
-    },
-    {
-      name: "mrv",
-      value: 223062,
-      label: "MRV",
-    },
-    {
-      name: "totalCost",
-      value: 38023789,
-      label: "Total cost",
-    },
-  ],
-};
-
-export default mockData;
diff --git a/client/src/containers/projects/custom-project/summary/index.tsx b/client/src/containers/projects/custom-project/summary/index.tsx
index 35727be3..813780bf 100644
--- a/client/src/containers/projects/custom-project/summary/index.tsx
+++ b/client/src/containers/projects/custom-project/summary/index.tsx
@@ -1,24 +1,49 @@
 import { FC } from "react";
 
+import { type CustomProjectSummary } from "@shared/dtos/custom-projects/custom-project-output.dto";
 import { useSetAtom } from "jotai";
 import { XIcon } from "lucide-react";
 
-import { projectsUIState } from "@/app/projects/[id]/store";
+import { projectsUIState } from "@/app/projects/store";
+
+import { PROJECT_SUMMARY } from "@/constants/tooltip";
 
 import { SUMMARY_SIDEBAR_WIDTH } from "@/containers/projects/custom-project";
-import mockData from "@/containers/projects/custom-project/mock-data";
 
-import FileEdit from "@/components/icons/file-edit";
 import { Button } from "@/components/ui/button";
 import InfoButton from "@/components/ui/info-button";
 import Metric from "@/components/ui/metric";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
-const ProjectSummary: FC = () => {
+const customProjectSummaryUnitMap: Record<keyof CustomProjectSummary, string> =
+  {
+    "$/tCO2e (total cost, NPV)": "$",
+    "$/ha": "$",
+    "NPV covering cost": "$",
+    "Leftover after OpEx / total cost": "$",
+    "IRR when priced to cover OpEx": "%",
+    "IRR when priced to cover total cost": "%",
+    "Total cost (NPV)": "$",
+    "Capital expenditure (NPV)": "$",
+    "Operating expenditure (NPV)": "$",
+    "Credits issued": "",
+    "Total revenue (NPV)": "$",
+    "Total revenue (non-discounted)": "$",
+    "Financing cost": "$",
+    "Funding gap": "$",
+    "Funding gap (NPV)": "%",
+    "Funding gap per tCO2e (NPV)": "%",
+    "Community benefit sharing fund": "%",
+  } as const;
+interface ProjectSummaryProps {
+  data: CustomProjectSummary;
+}
+const ProjectSummary: FC<ProjectSummaryProps> = ({ data }) => {
   const setProjectSummaryOpen = useSetAtom(projectsUIState);
 
   return (
     <div
-      className={"relative flex h-full flex-col gap-8 bg-big-stone-950 p-6"}
+      className={"relative flex h-full flex-col gap-8 bg-big-stone-950 py-6"}
       style={{ width: SUMMARY_SIDEBAR_WIDTH }}
     >
       <Button
@@ -34,34 +59,43 @@ const ProjectSummary: FC = () => {
       >
         <XIcon className="h-4 w-4 text-foreground hover:text-muted-foreground" />
       </Button>
-      <header>
+      <header className="px-6">
         <h2 className="text-xl font-semibold">Summary</h2>
       </header>
-      <ul className="flex-1 space-y-1">
-        {mockData.summary.map(({ name, tooltip, unit, value }) => (
-          <div
-            key={name}
-            className="flex justify-between border-b border-dashed py-1.5"
-          >
-            <div className="flex items-center gap-2">
-              <div className="text-sm font-normal">{name}</div>
-              <InfoButton title={tooltip.title}>{tooltip.content}</InfoButton>
-            </div>
-            <div className="text-base font-medium">
-              <Metric value={value} unit={unit} unitBeforeValue />
-            </div>
-          </div>
-        ))}
-      </ul>
-      <div className="flex">
+      <ScrollArea className="flex-1 px-6">
+        <ul className="space-y-1">
+          {(Object.keys(data) as Array<keyof CustomProjectSummary>).map(
+            (key) => (
+              <div
+                key={key}
+                className="flex justify-between border-b border-dashed py-1.5"
+              >
+                <div className="flex items-center gap-2">
+                  <div className="text-sm font-normal">{key}</div>
+                  <InfoButton title={key}>{PROJECT_SUMMARY[key]}</InfoButton>
+                </div>
+                <div className="text-base font-medium">
+                  <Metric
+                    value={data[key]}
+                    unit={customProjectSummaryUnitMap[key]}
+                    unitBeforeValue
+                  />
+                </div>
+              </div>
+            ),
+          )}
+        </ul>
+      </ScrollArea>
+      <div className="flex px-6">
         <p className="flex-1 text-xs text-muted-foreground">
           Calculations based on project setup parameters. For new calculations,
           edit project details.
         </p>
-        <Button type="button" variant="outline">
+        {/* TODO: Uncomment when feature is available */}
+        {/* <Button type="button" variant="outline">
           <FileEdit />
           <span>Edit Project</span>
-        </Button>
+        </Button> */}
       </div>
     </div>
   );
diff --git a/client/src/containers/projects/new/header.tsx b/client/src/containers/projects/new/header.tsx
index 4ee2e6d3..daf76934 100644
--- a/client/src/containers/projects/new/header.tsx
+++ b/client/src/containers/projects/new/header.tsx
@@ -2,6 +2,8 @@
 
 import { useFormContext } from "react-hook-form";
 
+import { useRouter } from "next/navigation";
+
 import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
 
 import { Button } from "@/components/ui/button";
@@ -11,6 +13,7 @@ import { onSubmit } from "./index";
 
 export default function Header() {
   const methods = useFormContext<CreateCustomProjectForm>();
+  const router = useRouter();
 
   return (
     <div className="flex items-center justify-between py-3 pr-6">
@@ -22,7 +25,10 @@ export default function Header() {
         <Button variant="secondary">Cancel</Button>
         <Button
           // disabled={!methods.formState.isValid}
-          onClick={methods.handleSubmit(onSubmit)}
+          onClick={() => {
+            methods.handleSubmit((data) => onSubmit(data))();
+            router.push("/projects/preview");
+          }}
         >
           Continue
         </Button>
diff --git a/client/src/containers/projects/new/index.tsx b/client/src/containers/projects/new/index.tsx
index d5d9c0d5..1e064679 100644
--- a/client/src/containers/projects/new/index.tsx
+++ b/client/src/containers/projects/new/index.tsx
@@ -28,7 +28,7 @@ import ProjectSidebar from "@/containers/projects/new/sidebar";
 
 import { ScrollArea } from "@/components/ui/scroll-area";
 
-export const onSubmit = (data: CreateCustomProjectForm) => {
+export const onSubmit = async (data: CreateCustomProjectForm) => {
   const queryClient = getQueryClient();
 
   const originalValues = { ...data };
@@ -97,7 +97,12 @@ export const onSubmit = (data: CreateCustomProjectForm) => {
     },
   };
 
-  client.customProjects.createCustomProject.mutation({ body: data });
+  const { status, body } =
+    await client.customProjects.createCustomProject.mutation({ body: data });
+
+  if (status === 201) {
+    queryClient.setQueryData(queryKeys.customProjects.cached.queryKey, body);
+  }
 };
 
 export default function CreateCustomProject() {
diff --git a/client/src/hooks/use-get-custom-project.ts b/client/src/hooks/use-get-custom-project.ts
new file mode 100644
index 00000000..cd75a1e4
--- /dev/null
+++ b/client/src/hooks/use-get-custom-project.ts
@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+
+import { usePathname, useRouter } from "next/navigation";
+
+import { CustomProject as CustomProjectEntity } from "@shared/entities/custom-project.entity";
+import { useQueryClient } from "@tanstack/react-query";
+import { useSession } from "next-auth/react";
+
+import { client } from "@/lib/query-client";
+import { queryKeys } from "@/lib/query-keys";
+import { getAuthHeader } from "@/lib/utils";
+
+export function useGetCustomProject(id?: string) {
+  const { data: session } = useSession();
+  const queryCache = useQueryClient().getQueryData<{
+    data: InstanceType<typeof CustomProjectEntity>;
+  }>(queryKeys.customProjects.cached.queryKey);
+  const getCustomProjectQuery = client.customProjects.getCustomProject.useQuery(
+    queryKeys.customProjects.one(id || "").queryKey,
+    {
+      params: { id: id || "" },
+      extraHeaders: {
+        ...getAuthHeader(session?.accessToken as string),
+      },
+      query: {
+        include: ["country"],
+      },
+    },
+    {
+      queryKey: queryKeys.customProjects.one(id || "").queryKey,
+      enabled: !!id,
+    },
+  );
+  const pathname = usePathname();
+  const router = useRouter();
+  const data = queryCache?.data || getCustomProjectQuery.data?.body.data;
+
+  useEffect(() => {
+    if (pathname === "/projects/preview" && !queryCache) {
+      router.push("/projects/new");
+    }
+  }, [queryCache, pathname, router]);
+
+  return data;
+}
diff --git a/client/src/lib/query-keys.ts b/client/src/lib/query-keys.ts
index e8621088..9960e5bf 100644
--- a/client/src/lib/query-keys.ts
+++ b/client/src/lib/query-keys.ts
@@ -44,7 +44,9 @@ export const tableKeys = createQueryKeys("tables", {
 });
 
 export const customProjectKeys = createQueryKeys("customProjects", {
+  cached: null,
   countries: null,
+  one: (id: string) => [id],
   assumptions: ({
     ecosystem,
     activity,
diff --git a/client/src/lib/utils.ts b/client/src/lib/utils.ts
index a5ef1935..6ef2f4d7 100644
--- a/client/src/lib/utils.ts
+++ b/client/src/lib/utils.ts
@@ -4,3 +4,9 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export const getAuthHeader = (token: string | undefined) => {
+  if (!token) return {};
+
+  return { Authorization: `Bearer ${token}` };
+};
diff --git a/client/src/types.d.ts b/client/src/types.d.ts
new file mode 100644
index 00000000..31a0f433
--- /dev/null
+++ b/client/src/types.d.ts
@@ -0,0 +1,5 @@
+declare function getCountryISO2(iso3: string): string;
+
+declare module "country-iso-3-to-2" {
+  export default getCountryISO2;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5faf24c4..2e1c57b1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -60,7 +60,7 @@ importers:
         version: 10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)
       '@nestjs/cqrs':
         specifier: ^10.2.7
-        version: 10.2.7(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)
+        version: 10.2.7(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(reflect-metadata@0.2.2)(rxjs@7.8.1)
       '@nestjs/jwt':
         specifier: ^10.2.0
         version: 10.2.0(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))
@@ -72,13 +72,13 @@ importers:
         version: 10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)
       '@nestjs/terminus':
         specifier: ^10.2.3
-        version: 10.2.3(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)(@nestjs/typeorm@10.0.2(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5))))(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))
+        version: 10.2.3(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/typeorm@10.0.2(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5))))(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))
       '@nestjs/typeorm':
         specifier: ^10.0.2
-        version: 10.0.2(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))
+        version: 10.0.2(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))
       '@ts-rest/nest':
         specifier: ^3.51.0
-        version: 3.51.0(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)(@ts-rest/core@3.51.0(@types/node@20.14.2)(zod@3.23.8))(rxjs@7.8.1)(zod@3.23.8)
+        version: 3.51.0(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@ts-rest/core@3.51.0(@types/node@20.14.2)(zod@3.23.8))(rxjs@7.8.1)(zod@3.23.8)
       '@types/multer':
         specifier: 1.4.12
         version: 1.4.12
@@ -148,7 +148,7 @@ importers:
         version: 10.1.4(chokidar@3.6.0)(typescript@5.4.5)
       '@nestjs/testing':
         specifier: ^10.0.0
-        version: 10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)(@nestjs/platform-express@10.4.1)
+        version: 10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1))
       '@types/bcrypt':
         specifier: ^5.0.2
         version: 5.0.2
@@ -390,6 +390,9 @@ importers:
       clsx:
         specifier: 2.1.1
         version: 2.1.1
+      country-iso-3-to-2:
+        specifier: ^1.1.1
+        version: 1.1.1
       d3:
         specifier: 7.9.0
         version: 7.9.0
@@ -435,6 +438,9 @@ importers:
       react-resizable-panels:
         specifier: 2.1.6
         version: 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts:
+        specifier: ^2.13.3
+        version: 2.13.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rooks:
         specifier: 7.14.1
         version: 7.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -4351,6 +4357,9 @@ packages:
       typescript:
         optional: true
 
+  country-iso-3-to-2@1.1.1:
+    resolution: {integrity: sha512-nirmbzPq5vt40WT9YWrWEvruxNt3h0g/h/k5umfo1ctq0ncw4Kwjd3+MKVL1vp5W5npb/fc3gv4E62xa/PZDiA==}
+
   crc-32@1.2.2:
     resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
     engines: {node: '>=0.8'}
@@ -4572,6 +4581,9 @@ packages:
       supports-color:
         optional: true
 
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
   dedent@1.5.3:
     resolution: {integrity: sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==}
     peerDependencies:
@@ -4932,6 +4944,9 @@ packages:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
 
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
   events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
@@ -4986,6 +5001,10 @@ packages:
   fast-diff@1.3.0:
     resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
 
+  fast-equals@5.0.1:
+    resolution: {integrity: sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==}
+    engines: {node: '>=6.0.0'}
+
   fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -7058,6 +7077,12 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
+  react-smooth@4.0.1:
+    resolution: {integrity: sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+
   react-style-singleton@2.2.1:
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
@@ -7097,6 +7122,16 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  recharts-scale@0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+
+  recharts@2.13.3:
+    resolution: {integrity: sha512-YDZ9dOfK9t3ycwxgKbrnDlRC4BHdjlY73fet3a0C1+qGMjXVZe6+VXmpOIIhzkje5MMEL8AN4hLIe4AMskBzlA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+
   redux@4.2.1:
     resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==}
 
@@ -8004,6 +8039,9 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  victory-vendor@36.9.2:
+    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+
   void-elements@3.1.0:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
@@ -10123,7 +10161,7 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@nestjs/cqrs@10.2.7(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)':
+  '@nestjs/cqrs@10.2.7(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(reflect-metadata@0.2.2)(rxjs@7.8.1)':
     dependencies:
       '@nestjs/common': 10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)
       '@nestjs/core': 10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)
@@ -10184,7 +10222,7 @@ snapshots:
     transitivePeerDependencies:
       - chokidar
 
-  '@nestjs/terminus@10.2.3(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)(@nestjs/typeorm@10.0.2(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5))))(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))':
+  '@nestjs/terminus@10.2.3(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/typeorm@10.0.2(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5))))(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))':
     dependencies:
       '@nestjs/common': 10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)
       '@nestjs/core': 10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)
@@ -10193,10 +10231,10 @@ snapshots:
       reflect-metadata: 0.2.2
       rxjs: 7.8.1
     optionalDependencies:
-      '@nestjs/typeorm': 10.0.2(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))
+      '@nestjs/typeorm': 10.0.2(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))
       typeorm: 0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5))
 
-  '@nestjs/testing@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)(@nestjs/platform-express@10.4.1)':
+  '@nestjs/testing@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1))':
     dependencies:
       '@nestjs/common': 10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)
       '@nestjs/core': 10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)
@@ -10204,7 +10242,7 @@ snapshots:
     optionalDependencies:
       '@nestjs/platform-express': 10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)
 
-  '@nestjs/typeorm@10.0.2(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))':
+  '@nestjs/typeorm@10.0.2(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(pg@8.12.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))':
     dependencies:
       '@nestjs/common': 10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)
       '@nestjs/core': 10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)
@@ -11520,7 +11558,7 @@ snapshots:
       '@types/node': 20.14.2
       zod: 3.23.8
 
-  '@ts-rest/nest@3.51.0(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1)(@ts-rest/core@3.51.0(@types/node@20.14.2)(zod@3.23.8))(rxjs@7.8.1)(zod@3.23.8)':
+  '@ts-rest/nest@3.51.0(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@ts-rest/core@3.51.0(@types/node@20.14.2)(zod@3.23.8))(rxjs@7.8.1)(zod@3.23.8)':
     dependencies:
       '@nestjs/common': 10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)
       '@nestjs/core': 10.4.1(@nestjs/common@10.4.1(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.1)(reflect-metadata@0.2.2)(rxjs@7.8.1)
@@ -12871,6 +12909,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.3.3
 
+  country-iso-3-to-2@1.1.1: {}
+
   crc-32@1.2.2: {}
 
   create-jest@29.7.0(@types/node@20.14.2)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)):
@@ -13116,6 +13156,8 @@ snapshots:
     optionalDependencies:
       supports-color: 5.5.0
 
+  decimal.js-light@2.5.1: {}
+
   dedent@1.5.3(babel-plugin-macros@3.1.0):
     optionalDependencies:
       babel-plugin-macros: 3.1.0
@@ -13404,7 +13446,7 @@ snapshots:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.0)
       eslint-plugin-react: 7.35.2(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@@ -13439,7 +13481,7 @@ snapshots:
       is-bun-module: 1.1.0
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
@@ -13457,7 +13499,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
+  eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -13621,6 +13663,8 @@ snapshots:
 
   etag@1.8.1: {}
 
+  eventemitter3@4.0.7: {}
+
   events@3.3.0: {}
 
   execa@5.1.1:
@@ -13789,6 +13833,8 @@ snapshots:
 
   fast-diff@1.3.0: {}
 
+  fast-equals@5.0.1: {}
+
   fast-glob@3.3.2:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -16048,6 +16094,14 @@ snapshots:
       - '@types/react'
       - supports-color
 
+  react-smooth@4.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      fast-equals: 5.0.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+
   react-style-singleton@2.2.1(@types/react@18.3.5)(react@18.3.1):
     dependencies:
       get-nonce: 1.0.1
@@ -16099,6 +16153,23 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  recharts-scale@0.4.5:
+    dependencies:
+      decimal.js-light: 2.5.1
+
+  recharts@2.13.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-is: 18.3.1
+      react-smooth: 4.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
   redux@4.2.1:
     dependencies:
       '@babel/runtime': 7.25.7
@@ -17102,6 +17173,23 @@ snapshots:
 
   vary@1.1.2: {}
 
+  victory-vendor@36.9.2:
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.8
+      '@types/d3-shape': 3.1.6
+      '@types/d3-time': 3.0.3
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
   void-elements@3.1.0: {}
 
   vt-pbf@3.1.3:
diff --git a/shared/dtos/custom-projects/custom-project-output.dto.ts b/shared/dtos/custom-projects/custom-project-output.dto.ts
index 3a47f890..4ca1cae5 100644
--- a/shared/dtos/custom-projects/custom-project-output.dto.ts
+++ b/shared/dtos/custom-projects/custom-project-output.dto.ts
@@ -1,4 +1,5 @@
 import { OverridableCostInputs } from "@shared/dtos/custom-projects/cost.inputs";
+import { CARBON_REVENUES_TO_COVER } from "@shared/entities/custom-project.entity";
 
 export type CustomProjectSummary = {
   "$/tCO2e (total cost, NPV)": number;
@@ -41,20 +42,23 @@ export type CustomProjectCostDetails = {
   longTermProjectOperatingCost: number;
 };
 
-export type OutputCostNames = [
-  "opexTotalCostPlan",
-  "capexTotalCostPlan",
-  "totalCostPlan",
-  "estimatedRevenuePlan",
-  "creditsIssuedPlan",
-  "cumulativeNetIncomePlan",
-  "cumulativeNetIncomeCapexOpex",
-  "annualNetCashFlow",
-  "annualNetIncome",
-];
+export type OutputCostNames =
+  | "opexTotalCostPlan"
+  | "capexTotalCostPlan"
+  | "totalCostPlan"
+  | "estimatedRevenuePlan"
+  | "creditsIssuedPlan"
+  | "cumulativeNetIncomePlan"
+  | "cumulativeNetIncomeCapexOpex"
+  | "annualNetCashFlow"
+  | "annualNetIncome";
+
+export type YearlyBreakdownCostName =
+  | keyof InstanceType<typeof OverridableCostInputs>
+  | OutputCostNames;
 
 export type YearlyBreakdown = {
-  costName: keyof OverridableCostInputs & OutputCostNames;
+  costName: YearlyBreakdownCostName;
   totalCost: number;
   totalNPV: number;
   costValues: CostPlanMap;
@@ -81,6 +85,8 @@ export class ConservationProjectOutput {
     emissionFactorAgb: number;
     emissionFactorSoc: number;
   };
+  carbonRevenuesToCover: CARBON_REVENUES_TO_COVER;
+  initialCarbonPrice: number;
   totalProjectCost: {
     total: {
       total: number;