diff --git a/app/components/graphs/UpfrontComparisonBarChart.tsx b/app/components/graphs/UpfrontComparisonBarChart.tsx
index c0f1cd6..77d48af 100644
--- a/app/components/graphs/UpfrontComparisonBarChart.tsx
+++ b/app/components/graphs/UpfrontComparisonBarChart.tsx
@@ -23,10 +23,14 @@ const chartConfig = {
     label: "Land",
     color: "hsl(var(--chart-1))",
   },
-  house: {
-    label: "House",
+  newHouse: {
+    label: "NewHouse",
     color: "hsl(var(--chart-2))",
   },
+  depreciatedHouse: {
+    label: "DepreciatedHouse",
+    color: "hsl(var(--chart-3))",
+  },
 } satisfies ChartConfig;
 
 import React from "react";
@@ -53,17 +57,17 @@ const UpfrontComparisonBarChart: React.FC<StackedBarChartProps> = ({
     {
       tenure: "market: purchase",
       land: data[0].marketPurchase,
-      house: data[1].marketPurchase,
+      newHouse: data[1].marketPurchase,
     },
     {
       tenure: "fairhold: land purchase",
       land: data[0].fairholdLandPurchase,
-      house: data[1].fairholdLandPurchase,
+      depreciatedHouse: data[2].fairholdLandPurchase,
     },
     {
       tenure: "fairhold: land rent",
       land: data[0].fairholdLandRent,
-      house: data[1].fairholdLandRent,
+      depreciatedHouse: data[2].fairholdLandRent,
     },
   ];
 
@@ -93,9 +97,15 @@ const UpfrontComparisonBarChart: React.FC<StackedBarChartProps> = ({
               radius={[0, 0, 4, 4]}
             />
             <Bar
-              dataKey="house"
+              dataKey="newHouse"
+              stackId="a"
+              fill="var(--color-newHouse)"
+              radius={[4, 4, 0, 0]}
+            />
+            <Bar
+              dataKey="depreciatedHouse"
               stackId="a"
-              fill="var(--color-house)"
+              fill="var(--color-depreciatedHouse)"
               radius={[4, 4, 0, 0]}
             />
           </BarChart>
diff --git a/app/components/graphs/UpfrontComparisonWrapper.tsx b/app/components/graphs/UpfrontComparisonWrapper.tsx
index edcf339..7d0daca 100644
--- a/app/components/graphs/UpfrontComparisonWrapper.tsx
+++ b/app/components/graphs/UpfrontComparisonWrapper.tsx
@@ -27,17 +27,23 @@ const UpfrontComparisonWrapper: React.FC<UpfrontComparisonWrapperProps> = ({
   const formatData = (household: Household) => {
     return [
       {
-        category: "Land price",
+        category: "LandPrice",
         marketPurchase: household.property.landPrice || 0,
         fairholdLandPurchase:
           household.tenure.fairholdLandPurchase?.discountedLandPrice || 0,
         fairholdLandRent: 0,
       },
       {
-        category: "House price",
+        category: "NewHouse price",
         marketPurchase:
           household.property.averageMarketPrice -
             household.property.landPrice || 0,
+        fairholdLandPurchase: 0,
+        fairholdLandRent: 0,
+      },
+      {
+        category: "DepreciatedHouse price",
+        marketPurchase: 0,
         fairholdLandPurchase: household.property.depreciatedBuildPrice || 0,
         fairholdLandRent: household.property.depreciatedBuildPrice || 0,
       },
diff --git a/package-lock.json b/package-lock.json
index 704000a..9034766 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "react-dom": "^18",
         "react-hook-form": "^7.53.1",
         "react-spinners": "^0.14.1",
+        "recharts": "^2.13.3",
         "tailwind-merge": "^2.5.4",
         "tailwindcss-animate": "^1.0.7",
         "ts-node": "^10.9.2",
@@ -9733,6 +9734,50 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.14.1.tgz",
+      "integrity": "sha512-xtWulflkA+/xu4/QClBdtZYN30dbvTHjxjkh5XTMrH/CQ3WGDDPHHa/LLKCbgoqz0z3UaSH2/blV1i6VNMeh1g==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.0",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "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"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "license": "MIT",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/recharts/node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
+    "node_modules/recharts/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",