diff --git a/custom_ui/api/db/addresses.py b/custom_ui/api/db/addresses.py
new file mode 100644
index 0000000..17da89e
--- /dev/null
+++ b/custom_ui/api/db/addresses.py
@@ -0,0 +1,28 @@
+import frappe
+from custom_ui.db_utils import build_error_response, build_success_response
+
+@frappe.whitelist()
+def get_addresses(fields=["*"], filters={}):
+    """Get addresses with optional filtering."""
+    if isinstance(fields, str):
+        import json
+        fields = json.loads(fields)
+    if isinstance(filters, str):
+        import json
+        filters = json.loads(filters)
+    if fields[0] != "*" and len(fields) == 1:
+        pluck = fields[0]
+        fields = None
+    print(f"Getting addresses with fields: {fields} and filters: {filters} and pluck: {pluck}")
+    try:
+        addresses = frappe.get_all(
+            "Address",
+            fields=fields,
+            filters=filters,
+            order_by="address_line1 desc",
+            pluck=pluck
+        )
+        return build_success_response(addresses)
+    except Exception as e:
+        frappe.log_error(message=str(e), title="Get Addresses Failed")
+        return build_error_response(str(e), 500)
\ No newline at end of file
diff --git a/custom_ui/api/db/clients.py b/custom_ui/api/db/clients.py
index f21b811..a9d6baf 100644
--- a/custom_ui/api/db/clients.py
+++ b/custom_ui/api/db/clients.py
@@ -269,7 +269,9 @@ def upsert_client(data):
         
         # Check for existing address
         filters = {
-            "address_title": data.get("address_title"),
+            "address_line1": data.get("address_line1"),
+            "city": data.get("city"),
+            "state": data.get("state"),
         }
         existing_address = frappe.db.exists("Address", filters)
         print("Existing address check:", existing_address)
@@ -280,10 +282,10 @@ def upsert_client(data):
         address_doc = frappe.get_doc({
             "doctype": "Address",
             "address_line1": data.get("address_line1"),
+            "address_line2": data.get("address_line2"),
             "city": data.get("city"),
             "state": data.get("state"),
             "country": "United States",
-            "address_title": data.get("address_title"),
             "pincode": data.get("pincode"),
             "custom_customer_to_bill": customer_doc.name
         }).insert(ignore_permissions=True)
diff --git a/custom_ui/api/db/onsite_meetings.py b/custom_ui/api/db/onsite_meetings.py
new file mode 100644
index 0000000..d5fc705
--- /dev/null
+++ b/custom_ui/api/db/onsite_meetings.py
@@ -0,0 +1,130 @@
+import frappe
+import json
+from custom_ui.db_utils import build_error_response, build_success_response, process_filters, process_sorting
+
+@frappe.whitelist()
+def get_week_onsite_meetings(week_start, week_end):
+    """Get On-Site Meetings scheduled within a specific week."""
+    try:
+        meetings = frappe.db.get_all(
+            "On-Site Meeting",
+            fields=["*"],
+            filters=[
+                ["start_time", ">=", week_start],
+                ["start_time", "<=", week_end]
+            ],
+            order_by="start_time asc"
+        )
+        return build_success_response(meetings)
+    except Exception as e:
+        frappe.log_error(message=str(e), title="Get Week On-Site Meetings Failed")
+        return build_error_response(str(e), 500)
+
+@frappe.whitelist()
+def get_onsite_meetings(fields=["*"], filters={}):
+    """Get paginated On-Site Meetings with filtering and sorting support."""
+    try:
+        print("DEBUG: Raw onsite meeting options received:", filters)
+        
+        processed_filters = process_filters(filters)
+        
+        meetings = frappe.db.get_all(
+            "On-Site Meeting",
+            fields=fields,
+            filters=processed_filters,
+            order_by="creation desc"
+        )
+        
+        return build_success_response(
+            meetings
+        )
+    except Exception as e:
+        frappe.log_error(message=str(e), title="Get On-Site Meetings Failed")
+        return build_error_response(str(e), 500)
+    
+
+@frappe.whitelist()
+def get_unscheduled_onsite_meetings():
+    """Get On-Site Meetings that are unscheduled."""
+    try:
+        meetings = frappe.db.get_all(
+            "On-Site Meeting",
+            fields=["*"],
+            filters={"status": "Unscheduled"},
+            order_by="creation desc"
+        )
+        return build_success_response(meetings)
+    except Exception as e:
+        frappe.log_error(message=str(e), title="Get Unscheduled On-Site Meetings Failed")
+        return build_error_response(str(e), 500)
+    
+
+@frappe.whitelist()
+def create_onsite_meeting(address, notes=""):
+    """Create a new On-Site Meeting with Unscheduled status."""
+    try:
+        print(f"DEBUG: Creating meeting with address='{address}', notes='{notes}'")
+        
+        # Validate address parameter
+        if not address or address == "None" or not address.strip():
+            return build_error_response("Address is required and cannot be empty.", 400)
+        
+        # Get the address document name from the full address string
+        address_name = frappe.db.get_value("Address", filters={"full_address": address}, fieldname="name")
+        
+        print(f"DEBUG: Address lookup result: address_name='{address_name}'")
+        
+        if not address_name:
+            return build_error_response(f"Address '{address}' not found in the system.", 404)
+        
+        # Create the meeting with Unscheduled status
+        meeting = frappe.get_doc({
+            "doctype": "On-Site Meeting",
+            "address": address_name,
+            "notes": notes or "",
+            "status": "Unscheduled"
+        })
+        meeting.flags.ignore_permissions = True
+        meeting.insert(ignore_permissions=True)
+        frappe.db.commit()
+        
+        # Clear any auto-generated messages from Frappe
+        frappe.local.message_log = []
+        
+        print(f"DEBUG: Meeting created successfully: {meeting.name}")
+        
+        return build_success_response(meeting.as_dict())
+    except Exception as e:
+        frappe.log_error(message=str(e), title="Create On-Site Meeting Failed")
+        return build_error_response(str(e), 500)
+    
+@frappe.whitelist()
+def update_onsite_meeting(name, data):
+    """Update an existing On-Site Meeting."""
+    defualts = {
+        "address": None,
+        "start_time": None,
+        "end_time": None,
+        "notes": None,
+        "assigned_employee": None,
+        "completed_by": None
+    }
+    try:
+        if isinstance(data, str):
+            data = json.loads(data)
+            data = {**defualts, **data}
+        meeting = frappe.get_doc("On-Site Meeting", name)
+        for key, value in data.items():
+            if value is not None:
+                if key == "address":
+                    value = frappe.db.get_value("Address", {"full_address": value}, "name")
+                elif key in ["assigned_employee", "completed_by"]:
+                    value = frappe.db.get_value("Employee", {"employee_name": value}, "name")
+                meeting.set(key, value)
+        meeting.save()
+        return build_success_response(meeting.as_dict())
+    except frappe.DoesNotExistError:
+        return build_error_response(f"On-Site Meeting '{name}' does not exist.", 404)
+    except Exception as e:
+        return build_error_response(str(e), 500)
+                
\ No newline at end of file
diff --git a/custom_ui/events/onsite_meeting.py b/custom_ui/events/onsite_meeting.py
index 8c7bca0..839a7e4 100644
--- a/custom_ui/events/onsite_meeting.py
+++ b/custom_ui/events/onsite_meeting.py
@@ -2,8 +2,11 @@ import frappe
 
 def after_insert(doc, method):
     print(doc.address)
-    if doc.address:
-        address_name = frappe.db.get_value("Address", fieldname="name", filters={"address_line1": doc.address})
-        address_doc = frappe.get_doc("Address", address_name)
+    if doc.address and not doc.end_time and not doc.start_time:
+        address_doc = frappe.get_doc("Address", doc.address)
+        address_doc.custom_onsite_meeting_scheduled = "In Progress"
+        address_doc.save()
+    if doc.status == "Completed":
+        address_doc = frappe.get_doc("Address", doc.address)
         address_doc.custom_onsite_meeting_scheduled = "Completed"
         address_doc.save()
\ No newline at end of file
diff --git a/custom_ui/install.py b/custom_ui/install.py
index 69bdc72..cdcc50d 100644
--- a/custom_ui/install.py
+++ b/custom_ui/install.py
@@ -10,11 +10,14 @@ def after_install():
 
 def after_migrate():
     add_custom_fields()
+    update_onsite_meeting_fields()
     frappe.db.commit()
 
     # Proper way to refresh metadata
     frappe.clear_cache(doctype="Address")
     frappe.reload_doctype("Address")
+    frappe.clear_cache(doctype="On-Site Meeting")
+    frappe.reload_doctype("On-Site Meeting")
 
     update_address_fields()
     build_frontend()
@@ -111,6 +114,36 @@ def add_custom_fields():
                 default="Not Started", 
                 insert_after="job_status"
             )
+        ],
+        "On-Site Meeting": [
+            dict(
+                fieldname="notes",
+                label="Notes",
+                fieldtype="Small Text",
+                insert_after="address"
+                ),
+            dict(
+                fieldname="assigned_employee",
+                label="Assigned Employee",
+                fieldtype="Link",
+                options="Employee",
+                insert_after="notes"
+            ),
+            dict(
+                fieldname="status",
+                label="Status",
+                fieldtype="Select",
+                options="Unscheduled\nScheduled\nCompleted\nCancelled",
+                default="Unscheduled",
+                insert_after="start_time"
+            ),
+            dict(
+                fieldname="completed_by",
+                label="Completed By",
+                fieldtype="Link",
+                options="Employee",
+                insert_after="status"
+            )
         ]
     }
     
@@ -132,6 +165,35 @@ def add_custom_fields():
         print(f"❌ Error creating custom fields: {str(e)}")
         frappe.log_error(message=str(e), title="Custom Fields Creation Failed")
         raise
+
+def update_onsite_meeting_fields():
+    """Update On-Site Meeting doctype fields to make start_time and end_time optional."""
+    print("\n🔧 Updating On-Site Meeting doctype fields...")
+    
+    try:
+        # Get the doctype
+        doctype = frappe.get_doc("DocType", "On-Site Meeting")
+        
+        # Find and update start_time and end_time fields
+        updated_fields = []
+        for field in doctype.fields:
+            if field.fieldname in ['start_time', 'end_time']:
+                if field.reqd == 1:
+                    field.reqd = 0
+                    updated_fields.append(field.fieldname)
+        
+        if updated_fields:
+            # Save the doctype
+            doctype.save(ignore_permissions=True)
+            print(f"✅ Updated fields: {', '.join(updated_fields)} (set to not required)")
+        else:
+            print("✅ Fields already configured correctly")
+        
+        print("🔧 On-Site Meeting field update complete.\n")
+    except Exception as e:
+        print(f"❌ Error updating On-Site Meeting fields: {str(e)}")
+        frappe.log_error(message=str(e), title="On-Site Meeting Field Update Failed")
+        # Don't raise - this is not critical enough to stop migration
     
 def update_address_fields():
     addresses = frappe.get_all("Address", pluck="name")
