diff --git a/frontend/src/api.js b/frontend/src/api.js
index 313fb92..b79d2a0 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -1,42 +1,33 @@
+import DataUtils from "./utils";
+
 class Api {
-	static async getAddresses(fields = []) {
-		const addressNames = await frappe.db.get_list("Address", { fields });
-		console.log("DEBUG: API - Fetched Address list: ", addressNames);
-		return addressNames;
-	}
-
-	static async getDetailedAddress(name) {
-		const address = await frappe.db.get_doc("Address", name);
-		console.log("DEBUG: API - Fetched Detailed Address: ", address);
-		return address;
-	}
-
-	static async getCustomerList(fields = []) {
-		const customers = await frappe.db.get_list("Customer", { fields });
-		console.log("DEBUG: API - Fetched Customer list: ", customers);
-		return customers;
-	}
-
-	static async getDetailedCustomer(name) {
-		const customer = await frappe.db.get_doc("Customer", name);
-		console.log("DEBUG: API - Fetched Detailed Customer: ", customer);
-		return customer;
-	}
-
 	static async getClientDetails() {
-		const data = [];
-		const addresses = await this.getAddresses();
-		for (const addr of addresses) {
-			const clientDetail = {};
-			const fullAddress = await this.getDetailedAddress(addr["name"] || addr["Name"]);
-			const customer = await this.getDetailedCustomer(fullAddress["links"][0]["link_name"]);
-			clientDetail.customer = customer;
-			clientDetail.address = fullAddress;
-			data.push(clientDetail);
-		}
-		console.log("DEBUG: API - Fetched Client Details: ", data);
+		// const data = [];
+		// const addresses = await this.getDocsList("Address");
+		// for (const addr of addresses) {
+		// 	const clientDetail = {};
+		// 	const fullAddress = await this.getDetailedDoc("Address", addr["name"] || addr["Name"]);
+		// 	const customer = await this.getDetailedCustomer(fullAddress["links"][0]["link_name"]);
+		// 	clientDetail.customer = customer;
+		// 	clientDetail.address = fullAddress;
+		// 	data.push(clientDetail);
+		// }
+		// console.log("DEBUG: API - Fetched Client Details: ", data);
+		const data = DataUtils.dummyClientData;
 		return data;
 	}
+
+	static async getDocsList(doctype, fields = []) {
+		const docs = await frappe.db.get_list(doctype, { fields });
+		console.log(`DEBUG: API - Fetched ${doctype} list: `, docs);
+		return docs;
+	}
+
+	static async getDetailedDoc(doctype, name) {
+		const doc = await frappe.db.get_doc(doctype, name);
+		console.log(`DEBUG: API - Fetched Detailed ${doctype}: `, doc);
+		return doc;
+	}
 }
 
 export default Api;
diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
index 2b5a30e..1a182b8 100644
--- a/frontend/src/components/DataTable.vue
+++ b/frontend/src/components/DataTable.vue
@@ -1,4 +1,4 @@
-<template lang="">
+<template lang="html">
 	<div id="paging-controls">
 		<p>Show rows:</p>
 		<button class="page-num-button">25</button>
@@ -7,11 +7,35 @@
 		<button class="page-turn-button">Prev</button>
 		<button class="page-turn-button">Next</button>
 	</div>
-	<div ref="dataTableContainer"></div>
+	<div>
+		<DataTable :value="data">
+			<Column
+				v-for="col in columns"
+				:key="col.fieldName"
+				:field="col.fieldName"
+				:header="col.label"
+			>
+				<template #body="slotProps">
+					<template v-if="col.type === 'status'">
+						<Badge
+							:value="slotProps.data[col.fieldName]"
+							:severity="getBadgeColor(slotProps.data[col.fieldName])"
+							:size="large"
+						/>
+					</template>
+					<template v-else>
+						{{ slotProps.data[col.fieldName] }}
+					</template>
+				</template>
+			</Column>
+		</DataTable>
+	</div>
 </template>
 <script setup>
