diff --git a/src/controls.ts b/src/controls.ts
index 63c2e69..690e28d 100644
--- a/src/controls.ts
+++ b/src/controls.ts
@@ -40,6 +40,13 @@ export class URDFControls extends GUI {
     this.domElement.style.right = '5px';
     this.domElement.setAttribute('class', 'dg main urdf-gui');
 
+    // Add resize functionality
+    this._setupResizeHandling({
+      minWidth: 150,
+      grabZoneWidth: 12
+    });
+
+    // Create folders
     this._workspaceFolder = this.addFolder('Workspace');
     this._workspaceFolder.domElement.setAttribute(
       'class',
@@ -207,4 +214,53 @@ export class URDFControls extends GUI {
     }
     return this.controls.joints;
   }
+
+  /**
+   * Sets up panel resizing functionality
+   * @param minWidth - Minimum width of the panel
+   * @param maxWidth - Maximum width of the panel
+   * @param grabZoneWidth - Width of the area where the mouse can be clicked
+   */
+  private _setupResizeHandling(options: {
+    minWidth: number;
+    grabZoneWidth: number;
+  }): void {
+    let isResizing = false;
+    let startX: number;
+    let startWidth: number;
+
+    const { minWidth, grabZoneWidth } = options;
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (!isResizing) {
+        return;
+      }
+
+      const width = startWidth - (e.clientX - startX);
+      if (width >= minWidth) {
+        this.domElement.style.width = `${width}px`;
+      }
+    };
+
+    const onMouseUp = () => {
+      isResizing = false;
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+
+    this.domElement.addEventListener('mousedown', (e: MouseEvent) => {
+      if (
+        e.clientX <
+        this.domElement.getBoundingClientRect().left + grabZoneWidth
+      ) {
+        isResizing = true;
+        startX = e.clientX;
+        startWidth = parseInt(getComputedStyle(this.domElement).width, 10);
+        e.preventDefault();
+
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+      }
+    });
+  }
 }
diff --git a/style/base.css b/style/base.css
index 78527b6..28143b8 100644
--- a/style/base.css
+++ b/style/base.css
@@ -27,6 +27,18 @@
   color: var(--gui-color-font);
   border: none;
   box-sizing: border-box;
+  min-width: 150px;
+  max-width: 98%;
+  padding-bottom: 20px;
+}
+
+/* Add a resize handle on the left border */
+.urdf-gui::before {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 100%;
+  cursor: ew-resize;
 }
 
 .urdf-gui li.folder {
@@ -98,6 +110,12 @@
   padding: 0;
 }
 
+.urdf-gui .c {
+  float: right !important;
+  max-width: 180px;
+  position: relative;
+}
+
 .urdf-gui .c .slider {
   margin: 0;
   margin-top: 0.5em;
@@ -128,3 +146,10 @@
   max-height: 50vh;
   overflow: scroll;
 }
+
+/* Style for Dat.GUI's close button */
+.urdf-gui .close-button {
+  width: 100% !important;
+  color: white !important;
+  position: absolute;
+}