@@ -214,14 +276,14 @@ def update_address_fields():
         job_status = "Not Started"
         payment_received = "Not Started"
         
-        onsite_meetings = frappe.get_all("On-Site Meeting", filters={"address": address.address_title})
+        onsite_meetings = frappe.get_all("On-Site Meeting", fields=["docstatus"],filters={"address": address.address_title})
         if onsite_meetings and onsite_meetings[0]:
-            onsite_meeting = "Completed"
+            onsite_meeting = "Completed" if onsite_meetings[0]["docstatus"] == 1 else "In Progress"
         
-        estimates = frappe.get_all("Quotation", fields=["custom_sent"], filters={"custom_installation_address": address.address_title})
-        if estimates and estimates[0] and estimates[0]["custom_sent"] == 1:
+        estimates = frappe.get_all("Quotation", fields=["custom_sent", "docstatus"], filters={"custom_installation_address": address.address_title})
+        if estimates and estimates[0] and estimates[0]["custom_sent"] == 1 and estimates[0]["docstatus"] == 1:
             estimate_sent = "Completed"
-        elif estimates and estimates[0]:
+        elif estimates and estimates[0] and estimates[0]["docstatus"] != 1:
             estimate_sent = "In Progress"
             
         jobs = frappe.get_all("Project", fields=["status"], filters={"custom_installation_address": address.address_title, "project_template": "SNW Install"})
diff --git a/frontend/src/api.js b/frontend/src/api.js
index c03e35c..7b6a5b2 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -2,12 +2,24 @@ import ApiUtils from "./apiUtils";
 import { useErrorStore } from "./stores/errors";
 
 const ZIPPOPOTAMUS_BASE_URL = "https://api.zippopotam.us/us";
+// Proxy method for external API calls
 const FRAPPE_PROXY_METHOD = "custom_ui.api.proxy.request";
+// Estimate methods
 const FRAPPE_UPSERT_ESTIMATE_METHOD = "custom_ui.api.db.estimates.upsert_estimate";
+// Job methods
 const FRAPPE_GET_JOBS_METHOD = "custom_ui.api.db.get_jobs";
 const FRAPPE_UPSERT_JOB_METHOD = "custom_ui.api.db.jobs.upsert_job";
+// Invoice methods
 const FRAPPE_UPSERT_INVOICE_METHOD = "custom_ui.api.db.invoices.upsert_invoice";
+// Warranty methods
 const FRAPPE_GET_WARRANTY_CLAIMS_METHOD = "custom_ui.api.db.warranties.get_warranty_claims";
+// On-Site Meeting methods
+const FRAPPE_GET_WEEK_ONSITE_MEETINGS_METHOD =
+	"custom_ui.api.db.onsite_meetings.get_week_onsite_meetings";
+const FRAPPE_GET_ONSITE_MEETINGS_METHOD = "custom_ui.api.db.onsite_meetings.get_onsite_meetings";
+// Address methods
+const FRAPPE_GET_ADDRESSES_METHOD = "custom_ui.api.db.addresses.get_addresses";
+// Client methods
 const FRAPPE_UPSERT_CLIENT_METHOD = "custom_ui.api.db.clients.upsert_client";
 const FRAPPE_GET_CLIENT_STATUS_COUNTS_METHOD = "custom_ui.api.db.clients.get_client_status_counts";
 const FRAPPE_GET_CLIENT_TABLE_DATA_METHOD = "custom_ui.api.db.clients.get_clients_table_data";
