diff --git a/package.json b/package.json
index 9d168df39..67535950a 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/panelview/leftpanel.tsx b/packages/base/src/panelview/leftpanel.tsx
index 4debb9e7c..476c3ae65 100644
--- a/packages/base/src/panelview/leftpanel.tsx
+++ b/packages/base/src/panelview/leftpanel.tsx
@@ -3,6 +3,7 @@ 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 { LayersBodyComponent } from './components/layers';
 import {
@@ -63,55 +64,57 @@ 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-panel-tabs" bounds=".jGIS-Mainview-Container">
+      <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>
 
-        {!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..e24070745 100644
--- a/packages/base/src/panelview/rightpanel.tsx
+++ b/packages/base/src/panelview/rightpanel.tsx
@@ -5,6 +5,7 @@ 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';
@@ -83,61 +84,66 @@ 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-panel-tabs" bounds=".jGIS-Mainview-Container">
+      <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>
 
-        {!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/shared/tabs.css b/packages/base/style/shared/tabs.css
index e69ae6416..ec252cfbe 100644
--- a/packages/base/style/shared/tabs.css
+++ b/packages/base/style/shared/tabs.css
@@ -9,7 +9,15 @@
     0 4px 8px 0 rgba(0, 0, 0, 0.2),
     0 6px 20px 0 rgba(0, 0, 0, 0.19);
   border-radius: 5px;
+  cursor: grab;
+  user-select: none;
+  -webkit-user-drag: none;
 }
+
+.jgis-panel-tabs:active {
+  cursor: grabbing;
+}
+
 .jgis-tabs-list {
   display: inline-flex;
   height: 2.5rem;
diff --git a/yarn.lock b/yarn.lock
index 0fdc87116..020a369be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1054,6 +1054,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
@@ -10674,7 +10675,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: