diff --git a/frontend/src/components/clientSubPages/Overview.vue b/frontend/src/components/clientSubPages/Overview.vue
index 27f1a01..ef54bde 100644
--- a/frontend/src/components/clientSubPages/Overview.vue
+++ b/frontend/src/components/clientSubPages/Overview.vue
@@ -1,127 +1,165 @@
 <template>
 	<div class="overview-container">
-		<template v-if="!editMode">
-			<Button
-				@click="toggleEditMode"
-				icon="pi pi-pencil"
-				label="Edit Information"
-				size="small"
-				severity="secondary"
+		<template v-if="isNew || editMode">
+			<ClientInformationForm
+				ref="clientInfoRef"
+				:form-data="formData"
+				@update:form-data="formData = $event"
+				:is-submitting="isSubmitting"
+				:is-edit-mode="editMode"
+				@new-client-toggle="handleNewClientToggle"
+				@customer-selected="handleCustomerSelected"
+			/>
+
+			<ContactInformationForm
+				ref="contactInfoRef"
+				:form-data="formData"
+				@update:form-data="formData = $event"
+				:is-submitting="isSubmitting"
+				:is-edit-mode="editMode"
+				:is-new-client-locked="isNewClientMode"
+				:available-contacts="availableContacts"
+				@new-contact-toggle="handleNewContactToggle"
+			/>
+
+			<AddressInformationForm
+				:form-data="formData"
+				@update:form-data="formData = $event"
+				:is-submitting="isSubmitting"
+				:is-edit-mode="editMode"
 			/>
 		</template>
-		<div class="status-cards">
-				<template v-if="isNew || editMode">
-				<template v-if="isNew || editMode">
-				<ClientInformationForm
-					ref="clientInfoRef"
-					:form-data="formData"
-				@update:form-data="formData = $event"
-					:is-submitting="isSubmitting"
-					:is-edit-mode="editMode"
-					@new-client-toggle="handleNewClientToggle"
-					@customer-selected="handleCustomerSelected"
-				/>
 
-				<ContactInformationForm
-					ref="contactInfoRef"
-					:form-data="formData"
-				@update:form-data="formData = $event"
-					:is-submitting="isSubmitting"
-					:is-edit-mode="editMode"
-					:is-new-client-locked="isNewClientMode"
-					:available-contacts="availableContacts"
-					@new-contact-toggle="handleNewContactToggle"
-				/>
-
-				<AddressInformationForm
-					:form-data="formData"
-				@update:form-data="formData = $event"
-					:is-submitting="isSubmitting"
-					:is-edit-mode="editMode"
-				/>
-			</template>
-
-			<!-- Display Mode (existing client view) -->
-			<template v-else>
-				<!-- Address Info Card -->
-				<div class="info-card" v-if="selectedAddressData">
-					<h3>General Information</h3>
-					<div class="info-grid">
-						<div class="info-item full-width">
-							<label>Address Title:</label>
-							<span>{{ selectedAddressData.addressTitle || "N/A" }}</span>
-						</div>
-						<div class="info-item full-width">
-							<label>Full Address:</label>
-							<span>{{ fullAddress }}</span>
-						</div>
-						<div class="info-item full-width">
-							<label>City:</label>
-							<span>{{ selectedAddressData.city || "N/A" }}</span>
-						</div>
-						<div class="info-item full-width">
-							<label>State:</label>
-							<span>{{ selectedAddressData.state || "N/A" }}</span>
-						</div>
-						<div class="info-item full-width">
-							<label>Zip Code:</label>
-							<span>{{ selectedAddressData.pincode || "N/A" }}</span>
-						</div>
+		<!-- Display Mode (existing client view) -->
+		<template v-else>
+			<!-- Client Basic Info Card -->
+			<div class="info-card">
+				<div class="card-header">
+					<h3>Client Information</h3>
+					<Button
+						@click="toggleEditMode"
+						icon="pi pi-pencil"
+						label="Edit"
+						size="small"
+						severity="secondary"
+					/>
+				</div>
+				<div class="info-grid">
+					<div class="info-item">
+						<label>Customer Name:</label>
+						<span>{{ clientData?.customerName || "N/A" }}</span>
+					</div>
+					<div class="info-item">
+						<label>Customer Type:</label>
+						<span>{{ clientData?.customerType || "N/A" }}</span>
+					</div>
+					<div class="info-item">
+						<label>Customer Group:</label>
+						<span>{{ clientData?.customerGroup || "N/A" }}</span>
+					</div>
+					<div class="info-item">
+						<label>Territory:</label>
+						<span>{{ clientData?.territory || "N/A" }}</span>
 					</div>
 				</div>
+			</div>
 
