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