diff --git a/resources/js/pages/Scenarios/Show.tsx b/resources/js/pages/Scenarios/Show.tsx
index 5fc2eb8..3dd4444 100644
--- a/resources/js/pages/Scenarios/Show.tsx
+++ b/resources/js/pages/Scenarios/Show.tsx
@@ -1,6 +1,6 @@
 import { Head, router } from '@inertiajs/react';
 import { Settings } from 'lucide-react';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import BucketCard from '@/components/BucketCard';
 import InlineEditInput from '@/components/InlineEditInput';
 import InlineEditSelect from '@/components/InlineEditSelect';
@@ -60,6 +60,9 @@ export default function Show({ scenario, buckets }: Props) {
     const [isSettingsOpen, setIsSettingsOpen] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [formData, setFormData] = useState({ ...defaultFormData });
+    const containerRef = useRef<HTMLDivElement>(null);
+    const incomeRef = useRef<HTMLDivElement>(null);
+    const bucketRefs = useRef<Map<string, HTMLElement>>(new Map());
 
     const openCreateModal = () => {
         setFormData({ ...defaultFormData });
@@ -164,10 +167,10 @@ export default function Show({ scenario, buckets }: Props) {
                         <SettingsPanel onOpenChange={setIsSettingsOpen} />
                     </div>
 
-                    {/* Two-column layout */}
-                    <div className="grid grid-cols-2 gap-8">
+                    {/* Buckets + Distribution + Income */}
+                    <div ref={containerRef} className="relative flex items-start gap-0">
                         {/* Left: Buckets */}
-                        <div className="space-y-4">
+                        <div className="w-2/5 shrink-0 space-y-4">
                             <div className="flex items-center justify-between">
                                 <h2 className="text-sm font-mono font-bold tracking-wider uppercase text-red-500/60">
                                     BUCKETS
@@ -201,6 +204,10 @@ export default function Show({ scenario, buckets }: Props) {
                                         <button
                                             key={bucket.id}
                                             type="button"
+                                            ref={(el) => {
+                                                if (el) bucketRefs.current.set(bucket.id, el);
+                                                else bucketRefs.current.delete(bucket.id);
+                                            }}
                                             onClick={() => setEditingBucket(bucket)}
                                             className="w-full border-4 border-red-500 bg-black glow-red transition-all text-left hover:border-red-400 cursor-pointer"
                                         >
@@ -211,8 +218,11 @@ export default function Show({ scenario, buckets }: Props) {
                             )}
                         </div>
 
+                        {/* Middle: Connector area (SVG lines render here) */}
+                        <div className="flex-1" />
+
                         {/* Right: Income */}
-                        <div>
+                        <div ref={incomeRef} className="w-1/5 shrink-0 self-center">
                             <div className="flex items-center justify-center border-b border-red-500/40 pb-2 mb-6">
                                 <h2 className="text-sm font-mono font-bold tracking-wider uppercase text-red-500/60">
                                     INCOME