diff --git a/frontend/src/app/animations/toggle.animation.ts b/frontend/src/app/animations/toggle.animation.ts
new file mode 100644
index 000000000..e2925db92
--- /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 7d9e0eae5..d3e62a126 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 6f01a799b..49fe0efe7 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,17 @@
     opacity: 1;
     transform: translateX(24px);
     width: clamp(200px, 22vw, 400px);
+    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
+                width 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ai-panel-sidebar_open.ai-panel-sidebar_expanded {
+    /* Keep the same width as collapsed - don't push the table */
+    width: clamp(200px, 22vw, 400px);
+    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
+                width 400ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -35,23 +48,70 @@
 
 .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;
+    transition: left 400ms cubic-bezier(0.4, 0, 0.2, 1),
+                width 400ms cubic-bezier(0.4, 0, 0.2, 1),
+                padding-left 400ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-left 300ms ease;
+}
+
+.ai-panel-sidebar-content_open.ai-panel-sidebar-content_expanded {
+    left: 65px;
+    width: calc(100vw - 65px);
+    padding-left: 175px;
+    border-left: none;
+    z-index: 3;
+    transition: left 400ms cubic-bezier(0.4, 0, 0.2, 1),
+                width 400ms cubic-bezier(0.4, 0, 0.2, 1),
+                padding-left 400ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-left 300ms ease;
+}
+
+.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 {
+    overflow-x: auto;
 }
 
 .ai-panel-sidebar-content ::ng-deep .ai-message table {
-    width: 100%;
+    min-width: 100%;
+    width: max-content;
     border-collapse: collapse;
     margin: 8px 0;
-    font-size: 14px;
+    font-size: 12px;
 }
 
 .ai-panel-sidebar-content ::ng-deep .ai-message table thead {
@@ -66,9 +126,10 @@
 
 .ai-panel-sidebar-content ::ng-deep .ai-message table th,
 .ai-panel-sidebar-content ::ng-deep .ai-message table td {
-    padding: 8px 12px;
+    padding: 6px 8px;
     text-align: left;
     border: 1px solid rgba(0, 0, 0, 0.12);
+    white-space: nowrap;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -113,6 +174,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) {
@@ -121,6 +192,46 @@
     }
 }
 
+.ai-icon {
+    animation: rocket-float 3s ease-in-out infinite;
+}
+
+.ai-icon ::ng-deep svg path[fill="#C177FC"] {
+    animation: sparkle-twinkle 1.5s ease-in-out infinite;
+}
+
+.ai-icon ::ng-deep svg path[fill="#C177FC"]:nth-of-type(2) {
+    animation-delay: 0.3s;
+}
+
+.ai-icon ::ng-deep svg path[fill="#C177FC"]:nth-of-type(3) {
+    animation-delay: 0.6s;
+}
+
+.ai-icon ::ng-deep svg path[fill="#C177FC"]:nth-of-type(4) {
+    animation-delay: 0.9s;
+}
+
+@keyframes rocket-float {
+    0%, 100% {
+        transform: translateY(0) rotate(0deg);
+    }
+    50% {
+        transform: translateY(-2px) rotate(2deg);
+    }
+}
+
+@keyframes sparkle-twinkle {
+    0%, 100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.4;
+        transform: scale(0.8);
+    }
+}
+
 .ai-panel-sidebar__title {
     display: flex;
     align-items: center;
@@ -131,14 +242,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 +267,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: 12px 16px 16px;
+    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(99, 132, 255, 0.06);
     border-radius: 8px;
-    padding: 8px 8px 0;
+    padding: 12px 16px 8px;
     margin: 4px 0;
 }
 
+@media (prefers-color-scheme: dark) {
+    .ai-message {
+        background-color: rgba(99, 132, 255, 0.1);
+    }
+}
+
 .ai-error-message {
     border-radius: 8px;
     padding: 8px 8px 0;
@@ -215,58 +342,234 @@
     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;
+        color: rgba(255, 255, 255, 0.9);
+    }
+
+    .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;
+}
+
+.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);
+    }
 
-.suggestion-button ::ng-deep .mdc-list-item__primary-text {
-    text-overflow: initial;
-    white-space: wrap;
-    overflow: initial;
+    .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,8 +588,19 @@
     width: calc(100% - 4px);
 }
 
