diff --git a/.dockerignore b/.dockerignore
index b0a11682..352fa2dd 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -10,4 +10,4 @@ coverage
 bun.lock
 docs/
 md/
-playwright.config.ts
+playwright.config.ts
\ No newline at end of file
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b55d9e31..90a058ee 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -31,8 +31,10 @@ jobs:
         echo "BILLING_CURRENCY=USD" >> $GITHUB_ENV
         echo "BYOB_ENCRYPTION_SECRET=test_secret_32_characters_long_123" >> $GITHUB_ENV
         echo "NEXT_PUBLIC_APPWRITE_BYOB_TENANTS_ID=byob_tenants" >> $GITHUB_ENV
-        echo "NEXT_PUBLIC_TRIAL_CREDIT_USD=30" >> $GITHUB_ENV
-        echo "TRIAL_CREDIT_DAYS=60" >> $GITHUB_ENV
+        echo "NEXT_PUBLIC_ORG_TRIAL_CREDIT_USD=30" >> $GITHUB_ENV
+        echo "ORG_TRIAL_CREDIT_DAYS=60" >> $GITHUB_ENV
+        echo "NEXT_PUBLIC_PERSONAL_TRIAL_CREDIT_USD=10" >> $GITHUB_ENV
+        echo "PERSONAL_TRIAL_CREDIT_DAYS=30" >> $GITHUB_ENV
 
     - name: Type check
       run: npx tsc --noEmit
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 7bcb6ed5..a4a1d91b 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -155,9 +155,13 @@ jobs:
           # Redis (server-side caching layer)
           REDIS_URL: ${{ secrets.REDIS_URL }}
           REDIS_PASSWORD: ${{ secrets.REDIS_PASSWORD }}
-          # Trial Credits
-          NEXT_PUBLIC_TRIAL_CREDIT_USD: ${{ vars.NEXT_PUBLIC_TRIAL_CREDIT_USD }}
-          TRIAL_CREDIT_DAYS: ${{ vars.TRIAL_CREDIT_DAYS }}
+          # Trial Credits (Granular Config)
+          NEXT_PUBLIC_ORG_TRIAL_CREDIT_USD: ${{ vars.NEXT_PUBLIC_ORG_TRIAL_CREDIT_USD }}
+          ORG_TRIAL_CREDIT_USD: ${{ vars.ORG_TRIAL_CREDIT_USD }}
+          ORG_TRIAL_CREDIT_DAYS: ${{ vars.ORG_TRIAL_CREDIT_DAYS }}
+          NEXT_PUBLIC_PERSONAL_TRIAL_CREDIT_USD: ${{ vars.NEXT_PUBLIC_PERSONAL_TRIAL_CREDIT_USD }}
+          PERSONAL_TRIAL_CREDIT_USD: ${{ vars.PERSONAL_TRIAL_CREDIT_USD }}
+          PERSONAL_TRIAL_CREDIT_DAYS: ${{ vars.PERSONAL_TRIAL_CREDIT_DAYS }}
         run: npm run build
 
       - name: Clean up before transfer
@@ -298,8 +302,12 @@ jobs:
             R2_PUBLIC_URL=${{ vars.R2_PUBLIC_URL }}
             REDIS_URL=${{ secrets.REDIS_URL }}
             REDIS_PASSWORD=${{ secrets.REDIS_PASSWORD }}
-            NEXT_PUBLIC_TRIAL_CREDIT_USD=${{ vars.NEXT_PUBLIC_TRIAL_CREDIT_USD }}
-            TRIAL_CREDIT_DAYS=${{ vars.TRIAL_CREDIT_DAYS }}
+            NEXT_PUBLIC_ORG_TRIAL_CREDIT_USD=${{ vars.NEXT_PUBLIC_ORG_TRIAL_CREDIT_USD }}
+            ORG_TRIAL_CREDIT_USD=${{ vars.ORG_TRIAL_CREDIT_USD }}
+            ORG_TRIAL_CREDIT_DAYS=${{ vars.ORG_TRIAL_CREDIT_DAYS }}
+            NEXT_PUBLIC_PERSONAL_TRIAL_CREDIT_USD=${{ vars.NEXT_PUBLIC_PERSONAL_TRIAL_CREDIT_USD }}
+            PERSONAL_TRIAL_CREDIT_USD=${{ vars.PERSONAL_TRIAL_CREDIT_USD }}
+            PERSONAL_TRIAL_CREDIT_DAYS=${{ vars.PERSONAL_TRIAL_CREDIT_DAYS }}
             EOF
             chmod 600 .env.local
 
diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index 4466cfa7..477c497c 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -59,7 +59,8 @@ const DashboardContent = ({ children }: DashboardLayoutProps) => {
   const isProfilePage = pathname === "/profile" || pathname.startsWith("/profile/");
   const workspaceId = useWorkspaceId();
   const isTaskDetailPage = /^\/workspaces\/[^\/]+\/tasks\/[^\/]+$/.test(pathname || "");
-  const isMainDashboard = /^\/workspaces\/[^\/]+$/.test(pathname || "");
+const isWorkflowPage = /^\/workspaces\/[^\/]+\/spaces\/[^\/]+\/workflows\/[^\/]+$/.test(pathname || "");
+    const isMainDashboard = /^\/workspaces\/[^\/]+$/.test(pathname || "");
 
   return (
     <div className={`min-h-screen ${isMainDashboard ? 'bg-background' : ''}`}>
@@ -93,14 +94,12 @@ const DashboardContent = ({ children }: DashboardLayoutProps) => {
         <div className="lg:pl-[264px] w-full flex flex-col min-h-screen">
           <Navbar />
           <div className="flex-1 overflow-y-auto bg-background">
-            <div className="mx-auto max-w-screen-2xl">
-              <main className={cn(
-                "flex flex-col",
-                isTaskDetailPage ? "py-0 px-0" : "py-8 px-6"
-              )}>
-                {children}
-              </main>
-            </div>
+            <main className={cn(
+              "flex flex-col",
+              isTaskDetailPage || isWorkflowPage ? "py-0 px-0" : "py-8 px-6"
+            )}>
+              {children}
+            </main>
           </div>
         </div>
       </div>
diff --git a/src/app/(dashboard)/workspaces/[workspaceId]/admin/usage/client.tsx b/src/app/(dashboard)/workspaces/[workspaceId]/admin/usage/client.tsx
index 451eee5b..dacd7bdf 100644
--- a/src/app/(dashboard)/workspaces/[workspaceId]/admin/usage/client.tsx
+++ b/src/app/(dashboard)/workspaces/[workspaceId]/admin/usage/client.tsx
@@ -33,6 +33,7 @@ import {
     useGetUsageDashboard,
     useExportUsage,
 } from "@/features/usage/api";
+import { useGetBillingAccount } from "@/features/billing/api";
 import {
     UsageKPICards,
     UsageCharts,
@@ -131,6 +132,13 @@ export function UsageDashboardClient() {
         eventsOffset: fetchOffset,
     });
 
+    // Fetch billing account for wallet balance
+    const { data: billingAccountData } = useGetBillingAccount({
+        organizationId: isOrg ? primaryOrganizationId : undefined,
+        userId: !isOrg ? user?.$id : undefined,
+        enabled: !!(isOrg ? primaryOrganizationId : user?.$id)
+    });
+
     const isEventsLoading = isDashboardLoading;
     const isSummaryLoading = isDashboardLoading;
     const isAlertsLoading = isDashboardLoading;
@@ -367,6 +375,8 @@ export function UsageDashboardClient() {
                             isLoading={isSummaryLoading}
                             currency={currency}
                             exchangeRate={rate}
+                            walletBalance={billingAccountData?.walletBalance}
+                            walletCurrency={billingAccountData?.walletCurrency}
                         />
 
                         {/* Charts */}
diff --git a/src/app/(dashboard)/workspaces/[workspaceId]/billing/client.tsx b/src/app/(dashboard)/workspaces/[workspaceId]/billing/client.tsx
index d8c425c3..382389fc 100644
--- a/src/app/(dashboard)/workspaces/[workspaceId]/billing/client.tsx
+++ b/src/app/(dashboard)/workspaces/[workspaceId]/billing/client.tsx
@@ -1,28 +1,196 @@
 "use client";
 
+import { useState, useCallback } from "react";
 import { useParams } from "next/navigation";
-import { Building2, CreditCard, TrendingUp, Calendar } from "lucide-react";
+import { 
+    Building2, 
+    CreditCard, 
+    TrendingUp, 
+    Calendar, 
+    Wallet, 
+    ArrowUpRight, 
+    Plus, 
+    Loader2,
+    ExternalLink,
+    FileText,
+    Clock
+} from "lucide-react";
+import { format, startOfMonth, endOfMonth, differenceInDays } from "date-fns";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { Input } from "@/components/ui/input";
 import { useAccountType } from "@/features/organizations/hooks/use-account-type";
 import { useGetOrganizations } from "@/features/organizations/api/use-get-organizations";
-import { useGetUsageSummary } from "@/features/usage/api/use-get-usage-summary";
-import { useGetUsageEvents } from "@/features/usage/api/use-get-usage-events";
+import { 
+    useGetUsageSummary, 
+    useGetUsageEvents 
+} from "@/features/usage/api";
 import { WorkspaceUsageBreakdown } from "@/features/usage/components";
 import { RedeemCouponCard } from "@/features/github-rewards/components/RedeemCouponCard";
+import { 
+    useGetBillingAccount, 
+    useSetupBilling, 
+    useGetBillingStatus,
+    useGetInvoices
+} from "@/features/billing/api";
+import { useCurrent } from "@/features/auth/api/use-current";
+import { BillingAccountType, BillingStatus, BillingInvoice } from "@/features/billing/types";
+import { client } from "@/lib/rpc";
+import { toast } from "sonner";
+import { useQueryClient } from "@tanstack/react-query";
+import Script from "next/script";
+import { cn } from "@/lib/utils";
 
 export const BillingDashboardClient = () => {
     const params = useParams();
+    const queryClient = useQueryClient();
     const workspaceId = params.workspaceId as string;
-    const { isOrg, primaryOrganizationId, accountType } = useAccountType();
+    const { isOrg, isPersonal, primaryOrganizationId, accountType } = useAccountType();
+    const { data: user } = useCurrent();
     const { data: organizations } = useGetOrganizations();
     const { data: usageSummary, isLoading: usageLoading } = useGetUsageSummary({
         workspaceId,
         period: new Date().toISOString().slice(0, 7), // Current month YYYY-MM
     });
 
+    // Billing hooks
+    const { data: billingAccountData } = useGetBillingAccount({
+        organizationId: isOrg ? primaryOrganizationId : undefined,
+        userId: isPersonal ? user?.$id : undefined,
+        enabled: !!(isOrg ? primaryOrganizationId : user?.$id)
+    });
+    const { mutateAsync: setupBilling } = useSetupBilling();
+
+    const [isAddingCredits, setIsAddingCredits] = useState(false);
+    const [isScriptLoaded, setIsScriptLoaded] = useState(false);
+    const [topupAmount, setTopupAmount] = useState("");
+
+    // Wallet balance
+    const walletBalance = billingAccountData?.walletBalance ?? 0;
+    const walletCurrency = billingAccountData?.walletCurrency ?? "USD";
+    const trialExpiresAt = billingAccountData?.trialExpiresAt;
+    const initialTrialAmount = billingAccountData?.initialTrialAmount ?? 0;
+    
+    // Credit breakdown logic
+    // Trial credits are consumed first. 
+    // Remaining Trial = min(current balance, initial trial amount)
+    // Real Credits = current balance - remaining trial
+    const trialBalance = Math.min(walletBalance, initialTrialAmount);
+    const realBalance = Math.max(0, walletBalance - trialBalance);
+
+    const formatCurrency = (amount: number) => {
+        return new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: walletCurrency,
+            minimumFractionDigits: 2,
+        }).format(amount);
+    };
+
+    // Handler for adding credits
+    const handleAddCredits = useCallback(async () => {
+        const entityId = isOrg ? primaryOrganizationId : user?.$id;
+        if (!entityId) {
+            toast.error("Account ID is required");
+            return;
+        }
+
+        const amount = Number(topupAmount);
+        if (!amount || amount < 1) {
+            toast.error("Minimum top-up amount is $1");
+            return;
+        }
+
+        if (!isScriptLoaded) {
+            toast.error("Payment system not ready. Please refresh the page.");
+            return;
+        }
+
+        setIsAddingCredits(true);
+
+        try {
+            // Ensure billing account exists
+            if (!billingAccountData?.data) {
+                try {
+                    await setupBilling({
+                        json: {
+                            type: isOrg ? BillingAccountType.ORG : BillingAccountType.PERSONAL,
+                            organizationId: isOrg ? primaryOrganizationId : undefined,
+                            userId: isPersonal ? user?.$id : undefined,
+                            billingEmail: user?.email || undefined,
+                            contactName: user?.name || "User",
+                        }
+                    });
+                } catch {
+                    toast.error("Failed to initialize billing. Please contact support.");
+                    setIsAddingCredits(false);
+                    return;
+                }
+            }
+
+            // Create order
+            const orderResponse = await client.api.wallet["create-order"].$post({
+                json: {
+                    amount,
+                    organizationId: isOrg ? primaryOrganizationId : undefined,
+                    userId: isPersonal ? user?.$id : undefined,
+                },
+            });
+
+            if (!orderResponse.ok) {
+                const errorData = await orderResponse.json().catch(() => ({}));
+                throw new Error((errorData as { error?: string }).error || "Failed to create order");
+            }
+
+            const orderResult = await orderResponse.json() as { 
+                data: { 
+                    orderId: string; 
+                    paymentSessionId: string; 
+                    environment: string; 
+                } 
+            };
+            const orderData = orderResult.data;
+
+            const cashfree = (window as Window & { 
+                Cashfree: (args: { mode: string }) => { 
+                    checkout: (args: { paymentSessionId: string; redirectTarget: string }) => Promise<{ error?: { message?: string } }> 
+                } 
+            }).Cashfree({ 
+                mode: orderData.environment || "sandbox" 
+            });
+
+            const checkoutResult = await cashfree.checkout({
+                paymentSessionId: orderData.paymentSessionId,
+                redirectTarget: "_modal",
+            });
+
+            if (checkoutResult.error) {
+                if (!checkoutResult.error.message?.includes("user")) {
+                    toast.error(`Payment error: ${checkoutResult.error.message}`);
+                }
+            } else {
+                // Verify
+                const verifyResponse = await client.api.wallet["verify-topup"].$post({
+                    json: { cashfreeOrderId: orderData.orderId },
+                });
+
+                if (!verifyResponse.ok) {
+                    toast.info("Payment is being processed. Wallet will be credited shortly.");
+                } else {
+                    toast.success(`$${amount} added successfully!`);
+                    queryClient.invalidateQueries({ queryKey: ["billing-account"] });
+                    setTopupAmount("");
+                }
+            }
+            setIsAddingCredits(false);
+        } catch (error: unknown) {
+            const message = error instanceof Error ? error.message : "Failed to initialize payment";
+            toast.error(message);
+            setIsAddingCredits(false);
+        }
+    }, [isOrg, isPersonal, primaryOrganizationId, user, topupAmount, isScriptLoaded, billingAccountData, setupBilling, queryClient]);
+
     // Fetch events for workspace breakdown
     const { data: eventsData, isLoading: eventsLoading } = useGetUsageEvents({
         workspaceId: isOrg ? undefined : workspaceId,
@@ -35,8 +203,23 @@ export const BillingDashboardClient = () => {
         ? organizations?.documents?.find((o: { $id: string }) => o.$id === primaryOrganizationId)
         : null;
 
+    // Fetch invoices
+    const { data: invoicesDoc, isLoading: isInvoicesLoading } = useGetInvoices({
+        organizationId: isOrg ? primaryOrganizationId : undefined,
+        userId: isPersonal ? user?.$id : undefined,
+        limit: 10
+    });
+    const invoices = invoicesDoc?.documents || [];
+
+    // Billing status
+    const { data: billingStatus } = useGetBillingStatus({
+        organizationId: isOrg ? primaryOrganizationId : undefined,
+        userId: isPersonal ? user?.$id : undefined,
+        enabled: !!(isOrg ? primaryOrganizationId : user?.$id)
+    });
+
     return (
-        <div className="flex flex-col gap-6 p-6">
+        <div className="flex flex-col gap-8 p-8 min-h-screen bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-background via-background to-muted/20">
             {/* Header */}
             <div className="flex items-center justify-between">
                 <div>
@@ -98,9 +281,138 @@ export const BillingDashboardClient = () => {
                 </CardContent>
             </Card>
 
+            {/* Wallet & Credits - PREMIUM ENHANCED SECTION */}
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                {/* Wallet Balance Display */}
+                <Card className="lg:col-span-2 relative overflow-hidden group border-none shadow-2xl">
+                    <div className="absolute inset-0 bg-gradient-to-br from-indigo-600 via-blue-700 to-purple-800 opacity-90 transition-opacity group-hover:opacity-100" />
+                    
+                    {/* Animated shapes */}
+                    <div className="absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 bg-white/10 rounded-full blur-3xl animate-pulse" />
+                    <div className="absolute bottom-0 left-0 -ml-10 -mb-10 w-40 h-40 bg-blue-400/20 rounded-full blur-2xl" />
+
+                    <CardHeader className="relative z-10 text-white pb-2">
+                        <div className="flex items-center justify-between">
+                            <CardTitle className="flex items-center gap-2 text-blue-50">
+                                <Wallet className="h-5 w-5" />
+                                Fairlx Wallet
+                            </CardTitle>
+                            <Badge variant="outline" className="text-white/80 border-white/20 bg-white/10 backdrop-blur-md">
+                                {isOrg ? "Organization Funds" : "Personal Credits"}
+                            </Badge>
+                        </div>
+                        <CardDescription className="text-blue-100/70">
+                            Available balance for AI compute and automated tasks
+                        </CardDescription>
+                    </CardHeader>
+                    
+                    <CardContent className="relative z-10 pt-4 pb-8">
+                        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
+                            <div>
+                                <span className="text-blue-200 text-xs uppercase tracking-widest font-bold">Total Available</span>
+                                <div className="flex items-baseline gap-2 mt-1">
+                                    <span className="text-6xl font-extrabold text-white tracking-tighter">
+                                        {new Intl.NumberFormat("en-US", {
+                                            style: "currency",
+                                            currency: walletCurrency,
+                                            minimumFractionDigits: 2,
+                                        }).format(walletBalance)}
+                                    </span>
+                                    <span className="text-blue-200 font-medium text-lg uppercase">{walletCurrency}</span>
+                                </div>
+                                
+                                {initialTrialAmount > 0 && (
+                                    <div className="mt-3 flex items-center gap-2 text-blue-200/80 text-sm font-medium bg-black/10 w-fit px-3 py-1 rounded-lg border border-white/5">
+                                        <span>{formatCurrency(realBalance)} real</span>
+                                        <Plus className="h-3 w-3 opacity-50" />
+                                        <span>{formatCurrency(trialBalance)} trial</span>
+                                        <span className="mx-1 opacity-30 text-xs">=</span>
+                                        <span className="text-blue-100 font-bold">{formatCurrency(walletBalance)} total</span>
+                                    </div>
+                                )}
+
+                                {trialExpiresAt && (
+                                    <div className="mt-4 flex items-center gap-2 text-blue-50/90 text-sm bg-white/10 backdrop-blur-md px-3 py-1.5 rounded-full w-fit border border-white/10">
+                                        <Clock className="h-3.5 w-3.5" />
+                                        <span>Trial credit expires in <span className="font-bold">{differenceInDays(new Date(trialExpiresAt), new Date())} days</span></span>
+                                    </div>
+                                )}
+                            </div>
+
+                            <div className="flex flex-col gap-3">
+                                <div className="flex items-center gap-2 px-4 py-2 rounded-2xl bg-white/10 backdrop-blur-xl border border-white/20">
+                                    <div className="h-2 w-2 rounded-full bg-emerald-400 animate-pulse" />
+                                    <span className="text-sm font-medium text-blue-50">Real-time usage active</span>
+                                </div>
+                                <div className="text-[11px] text-blue-200/60 italic text-right px-1">
+                                    * Balance updates instantly after compute operations
+                                </div>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* Quick Top-up Card */}
+                <Card className="border-border/50 shadow-lg hover:shadow-xl transition-all">
+                    <CardHeader className="pb-4">
+                        <CardTitle className="text-base font-semibold flex items-center gap-2">
+                            <Plus className="h-4 w-4 text-primary" />
+                            Add Credits
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        <div className="space-y-2">
+                            <div className="relative">
+                                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground text-sm font-medium">$</span>
+                                <Input
+                                    type="number"
+                                    placeholder="50.00"
+                                    className="pl-7 h-11 text-lg font-semibold"
+                                    value={topupAmount}
+                                    onChange={(e) => setTopupAmount(e.target.value)}
+                                    disabled={isAddingCredits}
+                                />
+                            </div>
+                            <div className="grid grid-cols-4 gap-2">
+                                {[5, 10, 25, 50].map((amt) => (
+                                    <Button
+                                        key={amt}
+                                        variant="outline"
+                                        size="sm"
+                                        className={cn(
+                                            "h-8 text-xs font-bold",
+                                            topupAmount === String(amt) && "bg-primary/10 border-primary text-primary"
+                                        )}
+                                        onClick={() => setTopupAmount(String(amt))}
+                                    >
+                                        ${amt}
+                                    </Button>
+                                ))}
+                            </div>
+                        </div>
+
+                        <Button 
+                            className="w-full h-11 font-bold text-base"
+                            onClick={handleAddCredits}
+                            disabled={isAddingCredits || !topupAmount || Number(topupAmount) < 1}
+                        >
+                            {isAddingCredits ? (
+                                <Loader2 className="h-5 w-5 animate-spin mr-2" />
+                            ) : (
+                                <ArrowUpRight className="h-5 w-5 mr-2" />
+                            )}
+                            {isAddingCredits ? "Processing..." : `Top up $${topupAmount || '0'}`}
+                        </Button>
+                        <p className="text-[10px] text-muted-foreground text-center">
+                            Secure payment via UPI, Cards & Net Banking
+                        </p>
+                    </CardContent>
+                </Card>
+            </div>
+
             {/* Usage Summary */}
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <Card>
+                <Card className="hover:border-primary/50 transition-colors">
                     <CardHeader className="pb-2">
                         <CardTitle className="text-sm font-medium text-muted-foreground">
                             Traffic Usage
@@ -111,13 +423,13 @@ export const BillingDashboardClient = () => {
                             {usageLoading ? "..." : `${usageSummary?.data?.trafficTotalGB?.toFixed(2) || 0} GB`}
                         </div>
                         <div className="flex items-center gap-1 text-xs text-muted-foreground mt-1">
-                            <TrendingUp className="h-3 w-3" />
+                            <TrendingUp className="h-3 w-3 text-emerald-500" />
                             This month
                         </div>
                     </CardContent>
                 </Card>
 
-                <Card>
+                <Card className="hover:border-primary/50 transition-colors">
                     <CardHeader className="pb-2">
                         <CardTitle className="text-sm font-medium text-muted-foreground">
                             Storage Usage
@@ -133,7 +445,7 @@ export const BillingDashboardClient = () => {
                     </CardContent>
                 </Card>
 
-                <Card>
+                <Card className="hover:border-primary/50 transition-colors">
                     <CardHeader className="pb-2">
                         <CardTitle className="text-sm font-medium text-muted-foreground">
                             Compute Units
@@ -155,6 +467,128 @@ export const BillingDashboardClient = () => {
                 workspaceId={workspaceId}
                 organizationId={isOrg ? primaryOrganizationId : undefined}
             />
+
+            {/* Billing Lifecycle & Invoices */}
+            <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+                {/* Billing Lifecycle */}
+                <Card className="border-border/50 bg-muted/20">
+                    <CardHeader>
+                        <CardTitle className="text-base flex items-center gap-2">
+                            <Calendar className="h-4 w-4 text-primary" />
+                            Billing Lifecycle
+                        </CardTitle>
+                        <CardDescription>Your current billing period and status</CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-6">
+                        <div className="relative pl-6 space-y-6">
+                            <div className="absolute left-[7px] top-2 bottom-2 w-[2px] bg-primary/20" />
+                            
+                            <div className="relative">
+                                <div className="absolute -left-[23px] top-1.5 w-3.5 h-3.5 rounded-full border-2 border-white dark:border-background bg-primary z-10 shadow-[0_0_8px_rgba(37,99,235,0.4)]" />
+                                <div className="space-y-1">
+                                    <div className="flex items-center justify-between">
+                                        <span className="font-semibold text-sm">Current Period</span>
+                                        <Badge variant="secondary" className="text-[10px] bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-none">ACTIVE</Badge>
+                                    </div>
+                                    <p className="text-xs text-muted-foreground">
+                                        Started on {startOfMonth(new Date()).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="relative">
+                                <div className="absolute -left-[23px] top-1.5 w-3.5 h-3.5 rounded-full border-2 border-white dark:border-background bg-muted-foreground/30 z-10" />
+                                <div className="space-y-1">
+                                    <div className="flex items-center justify-between">
+                                        <span className="font-medium text-sm">Next Invoice</span>
+                                        <span className="text-[10px] font-bold text-muted-foreground">UPCOMING</span>
+                                    </div>
+                                    <p className="text-xs text-muted-foreground">
+                                        Expected on {endOfMonth(new Date()).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="pt-4 border-t border-border/50 flex items-center justify-between">
+                            <div className="space-y-1">
+                                <p className="text-[10px] uppercase tracking-wider font-bold text-muted-foreground">Account Status</p>
+                                <div className="flex items-center gap-2">
+                                    <div className={cn(
+                                        "h-2 w-2 rounded-full",
+                                        billingStatus?.status === BillingStatus.ACTIVE ? "bg-emerald-500" : "bg-orange-500"
+                                    )} />
+                                    <span className="text-sm font-medium">{billingStatus?.status || "ACTIVE"}</span>
+                                </div>
+                            </div>
+                            <Button variant="ghost" size="sm" className="text-xs h-8 text-primary">
+                                Learn about billing
+                                <ArrowUpRight className="ml-1 h-3 w-3" />
+                            </Button>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* Invoice History */}
+                <Card className="border-border/50">
+                    <CardHeader className="flex flex-row items-center justify-between">
+                        <div>
+                            <CardTitle className="text-base flex items-center gap-2">
+                                <FileText className="h-4 w-4 text-primary" />
+                                Invoice History
+                            </CardTitle>
+                            <CardDescription>Recent billing statements</CardDescription>
+                        </div>
+                        <Button variant="outline" size="sm" className="h-8 text-xs">
+                            View All
+                        </Button>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="space-y-3">
+                            {isInvoicesLoading ? (
+                                <div className="py-8 flex flex-col items-center justify-center gap-2">
+                                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                                    <span className="text-xs text-muted-foreground">Fetching invoices...</span>
+                                </div>
+                            ) : invoices.length === 0 ? (
+                                <div className="py-8 text-center border border-dashed rounded-xl">
+                                    <FileText className="h-8 w-8 text-muted-foreground/20 mx-auto mb-2" />
+                                    <p className="text-xs text-muted-foreground">No invoices generated yet</p>
+                                </div>
+                            ) : (
+                                invoices.map((invoice: BillingInvoice) => (
+                                    <div key={invoice.$id} className="flex items-center justify-between p-3 rounded-xl border border-border/50 hover:bg-muted/30 transition-colors">
+                                        <div className="flex items-center gap-3">
+                                            <div className="h-8 w-8 rounded-lg bg-primary/5 flex items-center justify-center">
+                                                <FileText className="h-4 w-4 text-primary" />
+                                            </div>
+                                            <div>
+                                                <p className="text-sm font-semibold">{invoice.invoiceId}</p>
+                                                <p className="text-[10px] text-muted-foreground">{format(new Date(invoice.$createdAt), "MMM dd, yyyy")}</p>
+                                            </div>
+                                        </div>
+                                        <div className="flex items-center gap-4">
+                                            <div className="text-right">
+                                                <p className="text-sm font-bold">
+                                                    {new Intl.NumberFormat("en-US", {
+                                                        style: "currency",
+                                                        currency: "USD",
+                                                    }).format(invoice.totalCost)}
+                                                </p>
+                                                <Badge variant="outline" className="h-4 text-[9px] uppercase tracking-tighter border-emerald-500/20 text-emerald-600 bg-emerald-500/5">Paid</Badge>
+                                            </div>
+                                            <Button variant="ghost" size="icon" className="h-8 w-8">
+                                                <ExternalLink className="h-4 w-4" />
+                                            </Button>
+                                        </div>
+                                    </div>
+                                ))
+                            )}
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+
             {/* Organization Workspaces Breakdown (ORG only) */}
             {isOrg && primaryOrganizationId && (
                 <WorkspaceUsageBreakdown
@@ -167,23 +601,31 @@ export const BillingDashboardClient = () => {
 
             {/* Upgrade CTA for Personal accounts */}
             {!isOrg && (
-                <Card className="bg-gradient-to-r from-primary/10 to-primary/5 border-primary/20">
-                    <CardContent className="py-6">
-                        <div className="flex items-center justify-between">
-                            <div>
-                                <h3 className="font-semibold">Upgrade to Organization</h3>
-                                <p className="text-sm text-muted-foreground mt-1">
-                                    Create unlimited workspaces, invite team members, and get organization-level billing.
+                <Card className="bg-gradient-to-r from-indigo-600 to-blue-700 border-none shadow-xl overflow-hidden relative group">
+                    <div className="absolute inset-0 bg-[url('/grid.svg')] opacity-20" />
+                    <div className="absolute top-0 right-0 -mr-10 -mt-10 w-40 h-40 bg-white/10 rounded-full blur-3xl group-hover:scale-150 transition-transform duration-700" />
+                    
+                    <CardContent className="py-8 relative z-10 text-white">
+                        <div className="flex flex-col md:flex-row items-center justify-between gap-6">
+                            <div className="text-center md:text-left">
+                                <h3 className="text-xl font-bold">Scale to Organization</h3>
+                                <p className="text-blue-100/70 text-sm mt-1 max-w-md">
+                                    Collaborate with team members, manage multiple workspaces, and get unified billing for your entire team.
                                 </p>
                             </div>
-                            <Button>
-                                <Building2 className="mr-2 h-4 w-4" />
+                            <Button size="lg" className="bg-white text-indigo-700 hover:bg-blue-50 font-bold px-8 rounded-xl transition-all hover:scale-105 active:scale-95 shadow-lg">
+                                <Building2 className="mr-2 h-5 w-5" />
                                 Upgrade Now
                             </Button>
                         </div>
                     </CardContent>
                 </Card>
             )}
+            {/* Scripts */}
+            <Script
+                src="https://sdk.cashfree.com/js/v3/cashfree.js"
+                onLoad={() => setIsScriptLoaded(true)}
+            />
         </div>
     );
 };
diff --git a/src/app/(dashboard)/workspaces/[workspaceId]/projects/[projectId]/client.tsx b/src/app/(dashboard)/workspaces/[workspaceId]/projects/[projectId]/client.tsx
index 0cb58ccd..2053a9cf 100644
--- a/src/app/(dashboard)/workspaces/[workspaceId]/projects/[projectId]/client.tsx
+++ b/src/app/(dashboard)/workspaces/[workspaceId]/projects/[projectId]/client.tsx
@@ -79,7 +79,7 @@ export const ProjectIdClient = () => {
             <p className="text-2xl tracking-tight font-semibold">{project.name}</p>
             {getDeadlineBadge()}
           </div>
-          <p className="text-sm tracking-normal font-medium text-muted-foreground">
+          <p className="text-sm tracking-normal font-regular line-clamp-2 max-w-md text-muted-foreground">
             {project.description || "Track your project and goals with full AI Assistance"}
           </p>
         </div>
diff --git a/src/app/(dashboard)/workspaces/[workspaceId]/projects/[projectId]/workflow/client.tsx b/src/app/(dashboard)/workspaces/[workspaceId]/projects/[projectId]/workflow/client.tsx
index 011c4082..2cf9f896 100644
--- a/src/app/(dashboard)/workspaces/[workspaceId]/projects/[projectId]/workflow/client.tsx
+++ b/src/app/(dashboard)/workspaces/[workspaceId]/projects/[projectId]/workflow/client.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 import { useParams, useRouter } from "next/navigation";
-import { ArrowLeft, Plus, GitBranch, Settings, Workflow, Info } from "lucide-react";
-import Link from "next/link";
+import { Plus, GitBranch, Settings, Workflow, Info, CheckCircle2, Layers, ArrowRight } from "lucide-react";
 import { useMemo, useState } from "react";
 
 import { PageError } from "@/components/page-error";
@@ -10,7 +9,6 @@ import { PageLoader } from "@/components/page-loader";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Separator } from "@/components/ui/separator";
 import {
   Dialog,
   DialogContent,
@@ -25,11 +23,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/components/ui/alert";
 
 import { useGetProject } from "@/features/projects/api/use-get-project";
 import { useUpdateProject } from "@/features/projects/api/use-update-project";
@@ -39,8 +32,6 @@ import { useGetWorkflow } from "@/features/workflows/api/use-get-workflow";
 import { useCurrentMember } from "@/features/members/hooks/use-current-member";
 import { useCreateWorkflowModal } from "@/features/workflows/hooks/use-create-workflow-modal";
 import { CreateWorkflowModal } from "@/features/workflows/components/create-workflow-modal";
-import { ProjectAvatar } from "@/features/projects/components/project-avatar";
-import { StatusType, STATUS_TYPE_CONFIG } from "@/features/workflows/types";
 
 export const ProjectWorkflowClient = () => {
   const router = useRouter();
@@ -118,46 +109,13 @@ export const ProjectWorkflowClient = () => {
   };
 
   return (
-    <div className="flex flex-col gap-y-6 max-w-4xl mx-auto">
+    <div className="flex flex-col gap-y-5 w-full mx-auto">
       <CreateWorkflowModal workspaceId={workspaceId} projectId={projectId} />
 
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <Link href={`/workspaces/${workspaceId}/projects/${projectId}`}>
-            <Button variant="ghost" size="icon" className="size-9">
-              <ArrowLeft className="size-5" />
-            </Button>
-          </Link>
-          <div className="flex items-center gap-3">
-            <ProjectAvatar
-              name={project.name}
-              image={project.imageUrl}
-              className="size-12"
-            />
-            <div>
-              <h1 className="text-2xl font-bold tracking-tight flex items-center gap-2">
-                Project Workflow
-                {project.key && (
-                  <Badge variant="secondary" className="font-mono text-xs">
-                    {project.key}
-                  </Badge>
-                )}
-              </h1>
-              <p className="text-muted-foreground text-sm">
-                Configure workflow for {project.name}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <Separator />
-
       {/* Current Workflow */}
-      <Card>
+      <Card className="border-none shadow-none">
         <CardHeader>
-          <div className="flex items-center justify-between">
+          <div className="flex items-center w-full justify-between">
             <div className="flex items-center gap-2">
               <GitBranch className="size-5 text-primary" />
               <CardTitle>Current Workflow</CardTitle>
@@ -168,7 +126,7 @@ export const ProjectWorkflowClient = () => {
                   <>
                     <Button 
                       variant="outline" 
-                      size="sm" 
+                      size="xs" 
                       onClick={() => handleEditWorkflow(project.workflowId!)}
                       className="gap-2"
                     >
@@ -177,7 +135,7 @@ export const ProjectWorkflowClient = () => {
                     </Button>
                     <Button 
                       variant="outline" 
-                      size="sm" 
+                      size="xs" 
                       onClick={() => setIsSelectWorkflowOpen(true)}
                       className="gap-2"
                     >
@@ -187,7 +145,7 @@ export const ProjectWorkflowClient = () => {
                   </>
                 ) : (
                   <Button 
-                    size="sm" 
+                    size="xs" 
                     onClick={() => setIsSelectWorkflowOpen(true)}
                     className="gap-2"
                   >
@@ -239,22 +197,20 @@ export const ProjectWorkflowClient = () => {
               {/* Statuses Preview */}
               {projectWorkflow.statuses && projectWorkflow.statuses.length > 0 && (
                 <div className="space-y-3">
-                  <h5 className="text-sm font-medium text-muted-foreground">Statuses</h5>
+                  <h5 className="text-sm font-medium ">Statuses</h5>
                   <div className="flex flex-wrap gap-2">
                     {projectWorkflow.statuses.map((status) => (
                       <div
                         key={status.$id}
-                        className="flex items-center gap-2 px-3 py-1.5 rounded-full border bg-background"
-                        style={{ borderColor: status.color }}
+                        className="flex items-center gap-2 px-3 py-1 rounded-lg border bg-background"
+                        style={{ borderColor: status.color, backgroundColor: `${status.color}20` }}
                       >
                         <div 
                           className="size-2.5 rounded-full"
                           style={{ backgroundColor: status.color }}
                         />
-                        <span className="text-sm font-medium">{status.name}</span>
-                        <Badge variant="secondary" className="text-xs px-1.5 py-0">
-                          {STATUS_TYPE_CONFIG[status.statusType as StatusType]?.label || status.statusType}
-                        </Badge>
+                        <span className="text-xs font-medium">{status.name}</span>
+                       
                       </div>
                     ))}
                   </div>
@@ -273,11 +229,11 @@ export const ProjectWorkflowClient = () => {
               </p>
               {isAdmin && (
                 <div className="flex items-center gap-2">
-                  <Button onClick={() => setIsSelectWorkflowOpen(true)} className="gap-2">
-                    <Plus className="size-4" />
+                  <Button size={"xs"} onClick={() => setIsSelectWorkflowOpen(true)} className="gap-2">
+                    <Plus className="size-2" />
                     Assign Workflow
                   </Button>
-                  <Button variant="outline" onClick={handleCreateProjectWorkflow} className="gap-2">
+                  <Button variant="outline" size={"xs"} onClick={handleCreateProjectWorkflow} className="gap-2">
                     <Plus className="size-4" />
                     Create New
                   </Button>
@@ -288,41 +244,80 @@ export const ProjectWorkflowClient = () => {
         </CardContent>
       </Card>
 
-      {/* Info Alert */}
-      <Alert>
-        <Info className="h-4 w-4" />
-        <AlertTitle>How Project Workflows Work</AlertTitle>
-        <AlertDescription className="text-sm">
-          <ul className="list-disc list-inside mt-2 space-y-1">
-            <li>Each project can have its own dedicated workflow</li>
-            <li>When you create a new status in the project, it will be added to this workflow</li>
-            <li>You can also use a shared workflow from the space or workspace</li>
-            <li>Work items will only be able to move between statuses defined in the workflow</li>
-          </ul>
-        </AlertDescription>
-      </Alert>
+      {/* How Project Workflows Work */}
+      <div className="rounded-xl border border-border/60 bg-gradient-to-br from-muted/40 via-muted/20 to-background p-5">
+        <div className="flex items-center gap-2.5 mb-5">
+          <div className="p-1.5 rounded-lg ">
+            <Info className="h-4 w-4 text-primary" />
+          </div>
+          <h3 className="font-medium text-sm ">How Project Workflows Work</h3>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
+          {[
+            {
+              icon: GitBranch,
+              title: "Dedicated Workflows",
+              text: "Each project can have its own dedicated workflow for full control.",
+              color: "text-violet-500",
+              bg: "bg-violet-500/10",
+            },
+            {
+              icon: Plus,
+              title: "Auto-synced Statuses",
+              text: "New statuses created in the project are added to this workflow automatically.",
+              color: "text-emerald-500",
+              bg: "bg-emerald-500/10",
+            },
+            {
+              icon: Layers,
+              title: "Shared Workflows",
+              text: "You can use a shared workflow from the space or workspace level.",
+              color: "text-blue-500",
+              bg: "bg-blue-500/10",
+            },
+            {
+              icon: ArrowRight,
+              title: "Controlled Transitions",
+              text: "Work items can only transition between statuses defined in the workflow.",
+              color: "text-orange-500",
+              bg: "bg-orange-500/10",
+            },
+          ].map(({ icon: Icon, title, text, color, bg }) => (
+            <div
+              key={title}
+              className="flex items-start gap-3 p-3.5 rounded-lg bg-background/70 border border-border/40 hover:bg-background/90 transition-colors"
+            >
+              <div className={`p-1.5 rounded-md ${bg} shrink-0 mt-0.5`}>
+                <Icon className={`size-3.5 ${color}`} />
+              </div>
+              <div>
+                <p className="text-sm font-medium  mb-0.5">{title}</p>
+                <p className="text-xs text-muted-foreground leading-relaxed">{text}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
 
       {/* Available Workflows */}
-      <Card>
-        <CardHeader>
+      <Card className="shadow-none">
+        <CardHeader className="pb-6">
           <div className="flex items-center gap-2">
-            <Workflow className="size-5 text-primary" />
-            <CardTitle>Available Workflows</CardTitle>
+            <Workflow className="size-5 text-medium text-primary" />
+            <CardTitle className="font-medium tracking-normal">Available Workflows</CardTitle>
           </div>
           <CardDescription>
             Workflows you can assign to this project
           </CardDescription>
         </CardHeader>
-        <CardContent className="space-y-4">
+        <CardContent className="px-0 pb-1">
           {spaceWorkflows.length > 0 && (
-            <div className="space-y-3">
-              <h5 className="text-sm font-medium flex items-center gap-2">
-                <Badge variant="outline" className="font-normal">Space</Badge>
-                Workflows from Space
-              </h5>
-              <div className="grid gap-3 md:grid-cols-2">
+            <div className="mb-1 border-t">
+              {/* Section header */}
+           
+              <div className="divide-y divide-border/50">
                 {spaceWorkflows.map((workflow) => (
-                  <WorkflowCard
+                  <WorkflowRow
                     key={workflow.$id}
                     workflow={workflow}
                     isActive={project.workflowId === workflow.$id}
@@ -339,14 +334,15 @@ export const ProjectWorkflowClient = () => {
           )}
 
           {workspaceWorkflows.length > 0 && (
-            <div className="space-y-3">
-              <h5 className="text-sm font-medium flex items-center gap-2">
-                <Badge variant="outline" className="font-normal">Workspace</Badge>
-                Global Workflows
-              </h5>
-              <div className="grid gap-3 md:grid-cols-2">
+            <div className="mb-1">
+              {/* Section header */}
+              <div className="flex items-center gap-2 px-6 py-2 border-y bg-muted/30">
+                <Badge variant="outline" className="font-normal text-xs">Workspace</Badge>
+                <span className="text-xs text-muted-foreground font-medium">Global Workflows</span>
+              </div>
+              <div className="divide-y divide-border/50">
                 {workspaceWorkflows.map((workflow) => (
-                  <WorkflowCard
+                  <WorkflowRow
                     key={workflow.$id}
                     workflow={workflow}
                     isActive={project.workflowId === workflow.$id}
@@ -363,7 +359,7 @@ export const ProjectWorkflowClient = () => {
           )}
 
           {workflows.length === 0 && (
-            <div className="text-center py-8 text-muted-foreground">
+            <div className="text-center py-10 text-muted-foreground text-sm px-6">
               No workflows available. Create one to get started.
             </div>
           )}
@@ -447,7 +443,7 @@ export const ProjectWorkflowClient = () => {
   );
 };
 
-// Workflow Card Component
+// Workflow Row Component (list design)
 interface WorkflowCardProps {
   workflow: {
     $id: string;
@@ -463,52 +459,80 @@ interface WorkflowCardProps {
   onEdit: () => void;
 }
 
-const WorkflowCard = ({ workflow, isActive, isAdmin, onSelect, onEdit }: WorkflowCardProps) => {
+const WorkflowRow = ({ workflow, isActive, isAdmin, onSelect, onEdit }: WorkflowCardProps) => {
   return (
-    <Card className={`cursor-pointer transition-all hover:shadow-md ${isActive ? 'border-primary ring-1 ring-primary' : ''}`}>
-      <CardContent className="p-4">
-        <div className="flex items-start justify-between">
-          <div className="flex items-center gap-3">
-            <div className="p-2 rounded-lg bg-primary/10">
-              <GitBranch className="size-4 text-primary" />
-            </div>
-            <div>
-              <div className="flex items-center gap-2">
-                <h4 className="font-medium">{workflow.name}</h4>
-                {isActive && (
-                  <Badge variant="default" className="text-xs">
-                    Active
-                  </Badge>
-                )}
-                {workflow.isDefault && (
-                  <Badge variant="secondary" className="text-xs">
-                    Default
-                  </Badge>
-                )}
-              </div>
-              <p className="text-xs text-muted-foreground line-clamp-1">
-                {workflow.description || "No description"}
-              </p>
-            </div>
-          </div>
-        </div>
-        
-        <div className="flex items-center justify-between mt-3 pt-3 border-t">
-          <Badge variant="outline" className="text-xs">
-            {workflow.statusCount || 0} statuses
-          </Badge>
-          {isAdmin && !isActive && (
-            <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onSelect(); }}>
-              Use This
-            </Button>
+    <div
+      className={`group flex items-center gap-4 px-6 py-3.5 transition-colors hover:bg-muted/30 ${
+        isActive ? "bg-primary/5" : ""
+      }`}
+    >
+      {/* Active indicator */}
+      <div
+        className={`size-2 rounded-full shrink-0 transition-colors ${
+          isActive ? "!bg-blue-500" : "bg-muted-foreground/25 group-hover:bg-muted-foreground/40"
+        }`}
+      />
+
+      {/* Icon */}
+      <div className={`p-1.5 rounded-md shrink-0 ${isActive ? "bg-primary/10" : "bg-muted/60"}`}>
+        <GitBranch className={`size-3.5 ${isActive ? "text-primary" : "text-muted-foreground"}`} />
+      </div>
+
+      {/* Name & description */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-sm font-medium truncate">{workflow.name}</span>
+          {isActive && (
+            <Badge className="text-[10px] bg-blue-500/20 text-blue-600 px-1.5 py-0 h-4 gap-1">
+              <CheckCircle2 className="size-2.5" />
+              Active
+            </Badge>
           )}
-          {isAdmin && isActive && (
-            <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onEdit(); }}>
-              Edit
-            </Button>
+          {workflow.isDefault && (
+            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-4">
+              Default
+            </Badge>
           )}
         </div>
-      </CardContent>
-    </Card>
+        <p className="text-xs text-muted-foreground truncate mt-0.5">
+          {workflow.description || "No description"}
+        </p>
+      </div>
+
+      {/* Key */}
+      {workflow.key && (
+        <span className="text-xs font-mono text-muted-foreground/60 hidden md:block shrink-0">
+          {workflow.key}
+        </span>
+      )}
+
+      {/* Status count */}
+      <Badge variant="outline" className="text-xs text-medium text-green-500 bg-green-200/40 rounded-md border-none shadow-sm shrink-0 hidden sm:flex h-6">
+        {workflow.statusCount || 0} statuses
+      </Badge>
+
+      {/* Action buttons */}
+      <div className="shrink-0">
+        {isAdmin && !isActive && (
+          <Button
+            size="sm"
+            onClick={(e) => { e.stopPropagation(); onSelect(); }}
+            className="bg-blue-100/60 text-blue-600 hover:bg-blue-200/50 text-xs h-7 px-3 font-medium"
+          >
+            Use This
+          </Button>
+        )}
+        {isAdmin && isActive && (
+          <Button
+            variant="destructive"
+            size="xs"
+            onClick={(e) => { e.stopPropagation(); onEdit(); }}
+            className="text-[10px] px-6"
+          >
+            Edit
+          </Button>
+        )}
+      </div>
+    </div>
   );
 };
diff --git a/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/client.tsx b/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/client.tsx
index 44fe27cd..58c09a63 100644
--- a/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/client.tsx
+++ b/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/client.tsx
@@ -6,10 +6,8 @@ import {
   Workflow,
   Plus,
   FolderKanban,
-  ChevronRight,
   FolderPlus,
   X,
-  Crown,
   GitBranch,
 } from "lucide-react";
 import Link from "next/link";
@@ -20,9 +18,7 @@ import { SpaceWorkflowsModal } from "@/features/workflows/components/space-workf
 import { PageError } from "@/components/page-error";
 import { PageLoader } from "@/components/page-loader";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   Dialog,
   DialogContent,
@@ -174,7 +170,7 @@ export const SpaceIdClient = () => {
   /* Legacy Team Handlers Removed */
 
   return (
-    <div className="flex flex-col gap-y-6">
+    <div className="flex flex-col ">
       <ConfirmProjectDialog />
       <CreateProjectModal />
 
@@ -188,57 +184,55 @@ export const SpaceIdClient = () => {
       />
 
       {/* Professional Header */}
-      <div className="bg-gradient-to-r from-background to-muted/30 rounded-xl border p-6">
+      <div className="py-2 px-3">
         <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
           {/* Left: Space Info */}
           <div className="flex items-start gap-4">
-            <div
-              className="size-16 rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-lg"
-              style={{
-                backgroundColor: space.color || "#6366f1",
-                boxShadow: `0 8px 24px -4px ${space.color || "#6366f1"}40`
-              }}
-            >
-              {space.name.charAt(0).toUpperCase()}
-            </div>
+     
             <div className="space-y-2">
-              <div className="flex items-center gap-3">
-                <h1 className="text-2xl font-bold tracking-tight">{space.name}</h1>
-                <Badge variant="secondary" className="font-mono text-xs">
-                  {space.key}
-                </Badge>
-                {isMaster && <MasterBadge size="sm" />}
-              </div>
-              <p className="text-muted-foreground max-w-xl">
-                {space.description || "No description provided"}
-              </p>
+              <div className="flex flex-col  gap-2">
+                <h1 className="text-2xl font-semibold tracking-tight">{space.name}</h1>
+                <div className="flex flex-col  gap-2 ">
 
-              {/* Space Master Info */}
-              {spaceOwner && (
-                <div className="flex items-center gap-2 pt-2">
-                  <div className="flex items-center gap-2 px-3 py-1.5 bg-purple-500/10 border border-purple-500/20 rounded-lg">
-                    <Crown className="size-4 text-purple-600" />
-                    <span className="text-sm font-medium text-purple-700 dark:text-purple-400">
+                  <div className="flex items-center gap-2">
+                         <div className="px-2 py-0.5 rounded text-xs font-medium bg-muted/100 text-muted-foreground border border-muted/100">
+                          <p className="text-[10px]">{space.key}</p> 
+
+                     </div>
+                    {isMaster && <MasterBadge size="sm" />}
+                  </div>
+                    
+                  <div>
+
+                     {spaceOwner && (
+                <div className="flex items-center mt-1 gap-2 ">
+                  <div className="flex items-center gap-2 px-2 py-1 bg-blue-500/10 border border-blue-500/20 rounded-md">
+                    <span className="text-xs font-medium text-blue-700 dark:text-blue-500">
                       Space Master:
                     </span>
-                    <Avatar className="size-5">
-                      <AvatarImage src={spaceOwner.profileImageUrl || undefined} />
-                      <AvatarFallback className="text-xs bg-purple-500/20 text-purple-700 dark:text-purple-400">
-                        {spaceOwner.name?.charAt(0) || "?"}
-                      </AvatarFallback>
-                    </Avatar>
-                    <span className="text-sm font-medium">{spaceOwner.name}</span>
+                  
+                    <span className="text-xs font-medium">{spaceOwner.name}</span>
                   </div>
                 </div>
               )}
+                  </div>
+
+                </div>
+
+                
+              </div>
+             
+
+             
             </div>
+           
           </div>
 
           {/* Right: Actions */}
           <div className="flex items-center gap-2 flex-wrap">
             <Button
               variant="outline"
-              size="sm"
+              size="xs"
               className="gap-2"
               onClick={() => setIsWorkflowsModalOpen(true)}
             >
@@ -247,7 +241,7 @@ export const SpaceIdClient = () => {
             </Button>
             {isMaster && (
               <Link href={`/workspaces/${workspaceId}/spaces/${spaceId}/settings`}>
-                <Button variant="outline" size="sm" className="gap-2">
+                <Button variant="outline" size="xs" className="gap-2">
                   <Settings className="size-4" />
                   Settings
                 </Button>
@@ -256,24 +250,19 @@ export const SpaceIdClient = () => {
           </div>
         </div>
 
-        {/* Stats Bar */}
-        <div className="flex items-center gap-6 mt-6 pt-4 border-t border-border/50">
-          <div className="flex items-center gap-2 text-sm">
-            <FolderKanban className="size-4 text-muted-foreground" />
-            <span className="font-medium">{spaceProjects.length}</span>
-            <span className="text-muted-foreground">Projects</span>
-          </div>
-        </div>
+          <p className="text-muted-foreground  text-sm tracking-normal mt-4">
+                {space.description || "No description provided"}
+              </p>
+
+      
       </div>
 
       {/* Projects Section */}
-      <Card className="border-none shadow-sm">
-        <CardHeader className="pb-4">
-          <div className="flex items-center justify-between">
+      <Card className=" mt-8 shadow-none border-none rounded-lg">
+        <CardHeader className="pb-6 border-t  mb-6">
+          <div className="flex items-center  justify-between">
             <div className="flex items-center gap-3">
-              <div className="p-2 rounded-lg bg-primary/10">
-                <FolderKanban className="size-5 text-primary" />
-              </div>
+             
               <div>
                 <CardTitle className="text-lg">Projects</CardTitle>
                 <p className="text-sm text-muted-foreground">
@@ -283,11 +272,11 @@ export const SpaceIdClient = () => {
             </div>
             {isMaster && (
               <div className="flex items-center gap-2">
-                <Button onClick={handleCreateProject} size="sm" className="gap-2">
+                <Button onClick={handleCreateProject} size="xs" className="gap-2">
                   <Plus className="size-4" />
                   Create Project
                 </Button>
-                <Button onClick={() => setIsAddProjectOpen(true)} size="sm" variant="outline" className="gap-2">
+                <Button onClick={() => setIsAddProjectOpen(true)} size="xs" variant="outline" className="gap-2">
                   <FolderPlus className="size-4" />
                   Add Existing
                 </Button>
@@ -297,7 +286,7 @@ export const SpaceIdClient = () => {
         </CardHeader>
         <CardContent>
           {spaceProjects.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-12 text-center border-2 border-dashed rounded-xl bg-muted/30">
+            <div className="flex flex-col items-center justify-center py-12 text-center rounded-xl bg-muted/30">
               <div className="rounded-full bg-muted p-4 mb-4">
                 <FolderKanban className="h-8 w-8 text-muted-foreground" />
               </div>
@@ -318,92 +307,90 @@ export const SpaceIdClient = () => {
               {spaceProjects.map((project) => (
                 <Card
                   key={project.$id}
-                  className="group relative cursor-pointer hover:shadow-lg transition-all duration-200 border hover:border-primary/30 overflow-hidden"
+                  className="group cursor-pointer transition-all duration-200 border border-border/60  bg-card"
                   onClick={() => handleProjectClick(project.$id)}
                 >
-                  {/* Colored Top Border */}
-                  <div
-                    className="h-1 w-full"
-                    style={{ backgroundColor: project.color || space.color || "#6366f1" }}
-                  />
                   <CardContent className="p-5">
-                    <div className="flex items-start gap-3">
+                    {/* Top Row: Avatar + Action Buttons */}
+                    <div className="flex items-start justify-between mb-5">
                       <ProjectAvatar
                         name={project.name}
                         image={project.imageUrl}
-                        className="size-12 flex-shrink-0 rounded-lg"
+                        className="size-12 rounded-full flex-shrink-0"
                       />
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-start justify-between gap-2 mb-1">
-                          <h4 className="font-semibold text-base truncate group-hover:text-primary transition-colors">
-                            {project.name}
-                          </h4>
-                          <div className="flex items-center gap-1">
-                            {/* Workflow Icon */}
-                            <TooltipProvider delayDuration={100}>
-                              <Tooltip>
-                                <TooltipTrigger asChild>
-                                  <Button
-                                    size="icon"
-                                    variant="ghost"
-                                    className="size-7 hover:bg-primary/10 hover:text-primary"
-                                    onClick={(e) => handleWorkflowClick(project.$id, project.workflowId, e)}
-                                  >
-                                    <GitBranch className="size-4" />
-                                  </Button>
-                                </TooltipTrigger>
-                                <TooltipContent side="top">
-                                  <p>Project Workflow</p>
-                                </TooltipContent>
-                              </Tooltip>
-                            </TooltipProvider>
-
-                            {/* Remove Button */}
-                            {isMaster && (
-                              <TooltipProvider delayDuration={100}>
-                                <Tooltip>
-                                  <TooltipTrigger asChild>
-                                    <Button
-                                      size="icon"
-                                      variant="ghost"
-                                      className="size-7 hover:bg-destructive/10 hover:text-destructive"
-                                      disabled={isUpdatingProject}
-                                      onClick={(e) => handleRemoveProject(project.$id, e)}
-                                    >
-                                      <X className="size-4" />
-                                    </Button>
-                                  </TooltipTrigger>
-                                  <TooltipContent side="top">
-                                    <p>Remove from space</p>
-                                  </TooltipContent>
-                                </Tooltip>
-                              </TooltipProvider>
-                            )}
-                          </div>
-                        </div>
-                        <p className="text-sm text-muted-foreground line-clamp-2 leading-relaxed mb-3">
+                      <div className="flex items-center gap-1.5">
+                        {/* Workflow Button */}
+                        <TooltipProvider delayDuration={100}>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                size="xs"
+                                variant={project.workflowId ? "secondary" : "outline"}
+                                className="h-8 px-3 gap-1.5 text-xs font-medium rounded-lg"
+                                onClick={(e) => handleWorkflowClick(project.$id, project.workflowId, e)}
+                              >
+                                <GitBranch className="size-3.5" />
+                                {project.workflowId ? "Workflow" : "Add Workflow"}
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent size="xs" side="top">
+                              <p>Project Workflow</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+
+                        {/* Remove Button */}
+                        {isMaster && (
+                          <TooltipProvider delayDuration={100}>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <Button
+                                  size="icon"
+                                  variant="ghost"
+                                  className="size-8 text-muted-foreground hover:bg-destructive/10 hover:text-destructive rounded-lg"
+                                  disabled={isUpdatingProject}
+                                  onClick={(e) => handleRemoveProject(project.$id, e)}
+                                >
+                                  <X className="size-3.5" />
+                                </Button>
+                              </TooltipTrigger>
+                              <TooltipContent side="top" size="xs">
+                                <p>Remove from space</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Project Key + Name */}
+                    <div className="mb-4">
+                      {project.key && (
+                        <p className="text-xs font-medium text-muted-foreground mb-1.5 tracking-widest uppercase">
+                          {project.key}
+                        </p>
+                      )}
+                      <h4 className="font-semibold text-xl leading-snug tracking-tight group-hover:text-primary transition-colors line-clamp-2">
+                        {project.name}
+                      </h4>
+
+                       <p className="text-xs text-muted-foreground  tracking-normal leading-relaxed mt-2 line-clamp-3 ">
                           {project.description || "No description provided"}
                         </p>
+                    </div>
 
-                        {/* Project Footer with Key and Workflow indicator */}
-                        <div className="flex items-center justify-between">
-                          {project.key && (
-                            <Badge variant="outline" className="text-xs font-mono">
-                              {project.key}
-                            </Badge>
-                          )}
-                          <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                            <GitBranch className="size-3" />
-                            <span>
-                              {project.workflowId 
-                                ? workflowMap.get(project.workflowId) || "Custom Workflow"
-                                : "Default Workflow"}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
+                    {/* Tags */}
+                    <div className="flex items-center justify-between gap-2 flex-wrap">
+                      <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-muted text-xs font-medium text-muted-foreground border border-border/40">
+                        <GitBranch className="size-3" />
+                        {project.workflowId
+                          ? workflowMap.get(project.workflowId) || "Custom Workflow"
+                          : "Default Workflow"}
+                      </span>
+
+                  
                     </div>
-                    <ChevronRight className="size-4 text-muted-foreground group-hover:text-primary transition-all group-hover:translate-x-1 absolute bottom-5 right-4" />
+
                   </CardContent>
                 </Card>
               ))}
diff --git a/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/settings/client.tsx b/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/settings/client.tsx
index f26ae932..c01e7e37 100644
--- a/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/settings/client.tsx
+++ b/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/settings/client.tsx
@@ -2,28 +2,13 @@
 
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
-import {
-  ArrowLeft,
-  Settings,
-  Palette,
-  Lock,
-  Trash2,
-  Save,
-  Eye,
-  EyeOff,
-  Workflow
-} from "lucide-react";
-import Link from "next/link";
+import {  Save, Eye, EyeOff, Workflow } from "lucide-react";
 
 import { PageError } from "@/components/page-error";
 import { PageLoader } from "@/components/page-loader";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Separator } from "@/components/ui/separator";
 import {
   Select,
   SelectContent,
@@ -64,6 +49,16 @@ const SPACE_COLORS = [
   { name: "Slate", value: "#64748b" },
 ];
 
+type Section = "general" | "appearance" | "access" | "workflows" | "danger";
+
+const NAV_ITEMS: { id: Section; label: string; danger?: boolean }[] = [
+  { id: "general", label: "General" },
+  { id: "appearance", label: "Appearance" },
+  { id: "access", label: "Access & Visibility" },
+  { id: "workflows", label: "Workflows" },
+  { id: "danger", label: "Delete Space", danger: true },
+];
+
 export const SpaceSettingsClient = () => {
   const router = useRouter();
   const params = useParams();
@@ -85,8 +80,8 @@ export const SpaceSettingsClient = () => {
   const [workflowInheritance, setWorkflowInheritance] = useState<WorkflowInheritanceMode>(WorkflowInheritanceMode.SUGGEST);
   const [hasChanges, setHasChanges] = useState(false);
   const [isWorkflowsModalOpen, setIsWorkflowsModalOpen] = useState(false);
+  const [activeSection, setActiveSection] = useState<Section>("general");
 
-  // Initialize form values when space data loads
   useState(() => {
     if (space) {
       setName(space.name || "");
@@ -99,41 +94,19 @@ export const SpaceSettingsClient = () => {
     }
   });
 
-  if (isLoadingSpace) {
-    return <PageLoader />;
-  }
-
-  if (!space) {
-    return <PageError message="Space not found." />;
-  }
-
-  if (!isAdmin) {
-    return <PageError message="You don't have permission to access space settings." />;
-  }
+  if (isLoadingSpace) return <PageLoader />;
+  if (!space) return <PageError message="Space not found." />;
+  if (!isAdmin) return <PageError message="You don\'t have permission to access space settings." />;
 
   const handleFieldChange = (field: string, value: string) => {
     switch (field) {
-      case "name":
-        setName(value);
-        break;
-      case "key":
-        setKey(value.toUpperCase());
-        break;
-      case "description":
-        setDescription(value);
-        break;
-      case "color":
-        setColor(value);
-        break;
-      case "visibility":
-        setVisibility(value as SpaceVisibility);
-        break;
-      case "defaultWorkflowId":
-        setDefaultWorkflowId(value === "NO_WORKFLOW_VALUE" ? "" : value);
-        break;
-      case "workflowInheritance":
-        setWorkflowInheritance(value as WorkflowInheritanceMode);
-        break;
+      case "name": setName(value); break;
+      case "key": setKey(value.toUpperCase()); break;
+      case "description": setDescription(value); break;
+      case "color": setColor(value); break;
+      case "visibility": setVisibility(value as SpaceVisibility); break;
+      case "defaultWorkflowId": setDefaultWorkflowId(value === "NO_WORKFLOW_VALUE" ? "" : value); break;
+      case "workflowInheritance": setWorkflowInheritance(value as WorkflowInheritanceMode); break;
     }
     setHasChanges(true);
   };
@@ -152,30 +125,22 @@ export const SpaceSettingsClient = () => {
           workflowInheritance: workflowInheritance || WorkflowInheritanceMode.SUGGEST,
         },
       },
-      {
-        onSuccess: () => {
-          setHasChanges(false);
-        },
-      }
+      { onSuccess: () => setHasChanges(false) }
     );
   };
 
   const handleDelete = () => {
     deleteSpace(
       { param: { spaceId } },
-      {
-        onSuccess: () => {
-          router.push(`/workspaces/${workspaceId}/spaces`);
-        },
-      }
+      { onSuccess: () => router.push(`/workspaces/${workspaceId}/spaces`) }
     );
   };
 
   const workflows = workflowsData?.documents ?? [];
+  const activeColor = color || space.color || "#6366f1";
 
   return (
-    <div className="flex flex-col gap-y-6 max-w-4xl mx-auto">
-      {/* Space Workflows Modal */}
+    <div className="w-full h-[83vh] px-2">
       <SpaceWorkflowsModal
         isOpen={isWorkflowsModalOpen}
         onClose={() => setIsWorkflowsModalOpen(false)}
@@ -184,316 +149,405 @@ export const SpaceSettingsClient = () => {
         workspaceId={workspaceId}
       />
 
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <Link href={`/workspaces/${workspaceId}/spaces/${spaceId}`}>
-            <Button variant="ghost" size="icon" className="size-9">
-              <ArrowLeft className="size-5" />
-            </Button>
-          </Link>
-          <div className="flex items-center gap-3">
-            <div
-              className="size-12 rounded-xl flex items-center justify-center text-white font-bold text-xl shadow-md"
-              style={{
-                backgroundColor: color || space.color || "#6366f1",
-                boxShadow: `0 4px 12px -2px ${color || space.color || "#6366f1"}40`
-              }}
-            >
-              {(name || space.name).charAt(0).toUpperCase()}
-            </div>
-            <div>
-              <h1 className="text-2xl font-bold tracking-tight flex items-center gap-2">
-                Space Settings
-                <Badge variant="secondary" className="font-mono text-xs">
-                  {key || space.key}
-                </Badge>
-              </h1>
-              <p className="text-muted-foreground text-sm">
-                Configure {name || space.name} settings
-              </p>
-            </div>
+
+      {/* Settings Panel */}
+      <div className="bg-card rounded-2xl border h-full border-border shadow-sm overflow-hidden">
+        <div className="flex h-full">
+
+          {/* Left Navigation */}
+          <aside className="w-44 shrink-0 border-r border-border bg-muted/20 p-3 flex flex-col gap-0.5">
+            {NAV_ITEMS.map((item) => (
+              <button
+                key={item.id}
+                type="button"
+                onClick={() => setActiveSection(item.id)}
+                className={[
+                  "w-full text-left px-3 py-2 rounded-lg text-sm transition-colors duration-100",
+                  item.danger
+                    ? activeSection === item.id
+                      ? "bg-destructive/10 text-destructive font-medium"
+                      : "text-destructive/80 hover:bg-destructive/10 hover:text-destructive"
+                    : activeSection === item.id
+                    ? "bg-blue-500/10 text-blue-700 font-medium"
+                    : "text-muted-foreground",
+                ].join(" ")}
+              >
+                {item.label}
+              </button>
+            ))}
+          </aside>
+
+          {/* Content Area */}
+          <main className="flex-1 p-7 min-w-0">
+
+            {/* ── General ── */}
+         {activeSection === "general" && (
+  <section className="flex flex-col h-full justify-between">
+    <div>
+      <h2 className="text-[18px] font-semibold mb-2">General</h2>
+
+      <div className="divide-y divide-border">
+        {/* Space Name */}
+        <div className="flex flex-col py-4 gap-4">
+          <div className="shrink-0">
+            <p className="text-sm font-regular">Space Name</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              The display name for this space.
+            </p>
+          </div>
+
+          <Input
+            value={name || space.name}
+            onChange={(e) => handleFieldChange("name", e.target.value)}
+            className="w-6/12 h-8 text-sm rounded-md border border-border bg-transparent px-2 shadow-none focus-visible:ring-0 focus-visible:border-primary"
+            placeholder="Enter space name"
+          />
+        </div>
+
+        {/* Space Key */}
+        <div className="flex flex-col py-4 gap-4">
+          <div className="shrink-0">
+            <p className="text-sm font-regular">Space Key</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              Prefix for work items, e.g. ENG-001.
+            </p>
           </div>
+
+          <Input
+            value={key || space.key}
+            onChange={(e) => handleFieldChange("key", e.target.value)}
+            className="w-6/12 h-8 text-sm rounded-md border border-border bg-transparent px-2 shadow-none focus-visible:ring-0 focus-visible:border-primary"
+            placeholder="ENG"
+            maxLength={10}
+          />
         </div>
 
-        <Button
-          onClick={handleSave}
-          disabled={!hasChanges || isUpdating}
-          className="gap-2"
-        >
-          <Save className="size-4" />
-          {isUpdating ? "Saving..." : "Save Changes"}
-        </Button>
+        {/* Description */}
+        <div className="flex flex-col py-4 gap-4">
+          <div className="shrink-0">
+            <p className="text-sm font-regular">Description</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              A short description of this space.
+            </p>
+          </div>
+
+          <Textarea
+            value={description || space.description || ""}
+            onChange={(e) => handleFieldChange("description", e.target.value)}
+            className="w-6/12 min-h-[80px] text-sm rounded-md border border-border bg-transparent px-2 shadow-none focus-visible:ring-0 focus-visible:border-primary"
+            rows={3}
+            placeholder="Describe this space..."
+          />
+        </div>
       </div>
+    </div>
 
-      <Separator />
+    <div className="w-full flex justify-end">
+      <Button
+        onClick={handleSave}
+        disabled={!hasChanges || isUpdating}
+        size="xs"
+      >
+        <Save className="size-3" />
+        {isUpdating ? "Saving..." : "Save Changes"}
+      </Button>
+    </div>
+  </section>
+)}
+
+            {/* ── Appearance ── */}
+{activeSection === "appearance" && (
+  <section className="flex flex-col h-full justify-between">
+    <div>
+      <h2 className="text-[18px] font-semibold mb-2">Appearance</h2>
 
-      {/* General Settings */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <Settings className="size-5 text-primary" />
-            <CardTitle>General Settings</CardTitle>
+      <div className="divide-y divide-border">
+        {/* Theme Color */}
+        <div className="flex flex-col py-4 gap-4">
+          <div>
+            <p className="text-sm font-regular">Theme Color</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              Choose a color that represents this space.
+            </p>
           </div>
-          <CardDescription>
-            Basic information about your space
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-6">
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <Label htmlFor="name">Space Name</Label>
-              <Input
-                id="name"
-                value={name || space.name}
-                onChange={(e) => handleFieldChange("name", e.target.value)}
-                placeholder="Enter space name"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="key">Space Key</Label>
-              <Input
-                id="key"
-                value={key || space.key}
-                onChange={(e) => handleFieldChange("key", e.target.value)}
-                placeholder="e.g., ENG, MKT"
-                className="font-mono uppercase"
-                maxLength={10}
+
+          <div className="flex flex-wrap gap-2">
+            {SPACE_COLORS.map((c) => (
+              <button
+                key={c.value}
+                type="button"
+                title={c.name}
+                onClick={() => handleFieldChange("color", c.value)}
+                className={[
+                  "size-7 rounded-full transition-all duration-150 hover:scale-110",
+                  (color || space.color) === c.value
+                    ? "ring-2 ring-offset-2 ring-foreground/30 scale-110"
+                    : "",
+                ].join(" ")}
+                style={{ backgroundColor: c.value }}
               />
-              <p className="text-xs text-muted-foreground">
-                Used as prefix for work items
-              </p>
-            </div>
+            ))}
           </div>
+        </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="description">Description</Label>
-            <Textarea
-              id="description"
-              value={description || space.description || ""}
-              onChange={(e) => handleFieldChange("description", e.target.value)}
-              placeholder="Describe the purpose of this space..."
-              rows={3}
-            />
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Appearance */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <Palette className="size-5 text-primary" />
-            <CardTitle>Appearance</CardTitle>
-          </div>
-          <CardDescription>
-            Customize how your space looks
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="space-y-3">
-            <Label>Theme Color</Label>
-            <div className="flex flex-wrap gap-3">
-              {SPACE_COLORS.map((colorOption) => (
-                <button
-                  key={colorOption.value}
-                  type="button"
-                  className={`size-10 rounded-lg transition-all hover:scale-110 ${(color || space.color) === colorOption.value
-                    ? "ring-2 ring-offset-2 ring-primary"
-                    : ""
-                    }`}
-                  style={{ backgroundColor: colorOption.value }}
-                  onClick={() => handleFieldChange("color", colorOption.value)}
-                  title={colorOption.name}
-                />
-              ))}
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Access & Visibility */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <Lock className="size-5 text-primary" />
-            <CardTitle>Access & Visibility</CardTitle>
+        {/* Preview */}
+        <div className="flex flex-col py-4 gap-4">
+          <div>
+            <p className="text-sm font-regular">Preview</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              How your space icon will appear.
+            </p>
           </div>
-          <CardDescription>
-            Control who can see and access this space
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="space-y-2">
-            <Label>Visibility</Label>
-            <Select
-              value={visibility || space.visibility}
-              onValueChange={(v) => handleFieldChange("visibility", v)}
-            >
-              <SelectTrigger className="w-full md:w-[300px]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value={SpaceVisibility.PUBLIC}>
-                  <div className="flex items-center gap-2">
-                    <Eye className="size-4" />
-                    <div>
-                      <div className="font-medium">Public</div>
-                      <div className="text-xs text-muted-foreground">Visible to all workspace members</div>
-                    </div>
-                  </div>
-                </SelectItem>
-                <SelectItem value={SpaceVisibility.PRIVATE}>
-                  <div className="flex items-center gap-2">
-                    <EyeOff className="size-4" />
-                    <div>
-                      <div className="font-medium">Private</div>
-                      <div className="text-xs text-muted-foreground">Only invited members can access</div>
-                    </div>
-                  </div>
-                </SelectItem>
-              </SelectContent>
-            </Select>
+
+          <div
+            className="size-10 rounded-xl flex items-center justify-center text-white font-bold text-base shadow-sm transition-colors duration-200"
+            style={{ backgroundColor: activeColor }}
+          >
+            {(name || space.name).charAt(0).toUpperCase()}
           </div>
-        </CardContent>
-      </Card>
-
-      {/* Workflow Settings */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <Workflow className="size-5 text-primary" />
-            <CardTitle>Workflow Settings</CardTitle>
+        </div>
+      </div>
+    </div>
+
+    <div className="w-full flex justify-end">
+      <Button
+        onClick={handleSave}
+        disabled={!hasChanges || isUpdating}
+        size="xs"
+      >
+        <Save className="size-3" />
+        {isUpdating ? "Saving..." : "Save Changes"}
+      </Button>
+    </div>
+  </section>
+)}
+
+           {/* ── Access & Visibility ── */}
+{activeSection === "access" && (
+  <section className="flex flex-col h-full justify-between">
+    <div>
+      <h2 className="text-[18px] font-semibold mb-2">
+        Access & Visibility
+      </h2>
+
+      <div className="divide-y divide-border">
+        <div className="flex flex-col py-4 gap-4">
+          <div>
+            <p className="text-sm font-regular">Visibility</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              {(visibility || space.visibility) === SpaceVisibility.PUBLIC
+                ? "All workspace members can see this space."
+                : "Only invited members can access this space."}
+            </p>
           </div>
-          <CardDescription>
-            Configure default workflow for new projects in this space
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="space-y-2">
-            <Label>Default Workflow</Label>
-            <Select
-              value={defaultWorkflowId || space.defaultWorkflowId || "NO_WORKFLOW_VALUE"}
-              onValueChange={(v) => handleFieldChange("defaultWorkflowId", v)}
-            >
-              <SelectTrigger className="w-full md:w-[300px]">
-                <SelectValue placeholder="Select a workflow" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="NO_WORKFLOW_VALUE">
-                  <span className="text-muted-foreground">No default workflow</span>
-                </SelectItem>
-                {workflows.map((workflow) => (
-                  <SelectItem key={workflow.$id} value={workflow.$id}>
-                    {workflow.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <p className="text-xs text-muted-foreground">
+
+          <Select
+            value={visibility || space.visibility}
+            onValueChange={(v) => handleFieldChange("visibility", v)}
+          >
+            <SelectTrigger className="w-fit px-3 h-8 text-sm rounded-md border border-border bg-transparent shadow-none focus:ring-0">
+              <SelectValue />
+            </SelectTrigger>
+
+            <SelectContent>
+              <SelectItem value={SpaceVisibility.PUBLIC}>
+                <div className="flex items-center gap-1.5">
+                  <Eye className="size-3.5" />
+                  Public
+                </div>
+              </SelectItem>
+
+              <SelectItem value={SpaceVisibility.PRIVATE}>
+                <div className="flex items-center gap-1.5">
+                  <EyeOff className="size-3.5" />
+                  Private
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+
+    <div className="w-full flex justify-end">
+      <Button
+        onClick={handleSave}
+        disabled={!hasChanges || isUpdating}
+        size="xs"
+      >
+        <Save className="size-3" />
+        {isUpdating ? "Saving..." : "Save Changes"}
+      </Button>
+    </div>
+  </section>
+)}
+
+          {/* ── Workflows ── */}
+{activeSection === "workflows" && (
+  <section className="flex flex-col h-full justify-between">
+    <div>
+      <h2 className="text-[18px] font-semibold mb-2">Workflows</h2>
+
+      <div className="divide-y divide-border">
+        {/* Default Workflow */}
+        <div className="flex flex-col py-4 gap-4">
+          <div>
+            <p className="text-sm font-regular">Default Workflow</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
               New projects will use this workflow by default.
             </p>
           </div>
 
-          {/* Workflow Inheritance Mode */}
-          <div className="space-y-2">
-            <Label>Workflow Inheritance</Label>
-            <Select
-              value={workflowInheritance || space.workflowInheritance || WorkflowInheritanceMode.SUGGEST}
-              onValueChange={(v) => handleFieldChange("workflowInheritance", v)}
-            >
-              <SelectTrigger className="w-full md:w-[300px]">
-                <SelectValue placeholder="Select inheritance mode" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value={WorkflowInheritanceMode.REQUIRE}>
-                  <div className="flex flex-col">
-                    <span className="font-medium">Required</span>
-                    <span className="text-xs text-muted-foreground">Projects must use the space workflow (locked)</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value={WorkflowInheritanceMode.SUGGEST}>
-                  <div className="flex flex-col">
-                    <span className="font-medium">Suggested</span>
-                    <span className="text-xs text-muted-foreground">Projects inherit workflow but can override</span>
-                  </div>
-                </SelectItem>
-                <SelectItem value={WorkflowInheritanceMode.NONE}>
-                  <div className="flex flex-col">
-                    <span className="font-medium">None</span>
-                    <span className="text-xs text-muted-foreground">Projects choose their own workflow</span>
-                  </div>
+          <Select
+            value={defaultWorkflowId || space.defaultWorkflowId || "NO_WORKFLOW_VALUE"}
+            onValueChange={(v) => handleFieldChange("defaultWorkflowId", v)}
+          >
+            <SelectTrigger className="w-fit px-3 h-8 text-sm rounded-md border border-border bg-transparent shadow-none focus:ring-0">
+              <SelectValue placeholder="None" />
+            </SelectTrigger>
+
+            <SelectContent>
+              <SelectItem value="NO_WORKFLOW_VALUE">
+                <span className="text-muted-foreground">No default</span>
+              </SelectItem>
+
+              {workflows.map((wf) => (
+                <SelectItem key={wf.$id} value={wf.$id}>
+                  {wf.name}
                 </SelectItem>
-              </SelectContent>
-            </Select>
-            <p className="text-xs text-muted-foreground">
-              Controls how projects in this space inherit the default workflow.
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Workflow Inheritance */}
+        <div className="flex flex-col py-4 gap-4">
+          <div>
+            <p className="text-sm font-regular">Workflow Inheritance</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              How projects inherit the default workflow.
             </p>
           </div>
 
-          <div className="pt-2">
-            <Button
-              variant="outline"
-              size="sm"
-              className="gap-2"
-              onClick={() => setIsWorkflowsModalOpen(true)}
-            >
-              <Workflow className="size-4" />
-              Manage Workflows
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Danger Zone */}
-      <Card className="border-destructive/50">
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <Trash2 className="size-5 text-destructive" />
-            <CardTitle className="text-destructive">Danger Zone</CardTitle>
-          </div>
-          <CardDescription>
-            Irreversible actions for this space
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex items-center justify-between p-4 border border-destructive/30 rounded-lg bg-destructive/5">
-            <div>
-              <h4 className="font-medium">Delete this space</h4>
-              <p className="text-sm text-muted-foreground">
-                This will permanently delete the space and remove all projects from it.
-              </p>
-            </div>
-            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button variant="destructive" disabled={isDeleting}>
-                  <Trash2 className="size-4 mr-2" />
-                  Delete Space
-                </Button>
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    This action cannot be undone. This will permanently delete the space
-                    <strong> {space.name}</strong> and remove all projects from it.
-                    The projects themselves will not be deleted, just unassigned from this space.
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>Cancel</AlertDialogCancel>
-                  <AlertDialogAction
-                    onClick={handleDelete}
-                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-                  >
-                    {isDeleting ? "Deleting..." : "Delete Space"}
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
+          <Select
+            value={
+              workflowInheritance ||
+              space.workflowInheritance ||
+              WorkflowInheritanceMode.SUGGEST
+            }
+            onValueChange={(v) =>
+              handleFieldChange("workflowInheritance", v)
+            }
+          >
+            <SelectTrigger className="w-fit px-3 h-8 text-sm rounded-md border border-border bg-transparent shadow-none focus:ring-0">
+              <SelectValue />
+            </SelectTrigger>
+
+            <SelectContent>
+              <SelectItem value={WorkflowInheritanceMode.REQUIRE}>
+                Required
+              </SelectItem>
+
+              <SelectItem value={WorkflowInheritanceMode.SUGGEST}>
+                Suggested
+              </SelectItem>
+
+              <SelectItem value={WorkflowInheritanceMode.NONE}>
+                None
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Manage Workflows */}
+        <div className="flex flex-col py-4 gap-4">
+          <div>
+            <p className="text-sm font-regular">Manage Workflows</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              View and edit all workflows in this space.
+            </p>
           </div>
-        </CardContent>
-      </Card>
+
+          <Button
+            variant="outline"
+            size="xs"
+            onClick={() => setIsWorkflowsModalOpen(true)}
+            className="w-fit"
+          >
+            <Workflow className="size-3.5" />
+            Manage
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <div className="w-full flex justify-end">
+      <Button
+        onClick={handleSave}
+        disabled={!hasChanges || isUpdating}
+        size="xs"
+      >
+        <Save className="size-3" />
+        {isUpdating ? "Saving..." : "Save Changes"}
+      </Button>
+    </div>
+  </section>
+)}
+
+            {/* ── Danger Zone ── */}
+            {activeSection === "danger" && (
+              <section>
+                <h2 className="text-sm font-semibold mb-0.5 text-destructive">Delete Space</h2>
+                <p className="text-xs text-muted-foreground mb-5">Irreversible actions for this space.</p>
+                <div className="divide-y divide-border">
+
+                  <div className="flex items-center justify-between py-4 gap-6">
+                    <div className="shrink-0">
+                      <p className="text-sm font-medium">Delete this space</p>
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        Permanently deletes the space. Projects will be unassigned, not deleted.
+                      </p>
+                    </div>
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          disabled={isDeleting}
+                          className="h-8 text-sm text-destructive hover:text-destructive hover:bg-destructive/10"
+                        >
+                          {isDeleting ? "Deleting..." : "Delete"}
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                          <AlertDialogDescription>
+                            This action cannot be undone. This will permanently delete the space
+                            <strong> {space.name}</strong> and remove all projects from it.
+                            The projects themselves will not be deleted, just unassigned.
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>Cancel</AlertDialogCancel>
+                          <AlertDialogAction
+                            onClick={handleDelete}
+                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                          >
+                            {isDeleting ? "Deleting..." : "Delete Space"}
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
+                  </div>
+
+                </div>
+              </section>
+            )}
+
+          </main>
+        </div>
+      </div>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/workflows/[workflowId]/client.tsx b/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/workflows/[workflowId]/client.tsx
index 5d3aa655..2223b0b1 100644
--- a/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/workflows/[workflowId]/client.tsx
+++ b/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/workflows/[workflowId]/client.tsx
@@ -8,17 +8,16 @@ import {
   GitBranch,
   Trash2,
   Plus,
-  GripVertical,
-  PanelLeft,
   BookOpen,
   AlertTriangle,
   Sparkles,
   Layers,
   X,
+  ChevronLeft,
+  ChevronRight,
 } from "lucide-react";
 import {
   ReactFlow,
-  Controls,
   Background,
   MiniMap,
   Panel,
@@ -39,7 +38,6 @@ import { Card } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useWorkspaceId } from "@/features/workspaces/hooks/use-workspace-id";
 import { useCurrentMember } from "@/features/members/hooks/use-current-member";
-// import { useGetTeams } from "@/features/teams/api/use-get-teams";
 import { useGetWorkflow } from "@/features/workflows/api/use-get-workflow";
 import { useDeleteWorkflow } from "@/features/workflows/api/use-delete-workflow";
 import { useCreateWorkflowStatus } from "@/features/workflows/api/use-create-workflow-status";
@@ -74,10 +72,10 @@ import {
   StatusNode as StatusNodeType,
   TransitionEdge as TransitionEdgeType,
 } from "@/features/workflows/types";
-import { 
-  StatusSuggestion, 
+import {
+  StatusSuggestion,
   TransitionSuggestion,
-  WorkflowSuggestion
+  WorkflowSuggestion,
 } from "@/features/workflows/types/ai-context";
 import { StatusNode } from "@/features/workflows/components/status-node";
 import { TransitionEdge } from "@/features/workflows/components/transition-edge";
@@ -89,14 +87,9 @@ import { ConnectProjectDialog } from "@/features/workflows/components/connect-pr
 import { ResolutionStrategy } from "@/features/workflows/components/workflow-conflict-dialog";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const nodeTypes: Record<string, any> = {
-  statusNode: StatusNode,
-};
-
+const nodeTypes: Record<string, any> = { statusNode: StatusNode };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const edgeTypes: Record<string, any> = {
-  transitionEdge: TransitionEdge,
-};
+const edgeTypes: Record<string, any> = { transitionEdge: TransitionEdge };
 
 // Inner component that uses ReactFlow hooks
 const WorkflowEditor = () => {
@@ -107,22 +100,33 @@ const WorkflowEditor = () => {
   const workspaceId = useWorkspaceId();
   const { isAdmin } = useCurrentMember({ workspaceId });
 
-  const { data: workflow, isLoading: workflowLoading, refetch: refetchWorkflow } = useGetWorkflow({ workflowId });
+  const {
+    data: workflow,
+    isLoading: workflowLoading,
+    refetch: refetchWorkflow,
+  } = useGetWorkflow({ workflowId });
   const { data: projectsData } = useGetProjects({ workspaceId });
 
-  // Track dismissed warnings
   const [dismissedWarnings, setDismissedWarnings] = useState<Set<string>>(new Set());
 
-  // Auto-sync on page open - refetch workflow data once on mount
+  // ── floating panel state ──────────────────────────────────────────────────
+  // Panel is open by default; user can collapse it to a slim rail
+  const [panelOpen, setPanelOpen] = useState(true);
+  const PANEL_WIDTH = 360; // fixed width when open
+
+  const [showCanvasTip, setShowCanvasTip] = useState(true);
+  const [zoomLevel, setZoomLevel] = useState(100);
+  // ─────────────────────────────────────────────────────────────────────────
+
   const hasSyncedOnMount = useRef(false);
   const hasAutoSyncedProjects = useRef(false);
   useEffect(() => {
     if (!hasSyncedOnMount.current && workflowId) {
       hasSyncedOnMount.current = true;
-      // Refetch workflow data to ensure we have the latest
       refetchWorkflow();
     }
   }, [workflowId, refetchWorkflow]);
+
   const { mutate: deleteWorkflow, isPending: isDeleting } = useDeleteWorkflow();
   const { mutateAsync: createStatus } = useCreateWorkflowStatus();
   const { mutateAsync: updateStatus } = useUpdateStatus();
@@ -134,24 +138,19 @@ const WorkflowEditor = () => {
   const { mutate: syncFromProject, isPending: isSyncing } = useSyncFromProject();
   const { mutate: syncWithResolution } = useSyncWithResolution();
 
-  // Get projects for this space
   const projects = useMemo(() => {
     if (!projectsData?.documents) return [];
-    // Filter to only show projects in this space
-    return projectsData.documents.filter(p => p.spaceId === spaceId);
+    return projectsData.documents.filter((p) => p.spaceId === spaceId);
   }, [projectsData, spaceId]);
 
-  // Get projects connected to this workflow (for team lookups)
-  const connectedProjects = useMemo(() =>
-    projects.filter(p => p.workflowId === workflowId),
+  const connectedProjects = useMemo(
+    () => projects.filter((p) => p.workflowId === workflowId),
     [projects, workflowId]
   );
 
-  // Auto-sync connected projects on page open to clean up orphaned statuses
   useEffect(() => {
     if (!hasAutoSyncedProjects.current && connectedProjects.length > 0 && !workflowLoading) {
       hasAutoSyncedProjects.current = true;
-      // Sync the first connected project to clean up orphaned workflow statuses
       const projectToSync = connectedProjects[0];
       if (projectToSync) {
         syncFromProject({ param: { workflowId, projectId: projectToSync.$id } });
@@ -159,239 +158,156 @@ const WorkflowEditor = () => {
     }
   }, [connectedProjects, workflowLoading, workflowId, syncFromProject]);
 
-  // Fetch teams from ALL connected projects (for transition access control)
-  const connectedProjectIds = useMemo(() => 
-    connectedProjects.map(p => p.$id),
+  const connectedProjectIds = useMemo(
+    () => connectedProjects.map((p) => p.$id),
     [connectedProjects]
   );
-
-  // Fetch teams from each connected project in parallel using useQueries
   const projectTeamsQueries = useGetMultipleProjectTeams({ projectIds: connectedProjectIds });
 
-  // Aggregate teams from all projects with project context labels
   const teamsForDialog = useMemo(() => {
-    const allTeams: Array<{ $id: string; name: string; projectId: string; projectName: string }> = [];
-    
+    const allTeams: Array<{
+      $id: string;
+      name: string;
+      projectId: string;
+      projectName: string;
+    }> = [];
     connectedProjects.forEach((project, index) => {
       const teamsData = projectTeamsQueries[index]?.data;
       if (teamsData?.documents) {
-        teamsData.documents.forEach(team => {
+        teamsData.documents.forEach((team) => {
           allTeams.push({
             $id: team.$id,
-            name: connectedProjects.length > 1 
-              ? `${team.name} (${project.name})` 
-              : team.name,
+            name:
+              connectedProjects.length > 1 ? `${team.name} (${project.name})` : team.name,
             projectId: project.$id,
             projectName: project.name,
           });
         });
       }
     });
-    
     return allTeams;
   }, [connectedProjects, projectTeamsQueries]);
 
-  // Check if any teams are still loading
-  const isLoadingTeams = projectTeamsQueries.some(query => query.isLoading);
+  const isLoadingTeams = projectTeamsQueries.some((q) => q.isLoading);
 
-  // Available projects to connect (those without this workflow or different workflow)
-  const availableProjects = useMemo(() =>
-    projects.filter(p => p.workflowId !== workflowId),
+  const availableProjects = useMemo(
+    () => projects.filter((p) => p.workflowId !== workflowId),
     [projects, workflowId]
   );
 
-  // ============ EDGE CASE: Detect orphaned statuses ============
-  // Orphaned statuses have no incoming or outgoing transitions (unreachable)
+  // ── warnings ──────────────────────────────────────────────────────────────
   const orphanedStatuses = useMemo(() => {
     if (!workflow?.statuses || !workflow?.transitions) return [];
-
     const transitions = workflow.transitions ?? [];
-    return workflow.statuses.filter(status => {
-      // Initial statuses are entry points, so they can have no incoming transitions
+    return workflow.statuses.filter((status) => {
       if (status.isInitial) return false;
-
-      const hasIncoming = transitions.some(t => t.toStatusId === status.$id);
-      const hasOutgoing = transitions.some(t => t.fromStatusId === status.$id);
-
-      // A status is orphaned if it has neither incoming nor outgoing transitions
+      const hasIncoming = transitions.some((t) => t.toStatusId === status.$id);
+      const hasOutgoing = transitions.some((t) => t.fromStatusId === status.$id);
       return !hasIncoming && !hasOutgoing;
     });
   }, [workflow?.statuses, workflow?.transitions]);
 
-  // Detect unreachable statuses (have outgoing but no incoming transitions and not initial)
   const unreachableStatuses = useMemo(() => {
     if (!workflow?.statuses || !workflow?.transitions) return [];
-
     const transitions = workflow.transitions ?? [];
-    return workflow.statuses.filter(status => {
+    return workflow.statuses.filter((status) => {
       if (status.isInitial) return false;
-
-      const hasIncoming = transitions.some(t => t.toStatusId === status.$id);
-      const hasOutgoing = transitions.some(t => t.fromStatusId === status.$id);
-
-      // Unreachable = has outgoing but no way to get there
+      const hasIncoming = transitions.some((t) => t.toStatusId === status.$id);
+      const hasOutgoing = transitions.some((t) => t.fromStatusId === status.$id);
       return !hasIncoming && hasOutgoing;
     });
   }, [workflow?.statuses, workflow?.transitions]);
 
-  // Detect dead-end statuses (have incoming but no outgoing and not final)
   const deadEndStatuses = useMemo(() => {
     if (!workflow?.statuses || !workflow?.transitions) return [];
-
     const transitions = workflow.transitions ?? [];
-    return workflow.statuses.filter(status => {
+    return workflow.statuses.filter((status) => {
       if (status.isFinal) return false;
-
-      const hasIncoming = transitions.some(t => t.toStatusId === status.$id);
-      const hasOutgoing = transitions.some(t => t.fromStatusId === status.$id);
-
-      // Dead-end = can get there but can't leave (and not marked as final)
+      const hasIncoming = transitions.some((t) => t.toStatusId === status.$id);
+      const hasOutgoing = transitions.some((t) => t.fromStatusId === status.$id);
       return hasIncoming && !hasOutgoing;
     });
   }, [workflow?.statuses, workflow?.transitions]);
 
-  // Combine all workflow warnings
   const workflowWarnings = useMemo(() => {
     const warnings: Array<{ type: string; message: string; statuses: string[] }> = [];
-
-    if (orphanedStatuses.length > 0) {
+    if (orphanedStatuses.length > 0)
       warnings.push({
         type: "orphaned",
         message: "Orphaned statuses (no connections)",
-        statuses: orphanedStatuses.map(s => s.name),
+        statuses: orphanedStatuses.map((s) => s.name),
       });
-    }
-
-    if (unreachableStatuses.length > 0) {
+    if (unreachableStatuses.length > 0)
       warnings.push({
         type: "unreachable",
         message: "Unreachable statuses (no incoming transitions)",
-        statuses: unreachableStatuses.map(s => s.name),
+        statuses: unreachableStatuses.map((s) => s.name),
       });
-    }
-
-    if (deadEndStatuses.length > 0) {
+    if (deadEndStatuses.length > 0)
       warnings.push({
         type: "deadend",
         message: "Dead-end statuses (no outgoing transitions, not final)",
-        statuses: deadEndStatuses.map(s => s.name),
+        statuses: deadEndStatuses.map((s) => s.name),
       });
-    }
-
     return warnings;
   }, [orphanedStatuses, unreachableStatuses, deadEndStatuses]);
+  // ─────────────────────────────────────────────────────────────────────────
 
   const [DeleteDialog, confirmDelete] = useConfirm(
     "Delete Workflow",
     "Are you sure you want to delete this workflow? This action cannot be undone.",
     "destructive"
   );
-
   const [DeleteStatusDialog, confirmDeleteStatus] = useConfirm(
     "Delete Status",
     "Are you sure? Deleting this status will also delete all transitions to/from it.",
     "destructive"
   );
-
   const [DeleteTransitionDialog, confirmDeleteTransition] = useConfirm(
     "Delete Transition",
     "Are you sure you want to delete this transition?",
     "destructive"
   );
-
   const [DisconnectDialog, confirmDisconnect] = useConfirm(
     "Disconnect Project",
     "Are you sure you want to disconnect this project from the workflow?",
     "destructive"
   );
 
-  // Dialog states
   const [statusDialogOpen, setStatusDialogOpen] = useState(false);
   const [transitionDialogOpen, setTransitionDialogOpen] = useState(false);
   const [connectProjectOpen, setConnectProjectOpen] = useState(false);
-  const [infoPanelWidth, setInfoPanelWidth] = useState(380);
-  const isResizingRef = useRef(false);
-  const startXRef = useRef(0);
-  const startWidthRef = useRef(0);
-  const [showCanvasTip, setShowCanvasTip] = useState(true);
   const [editingStatus, setEditingStatus] = useState<WorkflowStatus | null>(null);
   const [editingTransition, setEditingTransition] = useState<WorkflowTransition | null>(null);
   const [previewSuggestion, setPreviewSuggestion] = useState<WorkflowSuggestion | null>(null);
-  const [zoomLevel, setZoomLevel] = useState(100);
 
   const [nodes, setNodes, onNodesChange] = useNodesState<StatusNodeType>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<TransitionEdgeType>([]);
 
-  // React Flow instance for coordinate conversion
   const reactFlowInstance = useReactFlow();
 
-  const handlePanelResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    isResizingRef.current = true;
-    startXRef.current = e.clientX;
-    startWidthRef.current = infoPanelWidth;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!isResizingRef.current) return;
-      const delta = e.clientX - startXRef.current;
-      const rawWidth = startWidthRef.current + delta;
-      // Snap closed if dragged below 80px, otherwise clamp 200-700
-      if (rawWidth < 80) {
-        setInfoPanelWidth(0);
-      } else {
-        setInfoPanelWidth(Math.min(Math.max(rawWidth, 200), 700));
-      }
-    };
-
-    const handleMouseUp = () => {
-      isResizingRef.current = false;
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
-  }, [infoPanelWidth]);
-
-  // Use refs to avoid dependency issues in callbacks
   const workflowRef = useRef(workflow);
   workflowRef.current = workflow;
 
-  // ============ DEBOUNCED POSITION UPDATES ============
-  // Batch position updates to prevent API spam when dragging nodes
+  // ── debounced position saves ──────────────────────────────────────────────
   const pendingPositionUpdates = useRef<Map<string, { x: number; y: number }>>(new Map());
   const positionUpdateTimeout = useRef<NodeJS.Timeout | null>(null);
   const isSavingPositions = useRef(false);
 
-  // Debounced save function - batches all pending position updates
   const savePositions = useCallback(async () => {
     if (isSavingPositions.current) return;
-
     const updates = pendingPositionUpdates.current;
     if (updates.size === 0) return;
-
-    // Copy and clear pending updates
     const toSave = new Map(updates);
     pendingPositionUpdates.current.clear();
     isSavingPositions.current = true;
-
     try {
-      // Batch save all positions in parallel
       await Promise.all(
         Array.from(toSave.entries()).map(([statusId, position]) =>
           updateStatus({
             param: { workflowId, statusId },
-            json: {
-              positionX: Math.round(position.x),
-              positionY: Math.round(position.y),
-            },
-          }).catch(() => {
-            // Failed to save position
-          })
+            json: { positionX: Math.round(position.x), positionY: Math.round(position.y) },
+          }).catch(() => {})
         )
       );
     } finally {
@@ -399,360 +315,249 @@ const WorkflowEditor = () => {
     }
   }, [workflowId, updateStatus]);
 
-  // Cleanup timeout on unmount
   useEffect(() => {
     return () => {
       if (positionUpdateTimeout.current) {
         clearTimeout(positionUpdateTimeout.current);
-        // Save any pending updates before unmount
         savePositions();
       }
     };
   }, [savePositions]);
+  // ─────────────────────────────────────────────────────────────────────────
 
   const confirmDeleteStatusRef = useRef(confirmDeleteStatus);
   confirmDeleteStatusRef.current = confirmDeleteStatus;
-
   const confirmDeleteTransitionRef = useRef(confirmDeleteTransition);
   confirmDeleteTransitionRef.current = confirmDeleteTransition;
 
-  // Handle drag over for the canvas drop zone
   const onDragOver = useCallback((event: React.DragEvent) => {
     event.preventDefault();
     event.dataTransfer.dropEffect = "move";
   }, []);
 
-  // Handle drop on canvas - place status from sidebar onto canvas
   const onDrop = useCallback(
     async (event: React.DragEvent) => {
       event.preventDefault();
-
       const data = event.dataTransfer.getData("application/reactflow");
       if (!data) return;
-
       try {
         const { type, status } = JSON.parse(data);
         if (type !== "statusNode" || !status) return;
-
-        // Get the position where the node was dropped
         const reactFlowBounds = event.currentTarget.getBoundingClientRect();
         const position = reactFlowInstance.screenToFlowPosition({
           x: event.clientX - reactFlowBounds.left,
           y: event.clientY - reactFlowBounds.top,
         });
-
-        // Update the status position in the database
         await updateStatus({
           param: { workflowId, statusId: status.$id },
-          json: {
-            positionX: Math.round(position.x),
-            positionY: Math.round(position.y),
-          },
+          json: { positionX: Math.round(position.x), positionY: Math.round(position.y) },
         });
-      } catch {
-        // Failed to place status on canvas
-      }
+      } catch {}
     },
     [workflowId, updateStatus, reactFlowInstance]
   );
 
-  // Status edit/delete handlers for nodes - use refs to avoid infinite loops
   const handleNodeEdit = useCallback((statusId: string) => {
-    const status = workflowRef.current?.statuses?.find(s => s.$id === statusId);
-    if (status) {
-      setEditingStatus(status);
-      setStatusDialogOpen(true);
-    }
+    const status = workflowRef.current?.statuses?.find((s) => s.$id === statusId);
+    if (status) { setEditingStatus(status); setStatusDialogOpen(true); }
   }, []);
 
-  const handleNodeDelete = useCallback(async (statusId: string) => {
-    const ok = await confirmDeleteStatusRef.current();
-    if (!ok) return;
-    await deleteStatusMutation({
-      param: { workflowId, statusId },
-    });
-  }, [workflowId, deleteStatusMutation]);
+  const handleNodeDelete = useCallback(
+    async (statusId: string) => {
+      const ok = await confirmDeleteStatusRef.current();
+      if (!ok) return;
+      await deleteStatusMutation({ param: { workflowId, statusId } });
+    },
+    [workflowId, deleteStatusMutation]
+  );
 
-  // Transition edit/delete handlers for edges - use refs to avoid infinite loops
   const handleEdgeEdit = useCallback((transitionId: string) => {
-    const transition = workflowRef.current?.transitions?.find(t => t.$id === transitionId);
-    if (transition) {
-      setEditingTransition(transition);
-      setTransitionDialogOpen(true);
-    }
+    const transition = workflowRef.current?.transitions?.find((t) => t.$id === transitionId);
+    if (transition) { setEditingTransition(transition); setTransitionDialogOpen(true); }
   }, []);
 
-  const handleEdgeDelete = useCallback(async (transitionId: string) => {
-    const ok = await confirmDeleteTransitionRef.current();
-    if (!ok) return;
-    await deleteTransitionMutation({
-      param: { workflowId, transitionId },
-    });
-  }, [workflowId, deleteTransitionMutation]);
+  const handleEdgeDelete = useCallback(
+    async (transitionId: string) => {
+      const ok = await confirmDeleteTransitionRef.current();
+      if (!ok) return;
+      await deleteTransitionMutation({ param: { workflowId, transitionId } });
+    },
+    [workflowId, deleteTransitionMutation]
+  );
 
-  // Handle removing status from canvas (reset position to 0)
   const handleRemoveStatus = useCallback(
     async (statusId: string) => {
       try {
         await updateStatus({
           param: { workflowId, statusId },
-          json: {
-            positionX: 0,
-            positionY: 0,
-          },
+          json: { positionX: 0, positionY: 0 },
         });
-      } catch {
-        // Failed to remove status
-      }
+      } catch {}
     },
     [workflowId, updateStatus]
   );
 
-  // Convert workflow data to React Flow nodes and edges
   useEffect(() => {
-    let currentNodes = workflow?.statuses 
-      ? convertStatusesToNodes(workflow.statuses, handleNodeEdit, handleNodeDelete, handleRemoveStatus) 
+    let currentNodes = workflow?.statuses
+      ? convertStatusesToNodes(workflow.statuses, handleNodeEdit, handleNodeDelete, handleRemoveStatus)
       : [];
-    let currentEdges = workflow?.transitions 
+    let currentEdges = workflow?.transitions
       ? convertTransitionsToEdges(workflow.transitions, handleEdgeEdit, handleEdgeDelete)
       : [];
 
     if (previewSuggestion) {
-      // Offset preview nodes slightly to avoid complete overlap if they match existing names
       const previewNodes = convertStatusesToNodes(
-        previewSuggestion.statuses || [],
-        () => {}, 
-        () => {}, 
-        () => {},
-        true
+        previewSuggestion.statuses || [], () => {}, () => {}, () => {}, true
       );
-      
       const previewEdges = convertTransitionsToEdges(
-        previewSuggestion.transitions || [],
-        () => {}, 
-        () => {},
-        true
+        previewSuggestion.transitions || [], () => {}, () => {}, true
       );
-
-      // Merge preview nodes and edges
       currentNodes = [...currentNodes, ...previewNodes];
       currentEdges = [...currentEdges, ...previewEdges];
     }
 
     setNodes(currentNodes);
     setEdges(currentEdges);
-  }, [workflow?.statuses, workflow?.transitions, previewSuggestion, setNodes, setEdges, handleNodeEdit, handleNodeDelete, handleRemoveStatus, handleEdgeEdit, handleEdgeDelete]);
+  }, [
+    workflow?.statuses, workflow?.transitions, previewSuggestion,
+    setNodes, setEdges, handleNodeEdit, handleNodeDelete, handleRemoveStatus,
+    handleEdgeEdit, handleEdgeDelete,
+  ]);
 
   const handleDelete = async () => {
     const ok = await confirmDelete();
     if (!ok) return;
-
     deleteWorkflow(
       { param: { workflowId } },
-      {
-        onSuccess: () => {
-          router.push(`/workspaces/${workspaceId}/spaces/${spaceId}`);
-        },
-      }
+      { onSuccess: () => router.push(`/workspaces/${workspaceId}/spaces/${spaceId}`) }
     );
   };
 
-  // Connect project to workflow with optional resolution strategy
-  const handleConnectProject = useCallback((projectId: string, resolution?: ResolutionStrategy) => {
-    // If a resolution strategy is provided, use the sync-with-resolution endpoint
-    if (resolution) {
-      syncWithResolution({
-        param: { workflowId, projectId },
-        json: { resolution },
-      });
-      setConnectProjectOpen(false);
-      return;
-    }
-
-    // No conflict, just connect and sync
-    updateProject(
-      { param: { projectId }, form: { workflowId } },
-      {
-        onSuccess: () => {
-          setConnectProjectOpen(false);
-          syncFromProject({ param: { workflowId, projectId } });
-        }
+  const handleConnectProject = useCallback(
+    (projectId: string, resolution?: ResolutionStrategy) => {
+      if (resolution) {
+        syncWithResolution({ param: { workflowId, projectId }, json: { resolution } });
+        setConnectProjectOpen(false);
+        return;
       }
-    );
-  }, [workflowId, updateProject, syncFromProject, syncWithResolution]);
+      updateProject(
+        { param: { projectId }, form: { workflowId } },
+        {
+          onSuccess: () => {
+            setConnectProjectOpen(false);
+            syncFromProject({ param: { workflowId, projectId } });
+          },
+        }
+      );
+    },
+    [workflowId, updateProject, syncFromProject, syncWithResolution]
+  );
 
-  // Disconnect project from workflow
-  const handleDisconnectProject = useCallback(async (projectId: string) => {
-    const ok = await confirmDisconnect();
-    if (!ok) return;
-    updateProject({ param: { projectId }, form: { workflowId: "" } });
-  }, [confirmDisconnect, updateProject]);
+  const handleDisconnectProject = useCallback(
+    async (projectId: string) => {
+      const ok = await confirmDisconnect();
+      if (!ok) return;
+      updateProject({ param: { projectId }, form: { workflowId: "" } });
+    },
+    [confirmDisconnect, updateProject]
+  );
 
-  // Sync workflow statuses from project's columns
-  const handleSyncFromProject = useCallback((projectId: string) => {
-    syncFromProject({ param: { workflowId, projectId } });
-  }, [workflowId, syncFromProject]);
+  const handleSyncFromProject = useCallback(
+    (projectId: string) => syncFromProject({ param: { workflowId, projectId } }),
+    [workflowId, syncFromProject]
+  );
 
-  // Handle new connection (transition) creation
   const onConnect = useCallback(
     async (connection: Connection) => {
       if (!connection.source || !connection.target) return;
-
       try {
         await createTransition({
           param: { workflowId },
-          json: {
-            fromStatusId: connection.source,
-            toStatusId: connection.target,
-          },
+          json: { fromStatusId: connection.source, toStatusId: connection.target },
         });
-      } catch {
-        // Failed to create transition
-      }
+      } catch {}
     },
     [workflowId, createTransition]
   );
 
-  // Handle node position change (drag) - DEBOUNCED to prevent API spam
   const onNodeDragStop = useCallback(
     (_event: React.MouseEvent, node: Node<StatusNodeData>) => {
-      // Add to pending updates (will batch multiple drags)
-      pendingPositionUpdates.current.set(node.id, {
-        x: node.position.x,
-        y: node.position.y,
-      });
-
-      // Clear existing timeout
-      if (positionUpdateTimeout.current) {
-        clearTimeout(positionUpdateTimeout.current);
-      }
-
-      // Set new timeout to batch save (500ms debounce)
-      // This waits until user stops dragging for 500ms before saving
-      positionUpdateTimeout.current = setTimeout(() => {
-        savePositions();
-      }, 500);
+      pendingPositionUpdates.current.set(node.id, { x: node.position.x, y: node.position.y });
+      if (positionUpdateTimeout.current) clearTimeout(positionUpdateTimeout.current);
+      positionUpdateTimeout.current = setTimeout(() => savePositions(), 500);
     },
     [savePositions]
   );
 
-  // Status handlers
-  const handleAddStatus = () => {
-    setEditingStatus(null);
-    setStatusDialogOpen(true);
-  };
+  const handleAddStatus = () => { setEditingStatus(null); setStatusDialogOpen(true); };
 
   const handleSaveStatus = async (data: Partial<WorkflowStatus>) => {
     if (editingStatus) {
       await updateStatus({
         param: { workflowId, statusId: editingStatus.$id },
-        json: {
-          ...data,
-          description: data.description ?? undefined,
-        } as z.infer<typeof updateWorkflowStatusSchema>,
+        json: { ...data, description: data.description ?? undefined } as z.infer<typeof updateWorkflowStatusSchema>,
       });
     } else {
-      // Calculate position for new status
       const lastNode = nodes[nodes.length - 1];
       const positionX = lastNode ? lastNode.position.x + 250 : 100;
       const positionY = lastNode ? lastNode.position.y : 100;
-
       await createStatus({
         param: { workflowId },
-        json: {
-          ...data,
-          positionX,
-          positionY,
-          description: data.description ?? undefined,
-        } as z.infer<typeof createWorkflowStatusSchema>,
+        json: { ...data, positionX, positionY, description: data.description ?? undefined } as z.infer<typeof createWorkflowStatusSchema>,
       });
     }
     setStatusDialogOpen(false);
     setEditingStatus(null);
   };
 
-  // Transition handlers
   const handleSaveTransition = async (data: Partial<WorkflowTransition>) => {
     if (editingTransition) {
       await updateTransition({
         param: { workflowId, transitionId: editingTransition.$id },
-        json: {
-          ...data,
-          description: data.description ?? undefined,
-        } as z.infer<typeof updateWorkflowTransitionSchema>,
+        json: { ...data, description: data.description ?? undefined } as z.infer<typeof updateWorkflowTransitionSchema>,
       });
     }
     setTransitionDialogOpen(false);
     setEditingTransition(null);
   };
 
-  // AI handlers - create status from AI suggestion
   const handleAICreateStatus = useCallback(
     async (suggestion: StatusSuggestion) => {
-      // Calculate position for new status
       const lastNode = nodes[nodes.length - 1];
       const positionX = lastNode ? lastNode.position.x + 250 : 100;
       const positionY = lastNode ? lastNode.position.y : 100;
-
-      // Sanitize key for consistency
       const sanitizedKey = suggestion.key.trim().toUpperCase().replace(/[\s-]+/g, "_");
-
-      // Check if status already exists by key
-      const existingStatus = workflow?.statuses?.find(s => s.key === sanitizedKey);
-      if (existingStatus) {
-        console.log(`Status with key ${sanitizedKey} already exists, skipping creation.`);
-        return;
-      }
-
+      const existingStatus = workflow?.statuses?.find((s) => s.key === sanitizedKey);
+      if (existingStatus) return;
       await createStatus({
         param: { workflowId },
         json: {
-          name: suggestion.name,
-          key: sanitizedKey,
-          statusType: suggestion.statusType as StatusType,
-          color: suggestion.color,
-          isInitial: suggestion.isInitial || false,
-          isFinal: suggestion.isFinal || false,
-          description: suggestion.description || "",
-          positionX,
-          positionY,
+          name: suggestion.name, key: sanitizedKey,
+          statusType: suggestion.statusType as StatusType, color: suggestion.color,
+          isInitial: suggestion.isInitial || false, isFinal: suggestion.isFinal || false,
+          description: suggestion.description || "", positionX, positionY,
         },
       });
     },
     [workflowId, createStatus, nodes, workflow?.statuses]
   );
 
-  // AI handlers - create transition from AI suggestion
   const handleAICreateTransition = useCallback(
     async (suggestion: TransitionSuggestion) => {
-      // Sanitize keys for consistency
       const fromStatusKey = suggestion.fromStatusKey.trim().toUpperCase().replace(/[\s-]+/g, "_");
       const toStatusKey = suggestion.toStatusKey.trim().toUpperCase().replace(/[\s-]+/g, "_");
-
-      // Find status IDs from keys
-      const fromStatus = workflow?.statuses?.find(s => s.key === fromStatusKey);
-      const toStatus = workflow?.statuses?.find(s => s.key === toStatusKey);
-
-      if (!fromStatus || !toStatus) {
-        return;
-      }
-
-      // Check if transition already exists
+      const fromStatus = workflow?.statuses?.find((s) => s.key === fromStatusKey);
+      const toStatus = workflow?.statuses?.find((s) => s.key === toStatusKey);
+      if (!fromStatus || !toStatus) return;
       const existingTransition = workflow?.transitions?.find(
-        t => t.fromStatusId === fromStatus.$id && t.toStatusId === toStatus.$id
+        (t) => t.fromStatusId === fromStatus.$id && t.toStatusId === toStatus.$id
       );
-      if (existingTransition) {
-        console.log(`Transition already exists, skipping creation.`);
-        return;
-      }
-
+      if (existingTransition) return;
       await createTransition({
         param: { workflowId },
         json: {
-          fromStatusId: fromStatus.$id,
-          toStatusId: toStatus.$id,
-          name: suggestion.name || "",
-          requiresApproval: suggestion.requiresApproval || false,
+          fromStatusId: fromStatus.$id, toStatusId: toStatus.$id,
+          name: suggestion.name || "", requiresApproval: suggestion.requiresApproval || false,
         },
       });
     },
@@ -762,16 +567,11 @@ const WorkflowEditor = () => {
   const handleApplyFullWorkflow = useCallback(
     async (suggestion: WorkflowSuggestion) => {
       if (suggestion.statuses) {
-        for (const s of suggestion.statuses) {
-          await handleAICreateStatus(s);
-        }
+        for (const s of suggestion.statuses) await handleAICreateStatus(s);
       }
       if (suggestion.transitions) {
-        // Delay transitions slightly to ensure statuses are created
         setTimeout(async () => {
-          for (const t of suggestion.transitions) {
-            await handleAICreateTransition(t);
-          }
+          for (const t of suggestion.transitions) await handleAICreateTransition(t);
         }, 500);
       }
       toast.success(`Applied workflow update: ${suggestion.name || "Custom"}`);
@@ -779,32 +579,26 @@ const WorkflowEditor = () => {
     [handleAICreateStatus, handleAICreateTransition]
   );
 
-  // Redirect if workflow not found
   useEffect(() => {
     if (!workflowLoading && !workflow) {
       router.push(`/workspaces/${workspaceId}/spaces/${spaceId}`);
     }
   }, [workflowLoading, workflow, router, workspaceId, spaceId]);
 
-  if (workflowLoading) {
-    return <PageLoader />;
-  }
-
-  if (!workflow) {
-    return <PageLoader />;
-  }
+  if (workflowLoading) return <PageLoader />;
+  if (!workflow) return <PageLoader />;
 
   const statuses = workflow.statuses || [];
   const transitions = workflow.transitions || [];
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)]">
+    // ── Full-bleed container: fills the space left by app sidebar + topbar ──
+    <div className="relative w-full p-0 h-[calc(100vh-4.5rem)] overflow-hidden">
       <DeleteDialog />
       <DeleteStatusDialog />
       <DeleteTransitionDialog />
       <DisconnectDialog />
 
-      {/* Connect Project Dialog */}
       <ConnectProjectDialog
         open={connectProjectOpen}
         onOpenChange={setConnectProjectOpen}
@@ -814,115 +608,323 @@ const WorkflowEditor = () => {
         onConnect={handleConnectProject}
       />
 
-      {/* Header */}
-      <div className="flex flex-col gap-4 p-4 border-b bg-background shrink-0">
-        <div className="flex items-center gap-4">
-          <Link href={`/workspaces/${workspaceId}/spaces/${spaceId}`}>
-            <Button variant="ghost" size="icon">
-              <ArrowLeft className="size-4" />
-            </Button>
-          </Link>
-          <Separator orientation="vertical" className="h-6" />
-          <div className="flex items-center gap-3">
-            <div className="p-2 rounded-lg bg-primary/10">
-              <GitBranch className="size-5 text-primary" />
-            </div>
-            <div>
-              <div className="flex items-center gap-2">
-                <h1 className="text-xl font-semibold">{workflow.name}</h1>
-                {workflow.isDefault && (
-                  <Badge variant="secondary" className="text-xs">Default</Badge>
-                )}
-                {workflow.isSystem && (
-                  <Badge variant="outline" className="text-xs">System</Badge>
-                )}
+      {/* ── Full-bleed ReactFlow canvas ─────────────────────────────────── */}
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onNodeDragStop={onNodeDragStop}
+        onDrop={onDrop}
+        onDragOver={onDragOver}
+        onMove={(_, viewport) => setZoomLevel(Math.round(viewport.zoom * 100))}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        fitView
+        fitViewOptions={{ padding: 0.4, maxZoom: 0.8 }}
+        minZoom={0.2}
+        maxZoom={2}
+        defaultEdgeOptions={{ type: "transitionEdge", animated: true }}
+        connectionLineStyle={{ stroke: "#3B82F6", strokeWidth: 2, strokeDasharray: "5,5" }}
+        proOptions={{ hideAttribution: true }}
+       className="w-full h-full bg-background"
+
+      >
+<Background variant={BackgroundVariant.Dots} gap={20} size={1} />
+        {/* <Controls showInteractive={false} /> */}
+<MiniMap
+  nodeStrokeWidth={3}
+  zoomable
+  pannable
+  className="!border-border !left-4 !right-auto !bottom-4"
+  nodeStrokeColor="hsl(var(--border))"
+/>
+
+        <Panel position="bottom-center" className="!bottom-5">
+<div className="flex items-center gap-1 rounded-lg border bg-background/90 backdrop-blur-xl shadow-xl p-1">    <Button
+      variant="ghost"
+      size="icon"
+      className="rounded-xl size-9"
+      onClick={() => reactFlowInstance.zoomIn()}
+    >
+      +
+    </Button>
+
+    <Separator orientation="vertical" className="h-6" />
+
+    <Button
+      variant="ghost"
+      size="icon"
+      className="rounded-xl size-9"
+      onClick={() => reactFlowInstance.zoomOut()}
+    >
+      −
+    </Button>
+
+    <Separator orientation="vertical" className="h-6" />
+
+    <div className="px-3 text-sm font-medium min-w-[60px] text-center">
+      {zoomLevel}%
+    </div>
+
+    <Separator orientation="vertical" className="h-6" />
+
+    <Button
+      variant="ghost"
+      size="icon"
+      className="rounded-xl size-9"
+      onClick={() => reactFlowInstance.fitView({ padding: 0.4 })}
+    >
+      ⌂
+    </Button>
+  </div>
+</Panel>
+
+     
+
+        {/* Legend */}
+<Panel position="top-left" className="!top-[5.5rem] !left-4">
+            <Card className="px-3 py-2 shadow-md bg-background/90 backdrop-blur-sm">
+            <div className="flex items-center gap-3 text-xs">
+              <div className="flex items-center gap-1.5">
+                <div className="w-2.5 h-2.5 rounded-full bg-gray-500" />
+                <span>To Do</span>
               </div>
-              <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                {workflow.description && (
-                  <span>{workflow.description}</span>
-                )}
-                {connectedProjects.length > 0 && (
-                  <>
-                    {workflow.description && <span>•</span>}
-                    <span>Used by: {connectedProjects.slice(0, 3).map(p => p.name).join(", ")}
-                      {connectedProjects.length > 3 && ` +${connectedProjects.length - 3} more`}
-                    </span>
-                  </>
-                )}
+              <Separator orientation="vertical" className="h-3" />
+              <div className="flex items-center gap-1.5">
+                <div className="w-2.5 h-2.5 rounded-full bg-blue-500" />
+                <span>In Progress</span>
+              </div>
+              <Separator orientation="vertical" className="h-3" />
+              <div className="flex items-center gap-1.5">
+                <div className="w-2.5 h-2.5 rounded-full bg-green-500" />
+                <span>Done</span>
               </div>
             </div>
-          </div>
-          <div className="flex-1" />
-          <div className="flex items-center gap-2">
-            <Badge variant="outline" className="text-xs">
-              {transitions.length} transitions
-            </Badge>
-            <Badge variant="outline" className="text-xs">
-              {projects.filter(p => p.workflowId === workflowId).length} projects
-            </Badge>
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            asChild
-          >
+          </Card>
+        </Panel>
+
+        {/* Canvas tip */}
+        {showCanvasTip && (
+<Panel position="top-left" className="!top-[9.5rem] !left-4">
+              <Card className="relative !p-3 max-w-[220px] !bg-primary/6 !border !border-primary/10 shadow-md bg-background/90 backdrop-blur-sm">
+              <button
+                onClick={() => setShowCanvasTip(false)}
+                aria-label="Dismiss tip"
+                className="absolute top-1.5 right-1.5 p-0.5 rounded hover:bg-primary/10 transition-colors"
+              >
+                <X className="size-3.5 text-primary" />
+              </button>
+              <p className="text-[11px] text-primary leading-snug pr-4">
+                💡 <strong>Tip:</strong> Drag from one status to another to create transitions. Click the transition label then the Edit icon to set approval rules.
+              </p>
+            </Card>
+          </Panel>
+        )}
+
+        {/* AI preview card */}
+        {previewSuggestion && (
+          <Panel position="bottom-left" className="!bottom-12 !left-4">
+            <Card className="p-3 shadow-xl border-purple-200 bg-background/95 backdrop-blur-sm animate-in fade-in slide-in-from-bottom-4 duration-300">
+              <div className="flex items-center gap-3">
+                <div className="p-1.5 rounded-md bg-purple-100">
+                  <Sparkles className="size-4 text-purple-600" />
+                </div>
+                <div>
+                  <h4 className="text-sm font-semibold">Preview Mode</h4>
+                  <p className="text-[10px] text-muted-foreground">AI Suggestion</p>
+                </div>
+                <div className="flex items-center gap-2 ml-2">
+                  <Button
+                    size="sm"
+                    className="h-7 px-3 text-xs bg-purple-600 hover:bg-purple-700"
+                    onClick={() => { handleApplyFullWorkflow(previewSuggestion); setPreviewSuggestion(null); }}
+                  >
+                    Apply All
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="h-7 px-3 text-xs"
+                    onClick={() => setPreviewSuggestion(null)}
+                  >
+                    Exit
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          </Panel>
+        )}
+
+        {/* Empty state */}
+        {statuses.length === 0 && (
+          <Panel position="top-center" className="!top-1/2 !-translate-y-1/2">
+            <Card className="p-6 text-center shadow-lg bg-background/95 backdrop-blur-sm">
+              <GitBranch className="size-12 text-muted-foreground mx-auto mb-3" />
+              <h3 className="font-medium mb-2">No Statuses Yet</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Add statuses to define workflow stages, then connect them with transitions.
+              </p>
+              {isAdmin && (
+                <Button onClick={handleAddStatus}>
+                  <Plus className="size-4 mr-2" />
+                  Add First Status
+                </Button>
+              )}
+            </Card>
+          </Panel>
+        )}
+      </ReactFlow>
+
+      {/* ── Floating workflow header bar ────────────────────────────────── */}
+      {/*
+          Positioned absolutely at the top, full width.
+          Uses backdrop-blur so the canvas shows through.
+      */}
+      <div
+       className="
+  absolute top-5 left-0 right-0 z-30 flex items-center gap-3 px-4 py-2.5 mx-5 rounded-xl bg-background/95 backdrop-blur-xl shadow-sm border
+"
+      >
+      
+
+        {/* Workflow identity */}
+        <div className="flex items-center gap-1 ">
+
+            {/* Back */}
+        <Link href={`/workspaces/${workspaceId}/spaces/${spaceId}`}>
+          <Button variant="ghost" size="icon" className="shrink-0">
+            <ArrowLeft className="size-4" />
+          </Button>
+        </Link>
+
+           <h1 className="text-sm font-medium ">{workflow.name}</h1>
+
+
+        </div>
+
+        <div className="flex-1" />
+
+        {/* Stats + actions */}
+        <div className="flex items-center gap-2 shrink-0">
+          <Badge variant="outline" className="text-xs font-medium rounded-md hidden sm:flex">
+            {transitions.length} transitions
+          </Badge>
+          <Badge variant="outline" className="text-xs font-medium rounded-md hidden sm:flex">
+            {projects.filter((p) => p.workflowId === workflowId).length} projects
+          </Badge>
+
+                    <Separator orientation="vertical" className="h-5 mx-1" />
+
+
+          <Button variant="outline" size="xs" asChild>
             <Link href={`/workspaces/${workspaceId}/workflow-guide`}>
-              <BookOpen className="size-4 mr-2" />
-              Workflow Guide
+              <BookOpen className="size-2 !font-medium" />
+              <span className="hidden md:inline !font-medium">Workflow Guide</span>
             </Link>
           </Button>
           {isAdmin && !workflow.isSystem && (
             <>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleAddStatus}
-              >
-                <Plus className="size-4 mr-2" />
+              <Button variant="outline" size="xs" className="!font-medium" onClick={handleAddStatus}>
+                <Plus className="size-2 !font-medium" />
                 Add Status
               </Button>
+
+                        <Separator orientation="vertical" className="h-5 mx-1" />
+
               <Button
                 variant="destructive"
-                size="sm"
+                size="xs"
+                className="size-8"
                 onClick={handleDelete}
                 disabled={isDeleting}
               >
-                <Trash2 className="size-4" />
+                <Trash2 className="size-2" />
               </Button>
             </>
           )}
+
+          {/* Toggle side panel */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-8 text-muted-foreground hover:text-foreground"
+            onClick={() => setPanelOpen((o) => !o)}
+            title={panelOpen ? "Hide panel" : "Show panel"}
+          >
+            {panelOpen ? <ChevronRight className="size-4" /> : <ChevronLeft className="size-4" />}
+          </Button>
         </div>
       </div>
 
-      {/* Main Content with Info Panel */}
-      <div className="flex-1 flex overflow-hidden">
-        {/* Info Panel with Tabs */}
-        <div
-          className="border-r bg-background shrink-0 overflow-hidden flex flex-col"
-          style={{ width: `${infoPanelWidth}px` }}
-        >
-            <Tabs defaultValue="builder" className="flex flex-col h-full">
-              {/* Tab Headers */}
-              <div className="border-b px-3 pt-3 pb-0 shrink-0">
-                <TabsList className="grid w-full grid-cols-2 h-9">
-                  <TabsTrigger value="builder" className="text-xs gap-1.5">
-                    <Layers className="h-3.5 w-3.5" />
-                    Builder
-                  </TabsTrigger>
-                  <TabsTrigger value="ai" className="text-xs gap-1.5">
-                    <Sparkles className="h-3.5 w-3.5" />
-                    AI Assistant
-                  </TabsTrigger>
-                </TabsList>
-              </div>
+      {/* ── Floating side panel ─────────────────────────────────────────── */}
+      {/*
+          Positioned absolutely on the right, below the floating header.
+          Slides in/out with a CSS transition.
+          Does NOT affect canvas width — canvas always stays full-bleed.
+      */}
+     <div
+className="
+  absolute top-[88px] right-5 bottom-5 z-20
+  flex flex-col
+  rounded-xl
+  border
+  bg-background/80
+  backdrop-blur-2xl
+  shadow-[0_4px_30px_rgba(0,0,0,0.06)] dark:shadow-[0_4px_30px_rgba(0,0,0,0.35)]
+  transition-all duration-300 ease-in-out
+  overflow-hidden
+"
+  style={{
+  width: panelOpen ? `${PANEL_WIDTH}px` : "0px",
+  boxShadow: "0 10px 40px rgba(0,0,0,0.06)"
+}}
+>
+        {/* Inner wrapper keeps content at full width so it doesn't squish during animation */}
+        <div className="flex flex-col h-full" style={{ width: `${PANEL_WIDTH}px` }}>
+          <Tabs defaultValue="builder" className="flex flex-col h-full">
+            {/* Tab headers */}
+<div className="px-4 pt-4 pb-2 shrink-0">
+<TabsList className="grid w-full grid-cols-2 h-11 rounded-xl bg-black/[0.03] dark:bg-white/[0.04] p-1">                <TabsTrigger value="builder" className="
+  text-xs gap-1.5 rounded-lg py-1
+  data-[state=active]:bg-blue-600/10
+  data-[state=active]:text-blue-600
+  data-[state=active]:shadow-sm
+  data-[state=active]:border
+  border-transparent 
+  transition-all
+">
+                  <Layers className="h-3.5 w-3.5" />
+                  Builder
+                </TabsTrigger>
+                <TabsTrigger value="ai" className="
+  text-xs gap-1.5 rounded-lg py-1
+ data-[state=active]:bg-blue-600/10
+  data-[state=active]:text-blue-600
+   data-[state=active]:shadow-sm
+  data-[state=active]:border
+  border-transparent
+  transition-all
+">
+                  <Sparkles className="h-3.5 w-3.5" />
+                  AI Assistant
+                </TabsTrigger>
+              </TabsList>
+            </div>
 
-              {/* Builder Tab Content */}
-              <TabsContent value="builder" className="flex-1 overflow-y-auto m-0 data-[state=inactive]:hidden">
-                <div className="p-4">
-                  {/* Workflow Warnings */}
-                  {workflowWarnings.length > 0 && (
-                    <div className="mb-4 space-y-2">
-                      {workflowWarnings.filter(w => !dismissedWarnings.has(w.type)).map((warning, index) => (
+            {/* Builder tab */}
+            <TabsContent
+              value="builder"
+              className="flex-1 overflow-y-auto m-0 mt-2 data-[state=inactive]:hidden"
+            >
+              <div className="px-4 pb-4 pt-2">
+                {/* Warnings */}
+                {workflowWarnings.length > 0 && (
+                  <div className="mb-4 space-y-2">
+                    {workflowWarnings
+                      .filter((w) => !dismissedWarnings.has(w.type))
+                      .map((warning, index) => (
                         <div
                           key={index}
                           className="p-3 bg-yellow-50 dark:bg-yellow-950/30 border border-yellow-200 dark:border-yellow-800/50 rounded-lg"
@@ -938,7 +940,9 @@ const WorkflowEditor = () => {
                               </p>
                             </div>
                             <button
-                              onClick={() => setDismissedWarnings(prev => new Set([...prev, warning.type]))}
+                              onClick={() =>
+                                setDismissedWarnings((prev) => new Set([...prev, warning.type]))
+                              }
                               className="p-1 rounded-md hover:bg-yellow-200/50 dark:hover:bg-yellow-800/30 transition-colors"
                               aria-label="Dismiss warning"
                             >
@@ -947,217 +951,51 @@ const WorkflowEditor = () => {
                           </div>
                         </div>
                       ))}
-                    </div>
-                  )}
-
-                  <WorkflowSimpleView
-                    workflow={workflow as PopulatedWorkflow}
-                    projects={projects}
-                    workspaceId={workspaceId}
-                    spaceId={spaceId}
-                    isAdmin={isAdmin}
-                    onConnectProject={() => setConnectProjectOpen(true)}
-                    onDisconnectProject={handleDisconnectProject}
-                    onSyncFromProject={handleSyncFromProject}
-                    isSyncing={isSyncing}
-                    onRemoveStatus={handleRemoveStatus}
-                  />
-                </div>
-              </TabsContent>
+                  </div>
+                )}
 
-              {/* AI Assistant Tab Content */}
-              <TabsContent value="ai" className="flex-1 overflow-hidden m-0 data-[state=inactive]:hidden">
-                <WorkflowAIChat
-                  workflowId={workflowId}
+                <WorkflowSimpleView
+                  workflow={workflow as PopulatedWorkflow}
+                  projects={projects}
                   workspaceId={workspaceId}
-                  onCreateStatus={handleAICreateStatus}
-                  onCreateTransition={handleAICreateTransition}
-                  onPreview={(suggestion) => {
-                    if ("statuses" in suggestion || "transitions" in suggestion) {
-                      setPreviewSuggestion(suggestion as WorkflowSuggestion);
-                    } else if ("statusType" in suggestion) {
-                      setPreviewSuggestion({ 
-                        statuses: [suggestion as StatusSuggestion], 
-                        transitions: [] 
-                      });
-                    } else {
-                      setPreviewSuggestion({ 
-                        statuses: [], 
-                        transitions: [suggestion as TransitionSuggestion] 
-                      });
-                    }
-                  }}
-                  onApplyFullWorkflow={handleApplyFullWorkflow}
+                  spaceId={spaceId}
+                  isAdmin={isAdmin}
+                  onConnectProject={() => setConnectProjectOpen(true)}
+                  onDisconnectProject={handleDisconnectProject}
+                  onSyncFromProject={handleSyncFromProject}
+                  isSyncing={isSyncing}
+                  onRemoveStatus={handleRemoveStatus}
                 />
-              </TabsContent>
-            </Tabs>
-          </div>
-
-        {/* Resize Handle */}
-        {infoPanelWidth > 0 ? (
-          <div
-            onMouseDown={handlePanelResizeStart}
-            className="w-1.5 bg-border hover:bg-primary/50 active:bg-primary/50 transition-colors cursor-col-resize flex items-center justify-center group shrink-0"
-          >
-            <GripVertical className="size-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
-          </div>
-        ) : (
-          <div className="border-r bg-background flex flex-col items-center py-3 shrink-0">
-            <button
-              onMouseDown={handlePanelResizeStart}
-              onClick={() => setInfoPanelWidth(380)}
-              className="p-1.5 rounded-md hover:bg-muted transition-colors"
-              title="Show panel (or drag right)"
-            >
-              <PanelLeft className="size-4 text-muted-foreground hover:text-foreground" />
-            </button>
-          </div>
-        )}
+              </div>
+            </TabsContent>
 
-        {/* Editor */}
-        <div className="flex-1 relative">
-          <ReactFlow
-            nodes={nodes}
-            edges={edges}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            onConnect={onConnect}
-            onNodeDragStop={onNodeDragStop}
-            onDrop={onDrop}
-            onDragOver={onDragOver}
-            onMove={(_, viewport) => setZoomLevel(Math.round(viewport.zoom * 100))}
-            nodeTypes={nodeTypes}
-            edgeTypes={edgeTypes}
-            fitView
-            fitViewOptions={{ padding: 0.4, maxZoom: 0.8 }}
-            minZoom={0.2}
-            maxZoom={2}
-            defaultEdgeOptions={{
-              type: "transitionEdge",
-              animated: true,
-            }}
-            connectionLineStyle={{
-              stroke: "#3B82F6",
-              strokeWidth: 2,
-              strokeDasharray: "5,5",
-            }}
-            proOptions={{ hideAttribution: true }}
-            className="bg-muted/30"
-          >
-            <Background variant={BackgroundVariant.Dots} gap={20} size={1} />
-            <Controls showInteractive={false} />
-            <MiniMap
-              nodeStrokeWidth={3}
-              zoomable
-              pannable
-              className="!bg-background/80 !border-border !right-3 !bottom-3"
-            />
-
-            {/* Zoom Indicator - moved to top-left next to Controls */}
-            <Panel position="top-left" className="!top-14 !left-3 !z-50 flex flex-col gap-2">
-              <Badge variant="secondary" className="text-xs font-mono !bg-primary/7 !text-primary !border-primary/10">
-                {zoomLevel}%
-              </Badge>
-              
-              {previewSuggestion && (
-                <Card className="p-3 shadow-xl border-purple-200 bg-background/95 backdrop-blur-sm animate-in fade-in slide-in-from-left-4 duration-300">
-                  <div className="flex flex-col gap-3">
-                    <div className="flex items-center gap-2">
-                      <div className="p-1.5 rounded-md bg-purple-100">
-                        <Sparkles className="size-4 text-purple-600" />
-                      </div>
-                      <div>
-                        <h4 className="text-sm font-semibold">Preview Mode</h4>
-                        <p className="text-[10px] text-muted-foreground">AI Suggestion</p>
-                      </div>
-                    </div>
-                    
-                    <div className="flex items-center gap-2">
-                      <Button 
-                        size="sm" 
-                        className="h-8 px-3 text-xs bg-purple-600 hover:bg-purple-700"
-                        onClick={() => {
-                          handleApplyFullWorkflow(previewSuggestion);
-                          setPreviewSuggestion(null);
-                        }}
-                      >
-                        Apply All
-                      </Button>
-                      <Button 
-                        size="sm" 
-                        variant="outline" 
-                        className="h-8 px-3 text-xs"
-                        onClick={() => setPreviewSuggestion(null)}
-                      >
-                        Exit Preview
-                      </Button>
-                    </div>
-                  </div>
-                </Card>
-              )}
-            </Panel>
-
-            <Panel position="top-right" className="flex gap-2">
-              <Card className="p-2">
-                <div className="flex items-center gap-2 text-xs">
-                  <div className="flex items-center gap-1">
-                    <div className="w-2.5 h-2.5 rounded-full bg-gray-500" />
-                    <span>To Do</span>
-                  </div>
-                  <Separator orientation="vertical" className="h-3" />
-                  <div className="flex items-center gap-1">
-                    <div className="w-2.5 h-2.5 rounded-full bg-blue-500" />
-                    <span>In Progress</span>
-                  </div>
-                  <Separator orientation="vertical" className="h-3" />
-                  <div className="flex items-center gap-1">
-                    <div className="w-2.5 h-2.5 rounded-full bg-green-500" />
-                    <span>Done</span>
-                  </div>
-                </div>
-              </Card>
-            </Panel>
-
-            {/* Help Tip - moved and restyled */}
-            {showCanvasTip && (
-              <Panel position="top-right" className="!top-20 !right-2 !z-40">
-                <Card className="relative p-2 max-w-[220px] !bg-primary/6 !border !border-primary/10 shadow-md">
-                  <button
-                    onClick={() => setShowCanvasTip(false)}
-                    aria-label="Dismiss canvas tip"
-                    className="absolute top-1 right-1 p-1 rounded hover:bg-primary/10 transition-colors"
-                  >
-                    <X className="size-4 text-primary" />
-                  </button>
-                  <p className="text-[12px] text-primary leading-snug">
-                    💡 <strong>Tip:</strong> Drag from one status to another to create transitions. Click the transition label then the Edit icon to set approval rules.
-                  </p>
-                </Card>
-              </Panel>
-            )}
-
-            {statuses.length === 0 && (
-              <Panel position="top-center" className="!top-1/2 !-translate-y-1/2">
-                <Card className="p-6 text-center">
-                  <GitBranch className="size-12 text-muted-foreground mx-auto mb-3" />
-                  <h3 className="font-medium mb-2">No Statuses Yet</h3>
-                  <p className="text-sm text-muted-foreground mb-4">
-                    Add statuses to define workflow stages, then connect them with transitions.
-                  </p>
-                  {isAdmin && (
-                    <Button onClick={handleAddStatus}>
-                      <Plus className="size-4 mr-2" />
-                      Add First Status
-                    </Button>
-                  )}
-                </Card>
-              </Panel>
-            )}
-          </ReactFlow>
+            {/* AI tab */}
+            <TabsContent
+              value="ai"
+              className="flex-1 overflow-hidden m-0 data-[state=inactive]:hidden"
+            >
+              <WorkflowAIChat
+                workflowId={workflowId}
+                workspaceId={workspaceId}
+                onCreateStatus={handleAICreateStatus}
+                onCreateTransition={handleAICreateTransition}
+                onPreview={(suggestion) => {
+                  if ("statuses" in suggestion || "transitions" in suggestion) {
+                    setPreviewSuggestion(suggestion as WorkflowSuggestion);
+                  } else if ("statusType" in suggestion) {
+                    setPreviewSuggestion({ statuses: [suggestion as StatusSuggestion], transitions: [] });
+                  } else {
+                    setPreviewSuggestion({ statuses: [], transitions: [suggestion as TransitionSuggestion] });
+                  }
+                }}
+                onApplyFullWorkflow={handleApplyFullWorkflow}
+              />
+            </TabsContent>
+          </Tabs>
         </div>
       </div>
 
-      {/* Dialogs */}
+      {/* ── Dialogs ─────────────────────────────────────────────────────── */}
       <StatusEditDialog
         open={statusDialogOpen}
         onOpenChange={setStatusDialogOpen}
@@ -1181,10 +1019,8 @@ const WorkflowEditor = () => {
 };
 
 // Wrap with ReactFlowProvider for useReactFlow hooks
-export const WorkflowDetailClient = () => {
-  return (
-    <ReactFlowProvider>
-      <WorkflowEditor />
-    </ReactFlowProvider>
-  );
-};
\ No newline at end of file
+export const WorkflowDetailClient = () => (
+  <ReactFlowProvider>
+    <WorkflowEditor />
+  </ReactFlowProvider>
+);
\ No newline at end of file
diff --git a/src/app/(dashboard)/workspaces/[workspaceId]/workflow-guide/client.tsx b/src/app/(dashboard)/workspaces/[workspaceId]/workflow-guide/client.tsx
index d182d07e..48012bfd 100644
--- a/src/app/(dashboard)/workspaces/[workspaceId]/workflow-guide/client.tsx
+++ b/src/app/(dashboard)/workspaces/[workspaceId]/workflow-guide/client.tsx
@@ -28,16 +28,13 @@ import {
   ShieldCheck,
   Info,
   Settings,
-  Workflow,
   ChevronRight,
-  Play,
   Target,
   Lightbulb,
 } from "lucide-react";
 
 import { useWorkspaceId } from "@/features/workspaces/hooks/use-workspace-id";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -48,13 +45,12 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { cn } from "@/lib/utils";
 
 // Status type colors and labels
 const STATUS_TYPES = {
-  OPEN: { color: "#6B7280", bgColor: "bg-gray-100", label: "Open", description: "Work not yet started" },
-  IN_PROGRESS: { color: "#3B82F6", bgColor: "bg-blue-100", label: "In Progress", description: "Work is being done" },
-  CLOSED: { color: "#10B981", bgColor: "bg-green-100", label: "Closed", description: "Work completed" },
+  OPEN: { color: "#6B7280", label: "Open", description: "Work not yet started" },
+  IN_PROGRESS: { color: "#3B82F6", label: "In Progress", description: "Work is being done" },
+  CLOSED: { color: "#10B981", label: "Closed", description: "Work completed" },
 };
 
 // Icon component mapper
@@ -74,112 +70,53 @@ const IconMap: Record<string, React.ElementType> = {
 };
 
 // Mini workflow diagram component
-const MiniWorkflowDiagram = ({ 
-  statuses, 
+const MiniWorkflowDiagram = ({
+  statuses,
   transitions,
   title,
   description,
-}: { 
+}: {
   statuses: Array<{ name: string; icon: string; color: string; statusType: keyof typeof STATUS_TYPES }>;
   transitions: Array<{ from: number; to: number; name?: string }>;
   title: string;
   description: string;
 }) => {
   return (
-    <Card className="overflow-hidden">
-      <CardHeader className="pb-3">
-        <CardTitle className="text-lg flex items-center gap-2">
-          <GitBranch className="size-5" />
-          {title}
-        </CardTitle>
-        <CardDescription>{description}</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="relative p-4 bg-muted/30 rounded-lg overflow-x-auto">
-          <div className="flex items-center justify-start gap-4 min-w-max">
-            {statuses.map((status, index) => {
-              const Icon = IconMap[status.icon] || Circle;
-              const typeInfo = STATUS_TYPES[status.statusType];
-              
-              return (
-                <div key={index} className="flex items-center gap-2">
-                  {/* Status Node */}
-                  <div 
-                    className="flex flex-col items-center p-3 bg-background rounded-lg border-2 shadow-sm min-w-[100px]"
-                    style={{ borderColor: status.color }}
-                  >
-                    <div 
-                      className="p-2 rounded-full mb-2"
-                      style={{ backgroundColor: `${status.color}20` }}
-                    >
-                      <Icon className="size-5" style={{ color: status.color }} />
-                    </div>
-                    <span className="text-xs font-medium text-center">{status.name}</span>
-                    <Badge 
-                      variant="secondary" 
-                      className={cn("text-[10px] mt-1", typeInfo.bgColor)}
-                    >
-                      {typeInfo.label}
-                    </Badge>
-                  </div>
-                  
-                  {/* Arrow to next status */}
-                  {index < statuses.length - 1 && (
-                    <div className="flex items-center">
-                      <ArrowRight className="size-5 text-muted-foreground" />
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-          
-          {/* Transitions legend */}
-          <div className="mt-4 pt-3 border-t flex flex-wrap gap-2">
-            {transitions.map((t, i) => (
-              <Badge key={i} variant="outline" className="text-[10px]">
-                {statuses[t.from]?.name} → {statuses[t.to]?.name}
-                {t.name && `: ${t.name}`}
-              </Badge>
-            ))}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
-
-// Status type explanation component
-const StatusTypeCard = ({ 
-  type, 
-  icon: Icon, 
-  examples 
-}: { 
-  type: keyof typeof STATUS_TYPES; 
-  icon: React.ElementType;
-  examples: string[];
-}) => {
-  const info = STATUS_TYPES[type];
-  return (
-    <div className={cn("p-4 rounded-lg border-2", info.bgColor, "border-transparent")}>
-      <div className="flex items-center gap-3 mb-2">
-        <div 
-          className="p-2 rounded-full"
-          style={{ backgroundColor: `${info.color}30` }}
-        >
-          <Icon className="size-5" style={{ color: info.color }} />
-        </div>
+    <div className="rounded-lg border border-border overflow-hidden">
+      <div className="px-4 py-3 border-b border-border bg-muted/20 flex items-center gap-2">
+        <GitBranch className="size-3.5 text-muted-foreground shrink-0" />
         <div>
-          <h4 className="font-semibold">{info.label}</h4>
-          <p className="text-xs text-muted-foreground">{info.description}</p>
+          <span className="text-sm font-medium">{title}</span>
+          <p className="text-xs text-muted-foreground">{description}</p>
         </div>
       </div>
-      <div className="mt-3 space-y-1">
-        <p className="text-xs text-muted-foreground">Examples:</p>
-        <div className="flex flex-wrap gap-1">
-          {examples.map((ex, i) => (
-            <Badge key={i} variant="secondary" className="text-[10px]">
-              {ex}
+      <div className="p-4 bg-muted/10 overflow-x-auto">
+        <div className="flex items-center gap-2 min-w-max">
+          {statuses.map((status, index) => {
+            const Icon = IconMap[status.icon] || Circle;
+            const typeInfo = STATUS_TYPES[status.statusType];
+            return (
+              <div key={index} className="flex items-center gap-2">
+                <div
+                  className="flex flex-col items-center px-3 py-2.5 bg-card rounded-lg border min-w-[88px]"
+                  style={{ borderColor: `${status.color}35` }}
+                >
+                  <Icon className="size-3.5 mb-1" style={{ color: status.color }} />
+                  <span className="text-xs font-medium text-center leading-tight">{status.name}</span>
+                  <span className="text-[10px] text-muted-foreground mt-0.5">{typeInfo.label}</span>
+                </div>
+                {index < statuses.length - 1 && (
+                  <ArrowRight className="size-3.5 text-muted-foreground/40 shrink-0" />
+                )}
+              </div>
+            );
+          })}
+        </div>
+        <div className="mt-3 pt-3 border-t border-border/40 flex flex-wrap gap-1.5">
+          {transitions.map((t, i) => (
+            <Badge key={i} variant="outline" className="text-[10px] font-normal">
+              {statuses[t.from]?.name} → {statuses[t.to]?.name}
+              {t.name && `: ${t.name}`}
             </Badge>
           ))}
         </div>
@@ -188,42 +125,6 @@ const StatusTypeCard = ({
   );
 };
 
-// Rule example card
-const RuleCard = ({
-  icon: Icon,
-  title,
-  description,
-  example,
-  color,
-}: {
-  icon: React.ElementType;
-  title: string;
-  description: string;
-  example: string;
-  color: string;
-}) => (
-  <Card>
-    <CardContent className="p-4">
-      <div className="flex items-start gap-3">
-        <div 
-          className="p-2 rounded-lg shrink-0"
-          style={{ backgroundColor: `${color}20` }}
-        >
-          <Icon className="size-5" style={{ color }} />
-        </div>
-        <div className="space-y-1">
-          <h4 className="font-medium text-sm">{title}</h4>
-          <p className="text-xs text-muted-foreground">{description}</p>
-          <div className="mt-2 p-2 bg-muted/50 rounded text-xs">
-            <span className="text-muted-foreground">Example: </span>
-            <span>{example}</span>
-          </div>
-        </div>
-      </div>
-    </CardContent>
-  </Card>
-);
-
 export const WorkflowGuideClient = () => {
   const workspaceId = useWorkspaceId();
   const router = useRouter();
@@ -239,772 +140,765 @@ export const WorkflowGuideClient = () => {
   ];
 
   return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="bg-background border-b px-6 py-4">
-        <div className="flex items-center gap-4">
-          <Button variant="ghost" size="icon" onClick={() => router.back()}>
-            <ArrowLeft className="size-4" />
-          </Button>
-          <div>
-            <h1 className="text-2xl font-bold flex items-center gap-2">
-              <Workflow className="size-6 text-primary" />
-              Workflow Guide
-            </h1>
-            <p className="text-muted-foreground text-sm">
-              Learn how to create and manage workflows for your projects
-            </p>
-          </div>
-        </div>
-      </div>
+    <div className="w-full h-[83vh] px-2">
+      <div className="bg-card overflow-hidden h-full">
+        <div className="flex h-full">
+
+          {/* Left Navigation */}
+          <aside className="w-60 shrink-0 h-3/5 rounded-2xl border border-border shadow-sm border-r bg-muted/20 p-3 flex flex-col gap-0.5">
+            {/* Back + title */}
+            <div className="flex items-center gap-2 px-3 py-2 mb-4">
+              <button
+                type="button"
+                onClick={() => router.back()}
+                className="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <ArrowLeft className="size-3.5" />
+              </button>
+              <span className="text-xs text-muted-foreground font-medium">Guide</span>
+            </div>
 
-      <div className="flex-1 flex overflow-hidden">
-        {/* Sidebar Navigation */}
-        <div className="w-64 border-r bg-muted/20 p-4 hidden md:block">
-          <nav className="space-y-1">
             {sections.map((section) => (
               <button
                 key={section.id}
+                type="button"
                 onClick={() => setActiveSection(section.id)}
-                className={cn(
-                  "w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors",
+                className={[
+                  "w-full text-left px-3 py-2 rounded-lg text-sm transition-colors duration-100",
                   activeSection === section.id
-                    ? "bg-primary text-primary-foreground"
-                    : "hover:bg-muted text-muted-foreground hover:text-foreground"
-                )}
+                    ? "bg-blue-500/10 text-blue-700 font-medium"
+                    : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+                ].join(" ")}
               >
-                <section.icon className="size-4" />
                 {section.label}
               </button>
             ))}
-          </nav>
-
-          <Separator className="my-4" />
-
-          <div className="p-3 bg-primary/10 rounded-lg">
-            <h4 className="font-medium text-sm flex items-center gap-2">
-              <Play className="size-4 text-primary" />
-              Quick Start
-            </h4>
-            <p className="text-xs text-muted-foreground mt-1">
-              Create your first workflow from a template in seconds.
-            </p>
-            <Button size="sm" className="w-full mt-3" asChild>
-              <Link href={`/workspaces/${workspaceId}/spaces`}>
-                Go to Spaces
-              </Link>
-            </Button>
-          </div>
-        </div>
 
-        {/* Main Content */}
-        <ScrollArea className="flex-1">
-          <div className="p-6 max-w-4xl mx-auto space-y-8">
-            
-            {/* Overview Section */}
-            {activeSection === "overview" && (
-              <div className="space-y-6">
-                <div>
-                  <h2 className="text-xl font-bold mb-2">What are Workflows?</h2>
-                  <p className="text-muted-foreground">
-                    Workflows define how work items (tasks, bugs, stories) move through different stages 
-                    in your project. They consist of <strong>statuses</strong> (stages of work) and 
-                    <strong> transitions</strong> (allowed movements between stages).
-                  </p>
-                </div>
+            <Separator className="my-3" />
+
+            <div className="px-3 pb-1">
+              <p className="text-xs text-muted-foreground mb-2">Ready to start?</p>
+              <Button size="xs" className="w-full" asChild>
+                <Link href={`/workspaces/${workspaceId}/spaces`}>
+                  Go to Spaces
+                </Link>
+              </Button>
+            </div>
+          </aside>
+
+          {/* Main Content */}
+          <ScrollArea className="flex-1">
+            <main className="p-7 w-full">
+
+              {/* ── Overview ── */}
+              {activeSection === "overview" && (
+                <section className="space-y-8">
+                  <div className="mb-6">
+                    <h2 className="text-[16px] font-medium mb-1">What are Workflows?</h2>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      Workflows define how work items (tasks, bugs, stories) move through different stages
+                      in your project. They consist of <strong>statuses</strong> (stages of work) and{" "}
+                      <strong>transitions</strong> (allowed movements between stages).
+                    </p>
+                  </div>
 
-                <Card className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-950/30 dark:to-purple-950/30 border-blue-200 dark:border-blue-900">
-                  <CardContent className="p-6">
-                    <div className="grid md:grid-cols-3 gap-6">
-                      <div className="text-center">
-                        <div className="mx-auto w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-3">
-                          <Circle className="size-6 text-blue-600" />
+                  {/* Core Concepts */}
+                  <div className="mb-6">
+                    <p className="text-[16px] font-medium mb-3">Core Concepts</p>
+                    <div className="divide-y divide-border border rounded-lg">
+                      {[
+                        { icon: Circle, color: "#3B82F6", title: "Statuses", desc: 'Represent stages like "To Do", "In Progress", "Done"' },
+                        { icon: ArrowRight, color: "#8B5CF6", title: "Transitions", desc: "Define allowed movements between statuses" },
+                        { icon: Shield, color: "#10B981", title: "Rules", desc: "Control who can make transitions and when" },
+                      ].map(({ icon: Icon, color, title, desc }) => (
+                        <div key={title} className="flex items-center gap-3 px-4 py-3.5">
+                          <div className="p-1.5 rounded-md shrink-0" style={{ backgroundColor: `${color}15` }}>
+                            <Icon className="size-3.5" style={{ color }} />
+                          </div>
+                          <div>
+                            <p className="text-sm font-medium">{title}</p>
+                            <p className="text-xs text-muted-foreground mt-0.5">{desc}</p>
+                          </div>
                         </div>
-                        <h3 className="font-semibold">Statuses</h3>
-                        <p className="text-sm text-muted-foreground mt-1">
-                          Represent stages like &quot;To Do&quot;, &quot;In Progress&quot;, &quot;Done&quot;
-                        </p>
-                      </div>
-                      <div className="text-center">
-                        <div className="mx-auto w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mb-3">
-                          <ArrowRight className="size-6 text-purple-600" />
-                        </div>
-                        <h3 className="font-semibold">Transitions</h3>
-                        <p className="text-sm text-muted-foreground mt-1">
-                          Define allowed movements between statuses
-                        </p>
-                      </div>
-                      <div className="text-center">
-                        <div className="mx-auto w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mb-3">
-                          <Shield className="size-6 text-green-600" />
-                        </div>
-                        <h3 className="font-semibold">Rules</h3>
-                        <p className="text-sm text-muted-foreground mt-1">
-                          Control who can make transitions and when
-                        </p>
-                      </div>
+                      ))}
                     </div>
-                  </CardContent>
-                </Card>
-
-                <div className="grid md:grid-cols-2 gap-4">
-                  <Card>
-                    <CardHeader className="pb-3">
-                      <CardTitle className="text-base flex items-center gap-2">
-                        <CheckCircle2 className="size-4 text-green-500" />
+                  </div>
+
+                  <div className="grid md:grid-cols-2 gap-4">
+                    {/* Benefits */}
+                    <div>
+                      <p className="text-[16px] font-medium mb-3 flex items-center gap-2">
+                        <CheckCircle2 className="size-3.5 text-muted-foreground" />
                         Benefits
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="space-y-2">
-                      <div className="flex items-start gap-2">
-                        <ChevronRight className="size-4 text-green-500 mt-0.5 shrink-0" />
-                        <span className="text-sm">Standardize work processes across teams</span>
-                      </div>
-                      <div className="flex items-start gap-2">
-                        <ChevronRight className="size-4 text-green-500 mt-0.5 shrink-0" />
-                        <span className="text-sm">Ensure proper approvals before completion</span>
-                      </div>
-                      <div className="flex items-start gap-2">
-                        <ChevronRight className="size-4 text-green-500 mt-0.5 shrink-0" />
-                        <span className="text-sm">Track work progress with meaningful stages</span>
-                      </div>
-                      <div className="flex items-start gap-2">
-                        <ChevronRight className="size-4 text-green-500 mt-0.5 shrink-0" />
-                        <span className="text-sm">Control access with team-based rules</span>
+                      </p>
+                      <div className="divide-y divide-border border rounded-lg">
+                        {[
+                          "Standardize work processes across teams",
+                          "Ensure proper approvals before completion",
+                          "Track work progress with meaningful stages",
+                          "Control access with team-based rules",
+                        ].map((item, i) => (
+                          <div key={i} className="flex items-start gap-2.5 px-3 py-2.5">
+                            <ChevronRight className="size-3.5 text-muted-foreground mt-0.5 shrink-0" />
+                            <span className="text-sm text-muted-foreground">{item}</span>
+                          </div>
+                        ))}
                       </div>
-                    </CardContent>
-                  </Card>
+                    </div>
 
-                  <Card>
-                    <CardHeader className="pb-3">
-                      <CardTitle className="text-base flex items-center gap-2">
-                        <Settings className="size-4 text-blue-500" />
+                    {/* Key Concepts */}
+                    <div>
+                      <p className="text-[16px] font-medium mb-3 flex items-center gap-2">
+                        <Settings className="size-3.5 text-muted-foreground" />
                         Key Concepts
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="space-y-2">
-                      <div className="flex items-start gap-2">
-                        <Badge className="bg-gray-100 text-gray-700 text-[10px]">Initial</Badge>
-                        <span className="text-sm">Starting status for new items</span>
-                      </div>
-                      <div className="flex items-start gap-2">
-                        <Badge className="bg-green-100 text-green-700 text-[10px]">Final</Badge>
-                        <span className="text-sm">Completion status (can have multiple)</span>
-                      </div>
-                      <div className="flex items-start gap-2">
-                        <Badge className="bg-blue-100 text-blue-700 text-[10px]">Status Type</Badge>
-                        <span className="text-sm">Category for analytics (Open/In Progress/Closed)</span>
-                      </div>
-                      <div className="flex items-start gap-2">
-                        <Badge className="bg-purple-100 text-purple-700 text-[10px]">Icon</Badge>
-                        <span className="text-sm">Visual identifier for each status</span>
-                      </div>
-                    </CardContent>
-                  </Card>
-                </div>
-              </div>
-            )}
-
-            {/* Status Types Section */}
-            {activeSection === "status-types" && (
-              <div className="space-y-6">
-                <div>
-                  <h2 className="text-xl font-bold mb-2">Understanding Status Types</h2>
-                  <p className="text-muted-foreground">
-                    Every status belongs to one of three types. These types are used for analytics 
-                    and reporting, helping you understand work distribution and flow.
-                  </p>
-                </div>
-
-                <div className="grid md:grid-cols-3 gap-4">
-                  <StatusTypeCard
-                    type="OPEN"
-                    icon={Circle}
-                    examples={["To Do", "Backlog", "Open", "New", "Assigned"]}
-                  />
-                  <StatusTypeCard
-                    type="IN_PROGRESS"
-                    icon={Clock}
-                    examples={["In Progress", "In Review", "Testing", "Blocked"]}
-                  />
-                  <StatusTypeCard
-                    type="CLOSED"
-                    icon={CheckCircle}
-                    examples={["Done", "Closed", "Resolved", "Verified"]}
-                  />
-                </div>
-
-                <Card className="bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-900">
-                  <CardContent className="p-4">
-                    <div className="flex items-start gap-3">
-                      <Info className="size-5 text-amber-600 shrink-0 mt-0.5" />
-                      <div>
-                        <h4 className="font-medium text-sm">How Status Types Work</h4>
-                        <p className="text-sm text-muted-foreground mt-1">
-                          Status types are <strong>not</strong> visible to end users - they&apos;re used internally 
-                          for analytics. Users see your custom status names and icons. Choose the type that 
-                          best represents the work state for accurate reporting.
-                        </p>
+                      </p>
+                      <div className="divide-y divide-border border rounded-lg">
+                        {[
+                          { badge: "Initial", desc: "Starting status for new items" },
+                          { badge: "Final", desc: "Completion status (can have multiple)" },
+                          { badge: "Status Type", desc: "Category for analytics (Open/In Progress/Closed)" },
+                          { badge: "Icon", desc: "Visual identifier for each status" },
+                        ].map((item, i) => (
+                          <div key={i} className="flex items-start gap-2.5 px-3 py-2.5">
+                            <Badge variant="secondary" className="text-[10px] font-normal shrink-0 h-4 px-1.5">
+                              {item.badge}
+                            </Badge>
+                            <span className="text-sm text-muted-foreground">{item.desc}</span>
+                          </div>
+                        ))}
                       </div>
                     </div>
-                  </CardContent>
-                </Card>
-
-                <div>
-                  <h3 className="text-lg font-semibold mb-4">Choosing Icons</h3>
-                  <p className="text-muted-foreground mb-4">
-                    Each status can have a unique icon to help users quickly identify work states. 
-                    Here are some recommended icons by status type:
-                  </p>
-                  
-                  <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                  </div>
+                </section>
+              )}
+
+              {/* ── Status Types ── */}
+              {activeSection === "status-types" && (
+                <section className="space-y-6">
+                  <div>
+                    {/* ↓ matched to Overview: text-[16px] font-medium, body text-sm text-muted-foreground */}
+                    <h2 className="text-[16px] font-medium mb-1">Understanding Status Types</h2>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      Every status belongs to one of three types. These types are used for analytics
+                      and reporting, helping you understand work distribution and flow.
+                    </p>
+                  </div>
+
+                  <div className="divide-y divide-border border rounded-lg">
                     {[
-                      { icon: Circle, name: "Circle", desc: "Default/To Do" },
-                      { icon: CircleDashed, name: "Dashed", desc: "Backlog" },
-                      { icon: UserCheck, name: "User Check", desc: "Assigned" },
-                      { icon: Star, name: "Star", desc: "Selected" },
-                      { icon: Clock, name: "Clock", desc: "In Progress" },
-                      { icon: Eye, name: "Eye", desc: "In Review" },
-                      { icon: Ban, name: "Ban", desc: "Blocked" },
-                      { icon: Bug, name: "Bug", desc: "Bug Status" },
-                      { icon: AlertCircle, name: "Alert", desc: "Needs Attention" },
-                      { icon: CheckSquare, name: "Check Square", desc: "Fixed" },
-                      { icon: ShieldCheck, name: "Shield Check", desc: "Verified" },
-                      { icon: CheckCircle, name: "Check Circle", desc: "Done" },
-                    ].map((item, i) => (
-                      <div key={i} className="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
-                        <item.icon className="size-5 text-muted-foreground" />
-                        <div>
-                          <p className="text-sm font-medium">{item.name}</p>
-                          <p className="text-xs text-muted-foreground">{item.desc}</p>
+                      { type: "OPEN" as const, icon: Circle, examples: ["To Do", "Backlog", "Open", "New", "Assigned"] },
+                      { type: "IN_PROGRESS" as const, icon: Clock, examples: ["In Progress", "In Review", "Testing", "Blocked"] },
+                      { type: "CLOSED" as const, icon: CheckCircle, examples: ["Done", "Closed", "Resolved", "Verified"] },
+                    ].map(({ type, icon: Icon, examples }) => {
+                      const info = STATUS_TYPES[type];
+                      return (
+                        <div key={type} className="px-4 py-4">
+                          <div className="flex items-center gap-3 mb-3">
+                            <div className="p-1.5 rounded-md shrink-0" style={{ backgroundColor: `${info.color}15` }}>
+                              <Icon className="size-3.5" style={{ color: info.color }} />
+                            </div>
+                            <div>
+                              <p className="text-sm font-medium">{info.label}</p>
+                              <p className="text-xs text-muted-foreground">{info.description}</p>
+                            </div>
+                          </div>
+                          <div className="flex flex-wrap gap-1.5">
+                            {examples.map((ex, i) => (
+                              <Badge key={i} variant="secondary" className="text-[10px] font-normal">{ex}</Badge>
+                            ))}
+                          </div>
                         </div>
-                      </div>
-                    ))}
+                      );
+                    })}
                   </div>
-                </div>
-              </div>
-            )}
-
-            {/* Templates Section */}
-            {activeSection === "templates" && (
-              <div className="space-y-6">
-                <div>
-                  <h2 className="text-xl font-bold mb-2">Workflow Templates</h2>
-                  <p className="text-muted-foreground">
-                    Start with a pre-built template that matches your team&apos;s process, 
-                    then customize it as needed.
-                  </p>
-                </div>
 
-                <Tabs defaultValue="software-dev" className="w-full">
-                  <TabsList className="grid grid-cols-2 md:grid-cols-4 mb-4">
-                    <TabsTrigger value="software-dev" className="text-xs">
-                      <Code className="size-3 mr-1" /> Software Dev
-                    </TabsTrigger>
-                    <TabsTrigger value="kanban" className="text-xs">
-                      <Columns3 className="size-3 mr-1" /> Kanban
-                    </TabsTrigger>
-                    <TabsTrigger value="bug-tracking" className="text-xs">
-                      <Bug className="size-3 mr-1" /> Bug Tracking
-                    </TabsTrigger>
-                    <TabsTrigger value="sprint-agile" className="text-xs">
-                      <Zap className="size-3 mr-1" /> Sprint/Agile
-                    </TabsTrigger>
-                  </TabsList>
-
-                  <TabsContent value="software-dev" className="space-y-4">
-                    <MiniWorkflowDiagram
-                      title="Software Development"
-                      description="Standard development workflow with code review process"
-                      statuses={[
-                        { name: "To Do", icon: "Circle", color: "#6B7280", statusType: "OPEN" },
-                        { name: "Assigned", icon: "UserCheck", color: "#F59E0B", statusType: "OPEN" },
-                        { name: "In Progress", icon: "Clock", color: "#3B82F6", statusType: "IN_PROGRESS" },
-                        { name: "In Review", icon: "Eye", color: "#8B5CF6", statusType: "IN_PROGRESS" },
-                        { name: "Done", icon: "CheckCircle", color: "#10B981", statusType: "CLOSED" },
-                      ]}
-                      transitions={[
-                        { from: 0, to: 1, name: "Assign" },
-                        { from: 1, to: 2, name: "Start Work" },
-                        { from: 2, to: 3, name: "Submit for Review" },
-                        { from: 3, to: 4, name: "Approve" },
-                        { from: 3, to: 2, name: "Request Changes" },
-                      ]}
-                    />
-                    
-                    <Card>
-                      <CardHeader className="pb-3">
-                        <CardTitle className="text-base">When to Use</CardTitle>
-                      </CardHeader>
-                      <CardContent className="space-y-2 text-sm">
-                        <p>✅ Teams with formal code review processes</p>
-                        <p>✅ Projects requiring approval before completion</p>
-                        <p>✅ Feature development with multiple reviewers</p>
-                        <p className="text-muted-foreground mt-3">
-                          <strong>Key Feature:</strong> The &quot;Request Changes&quot; transition allows reviewers 
-                          to send work back for revisions.
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </TabsContent>
-
-                  <TabsContent value="kanban" className="space-y-4">
-                    <MiniWorkflowDiagram
-                      title="Simple Kanban"
-                      description="Flexible board with free movement between stages"
-                      statuses={[
-                        { name: "Backlog", icon: "CircleDashed", color: "#9CA3AF", statusType: "OPEN" },
-                        { name: "To Do", icon: "Circle", color: "#F59E0B", statusType: "OPEN" },
-                        { name: "In Progress", icon: "Clock", color: "#3B82F6", statusType: "IN_PROGRESS" },
-                        { name: "Done", icon: "CheckCircle", color: "#10B981", statusType: "CLOSED" },
-                      ]}
-                      transitions={[
-                        { from: 0, to: 1 },
-                        { from: 1, to: 2 },
-                        { from: 2, to: 3 },
-                        { from: 1, to: 0 },
-                        { from: 2, to: 1 },
-                      ]}
-                    />
-                    
-                    <Card>
-                      <CardHeader className="pb-3">
-                        <CardTitle className="text-base">When to Use</CardTitle>
-                      </CardHeader>
-                      <CardContent className="space-y-2 text-sm">
-                        <p>✅ Small teams with flexible processes</p>
-                        <p>✅ Projects where items can move freely</p>
-                        <p>✅ Support/maintenance work</p>
-                        <p className="text-muted-foreground mt-3">
-                          <strong>Key Feature:</strong> All transitions are allowed, giving maximum 
-                          flexibility to team members.
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </TabsContent>
-
-                  <TabsContent value="bug-tracking" className="space-y-4">
-                    <MiniWorkflowDiagram
-                      title="Bug Tracking"
-                      description="Track bugs from report to verified resolution"
-                      statuses={[
-                        { name: "Open", icon: "Bug", color: "#EF4444", statusType: "OPEN" },
-                        { name: "Confirmed", icon: "AlertCircle", color: "#F59E0B", statusType: "OPEN" },
-                        { name: "In Progress", icon: "Clock", color: "#3B82F6", statusType: "IN_PROGRESS" },
-                        { name: "Fixed", icon: "CheckSquare", color: "#8B5CF6", statusType: "IN_PROGRESS" },
-                        { name: "Verified", icon: "ShieldCheck", color: "#10B981", statusType: "CLOSED" },
-                      ]}
-                      transitions={[
-                        { from: 0, to: 1, name: "Confirm Bug" },
-                        { from: 1, to: 2, name: "Start Fix" },
-                        { from: 2, to: 3, name: "Mark Fixed" },
-                        { from: 3, to: 4, name: "Verify Fix" },
-                        { from: 3, to: 2, name: "Reopen" },
-                      ]}
-                    />
-                    
-                    <Card>
-                      <CardHeader className="pb-3">
-                        <CardTitle className="text-base">When to Use</CardTitle>
-                      </CardHeader>
-                      <CardContent className="space-y-2 text-sm">
-                        <p>✅ QA teams tracking software bugs</p>
-                        <p>✅ Projects requiring bug verification</p>
-                        <p>✅ Support teams handling customer issues</p>
-                        <p className="text-muted-foreground mt-3">
-                          <strong>Key Feature:</strong> Separate &quot;Fixed&quot; and &quot;Verified&quot; stages ensure 
-                          bugs are tested before being closed.
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </TabsContent>
-
-                  <TabsContent value="sprint-agile" className="space-y-4">
-                    <MiniWorkflowDiagram
-                      title="Sprint/Agile"
-                      description="Agile workflow with sprint selection and blockers"
-                      statuses={[
-                        { name: "Backlog", icon: "CircleDashed", color: "#9CA3AF", statusType: "OPEN" },
-                        { name: "Selected", icon: "Star", color: "#F59E0B", statusType: "OPEN" },
-                        { name: "In Progress", icon: "Clock", color: "#3B82F6", statusType: "IN_PROGRESS" },
-                        { name: "Blocked", icon: "Ban", color: "#EF4444", statusType: "IN_PROGRESS" },
-                        { name: "Done", icon: "CheckCircle", color: "#10B981", statusType: "CLOSED" },
-                      ]}
-                      transitions={[
-                        { from: 0, to: 1, name: "Select for Sprint" },
-                        { from: 1, to: 2, name: "Start Work" },
-                        { from: 2, to: 3, name: "Mark Blocked" },
-                        { from: 3, to: 2, name: "Unblock" },
-                        { from: 2, to: 4, name: "Complete" },
-                      ]}
-                    />
-                    
-                    <Card>
-                      <CardHeader className="pb-3">
-                        <CardTitle className="text-base">When to Use</CardTitle>
-                      </CardHeader>
-                      <CardContent className="space-y-2 text-sm">
-                        <p>✅ Scrum/Agile teams working in sprints</p>
-                        <p>✅ Projects with sprint planning ceremonies</p>
-                        <p>✅ Teams that need to track blockers</p>
-                        <p className="text-muted-foreground mt-3">
-                          <strong>Key Feature:</strong> &quot;Selected&quot; status for sprint planning and 
-                          &quot;Blocked&quot; status to highlight impediments.
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </TabsContent>
-                </Tabs>
-              </div>
-            )}
-
-            {/* Transitions Section */}
-            {activeSection === "transitions" && (
-              <div className="space-y-6">
-                <div>
-                  <h2 className="text-xl font-bold mb-2">Configuring Transitions</h2>
-                  <p className="text-muted-foreground">
-                    Transitions define how work items can move between statuses. 
-                    Each transition can have rules that control who can make the move and under what conditions.
-                  </p>
-                </div>
+                  {/* Info note */}
+                  <div className="flex items-start gap-3 px-4 py-3.5 rounded-lg border border-border bg-muted/20">
+                    <Info className="size-3.5 text-muted-foreground shrink-0 mt-0.5" />
+                    <div>
+                      {/* ↓ matched: text-sm font-medium for sub-heading */}
+                      <p className="text-sm font-medium">How Status Types Work</p>
+                      <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
+                        Status types are <strong>not</strong> visible to end users — they&apos;re used internally
+                        for analytics. Users see your custom status names and icons. Choose the type that
+                        best represents the work state for accurate reporting.
+                      </p>
+                    </div>
+                  </div>
 
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="text-base">Creating Transitions</CardTitle>
-                    <CardDescription>
-                      In the workflow editor, drag from one status to another to create a transition
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="flex items-center justify-center gap-4 p-6 bg-muted/30 rounded-lg">
-                      <div className="p-4 bg-background rounded-lg border-2 border-amber-500">
-                        <Circle className="size-6 text-amber-500 mx-auto mb-2" />
-                        <span className="text-sm font-medium">To Do</span>
-                      </div>
-                      <div className="flex flex-col items-center">
-                        <div className="px-3 py-1 bg-background border rounded-full text-xs font-medium">
-                          Start Work
+                  {/* Choosing Icons */}
+                  <div>
+                    {/* ↓ matched: text-[16px] font-medium */}
+                    <p className="text-[16px] font-medium mb-1">Choosing Icons</p>
+                    <p className="text-sm text-muted-foreground mb-4">
+                      Each status can have a unique icon to help users quickly identify work states.
+                      Here are some recommended icons by status type:
+                    </p>
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
+                      {[
+                        { icon: Circle, name: "Circle", desc: "Default/To Do" },
+                        { icon: CircleDashed, name: "Dashed", desc: "Backlog" },
+                        { icon: UserCheck, name: "User Check", desc: "Assigned" },
+                        { icon: Star, name: "Star", desc: "Selected" },
+                        { icon: Clock, name: "Clock", desc: "In Progress" },
+                        { icon: Eye, name: "Eye", desc: "In Review" },
+                        { icon: Ban, name: "Ban", desc: "Blocked" },
+                        { icon: Bug, name: "Bug", desc: "Bug Status" },
+                        { icon: AlertCircle, name: "Alert", desc: "Needs Attention" },
+                        { icon: CheckSquare, name: "Check Square", desc: "Fixed" },
+                        { icon: ShieldCheck, name: "Shield Check", desc: "Verified" },
+                        { icon: CheckCircle, name: "Check Circle", desc: "Done" },
+                      ].map((item, i) => (
+                        <div key={i} className="flex items-center gap-2.5 p-2.5 rounded-lg border border-border bg-card">
+                          <item.icon className="size-4 text-muted-foreground shrink-0" />
+                          <div>
+                            <p className="text-xs font-medium leading-tight">{item.name}</p>
+                            <p className="text-[10px] text-muted-foreground">{item.desc}</p>
+                          </div>
                         </div>
-                        <ArrowRight className="size-8 text-muted-foreground -my-1" />
-                      </div>
-                      <div className="p-4 bg-background rounded-lg border-2 border-blue-500">
-                        <Clock className="size-6 text-blue-500 mx-auto mb-2" />
-                        <span className="text-sm font-medium">In Progress</span>
-                      </div>
+                      ))}
                     </div>
-                  </CardContent>
-                </Card>
-
-                <div>
-                  <h3 className="text-lg font-semibold mb-4">Transition Properties</h3>
-                  <div className="grid md:grid-cols-2 gap-4">
-                    <Card>
-                      <CardContent className="p-4">
-                        <h4 className="font-medium flex items-center gap-2 mb-2">
-                          <Target className="size-4 text-blue-500" />
-                          Name (Optional)
-                        </h4>
-                        <p className="text-sm text-muted-foreground">
-                          A friendly label shown when users change status. 
-                          E.g., &quot;Start Work&quot;, &quot;Submit for Review&quot;, &quot;Approve&quot;
-                        </p>
-                      </CardContent>
-                    </Card>
-                    <Card>
-                      <CardContent className="p-4">
-                        <h4 className="font-medium flex items-center gap-2 mb-2">
-                          <Info className="size-4 text-purple-500" />
-                          Description (Optional)
-                        </h4>
-                        <p className="text-sm text-muted-foreground">
-                          Additional instructions or notes for team members 
-                          about when to use this transition.
-                        </p>
-                      </CardContent>
-                    </Card>
                   </div>
-                </div>
+                </section>
+              )}
+
+              {/* ── Templates ── */}
+              {activeSection === "templates" && (
+                <section className="space-y-6">
+                  <div>
+                    {/* ↓ matched: text-[16px] font-medium */}
+                    <h2 className="text-[16px] font-medium mb-1">Workflow Templates</h2>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      Start with a pre-built template that matches your team&apos;s process,
+                      then customize it as needed.
+                    </p>
+                  </div>
 
-                <Card className="bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-900">
-                  <CardContent className="p-4">
-                    <div className="flex items-start gap-3">
-                      <Lightbulb className="size-5 text-blue-600 shrink-0 mt-0.5" />
-                      <div>
-                        <h4 className="font-medium text-sm">Pro Tip: Bidirectional Transitions</h4>
-                        <p className="text-sm text-muted-foreground mt-1">
-                          You can create transitions in both directions between two statuses. 
-                          For example, &quot;In Progress → In Review&quot; (Submit) and &quot;In Review → In Progress&quot; (Request Changes). 
-                          The workflow editor will offset the labels so they don&apos;t overlap.
-                        </p>
+                  <Tabs defaultValue="software-dev" className="w-full">
+                    {/* ↓ blue-500/20 bg, text-blue-500 active text */}
+                    <TabsList className="h-8 mb-5  border border-blue-500/20 p-0.5">
+                      <TabsTrigger
+                        value="software-dev"
+                        className="text-xs h-7 text-blue-500  data-[state=active]:bg-card data-[state=active]:text-blue-600 data-[state=active]:shadow-none data-[state=inactive]:text-blue-500/70"
+                      >
+                        <Code className="size-3 mr-1" /> Software Dev
+                      </TabsTrigger>
+                      <TabsTrigger
+                        value="kanban"
+                        className="text-xs h-7 text-blue-500 data-[state=active]:bg-card data-[state=active]:text-blue-600 data-[state=active]:shadow-none data-[state=inactive]:text-blue-500/70"
+                      >
+                        <Columns3 className="size-3 mr-1" /> Kanban
+                      </TabsTrigger>
+                      <TabsTrigger
+                        value="bug-tracking"
+                        className="text-xs h-7 text-blue-500 data-[state=active]:bg-card data-[state=active]:text-blue-600 data-[state=active]:shadow-none data-[state=inactive]:text-blue-500/70"
+                      >
+                        <Bug className="size-3 mr-1" /> Bug Tracking
+                      </TabsTrigger>
+                      <TabsTrigger
+                        value="sprint-agile"
+                        className="text-xs h-7 text-blue-500 data-[state=active]:bg-card data-[state=active]:text-blue-600 data-[state=active]:shadow-none data-[state=inactive]:text-blue-500/70"
+                      >
+                        <Zap className="size-3 mr-1" /> Sprint/Agile
+                      </TabsTrigger>
+                    </TabsList>
+
+                    <TabsContent value="software-dev" className="space-y-4">
+                      <MiniWorkflowDiagram
+                        title="Software Development"
+                        description="Standard development workflow with code review process"
+                        statuses={[
+                          { name: "To Do", icon: "Circle", color: "#6B7280", statusType: "OPEN" },
+                          { name: "Assigned", icon: "UserCheck", color: "#F59E0B", statusType: "OPEN" },
+                          { name: "In Progress", icon: "Clock", color: "#3B82F6", statusType: "IN_PROGRESS" },
+                          { name: "In Review", icon: "Eye", color: "#8B5CF6", statusType: "IN_PROGRESS" },
+                          { name: "Done", icon: "CheckCircle", color: "#10B981", statusType: "CLOSED" },
+                        ]}
+                        transitions={[
+                          { from: 0, to: 1, name: "Assign" },
+                          { from: 1, to: 2, name: "Start Work" },
+                          { from: 2, to: 3, name: "Submit for Review" },
+                          { from: 3, to: 4, name: "Approve" },
+                          { from: 3, to: 2, name: "Request Changes" },
+                        ]}
+                      />
+                      <div className="rounded-lg border border-border overflow-hidden">
+                        <div className="px-4 py-3 border-b border-border bg-muted/10">
+                          <p className="text-sm font-medium">When to Use</p>
+                        </div>
+                        <div className="divide-y divide-border">
+                          {[
+                            "Teams with formal code review processes",
+                            "Projects requiring approval before completion",
+                            "Feature development with multiple reviewers",
+                          ].map((item, i) => (
+                            <div key={i} className="flex items-center gap-2.5 px-4 py-2.5">
+                              <span className="text-xs text-muted-foreground">✅</span>
+                              <span className="text-xs text-muted-foreground">{item}</span>
+                            </div>
+                          ))}
+                          <div className="px-4 py-3">
+                            <p className="text-xs text-muted-foreground">
+                              <strong>Key Feature:</strong> The &quot;Request Changes&quot; transition allows reviewers
+                              to send work back for revisions.
+                            </p>
+                          </div>
+                        </div>
                       </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-            )}
-
-            {/* Rules Section */}
-            {activeSection === "rules" && (
-              <div className="space-y-6">
-                <div>
-                  <h2 className="text-xl font-bold mb-2">Rules & Permissions</h2>
-                  <p className="text-muted-foreground">
-                    Control who can perform transitions with team-based rules and approval workflows.
-                  </p>
-                </div>
-
-                <div className="grid gap-4">
-                  <RuleCard
-                    icon={Users}
-                    title="Allowed Teams"
-                    description="Restrict the transition to members of specific teams only."
-                    example='Only the &quot;QA Team&quot; can move items from &quot;Fixed&quot; to &quot;Verified&quot;'
-                    color="#3B82F6"
-                  />
-                  
-                  <RuleCard
-                    icon={Shield}
-                    title="Allowed Roles"
-                    description="Restrict by workspace role (Admin, Member, Lead, Owner)."
-                    example='Only &quot;Admin&quot; and &quot;Lead&quot; roles can move items to &quot;Done&quot;'
-                    color="#8B5CF6"
-                  />
-                  
-                  <RuleCard
-                    icon={CheckCircle2}
-                    title="Requires Approval"
-                    description="The transition creates an approval request instead of moving immediately."
-                    example='Moving to &quot;Production&quot; requires approval from the &quot;Release Team&quot;'
-                    color="#10B981"
-                  />
-                  
-                  <RuleCard
-                    icon={Zap}
-                    title="Auto-Transition"
-                    description="Automatically perform the transition when conditions are met."
-                    example="Auto-move to Done when all subtasks are completed"
-                    color="#F59E0B"
-                  />
-                </div>
-
-                <Accordion type="single" collapsible className="w-full">
-                  <AccordionItem value="team-rules">
-                    <AccordionTrigger>
-                      <span className="flex items-center gap-2">
-                        <Users className="size-4" />
-                        Setting Up Team-Based Rules
-                      </span>
-                    </AccordionTrigger>
-                    <AccordionContent className="space-y-3 pt-2">
-                      <p className="text-sm text-muted-foreground">
-                        Team-based rules ensure that only appropriate team members can make certain transitions:
-                      </p>
-                      <ol className="list-decimal list-inside space-y-2 text-sm">
-                        <li>Click on a transition in the workflow editor</li>
-                        <li>Open the &quot;Edit Transition&quot; dialog</li>
-                        <li>In &quot;Access Control&quot;, select the allowed teams</li>
-                        <li>Optionally, restrict by member roles</li>
-                        <li>Save changes</li>
-                      </ol>
-                      <div className="p-3 bg-muted/50 rounded-lg text-sm">
-                        <strong>Note:</strong> If no teams are selected, all workspace members can perform the transition.
+                    </TabsContent>
+
+                    <TabsContent value="kanban" className="space-y-4">
+                      <MiniWorkflowDiagram
+                        title="Simple Kanban"
+                        description="Flexible board with free movement between stages"
+                        statuses={[
+                          { name: "Backlog", icon: "CircleDashed", color: "#9CA3AF", statusType: "OPEN" },
+                          { name: "To Do", icon: "Circle", color: "#F59E0B", statusType: "OPEN" },
+                          { name: "In Progress", icon: "Clock", color: "#3B82F6", statusType: "IN_PROGRESS" },
+                          { name: "Done", icon: "CheckCircle", color: "#10B981", statusType: "CLOSED" },
+                        ]}
+                        transitions={[
+                          { from: 0, to: 1 },
+                          { from: 1, to: 2 },
+                          { from: 2, to: 3 },
+                          { from: 1, to: 0 },
+                          { from: 2, to: 1 },
+                        ]}
+                      />
+                      <div className="rounded-lg border border-border overflow-hidden">
+                        <div className="px-4 py-3 border-b border-border bg-muted/10">
+                          <p className="text-sm font-medium">When to Use</p>
+                        </div>
+                        <div className="divide-y divide-border">
+                          {[
+                            "Small teams with flexible processes",
+                            "Projects where items can move freely",
+                            "Support/maintenance work",
+                          ].map((item, i) => (
+                            <div key={i} className="flex items-center gap-2.5 px-4 py-2.5">
+                              <span className="text-xs text-muted-foreground">✅</span>
+                              <span className="text-xs text-muted-foreground">{item}</span>
+                            </div>
+                          ))}
+                          <div className="px-4 py-3">
+                            <p className="text-xs text-muted-foreground">
+                              <strong>Key Feature:</strong> All transitions are allowed, giving maximum
+                              flexibility to team members.
+                            </p>
+                          </div>
+                        </div>
                       </div>
-                    </AccordionContent>
-                  </AccordionItem>
-
-                  <AccordionItem value="approval-workflow">
-                    <AccordionTrigger>
-                      <span className="flex items-center gap-2">
-                        <CheckCircle2 className="size-4" />
-                        Setting Up Approval Workflows
-                      </span>
-                    </AccordionTrigger>
-                    <AccordionContent className="space-y-3 pt-2">
-                      <p className="text-sm text-muted-foreground">
-                        Approval workflows add a gate where designated approvers must confirm the transition:
-                      </p>
-                      <ol className="list-decimal list-inside space-y-2 text-sm">
-                        <li>Edit the transition you want to require approval</li>
-                        <li>Enable &quot;Requires Approval&quot; toggle</li>
-                        <li>Select the teams that can approve (Approver Teams)</li>
-                        <li>When a user tries this transition, an approval request is created</li>
-                        <li>An approver from the designated teams approves or rejects</li>
-                      </ol>
-                    </AccordionContent>
-                  </AccordionItem>
-
-                  <AccordionItem value="use-cases">
-                    <AccordionTrigger>
-                      <span className="flex items-center gap-2">
-                        <Lightbulb className="size-4" />
-                        Common Use Cases
-                      </span>
-                    </AccordionTrigger>
-                    <AccordionContent className="space-y-3 pt-2">
-                      <div className="space-y-4">
-                        <div className="p-3 bg-muted/50 rounded-lg">
-                          <h4 className="font-medium text-sm mb-1">Code Review Gate</h4>
-                          <p className="text-sm text-muted-foreground">
-                            In Progress → In Review: Anyone can submit<br />
-                            In Review → Done: Only &quot;Senior Dev&quot; team can approve
-                          </p>
+                    </TabsContent>
+
+                    <TabsContent value="bug-tracking" className="space-y-4">
+                      <MiniWorkflowDiagram
+                        title="Bug Tracking"
+                        description="Track bugs from report to verified resolution"
+                        statuses={[
+                          { name: "Open", icon: "Bug", color: "#EF4444", statusType: "OPEN" },
+                          { name: "Confirmed", icon: "AlertCircle", color: "#F59E0B", statusType: "OPEN" },
+                          { name: "In Progress", icon: "Clock", color: "#3B82F6", statusType: "IN_PROGRESS" },
+                          { name: "Fixed", icon: "CheckSquare", color: "#8B5CF6", statusType: "IN_PROGRESS" },
+                          { name: "Verified", icon: "ShieldCheck", color: "#10B981", statusType: "CLOSED" },
+                        ]}
+                        transitions={[
+                          { from: 0, to: 1, name: "Confirm Bug" },
+                          { from: 1, to: 2, name: "Start Fix" },
+                          { from: 2, to: 3, name: "Mark Fixed" },
+                          { from: 3, to: 4, name: "Verify Fix" },
+                          { from: 3, to: 2, name: "Reopen" },
+                        ]}
+                      />
+                      <div className="rounded-lg border border-border overflow-hidden">
+                        <div className="px-4 py-3 border-b border-border bg-muted/10">
+                          <p className="text-sm font-medium">When to Use</p>
                         </div>
-                        <div className="p-3 bg-muted/50 rounded-lg">
-                          <h4 className="font-medium text-sm mb-1">QA Verification</h4>
-                          <p className="text-sm text-muted-foreground">
-                            Fixed → Verified: Only &quot;QA Team&quot; members can verify
-                          </p>
+                        <div className="divide-y divide-border">
+                          {[
+                            "QA teams tracking software bugs",
+                            "Projects requiring bug verification",
+                            "Support teams handling customer issues",
+                          ].map((item, i) => (
+                            <div key={i} className="flex items-center gap-2.5 px-4 py-2.5">
+                              <span className="text-xs text-muted-foreground">✅</span>
+                              <span className="text-xs text-muted-foreground">{item}</span>
+                            </div>
+                          ))}
+                          <div className="px-4 py-3">
+                            <p className="text-xs text-muted-foreground">
+                              <strong>Key Feature:</strong> Separate &quot;Fixed&quot; and &quot;Verified&quot; stages ensure
+                              bugs are tested before being closed.
+                            </p>
+                          </div>
                         </div>
-                        <div className="p-3 bg-muted/50 rounded-lg">
-                          <h4 className="font-medium text-sm mb-1">Production Release</h4>
-                          <p className="text-sm text-muted-foreground">
-                            Ready → Production: Requires approval from &quot;Release Managers&quot;
-                          </p>
+                      </div>
+                    </TabsContent>
+
+                    <TabsContent value="sprint-agile" className="space-y-4">
+                      <MiniWorkflowDiagram
+                        title="Sprint/Agile"
+                        description="Agile workflow with sprint selection and blockers"
+                        statuses={[
+                          { name: "Backlog", icon: "CircleDashed", color: "#9CA3AF", statusType: "OPEN" },
+                          { name: "Selected", icon: "Star", color: "#F59E0B", statusType: "OPEN" },
+                          { name: "In Progress", icon: "Clock", color: "#3B82F6", statusType: "IN_PROGRESS" },
+                          { name: "Blocked", icon: "Ban", color: "#EF4444", statusType: "IN_PROGRESS" },
+                          { name: "Done", icon: "CheckCircle", color: "#10B981", statusType: "CLOSED" },
+                        ]}
+                        transitions={[
+                          { from: 0, to: 1, name: "Select for Sprint" },
+                          { from: 1, to: 2, name: "Start Work" },
+                          { from: 2, to: 3, name: "Mark Blocked" },
+                          { from: 3, to: 2, name: "Unblock" },
+                          { from: 2, to: 4, name: "Complete" },
+                        ]}
+                      />
+                      <div className="rounded-lg border border-border overflow-hidden">
+                        <div className="px-4 py-3 border-b border-border bg-muted/10">
+                          <p className="text-sm font-medium">When to Use</p>
+                        </div>
+                        <div className="divide-y divide-border">
+                          {[
+                            "Scrum/Agile teams working in sprints",
+                            "Projects with sprint planning ceremonies",
+                            "Teams that need to track blockers",
+                          ].map((item, i) => (
+                            <div key={i} className="flex items-center gap-2.5 px-4 py-2.5">
+                              <span className="text-xs text-muted-foreground">✅</span>
+                              <span className="text-xs text-muted-foreground">{item}</span>
+                            </div>
+                          ))}
+                          <div className="px-4 py-3">
+                            <p className="text-xs text-muted-foreground">
+                              <strong>Key Feature:</strong> &quot;Selected&quot; status for sprint planning and
+                              &quot;Blocked&quot; status to highlight impediments.
+                            </p>
+                          </div>
                         </div>
                       </div>
-                    </AccordionContent>
-                  </AccordionItem>
-                </Accordion>
-              </div>
-            )}
-
-            {/* Best Practices Section */}
-            {activeSection === "best-practices" && (
-              <div className="space-y-6">
-                <div>
-                  <h2 className="text-xl font-bold mb-2">Best Practices</h2>
-                  <p className="text-muted-foreground">
-                    Follow these recommendations to create effective workflows for your team.
-                  </p>
-                </div>
+                    </TabsContent>
+                  </Tabs>
+                </section>
+              )}
+
+              {/* ── Transitions ── */}
+              {activeSection === "transitions" && (
+                <section className="space-y-6">
+                  <div>
+                    {/* ↓ matched: text-[16px] font-medium */}
+                    <h2 className="text-[16px] font-medium mb-1">Configuring Transitions</h2>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      Transitions define how work items can move between statuses.
+                      Each transition can have rules that control who can make the move and under what conditions.
+                    </p>
+                  </div>
 
-                <div className="grid gap-4">
-                  <Card>
-                    <CardHeader className="pb-3">
-                      <CardTitle className="text-base flex items-center gap-2">
-                        <span className="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-sm font-bold">1</span>
-                        Keep It Simple
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="text-sm text-muted-foreground">
-                      <p className="mb-2">
-                        Start with fewer statuses (4-6) and add more only if needed. Complex workflows 
-                        with many statuses can slow down your team.
+                  {/* Visual demo */}
+                  <div className="rounded-lg border border-border overflow-hidden">
+                    <div className="px-4 py-3 border-b border-border bg-muted/20">
+                      <p className="text-sm font-medium">Creating Transitions</p>
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        In the workflow editor, drag from one status to another to create a transition
                       </p>
-                      <div className="flex items-center gap-2 mt-3">
-                        <Badge variant="outline" className="bg-green-50 text-green-700">✓ Good</Badge>
-                        <span>To Do → In Progress → Review → Done</span>
+                    </div>
+                    <div className="p-6 bg-muted/10 flex items-center justify-center gap-4">
+                      <div className="flex flex-col items-center px-4 py-3 bg-card rounded-lg border-2 border-amber-400/60 min-w-[80px]">
+                        <Circle className="size-5 text-amber-500 mb-1.5" />
+                        <span className="text-sm font-medium">To Do</span>
                       </div>
-                      <div className="flex items-center gap-2 mt-2">
-                        <Badge variant="outline" className="bg-red-50 text-red-700">✗ Avoid</Badge>
-                        <span>10+ statuses for simple projects</span>
+                      <div className="flex flex-col items-center gap-1">
+                        <span className="text-[10px] px-2 py-0.5 bg-card border border-border rounded-full text-muted-foreground">
+                          Start Work
+                        </span>
+                        <ArrowRight className="size-5 text-muted-foreground/50" />
                       </div>
-                    </CardContent>
-                  </Card>
-
-                  <Card>
-                    <CardHeader className="pb-3">
-                      <CardTitle className="text-base flex items-center gap-2">
-                        <span className="w-6 h-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center text-sm font-bold">2</span>
-                        Use Meaningful Names
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="text-sm text-muted-foreground">
-                      <p className="mb-2">
-                        Status names should clearly describe the state of work. Transition names should 
-                        be action-oriented.
-                      </p>
-                      <div className="flex items-center gap-2 mt-3">
-                        <Badge variant="outline" className="bg-green-50 text-green-700">✓ Good</Badge>
-                        <span>&quot;In Code Review&quot;, &quot;Start Work&quot;, &quot;Submit for Review&quot;</span>
+                      <div className="flex flex-col items-center px-4 py-3 bg-card rounded-lg border-2 border-blue-400/60 min-w-[80px]">
+                        <Clock className="size-5 text-blue-500 mb-1.5" />
+                        <span className="text-xs font-medium">In Progress</span>
                       </div>
-                      <div className="flex items-center gap-2 mt-2">
-                        <Badge variant="outline" className="bg-red-50 text-red-700">✗ Avoid</Badge>
-                        <span>&quot;Status 3&quot;, &quot;Move&quot;, &quot;Next&quot;</span>
+                    </div>
+                  </div>
+
+                  {/* Transition Properties */}
+                  <div>
+                    {/* ↓ matched: text-[16px] font-medium */}
+                    <p className="text-[16px] font-medium mb-3">Transition Properties</p>
+                    <div className="divide-y divide-border border rounded-lg">
+                      <div className="flex items-start gap-3 px-4 py-4">
+                        <div className="p-1.5 rounded-md bg-blue-500/10 shrink-0 mt-0.5">
+                          <Target className="size-3.5 text-blue-500" />
+                        </div>
+                        <div>
+                          <p className="text-sm font-medium">Name <span className="text-muted-foreground font-normal">(Optional)</span></p>
+                          <p className="text-xs text-muted-foreground mt-0.5">
+                            A friendly label shown when users change status.
+                            E.g., &quot;Start Work&quot;, &quot;Submit for Review&quot;, &quot;Approve&quot;
+                          </p>
+                        </div>
                       </div>
-                    </CardContent>
-                  </Card>
-
-                  <Card>
-                    <CardHeader className="pb-3">
-                      <CardTitle className="text-base flex items-center gap-2">
-                        <span className="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-sm font-bold">3</span>
-                        Allow Backward Transitions
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="text-sm text-muted-foreground">
-                      <p className="mb-2">
-                        Work doesn&apos;t always move forward. Include transitions for reopening or sending 
-                        back for revisions.
-                      </p>
-                      <div className="flex items-center gap-2 mt-3">
-                        <Badge variant="outline" className="bg-green-50 text-green-700">✓ Include</Badge>
-                        <span>&quot;Request Changes&quot;, &quot;Reopen&quot;, &quot;Move Back to Backlog&quot;</span>
+                      <div className="flex items-start gap-3 px-4 py-4">
+                        <div className="p-1.5 rounded-md bg-purple-500/10 shrink-0 mt-0.5">
+                          <Info className="size-3.5 text-purple-500" />
+                        </div>
+                        <div>
+                          <p className="text-sm font-medium">Description <span className="text-muted-foreground font-normal">(Optional)</span></p>
+                          <p className="text-xs text-muted-foreground mt-0.5">
+                            Additional instructions or notes for team members
+                            about when to use this transition.
+                          </p>
+                        </div>
                       </div>
-                    </CardContent>
-                  </Card>
-
-                  <Card>
-                    <CardHeader className="pb-3">
-                      <CardTitle className="text-base flex items-center gap-2">
-                        <span className="w-6 h-6 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center text-sm font-bold">4</span>
-                        Use Rules Sparingly
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="text-sm text-muted-foreground">
-                      <p className="mb-2">
-                        Too many restrictions can create bottlenecks. Only add rules where they provide 
-                        real value (like quality gates).
+                    </div>
+                  </div>
+
+                  {/* Pro tip */}
+                  <div className="flex items-start gap-3 px-4 py-3.5 rounded-lg border border-border bg-muted/20">
+                    <Lightbulb className="size-3.5 text-muted-foreground shrink-0 mt-0.5" />
+                    <div>
+                      <p className="text-sm font-medium">Pro Tip: Bidirectional Transitions</p>
+                      <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
+                        You can create transitions in both directions between two statuses.
+                        For example, &quot;In Progress → In Review&quot; (Submit) and &quot;In Review → In Progress&quot; (Request Changes).
+                        The workflow editor will offset the labels so they don&apos;t overlap.
                       </p>
-                      <div className="flex items-center gap-2 mt-3">
-                        <Badge variant="outline" className="bg-green-50 text-green-700">✓ Good</Badge>
-                        <span>Approval required for production deployments</span>
+                    </div>
+                  </div>
+                </section>
+              )}
+
+              {/* ── Rules & Permissions ── */}
+              {activeSection === "rules" && (
+                <section className="space-y-6">
+                  <div>
+                    {/* ↓ matched: text-[16px] font-medium */}
+                    <h2 className="text-[16px] font-medium mb-1">Rules & Permissions</h2>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      Control who can perform transitions with team-based rules and approval workflows.
+                    </p>
+                  </div>
+
+                  <div className="divide-y divide-border border rounded-lg">
+                    {[
+                      {
+                        icon: Users, color: "#3B82F6",
+                        title: "Allowed Teams",
+                        description: "Restrict the transition to members of specific teams only.",
+                        example: 'Only the "QA Team" can move items from "Fixed" to "Verified"',
+                      },
+                      {
+                        icon: Shield, color: "#8B5CF6",
+                        title: "Allowed Roles",
+                        description: "Restrict by workspace role (Admin, Member, Lead, Owner).",
+                        example: 'Only "Admin" and "Lead" roles can move items to "Done"',
+                      },
+                      {
+                        icon: CheckCircle2, color: "#10B981",
+                        title: "Requires Approval",
+                        description: "The transition creates an approval request instead of moving immediately.",
+                        example: 'Moving to "Production" requires approval from the "Release Team"',
+                      },
+                      {
+                        icon: Zap, color: "#F59E0B",
+                        title: "Auto-Transition",
+                        description: "Automatically perform the transition when conditions are met.",
+                        example: "Auto-move to Done when all subtasks are completed",
+                      },
+                    ].map(({ icon: Icon, color, title, description, example }) => (
+                      <div key={title} className="flex items-start gap-3 px-4 py-4">
+                        <div className="p-1.5 rounded-md shrink-0 mt-0.5" style={{ backgroundColor: `${color}15` }}>
+                          <Icon className="size-3.5" style={{ color }} />
+                        </div>
+                        <div className="space-y-1 flex-1 min-w-0">
+                          <p className="text-sm font-medium">{title}</p>
+                          <p className="text-xs text-muted-foreground">{description}</p>
+                          <div className="mt-1.5 px-2.5 py-1.5 bg-muted/40 rounded border border-border/50 text-xs">
+                            <span className="text-muted-foreground">Example: </span>
+                            <span>{example}</span>
+                          </div>
+                        </div>
                       </div>
-                      <div className="flex items-center gap-2 mt-2">
-                        <Badge variant="outline" className="bg-red-50 text-red-700">✗ Avoid</Badge>
-                        <span>Approval required for every status change</span>
+                    ))}
+                  </div>
+
+                  <Accordion type="single" collapsible className="w-full border rounded-lg overflow-hidden divide-y divide-border">
+                    <AccordionItem value="team-rules" className="border-none">
+                      <AccordionTrigger className="px-4 py-3 text-sm font-medium hover:no-underline hover:bg-muted/20 [&[data-state=open]]:bg-muted/20">
+                        <span className="flex items-center gap-2">
+                          <Users className="size-3.5 text-muted-foreground" />
+                          Setting Up Team-Based Rules
+                        </span>
+                      </AccordionTrigger>
+                      <AccordionContent className="px-4 pb-4 pt-2 space-y-3">
+                        <p className="text-xs text-muted-foreground">
+                          Team-based rules ensure that only appropriate team members can make certain transitions:
+                        </p>
+                        <ol className="list-decimal list-inside space-y-1.5 text-xs text-muted-foreground">
+                          <li>Click on a transition in the workflow editor</li>
+                          <li>Open the &quot;Edit Transition&quot; dialog</li>
+                          <li>In &quot;Access Control&quot;, select the allowed teams</li>
+                          <li>Optionally, restrict by member roles</li>
+                          <li>Save changes</li>
+                        </ol>
+                        <div className="px-3 py-2.5 bg-muted/40 rounded border border-border/50 text-xs text-muted-foreground">
+                          <strong>Note:</strong> If no teams are selected, all workspace members can perform the transition.
+                        </div>
+                      </AccordionContent>
+                    </AccordionItem>
+
+                    <AccordionItem value="approval-workflow" className="border-none">
+                      <AccordionTrigger className="px-4 py-3 text-sm font-medium hover:no-underline hover:bg-muted/20 [&[data-state=open]]:bg-muted/20">
+                        <span className="flex items-center gap-2">
+                          <CheckCircle2 className="size-3.5 text-muted-foreground" />
+                          Setting Up Approval Workflows
+                        </span>
+                      </AccordionTrigger>
+                      <AccordionContent className="px-4 pb-4 pt-2 space-y-3">
+                        <p className="text-xs text-muted-foreground">
+                          Approval workflows add a gate where designated approvers must confirm the transition:
+                        </p>
+                        <ol className="list-decimal list-inside space-y-1.5 text-xs text-muted-foreground">
+                          <li>Edit the transition you want to require approval</li>
+                          <li>Enable &quot;Requires Approval&quot; toggle</li>
+                          <li>Select the teams that can approve (Approver Teams)</li>
+                          <li>When a user tries this transition, an approval request is created</li>
+                          <li>An approver from the designated teams approves or rejects</li>
+                        </ol>
+                      </AccordionContent>
+                    </AccordionItem>
+
+                    <AccordionItem value="use-cases" className="border-none">
+                      <AccordionTrigger className="px-4 py-3 text-sm font-medium hover:no-underline hover:bg-muted/20 [&[data-state=open]]:bg-muted/20">
+                        <span className="flex items-center gap-2">
+                          <Lightbulb className="size-3.5 text-muted-foreground" />
+                          Common Use Cases
+                        </span>
+                      </AccordionTrigger>
+                      <AccordionContent className="px-4 pb-4 pt-2 space-y-2">
+                        {[
+                          {
+                            title: "Code Review Gate",
+                            desc: "In Progress → In Review: Anyone can submit, In Review → Done: Only \"Senior Dev\" team can approve",
+                          },
+                          {
+                            title: "QA Verification",
+                            desc: "Fixed → Verified: Only \"QA Team\" members can verify",
+                          },
+                          {
+                            title: "Production Release",
+                            desc: "Ready → Production: Requires approval from \"Release Managers\"",
+                          },
+                        ].map((item, i) => (
+                          <div key={i} className="px-3 py-2.5 bg-muted/40 rounded border border-border/50">
+                            <p className="text-xs font-medium mb-0.5">{item.title}</p>
+                            <p className="text-xs text-muted-foreground whitespace-pre-line">{item.desc}</p>
+                          </div>
+                        ))}
+                      </AccordionContent>
+                    </AccordionItem>
+                  </Accordion>
+                </section>
+              )}
+
+              {/* ── Best Practices ── */}
+              {activeSection === "best-practices" && (
+                <section className="space-y-6">
+                  <div>
+                    {/* ↓ matched: text-[16px] font-medium */}
+                    <h2 className="text-[16px] font-medium mb-1">Best Practices</h2>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      Follow these recommendations to create effective workflows for your team.
+                    </p>
+                  </div>
+
+                  <div className="divide-y divide-border border rounded-lg">
+                    {[
+                      {
+                        num: "1",
+                        title: "Keep It Simple",
+                        body: "Start with fewer statuses (4-6) and add more only if needed. Complex workflows with many statuses can slow down your team.",
+                        good: "To Do → In Progress → Review → Done",
+                        bad: "10+ statuses for simple projects",
+                      },
+                      {
+                        num: "2",
+                        title: "Use Meaningful Names",
+                        body: "Status names should clearly describe the state of work. Transition names should be action-oriented.",
+                        good: '"In Code Review", "Start Work", "Submit for Review"',
+                        bad: '"Status 3", "Move", "Next"',
+                      },
+                      {
+                        num: "3",
+                        title: "Allow Backward Transitions",
+                        body: "Work doesn't always move forward. Include transitions for reopening or sending back for revisions.",
+                        good: '"Request Changes", "Reopen", "Move Back to Backlog"',
+                        bad: undefined,
+                      },
+                      {
+                        num: "4",
+                        title: "Use Rules Sparingly",
+                        body: "Too many restrictions can create bottlenecks. Only add rules where they provide real value (like quality gates).",
+                        good: "Approval required for production deployments",
+                        bad: "Approval required for every status change",
+                      },
+                      {
+                        num: "5",
+                        title: "Consider Your Team Size",
+                        body: "Small teams (2-5 people) often work best with simple Kanban workflows. Larger teams benefit from more structured workflows with clear handoff points between roles or teams.",
+                        good: undefined,
+                        bad: undefined,
+                      },
+                    ].map(({ num, title, body, good, bad }) => (
+                      <div key={num} className="px-4 py-4">
+                        <div className="flex items-start gap-3">
+                          <span className="w-5 h-5 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold text-muted-foreground shrink-0 mt-0.5">
+                            {num}
+                          </span>
+                          <div className="flex-1 min-w-0 space-y-2">
+                            <p className="text-sm font-medium">{title}</p>
+                            <p className="text-xs text-muted-foreground">{body}</p>
+                            {(good || bad) && (
+                              <div className="space-y-1.5 pt-1">
+                                {good && (
+                                  <div className="flex items-start gap-2">
+                                    <Badge variant="outline" className="text-[10px] font-normal shrink-0 h-4 px-1.5 bg-muted text-foreground">✓ Good</Badge>
+                                    <span className="text-xs text-muted-foreground">{good}</span>
+                                  </div>
+                                )}
+                                {bad && (
+                                  <div className="flex items-start gap-2">
+                                    <Badge variant="outline" className="text-[10px] font-normal shrink-0 h-4 px-1.5 bg-muted text-foreground">✗ Avoid</Badge>
+                                    <span className="text-xs text-muted-foreground">{bad}</span>
+                                  </div>
+                                )}
+                              </div>
+                            )}
+                          </div>
+                        </div>
                       </div>
-                    </CardContent>
-                  </Card>
-
-                  <Card>
-                    <CardHeader className="pb-3">
-                      <CardTitle className="text-base flex items-center gap-2">
-                        <span className="w-6 h-6 rounded-full bg-red-100 text-red-600 flex items-center justify-center text-sm font-bold">5</span>
-                        Consider Your Team Size
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="text-sm text-muted-foreground">
-                      <p>
-                        Small teams (2-5 people) often work best with simple Kanban workflows. 
-                        Larger teams benefit from more structured workflows with clear handoff points 
-                        between roles or teams.
-                      </p>
-                    </CardContent>
-                  </Card>
-                </div>
+                    ))}
+                  </div>
 
-                <Card className="bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-950/30 dark:to-blue-950/30">
-                  <CardContent className="p-6">
-                    <h3 className="font-semibold mb-3">Ready to Create Your Workflow?</h3>
-                    <p className="text-sm text-muted-foreground mb-4">
-                      Go to a space in your workspace and create a new workflow from one of our templates, 
+                  {/* CTA */}
+                  <div className="rounded-lg border border-border bg-muted/20 px-4 py-4">
+                    <p className="text-sm font-medium mb-1">Ready to Create Your Workflow?</p>
+                    <p className="text-xs text-muted-foreground mb-4">
+                      Go to a space in your workspace and create a new workflow from one of our templates,
                       or build one from scratch.
                     </p>
-                    <Button asChild>
+                    <Button size="xs" asChild>
                       <Link href={`/workspaces/${workspaceId}/spaces`}>
-                        <GitBranch className="size-4 mr-2" />
+                        <GitBranch className="size-3 mr-1.5" />
                         Go to Spaces
                       </Link>
                     </Button>
-                  </CardContent>
-                </Card>
-              </div>
-            )}
-          </div>
-        </ScrollArea>
+                  </div>
+                </section>
+              )}
+
+            </main>
+          </ScrollArea>
+        </div>
       </div>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/src/app/(standalone)/layout.tsx b/src/app/(standalone)/layout.tsx
index debbb821..0bebeaf1 100644
--- a/src/app/(standalone)/layout.tsx
+++ b/src/app/(standalone)/layout.tsx
@@ -9,15 +9,7 @@ interface StandaloneLayoutProps {
 const StandaloneLayout = ({ children }: StandaloneLayoutProps) => {
   return (
     <main className="bg-background min-h-screen">
-      <div className="mx-auto max-w-screen-2xl ">
-
-
-
-
-        <div className="">
-          {children}
-        </div>
-      </div>
+      {children}
     </main>
   );
 };
diff --git a/src/app/(standalone)/workspaces/[workspaceId]/settings/client.tsx b/src/app/(standalone)/workspaces/[workspaceId]/settings/client.tsx
index 921069c1..488d82a3 100644
--- a/src/app/(standalone)/workspaces/[workspaceId]/settings/client.tsx
+++ b/src/app/(standalone)/workspaces/[workspaceId]/settings/client.tsx
@@ -28,9 +28,5 @@ export const WorkspaceIdSettingsClient = () => {
     return <PageError message="You need admin access to manage this workspace." />;
   }
 
-  return (
-    <div className="w-full flex items-center justify-center">
-      <EditWorkspaceForm initialValues={initialValues} />
-    </div>
-  );
+  return <EditWorkspaceForm initialValues={initialValues} />;
 };
\ No newline at end of file
diff --git a/src/app/(standalone)/workspaces/[workspaceId]/settings/layout.tsx b/src/app/(standalone)/workspaces/[workspaceId]/settings/layout.tsx
new file mode 100644
index 00000000..3bc082e8
--- /dev/null
+++ b/src/app/(standalone)/workspaces/[workspaceId]/settings/layout.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { Sidebar } from "@/components/sidebar";
+import { Navbar } from "@/components/navbar";
+
+interface SettingsLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function SettingsLayout({ children }: SettingsLayoutProps) {
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="flex w-full h-screen">
+        {/* Sidebar */}
+        <div className="fixed left-0 top-0 hidden lg:block lg:w-[264px] h-full overflow-y-auto">
+          <Sidebar />
+        </div>
+
+        {/* Main content area */}
+        <div className="lg:pl-[264px] w-full flex flex-col min-h-screen">
+          <Navbar />
+          <div className="flex-1 overflow-y-auto bg-background">
+            <main className="flex flex-col py-8 px-6">
+              {children}
+            </main>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 2b21fe81..6fc992c8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -383,4 +383,29 @@ body {
 
 .tippy-content {
   @apply p-0;
-}
\ No newline at end of file
+}
+/* ── ReactFlow MiniMap theme overrides ──────────────────────────────────
+   ReactFlow's bundled CSS hard-codes a white background on .react-flow__minimap
+   and the maskColor prop uses SVG fill attribute which doesn't support
+   CSS level-4 hsl() alpha syntax.  We override both here so all three
+   themes (light / dark / pitch-dark) are handled automatically via
+   CSS variables.
+   ──────────────────────────────────────────────────────────────────── */
+.react-flow__minimap {
+  background: hsl(var(--background)) !important;
+}
+
+.react-flow__minimap-mask {
+  fill: hsl(var(--muted)) !important;
+  fill-opacity: 0.65;
+}
+
+.react-flow__minimap .react-flow__minimap-node {
+  fill: hsl(var(--muted-foreground));
+  fill-opacity: 0.25;
+  stroke: hsl(var(--border));
+}
+
+.react-flow__minimap { background: hsl(var(--background)) !important; }
+.react-flow__minimap-mask { fill: hsl(var(--muted)) !important; fill-opacity: 0.65; }
+.react-flow__minimap .react-flow__minimap-node { fill: hsl(var(--muted-foreground)); fill-opacity: 0.25; stroke: hsl(var(--border)); }
\ No newline at end of file
diff --git a/src/components/account-lifecycle-provider.tsx b/src/components/account-lifecycle-provider.tsx
index 60e1bc76..caf1f98d 100644
--- a/src/components/account-lifecycle-provider.tsx
+++ b/src/components/account-lifecycle-provider.tsx
@@ -129,8 +129,9 @@ export function AccountLifecycleProvider({ children }: AccountLifecycleProviderP
             isOrg,
             isFullySetup: state.hasWorkspace ?? false,
             isLoaded,
-            // Restricted mode: ORG + not OWNER + no workspace
-            isRestrictedOrgMember: isOrg && !isOwner && !state.hasWorkspace,
+            // Restricted mode: (ORG OR has membership) + not OWNER + no workspace
+            // This ensures invited members see the holding state even if accountType is not yet synced
+            isRestrictedOrgMember: (isOrg || state.hasOrg) && !isOwner && !state.hasWorkspace,
             canCreateWorkspace,
             canManageAuthProviders,
         };
diff --git a/src/components/app-tour.tsx b/src/components/app-tour.tsx
index 232ede39..d87d1b54 100644
--- a/src/components/app-tour.tsx
+++ b/src/components/app-tour.tsx
@@ -21,7 +21,7 @@ import {
     Calendar
 } from "lucide-react";
 import { useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "next/navigation";
+import { useRouter, usePathname } from "next/navigation";
 import { useWorkspaceId } from "@/features/workspaces/hooks/use-workspace-id";
 import { useAccountLifecycle } from "./account-lifecycle-provider";
 import { ResponsiveModal } from "@/components/responsive-modal";
@@ -117,6 +117,7 @@ export const AppTour = () => {
 
     const queryClient = useQueryClient();
     const router = useRouter();
+    const pathname = usePathname();
     const workspaceId = useWorkspaceId();
 
     const [isTourActive, setIsTourActive] = useState(false);
@@ -128,19 +129,28 @@ export const AppTour = () => {
 
     // Initial check for tour eligibility
     useEffect(() => {
+        // DO NOT show tour invitation if user must accept legal terms or is blocked
+        if (state.mustAcceptLegal || state.legalBlocked) {
+            if (invitationTimerRef.current) clearTimeout(invitationTimerRef.current);
+            return;
+        }
+
+        // Only show tour on workspace-related paths
+        if (!pathname.startsWith("/workspaces/")) return;
+
         const storageKey = activeOrgId ? `app_tour_completed_${activeOrgId}` : `app_tour_completed_personal`;
         const hasCompleted = localStorage.getItem(storageKey);
 
-        if (!hasCompleted) {
+        if (!hasCompleted && !isTourActive && !showInvitation) {
             // Show invitation for both personal and org users on first dashboard load
-            // (Org users get a slightly longer delay to avoid overlapping with Trial Reward popup)
-            const delay = activeOrgId ? 5000 : 3000;
+            // (Org users get a slightly longer delay to avoid overlapping with other popups)
+            const delay = activeOrgId ? 8000 : 5000;
             invitationTimerRef.current = setTimeout(() => setShowInvitation(true), delay);
             return () => {
                 if (invitationTimerRef.current) clearTimeout(invitationTimerRef.current);
             };
         }
-    }, [activeOrgId, isPersonal]);
+    }, [activeOrgId, isPersonal, state.mustAcceptLegal, state.legalBlocked, pathname, isTourActive, showInvitation]);
 
     // Expose global trigger
     useEffect(() => {
diff --git a/src/components/breadcrumb.tsx b/src/components/breadcrumb.tsx
index 86080988..99927268 100644
--- a/src/components/breadcrumb.tsx
+++ b/src/components/breadcrumb.tsx
@@ -330,24 +330,24 @@ export const Breadcrumb = () => {
 
 function renderBreadcrumbs(breadcrumbs: Array<{ label: string; href?: string; isClickable?: boolean }>) {
   return (
-    <nav className="flex items-center space-x-1 text-sm text-muted-foreground">
+    <nav className="flex items-center space-x-2 text-sm text-muted-foreground">
       {breadcrumbs.map((breadcrumb, index) => (
         <div key={index} className="flex items-center">
           {index > 0 && (
-            <ChevronRight className="h-4 w-4 mx-1 text-muted-foreground/60" />
+            <ChevronRight className="h-3.5 w-3.5 mx-1.5 text-muted-foreground/60" />
           )}
           {breadcrumb.href && breadcrumb.isClickable && index < breadcrumbs.length - 1 ? (
             <Link
               href={breadcrumb.href}
               className={cn(
-                "text-xs transition-colors truncate max-w-32",
+                "text-sm transition-colors truncate max-w-48",
                 "hover:text-foreground cursor-pointer"
               )}
             >
               {breadcrumb.label}
             </Link>
           ) : (
-            <span className="text-foreground text-xs font-medium truncate max-w-32">
+            <span className="text-foreground text-sm font-medium truncate max-w-48">
               {breadcrumb.label}
             </span>
           )}
diff --git a/src/components/lifecycle-guard.tsx b/src/components/lifecycle-guard.tsx
index 254717c3..1e72a031 100644
--- a/src/components/lifecycle-guard.tsx
+++ b/src/components/lifecycle-guard.tsx
@@ -55,16 +55,27 @@ export function LifecycleGuard({ children }: LifecycleGuardProps) {
 
         // 1. Force Redirect (Server Authority)
         // If server explicitly says "Go here" AND we aren't already there.
+        // EXCEPTION: Allow access to any path in allowedPaths even if redirectTo is set.
         if (lifecycleRouting.redirectTo) {
             const targetPath = lifecycleRouting.redirectTo;
             const isAtTarget = pathname === targetPath || pathname.startsWith(targetPath + "/");
+            
+            // Check if current path is explicitly allowed despite the redirect target
+            const isAllowed = lifecycleRouting.allowedPaths.some(allowed => {
+                if (allowed === "*") return true;
+                if (allowed.endsWith("/*")) {
+                    const prefix = allowed.slice(0, -2);
+                    return pathname.startsWith(prefix);
+                }
+                return pathname === allowed || pathname.startsWith(allowed + "/");
+            });
 
-            if (!isAtTarget) {
+            if (!isAtTarget && !isAllowed) {
                 redirectingRef.current = true;
                 router.push(targetPath);
                 return;
             }
-            // We're at the redirect target - no further checks needed
+            // We're at the target or an allowed page - no further checks needed
             return;
         }
 
@@ -160,8 +171,16 @@ export function LifecycleGuard({ children }: LifecycleGuardProps) {
     }
 
     // Special Component Interception: Legal Acceptance
+    // We render children behind the modal to avoid a "total roadblock" feeling
     if (lifecycleState.isAuthenticated && (lifecycleState.mustAcceptLegal || lifecycleState.legalBlocked)) {
-        return <LegalAcceptanceModal />;
+        return (
+            <>
+                <div className="opacity-50 pointer-events-none grayscale-[0.5] blur-[2px]">
+                    {children}
+                </div>
+                <LegalAcceptanceModal />
+            </>
+        );
     }
 
     // If redirecting, show same skeleton (prevents flash)
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 35af0577..eb899f0c 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -37,8 +37,8 @@ export const Navbar = () => {
   const { title } = pathnameMap[pathnameKey] || defaultMap;
 
   return (
-    <nav id="navbar" className="py-[15px] px-6 flex items-center border-b border-border sticky top-0 left-0 right-0 z-10 justify-between bg-background">
-      <div className="flex flex-col ">
+    <nav id="navbar" className="h-[73px] px-6 flex items-center border-b border-border sticky top-0 z-10 bg-background justify-between w-full">
+      <div className="flex flex-col">
         <div className="hidden lg:flex">
           <Breadcrumb />
         </div>
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index a5958537..26ecae01 100644
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -39,8 +39,8 @@ export const Sidebar = () => {
   // ============================================================
   if (isAccessLoading && hasOrg) {
     return (
-      <aside className="h-full bg-sidebar w-full overflow-hidden border-r border-sidebar-border flex flex-col">
-        <div className="flex items-center w-full py-5 px-4 border-b border-sidebar-border flex-shrink-0">
+      <aside className="h-full bg-background w-full overflow-hidden border-r border-border flex flex-col">
+        <div className="flex items-center w-full h-[73px] px-6 border-b border-border flex-shrink-0">
           <Link href="/welcome">
             <Image src="/Logo.png" className="object-contain" alt="logo" width={80} height={90} />
           </Link>
@@ -89,8 +89,8 @@ export const Sidebar = () => {
   }
 
   return (
-    <aside id="sidebar" className="h-full bg-sidebar w-full overflow-hidden border-r border-sidebar-border flex flex-col">
-      <div className="flex items-center w-full py-5 px-4 border-b border-sidebar-border flex-shrink-0">
+    <aside id="sidebar" className="h-full bg-background w-full overflow-hidden border-r border-border flex flex-col">
+      <div className="flex items-center w-full h-[73px] px-6 border-b border-border flex-shrink-0">
         <Link href={hasWorkspace ? "/" : "/welcome"} className="flex items-center">
           <Image src="/Logo.png" className="object-contain" alt="logo" width={80} height={90} />
         </Link>
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 3b370fc5..a5cee548 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 30fc44d9..151c444d 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -6,25 +6,39 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 import { cn } from "@/lib/utils"
 
 const TooltipProvider = TooltipPrimitive.Provider
-
 const Tooltip = TooltipPrimitive.Root
-
 const TooltipTrigger = TooltipPrimitive.Trigger
 
+type TooltipSize = "xs" | "sm" | "md" | "lg"
+
+const sizeStyles: Record<TooltipSize, string> = {
+  xs: "px-2 py-1 text-xs",
+  sm: "px-2.5 py-1.5 text-sm",
+  md: "px-3 py-2 text-base",
+  lg: "px-4 py-2.5 text-lg",
+}
+
+interface TooltipContentProps
+  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
+  size?: TooltipSize
+}
+
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+  TooltipContentProps
+>(({ className, sideOffset = 4, size = "sm", ...props }, ref) => (
   <TooltipPrimitive.Content
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      sizeStyles[size],
       className
     )}
     {...props}
   />
 ))
+
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
\ No newline at end of file
diff --git a/src/config.ts b/src/config.ts
index 3e757d86..1d2e5267 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -122,20 +122,38 @@ export const BILLING_CURRENCY = process.env.BILLING_CURRENCY || "USD";
 
 // ===============================
 // Trial Credit Configuration
-/** Trial credit amount in USD (e.g., 30 = $30.00). Configurable via env. */
-export const TRIAL_CREDIT_USD = (() => {
-    const val = process.env.NEXT_PUBLIC_TRIAL_CREDIT_USD || process.env.TRIAL_CREDIT_USD || "30";
+/** Organization trial credit amount in USD (default: $30.00). */
+export const ORG_TRIAL_CREDIT_USD = (() => {
+    const val = process.env.NEXT_PUBLIC_ORG_TRIAL_CREDIT_USD || process.env.ORG_TRIAL_CREDIT_USD || "30";
     const parsed = parseFloat(val);
     return isNaN(parsed) ? 30 : parsed;
 })();
 
-/** Trial duration in days. Configurable via env. */
-export const TRIAL_CREDIT_DAYS = (() => {
-    const val = process.env.TRIAL_CREDIT_DAYS || "60";
+/** Organization trial duration in days (default: 60). */
+export const ORG_TRIAL_CREDIT_DAYS = (() => {
+    const val = process.env.ORG_TRIAL_CREDIT_DAYS || "60";
     const parsed = parseInt(val, 10);
     return isNaN(parsed) ? 60 : parsed;
 })();
 
+/** Personal trial credit amount in USD (default: $10.00). */
+export const PERSONAL_TRIAL_CREDIT_USD = (() => {
+    const val = process.env.NEXT_PUBLIC_PERSONAL_TRIAL_CREDIT_USD || process.env.PERSONAL_TRIAL_CREDIT_USD || "10";
+    const parsed = parseFloat(val);
+    return isNaN(parsed) ? 10 : parsed;
+})();
+
+/** Personal trial duration in days (default: 60). */
+export const PERSONAL_TRIAL_CREDIT_DAYS = (() => {
+    const val = process.env.PERSONAL_TRIAL_CREDIT_DAYS || "60";
+    const parsed = parseInt(val, 10);
+    return isNaN(parsed) ? 60 : parsed;
+})();
+
+// Legacy Aliases
+export const TRIAL_CREDIT_USD = ORG_TRIAL_CREDIT_USD;
+export const TRIAL_CREDIT_DAYS = ORG_TRIAL_CREDIT_DAYS;
+
 // ===============================
 // Wallet Security Configuration
 // ===============================
diff --git a/src/features/billing/api/index.ts b/src/features/billing/api/index.ts
index 879d80de..d2457429 100644
--- a/src/features/billing/api/index.ts
+++ b/src/features/billing/api/index.ts
@@ -2,3 +2,4 @@
 export { useGetBillingAccount } from "./use-get-billing-account";
 export { useGetBillingStatus } from "./use-get-billing-status";
 export { useSetupBilling } from "./use-setup-billing";
+export { useGetInvoices } from "./use-get-invoices";
diff --git a/src/features/billing/api/use-get-billing-account.ts b/src/features/billing/api/use-get-billing-account.ts
index f42ffcb7..5d646163 100644
--- a/src/features/billing/api/use-get-billing-account.ts
+++ b/src/features/billing/api/use-get-billing-account.ts
@@ -18,6 +18,8 @@ interface BillingAccountResponse {
     walletLockedBalance?: number;
     availableBalance?: number;
     walletCurrency?: string;
+    trialExpiresAt?: string;
+    initialTrialAmount?: number;
 }
 
 /**
diff --git a/src/features/billing/api/use-get-invoices.ts b/src/features/billing/api/use-get-invoices.ts
new file mode 100644
index 00000000..c112fce1
--- /dev/null
+++ b/src/features/billing/api/use-get-invoices.ts
@@ -0,0 +1,52 @@
+import { useQuery } from "@tanstack/react-query";
+import { client } from "@/lib/rpc";
+
+interface UseGetInvoicesProps {
+    billingAccountId?: string;
+    userId?: string;
+    organizationId?: string;
+    status?: string;
+    limit?: number;
+    offset?: number;
+    enabled?: boolean;
+}
+
+/**
+ * Fetch invoices from the billing feature
+ * Supports userId for personal accounts and organizationId for org accounts
+ */
+export const useGetInvoices = ({
+    billingAccountId,
+    userId,
+    organizationId,
+    status,
+    limit = 24,
+    offset = 0,
+    enabled = true,
+}: UseGetInvoicesProps) => {
+    const query = useQuery({
+        queryKey: ["billing-invoices", { billingAccountId, userId, organizationId, status, limit, offset }],
+        queryFn: async () => {
+            const response = await client.api.billing.invoices.$get({
+                query: {
+                    billingAccountId: billingAccountId || undefined,
+                    userId: userId || undefined,
+                    organizationId: organizationId || undefined,
+                    status: status || undefined,
+                    limit: limit.toString(),
+                    offset: offset.toString(),
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error("Failed to fetch billing invoices");
+            }
+
+            const { data } = await response.json();
+            return data;
+        },
+        enabled: enabled && (!!billingAccountId || !!userId || !!organizationId),
+    });
+
+    return query;
+};
diff --git a/src/features/billing/server/route.ts b/src/features/billing/server/route.ts
index 2831d14e..81bebd7f 100644
--- a/src/features/billing/server/route.ts
+++ b/src/features/billing/server/route.ts
@@ -10,6 +10,7 @@ import {
     BILLING_AUDIT_LOGS_ID,
     INVOICES_ID,
     WALLETS_ID,
+    WALLET_TRANSACTIONS_ID,
     BILLING_CURRENCY,
 } from "@/config";
 import { sessionMiddleware } from "@/lib/session-middleware";
@@ -143,6 +144,9 @@ const app = new Hono()
             // Get wallet balance
             let walletBalance = 0;
             let walletLockedBalance = 0;
+            let trialExpiresAt: string | undefined;
+            let initialTrialAmount = 0;
+
             try {
                 const walletQuery = queryOrgId
                     ? [Query.equal("organizationId", queryOrgId)]
@@ -155,11 +159,41 @@ const app = new Hono()
                 );
 
                 if (wallets.total > 0) {
-                    walletBalance = wallets.documents[0].balance;
-                    walletLockedBalance = wallets.documents[0].lockedBalance;
+                    const wallet = wallets.documents[0];
+                    walletBalance = wallet.balance;
+                    walletLockedBalance = wallet.lockedBalance;
+
+                    // CHECK FOR TRIAL CREDIT EXPIRATION
+                    // WHY: Trial credits have a 30/60 day expiration. We need to show this to the user.
+                    try {
+                        const trialTxns = await adminDatabases.listDocuments(
+                            DATABASE_ID,
+                            WALLET_TRANSACTIONS_ID,
+                            [
+                                Query.equal("walletId", wallet.$id),
+                                Query.equal("type", "TRIAL_CREDIT"),
+                                Query.limit(1),
+                            ]
+                        );
+
+                        if (trialTxns.total > 0) {
+                            const trialTx = trialTxns.documents[0];
+                            initialTrialAmount = trialTx.amount;
+                            if (trialTx.metadata) {
+                                try {
+                                    const meta = JSON.parse(trialTx.metadata);
+                                    if (meta.trialExpiresAt) {
+                                        trialExpiresAt = meta.trialExpiresAt;
+                                    }
+                                } catch { /* ignore parse errors */ }
+                            }
+                        }
+                    } catch (e) {
+                        console.error("[billing-account] Error fetching trial transactions:", e);
+                    }
                 }
-            } catch {
-                // Wallet not found, balance = 0
+            } catch (error) {
+                console.error("[billing-account] Error fetching wallet:", error);
             }
 
             // Calculate days until suspension if in DUE status
@@ -180,6 +214,8 @@ const app = new Hono()
                 availableBalance: walletBalance - walletLockedBalance,
                 needsSetup: false,
                 daysUntilSuspension,
+                trialExpiresAt,
+                initialTrialAmount,
                 currency: BILLING_CURRENCY,
             });
         }
diff --git a/src/features/custom-columns/components/custom-column-header.tsx b/src/features/custom-columns/components/custom-column-header.tsx
index a419ea00..33f370ea 100644
--- a/src/features/custom-columns/components/custom-column-header.tsx
+++ b/src/features/custom-columns/components/custom-column-header.tsx
@@ -13,7 +13,6 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useConfirm } from "@/hooks/use-confirm";
 
-import { useCreateWorkItemModal } from "@/features/sprints/hooks/use-create-work-item-modal";
 import { useDeleteCustomColumn } from "../api/use-delete-custom-column";
 
 import { CustomColumn } from "../types";
@@ -28,6 +27,7 @@ interface CustomColumnHeaderProps {
   onSortByPriority?: (columnId: string) => void;
   onSortByDueDate?: (columnId: string) => void;
   sortDirection?: 'asc' | 'desc';
+  onQuickCreate?: (columnId: string) => void;
 }
 
 export const CustomColumnHeader = ({
@@ -36,8 +36,8 @@ export const CustomColumnHeader = ({
   onSortByPriority,
   onSortByDueDate,
   sortDirection = 'asc',
+  onQuickCreate,
 }: CustomColumnHeaderProps) => {
-  const { open } = useCreateWorkItemModal();
   const { mutate: deleteCustomColumn } = useDeleteCustomColumn();
   const [ConfirmDialog, confirm] = useConfirm(
     "Delete Column",
@@ -70,7 +70,7 @@ export const CustomColumnHeader = ({
           <h2 className="text-sm font-semibold text-foreground">{customColumn.name}</h2>
         </div>
         <div className="flex items-center gap-2">
-          <Button onClick={() => open()} variant="ghost" size="icon" className="h-6 w-6 hover:bg-accent">
+          <Button onClick={() => onQuickCreate?.(customColumn.$id)} variant="ghost" size="icon" className="h-6 w-6 hover:bg-accent">
             <PlusIcon className="h-4 w-4 text-muted-foreground" />
           </Button>
           <DropdownMenu>
diff --git a/src/features/custom-columns/components/enhanced-data-kanban.tsx b/src/features/custom-columns/components/enhanced-data-kanban.tsx
index 70aaadf6..da225447 100644
--- a/src/features/custom-columns/components/enhanced-data-kanban.tsx
+++ b/src/features/custom-columns/components/enhanced-data-kanban.tsx
@@ -7,10 +7,28 @@ import {
   Draggable,
   type DropResult,
 } from "@hello-pangea/dnd";
-import { AlertCircle } from "lucide-react";
+import { AlertCircle, PlusIcon, X, CalendarIcon, UserPlus, CornerDownLeft, Check } from "lucide-react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { format } from "date-fns";
+import { 
+  DropdownMenu, 
+  DropdownMenuContent, 
+  DropdownMenuItem, 
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+} from "@/components/ui/dropdown-menu";
+import { MemberAvatar } from "@/features/members/components/member-avatar";
+import { PriorityIcon } from "@/features/tasks/components/priority-selector";
+import { WorkItemPriority } from "@/features/sprints/types";
+import { Badge } from "@/components/ui/badge";
 import { useConfirm } from "@/hooks/use-confirm";
 
 import { KanbanCard } from "@/features/tasks/components/kanban-card";
@@ -20,6 +38,7 @@ import { useCreateTaskModal } from "@/features/tasks/hooks/use-create-task-modal
 
 import { Task, TaskStatus } from "@/features/tasks/types";
 import { useBulkUpdateTasks } from "@/features/tasks/api/use-bulk-update-tasks";
+import { useCreateWorkItem } from "@/features/sprints/api/use-create-work-item";
 
 import { useWorkspaceId } from "@/features/workspaces/hooks/use-workspace-id";
 import { useGetProject } from "@/features/projects/api/use-get-project";
@@ -56,6 +75,7 @@ interface EnhancedDataKanbanProps {
   canDeleteTasks?: boolean;
   members?: Array<{ $id: string; name: string }>;
   projectId?: string; // Add optional projectId prop
+  activeSprintId?: string;
 }
 
 export const EnhancedDataKanban = ({
@@ -65,7 +85,8 @@ export const EnhancedDataKanban = ({
   canEditTasks = true,
   canDeleteTasks = true,
   members = [],
-  projectId
+  projectId,
+  activeSprintId,
 }: EnhancedDataKanbanProps) => {
   const workspaceId = useWorkspaceId();
 
@@ -154,6 +175,45 @@ export const EnhancedDataKanban = ({
   const [sortDirections, setSortDirections] = useState<Record<string, 'asc' | 'desc'>>({});
 
   const { mutate: bulkUpdateTasks } = useBulkUpdateTasks();
+  const { mutate: createWorkItem, isPending: isCreatingWorkItem } = useCreateWorkItem();
+  
+  const [quickCreateColumnId, setQuickCreateColumnId] = useState<string | null>(null);
+  const [quickCreateTitle, setQuickCreateTitle] = useState("");
+  const [quickCreateAssigneeIds, setQuickCreateAssigneeIds] = useState<string[]>([]);
+  const [quickCreateDueDate, setQuickCreateDueDate] = useState<Date | undefined>(undefined);
+  const [quickCreatePriority, setQuickCreatePriority] = useState<string>(WorkItemPriority.MEDIUM);
+
+  const resetQuickCreate = () => {
+    setQuickCreateTitle("");
+    setQuickCreateAssigneeIds([]);
+    setQuickCreateDueDate(undefined);
+    setQuickCreatePriority(WorkItemPriority.MEDIUM);
+    setQuickCreateColumnId(null);
+  };
+
+  const handleQuickCreate = (columnId: string) => {
+    if (!quickCreateTitle.trim()) {
+      setQuickCreateColumnId(null);
+      return;
+    }
+
+    if (!projectId) return;
+
+    createWorkItem({
+      title: quickCreateTitle,
+      status: columnId,
+      workspaceId,
+      projectId: projectId,
+      sprintId: activeSprintId,
+      assigneeIds: quickCreateAssigneeIds,
+      dueDate: quickCreateDueDate,
+      priority: quickCreatePriority,
+    }, {
+      onSuccess: () => {
+        resetQuickCreate();
+      }
+    });
+  };
 
   // Update ordered columns when allColumns changes
   useEffect(() => {
@@ -584,6 +644,10 @@ export const EnhancedDataKanban = ({
                                 onSortByPriority={() => handleSortByPriority(column.id)}
                                 onSortByDueDate={() => handleSortByDueDate(column.id)}
                                 sortDirection={sortDirections[column.id] || 'asc'}
+                                onQuickCreate={(_status) => {
+                                  setQuickCreateColumnId(column.id);
+                                  setQuickCreateTitle("");
+                                }}
                               />
                             ) : (
                               <CustomColumnHeader
@@ -595,6 +659,10 @@ export const EnhancedDataKanban = ({
                                 onSortByPriority={() => handleSortByPriority(column.id)}
                                 onSortByDueDate={() => handleSortByDueDate(column.id)}
                                 sortDirection={sortDirections[column.id] || 'asc'}
+                                onQuickCreate={(columnId) => {
+                                  setQuickCreateColumnId(columnId);
+                                  setQuickCreateTitle("");
+                                }}
                               />
                             )}
                           </div>
@@ -632,7 +700,281 @@ export const EnhancedDataKanban = ({
                                   </Draggable>
                                 ))}
                                 {provided.placeholder}
-                                {/* Add Task Button Removed for View-Only Kanban */}
+                                                                {canCreateTasks && (
+                                  <div className="mt-2 px-1">
+                                    {quickCreateColumnId === column.id ? (
+                                      <div className="bg-card rounded-xl border-2 border-primary shadow-lg overflow-hidden animate-in fade-in zoom-in-95 duration-200">
+                                        <div className="p-3">
+                                          <Input
+                                            autoFocus
+                                            placeholder="What needs to be done?"
+                                            value={quickCreateTitle}
+                                            onChange={(e) => setQuickCreateTitle(e.target.value)}
+                                            onKeyDown={(e) => {
+                                              if (e.key === "Enter") handleQuickCreate(column.id);
+                                              if (e.key === "Escape") {
+                                                setQuickCreateColumnId(null);
+                                                setQuickCreateTitle("");
+                                              }
+                                            }}
+                                            className="h-auto p-0 border-none bg-transparent text-sm font-medium focus-visible:ring-0 placeholder:text-muted-foreground/50 mb-3"
+                                            disabled={isCreatingWorkItem}
+                                          />
+
+                                          {/* Metadata Chips Row */}
+                                          {(quickCreateAssigneeIds.length > 0 || quickCreateDueDate || quickCreatePriority !== WorkItemPriority.MEDIUM) && (
+                                            <div className="flex flex-wrap gap-1.5 mb-3 animate-in fade-in slide-in-from-left-2 duration-300">
+                                              {/* Assignee Chips */}
+                                              {quickCreateAssigneeIds.map((id) => {
+                                                const member = members.find(m => m.$id === id);
+                                                if (!member) return null;
+                                                return (
+                                                  <Badge 
+                                                    key={id} 
+                                                    variant="secondary" 
+                                                    className="pl-1 pr-1.5 h-6 gap-1.5 text-[10px] font-medium bg-primary/5 hover:bg-primary/10 border-primary/10 transition-colors"
+                                                  >
+                                                    <MemberAvatar name={member.name} className="size-4" />
+                                                    <span className="max-w-[80px] truncate">{member.name}</span>
+                                                    <X 
+                                                      className="size-3 cursor-pointer text-muted-foreground hover:text-destructive transition-colors" 
+                                                      onClick={(e) => {
+                                                        e.stopPropagation();
+                                                        setQuickCreateAssigneeIds(prev => prev.filter(aid => aid !== id));
+                                                      }} 
+                                                    />
+                                                  </Badge>
+                                                );
+                                              })}
+
+                                              {/* Date Chip */}
+                                              {quickCreateDueDate && (
+                                                <Badge 
+                                                  variant="secondary" 
+                                                  className="h-6 gap-1.5 px-2 text-[10px] font-medium bg-amber-500/5 hover:bg-amber-500/10 border-amber-500/10 text-amber-600 transition-colors"
+                                                >
+                                                  <CalendarIcon className="size-3" />
+                                                  {format(quickCreateDueDate, "MMM d")}
+                                                  <X 
+                                                    className="size-3 cursor-pointer opacity-60 hover:opacity-100 transition-opacity" 
+                                                    onClick={(e) => {
+                                                      e.stopPropagation();
+                                                      setQuickCreateDueDate(undefined);
+                                                    }} 
+                                                  />
+                                                </Badge>
+                                              )}
+
+                                              {/* Priority Chip */}
+                                              {quickCreatePriority !== WorkItemPriority.MEDIUM && (
+                                                <Badge 
+                                                  variant="secondary" 
+                                                  className="h-6 gap-1.5 px-2 text-[10px] font-medium bg-muted/50 border-border/50 transition-colors"
+                                                >
+                                                  <PriorityIcon priority={quickCreatePriority} className="size-3" />
+                                                  {quickCreatePriority.charAt(0) + quickCreatePriority.slice(1).toLowerCase()}
+                                                  <X 
+                                                    className="size-3 cursor-pointer opacity-60 hover:opacity-100 transition-opacity" 
+                                                    onClick={(e) => {
+                                                      e.stopPropagation();
+                                                      setQuickCreatePriority(WorkItemPriority.MEDIUM);
+                                                    }} 
+                                                  />
+                                                </Badge>
+                                              )}
+                                            </div>
+                                          )}
+
+                                          <div className="flex items-center justify-between">
+                                            <div className="flex items-center gap-1">
+                                              <TooltipProvider delayDuration={300}>
+                                                {/* Assignee Selector */}
+                                                <Popover>
+                                                  <Tooltip>
+                                                    <TooltipTrigger asChild>
+                                                      <PopoverTrigger asChild>
+                                                        <Button 
+                                                          variant="ghost" 
+                                                          size="icon" 
+                                                          className={cn(
+                                                            "size-7 rounded-md hover:bg-accent",
+                                                            quickCreateAssigneeIds.length > 0 ? "text-primary" : "text-muted-foreground"
+                                                          )} 
+                                                          disabled={isCreatingWorkItem}
+                                                        >
+                                                          {quickCreateAssigneeIds.length === 1 ? (
+                                                            <MemberAvatar 
+                                                              name={members.find(m => m.$id === quickCreateAssigneeIds[0])?.name || ""} 
+                                                              imageUrl={undefined}
+                                                              className="size-5"
+                                                            />
+                                                          ) : quickCreateAssigneeIds.length > 1 ? (
+                                                            <div className="size-5 rounded-full bg-primary text-[10px] text-primary-foreground flex items-center justify-center font-bold">
+                                                              {quickCreateAssigneeIds.length}
+                                                            </div>
+                                                          ) : (
+                                                            <UserPlus className="size-3.5" />
+                                                          )}
+                                                        </Button>
+                                                      </PopoverTrigger>
+                                                    </TooltipTrigger>
+                                                    <TooltipContent side="bottom" className="text-[10px]">
+                                                      {quickCreateAssigneeIds.length > 0 
+                                                        ? `${quickCreateAssigneeIds.length} Assignee${quickCreateAssigneeIds.length > 1 ? 's' : ''}` 
+                                                        : "Add Assignee"}
+                                                    </TooltipContent>
+                                                  </Tooltip>
+                                                  <PopoverContent className="p-0 w-60" align="start">
+                                                    <div className="p-2 border-b">
+                                                      <p className="text-xs font-semibold px-2 py-1">Assign to...</p>
+                                                    </div>
+                                                    <div className="max-h-60 overflow-y-auto p-1">
+                                                      {members.map((member) => (
+                                                        <div
+                                                          key={member.$id}
+                                                          className="flex items-center justify-between px-2 py-1.5 hover:bg-accent rounded-md cursor-pointer transition-colors"
+                                                          onClick={() => {
+                                                            setQuickCreateAssigneeIds(prev => 
+                                                              prev.includes(member.$id) 
+                                                                ? prev.filter(id => id !== member.$id)
+                                                                : [...prev, member.$id]
+                                                            );
+                                                          }}
+                                                        >
+                                                          <div className="flex items-center gap-2">
+                                                            <MemberAvatar name={member.name} className="size-6" />
+                                                            <span className="text-sm">{member.name}</span>
+                                                          </div>
+                                                          {quickCreateAssigneeIds.includes(member.$id) && (
+                                                            <Check className="size-4 text-primary" />
+                                                          )}
+                                                        </div>
+                                                      ))}
+                                                    </div>
+                                                  </PopoverContent>
+                                                </Popover>
+                                                
+                                                {/* Date Selector */}
+                                                <Popover>
+                                                  <Tooltip>
+                                                    <TooltipTrigger asChild>
+                                                      <PopoverTrigger asChild>
+                                                        <Button 
+                                                          variant="ghost" 
+                                                          size="icon" 
+                                                          className={cn(
+                                                            "size-7 rounded-md hover:bg-accent",
+                                                            quickCreateDueDate ? "text-primary" : "text-muted-foreground"
+                                                          )} 
+                                                          disabled={isCreatingWorkItem}
+                                                        >
+                                                          <CalendarIcon className="size-3.5" />
+                                                        </Button>
+                                                      </PopoverTrigger>
+                                                    </TooltipTrigger>
+                                                    <TooltipContent side="bottom" className="text-[10px]">
+                                                      {quickCreateDueDate ? format(quickCreateDueDate, "PPP") : "Set Due Date"}
+                                                    </TooltipContent>
+                                                  </Tooltip>
+                                                  <PopoverContent className="w-auto p-0" align="start">
+                                                    <Calendar
+                                                      mode="single"
+                                                      selected={quickCreateDueDate}
+                                                      onSelect={setQuickCreateDueDate}
+                                                      initialFocus
+                                                    />
+                                                    <div className="p-2 border-t flex justify-end">
+                                                      <Button variant="ghost" size="xs" onClick={() => setQuickCreateDueDate(undefined)}>
+                                                        Clear
+                                                      </Button>
+                                                    </div>
+                                                  </PopoverContent>
+                                                </Popover>
+                                                
+                                                {/* Priority Selector */}
+                                                <DropdownMenu>
+                                                  <Tooltip>
+                                                    <TooltipTrigger asChild>
+                                                      <DropdownMenuTrigger asChild>
+                                                        <Button 
+                                                          variant="ghost" 
+                                                          size="icon" 
+                                                          className="size-7 rounded-md hover:bg-accent" 
+                                                          disabled={isCreatingWorkItem}
+                                                        >
+                                                          <PriorityIcon priority={quickCreatePriority} className="size-3.5" />
+                                                        </Button>
+                                                      </DropdownMenuTrigger>
+                                                    </TooltipTrigger>
+                                                    <TooltipContent side="bottom" className="text-[10px]">
+                                                      Priority: {quickCreatePriority}
+                                                    </TooltipContent>
+                                                  </Tooltip>
+                                                  <DropdownMenuContent align="start" className="w-40">
+                                                    <DropdownMenuLabel className="text-xs">Set Priority</DropdownMenuLabel>
+                                                    <DropdownMenuSeparator />
+                                                    {Object.values(WorkItemPriority).map((priority) => (
+                                                      <DropdownMenuItem 
+                                                        key={priority}
+                                                        onClick={() => setQuickCreatePriority(priority)}
+                                                        className="flex items-center gap-2 cursor-pointer"
+                                                      >
+                                                        <PriorityIcon priority={priority} className="size-3.5" />
+                                                        <span className="text-sm">{priority}</span>
+                                                        {quickCreatePriority === priority && (
+                                                          <Check className="size-4 ml-auto text-primary" />
+                                                        )}
+                                                      </DropdownMenuItem>
+                                                    ))}
+                                                  </DropdownMenuContent>
+                                                </DropdownMenu>
+                                              </TooltipProvider>
+                                            </div>
+
+                                            <div className="flex items-center gap-1.5">
+                                               <Button 
+                                                variant="ghost" 
+                                                size="icon" 
+                                                onClick={resetQuickCreate}
+                                                className="size-7 rounded-md hover:bg-destructive/10 hover:text-destructive text-muted-foreground"
+                                                disabled={isCreatingWorkItem}
+                                              >
+                                                <X className="size-3.5" />
+                                              </Button>
+                                              <Button 
+                                                size="sm" 
+                                                onClick={() => handleQuickCreate(column.id)} 
+                                                disabled={isCreatingWorkItem || !quickCreateTitle.trim()}
+                                                className="h-7 px-2.5 text-[11px] gap-1.5 rounded-md shadow-sm"
+                                              >
+                                                {isCreatingWorkItem ? (
+                                                  <div className="size-3 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
+                                                ) : (
+                                                  <>
+                                                    Save
+                                                    <CornerDownLeft className="size-3 opacity-60" />
+                                                  </>
+                                                )}
+                                              </Button>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    ) : (
+                                      <Button
+                                        variant="ghost"
+                                        className="w-full justify-start text-muted-foreground hover:text-foreground hover:bg-accent/50 h-9 text-[12px] px-3 group transition-all duration-200 rounded-lg border border-transparent hover:border-border/50"
+                                        onClick={() => {
+                                          setQuickCreateColumnId(column.id);
+                                          setQuickCreateTitle("");
+                                        }}
+                                      >
+                                        <PlusIcon className="h-4 w-4 mr-2 text-muted-foreground/60 group-hover:text-primary transition-colors" />
+                                        <span className="font-medium">Add Work Item</span>
+                                      </Button>
+                                    )}
+                                  </div>
+                                )}
                               </div>
                             )}
                           </Droppable>
diff --git a/src/features/organizations/components/organization-billing-settings.tsx b/src/features/organizations/components/organization-billing-settings.tsx
index 4617fc0f..67a3e873 100644
--- a/src/features/organizations/components/organization-billing-settings.tsx
+++ b/src/features/organizations/components/organization-billing-settings.tsx
@@ -497,32 +497,40 @@ export function OrganizationBillingSettings({
                             </AlertDescription>
                         </Alert>
 
-                        {/* Current Balance */}
-                        <div className="flex items-center justify-between p-4 rounded-lg border bg-muted/50">
-                            <div className="flex items-center gap-3">
-                                <div className={cn(
-                                    "p-2 rounded-full",
-                                    walletBalance > 0
-                                        ? "bg-green-100 dark:bg-green-900/30"
-                                        : "bg-orange-100 dark:bg-orange-900/30"
-                                )}>
-                                    {walletBalance > 0 ? (
-                                        <CheckCircle2 className="h-5 w-5 text-green-600" />
-                                    ) : (
-                                        <AlertTriangle className="h-5 w-5 text-orange-600" />
-                                    )}
-                                </div>
-                                <div>
-                                    <div className="text-2xl font-bold">
-                                        {new Intl.NumberFormat("en-US", {
-                                            style: "currency",
-                                            currency: walletCurrency,
-                                            minimumFractionDigits: 2,
-                                            maximumFractionDigits: 6,
-                                        }).format(walletBalance)}
+                        {/* Current Balance - PREMIUM ENHANCED SECTION */}
+                        <div className="relative overflow-hidden group border-none shadow-xl rounded-2xl bg-gradient-to-br from-blue-600 via-indigo-700 to-purple-800 p-8 text-white mb-6">
+                            {/* Animated shapes */}
+                            <div className="absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 bg-white/10 rounded-full blur-3xl" />
+                            <div className="absolute bottom-0 left-0 -ml-10 -mb-10 w-40 h-40 bg-blue-400/10 rounded-full blur-2xl" />
+
+                            <div className="relative z-10 flex flex-col md:flex-row md:items-end justify-between gap-6">
+                                <div className="space-y-1">
+                                    <span className="text-blue-200 text-xs uppercase tracking-widest font-bold">Total Available Balance</span>
+                                    <div className="flex items-baseline gap-2 mt-2">
+                                        <span className="text-6xl font-extrabold tracking-tighter">
+                                            {new Intl.NumberFormat("en-US", {
+                                                style: "currency",
+                                                currency: walletCurrency,
+                                                minimumFractionDigits: 2,
+                                                maximumFractionDigits: 6,
+                                            }).format(walletBalance)}
+                                        </span>
+                                        <span className="text-blue-200 font-medium text-lg uppercase">{walletCurrency}</span>
                                     </div>
-                                    <div className="text-sm text-muted-foreground">
-                                        Available Balance
+                                    <div className="flex items-center gap-2 mt-4 text-sm text-blue-100/80 bg-white/10 backdrop-blur-md w-fit px-3 py-1 rounded-full border border-white/10">
+                                        {walletBalance > 0 ? (
+                                            <CheckCircle2 className="h-4 w-4 text-emerald-400" />
+                                        ) : (
+                                            <AlertTriangle className="h-4 w-4 text-orange-400" />
+                                        )}
+                                        {walletBalance > 0 ? "Account in Good Standing" : "Top-up Required"}
+                                    </div>
+                                </div>
+
+                                <div className="hidden md:block">
+                                    <div className="flex flex-col items-end gap-2 text-[11px] text-blue-200/60 italic">
+                                        <span>* Balance used for AI, storage, and traffic</span>
+                                        <span>* Minimum top-up amount $1</span>
                                     </div>
                                 </div>
                             </div>
@@ -539,68 +547,74 @@ export function OrganizationBillingSettings({
                         )}
 
                         {/* Add Credits Section */}
-                        <div className="border rounded-lg border-dashed p-6">
-                            <div className="space-y-4">
-                                <div className="flex gap-2">
-                                    <div className="flex-1">
-                                        <Label htmlFor="topup-amount" className="text-sm font-medium mb-2 block">
-                                            Amount ($)
+                        <div className="border rounded-2xl bg-muted/30 p-6">
+                            <div className="flex flex-col md:flex-row items-center gap-6">
+                                <div className="flex-1 w-full space-y-4">
+                                    <div className="space-y-2">
+                                        <Label htmlFor="topup-amount" className="text-sm font-semibold">
+                                            Top-up Amount ($)
                                         </Label>
-                                        <Input
-                                            id="topup-amount"
-                                            type="number"
-                                            min="1"
-                                            step="100"
-                                            placeholder="500"
-                                            value={topupAmount}
-                                            onChange={(e) => setTopupAmount(e.target.value)}
-                                            disabled={isAddingCredits || !canManageBilling}
-                                        />
+                                        <div className="relative">
+                                            <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                                            <Input
+                                                id="topup-amount"
+                                                type="number"
+                                                min="1"
+                                                className="pl-9 h-12 text-lg font-bold"
+                                                placeholder="100"
+                                                value={topupAmount}
+                                                onChange={(e) => setTopupAmount(e.target.value)}
+                                                disabled={isAddingCredits || !canManageBilling}
+                                            />
+                                        </div>
                                     </div>
-                                </div>
 
-                                {/* Quick top-up amounts */}
-                                <div className="flex flex-wrap gap-2">
-                                    {[1, 5, 10, 25, 50].map((amt) => (
-                                        <Button
-                                            key={amt}
-                                            variant="outline"
-                                            size="sm"
-                                            onClick={() => setTopupAmount(String(amt))}
-                                            disabled={isAddingCredits || !canManageBilling}
-                                            className={cn(
-                                                "text-xs",
-                                                topupAmount === String(amt) && "border-primary bg-primary/10"
-                                            )}
-                                        >
-                                            ${amt}
-                                        </Button>
-                                    ))}
+                                    {/* Quick top-up amounts */}
+                                    <div className="flex flex-wrap gap-2">
+                                        {[5, 10, 25, 50, 100].map((amt) => (
+                                            <Button
+                                                key={amt}
+                                                variant="outline"
+                                                size="sm"
+                                                onClick={() => setTopupAmount(String(amt))}
+                                                disabled={isAddingCredits || !canManageBilling}
+                                                className={cn(
+                                                    "h-8 px-4 text-xs font-bold transition-all",
+                                                    topupAmount === String(amt) && "border-primary bg-primary/10 text-primary scale-105"
+                                                )}
+                                            >
+                                                ${amt}
+                                            </Button>
+                                        ))}
+                                    </div>
                                 </div>
 
-                                <Button
-                                    onClick={handleAddCredits}
-                                    disabled={isAddingCredits || !topupAmount || Number(topupAmount) < 1 || !canManageBilling}
-                                    className="w-full"
-                                    size="lg"
-                                >
-                                    {isAddingCredits ? (
-                                        <>
-                                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                            Processing...
-                                        </>
-                                    ) : (
-                                        <>
-                                            <Plus className="mr-2 h-4 w-4" />
-                                            Add {topupAmount ? `$${Number(topupAmount)}` : "$0"} to Wallet
-                                        </>
-                                    )}
-                                </Button>
-
-                                <p className="text-xs text-muted-foreground text-center">
-                                    Payments processed securely by Cashfree. Minimum $1.
-                                </p>
+                                <div className="w-full md:w-64 pt-4 md:pt-0">
+                                    <Button
+                                        onClick={handleAddCredits}
+                                        disabled={isAddingCredits || !topupAmount || Number(topupAmount) < 1 || !canManageBilling}
+                                        className="w-full h-24 flex-col gap-2 rounded-2xl shadow-lg hover:shadow-primary/20 transition-all"
+                                        size="lg"
+                                    >
+                                        {isAddingCredits ? (
+                                            <Loader2 className="h-6 w-6 animate-spin" />
+                                        ) : (
+                                            <Plus className="h-6 w-6" />
+                                        )}
+                                        <div className="flex flex-col items-center">
+                                            <span className="text-base font-bold">
+                                                {isAddingCredits ? "Processing..." : `Add $${topupAmount || '0'}`}
+                                            </span>
+                                            {!isAddingCredits && <span className="text-[10px] font-medium opacity-70">Credit Wallet Now</span>}
+                                        </div>
+                                    </Button>
+                                </div>
                             </div>
+                            
+                            <p className="mt-4 text-[11px] text-muted-foreground text-center flex items-center justify-center gap-2">
+                                <Info className="h-3 w-3" />
+                                Payments processed securely by Cashfree. Minimum $1. Credits are valid for AI & resource costs.
+                            </p>
                         </div>
                     </CardContent>
                 </Card>
diff --git a/src/features/organizations/server/route.ts b/src/features/organizations/server/route.ts
index 7503de7c..d2053dec 100644
--- a/src/features/organizations/server/route.ts
+++ b/src/features/organizations/server/route.ts
@@ -203,7 +203,7 @@ const app = new Hono()
             // ─── Trial Credit & Billing Setup (non-blocking) ───────────
             if (!isByob) {
                 try {
-                    const { TRIAL_CREDIT_USD, TRIAL_CREDIT_DAYS } = await import("@/config");
+                    const { ORG_TRIAL_CREDIT_USD, ORG_TRIAL_CREDIT_DAYS } = await import("@/config");
                     const { setupOrganizationBilling } = await import("@/features/billing/services/billing-service");
                     const { getOrCreateWallet, creditTrialToWallet } = await import("@/features/wallet/services/wallet-service");
 
@@ -219,17 +219,17 @@ const app = new Hono()
                     });
 
                     // 3. Credit Trial
-                    // console.log(`[org-creation] Crediting trial to wallet ${wallet.$id} (Amount: ${TRIAL_CREDIT_USD})...`);
+                    // console.log(`[org-creation] Crediting trial to wallet ${wallet.$id} (Amount: ${ORG_TRIAL_CREDIT_USD})...`);
                     const trialExpiresAt = new Date();
-                    trialExpiresAt.setDate(trialExpiresAt.getDate() + TRIAL_CREDIT_DAYS);
+                    trialExpiresAt.setDate(trialExpiresAt.getDate() + ORG_TRIAL_CREDIT_DAYS);
 
                     const creditResult = await creditTrialToWallet(
                         adminDatabases,
                         wallet.$id,
-                        TRIAL_CREDIT_USD,
+                        ORG_TRIAL_CREDIT_USD,
                         {
                             organizationId: organization.$id,
-                            description: `Welcome trial credit — $${TRIAL_CREDIT_USD} free for ${TRIAL_CREDIT_DAYS} days`,
+                            description: `Welcome trial credit — $${ORG_TRIAL_CREDIT_USD} free for ${ORG_TRIAL_CREDIT_DAYS} days`,
                             trialExpiresAt,
                         }
                     );
@@ -254,13 +254,12 @@ const app = new Hono()
                     } else {
                         console.error(`[org-creation] Trial credit failed: ${creditResult.error}`);
                     }
-                } catch (trialError: any) {
+                } catch (trialError: unknown) {
                     // Non-blocking: org creation succeeds even if trial credit fails
+                    const errorMessage = trialError instanceof Error ? trialError.message : String(trialError);
                     console.error("[org-creation] Trial credit setup failed (non-blocking):", {
-                        message: trialError?.message || "Unknown error",
-                        code: trialError?.code,
-                        response: trialError?.response,
-                        stack: trialError?.stack
+                        message: errorMessage,
+                        error: trialError
                     });
                 }
             }
diff --git a/src/features/spaces/components/space-role-badge.tsx b/src/features/spaces/components/space-role-badge.tsx
index 394641dd..aae70e60 100644
--- a/src/features/spaces/components/space-role-badge.tsx
+++ b/src/features/spaces/components/space-role-badge.tsx
@@ -98,9 +98,9 @@ export const MasterBadge = ({
   className 
 }: MasterBadgeProps) => {
   const sizeClasses = {
-    sm: "text-[9px] h-5 px-2 gap-1",
-    md: "text-[10px] h-6 px-2.5 gap-1.5",
-    lg: "text-xs h-7 px-3 gap-2",
+    sm: "text-[9px] font-medium h-5 px-2 gap-1 rounded-sm",
+    md: "text-[10px] h-6 px-2.5 gap-1.5 rounded-md",
+    lg: "text-xs h-7 px-3 gap-2 rounded-lg",
   };
 
   const iconSizes = {
@@ -115,7 +115,7 @@ export const MasterBadge = ({
       className={cn(
         "font-bold border-0 shadow-sm",
         sizeClasses[size],
-        "bg-purple-600 text-white",
+        "bg-blue-600 text-white",
         className
       )}
     >
diff --git a/src/features/sprints/components/create-work-item-modal.tsx b/src/features/sprints/components/create-work-item-modal.tsx
index 7f927299..24db7fc1 100644
--- a/src/features/sprints/components/create-work-item-modal.tsx
+++ b/src/features/sprints/components/create-work-item-modal.tsx
@@ -1,15 +1,13 @@
 "use client";
 
-import { Layers, Calendar } from "lucide-react";
-import { useEffect } from "react";
+import { Layers, Clock, Trophy, Flag, Upload } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import { format } from "date-fns";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import {
   Select,
   SelectContent,
@@ -32,37 +30,56 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Calendar as CalendarComponent } from "@/components/ui/calendar";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RichTextEditor } from "@/components/editor";
+import { DatePicker } from "@/components/date-picker";
+import { AssigneeMultiSelect } from "@/features/tasks/components/assignee-multi-select";
+import { LabelSelector } from "@/features/tasks/components/label-management";
+import { TypeSelector } from "@/features/tasks/components/type-selector";
+import { PrioritySelector } from "@/features/tasks/components/priority-selector";
+import { CreateTaskAttachmentUpload } from "@/features/attachments/components/create-task-attachment-upload";
+import { useUploadAttachment } from "@/features/attachments/hooks/use-upload-attachment";
 
 import { useWorkspaceId } from "@/features/workspaces/hooks/use-workspace-id";
 import { useGetProjects } from "@/features/projects/api/use-get-projects";
+import { useGetProject } from "@/features/projects/api/use-get-project";
 import { useGetMembers } from "@/features/members/api/use-get-members";
 import { useCreateWorkItem } from "../api/use-create-work-item";
 import { useGetEpics } from "../api/use-get-epics";
 import { useCreateWorkItemModal } from "../hooks/use-create-work-item-modal";
-import { WorkItemType, WorkItemStatus, WorkItemPriority } from "../types";
+import { WorkItemType, WorkItemStatus, WorkItemPriority, WorkItem } from "../types";
 import { cn } from "@/lib/utils";
 
 const formSchema = z.object({
   title: z.string().min(1, "Title is required"),
   type: z.nativeEnum(WorkItemType),
+  status: z.union([z.nativeEnum(WorkItemStatus), z.string()]),
   priority: z.nativeEnum(WorkItemPriority),
   projectId: z.string().min(1, "Project is required"),
+  sprintId: z.string().optional(),
   assigneeIds: z.array(z.string()).optional(),
   epicId: z.string().optional(),
   description: z.string().optional(),
+  startDate: z.date().optional(),
   dueDate: z.date().optional(),
+  storyPoints: z.number().min(0).optional(),
+  estimatedHours: z.number().min(0).optional(),
+  labels: z.array(z.string()).optional(),
+  flagged: z.boolean().optional().default(false),
 });
 
 export const CreateWorkItemModal = () => {
   const workspaceId = useWorkspaceId();
-  const { isOpen, close, projectId: preselectedProjectId } = useCreateWorkItemModal();
+  const { 
+    isOpen, 
+    close, 
+    projectId: preselectedProjectId,
+    sprintId: preselectedSprintId,
+    initialStatus: preselectedStatus
+  } = useCreateWorkItemModal();
   const { mutate: createWorkItem, isPending } = useCreateWorkItem();
+  const { mutate: uploadAttachment } = useUploadAttachment();
+  const [attachmentFiles, setAttachmentFiles] = useState<File[]>([]);
   
   const { data: projects } = useGetProjects({ workspaceId });
   const { data: members } = useGetMembers({ workspaceId });
@@ -93,15 +110,35 @@ export const CreateWorkItemModal = () => {
       form.reset({
         title: "",
         type: WorkItemType.TASK,
+        status: (preselectedStatus as WorkItemStatus) || WorkItemStatus.TODO,
         priority: WorkItemPriority.MEDIUM,
         projectId: preselectedProjectId || "",
+        sprintId: preselectedSprintId || undefined,
         assigneeIds: [],
         epicId: undefined,
         description: "",
+        startDate: undefined,
         dueDate: undefined,
+        storyPoints: undefined,
+        estimatedHours: undefined,
+        labels: [],
+        flagged: false,
       });
+      setAttachmentFiles([]);
     }
-  }, [isOpen, preselectedProjectId, form]);
+  }, [isOpen, preselectedProjectId, preselectedSprintId, preselectedStatus, form]);
+
+  const { data: project } = useGetProject({ projectId: selectedProjectId });
+  
+  const availableLabels = useMemo(() => {
+    const defaultLabels = [
+      "frontend", "backend", "bug", "feature", "urgent", "documentation",
+      "testing", "design", "security", "performance", "api", "ui/ux"
+    ];
+    const customLabels = project?.customLabels || [];
+    const customLabelNames = customLabels.map((l: { name: string }) => l.name);
+    return Array.from(new Set([...defaultLabels, ...customLabelNames]));
+  }, [project]);
 
   const onSubmit = (values: z.infer<typeof formSchema>) => {
     createWorkItem(
@@ -111,16 +148,35 @@ export const CreateWorkItemModal = () => {
         priority: values.priority,
         workspaceId,
         projectId: values.projectId,
-        status: WorkItemStatus.TODO,
+        sprintId: values.sprintId,
+        status: values.status,
         assigneeIds: values.assigneeIds || [],
         epicId: values.epicId,
         description: values.description,
+        startDate: values.startDate as unknown as Date,
         dueDate: values.dueDate as unknown as Date,
-        flagged: false,
+        flagged: values.flagged || false,
+        storyPoints: values.storyPoints,
+        estimatedHours: values.estimatedHours,
+        labels: values.labels,
       },
       {
-        onSuccess: () => {
+        onSuccess: (data) => {
+          // Upload attachments if any
+          if (attachmentFiles.length > 0 && data?.data) {
+            const taskId = (data.data as WorkItem).$id;
+            attachmentFiles.forEach((file) => {
+              const formData = new FormData();
+              formData.append("file", file);
+              formData.append("taskId", taskId);
+              formData.append("workspaceId", workspaceId);
+
+              uploadAttachment({ form: formData });
+            });
+          }
+
           form.reset();
+          setAttachmentFiles([]);
           close();
         },
       }
@@ -139,31 +195,33 @@ export const CreateWorkItemModal = () => {
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            {/* Project Selection */}
-            <FormField
-              control={form.control}
-              name="projectId"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Project *</FormLabel>
-                  <Select onValueChange={field.onChange} value={field.value}>
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select a project" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {projects?.documents.map((project) => (
-                        <SelectItem key={project.$id} value={project.$id}>
-                          {project.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+            {/* Project Selection - Hidden if preselected */}
+            {!preselectedProjectId && (
+              <FormField
+                control={form.control}
+                name="projectId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Project *</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a project" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {projects?.documents.map((project) => (
+                          <SelectItem key={project.$id} value={project.$id}>
+                            {project.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
 
             {/* Title Field */}
             <FormField
@@ -178,6 +236,7 @@ export const CreateWorkItemModal = () => {
                       placeholder="What needs to be done?"
                       disabled={isPending}
                       autoFocus
+                      className="h-11 shadow-sm"
                     />
                   </FormControl>
                   <FormMessage />
@@ -193,19 +252,15 @@ export const CreateWorkItemModal = () => {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Type</FormLabel>
-                    <Select onValueChange={field.onChange} value={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Type" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value={WorkItemType.STORY}>Story</SelectItem>
-                        <SelectItem value={WorkItemType.BUG}>Bug</SelectItem>
-                        <SelectItem value={WorkItemType.TASK}>Task</SelectItem>
-                        <SelectItem value={WorkItemType.EPIC}>Epic</SelectItem>
-                      </SelectContent>
-                    </Select>
+                    <FormControl>
+                      <TypeSelector
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        project={project ?? undefined}
+                        customTypes={project?.customWorkItemTypes}
+                        className="h-11 shadow-sm"
+                      />
+                    </FormControl>
                     <FormMessage />
                   </FormItem>
                 )}
@@ -216,32 +271,27 @@ export const CreateWorkItemModal = () => {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Priority</FormLabel>
-                    <Select onValueChange={field.onChange} value={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Priority" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value={WorkItemPriority.LOW}>Low</SelectItem>
-                        <SelectItem value={WorkItemPriority.MEDIUM}>Medium</SelectItem>
-                        <SelectItem value={WorkItemPriority.HIGH}>High</SelectItem>
-                        <SelectItem value={WorkItemPriority.URGENT}>Urgent</SelectItem>
-                      </SelectContent>
-                    </Select>
+                    <FormControl>
+                      <PrioritySelector
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        customPriorities={project?.customPriorities}
+                        className="h-11 shadow-sm"
+                      />
+                    </FormControl>
                     <FormMessage />
                   </FormItem>
                 )}
               />
             </div>
 
-            {/* Epic and Due Date */}
-            <div className="grid grid-cols-2 gap-4">
+            {/* Epic, Start Date, and Due Date */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <FormField
                 control={form.control}
                 name="epicId"
                 render={({ field }) => (
-                  <FormItem>
+                  <FormItem className="md:col-span-2">
                     <FormLabel>Epic (Optional)</FormLabel>
                     <Select
                       onValueChange={(value) => field.onChange(value === "none" ? undefined : value)}
@@ -249,7 +299,7 @@ export const CreateWorkItemModal = () => {
                       disabled={!selectedProjectId}
                     >
                       <FormControl>
-                        <SelectTrigger>
+                        <SelectTrigger className="h-11 shadow-sm">
                           <SelectValue placeholder="Select Epic">
                             {field.value ? (
                               <div className="flex items-center gap-1.5">
@@ -280,40 +330,28 @@ export const CreateWorkItemModal = () => {
                   </FormItem>
                 )}
               />
+              <FormField
+                control={form.control}
+                name="startDate"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Start Date (Optional)</FormLabel>
+                    <FormControl>
+                      <DatePicker {...field} className="h-11 shadow-sm w-full" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
               <FormField
                 control={form.control}
                 name="dueDate"
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Due Date (Optional)</FormLabel>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <FormControl>
-                          <Button
-                            variant="outline"
-                            className={cn(
-                              "w-full pl-3 text-left font-normal",
-                              !field.value && "text-muted-foreground"
-                            )}
-                          >
-                            {field.value ? (
-                              format(field.value, "PPP")
-                            ) : (
-                              <span>Pick a date</span>
-                            )}
-                            <Calendar className="ml-auto h-4 w-4 opacity-50" />
-                          </Button>
-                        </FormControl>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <CalendarComponent
-                          mode="single"
-                          selected={field.value}
-                          onSelect={field.onChange}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
+                    <FormControl>
+                      <DatePicker {...field} className="h-11 shadow-sm w-full" />
+                    </FormControl>
                     <FormMessage />
                   </FormItem>
                 )}
@@ -326,28 +364,111 @@ export const CreateWorkItemModal = () => {
               name="assigneeIds"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Assignee (Optional)</FormLabel>
-                  <Select
-                    onValueChange={(value) => field.onChange(value === "none" ? [] : [value])}
-                    value={field.value?.[0] || "none"}
-                  >
+                  <FormLabel>Assignees (Optional)</FormLabel>
+                  <FormControl>
+                    <AssigneeMultiSelect
+                      memberOptions={members?.documents.map(m => ({ id: m.$id, name: m.name, imageUrl: m.profileImageUrl })) || []}
+                      selectedAssigneeIds={field.value || []}
+                      onAssigneesChange={field.onChange}
+                      placeholder="Select assignees..."
+                      className="min-h-[44px] shadow-sm"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Labels, Story Points and Estimated Hours */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="labels"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Labels (Optional)</FormLabel>
                     <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select assignee" />
-                      </SelectTrigger>
+                      <LabelSelector
+                        selectedLabels={field.value || []}
+                        onLabelsChange={field.onChange}
+                        availableLabels={availableLabels}
+                        placeholder="Add labels..."
+                        className="h-11 shadow-sm w-full"
+                      />
                     </FormControl>
-                    <SelectContent>
-                      <SelectItem value="none">
-                        <span className="text-muted-foreground">Unassigned</span>
-                      </SelectItem>
-                      {members?.documents.map((member) => (
-                        <SelectItem key={member.$id} value={member.$id}>
-                          {member.name || member.email}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <FormMessage />
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="grid grid-cols-2 gap-2">
+                <FormField
+                  control={form.control}
+                  name="storyPoints"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="flex items-center gap-1.5">
+                        <Trophy className="size-3.5 text-amber-500" />
+                        Points
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          placeholder="0"
+                          value={field.value ?? ""}
+                          onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
+                          className="h-11 shadow-sm"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="estimatedHours"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="flex items-center gap-1.5">
+                        <Clock className="size-3.5 text-blue-500" />
+                        Hours
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          placeholder="0"
+                          value={field.value ?? ""}
+                          onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
+                          className="h-11 shadow-sm"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+
+            {/* Flagged */}
+            <FormField
+              control={form.control}
+              name="flagged"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center space-x-3 space-y-0 rounded-md border p-4 bg-muted/20">
+                  <FormControl>
+                    <Checkbox
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                  <div className="space-y-1 leading-none">
+                    <FormLabel className="flex items-center gap-2">
+                      <Flag className={cn("size-4", field.value && "fill-red-500 text-red-500")} />
+                      Flag this work item
+                    </FormLabel>
+                    <p className="text-[10px] text-muted-foreground">
+                      Mark as flagged for quick identification or urgency
+                    </p>
+                  </div>
                 </FormItem>
               )}
             />
@@ -360,11 +481,13 @@ export const CreateWorkItemModal = () => {
                 <FormItem>
                   <FormLabel>Description (Optional)</FormLabel>
                   <FormControl>
-                    <Textarea
-                      {...field}
-                      placeholder="Add more details about this work item..."
-                      disabled={isPending}
-                      rows={3}
+                    <RichTextEditor
+                      content={field.value ?? ""}
+                      onChange={field.onChange}
+                      placeholder="Add more details about this work item... Use @ to mention team members"
+                      workspaceId={workspaceId}
+                      projectId={selectedProjectId}
+                      minHeight="120px"
                     />
                   </FormControl>
                   <FormMessage />
@@ -372,7 +495,17 @@ export const CreateWorkItemModal = () => {
               )}
             />
 
-            {/* Action Buttons */}
+            {/* Attachments Section */}
+            <div className="space-y-2">
+              <FormLabel className="flex items-center gap-2">
+                <Upload className="size-4" />
+                Attachments (Optional)
+              </FormLabel>
+              <CreateTaskAttachmentUpload
+                files={attachmentFiles}
+                onFilesChange={setAttachmentFiles}
+              />
+            </div>
             <div className="flex items-center justify-end gap-2 pt-4">
               <Button
                 type="button"
diff --git a/src/features/sprints/hooks/use-create-work-item-modal.ts b/src/features/sprints/hooks/use-create-work-item-modal.ts
index 4246930c..c862d0b0 100644
--- a/src/features/sprints/hooks/use-create-work-item-modal.ts
+++ b/src/features/sprints/hooks/use-create-work-item-modal.ts
@@ -10,22 +10,36 @@ export const useCreateWorkItemModal = () => {
     "work-item-project",
     parseAsString.withDefault("").withOptions({ clearOnDefault: true })
   );
+  
+  const [sprintId, setSprintId] = useQueryState(
+    "work-item-sprint",
+    parseAsString.withDefault("").withOptions({ clearOnDefault: true })
+  );
+
+  const [initialStatus, setInitialStatus] = useQueryState(
+    "work-item-status",
+    parseAsString.withDefault("").withOptions({ clearOnDefault: true })
+  );
 
-  const open = (projectId?: string) => {
-    if (projectId) {
-      setProjectId(projectId);
-    }
+  const open = (projectId?: string, sprintId?: string, status?: string) => {
+    if (projectId) setProjectId(projectId);
+    if (sprintId) setSprintId(sprintId);
+    if (status) setInitialStatus(status);
     setIsOpen(true);
   };
 
   const close = () => {
     setIsOpen(false);
     setProjectId("");
+    setSprintId("");
+    setInitialStatus("");
   };
 
   return {
     isOpen,
     projectId,
+    sprintId,
+    initialStatus,
     open,
     close,
     setIsOpen,
diff --git a/src/features/sprints/schemas.ts b/src/features/sprints/schemas.ts
index 39b3015e..e55c2c4c 100644
--- a/src/features/sprints/schemas.ts
+++ b/src/features/sprints/schemas.ts
@@ -60,6 +60,7 @@ export const createWorkItemSchema = z.object({
   assigneeIds: z.array(z.string().trim().min(1)).default([]),
   description: z.string().nullable().optional(),
   flagged: z.boolean().default(false),
+  startDate: z.coerce.date().optional(),
   dueDate: z.coerce.date().optional(),
   estimatedHours: z
     .union([z.number().min(0), z.string(), z.undefined(), z.null()])
diff --git a/src/features/sprints/server/work-items-route.ts b/src/features/sprints/server/work-items-route.ts
index 0a3858db..407ebb72 100644
--- a/src/features/sprints/server/work-items-route.ts
+++ b/src/features/sprints/server/work-items-route.ts
@@ -727,6 +727,7 @@ const app = new Hono()
               ...data,
               key,
               position: highestPosition + 1000,
+              startDate: data.startDate?.toISOString(),
               dueDate: data.dueDate?.toISOString(),
               sprintId: targetSprintId,
             }
diff --git a/src/features/tasks/components/kanban-column-header.tsx b/src/features/tasks/components/kanban-column-header.tsx
index 42cfb6ef..57db915f 100644
--- a/src/features/tasks/components/kanban-column-header.tsx
+++ b/src/features/tasks/components/kanban-column-header.tsx
@@ -10,6 +10,7 @@ import {
   Calendar,
   AlertTriangleIcon,
   Settings2Icon,
+  PlusIcon,
 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
@@ -62,6 +63,7 @@ interface KanbanColumnHeaderProps {
   // WIP Limit props
   wipLimit?: number;
   onSetWipLimit?: (status: TaskStatus, limit: number | null) => void;
+  onQuickCreate?: (status: TaskStatus) => void;
 }
 
 export const KanbanColumnHeader = ({
@@ -76,6 +78,8 @@ export const KanbanColumnHeader = ({
   sortDirection = 'asc',
   wipLimit,
   onSetWipLimit,
+  canCreateTasks,
+  onQuickCreate,
 }: KanbanColumnHeaderProps) => {
   const icon = statusIconMap[board];
 
@@ -168,7 +172,16 @@ export const KanbanColumnHeader = ({
       )}
 
       <div className="flex items-center gap-2">
-
+        {canCreateTasks && (
+          <Button
+            onClick={() => onQuickCreate?.(board)}
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 hover:bg-accent"
+          >
+            <PlusIcon className="h-4 w-4 text-muted-foreground" />
+          </Button>
+        )}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" size="icon" className="h-6 w-6 hover:bg-accent">
diff --git a/src/features/tasks/components/task-view-switcher.tsx b/src/features/tasks/components/task-view-switcher.tsx
index 19788cd1..63ae479c 100644
--- a/src/features/tasks/components/task-view-switcher.tsx
+++ b/src/features/tasks/components/task-view-switcher.tsx
@@ -59,6 +59,8 @@ import { useGetMySpaceSprints } from "@/features/my-space/api/use-get-my-space-s
 
 import { useTaskFilters } from "../hooks/use-task-filters";
 import { TaskStatus, TaskPriority, PopulatedTask } from "../types";
+import { useCreateWorkItemModal } from "@/features/sprints/hooks/use-create-work-item-modal";
+import { PlusIcon } from "lucide-react";
 
 // Custom sliding TabsList for this component only
 interface SlidingTabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
@@ -258,6 +260,7 @@ export const TaskViewSwitcher = ({
   const [view, setView] = useQueryState("task-view", { defaultValue: "dashboard" });
   const [completeSprintOpen, setCompleteSprintOpen] = useState(false);
   const { mutate: bulkUpdate } = useBulkUpdateWorkItems();
+  const { open: openCreateWorkItem } = useCreateWorkItemModal();
 
   const workspaceId = useWorkspaceId();
   const paramProjectId = useProjectId();
@@ -453,14 +456,29 @@ export const TaskViewSwitcher = ({
           </SlidingTabsList>
 
           {isAdmin && view === "kanban" && setupState.activeSprint && !showMyTasksOnly && (
-            <Button
-              onClick={() => setCompleteSprintOpen(true)}
-              size="xs"
-              variant="outline"
-              className="w-full font-medium px-3 py-2 border-emerald-500/30 bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/20 hover:border-emerald-500/40 lg:w-auto dark:text-emerald-400"
-            >
-              Complete Sprint {setupState.activeSprint.name}
-            </Button>
+            <div className="flex items-center gap-x-2 w-full lg:w-auto">
+              {canCreateTasks && (
+                <Button
+                  onClick={() => openCreateWorkItem(
+                    paramProjectId || projectId || undefined,
+                    setupState.activeSprint?.$id
+                  )}
+                  size="xs"
+                  className="w-full font-medium px-3 py-2 lg:w-auto"
+                >
+                  <PlusIcon className="size-4 mr-2" />
+                  Create Work Item
+                </Button>
+              )}
+              <Button
+                onClick={() => setCompleteSprintOpen(true)}
+                size="xs"
+                variant="outline"
+                className="w-full font-medium px-3 py-2 border-emerald-500/30 bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/20 hover:border-emerald-500/40 lg:w-auto dark:text-emerald-400"
+              >
+                Complete Sprint {setupState.activeSprint.name}
+              </Button>
+            </div>
           )}
 
         </div>
@@ -535,6 +553,7 @@ export const TaskViewSwitcher = ({
                     canDeleteTasks={canDeleteTasks}
                     members={members?.documents ?? []}
                     projectId={paramProjectId || projectId || undefined}
+                    activeSprintId={setupState.activeSprint?.$id}
                   />
                 </Suspense>
               </ProjectSetupOverlay>
@@ -548,6 +567,7 @@ export const TaskViewSwitcher = ({
                   canDeleteTasks={canDeleteTasks}
                   members={members?.documents ?? []}
                   projectId={paramProjectId || projectId || undefined}
+                  activeSprintId={setupState.activeSprint?.$id}
                 />
               </Suspense>
             )}
diff --git a/src/features/usage/components/usage-kpi-cards.tsx b/src/features/usage/components/usage-kpi-cards.tsx
index 762e0bea..e51196a3 100644
--- a/src/features/usage/components/usage-kpi-cards.tsx
+++ b/src/features/usage/components/usage-kpi-cards.tsx
@@ -10,6 +10,8 @@ interface UsageKPICardsProps {
     isLoading: boolean;
     currency?: string;
     exchangeRate?: number;
+    walletBalance?: number;
+    walletCurrency?: string;
 }
 
 interface KPICardProps {
@@ -71,7 +73,9 @@ export function UsageKPICards({
     summary,
     isLoading,
     currency = "USD",
-    exchangeRate = 1
+    exchangeRate = 1,
+    walletBalance,
+    walletCurrency = "USD"
 }: UsageKPICardsProps) {
     if (isLoading) {
         return (
@@ -119,6 +123,17 @@ export function UsageKPICards({
 
     return (
         <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <KPICard
+                title="Wallet Balance"
+                value={walletBalance !== undefined ? new Intl.NumberFormat("en-US", {
+                    style: "currency",
+                    currency: walletCurrency,
+                    minimumFractionDigits: 2,
+                }).format(walletBalance) : "0.00"}
+                subtitle="Available for compute"
+                icon={<DollarSign className="h-5 w-5" />}
+                className="border-l-4 border-l-blue-600 bg-gradient-to-br from-blue-500/5 to-indigo-500/5"
+            />
             <KPICard
                 title="Traffic Used"
                 value={summary ? formatBytes(summary.trafficTotalBytes) : "0 B"}
diff --git a/src/features/wallet/services/wallet-service.ts b/src/features/wallet/services/wallet-service.ts
index 1f63e9ba..e9159a9a 100644
--- a/src/features/wallet/services/wallet-service.ts
+++ b/src/features/wallet/services/wallet-service.ts
@@ -974,7 +974,8 @@ export async function creditTrialToWallet(
     walletId: string,
     amount: number,
     options: {
-        organizationId: string;
+        organizationId?: string;
+        userId?: string;
         description: string;
         trialExpiresAt: Date;
     }
@@ -983,10 +984,14 @@ export async function creditTrialToWallet(
         return { success: false, error: "Amount must be positive" };
     }
 
-    const idempotencyKey = `trial-credit-${options.organizationId}`;
+    if (!options.organizationId && !options.userId) {
+        throw new Error("Either organizationId or userId is required for trial credit");
+    }
+
+    const idempotencyKey = `trial-credit-${options.organizationId || options.userId}`;
     try {
         // console.log(`[wallet-service] Attempting to credit trial to wallet ${walletId} (amount: ${amount})...`);
-        const { acquireProcessingLock, releaseProcessingLock } = await import("@/lib/processed-events-registry");
+        const { acquireProcessingLock } = await import("@/lib/processed-events-registry");
 
         // 1. Lock to prevent concurrent credit attempts
         if (!(await acquireProcessingLock(databases, `wallet_trial_credit:${idempotencyKey}`, "wallet"))) {
@@ -1024,7 +1029,7 @@ export async function creditTrialToWallet(
             amount: amountFixed,
             balanceBefore,
             balanceAfter,
-            referenceId: options.organizationId,
+            referenceId: options.organizationId || options.userId || "",
             timestamp: now,
         });
 
@@ -1046,7 +1051,8 @@ export async function creditTrialToWallet(
                 description: options.description || "Trial credit",
                 metadata: JSON.stringify({
                     trialExpiresAt: options.trialExpiresAt?.toISOString(),
-                    organizationId: options.organizationId,
+                    organizationId: options.organizationId || null,
+                    userId: options.userId || null,
                 }),
                 signature,
             }
@@ -1061,11 +1067,11 @@ export async function creditTrialToWallet(
         // console.log(`[wallet-service] Trial credit successful for ${walletId}. Transaction: ${transaction.$id}`);
 
         return { success: true, transaction };
-    } catch (error: any) {
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
         console.error(`[wallet-service] Error in creditTrialToWallet:`, {
-            message: error?.message,
-            code: error?.code,
-            stack: error?.stack
+            message: errorMessage,
+            error
         });
         const { releaseProcessingLock } = await import("@/lib/processed-events-registry");
         await releaseProcessingLock(databases, `wallet_trial_credit:${idempotencyKey}`, "wallet");
diff --git a/src/features/workflows/components/workflow-ai-chat.tsx b/src/features/workflows/components/workflow-ai-chat.tsx
index 49fca061..608ebd19 100644
--- a/src/features/workflows/components/workflow-ai-chat.tsx
+++ b/src/features/workflows/components/workflow-ai-chat.tsx
@@ -529,7 +529,7 @@ export const WorkflowAIChat = ({
             onChange={(e) => setQuestion(e.target.value)}
             onKeyDown={handleKeyDown}
             disabled={isProcessing || isLoadingContext}
-            className="min-h-[60px] max-h-[100px] pr-12 resize-none rounded-xl text-sm"
+            className="min-h-[60px] max-h-[100px] pr-12 resize-none rounded-xl text-xs"
             rows={2}
           />
           <Button
diff --git a/src/features/workflows/components/workflow-simple-view.tsx b/src/features/workflows/components/workflow-simple-view.tsx
index 2582de42..456f8775 100644
--- a/src/features/workflows/components/workflow-simple-view.tsx
+++ b/src/features/workflows/components/workflow-simple-view.tsx
@@ -401,7 +401,7 @@ export const WorkflowSimpleView = ({
           <div className="flex items-center gap-2">
             <Folder className="size-4 text-muted-foreground" />
             <span className="text-sm font-medium">Projects</span>
-            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-4">
+            <Badge variant="secondary" className="text-[10px] rounded-full px-1.5 py-0.5 h-4">
               {connectedProjects.length}
             </Badge>
           </div>
@@ -418,14 +418,14 @@ export const WorkflowSimpleView = ({
                     <LinkIcon className="size-3.5" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>Connect a project</TooltipContent>
+                <TooltipContent size="xs" side="left" sideOffset={8}>Connect a project</TooltipContent>
               </Tooltip>
             </TooltipProvider>
           )}
         </div>
 
         {connectedProjects.length > 0 ? (
-          <div className="space-y-1.5">
+          <div className="space-y-1.5 pl-3">
             {connectedProjects.map((project) => {
               const projectConflict = conflicts.find(c => c.projectId === project.$id);
               
@@ -433,17 +433,17 @@ export const WorkflowSimpleView = ({
                 <Link 
                   key={project.$id}
                   href={`/workspaces/${workspaceId}/projects/${project.$id}`}
-                  className="group flex items-center gap-2.5 p-2 rounded-lg hover:bg-muted/50 transition-colors"
+                  className="group flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 transition-colors"
                 >
                   <div 
-                    className="size-7 rounded-md flex items-center justify-center text-white font-medium text-xs shadow-sm"
+                    className="size-6 rounded-md flex items-center justify-center text-white font-medium text-xs shadow-sm"
                     style={{ backgroundColor: project.color || "#6366f1" }}
                   >
                     {project.name.charAt(0).toUpperCase()}
                   </div>
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-1.5">
-                      <span className="text-sm font-medium truncate group-hover:text-primary transition-colors">
+                      <span className="text-sm font-regular truncate   transition-colors">
                         {project.name}
                       </span>
                       {projectConflict && (
@@ -474,7 +474,7 @@ export const WorkflowSimpleView = ({
                             <RefreshCw className={`size-3 ${isSyncing ? 'animate-spin' : ''}`} />
                           </Button>
                         </TooltipTrigger>
-                        <TooltipContent>Sync statuses from project</TooltipContent>
+                        <TooltipContent size="xs" side="left" sideOffset={8}>Sync statuses from project</TooltipContent>
                       </Tooltip>
                     </TooltipProvider>
                   )}
@@ -495,7 +495,7 @@ export const WorkflowSimpleView = ({
                             <Unlink className="size-3" />
                           </Button>
                         </TooltipTrigger>
-                        <TooltipContent>Disconnect</TooltipContent>
+                        <TooltipContent size="xs" side="left" sideOffset={8}>Disconnect</TooltipContent>
                       </Tooltip>
                     </TooltipProvider>
                   )}
diff --git a/src/features/workflows/lib/workflow-ai.ts b/src/features/workflows/lib/workflow-ai.ts
index 696469de..99c7fbbe 100644
--- a/src/features/workflows/lib/workflow-ai.ts
+++ b/src/features/workflows/lib/workflow-ai.ts
@@ -84,7 +84,7 @@ The JSON MUST follow this exact structure (no markdown in the JSON):
 
 Respond with a helpful text answer first, followed by the JSON block if applicable.`;
 
-    const response = await aiService.generate(prompt, { maxTokens: 2000 });
+    const response = await aiService.generate(prompt, { maxTokens: 4000 });
     return response.text;
   }
 
diff --git a/src/features/workflows/server/ai-route.ts b/src/features/workflows/server/ai-route.ts
index 4f6b71df..69cbe831 100644
--- a/src/features/workflows/server/ai-route.ts
+++ b/src/features/workflows/server/ai-route.ts
@@ -236,26 +236,42 @@ const app = new Hono()
         // Get AI answer
         const answer = await workflowAI.answerWorkflowQuestion(question, context);
 
-        // Extract potential JSON action from the answer
+        // Extract potential JSON action from the trailing JSON block in the answer.
+        // Walk backward from the last '}' so we never greedily strip explanation text.
         let action: WorkflowAIAction | undefined = undefined;
+        let cleanAnswer = answer;
         try {
-          const jsonMatch = answer.match(/\{[\s\S]*\}/);
-          if (jsonMatch) {
-            const parsed = JSON.parse(jsonMatch[0]);
-            if (parsed.actionType === "suggest_workflow") {
-              action = {
-                type: "suggest_workflow",
-                data: parsed.data,
-              };
+          const lastBraceEnd = answer.lastIndexOf("}");
+          if (lastBraceEnd !== -1) {
+            let depth = 0;
+            let braceStart = -1;
+            for (let i = lastBraceEnd; i >= 0; i--) {
+              if (answer[i] === "}") depth++;
+              else if (answer[i] === "{") {
+                depth--;
+                if (depth === 0) { braceStart = i; break; }
+              }
+            }
+            if (braceStart !== -1) {
+              const jsonStr = answer.slice(braceStart, lastBraceEnd + 1);
+              const parsed = JSON.parse(jsonStr);
+              if (parsed.actionType === "suggest_workflow") {
+                action = {
+                  type: "suggest_workflow",
+                  data: parsed.data,
+                };
+                // Strip only this trailing JSON block from the visible answer
+                cleanAnswer = answer.slice(0, braceStart).trim();
+              }
             }
           }
         } catch {
-          // Ignore parse errors, just return text answer
+          // Ignore parse errors, keep full answer text
         }
 
         const response: WorkflowAIAnswer = {
           question,
-          answer: answer.replace(/\{[\s\S]*\}/, "").trim(), // Strip JSON from text answer
+          answer: cleanAnswer,
           timestamp: new Date().toISOString(),
           contextUsed: {
             statusesCount: context.summary.totalStatuses,
diff --git a/src/features/workflows/server/route.ts b/src/features/workflows/server/route.ts
index 93420aa5..4a4b5ba1 100644
--- a/src/features/workflows/server/route.ts
+++ b/src/features/workflows/server/route.ts
@@ -191,7 +191,7 @@ const app = new Hono()
               icon: status.icon,
               color: status.color,
               statusType: status.statusType,
-              category: status.statusType === StatusType.CLOSED ? "done" : (status.statusType === StatusType.OPEN ? "todo" : "in_progress"),
+              category: status.statusType === StatusType.CLOSED ? "DONE" : (status.statusType === StatusType.OPEN ? "TODO" : "IN_PROGRESS"),
               description: status.description,
               position: status.position,
               positionX: status.positionX || 0,
@@ -252,7 +252,7 @@ const app = new Hono()
                 icon: statusDef.icon || "Circle",
                 color: statusDef.color || "#6B7280",
                 statusType: statusDef.statusType || StatusType.OPEN,
-                category: statusDef.statusType === StatusType.CLOSED ? "done" : (statusDef.statusType === StatusType.OPEN ? "todo" : "in_progress"),
+                category: statusDef.statusType === StatusType.CLOSED ? "DONE" : (statusDef.statusType === StatusType.OPEN ? "TODO" : "IN_PROGRESS"),
                 position: statusDef.position ?? i,
                 positionX: i * 280 + 100, // Normalized grid
                 positionY: 200,
@@ -305,15 +305,15 @@ const app = new Hono()
               
               // Map status type based on name
               let statusType = StatusType.IN_PROGRESS;
-              let category = "in_progress";
+              let category = "IN_PROGRESS";
               const lowerName = column.name.toLowerCase();
               
               if (lowerName.includes("todo") || lowerName.includes("backlog") || lowerName.includes("open") || i === 0) {
                 statusType = StatusType.OPEN;
-                category = "todo";
+                category = "TODO";
               } else if (lowerName.includes("done") || lowerName.includes("close") || lowerName.includes("finish") || lowerName.includes("completed")) {
                 statusType = StatusType.CLOSED;
-                category = "done";
+                category = "DONE";
               }
 
               await databases.createDocument<WorkflowStatus>(
@@ -360,7 +360,7 @@ const app = new Hono()
                 icon: statusDef.icon,
                 color: statusDef.color,
                 statusType: statusDef.statusType,
-                category: statusDef.key === "DONE" ? "done" : (statusDef.statusType === StatusType.OPEN ? "todo" : "in_progress"),
+                category: ["TODO","ASSIGNED","IN_PROGRESS","IN_REVIEW","DONE","CUSTOM"].includes(statusDef.key) ? statusDef.key : (statusDef.statusType === StatusType.CLOSED ? "DONE" : (statusDef.statusType === StatusType.OPEN ? "TODO" : "IN_PROGRESS")),
                 position: statusDef.position,
                 positionX: statusDef.positionX || (statusDef.position * 250),
                 positionY: statusDef.positionY || 100,
@@ -801,7 +801,7 @@ const app = new Hono()
             icon: statusData.icon || "Circle",
             color: statusData.color,
             statusType: statusData.statusType || StatusType.OPEN,
-            category: (statusData.statusType || StatusType.OPEN) === StatusType.CLOSED ? "done" : ((statusData.statusType || StatusType.OPEN) === StatusType.OPEN ? "todo" : "in_progress"),
+            category: (statusData.statusType || StatusType.OPEN) === StatusType.CLOSED ? "DONE" : ((statusData.statusType || StatusType.OPEN) === StatusType.OPEN ? "TODO" : "IN_PROGRESS"),
             description: statusData.description || "",
             position,
             positionX: statusData.positionX || 0,
@@ -1653,6 +1653,77 @@ const app = new Hono()
         }
       }
 
+      // =========================================
+      // Create workflow statuses from project statuses that don't exist yet
+      // This bootstraps an empty workflow with the project's status columns
+      // =========================================
+      const existingStatusKeys = new Set(workflowStatuses.documents.map((s: WorkflowStatus) => s.key));
+      const existingStatusNames = new Set(workflowStatuses.documents.map((s: WorkflowStatus) => s.name.toLowerCase()));
+      const alreadyHasInitial = workflowStatuses.documents.some((s: WorkflowStatus) => s.isInitial);
+
+      const visibleProjectStatuses = allProjectStatuses.filter(ps => ps.isVisible);
+      let createdCount = 0;
+
+      for (let i = 0; i < visibleProjectStatuses.length; i++) {
+        const ps = visibleProjectStatuses[i];
+        if (existingStatusKeys.has(ps.key) || existingStatusNames.has(ps.name.toLowerCase())) {
+          continue; // Already exists in workflow
+        }
+
+        const upperKey = ps.key.toUpperCase();
+        let statusType: StatusType = StatusType.IN_PROGRESS;
+        let isFinal = false;
+
+        if (upperKey === "TODO" || upperKey === "BACKLOG" || upperKey === "ASSIGNED") {
+          statusType = StatusType.OPEN;
+        } else if (
+          upperKey === "DONE" ||
+          upperKey === "CLOSED" ||
+          upperKey === "CANCELLED" ||
+          upperKey === "COMPLETED"
+        ) {
+          statusType = StatusType.CLOSED;
+          isFinal = true;
+        }
+
+        // Only mark initial if no existing status is already initial AND this is the first one we're creating
+        const isInitial = !alreadyHasInitial && createdCount === 0;
+        const category =
+          statusType === StatusType.CLOSED
+            ? "DONE"
+            : statusType === StatusType.OPEN
+              ? "TODO"
+              : "IN_PROGRESS";
+
+        await databases.createDocument<WorkflowStatus>(
+          DATABASE_ID,
+          WORKFLOW_STATUSES_ID,
+          ID.unique(),
+          {
+            workspaceId: workflow.workspaceId,
+            workflowId,
+            name: ps.name,
+            key: ps.key,
+            icon: ps.icon || "Circle",
+            color: ps.color || "#6B7280",
+            statusType,
+            category,
+            description: "",
+            position: (workflowStatuses.documents.length - deletedCount) + createdCount,
+            positionX: 100 + (createdCount * 250),
+            positionY: 100,
+            isInitial,
+            isFinal,
+          },
+          [
+            Permission.read(Role.user(user.$id)),
+            Permission.write(Role.user(user.$id)),
+            Permission.delete(Role.user(user.$id)),
+          ]
+        );
+        createdCount++;
+      }
+
       // Clean up stale customWorkItemTypes entries
       // Only keep entries that match defaults or custom columns
       const validStatusNames = new Set(allProjectStatuses.map(s => s.name.toLowerCase()));
@@ -1679,6 +1750,7 @@ const app = new Hono()
           project: updatedProject,
           workflow: workflow,
           deletedStatuses: deletedCount,
+          createdStatuses: createdCount,
         },
       });
     }
@@ -2095,7 +2167,7 @@ const app = new Hono()
                 icon: projectStatus.icon,
                 color: projectStatus.color,
                 statusType: StatusType.OPEN,
-                category: "todo",
+                category: "TODO",
                 description: null,
                 position: newPosition,
                 // If visible, place on canvas; otherwise off canvas
diff --git a/src/features/workspaces/components/edit-workspace-form.tsx b/src/features/workspaces/components/edit-workspace-form.tsx
index 0ca70568..d1ce9f8d 100644
--- a/src/features/workspaces/components/edit-workspace-form.tsx
+++ b/src/features/workspaces/components/edit-workspace-form.tsx
@@ -2,15 +2,15 @@
 
 import { z } from "zod";
 import Image from "next/image";
-import { ImageIcon, ArrowLeftIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { ImageIcon, Settings, Trash2, Upload } from "lucide-react";
 import { useRef } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 import {
   Form,
   FormControl,
@@ -37,7 +37,6 @@ export const EditWorkspaceForm = ({
   onCancel,
   initialValues,
 }: EditWorkspaceFormProps) => {
-  const router = useRouter();
   const { mutate, isPending } = useUpdateWorkspace();
   const { mutate: deleteWorkspace, isPending: isDeletingWorkspace } =
     useDeleteWorkspace();
@@ -96,162 +95,153 @@ export const EditWorkspaceForm = ({
 
 
   return (
-    <div className="min-h-screen flex items-center justify-center px-4 py-12">
-      <div className="w-full max-w-2xl">
-        <DeleteDialog />
+    <div className="w-full max-w-3xl space-y-8">
+      <DeleteDialog />
 
-        {/* Header Section */}
-        <div className="mb-8 flex flex-col items-start">
-          <Button
-            size="sm"
-            variant="secondary"
-            onClick={
-              onCancel
-                ? onCancel
-                : () => router.push(`/workspaces/${initialValues.$id}`)
-            }
-            className="gap-2"
-          >
-            <ArrowLeftIcon className="size-4" />
-            Back
-          </Button>
+      {/* Page Header */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center justify-center size-10 rounded-lg bg-primary/10">
+          <Settings className="size-5 text-primary" />
         </div>
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Workspace Settings</h1>
+          <p className="text-sm text-muted-foreground">
+            Manage your workspace identity and configuration
+          </p>
+        </div>
+      </div>
 
-        {/* Main Settings Card */}
-        <Card className="w-full border border-border shadow-none rounded-2xl mb-8">
-          <CardContent className="p-8 md:p-10">
-            <Form {...form}>
-              <form onSubmit={form.handleSubmit(onSubmit)}>
-                <div className="space-y-8">
-                  {/* Workspace Icon Section */}
-                  <FormField
-                    control={form.control}
-                    name="image"
-                    render={({ field }) => (
-                      <div className="flex flex-col items-center text-center gap-y-6">
-                        <div>
-                          <h3 className="text-lg font-semibold mb-2">
-                            Workspace Icon
-                          </h3>
-                          <p className="text-sm text-muted-foreground">
-                            JPG, PNG, SVG or JPEG, max 1MB
-                          </p>
-                        </div>
-
-                        <div className="relative">
-                          {field.value ? (
-                            <div className="size-[120px] relative rounded-xl overflow-hidden ring-2 ring-primary ring-offset-2">
-                              <Image
-                                src={
-                                  field.value instanceof File
-                                    ? URL.createObjectURL(field.value)
-                                    : field.value
-                                }
-                                alt="Logo"
-                                fill
-                                className="object-cover"
-                                unoptimized
-                              />
-                            </div>
-                          ) : (
-                            <Avatar className="size-[120px] ring-2 ring-border">
-                              <AvatarFallback className="bg-muted">
-                                <ImageIcon className="size-[48px] text-muted-foreground" />
-                              </AvatarFallback>
-                            </Avatar>
-                          )}
+      <Separator />
+
+      {/* General Settings Card */}
+      <Card className="border border-border shadow-none">
+        <CardHeader>
+          <CardTitle className="text-base">General</CardTitle>
+          <CardDescription>
+            Update your workspace name and icon
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+
+              {/* Workspace Icon Row */}
+              <FormField
+                control={form.control}
+                name="image"
+                render={({ field }) => (
+                  <div className="flex items-center gap-5">
+                    {/* Avatar */}
+                    <div className="shrink-0">
+                      {field.value ? (
+                        <div className="size-16 relative rounded-lg overflow-hidden ring-2 ring-border">
+                          <Image
+                            src={
+                              field.value instanceof File
+                                ? URL.createObjectURL(field.value)
+                                : field.value
+                            }
+                            alt="Workspace icon"
+                            fill
+                            className="object-cover"
+                            unoptimized
+                          />
                         </div>
-
+                      ) : (
+                        <Avatar className="size-16 rounded-lg">
+                          <AvatarFallback className="rounded-lg bg-muted">
+                            <ImageIcon className="size-6 text-muted-foreground" />
+                          </AvatarFallback>
+                        </Avatar>
+                      )}
+                    </div>
+
+                    {/* Label + Actions */}
+                    <div className="flex flex-col gap-1.5">
+                      <p className="text-sm font-medium leading-none">Workspace Icon</p>
+                      <p className="text-xs text-muted-foreground">
+                        JPG, PNG, SVG or JPEG — max 1MB
+                      </p>
+                      <div className="flex items-center gap-2 mt-1">
                         <input
                           className="hidden"
-                          accept=".jpg, .png, .jpeg, .svg"
+                          accept=".jpg,.png,.jpeg,.svg"
                           type="file"
                           ref={inputRef}
                           onChange={handleImageChange}
                           disabled={isPending}
                         />
-
-                        <div className="flex flex-col gap-y-2 sm:flex-row gap-x-2">
-                          {field.value ? (
-                            <>
-                              <Button
-                                variant="outline"
-                                type="button"
-                                disabled={isPending}
-                                onClick={() => inputRef.current?.click()}
-                              >
-                                Change Image
-                              </Button>
-                              <Button
-                                variant="destructive"
-                                type="button"
-                                disabled={isPending}
-                                onClick={() => {
-                                  field.onChange(null);
-                                  if (inputRef.current) {
-                                    inputRef.current.value = "";
-                                  }
-                                }}
-                              >
-                                Remove Image
-                              </Button>
-                            </>
-                          ) : (
-                            <Button
-                              variant="outline"
-                              type="button"
-                              disabled={isPending}
-                              onClick={() => inputRef.current?.click()}
-                            >
-                              <ImageIcon className="size-4 mr-2" />
-                              Upload Image
-                            </Button>
-                          )}
-                        </div>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          type="button"
+                          disabled={isPending}
+                          onClick={() => inputRef.current?.click()}
+                          className="h-8 text-xs gap-1.5"
+                        >
+                          <Upload className="size-3" />
+                          {field.value ? "Change" : "Upload"}
+                        </Button>
+                        {field.value && (
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            type="button"
+                            disabled={isPending}
+                            onClick={() => {
+                              field.onChange(null);
+                              if (inputRef.current) inputRef.current.value = "";
+                            }}
+                            className="h-8 text-xs text-destructive hover:text-destructive hover:bg-destructive/10"
+                          >
+                            Remove
+                          </Button>
+                        )}
                       </div>
-                    )}
-                  />
-
-                  <div className="h-px bg-border" />
-
-                  {/* Workspace Name Section */}
-                  <FormField
-                    control={form.control}
-                    name="name"
-                    render={({ field }) => (
-                      <FormItem className="space-y-3">
-                        <div>
-                          <FormLabel className="text-base font-semibold">
-                            Workspace Name
-                          </FormLabel>
-                          <p className="text-sm text-muted-foreground mt-1">
-                            The name of your workspace
-                          </p>
-                        </div>
+                    </div>
+                  </div>
+                )}
+              />
+
+              <Separator />
+
+              {/* Workspace Name Row */}
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <div className="flex flex-col sm:flex-row sm:items-start gap-4">
+                      <div className="sm:w-48 shrink-0">
+                        <FormLabel className="text-sm font-medium">Workspace Name</FormLabel>
+                        <p className="text-xs text-muted-foreground mt-0.5">
+                          Visible to all members
+                        </p>
+                      </div>
+                      <div className="flex-1">
                         <FormControl>
                           <Input
                             placeholder="Enter workspace name"
-                            className="h-11 text-base rounded-lg"
+                            className="h-9"
                             {...field}
                           />
                         </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-
-                <div className="h-px bg-border my-8" />
+                        <FormMessage className="mt-1.5" />
+                      </div>
+                    </div>
+                  </FormItem>
+                )}
+              />
 
-                {/* Action Buttons */}
-                <div className="flex flex-col-reverse sm:flex-row gap-4 justify-center">
+              <div className="flex justify-end pt-2">
+                <div className="flex items-center gap-3">
                   {onCancel && (
                     <Button
                       type="button"
                       variant="outline"
                       onClick={onCancel}
                       disabled={isPending}
-                      className="sm:flex-1"
+                      size="sm"
                     >
                       Cancel
                     </Button>
@@ -259,44 +249,49 @@ export const EditWorkspaceForm = ({
                   <Button
                     type="submit"
                     disabled={isPending}
-                    className="sm:flex-1"
-                    size="lg"
+                    size="sm"
                   >
                     Save Changes
                   </Button>
                 </div>
-              </form>
-            </Form>
-          </CardContent>
-        </Card>
-
-        {/* Danger Zone Card */}
-        <Card className="w-full border-2 border-destructive/20 bg-destructive/10 rounded-2xl">
-          <CardContent className="p-3 md:p-4">
-            <div className="flex flex-col text-center">
-              <h3 className="text-xl font-bold text-destructive mb-3">
-                Danger Zone
-              </h3>
-              <p className="text-sm  text-muted-foreground mb-2">
-                Deleting a workspace is irreversible and will remove all associated data.
+              </div>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+
+      {/* Danger Zone Card */}
+      <Card className="border border-destructive/30">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Trash2 className="size-4 text-destructive" />
+            <CardTitle className="text-base text-destructive">Danger Zone</CardTitle>
+          </div>
+          <CardDescription>
+            Irreversible actions that permanently affect your workspace
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 rounded-lg border border-destructive/20 bg-destructive/5 p-4">
+            <div>
+              <p className="text-sm font-medium">Delete this workspace</p>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                Once deleted, all data including projects, tasks, and members will be permanently removed.
               </p>
-
-              <div className="h-px bg-destructive/20 mb-4" />
-
-              <Button
-                size="sm"
-                variant="destructive"
-                type="button"
-                disabled={isPending || isDeletingWorkspace}
-                onClick={handleDelete}
-                className="w-full sm:w-auto mx-auto"
-              >
-                Delete Workspace
-              </Button>
             </div>
-          </CardContent>
-        </Card>
-      </div>
+            <Button
+              size="sm"
+              variant="destructive"
+              type="button"
+              disabled={isPending || isDeletingWorkspace}
+              onClick={handleDelete}
+              className="shrink-0"
+            >
+              Delete Workspace
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 };
diff --git a/src/features/workspaces/server/route.ts b/src/features/workspaces/server/route.ts
index 72f3cbcf..5c76df03 100644
--- a/src/features/workspaces/server/route.ts
+++ b/src/features/workspaces/server/route.ts
@@ -218,6 +218,55 @@ const app = new Hono()
         });
       }
 
+      // ─── Trial Credit & Billing Setup (non-blocking) for Personal First Workspace ───────────
+      if (isFirstWorkspace && accountType === "PERSONAL") {
+        try {
+          const { PERSONAL_TRIAL_CREDIT_USD, PERSONAL_TRIAL_CREDIT_DAYS } = await import("@/config");
+          const { setupPersonalBilling } = await import("@/features/billing/services/billing-service");
+          const { getOrCreateWallet, creditTrialToWallet } = await import("@/features/wallet/services/wallet-service");
+          const { createAdminClient } = await import("@/lib/appwrite");
+          const { users } = await createAdminClient();
+
+          // 1. Billing account
+          await setupPersonalBilling(user.$id, {
+            billingEmail: user.email,
+          });
+
+          // 2. Wallet
+          const wallet = await getOrCreateWallet(databases, {
+            userId: user.$id,
+          });
+
+          // 3. Credit Trial
+          const trialExpiresAt = new Date();
+          trialExpiresAt.setDate(trialExpiresAt.getDate() + PERSONAL_TRIAL_CREDIT_DAYS);
+
+          const creditResult = await creditTrialToWallet(
+            databases,
+            wallet.$id,
+            PERSONAL_TRIAL_CREDIT_USD,
+            {
+              userId: user.$id,
+              description: `Welcome trial credit — $${PERSONAL_TRIAL_CREDIT_USD} free for ${PERSONAL_TRIAL_CREDIT_DAYS} days`,
+              trialExpiresAt,
+            }
+          );
+
+          if (creditResult.success) {
+            // Update user prefs to reflect trial status
+            await users.updatePrefs(user.$id, {
+              ...user.prefs,
+              trialCreditGranted: true,
+              trialCreditExpiresAt: trialExpiresAt.toISOString(),
+              isTrialExpired: false,
+            });
+          }
+        } catch (trialError: unknown) {
+          const errorMessage = trialError instanceof Error ? trialError.message : String(trialError);
+          console.error("[workspace-creation] Personal trial credit setup failed:", errorMessage);
+        }
+      }
+
       return c.json({ data: workspace });
     }
   )
diff --git a/src/lib/identity-lifecycle.ts b/src/lib/identity-lifecycle.ts
index be4d4017..81e9a7a1 100644
--- a/src/lib/identity-lifecycle.ts
+++ b/src/lib/identity-lifecycle.ts
@@ -382,12 +382,11 @@ async function resolveUserLifecycleStateInternal(
     // ROUND 1: Fetch org membership + workspace membership IN PARALLEL
     // These two are completely independent of each other
     const [orgMembershipResult, workspaceMembershipResult] = await Promise.all([
-        // Query 1: Org membership
-        accountType === "ORG"
-            ? databases.listDocuments(DATABASE_ID, ORGANIZATION_MEMBERS_ID, [Query.equal("userId", user.$id)]).catch(() => ({ documents: [] as Record<string, string>[], total: 0 }))
-            : Promise.resolve({ documents: [] as Record<string, string>[], total: 0 }),
+        // Query 1: Org membership - ALWAYS fetch to detect invitations/memberships
+        // This is critical for users who are invited but haven't set their accountType yet
+        databases.listDocuments(DATABASE_ID, ORGANIZATION_MEMBERS_ID, [Query.equal("userId", user.$id)]).catch(() => ({ documents: [] as Models.Document[], total: 0 })),
         // Query 2: Workspace membership
-        databases.listDocuments(DATABASE_ID, MEMBERS_ID, [Query.equal("userId", user.$id), Query.limit(1)]).catch(() => ({ documents: [], total: 0 })),
+        databases.listDocuments(DATABASE_ID, MEMBERS_ID, [Query.equal("userId", user.$id), Query.limit(1)]).catch(() => ({ documents: [] as Models.Document[], total: 0 })),
     ]);
 
     // Process workspace membership result
@@ -397,7 +396,9 @@ async function resolveUserLifecycleStateInternal(
     }
 
     // Process org membership result
-    if (accountType === "ORG" && orgMembershipResult.total > 0) {
+    // We check memberships even if accountType is PERSONAL or null to detect invitations
+    let effectiveAccountType = accountType;
+    if (orgMembershipResult.total > 0) {
         const primaryMembership = orgMembershipResult.documents.find(m => m.organizationId === orgId)
             || orgMembershipResult.documents[0];
 
@@ -405,18 +406,22 @@ async function resolveUserLifecycleStateInternal(
         orgId = primaryMembership.organizationId;
         orgRole = primaryMembership.role as typeof orgRole;
         orgMemberStatus = primaryMembership.status as OrgMemberStatus;
+
+        // CRITICAL: If user has an org membership, treat as ORG account regardless of preference.
+        // This ensures invited members see the restricted views even if they previously chose PERSONAL.
+        effectiveAccountType = "ORG";
     }
 
     // ROUND 2: Fetch org doc + billing IN PARALLEL
     // Both depend on orgId from Round 1, but are independent of each other
-    const orgDocPromise = (accountType === "ORG" && hasOrg && orgId)
+    const orgDocPromise = (effectiveAccountType === "ORG" && hasOrg && orgId)
         ? databases.getDocument(DATABASE_ID, ORGANIZATIONS_ID, orgId).catch(() => null)
         : Promise.resolve(null);
 
     const billingPromise = (() => {
-        if (accountType === "ORG" && orgId) {
+        if (effectiveAccountType === "ORG" && orgId) {
             return databases.listDocuments(DATABASE_ID, BILLING_ACCOUNTS_ID, [Query.equal("organizationId", orgId), Query.limit(1)]).catch(() => ({ documents: [], total: 0 }));
-        } else if (accountType === "PERSONAL") {
+        } else if (effectiveAccountType === "PERSONAL") {
             return databases.listDocuments(DATABASE_ID, BILLING_ACCOUNTS_ID, [Query.equal("userId", user.$id), Query.limit(1)]).catch(() => ({ documents: [], total: 0 }));
         }
         return Promise.resolve({ documents: [] as { status?: string }[], total: 0 });
@@ -487,13 +492,13 @@ async function resolveUserLifecycleStateInternal(
     }
 
     // DERIVE FINAL STATE
-    if (accountType === "PERSONAL") {
+    if (effectiveAccountType === "PERSONAL") {
         if (!hasWorkspace) {
             const routing = getLifecycleRouting(LifecycleState.PERSONAL_ONBOARDING);
             return {
                 state: LifecycleState.PERSONAL_ONBOARDING,
                 userId: user.$id,
-                accountType,
+                accountType: effectiveAccountType,
                 orgId: null,
                 orgName: null,
                 orgImageUrl: null,
@@ -506,9 +511,9 @@ async function resolveUserLifecycleStateInternal(
                 billingStatus,
                 mustAcceptLegal,
                 legalBlocked: false,
-                isTrialExpired: false,
-                trialCreditGranted: false,
-                trialCreditExpiresAt: null,
+                isTrialExpired: user.prefs?.isTrialExpired === true,
+                trialCreditGranted: user.prefs?.trialCreditGranted === true,
+                trialCreditExpiresAt: user.prefs?.trialCreditExpiresAt ?? null,
                 ...routing,
             };
         }
@@ -517,7 +522,7 @@ async function resolveUserLifecycleStateInternal(
         return {
             state: LifecycleState.PERSONAL_ACTIVE,
             userId: user.$id,
-            accountType,
+            accountType: effectiveAccountType,
             orgId: null,
             orgName: null,
             orgImageUrl: null,
@@ -530,20 +535,20 @@ async function resolveUserLifecycleStateInternal(
             billingStatus,
             mustAcceptLegal,
             legalBlocked: false,
-            isTrialExpired: false,
-            trialCreditGranted: false,
-            trialCreditExpiresAt: null,
+            isTrialExpired: user.prefs?.isTrialExpired === true,
+            trialCreditGranted: user.prefs?.trialCreditGranted === true,
+            trialCreditExpiresAt: user.prefs?.trialCreditExpiresAt ?? null,
             ...routing,
         };
     }
 
-    if (accountType === "ORG") {
+    if (effectiveAccountType === "ORG") {
         if (!hasOrg) {
             const routing = getLifecycleRouting(LifecycleState.ORG_OWNER_ONBOARDING);
             return {
                 state: LifecycleState.ORG_OWNER_ONBOARDING,
                 userId: user.$id,
-                accountType,
+                accountType: effectiveAccountType,
                 orgId: null,
                 orgName: null,
                 orgImageUrl: null,
@@ -568,7 +573,7 @@ async function resolveUserLifecycleStateInternal(
             return {
                 state: LifecycleState.ORG_MEMBER_PENDING,
                 userId: user.$id,
-                accountType,
+                accountType: effectiveAccountType,
                 orgId,
                 orgName,
                 orgImageUrl,
@@ -594,7 +599,7 @@ async function resolveUserLifecycleStateInternal(
                 return {
                     state: LifecycleState.ORG_OWNER_NO_WORKSPACE,
                     userId: user.$id,
-                    accountType,
+                    accountType: effectiveAccountType,
                     orgId,
                     orgName,
                     orgImageUrl,
@@ -618,7 +623,7 @@ async function resolveUserLifecycleStateInternal(
             return {
                 state: LifecycleState.ORG_OWNER_ACTIVE,
                 userId: user.$id,
-                accountType,
+                accountType: effectiveAccountType,
                 orgId,
                 orgName,
                 orgImageUrl,
@@ -644,7 +649,7 @@ async function resolveUserLifecycleStateInternal(
                 return {
                     state: LifecycleState.ORG_ADMIN_NO_WORKSPACE,
                     userId: user.$id,
-                    accountType,
+                    accountType: effectiveAccountType,
                     orgId,
                     orgName,
                     orgImageUrl,
@@ -668,7 +673,7 @@ async function resolveUserLifecycleStateInternal(
             return {
                 state: LifecycleState.ORG_ADMIN_ACTIVE,
                 userId: user.$id,
-                accountType,
+                accountType: effectiveAccountType,
                 orgId,
                 orgName,
                 orgImageUrl,
@@ -693,7 +698,7 @@ async function resolveUserLifecycleStateInternal(
             return {
                 state: LifecycleState.ORG_MEMBER_NO_WORKSPACE,
                 userId: user.$id,
-                accountType,
+                accountType: effectiveAccountType,
                 orgId,
                 orgName,
                 orgImageUrl,
@@ -717,7 +722,7 @@ async function resolveUserLifecycleStateInternal(
         return {
             state: LifecycleState.ORG_MEMBER_ACTIVE,
             userId: user.$id,
-            accountType,
+            accountType: effectiveAccountType,
             orgId,
             orgName,
             orgImageUrl,
@@ -741,7 +746,7 @@ async function resolveUserLifecycleStateInternal(
     return {
         state: LifecycleState.UNAUTHENTICATED,
         userId: user.$id,
-        accountType,
+        accountType: effectiveAccountType,
         orgId: null,
         orgName: null,
         orgImageUrl: null,