-import { defineProps, ref, onMounted } from "vue";
-const dataTableContainer = ref(null);
+import { defineProps } from "vue";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import Badge from "primevue/badge";
 const props = defineProps({
 	columns: {
 		type: Array,
@@ -22,22 +46,30 @@ const props = defineProps({
 		required: true,
 	},
 });
-
-onMounted(() => {
-	console.log(dataTableContainer);
-	if (!dataTableContainer.value) {
-		console.error("Datatable container not found!");
-		return;
+const getBadgeColor = (status) => {
+	console.log("DEBUG: - getBadgeColor status", status);
+	switch (status?.toLowerCase()) {
+		case "completed":
+			return "success"; // green
+		case "in progress":
+		case "warn":
+			return "warning"; // yellow
+		case "not started":
+			return "danger"; // red
+		default:
+			return "info"; // blue fallback
 	}
+};
+console.log("DEBUG: - DataTable props.columns", props.columns);
+console.log("DEBUG: - DataTable props.data", props.data);
 
-	const columnsList = props.columns.map((col) => col.label);
-	const dataList = props.data.map((row) => props.columns.map((col) => row[col.fieldName] || ""));
+// const columnsList = props.columns.map((col) => col.label);
+// const dataList = props.data.map((row) => props.columns.map((col) => row[col.fieldName] || ""));
 
-	// Pass the actual DOM element
-	new frappe.DataTable(dataTableContainer.value, {
-		columns: columnsList,
-		data: dataList,
-	});
-});
+// Pass the actual DOM element
+// new frappe.DataTable(dataTableContainer.value, {
+// 	columns: columnsList,
+// 	data: dataList,
+// });
 </script>
 <style lang=""></style>
diff --git a/frontend/src/components/pages/Clients.vue b/frontend/src/components/pages/Clients.vue
index d4ed599..cb9a8dc 100644
--- a/frontend/src/components/pages/Clients.vue
+++ b/frontend/src/components/pages/Clients.vue
@@ -9,7 +9,7 @@
 				Add
 			</button>
 		</div>
-		<DataTable v-if="tableData.length > 0" :data="tableData" :columns="columns" />
+		<DataTable :data="tableData" :columns="columns" />
 	</div>
 </template>
 <script setup>
@@ -23,20 +23,25 @@ const onClick = () => {
 	frappe.new_doc("Customer");
 };
 
-const searchFields = { fields: ["full_name", "address", "email_id", "phone"] };
 const columns = [
-	{ label: "Name", fieldName: "full_name" },
-	{ label: "Location", fieldName: "address" },
-	{ label: "Type", fieldName: "contact_type" },
-	{ label: "Contact", fieldName: "full_name" },
-	{ label: "Email", fieldName: "email_id" },
-	{ label: "Phone", fieldName: "phone" },
+	{ label: "Name", fieldName: "fullName", type: "text" },
+	{ label: "Appt. Scheduled", fieldName: "appointmentScheduled", type: "status" },
+	{ label: "Estimate Sent", fieldName: "estimateSent", type: "status" },
+	{ label: "Payment Received", fieldName: "paymentReceived", type: "status" },
+	{ label: "Job Status", fieldName: "jobStatus", type: "status" },
 ];
 onMounted(async () => {
+	if (tableData.value.length > 0) {
+		return;
+	}
 	let data = await Api.getClientDetails();
-
-	console.log(data);
-	console.log(tableData.value);
+	// data = data.map((item) => [
+	// 	item.customer["customer_name"] || "",
+	// 	item.address["appointment_scheduled"] || "",
+	// 	item.address["estimate_sent"] || "",
+	// 	item.address["payment_received"] || "",
+	// 	item.address["job_status"] || "",
+	// ]);
 	tableData.value = data;
 });
 </script>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 8192e64..844fcbf 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -2,5 +2,6 @@ import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
 import router from "./router";
+import PrimeVue from "primevue/config";
 
-createApp(App).use(router).mount("#custom-ui-app");
+createApp(App).use(router).use(PrimeVue).mount("#custom-ui-app");
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
new file mode 100644
index 0000000..59c2338
--- /dev/null
+++ b/frontend/src/utils.js
@@ -0,0 +1,47 @@
+class DataUtils {
+	// static buildClientData(clients) {
+	//     const address = `${client["address"]["address_line_1"] || ""} ${client["address"]["address_line_2"] || ""} ${client["address"]["city"] || ""} ${client["address"]["state"] || ""}`.trim();
+	//     const clientName = `${client["customer"]["customer_name"] || "N/A"} ${address}`;
+	//     return clients.map((client) => [clientName, client.]
+	// }
+
+	static dummyClientData = [
+		{
+			fullName: "John Doe 123 Lane Dr Cityville, MN",
+			appointmentScheduled: "completed",
+			estimateSent: "pending",
+			paymentReceived: "not started",
+			jobStatus: "not started",
+		},
+		{
+			fullName: "Jane Smith 456 Oak St Townsville, CA",
+			appointmentScheduled: "pending",
+			estimateSent: "not started",
+			paymentReceived: "not started",
+			jobStatus: "not started",
+		},
+		{
+			fullName: "Mike Johnson 789 Pine Rd Villagetown, TX",
+			appointmentScheduled: "completed",
+			estimateSent: "completed",
+			paymentReceived: "pending",
+			jobStatus: "in progress",
+		},
+		{
+			fullName: "Emily Davis 321 Maple Ave Hamlet, FL",
+			appointmentScheduled: "not started",
+			estimateSent: "not started",
+			paymentReceived: "not started",
+			jobStatus: "not started",
+		},
+		{
+			fullName: "David Wilson 654 Cedar Blvd Borough, NY",
+			appointmentScheduled: "completed",
+			estimateSent: "completed",
+			paymentReceived: "completed",
+			jobStatus: "completed",
+		},
+	];
+}
+
+export default DataUtils;