diff --git a/frontend/src/components/pages/Jobs.vue b/frontend/src/components/pages/Jobs.vue
index d5dfb7c..70868e9 100644
--- a/frontend/src/components/pages/Jobs.vue
+++ b/frontend/src/components/pages/Jobs.vue
@@ -1,6 +1,101 @@
 <template>
-	<div>
+	<div class="page-container">
 		<h2>Jobs</h2>
+		<!-- Todo Chart Section -->
+		<div class = "widgets-grid">
+			<!-- Jobs in Queue Widget -->
+			<Card>
+				<template #header>
+					<div class="widget-header">
+						<Hammer class="widget-icon" />
+						<h3>Jobs In Queue</h3>
+					</div>
+				</template>
+				<template #content>
+					<div class="widget-content">
+						<TodoChart
+								title="Jobs In Queue"
+								:todoNumber="jobQueueTodoNumber"
+								:completedNumber="jobQueueCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button"
+								@click="filterBy('in queue')">
+							View Queued Jobs
+						</button>
+					</div>
+				</template>
+			</Card>
+			<!-- Jobs In Progress Widget -->
+			<Card>
+				<template #header>
+					<div class="widget-header">
+						<Hammer class="widget-icon" />
+						<h3>Jobs In Progress</h3>
+					</div>
+				</template>
+				<template #content>
+					<div class="widget-content">
+						<TodoChart
+								title="Jobs in Progress"
+								:todoNumber="progressTodoNumber"
+								:completedNumber="progressCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button"
+								@click="filterBy('in progress')">
+							View Jobs In Progress
+						</button>
+					</div>
+				</template>
+			</Card>
+			<!-- Late Jobs Widget -->
+			<Card>
+				<template #header>
+					<div class="widget-header">
+						<Alarm class="widget-icon" />
+						<h3>Late Jobs</h3>
+					</div>
+				</template>
+				<template #content>
+					<div class="widget-content">
+						<TodoChart
+								title="Late Jobs"
+								:todoNumber="lateTodoNumber"
+								:completedNumber="lateCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button"
+								@click="filterBy('late')">
+							View Late Jobs
+						</button>
+					</div>
+				</template>
+			</Card>
+			<!-- Ready to Invoice Widget -->
+			<Card>
+				<template #header>
+					<div class="widget-header">
+						<CalendarCheck class="widget-icon" />
+						<h3>Ready To Invoice</h3>
+					</div>
+				</template>
+				<template #content>
+					<div class="widget-content">
+						<TodoChart
+								title="Ready To Invoice"
+								:todoNumber="invoiceTodoNumber"
+								:completedNumber="invoiceCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button"
+								@click="navigateTo('/invoices')">
+							View Ready To Invoice
+						</button>
+					</div>
+				</template>
+			</Card>
+		</div>
 		<DataTable
 			:data="tableData"
 			:columns="columns"
@@ -13,13 +108,17 @@
 	</div>
 </template>
 <script setup>
+import Card from "../common/Card.vue";
 import DataTable from "../common/DataTable.vue";
+import TodoChart from "../common/TodoChart.vue";
 import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import Api from "../../api";
 import { useLoadingStore } from "../../stores/loading";
 import { usePaginationStore } from "../../stores/pagination";
 import { useFiltersStore } from "../../stores/filters";
 import { useNotificationStore } from "../../stores/notifications-primevue";
+import { Alarm, CalendarCheck, Hammer } from "@iconoir/vue";
 
 const loadingStore = useLoadingStore();
 const paginationStore = usePaginationStore();
@@ -38,6 +137,15 @@ const columns = [
 	{ label: "Progress", fieldName: "percentComplete", type: "text", sortable: true },
 ];
 
+const router = useRouter();
+const navigateTo = (path) => {
+	router.push(path);
+};
+
+const filterBy = (filter) => {
+	console.log("DEBUG: Jobs filterBy not implemented yet.");
+};
+
 // Handle lazy loading events from DataTable
 const handleLazyLoad = async (event) => {
 	console.log("Jobs page - handling lazy load:", event);
@@ -169,4 +277,45 @@ onMounted(async () => {
 	// });
 });
 </script>
-<style lang=""></style>
+<style lang="css">
+.widgets-grid {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 20px;
+	margin-bottom: 20px;
+}
+.widget-header {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 20px 20px 0;
+}
+
+.widget-icon {
+	color: var(--theme-primary-strong);
+	width: 24px;
+	height: 24px;
+}
+
+.widget-header h3 {
+	margin: 0;
+	color: #2c3e50;
+	font-size: 1.2rem;
+}
+
+.widget-content {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	width: 200px;
+	align-items: center;
+	padding: 20px 20px 20px;
+	/*gap: 15px;*/
+}
+.page-container {
+	height: 100%;
+	margin: 20px;
+	gap: 20px;
+	background-color: transparent;
+}
+</style>