diff --git a/custom_ui/commands.py b/custom_ui/commands.py
index aebb741..43f5960 100644
--- a/custom_ui/commands.py
+++ b/custom_ui/commands.py
@@ -2,7 +2,7 @@ import click
 import os
 import subprocess
 import frappe
-from custom_ui.utils import create_module, create_customer_info_doctype
+from custom_ui.utils import create_module
 
 @click.command("build-frontend")
 @click.option("--site", default=None, help="Site to build frontend for")
@@ -55,9 +55,4 @@ def create_module_command():
     create_module()
     click.echo("✅ Custom UI module created or already exists.")
 
-@click.command("create-customer-info-doctype")
-def create_customer_info_doctype_command():
-    create_customer_info_doctype()
-    click.echo("✅ Customer Info doctype created or already exists.")
-
-commands = [build_frontend, create_module_command, create_customer_info_doctype_command]
\ No newline at end of file
+commands = [build_frontend, create_module_command]
\ No newline at end of file
diff --git a/frontend/src/api.js b/frontend/src/api.js
new file mode 100644
index 0000000..313fb92
--- /dev/null
+++ b/frontend/src/api.js
@@ -0,0 +1,42 @@
+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);
+		return data;
+	}
+}
+
+export default Api;
diff --git a/frontend/src/components/pages/Clients.vue b/frontend/src/components/pages/Clients.vue
index 8e5a030..d4ed599 100644
--- a/frontend/src/components/pages/Clients.vue
+++ b/frontend/src/components/pages/Clients.vue
@@ -15,6 +15,7 @@
 <script setup>
 import { onMounted, ref } from "vue";
 import DataTable from "../DataTable.vue";
+import Api from "../../api";
 
 const tableData = ref([]);
 
@@ -32,9 +33,11 @@ const columns = [
 	{ label: "Phone", fieldName: "phone" },
 ];
 onMounted(async () => {
-	let data = await frappe.db.get_list("Contact", searchFields);
+	let data = await Api.getClientDetails();
+
 	console.log(data);
+	console.log(tableData.value);
 	tableData.value = data;
 });
 </script>
-<style lang=""></style>
+<style lang="css"></style>