diff --git a/resources/js/components/SettingsPanel.tsx b/resources/js/components/SettingsPanel.tsx
index 9534dc2..f40a963 100644
--- a/resources/js/components/SettingsPanel.tsx
+++ b/resources/js/components/SettingsPanel.tsx
@@ -1,9 +1,3 @@
-import {
-    Sheet,
-    SheetContent,
-    SheetHeader,
-    SheetTitle,
-} from '@/components/ui/sheet';
 import { csrfToken } from '@/lib/utils';
 import { type SharedData } from '@/types';
 import { router, usePage } from '@inertiajs/react';
@@ -21,13 +15,13 @@ interface DistributionOption {
 const distributionOptions: DistributionOption[] = [
     {
         value: 'even',
-        label: 'Even Split',
+        label: 'EVEN SPLIT',
         description:
             'Split evenly across buckets in each phase, respecting individual capacity',
     },
     {
         value: 'priority',
-        label: 'Priority Order',
+        label: 'PRIORITY ORDER',
         description: 'Fill highest-priority bucket first, then next',
     },
 ];
@@ -38,7 +32,6 @@ interface SettingsPanelProps {
 }
 
 export default function SettingsPanel({
-    open,
     onOpenChange,
 }: SettingsPanelProps) {
     const { scenario } = usePage<SharedData>().props;
@@ -72,71 +65,61 @@ export default function SettingsPanel({
     };
 
     return (
-        <Sheet open={open} onOpenChange={onOpenChange}>
-            <SheetContent side="top" className="px-6 pb-6">
-                <SheetHeader>
-                    <SheetTitle>Settings</SheetTitle>
-                </SheetHeader>
+        <div className="mb-8 border-4 border-red-500 bg-black p-6 glow-red">
+            <div className="flex items-center justify-between mb-4">
+                <h2 className="text-lg font-mono font-bold tracking-wider uppercase text-red-500">
+                    SETTINGS
+                </h2>
+                <button
+                    onClick={() => onOpenChange(false)}
+                    className="text-red-500/60 hover:text-red-500 font-mono text-sm transition-colors"
+                >
+                    CLOSE
+                </button>
+            </div>
 
-                <div className="mx-auto max-w-2xl">
-                    <fieldset disabled={saveStatus === 'saving'}>
-                        <legend className="text-sm font-medium text-foreground">
-                            Distribution Mode
-                            {saveStatus === 'success' && (
-                                <span className="ml-2 text-green-600">
-                                    Saved
-                                </span>
-                            )}
-                            {saveStatus === 'error' && (
-                                <span className="ml-2 text-red-600">
-                                    Failed to save
-                                </span>
-                            )}
-                        </legend>
-                        <p className="mt-1 text-sm text-muted-foreground">
-                            How income is divided across buckets within each
-                            phase
-                        </p>
-                        <div className="mt-3 space-y-2">
-                            {distributionOptions.map((option) => (
-                                <label
-                                    key={option.value}
-                                    className={`flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors ${
-                                        scenario.distribution_mode ===
-                                        option.value
-                                            ? 'border-primary bg-primary/5'
-                                            : 'border-border hover:border-primary/50'
-                                    }`}
-                                >
-                                    <input
-                                        type="radio"
-                                        name="distribution_mode"
-                                        value={option.value}
-                                        checked={
-                                            scenario.distribution_mode ===
-                                            option.value
-                                        }
-                                        onChange={(e) =>
-                                            handleDistributionModeChange(
-                                                e.target.value as DistributionMode,
-                                            )
-                                        }
-                                        className="mt-0.5"
-                                    />
-                                    <div>
-                                        <div className="text-sm font-medium">
-                                            {option.label}
-                                        </div>
-                                        <div className="text-sm text-muted-foreground">
-                                            {option.description}
-                                        </div>
-                                    </div>
-                                </label>
-                            ))}
-                        </div>
-                    </fieldset>
+            <fieldset disabled={saveStatus === 'saving'}>
+                <legend className="text-xs font-mono uppercase text-red-500/60">
+                    DISTRIBUTION MODE
+                    {saveStatus === 'success' && (
+                        <span className="ml-2 text-green-500">SAVED</span>
+                    )}
+                    {saveStatus === 'error' && (
+                        <span className="ml-2 text-red-500">FAILED</span>
+                    )}
+                </legend>
+                <div className="mt-3 space-y-2">
+                    {distributionOptions.map((option) => (
+                        <label
+                            key={option.value}
+                            className={`flex cursor-pointer items-start gap-3 border-2 p-3 transition-colors ${
+                                scenario.distribution_mode === option.value
+                                    ? 'border-red-500 bg-red-500/10'
+                                    : 'border-red-500/30 hover:border-red-500/60'
+                            }`}
+                        >
+                            <input
+                                type="radio"
+                                name="distribution_mode"
+                                value={option.value}
+                                checked={scenario.distribution_mode === option.value}
+                                onChange={(e) =>
+                                    handleDistributionModeChange(e.target.value as DistributionMode)
+                                }
+                                className="mt-0.5 accent-red-500"
+                            />
+                            <div>
+                                <div className="text-sm font-mono font-bold text-red-500">
+                                    {option.label}
+                                </div>
+                                <div className="text-xs font-mono text-red-500/60">
+                                    {option.description}
+                                </div>
+                            </div>
+                        </label>
+                    ))}
                 </div>
-            </SheetContent>
-        </Sheet>
+            </fieldset>
+        </div>
     );
 }
diff --git a/resources/js/pages/Scenarios/Show.tsx b/resources/js/pages/Scenarios/Show.tsx
index 5f9fc72..699a568 100644
--- a/resources/js/pages/Scenarios/Show.tsx
+++ b/resources/js/pages/Scenarios/Show.tsx
@@ -166,12 +166,12 @@ export default function Show({ scenario, buckets }: Props) {
             <div className="min-h-screen bg-background p-8">
                 <div className="mx-auto max-w-6xl">
                     {/* Header */}
-                    <div className="mb-8 flex items-center justify-between">
+                    <div className="mb-8 flex items-center justify-between border-b border-red-500/40 pb-4">
                         <h1 className="text-2xl font-bold font-mono uppercase tracking-wider text-red-500">
                             BUCKETS
                         </h1>
                         <button
-                            onClick={() => setIsSettingsOpen(true)}
+                            onClick={() => setIsSettingsOpen(!isSettingsOpen)}
                             className="p-2 text-red-500/60 hover:text-red-500 transition-colors"
                             title="Settings"
                         >
@@ -179,7 +179,12 @@ export default function Show({ scenario, buckets }: Props) {
                         </button>
                     </div>
 
-                    <SettingsPanel open={isSettingsOpen} onOpenChange={setIsSettingsOpen} />
+                    <div
+                        className="overflow-hidden transition-all duration-300 ease-in-out"
+                        style={{ maxHeight: isSettingsOpen ? '500px' : '0', opacity: isSettingsOpen ? 1 : 0 }}
+                    >
+                        <SettingsPanel open={isSettingsOpen} onOpenChange={setIsSettingsOpen} />
+                    </div>
 
                     {/* Buckets */}
                     <div className="space-y-6">