diff --git a/package.json b/package.json
index 85a17df62..27d63d8c0 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "lerna": "^8.1.9",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.0",
+    "react-draggable": "^4.5.0",
     "rimraf": "^3.0.2",
     "typescript": "^5",
     "webpack": "^5.76.3"
diff --git a/packages/base/src/icons.ts b/packages/base/src/icons.ts
index b9a6ca61f..a304312c9 100644
--- a/packages/base/src/icons.ts
+++ b/packages/base/src/icons.ts
@@ -9,6 +9,7 @@ import { LabIcon } from '@jupyterlab/ui-components';
 
 import bookOpenSvgStr from '../style/icons/book_open.svg';
 import clockSvgStr from '../style/icons/clock-solid.svg';
+import dragSvgStr from '../style/icons/drag.svg';
 import geoJsonSvgStr from '../style/icons/geojson.svg';
 import geolocationSvgStr from '../style/icons/geolocation.svg';
 import infoSvgStr from '../style/icons/info-solid.svg';
@@ -115,3 +116,8 @@ export const markerIcon = new LabIcon({
   name: 'jupytergis::marker',
   svgstr: markerSvgStr,
 });
+
+export const dragIcon = new LabIcon({
+  name: 'jupytergis::drag',
+  svgstr: dragSvgStr,
+});
diff --git a/packages/base/src/panelview/leftpanel.tsx b/packages/base/src/panelview/leftpanel.tsx
index 4eead1a39..0773211a7 100644
--- a/packages/base/src/panelview/leftpanel.tsx
+++ b/packages/base/src/panelview/leftpanel.tsx
@@ -3,7 +3,9 @@ import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
 import { MouseEvent as ReactMouseEvent } from 'react';
 import * as React from 'react';
+import Draggable from 'react-draggable';
 
+import { dragIcon } from '../icons';
 import { LayersBodyComponent } from './components/layers';
 import {
   PanelTabs,
@@ -62,55 +64,60 @@ export const LeftPanel: React.FC<ILeftPanelProps> = (
   );
 
   return (
-    <div
-      className="jgis-left-panel-container"
-      style={{ display: leftPanelVisible ? 'block' : 'none' }}
-    >
-      <PanelTabs curTab={curTab} className="jgis-panel-tabs">
-        <TabsList>
-          {tabInfo.map(tab => (
-            <TabsTrigger
-              className="jGIS-layer-browser-category"
-              key={tab.name}
-              value={tab.name}
-              onClick={() => {
-                if (curTab !== tab.name) {
-                  setCurTab(tab.name);
-                } else {
-                  setCurTab('');
-                }
-              }}
-            >
-              {tab.title}
-            </TabsTrigger>
-          ))}
-        </TabsList>
+    <Draggable handle=".jgis-drag-handle" bounds=".jGIS-Mainview-Container">
+      <div
+        className="jgis-left-panel-container"
+        style={{ display: leftPanelVisible ? 'block' : 'none' }}
+      >
+        <div className="jgis-drag-handle">
+          <dragIcon.react tag="div" className="jgis-drag-icon" />
+        </div>
+        <PanelTabs curTab={curTab} className="jgis-panel-tabs">
+          <TabsList>
+            {tabInfo.map(tab => (
+              <TabsTrigger
+                className="jGIS-layer-browser-category"
+                key={tab.name}
+                value={tab.name}
+                onClick={() => {
+                  if (curTab !== tab.name) {
+                    setCurTab(tab.name);
+                  } else {
+                    setCurTab('');
+                  }
+                }}
+              >
+                {tab.title}
+              </TabsTrigger>
+            ))}
+          </TabsList>
 
-        {!settings.layersDisabled && (
-          <TabsContent
-            value="layers"
-            className="jgis-panel-tab-content jp-gis-layerPanel"
-          >
-            <LayersBodyComponent
-              model={props.model}
-              commands={props.commands}
-              state={props.state}
-            ></LayersBodyComponent>
-          </TabsContent>
-        )}
+          {!settings.layersDisabled && (
+            <TabsContent
+              value="layers"
+              className="jgis-panel-tab-content jp-gis-layerPanel"
+            >
+              <LayersBodyComponent
+                model={props.model}
+                commands={props.commands}
+                state={props.state}
+              ></LayersBodyComponent>
+            </TabsContent>
+          )}
 
-        {!settings.stacBrowserDisabled && (
-          <TabsContent value="stac" className="jgis-panel-tab-content">
-            <StacPanel model={props.model} />
-          </TabsContent>
-        )}
+          {!settings.stacBrowserDisabled && (
+            <TabsContent value="stac" className="jgis-panel-tab-content">
+              <StacPanel model={props.model} />
+            </TabsContent>
+          )}
 
-        {!settings.filtersDisabled && (
-          <TabsContent value="filters" className="jgis-panel-tab-content">
-            <FilterComponent model={props.model}></FilterComponent>
-          </TabsContent>
-        )}
-      </PanelTabs>
-    </div>
+          {!settings.filtersDisabled && (
+            <TabsContent value="filters" className="jgis-panel-tab-content">
+              <FilterComponent model={props.model}></FilterComponent>
+            </TabsContent>
+          )}
+        </PanelTabs>
+      </div>
+    </Draggable>
   );
 };
