diff --git a/ts/view/configuration/Root.vue b/ts/view/configuration/Root.vue
index d6d4bf5a..1ac7608e 100644
--- a/ts/view/configuration/Root.vue
+++ b/ts/view/configuration/Root.vue
@@ -1,3 +1,53 @@
+<style scoped>
+.settings-card {
+	transition:
+		transform 0.2s,
+		box-shadow 0.2s;
+	height: 100%;
+}
+.settings-card:hover {
+	transform: translateY(-5px);
+	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+.settings-icon {
+	font-size: 2.5rem;
+	width: 80px;
+	height: 80px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	margin-bottom: 1.5rem;
+}
+.icon-users {
+	color: #6f42c1;
+	background-color: rgba(111, 66, 193, 0.1);
+}
+.icon-pesticides {
+	color: #198754;
+	background-color: rgba(25, 135, 84, 0.1);
+}
+.icon-integrations {
+	color: #0d6efd;
+	background-color: rgba(13, 110, 253, 0.1);
+}
+.icon-notifications {
+	color: #fd7e14;
+	background-color: rgba(253, 126, 20, 0.1);
+}
+.icon-general {
+	color: #6c757d;
+	background-color: rgba(108, 117, 125, 0.1);
+}
+.icon-equipment {
+	color: #dc3545;
+	background-color: rgba(220, 53, 69, 0.1);
+}
+.last-updated {
+	font-size: 0.8rem;
+	color: #6c757d;
+}
+</style>
 <template>
 	<div class="container py-5">
 		<div class="row mb-4">