diff --git a/app/components/graphs/UpfrontComparisonBarChart.tsx b/app/components/graphs/UpfrontComparisonBarChart.tsx
new file mode 100644
index 0000000..85c4eb3
--- /dev/null
+++ b/app/components/graphs/UpfrontComparisonBarChart.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+
+const chartConfig = {
+  land: {
+    label: "Land",
+    color: "hsl(var(--chart-1))",
+  },
+  house: {
+    label: "House",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig;
+
+import React from "react";
+
+// Define type for DataInput
+type DataInput = {
+  category: string;
+  marketPurchase: number;
+  fairholdLandPurchase: number;
+  fairholdLandRent: number;
+  [key: string]: string | number;
+};
+
+// Define the props type for StackedBarChart
+interface StackedBarChartProps {
+  data: DataInput[];
+}
+
+// Implementation of the Chart.js Stacked Bar Chart
+const UpfrontComparisonBarChart: React.FC<StackedBarChartProps> = ({
+  data,
+}) => {
+  const chartData = [
+    {
+      tenure: "market: purchase",
+      land: data[0].marketPurchase,
+      house: data[1].marketPurchase,
+    },
+    {
+      tenure: "fairhold: land purchase",
+      land: data[0].fairholdLandPurchase,
+      house: data[1].fairholdLandPurchase,
+    },
+    {
+      tenure: "fairhold: land rent",
+      land: data[0].fairholdLandRent,
+      house: data[1].fairholdLandRent,
+    },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tenure comparison</CardTitle>
+        <CardDescription>Monthly cost in £</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="tenure"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value}
+            />
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="land"
+              stackId="a"
+              fill="var(--color-land)"
+              radius={[0, 0, 4, 4]}
+            />
+            <Bar
+              dataKey="house"
+              stackId="a"
+              fill="var(--color-house)"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="leading-none text-muted-foreground">
+          Showing the upfront cost.
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default UpfrontComparisonBarChart;
diff --git a/app/components/graphs/UpfrontComparisonWrapper.tsx b/app/components/graphs/UpfrontComparisonWrapper.tsx
new file mode 100644
index 0000000..edcf339
--- /dev/null
+++ b/app/components/graphs/UpfrontComparisonWrapper.tsx
@@ -0,0 +1,59 @@
+"use client";
+import React from "react";
+import ErrorBoundary from "../ErrorBoundary";
+import { Household } from "@/app/models/Household";
+import UpfrontComparisonBarChart from "./UpfrontComparisonBarChart";
+
+interface UpfrontComparisonWrapperProps {
+  household: Household;
+  mortgageLand?: number;
+  averageRentLand?: number;
+  socialRentMonthlyLand?: number;
+  mortgageFairholdLandPurchase?: number;
+  fairholdLandRent?: number;
+  mortgageHouse?: number;
+  mortgageDepreciatedHouse?: number;
+  averageRentHouse?: number;
+  socialRentMonthlyHouse?: number;
+}
+
+const UpfrontComparisonWrapper: React.FC<UpfrontComparisonWrapperProps> = ({
+  household,
+}) => {
+  if (!household) {
+    return <div>No household data available</div>;
+  }
+
+  const formatData = (household: Household) => {
+    return [
+      {
+        category: "Land price",
+        marketPurchase: household.property.landPrice || 0,
+        fairholdLandPurchase:
+          household.tenure.fairholdLandPurchase?.discountedLandPrice || 0,
+        fairholdLandRent: 0,
+      },
+      {
+        category: "House price",
+        marketPurchase:
+          household.property.averageMarketPrice -
+            household.property.landPrice || 0,
+        fairholdLandPurchase: household.property.depreciatedBuildPrice || 0,
+        fairholdLandRent: household.property.depreciatedBuildPrice || 0,
+      },
+    ];
+  };
+
+  const formattedData = formatData(household);
+
+  return (
+    <ErrorBoundary>
+      <div>
+        <h2>Tenure Comparison Chart</h2>
+        <UpfrontComparisonBarChart data={formattedData} />
+      </div>
+    </ErrorBoundary>
+  );
+};
+
+export default UpfrontComparisonWrapper;
diff --git a/app/components/ui/Dashboard.tsx b/app/components/ui/Dashboard.tsx
index d1961b7..2e23393 100644
--- a/app/components/ui/Dashboard.tsx
+++ b/app/components/ui/Dashboard.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import TenureComparisonWrapper from "../graphs/TenureComparisonWrapper";
+import UpfrontComparisonWrapper from "../graphs/UpfrontComparisonWrapper";
 import TotalPaymentWrapper from "../graphs/TotalPaymentWrapper";
 import LifetimeMarketPurchaseWrapper from "../graphs/LifetimeMarketPurchaseWrapper";
 import LifetimeMarketRentWrapper from "../graphs/LifetimeMarketRentWrapper";
@@ -16,6 +17,7 @@ const Dashboard: React.FC<DashboardProps> = ({ data }) => {
     <div>
       <h1>Dashboard</h1>
       {/* Render multiple graph components here */}
+      <UpfrontComparisonWrapper household={data} />
       <TenureComparisonWrapper household={data} />
       <TotalPaymentWrapper household={data} />
       <LifetimeMarketPurchaseWrapper household={data} />