diff --git a/src/lib/ae_elements/AE_AITools.svelte b/src/lib/ae_elements/AE_AITools.svelte
index 404f68b9..33649c45 100644
--- a/src/lib/ae_elements/AE_AITools.svelte
+++ b/src/lib/ae_elements/AE_AITools.svelte
@@ -74,6 +74,16 @@ let active_tab: 'result' | 'settings' = $state('result');
 let tmp_summary = $state('');
 let show_api_token = $state(false);
 
+const panel_class = 'space-y-4 rounded-xl border border-surface-500/20 bg-surface-500/5 p-4 shadow-sm';
+const panel_title_class = 'flex items-center gap-2 border-b border-surface-500/20 pb-2 text-lg font-bold';
+const tab_button_base_class = 'btn btn-sm border transition-all duration-200';
+const tab_button_active_class = 'border-surface-200-800 bg-surface-200-800 text-surface-950-50 shadow-sm';
+const tab_button_inactive_class = 'border-transparent bg-surface-50-900/60 text-surface-600-400 hover:border-surface-200-800 hover:bg-surface-100-900 hover:text-surface-950-50';
+
+function tab_button_class(is_active: boolean): string {
+    return `${tab_button_base_class} ${is_active ? tab_button_active_class : tab_button_inactive_class}`;
+}
+
 async function generate_ai_result() {
     if (!content) {
         alert('No content available to analyze.');
@@ -179,21 +189,17 @@ function handle_save() {
             title="Aether AI Assistant"
             bind:open={show_modal}
             size="lg"
-            class="bg-surface-50-900">
-            <div class="space-y-4 p-2">
+            class="relative mx-auto flex h-[calc(100dvh-2rem)] max-h-[calc(100dvh-2rem)] w-full flex-col rounded-xl border border-surface-200-800 bg-surface-50-900 text-surface-950-50 shadow-xl">
+            <div class="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-3">
                 <!-- Tab Navigation -->
-                <div class="border-surface-500/20 flex gap-1 border-b pb-2">
+                <div class="bg-surface-500/10 sticky top-0 z-10 mx-auto flex max-w-fit justify-center gap-1 rounded-lg p-1 backdrop-blur-sm">
                     <button
-                        class="btn btn-sm {active_tab === 'result'
-                            ? 'preset-filled-primary'
-                            : 'preset-tonal-surface'}"
+                        class={tab_button_class(active_tab === 'result')}
                         onclick={() => (active_tab = 'result')}>
                         <Bot size="1.1em" class="mr-1" /> Result
                     </button>
                     <button
-                        class="btn btn-sm {active_tab === 'settings'
-                            ? 'preset-filled-secondary'
-                            : 'preset-tonal-surface'}"
+                        class={tab_button_class(active_tab === 'settings')}
                         onclick={() => (active_tab = 'settings')}>
                         <Settings size="1.1em" class="mr-1" /> Settings
                     </button>
@@ -225,9 +231,8 @@ function handle_save() {
                     <div
                         class="animate-in slide-in-from-left-4 space-y-6 duration-200">
                         <!-- Connection Settings -->
-                        <div class="space-y-4">
-                            <h3
-                                class="text-surface-500 flex items-center gap-2 text-sm font-bold tracking-widest uppercase">
+                        <section class={panel_class}>
+                            <h3 class={panel_title_class}>
                                 <Globe size="1.1em" /> API Connection
                             </h3>
 
@@ -299,13 +304,11 @@ function handle_save() {
                                     </button>
                                 </div>
                             </label>
-                        </div>
+                        </section>
 
                         <!-- Model Parameters -->
-                        <div
-                            class="border-surface-500/10 space-y-4 border-t pt-4">
-                            <h3
-                                class="text-surface-500 flex items-center gap-2 text-sm font-bold tracking-widest uppercase">
+                        <section class={panel_class}>
+                            <h3 class={panel_title_class}>
                                 <FilePenLine size="1.1em" /> Inference Parameters
                             </h3>
                             <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -331,10 +334,10 @@ function handle_save() {
                                 <span>System Prompt</span>
                                 <textarea
                                     bind:value={systemPrompt}
-                                    class="textarea h-24 font-mono text-xs"
+                                    class="textarea h-24 font-mono text-xs bg-surface-50-900"
                                 ></textarea>
                             </label>
-                        </div>
+                        </section>
                     </div>
                 {/if}
             </div>