diff --git a/src/app/components/ProfileDropDown.tsx b/src/app/components/ProfileDropDown.tsx
index 645b331..6cc3246 100644
--- a/src/app/components/ProfileDropDown.tsx
+++ b/src/app/components/ProfileDropDown.tsx
@@ -17,8 +17,8 @@ function ProfileDropDown() {
         {session.user.image ? (
           <img
             src={session.user.image}
-            alt={session.user.image}
-            className="inline h-12 w-12 rounded-full "
+            alt={"Profile"}
+            className="inline h-12 w-12 rounded-full text-white"
           />
         ) : (
           <span className="inline-block h-12 w-12 overflow-hidden rounded-full bg-stone-100">
diff --git a/src/app/portfolio/[slug]/page.tsx b/src/app/portfolio/[slug]/page.tsx
index cf8ed0a..1dbeb19 100644
--- a/src/app/portfolio/[slug]/page.tsx
+++ b/src/app/portfolio/[slug]/page.tsx
@@ -1,5 +1,32 @@
 import { PencilSquareIcon, HomeIcon } from "@heroicons/react/24/outline";
 import AddNew from "../../components/portfolio/AddNew";
+import { formatNumber } from "@/app/utils";
+import Link from "next/link";
+import { SearchData } from "@/types/epc";
+
+function generateProperties(value: number, suffix: string) {
+  const length = Math.ceil(value / 30000);
+
+  return Array.from({ length }, (_, index) => ({
+    id: `${index + 1}-k290f1ee-6c54-4b01-90e6-d701748f0851-${suffix}`,
+    lmkKey: "demo-property",
+    address: `${index + 1} Test Street`,
+    postcode: "TE1 1ST",
+    cost: 30000,
+    co2Reduction: 9 / 5,
+    targetEpcRating: "C",
+  }));
+}
+
+type Property = {
+  id: string;
+  address: string;
+  postcode: string;
+  cost: number;
+  co2Reduction: number;
+  lmkKey: string;
+  targetEpcRating: string;
+};
 
 function EmptyPropertyState() {
   return (
@@ -14,6 +41,48 @@ function EmptyPropertyState() {
   );
 }
 
+function Propertycards({
+  properties,
+  portfolioId,
+}: {
+  properties: Property[];
+  portfolioId: string;
+}) {
+  return (
+    <div className="flex justify-center">
+      <ul className="w-full">
+        {properties.map((property) => (
+          <li
+            key={property.id}
+            className="border-l-4 border-l-brandmidblue bg-white rounded-lg shadow mb-4 p-4 flex items-center justify-between"
+          >
+            <div className="flex items-center ">
+              <div>
+                <HomeIcon className="h-10 w-10 mx-auto text-gray-200" />
+              </div>
+              <div className="ml-4 ">
+                <h3 className="text-xl font-medium">{property.address}</h3>
+                <p className="text-gray-600">{property.postcode}</p>
+              </div>
+              <div className="ml-10">Cost: £{formatNumber(property.cost)}</div>
+              <div className="ml-4">
+                Co2 Savings (t): {property.co2Reduction}
+              </div>
+            </div>
+
+            <Link
+              href={`/portfolio/${portfolioId}/property/${property.lmkKey}/plan?postcode=${property.postcode}&targetEpcRating=${property.targetEpcRating}`}
+              className="bg-brandtan text-white rounded-lg px-4 py-2 hover:bg-hovertan transition-colors duration-200"
+            >
+              Go to Plan
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
 export default async function Page({
   params,
   searchParams,
@@ -26,97 +95,116 @@ export default async function Page({
   const Portfolios = [
     {
       id: "f290f1ee-6c54-4b01-90e6-d701748f0851",
-      properties: [],
+      properties: [] as Property[],
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0851",
       title: "Portfolio 1",
       budget: 500000,
-      properties: [],
+      properties: generateProperties(500000, "1") as Property[],
       co2Reduction: 5.4,
       totalWorksHours: 45,
       totalValueIncrease: 500000 * 1.2,
+      rentalYieldIncrease: 500000 * 0.002,
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0852",
       title: "Portfolio 2",
       budget: 150000,
-      properties: [],
+      cost: 150000,
       co2Reduction: 9.0,
       totalWorksHours: 30,
       totalValueIncrease: 150000 * 1.2,
+      rentalYieldIncrease: 150000 * 0.002,
+      properties: generateProperties(30000, "2") as Property[],
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0853",
       title: "Portfolio 3",
       budget: 1000000,
-      properties: [],
+      cost: 1000000,
       co2Reduction: 15.4,
       totalWorksHours: 100,
       totalValueIncrease: 1000000 * 1.2,
+      rentalYieldIncrease: 1000000 * 0.002,
+      properties: generateProperties(1000000, "3") as Property[],
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0854",
       title: "Portfolio 4",
       budget: 2000000,
-      properties: [],
+      cost: 2000000,
       co2Reduction: 3.8,
       totalWorksHours: 150,
       totalValueIncrease: 2000000 * 1.2,
+      rentalYieldIncrease: 2000000 * 0.002,
+      properties: generateProperties(2000000, "4") as Property[],
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0855",
       title: "Portfolio 5",
-      budget: 25000,
-      properties: [],
+      budget: 35000,
+      cost: 35000,
       co2Reduction: 1.9,
       totalWorksHours: 15,
-      totalValueIncrease: 25000 * 1.2,
+      totalValueIncrease: 35000 * 1.2,
+      rentalYieldIncrease: 35000 * 0.002,
+      properties: generateProperties(35000, "5") as Property[],
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0856",
       title: "Portfolio 6",
-      budget: 10000,
-      properties: [],
+      budget: 30000,
+      cost: 30000,
       co2Reduction: 1.4,
       totalWorksHours: 10,
-      totalValueIncrease: 10000 * 1.2,
+      totalValueIncrease: 30000 * 1.2,
+      rentalYieldIncrease: 30000 * 0.002,
+      properties: generateProperties(10000, "6") as Property[],
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0857",
       title: "Portfolio 7",
       budget: 33000,
-      properties: [],
+      cost: 33000,
       co2Reduction: 10.4,
       totalWorksHours: 25,
       totalValueIncrease: 33000 * 1.2,
+      rentalYieldIncrease: 33000 * 0.002,
+      properties: generateProperties(33000, "7") as Property[],
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0858",
       title: "Portfolio 8",
       budget: 670000,
-      properties: [],
+      cost: 670000,
       co2Reduction: 4.5,
       totalWorksHours: 65,
       totalValueIncrease: 670000 * 1.2,
+      rentalYieldIncrease: 670000 * 0.002,
+      properties: generateProperties(670000, "8") as Property[],
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0859",
       title: "Portfolio 9",
       budget: 240000,
-      properties: [],
+      cost: 240000,
       co2Reduction: 8.4,
       totalWorksHours: 40,
       totalValueIncrease: 240000 * 1.2,
+      rentalYieldIncrease: 240000 * 0.002,
+      properties: generateProperties(240000, "9") as Property[],
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0860",
       title: "Portfolio 10",
       budget: 93000,
-      properties: [],
+      cost: 93000,
       co2Reduction: 5.4,
       totalWorksHours: 18,
       totalValueIncrease: 93000 * 1.2,
+      rentalYieldIncrease: 93000 * 0.002,
+      properties: generateProperties(93000, "10") as Property[],
     },
   ];
   const demo_id = "f290f1ee-6c54-4b01-90e6-d701748f0851";
@@ -127,9 +215,11 @@ export default async function Page({
   let co2Reduction: number;
   let totalWorksHours: number;
   let totalValueIncrease: number;
+  let rentalYieldIncrease: number;
+  let totalCost: number;
   if (params.slug === demo_id) {
     page_config = {
-      properties: [],
+      properties: [] as Property[],
       ...searchParams,
     };
     pageName = searchParams.name;
@@ -137,6 +227,8 @@ export default async function Page({
     co2Reduction = 0;
     totalWorksHours = 0;
     totalValueIncrease = 0;
+    rentalYieldIncrease = 0;
+    totalCost = 0;
   } else {
     page_config = Portfolios.filter((portfolio) => {
       return portfolio.id == params.slug;
@@ -146,12 +238,12 @@ export default async function Page({
     co2Reduction = page_config.co2Reduction as number;
     totalWorksHours = page_config.totalWorksHours as number;
     totalValueIncrease = page_config.totalValueIncrease as number;
+    rentalYieldIncrease = page_config.rentalYieldIncrease as number;
+    totalCost = page_config.cost as number;
   }
 
   // TODO: Put this back in for demo
-  // const properties = page_config.properties;
-
-  const properties: [] = [];
+  const properties = page_config.properties;
 
   // TODO: Add the porfolio summary information on the left
   //       Add an empty state for when there are no properties
@@ -171,6 +263,7 @@ export default async function Page({
                 Budget: {budget || "Not Set"}
                 <PencilSquareIcon className="h-6 w-6 ml-2" />
               </li>
+              <li className="px-2 mb-2">Total Cost: £{totalCost}</li>
               <li className="px-2 mb-2">
                 Number of properties: {properties.length}
               </li>
@@ -184,12 +277,19 @@ export default async function Page({
                 Total Value Increase: £{totalValueIncrease}
               </li>
               <li className="px-2 mb-2">
-                Annual Value Increase: £{totalValueIncrease}
+                Annual rental yield Increase: £{rentalYieldIncrease}
               </li>
             </ul>
           </div>
           <div className="col-span-3 bg-white">
-            {properties ? <EmptyPropertyState /> : "Implement me"}
+            {properties.length === 0 ? (
+              <EmptyPropertyState />
+            ) : (
+              <Propertycards
+                properties={properties}
+                portfolioId={params.slug}
+              />
+            )}
           </div>
           <div className="col-span-1 flex justify-center">
             <AddNew portfolioId={demo_id} />
diff --git a/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx b/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx
index 897ef98..d5f39d0 100644
--- a/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx
+++ b/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx
@@ -121,6 +121,19 @@ export default function Plan({
     },
   ];
 
+  const demo_ids = [
+    "d290f1ee-6c54-4b01-90e6-d701748f0851",
+    "d290f1ee-6c54-4b01-90e6-d701748f0852",
+    "d290f1ee-6c54-4b01-90e6-d701748f0853",
+    "d290f1ee-6c54-4b01-90e6-d701748f0854",
+    "d290f1ee-6c54-4b01-90e6-d701748f0855",
+    "d290f1ee-6c54-4b01-90e6-d701748f0856",
+    "d290f1ee-6c54-4b01-90e6-d701748f0857",
+    "d290f1ee-6c54-4b01-90e6-d701748f0858",
+    "d290f1ee-6c54-4b01-90e6-d701748f0859",
+    "d290f1ee-6c54-4b01-90e6-d701748f0860",
+  ];
+
   // Manage state of the selected parts - start with partsConfig
   const [parts, setParts] = useState<Part[]>(partsConfig);
 
@@ -148,18 +161,139 @@ export default function Plan({
     router.push(`/portfolio/${portfolioId}/error`);
   }
 
-  const { data, error, isLoading } = useQuery<SearchData, Error>({
+  // For the demo, we want to disable this query if the portfolioId is in the demo_ids array
+  const {
+    data: dataResponse,
+    error,
+    isLoading,
+  } = useQuery<SearchData, Error>({
     queryKey: ["search", postcode],
     queryFn: async () => fetchData(postcode as string),
+    enabled: !demo_ids.includes(portfolioId),
   });
 
+  // We'll be able to delete this after the demo
+  let isLoadingCheck;
+  let errorCheck;
+  let data: SearchData;
+  if (demo_ids.includes(portfolioId)) {
+    // For the demo, if the demo_ids include the portfolio id we're looking at, we don't pull the property data
+    // we use a pre-canned config
+    isLoadingCheck = false;
+    errorCheck = null;
+    data = {
+      "columns-names": [],
+      rows: [
+        {
+          "low-energy-fixed-light-count": "0",
+          address: "demo address",
+          "uprn-source": "demo",
+          "floor-height": "demo",
+          "heating-cost-potential": "demo",
+          "unheated-corridor-length": "demo",
+          "hot-water-cost-potential": "demo",
+          "construction-age-band": "demo",
+          "potential-energy-rating": "demo",
+          "mainheat-energy-eff": "demo",
+          "windows-env-eff": "demo",
+          "lighting-energy-eff": "demo",
+          "environment-impact-potential": "demo",
+          "glazed-type": "demo",
+          "heating-cost-current": "demo",
+          address3: "demo",
+          "mainheatcont-description": "demo",
+          "sheating-energy-eff": "demo",
+          "property-type": "demo",
+          "local-authority-label": "demo",
+          "fixed-lighting-outlets-count": "demo",
+          "energy-tariff": "demo",
+          "mechanical-ventilation": "demo",
+          "hot-water-cost-current": "demo",
+          county: "demo",
+          postcode: "demo",
+          "solar-water-heating-flag": "demo",
+          constituency: "demo",
+          "co2-emissions-potential": "demo",
+          "number-heated-rooms": "demo",
+          "floor-description": "demo",
+          "energy-consumption-potential": "demo",
+          "local-authority": "demo",
+          "built-form": "demo",
+          "number-open-fireplaces": "demo",
+          "windows-description": "demo",
+          "glazed-area": "demo",
+          "inspection-date": "demo",
+          "mains-gas-flag": "demo",
+          "co2-emiss-curr-per-floor-area": "demo",
+          address1: "demo",
+          "heat-loss-corridor": "demo",
+          "flat-storey-count": "demo",
+          "constituency-label": "demo",
+          "roof-energy-eff": "demo",
+          "total-floor-area": "demo",
+          "building-reference-number": "demo",
+          "environment-impact-current": "demo",
+          "co2-emissions-current": "demo",
+          "roof-description": "demo",
+          "floor-energy-eff": "demo",
+          "number-habitable-rooms": "demo",
+          address2: "demo",
+          "hot-water-env-eff": "demo",
+          posttown: "demo",
+          "mainheatc-energy-eff": "demo",
+          "main-fuel": "demo",
+          "lighting-env-eff": "demo",
+          "windows-energy-eff": "demo",
+          "floor-env-eff": "demo",
+          "sheating-env-eff": "demo",
+          "lighting-description": "demo",
+          "roof-env-eff": "demo",
+          "walls-energy-eff": "demo",
+          "photo-supply": "demo",
+          "lighting-cost-potential": "demo",
+          "mainheat-env-eff": "demo",
+          "multi-glaze-proportion": "demo",
+          "main-heating-controls": "demo",
+          "lodgement-datetime": "demo",
+          "flat-top-storey": "demo",
+          "current-energy-rating": "D",
+          "secondheat-description": "demo",
+          "walls-env-eff": "demo",
+          "transaction-type": "demo",
+          uprn: "demo",
+          "current-energy-efficiency": "demo",
+          "energy-consumption-current": "demo",
+          "mainheat-description": "demo",
+          "lighting-cost-current": "demo",
+          "lodgement-date": "demo",
+          "extension-count": "demo",
+          "mainheatc-env-eff": "demo",
+          "lmk-key": lmkKey,
+          "wind-turbine-count": "demo",
+          tenure: "demo",
+          "floor-level": "demo",
+          "potential-energy-efficiency": "demo",
+          "hot-water-energy-eff": "demo",
+          "low-energy-lighting": "demo",
+          "walls-description": "demo",
+          "hotwater-description": "demo",
+        },
+      ],
+    };
+  } else {
+    isLoadingCheck = isLoading;
+    errorCheck = error;
+    data = dataResponse as SearchData;
+  }
+
   // TODO: Add a loading state and error handling
-  if (isLoading) {
+  if (isLoadingCheck) {
     return <div>Loading...</div>;
   }
 
-  if (error) {
-    return <div>Error fetching data: {error.message}</div>;
+  console.log(errorCheck);
+  if (errorCheck) {
+    return <div>Error fetching data: {errorCheck.message}</div>;
   }
 
   const propertyData = data.rows.filter((row) => row["lmk-key"] === lmkKey)[0];