diff --git a/frontend/src/app/animations/toggle.animation.ts b/frontend/src/app/animations/toggle.animation.ts
new file mode 100644
index 00000000..e2925db9
--- /dev/null
+++ b/frontend/src/app/animations/toggle.animation.ts
@@ -0,0 +1,38 @@
+import {
+  trigger,
+  transition,
+  style,
+  animate,
+  query,
+  group,
+} from '@angular/animations';
+
+const easing = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
+const duration = '600ms';
+
+export const toggleAnimation = trigger('toggle', [
+  transition(':enter', [
+    style({ height: 0, opacity: 0 }),
+    query('.details', [
+      style({ transform: 'translateY(-100%)' })
+    ], { optional: true }),
+    group([
+      animate(`${duration} ${easing}`, style({ height: '*', opacity: 1 })),
+      query('.details', [
+        animate(`${duration} ${easing}`, style({ transform: 'translateY(0)' }))
+      ], { optional: true })
+    ])
+  ]),
+  transition(':leave', [
+    style({ height: '*', opacity: 1 }),
+    query('.details', [
+      style({ transform: 'translateY(0)' })
+    ], { optional: true }),
+    group([
+      animate(`${duration} ${easing}`, style({ height: 0, opacity: 0 })),
+      query('.details', [
+        animate(`${duration} ${easing}`, style({ transform: 'translateY(-100%)' }))
+      ], { optional: true })
+    ])
+  ])
+]);
diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html
index 4990d246..f526a85d 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.html
+++ b/frontend/src/app/components/dashboard/dashboard.component.html
@@ -113,6 +113,8 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
             ></app-db-table-row-view>
             <app-db-table-ai-panel *ngIf="isAIpanelOpened"
                 [displayName]="selectedTableDisplayName"
+                [tableColumns]="dataSource?.dataColumns || []"
+                [sidebarExpanded]="shownTableTitles"
             ></app-db-table-ai-panel>
         </mat-sidenav-content>
     </mat-sidenav-container>
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
index 6f01a799..ee264a79 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
@@ -5,7 +5,9 @@
     height: calc(100vh - 44px);
     width: 0;
     overflow-y: auto;
