diff --git a/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.css b/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.css
index d0c4c7278..d01a9d2e6 100644
--- a/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.css
+++ b/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.css
@@ -13,7 +13,11 @@
 }
 
 .copilotKitMessages {
-  @apply px-4 !important;
+  @apply h-full flex flex-col !important;
+}
+
+.copilotKitMessages > div {
+  @apply flex-1 overflow-y-auto !important;
 }
 
 .copilotKitUserMessage {
@@ -25,9 +29,9 @@
 }
 
 .chat-container {
-  @apply max-h-[calc(100vh-31rem)] flex flex-col;
+  @apply h-full flex flex-col;
 }
 
 .chat-messages {
-  @apply flex-1 overflow-y-scroll overflow-x-hidden;
+  @apply flex-1 overflow-y-auto overflow-x-hidden;
 }
diff --git a/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.tsx b/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.tsx
index da8eadd03..5d3d65f34 100644
--- a/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.tsx
+++ b/keep-ui/app/(keep)/incidents/[id]/chat/incident-chat.tsx
@@ -371,7 +371,7 @@ export function IncidentChat({ incident }: { incident: IncidentDto }) {
     );
 
   return (
-    <Card className="max-h-[calc(100vh-28rem)]">
+    <Card className="h-full">
       <div className="chat-container">
         <div className="chat-messages">
           <CopilotChat
@@ -380,7 +380,7 @@ export function IncidentChat({ incident }: { incident: IncidentDto }) {
             labels={{
               title: "Incident Assistant",
               initial:
-                "Hi! 👋 Lets work together to resolve this incident! Ask me anything",
+                "Hi! Lets work together to resolve this incident! Ask me anything",
               placeholder: "For example: Find the root cause of this incident",
             }}
           />
diff --git a/keep-ui/app/(keep)/incidents/[id]/incident-layout-client.tsx b/keep-ui/app/(keep)/incidents/[id]/incident-layout-client.tsx
new file mode 100644
index 000000000..6589065c4
--- /dev/null
+++ b/keep-ui/app/(keep)/incidents/[id]/incident-layout-client.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { ReactNode } from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { IncidentDto } from "@/entities/incidents/model";
+import { IncidentChatClientPage } from "./chat/page.client";
+import { useIncident } from "@/utils/hooks/useIncidents";
+import { IncidentHeader } from "./incident-header";
+import { IncidentTabsNavigation } from "./incident-tabs-navigation";
+
+function ResizeHandle() {
+  return (
+    <PanelResizeHandle className="w-2 group hover:bg-tremor-brand-subtle transition-colors">
+      <div className="h-full w-1 mx-auto bg-tremor-border group-hover:bg-tremor-brand group-hover:w-1.5 transition-all" />
+    </PanelResizeHandle>
+  );
+}
+
+export function IncidentLayoutClient({
+  children,
+  initialIncident,
+  AIEnabled,
+}: {
+  children: ReactNode;
+  initialIncident: IncidentDto;
+  AIEnabled: boolean;
+}) {
+  const { data: incident } = useIncident(initialIncident.id, {
+    fallbackData: initialIncident,
+  });
+
+  if (!incident) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <IncidentHeader incident={incident} />
+      <IncidentTabsNavigation incident={incident} />
+      <PanelGroup direction="horizontal">
+        <Panel defaultSize={60} minSize={30}>
+          <div className="pr-2">
+            <div className="flex-1 min-w-0">{children}</div>
+          </div>
+        </Panel>
+        {AIEnabled && (
+          <>
+            <ResizeHandle />
+            <Panel defaultSize={40} minSize={25}>
+              <div className="pl-2">
+                <IncidentChatClientPage incident={incident} />
+              </div>
+            </Panel>
+          </>
+        )}
+      </PanelGroup>
+    </div>
+  );
+}
diff --git a/keep-ui/app/(keep)/incidents/[id]/layout.tsx b/keep-ui/app/(keep)/incidents/[id]/layout.tsx
index aa1bafb4c..c16338dd0 100644
--- a/keep-ui/app/(keep)/incidents/[id]/layout.tsx
+++ b/keep-ui/app/(keep)/incidents/[id]/layout.tsx
@@ -1,9 +1,7 @@
 import { ReactNode } from "react";
-import { IncidentTabsNavigation } from "./incident-tabs-navigation";
-import { IncidentHeader } from "./incident-header";
 import { getIncidentWithErrorHandling } from "./getIncidentWithErrorHandling";
 import { IncidentHeaderSkeleton } from "./incident-header-skeleton";
-import { IncidentChatClientPage } from "./chat/page.client";
+import { IncidentLayoutClient } from "./incident-layout-client";
 
 export default async function Layout({
   children,
@@ -17,18 +15,9 @@ export default async function Layout({
   try {
     const incident = await getIncidentWithErrorHandling(serverParams.id, false);
     return (
-      <div className="flex flex-col gap-4">
-        <IncidentHeader incident={incident} />
-        <IncidentTabsNavigation incident={incident} />
-        <div className="flex gap-4">
-          <div className="flex-1 min-w-0">{children}</div>
-          {AIEnabled && (
-            <div className="w-[40%] shrink-0">
-              <IncidentChatClientPage incident={incident} />
-            </div>
-          )}
-        </div>
-      </div>
+      <IncidentLayoutClient initialIncident={incident} AIEnabled={AIEnabled}>
+        {children}
+      </IncidentLayoutClient>
     );
   } catch (error) {
     return (
diff --git a/keep-ui/package-lock.json b/keep-ui/package-lock.json
index 512cb6dd7..ec81bb704 100644
--- a/keep-ui/package-lock.json
+++ b/keep-ui/package-lock.json
@@ -88,6 +88,7 @@
         "react-player": "^2.16.0",
         "react-querybuilder": "^6.5.4",
         "react-quill": "^2.0.0",
+        "react-resizable-panels": "^2.1.7",
         "react-select": "^5.8.0",
         "react-sliding-side-panel": "^2.0.3",
         "react-timeago": "^7.2.0",
@@ -18574,6 +18575,16 @@
         "react": ">= 16.3"
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.7.tgz",
+      "integrity": "sha512-JtT6gI+nURzhMYQYsx8DKkx6bSoOGFp7A3CwMrOb8y5jFHFyqwo9m68UhmXRw57fRVJksFn1TSlm3ywEQ9vMgA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/react-select": {
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.3.tgz",
diff --git a/keep-ui/package.json b/keep-ui/package.json
index ac24564d1..38546e52a 100644
--- a/keep-ui/package.json
+++ b/keep-ui/package.json
@@ -89,6 +89,7 @@
     "react-player": "^2.16.0",
     "react-querybuilder": "^6.5.4",
     "react-quill": "^2.0.0",
+    "react-resizable-panels": "^2.1.7",
     "react-select": "^5.8.0",
     "react-sliding-side-panel": "^2.0.3",
     "react-timeago": "^7.2.0",