diff --git a/frontend/src/lib/components/BoxSelection.svelte b/frontend/src/lib/components/BoxSelection.svelte
new file mode 100644
index 0000000..1bf4b99
--- /dev/null
+++ b/frontend/src/lib/components/BoxSelection.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { HTML } from "@threlte/extras";
+
+  export let p1 = { x: 0, y: 0 };
+  export let p2 = { x: 0, y: 0 };
+
+  export let cameraPosition = [0, 1, 0];
+
+  $: width = Math.abs(p1.x - p2.x) * cameraPosition[2];
+  $: height = Math.abs(p1.y - p2.y) * cameraPosition[2];
+
+  $: x = Math.max(p1.x, p2.x) - width / cameraPosition[2];
+  $: y = Math.max(p1.y, p2.y) - height / cameraPosition[2];
+</script>
+
+<HTML position.x={x} position.z={y} transform={false}>
+  <div
+    class="selection"
+    style={`width: ${width}px; height: ${height}px;`}
+  ></div>
+</HTML>
+
+<!-- <T.Mesh -->
+<!--   position.x={x - width / 2} -->
+<!--   position.z={y - height / 2} -->
+<!--   rotation.x={-Math.PI / 2} -->
+<!-- > -->
+<!--   <T.PlaneGeometry args={[width, height]} /> -->
+<!--   <T.MeshBasicMaterial color="red" /> -->
+<!-- </T.Mesh> -->
+
+<style>
+  .selection {
+    width: 40px;
+    height: 20px;
+    border: solid 0.2px red;
+    border-style: dashed;
+    border-radius: 2px;
+  }
+</style>
diff --git a/frontend/src/lib/components/Camera.svelte b/frontend/src/lib/components/Camera.svelte
index 1b8a475..a41c3b5 100644
--- a/frontend/src/lib/components/Camera.svelte
+++ b/frontend/src/lib/components/Camera.svelte
@@ -2,7 +2,7 @@
   import { T } from "@threlte/core";
   import { OrbitControls } from "@threlte/extras";
   import { onMount } from "svelte";
-  import { type OrthographicCamera } from "three";
+  import { MOUSE, type OrthographicCamera } from "three";
 
   export let camera: OrthographicCamera | undefined = undefined;
   export let maxZoom = 150;
@@ -57,6 +57,7 @@
 <T.OrthographicCamera bind:ref={camera} position.y={10} makeDefault>
   <OrbitControls
     args={[camera, window]}
+    mouseButtons={{ LEFT: MOUSE.PAN, MIDDLE: 0, RIGHT: 0 }}
     bind:ref={controls}
     enableZoom={true}
     zoomSpeed={2}
diff --git a/frontend/src/lib/components/graph/Graph.svelte b/frontend/src/lib/components/graph/Graph.svelte
index 40f2d40..41497c8 100644
--- a/frontend/src/lib/components/graph/Graph.svelte
+++ b/frontend/src/lib/components/graph/Graph.svelte
@@ -18,6 +18,7 @@
     possibleSocketIds,
     selectedNodes,
   } from "./stores";
+  import BoxSelection from "../BoxSelection.svelte";
 
   export let graph: GraphManager;
   setContext("graphManager", graph);
@@ -30,6 +31,7 @@
   const maxZoom = 150;
   let mousePosition = [0, 0];
   let mouseDown: null | [number, number] = null;
+  let boxSelection = false;
   let cameraPosition: [number, number, number] = [0, 1, 0];
   let width = 100;
   let height = 100;
@@ -291,6 +293,8 @@
         } else {
           $activeNodeId = nodeId;
         }
+      } else if (event.ctrlKey) {
+        boxSelection = true;
       } else {
         $activeNodeId = -1;
         $selectedNodes?.clear();
@@ -464,6 +468,7 @@
     }
 
     mouseDown = null;
+    boxSelection = false;
     $activeSocket = null;
     $possibleSockets = [];
     $possibleSocketIds = null;
@@ -486,6 +491,17 @@
 
 <Background {cameraPosition} {maxZoom} {minZoom} {width} {height} />
 
+{#if boxSelection && mouseDown}
+  <BoxSelection
+    {cameraPosition}
+    p1={{
+      x: cameraPosition[0] + (mouseDown[0] - width / 2) / cameraPosition[2],
+      y: cameraPosition[1] + (mouseDown[1] - height / 2) / cameraPosition[2],
+    }}
+    p2={{ x: mousePosition[0], y: mousePosition[1] }}
+  />
+{/if}
+
 {#if $status === "idle"}
   {#if $activeSocket}
     <FloatingEdge