-    transition: width 400ms ease, transform 400ms ease, opacity 400ms ease;
+    transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1),
+                transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (width <= 600px) {
@@ -19,6 +21,14 @@
     opacity: 1;
     transform: translateX(24px);
     width: clamp(200px, 22vw, 400px);
+    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
+                width 0ms;
+}
+
+.ai-panel-sidebar_open.ai-panel-sidebar_expanded {
+    width: calc(100vw - 65px);
+    transition: width 0ms;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -35,16 +45,53 @@
 
 .ai-panel-sidebar-content {
     position: fixed;
-    top: 0;
-    left: calc(100% - clamp(200px, 22vw, 400px));
+    top: 44px;
+    left: 100vw;
     display: flex;
     flex-direction: column;
     background-color: var(--mat-sidenav-content-background-color);
     border-left: solid 1px rgba(0, 0, 0, 0.12);
-    padding-top: 44px;
-    height: 100vh;
+    height: calc(100vh - 44px);
     width: clamp(200px, 22vw, 400px);
-    z-index: 0;
+    z-index: 100;
+    transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-left 400ms ease;
+    visibility: hidden;
+}
+
+.ai-panel-sidebar-content_open {
+    left: calc(100vw - clamp(200px, 22vw, 400px));
+    visibility: visible;
+}
+
+.ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded {
+    left: 65px;
+    right: 0;
+    width: auto;
+    padding-left: 175px;
+    border-left: none;
+    z-index: 1;
+    transition: padding-left 500ms cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 400ms ease-out;
+}
+
+.ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded.ai-panel-sidebar-content_sidebar-collapsed {
+    padding-left: 0;
+}
+
+@media (width <= 800px) {
+    .ai-panel-sidebar-content {
+        width: 100%;
+    }
+
+    .ai-panel-sidebar-content_open {
+        left: 0;
+    }
+
+    .ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded {
+        left: 0;
+        width: 100%;
+    }
 }
 
 .ai-panel-sidebar-content ::ng-deep .ai-message table {
@@ -113,6 +160,16 @@
     padding-top: 20px;
     padding-left: 16px;
     padding-right: 16px;
+    flex-shrink: 0;
+    transition: max-width 350ms cubic-bezier(0.4, 0, 0.2, 1),
+                padding 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ai-panel-sidebar__actions {
+    display: flex;
+    align-items: center;
+    transition: right 350ms cubic-bezier(0.4, 0, 0.2, 1),
+                top 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -131,14 +188,19 @@
 .ai-panel-chat {
     display: flex;
     flex-direction: column;
-    margin-top: auto;
+    flex: 1;
+    justify-content: flex-end;
     padding-left: 16px;
     padding-right: 16px;
+    overflow: hidden;
+    min-height: 0;
 }
 
 .ai-message-chain-box {
     height: calc(100vh - 44px - 252px - 48px);
     overflow-y: auto;
+    margin-bottom: 24px;
+    transition: max-width 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .ai-message-chain {
@@ -151,22 +213,33 @@
 
 .user-message {
     align-self: flex-end;
-    background-color: var(--color-primaryPalette-50);
-    color: var(--color-primaryPalette-50-contrast);
+    background-color: #f0f4f8;
     border-radius: 8px;
-    padding: 8px 8px 0;
-    margin: 4px 0;
-    width: 80%;
+    padding: 8px 8px 12px;
+    margin: 4px 0 16px;
+    max-width: 80%;
 }
+
+@media (prefers-color-scheme: dark) {
+    .user-message {
+        background-color: #2d3748;
+    }
+}
+
 .ai-message {
     align-self: flex-start;
-    background-color: var(--color-primaryPalette-100);
-    color: var(--color-primaryPalette-100-contrast);
+    background-color: rgba(168, 85, 247, 0.1);
     border-radius: 8px;
     padding: 8px 8px 0;
     margin: 4px 0;
 }
 
+@media (prefers-color-scheme: dark) {
+    .ai-message {
+        background-color: rgba(168, 85, 247, 0.15);
+    }
+}
+
 .ai-error-message {
     border-radius: 8px;
     padding: 8px 8px 0;
@@ -215,58 +288,233 @@
     margin-bottom: 8px;
 }
 
+.ai-welcome {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 24px;
+    flex-shrink: 0;
+    transition: max-width 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ai-welcome__message {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.ai-welcome__message p {
+    margin: 0;
+    line-height: 1.4;
+}
+
+.ai-welcome__section {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.ai-welcome__section-title {
+    margin: 0;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.5);
+}
+
 @media (prefers-color-scheme: dark) {
-    .suggestions {
-        background-color: #202020;
+    .ai-welcome__section-title {
+        color: rgba(255, 255, 255, 0.5);
     }
 }
 
-.suggestions-title {
-    display: block;
-    color: rgba(0,0,0, 0.54);
-    padding: 16px 16px 0;
+.suggestions-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.suggestion-chip {
+    display: inline-flex;
+    align-items: center;
+    background-color: var(--mat-sidenav-content-background-color);
+    border: 1px solid #d3d3d3;
+    border-radius: 16px;
+    padding: 4px 12px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.suggestion-chip:hover {
+    background-color: var(--color-primaryPalette-50);
 }
 
 @media (prefers-color-scheme: dark) {
-    .suggestions-title {
-        color: rgba(255,255,255, 0.54);
+    .suggestion-chip {
+        border-color: #4a4a4a;
+    }
+
+    .suggestion-chip:hover {
+        background-color: rgba(255, 255, 255, 0.08);
     }
 }
 
-.suggestion-button {
-    height: auto;
-    padding: 8px 16px;
+.templates-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 0;
+    transition: gap 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.template-card {
+    display: flex;
+    align-items: flex-start;
+    width: auto;
+    gap: 8px;
+    background-color: var(--mat-sidenav-content-background-color);
+    border: 1px solid #d3d3d3;
+    border-radius: 6px;
+    padding: 6px 10px;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.template-card:hover {
+    background-color: var(--color-primaryPalette-50);
+}
+
+.template-card__icon {
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    margin-top: 1px;
 }
 
-.suggestion-button ::ng-deep .mdc-list-item__content {
-    text-overflow: initial;
-    /* white-space: wrap; */
-    overflow: initial;
+.template-card__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
 }
 
+.template-card__title {
+    font-size: 13px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.87);
+    line-height: 1.3;
+}
 
-.suggestion-button ::ng-deep .mdc-list-item__primary-text {
-    text-overflow: initial;
-    white-space: wrap;
-    overflow: initial;
+.template-card__description {
+    font-size: 11px;
+    color: rgba(0, 0, 0, 0.5);
+    line-height: 1.3;
+}
+
+@media (prefers-color-scheme: dark) {
+    .template-card {
+        border-color: #4a4a4a;
+    }
+
+    .template-card:hover {
+        background-color: rgba(255, 255, 255, 0.08);
+    }
+
+    .template-card__icon {
+        color: rgba(255, 255, 255, 0.5);
+    }
+
+    .template-card__title {
+        color: rgba(255, 255, 255, 0.9);
+    }
+
+    .template-card__description {
+        color: rgba(255, 255, 255, 0.5);
+    }
 }
 
 .loading {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 40px;
+    height: 50px;
+    flex-shrink: 0;
+}
+
+.loading-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.loading-dots {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+
+.loading-text {
+    font-size: 13px;
+    color: #9ca3af;
+}
+
+.loading-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #9ca3af;
+    animation: loading-bounce 1.4s ease-in-out infinite;
+}
+
+.loading-dot:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.loading-dot:nth-child(2) {
+    animation-delay: 0.15s;
+}
+
+.loading-dot:nth-child(3) {
+    animation-delay: 0.3s;
+}
+
+@keyframes loading-bounce {
+    0%, 60%, 100% {
+        transform: translateY(0);
+    }
+    30% {
+        transform: translateY(-8px);
+    }
 }
 
 .ai-message-form {
     position: relative;
     width: 100%;
+    flex-shrink: 0;
+    transition: max-width 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .ai-message-form__textarea {
     width: 100%;
 }
 
+.ai-message-form__textarea ::ng-deep .mat-mdc-form-field-focus-overlay {
+    display: none;
+}
+
+.ai-message-form__textarea ::ng-deep .mdc-text-field--focused .mdc-notched-outline__leading,
+.ai-message-form__textarea ::ng-deep .mdc-text-field--focused .mdc-notched-outline__trailing {
+    border-color: #A855F7 !important;
+    border-width: 2px !important;
+}
+
+.ai-message-form__textarea ::ng-deep .mdc-text-field--focused .mdc-notched-outline__notch {
+    border-color: #A855F7 !important;
+    border-width: 2px 0 !important;
+}
+
 .ai-message-form__textarea ::ng-deep .mat-mdc-text-field-wrapper {
     padding-bottom: 24px !important;
 }
@@ -285,37 +533,36 @@
     width: calc(100% - 4px);
 }
 
-.ai-message-form__button {
-
+.ai-message-form__char-count {
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 12px;
 }
 
-.ai-panel-sidebar__message {
-    resize: none;
-    width: 100%;
+@media (prefers-color-scheme: dark) {
+    .ai-message-form__char-count {
+        color: rgba(255, 255, 255, 0.4);
+    }
 }
 
-.ai-placeholder {
-    margin-top:72px;
-    padding-left: 16px;
-    padding-right: 16px;
-    text-align: center;
+.ai-message-form__button {
+    color: #A855F7 !important;
 }
 
-@media (prefers-color-scheme: light) {
-    .ai-placeholder {
-        color: rgba(0, 0, 0, 0.64);
-    }
+.ai-panel-sidebar__message {
+    resize: none;
+    width: 100%;
 }
 
-@media (prefers-color-scheme: dark) {
-    .ai-placeholder {
-        color: rgba(255, 255, 255, 0.64);
-    }
+.footer {
+    padding-bottom: 16px;
+    flex-shrink: 0;
+    transition: max-width 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .footer p {
     color: rgba(0, 0, 0, 0.36) !important;
     text-align: center;
+    margin: 0;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -327,3 +574,71 @@
 .link {
     color: var(--color-accentedPalette-500);
 }
+
+/* Expanded state styles */
+.ai-panel-sidebar-content_expanded .ai-panel-chat {
+    align-items: center;
+}
+
+.ai-panel-sidebar-content_expanded .ai-welcome {
+    width: 100%;
+    max-width: 800px;
+}
+
+.ai-panel-sidebar-content_expanded .ai-message-chain-box {
+    width: 100%;
+    max-width: 800px;
+}
+
+.ai-panel-sidebar-content_expanded .ai-message-form {
+    width: 100%;
+    max-width: 800px;
+}
+
+.ai-panel-sidebar-content_expanded .footer {
+    width: 100%;
+    max-width: 800px;
+}
+
+.ai-panel-sidebar-content_expanded .ai-panel-sidebar__header {
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    padding-left: 0;
+    padding-right: 0;
+    justify-content: flex-start;
+}
+
+.ai-panel-sidebar-content_expanded .ai-panel-sidebar__actions {
+    position: fixed;
+    right: 16px;
+    top: 64px;
+}
+
+.ai-panel-sidebar-content_expanded .ai-welcome__section {
+    gap: 4px !important;
+}
+
+.ai-panel-sidebar-content_expanded .ai-welcome__section-title {
+    margin-bottom: 0 !important;
+}
+
+.ai-panel-sidebar-content_expanded .templates-container,
+.ai-panel-sidebar-content_expanded .suggestions-container {
+    margin-top: 0 !important;
+}
+
+.ai-panel-sidebar-content_expanded .templates-container {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.ai-panel-sidebar-content_expanded .template-card {
+    width: auto;
+}
+
+.ai-panel-sidebar-content_expanded .template-card__description {
+    white-space: nowrap;
+}
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
index 64f23ffc..d84d333d 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.html
@@ -1,20 +1,22 @@
-<div *ngIf="isAIpanelOpened"
-    class="ai-panel-sidebar"
-    [ngClass]="{'ai-panel-sidebar_open': isAIpanelOpened}">
+<div class="ai-panel-sidebar ai-panel-sidebar_open"
+    [ngClass]="{'ai-panel-sidebar_expanded': isExpanded}">
 </div>
-<div class="ai-panel-sidebar-content">
+<div class="ai-panel-sidebar-content ai-panel-sidebar-content_open"
+    [ngClass]="{'ai-panel-sidebar-content_expanded': isExpanded, 'ai-panel-sidebar-content_sidebar-collapsed': !sidebarExpanded}">
     <div class="ai-panel-sidebar__header">
         <h2 class="mat-heading-2 ai-panel-sidebar__title">
             <mat-icon svgIcon="ai_rocket" class="ai-icon"></mat-icon>
-            <span>AI insights</span>
+            <span *ngIf="isExpanded">AI insights for {{displayName}}</span>
+            <span *ngIf="!isExpanded">AI insights</span>
         </h2>
-        <button mat-icon-button (click)="handleClose()">
-            <mat-icon>close</mat-icon>
-        </button>
-    </div>
-
-    <div *ngIf="messagesChain.length === 0" class="ai-placeholder">
-        Insights from <strong>"{{displayName}}"</strong> table are waiting — type your query to unlock them.
+        <div class="ai-panel-sidebar__actions">
+            <button mat-icon-button (click)="toggleExpand()">
+                <mat-icon>{{isExpanded ? 'close_fullscreen' : 'open_in_full'}}</mat-icon>
+            </button>
+            <button mat-icon-button (click)="handleClose()">
+                <mat-icon>close</mat-icon>
+            </button>
+        </div>
     </div>
 
     <div class="ai-panel-chat">
@@ -28,33 +30,60 @@ <h2 class="mat-heading-2 ai-panel-sidebar__title">
         </div>
 
         <ng-template #suggestions>
-            <div class="mat-elevation-z2 suggestions">
-                <span class="suggestions-title">Suggested insights</span>
-                <mat-action-list role="list">
-                    <button mat-list-item *ngFor="let suggestion of aiRequestSuggestions"
-                        class="suggestion-button"
-                        (click)="createThread(suggestion)"
-                        angulartics2On="click"
-                        angularticsAction="AI panel: suggested request is clicked">
-                        {{suggestion}}
-                    </button>
-                </mat-action-list>
-            </div>
+            <div class="ai-welcome">
+                <div class="ai-welcome__message">
+                    <p>Explore patterns, issues, and summaries instantly.</p>
+                </div>
 
+                <div class="ai-welcome__section" *ngIf="aiSuggestions.length">
+                    <p class="ai-welcome__section-title">Suggestions for this table:</p>
+                    <div class="suggestions-container">
+                        <button *ngFor="let suggestion of aiSuggestions"
+                            class="suggestion-chip"
+                            (click)="createThread(suggestion.prompt)"
+                            angulartics2On="click"
+                            angularticsAction="AI panel: suggestion is clicked">
+                            <span>{{suggestion.title}}</span>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="ai-welcome__section">
+                    <p class="ai-welcome__section-title">Templates:</p>
+                    <div class="templates-container">
+                        <button *ngFor="let template of aiRequestTemplates"
+                            class="template-card"
+                            (click)="createThread(template.prompt)"
+                            angulartics2On="click"
+                            angularticsAction="AI panel: template is clicked">
+                            <mat-icon class="template-card__icon" fontSet="material-icons-outlined">{{template.icon}}</mat-icon>
+                            <div class="template-card__content">
+                                <span class="template-card__title">{{template.title}}</span>
+                                <span class="template-card__description">{{template.description}}</span>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+            </div>
         </ng-template>
 
-        <div class="loading">
-            <div *ngIf="submitting">
-                loading...
+        <div class="loading" *ngIf="submitting">
+            <div class="loading-content">
+                <span class="loading-text">Generating an answer</span>
+                <div class="loading-dots">
+                    <span class="loading-dot"></span>
+                    <span class="loading-dot"></span>
+                    <span class="loading-dot"></span>
+                </div>
             </div>
         </div>
 
         <form (ngSubmit)="threadID ? sendMessage() : createThread()" class="ai-message-form">
             <mat-form-field class="form-field" appearance="outline" class="ai-message-form__textarea">
-                <mat-label class="ai-message-form__label">What should I analyze?</mat-label>
+                <mat-label class="ai-message-form__label">Ask a question about this table...</mat-label>
                 <textarea matInput name="message"
                     class="ai-panel-sidebar__message"
-                    rows="4"
+                    [rows]="textareaRows"
                     data-testid="user-message"
                     maxlength="255"
                     (keydown)="onKeydown($event)"
@@ -63,7 +92,7 @@ <h2 class="mat-heading-2 ai-panel-sidebar__title">
             </mat-form-field>
 
             <div class="ai-message-form__footer">
-                <span> {{charactrsNumber}} / 256</span>
+                <span class="ai-message-form__char-count">{{charactrsNumber}} / 256</span>
                 <button mat-icon-button type="submit"
                     class="ai-message-form__button">
                     <mat-icon>send</mat-icon>
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
index 638cbf31..1b7fffe6 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
@@ -1,5 +1,5 @@
 import { Angulartics2, Angulartics2Module } from 'angulartics2';
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostListener, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 import { ConnectionsService } from 'src/app/services/connections.service';
@@ -10,7 +10,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
 import { TableStateService } from 'src/app/services/table-state.service';
 import { TablesService } from 'src/app/services/tables.service';
 
@@ -25,7 +24,6 @@ import { TablesService } from 'src/app/services/tables.service';
     MatIconModule,
     MatFormFieldModule,
     MatInputModule,
-    MatListModule,
     MatButtonModule,
     Angulartics2Module
   ]
@@ -33,6 +31,8 @@ import { TablesService } from 'src/app/services/tables.service';
 export class DbTableAiPanelComponent implements OnInit, OnDestroy {
 
   @Input() public displayName: string;
+  @Input() public tableColumns: string[] = [];
+  @Input() public sidebarExpanded: boolean = true;
   @ViewChild('chatContainer') private chatContainer!: ElementRef;
 
   public connectionID: string;
@@ -45,14 +45,30 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
     type: string;
     text: string
   }[] = [];
-  public aiRequestSuggestions: string[] = [
-    'How many records were created last month?',
-    'Are there any duplicate rows in this table?',
-    // 'Are there any columns with inconsistent data types?',
-    'Which columns have empty values?',
-    'What trends can you predict based on this table?'
-  ]
+  public aiRequestTemplates: { title: string; description: string; icon: string; prompt: string }[] = [
+    {
+      title: 'Summarize this table',
+      description: 'Quick overview of columns, types, and size',
+      icon: 'bar_chart',
+      prompt: 'Summarize this table structure and data'
+    },
+    {
+      title: 'Top values',
+      description: 'See most frequent values per column',
+      icon: 'trending_up',
+      prompt: 'Show top 10 most common values in each column'
+    },
+    {
+      title: 'Missing data',
+      description: 'Find NULLs and empty fields',
+      icon: 'warning',
+      prompt: 'Find records with NULL or empty values'
+    }
+  ];
+  public aiSuggestions: { title: string; prompt: string }[] = [];
   public submitting: boolean = false;
+  public isExpanded: boolean = false;
+  public textareaRows: number = 4;
 
   constructor(
     private _connections: ConnectionsService,
@@ -69,6 +85,17 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
     this._tableState.aiPanelCast.subscribe((isAIpanelOpened) => {
       this.isAIpanelOpened = isAIpanelOpened;
     });
+
+    this._tableState.aiPanelExpandedCast.subscribe((isExpanded) => {
+      this.isExpanded = isExpanded;
+    });
+
+    this.adjustTextareaRows();
+    this.generateSuggestions();
+  }
+
+  ngOnChanges(): void {
+    this.generateSuggestions();
   }
 
   async ngAfterViewInit() {
@@ -199,4 +226,82 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
   handleClose() {
     this._tableState.handleViewAIpanel();
   }
+
+  toggleExpand() {
+    this._tableState.toggleAIPanelExpanded();
+  }
+
+  @HostListener('window:resize')
+  onWindowResize() {
+    this.adjustTextareaRows();
+  }
+
+  private adjustTextareaRows() {
+    const windowHeight = window.innerHeight;
+
+    if (windowHeight < 500) {
+      this.textareaRows = 1;
+    } else if (windowHeight < 650) {
+      this.textareaRows = 2;
+    } else if (windowHeight < 800) {
+      this.textareaRows = 3;
+    } else if (windowHeight < 950) {
+      this.textareaRows = 4;
+    } else {
+      this.textareaRows = 5;
+    }
+  }
+
+  private generateSuggestions(): void {
+    if (!this.tableColumns || this.tableColumns.length === 0) {
+      this.aiSuggestions = [];
+      return;
+    }
+
+    const suggestions: { title: string; prompt: string }[] = [];
+    const columns = this.tableColumns.slice(0, 5);
+
+    columns.forEach(column => {
+      const columnName = this.formatColumnName(column);
+
+      if (column.toLowerCase().includes('date') || column.toLowerCase().includes('time') || column.toLowerCase().includes('created') || column.toLowerCase().includes('updated')) {
+        suggestions.push({
+          title: `Analyze ${columnName} trends`,
+          prompt: `Analyze trends and patterns in the "${column}" column over time`
+        });
+      } else if (column.toLowerCase().includes('status') || column.toLowerCase().includes('state') || column.toLowerCase().includes('type')) {
+        suggestions.push({
+          title: `${columnName} distribution`,
+          prompt: `Show the distribution of values in the "${column}" column`
+        });
+      } else if (column.toLowerCase().includes('price') || column.toLowerCase().includes('amount') || column.toLowerCase().includes('cost') || column.toLowerCase().includes('total')) {
+        suggestions.push({
+          title: `${columnName} statistics`,
+          prompt: `Calculate statistics (min, max, average, sum) for the "${column}" column`
+        });
+      } else if (column.toLowerCase().includes('email') || column.toLowerCase().includes('name') || column.toLowerCase().includes('user')) {
+        suggestions.push({
+          title: `Unique ${columnName}`,
+          prompt: `How many unique values are in the "${column}" column?`
+        });
+      } else {
+        suggestions.push({
+          title: `Analyze ${columnName}`,
+          prompt: `What are the most common values in the "${column}" column?`
+        });
+      }
+    });
+
+    this.aiSuggestions = suggestions.slice(0, 3);
+  }
+
+  private formatColumnName(column: string): string {
+    return column
+      .replace(/_/g, ' ')
+      .replace(/([A-Z])/g, ' $1')
+      .trim()
+      .split(' ')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(' ');
+  }
 }
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
index 4a467359..ae2cc2e7 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
@@ -159,6 +159,11 @@
     pointer-events: none;
 }
 
+.ai-insights-button {
+    order: 999;
+    margin-left: auto;
+}
+
 @media (prefers-color-scheme: light) {
     .ai-insights-button {
         background: var(--color-accentedPalette-50);
diff --git a/frontend/src/app/services/table-state.service.ts b/frontend/src/app/services/table-state.service.ts
index ef814d82..65a2205d 100644
--- a/frontend/src/app/services/table-state.service.ts
+++ b/frontend/src/app/services/table-state.service.ts
@@ -10,9 +10,12 @@ export class TableStateService {
   private selectedRowSubject = new BehaviorSubject<any>(null);
   cast = this.selectedRowSubject.asObservable();
 
-  private aiPanelSubject = new BehaviorSubject<any>(null);
+  private aiPanelSubject = new BehaviorSubject<boolean>(false);
   aiPanelCast = this.aiPanelSubject.asObservable();
 
+  private aiPanelExpandedSubject = new BehaviorSubject<boolean>(false);
+  aiPanelExpandedCast = this.aiPanelExpandedSubject.asObservable();
+
   // private backUrlFilters: any;
   // private backUrlParams: any;
 
@@ -67,7 +70,13 @@ export class TableStateService {
 
   handleViewAIpanel() {
     this.clearSelection();
-    this.aiPanelSubject.next(!this.aiPanelSubject.value);
+    const isOpening = !this.aiPanelSubject.value;
+    this.aiPanelSubject.next(isOpening);
+    if (isOpening) {
+      this.restoreAIPanelExpandedState();
+    } else {
+      this.aiPanelExpandedSubject.next(false);
+    }
   }
 
   clearSelection() {
@@ -76,5 +85,19 @@ export class TableStateService {
 
   closeAIpanel() {
     this.aiPanelSubject.next(false);
+    this.aiPanelExpandedSubject.next(false);
+  }
+
+  toggleAIPanelExpanded() {
+    const newValue = !this.aiPanelExpandedSubject.value;
+    this.aiPanelExpandedSubject.next(newValue);
+    this.setSessionStorageItem('aiPanelExpanded', newValue);
+  }
+
+  restoreAIPanelExpandedState() {
+    const savedState = this.getSessionStorageItem('aiPanelExpanded');
+    if (savedState !== null) {
+      this.aiPanelExpandedSubject.next(savedState);
+    }
   }
 }