@@ -23,6 +35,7 @@ class Api {
 		try {
 			let response = await frappe.call(request);
 			response = ApiUtils.toCamelCaseObject(response);
+			response.method = frappeMethod;
 			console.log("DEBUG: API - Request Response: ", response);
 			if (response.message.status && response.message.status === "error") {
 				throw new Error(response.message.message);
@@ -35,6 +48,45 @@ class Api {
 		}
 	}
 
+	static async searchAddresses(searchTerm) {
+		const filters = {
+			full_address: ["like", `%${searchTerm}%`],
+		};
+		return await this.getAddresses(["full_address"], filters);
+	}
+
+	static async getAddresses(fields = ["*"], filters = {}) {
+		return await this.request(FRAPPE_GET_ADDRESSES_METHOD, { fields, filters });
+	}
+
+	static async getUnscheduledOnSiteMeetings() {
+		return await this.request(
+			"custom_ui.api.db.onsite_meetings.get_unscheduled_onsite_meetings",
+		);
+	}
+
+	static async getScheduledOnSiteMeetings(fields = ["*"], filters = {}) {
+		return await this.request(FRAPPE_GET_ONSITE_MEETINGS_METHOD, { fields, filters });
+	}
+
+	static async getWeekOnSiteMeetings(weekStart, weekEnd) {
+		return await this.request(FRAPPE_GET_WEEK_ONSITE_MEETINGS_METHOD, { weekStart, weekEnd });
+	}
+
+	static async updateOnSiteMeeting(name, data) {
+		return await this.request("custom_ui.api.db.onsite_meetings.update_onsite_meeting", {
+			name,
+			data,
+		});
+	}
+
+	static async createOnSiteMeeting(address, notes = "") {
+		return await this.request("custom_ui.api.db.onsite_meetings.create_onsite_meeting", {
+			address,
+			notes,
+		});
+	}
+
 	static async getClientStatusCounts(params = {}) {
 		return await this.request(FRAPPE_GET_CLIENT_STATUS_COUNTS_METHOD, params);
 	}
diff --git a/frontend/src/components/SideBar.vue b/frontend/src/components/SideBar.vue
index 29fa250..e28927c 100644
--- a/frontend/src/components/SideBar.vue
+++ b/frontend/src/components/SideBar.vue
@@ -12,6 +12,9 @@ import {
 	Clock,
 	HistoricShield,
 	Developer,
+	Neighbourhood,
+	Calculator,
+	ReceiveDollars,
 } from "@iconoir/vue";
 import SpeedDial from "primevue/speeddial";
 
@@ -37,7 +40,7 @@ const createButtons = ref([
 	{
 		label: "On-Site Meeting",
 		command: () => {
-			router.push("/onsitemeetings/new");
+			router.push("/schedule-onsite?new=true");
 		},
 	},
 	{
@@ -72,7 +75,10 @@ const categories = ref([
 	{ name: "Home", icon: Home, url: "/" },
 	{ name: "Calendar", icon: Calendar, url: "/calendar" },
 	{ name: "Clients", icon: Community, url: "/clients" },
+	{ name: "On-Site Meetings", icon: Neighbourhood, url: "/schedule-onsite" },
+	{ name: "Estimates", icon: Calculator, url: "/estimates" },
 	{ name: "Jobs", icon: Hammer, url: "/jobs" },
+	{ name: "Payments/Invoices", icon: ReceiveDollars, url: "/invoices" },
 	{ name: "Routes", icon: PathArrowSolid, url: "/routes" },
 	{ name: "Time Sheets", icon: Clock, url: "/timesheets" },
 	{ name: "Warranties", icon: HistoricShield, url: "/warranties" },
@@ -81,7 +87,7 @@ const categories = ref([
 		icon: MultiplePagesPlus,
 		buttons: createButtons,
 	},
-	{ name: "Development", icon: Developer, buttons: developmentButtons },
+	// { name: "Development", icon: Developer, buttons: developmentButtons },
 ]);
 const handleCategoryClick = (category) => {
 	router.push(category.url);
@@ -142,8 +148,11 @@ const handleCategoryClick = (category) => {
 }
 
 .button-icon {
-	justify-self: flex-start;
-	margin-left: 5px;
+	flex-shrink: 0;
+	width: 20px;
+	height: 20px;
+	margin-left: 8px;
+	margin-right: 8px;
 }
 
 .create-item {
@@ -156,8 +165,14 @@ const handleCategoryClick = (category) => {
 }
 
 .button-text {
-	margin-left: auto;
-	margin-right: auto;
+	flex: 1;
+	text-align: center;
+	font-size: clamp(0.6rem, 2vw, 0.9rem);
+	white-space: nowrap;
+	padding-right: 8px;
+	line-height: 1.2;
+	font-weight: 500;
+	letter-spacing: -0.02em;
 }
 
 .sidebar-button {
@@ -168,12 +183,17 @@ const handleCategoryClick = (category) => {
 	display: flex;
 	width: 100%;
 	align-items: center;
+	min-height: 44px;
+	height: 44px;
+	padding: 8px 0;
+	box-sizing: border-box;
 }
 
 #sidebar {
 	display: flex;
 	flex-direction: column;
-	width: 150px;
+	width: 180px;
+	min-width: 180px;
 	align-self: flex-start;
 	gap: 10px;
 	background-color: #f3f3f3;
@@ -182,4 +202,32 @@ const handleCategoryClick = (category) => {
 	margin-top: 10px;
 	position: relative;
 }
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 768px) {
+	#sidebar {
+		width: 160px;
+		min-width: 160px;
+	}
+
+	.button-text {
+		font-size: clamp(0.55rem, 1.8vw, 0.8rem);
+	}
+}
+
+@media (max-width: 480px) {
+	#sidebar {
+		width: 140px;
+		min-width: 140px;
+	}
+
+	.sidebar-button {
+		min-height: 40px;
+		height: 40px;
+	}
+
+	.button-text {
+		font-size: clamp(0.5rem, 1.5vw, 0.7rem);
+	}
+}
 </style>
diff --git a/frontend/src/components/common/DataTable.vue b/frontend/src/components/common/DataTable.vue
index 1c86910..34cafd8 100644
--- a/frontend/src/components/common/DataTable.vue
+++ b/frontend/src/components/common/DataTable.vue
@@ -272,6 +272,21 @@
 					:severity="getBadgeColor(slotProps.data[col.fieldName])"
 				/>
 			</template>
+			<template v-if="col.type === 'status-button'" #body="slotProps">
+				<Button
+					:label="slotProps.data[col.fieldName]"
+					:severity="getBadgeColor(slotProps.data[col.fieldName])"
+					size="small"
+					:variant="col.buttonVariant || 'filled'"
+					@click="handleStatusButtonClick(col, slotProps.data)"
+					:disabled="
+						loading ||
+						(col.disableCondition &&
+							col.disableCondition(slotProps.data[col.fieldName]))
+					"
+					class="status-button"
+				/>
+			</template>
 			<template v-if="col.type === 'date'" #body="slotProps">
 				<span>{{ formatDate(slotProps.data[col.fieldName]) }}</span>
 			</template>
@@ -1044,6 +1059,17 @@ const handleBulkAction = (action, selectedRows) => {
 	}
 };
 
+// Handle status button clicks
+const handleStatusButtonClick = (column, rowData) => {
+	try {
+		if (column.onStatusClick && typeof column.onStatusClick === "function") {
+			column.onStatusClick(rowData[column.fieldName], rowData);
+		}
+	} catch (error) {
+		console.error("Error executing status button click:", error);
+	}
+};
+
 const getBadgeColor = (status) => {
 	switch (status?.toLowerCase()) {
 		case "completed":
@@ -1547,4 +1573,29 @@ defineExpose({
 		transform: translateX(0);
 	}
 }
+
+/* Status Button Styles */
+.status-button {
+	font-weight: 500;
+	font-size: 0.8rem;
+	border-radius: 4px;
+	transition: all 0.2s ease;
+	min-width: 100px;
+	text-align: center;
+}
+
+.status-button:not(:disabled):hover {
+	transform: translateY(-1px);
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.status-button:disabled {
+	cursor: default;
+	opacity: 0.8;
+}
+
+.status-button:disabled:hover {
+	transform: none;
+	box-shadow: none;
+}
 </style>
diff --git a/frontend/src/components/common/Modal.vue b/frontend/src/components/common/Modal.vue
index a5b07bf..58c40d6 100644
--- a/frontend/src/components/common/Modal.vue
+++ b/frontend/src/components/common/Modal.vue
@@ -1,286 +1,289 @@
 <template>
-  <v-dialog
-    v-model="localVisible"
-    :persistent="options.persistent || false"
-    :fullscreen="options.fullscreen || false"
-    :max-width="options.maxWidth || '500px'"
-    :width="options.width"
-    :height="options.height"
-    :attach="options.attach"
-    :transition="options.transition || 'dialog-transition'"
-    :scrollable="options.scrollable || false"
-    :retain-focus="options.retainFocus !== false"
-    :close-on-back="options.closeOnBack !== false"
-    :close-on-content-click="options.closeOnContentClick || false"
-    :overlay-color="options.overlayColor"
-    :overlay-opacity="options.overlayOpacity"
-    :z-index="options.zIndex"
-    :class="options.dialogClass"
-    @click:outside="handleOutsideClick"
-    @keydown.esc="handleEscapeKey"
-  >
-    <v-card
-      :class="[
-        'modal-card',
-        options.cardClass,
-        {
-          'elevation-0': options.flat,
-          'rounded-0': options.noRadius
-        }
-      ]"
-      :color="options.cardColor"
-      :variant="options.cardVariant"
-      :elevation="options.elevation"
-    >
-      <!-- Header Section -->
-      <v-card-title
-        v-if="options.showHeader !== false"
-        :class="[
-          'modal-header d-flex align-center justify-space-between',
-          options.headerClass
-        ]"
-      >
-        <div class="modal-title">
-          <slot name="title">
-            {{ options.title }}
-          </slot>
-        </div>
-        
-        <!-- Close button -->
-        <v-btn
-          v-if="options.showCloseButton !== false && !options.persistent"
-          icon
-          variant="text"
-          size="small"
-          :color="options.closeButtonColor || 'grey'"
-          @click="closeModal"
-          class="modal-close-btn"
-        >
-          <v-icon>{{ options.closeIcon || 'mdi-close' }}</v-icon>
-        </v-btn>
-      </v-card-title>
+	<v-dialog
+		v-model="localVisible"
+		:persistent="options.persistent || false"
+		:fullscreen="options.fullscreen || false"
+		:max-width="options.maxWidth || '500px'"
+		:width="options.width"
+		:height="options.height"
+		:attach="options.attach"
+		:transition="options.transition || 'dialog-transition'"
+		:scrollable="options.scrollable || false"
+		:retain-focus="options.retainFocus !== false"
+		:close-on-back="options.closeOnBack !== false"
+		:close-on-content-click="options.closeOnContentClick || false"
+		:overlay-color="options.overlayColor"
+		:overlay-opacity="options.overlayOpacity"
+		:z-index="options.zIndex"
+		:class="options.dialogClass"
+		@click:outside="handleOutsideClick"
+		@keydown.esc="handleEscapeKey"
+	>
+		<v-card
+			:class="[
+				'modal-card',
+				options.cardClass,
+				{
+					'elevation-0': options.flat,
+					'rounded-0': options.noRadius,
+				},
+			]"
+			:color="options.cardColor"
+			:variant="options.cardVariant"
+			:elevation="options.elevation"
+		>
+			<!-- Header Section -->
+			<v-card-title
+				v-if="options.showHeader !== false"
+				:class="[
+					'modal-header d-flex align-center justify-space-between',
+					options.headerClass,
+				]"
+			>
+				<div class="modal-title">
+					<slot name="title">
+						{{ options.title }}
+					</slot>
+				</div>
 
-      <v-divider v-if="options.showHeaderDivider && options.showHeader !== false" />
+				<!-- Close button -->
+				<v-btn
+					v-if="options.showCloseButton !== false && !options.persistent"
+					icon
+					variant="text"
+					size="small"
+					:color="options.closeButtonColor || 'grey'"
+					@click="closeModal"
+					class="modal-close-btn"
+				>
+					<v-icon>{{ options.closeIcon || "mdi-close" }}</v-icon>
+				</v-btn>
+			</v-card-title>
 
-      <!-- Content Section -->
-      <v-card-text
-        :class="[
-          'modal-content',
-          options.contentClass,
-          {
-            'pa-0': options.noPadding,
-            'overflow-y-auto': options.scrollable
-          }
-        ]"
-        :style="contentStyle"
-      >
-        <slot>
-          <!-- Default content if no slot provided -->
-          <div v-if="options.message" v-html="options.message"></div>
-        </slot>
-      </v-card-text>
+			<v-divider v-if="options.showHeaderDivider && options.showHeader !== false" />
 
-      <!-- Actions Section -->
-      <v-card-actions
-        v-if="options.showActions !== false || $slots.actions"
-        :class="[
-          'modal-actions',
-          options.actionsClass,
-          {
-            'justify-end': options.actionsAlign === 'right',
-            'justify-center': options.actionsAlign === 'center',
-            'justify-start': options.actionsAlign === 'left',
-            'justify-space-between': options.actionsAlign === 'space-between'
-          }
-        ]"
-      >
-        <slot name="actions" :close="closeModal" :options="options">
-          <!-- Default action buttons -->
-          <v-btn
-            v-if="options.showCancelButton !== false && !options.persistent"
-            :color="options.cancelButtonColor || 'grey'"
-            :variant="options.cancelButtonVariant || 'text'"
-            @click="handleCancel"
-          >
-            {{ options.cancelButtonText || 'Cancel' }}
-          </v-btn>
-          
-          <v-btn
-            v-if="options.showConfirmButton !== false"
-            :color="options.confirmButtonColor || 'primary'"
-            :variant="options.confirmButtonVariant || 'elevated'"
-            :loading="options.loading"
-            @click="handleConfirm"
-          >
-            {{ options.confirmButtonText || 'Confirm' }}
-          </v-btn>
-        </slot>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+			<!-- Content Section -->
+			<v-card-text
+				:class="[
+					'modal-content',
+					options.contentClass,
+					{
+						'pa-0': options.noPadding,
+						'overflow-y-auto': options.scrollable,
+					},
+				]"
+				:style="contentStyle"
+			>
+				<slot>
+					<!-- Default content if no slot provided -->
+					<div v-if="options.message" v-html="options.message"></div>
+				</slot>
+			</v-card-text>
+
+			<!-- Actions Section -->
+			<v-card-actions
+				v-if="options.showActions !== false || $slots.actions"
+				:class="[
+					'modal-actions',
+					options.actionsClass,
+					{
+						'justify-end': options.actionsAlign === 'right',
+						'justify-center': options.actionsAlign === 'center',
+						'justify-start': options.actionsAlign === 'left',
+						'justify-space-between': options.actionsAlign === 'space-between',
+					},
+				]"
+			>
+				<slot name="actions" :close="closeModal" :options="options">
+					<!-- Default action buttons -->
+					<v-btn
+						v-if="options.showCancelButton !== false"
+						:color="options.cancelButtonColor || 'grey'"
+						:variant="options.cancelButtonVariant || 'text'"
+						@click="handleCancel"
+					>
+						{{ options.cancelButtonText || "Cancel" }}
+					</v-btn>
+
+					<v-btn
+						v-if="options.showConfirmButton !== false"
+						:color="options.confirmButtonColor || 'primary'"
+						:variant="options.confirmButtonVariant || 'elevated'"
+						:loading="options.loading"
+						@click="handleConfirm"
+					>
+						{{ options.confirmButtonText || "Confirm" }}
+					</v-btn>
+				</slot>
+			</v-card-actions>
+		</v-card>
+	</v-dialog>
 </template>
 
 <script setup>
-import { computed, watch } from 'vue'
+import { computed, watch } from "vue";
 
 // Props
 const props = defineProps({
-  // Modal visibility state
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  
-  // Options object for configuration
-  options: {
-    type: Object,
-    default: () => ({})
-  }
-})
+	// Modal visibility state
+	visible: {
+		type: Boolean,
+		default: false,
+	},
+
+	// Options object for configuration
+	options: {
+		type: Object,
+		default: () => ({}),
+	},
+});
 
 // Emits
 const emit = defineEmits([
-  'update:visible',
-  'close',
-  'confirm',
-  'cancel',
-  'outside-click',
-  'escape-key'
-])
+	"update:visible",
+	"close",
+	"confirm",
+	"cancel",
+	"outside-click",
+	"escape-key",
+]);
 
 // Local visibility state that syncs with parent
 const localVisible = computed({
-  get() {
-    return props.visible
-  },
-  set(value) {
-    emit('update:visible', value)
-  }
-})
+	get() {
+		return props.visible;
+	},
+	set(value) {
+		emit("update:visible", value);
+	},
+});
 
 // Computed styles for content area
 const contentStyle = computed(() => {
-  const styles = {}
-  
-  if (props.options.contentHeight) {
-    styles.height = props.options.contentHeight
-  }
-  
-  if (props.options.contentMaxHeight) {
-    styles.maxHeight = props.options.contentMaxHeight
-  }
-  
-  if (props.options.contentMinHeight) {
-    styles.minHeight = props.options.contentMinHeight
-  }
-  
-  return styles
-})
+	const styles = {};
+
+	if (props.options.contentHeight) {
+		styles.height = props.options.contentHeight;
+	}
+
+	if (props.options.contentMaxHeight) {
+		styles.maxHeight = props.options.contentMaxHeight;
+	}
+
+	if (props.options.contentMinHeight) {
+		styles.minHeight = props.options.contentMinHeight;
+	}
+
+	return styles;
+});
 
 // Methods
 const closeModal = () => {
-  localVisible.value = false
-  emit('close')
-}
+	localVisible.value = false;
+	emit("close");
+};
 
 const handleConfirm = () => {
-  emit('confirm')
-  
-  // Auto-close unless specified not to
-  if (props.options.autoCloseOnConfirm !== false) {
-    closeModal()
-  }
-}
+	emit("confirm");
+
+	// Auto-close unless specified not to
+	if (props.options.autoCloseOnConfirm !== false) {
+		closeModal();
+	}
+};
 
 const handleCancel = () => {
-  emit('cancel')
-  
-  // Auto-close unless specified not to
-  if (props.options.autoCloseOnCancel !== false) {
-    closeModal()
-  }
-}
+	emit("cancel");
+
+	// Auto-close unless specified not to
+	if (props.options.autoCloseOnCancel !== false) {
+		closeModal();
+	}
+};
 
 const handleOutsideClick = () => {
-  emit('outside-click')
-  
-  // Close on outside click unless persistent or disabled
-  if (!props.options.persistent && props.options.closeOnOutsideClick !== false) {
-    closeModal()
-  }
-}
+	emit("outside-click");
+
+	// Close on outside click unless persistent or disabled
+	if (!props.options.persistent && props.options.closeOnOutsideClick !== false) {
+		closeModal();
+	}
+};
 
 const handleEscapeKey = () => {
-  emit('escape-key')
-  
-  // Close on escape key unless persistent or disabled
-  if (!props.options.persistent && props.options.closeOnEscape !== false) {
-    closeModal()
-  }
-}
+	emit("escape-key");
+
+	// Close on escape key unless persistent or disabled
+	if (!props.options.persistent && props.options.closeOnEscape !== false) {
+		closeModal();
+	}
+};
 
 // Watch for external visibility changes
