Styling to help the todo list cards fit the overall sytle better.

frontend/src/components/clientSubPages/Overview.vue

@@ -149,11 +149,6 @@
 		</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>
@@ -171,6 +166,11 @@
 					</small>
 				</div>
 			</div>
+
+			<!-- Client History  -->
+			<div class="info-card">
+				<History/>
+			</div>
 		</div>
 
 		<!-- Edit Confirmation Dialog -->

frontend/src/components/pages/Client.vue

@@ -9,7 +9,6 @@
 				<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">
@@ -25,9 +24,6 @@
 				<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 class="widget-card">
+			<Card>
 				<template #header>
 					<div class="widget-header">
 						<Edit class="widget-icon" />
@@ -27,7 +27,7 @@
 				</template>
 			</Card>
 			<!-- Unapproved Estimates Widget -->
-			<Card class="widget-card">
+			<Card>
 				<template #header>
 					<div class="widget-header">
 						<ChatBubbleQuestion class="widget-icon" />
@@ -50,7 +50,7 @@
 				</template>
 			</Card>
 			<!-- Half Down Widget -->
-			<Card class="widget-card">
+			<Card>
 				<template #header>
 					<div class="widget-header">
 						<CreditCard class="widget-icon" />
@@ -73,7 +73,7 @@
 				</template>
 			</Card>
 			<!-- Late Balances Widget -->
-			<Card class="widget-card">
+			<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 "primevue/card";
+import Card from "../common/Card.vue";
 import DataTable from "../common/DataTable.vue";
 import StatusChart from "../common/StatusChart.vue";
 import Api from "../../api";
@@ -462,25 +462,10 @@ onMounted(async () => {
 </script scoped>
 <style lang="css">
 .widgets-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-	gap: 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;
+	flex-wrap: wrap;
-	transition:
+	gap: 20px;
-		transform 0.2s ease,
+	margin-bottom: 20px;
-		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 {
@@ -506,13 +491,20 @@ 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,25 +367,6 @@ 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;