diff --git a/package-lock.json b/package-lock.json
index 50da0ef..6e5f090 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,6 +45,7 @@
         "ndarray": "^1.0.19",
         "nearley": "^2.20.1",
         "on-change": "^5.0.1",
+        "re-resizable": "^6.10.1",
         "react-color": "^2.19.3",
         "regl": "^2.1.0",
         "regl-stats-widget": "^0.0.1",
@@ -9826,6 +9827,15 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/re-resizable": {
+      "version": "6.10.1",
+      "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.10.1.tgz",
+      "integrity": "sha512-m33nSWRH57UZLmep5M/LatkZ2NRqimVD/bOOpvymw5Zf33+eTSEixsUugscOZzAtK0/nx+OSuOf8VbKJx/4ptw==",
+      "peerDependencies": {
+        "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
diff --git a/package.json b/package.json
index dede621..0af748a 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "ndarray": "^1.0.19",
     "nearley": "^2.20.1",
     "on-change": "^5.0.1",
+    "re-resizable": "^6.10.1",
     "react-color": "^2.19.3",
     "regl": "^2.1.0",
     "regl-stats-widget": "^0.0.1",
diff --git a/src/renderer/src/components/layer-sidebar/LayersSidebar.tsx b/src/renderer/src/components/layer-sidebar/LayersSidebar.tsx
index e7033e9..84c6cda 100644
--- a/src/renderer/src/components/layer-sidebar/LayersSidebar.tsx
+++ b/src/renderer/src/components/layer-sidebar/LayersSidebar.tsx
@@ -15,6 +15,10 @@ import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, us
 import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable"
 import { restrictToVerticalAxis, restrictToParentElement } from "@dnd-kit/modifiers"
 
+import { Resizable } from 're-resizable';
+
+import { useLocalStorage } from "@mantine/hooks"
+
 const UID = (): string => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
 
 interface SidebarProps {}
@@ -32,6 +36,10 @@ export default function LayerSidebar(_props: SidebarProps): JSX.Element | null {
   const [deleteConfirmModalOpen, setDeleteConfirmModalOpen] = useState<boolean>(false)
   const { showContextMenu } = useContextMenu()
   const theme = useMantineTheme()
+  const [layerSidebarWidth, setLayerSidebarWidth] = useLocalStorage<number>({
+    key: "layerSidebarWidth",
+    defaultValue: 220,
+  })
 
   function registerLayers(rendererLayers: LayerInfo[], loadingLayers: { name: string; id: string }[]): void {
     const newLayers: UploadFile[] = []
@@ -241,14 +249,43 @@ export default function LayerSidebar(_props: SidebarProps): JSX.Element | null {
           </div>
         </Group>
       </Dropzone.FullScreen>
+      <Resizable
+        defaultSize={{
+          width: 220,
+          height: "100%",
+        }}
+        size={{
+          width: layerSidebarWidth,
+          height: "100%",
+        }}
+        onResizeStop={(_e, _direction, _ref, d) => {
+          setLayerSidebarWidth(layerSidebarWidth + d.width)
+        }}
+        minWidth={200}
+        maxWidth={500}
+        enable={{
+          top: false,
+          right: true,
+          bottom: false,
+          left: false,
+          topRight: false,
+          bottomRight: false,
+          bottomLeft: false,
+          topLeft: false,
+        }}
+        style={{
+          pointerEvents: "all",
+        }}
+>
       <Card
         onContextMenu={showContextMenu(contextItems)}
         radius="md"
         withBorder
         style={{
-          width: 220,
+          width: '-webkit-fill-available',
           height: "-webkit-fill-available",
           margin: 10,
+          marginRight: 0,
           pointerEvents: "all",
           overflowY: "auto",
           overflowX: "hidden",
@@ -300,6 +337,7 @@ export default function LayerSidebar(_props: SidebarProps): JSX.Element | null {
           )} */}
         </ScrollArea>
       </Card>
+      </Resizable>
     </div>
   )
 }
diff --git a/src/renderer/src/renderer/engine.ts b/src/renderer/src/renderer/engine.ts
index da2e759..e8e6864 100644
--- a/src/renderer/src/renderer/engine.ts
+++ b/src/renderer/src/renderer/engine.ts
@@ -669,16 +669,6 @@ export class RenderEngineBackend {
       force: true,
     })
   }
-  // export function arrayMove<T>(array: T[], from: number, to: number): T[] {
-  //   const newArray = array.slice();
-  //   newArray.splice(
-  //     to < 0 ? newArray.length + to : to,
-  //     0,
-  //     newArray.splice(from, 1)[0]
-  //   );
-
-  //   return newArray;
-  // }
 
   public moveLayer(from: number, to: number): void {
     this.layers.splice(
@@ -686,8 +676,6 @@ export class RenderEngineBackend {
       0,
       this.layers.splice(from, 1)[0]
     )
-    console.log(this.layers.map((layer) => layer.name))
-
   }
 
   public setLayerProps(uid: string, props: Partial<Omit<LayerRendererProps, "regl">>): void {