diff --git a/app/api/generate-thumbnail/route.ts b/app/api/generate-thumbnail/route.ts
index e5acc75..76f8290 100644
--- a/app/api/generate-thumbnail/route.ts
+++ b/app/api/generate-thumbnail/route.ts
@@ -57,7 +57,7 @@ export async function POST(request: NextRequest) {
     }
 
     // Validate parameters
-    const validProviders = ["huggingface", "stability", "fal"];
+    const validProviders = ["huggingface", "stability"];
     const validQualities = ["fast", "balanced", "high"];
     const validStyles = ["tech", "gaming", "tutorial", "lifestyle"];
 
@@ -98,10 +98,6 @@ export async function POST(request: NextRequest) {
         apiKeyMissing = !process.env.STABILITY_API_KEY;
         apiKeyName = "STABILITY_API_KEY";
         break;
-      case "fal":
-        apiKeyMissing = !process.env.FAL_KEY;
-        apiKeyName = "FAL_KEY";
-        break;
     }
 
     if (apiKeyMissing) {
diff --git a/app/api/test-ai/route.ts b/app/api/test-ai/route.ts
index cd42eff..8b486ef 100644
--- a/app/api/test-ai/route.ts
+++ b/app/api/test-ai/route.ts
@@ -1,65 +1,43 @@
-import { NextRequest, NextResponse } from "next/server";
-import { testConnection, testThumbnailGeneration } from "@/lib/ai/huggingface";
+import { NextResponse } from "next/server";
+import { testAllProviders, getProviderStatus } from "@/lib/ai";
 
-export async function POST(request: NextRequest) {
+export async function GET() {
   try {
-    console.log("🔍 Starting AI service test...");
-    console.log("Request body:", await request.text());
+    console.log("🧪 Testing AI Providers...");
 
-    // Check if API key is available
-    if (!process.env.HUGGINGFACE_API_KEY) {
-      return NextResponse.json(
-        {
-          success: false,
-          error: "HUGGINGFACE_API_KEY environment variable is not set",
-          type: "configuration",
-        },
-        { status: 500 }
-      );
-    }
+    // Test environment variables
+    const envStatus = {
+      HUGGINGFACE_API_KEY: process.env.HUGGINGFACE_API_KEY ? "Set" : "Not Set",
+      STABILITY_API_KEY: process.env.STABILITY_API_KEY ? "Set" : "Not Set",
+    };
 
-    // Test basic connection
-    console.log("Testing basic connection...");
-    const connectionTest = await testConnection();
+    console.log("Environment variables:", envStatus);
 
-    if (!connectionTest) {
-      return NextResponse.json(
-        {
-          success: false,
-          error: "HuggingFace API connection failed",
-          type: "connection",
-        },
-        { status: 503 }
-      );
-    }
+    // Test all providers
+    const providerResults = await testAllProviders();
+    console.log("Provider test results:", providerResults);
 
-    // Test thumbnail generation
-    console.log("Testing thumbnail generation...");
-    await testThumbnailGeneration();
+    // Get detailed provider status
+    const providerStatus = await getProviderStatus();
+    console.log("Provider status:", providerStatus);
 
     return NextResponse.json({
       success: true,
-      message: "AI service is working correctly",
+      environmentVariables: envStatus,
+      providerResults,
+      providerStatus,
       timestamp: new Date().toISOString(),
     });
   } catch (error) {
-    console.error("❌ AI service test failed:", error);
+    console.error("❌ Test failed:", error);
 
     return NextResponse.json(
       {
         success: false,
         error: error instanceof Error ? error.message : "Unknown error",
-        type: "test_failed",
         timestamp: new Date().toISOString(),
       },
       { status: 500 }
     );
   }
 }
-
-export async function GET() {
-  return NextResponse.json({
-    message: "AI Test API",
-    usage: "Send a POST request to test the AI service",
-  });
-}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 8589a9f..4cf88fc 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -2,36 +2,31 @@
 import { useState, useEffect, Suspense } from "react";
 import {
   Button,
-  Input,
   Card,
   CardBody,
   CardHeader,
   Image,
   Chip,
-  Divider,
+  Select,
+  SelectItem,
   Progress,
-  Badge,
   Spinner,
+  RadioGroup,
+  Radio,
+  Textarea,
 } from "@nextui-org/react";
 import { PageLayout } from "@/components/layouts/pageLayout";
 import { useUser } from "@/contexts/userContext";
 import { useMessage } from "@/contexts/messageContext";
 import { title, subtitle, button } from "@/components/primitives";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import { AnimatedDiv } from "@/components/motion";
-import { SearchIcon, RightArrowIcon } from "@/components/icons";
-import { motion } from "framer-motion";
-import { Cpu, Clock, AlertCircle, RefreshCw, Globe } from "lucide-react";
-import {
-  getAvailableProviders,
-  getModelsForProvider,
-  type AIProvider,
-  type AIModel,
-} from "@/lib/ai";
+import { Download, Sparkles, Zap, Shield } from "lucide-react";
 
 type ThumbnailStyle = "tech" | "gaming" | "tutorial" | "lifestyle";
 
 interface GenerationResult {
+  success: boolean;
   imageUrl: string;
   prompt: string;
   style: string;
@@ -40,266 +35,148 @@ interface GenerationResult {
   parameters: {
     steps: number;
     guidance_scale: number;
-    negative_prompt: string;
+    width: number;
+    height: number;
   };
-  timestamp: string;
 }
 
-// Error types for better error handling
 interface ErrorInfo {
-  type: "validation" | "network" | "api" | "quota" | "model" | "unknown";
+  type: "validation" | "api" | "network" | "quota" | "model";
   message: string;
-  suggestion?: string;
   retryable: boolean;
 }
 
-// Error categorization helper
-const categorizeError = (error: any): ErrorInfo => {
-  const errorMessage = error?.message || error?.toString() || "Unknown error";
-  const errorLower = errorMessage.toLowerCase();
-
-  // Network errors
-  if (
-    errorLower.includes("network") ||
-    errorLower.includes("fetch") ||
-    errorLower.includes("connection")
-  ) {
-    return {
-      type: "network",
-      message: "Unable to connect to our servers",
-      suggestion: "Please check your internet connection and try again",
-      retryable: true,
-    };
-  }
-
-  // API quota errors
-  if (
-    errorLower.includes("quota") ||
-    errorLower.includes("limit") ||
-    errorLower.includes("rate")
-  ) {
-    return {
-      type: "quota",
-      message: "Generation limit reached",
-      suggestion: "Please try again in a few minutes or consider upgrading",
-      retryable: true,
-    };
-  }
-
-  // Model errors
-  if (
-    errorLower.includes("model") ||
-    errorLower.includes("unavailable") ||
-    errorLower.includes("loading")
-  ) {
-    return {
-      type: "model",
-      message: "AI model is temporarily unavailable",
-      suggestion: "Try switching to a different model or wait a moment",
-      retryable: true,
-    };
-  }
-
-  // Validation errors
-  if (
-    errorLower.includes("invalid") ||
-    errorLower.includes("required") ||
-    errorLower.includes("validation")
-  ) {
-    return {
-      type: "validation",
-      message: errorMessage,
-      suggestion: "Please check your input and try again",
-      retryable: false,
-    };
-  }
-
-  // API errors
-  if (
-    errorLower.includes("api") ||
-    errorLower.includes("server") ||
-    errorLower.includes("500")
-  ) {
-    return {
-      type: "api",
-      message: "Server error occurred",
-      suggestion:
-        "Our servers are experiencing issues. Please try again shortly",
-      retryable: true,
-    };
-  }
-
-  // Unknown errors
-  return {
-    type: "unknown",
-    message: "Something went wrong",
-    suggestion: "Please try again or contact support if the problem persists",
-    retryable: true,
-  };
-};
+const authDisabled = process.env.NODE_ENV === "development";
 
+// Simplified style options with visual indicators
 const styleOptions = [
   {
     key: "tech",
-    label: "Tech Review",
-    description: "Modern, clean, professional",
-    gradient: "from-blue-500 to-cyan-500",
+    label: "Tech & Reviews",
     icon: "💻",
+    description: "Modern, clean tech product presentations",
+    color: "primary" as const,
   },
   {
     key: "gaming",
     label: "Gaming",
-    description: "Intense, dramatic, neon colors",
-    gradient: "from-purple-500 to-pink-500",
     icon: "🎮",
+    description: "Vibrant gaming content with energy",
+    color: "secondary" as const,
   },
   {
     key: "tutorial",
     label: "Tutorial",
-    description: "Educational, clear, step-by-step",
-    gradient: "from-green-500 to-teal-500",
     icon: "📚",
+    description: "Educational and instructional content",
+    color: "success" as const,
   },
   {
     key: "lifestyle",
     label: "Lifestyle",
-    description: "Warm, personal, authentic",
-    gradient: "from-orange-500 to-red-500",
     icon: "✨",
+    description: "Personal and lifestyle content",
+    color: "warning" as const,
   },
 ];
 
-const modelOptions = [
+// Simplified provider options
+const providerOptions = [
   {
-    value: "sdxl",
-    label: "Stable Diffusion XL",
-    description: "Best balance of quality and speed",
-    icon: "⚡",
-    recommended: true,
+    id: "stability",
+    name: "Stability AI",
+    description: "Best Quality • Free",
+    icon: <Shield className="w-5 h-5" />,
+    badge: "Recommended",
+    badgeColor: "success" as const,
   },
   {
-    value: "sd15",
-    label: "Stable Diffusion 1.5",
-    description: "Fast and reliable generation",
-    icon: "🚀",
-    recommended: false,
-  },
-  {
-    value: "sd21",
-    label: "Stable Diffusion 2.1",
-    description: "Good quality output",
-    icon: "📸",
-    recommended: false,
+    id: "huggingface",
+    name: "HuggingFace",
+    description: "Good Quality • Free with limits",
+    icon: <Zap className="w-5 h-5" />,
+    badge: "Backup",
+    badgeColor: "primary" as const,
   },
 ];
 
+// Simplified quality options
 const qualityOptions = [
-  {
-    value: "fast",
-    label: "Fast",
-    description: "Quick generation (~15s)",
-    icon: "⚡",
-    recommended: false,
-  },
-  {
-    value: "balanced",
-    label: "Balanced",
-    description: "Good quality (~25s)",
-    icon: "⚖️",
-    recommended: true,
-  },
-  {
-    value: "high",
-    label: "High",
-    description: "Best quality (~40s)",
-    icon: "💎",
-    recommended: false,
-  },
+  { value: "fast", label: "Fast", description: "Quick generation (~10s)" },
+  { value: "balanced", label: "Balanced", description: "Good quality (~20s)" },
+  { value: "high", label: "High", description: "Best quality (~30s)" },
 ];
 
-// Intelligent suggestion system - creates short, punchy suggestions
-const generateSmartSuggestions = (input: string): string[] => {
-  const inputLower = input.toLowerCase();
-  const suggestions: string[] = [];
+// Quick prompt suggestions
+const promptSuggestions = [
+  "iPhone 15 Pro Max review with surprised reaction",
+  "Gaming setup tour with RGB lighting",
+  "How to cook perfect pasta tutorial",
+  "Morning routine lifestyle content",
+  "Unboxing the latest tech gadget",
+  "Minecraft building tutorial castle",
+];
 
-  // Content type suggestions
-  if (inputLower.includes("review") || inputLower.includes("unboxing")) {
-    suggestions.push("Tech product review with shocked reaction");
-    suggestions.push("Unboxing video with surprised face");
-  }
-  if (inputLower.includes("tutorial") || inputLower.includes("how to")) {
-    suggestions.push("Step-by-step tutorial with clear instructions");
-    suggestions.push("Easy tutorial for beginners");
+function categorizeError(error: any): ErrorInfo {
+  const errorMessage = error?.message || error?.toString() || "Unknown error";
+  const lowerMessage = errorMessage.toLowerCase();
+
+  if (lowerMessage.includes("enter a video description")) {
+    return {
+      type: "validation",
+      message: "Please enter a description for your content",
+      retryable: false,
+    };
   }
-  if (inputLower.includes("gaming") || inputLower.includes("game")) {
-    suggestions.push("Epic gaming moment with intense action");
-    suggestions.push("Gaming highlight reel compilation");
+
+  if (lowerMessage.includes("rate") || lowerMessage.includes("quota")) {
+    return {
+      type: "quota",
+      message: "Too many requests. Please wait a moment and try again.",
+      retryable: true,
+    };
   }
-  if (inputLower.includes("lifestyle") || inputLower.includes("vlog")) {
-    suggestions.push("Daily lifestyle vlog with authentic moments");
-    suggestions.push("Personal story with emotional journey");
+
+  if (lowerMessage.includes("network") || lowerMessage.includes("fetch")) {
+    return {
+      type: "network",
+      message: "Network error. Please check your connection and try again.",
+      retryable: true,
+    };
   }
 
-  // Generic suggestions if no specific content detected
-  if (suggestions.length === 0) {
-    suggestions.push("Exciting content with dramatic reveal");
-    suggestions.push("Before and after transformation");
-    suggestions.push("Top 10 list with numbered items");
-    suggestions.push("Challenge video with surprising outcome");
+  if (
+    lowerMessage.includes("api key") ||
+    lowerMessage.includes("unauthorized")
+  ) {
+    return {
+      type: "api",
+      message: "AI service not configured. Please try a different provider.",
+      retryable: false,
+    };
   }
 
-  return suggestions.slice(0, 3);
-};
+  return {
+    type: "api",
+    message: "Something went wrong. Please try again.",
+    retryable: true,
+  };
+}
 
 function DashboardContent() {
   const { user, loading: userLoading } = useUser();
   const { message } = useMessage();
-  const router = useRouter();
   const searchParams = useSearchParams();
 
+  // Simplified state management
   const [prompt, setPrompt] = useState("");
   const [style, setStyle] = useState<ThumbnailStyle>("tech");
-  const [provider, setProvider] = useState("huggingface");
-  const [model, setModel] = useState("sdxl");
+  const [provider, setProvider] = useState("stability");
   const [quality, setQuality] = useState("balanced");
   const [loading, setLoading] = useState(false);
   const [progress, setProgress] = useState(0);
   const [result, setResult] = useState<GenerationResult | null>(null);
   const [error, setError] = useState<ErrorInfo | null>(null);
-  const [retryCount, setRetryCount] = useState(0);
-  const [suggestions, setSuggestions] = useState<string[]>([]);
-  const [refinementPrompt, setRefinementPrompt] = useState("");
-  const [hasRefined, setHasRefined] = useState(false);
-  const [isRefining, setIsRefining] = useState(false);
-  const [availableProviders, setAvailableProviders] = useState<AIProvider[]>(
-    []
-  );
-  const [currentModels, setCurrentModels] = useState<AIModel[]>([]);
-
-  // Load available providers on component mount
-  useEffect(() => {
-    const providers = getAvailableProviders();
-    setAvailableProviders(providers);
-
-    // Set default provider based on availability
-    if (providers.length > 0) {
-      setProvider(providers[0].id);
-    }
-  }, []);
-
-  // Update models when provider changes
-  useEffect(() => {
-    if (provider) {
-      const models = getModelsForProvider(provider);
-      setCurrentModels(models);
-
-      // Set default model for the provider
-      if (models.length > 0) {
-        const recommendedModel = models.find((m) => m.recommended) || models[0];
-        setModel(recommendedModel.id);
-      }
-    }
-  }, [provider]);
 
   // Handle search parameters
   useEffect(() => {
@@ -309,52 +186,13 @@ function DashboardContent() {
     }
   }, [searchParams]);
 
-  // Generate suggestions based on user input
-  useEffect(() => {
-    if (prompt.trim().length >= 3) {
-      const newSuggestions = generateSmartSuggestions(prompt);
-      setSuggestions(newSuggestions);
-    } else {
-      setSuggestions([]);
-    }
-  }, [prompt]);
-
-  // Simulate progress during generation
-  useEffect(() => {
-    if (loading || isRefining) {
-      setProgress(0);
-      const interval = setInterval(() => {
-        setProgress((prev) => {
-          if (prev >= 90) return prev;
-          return prev + Math.random() * 15;
-        });
-      }, 500);
-      return () => clearInterval(interval);
-    }
-  }, [loading, isRefining]);
-
-  // Show toast notifications for errors
-  useEffect(() => {
-    if (error) {
-      message(error.message, "error");
-    }
-  }, [error, message]);
-
-  // Redirect if not authenticated (unless auth is disabled)
-  const authDisabled = process.env.NEXT_PUBLIC_DISABLE_AUTH === "true";
-  if (!authDisabled && !userLoading && !user) {
-    router.push("/");
-    return null;
-  }
-
   const handleGenerate = async () => {
     if (!prompt.trim()) {
-      const validationError = {
-        type: "validation" as const,
-        message: "Please enter a video description",
+      setError({
+        type: "validation",
+        message: "Please enter a description for your content",
         retryable: false,
-      };
-      setError(validationError);
+      });
       return;
     }
 
@@ -362,13 +200,11 @@ function DashboardContent() {
     setError(null);
     setResult(null);
     setProgress(0);
-    setHasRefined(false);
-    setRefinementPrompt("");
 
-    // Simulate progress updates
+    // Smooth progress animation
     const progressInterval = setInterval(() => {
-      setProgress((prev) => Math.min(prev + 10, 90));
-    }, 800);
+      setProgress((prev) => Math.min(prev + 8, 90));
+    }, 600);
 
     try {
       const userId = authDisabled ? "demo-user" : user?.uid;
@@ -380,7 +216,6 @@ function DashboardContent() {
         body: JSON.stringify({
           prompt,
           style,
-          model,
           quality,
           provider,
           userId,
@@ -398,8 +233,7 @@ function DashboardContent() {
 
       if (data.success) {
         setResult(data);
-        message("Thumbnail generated successfully!", "success");
-        setRetryCount(0);
+        message("🎉 Thumbnail generated successfully!", "success");
       } else {
         const errorInfo = categorizeError(data.error);
         setError(errorInfo);
@@ -415,88 +249,19 @@ function DashboardContent() {
     }
   };
 
-  const handleRetry = () => {
-    setRetryCount((prev) => prev + 1);
-    setError(null);
-    setTimeout(() => {
-      handleGenerate();
-    }, 1000);
-  };
-
-  const handleRefine = async () => {
-    if (!refinementPrompt.trim()) {
-      const validationError = {
-        type: "validation" as const,
-        message: "Please enter a refinement prompt",
-        retryable: false,
-      };
-      setError(validationError);
-      return;
-    }
-
-    setIsRefining(true);
-    setError(null);
-    setProgress(0);
-
-    const progressInterval = setInterval(() => {
-      setProgress((prev) => Math.min(prev + 10, 90));
-    }, 800);
-
-    try {
-      const userId = authDisabled ? "demo-user" : user?.uid;
-      const refinedPrompt = `${prompt} ${refinementPrompt}`.trim();
-
-      const response = await fetch("/api/generate-thumbnail", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          prompt: refinedPrompt,
-          style,
-          model,
-          quality,
-          provider,
-          userId,
-          refinementPrompt,
-        }),
-      });
-
-      clearInterval(progressInterval);
-      setProgress(100);
-
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-      }
-
-      const data = await response.json();
-
-      if (data.success) {
-        setResult(data);
-        setHasRefined(true);
-        setRefinementPrompt("");
-        message("Thumbnail refined successfully!", "success");
-      } else {
-        const errorInfo = categorizeError(data.error);
-        setError(errorInfo);
-      }
-    } catch (err) {
-      clearInterval(progressInterval);
-      const errorInfo = categorizeError(err);
-      setError(errorInfo);
-      console.error("Refinement error:", err);
-    } finally {
-      setIsRefining(false);
-      setTimeout(() => setProgress(0), 2000);
-    }
-  };
-
   const handleSuggestionClick = (suggestion: string) => {
     setPrompt(suggestion);
-    setSuggestions([]);
     setError(null);
   };
 
+  const handleDownload = () => {
+    if (!result) return;
+    const link = document.createElement("a");
+    link.href = result.imageUrl;
+    link.download = `thumbnail-${Date.now()}.png`;
+    link.click();
+  };
+
   if (userLoading) {
     return (
       <PageLayout showNav={true}>
@@ -509,324 +274,232 @@ function DashboardContent() {
 
   return (
     <PageLayout showNav={true}>
-      <div className="container mx-auto max-w-7xl py-6 md:py-10">
-        {/* Header Section */}
-        <AnimatedDiv className="text-center mb-12">
-          <h1 className={title({ size: "lg" })}>Create Your Perfect&nbsp;</h1>
-          <h1 className={title({ color: "base", size: "lg" })}>Thumbnail</h1>
-          <p className={subtitle({ class: "mt-4 mx-auto" })}>
-            Transform your video ideas into eye-catching thumbnails that boost
-            clicks and engagement
+      <div className="container mx-auto max-w-6xl py-6 md:py-10">
+        {/* Header */}
+        <AnimatedDiv className="text-center mb-8">
+          <h1 className={title({ size: "lg" })}>Create Perfect&nbsp;</h1>
+          <h1 className={title({ color: "base", size: "lg" })}>Thumbnails</h1>
+          <p className={subtitle({ class: "mt-4" })}>
+            Generate eye-catching thumbnails in seconds with AI&apos;s power
           </p>
         </AnimatedDiv>
 
-        <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
-          {/* Main Generation Section */}
-          <div className="xl:col-span-2 space-y-6">
-            {/* Input Section */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Generation Form */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Step 1: Describe Your Content */}
             <AnimatedDiv>
-              <Card className="p-6 shadow-xl bg-default-50/50 dark:bg-default-100/50 backdrop-blur-md">
-                <CardBody className="space-y-6">
-                  <div className="space-y-2">
-                    <h2 className="text-2xl font-semibold">
-                      Describe Your Content
-                    </h2>
-                    <p className="text-default-600 text-sm">
-                      Tell us what your content is about and we&apos;ll create
-                      the perfect thumbnail
-                    </p>
+              <Card className="shadow-lg">
+                <CardHeader>
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold">
+                      1
+                    </div>
+                    <div>
+                      <h3 className="text-xl font-semibold">
+                        Describe Your Content
+                      </h3>
+                      <p className="text-sm text-default-600">
+                        What&apos;s your video about?
+                      </p>
+                    </div>
                   </div>
-
-                  <Input
+                </CardHeader>
+                <CardBody className="space-y-4">
+                  <Textarea
                     size="lg"
-                    label="Content Description"
                     placeholder="e.g., iPhone 15 Pro Max review with surprised reaction"
                     value={prompt}
                     onChange={(e) => setPrompt(e.target.value)}
-                    maxLength={500}
-                    description={`${prompt.length}/500 characters`}
-                    startContent={
-                      <SearchIcon className="text-default-400 pointer-events-none flex-shrink-0" />
-                    }
+                    maxLength={200}
+                    description={`${prompt.length}/200 characters`}
                     classNames={{
-                      inputWrapper: [
-                        "shadow-md",
-                        "bg-default-200/50",
-                        "dark:bg-default/60",
-                        "backdrop-blur-xl",
-                        "hover:bg-default-200/70",
-                        "dark:hover:bg-default/70",
-                        "group-data-[focus=true]:bg-default-200/50",
-                        "dark:group-data-[focus=true]:bg-default/60",
-                        "border-2",
-                        "border-transparent",
-                        "group-data-[focus=true]:border-primary/50",
-                      ],
+                      inputWrapper: "shadow-sm",
                     }}
                   />
 
-                  {/* Intelligent Suggestions */}
-                  {suggestions.length > 0 && (
-                    <div className="space-y-3">
-                      <p className="text-sm font-medium text-default-700">
-                        Or try these suggestions:
-                      </p>
-                      <div className="flex flex-wrap gap-2">
-                        {suggestions.map((suggestion, index) => (
-                          <Chip
+                  {/* Quick Suggestions */}
+                  <div className="space-y-2">
+                    <p className="text-sm text-default-600">
+                      Quick suggestions:
+                    </p>
+                    <div className="flex flex-wrap gap-2">
+                      {promptSuggestions
+                        .slice(0, 3)
+                        .map((suggestion, index) => (
+                          <Button
                             key={index}
-                            variant="bordered"
-                            className="cursor-pointer hover:bg-primary hover:text-white transition-colors max-w-xs"
+                            size="sm"
+                            variant="flat"
+                            className="text-xs"
                             onClick={() => handleSuggestionClick(suggestion)}
-                            title={suggestion}
                           >
-                            <span className="truncate block max-w-[200px]">
-                              {suggestion}
-                            </span>
-                          </Chip>
+                            {suggestion}
+                          </Button>
                         ))}
-                      </div>
-                      <p className="text-xs text-default-500">
-                        Click a suggestion to use it, or keep typing for more
-                        ideas
-                      </p>
                     </div>
-                  )}
+                  </div>
                 </CardBody>
               </Card>
             </AnimatedDiv>
 
-            {/* Style Selection */}
+            {/* Step 2: Choose Style */}
             <AnimatedDiv>
-              <Card className="p-6 shadow-xl bg-default-50/50 dark:bg-default-100/50 backdrop-blur-md">
-                <CardBody className="space-y-4">
-                  <div className="space-y-2">
-                    <h2 className="text-2xl font-semibold">
-                      Choose Your Style
-                    </h2>
-                    <p className="text-default-600 text-sm">
-                      Select the aesthetic that matches your content
-                    </p>
+              <Card className="shadow-lg">
+                <CardHeader>
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 bg-secondary rounded-full flex items-center justify-center text-white font-bold">
+                      2
+                    </div>
+                    <div>
+                      <h3 className="text-xl font-semibold">Choose Style</h3>
+                      <p className="text-sm text-default-600">
+                        Pick the style that matches your content
+                      </p>
+                    </div>
                   </div>
-
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                    {styleOptions.map((option) => (
-                      <Card
-                        key={option.key}
-                        isPressable
-                        isHoverable
-                        className={`transition-all cursor-pointer ${
-                          style === option.key
-                            ? "ring-2 ring-primary ring-offset-2 ring-offset-background scale-105"
-                            : "hover:scale-102"
-                        }`}
-                        onClick={() => setStyle(option.key as ThumbnailStyle)}
-                      >
-                        <CardBody className="p-4 text-center">
-                          <div
-                            className={`w-12 h-12 rounded-full bg-gradient-to-br ${option.gradient} flex items-center justify-center mx-auto mb-3`}
+                </CardHeader>
+                <CardBody>
+                  <RadioGroup
+                    value={style}
+                    onValueChange={(value) => setStyle(value as ThumbnailStyle)}
+                    className="gap-4"
+                  >
+                    <div className="grid grid-cols-2 gap-4">
+                      {styleOptions.map((option) => (
+                        <div key={option.key} className="relative">
+                          <Radio
+                            value={option.key}
+                            classNames={{
+                              base: "hidden",
+                            }}
+                          />
+                          <Card
+                            className={`cursor-pointer transition-all ${
+                              style === option.key
+                                ? "ring-2 ring-primary bg-primary/10"
+                                : "hover:bg-default-50"
+                            }`}
+                            isPressable
+                            onPress={() =>
+                              setStyle(option.key as ThumbnailStyle)
+                            }
                           >
-                            <span className="text-xl">{option.icon}</span>
-                          </div>
-                          <h3 className="font-semibold text-sm mb-1">
-                            {option.label}
-                          </h3>
-                          <p className="text-xs text-default-500">
-                            {option.description}
-                          </p>
-                        </CardBody>
-                      </Card>
-                    ))}
-                  </div>
+                            <CardBody className="p-4">
+                              <div className="flex items-center gap-3">
+                                <span className="text-2xl">{option.icon}</span>
+                                <div>
+                                  <h4 className="font-semibold">
+                                    {option.label}
+                                  </h4>
+                                  <p className="text-xs text-default-600">
+                                    {option.description}
+                                  </p>
+                                </div>
+                              </div>
+                            </CardBody>
+                          </Card>
+                        </div>
+                      ))}
+                    </div>
+                  </RadioGroup>
                 </CardBody>
               </Card>
             </AnimatedDiv>
 
-            {/* AI Provider Selection */}
+            {/* Step 3: Settings */}
             <AnimatedDiv>
-              <Card className="p-6 shadow-xl bg-default-50/50 dark:bg-default-100/50 backdrop-blur-md">
-                <CardBody className="space-y-4">
-                  <div className="space-y-2">
-                    <h2 className="text-2xl font-semibold">
-                      Choose AI Provider
-                    </h2>
-                    <p className="text-default-600 text-sm">
-                      Select your preferred AI service for generating thumbnails
-                    </p>
-                  </div>
-
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                    {availableProviders.map((providerOption) => (
-                      <motion.div
-                        key={providerOption.id}
-                        whileHover={{ scale: 1.02 }}
-                        whileTap={{ scale: 0.98 }}
-                      >
-                        <Card
-                          isPressable
-                          className={`cursor-pointer transition-all h-full ${
-                            provider === providerOption.id
-                              ? "ring-2 ring-primary ring-offset-2 ring-offset-background scale-105 bg-gradient-to-br from-primary/10 to-secondary/10"
-                              : "hover:scale-102 bg-default-100/50 hover:bg-default-200/50"
-                          }`}
-                          onClick={() => setProvider(providerOption.id)}
-                        >
-                          <CardBody className="p-4 text-center">
-                            <div
-                              className={`w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 ${
-                                provider === providerOption.id
-                                  ? "bg-gradient-to-br from-primary to-secondary text-white"
-                                  : "bg-gradient-to-br from-gray-400 to-gray-600 text-white"
-                              }`}
-                            >
-                              <Globe className="w-6 h-6" />
-                            </div>
-                            <div className="flex items-center justify-center gap-2 mb-2">
-                              <h3 className="font-semibold text-sm">
-                                {providerOption.name}
-                              </h3>
-                              <Badge
-                                color={
-                                  providerOption.pricing === "FREE"
-                                    ? "success"
-                                    : providerOption.pricing.includes("FREE")
-                                      ? "warning"
-                                      : "primary"
-                                }
-                                size="sm"
-                                variant="flat"
-                              >
-                                {providerOption.pricing}
-                              </Badge>
-                            </div>
-                            <p className="text-xs text-default-500 mb-2">
-                              {providerOption.description}
-                            </p>
-                            <p className="text-xs text-default-400">
-                              {providerOption.models.length} model
-                              {providerOption.models.length !== 1 ? "s" : ""}
-                            </p>
-                          </CardBody>
-                        </Card>
-                      </motion.div>
-                    ))}
+              <Card className="shadow-lg">
+                <CardHeader>
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 bg-success rounded-full flex items-center justify-center text-white font-bold">
+                      3
+                    </div>
+                    <div>
+                      <h3 className="text-xl font-semibold">Settings</h3>
+                      <p className="text-sm text-default-600">
+                        Choose your AI provider and quality
+                      </p>
+                    </div>
                   </div>
-                </CardBody>
-              </Card>
-            </AnimatedDiv>
-
-            {/* Model and Quality Settings */}
-            <AnimatedDiv>
-              <Card className="p-6 shadow-xl bg-default-50/50 dark:bg-default-100/50 backdrop-blur-md">
+                </CardHeader>
                 <CardBody className="space-y-4">
-                  <div className="space-y-2">
-                    <h2 className="text-2xl font-semibold">
-                      Advanced Settings
-                    </h2>
-                    <p className="text-default-600 text-sm">
-                      Fine-tune your generation parameters
-                    </p>
-                  </div>
-
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    {/* Model Selection */}
-                    <div>
-                      <div className="flex items-center gap-2 mb-3">
-                        <Cpu className="w-4 h-4 text-purple-400" />
-                        <span className="text-default-700 font-medium">
-                          AI Model
-                        </span>
-                      </div>
-                      <div className="space-y-3">
-                        {currentModels.map((option) => (
-                          <motion.div
-                            key={option.id}
-                            whileHover={{ scale: 1.02 }}
-                            whileTap={{ scale: 0.98 }}
-                          >
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {/* Provider Selection */}
+                    <div className="space-y-2">
+                      <label className="text-sm font-medium">AI Provider</label>
+                      <RadioGroup
+                        value={provider}
+                        onValueChange={setProvider}
+                        className="gap-2"
+                      >
+                        {providerOptions.map((option) => (
+                          <div key={option.id} className="relative">
+                            <Radio
+                              value={option.id}
+                              classNames={{
+                                base: "hidden",
+                              }}
+                            />
                             <Card
-                              isPressable
                               className={`cursor-pointer transition-all ${
-                                model === option.id
-                                  ? "bg-gradient-to-r from-purple-600 to-blue-600 scale-105"
-                                  : "bg-default-200/50 hover:bg-default-300/50"
+                                provider === option.id
+                                  ? "ring-2 ring-primary bg-primary/10"
+                                  : "hover:bg-default-50"
                               }`}
-                              onClick={() => setModel(option.id)}
+                              isPressable
+                              onPress={() => setProvider(option.id)}
                             >
-                              <CardBody className="p-4">
+                              <CardBody className="p-3">
                                 <div className="flex items-center justify-between">
-                                  <div>
-                                    <div className="flex items-center gap-2">
-                                      <span className="text-default-700 font-medium">
+                                  <div className="flex items-center gap-2">
+                                    {option.icon}
+                                    <div>
+                                      <h4 className="font-semibold text-sm">
                                         {option.name}
-                                      </span>
-                                      {option.recommended && (
-                                        <Badge color="success" size="sm">
-                                          Recommended
-                                        </Badge>
-                                      )}
+                                      </h4>
+                                      <p className="text-xs text-default-600">
+                                        {option.description}
+                                      </p>
                                     </div>
-                                    <p className="text-default-500 text-sm mt-1">
-                                      {option.description}
-                                    </p>
                                   </div>
-                                  <div className="text-2xl">{option.icon}</div>
+                                  <Chip
+                                    size="sm"
+                                    color={option.badgeColor}
+                                    variant="flat"
+                                  >
+                                    {option.badge}
+                                  </Chip>
                                 </div>
                               </CardBody>
                             </Card>
-                          </motion.div>
+                          </div>
                         ))}
-                      </div>
+                      </RadioGroup>
                     </div>
 
                     {/* Quality Selection */}
-                    <div>
-                      <div className="flex items-center gap-2 mb-3">
-                        <Clock className="w-4 h-4 text-pink-400" />
-                        <span className="text-default-700 font-medium">
-                          Quality
-                        </span>
-                      </div>
-                      <div className="space-y-3">
+                    <div className="space-y-2">
+                      <label className="text-sm font-medium">Quality</label>
+                      <Select
+                        value={quality}
+                        onChange={(e) => setQuality(e.target.value)}
+                        placeholder="Select quality"
+                        classNames={{
+                          trigger: "shadow-sm",
+                        }}
+                      >
                         {qualityOptions.map((option) => (
-                          <motion.div
-                            key={option.value}
-                            whileHover={{ scale: 1.02 }}
-                            whileTap={{ scale: 0.98 }}
-                          >
-                            <Card
-                              isPressable
-                              className={`cursor-pointer transition-all ${
-                                quality === option.value
-                                  ? "bg-gradient-to-r from-pink-600 to-purple-600 scale-105"
-                                  : "bg-default-200/50 hover:bg-default-300/50"
-                              }`}
-                              onClick={() => setQuality(option.value)}
-                            >
-                              <CardBody className="p-4">
-                                <div className="flex items-center justify-between">
-                                  <div>
-                                    <div className="flex items-center gap-2">
-                                      <span className="text-default-700 font-medium">
-                                        {option.label}
-                                      </span>
-                                      {option.recommended && (
-                                        <Badge color="warning" size="sm">
-                                          Balanced
-                                        </Badge>
-                                      )}
-                                    </div>
-                                    <p className="text-default-500 text-sm mt-1">
-                                      {option.description}
-                                    </p>
-                                  </div>
-                                  <div className="text-2xl">{option.icon}</div>
-                                </div>
-                              </CardBody>
-                            </Card>
-                          </motion.div>
+                          <SelectItem key={option.value} value={option.value}>
+                            <div>
+                              <div className="font-medium">{option.label}</div>
+                              <div className="text-xs text-default-600">
+                                {option.description}
+                              </div>
+                            </div>
+                          </SelectItem>
                         ))}
-                      </div>
+                      </Select>
                     </div>
                   </div>
                 </CardBody>
@@ -837,29 +510,25 @@ function DashboardContent() {
             <AnimatedDiv>
               <Button
                 size="lg"
-                className={button({ color: "gradient" })}
+                className={`${button({ color: "gradient" })} h-14 text-lg`}
                 onClick={handleGenerate}
                 isLoading={loading}
                 fullWidth
-                endContent={
-                  !loading && <RightArrowIcon className="w-5 h-5 text-white" />
-                }
+                startContent={!loading && <Sparkles className="w-5 h-5" />}
               >
                 {loading ? "Creating Your Thumbnail..." : "Generate Thumbnail"}
               </Button>
             </AnimatedDiv>
 
-            {/* Progress Bar */}
-            {(loading || isRefining) && (
+            {/* Progress */}
+            {loading && (
               <AnimatedDiv>
-                <Card className="p-4 shadow-lg bg-default-50/50 dark:bg-default-100/50 backdrop-blur-md">
-                  <CardBody>
+                <Card className="shadow-lg">
+                  <CardBody className="p-4">
                     <div className="space-y-3">
                       <div className="flex items-center justify-between">
-                        <p className="text-sm font-medium">
-                          {isRefining ? "Refining..." : "Generating..."}
-                        </p>
-                        <p className="text-sm text-default-500">
+                        <p className="font-medium">Generating...</p>
+                        <p className="text-sm text-default-600">
                           {Math.round(progress)}%
                         </p>
                       </div>
@@ -867,56 +536,43 @@ function DashboardContent() {
                         value={progress}
                         className="w-full"
                         color="primary"
-                        size="sm"
                       />
-                      <div className="text-xs text-default-500 text-center">
-                        Using {currentModels.find((m) => m.id === model)?.name}{" "}
-                        •{" "}
-                        {qualityOptions.find((q) => q.value === quality)?.label}{" "}
-                        quality •{" "}
-                        {
-                          availableProviders.find((p) => p.id === provider)
-                            ?.name
-                        }
-                      </div>
+                      <p className="text-xs text-center text-default-500">
+                        Using{" "}
+                        {provider === "stability"
+                          ? "Stability AI"
+                          : "HuggingFace"}{" "}
+                        • {quality} quality
+                      </p>
                     </div>
                   </CardBody>
                 </Card>
               </AnimatedDiv>
             )}
 
-            {/* Enhanced Error Display */}
+            {/* Error Display */}
             {error && (
               <AnimatedDiv>
-                <Card className="p-4 shadow-lg bg-danger-50/50 border-2 border-danger-200 dark:bg-danger-100/10 dark:border-danger-800">
-                  <CardBody>
-                    <div className="flex items-start gap-3">
-                      <AlertCircle className="w-5 h-5 text-danger-500 mt-0.5 flex-shrink-0" />
-                      <div className="flex-1 space-y-2">
-                        <div className="font-medium text-danger-700 dark:text-danger-400">
+                <Card className="shadow-lg border-l-4 border-danger">
+                  <CardBody className="p-4">
+                    <div className="flex items-center gap-3">
+                      <div className="w-8 h-8 bg-danger rounded-full flex items-center justify-center text-white text-sm">
+                        !
+                      </div>
+                      <div className="flex-1">
+                        <h4 className="font-semibold text-danger">Error</h4>
+                        <p className="text-sm text-default-600">
                           {error.message}
-                        </div>
-                        {error.suggestion && (
-                          <div className="text-sm text-danger-600 dark:text-danger-300">
-                            {error.suggestion}
-                          </div>
-                        )}
-                        {retryCount > 0 && (
-                          <div className="text-xs text-danger-500 dark:text-danger-400">
-                            Retry attempt: {retryCount}
-                          </div>
-                        )}
+                        </p>
                       </div>
                       {error.retryable && (
                         <Button
-                          color="danger"
-                          variant="light"
                           size="sm"
-                          onClick={handleRetry}
-                          startContent={<RefreshCw className="w-4 h-4" />}
-                          isDisabled={loading}
+                          color="danger"
+                          variant="flat"
+                          onClick={handleGenerate}
                         >
-                          Retry
+                          Try Again
                         </Button>
                       )}
                     </div>
@@ -926,12 +582,12 @@ function DashboardContent() {
             )}
           </div>
 
-          {/* Results Panel */}
-          <div className="xl:col-span-1">
+          {/* Result Preview */}
+          <div className="lg:col-span-1">
             <div className="sticky top-8">
-              <Card className="shadow-xl bg-default-50/50 dark:bg-default-100/50 backdrop-blur-md">
-                <CardHeader className="pb-3">
-                  <h2 className="text-xl font-semibold">Preview</h2>
+              <Card className="shadow-lg">
+                <CardHeader>
+                  <h3 className="text-xl font-semibold">Preview</h3>
                 </CardHeader>
                 <CardBody>
                   {result ? (
@@ -940,111 +596,52 @@ function DashboardContent() {
                         <Image
                           src={result.imageUrl}
                           alt="Generated thumbnail"
-                          className="w-full rounded-lg shadow-lg hover:shadow-xl transition-shadow"
+                          className="w-full rounded-lg shadow-md"
                           radius="md"
                         />
                       </div>
-
-                      <Divider />
-
-                      <div className="space-y-3">
+                      <div className="space-y-2">
                         <div className="flex items-center justify-between">
-                          <span className="text-sm font-medium">Model:</span>
+                          <span className="text-sm font-medium">Provider:</span>
                           <Chip size="sm" variant="flat" color="primary">
-                            {modelOptions.find((m) => m.value === model)?.label}
+                            {result.provider === "stability"
+                              ? "Stability AI"
+                              : "HuggingFace"}
                           </Chip>
                         </div>
                         <div className="flex items-center justify-between">
                           <span className="text-sm font-medium">Style:</span>
-                          <Chip size="sm" variant="flat" color="primary">
-                            {styleOptions.find((s) => s.key === style)?.label}
+                          <Chip size="sm" variant="flat" color="secondary">
+                            {
+                              styleOptions.find((s) => s.key === result.style)
+                                ?.label
+                            }
                           </Chip>
                         </div>
                         <div className="flex items-center justify-between">
-                          <span className="text-sm font-medium">
-                            Parameters:
-                          </span>
-                          <Chip size="sm" variant="flat" color="primary">
-                            {result.parameters.steps} steps,{" "}
-                            {result.parameters.guidance_scale} guidance
+                          <span className="text-sm font-medium">Size:</span>
+                          <Chip size="sm" variant="flat" color="success">
+                            {result.parameters.width}x{result.parameters.height}
                           </Chip>
                         </div>
                       </div>
 
                       <Button
-                        onClick={() => {
-                          const link = document.createElement("a");
-                          link.href = result.imageUrl;
-                          link.download = "thumbnail.png";
-                          link.click();
-                        }}
+                        onClick={handleDownload}
                         className="w-full"
                         color="primary"
-                        variant="flat"
+                        startContent={<Download className="w-4 h-4" />}
                       >
                         Download Thumbnail
                       </Button>
-
-                      {/* Refinement Section */}
-                      {!hasRefined && (
-                        <div className="space-y-3 mt-4 pt-4 border-t border-default-200">
-                          <div className="space-y-1">
-                            <h3 className="text-sm font-medium text-default-700">
-                              Refine Your Thumbnail
-                            </h3>
-                            <p className="text-xs text-default-500">
-                              Make one improvement to your thumbnail
-                            </p>
-                          </div>
-                          <Input
-                            size="sm"
-                            placeholder="e.g., make it more colorful, add text, change lighting..."
-                            value={refinementPrompt}
-                            onChange={(e) =>
-                              setRefinementPrompt(e.target.value)
-                            }
-                            maxLength={200}
-                            description={`${refinementPrompt.length}/200 characters`}
-                            classNames={{
-                              inputWrapper: [
-                                "bg-default-100",
-                                "border-1",
-                                "border-default-200",
-                                "hover:border-default-300",
-                                "focus:border-primary",
-                              ],
-                            }}
-                          />
-                          <Button
-                            onClick={handleRefine}
-                            isLoading={isRefining}
-                            size="sm"
-                            className="w-full"
-                            color="secondary"
-                            variant="flat"
-                            isDisabled={!refinementPrompt.trim()}
-                          >
-                            {isRefining ? "Refining..." : "Refine Thumbnail"}
-                          </Button>
-                        </div>
-                      )}
-
-                      {hasRefined && (
-                        <div className="mt-4 pt-4 border-t border-default-200">
-                          <div className="flex items-center justify-center gap-2 text-sm text-success-600">
-                            <span className="text-success-500">✓</span>
-                            <span>Thumbnail refined</span>
-                          </div>
-                        </div>
-                      )}
                     </div>
                   ) : (
                     <div className="text-center py-12">
-                      <div className="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-primary-100 to-secondary-100 rounded-full flex items-center justify-center">
-                        <span className="text-2xl">🎨</span>
+                      <div className="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-primary-100 to-secondary-100 rounded-full flex items-center justify-center">
+                        <span className="text-3xl">🎨</span>
                       </div>
-                      <p className="text-default-500 text-sm">
-                        Your generated thumbnail will appear here
+                      <p className="text-default-500">
+                        Your thumbnail will appear here
                       </p>
                     </div>
                   )}
diff --git a/config/site.ts b/config/site.ts
index cd4a88b..196a0cf 100644
--- a/config/site.ts
+++ b/config/site.ts
@@ -34,7 +34,7 @@ export const siteConfig = {
   links: {
     github: "https://github.com/pycomet",
     docs: "https://github.com/pycomet",
-    sponsor: "https://patreon.com/jrgarciadev", // TODO: Add Patreon Account
+    sponsor: "https://patreon.com/pycomet",
   },
   searchTopics: [
     "How to make your first $1000",
diff --git a/lib/ai/fal.ts b/lib/ai/fal.ts
deleted file mode 100644
index 3f7f630..0000000
--- a/lib/ai/fal.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-// fal.ai Provider Implementation
-import {
-  ThumbnailGenerationOptions,
-  ThumbnailResult,
-  GenerationParameters,
-} from "./providers";
-
-// Note: fal.ai client should be installed: npm install @fal-ai/client
-// For now, we'll use fetch directly to avoid adding dependencies
-
-const FAL_API_URL = "https://fal.run/fal-ai";
-
-// Style prompts optimized for fal.ai models
-const stylePrompts = {
-  tech: {
-    positive:
-      "professional tech product, modern design, clean lighting, high quality, tech review thumbnail, sharp focus",
-    negative: "blurry, low quality, amateur, watermark, text overlay",
-    basePrompt: "tech product showcase",
-  },
-  gaming: {
-    positive:
-      "gaming setup, colorful RGB lighting, exciting atmosphere, gaming thumbnail, high energy, dramatic",
-    negative: "boring, dull, poor lighting, low quality",
-    basePrompt: "gaming content thumbnail",
-  },
-  tutorial: {
-    positive:
-      "educational content, clear presentation, professional layout, tutorial thumbnail, instructional, clean",
-    negative: "confusing, cluttered, messy, poor quality",
-    basePrompt: "tutorial content thumbnail",
-  },
-  lifestyle: {
-    positive:
-      "lifestyle photo, natural lighting, authentic, warm, lifestyle thumbnail, personal content, candid",
-    negative: "artificial, fake, poor lighting, low quality",
-    basePrompt: "lifestyle content thumbnail",
-  },
-};
-
-const universalNegativePrompt =
-  "low quality, blurry, amateur, watermark, text overlay, logos, copyright, distorted";
-
-// Model configurations for fal.ai
-const models = {
-  "flux-schnell": {
-    id: "flux/schnell",
-    name: "FLUX.1 Schnell",
-    steps: { fast: 1, balanced: 2, high: 4 },
-    guidance: { fast: 3.0, balanced: 5.0, high: 7.0 },
-  },
-  "flux-dev": {
-    id: "flux/dev",
-    name: "FLUX.1 Dev",
-    steps: { fast: 20, balanced: 30, high: 50 },
-    guidance: { fast: 5.0, balanced: 7.0, high: 8.0 },
-  },
-  "hidream-fast": {
-    id: "hidream-i1-fast",
-    name: "HiDream I1 Fast",
-    steps: { fast: 8, balanced: 16, high: 25 },
-    guidance: { fast: 3.0, balanced: 5.0, high: 7.0 },
-  },
-};
-
-export async function generateThumbnail(
-  options: ThumbnailGenerationOptions
-): Promise<ThumbnailResult> {
-  const {
-    prompt,
-    style = "tech",
-    model = "flux-schnell",
-    quality = "balanced",
-    refinementPrompt,
-  } = options;
-
-  // Validate API key
-  if (!process.env.FAL_KEY) {
-    throw new Error("FAL_KEY environment variable is not set");
-  }
-
-  // Get model configuration
-  const selectedModel = models[model as keyof typeof models];
-  if (!selectedModel) {
-    throw new Error(`Model ${model} not found`);
-  }
-
-  const styleConfig = stylePrompts[style];
-
-  // Build the prompt with optional refinement
-  let finalPrompt = `${styleConfig.basePrompt}, ${prompt}, ${styleConfig.positive}`;
-  if (refinementPrompt) {
-    finalPrompt += `, ${refinementPrompt}`;
-  }
-
-  // Build negative prompt
-  const negativePrompt = `${styleConfig.negative}, ${universalNegativePrompt}`;
-
-  // Generation parameters
-  const qualitySettings = selectedModel.steps[quality];
-  const guidanceSettings = selectedModel.guidance[quality];
-
-  const parameters: GenerationParameters = {
-    model: selectedModel.id,
-    width: 1024,
-    height: 576, // 16:9 aspect ratio
-    steps: qualitySettings,
-    guidance_scale: guidanceSettings,
-    negative_prompt: negativePrompt,
-  };
-
-  try {
-    console.log("🎨 Generating with fal.ai:", {
-      model: selectedModel.name,
-      prompt: finalPrompt.substring(0, 80) + "...",
-      quality,
-      style,
-      steps: parameters.steps,
-      guidance: parameters.guidance_scale,
-      dimensions: `${parameters.width}x${parameters.height}`,
-    });
-
-    // Prepare request body based on model
-    const requestBody: any = {
-      prompt: finalPrompt,
-      negative_prompt: negativePrompt,
-      image_size: {
-        width: parameters.width,
-        height: parameters.height,
-      },
-      num_images: 1,
-      enable_safety_checker: true,
-      output_format: "jpeg",
-    };
-
-    // Add model-specific parameters
-    if (model === "flux-schnell") {
-      requestBody.num_inference_steps = parameters.steps;
-    } else if (model === "flux-dev") {
-      requestBody.num_inference_steps = parameters.steps;
-      requestBody.guidance_scale = parameters.guidance_scale;
-    } else if (model === "hidream-fast") {
-      requestBody.num_inference_steps = parameters.steps;
-      requestBody.guidance_scale = parameters.guidance_scale;
-    }
-
-    const response = await fetch(`${FAL_API_URL}/${selectedModel.id}`, {
-      method: "POST",
-      headers: {
-        Authorization: `Key ${process.env.FAL_KEY}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(requestBody),
-    });
-
-    if (!response.ok) {
-      const errorText = await response.text();
-      console.error("fal.ai API error:", errorText);
-
-      if (response.status === 401) {
-        throw new Error("Invalid fal.ai API key");
-      }
-      if (response.status === 429) {
-        throw new Error("fal.ai rate limit exceeded. Please try again later.");
-      }
-      if (response.status === 400) {
-        throw new Error("Invalid request to fal.ai. Please check your prompt.");
-      }
-      if (response.status === 402) {
-        throw new Error(
-          "fal.ai payment required. Please add credits to your account."
-        );
-      }
-
-      throw new Error(
-        `fal.ai API error: ${response.status} ${response.statusText}`
-      );
-    }
-
-    const data = await response.json();
-
-    if (!data.images || data.images.length === 0) {
-      throw new Error("No image generated by fal.ai");
-    }
-
-    // Download the image from the URL
-    const imageUrl = data.images[0].url;
-    const imageResponse = await fetch(imageUrl);
-
-    if (!imageResponse.ok) {
-      throw new Error("Failed to download generated image");
-    }
-
-    const imageBlob = await imageResponse.blob();
-
-    console.log("✅ fal.ai generation successful");
-
-    return {
-      imageBlob,
-      prompt: finalPrompt,
-      style,
-      model: selectedModel.name,
-      provider: "fal",
-      parameters,
-    };
-  } catch (error) {
-    console.error("❌ fal.ai error:", error);
-
-    if (error instanceof Error) {
-      throw error;
-    }
-
-    throw new Error(`Failed to generate thumbnail with fal.ai: ${error}`);
-  }
-}
-
-export async function testConnection(): Promise<boolean> {
-  try {
-    if (!process.env.FAL_KEY) {
-      return false;
-    }
-
-    console.log("🔍 Testing fal.ai connection...");
-
-    // Test with a simple request to flux-schnell (fastest model)
-    const response = await fetch(`${FAL_API_URL}/flux/schnell`, {
-      method: "POST",
-      headers: {
-        Authorization: `Key ${process.env.FAL_KEY}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        prompt: "test image",
-        image_size: {
-          width: 512,
-          height: 512,
-        },
-        num_images: 1,
-        num_inference_steps: 1,
-      }),
-    });
-
-    if (response.ok) {
-      console.log("✅ fal.ai connection test successful");
-      return true;
-    } else if (response.status === 402) {
-      console.log("⚠️ fal.ai connection OK but requires payment");
-      return true; // Connection works, just needs credits
-    } else {
-      console.error("❌ fal.ai connection test failed:", response.status);
-      return false;
-    }
-  } catch (error) {
-    console.error("❌ fal.ai connection test failed:", error);
-    return false;
-  }
-}
-
-export async function testThumbnailGeneration(): Promise<void> {
-  console.log("🧪 Testing fal.ai thumbnail generation...");
-
-  try {
-    const result = await generateThumbnail({
-      prompt: "iPhone review",
-      style: "tech",
-      model: "flux-schnell",
-      quality: "fast",
-    });
-
-    console.log("✅ fal.ai test generation successful");
-    console.log("Prompt used:", result.prompt);
-    console.log("Image blob size:", result.imageBlob.size, "bytes");
-  } catch (error) {
-    console.error("❌ fal.ai test generation failed:", error);
-    throw error;
-  }
-}
diff --git a/lib/ai/huggingface.ts b/lib/ai/huggingface.ts
index c90be30..30fd8b3 100644
--- a/lib/ai/huggingface.ts
+++ b/lib/ai/huggingface.ts
@@ -134,8 +134,8 @@ export async function generateThumbnail(
   // Generation parameters optimized for free tier
   const parameters: GenerationParameters = {
     model: selectedModel.id,
-    width: 768, // Smaller size for free tier
-    height: 432, // 16:9 ratio
+    width: 768, // Standard size for free tier
+    height: 512, // Minimum required height
     steps: qualitySettings.steps,
     guidance_scale: qualitySettings.guidance_scale,
     negative_prompt: negativePrompt,
diff --git a/lib/ai/index.ts b/lib/ai/index.ts
index e440ebc..b4b489a 100644
--- a/lib/ai/index.ts
+++ b/lib/ai/index.ts
@@ -93,7 +93,7 @@ export async function getBestAvailableProvider(): Promise<string> {
   const providers = getAvailableProviders();
 
   // Test providers in order of preference
-  const preferenceOrder = ["stability", "fal", "huggingface"];
+  const preferenceOrder = ["stability", "huggingface"];
 
   for (const providerId of preferenceOrder) {
     const provider = providers.find((p) => p.id === providerId);
diff --git a/lib/ai/providers.ts b/lib/ai/providers.ts
index c400c4b..ed4033d 100644
--- a/lib/ai/providers.ts
+++ b/lib/ai/providers.ts
@@ -59,30 +59,12 @@ export const AI_PROVIDERS: Record<string, AIProvider> = {
     pricing: "FREE",
     supportsRefinement: true,
     models: [
-      {
-        id: "sd-3.5-large",
-        name: "Stable Diffusion 3.5 Large",
-        description: "8B parameters, superior quality",
-        icon: "🎯",
-        recommended: true,
-        speed: "medium",
-        quality: "excellent",
-      },
-      {
-        id: "sd-3.5-turbo",
-        name: "Stable Diffusion 3.5 Turbo",
-        description: "4-step generation, ultra-fast",
-        icon: "⚡",
-        recommended: false,
-        speed: "fast",
-        quality: "high",
-      },
       {
         id: "sdxl",
         name: "Stable Diffusion XL",
         description: "Proven quality, reliable",
         icon: "🖼️",
-        recommended: false,
+        recommended: true,
         speed: "medium",
         quality: "high",
       },
@@ -98,50 +80,7 @@ export const AI_PROVIDERS: Record<string, AIProvider> = {
       return stabilityTest();
     },
   },
-  fal: {
-    id: "fal",
-    name: "fal.ai",
-    description: "Pay-per-use, excellent value",
-    pricing: "~$0.003/image",
-    supportsRefinement: true,
-    models: [
-      {
-        id: "flux-schnell",
-        name: "FLUX.1 Schnell",
-        description: "Ultra-fast, 333 images per $1",
-        icon: "🚀",
-        recommended: true,
-        speed: "fast",
-        quality: "high",
-      },
-      {
-        id: "flux-dev",
-        name: "FLUX.1 Dev",
-        description: "Premium quality, 40 images per $1",
-        icon: "💎",
-        recommended: false,
-        speed: "medium",
-        quality: "excellent",
-      },
-      {
-        id: "hidream-fast",
-        name: "HiDream I1 Fast",
-        description: "New model, 16 steps",
-        icon: "✨",
-        recommended: false,
-        speed: "fast",
-        quality: "high",
-      },
-    ],
-    generateThumbnail: async (options: ThumbnailGenerationOptions) => {
-      const { generateThumbnail: falGenerate } = await import("./fal");
-      return falGenerate(options);
-    },
-    testConnection: async () => {
-      const { testConnection: falTest } = await import("./fal");
-      return falTest();
-    },
-  },
+
   huggingface: {
     id: "huggingface",
     name: "HuggingFace",
diff --git a/lib/ai/stability.ts b/lib/ai/stability.ts
index 4dbe4ee..3b7d53f 100644
--- a/lib/ai/stability.ts
+++ b/lib/ai/stability.ts
@@ -38,20 +38,8 @@ const stylePrompts = {
 const universalNegativePrompt =
   "low quality, blurry, amateur, watermark, text overlay, logos, copyright";
 
-// Model configurations for Stability AI
+// Model configurations for Stability AI v1 (working models only)
 const models = {
-  "sd-3.5-large": {
-    id: "stable-diffusion-3-5-large",
-    name: "Stable Diffusion 3.5 Large",
-    steps: { fast: 20, balanced: 30, high: 50 },
-    guidance: { fast: 5.0, balanced: 7.0, high: 8.0 },
-  },
-  "sd-3.5-turbo": {
-    id: "stable-diffusion-3-5-turbo",
-    name: "Stable Diffusion 3.5 Turbo",
-    steps: { fast: 4, balanced: 6, high: 8 },
-    guidance: { fast: 3.0, balanced: 5.0, high: 7.0 },
-  },
   sdxl: {
     id: "stable-diffusion-xl-1024-v1-0",
     name: "Stable Diffusion XL",
@@ -66,7 +54,7 @@ export async function generateThumbnail(
   const {
     prompt,
     style = "tech",
-    model = "sd-3.5-large",
+    model = "sdxl",
     quality = "balanced",
     refinementPrompt,
   } = options;
@@ -99,8 +87,8 @@ export async function generateThumbnail(
 
   const parameters: GenerationParameters = {
     model: selectedModel.id,
-    width: 1024,
-    height: 576, // 16:9 aspect ratio
+    width: 1344,
+    height: 768, // Closest to 16:9 ratio allowed by SDXL
     steps: qualitySettings,
     guidance_scale: guidanceSettings,
     negative_prompt: negativePrompt,