diff --git a/frontend/src/components/common/TodoChart.vue b/frontend/src/components/common/TodoChart.vue
index 8f07255..b55b655 100644
--- a/frontend/src/components/common/TodoChart.vue
+++ b/frontend/src/components/common/TodoChart.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, nextTick, computed, onUnmounted} from "vue";
+import { ref, onMounted, watch, nextTick, computed, onUnmounted, toRaw} from "vue";
 import { Chart, registerables } from "chart.js";
 
 // Register Chart.js components
@@ -29,8 +29,7 @@ Chart.register(...registerables);
 
 const props = defineProps({
 	title: String,
-	todoNumber: Number,
-	completedNumber: Number,
+	categories: Object,
 	loading: {
 		type: Boolean,
 		default: false,
@@ -38,7 +37,7 @@ const props = defineProps({
 });
 
 //Constants
-const categories = ["To-do", "Completed"];
+//const categories = ["To-do", "Completed"];
 
 //Reactive data
 const centerData = ref(null);
@@ -56,21 +55,19 @@ const getHoveredCategoryIndex = () => {
 }
 
 const getCategoryValue = (categoryIndex) => {
-	if (categoryIndex === 0) {
-		return props.todoNumber
-	} else {
-		return props.completedNumber
-	}
+	return props.categories.data[categoryIndex];
 }
 
 const getChartData = () => {
+	const categoryData = props.categories.data;
+	const categoryColors = props.categories.colors;
 	const chartData = {
 		name: props.title,
 		datasets: [
 			{
 				label: "",
-				data: [props.todoNumber, props.completedNumber],
-				backgroundColor: ["#b22222", "#4caf50"]
+				data: categoryData,
+				backgroundColor: categoryColors
 			},
 		]
 	};
@@ -79,8 +76,11 @@ const getChartData = () => {
 
 
 const updateCenterData = () => {
-	const total = props.todoNumber + props.completedNumber;
-	const todos = props.todoNumber;
+	let total = 0;
+	for (let i=0; i<props.categories.data.length; i++) {
+		total += props.categories.data[i];
+	}
+	const todos = props.categories.data[0];
 
 	if (todos === 0 && total > 0) {
 		centerData.value = {
@@ -107,14 +107,14 @@ const updateCenterData = () => {
 		const percentage = total > 0 ? ((value / total) * 100).toFixed(1) + "%" : "0%";
 
 		centerData.value = {
-			label: categories[hoveredCategoryIndex],
+			label: props.categories.labels[hoveredCategoryIndex],
 			value: value,
 			percentage: percentage,
 		};
 	} else {
 		centerData.value = {
 			label: "To-do",
-			value: props.todoNumber,
+			value: todos,
 			percentage: null,
 		};
 	}
@@ -180,8 +180,6 @@ const getChartOptions = () => {
 const createChart = () => {
 	if (!chartCanvas.value || props.loading) return;
 
-	console.log(`DEBUG: Creating chart for ${props.title}`);
-	console.log(props);
 
 	const ctx = chartCanvas.value.getContext("2d");
 	if (chartInstance.value) {
@@ -214,9 +212,9 @@ onMounted(() => {
 	createChart();
 });
 
-watch(() => props.completedNumber, (newValue) => {
+watch(() => props.categories, (newValue) => {
 	updateChart();
-});
+}, {deep: true});
 
 </script>
 
diff --git a/frontend/src/components/pages/Home.vue b/frontend/src/components/pages/Home.vue
index d1ecda7..d5e0621 100644
--- a/frontend/src/components/pages/Home.vue
+++ b/frontend/src/components/pages/Home.vue
@@ -15,8 +15,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Locates"
-								:todoNumber="chartData.locates.todo"
-								:completedNumber="chartData.locates.done"
+								:categories="chartData.locates"
 								>
 						</TodoChart>
 						<button class="sidebar-button" @click="navigateTo('/tasks?subject=Locate')">
@@ -37,8 +36,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Permits"
-								:todoNumber="chartData.permits.todo"
-								:completedNumber="chartData.permits.done"
+								:categories="chartData.permits"
 								>
 						</TodoChart>
 						<button class="sidebar-button" @click="navigateTo('/tasks?subject=Permit')">
@@ -59,8 +57,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Permit Finalization"
-								:todoNumber="permitFinalizationsTodoNumber"
-								:completedNumber="permitFinalizationsCompletedNumber"
+								:categories="chartData.permitFinalizations"
 								>
 						</TodoChart>
 						<button class="sidebar-button" @click="navigateTo('/jobs')">
@@ -81,8 +78,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Warranty Claims"
-								:todoNumber="warrantyTodoNumber"
-								:completedNumber="warrantyCompletedNumber"
+								:categories="chartData.warranties"
 								>
 						</TodoChart>
 						<button class="sidebar-button" @click="navigateTo('/jobs')">
@@ -103,8 +99,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Incomplete Bids"
-								:todoNumber="bidsTodoNumber"
-								:completedNumber="bidsCompletedNumber"
+								:categories="chartData.bids"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -126,8 +121,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Unapproved Estimates"
-								:todoNumber="estimatesTodoNumber"
-								:completedNumber="estimatesCompletedNumber"
+								:categories="chartData.estimates"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -149,8 +143,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Half Down Payments"
-								:todoNumber="halfDownTodoNumber"
-								:completedNumber="halfDownCompletedNumber"
+								:categories="chartData.halfDown"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -172,8 +165,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="15 Day Follow Ups"
-								:todoNumber="fifteenDayTodoNumber"
-								:completedNumber="fifteenDayCompletedNumber"
+								:categories="chartData.fifteenDayFollowups"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -195,8 +187,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Late Balances"
-								:todoNumber="balancesTodoNumber"
-								:completedNumber="balancesCompletedNumber"
+								:categories="chartData.lateBalances"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -218,8 +209,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Backflow Tests"
-								:todoNumber="backflowsTodoNumber"
-								:completedNumber="backflowsCompletedNumber"
+								:categories="chartData.backflows"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -241,8 +231,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Curbing"
-								:todoNumber="chartData.curbing.todo"
-								:completedNumber="chartData.curbing.done"
+								:categories="chartData.curbing"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -264,8 +253,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Hydroseeding"
-								:todoNumber="chartData.hydroseed.todo"
-								:completedNumber="chartData.hydroseed.done"
+								:categories="chartData.hydroseed"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -287,8 +275,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Machines"
-								:todoNumber="machinesTodoNumber"
-								:completedNumber="machinesCompletedNumber"
+								:categories="chartData.machines"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -310,8 +297,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Deliveries"
-								:todoNumber="deliveriesTodoNumber"
-								:completedNumber="delivieriesCompletedNumber"
+								:categories="chartData.deliveries"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -342,6 +328,8 @@ import TodoChart from "../common/TodoChart.vue";
 
 const router = useRouter();
 
+const defaultColors = ['blue', 'green', 'red'];
+
 // Dummy data from utils
 const clientData = ref(DataUtils.dummyClientData);
 const jobData = ref(DataUtils.dummyJobData);
@@ -355,10 +343,20 @@ const warrantyTodoNumber = ref(0);
 const warrantyCompletedNumber = ref(10);
 
 const chartData = ref({
-	locates: {todo: 0, done: 0},
-	permits: {todo: 0, done: 0},
-	curbing: {todo: 0, done: 0},
-	hydroseed: {todo: 0, done: 0},
+	locates: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
+	permits: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
+	curbing: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
+	hydroseed: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
+	permitFinalizations: {labels: ["Todo", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
+	warranties: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
+	bids: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
+	estimates: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
+	halfDown: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
+	fifteenDayFollowups: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
+	lateBalances: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
+	backflows: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
+	machines: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
+	deliveries: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
 });
 
 const notifications = useNotificationStore();
@@ -375,14 +373,14 @@ const navigateTo = (path) => {
 };
 onMounted(async() => {
 	notifications.addWarning("Dashboard metrics are based on dummy data for demonstration purposes. UPDATES COMING SOON!");
-	chartData.value.locates.todo = await Api.getTasksDue("Locate");
-	chartData.value.locates.done = await Api.getTasksCompleted("Locate");
-	chartData.value.permits.todo = await Api.getTasksDue("Permit");
-	chartData.value.permits.done = await Api.getTasksCompleted("Permit");
-	chartData.value.curbing.todo = await Api.getTasksDue("Curbing");
-	chartData.value.curbing.done = await Api.getTasksCompleted("Curbing");
-	chartData.value.hydroseed.todo = await Api.getTasksDue("Hydroseed");
-	chartData.value.hydroseed.done = await Api.getTasksCompleted("Hydroseed");
+	chartData.value.locates.data[0] = await Api.getTasksDue("Locate");
+	chartData.value.locates.data[1] = await Api.getTasksCompleted("Locate");
+	chartData.value.permits.data[0] = await Api.getTasksDue("Permit");
+	chartData.value.permits.data[1] = await Api.getTasksCompleted("Permit");
+	chartData.value.curbing.data[0] = await Api.getTasksDue("Curbing");
+	chartData.value.curbing.data[1] = await Api.getTasksCompleted("Curbing");
+	chartData.value.hydroseed.data[0] = await Api.getTasksDue("Hydroseed");
+	chartData.value.hydroseed.data[1] = await Api.getTasksCompleted("Hydroseed");
 });
 </script>