diff --git a/packages/base/src/panelview/rightpanel.tsx b/packages/base/src/panelview/rightpanel.tsx
index 7874eaeda..996c35e2e 100644
--- a/packages/base/src/panelview/rightpanel.tsx
+++ b/packages/base/src/panelview/rightpanel.tsx
@@ -5,10 +5,12 @@ import {
   IJupyterGISModel,
 } from '@jupytergis/schema';
 import * as React from 'react';
+import Draggable from 'react-draggable';
 
 import { AnnotationsPanel } from './annotationPanel';
 import { IdentifyPanelComponent } from './components/identify-panel/IdentifyPanel';
 import { ObjectPropertiesReact } from './objectproperties';
+import { dragIcon } from '../icons';
 import {
   PanelTabs,
   TabsContent,
@@ -83,61 +85,69 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
     React.useState(undefined);
 
   return (
-    <div
-      className="jgis-right-panel-container"
-      style={{ display: rightPanelVisible ? 'block' : 'none' }}
-    >
-      <PanelTabs className="jgis-panel-tabs" curTab={curTab}>
-        <TabsList>
-          {tabInfo.map(tab => (
-            <TabsTrigger
-              className="jGIS-layer-browser-category"
-              key={tab.name}
-              value={tab.name}
-              onClick={() => {
-                if (curTab !== tab.name) {
-                  setCurTab(tab.name);
-                } else {
-                  setCurTab('');
-                }
-              }}
-            >
-              {tab.title}
-            </TabsTrigger>
-          ))}
-        </TabsList>
+    <Draggable handle=".jgis-drag-handle" bounds=".jGIS-Mainview-Container">
+      <div
+        className="jgis-right-panel-container"
+        style={{ display: rightPanelVisible ? 'block' : 'none' }}
+      >
+        <div className="jgis-drag-handle">
+          <dragIcon.react tag="div" className="jgis-drag-icon" />
+        </div>
+        <PanelTabs className="jgis-panel-tabs" curTab={curTab}>
+          <TabsList>
+            {tabInfo.map(tab => (
+              <TabsTrigger
+                className="jGIS-layer-browser-category"
+                key={tab.name}
+                value={tab.name}
+                onClick={() => {
+                  if (curTab !== tab.name) {
+                    setCurTab(tab.name);
+                  } else {
+                    setCurTab('');
+                  }
+                }}
+              >
+                {tab.title}
+              </TabsTrigger>
+            ))}
+          </TabsList>
 
-        {!settings.objectPropertiesDisabled && (
-          <TabsContent
-            value="objectProperties"
-            className="jgis-panel-tab-content"
-          >
-            <ObjectPropertiesReact
-              setSelectedObject={setSelectedObjectProperties}
-              selectedObject={selectedObjectProperties}
-              formSchemaRegistry={props.formSchemaRegistry}
-              model={props.model}
-            />
-          </TabsContent>
-        )}
+          {!settings.objectPropertiesDisabled && (
+            <TabsContent
+              value="objectProperties"
+              className="jgis-panel-tab-content"
+            >
+              <ObjectPropertiesReact
+                setSelectedObject={setSelectedObjectProperties}
+                selectedObject={selectedObjectProperties}
+                formSchemaRegistry={props.formSchemaRegistry}
+                model={props.model}
+              />
+            </TabsContent>
+          )}
 
-        {!settings.annotationsDisabled && (
-          <TabsContent value="annotations" className="jgis-panel-tab-content">
-            <AnnotationsPanel
-              annotationModel={props.annotationModel}
-              jgisModel={props.model}
-            ></AnnotationsPanel>
-          </TabsContent>
-        )}
+          {!settings.annotationsDisabled && (
+            <TabsContent value="annotations" className="jgis-panel-tab-content">
+              <AnnotationsPanel
+                annotationModel={props.annotationModel}
+                jgisModel={props.model}
+              ></AnnotationsPanel>
+            </TabsContent>
+          )}
 
-        {!settings.identifyDisabled && (
-          <TabsContent value="identifyPanel" className="jgis-panel-tab-content">
-            <IdentifyPanelComponent
-              model={props.model}
-            ></IdentifyPanelComponent>
-          </TabsContent>
-        )}
-      </PanelTabs>
-    </div>
+          {!settings.identifyDisabled && (
+            <TabsContent
+              value="identifyPanel"
+              className="jgis-panel-tab-content"
+            >
+              <IdentifyPanelComponent
+                model={props.model}
+              ></IdentifyPanelComponent>
+            </TabsContent>
+          )}
+        </PanelTabs>
+      </div>
+    </Draggable>
   );
 };
