diff --git a/package-lock.json b/package-lock.json
index 0560664a3..b261dca36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,6 +53,7 @@
         "numeral": "2.0.6",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-draggable": "^4.4.4",
         "react-modal": "^3.12.1",
         "sprintf-js": "^1.1.1",
         "tapable": "^1.0.0",
@@ -22097,6 +22098,19 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.4.tgz",
+      "integrity": "sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.8.3",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz",
@@ -45494,6 +45508,15 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-draggable": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.4.tgz",
+      "integrity": "sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==",
+      "requires": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-is": {
       "version": "16.8.3",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz",
diff --git a/package.json b/package.json
index a7a3d5464..f6e3722ea 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "numeral": "2.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-draggable": "^4.4.4",
     "react-modal": "^3.12.1",
     "sprintf-js": "^1.1.1",
     "tapable": "^1.0.0",
diff --git a/src/ui/React/LogBoxManager.tsx b/src/ui/React/LogBoxManager.tsx
index dfcb7dfa0..924d2f318 100644
--- a/src/ui/React/LogBoxManager.tsx
+++ b/src/ui/React/LogBoxManager.tsx
@@ -6,6 +6,7 @@ import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Paper from "@mui/material/Paper";
+import Draggable from "react-draggable";
 
 export const LogBoxEvents = new EventEmitter<[RunningScript]>();
 
@@ -64,20 +65,6 @@ function LogWindow(props: IProps): React.ReactElement {
     return () => clearInterval(id);
   }, []);
 
-  useEffect(() => {
-    function closeHandler(event: KeyboardEvent): void {
-      if (event.keyCode === 27) {
-        props.onClose();
-      }
-    }
-
-    document.addEventListener("keydown", closeHandler);
-
-    return () => {
-      document.removeEventListener("keydown", closeHandler);
-    };
-  }, []);
-
   function kill(): void {
     killWorkerScript(props.script, props.script.server, true);
     props.onClose();
@@ -113,51 +100,53 @@ function LogWindow(props: IProps): React.ReactElement {
   }
 
   return (
-    <Paper
-      style={{
-        display: "flex",
-        flexFlow: "column",
-        backgroundColor: "gray",
-        width: "50%",
-        position: "fixed",
-        left: "50%",
-        top: "40%",
-        margin: "-10% 0 0 -25%",
-        height: "auto",
-        maxHeight: "50%",
-        zIndex: 10,
-        border: "2px solid $hacker-green",
-      }}
-      ref={container}
-    >
+    <Draggable handle="#drag">
       <Paper
         style={{
-          cursor: "grab",
+          display: "flex",
+          flexFlow: "column",
+          backgroundColor: "gray",
+          width: "50%",
+          position: "fixed",
+          left: "50%",
+          top: "40%",
+          margin: "-10% 0 0 -25%",
+          height: "auto",
+          maxHeight: "50%",
+          zIndex: 10,
+          border: "2px solid $hacker-green",
         }}
+        ref={container}
       >
-        <Box display="flex" alignItems="center" onMouseDown={drag}>
-          <Typography color="primary" variant="h6" noWrap component="div">
-            {props.script.filename} {props.script.args.map((x: any): string => `${x}`).join(" ")}
-          </Typography>
+        <Paper
+          style={{
+            cursor: "grab",
+          }}
+        >
+          <Box id="drag" display="flex" alignItems="center">
+            <Typography color="primary" variant="h6" noWrap component="div">
+              {props.script.filename} {props.script.args.map((x: any): string => `${x}`).join(" ")}
+            </Typography>
 
-          <Box display="flex" marginLeft="auto">
-            <Button onClick={kill}>Kill Script</Button>
-            <Button onClick={props.onClose}>Close</Button>
+            <Box display="flex" marginLeft="auto">
+              <Button onClick={kill}>Kill Script</Button>
+              <Button onClick={props.onClose}>Close</Button>
+            </Box>
           </Box>
-        </Box>
+        </Paper>
+        <Paper>
+          <Box maxHeight="25vh" overflow="scroll" sx={{ overflowWrap: "break-word", whiteSpace: "pre-line" }}>
+            {props.script.logs.map(
+              (line: string, i: number): JSX.Element => (
+                <Typography key={i}>
+                  {line}
+                  <br />
+                </Typography>
+              ),
+            )}
+          </Box>
+        </Paper>
       </Paper>
-      <Paper>
-        <Box maxHeight="25vh" overflow="scroll" sx={{ overflowWrap: "break-word", whiteSpace: "pre-line" }}>
-          {props.script.logs.map(
-            (line: string, i: number): JSX.Element => (
-              <Typography key={i}>
-                {line}
-                <br />
-              </Typography>
-            ),
-          )}
-        </Box>
-      </Paper>
-    </Paper>
+    </Draggable>
   );
 }