diff --git a/app/pages/clientarea/ai/index.vue b/app/pages/clientarea/ai/index.vue
index 4503e2d..bdfab46 100644
--- a/app/pages/clientarea/ai/index.vue
+++ b/app/pages/clientarea/ai/index.vue
@@ -1,19 +1,25 @@
 <template>
   <Section variant="plain" paddingY="md">
-    <Stack gap="6">
-      <PageHeader :title="t('aiAssistants.header.title')" />
+    <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_420px] gap-6 items-start">
+      <div class="space-y-6">
+        <PageHeader :title="t('aiAssistants.header.title')" />
 
-      <Card padding="lg" class="w-full">
-        <Stack gap="4">
-          <Stack direction="row" gap="3" align="center">
-            <IconCircle tone="primary" size="lg">🛰️</IconCircle>
-            <div>
-              <Heading :level="3" weight="semibold">{{ t('aiAssistants.view.agentTitle') }}</Heading>
-              <Text tone="muted">{{ t('aiAssistants.view.agentSubtitle') }}</Text>
-            </div>
+        <Card padding="lg" class="w-full">
+          <Stack gap="4">
+            <Stack direction="row" gap="3" align="center">
+              <IconCircle tone="primary" size="lg">🛰️</IconCircle>
+              <div>
+                <Heading :level="3" weight="semibold">{{ t('aiAssistants.view.agentTitle') }}</Heading>
+                <Text tone="muted">{{ t('aiAssistants.view.agentSubtitle') }}</Text>
+              </div>
+            </Stack>
           </Stack>
+        </Card>
+      </div>
 
-          <div class="bg-base-200 rounded-box p-4 h-[70vh] overflow-y-auto space-y-3">
+      <Card padding="lg" class="w-full flex flex-col min-h-0 lg:sticky lg:top-6 lg:h-[calc(100vh-8rem)]">
+        <Stack gap="4" class="flex-1 min-h-0">
+          <div class="bg-base-200 rounded-box p-4 flex-1 min-h-0 overflow-y-auto space-y-3">
             <div
               v-for="(message, idx) in chat"
               :key="idx"
@@ -57,7 +63,7 @@
           </form>
         </Stack>
       </Card>
-    </Stack>
+    </div>
   </Section>
 </template>