src/components/ProgressCard/TopTags.tsx

@@ -76,14 +76,20 @@ export default function TopTags({
 
     arr.sort((a, b) => b.amount - a.amount);
 
-    const top = arr.slice(0, 5);
+    const top = arr.slice(0, 4);
     const total = top.reduce((sum, t) => sum + t.amount, 0);
 
     return { items: top, total };
   }, [reportData, mode, selectedPeriodId]);
 
   return (
-    <Box sx={{ display: "grid", gap: 2 }}>
+    <Box
+      sx={{
+        display: "grid",
+        gridTemplateColumns: "repeat(4, 1fr)",
+        gap: 2
+      }}
+    >
       {items.map((item) => (
         <ProgressCard
           key={item.tag}
@@ -91,6 +97,7 @@ export default function TopTags({
           progressAmount={item.amount}
           totalAmount={total}
           compact={compact}
+          colorTheme={mode === "expense" ? "error" : "success"}
         />
       ))}
     </Box>