diff --git a/packages/base/style/icons/drag.svg b/packages/base/style/icons/drag.svg
new file mode 100644
index 000000000..114680e6d
--- /dev/null
+++ b/packages/base/style/icons/drag.svg
@@ -0,0 +1,6 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 640 640">
+  <!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+  <path d="M342.6 73.4C330.1 60.9 309.8 60.9 297.3 73.4L233.3 137.4C224.1 146.6 221.4 160.3 226.4 172.3C231.4 184.3 243.1 192 256 192L288 192L288 288L192 288L192 256C192 243.1 184.2 231.4 172.2 226.4C160.2 221.4 146.5 224.2 137.3 233.3L73.3 297.3C60.8 309.8 60.8 330.1 73.3 342.6L137.3 406.6C146.5 415.8 160.2 418.5 172.2 413.5C184.2 408.5 192 396.9 192 384L192 352L288 352L288 448L256 448C243.1 448 231.4 455.8 226.4 467.8C221.4 479.8 224.2 493.5 233.3 502.7L297.3 566.7C309.8 579.2 330.1 579.2 342.6 566.7L406.6 502.7C415.8 493.5 418.5 479.8 413.5 467.8C408.5 455.8 396.9 448 384 448L352 448L352 352L448 352L448 384C448 396.9 455.8 408.6 467.8 413.6C479.8 418.6 493.5 415.8 502.7 406.7L566.7 342.7C579.2 330.2 579.2 309.9 566.7 297.4L502.7 233.4C493.5 224.2 479.8 221.5 467.8 226.5C455.8 231.5 448 243.1 448 256L448 288L352 288L352 192L384 192C396.9 192 408.6 184.2 413.6 172.2C418.6 160.2 415.8 146.5 406.7 137.3L342.7 73.3z"/>
+</svg>
diff --git a/packages/base/style/shared/tabs.css b/packages/base/style/shared/tabs.css
index e69ae6416..7a6b70827 100644
--- a/packages/base/style/shared/tabs.css
+++ b/packages/base/style/shared/tabs.css
@@ -10,6 +10,41 @@
     0 6px 20px 0 rgba(0, 0, 0, 0.19);
   border-radius: 5px;
 }