-.ai-message-form__button {
+.ai-message-form__char-count {
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 12px;
+}
 
+@media (prefers-color-scheme: dark) {
+    .ai-message-form__char-count {
+        color: rgba(255, 255, 255, 0.4);
+    }
+}
+
+.ai-message-form__button {
+    color: #A855F7 !important;
 }
 
 .ai-panel-sidebar__message {
@@ -294,36 +608,306 @@
     width: 100%;
 }
 
-.ai-placeholder {
-    margin-top:72px;
-    padding-left: 16px;
-    padding-right: 16px;
+.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: light) {
-    .ai-placeholder {
-        color: rgba(0, 0, 0, 0.64);
+@media (prefers-color-scheme: dark) {
+    .footer p {
+        color: rgba(255, 255, 255, 0.36) !important;
     }
 }
 
+.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;
+}
+
+/* Welcome centered layout */
+.ai-welcome-centered {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    padding: 16px;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.ai-welcome-centered__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    max-width: 500px;
+    gap: 24px;
+}
+
+.ai-welcome-icon {
+    width: 48px !important;
+    height: 48px !important;
+    animation: rocket-float 3s ease-in-out infinite;
+}
+
+.ai-welcome-icon ::ng-deep svg path:first-of-type {
+    fill: rgba(0, 0, 0, 0.6);
+}
+
+.ai-welcome-icon ::ng-deep svg path[fill="#C177FC"] {
+    animation: sparkle-twinkle 1.5s ease-in-out infinite;
+}
+
+.ai-welcome-icon ::ng-deep svg path[fill="#C177FC"]:nth-of-type(2) {
+    animation-delay: 0.3s;
+}
+
+.ai-welcome-icon ::ng-deep svg path[fill="#C177FC"]:nth-of-type(3) {
+    animation-delay: 0.6s;
+}
+
+.ai-welcome-icon ::ng-deep svg path[fill="#C177FC"]:nth-of-type(4) {
+    animation-delay: 0.9s;
+}
+
 @media (prefers-color-scheme: dark) {
-    .ai-placeholder {
-        color: rgba(255, 255, 255, 0.64);
+    .ai-welcome-icon ::ng-deep svg path:first-of-type {
+        fill: rgba(255, 255, 255, 0.7);
     }
 }
 
-.footer p {
-    color: rgba(0, 0, 0, 0.36) !important;
+.ai-welcome-centered__title {
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.7);
+    margin: 0;
     text-align: center;
 }
 
 @media (prefers-color-scheme: dark) {
-    .footer p {
-        color: rgba(255, 255, 255, 0.36) !important;
+    .ai-welcome-centered__title {
+        color: rgba(255, 255, 255, 0.7);
     }
 }
 
-.link {
-    color: var(--color-accentedPalette-500);
+.ai-input-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.ai-welcome-form {
+    width: 100%;
+}
+
+.ai-welcome-form__field {
+    width: 100%;
+}
+
+.ai-welcome-form__field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,
+.ai-welcome-form__field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing {
+    border-radius: 24px;
+}
+
+.ai-welcome-form__field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading {
+    border-radius: 24px 0 0 24px;
+    width: 24px;
+}
+
+.ai-welcome-form__field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing {
+    border-radius: 0 24px 24px 0;
+}
+
+.ai-welcome-form__field ::ng-deep .mdc-text-field--focused .mdc-notched-outline__leading,
+.ai-welcome-form__field ::ng-deep .mdc-text-field--focused .mdc-notched-outline__trailing {
+    border-color: #6384FF !important;
+    border-width: 2px !important;
+}
+
+.ai-welcome-form__field ::ng-deep .mdc-text-field--focused .mdc-notched-outline__notch {
+    border-color: #6384FF !important;
+    border-width: 2px 0 !important;
+}
+
+.ai-welcome-form__field ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+}
+
+.ai-welcome-form__button {
+    color: #6384FF !important;
+}
+
+.ai-completions {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: var(--mat-sidenav-content-background-color);
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+    margin-top: 2px;
+    overflow: hidden;
+}
+
+@media (prefers-color-scheme: dark) {
+    .ai-completions {
+        border-color: rgba(255, 255, 255, 0.12);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+}
+
+.ai-completion-item {
+    display: block;
+    width: 100%;
+    padding: 12px 16px;
+    text-align: left;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.87);
+    transition: background-color 0.15s ease;
+}
+
+.ai-completion-item:hover {
+    background-color: rgba(99, 132, 255, 0.08);
+}
+
+.ai-completion-item:not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+@media (prefers-color-scheme: dark) {
+    .ai-completion-item {
+        color: rgba(255, 255, 255, 0.87);
+    }
+
+    .ai-completion-item:not(:last-child) {
+        border-bottom-color: rgba(255, 255, 255, 0.06);
+    }
+}
+
+.ai-categories {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    width: 100%;
+}
+
+.ai-category {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.ai-category__title {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: rgba(0, 0, 0, 0.4);
+    margin: 12px 0 4px 0 !important;
+}
+
+.ai-category:first-child .ai-category__title {
+    margin-top: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+    .ai-category__title {
+        color: rgba(255, 255, 255, 0.4);
+    }
+}
+
+.ai-category__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.suggestion-chip_active {
+    background-color: rgba(99, 132, 255, 0.15) !important;
+    border-color: #6384FF !important;
+}
+
+@media (prefers-color-scheme: dark) {
+    .suggestion-chip_active {
+        background-color: rgba(99, 132, 255, 0.25) !important;
+    }
 }
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 64f23ffc0..4abd0ec1d 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,21 @@
-<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 +29,74 @@ <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-centered">
+                <div class="ai-welcome-centered__content">
+                    <mat-icon svgIcon="ai_rocket" class="ai-welcome-icon"></mat-icon>
+                    <p class="ai-welcome-centered__title">Ask anything about your data</p>
+
+                    <div class="ai-input-wrapper">
+                        <form (ngSubmit)="createThread()" class="ai-welcome-form">
+                            <mat-form-field appearance="outline" class="ai-welcome-form__field">
+                                <mat-label>Ask a question about this table...</mat-label>
+                                <input matInput
+                                    name="welcomeMessage"
+                                    [(ngModel)]="message"
+                                    (input)="onWelcomeInputChange()"
+                                    (focus)="onWelcomeInputFocus()"
+                                    (blur)="onWelcomeInputBlur()"
+                                    autocomplete="off"
+                                    maxlength="255">
+                                <button mat-icon-button matSuffix type="submit" class="ai-welcome-form__button">
+                                    <mat-icon>send</mat-icon>
+                                </button>
+                            </mat-form-field>
+                        </form>
 
+                        <div class="ai-completions" *ngIf="showCompletions && activeCompletions.length"
+                            (mouseleave)="onCompletionMouseLeave()">
+                            <button *ngFor="let completion of activeCompletions"
+                                class="ai-completion-item"
+                                (mouseenter)="onCompletionHover(completion)"
+                                (mousedown)="selectCompletion(completion)">
+                                <span class="ai-completion-text">{{completion}}</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="ai-categories">
+                        <div class="ai-category" *ngFor="let category of suggestionCategories">
+                            <p class="ai-category__title">{{category.title}}</p>
+                            <div class="ai-category__chips">
+                                <button *ngFor="let suggestion of category.suggestions"
+                                    class="suggestion-chip"
+                                    [class.suggestion-chip_active]="activeSuggestion?.title === suggestion.title"
+                                    (click)="onSuggestionChipClick(suggestion)">
+                                    <span>{{suggestion.title}}</span>
+                                </button>
+                            </div>
+                        </div>
+                    </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">{{ currentLoadingStep }}</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">
+        <form *ngIf="messagesChain.length" (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 +105,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>
@@ -71,7 +113,7 @@ <h2 class="mat-heading-2 ai-panel-sidebar__title">
             </div>
         </form>
 
-        <div class="footer">
+        <div class="footer" *ngIf="messagesChain.length">
             <p class="mat-small">
                 AI may provide inaccurate responses.<br/>Check our <a href="https://rocketadmin.com/privacy/" class="link">Privacy policy</a>.
             </p>
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.spec.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.spec.ts
index 15077cf52..cfc39964b 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.spec.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.spec.ts
@@ -32,6 +32,7 @@ describe('DbTableAiPanelComponent', () => {
 
 	const mockTableStateService = {
 		aiPanelCast: of(false),
+		aiPanelExpandedCast: of(false),
 		handleViewAIpanel: vi.fn(),
 	};
 
@@ -63,9 +64,9 @@ describe('DbTableAiPanelComponent', () => {
 		expect(component.tableName).toBe('users');
 	});
 
-	it('should have default AI request suggestions', () => {
-		expect(component.aiRequestSuggestions.length).toBeGreaterThan(0);
-		expect(component.aiRequestSuggestions).toContain('How many records were created last month?');
+	it('should have default suggestion categories', () => {
+		expect(component.suggestionCategories.length).toBeGreaterThan(0);
+		expect(component.suggestionCategories[0].title).toBe('Explore');
 	});
 
 	it('should update character count on keydown', () => {
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 638cbf310..ba22afe16 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,6 @@
 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 { Subscription } from 'rxjs';
 
 import { CommonModule } from '@angular/common';
 import { ConnectionsService } from 'src/app/services/connections.service';
@@ -10,7 +11,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 +25,6 @@ import { TablesService } from 'src/app/services/tables.service';
     MatIconModule,
     MatFormFieldModule,
     MatInputModule,
-    MatListModule,
     MatButtonModule,
     Angulartics2Module
   ]
@@ -33,6 +32,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 +46,27 @@ 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 aiSuggestions: { title: string; prompt: string; completions: string[] }[] = [];
+  public suggestionCategories: { title: string; suggestions: { title: string; prompt: string; completions: string[] }[] }[] = [];
+  public activeSuggestion: { title: string; prompt: string; completions: string[] } | null = null;
+  public activeCompletions: string[] = [];
+  public showCompletions: boolean = false;
   public submitting: boolean = false;
+  public isExpanded: boolean = false;
+  public textareaRows: number = 4;
+  public currentLoadingStep: string = '';
+
+  private _currentRequest: Subscription = null;
+  private _loadingStepsInterval: any = null;
+  private _loadingSteps: string[] = [
+    'Connecting to database',
+    'Analyzing table structure',
+    'Scanning records',
+    'Processing your query',
+    'Searching for patterns',
+    'Generating response'
+  ];
+  private _currentStepIndex: number = 0;
 
   constructor(
     private _connections: ConnectionsService,
@@ -69,6 +83,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.generateSuggestionCategories();
+  }
+
+  ngOnChanges(): void {
+    this.generateSuggestionCategories();
   }
 
   async ngAfterViewInit() {
@@ -78,6 +103,8 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
   };
 
   ngOnDestroy() {
+    this.cancelRequest();
+    this.stopLoadingSteps();
     this.angulartics2.eventTrack.next({
       action: 'AI panel: destroyed',
       properties: {
@@ -86,6 +113,40 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
     });
   }
 
+  cancelRequest(): void {
+    if (this._currentRequest) {
+      this._currentRequest.unsubscribe();
+      this._currentRequest = null;
+      this.submitting = false;
+      this.stopLoadingSteps();
+
+      this.messagesChain.push({
+        type: 'ai-error',
+        text: 'Request cancelled'
+      });
+
+      this.angulartics2.eventTrack.next({
+        action: 'AI panel: request cancelled',
+      });
+    }
+  }
+
+  startLoadingSteps(): void {
+    this._currentStepIndex = 0;
+    this.currentLoadingStep = this._loadingSteps[0];
+    this._loadingStepsInterval = setInterval(() => {
+      this._currentStepIndex = (this._currentStepIndex + 1) % this._loadingSteps.length;
+      this.currentLoadingStep = this._loadingSteps[this._currentStepIndex];
+    }, 2000);
+  }
+
+  stopLoadingSteps(): void {
+    if (this._loadingStepsInterval) {
+      clearInterval(this._loadingStepsInterval);
+      this._loadingStepsInterval = null;
+    }
+  }
+
   onKeydown(event: KeyboardEvent): void {
     this.charactrsNumber = this.message.length + 1;
 
@@ -115,6 +176,7 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
       this.message = suggestedMessage;
     }
     this.submitting = true;
+    this.startLoadingSteps();
     this.messagesChain.push({
       type: 'user',
       text: this.message
@@ -122,7 +184,7 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
     const messageCopy = this.message;
     this.message = '';
 
-    this._tables.createAIthread(this.connectionID, this.tableName, messageCopy).subscribe((response) => {
+    this._currentRequest = this._tables.createAIthread(this.connectionID, this.tableName, messageCopy).subscribe((response) => {
       this.threadID = response.threadId;
 
       this.messagesChain.push({
@@ -130,6 +192,8 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
         text: this.markdownService.parse(response.responseMessage) as string
       });
       this.submitting = false;
+      this.stopLoadingSteps();
+      this._currentRequest = null;
 
       this.angulartics2.eventTrack.next({
         action: 'AI panel: thread created successfully',
@@ -143,9 +207,13 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
         this.angulartics2.eventTrack.next({
           action: 'AI panel: thread creation returned an error',
         });
+        this.stopLoadingSteps();
+        this._currentRequest = null;
       },
       () => {
         this.submitting = false;
+        this.stopLoadingSteps();
+        this._currentRequest = null;
       }
     );
   }
@@ -155,6 +223,7 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
       this.message = suggestedMessage;
     }
     this.submitting = true;
+    this.startLoadingSteps();
     this.messagesChain.push({
       type: 'user',
       text: this.message
@@ -162,12 +231,14 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
     const messageCopy = this.message;
     this.message = '';
     this.charactrsNumber = 0;
-    this._tables.requestAImessage(this.connectionID, this.tableName, this.threadID, messageCopy).subscribe((response_message) => {
+    this._currentRequest = this._tables.requestAImessage(this.connectionID, this.tableName, this.threadID, messageCopy).subscribe((response_message) => {
       this.messagesChain.push({
         type: 'ai',
         text: this.markdownService.parse(response_message) as string
       });
       this.submitting = false;
+      this.stopLoadingSteps();
+      this._currentRequest = null;
 
       this.angulartics2.eventTrack.next({
         action: 'AI panel: message sent successfully',
@@ -179,12 +250,16 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
           text: error_message
         });
         this.submitting = false;
+        this.stopLoadingSteps();
+        this._currentRequest = null;
         this.angulartics2.eventTrack.next({
           action: 'AI panel: message sent and returned an error',
         });
       },
       () => {
         this.submitting = false;
+        this.stopLoadingSteps();
+        this._currentRequest = null;
       })
   }
 
@@ -199,4 +274,216 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
   handleClose() {
     this._tableState.handleViewAIpanel();
   }
+
+  toggleExpand() {
+    this._tableState.toggleAIPanelExpanded();
+  }
+
+  @HostListener('window:resize')
+  onWindowResize() {
+    this.adjustTextareaRows();
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent) {
+    if (!this.showCompletions) return;
+
+    const target = event.target as HTMLElement;
+    const clickedOnChip = target.closest('.suggestion-chip');
+    const clickedOnDropdown = target.closest('.ai-completions');
+    const clickedOnInput = target.closest('.ai-welcome-form__field');
+
+    if (!clickedOnChip && !clickedOnDropdown && !clickedOnInput) {
+      this.showCompletions = false;
+      this.activeSuggestion = null;
+    }
+  }
+
+  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 generateSuggestionCategories(): void {
+    const categories: { title: string; suggestions: { title: string; prompt: string; completions: string[] }[] }[] = [];
+
+    // Category: Explore Data
+    categories.push({
+      title: 'Explore',
+      suggestions: [
+        {
+          title: 'Show recent records',
+          prompt: 'Show recent records',
+          completions: [
+            'Show recent records - the 10 most recently added',
+            'Show recent records - from the last 24 hours',
+            'Show recent records - the last entry added',
+            'Show recent records - with newest timestamps'
+          ]
+        },
+        {
+          title: 'Summarize table',
+          prompt: 'Summarize table',
+          completions: [
+            'Summarize table - structure and content overview',
+            'Summarize table - what kind of data is stored',
+            'Summarize table - purpose of each column',
+            'Summarize table - record count and what they represent'
+          ]
+        },
+        {
+          title: 'Find patterns',
+          prompt: 'Find patterns',
+          completions: [
+            'Find patterns - in this data',
+            'Find patterns - correlations between columns',
+            'Find patterns - common value combinations',
+            'Find patterns - seasonal or cyclical trends'
+          ]
+        }
+      ]
+    });
+
+    // Category: Data Quality
+    categories.push({
+      title: 'Data Quality',
+      suggestions: [
+        {
+          title: 'Find issues',
+          prompt: 'Find issues',
+          completions: [
+            'Find issues - data quality problems',
+            'Find issues - missing or NULL values',
+            'Find issues - potential duplicates',
+            'Find issues - inconsistent data formats'
+          ]
+        },
+        {
+          title: 'Check duplicates',
+          prompt: 'Check duplicates',
+          completions: [
+            'Check duplicates - any duplicate records',
+            'Check duplicates - rows that look similar',
+            'Check duplicates - values appearing multiple times',
+            'Check duplicates - records entered twice'
+          ]
+        },
+        {
+          title: 'Validate data',
+          prompt: 'Validate data',
+          completions: [
+            'Validate data - required fields filled',
+            'Validate data - incorrect values',
+            'Validate data - records not matching patterns',
+            'Validate data - outliers and unusual values'
+          ]
+        }
+      ]
+    });
+
+    // Category: Insights
+    categories.push({
+      title: 'Insights',
+      suggestions: [
+        {
+          title: 'Top values',
+          prompt: 'Top values',
+          completions: [
+            'Top values - most common in each column',
+            'Top values - 10 most frequent entries',
+            'Top values - categories with most records',
+            'Top values - what appears most often'
+          ]
+        },
+        {
+          title: 'Statistics',
+          prompt: 'Statistics',
+          completions: [
+            'Statistics - for numeric columns',
+            'Statistics - min, max, and average',
+            'Statistics - distribution of values',
+            'Statistics - summary of this data'
+          ]
+        },
+        {
+          title: 'Anomalies',
+          prompt: 'Anomalies',
+          completions: [
+            'Anomalies - unusual or unexpected values',
+            'Anomalies - records that stand out',
+            'Anomalies - statistical outliers',
+            'Anomalies - what looks different or wrong'
+          ]
+        }
+      ]
+    });
+
+    this.suggestionCategories = categories;
+  }
+
+  onSuggestionChipClick(suggestion: { title: string; prompt: string; completions: string[] }): void {
+    this.activeSuggestion = suggestion;
+    this.message = suggestion.prompt;
+    this.activeCompletions = suggestion.completions;
+    this.showCompletions = true;
+
+    this.angulartics2.eventTrack.next({
+      action: 'AI panel: suggestion chip clicked',
+      properties: {
+        suggestionTitle: suggestion.title
+      }
+    });
+  }
+
+  selectCompletion(completion: string): void {
+    this.message = completion;
+    this.showCompletions = false;
+    this.activeSuggestion = null;
+    this.createThread(completion);
+
+    this.angulartics2.eventTrack.next({
+      action: 'AI panel: completion selected',
+      properties: {
+        completion: completion
+      }
+    });
+  }
+
+  onWelcomeInputChange(): void {
+    if (this.message.length > 0 && (!this.activeSuggestion || this.message !== this.activeSuggestion.prompt)) {
+      this.showCompletions = false;
+      this.activeSuggestion = null;
+    }
+  }
+
+  onCompletionHover(completion: string): void {
+    this.message = completion;
+  }
+
+  onCompletionMouseLeave(): void {
+    if (this.activeSuggestion) {
+      this.message = this.activeSuggestion.prompt;
+    }
+  }
+
+  onWelcomeInputFocus(): void {
+    if (this.activeSuggestion) {
+      this.showCompletions = true;
+    }
+  }
+
+  onWelcomeInputBlur(): void {
+    // Dropdown closing is now handled by document click listener
+  }
 }
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 5999140f5..dcfff60a5 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
@@ -162,6 +162,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 ef814d82a..c4441a3b0 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,11 @@ export class TableStateService {
 
   handleViewAIpanel() {
     this.clearSelection();
-    this.aiPanelSubject.next(!this.aiPanelSubject.value);
+    const isOpening = !this.aiPanelSubject.value;
+    this.aiPanelSubject.next(isOpening);
+    if (!isOpening) {
+      this.aiPanelExpandedSubject.next(false);
+    }
   }
 
   clearSelection() {
@@ -76,5 +83,11 @@ export class TableStateService {
 
   closeAIpanel() {
     this.aiPanelSubject.next(false);
+    this.aiPanelExpandedSubject.next(false);
+  }
+
+  toggleAIPanelExpanded() {
+    const newValue = !this.aiPanelExpandedSubject.value;
+    this.aiPanelExpandedSubject.next(newValue);
   }
 }