diff --git a/frontend/src/front/index.tsx b/frontend/src/front/index.tsx
index 5a0df99..8ac4174 100644
--- a/frontend/src/front/index.tsx
+++ b/frontend/src/front/index.tsx
@@ -8,34 +8,30 @@ const CategoryColor: Record<
 	keyof ReturnType<SearchImageStore["categories"]>,
 	string
 > = {
-	contact: "bg-red-500",
-	location: "bg-green-500",
-	event: "bg-blue-500",
-	note: "bg-purple-500",
+	contact: "bg-orange-50",
+	location: "bg-red-50",
+	event: "bg-purple-50",
+	note: "bg-green-50",
 };
 
 export const Categories: Component = () => {
 	const { categories } = useSearchImageContext();
 
-	createEffect(() => {
-		console.log(categories());
-	});
-
 	return (
-		<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-2">
+		<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4 rounded-xl bg-white p-4">
 			<For each={Object.entries(categories())}>
 				{([category, group]) => (
 					<div
 						class={
-							"col-span-2 flex flex-col " +
+							"col-span-2 flex flex-col justify-center items-center rounded-lg p-4 border border-neutral-200 " +
+							"capitalize " +
 							CategoryColor[category as keyof typeof CategoryColor] +
 							" " +
 							(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
 						}
 					>
-						<p class="uppercase">
-							{category}: {group.length}
-						</p>
+						<p class="text-xl font-bold">{category}s</p>
+						<p class="text-lg">{group.length}</p>
 					</div>
 				)}
 			</For>