frontend/src/components/clientSubPages/Overview.vue

@@ -149,6 +149,11 @@
 		</div>
 
 		<div class="status-cards">
+			<!-- Client History  -->
+			<div class="info-card">
+				<History/>
+			</div>
+
 			<!-- Location Map (only for existing clients) -->
 			<div class="map-card" v-if="!isNew && !editMode">
 				<h3>Location</h3>
@@ -166,11 +171,6 @@
 					</small>
 				</div>
 			</div>
-
-			<!-- Client History  -->
-			<div class="info-card">
-				<History/>
-			</div>
 		</div>
 
 		<!-- Edit Confirmation Dialog -->

frontend/src/components/pages/Client.vue

@@ -9,6 +9,7 @@
 				<Tab value="0">Overview</Tab>
 				<Tab value="1">Projects <span class="tab-info-alert">1</span></Tab>
 				<Tab value="2">Financials</Tab>
+				<Tab value="3">History</Tab>
 			</TabList>
 			<TabPanels>
 				<TabPanel value="0">
@@ -24,6 +25,9 @@
 				<TabPanel value="2">
 					<div id="financials-tab"><h3>Accounting</h3></div>
 				</TabPanel>
+				<TabPanel value="3">
+					<div id="history-tab"><h3>History</h3></div>
+				</TabPanel>
 			</TabPanels>
 		</Tabs>
 	</div>

frontend/src/components/pages/Clients.vue

@@ -4,7 +4,7 @@
 		<!-- Status Chart Section -->
 		<div class="widgets-grid">
 			<!-- Incomplete Bids Widget -->
-			<Card>
+			<Card class="widget-card">
 				<template #header>
 					<div class="widget-header">
 						<Edit class="widget-icon" />
@@ -27,7 +27,7 @@
 				</template>
 			</Card>
 			<!-- Unapproved Estimates Widget -->
-			<Card>
+			<Card class="widget-card">
 				<template #header>
 					<div class="widget-header">
 						<ChatBubbleQuestion class="widget-icon" />
@@ -50,7 +50,7 @@
 				</template>
 			</Card>
 			<!-- Half Down Widget -->
-			<Card>
+			<Card class="widget-card">
 				<template #header>
 					<div class="widget-header">
 						<CreditCard class="widget-icon" />
@@ -73,7 +73,7 @@
 				</template>
 			</Card>
 			<!-- Late Balances Widget -->
-			<Card>
+			<Card class="widget-card">
 				<template #header>
 					<div class="widget-header">
 						<CardNoAccess class="widget-icon" />
@@ -113,7 +113,7 @@
 </template>
 <script setup>
 import { onMounted, ref, watch, computed } from "vue";
-import Card from "../common/Card.vue";
+import Card from "primevue/card";
 import DataTable from "../common/DataTable.vue";
 import StatusChart from "../common/StatusChart.vue";
 import Api from "../../api";
@@ -462,10 +462,25 @@ onMounted(async () => {
 </script scoped>
 <style lang="css">
 .widgets-grid {
-	display: flex;
-	flex-wrap: wrap;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 	gap: 20px;
-	margin-bottom: 20px;
+	margin-bottom: 30px;
+}
+.widget-card {
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	border-radius: 12px;
+	display: flex;
+	justify-content: space-between;
+	transition:
+		transform 0.2s ease,
+		box-shadow 0.2s ease;
+	background-color: var(--theme-surface-alt)
+}
+
+.widget-card:hover {
+	/*transform: translateY(-2px);*/
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 }
 
 .widget-header {
@@ -491,20 +506,13 @@ onMounted(async () => {
 	display: flex;
 	flex-direction: column;
 	margin: 0;
-	width: 200px;
-	align-items: center;
-	padding: 20px 20px 20px;
 	/*gap: 15px;*/
 }
 .sidebar-button {
 	justify-content: center;
 }
-
 .page-container {
 	height: 100%;
-	margin: 20px;
-	gap: 20px;
-	background-color: transparent;
 }
 
 .chart-section {

frontend/src/components/pages/Home.vue

@@ -367,6 +367,25 @@ onMounted(() => {
 	gap: 20px;
 }
 
+.widget-card {
+	flex-grow: 1;
+	flex-shrink: 1;
+	flex-basis: 20%;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	border-radius: 12px;
+	display: flex;
+	justify-content: space-between;
+	transition:
+		transform 0.2s ease,
+		box-shadow 0.2s ease;
+	background-color: var(--theme-surface-alt);
+}
+
+.widget-card:hover {
+	/*transform: translateY(-2px);*/
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
 .widget-header {
 	display: flex;
 	align-items: center;