diff --git a/resources/js/pages/Scenarios/Show.tsx b/resources/js/pages/Scenarios/Show.tsx
index cdbebde..cd15e10 100644
--- a/resources/js/pages/Scenarios/Show.tsx
+++ b/resources/js/pages/Scenarios/Show.tsx
@@ -1,5 +1,7 @@
 import { Head, Link, router } from '@inertiajs/react';
 import { useState } from 'react';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
 
 interface Scenario {
     id: string;
@@ -89,6 +91,12 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
     const [editingBucket, setEditingBucket] = useState<Bucket | null>(null);
     const [formData, setFormData] = useState({ ...defaultFormData });
 
+    const openCreateModal = () => {
+        setEditingBucket(null);
+        setFormData({ ...defaultFormData });
+        setIsModalOpen(true);
+    };
+
     const handleEdit = (bucket: Bucket) => {
         setEditingBucket(bucket);
         const bufferStr = bucket.buffer_multiplier.toString();
@@ -237,118 +245,147 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
                     <div className="space-y-6">
                         <div className="flex items-center justify-between">
                             <h2 className="text-xl font-semibold text-gray-900">Buckets</h2>
-                            <button 
-                                onClick={() => {
-                                    setEditingBucket(null);
-                                    setFormData({ ...defaultFormData });
-                                    setIsModalOpen(true);
-                                }}
+                            <button
+                                onClick={openCreateModal}
                                 className="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500"
                             >
                                 + Add Bucket
                             </button>
                         </div>
                         
-                        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                            {buckets.data.map((bucket) => (
-                                <div
-                                    key={bucket.id}
-                                    className={`rounded-lg bg-white p-6 shadow transition-shadow hover:shadow-lg border-l-4 ${bucketTypeBorderColor[bucket.type]}`}
-                                >
-                                    <div className="flex items-start justify-between">
-                                        <div className="flex-1">
-                                            <h3 className="text-lg font-semibold text-gray-900">
-                                                {bucket.name}
-                                            </h3>
-                                            <p className="text-sm text-gray-600 mt-1">
-                                                Priority {bucket.priority} • {bucket.type_label} • {bucket.allocation_type_label}
-                                            </p>
+                        {buckets.data.length === 0 ? (
+                            <Card className="mx-auto max-w-lg text-center">
+                                <CardHeader>
+                                    <CardTitle>Set up your buckets</CardTitle>
+                                    <CardDescription>
+                                        Income flows through your pipeline into prioritized buckets.
+                                        Start by creating buckets for your spending categories.
+                                    </CardDescription>
+                                </CardHeader>
+                                <CardContent>
+                                    <div className="space-y-3 text-left">
+                                        <div className={`rounded-md border-l-4 ${bucketTypeBorderColor.need} bg-blue-50 px-4 py-3`}>
+                                            <p className="font-medium text-gray-900">Need</p>
+                                            <p className="text-sm text-gray-600">Essential expenses: rent, bills, groceries</p>
                                         </div>
-                                        <div className="flex items-center gap-1">
-                                            <button
-                                                onClick={() => handlePriorityChange(bucket.id, 'up')}
-                                                disabled={bucket.priority === 1}
-                                                className="p-1 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
-                                                title="Move up in priority"
-                                            >
-                                                <svg className="w-3 h-3 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-                                                </svg>
-                                            </button>
-                                            <button
-                                                onClick={() => handlePriorityChange(bucket.id, 'down')}
-                                                disabled={bucket.priority === buckets.data.length}
-                                                className="p-1 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
-                                                title="Move down in priority"
-                                            >
-                                                <svg className="w-3 h-3 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                                                </svg>
-                                            </button>
-                                            <span className="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">
-                                                #{bucket.priority}
-                                            </span>
+                                        <div className={`rounded-md border-l-4 ${bucketTypeBorderColor.want} bg-green-50 px-4 py-3`}>
+                                            <p className="font-medium text-gray-900">Want</p>
+                                            <p className="text-sm text-gray-600">Discretionary spending: dining, hobbies, entertainment</p>
+                                        </div>
+                                        <div className={`rounded-md border-l-4 ${bucketTypeBorderColor.overflow} bg-amber-50 px-4 py-3`}>
+                                            <p className="font-medium text-gray-900">Overflow</p>
+                                            <p className="text-sm text-gray-600">Catches all remaining funds — one per scenario</p>
                                         </div>
                                     </div>
-                                    
-                                    <div className="mt-4">
-                                        <div className="flex items-center justify-between">
-                                            <span className="text-sm text-gray-600">Current Balance</span>
-                                            <span className="text-lg font-semibold text-gray-900">
-                                                ${bucket.current_balance.toFixed(2)}
-                                            </span>
-                                        </div>
-                                        
-                                        <div className="mt-2">
-                                            <span className="text-sm text-gray-600">
-                                                Allocation: {formatAllocationValue(bucket)}
-                                            </span>
-                                            {bucket.allocation_type === 'fixed_limit' && bucket.buffer_multiplier > 0 && (
-                                                <span className="text-sm text-gray-500 ml-2">
-                                                    ({bucket.buffer_multiplier}x buffer = ${bucket.effective_capacity.toFixed(2)} effective)
+                                </CardContent>
+                                <CardFooter className="justify-center">
+                                    <Button onClick={openCreateModal}>
+                                        Create Your First Bucket
+                                    </Button>
+                                </CardFooter>
+                            </Card>
+                        ) : (
+                            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                                {buckets.data.map((bucket) => (
+                                    <div
+                                        key={bucket.id}
+                                        className={`rounded-lg bg-white p-6 shadow transition-shadow hover:shadow-lg border-l-4 ${bucketTypeBorderColor[bucket.type]}`}
+                                    >
+                                        <div className="flex items-start justify-between">
+                                            <div className="flex-1">
+                                                <h3 className="text-lg font-semibold text-gray-900">
+                                                    {bucket.name}
+                                                </h3>
+                                                <p className="text-sm text-gray-600 mt-1">
+                                                    Priority {bucket.priority} • {bucket.type_label} • {bucket.allocation_type_label}
+                                                </p>
+                                            </div>
+                                            <div className="flex items-center gap-1">
+                                                <button
+                                                    onClick={() => handlePriorityChange(bucket.id, 'up')}
+                                                    disabled={bucket.priority === 1}
+                                                    className="p-1 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                                                    title="Move up in priority"
+                                                >
+                                                    <svg className="w-3 h-3 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                                                    </svg>
+                                                </button>
+                                                <button
+                                                    onClick={() => handlePriorityChange(bucket.id, 'down')}
+                                                    disabled={bucket.priority === buckets.data.length}
+                                                    className="p-1 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                                                    title="Move down in priority"
+                                                >
+                                                    <svg className="w-3 h-3 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                                                    </svg>
+                                                </button>
+                                                <span className="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">
+                                                    #{bucket.priority}
                                                 </span>
+                                            </div>
+                                        </div>
+
+                                        <div className="mt-4">
+                                            <div className="flex items-center justify-between">
+                                                <span className="text-sm text-gray-600">Current Balance</span>
+                                                <span className="text-lg font-semibold text-gray-900">
+                                                    ${bucket.current_balance.toFixed(2)}
+                                                </span>
+                                            </div>
+
+                                            <div className="mt-2">
+                                                <span className="text-sm text-gray-600">
+                                                    Allocation: {formatAllocationValue(bucket)}
+                                                </span>
+                                                {bucket.allocation_type === 'fixed_limit' && bucket.buffer_multiplier > 0 && (
+                                                    <span className="text-sm text-gray-500 ml-2">
+                                                        ({bucket.buffer_multiplier}x buffer = ${bucket.effective_capacity.toFixed(2)} effective)
+                                                    </span>
+                                                )}
+                                            </div>
+
+                                            {bucket.allocation_type === 'fixed_limit' && (
+                                                <div className="mt-3">
+                                                    <div className="flex justify-between text-sm">
+                                                        <span>Progress</span>
+                                                        <span>
+                                                            ${bucket.current_balance.toFixed(2)} / ${bucket.effective_capacity.toFixed(2)}
+                                                        </span>
+                                                    </div>
+                                                    <div className="mt-1 h-2 bg-gray-200 rounded-full">
+                                                        <div
+                                                            className="h-2 bg-blue-600 rounded-full transition-all"
+                                                            style={{
+                                                                width: `${bucket.effective_capacity ? Math.min((bucket.current_balance / bucket.effective_capacity) * 100, 100) : 0}%`
+                                                            }}
+                                                        />
+                                                    </div>
+                                                </div>
                                             )}
                                         </div>
 
-                                        {bucket.allocation_type === 'fixed_limit' && (
-                                            <div className="mt-3">
-                                                <div className="flex justify-between text-sm">
-                                                    <span>Progress</span>
-                                                    <span>
-                                                        ${bucket.current_balance.toFixed(2)} / ${bucket.effective_capacity.toFixed(2)}
-                                                    </span>
-                                                </div>
-                                                <div className="mt-1 h-2 bg-gray-200 rounded-full">
-                                                    <div
-                                                        className="h-2 bg-blue-600 rounded-full transition-all"
-                                                        style={{
-                                                            width: `${bucket.effective_capacity ? Math.min((bucket.current_balance / bucket.effective_capacity) * 100, 100) : 0}%`
-                                                        }}
-                                                    />
-                                                </div>
-                                            </div>
-                                        )}
-                                    </div>
-                                    
-                                    <div className="mt-4 flex gap-2">
-                                        <button
-                                            onClick={() => handleEdit(bucket)}
-                                            className="flex-1 text-sm text-blue-600 hover:text-blue-500"
-                                        >
-                                            Edit
-                                        </button>
-                                        {bucket.type !== 'overflow' && (
+                                        <div className="mt-4 flex gap-2">
                                             <button
-                                                onClick={() => handleDelete(bucket)}
-                                                className="flex-1 text-sm text-red-600 hover:text-red-500"
+                                                onClick={() => handleEdit(bucket)}
+                                                className="flex-1 text-sm text-blue-600 hover:text-blue-500"
                                             >
-                                                Delete
+                                                Edit
                                             </button>
-                                        )}
+                                            {bucket.type !== 'overflow' && (
+                                                <button
+                                                    onClick={() => handleDelete(bucket)}
+                                                    className="flex-1 text-sm text-red-600 hover:text-red-500"
+                                                >
+                                                    Delete
+                                                </button>
+                                            )}
+                                        </div>
                                     </div>
-                                </div>
-                            ))}
-                        </div>
+                                ))}
+                            </div>
+                        )}
                         
                         {/* Streams Section */}
                         <div className="mt-8">