+
+.jgis-drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  cursor: grab;
+  color: var(--jp-ui-font-color2);
+  user-select: none;
+}
+
+.jgis-drag-handle:active {
+  cursor: grabbing;
+}
+
+.jgis-drag-handle i {
+  pointer-events: none;
+}
+
+.jgis-drag-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow:
+    0 4px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.jgis-drag-icon svg {
+  width: 14px;
+  height: 14px;
+  color: var(--jp-ui-font-color2);
+}
+
 .jgis-tabs-list {
   display: inline-flex;
   height: 2.5rem;
diff --git a/ui-tests/tests/filters.spec.ts-snapshots/no-filter-chromium-linux.png b/ui-tests/tests/filters.spec.ts-snapshots/no-filter-chromium-linux.png
index 9696d6b2d..8bd9adaa0 100644
Binary files a/ui-tests/tests/filters.spec.ts-snapshots/no-filter-chromium-linux.png and b/ui-tests/tests/filters.spec.ts-snapshots/no-filter-chromium-linux.png differ
diff --git a/ui-tests/tests/filters.spec.ts-snapshots/one-filter-chromium-linux.png b/ui-tests/tests/filters.spec.ts-snapshots/one-filter-chromium-linux.png
index 2852bee1d..29b9e9409 100644
Binary files a/ui-tests/tests/filters.spec.ts-snapshots/one-filter-chromium-linux.png and b/ui-tests/tests/filters.spec.ts-snapshots/one-filter-chromium-linux.png differ
diff --git a/ui-tests/tests/filters.spec.ts-snapshots/two-filter-chromium-linux.png b/ui-tests/tests/filters.spec.ts-snapshots/two-filter-chromium-linux.png
index 0a9d20668..46b91fa90 100644
Binary files a/ui-tests/tests/filters.spec.ts-snapshots/two-filter-chromium-linux.png and b/ui-tests/tests/filters.spec.ts-snapshots/two-filter-chromium-linux.png differ
diff --git a/ui-tests/tests/geojson-layers.spec.ts-snapshots/geoJSON-layer-chromium-linux.png b/ui-tests/tests/geojson-layers.spec.ts-snapshots/geoJSON-layer-chromium-linux.png
index af2d5ce14..27bf2a553 100644
Binary files a/ui-tests/tests/geojson-layers.spec.ts-snapshots/geoJSON-layer-chromium-linux.png and b/ui-tests/tests/geojson-layers.spec.ts-snapshots/geoJSON-layer-chromium-linux.png differ
diff --git a/ui-tests/tests/lite.spec.ts-snapshots/Render-notebook-chromium-linux.png b/ui-tests/tests/lite.spec.ts-snapshots/Render-notebook-chromium-linux.png
index eb5d26a8b..54df5f472 100644
Binary files a/ui-tests/tests/lite.spec.ts-snapshots/Render-notebook-chromium-linux.png and b/ui-tests/tests/lite.spec.ts-snapshots/Render-notebook-chromium-linux.png differ
diff --git a/ui-tests/tests/lite.spec.ts-snapshots/Render-shapefile-jGIS-chromium-linux.png b/ui-tests/tests/lite.spec.ts-snapshots/Render-shapefile-jGIS-chromium-linux.png
index 146f055d4..d6406d710 100644
Binary files a/ui-tests/tests/lite.spec.ts-snapshots/Render-shapefile-jGIS-chromium-linux.png and b/ui-tests/tests/lite.spec.ts-snapshots/Render-shapefile-jGIS-chromium-linux.png differ
diff --git a/ui-tests/tests/lite.spec.ts-snapshots/Render-test-jGIS-chromium-linux.png b/ui-tests/tests/lite.spec.ts-snapshots/Render-test-jGIS-chromium-linux.png
index 202da9435..47a3ff3fe 100644
Binary files a/ui-tests/tests/lite.spec.ts-snapshots/Render-test-jGIS-chromium-linux.png and b/ui-tests/tests/lite.spec.ts-snapshots/Render-test-jGIS-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-chromium-linux.png
index aa7fb1fba..010c3f444 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-chromium-linux.png
index 95ff77df2..56cee1433 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-chromium-linux.png
index dcf4a7a64..5624b338e 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-3-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-3-chromium-linux.png
index c28627c55..784c090d9 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-3-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-3-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-0-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-0-chromium-linux.png
index f52a8653b..e30650064 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-0-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-0-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-chromium-linux.png
index eb11af7b2..7a826e1f9 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-chromium-linux.png
index 6a527fa96..c7543b249 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-chromium-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-3-chromium-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-3-chromium-linux.png
index 791ca46ed..14a20f2d8 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-3-chromium-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-3-chromium-linux.png differ
diff --git a/yarn.lock b/yarn.lock
index be4623f1a..b19ae7404 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1131,6 +1131,7 @@ __metadata:
     lerna: ^8.1.9
     npm-run-all: ^4.1.5
     prettier: ^3.0.0
+    react-draggable: ^4.5.0
     rimraf: ^3.0.2
     typescript: ^5
     webpack: ^5.76.3
@@ -11794,7 +11795,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-draggable@npm:^4.4.5":
+"react-draggable@npm:^4.4.5, react-draggable@npm:^4.5.0":
   version: 4.5.0
   resolution: "react-draggable@npm:4.5.0"
   dependencies: