diff --git a/src/app/portfolio/[slug]/(portfolio)/reporting/page.tsx b/src/app/portfolio/[slug]/(portfolio)/reporting/page.tsx
index 2e57954c..bca94fa6 100644
--- a/src/app/portfolio/[slug]/(portfolio)/reporting/page.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/reporting/page.tsx
@@ -1,14 +1,44 @@
+import {
+  loadBaselineMetrics,
+  getCountByPropertyType,
+} from "@/app/portfolio/[slug]/(portfolio)/reporting/loadBaselineMetrics";
+import { DashboardSummaryCards } from "@/app/portfolio/[slug]/(portfolio)/reporting/DashboardSummaryCards";
+import { BreakdownChart } from "@/app/portfolio/[slug]/(portfolio)/reporting/BreakdownChart";
+
 export default async function ReportingPage(props: {
   params: Promise<{ slug: string }>;
 }) {
   const params = await props.params;
   const portfolioId = params.slug;
 
+  const [baseline, propertyTypes] = await Promise.all([
+    loadBaselineMetrics(Number(portfolioId)),
+    getCountByPropertyType(Number(portfolioId)),
+  ]);
+
   return (
-    <>
-      <div className="flex justify-center">
-        <div>Reporting Page for portfolio: {portfolioId}</div>
+    <div className="max-w-8xl mx-auto px-6 pb-10 space-y-4 pt-4">
+      <div className="mb-6">
+        <header className="text-3xl font-semibold text-brandblue">
+          Portfolio Overview
+        </header>
+        <div className="h-px bg-gray-200 mt-2" />
       </div>
-    </>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
+        {/* LEFT SIDE: Portfolio Metrics */}
+        <DashboardSummaryCards
+          total={baseline.total}
+          averages={baseline.averages}
+        />
+
+        {/* RIGHT SIDE: Chart */}
+        <BreakdownChart
+          epcBands={baseline.epcBands}
+          ageBands={baseline.ageBands}
+          propertyTypes={propertyTypes}
+        />
+      </div>
+    </div>
   );
 }