diff --git a/package-lock.json b/package-lock.json
index e123ea77..ab0b27b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reor-project",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reor-project",
-      "version": "0.2.24",
+      "version": "0.2.26",
       "license": "AGPL-3.0",
       "dependencies": {
         "@aarkue/tiptap-math-extension": "^1.2.2",
@@ -94,6 +94,7 @@
         "react-icons": "^4.12.0",
         "react-markdown": "^9.0.1",
         "react-quill": "^2.0.0",
+        "react-resizable-panels": "^2.1.6",
         "react-rnd": "^10.4.1",
         "react-switch": "^7.0.0",
         "react-toastify": "^10.0.4",
@@ -20676,6 +20677,15 @@
         }
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.6.tgz",
+      "integrity": "sha512-oIqo/7pp2TsR+Dp1qZMr1l4RBDV4Zz/0HEG5zxliBJoHqqFnG0MbmFbk+5Q1VMGfPQ4uhXxefunLC1o7v38PDQ==",
+      "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-rnd": {
       "version": "10.4.1",
       "license": "MIT",
diff --git a/package.json b/package.json
index 593639fa..39dadda2 100644
--- a/package.json
+++ b/package.json
@@ -113,6 +113,7 @@
     "react-icons": "^4.12.0",
     "react-markdown": "^9.0.1",
     "react-quill": "^2.0.0",
+    "react-resizable-panels": "^2.1.6",
     "react-rnd": "^10.4.1",
     "react-switch": "^7.0.0",
     "react-toastify": "^10.0.4",
diff --git a/src/components/MainPage.tsx b/src/components/MainPage.tsx
index 90f3bbae..5bc224fc 100644
--- a/src/components/MainPage.tsx
+++ b/src/components/MainPage.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
 
 import '../styles/global.css'
 import ChatComponent from './Chat'
-import ResizableComponent from './Common/ResizableComponent'
 import TitleBar from './TitleBar/TitleBar'
 import EditorManager from './Editor/EditorManager'
 import IconsSidebar from './Sidebars/IconsSidebar'
@@ -21,18 +21,16 @@ const MainContent: React.FC = () => {
   const { currentlyOpenFilePath } = useFileContext()
 
   return (
-    <ResizableComponent resizeSide="right">
-      <div className="relative flex size-full overflow-hidden">
-        {currentlyOpenFilePath ? (
-          <div className="h-full overflow-hidden">
-            <EditorManager />
-          </div>
-        ) : (
-          <EmptyPage />
-        )}
-        <WritingAssistant />
-      </div>
-    </ResizableComponent>
+    <div className="relative flex size-full overflow-hidden">
+      {currentlyOpenFilePath ? (
+        <div className="h-full overflow-hidden">
+          <EditorManager />
+        </div>
+      ) : (
+        <EmptyPage />
+      )}
+      <WritingAssistant />
+    </div>
   )
 }
 
@@ -50,26 +48,32 @@ const MainPageContent: React.FC = () => {
           <IconsSidebar getShortcutDescription={getShortcutDescription} />
         </div>
 
-        <ResizableComponent resizeSide="right">
-          <div className="size-full border-y-0 border-l-0 border-r-[0.001px] border-solid border-neutral-700">
-            <SidebarManager />
-          </div>
-        </ResizableComponent>
+        <ResizablePanelGroup direction="horizontal">
+          <ResizablePanel defaultSize={20} minSize={15} maxSize={40}>
+            <div className="size-full border-y-0 border-l-0 border-r-[0.001px] border-solid border-neutral-700">
+              <SidebarManager />
+            </div>
+          </ResizablePanel>
 
-        {/* Main content area with split screen support */}
-        <div className="flex grow">
-          {/* Editor section */}
-          {(!showChatbot || currentlyOpenFilePath) && <MainContent />}
+          <ResizableHandle />
+
+          <ResizablePanel defaultSize={showChatbot ? 50 : 80}>
+            {(!showChatbot || currentlyOpenFilePath) && <MainContent />}
+          </ResizablePanel>
 
           {showChatbot && (
-            // eslint-disable-next-line react/jsx-no-useless-fragment
-            <div className="w-full bg-pink-200">
-              <div className="h-below-titlebar w-full">
-                <ChatComponent />
-              </div>
-            </div>
+            <>
+              <ResizableHandle />
+              <ResizablePanel defaultSize={30}>
+                <div className="w-full bg-pink-200">
+                  <div className="h-below-titlebar w-full">
+                    <ChatComponent />
+                  </div>
+                </div>
+              </ResizablePanel>
+            </>
           )}
-        </div>
+        </ResizablePanelGroup>
 
         <CommonModals />
       </div>