-watch(() => props.visible, (newValue) => {
-  if (newValue && props.options.onOpen) {
-    props.options.onOpen()
-  } else if (!newValue && props.options.onClose) {
-    props.options.onClose()
-  }
-})
+watch(
+	() => props.visible,
+	(newValue) => {
+		if (newValue && props.options.onOpen) {
+			props.options.onOpen();
+		} else if (!newValue && props.options.onClose) {
+			props.options.onClose();
+		}
+	},
+);
 </script>
 
 <style scoped>
 .modal-card {
-  position: relative;
+	position: relative;
 }
 
 .modal-header {
-  background-color: var(--v-theme-surface-variant);
-  padding: 16px 24px;
+	background-color: var(--v-theme-surface-variant);
+	padding: 16px 24px;
 }
 
 .modal-title {
-  font-size: 1.25rem;
-  font-weight: 500;
-  flex: 1;
+	font-size: 1.25rem;
+	font-weight: 500;
+	flex: 1;
 }
 
 .modal-close-btn {
-  flex-shrink: 0;
+	flex-shrink: 0;
 }
 
 .modal-content {
-  position: relative;
+	position: relative;
 }
 
 .modal-actions {
-  padding: 16px 24px;
-  gap: 8px;
+	padding: 16px 24px;
+	gap: 8px;
 }
 
 /* Responsive adjustments */
 @media (max-width: 600px) {
-  .modal-header {
-    padding: 12px 16px;
-  }
-  
-  .modal-actions {
-    padding: 12px 16px;
-  }
-  
-  .modal-title {
-    font-size: 1.1rem;
-  }
+	.modal-header {
+		padding: 12px 16px;
+	}
+
+	.modal-actions {
+		padding: 12px 16px;
+	}
+
+	.modal-title {
+		font-size: 1.1rem;
+	}
 }
 
 /* Custom transitions */
 .v-dialog--fullscreen .modal-card {
-  height: 100vh;
-  border-radius: 0;
+	height: 100vh;
+	border-radius: 0;
 }
 
 /* Loading state */
 .modal-card.loading {
-  pointer-events: none;
+	pointer-events: none;
 }
 </style>
