diff --git a/ts/style/style.scss b/ts/style/style.scss
index db2a5526..6211480d 100644
--- a/ts/style/style.scss
+++ b/ts/style/style.scss
@@ -1,7 +1,3 @@
-@use "sass:map";
-// 1. Include specific theme variables
-@import "variables.scss";
-
 @keyframes spin {
 	0% {
 		transform: rotate(0deg);
diff --git a/ts/view/configuration/UploadDetail.vue b/ts/view/configuration/UploadDetail.vue
index 52aa36b1..28da7f53 100644
--- a/ts/view/configuration/UploadDetail.vue
+++ b/ts/view/configuration/UploadDetail.vue
@@ -1,4 +1,4 @@
-<style scoped>
+<style scoped lang="scss">
 .results-container {
 	max-width: 1400px;
 }
@@ -37,6 +37,48 @@ thead tr.header {
 	height: 400px;
 	width: 100%;
 }
+.badge.dry {
+	background-color: $info;
+}
+.badge.empty {
+	background-color: #9c9bc0;
+}
+.badge.false.pool {
+	background-color: #6b2737;
+}
+.badge.green {
+	background-color: #4b6827;
+}
+.badge.murky {
+	background-color: #88bc4e;
+}
+.badge.unknown {
+	background-color: gray;
+}
+.summary-card {
+	transition: transform 0.2s;
+}
+.summary-card:hover {
+	transform: translateY(-5px);
+}
+.badge.status {
+	font-size: 0.85rem;
+}
+.badge.status.existing {
+	background-color: $secondary;
+}
+.badge.status.new {
+	background-color: $primary;
+}
+.badge.status.outside {
+	background-color: $warning;
+}
+.badge.status.unknown {
+	background-color: gray;
+}
+tr.has-error {
+	background-color: rgba(255, 193, 7, 0.15) !important;
+}
 </style>
 <template>
 	<div class="container mt-4 results-container">
diff --git a/vite.config.ts b/vite.config.ts
index 9adcdfb7..3d8b5354 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,6 +14,7 @@ export default defineConfig({
 	css: {
 		preprocessorOptions: {
 			scss: {
+				additionalData: `@use "sass:map";\n@import "@/style/variables.scss";`,
 				api: "modern-compiler",
 				silenceDeprecations: [
 					"import",