-				<!-- Client Basic Info Card -->
-				<div class="info-card">
-					<h3>Contact Information</h3>
-					<template v-if="contactsForAddress.length > 0">
-						<div class="info-grid">
-							<div class="info-item">
-								<label>Customer Name:</label>
-								<span>{{ clientData?.customerName || "N/A" }}</span>
-							</div>
-							<div class="info-item">
-								<label>Customer Type:</label>
-								<span>{{ clientData?.customerType || "N/A" }}</span>
-							</div>
-							<div v-if="contactsForAddress.length > 1" class="contact-selector">
-								<Dropdown
-									v-model="selectedContactIndex"
-									:options="contactOptions"
-									option-label="label"
-									option-value="value"
-									placeholder="Select Contact"
-									class="w-full"
-								/>
-							</div>
-							<div class="info-grid">
-								<div class="info-item">
-									<label>Contact Name:</label>
-									<span>{{ contactFullName }}</span>
-								</div>
-								<div class="info-item">
-									<label>Phone:</label>
-									<span>{{ primaryContactPhone }}</span>
-								</div>
-								<div class="info-item">
-									<label>Email:</label>
-									<span>{{ primaryContactEmail }}</span>
-								</div>
-							</div>
-							<div class="info-item">
-								<label>Customer Group:</label>
-								<span>{{ clientData?.customerGroup || "N/A" }}</span>
-							</div>
-							<div class="info-item">
-								<label>Territory:</label>
-								<span>{{ clientData?.territory || "N/A" }}</span>
-							</div>
-						</div>
-					</template>
-					<template v-else>
-						<p>No contacts available for this address.</p>
-					</template>
+			<!-- Address Info Card -->
+			<div class="info-card" v-if="selectedAddressData">
+				<h3>Address Information</h3>
+				<div class="info-grid">
+					<div class="info-item full-width">
+						<label>Address Title:</label>
+						<span>{{ selectedAddressData.addressTitle || "N/A" }}</span>
+					</div>
+					<div class="info-item full-width">
+						<label>Full Address:</label>
+						<span>{{ fullAddress }}</span>
+					</div>
+					<div class="info-item">
+						<label>City:</label>
+						<span>{{ selectedAddressData.city || "N/A" }}</span>
+					</div>
+					<div class="info-item">
+						<label>State:</label>
+						<span>{{ selectedAddressData.state || "N/A" }}</span>
+					</div>
+					<div class="info-item">
+						<label>Zip Code:</label>
+						<span>{{ selectedAddressData.pincode || "N/A" }}</span>
+					</div>
 				</div>
-			</template>
+			</div>
+
+			<!-- Contact Info Card -->
+			<div class="info-card" v-if="selectedAddressData">
+				<h3>Contact Information</h3>
+				<template v-if="contactsForAddress.length > 0">
+					<div v-if="contactsForAddress.length > 1" class="contact-selector">
+						<Dropdown
+							v-model="selectedContactIndex"
+							:options="contactOptions"
+							option-label="label"
+							option-value="value"
+							placeholder="Select Contact"
+							class="w-full"
+						/>
+					</div>
+					<div class="info-grid">
+						<div class="info-item">
+							<label>Contact Name:</label>
+							<span>{{ contactFullName }}</span>
+						</div>
+						<div class="info-item">
+							<label>Phone:</label>
+							<span>{{ primaryContactPhone }}</span>
+						</div>
+						<div class="info-item">
+							<label>Email:</label>
+							<span>{{ primaryContactEmail }}</span>
+						</div>
+					</div>
+				</template>
+				<template v-else>
+					<p>No contacts available for this address.</p>
+				</template>
+			</div>
+		</template>
+
+		<!-- Status Cards (only for existing clients) -->
+		<div class="status-cards" v-if="!isNew && !editMode && selectedAddressData">
+			<div class="status-card">
+				<h4>On-Site Meeting</h4>
+				<Button
+					:label="selectedAddressData.customOnsiteMeetingScheduled || 'Not Started'"
+					:severity="getStatusSeverity(selectedAddressData.customOnsiteMeetingScheduled)"
+					@click="handleStatusClick('onsite')"
+				/>
+			</div>
+			<div class="status-card">
+				<h4>Estimate Sent</h4>
+				<Button
+					:label="selectedAddressData.customEstimateSentStatus || 'Not Started'"
+					:severity="getStatusSeverity(selectedAddressData.customEstimateSentStatus)"
+					@click="handleStatusClick('estimate')"
+				/>
+			</div>
+			<div class="status-card">
+				<h4>Job Status</h4>
+				<Button
+					:label="selectedAddressData.customJobStatus || 'Not Started'"
+					:severity="getStatusSeverity(selectedAddressData.customJobStatus)"
+					@click="handleStatusClick('job')"
+				/>
+			</div>
+			<div class="status-card">
+				<h4>Payment Received</h4>
+				<Button
+					:label="selectedAddressData.customPaymentReceivedStatus || 'Not Started'"
+					:severity="getStatusSeverity(selectedAddressData.customPaymentReceivedStatus)"
+					@click="handleStatusClick('payment')"
+				/>
+			</div>
 		</div>
 
 		<!-- Form Actions -->
@@ -372,7 +410,7 @@ const isFormValid = computed(() => {
 	const hasCity = formData.value.city?.trim();
 	const hasState = formData.value.state?.trim();
 	const hasContacts = formData.value.contacts && formData.value.contacts.length > 0;
-
+	
 	// Check that all contacts have required fields
 	const allContactsValid = formData.value.contacts?.every((contact) => {
 		return (
@@ -648,7 +686,7 @@ const handleCancel = () => {
 
 .info-item {
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
 	gap: 0.5rem;
 }