diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 89f3eea13..82a0fb88f 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -32,8 +32,8 @@ export const CardComponent = ({
           <div className="flex gap-4 items-center">
             <span
               className={
-                "rounded-full w-8 h-8 flex items-center justify-center text-2xl " +
-                gradients[parseInt(flow.id.slice(0, 6), 16) % gradients.length]
+                "rounded-full w-7 h-7 flex items-center justify-center text-2xl " +
+                gradients[parseInt(flow.id.slice(0, 6), 30) % gradients.length]
               }
             ></span>
             <span className="flex-1 truncate-doubleline">{flow.name}</span>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index dc7759029..31c52221c 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -3,112 +3,93 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
+	:root {
+	  --background: 0 0% 100%; /* hsl(0 0% 100%) */
+	  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+	  --muted: 210 40% 96.1%; /* hsl(210 40% 96%) */
+	  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
+	  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
+	  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
+	  --card: 0 0% 100%; /* hsl(0 0% 100%) */
+	  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+	  --border: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
+	  --input: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+	  --primary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+	  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+	  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
+	  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+	  --accent: 210 40% 96.1%; /* hsl(210 40% 96%) */
+	  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
 
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
+	  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
+	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
 
-    --ring: 215 20.2% 65.1%;
+	  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
 
     --radius: 0.5rem;
   }
 
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
+	.dark {
+	  --background: 224 71% 4%; /* hsl(224 71% 4%) */
+	  --foreground: 213 31% 91%; /* hsl(213 31% 91%) */
 
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
+	  --muted: 223 47% 11%; /* hsl(223 47% 11%) */
+	  --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
 
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
+	  --popover: 224 71% 4%; /* hsl(224 71% 4%) */
+	  --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
 
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
+	  --card: 224 71% 4%; /* hsl(224 71% 4%) */
+	  --card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
 
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
+	  --border: 216 34% 17%; /* hsl(216 34% 17%) */
+	  --input: 216 34% 17%; /* hsl(216 34% 17%) */
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
+	  --primary: 210 40% 98%; /* hsl(210 40% 98%) */
+	  --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
 
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
+	  --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+	  --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
 
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
+	  --accent: 216 34% 17%; /* hsl(216 34% 17%) */
+	  --accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
 
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
+	  --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
+	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
 
-    --ring: 216 34% 17%;
+	  --ring: 216 34% 17%; /* hsl(216 34% 17%) */
 
     --radius: 0.5rem;
   }
 }
 
 :root {
-  --background: 0 0% 100%;
-  /* hsl(0 0% 100%) */
-  --foreground: 222.2 47.4% 11.2%;
-  /* hsl(222 47% 11%) */
-  --muted: 210 40% 98%;
-  /* hsl(210 40% 98%) */
-  --muted-foreground: 215.4 16.3% 46.9%;
-  /* hsl(215 16% 46%) */
-  --popover: 0 0% 100%;
-  /* hsl(0 0% 100%) */
-  --popover-foreground: 222.2 47.4% 11.2%;
-  /* hsl(222 47% 11%) */
-  --card: 0 0% 100%;
-  /* hsl(0 0% 100%) */
-  --card-foreground: 222.2 47.4% 11.2%;
-  /* hsl(222 47% 11%) */
-  --border: 214.3 31.8% 91.4%;
-  /* hsl(214 32% 91%) */
-  --input: 214.3 31.8% 91.4%;
-  /* hsl(214 32% 91%) */
-  --primary: 222.2 47.4% 18%;
-  /* hsl(222 47% 18%) */
-  --primary-foreground: 210 40% 98%;
-  /* hsl(210 40% 98%) */
-  --secondary: 210 40% 96.1%;
-  /* hsl(210 40% 96%) */
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  /* hsl(222 47% 11%) */
-  --accent: 210 40% 96.1%;
-  /* hsl(210 40% 96%) */
-  --accent-foreground: 222.2 47.4% 11.2%;
-  /* hsl(222 47% 11%) */
-  --destructive: 0 100% 50%;
-  /* hsl(0 100% 50%) */
-  --destructive-foreground: 210 40% 98%;
-  /* hsl(210 40% 98%) */
-  --ring: 215 20.2% 65.1%;
-  /* hsl(215 20% 65%) */
+  --background: 0 0% 100%; /* hsl(0 0% 100%) */
+  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --muted: 210 40% 98%; /* hsl(210 40% 98%) */
+  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
+  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
+  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --card: 0 0% 100%; /* hsl(0 0% 100%) */
+  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --border: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
+  --input: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
+  --primary: 222.2 47.4% 18%; /* hsl(222 47% 18%) */
+  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
+  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --accent: 210 30% 96.1%; /* hsl(210 30% 96%) */
+  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
+  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
   --radius: 0.5rem;
 }
 
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 2d57d4329..60bfdf3dd 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -212,6 +212,25 @@ export const gradients = [
   "bg-gradient-to-br from-green-500 to-green-700",
   "bg-gradient-to-br from-rose-400 via-fuchsia-500 to-indigo-500",
   "bg-gradient-to-br from-sky-400 to-blue-500",
+
+  // copilot generated:
+  // "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900",
+  // "bg-gradient-to-br from-green-200 via-green-300 to-blue-500",
+  // "bg-gradient-to-br from-yellow-200 via-yellow-400 to-yellow-700",
+  // "bg-gradient-to-br from-green-200 via-green-400 to-purple-700",
+  // "bg-gradient-to-br from-blue-100 via-blue-300 to-blue-500",
+  // "bg-gradient-to-br from-purple-400 to-yellow-400",
+  // "bg-gradient-to-br from-red-800 via-yellow-600 to-yellow-500",
+  // "bg-gradient-to-br from-blue-300 via-green-200 to-yellow-300",
+  // "bg-gradient-to-br from-blue-700 via-blue-800 to-gray-900",
+  // "bg-gradient-to-br from-green-300 to-purple-400",
+  // "bg-gradient-to-br from-yellow-200 via-pink-200 to-pink-400",
+  // "bg-gradient-to-br from-green-500 to-green-700",
+  // "bg-gradient-to-br from-rose-400 via-fuchsia-500 to-indigo-500",
+  // "bg-gradient-to-br from-sky-400 to-blue-500",
+  // "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900",
+  // "bg-gradient-to-br from-green-200 via-green-300 to-blue-500",
+  // "bg-gradient-to-br from-yellow-200 via-yellow-400 to-yellow-700",
 ];
 
 export const bgColors = {