diff --git a/frontend/src/components/common/Card.vue b/frontend/src/components/common/Card.vue
new file mode 100644
index 0000000..49296f5
--- /dev/null
+++ b/frontend/src/components/common/Card.vue
@@ -0,0 +1,30 @@
+<template>
+	<div class="card">
+		<slot name="header">
+		</slot>
+		<slot name="content">
+		</slot>
+	</div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.card {
+	width: 200px;
+	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);
+}
+
+.card:hover {
+	/*transform: translateY(-2px);*/
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+</style>
diff --git a/frontend/src/components/common/TodoChart.vue b/frontend/src/components/common/TodoChart.vue
index e62f0a7..8f07255 100644
--- a/frontend/src/components/common/TodoChart.vue
+++ b/frontend/src/components/common/TodoChart.vue
@@ -232,11 +232,13 @@ watch(() => props.completedNumber, (newValue) => {
 
 .chart-wrapper {
 	position: relative;
-	height: 300px;
-	margin-top: 20px;
+	height: 200px;
+	width: 200px;
+	/*margin-top: 20px;*/
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	padding: 0;
 }
 
 .chart-canvas {
diff --git a/frontend/src/components/pages/Home.vue b/frontend/src/components/pages/Home.vue
index 6c60720..9cee6a9 100644
--- a/frontend/src/components/pages/Home.vue
+++ b/frontend/src/components/pages/Home.vue
@@ -4,7 +4,7 @@
 
 		<div class="widgets-grid">
 			<!-- Locates Widget -->
-			<Card class="widget-card">
+			<Card>
 				<template #header>
 					<div class="widget-header">
 						<ShieldSearch class="widget-icon" />
@@ -26,7 +26,7 @@
 				</template>
 			</Card>
 			<!-- Permits Widget -->
-			<Card class="widget-card">
+			<Card >
 				<template #header>
 					<div class="widget-header">
 						<ClipboardCheck class="widget-icon" />
@@ -48,7 +48,7 @@
 				</template>
 			</Card>
 			<!-- Permits Finalization Widget -->
-			<Card class="widget-card">
+			<Card >
 				<template #header>
 					<div class="widget-header">
 						<DoubleCheck class="widget-icon" />
@@ -70,7 +70,7 @@
 				</template>
 			</Card>
 			<!-- Warranties Widget -->
-			<Card class="widget-card">
+			<Card >
 				<template #header>
 					<div class="widget-header">
 						<Shield class="widget-icon" />
@@ -92,7 +92,7 @@
 				</template>
 			</Card>
 			<!-- Incomplete Bids Widget -->
-			<Card class="widget-card">
+			<Card >
 				<template #header>
 					<div class="widget-header">
 						<Edit class="widget-icon" />
@@ -115,7 +115,7 @@
 				</template>
 			</Card>
 			<!-- Unapproved Estimates Widget -->
-			<Card class="widget-card">
+			<Card >
 				<template #header>
 					<div class="widget-header">
 						<ChatBubbleQuestion class="widget-icon" />
@@ -138,7 +138,7 @@
 				</template>
 			</Card>
 			<!-- Half Down Widget -->
-			<Card class="widget-card">
+			<Card >
 				<template #header>
 					<div class="widget-header">
 						<CreditCard class="widget-icon" />
@@ -161,7 +161,7 @@
 				</template>
 			</Card>
 			<!-- Late Balances Widget -->
-			<Card class="widget-card">
+			<Card >
 				<template #header>
 					<div class="widget-header">
 						<CardNoAccess class="widget-icon" />
@@ -184,7 +184,7 @@
 				</template>
 			</Card>
 			<!-- Backflow Tests Widget -->
-			<Card class="widget-card">
+			<Card >
 				<template #header>
 					<div class="widget-header">
 						<WateringSoil class="widget-icon" />
@@ -207,7 +207,7 @@
 				</template>
 			</Card>
 			<!-- Curbing Widget -->
-			<Card class="widget-card">
+			<Card >
 				<template #header>
 					<div class="widget-header">
 						<SoilAlt class="widget-icon" />
@@ -230,7 +230,7 @@
 				</template>
 			</Card>
 			<!-- Hyrdoseeding Widget -->
-			<Card class="widget-card">
+			<Card >
 				<template #header>
 					<div class="widget-header">
 						<SoilAlt class="widget-icon" />
@@ -253,7 +253,7 @@
 				</template>
 			</Card>
 			<!-- Machines Widget -->
-			<Card class="widget-card">
+			<Card >
 				<template #header>
 					<div class="widget-header">
 						<Truck class="widget-icon" />
@@ -276,7 +276,7 @@
 				</template>
 			</Card>
 			<!-- Deliveries Widget -->
-			<Card class="widget-card">
+			<Card >
 				<template #header>
 					<div class="widget-header">
 						<Truck class="widget-icon" />
@@ -305,7 +305,8 @@
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
-import Card from "primevue/card";
+//import Card from "primevue/card";
+import Card from "../common/Card.vue";
 import Tag from "primevue/tag";
 import { Calendar, Community, Hammer, PathArrowSolid, Clock, Shield, ShieldSearch,
 ClipboardCheck, DoubleCheck, CreditCard, CardNoAccess, ChatBubbleQuestion, Edit,
@@ -361,13 +362,15 @@ onMounted(() => {
 }
 
 .widgets-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	display: flex;
+	flex-wrap: wrap;
 	gap: 20px;
-	margin-bottom: 30px;
 }
 
 .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;
@@ -375,7 +378,7 @@ onMounted(() => {
 	transition:
 		transform 0.2s ease,
 		box-shadow 0.2s ease;
-	background-color: var(--theme-surface-alt)
+	background-color: var(--theme-surface-alt);
 }
 
 .widget-card:hover {
@@ -406,6 +409,9 @@ onMounted(() => {
 	display: flex;
 	flex-direction: column;
 	margin: 0;
+	width: 200px;
+	align-items: center;
+	padding: 20px 20px 20px;
 	/*gap: 15px;*/
 }