diff --git a/src/app/components/portfolio/AddNew.tsx b/src/app/components/portfolio/AddNew.tsx
index f38cb40..32cf000 100644
--- a/src/app/components/portfolio/AddNew.tsx
+++ b/src/app/components/portfolio/AddNew.tsx
@@ -2,27 +2,30 @@
 
 import { Menu } from "@headlessui/react";
 import Link from "next/link";
+import { PlusIcon, TableCellsIcon } from "@heroicons/react/24/outline";
 
 export default function AddNew({ portfolioId }: { portfolioId: string }) {
   return (
     <Menu as="div" className="relative">
-      <Menu.Button className="rounded-md bg-brandmidblue text-white hover:bg-brandblue">
+      <Menu.Button className="rounded-md bg-brandtan text-white hover:bg-hovertan">
         <div className="mx-8">Add New</div>
       </Menu.Button>
       <Menu.Items className="hover:bg-brandtan absolute right-0 mt-2 w-48 origin-top-right overflow-hidden rounded-md border bg-white shadow-lg focus:outline-none">
         <Menu.Item>
           <Link
             href={`portfolio/${portfolioId}/search`}
-            className="flex px-4 py-2 text-sm text-gray-700 justify-start"
+            className="items-center flex px-4 py-2 text-sm text-gray-700 justify-start hover:text-white"
           >
+            <PlusIcon className="h-4 w-4 mr-2" />
             Add Unit
           </Link>
         </Menu.Item>
         <Menu.Item>
           <button
             disabled={true}
-            className="flex px-4 py-2 text-sm text-gray-500 bg-gray-100 w-full justify-start"
+            className="items-center flex px-4 py-2 text-sm text-gray-500 bg-gray-100 w-full justify-start"
           >
+            <TableCellsIcon className="h-4 w-4 mr-2" />
             Upload CSV
           </button>
         </Menu.Item>
diff --git a/src/app/portfolio/[slug]/page.tsx b/src/app/portfolio/[slug]/page.tsx
index 181199c..cf8ed0a 100644
--- a/src/app/portfolio/[slug]/page.tsx
+++ b/src/app/portfolio/[slug]/page.tsx
@@ -1,86 +1,158 @@
+import { PencilSquareIcon, HomeIcon } from "@heroicons/react/24/outline";
 import AddNew from "../../components/portfolio/AddNew";
 
+function EmptyPropertyState() {
+  return (
+    <div className="flex justify-center h-1/2">
+      <div className="bg-gray-50 rounded-lg shadow w-full">
+        <p className="text-center text-gray-400 pt-3">
+          Click on Add new to start adding properties to your Portfolio
+          <HomeIcon className="h-20 w-20 mx-auto mt-4 text-gray-200" />
+        </p>
+      </div>
+    </div>
+  );
+}
+
 export default async function Page({
   params,
   searchParams,
 }: {
   params: { slug: string };
-  searchParams: { [key: string]: string | string[] | undefined };
+  searchParams: { [key: string]: string | string[] | undefined | number };
 }) {
   // This is temp until we retrieve this data from the frontend
   // TODO: Update the objects to contains objective + any other required information
   const Portfolios = [
     {
       id: "f290f1ee-6c54-4b01-90e6-d701748f0851",
+      properties: [],
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0851",
       title: "Portfolio 1",
-      budget: "£500k",
+      budget: 500000,
+      properties: [],
+      co2Reduction: 5.4,
+      totalWorksHours: 45,
+      totalValueIncrease: 500000 * 1.2,
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0852",
       title: "Portfolio 2",
-      budget: "150k",
+      budget: 150000,
+      properties: [],
+      co2Reduction: 9.0,
+      totalWorksHours: 30,
+      totalValueIncrease: 150000 * 1.2,
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0853",
       title: "Portfolio 3",
-      budget: "£1m",
+      budget: 1000000,
+      properties: [],
+      co2Reduction: 15.4,
+      totalWorksHours: 100,
+      totalValueIncrease: 1000000 * 1.2,
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0854",
       title: "Portfolio 4",
-      budget: "£2m",
+      budget: 2000000,
+      properties: [],
+      co2Reduction: 3.8,
+      totalWorksHours: 150,
+      totalValueIncrease: 2000000 * 1.2,
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0855",
       title: "Portfolio 5",
-      budget: "£25k",
+      budget: 25000,
+      properties: [],
+      co2Reduction: 1.9,
+      totalWorksHours: 15,
+      totalValueIncrease: 25000 * 1.2,
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0856",
       title: "Portfolio 6",
-      budget: "£10k",
+      budget: 10000,
+      properties: [],
+      co2Reduction: 1.4,
+      totalWorksHours: 10,
+      totalValueIncrease: 10000 * 1.2,
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0857",
       title: "Portfolio 7",
-      budget: "£33k",
+      budget: 33000,
+      properties: [],
+      co2Reduction: 10.4,
+      totalWorksHours: 25,
+      totalValueIncrease: 33000 * 1.2,
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0858",
       title: "Portfolio 8",
-      budget: "£670k",
+      budget: 670000,
+      properties: [],
+      co2Reduction: 4.5,
+      totalWorksHours: 65,
+      totalValueIncrease: 670000 * 1.2,
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0859",
       title: "Portfolio 9",
-      budget: "£240k",
+      budget: 240000,
+      properties: [],
+      co2Reduction: 8.4,
+      totalWorksHours: 40,
+      totalValueIncrease: 240000 * 1.2,
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0860",
       title: "Portfolio 10",
-      budget: "93k",
+      budget: 93000,
+      properties: [],
+      co2Reduction: 5.4,
+      totalWorksHours: 18,
+      totalValueIncrease: 93000 * 1.2,
     },
   ];
   const demo_id = "f290f1ee-6c54-4b01-90e6-d701748f0851";
 
   let page_config;
   let pageName;
+  let budget;
+  let co2Reduction: number;
+  let totalWorksHours: number;
+  let totalValueIncrease: number;
   if (params.slug === demo_id) {
     page_config = {
       properties: [],
       ...searchParams,
     };
     pageName = searchParams.name;
+    budget = searchParams.budget;
+    co2Reduction = 0;
+    totalWorksHours = 0;
+    totalValueIncrease = 0;
   } else {
     page_config = Portfolios.filter((portfolio) => {
       return portfolio.id == params.slug;
     })[0];
     pageName = page_config.title;
+    budget = page_config.budget;
+    co2Reduction = page_config.co2Reduction as number;
+    totalWorksHours = page_config.totalWorksHours as number;
+    totalValueIncrease = page_config.totalValueIncrease as number;
   }
 
+  // TODO: Put this back in for demo
+  // const properties = page_config.properties;
+
+  const properties: [] = [];
+
   // TODO: Add the porfolio summary information on the left
   //       Add an empty state for when there are no properties
   //       Create populated state for when there are properties
@@ -88,11 +160,38 @@ export default async function Page({
   return (
     <>
       <div className="flex justify-center">
-        <h1 className="text-3xl font-bold mt-3">Portfolio: {pageName}</h1>
+        <h1 className="text-3xl font-bold mt-3 mb-4">Portfolio: {pageName}</h1>
       </div>
       <div className="flex justify-center">
-        <div className="grid w-full max-w-7xl ">
-          <div className="flex justify-end">
+        <div className="grid grid-cols-5 gap-4 w-full max-w-7xl h-screen">
+          <div className="bg-brandmidblue p-4 rounded-lg shadow text-white h-1/2">
+            <h2 className="text-lg font-bold mb-4">Portfolio Summary</h2>
+            <ul>
+              <li className="px-2 mb-2 flex items-center cursor-pointer hover:bg-brandblue hover:rounded-md transition-colors duration-200">
+                Budget: {budget || "Not Set"}
+                <PencilSquareIcon className="h-6 w-6 ml-2" />
+              </li>
+              <li className="px-2 mb-2">
+                Number of properties: {properties.length}
+              </li>
+              <li className="px-2 mb-2">
+                Annual Co2 Savings: {co2Reduction} tonnes
+              </li>
+              <li className="px-2 mb-2">
+                Total Works Time: {totalWorksHours} hours
+              </li>
+              <li className="px-2 mb-2">
+                Total Value Increase: £{totalValueIncrease}
+              </li>
+              <li className="px-2 mb-2">
+                Annual Value Increase: £{totalValueIncrease}
+              </li>
+            </ul>
+          </div>
+          <div className="col-span-3 bg-white">
+            {properties ? <EmptyPropertyState /> : "Implement me"}
+          </div>
+          <div className="col-span-1 flex justify-center">
             <AddNew portfolioId={demo_id} />
           </div>
         </div>