diff --git a/frontend/src/components/SideBar.vue b/frontend/src/components/SideBar.vue
index 91b10e2..0256b89 100644
--- a/frontend/src/components/SideBar.vue
+++ b/frontend/src/components/SideBar.vue
@@ -34,20 +34,20 @@ const createButtons = ref([
 	{
 		label: "Client",
 		command: () => {
-			modalStore.openModal("createClient");
+			router.push("/clients/new");
 		},
 	},
 	{
 		label: "On-Site Meeting",
 		command: () => {
-			modalStore.openModal("createOnsiteMeeting");
+			router.push("/onsitemeetings/new");
 		},
 	},
 	{
 		label: "Estimate",
 		command: () => {
 			//frappe.new_doc("Estimate");
-			modalStore.openModal("createEstimate");
+			router.push("/createEstimate/new");
 		},
 	},
 	{
diff --git a/frontend/src/components/pages/Client.vue b/frontend/src/components/pages/Client.vue
index 2c2eeef..5e24698 100644
--- a/frontend/src/components/pages/Client.vue
+++ b/frontend/src/components/pages/Client.vue
@@ -2,8 +2,20 @@
 	<div>{{ clientId }}</div>
 </template>
 <script setup>
+import { onMounted, ref } from "vue";
+const client = ref({});
 defineProps({
 	clientId: String,
 });
+
+onMounted(() => {
+	if (clientId === "new") {
+		// Logic for creating a new client
+		console.log("Creating a new client");
+	} else {
+		// Logic for fetching and displaying existing client data
+		console.log("Fetching data for client ID:", clientId);
+	}
+});
 </script>
 <style lang="css"></style>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index e83cff1..71cbf4f 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -18,7 +18,7 @@ const routes = [
 	},
 	{ path: "/calendar", component: Calendar },
 	{ path: "/clients", component: Clients },
-	{ path: "/clients/:id", component: Client, props: true },
+	{ path: "/clients/:clientName", component: Client, props: true },
 	{ path: "/jobs", component: Jobs },
 	{ path: "/routes", component: Routes },
 	{ path: "/create", component: Create },