diff --git a/frontend/src/components/modals/MeetingDetailsModal.vue b/frontend/src/components/modals/MeetingDetailsModal.vue
new file mode 100644
index 0000000..de53081
--- /dev/null
+++ b/frontend/src/components/modals/MeetingDetailsModal.vue
@@ -0,0 +1,117 @@
+<template>
+	<Modal v-model:visible="showModal" :options="modalOptions" @confirm="handleClose">
+		<template #title>Meeting Details</template>
+		<div v-if="meeting" class="meeting-details">
+			<div class="detail-row">
+				<v-icon class="mr-2">mdi-map-marker</v-icon>
+				<strong>Address:</strong> {{ meeting.address }}
+			</div>
+			<div class="detail-row" v-if="meeting.client">
+				<v-icon class="mr-2">mdi-account</v-icon>
+				<strong>Client:</strong> {{ meeting.client }}
+			</div>
+			<div class="detail-row">
+				<v-icon class="mr-2">mdi-calendar</v-icon>
+				<strong>Date:</strong> {{ formatDate(meeting.date) }}
+			</div>
+			<div class="detail-row">
+				<v-icon class="mr-2">mdi-clock</v-icon>
+				<strong>Time:</strong> {{ formatTimeDisplay(meeting.scheduledTime) }}
+			</div>
+			<div class="detail-row" v-if="meeting.duration">
+				<v-icon class="mr-2">mdi-timer</v-icon>
+				<strong>Duration:</strong> {{ meeting.duration }} minutes
+			</div>
+			<div class="detail-row" v-if="meeting.notes">
+				<v-icon class="mr-2">mdi-note-text</v-icon>
+				<strong>Notes:</strong> {{ meeting.notes }}
+			</div>
+			<div class="detail-row" v-if="meeting.status">
+				<v-icon class="mr-2">mdi-check-circle</v-icon>
+				<strong>Status:</strong> {{ meeting.status }}
+			</div>
+		</div>
+	</Modal>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import Modal from "../common/Modal.vue";
+
+// Props
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		default: false,
+	},
+	meeting: {
+		type: Object,
+		default: null,
+	},
+});
+
+// Emits
+const emit = defineEmits(["update:visible", "close"]);
+
+// Local state
+const showModal = computed({
+	get() {
+		return props.visible;
+	},
+	set(value) {
+		emit("update:visible", value);
+	},
+});
+
+// Modal options
+const modalOptions = computed(() => ({
+	maxWidth: "600px",
+	showCancelButton: false,
+	confirmButtonText: "Close",
+	confirmButtonColor: "primary",
+}));
+
+// Methods
+const handleClose = () => {
+	emit("close");
+};
+
+const formatTimeDisplay = (time) => {
+	if (!time) return "";
+	const [hours, minutes] = time.split(":").map(Number);
+	const displayHour = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours;
+	const ampm = hours >= 12 ? "PM" : "AM";
+	return `${displayHour}:${minutes.toString().padStart(2, "0")} ${ampm}`;
+};
+
+const formatDate = (dateStr) => {
+	if (!dateStr) return "";
+	const date = new Date(dateStr);
+	return date.toLocaleDateString("en-US", {
+		weekday: "long",
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	});
+};
+</script>
+
+<style scoped>
+.meeting-details {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.detail-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 0;
+}
+
+.detail-row strong {
+	margin-right: 8px;
+	color: #333;
+}
+</style>
diff --git a/frontend/src/components/modals/OnSiteMeetingModal.vue b/frontend/src/components/modals/OnSiteMeetingModal.vue
new file mode 100644
index 0000000..f3e50bc
--- /dev/null
+++ b/frontend/src/components/modals/OnSiteMeetingModal.vue
@@ -0,0 +1,311 @@
+<template>
+	<!-- New Meeting Creation Modal -->
+	<Modal
+		v-model:visible="showModal"
+		:options="modalOptions"
+		@confirm="handleConfirm"
+		@cancel="handleCancel"
+	>
+		<template #title>Schedule New On-Site Meeting</template>
+		<div class="new-meeting-form">
+			<div class="form-group">
+				<label for="meeting-address">Address: <span class="required">*</span></label>
+				<div class="address-input-group">
+					<InputText
+						id="meeting-address"
+						v-model="formData.address"
+						class="address-input"
+						placeholder="Enter meeting address"
+						@input="validateForm"
+					/>
+					<Button
+						label="Search"
+						icon="pi pi-search"
+						size="small"
+						:disabled="!formData.address.trim()"
+						@click="searchAddress"
+						class="search-btn"
+					/>
+				</div>
+			</div>
+			<div class="form-group">
+				<label for="meeting-notes">Notes (Optional):</label>
+				<Textarea
+					id="meeting-notes"
+					v-model="formData.notes"
+					class="w-full"
+					placeholder="Additional notes..."
+					rows="3"
+				/>
+			</div>
+		</div>
+	</Modal>
+
+	<!-- Address Search Results Modal -->
+	<Modal
+		v-model:visible="showAddressSearchModal"
+		:options="searchModalOptions"
+		@confirm="closeAddressSearch"
+	>
+		<template #title>Address Search Results</template>
+		<div class="address-search-results">
+			<div v-if="addressSearchResults.length === 0" class="no-results">
+				<i class="pi pi-info-circle"></i>
+				<p>No addresses found matching your search.</p>
+			</div>
+			<div v-else class="results-list">
+				<div
+					v-for="(address, index) in addressSearchResults"
+					:key="index"
+					class="address-result-item"
+					@click="selectAddress(address)"
+				>
+					<i class="pi pi-map-marker"></i>
+					<span>{{ address }}</span>
+				</div>
+			</div>
+		</div>
+	</Modal>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import Modal from "../common/Modal.vue";
+import InputText from "primevue/inputtext";
+import Textarea from "primevue/textarea";
+import Button from "primevue/button";
+import { useNotificationStore } from "../../stores/notifications-primevue";
+import Api from "../../api";
+
+const notificationStore = useNotificationStore();
+
+// Props
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		default: false,
+	},
+	initialAddress: {
+		type: String,
+		default: "",
+	},
+});
+
+// Emits
+const emit = defineEmits(["update:visible", "confirm", "cancel"]);
+
+// Local state
+const showModal = computed({
+	get() {
+		return props.visible;
+	},
+	set(value) {
+		emit("update:visible", value);
+	},
+});
+
+const showAddressSearchModal = ref(false);
+const addressSearchResults = ref([]);
+const isFormValid = ref(false);
+
+// Form data
+const formData = ref({
+	address: "",
+	notes: "",
+});
+
+// Form validation state
+
+// Modal options
+const modalOptions = computed(() => ({
+	maxWidth: "500px",
+	persistent: true,
+	confirmButtonText: "Create",
+	cancelButtonText: "Cancel",
+	confirmButtonColor: "primary",
+	showConfirmButton: true,
+	showCancelButton: true,
+	confirmButtonProps: {
+		disabled: !isFormValid.value,
+	},
+}));
+
+const searchModalOptions = computed(() => ({
+	maxWidth: "600px",
+	showCancelButton: false,
+	confirmButtonText: "Close",
+	confirmButtonColor: "primary",
+}));
+
+// Methods
+const validateForm = () => {
+	const hasValidAddress = formData.value.address && formData.value.address.trim().length > 0;
+	isFormValid.value = hasValidAddress;
+};
+
+const searchAddress = async () => {
+	const searchTerm = formData.value.address.trim();
+	if (!searchTerm) return;
+
+	try {
+		const results = await Api.searchAddresses(searchTerm);
+		console.info("Address search results:", results);
+
+		// Ensure results is always an array
+		// const safeResults = Array.isArray(results) ? results : [];
+		addressSearchResults.value = results;
+
+		if (results.length === 0) {
+			notificationStore.addWarning("No addresses found matching your search criteria.");
+		} else {
+			showAddressSearchModal.value = true;
+		}
+	} catch (error) {
+		console.error("Error searching addresses:", error);
+		addressSearchResults.value = [];
+		notificationStore.addError("Failed to search addresses. Please try again.");
+	}
+};
+
+const selectAddress = (address) => {
+	formData.value.address = address;
+	showAddressSearchModal.value = false;
+	validateForm();
+};
+
+const closeAddressSearch = () => {
+	showAddressSearchModal.value = false;
+};
+
+const handleConfirm = () => {
+	if (!isFormValid.value) return;
+
+	emit("confirm", { ...formData.value });
+	resetForm();
+};
+
+const handleCancel = () => {
+	emit("cancel");
+	resetForm();
+};
+
+const resetForm = () => {
+	formData.value = {
+		address: props.initialAddress || "",
+		notes: "",
+	};
+	validateForm();
+};
+
+// Watch for prop changes
+watch(
+	() => props.initialAddress,
+	(newAddress) => {
+		formData.value.address = newAddress || "";
+		validateForm();
+	},
+	{ immediate: true },
+);
+
+watch(
+	() => props.visible,
+	(isVisible) => {
+		if (isVisible) {
+			resetForm();
+		}
+	},
+);
+
+// Initial validation
+validateForm();
+</script>
+
+<style scoped>
+.new-meeting-form {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.form-group {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.form-group label {
+	font-weight: 500;
+	color: #333;
+	font-size: 0.9em;
+}
+
+.required {
+	color: #e74c3c;
+}
+
+.address-input-group {
+	display: flex;
+	gap: 8px;
+	align-items: stretch;
+}
+
+.address-input {
+	flex: 1;
+}
+
+.search-btn {
+	flex-shrink: 0;
+}
+
+.address-search-results {
+	min-height: 200px;
+}
+
+.no-results {
+	text-align: center;
+	padding: 40px 20px;
+	color: #666;
+}
+
+.no-results i {
+	font-size: 2em;
+	color: #f39c12;
+	margin-bottom: 10px;
+	display: block;
+}
+
+.results-list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.address-result-item {
+	padding: 12px 16px;
+	border: 1px solid #e0e0e0;
+	border-radius: 6px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.address-result-item:hover {
+	background-color: #f8f9fa;
+	border-color: #2196f3;
+	transform: translateY(-1px);
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.address-result-item i {
+	color: #2196f3;
+	font-size: 1.1em;
+}
+
+.address-result-item span {
+	flex: 1;
+	font-size: 0.9em;
+	color: #333;
+}
+</style>
diff --git a/frontend/src/components/pages/Clients.vue b/frontend/src/components/pages/Clients.vue
index 43c6391..2e511cd 100644
--- a/frontend/src/components/pages/Clients.vue
+++ b/frontend/src/components/pages/Clients.vue
@@ -124,26 +124,38 @@ const columns = [
 	{
 		label: "Appt. Scheduled",
 		fieldName: "appointmentScheduledStatus",
-		type: "status",
+		type: "status-button",
 		sortable: true,
+		buttonVariant: "outlined",
+		onStatusClick: (status, rowData) => handleAppointmentClick(status, rowData),
+		disableCondition: (status) => status?.toLowerCase() !== "not started",
 	},
 	{
 		label: "Estimate Sent",
 		fieldName: "estimateSentStatus",
-		type: "status",
+		type: "status-button",
 		sortable: true,
+		buttonVariant: "outlined",
+		onStatusClick: (status, rowData) => handleEstimateClick(status, rowData),
+		disableCondition: (status) => status?.toLowerCase() !== "not started",
 	},
 	{
 		label: "Payment Received",
 		fieldName: "paymentReceivedStatus",
-		type: "status",
+		type: "status-button",
 		sortable: true,
+		buttonVariant: "outlined",
+		onStatusClick: (status, rowData) => handlePaymentClick(status, rowData),
+		disableCondition: (status) => status?.toLowerCase() !== "not started",
 	},
 	{
 		label: "Job Status",
 		fieldName: "jobStatus",
-		type: "status",
+		type: "status-button",
 		sortable: true,
+		buttonVariant: "outlined",
+		onStatusClick: (status, rowData) => handleJobClick(status, rowData),
+		disableCondition: (status) => status?.toLowerCase() !== "not started",
 	},
 ];
 
@@ -335,6 +347,39 @@ const handleLazyLoad = async (event) => {
 		isLoading.value = false;
 	}
 };
+// Status button click handlers
+const handleAppointmentClick = (status, rowData) => {
+	if (status?.toLowerCase() === "not started") {
+		// Navigate to schedule on-site meeting
+		const address = encodeURIComponent(rowData.address);
+		router.push(`/schedule-onsite?new=true&address=${address}`);
+	}
+};
+
+const handleEstimateClick = (status, rowData) => {
+	if (status?.toLowerCase() === "not started") {
+		// Navigate to create quotation/estimate
+		const address = encodeURIComponent(rowData.address);
+		router.push(`/quotations?new=true&address=${address}`);
+	}
+};
+
+const handlePaymentClick = (status, rowData) => {
+	if (status?.toLowerCase() === "not started") {
+		// Navigate to payment processing
+		const address = encodeURIComponent(rowData.address);
+		router.push(`/payments?new=true&address=${address}`);
+	}
+};
+
+const handleJobClick = (status, rowData) => {
+	if (status?.toLowerCase() === "not started") {
+		// Navigate to job creation
+		const address = encodeURIComponent(rowData.address);
+		router.push(`/jobs?new=true&address=${address}`);
+	}
+};
+
 // Watch for filters change to update status counts
 watch(
 	() => filtersStore.getTableFilters("clients"),
diff --git a/frontend/src/components/pages/ScheduleOnSite.vue b/frontend/src/components/pages/ScheduleOnSite.vue
new file mode 100644
index 0000000..00cdaf5
--- /dev/null
+++ b/frontend/src/components/pages/ScheduleOnSite.vue
@@ -0,0 +1,1321 @@
+<template>
+	<div class="schedule-onsite-container">
+		<!-- Header -->
+		<div class="header">
+			<h2>On-Site Meeting Schedule</h2>
+			<div class="header-controls">
+				<v-btn
+					@click="previousWeek"
+					icon="mdi-chevron-left"
+					variant="outlined"
+					size="small"
+				></v-btn>
+				<v-btn @click="showDatePicker = true" variant="text" class="week-display-btn">
+					<span class="date-text">{{ weekDisplayText }}</span>
+					<v-icon right size="small">mdi-calendar</v-icon>
+				</v-btn>
+				<v-btn
+					@click="nextWeek"
+					icon="mdi-chevron-right"
+					variant="outlined"
+					size="small"
+				></v-btn>
+				<v-btn @click="goToCurrentWeek" variant="outlined" size="small" class="ml-4"
+					>This Week</v-btn
+				>
+				<v-btn
+					@click="openNewMeetingModal"
+					variant="elevated"
+					size="small"
+					color="primary"
+					class="ml-4"
+				>
+					<v-icon left size="small">mdi-plus</v-icon>
+					New
+				</v-btn>
+			</div>
+		</div>
+
+		<!-- Date Picker Dialog -->
+		<v-dialog v-model="showDatePicker" max-width="400px">
+			<v-card>
+				<v-card-title>Select Date</v-card-title>
+				<v-card-text>
+					<v-date-picker
+						v-model="selectedDate"
+						@update:model-value="onDateSelected"
+						full-width
+					></v-date-picker>
+				</v-card-text>
+				<v-card-actions>
+					<v-spacer></v-spacer>
+					<v-btn @click="showDatePicker = false">Cancel</v-btn>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+
+		<!-- Main Content Layout -->
+		<div class="main-layout">
+			<!-- Weekly Calendar -->
+			<div class="calendar-section">
+				<div class="weekly-calendar">
+					<!-- Days of Week Header -->
+					<div class="calendar-header-row">
+						<div class="time-column-header">Time</div>
+						<div
+							v-for="day in weekDays"
+							:key="day.date"
+							class="day-header"
+							:class="{ today: day.isToday }"
+						>
+							<div class="day-name">{{ day.dayName }}</div>
+							<div class="day-date">{{ day.displayDate }}</div>
+							<div class="meetings-count">
+								{{ getDayMeetingsCount(day.date) }} meetings
+							</div>
+						</div>
+					</div>
+
+					<!-- Time Grid -->
+					<div class="calendar-grid">
+						<div
+							v-for="timeSlot in businessHours"
+							:key="timeSlot.time"
+							class="time-row"
+						>
+							<!-- Time Column -->
+							<div class="time-column">
+								<span class="time-label">{{ timeSlot.display }}</span>
+							</div>
+
+							<!-- Day Columns -->
+							<div
+								v-for="day in weekDays"
+								:key="`${day.date}-${timeSlot.time}`"
+								class="day-column"
+								:class="{
+									'current-time': isCurrentTimeSlot(day.date, timeSlot.time),
+									'past-time': isPastTimeSlot(day.date, timeSlot.time),
+									'drag-over':
+										isDragOver &&
+										dragOverSlot?.date === day.date &&
+										dragOverSlot?.time === timeSlot.time,
+									weekend: day.isWeekend,
+								}"
+								@click="selectTimeSlot(day.date, timeSlot.time)"
+								@dragover="handleDragOver($event, day.date, timeSlot.time)"
+								@dragleave="handleDragLeave"
+								@drop="handleDrop($event, day.date, timeSlot.time)"
+							>
+								<!-- Meetings in this time slot -->
+								<div
+									v-for="meeting in getMeetingsForTimeSlot(
+										day.date,
+										timeSlot.time,
+									)"
+									:key="meeting.id"
+									class="meeting-event"
+									:class="getMeetingColorClass(meeting)"
+									draggable="true"
+									@dragstart="handleMeetingDragStart($event, meeting)"
+									@dragend="handleDragEnd($event)"
+									@click.stop="showMeetingDetails(meeting)"
+								>
+									<div class="event-time">
+										{{ formatTimeDisplay(meeting.scheduledTime) }}
+									</div>
+									<div class="event-address">{{ meeting.address }}</div>
+									<div class="event-client" v-if="meeting.client">
+										{{ meeting.client }}
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Right Sidebar for Unscheduled Meetings -->
+			<div class="sidebar sidebar-right" :class="{ collapsed: isSidebarCollapsed }">
+				<div class="sidebar-header">
+					<div class="sidebar-title">
+						<h4 v-if="!isSidebarCollapsed">Unscheduled Meetings</h4>
+						<v-chip color="warning" size="small">{{
+							unscheduledMeetings.length
+						}}</v-chip>
+					</div>
+					<v-btn
+						@click="isSidebarCollapsed = !isSidebarCollapsed"
+						:icon="isSidebarCollapsed ? 'mdi-chevron-left' : 'mdi-chevron-right'"
+						variant="text"
+						size="small"
+						density="compact"
+					></v-btn>
+				</div>
+				<div v-if="!isSidebarCollapsed" class="unscheduled-meetings-list">
+					<div v-if="unscheduledMeetings.length === 0" class="empty-state">
+						<v-icon size="large" color="grey-lighten-1">mdi-calendar-check</v-icon>
+						<p>No unscheduled meetings</p>
+					</div>
+					<v-card
+						v-for="meeting in unscheduledMeetings"
+						:key="meeting.name"
+						class="meeting-card mb-3"
+						elevation="2"
+						hover
+						draggable="true"
+						@dragstart="handleDragStart($event, meeting)"
+						@dragend="handleDragEnd($event)"
+					>
+						<v-card-text class="pa-3">
+							<div class="meeting-title">{{ meeting.address }}</div>
+							<div class="meeting-status">
+								<v-chip size="x-small" :color="getStatusColor(meeting.status)">
+									{{ meeting.status }}
+								</v-chip>
+							</div>
+							<div v-if="meeting.notes" class="meeting-notes">
+								{{ meeting.notes }}
+							</div>
+							<div v-if="meeting.assigned_employee" class="meeting-employee">
+								<v-icon size="x-small" class="mr-1">mdi-account</v-icon>
+								{{ meeting.assigned_employee }}
+							</div>
+						</v-card-text>
+					</v-card>
+				</div>
+			</div>
+		</div>
+
+		<!-- Meeting Details Modal -->
+		<MeetingDetailsModal
+			v-model:visible="showMeetingModal"
+			:meeting="selectedMeeting"
+			@close="closeMeetingModal"
+		/>
+
+		<!-- New Meeting Modal -->
+		<OnSiteMeetingModal
+			v-model:visible="showNewMeetingModal"
+			:initial-address="queryAddress"
+			@confirm="handleNewMeetingConfirm"
+			@cancel="handleNewMeetingCancel"
+		/>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import OnSiteMeetingModal from "../modals/OnSiteMeetingModal.vue";
+import MeetingDetailsModal from "../modals/MeetingDetailsModal.vue";
+import { useLoadingStore } from "../../stores/loading";
+import { useNotificationStore } from "../../stores/notifications-primevue";
+import Api from "../../api";
+
+const route = useRoute();
+const router = useRouter();
+const loadingStore = useLoadingStore();
+const notificationStore = useNotificationStore();
+
+// Query parameters
+const isNewMode = computed(() => route.query.new === "true");
+const queryAddress = computed(() => route.query.address || "");
+
+// Date management
+const currentWeekStart = ref(new Date());
+const showDatePicker = ref(false);
+const selectedDate = ref(null);
+
+// Calendar state
+const meetings = ref([]);
+const unscheduledMeetings = ref([]);
+const selectedMeeting = ref(null);
+const showMeetingModal = ref(false);
+const showNewMeetingModal = ref(false);
+
+// Drag and drop state
+const isDragOver = ref(false);
+const dragOverSlot = ref(null);
+const draggedMeeting = ref(null);
+const originalMeetingForReschedule = ref(null); // Store original meeting data for reschedules
+
+// Sidebar state
+const isSidebarCollapsed = ref(false);
+
+// Business hours (8 AM to 6 PM)
+const businessHours = computed(() => {
+	const hours = [];
+	for (let hour = 8; hour <= 18; hour++) {
+		const time = `${hour.toString().padStart(2, "0")}:00`;
+		const displayHour = hour > 12 ? hour - 12 : hour === 0 ? 12 : hour;
+		const ampm = hour >= 12 ? "PM" : "AM";
+		const display = `${displayHour}:00 ${ampm}`;
+
+		hours.push({ time, display });
+
+		// Add 30-minute slot (except for the last hour)
+		if (hour < 18) {
+			const halfTime = `${hour.toString().padStart(2, "0")}:30`;
+			const halfDisplay = `${displayHour}:30 ${ampm}`;
+			hours.push({ time: halfTime, display: halfDisplay });
+		}
+	}
+	return hours;
+});
+
+// Week display
+const weekDays = computed(() => {
+	const days = [];
+	const startOfWeek = new Date(currentWeekStart.value);
+	startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay()); // Get Sunday
+
+	for (let i = 0; i < 7; i++) {
+		const day = new Date(startOfWeek);
+		day.setDate(startOfWeek.getDate() + i);
+
+		const today = new Date();
+		const isToday = day.toDateString() === today.toDateString();
+		const isWeekend = day.getDay() === 0 || day.getDay() === 6;
+
+		days.push({
+			date: day.toISOString().split("T")[0],
+			dayName: day.toLocaleDateString("en-US", { weekday: "short" }),
+			displayDate: day.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+			isToday,
+			isWeekend,
+		});
+	}
+	return days;
+});
+
+const weekDisplayText = computed(() => {
+	const startOfWeek = new Date(currentWeekStart.value);
+	startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay());
+
+	const endOfWeek = new Date(startOfWeek);
+	endOfWeek.setDate(startOfWeek.getDate() + 6);
+
+	const startMonth = startOfWeek.toLocaleDateString("en-US", { month: "short" });
+	const endMonth = endOfWeek.toLocaleDateString("en-US", { month: "short" });
+	const startDay = startOfWeek.getDate();
+	const endDay = endOfWeek.getDate();
+	const year = startOfWeek.getFullYear();
+
+	if (startMonth === endMonth) {
+		return `${startMonth} ${startDay}-${endDay}, ${year}`;
+	} else {
+		return `${startMonth} ${startDay} - ${endMonth} ${endDay}, ${year}`;
+	}
+});
+
+// Modal options - keeping these for backward compatibility if needed
+const meetingModalOptions = computed(() => ({
+	maxWidth: "600px",
+	showCancelButton: false,
+	confirmButtonText: "Close",
+	confirmButtonColor: "primary",
+}));
+
+// Methods
+const initializeWeek = () => {
+	const today = new Date();
+	currentWeekStart.value = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+};
+
+const previousWeek = () => {
+	const newDate = new Date(currentWeekStart.value);
+	newDate.setDate(newDate.getDate() - 7);
+	currentWeekStart.value = newDate;
+	loadWeekMeetings();
+};
+
+const nextWeek = () => {
+	const newDate = new Date(currentWeekStart.value);
+	newDate.setDate(newDate.getDate() + 7);
+	currentWeekStart.value = newDate;
+	loadWeekMeetings();
+};
+
+const goToCurrentWeek = () => {
+	initializeWeek();
+	loadWeekMeetings();
+};
+
+const onDateSelected = (date) => {
+	if (date) {
+		const dateObj = Array.isArray(date) ? date[0] : date;
+		currentWeekStart.value = new Date(
+			dateObj.getFullYear(),
+			dateObj.getMonth(),
+			dateObj.getDate(),
+		);
+		showDatePicker.value = false;
+		loadWeekMeetings();
+	}
+};
+
+const getMeetingsForTimeSlot = (date, time) => {
+	if (!Array.isArray(meetings.value)) {
+		return [];
+	}
+	return meetings.value.filter((meeting) => {
+		if (meeting.date !== date) return false;
+
+		// Check if the meeting starts at this time slot
+		const meetingTime = meeting.scheduledTime;
+		return meetingTime === time;
+	});
+};
+
+const getDayMeetingsCount = (date) => {
+	if (!Array.isArray(meetings.value)) {
+		return 0;
+	}
+	return meetings.value.filter((meeting) => meeting.date === date).length;
+};
+
+const isCurrentTimeSlot = (date, time) => {
+	const now = new Date();
+	const today = now.toISOString().split("T")[0];
+	const currentHour = now.getHours();
+	const currentMinute = now.getMinutes();
+	const currentTime = `${currentHour.toString().padStart(2, "0")}:${currentMinute >= 30 ? "30" : "00"}`;
+
+	return date === today && time === currentTime;
+};
+
+const isPastTimeSlot = (date, time) => {
+	const now = new Date();
+	const slotDateTime = new Date(`${date}T${time}:00`);
+	return slotDateTime < now;
+};
+
+const getMeetingColorClass = (meeting) => {
+	if (meeting.status === "Completed") {
+		return "meeting-completed";
+	}
+
+	// Check if meeting is in the past based on end time
+	if (meeting.endTime) {
+		const endDateTime = new Date(meeting.endTime);
+		const now = new Date();
+
+		if (endDateTime < now && meeting.status !== "Completed") {
+			return "meeting-overdue";
+		}
+	}
+
+	// Default: scheduled and in the future
+	return "meeting-scheduled";
+};
+
+const formatTimeDisplay = (time) => {
+	const [hours, minutes] = time.split(":").map(Number);
+	const displayHour = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours;
+	const ampm = hours >= 12 ? "PM" : "AM";
+	return `${displayHour}:${minutes.toString().padStart(2, "0")} ${ampm}`;
+};
+
+const formatDate = (dateStr) => {
+	const date = new Date(dateStr);
+	return date.toLocaleDateString("en-US", {
+		weekday: "long",
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	});
+};
+
+const formatDateForUrl = (date) => {
+	return date.toISOString().split("T")[0];
+};
+
+const selectTimeSlot = (date, time) => {
+	console.log("Selected time slot:", date, time);
+};
+
+const showMeetingDetails = (meeting) => {
+	selectedMeeting.value = meeting;
+	showMeetingModal.value = true;
+};
+
+const closeMeetingModal = () => {
+	showMeetingModal.value = false;
+	selectedMeeting.value = null;
+};
+
+const openNewMeetingModal = () => {
+	showNewMeetingModal.value = true;
+};
+
+const handleNewMeetingConfirm = async (meetingData) => {
+	console.log("Creating new meeting:", meetingData);
+
+	try {
+		loadingStore.setLoading(true);
+
+		// Create the meeting via API
+		const result = await Api.createOnSiteMeeting(meetingData.address, meetingData.notes || "");
+
+		showNewMeetingModal.value = false;
+
+		// Reload unscheduled meetings to show the new one
+		await loadUnscheduledMeetings();
+
+		notificationStore.addNotification({
+			type: "success",
+			title: "Success",
+			message: "Meeting created successfully. Drag it to the calendar to schedule a time.",
+			duration: 5000,
+		});
+
+		console.log("Meeting created:", result);
+	} catch (error) {
+		console.error("Error creating meeting:", error);
+		notificationStore.addNotification({
+			type: "error",
+			title: "Error",
+			message: "Failed to create meeting. Please try again.",
+			duration: 5000,
+		});
+	} finally {
+		loadingStore.setLoading(false);
+	}
+};
+
+const handleNewMeetingCancel = () => {
+	showNewMeetingModal.value = false;
+	// Clear query params after canceling
+	router.push({
+		path: "/schedule-onsite",
+		query: {
+			date: formatDateForUrl(currentWeekStart.value),
+		},
+	});
+};
+
+// Drag and drop handlers
+const handleDragStart = (event, meeting = null) => {
+	// If a meeting object is passed, use it; otherwise use query address for new meetings
+	if (meeting) {
+		draggedMeeting.value = {
+			id: meeting.name,
+			address: meeting.address,
+			notes: meeting.notes || "",
+			assigned_employee: meeting.assigned_employee || "",
+			status: meeting.status,
+		};
+	} else if (!draggedMeeting.value) {
+		// If no meeting data is set, use query address
+		draggedMeeting.value = {
+			address: queryAddress.value,
+			client: "",
+			duration: 60,
+			notes: "",
+		};
+	}
+	event.dataTransfer.effectAllowed = "move";
+	console.log("Drag started for meeting:", draggedMeeting.value);
+};
+
+const handleMeetingDragStart = (event, meeting) => {
+	// Handle dragging a scheduled meeting
+	draggedMeeting.value = {
+		id: meeting.name,
+		address: meeting.address,
+		notes: meeting.notes || "",
+		assigned_employee: meeting.assigned_employee || "",
+		status: meeting.status,
+		isRescheduling: true, // Flag to indicate this is a reschedule
+	};
+
+	// Store the original meeting data in case drag is cancelled
+	originalMeetingForReschedule.value = { ...meeting };
+
+	event.dataTransfer.effectAllowed = "move";
+	console.log("Rescheduling meeting:", draggedMeeting.value);
+};
+
+const handleDragEnd = (event) => {
+	// If drag was cancelled (not dropped successfully), restore the original meeting
+	if (originalMeetingForReschedule.value && draggedMeeting.value?.isRescheduling) {
+		// Meeting wasn't successfully dropped, so it's still in the array
+		console.log("Drag cancelled, meeting remains in original position");
+	}
+
+	draggedMeeting.value = null;
+	originalMeetingForReschedule.value = null;
+	isDragOver.value = false;
+	dragOverSlot.value = null;
+};
+
+const handleDragOver = (event, date, time) => {
+	event.preventDefault();
+	event.stopPropagation();
+
+	if (!draggedMeeting.value) return;
+
+	// Check if this is a past time slot
+	if (isPastTimeSlot(date, time)) {
+		event.dataTransfer.dropEffect = "none";
+		return;
+	}
+
+	event.dataTransfer.dropEffect = "move";
+	isDragOver.value = true;
+	dragOverSlot.value = { date, time };
+};
+
+const handleDragLeave = (event) => {
+	// Use a small delay to prevent flickering
+	setTimeout(() => {
+		if (!draggedMeeting.value) return;
+
+		const calendarGrid = document.querySelector(".calendar-grid");
+		if (!calendarGrid) return;
+
+		const rect = calendarGrid.getBoundingClientRect();
+		const x = event.clientX;
+		const y = event.clientY;
+
+		if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+			isDragOver.value = false;
+			dragOverSlot.value = null;
+		}
+	}, 10);
+};
+
+const handleDrop = async (event, date, time) => {
+	event.preventDefault();
+	event.stopPropagation();
+
+	if (!draggedMeeting.value) return;
+
+	// Store the dragged meeting data locally before any async operations
+	// This prevents issues if dragEnd fires before drop completes
+	const droppedMeeting = { ...draggedMeeting.value };
+	const originalMeeting = originalMeetingForReschedule.value
+		? { ...originalMeetingForReschedule.value }
+		: null;
+
+	// Prevent dropping in past time slots
+	if (isPastTimeSlot(date, time)) {
+		notificationStore.addNotification({
+			type: "error",
+			title: "Invalid Time",
+			message: "Cannot schedule meetings in the past",
+			duration: 3000,
+		});
+		// If rescheduling failed, restore the meeting to its original position
+		if (droppedMeeting.isRescheduling) {
+			await loadWeekMeetings();
+		}
+		isDragOver.value = false;
+		dragOverSlot.value = null;
+		draggedMeeting.value = null;
+		originalMeetingForReschedule.value = null;
+		return;
+	}
+
+	// Create datetime string from date and time
+	const startDateTime = `${date} ${time}:00`;
+
+	// Calculate end time (1 hour later)
+	const startDate = new Date(`${date}T${time}:00`);
+	const endDate = new Date(startDate.getTime() + 60 * 60 * 1000);
+	const endTime = `${endDate.getHours().toString().padStart(2, "0")}:${endDate.getMinutes().toString().padStart(2, "0")}:00`;
+	const endDateTime = `${date} ${endTime}`;
+
+	// Create new meeting with the dragged data
+	const newMeeting = {
+		id: droppedMeeting.id || Date.now(), // Use existing ID if available
+		name: droppedMeeting.id, // Store the doctype name if it exists
+		date,
+		scheduledTime: time,
+		address: droppedMeeting.address,
+		notes: droppedMeeting.notes || "",
+		assigned_employee: droppedMeeting.assigned_employee || "",
+		status: "Scheduled",
+	};
+
+	// If this is an existing meeting, update it in the backend
+	if (droppedMeeting.id) {
+		try {
+			loadingStore.setLoading(true);
+
+			const updateData = {
+				start_time: startDateTime,
+				end_time: endDateTime,
+				status: "Scheduled",
+			};
+
+			await Api.updateOnSiteMeeting(droppedMeeting.id, updateData);
+
+			// If this was a reschedule, remove the old meeting from its original position
+			if (droppedMeeting.isRescheduling && originalMeeting) {
+				const oldIndex = meetings.value.findIndex((m) => m.name === droppedMeeting.id);
+				if (oldIndex !== -1) {
+					meetings.value.splice(oldIndex, 1);
+				}
+			}
+
+			// Add to meetings array at new position
+			meetings.value.push(newMeeting);
+
+			// Remove from unscheduled list (if it was unscheduled)
+			if (!droppedMeeting.isRescheduling) {
+				const index = unscheduledMeetings.value.findIndex(
+					(m) => m.name === droppedMeeting.id,
+				);
+				if (index !== -1) {
+					unscheduledMeetings.value.splice(index, 1);
+				}
+			}
+
+			// Show success notification
+			const actionText = droppedMeeting.isRescheduling ? "rescheduled" : "scheduled";
+			notificationStore.addNotification({
+				type: "success",
+				title: `Meeting ${actionText.charAt(0).toUpperCase() + actionText.slice(1)}`,
+				message: `On-site meeting ${actionText} for ${formatDate(date)} at ${formatTimeDisplay(time)}`,
+				duration: 5000,
+			});
+
+			console.log("Meeting scheduled:", newMeeting);
+		} catch (error) {
+			console.error("Error scheduling meeting:", error);
+			notificationStore.addNotification({
+				type: "error",
+				title: "Error",
+				message: "Failed to schedule meeting. Please try again.",
+				duration: 5000,
+			});
+			// On error, reload to restore correct state
+			if (droppedMeeting.isRescheduling) {
+				await loadWeekMeetings();
+			}
+		} finally {
+			loadingStore.setLoading(false);
+		}
+	} else {
+		// For new meetings without an ID, just add to the array
+		meetings.value.push(newMeeting);
+		notificationStore.addNotification({
+			type: "success",
+			title: "Meeting Scheduled",
+			message: `On-site meeting scheduled for ${formatDate(date)} at ${formatTimeDisplay(time)}`,
+			duration: 5000,
+		});
+	}
+
+	// Reset drag state
+	isDragOver.value = false;
+	dragOverSlot.value = null;
+	draggedMeeting.value = null;
+	originalMeetingForReschedule.value = null;
+};
+
+const loadUnscheduledMeetings = async () => {
+	loadingStore.setLoading(true);
+	try {
+		const result = await Api.getUnscheduledOnSiteMeetings();
+		// Ensure we always have an array
+		unscheduledMeetings.value = Array.isArray(result) ? result : [];
+		console.log("Loaded unscheduled meetings:", unscheduledMeetings.value);
+	} catch (error) {
+		console.error("Error loading unscheduled meetings:", error);
+		unscheduledMeetings.value = [];
+		notificationStore.addNotification({
+			type: "error",
+			title: "Error",
+			message: "Failed to load unscheduled meetings",
+			duration: 5000,
+		});
+	} finally {
+		loadingStore.setLoading(false);
+	}
+};
+
+const getStatusColor = (status) => {
+	const statusColors = {
+		Unscheduled: "warning",
+		Scheduled: "info",
+		Completed: "success",
+		Cancelled: "error",
+	};
+	return statusColors[status] || "default";
+};
+
+const loadWeekMeetings = async () => {
+	loadingStore.setLoading(true);
+	try {
+		// Calculate week start and end dates
+		const weekStart = new Date(currentWeekStart.value);
+		weekStart.setDate(weekStart.getDate() - weekStart.getDay());
+
+		const weekEnd = new Date(weekStart);
+		weekEnd.setDate(weekStart.getDate() + 6);
+
+		// Format dates as YYYY-MM-DD strings for the API
+		const weekStartStr = weekStart.toISOString().split("T")[0];
+		const weekEndStr = weekEnd.toISOString().split("T")[0];
+
+		console.log(`Loading meetings for week: ${weekStartStr} to ${weekEndStr}`);
+
+		// Initialize as empty array first
+		meetings.value = [];
+
+		// Try to get meetings from API
+		try {
+			const apiResult = await Api.getWeekOnSiteMeetings(weekStartStr, weekEndStr);
+			if (Array.isArray(apiResult)) {
+				// Transform the API data to match what the calendar expects
+				meetings.value = apiResult
+					.map((meeting) => {
+						// Extract date and time from startTime
+						const startDateTime = meeting.startTime
+							? new Date(meeting.startTime)
+							: null;
+						const date = startDateTime
+							? startDateTime.toISOString().split("T")[0]
+							: null;
+						const time = startDateTime
+							? `${startDateTime.getHours().toString().padStart(2, "0")}:${startDateTime.getMinutes().toString().padStart(2, "0")}`
+							: null;
+
+						return {
+							id: meeting.name,
+							name: meeting.name,
+							date: date,
+							scheduledTime: time,
+							address: meeting.address,
+							notes: meeting.notes,
+							assigned_employee: meeting.assignedEmployee,
+							status: meeting.status,
+							startTime: meeting.startTime,
+							endTime: meeting.endTime,
+						};
+					})
+					.filter((meeting) => meeting.date && meeting.scheduledTime); // Only include meetings with valid date/time
+				console.log("Transformed meetings:", meetings.value);
+			}
+		} catch (apiError) {
+			console.warn("API call failed, using empty array:", apiError);
+			meetings.value = [];
+		}
+
+		// Simulate API response with dummy meetings (commented out for now)
+		// meetings.value = [
+		// 	{
+		// 		id: 1,
+		// 		date: weekDays.value[1]?.date, // Monday
+		// 		scheduledTime: "10:00",
+		// 		address: "123 Main St, Anytown, USA",
+		// 		client: "John Doe",
+		// 		duration: 60,
+		// 		notes: "Initial consultation",
+		// 		status: "scheduled",
+		// 	},
+		// 	{
+		// 		id: 2,
+		// 		date: weekDays.value[3]?.date, // Wednesday
+		// 		scheduledTime: "14:30",
+		// 		address: "456 Oak Ave, Somewhere, USA",
+		// 		client: "Jane Smith",
+		// 		duration: 90,
+		// 		notes: "Follow-up meeting",
+		// 		status: "scheduled",
+		// 	},
+		// ].filter((meeting) => meeting.date); // Filter out undefined dates
+	} catch (error) {
+		console.error("Error loading meetings:", error);
+		// Ensure meetings is always an array even on error
+		meetings.value = [];
+		notificationStore.addNotification({
+			type: "error",
+			title: "Error",
+			message: "Failed to load meetings",
+			duration: 5000,
+		});
+	} finally {
+		loadingStore.setLoading(false);
+	}
+};
+
+const navigateToSpecificMeeting = async () => {
+	if (queryAddress.value) {
+		// TODO: Implement logic to find the meeting by address and navigate to its week
+		// For now, simulate finding an existing meeting and show its details
+		console.log("Navigating to specific meeting for address:", queryAddress.value);
+
+		// Simulate finding the meeting and opening its details
+		const mockMeeting = {
+			id: 999,
+			date: weekDays.value[2]?.date, // Tuesday
+			scheduledTime: "11:00",
+			address: queryAddress.value,
+			client: "Existing Client",
+			duration: 60,
+			notes: "This meeting was found based on the address query parameter",
+			status: "scheduled",
+		};
+
+		if (mockMeeting.date) {
+			// Add to calendar for display
+			meetings.value.push(mockMeeting);
+
+			// Auto-open the details modal
+			setTimeout(() => {
+				showMeetingDetails(mockMeeting);
+			}, 500);
+		}
+	}
+};
+
+// Lifecycle
+onMounted(async () => {
+	initializeWeek();
+	await loadUnscheduledMeetings();
+	await loadWeekMeetings();
+
+	// Handle different modes based on query params
+	if (isNewMode.value) {
+		// New mode - always show create modal (with or without pre-filled address)
+		setTimeout(() => {
+			openNewMeetingModal();
+		}, 500);
+	} else if (queryAddress.value) {
+		// View mode with address - find and show existing meeting details
+		await navigateToSpecificMeeting();
+	}
+});
+
+// Watch for week changes to reload data
+watch(currentWeekStart, () => {
+	loadWeekMeetings();
+});
+
+watch(
+	() => route.query.new,
+	(newVal) => {
+		if (newVal === "true") {
+			openNewMeetingModal();
+		}
+	},
+);
+</script>
+
+<style scoped>
+.schedule-onsite-container {
+	padding: 20px;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+	padding-bottom: 15px;
+	border-bottom: 1px solid #e0e0e0;
+}
+
+.header-controls {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+}
+
+.week-display-btn {
+	font-weight: 600;
+	font-size: 1.1em;
+	color: #1976d2 !important;
+	text-transform: none;
+	letter-spacing: normal;
+	min-width: 280px;
+	max-width: 280px;
+}
+
+.week-display-btn:hover {
+	background-color: rgba(25, 118, 210, 0.08);
+}
+
+.date-text {
+	display: inline-block;
+	text-align: center;
+	width: 100%;
+}
+
+.main-layout {
+	display: flex;
+	gap: 20px;
+	flex: 1;
+	overflow: hidden;
+}
+
+.sidebar {
+	width: 280px;
+	padding: 0 16px;
+	display: flex;
+	flex-direction: column;
+	overflow-y: auto;
+	max-height: calc(100vh - 150px);
+	transition: width 0.3s ease;
+}
+
+.sidebar.collapsed {
+	width: 60px;
+	min-width: 60px;
+}
+
+.sidebar-right {
+	border-left: 1px solid #e0e0e0;
+	padding-left: 16px;
+}
+
+.sidebar-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 12px;
+}
+
+.sidebar-title {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex: 1;
+}
+
+.sidebar-header h4 {
+	font-size: 1.1em;
+	margin: 0;
+}
+
+.unscheduled-meetings-list {
+	flex: 1;
+	overflow-y: auto;
+	padding: 8px 0;
+}
+
+.empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 40px 20px;
+	text-align: center;
+	color: #999;
+}
+
+.empty-state p {
+	margin-top: 12px;
+	font-size: 0.9em;
+}
+
+.pending-meeting {
+	flex: 1;
+}
+
+.meeting-card {
+	border-left: 3px solid #2196f3;
+	cursor: grab;
+	transition: all 0.3s ease;
+}
+
+.meeting-card:hover {
+	transform: translateX(3px);
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.meeting-card:active {
+	cursor: grabbing;
+}
+
+.meeting-title {
+	font-weight: 600;
+	color: #1976d2;
+	margin-bottom: 4px;
+}
+
+.meeting-address {
+	font-size: 0.9em;
+	color: #666;
+	margin-bottom: 4px;
+}
+
+.meeting-duration {
+	font-size: 0.8em;
+	color: #999;
+	display: flex;
+	align-items: center;
+}
+
+.meeting-status {
+	margin-top: 4px;
+}
+
+.meeting-notes {
+	font-size: 0.85em;
+	color: #666;
+	margin-top: 4px;
+	font-style: italic;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+
+.meeting-employee {
+	font-size: 0.8em;
+	color: #999;
+	margin-top: 4px;
+	display: flex;
+	align-items: center;
+}
+
+.calendar-section {
+	flex: 1;
+	overflow: auto;
+}
+
+.weekly-calendar {
+	min-width: 800px;
+	background: white;
+	border-radius: 8px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	overflow-x: auto;
+}
+
+.calendar-header-row {
+	display: grid;
+	grid-template-columns: 80px repeat(7, 1fr);
+	border-bottom: 2px solid #e0e0e0;
+	background-color: #f8f9fa;
+}
+
+.time-column-header {
+	padding: 16px 8px;
+	font-weight: 600;
+	text-align: center;
+	border-right: 1px solid #e0e0e0;
+	color: #666;
+}
+
+.day-header {
+	padding: 12px 8px;
+	text-align: center;
+	border-right: 1px solid #e0e0e0;
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.day-header:hover {
+	background-color: #f0f0f0;
+}
+
+.day-header.today {
+	background-color: #e3f2fd;
+	color: #1976d2;
+}
+
+.day-name {
+	font-weight: 600;
+	font-size: 0.9em;
+	margin-bottom: 4px;
+}
+
+.day-date {
+	font-size: 0.8em;
+	color: #666;
+	margin-bottom: 4px;
+}
+
+.meetings-count {
+	font-size: 0.7em;
+	color: #999;
+	font-weight: 500;
+}
+
+.calendar-grid {
+	display: flex;
+	flex-direction: column;
+}
+
+.time-row {
+	display: grid;
+	grid-template-columns: 80px repeat(7, 1fr);
+	min-height: 40px;
+	border-bottom: 1px solid #f0f0f0;
+}
+
+.time-row:nth-child(odd) {
+	background-color: #fafafa;
+}
+
+.time-column {
+	padding: 8px;
+	border-right: 1px solid #e0e0e0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #f8f9fa;
+}
+
+.time-label {
+	font-size: 0.75em;
+	color: #666;
+	font-weight: 500;
+}
+
+.day-column {
+	border-right: 1px solid #e0e0e0;
+	position: relative;
+	cursor: pointer;
+	transition: background-color 0.2s;
+	min-height: 40px;
+}
+
+.day-column:hover {
+	background-color: #f0f8ff;
+}
+
+.day-column.current-time {
+	background-color: #fff3e0;
+}
+
+.day-column.drag-over {
+	background-color: #e8f5e8;
+	border: 2px dashed #4caf50;
+	box-sizing: border-box;
+}
+
+.day-column.weekend {
+	background-color: #f9f9f9;
+}
+
+.day-column.past-time {
+	background-color: #fafafa;
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+.day-column.past-time:hover {
+	background-color: #fafafa;
+}
+
+.meeting-event {
+	position: absolute;
+	left: 2px;
+	right: 2px;
+	top: 2px;
+	bottom: 2px;
+	color: white;
+	border-radius: 4px;
+	padding: 4px 6px;
+	font-size: 0.7em;
+	cursor: grab;
+	overflow: hidden;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	transition: all 0.2s;
+	z-index: 10;
+}
+
+.meeting-event:active {
+	cursor: grabbing;
+}
+
+.meeting-event.meeting-scheduled {
+	background: linear-gradient(135deg, #2196f3, #1976d2);
+}
+
+.meeting-event.meeting-completed {
+	background: linear-gradient(135deg, #4caf50, #388e3c);
+}
+
+.meeting-event.meeting-overdue {
+	background: linear-gradient(135deg, #f44336, #d32f2f);
+}
+
+.meeting-event:hover {
+	transform: scale(1.02);
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.event-time {
+	font-weight: 600;
+	font-size: 0.8em;
+	margin-bottom: 1px;
+}
+
+.event-address {
+	font-size: 0.65em;
+	opacity: 0.9;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-bottom: 1px;
+}
+
+.event-client {
+	font-size: 0.6em;
+	opacity: 0.8;
+	font-style: italic;
+}
+
+.meeting-details {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.detail-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.new-meeting-form {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.form-group {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.form-group label {
+	font-weight: 500;
+	color: #333;
+	font-size: 0.9em;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+	.main-layout {
+		flex-direction: column;
+	}
+
+	.sidebar {
+		width: 100%;
+		border-right: none;
+		border-bottom: 1px solid #e0e0e0;
+		padding-right: 0;
+		padding-bottom: 20px;
+		max-height: 200px;
+	}
+
+	.calendar-header-row,
+	.time-row {
+		grid-template-columns: 60px repeat(7, 1fr);
+	}
+}
+</style>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index afbdcea..f0abe49 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -11,6 +11,7 @@ import Home from "./components/pages/Home.vue";
 import TestDateForm from "./components/pages/TestDateForm.vue";
 import Client from "./components/pages/Client.vue";
 import ErrorHandlingDemo from "./components/pages/ErrorHandlingDemo.vue";
+import ScheduleOnSite from "./components/pages/ScheduleOnSite.vue";
 
 const routes = [
 	{
@@ -20,6 +21,7 @@ const routes = [
 	{ path: "/calendar", component: Calendar },
 	{ path: "/clients", component: Clients },
 	{ path: "/client", component: Client },
+	{ path: "/schedule-onsite", component: ScheduleOnSite },
 	{ path: "/jobs", component: Jobs },
 	{ path: "/routes", component: Routes },
 	{ path: "/create", component: Create },