Update frontend dependencies and enhance UI components for better user experience

- Updated Tailwind CSS version to 4.1.18 in package.json and package-lock.json.
- Introduced a reusable GradientBadge component for consistent styling across the application.
- Improved layout and typography in DashboardAdCard and AdCard components for better readability and interaction.
- Added loading states and error handling in new AnglesPage and ConceptsPage components.
- Enhanced progress components in the generation workflow to provide better user feedback during ad generation.

frontend/app/generate/batch/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { BatchForm } from "@/components/generation/BatchForm";
-import { ProgressBar } from "@/components/ui/ProgressBar";
-import { Card, CardContent } from "@/components/ui/Card";
+import { BatchProgressComponent } from "@/components/generation/BatchProgress";
+import { Card } from "@/components/ui/Card";
 import { generateBatch } from "@/lib/api/endpoints";
 import { toast } from "react-hot-toast";
 import { AdPreview } from "@/components/generation/AdPreview";
@@ -15,22 +15,57 @@ export default function BatchGeneratePage() {
   const [isGenerating, setIsGenerating] = useState(false);
   const [progress, setProgress] = useState(0);
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [batchCount, setBatchCount] = useState(0);
+  const [batchImagesPerAd, setBatchImagesPerAd] = useState(1);
+  const [generationStartTime, setGenerationStartTime] = useState<number | null>(null);
+
+  // Request notification permission
+  useEffect(() => {
+    if ("Notification" in window && Notification.permission === "default") {
+      Notification.requestPermission();
+    }
+  }, []);
+
+  // Show notification when batch completes
+  useEffect(() => {
+    if (progress >= 100 && results.length > 0) {
+      if ("Notification" in window && Notification.permission === "granted") {
+        new Notification("Batch Generation Complete!", {
+          body: `Successfully generated ${results.length} ads!`,
+          icon: "/favicon.ico",
+          tag: "batch-complete",
+        });
+      }
+    }
+  }, [progress, results.length]);
 
   const handleGenerate = async (data: { niche: Niche; count: number; images_per_ad: number; image_model?: string | null }) => {
     setResults([]);
     setIsGenerating(true);
     setProgress(0);
     setCurrentIndex(0);
+    setBatchCount(data.count);
+    setBatchImagesPerAd(data.images_per_ad);
+    setGenerationStartTime(Date.now());
 
     // Estimate time per ad (roughly 30-60 seconds per ad)
     const estimatedTimePerAd = 45; // seconds
     const totalEstimatedTime = data.count * estimatedTimePerAd;
     let elapsedTime = 0;
+    let currentAdIndex = 0;
     const progressInterval = 500; // Update every 500ms
 
-    // Start progress simulation
+    // Start progress simulation with ad tracking
     const progressIntervalId = setInterval(() => {
       elapsedTime += progressInterval / 1000; // Convert to seconds
+      
+      // Estimate which ad we're on based on elapsed time
+      const estimatedAdIndex = Math.min(data.count - 1, Math.floor(elapsedTime / estimatedTimePerAd));
+      if (estimatedAdIndex !== currentAdIndex) {
+        currentAdIndex = estimatedAdIndex;
+        setCurrentIndex(currentAdIndex);
+      }
+      
       // Calculate progress: start at 5%, reach 90% by estimated time
       const progress = Math.min(90, 5 + (elapsedTime / totalEstimatedTime) * 85);
       setProgress(progress);
@@ -40,11 +75,13 @@ export default function BatchGeneratePage() {
       const result = await generateBatch(data);
       clearInterval(progressIntervalId);
       setResults(result.ads);
+      setCurrentIndex(data.count - 1); // Set to last ad
       setProgress(100);
       toast.success(`Successfully generated ${result.count} ads!`);
     } catch (error: any) {
       clearInterval(progressIntervalId);
       setProgress(0);
+      setCurrentIndex(0);
       toast.error(error.message || "Failed to generate batch");
     } finally {
       setIsGenerating(false);
@@ -70,38 +107,21 @@ export default function BatchGeneratePage() {
       </div>
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Progress Component - Sticky at top */}
+        {isGenerating && (
+          <BatchProgressComponent
+            progress={progress}
+            currentIndex={currentIndex}
+            totalCount={batchCount}
+            imagesPerAd={batchImagesPerAd}
+            generationStartTime={generationStartTime}
+          />
+        )}
+
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
         {/* Left Column - Form */}
         <div className="lg:col-span-1">
           <BatchForm onSubmit={handleGenerate} isLoading={isGenerating} />
-          
-          {isGenerating && (
-            <Card variant="glass" className="mt-6 animate-scale-in">
-              <CardContent className="pt-6">
-                <div className="space-y-4">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center space-x-3">
-                      <div className="relative">
-                        <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full animate-ping opacity-20"></div>
-                        <div className="relative bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full p-2">
-                          <Sparkles className="h-5 w-5 text-white animate-pulse" />
-                        </div>
-                      </div>
-                      <div>
-                        <p className="font-semibold text-gray-900">Generating Batch Ads</p>
-                        <p className="text-sm text-gray-600">Creating multiple ad variations...</p>
-                      </div>
-                    </div>
-                  </div>
-                  <ProgressBar
-                    progress={progress}
-                    label="Batch Generation Progress"
-                    showPercentage={true}
-                  />
-                </div>
-              </CardContent>
-            </Card>
-          )}
         </div>
 
         {/* Right Column - Results */}

frontend/app/generate/matrix/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { AngleSelector } from "@/components/matrix/AngleSelector";
 import { ConceptSelector } from "@/components/matrix/ConceptSelector";
 import { GenerationForm } from "@/components/generation/GenerationForm";
@@ -22,10 +22,12 @@ export default function MatrixGeneratePage() {
     currentGeneration,
     progress,
     isGenerating,
+    generationStartTime,
     setCurrentGeneration,
     setProgress,
     setIsGenerating,
     setError,
+    setGenerationStartTime,
     reset,
   } = useGenerationStore();
 
@@ -35,6 +37,31 @@ export default function MatrixGeneratePage() {
   const [numImages, setNumImages] = useState(1);
   const [imageModel, setImageModel] = useState<string | null>(null);
 
+  // Request notification permission and show notification when generation completes
+  const showNotification = (title: string, body: string) => {
+    if ("Notification" in window && Notification.permission === "granted") {
+      new Notification(title, {
+        body,
+        icon: "/favicon.ico",
+        tag: "generation-complete",
+      });
+    }
+  };
+
+  // Request notification permission on mount
+  useEffect(() => {
+    if ("Notification" in window && Notification.permission === "default") {
+      Notification.requestPermission();
+    }
+  }, []);
+
+  // Show notification when generation completes
+  useEffect(() => {
+    if (progress.step === "complete" && currentGeneration) {
+      showNotification("Ad Generated Successfully!", "Your ad is ready to view.");
+    }
+  }, [progress.step, currentGeneration]);
+
   const handleGenerate = async () => {
     if (!selectedAngle || !selectedConcept) {
       toast.error("Please select both an angle and a concept");
@@ -43,6 +70,7 @@ export default function MatrixGeneratePage() {
 
     reset();
     setIsGenerating(true);
+    setGenerationStartTime(Date.now());
     setProgress({
       step: "copy",
       progress: 10,
@@ -98,18 +126,25 @@ export default function MatrixGeneratePage() {
       </div>
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Progress Component - Sticky at top */}
+        {isGenerating && (
+          <GenerationProgressComponent progress={progress} generationStartTime={generationStartTime} />
+        )}
+
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
         {/* Left Column - Selection */}
         <div className="lg:col-span-1 space-y-6">
-          <Card variant="glass" className="animate-slide-in">
+          <Card variant="glass" className="animate-slide-in border-2 border-transparent hover:border-blue-200/50 transition-all duration-300">
             <CardHeader>
-              <CardTitle>Configuration</CardTitle>
+              <CardTitle className="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+                Configuration
+              </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
               <div>
                 <label className="block text-sm font-semibold text-gray-700 mb-2">Niche</label>
                 <select
-                  className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-250"
+                  className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-250 hover:border-blue-300"
                   value={niche}
                   onChange={(e) => setNiche(e.target.value as Niche)}
                 >
@@ -121,7 +156,7 @@ export default function MatrixGeneratePage() {
               <div>
                 <label className="block text-sm font-semibold text-gray-700 mb-2">Image Model</label>
                 <select
-                  className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-250"
+                  className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 bg-white/80 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 transition-all duration-250 hover:border-cyan-300"
                   value={imageModel || ""}
                   onChange={(e) => setImageModel(e.target.value || null)}
                 >
@@ -135,14 +170,17 @@ export default function MatrixGeneratePage() {
 
               <div>
                 <label className="block text-sm font-semibold text-gray-700 mb-2">
-                  Number of Images: <span className="text-blue-600 font-bold">{numImages}</span>
+                  Number of Images: <span className="text-cyan-600 font-bold">{numImages}</span>
                 </label>
                 <input
                   type="range"
                   min="1"
                   max="5"
                   step="1"
-                  className="w-full accent-blue-500"
+                  className="w-full accent-gradient-to-r from-blue-500 to-cyan-500"
+                  style={{
+                    accentColor: '#06b6d4'
+                  }}
                   value={numImages}
                   onChange={(e) => setNumImages(Number(e.target.value))}
                 />
@@ -175,10 +213,6 @@ export default function MatrixGeneratePage() {
           >
             Generate Ad
           </Button>
-
-          {isGenerating && (
-            <GenerationProgressComponent progress={progress} />
-          )}
         </div>
 
         {/* Right Column - Preview */}

frontend/app/generate/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { GenerationForm } from "@/components/generation/GenerationForm";
 import { BatchForm } from "@/components/generation/BatchForm";
 import { ExtensiveForm } from "@/components/generation/ExtensiveForm";
 import { GenerationProgressComponent } from "@/components/generation/GenerationProgress";
+import { BatchProgressComponent } from "@/components/generation/BatchProgress";
 import { AdPreview } from "@/components/generation/AdPreview";
 import { AngleSelector } from "@/components/matrix/AngleSelector";
 import { ConceptSelector } from "@/components/matrix/ConceptSelector";
@@ -29,23 +30,53 @@ export default function GeneratePage() {
   const [batchResults, setBatchResults] = useState<GenerateResponse[]>([]);
   const [currentBatchIndex, setCurrentBatchIndex] = useState(0);
   const [batchProgress, setBatchProgress] = useState(0);
+  const [batchCount, setBatchCount] = useState(0);
+  const [batchImagesPerAd, setBatchImagesPerAd] = useState(1);
 
   const {
     currentGeneration,
     progress,
     isGenerating,
+    generationStartTime,
     setCurrentGeneration,
     setProgress,
     setIsGenerating,
     setError,
+    setGenerationStartTime,
     reset,
   } = useGenerationStore();
 
   const { selectedAngle, selectedConcept, setSelectedAngle, setSelectedConcept } = useMatrixStore();
 
+  // Request notification permission and show notification when generation completes
+  const showNotification = (title: string, body: string) => {
+    if ("Notification" in window && Notification.permission === "granted") {
+      new Notification(title, {
+        body,
+        icon: "/favicon.ico",
+        tag: "generation-complete",
+      });
+    }
+  };
+
+  // Request notification permission on mount
+  useEffect(() => {
+    if ("Notification" in window && Notification.permission === "default") {
+      Notification.requestPermission();
+    }
+  }, []);
+
+  // Show notification when generation completes
+  useEffect(() => {
+    if (progress.step === "complete" && currentGeneration) {
+      showNotification("Ad Generated Successfully!", "Your ad is ready to view.");
+    }
+  }, [progress.step, currentGeneration]);
+
   const handleStandardGenerate = async (data: { niche: Niche; num_images: number; image_model?: string | null }) => {
     reset();
     setIsGenerating(true);
+    setGenerationStartTime(Date.now());
     setProgress({
       step: "copy",
       progress: 10,
@@ -104,6 +135,7 @@ export default function GeneratePage() {
 
     reset();
     setIsGenerating(true);
+    setGenerationStartTime(Date.now());
     setProgress({
       step: "copy",
       progress: 10,
@@ -143,18 +175,30 @@ export default function GeneratePage() {
   const handleBatchGenerate = async (data: { niche: Niche; count: number; images_per_ad: number; image_model?: string | null }) => {
     setBatchResults([]);
     setIsGenerating(true);
+    setGenerationStartTime(Date.now());
     setBatchProgress(0);
     setCurrentBatchIndex(0);
+    setBatchCount(data.count);
+    setBatchImagesPerAd(data.images_per_ad);
 
     // Estimate time per ad (roughly 30-60 seconds per ad)
     const estimatedTimePerAd = 45; // seconds
     const totalEstimatedTime = data.count * estimatedTimePerAd;
     let elapsedTime = 0;
+    let currentAdIndex = 0;
     const progressInterval = 500; // Update every 500ms
 
-    // Start progress simulation
+    // Start progress simulation with ad tracking
     const progressIntervalId = setInterval(() => {
       elapsedTime += progressInterval / 1000; // Convert to seconds
+      
+      // Estimate which ad we're on based on elapsed time
+      const estimatedAdIndex = Math.min(data.count - 1, Math.floor(elapsedTime / estimatedTimePerAd));
+      if (estimatedAdIndex !== currentAdIndex) {
+        currentAdIndex = estimatedAdIndex;
+        setCurrentBatchIndex(currentAdIndex);
+      }
+      
       // Calculate progress: start at 5%, reach 90% by estimated time
       const progress = Math.min(90, 5 + (elapsedTime / totalEstimatedTime) * 85);
       setBatchProgress(progress);
@@ -164,11 +208,23 @@ export default function GeneratePage() {
       const result = await generateBatch(data);
       clearInterval(progressIntervalId);
       setBatchResults(result.ads);
+      setCurrentBatchIndex(data.count - 1); // Set to last ad
       setBatchProgress(100);
+      
+      // Show notification
+      if ("Notification" in window && Notification.permission === "granted") {
+        new Notification("Batch Generation Complete!", {
+          body: `Successfully generated ${result.count} ads!`,
+          icon: "/favicon.ico",
+          tag: "batch-complete",
+        });
+      }
+      
       toast.success(`Successfully generated ${result.count} ads!`);
     } catch (error: any) {
       clearInterval(progressIntervalId);
       setBatchProgress(0);
+      setCurrentBatchIndex(0);
       toast.error(error.message || "Failed to generate batch");
     } finally {
       setIsGenerating(false);
@@ -185,6 +241,7 @@ export default function GeneratePage() {
   }) => {
     reset();
     setIsGenerating(true);
+    setGenerationStartTime(Date.now());
     setProgress({
       step: "copy",
       progress: 10,
@@ -316,6 +373,23 @@ export default function GeneratePage() {
       </div>
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Progress Component - Sticky at top */}
+        {isGenerating && (
+          <>
+            {mode === "batch" ? (
+              <BatchProgressComponent
+                progress={batchProgress}
+                currentIndex={currentBatchIndex}
+                totalCount={batchCount}
+                imagesPerAd={batchImagesPerAd}
+                generationStartTime={generationStartTime}
+              />
+            ) : (
+              <GenerationProgressComponent progress={progress} generationStartTime={generationStartTime} />
+            )}
+          </>
+        )}
+
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
           {/* Left Column - Form and Configuration */}
           <div className="lg:col-span-1 space-y-6">
@@ -327,12 +401,6 @@ export default function GeneratePage() {
                     isLoading={isGenerating} 
                   />
                 </div>
-                
-                {isGenerating && (
-                  <div className="animate-scale-in">
-                    <GenerationProgressComponent progress={progress} />
-                  </div>
-                )}
               </>
             ) : mode === "matrix" ? (
               <>
@@ -413,10 +481,6 @@ export default function GeneratePage() {
                 >
                   Generate Ad
                 </Button>
-
-                {isGenerating && (
-                  <GenerationProgressComponent progress={progress} />
-                )}
               </>
             ) : mode === "batch" ? (
               <>
@@ -426,34 +490,6 @@ export default function GeneratePage() {
                     isLoading={isGenerating} 
                   />
                 </div>
-                
-                {isGenerating && (
-                  <Card variant="glass" className="mt-6 animate-scale-in">
-                    <CardContent className="pt-6">
-                      <div className="space-y-4">
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center space-x-3">
-                            <div className="relative">
-                              <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full animate-ping opacity-20"></div>
-                              <div className="relative bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full p-2">
-                                <Sparkles className="h-5 w-5 text-white animate-pulse" />
-                              </div>
-                            </div>
-                            <div>
-                              <p className="font-semibold text-gray-900">Generating Batch Ads</p>
-                              <p className="text-sm text-gray-600">Creating multiple ad variations...</p>
-                            </div>
-                          </div>
-                        </div>
-                        <ProgressBar
-                          progress={batchProgress}
-                          label="Batch Generation Progress"
-                          showPercentage={true}
-                        />
-                      </div>
-                    </CardContent>
-                  </Card>
-                )}
               </>
             ) : (
               <>
@@ -463,12 +499,6 @@ export default function GeneratePage() {
                     isLoading={isGenerating} 
                   />
                 </div>
-                
-                {isGenerating && (
-                  <div className="animate-scale-in">
-                    <GenerationProgressComponent progress={progress} />
-                  </div>
-                )}
               </>
             )}
           </div>

frontend/app/matrix/page.tsx

@@ -27,78 +27,98 @@ export default function MatrixPage() {
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <Card variant="glass" className="animate-scale-in" style={{ animationDelay: "0.1s" }}>
-            <CardHeader>
-              <div className="p-3 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 w-fit mb-3">
-                <Layers className="h-6 w-6 text-white" />
-              </div>
-              <CardTitle>Generate with Matrix</CardTitle>
-              <CardDescription>
-                Select specific angle and concept combinations
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Link href="/generate/matrix">
-                <Button variant="primary" className="w-full group">
+          <Card 
+            variant="glass" 
+            className="animate-scale-in hover:scale-105 transition-all duration-300 group cursor-pointer" 
+            style={{ animationDelay: "0.1s" }}
+          >
+            <Link href="/generate/matrix" className="block">
+              <CardHeader>
+                <div className="p-3 rounded-xl bg-gradient-to-br from-blue-500 via-blue-600 to-cyan-500 w-fit mb-3 shadow-lg group-hover:shadow-xl group-hover:scale-110 transition-all duration-300">
+                  <Layers className="h-6 w-6 text-white" />
+                </div>
+                <CardTitle className="group-hover:text-blue-600 transition-colors">Generate with Matrix</CardTitle>
+                <CardDescription>
+                  Select specific angle and concept combinations
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button variant="primary" className="w-full group-hover:shadow-lg transition-all">
                   <Sparkles className="h-4 w-4 mr-2 group-hover:rotate-12 transition-transform duration-300" />
                   Generate Ad
                 </Button>
-              </Link>
-            </CardContent>
+              </CardContent>
+            </Link>
           </Card>
 
-          <Card variant="glass" className="animate-scale-in" style={{ animationDelay: "0.2s" }}>
-            <CardHeader>
-              <div className="p-3 rounded-xl bg-gradient-to-br from-cyan-500 to-pink-600 w-fit mb-3">
-                <Search className="h-6 w-6 text-white" />
-              </div>
-              <CardTitle>Browse Angles</CardTitle>
-              <CardDescription>
-                Explore all 100 available angles
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Link href="/matrix/angles">
-                <Button variant="outline" className="w-full">View Angles</Button>
-              </Link>
-            </CardContent>
+          <Card 
+            variant="glass" 
+            className="animate-scale-in hover:scale-105 transition-all duration-300 group cursor-pointer" 
+            style={{ animationDelay: "0.2s" }}
+          >
+            <Link href="/browse/angles" className="block">
+              <CardHeader>
+                <div className="p-3 rounded-xl bg-gradient-to-br from-purple-500 via-pink-500 to-rose-500 w-fit mb-3 shadow-lg group-hover:shadow-xl group-hover:scale-110 transition-all duration-300">
+                  <Search className="h-6 w-6 text-white" />
+                </div>
+                <CardTitle className="group-hover:text-purple-600 transition-colors">Browse Angles</CardTitle>
+                <CardDescription>
+                  Explore all 100 available angles
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button variant="outline" className="w-full border-purple-200 hover:border-purple-400 hover:bg-purple-50 transition-colors">
+                  View Angles
+                </Button>
+              </CardContent>
+            </Link>
           </Card>
 
-          <Card variant="glass" className="animate-scale-in" style={{ animationDelay: "0.3s" }}>
-            <CardHeader>
-              <div className="p-3 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 w-fit mb-3">
-                <Search className="h-6 w-6 text-white" />
-              </div>
-              <CardTitle>Browse Concepts</CardTitle>
-              <CardDescription>
-                Explore all 100 available concepts
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Link href="/matrix/concepts">
-                <Button variant="outline" className="w-full">View Concepts</Button>
-              </Link>
-            </CardContent>
+          <Card 
+            variant="glass" 
+            className="animate-scale-in hover:scale-105 transition-all duration-300 group cursor-pointer" 
+            style={{ animationDelay: "0.3s" }}
+          >
+            <Link href="/browse/concepts" className="block">
+              <CardHeader>
+                <div className="p-3 rounded-xl bg-gradient-to-br from-emerald-500 via-teal-500 to-cyan-500 w-fit mb-3 shadow-lg group-hover:shadow-xl group-hover:scale-110 transition-all duration-300">
+                  <Search className="h-6 w-6 text-white" />
+                </div>
+                <CardTitle className="group-hover:text-emerald-600 transition-colors">Browse Concepts</CardTitle>
+                <CardDescription>
+                  Explore all 100 available concepts
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button variant="outline" className="w-full border-emerald-200 hover:border-emerald-400 hover:bg-emerald-50 transition-colors">
+                  View Concepts
+                </Button>
+              </CardContent>
+            </Link>
           </Card>
 
-          <Card variant="glass" className="md:col-span-2 lg:col-span-3 animate-scale-in" style={{ animationDelay: "0.4s" }}>
-            <CardHeader>
-              <div className="p-3 rounded-xl bg-gradient-to-br from-orange-500 to-pink-600 w-fit mb-3">
-                <TestTube className="h-6 w-6 text-white" />
-              </div>
-              <CardTitle>Testing Matrix Builder</CardTitle>
-              <CardDescription>
-                Generate systematic testing matrices for optimization
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Link href="/matrix/testing">
-                <Button variant="secondary" className="w-full group">
+          <Card 
+            variant="glass" 
+            className="md:col-span-2 lg:col-span-3 animate-scale-in hover:scale-[1.02] transition-all duration-300 group cursor-pointer" 
+            style={{ animationDelay: "0.4s" }}
+          >
+            <Link href="/matrix/testing" className="block">
+              <CardHeader>
+                <div className="p-3 rounded-xl bg-gradient-to-br from-amber-500 via-orange-500 to-pink-500 w-fit mb-3 shadow-lg group-hover:shadow-xl group-hover:scale-110 transition-all duration-300">
+                  <TestTube className="h-6 w-6 text-white" />
+                </div>
+                <CardTitle className="group-hover:text-orange-600 transition-colors">Testing Matrix Builder</CardTitle>
+                <CardDescription>
+                  Generate systematic testing matrices for optimization
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button variant="secondary" className="w-full group-hover:shadow-lg transition-all">
                   <TestTube className="h-4 w-4 mr-2 group-hover:rotate-12 transition-transform duration-300" />
                   Build Testing Matrix
                 </Button>
-              </Link>
-            </CardContent>
+              </CardContent>
+            </Link>
           </Card>
         </div>
       </div>

frontend/app/page.tsx

@@ -3,14 +3,23 @@
 import React, { useEffect, useState, memo, useCallback } from "react";
 import Link from "next/link";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
 import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
 import { getDbStats, listAds } from "@/lib/api/endpoints";
 import { formatRelativeDate, formatNiche, getImageUrl, getImageUrlFallback } from "@/lib/utils/formatters";
 import { Home, Sparkles, Grid, TrendingUp, Database } from "lucide-react";
+import { useGalleryStore } from "@/store/galleryStore";
 import type { DbStatsResponse, AdCreativeDB } from "@/types/api";
 
+// Reusable gradient badge component
+const GradientBadge: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <span className="inline-flex items-center text-xs font-bold px-3 py-1.5 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-full shadow-sm whitespace-nowrap">
+    {children}
+  </span>
+);
+
 // Component for dashboard ad cards with image error handling
 const DashboardAdCard = memo(function DashboardAdCard({ 
   ad, 
@@ -38,13 +47,13 @@ const DashboardAdCard = memo(function DashboardAdCard({
   return (
     <Link
       href={`/gallery/${ad.id}`}
-      className="block group animate-scale-in"
+      className="block group animate-scale-in h-full"
       style={{ animationDelay: `${index * 0.1}s` }}
     >
-      <Card variant="elevated" className="h-full overflow-hidden">
-        <CardContent className="p-0">
+      <Card variant="elevated" className="h-full overflow-hidden flex flex-col hover:scale-[1.02] transition-transform duration-300">
+        <CardContent className="p-0 flex flex-col flex-1">
           {(imageSrc || ad.image_filename || ad.image_url) && (
-            <div className="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 rounded-t-2xl overflow-hidden relative flex items-center justify-center">
+            <div className="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 rounded-t-2xl overflow-hidden relative flex items-center justify-center flex-shrink-0">
               {imageSrc ? (
                 <Image
                   src={imageSrc}
@@ -69,20 +78,23 @@ const DashboardAdCard = memo(function DashboardAdCard({
               <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
             </div>
           )}
-          <div className="p-5">
-            <div className="flex items-center justify-between mb-3">
-              <span className="text-xs font-bold px-3 py-1 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-full">
-                {formatNiche(ad.niche)}
-              </span>
-              <span className="text-xs text-gray-500 font-medium">
+          <div className="p-5 flex-1 flex flex-col">
+            {/* Header with badge and timestamp - properly aligned on same line */}
+            <div className="flex items-center justify-between gap-2 mb-3">
+              <GradientBadge>{formatNiche(ad.niche)}</GradientBadge>
+              <span className="text-xs text-gray-500 font-medium flex-shrink-0">
                 {formatRelativeDate(ad.created_at)}
               </span>
             </div>
-            <h3 className="font-bold text-gray-900 line-clamp-2 mb-2 group-hover:text-blue-600 transition-colors">
+            
+            {/* Headline - improved typography */}
+            <h3 className="font-bold text-lg text-gray-900 line-clamp-2 mb-3 group-hover:text-blue-600 transition-colors leading-tight">
               {ad.headline}
             </h3>
+            
+            {/* Description section - improved spacing */}
             {ad.title && (
-              <p className="text-sm text-gray-600 line-clamp-1">
+              <p className="text-sm text-gray-700 line-clamp-1 font-medium mt-auto">
                 {ad.title}
               </p>
             )}
@@ -94,10 +106,17 @@ const DashboardAdCard = memo(function DashboardAdCard({
 });
 
 export default function Dashboard() {
+  const router = useRouter();
+  const setFilters = useGalleryStore((state) => state.setFilters);
   const [stats, setStats] = useState<DbStatsResponse | null>(null);
   const [recentAds, setRecentAds] = useState<AdCreativeDB[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
+  const handleStatCardClick = useCallback((niche: "home_insurance" | "glp1" | null) => {
+    setFilters({ niche });
+    router.push("/gallery");
+  }, [router, setFilters]);
+
   useEffect(() => {
     const loadData = async () => {
       try {
@@ -149,48 +168,66 @@ export default function Dashboard() {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Stats Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-          <Card variant="glass" className="animate-scale-in" style={{ animationDelay: "0.1s" }}>
+          <Card 
+            variant="glass" 
+            className="animate-scale-in cursor-pointer transition-all duration-300 hover:scale-105 hover:shadow-2xl group" 
+            style={{ animationDelay: "0.1s" }}
+            onClick={() => {
+              setFilters({ niche: null });
+              router.push("/gallery");
+            }}
+          >
             <CardContent className="pt-6">
               <div className="flex items-center justify-between">
                 <div>
-                  <p className="text-sm font-semibold text-gray-600 mb-1">Total Ads</p>
-                  <p className="text-3xl font-bold text-gray-900">
+                  <p className="text-sm font-semibold text-gray-600 mb-1 group-hover:text-gray-900 transition-colors">Total Ads</p>
+                  <p className="text-3xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
                     {stats?.total_ads ?? 0}
                   </p>
                 </div>
-                <div className="p-3 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 shadow-lg">
+                <div className="p-3 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 shadow-lg group-hover:shadow-xl transition-shadow">
                   <Database className="h-8 w-8 text-white" />
                 </div>
               </div>
             </CardContent>
           </Card>
 
-          <Card variant="glass" className="animate-scale-in" style={{ animationDelay: "0.2s" }}>
+          <Card 
+            variant="glass" 
+            className="animate-scale-in cursor-pointer transition-all duration-300 hover:scale-105 hover:shadow-2xl group" 
+            style={{ animationDelay: "0.2s" }}
+            onClick={() => handleStatCardClick("home_insurance")}
+          >
             <CardContent className="pt-6">
               <div className="flex items-center justify-between">
                 <div>
-                  <p className="text-sm font-semibold text-gray-600 mb-1">Home Insurance</p>
-                  <p className="text-3xl font-bold text-gray-900">
+                  <p className="text-sm font-semibold text-gray-600 mb-1 group-hover:text-gray-900 transition-colors">Home Insurance</p>
+                  <p className="text-3xl font-bold text-gray-900 group-hover:text-green-600 transition-colors">
                     {stats?.by_niche?.home_insurance ?? 0}
                   </p>
                 </div>
-                <div className="p-3 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 shadow-lg">
+                <div className="p-3 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 shadow-lg group-hover:shadow-xl transition-shadow">
                   <Home className="h-8 w-8 text-white" />
                 </div>
               </div>
             </CardContent>
           </Card>
 
-          <Card variant="glass" className="animate-scale-in" style={{ animationDelay: "0.3s" }}>
+          <Card 
+            variant="glass" 
+            className="animate-scale-in cursor-pointer transition-all duration-300 hover:scale-105 hover:shadow-2xl group" 
+            style={{ animationDelay: "0.3s" }}
+            onClick={() => handleStatCardClick("glp1")}
+          >
             <CardContent className="pt-6">
               <div className="flex items-center justify-between">
                 <div>
-                  <p className="text-sm font-semibold text-gray-600 mb-1">GLP-1</p>
-                  <p className="text-3xl font-bold text-gray-900">
+                  <p className="text-sm font-semibold text-gray-600 mb-1 group-hover:text-gray-900 transition-colors">GLP-1</p>
+                  <p className="text-3xl font-bold text-gray-900 group-hover:text-pink-600 transition-colors">
                     {stats?.by_niche?.glp1 ?? 0}
                   </p>
                 </div>
-                <div className="p-3 rounded-xl bg-gradient-to-br from-cyan-500 to-pink-600 shadow-lg">
+                <div className="p-3 rounded-xl bg-gradient-to-br from-cyan-500 to-pink-600 shadow-lg group-hover:shadow-xl transition-shadow">
                   <TrendingUp className="h-8 w-8 text-white" />
                 </div>
               </div>

frontend/components/gallery/AdCard.tsx

@@ -13,6 +13,13 @@ interface AdCardProps {
   onSelect?: (adId: string) => void;
 }
 
+// Reusable gradient badge component
+const GradientBadge: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <span className="inline-flex items-center text-xs font-bold px-3 py-1.5 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-full shadow-sm whitespace-nowrap">
+    {children}
+  </span>
+);
+
 export const AdCard: React.FC<AdCardProps> = memo(({
   ad,
   isSelected = false,
@@ -36,15 +43,15 @@ export const AdCard: React.FC<AdCardProps> = memo(({
   return (
     <Card
       variant={isSelected ? "glass" : "elevated"}
-      className={`cursor-pointer transition-all duration-300 group ${
-        isSelected ? "ring-4 ring-blue-500 ring-opacity-50 scale-105" : "hover:scale-105"
+      className={`cursor-pointer transition-all duration-300 group h-full flex flex-col ${
+        isSelected ? "ring-4 ring-blue-500 ring-opacity-50 scale-105" : "hover:scale-[1.02]"
       }`}
       onClick={() => onSelect?.(ad.id)}
     >
-      <Link href={`/gallery/${ad.id}`} onClick={(e) => e.stopPropagation()}>
-        <CardContent className="p-0">
+      <Link href={`/gallery/${ad.id}`} onClick={(e) => e.stopPropagation()} className="flex flex-col h-full">
+        <CardContent className="p-0 flex flex-col flex-1">
           {(imageSrc || ad.image_filename || ad.image_url) && (
-            <div className="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 rounded-t-2xl overflow-hidden relative flex items-center justify-center">
+            <div className="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 rounded-t-2xl overflow-hidden relative flex items-center justify-center flex-shrink-0">
               {imageSrc ? (
                 <Image
                   src={imageSrc}
@@ -69,28 +76,33 @@ export const AdCard: React.FC<AdCardProps> = memo(({
               <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
             </div>
           )}
-          <div className="p-5">
-            <div className="flex items-center justify-between mb-3">
-              <span className="text-xs font-bold px-3 py-1 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-full">
-                {formatNiche(ad.niche)}
-              </span>
-              <span className="text-xs text-gray-500 font-medium">
+          <div className="p-5 flex-1 flex flex-col">
+            {/* Header with badge and timestamp - properly aligned on same line */}
+            <div className="flex items-center justify-between gap-2 mb-3">
+              <GradientBadge>{formatNiche(ad.niche)}</GradientBadge>
+              <span className="text-xs text-gray-500 font-medium flex-shrink-0">
                 {formatRelativeDate(ad.created_at)}
               </span>
             </div>
-            <h3 className="font-bold text-gray-900 line-clamp-2 mb-2 group-hover:text-blue-600 transition-colors">
-              {truncateText(ad.headline, 60)}
+            
+            {/* Headline - improved typography */}
+            <h3 className="font-bold text-lg text-gray-900 line-clamp-2 mb-3 group-hover:text-blue-600 transition-colors leading-tight">
+              {ad.headline}
             </h3>
-            {ad.title && (
-              <p className="text-sm text-gray-600 line-clamp-1">
-                {ad.title}
-              </p>
-            )}
-            {ad.psychological_angle && (
-              <p className="text-xs text-gray-500 mt-2 line-clamp-1">
-                {truncateText(ad.psychological_angle, 50)}
-              </p>
-            )}
+            
+            {/* Description section - improved spacing and hierarchy */}
+            <div className="mt-auto space-y-1.5">
+              {ad.title && (
+                <p className="text-sm text-gray-700 line-clamp-1 font-medium">
+                  {ad.title}
+                </p>
+              )}
+              {ad.psychological_angle && (
+                <p className="text-xs text-gray-500 line-clamp-1 italic">
+                  {ad.psychological_angle}
+                </p>
+              )}
+            </div>
           </div>
         </CardContent>
       </Link>

frontend/components/generation/BatchProgress.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Card, CardContent } from "@/components/ui/Card";
+import { ProgressBar } from "@/components/ui/ProgressBar";
+import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
+import { 
+  Sparkles, 
+  Image as ImageIcon, 
+  Database, 
+  CheckCircle2, 
+  AlertCircle,
+  Wand2,
+  Zap,
+  Package
+} from "lucide-react";
+
+interface BatchProgressProps {
+  progress: number; // 0-100
+  currentIndex?: number; // Current ad being generated (0-based)
+  totalCount?: number; // Total number of ads
+  imagesPerAd?: number; // Number of images per ad
+  generationStartTime?: number | null;
+  message?: string;
+}
+
+const BATCH_MESSAGES = [
+  "Creating your ad variations...",
+  "Generating unique ad creatives...",
+  "Crafting compelling visuals...",
+  "Building your ad collection...",
+  "Almost there! Finalizing your ads...",
+  "Working on the perfect variations...",
+  "This batch is going to be amazing!",
+  "Great things take time - we're crafting perfection!",
+] as const;
+
+const ENGAGING_MESSAGES = [
+  "Batch generation may take a while, but great things are worth waiting for!",
+  "Almost there! We're putting the finishing touches on your batch.",
+  "Hang tight! We're creating something amazing for you.",
+  "This is taking a bit longer, but we're ensuring top quality!",
+  "Just a few more moments... Your batch is almost ready!",
+  "We're working hard to make this perfect for you!",
+  "Great things take time - we're crafting your batch!",
+  "Almost done! We're making sure everything is just right.",
+] as const;
+
+export const BatchProgressComponent: React.FC<BatchProgressProps> = ({
+  progress,
+  currentIndex = 0,
+  totalCount = 0,
+  imagesPerAd = 1,
+  generationStartTime,
+  message,
+}) => {
+  const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [estimatedTimeRemaining, setEstimatedTimeRemaining] = useState<number | null>(null);
+
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+  const isComplete = clampedProgress >= 100;
+  const isStuckAtHighProgress = clampedProgress >= 85 && !isComplete;
+  const currentAdNumber = currentIndex + 1;
+  const totalVariations = totalCount * imagesPerAd;
+  const currentVariation = currentIndex * imagesPerAd + 1;
+
+  // Calculate elapsed time
+  useEffect(() => {
+    if (generationStartTime && !isComplete) {
+      const interval = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - generationStartTime) / 1000);
+        setElapsedTime(elapsed);
+        
+        // Estimate time remaining based on progress
+        if (clampedProgress > 5 && clampedProgress < 100) {
+          const rate = clampedProgress / elapsed; // % per second
+          const remaining = (100 - clampedProgress) / rate;
+          setEstimatedTimeRemaining(Math.max(0, Math.ceil(remaining)));
+        }
+      }, 1000);
+      return () => clearInterval(interval);
+    }
+  }, [generationStartTime, isComplete, clampedProgress]);
+
+  // Rotate messages when stuck at high progress
+  useEffect(() => {
+    if (isStuckAtHighProgress) {
+      const interval = setInterval(() => {
+        setCurrentMessageIndex((prev) => (prev + 1) % ENGAGING_MESSAGES.length);
+      }, 5000); // Change message every 5 seconds
+      return () => clearInterval(interval);
+    }
+  }, [isStuckAtHighProgress]);
+
+  // Rotate batch messages periodically
+  useEffect(() => {
+    if (!isComplete && !isStuckAtHighProgress) {
+      const interval = setInterval(() => {
+        setCurrentMessageIndex((prev) => (prev + 1) % BATCH_MESSAGES.length);
+      }, 4000); // Change message every 4 seconds
+      return () => clearInterval(interval);
+    }
+  }, [isComplete, isStuckAtHighProgress]);
+
+  // Get current message
+  const getCurrentMessage = () => {
+    if (message) return message;
+    if (isStuckAtHighProgress) {
+      return ENGAGING_MESSAGES[currentMessageIndex];
+    }
+    if (totalCount > 0 && currentIndex >= 0) {
+      return `Generating ad ${currentAdNumber} of ${totalCount}...`;
+    }
+    return BATCH_MESSAGES[currentMessageIndex];
+  };
+
+  return (
+    <div className="sticky top-20 z-30 mb-6 animate-scale-in">
+      <Card variant="glass" className="overflow-hidden shadow-xl border-2 border-blue-200/50 backdrop-blur-xl">
+        <CardContent className="pt-6">
+        <div className="space-y-6">
+          {/* Header with animated icon */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              {isComplete ? (
+                <div className="relative">
+                  <div className="absolute inset-0 bg-green-500 rounded-full animate-ping opacity-75"></div>
+                  <CheckCircle2 className="h-8 w-8 text-green-500 relative z-10" />
+                </div>
+              ) : (
+                <div className="relative">
+                  <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full animate-ping opacity-20"></div>
+                  <div className="relative bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full p-2">
+                    <Package className="h-5 w-5 text-white animate-pulse" />
+                  </div>
+                </div>
+              )}
+              <div>
+                <h3 className="text-lg font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+                  {isComplete ? "Batch Generation Complete!" : "Generating Batch Ads"}
+                </h3>
+                <p className="text-sm text-gray-600 mt-0.5 transition-all duration-500">
+                  {isComplete ? "All ads are ready!" : getCurrentMessage()}
+                </p>
+                {elapsedTime > 30 && !isComplete && (
+                  <p className="text-xs text-gray-500 mt-1">
+                    {Math.floor(elapsedTime / 60)}m {elapsedTime % 60}s elapsed
+                  </p>
+                )}
+              </div>
+            </div>
+            {estimatedTimeRemaining !== null && !isComplete && (
+              <div className="text-right">
+                <div className="flex items-center space-x-1 text-sm font-semibold text-gray-700">
+                  <Zap className="h-4 w-4 text-yellow-500 animate-pulse" />
+                  <span>~{estimatedTimeRemaining}s</span>
+                </div>
+                <p className="text-xs text-gray-500">remaining</p>
+              </div>
+            )}
+          </div>
+
+          {/* Batch Stats */}
+          {totalCount > 0 && (
+            <div className="grid grid-cols-3 gap-4">
+              <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-4 border border-blue-200">
+                <div className="flex items-center space-x-2 mb-1">
+                  <Package className="h-4 w-4 text-blue-600" />
+                  <p className="text-xs font-semibold text-gray-600">Total Ads</p>
+                </div>
+                <p className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+                  {totalCount}
+                </p>
+              </div>
+              <div className="bg-gradient-to-br from-cyan-50 to-pink-50 rounded-xl p-4 border border-cyan-200">
+                <div className="flex items-center space-x-2 mb-1">
+                  <ImageIcon className="h-4 w-4 text-cyan-600" />
+                  <p className="text-xs font-semibold text-gray-600">Variations</p>
+                </div>
+                <p className="text-2xl font-bold bg-gradient-to-r from-cyan-600 to-pink-600 bg-clip-text text-transparent">
+                  {totalVariations}
+                </p>
+              </div>
+              <div className="bg-gradient-to-br from-pink-50 to-purple-50 rounded-xl p-4 border border-pink-200">
+                <div className="flex items-center space-x-2 mb-1">
+                  <Sparkles className="h-4 w-4 text-pink-600" />
+                  <p className="text-xs font-semibold text-gray-600">Current</p>
+                </div>
+                <p className="text-2xl font-bold bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent">
+                  {currentAdNumber}/{totalCount}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Progress Bar */}
+          <div className="space-y-2">
+            <div className="flex justify-between items-center">
+              <span className="text-sm font-semibold text-gray-700">Overall Progress</span>
+              <span className="text-sm font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+                {Math.round(clampedProgress)}%
+              </span>
+            </div>
+            <ProgressBar
+              progress={clampedProgress}
+              showPercentage={false}
+            />
+            {totalCount > 0 && currentIndex >= 0 && (
+              <p className="text-xs text-gray-500 text-center mt-2">
+                {currentAdNumber} of {totalCount} ads completed
+                {imagesPerAd > 1 && ` • ${currentVariation} of ${totalVariations} variations`}
+              </p>
+            )}
+          </div>
+
+          {/* Success State */}
+          {isComplete && (
+            <div className="mt-4 p-4 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-xl animate-scale-in">
+              <div className="flex items-center space-x-3">
+                <CheckCircle2 className="h-6 w-6 text-green-600 flex-shrink-0" />
+                <div>
+                  <p className="text-sm font-semibold text-green-900">
+                    Batch generation completed successfully!
+                  </p>
+                  <p className="text-xs text-green-700 mt-0.5">
+                    {totalCount > 0 ? `${totalCount} ads with ${totalVariations} total variations are ready!` : "All ads are ready to use"}
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+    </div>
+  );
+};

frontend/components/generation/GenerationProgress.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Card, CardContent } from "@/components/ui/Card";
 import { ProgressBar } from "@/components/ui/ProgressBar";
 import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
@@ -17,6 +17,7 @@ import type { GenerationProgress } from "@/types";
 
 interface GenerationProgressProps {
   progress: GenerationProgress;
+  generationStartTime?: number | null;
 }
 
 const STEPS = [
@@ -31,17 +32,40 @@ const STEPS = [
     "Bringing your vision to life...",
     "Rendering high-quality images...",
     "Adding creative flair...",
+    "Generation may take a while...",
+    "Almost there!",
+    "Working on the perfect image...",
+    "This is worth the wait...",
+    "Crafting something amazing...",
+    "Just a few more moments...",
   ]},
   { key: "saving", label: "Saving", icon: Database, color: "from-pink-500 to-purple-500", messages: [
     "Storing your creative...",
     "Securing your masterpiece...",
     "Almost done...",
+    "Finalizing everything...",
   ]},
 ] as const;
 
+// Engaging messages for when stuck at high progress
+const ENGAGING_MESSAGES = [
+  "Generation may take a while, but great things are worth waiting for!",
+  "Almost there! We're putting the finishing touches on your ad.",
+  "Hang tight! We're creating something amazing for you.",
+  "This is taking a bit longer, but we're ensuring top quality!",
+  "Just a few more moments... Your ad is almost ready!",
+  "We're working hard to make this perfect for you!",
+  "Great things take time - we're crafting your masterpiece!",
+  "Almost done! We're making sure everything is just right.",
+] as const;
+
 export const GenerationProgressComponent: React.FC<GenerationProgressProps> = ({
   progress,
+  generationStartTime,
 }) => {
+  const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
+  const [elapsedTime, setElapsedTime] = useState(0);
+
   const stepProgress = {
     idle: 0,
     copy: 33,
@@ -55,21 +79,61 @@ export const GenerationProgressComponent: React.FC<GenerationProgressProps> = ({
   const currentStepIndex = STEPS.findIndex(s => s.key === progress.step);
   const isComplete = progress.step === "complete";
   const isError = progress.step === "error";
+  const isStuckAtHighProgress = currentProgress >= 85 && !isComplete && !isError;
 
-  // Get random message for current step
+  // Calculate elapsed time
+  useEffect(() => {
+    if (generationStartTime && !isComplete && !isError) {
+      const interval = setInterval(() => {
+        setElapsedTime(Math.floor((Date.now() - generationStartTime) / 1000));
+      }, 1000);
+      return () => clearInterval(interval);
+    }
+  }, [generationStartTime, isComplete, isError]);
+
+  // Rotate messages when stuck at high progress
+  useEffect(() => {
+    if (isStuckAtHighProgress) {
+      const interval = setInterval(() => {
+        setCurrentMessageIndex((prev) => (prev + 1) % ENGAGING_MESSAGES.length);
+      }, 5000); // Change message every 5 seconds
+      return () => clearInterval(interval);
+    }
+  }, [isStuckAtHighProgress]);
+
+  // Rotate step messages periodically
+  useEffect(() => {
+    if (!isComplete && !isError && !isStuckAtHighProgress) {
+      const step = STEPS.find(s => s.key === progress.step);
+      if (step && step.messages.length > 1) {
+        const interval = setInterval(() => {
+          setCurrentMessageIndex((prev) => (prev + 1) % step.messages.length);
+        }, 4000); // Change message every 4 seconds
+        return () => clearInterval(interval);
+      }
+    }
+  }, [progress.step, isComplete, isError, isStuckAtHighProgress]);
+
+  // Get message for current step
   const getStepMessage = () => {
     if (progress.message) return progress.message;
+    
+    // If stuck at high progress, show engaging messages
+    if (isStuckAtHighProgress) {
+      return ENGAGING_MESSAGES[currentMessageIndex];
+    }
+    
     const step = STEPS.find(s => s.key === progress.step);
     if (step && step.messages.length > 0) {
-      const randomIndex = Math.floor(Math.random() * step.messages.length);
-      return step.messages[randomIndex];
+      return step.messages[currentMessageIndex % step.messages.length];
     }
     return "Processing...";
   };
 
   return (
-    <Card variant="glass" className="overflow-hidden">
-      <CardContent className="pt-6">
+    <div className="sticky top-20 z-30 mb-6 animate-scale-in">
+      <Card variant="glass" className="overflow-hidden shadow-xl border-2 border-blue-200/50 backdrop-blur-xl">
+        <CardContent className="pt-6">
         <div className="space-y-6">
           {/* Header with animated icon */}
           <div className="flex items-center justify-between">
@@ -93,9 +157,14 @@ export const GenerationProgressComponent: React.FC<GenerationProgressProps> = ({
                 <h3 className="text-lg font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
                   {isComplete ? "Generation Complete!" : isError ? "Generation Failed" : "Creating Your Ad"}
                 </h3>
-                <p className="text-sm text-gray-600 mt-0.5">
+                <p className="text-sm text-gray-600 mt-0.5 transition-all duration-500">
                   {isComplete ? "Your ad is ready!" : isError ? "Something went wrong" : getStepMessage()}
                 </p>
+                {elapsedTime > 30 && !isComplete && !isError && (
+                  <p className="text-xs text-gray-500 mt-1">
+                    {Math.floor(elapsedTime / 60)}m {elapsedTime % 60}s elapsed
+                  </p>
+                )}
               </div>
             </div>
             {progress.estimatedTimeRemaining && !isComplete && !isError && (
@@ -213,5 +282,6 @@ export const GenerationProgressComponent: React.FC<GenerationProgressProps> = ({
         </div>
       </CardContent>
     </Card>
+    </div>
   );
 };

frontend/components/matrix/AngleSelector.tsx

@@ -84,9 +84,11 @@ export const AngleSelector: React.FC<AngleSelectorProps> = ({
   }));
 
   return (
-    <Card variant="glass">
+    <Card variant="glass" className="border-2 border-transparent hover:border-blue-200/50 transition-all duration-300">
       <CardHeader>
-        <CardTitle>Select Angle</CardTitle>
+        <CardTitle className="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+          Select Angle
+        </CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -110,16 +112,28 @@ export const AngleSelector: React.FC<AngleSelectorProps> = ({
               <div
                 key={angle.key}
                 onClick={() => onSelect?.(angle)}
-                className={`p-3 rounded-lg border cursor-pointer transition-colors ${
+                className={`p-3 rounded-lg border cursor-pointer transition-all duration-300 ${
                   selectedAngle?.key === angle.key
-                    ? "border-blue-500 bg-blue-50"
-                    : "border-gray-200 hover:border-gray-300 hover:bg-gray-50"
+                    ? "border-blue-500 bg-gradient-to-r from-blue-50 to-cyan-50 shadow-md ring-2 ring-blue-200"
+                    : "border-gray-200 hover:border-blue-300 hover:bg-gradient-to-r hover:from-gray-50 hover:to-blue-50/30 hover:shadow-sm"
                 }`}
               >
                 <div className="flex items-start justify-between">
                   <div className="flex-1">
-                    <h4 className="font-semibold text-gray-900">{angle.name}</h4>
-                    <p className="text-sm text-gray-600 mt-1">{angle.trigger}</p>
+                    <h4 className={`font-semibold transition-colors ${
+                      selectedAngle?.key === angle.key 
+                        ? "text-blue-700" 
+                        : "text-gray-900"
+                    }`}>
+                      {angle.name}
+                    </h4>
+                    <p className={`text-sm mt-1 transition-colors ${
+                      selectedAngle?.key === angle.key 
+                        ? "text-blue-600" 
+                        : "text-gray-600"
+                    }`}>
+                      {angle.trigger}
+                    </p>
                     <p className="text-xs text-gray-500 mt-1">{category}</p>
                   </div>
                 </div>

frontend/components/matrix/ConceptSelector.tsx

@@ -146,9 +146,11 @@ export const ConceptSelector: React.FC<ConceptSelectorProps> = ({
   }));
 
   return (
-    <Card variant="glass">
+    <Card variant="glass" className="border-2 border-transparent hover:border-cyan-200/50 transition-all duration-300">
       <CardHeader>
-        <CardTitle>Select Concept</CardTitle>
+        <CardTitle className="bg-gradient-to-r from-cyan-600 to-pink-600 bg-clip-text text-transparent">
+          Select Concept
+        </CardTitle>
         {angleKey && (
           <div className="mt-2">
             <label className="flex items-center space-x-2">
@@ -185,16 +187,28 @@ export const ConceptSelector: React.FC<ConceptSelectorProps> = ({
               <div
                 key={concept.key}
                 onClick={() => onSelect?.(concept)}
-                className={`p-3 rounded-lg border cursor-pointer transition-colors ${
+                className={`p-3 rounded-lg border cursor-pointer transition-all duration-300 ${
                   selectedConcept?.key === concept.key
-                    ? "border-blue-500 bg-blue-50"
-                    : "border-gray-200 hover:border-gray-300 hover:bg-gray-50"
+                    ? "border-cyan-500 bg-gradient-to-r from-cyan-50 to-pink-50 shadow-md ring-2 ring-cyan-200"
+                    : "border-gray-200 hover:border-cyan-300 hover:bg-gradient-to-r hover:from-gray-50 hover:to-cyan-50/30 hover:shadow-sm"
                 }`}
               >
                 <div className="flex items-start justify-between">
                   <div className="flex-1">
-                    <h4 className="font-semibold text-gray-900">{concept.name}</h4>
-                    <p className="text-sm text-gray-600 mt-1">{concept.structure}</p>
+                    <h4 className={`font-semibold transition-colors ${
+                      selectedConcept?.key === concept.key 
+                        ? "text-cyan-700" 
+                        : "text-gray-900"
+                    }`}>
+                      {concept.name}
+                    </h4>
+                    <p className={`text-sm mt-1 transition-colors ${
+                      selectedConcept?.key === concept.key 
+                        ? "text-cyan-600" 
+                        : "text-gray-600"
+                    }`}>
+                      {concept.structure}
+                    </p>
                     <p className="text-xs text-gray-500 mt-1">{category}</p>
                   </div>
                 </div>

frontend/lib/utils/formatters.ts

@@ -1,9 +1,48 @@
 import { format, formatDistanceToNow } from "date-fns";
 
+/**
+ * Parse a date string, ensuring UTC dates are properly converted to local time.
+ * Handles both UTC dates (with 'Z' suffix) and dates without timezone info.
+ * 
+ * @param dateString - ISO date string, potentially without timezone info
+ * @returns Date object in local timezone
+ */
+const parseDate = (dateString: string): Date => {
+  if (!dateString || typeof dateString !== 'string') {
+    throw new Error('Invalid date string');
+  }
+
+  // If the string already has 'Z' or timezone offset, new Date() will handle it correctly
+  const hasTimezone = dateString.includes('Z') || 
+                      dateString.includes('+') || 
+                      /[+-]\d{2}:\d{2}$/.test(dateString);
+  
+  if (!hasTimezone && dateString.includes('T')) {
+    // Date string without timezone - assume UTC and add 'Z'
+    // Format: "2026-01-15T06:55:00" -> "2026-01-15T06:55:00Z"
+    // Format: "2026-01-15T06:55:00.123" -> "2026-01-15T06:55:00.123Z"
+    const datePart = dateString.split('.')[0]; // Remove milliseconds if present
+    if (datePart.length >= 19) { // Ensure we have at least "YYYY-MM-DDTHH:mm:ss"
+      dateString = dateString.replace(datePart, datePart + 'Z');
+    }
+  }
+  
+  const date = new Date(dateString);
+  
+  // Validate the date is valid
+  if (isNaN(date.getTime())) {
+    throw new Error(`Invalid date: ${dateString}`);
+  }
+  
+  return date;
+};
+
 export const formatDate = (dateString: string | null | undefined): string => {
   if (!dateString) return "N/A";
   try {
-    return format(new Date(dateString), "MMM d, yyyy 'at' h:mm a");
+    const date = parseDate(dateString);
+    // Format in user's local timezone
+    return format(date, "MMM d, yyyy 'at' h:mm a");
   } catch {
     return dateString;
   }
@@ -12,7 +51,9 @@ export const formatDate = (dateString: string | null | undefined): string => {
 export const formatRelativeDate = (dateString: string | null | undefined): string => {
   if (!dateString) return "N/A";
   try {
-    return formatDistanceToNow(new Date(dateString), { addSuffix: true });
+    const date = parseDate(dateString);
+    // Format relative time in user's local timezone
+    return formatDistanceToNow(date, { addSuffix: true });
   } catch {
     return dateString;
   }

frontend/package-lock.json

@@ -30,7 +30,7 @@
         "@types/react-dom": "^19",
         "eslint": "^9",
         "eslint-config-next": "16.1.1",
-        "tailwindcss": "^4",
+        "tailwindcss": "^4.1.18",
         "typescript": "^5"
       }
     },

frontend/package.json

@@ -31,7 +31,7 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.1.1",
-    "tailwindcss": "^4",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5"
   }
 }

frontend/store/generationStore.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 import type { GenerateResponse, MatrixGenerateResponse, GenerationProgress } from "../types";
 
 interface GenerationState {
@@ -6,11 +7,13 @@ interface GenerationState {
   progress: GenerationProgress;
   isGenerating: boolean;
   error: string | null;
+  generationStartTime: number | null;
   
   setCurrentGeneration: (ad: GenerateResponse | MatrixGenerateResponse | null) => void;
   setProgress: (progress: GenerationProgress) => void;
   setIsGenerating: (isGenerating: boolean) => void;
   setError: (error: string | null) => void;
+  setGenerationStartTime: (time: number | null) => void;
   reset: () => void;
 }
 
@@ -22,18 +25,38 @@ const initialState = {
   },
   isGenerating: false,
   error: null as string | null,
+  generationStartTime: null as number | null,
 };
 
-export const useGenerationStore = create<GenerationState>((set) => ({
-  ...initialState,
-  
-  setCurrentGeneration: (ad) => set({ currentGeneration: ad }),
-  
-  setProgress: (progress) => set({ progress }),
-  
-  setIsGenerating: (isGenerating) => set({ isGenerating }),
-  
-  setError: (error) => set({ error }),
-  
-  reset: () => set(initialState),
-}));
+// Storage key for session persistence
+const STORAGE_KEY = "generation-state";
+
+export const useGenerationStore = create<GenerationState>()(
+  persist(
+    (set) => ({
+      ...initialState,
+      
+      setCurrentGeneration: (ad) => set({ currentGeneration: ad }),
+      
+      setProgress: (progress) => set({ progress }),
+      
+      setIsGenerating: (isGenerating) => set({ isGenerating }),
+      
+      setError: (error) => set({ error }),
+      
+      setGenerationStartTime: (time) => set({ generationStartTime: time }),
+      
+      reset: () => set(initialState),
+    }),
+    {
+      name: STORAGE_KEY,
+      // Only persist when generating to avoid stale data
+      partialize: (state) => ({
+        progress: state.progress,
+        isGenerating: state.isGenerating,
+        generationStartTime: state.generationStartTime,
+        currentGeneration: state.isGenerating ? state.currentGeneration : null,
+      }),
+    }
+  )
+);

services/correction.py

@@ -199,11 +199,12 @@ Generate a structured JSON response with spelling corrections and visual improve
         
         if user_instructions:
             # User-specified corrections - focus only on what user wants
-            correction_prompt = f"""The user wants to make a SPECIFIC correction to an existing image using image-to-image generation.
+            correction_prompt = f"""The user wants to make a SPECIFIC, MINIMAL correction to an existing image using image-to-image generation.
+The model will preserve 95% of the original image - only the specific change requested should be mentioned.
 
 User's correction request: {user_instructions}
 
-Original image prompt (for reference only): {original_prompt or "Not provided"}
+Original image prompt (for reference only - DO NOT recreate the image): {original_prompt or "Not provided"}
 
 Create a JSON response with this exact structure:
 {{
@@ -228,23 +229,13 @@ CRITICAL INSTRUCTIONS FOR corrected_prompt:
 - The corrected_prompt must be MINIMAL and FOCUSED - only mention the specific change
 - DO NOT describe the entire image or recreate it
 - DO NOT change anything except what the user specified
+- CRITICAL: The model will preserve 95% of the original image - only mention the ONE specific change
+- IMPORTANT: Start with "Remove" or "Delete" for removal requests, "Change" for replacements
+- For text removal: Use format like "Remove the text 'TEXT_TO_REMOVE'" or "Delete 'TEXT_TO_REMOVE'"
 - For text changes: Use format like "Change text 'OLD' to 'NEW'" or "Replace 'X' with 'Y'"
 - For visual changes: Use format like "Make colors brighter" or "Adjust lighting to be softer"
-- Keep it under 20 words if possible
-- The image-to-image model will preserve everything else automatically
-
-Examples:
-- User: "Change 'Save 50%' to 'Save 60%'" 
-  → corrected_prompt: "Change text 'Save 50%' to 'Save 60%'"
-
-- User: "Fix spelling: 'insurrance' should be 'insurance'"
-  → corrected_prompt: "Change text 'insurrance' to 'insurance'"
-
-- User: "Make the background brighter"
-  → corrected_prompt: "Make background brighter"
-
-- User: "Change headline to 'Get Started Today'"
-  → corrected_prompt: "Change headline text to 'Get Started Today'"
+- Keep it under 15 words if possible - be extremely concise
+- DO NOT mention any other elements, colors, layout, or composition - they will be preserved automatically
 
 Respond with valid JSON only, no markdown formatting."""
         else:
@@ -382,6 +373,7 @@ Respond with valid JSON only, no markdown formatting."""
                 logger.info("Using full corrected prompt for auto-analysis")
             
             logger.info("Calling image service to generate corrected image...")
+            logger.info("Using minimal prompt to preserve original image (guidance_scale not supported by nano-banana)")
             image_bytes, model_used, image_url = await image_service.generate(
                 prompt=focused_prompt,
                 model_key="nano-banana",  # Always use nano-banana for corrections

services/database.py

@@ -26,6 +26,40 @@ class DatabaseService:
         self.mongodb_url = settings.mongodb_url
         self.db_name = settings.mongodb_db_name
     
+    @staticmethod
+    def _datetime_to_iso_utc(dt: datetime) -> str:
+        """
+        Convert a datetime object to ISO format string with UTC timezone indicator.
+        Ensures the returned string always has 'Z' suffix to indicate UTC.
+        """
+        iso_str = dt.isoformat()
+        # Add 'Z' suffix if not present to indicate UTC
+        if not iso_str.endswith('Z') and '+' not in iso_str and '-' not in iso_str[-6:]:
+            return iso_str + "Z"
+        return iso_str
+    
+    def _serialize_document(self, doc: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Serialize a MongoDB document for JSON response:
+        - Convert ObjectId to string 'id'
+        - Convert datetime objects to ISO strings with UTC indicator
+        """
+        if not doc:
+            return doc
+        
+        # Convert ObjectId to string
+        if "_id" in doc:
+            doc["id"] = str(doc["_id"])
+            del doc["_id"]
+        
+        # Convert datetime fields to ISO strings with UTC indicator
+        datetime_fields = ["created_at", "updated_at"]
+        for field in datetime_fields:
+            if field in doc and isinstance(doc[field], datetime):
+                doc[field] = self._datetime_to_iso_utc(doc[field])
+        
+        return doc
+    
     async def connect(self):
         """Create connection to MongoDB."""
         if not self.mongodb_url:
@@ -161,16 +195,7 @@ class DatabaseService:
             
             doc = await self.collection.find_one(query)
             if doc:
-                # Convert ObjectId to string for JSON serialization
-                doc["id"] = str(doc["_id"])
-                del doc["_id"]
-                # Convert datetime to ISO format string
-                if "created_at" in doc and isinstance(doc["created_at"], datetime):
-                    doc["created_at"] = doc["created_at"].isoformat()
-                # Handle updated_at if it exists
-                if "updated_at" in doc and isinstance(doc["updated_at"], datetime):
-                    doc["updated_at"] = doc["updated_at"].isoformat()
-                return doc
+                return self._serialize_document(doc)
             return None
         except Exception as e:
             print(f"Failed to get ad creative: {e}")
@@ -205,17 +230,7 @@ class DatabaseService:
             docs = await cursor.to_list(length=limit)
             
             # Convert documents to dict format
-            results = []
-            for doc in docs:
-                doc["id"] = str(doc["_id"])
-                del doc["_id"]
-                # Convert datetime to ISO format string
-                if "created_at" in doc and isinstance(doc["created_at"], datetime):
-                    doc["created_at"] = doc["created_at"].isoformat()
-                # Handle updated_at if it exists
-                if "updated_at" in doc and isinstance(doc["updated_at"], datetime):
-                    doc["updated_at"] = doc["updated_at"].isoformat()
-                results.append(doc)
+            results = [self._serialize_document(doc) for doc in docs]
             
             return results, total_count
         except Exception as e:
@@ -334,13 +349,7 @@ class DatabaseService:
             users_collection = self.db["users"]
             user = await users_collection.find_one({"username": username})
             if user:
-                # Convert ObjectId to string
-                user["id"] = str(user["_id"])
-                del user["_id"]
-                # Convert datetime to ISO format
-                if "created_at" in user and isinstance(user["created_at"], datetime):
-                    user["created_at"] = user["created_at"].isoformat()
-                return user
+                return self._serialize_document(user)
             return None
         except Exception as e:
             print(f"Failed to get user: {e}")
@@ -357,13 +366,7 @@ class DatabaseService:
             users = await cursor.to_list(length=1000)
             
             # Convert documents
-            results = []
-            for user in users:
-                user["id"] = str(user["_id"])
-                del user["_id"]
-                if "created_at" in user and isinstance(user["created_at"], datetime):
-                    user["created_at"] = user["created_at"].isoformat()
-                results.append(user)
+            results = [self._serialize_document(user) for user in users]
             
             return results
         except Exception as e:

services/image.py

@@ -310,10 +310,12 @@ class ImageService:
             # Build input parameters
             input_data = {"prompt": prompt}
             
-            # Add image URL for image-to-image if provided (for nano-banana-pro corrections)
-            # Google Nano Banana expects image_input as an array
-            if image_url and current_model == "nano-banana-pro":
+            # Add image URL for image-to-image if provided (for nano-banana and nano-banana-pro)
+            # Google Nano Banana models expect image_input as an array
+            if image_url and current_model in ["nano-banana", "nano-banana-pro"]:
                 input_data["image_input"] = [image_url]
+                # Note: guidance_scale may not be supported by nano-banana on Replicate
+                # Relying on minimal prompts to preserve the original image
             
             # Add seed if supported
             input_data["seed"] = seed