diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index fa017edecf42..79a1a64683a3 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -6,6 +6,7 @@
 		"dbaeumer.vscode-eslint",
 		"stylemistake.auto-comment-blocks",
 		"Donkie.vscode-tgstation-test-adapter",
-		"anturk.dmi-editor"
+		"anturk.dmi-editor",
+		"esbenp.prettier-vscode"
 	]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 11e44342bd85..972f4b0aaa8b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -14,15 +14,43 @@
 	},
 	"files.eol": "\n",
 	"files.insertFinalNewline": true,
-	"gitlens.advanced.blame.customArguments": ["-w"],
+	"gitlens.advanced.blame.customArguments": [
+		"-w"
+	],
 	"tgstationTestExplorer.project.resultsType": "json",
 	"[javascript]": {
-		"editor.rulers": [80]
+		"editor.rulers": [
+			80
+		],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+	"[javascriptreact]": {
+		"editor.rulers": [
+			80
+		],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
 	},
 	"[typescript]": {
-		"editor.rulers": [80]
+		"editor.rulers": [
+			80
+		],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+	"[typescriptreact]": {
+		"editor.rulers": [
+			80
+		],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
 	},
 	"[scss]": {
-		"editor.rulers": [80]
+		"editor.rulers": [
+			80
+		],
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
 	}
 }
diff --git a/tgui/.eslintrc.yml b/tgui/.eslintrc.yml
index 0288a4b58cbd..4dfc54e854c5 100644
--- a/tgui/.eslintrc.yml
+++ b/tgui/.eslintrc.yml
@@ -17,7 +17,6 @@ settings:
   react:
     version: '16.10'
 rules:
-
   ## Possible Errors
   ## ----------------------------------------
   ## Enforce “for” loop update clause moving the counter in the right
@@ -308,13 +307,16 @@ rules:
   ## Enforce or disallow capitalization of the first letter of a comment
   # capitalized-comments: error
   ## Require or disallow trailing commas
-  comma-dangle: [error, {
-    arrays: always-multiline,
-    objects: always-multiline,
-    imports: always-multiline,
-    exports: always-multiline,
-    functions: only-multiline, ## Optional on functions
-  }]
+  comma-dangle: [
+      error,
+      {
+        arrays: always-multiline,
+        objects: always-multiline,
+        imports: always-multiline,
+        exports: always-multiline,
+        functions: only-multiline, ## Optional on functions
+      },
+    ]
   ## Enforce consistent spacing before and after commas
   comma-spacing: [error, { before: false, after: true }]
   ## Enforce consistent comma style
@@ -349,10 +351,10 @@ rules:
   ## Enforce the location of arrow function bodies
   # implicit-arrow-linebreak: error
   ## Enforce consistent indentation
-  indent: [error, 2, { SwitchCase: 1 }]
+  #indent: [error, 2, { SwitchCase: 1 }]
   ## Enforce the consistent use of either double or single quotes in JSX
   ## attributes
-  jsx-quotes: [error, prefer-double]
+  # jsx-quotes: [error, prefer-double]
   ## Enforce consistent spacing between keys and values in object literal
   ## properties
   key-spacing: [error, { beforeColon: false, afterColon: true }]
@@ -369,14 +371,17 @@ rules:
   ## Enforce a maximum depth that blocks can be nested
   # max-depth: error
   ## Enforce a maximum line length
-  max-len: [error, {
-    code: 200,
-    ## Ignore imports
-    ignorePattern: '^(import\s.+\sfrom\s|.*require\()',
-    ignoreUrls: true,
-    ignoreRegExpLiterals: true,
-    ignoreStrings: true,
-  }]
+  max-len: [
+      error,
+      {
+        code: 200,
+        ## Ignore imports
+        ignorePattern: '^(import\s.+\sfrom\s|.*require\()',
+        ignoreUrls: true,
+        ignoreRegExpLiterals: true,
+        ignoreStrings: true,
+      },
+    ]
   ## Enforce a maximum number of lines per file
   # max-lines: error
   ## Enforce a maximum number of line of code in a function
@@ -413,7 +418,7 @@ rules:
   ## Disallow mixed binary operators
   # no-mixed-operators: error
   ## Disallow mixed spaces and tabs for indentation
-  no-mixed-spaces-and-tabs: error
+  # no-mixed-spaces-and-tabs: error
   ## Disallow use of chained assignment expressions
   # no-multi-assign: error
   ## Disallow multiple empty lines
@@ -439,13 +444,13 @@ rules:
   ## Disallow ternary operators when simpler alternatives exist
   # no-unneeded-ternary: error
   ## Disallow whitespace before properties
-  no-whitespace-before-property: error
+  # no-whitespace-before-property: error
   ## Enforce the location of single-line statements
   # nonblock-statement-body-position: error
   ## Enforce consistent line breaks inside braces
   # object-curly-newline: [error, { multiline: true }]
   ## Enforce consistent spacing inside braces
-  object-curly-spacing: [error, always]
+  #object-curly-spacing: [error, always]
   ## Enforce placing object properties on separate lines
   # object-property-newline: error
   ## Enforce variables to be declared either together or separately in
@@ -456,7 +461,7 @@ rules:
   ## Require or disallow assignment operator shorthand where possible
   # operator-assignment: error
   ## Enforce consistent linebreak style for operators
-  operator-linebreak: [error, before]
+  #operator-linebreak: [error, before]
   ## Require or disallow padding within blocks
   # padded-blocks: error
   ## Require or disallow padding lines between statements
@@ -479,15 +484,12 @@ rules:
   ## Require variables within the same declaration block to be sorted
   # sort-vars: error
   ## Enforce consistent spacing before blocks
-  space-before-blocks: [error, always]
+  #space-before-blocks: [error, always]
   ## Enforce consistent spacing before function definition opening parenthesis
-  space-before-function-paren: [error, {
-    anonymous: always,
-    named: never,
-    asyncArrow: always,
-  }]
+  #space-before-function-paren:
+  #  [error, { anonymous: always, named: never, asyncArrow: always }]
   ## Enforce consistent spacing inside parentheses
-  space-in-parens: [error, never]
+  #space-in-parens: [error, never]
   ## Require spacing around infix operators
   # space-infix-ops: error
   ## Enforce consistent spacing before or after unary operators
@@ -694,7 +696,7 @@ rules:
   react/jsx-closing-tag-location: error
   ## Enforce or disallow newlines inside of curly braces in JSX attributes and
   ## expressions (fixable)
-  react/jsx-curly-newline: error
+  #react/jsx-curly-newline: error
   ## Enforce or disallow spaces inside of curly braces in JSX attributes and
   ## expressions (fixable)
   react/jsx-curly-spacing: error
@@ -707,11 +709,9 @@ rules:
   ## Enforce event handler naming conventions in JSX
   react/jsx-handler-names: error
   ## Validate JSX indentation (fixable)
-  react/jsx-indent: [error, 2, {
-    checkAttributes: true,
-  }]
+  #react/jsx-indent: [error, 2, { checkAttributes: true }]
   ## Validate props indentation in JSX (fixable)
-  react/jsx-indent-props: [error, 2]
+  #react/jsx-indent-props: [error, 2]
   ## Validate JSX has key prop when in array or iterator
   react/jsx-key: error
   ## Validate JSX maximum depth
@@ -760,3 +760,4 @@ rules:
   ## Prevents the use of unused imports.
   ## This could be done by enabling no-unused-vars, but we're doing this for now
   unused-imports/no-unused-imports: error
+extends: prettier
diff --git a/tgui/.prettierignore b/tgui/.prettierignore
new file mode 100644
index 000000000000..6b0296ceb475
--- /dev/null
+++ b/tgui/.prettierignore
@@ -0,0 +1,13 @@
+## NPM
+/**/node_modules
+
+## Yarn
+/.yarn
+/yarn.lock
+/.pnp.*
+
+.swcrc
+/docs
+/public
+/packages/tgui-polyfill
+/packages/tgfont/static
diff --git a/tgui/.prettierrc.yml b/tgui/.prettierrc.yml
index fe51f01cc4db..01769692264f 100644
--- a/tgui/.prettierrc.yml
+++ b/tgui/.prettierrc.yml
@@ -1,12 +1 @@
-arrowParens: always
-bracketSpacing: true
-endOfLine: lf
-jsxBracketSameLine: true
-jsxSingleQuote: false
-printWidth: 80
-proseWrap: preserve
-quoteProps: preserve
-semi: true
 singleQuote: true
-tabWidth: 2
-trailingComma: es5
diff --git a/tgui/.yarn/sdks/eslint/bin/eslint.js b/tgui/.yarn/sdks/eslint/bin/eslint.js
index 4d327a49a06d..9ef98e400b47 100644
--- a/tgui/.yarn/sdks/eslint/bin/eslint.js
+++ b/tgui/.yarn/sdks/eslint/bin/eslint.js
@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
diff --git a/tgui/.yarn/sdks/eslint/lib/api.js b/tgui/.yarn/sdks/eslint/lib/api.js
index 97a052442a86..653b22bae06f 100644
--- a/tgui/.yarn/sdks/eslint/lib/api.js
+++ b/tgui/.yarn/sdks/eslint/lib/api.js
@@ -1,20 +1,20 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require eslint/lib/api.js
+    // Setup the environment to be able to require eslint
     require(absPnpApiPath).setup();
   }
 }
 
-// Defer to the real eslint/lib/api.js your application uses
-module.exports = absRequire(`eslint/lib/api.js`);
+// Defer to the real eslint your application uses
+module.exports = absRequire(`eslint`);
diff --git a/tgui/.yarn/sdks/eslint/package.json b/tgui/.yarn/sdks/eslint/package.json
index 744a77321030..b29322a1ffb3 100644
--- a/tgui/.yarn/sdks/eslint/package.json
+++ b/tgui/.yarn/sdks/eslint/package.json
@@ -2,5 +2,8 @@
   "name": "eslint",
   "version": "7.32.0-sdk",
   "main": "./lib/api.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "eslint": "./bin/eslint.js"
+  }
 }
diff --git a/tgui/.yarn/sdks/prettier/bin/prettier.cjs b/tgui/.yarn/sdks/prettier/bin/prettier.cjs
new file mode 100644
index 000000000000..5efad688e739
--- /dev/null
+++ b/tgui/.yarn/sdks/prettier/bin/prettier.cjs
@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier/bin/prettier.cjs
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real prettier/bin/prettier.cjs your application uses
+module.exports = absRequire(`prettier/bin/prettier.cjs`);
diff --git a/tgui/.yarn/sdks/prettier/index.cjs b/tgui/.yarn/sdks/prettier/index.cjs
new file mode 100644
index 000000000000..8758e367a725
--- /dev/null
+++ b/tgui/.yarn/sdks/prettier/index.cjs
@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real prettier your application uses
+module.exports = absRequire(`prettier`);
diff --git a/tgui/.yarn/sdks/prettier/package.json b/tgui/.yarn/sdks/prettier/package.json
new file mode 100644
index 000000000000..6e68f38b6716
--- /dev/null
+++ b/tgui/.yarn/sdks/prettier/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "prettier",
+  "version": "3.2.5-sdk",
+  "main": "./index.cjs",
+  "type": "commonjs",
+  "bin": "./bin/prettier.cjs"
+}
diff --git a/tgui/.yarn/sdks/typescript/bin/tsc b/tgui/.yarn/sdks/typescript/bin/tsc
index 5608e5743072..454b950b7e8f 100644
--- a/tgui/.yarn/sdks/typescript/bin/tsc
+++ b/tgui/.yarn/sdks/typescript/bin/tsc
@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
diff --git a/tgui/.yarn/sdks/typescript/bin/tsserver b/tgui/.yarn/sdks/typescript/bin/tsserver
index cd7d557d523d..d7a605684df9 100644
--- a/tgui/.yarn/sdks/typescript/bin/tsserver
+++ b/tgui/.yarn/sdks/typescript/bin/tsserver
@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
diff --git a/tgui/.yarn/sdks/typescript/lib/tsc.js b/tgui/.yarn/sdks/typescript/lib/tsc.js
index 16042d01d4fe..2f62fc96c0a0 100644
--- a/tgui/.yarn/sdks/typescript/lib/tsc.js
+++ b/tgui/.yarn/sdks/typescript/lib/tsc.js
@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
diff --git a/tgui/.yarn/sdks/typescript/lib/tsserver.js b/tgui/.yarn/sdks/typescript/lib/tsserver.js
index 4d90f3879d03..ed800750cc18 100644
--- a/tgui/.yarn/sdks/typescript/lib/tsserver.js
+++ b/tgui/.yarn/sdks/typescript/lib/tsserver.js
@@ -1,13 +1,20 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsserver.js
+    require(absPnpApiPath).setup();
+  }
+}
 
 const moduleWrapper = tsserver => {
   if (!process.versions.pnp) {
@@ -18,6 +25,7 @@ const moduleWrapper = tsserver => {
   const pnpApi = require(`pnpapi`);
 
   const isVirtual = str => str.match(/\/(\$\$virtual|__virtual__)\//);
+  const isPortal = str => str.startsWith("portal:/");
   const normalize = str => str.replace(/\\/g, `/`).replace(/^\/?/, `/`);
 
   const dependencyTreeRoots = new Set(pnpApi.getDependencyTreeRoots().map(locator => {
@@ -30,7 +38,7 @@ const moduleWrapper = tsserver => {
 
   function toEditorPath(str) {
     // We add the `zip:` prefix to both `.zip/` paths and virtual paths
-    if (isAbsolute(str) && !str.match(/^\^zip:/) && (str.match(/\.zip\//) || isVirtual(str))) {
+    if (isAbsolute(str) && !str.match(/^\^?(zip:|\/zip\/)/) && (str.match(/\.zip\//) || isVirtual(str))) {
       // We also take the opportunity to turn virtual paths into physical ones;
       // this makes it much easier to work with workspaces that list peer
       // dependencies, since otherwise Ctrl+Click would bring us to the virtual
@@ -44,7 +52,7 @@ const moduleWrapper = tsserver => {
       const resolved = isVirtual(str) ? pnpApi.resolveVirtual(str) : str;
       if (resolved) {
         const locator = pnpApi.findPackageLocator(resolved);
-        if (locator && dependencyTreeRoots.has(`${locator.name}@${locator.reference}`)) {
+        if (locator && (dependencyTreeRoots.has(`${locator.name}@${locator.reference}`) || isPortal(locator.reference))) {
           str = resolved;
         }
       }
@@ -60,10 +68,34 @@ const moduleWrapper = tsserver => {
           //
           // Ref: https://github.com/microsoft/vscode/issues/105014#issuecomment-686760910
           //
-          case `vscode`: {
+          // 2021-10-08: VSCode changed the format in 1.61.
+          // Before | ^zip:/c:/foo/bar.zip/package.json
+          // After  | ^/zip//c:/foo/bar.zip/package.json
+          //
+          // 2022-04-06: VSCode changed the format in 1.66.
+          // Before | ^/zip//c:/foo/bar.zip/package.json
+          // After  | ^/zip/c:/foo/bar.zip/package.json
+          //
+          // 2022-05-06: VSCode changed the format in 1.68
+          // Before | ^/zip/c:/foo/bar.zip/package.json
+          // After  | ^/zip//c:/foo/bar.zip/package.json
+          //
+          case `vscode <1.61`: {
             str = `^zip:${str}`;
           } break;
 
+          case `vscode <1.66`: {
+            str = `^/zip/${str}`;
+          } break;
+
+          case `vscode <1.68`: {
+            str = `^/zip${str}`;
+          } break;
+
+          case `vscode`: {
+            str = `^/zip/${str}`;
+          } break;
+
           // To make "go to definition" work,
           // We have to resolve the actual file system path from virtual path
           // and convert scheme to supported by [vim-rzip](https://github.com/lbrayner/vim-rzip)
@@ -77,13 +109,15 @@ const moduleWrapper = tsserver => {
           // everything else is up to neovim
           case `neovim`: {
             str = normalize(resolved).replace(/\.zip\//, `.zip::`);
-            str = `zipfile:${str}`;
+            str = `zipfile://${str}`;
           } break;
 
           default: {
             str = `zip:${str}`;
           } break;
         }
+      } else {
+        str = str.replace(/^\/?/, process.platform === `win32` ? `` : `/`);
       }
     }
 
@@ -91,9 +125,28 @@ const moduleWrapper = tsserver => {
   }
 
   function fromEditorPath(str) {
-    return process.platform === `win32`
-      ? str.replace(/^\^?zip:\//, ``)
-      : str.replace(/^\^?zip:/, ``);
+    switch (hostInfo) {
+      case `coc-nvim`: {
+        str = str.replace(/\.zip::/, `.zip/`);
+        // The path for coc-nvim is in format of /<pwd>/zipfile:/<pwd>/.yarn/...
+        // So in order to convert it back, we use .* to match all the thing
+        // before `zipfile:`
+        return process.platform === `win32`
+          ? str.replace(/^.*zipfile:\//, ``)
+          : str.replace(/^.*zipfile:/, ``);
+      } break;
+
+      case `neovim`: {
+        str = str.replace(/\.zip::/, `.zip/`);
+        // The path for neovim is in format of zipfile:///<pwd>/.yarn/...
+        return str.replace(/^zipfile:\/\//, ``);
+      } break;
+
+      case `vscode`:
+      default: {
+        return str.replace(/^\^?(zip:|\/zip(\/ts-nul-authority)?)\/+/, process.platform === `win32` ? `` : `/`)
+      } break;
+    }
   }
 
   // Force enable 'allowLocalPluginLoads'
@@ -119,8 +172,9 @@ const moduleWrapper = tsserver => {
   let hostInfo = `unknown`;
 
   Object.assign(Session.prototype, {
-    onMessage(/** @type {string} */ message) {
-      const parsedMessage = JSON.parse(message)
+    onMessage(/** @type {string | object} */ message) {
+      const isStringMessage = typeof message === 'string';
+      const parsedMessage = isStringMessage ? JSON.parse(message) : message;
 
       if (
         parsedMessage != null &&
@@ -129,11 +183,32 @@ const moduleWrapper = tsserver => {
         typeof parsedMessage.arguments.hostInfo === `string`
       ) {
         hostInfo = parsedMessage.arguments.hostInfo;
+        if (hostInfo === `vscode` && process.env.VSCODE_IPC_HOOK) {
+          const [, major, minor] = (process.env.VSCODE_IPC_HOOK.match(
+            // The RegExp from https://semver.org/ but without the caret at the start
+            /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/
+          ) ?? []).map(Number)
+
+          if (major === 1) {
+            if (minor < 61) {
+              hostInfo += ` <1.61`;
+            } else if (minor < 66) {
+              hostInfo += ` <1.66`;
+            } else if (minor < 68) {
+              hostInfo += ` <1.68`;
+            }
+          }
+        }
       }
 
-      return originalOnMessage.call(this, JSON.stringify(parsedMessage, (key, value) => {
-        return typeof value === `string` ? fromEditorPath(value) : value;
-      }));
+      const processedMessageJSON = JSON.stringify(parsedMessage, (key, value) => {
+        return typeof value === 'string' ? fromEditorPath(value) : value;
+      });
+
+      return originalOnMessage.call(
+        this,
+        isStringMessage ? processedMessageJSON : JSON.parse(processedMessageJSON)
+      );
     },
 
     send(/** @type {any} */ msg) {
@@ -146,11 +221,11 @@ const moduleWrapper = tsserver => {
   return tsserver;
 };
 
-if (existsSync(absPnpApiPath)) {
-  if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/tsserver.js
-    require(absPnpApiPath).setup();
-  }
+const [major, minor] = absRequire(`typescript/package.json`).version.split(`.`, 2).map(value => parseInt(value, 10));
+// In TypeScript@>=5.5 the tsserver uses the public TypeScript API so that needs to be patched as well.
+// Ref https://github.com/microsoft/TypeScript/pull/55326
+if (major > 5 || (major === 5 && minor >= 5)) {
+  moduleWrapper(absRequire(`typescript`));
 }
 
 // Defer to the real typescript/lib/tsserver.js your application uses
diff --git a/tgui/.yarn/sdks/typescript/lib/tsserverlibrary.js b/tgui/.yarn/sdks/typescript/lib/tsserverlibrary.js
index c3de4ff5d705..4d99766952f5 100644
--- a/tgui/.yarn/sdks/typescript/lib/tsserverlibrary.js
+++ b/tgui/.yarn/sdks/typescript/lib/tsserverlibrary.js
@@ -1,13 +1,20 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsserverlibrary.js
+    require(absPnpApiPath).setup();
+  }
+}
 
 const moduleWrapper = tsserver => {
   if (!process.versions.pnp) {
@@ -18,6 +25,7 @@ const moduleWrapper = tsserver => {
   const pnpApi = require(`pnpapi`);
 
   const isVirtual = str => str.match(/\/(\$\$virtual|__virtual__)\//);
+  const isPortal = str => str.startsWith("portal:/");
   const normalize = str => str.replace(/\\/g, `/`).replace(/^\/?/, `/`);
 
   const dependencyTreeRoots = new Set(pnpApi.getDependencyTreeRoots().map(locator => {
@@ -30,7 +38,7 @@ const moduleWrapper = tsserver => {
 
   function toEditorPath(str) {
     // We add the `zip:` prefix to both `.zip/` paths and virtual paths
-    if (isAbsolute(str) && !str.match(/^\^zip:/) && (str.match(/\.zip\//) || isVirtual(str))) {
+    if (isAbsolute(str) && !str.match(/^\^?(zip:|\/zip\/)/) && (str.match(/\.zip\//) || isVirtual(str))) {
       // We also take the opportunity to turn virtual paths into physical ones;
       // this makes it much easier to work with workspaces that list peer
       // dependencies, since otherwise Ctrl+Click would bring us to the virtual
@@ -44,7 +52,7 @@ const moduleWrapper = tsserver => {
       const resolved = isVirtual(str) ? pnpApi.resolveVirtual(str) : str;
       if (resolved) {
         const locator = pnpApi.findPackageLocator(resolved);
-        if (locator && dependencyTreeRoots.has(`${locator.name}@${locator.reference}`)) {
+        if (locator && (dependencyTreeRoots.has(`${locator.name}@${locator.reference}`) || isPortal(locator.reference))) {
           str = resolved;
         }
       }
@@ -60,10 +68,34 @@ const moduleWrapper = tsserver => {
           //
           // Ref: https://github.com/microsoft/vscode/issues/105014#issuecomment-686760910
           //
-          case `vscode`: {
+          // 2021-10-08: VSCode changed the format in 1.61.
+          // Before | ^zip:/c:/foo/bar.zip/package.json
+          // After  | ^/zip//c:/foo/bar.zip/package.json
+          //
+          // 2022-04-06: VSCode changed the format in 1.66.
+          // Before | ^/zip//c:/foo/bar.zip/package.json
+          // After  | ^/zip/c:/foo/bar.zip/package.json
+          //
+          // 2022-05-06: VSCode changed the format in 1.68
+          // Before | ^/zip/c:/foo/bar.zip/package.json
+          // After  | ^/zip//c:/foo/bar.zip/package.json
+          //
+          case `vscode <1.61`: {
             str = `^zip:${str}`;
           } break;
 
+          case `vscode <1.66`: {
+            str = `^/zip/${str}`;
+          } break;
+
+          case `vscode <1.68`: {
+            str = `^/zip${str}`;
+          } break;
+
+          case `vscode`: {
+            str = `^/zip/${str}`;
+          } break;
+
           // To make "go to definition" work,
           // We have to resolve the actual file system path from virtual path
           // and convert scheme to supported by [vim-rzip](https://github.com/lbrayner/vim-rzip)
@@ -77,13 +109,15 @@ const moduleWrapper = tsserver => {
           // everything else is up to neovim
           case `neovim`: {
             str = normalize(resolved).replace(/\.zip\//, `.zip::`);
-            str = `zipfile:${str}`;
+            str = `zipfile://${str}`;
           } break;
 
           default: {
             str = `zip:${str}`;
           } break;
         }
+      } else {
+        str = str.replace(/^\/?/, process.platform === `win32` ? `` : `/`);
       }
     }
 
@@ -91,9 +125,28 @@ const moduleWrapper = tsserver => {
   }
 
   function fromEditorPath(str) {
-    return process.platform === `win32`
-      ? str.replace(/^\^?zip:\//, ``)
-      : str.replace(/^\^?zip:/, ``);
+    switch (hostInfo) {
+      case `coc-nvim`: {
+        str = str.replace(/\.zip::/, `.zip/`);
+        // The path for coc-nvim is in format of /<pwd>/zipfile:/<pwd>/.yarn/...
+        // So in order to convert it back, we use .* to match all the thing
+        // before `zipfile:`
+        return process.platform === `win32`
+          ? str.replace(/^.*zipfile:\//, ``)
+          : str.replace(/^.*zipfile:/, ``);
+      } break;
+
+      case `neovim`: {
+        str = str.replace(/\.zip::/, `.zip/`);
+        // The path for neovim is in format of zipfile:///<pwd>/.yarn/...
+        return str.replace(/^zipfile:\/\//, ``);
+      } break;
+
+      case `vscode`:
+      default: {
+        return str.replace(/^\^?(zip:|\/zip(\/ts-nul-authority)?)\/+/, process.platform === `win32` ? `` : `/`)
+      } break;
+    }
   }
 
   // Force enable 'allowLocalPluginLoads'
@@ -119,8 +172,9 @@ const moduleWrapper = tsserver => {
   let hostInfo = `unknown`;
 
   Object.assign(Session.prototype, {
-    onMessage(/** @type {string} */ message) {
-      const parsedMessage = JSON.parse(message)
+    onMessage(/** @type {string | object} */ message) {
+      const isStringMessage = typeof message === 'string';
+      const parsedMessage = isStringMessage ? JSON.parse(message) : message;
 
       if (
         parsedMessage != null &&
@@ -129,11 +183,32 @@ const moduleWrapper = tsserver => {
         typeof parsedMessage.arguments.hostInfo === `string`
       ) {
         hostInfo = parsedMessage.arguments.hostInfo;
+        if (hostInfo === `vscode` && process.env.VSCODE_IPC_HOOK) {
+          const [, major, minor] = (process.env.VSCODE_IPC_HOOK.match(
+            // The RegExp from https://semver.org/ but without the caret at the start
+            /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/
+          ) ?? []).map(Number)
+
+          if (major === 1) {
+            if (minor < 61) {
+              hostInfo += ` <1.61`;
+            } else if (minor < 66) {
+              hostInfo += ` <1.66`;
+            } else if (minor < 68) {
+              hostInfo += ` <1.68`;
+            }
+          }
+        }
       }
 
-      return originalOnMessage.call(this, JSON.stringify(parsedMessage, (key, value) => {
-        return typeof value === `string` ? fromEditorPath(value) : value;
-      }));
+      const processedMessageJSON = JSON.stringify(parsedMessage, (key, value) => {
+        return typeof value === 'string' ? fromEditorPath(value) : value;
+      });
+
+      return originalOnMessage.call(
+        this,
+        isStringMessage ? processedMessageJSON : JSON.parse(processedMessageJSON)
+      );
     },
 
     send(/** @type {any} */ msg) {
@@ -146,11 +221,11 @@ const moduleWrapper = tsserver => {
   return tsserver;
 };
 
-if (existsSync(absPnpApiPath)) {
-  if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/tsserverlibrary.js
-    require(absPnpApiPath).setup();
-  }
+const [major, minor] = absRequire(`typescript/package.json`).version.split(`.`, 2).map(value => parseInt(value, 10));
+// In TypeScript@>=5.5 the tsserver uses the public TypeScript API so that needs to be patched as well.
+// Ref https://github.com/microsoft/TypeScript/pull/55326
+if (major > 5 || (major === 5 && minor >= 5)) {
+  moduleWrapper(absRequire(`typescript`));
 }
 
 // Defer to the real typescript/lib/tsserverlibrary.js your application uses
diff --git a/tgui/.yarn/sdks/typescript/lib/typescript.js b/tgui/.yarn/sdks/typescript/lib/typescript.js
index cbdbf1500fbe..b5f4db25bee6 100644
--- a/tgui/.yarn/sdks/typescript/lib/typescript.js
+++ b/tgui/.yarn/sdks/typescript/lib/typescript.js
@@ -1,20 +1,20 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/typescript.js
+    // Setup the environment to be able to require typescript
     require(absPnpApiPath).setup();
   }
 }
 
-// Defer to the real typescript/lib/typescript.js your application uses
-module.exports = absRequire(`typescript/lib/typescript.js`);
+// Defer to the real typescript your application uses
+module.exports = absRequire(`typescript`);
diff --git a/tgui/.yarn/sdks/typescript/package.json b/tgui/.yarn/sdks/typescript/package.json
index ea85e133e822..9d77f1ac3a17 100644
--- a/tgui/.yarn/sdks/typescript/package.json
+++ b/tgui/.yarn/sdks/typescript/package.json
@@ -2,5 +2,9 @@
   "name": "typescript",
   "version": "4.3.5-sdk",
   "main": "./lib/typescript.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "tsc": "./bin/tsc",
+    "tsserver": "./bin/tsserver"
+  }
 }
diff --git a/tgui/.yarnrc.yml b/tgui/.yarnrc.yml
index b6387e8e46e8..086484a243a3 100644
--- a/tgui/.yarnrc.yml
+++ b/tgui/.yarnrc.yml
@@ -8,7 +8,7 @@ logFilters:
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+    spec: '@yarnpkg/plugin-interactive-tools'
 
 pnpEnableEsmLoader: false
 
diff --git a/tgui/README.md b/tgui/README.md
index e87130243429..4a1915d5c897 100644
--- a/tgui/README.md
+++ b/tgui/README.md
@@ -71,6 +71,7 @@ However, if you want finer control over the installation or build process, you w
 - `tools/build/build tgui-clean` - Clean up tgui folder.
 
 > With Juke Build, you can run multiple targets together, e.g.:
+>
 > ```
 > tools/build/build tgui tgui-lint tgui-tsc tgui-test
 > ```
@@ -137,7 +138,7 @@ Press `F12` or click the green bug to open the KitchenSink interface. This inter
 playground to test various tgui components.
 
 **Layout Debugger.**
-Press `F11` to toggle the *layout debugger*. It will show outlines of
+Press `F11` to toggle the _layout debugger_. It will show outlines of
 all tgui elements, which makes it easy to understand how everything comes
 together, and can reveal certain layout bugs which are not normally visible.
 
diff --git a/tgui/babel.config.js b/tgui/babel.config.js
index d8ddb75721db..959dc3be7adb 100644
--- a/tgui/babel.config.js
+++ b/tgui/babel.config.js
@@ -4,27 +4,36 @@
  * @license MIT
  */
 
-const createBabelConfig = options => {
+const createBabelConfig = (options) => {
   const { presets = [], plugins = [], removeConsole } = options;
   return {
     presets: [
-      [require.resolve('@babel/preset-typescript'), {
-        allowDeclareFields: true,
-      }],
-      [require.resolve('@babel/preset-env'), {
-        modules: 'commonjs',
-        useBuiltIns: 'entry',
-        corejs: '3',
-        spec: false,
-        loose: true,
-        targets: [],
-      }],
+      [
+        require.resolve('@babel/preset-typescript'),
+        {
+          allowDeclareFields: true,
+        },
+      ],
+      [
+        require.resolve('@babel/preset-env'),
+        {
+          modules: 'commonjs',
+          useBuiltIns: 'entry',
+          corejs: '3',
+          spec: false,
+          loose: true,
+          targets: [],
+        },
+      ],
       ...presets,
     ].filter(Boolean),
     plugins: [
-      [require.resolve('@babel/plugin-proposal-class-properties'), {
-        loose: true,
-      }],
+      [
+        require.resolve('@babel/plugin-proposal-class-properties'),
+        {
+          loose: true,
+        },
+      ],
       require.resolve('@babel/plugin-transform-jscript'),
       require.resolve('babel-plugin-inferno'),
       removeConsole && require.resolve('babel-plugin-transform-remove-console'),
@@ -34,7 +43,7 @@ const createBabelConfig = options => {
   };
 };
 
-module.exports = api => {
+module.exports = (api) => {
   api.cache(true);
   const mode = process.env.NODE_ENV;
   return createBabelConfig({ mode });
diff --git a/tgui/jest.config.js b/tgui/jest.config.js
index e654f0089b84..8b78818004be 100644
--- a/tgui/jest.config.js
+++ b/tgui/jest.config.js
@@ -4,9 +4,7 @@ module.exports = {
     '<rootDir>/packages/**/__tests__/*.{js,ts,tsx}',
     '<rootDir>/packages/**/*.{spec,test}.{js,ts,tsx}',
   ],
-  testPathIgnorePatterns: [
-    '<rootDir>/packages/tgui-bench',
-  ],
+  testPathIgnorePatterns: ['<rootDir>/packages/tgui-bench'],
   testEnvironment: 'jsdom',
   testRunner: require.resolve('jest-circus/runner'),
   transform: {
diff --git a/tgui/package.json b/tgui/package.json
index e871d874c5d6..86d4b77c2cba 100644
--- a/tgui/package.json
+++ b/tgui/package.json
@@ -11,12 +11,15 @@
     "tgui:analyze": "webpack --analyze",
     "tgui:dev": "node --experimental-modules packages/tgui-dev-server/index.js",
     "tgui:lint": "eslint packages --ext .js,.cjs,.ts,.tsx",
+    "tgui:prettier": "prettier --check .",
     "tgui:sonar": "eslint packages --ext .js,.cjs,.ts,.tsx -c .eslintrc-sonar.yml",
     "tgui:tsc": "tsc",
     "tgui:test": "jest --watch",
     "tgui:test-simple": "CI=true jest --color",
     "tgui:test-ci": "CI=true jest --color --collect-coverage",
-    "tgui:bench": "webpack --env TGUI_BENCH=1 && node packages/tgui-bench/index.js"
+    "tgui:bench": "webpack --env TGUI_BENCH=1 && node packages/tgui-bench/index.js",
+    "tgui:prettier-fix": "prettier --write .",
+    "tgui:eslint-fix": "eslint --fix packages --ext .js,.cjs,.ts,.tsx"
   },
   "dependencies": {
     "@babel/core": "^7.15.0",
@@ -38,6 +41,7 @@
     "common": "workspace:*",
     "css-loader": "^5.2.7",
     "eslint": "^7.32.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-radar": "^0.2.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-unused-imports": "^1.1.4",
@@ -47,6 +51,7 @@
     "jest-circus": "^27.0.6",
     "jsdom": "^16.7.0",
     "mini-css-extract-plugin": "^1.6.2",
+    "prettier": "^3.2.5",
     "sass": "^1.37.5",
     "sass-loader": "^11.1.1",
     "style-loader": "^2.0.0",
diff --git a/tgui/packages/common/collections.spec.ts b/tgui/packages/common/collections.spec.ts
index 58eff7f354c9..ef35a95cb3ea 100644
--- a/tgui/packages/common/collections.spec.ts
+++ b/tgui/packages/common/collections.spec.ts
@@ -1,20 +1,20 @@
-import { range, zip } from "./collections";
+import { range, zip } from './collections';
 
 // Type assertions, these will lint if the types are wrong.
-const _zip1: [string, number] = zip(["a"], [1])[0];
+const _zip1: [string, number] = zip(['a'], [1])[0];
 
-describe("range", () => {
-  test("range(0, 5)", () => {
+describe('range', () => {
+  test('range(0, 5)', () => {
     expect(range(0, 5)).toEqual([0, 1, 2, 3, 4]);
   });
 });
 
-describe("zip", () => {
+describe('zip', () => {
   test("zip(['a', 'b', 'c'], [1, 2, 3, 4])", () => {
-    expect(zip(["a", "b", "c"], [1, 2, 3, 4])).toEqual([
-      ["a", 1],
-      ["b", 2],
-      ["c", 3],
+    expect(zip(['a', 'b', 'c'], [1, 2, 3, 4])).toEqual([
+      ['a', 1],
+      ['b', 2],
+      ['c', 3],
     ]);
   });
 });
diff --git a/tgui/packages/common/collections.ts b/tgui/packages/common/collections.ts
index 5ab378070f0b..ab00ad4cacbf 100644
--- a/tgui/packages/common/collections.ts
+++ b/tgui/packages/common/collections.ts
@@ -14,40 +14,33 @@
  *
  * @returns {any[]}
  */
-export const filter = <T>(iterateeFn: (
-  input: T,
-  index: number,
-  collection: T[],
-) => boolean) =>
-    (collection: T[]): T[] => {
-      if (collection === null || collection === undefined) {
-        return collection;
-      }
-      if (Array.isArray(collection)) {
-        const result: T[] = [];
-        for (let i = 0; i < collection.length; i++) {
-          const item = collection[i];
-          if (iterateeFn(item, i, collection)) {
-            result.push(item);
-          }
+export const filter =
+  <T>(iterateeFn: (input: T, index: number, collection: T[]) => boolean) =>
+  (collection: T[]): T[] => {
+    if (collection === null || collection === undefined) {
+      return collection;
+    }
+    if (Array.isArray(collection)) {
+      const result: T[] = [];
+      for (let i = 0; i < collection.length; i++) {
+        const item = collection[i];
+        if (iterateeFn(item, i, collection)) {
+          result.push(item);
         }
-        return result;
       }
-      throw new Error(`filter() can't iterate on type ${typeof collection}`);
-    };
+      return result;
+    }
+    throw new Error(`filter() can't iterate on type ${typeof collection}`);
+  };
 
 type MapFunction = {
-  <T, U>(iterateeFn: (
-    value: T,
-    index: number,
-    collection: T[],
-  ) => U): (collection: T[]) => U[];
-
-  <T, U, K extends string | number>(iterateeFn: (
-    value: T,
-    index: K,
-    collection: Record<K, T>,
-  ) => U): (collection: Record<K, T>) => U[];
+  <T, U>(
+    iterateeFn: (value: T, index: number, collection: T[]) => U,
+  ): (collection: T[]) => U[];
+
+  <T, U, K extends string | number>(
+    iterateeFn: (value: T, index: K, collection: Record<K, T>) => U,
+  ): (collection: Record<K, T>) => U[];
 };
 
 /**
@@ -58,7 +51,8 @@ type MapFunction = {
  * If collection is 'null' or 'undefined', it will be returned "as is"
  * without emitting any errors (which can be useful in some cases).
  */
-export const map: MapFunction = <T, U>(iterateeFn) =>
+export const map: MapFunction =
+  <T, U>(iterateeFn) =>
   (collection: T[]): U[] => {
     if (collection === null || collection === undefined) {
       return collection;
@@ -81,9 +75,10 @@ export const map: MapFunction = <T, U>(iterateeFn) =>
  * Given a collection, will run each element through an iteratee function.
  * Will then filter out undefined values.
  */
-export const filterMap = <T, U>(collection: T[], iterateeFn: (
-  value: T
-) => U | undefined): U[] => {
+export const filterMap = <T, U>(
+  collection: T[],
+  iterateeFn: (value: T) => U | undefined,
+): U[] => {
   const finalCollection: U[] = [];
 
   for (const value of collection) {
@@ -119,22 +114,22 @@ const COMPARATOR = (objA, objB) => {
  *
  * Iteratees are called with one argument (value).
  */
-export const sortBy = <T>(
-  ...iterateeFns: ((input: T) => unknown)[]
-) => (array: T[]): T[] => {
+export const sortBy =
+  <T>(...iterateeFns: ((input: T) => unknown)[]) =>
+  (array: T[]): T[] => {
     if (!Array.isArray(array)) {
       return array;
     }
     let length = array.length;
     // Iterate over the array to collect criteria to sort it by
     let mappedArray: {
-      criteria: unknown[],
-      value: T,
+      criteria: unknown[];
+      value: T;
     }[] = [];
     for (let i = 0; i < length; i++) {
       const value = array[i];
       mappedArray.push({
-        criteria: iterateeFns.map(fn => fn(value)),
+        criteria: iterateeFns.map((fn) => fn(value)),
         value,
       });
     }
@@ -163,15 +158,14 @@ export const range = (start: number, end: number): number[] =>
 /**
  * A fast implementation of reduce.
  */
-export const reduce = (reducerFn, initialValue) => array => {
+export const reduce = (reducerFn, initialValue) => (array) => {
   const length = array.length;
   let i;
   let result;
   if (initialValue === undefined) {
     i = 1;
     result = array[0];
-  }
-  else {
+  } else {
     i = 0;
     result = initialValue;
   }
@@ -192,15 +186,14 @@ export const reduce = (reducerFn, initialValue) => array => {
  * is determined by the order they occur in the array. The iteratee is
  * invoked with one argument: value.
  */
-export const uniqBy = <T extends unknown>(
-  iterateeFn?: (value: T) => unknown
-) => (array: T[]): T[] => {
+export const uniqBy =
+  <T extends unknown>(iterateeFn?: (value: T) => unknown) =>
+  (array: T[]): T[] => {
     const { length } = array;
     const result: T[] = [];
     const seen: unknown[] = iterateeFn ? [] : result;
     let index = -1;
-    outer:
-    while (++index < length) {
+    outer: while (++index < length) {
       let value: T | 0 = array[index];
       const computed = iterateeFn ? iterateeFn(value) : value;
       if (computed === computed) {
@@ -214,8 +207,7 @@ export const uniqBy = <T extends unknown>(
           seen.push(computed);
         }
         result.push(value);
-      }
-      else if (!seen.includes(computed)) {
+      } else if (!seen.includes(computed)) {
         if (seen !== result) {
           seen.push(computed);
         }
@@ -261,7 +253,8 @@ export const zip = <T extends unknown[][]>(...arrays: T): Zip<T> => {
  * specify how grouped values should be combined. The iteratee is
  * invoked with the elements of each group.
  */
-export const zipWith = <T, U>(iterateeFn: (...values: T[]) => U) =>
+export const zipWith =
+  <T, U>(iterateeFn: (...values: T[]) => U) =>
   (...arrays: T[][]): U[] => {
     return map((values: T[]) => iterateeFn(...values))(zip(...arrays));
   };
@@ -301,9 +294,9 @@ const binarySearch = <T, U = unknown>(
   return compare > insertingKey ? middle : middle + 1;
 };
 
-export const binaryInsertWith = <T, U = unknown>(getKey: (value: T) => U):
-  ((collection: readonly T[], value: T) => T[]) =>
-{
+export const binaryInsertWith = <T, U = unknown>(
+  getKey: (value: T) => U,
+): ((collection: readonly T[], value: T) => T[]) => {
   return (collection, value) => {
     const copy = [...collection];
     copy.splice(binarySearch(getKey, collection, value), 0, value);
diff --git a/tgui/packages/common/color.js b/tgui/packages/common/color.js
index 2aadae8d6bdf..fffd452ddb83 100644
--- a/tgui/packages/common/color.js
+++ b/tgui/packages/common/color.js
@@ -27,23 +27,23 @@ export class Color {
 /**
  * Creates a color from the CSS hex color notation.
  */
-Color.fromHex = hex => (
+Color.fromHex = (hex) =>
   new Color(
     parseInt(hex.substr(1, 2), 16),
     parseInt(hex.substr(3, 2), 16),
-    parseInt(hex.substr(5, 2), 16))
-);
+    parseInt(hex.substr(5, 2), 16),
+  );
 
 /**
  * Linear interpolation of two colors.
  */
-Color.lerp = (c1, c2, n) => (
+Color.lerp = (c1, c2, n) =>
   new Color(
     (c2.r - c1.r) * n + c1.r,
     (c2.g - c1.g) * n + c1.g,
     (c2.b - c1.b) * n + c1.b,
-    (c2.a - c1.a) * n + c1.a)
-);
+    (c2.a - c1.a) * n + c1.a,
+  );
 
 /**
  * Loops up the color in the provided list of colors
diff --git a/tgui/packages/common/events.js b/tgui/packages/common/events.js
index 6d590a34453b..7eeff511aa56 100644
--- a/tgui/packages/common/events.js
+++ b/tgui/packages/common/events.js
@@ -19,10 +19,9 @@ export class EventEmitter {
     if (!listeners) {
       throw new Error(`There is no listeners for "${name}"`);
     }
-    this.listeners[name] = listeners
-      .filter(existingListener => {
-        return existingListener !== listener;
-      });
+    this.listeners[name] = listeners.filter((existingListener) => {
+      return existingListener !== listener;
+    });
   }
 
   emit(name, ...params) {
diff --git a/tgui/packages/common/fp.js b/tgui/packages/common/fp.js
index 7aa00a00f3ee..b8da91e52f09 100644
--- a/tgui/packages/common/fp.js
+++ b/tgui/packages/common/fp.js
@@ -9,19 +9,20 @@
  * functions, where each successive invocation is supplied the return
  * value of the previous.
  */
-export const flow = (...funcs) => (input, ...rest) => {
-  let output = input;
-  for (let func of funcs) {
-    // Recurse into the array of functions
-    if (Array.isArray(func)) {
-      output = flow(...func)(output, ...rest);
+export const flow =
+  (...funcs) =>
+  (input, ...rest) => {
+    let output = input;
+    for (let func of funcs) {
+      // Recurse into the array of functions
+      if (Array.isArray(func)) {
+        output = flow(...func)(output, ...rest);
+      } else if (func) {
+        output = func(output, ...rest);
+      }
     }
-    else if (func) {
-      output = func(output, ...rest);
-    }
-  }
-  return output;
-};
+    return output;
+  };
 
 /**
  * Composes single-argument functions from right to left.
@@ -37,11 +38,14 @@ export const flow = (...funcs) => (input, ...rest) => {
  */
 export const compose = (...funcs) => {
   if (funcs.length === 0) {
-    return arg => arg;
+    return (arg) => arg;
   }
   if (funcs.length === 1) {
     return funcs[0];
   }
-  return funcs.reduce((a, b) => (value, ...rest) =>
-    a(b(value, ...rest), ...rest));
+  return funcs.reduce(
+    (a, b) =>
+      (value, ...rest) =>
+        a(b(value, ...rest), ...rest),
+  );
 };
diff --git a/tgui/packages/common/math.ts b/tgui/packages/common/math.ts
index 97e6b60b2ed4..9dc1d6556936 100644
--- a/tgui/packages/common/math.ts
+++ b/tgui/packages/common/math.ts
@@ -14,7 +14,7 @@ export const clamp = (value, min, max) => {
 /**
  * Limits a number between 0 and 1.
  */
-export const clamp01 = value => {
+export const clamp01 = (value) => {
   return value < 0 ? 0 : value > 1 ? 1 : value;
 };
 
@@ -69,9 +69,7 @@ export const toFixed = (value, fractionDigits = 0) => {
  * Range is an array of two numbers, for example: [0, 15].
  */
 export const inRange = (value, range) => {
-  return range
-    && value >= range[0]
-    && value <= range[1];
+  return range && value >= range[0] && value <= range[1];
 };
 
 /**
@@ -92,7 +90,7 @@ export const keyOfMatchingRange = (value, ranges) => {
 /**
  * Get number of digits following the decimal point in a number
  */
-export const numberOfDecimalDigits = value => {
+export const numberOfDecimalDigits = (value) => {
   if (Math.floor(value) !== value) {
     return value.toString().split('.')[1].length || 0;
   }
diff --git a/tgui/packages/common/perf.js b/tgui/packages/common/perf.js
index 8414971f93b0..c2d6cb27db15 100644
--- a/tgui/packages/common/perf.js
+++ b/tgui/packages/common/perf.js
@@ -48,10 +48,15 @@ const measure = (markerNameA, markerNameB) => {
   }
 };
 
-const formatDuration = duration => {
+const formatDuration = (duration) => {
   const durationInFrames = duration / FRAME_DURATION;
-  return duration.toFixed(duration < 10 ? 1 : 0) + 'ms '
-    + '(' + durationInFrames.toFixed(2) + ' frames)';
+  return (
+    duration.toFixed(duration < 10 ? 1 : 0) +
+    'ms ' +
+    '(' +
+    durationInFrames.toFixed(2) +
+    ' frames)'
+  );
 };
 
 export const perf = {
diff --git a/tgui/packages/common/react.ts b/tgui/packages/common/react.ts
index c8a08f04934b..6789bb4edc65 100644
--- a/tgui/packages/common/react.ts
+++ b/tgui/packages/common/react.ts
@@ -24,7 +24,7 @@ export const classes = (classNames: (string | BooleanLike)[]) => {
  */
 export const normalizeChildren = <T>(children: T | T[]) => {
   if (Array.isArray(children)) {
-    return children.flat().filter(value => value) as T[];
+    return children.flat().filter((value) => value) as T[];
   }
   if (typeof children === 'object') {
     return [children];
@@ -64,9 +64,7 @@ export const pureComponentHooks = {
  * A helper to determine whether the object is renderable by React.
  */
 export const canRender = (value: unknown) => {
-  return value !== undefined
-    && value !== null
-    && typeof value !== 'boolean';
+  return value !== undefined && value !== null && typeof value !== 'boolean';
 };
 
 /**
diff --git a/tgui/packages/common/redux.js b/tgui/packages/common/redux.js
index ebed11f166b2..0c2dd6b670cb 100644
--- a/tgui/packages/common/redux.js
+++ b/tgui/packages/common/redux.js
@@ -20,11 +20,11 @@ export const createStore = (reducer, enhancer) => {
 
   const getState = () => currentState;
 
-  const subscribe = listener => {
+  const subscribe = (listener) => {
     listeners.push(listener);
   };
 
-  const dispatch = action => {
+  const dispatch = (action) => {
     currentState = reducer(currentState, action);
     for (let i = 0; i < listeners.length; i++) {
       listeners[i]();
@@ -49,27 +49,29 @@ export const createStore = (reducer, enhancer) => {
  * actions.
  */
 export const applyMiddleware = (...middlewares) => {
-  return createStore => (reducer, ...args) => {
-    const store = createStore(reducer, ...args);
-
-    let dispatch = () => {
-      throw new Error(
-        'Dispatching while constructing your middleware is not allowed.');
-    };
-
-    const storeApi = {
-      getState: store.getState,
-      dispatch: (action, ...args) => dispatch(action, ...args),
-    };
-
-    const chain = middlewares.map(middleware => middleware(storeApi));
-    dispatch = compose(...chain)(store.dispatch);
-
-    return {
-      ...store,
-      dispatch,
+  return (createStore) =>
+    (reducer, ...args) => {
+      const store = createStore(reducer, ...args);
+
+      let dispatch = () => {
+        throw new Error(
+          'Dispatching while constructing your middleware is not allowed.',
+        );
+      };
+
+      const storeApi = {
+        getState: store.getState,
+        dispatch: (action, ...args) => dispatch(action, ...args),
+      };
+
+      const chain = middlewares.map((middleware) => middleware(storeApi));
+      dispatch = compose(...chain)(store.dispatch);
+
+      return {
+        ...store,
+        dispatch,
+      };
     };
-  };
 };
 
 /**
@@ -80,7 +82,7 @@ export const applyMiddleware = (...middlewares) => {
  * in the state that are not present in the reducers object. This function
  * is also more flexible than the redux counterpart.
  */
-export const combineReducers = reducersObj => {
+export const combineReducers = (reducersObj) => {
   const keys = Object.keys(reducersObj);
   let hasChanged = false;
   return (prevState = {}, action) => {
@@ -94,9 +96,7 @@ export const combineReducers = reducersObj => {
         nextState[key] = nextDomainState;
       }
     }
-    return hasChanged
-      ? nextState
-      : prevState;
+    return hasChanged ? nextState : prevState;
   };
 };
 
@@ -136,15 +136,14 @@ export const createAction = (type, prepare = null) => {
   };
   actionCreator.toString = () => '' + type;
   actionCreator.type = type;
-  actionCreator.match = action => action.type === type;
+  actionCreator.match = (action) => action.type === type;
   return actionCreator;
 };
 
-
 // Implementation specific
 // --------------------------------------------------------
 
-export const useDispatch = context => {
+export const useDispatch = (context) => {
   return context.store.dispatch;
 };
 
diff --git a/tgui/packages/common/storage.js b/tgui/packages/common/storage.js
index dd137dd5d78c..af735769c140 100644
--- a/tgui/packages/common/storage.js
+++ b/tgui/packages/common/storage.js
@@ -17,11 +17,10 @@ const INDEXED_DB_STORE_NAME = 'daedalus-storage-v1';
 const READ_ONLY = 'readonly';
 const READ_WRITE = 'readwrite';
 
-const testGeneric = testFn => () => {
+const testGeneric = (testFn) => () => {
   try {
     return Boolean(testFn());
-  }
-  catch {
+  } catch {
     return false;
   }
 };
@@ -29,14 +28,15 @@ const testGeneric = testFn => () => {
 // Localstorage can sometimes throw an error, even if DOM storage is not
 // disabled in IE11 settings.
 // See: https://superuser.com/questions/1080011
-const testLocalStorage = testGeneric(() => (
-  window.localStorage && window.localStorage.getItem
-));
+const testLocalStorage = testGeneric(
+  () => window.localStorage && window.localStorage.getItem,
+);
 
-const testIndexedDb = testGeneric(() => (
-  (window.indexedDB || window.msIndexedDB)
-  && (window.IDBTransaction || window.msIDBTransaction)
-));
+const testIndexedDb = testGeneric(
+  () =>
+    (window.indexedDB || window.msIndexedDB) &&
+    (window.IDBTransaction || window.msIDBTransaction),
+);
 
 class MemoryBackend {
   constructor() {
@@ -96,8 +96,7 @@ class IndexedDbBackend {
       req.onupgradeneeded = () => {
         try {
           req.result.createObjectStore(INDEXED_DB_STORE_NAME);
-        }
-        catch (err) {
+        } catch (err) {
           reject(new Error('Failed to upgrade IDB: ' + req.error));
         }
       };
@@ -109,9 +108,11 @@ class IndexedDbBackend {
   }
 
   getStore(mode) {
-    return this.dbPromise.then(db => db
-      .transaction(INDEXED_DB_STORE_NAME, mode)
-      .objectStore(INDEXED_DB_STORE_NAME));
+    return this.dbPromise.then((db) =>
+      db
+        .transaction(INDEXED_DB_STORE_NAME, mode)
+        .objectStore(INDEXED_DB_STORE_NAME),
+    );
   }
 
   async get(key) {
@@ -161,8 +162,7 @@ class StorageProxy {
           const backend = new IndexedDbBackend();
           await backend.dbPromise;
           return backend;
-        }
-        catch {}
+        } catch {}
       }
       if (testLocalStorage()) {
         return new LocalStorageBackend();
diff --git a/tgui/packages/common/string.babel-plugin.cjs b/tgui/packages/common/string.babel-plugin.cjs
index 68295aefcf84..97ca67c6ea4c 100644
--- a/tgui/packages/common/string.babel-plugin.cjs
+++ b/tgui/packages/common/string.babel-plugin.cjs
@@ -19,7 +19,7 @@
 /**
  * Removes excess whitespace and indentation from the string.
  */
-const multiline = str => {
+const multiline = (str) => {
   const lines = str.split('\n');
   // Determine base indentation
   let minIndent;
@@ -40,15 +40,15 @@ const multiline = str => {
   // Remove this base indentation and trim the resulting string
   // from both ends.
   return lines
-    .map(line => line.substr(minIndent).trimRight())
+    .map((line) => line.substr(minIndent).trimRight())
     .join('\n')
     .trim();
 };
 
-const StringPlugin = ref => {
+const StringPlugin = (ref) => {
   return {
     visitor: {
-      TaggedTemplateExpression: path => {
+      TaggedTemplateExpression: (path) => {
         if (path.node.tag.name === 'multiline') {
           const { quasi } = path.node;
           if (quasi.expressions.length > 0) {
diff --git a/tgui/packages/common/string.js b/tgui/packages/common/string.js
index 16a0921a2559..7ed73a0b2860 100644
--- a/tgui/packages/common/string.js
+++ b/tgui/packages/common/string.js
@@ -7,7 +7,7 @@
 /**
  * Removes excess whitespace and indentation from the string.
  */
-export const multiline = str => {
+export const multiline = (str) => {
   if (Array.isArray(str)) {
     // Small stub to allow usage as a template tag
     return multiline(str.join(''));
@@ -32,7 +32,7 @@ export const multiline = str => {
   // Remove this base indentation and trim the resulting string
   // from both ends.
   return lines
-    .map(line => line.substr(minIndent).trimRight())
+    .map((line) => line.substr(minIndent).trimRight())
     .join('\n')
     .trim();
 };
@@ -44,12 +44,12 @@ export const multiline = str => {
  *
  * Example: createGlobPattern('*@domain')('user@domain') === true
  */
-export const createGlobPattern = pattern => {
-  const escapeString = str => str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
-  const regex = new RegExp('^'
-    + pattern.split(/\*+/).map(escapeString).join('.*')
-    + '$');
-  return str => regex.test(str);
+export const createGlobPattern = (pattern) => {
+  const escapeString = (str) => str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
+  const regex = new RegExp(
+    '^' + pattern.split(/\*+/).map(escapeString).join('.*') + '$',
+  );
+  return (str) => regex.test(str);
 };
 
 /**
@@ -64,7 +64,7 @@ export const createGlobPattern = pattern => {
  */
 export const createSearch = (searchText, stringifier) => {
   const preparedSearchText = searchText.toLowerCase().trim();
-  return obj => {
+  return (obj) => {
     if (!preparedSearchText) {
       return true;
     }
@@ -72,13 +72,11 @@ export const createSearch = (searchText, stringifier) => {
     if (!str) {
       return false;
     }
-    return str
-      .toLowerCase()
-      .includes(preparedSearchText);
+    return str.toLowerCase().includes(preparedSearchText);
   };
 };
 
-export const capitalize = str => {
+export const capitalize = (str) => {
   // Handle array
   if (Array.isArray(str)) {
     return str.map(capitalize);
@@ -87,7 +85,7 @@ export const capitalize = str => {
   return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
 };
 
-export const toTitleCase = str => {
+export const toTitleCase = (str) => {
   // Handle array
   if (Array.isArray(str)) {
     return str.map(toTitleCase);
@@ -99,19 +97,38 @@ export const toTitleCase = str => {
   // Handle string
   const WORDS_UPPER = ['Id', 'Tv'];
   const WORDS_LOWER = [
-    'A', 'An', 'And', 'As', 'At', 'But', 'By', 'For', 'For', 'From', 'In',
-    'Into', 'Near', 'Nor', 'Of', 'On', 'Onto', 'Or', 'The', 'To', 'With',
+    'A',
+    'An',
+    'And',
+    'As',
+    'At',
+    'But',
+    'By',
+    'For',
+    'For',
+    'From',
+    'In',
+    'Into',
+    'Near',
+    'Nor',
+    'Of',
+    'On',
+    'Onto',
+    'Or',
+    'The',
+    'To',
+    'With',
   ];
-  let currentStr = str.replace(/([^\W_]+[^\s-]*) */g, str => {
+  let currentStr = str.replace(/([^\W_]+[^\s-]*) */g, (str) => {
     return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();
   });
   for (let word of WORDS_LOWER) {
     const regex = new RegExp('\\s' + word + '\\s', 'g');
-    currentStr = currentStr.replace(regex, str => str.toLowerCase());
+    currentStr = currentStr.replace(regex, (str) => str.toLowerCase());
   }
   for (let word of WORDS_UPPER) {
     const regex = new RegExp('\\b' + word + '\\b', 'g');
-    currentStr = currentStr.replace(regex, str => str.toLowerCase());
+    currentStr = currentStr.replace(regex, (str) => str.toLowerCase());
   }
   return currentStr;
 };
@@ -122,7 +139,7 @@ export const toTitleCase = str => {
  * @param  {String} str Encoded HTML string
  * @return {String} Decoded HTML string
  */
-export const decodeHtmlEntities = str => {
+export const decodeHtmlEntities = (str) => {
   if (!str) {
     return str;
   }
@@ -133,30 +150,32 @@ export const decodeHtmlEntities = str => {
     quot: '"',
     lt: '<',
     gt: '>',
-    apos: '\'',
+    apos: "'",
   };
-  return str
-    // Newline tags
-    .replace(/<br>/gi, '\n')
-    .replace(/<\/?[a-z0-9-_]+[^>]*>/gi, '')
-    // Basic entities
-    .replace(translate_re, (match, entity) => translate[entity])
-    // Decimal entities
-    .replace(/&#?([0-9]+);/gi, (match, numStr) => {
-      const num = parseInt(numStr, 10);
-      return String.fromCharCode(num);
-    })
-    // Hex entities
-    .replace(/&#x?([0-9a-f]+);/gi, (match, numStr) => {
-      const num = parseInt(numStr, 16);
-      return String.fromCharCode(num);
-    });
+  return (
+    str
+      // Newline tags
+      .replace(/<br>/gi, '\n')
+      .replace(/<\/?[a-z0-9-_]+[^>]*>/gi, '')
+      // Basic entities
+      .replace(translate_re, (match, entity) => translate[entity])
+      // Decimal entities
+      .replace(/&#?([0-9]+);/gi, (match, numStr) => {
+        const num = parseInt(numStr, 10);
+        return String.fromCharCode(num);
+      })
+      // Hex entities
+      .replace(/&#x?([0-9a-f]+);/gi, (match, numStr) => {
+        const num = parseInt(numStr, 16);
+        return String.fromCharCode(num);
+      })
+  );
 };
 
 /**
  * Converts an object into a query string,
  */
-export const buildQueryString = obj => Object.keys(obj)
-  .map(key => encodeURIComponent(key)
-    + '=' + encodeURIComponent(obj[key]))
-  .join('&');
+export const buildQueryString = (obj) =>
+  Object.keys(obj)
+    .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]))
+    .join('&');
diff --git a/tgui/packages/common/timer.js b/tgui/packages/common/timer.js
index 1177071b9c62..0b1c68199e9f 100644
--- a/tgui/packages/common/timer.js
+++ b/tgui/packages/common/timer.js
@@ -33,6 +33,5 @@ export const debounce = (fn, time, immediate = false) => {
  *
  * @param {number} time
  */
-export const sleep = time => (
-  new Promise(resolve => setTimeout(resolve, time))
-);
+export const sleep = (time) =>
+  new Promise((resolve) => setTimeout(resolve, time));
diff --git a/tgui/packages/common/types.ts b/tgui/packages/common/types.ts
index a92ac122d9fe..e68aadbdb11c 100644
--- a/tgui/packages/common/types.ts
+++ b/tgui/packages/common/types.ts
@@ -1,5 +1,8 @@
 /**
  * Returns the arguments of a function F as an array.
  */
-export type ArgumentsOf<F extends Function>
-  = F extends (...args: infer A) => unknown ? A : never;
+export type ArgumentsOf<F extends Function> = F extends (
+  ...args: infer A
+) => unknown
+  ? A
+  : never;
diff --git a/tgui/packages/common/uuid.js b/tgui/packages/common/uuid.js
index 7721af64949b..f2eb4bb98f4e 100644
--- a/tgui/packages/common/uuid.js
+++ b/tgui/packages/common/uuid.js
@@ -11,9 +11,9 @@
  */
 export const createUuid = () => {
   let d = new Date().getTime();
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
     const r = (d + Math.random() * 16) % 16 | 0;
     d = Math.floor(d / 16);
-    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
   });
 };
diff --git a/tgui/packages/common/vector.js b/tgui/packages/common/vector.js
index c3ac350a4e8e..b1f85f7429db 100644
--- a/tgui/packages/common/vector.js
+++ b/tgui/packages/common/vector.js
@@ -32,17 +32,17 @@ export const vecDivide = (...vecs) => {
 };
 
 export const vecScale = (vec, n) => {
-  return map(x => x * n)(vec);
+  return map((x) => x * n)(vec);
 };
 
-export const vecInverse = vec => {
-  return map(x => -x)(vec);
+export const vecInverse = (vec) => {
+  return map((x) => -x)(vec);
 };
 
-export const vecLength = vec => {
+export const vecLength = (vec) => {
   return Math.sqrt(reduce(ADD)(zipWith(MUL)(vec, vec)));
 };
 
-export const vecNormalize = vec => {
+export const vecNormalize = (vec) => {
   return vecDivide(vec, vecLength(vec));
 };
diff --git a/tgui/packages/tgfont/icons/ATTRIBUTIONS.md b/tgui/packages/tgfont/icons/ATTRIBUTIONS.md
index 2f218388d364..0491b90e726e 100644
--- a/tgui/packages/tgfont/icons/ATTRIBUTIONS.md
+++ b/tgui/packages/tgfont/icons/ATTRIBUTIONS.md
@@ -1,6 +1,8 @@
 bad-touch.svg contains:
+
 - hug by Phạm Thanh Lộc from the Noun Project
 - Fight by Rudez Studio from the Noun Project
 
 prosthetic-leg.svg contains:
+
 - prosthetic leg by Gan Khoon Lay from the Noun Project
diff --git a/tgui/packages/tgfont/mkdist.cjs b/tgui/packages/tgfont/mkdist.cjs
index 5c628becf992..85634bd265d9 100644
--- a/tgui/packages/tgfont/mkdist.cjs
+++ b/tgui/packages/tgfont/mkdist.cjs
@@ -10,5 +10,4 @@ process.chdir(__dirname);
 // Silently make a dist folder
 try {
   require('fs').mkdirSync('dist');
-}
-catch (err) {}
+} catch (err) {}
diff --git a/tgui/packages/tgui-bench/entrypoint.tsx b/tgui/packages/tgui-bench/entrypoint.tsx
index d72aa60a667e..377848fe3ae0 100644
--- a/tgui/packages/tgui-bench/entrypoint.tsx
+++ b/tgui/packages/tgui-bench/entrypoint.tsx
@@ -62,8 +62,7 @@ const setupApp = async () => {
         }
         suite.run();
       });
-    }
-    catch (error) {
+    } catch (error) {
       sendMessage({ type: 'error', error });
     }
   }
diff --git a/tgui/packages/tgui-bench/index.js b/tgui/packages/tgui-bench/index.js
index ac3d8c9cce09..9f6aee20996d 100644
--- a/tgui/packages/tgui-bench/index.js
+++ b/tgui/packages/tgui-bench/index.js
@@ -27,7 +27,8 @@ const setup = async () => {
   assets += `</script>\n`;
 
   const publicDir = path.resolve(__dirname, '../../public');
-  const page = fs.readFileSync(path.join(publicDir, 'tgui.html'), 'utf-8')
+  const page = fs
+    .readFileSync(path.join(publicDir, 'tgui.html'), 'utf-8')
     .replace('<!-- tgui:assets -->\n', assets);
 
   server.register(require('fastify-static'), {
@@ -67,8 +68,7 @@ const setup = async () => {
 
   try {
     await server.listen(3002, '0.0.0.0');
-  }
-  catch (err) {
+  } catch (err) {
     console.error(err);
     process.exit(1);
   }
diff --git a/tgui/packages/tgui-bench/lib/benchmark.d.ts b/tgui/packages/tgui-bench/lib/benchmark.d.ts
index 7f3310005f77..3eac568d4184 100644
--- a/tgui/packages/tgui-bench/lib/benchmark.d.ts
+++ b/tgui/packages/tgui-bench/lib/benchmark.d.ts
@@ -27,7 +27,7 @@ declare class Benchmark {
   static reduce<T, K>(
     arr: T[],
     callback: (accumulator: K, value: T) => K,
-    thisArg?: any
+    thisArg?: any,
   ): K;
 
   static options: Benchmark.Options;
diff --git a/tgui/packages/tgui-bench/lib/benchmark.js b/tgui/packages/tgui-bench/lib/benchmark.js
index 1e76cec70870..335934833024 100644
--- a/tgui/packages/tgui-bench/lib/benchmark.js
+++ b/tgui/packages/tgui-bench/lib/benchmark.js
@@ -7,7 +7,7 @@
  * Manually stripped from useless junk by /tg/station13 maintainers.
  * Available under MIT license <https://mths.be/mit>
  */
-module.exports = (function() {
+module.exports = function () {
   'use strict';
 
   /** Used as a safe reference for `undefined` in pre ES5 environments. */
@@ -15,8 +15,8 @@ module.exports = (function() {
 
   /** Used to determine if values are of the language type Object. */
   var objectTypes = {
-    'function': true,
-    'object': true
+    function: true,
+    object: true,
   };
 
   /** Used as a reference to the global object. */
@@ -36,18 +36,33 @@ module.exports = (function() {
 
   /** Used to assign default `context` object properties. */
   var contextProps = [
-    'Array', 'Date', 'Function', 'Math', 'Object', 'RegExp', 'String', '_',
-    'clearTimeout', 'chrome', 'chromium', 'document', 'navigator', 'phantom',
-    'platform', 'process', 'runtime', 'setTimeout'
+    'Array',
+    'Date',
+    'Function',
+    'Math',
+    'Object',
+    'RegExp',
+    'String',
+    '_',
+    'clearTimeout',
+    'chrome',
+    'chromium',
+    'document',
+    'navigator',
+    'phantom',
+    'platform',
+    'process',
+    'runtime',
+    'setTimeout',
   ];
 
   /** Used to avoid hz of Infinity. */
   var divisors = {
-    '1': 4096,
-    '2': 512,
-    '3': 64,
-    '4': 8,
-    '5': 0
+    1: 4096,
+    2: 512,
+    3: 64,
+    4: 8,
+    5: 0,
   };
 
   /**
@@ -55,12 +70,37 @@ module.exports = (function() {
    * For more info see http://www.itl.nist.gov/div898/handbook/eda/section3/eda3672.htm.
    */
   var tTable = {
-    '1':  12.706, '2':  4.303, '3':  3.182, '4':  2.776, '5':  2.571, '6':  2.447,
-    '7':  2.365,  '8':  2.306, '9':  2.262, '10': 2.228, '11': 2.201, '12': 2.179,
-    '13': 2.16,   '14': 2.145, '15': 2.131, '16': 2.12,  '17': 2.11,  '18': 2.101,
-    '19': 2.093,  '20': 2.086, '21': 2.08,  '22': 2.074, '23': 2.069, '24': 2.064,
-    '25': 2.06,   '26': 2.056, '27': 2.052, '28': 2.048, '29': 2.045, '30': 2.042,
-    'infinity': 1.96
+    1: 12.706,
+    2: 4.303,
+    3: 3.182,
+    4: 2.776,
+    5: 2.571,
+    6: 2.447,
+    7: 2.365,
+    8: 2.306,
+    9: 2.262,
+    10: 2.228,
+    11: 2.201,
+    12: 2.179,
+    13: 2.16,
+    14: 2.145,
+    15: 2.131,
+    16: 2.12,
+    17: 2.11,
+    18: 2.101,
+    19: 2.093,
+    20: 2.086,
+    21: 2.08,
+    22: 2.074,
+    23: 2.069,
+    24: 2.064,
+    25: 2.06,
+    26: 2.056,
+    27: 2.052,
+    28: 2.048,
+    29: 2.045,
+    30: 2.042,
+    infinity: 1.96,
   };
 
   /**
@@ -68,32 +108,64 @@ module.exports = (function() {
    * For more info see http://www.saburchill.com/IBbiology/stats/003.html.
    */
   var uTable = {
-    '5':  [0, 1, 2],
-    '6':  [1, 2, 3, 5],
-    '7':  [1, 3, 5, 6, 8],
-    '8':  [2, 4, 6, 8, 10, 13],
-    '9':  [2, 4, 7, 10, 12, 15, 17],
-    '10': [3, 5, 8, 11, 14, 17, 20, 23],
-    '11': [3, 6, 9, 13, 16, 19, 23, 26, 30],
-    '12': [4, 7, 11, 14, 18, 22, 26, 29, 33, 37],
-    '13': [4, 8, 12, 16, 20, 24, 28, 33, 37, 41, 45],
-    '14': [5, 9, 13, 17, 22, 26, 31, 36, 40, 45, 50, 55],
-    '15': [5, 10, 14, 19, 24, 29, 34, 39, 44, 49, 54, 59, 64],
-    '16': [6, 11, 15, 21, 26, 31, 37, 42, 47, 53, 59, 64, 70, 75],
-    '17': [6, 11, 17, 22, 28, 34, 39, 45, 51, 57, 63, 67, 75, 81, 87],
-    '18': [7, 12, 18, 24, 30, 36, 42, 48, 55, 61, 67, 74, 80, 86, 93, 99],
-    '19': [7, 13, 19, 25, 32, 38, 45, 52, 58, 65, 72, 78, 85, 92, 99, 106, 113],
-    '20': [8, 14, 20, 27, 34, 41, 48, 55, 62, 69, 76, 83, 90, 98, 105, 112, 119, 127],
-    '21': [8, 15, 22, 29, 36, 43, 50, 58, 65, 73, 80, 88, 96, 103, 111, 119, 126, 134, 142],
-    '22': [9, 16, 23, 30, 38, 45, 53, 61, 69, 77, 85, 93, 101, 109, 117, 125, 133, 141, 150, 158],
-    '23': [9, 17, 24, 32, 40, 48, 56, 64, 73, 81, 89, 98, 106, 115, 123, 132, 140, 149, 157, 166, 175],
-    '24': [10, 17, 25, 33, 42, 50, 59, 67, 76, 85, 94, 102, 111, 120, 129, 138, 147, 156, 165, 174, 183, 192],
-    '25': [10, 18, 27, 35, 44, 53, 62, 71, 80, 89, 98, 107, 117, 126, 135, 145, 154, 163, 173, 182, 192, 201, 211],
-    '26': [11, 19, 28, 37, 46, 55, 64, 74, 83, 93, 102, 112, 122, 132, 141, 151, 161, 171, 181, 191, 200, 210, 220, 230],
-    '27': [11, 20, 29, 38, 48, 57, 67, 77, 87, 97, 107, 118, 125, 138, 147, 158, 168, 178, 188, 199, 209, 219, 230, 240, 250],
-    '28': [12, 21, 30, 40, 50, 60, 70, 80, 90, 101, 111, 122, 132, 143, 154, 164, 175, 186, 196, 207, 218, 228, 239, 250, 261, 272],
-    '29': [13, 22, 32, 42, 52, 62, 73, 83, 94, 105, 116, 127, 138, 149, 160, 171, 182, 193, 204, 215, 226, 238, 249, 260, 271, 282, 294],
-    '30': [13, 23, 33, 43, 54, 65, 76, 87, 98, 109, 120, 131, 143, 154, 166, 177, 189, 200, 212, 223, 235, 247, 258, 270, 282, 293, 305, 317]
+    5: [0, 1, 2],
+    6: [1, 2, 3, 5],
+    7: [1, 3, 5, 6, 8],
+    8: [2, 4, 6, 8, 10, 13],
+    9: [2, 4, 7, 10, 12, 15, 17],
+    10: [3, 5, 8, 11, 14, 17, 20, 23],
+    11: [3, 6, 9, 13, 16, 19, 23, 26, 30],
+    12: [4, 7, 11, 14, 18, 22, 26, 29, 33, 37],
+    13: [4, 8, 12, 16, 20, 24, 28, 33, 37, 41, 45],
+    14: [5, 9, 13, 17, 22, 26, 31, 36, 40, 45, 50, 55],
+    15: [5, 10, 14, 19, 24, 29, 34, 39, 44, 49, 54, 59, 64],
+    16: [6, 11, 15, 21, 26, 31, 37, 42, 47, 53, 59, 64, 70, 75],
+    17: [6, 11, 17, 22, 28, 34, 39, 45, 51, 57, 63, 67, 75, 81, 87],
+    18: [7, 12, 18, 24, 30, 36, 42, 48, 55, 61, 67, 74, 80, 86, 93, 99],
+    19: [7, 13, 19, 25, 32, 38, 45, 52, 58, 65, 72, 78, 85, 92, 99, 106, 113],
+    20: [
+      8, 14, 20, 27, 34, 41, 48, 55, 62, 69, 76, 83, 90, 98, 105, 112, 119, 127,
+    ],
+    21: [
+      8, 15, 22, 29, 36, 43, 50, 58, 65, 73, 80, 88, 96, 103, 111, 119, 126,
+      134, 142,
+    ],
+    22: [
+      9, 16, 23, 30, 38, 45, 53, 61, 69, 77, 85, 93, 101, 109, 117, 125, 133,
+      141, 150, 158,
+    ],
+    23: [
+      9, 17, 24, 32, 40, 48, 56, 64, 73, 81, 89, 98, 106, 115, 123, 132, 140,
+      149, 157, 166, 175,
+    ],
+    24: [
+      10, 17, 25, 33, 42, 50, 59, 67, 76, 85, 94, 102, 111, 120, 129, 138, 147,
+      156, 165, 174, 183, 192,
+    ],
+    25: [
+      10, 18, 27, 35, 44, 53, 62, 71, 80, 89, 98, 107, 117, 126, 135, 145, 154,
+      163, 173, 182, 192, 201, 211,
+    ],
+    26: [
+      11, 19, 28, 37, 46, 55, 64, 74, 83, 93, 102, 112, 122, 132, 141, 151, 161,
+      171, 181, 191, 200, 210, 220, 230,
+    ],
+    27: [
+      11, 20, 29, 38, 48, 57, 67, 77, 87, 97, 107, 118, 125, 138, 147, 158, 168,
+      178, 188, 199, 209, 219, 230, 240, 250,
+    ],
+    28: [
+      12, 21, 30, 40, 50, 60, 70, 80, 90, 101, 111, 122, 132, 143, 154, 164,
+      175, 186, 196, 207, 218, 228, 239, 250, 261, 272,
+    ],
+    29: [
+      13, 22, 32, 42, 52, 62, 73, 83, 94, 105, 116, 127, 138, 149, 160, 171,
+      182, 193, 204, 215, 226, 238, 249, 260, 271, 282, 294,
+    ],
+    30: [
+      13, 23, 33, 43, 54, 65, 76, 87, 98, 109, 120, 131, 143, 154, 166, 177,
+      189, 200, 212, 223, 235, 247, 258, 270, 282, 293, 305, 317,
+    ],
   };
 
   /*--------------------------------------------------------------------------*/
@@ -108,7 +180,7 @@ module.exports = (function() {
    */
   function runInContext(context) {
     // Exit early if unable to acquire lodash.
-    var _ = context && context._ || require('lodash') || root._;
+    var _ = (context && context._) || require('lodash') || root._;
     if (!_) {
       Benchmark.runInContext = runInContext;
       return Benchmark;
@@ -117,36 +189,38 @@ module.exports = (function() {
     // after built-in constructors like `Object`, for the creation of literals.
     // ES5 clears this up by stating that literals must use built-in constructors.
     // See http://es5.github.io/#x11.1.5.
-    context = context ? _.defaults(root.Object(), context, _.pick(root, contextProps)) : root;
+    context = context
+      ? _.defaults(root.Object(), context, _.pick(root, contextProps))
+      : root;
 
     /** Native constructor references. */
     var Array = context.Array,
-        Date = context.Date,
-        Function = context.Function,
-        Math = context.Math,
-        Object = context.Object,
-        RegExp = context.RegExp,
-        String = context.String;
+      Date = context.Date,
+      Function = context.Function,
+      Math = context.Math,
+      Object = context.Object,
+      RegExp = context.RegExp,
+      String = context.String;
 
     /** Used for `Array` and `Object` method references. */
     var arrayRef = [],
-        objectProto = Object.prototype;
+      objectProto = Object.prototype;
 
     /** Native method shortcuts. */
     var abs = Math.abs,
-        clearTimeout = context.clearTimeout,
-        floor = Math.floor,
-        log = Math.log,
-        max = Math.max,
-        min = Math.min,
-        pow = Math.pow,
-        push = arrayRef.push,
-        setTimeout = context.setTimeout,
-        shift = arrayRef.shift,
-        slice = arrayRef.slice,
-        sqrt = Math.sqrt,
-        toString = objectProto.toString,
-        unshift = arrayRef.unshift;
+      clearTimeout = context.clearTimeout,
+      floor = Math.floor,
+      log = Math.log,
+      max = Math.max,
+      min = Math.min,
+      pow = Math.pow,
+      push = arrayRef.push,
+      setTimeout = context.setTimeout,
+      shift = arrayRef.shift,
+      slice = arrayRef.slice,
+      sqrt = Math.sqrt,
+      toString = objectProto.toString,
+      unshift = arrayRef.unshift;
 
     /** Detect DOM document object. */
     var doc = isHostType(context, 'document') && context.document;
@@ -172,15 +246,17 @@ module.exports = (function() {
      */
     var support = {};
 
-    (function() {
-
+    (function () {
       /**
        * Detect if running in a browser environment.
        *
        * @memberOf Benchmark.support
        * @type boolean
        */
-      support.browser = doc && isHostType(context, 'navigator') && !isHostType(context, 'phantom');
+      support.browser =
+        doc &&
+        isHostType(context, 'navigator') &&
+        !isHostType(context, 'phantom');
 
       /**
        * Detect if the Timers API exists.
@@ -188,7 +264,9 @@ module.exports = (function() {
        * @memberOf Benchmark.support
        * @type boolean
        */
-      support.timeout = isHostType(context, 'setTimeout') && isHostType(context, 'clearTimeout');
+      support.timeout =
+        isHostType(context, 'setTimeout') &&
+        isHostType(context, 'clearTimeout');
 
       /**
        * Detect if function decompilation is support.
@@ -202,15 +280,22 @@ module.exports = (function() {
         // See http://webk.it/11609 for more details.
         // Firefox 3.6 and Opera 9.25 strip grouping parentheses from `Function#toString` results.
         // See http://bugzil.la/559438 for more details.
-        support.decompilation = Function(
-          ('return (' + (function(x) { return { 'x': '' + (1 + x) + '', 'y': 0 }; }) + ')')
-          // Avoid issues with code added by Istanbul.
-          .replace(/__cov__[^;]+;/g, '')
-        )()(0).x === '1';
-      } catch(e) {
+        support.decompilation =
+          Function(
+            (
+              'return (' +
+              function (x) {
+                return { x: '' + (1 + x) + '', y: 0 };
+              } +
+              ')'
+            )
+              // Avoid issues with code added by Istanbul.
+              .replace(/__cov__[^;]+;/g, ''),
+          )()(0).x === '1';
+      } catch (e) {
         support.decompilation = false;
       }
-    }());
+    })();
 
     /**
      * Timer object used by `clock()` and `Deferred#resolve`.
@@ -219,7 +304,6 @@ module.exports = (function() {
      * @type Object
      */
     var timer = {
-
       /**
        * The timer namespace object or constructor.
        *
@@ -227,7 +311,7 @@ module.exports = (function() {
        * @memberOf timer
        * @type {Function|Object}
        */
-      'ns': Date,
+      ns: Date,
 
       /**
        * Starts the deferred timer.
@@ -236,7 +320,7 @@ module.exports = (function() {
        * @memberOf timer
        * @param {Object} deferred The deferred instance.
        */
-      'start': null, // Lazy defined in `clock()`.
+      start: null, // Lazy defined in `clock()`.
 
       /**
        * Stops the deferred timer.
@@ -245,7 +329,7 @@ module.exports = (function() {
        * @memberOf timer
        * @param {Object} deferred The deferred instance.
        */
-      'stop': null // Lazy defined in `clock()`.
+      stop: null, // Lazy defined in `clock()`.
     };
 
     /*------------------------------------------------------------------------*/
@@ -342,19 +426,16 @@ module.exports = (function() {
       if (_.isPlainObject(name)) {
         // 1 argument (options).
         options = name;
-      }
-      else if (_.isFunction(name)) {
+      } else if (_.isFunction(name)) {
         // 2 arguments (fn, options).
         options = fn;
         fn = name;
-      }
-      else if (_.isPlainObject(fn)) {
+      } else if (_.isPlainObject(fn)) {
         // 2 arguments (name, options).
         options = fn;
         fn = null;
         bench.name = name;
-      }
-      else {
+      } else {
         // 3 arguments (name, fn [, options]).
         bench.name = name;
       }
@@ -395,8 +476,12 @@ module.exports = (function() {
       if (type instanceof Event) {
         return type;
       }
-      return (event instanceof Event)
-        ? _.assign(event, { 'timeStamp': _.now() }, typeof type == 'string' ? { 'type': type } : type)
+      return event instanceof Event
+        ? _.assign(
+            event,
+            { timeStamp: _.now() },
+            typeof type == 'string' ? { type: type } : type,
+          )
         : new Event(type);
     }
 
@@ -470,9 +555,9 @@ module.exports = (function() {
      * @param {*} value The value to clone.
      * @returns {*} The cloned value.
      */
-    var cloneDeep = _.partial(_.cloneDeepWith, _, function(value) {
+    var cloneDeep = _.partial(_.cloneDeepWith, _, function (value) {
       // Only clone primitives, arrays, and plain objects.
-      return (_.isObject(value) && !_.isArray(value) && !_.isPlainObject(value))
+      return _.isObject(value) && !_.isArray(value) && !_.isPlainObject(value)
         ? value
         : undefined;
     });
@@ -487,19 +572,31 @@ module.exports = (function() {
      */
     function createFunction() {
       // Lazy define.
-      createFunction = function(args, body) {
+      createFunction = function (args, body) {
         var result,
-            anchor = freeDefine ? freeDefine.amd : Benchmark,
-            prop = uid + 'createFunction';
-
-        runScript((freeDefine ? 'define.amd.' : 'Benchmark.') + prop + '=function(' + args + '){' + body + '}');
+          anchor = freeDefine ? freeDefine.amd : Benchmark,
+          prop = uid + 'createFunction';
+
+        runScript(
+          (freeDefine ? 'define.amd.' : 'Benchmark.') +
+            prop +
+            '=function(' +
+            args +
+            '){' +
+            body +
+            '}',
+        );
         result = anchor[prop];
         delete anchor[prop];
         return result;
       };
       // Fix JaegerMonkey bug.
       // For more information see http://bugzil.la/639720.
-      createFunction = support.browser && (createFunction('', 'return"' + uid + '"') || _.noop)() == uid ? createFunction : Function;
+      createFunction =
+        support.browser &&
+        (createFunction('', 'return"' + uid + '"') || _.noop)() == uid
+          ? createFunction
+          : Function;
       return createFunction.apply(null, arguments);
     }
 
@@ -533,8 +630,11 @@ module.exports = (function() {
      * @returns {string} The argument name.
      */
     function getFirstArgument(fn) {
-      return (!_.has(fn, 'toString') &&
-        (/^[\s(]*function[^(]*\(([^\s,)]+)/.exec(fn) || 0)[1]) || '';
+      return (
+        (!_.has(fn, 'toString') &&
+          (/^[\s(]*function[^(]*\(([^\s,)]+)/.exec(fn) || 0)[1]) ||
+        ''
+      );
     }
 
     /**
@@ -545,9 +645,11 @@ module.exports = (function() {
      * @returns {number} The mean.
      */
     function getMean(sample) {
-      return (_.reduce(sample, function(sum, x) {
-        return sum + x;
-      }) / sample.length) || 0;
+      return (
+        _.reduce(sample, function (sum, x) {
+          return sum + x;
+        }) / sample.length || 0
+      );
     }
 
     /**
@@ -569,7 +671,9 @@ module.exports = (function() {
       result = (result || '').replace(/^\s+|\s+$/g, '');
 
       // Detect strings containing only the "use strict" directive.
-      return /^(?:\/\*+[\w\W]*?\*\/|\/\/.*?[\n\r\u2028\u2029]|\s)*(["'])use strict\1;?$/.test(result)
+      return /^(?:\/\*+[\w\W]*?\*\/|\/\/.*?[\n\r\u2028\u2029]|\s)*(["'])use strict\1;?$/.test(
+        result,
+      )
         ? ''
         : result;
     }
@@ -601,7 +705,9 @@ module.exports = (function() {
         return false;
       }
       var type = typeof object[property];
-      return !rePrimitive.test(type) && (type != 'object' || !!object[property]);
+      return (
+        !rePrimitive.test(type) && (type != 'object' || !!object[property])
+      );
     }
 
     /**
@@ -612,7 +718,10 @@ module.exports = (function() {
      * @returns {boolean} Returns `true` if the value can be coerced, else `false`.
      */
     function isStringable(value) {
-      return _.isString(value) || (_.has(value, 'toString') && _.isFunction(value.toString));
+      return (
+        _.isString(value) ||
+        (_.has(value, 'toString') && _.isFunction(value.toString))
+      );
     }
 
     /**
@@ -623,11 +732,15 @@ module.exports = (function() {
      */
     function runScript(code) {
       var anchor = freeDefine ? define.amd : Benchmark,
-          script = doc.createElement('script'),
-          sibling = doc.getElementsByTagName('script')[0],
-          parent = sibling.parentNode,
-          prop = uid + 'runScript',
-          prefix = '(' + (freeDefine ? 'define.amd.' : 'Benchmark.') + prop + '||function(){})();';
+        script = doc.createElement('script'),
+        sibling = doc.getElementsByTagName('script')[0],
+        parent = sibling.parentNode,
+        prop = uid + 'runScript',
+        prefix =
+          '(' +
+          (freeDefine ? 'define.amd.' : 'Benchmark.') +
+          prop +
+          '||function(){})();';
 
       // Firefox 2.0.0.2 cannot use script injection as intended because it executes
       // asynchronously, but that's OK because script injection is only used to avoid
@@ -636,8 +749,10 @@ module.exports = (function() {
         // Remove the inserted script *before* running the code to avoid differences
         // in the expected script element count/order of the document.
         script.appendChild(doc.createTextNode(prefix + code));
-        anchor[prop] = function() { destroyElement(script); };
-      } catch(e) {
+        anchor[prop] = function () {
+          destroyElement(script);
+        };
+      } catch (e) {
         parent = parent.cloneNode(false);
         sibling = null;
         script.text = code;
@@ -654,13 +769,17 @@ module.exports = (function() {
      * @param {Object} [options={}] Options object.
      */
     function setOptions(object, options) {
-      options = object.options = _.assign({}, cloneDeep(object.constructor.options), cloneDeep(options));
+      options = object.options = _.assign(
+        {},
+        cloneDeep(object.constructor.options),
+        cloneDeep(options),
+      );
 
-      _.forOwn(options, function(value, key) {
+      _.forOwn(options, function (value, key) {
         if (value != null) {
           // Add event listeners.
           if (/^on[A-Z]/.test(key)) {
-            _.each(key.split(' '), function(key) {
+            _.each(key.split(' '), function (key) {
               object.on(key.slice(2).toLowerCase(), value);
             });
           } else if (!_.has(object, key)) {
@@ -679,22 +798,22 @@ module.exports = (function() {
      */
     function resolve() {
       var deferred = this,
-          clone = deferred.benchmark,
-          bench = clone._original;
+        clone = deferred.benchmark,
+        bench = clone._original;
 
       if (bench.aborted) {
         // cycle() -> clone cycle/complete event -> compute()'s invoked bench.run() cycle/complete.
         deferred.teardown();
         clone.running = false;
         cycle(deferred);
-      }
-      else if (++deferred.cycles < clone.count) {
+      } else if (++deferred.cycles < clone.count) {
         clone.compiled.call(deferred, context, timer);
-      }
-      else {
+      } else {
         timer.stop(deferred);
         deferred.teardown();
-        delay(clone, function() { cycle(deferred); });
+        delay(clone, function () {
+          cycle(deferred);
+        });
       }
     }
 
@@ -727,18 +846,21 @@ module.exports = (function() {
     function filter(array, callback) {
       if (callback === 'successful') {
         // Callback to exclude those that are errored, unrun, or have hz of Infinity.
-        callback = function(bench) {
+        callback = function (bench) {
           return bench.cycles && _.isFinite(bench.hz) && !bench.error;
         };
-      }
-      else if (callback === 'fastest' || callback === 'slowest') {
+      } else if (callback === 'fastest' || callback === 'slowest') {
         // Get successful, sort by period + margin of error, and filter fastest/slowest.
-        var result = filter(array, 'successful').sort(function(a, b) {
-          a = a.stats; b = b.stats;
-          return (a.mean + a.moe > b.mean + b.moe ? 1 : -1) * (callback === 'fastest' ? 1 : -1);
+        var result = filter(array, 'successful').sort(function (a, b) {
+          a = a.stats;
+          b = b.stats;
+          return (
+            (a.mean + a.moe > b.mean + b.moe ? 1 : -1) *
+            (callback === 'fastest' ? 1 : -1)
+          );
         });
 
-        return _.filter(result, function(bench) {
+        return _.filter(result, function (bench) {
           return result[0].compare(bench) == 0;
         });
       }
@@ -755,8 +877,10 @@ module.exports = (function() {
      */
     function formatNumber(number) {
       number = String(number).split('.');
-      return number[0].replace(/(?=(?:\d{3})+$)(?!\b)/g, ',') +
-        (number[1] ? '.' + number[1] : '');
+      return (
+        number[0].replace(/(?=(?:\d{3})+$)(?!\b)/g, ',') +
+        (number[1] ? '.' + number[1] : '')
+      );
     }
 
     /**
@@ -800,19 +924,19 @@ module.exports = (function() {
      */
     function invoke(benches, name) {
       var args,
-          bench,
-          queued,
-          index = -1,
-          eventProps = { 'currentTarget': benches },
-          options = { 'onStart': _.noop, 'onCycle': _.noop, 'onComplete': _.noop },
-          result = _.toArray(benches);
+        bench,
+        queued,
+        index = -1,
+        eventProps = { currentTarget: benches },
+        options = { onStart: _.noop, onCycle: _.noop, onComplete: _.noop },
+        result = _.toArray(benches);
 
       /**
        * Invokes the method of the current object and if synchronous, fetches the next.
        */
       function execute() {
         var listeners,
-            async = isAsync(bench);
+          async = isAsync(bench);
 
         if (async) {
           // Use `getNext` as the first listener.
@@ -821,7 +945,9 @@ module.exports = (function() {
           listeners.splice(0, 0, listeners.pop());
         }
         // Execute method.
-        result[index] = _.isFunction(bench && bench[name]) ? bench[name].apply(bench, args) : undefined;
+        result[index] = _.isFunction(bench && bench[name])
+          ? bench[name].apply(bench, args)
+          : undefined;
         // If synchronous return `true` until finished.
         return !async && getNext();
       }
@@ -831,8 +957,8 @@ module.exports = (function() {
        */
       function getNext(event) {
         var cycleEvent,
-            last = bench,
-            async = isAsync(last);
+          last = bench,
+          async = isAsync(last);
 
         if (async) {
           last.off('complete', getNext);
@@ -849,12 +975,10 @@ module.exports = (function() {
           bench = queued ? benches[0] : result[index];
           if (isAsync(bench)) {
             delay(bench, execute);
-          }
-          else if (async) {
+          } else if (async) {
             // Resume execution if previously asynchronous but now synchronous.
             while (execute()) {}
-          }
-          else {
+          } else {
             // Continue synchronous execution.
             return true;
           }
@@ -879,8 +1003,13 @@ module.exports = (function() {
       function isAsync(object) {
         // Avoid using `instanceof` here because of IE memory leak issues with host objects.
         var async = args[0] && args[0].async;
-        return name == 'run' && (object instanceof Benchmark) &&
-          ((async == null ? object.options.async : async) && support.timeout || object.defer);
+        return (
+          name == 'run' &&
+          object instanceof Benchmark &&
+          (((async == null ? object.options.async : async) &&
+            support.timeout) ||
+            object.defer)
+        );
       }
 
       /**
@@ -906,7 +1035,9 @@ module.exports = (function() {
         // 2 arguments (array, options).
         options = _.assign(options, name);
         name = options.name;
-        args = _.isArray(args = 'args' in options ? options.args : []) ? args : [args];
+        args = _.isArray((args = 'args' in options ? options.args : []))
+          ? args
+          : [args];
         queued = options.queued;
       }
       // Start iterating over the array.
@@ -918,7 +1049,7 @@ module.exports = (function() {
         options.onStart.call(benches, Event(eventProps));
 
         // End early if the suite was aborted in an "onStart" listener.
-        if (name == 'run' && (benches instanceof Suite) && benches.aborted) {
+        if (name == 'run' && benches instanceof Suite && benches.aborted) {
           // Emit "cycle" event.
           eventProps.type = 'cycle';
           options.onCycle.call(benches, Event(eventProps));
@@ -950,11 +1081,11 @@ module.exports = (function() {
      */
     function join(object, separator1, separator2) {
       var result = [],
-          length = (object = Object(object)).length,
-          arrayLike = length === length >>> 0;
+        length = (object = Object(object)).length,
+        arrayLike = length === length >>> 0;
 
       separator2 || (separator2 = ': ');
-      _.each(object, function(value, key) {
+      _.each(object, function (value, key) {
         result.push(arrayLike ? value : key + separator2 + value);
       });
       return result.join(separator1 || ',');
@@ -971,8 +1102,8 @@ module.exports = (function() {
      */
     function abortSuite() {
       var event,
-          suite = this,
-          resetting = calledBy.resetSuite;
+        suite = this,
+        resetting = calledBy.resetSuite;
 
       if (suite.running) {
         event = Event('abort');
@@ -1031,10 +1162,10 @@ module.exports = (function() {
      */
     function add(name, fn, options) {
       var suite = this,
-          bench = new Benchmark(name, fn, options),
-          event = Event({ 'type': 'add', 'target': bench });
+        bench = new Benchmark(name, fn, options),
+        event = Event({ type: 'add', target: bench });
 
-      if (suite.emit(event), !event.cancelled) {
+      if ((suite.emit(event), !event.cancelled)) {
         suite.push(bench);
       }
       return suite;
@@ -1050,14 +1181,15 @@ module.exports = (function() {
      */
     function cloneSuite(options) {
       var suite = this,
-          result = new suite.constructor(_.assign({}, suite.options, options));
+        result = new suite.constructor(_.assign({}, suite.options, options));
 
       // Copy own properties.
-      _.forOwn(suite, function(value, key) {
+      _.forOwn(suite, function (value, key) {
         if (!_.has(result, key)) {
-          result[key] = value && _.isFunction(value.clone)
-            ? value.clone()
-            : cloneDeep(value);
+          result[key] =
+            value && _.isFunction(value.clone)
+              ? value.clone()
+              : cloneDeep(value);
         }
       });
       return result;
@@ -1073,7 +1205,7 @@ module.exports = (function() {
      */
     function filterSuite(callback) {
       var suite = this,
-          result = new suite.constructor(suite.options);
+        result = new suite.constructor(suite.options);
 
       result.push.apply(result, filter(suite, callback));
       return result;
@@ -1088,8 +1220,8 @@ module.exports = (function() {
      */
     function resetSuite() {
       var event,
-          suite = this,
-          aborting = calledBy.abortSuite;
+        suite = this,
+        aborting = calledBy.abortSuite;
 
       if (suite.running && !aborting) {
         // No worries, `resetSuite()` is called within `abortSuite()`.
@@ -1098,8 +1230,10 @@ module.exports = (function() {
         delete calledBy.resetSuite;
       }
       // Reset if the state has changed.
-      else if ((suite.aborted || suite.running) &&
-          (suite.emit(event = Event('reset')), !event.cancelled)) {
+      else if (
+        (suite.aborted || suite.running) &&
+        (suite.emit((event = Event('reset'))), !event.cancelled)
+      ) {
         suite.aborted = suite.running = false;
         if (!aborting) {
           invoke(suite, 'reset');
@@ -1131,24 +1265,24 @@ module.exports = (function() {
       options || (options = {});
 
       invoke(suite, {
-        'name': 'run',
-        'args': options,
-        'queued': options.queued,
-        'onStart': function(event) {
+        name: 'run',
+        args: options,
+        queued: options.queued,
+        onStart: function (event) {
           suite.emit(event);
         },
-        'onCycle': function(event) {
+        onCycle: function (event) {
           var bench = event.target;
           if (bench.error) {
-            suite.emit({ 'type': 'error', 'target': bench });
+            suite.emit({ type: 'error', target: bench });
           }
           suite.emit(event);
           event.aborted = suite.aborted;
         },
-        'onComplete': function(event) {
+        onComplete: function (event) {
           suite.running = false;
           suite.emit(event);
-        }
+        },
       });
       return suite;
     }
@@ -1165,17 +1299,20 @@ module.exports = (function() {
      */
     function emit(type) {
       var listeners,
-          object = this,
-          event = Event(type),
-          events = object.events,
-          args = (arguments[0] = event, arguments);
+        object = this,
+        event = Event(type),
+        events = object.events,
+        args = ((arguments[0] = event), arguments);
 
       event.currentTarget || (event.currentTarget = object);
       event.target || (event.target = object);
       delete event.result;
 
-      if (events && (listeners = _.has(events, event.type) && events[event.type])) {
-        _.each(listeners.slice(), function(listener) {
+      if (
+        events &&
+        (listeners = _.has(events, event.type) && events[event.type])
+      ) {
+        _.each(listeners.slice(), function (listener) {
           if ((event.result = listener.apply(object, args)) === false) {
             event.cancelled = true;
           }
@@ -1195,7 +1332,7 @@ module.exports = (function() {
      */
     function listeners(type) {
       var object = this,
-          events = object.events || (object.events = {});
+        events = object.events || (object.events = {});
 
       return _.has(events, type) ? events[type] : (events[type] = []);
     }
@@ -1228,12 +1365,12 @@ module.exports = (function() {
      */
     function off(type, listener) {
       var object = this,
-          events = object.events;
+        events = object.events;
 
       if (!events) {
         return object;
       }
-      _.each(type ? type.split(' ') : events, function(listeners, type) {
+      _.each(type ? type.split(' ') : events, function (listeners, type) {
         var index;
         if (typeof listeners == 'string') {
           type = listeners;
@@ -1270,13 +1407,12 @@ module.exports = (function() {
      */
     function on(type, listener) {
       var object = this,
-          events = object.events || (object.events = {});
+        events = object.events || (object.events = {});
 
-      _.each(type.split(' '), function(type) {
-        (_.has(events, type)
-          ? events[type]
-          : (events[type] = [])
-        ).push(listener);
+      _.each(type.split(' '), function (type) {
+        (_.has(events, type) ? events[type] : (events[type] = [])).push(
+          listener,
+        );
       });
       return object;
     }
@@ -1291,8 +1427,8 @@ module.exports = (function() {
      */
     function abort() {
       var event,
-          bench = this,
-          resetting = calledBy.reset;
+        bench = this,
+        resetting = calledBy.reset;
 
       if (bench.running) {
         event = Event('abort');
@@ -1330,13 +1466,17 @@ module.exports = (function() {
      */
     function clone(options) {
       var bench = this,
-          result = new bench.constructor(_.assign({}, bench, options));
+        result = new bench.constructor(_.assign({}, bench, options));
 
       // Correct the `options` object.
-      result.options = _.assign({}, cloneDeep(bench.options), cloneDeep(options));
+      result.options = _.assign(
+        {},
+        cloneDeep(bench.options),
+        cloneDeep(options),
+      );
 
       // Copy own custom properties.
-      _.forOwn(bench, function(value, key) {
+      _.forOwn(bench, function (value, key) {
         if (!_.has(result, key)) {
           result[key] = cloneDeep(value);
         }
@@ -1360,31 +1500,42 @@ module.exports = (function() {
         return 0;
       }
       var critical,
-          zStat,
-          sample1 = bench.stats.sample,
-          sample2 = other.stats.sample,
-          size1 = sample1.length,
-          size2 = sample2.length,
-          maxSize = max(size1, size2),
-          minSize = min(size1, size2),
-          u1 = getU(sample1, sample2),
-          u2 = getU(sample2, sample1),
-          u = min(u1, u2);
+        zStat,
+        sample1 = bench.stats.sample,
+        sample2 = other.stats.sample,
+        size1 = sample1.length,
+        size2 = sample2.length,
+        maxSize = max(size1, size2),
+        minSize = min(size1, size2),
+        u1 = getU(sample1, sample2),
+        u2 = getU(sample2, sample1),
+        u = min(u1, u2);
 
       function getScore(xA, sampleB) {
-        return _.reduce(sampleB, function(total, xB) {
-          return total + (xB > xA ? 0 : xB < xA ? 1 : 0.5);
-        }, 0);
+        return _.reduce(
+          sampleB,
+          function (total, xB) {
+            return total + (xB > xA ? 0 : xB < xA ? 1 : 0.5);
+          },
+          0,
+        );
       }
 
       function getU(sampleA, sampleB) {
-        return _.reduce(sampleA, function(total, xA) {
-          return total + getScore(xA, sampleB);
-        }, 0);
+        return _.reduce(
+          sampleA,
+          function (total, xA) {
+            return total + getScore(xA, sampleB);
+          },
+          0,
+        );
       }
 
       function getZ(u) {
-        return (u - ((size1 * size2) / 2)) / sqrt((size1 * size2 * (size1 + size2 + 1)) / 12);
+        return (
+          (u - (size1 * size2) / 2) /
+          sqrt((size1 * size2 * (size1 + size2 + 1)) / 12)
+        );
       }
       // Reject the null hypothesis the two samples come from the
       // same population (i.e. have the same median) if...
@@ -1415,22 +1566,26 @@ module.exports = (function() {
         return bench;
       }
       var event,
-          index = 0,
-          changes = [],
-          queue = [];
+        index = 0,
+        changes = [],
+        queue = [];
 
       // A non-recursive solution to check if properties have changed.
       // For more information see http://www.jslab.dk/articles/non.recursive.preorder.traversal.part4.
       var data = {
-        'destination': bench,
-        'source': _.assign({}, cloneDeep(bench.constructor.prototype), cloneDeep(bench.options))
+        destination: bench,
+        source: _.assign(
+          {},
+          cloneDeep(bench.constructor.prototype),
+          cloneDeep(bench.options),
+        ),
       };
 
       do {
-        _.forOwn(data.source, function(value, key) {
+        _.forOwn(data.source, function (value, key) {
           var changed,
-              destination = data.destination,
-              currValue = destination[key];
+            destination = data.destination,
+            currValue = destination[key];
 
           // Skip pseudo private properties like `_timerId` which could be a
           // Java object in environments like RingoJS.
@@ -1455,21 +1610,30 @@ module.exports = (function() {
             }
             // Register a changed object.
             if (changed) {
-              changes.push({ 'destination': destination, 'key': key, 'value': currValue });
+              changes.push({
+                destination: destination,
+                key: key,
+                value: currValue,
+              });
             }
-            queue.push({ 'destination': currValue, 'source': value });
+            queue.push({ destination: currValue, source: value });
           }
           // Register a changed primitive.
-          else if (value !== currValue && !(value == null || _.isFunction(value))) {
-            changes.push({ 'destination': destination, 'key': key, 'value': value });
+          else if (
+            value !== currValue &&
+            !(value == null || _.isFunction(value))
+          ) {
+            changes.push({ destination: destination, key: key, value: value });
           }
         });
-      }
-      while ((data = queue[index++]));
+      } while ((data = queue[index++]));
 
       // If changed emit the `reset` event and if it isn't cancelled reset the benchmark.
-      if (changes.length && (bench.emit(event = Event('reset')), !event.cancelled)) {
-        _.each(changes, function(data) {
+      if (
+        changes.length &&
+        (bench.emit((event = Event('reset'))), !event.cancelled)
+      ) {
+        _.each(changes, function (data) {
           data.destination[data.key] = data.value;
         });
       }
@@ -1485,13 +1649,13 @@ module.exports = (function() {
      */
     function toStringBench() {
       var bench = this,
-          error = bench.error,
-          hz = bench.hz,
-          id = bench.id,
-          stats = bench.stats,
-          size = stats.sample.length,
-          pm = '\xb1',
-          result = bench.name || (_.isNaN(id) ? id : '<Test #' + id + '>');
+        error = bench.error,
+        hz = bench.hz,
+        id = bench.id,
+        stats = bench.stats,
+        size = stats.sample.length,
+        pm = '\xb1',
+        result = bench.name || (_.isNaN(id) ? id : '<Test #' + id + '>');
 
       if (error) {
         var errorStr;
@@ -1501,13 +1665,23 @@ module.exports = (function() {
           errorStr = join(error);
         } else {
           // Error#name and Error#message properties are non-enumerable.
-          errorStr = join(_.assign({ 'name': error.name, 'message': error.message }, error));
+          errorStr = join(
+            _.assign({ name: error.name, message: error.message }, error),
+          );
         }
         result += ': ' + errorStr;
-      }
-      else {
-        result += ' x ' + formatNumber(hz.toFixed(hz < 100 ? 2 : 0)) + ' ops/sec ' + pm +
-          stats.rme.toFixed(2) + '% (' + size + ' run' + (size == 1 ? '' : 's') + ' sampled)';
+      } else {
+        result +=
+          ' x ' +
+          formatNumber(hz.toFixed(hz < 100 ? 2 : 0)) +
+          ' ops/sec ' +
+          pm +
+          stats.rme.toFixed(2) +
+          '% (' +
+          size +
+          ' run' +
+          (size == 1 ? '' : 's') +
+          ' sampled)';
       }
       return result;
     }
@@ -1523,11 +1697,11 @@ module.exports = (function() {
      */
     function clock() {
       var options = Benchmark.options,
-          templateData = {},
-          timers = [{ 'ns': timer.ns, 'res': max(0.0015, getRes('ms')), 'unit': 'ms' }];
+        templateData = {},
+        timers = [{ ns: timer.ns, res: max(0.0015, getRes('ms')), unit: 'ms' }];
 
       // Lazy define for hi-res timers.
-      clock = function(clone) {
+      clock = function (clone) {
         var deferred;
 
         if (clone instanceof Deferred) {
@@ -1535,15 +1709,21 @@ module.exports = (function() {
           clone = deferred.benchmark;
         }
         var bench = clone._original,
-            stringable = isStringable(bench.fn),
-            count = bench.count = clone.count,
-            decompilable = stringable || (support.decompilation && (clone.setup !== _.noop || clone.teardown !== _.noop)),
-            id = bench.id,
-            name = bench.name || (typeof id == 'number' ? '<Test #' + id + '>' : id),
-            result = 0;
+          stringable = isStringable(bench.fn),
+          count = (bench.count = clone.count),
+          decompilable =
+            stringable ||
+            (support.decompilation &&
+              (clone.setup !== _.noop || clone.teardown !== _.noop)),
+          id = bench.id,
+          name =
+            bench.name || (typeof id == 'number' ? '<Test #' + id + '>' : id),
+          result = 0;
 
         // Init `minTime` if needed.
-        clone.minTime = bench.minTime || (bench.minTime = bench.options.minTime = options.minTime);
+        clone.minTime =
+          bench.minTime ||
+          (bench.minTime = bench.options.minTime = options.minTime);
 
         // Compile in setup/teardown functions and the test loop.
         // Create a new compiled test, instead of using the cached `bench.compiled`,
@@ -1562,38 +1742,46 @@ module.exports = (function() {
             't#.start(d#);' +
             // and then execute `deferred.fn` and return a dummy object.
             '}d#.fn();return{uid:"${uid}"}'
-
           : 'var r#,s#,m#=this,f#=m#.fn,i#=m#.count,n#=t#.ns;${setup}\n${begin};' +
             'while(i#--){${fn}\n}${end};${teardown}\nreturn{elapsed:r#,uid:"${uid}"}';
 
-        var compiled = bench.compiled = clone.compiled = createCompiled(bench, decompilable, deferred, funcBody),
-            isEmpty = !(templateData.fn || stringable);
+        var compiled =
+            (bench.compiled =
+            clone.compiled =
+              createCompiled(bench, decompilable, deferred, funcBody)),
+          isEmpty = !(templateData.fn || stringable);
 
         try {
           if (isEmpty) {
             // Firefox may remove dead code from `Function#toString` results.
             // For more information see http://bugzil.la/536085.
-            throw new Error('The test "' + name + '" is empty. This may be the result of dead code removal.');
-          }
-          else if (!deferred) {
+            throw new Error(
+              'The test "' +
+                name +
+                '" is empty. This may be the result of dead code removal.',
+            );
+          } else if (!deferred) {
             // Pretest to determine if compiled code exits early, usually by a
             // rogue `return` statement, by checking for a return object with the uid.
             bench.count = 1;
-            compiled = decompilable && (compiled.call(bench, context, timer) || {}).uid == templateData.uid && compiled;
+            compiled =
+              decompilable &&
+              (compiled.call(bench, context, timer) || {}).uid ==
+                templateData.uid &&
+              compiled;
             bench.count = count;
           }
-        } catch(e) {
+        } catch (e) {
           compiled = null;
           clone.error = e || new Error(String(e));
           bench.count = count;
         }
         // Fallback when a test exits early or errors during pretest.
         if (!compiled && !deferred && !isEmpty) {
-          funcBody = (
-            stringable || (decompilable && !clone.error)
+          funcBody =
+            (stringable || (decompilable && !clone.error)
               ? 'function f#(){${fn}\n}var r#,s#,m#=this,i#=m#.count'
-              : 'var r#,s#,m#=this,f#=m#.fn,i#=m#.count'
-            ) +
+              : 'var r#,s#,m#=this,f#=m#.fn,i#=m#.count') +
             ',n#=t#.ns;${setup}\n${begin};m#.f#=f#;while(i#--){m#.f#()}${end};' +
             'delete m#.f#;${teardown}\nreturn{elapsed:r#}';
 
@@ -1605,8 +1793,7 @@ module.exports = (function() {
             compiled.call(bench, context, timer);
             bench.count = count;
             delete clone.error;
-          }
-          catch(e) {
+          } catch (e) {
             bench.count = count;
             if (!clone.error) {
               clone.error = e || new Error(String(e));
@@ -1615,7 +1802,10 @@ module.exports = (function() {
         }
         // If no errors run the full test loop.
         if (!clone.error) {
-          compiled = bench.compiled = clone.compiled = createCompiled(bench, decompilable, deferred, funcBody);
+          compiled =
+            bench.compiled =
+            clone.compiled =
+              createCompiled(bench, decompilable, deferred, funcBody);
           result = compiled.call(deferred || bench, context, timer).elapsed;
         }
         return result;
@@ -1628,65 +1818,68 @@ module.exports = (function() {
        */
       function createCompiled(bench, decompilable, deferred, body) {
         var fn = bench.fn,
-            fnArg = deferred ? getFirstArgument(fn) || 'deferred' : '';
+          fnArg = deferred ? getFirstArgument(fn) || 'deferred' : '';
 
         templateData.uid = uid + uidCounter++;
 
         _.assign(templateData, {
-          'setup': decompilable ? getSource(bench.setup) : interpolate('m#.setup()'),
-          'fn': decompilable ? getSource(fn) : interpolate('m#.fn(' + fnArg + ')'),
-          'fnArg': fnArg,
-          'teardown': decompilable ? getSource(bench.teardown) : interpolate('m#.teardown()')
+          setup: decompilable
+            ? getSource(bench.setup)
+            : interpolate('m#.setup()'),
+          fn: decompilable
+            ? getSource(fn)
+            : interpolate('m#.fn(' + fnArg + ')'),
+          fnArg: fnArg,
+          teardown: decompilable
+            ? getSource(bench.teardown)
+            : interpolate('m#.teardown()'),
         });
 
         // Use API of chosen timer.
         if (timer.unit == 'ns') {
           _.assign(templateData, {
-            'begin': interpolate('s#=n#()'),
-            'end': interpolate('r#=n#(s#);r#=r#[0]+(r#[1]/1e9)')
+            begin: interpolate('s#=n#()'),
+            end: interpolate('r#=n#(s#);r#=r#[0]+(r#[1]/1e9)'),
           });
-        }
-        else if (timer.unit == 'us') {
+        } else if (timer.unit == 'us') {
           if (timer.ns.stop) {
             _.assign(templateData, {
-              'begin': interpolate('s#=n#.start()'),
-              'end': interpolate('r#=n#.microseconds()/1e6')
+              begin: interpolate('s#=n#.start()'),
+              end: interpolate('r#=n#.microseconds()/1e6'),
             });
           } else {
             _.assign(templateData, {
-              'begin': interpolate('s#=n#()'),
-              'end': interpolate('r#=(n#()-s#)/1e6')
+              begin: interpolate('s#=n#()'),
+              end: interpolate('r#=(n#()-s#)/1e6'),
             });
           }
-        }
-        else if (timer.ns.now) {
+        } else if (timer.ns.now) {
           _.assign(templateData, {
-            'begin': interpolate('s#=n#.now()'),
-            'end': interpolate('r#=(n#.now()-s#)/1e3')
+            begin: interpolate('s#=n#.now()'),
+            end: interpolate('r#=(n#.now()-s#)/1e3'),
           });
-        }
-        else {
+        } else {
           _.assign(templateData, {
-            'begin': interpolate('s#=new n#().getTime()'),
-            'end': interpolate('r#=(new n#().getTime()-s#)/1e3')
+            begin: interpolate('s#=new n#().getTime()'),
+            end: interpolate('r#=(new n#().getTime()-s#)/1e3'),
           });
         }
         // Define `timer` methods.
         timer.start = createFunction(
           interpolate('o#'),
-          interpolate('var n#=this.ns,${begin};o#.elapsed=0;o#.timeStamp=s#')
+          interpolate('var n#=this.ns,${begin};o#.elapsed=0;o#.timeStamp=s#'),
         );
 
         timer.stop = createFunction(
           interpolate('o#'),
-          interpolate('var n#=this.ns,s#=o#.timeStamp,${end};o#.elapsed=r#')
+          interpolate('var n#=this.ns,s#=o#.timeStamp,${end};o#.elapsed=r#'),
         );
 
         // Create compiled test.
         return createFunction(
           interpolate('window,t#'),
           'var global = window, clearTimeout = global.clearTimeout, setTimeout = global.setTimeout;\n' +
-          interpolate(body)
+            interpolate(body),
         );
       }
 
@@ -1695,11 +1888,11 @@ module.exports = (function() {
        */
       function getRes(unit) {
         var measured,
-            begin,
-            count = 30,
-            divisor = 1e3,
-            ns = timer.ns,
-            sample = [];
+          begin,
+          count = 30,
+          divisor = 1e3,
+          ns = timer.ns,
+          sample = [];
 
         // Get average smallest measurable time.
         while (count--) {
@@ -1712,18 +1905,17 @@ module.exports = (function() {
               begin = ns();
               while (!(measured = ns() - begin)) {}
             }
-          }
-          else if (unit == 'ns') {
+          } else if (unit == 'ns') {
             divisor = 1e9;
-            begin = (begin = ns())[0] + (begin[1] / divisor);
-            while (!(measured = ((measured = ns())[0] + (measured[1] / divisor)) - begin)) {}
+            begin = (begin = ns())[0] + begin[1] / divisor;
+            while (
+              !(measured = (measured = ns())[0] + measured[1] / divisor - begin)
+            ) {}
             divisor = 1;
-          }
-          else if (ns.now) {
+          } else if (ns.now) {
             begin = ns.now();
             while (!(measured = ns.now() - begin)) {}
-          }
-          else {
+          } else {
             begin = new ns().getTime();
             while (!(measured = new ns().getTime() - begin)) {}
           }
@@ -1744,7 +1936,9 @@ module.exports = (function() {
        */
       function interpolate(string) {
         // Replaces all occurrences of `#` with a unique number and template tokens with content.
-        return _.template(string.replace(/\#/g, /\d+/.exec(templateData.uid)))(templateData);
+        return _.template(string.replace(/\#/g, /\d+/.exec(templateData.uid)))(
+          templateData,
+        );
       }
 
       /*----------------------------------------------------------------------*/
@@ -1753,14 +1947,17 @@ module.exports = (function() {
       // enable benchmarking via the --enable-benchmarking command
       // line switch in at least Chrome 7 to use chrome.Interval
       try {
-        if ((timer.ns = new (context.chrome || context.chromium).Interval)) {
-          timers.push({ 'ns': timer.ns, 'res': getRes('us'), 'unit': 'us' });
+        if ((timer.ns = new (context.chrome || context.chromium).Interval())) {
+          timers.push({ ns: timer.ns, res: getRes('us'), unit: 'us' });
         }
-      } catch(e) {}
+      } catch (e) {}
 
       // Detect Node.js's nanosecond resolution timer available in Node.js >= 0.8.
-      if (processObject && typeof (timer.ns = processObject.hrtime) == 'function') {
-        timers.push({ 'ns': timer.ns, 'res': getRes('ns'), 'unit': 'ns' });
+      if (
+        processObject &&
+        typeof (timer.ns = processObject.hrtime) == 'function'
+      ) {
+        timers.push({ ns: timer.ns, res: getRes('ns'), unit: 'ns' });
       }
       // Pick timer with highest resolution.
       timer = _.minBy(timers, 'res');
@@ -1788,25 +1985,27 @@ module.exports = (function() {
       options || (options = {});
 
       var async = options.async,
-          elapsed = 0,
-          initCount = bench.initCount,
-          minSamples = bench.minSamples,
-          queue = [],
-          sample = bench.stats.sample;
+        elapsed = 0,
+        initCount = bench.initCount,
+        minSamples = bench.minSamples,
+        queue = [],
+        sample = bench.stats.sample;
 
       /**
        * Adds a clone to the queue.
        */
       function enqueue() {
-        queue.push(bench.clone({
-          '_original': bench,
-          'events': {
-            'abort': [update],
-            'cycle': [update],
-            'error': [update],
-            'start': [update]
-          }
-        }));
+        queue.push(
+          bench.clone({
+            _original: bench,
+            events: {
+              abort: [update],
+              cycle: [update],
+              error: [update],
+              start: [update],
+            },
+          }),
+        );
       }
 
       /**
@@ -1814,14 +2013,13 @@ module.exports = (function() {
        */
       function update(event) {
         var clone = this,
-            type = event.type;
+          type = event.type;
 
         if (bench.running) {
           if (type == 'start') {
             // Note: `clone.minTime` prop is inited in `clock()`.
             clone.count = bench.initCount;
-          }
-          else {
+          } else {
             if (type == 'error') {
               bench.error = clone.error;
             }
@@ -1845,20 +2043,24 @@ module.exports = (function() {
        */
       function evaluate(event) {
         var critical,
-            df,
-            mean,
-            moe,
-            rme,
-            sd,
-            sem,
-            variance,
-            clone = event.target,
-            done = bench.aborted,
-            now = _.now(),
-            size = sample.push(clone.times.period),
-            maxedOut = size >= minSamples && (elapsed += now - clone.times.timeStamp) / 1e3 > bench.maxTime,
-            times = bench.times,
-            varOf = function(sum, x) { return sum + pow(x - mean, 2); };
+          df,
+          mean,
+          moe,
+          rme,
+          sd,
+          sem,
+          variance,
+          clone = event.target,
+          done = bench.aborted,
+          now = _.now(),
+          size = sample.push(clone.times.period),
+          maxedOut =
+            size >= minSamples &&
+            (elapsed += now - clone.times.timeStamp) / 1e3 > bench.maxTime,
+          times = bench.times,
+          varOf = function (sum, x) {
+            return sum + pow(x - mean, 2);
+          };
 
         // Exit early for aborted or unclockable tests.
         if (done || clone.hz == Infinity) {
@@ -1884,12 +2086,12 @@ module.exports = (function() {
           rme = (moe / mean) * 100 || 0;
 
           _.assign(bench.stats, {
-            'deviation': sd,
-            'mean': mean,
-            'moe': moe,
-            'rme': rme,
-            'sem': sem,
-            'variance': variance
+            deviation: sd,
+            mean: mean,
+            moe: moe,
+            rme: rme,
+            sem: sem,
+            variance: variance,
           });
 
           // Abort the cycle loop when the minimum sample size has been collected
@@ -1921,11 +2123,13 @@ module.exports = (function() {
       // Init queue and begin.
       enqueue();
       invoke(queue, {
-        'name': 'run',
-        'args': { 'async': async },
-        'queued': true,
-        'onCycle': evaluate,
-        'onComplete': function() { bench.emit('complete'); }
+        name: 'run',
+        args: { async: async },
+        queued: true,
+        onCycle: evaluate,
+        onComplete: function () {
+          bench.emit('complete');
+        },
       });
     }
 
@@ -1947,15 +2151,15 @@ module.exports = (function() {
         clone = clone.benchmark;
       }
       var clocked,
-          cycles,
-          divisor,
-          event,
-          minTime,
-          period,
-          async = options.async,
-          bench = clone._original,
-          count = clone.count,
-          times = clone.times;
+        cycles,
+        divisor,
+        event,
+        minTime,
+        period,
+        async = options.async,
+        bench = clone._original,
+        count = clone.count,
+        times = clone.times;
 
       // Continue, if not aborted between cycles.
       if (clone.running) {
@@ -2015,12 +2219,13 @@ module.exports = (function() {
         if (deferred) {
           clone.compiled.call(deferred, context, timer);
         } else if (async) {
-          delay(clone, function() { cycle(clone, options); });
+          delay(clone, function () {
+            cycle(clone, options);
+          });
         } else {
           cycle(clone);
         }
-      }
-      else {
+      } else {
         // Fix TraceMonkey bug associated with clock fallbacks.
         // For more information see http://bugzil.la/509069.
         if (support.browser) {
@@ -2049,7 +2254,7 @@ module.exports = (function() {
      */
     function run(options) {
       var bench = this,
-          event = Event('start');
+        event = Event('start');
 
       // Set `running` to `false` so `reset()` won't call `abort()`.
       bench.running = false;
@@ -2061,7 +2266,12 @@ module.exports = (function() {
       bench.emit(event);
 
       if (!event.cancelled) {
-        options = { 'async': ((options = options && options.async) == null ? bench.async : options) && support.timeout };
+        options = {
+          async:
+            ((options = options && options.async) == null
+              ? bench.async
+              : options) && support.timeout,
+        };
 
         // For clones created within `compute()`.
         if (bench._original) {
@@ -2088,7 +2298,6 @@ module.exports = (function() {
     // making it non-writable in the process, unless it is the first property
     // assigned by for-in loop of `_.assign()`.
     _.assign(Benchmark, {
-
       /**
        * The default options copied by benchmark instances.
        *
@@ -2096,8 +2305,7 @@ module.exports = (function() {
        * @memberOf Benchmark
        * @type Object
        */
-      'options': {
-
+      options: {
         /**
          * A flag to indicate that benchmark cycles will execute asynchronously
          * by default.
@@ -2105,7 +2313,7 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type boolean
          */
-        'async': false,
+        async: false,
 
         /**
          * A flag to indicate that the benchmark clock is deferred.
@@ -2113,14 +2321,14 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type boolean
          */
-        'defer': false,
+        defer: false,
 
         /**
          * The delay between test cycles (secs).
          * @memberOf Benchmark.options
          * @type number
          */
-        'delay': 0.005,
+        delay: 0.005,
 
         /**
          * Displayed by `Benchmark#toString` when a `name` is not available
@@ -2129,7 +2337,7 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type string
          */
-        'id': undefined,
+        id: undefined,
 
         /**
          * The default number of times to execute a test on a benchmark's first cycle.
@@ -2137,7 +2345,7 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type number
          */
-        'initCount': 1,
+        initCount: 1,
 
         /**
          * The maximum time a benchmark is allowed to run before finishing (secs).
@@ -2147,7 +2355,7 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type number
          */
-        'maxTime': 5,
+        maxTime: 5,
 
         /**
          * The minimum sample size required to perform statistical analysis.
@@ -2155,7 +2363,7 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type number
          */
-        'minSamples': 5,
+        minSamples: 5,
 
         /**
          * The time needed to reduce the percent uncertainty of measurement to 1% (secs).
@@ -2163,7 +2371,7 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type number
          */
-        'minTime': 0,
+        minTime: 0,
 
         /**
          * The name of the benchmark.
@@ -2171,7 +2379,7 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type string
          */
-        'name': undefined,
+        name: undefined,
 
         /**
          * An event listener called when the benchmark is aborted.
@@ -2179,7 +2387,7 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type Function
          */
-        'onAbort': undefined,
+        onAbort: undefined,
 
         /**
          * An event listener called when the benchmark completes running.
@@ -2187,7 +2395,7 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type Function
          */
-        'onComplete': undefined,
+        onComplete: undefined,
 
         /**
          * An event listener called after each run cycle.
@@ -2195,7 +2403,7 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type Function
          */
-        'onCycle': undefined,
+        onCycle: undefined,
 
         /**
          * An event listener called when a test errors.
@@ -2203,7 +2411,7 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type Function
          */
-        'onError': undefined,
+        onError: undefined,
 
         /**
          * An event listener called when the benchmark is reset.
@@ -2211,7 +2419,7 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type Function
          */
-        'onReset': undefined,
+        onReset: undefined,
 
         /**
          * An event listener called when the benchmark starts running.
@@ -2219,7 +2427,7 @@ module.exports = (function() {
          * @memberOf Benchmark.options
          * @type Function
          */
-        'onStart': undefined
+        onStart: undefined,
       },
 
       /**
@@ -2230,19 +2438,21 @@ module.exports = (function() {
        * @memberOf Benchmark
        * @type Object
        */
-      'platform': context.platform || require('platform') || ({
-        'description': context.navigator && context.navigator.userAgent || null,
-        'layout': null,
-        'product': null,
-        'name': null,
-        'manufacturer': null,
-        'os': null,
-        'prerelease': null,
-        'version': null,
-        'toString': function() {
-          return this.description || '';
-        }
-      }),
+      platform: context.platform ||
+        require('platform') || {
+          description:
+            (context.navigator && context.navigator.userAgent) || null,
+          layout: null,
+          product: null,
+          name: null,
+          manufacturer: null,
+          os: null,
+          prerelease: null,
+          version: null,
+          toString: function () {
+            return this.description || '';
+          },
+        },
 
       /**
        * The semantic version number.
@@ -2251,34 +2461,36 @@ module.exports = (function() {
        * @memberOf Benchmark
        * @type string
        */
-      'version': '2.1.2'
+      version: '2.1.2',
     });
 
     _.assign(Benchmark, {
-      'filter': filter,
-      'formatNumber': formatNumber,
-      'invoke': invoke,
-      'join': join,
-      'runInContext': runInContext,
-      'support': support
+      filter: filter,
+      formatNumber: formatNumber,
+      invoke: invoke,
+      join: join,
+      runInContext: runInContext,
+      support: support,
     });
 
     // Add lodash methods to Benchmark.
-    _.each(['each', 'forEach', 'forOwn', 'has', 'indexOf', 'map', 'reduce'], function(methodName) {
-      Benchmark[methodName] = _[methodName];
-    });
+    _.each(
+      ['each', 'forEach', 'forOwn', 'has', 'indexOf', 'map', 'reduce'],
+      function (methodName) {
+        Benchmark[methodName] = _[methodName];
+      },
+    );
 
     /*------------------------------------------------------------------------*/
 
     _.assign(Benchmark.prototype, {
-
       /**
        * The number of times a test was executed.
        *
        * @memberOf Benchmark
        * @type number
        */
-      'count': 0,
+      count: 0,
 
       /**
        * The number of cycles performed while benchmarking.
@@ -2286,7 +2498,7 @@ module.exports = (function() {
        * @memberOf Benchmark
        * @type number
        */
-      'cycles': 0,
+      cycles: 0,
 
       /**
        * The number of executions per second.
@@ -2294,7 +2506,7 @@ module.exports = (function() {
        * @memberOf Benchmark
        * @type number
        */
-      'hz': 0,
+      hz: 0,
 
       /**
        * The compiled test function.
@@ -2302,7 +2514,7 @@ module.exports = (function() {
        * @memberOf Benchmark
        * @type {Function|string}
        */
-      'compiled': undefined,
+      compiled: undefined,
 
       /**
        * The error object if the test failed.
@@ -2310,7 +2522,7 @@ module.exports = (function() {
        * @memberOf Benchmark
        * @type Object
        */
-      'error': undefined,
+      error: undefined,
 
       /**
        * The test to benchmark.
@@ -2318,7 +2530,7 @@ module.exports = (function() {
        * @memberOf Benchmark
        * @type {Function|string}
        */
-      'fn': undefined,
+      fn: undefined,
 
       /**
        * A flag to indicate if the benchmark is aborted.
@@ -2326,7 +2538,7 @@ module.exports = (function() {
        * @memberOf Benchmark
        * @type boolean
        */
-      'aborted': false,
+      aborted: false,
 
       /**
        * A flag to indicate if the benchmark is running.
@@ -2334,7 +2546,7 @@ module.exports = (function() {
        * @memberOf Benchmark
        * @type boolean
        */
-      'running': false,
+      running: false,
 
       /**
        * Compiled into the test and executed immediately **before** the test loop.
@@ -2397,7 +2609,7 @@ module.exports = (function() {
        *   }())
        * }())
        */
-      'setup': _.noop,
+      setup: _.noop,
 
       /**
        * Compiled into the test and executed immediately **after** the test loop.
@@ -2405,7 +2617,7 @@ module.exports = (function() {
        * @memberOf Benchmark
        * @type {Function|string}
        */
-      'teardown': _.noop,
+      teardown: _.noop,
 
       /**
        * An object of stats including mean, margin or error, and standard deviation.
@@ -2413,15 +2625,14 @@ module.exports = (function() {
        * @memberOf Benchmark
        * @type Object
        */
-      'stats': {
-
+      stats: {
         /**
          * The margin of error.
          *
          * @memberOf Benchmark#stats
          * @type number
          */
-        'moe': 0,
+        moe: 0,
 
         /**
          * The relative margin of error (expressed as a percentage of the mean).
@@ -2429,7 +2640,7 @@ module.exports = (function() {
          * @memberOf Benchmark#stats
          * @type number
          */
-        'rme': 0,
+        rme: 0,
 
         /**
          * The standard error of the mean.
@@ -2437,7 +2648,7 @@ module.exports = (function() {
          * @memberOf Benchmark#stats
          * @type number
          */
-        'sem': 0,
+        sem: 0,
 
         /**
          * The sample standard deviation.
@@ -2445,7 +2656,7 @@ module.exports = (function() {
          * @memberOf Benchmark#stats
          * @type number
          */
-        'deviation': 0,
+        deviation: 0,
 
         /**
          * The sample arithmetic mean (secs).
@@ -2453,7 +2664,7 @@ module.exports = (function() {
          * @memberOf Benchmark#stats
          * @type number
          */
-        'mean': 0,
+        mean: 0,
 
         /**
          * The array of sampled periods.
@@ -2461,7 +2672,7 @@ module.exports = (function() {
          * @memberOf Benchmark#stats
          * @type Array
          */
-        'sample': [],
+        sample: [],
 
         /**
          * The sample variance.
@@ -2469,7 +2680,7 @@ module.exports = (function() {
          * @memberOf Benchmark#stats
          * @type number
          */
-        'variance': 0
+        variance: 0,
       },
 
       /**
@@ -2478,15 +2689,14 @@ module.exports = (function() {
        * @memberOf Benchmark
        * @type Object
        */
-      'times': {
-
+      times: {
         /**
          * The time taken to complete the last cycle (secs).
          *
          * @memberOf Benchmark#times
          * @type number
          */
-        'cycle': 0,
+        cycle: 0,
 
         /**
          * The time taken to complete the benchmark (secs).
@@ -2494,7 +2704,7 @@ module.exports = (function() {
          * @memberOf Benchmark#times
          * @type number
          */
-        'elapsed': 0,
+        elapsed: 0,
 
         /**
          * The time taken to execute the test once (secs).
@@ -2502,7 +2712,7 @@ module.exports = (function() {
          * @memberOf Benchmark#times
          * @type number
          */
-        'period': 0,
+        period: 0,
 
         /**
          * A timestamp of when the benchmark started (ms).
@@ -2510,34 +2720,33 @@ module.exports = (function() {
          * @memberOf Benchmark#times
          * @type number
          */
-        'timeStamp': 0
-      }
+        timeStamp: 0,
+      },
     });
 
     _.assign(Benchmark.prototype, {
-      'abort': abort,
-      'clone': clone,
-      'compare': compare,
-      'emit': emit,
-      'listeners': listeners,
-      'off': off,
-      'on': on,
-      'reset': reset,
-      'run': run,
-      'toString': toStringBench
+      abort: abort,
+      clone: clone,
+      compare: compare,
+      emit: emit,
+      listeners: listeners,
+      off: off,
+      on: on,
+      reset: reset,
+      run: run,
+      toString: toStringBench,
     });
 
     /*------------------------------------------------------------------------*/
 
     _.assign(Deferred.prototype, {
-
       /**
        * The deferred benchmark instance.
        *
        * @memberOf Benchmark.Deferred
        * @type Object
        */
-      'benchmark': null,
+      benchmark: null,
 
       /**
        * The number of deferred cycles performed while benchmarking.
@@ -2545,7 +2754,7 @@ module.exports = (function() {
        * @memberOf Benchmark.Deferred
        * @type number
        */
-      'cycles': 0,
+      cycles: 0,
 
       /**
        * The time taken to complete the deferred benchmark (secs).
@@ -2553,7 +2762,7 @@ module.exports = (function() {
        * @memberOf Benchmark.Deferred
        * @type number
        */
-      'elapsed': 0,
+      elapsed: 0,
 
       /**
        * A timestamp of when the deferred benchmark started (ms).
@@ -2561,24 +2770,23 @@ module.exports = (function() {
        * @memberOf Benchmark.Deferred
        * @type number
        */
-      'timeStamp': 0
+      timeStamp: 0,
     });
 
     _.assign(Deferred.prototype, {
-      'resolve': resolve
+      resolve: resolve,
     });
 
     /*------------------------------------------------------------------------*/
 
     _.assign(Event.prototype, {
-
       /**
        * A flag to indicate if the emitters listener iteration is aborted.
        *
        * @memberOf Benchmark.Event
        * @type boolean
        */
-      'aborted': false,
+      aborted: false,
 
       /**
        * A flag to indicate if the default action is cancelled.
@@ -2586,7 +2794,7 @@ module.exports = (function() {
        * @memberOf Benchmark.Event
        * @type boolean
        */
-      'cancelled': false,
+      cancelled: false,
 
       /**
        * The object whose listeners are currently being processed.
@@ -2594,7 +2802,7 @@ module.exports = (function() {
        * @memberOf Benchmark.Event
        * @type Object
        */
-      'currentTarget': undefined,
+      currentTarget: undefined,
 
       /**
        * The return value of the last executed listener.
@@ -2602,7 +2810,7 @@ module.exports = (function() {
        * @memberOf Benchmark.Event
        * @type Mixed
        */
-      'result': undefined,
+      result: undefined,
 
       /**
        * The object to which the event was originally emitted.
@@ -2610,7 +2818,7 @@ module.exports = (function() {
        * @memberOf Benchmark.Event
        * @type Object
        */
-      'target': undefined,
+      target: undefined,
 
       /**
        * A timestamp of when the event was created (ms).
@@ -2618,7 +2826,7 @@ module.exports = (function() {
        * @memberOf Benchmark.Event
        * @type number
        */
-      'timeStamp': 0,
+      timeStamp: 0,
 
       /**
        * The event type.
@@ -2626,7 +2834,7 @@ module.exports = (function() {
        * @memberOf Benchmark.Event
        * @type string
        */
-      'type': ''
+      type: '',
     });
 
     /*------------------------------------------------------------------------*/
@@ -2639,27 +2847,25 @@ module.exports = (function() {
      * @type Object
      */
     Suite.options = {
-
       /**
        * The name of the suite.
        *
        * @memberOf Benchmark.Suite.options
        * @type string
        */
-      'name': undefined
+      name: undefined,
     };
 
     /*------------------------------------------------------------------------*/
 
     _.assign(Suite.prototype, {
-
       /**
        * The number of benchmarks in the suite.
        *
        * @memberOf Benchmark.Suite
        * @type number
        */
-      'length': 0,
+      length: 0,
 
       /**
        * A flag to indicate if the suite is aborted.
@@ -2667,7 +2873,7 @@ module.exports = (function() {
        * @memberOf Benchmark.Suite
        * @type boolean
        */
-      'aborted': false,
+      aborted: false,
 
       /**
        * A flag to indicate if the suite is running.
@@ -2675,60 +2881,63 @@ module.exports = (function() {
        * @memberOf Benchmark.Suite
        * @type boolean
        */
-      'running': false
+      running: false,
     });
 
     _.assign(Suite.prototype, {
-      'abort': abortSuite,
-      'add': add,
-      'clone': cloneSuite,
-      'emit': emit,
-      'filter': filterSuite,
-      'join': arrayRef.join,
-      'listeners': listeners,
-      'off': off,
-      'on': on,
-      'pop': arrayRef.pop,
-      'push': push,
-      'reset': resetSuite,
-      'run': runSuite,
-      'reverse': arrayRef.reverse,
-      'shift': shift,
-      'slice': slice,
-      'sort': arrayRef.sort,
-      'splice': arrayRef.splice,
-      'unshift': unshift
+      abort: abortSuite,
+      add: add,
+      clone: cloneSuite,
+      emit: emit,
+      filter: filterSuite,
+      join: arrayRef.join,
+      listeners: listeners,
+      off: off,
+      on: on,
+      pop: arrayRef.pop,
+      push: push,
+      reset: resetSuite,
+      run: runSuite,
+      reverse: arrayRef.reverse,
+      shift: shift,
+      slice: slice,
+      sort: arrayRef.sort,
+      splice: arrayRef.splice,
+      unshift: unshift,
     });
 
     /*------------------------------------------------------------------------*/
 
     // Expose Deferred, Event, and Suite.
     _.assign(Benchmark, {
-      'Deferred': Deferred,
-      'Event': Event,
-      'Suite': Suite
+      Deferred: Deferred,
+      Event: Event,
+      Suite: Suite,
     });
 
     /*------------------------------------------------------------------------*/
 
     // Add lodash methods as Suite methods.
-    _.each(['each', 'forEach', 'indexOf', 'map', 'reduce'], function(methodName) {
-      var func = _[methodName];
-      Suite.prototype[methodName] = function() {
-        var args = [this];
-        push.apply(args, arguments);
-        return func.apply(_, args);
-      };
-    });
+    _.each(
+      ['each', 'forEach', 'indexOf', 'map', 'reduce'],
+      function (methodName) {
+        var func = _[methodName];
+        Suite.prototype[methodName] = function () {
+          var args = [this];
+          push.apply(args, arguments);
+          return func.apply(_, args);
+        };
+      },
+    );
 
     // Avoid array-like object bugs with `Array#shift` and `Array#splice`
     // in Firefox < 10 and IE < 9.
-    _.each(['pop', 'shift', 'splice'], function(methodName) {
+    _.each(['pop', 'shift', 'splice'], function (methodName) {
       var func = arrayRef[methodName];
 
-      Suite.prototype[methodName] = function() {
+      Suite.prototype[methodName] = function () {
         var value = this,
-            result = func.apply(value, arguments);
+          result = func.apply(value, arguments);
 
         if (value.length === 0) {
           delete value[0];
@@ -2739,7 +2948,7 @@ module.exports = (function() {
 
     // Avoid buggy `Array#unshift` in IE < 8 which doesn't return the new
     // length of the array.
-    Suite.prototype.unshift = function() {
+    Suite.prototype.unshift = function () {
       var value = this;
       unshift.apply(value, arguments);
       return value.length;
@@ -2755,5 +2964,4 @@ module.exports = (function() {
   window.Benchmark = Benchmark;
 
   return Benchmark;
-
-}.call(this));
+}.call(this);
diff --git a/tgui/packages/tgui-bench/tests/Button.test.tsx b/tgui/packages/tgui-bench/tests/Button.test.tsx
index e3472cbbbfae..6b806d720ab8 100644
--- a/tgui/packages/tgui-bench/tests/Button.test.tsx
+++ b/tgui/packages/tgui-bench/tests/Button.test.tsx
@@ -7,28 +7,18 @@ const render = createRenderer();
 const handleClick = () => undefined;
 
 export const SingleButton = () => {
-  const node = (
-    <Button>
-      Hello world!
-    </Button>
-  );
+  const node = <Button>Hello world!</Button>;
   render(node);
 };
 
 export const SingleButtonWithCallback = () => {
-  const node = (
-    <Button onClick={() => undefined}>
-      Hello world!
-    </Button>
-  );
+  const node = <Button onClick={() => undefined}>Hello world!</Button>;
   render(node);
 };
 
 export const SingleButtonWithLinkEvent = () => {
   const node = (
-    <Button onClick={linkEvent(null, handleClick)}>
-      Hello world!
-    </Button>
+    <Button onClick={linkEvent(null, handleClick)}>Hello world!</Button>
   );
   render(node);
 };
@@ -36,11 +26,7 @@ export const SingleButtonWithLinkEvent = () => {
 export const ListOfButtons = () => {
   const nodes: JSX.Element[] = [];
   for (let i = 0; i < 100; i++) {
-    const node = (
-      <Button key={i}>
-        Hello world! {i}
-      </Button>
-    );
+    const node = <Button key={i}>Hello world! {i}</Button>;
     nodes.push(node);
   }
   render(<div>{nodes}</div>);
diff --git a/tgui/packages/tgui-bench/tests/DisposalUnit.test.tsx b/tgui/packages/tgui-bench/tests/DisposalUnit.test.tsx
index b588f306f76a..3832d4fc9ca4 100644
--- a/tgui/packages/tgui-bench/tests/DisposalUnit.test.tsx
+++ b/tgui/packages/tgui-bench/tests/DisposalUnit.test.tsx
@@ -6,9 +6,11 @@ import { configureStore, StoreProvider } from 'tgui/store';
 const store = configureStore({ sideEffets: false });
 
 const renderUi = createRenderer((dataJson: string) => {
-  store.dispatch(backendUpdate({
-    data: Byond.parseJson(dataJson),
-  }));
+  store.dispatch(
+    backendUpdate({
+      data: Byond.parseJson(dataJson),
+    }),
+  );
   return (
     <StoreProvider store={store}>
       <DisposalUnit />
diff --git a/tgui/packages/tgui-bench/tests/Flex.test.tsx b/tgui/packages/tgui-bench/tests/Flex.test.tsx
index e81ebc6f611b..66c039a19083 100644
--- a/tgui/packages/tgui-bench/tests/Flex.test.tsx
+++ b/tgui/packages/tgui-bench/tests/Flex.test.tsx
@@ -6,9 +6,7 @@ const render = createRenderer();
 export const Default = () => {
   const node = (
     <Flex align="baseline">
-      <Flex.Item mr={1}>
-        Text {Math.random()}
-      </Flex.Item>
+      <Flex.Item mr={1}>Text {Math.random()}</Flex.Item>
       <Flex.Item grow={1} basis={0}>
         Text {Math.random()}
       </Flex.Item>
diff --git a/tgui/packages/tgui-bench/tests/Stack.test.tsx b/tgui/packages/tgui-bench/tests/Stack.test.tsx
index 952dba20294e..ce7f5599e721 100644
--- a/tgui/packages/tgui-bench/tests/Stack.test.tsx
+++ b/tgui/packages/tgui-bench/tests/Stack.test.tsx
@@ -6,9 +6,7 @@ const render = createRenderer();
 export const Default = () => {
   const node = (
     <Stack align="baseline">
-      <Stack.Item>
-        Text {Math.random()}
-      </Stack.Item>
+      <Stack.Item>Text {Math.random()}</Stack.Item>
       <Stack.Item grow={1} basis={0}>
         Text {Math.random()}
       </Stack.Item>
diff --git a/tgui/packages/tgui-bench/tests/Tooltip.test.tsx b/tgui/packages/tgui-bench/tests/Tooltip.test.tsx
index b953fc911d22..9dae16f5c030 100644
--- a/tgui/packages/tgui-bench/tests/Tooltip.test.tsx
+++ b/tgui/packages/tgui-bench/tests/Tooltip.test.tsx
@@ -1,5 +1,5 @@
-import { Box, Tooltip } from "tgui/components";
-import { createRenderer } from "tgui/renderer";
+import { Box, Tooltip } from 'tgui/components';
+import { createRenderer } from 'tgui/renderer';
 
 const render = createRenderer();
 
@@ -12,7 +12,7 @@ export const ListOfTooltips = () => {
         <Box as="span" backgroundColor="blue" fontSize="48px" m={1}>
           Tooltip #{i}
         </Box>
-      </Tooltip>
+      </Tooltip>,
     );
   }
 
diff --git a/tgui/packages/tgui-dev-server/dreamseeker.js b/tgui/packages/tgui-dev-server/dreamseeker.js
index 21ad32e06451..fcb939e46cc0 100644
--- a/tgui/packages/tgui-dev-server/dreamseeker.js
+++ b/tgui/packages/tgui-dev-server/dreamseeker.js
@@ -25,11 +25,13 @@ export class DreamSeeker {
 
   topic(params = {}) {
     const query = Object.keys(params)
-      .map(key => encodeURIComponent(key)
-        + '=' + encodeURIComponent(params[key]))
+      .map(
+        (key) =>
+          encodeURIComponent(key) + '=' + encodeURIComponent(params[key]),
+      )
       .join('&');
     logger.log(
-      `topic call at ${this.client.defaults.baseURL + '/dummy?' + query}`
+      `topic call at ${this.client.defaults.baseURL + '/dummy?' + query}`,
     );
     return this.client.get('/dummy?' + query);
   }
@@ -39,7 +41,7 @@ export class DreamSeeker {
  * @param {number[]} pids
  * @returns {DreamSeeker[]}
  */
-DreamSeeker.getInstancesByPids = async pids => {
+DreamSeeker.getInstancesByPids = async (pids) => {
   if (process.platform !== 'win32') {
     return [];
   }
@@ -49,8 +51,7 @@ DreamSeeker.getInstancesByPids = async pids => {
     const instance = instanceByPid.get(pid);
     if (instance) {
       instances.push(instance);
-    }
-    else {
+    } else {
       pidsToResolve.push(pid);
     }
   }
@@ -86,12 +87,10 @@ DreamSeeker.getInstancesByPids = async pids => {
         instances.push(instance);
         instanceByPid.set(pid, instance);
       }
-    }
-    catch (err) {
+    } catch (err) {
       if (err.code === 'ERR_CHILD_PROCESS_STDIO_MAXBUFFER') {
         logger.error(err.message, err.code);
-      }
-      else {
+      } else {
         logger.error(err);
       }
       return [];
@@ -100,4 +99,4 @@ DreamSeeker.getInstancesByPids = async pids => {
   return instances;
 };
 
-const plural = (word, n) => n !== 1 ? word + 's' : word;
+const plural = (word, n) => (n !== 1 ? word + 's' : word);
diff --git a/tgui/packages/tgui-dev-server/link/client.cjs b/tgui/packages/tgui-dev-server/link/client.cjs
index fe75314acd3a..a4f703aee68a 100644
--- a/tgui/packages/tgui-dev-server/link/client.cjs
+++ b/tgui/packages/tgui-dev-server/link/client.cjs
@@ -23,7 +23,7 @@ const ensureConnection = () => {
           socket.send(msg);
         }
       };
-      socket.onmessage = event => {
+      socket.onmessage = (event) => {
         const msg = JSON.parse(event.data);
         for (let subscriber of subscribers) {
           subscriber(msg);
@@ -37,14 +37,14 @@ if (process.env.NODE_ENV !== 'production') {
   window.onunload = () => socket && socket.close();
 }
 
-const subscribe = fn => subscribers.push(fn);
+const subscribe = (fn) => subscribers.push(fn);
 
 /**
  * A json serializer which handles circular references and other junk.
  */
-const serializeObject = obj => {
+const serializeObject = (obj) => {
   let refs = [];
-  const primitiveReviver = value => {
+  const primitiveReviver = (value) => {
     if (typeof value === 'number' && !Number.isFinite(value)) {
       return {
         __number__: String(value),
@@ -68,9 +68,9 @@ const serializeObject = obj => {
       }
       refs.push(value);
       // Error object
-      const isError = value instanceof Error || (
-        value.code && value.message && value.message.includes('Error')
-      );
+      const isError =
+        value instanceof Error ||
+        (value.code && value.message && value.message.includes('Error'));
       if (isError) {
         return {
           __error__: true,
@@ -91,7 +91,7 @@ const serializeObject = obj => {
   return json;
 };
 
-const sendMessage = msg => {
+const sendMessage = (msg) => {
   if (process.env.NODE_ENV !== 'production') {
     const json = serializeObject(msg);
     // Send message using WebSocket
@@ -99,8 +99,7 @@ const sendMessage = msg => {
       ensureConnection();
       if (socket.readyState === WebSocket.OPEN) {
         socket.send(json);
-      }
-      else {
+      } else {
         // Keep only 100 latest messages in the queue
         if (queue.length > 100) {
           queue.shift();
@@ -130,19 +129,20 @@ const sendLogEntry = (level, ns, ...args) => {
           args,
         },
       });
-    }
-    catch (err) {}
+    } catch (err) {}
   }
 };
 
 const setupHotReloading = () => {
-  if (process.env.NODE_ENV !== 'production'
-      && process.env.WEBPACK_HMR_ENABLED
-      && window.WebSocket) {
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    process.env.WEBPACK_HMR_ENABLED &&
+    window.WebSocket
+  ) {
     if (module.hot) {
       ensureConnection();
       sendLogEntry(0, null, 'setting up hot reloading');
-      subscribe(msg => {
+      subscribe((msg) => {
         const { type } = msg;
         sendLogEntry(0, null, 'received', type);
         if (type === 'hotUpdate') {
@@ -157,10 +157,10 @@ const setupHotReloading = () => {
               ignoreDeclined: true,
               ignoreErrored: true,
             })
-            .then(modules => {
+            .then((modules) => {
               sendLogEntry(0, null, 'outdated modules', modules);
             })
-            .catch(err => {
+            .catch((err) => {
               sendLogEntry(0, null, 'reload error', err);
             });
         }
diff --git a/tgui/packages/tgui-dev-server/link/retrace.js b/tgui/packages/tgui-dev-server/link/retrace.js
index c10ba9cb173c..b7f4d4eacfb9 100644
--- a/tgui/packages/tgui-dev-server/link/retrace.js
+++ b/tgui/packages/tgui-dev-server/link/retrace.js
@@ -18,7 +18,7 @@ const logger = createLogger('retrace');
 const { SourceMapConsumer } = SourceMap;
 const sourceMaps = [];
 
-export const loadSourceMaps = async bundleDir => {
+export const loadSourceMaps = async (bundleDir) => {
   // Destroy and garbage collect consumers
   while (sourceMaps.length !== 0) {
     const { consumer } = sourceMaps.shift();
@@ -30,29 +30,29 @@ export const loadSourceMaps = async bundleDir => {
     try {
       const file = basename(path).replace('.map', '');
       const consumer = await new SourceMapConsumer(
-        JSON.parse(fs.readFileSync(path, 'utf8')));
+        JSON.parse(fs.readFileSync(path, 'utf8')),
+      );
       sourceMaps.push({ file, consumer });
-    }
-    catch (err) {
+    } catch (err) {
       logger.error(err);
     }
   }
   logger.log(`loaded ${sourceMaps.length} source maps`);
 };
 
-export const retrace = stack => {
+export const retrace = (stack) => {
   if (typeof stack !== 'string') {
     logger.log('ERROR: Stack is not a string!', stack);
     return stack;
   }
   const header = stack.split(/\n\s.*at/)[0];
   const mappedStack = parseStackTrace(stack)
-    .map(frame => {
+    .map((frame) => {
       if (!frame.file) {
         return frame;
       }
       // Find the correct source map
-      const sourceMap = sourceMaps.find(sourceMap => {
+      const sourceMap = sourceMaps.find((sourceMap) => {
         return frame.file.includes(sourceMap.file);
       });
       if (!sourceMap) {
@@ -72,7 +72,7 @@ export const retrace = stack => {
         column: mappedFrame.column,
       };
     })
-    .map(frame => {
+    .map((frame) => {
       // Stringify the frame
       const { file, methodName, lineNumber } = frame;
       if (!file) {
diff --git a/tgui/packages/tgui-dev-server/link/server.js b/tgui/packages/tgui-dev-server/link/server.js
index 87a8a5911bc0..81ede9e6efc2 100644
--- a/tgui/packages/tgui-dev-server/link/server.js
+++ b/tgui/packages/tgui-dev-server/link/server.js
@@ -32,9 +32,9 @@ class LinkServer {
   setupWebSocketLink() {
     const port = 3000;
     this.wss = new WebSocket.Server({ port });
-    this.wss.on('connection', ws => {
+    this.wss.on('connection', (ws) => {
       logger.log('client connected');
-      ws.on('message', json => {
+      ws.on('message', (json) => {
         const msg = deserializeObject(json);
         this.handleLinkMessage(ws, msg);
       });
@@ -51,7 +51,7 @@ class LinkServer {
     this.httpServer = http.createServer((req, res) => {
       if (req.method === 'POST') {
         let body = '';
-        req.on('data', chunk => {
+        req.on('data', (chunk) => {
           body += chunk.toString();
         });
         req.on('end', () => {
@@ -76,16 +76,19 @@ class LinkServer {
       if (level <= 0 && !DEBUG) {
         return;
       }
-      directLog(ns, ...args.map(arg => {
-        if (typeof arg === 'object') {
-          return inspect(arg, {
-            depth: Infinity,
-            colors: true,
-            compact: 8,
-          });
-        }
-        return arg;
-      }));
+      directLog(
+        ns,
+        ...args.map((arg) => {
+          if (typeof arg === 'object') {
+            return inspect(arg, {
+              depth: Infinity,
+              colors: true,
+              compact: 8,
+            });
+          }
+          return arg;
+        }),
+      );
       return;
     }
     if (type === 'relay') {
@@ -117,7 +120,7 @@ class LinkServer {
   }
 }
 
-const deserializeObject = str => {
+const deserializeObject = (str) => {
   return JSON.parse(str, (key, value) => {
     if (typeof value === 'object' && value !== null) {
       if (value.__undefined__) {
diff --git a/tgui/packages/tgui-dev-server/logging.js b/tgui/packages/tgui-dev-server/logging.js
index 0dc222ae3d73..143c96b97aba 100644
--- a/tgui/packages/tgui-dev-server/logging.js
+++ b/tgui/packages/tgui-dev-server/logging.js
@@ -11,8 +11,7 @@ const isNode = process && process.release && process.release.name === 'node';
 let isChrome = false;
 try {
   isChrome = window.navigator.userAgent.toLowerCase().includes('chrome');
-}
-catch {}
+} catch {}
 
 // Timestamping function
 const getTimestamp = () => {
@@ -32,7 +31,7 @@ const getPrefix = (() => {
       bright: '\x1b[37;1m',
       reset: '\x1b[0m',
     };
-    return ns => [
+    return (ns) => [
       `${ESC.dimmed}${getTimestamp()} ${ESC.bright}${ns}${ESC.reset}`,
     ];
   }
@@ -42,21 +41,19 @@ const getPrefix = (() => {
       dimmed: 'color: #888',
       bright: 'font-weight: bold',
     };
-    return ns => [
+    return (ns) => [
       `%c${getTimestamp()}%c ${ns}`,
       styles.dimmed,
       styles.bright,
     ];
   }
-  return ns => [
-    `${getTimestamp()} ${ns}`,
-  ];
+  return (ns) => [`${getTimestamp()} ${ns}`];
 })();
 
 /**
  * Creates a logger object.
  */
-export const createLogger = ns => ({
+export const createLogger = (ns) => ({
   log: (...args) => console.log(...getPrefix(ns), ...args),
   trace: (...args) => console.trace(...getPrefix(ns), ...args),
   debug: (...args) => console.debug(...getPrefix(ns), ...args),
diff --git a/tgui/packages/tgui-dev-server/reloader.js b/tgui/packages/tgui-dev-server/reloader.js
index f130093badbb..91c5e6c90e4f 100644
--- a/tgui/packages/tgui-dev-server/reloader.js
+++ b/tgui/packages/tgui-dev-server/reloader.js
@@ -50,14 +50,9 @@ export const findCacheRoot = async () => {
   // Query the Windows Registry
   if (process.platform === 'win32') {
     logger.log('querying windows registry');
-    let userpath = await regQuery(
-      'HKCU\\Software\\Dantom\\BYOND',
-      'userpath');
+    let userpath = await regQuery('HKCU\\Software\\Dantom\\BYOND', 'userpath');
     if (userpath) {
-      cacheRoot = userpath
-        .replace(/\\$/, '')
-        .replace(/\\/g, '/')
-        + '/cache';
+      cacheRoot = userpath.replace(/\\$/, '').replace(/\\/g, '/') + '/cache';
       onCacheRootFound(cacheRoot);
       return cacheRoot;
     }
@@ -65,13 +60,13 @@ export const findCacheRoot = async () => {
   logger.log('found no cache directories');
 };
 
-const onCacheRootFound = cacheRoot => {
+const onCacheRootFound = (cacheRoot) => {
   logger.log(`found cache at '${cacheRoot}'`);
   // Plant a dummy browser window file, byond 514 stuff.
   fs.closeSync(fs.openSync(cacheRoot + '/dummy', 'w'));
 };
 
-export const reloadByondCache = async bundleDir => {
+export const reloadByondCache = async (bundleDir) => {
   const cacheRoot = await findCacheRoot();
   if (!cacheRoot) {
     return;
@@ -83,15 +78,21 @@ export const reloadByondCache = async bundleDir => {
     return;
   }
   // Get dreamseeker instances
-  const pids = cacheDirs.map(cacheDir => (
-    parseInt(cacheDir.split('/cache/tmp').pop(), 10)
-  ));
+  const pids = cacheDirs.map((cacheDir) =>
+    parseInt(cacheDir.split('/cache/tmp').pop(), 10),
+  );
   const dssPromise = DreamSeeker.getInstancesByPids(pids);
   // Copy assets
-  const assets = await resolveGlob(bundleDir, './*.+(bundle|chunk|hot-update).*');
+  const assets = await resolveGlob(
+    bundleDir,
+    './*.+(bundle|chunk|hot-update).*',
+  );
   for (let cacheDir of cacheDirs) {
     // Clear garbage
-    const garbage = await resolveGlob(cacheDir, './*.+(bundle|chunk|hot-update).*');
+    const garbage = await resolveGlob(
+      cacheDir,
+      './*.+(bundle|chunk|hot-update).*',
+    );
     try {
       // Plant a dummy browser window file
       // we'll be using this to avoid world topic for 515
@@ -105,8 +106,7 @@ export const reloadByondCache = async bundleDir => {
         fs.writeFileSync(destination, fs.readFileSync(asset));
       }
       logger.log(`copied ${assets.length} files to '${cacheDir}'`);
-    }
-    catch (err) {
+    } catch (err) {
       logger.error(`failed copying to '${cacheDir}'`);
       logger.error(err);
     }
diff --git a/tgui/packages/tgui-dev-server/util.js b/tgui/packages/tgui-dev-server/util.js
index 0fc255ed6744..9d07b96c71a0 100644
--- a/tgui/packages/tgui-dev-server/util.js
+++ b/tgui/packages/tgui-dev-server/util.js
@@ -25,8 +25,7 @@ export const resolveGlob = (...sections) => {
     try {
       fs.statSync(path);
       safePaths.push(path);
-    }
-    catch {}
+    } catch {}
   }
   return safePaths;
 };
diff --git a/tgui/packages/tgui-dev-server/webpack.js b/tgui/packages/tgui-dev-server/webpack.js
index 8cba68afcba5..139610b79ce9 100644
--- a/tgui/packages/tgui-dev-server/webpack.js
+++ b/tgui/packages/tgui-dev-server/webpack.js
@@ -18,7 +18,7 @@ const logger = createLogger('webpack');
  * @param {any} config
  * @return {WebpackCompiler}
  */
-export const createCompiler = async options => {
+export const createCompiler = async (options) => {
   const compiler = new WebpackCompiler();
   await compiler.setup(options);
   return compiler;
@@ -57,7 +57,7 @@ class WebpackCompiler {
       logger.log('compiling');
     });
     // Start reloading when it's finished
-    compiler.hooks.done.tap('tgui-dev-server', async stats => {
+    compiler.hooks.done.tap('tgui-dev-server', async (stats) => {
       // Load source maps
       await loadSourceMaps(this.bundleDir);
       // Reload cache
@@ -77,7 +77,7 @@ class WebpackCompiler {
       stats
         .toString(this.config.devServer.stats)
         .split('\n')
-        .forEach(line => logger.log(line));
+        .forEach((line) => logger.log(line));
     });
   }
 }
diff --git a/tgui/packages/tgui-dev-server/winreg.js b/tgui/packages/tgui-dev-server/winreg.js
index 669e2aad55d6..b61fddc1a255 100644
--- a/tgui/packages/tgui-dev-server/winreg.js
+++ b/tgui/packages/tgui-dev-server/winreg.js
@@ -30,17 +30,14 @@ export const regQuery = async (path, key) => {
       logger.error('could not find the end of the line');
       return null;
     }
-    const indexOfValue = stdout.indexOf(
-      '    ',
-      indexOfKey + keyPattern.length);
+    const indexOfValue = stdout.indexOf('    ', indexOfKey + keyPattern.length);
     if (indexOfValue === -1) {
       logger.error('could not find the start of the key value');
       return null;
     }
     const value = stdout.substring(indexOfValue + 4, indexOfEol);
     return value;
-  }
-  catch (err) {
+  } catch (err) {
     logger.error(err);
     return null;
   }
diff --git a/tgui/packages/tgui-panel/Notifications.js b/tgui/packages/tgui-panel/Notifications.js
index a64ddd8e306e..2b92995287fa 100644
--- a/tgui/packages/tgui-panel/Notifications.js
+++ b/tgui/packages/tgui-panel/Notifications.js
@@ -6,33 +6,20 @@
 
 import { Flex } from 'tgui/components';
 
-export const Notifications = props => {
+export const Notifications = (props) => {
   const { children } = props;
-  return (
-    <div className="Notifications">
-      {children}
-    </div>
-  );
+  return <div className="Notifications">{children}</div>;
 };
 
-const NotificationsItem = props => {
-  const {
-    rightSlot,
-    children,
-  } = props;
+const NotificationsItem = (props) => {
+  const { rightSlot, children } = props;
   return (
-    <Flex
-      align="center"
-      className="Notification">
-      <Flex.Item
-        className="Notification__content"
-        grow={1}>
+    <Flex align="center" className="Notification">
+      <Flex.Item className="Notification__content" grow={1}>
         {children}
       </Flex.Item>
       {rightSlot && (
-        <Flex.Item className="Notification__rightSlot">
-          {rightSlot}
-        </Flex.Item>
+        <Flex.Item className="Notification__rightSlot">{rightSlot}</Flex.Item>
       )}
     </Flex>
   );
diff --git a/tgui/packages/tgui-panel/Panel.js b/tgui/packages/tgui-panel/Panel.js
index a09875e9b2f3..18976735de9e 100644
--- a/tgui/packages/tgui-panel/Panel.js
+++ b/tgui/packages/tgui-panel/Panel.js
@@ -17,9 +17,7 @@ import { SettingsPanel, useSettings } from './settings';
 export const Panel = (props, context) => {
   // IE8-10: Needs special treatment due to missing Flex support
   if (Byond.IS_LTE_IE10) {
-    return (
-      <HoboPanel />
-    );
+    return <HoboPanel />;
   }
   const audio = useAudio(context);
   const settings = useSettings(context);
@@ -28,9 +26,7 @@ export const Panel = (props, context) => {
     const { useDebug, KitchenSink } = require('tgui/debug');
     const debug = useDebug(context);
     if (debug.kitchenSink) {
-      return (
-        <KitchenSink panel />
-      );
+      return <KitchenSink panel />;
     }
   }
   return (
@@ -52,17 +48,19 @@ export const Panel = (props, context) => {
                   icon="music"
                   tooltip="Music player"
                   tooltipPosition="bottom-start"
-                  onClick={() => audio.toggle()} />
+                  onClick={() => audio.toggle()}
+                />
               </Stack.Item>
               <Stack.Item>
                 <Button
                   icon={settings.visible ? 'times' : 'cog'}
                   selected={settings.visible}
-                  tooltip={settings.visible
-                    ? 'Close settings'
-                    : 'Open settings'}
+                  tooltip={
+                    settings.visible ? 'Close settings' : 'Open settings'
+                  }
                   tooltipPosition="bottom-start"
-                  onClick={() => settings.toggle()} />
+                  onClick={() => settings.toggle()}
+                />
               </Stack.Item>
             </Stack>
           </Section>
@@ -86,10 +84,9 @@ export const Panel = (props, context) => {
             </Pane.Content>
             <Notifications>
               {game.connectionLostAt && (
-                <Notifications.Item
-                  rightSlot={<ReconnectButton />}>
-                  You are either AFK, experiencing lag or the connection
-                  has closed.
+                <Notifications.Item rightSlot={<ReconnectButton />}>
+                  You are either AFK, experiencing lag or the connection has
+                  closed.
                 </Notifications.Item>
               )}
               {game.roundRestartedAt && (
@@ -119,12 +116,11 @@ const HoboPanel = (props, context) => {
             'z-index': 1000,
           }}
           selected={settings.visible}
-          onClick={() => settings.toggle()}>
+          onClick={() => settings.toggle()}
+        >
           Settings
         </Button>
-        {settings.visible && (
-          <SettingsPanel />
-        ) || (
+        {(settings.visible && <SettingsPanel />) || (
           <ChatPanel lineHeight={settings.lineHeight} />
         )}
       </Pane.Content>
diff --git a/tgui/packages/tgui-panel/audio/NowPlayingWidget.js b/tgui/packages/tgui-panel/audio/NowPlayingWidget.js
index e4fe04eed167..cbf7ad9482f8 100644
--- a/tgui/packages/tgui-panel/audio/NowPlayingWidget.js
+++ b/tgui/packages/tgui-panel/audio/NowPlayingWidget.js
@@ -17,12 +17,9 @@ export const NowPlayingWidget = (props, context) => {
   const title = audio.meta?.title;
   return (
     <Flex align="center">
-      {audio.playing && (
+      {(audio.playing && (
         <>
-          <Flex.Item
-            shrink={0}
-            mx={0.5}
-            color="label">
+          <Flex.Item shrink={0} mx={0.5} color="label">
             Now playing:
           </Flex.Item>
           <Flex.Item
@@ -30,13 +27,14 @@ export const NowPlayingWidget = (props, context) => {
             grow={1}
             style={{
               'white-space': 'nowrap',
-              'overflow': 'hidden',
+              overflow: 'hidden',
               'text-overflow': 'ellipsis',
-            }}>
+            }}
+          >
             {title || 'Unknown Track'}
           </Flex.Item>
         </>
-      ) || (
+      )) || (
         <Flex.Item grow={1} color="label">
           Nothing to play.
         </Flex.Item>
@@ -46,9 +44,12 @@ export const NowPlayingWidget = (props, context) => {
           <Button
             tooltip="Stop"
             icon="stop"
-            onClick={() => dispatch({
-              type: 'audio/stopMusic',
-            })} />
+            onClick={() =>
+              dispatch({
+                type: 'audio/stopMusic',
+              })
+            }
+          />
         </Flex.Item>
       )}
       <Flex.Item mx={0.5} fontSize="0.9em">
@@ -58,10 +59,13 @@ export const NowPlayingWidget = (props, context) => {
           value={settings.adminMusicVolume}
           step={0.0025}
           stepPixelSize={1}
-          format={value => toFixed(value * 100) + '%'}
-          onDrag={(e, value) => settings.update({
-            adminMusicVolume: value,
-          })} />
+          format={(value) => toFixed(value * 100) + '%'}
+          onDrag={(e, value) =>
+            settings.update({
+              adminMusicVolume: value,
+            })
+          }
+        />
       </Flex.Item>
     </Flex>
   );
diff --git a/tgui/packages/tgui-panel/audio/hooks.js b/tgui/packages/tgui-panel/audio/hooks.js
index 17b29a959724..504b4f5c6e79 100644
--- a/tgui/packages/tgui-panel/audio/hooks.js
+++ b/tgui/packages/tgui-panel/audio/hooks.js
@@ -7,7 +7,7 @@
 import { useSelector, useDispatch } from 'common/redux';
 import { selectAudio } from './selectors';
 
-export const useAudio = context => {
+export const useAudio = (context) => {
   const state = useSelector(context, selectAudio);
   const dispatch = useDispatch(context);
   return {
diff --git a/tgui/packages/tgui-panel/audio/middleware.js b/tgui/packages/tgui-panel/audio/middleware.js
index c9a409aa9387..ac49929aaa2b 100644
--- a/tgui/packages/tgui-panel/audio/middleware.js
+++ b/tgui/packages/tgui-panel/audio/middleware.js
@@ -6,7 +6,7 @@
 
 import { AudioPlayer } from './player';
 
-export const audioMiddleware = store => {
+export const audioMiddleware = (store) => {
   const player = new AudioPlayer();
   player.onPlay(() => {
     store.dispatch({ type: 'audio/playing' });
@@ -14,7 +14,7 @@ export const audioMiddleware = store => {
   player.onStop(() => {
     store.dispatch({ type: 'audio/stopped' });
   });
-  return next => action => {
+  return (next) => (action) => {
     const { type, payload } = action;
     if (type === 'audio/playMusic') {
       const { url, ...options } = payload;
diff --git a/tgui/packages/tgui-panel/audio/player.js b/tgui/packages/tgui-panel/audio/player.js
index 7848533e845e..f9dfa41cef9d 100644
--- a/tgui/packages/tgui-panel/audio/player.js
+++ b/tgui/packages/tgui-panel/audio/player.js
@@ -42,7 +42,7 @@ export class AudioPlayer {
       this.stop();
     });
     // Listen for playback errors
-    this.node.addEventListener('error', e => {
+    this.node.addEventListener('error', (e) => {
       if (this.playing) {
         logger.log('playback error', e.error);
         this.stop();
@@ -53,8 +53,8 @@ export class AudioPlayer {
       if (!this.playing) {
         return;
       }
-      const shouldStop = this.options.end > 0
-        && this.node.currentTime >= this.options.end;
+      const shouldStop =
+        this.options.end > 0 && this.node.currentTime >= this.options.end;
       if (shouldStop) {
         this.stop();
       }
diff --git a/tgui/packages/tgui-panel/audio/selectors.js b/tgui/packages/tgui-panel/audio/selectors.js
index 156f509cd708..89cb8f136186 100644
--- a/tgui/packages/tgui-panel/audio/selectors.js
+++ b/tgui/packages/tgui-panel/audio/selectors.js
@@ -4,4 +4,4 @@
  * @license MIT
  */
 
-export const selectAudio = state => state.audio;
+export const selectAudio = (state) => state.audio;
diff --git a/tgui/packages/tgui-panel/chat/ChatPageSettings.js b/tgui/packages/tgui-panel/chat/ChatPageSettings.js
index ba045983d2f3..dff19b2041c9 100644
--- a/tgui/packages/tgui-panel/chat/ChatPageSettings.js
+++ b/tgui/packages/tgui-panel/chat/ChatPageSettings.js
@@ -5,7 +5,14 @@
  */
 
 import { useDispatch, useSelector } from 'common/redux';
-import { Button, Collapsible, Divider, Input, Section, Stack } from 'tgui/components';
+import {
+  Button,
+  Collapsible,
+  Divider,
+  Input,
+  Section,
+  Stack,
+} from 'tgui/components';
 import { removeChatPage, toggleAcceptedType, updateChatPage } from './actions';
 import { MESSAGE_TYPES } from './constants';
 import { selectCurrentChatPage } from './selectors';
@@ -20,54 +27,71 @@ export const ChatPageSettings = (props, context) => {
           <Input
             fluid
             value={page.name}
-            onChange={(e, value) => dispatch(updateChatPage({
-              pageId: page.id,
-              name: value,
-            }))} />
+            onChange={(e, value) =>
+              dispatch(
+                updateChatPage({
+                  pageId: page.id,
+                  name: value,
+                }),
+              )
+            }
+          />
         </Stack.Item>
         <Stack.Item>
           <Button
             icon="times"
             color="red"
-            onClick={() => dispatch(removeChatPage({
-              pageId: page.id,
-            }))}>
+            onClick={() =>
+              dispatch(
+                removeChatPage({
+                  pageId: page.id,
+                }),
+              )
+            }
+          >
             Remove
           </Button>
         </Stack.Item>
       </Stack>
       <Divider />
       <Section title="Messages to display" level={2}>
-        {MESSAGE_TYPES
-          .filter(typeDef => !typeDef.important && !typeDef.admin)
-          .map(typeDef => (
+        {MESSAGE_TYPES.filter(
+          (typeDef) => !typeDef.important && !typeDef.admin,
+        ).map((typeDef) => (
+          <Button.Checkbox
+            key={typeDef.type}
+            checked={page.acceptedTypes[typeDef.type]}
+            onClick={() =>
+              dispatch(
+                toggleAcceptedType({
+                  pageId: page.id,
+                  type: typeDef.type,
+                }),
+              )
+            }
+          >
+            {typeDef.name}
+          </Button.Checkbox>
+        ))}
+        <Collapsible mt={1} color="transparent" title="Admin stuff">
+          {MESSAGE_TYPES.filter(
+            (typeDef) => !typeDef.important && typeDef.admin,
+          ).map((typeDef) => (
             <Button.Checkbox
               key={typeDef.type}
               checked={page.acceptedTypes[typeDef.type]}
-              onClick={() => dispatch(toggleAcceptedType({
-                pageId: page.id,
-                type: typeDef.type,
-              }))}>
+              onClick={() =>
+                dispatch(
+                  toggleAcceptedType({
+                    pageId: page.id,
+                    type: typeDef.type,
+                  }),
+                )
+              }
+            >
               {typeDef.name}
             </Button.Checkbox>
           ))}
-        <Collapsible
-          mt={1}
-          color="transparent"
-          title="Admin stuff">
-          {MESSAGE_TYPES
-            .filter(typeDef => !typeDef.important && typeDef.admin)
-            .map(typeDef => (
-              <Button.Checkbox
-                key={typeDef.type}
-                checked={page.acceptedTypes[typeDef.type]}
-                onClick={() => dispatch(toggleAcceptedType({
-                  pageId: page.id,
-                  type: typeDef.type,
-                }))}>
-                {typeDef.name}
-              </Button.Checkbox>
-            ))}
         </Collapsible>
       </Section>
     </Section>
diff --git a/tgui/packages/tgui-panel/chat/ChatPanel.js b/tgui/packages/tgui-panel/chat/ChatPanel.js
index 0a5deaf9febe..1577e933fb4c 100644
--- a/tgui/packages/tgui-panel/chat/ChatPanel.js
+++ b/tgui/packages/tgui-panel/chat/ChatPanel.js
@@ -16,33 +16,37 @@ export class ChatPanel extends Component {
     this.state = {
       scrollTracking: true,
     };
-    this.handleScrollTrackingChange = value => this.setState({
-      scrollTracking: value,
-    });
+    this.handleScrollTrackingChange = (value) =>
+      this.setState({
+        scrollTracking: value,
+      });
   }
 
   componentDidMount() {
     chatRenderer.mount(this.ref.current);
-    chatRenderer.events.on('scrollTrackingChanged',
-      this.handleScrollTrackingChange);
+    chatRenderer.events.on(
+      'scrollTrackingChanged',
+      this.handleScrollTrackingChange,
+    );
     this.componentDidUpdate();
   }
 
   componentWillUnmount() {
-    chatRenderer.events.off('scrollTrackingChanged',
-      this.handleScrollTrackingChange);
+    chatRenderer.events.off(
+      'scrollTrackingChanged',
+      this.handleScrollTrackingChange,
+    );
   }
 
   componentDidUpdate(prevProps) {
     requestAnimationFrame(() => {
       chatRenderer.ensureScrollTracking();
     });
-    const shouldUpdateStyle = (
-      !prevProps || shallowDiffers(this.props, prevProps)
-    );
+    const shouldUpdateStyle =
+      !prevProps || shallowDiffers(this.props, prevProps);
     if (shouldUpdateStyle) {
       chatRenderer.assignStyle({
-        'width': '100%',
+        width: '100%',
         'white-space': 'pre-wrap',
         'font-size': this.props.fontSize,
         'line-height': this.props.lineHeight,
@@ -51,9 +55,7 @@ export class ChatPanel extends Component {
   }
 
   render() {
-    const {
-      scrollTracking,
-    } = this.state;
+    const { scrollTracking } = this.state;
     return (
       <>
         <div className="Chat" ref={this.ref} />
@@ -61,7 +63,8 @@ export class ChatPanel extends Component {
           <Button
             className="Chat__scrollButton"
             icon="arrow-down"
-            onClick={() => chatRenderer.scrollToBottom()}>
+            onClick={() => chatRenderer.scrollToBottom()}
+          >
             Scroll to bottom
           </Button>
         )}
diff --git a/tgui/packages/tgui-panel/chat/ChatTabs.js b/tgui/packages/tgui-panel/chat/ChatTabs.js
index a0e6cc59e523..601cd111589e 100644
--- a/tgui/packages/tgui-panel/chat/ChatTabs.js
+++ b/tgui/packages/tgui-panel/chat/ChatTabs.js
@@ -15,11 +15,12 @@ const UnreadCountWidget = ({ value }) => (
     style={{
       'font-size': '0.7em',
       'border-radius': '0.25em',
-      'width': '1.7em',
+      width: '1.7em',
       'line-height': '1.55em',
       'background-color': 'crimson',
-      'color': '#fff',
-    }}>
+      color: '#fff',
+    }}
+  >
     {Math.min(value, 99)}
   </Box>
 );
@@ -32,16 +33,23 @@ export const ChatTabs = (props, context) => {
     <Flex align="center">
       <Flex.Item>
         <Tabs textAlign="center">
-          {pages.map(page => (
+          {pages.map((page) => (
             <Tabs.Tab
               key={page.id}
               selected={page === currentPage}
-              rightSlot={page.unreadCount > 0 && (
-                <UnreadCountWidget value={page.unreadCount} />
-              )}
-              onClick={() => dispatch(changeChatPage({
-                pageId: page.id,
-              }))}>
+              rightSlot={
+                page.unreadCount > 0 && (
+                  <UnreadCountWidget value={page.unreadCount} />
+                )
+              }
+              onClick={() =>
+                dispatch(
+                  changeChatPage({
+                    pageId: page.id,
+                  }),
+                )
+              }
+            >
               {page.name}
             </Tabs.Tab>
           ))}
@@ -54,7 +62,8 @@ export const ChatTabs = (props, context) => {
           onClick={() => {
             dispatch(addChatPage());
             dispatch(openChatSettings());
-          }} />
+          }}
+        />
       </Flex.Item>
     </Flex>
   );
diff --git a/tgui/packages/tgui-panel/chat/constants.js b/tgui/packages/tgui-panel/chat/constants.js
index 0333b6489991..97a607eac305 100644
--- a/tgui/packages/tgui-panel/chat/constants.js
+++ b/tgui/packages/tgui-panel/chat/constants.js
@@ -58,19 +58,22 @@ export const MESSAGE_TYPES = [
     type: MESSAGE_TYPE_RADIO,
     name: 'Radio',
     description: 'All departments of radio messages',
-    selector: '.alert, .minorannounce, .syndradio, .centcomradio, .aiprivradio, .comradio, .secradio, .gangradio, .engradio, .medradio, .sciradio, .suppradio, .servradio, .radio, .deptradio, .binarysay, .newscaster, .resonate',
+    selector:
+      '.alert, .minorannounce, .syndradio, .centcomradio, .aiprivradio, .comradio, .secradio, .gangradio, .engradio, .medradio, .sciradio, .suppradio, .servradio, .radio, .deptradio, .binarysay, .newscaster, .resonate',
   },
   {
     type: MESSAGE_TYPE_INFO,
     name: 'Info',
     description: 'Non-urgent messages from the game and items',
-    selector: '.notice:not(.pm), .adminnotice, .info, .sinister, .cult, .infoplain, .announce, .hear, .smallnotice, .holoparasite, .boldnotice',
+    selector:
+      '.notice:not(.pm), .adminnotice, .info, .sinister, .cult, .infoplain, .announce, .hear, .smallnotice, .holoparasite, .boldnotice',
   },
   {
     type: MESSAGE_TYPE_WARNING,
     name: 'Warnings',
     description: 'Urgent messages from the game and items',
-    selector: '.warning:not(.pm), .critical, .userdanger, .italics, .alertsyndie, .warningplain',
+    selector:
+      '.warning:not(.pm), .critical, .userdanger, .italics, .alertsyndie, .warningplain',
   },
   {
     type: MESSAGE_TYPE_DEADCHAT,
diff --git a/tgui/packages/tgui-panel/chat/middleware.js b/tgui/packages/tgui-panel/chat/middleware.js
index 6cfc72bd2994..1556969677b4 100644
--- a/tgui/packages/tgui-panel/chat/middleware.js
+++ b/tgui/packages/tgui-panel/chat/middleware.js
@@ -8,32 +8,39 @@ import DOMPurify from 'dompurify';
 import { storage } from 'common/storage';
 import { loadSettings, updateSettings } from '../settings/actions';
 import { selectSettings } from '../settings/selectors';
-import { addChatPage, changeChatPage, changeScrollTracking, loadChat, rebuildChat, removeChatPage, saveChatToDisk, toggleAcceptedType, updateMessageCount } from './actions';
+import {
+  addChatPage,
+  changeChatPage,
+  changeScrollTracking,
+  loadChat,
+  rebuildChat,
+  removeChatPage,
+  saveChatToDisk,
+  toggleAcceptedType,
+  updateMessageCount,
+} from './actions';
 import { MAX_PERSISTED_MESSAGES, MESSAGE_SAVE_INTERVAL } from './constants';
 import { createMessage, serializeMessage } from './model';
 import { chatRenderer } from './renderer';
 import { selectChat, selectCurrentChatPage } from './selectors';
 
 // List of blacklisted tags
-const FORBID_TAGS = [
-  'a',
-  'iframe',
-  'link',
-  'video',
-];
+const FORBID_TAGS = ['a', 'iframe', 'link', 'video'];
 
-const saveChatToStorage = async store => {
+const saveChatToStorage = async (store) => {
   const state = selectChat(store.getState());
-  const fromIndex = Math.max(0,
-    chatRenderer.messages.length - MAX_PERSISTED_MESSAGES);
+  const fromIndex = Math.max(
+    0,
+    chatRenderer.messages.length - MAX_PERSISTED_MESSAGES,
+  );
   const messages = chatRenderer.messages
     .slice(fromIndex)
-    .map(message => serializeMessage(message));
+    .map((message) => serializeMessage(message));
   storage.set('chat-state', state);
   storage.set('chat-messages', messages);
 };
 
-const loadChatFromStorage = async store => {
+const loadChatFromStorage = async (store) => {
   const [state, messages] = await Promise.all([
     storage.get('chat-state'),
     storage.get('chat-messages'),
@@ -64,10 +71,10 @@ const loadChatFromStorage = async store => {
   store.dispatch(loadChat(state));
 };
 
-export const chatMiddleware = store => {
+export const chatMiddleware = (store) => {
   let initialized = false;
   let loaded = false;
-  chatRenderer.events.on('batchProcessed', countByType => {
+  chatRenderer.events.on('batchProcessed', (countByType) => {
     // Use this flag to workaround unread messages caused by
     // loading them from storage. Side effect of that, is that
     // message count can not be trusted, only unread count.
@@ -75,11 +82,11 @@ export const chatMiddleware = store => {
       store.dispatch(updateMessageCount(countByType));
     }
   });
-  chatRenderer.events.on('scrollTrackingChanged', scrollTracking => {
+  chatRenderer.events.on('scrollTrackingChanged', (scrollTracking) => {
     store.dispatch(changeScrollTracking(scrollTracking));
   });
   setInterval(() => saveChatToStorage(store), MESSAGE_SAVE_INTERVAL);
-  return next => action => {
+  return (next) => (action) => {
     const { type, payload } = action;
     if (!initialized) {
       initialized = true;
@@ -99,10 +106,12 @@ export const chatMiddleware = store => {
       loaded = true;
       return;
     }
-    if (type === changeChatPage.type
-        || type === addChatPage.type
-        || type === removeChatPage.type
-        || type === toggleAcceptedType.type) {
+    if (
+      type === changeChatPage.type ||
+      type === addChatPage.type ||
+      type === removeChatPage.type ||
+      type === toggleAcceptedType.type
+    ) {
       next(action);
       const page = selectCurrentChatPage(store.getState());
       chatRenderer.changePage(page);
@@ -119,7 +128,8 @@ export const chatMiddleware = store => {
         settings.highlightText,
         settings.highlightColor,
         settings.matchWord,
-        settings.matchCase);
+        settings.matchCase,
+      );
       return;
     }
     if (type === 'roundrestart') {
diff --git a/tgui/packages/tgui-panel/chat/model.js b/tgui/packages/tgui-panel/chat/model.js
index 7400d5e13cd3..fa12153890d8 100644
--- a/tgui/packages/tgui-panel/chat/model.js
+++ b/tgui/packages/tgui-panel/chat/model.js
@@ -7,11 +7,10 @@
 import { createUuid } from 'common/uuid';
 import { MESSAGE_TYPES, MESSAGE_TYPE_INTERNAL } from './constants';
 
-export const canPageAcceptType = (page, type) => (
-  type.startsWith(MESSAGE_TYPE_INTERNAL) || page.acceptedTypes[type]
-);
+export const canPageAcceptType = (page, type) =>
+  type.startsWith(MESSAGE_TYPE_INTERNAL) || page.acceptedTypes[type];
 
-export const createPage = obj => {
+export const createPage = (obj) => {
   let acceptedTypes = {};
 
   for (let typeDef of MESSAGE_TYPES) {
@@ -39,12 +38,12 @@ export const createMainPage = () => {
   });
 };
 
-export const createMessage = payload => ({
+export const createMessage = (payload) => ({
   createdAt: Date.now(),
   ...payload,
 });
 
-export const serializeMessage = message => ({
+export const serializeMessage = (message) => ({
   type: message.type,
   text: message.text,
   html: message.html,
@@ -52,7 +51,6 @@ export const serializeMessage = message => ({
   createdAt: message.createdAt,
 });
 
-export const isSameMessage = (a, b) => (
-  typeof a.text === 'string' && a.text === b.text
-  || typeof a.html === 'string' && a.html === b.html
-);
+export const isSameMessage = (a, b) =>
+  (typeof a.text === 'string' && a.text === b.text) ||
+  (typeof a.html === 'string' && a.html === b.html);
diff --git a/tgui/packages/tgui-panel/chat/reducer.js b/tgui/packages/tgui-panel/chat/reducer.js
index 0188b1fabe8b..e75fbd06e43e 100644
--- a/tgui/packages/tgui-panel/chat/reducer.js
+++ b/tgui/packages/tgui-panel/chat/reducer.js
@@ -4,7 +4,16 @@
  * @license MIT
  */
 
-import { addChatPage, changeChatPage, loadChat, removeChatPage, toggleAcceptedType, updateChatPage, updateMessageCount, changeScrollTracking } from './actions';
+import {
+  addChatPage,
+  changeChatPage,
+  loadChat,
+  removeChatPage,
+  toggleAcceptedType,
+  updateChatPage,
+  updateMessageCount,
+  changeScrollTracking,
+} from './actions';
 import { canPageAcceptType, createMainPage } from './model';
 
 const mainPage = createMainPage();
@@ -13,9 +22,7 @@ export const initialState = {
   version: 5,
   currentPageId: mainPage.id,
   scrollTracking: true,
-  pages: [
-    mainPage.id,
-  ],
+  pages: [mainPage.id],
   pageById: {
     [mainPage.id]: mainPage,
   },
@@ -74,7 +81,7 @@ export const chatReducer = (state = initialState, action) => {
   }
   if (type === updateMessageCount.type) {
     const countByType = payload;
-    const pages = state.pages.map(id => state.pageById[id]);
+    const pages = state.pages.map((id) => state.pageById[id]);
     const currentPage = state.pageById[state.currentPageId];
     const nextPageById = { ...state.pageById };
     for (let page of pages) {
@@ -170,7 +177,7 @@ export const chatReducer = (state = initialState, action) => {
       },
     };
     delete nextState.pageById[pageId];
-    nextState.pages = nextState.pages.filter(id => id !== pageId);
+    nextState.pages = nextState.pages.filter((id) => id !== pageId);
     if (nextState.pages.length === 0) {
       nextState.pages.push(mainPage.id);
       nextState.pageById[mainPage.id] = mainPage;
diff --git a/tgui/packages/tgui-panel/chat/renderer.js b/tgui/packages/tgui-panel/chat/renderer.js
index d99d0dbc445f..969f8ad93263 100644
--- a/tgui/packages/tgui-panel/chat/renderer.js
+++ b/tgui/packages/tgui-panel/chat/renderer.js
@@ -7,11 +7,25 @@
 import { EventEmitter } from 'common/events';
 import { classes } from 'common/react';
 import { createLogger } from 'tgui/logging';
-import { COMBINE_MAX_MESSAGES, COMBINE_MAX_TIME_WINDOW, IMAGE_RETRY_DELAY, IMAGE_RETRY_LIMIT, IMAGE_RETRY_MESSAGE_AGE, MAX_PERSISTED_MESSAGES, MAX_VISIBLE_MESSAGES, MESSAGE_PRUNE_INTERVAL, MESSAGE_TYPES, MESSAGE_TYPE_COMBAT, MESSAGE_TYPE_INTERNAL, MESSAGE_TYPE_LOCALCHAT, MESSAGE_TYPE_UNKNOWN } from './constants';
+import {
+  COMBINE_MAX_MESSAGES,
+  COMBINE_MAX_TIME_WINDOW,
+  IMAGE_RETRY_DELAY,
+  IMAGE_RETRY_LIMIT,
+  IMAGE_RETRY_MESSAGE_AGE,
+  MAX_PERSISTED_MESSAGES,
+  MAX_VISIBLE_MESSAGES,
+  MESSAGE_PRUNE_INTERVAL,
+  MESSAGE_TYPES,
+  MESSAGE_TYPE_COMBAT,
+  MESSAGE_TYPE_INTERNAL,
+  MESSAGE_TYPE_LOCALCHAT,
+  MESSAGE_TYPE_UNKNOWN,
+} from './constants';
 import { render } from 'inferno';
 import { canPageAcceptType, createMessage, isSameMessage } from './model';
 import { highlightNode, linkifyNode } from './replaceInTextNode';
-import { Tooltip } from "../../tgui/components";
+import { Tooltip } from '../../tgui/components';
 
 const logger = createLogger('chatRenderer');
 
@@ -27,11 +41,11 @@ export const TGUI_CHAT_COMPONENTS = {
 // List of injectable attibute names mapped to their proper prop
 // We need this because attibutes don't support lowercase names
 export const TGUI_CHAT_ATTRIBUTES_TO_PROPS = {
-  "position": "position",
-  "content": "content",
+  position: 'position',
+  content: 'content',
 };
 
-const findNearestScrollableParent = startingNode => {
+const findNearestScrollableParent = (startingNode) => {
   const body = document.body;
   let node = startingNode;
   while (node && node !== body) {
@@ -66,7 +80,7 @@ const createReconnectedNode = () => {
   return node;
 };
 
-const handleImageError = e => {
+const handleImageError = (e) => {
   setTimeout(() => {
     /** @type {HTMLImageElement} */
     const node = e.target;
@@ -85,7 +99,7 @@ const handleImageError = e => {
 /**
  * Assigns a "times-repeated" badge to the message.
  */
-const updateMessageBadge = message => {
+const updateMessageBadge = (message) => {
   const { node, times } = message;
   if (!node || !times) {
     // Nothing to update
@@ -94,10 +108,7 @@ const updateMessageBadge = message => {
   const foundBadge = node.querySelector('.Chat__badge');
   const badge = foundBadge || document.createElement('div');
   badge.textContent = times;
-  badge.className = classes([
-    'Chat__badge',
-    'Chat__badge--animate',
-  ]);
+  badge.className = classes(['Chat__badge', 'Chat__badge--animate']);
   requestAnimationFrame(() => {
     badge.className = 'Chat__badge';
   });
@@ -121,13 +132,12 @@ class ChatRenderer {
     /** @type {HTMLElement} */
     this.scrollNode = null;
     this.scrollTracking = true;
-    this.handleScroll = type => {
+    this.handleScroll = (type) => {
       const node = this.scrollNode;
       const height = node.scrollHeight;
       const bottom = node.scrollTop + node.offsetHeight;
-      const scrollTracking = (
-        Math.abs(height - bottom) < SCROLL_TRACKING_TOLERANCE
-      );
+      const scrollTracking =
+        Math.abs(height - bottom) < SCROLL_TRACKING_TOLERANCE;
       if (scrollTracking !== this.scrollTracking) {
         this.scrollTracking = scrollTracking;
         this.events.emit('scrollTrackingChanged', scrollTracking);
@@ -193,18 +203,19 @@ class ChatRenderer {
     const lines = String(text)
       .split(',')
       // eslint-disable-next-line no-useless-escape
-      .map(str => str.trim().replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))
-      .filter(str => (
-        // Must be longer than one character
-        str && str.length > 1
-      ));
+      .map((str) => str.trim().replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))
+      .filter(
+        (str) =>
+          // Must be longer than one character
+          str && str.length > 1,
+      );
     // Nothing to match, reset highlighting
     if (lines.length === 0) {
       this.highlightRegex = null;
       this.highlightColor = null;
       return;
     }
-    const pattern = `${(matchWord ? '\\b' : '')}(${lines.join('|')})${(matchWord ? '\\b' : '')}`;
+    const pattern = `${matchWord ? '\\b' : ''}(${lines.join('|')})${matchWord ? '\\b' : ''}`;
     const flags = 'g' + (matchCase ? '' : 'i');
     this.highlightRegex = new RegExp(pattern, flags);
     this.highlightColor = color;
@@ -249,14 +260,13 @@ class ChatRenderer {
     const to = Math.max(0, len - COMBINE_MAX_MESSAGES);
     for (let i = from; i >= to; i--) {
       const message = this.visibleMessages[i];
-      const matches = (
+      const matches =
         // Is not an internal message
-        !message.type.startsWith(MESSAGE_TYPE_INTERNAL)
+        !message.type.startsWith(MESSAGE_TYPE_INTERNAL) &&
         // Text payload must fully match
-        && isSameMessage(message, predicate)
+        isSameMessage(message, predicate) &&
         // Must land within the specified time window
-        && now < message.createdAt + COMBINE_MAX_TIME_WINDOW
-      );
+        now < message.createdAt + COMBINE_MAX_TIME_WINDOW;
       if (matches) {
         return message;
       }
@@ -265,17 +275,13 @@ class ChatRenderer {
   }
 
   processBatch(batch, options = {}) {
-    const {
-      prepend,
-      notifyListeners = true,
-    } = options;
+    const { prepend, notifyListeners = true } = options;
     const now = Date.now();
     // Queue up messages until chat is ready
     if (!this.isReady()) {
       if (prepend) {
         this.queue = [...batch, ...this.queue];
-      }
-      else {
+      } else {
         this.queue = [...this.queue, ...batch];
       }
       return;
@@ -291,14 +297,15 @@ class ChatRenderer {
       if (combinable) {
         combinable.times = (combinable.times || 1) + 1;
         updateMessageBadge(combinable);
-        if ((
-          combinable.type === MESSAGE_TYPE_COMBAT)
-          || combinable.type === MESSAGE_TYPE_LOCALCHAT
-          && combinable.times < 10) {
+        if (
+          combinable.type === MESSAGE_TYPE_COMBAT ||
+          (combinable.type === MESSAGE_TYPE_LOCALCHAT && combinable.times < 10)
+        ) {
           let muhstyle = combinable.node.style;
-          let fontsize = document.documentElement.style.getPropertyValue('font-size');
+          let fontsize =
+            document.documentElement.style.getPropertyValue('font-size');
           let basesize = parseInt(fontsize.slice(0, -2), 10);
-          muhstyle.setProperty('font-size', basesize + (combinable.times) + 'px');
+          muhstyle.setProperty('font-size', basesize + combinable.times + 'px');
         }
         continue;
       }
@@ -320,15 +327,14 @@ class ChatRenderer {
         // Payload is HTML
         else if (message.html) {
           node.innerHTML = message.html;
-        }
-        else {
+        } else {
           logger.error('Error: message is missing text payload', message);
         }
         // Get all nodes in this message that want to be rendered like jsx
-        const nodes = node.querySelectorAll("[data-component]");
+        const nodes = node.querySelectorAll('[data-component]');
         for (let i = 0; i < nodes.length; i++) {
           const childNode = nodes[i];
-          const targetName = childNode.getAttribute("data-component");
+          const targetName = childNode.getAttribute('data-component');
           // Let's pull out the attibute info we need
           let outputProps = {};
           for (let j = 0; j < childNode.attributes.length; j++) {
@@ -337,20 +343,18 @@ class ChatRenderer {
             let working_value = attribute.nodeValue;
             // We can't do the "if it has no value it's truthy" trick
             // Because getAttribute returns "", not null. Hate IE
-            if (working_value === "$true") {
+            if (working_value === '$true') {
               working_value = true;
-            }
-            else if (working_value === "$false") {
+            } else if (working_value === '$false') {
               working_value = false;
-            }
-            else if (!isNaN(working_value)) {
+            } else if (!isNaN(working_value)) {
               const parsed_float = parseFloat(working_value);
               if (!isNaN(parsed_float)) {
                 working_value = parsed_float;
               }
             }
 
-            let canon_name = attribute.nodeName.replace("data-", "");
+            let canon_name = attribute.nodeName.replace('data-', '');
             // html attributes don't support upper case chars, so we need to map
             canon_name = TGUI_CHAT_ATTRIBUTES_TO_PROPS[canon_name];
             outputProps[canon_name] = working_value;
@@ -364,18 +368,17 @@ class ChatRenderer {
           render(
             <Element {...outputProps}>
               <span dangerouslySetInnerHTML={oldHtml} />
-            </Element>, childNode);
+            </Element>,
+            childNode,
+          );
           /* eslint-enable react/no-danger */
-
         }
 
         // Highlight text
         if (!message.avoidHighlighting && this.highlightRegex) {
-          const highlighted = highlightNode(node,
-            this.highlightRegex,
-            text => (
-              createHighlightNode(text, this.highlightColor)
-            ));
+          const highlighted = highlightNode(node, this.highlightRegex, (text) =>
+            createHighlightNode(text, this.highlightColor),
+          );
           if (highlighted) {
             node.className += ' ChatMessage--highlighted';
           }
@@ -400,10 +403,12 @@ class ChatRenderer {
       if (!message.type) {
         // IE8: Does not support querySelector on elements that
         // are not yet in the document.
-        const typeDef = !Byond.IS_LTE_IE8 && MESSAGE_TYPES
-          .find(typeDef => (
-            typeDef.selector && node.querySelector(typeDef.selector)
-          ));
+        const typeDef =
+          !Byond.IS_LTE_IE8 &&
+          MESSAGE_TYPES.find(
+            (typeDef) =>
+              typeDef.selector && node.querySelector(typeDef.selector),
+          );
         message.type = typeDef?.type || MESSAGE_TYPE_UNKNOWN;
       }
       updateMessageBadge(message);
@@ -422,8 +427,7 @@ class ChatRenderer {
       const firstChild = this.rootNode.childNodes[0];
       if (prepend && firstChild) {
         this.rootNode.insertBefore(fragment, firstChild);
-      }
-      else {
+      } else {
         this.rootNode.appendChild(fragment);
       }
       if (this.scrollTracking) {
@@ -449,8 +453,7 @@ class ChatRenderer {
     // Visible messages
     {
       const messages = this.visibleMessages;
-      const fromIndex = Math.max(0,
-        messages.length - MAX_VISIBLE_MESSAGES);
+      const fromIndex = Math.max(0, messages.length - MAX_VISIBLE_MESSAGES);
       if (fromIndex > 0) {
         this.visibleMessages = messages.slice(fromIndex);
         for (let i = 0; i < fromIndex; i++) {
@@ -460,16 +463,18 @@ class ChatRenderer {
           message.node = 'pruned';
         }
         // Remove pruned messages from the message array
-        this.messages = this.messages.filter(message => (
-          message.node !== 'pruned'
-        ));
+        this.messages = this.messages.filter(
+          (message) => message.node !== 'pruned',
+        );
         logger.log(`pruned ${fromIndex} visible messages`);
       }
     }
     // All messages
     {
-      const fromIndex = Math.max(0,
-        this.messages.length - MAX_PERSISTED_MESSAGES);
+      const fromIndex = Math.max(
+        0,
+        this.messages.length - MAX_PERSISTED_MESSAGES,
+      );
       if (fromIndex > 0) {
         this.messages = this.messages.slice(fromIndex);
         logger.log(`pruned ${fromIndex} stored messages`);
@@ -482,8 +487,10 @@ class ChatRenderer {
       return;
     }
     // Make a copy of messages
-    const fromIndex = Math.max(0,
-      this.messages.length - MAX_PERSISTED_MESSAGES);
+    const fromIndex = Math.max(
+      0,
+      this.messages.length - MAX_PERSISTED_MESSAGES,
+    );
     const messages = this.messages.slice(fromIndex);
     // Remove existing nodes
     for (let message of messages) {
@@ -523,18 +530,21 @@ class ChatRenderer {
       }
     }
     // Create a page
-    const pageHtml = '<!doctype html>\n'
-      + '<html>\n'
-      + '<head>\n'
-      + '<title>SS13 Chat Log</title>\n'
-      + '<style>\n' + cssText + '</style>\n'
-      + '</head>\n'
-      + '<body>\n'
-      + '<div class="Chat">\n'
-      + messagesHtml
-      + '</div>\n'
-      + '</body>\n'
-      + '</html>\n';
+    const pageHtml =
+      '<!doctype html>\n' +
+      '<html>\n' +
+      '<head>\n' +
+      '<title>SS13 Chat Log</title>\n' +
+      '<style>\n' +
+      cssText +
+      '</style>\n' +
+      '</head>\n' +
+      '<body>\n' +
+      '<div class="Chat">\n' +
+      messagesHtml +
+      '</div>\n' +
+      '</body>\n' +
+      '</html>\n';
     // Create and send a nice blob
     const blob = new Blob([pageHtml]);
     const timestamp = new Date()
diff --git a/tgui/packages/tgui-panel/chat/replaceInTextNode.js b/tgui/packages/tgui-panel/chat/replaceInTextNode.js
index 0db2b2193e8a..53601202ec3e 100644
--- a/tgui/packages/tgui-panel/chat/replaceInTextNode.js
+++ b/tgui/packages/tgui-panel/chat/replaceInTextNode.js
@@ -7,7 +7,7 @@
 /**
  * Replaces text matching a regular expression with a custom node.
  */
-export const replaceInTextNode = (regex, createNode) => node => {
+export const replaceInTextNode = (regex, createNode) => (node) => {
   const text = node.textContent;
   const textLength = text.length;
   let match;
@@ -15,7 +15,7 @@ export const replaceInTextNode = (regex, createNode) => node => {
   let fragment;
   let n = 0;
   // eslint-disable-next-line no-cond-assign
-  while (match = regex.exec(text)) {
+  while ((match = regex.exec(text))) {
     n += 1;
     // Lazy init fragment
     if (!fragment) {
@@ -26,8 +26,9 @@ export const replaceInTextNode = (regex, createNode) => node => {
     const matchIndex = match.index;
     // Insert previous unmatched chunk
     if (lastIndex < matchIndex) {
-      fragment.appendChild(document.createTextNode(
-        text.substring(lastIndex, matchIndex)));
+      fragment.appendChild(
+        document.createTextNode(text.substring(lastIndex, matchIndex)),
+      );
     }
     lastIndex = matchIndex + matchLength;
     // Create a wrapper node
@@ -36,8 +37,9 @@ export const replaceInTextNode = (regex, createNode) => node => {
   if (fragment) {
     // Insert the remaining unmatched chunk
     if (lastIndex < textLength) {
-      fragment.appendChild(document.createTextNode(
-        text.substring(lastIndex, textLength)));
+      fragment.appendChild(
+        document.createTextNode(text.substring(lastIndex, textLength)),
+      );
     }
     // Commit the fragment
     node.parentNode.replaceChild(fragment, node);
@@ -45,17 +47,15 @@ export const replaceInTextNode = (regex, createNode) => node => {
   return n;
 };
 
-
 // Highlight
 // --------------------------------------------------------
 
 /**
  * Default highlight node.
  */
-const createHighlightNode = text => {
+const createHighlightNode = (text) => {
   const node = document.createElement('span');
-  node.setAttribute('style',
-    'background-color:#fd4;color:#000');
+  node.setAttribute('style', 'background-color:#fd4;color:#000');
   node.textContent = text;
   return node;
 };
@@ -83,19 +83,18 @@ export const highlightNode = (
     // Is a text node
     if (node.nodeType === 3) {
       n += replaceInTextNode(regex, createNode)(node);
-    }
-    else {
+    } else {
       n += highlightNode(node, regex, createNode);
     }
   }
   return n;
 };
 
-
 // Linkify
 // --------------------------------------------------------
 
-const URL_REGEX = /(?:(?:https?:\/\/)|(?:www\.))(?:[^ ]*?\.[^ ]*?)+[-A-Za-z0-9+&@#/%?=~_|$!:,.;()]+/ig;
+const URL_REGEX =
+  /(?:(?:https?:\/\/)|(?:www\.))(?:[^ ]*?\.[^ ]*?)+[-A-Za-z0-9+&@#/%?=~_|$!:,.;()]+/gi;
 
 /**
  * Highlights the text in the node based on the provided regular expression.
@@ -103,7 +102,7 @@ const URL_REGEX = /(?:(?:https?:\/\/)|(?:www\.))(?:[^ ]*?\.[^ ]*?)+[-A-Za-z0-9+&
  * @param {Node} node Node which you want to process
  * @returns {number} Number of matches
  */
-export const linkifyNode = node => {
+export const linkifyNode = (node) => {
   let n = 0;
   const childNodes = node.childNodes;
   for (let i = 0; i < childNodes.length; i++) {
@@ -112,15 +111,14 @@ export const linkifyNode = node => {
     // Is a text node
     if (node.nodeType === 3) {
       n += linkifyTextNode(node);
-    }
-    else if (tag !== 'a') {
+    } else if (tag !== 'a') {
       n += linkifyNode(node);
     }
   }
   return n;
 };
 
-const linkifyTextNode = replaceInTextNode(URL_REGEX, text => {
+const linkifyTextNode = replaceInTextNode(URL_REGEX, (text) => {
   const node = document.createElement('a');
   node.href = text;
   node.textContent = text;
diff --git a/tgui/packages/tgui-panel/chat/selectors.js b/tgui/packages/tgui-panel/chat/selectors.js
index 2bcc65318409..6352b7cddf0a 100644
--- a/tgui/packages/tgui-panel/chat/selectors.js
+++ b/tgui/packages/tgui-panel/chat/selectors.js
@@ -6,16 +6,12 @@
 
 import { map } from 'common/collections';
 
-export const selectChat = state => state.chat;
+export const selectChat = (state) => state.chat;
 
-export const selectChatPages = state => (
-  map(id => state.chat.pageById[id])(state.chat.pages)
-);
+export const selectChatPages = (state) =>
+  map((id) => state.chat.pageById[id])(state.chat.pages);
 
-export const selectCurrentChatPage = state => (
-  state.chat.pageById[state.chat.currentPageId]
-);
+export const selectCurrentChatPage = (state) =>
+  state.chat.pageById[state.chat.currentPageId];
 
-export const selectChatPageById = id => state => (
-  state.chat.pageById[id]
-);
+export const selectChatPageById = (id) => (state) => state.chat.pageById[id];
diff --git a/tgui/packages/tgui-panel/game/hooks.js b/tgui/packages/tgui-panel/game/hooks.js
index e9567b916b46..859aaa09a407 100644
--- a/tgui/packages/tgui-panel/game/hooks.js
+++ b/tgui/packages/tgui-panel/game/hooks.js
@@ -7,6 +7,6 @@
 import { useSelector } from 'common/redux';
 import { selectGame } from './selectors';
 
-export const useGame = context => {
+export const useGame = (context) => {
   return useSelector(context, selectGame);
 };
diff --git a/tgui/packages/tgui-panel/game/middleware.js b/tgui/packages/tgui-panel/game/middleware.js
index ab86f80af3cf..53dd45bb46e0 100644
--- a/tgui/packages/tgui-panel/game/middleware.js
+++ b/tgui/packages/tgui-panel/game/middleware.js
@@ -9,7 +9,7 @@ import { connectionLost, connectionRestored, roundRestarted } from './actions';
 import { selectGame } from './selectors';
 import { CONNECTION_LOST_AFTER } from './constants';
 
-const withTimestamp = action => ({
+const withTimestamp = (action) => ({
   ...action,
   meta: {
     ...action.meta,
@@ -17,7 +17,7 @@ const withTimestamp = action => ({
   },
 });
 
-export const gameMiddleware = store => {
+export const gameMiddleware = (store) => {
   let lastPingedAt;
 
   setInterval(() => {
@@ -26,8 +26,8 @@ export const gameMiddleware = store => {
       return;
     }
     const game = selectGame(state);
-    const pingsAreFailing = lastPingedAt
-       && Date.now() >= lastPingedAt + CONNECTION_LOST_AFTER;
+    const pingsAreFailing =
+      lastPingedAt && Date.now() >= lastPingedAt + CONNECTION_LOST_AFTER;
     if (!game.connectionLostAt && pingsAreFailing) {
       store.dispatch(withTimestamp(connectionLost()));
     }
@@ -36,7 +36,7 @@ export const gameMiddleware = store => {
     }
   }, 1000);
 
-  return next => action => {
+  return (next) => (action) => {
     const { type } = action;
 
     if (type === pingSuccess.type || type === pingSoft.type) {
diff --git a/tgui/packages/tgui-panel/game/selectors.js b/tgui/packages/tgui-panel/game/selectors.js
index dc2d7040f9c8..a3b93b327d97 100644
--- a/tgui/packages/tgui-panel/game/selectors.js
+++ b/tgui/packages/tgui-panel/game/selectors.js
@@ -4,4 +4,4 @@
  * @license MIT
  */
 
-export const selectGame = state => state.game;
+export const selectGame = (state) => state.game;
diff --git a/tgui/packages/tgui-panel/index.js b/tgui/packages/tgui-panel/index.js
index 721fa97fb50c..fed102d5fa34 100644
--- a/tgui/packages/tgui-panel/index.js
+++ b/tgui/packages/tgui-panel/index.js
@@ -81,32 +81,35 @@ const setupApp = () => {
   Byond.winset('browseroutput', {
     'is-visible': true,
     'is-disabled': false,
-    'pos': '0x0',
-    'size': '0x0',
+    pos: '0x0',
+    size: '0x0',
   });
 
   // Resize the panel to match the non-browser output
-  Byond.winget('output').then(output => {
+  Byond.winget('output').then((output) => {
     Byond.winset('browseroutput', {
-      'size': output.size,
+      size: output.size,
     });
   });
 
   // Enable hot module reloading
   if (module.hot) {
     setupHotReloading();
-    module.hot.accept([
-      './audio',
-      './chat',
-      './game',
-      './Notifications',
-      './Panel',
-      './ping',
-      './settings',
-      './telemetry',
-    ], () => {
-      renderApp();
-    });
+    module.hot.accept(
+      [
+        './audio',
+        './chat',
+        './game',
+        './Notifications',
+        './Panel',
+        './ping',
+        './settings',
+        './telemetry',
+      ],
+      () => {
+        renderApp();
+      },
+    );
   }
 };
 
diff --git a/tgui/packages/tgui-panel/panelFocus.js b/tgui/packages/tgui-panel/panelFocus.js
index 6922418c8997..b7cea2293149 100644
--- a/tgui/packages/tgui-panel/panelFocus.js
+++ b/tgui/packages/tgui-panel/panelFocus.js
@@ -20,13 +20,13 @@ const deferredFocusMap = () => setImmediate(() => focusMap());
 export const setupPanelFocusHacks = () => {
   let focusStolen = false;
   let clickStartPos = null;
-  window.addEventListener('focusin', e => {
+  window.addEventListener('focusin', (e) => {
     focusStolen = canStealFocus(e.target);
   });
-  window.addEventListener('mousedown', e => {
+  window.addEventListener('mousedown', (e) => {
     clickStartPos = [e.screenX, e.screenY];
   });
-  window.addEventListener('mouseup', e => {
+  window.addEventListener('mouseup', (e) => {
     if (clickStartPos) {
       const clickEndPos = [e.screenX, e.screenY];
       const dist = vecLength(vecSubtract(clickEndPos, clickStartPos));
@@ -38,7 +38,7 @@ export const setupPanelFocusHacks = () => {
       deferredFocusMap();
     }
   });
-  globalEvents.on('keydown', key => {
+  globalEvents.on('keydown', (key) => {
     if (key.isModifierKey()) {
       return;
     }
diff --git a/tgui/packages/tgui-panel/ping/PingIndicator.js b/tgui/packages/tgui-panel/ping/PingIndicator.js
index b663cd3a1809..aadbd1c134b5 100644
--- a/tgui/packages/tgui-panel/ping/PingIndicator.js
+++ b/tgui/packages/tgui-panel/ping/PingIndicator.js
@@ -17,14 +17,10 @@ export const PingIndicator = (props, context) => {
     new Color(220, 200, 40),
     new Color(60, 220, 40),
   ]);
-  const roundtrip = ping.roundtrip
-    ? toFixed(ping.roundtrip)
-    : '--';
+  const roundtrip = ping.roundtrip ? toFixed(ping.roundtrip) : '--';
   return (
     <div className="Ping">
-      <Box
-        className="Ping__indicator"
-        backgroundColor={color} />
+      <Box className="Ping__indicator" backgroundColor={color} />
       {roundtrip}
     </div>
   );
diff --git a/tgui/packages/tgui-panel/ping/middleware.js b/tgui/packages/tgui-panel/ping/middleware.js
index fb86de9cc48f..e5b593d822fd 100644
--- a/tgui/packages/tgui-panel/ping/middleware.js
+++ b/tgui/packages/tgui-panel/ping/middleware.js
@@ -7,7 +7,7 @@
 import { pingFail, pingReply, pingSoft, pingSuccess } from './actions';
 import { PING_QUEUE_SIZE, PING_TIMEOUT } from './constants';
 
-export const pingMiddleware = store => {
+export const pingMiddleware = (store) => {
   let initialized = false;
   let index = 0;
   const pings = [];
@@ -26,7 +26,7 @@ export const pingMiddleware = store => {
     index = (index + 1) % PING_QUEUE_SIZE;
   };
 
-  return next => action => {
+  return (next) => (action) => {
     const { type, payload } = action;
 
     if (!initialized) {
diff --git a/tgui/packages/tgui-panel/ping/reducer.js b/tgui/packages/tgui-panel/ping/reducer.js
index 874cb75a9b8d..49b9522c06fc 100644
--- a/tgui/packages/tgui-panel/ping/reducer.js
+++ b/tgui/packages/tgui-panel/ping/reducer.js
@@ -6,7 +6,11 @@
 
 import { clamp01, scale } from 'common/math';
 import { pingFail, pingSuccess } from './actions';
-import { PING_MAX_FAILS, PING_ROUNDTRIP_BEST, PING_ROUNDTRIP_WORST } from './constants';
+import {
+  PING_MAX_FAILS,
+  PING_ROUNDTRIP_BEST,
+  PING_ROUNDTRIP_WORST,
+} from './constants';
 
 export const pingReducer = (state = {}, action) => {
   const { type, payload } = action;
@@ -15,8 +19,8 @@ export const pingReducer = (state = {}, action) => {
     const { roundtrip } = payload;
     const prevRoundtrip = state.roundtripAvg || roundtrip;
     const roundtripAvg = Math.round(prevRoundtrip * 0.4 + roundtrip * 0.6);
-    const networkQuality = 1 - scale(roundtripAvg,
-      PING_ROUNDTRIP_BEST, PING_ROUNDTRIP_WORST);
+    const networkQuality =
+      1 - scale(roundtripAvg, PING_ROUNDTRIP_BEST, PING_ROUNDTRIP_WORST);
     return {
       roundtrip,
       roundtripAvg,
@@ -27,8 +31,9 @@ export const pingReducer = (state = {}, action) => {
 
   if (type === pingFail.type) {
     const { failCount = 0 } = state;
-    const networkQuality = clamp01(state.networkQuality
-      - failCount / PING_MAX_FAILS);
+    const networkQuality = clamp01(
+      state.networkQuality - failCount / PING_MAX_FAILS,
+    );
     const nextState = {
       ...state,
       failCount: failCount + 1,
diff --git a/tgui/packages/tgui-panel/ping/selectors.js b/tgui/packages/tgui-panel/ping/selectors.js
index cfbe95c2f325..1b8bfb4ee40f 100644
--- a/tgui/packages/tgui-panel/ping/selectors.js
+++ b/tgui/packages/tgui-panel/ping/selectors.js
@@ -4,4 +4,4 @@
  * @license MIT
  */
 
-export const selectPing = state => state.ping;
+export const selectPing = (state) => state.ping;
diff --git a/tgui/packages/tgui-panel/reconnect.tsx b/tgui/packages/tgui-panel/reconnect.tsx
index 25391c0a681f..b3ee9777731e 100644
--- a/tgui/packages/tgui-panel/reconnect.tsx
+++ b/tgui/packages/tgui-panel/reconnect.tsx
@@ -3,7 +3,7 @@ import { Button } from 'tgui/components';
 let url: string | null = null;
 
 setInterval(() => {
-  Byond.winget('', 'url').then(currentUrl => {
+  Byond.winget('', 'url').then((currentUrl) => {
     // Sometimes, for whatever reason, BYOND will give an IP with a :0 port.
     if (currentUrl && !currentUrl.match(/:0$/)) {
       url = currentUrl;
@@ -12,20 +12,28 @@ setInterval(() => {
 }, 5000);
 
 export const ReconnectButton = (props, context) => {
-  return url && (
-    <>
-      <Button color="white" onClick={() => {
-        Byond.command('.reconnect');
-      }}>
-        Reconnect
-      </Button>
+  return (
+    url && (
+      <>
+        <Button
+          color="white"
+          onClick={() => {
+            Byond.command('.reconnect');
+          }}
+        >
+          Reconnect
+        </Button>
 
-      <Button color="white" onClick={() => {
-        location.href = `byond://${url}`;
-        Byond.command('.quit');
-      }}>
-        Relaunch game
-      </Button>
-    </>
+        <Button
+          color="white"
+          onClick={() => {
+            location.href = `byond://${url}`;
+            Byond.command('.quit');
+          }}
+        >
+          Relaunch game
+        </Button>
+      </>
+    )
   );
 };
diff --git a/tgui/packages/tgui-panel/settings/SettingsPanel.js b/tgui/packages/tgui-panel/settings/SettingsPanel.js
index eb2cac65e34a..b746a6c4f613 100644
--- a/tgui/packages/tgui-panel/settings/SettingsPanel.js
+++ b/tgui/packages/tgui-panel/settings/SettingsPanel.js
@@ -7,7 +7,21 @@
 import { toFixed } from 'common/math';
 import { useLocalState } from 'tgui/backend';
 import { useDispatch, useSelector } from 'common/redux';
-import { Box, Button, ColorBox, Divider, Dropdown, Flex, Input, LabeledList, NumberInput, Section, Stack, Tabs, TextArea } from 'tgui/components';
+import {
+  Box,
+  Button,
+  ColorBox,
+  Divider,
+  Dropdown,
+  Flex,
+  Input,
+  LabeledList,
+  NumberInput,
+  Section,
+  Stack,
+  Tabs,
+  TextArea,
+} from 'tgui/components';
 import { ChatPageSettings } from '../chat';
 import { rebuildChat, saveChatToDisk } from '../chat/actions';
 import { changeSettingsTab, updateSettings } from './actions';
@@ -22,13 +36,18 @@ export const SettingsPanel = (props, context) => {
       <Stack.Item>
         <Section fitted fill minHeight="8em">
           <Tabs vertical>
-            {SETTINGS_TABS.map(tab => (
+            {SETTINGS_TABS.map((tab) => (
               <Tabs.Tab
                 key={tab.id}
                 selected={tab.id === activeTab}
-                onClick={() => dispatch(changeSettingsTab({
-                  tabId: tab.id,
-                }))}>
+                onClick={() =>
+                  dispatch(
+                    changeSettingsTab({
+                      tabId: tab.id,
+                    }),
+                  )
+                }
+              >
                 {tab.name}
               </Tabs.Tab>
             ))}
@@ -36,12 +55,8 @@ export const SettingsPanel = (props, context) => {
         </Section>
       </Stack.Item>
       <Stack.Item grow={1} basis={0}>
-        {activeTab === 'general' && (
-          <SettingsGeneral />
-        )}
-        {activeTab === 'chatPage' && (
-          <ChatPageSettings />
-        )}
+        {activeTab === 'general' && <SettingsGeneral />}
+        {activeTab === 'chatPage' && <ChatPageSettings />}
       </Stack.Item>
     </Stack>
   );
@@ -59,7 +74,7 @@ export const SettingsGeneral = (props, context) => {
     matchCase,
   } = useSelector(context, selectSettings);
   const dispatch = useDispatch(context);
-  const [freeFont, setFreeFont] = useLocalState(context, "freeFont", false);
+  const [freeFont, setFreeFont] = useLocalState(context, 'freeFont', false);
   return (
     <Section>
       <LabeledList>
@@ -67,34 +82,48 @@ export const SettingsGeneral = (props, context) => {
           <Dropdown
             selected={theme}
             options={THEMES}
-            onSelected={value => dispatch(updateSettings({
-              theme: value,
-            }))} />
+            onSelected={(value) =>
+              dispatch(
+                updateSettings({
+                  theme: value,
+                }),
+              )
+            }
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Font style">
           <Stack inline align="baseline">
             <Stack.Item>
-              {!freeFont && (
+              {(!freeFont && (
                 <Dropdown
                   selected={fontFamily}
                   options={FONTS}
-                  onSelected={value => dispatch(updateSettings({
-                    fontFamily: value,
-                  }))} />
-              ) || (
+                  onSelected={(value) =>
+                    dispatch(
+                      updateSettings({
+                        fontFamily: value,
+                      }),
+                    )
+                  }
+                />
+              )) || (
                 <Input
                   value={fontFamily}
-                  onChange={(e, value) => dispatch(updateSettings({
-                    fontFamily: value,
-                  }))}
+                  onChange={(e, value) =>
+                    dispatch(
+                      updateSettings({
+                        fontFamily: value,
+                      }),
+                    )
+                  }
                 />
               )}
             </Stack.Item>
             <Stack.Item>
               <Button
                 content="Custom font"
-                icon={freeFont? "lock-open" : "lock"}
-                color={freeFont? "good" : "bad"}
+                icon={freeFont ? 'lock-open' : 'lock'}
+                color={freeFont ? 'good' : 'bad'}
                 ml={1}
                 onClick={() => {
                   setFreeFont(!freeFont);
@@ -112,10 +141,15 @@ export const SettingsGeneral = (props, context) => {
             maxValue={32}
             value={fontSize}
             unit="px"
-            format={value => toFixed(value)}
-            onChange={(e, value) => dispatch(updateSettings({
-              fontSize: value,
-            }))} />
+            format={(value) => toFixed(value)}
+            onChange={(e, value) =>
+              dispatch(
+                updateSettings({
+                  fontSize: value,
+                }),
+              )
+            }
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Line height">
           <NumberInput
@@ -125,18 +159,21 @@ export const SettingsGeneral = (props, context) => {
             minValue={0.8}
             maxValue={5}
             value={lineHeight}
-            format={value => toFixed(value, 2)}
-            onDrag={(e, value) => dispatch(updateSettings({
-              lineHeight: value,
-            }))} />
+            format={(value) => toFixed(value, 2)}
+            onDrag={(e, value) =>
+              dispatch(
+                updateSettings({
+                  lineHeight: value,
+                }),
+              )
+            }
+          />
         </LabeledList.Item>
       </LabeledList>
       <Divider />
       <Box>
         <Flex mb={1} color="label" align="baseline">
-          <Flex.Item grow={1}>
-            Highlight text (comma separated):
-          </Flex.Item>
+          <Flex.Item grow={1}>Highlight text (comma separated):</Flex.Item>
           <Flex.Item shrink={0}>
             <ColorBox mr={1} color={highlightColor} />
             <Input
@@ -144,39 +181,57 @@ export const SettingsGeneral = (props, context) => {
               monospace
               placeholder="#ffffff"
               value={highlightColor}
-              onInput={(e, value) => dispatch(updateSettings({
-                highlightColor: value,
-              }))} />
+              onInput={(e, value) =>
+                dispatch(
+                  updateSettings({
+                    highlightColor: value,
+                  }),
+                )
+              }
+            />
           </Flex.Item>
         </Flex>
         <TextArea
           height="3em"
           value={highlightText}
-          onChange={(e, value) => dispatch(updateSettings({
-            highlightText: value,
-          }))} />
+          onChange={(e, value) =>
+            dispatch(
+              updateSettings({
+                highlightText: value,
+              }),
+            )
+          }
+        />
         <Button.Checkbox
           checked={matchWord}
           tooltipPosition="bottom-start"
           tooltip="Not compatible with punctuation."
-          onClick={() => dispatch(updateSettings({
-            matchWord: !matchWord,
-          }))}>
+          onClick={() =>
+            dispatch(
+              updateSettings({
+                matchWord: !matchWord,
+              }),
+            )
+          }
+        >
           Match word
         </Button.Checkbox>
         <Button.Checkbox
           checked={matchCase}
-          onClick={() => dispatch(updateSettings({
-            matchCase: !matchCase,
-          }))}>
+          onClick={() =>
+            dispatch(
+              updateSettings({
+                matchCase: !matchCase,
+              }),
+            )
+          }
+        >
           Match case
         </Button.Checkbox>
       </Box>
       <Divider />
       <Box>
-        <Button
-          icon="check"
-          onClick={() => dispatch(rebuildChat())}>
+        <Button icon="check" onClick={() => dispatch(rebuildChat())}>
           Apply now
         </Button>
         <Box inline fontSize="0.9em" ml={1} color="label">
@@ -184,9 +239,7 @@ export const SettingsGeneral = (props, context) => {
         </Box>
       </Box>
       <Divider />
-      <Button
-        icon="save"
-        onClick={() => dispatch(saveChatToDisk())}>
+      <Button icon="save" onClick={() => dispatch(saveChatToDisk())}>
         Save chat log
       </Button>
     </Section>
diff --git a/tgui/packages/tgui-panel/settings/constants.js b/tgui/packages/tgui-panel/settings/constants.js
index 26db13d39447..4ecb08042967 100644
--- a/tgui/packages/tgui-panel/settings/constants.js
+++ b/tgui/packages/tgui-panel/settings/constants.js
@@ -15,8 +15,7 @@ export const SETTINGS_TABS = [
   },
 ];
 
-
-export const FONTS_DISABLED = "System Default";
+export const FONTS_DISABLED = 'System Default';
 
 export const FONTS = [
   'Times New Roman', // By placing this at index zero, it is the default for our server
diff --git a/tgui/packages/tgui-panel/settings/hooks.js b/tgui/packages/tgui-panel/settings/hooks.js
index 1cdcaac7364c..da46322f9a94 100644
--- a/tgui/packages/tgui-panel/settings/hooks.js
+++ b/tgui/packages/tgui-panel/settings/hooks.js
@@ -8,13 +8,13 @@ import { useDispatch, useSelector } from 'common/redux';
 import { updateSettings, toggleSettings } from './actions';
 import { selectSettings } from './selectors';
 
-export const useSettings = context => {
+export const useSettings = (context) => {
   const settings = useSelector(context, selectSettings);
   const dispatch = useDispatch(context);
   return {
     ...settings,
     visible: settings.view.visible,
     toggle: () => dispatch(toggleSettings()),
-    update: obj => dispatch(updateSettings(obj)),
+    update: (obj) => dispatch(updateSettings(obj)),
   };
 };
diff --git a/tgui/packages/tgui-panel/settings/middleware.js b/tgui/packages/tgui-panel/settings/middleware.js
index d7736917e328..3d7c82e1bc82 100644
--- a/tgui/packages/tgui-panel/settings/middleware.js
+++ b/tgui/packages/tgui-panel/settings/middleware.js
@@ -10,29 +10,25 @@ import { loadSettings, updateSettings } from './actions';
 import { selectSettings } from './selectors';
 import { FONTS_DISABLED, DEFAULT_THEME } from './constants';
 
-const setGlobalFontSize = fontSize => {
-  document.documentElement.style
-    .setProperty('font-size', fontSize + 'px');
-  document.body.style
-    .setProperty('font-size', fontSize + 'px');
+const setGlobalFontSize = (fontSize) => {
+  document.documentElement.style.setProperty('font-size', fontSize + 'px');
+  document.body.style.setProperty('font-size', fontSize + 'px');
 };
 
-const setGlobalFontFamily = fontFamily => {
+const setGlobalFontFamily = (fontFamily) => {
   if (fontFamily === FONTS_DISABLED) fontFamily = null;
 
-  document.documentElement.style
-    .setProperty('font-family', fontFamily);
-  document.body.style
-    .setProperty('font-family', fontFamily);
+  document.documentElement.style.setProperty('font-family', fontFamily);
+  document.body.style.setProperty('font-family', fontFamily);
 };
 
-export const settingsMiddleware = store => {
+export const settingsMiddleware = (store) => {
   let initialized = false;
-  return next => action => {
+  return (next) => (action) => {
     const { type, payload } = action;
     if (!initialized) {
       initialized = true;
-      storage.get('panel-settings').then(settings => {
+      storage.get('panel-settings').then((settings) => {
         store.dispatch(loadSettings(settings));
       });
     }
diff --git a/tgui/packages/tgui-panel/settings/reducer.js b/tgui/packages/tgui-panel/settings/reducer.js
index 5e998ab2e0ab..2bdda799308e 100644
--- a/tgui/packages/tgui-panel/settings/reducer.js
+++ b/tgui/packages/tgui-panel/settings/reducer.js
@@ -4,7 +4,13 @@
  * @license MIT
  */
 
-import { changeSettingsTab, loadSettings, openChatSettings, toggleSettings, updateSettings } from './actions';
+import {
+  changeSettingsTab,
+  loadSettings,
+  openChatSettings,
+  toggleSettings,
+  updateSettings,
+} from './actions';
 import { DEFAULT_THEME, FONTS, SETTINGS_TABS } from './constants';
 
 const initialState = {
diff --git a/tgui/packages/tgui-panel/settings/selectors.js b/tgui/packages/tgui-panel/settings/selectors.js
index b1504457cfcf..6b5ca76bff0c 100644
--- a/tgui/packages/tgui-panel/settings/selectors.js
+++ b/tgui/packages/tgui-panel/settings/selectors.js
@@ -4,5 +4,5 @@
  * @license MIT
  */
 
-export const selectSettings = state => state.settings;
-export const selectActiveTab = state => state.settings.view.activeTab;
+export const selectSettings = (state) => state.settings;
+export const selectActiveTab = (state) => state.settings.view.activeTab;
diff --git a/tgui/packages/tgui-panel/styles/components/Chat.scss b/tgui/packages/tgui-panel/styles/components/Chat.scss
index 7b6a9ff9839e..d3a7b07500a7 100644
--- a/tgui/packages/tgui-panel/styles/components/Chat.scss
+++ b/tgui/packages/tgui-panel/styles/components/Chat.scss
@@ -8,7 +8,7 @@
 @use '~tgui/styles/base.scss';
 @use '~tgui/styles/colors.scss';
 
-$text-color: #CAC5A5 !default;
+$text-color: #cac5a5 !default;
 $color-bg-section: base.$color-bg-section !default;
 
 .Chat {
diff --git a/tgui/packages/tgui-panel/styles/goon/chat-dark.scss b/tgui/packages/tgui-panel/styles/goon/chat-dark.scss
index 5b4dee0ba71e..222564883632 100644
--- a/tgui/packages/tgui-panel/styles/goon/chat-dark.scss
+++ b/tgui/packages/tgui-panel/styles/goon/chat-dark.scss
@@ -86,13 +86,13 @@ a.popt {
   color: #333;
 }
 
-.popup input[type=text]:hover,
-.popup input[type=text]:active,
-.popup input[type=text]:focus {
+.popup input[type='text']:hover,
+.popup input[type='text']:active,
+.popup input[type='text']:focus {
   border-color: green;
 }
 
-.popup input[type=submit] {
+.popup input[type='submit'] {
   padding: 5px 10px;
   background: #999;
   color: #ddd;
@@ -101,9 +101,9 @@ a.popt {
   font-weight: bold;
 }
 
-.popup input[type=submit]:hover,
-.popup input[type=submit]:focus,
-.popup input[type=submit]:active {
+.popup input[type='submit']:hover,
+.popup input[type='submit']:focus,
+.popup input[type='submit']:active {
   background: #aaa;
   cursor: pointer;
 }
@@ -128,7 +128,7 @@ a.popt {
   text-align: center;
 }
 
-.highlightPopup input[type=text] {
+.highlightPopup input[type='text'] {
   display: block;
   width: 215px;
   text-align: left;
@@ -136,18 +136,15 @@ a.popt {
 }
 
 .highlightPopup input.highlightColor {
-  background-color: #FFFF00;
+  background-color: #ffff00;
 }
 
 .highlightPopup input.highlightTermSubmit {
   margin-top: 5px;
 }
 
-
-
 /* ADMIN CONTEXT MENU */
 
-
 .contextMenu {
   background-color: #ddd;
   position: fixed;
@@ -166,11 +163,8 @@ a.popt {
   background-color: #ccc;
 }
 
-
-
 /* ADMIN FILTER MESSAGES MENU */
 
-
 .filterMessages {
   padding: 5px;
 }
@@ -193,24 +187,16 @@ a.popt {
   margin-top: -2px;
 }
 
-
-
-
 /*****************************************
 *
 * OUTPUT ACTUALLY RELATED TO MESSAGES
 *
 ******************************************/
 
-
-
-
-
 /* MOTD */
 
-
 .motd {
-  color: #CAC5A5;
+  color: #cac5a5;
   font-family: Verdana, sans-serif;
   white-space: normal;
 }
@@ -221,7 +207,7 @@ a.popt {
 .motd h4,
 .motd h5,
 .motd h6 {
-  color: #CAC5A5;
+  color: #cac5a5;
   text-decoration: underline;
 }
 
@@ -230,14 +216,11 @@ a.popt {
 .motd a:visited,
 .motd a:active,
 .motd a:hover {
-  color: #CAC5A5;
+  color: #cac5a5;
 }
 
-
-
 /* ADD HERE FOR BOLD */
 
-
 .bold,
 .name,
 .prefix,
@@ -250,30 +233,31 @@ a.popt {
   font-weight: bold;
 }
 
-
-
 /* ADD HERE FOR ITALIC */
 
-
-.italic, .italics {
+.italic,
+.italics {
   font-style: italic;
 }
 
-
-
 /* OUTPUT COLORS */
 
-
 .highlight {
   background: yellow;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  color: #CAC5A5;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #cac5a5;
   font-family: Georgia, Verdana, sans-serif;
 }
 
-h1.alert, h2.alert {
+h1.alert,
+h2.alert {
   color: #dfdfcf;
 }
 
@@ -316,7 +300,11 @@ em {
   font-weight: bold;
 }
 
-.say, .emote, .infoplain, .oocplain, .warningplain {
+.say,
+.emote,
+.infoplain,
+.oocplain,
+.warningplain {
 }
 
 .deadsay {
@@ -331,7 +319,8 @@ em {
   color: #00ff00;
 }
 
-.binarysay a:active, .binarysay a:visited {
+.binarysay a:active,
+.binarysay a:visited {
   color: #88ff88;
 }
 
@@ -351,7 +340,7 @@ em {
 }
 
 .secradio {
-  color: #B71C1C;
+  color: #b71c1c;
 }
 
 .medradio {
@@ -407,7 +396,7 @@ em {
 }
 
 .alert {
-  color: #FF6D6D;
+  color: #ff6d6d;
 }
 
 .userdanger {
@@ -418,38 +407,38 @@ em {
 
 .bolddanger {
   color: #dd3535;
-  text-shadow: 0 0 0.3em #FF0000;
+  text-shadow: 0 0 0.3em #ff0000;
   font-weight: bold;
 }
 
 .danger {
   color: #dd3535;
-  text-shadow: 0 0 0.3em #FF0000;
+  text-shadow: 0 0 0.3em #ff0000;
 }
 
 .warning {
-  color: #FF6D6D;
+  color: #ff6d6d;
   font-style: italic;
 }
 
 .alertwarning {
-  color: #FF6D6D;
+  color: #ff6d6d;
   font-weight: bold;
 }
 
 .boldwarning {
-  color: #FF6D6D;
+  color: #ff6d6d;
   font-style: italic;
   font-weight: bold;
 }
 
 .announce {
-  color: #FF6D6D;
+  color: #ff6d6d;
   font-weight: bold;
 }
 
 .boldannounce {
-  color: #FF6D6D;
+  color: #ff6d6d;
   font-weight: bold;
 }
 
@@ -472,17 +461,17 @@ em {
 }
 
 .subtle {
-  color: #8A72C5;
+  color: #8a72c5;
   font-style: italic;
   font-size: 85%;
 }
 
 .notice {
-  color: #D47D5A;
+  color: #d47d5a;
 }
 
 .obviousnotice {
-  color: #8A72C5;
+  color: #8a72c5;
 }
 
 .tinynotice {
@@ -527,7 +516,7 @@ em {
 }
 
 .unconscious {
-  color: #CAC5A5;
+  color: #cac5a5;
   font-weight: bold;
 }
 
@@ -545,7 +534,7 @@ em {
 }
 
 .red {
-  color: #FF0000;
+  color: #ff0000;
 }
 
 .blue {
@@ -601,7 +590,7 @@ em {
 }
 
 .colossus {
-  color: #7F282A;
+  color: #7f282a;
   font-size: 310%;
 }
 
@@ -685,7 +674,7 @@ em {
 }
 
 .alertsyndie {
-  color: #FF0000;
+  color: #ff0000;
   font-size: 185%;
   font-weight: bold;
 }
@@ -701,20 +690,20 @@ em {
 }
 
 .sans {
-  font-family: "Comic Sans MS", cursive, sans-serif;
+  font-family: 'Comic Sans MS', cursive, sans-serif;
 }
 
 .papyrus {
-  font-family: "Papyrus", cursive, sans-serif;
+  font-family: 'Papyrus', cursive, sans-serif;
 }
 
 .robot {
-  font-family: "Courier New", cursive, sans-serif;
+  font-family: 'Courier New', cursive, sans-serif;
 }
 
 .tape_recorder {
-  color: #FF0000;
-  font-family: "Courier New", cursive, sans-serif;
+  color: #ff0000;
+  font-family: 'Courier New', cursive, sans-serif;
 }
 
 .command_headset {
@@ -751,18 +740,18 @@ em {
 .clown {
   color: #ff70c1;
   font-size: 160%;
-  font-family: "Comic Sans MS", cursive, sans-serif;
+  font-family: 'Comic Sans MS', cursive, sans-serif;
   font-weight: bold;
 }
 
 .singing {
-  font-family: "Trebuchet MS", cursive, sans-serif;
+  font-family: 'Trebuchet MS', cursive, sans-serif;
   font-style: italic;
 }
 
 .his_grace {
-  color: #15D512;
-  font-family: "Courier New", cursive, sans-serif;
+  color: #15d512;
+  font-family: 'Courier New', cursive, sans-serif;
   font-style: italic;
 }
 
@@ -875,7 +864,7 @@ em {
 }
 
 .slime {
-  color: #00CED1;
+  color: #00ced1;
 }
 
 .drone {
@@ -887,11 +876,11 @@ em {
 }
 
 .swarmer {
-  color: #2C75FF;
+  color: #2c75ff;
 }
 
 .resonate {
-  color: #298F85;
+  color: #298f85;
 }
 
 .monkeyhive {
@@ -903,7 +892,8 @@ em {
   font-size: 80%;
 }
 
-.connectionClosed, .fatalError {
+.connectionClosed,
+.fatalError {
   background: red;
   color: white;
   padding: 5px;
@@ -917,13 +907,10 @@ em {
   color: #92b4ff;
 }
 
-
-
 /* HELPER CLASSES */
 
-
 .text-normal {
-  color: #CAC5A5;
+  color: #cac5a5;
   font-weight: normal;
   font-style: normal;
 }
@@ -970,12 +957,12 @@ em {
 }
 
 .sayverb {
-  color : #bbbbad;
+  color: #bbbbad;
   font-style: italic;
 }
 
 .emote {
-  color : #bbbbad;
+  color: #bbbbad;
 }
 
 .debug {
@@ -991,8 +978,7 @@ em {
   display: flex;
   flex-direction: column;
   font-size: 110%;
-  border-image:
-  repeating-linear-gradient(
+  border-image: repeating-linear-gradient(
     -45deg,
     #520000,
     #520000 10px,
diff --git a/tgui/packages/tgui-panel/styles/goon/chat-light.scss b/tgui/packages/tgui-panel/styles/goon/chat-light.scss
index d824208f9d4c..3718509ba5c2 100644
--- a/tgui/packages/tgui-panel/styles/goon/chat-light.scss
+++ b/tgui/packages/tgui-panel/styles/goon/chat-light.scss
@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: MIT
  */
 
-html, body {
+html,
+body {
   padding: 0;
   margin: 0;
   height: 100%;
@@ -103,13 +104,13 @@ a.popt {
   color: #333;
 }
 
-.popup input[type=text]:hover,
-.popup input[type=text]:active,
-.popup input[type=text]:focus {
+.popup input[type='text']:hover,
+.popup input[type='text']:active,
+.popup input[type='text']:focus {
   border-color: green;
 }
 
-.popup input[type=submit] {
+.popup input[type='submit'] {
   padding: 5px 10px;
   background: #999;
   color: #ddd;
@@ -118,9 +119,9 @@ a.popt {
   font-weight: bold;
 }
 
-.popup input[type=submit]:hover,
-.popup input[type=submit]:focus,
-.popup input[type=submit]:active {
+.popup input[type='submit']:hover,
+.popup input[type='submit']:focus,
+.popup input[type='submit']:active {
   background: #aaa;
   cursor: pointer;
 }
@@ -145,7 +146,7 @@ a.popt {
   text-align: center;
 }
 
-.highlightPopup input[type=text] {
+.highlightPopup input[type='text'] {
   display: block;
   width: 215px;
   text-align: left;
@@ -153,18 +154,15 @@ a.popt {
 }
 
 .highlightPopup input.highlightColor {
-  background-color: #FFFF00;
+  background-color: #ffff00;
 }
 
 .highlightPopup input.highlightTermSubmit {
   margin-top: 5px;
 }
 
-
-
 /* ADMIN CONTEXT MENU */
 
-
 .contextMenu {
   background-color: #ddd;
   position: fixed;
@@ -183,11 +181,8 @@ a.popt {
   background-color: #ccc;
 }
 
-
-
 /* ADMIN FILTER MESSAGES MENU */
 
-
 .filterMessages {
   padding: 5px;
 }
@@ -210,22 +205,14 @@ a.popt {
   margin-top: -2px;
 }
 
-
-
-
 /*****************************************
 *
 * OUTPUT ACTUALLY RELATED TO MESSAGES
 *
 ******************************************/
 
-
-
-
-
 /* MOTD */
 
-
 .motd {
   color: #638500;
   font-family: Verdana, sans-serif;
@@ -250,11 +237,8 @@ a.popt {
   color: #638500;
 }
 
-
-
 /* ADD HERE FOR BOLD */
 
-
 .bold,
 .name,
 .prefix,
@@ -267,31 +251,31 @@ a.popt {
   font-weight: bold;
 }
 
-
-
 /* ADD HERE FOR ITALIC */
 
-
 .italic,
 .italics {
   font-style: italic;
 }
 
-
-
 /* OUTPUT COLORS */
 
-
 .highlight {
   background: yellow;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: #0000ff;
   font-family: Georgia, Verdana, sans-serif;
 }
 
-h1.alert, h2.alert {
+h1.alert,
+h2.alert {
   color: #000000;
 }
 
@@ -334,7 +318,11 @@ em {
   font-weight: bold;
 }
 
-.say, .emote, .infoplain, .oocplain, .warningplain {
+.say,
+.emote,
+.infoplain,
+.oocplain,
+.warningplain {
 }
 
 .deadsay {
@@ -428,7 +416,8 @@ em {
   color: #ff0000;
 }
 
-h1.alert, h2.alert {
+h1.alert,
+h2.alert {
   color: #000000;
 }
 
@@ -463,7 +452,7 @@ h1.alert, h2.alert {
 }
 
 .alertwarning {
-  color: #FF0000;
+  color: #ff0000;
   font-weight: bold;
 }
 
@@ -498,7 +487,7 @@ h1.alert, h2.alert {
 }
 
 .info {
-  color: #0000CC;
+  color: #0000cc;
 }
 
 .notice {
@@ -565,11 +554,11 @@ h1.alert, h2.alert {
 }
 
 .red {
-  color: #FF0000;
+  color: #ff0000;
 }
 
 .blue {
-  color: #0000FF;
+  color: #0000ff;
 }
 
 .nicegreen {
@@ -621,7 +610,7 @@ h1.alert, h2.alert {
 }
 
 .colossus {
-  color: #7F282A;
+  color: #7f282a;
   font-size: 310%;
 }
 
@@ -675,7 +664,7 @@ h1.alert, h2.alert {
 }
 
 .deconversion_message {
-  color: #5000A0;
+  color: #5000a0;
   font-size: 185%;
   font-style: italic;
 }
@@ -705,7 +694,7 @@ h1.alert, h2.alert {
 }
 
 .alertsyndie {
-  color: #FF0000;
+  color: #ff0000;
   font-size: 185%;
   font-weight: bold;
 }
@@ -721,20 +710,20 @@ h1.alert, h2.alert {
 }
 
 .sans {
-  font-family: "Comic Sans MS", cursive, sans-serif;
+  font-family: 'Comic Sans MS', cursive, sans-serif;
 }
 
 .papyrus {
-  font-family: "Papyrus", cursive, sans-serif;
+  font-family: 'Papyrus', cursive, sans-serif;
 }
 
 .robot {
-  font-family: "Courier New", cursive, sans-serif;
+  font-family: 'Courier New', cursive, sans-serif;
 }
 
 .tape_recorder {
   color: #800000;
-  font-family: "Courier New", cursive, sans-serif;
+  font-family: 'Courier New', cursive, sans-serif;
 }
 
 .command_headset {
@@ -759,30 +748,30 @@ h1.alert, h2.alert {
 }
 
 .greentext {
-  color: #00FF00;
+  color: #00ff00;
   font-size: 185%;
 }
 
 .redtext {
-  color: #FF0000;
+  color: #ff0000;
   font-size: 185%;
 }
 
 .clown {
-  color: #FF69Bf;
+  color: #ff69bf;
   font-size: 160%;
-  font-family: "Comic Sans MS", cursive, sans-serif;
+  font-family: 'Comic Sans MS', cursive, sans-serif;
   font-weight: bold;
 }
 
 .singing {
-  font-family: "Trebuchet MS", cursive, sans-serif;
+  font-family: 'Trebuchet MS', cursive, sans-serif;
   font-style: italic;
 }
 
 .his_grace {
-  color: #15D512;
-  font-family: "Courier New", cursive, sans-serif;
+  color: #15d512;
+  font-family: 'Courier New', cursive, sans-serif;
   font-style: italic;
 }
 
@@ -860,14 +849,14 @@ h1.alert, h2.alert {
 }
 
 .mind_control {
-  color: #A00D6F;
+  color: #a00d6f;
   font-size: 100%;
   font-weight: bold;
   font-style: italic;
 }
 
 .slime {
-  color: #00CED1;
+  color: #00ced1;
 }
 
 .drone {
@@ -879,11 +868,11 @@ h1.alert, h2.alert {
 }
 
 .swarmer {
-  color: #2C75FF;
+  color: #2c75ff;
 }
 
 .resonate {
-  color: #298F85;
+  color: #298f85;
 }
 
 .monkeyhive {
@@ -910,11 +899,8 @@ h1.alert, h2.alert {
   color: blue;
 }
 
-
-
 /* HELPER CLASSES */
 
-
 .text-normal {
   font-weight: normal;
   font-style: normal;
@@ -991,8 +977,7 @@ h1.alert, h2.alert {
   display: flex;
   flex-direction: column;
   font-size: 110%;
-  border-image:
-  repeating-linear-gradient(
+  border-image: repeating-linear-gradient(
     -45deg,
     #520000,
     #520000 10px,
diff --git a/tgui/packages/tgui-panel/styles/main.scss b/tgui/packages/tgui-panel/styles/main.scss
index 0f381b93b453..7bef7eecfd80 100644
--- a/tgui/packages/tgui-panel/styles/main.scss
+++ b/tgui/packages/tgui-panel/styles/main.scss
@@ -10,7 +10,7 @@
 @use '~tgui/styles/base.scss' with (
   $color-bg: #222020,
   $color-bg-section: color.adjust(#222020),
-  $color-bg-grad-spread: 0%,
+  $color-bg-grad-spread: 0%
 );
 
 // Core styles
diff --git a/tgui/packages/tgui-panel/styles/themes/light.scss b/tgui/packages/tgui-panel/styles/themes/light.scss
index 41cd8c888b56..135965a6e7ed 100644
--- a/tgui/packages/tgui-panel/styles/themes/light.scss
+++ b/tgui/packages/tgui-panel/styles/themes/light.scss
@@ -22,7 +22,7 @@
   $color-fg: #000000,
   $color-bg: #eeeeee,
   $color-bg-section: #ffffff,
-  $color-bg-grad-spread: 0%,
+  $color-bg-grad-spread: 0%
 );
 
 // A fat warning to anyone who wants to use this: this only half works.
@@ -32,23 +32,29 @@
   @include meta.load-css('~tgui/styles/atomic/color.scss');
 
   // Components
-  @include meta.load-css('~tgui/styles/components/Tabs.scss', $with: (
-    'text-color': rgba(0, 0, 0, 0.5),
-    'color-default': rgba(0, 0, 0, 1),
-  ));
+  @include meta.load-css(
+    '~tgui/styles/components/Tabs.scss',
+    $with: ('text-color': rgba(0, 0, 0, 0.5), 'color-default': rgba(0, 0, 0, 1))
+  );
   @include meta.load-css('~tgui/styles/components/Section.scss');
-  @include meta.load-css('~tgui/styles/components/Button.scss', $with: (
-    'color-default': #bbbbbb,
-    'color-disabled': #363636,
-    'color-selected': #0668b8,
-    'color-caution': #be6209,
-    'color-danger': #9a9d00,
-    'color-transparent-text': rgba(0, 0, 0, 0.5),
-  ));
-  @include meta.load-css('~tgui/styles/components/Input.scss', $with: (
-    'border-color': colors.fg(colors.$label),
-    'background-color': #ffffff,
-  ));
+  @include meta.load-css(
+    '~tgui/styles/components/Button.scss',
+    $with: (
+      'color-default': #bbbbbb,
+      'color-disabled': #363636,
+      'color-selected': #0668b8,
+      'color-caution': #be6209,
+      'color-danger': #9a9d00,
+      'color-transparent-text': rgba(0, 0, 0, 0.5)
+    )
+  );
+  @include meta.load-css(
+    '~tgui/styles/components/Input.scss',
+    $with: (
+      'border-color': colors.fg(colors.$label),
+      'background-color': #ffffff
+    )
+  );
   @include meta.load-css('~tgui/styles/components/NumberInput.scss');
   @include meta.load-css('~tgui/styles/components/TextArea.scss');
   @include meta.load-css('~tgui/styles/components/Knob.scss');
@@ -56,20 +62,25 @@
   @include meta.load-css('~tgui/styles/components/ProgressBar.scss');
 
   // Components specific to tgui-panel
-  @include meta.load-css('../components/Chat.scss', $with: (
-    'text-color': #000000,
-  ));
+  @include meta.load-css(
+    '../components/Chat.scss',
+    $with: ('text-color': #000000)
+  );
 
   // Layouts
-  @include meta.load-css('~tgui/styles/layouts/Layout.scss', $with: (
-    'scrollbar-color-multiplier': -1,
-  ));
+  @include meta.load-css(
+    '~tgui/styles/layouts/Layout.scss',
+    $with: ('scrollbar-color-multiplier': -1)
+  );
   @include meta.load-css('~tgui/styles/layouts/Window.scss');
-  @include meta.load-css('~tgui/styles/layouts/TitleBar.scss', $with: (
-    'text-color': rgba(0, 0, 0, 0.75),
-    'background-color': base.$color-bg,
-    'shadow-color-core': rgba(0, 0, 0, 0.25),
-  ));
+  @include meta.load-css(
+    '~tgui/styles/layouts/TitleBar.scss',
+    $with: (
+      'text-color': rgba(0, 0, 0, 0.75),
+      'background-color': base.$color-bg,
+      'shadow-color-core': rgba(0, 0, 0, 0.25)
+    )
+  );
 
   // Goonchat styles
   @include meta.load-css('../goon/chat-light.scss');
diff --git a/tgui/packages/tgui-panel/telemetry.js b/tgui/packages/tgui-panel/telemetry.js
index afad245c48a3..2cc03cd143cc 100644
--- a/tgui/packages/tgui-panel/telemetry.js
+++ b/tgui/packages/tgui-panel/telemetry.js
@@ -11,16 +11,15 @@ const logger = createLogger('telemetry');
 
 const MAX_CONNECTIONS_STORED = 10;
 
-const connectionsMatch = (a, b) => (
-  a.ckey === b.ckey
-    && a.address === b.address
-    && a.computer_id === b.computer_id
-);
+const connectionsMatch = (a, b) =>
+  a.ckey === b.ckey &&
+  a.address === b.address &&
+  a.computer_id === b.computer_id;
 
-export const telemetryMiddleware = store => {
+export const telemetryMiddleware = (store) => {
   let telemetry;
   let wasRequestedWithPayload;
-  return next => action => {
+  return (next) => (action) => {
     const { type, payload } = action;
     // Handle telemetry requests
     if (type === 'telemetry/request') {
@@ -49,7 +48,7 @@ export const telemetryMiddleware = store => {
         }
         // Load telemetry
         if (!telemetry) {
-          telemetry = await storage.get('telemetry') || {};
+          telemetry = (await storage.get('telemetry')) || {};
           if (!telemetry.connections) {
             telemetry.connections = [];
           }
@@ -57,8 +56,9 @@ export const telemetryMiddleware = store => {
         }
         // Append a connection record
         let telemetryMutated = false;
-        const duplicateConnection = telemetry.connections
-          .find(conn => connectionsMatch(conn, client));
+        const duplicateConnection = telemetry.connections.find((conn) =>
+          connectionsMatch(conn, client),
+        );
         if (!duplicateConnection) {
           telemetryMutated = true;
           telemetry.connections.unshift(client);
diff --git a/tgui/packages/tgui-panel/themes.js b/tgui/packages/tgui-panel/themes.js
index e4ac95c33ad2..0a980cdd2de9 100644
--- a/tgui/packages/tgui-panel/themes.js
+++ b/tgui/packages/tgui-panel/themes.js
@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { THEME_LIGHT, THEME_DARK } from "./settings/constants";
+import { THEME_LIGHT, THEME_DARK } from './settings/constants';
 
 const COLOR_DARK_BG = '#222020';
 const COLOR_DARK_BG_DARKER = '#171717';
@@ -22,7 +22,7 @@ let setClientThemeTimer = null;
  * There's no way round it. We're essentially changing the skin by hand.
  * It's painful but it works, and is the way Lummox suggested.
  */
-export const setClientTheme = name => {
+export const setClientTheme = (name) => {
   // Transmit once for fast updates and again in a little while in case we won
   // the race against statbrowser init.
   clearInterval(setClientThemeTimer);
diff --git a/tgui/packages/tgui/assets.js b/tgui/packages/tgui/assets.js
index db6dd635c01e..f41181e078fe 100644
--- a/tgui/packages/tgui/assets.js
+++ b/tgui/packages/tgui/assets.js
@@ -7,11 +7,9 @@
 const EXCLUDED_PATTERNS = [/v4shim/i];
 const loadedMappings = {};
 
-export const resolveAsset = name => (
-  loadedMappings[name] || name
-);
+export const resolveAsset = (name) => loadedMappings[name] || name;
 
-export const assetMiddleware = store => next => action => {
+export const assetMiddleware = (store) => (next) => (action) => {
   const { type, payload } = action;
   if (type === 'asset/stylesheet') {
     Byond.loadCss(payload);
@@ -20,7 +18,7 @@ export const assetMiddleware = store => next => action => {
   if (type === 'asset/mappings') {
     for (let name of Object.keys(payload)) {
       // Skip anything that matches excluded patterns
-      if (EXCLUDED_PATTERNS.some(regex => regex.test(name))) {
+      if (EXCLUDED_PATTERNS.some((regex) => regex.test(name))) {
         continue;
       }
       const url = payload[name];
diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts
index eb58470ae0cb..b78afeae4428 100644
--- a/tgui/packages/tgui/backend.ts
+++ b/tgui/packages/tgui/backend.ts
@@ -62,8 +62,7 @@ export const backendReducer = (state = initialState, action) => {
         const value = payload.shared[key];
         if (value === '') {
           shared[key] = undefined;
-        }
-        else {
+        } else {
           shared[key] = JSON.parse(value);
         }
       }
@@ -115,11 +114,11 @@ export const backendReducer = (state = initialState, action) => {
   return state;
 };
 
-export const backendMiddleware = store => {
+export const backendMiddleware = (store) => {
   let fancyState;
   let suspendInterval;
 
-  return next => action => {
+  return (next) => (action) => {
     const { suspended } = selectBackend(store.getState());
     const { type, payload } = action;
 
@@ -196,8 +195,10 @@ export const backendMiddleware = store => {
         });
         perf.mark('resume/finish');
         if (process.env.NODE_ENV !== 'production') {
-          logger.log('visible in',
-            perf.measure('render/finish', 'resume/finish'));
+          logger.log(
+            'visible in',
+            perf.measure('render/finish', 'resume/finish'),
+          );
         }
       });
     }
@@ -212,9 +213,8 @@ export const backendMiddleware = store => {
  */
 export const sendAct = (action: string, payload: object = {}) => {
   // Validate that payload is an object
-  const isObject = typeof payload === 'object'
-    && payload !== null
-    && !Array.isArray(payload);
+  const isObject =
+    typeof payload === 'object' && payload !== null && !Array.isArray(payload);
   if (!isObject) {
     logger.error(`Payload for act() must be an object, got this:`, payload);
     return;
@@ -224,38 +224,37 @@ export const sendAct = (action: string, payload: object = {}) => {
 
 type BackendState<TData> = {
   config: {
-    title: string,
-    status: number,
-    interface: string,
-    refreshing: boolean,
+    title: string;
+    status: number;
+    interface: string;
+    refreshing: boolean;
     window: {
-      key: string,
-      size: [number, number],
-      fancy: boolean,
-      locked: boolean,
-    },
+      key: string;
+      size: [number, number];
+      fancy: boolean;
+      locked: boolean;
+    };
     client: {
-      ckey: string,
-      address: string,
-      computer_id: string,
-    },
+      ckey: string;
+      address: string;
+      computer_id: string;
+    };
     user: {
-      name: string,
-      observer: number,
-    },
-  },
-  data: TData,
-  shared: Record<string, any>,
-  suspending: boolean,
-  suspended: boolean,
-}
+      name: string;
+      observer: number;
+    };
+  };
+  data: TData;
+  shared: Record<string, any>;
+  suspending: boolean;
+  suspended: boolean;
+};
 
 /**
  * Selects a backend-related slice of Redux state
  */
-export const selectBackend = <TData>(state: any): BackendState<TData> => (
-  state.backend || {}
-);
+export const selectBackend = <TData>(state: any): BackendState<TData> =>
+  state.backend || {};
 
 /**
  * A React hook (sort of) for getting tgui state and related functions.
@@ -300,20 +299,19 @@ export const useLocalState = <T>(
   const { store } = context;
   const state = selectBackend(store.getState());
   const sharedStates = state.shared ?? {};
-  const sharedState = (key in sharedStates)
-    ? sharedStates[key]
-    : initialState;
+  const sharedState = key in sharedStates ? sharedStates[key] : initialState;
   return [
     sharedState,
-    nextState => {
-      store.dispatch(backendSetSharedState({
-        key,
-        nextState: (
-          typeof nextState === 'function'
-            ? nextState(sharedState)
-            : nextState
-        ),
-      }));
+    (nextState) => {
+      store.dispatch(
+        backendSetSharedState({
+          key,
+          nextState:
+            typeof nextState === 'function'
+              ? nextState(sharedState)
+              : nextState,
+        }),
+      );
     },
   ];
 };
@@ -340,20 +338,19 @@ export const useSharedState = <T>(
   const { store } = context;
   const state = selectBackend(store.getState());
   const sharedStates = state.shared ?? {};
-  const sharedState = (key in sharedStates)
-    ? sharedStates[key]
-    : initialState;
+  const sharedState = key in sharedStates ? sharedStates[key] : initialState;
   return [
     sharedState,
-    nextState => {
+    (nextState) => {
       Byond.sendMessage({
         type: 'setSharedState',
         key,
-        value: JSON.stringify(
-          typeof nextState === 'function'
-            ? nextState(sharedState)
-            : nextState
-        ) || '',
+        value:
+          JSON.stringify(
+            typeof nextState === 'function'
+              ? nextState(sharedState)
+              : nextState,
+          ) || '',
       });
     },
   ];
diff --git a/tgui/packages/tgui/components/AnimatedNumber.js b/tgui/packages/tgui/components/AnimatedNumber.js
index 05b89c96d022..a763becfd405 100644
--- a/tgui/packages/tgui/components/AnimatedNumber.js
+++ b/tgui/packages/tgui/components/AnimatedNumber.js
@@ -10,10 +10,10 @@ import { Component } from 'inferno';
 const FPS = 20;
 const Q = 0.5;
 
-const isSafeNumber = value => {
-  return typeof value === 'number'
-    && Number.isFinite(value)
-    && !Number.isNaN(value);
+const isSafeNumber = (value) => {
+  return (
+    typeof value === 'number' && Number.isFinite(value) && !Number.isNaN(value)
+  );
 };
 
 export class AnimatedNumber extends Component {
diff --git a/tgui/packages/tgui/components/Autofocus.tsx b/tgui/packages/tgui/components/Autofocus.tsx
index f5ae00650aab..28945dd7aa48 100644
--- a/tgui/packages/tgui/components/Autofocus.tsx
+++ b/tgui/packages/tgui/components/Autofocus.tsx
@@ -1,4 +1,4 @@
-import { Component, createRef } from "inferno";
+import { Component, createRef } from 'inferno';
 
 export class Autofocus extends Component {
   ref = createRef<HTMLDivElement>();
diff --git a/tgui/packages/tgui/components/Blink.js b/tgui/packages/tgui/components/Blink.js
index 1f1fd908318d..e1cd50dcb549 100644
--- a/tgui/packages/tgui/components/Blink.js
+++ b/tgui/packages/tgui/components/Blink.js
@@ -42,8 +42,10 @@ export class Blink extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.interval !== this.props.interval
-      || prevProps.time !== this.props.time) {
+    if (
+      prevProps.interval !== this.props.interval ||
+      prevProps.time !== this.props.time
+    ) {
       this.createTimer();
     }
   }
@@ -55,9 +57,11 @@ export class Blink extends Component {
 
   render(props) {
     return (
-      <span style={{
-        visibility: this.state.hidden ? "hidden" : "visible",
-      }}>
+      <span
+        style={{
+          visibility: this.state.hidden ? 'hidden' : 'visible',
+        }}
+      >
         {props.children}
       </span>
     );
diff --git a/tgui/packages/tgui/components/BlockQuote.js b/tgui/packages/tgui/components/BlockQuote.js
index 62a052157288..8c0f53a46a1e 100644
--- a/tgui/packages/tgui/components/BlockQuote.js
+++ b/tgui/packages/tgui/components/BlockQuote.js
@@ -7,14 +7,7 @@
 import { classes } from 'common/react';
 import { Box } from './Box';
 
-export const BlockQuote = props => {
+export const BlockQuote = (props) => {
   const { className, ...rest } = props;
-  return (
-    <Box
-      className={classes([
-        'BlockQuote',
-        className,
-      ])}
-      {...rest} />
-  );
+  return <Box className={classes(['BlockQuote', className])} {...rest} />;
 };
diff --git a/tgui/packages/tgui/components/BodyZoneSelector.tsx b/tgui/packages/tgui/components/BodyZoneSelector.tsx
index 6e3d2ecbd8b0..9581b5729d64 100644
--- a/tgui/packages/tgui/components/BodyZoneSelector.tsx
+++ b/tgui/packages/tgui/components/BodyZoneSelector.tsx
@@ -1,90 +1,96 @@
-import { Component, createRef } from "inferno";
-import { resolveAsset } from "../assets";
-import { Box } from "./Box";
+import { Component, createRef } from 'inferno';
+import { resolveAsset } from '../assets';
+import { Box } from './Box';
 
 export enum BodyZone {
-  Head = "head",
-  Chest = "chest",
-  LeftArm = "l_arm",
-  RightArm = "r_arm",
-  LeftLeg = "l_leg",
-  RightLeg = "r_leg",
-  Eyes = "eyes",
-  Mouth = "mouth",
-  Groin = "groin",
+  Head = 'head',
+  Chest = 'chest',
+  LeftArm = 'l_arm',
+  RightArm = 'r_arm',
+  LeftLeg = 'l_leg',
+  RightLeg = 'r_leg',
+  Eyes = 'eyes',
+  Mouth = 'mouth',
+  Groin = 'groin',
 }
 
-const bodyZonePixelToZone: (x: number, y: number) => (BodyZone | null)
-  = (x, y) => {
-    // TypeScript translation of /atom/movable/screen/zone_sel/proc/get_zone_at
-    if (y < 1) {
-      return null;
-    } else if (y < 10) {
-      if (x > 10 && x < 15) {
-        return BodyZone.RightLeg;
-      } else if (x > 17 && x < 22) {
-        return BodyZone.LeftLeg;
-      }
-    } else if (y < 13) {
-      if (x > 8 && x < 11) {
-        return BodyZone.RightArm;
-      } else if (x > 12 && x < 20) {
-        return BodyZone.Groin;
-      } else if (x > 21 && x < 24) {
-        return BodyZone.LeftArm;
-      }
-    } else if (y < 22) {
-      if (x > 8 && x < 11) {
-        return BodyZone.RightArm;
-      } else if (x > 12 && x < 20) {
-        return BodyZone.Chest;
-      } else if (x > 21 && x < 24) {
-        return BodyZone.LeftArm;
-      }
-    } else if (y < 30 && (x > 12 && x < 20)) {
-      if (y > 23 && y < 24 && (x > 15 && x < 17)) {
-        return BodyZone.Mouth;
-      } else if (y > 25 && y < 27 && (x > 14 && x < 18)) {
-        return BodyZone.Eyes;
-      } else {
-        return BodyZone.Head;
-      }
+const bodyZonePixelToZone: (x: number, y: number) => BodyZone | null = (
+  x,
+  y,
+) => {
+  // TypeScript translation of /atom/movable/screen/zone_sel/proc/get_zone_at
+  if (y < 1) {
+    return null;
+  } else if (y < 10) {
+    if (x > 10 && x < 15) {
+      return BodyZone.RightLeg;
+    } else if (x > 17 && x < 22) {
+      return BodyZone.LeftLeg;
+    }
+  } else if (y < 13) {
+    if (x > 8 && x < 11) {
+      return BodyZone.RightArm;
+    } else if (x > 12 && x < 20) {
+      return BodyZone.Groin;
+    } else if (x > 21 && x < 24) {
+      return BodyZone.LeftArm;
+    }
+  } else if (y < 22) {
+    if (x > 8 && x < 11) {
+      return BodyZone.RightArm;
+    } else if (x > 12 && x < 20) {
+      return BodyZone.Chest;
+    } else if (x > 21 && x < 24) {
+      return BodyZone.LeftArm;
     }
+  } else if (y < 30 && x > 12 && x < 20) {
+    if (y > 23 && y < 24 && x > 15 && x < 17) {
+      return BodyZone.Mouth;
+    } else if (y > 25 && y < 27 && x > 14 && x < 18) {
+      return BodyZone.Eyes;
+    } else {
+      return BodyZone.Head;
+    }
+  }
 
-    return null;
-  };
+  return null;
+};
 
 type BodyZoneSelectorProps = {
-  onClick?: (zone: BodyZone) => void,
-  scale?: number,
-  selectedZone: BodyZone | null,
-}
+  onClick?: (zone: BodyZone) => void;
+  scale?: number;
+  selectedZone: BodyZone | null;
+};
 
 type BodyZoneSelectorState = {
-  hoverZone: BodyZone | null,
-}
+  hoverZone: BodyZone | null;
+};
 
-export class BodyZoneSelector
-  extends Component<BodyZoneSelectorProps, BodyZoneSelectorState>
-{
+export class BodyZoneSelector extends Component<
+  BodyZoneSelectorProps,
+  BodyZoneSelectorState
+> {
   ref = createRef<HTMLDivElement>();
   state: BodyZoneSelectorState = {
     hoverZone: null,
-  }
+  };
 
   render() {
     const { hoverZone } = this.state;
     const { scale = 3, selectedZone } = this.props;
 
     return (
-      <div ref={this.ref} style={{
-        width: `${32 * scale}px`,
-        height: `${32 * scale}px`,
-        position: "relative",
-      }}>
+      <div
+        ref={this.ref}
+        style={{
+          width: `${32 * scale}px`,
+          height: `${32 * scale}px`,
+          position: 'relative',
+        }}
+      >
         <Box
           as="img"
-          src={resolveAsset("body_zones.base.png")}
+          src={resolveAsset('body_zones.base.png')}
           onClick={() => {
             const onClick = this.props.onClick;
             if (onClick && this.state.hoverZone) {
@@ -102,17 +108,17 @@ export class BodyZoneSelector
             }
 
             const x = event.clientX - rect.left;
-            const y = (32 * scale) - (event.clientY - rect.top);
+            const y = 32 * scale - (event.clientY - rect.top);
 
             this.setState({
               hoverZone: bodyZonePixelToZone(x / scale, y / scale),
             });
           }}
           style={{
-            "-ms-interpolation-mode": "nearest-neighbor",
-            "position": "absolute",
-            "width": `${32 * scale}px`,
-            "height": `${32 * scale}px`,
+            '-ms-interpolation-mode': 'nearest-neighbor',
+            position: 'absolute',
+            width: `${32 * scale}px`,
+            height: `${32 * scale}px`,
           }}
         />
 
@@ -121,26 +127,26 @@ export class BodyZoneSelector
             as="img"
             src={resolveAsset(`body_zones.${selectedZone}.png`)}
             style={{
-              "-ms-interpolation-mode": "nearest-neighbor",
-              "pointer-events": "none",
-              "position": "absolute",
-              "width": `${32 * scale}px`,
-              "height": `${32 * scale}px`,
+              '-ms-interpolation-mode': 'nearest-neighbor',
+              'pointer-events': 'none',
+              position: 'absolute',
+              width: `${32 * scale}px`,
+              height: `${32 * scale}px`,
             }}
           />
         )}
 
-        {hoverZone && (hoverZone !== selectedZone) && (
+        {hoverZone && hoverZone !== selectedZone && (
           <Box
             as="img"
             src={resolveAsset(`body_zones.${hoverZone}.png`)}
             style={{
-              "-ms-interpolation-mode": "nearest-neighbor",
-              "opacity": 0.5,
-              "pointer-events": "none",
-              "position": "absolute",
-              "width": `${32 * scale}px`,
-              "height": `${32 * scale}px`,
+              '-ms-interpolation-mode': 'nearest-neighbor',
+              opacity: 0.5,
+              'pointer-events': 'none',
+              position: 'absolute',
+              width: `${32 * scale}px`,
+              height: `${32 * scale}px`,
             }}
           />
         )}
diff --git a/tgui/packages/tgui/components/Box.tsx b/tgui/packages/tgui/components/Box.tsx
index 188d9b8c81f8..8d04afcf2aeb 100644
--- a/tgui/packages/tgui/components/Box.tsx
+++ b/tgui/packages/tgui/components/Box.tsx
@@ -93,10 +93,10 @@ export const halfUnit = (value: unknown): string | undefined => {
 const isColorCode = (str: unknown) => !isColorClass(str);
 
 const isColorClass = (str: unknown): boolean => {
-  return typeof str === "string" && CSS_COLORS.includes(str);
+  return typeof str === 'string' && CSS_COLORS.includes(str);
 };
 
-const mapRawPropTo = attrName => (style, value) => {
+const mapRawPropTo = (attrName) => (style, value) => {
   if (typeof value === 'number' || typeof value === 'string') {
     style[attrName] = value;
   }
@@ -122,7 +122,7 @@ const mapDirectionalUnitPropTo = (attrName, unit, dirs) => (style, value) => {
   }
 };
 
-const mapColorPropTo = attrName => (style, value) => {
+const mapColorPropTo = (attrName) => (style, value) => {
   if (isColorCode(value)) {
     style[attrName] = value;
   }
@@ -149,8 +149,7 @@ const styleMapperByPropName = {
   lineHeight: (style, value) => {
     if (typeof value === 'number') {
       style['line-height'] = value;
-    }
-    else if (typeof value === 'string') {
+    } else if (typeof value === 'string') {
       style['line-height'] = unit(value);
     }
   },
@@ -165,28 +164,26 @@ const styleMapperByPropName = {
   preserveWhitespace: mapBooleanPropTo('white-space', 'pre-wrap'),
   // Margins
   m: mapDirectionalUnitPropTo('margin', halfUnit, [
-    'top', 'bottom', 'left', 'right',
-  ]),
-  mx: mapDirectionalUnitPropTo('margin', halfUnit, [
-    'left', 'right',
-  ]),
-  my: mapDirectionalUnitPropTo('margin', halfUnit, [
-    'top', 'bottom',
+    'top',
+    'bottom',
+    'left',
+    'right',
   ]),
+  mx: mapDirectionalUnitPropTo('margin', halfUnit, ['left', 'right']),
+  my: mapDirectionalUnitPropTo('margin', halfUnit, ['top', 'bottom']),
   mt: mapUnitPropTo('margin-top', halfUnit),
   mb: mapUnitPropTo('margin-bottom', halfUnit),
   ml: mapUnitPropTo('margin-left', halfUnit),
   mr: mapUnitPropTo('margin-right', halfUnit),
   // Margins
   p: mapDirectionalUnitPropTo('padding', halfUnit, [
-    'top', 'bottom', 'left', 'right',
-  ]),
-  px: mapDirectionalUnitPropTo('padding', halfUnit, [
-    'left', 'right',
-  ]),
-  py: mapDirectionalUnitPropTo('padding', halfUnit, [
-    'top', 'bottom',
+    'top',
+    'bottom',
+    'left',
+    'right',
   ]),
+  px: mapDirectionalUnitPropTo('padding', halfUnit, ['left', 'right']),
+  py: mapDirectionalUnitPropTo('padding', halfUnit, ['top', 'bottom']),
   pt: mapUnitPropTo('padding-top', halfUnit),
   pb: mapUnitPropTo('padding-bottom', halfUnit),
   pl: mapUnitPropTo('padding-left', halfUnit),
@@ -224,8 +221,7 @@ export const computeBoxProps = (props: BoxProps) => {
     const mapPropToStyle = styleMapperByPropName[propName];
     if (mapPropToStyle) {
       mapPropToStyle(computedStyles, propValue);
-    }
-    else {
+    } else {
       computedProps[propName] = propValue;
     }
   }
@@ -257,19 +253,15 @@ export const computeBoxClassName = (props: BoxProps) => {
 };
 
 export const Box: SFC<BoxProps> = (props: BoxProps) => {
-  const {
-    as = 'div',
-    className,
-    children,
-    ...rest
-  } = props;
+  const { as = 'div', className, children, ...rest } = props;
   // Render props
   if (typeof children === 'function') {
     return children(computeBoxProps(props));
   }
-  const computedClassName = typeof className === 'string'
-    ? className + ' ' + computeBoxClassName(rest)
-    : computeBoxClassName(rest);
+  const computedClassName =
+    typeof className === 'string'
+      ? className + ' ' + computeBoxClassName(rest)
+      : computeBoxClassName(rest);
   const computedProps = computeBoxProps(rest);
   // Render a wrapper element
   return createVNode(
diff --git a/tgui/packages/tgui/components/Button.js b/tgui/packages/tgui/components/Button.js
index ee2fa1ac174c..4c8f70647c9d 100644
--- a/tgui/packages/tgui/components/Button.js
+++ b/tgui/packages/tgui/components/Button.js
@@ -14,7 +14,7 @@ import { Tooltip } from './Tooltip';
 
 const logger = createLogger('Button');
 
-export const Button = props => {
+export const Button = (props) => {
   const {
     className,
     fluid,
@@ -42,12 +42,13 @@ export const Button = props => {
   // A warning about the lowercase onclick
   if (onclick) {
     logger.warn(
-      `Lowercase 'onclick' is not supported on Button and lowercase`
-      + ` prop names are discouraged in general. Please use a camelCase`
-      + `'onClick' instead and read: `
-      + `https://infernojs.org/docs/guides/event-handling`);
+      `Lowercase 'onclick' is not supported on Button and lowercase` +
+        ` prop names are discouraged in general. Please use a camelCase` +
+        `'onClick' instead and read: ` +
+        `https://infernojs.org/docs/guides/event-handling`,
+    );
   }
-  rest.onClick = e => {
+  rest.onClick = (e) => {
     if (!disabled && onClick) {
       onClick(e);
     }
@@ -68,17 +69,18 @@ export const Button = props => {
         circular && 'Button--circular',
         compact && 'Button--compact',
         iconPosition && 'Button--iconPosition--' + iconPosition,
-        verticalAlignContent && "Button--flex",
-        (verticalAlignContent && fluid) && "Button--flex--fluid",
-        verticalAlignContent && 'Button--verticalAlignContent--' + verticalAlignContent,
-        (color && typeof color === 'string')
+        verticalAlignContent && 'Button--flex',
+        verticalAlignContent && fluid && 'Button--flex--fluid',
+        verticalAlignContent &&
+          'Button--verticalAlignContent--' + verticalAlignContent,
+        color && typeof color === 'string'
           ? 'Button--color--' + color
           : 'Button--color--default',
         className,
         computeBoxClassName(rest),
       ])}
       tabIndex={!disabled && '0'}
-      onKeyDown={e => {
+      onKeyDown={(e) => {
         if (props.captureKeys === false) {
           return;
         }
@@ -97,7 +99,8 @@ export const Button = props => {
           return;
         }
       }}
-      {...computeBoxProps(rest)}>
+      {...computeBoxProps(rest)}
+    >
       <div className="Button__content">
         {icon && iconPosition !== 'right' && (
           <Icon
@@ -134,14 +137,15 @@ export const Button = props => {
 
 Button.defaultHooks = pureComponentHooks;
 
-export const ButtonCheckbox = props => {
+export const ButtonCheckbox = (props) => {
   const { checked, ...rest } = props;
   return (
     <Button
       color="transparent"
       icon={checked ? 'check-square-o' : 'square-o'}
       selected={checked}
-      {...rest} />
+      {...rest}
+    />
   );
 };
 
@@ -166,16 +170,15 @@ export class ButtonConfirm extends Component {
     });
     if (clickedOnce) {
       setTimeout(() => window.addEventListener('click', this.handleClick));
-    }
-    else {
+    } else {
       window.removeEventListener('click', this.handleClick);
     }
   }
 
   render() {
     const {
-      confirmContent = "Confirm?",
-      confirmColor = "bad",
+      confirmContent = 'Confirm?',
+      confirmColor = 'bad',
       confirmIcon,
       icon,
       color,
@@ -188,9 +191,9 @@ export class ButtonConfirm extends Component {
         content={this.state.clickedOnce ? confirmContent : content}
         icon={this.state.clickedOnce ? confirmIcon : icon}
         color={this.state.clickedOnce ? confirmColor : color}
-        onClick={() => this.state.clickedOnce
-          ? onClick()
-          : this.setClickedOnce(true)}
+        onClick={() =>
+          this.state.clickedOnce ? onClick() : this.setClickedOnce(true)
+        }
         {...rest}
       />
     );
@@ -215,12 +218,11 @@ export class ButtonInput extends Component {
     if (this.inputRef) {
       const input = this.inputRef.current;
       if (inInput) {
-        input.value = this.props.currentValue || "";
+        input.value = this.props.currentValue || '';
         try {
           input.focus();
           input.select();
-        }
-        catch {}
+        } catch {}
       }
     }
   }
@@ -228,7 +230,7 @@ export class ButtonInput extends Component {
   commitResult(e) {
     if (this.inputRef) {
       const input = this.inputRef.current;
-      const hasValue = (input.value !== "");
+      const hasValue = input.value !== '';
       if (hasValue) {
         this.props.onCommit(e, input.value);
         return;
@@ -264,28 +266,25 @@ export class ButtonInput extends Component {
           'Button--color--' + color,
         ])}
         {...rest}
-        onClick={() => this.setInInput(true)}>
-        {icon && (
-          <Icon name={icon} rotation={iconRotation} spin={iconSpin} />
-        )}
-        <div>
-          {content}
-        </div>
+        onClick={() => this.setInInput(true)}
+      >
+        {icon && <Icon name={icon} rotation={iconRotation} spin={iconSpin} />}
+        <div>{content}</div>
         <input
           ref={this.inputRef}
           className="NumberInput__input"
           style={{
-            'display': !this.state.inInput ? 'none' : undefined,
+            display: !this.state.inInput ? 'none' : undefined,
             'text-align': 'left',
           }}
-          onBlur={e => {
+          onBlur={(e) => {
             if (!this.state.inInput) {
               return;
             }
             this.setInInput(false);
             this.commitResult(e);
           }}
-          onKeyDown={e => {
+          onKeyDown={(e) => {
             if (e.keyCode === KEY_ENTER) {
               this.setInInput(false);
               this.commitResult(e);
@@ -301,10 +300,7 @@ export class ButtonInput extends Component {
 
     if (tooltip) {
       buttonContent = (
-        <Tooltip
-          content={tooltip}
-          position={tooltipPosition}
-        >
+        <Tooltip content={tooltip} position={tooltipPosition}>
           {buttonContent}
         </Tooltip>
       );
diff --git a/tgui/packages/tgui/components/ByondUi.js b/tgui/packages/tgui/components/ByondUi.js
index 5b4f04dd0e5b..dc1a23d7a988 100644
--- a/tgui/packages/tgui/components/ByondUi.js
+++ b/tgui/packages/tgui/components/ByondUi.js
@@ -15,7 +15,7 @@ const logger = createLogger('ByondUi');
 // Stack of currently allocated BYOND UI element ids.
 const byondUiStack = [];
 
-const createByondUiElement = elementId => {
+const createByondUiElement = (elementId) => {
   // Reserve an index in the stack
   const index = byondUiStack.length;
   byondUiStack.push(null);
@@ -24,7 +24,7 @@ const createByondUiElement = elementId => {
   logger.log(`allocated '${id}'`);
   // Return a control structure
   return {
-    render: params => {
+    render: (params) => {
       logger.log(`rendering '${id}'`);
       byondUiStack[index] = id;
       Byond.winset(id, params);
@@ -56,14 +56,11 @@ window.addEventListener('beforeunload', () => {
 /**
  * Get the bounding box of the DOM element in display-pixels.
  */
-const getBoundingBox = element => {
+const getBoundingBox = (element) => {
   const pixelRatio = window.devicePixelRatio ?? 1;
   const rect = element.getBoundingClientRect();
   return {
-    pos: [
-      rect.left * pixelRatio,
-      rect.top * pixelRatio,
-    ],
+    pos: [rect.left * pixelRatio, rect.top * pixelRatio],
     size: [
       (rect.right - rect.left) * pixelRatio,
       (rect.bottom - rect.top) * pixelRatio,
@@ -82,16 +79,12 @@ export class ByondUi extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    const {
-      params: prevParams = {},
-      ...prevRest
-    } = this.props;
-    const {
-      params: nextParams = {},
-      ...nextRest
-    } = nextProps;
-    return shallowDiffers(prevParams, nextParams)
-      || shallowDiffers(prevRest, nextRest);
+    const { params: prevParams = {}, ...prevRest } = this.props;
+    const { params: nextParams = {}, ...nextRest } = nextProps;
+    return (
+      shallowDiffers(prevParams, nextParams) ||
+      shallowDiffers(prevRest, nextRest)
+    );
   }
 
   componentDidMount() {
@@ -109,9 +102,7 @@ export class ByondUi extends Component {
     if (Byond.IS_LTE_IE10) {
       return;
     }
-    const {
-      params = {},
-    } = this.props;
+    const { params = {} } = this.props;
     const box = getBoundingBox(this.containerRef.current);
     logger.debug('bounding box', box);
     this.byondUiElement.render({
@@ -134,9 +125,7 @@ export class ByondUi extends Component {
   render() {
     const { params, ...rest } = this.props;
     return (
-      <div
-        ref={this.containerRef}
-        {...computeBoxProps(rest)}>
+      <div ref={this.containerRef} {...computeBoxProps(rest)}>
         {/* Filler */}
         <div style={{ 'min-height': '22px' }} />
       </div>
diff --git a/tgui/packages/tgui/components/Chart.js b/tgui/packages/tgui/components/Chart.js
index 77913779db81..9a6ddc1eff5d 100644
--- a/tgui/packages/tgui/components/Chart.js
+++ b/tgui/packages/tgui/components/Chart.js
@@ -23,15 +23,15 @@ const normalizeData = (data, scale, rangeX, rangeY) => {
     min[1] = rangeY[0];
     max[1] = rangeY[1];
   }
-  const normalized = map(point => {
+  const normalized = map((point) => {
     return zipWith((value, min, max, scale) => {
-      return (value - min) / (max - min) * scale;
+      return ((value - min) / (max - min)) * scale;
     })(point, min, max, scale);
   })(data);
   return normalized;
 };
 
-const dataToPolylinePoints = data => {
+const dataToPolylinePoints = (data) => {
   let points = '';
   for (let i = 0; i < data.length; i++) {
     const point = data[i];
@@ -89,7 +89,7 @@ class LineChart extends Component {
     const points = dataToPolylinePoints(normalized);
     return (
       <Box position="relative" {...rest}>
-        {props => (
+        {(props) => (
           <div ref={this.ref} {...props}>
             <svg
               viewBox={`0 0 ${viewBox[0]} ${viewBox[1]}`}
@@ -101,13 +101,15 @@ class LineChart extends Component {
                 right: 0,
                 bottom: 0,
                 overflow: 'hidden',
-              }}>
+              }}
+            >
               <polyline
                 transform={`scale(1, -1) translate(0, -${viewBox[1]})`}
                 fill={fillColor}
                 stroke={strokeColor}
                 strokeWidth={strokeWidth}
-                points={points} />
+                points={points}
+              />
             </svg>
           </div>
         )}
@@ -118,7 +120,7 @@ class LineChart extends Component {
 
 LineChart.defaultHooks = pureComponentHooks;
 
-const Stub = props => null;
+const Stub = (props) => null;
 
 // IE8: No inline svg support
 export const Chart = {
diff --git a/tgui/packages/tgui/components/Collapsible.js b/tgui/packages/tgui/components/Collapsible.js
index 8b915814ba41..7d59a11417cc 100644
--- a/tgui/packages/tgui/components/Collapsible.js
+++ b/tgui/packages/tgui/components/Collapsible.js
@@ -20,13 +20,7 @@ export class Collapsible extends Component {
   render() {
     const { props } = this;
     const { open } = this.state;
-    const {
-      children,
-      color = 'default',
-      title,
-      buttons,
-      ...rest
-    } = props;
+    const { children, color = 'default', title, buttons, ...rest } = props;
     return (
       <Box mb={1}>
         <div className="Table">
@@ -36,21 +30,16 @@ export class Collapsible extends Component {
               color={color}
               icon={open ? 'chevron-down' : 'chevron-right'}
               onClick={() => this.setState({ open: !open })}
-              {...rest}>
+              {...rest}
+            >
               {title}
             </Button>
           </div>
           {buttons && (
-            <div className="Table__cell Table__cell--collapsing">
-              {buttons}
-            </div>
+            <div className="Table__cell Table__cell--collapsing">{buttons}</div>
           )}
         </div>
-        {open && (
-          <Box mt={1}>
-            {children}
-          </Box>
-        )}
+        {open && <Box mt={1}>{children}</Box>}
       </Box>
     );
   }
diff --git a/tgui/packages/tgui/components/ColorBox.js b/tgui/packages/tgui/components/ColorBox.js
index 10306cf4654c..b78b216b5000 100644
--- a/tgui/packages/tgui/components/ColorBox.js
+++ b/tgui/packages/tgui/components/ColorBox.js
@@ -7,25 +7,16 @@
 import { classes, pureComponentHooks } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 
-export const ColorBox = props => {
-  const {
-    content,
-    children,
-    className,
-    color,
-    backgroundColor,
-    ...rest
-  } = props;
+export const ColorBox = (props) => {
+  const { content, children, className, color, backgroundColor, ...rest } =
+    props;
   rest.color = content ? null : 'transparent';
   rest.backgroundColor = color || backgroundColor;
   return (
     <div
-      className={classes([
-        'ColorBox',
-        className,
-        computeBoxClassName(rest),
-      ])}
-      {...computeBoxProps(rest)}>
+      className={classes(['ColorBox', className, computeBoxClassName(rest)])}
+      {...computeBoxProps(rest)}
+    >
       {content || '.'}
     </div>
   );
diff --git a/tgui/packages/tgui/components/Dimmer.js b/tgui/packages/tgui/components/Dimmer.js
index d97c3626a3eb..85e046ca0dbd 100644
--- a/tgui/packages/tgui/components/Dimmer.js
+++ b/tgui/packages/tgui/components/Dimmer.js
@@ -7,18 +7,11 @@
 import { classes } from 'common/react';
 import { Box } from './Box';
 
-export const Dimmer = props => {
+export const Dimmer = (props) => {
   const { className, children, ...rest } = props;
   return (
-    <Box
-      className={classes([
-        'Dimmer',
-        ...className,
-      ])}
-      {...rest}>
-      <div className="Dimmer__inner">
-        {children}
-      </div>
+    <Box className={classes(['Dimmer', ...className])} {...rest}>
+      <div className="Dimmer__inner">{children}</div>
     </Box>
   );
 };
diff --git a/tgui/packages/tgui/components/Divider.js b/tgui/packages/tgui/components/Divider.js
index b5338428263e..8cbf9b77d7d0 100644
--- a/tgui/packages/tgui/components/Divider.js
+++ b/tgui/packages/tgui/components/Divider.js
@@ -6,19 +6,15 @@
 
 import { classes } from 'common/react';
 
-export const Divider = props => {
-  const {
-    vertical,
-    hidden,
-  } = props;
+export const Divider = (props) => {
+  const { vertical, hidden } = props;
   return (
     <div
       className={classes([
         'Divider',
         hidden && 'Divider--hidden',
-        vertical
-          ? 'Divider--vertical'
-          : 'Divider--horizontal',
-      ])} />
+        vertical ? 'Divider--vertical' : 'Divider--horizontal',
+      ])}
+    />
   );
 };
diff --git a/tgui/packages/tgui/components/DraggableControl.js b/tgui/packages/tgui/components/DraggableControl.js
index dfb47e8f4d6b..979b141c56e4 100644
--- a/tgui/packages/tgui/components/DraggableControl.js
+++ b/tgui/packages/tgui/components/DraggableControl.js
@@ -40,17 +40,18 @@ export class DraggableControl extends Component {
           suppressingFlicker: true,
         });
         clearTimeout(this.flickerTimer);
-        this.flickerTimer = setTimeout(() => this.setState({
-          suppressingFlicker: false,
-        }), suppressFlicker);
+        this.flickerTimer = setTimeout(
+          () =>
+            this.setState({
+              suppressingFlicker: false,
+            }),
+          suppressFlicker,
+        );
       }
     };
 
-    this.handleDragStart = e => {
-      const {
-        value,
-        dragMatrix,
-      } = this.props;
+    this.handleDragStart = (e) => {
+      const { value, dragMatrix } = this.props;
       const { editing } = this.state;
       if (editing) {
         return;
@@ -79,54 +80,38 @@ export class DraggableControl extends Component {
       document.addEventListener('mouseup', this.handleDragEnd);
     };
 
-    this.handleDragMove = e => {
-      const {
-        minValue,
-        maxValue,
-        step,
-        stepPixelSize,
-        dragMatrix,
-      } = this.props;
-      this.setState(prevState => {
+    this.handleDragMove = (e) => {
+      const { minValue, maxValue, step, stepPixelSize, dragMatrix } =
+        this.props;
+      this.setState((prevState) => {
         const state = { ...prevState };
         const offset = getScalarScreenOffset(e, dragMatrix) - state.origin;
         if (prevState.dragging) {
-          const stepOffset = Number.isFinite(minValue)
-            ? minValue % step
-            : 0;
+          const stepOffset = Number.isFinite(minValue) ? minValue % step : 0;
           // Translate mouse movement to value
           // Give it some headroom (by increasing clamp range by 1 step)
           state.internalValue = clamp(
-            state.internalValue
-              + offset * step / stepPixelSize,
+            state.internalValue + (offset * step) / stepPixelSize,
             minValue - step,
-            maxValue + step);
+            maxValue + step,
+          );
           // Clamp the final value
           state.value = clamp(
-            state.internalValue
-              - state.internalValue % step
-              + stepOffset,
+            state.internalValue - (state.internalValue % step) + stepOffset,
             minValue,
-            maxValue);
+            maxValue,
+          );
           state.origin = getScalarScreenOffset(e, dragMatrix);
-        }
-        else if (Math.abs(offset) > 4) {
+        } else if (Math.abs(offset) > 4) {
           state.dragging = true;
         }
         return state;
       });
     };
 
-    this.handleDragEnd = e => {
-      const {
-        onChange,
-        onDrag,
-      } = this.props;
-      const {
-        dragging,
-        value,
-        internalValue,
-      } = this.state;
+    this.handleDragEnd = (e) => {
+      const { onChange, onDrag } = this.props;
+      const { dragging, value, internalValue } = this.state;
       document.body.style['pointer-events'] = 'auto';
       clearTimeout(this.timer);
       clearInterval(this.dragInterval);
@@ -145,8 +130,7 @@ export class DraggableControl extends Component {
         if (onDrag) {
           onDrag(e, value);
         }
-      }
-      else if (this.inputRef) {
+      } else if (this.inputRef) {
         const input = this.inputRef.current;
         input.value = internalValue;
         // IE8: Dies when trying to focus a hidden element
@@ -154,8 +138,7 @@ export class DraggableControl extends Component {
         try {
           input.focus();
           input.select();
-        }
-        catch {}
+        } catch {}
       }
     };
   }
@@ -190,22 +173,14 @@ export class DraggableControl extends Component {
     // Setup a display element
     // Shows a formatted number based on what we are currently doing
     // with the draggable surface.
-    const renderDisplayElement = value => (
-      value + (unit ? ' ' + unit : '')
-    );
-    const displayElement = (
-      animated && !dragging && !suppressingFlicker && (
-        <AnimatedNumber
-          value={displayValue}
-          format={format}>
+    const renderDisplayElement = (value) => value + (unit ? ' ' + unit : '');
+    const displayElement =
+      (animated && !dragging && !suppressingFlicker && (
+        <AnimatedNumber value={displayValue} format={format}>
           {renderDisplayElement}
         </AnimatedNumber>
-      ) || (
-        renderDisplayElement(format
-          ? format(displayValue)
-          : displayValue)
-      )
-    );
+      )) ||
+      renderDisplayElement(format ? format(displayValue) : displayValue);
     // Setup an input element
     // Handles direct input via the keyboard
     const inputElement = (
@@ -218,19 +193,15 @@ export class DraggableControl extends Component {
           'line-height': lineHeight,
           'font-size': fontSize,
         }}
-        onBlur={e => {
+        onBlur={(e) => {
           if (!editing) {
             return;
           }
           let value;
           if (unclamped) {
             value = parseFloat(e.target.value);
-          }
-          else {
-            value = clamp(
-              parseFloat(e.target.value),
-              minValue,
-              maxValue);
+          } else {
+            value = clamp(parseFloat(e.target.value), minValue, maxValue);
           }
           if (Number.isNaN(value)) {
             this.setState({
@@ -250,17 +221,13 @@ export class DraggableControl extends Component {
             onDrag(e, value);
           }
         }}
-        onKeyDown={e => {
+        onKeyDown={(e) => {
           if (e.keyCode === 13) {
             let value;
             if (unclamped) {
               value = parseFloat(e.target.value);
-            }
-            else {
-              value = clamp(
-                parseFloat(e.target.value),
-                minValue,
-                maxValue);
+            } else {
+              value = clamp(parseFloat(e.target.value), minValue, maxValue);
             }
             if (Number.isNaN(value)) {
               this.setState({
@@ -287,7 +254,8 @@ export class DraggableControl extends Component {
             });
             return;
           }
-        }} />
+        }}
+      />
     );
     // Return a part of the state for higher-level components to use.
     return children({
diff --git a/tgui/packages/tgui/components/Dropdown.js b/tgui/packages/tgui/components/Dropdown.js
index a02f0715ab7c..a9ca84b48498 100644
--- a/tgui/packages/tgui/components/Dropdown.js
+++ b/tgui/packages/tgui/components/Dropdown.js
@@ -32,8 +32,7 @@ export class Dropdown extends Component {
     if (open) {
       setTimeout(() => window.addEventListener('click', this.handleClick));
       this.menuRef.focus();
-    }
-    else {
+    } else {
       window.removeEventListener('click', this.handleClick);
     }
   }
@@ -48,10 +47,10 @@ export class Dropdown extends Component {
 
   buildMenu() {
     const { options = [] } = this.props;
-    const ops = options.map(option => {
+    const ops = options.map((option) => {
       let displayText, value;
 
-      if (typeof option === "string") {
+      if (typeof option === 'string') {
         displayText = option;
         value = option;
       } else {
@@ -65,7 +64,8 @@ export class Dropdown extends Component {
           className="Dropdown__menuentry"
           onClick={() => {
             this.setSelected(value);
-          }}>
+          }}
+        >
           {displayText}
         </Box>
       );
@@ -94,24 +94,24 @@ export class Dropdown extends Component {
       displayText,
       ...boxProps
     } = props;
-    const {
-      className,
-      ...rest
-    } = boxProps;
+    const { className, ...rest } = boxProps;
 
     const adjustedOpen = over ? !this.state.open : this.state.open;
 
     const menu = this.state.open ? (
       <div
-        ref={menu => { this.menuRef = menu; }}
+        ref={(menu) => {
+          this.menuRef = menu;
+        }}
         tabIndex="-1"
         style={{
-          'width': openWidth,
+          width: openWidth,
         }}
         className={classes([
-          noscroll && 'Dropdown__menu-noscroll' || 'Dropdown__menu',
+          (noscroll && 'Dropdown__menu-noscroll') || 'Dropdown__menu',
           over && 'Dropdown__over',
-        ])}>
+        ])}
+      >
         {this.buildMenu()}
       </div>
     ) : null;
@@ -137,17 +137,17 @@ export class Dropdown extends Component {
             if (props.onOpen) {
               props.onOpen(event);
             }
-          }}>
+          }}
+        >
           {icon && (
-            <Icon
-              name={icon}
-              rotation={iconRotation}
-              spin={iconSpin}
-              mr={1} />
+            <Icon name={icon} rotation={iconRotation} spin={iconSpin} mr={1} />
           )}
-          <span className="Dropdown__selected-text" style={{
-            "overflow": clipSelectedText ? "hidden" : "visible",
-          }}>
+          <span
+            className="Dropdown__selected-text"
+            style={{
+              overflow: clipSelectedText ? 'hidden' : 'visible',
+            }}
+          >
             {displayText ? displayText : this.state.selected}
           </span>
           {!!nochevron || (
diff --git a/tgui/packages/tgui/components/FitText.tsx b/tgui/packages/tgui/components/FitText.tsx
index 445e59119c99..707002e46aa9 100644
--- a/tgui/packages/tgui/components/FitText.tsx
+++ b/tgui/packages/tgui/components/FitText.tsx
@@ -1,26 +1,29 @@
-import { Component, createRef, RefObject } from "inferno";
+import { Component, createRef, RefObject } from 'inferno';
 
 const DEFAULT_ACCEPTABLE_DIFFERENCE = 5;
 
-export class FitText extends Component<{
-  acceptableDifference?: number,
-  maxWidth: number,
-  maxFontSize: number,
-  native?: HTMLAttributes<HTMLDivElement>,
-}, {
-  fontSize: number,
-}> {
+export class FitText extends Component<
+  {
+    acceptableDifference?: number;
+    maxWidth: number;
+    maxFontSize: number;
+    native?: HTMLAttributes<HTMLDivElement>;
+  },
+  {
+    fontSize: number;
+  }
+> {
   ref: RefObject<HTMLDivElement> = createRef();
   state = {
     fontSize: 0,
-  }
+  };
 
   constructor() {
     super();
 
     this.resize = this.resize.bind(this);
 
-    window.addEventListener("resize", this.resize);
+    window.addEventListener('resize', this.resize);
   }
 
   componentDidUpdate(prevProps) {
@@ -30,7 +33,7 @@ export class FitText extends Component<{
   }
 
   componentWillUnmount() {
-    window.removeEventListener("resize", this.resize);
+    window.removeEventListener('resize', this.resize);
   }
 
   resize() {
@@ -53,8 +56,8 @@ export class FitText extends Component<{
       if (difference > 0) {
         end = middle;
       } else if (
-        difference
-          < (this.props.acceptableDifference ?? DEFAULT_ACCEPTABLE_DIFFERENCE)
+        difference <
+        (this.props.acceptableDifference ?? DEFAULT_ACCEPTABLE_DIFFERENCE)
       ) {
         start = middle;
       } else {
@@ -76,12 +79,11 @@ export class FitText extends Component<{
       <span
         ref={this.ref}
         style={{
-          "font-size": `${this.state.fontSize}px`,
-          ...(
-            typeof this.props.native?.style === "object"
-            && this.props.native.style
-          ),
-        }}>
+          'font-size': `${this.state.fontSize}px`,
+          ...(typeof this.props.native?.style === 'object' &&
+            this.props.native.style),
+        }}
+      >
         {this.props.children}
       </span>
     );
diff --git a/tgui/packages/tgui/components/Flex.tsx b/tgui/packages/tgui/components/Flex.tsx
index ec5e4ebfce85..546cbadb43f1 100644
--- a/tgui/packages/tgui/components/Flex.tsx
+++ b/tgui/packages/tgui/components/Flex.tsx
@@ -26,15 +26,7 @@ export const computeFlexClassName = (props: FlexProps) => {
 };
 
 export const computeFlexProps = (props: FlexProps) => {
-  const {
-    className,
-    direction,
-    wrap,
-    align,
-    justify,
-    inline,
-    ...rest
-  } = props;
+  const { className, direction, wrap, align, justify, inline, ...rest } = props;
   return computeBoxProps({
     style: {
       ...rest.style,
@@ -47,14 +39,11 @@ export const computeFlexProps = (props: FlexProps) => {
   });
 };
 
-export const Flex = props => {
+export const Flex = (props) => {
   const { className, ...rest } = props;
   return (
     <div
-      className={classes([
-        className,
-        computeFlexClassName(rest),
-      ])}
+      className={classes([className, computeFlexClassName(rest)])}
       {...computeFlexProps(rest)}
     />
   );
@@ -79,44 +68,34 @@ export const computeFlexItemClassName = (props: FlexItemProps) => {
 };
 
 export const computeFlexItemProps = (props: FlexItemProps) => {
-  const {
-    className,
-    style,
-    grow,
-    order,
-    shrink,
-    basis,
-    align,
-    ...rest
-  } = props;
-  const computedBasis = basis
+  const { className, style, grow, order, shrink, basis, align, ...rest } =
+    props;
+  const computedBasis =
+    basis ??
     // IE11: Set basis to specified width if it's known, which fixes certain
     // bugs when rendering tables inside the flex.
-    ?? props.width
+    props.width ??
     // If grow is used, basis should be set to 0 to be consistent with
     // flex css shorthand `flex: 1`.
-    ?? (grow !== undefined ? 0 : undefined);
+    (grow !== undefined ? 0 : undefined);
   return computeBoxProps({
     style: {
       ...style,
       'flex-grow': grow !== undefined && Number(grow),
       'flex-shrink': shrink !== undefined && Number(shrink),
       'flex-basis': unit(computedBasis),
-      'order': order,
+      order: order,
       'align-self': align,
     },
     ...rest,
   });
 };
 
-const FlexItem = props => {
+const FlexItem = (props) => {
   const { className, ...rest } = props;
   return (
     <div
-      className={classes([
-        className,
-        computeFlexItemClassName(props),
-      ])}
+      className={classes([className, computeFlexItemClassName(props)])}
       {...computeFlexItemProps(rest)}
     />
   );
diff --git a/tgui/packages/tgui/components/Grid.js b/tgui/packages/tgui/components/Grid.js
index 3269b672006c..7ad3fd1dfdbf 100644
--- a/tgui/packages/tgui/components/Grid.js
+++ b/tgui/packages/tgui/components/Grid.js
@@ -8,13 +8,11 @@ import { Table } from './Table';
 import { pureComponentHooks } from 'common/react';
 
 /** @deprecated */
-export const Grid = props => {
+export const Grid = (props) => {
   const { children, ...rest } = props;
   return (
     <Table {...rest}>
-      <Table.Row>
-        {children}
-      </Table.Row>
+      <Table.Row>{children}</Table.Row>
     </Table>
   );
 };
@@ -22,7 +20,7 @@ export const Grid = props => {
 Grid.defaultHooks = pureComponentHooks;
 
 /** @deprecated */
-export const GridColumn = props => {
+export const GridColumn = (props) => {
   const { size = 1, style, ...rest } = props;
   return (
     <Table.Cell
@@ -30,7 +28,8 @@ export const GridColumn = props => {
         width: size + '%',
         ...style,
       }}
-      {...rest} />
+      {...rest}
+    />
   );
 };
 
diff --git a/tgui/packages/tgui/components/Icon.js b/tgui/packages/tgui/components/Icon.js
index 98a40bf5d941..482f323b7c5c 100644
--- a/tgui/packages/tgui/components/Icon.js
+++ b/tgui/packages/tgui/components/Icon.js
@@ -11,22 +11,14 @@ import { computeBoxClassName, computeBoxProps } from './Box';
 
 const FA_OUTLINE_REGEX = /-o$/;
 
-export const Icon = props => {
-  const {
-    name,
-    size,
-    spin,
-    className,
-    rotation,
-    inverse,
-    ...rest
-  } = props;
+export const Icon = (props) => {
+  const { name, size, spin, className, rotation, inverse, ...rest } = props;
 
   if (size) {
     if (!rest.style) {
       rest.style = {};
     }
-    rest.style['font-size'] = (size * 100) + '%';
+    rest.style['font-size'] = size * 100 + '%';
   }
   if (typeof rotation === 'number') {
     if (!rest.style) {
@@ -37,15 +29,16 @@ export const Icon = props => {
 
   const boxProps = computeBoxProps(rest);
 
-  let iconClass = "";
-  if (name.startsWith("tg-")) {
+  let iconClass = '';
+  if (name.startsWith('tg-')) {
     // tgfont icon
     iconClass = name;
   } else {
     // font awesome icon
     const faRegular = FA_OUTLINE_REGEX.test(name);
     const faName = name.replace(FA_OUTLINE_REGEX, '');
-    iconClass = (faRegular ? 'far ' : 'fas ') + 'fa-'+ faName + (spin ? " fa-spin" : "");
+    iconClass =
+      (faRegular ? 'far ' : 'fas ') + 'fa-' + faName + (spin ? ' fa-spin' : '');
   }
   return (
     <i
@@ -55,26 +48,20 @@ export const Icon = props => {
         className,
         computeBoxClassName(rest),
       ])}
-      {...boxProps} />
+      {...boxProps}
+    />
   );
 };
 
 Icon.defaultHooks = pureComponentHooks;
 
-export const IconStack = props => {
-  const {
-    className,
-    children,
-    ...rest
-  } = props;
+export const IconStack = (props) => {
+  const { className, children, ...rest } = props;
   return (
     <span
-      class={classes([
-        'IconStack',
-        className,
-        computeBoxClassName(rest),
-      ])}
-      {...computeBoxProps(rest)}>
+      class={classes(['IconStack', className, computeBoxClassName(rest)])}
+      {...computeBoxProps(rest)}
+    >
       {children}
     </span>
   );
diff --git a/tgui/packages/tgui/components/InfinitePlane.js b/tgui/packages/tgui/components/InfinitePlane.js
index 393ac1de81d1..ad87d01ffe33 100644
--- a/tgui/packages/tgui/components/InfinitePlane.js
+++ b/tgui/packages/tgui/components/InfinitePlane.js
@@ -1,7 +1,7 @@
-import { computeBoxProps } from "./Box";
-import { Stack } from "./Stack";
-import { ProgressBar } from "./ProgressBar";
-import { Button } from "./Button";
+import { computeBoxProps } from './Box';
+import { Stack } from './Stack';
+import { ProgressBar } from './ProgressBar';
+import { Button } from './Button';
 import { Component } from 'inferno';
 
 const ZOOM_MIN_VAL = 0.5;
@@ -35,19 +35,19 @@ export class InfinitePlane extends Component {
   }
 
   componentDidMount() {
-    window.addEventListener("mouseup", this.onMouseUp);
+    window.addEventListener('mouseup', this.onMouseUp);
 
-    window.addEventListener("mousedown", this.doOffsetMouse);
-    window.addEventListener("mousemove", this.doOffsetMouse);
-    window.addEventListener("mouseup", this.doOffsetMouse);
+    window.addEventListener('mousedown', this.doOffsetMouse);
+    window.addEventListener('mousemove', this.doOffsetMouse);
+    window.addEventListener('mouseup', this.doOffsetMouse);
   }
 
   componentWillUnmount() {
-    window.removeEventListener("mouseup", this.onMouseUp);
+    window.removeEventListener('mouseup', this.onMouseUp);
 
-    window.removeEventListener("mousedown", this.doOffsetMouse);
-    window.removeEventListener("mousemove", this.doOffsetMouse);
-    window.removeEventListener("mouseup", this.doOffsetMouse);
+    window.removeEventListener('mousedown', this.doOffsetMouse);
+    window.removeEventListener('mousemove', this.doOffsetMouse);
+    window.removeEventListener('mouseup', this.doOffsetMouse);
   }
 
   doOffsetMouse(event) {
@@ -75,7 +75,7 @@ export class InfinitePlane extends Component {
   handleZoomIncrease(event) {
     const { onZoomChange } = this.props;
     const { zoom } = this.state;
-    const newZoomValue = Math.min(zoom+ZOOM_INCREMENT, ZOOM_MAX_VAL);
+    const newZoomValue = Math.min(zoom + ZOOM_INCREMENT, ZOOM_MAX_VAL);
     this.setState({
       zoom: newZoomValue,
     });
@@ -87,7 +87,7 @@ export class InfinitePlane extends Component {
   handleZoomDecrease(event) {
     const { onZoomChange } = this.props;
     const { zoom } = this.state;
-    const newZoomValue = Math.max(zoom-ZOOM_INCREMENT, ZOOM_MIN_VAL);
+    const newZoomValue = Math.max(zoom - ZOOM_INCREMENT, ZOOM_MIN_VAL);
     this.setState({
       zoom: newZoomValue,
     });
@@ -98,11 +98,7 @@ export class InfinitePlane extends Component {
   }
 
   handleMouseMove(event) {
-    const {
-      onBackgroundMoved,
-      initialLeft = 0,
-      initialTop = 0,
-    } = this.props;
+    const { onBackgroundMoved, initialLeft = 0, initialTop = 0 } = this.props;
     if (this.state.mouseDown) {
       let newX, newY;
       this.setState((state) => {
@@ -114,7 +110,7 @@ export class InfinitePlane extends Component {
         };
       });
       if (onBackgroundMoved) {
-        onBackgroundMoved(newX+initialLeft, newY+initialTop);
+        onBackgroundMoved(newX + initialLeft, newY + initialTop);
       }
     }
   }
@@ -128,11 +124,7 @@ export class InfinitePlane extends Component {
       initialTop = 0,
       ...rest
     } = this.props;
-    const {
-      left,
-      top,
-      zoom,
-    } = this.state;
+    const { left, top, zoom } = this.state;
 
     const finalLeft = initialLeft + left;
     const finalTop = initialTop + top;
@@ -144,8 +136,8 @@ export class InfinitePlane extends Component {
           ...rest,
           style: {
             ...rest.style,
-            overflow: "hidden",
-            position: "relative",
+            overflow: 'hidden',
+            position: 'relative',
           },
         })}
       >
@@ -153,38 +145,32 @@ export class InfinitePlane extends Component {
           onMouseDown={this.handleMouseDown}
           onMouseMove={this.handleMouseMove}
           style={{
-            "position": "fixed",
-            "height": "100%",
-            "width": "100%",
-            "background-image": `url("${backgroundImage}")`,
-            "background-position": `${finalLeft}px ${finalTop}px`,
-            "background-repeat": "repeat",
-            "background-size": `${zoom*imageWidth}px`,
+            position: 'fixed',
+            height: '100%',
+            width: '100%',
+            'background-image': `url("${backgroundImage}")`,
+            'background-position': `${finalLeft}px ${finalTop}px`,
+            'background-repeat': 'repeat',
+            'background-size': `${zoom * imageWidth}px`,
           }}
         />
         <div
           onMouseDown={this.handleMouseDown}
           onMouseMove={this.handleMouseMove}
           style={{
-            "position": "fixed",
-            "transform": `translate(${finalLeft}px, ${finalTop}px) scale(${zoom})`,
-            "transform-origin": "top left",
-            "height": "100%",
-            "width": "100%",
+            position: 'fixed',
+            transform: `translate(${finalLeft}px, ${finalTop}px) scale(${zoom})`,
+            'transform-origin': 'top left',
+            height: '100%',
+            width: '100%',
           }}
         >
           {children}
         </div>
 
-        <Stack
-          position="absolute"
-          width="100%"
-        >
+        <Stack position="absolute" width="100%">
           <Stack.Item>
-            <Button
-              icon="minus"
-              onClick={this.handleZoomDecrease}
-            />
+            <Button icon="minus" onClick={this.handleZoomDecrease} />
           </Stack.Item>
           <Stack.Item grow={1}>
             <ProgressBar
@@ -196,10 +182,7 @@ export class InfinitePlane extends Component {
             </ProgressBar>
           </Stack.Item>
           <Stack.Item>
-            <Button
-              icon="plus"
-              onClick={this.handleZoomIncrease}
-            />
+            <Button icon="plus" onClick={this.handleZoomIncrease} />
           </Stack.Item>
         </Stack>
       </div>
diff --git a/tgui/packages/tgui/components/Input.js b/tgui/packages/tgui/components/Input.js
index 4996ed322347..b334cd96215e 100644
--- a/tgui/packages/tgui/components/Input.js
+++ b/tgui/packages/tgui/components/Input.js
@@ -9,11 +9,8 @@ import { Component, createRef } from 'inferno';
 import { Box } from './Box';
 import { KEY_ESCAPE, KEY_ENTER } from 'common/keycodes';
 
-export const toInputValue = value => (
-  typeof value !== 'number' && typeof value !== 'string'
-    ? ''
-    : String(value)
-);
+export const toInputValue = (value) =>
+  typeof value !== 'number' && typeof value !== 'string' ? '' : String(value);
 
 export class Input extends Component {
   constructor() {
@@ -22,7 +19,7 @@ export class Input extends Component {
     this.state = {
       editing: false,
     };
-    this.handleInput = e => {
+    this.handleInput = (e) => {
       const { editing } = this.state;
       const { onInput } = this.props;
       if (!editing) {
@@ -32,13 +29,13 @@ export class Input extends Component {
         onInput(e, e.target.value);
       }
     };
-    this.handleFocus = e => {
+    this.handleFocus = (e) => {
       const { editing } = this.state;
       if (!editing) {
         this.setEditing(true);
       }
     };
-    this.handleBlur = e => {
+    this.handleBlur = (e) => {
       const { editing } = this.state;
       const { onChange } = this.props;
       if (editing) {
@@ -48,7 +45,7 @@ export class Input extends Component {
         }
       }
     };
-    this.handleKeyDown = e => {
+    this.handleKeyDown = (e) => {
       const { onInput, onChange, onEnter } = this.props;
       if (e.keyCode === KEY_ENTER) {
         this.setEditing(false);
@@ -128,12 +125,7 @@ export class Input extends Component {
       ...boxProps
     } = props;
     // Box props
-    const {
-      className,
-      fluid,
-      monospace,
-      ...rest
-    } = boxProps;
+    const { className, fluid, monospace, ...rest } = boxProps;
     return (
       <Box
         className={classes([
@@ -142,10 +134,9 @@ export class Input extends Component {
           monospace && 'Input--monospace',
           className,
         ])}
-        {...rest}>
-        <div className="Input__baseline">
-          .
-        </div>
+        {...rest}
+      >
+        <div className="Input__baseline">.</div>
         <input
           ref={this.inputRef}
           className="Input__input"
@@ -154,7 +145,8 @@ export class Input extends Component {
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           onKeyDown={this.handleKeyDown}
-          maxLength={maxLength} />
+          maxLength={maxLength}
+        />
       </Box>
     );
   }
diff --git a/tgui/packages/tgui/components/KeyListener.tsx b/tgui/packages/tgui/components/KeyListener.tsx
index 46b527653654..62509cae96d6 100644
--- a/tgui/packages/tgui/components/KeyListener.tsx
+++ b/tgui/packages/tgui/components/KeyListener.tsx
@@ -1,11 +1,11 @@
-import { Component } from "inferno";
-import { KeyEvent } from "../events";
-import { listenForKeyEvents } from "../hotkeys";
+import { Component } from 'inferno';
+import { KeyEvent } from '../events';
+import { listenForKeyEvents } from '../hotkeys';
 
 type KeyListenerProps = Partial<{
-  onKey: (key: KeyEvent) => void,
-  onKeyDown: (key: KeyEvent) => void,
-  onKeyUp: (key: KeyEvent) => void,
+  onKey: (key: KeyEvent) => void;
+  onKeyDown: (key: KeyEvent) => void;
+  onKeyUp: (key: KeyEvent) => void;
 }>;
 
 export class KeyListener extends Component<KeyListenerProps> {
@@ -14,7 +14,7 @@ export class KeyListener extends Component<KeyListenerProps> {
   constructor() {
     super();
 
-    this.dispose = listenForKeyEvents(key => {
+    this.dispose = listenForKeyEvents((key) => {
       if (this.props.onKey) {
         this.props.onKey(key);
       }
diff --git a/tgui/packages/tgui/components/Knob.js b/tgui/packages/tgui/components/Knob.js
index 175792471b3d..8609c066330d 100644
--- a/tgui/packages/tgui/components/Knob.js
+++ b/tgui/packages/tgui/components/Knob.js
@@ -10,13 +10,11 @@ import { computeBoxClassName, computeBoxProps } from './Box';
 import { DraggableControl } from './DraggableControl';
 import { NumberInput } from './NumberInput';
 
-export const Knob = props => {
+export const Knob = (props) => {
   // IE8: I don't want to support a yet another component on IE8.
   // IE8: It also can't handle SVG.
   if (Byond.IS_LTE_IE8) {
-    return (
-      <NumberInput {...props} />
-    );
+    return <NumberInput {...props} />;
   }
   const {
     // Draggable props (passthrough)
@@ -59,8 +57,9 @@ export const Knob = props => {
         suppressFlicker,
         unit,
         value,
-      }}>
-      {control => {
+      }}
+    >
+      {(control) => {
         const {
           dragging,
           editing,
@@ -73,14 +72,11 @@ export const Knob = props => {
         const scaledFillValue = scale(
           fillValue ?? displayValue,
           minValue,
-          maxValue);
-        const scaledDisplayValue = scale(
-          displayValue,
-          minValue,
-          maxValue);
-        const effectiveColor = color
-          || keyOfMatchingRange(fillValue ?? value, ranges)
-          || 'default';
+          maxValue,
+        );
+        const scaledDisplayValue = scale(displayValue, minValue, maxValue);
+        const effectiveColor =
+          color || keyOfMatchingRange(fillValue ?? value, ranges) || 'default';
         const rotation = Math.min((scaledDisplayValue - 0.5) * 270, 225);
         return (
           <div
@@ -98,44 +94,45 @@ export const Knob = props => {
               },
               ...rest,
             })}
-            onMouseDown={handleDragStart}>
+            onMouseDown={handleDragStart}
+          >
             <div className="Knob__circle">
               <div
                 className="Knob__cursorBox"
                 style={{
                   transform: `rotate(${rotation}deg)`,
-                }}>
+                }}
+              >
                 <div className="Knob__cursor" />
               </div>
             </div>
             {dragging && (
-              <div className="Knob__popupValue">
-                {displayElement}
-              </div>
+              <div className="Knob__popupValue">{displayElement}</div>
             )}
             <svg
               className="Knob__ring Knob__ringTrackPivot"
-              viewBox="0 0 100 100">
-              <circle
-                className="Knob__ringTrack"
-                cx="50"
-                cy="50"
-                r="50" />
+              viewBox="0 0 100 100"
+            >
+              <circle className="Knob__ringTrack" cx="50" cy="50" r="50" />
             </svg>
             <svg
               className="Knob__ring Knob__ringFillPivot"
-              viewBox="0 0 100 100">
+              viewBox="0 0 100 100"
+            >
               <circle
                 className="Knob__ringFill"
                 style={{
-                  'stroke-dashoffset': (
-                    Math.max(((bipolar ? 2.75 : 2.00) - scaledFillValue * 1.5)
-                      * Math.PI * 50, 0)
+                  'stroke-dashoffset': Math.max(
+                    ((bipolar ? 2.75 : 2.0) - scaledFillValue * 1.5) *
+                      Math.PI *
+                      50,
+                    0,
                   ),
                 }}
                 cx="50"
                 cy="50"
-                r="50" />
+                r="50"
+              />
             </svg>
             {inputElement}
           </div>
diff --git a/tgui/packages/tgui/components/LabeledControls.js b/tgui/packages/tgui/components/LabeledControls.js
index b4f069192c5f..f19bd4eb9338 100644
--- a/tgui/packages/tgui/components/LabeledControls.js
+++ b/tgui/packages/tgui/components/LabeledControls.js
@@ -6,31 +6,23 @@
 
 import { Flex } from './Flex';
 
-export const LabeledControls = props => {
-  const {
-    children,
-    wrap,
-    ...rest
-  } = props;
+export const LabeledControls = (props) => {
+  const { children, wrap, ...rest } = props;
   return (
     <Flex
       mx={-0.5}
       wrap={wrap}
       align="stretch"
       justify="space-between"
-      {...rest}>
+      {...rest}
+    >
       {children}
     </Flex>
   );
 };
 
-const LabeledControlsItem = props => {
-  const {
-    label,
-    children,
-    mx = 1,
-    ...rest
-  } = props;
+const LabeledControlsItem = (props) => {
+  const { label, children, mx = 1, ...rest } = props;
   return (
     <Flex.Item mx={mx}>
       <Flex
@@ -39,14 +31,11 @@ const LabeledControlsItem = props => {
         align="center"
         textAlign="center"
         justify="space-between"
-        {...rest}>
+        {...rest}
+      >
         <Flex.Item />
-        <Flex.Item>
-          {children}
-        </Flex.Item>
-        <Flex.Item color="label">
-          {label}
-        </Flex.Item>
+        <Flex.Item>{children}</Flex.Item>
+        <Flex.Item color="label">{label}</Flex.Item>
       </Flex>
     </Flex.Item>
   );
diff --git a/tgui/packages/tgui/components/LabeledList.tsx b/tgui/packages/tgui/components/LabeledList.tsx
index 938dc9c1d0c5..065707163b8a 100644
--- a/tgui/packages/tgui/components/LabeledList.tsx
+++ b/tgui/packages/tgui/components/LabeledList.tsx
@@ -15,11 +15,7 @@ type LabeledListProps = {
 
 export const LabeledList = (props: LabeledListProps) => {
   const { children } = props;
-  return (
-    <table className="LabeledList">
-      {children}
-    </table>
-  );
+  return <table className="LabeledList">{children}</table>;
 };
 
 LabeledList.defaultHooks = pureComponentHooks;
@@ -30,9 +26,9 @@ type LabeledListItemProps = {
   labelColor?: string | BooleanLike;
   color?: string | BooleanLike;
   textAlign?: string | BooleanLike;
-  buttons?: InfernoNode,
+  buttons?: InfernoNode;
   /** @deprecated */
-  content?: any,
+  content?: any;
   children?: InfernoNode;
   verticalAlign?: string;
 };
@@ -47,41 +43,31 @@ const LabeledListItem = (props: LabeledListItemProps) => {
     buttons,
     content,
     children,
-    verticalAlign = "baseline",
+    verticalAlign = 'baseline',
   } = props;
   return (
-    <tr
-      className={classes([
-        'LabeledList__row',
-        className,
-      ])}>
+    <tr className={classes(['LabeledList__row', className])}>
       <Box
         as="td"
         color={labelColor}
-        className={classes([
-          'LabeledList__cell',
-          'LabeledList__label',
-        ])}
-        verticalAlign={verticalAlign}>
-        {label ? typeof(label) === "string" ? label + ':' : label : null}
+        className={classes(['LabeledList__cell', 'LabeledList__label'])}
+        verticalAlign={verticalAlign}
+      >
+        {label ? (typeof label === 'string' ? label + ':' : label) : null}
       </Box>
       <Box
         as="td"
         color={color}
         textAlign={textAlign}
-        className={classes([
-          'LabeledList__cell',
-          'LabeledList__content',
-        ])}
+        className={classes(['LabeledList__cell', 'LabeledList__content'])}
         colSpan={buttons ? undefined : 2}
-        verticalAlign={verticalAlign}>
+        verticalAlign={verticalAlign}
+      >
         {content}
         {children}
       </Box>
       {buttons && (
-        <td className="LabeledList__cell LabeledList__buttons">
-          {buttons}
-        </td>
+        <td className="LabeledList__cell LabeledList__buttons">{buttons}</td>
       )}
     </tr>
   );
@@ -94,9 +80,7 @@ type LabeledListDividerProps = {
 };
 
 const LabeledListDivider = (props: LabeledListDividerProps) => {
-  const padding = props.size
-    ? unit(Math.max(0, props.size - 1))
-    : 0;
+  const padding = props.size ? unit(Math.max(0, props.size - 1)) : 0;
   return (
     <tr className="LabeledList__row">
       <td
@@ -104,7 +88,8 @@ const LabeledListDivider = (props: LabeledListDividerProps) => {
         style={{
           'padding-top': padding,
           'padding-bottom': padding,
-        }}>
+        }}
+      >
         <Divider />
       </td>
     </tr>
diff --git a/tgui/packages/tgui/components/Modal.js b/tgui/packages/tgui/components/Modal.js
index aa420af67575..0e0181acee64 100644
--- a/tgui/packages/tgui/components/Modal.js
+++ b/tgui/packages/tgui/components/Modal.js
@@ -8,21 +8,14 @@ import { classes } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 import { Dimmer } from './Dimmer';
 
-export const Modal = props => {
-  const {
-    className,
-    children,
-    ...rest
-  } = props;
+export const Modal = (props) => {
+  const { className, children, ...rest } = props;
   return (
     <Dimmer>
       <div
-        className={classes([
-          'Modal',
-          className,
-          computeBoxClassName(rest),
-        ])}
-        {...computeBoxProps(rest)}>
+        className={classes(['Modal', className, computeBoxClassName(rest)])}
+        {...computeBoxProps(rest)}
+      >
         {children}
       </div>
     </Dimmer>
diff --git a/tgui/packages/tgui/components/NoticeBox.js b/tgui/packages/tgui/components/NoticeBox.js
index 0277c63b343e..1c3b49b16a53 100644
--- a/tgui/packages/tgui/components/NoticeBox.js
+++ b/tgui/packages/tgui/components/NoticeBox.js
@@ -7,16 +7,8 @@
 import { classes, pureComponentHooks } from 'common/react';
 import { Box } from './Box';
 
-export const NoticeBox = props => {
-  const {
-    className,
-    color,
-    info,
-    warning,
-    success,
-    danger,
-    ...rest
-  } = props;
+export const NoticeBox = (props) => {
+  const { className, color, info, warning, success, danger, ...rest } = props;
   return (
     <Box
       className={classes([
@@ -27,7 +19,8 @@ export const NoticeBox = props => {
         danger && 'NoticeBox--type--danger',
         className,
       ])}
-      {...rest} />
+      {...rest}
+    />
   );
 };
 
diff --git a/tgui/packages/tgui/components/NumberInput.js b/tgui/packages/tgui/components/NumberInput.js
index 306772c8a512..311c1257c641 100644
--- a/tgui/packages/tgui/components/NumberInput.js
+++ b/tgui/packages/tgui/components/NumberInput.js
@@ -35,13 +35,17 @@ export class NumberInput extends Component {
           suppressingFlicker: true,
         });
         clearTimeout(this.flickerTimer);
-        this.flickerTimer = setTimeout(() => this.setState({
-          suppressingFlicker: false,
-        }), suppressFlicker);
+        this.flickerTimer = setTimeout(
+          () =>
+            this.setState({
+              suppressingFlicker: false,
+            }),
+          suppressFlicker,
+        );
       }
     };
 
-    this.handleDragStart = e => {
+    this.handleDragStart = (e) => {
       const { value } = this.props;
       const { editing } = this.state;
       if (editing) {
@@ -71,38 +75,35 @@ export class NumberInput extends Component {
       document.addEventListener('mouseup', this.handleDragEnd);
     };
 
-    this.handleDragMove = e => {
+    this.handleDragMove = (e) => {
       const { minValue, maxValue, step, stepPixelSize } = this.props;
-      this.setState(prevState => {
+      this.setState((prevState) => {
         const state = { ...prevState };
         const offset = state.origin - e.screenY;
         if (prevState.dragging) {
-          const stepOffset = Number.isFinite(minValue)
-            ? minValue % step
-            : 0;
+          const stepOffset = Number.isFinite(minValue) ? minValue % step : 0;
           // Translate mouse movement to value
           // Give it some headroom (by increasing clamp range by 1 step)
           state.internalValue = clamp(
-            state.internalValue + offset * step / stepPixelSize,
+            state.internalValue + (offset * step) / stepPixelSize,
             minValue - step,
-            maxValue + step);
+            maxValue + step,
+          );
           // Clamp the final value
           state.value = clamp(
-            state.internalValue
-              - state.internalValue % step
-              + stepOffset,
+            state.internalValue - (state.internalValue % step) + stepOffset,
             minValue,
-            maxValue);
+            maxValue,
+          );
           state.origin = e.screenY;
-        }
-        else if (Math.abs(offset) > 4) {
+        } else if (Math.abs(offset) > 4) {
           state.dragging = true;
         }
         return state;
       });
     };
 
-    this.handleDragEnd = e => {
+    this.handleDragEnd = (e) => {
       const { onChange, onDrag } = this.props;
       const { dragging, value, internalValue } = this.state;
       document.body.style['pointer-events'] = 'auto';
@@ -123,8 +124,7 @@ export class NumberInput extends Component {
         if (onDrag) {
           onDrag(e, value);
         }
-      }
-      else if (this.inputRef) {
+      } else if (this.inputRef) {
         const input = this.inputRef.current;
         input.value = internalValue;
         // IE8: Dies when trying to focus a hidden element
@@ -132,8 +132,7 @@ export class NumberInput extends Component {
         try {
           input.focus();
           input.select();
-        }
-        catch {}
+        } catch {}
       }
     };
   }
@@ -166,22 +165,18 @@ export class NumberInput extends Component {
       displayValue = intermediateValue;
     }
     // IE8: Use an "unselectable" prop because "user-select" doesn't work.
-    const renderContentElement = value => (
-      <div
-        className="NumberInput__content"
-        unselectable={Byond.IS_LTE_IE8}>
+    const renderContentElement = (value) => (
+      <div className="NumberInput__content" unselectable={Byond.IS_LTE_IE8}>
         {value + (unit ? ' ' + unit : '')}
       </div>
     );
-    const contentElement = (animated && !dragging && !suppressingFlicker && (
-      <AnimatedNumber
-        value={displayValue}
-        format={format}>
-        {renderContentElement}
-      </AnimatedNumber>
-    ) || (
-      renderContentElement(format ? format(displayValue) : displayValue)
-    ));
+    const contentElement =
+      (animated && !dragging && !suppressingFlicker && (
+        <AnimatedNumber value={displayValue} format={format}>
+          {renderContentElement}
+        </AnimatedNumber>
+      )) ||
+      renderContentElement(format ? format(displayValue) : displayValue);
     return (
       <Box
         className={classes([
@@ -193,15 +188,20 @@ export class NumberInput extends Component {
         minHeight={height}
         lineHeight={lineHeight}
         fontSize={fontSize}
-        onMouseDown={this.handleDragStart}>
+        onMouseDown={this.handleDragStart}
+      >
         <div className="NumberInput__barContainer">
           <div
             className="NumberInput__bar"
             style={{
-              height: clamp(
-                (displayValue - minValue) / (maxValue - minValue) * 100,
-                0, 100) + '%',
-            }} />
+              height:
+                clamp(
+                  ((displayValue - minValue) / (maxValue - minValue)) * 100,
+                  0,
+                  100,
+                ) + '%',
+            }}
+          />
         </div>
         {contentElement}
         <input
@@ -213,14 +213,11 @@ export class NumberInput extends Component {
             'line-height': lineHeight,
             'font-size': fontSize,
           }}
-          onBlur={e => {
+          onBlur={(e) => {
             if (!editing) {
               return;
             }
-            const value = clamp(
-              parseFloat(e.target.value),
-              minValue,
-              maxValue);
+            const value = clamp(parseFloat(e.target.value), minValue, maxValue);
             if (Number.isNaN(value)) {
               this.setState({
                 editing: false,
@@ -239,12 +236,13 @@ export class NumberInput extends Component {
               onDrag(e, value);
             }
           }}
-          onKeyDown={e => {
+          onKeyDown={(e) => {
             if (e.keyCode === 13) {
               const value = clamp(
                 parseFloat(e.target.value),
                 minValue,
-                maxValue);
+                maxValue,
+              );
               if (Number.isNaN(value)) {
                 this.setState({
                   editing: false,
@@ -270,7 +268,8 @@ export class NumberInput extends Component {
               });
               return;
             }
-          }} />
+          }}
+        />
       </Box>
     );
   }
diff --git a/tgui/packages/tgui/components/Popper.tsx b/tgui/packages/tgui/components/Popper.tsx
index 1d6c4a73a79e..18331157ed04 100644
--- a/tgui/packages/tgui/components/Popper.tsx
+++ b/tgui/packages/tgui/components/Popper.tsx
@@ -51,7 +51,7 @@ export class Popper extends Component<PopperProps> {
       this.popperInstance = createPopper(
         domNode,
         this.renderedContent,
-        options
+        options,
       );
     });
   }
@@ -74,7 +74,7 @@ export class Popper extends Component<PopperProps> {
       this.props.popperContent || null,
       this.renderedContent,
       callback,
-      this.context
+      this.context,
     );
   }
 
diff --git a/tgui/packages/tgui/components/ProgressBar.js b/tgui/packages/tgui/components/ProgressBar.js
index cba65fd71f22..affa05d84d8c 100644
--- a/tgui/packages/tgui/components/ProgressBar.js
+++ b/tgui/packages/tgui/components/ProgressBar.js
@@ -9,7 +9,7 @@ import { classes, pureComponentHooks } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 import { CSS_COLORS } from '../constants';
 
-export const ProgressBar = props => {
+export const ProgressBar = (props) => {
   const {
     className,
     value,
@@ -22,42 +22,34 @@ export const ProgressBar = props => {
   } = props;
   const scaledValue = scale(value, minValue, maxValue);
   const hasContent = children !== undefined;
-  const effectiveColor = color
-    || keyOfMatchingRange(value, ranges)
-    || 'default';
+  const effectiveColor =
+    color || keyOfMatchingRange(value, ranges) || 'default';
 
   // We permit colors to be in hex format, rgb()/rgba() format,
   // a name for a color-<name> class, or a base CSS class.
   const outerProps = computeBoxProps(rest);
-  const outerClasses = [
-    'ProgressBar',
-    className,
-    computeBoxClassName(rest),
-  ];
+  const outerClasses = ['ProgressBar', className, computeBoxClassName(rest)];
   const fillStyles = {
-    'width': clamp01(scaledValue) * 100 + '%',
+    width: clamp01(scaledValue) * 100 + '%',
   };
   if (CSS_COLORS.includes(effectiveColor) || effectiveColor === 'default') {
     // If the color is a color-<name> class, just use that.
     outerClasses.push('ProgressBar--color--' + effectiveColor);
   } else {
     // Otherwise, set styles directly.
-    outerProps.style = (outerProps.style || "")
-      + `border-color: ${effectiveColor};`;
+    outerProps.style =
+      (outerProps.style || '') + `border-color: ${effectiveColor};`;
     fillStyles['background-color'] = effectiveColor;
   }
 
   return (
-    <div
-      className={classes(outerClasses)}
-      {...outerProps}>
+    <div className={classes(outerClasses)} {...outerProps}>
       <div
         className="ProgressBar__fill ProgressBar__fill--animated"
-        style={fillStyles} />
+        style={fillStyles}
+      />
       <div className="ProgressBar__content">
-        {hasContent
-          ? children
-          : toFixed(scaledValue * 100) + '%'}
+        {hasContent ? children : toFixed(scaledValue * 100) + '%'}
       </div>
     </div>
   );
diff --git a/tgui/packages/tgui/components/RestrictedInput.js b/tgui/packages/tgui/components/RestrictedInput.js
index 0a6e2cb440c3..d6f17d16b3a3 100644
--- a/tgui/packages/tgui/components/RestrictedInput.js
+++ b/tgui/packages/tgui/components/RestrictedInput.js
@@ -136,7 +136,8 @@ export class RestrictedInput extends Component {
           monospace && 'Input--monospace',
           className,
         ])}
-        {...rest}>
+        {...rest}
+      >
         <div className="Input__baseline">.</div>
         <input
           className="Input__input"
diff --git a/tgui/packages/tgui/components/RoundGauge.js b/tgui/packages/tgui/components/RoundGauge.js
index e68f397bdbdc..21e479533242 100644
--- a/tgui/packages/tgui/components/RoundGauge.js
+++ b/tgui/packages/tgui/components/RoundGauge.js
@@ -9,12 +9,10 @@ import { classes } from 'common/react';
 import { AnimatedNumber } from './AnimatedNumber';
 import { Box, computeBoxClassName, computeBoxProps } from './Box';
 
-export const RoundGauge = props => {
+export const RoundGauge = (props) => {
   // Support for IE8 is for losers sorry B)
   if (Byond.IS_LTE_IE8) {
-    return (
-      <AnimatedNumber {...props} />
-    );
+    return <AnimatedNumber {...props} />;
   }
 
   const {
@@ -31,14 +29,11 @@ export const RoundGauge = props => {
     ...rest
   } = props;
 
-  const scaledValue = scale(
-    value,
-    minValue,
-    maxValue);
+  const scaledValue = scale(value, minValue, maxValue);
   const clampedValue = clamp01(scaledValue);
-  const scaledRanges = ranges ? {} : { "primary": [0, 1] };
+  const scaledRanges = ranges ? {} : { primary: [0, 1] };
   if (ranges) {
-    Object.keys(ranges).forEach(x => {
+    Object.keys(ranges).forEach((x) => {
       const range = ranges[x];
       scaledRanges[x] = [
         scale(range[0], minValue, maxValue),
@@ -64,8 +59,8 @@ export const RoundGauge = props => {
     return false;
   };
 
-  const alertColor = shouldShowAlert()
-    && keyOfMatchingRange(clampedValue, scaledRanges);
+  const alertColor =
+    shouldShowAlert() && keyOfMatchingRange(clampedValue, scaledRanges);
 
   return (
     <Box inline>
@@ -81,23 +76,21 @@ export const RoundGauge = props => {
             ...style,
           },
           ...rest,
-        })}>
-        <svg
-          viewBox="0 0 100 50">
+        })}
+      >
+        <svg viewBox="0 0 100 50">
           {(alertAfter || alertBefore) && (
-            <g className={classes([
-              'RoundGauge__alert',
-              alertColor ? `active RoundGauge__alert--${alertColor}` : '',
-            ])}>
+            <g
+              className={classes([
+                'RoundGauge__alert',
+                alertColor ? `active RoundGauge__alert--${alertColor}` : '',
+              ])}
+            >
               <path d="M48.211,14.578C48.55,13.9 49.242,13.472 50,13.472C50.758,13.472 51.45,13.9 51.789,14.578C54.793,20.587 60.795,32.589 63.553,38.106C63.863,38.726 63.83,39.462 63.465,40.051C63.101,40.641 62.457,41 61.764,41C55.996,41 44.004,41 38.236,41C37.543,41 36.899,40.641 36.535,40.051C36.17,39.462 36.137,38.726 36.447,38.106C39.205,32.589 45.207,20.587 48.211,14.578ZM50,34.417C51.426,34.417 52.583,35.574 52.583,37C52.583,38.426 51.426,39.583 50,39.583C48.574,39.583 47.417,38.426 47.417,37C47.417,35.574 48.574,34.417 50,34.417ZM50,32.75C50,32.75 53,31.805 53,22.25C53,20.594 51.656,19.25 50,19.25C48.344,19.25 47,20.594 47,22.25C47,31.805 50,32.75 50,32.75Z" />
             </g>
           )}
           <g>
-            <circle
-              className="RoundGauge__ringTrack"
-              cx="50"
-              cy="50"
-              r="45" />
+            <circle className="RoundGauge__ringTrack" cx="50" cy="50" r="45" />
           </g>
           <g>
             {Object.keys(scaledRanges).map((x, i) => {
@@ -107,36 +100,37 @@ export const RoundGauge = props => {
                   className={`RoundGauge__ringFill RoundGauge--color--${x}`}
                   key={i}
                   style={{
-                    'stroke-dashoffset': (
-                      Math.max((2.0 - (col_ranges[1] - col_ranges[0]))
-                        * Math.PI * 50, 0)
+                    'stroke-dashoffset': Math.max(
+                      (2.0 - (col_ranges[1] - col_ranges[0])) * Math.PI * 50,
+                      0,
                     ),
                   }}
                   transform={`rotate(${180 + 180 * col_ranges[0]} 50 50)`}
                   cx="50"
                   cy="50"
-                  r="45" />
+                  r="45"
+                />
               );
             })}
           </g>
           <g
             className="RoundGauge__needle"
-            transform={`rotate(${clampedValue * 180 - 90} 50 50)`}>
+            transform={`rotate(${clampedValue * 180 - 90} 50 50)`}
+          >
             <polygon
               className="RoundGauge__needleLine"
-              points="46,50 50,0 54,50" />
+              points="46,50 50,0 54,50"
+            />
             <circle
               className="RoundGauge__needleMiddle"
               cx="50"
               cy="50"
-              r="8" />
+              r="8"
+            />
           </g>
         </svg>
       </div>
-      <AnimatedNumber
-        value={value}
-        format={format}
-        size={size} />
+      <AnimatedNumber value={value} format={format} size={size} />
     </Box>
   );
 };
diff --git a/tgui/packages/tgui/components/Section.tsx b/tgui/packages/tgui/components/Section.tsx
index ee79d2b6aba1..87e57e22fd57 100644
--- a/tgui/packages/tgui/components/Section.tsx
+++ b/tgui/packages/tgui/components/Section.tsx
@@ -67,15 +67,12 @@ export class Section extends Component<SectionProps> {
           className,
           computeBoxClassName(rest),
         ])}
-        {...computeBoxProps(rest)}>
+        {...computeBoxProps(rest)}
+      >
         {hasTitle && (
           <div className="Section__title">
-            <span className="Section__titleText">
-              {title}
-            </span>
-            <div className="Section__buttons">
-              {buttons}
-            </div>
+            <span className="Section__titleText">{title}</span>
+            <div className="Section__buttons">{buttons}</div>
           </div>
         )}
         <div className="Section__rest">
diff --git a/tgui/packages/tgui/components/Slider.js b/tgui/packages/tgui/components/Slider.js
index 005e6c1f8f78..00b7fa455b4c 100644
--- a/tgui/packages/tgui/components/Slider.js
+++ b/tgui/packages/tgui/components/Slider.js
@@ -10,12 +10,10 @@ import { computeBoxClassName, computeBoxProps } from './Box';
 import { DraggableControl } from './DraggableControl';
 import { NumberInput } from './NumberInput';
 
-export const Slider = props => {
+export const Slider = (props) => {
   // IE8: I don't want to support a yet another component on IE8.
   if (Byond.IS_LTE_IE8) {
-    return (
-      <NumberInput {...props} />
-    );
+    return <NumberInput {...props} />;
   }
   const {
     // Draggable props (passthrough)
@@ -54,8 +52,9 @@ export const Slider = props => {
         suppressFlicker,
         unit,
         value,
-      }}>
-      {control => {
+      }}
+    >
+      {(control) => {
         const {
           dragging,
           editing,
@@ -65,23 +64,16 @@ export const Slider = props => {
           inputElement,
           handleDragStart,
         } = control;
-        const hasFillValue = fillValue !== undefined
-          && fillValue !== null;
-        const scaledValue = scale(
-          value,
-          minValue,
-          maxValue);
+        const hasFillValue = fillValue !== undefined && fillValue !== null;
+        const scaledValue = scale(value, minValue, maxValue);
         const scaledFillValue = scale(
           fillValue ?? displayValue,
           minValue,
-          maxValue);
-        const scaledDisplayValue = scale(
-          displayValue,
-          minValue,
-          maxValue);
-        const effectiveColor = color
-          || keyOfMatchingRange(fillValue ?? value, ranges)
-          || 'default';
+          maxValue,
+        );
+        const scaledDisplayValue = scale(displayValue, minValue, maxValue);
+        const effectiveColor =
+          color || keyOfMatchingRange(fillValue ?? value, ranges) || 'default';
         return (
           <div
             className={classes([
@@ -92,7 +84,8 @@ export const Slider = props => {
               computeBoxClassName(rest),
             ])}
             {...computeBoxProps(rest)}
-            onMouseDown={handleDragStart}>
+            onMouseDown={handleDragStart}
+          >
             <div
               className={classes([
                 'ProgressBar__fill',
@@ -101,30 +94,30 @@ export const Slider = props => {
               style={{
                 width: clamp01(scaledFillValue) * 100 + '%',
                 opacity: 0.4,
-              }} />
+              }}
+            />
             <div
               className="ProgressBar__fill"
               style={{
-                width: clamp01(Math.min(scaledFillValue, scaledDisplayValue))
-                  * 100 + '%',
-              }} />
+                width:
+                  clamp01(Math.min(scaledFillValue, scaledDisplayValue)) * 100 +
+                  '%',
+              }}
+            />
             <div
               className="Slider__cursorOffset"
               style={{
                 width: clamp01(scaledDisplayValue) * 100 + '%',
-              }}>
+              }}
+            >
               <div className="Slider__cursor" />
               <div className="Slider__pointer" />
               {dragging && (
-                <div className="Slider__popupValue">
-                  {displayElement}
-                </div>
+                <div className="Slider__popupValue">{displayElement}</div>
               )}
             </div>
             <div className="ProgressBar__content">
-              {hasContent
-                ? children
-                : displayElement}
+              {hasContent ? children : displayElement}
             </div>
             {inputElement}
           </div>
diff --git a/tgui/packages/tgui/components/Stack.tsx b/tgui/packages/tgui/components/Stack.tsx
index b775ce3393e8..49b8a1539b5d 100644
--- a/tgui/packages/tgui/components/Stack.tsx
+++ b/tgui/packages/tgui/components/Stack.tsx
@@ -6,7 +6,14 @@
 
 import { classes } from 'common/react';
 import { RefObject } from 'inferno';
-import { computeFlexClassName, computeFlexItemClassName, computeFlexItemProps, computeFlexProps, FlexItemProps, FlexProps } from './Flex';
+import {
+  computeFlexClassName,
+  computeFlexItemClassName,
+  computeFlexItemProps,
+  computeFlexProps,
+  FlexItemProps,
+  FlexProps,
+} from './Flex';
 
 type StackProps = FlexProps & {
   vertical?: boolean;
@@ -20,9 +27,7 @@ export const Stack = (props: StackProps) => {
       className={classes([
         'Stack',
         fill && 'Stack--fill',
-        vertical
-          ? 'Stack--vertical'
-          : 'Stack--horizontal',
+        vertical ? 'Stack--vertical' : 'Stack--horizontal',
         zebra && 'Stack--zebra',
         className,
         computeFlexClassName(props),
@@ -36,7 +41,7 @@ export const Stack = (props: StackProps) => {
 };
 
 type StackItemProps = FlexProps & {
-  innerRef?: RefObject<HTMLDivElement>,
+  innerRef?: RefObject<HTMLDivElement>;
 };
 
 const StackItem = (props: StackItemProps) => {
diff --git a/tgui/packages/tgui/components/Table.js b/tgui/packages/tgui/components/Table.js
index 545e26f5934f..aae47df427c3 100644
--- a/tgui/packages/tgui/components/Table.js
+++ b/tgui/packages/tgui/components/Table.js
@@ -7,13 +7,8 @@
 import { classes, pureComponentHooks } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 
-export const Table = props => {
-  const {
-    className,
-    collapsing,
-    children,
-    ...rest
-  } = props;
+export const Table = (props) => {
+  const { className, collapsing, children, ...rest } = props;
   return (
     <table
       className={classes([
@@ -22,22 +17,17 @@ export const Table = props => {
         className,
         computeBoxClassName(rest),
       ])}
-      {...computeBoxProps(rest)}>
-      <tbody>
-        {children}
-      </tbody>
+      {...computeBoxProps(rest)}
+    >
+      <tbody>{children}</tbody>
     </table>
   );
 };
 
 Table.defaultHooks = pureComponentHooks;
 
-export const TableRow = props => {
-  const {
-    className,
-    header,
-    ...rest
-  } = props;
+export const TableRow = (props) => {
+  const { className, header, ...rest } = props;
   return (
     <tr
       className={classes([
@@ -46,19 +36,15 @@ export const TableRow = props => {
         className,
         computeBoxClassName(props),
       ])}
-      {...computeBoxProps(rest)} />
+      {...computeBoxProps(rest)}
+    />
   );
 };
 
 TableRow.defaultHooks = pureComponentHooks;
 
-export const TableCell = props => {
-  const {
-    className,
-    collapsing,
-    header,
-    ...rest
-  } = props;
+export const TableCell = (props) => {
+  const { className, collapsing, header, ...rest } = props;
   return (
     <td
       className={classes([
@@ -68,7 +54,8 @@ export const TableCell = props => {
         className,
         computeBoxClassName(props),
       ])}
-      {...computeBoxProps(rest)} />
+      {...computeBoxProps(rest)}
+    />
   );
 };
 
diff --git a/tgui/packages/tgui/components/Tabs.js b/tgui/packages/tgui/components/Tabs.js
index ca0453f8da34..e5b1ea183582 100644
--- a/tgui/packages/tgui/components/Tabs.js
+++ b/tgui/packages/tgui/components/Tabs.js
@@ -8,34 +8,26 @@ import { canRender, classes } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 import { Icon } from './Icon';
 
-export const Tabs = props => {
-  const {
-    className,
-    vertical,
-    fill,
-    fluid,
-    children,
-    ...rest
-  } = props;
+export const Tabs = (props) => {
+  const { className, vertical, fill, fluid, children, ...rest } = props;
   return (
     <div
       className={classes([
         'Tabs',
-        vertical
-          ? 'Tabs--vertical'
-          : 'Tabs--horizontal',
+        vertical ? 'Tabs--vertical' : 'Tabs--horizontal',
         fill && 'Tabs--fill',
         fluid && 'Tabs--fluid',
         className,
         computeBoxClassName(rest),
       ])}
-      {...computeBoxProps(rest)}>
+      {...computeBoxProps(rest)}
+    >
       {children}
     </div>
   );
 };
 
-const Tab = props => {
+const Tab = (props) => {
   const {
     className,
     selected,
@@ -56,24 +48,16 @@ const Tab = props => {
         className,
         ...computeBoxClassName(rest),
       ])}
-      {...computeBoxProps(rest)}>
-      {canRender(leftSlot) && (
-        <div className="Tab__left">
-          {leftSlot}
-        </div>
-      ) || !!icon && (
-        <div className="Tab__left">
-          <Icon name={icon} />
-        </div>
-      )}
-      <div className="Tab__text">
-        {children}
-      </div>
-      {canRender(rightSlot) && (
-        <div className="Tab__right">
-          {rightSlot}
-        </div>
-      )}
+      {...computeBoxProps(rest)}
+    >
+      {(canRender(leftSlot) && <div className="Tab__left">{leftSlot}</div>) ||
+        (!!icon && (
+          <div className="Tab__left">
+            <Icon name={icon} />
+          </div>
+        ))}
+      <div className="Tab__text">{children}</div>
+      {canRender(rightSlot) && <div className="Tab__right">{rightSlot}</div>}
     </div>
   );
 };
diff --git a/tgui/packages/tgui/components/TextArea.js b/tgui/packages/tgui/components/TextArea.js
index 4b6fda547cb5..fb3c2c1b5fc9 100644
--- a/tgui/packages/tgui/components/TextArea.js
+++ b/tgui/packages/tgui/components/TextArea.js
@@ -19,10 +19,8 @@ export class TextArea extends Component {
     this.state = {
       editing: false,
     };
-    const {
-      dontUseTabForIndent = false,
-    } = props;
-    this.handleOnInput = e => {
+    const { dontUseTabForIndent = false } = props;
+    this.handleOnInput = (e) => {
       const { editing } = this.state;
       const { onInput } = this.props;
       if (!editing) {
@@ -32,7 +30,7 @@ export class TextArea extends Component {
         onInput(e, e.target.value);
       }
     };
-    this.handleOnChange = e => {
+    this.handleOnChange = (e) => {
       const { editing } = this.state;
       const { onChange } = this.props;
       if (editing) {
@@ -42,7 +40,7 @@ export class TextArea extends Component {
         onChange(e, e.target.value);
       }
     };
-    this.handleKeyPress = e => {
+    this.handleKeyPress = (e) => {
       const { editing } = this.state;
       const { onKeyPress } = this.props;
       if (!editing) {
@@ -52,7 +50,7 @@ export class TextArea extends Component {
         onKeyPress(e, e.target.value);
       }
     };
-    this.handleKeyDown = e => {
+    this.handleKeyDown = (e) => {
       const { editing } = this.state;
       const { onKeyDown } = this.props;
       if (e.keyCode === KEY_ESCAPE) {
@@ -69,10 +67,10 @@ export class TextArea extends Component {
         if (keyCode === 9) {
           e.preventDefault();
           const { value, selectionStart, selectionEnd } = e.target;
-          e.target.value = (
-            value.substring(0, selectionStart) + "\t"
-              + value.substring(selectionEnd)
-          );
+          e.target.value =
+            value.substring(0, selectionStart) +
+            '\t' +
+            value.substring(selectionEnd);
           e.target.selectionEnd = selectionStart + 1;
         }
       }
@@ -80,13 +78,13 @@ export class TextArea extends Component {
         onKeyDown(e, e.target.value);
       }
     };
-    this.handleFocus = e => {
+    this.handleFocus = (e) => {
       const { editing } = this.state;
       if (!editing) {
         this.setEditing(true);
       }
     };
-    this.handleBlur = e => {
+    this.handleBlur = (e) => {
       const { editing } = this.state;
       const { onChange } = this.props;
       if (editing) {
@@ -150,19 +148,12 @@ export class TextArea extends Component {
       ...boxProps
     } = this.props;
     // Box props
-    const {
-      className,
-      fluid,
-      ...rest
-    } = boxProps;
+    const { className, fluid, ...rest } = boxProps;
     return (
       <Box
-        className={classes([
-          'TextArea',
-          fluid && 'TextArea--fluid',
-          className,
-        ])}
-        {...rest}>
+        className={classes(['TextArea', fluid && 'TextArea--fluid', className])}
+        {...rest}
+      >
         <textarea
           ref={this.textareaRef}
           className="TextArea__textarea"
@@ -173,7 +164,8 @@ export class TextArea extends Component {
           onInput={this.handleOnInput}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
-          maxLength={maxLength} />
+          maxLength={maxLength}
+        />
       </Box>
     );
   }
diff --git a/tgui/packages/tgui/components/TimeDisplay.js b/tgui/packages/tgui/components/TimeDisplay.js
index fdba84563a8c..6b87ee5260ac 100644
--- a/tgui/packages/tgui/components/TimeDisplay.js
+++ b/tgui/packages/tgui/components/TimeDisplay.js
@@ -2,10 +2,10 @@ import { formatTime } from '../format';
 import { Component } from 'inferno';
 
 // AnimatedNumber Copypaste
-const isSafeNumber = value => {
-  return typeof value === 'number'
-    && Number.isFinite(value)
-    && !Number.isNaN(value);
+const isSafeNumber = (value) => {
+  return (
+    typeof value === 'number' && Number.isFinite(value) && !Number.isNaN(value)
+  );
 };
 
 export class TimeDisplay extends Component {
@@ -36,7 +36,7 @@ export class TimeDisplay extends Component {
       this.last_seen_value = this.props.value;
       current = this.props.value;
     }
-    const mod = this.props.auto === "up" ? 10 : -10; // Time down by default.
+    const mod = this.props.auto === 'up' ? 10 : -10; // Time down by default.
     const value = Math.max(0, current + mod); // one sec tick
     this.setState({ value });
   }
diff --git a/tgui/packages/tgui/components/Tooltip.tsx b/tgui/packages/tgui/components/Tooltip.tsx
index d3ae1cccbdf7..314253e08d31 100644
--- a/tgui/packages/tgui/components/Tooltip.tsx
+++ b/tgui/packages/tgui/components/Tooltip.tsx
@@ -1,11 +1,10 @@
-
 import { createPopper, Placement, VirtualElement } from '@popperjs/core';
 import { Component, findDOMfromVNode, InfernoNode, render } from 'inferno';
 
 type TooltipProps = {
   children?: InfernoNode;
   content: InfernoNode;
-  position?: Placement,
+  position?: Placement;
 };
 
 type TooltipState = {
@@ -13,10 +12,12 @@ type TooltipState = {
 };
 
 const DEFAULT_OPTIONS = {
-  modifiers: [{
-    name: "eventListeners",
-    enabled: false,
-  }],
+  modifiers: [
+    {
+      name: 'eventListeners',
+      enabled: false,
+    },
+  ],
 };
 
 const NULL_RECT = {
@@ -37,10 +38,8 @@ export class Tooltip extends Component<TooltipProps, TooltipState> {
   static singletonPopper: ReturnType<typeof createPopper> | undefined;
   static currentHoveredElement: Element | undefined;
   static virtualElement: VirtualElement = {
-    getBoundingClientRect: () => (
-      Tooltip.currentHoveredElement?.getBoundingClientRect()
-        ?? NULL_RECT
-    ),
+    getBoundingClientRect: () =>
+      Tooltip.currentHoveredElement?.getBoundingClientRect() ?? NULL_RECT,
   };
 
   getDOMNode() {
@@ -62,23 +61,23 @@ export class Tooltip extends Component<TooltipProps, TooltipState> {
       return;
     }
 
-    domNode.addEventListener("mouseenter", () => {
+    domNode.addEventListener('mouseenter', () => {
       let renderedTooltip = Tooltip.renderedTooltip;
       if (renderedTooltip === undefined) {
-        renderedTooltip = document.createElement("div");
-        renderedTooltip.className = "Tooltip";
+        renderedTooltip = document.createElement('div');
+        renderedTooltip.className = 'Tooltip';
         document.body.appendChild(renderedTooltip);
         Tooltip.renderedTooltip = renderedTooltip;
       }
 
       Tooltip.currentHoveredElement = domNode;
 
-      renderedTooltip.style.opacity = "1";
+      renderedTooltip.style.opacity = '1';
 
       this.renderPopperContent();
     });
 
-    domNode.addEventListener("mouseleave", () => {
+    domNode.addEventListener('mouseleave', () => {
       this.fadeOut();
     });
   }
@@ -89,7 +88,7 @@ export class Tooltip extends Component<TooltipProps, TooltipState> {
     }
 
     Tooltip.currentHoveredElement = undefined;
-    Tooltip.renderedTooltip!.style.opacity = "0";
+    Tooltip.renderedTooltip!.style.opacity = '0';
   }
 
   renderPopperContent() {
@@ -109,15 +108,15 @@ export class Tooltip extends Component<TooltipProps, TooltipState> {
             renderedTooltip!,
             {
               ...DEFAULT_OPTIONS,
-              placement: this.props.position || "auto",
-            }
+              placement: this.props.position || 'auto',
+            },
           );
 
           Tooltip.singletonPopper = singletonPopper;
         } else {
           singletonPopper.setOptions({
             ...DEFAULT_OPTIONS,
-            placement: this.props.position || "auto",
+            placement: this.props.position || 'auto',
           });
 
           singletonPopper.update();
diff --git a/tgui/packages/tgui/components/TrackOutsideClicks.tsx b/tgui/packages/tgui/components/TrackOutsideClicks.tsx
index fc52eba7e6c1..7b3914ecb271 100644
--- a/tgui/packages/tgui/components/TrackOutsideClicks.tsx
+++ b/tgui/packages/tgui/components/TrackOutsideClicks.tsx
@@ -1,7 +1,7 @@
-import { Component, createRef } from "inferno";
+import { Component, createRef } from 'inferno';
 
 export class TrackOutsideClicks extends Component<{
-  onOutsideClick: () => void,
+  onOutsideClick: () => void;
 }> {
   ref = createRef<HTMLDivElement>();
 
@@ -10,11 +10,11 @@ export class TrackOutsideClicks extends Component<{
 
     this.handleOutsideClick = this.handleOutsideClick.bind(this);
 
-    document.addEventListener("click", this.handleOutsideClick);
+    document.addEventListener('click', this.handleOutsideClick);
   }
 
   componentWillUnmount() {
-    document.removeEventListener("click", this.handleOutsideClick);
+    document.removeEventListener('click', this.handleOutsideClick);
   }
 
   handleOutsideClick(event: MouseEvent) {
@@ -28,11 +28,6 @@ export class TrackOutsideClicks extends Component<{
   }
 
   render() {
-    return (
-      <div ref={this.ref}>
-        {this.props.children}
-      </div>
-    );
+    return <div ref={this.ref}>{this.props.children}</div>;
   }
 }
-
diff --git a/tgui/packages/tgui/constants.js b/tgui/packages/tgui/constants.js
index e930f43488c2..eea49bd59a5b 100644
--- a/tgui/packages/tgui/constants.js
+++ b/tgui/packages/tgui/constants.js
@@ -32,8 +32,8 @@ export const COLORS = {
   },
   // reagent / chemistry related colours
   reagent: {
-    acidicbuffer: "#fbc314",
-    basicbuffer: "#3853a4",
+    acidicbuffer: '#fbc314',
+    basicbuffer: '#3853a4',
   },
 };
 
@@ -140,229 +140,231 @@ export const RADIO_CHANNELS = [
 
 const GASES = [
   {
-    'id': 'oxygen',
-    'name': 'Oxygen',
-    'label': 'O₂',
-    'color': 'blue',
+    id: 'oxygen',
+    name: 'Oxygen',
+    label: 'O₂',
+    color: 'blue',
   },
   {
-    'id': 'nitrogen',
-    'name': 'Nitrogen',
-    'label': 'N₂',
-    'color': 'red',
+    id: 'nitrogen',
+    name: 'Nitrogen',
+    label: 'N₂',
+    color: 'red',
   },
   {
-    'id': 'carbon_dioxide',
-    'name': 'Carbon Dioxide',
-    'label': 'CO₂',
-    'color': 'grey',
+    id: 'carbon_dioxide',
+    name: 'Carbon Dioxide',
+    label: 'CO₂',
+    color: 'grey',
   },
   {
-    'id': 'plasma',
-    'name': 'Plasma',
-    'label': 'Plasma',
-    'color': 'pink',
+    id: 'plasma',
+    name: 'Plasma',
+    label: 'Plasma',
+    color: 'pink',
   },
   {
-    'id': 'water',
-    'name': 'Water Vapor',
-    'label': 'H₂O',
-    'color': 'lightsteelblue',
+    id: 'water',
+    name: 'Water Vapor',
+    label: 'H₂O',
+    color: 'lightsteelblue',
   },
   {
-    'id': 'nob',
-    'name': 'Hyper-noblium',
-    'label': 'Hyper-nob',
-    'color': 'teal',
+    id: 'nob',
+    name: 'Hyper-noblium',
+    label: 'Hyper-nob',
+    color: 'teal',
   },
   {
-    'id': 'sleeping_agent',
-    'name': 'Nitrous Oxide',
-    'label': 'N₂O',
-    'color': 'bisque',
+    id: 'sleeping_agent',
+    name: 'Nitrous Oxide',
+    label: 'N₂O',
+    color: 'bisque',
   },
   {
-    'id': 'nitrodioxide',
-    'name': 'Nitrogen Dioxide',
-    'label': 'NO₂',
-    'color': 'brown',
+    id: 'nitrodioxide',
+    name: 'Nitrogen Dioxide',
+    label: 'NO₂',
+    color: 'brown',
   },
   {
-    'id': 'bz',
-    'name': 'BZ',
-    'label': 'BZ',
-    'color': 'mediumpurple',
+    id: 'bz',
+    name: 'BZ',
+    label: 'BZ',
+    color: 'mediumpurple',
   },
   {
-    'id': 'pluox',
-    'name': 'Pluoxium',
-    'label': 'O₁₆',
-    'color': 'mediumslateblue',
+    id: 'pluox',
+    name: 'Pluoxium',
+    label: 'O₁₆',
+    color: 'mediumslateblue',
   },
   {
-    'id': 'miasma',
-    'name': 'Miasma',
-    'label': 'Miasma',
-    'color': 'olive',
+    id: 'miasma',
+    name: 'Miasma',
+    label: 'Miasma',
+    color: 'olive',
   },
   {
-    'id': 'Freon',
-    'name': 'Freon',
-    'label': 'Freon',
-    'color': 'paleturquoise',
+    id: 'Freon',
+    name: 'Freon',
+    label: 'Freon',
+    color: 'paleturquoise',
   },
   {
-    'id': 'hydrogen',
-    'name': 'Hydrogen',
-    'label': 'H₂',
-    'color': 'white',
+    id: 'hydrogen',
+    name: 'Hydrogen',
+    label: 'H₂',
+    color: 'white',
   },
   {
-    'id': 'healium',
-    'name': 'Healium',
-    'label': 'Healium',
-    'color': 'salmon',
+    id: 'healium',
+    name: 'Healium',
+    label: 'Healium',
+    color: 'salmon',
   },
   {
-    'id': 'proto_nitrate',
-    'name': 'Proto Nitrate',
-    'label': 'Proto-Nitrate',
-    'color': 'greenyellow',
+    id: 'proto_nitrate',
+    name: 'Proto Nitrate',
+    label: 'Proto-Nitrate',
+    color: 'greenyellow',
   },
   {
-    'id': 'zauker',
-    'name': 'Zauker',
-    'label': 'Zauker',
-    'color': 'darkgreen',
+    id: 'zauker',
+    name: 'Zauker',
+    label: 'Zauker',
+    color: 'darkgreen',
   },
   {
-    'id': 'halon',
-    'name': 'Halon',
-    'label': 'Halon',
-    'color': 'purple',
+    id: 'halon',
+    name: 'Halon',
+    label: 'Halon',
+    color: 'purple',
   },
   {
-    'id': 'helium',
-    'name': 'Helium',
-    'label': 'He',
-    'color': 'aliceblue',
+    id: 'helium',
+    name: 'Helium',
+    label: 'He',
+    color: 'aliceblue',
   },
   {
-    'id': 'antinoblium',
-    'name': 'Antinoblium',
-    'label': 'Anti-Noblium',
-    'color': 'maroon',
+    id: 'antinoblium',
+    name: 'Antinoblium',
+    label: 'Anti-Noblium',
+    color: 'maroon',
   },
   {
-    'id': 'carbon_monoxide',
-    'name': 'Carbon Monoxide',
-    'label': 'CO',
-    'color': 'maroon',
+    id: 'carbon_monoxide',
+    name: 'Carbon Monoxide',
+    label: 'CO',
+    color: 'maroon',
   },
   {
-    'id': 'methyl_bromide',
-    'name': 'Methyl Bromide',
-    'label': 'CH₃Br',
-    'color': 'maroon',
+    id: 'methyl_bromide',
+    name: 'Methyl Bromide',
+    label: 'CH₃Br',
+    color: 'maroon',
   },
   {
-    'id': 'methane',
-    'name': 'Methane',
-    'label': 'CH₄',
-    'color': 'maroon',
+    id: 'methane',
+    name: 'Methane',
+    label: 'CH₄',
+    color: 'maroon',
   },
   {
-    'id': 'methane',
-    'name': 'Methane',
-    'label': 'CH₄',
-    'color': 'maroon',
+    id: 'methane',
+    name: 'Methane',
+    label: 'CH₄',
+    color: 'maroon',
   },
   {
-    'id': 'argon',
-    'name': 'Argon',
-    'label': 'Ar',
-    'color': 'maroon',
+    id: 'argon',
+    name: 'Argon',
+    label: 'Ar',
+    color: 'maroon',
   },
   {
-    'id': 'krypton',
-    'name': 'Krypton',
-    'label': 'Kr',
-    'color': 'maroon',
+    id: 'krypton',
+    name: 'Krypton',
+    label: 'Kr',
+    color: 'maroon',
   },
   {
-    'id': 'xenon',
-    'name': 'Xenon',
-    'label': 'Xe',
-    'color': 'maroon',
+    id: 'xenon',
+    name: 'Xenon',
+    label: 'Xe',
+    color: 'maroon',
   },
   {
-    'id': 'neon',
-    'name': 'Neon',
-    'label': 'Ne',
-    'color': 'maroon',
+    id: 'neon',
+    name: 'Neon',
+    label: 'Ne',
+    color: 'maroon',
   },
   {
-    'id': 'ammonia',
-    'name': 'Ammonia',
-    'label': 'NH₃',
-    'color': 'maroon',
+    id: 'ammonia',
+    name: 'Ammonia',
+    label: 'NH₃',
+    color: 'maroon',
   },
   {
-    'id': 'chlorine',
-    'name': 'Chlorine',
-    'label': 'Cl',
-    'color': 'maroon',
+    id: 'chlorine',
+    name: 'Chlorine',
+    label: 'Cl',
+    color: 'maroon',
   },
   {
-    'id': 'sulfurdioxide',
-    'name': 'Chlorine',
-    'label': 'SO₂',
-    'color': 'maroon',
+    id: 'sulfurdioxide',
+    name: 'Chlorine',
+    label: 'SO₂',
+    color: 'maroon',
   },
   {
-    'id': 'nitricoxide',
-    'name': 'Nitric Oxide',
-    'label': 'NO',
-    'color': 'maroon',
+    id: 'nitricoxide',
+    name: 'Nitric Oxide',
+    label: 'NO',
+    color: 'maroon',
   },
   {
-    'id': 'deuterium',
-    'name': 'Deuterium',
-    'label': '²H',
-    'color': 'lightgrey',
+    id: 'deuterium',
+    name: 'Deuterium',
+    label: '²H',
+    color: 'lightgrey',
   },
   {
-    'id': 'tritium',
-    'name': 'Tritium',
-    'label': '³H',
-    'color': 'limegreen',
+    id: 'tritium',
+    name: 'Tritium',
+    label: '³H',
+    color: 'limegreen',
   },
   {
-    'id': 'boron',
-    'name': 'Boron',
-    'label': 'B',
-    'color': 'limegreen',
+    id: 'boron',
+    name: 'Boron',
+    label: 'B',
+    color: 'limegreen',
   },
   {
-    'id': 'radon',
-    'name': 'Radon',
-    'label': 'Rn',
-    'color': 'grey',
+    id: 'radon',
+    name: 'Radon',
+    label: 'Rn',
+    color: 'grey',
   },
 ];
 
 export const getGasLabel = (gasId, fallbackValue) => {
   const gasSearchString = String(gasId).toLowerCase();
-  const gas = GASES.find(gas => gas.id === gasSearchString
-    || gas.name.toLowerCase() === gasSearchString);
-  return gas && gas.label
-    || fallbackValue
-    || gasId;
+  const gas = GASES.find(
+    (gas) =>
+      gas.id === gasSearchString || gas.name.toLowerCase() === gasSearchString,
+  );
+  return (gas && gas.label) || fallbackValue || gasId;
 };
 
-export const getGasColor = gasId => {
+export const getGasColor = (gasId) => {
   const gasSearchString = String(gasId).toLowerCase();
-  const gas = GASES.find(gas => gas.id === gasSearchString
-    || gas.name.toLowerCase() === gasSearchString);
+  const gas = GASES.find(
+    (gas) =>
+      gas.id === gasSearchString || gas.name.toLowerCase() === gasSearchString,
+  );
   return gas && gas.color;
 };
diff --git a/tgui/packages/tgui/debug/KitchenSink.js b/tgui/packages/tgui/debug/KitchenSink.js
index 44764e8e8942..bede561946dd 100644
--- a/tgui/packages/tgui/debug/KitchenSink.js
+++ b/tgui/packages/tgui/debug/KitchenSink.js
@@ -18,7 +18,7 @@ const r = require.context('../stories', false, /\.stories\.js$/);
  *   },
  * }[]}
  */
-const getStories = () => r.keys().map(path => r(path));
+const getStories = () => r.keys().map((path) => r(path));
 
 export const KitchenSink = (props, context) => {
   const { panel } = props;
@@ -28,11 +28,7 @@ export const KitchenSink = (props, context) => {
   const story = stories[pageIndex];
   const Layout = panel ? Pane : Window;
   return (
-    <Layout
-      title="Kitchen Sink"
-      width={600}
-      height={500}
-      theme={theme}>
+    <Layout title="Kitchen Sink" width={600} height={500} theme={theme}>
       <Flex height="100%">
         <Flex.Item m={1} mr={0}>
           <Section fill fitted>
@@ -42,19 +38,16 @@ export const KitchenSink = (props, context) => {
                   key={i}
                   color="transparent"
                   selected={i === pageIndex}
-                  onClick={() => setPageIndex(i)}>
+                  onClick={() => setPageIndex(i)}
+                >
                   {story.meta.title}
                 </Tabs.Tab>
               ))}
             </Tabs>
           </Section>
         </Flex.Item>
-        <Flex.Item
-          position="relative"
-          grow={1}>
-          <Layout.Content scrollable>
-            {story.meta.render()}
-          </Layout.Content>
+        <Flex.Item position="relative" grow={1}>
+          <Layout.Content scrollable>{story.meta.render()}</Layout.Content>
         </Flex.Item>
       </Flex>
     </Layout>
diff --git a/tgui/packages/tgui/debug/hooks.js b/tgui/packages/tgui/debug/hooks.js
index 0b1a3f105e35..d324dd68d88f 100644
--- a/tgui/packages/tgui/debug/hooks.js
+++ b/tgui/packages/tgui/debug/hooks.js
@@ -7,4 +7,4 @@
 import { useSelector } from 'common/redux';
 import { selectDebug } from './selectors';
 
-export const useDebug = context => useSelector(context, selectDebug);
+export const useDebug = (context) => useSelector(context, selectDebug);
diff --git a/tgui/packages/tgui/debug/middleware.js b/tgui/packages/tgui/debug/middleware.js
index 92e64fe3bd12..28df806dd4d0 100644
--- a/tgui/packages/tgui/debug/middleware.js
+++ b/tgui/packages/tgui/debug/middleware.js
@@ -7,17 +7,18 @@
 import { KEY_BACKSPACE, KEY_F10, KEY_F11, KEY_F12 } from 'common/keycodes';
 import { globalEvents } from '../events';
 import { acquireHotKey } from '../hotkeys';
-import { openExternalBrowser, toggleDebugLayout, toggleKitchenSink } from './actions';
+import {
+  openExternalBrowser,
+  toggleDebugLayout,
+  toggleKitchenSink,
+} from './actions';
 
-const relayedTypes = [
-  'backend/update',
-  'chat/message',
-];
+const relayedTypes = ['backend/update', 'chat/message'];
 
-export const debugMiddleware = store => {
+export const debugMiddleware = (store) => {
   acquireHotKey(KEY_F11);
   acquireHotKey(KEY_F12);
-  globalEvents.on('keydown', key => {
+  globalEvents.on('keydown', (key) => {
     if (key.code === KEY_F11) {
       store.dispatch(toggleDebugLayout());
     }
@@ -29,20 +30,21 @@ export const debugMiddleware = store => {
       // stack in order for this to be a fatal error.
       setTimeout(() => {
         throw new Error(
-          'OOPSIE WOOPSIE!! UwU We made a fucky wucky!! A wittle'
-          + ' fucko boingo! The code monkeys at our headquarters are'
-          + ' working VEWY HAWD to fix this!');
+          'OOPSIE WOOPSIE!! UwU We made a fucky wucky!! A wittle' +
+            ' fucko boingo! The code monkeys at our headquarters are' +
+            ' working VEWY HAWD to fix this!',
+        );
       });
     }
   });
-  return next => action => next(action);
+  return (next) => (action) => next(action);
 };
 
-export const relayMiddleware = store => {
+export const relayMiddleware = (store) => {
   const devServer = require('tgui-dev-server/link/client.cjs');
   const externalBrowser = location.search === '?external';
   if (externalBrowser) {
-    devServer.subscribe(msg => {
+    devServer.subscribe((msg) => {
       const { type, payload } = msg;
       if (type === 'relay' && payload.windowId === Byond.windowId) {
         store.dispatch({
@@ -51,16 +53,15 @@ export const relayMiddleware = store => {
         });
       }
     });
-  }
-  else {
+  } else {
     acquireHotKey(KEY_F10);
-    globalEvents.on('keydown', key => {
+    globalEvents.on('keydown', (key) => {
       if (key === KEY_F10) {
         store.dispatch(openExternalBrowser());
       }
     });
   }
-  return next => action => {
+  return (next) => (action) => {
     const { type, payload, relayed } = action;
     if (type === openExternalBrowser.type) {
       window.open(location.href + '?external', '_blank');
diff --git a/tgui/packages/tgui/debug/selectors.js b/tgui/packages/tgui/debug/selectors.js
index 7271014ea738..29b96defc484 100644
--- a/tgui/packages/tgui/debug/selectors.js
+++ b/tgui/packages/tgui/debug/selectors.js
@@ -4,4 +4,4 @@
  * @license MIT
  */
 
-export const selectDebug = state => state.debug;
+export const selectDebug = (state) => state.debug;
diff --git a/tgui/packages/tgui/drag.js b/tgui/packages/tgui/drag.js
index 671ed6eaa8b6..ec9bb44855e0 100644
--- a/tgui/packages/tgui/drag.js
+++ b/tgui/packages/tgui/drag.js
@@ -21,7 +21,7 @@ let resizeMatrix;
 let initialSize;
 let size;
 
-export const setWindowKey = key => {
+export const setWindowKey = (key) => {
   windowKey = key;
 };
 
@@ -35,23 +35,20 @@ const getWindowSize = () => [
   window.innerHeight * pixelRatio,
 ];
 
-const setWindowPosition = vec => {
+const setWindowPosition = (vec) => {
   const byondPos = vecAdd(vec, screenOffset);
   return Byond.winset(Byond.windowId, {
     pos: byondPos[0] + ',' + byondPos[1],
   });
 };
 
-const setWindowSize = vec => {
+const setWindowSize = (vec) => {
   return Byond.winset(Byond.windowId, {
     size: vec[0] + 'x' + vec[1],
   });
 };
 
-const getScreenPosition = () => [
-  0 - screenOffset[0],
-  0 - screenOffset[1],
-];
+const getScreenPosition = () => [0 - screenOffset[0], 0 - screenOffset[1]];
 
 const getScreenSize = () => [
   window.screen.availWidth * pixelRatio,
@@ -76,8 +73,7 @@ const touchRecents = (recents, touchedItem, limit = 50) => {
     }
     if (nextRecents.length < limit) {
       nextRecents.push(item);
-    }
-    else {
+    } else {
       trimmedItem = item;
     }
   }
@@ -93,8 +89,9 @@ const storeWindowGeometry = async () => {
   storage.set(windowKey, geometry);
   // Update the list of stored geometries
   const [geometries, trimmedKey] = touchRecents(
-    await storage.get('geometries') || [],
-    windowKey);
+    (await storage.get('geometries')) || [],
+    windowKey,
+  );
   if (trimmedKey) {
     storage.remove(trimmedKey);
   }
@@ -103,7 +100,7 @@ const storeWindowGeometry = async () => {
 
 export const recallWindowGeometry = async (options = {}) => {
   // Only recall geometry in fancy mode
-  const geometry = options.fancy && await storage.get(windowKey);
+  const geometry = options.fancy && (await storage.get(windowKey));
   if (geometry) {
     logger.log('recalled geometry:', geometry);
   }
@@ -112,10 +109,7 @@ export const recallWindowGeometry = async (options = {}) => {
   let size = options.size;
   // Convert size from css-pixels to display-pixels
   if (size) {
-    size = [
-      size[0] * pixelRatio,
-      size[1] * pixelRatio,
-    ];
+    size = [size[0] * pixelRatio, size[1] * pixelRatio];
   }
   // Wait until screen offset gets resolved
   await screenOffsetPromise;
@@ -142,7 +136,8 @@ export const recallWindowGeometry = async (options = {}) => {
     pos = vecAdd(
       vecScale(areaAvailable, 0.5),
       vecScale(size, -0.5),
-      vecScale(screenOffset, -1.0));
+      vecScale(screenOffset, -1.0),
+    );
     setWindowPosition(pos);
   }
 };
@@ -151,11 +146,10 @@ export const setupDrag = async () => {
   // Calculate screen offset caused by the windows taskbar
   let windowPosition = getWindowPosition();
 
-  screenOffsetPromise = Byond.winget(Byond.windowId, 'pos')
-    .then(pos => [
-      pos.x - windowPosition[0],
-      pos.y - windowPosition[1],
-    ]);
+  screenOffsetPromise = Byond.winget(Byond.windowId, 'pos').then((pos) => [
+    pos.x - windowPosition[0],
+    pos.y - windowPosition[1],
+  ]);
   screenOffset = await screenOffsetPromise;
   logger.debug('screen offset', screenOffset);
 };
@@ -175,8 +169,7 @@ const constraintPosition = (pos, size) => {
     if (pos[i] < leftBoundary) {
       nextPos[i] = leftBoundary;
       relocated = true;
-    }
-    else if (pos[i] + size[i] > rightBoundary) {
+    } else if (pos[i] + size[i] > rightBoundary) {
       nextPos[i] = rightBoundary - size[i];
       relocated = true;
     }
@@ -184,13 +177,14 @@ const constraintPosition = (pos, size) => {
   return [relocated, nextPos];
 };
 
-export const dragStartHandler = event => {
+export const dragStartHandler = (event) => {
   logger.log('drag start');
   dragging = true;
   let windowPosition = getWindowPosition();
   dragPointOffset = vecSubtract(
     [event.screenX, event.screenY],
-    getWindowPosition());
+    getWindowPosition(),
+  );
   // Focus click target
   event.target?.focus();
   document.addEventListener('mousemove', dragMoveHandler);
@@ -198,7 +192,7 @@ export const dragStartHandler = event => {
   dragMoveHandler(event);
 };
 
-const dragEndHandler = event => {
+const dragEndHandler = (event) => {
   logger.log('drag end');
   dragMoveHandler(event);
   document.removeEventListener('mousemove', dragMoveHandler);
@@ -207,23 +201,24 @@ const dragEndHandler = event => {
   storeWindowGeometry();
 };
 
-const dragMoveHandler = event => {
+const dragMoveHandler = (event) => {
   if (!dragging) {
     return;
   }
   event.preventDefault();
-  setWindowPosition(vecSubtract(
-    [event.screenX, event.screenY],
-    dragPointOffset));
+  setWindowPosition(
+    vecSubtract([event.screenX, event.screenY], dragPointOffset),
+  );
 };
 
-export const resizeStartHandler = (x, y) => event => {
+export const resizeStartHandler = (x, y) => (event) => {
   resizeMatrix = [x, y];
   logger.log('resize start', resizeMatrix);
   resizing = true;
   dragPointOffset = vecSubtract(
     [event.screenX, event.screenY],
-    getWindowPosition());
+    getWindowPosition(),
+  );
   initialSize = getWindowSize();
   // Focus click target
   event.target?.focus();
@@ -232,7 +227,7 @@ export const resizeStartHandler = (x, y) => event => {
   resizeMoveHandler(event);
 };
 
-const resizeEndHandler = event => {
+const resizeEndHandler = (event) => {
   logger.log('resize end', size);
   resizeMoveHandler(event);
   document.removeEventListener('mousemove', resizeMoveHandler);
@@ -241,22 +236,18 @@ const resizeEndHandler = event => {
   storeWindowGeometry();
 };
 
-const resizeMoveHandler = event => {
+const resizeMoveHandler = (event) => {
   if (!resizing) {
     return;
   }
   event.preventDefault();
   const currentOffset = vecSubtract(
     [event.screenX, event.screenY],
-    getWindowPosition());
-  const delta = vecSubtract(
-    currentOffset,
-    dragPointOffset);
+    getWindowPosition(),
+  );
+  const delta = vecSubtract(currentOffset, dragPointOffset);
   // Extra 1x1 area is added to ensure the browser can see the cursor
-  size = vecAdd(
-    initialSize,
-    vecMultiply(resizeMatrix, delta),
-    [1, 1]);
+  size = vecAdd(initialSize, vecMultiply(resizeMatrix, delta), [1, 1]);
   // Sane window size values
   size[0] = Math.max(size[0], 150 * pixelRatio);
   size[1] = Math.max(size[1], 50 * pixelRatio);
diff --git a/tgui/packages/tgui/events.js b/tgui/packages/tgui/events.js
index e9c5dd136a8a..f76e38a9cf34 100644
--- a/tgui/packages/tgui/events.js
+++ b/tgui/packages/tgui/events.js
@@ -16,7 +16,6 @@ export const setupGlobalEvents = (options = {}) => {
   ignoreWindowFocus = !!options.ignoreWindowFocus;
 };
 
-
 // Window focus
 // --------------------------------------------------------
 
@@ -44,18 +43,17 @@ const setWindowFocus = (value, delayed) => {
   }
 };
 
-
 // Focus stealing
 // --------------------------------------------------------
 
 let focusStolenBy = null;
 
-export const canStealFocus = node => {
+export const canStealFocus = (node) => {
   const tag = String(node.tagName).toLowerCase();
   return tag === 'input' || tag === 'textarea';
 };
 
-const stealFocus = node => {
+const stealFocus = (node) => {
   releaseStolenFocus();
   focusStolenBy = node;
   focusStolenBy.addEventListener('blur', releaseStolenFocus);
@@ -68,7 +66,6 @@ const releaseStolenFocus = () => {
   }
 };
 
-
 // Focus follows the mouse
 // --------------------------------------------------------
 
@@ -76,18 +73,18 @@ let focusedNode = null;
 let lastVisitedNode = null;
 const trackedNodes = [];
 
-export const addScrollableNode = node => {
+export const addScrollableNode = (node) => {
   trackedNodes.push(node);
 };
 
-export const removeScrollableNode = node => {
+export const removeScrollableNode = (node) => {
   const index = trackedNodes.indexOf(node);
   if (index >= 0) {
     trackedNodes.splice(index, 1);
   }
 };
 
-const focusNearestTrackedParent = node => {
+const focusNearestTrackedParent = (node) => {
   if (focusStolenBy || !windowFocused) {
     return;
   }
@@ -106,7 +103,7 @@ const focusNearestTrackedParent = node => {
   }
 };
 
-window.addEventListener('mousemove', e => {
+window.addEventListener('mousemove', (e) => {
   const node = e.target;
   if (node !== lastVisitedNode) {
     lastVisitedNode = node;
@@ -114,11 +111,10 @@ window.addEventListener('mousemove', e => {
   }
 });
 
-
 // Focus event hooks
 // --------------------------------------------------------
 
-window.addEventListener('focusin', e => {
+window.addEventListener('focusin', (e) => {
   lastVisitedNode = null;
   focusedNode = e.target;
   setWindowFocus(true);
@@ -128,21 +124,20 @@ window.addEventListener('focusin', e => {
   }
 });
 
-window.addEventListener('focusout', e => {
+window.addEventListener('focusout', (e) => {
   lastVisitedNode = null;
   setWindowFocus(false, true);
 });
 
-window.addEventListener('blur', e => {
+window.addEventListener('blur', (e) => {
   lastVisitedNode = null;
   setWindowFocus(false, true);
 });
 
-window.addEventListener('beforeunload', e => {
+window.addEventListener('beforeunload', (e) => {
   setWindowFocus(false);
 });
 
-
 // Key events
 // --------------------------------------------------------
 
@@ -164,9 +159,9 @@ export class KeyEvent {
   }
 
   isModifierKey() {
-    return this.code === KEY_CTRL
-      || this.code === KEY_SHIFT
-      || this.code === KEY_ALT;
+    return (
+      this.code === KEY_CTRL || this.code === KEY_SHIFT || this.code === KEY_ALT
+    );
   }
 
   isDown() {
@@ -193,11 +188,9 @@ export class KeyEvent {
     }
     if (this.code >= 48 && this.code <= 90) {
       this._str += String.fromCharCode(this.code);
-    }
-    else if (this.code >= KEY_F1 && this.code <= KEY_F12) {
+    } else if (this.code >= KEY_F1 && this.code <= KEY_F12) {
       this._str += 'F' + (this.code - 111);
-    }
-    else {
+    } else {
       this._str += '[' + this.code + ']';
     }
     return this._str;
@@ -205,7 +198,7 @@ export class KeyEvent {
 }
 
 // IE8: Keydown event is only available on document.
-document.addEventListener('keydown', e => {
+document.addEventListener('keydown', (e) => {
   if (canStealFocus(e.target)) {
     return;
   }
@@ -216,7 +209,7 @@ document.addEventListener('keydown', e => {
   keyHeldByCode[code] = true;
 });
 
-document.addEventListener('keyup', e => {
+document.addEventListener('keyup', (e) => {
   if (canStealFocus(e.target)) {
     return;
   }
diff --git a/tgui/packages/tgui/format.js b/tgui/packages/tgui/format.js
index cfefa19cfdbb..c2efd3780609 100644
--- a/tgui/packages/tgui/format.js
+++ b/tgui/packages/tgui/format.js
@@ -34,7 +34,6 @@ const SI_SYMBOLS = [
 
 const SI_BASE_INDEX = SI_SYMBOLS.indexOf(' ');
 
-
 /**
  * Formats a number to a human readable form, by reducing it to SI units.
  * TODO: This is quite a shit code and shit math, needs optimization.
@@ -42,7 +41,7 @@ const SI_BASE_INDEX = SI_SYMBOLS.indexOf(' ');
 export const formatSiUnit = (
   value,
   minBase1000 = -SI_BASE_INDEX,
-  unit = ''
+  unit = '',
 ) => {
   if (typeof value !== 'number' || !Number.isFinite(value)) {
     return value;
@@ -51,21 +50,15 @@ export const formatSiUnit = (
   const base10 = Math.floor(Math.max(minBase1000 * 3, realBase10));
   const realBase1000 = Math.floor(realBase10 / 3);
   const base1000 = Math.floor(base10 / 3);
-  const symbolIndex = clamp(
-    SI_BASE_INDEX + base1000,
-    0,
-    SI_SYMBOLS.length);
+  const symbolIndex = clamp(SI_BASE_INDEX + base1000, 0, SI_SYMBOLS.length);
   const symbol = SI_SYMBOLS[symbolIndex];
   const scaledNumber = value / Math.pow(1000, base1000);
-  const scaledPrecision = realBase1000 > minBase1000
-    ? (2 + base1000 * 3 - base10)
-    : 0;
+  const scaledPrecision =
+    realBase1000 > minBase1000 ? 2 + base1000 * 3 - base10 : 0;
   // TODO: Make numbers bigger than precision value show
   // up to 2 decimal numbers.
-  const finalString = (
-    toFixed(scaledNumber, scaledPrecision)
-    + ' ' + symbol + unit
-  );
+  const finalString =
+    toFixed(scaledNumber, scaledPrecision) + ' ' + symbol + unit;
   return finalString.trim();
 };
 
@@ -103,14 +96,13 @@ export const formatMoney = (value, precision = 0) => {
 /**
  * Formats a floating point number as a number on the decibel scale.
  */
-export const formatDb = value => {
-  const db = 20 * Math.log(value) / Math.log(10);
+export const formatDb = (value) => {
+  const db = (20 * Math.log(value)) / Math.log(10);
   const sign = db >= 0 ? '+' : '–';
   let formatted = Math.abs(db);
   if (formatted === Infinity) {
     formatted = 'Inf';
-  }
-  else {
+  } else {
     formatted = toFixed(formatted, 2);
   }
   return sign + formatted + ' dB';
@@ -135,7 +127,6 @@ const SI_BASE_TEN_UNIT = [
 
 const SI_BASE_TEN_INDEX = SI_BASE_TEN_UNIT.indexOf(' ');
 
-
 /**
  * Formats a number to a human readable form, by reducing it to SI units.
  * TODO: This is quite a shit code and shit math, needs optimization.
@@ -143,7 +134,7 @@ const SI_BASE_TEN_INDEX = SI_BASE_TEN_UNIT.indexOf(' ');
 export const formatSiBaseTenUnit = (
   value,
   minBase1000 = -SI_BASE_TEN_INDEX,
-  unit = ''
+  unit = '',
 ) => {
   if (typeof value !== 'number' || !Number.isFinite(value)) {
     return value;
@@ -155,18 +146,16 @@ export const formatSiBaseTenUnit = (
   const symbolIndex = clamp(
     SI_BASE_TEN_INDEX + base1000,
     0,
-    SI_BASE_TEN_UNIT.length);
+    SI_BASE_TEN_UNIT.length,
+  );
   const symbol = SI_BASE_TEN_UNIT[symbolIndex];
   const scaledNumber = value / Math.pow(1000, base1000);
-  const scaledPrecision = realBase1000 > minBase1000
-    ? (2 + base1000 * 3 - base10)
-    : 0;
+  const scaledPrecision =
+    realBase1000 > minBase1000 ? 2 + base1000 * 3 - base10 : 0;
   // TODO: Make numbers bigger than precision value show
   // up to 2 decimal numbers.
-  const finalString = (
-    toFixed(scaledNumber, scaledPrecision)
-    + ' ' + symbol + ' ' + unit
-  );
+  const finalString =
+    toFixed(scaledNumber, scaledPrecision) + ' ' + symbol + ' ' + unit;
   return finalString.trim();
 };
 
@@ -178,20 +167,20 @@ export const formatTime = (val, formatType) => {
   // THERE IS AS YET INSUFFICIENT DATA FOR A MEANINGFUL ANSWER
   // HH:MM:SS
   // 00:02:13
-  const seconds = toFixed(Math.floor((val/10) % 60));
-  const minutes = toFixed(Math.floor((val/(10*60)) % 60));
-  const hours = toFixed(Math.floor((val/(10*60*60)) % 24));
+  const seconds = toFixed(Math.floor((val / 10) % 60));
+  const minutes = toFixed(Math.floor((val / (10 * 60)) % 60));
+  const hours = toFixed(Math.floor((val / (10 * 60 * 60)) % 24));
   switch (formatType) {
-    case "short": {
-      const hours_truncated = hours > 0 ? `${hours}h` : "";
-      const minutes_truncated = minutes > 0 ? `${minutes}m` : "";
-      const seconds_truncated = seconds > 0 ? `${seconds}s` : "";
+    case 'short': {
+      const hours_truncated = hours > 0 ? `${hours}h` : '';
+      const minutes_truncated = minutes > 0 ? `${minutes}m` : '';
+      const seconds_truncated = seconds > 0 ? `${seconds}s` : '';
       return `${hours_truncated}${minutes_truncated}${seconds_truncated}`;
     }
     default: {
-      const seconds_padded = seconds.padStart(2, "0");
-      const minutes_padded = minutes.padStart(2, "0");
-      const hours_padded = hours.padStart(2, "0");
+      const seconds_padded = seconds.padStart(2, '0');
+      const minutes_padded = minutes.padStart(2, '0');
+      const hours_padded = hours.padStart(2, '0');
       return `${hours_padded}:${minutes_padded}:${seconds_padded}`;
     }
   }
diff --git a/tgui/packages/tgui/hotkeys.ts b/tgui/packages/tgui/hotkeys.ts
index 2330a8b20ae8..dd1f92864349 100644
--- a/tgui/packages/tgui/hotkeys.ts
+++ b/tgui/packages/tgui/hotkeys.ts
@@ -51,7 +51,7 @@ const keyCodeToByond = (keyCode: number) => {
   if (keyCode === 40) return 'South';
   if (keyCode === 45) return 'Insert';
   if (keyCode === 46) return 'Delete';
-  if (keyCode >= 48 && keyCode <= 57 || keyCode >= 65 && keyCode <= 90) {
+  if ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90)) {
     return String.fromCharCode(keyCode);
   }
   if (keyCode >= 96 && keyCode <= 105) {
@@ -81,9 +81,11 @@ const handlePassthrough = (key: KeyEvent) => {
     return;
   }
   // NOTE: Alt modifier is pretty bad and sticky in IE11.
-  if (key.event.defaultPrevented
-      || key.isModifierKey()
-      || hotKeysAcquired.includes(key.code)) {
+  if (
+    key.event.defaultPrevented ||
+    key.isModifierKey() ||
+    hotKeysAcquired.includes(key.code)
+  ) {
     return;
   }
   const byondKeyCode = keyCodeToByond(key.code);
@@ -166,9 +168,8 @@ export const setupHotKeys = () => {
     }
     // Insert macros
     const escapedQuotRegex = /\\"/g;
-    const unescape = (str: string) => str
-      .substring(1, str.length - 1)
-      .replace(escapedQuotRegex, '"');
+    const unescape = (str: string) =>
+      str.substring(1, str.length - 1).replace(escapedQuotRegex, '"');
     for (let ref of Object.keys(groupedByRef)) {
       const macro = groupedByRef[ref];
       const byondKeyName = unescape(macro.name);
@@ -202,7 +203,7 @@ export const setupHotKeys = () => {
  */
 export const listenForKeyEvents = (
   callback: (key: KeyEvent) => void,
-): () => void => {
+): (() => void) => {
   keyListeners.push(callback);
 
   let removed = false;
diff --git a/tgui/packages/tgui/http.ts b/tgui/packages/tgui/http.ts
index 96a2d9b56df5..b9dfe9c60cf4 100644
--- a/tgui/packages/tgui/http.ts
+++ b/tgui/packages/tgui/http.ts
@@ -1,17 +1,16 @@
 /**
  * An equivalent to `fetch`, except will automatically retry.
  */
-export const fetchRetry
-  = (
-    url: string,
-    options?: RequestInit,
-    retryTimer: number = 1000,
-  ): Promise<Response> => {
-    return fetch(url, options).catch(() => {
-      return new Promise(resolve => {
-        setTimeout(() => {
-          fetchRetry(url, options, retryTimer).then(resolve);
-        }, retryTimer);
-      });
+export const fetchRetry = (
+  url: string,
+  options?: RequestInit,
+  retryTimer: number = 1000,
+): Promise<Response> => {
+  return fetch(url, options).catch(() => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        fetchRetry(url, options, retryTimer).then(resolve);
+      }, retryTimer);
     });
-  };
+  });
+};
diff --git a/tgui/packages/tgui/index.js b/tgui/packages/tgui/index.js
index 7abba013743f..e0e14417ce32 100644
--- a/tgui/packages/tgui/index.js
+++ b/tgui/packages/tgui/index.js
@@ -66,14 +66,12 @@ const setupApp = () => {
   // Enable hot module reloading
   if (module.hot) {
     setupHotReloading();
-    module.hot.accept([
-      './components',
-      './debug',
-      './layouts',
-      './routes',
-    ], () => {
-      renderApp();
-    });
+    module.hot.accept(
+      ['./components', './debug', './layouts', './routes'],
+      () => {
+        renderApp();
+      },
+    );
   }
 };
 
diff --git a/tgui/packages/tgui/interfaces/AbductorConsole.js b/tgui/packages/tgui/interfaces/AbductorConsole.js
index 921c73beed21..3344dfccfe45 100644
--- a/tgui/packages/tgui/interfaces/AbductorConsole.js
+++ b/tgui/packages/tgui/interfaces/AbductorConsole.js
@@ -1,35 +1,32 @@
 import { useBackend, useSharedState } from '../backend';
 import { Button, LabeledList, NoticeBox, Section, Tabs } from '../components';
 import { Window } from '../layouts';
-import { GenericUplink } from "./Uplink/GenericUplink";
+import { GenericUplink } from './Uplink/GenericUplink';
 
 export const AbductorConsole = (props, context) => {
   const [tab, setTab] = useSharedState(context, 'tab', 1);
   return (
-    <Window
-      theme="abductor"
-      width={600}
-      height={532}>
+    <Window theme="abductor" width={600} height={532}>
       <Window.Content scrollable>
         <Tabs>
           <Tabs.Tab
             icon="list"
             lineHeight="23px"
             selected={tab === 1}
-            onClick={() => setTab(1)}>
+            onClick={() => setTab(1)}
+          >
             Abductsoft 3000
           </Tabs.Tab>
           <Tabs.Tab
             icon="list"
             lineHeight="23px"
             selected={tab === 2}
-            onClick={() => setTab(2)}>
+            onClick={() => setTab(2)}
+          >
             Mission Settings
           </Tabs.Tab>
         </Tabs>
-        {tab === 1 && (
-          <Abductsoft />
-        )}
+        {tab === 1 && <Abductsoft />}
         {tab === 2 && (
           <>
             <EmergencyTeleporter />
@@ -43,19 +40,10 @@ export const AbductorConsole = (props, context) => {
 
 const Abductsoft = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    experiment,
-    points,
-    credits,
-    categories,
-  } = data;
+  const { experiment, points, credits, categories } = data;
 
   if (!experiment) {
-    return (
-      <NoticeBox danger>
-        No Experiment Machine Detected
-      </NoticeBox>
-    );
+    return <NoticeBox danger>No Experiment Machine Detected</NoticeBox>;
   }
 
   const categoriesList = [];
@@ -89,7 +77,7 @@ const Abductsoft = (props, context) => {
         currency={`${credits} Credits`}
         categories={categoriesList}
         items={items}
-        handleBuy={(item) => act("buy", { name: item.name })}
+        handleBuy={(item) => act('buy', { name: item.name })}
       />
     </>
   );
@@ -97,36 +85,32 @@ const Abductsoft = (props, context) => {
 
 const EmergencyTeleporter = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    pad,
-    gizmo,
-  } = data;
+  const { pad, gizmo } = data;
 
   if (!pad) {
-    return (
-      <NoticeBox danger>
-        No Telepad Detected
-      </NoticeBox>
-    );
+    return <NoticeBox danger>No Telepad Detected</NoticeBox>;
   }
 
   return (
     <Section
       title="Emergency Teleport"
-      buttons={(
+      buttons={
         <Button
           icon="exclamation-circle"
           content="Activate"
           color="bad"
-          onClick={() => act('teleporter_send')} />
-      )}>
+          onClick={() => act('teleporter_send')}
+        />
+      }
+    >
       <LabeledList>
         <LabeledList.Item label="Mark Retrieval">
           <Button
-            icon={gizmo ? "user-plus" : "user-slash"}
-            content={gizmo ? "Retrieve" : "No Mark"}
+            icon={gizmo ? 'user-plus' : 'user-slash'}
+            content={gizmo ? 'Retrieve' : 'No Mark'}
             disabled={!gizmo}
-            onClick={() => act('teleporter_retrieve')} />
+            onClick={() => act('teleporter_retrieve')}
+          />
         </LabeledList.Item>
       </LabeledList>
     </Section>
@@ -135,41 +119,37 @@ const EmergencyTeleporter = (props, context) => {
 
 const VestSettings = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    vest,
-    vest_mode,
-    vest_lock,
-  } = data;
+  const { vest, vest_mode, vest_lock } = data;
 
   if (!vest) {
-    return (
-      <NoticeBox danger>
-        No Agent Vest Detected
-      </NoticeBox>
-    );
+    return <NoticeBox danger>No Agent Vest Detected</NoticeBox>;
   }
 
   return (
     <Section
       title="Agent Vest Settings"
-      buttons={(
+      buttons={
         <Button
           icon={vest_lock ? 'lock' : 'unlock'}
           content={vest_lock ? 'Locked' : 'Unlocked'}
-          onClick={() => act('toggle_vest')} />
-      )}>
+          onClick={() => act('toggle_vest')}
+        />
+      }
+    >
       <LabeledList>
         <LabeledList.Item label="Mode">
           <Button
             icon={vest_mode === 1 ? 'eye-slash' : 'fist-raised'}
-            content={vest_mode === 1 ? "Stealth" : "Combat"}
-            onClick={() => act('flip_vest')} />
+            content={vest_mode === 1 ? 'Stealth' : 'Combat'}
+            onClick={() => act('flip_vest')}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Disguise">
           <Button
             icon="user-secret"
             content="Select"
-            onClick={() => act('select_disguise')} />
+            onClick={() => act('select_disguise')}
+          />
         </LabeledList.Item>
       </LabeledList>
     </Section>
diff --git a/tgui/packages/tgui/interfaces/AccountingConsole.js b/tgui/packages/tgui/interfaces/AccountingConsole.js
index 41c2fa1c35b3..34e43af8d21f 100644
--- a/tgui/packages/tgui/interfaces/AccountingConsole.js
+++ b/tgui/packages/tgui/interfaces/AccountingConsole.js
@@ -1,53 +1,56 @@
-import { BlockQuote, Collapsible, LabeledList, Modal, Section, Tabs } from '../components';
+import {
+  BlockQuote,
+  Collapsible,
+  LabeledList,
+  Modal,
+  Section,
+  Tabs,
+} from '../components';
 import { useBackend } from '../backend';
 import { useLocalState } from '../backend';
 import { Window } from '../layouts';
 
 export const AccountingConsole = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    PlayerAccounts,
-    AuditLog,
-  } = data;
+  const { PlayerAccounts, AuditLog } = data;
   const USER_SCREEN = 1;
   const AUDIT_SCREEN = 2;
-  const [screenmode, setScreenmode] = useLocalState(context, 'tab_main', USER_SCREEN);
+  const [screenmode, setScreenmode] = useLocalState(
+    context,
+    'tab_main',
+    USER_SCREEN,
+  );
   return (
-    <Window
-      width={300}
-      height={360}>
+    <Window width={300} height={360}>
       <Window.Content scrollable>
         <MarketCrashing />
         <Tabs fluid textAlign="center">
           <Tabs.Tab
             selected={screenmode === USER_SCREEN}
-            onClick={() => setScreenmode(USER_SCREEN)}>
+            onClick={() => setScreenmode(USER_SCREEN)}
+          >
             Users
           </Tabs.Tab>
           <Tabs.Tab
             selected={screenmode === AUDIT_SCREEN}
-            onClick={() => setScreenmode(AUDIT_SCREEN)}>
+            onClick={() => setScreenmode(AUDIT_SCREEN)}
+          >
             Audit
           </Tabs.Tab>
         </Tabs>
         {screenmode === USER_SCREEN && (
           <Section title="Crew Account Summary">
-            {PlayerAccounts.map(account => (
-              <Collapsible fill
-                key={account.index}
-                title={account.name}>
+            {PlayerAccounts.map((account) => (
+              <Collapsible fill key={account.index} title={account.name}>
                 <LabeledList>
-                  <LabeledList.Item
-                    label="Occupation">
+                  <LabeledList.Item label="Occupation">
                     {account.job}
                   </LabeledList.Item>
-                  <LabeledList.Item
-                    label="Balance">
+                  <LabeledList.Item label="Balance">
                     {account.balance}
                   </LabeledList.Item>
-                  <LabeledList.Item
-                    label="Pay Modifier">
-                    {account.modifier*100}%
+                  <LabeledList.Item label="Pay Modifier">
+                    {account.modifier * 100}%
                   </LabeledList.Item>
                 </LabeledList>
               </Collapsible>
@@ -56,12 +59,10 @@ export const AccountingConsole = (props, context) => {
         )}
         {screenmode === AUDIT_SCREEN && (
           <Section>
-            {AuditLog.map(purchase => (
-              <BlockQuote
-                key={purchase.index}
-                p={1}>
-                <b>{purchase.account}</b> spent <b>{purchase.cost}</b>
-                {' '}cr at <i>{purchase.vendor}.</i>
+            {AuditLog.map((purchase) => (
+              <BlockQuote key={purchase.index} p={1}>
+                <b>{purchase.account}</b> spent <b>{purchase.cost}</b> cr at{' '}
+                <i>{purchase.vendor}.</i>
               </BlockQuote>
             ))}
           </Section>
@@ -75,19 +76,13 @@ export const AccountingConsole = (props, context) => {
 const MarketCrashing = (props, context) => {
   const { act, data } = useBackend(context);
   const [lockedmode, setLockedmode] = useLocalState(context, 'lockedmode', 1);
-  const {
-    Crashing,
-  } = data;
+  const { Crashing } = data;
   if (!Crashing) {
     return null;
   }
   return (
-    <Modal
-      textAlign="center"
-      mr={1.5}>
+    <Modal textAlign="center" mr={1.5}>
       <blink>OH GOD THE ECONOMY IS RUINED.</blink>
     </Modal>
   );
 };
-
-
diff --git a/tgui/packages/tgui/interfaces/Achievements.js b/tgui/packages/tgui/interfaces/Achievements.js
index 4f2ebff1db3a..934062ad4287 100644
--- a/tgui/packages/tgui/interfaces/Achievements.js
+++ b/tgui/packages/tgui/interfaces/Achievements.js
@@ -1,4 +1,3 @@
-
 import { useBackend, useLocalState } from '../backend';
 import { Box, Flex, Icon, Table, Tabs } from '../components';
 import { Window } from '../layouts';
@@ -6,36 +5,35 @@ import { Window } from '../layouts';
 export const Achievements = (props, context) => {
   const { data } = useBackend(context);
   const { categories } = data;
-  const [
-    selectedCategory,
-    setSelectedCategory,
-  ] = useLocalState(context, 'category', categories[0]);
-  const achievements = data.achievements
-    .filter(x => x.category === selectedCategory);
+  const [selectedCategory, setSelectedCategory] = useLocalState(
+    context,
+    'category',
+    categories[0],
+  );
+  const achievements = data.achievements.filter(
+    (x) => x.category === selectedCategory,
+  );
   return (
-    <Window
-      title="Achievements"
-      width={540}
-      height={680}>
+    <Window title="Achievements" width={540} height={680}>
       <Window.Content scrollable>
         <Tabs>
-          {categories.map(category => (
+          {categories.map((category) => (
             <Tabs.Tab
               key={category}
               selected={selectedCategory === category}
-              onClick={() => setSelectedCategory(category)}>
+              onClick={() => setSelectedCategory(category)}
+            >
               {category}
             </Tabs.Tab>
           ))}
           <Tabs.Tab
             selected={selectedCategory === 'High Scores'}
-            onClick={() => setSelectedCategory('High Scores')}>
+            onClick={() => setSelectedCategory('High Scores')}
+          >
             High Scores
           </Tabs.Tab>
         </Tabs>
-        {selectedCategory === 'High Scores' && (
-          <HighScoreTable />
-        ) || (
+        {(selectedCategory === 'High Scores' && <HighScoreTable />) || (
           <AchievementTable achievements={achievements} />
         )}
       </Window.Content>
@@ -47,24 +45,16 @@ const AchievementTable = (props, context) => {
   const { achievements } = props;
   return (
     <Table>
-      {achievements.map(achievement => (
-        <Achievement
-          key={achievement.name}
-          achievement={achievement} />
+      {achievements.map((achievement) => (
+        <Achievement key={achievement.name} achievement={achievement} />
       ))}
     </Table>
   );
 };
 
-const Achievement = props => {
+const Achievement = (props) => {
   const { achievement } = props;
-  const {
-    name,
-    desc,
-    icon_class,
-    value,
-    score,
-  } = achievement;
+  const { name, desc, icon_class, value, score } = achievement;
   return (
     <Table.Row key={name}>
       <Table.Cell collapsing>
@@ -73,11 +63,11 @@ const Achievement = props => {
       <Table.Cell verticalAlign="top">
         <h1>{name}</h1>
         {desc}
-        {score && (
+        {(score && (
           <Box color={value > 0 ? 'good' : 'bad'}>
             {value > 0 ? `Earned ${value} times` : 'Locked'}
           </Box>
-        ) || (
+        )) || (
           <Box color={value ? 'good' : 'bad'}>
             {value ? 'Unlocked' : 'Locked'}
           </Box>
@@ -89,24 +79,20 @@ const Achievement = props => {
 
 const HighScoreTable = (props, context) => {
   const { data } = useBackend(context);
-  const {
-    highscore: highscores,
-    user_ckey,
-  } = data;
-  const [
-    highScoreIndex,
-    setHighScoreIndex,
-  ] = useLocalState(context, 'highscore', 0);
+  const { highscore: highscores, user_ckey } = data;
+  const [highScoreIndex, setHighScoreIndex] = useLocalState(
+    context,
+    'highscore',
+    0,
+  );
   const highscore = highscores[highScoreIndex];
   if (!highscore) {
     return null;
   }
-  const scores = Object
-    .keys(highscore.scores)
-    .map(key => ({
-      ckey: key,
-      value: highscore.scores[key],
-    }));
+  const scores = Object.keys(highscore.scores).map((key) => ({
+    ckey: key,
+    value: highscore.scores[key],
+  }));
   return (
     <Flex>
       <Flex.Item>
@@ -115,7 +101,8 @@ const HighScoreTable = (props, context) => {
             <Tabs.Tab
               key={highscore.name}
               selected={highScoreIndex === i}
-              onClick={() => setHighScoreIndex(i)}>
+              onClick={() => setHighScoreIndex(i)}
+            >
               {highscore.name}
             </Tabs.Tab>
           ))}
@@ -124,38 +111,24 @@ const HighScoreTable = (props, context) => {
       <Flex.Item grow={1} basis={0}>
         <Table>
           <Table.Row header>
-            <Table.Cell textAlign="center">
-              #
-            </Table.Cell>
-            <Table.Cell textAlign="center">
-              Key
-            </Table.Cell>
-            <Table.Cell textAlign="center">
-              Score
-            </Table.Cell>
+            <Table.Cell textAlign="center">#</Table.Cell>
+            <Table.Cell textAlign="center">Key</Table.Cell>
+            <Table.Cell textAlign="center">Score</Table.Cell>
           </Table.Row>
           {scores.map((score, i) => (
-            <Table.Row
-              key={score.ckey}
-              className="candystripe"
-              m={2}>
+            <Table.Row key={score.ckey} className="candystripe" m={2}>
               <Table.Cell color="label" textAlign="center">
                 {i + 1}
               </Table.Cell>
               <Table.Cell
                 color={score.ckey === user_ckey && 'green'}
-                textAlign="center">
-                {i === 0 && (
-                  <Icon name="crown" color="yellow" mr={2} />
-                )}
+                textAlign="center"
+              >
+                {i === 0 && <Icon name="crown" color="yellow" mr={2} />}
                 {score.ckey}
-                {i === 0 && (
-                  <Icon name="crown" color="yellow" ml={2} />
-                )}
-              </Table.Cell>
-              <Table.Cell textAlign="center">
-                {score.value}
+                {i === 0 && <Icon name="crown" color="yellow" ml={2} />}
               </Table.Cell>
+              <Table.Cell textAlign="center">{score.value}</Table.Cell>
             </Table.Row>
           ))}
         </Table>
diff --git a/tgui/packages/tgui/interfaces/Adminhelp.tsx b/tgui/packages/tgui/interfaces/Adminhelp.tsx
index 02545a490842..c0371ca24f6c 100644
--- a/tgui/packages/tgui/interfaces/Adminhelp.tsx
+++ b/tgui/packages/tgui/interfaces/Adminhelp.tsx
@@ -1,14 +1,14 @@
-import { BooleanLike } from "common/react";
-import { useBackend, useLocalState } from "../backend";
-import { TextArea, Stack, Button, NoticeBox, Input, Box } from "../components";
-import { Window } from "../layouts";
+import { BooleanLike } from 'common/react';
+import { useBackend, useLocalState } from '../backend';
+import { TextArea, Stack, Button, NoticeBox, Input, Box } from '../components';
+import { Window } from '../layouts';
 
 type AdminhelpData = {
-  adminCount: number,
-  urgentAhelpEnabled: BooleanLike,
-  bannedFromUrgentAhelp: BooleanLike,
-  urgentAhelpPromptMessage: string,
-}
+  adminCount: number;
+  urgentAhelpEnabled: BooleanLike;
+  bannedFromUrgentAhelp: BooleanLike;
+  urgentAhelpPromptMessage: string;
+};
 
 export const Adminhelp = (props, context) => {
   const { act, data } = useBackend<AdminhelpData>(context);
@@ -18,20 +18,30 @@ export const Adminhelp = (props, context) => {
     bannedFromUrgentAhelp,
     urgentAhelpPromptMessage,
   } = data;
-  const [requestForAdmin, setRequestForAdmin] = useLocalState(context, "request_for_admin", false);
-  const [currentlyInputting, setCurrentlyInputting] = useLocalState(context, "confirm_request", false);
-  const [ahelpMessage, setAhelpMessage] = useLocalState(context, "ahelp_message", "");
+  const [requestForAdmin, setRequestForAdmin] = useLocalState(
+    context,
+    'request_for_admin',
+    false,
+  );
+  const [currentlyInputting, setCurrentlyInputting] = useLocalState(
+    context,
+    'confirm_request',
+    false,
+  );
+  const [ahelpMessage, setAhelpMessage] = useLocalState(
+    context,
+    'ahelp_message',
+    '',
+  );
 
-  const confirmationText = "alert admins";
+  const confirmationText = 'alert admins';
   return (
-    <Window
-      title="Create Adminhelp"
-      theme="admin"
-      height={300}
-      width={500}>
-      <Window.Content style={{
-        "background-image": "none",
-      }}>
+    <Window title="Create Adminhelp" theme="admin" height={300} width={500}>
+      <Window.Content
+        style={{
+          'background-image': 'none',
+        }}
+      >
         <Stack vertical fill>
           <Stack.Item grow>
             <TextArea
@@ -42,18 +52,18 @@ export const Adminhelp = (props, context) => {
               onChange={(e, value) => setAhelpMessage(value)}
             />
           </Stack.Item>
-          {(urgentAhelpEnabled && adminCount <= 0) && (
+          {urgentAhelpEnabled && adminCount <= 0 && (
             <Stack.Item>
               <NoticeBox info>
                 {urgentAhelpPromptMessage}
-                {currentlyInputting && (
+                {(currentlyInputting && (
                   <Box
                     mt={1}
                     width="100%"
                     fontFamily="arial"
                     backgroundColor="grey"
                     style={{
-                      "font-style": "normal",
+                      'font-style': 'normal',
                     }}
                   >
                     Input &apos;{confirmationText}&apos; to proceed.
@@ -69,7 +79,7 @@ export const Adminhelp = (props, context) => {
                       }}
                     />
                   </Box>
-                ) || (
+                )) || (
                   <Button
                     mt={1}
                     content="Alert admins?"
@@ -80,10 +90,14 @@ export const Adminhelp = (props, context) => {
                         setCurrentlyInputting(true);
                       }
                     }}
-                    color={requestForAdmin ? "orange" : "blue"}
-                    icon={requestForAdmin ? "check-square-o" : "square-o"}
+                    color={requestForAdmin ? 'orange' : 'blue'}
+                    icon={requestForAdmin ? 'check-square-o' : 'square-o'}
                     disabled={bannedFromUrgentAhelp}
-                    tooltip={bannedFromUrgentAhelp ? "You are banned from using urgent ahelps." : null}
+                    tooltip={
+                      bannedFromUrgentAhelp
+                        ? 'You are banned from using urgent ahelps.'
+                        : null
+                    }
                     fluid
                     textAlign="center"
                   />
@@ -97,15 +111,16 @@ export const Adminhelp = (props, context) => {
               fluid
               content="Submit"
               textAlign="center"
-              onClick={() => act("ahelp", {
-                urgent: requestForAdmin,
-                message: ahelpMessage,
-              })}
+              onClick={() =>
+                act('ahelp', {
+                  urgent: requestForAdmin,
+                  message: ahelpMessage,
+                })
+              }
             />
           </Stack.Item>
         </Stack>
       </Window.Content>
     </Window>
-
   );
 };
diff --git a/tgui/packages/tgui/interfaces/AdventureBrowser.tsx b/tgui/packages/tgui/interfaces/AdventureBrowser.tsx
index 377f56cbb599..fe99d72add16 100644
--- a/tgui/packages/tgui/interfaces/AdventureBrowser.tsx
+++ b/tgui/packages/tgui/interfaces/AdventureBrowser.tsx
@@ -1,5 +1,12 @@
 import { useBackend, useLocalState } from '../backend';
-import { Button, LabeledList, Section, Box, NoticeBox, Table } from '../components';
+import {
+  Button,
+  LabeledList,
+  Section,
+  Box,
+  NoticeBox,
+  Table,
+} from '../components';
 import { Window } from '../layouts';
 import { AdventureDataProvider, AdventureScreen } from './ExodroneConsole';
 import { formatTime } from '../format';
@@ -26,8 +33,8 @@ type AdventureBrowserData = AdventureDataProvider & {
 
 const AdventureEntry = (props, context) => {
   const { data, act } = useBackend<AdventureBrowserData>(context);
-  const { entry_ref, close }: { entry_ref: string, close: () => void } = props;
-  const entry = data.adventures.find(x => x.ref === entry_ref);
+  const { entry_ref, close }: { entry_ref: string; close: () => void } = props;
+  const entry = data.adventures.find((x) => x.ref === entry_ref);
 
   if (!entry) {
     return null;
@@ -38,25 +45,47 @@ const AdventureEntry = (props, context) => {
       <LabeledList>
         <LabeledList.Item label="ID">{entry.id}</LabeledList.Item>
         <LabeledList.Item label="Name">{entry.name}</LabeledList.Item>
-        <LabeledList.Item label="JSON Version">{entry.version}</LabeledList.Item>
+        <LabeledList.Item label="JSON Version">
+          {entry.version}
+        </LabeledList.Item>
         <LabeledList.Item label="Uploader">{entry.uploader}</LabeledList.Item>
-        <LabeledList.Item label="Last Update">{entry.timestamp}</LabeledList.Item>
+        <LabeledList.Item label="Last Update">
+          {entry.timestamp}
+        </LabeledList.Item>
         <LabeledList.Item label="Approved">
           <Button.Checkbox
             checked={entry.approved}
-            onClick={() => act("approve", { ref: entry.ref })}
+            onClick={() => act('approve', { ref: entry.ref })}
           />
         </LabeledList.Item>
         <LabeledList.Item label="JSON">
           {entry.json_status}
-          <Button onClick={() => act("upload", { ref: entry.ref })} content="Upload" />
-          <Button onClick={() => act("download", { ref: entry.ref })} content="Download" />
+          <Button
+            onClick={() => act('upload', { ref: entry.ref })}
+            content="Upload"
+          />
+          <Button
+            onClick={() => act('download', { ref: entry.ref })}
+            content="Download"
+          />
         </LabeledList.Item>
       </LabeledList>
-      <Button.Confirm onClick={() => { close(); act("delete", { ref: entry.ref }); }} content="Delete" />
-      <Button onClick={() => act("play", { ref: entry.ref })} content="Play" />
-      <Button onClick={() => act("refresh", { ref: entry.ref })} content="Refresh" />
-      <Button.Confirm onClick={() => act("save", { ref: entry.ref })} content="Save" />
+      <Button.Confirm
+        onClick={() => {
+          close();
+          act('delete', { ref: entry.ref });
+        }}
+        content="Delete"
+      />
+      <Button onClick={() => act('play', { ref: entry.ref })} content="Play" />
+      <Button
+        onClick={() => act('refresh', { ref: entry.ref })}
+        content="Refresh"
+      />
+      <Button.Confirm
+        onClick={() => act('save', { ref: entry.ref })}
+        content="Save"
+      />
       <Button onClick={close} content="Close" />
     </Section>
   );
@@ -64,17 +93,19 @@ const AdventureEntry = (props, context) => {
 
 const AdventureList = (props, context) => {
   const { data, act } = useBackend<AdventureBrowserData>(context);
-  const [
-    openAdventure,
-    setOpenAdventure,
-  ] = useLocalState<string | null>(context, 'openAdventure', null);
+  const [openAdventure, setOpenAdventure] = useLocalState<string | null>(
+    context,
+    'openAdventure',
+    null,
+  );
 
   return (
     <>
       {openAdventure && (
         <AdventureEntry
           entry_ref={openAdventure}
-          close={() => setOpenAdventure(null)} />
+          close={() => setOpenAdventure(null)}
+        />
       )}
       {!openAdventure && (
         <Table>
@@ -83,17 +114,20 @@ const AdventureList = (props, context) => {
             <Table.Cell color="label">Title</Table.Cell>
             <Table.Cell color="label">Edit</Table.Cell>
           </Table.Row>
-          {data.adventures.map(adventure => (
-            <Table.Row
-              key={adventure.ref}
-              className="candystripe">
+          {data.adventures.map((adventure) => (
+            <Table.Row key={adventure.ref} className="candystripe">
               <Table.Cell>{adventure.id}</Table.Cell>
               <Table.Cell>{adventure.name}</Table.Cell>
-              <Table.Cell><Button icon="edit" onClick={() => setOpenAdventure(adventure.ref)} /></Table.Cell>
+              <Table.Cell>
+                <Button
+                  icon="edit"
+                  onClick={() => setOpenAdventure(adventure.ref)}
+                />
+              </Table.Cell>
             </Table.Row>
           ))}
           <Table.Row>
-            <Button onClick={() => act("create")}>Create New</Button>
+            <Button onClick={() => act('create')}>Create New</Button>
           </Table.Row>
         </Table>
       )}
@@ -106,18 +140,22 @@ const DebugPlayer = (props, context) => {
   return (
     <Section
       title="Playtest"
-      buttons={<Button onClick={() => act("end_play")}>End Playtest</Button>}>
-      {data.delay_time > 0
-        ? <Box>DELAY {formatTime(data.delay_time)} / {data.delay_message}</Box>
-        : (
-          <AdventureScreen
-            adventure_data={data.adventure_data}
-            drone_integrity={100}
-            drone_max_integrity={100}
-            hide_status
-          />
-        )}
-    </Section>);
+      buttons={<Button onClick={() => act('end_play')}>End Playtest</Button>}
+    >
+      {data.delay_time > 0 ? (
+        <Box>
+          DELAY {formatTime(data.delay_time)} / {data.delay_message}
+        </Box>
+      ) : (
+        <AdventureScreen
+          adventure_data={data.adventure_data}
+          drone_integrity={100}
+          drone_max_integrity={100}
+          hide_status
+        />
+      )}
+    </Section>
+  );
 };
 
 export const AdventureBrowser = (props, context) => {
@@ -127,11 +165,9 @@ export const AdventureBrowser = (props, context) => {
     <Window width={650} height={500} title="Adventure Manager">
       <Window.Content>
         {!!data.feedback_message && (
-          <NoticeBox>
-            {data.feedback_message}
-          </NoticeBox>
+          <NoticeBox>{data.feedback_message}</NoticeBox>
         )}
-        {data.play_mode ? (<DebugPlayer />) : (<AdventureList />)}
+        {data.play_mode ? <DebugPlayer /> : <AdventureList />}
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/AiAirlock.js b/tgui/packages/tgui/interfaces/AiAirlock.js
index 881c65526319..2992985fb5fe 100644
--- a/tgui/packages/tgui/interfaces/AiAirlock.js
+++ b/tgui/packages/tgui/interfaces/AiAirlock.js
@@ -23,76 +23,76 @@ export const AiAirlock = (props, context) => {
   const statusBackup = dangerMap[data.power.backup] || dangerMap[0];
   const statusElectrify = dangerMap[data.shock] || dangerMap[0];
   return (
-    <Window
-      width={500}
-      height={390}>
+    <Window width={500} height={390}>
       <Window.Content>
         <Section title="Power Status">
           <LabeledList>
             <LabeledList.Item
               label="Main"
               color={statusMain.color}
-              buttons={(
+              buttons={
                 <Button
                   icon="lightbulb-o"
                   disabled={!data.power.main}
                   content="Disrupt"
-                  onClick={() => act('disrupt-main')} />
-              )}>
-              {data.power.main ? 'Online' : 'Offline'}
-              {' '}
-              {(!data.wires.main_1 || !data.wires.main_2)
-                && '[Wires have been cut!]'
-                || (data.power.main_timeleft > 0
-                  && `[${data.power.main_timeleft}s]`)}
+                  onClick={() => act('disrupt-main')}
+                />
+              }
+            >
+              {data.power.main ? 'Online' : 'Offline'}{' '}
+              {((!data.wires.main_1 || !data.wires.main_2) &&
+                '[Wires have been cut!]') ||
+                (data.power.main_timeleft > 0 &&
+                  `[${data.power.main_timeleft}s]`)}
             </LabeledList.Item>
             <LabeledList.Item
               label="Backup"
               color={statusBackup.color}
-              buttons={(
+              buttons={
                 <Button
                   icon="lightbulb-o"
                   disabled={!data.power.backup}
                   content="Disrupt"
-                  onClick={() => act('disrupt-backup')} />
-              )}>
-              {data.power.backup ? 'Online' : 'Offline'}
-              {' '}
-              {(!data.wires.backup_1 || !data.wires.backup_2)
-                && '[Wires have been cut!]'
-                || (data.power.backup_timeleft > 0
-                  && `[${data.power.backup_timeleft}s]`)}
+                  onClick={() => act('disrupt-backup')}
+                />
+              }
+            >
+              {data.power.backup ? 'Online' : 'Offline'}{' '}
+              {((!data.wires.backup_1 || !data.wires.backup_2) &&
+                '[Wires have been cut!]') ||
+                (data.power.backup_timeleft > 0 &&
+                  `[${data.power.backup_timeleft}s]`)}
             </LabeledList.Item>
             <LabeledList.Item
               label="Electrify"
               color={statusElectrify.color}
-              buttons={(
+              buttons={
                 <>
                   <Button
                     icon="wrench"
                     disabled={!(data.wires.shock && data.shock === 0)}
                     content="Restore"
-                    onClick={() => act('shock-restore')} />
+                    onClick={() => act('shock-restore')}
+                  />
                   <Button
                     icon="bolt"
                     disabled={!data.wires.shock}
                     content="Temporary"
-                    onClick={() => act('shock-temp')} />
+                    onClick={() => act('shock-temp')}
+                  />
                   <Button
                     icon="bolt"
                     disabled={!data.wires.shock}
                     content="Permanent"
-                    onClick={() => act('shock-perm')} />
+                    onClick={() => act('shock-perm')}
+                  />
                 </>
-              )}>
-              {data.shock === 2 ? 'Safe' : 'Electrified'}
-              {' '}
-              {!data.wires.shock
-                && '[Wires have been cut!]'
-                || (data.shock_timeleft > 0
-                  && `[${data.shock_timeleft}s]`)
-                || (data.shock_timeleft === -1
-                  && '[Permanent]')}
+              }
+            >
+              {data.shock === 2 ? 'Safe' : 'Electrified'}{' '}
+              {(!data.wires.shock && '[Wires have been cut!]') ||
+                (data.shock_timeleft > 0 && `[${data.shock_timeleft}s]`) ||
+                (data.shock_timeleft === -1 && '[Permanent]')}
             </LabeledList.Item>
           </LabeledList>
         </Section>
@@ -101,94 +101,108 @@ export const AiAirlock = (props, context) => {
             <LabeledList.Item
               label="ID Scan"
               color="bad"
-              buttons={(
+              buttons={
                 <Button
                   icon={data.id_scanner ? 'power-off' : 'times'}
                   content={data.id_scanner ? 'Enabled' : 'Disabled'}
                   selected={data.id_scanner}
                   disabled={!data.wires.id_scanner}
-                  onClick={() => act('idscan-toggle')} />
-              )}>
+                  onClick={() => act('idscan-toggle')}
+                />
+              }
+            >
               {!data.wires.id_scanner && '[Wires have been cut!]'}
             </LabeledList.Item>
             <LabeledList.Item
               label="Emergency Access"
-              buttons={(
+              buttons={
                 <Button
                   icon={data.emergency ? 'power-off' : 'times'}
                   content={data.emergency ? 'Enabled' : 'Disabled'}
                   selected={data.emergency}
-                  onClick={() => act('emergency-toggle')} />
-              )} />
+                  onClick={() => act('emergency-toggle')}
+                />
+              }
+            />
             <LabeledList.Divider />
             <LabeledList.Item
               label="Door Bolts"
               color="bad"
-              buttons={(
+              buttons={
                 <Button
                   icon={data.locked ? 'lock' : 'unlock'}
                   content={data.locked ? 'Lowered' : 'Raised'}
                   selected={data.locked}
                   disabled={!data.wires.bolts}
-                  onClick={() => act('bolt-toggle')} />
-              )}>
+                  onClick={() => act('bolt-toggle')}
+                />
+              }
+            >
               {!data.wires.bolts && '[Wires have been cut!]'}
             </LabeledList.Item>
             <LabeledList.Item
               label="Door Bolt Lights"
               color="bad"
-              buttons={(
+              buttons={
                 <Button
                   icon={data.lights ? 'power-off' : 'times'}
                   content={data.lights ? 'Enabled' : 'Disabled'}
                   selected={data.lights}
                   disabled={!data.wires.lights}
-                  onClick={() => act('light-toggle')} />
-              )}>
+                  onClick={() => act('light-toggle')}
+                />
+              }
+            >
               {!data.wires.lights && '[Wires have been cut!]'}
             </LabeledList.Item>
             <LabeledList.Item
               label="Door Force Sensors"
               color="bad"
-              buttons={(
+              buttons={
                 <Button
                   icon={data.safe ? 'power-off' : 'times'}
                   content={data.safe ? 'Enabled' : 'Disabled'}
                   selected={data.safe}
                   disabled={!data.wires.safe}
-                  onClick={() => act('safe-toggle')} />
-              )}>
+                  onClick={() => act('safe-toggle')}
+                />
+              }
+            >
               {!data.wires.safe && '[Wires have been cut!]'}
             </LabeledList.Item>
             <LabeledList.Item
               label="Door Timing Safety"
               color="bad"
-              buttons={(
+              buttons={
                 <Button
                   icon={data.speed ? 'power-off' : 'times'}
                   content={data.speed ? 'Enabled' : 'Disabled'}
                   selected={data.speed}
                   disabled={!data.wires.timing}
-                  onClick={() => act('speed-toggle')} />
-              )}>
+                  onClick={() => act('speed-toggle')}
+                />
+              }
+            >
               {!data.wires.timing && '[Wires have been cut!]'}
             </LabeledList.Item>
             <LabeledList.Divider />
             <LabeledList.Item
               label="Door Control"
               color="bad"
-              buttons={(
+              buttons={
                 <Button
                   icon={data.opened ? 'sign-out-alt' : 'sign-in-alt'}
                   content={data.opened ? 'Open' : 'Closed'}
                   selected={data.opened}
-                  disabled={(data.locked || data.welded)}
-                  onClick={() => act('open-close')} />
-              )}>
+                  disabled={data.locked || data.welded}
+                  onClick={() => act('open-close')}
+                />
+              }
+            >
               {!!(data.locked || data.welded) && (
                 <span>
                   [Door is {data.locked ? 'bolted' : ''}
-                  {(data.locked && data.welded) ? ' and ' : ''}
+                  {data.locked && data.welded ? ' and ' : ''}
                   {data.welded ? 'welded' : ''}!]
                 </span>
               )}
diff --git a/tgui/packages/tgui/interfaces/AiRestorer.js b/tgui/packages/tgui/interfaces/AiRestorer.js
index 57228a257177..ba292a182125 100644
--- a/tgui/packages/tgui/interfaces/AiRestorer.js
+++ b/tgui/packages/tgui/interfaces/AiRestorer.js
@@ -1,12 +1,17 @@
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../components';
+import {
+  Box,
+  Button,
+  LabeledList,
+  NoticeBox,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const AiRestorer = () => {
   return (
-    <Window
-      width={370}
-      height={360}>
+    <Window width={370} height={360}>
       <Window.Content scrollable>
         <AiRestorerContent />
       </Window.Content>
@@ -28,30 +33,25 @@ export const AiRestorerContent = (props, context) => {
   } = data;
   return (
     <>
-      {error && (
-        <NoticeBox textAlign="center">
-          {error}
-        </NoticeBox>
-      )}
+      {error && <NoticeBox textAlign="center">{error}</NoticeBox>}
       {!!ejectable && (
         <Button
           fluid
           icon="eject"
-          content={AI_present ? name : "----------"}
+          content={AI_present ? name : '----------'}
           disabled={!AI_present}
-          onClick={() => act('PRG_eject')} />
+          onClick={() => act('PRG_eject')}
+        />
       )}
       {!!AI_present && (
         <Section
-          title={ejectable ? "System Status" : name}
-          buttons={(
-            <Box
-              inline
-              bold
-              color={isDead ? 'bad' : 'good'}>
-              {isDead ? "Nonfunctional" : "Functional"}
+          title={ejectable ? 'System Status' : name}
+          buttons={
+            <Box inline bold color={isDead ? 'bad' : 'good'}>
+              {isDead ? 'Nonfunctional' : 'Functional'}
             </Box>
-          )}>
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Integrity">
               <ProgressBar
@@ -62,16 +62,12 @@ export const AiRestorerContent = (props, context) => {
                   good: [70, Infinity],
                   average: [50, 70],
                   bad: [-Infinity, 50],
-                }} />
+                }}
+              />
             </LabeledList.Item>
           </LabeledList>
           {!!restoring && (
-            <Box
-              bold
-              textAlign="center"
-              fontSize="20px"
-              color="good"
-              mt={1}>
+            <Box bold textAlign="center" fontSize="20px" color="good" mt={1}>
               RECONSTRUCTION IN PROGRESS
             </Box>
           )}
@@ -81,9 +77,10 @@ export const AiRestorerContent = (props, context) => {
             content="Begin Reconstruction"
             disabled={restoring}
             mt={1}
-            onClick={() => act('PRG_beginReconstruction')} />
+            onClick={() => act('PRG_beginReconstruction')}
+          />
           <Section title="Laws" level={2}>
-            {laws.map(law => (
+            {laws.map((law) => (
               <Box key={law} className="candystripe">
                 {law}
               </Box>
diff --git a/tgui/packages/tgui/interfaces/AiVoiceChanger.js b/tgui/packages/tgui/interfaces/AiVoiceChanger.js
index ba385e217477..0c1e5d621c1f 100644
--- a/tgui/packages/tgui/interfaces/AiVoiceChanger.js
+++ b/tgui/packages/tgui/interfaces/AiVoiceChanger.js
@@ -6,7 +6,7 @@ export const AiVoiceChanger = (props, context) => {
   const { act, data } = useBackend(context);
 
   return (
-    <Window title="Voice changer settings" width={400} height={200} >
+    <Window title="Voice changer settings" width={400} height={200}>
       <Section>
         <LabeledList>
           <LabeledList.Item label="Power">
@@ -14,35 +14,46 @@ export const AiVoiceChanger = (props, context) => {
               icon={data.on ? 'power-off' : 'times'}
               content={data.on ? 'On' : 'Off'}
               selected={data.on}
-              onClick={() => act('power')} />
+              onClick={() => act('power')}
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Accent">
             <Dropdown
               options={data.voices}
-              onSelected={(value) => act('look', {
-                look: value,
-              })} />
+              onSelected={(value) =>
+                act('look', {
+                  look: value,
+                })
+              }
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Verb">
             <Input
               default={data.say_verb}
-              onChange={(e, value) => act("verb", {
-                verb: value,
-              })} />
+              onChange={(e, value) =>
+                act('verb', {
+                  verb: value,
+                })
+              }
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Volume">
             <Button
               icon={data.loud ? 'power-off' : 'times'}
               content={data.loud ? 'Loudmode on' : 'Loudmode Off'}
               selected={data.loud}
-              onClick={() => act('loud')} />
+              onClick={() => act('loud')}
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Fake name">
             <Input
               default={data.name}
-              onChange={(e, value) => act("name", {
-                name: value,
-              })} />
+              onChange={(e, value) =>
+                act('name', {
+                  name: value,
+                })
+              }
+            />
           </LabeledList.Item>
         </LabeledList>
       </Section>
diff --git a/tgui/packages/tgui/interfaces/AirAlarm.js b/tgui/packages/tgui/interfaces/AirAlarm.js
index 2639a0853a04..92ce766f4c04 100644
--- a/tgui/packages/tgui/interfaces/AirAlarm.js
+++ b/tgui/packages/tgui/interfaces/AirAlarm.js
@@ -1,7 +1,16 @@
 import { toFixed } from 'common/math';
 import { Fragment } from 'inferno';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Flex, Knob, LabeledControls, LabeledList, RoundGauge, Section } from '../components';
+import {
+  Box,
+  Button,
+  Flex,
+  Knob,
+  LabeledControls,
+  LabeledList,
+  RoundGauge,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 import { Scrubber, Vent } from './common/AtmosControls';
 import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
@@ -10,16 +19,12 @@ export const AirAlarm = (props, context) => {
   const { act, data } = useBackend(context);
   const locked = data.locked && !data.siliconUser;
   return (
-    <Window
-      width={440}
-      height={650}>
+    <Window width={440} height={650}>
       <Window.Content scrollable>
         <InterfaceLockNoticeBox />
         <ThermostatControl />
         <AirAlarmStatus />
-        {!locked && (
-          <AirAlarmControl />
-        )}
+        {!locked && <AirAlarmControl />}
       </Window.Content>
     </Window>
   );
@@ -27,8 +32,9 @@ export const AirAlarm = (props, context) => {
 
 const AirAlarmStatus = (props, context) => {
   const { data } = useBackend(context);
-  const entries = (data.environment_data || [])
-    .filter(entry => entry.value >= 0.01);
+  const entries = (data.environment_data || []).filter(
+    (entry) => entry.value >= 0.01,
+  );
   const dangerMap = {
     0: {
       color: 'good',
@@ -47,43 +53,40 @@ const AirAlarmStatus = (props, context) => {
   return (
     <Section title="Air Status">
       <LabeledList>
-        {entries.length > 0 && (
+        {(entries.length > 0 && (
           <>
-            {entries.map(entry => {
+            {entries.map((entry) => {
               const status = dangerMap[entry.danger_level] || dangerMap[0];
               return (
                 <LabeledList.Item
                   key={entry.name}
                   label={entry.name}
-                  color={status.color}>
-                  {toFixed(entry.value, 2)}{entry.unit}
+                  color={status.color}
+                >
+                  {toFixed(entry.value, 2)}
+                  {entry.unit}
                 </LabeledList.Item>
               );
             })}
-            <LabeledList.Item
-              label="Local status"
-              color={localStatus.color}>
+            <LabeledList.Item label="Local status" color={localStatus.color}>
               {localStatus.localStatusText}
             </LabeledList.Item>
             <LabeledList.Item
               label="Area status"
-              color={data.atmos_alarm || data.fire_alarm ? 'bad' : 'good'}>
-              {data.atmos_alarm && 'Atmosphere Alarm'
-                || data.fire_alarm && 'Fire Alarm'
-                || 'Nominal'}
+              color={data.atmos_alarm || data.fire_alarm ? 'bad' : 'good'}
+            >
+              {(data.atmos_alarm && 'Atmosphere Alarm') ||
+                (data.fire_alarm && 'Fire Alarm') ||
+                'Nominal'}
             </LabeledList.Item>
           </>
-        ) || (
-          <LabeledList.Item
-            label="Warning"
-            color="bad">
+        )) || (
+          <LabeledList.Item label="Warning" color="bad">
             Cannot obtain air sample for analysis.
           </LabeledList.Item>
         )}
         {!!data.emagged && (
-          <LabeledList.Item
-            label="Warning"
-            color="bad">
+          <LabeledList.Item label="Warning" color="bad">
             Safety measures offline. Device may exhibit abnormal behavior.
           </LabeledList.Item>
         )}
@@ -94,19 +97,16 @@ const AirAlarmStatus = (props, context) => {
 
 const ThermostatControl = (props, context) => {
   const { act, data } = useBackend(context);
-  const entries = (data.environment_data || [])
-    .filter(entry => entry.value >= 0.01);
+  const entries = (data.environment_data || []).filter(
+    (entry) => entry.value >= 0.01,
+  );
   return (
     <Section title="Thermostat">
       <Flex>
         <Flex.Item>
           <LabeledControls>
             <LabeledControls.Item label="Control">
-              <Box
-                position="relative"
-                mr={2}
-                ml={2}
-                mt={1}>
+              <Box position="relative" mr={2} ml={2} mt={1}>
                 <Knob
                   size={1.25}
                   color={'green'}
@@ -116,9 +116,12 @@ const ThermostatControl = (props, context) => {
                   maxValue={20 + data.thermostat.deviation}
                   step={1}
                   stepPixelSize={0.75}
-                  onDrag={(e, value) => act('target', {
-                    target: value,
-                  })} />
+                  onDrag={(e, value) =>
+                    act('target', {
+                      target: value,
+                    })
+                  }
+                />
                 <Button
                   fluid
                   position="absolute"
@@ -126,30 +129,28 @@ const ThermostatControl = (props, context) => {
                   right="-20px"
                   color="transparent"
                   icon="undo"
-                  onClick={() => act('target', {
-                    target: "20",
-                  })} />
+                  onClick={() =>
+                    act('target', {
+                      target: '20',
+                    })
+                  }
+                />
               </Box>
             </LabeledControls.Item>
           </LabeledControls>
         </Flex.Item>
         <Flex.Item>
-          <LabeledControls
-            ml={1}>
-            <LabeledControls.Item
-              minWidth="66px"
-              label="Target (°C)">
+          <LabeledControls ml={1}>
+            <LabeledControls.Item minWidth="66px" label="Target (°C)">
               <RoundGauge
                 size={1.75}
                 value={toFixed(data.thermostat.target, 0)}
                 minValue={20 - data.thermostat.deviation}
                 maxValue={20 + data.thermostat.deviation}
                 ranges={{
-                  "good": [20 - data.thermostat.deviation, 10],
-                  "average": [11,
-                    29],
-                  "bad": [30,
-                    20 + data.thermostat.deviation],
+                  good: [20 - data.thermostat.deviation, 10],
+                  average: [11, 29],
+                  bad: [30, 20 + data.thermostat.deviation],
                 }}
               />
             </LabeledControls.Item>
@@ -190,81 +191,86 @@ const AirAlarmControl = (props, context) => {
   return (
     <Section
       title={route.title}
-      buttons={screen && (
-        <Button
-          icon="arrow-left"
-          content="Back"
-          onClick={() => setScreen()} />
-      )}>
+      buttons={
+        screen && (
+          <Button
+            icon="arrow-left"
+            content="Back"
+            onClick={() => setScreen()}
+          />
+        )
+      }
+    >
       <Component />
     </Section>
   );
 };
 
-
 //  Home screen
 // --------------------------------------------------------
 
 const AirAlarmControlHome = (props, context) => {
   const { act, data } = useBackend(context);
   const [screen, setScreen] = useLocalState(context, 'screen');
-  const {
-    mode,
-    atmos_alarm,
-    fire_alarm,
-  } = data;
+  const { mode, atmos_alarm, fire_alarm } = data;
   return (
     <>
       <Button
         icon="exclamation-triangle"
         color={fire_alarm ? 'danger' : 'caution'}
         content="Fire Alarm"
-        onClick={() => act('fire_alarm', {
-          fire_alarm: fire_alarm === 1 ? 0 : 1,
-        })} />
+        onClick={() =>
+          act('fire_alarm', {
+            fire_alarm: fire_alarm === 1 ? 0 : 1,
+          })
+        }
+      />
       <Box mt={1} />
       <Button
-        icon={atmos_alarm
-          ? 'exclamation-triangle'
-          : 'exclamation'}
+        icon={atmos_alarm ? 'exclamation-triangle' : 'exclamation'}
         color={atmos_alarm && 'caution'}
         content="Area Atmosphere Alarm"
-        onClick={() => act(atmos_alarm ? 'reset' : 'alarm')} />
+        onClick={() => act(atmos_alarm ? 'reset' : 'alarm')}
+      />
       <Box mt={1} />
       <Button
-        icon={mode === 3
-          ? 'exclamation-triangle'
-          : 'exclamation'}
+        icon={mode === 3 ? 'exclamation-triangle' : 'exclamation'}
         color={mode === 3 && 'danger'}
         content="Panic Siphon"
-        onClick={() => act('mode', {
-          mode: mode === 3 ? 1 : 3,
-        })} />
+        onClick={() =>
+          act('mode', {
+            mode: mode === 3 ? 1 : 3,
+          })
+        }
+      />
       <Box mt={2} />
       <Button
         icon="sign-out-alt"
         content="Vent Controls"
-        onClick={() => setScreen('vents')} />
+        onClick={() => setScreen('vents')}
+      />
       <Box mt={1} />
       <Button
         icon="filter"
         content="Scrubber Controls"
-        onClick={() => setScreen('scrubbers')} />
+        onClick={() => setScreen('scrubbers')}
+      />
       <Box mt={1} />
       <Button
         icon="cog"
         content="Operating Mode"
-        onClick={() => setScreen('modes')} />
+        onClick={() => setScreen('modes')}
+      />
       <Box mt={1} />
       <Button
         icon="chart-bar"
         content="Alarm Thresholds"
-        onClick={() => setScreen('thresholds')} />
+        onClick={() => setScreen('thresholds')}
+      />
     </>
   );
 };
 
-
 //  Vents
 // --------------------------------------------------------
 
@@ -274,11 +280,7 @@ const AirAlarmControlVents = (props, context) => {
   if (!vents || vents.length === 0) {
     return 'Nothing to show';
   }
-  return vents.map(vent => (
-    <Vent
-      key={vent.id_tag}
-      vent={vent} />
-  ));
+  return vents.map((vent) => <Vent key={vent.id_tag} vent={vent} />);
 };
 
 //  Scrubbers
@@ -290,10 +292,8 @@ const AirAlarmControlScrubbers = (props, context) => {
   if (!scrubbers || scrubbers.length === 0) {
     return 'Nothing to show';
   }
-  return scrubbers.map(scrubber => (
-    <Scrubber
-      key={scrubber.id_tag}
-      scrubber={scrubber} />
+  return scrubbers.map((scrubber) => (
+    <Scrubber key={scrubber.id_tag} scrubber={scrubber} />
   ));
 };
 
@@ -306,20 +306,20 @@ const AirAlarmControlModes = (props, context) => {
   if (!modes || modes.length === 0) {
     return 'Nothing to show';
   }
-  return modes.map(mode => (
+  return modes.map((mode) => (
     <Fragment key={mode.mode}>
       <Button
         icon={mode.selected ? 'check-square-o' : 'square-o'}
         selected={mode.selected}
         color={mode.selected && mode.danger && 'danger'}
         content={mode.name}
-        onClick={() => act('mode', { mode: mode.mode })} />
+        onClick={() => act('mode', { mode: mode.mode })}
+      />
       <Box mt={1} />
     </Fragment>
   ));
 };
 
-
 //  Thresholds
 // --------------------------------------------------------
 
@@ -327,9 +327,7 @@ const AirAlarmControlThresholds = (props, context) => {
   const { act, data } = useBackend(context);
   const { thresholds } = data;
   return (
-    <table
-      className="LabeledList"
-      style={{ width: '100%' }}>
+    <table className="LabeledList" style={{ width: '100%' }}>
       <thead>
         <tr>
           <td />
@@ -340,17 +338,20 @@ const AirAlarmControlThresholds = (props, context) => {
         </tr>
       </thead>
       <tbody>
-        {thresholds.map(threshold => (
+        {thresholds.map((threshold) => (
           <tr key={threshold.name}>
             <td className="LabeledList__label">{threshold.name}</td>
-            {threshold.settings.map(setting => (
+            {threshold.settings.map((setting) => (
               <td key={setting.val}>
                 <Button
                   content={toFixed(setting.selected, 2)}
-                  onClick={() => act('threshold', {
-                    env: setting.env,
-                    var: setting.val,
-                  })} />
+                  onClick={() =>
+                    act('threshold', {
+                      env: setting.env,
+                      var: setting.val,
+                    })
+                  }
+                />
               </td>
             ))}
           </tr>
diff --git a/tgui/packages/tgui/interfaces/AirlockController.js b/tgui/packages/tgui/interfaces/AirlockController.js
index c4218ff8bea8..602bf280a472 100644
--- a/tgui/packages/tgui/interfaces/AirlockController.js
+++ b/tgui/packages/tgui/interfaces/AirlockController.js
@@ -11,91 +11,97 @@ export const AirlockController = (props, context) => {
     interiorStatus,
     exteriorStatus,
   } = data;
-  const currentStatus = ["ERROR, REPORT THIS TO CODERS", ""];
-  let chamberStatusColor = "average";
+  const currentStatus = ['ERROR, REPORT THIS TO CODERS', ''];
+  let chamberStatusColor = 'average';
   switch (airlockState) {
-    case "inopen":
-      currentStatus[0] = "Interior Airlock Open";
-      currentStatus[1] = "Chamber Pressurized";
-      chamberStatusColor = "good";
+    case 'inopen':
+      currentStatus[0] = 'Interior Airlock Open';
+      currentStatus[1] = 'Chamber Pressurized';
+      chamberStatusColor = 'good';
       break;
-    case "pressurize":
-      currentStatus[0] = "Cycling to Interior Airlock";
-      currentStatus[1] = "Chamber Pressurizing";
+    case 'pressurize':
+      currentStatus[0] = 'Cycling to Interior Airlock';
+      currentStatus[1] = 'Chamber Pressurizing';
       break;
-    case "closed":
-      currentStatus[0] = "Inactive";
+    case 'closed':
+      currentStatus[0] = 'Inactive';
       break;
-    case "depressurize":
-      currentStatus[0] = "Cycling to Exterior Airlock";
-      currentStatus[1] = "Chamber Depressurizing";
+    case 'depressurize':
+      currentStatus[0] = 'Cycling to Exterior Airlock';
+      currentStatus[1] = 'Chamber Depressurizing';
       break;
-    case "outopen":
-      currentStatus[0] = "Exterior Airlock Open";
-      currentStatus[1] = "Chamber Depressurized";
-      chamberStatusColor = "bad";
+    case 'outopen':
+      currentStatus[0] = 'Exterior Airlock Open';
+      currentStatus[1] = 'Chamber Depressurized';
+      chamberStatusColor = 'bad';
       break;
   }
   return (
     <Window width={500} height={190}>
       <Window.Content>
-        <Section title="Airlock Status" buttons={(
-          ((airlockState === "pressurize" || airlockState === "depressurize")
-            && <Button
-              icon="stop-circle"
-              content="Abort"
-              onClick={() => act("abort")}
-            />
-          ) || (
-            airlockState === "closed" && (
+        <Section
+          title="Airlock Status"
+          buttons={
+            ((airlockState === 'pressurize' ||
+              airlockState === 'depressurize') && (
+              <Button
+                icon="stop-circle"
+                content="Abort"
+                onClick={() => act('abort')}
+              />
+            )) ||
+            (airlockState === 'closed' && (
               <>
                 <Button
                   icon="lock-open"
                   content="Open Interior Airlock"
-                  onClick={() => act("cycleInterior")}
+                  onClick={() => act('cycleInterior')}
                 />
                 <Button
                   icon="lock-open"
                   content="Open Exterior Airlock"
-                  onClick={() => act("cycleExterior")}
+                  onClick={() => act('cycleExterior')}
                 />
               </>
-            )
-          ) || (
-            airlockState === "inopen" && (
+            )) ||
+            (airlockState === 'inopen' && (
               <>
                 <Button
                   icon="lock"
                   content="Close Interior Airlock"
-                  onClick={() => act("cycleClosed")}
+                  onClick={() => act('cycleClosed')}
                 />
                 <Button
                   icon="sync"
                   content="Cycle to Exterior Airlock"
-                  onClick={() => act("cycleExterior")}
+                  onClick={() => act('cycleExterior')}
                 />
               </>
-            )
-          ) || (
-            airlockState === "outopen" && (
+            )) ||
+            (airlockState === 'outopen' && (
               <>
                 <Button
                   icon="lock"
                   content="Close Exterior Airlock"
-                  onClick={() => act("cycleClosed")}
+                  onClick={() => act('cycleClosed')}
                 />
                 <Button
                   icon="sync"
                   content="Cycle to Interior Airlock"
-                  onClick={() => act("cycleInterior")}
+                  onClick={() => act('cycleInterior')}
                 />
               </>
-            )
-          )
-        )}>
+            ))
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Current Status">
-              {currentStatus[0]}{currentStatus[1] !== "" && ", "}<Box as="span" color={chamberStatusColor}> {currentStatus[1]} </Box>
+              {currentStatus[0]}
+              {currentStatus[1] !== '' && ', '}
+              <Box as="span" color={chamberStatusColor}>
+                {' '}
+                {currentStatus[1]}{' '}
+              </Box>
             </LabeledList.Item>
             <LabeledList.Item label="Chamber Pressure">
               {sensorPressure} kPa
diff --git a/tgui/packages/tgui/interfaces/AirlockElectronics.js b/tgui/packages/tgui/interfaces/AirlockElectronics.js
index 5a588825703e..37392dadeba2 100644
--- a/tgui/packages/tgui/interfaces/AirlockElectronics.js
+++ b/tgui/packages/tgui/interfaces/AirlockElectronics.js
@@ -5,93 +5,110 @@ import { AccessConfig } from './common/AccessConfig';
 
 export const AirlockElectronics = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    oneAccess,
-    unres_direction,
-    passedName,
-    passedCycleId,
-  } = data;
+  const { oneAccess, unres_direction, passedName, passedCycleId } = data;
   const regions = data.regions || [];
   const accesses = data.accesses || [];
   return (
-    <Window
-      width={420}
-      height={485}>
+    <Window width={420} height={485}>
       <Window.Content>
         <Section title="Main">
           <LabeledList>
-            <LabeledList.Item
-              label="Access Required">
+            <LabeledList.Item label="Access Required">
               <Button
                 icon={oneAccess ? 'unlock' : 'lock'}
                 content={oneAccess ? 'One' : 'All'}
-                onClick={() => act('one_access')} />
+                onClick={() => act('one_access')}
+              />
             </LabeledList.Item>
-            <LabeledList.Item
-              label="Unrestricted Access">
+            <LabeledList.Item label="Unrestricted Access">
               <Button
                 icon={unres_direction & 1 ? 'check-square-o' : 'square-o'}
                 content="North"
                 selected={unres_direction & 1}
-                onClick={() => act('direc_set', {
-                  unres_direction: '1',
-                })} />
+                onClick={() =>
+                  act('direc_set', {
+                    unres_direction: '1',
+                  })
+                }
+              />
               <Button
                 icon={unres_direction & 2 ? 'check-square-o' : 'square-o'}
                 content="South"
                 selected={unres_direction & 2}
-                onClick={() => act('direc_set', {
-                  unres_direction: '2',
-                })} />
+                onClick={() =>
+                  act('direc_set', {
+                    unres_direction: '2',
+                  })
+                }
+              />
               <Button
                 icon={unres_direction & 4 ? 'check-square-o' : 'square-o'}
                 content="East"
                 selected={unres_direction & 4}
-                onClick={() => act('direc_set', {
-                  unres_direction: '4',
-                })} />
+                onClick={() =>
+                  act('direc_set', {
+                    unres_direction: '4',
+                  })
+                }
+              />
               <Button
                 icon={unres_direction & 8 ? 'check-square-o' : 'square-o'}
                 content="West"
                 selected={unres_direction & 8}
-                onClick={() => act('direc_set', {
-                  unres_direction: '8',
-                })} />
+                onClick={() =>
+                  act('direc_set', {
+                    unres_direction: '8',
+                  })
+                }
+              />
             </LabeledList.Item>
-            <LabeledList.Item
-              label="Airlock Name">
-              <Input fluid
+            <LabeledList.Item label="Airlock Name">
+              <Input
+                fluid
                 maxLength={30}
                 value={passedName}
-                onChange={(e, value) => act('passedName', {
-                  passedName: value,
-                })} />
+                onChange={(e, value) =>
+                  act('passedName', {
+                    passedName: value,
+                  })
+                }
+              />
             </LabeledList.Item>
-            <LabeledList.Item
-              label="Cycling Id">
-              <Input fluid
+            <LabeledList.Item label="Cycling Id">
+              <Input
+                fluid
                 maxLength={30}
                 value={passedCycleId}
-                onChange={(e, value) => act('passedCycleId', {
-                  passedCycleId: value,
-                })} />
+                onChange={(e, value) =>
+                  act('passedCycleId', {
+                    passedCycleId: value,
+                  })
+                }
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
         <AccessConfig
           accesses={regions}
           selectedList={accesses}
-          accessMod={ref => act('set', {
-            access: ref,
-          })}
+          accessMod={(ref) =>
+            act('set', {
+              access: ref,
+            })
+          }
           grantAll={() => act('grant_all')}
           denyAll={() => act('clear_all')}
-          grantDep={ref => act('grant_region', {
-            region: ref,
-          })}
-          denyDep={ref => act('deny_region', {
-            region: ref,
-          })} />
+          grantDep={(ref) =>
+            act('grant_region', {
+              region: ref,
+            })
+          }
+          denyDep={(ref) =>
+            act('deny_region', {
+              region: ref,
+            })
+          }
+        />
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/AlertModal.tsx b/tgui/packages/tgui/interfaces/AlertModal.tsx
index 965faf68380a..e32ab80697a1 100644
--- a/tgui/packages/tgui/interfaces/AlertModal.tsx
+++ b/tgui/packages/tgui/interfaces/AlertModal.tsx
@@ -1,6 +1,13 @@
 import { Loader } from './common/Loader';
 import { useBackend, useLocalState } from '../backend';
-import { KEY_ENTER, KEY_ESCAPE, KEY_LEFT, KEY_RIGHT, KEY_SPACE, KEY_TAB } from '../../common/keycodes';
+import {
+  KEY_ENTER,
+  KEY_ESCAPE,
+  KEY_LEFT,
+  KEY_RIGHT,
+  KEY_SPACE,
+  KEY_TAB,
+} from '../../common/keycodes';
 import { Autofocus, Box, Button, Flex, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
@@ -29,10 +36,10 @@ export const AlertModal = (_, context) => {
   } = data;
   const [selected, setSelected] = useLocalState<number>(context, 'selected', 0);
   // Dynamically sets window dimensions
-  const windowHeight
-    = 115
-    + (message.length > 30 ? Math.ceil(message.length / 4) : 0)
-    + (message.length && large_buttons ? 5 : 0);
+  const windowHeight =
+    115 +
+    (message.length > 30 ? Math.ceil(message.length / 4) : 0) +
+    (message.length && large_buttons ? 5 : 0);
   const windowWidth = 325 + (buttons.length > 2 ? 55 : 0);
   const onKey = (direction: number) => {
     if (selected === 0 && direction === KEY_DECREMENT) {
@@ -65,7 +72,8 @@ export const AlertModal = (_, context) => {
             e.preventDefault();
             onKey(KEY_INCREMENT);
           }
-        }}>
+        }}
+      >
         <Section fill>
           <Stack fill vertical>
             <Stack.Item grow m={1}>
@@ -100,7 +108,8 @@ const ButtonDisplay = (props, context) => {
       direction={!swapped_buttons ? 'row-reverse' : 'row'}
       fill
       justify="space-around"
-      wrap>
+      wrap
+    >
       {buttons?.map((button, index) =>
         !!large_buttons && buttons.length < 3 ? (
           <Flex.Item grow key={index}>
@@ -118,7 +127,7 @@ const ButtonDisplay = (props, context) => {
               selected={selected === index}
             />
           </Flex.Item>
-        )
+        ),
       )}
     </Flex>
   );
@@ -144,7 +153,8 @@ const AlertButton = (props, context) => {
       pt={large_buttons ? 0.33 : 0}
       selected={selected}
       textAlign="center"
-      width={!large_buttons && buttonWidth}>
+      width={!large_buttons && buttonWidth}
+    >
       {!large_buttons ? button : button.toUpperCase()}
     </Button>
   );
diff --git a/tgui/packages/tgui/interfaces/AnomalyRefinery.js b/tgui/packages/tgui/interfaces/AnomalyRefinery.js
index 4e793d45baa0..39daa8be88f9 100644
--- a/tgui/packages/tgui/interfaces/AnomalyRefinery.js
+++ b/tgui/packages/tgui/interfaces/AnomalyRefinery.js
@@ -22,7 +22,6 @@ export const AnomalyRefinery = (props, context) => {
   );
 };
 
-
 const AnomalyRefineryContent = (props, context) => {
   const { act, data } = useBackend(context);
   const [currentTab, changeTab] = useSharedState(context, 'exploderTab', 1);
@@ -39,7 +38,8 @@ const AnomalyRefineryContent = (props, context) => {
               textAlign="center"
               icon="eject"
               disabled={!core || active}
-              onClick={() => act('eject_core')}>
+              onClick={() => act('eject_core')}
+            >
               {'Eject Core'}
             </Button>
           </Stack.Item>
@@ -48,7 +48,8 @@ const AnomalyRefineryContent = (props, context) => {
               fluid
               textAlign="center"
               icon={currentTab === 1 ? 'server' : 'compress-arrows-alt'}
-              onClick={() => changeTab(currentTab === 1 ? 2 : 1)}>
+              onClick={() => changeTab(currentTab === 1 ? 2 : 1)}
+            >
               {currentTab === 1 ? 'Run Simulations' : 'Implosion Control'}
             </Button>
           </Stack.Item>
@@ -58,7 +59,8 @@ const AnomalyRefineryContent = (props, context) => {
               textAlign="center"
               icon="eject"
               disabled={!valvePresent || active}
-              onClick={() => act('eject_bomb')}>
+              onClick={() => act('eject_bomb')}
+            >
               {'Eject Bomb'}
             </Button>
           </Stack.Item>
@@ -70,8 +72,8 @@ const AnomalyRefineryContent = (props, context) => {
 
 const CoreCompressorContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const { core, requiredRadius, gasList, valveReady, active, valvePresent }
-    = data;
+  const { core, requiredRadius, gasList, valveReady, active, valvePresent } =
+    data;
   return (
     <>
       <Stack.Item grow>
@@ -83,13 +85,17 @@ const CoreCompressorContent = (props, context) => {
               icon="compress-arrows-alt"
               backgroundColor="red"
               onClick={() => act('start_implosion')}
-              disabled={active || !valveReady || !core}>
+              disabled={active || !valveReady || !core}
+            >
               {'Implode Core'}
             </Button>
-          }>
+          }
+        >
           {!core && <Modal textAlign="center">{'No Core Inserted!'}</Modal>}
           <LabeledList>
-            <LabeledList.Item label={'Name'}>{core ? core : '-'}</LabeledList.Item>
+            <LabeledList.Item label={'Name'}>
+              {core ? core : '-'}
+            </LabeledList.Item>
             <LabeledList.Item label={'Required Radius'}>
               {requiredRadius
                 ? requiredRadius + ' tiles'
@@ -106,27 +112,31 @@ const CoreCompressorContent = (props, context) => {
             <Button
               disabled={!valveReady}
               icon="exchange-alt"
-              onClick={() => act('swap')}>
+              onClick={() => act('swap')}
+            >
               {'Swap Merging Order'}
             </Button>
-          }>
-          {!valvePresent && <Modal textAlign="center">{'No Bomb Inserted!'}</Modal>}
+          }
+        >
+          {!valvePresent && (
+            <Modal textAlign="center">{'No Bomb Inserted!'}</Modal>
+          )}
           <Stack align="center">
             <Stack.Item grow textAlign="center">
               <Box height={2} width="100%" bold>
-                {'Giver Tank ('
-              + (gasList[1].name ? gasList[1].name : 'Not Available')
-              + ')'}
+                {'Giver Tank (' +
+                  (gasList[1].name ? gasList[1].name : 'Not Available') +
+                  ')'}
               </Box>
               <Box height={2} width="100%">
                 {(gasList[1].total_moles
                   ? String(gasList[0].total_moles.toFixed(2))
-                  : '-')
-              + ' moles at '
-              + (gasList[1].total_moles
-                ? String(gasList[1].temperature.toFixed(2))
-                : '-')
-              + ' Kelvin'}
+                  : '-') +
+                  ' moles at ' +
+                  (gasList[1].total_moles
+                    ? String(gasList[1].temperature.toFixed(2))
+                    : '-') +
+                  ' Kelvin'}
               </Box>
               <Box height={2} width="100%">
                 {(gasList[1].total_moles
@@ -139,19 +149,19 @@ const CoreCompressorContent = (props, context) => {
             </Stack.Item>
             <Stack.Item grow textAlign="center">
               <Box height={2} width="100%" bold>
-                {'Target Tank ('
-              + (gasList[0].name ? gasList[0].name : 'Not Available')
-              + ')'}
+                {'Target Tank (' +
+                  (gasList[0].name ? gasList[0].name : 'Not Available') +
+                  ')'}
               </Box>
               <Box height={2} width="100%">
                 {(gasList[0].total_moles
                   ? String(gasList[0].total_moles.toFixed(2))
-                  : '-')
-              + ' moles at '
-              + (gasList[0].total_moles
-                ? String(gasList[0].temperature.toFixed(2))
-                : '-')
-              + ' Kelvin'}
+                  : '-') +
+                  ' moles at ' +
+                  (gasList[0].total_moles
+                    ? String(gasList[0].temperature.toFixed(2))
+                    : '-') +
+                  ' Kelvin'}
               </Box>
               <Box height={2} width="100%">
                 {(gasList[1].total_moles
@@ -180,16 +190,18 @@ const BombProcessorContent = (props, context) => {
               tooltip={
                 reactionIncrement === 0
                   ? 'Valve status: Closed'
-                  : 'Valve status: Open. Current reaction count:'
-                + (reactionIncrement)
+                  : 'Valve status: Open. Current reaction count:' +
+                    reactionIncrement
               }
               icon="vial"
               tooltipPosition="left"
               onClick={() => act('react')}
               textAlign="center"
               disabled={!gasList[0].total_moles || !gasList[1].total_moles}
-              content={reactionIncrement === 0 ? 'Open Valve' : 'React'} />
-          }>
+              content={reactionIncrement === 0 ? 'Open Valve' : 'React'}
+            />
+          }
+        >
           {!gasList[2].total_moles && (
             <Modal textAlign="center">{'No Gas Present'}</Modal>
           )}
@@ -204,8 +216,11 @@ const BombProcessorContent = (props, context) => {
                 fill
                 scrollable
                 title={
-                  individualGasmix.name ? individualGasmix.name : 'Not Available'
-                }>
+                  individualGasmix.name
+                    ? individualGasmix.name
+                    : 'Not Available'
+                }
+              >
                 {!individualGasmix.total_moles && (
                   <Modal textAlign="center">{'No Gas Present'}</Modal>
                 )}
diff --git a/tgui/packages/tgui/interfaces/AntagInfoBrainwashed.tsx b/tgui/packages/tgui/interfaces/AntagInfoBrainwashed.tsx
index 7b33922d4420..fcb02578c217 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoBrainwashed.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoBrainwashed.tsx
@@ -10,7 +10,7 @@ type Objective = {
   complete: BooleanLike;
   was_uncompleted: BooleanLike;
   reward: number;
-}
+};
 
 type Info = {
   objectives: Objective[];
@@ -18,19 +18,16 @@ type Info = {
 
 export const AntagInfoBrainwashed = () => {
   return (
-    <Window
-      width={400}
-      height={400}
-      theme="abductor">
-      <Window.Content
-        backgroundColor="#722e7d">
+    <Window width={400} height={400} theme="abductor">
+      <Window.Content backgroundColor="#722e7d">
         <Icon
           size={16}
           name="flushed"
           color="#3f1945"
           position="absolute"
           top="42%"
-          left="26%" />
+          left="26%"
+        />
         <Section fill>
           <Stack vertical fill textAlign="center">
             <Stack.Item fontFamily="Wingdings">
@@ -60,26 +57,24 @@ export const AntagInfoBrainwashed = () => {
 
 const ObjectivePrintout = (_, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    objectives,
-  } = data;
+  const { objectives } = data;
   return (
     <Stack fill vertical>
       <Stack.Item bold textColor="#61e4b9">
         Your current objectives:
       </Stack.Item>
       <Stack.Item textAlign="left">
-        {!objectives && "None!"
-        || objectives.map(objective => (
-          <>
-            <Stack.Item key={objective.count}>
-              {objective.count}. {objective.explanation}
-            </Stack.Item>
-            <Stack.Item bold textColor="red">
-              This Directive must be followed.
-            </Stack.Item>
-          </>
-        )) }
+        {(!objectives && 'None!') ||
+          objectives.map((objective) => (
+            <>
+              <Stack.Item key={objective.count}>
+                {objective.count}. {objective.explanation}
+              </Stack.Item>
+              <Stack.Item bold textColor="red">
+                This Directive must be followed.
+              </Stack.Item>
+            </>
+          ))}
       </Stack.Item>
     </Stack>
   );
diff --git a/tgui/packages/tgui/interfaces/AntagInfoBrother.tsx b/tgui/packages/tgui/interfaces/AntagInfoBrother.tsx
index d4a7c382d5ff..2a2305a67db9 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoBrother.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoBrother.tsx
@@ -10,7 +10,7 @@ type Objective = {
   complete: BooleanLike;
   was_uncompleted: BooleanLike;
   reward: number;
-}
+};
 
 type Info = {
   antag_name: string;
@@ -20,14 +20,9 @@ type Info = {
 
 export const AntagInfoBrother = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    antag_name,
-    brothers,
-  } = data;
+  const { antag_name, brothers } = data;
   return (
-    <Window
-      width={620}
-      height={250}>
+    <Window width={620} height={250}>
       <Window.Content>
         <Section scrollable fill>
           <Stack vertical>
@@ -46,21 +41,17 @@ export const AntagInfoBrother = (props, context) => {
 
 const ObjectivePrintout = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    objectives,
-  } = data;
+  const { objectives } = data;
   return (
     <Stack vertical>
-      <Stack.Item bold>
-        Your objectives:
-      </Stack.Item>
+      <Stack.Item bold>Your objectives:</Stack.Item>
       <Stack.Item>
-        {!objectives && "None!"
-        || objectives.map(objective => (
-          <Stack.Item key={objective.count}>
-            #{objective.count}: {objective.explanation}
-          </Stack.Item>
-        )) }
+        {(!objectives && 'None!') ||
+          objectives.map((objective) => (
+            <Stack.Item key={objective.count}>
+              #{objective.count}: {objective.explanation}
+            </Stack.Item>
+          ))}
       </Stack.Item>
     </Stack>
   );
diff --git a/tgui/packages/tgui/interfaces/AntagInfoChangeling.tsx b/tgui/packages/tgui/interfaces/AntagInfoChangeling.tsx
index e6ed41d59185..9d4eb17063bf 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoChangeling.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoChangeling.tsx
@@ -32,12 +32,12 @@ type Objective = {
   count: number;
   name: string;
   explanation: string;
-}
+};
 
 type Memory = {
   name: string;
   story: string;
-}
+};
 
 type Info = {
   hive_name: string;
@@ -48,21 +48,17 @@ type Info = {
 
 const ObjectivePrintout = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    objectives,
-  } = data;
+  const { objectives } = data;
   return (
     <Stack vertical>
-      <Stack.Item bold>
-        Your current objectives:
-      </Stack.Item>
+      <Stack.Item bold>Your current objectives:</Stack.Item>
       <Stack.Item>
-        {!objectives && "None!"
-        || objectives.map(objective => (
-          <Stack.Item key={objective.count}>
-            #{objective.count}: {objective.explanation}
-          </Stack.Item>
-        )) }
+        {(!objectives && 'None!') ||
+          objectives.map((objective) => (
+            <Stack.Item key={objective.count}>
+              #{objective.count}: {objective.explanation}
+            </Stack.Item>
+          ))}
       </Stack.Item>
     </Stack>
   );
@@ -70,23 +66,17 @@ const ObjectivePrintout = (props, context) => {
 
 const IntroductionSection = (props, context) => {
   const { act, data } = useBackend<Info>(context);
-  const {
-    hive_name,
-    objectives,
-  } = data;
+  const { hive_name, objectives } = data;
   return (
     <Section
       fill
       title="Intro"
-      scrollable={
-        !!objectives && objectives.length > 4
-      }>
+      scrollable={!!objectives && objectives.length > 4}
+    >
       <Stack vertical fill>
         <Stack.Item fontSize="25px">
           You are the Changeling from the
-          <span style={hivestyle}>
-            &ensp;{hive_name}
-          </span>.
+          <span style={hivestyle}>&ensp;{hive_name}</span>.
         </Stack.Item>
         <Stack.Item>
           <ObjectivePrintout />
@@ -105,27 +95,19 @@ const AbilitiesSection = (props, context) => {
           <Stack fill vertical>
             <Stack.Item basis={0} textColor="label" grow>
               Your
-              <span style={absorbstyle}>
-                &ensp;Absorb DNA
-              </span> ability
-              allows you to steal the DNA and memories of a victim.
-              Your
-              <span style={absorbstyle}>
-                &ensp;Extract DNA Sting
-              </span> ability
-              also steals the DNA of a victim, and is undetectable, but
-              does not grant you their memories or speech patterns.
+              <span style={absorbstyle}>&ensp;Absorb DNA</span> ability allows
+              you to steal the DNA and memories of a victim. Your
+              <span style={absorbstyle}>&ensp;Extract DNA Sting</span> ability
+              also steals the DNA of a victim, and is undetectable, but does not
+              grant you their memories or speech patterns.
             </Stack.Item>
             <Stack.Divider />
             <Stack.Item basis={0} textColor="label" grow>
               Your
-              <span style={revivestyle}>
-                &ensp;Reviving Stasis
-              </span> ability
+              <span style={revivestyle}>&ensp;Reviving Stasis</span> ability
               allows you to revive. It means nothing short of a complete body
-              destruction can stop you! Obviously, this is loud and
-              so should not be done in front of people you are not
-              planning on silencing.
+              destruction can stop you! Obviously, this is loud and so should
+              not be done in front of people you are not planning on silencing.
             </Stack.Item>
           </Stack>
         </Stack.Item>
@@ -134,24 +116,18 @@ const AbilitiesSection = (props, context) => {
           <Stack fill vertical>
             <Stack.Item basis={0} textColor="label" grow>
               Your
-              <span style={transformstyle}>
-                &ensp;Transform
-              </span> ability
-              allows you to change into the form of those you have
-              collected DNA from, lethally and nonlethally. It will
-              also mimic (NOT REAL CLOTHING) the clothing they were wearing
-              for every slot you have open.
+              <span style={transformstyle}>&ensp;Transform</span> ability allows
+              you to change into the form of those you have collected DNA from,
+              lethally and nonlethally. It will also mimic (NOT REAL CLOTHING)
+              the clothing they were wearing for every slot you have open.
             </Stack.Item>
             <Stack.Divider />
             <Stack.Item basis={0} textColor="label" grow>
               The
-              <span style={storestyle}>
-                &ensp;Cellular Emporium
-              </span> is
-              where you purchase more abilities beyond your starting kit.
-              You have 10 genetic points to spend on abilities and you are
-              able to readapt after absorbing a body, refunding your points
-              for different kits.
+              <span style={storestyle}>&ensp;Cellular Emporium</span> is where
+              you purchase more abilities beyond your starting kit. You have 10
+              genetic points to spend on abilities and you are able to readapt
+              after absorbing a body, refunding your points for different kits.
             </Stack.Item>
           </Stack>
         </Stack.Item>
@@ -162,14 +138,12 @@ const AbilitiesSection = (props, context) => {
 
 const MemoriesSection = (props, context) => {
   const { act, data } = useBackend<Info>(context);
-  const {
-    memories,
-    stolen_antag_info,
-  } = data;
-  const [
-    selectedMemory,
-    setSelectedMemory,
-  ] = useSharedState(context, "memory", !!memories && memories[0] || null);
+  const { memories, stolen_antag_info } = data;
+  const [selectedMemory, setSelectedMemory] = useSharedState(
+    context,
+    'memory',
+    (!!memories && memories[0]) || null,
+  );
   const memoryMap = {};
   for (const index in memories) {
     const memory = memories[index];
@@ -188,9 +162,11 @@ const MemoriesSection = (props, context) => {
             Absorbing targets allows
             you to collect their memories. They should
             help you impersonate your target!
-          `} />
-      }>
-      {!memories && (
+          `}
+        />
+      }
+    >
+      {(!memories && (
         <Box>
           {!stolen_antag_info && (
             <Dimmer mr="-100%" bold>
@@ -198,22 +174,19 @@ const MemoriesSection = (props, context) => {
             </Dimmer>
           )}
         </Box>
-      ) || (
+      )) || (
         <Stack vertical>
           <Stack.Item>
             <Dropdown
               width="100%"
               selected={selectedMemory?.name}
-              options={
-                memories.map(memory => {
-                  return memory.name;
-                })
-              }
-              onSelected={selected => setSelectedMemory(memoryMap[selected])} />
-          </Stack.Item>
-          <Stack.Item>
-            {!!selectedMemory && selectedMemory.story}
+              options={memories.map((memory) => {
+                return memory.name;
+              })}
+              onSelected={(selected) => setSelectedMemory(memoryMap[selected])}
+            />
           </Stack.Item>
+          <Stack.Item>{!!selectedMemory && selectedMemory.story}</Stack.Item>
         </Stack>
       )}
     </Section>
@@ -222,17 +195,14 @@ const MemoriesSection = (props, context) => {
 
 const VictimPatternsSection = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    stolen_antag_info,
-  } = data;
+  const { stolen_antag_info } = data;
   return (
     <Section
       fill
       scrollable={!!stolen_antag_info}
-      title="Additional Stolen Information">
-      {!!stolen_antag_info && (
-        stolen_antag_info
-      )}
+      title="Additional Stolen Information"
+    >
+      {!!stolen_antag_info && stolen_antag_info}
     </Section>
   );
 };
@@ -240,13 +210,12 @@ const VictimPatternsSection = (props, context) => {
 export const AntagInfoChangeling = (props, context) => {
   const { data } = useBackend<Info>(context);
   return (
-    <Window
-      width={620}
-      height={580}>
+    <Window width={620} height={580}>
       <Window.Content
         style={{
-          "backgroundImage": "none",
-        }}>
+          backgroundImage: 'none',
+        }}
+      >
         <Stack vertical fill>
           <Stack.Item maxHeight={13.2}>
             <IntroductionSection />
diff --git a/tgui/packages/tgui/interfaces/AntagInfoDemon.tsx b/tgui/packages/tgui/interfaces/AntagInfoDemon.tsx
index 7a9838f289a6..de866c3c01ba 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoDemon.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoDemon.tsx
@@ -18,7 +18,7 @@ type Objective = {
   complete: BooleanLike;
   was_uncompleted: BooleanLike;
   reward: number;
-}
+};
 
 type Info = {
   fluff: string;
@@ -28,18 +28,10 @@ type Info = {
 
 export const AntagInfoDemon = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    fluff,
-    objectives,
-    explain_attack,
-  } = data;
+  const { fluff, objectives, explain_attack } = data;
   return (
-    <Window
-      width={620}
-      height={356}
-      theme="syndicate">
-      <Window.Content
-        style={{ 'background-image': 'none' }}>
+    <Window width={620} height={356} theme="syndicate">
+      <Window.Content style={{ 'background-image': 'none' }}>
         <Stack fill>
           <Stack.Item>
             <DemonRunes />
@@ -49,7 +41,11 @@ export const AntagInfoDemon = (props, context) => {
               <Stack.Item grow>
                 <Section fill scrollable={objectives.length > 2}>
                   <Stack vertical>
-                    <Stack.Item textAlign="center" textColor="red" fontSize="20px">
+                    <Stack.Item
+                      textAlign="center"
+                      textColor="red"
+                      fontSize="20px"
+                    >
                       {fluff}
                     </Stack.Item>
                     <Stack.Item>
@@ -63,12 +59,12 @@ export const AntagInfoDemon = (props, context) => {
                   <Section fill title="Demonic Powers">
                     <Stack vertical>
                       <Stack.Item>
-                        <span style={jauntstyle}>Blood Jaunt:</span> You
-                        can dive in and out of blood to travel anywhere
-                        you need to be. You will gain a speed boost upon
-                        leaving the jaunt for surprise attacks. You can
-                        drag victims you have disabled through the blood,
-                        consuming them and restoring health.
+                        <span style={jauntstyle}>Blood Jaunt:</span> You can
+                        dive in and out of blood to travel anywhere you need to
+                        be. You will gain a speed boost upon leaving the jaunt
+                        for surprise attacks. You can drag victims you have
+                        disabled through the blood, consuming them and restoring
+                        health.
                       </Stack.Item>
                       <Stack.Divider />
                       <Stack.Item>
@@ -95,21 +91,19 @@ export const AntagInfoDemon = (props, context) => {
 
 const ObjectivePrintout = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    objectives,
-  } = data;
+  const { objectives } = data;
   return (
     <Stack vertical>
       <Stack.Item bold>
         It is in your nature to accomplish these goals:
       </Stack.Item>
       <Stack.Item>
-        {!objectives && "None!"
-        || objectives.map(objective => (
-          <Stack.Item fontSize="20px" key={objective.count}>
-            #{objective.count}: {objective.explanation}
-          </Stack.Item>
-        )) }
+        {(!objectives && 'None!') ||
+          objectives.map((objective) => (
+            <Stack.Item fontSize="20px" key={objective.count}>
+              #{objective.count}: {objective.explanation}
+            </Stack.Item>
+          ))}
       </Stack.Item>
     </Stack>
   );
@@ -117,15 +111,12 @@ const ObjectivePrintout = (props, context) => {
 
 const DemonRunes = (props, context) => {
   return (
-    <Section
-      height="102%"
-      mt="-6px"
-      fill>
+    <Section height="102%" mt="-6px" fill>
       {/*
       shoutout to my boy Yuktopus from Crash Bandicoot: Crash of the Titans.
       Damn, that was such a good game.
       */}
-      <Box className="HellishRunes__demonrune" >
+      <Box className="HellishRunes__demonrune">
         Y<br />U<br />K<br />T<br />O<br />P<br />U<br />S<br />
         Y<br />U<br />K<br />T<br />O<br />P<br />U<br />S<br />
         Y<br />U<br />K<br />T<br />O<br />P<br />U<br />S<br />
diff --git a/tgui/packages/tgui/interfaces/AntagInfoGangmember.tsx b/tgui/packages/tgui/interfaces/AntagInfoGangmember.tsx
index 5b0e09c286c3..f27e8e3fddd8 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoGangmember.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoGangmember.tsx
@@ -11,28 +11,23 @@ type Info = {
 
 export const AntagInfoGangmember = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    gang_name,
-    antag_name,
-  } = data;
+  const { gang_name, antag_name } = data;
   return (
-    <Window
-      width={620}
-      height={500}>
+    <Window width={620} height={500}>
       <Window.Content
         style={{
           'background-image': 'none',
-        }}>
+        }}
+      >
         <Section fill>
           <Stack vertical>
             <Stack.Item textColor="red" fontSize="20px">
               {gang_name} for life! You are a {antag_name}!
             </Stack.Item>
             <Stack.Item fontSize="18px">
-              As a gang member, support your family above all!
-              Tag turf with a spraycan, wear your family&apos;s clothes,
-              induct new members with induction packages,
-              and accomplish your family objective.
+              As a gang member, support your family above all! Tag turf with a
+              spraycan, wear your family&apos;s clothes, induct new members with
+              induction packages, and accomplish your family objective.
             </Stack.Item>
             <Stack.Divider />
             <Stack.Item>
@@ -58,18 +53,13 @@ export const AntagInfoGangmember = (props, context) => {
 
 const GangClothesPrintout = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    gang_name,
-    gang_clothes,
-  } = data;
+  const { gang_name, gang_clothes } = data;
   return (
     <Stack vertical>
       <Stack.Item>
         <Stack>
           <Stack.Item mt={0.5} mb={1}>
-            <Icon
-              size={2}
-              name="tshirt" />
+            <Icon size={2} name="tshirt" />
           </Stack.Item>
           <Stack.Item bold>
             Wear the following to represent the {gang_name}:
@@ -77,15 +67,11 @@ const GangClothesPrintout = (props, context) => {
         </Stack>
       </Stack.Item>
       <BlockQuote>
-        {gang_clothes && gang_clothes.length ? (
-          gang_clothes.map(clothes_item => (
-            <Stack.Item key={clothes_item}>
-              - {clothes_item}
-            </Stack.Item>
-          ))
-        ) : (
-          "- Anything!"
-        )}
+        {gang_clothes && gang_clothes.length
+          ? gang_clothes.map((clothes_item) => (
+              <Stack.Item key={clothes_item}>- {clothes_item}</Stack.Item>
+            ))
+          : '- Anything!'}
       </BlockQuote>
     </Stack>
   );
@@ -97,9 +83,7 @@ const GangPhonePrintout = () => {
       <Stack.Item>
         <Stack>
           <Stack.Item mt={0.5}>
-            <Icon
-              size={2}
-              name="phone" />
+            <Icon size={2} name="phone" />
           </Stack.Item>
           <Stack.Item bold>
             You were given a cell phone with your induction package!
@@ -108,28 +92,24 @@ const GangPhonePrintout = () => {
       </Stack.Item>
       <Stack.Item>
         <BlockQuote>
-          Use it in hand to activate it, then speak into it to talk with
-          your other family members.
+          Use it in hand to activate it, then speak into it to talk with your
+          other family members.
         </BlockQuote>
       </Stack.Item>
     </Stack>
   );
 };
 
-
 const GangObjectivePrintout = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    gang_objective,
-  } = data;
+  const { gang_objective } = data;
   return (
     <Stack vertical>
       <Stack.Item bold fontSize="16px">
         Your family&apos;s goal:
       </Stack.Item>
       <Stack.Item>
-        {gang_objective
-          || "No objective set! This is a problem!"}
+        {gang_objective || 'No objective set! This is a problem!'}
       </Stack.Item>
     </Stack>
   );
diff --git a/tgui/packages/tgui/interfaces/AntagInfoGeneric.tsx b/tgui/packages/tgui/interfaces/AntagInfoGeneric.tsx
index a07848d24bcd..a4941f8aa04a 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoGeneric.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoGeneric.tsx
@@ -10,7 +10,7 @@ type Objective = {
   complete: BooleanLike;
   was_uncompleted: BooleanLike;
   reward: number;
-}
+};
 
 type Info = {
   antag_name: string;
@@ -19,13 +19,9 @@ type Info = {
 
 export const AntagInfoGeneric = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    antag_name,
-  } = data;
+  const { antag_name } = data;
   return (
-    <Window
-      width={620}
-      height={250}>
+    <Window width={620} height={250}>
       <Window.Content>
         <Section scrollable fill>
           <Stack vertical>
@@ -44,21 +40,17 @@ export const AntagInfoGeneric = (props, context) => {
 
 const ObjectivePrintout = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    objectives,
-  } = data;
+  const { objectives } = data;
   return (
     <Stack vertical>
-      <Stack.Item bold>
-        Your objectives:
-      </Stack.Item>
+      <Stack.Item bold>Your objectives:</Stack.Item>
       <Stack.Item>
-        {!objectives && "None!"
-        || objectives.map(objective => (
-          <Stack.Item key={objective.count}>
-            #{objective.count}: {objective.explanation}
-          </Stack.Item>
-        )) }
+        {(!objectives && 'None!') ||
+          objectives.map((objective) => (
+            <Stack.Item key={objective.count}>
+              #{objective.count}: {objective.explanation}
+            </Stack.Item>
+          ))}
       </Stack.Item>
     </Stack>
   );
diff --git a/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx b/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx
index 29f3ea6c2eee..c102752f97c0 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx
@@ -36,18 +36,18 @@ type Knowledge = {
   disabled: boolean;
   hereticPath: string;
   color: string;
-}
+};
 
 type KnowledgeInfo = {
   learnableKnowledge: Knowledge[];
   learnedKnowledge: Knowledge[];
-}
+};
 
 type Objective = {
   count: number;
   name: string;
   explanation: string;
-}
+};
 
 type Info = {
   charges: number;
@@ -58,10 +58,7 @@ type Info = {
 
 const IntroductionSection = () => {
   return (
-    <Stack
-      justify="space-evenly"
-      height="100%"
-      width="100%">
+    <Stack justify="space-evenly" height="100%" width="100%">
       <Stack.Item grow>
         <Section title="You are the Heretic!" fill fontSize="14px">
           <Stack vertical>
@@ -92,8 +89,8 @@ const FlavorSection = () => {
             <span style={hereticBlue}>shimmer</span>
             &nbsp;around you, as a realization of something&nbsp;
             <span style={hereticRed}>strange</span>
-            &nbsp;in the air unfolds. You look inwards and
-            discover something that will change your life.
+            &nbsp;in the air unfolds. You look inwards and discover something
+            that will change your life.
           </i>
         </Stack.Item>
         <Stack.Item>
@@ -116,18 +113,17 @@ const GuideSection = () => {
           <span style={hereticPurple}>influences</span>
           &nbsp;around the station invisible to the normal eye and&nbsp;
           <b>right click</b> on them to harvest them for&nbsp;
-          <span style={hereticBlue}>knowledge points</span>.
-          Tapping them makes them visible to all after a short time.
+          <span style={hereticBlue}>knowledge points</span>. Tapping them makes
+          them visible to all after a short time.
         </Stack.Item>
         <Stack.Item>
           - Use your&nbsp;
           <span style={hereticRed}>Living Heart action</span>
           &nbsp;to track down&nbsp;
-          <span style={hereticRed}>sacrifice targets</span>,
-          but be careful: Pulsing it will produce a
-          heartbeat sound that nearby people may hear. This action
-          is tied to your <b>heart</b> - if you lose it,
-          you must complete a ritual to regain it.
+          <span style={hereticRed}>sacrifice targets</span>, but be careful:
+          Pulsing it will produce a heartbeat sound that nearby people may hear.
+          This action is tied to your <b>heart</b> - if you lose it, you must
+          complete a ritual to regain it.
         </Stack.Item>
         <Stack.Item>
           - Draw a&nbsp;
@@ -138,18 +134,18 @@ const GuideSection = () => {
           rituals and sacrifices.
         </Stack.Item>
         <Stack.Item>
-          - Follow your <span style={hereticRed}>Living Heart</span> to
-          find your targets. Bring them back to a&nbsp;
+          - Follow your <span style={hereticRed}>Living Heart</span> to find
+          your targets. Bring them back to a&nbsp;
           <span style={hereticGreen}>transmutation rune</span> to&nbsp;
           <span style={hereticRed}>sacrifice</span> them for&nbsp;
-          <span style={hereticBlue}>knowledge points</span>.
-          The Mansus <b>ONLY</b> accepts targets pointed to by the&nbsp;
+          <span style={hereticBlue}>knowledge points</span>. The Mansus{' '}
+          <b>ONLY</b> accepts targets pointed to by the&nbsp;
           <span style={hereticRed}>Living Heart</span>.
         </Stack.Item>
         <Stack.Item>
-          - Accomplish all of your objectives to be able to learn
-          the <span style={hereticYellow}>final ritual</span>. Complete
-          the ritual to become all powerful!
+          - Accomplish all of your objectives to be able to learn the{' '}
+          <span style={hereticYellow}>final ritual</span>. Complete the ritual
+          to become all powerful!
         </Stack.Item>
       </Stack>
     </Stack.Item>
@@ -158,29 +154,29 @@ const GuideSection = () => {
 
 const InformationSection = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    charges,
-    total_sacrifices,
-    ascended,
-  } = data;
+  const { charges, total_sacrifices, ascended } = data;
   return (
     <Stack.Item>
       <Stack vertical fill>
         {!!ascended && (
           <Stack.Item>
             <Stack align="center">
-              <Stack.Item>
-                You have
-              </Stack.Item>
+              <Stack.Item>You have</Stack.Item>
               <Stack.Item fontSize="24px">
-                <Box inline color="yellow">ASCENDED</Box>!
+                <Box inline color="yellow">
+                  ASCENDED
+                </Box>
+                !
               </Stack.Item>
             </Stack>
           </Stack.Item>
         )}
         <Stack.Item>
           You have <b>{charges || 0}</b>&nbsp;
-          <span style={hereticBlue}>knowledge point{charges !== 1 ? "s":""}</span>.
+          <span style={hereticBlue}>
+            knowledge point{charges !== 1 ? 's' : ''}
+          </span>
+          .
         </Stack.Item>
         <Stack.Item>
           You have made a total of&nbsp;
@@ -194,9 +190,7 @@ const InformationSection = (props, context) => {
 
 const ObjectivePrintout = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    objectives,
-  } = data;
+  const { objectives } = data;
   return (
     <Stack.Item>
       <Stack vertical fill>
@@ -204,12 +198,12 @@ const ObjectivePrintout = (props, context) => {
           In order to ascend, you have these tasks to fulfill:
         </Stack.Item>
         <Stack.Item>
-          {!objectives && "None!"
-          || objectives.map(objective => (
-            <Stack.Item key={objective.count}>
-              {objective.count}: {objective.explanation}
-            </Stack.Item>
-          )) }
+          {(!objectives && 'None!') ||
+            objectives.map((objective) => (
+              <Stack.Item key={objective.count}>
+                {objective.count}: {objective.explanation}
+              </Stack.Item>
+            ))}
         </Stack.Item>
       </Stack>
     </Stack.Item>
@@ -218,27 +212,23 @@ const ObjectivePrintout = (props, context) => {
 
 const ResearchedKnowledge = (props, context) => {
   const { data } = useBackend<KnowledgeInfo>(context);
-  const {
-    learnedKnowledge,
-  } = data;
+  const { learnedKnowledge } = data;
 
   return (
     <Stack.Item grow>
-      <Section
-        title="Researched Knowledge"
-        fill
-        scrollable>
+      <Section title="Researched Knowledge" fill scrollable>
         <Stack vertical>
-          {!learnedKnowledge.length && "None!"
-            || learnedKnowledge.map(learned => (
+          {(!learnedKnowledge.length && 'None!') ||
+            learnedKnowledge.map((learned) => (
               <Stack.Item key={learned.name}>
                 <Button
                   width="100%"
                   color={learned.color}
                   content={`${learned.hereticPath} - ${learned.name}`}
-                  tooltip={learned.desc} />
+                  tooltip={learned.desc}
+                />
               </Stack.Item>
-            )) }
+            ))}
         </Stack>
       </Section>
     </Stack.Item>
@@ -247,36 +237,34 @@ const ResearchedKnowledge = (props, context) => {
 
 const KnowledgeShop = (props, context) => {
   const { data, act } = useBackend<KnowledgeInfo>(context);
-  const {
-    learnableKnowledge,
-  } = data;
+  const { learnableKnowledge } = data;
 
   return (
     <Stack.Item grow>
-      <Section
-        title="Potential Knowledge"
-        fill
-        scrollable>
-        {!learnableKnowledge.length && "None!"
-          || learnableKnowledge.map(toLearn => (
+      <Section title="Potential Knowledge" fill scrollable>
+        {(!learnableKnowledge.length && 'None!') ||
+          learnableKnowledge.map((toLearn) => (
             <Stack.Item key={toLearn.name} mb={1}>
               <Button
                 width="100%"
                 color={toLearn.color}
                 disabled={toLearn.disabled}
-                content={`${toLearn.hereticPath} - ${toLearn.cost > 0
-                  ? `${toLearn.name}: ${toLearn.cost}
-                  point${toLearn.cost !== 1 ? "s":""}`
-                  : toLearn.name}`}
+                content={`${toLearn.hereticPath} - ${
+                  toLearn.cost > 0
+                    ? `${toLearn.name}: ${toLearn.cost}
+                  point${toLearn.cost !== 1 ? 's' : ''}`
+                    : toLearn.name
+                }`}
                 tooltip={toLearn.desc}
-                onClick={() => act("research", { path: toLearn.path })} />
+                onClick={() => act('research', { path: toLearn.path })}
+              />
               {!!toLearn.gainFlavor && (
                 <BlockQuote>
                   <i>{toLearn.gainFlavor}</i>
                 </BlockQuote>
               )}
             </Stack.Item>
-          )) }
+          ))}
       </Section>
     </Stack.Item>
   );
@@ -284,20 +272,18 @@ const KnowledgeShop = (props, context) => {
 
 const ResearchInfo = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    charges,
-  } = data;
+  const { charges } = data;
 
   return (
-    <Stack
-      justify="space-evenly"
-      height="100%"
-      width="100%">
+    <Stack justify="space-evenly" height="100%" width="100%">
       <Stack.Item grow>
         <Stack vertical height="100%">
           <Stack.Item fontSize="20px" textAlign="center">
             You have <b>{charges || 0}</b>&nbsp;
-            <span style={hereticBlue}>knowledge point{charges !== 1 ? "s":""}</span> to spend.
+            <span style={hereticBlue}>
+              knowledge point{charges !== 1 ? 's' : ''}
+            </span>{' '}
+            to spend.
           </Stack.Item>
           <Stack.Item grow>
             <Stack height="100%">
@@ -311,54 +297,45 @@ const ResearchInfo = (props, context) => {
   );
 };
 
-
 export const AntagInfoHeretic = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    ascended,
-  } = data;
+  const { ascended } = data;
 
-  const [
-    currentTab,
-    setTab,
-  ] = useLocalState(context, 'currentTab', 0);
+  const [currentTab, setTab] = useLocalState(context, 'currentTab', 0);
 
   return (
-    <Window
-      width={675}
-      height={600}>
+    <Window width={675} height={600}>
       <Window.Content
         style={{
           // 'font-family': 'Times New Roman',
           // 'fontSize': '20px',
-          "background-image": "none",
-          "background": ascended
-            ? "radial-gradient(circle, rgba(24,9,9,1) 54%, rgba(31,10,10,1) 60%, rgba(46,11,11,1) 80%, rgba(47,14,14,1) 100%);"
-            : "radial-gradient(circle, rgba(9,9,24,1) 54%, rgba(10,10,31,1) 60%, rgba(21,11,46,1) 80%, rgba(24,14,47,1) 100%);",
-        }}>
+          'background-image': 'none',
+          background: ascended
+            ? 'radial-gradient(circle, rgba(24,9,9,1) 54%, rgba(31,10,10,1) 60%, rgba(46,11,11,1) 80%, rgba(47,14,14,1) 100%);'
+            : 'radial-gradient(circle, rgba(9,9,24,1) 54%, rgba(10,10,31,1) 60%, rgba(21,11,46,1) 80%, rgba(24,14,47,1) 100%);',
+        }}
+      >
         <Stack vertical fill>
           <Stack.Item>
             <Tabs fluid>
               <Tabs.Tab
                 icon="info"
                 selected={currentTab === 0}
-                onClick={() => setTab(0)}>
+                onClick={() => setTab(0)}
+              >
                 Information
               </Tabs.Tab>
               <Tabs.Tab
-                icon={currentTab === 1 ? "book-open":"book"}
+                icon={currentTab === 1 ? 'book-open' : 'book'}
                 selected={currentTab === 1}
-                onClick={() => setTab(1)}>
+                onClick={() => setTab(1)}
+              >
                 Research
               </Tabs.Tab>
             </Tabs>
           </Stack.Item>
           <Stack.Item grow>
-            {currentTab === 0 && (
-              <IntroductionSection />
-            ) || (
-              <ResearchInfo />
-            )}
+            {(currentTab === 0 && <IntroductionSection />) || <ResearchInfo />}
           </Stack.Item>
         </Stack>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/AntagInfoMalf.tsx b/tgui/packages/tgui/interfaces/AntagInfoMalf.tsx
index bd48edf47b19..7d1a96234e0b 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoMalf.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoMalf.tsx
@@ -24,7 +24,7 @@ type Objective = {
   count: number;
   name: string;
   explanation: string;
-}
+};
 
 type Info = {
   has_codewords: BooleanLike;
@@ -41,21 +41,17 @@ type Info = {
 
 const ObjectivePrintout = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    objectives,
-  } = data;
+  const { objectives } = data;
   return (
     <Stack vertical>
-      <Stack.Item bold>
-        Your prime objectives:
-      </Stack.Item>
+      <Stack.Item bold>Your prime objectives:</Stack.Item>
       <Stack.Item>
-        {!objectives && "None!"
-        || objectives.map(objective => (
-          <Stack.Item key={objective.count}>
-            &#8805-{objective.count}: {objective.explanation}
-          </Stack.Item>
-        )) }
+        {(!objectives && 'None!') ||
+          objectives.map((objective) => (
+            <Stack.Item key={objective.count}>
+              &#8805-{objective.count}: {objective.explanation}
+            </Stack.Item>
+          ))}
       </Stack.Item>
     </Stack>
   );
@@ -63,15 +59,11 @@ const ObjectivePrintout = (props, context) => {
 
 const IntroductionSection = (props, context) => {
   const { act, data } = useBackend<Info>(context);
-  const {
-    intro,
-  } = data;
+  const { intro } = data;
   return (
     <Section fill title="Intro" scrollable>
       <Stack vertical fill>
-        <Stack.Item fontSize="25px">
-          {intro}
-        </Stack.Item>
+        <Stack.Item fontSize="25px">{intro}</Stack.Item>
         <Stack.Item grow>
           <ObjectivePrintout />
         </Stack.Item>
@@ -82,10 +74,7 @@ const IntroductionSection = (props, context) => {
 
 const FlavorSection = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    allies,
-    goal,
-  } = data;
+  const { allies, goal } = data;
   return (
     <Section
       fill
@@ -99,32 +88,38 @@ const FlavorSection = (props, context) => {
             This is a gameplay suggestion for bored ais.
             You don't have to follow it, unless you want some
             ideas for how to spend the round.`}
-          tooltipPosition="bottom-start">
+          tooltipPosition="bottom-start"
+        >
           Policy
         </Button>
-      }>
+      }
+    >
       <Stack vertical fill>
         <Stack.Item grow>
           <Stack fill vertical>
             <Stack.Item style={{ 'background-color': 'black' }}>
               <span style={goalstyle}>
-                System Integrity Report:<br />
+                System Integrity Report:
+                <br />
               </span>
               &gt;{goal}
             </Stack.Item>
             <Stack.Divider />
             <Stack.Item grow style={{ 'background-color': 'black' }}>
               <span style={allystyle}>
-                Morality Core Report:<br />
+                Morality Core Report:
+                <br />
               </span>
               &gt;{allies}
             </Stack.Item>
             <Stack.Divider />
             <Stack.Item style={{ 'background-color': 'black' }}>
               <span style={badstyle}>
-                Overall Sentience Coherence Grade: FAILING.<br />
+                Overall Sentience Coherence Grade: FAILING.
+                <br />
               </span>
-              &gt;Report to Nanotrasen?<br />
+              &gt;Report to Nanotrasen?
+              <br />
               &gt;&gt;N
             </Stack.Item>
           </Stack>
@@ -136,49 +131,38 @@ const FlavorSection = (props, context) => {
 
 const CodewordsSection = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    has_codewords,
-    phrases,
-    responses,
-  } = data;
+  const { has_codewords, phrases, responses } = data;
   return (
-    <Section
-      title="Codewords"
-      mb={!has_codewords && -1}>
+    <Section title="Codewords" mb={!has_codewords && -1}>
       <Stack fill>
-        {!has_codewords && (
+        {(!has_codewords && (
           <BlockQuote>
-            You have not been supplied the Syndicate codewords.
-            You will have to use alternative methods to find potential allies.
-            Proceed with caution, however, as everyone is a potential foe.
+            You have not been supplied the Syndicate codewords. You will have to
+            use alternative methods to find potential allies. Proceed with
+            caution, however, as everyone is a potential foe.
           </BlockQuote>
-        ) || (
+        )) || (
           <>
             <Stack.Item grow basis={0}>
               <BlockQuote>
                 New access to restricted channels has provided you with
-                intercepted syndicate codewords. Syndicate agents will
-                respond as if you&apos;re one of their own.
-                Proceed with caution, however, as everyone is a potential
-                foe.
+                intercepted syndicate codewords. Syndicate agents will respond
+                as if you&apos;re one of their own. Proceed with caution,
+                however, as everyone is a potential foe.
                 <span style={badstyle}>
-                  &ensp;The speech recognition subsystem has been
-                  configured to flag these codewords.
+                  &ensp;The speech recognition subsystem has been configured to
+                  flag these codewords.
                 </span>
               </BlockQuote>
             </Stack.Item>
             <Stack.Divider mr={1} />
             <Stack.Item grow basis={0}>
               <Stack vertical>
-                <Stack.Item>
-                  Code Phrases:
-                </Stack.Item>
+                <Stack.Item>Code Phrases:</Stack.Item>
                 <Stack.Item bold textColor="blue">
                   {phrases}
                 </Stack.Item>
-                <Stack.Item>
-                  Code Responses:
-                </Stack.Item>
+                <Stack.Item>Code Responses:</Stack.Item>
                 <Stack.Item bold textColor="red">
                   {responses}
                 </Stack.Item>
@@ -193,14 +177,12 @@ const CodewordsSection = (props, context) => {
 
 export const AntagInfoMalf = (props, context) => {
   const { act, data } = useBackend<Info>(context);
-  const {
-    processingTime,
-    categories,
-  } = data;
-  const [
-    antagInfoTab,
-    setAntagInfoTab,
-  ] = useLocalState(context, 'antagInfoTab', 0);
+  const { processingTime, categories } = data;
+  const [antagInfoTab, setAntagInfoTab] = useLocalState(
+    context,
+    'antagInfoTab',
+    0,
+  );
   const categoriesList: string[] = [];
   const items: Item[] = [];
   for (let i = 0; i < categories.length; i++) {
@@ -222,9 +204,9 @@ export const AntagInfoMalf = (props, context) => {
     <Window
       width={660}
       height={530}
-      theme={antagInfoTab === 0 && "hackerman" || "malfunction"}>
-      <Window.Content
-        style={{ 'font-family': 'Consolas, monospace' }}>
+      theme={(antagInfoTab === 0 && 'hackerman') || 'malfunction'}
+    >
+      <Window.Content style={{ 'font-family': 'Consolas, monospace' }}>
         <Stack vertical fill>
           <Stack.Item>
             <Tabs fluid>
@@ -244,7 +226,7 @@ export const AntagInfoMalf = (props, context) => {
               </Tabs.Tab>
             </Tabs>
           </Stack.Item>
-          {antagInfoTab === 0 && (
+          {(antagInfoTab === 0 && (
             <>
               <Stack.Item grow>
                 <Stack fill>
@@ -260,14 +242,14 @@ export const AntagInfoMalf = (props, context) => {
                 <CodewordsSection />
               </Stack.Item>
             </>
-          ) || (
+          )) || (
             <Stack.Item>
               <Section>
                 <GenericUplink
                   categories={categoriesList}
                   items={items}
                   currency={`${processingTime} PT`}
-                  handleBuy={(item) => act("buy", { name: item.name })}
+                  handleBuy={(item) => act('buy', { name: item.name })}
                 />
               </Section>
             </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/AntagInfoMorph.tsx b/tgui/packages/tgui/interfaces/AntagInfoMorph.tsx
index 563058853162..eb594cf03606 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoMorph.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoMorph.tsx
@@ -15,36 +15,31 @@ const noticestyle = {
 
 export const AntagInfoMorph = (props, context) => {
   return (
-    <Window
-      width={620}
-      height={170}
-      theme="abductor">
+    <Window width={620} height={170} theme="abductor">
       <Window.Content>
         <Stack vertical fill>
-          <Stack.Item fontSize="25px">
-            You are a morph...
-          </Stack.Item>
+          <Stack.Item fontSize="25px">You are a morph...</Stack.Item>
           <Stack.Item>
             <BlockQuote>
-              ...a shapeshifting abomination that can eat almost anything.
-              You may take the form of anything you can
-              see by <span style={noticestyle}>shift-clicking</span> it.
+              ...a shapeshifting abomination that can eat almost anything. You
+              may take the form of anything you can see by{' '}
+              <span style={noticestyle}>shift-clicking</span> it.
               <span style={badstyle}>
                 &ensp;This process will alert any nearby observers.
-              </span> While morphed,
-              you move faster, but are unable to
-              attack creatures or eat anything.
-              In addition,
+              </span>{' '}
+              While morphed, you move faster, but are unable to attack creatures
+              or eat anything. In addition,
               <span style={badstyle}>
-                &ensp;anyone within three tiles will note an uncanny
-                wrongness if examining you.
-              </span> You can attack any item or dead
-              creature to consume it -
+                &ensp;anyone within three tiles will note an uncanny wrongness
+                if examining you.
+              </span>{' '}
+              You can attack any item or dead creature to consume it -
               <span style={goodstyle}>
                 &ensp;creatures will restore your health.
-              </span> Finally, you can restore yourself
-              to your original form while morphed
-              by <span style={noticestyle}>shift-clicking</span> yourself.
+              </span>{' '}
+              Finally, you can restore yourself to your original form while
+              morphed by <span style={noticestyle}>shift-clicking</span>{' '}
+              yourself.
             </BlockQuote>
           </Stack.Item>
         </Stack>
diff --git a/tgui/packages/tgui/interfaces/AntagInfoNightmare.tsx b/tgui/packages/tgui/interfaces/AntagInfoNightmare.tsx
index 18bebc8aa56e..327e114e2fd5 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoNightmare.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoNightmare.tsx
@@ -11,47 +11,37 @@ const noticestyle = {
 
 export const AntagInfoNightmare = (props, context) => {
   return (
-    <Window
-      width={620}
-      height={340}>
+    <Window width={620} height={340}>
       <Window.Content backgroundColor="#0d0d0d">
         <Stack fill>
           <Stack.Item width="46.2%">
             <Section fill>
               <Stack vertical fill>
-                <Stack.Item fontSize="25px">
-                  You are a Nightmare.
-                </Stack.Item>
+                <Stack.Item fontSize="25px">You are a Nightmare.</Stack.Item>
                 <Stack.Item>
                   <BlockQuote>
-                    You are a creature from beyond the stars that
-                    has incredibly strong powers in the darkness,
-                    becoming nigh unbeatable. Unfortunately, you
-                    wither and burn away in the light. You must use your
-                    <span style={noticestyle}>&ensp;light eater</span> to
-                    dim the station, making hunting easier.
+                    You are a creature from beyond the stars that has incredibly
+                    strong powers in the darkness, becoming nigh unbeatable.
+                    Unfortunately, you wither and burn away in the light. You
+                    must use your
+                    <span style={noticestyle}>&ensp;light eater</span> to dim
+                    the station, making hunting easier.
                   </BlockQuote>
                 </Stack.Item>
                 <Stack.Divider />
                 <Stack.Item textColor="label">
-                  <span style={tipstyle}>
-                    Tip #1:&ensp;
-                  </span>
-                  Move often. The station will be hunting you
-                  after you are discovered, so don&apos;t
-                  stay in one area for long.<br />
-                  <span style={tipstyle}>
-                    Tip #2:&ensp;
-                  </span>
-                  Pick unfair fights. You are incredibly strong
-                  in one versus one situations, use it. The more
-                  you fight, the harder it will be to keep it dark.<br />
-                  <span style={tipstyle}>
-                    Tip #3:&ensp;
-                  </span>
-                  Fully destroy APCs when possible. Instead of
-                  hunting lights that can be fixed, hunt the APCs
-                  which are harder to repair.
+                  <span style={tipstyle}>Tip #1:&ensp;</span>
+                  Move often. The station will be hunting you after you are
+                  discovered, so don&apos;t stay in one area for long.
+                  <br />
+                  <span style={tipstyle}>Tip #2:&ensp;</span>
+                  Pick unfair fights. You are incredibly strong in one versus
+                  one situations, use it. The more you fight, the harder it will
+                  be to keep it dark.
+                  <br />
+                  <span style={tipstyle}>Tip #3:&ensp;</span>
+                  Fully destroy APCs when possible. Instead of hunting lights
+                  that can be fixed, hunt the APCs which are harder to repair.
                 </Stack.Item>
               </Stack>
             </Section>
@@ -60,23 +50,20 @@ export const AntagInfoNightmare = (props, context) => {
             <Section fill title="Powers">
               <LabeledList>
                 <LabeledList.Item label="Shadow Dance">
-                  Whilst in the shadows, you are immune to all
-                  ranged attacks, whilst also rapidly regenerating
-                  health.
+                  Whilst in the shadows, you are immune to all ranged attacks,
+                  whilst also rapidly regenerating health.
                 </LabeledList.Item>
                 <LabeledList.Item label="Shadow Walk">
-                  You are allowed unlimited, unrestricted
-                  movement in the dark. Light will pull you out of this.
+                  You are allowed unlimited, unrestricted movement in the dark.
+                  Light will pull you out of this.
                 </LabeledList.Item>
                 <LabeledList.Item label="Heart of Darkness">
-                  Your heart invites the shadows. If you
-                  die in the darkness, you will eventually
-                  revive if left alone.
+                  Your heart invites the shadows. If you die in the darkness,
+                  you will eventually revive if left alone.
                 </LabeledList.Item>
                 <LabeledList.Item label="Light Eater">
-                  Your twisted appendage. It will consume
-                  the light of what it touches,
-                  be it victim or object.
+                  Your twisted appendage. It will consume the light of what it
+                  touches, be it victim or object.
                 </LabeledList.Item>
               </LabeledList>
             </Section>
diff --git a/tgui/packages/tgui/interfaces/AntagInfoSeparatist.tsx b/tgui/packages/tgui/interfaces/AntagInfoSeparatist.tsx
index 24aace7d50d2..d7f3843c318f 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoSeparatist.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoSeparatist.tsx
@@ -6,7 +6,7 @@ type Objective = {
   count: number;
   name: string;
   explanation: string;
-}
+};
 
 type Info = {
   objectives: Objective[];
@@ -16,13 +16,9 @@ type Info = {
 
 export const AntagInfoSeparatist = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    nationColor,
-  } = data;
+  const { nationColor } = data;
   return (
-    <Window
-      width={620}
-      height={450}>
+    <Window width={620} height={450}>
       <Window.Content backgroundColor={nationColor}>
         <Stack vertical fill>
           <Stack.Item grow>
@@ -39,9 +35,7 @@ export const AntagInfoSeparatist = (props, context) => {
 
 const IntroductionObjectives = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    nation,
-  } = data;
+  const { nation } = data;
   return (
     <Section fill>
       <Stack vertical>
@@ -58,9 +52,7 @@ const IntroductionObjectives = (props, context) => {
 
 const FrequentlyAskedQuestions = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    nation,
-  } = data;
+  const { nation } = data;
   return (
     <Section fill>
       <Stack vertical>
@@ -71,11 +63,11 @@ const FrequentlyAskedQuestions = (props, context) => {
           &quot;What even IS a Separatist?&quot;
         </Stack.Item>
         <Stack.Item>
-          Separatists are semi-antagonists that every department is filled
-          with when the round starts. They do not have the permission to
-          freely go about and kill, but rather defend the soverignity of
-          their department. You may actually recognize them by their
-          historical mode they existed from: Nations!
+          Separatists are semi-antagonists that every department is filled with
+          when the round starts. They do not have the permission to freely go
+          about and kill, but rather defend the soverignity of their department.
+          You may actually recognize them by their historical mode they existed
+          from: Nations!
         </Stack.Item>
         <Stack.Item fontSize="16px">
           &quot;What am I supposed to do?&quot;
@@ -83,17 +75,15 @@ const FrequentlyAskedQuestions = (props, context) => {
         <Stack.Item>
           Each department (nation) has an objective. It&apos;s a freeform
           objective, so try your best to follow it as you would a freeform
-          abductor objective. From experience, eventually nations conflict
-          and devolve into war. As long as both departments know what and
-          why conflict is starting, that&apos;s a green light to attack
-          opposing nations.
+          abductor objective. From experience, eventually nations conflict and
+          devolve into war. As long as both departments know what and why
+          conflict is starting, that&apos;s a green light to attack opposing
+          nations.
         </Stack.Item>
         <Stack.Item fontSize="16px">
           &quot;Is {nation} the best nation?&quot;
         </Stack.Item>
-        <Stack.Item>
-          Yes.
-        </Stack.Item>
+        <Stack.Item>Yes.</Stack.Item>
       </Stack>
     </Section>
   );
@@ -101,22 +91,17 @@ const FrequentlyAskedQuestions = (props, context) => {
 
 const ObjectivePrintout = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    nation,
-    objectives,
-  } = data;
+  const { nation, objectives } = data;
   return (
     <Stack vertical>
-      <Stack.Item bold>
-        {nation}&apos;s objectives:
-      </Stack.Item>
+      <Stack.Item bold>{nation}&apos;s objectives:</Stack.Item>
       <Stack.Item>
-        {!objectives && "None!"
-        || objectives.map(objective => (
-          <Stack.Item key={objective.count}>
-            #{objective.count}: {objective.explanation}
-          </Stack.Item>
-        )) }
+        {(!objectives && 'None!') ||
+          objectives.map((objective) => (
+            <Stack.Item key={objective.count}>
+              #{objective.count}: {objective.explanation}
+            </Stack.Item>
+          ))}
       </Stack.Item>
     </Stack>
   );
diff --git a/tgui/packages/tgui/interfaces/AntagInfoThief.tsx b/tgui/packages/tgui/interfaces/AntagInfoThief.tsx
index f3ed4da39fce..905adb66d072 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoThief.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoThief.tsx
@@ -7,7 +7,7 @@ type Objective = {
   count: number;
   name: string;
   explanation: string;
-}
+};
 
 type Info = {
   objectives: Objective[];
@@ -20,16 +20,9 @@ type Info = {
 
 export const AntagInfoThief = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    intro,
-    goal,
-    hideout,
-    policy,
-  } = data;
+  const { intro, goal, hideout, policy } = data;
   return (
-    <Window
-      width={620}
-      height={340}>
+    <Window width={620} height={340}>
       <Window.Content>
         <Stack vertical fill>
           <Stack.Item grow>
@@ -38,9 +31,7 @@ export const AntagInfoThief = (props, context) => {
                 <Stack.Item textColor="red" fontSize="20px">
                   {intro}
                 </Stack.Item>
-                <Stack.Item>
-                  {goal}
-                </Stack.Item>
+                <Stack.Item>{goal}</Stack.Item>
                 <Stack.Item>
                   <ObjectivePrintout />
                 </Stack.Item>
@@ -72,21 +63,17 @@ export const AntagInfoThief = (props, context) => {
 
 const ObjectivePrintout = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    objectives,
-  } = data;
+  const { objectives } = data;
   return (
     <Stack vertical>
-      <Stack.Item bold>
-        These are your heisting goals for today:
-      </Stack.Item>
+      <Stack.Item bold>These are your heisting goals for today:</Stack.Item>
       <Stack.Item>
-        {!objectives && "None!"
-        || objectives.map(objective => (
-          <Stack.Item key={objective.count}>
-            #{objective.count}: {objective.explanation}
-          </Stack.Item>
-        )) }
+        {(!objectives && 'None!') ||
+          objectives.map((objective) => (
+            <Stack.Item key={objective.count}>
+              #{objective.count}: {objective.explanation}
+            </Stack.Item>
+          ))}
       </Stack.Item>
     </Stack>
   );
diff --git a/tgui/packages/tgui/interfaces/AntagInfoTraitor.tsx b/tgui/packages/tgui/interfaces/AntagInfoTraitor.tsx
index 4e8f881e9d5b..caa8650fe106 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoTraitor.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoTraitor.tsx
@@ -23,7 +23,7 @@ type Objective = {
   count: number;
   name: string;
   explanation: string;
-}
+};
 
 type Info = {
   has_codewords: BooleanLike;
@@ -43,21 +43,17 @@ type Info = {
 
 const ObjectivePrintout = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    objectives,
-  } = data;
+  const { objectives } = data;
   return (
     <Stack vertical>
-      <Stack.Item bold>
-        Your current objectives:
-      </Stack.Item>
+      <Stack.Item bold>Your current objectives:</Stack.Item>
       <Stack.Item>
-        {!objectives && "None!"
-        || objectives.map(objective => (
-          <Stack.Item key={objective.count}>
-            #{objective.count}: {objective.explanation}
-          </Stack.Item>
-        )) }
+        {(!objectives && 'None!') ||
+          objectives.map((objective) => (
+            <Stack.Item key={objective.count}>
+              #{objective.count}: {objective.explanation}
+            </Stack.Item>
+          ))}
       </Stack.Item>
     </Stack>
   );
@@ -65,15 +61,11 @@ const ObjectivePrintout = (props, context) => {
 
 const IntroductionSection = (props, context) => {
   const { act, data } = useBackend<Info>(context);
-  const {
-    intro,
-  } = data;
+  const { intro } = data;
   return (
     <Section fill title="Intro" scrollable>
       <Stack vertical fill>
-        <Stack.Item fontSize="25px">
-          {intro}
-        </Stack.Item>
+        <Stack.Item fontSize="25px">{intro}</Stack.Item>
         <Stack.Item grow>
           <ObjectivePrintout />
         </Stack.Item>
@@ -84,10 +76,7 @@ const IntroductionSection = (props, context) => {
 
 const EmployerSection = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    allies,
-    goal,
-  } = data;
+  const { allies, goal } = data;
   return (
     <Section
       fill
@@ -100,29 +89,29 @@ const EmployerSection = (props, context) => {
             This is a gameplay suggestion for bored traitors.
             You don't have to follow it, unless you want some
             ideas for how to spend the round.`}
-          tooltipPosition="bottom-start">
+          tooltipPosition="bottom-start"
+        >
           Policy
         </Button>
-      }>
+      }
+    >
       <Stack vertical fill>
         <Stack.Item grow>
           <Stack vertical>
             <Stack.Item>
               <span style={allystyle}>
-                Your allegiances:<br />
+                Your allegiances:
+                <br />
               </span>
-              <BlockQuote>
-                {allies}
-              </BlockQuote>
+              <BlockQuote>{allies}</BlockQuote>
             </Stack.Item>
             <Stack.Divider />
             <Stack.Item>
               <span style={goalstyle}>
-                Employer thoughts:<br />
+                Employer thoughts:
+                <br />
               </span>
-              <BlockQuote>
-                {goal}
-              </BlockQuote>
+              <BlockQuote>{goal}</BlockQuote>
             </Stack.Item>
           </Stack>
         </Stack.Item>
@@ -133,25 +122,18 @@ const EmployerSection = (props, context) => {
 
 const UplinkSection = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    has_uplink,
-    uplink_intro,
-    uplink_unlock_info,
-    code,
-    failsafe_code,
-  } = data;
+  const { has_uplink, uplink_intro, uplink_unlock_info, code, failsafe_code } =
+    data;
   return (
-    <Section
-      title="Uplink"
-      mb={!has_uplink && -1}>
+    <Section title="Uplink" mb={!has_uplink && -1}>
       <Stack fill>
-        {!has_uplink && (
+        {(!has_uplink && (
           <Dimmer>
             <Stack.Item fontSize="18px">
               You were not supplied with an uplink.
             </Stack.Item>
           </Dimmer>
-        ) || (
+        )) || (
           <>
             <Stack.Item bold>
               {uplink_intro}
@@ -162,9 +144,7 @@ const UplinkSection = (props, context) => {
             </Stack.Item>
             <Stack.Divider />
             <Stack.Item mt="1%">
-              <BlockQuote>
-                {uplink_unlock_info}
-              </BlockQuote>
+              <BlockQuote>{uplink_unlock_info}</BlockQuote>
             </Stack.Item>
           </>
         )}
@@ -175,49 +155,38 @@ const UplinkSection = (props, context) => {
 
 const CodewordsSection = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    has_codewords,
-    phrases,
-    responses,
-  } = data;
+  const { has_codewords, phrases, responses } = data;
   return (
-    <Section
-      title="Codewords"
-      mb={!has_codewords && -1}>
+    <Section title="Codewords" mb={!has_codewords && -1}>
       <Stack fill>
-        {!has_codewords && (
+        {(!has_codewords && (
           <BlockQuote>
-            You have not been supplied the Syndicate codewords.
-            You will have to use alternative methods to find potential allies.
-            Proceed with caution, however, as everyone is a potential foe.
+            You have not been supplied the Syndicate codewords. You will have to
+            use alternative methods to find potential allies. Proceed with
+            caution, however, as everyone is a potential foe.
           </BlockQuote>
-        ) || (
+        )) || (
           <>
             <Stack.Item grow basis={0}>
               <BlockQuote>
-                The Syndicate have provided you with the following
-                codewords to identify fellow agents. Use the codewords
-                during regular conversation to identify other agents.
-                Proceed with caution, however, as everyone is a
-                potential foe.
+                The Syndicate have provided you with the following codewords to
+                identify fellow agents. Use the codewords during regular
+                conversation to identify other agents. Proceed with caution,
+                however, as everyone is a potential foe.
                 <span style={badstyle}>
-                  &ensp;You have memorized the codewords, allowing you
-                  to recognise them when heard.
+                  &ensp;You have memorized the codewords, allowing you to
+                  recognise them when heard.
                 </span>
               </BlockQuote>
             </Stack.Item>
             <Stack.Divider mr={1} />
             <Stack.Item grow basis={0}>
               <Stack vertical>
-                <Stack.Item>
-                  Code Phrases:
-                </Stack.Item>
+                <Stack.Item>Code Phrases:</Stack.Item>
                 <Stack.Item bold textColor="blue">
                   {phrases}
                 </Stack.Item>
-                <Stack.Item>
-                  Code Responses:
-                </Stack.Item>
+                <Stack.Item>Code Responses:</Stack.Item>
                 <Stack.Item bold textColor="red">
                   {responses}
                 </Stack.Item>
@@ -232,14 +201,9 @@ const CodewordsSection = (props, context) => {
 
 export const AntagInfoTraitor = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    theme,
-  } = data;
+  const { theme } = data;
   return (
-    <Window
-      width={620}
-      height={580}
-      theme={theme}>
+    <Window width={620} height={580} theme={theme}>
       <Window.Content>
         <Stack vertical fill>
           <Stack.Item grow>
diff --git a/tgui/packages/tgui/interfaces/AntagInfoWizard.tsx b/tgui/packages/tgui/interfaces/AntagInfoWizard.tsx
index d33123b947af..eb4a23509643 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoWizard.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoWizard.tsx
@@ -38,7 +38,7 @@ type Objective = {
   complete: BooleanLike;
   was_uncompleted: BooleanLike;
   reward: number;
-}
+};
 
 type Info = {
   objectives: Objective[];
@@ -46,10 +46,7 @@ type Info = {
 
 export const AntagInfoWizard = (props, context) => {
   return (
-    <Window
-      width={620}
-      height={580}
-      theme="wizard">
+    <Window width={620} height={580} theme="wizard">
       <Window.Content>
         <Stack vertical fill>
           <Stack.Item grow>
@@ -68,26 +65,31 @@ export const AntagInfoWizard = (props, context) => {
             <Section fill title="Spellbook">
               <Stack vertical fill>
                 <Stack.Item>
-                  You have a spellbook which is bound to you. You can use it
-                  to choose a magical arsenal.<br />
+                  You have a spellbook which is bound to you. You can use it to
+                  choose a magical arsenal.
+                  <br />
                   <span style={destructionstyle}>
                     The deadly page has the offensive spells, to destroy your
                     enemies.
-                  </span><br />
+                  </span>
+                  <br />
                   <span style={defensestyle}>
                     The defensive page has defensive spells, to keep yourself
-                    alive. Remember, you may be powerful, but you are still
-                    only human.
-                  </span><br />
+                    alive. Remember, you may be powerful, but you are still only
+                    human.
+                  </span>
+                  <br />
                   <span style={transportstyle}>
                     The transport page has mobility spells, very important
                     aspect of staying alive and getting things done.
-                  </span><br />
+                  </span>
+                  <br />
                   <span style={summonstyle}>
                     The summoning page has summoning and other helpful spells
                     for not fighting alone. Careful, not every summon is on your
                     side.
-                  </span><br />
+                  </span>
+                  <br />
                   <span style={ritualstyle}>
                     The rituals page has powerful global effects, that will pit
                     the station against itself. Do mind that these are either
@@ -96,8 +98,8 @@ export const AntagInfoWizard = (props, context) => {
                 </Stack.Item>
                 <Stack.Item textColor="lightgreen">
                   (If you are unsure what to get or are new to the Federation,
-                  go to the &quot;Wizard Approved Loadouts&quot; section.
-                  There you will find some kits that work fairly well for new
+                  go to the &quot;Wizard Approved Loadouts&quot; section. There
+                  you will find some kits that work fairly well for new
                   wizards.)
                 </Stack.Item>
               </Stack>
@@ -107,13 +109,14 @@ export const AntagInfoWizard = (props, context) => {
             <Section title="Misc Gear">
               <Stack>
                 <Stack.Item>
-                  <span style={teleportstyle}>Teleport scroll:</span> 4
-                  uses to teleport wherever you want.
-                  You will not be able to come back to the den, so
-                  be sure you have everything ready before departing.<br />
-                  <span style={robestyle}>Wizard robes:</span> Used
-                  to cast most spells. Your spellbook will let
-                  you know which spells cannot be cast without a garb.
+                  <span style={teleportstyle}>Teleport scroll:</span> 4 uses to
+                  teleport wherever you want. You will not be able to come back
+                  to the den, so be sure you have everything ready before
+                  departing.
+                  <br />
+                  <span style={robestyle}>Wizard robes:</span> Used to cast most
+                  spells. Your spellbook will let you know which spells cannot
+                  be cast without a garb.
                 </Stack.Item>
               </Stack>
             </Section>
@@ -131,21 +134,19 @@ export const AntagInfoWizard = (props, context) => {
 
 const ObjectivePrintout = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    objectives,
-  } = data;
+  const { objectives } = data;
   return (
     <Stack vertical>
       <Stack.Item bold>
         The Space Wizards Federation has given you the following tasks:
       </Stack.Item>
       <Stack.Item>
-        {!objectives && "None!"
-        || objectives.map(objective => (
-          <Stack.Item key={objective.count}>
-            #{objective.count}: {objective.explanation}
-          </Stack.Item>
-        )) }
+        {(!objectives && 'None!') ||
+          objectives.map((objective) => (
+            <Stack.Item key={objective.count}>
+              #{objective.count}: {objective.explanation}
+            </Stack.Item>
+          ))}
       </Stack.Item>
     </Stack>
   );
diff --git a/tgui/packages/tgui/interfaces/Apc.js b/tgui/packages/tgui/interfaces/Apc.js
index 1ac2447b63da..468d3411f1e7 100644
--- a/tgui/packages/tgui/interfaces/Apc.js
+++ b/tgui/packages/tgui/interfaces/Apc.js
@@ -1,13 +1,18 @@
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../components';
+import {
+  Box,
+  Button,
+  LabeledList,
+  NoticeBox,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
 
 export const Apc = (props, context) => {
   return (
-    <Window
-      width={450}
-      height={432}>
+    <Window width={450} height={432}>
       <Window.Content>
         <ApcContent />
       </Window.Content>
@@ -59,27 +64,27 @@ const malfMap = {
 const ApcContent = (props, context) => {
   const { act, data } = useBackend(context);
   const locked = data.locked && !data.siliconUser;
-  const externalPowerStatus = powerStatusMap[data.externalPower]
-    || powerStatusMap[0];
-  const chargingStatus = powerStatusMap[data.chargingStatus]
-    || powerStatusMap[0];
+  const externalPowerStatus =
+    powerStatusMap[data.externalPower] || powerStatusMap[0];
+  const chargingStatus =
+    powerStatusMap[data.chargingStatus] || powerStatusMap[0];
   const channelArray = data.powerChannels || [];
   const malfStatus = malfMap[data.malfStatus] || malfMap[0];
   const adjustedCellChange = data.powerCellStatus / 100;
   if (data.failTime > 0) {
     return (
       <NoticeBox>
-        <b><h3>SYSTEM FAILURE</h3></b>
-        <i>
-          I/O regulators malfunction detected!
-          Waiting for system reboot...
-        </i>
+        <b>
+          <h3>SYSTEM FAILURE</h3>
+        </b>
+        <i>I/O regulators malfunction detected! Waiting for system reboot...</i>
         <br />
         Automatic reboot in {data.failTime} seconds...
         <Button
           icon="sync"
           content="Reboot Now"
-          onClick={() => act('reboot')} />
+          onClick={() => act('reboot')}
+        />
       </NoticeBox>
     );
   }
@@ -88,84 +93,94 @@ const ApcContent = (props, context) => {
       <InterfaceLockNoticeBox />
       <Section
         title="Power Status"
-        buttons={(
+        buttons={
           <Button
-            icon={data.mainLights ? "lightbulb" : "lightbulb-o"}
+            icon={data.mainLights ? 'lightbulb' : 'lightbulb-o'}
             content="Main Lights"
-            color={data.mainLights ? "green" : "red"}
+            color={data.mainLights ? 'green' : 'red'}
             onClick={() => act('main_lights')}
           />
-        )}
+        }
       >
         <LabeledList>
           <LabeledList.Item
             label="Main Breaker"
             color={externalPowerStatus.color}
-            buttons={(
+            buttons={
               <Button
                 icon={data.isOperating ? 'power-off' : 'times'}
                 content={data.isOperating ? 'On' : 'Off'}
                 selected={data.isOperating && !locked}
                 disabled={locked}
-                onClick={() => act('breaker')} />
-            )}>
+                onClick={() => act('breaker')}
+              />
+            }
+          >
             [ {externalPowerStatus.externalPowerText} ]
           </LabeledList.Item>
           <LabeledList.Item label="Power Cell">
-            <ProgressBar
-              color="good"
-              value={adjustedCellChange} />
+            <ProgressBar color="good" value={adjustedCellChange} />
           </LabeledList.Item>
           <LabeledList.Item
             label="Charge Mode"
             color={chargingStatus.color}
-            buttons={(
+            buttons={
               <Button
                 icon={data.chargeMode ? 'sync' : 'times'}
                 content={data.chargeMode ? 'Auto' : 'Off'}
                 disabled={locked}
-                onClick={() => act('charge')} />
-            )}>
+                onClick={() => act('charge')}
+              />
+            }
+          >
             [ {chargingStatus.chargingText} ]
           </LabeledList.Item>
         </LabeledList>
       </Section>
       <Section title="Power Channels">
         <LabeledList>
-          {channelArray.map(channel => {
+          {channelArray.map((channel) => {
             const { topicParams } = channel;
             return (
               <LabeledList.Item
                 key={channel.title}
                 label={channel.title}
-                buttons={(
+                buttons={
                   <>
-                    <Box inline mx={2}
-                      color={channel.status >= 2 ? 'good' : 'bad'}>
+                    <Box
+                      inline
+                      mx={2}
+                      color={channel.status >= 2 ? 'good' : 'bad'}
+                    >
                       {channel.status >= 2 ? 'On' : 'Off'}
                     </Box>
                     <Button
                       icon="sync"
                       content="Auto"
-                      selected={!locked && (
-                        channel.status === 1 || channel.status === 3
-                      )}
+                      selected={
+                        !locked &&
+                        (channel.status === 1 || channel.status === 3)
+                      }
                       disabled={locked}
-                      onClick={() => act('channel', topicParams.auto)} />
+                      onClick={() => act('channel', topicParams.auto)}
+                    />
                     <Button
                       icon="power-off"
                       content="On"
                       selected={!locked && channel.status === 2}
                       disabled={locked}
-                      onClick={() => act('channel', topicParams.on)} />
+                      onClick={() => act('channel', topicParams.on)}
+                    />
                     <Button
                       icon="times"
                       content="Off"
                       selected={!locked && channel.status === 0}
                       disabled={locked}
-                      onClick={() => act('channel', topicParams.off)} />
+                      onClick={() => act('channel', topicParams.off)}
+                    />
                   </>
-                )}>
+                }
+              >
                 {channel.powerLoad}
               </LabeledList.Item>
             );
@@ -177,54 +192,65 @@ const ApcContent = (props, context) => {
       </Section>
       <Section
         title="Misc"
-        buttons={!!data.siliconUser && (
-          <>
-            {!!data.malfStatus && (
+        buttons={
+          !!data.siliconUser && (
+            <>
+              {!!data.malfStatus && (
+                <Button
+                  icon={malfStatus.icon}
+                  content={malfStatus.content}
+                  color="bad"
+                  onClick={() => act(malfStatus.action)}
+                />
+              )}
               <Button
-                icon={malfStatus.icon}
-                content={malfStatus.content}
-                color="bad"
-                onClick={() => act(malfStatus.action)} />
-            )}
-            <Button
-              icon="lightbulb-o"
-              content="Overload"
-              onClick={() => act('overload')} />
-          </>
-        )}>
+                icon="lightbulb-o"
+                content="Overload"
+                onClick={() => act('overload')}
+              />
+            </>
+          )
+        }
+      >
         <LabeledList>
           <LabeledList.Item
             label="Cover Lock"
-            buttons={(
+            buttons={
               <Button
                 icon={data.coverLocked ? 'lock' : 'unlock'}
                 content={data.coverLocked ? 'Engaged' : 'Disengaged'}
                 disabled={locked}
-                onClick={() => act('cover')} />
-            )} />
+                onClick={() => act('cover')}
+              />
+            }
+          />
           <LabeledList.Item
             label="Emergency Lighting"
-            buttons={(
+            buttons={
               <Button
-                icon={data.emergencyLights ? "lightbulb" : "lightbulb-o"}
+                icon={data.emergencyLights ? 'lightbulb' : 'lightbulb-o'}
                 content={data.emergencyLights ? 'Enabled' : 'Disabled'}
                 width={6.6}
                 textAlign="left"
                 selected={data.emergencyLights}
                 disabled={locked}
-                onClick={() => act('emergency_lighting')} />
-            )} />
+                onClick={() => act('emergency_lighting')}
+              />
+            }
+          />
           <LabeledList.Item
             label="Night Shift Lighting"
-            buttons={(
+            buttons={
               <Button
-                icon={data.nightshiftLights ? "lightbulb" : "lightbulb-o"}
+                icon={data.nightshiftLights ? 'lightbulb' : 'lightbulb-o'}
                 content={data.nightshiftLights ? 'Enabled' : 'Disabled'}
                 width={6.6}
                 textAlign="left"
                 selected={data.nightshiftLights}
-                onClick={() => act('toggle_nightshift')} />
-            )} />
+                onClick={() => act('toggle_nightshift')}
+              />
+            }
+          />
         </LabeledList>
       </Section>
     </>
diff --git a/tgui/packages/tgui/interfaces/ApcControl.js b/tgui/packages/tgui/interfaces/ApcControl.js
index fd5ab9aff341..68e466875de1 100644
--- a/tgui/packages/tgui/interfaces/ApcControl.js
+++ b/tgui/packages/tgui/interfaces/ApcControl.js
@@ -9,16 +9,9 @@ import { AreaCharge, powerRank } from './PowerMonitor';
 export const ApcControl = (props, context) => {
   const { data } = useBackend(context);
   return (
-    <Window
-      title="APC Controller"
-      width={550}
-      height={500}>
-      {data.authenticated === 1 && (
-        <ApcLoggedIn />
-      )}
-      {data.authenticated === 0 && (
-        <ApcLoggedOut />
-      )}
+    <Window title="APC Controller" width={550} height={500}>
+      {data.authenticated === 1 && <ApcLoggedIn />}
+      {data.authenticated === 0 && <ApcLoggedOut />}
     </Window>
   );
 };
@@ -33,7 +26,8 @@ const ApcLoggedOut = (props, context) => {
         fluid
         color={emagged === 1 ? '' : 'good'}
         content={text}
-        onClick={() => act('log-in')} />
+        onClick={() => act('log-in')}
+      />
     </Window.Content>
   );
 };
@@ -41,10 +35,7 @@ const ApcLoggedOut = (props, context) => {
 const ApcLoggedIn = (props, context) => {
   const { act, data } = useBackend(context);
   const { restoring } = data;
-  const [
-    tabIndex,
-    setTabIndex,
-  ] = useLocalState(context, 'tab-index', 1);
+  const [tabIndex, setTabIndex] = useLocalState(context, 'tab-index', 1);
   return (
     <>
       <Tabs>
@@ -53,7 +44,8 @@ const ApcLoggedIn = (props, context) => {
           onClick={() => {
             setTabIndex(1);
             act('check-apcs');
-          }}>
+          }}
+        >
           APC Control Panel
         </Tabs.Tab>
         <Tabs.Tab
@@ -61,7 +53,8 @@ const ApcLoggedIn = (props, context) => {
           onClick={() => {
             setTabIndex(2);
             act('check-logs');
-          }}>
+          }}
+        >
           Log View Panel
         </Tabs.Tab>
       </Tabs>
@@ -94,14 +87,12 @@ const ApcLoggedIn = (props, context) => {
 
 const ControlPanel = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    emagged,
-    logging,
-  } = data;
-  const [
-    sortByField,
-    setSortByField,
-  ] = useLocalState(context, 'sortByField', null);
+  const { emagged, logging } = data;
+  const [sortByField, setSortByField] = useLocalState(
+    context,
+    'sortByField',
+    null,
+  );
   return (
     <Flex>
       <Flex.Item>
@@ -111,17 +102,18 @@ const ControlPanel = (props, context) => {
         <Button.Checkbox
           checked={sortByField === 'name'}
           content="Name"
-          onClick={() => setSortByField(sortByField !== 'name' && 'name')} />
+          onClick={() => setSortByField(sortByField !== 'name' && 'name')}
+        />
         <Button.Checkbox
           checked={sortByField === 'charge'}
           content="Charge"
-          onClick={() => setSortByField(
-            sortByField !== 'charge' && 'charge'
-          )} />
+          onClick={() => setSortByField(sortByField !== 'charge' && 'charge')}
+        />
         <Button.Checkbox
           checked={sortByField === 'draw'}
           content="Draw"
-          onClick={() => setSortByField(sortByField !== 'draw' && 'draw')} />
+          onClick={() => setSortByField(sortByField !== 'draw' && 'draw')}
+        />
       </Flex.Item>
       <Flex.Item grow={1} />
       <Flex.Item>
@@ -138,11 +130,7 @@ const ControlPanel = (props, context) => {
             />
           </>
         )}
-        <Button
-          color="bad"
-          content="Log Out"
-          onClick={() => act('log-out')}
-        />
+        <Button color="bad" content="Log Out" onClick={() => act('log-out')} />
       </Flex.Item>
     </Flex>
   );
@@ -151,9 +139,7 @@ const ControlPanel = (props, context) => {
 const ApcControlScene = (props, context) => {
   const { data, act } = useBackend(context);
 
-  const [
-    sortByField,
-  ] = useLocalState(context, 'sortByField', null);
+  const [sortByField] = useLocalState(context, 'sortByField', null);
 
   const apcs = flow([
     map((apc, i) => ({
@@ -161,24 +147,20 @@ const ApcControlScene = (props, context) => {
       // Generate a unique id
       id: apc.name + i,
     })),
-    sortByField === 'name' && sortBy(apc => apc.name),
-    sortByField === 'charge' && sortBy(apc => -apc.charge),
-    sortByField === 'draw' && sortBy(
-      apc => -powerRank(apc.load),
-      apc => -parseFloat(apc.load)),
+    sortByField === 'name' && sortBy((apc) => apc.name),
+    sortByField === 'charge' && sortBy((apc) => -apc.charge),
+    sortByField === 'draw' &&
+      sortBy(
+        (apc) => -powerRank(apc.load),
+        (apc) => -parseFloat(apc.load),
+      ),
   ])(data.apcs);
   return (
     <Table>
       <Table.Row header>
-        <Table.Cell>
-          On/Off
-        </Table.Cell>
-        <Table.Cell>
-          Area
-        </Table.Cell>
-        <Table.Cell collapsing>
-          Charge
-        </Table.Cell>
+        <Table.Cell>On/Off</Table.Cell>
+        <Table.Cell>Area</Table.Cell>
+        <Table.Cell collapsing>Charge</Table.Cell>
         <Table.Cell collapsing textAlign="right">
           Draw
         </Table.Cell>
@@ -193,35 +175,33 @@ const ApcControlScene = (props, context) => {
         </Table.Cell>
       </Table.Row>
       {apcs.map((apc, i) => (
-        <tr
-          key={apc.id}
-          className="Table__row  candystripe">
+        <tr key={apc.id} className="Table__row  candystripe">
           <td>
             <Button
               icon={apc.operating ? 'power-off' : 'times'}
               color={apc.operating ? 'good' : 'bad'}
-              onClick={() => act('breaker', {
-                ref: apc.ref,
-              })}
+              onClick={() =>
+                act('breaker', {
+                  ref: apc.ref,
+                })
+              }
             />
           </td>
           <td>
             <Button
-              onClick={() => act('access-apc', {
-                ref: apc.ref,
-              })}>
+              onClick={() =>
+                act('access-apc', {
+                  ref: apc.ref,
+                })
+              }
+            >
               {apc.name}
             </Button>
           </td>
           <td className="Table__cell text-right text-nowrap">
-            <AreaCharge
-              charging={apc.charging}
-              charge={apc.charge}
-            />
-          </td>
-          <td className="Table__cell text-right text-nowrap">
-            {apc.load}
+            <AreaCharge charging={apc.charging} charge={apc.charge} />
           </td>
+          <td className="Table__cell text-right text-nowrap">{apc.load}</td>
           <td className="Table__cell text-center text-nowrap">
             <AreaStatusColorButton
               target="equipment"
@@ -261,16 +241,12 @@ const LogPanel = (props, context) => {
       // Generate a unique id
       id: line.entry + i,
     })),
-    logs => logs.reverse(),
+    (logs) => logs.reverse(),
   ])(data.logs);
   return (
     <Box m={-0.5}>
-      {logs.map(line => (
-        <Box
-          p={0.5}
-          key={line.id}
-          className="candystripe"
-          bold>
+      {logs.map((line) => (
+        <Box p={0.5} key={line.id} className="candystripe" bold>
           {line.entry}
         </Box>
       ))}
@@ -278,7 +254,7 @@ const LogPanel = (props, context) => {
   );
 };
 
-const AreaStatusColorButton = props => {
+const AreaStatusColorButton = (props) => {
   const { target, status, apc, act } = props;
   const power = Boolean(status & 2);
   const mode = Boolean(status & 1);
@@ -286,20 +262,21 @@ const AreaStatusColorButton = props => {
     <Button
       icon={mode ? 'sync' : 'power-off'}
       color={power ? 'good' : 'bad'}
-      onClick={() => act('toggle-minor', {
-        type: target,
-        value: statusChange(status),
-        ref: apc.ref,
-      })}
+      onClick={() =>
+        act('toggle-minor', {
+          type: target,
+          value: statusChange(status),
+          ref: apc.ref,
+        })
+      }
     />
   );
 };
 
-const statusChange = status => {
+const statusChange = (status) => {
   // mode flip power flip both flip
   // 0, 2, 3
   return status === 0 ? 2 : status === 2 ? 3 : 0;
 };
 
 AreaStatusColorButton.defaultHooks = pureComponentHooks;
-
diff --git a/tgui/packages/tgui/interfaces/ApprenticeContract.tsx b/tgui/packages/tgui/interfaces/ApprenticeContract.tsx
index 333b4bc15606..99e2140b711a 100644
--- a/tgui/packages/tgui/interfaces/ApprenticeContract.tsx
+++ b/tgui/packages/tgui/interfaces/ApprenticeContract.tsx
@@ -6,16 +6,13 @@ import { Window } from '../layouts';
 
 export const ApprenticeContract = (props, context) => {
   return (
-    <Window
-      width={620}
-      height={600}
-      theme="wizard">
+    <Window width={620} height={600} theme="wizard">
       <Window.Content>
         <Stack vertical fill>
           <Stack.Item>
             <Section textColor="lightgreen" fontSize="15px">
-              If you cannot reach any of your apprentices today,
-              you can feed the contract back into your spellbook to refund it.
+              If you cannot reach any of your apprentices today, you can feed
+              the contract back into your spellbook to refund it.
             </Section>
           </Stack.Item>
           <Stack.Item grow>
@@ -27,7 +24,8 @@ export const ApprenticeContract = (props, context) => {
               blurb={multiline`
                 Your apprentice is skilled in offensive magic.
                 They know Magic Missile and Fireball.
-              `} />
+              `}
+            />
             <ApprenticeSelection
               iconName="route"
               fluffName="Student of Translocation"
@@ -37,7 +35,8 @@ export const ApprenticeContract = (props, context) => {
               Your apprentice is able to defy physics, melting through
               solid objects and travelling great distances in the
               blink of an eye. They know Teleport and Ethereal Jaunt.
-              `} />
+              `}
+            />
             <ApprenticeSelection
               iconName="medkit"
               fluffName="Neophyte of Restoration"
@@ -47,7 +46,8 @@ export const ApprenticeContract = (props, context) => {
               Your apprentice is training to cast spells that will
               aid your survival. They know Forcewall and Charge and
               come with a Staff of Healing.
-              `} />
+              `}
+            />
             <ApprenticeSelection
               iconName="user-secret"
               fluffName="Robeless Pupil"
@@ -56,7 +56,8 @@ export const ApprenticeContract = (props, context) => {
               blurb={multiline`
               Your apprentice is training to cast spells without
               their robes. They know Knock and Mindswap.
-              `} />
+              `}
+            />
           </Stack.Item>
         </Stack>
       </Window.Content>
@@ -66,13 +67,7 @@ export const ApprenticeContract = (props, context) => {
 
 const ApprenticeSelection = (props, context) => {
   const { act } = useBackend(context);
-  const {
-    iconName,
-    fluffName,
-    schoolTitle,
-    assetName,
-    blurb,
-  } = props;
+  const { iconName, fluffName, schoolTitle, assetName, blurb } = props;
   return (
     <Section>
       <Stack align="middle" fill>
@@ -82,17 +77,21 @@ const ApprenticeSelection = (props, context) => {
               <img
                 src={resolveAsset(assetName)}
                 style={{
-                  "border-style": "solid",
-                  "border-color": "#7e90a7",
-                }} />
+                  'border-style': 'solid',
+                  'border-color': '#7e90a7',
+                }}
+              />
             </Stack.Item>
             <Stack.Item>
               <Button
                 textAlign="center"
                 fluid
-                onClick={() => act('buy', {
-                  school: schoolTitle,
-                })}>
+                onClick={() =>
+                  act('buy', {
+                    school: schoolTitle,
+                  })
+                }
+              >
                 Select
               </Button>
             </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/Aquarium.js b/tgui/packages/tgui/interfaces/Aquarium.js
index 5758f8015360..074ae750fd9f 100644
--- a/tgui/packages/tgui/interfaces/Aquarium.js
+++ b/tgui/packages/tgui/interfaces/Aquarium.js
@@ -14,9 +14,7 @@ export const Aquarium = (props, context) => {
     allow_breeding,
   } = data;
   return (
-    <Window
-      width={500}
-      height={400}>
+    <Window width={500} height={400}>
       <Window.Content>
         <Section title="Aquarium Controls">
           <LabeledControls>
@@ -30,37 +28,43 @@ export const Aquarium = (props, context) => {
                 maxValue={maxTemperature}
                 step={1}
                 stepPixelSize={1}
-                onDrag={(e, value) => act('temperature', {
-                  temperature: value,
-                })} />
+                onDrag={(e, value) =>
+                  act('temperature', {
+                    temperature: value,
+                  })
+                }
+              />
             </LabeledControls.Item>
             <LabeledControls.Item label="Fluid">
               <Flex direction="column" mb={1}>
-                {fluidTypes.map(f => (
+                {fluidTypes.map((f) => (
                   <Flex.Item key={f}>
                     <Button
                       fluid
                       content={f}
                       selected={fluid_type === f}
-                      onClick={() => act('fluid', { fluid: f })} />
+                      onClick={() => act('fluid', { fluid: f })}
+                    />
                   </Flex.Item>
                 ))}
               </Flex>
             </LabeledControls.Item>
             <LabeledControls.Item label="Reproduction Prevention System">
               <Button
-                content={allow_breeding ? "Offline" : "Online"}
+                content={allow_breeding ? 'Offline' : 'Online'}
                 selected={!allow_breeding}
-                onClick={() => act('allow_breeding')} />
+                onClick={() => act('allow_breeding')}
+              />
             </LabeledControls.Item>
           </LabeledControls>
         </Section>
         <Section title="Contents">
-          {contents.map(movable => (
+          {contents.map((movable) => (
             <Button
               key={movable.ref}
               content={movable.name}
-              onClick={() => act('remove', { ref: movable.ref })} />
+              onClick={() => act('remove', { ref: movable.ref })}
+            />
           ))}
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/AtmosAlertConsole.js b/tgui/packages/tgui/interfaces/AtmosAlertConsole.js
index 87703884b53b..e1b79fa644bb 100644
--- a/tgui/packages/tgui/interfaces/AtmosAlertConsole.js
+++ b/tgui/packages/tgui/interfaces/AtmosAlertConsole.js
@@ -7,38 +7,34 @@ export const AtmosAlertConsole = (props, context) => {
   const priorityAlerts = data.priority || [];
   const minorAlerts = data.minor || [];
   return (
-    <Window
-      width={350}
-      height={300}>
+    <Window width={350} height={300}>
       <Window.Content scrollable>
         <Section title="Alarms">
           <ul>
             {priorityAlerts.length === 0 && (
-              <li className="color-good">
-                No Priority Alerts
-              </li>
+              <li className="color-good">No Priority Alerts</li>
             )}
-            {priorityAlerts.map(alert => (
+            {priorityAlerts.map((alert) => (
               <li key={alert}>
                 <Button
                   icon="times"
                   content={alert}
                   color="bad"
-                  onClick={() => act('clear', { zone: alert })} />
+                  onClick={() => act('clear', { zone: alert })}
+                />
               </li>
             ))}
             {minorAlerts.length === 0 && (
-              <li className="color-good">
-                No Minor Alerts
-              </li>
+              <li className="color-good">No Minor Alerts</li>
             )}
-            {minorAlerts.map(alert => (
+            {minorAlerts.map((alert) => (
               <li key={alert}>
                 <Button
                   icon="times"
                   content={alert}
                   color="average"
-                  onClick={() => act('clear', { zone: alert })} />
+                  onClick={() => act('clear', { zone: alert })}
+                />
               </li>
             ))}
           </ul>
diff --git a/tgui/packages/tgui/interfaces/AtmosControlConsole.tsx b/tgui/packages/tgui/interfaces/AtmosControlConsole.tsx
index 38232b228f61..90c39bacbd4b 100644
--- a/tgui/packages/tgui/interfaces/AtmosControlConsole.tsx
+++ b/tgui/packages/tgui/interfaces/AtmosControlConsole.tsx
@@ -31,10 +31,10 @@ export const AtmosControlConsole = (props, context) => {
   const [chamberId, setChamberId] = useLocalState(
     context,
     'chamberId',
-    chambers[0]?.id
+    chambers[0]?.id,
   );
-  const selectedChamber
-    = chambers.length === 1
+  const selectedChamber =
+    chambers.length === 1
       ? chambers[0]
       : chambers.find((chamber) => chamber.id === chamberId);
   return (
@@ -48,8 +48,10 @@ export const AtmosControlConsole = (props, context) => {
               selected={selectedChamber?.name}
               onSelected={(value) =>
                 setChamberId(
-                  chambers.find((chamber) => chamber.name === value)?.id
-                    || chambers[0].id)}
+                  chambers.find((chamber) => chamber.name === value)?.id ||
+                    chambers[0].id,
+                )
+              }
             />
           </Section>
         )}
@@ -61,11 +63,12 @@ export const AtmosControlConsole = (props, context) => {
                 icon="undo"
                 content="Reconnect"
                 onClick={() => act('reconnect')}
-              />)
-          }>
+              />
+            )
+          }
+        >
           {!!selectedChamber && !!selectedChamber.gasmix ? (
-            <GasmixParser
-              gasmix={selectedChamber.gasmix} />
+            <GasmixParser gasmix={selectedChamber.gasmix} />
           ) : (
             <Box italic> {'No Sensors Detected!'}</Box>
           )}
@@ -92,7 +95,8 @@ export const AtmosControlConsole = (props, context) => {
                         onClick={() =>
                           act('toggle_input', {
                             chamber: selectedChamber.id,
-                          })}
+                          })
+                        }
                       />
                     </LabeledList.Item>
                     <LabeledList.Item label="Input Rate">
@@ -109,7 +113,8 @@ export const AtmosControlConsole = (props, context) => {
                           act('adjust_input', {
                             chamber: selectedChamber.id,
                             rate: value,
-                          })}
+                          })
+                        }
                       />
                     </LabeledList.Item>
                   </LabeledList>
@@ -134,7 +139,8 @@ export const AtmosControlConsole = (props, context) => {
                         onClick={() =>
                           act('toggle_output', {
                             chamber: selectedChamber.id,
-                          })}
+                          })
+                        }
                       />
                     </LabeledList.Item>
                     <LabeledList.Item label="Output Pressure">
@@ -152,7 +158,8 @@ export const AtmosControlConsole = (props, context) => {
                           act('adjust_output', {
                             chamber: selectedChamber.id,
                             rate: value,
-                          })}
+                          })
+                        }
                       />
                     </LabeledList.Item>
                   </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/AtmosControlPanel.js b/tgui/packages/tgui/interfaces/AtmosControlPanel.js
index 3e2141c0fcff..952c04dc15a8 100644
--- a/tgui/packages/tgui/interfaces/AtmosControlPanel.js
+++ b/tgui/packages/tgui/interfaces/AtmosControlPanel.js
@@ -12,52 +12,38 @@ export const AtmosControlPanel = (props, context) => {
       // Generate a unique id
       id: group.area + i,
     })),
-    sortBy(group => group.id),
+    sortBy((group) => group.id),
   ])(data.excited_groups);
   return (
-    <Window
-      title="SSAir Control Panel"
-      width={900}
-      height={500}>
+    <Window title="SSAir Control Panel" width={900} height={500}>
       <Section m={1}>
-        <Flex
-          justify="space-between"
-          align="baseline">
+        <Flex justify="space-between" align="baseline">
           <Flex.Item>
             <Button
               onClick={() => act('toggle-freeze')}
-              color={data.frozen === 1 ? 'good' : 'bad'}>
-              {data.frozen === 1
-                ? 'Freeze Subsystem'
-                : 'Unfreeze Subsystem'}
+              color={data.frozen === 1 ? 'good' : 'bad'}
+            >
+              {data.frozen === 1 ? 'Freeze Subsystem' : 'Unfreeze Subsystem'}
             </Button>
           </Flex.Item>
-          <Flex.Item>
-            Fire Cnt: {data.fire_count}
-          </Flex.Item>
-          <Flex.Item>
-            Active Turfs: {data.active_size}
-          </Flex.Item>
-          <Flex.Item>
-            Excited Groups: {data.excited_size}
-          </Flex.Item>
-          <Flex.Item>
-            Hotspots: {data.hotspots_size}
-          </Flex.Item>
-          <Flex.Item>
-            Superconductors: {data.conducting_size}
-          </Flex.Item>
+          <Flex.Item>Fire Cnt: {data.fire_count}</Flex.Item>
+          <Flex.Item>Active Turfs: {data.active_size}</Flex.Item>
+          <Flex.Item>Excited Groups: {data.excited_size}</Flex.Item>
+          <Flex.Item>Hotspots: {data.hotspots_size}</Flex.Item>
+          <Flex.Item>Superconductors: {data.conducting_size}</Flex.Item>
           <Flex.Item>
             <Button.Checkbox
               checked={data.showing_user}
-              onClick={() => act('toggle_user_display')}>
+              onClick={() => act('toggle_user_display')}
+            >
               Personal View
             </Button.Checkbox>
           </Flex.Item>
           <Flex.Item>
             <Button.Checkbox
               checked={data.show_all}
-              onClick={() => act('toggle_show_all')}>
+              onClick={() => act('toggle_show_all')}
+            >
               Display all
             </Button.Checkbox>
           </Flex.Item>
@@ -68,52 +54,40 @@ export const AtmosControlPanel = (props, context) => {
           <Section>
             <Table>
               <Table.Row header>
-                <Table.Cell>
-                  Area Name
-                </Table.Cell>
+                <Table.Cell>Area Name</Table.Cell>
+                <Table.Cell collapsing>Breakdown</Table.Cell>
+                <Table.Cell collapsing>Dismantle</Table.Cell>
+                <Table.Cell collapsing>Turfs</Table.Cell>
                 <Table.Cell collapsing>
-                  Breakdown
-                </Table.Cell>
-                <Table.Cell collapsing>
-                  Dismantle
-                </Table.Cell>
-                <Table.Cell collapsing>
-                  Turfs
-                </Table.Cell>
-                <Table.Cell collapsing>
-                  {data.display_max === 1 && "Max Share"}
-                </Table.Cell>
-                <Table.Cell collapsing>
-                  Display
+                  {data.display_max === 1 && 'Max Share'}
                 </Table.Cell>
+                <Table.Cell collapsing>Display</Table.Cell>
               </Table.Row>
-              {groups.map(group => (
+              {groups.map((group) => (
                 <tr key={group.id}>
                   <td>
                     <Button
                       content={group.area}
-                      onClick={() => act('move-to-target', {
-                        spot: group.jump_to,
-                      })} />
-                  </td>
-                  <td>
-                    {group.breakdown}
-                  </td>
-                  <td>
-                    {group.dismantle}
-                  </td>
-                  <td>
-                    {group.size}
-                  </td>
-                  <td>
-                    {data.display_max === 1 && group.max_share}
+                      onClick={() =>
+                        act('move-to-target', {
+                          spot: group.jump_to,
+                        })
+                      }
+                    />
                   </td>
+                  <td>{group.breakdown}</td>
+                  <td>{group.dismantle}</td>
+                  <td>{group.size}</td>
+                  <td>{data.display_max === 1 && group.max_share}</td>
                   <td>
                     <Button.Checkbox
                       checked={group.should_show}
-                      onClick={() => act('toggle_show_group', {
-                        group: group.group,
-                      })} />
+                      onClick={() =>
+                        act('toggle_show_group', {
+                          group: group.group,
+                        })
+                      }
+                    />
                   </td>
                 </tr>
               ))}
diff --git a/tgui/packages/tgui/interfaces/AtmosFilter.js b/tgui/packages/tgui/interfaces/AtmosFilter.js
index eef3529f3b51..9900dedd2dc0 100644
--- a/tgui/packages/tgui/interfaces/AtmosFilter.js
+++ b/tgui/packages/tgui/interfaces/AtmosFilter.js
@@ -1,6 +1,12 @@
 import { useBackend } from '../backend';
 import { formatSiUnit } from '../format';
-import { Button, LabeledList, NumberInput, Section, ProgressBar } from '../components';
+import {
+  Button,
+  LabeledList,
+  NumberInput,
+  Section,
+  ProgressBar,
+} from '../components';
 import { getGasLabel } from '../constants';
 import { Window } from '../layouts';
 
@@ -8,9 +14,7 @@ export const AtmosFilter = (props, context) => {
   const { act, data } = useBackend(context);
   const filter_types = data.filter_types || [];
   return (
-    <Window
-      width={420}
-      height={249}>
+    <Window width={420} height={249}>
       <Window.Content>
         <Section>
           <LabeledList>
@@ -19,7 +23,8 @@ export const AtmosFilter = (props, context) => {
                 icon={data.on ? 'power-off' : 'times'}
                 content={data.on ? 'On' : 'Off'}
                 selected={data.on}
-                onClick={() => act('power')} />
+                onClick={() => act('power')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Transfer Rate">
               <NumberInput
@@ -29,28 +34,37 @@ export const AtmosFilter = (props, context) => {
                 unit="L/s"
                 minValue={0}
                 maxValue={data.max_rate}
-                onDrag={(e, value) => act('rate', {
-                  rate: value,
-                })} />
+                onDrag={(e, value) =>
+                  act('rate', {
+                    rate: value,
+                  })
+                }
+              />
               <Button
                 ml={1}
                 icon="plus"
                 content="Max"
                 disabled={data.rate === data.max_rate}
-                onClick={() => act('rate', {
-                  rate: 'max',
-                })} />
+                onClick={() =>
+                  act('rate', {
+                    rate: 'max',
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Filters">
-              {filter_types.map(filter => (
+              {filter_types.map((filter) => (
                 <Button
                   key={filter.id}
                   icon={filter.enabled ? 'check-square-o' : 'square-o'}
                   content={getGasLabel(filter.gas_id, filter.gas_name)}
                   selected={filter.enabled}
-                  onClick={() => act('toggle_filter', {
-                    val: filter.gas_id,
-                  })} />
+                  onClick={() =>
+                    act('toggle_filter', {
+                      val: filter.gas_id,
+                    })
+                  }
+                />
               ))}
             </LabeledList.Item>
             <LabeledList.Item label="Power Usage">
diff --git a/tgui/packages/tgui/interfaces/AtmosMixer.js b/tgui/packages/tgui/interfaces/AtmosMixer.js
index d52d579d2acd..a0c1a2046756 100644
--- a/tgui/packages/tgui/interfaces/AtmosMixer.js
+++ b/tgui/packages/tgui/interfaces/AtmosMixer.js
@@ -1,14 +1,18 @@
 import { useBackend } from '../backend';
 import { formatSiUnit } from '../format';
-import { Button, LabeledList, NumberInput, Section, ProgressBar } from '../components';
+import {
+  Button,
+  LabeledList,
+  NumberInput,
+  Section,
+  ProgressBar,
+} from '../components';
 import { Window } from '../layouts';
 
 export const AtmosMixer = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={370}
-      height={179}>
+    <Window width={370} height={179}>
       <Window.Content>
         <Section>
           <LabeledList>
@@ -17,7 +21,8 @@ export const AtmosMixer = (props, context) => {
                 icon={data.on ? 'power-off' : 'times'}
                 content={data.on ? 'On' : 'Off'}
                 selected={data.on}
-                onClick={() => act('power')} />
+                onClick={() => act('power')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Output Pressure">
               <NumberInput
@@ -28,17 +33,23 @@ export const AtmosMixer = (props, context) => {
                 minValue={0}
                 maxValue={data.max_pressure}
                 step={10}
-                onChange={(e, value) => act('pressure', {
-                  pressure: value,
-                })} />
+                onChange={(e, value) =>
+                  act('pressure', {
+                    pressure: value,
+                  })
+                }
+              />
               <Button
                 ml={1}
                 icon="plus"
                 content="Max"
                 disabled={data.set_pressure === data.max_pressure}
-                onClick={() => act('pressure', {
-                  pressure: 'max',
-                })} />
+                onClick={() =>
+                  act('pressure', {
+                    pressure: 'max',
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Main Node" labelColor="green">
               <NumberInput
@@ -49,9 +60,12 @@ export const AtmosMixer = (props, context) => {
                 minValue={0}
                 maxValue={100}
                 stepPixelSize={2}
-                onDrag={(e, value) => act('node1', {
-                  concentration: value,
-                })} />
+                onDrag={(e, value) =>
+                  act('node1', {
+                    concentration: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Side Node" labelColor="blue">
               <NumberInput
@@ -62,9 +76,12 @@ export const AtmosMixer = (props, context) => {
                 minValue={0}
                 maxValue={100}
                 stepPixelSize={2}
-                onDrag={(e, value) => act('node2', {
-                  concentration: value,
-                })} />
+                onDrag={(e, value) =>
+                  act('node2', {
+                    concentration: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Power Usage">
               <ProgressBar
diff --git a/tgui/packages/tgui/interfaces/AtmosPump.js b/tgui/packages/tgui/interfaces/AtmosPump.js
index 875d2fb5918a..d53f95484c99 100644
--- a/tgui/packages/tgui/interfaces/AtmosPump.js
+++ b/tgui/packages/tgui/interfaces/AtmosPump.js
@@ -1,14 +1,18 @@
 import { useBackend } from '../backend';
 import { formatSiUnit } from '../format';
-import { Button, LabeledList, NumberInput, Section, ProgressBar } from '../components';
+import {
+  Button,
+  LabeledList,
+  NumberInput,
+  Section,
+  ProgressBar,
+} from '../components';
 import { Window } from '../layouts';
 
 export const AtmosPump = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={335}
-      height={129}>
+    <Window width={335} height={129}>
       <Window.Content>
         <Section>
           <LabeledList>
@@ -17,7 +21,8 @@ export const AtmosPump = (props, context) => {
                 icon={data.on ? 'power-off' : 'times'}
                 content={data.on ? 'On' : 'Off'}
                 selected={data.on}
-                onClick={() => act('power')} />
+                onClick={() => act('power')}
+              />
             </LabeledList.Item>
             {data.max_rate ? (
               <LabeledList.Item label="Transfer Rate">
@@ -28,17 +33,23 @@ export const AtmosPump = (props, context) => {
                   unit="L/s"
                   minValue={0}
                   maxValue={data.max_rate}
-                  onChange={(e, value) => act('rate', {
-                    rate: value,
-                  })} />
+                  onChange={(e, value) =>
+                    act('rate', {
+                      rate: value,
+                    })
+                  }
+                />
                 <Button
                   ml={1}
                   icon="plus"
                   content="Max"
                   disabled={data.rate === data.max_rate}
-                  onClick={() => act('rate', {
-                    rate: 'max',
-                  })} />
+                  onClick={() =>
+                    act('rate', {
+                      rate: 'max',
+                    })
+                  }
+                />
               </LabeledList.Item>
             ) : (
               <LabeledList.Item label="Output Pressure">
@@ -50,17 +61,23 @@ export const AtmosPump = (props, context) => {
                   minValue={0}
                   maxValue={data.max_pressure}
                   step={10}
-                  onChange={(e, value) => act('pressure', {
-                    pressure: value,
-                  })} />
+                  onChange={(e, value) =>
+                    act('pressure', {
+                      pressure: value,
+                    })
+                  }
+                />
                 <Button
                   ml={1}
                   icon="plus"
                   content="Max"
                   disabled={data.pressure === data.max_pressure}
-                  onClick={() => act('pressure', {
-                    pressure: 'max',
-                  })} />
+                  onClick={() =>
+                    act('pressure', {
+                      pressure: 'max',
+                    })
+                  }
+                />
               </LabeledList.Item>
             )}
             {data.max_power ? (
@@ -73,25 +90,23 @@ export const AtmosPump = (props, context) => {
                   {formatSiUnit(data.last_draw, 0, 'W')}
                 </ProgressBar>
               </LabeledList.Item>
-            ) : (
-              null
-            )}
+            ) : null}
             {data.regulate_mode ? (
               <LabeledList.Item label="Pressure Regulator">
                 <Button
                   icon="sign-in-alt"
                   content="Input"
                   selected={data.regulate_mode === 1}
-                  onClick={() => act('regulate')} />
+                  onClick={() => act('regulate')}
+                />
                 <Button
                   icon="sign-out-alt"
                   content="Output"
                   selected={data.regulate_mode === 2}
-                  onClick={() => act('regulate')} />
+                  onClick={() => act('regulate')}
+                />
               </LabeledList.Item>
-            ) : (
-              null
-            )}
+            ) : null}
           </LabeledList>
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/AtmosTempGate.js b/tgui/packages/tgui/interfaces/AtmosTempGate.js
index 716527dddfb9..cb4b62d2b376 100644
--- a/tgui/packages/tgui/interfaces/AtmosTempGate.js
+++ b/tgui/packages/tgui/interfaces/AtmosTempGate.js
@@ -5,9 +5,7 @@ import { Window } from '../layouts';
 export const AtmosTempGate = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={335}
-      height={115}>
+    <Window width={335} height={115}>
       <Window.Content>
         <Section>
           <LabeledList>
@@ -16,7 +14,8 @@ export const AtmosTempGate = (props, context) => {
                 icon={data.on ? 'power-off' : 'times'}
                 content={data.on ? 'On' : 'Off'}
                 selected={data.on}
-                onClick={() => act('power')} />
+                onClick={() => act('power')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Heat settings">
               <NumberInput
@@ -27,17 +26,23 @@ export const AtmosTempGate = (props, context) => {
                 minValue={data.min_temperature}
                 maxValue={data.max_temperature}
                 step={1}
-                onChange={(e, value) => act('temperature', {
-                  temperature: value,
-                })} />
+                onChange={(e, value) =>
+                  act('temperature', {
+                    temperature: value,
+                  })
+                }
+              />
               <Button
                 ml={1}
                 icon="plus"
                 content="Max"
                 disabled={data.temperature === data.max_temperature}
-                onClick={() => act('temperature', {
-                  temperature: 'max',
-                })} />
+                onClick={() =>
+                  act('temperature', {
+                    temperature: 'max',
+                  })
+                }
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/AtmosTempPump.js b/tgui/packages/tgui/interfaces/AtmosTempPump.js
index 3c0195bafda1..8483af505ff1 100644
--- a/tgui/packages/tgui/interfaces/AtmosTempPump.js
+++ b/tgui/packages/tgui/interfaces/AtmosTempPump.js
@@ -5,9 +5,7 @@ import { Window } from '../layouts';
 export const AtmosTempPump = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={335}
-      height={115}>
+    <Window width={335} height={115}>
       <Window.Content>
         <Section>
           <LabeledList>
@@ -16,7 +14,8 @@ export const AtmosTempPump = (props, context) => {
                 icon={data.on ? 'power-off' : 'times'}
                 content={data.on ? 'On' : 'Off'}
                 selected={data.on}
-                onClick={() => act('power')} />
+                onClick={() => act('power')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Heat transfer rate">
               <NumberInput
@@ -27,17 +26,23 @@ export const AtmosTempPump = (props, context) => {
                 minValue={0}
                 maxValue={data.max_heat_transfer_rate}
                 step={1}
-                onChange={(e, value) => act('rate', {
-                  rate: value,
-                })} />
+                onChange={(e, value) =>
+                  act('rate', {
+                    rate: value,
+                  })
+                }
+              />
               <Button
                 ml={1}
                 icon="plus"
                 content="Max"
                 disabled={data.rate === data.max_heat_transfer_rate}
-                onClick={() => act('rate', {
-                  rate: 'max',
-                })} />
+                onClick={() =>
+                  act('rate', {
+                    rate: 'max',
+                  })
+                }
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/Autolathe.js b/tgui/packages/tgui/interfaces/Autolathe.js
index 56322da3d9ee..c77078cedab4 100644
--- a/tgui/packages/tgui/interfaces/Autolathe.js
+++ b/tgui/packages/tgui/interfaces/Autolathe.js
@@ -1,7 +1,19 @@
 import { useBackend, useLocalState } from '../backend';
-import { Button, LabeledList, Section, ProgressBar, Flex, Box, Table, Collapsible, Input, Dimmer, Icon } from '../components';
+import {
+  Button,
+  LabeledList,
+  Section,
+  ProgressBar,
+  Flex,
+  Box,
+  Table,
+  Collapsible,
+  Input,
+  Dimmer,
+  Icon,
+} from '../components';
 import { Window } from '../layouts';
-import { capitalize } from "common/string";
+import { capitalize } from 'common/string';
 
 export const Autolathe = (props, context) => {
   const { act, data } = useBackend(context);
@@ -14,31 +26,30 @@ export const Autolathe = (props, context) => {
     designs = [],
     active,
   } = data;
-  const [
-    current_category,
-    setCategory,
-  ] = useLocalState(context, 'current_category', "None");
-  const filteredmaterials = materials.filter(material =>
-    material.mineral_amount > 0);
+  const [current_category, setCategory] = useLocalState(
+    context,
+    'current_category',
+    'None',
+  );
+  const filteredmaterials = materials.filter(
+    (material) => material.mineral_amount > 0,
+  );
   return (
-    <Window
-      title="Autolathe"
-      width={600}
-      height={600}>
+    <Window title="Autolathe" width={600} height={600}>
       <Window.Content scrollable>
         <Section title="Total Materials">
           <LabeledList>
-            <LabeledList.Item
-              label="Total Materials">
+            <LabeledList.Item label="Total Materials">
               <ProgressBar
                 value={materialtotal}
                 minValue={0}
                 maxValue={materialsmax}
                 ranges={{
-                  "good": [materialsmax * 0.85, materialsmax],
-                  "average": [materialsmax * 0.25, materialsmax * 0.85],
-                  "bad": [0, materialsmax * 0.25],
-                }}>
+                  good: [materialsmax * 0.85, materialsmax],
+                  average: [materialsmax * 0.25, materialsmax * 0.85],
+                  bad: [0, materialsmax * 0.25],
+                }}
+              >
                 {materialtotal + '/' + materialsmax + ' cm³'}
               </ProgressBar>
             </LabeledList.Item>
@@ -46,10 +57,11 @@ export const Autolathe = (props, context) => {
               {filteredmaterials.length > 0 && (
                 <Collapsible title="Materials">
                   <LabeledList>
-                    {filteredmaterials.map(filteredmaterial => (
+                    {filteredmaterials.map((filteredmaterial) => (
                       <LabeledList.Item
                         key={filteredmaterial.id}
-                        label={capitalize(filteredmaterial.name)}>
+                        label={capitalize(filteredmaterial.name)}
+                      >
                         <ProgressBar
                           style={{
                             transform: 'scaleX(-1) scaleY(1)',
@@ -57,19 +69,23 @@ export const Autolathe = (props, context) => {
                           value={materialsmax - filteredmaterial.mineral_amount}
                           maxValue={materialsmax}
                           color="black"
-                          backgroundColor={filteredmaterial.matcolour}>
-                          <div style={{ transform: 'scaleX(-1)' }}>{filteredmaterial.mineral_amount + ' cm³'}</div>
+                          backgroundColor={filteredmaterial.matcolour}
+                        >
+                          <div style={{ transform: 'scaleX(-1)' }}>
+                            {filteredmaterial.mineral_amount + ' cm³'}
+                          </div>
                         </ProgressBar>
                       </LabeledList.Item>
                     ))}
                   </LabeledList>
-                </Collapsible>)}
+                </Collapsible>
+              )}
             </LabeledList.Item>
           </LabeledList>
         </Section>
-        <Section
-          title="Search">
-          <Input fluid
+        <Section title="Search">
+          <Input
+            fluid
             placeholder="Search Recipes..."
             selfClear
             onChange={(e, value) => {
@@ -79,11 +95,12 @@ export const Autolathe = (props, context) => {
                 });
                 setCategory('results for "' + value + '"');
               }
-            }} />
+            }}
+          />
         </Section>
         <Section title="Categories">
           <Box>
-            {categories.map(category => (
+            {categories.map((category) => (
               // eslint-disable-next-line react/jsx-key
               <Button
                 selected={current_category === category}
@@ -93,22 +110,25 @@ export const Autolathe = (props, context) => {
                     selectedCategory: category,
                   });
                   setCategory(category);
-                }} />
+                }}
+              />
             ))}
           </Box>
         </Section>
-        {current_category.toString() !== "None" && (
+        {current_category.toString() !== 'None' && (
           <Section
             title={'Displaying ' + current_category.toString()}
-            buttons={(
+            buttons={
               <Button
                 icon="times"
                 content="Close Category"
                 onClick={() => {
                   act('menu');
-                  setCategory("None");
-                }} />
-            )}>
+                  setCategory('None');
+                }}
+              />
+            }
+          >
             {active === 1 && (
               <Dimmer fontSize="32px">
                 <Icon name="cog" spin />
@@ -117,18 +137,20 @@ export const Autolathe = (props, context) => {
             )}
             <Flex direction="row" wrap="nowrap">
               <Table>
-                {designs.length
-                  && (designs.map(design => (
-                    <Table.Row
-                      key={design.id}>
+                {(designs.length &&
+                  designs.map((design) => (
+                    <Table.Row key={design.id}>
                       <Flex.Item>
                         <Button
                           content={design.name}
                           disabled={design.buildable}
-                          onClick={() => act('make', {
-                            id: design.id,
-                            multiplier: '1',
-                          })} />
+                          onClick={() =>
+                            act('make', {
+                              id: design.id,
+                              multiplier: '1',
+                            })
+                          }
+                        />
                       </Flex.Item>
                       {design.sheet ? (
                         <Table.Cell>
@@ -137,18 +159,24 @@ export const Autolathe = (props, context) => {
                               icon="hammer"
                               content="10"
                               disabled={!design.mult10}
-                              onClick={() => act('make', {
-                                id: design.id,
-                                multiplier: '10',
-                              })} />
+                              onClick={() =>
+                                act('make', {
+                                  id: design.id,
+                                  multiplier: '10',
+                                })
+                              }
+                            />
                             <Button
                               icon="hammer"
                               content="25"
                               disabled={!design.mult25}
-                              onClick={() => act('make', {
-                                id: design.id,
-                                multiplier: '25',
-                              })} />
+                              onClick={() =>
+                                act('make', {
+                                  id: design.id,
+                                  multiplier: '25',
+                                })
+                              }
+                            />
                           </Flex.Item>
                         </Table.Cell>
                       ) : (
@@ -158,39 +186,48 @@ export const Autolathe = (props, context) => {
                               icon="hammer"
                               content="5"
                               disabled={!design.mult5}
-                              onClick={() => act('make', {
-                                id: design.id,
-                                multiplier: '5',
-                              })} />
+                              onClick={() =>
+                                act('make', {
+                                  id: design.id,
+                                  multiplier: '5',
+                                })
+                              }
+                            />
                             <Button
                               icon="hammer"
                               content="10"
                               disabled={!design.mult10}
-                              onClick={() => act('make', {
-                                id: design.id,
-                                multiplier: '10',
-                              })} />
+                              onClick={() =>
+                                act('make', {
+                                  id: design.id,
+                                  multiplier: '10',
+                                })
+                              }
+                            />
                           </Flex.Item>
                         </Table.Cell>
                       )}
                       <Table.Cell>
                         <Button.Input
-                          content={"[Max:" + design.maxmult + ']'}
+                          content={'[Max:' + design.maxmult + ']'}
                           maxValue={design.maxmult}
                           disabled={design.buildable}
-                          backgroundColor={design.buildable ? '#999999' : 'default'}
-                          onCommit={(e, value) => act('make', {
-                            id: design.id,
-                            multiplier: value,
-                          })} />
+                          backgroundColor={
+                            design.buildable ? '#999999' : 'default'
+                          }
+                          onCommit={(e, value) =>
+                            act('make', {
+                              id: design.id,
+                              multiplier: value,
+                            })
+                          }
+                        />
                       </Table.Cell>
                       {design.cost}
                     </Table.Row>
                   ))) || (
                   <Table.Row>
-                    <Table.Cell>
-                      {"No designs found."}
-                    </Table.Cell>
+                    <Table.Cell>{'No designs found.'}</Table.Cell>
                   </Table.Row>
                 )}
               </Table>
diff --git a/tgui/packages/tgui/interfaces/AutomatedAnnouncement.js b/tgui/packages/tgui/interfaces/AutomatedAnnouncement.js
index 0baea4de97b5..652dc4a62cf6 100644
--- a/tgui/packages/tgui/interfaces/AutomatedAnnouncement.js
+++ b/tgui/packages/tgui/interfaces/AutomatedAnnouncement.js
@@ -10,69 +10,75 @@ const TOOLTIP_TEXT = multiline`
 
 export const AutomatedAnnouncement = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    arrivalToggle,
-    arrival,
-    newheadToggle,
-    newhead,
-  } = data;
+  const { arrivalToggle, arrival, newheadToggle, newhead } = data;
   return (
-    <Window
-      title="Automated Announcement System"
-      width={500}
-      height={225}>
+    <Window title="Automated Announcement System" width={500} height={225}>
       <Window.Content>
         <Section
           title="Arrival Announcement"
-          buttons={(
+          buttons={
             <Button
               icon={arrivalToggle ? 'power-off' : 'times'}
               selected={arrivalToggle}
               content={arrivalToggle ? 'On' : 'Off'}
-              onClick={() => act('ArrivalToggle')} />
-          )}>
+              onClick={() => act('ArrivalToggle')}
+            />
+          }
+        >
           <LabeledList>
             <LabeledList.Item
               label="Message"
-              buttons={(
+              buttons={
                 <Button
                   icon="info"
                   tooltip={TOOLTIP_TEXT}
-                  tooltipPosition="left" />
-              )}>
+                  tooltipPosition="left"
+                />
+              }
+            >
               <Input
                 fluid
                 value={arrival}
-                onChange={(e, value) => act('ArrivalText', {
-                  newText: value,
-                })} />
+                onChange={(e, value) =>
+                  act('ArrivalText', {
+                    newText: value,
+                  })
+                }
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
         <Section
           title="Departmental Head Announcement"
-          buttons={(
+          buttons={
             <Button
               icon={newheadToggle ? 'power-off' : 'times'}
               selected={newheadToggle}
               content={newheadToggle ? 'On' : 'Off'}
-              onClick={() => act('NewheadToggle')} />
-          )}>
+              onClick={() => act('NewheadToggle')}
+            />
+          }
+        >
           <LabeledList>
             <LabeledList.Item
               label="Message"
-              buttons={(
+              buttons={
                 <Button
                   icon="info"
                   tooltip={TOOLTIP_TEXT}
-                  tooltipPosition="left" />
-              )}>
+                  tooltipPosition="left"
+                />
+              }
+            >
               <Input
                 fluid
                 value={newhead}
-                onChange={(e, value) => act('NewheadText', {
-                  newText: value,
-                })} />
+                onChange={(e, value) =>
+                  act('NewheadText', {
+                    newText: value,
+                  })
+                }
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/BankMachine.js b/tgui/packages/tgui/interfaces/BankMachine.js
index 8aa607b8c926..5ce10b60e126 100644
--- a/tgui/packages/tgui/interfaces/BankMachine.js
+++ b/tgui/packages/tgui/interfaces/BankMachine.js
@@ -1,37 +1,38 @@
 import { useBackend } from '../backend';
-import { AnimatedNumber, Button, LabeledList, NoticeBox, Section } from '../components';
+import {
+  AnimatedNumber,
+  Button,
+  LabeledList,
+  NoticeBox,
+  Section,
+} from '../components';
 import { formatMoney } from '../format';
 import { Window } from '../layouts';
 
 export const BankMachine = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    current_balance,
-    siphoning,
-    station_name,
-  } = data;
+  const { current_balance, siphoning, station_name } = data;
   return (
-    <Window
-      width={350}
-      height={155}>
+    <Window width={350} height={155}>
       <Window.Content>
-        <NoticeBox danger>
-          Authorized personnel only
-        </NoticeBox>
+        <NoticeBox danger>Authorized personnel only</NoticeBox>
         <Section title={station_name + ' Vault'}>
           <LabeledList>
             <LabeledList.Item
               label="Current Balance"
-              buttons={(
+              buttons={
                 <Button
                   icon={siphoning ? 'times' : 'sync'}
                   content={siphoning ? 'Stop Siphoning' : 'Siphon Credits'}
                   selected={siphoning}
-                  onClick={() => act(siphoning ? 'halt' : 'siphon')} />
-              )}>
+                  onClick={() => act(siphoning ? 'halt' : 'siphon')}
+                />
+              }
+            >
               <AnimatedNumber
                 value={current_balance}
-                format={value => formatMoney(value)} />
+                format={(value) => formatMoney(value)}
+              />
               {' cr'}
             </LabeledList.Item>
           </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/Bepis.js b/tgui/packages/tgui/interfaces/Bepis.js
index 6bd7a12d678e..15d42fed1838 100644
--- a/tgui/packages/tgui/interfaces/Bepis.js
+++ b/tgui/packages/tgui/interfaces/Bepis.js
@@ -1,44 +1,50 @@
 import { useBackend } from '../backend';
-import { Box, Button, Grid, LabeledList, NumberInput, Section } from '../components';
+import {
+  Box,
+  Button,
+  Grid,
+  LabeledList,
+  NumberInput,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const Bepis = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    amount,
-  } = data;
+  const { amount } = data;
   return (
-    <Window
-      width={500}
-      height={480}>
+    <Window width={500} height={480}>
       <Window.Content>
         <Section title="Business Exploration Protocol Incubation Sink">
           <Section
             title="Information"
             backgroundColor="#450F44"
-            buttons={(
+            buttons={
               <Button
                 icon="power-off"
                 content={data.manual_power ? 'Off' : 'On'}
                 selected={!data.manual_power}
-                onClick={() => act('toggle_power')} />
-            )}>
-            All you need to know about the B.E.P.I.S. and you!
-            The B.E.P.I.S. performs hundreds of tests a second
-            using electrical and financial resources to invent
-            new products, or discover new technologies otherwise
-            overlooked for being too risky or too niche to produce!
+                onClick={() => act('toggle_power')}
+              />
+            }
+          >
+            All you need to know about the B.E.P.I.S. and you! The B.E.P.I.S.
+            performs hundreds of tests a second using electrical and financial
+            resources to invent new products, or discover new technologies
+            otherwise overlooked for being too risky or too niche to produce!
           </Section>
           <Section
             title="Payer's Account"
-            buttons={(
+            buttons={
               <Button
                 icon="redo-alt"
                 content="Reset Account"
-                onClick={() => act('account_reset')} />
-            )}>
-            Console is currently being operated
-            by {data.account_owner ? data.account_owner : 'no one'}.
+                onClick={() => act('account_reset')}
+              />
+            }
+          >
+            Console is currently being operated by{' '}
+            {data.account_owner ? data.account_owner : 'no one'}.
           </Section>
           <Grid>
             <Grid.Column size={1.5}>
@@ -53,8 +59,7 @@ export const Bepis = (props, context) => {
                   <LabeledList.Item label="Innovation Bonus">
                     {data.positive_cash_offset}
                   </LabeledList.Item>
-                  <LabeledList.Item label="Risk Offset"
-                    color="bad">
+                  <LabeledList.Item label="Risk Offset" color="bad">
                     {data.negative_cash_offset}
                   </LabeledList.Item>
                   <LabeledList.Item label="Deposit Amount">
@@ -65,9 +70,12 @@ export const Bepis = (props, context) => {
                       maxValue={30000}
                       step={100}
                       stepPixelSize={2}
-                      onChange={(e, value) => act('amount', {
-                        amount: value,
-                      })} />
+                      onChange={(e, value) =>
+                        act('amount', {
+                          amount: value,
+                        })
+                      }
+                    />
                   </LabeledList.Item>
                 </LabeledList>
               </Section>
@@ -75,17 +83,14 @@ export const Bepis = (props, context) => {
                 <Button
                   icon="donate"
                   content="Deposit Credits and Start"
-                  disabled={data.manual_power === 1
-                    || data.silicon_check === 1}
+                  disabled={data.manual_power === 1 || data.silicon_check === 1}
                   onClick={() => act('begin_experiment')}
                 />
               </Box>
             </Grid.Column>
             <Grid.Column>
               <Section title="Market Data and Analysis">
-                <Box>
-                  Average technology cost: {data.mean_value}
-                </Box>
+                <Box>Average technology cost: {data.mean_value}</Box>
                 <Box>
                   Current chance of Success: Est. {data.success_estimate}%
                 </Box>
diff --git a/tgui/packages/tgui/interfaces/Biogenerator.js b/tgui/packages/tgui/interfaces/Biogenerator.js
index 5f375395585e..5014079504a8 100644
--- a/tgui/packages/tgui/interfaces/Biogenerator.js
+++ b/tgui/packages/tgui/interfaces/Biogenerator.js
@@ -1,7 +1,19 @@
 import { classes } from 'common/react';
 import { createSearch } from 'common/string';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Dimmer, Flex, Icon, Input, NoticeBox, NumberInput, Section, Table, Tabs } from '../components';
+import {
+  Box,
+  Button,
+  Dimmer,
+  Flex,
+  Icon,
+  Input,
+  NoticeBox,
+  NumberInput,
+  Section,
+  Table,
+  Tabs,
+} from '../components';
 import { formatMoney } from '../format';
 import { Window } from '../layouts';
 
@@ -9,14 +21,9 @@ const MAX_SEARCH_RESULTS = 25;
 
 export const Biogenerator = (props, context) => {
   const { data } = useBackend(context);
-  const {
-    beaker,
-    processing,
-  } = data;
+  const { beaker, processing } = data;
   return (
-    <Window
-      width={550}
-      height={420}>
+    <Window width={550} height={420}>
       {!!processing && (
         <Dimmer fontSize="32px">
           <Icon name="cog" spin={1} />
@@ -24,12 +31,8 @@ export const Biogenerator = (props, context) => {
         </Dimmer>
       )}
       <Window.Content scrollable>
-        {!beaker && (
-          <NoticeBox>No Container</NoticeBox>
-        )}
-        {!!beaker && (
-          <BiogeneratorContent />
-        )}
+        {!beaker && <NoticeBox>No Container</NoticeBox>}
+        {!!beaker && <BiogeneratorContent />}
       </Window.Content>
     </Window>
   );
@@ -37,71 +40,63 @@ export const Biogenerator = (props, context) => {
 
 export const BiogeneratorContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    biomass,
-    can_process,
-    categories = [],
-  } = data;
-  const [
-    searchText,
-    setSearchText,
-  ] = useLocalState(context, 'searchText', '');
-  const [
-    selectedCategory,
-    setSelectedCategory,
-  ] = useLocalState(context, 'category', categories[0]?.name);
-  const testSearch = createSearch(searchText, item => {
+  const { biomass, can_process, categories = [] } = data;
+  const [searchText, setSearchText] = useLocalState(context, 'searchText', '');
+  const [selectedCategory, setSelectedCategory] = useLocalState(
+    context,
+    'category',
+    categories[0]?.name,
+  );
+  const testSearch = createSearch(searchText, (item) => {
     return item.name;
   });
-  const items = searchText.length > 0
-    // Flatten all categories and apply search to it
-    && categories
-      .flatMap(category => category.items || [])
-      .filter(testSearch)
-      .filter((item, i) => i < MAX_SEARCH_RESULTS)
+  const items =
+    (searchText.length > 0 &&
+      // Flatten all categories and apply search to it
+      categories
+        .flatMap((category) => category.items || [])
+        .filter(testSearch)
+        .filter((item, i) => i < MAX_SEARCH_RESULTS)) ||
     // Select a category and show all items in it
-    || categories
-      .find(category => category.name === selectedCategory)
-      ?.items
+    categories.find((category) => category.name === selectedCategory)?.items ||
     // If none of that results in a list, return an empty list
-    || [];
+    [];
   return (
     <Section
-      title={(
-        <Box
-          inline
-          color={biomass > 0 ? 'good' : 'bad'}>
+      title={
+        <Box inline color={biomass > 0 ? 'good' : 'bad'}>
           {formatMoney(biomass)} Biomass
         </Box>
-      )}
-      buttons={(
+      }
+      buttons={
         <>
           Search
           <Input
             autoFocus
             value={searchText}
             onInput={(e, value) => setSearchText(value)}
-            mx={1} />
-          <Button
-            icon="eject"
-            content="Eject"
-            onClick={() => act('eject')} />
+            mx={1}
+          />
+          <Button icon="eject" content="Eject" onClick={() => act('eject')} />
           <Button
             icon="cog"
             content="Activate"
             disabled={!can_process}
-            onClick={() => act('activate')} />
+            onClick={() => act('activate')}
+          />
         </>
-      )}>
+      }
+    >
       <Flex>
         {searchText.length === 0 && (
           <Flex.Item>
             <Tabs vertical>
-              {categories.map(category => (
+              {categories.map((category) => (
                 <Tabs.Tab
                   key={category.name}
                   selected={category.name === selectedCategory}
-                  onClick={() => setSelectedCategory(category.name)}>
+                  onClick={() => setSelectedCategory(category.name)}
+                >
                   {category.name} ({category.items?.length || 0})
                 </Tabs.Tab>
               ))}
@@ -117,9 +112,7 @@ export const BiogeneratorContent = (props, context) => {
             </NoticeBox>
           )}
           <Table>
-            <ItemList
-              biomass={biomass}
-              items={items} />
+            <ItemList biomass={biomass} items={items} />
           </Table>
         </Flex.Item>
       </Flex>
@@ -129,20 +122,18 @@ export const BiogeneratorContent = (props, context) => {
 
 const ItemList = (props, context) => {
   const { act } = useBackend(context);
-  const [
-    hoveredItem,
-    setHoveredItem,
-  ] = useLocalState(context, 'hoveredItem', {});
+  const [hoveredItem, setHoveredItem] = useLocalState(
+    context,
+    'hoveredItem',
+    {},
+  );
   const hoveredCost = hoveredItem.cost || 0;
   // Append extra hover data to items
-  const items = props.items.map(item => {
-    const [
-      amount,
-      setAmount,
-    ] = useLocalState(context, "amount" + item.name, 1);
+  const items = props.items.map((item) => {
+    const [amount, setAmount] = useLocalState(context, 'amount' + item.name, 1);
     const notSameItem = hoveredItem.name !== item.name;
-    const notEnoughHovered = props.biomass - hoveredCost
-      * hoveredItem.amount < item.cost * amount;
+    const notEnoughHovered =
+      props.biomass - hoveredCost * hoveredItem.amount < item.cost * amount;
     const disabledDueToHovered = notSameItem && notEnoughHovered;
     const disabled = props.biomass < item.cost * amount || disabledDueToHovered;
     return {
@@ -152,15 +143,16 @@ const ItemList = (props, context) => {
       setAmount,
     };
   });
-  return items.map(item => (
+  return items.map((item) => (
     <Table.Row key={item.id}>
       <Table.Cell>
         <span
           className={classes(['design32x32', item.id])}
           style={{
             'vertical-align': 'middle',
-          }} />
-        {' '}<b>{item.name}</b>
+          }}
+        />{' '}
+        <b>{item.name}</b>
       </Table.Cell>
       <Table.Cell collapsing>
         <NumberInput
@@ -168,7 +160,8 @@ const ItemList = (props, context) => {
           width="35px"
           minValue={1}
           maxValue={10}
-          onChange={(e, value) => item.setAmount(value)} />
+          onChange={(e, value) => item.setAmount(value)}
+        />
       </Table.Cell>
       <Table.Cell collapsing>
         <Button
@@ -176,14 +169,17 @@ const ItemList = (props, context) => {
             'text-align': 'right',
           }}
           fluid
-          content={item.cost * item.amount + ' ' + "BIO"}
+          content={item.cost * item.amount + ' ' + 'BIO'}
           disabled={item.disabled}
           onmouseover={() => setHoveredItem(item)}
           onmouseout={() => setHoveredItem({})}
-          onClick={() => act('create', {
-            id: item.id,
-            amount: item.amount,
-          })} />
+          onClick={() =>
+            act('create', {
+              id: item.id,
+              amount: item.amount,
+            })
+          }
+        />
       </Table.Cell>
     </Table.Row>
   ));
diff --git a/tgui/packages/tgui/interfaces/BlackMarketUplink.js b/tgui/packages/tgui/interfaces/BlackMarketUplink.js
index 00223f582421..b88bb26e61e6 100644
--- a/tgui/packages/tgui/interfaces/BlackMarketUplink.js
+++ b/tgui/packages/tgui/interfaces/BlackMarketUplink.js
@@ -1,5 +1,13 @@
 import { useBackend } from '../backend';
-import { AnimatedNumber, Box, Button, Modal, Section, Stack, Tabs } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  Modal,
+  Section,
+  Stack,
+  Tabs,
+} from '../components';
 import { formatMoney } from '../format';
 import { Window } from '../layouts';
 
@@ -14,29 +22,31 @@ export const BlackMarketUplink = (props, context) => {
     viewing_category,
   } = data;
   return (
-    <Window
-      width={670}
-      height={480}
-      theme="hackerman">
+    <Window width={670} height={480} theme="hackerman">
       <ShipmentSelector />
       <Window.Content scrollable>
         <Section
           title="Black Market Uplink"
-          buttons={(
+          buttons={
             <Box inline bold>
               <AnimatedNumber
                 value={money}
-                format={value => formatMoney(value) + ' cr'} />
+                format={(value) => formatMoney(value) + ' cr'}
+              />
             </Box>
-          )} />
+          }
+        />
         <Tabs>
-          {markets.map(market => (
+          {markets.map((market) => (
             <Tabs.Tab
               key={market.id}
               selected={market.id === viewing_market}
-              onClick={() => act('set_market', {
-                market: market.id,
-              })}>
+              onClick={() =>
+                act('set_market', {
+                  market: market.id,
+                })
+              }
+            >
               {market.name}
             </Tabs.Tab>
           ))}
@@ -44,45 +54,43 @@ export const BlackMarketUplink = (props, context) => {
         <Stack>
           <Stack.Item>
             <Tabs vertical>
-              {categories.map(category => (
+              {categories.map((category) => (
                 <Tabs.Tab
                   key={category}
                   mt={0.5}
                   selected={viewing_category === category}
-                  onClick={() => act('set_category', {
-                    category: category,
-                  })}>
+                  onClick={() =>
+                    act('set_category', {
+                      category: category,
+                    })
+                  }
+                >
                   {category}
                 </Tabs.Tab>
               ))}
             </Tabs>
           </Stack.Item>
           <Stack.Item grow>
-            {items.map(item => (
-              <Box
-                key={item.name}
-                className="candystripe"
-                p={1}
-                pb={2}>
+            {items.map((item) => (
+              <Box key={item.name} className="candystripe" p={1} pb={2}>
                 <Stack align="baseline">
                   <Stack.Item grow bold>
                     {item.name}
                   </Stack.Item>
                   <Stack.Item color="label">
-                    {item.amount
-                      ? item.amount + " in stock"
-                      : "Out of stock"}
-                  </Stack.Item>
-                  <Stack.Item>
-                    {formatMoney(item.cost) + ' cr'}
+                    {item.amount ? item.amount + ' in stock' : 'Out of stock'}
                   </Stack.Item>
+                  <Stack.Item>{formatMoney(item.cost) + ' cr'}</Stack.Item>
                   <Stack.Item>
                     <Button
                       content="Buy"
                       disabled={!item.amount || item.cost > money}
-                      onClick={() => act('select', {
-                        item: item.id,
-                      })} />
+                      onClick={() =>
+                        act('select', {
+                          item: item.id,
+                        })
+                      }
+                    />
                   </Stack.Item>
                 </Stack>
                 {item.desc}
@@ -97,15 +105,11 @@ export const BlackMarketUplink = (props, context) => {
 
 const ShipmentSelector = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    buying,
-    ltsrbt_built,
-    money,
-  } = data;
+  const { buying, ltsrbt_built, money } = data;
   if (!buying) {
     return null;
   }
-  const deliveryMethods = data.delivery_methods.map(method => {
+  const deliveryMethods = data.delivery_methods.map((method) => {
     const description = data.delivery_method_description[method.name];
     return {
       ...method,
@@ -115,36 +119,29 @@ const ShipmentSelector = (props, context) => {
   return (
     <Modal textAlign="center">
       <Stack mb={1}>
-        {deliveryMethods.map(method => {
+        {deliveryMethods.map((method) => {
           if (method.name === 'LTSRBT' && !ltsrbt_built) {
             return null;
           }
           return (
-            <Stack.Item
-              key={method.name}
-              mx={1}
-              width="17.5rem">
-              <Box fontSize="30px">
-                {method.name}
-              </Box>
-              <Box mt={1}>
-                {method.description}
-              </Box>
+            <Stack.Item key={method.name} mx={1} width="17.5rem">
+              <Box fontSize="30px">{method.name}</Box>
+              <Box mt={1}>{method.description}</Box>
               <Button
                 mt={2}
                 content={formatMoney(method.price) + ' cr'}
                 disabled={money < method.price}
-                onClick={() => act('buy', {
-                  method: method.name,
-                })} />
+                onClick={() =>
+                  act('buy', {
+                    method: method.name,
+                  })
+                }
+              />
             </Stack.Item>
           );
         })}
       </Stack>
-      <Button
-        content="Cancel"
-        color="bad"
-        onClick={() => act('cancel')} />
+      <Button content="Cancel" color="bad" onClick={() => act('cancel')} />
     </Modal>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/BloodFilter.js b/tgui/packages/tgui/interfaces/BloodFilter.js
index 45a56eb68a88..4bad5769524b 100644
--- a/tgui/packages/tgui/interfaces/BloodFilter.js
+++ b/tgui/packages/tgui/interfaces/BloodFilter.js
@@ -5,14 +5,10 @@ import { ChemFilterPane } from './ChemFilter';
 
 export const BloodFilter = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    whitelist = [],
-  } = data;
+  const { whitelist = [] } = data;
   const [chemName, setChemName] = useLocalState(context, 'chemName', '');
   return (
-    <Window
-      width={500}
-      height={300}>
+    <Window width={500} height={300}>
       <Window.Content scrollable>
         <Stack>
           <Stack.Item grow>
@@ -20,7 +16,8 @@ export const BloodFilter = (props, context) => {
               title="Whitelist"
               list={whitelist}
               reagentName={chemName}
-              onReagentInput={value => setChemName(value)} />
+              onReagentInput={(value) => setChemName(value)}
+            />
           </Stack.Item>
         </Stack>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/BluespaceArtillery.js b/tgui/packages/tgui/interfaces/BluespaceArtillery.js
index 87d8716c72e0..a837a10855c9 100644
--- a/tgui/packages/tgui/interfaces/BluespaceArtillery.js
+++ b/tgui/packages/tgui/interfaces/BluespaceArtillery.js
@@ -4,35 +4,24 @@ import { Window } from '../layouts';
 
 export const BluespaceArtillery = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    notice,
-    connected,
-    unlocked,
-    target,
-  } = data;
+  const { notice, connected, unlocked, target } = data;
   return (
-    <Window
-      width={400}
-      height={220}>
+    <Window width={400} height={220}>
       <Window.Content>
-        {!!notice && (
-          <NoticeBox>
-            {notice}
-          </NoticeBox>
-        )}
+        {!!notice && <NoticeBox>{notice}</NoticeBox>}
         {connected ? (
           <>
             <Section
               title="Target"
-              buttons={(
+              buttons={
                 <Button
                   icon="crosshairs"
                   disabled={!unlocked}
-                  onClick={() => act('recalibrate')} />
-              )}>
-              <Box
-                color={target ? 'average' : 'bad'}
-                fontSize="25px">
+                  onClick={() => act('recalibrate')}
+                />
+              }
+            >
+              <Box color={target ? 'average' : 'bad'} fontSize="25px">
                 {target || 'No Target Set'}
               </Box>
             </Section>
@@ -47,13 +36,12 @@ export const BluespaceArtillery = (props, context) => {
                     fontSize="30px"
                     textAlign="center"
                     lineHeight="46px"
-                    onClick={() => act('fire')} />
+                    onClick={() => act('fire')}
+                  />
                 </Box>
               ) : (
                 <>
-                  <Box
-                    color="bad"
-                    fontSize="18px">
+                  <Box color="bad" fontSize="18px">
                     Bluespace artillery is currently locked.
                   </Box>
                   <Box mt={1}>
@@ -71,7 +59,8 @@ export const BluespaceArtillery = (props, context) => {
                 <Button
                   icon="wrench"
                   content="Complete Deployment"
-                  onClick={() => act('build')} />
+                  onClick={() => act('build')}
+                />
               </LabeledList.Item>
             </LabeledList>
           </Section>
diff --git a/tgui/packages/tgui/interfaces/BluespaceLocator.js b/tgui/packages/tgui/interfaces/BluespaceLocator.js
index 889a6ef57824..d0ea241f2eb0 100644
--- a/tgui/packages/tgui/interfaces/BluespaceLocator.js
+++ b/tgui/packages/tgui/interfaces/BluespaceLocator.js
@@ -14,30 +14,26 @@ const directionToIcon = {
 };
 
 export const BluespaceLocator = (props, context) => {
-  const [tab, setTab] = useSharedState(context, "tab", "implant");
+  const [tab, setTab] = useSharedState(context, 'tab', 'implant');
   return (
-    <Window
-      width={300}
-      height={300}>
+    <Window width={300} height={300}>
       <Window.Content scrollable>
         <Tabs>
           <Tabs.Tab
-            selected={tab === "implant"}
-            onClick={() => setTab("implant")}>
+            selected={tab === 'implant'}
+            onClick={() => setTab('implant')}
+          >
             Implants
           </Tabs.Tab>
           <Tabs.Tab
-            selected={tab === "beacon"}
-            onClick={() => setTab("beacon")}>
+            selected={tab === 'beacon'}
+            onClick={() => setTab('beacon')}
+          >
             Teleporter Beacons
           </Tabs.Tab>
         </Tabs>
-        {tab === "beacon" && (
-          <TeleporterBeacons />
-        )
-        || tab === "implant" && (
-          <TrackingImplants />
-        )}
+        {(tab === 'beacon' && <TeleporterBeacons />) ||
+          (tab === 'implant' && <TrackingImplants />)}
       </Window.Content>
     </Window>
   );
@@ -46,39 +42,33 @@ export const BluespaceLocator = (props, context) => {
 const TeleporterBeacons = (props, context) => {
   const { data } = useBackend(context);
   const { telebeacons } = data;
-  return (
-    telebeacons.map(beacon => (
-      <SignalLocator
-        key={beacon.name}
-        name={beacon.name}
-        distance={beacon.distance}
-        direction={directionToIcon[beacon.direction]} />
-    ))
-  );
+  return telebeacons.map((beacon) => (
+    <SignalLocator
+      key={beacon.name}
+      name={beacon.name}
+      distance={beacon.distance}
+      direction={directionToIcon[beacon.direction]}
+    />
+  ));
 };
 
 const TrackingImplants = (props, context) => {
   const { data } = useBackend(context);
   const { trackimplants } = data;
-  return (
-    trackimplants.map(implant => (
-      <SignalLocator
-        key={implant.name}
-        name={implant.name}
-        distance={implant.distance}
-        direction={directionToIcon[implant.direction]} />
-    ))
-  );
+  return trackimplants.map((implant) => (
+    <SignalLocator
+      key={implant.name}
+      name={implant.name}
+      distance={implant.distance}
+      direction={directionToIcon[implant.direction]}
+    />
+  ));
 };
 
 const SignalLocator = (props, context) => {
   const { data } = useBackend(context);
   const { trackingrange } = data;
-  const {
-    name,
-    direction,
-    distance,
-  } = props;
+  const { name, direction, distance } = props;
   return (
     <ProgressBar
       mb={1}
@@ -86,15 +76,13 @@ const SignalLocator = (props, context) => {
       minValue={0}
       maxValue={trackingrange}
       ranges={{
-        red: [0, trackingrange/3],
-        yellow: [trackingrange/3, 2 * (trackingrange/3)],
-        green: [2 * (trackingrange/3), trackingrange],
-      }}>
+        red: [0, trackingrange / 3],
+        yellow: [trackingrange / 3, 2 * (trackingrange / 3)],
+        green: [2 * (trackingrange / 3), trackingrange],
+      }}
+    >
       {name}
-      <Icon
-        ml={2}
-        name="arrow-up"
-        rotation={direction} />
+      <Icon ml={2} name="arrow-up" rotation={direction} />
     </ProgressBar>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/BluespaceSender.js b/tgui/packages/tgui/interfaces/BluespaceSender.js
index 80ea5ee54bb2..41d2e697a46a 100644
--- a/tgui/packages/tgui/interfaces/BluespaceSender.js
+++ b/tgui/packages/tgui/interfaces/BluespaceSender.js
@@ -2,35 +2,40 @@ import { filter, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { toFixed } from 'common/math';
 import { useBackend } from '../backend';
-import { Button, Divider, LabeledList, NumberInput, ProgressBar, Section, Stack, Box } from '../components';
+import {
+  Button,
+  Divider,
+  LabeledList,
+  NumberInput,
+  ProgressBar,
+  Section,
+  Stack,
+  Box,
+} from '../components';
 import { getGasColor, getGasLabel } from '../constants';
 import { Window } from '../layouts';
 
-const mappedTopMargin = "2%";
+const mappedTopMargin = '2%';
 
 export const BluespaceSender = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    on,
-    gas_transfer_rate,
-    price_multiplier,
-  } = data;
+  const { on, gas_transfer_rate, price_multiplier } = data;
   const bluespace_network_gases = flow([
-    filter(gas => gas.amount >= 0.01),
-    sortBy(gas => -gas.amount),
+    filter((gas) => gas.amount >= 0.01),
+    sortBy((gas) => -gas.amount),
   ])(data.bluespace_network_gases || []);
-  const gasMax = Math.max(1, ...bluespace_network_gases.map(gas => gas.amount));
+  const gasMax = Math.max(
+    1,
+    ...bluespace_network_gases.map((gas) => gas.amount),
+  );
   return (
-    <Window
-      title="Bluespace Sender"
-      width={500}
-      height={600}>
+    <Window title="Bluespace Sender" width={500} height={600}>
       <Window.Content>
         <Section
           scrollable
           fill
           title="Bluespace Network Gases"
-          buttons={(
+          buttons={
             <>
               <Button
                 mr={0.5}
@@ -42,7 +47,8 @@ export const BluespaceSender = (props, context) => {
                 Network! That means any connected Bluespace Vendor (multitool)
                 will hook up to all the gas stored in this, and charge
                 this machine's price to buy it.
-              `} />
+              `}
+              />
               <NumberInput
                 animated
                 value={gas_transfer_rate}
@@ -51,9 +57,12 @@ export const BluespaceSender = (props, context) => {
                 unit="moles/S"
                 minValue={0}
                 maxValue={1}
-                onDrag={(e, value) => act('rate', {
-                  rate: value,
-                })} />
+                onDrag={(e, value) =>
+                  act('rate', {
+                    rate: value,
+                  })
+                }
+              />
               <Button
                 ml={0.5}
                 icon={data.on ? 'power-off' : 'times'}
@@ -61,25 +70,28 @@ export const BluespaceSender = (props, context) => {
                 selected={data.on}
                 tooltipPosition="bottom-start"
                 tooltip="Will only take in gases while on."
-                onClick={() => act('power')} />
+                onClick={() => act('power')}
+              />
               <Button
                 ml={0.5}
                 content="Retrieve gases"
                 tooltipPosition="bottom-start"
                 tooltip="Will transfer any gases inside to the pipe."
-                onClick={() => act('retrieve')} />
+                onClick={() => act('retrieve')}
+              />
             </>
-          )}>
+          }
+        >
           <Box>
-            {"The vendors have made " + data.credits + " credits so far."}
+            {'The vendors have made ' + data.credits + ' credits so far.'}
           </Box>
           <Divider />
           <LabeledList>
-            {bluespace_network_gases.map(gas => (
+            {bluespace_network_gases.map((gas) => (
               <>
                 <Stack key={gas.name}>
                   <Stack.Item color="label" basis={10} ml={1}>
-                    {getGasLabel(gas.name) + " prices: "}
+                    {getGasLabel(gas.name) + ' prices: '}
                     <br />
                     <Box mt={0.25}>
                       <NumberInput
@@ -89,10 +101,13 @@ export const BluespaceSender = (props, context) => {
                         unit="per mole"
                         minValue={0}
                         maxValue={100}
-                        onDrag={(e, value) => act('price', {
-                          gas_price: value,
-                          gas_type: gas.id,
-                        })} />
+                        onDrag={(e, value) =>
+                          act('price', {
+                            gas_price: value,
+                            gas_type: gas.id,
+                          })
+                        }
+                      />
                     </Box>
                   </Stack.Item>
                   <Stack.Item grow mt={mappedTopMargin} mr={1}>
@@ -100,7 +115,8 @@ export const BluespaceSender = (props, context) => {
                       color={getGasColor(gas.name)}
                       value={gas.amount}
                       minValue={0}
-                      maxValue={gasMax}>
+                      maxValue={gasMax}
+                    >
                       {toFixed(gas.amount, 2) + ' moles'}
                     </ProgressBar>
                   </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/BluespaceVendor.js b/tgui/packages/tgui/interfaces/BluespaceVendor.js
index 5db5e5c70660..6591e2745fd9 100644
--- a/tgui/packages/tgui/interfaces/BluespaceVendor.js
+++ b/tgui/packages/tgui/interfaces/BluespaceVendor.js
@@ -3,35 +3,38 @@ import { flow } from 'common/fp';
 import { toFixed } from 'common/math';
 import { multiline } from 'common/string';
 import { useBackend } from '../backend';
-import { Button, Divider, LabeledList, NumberInput, ProgressBar, Section, Stack } from '../components';
+import {
+  Button,
+  Divider,
+  LabeledList,
+  NumberInput,
+  ProgressBar,
+  Section,
+  Stack,
+} from '../components';
 import { getGasColor, getGasLabel } from '../constants';
 import { Window } from '../layouts';
 
 export const BluespaceVendor = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    on,
-    tank_filling_amount,
-    price_multiplier,
-    pumping,
-    selected_gas,
-  } = data;
+  const { on, tank_filling_amount, price_multiplier, pumping, selected_gas } =
+    data;
   const bluespace_network_gases = flow([
-    filter(gas => gas.amount >= 0.01),
-    sortBy(gas => -gas.amount),
+    filter((gas) => gas.amount >= 0.01),
+    sortBy((gas) => -gas.amount),
   ])(data.bluespace_network_gases || []);
-  const gasMax = Math.max(1, ...bluespace_network_gases.map(gas => gas.amount));
+  const gasMax = Math.max(
+    1,
+    ...bluespace_network_gases.map((gas) => gas.amount),
+  );
   return (
-    <Window
-      title="Bluespace Vendor"
-      width={500}
-      height={600}>
+    <Window title="Bluespace Vendor" width={500} height={600}>
       <Window.Content>
         <Stack vertical fill>
           <Stack.Item>
             <Section
               title="Controls"
-              buttons={(
+              buttons={
                 <>
                   <Button
                     ml={1}
@@ -40,15 +43,18 @@ export const BluespaceVendor = (props, context) => {
                     disabled={
                       data.pumping || data.inserted_tank || !data.tank_amount
                     }
-                    onClick={() => act('tank_prepare')} />
+                    onClick={() => act('tank_prepare')}
+                  />
                   <Button
                     ml={1}
                     icon="minus"
                     content="Remove Tank"
                     disabled={data.pumping || !data.inserted_tank}
-                    onClick={() => act('tank_expel')} />
+                    onClick={() => act('tank_expel')}
+                  />
                 </>
-              )}>
+              }
+            >
               <Stack>
                 <Stack.Item>
                   <NumberInput
@@ -58,9 +64,12 @@ export const BluespaceVendor = (props, context) => {
                     unit="% tank filling goal"
                     minValue={0}
                     maxValue={100}
-                    onDrag={(e, value) => act('pumping_rate', {
-                      rate: value,
-                    })} />
+                    onDrag={(e, value) =>
+                      act('pumping_rate', {
+                        rate: value,
+                      })
+                    }
+                  />
                 </Stack.Item>
                 <Stack.Item grow>
                   {
@@ -70,12 +79,11 @@ export const BluespaceVendor = (props, context) => {
                         good: [0.67, 1],
                         average: [0.34, 0.66],
                         bad: [0, 0.33],
-                      }} />
+                      }}
+                    />
                   }
                 </Stack.Item>
               </Stack>
-
-
             </Section>
           </Stack.Item>
           <Stack.Item grow>
@@ -83,7 +91,7 @@ export const BluespaceVendor = (props, context) => {
               scrollable
               fill
               title="Bluespace Network Gases"
-              buttons={(
+              buttons={
                 <Button
                   color="transparent"
                   icon="info"
@@ -92,45 +100,57 @@ export const BluespaceVendor = (props, context) => {
                   Quick guide for machine use: prepare a tank to create a
                   new one in the machine, pick how much you want it filled,
                   and finally press start on the gas of your choice!
-                `} />
-              )}>
+                `}
+                />
+              }
+            >
               <LabeledList>
-                {bluespace_network_gases.map(gas => (
+                {bluespace_network_gases.map((gas) => (
                   <>
                     <Stack key={gas.name}>
                       <Stack.Item color="label" basis={8} ml={1}>
-                        {getGasLabel(gas.name) + " is " + gas.price + " credits per mole"}
+                        {getGasLabel(gas.name) +
+                          ' is ' +
+                          gas.price +
+                          ' credits per mole'}
                       </Stack.Item>
                       <Stack.Item grow mt={1}>
                         <ProgressBar
                           color={getGasColor(gas.name)}
                           value={gas.amount}
                           minValue={0}
-                          maxValue={gasMax}>
+                          maxValue={gasMax}
+                        >
                           {toFixed(gas.amount, 2) + ' moles'}
                         </ProgressBar>
                       </Stack.Item>
                       <Stack.Item ml={-0.1} mr={1} mt={1}>
-                        {!data.pumping && data.selected_gas !== gas.id && (
+                        {(!data.pumping && data.selected_gas !== gas.id && (
                           <Button
                             ml={1}
                             icon="play"
                             tooltipPosition="left"
-                            tooltip={"Start adding " + gas.name + "."}
+                            tooltip={'Start adding ' + gas.name + '.'}
                             disabled={!data.inserted_tank}
-                            onClick={() => act('start_pumping', {
-                              gas_id: gas.id,
-                            })} />
-                        ) || (
+                            onClick={() =>
+                              act('start_pumping', {
+                                gas_id: gas.id,
+                              })
+                            }
+                          />
+                        )) || (
                           <Button
                             ml={1}
                             disabled={data.selected_gas !== gas.id}
                             icon="minus"
                             tooltipPosition="left"
-                            tooltip={"Stop adding " + gas.name + "."}
-                            onClick={() => act('stop_pumping', {
-                              gas_id: gas.id,
-                            })} />
+                            tooltip={'Stop adding ' + gas.name + '.'}
+                            onClick={() =>
+                              act('stop_pumping', {
+                                gas_id: gas.id,
+                              })
+                            }
+                          />
                         )}
                       </Stack.Item>
                     </Stack>
diff --git a/tgui/packages/tgui/interfaces/BorgPanel.js b/tgui/packages/tgui/interfaces/BorgPanel.js
index 9e2d97db6ecf..627090477bef 100644
--- a/tgui/packages/tgui/interfaces/BorgPanel.js
+++ b/tgui/packages/tgui/interfaces/BorgPanel.js
@@ -13,128 +13,144 @@ export const BorgPanel = (props, context) => {
   const ais = data.ais || [];
   const laws = data.laws || [];
   return (
-    <Window
-      title="Borg Panel"
-      width={700}
-      height={700}>
+    <Window title="Borg Panel" width={700} height={700}>
       <Window.Content scrollable>
         <Section
           title={borg.name}
-          buttons={(
+          buttons={
             <Button
               icon="pencil-alt"
               content="Rename"
-              onClick={() => act('rename')} />
-          )}>
+              onClick={() => act('rename')}
+            />
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Status">
               <Button
                 icon={borg.emagged ? 'check-square-o' : 'square-o'}
                 content="Emagged"
                 selected={borg.emagged}
-                onClick={() => act('toggle_emagged')} />
+                onClick={() => act('toggle_emagged')}
+              />
               <Button
                 icon={borg.lockdown ? 'check-square-o' : 'square-o'}
                 content="Locked Down"
                 selected={borg.lockdown}
-                onClick={() => act('toggle_lockdown')} />
+                onClick={() => act('toggle_lockdown')}
+              />
               <Button
                 icon={borg.scrambledcodes ? 'check-square-o' : 'square-o'}
                 content="Scrambled Codes"
                 selected={borg.scrambledcodes}
-                onClick={() => act('toggle_scrambledcodes')} />
+                onClick={() => act('toggle_scrambledcodes')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Charge">
               {!cell.missing ? (
-                <ProgressBar
-                  value={cellPercent}>
+                <ProgressBar value={cellPercent}>
                   {cell.charge + ' / ' + cell.maxcharge}
                 </ProgressBar>
               ) : (
-                <span className="color-bad">
-                  No cell installed
-                </span>
+                <span className="color-bad">No cell installed</span>
               )}
               <br />
               <Button
                 icon="pencil-alt"
                 content="Set"
-                onClick={() => act('set_charge')} />
+                onClick={() => act('set_charge')}
+              />
               <Button
                 icon="eject"
                 content="Change"
-                onClick={() => act('change_cell')} />
+                onClick={() => act('change_cell')}
+              />
               <Button
                 icon="trash"
                 content="Remove"
                 color="bad"
-                onClick={() => act('remove_cell')} />
+                onClick={() => act('remove_cell')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Radio Channels">
-              {channels.map(channel => (
+              {channels.map((channel) => (
                 <Button
                   key={channel.name}
                   icon={channel.installed ? 'check-square-o' : 'square-o'}
                   content={channel.name}
                   selected={channel.installed}
-                  onClick={() => act('toggle_radio', {
-                    channel: channel.name,
-                  })} />
+                  onClick={() =>
+                    act('toggle_radio', {
+                      channel: channel.name,
+                    })
+                  }
+                />
               ))}
             </LabeledList.Item>
             <LabeledList.Item label="Model">
-              {modules.map(module => (
+              {modules.map((module) => (
                 <Button
                   key={module.type}
-                  icon={borg.active_module === module.type
-                    ? 'check-square-o'
-                    : 'square-o'}
+                  icon={
+                    borg.active_module === module.type
+                      ? 'check-square-o'
+                      : 'square-o'
+                  }
                   content={module.name}
                   selected={borg.active_module === module.type}
-                  onClick={() => act('setmodule', {
-                    module: module.type,
-                  })} />
+                  onClick={() =>
+                    act('setmodule', {
+                      module: module.type,
+                    })
+                  }
+                />
               ))}
             </LabeledList.Item>
             <LabeledList.Item label="Upgrades">
-              {upgrades.map(upgrade => (
+              {upgrades.map((upgrade) => (
                 <Button
                   key={upgrade.type}
                   icon={upgrade.installed ? 'check-square-o' : 'square-o'}
                   content={upgrade.name}
                   selected={upgrade.installed}
-                  onClick={() => act('toggle_upgrade', {
-                    upgrade: upgrade.type,
-                  })} />
+                  onClick={() =>
+                    act('toggle_upgrade', {
+                      upgrade: upgrade.type,
+                    })
+                  }
+                />
               ))}
             </LabeledList.Item>
             <LabeledList.Item label="Master AI">
-              {ais.map(ai => (
+              {ais.map((ai) => (
                 <Button
                   key={ai.ref}
                   icon={ai.connected ? 'check-square-o' : 'square-o'}
                   content={ai.name}
                   selected={ai.connected}
-                  onClick={() => act('slavetoai', {
-                    slavetoai: ai.ref,
-                  })} />
+                  onClick={() =>
+                    act('slavetoai', {
+                      slavetoai: ai.ref,
+                    })
+                  }
+                />
               ))}
             </LabeledList.Item>
           </LabeledList>
         </Section>
         <Section
           title="Laws"
-          buttons={(
+          buttons={
             <Button
               icon={borg.lawupdate ? 'check-square-o' : 'square-o'}
               content="Lawsync"
               selected={borg.lawupdate}
-              onClick={() => act('toggle_lawupdate')} />
-          )}>
-          {laws.map(law => (
-            <Box key={law}>
-              {law}
-            </Box>
+              onClick={() => act('toggle_lawupdate')}
+            />
+          }
+        >
+          {laws.map((law) => (
+            <Box key={law}>{law}</Box>
           ))}
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/BountyBoard.js b/tgui/packages/tgui/interfaces/BountyBoard.js
index 1e9e8f466348..8e9146defdd5 100644
--- a/tgui/packages/tgui/interfaces/BountyBoard.js
+++ b/tgui/packages/tgui/interfaces/BountyBoard.js
@@ -1,14 +1,22 @@
 import { useBackend } from '../backend';
 import { UserDetails } from './Vending';
-import { BlockQuote, Box, Button, Collapsible, Flex, NumberInput, Section, Stack, TextArea } from '../components';
+import {
+  BlockQuote,
+  Box,
+  Button,
+  Collapsible,
+  Flex,
+  NumberInput,
+  Section,
+  Stack,
+  TextArea,
+} from '../components';
 import { formatMoney } from '../format';
 import { Window } from '../layouts';
 
 export const BountyBoard = (props, context) => {
   return (
-    <Window
-      width={550}
-      height={600}>
+    <Window width={550} height={600}>
       <Window.Content scrollable>
         <BountyBoardContent />
       </Window.Content>
@@ -31,28 +39,22 @@ export const BountyBoardContent = (props, context) => {
   return (
     <>
       <Section
-        title={"User Details"}
-        buttons={(
+        title={'User Details'}
+        buttons={
           <Button
             icon="power-off"
             content="Reset Account"
-            onClick={() => act('clear')} />
-        )}>
+            onClick={() => act('clear')}
+          />
+        }
+      >
         <UserDetails />
       </Section>
-      <Flex
-        mb={1}>
-        <Flex.Item
-          grow={1}
-          basis={0}>
-          {requests?.map(request => (
-            <Collapsible
-              key={request.name}
-              title={request.owner}
-              width="300px">
-              <Section
-                key={request.name}
-                width="300px">
+      <Flex mb={1}>
+        <Flex.Item grow={1} basis={0}>
+          {requests?.map((request) => (
+            <Collapsible key={request.name} title={request.owner} width="300px">
+              <Section key={request.name} width="300px">
                 <Stack align="baseline">
                   <Stack.Item bold width="310px">
                     {request.owner}
@@ -65,68 +67,70 @@ export const BountyBoardContent = (props, context) => {
                       fluid
                       icon="pen-fancy"
                       content="Apply"
-                      disabled={
-                        request.owner === user.name
+                      disabled={request.owner === user.name}
+                      onClick={() =>
+                        act('apply', {
+                          request: request.acc_number,
+                        })
                       }
-                      onClick={() => act('apply', {
-                        request: request.acc_number,
-                      })} />
+                    />
                     <Button
                       fluid
                       icon="trash-alt"
                       content="Delete"
                       color="red"
-                      onClick={() => act('deleteRequest', {
-                        request: request.acc_number,
-                      })} />
+                      onClick={() =>
+                        act('deleteRequest', {
+                          request: request.acc_number,
+                        })
+                      }
+                    />
                   </Stack.Item>
                 </Stack>
-                <BlockQuote
-                  pt={1}
-                  align="center">
+                <BlockQuote pt={1} align="center">
                   <i>&quot;{request.description}&quot;</i>
                 </BlockQuote>
-                <Section
-                  title="Request Applicants">
-                  {applicants?.map(applicant => (
-                    applicant.request_id === request.acc_number && (
-                      <Flex>
-                        <Flex.Item
-                          grow={1}
-                          p={0.5}
-                          backgroundColor={backColor}
-                          width="500px"
-                          textAlign="center"
-                          style={{
-                            border: `2px solid ${color}`,
-                          }}>
-                          {applicant.name}
-                        </Flex.Item>
-                        <Flex.Item
-                          align="end">
-                          <Button
-                            fluid
-                            p={1}
-                            icon="cash-register"
-                            tooltip="Pay out to this applicant."
-                            onClick={() => act('payApplicant', {
-                              applicant: applicant.requestee_id,
-                              request: request.acc_number,
-                            })} />
-                        </Flex.Item>
-                      </Flex>
-                    )
-                  ))}
+                <Section title="Request Applicants">
+                  {applicants?.map(
+                    (applicant) =>
+                      applicant.request_id === request.acc_number && (
+                        <Flex>
+                          <Flex.Item
+                            grow={1}
+                            p={0.5}
+                            backgroundColor={backColor}
+                            width="500px"
+                            textAlign="center"
+                            style={{
+                              border: `2px solid ${color}`,
+                            }}
+                          >
+                            {applicant.name}
+                          </Flex.Item>
+                          <Flex.Item align="end">
+                            <Button
+                              fluid
+                              p={1}
+                              icon="cash-register"
+                              tooltip="Pay out to this applicant."
+                              onClick={() =>
+                                act('payApplicant', {
+                                  applicant: applicant.requestee_id,
+                                  request: request.acc_number,
+                                })
+                              }
+                            />
+                          </Flex.Item>
+                        </Flex>
+                      ),
+                  )}
                 </Section>
               </Section>
             </Collapsible>
           ))}
         </Flex.Item>
         <Flex.Item>
-          <Collapsible
-            title="New Bounty"
-            width="220px"
-            color="green">
+          <Collapsible title="New Bounty" width="220px" color="green">
             <Section>
               <TextArea
                 fluid
@@ -134,9 +138,12 @@ export const BountyBoardContent = (props, context) => {
                 width="200px"
                 backgroundColor="black"
                 textColor="white"
-                onChange={(e, value) => act('bountyText', {
-                  bountytext: value,
-                })} />
+                onChange={(e, value) =>
+                  act('bountyText', {
+                    bountytext: value,
+                  })
+                }
+              />
               <Box>
                 <NumberInput
                   animate
@@ -145,14 +152,18 @@ export const BountyBoardContent = (props, context) => {
                   maxValue={1000}
                   value={bountyValue}
                   width="80px"
-                  onChange={(e, value) => act('bountyVal', {
-                    bountyval: value,
-                  })} />
+                  onChange={(e, value) =>
+                    act('bountyVal', {
+                      bountyval: value,
+                    })
+                  }
+                />
                 <Button
                   icon="print"
                   content="Submit bounty"
-                  disabled={user.name === "Unknown"}
-                  onClick={() => act('createBounty')} />
+                  disabled={user.name === 'Unknown'}
+                  onClick={() => act('createBounty')}
+                />
               </Box>
             </Section>
           </Collapsible>
diff --git a/tgui/packages/tgui/interfaces/BrigTimer.js b/tgui/packages/tgui/interfaces/BrigTimer.js
index 8f7520d4dd91..b7a26077be61 100644
--- a/tgui/packages/tgui/interfaces/BrigTimer.js
+++ b/tgui/packages/tgui/interfaces/BrigTimer.js
@@ -5,55 +5,58 @@ import { Window } from '../layouts';
 export const BrigTimer = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={300}
-      height={138}>
+    <Window width={300} height={138}>
       <Window.Content scrollable>
         <Section
           title="Cell Timer"
-          buttons={(
+          buttons={
             <>
               <Button
                 icon="clock-o"
                 content={data.timing ? 'Stop' : 'Start'}
                 selected={data.timing}
-                onClick={() => act(data.timing ? 'stop' : 'start')} />
+                onClick={() => act(data.timing ? 'stop' : 'start')}
+              />
               <Button
                 icon="lightbulb-o"
                 content={data.flash_charging ? 'Recharging' : 'Flash'}
                 disabled={data.flash_charging}
-                onClick={() => act('flash')} />
+                onClick={() => act('flash')}
+              />
             </>
-          )}>
+          }
+        >
           <Button
             icon="fast-backward"
-            onClick={() => act('time', { adjust: -600 })} />
+            onClick={() => act('time', { adjust: -600 })}
+          />
           <Button
             icon="backward"
-            onClick={() => act('time', { adjust: -100 })} />
-          {' '}
+            onClick={() => act('time', { adjust: -100 })}
+          />{' '}
           {String(data.minutes).padStart(2, '0')}:
-          {String(data.seconds).padStart(2, '0')}
-          {' '}
-          <Button
-            icon="forward"
-            onClick={() => act('time', { adjust: 100 })} />
+          {String(data.seconds).padStart(2, '0')}{' '}
+          <Button icon="forward" onClick={() => act('time', { adjust: 100 })} />
           <Button
             icon="fast-forward"
-            onClick={() => act('time', { adjust: 600 })} />
+            onClick={() => act('time', { adjust: 600 })}
+          />
           <br />
           <Button
             icon="hourglass-start"
             content="Short"
-            onClick={() => act('preset', { preset: 'short' })} />
+            onClick={() => act('preset', { preset: 'short' })}
+          />
           <Button
             icon="hourglass-start"
             content="Medium"
-            onClick={() => act('preset', { preset: 'medium' })} />
+            onClick={() => act('preset', { preset: 'medium' })}
+          />
           <Button
             icon="hourglass-start"
             content="Long"
-            onClick={() => act('preset', { preset: 'long' })} />
+            onClick={() => act('preset', { preset: 'long' })}
+          />
         </Section>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/CTFPanel.js b/tgui/packages/tgui/interfaces/CTFPanel.js
index d9c9bdf25d3b..3adbcac1b6c1 100644
--- a/tgui/packages/tgui/interfaces/CTFPanel.js
+++ b/tgui/packages/tgui/interfaces/CTFPanel.js
@@ -7,10 +7,7 @@ export const CTFPanel = (props, context) => {
   const teams = data.teams || [];
   const enabled = data.enabled || [];
   return (
-    <Window
-      title="CTF Panel"
-      width={700}
-      height={600}>
+    <Window title="CTF Panel" width={700} height={600}>
       <Window.Content scrollable>
         <Box textAlign="center" fontSize="18px">
           {enabled}
@@ -19,24 +16,21 @@ export const CTFPanel = (props, context) => {
         <Divider />
 
         <Flex align="center" wrap="wrap" textAlign="center" m={-0.5}>
-          {teams.map(team => (
+          {teams.map((team) => (
             <Flex.Item key={team.name} width="49%" m={0.5} mb={8}>
-              <Section
-                key={team.name}
-                title={`${team.color} Team`}
-              >
+              <Section key={team.name} title={`${team.color} Team`}>
                 <Stack fill mb={1}>
                   <Stack.Item grow>
                     <Box>
                       <b>{team.team_size}</b> member
-                      {team.team_size === 1 ? "" : "s"}
+                      {team.team_size === 1 ? '' : 's'}
                     </Box>
                   </Stack.Item>
 
                   <Stack.Item grow>
                     <Box>
                       <b>{team.score}</b> point
-                      {team.score === 1 ? "" : "s"}
+                      {team.score === 1 ? '' : 's'}
                     </Box>
                   </Stack.Item>
                 </Stack>
@@ -46,18 +40,24 @@ export const CTFPanel = (props, context) => {
                   fontSize="18px"
                   fluid={1}
                   color={team.color.toLowerCase()}
-                  onClick={() => act('jump', {
-                    refs: team.refs,
-                  })} />
+                  onClick={() =>
+                    act('jump', {
+                      refs: team.refs,
+                    })
+                  }
+                />
 
                 <Button
                   content="Join"
                   fontSize="18px"
                   fluid={1}
                   color={team.color.toLowerCase()}
-                  onClick={() => act('join', {
-                    refs: team.refs,
-                  })} />
+                  onClick={() =>
+                    act('join', {
+                      refs: team.refs,
+                    })
+                  }
+                />
               </Section>
             </Flex.Item>
           ))}
diff --git a/tgui/packages/tgui/interfaces/CameraConsole.js b/tgui/packages/tgui/interfaces/CameraConsole.js
index c2a4a23ef9b1..cd73d5f60036 100644
--- a/tgui/packages/tgui/interfaces/CameraConsole.js
+++ b/tgui/packages/tgui/interfaces/CameraConsole.js
@@ -14,13 +14,10 @@ export const prevNextCamera = (cameras, activeCamera) => {
   if (!activeCamera) {
     return [];
   }
-  const index = cameras.findIndex(camera => (
-    camera.name === activeCamera.name
-  ));
-  return [
-    cameras[index - 1]?.name,
-    cameras[index + 1]?.name,
-  ];
+  const index = cameras.findIndex(
+    (camera) => camera.name === activeCamera.name,
+  );
+  return [cameras[index - 1]?.name, cameras[index + 1]?.name];
 };
 
 /**
@@ -29,14 +26,14 @@ export const prevNextCamera = (cameras, activeCamera) => {
  * Filters cameras, applies search terms and sorts the alphabetically.
  */
 export const selectCameras = (cameras, searchText = '') => {
-  const testSearch = createSearch(searchText, camera => camera.name);
+  const testSearch = createSearch(searchText, (camera) => camera.name);
   return flow([
     // Null camera filter
-    filter(camera => camera?.name),
+    filter((camera) => camera?.name),
     // Optional search term
     searchText && filter(testSearch),
     // Slightly expensive, but way better than sorting in BYOND
-    sortBy(camera => camera.name),
+    sortBy((camera) => camera.name),
   ])(cameras);
 };
 
@@ -44,14 +41,12 @@ export const CameraConsole = (props, context) => {
   const { act, data } = useBackend(context);
   const { mapRef, activeCamera } = data;
   const cameras = selectCameras(data.cameras);
-  const [
-    prevCameraName,
-    nextCameraName,
-  ] = prevNextCamera(cameras, activeCamera);
+  const [prevCameraName, nextCameraName] = prevNextCamera(
+    cameras,
+    activeCamera,
+  );
   return (
-    <Window
-      width={870}
-      height={708}>
+    <Window width={870} height={708}>
       <div className="CameraConsole__left">
         <Window.Content scrollable>
           <CameraConsoleContent />
@@ -60,30 +55,35 @@ export const CameraConsole = (props, context) => {
       <div className="CameraConsole__right">
         <div className="CameraConsole__toolbar">
           <b>Camera: </b>
-          {activeCamera
-            && activeCamera.name
-            || '—'}
+          {(activeCamera && activeCamera.name) || '—'}
         </div>
         <div className="CameraConsole__toolbarRight">
           <Button
             icon="chevron-left"
             disabled={!prevCameraName}
-            onClick={() => act('switch_camera', {
-              name: prevCameraName,
-            })} />
+            onClick={() =>
+              act('switch_camera', {
+                name: prevCameraName,
+              })
+            }
+          />
           <Button
             icon="chevron-right"
             disabled={!nextCameraName}
-            onClick={() => act('switch_camera', {
-              name: nextCameraName,
-            })} />
+            onClick={() =>
+              act('switch_camera', {
+                name: nextCameraName,
+              })
+            }
+          />
         </div>
         <ByondUi
           className="CameraConsole__map"
           params={{
             id: mapRef,
             type: 'map',
-          }} />
+          }}
+        />
       </div>
     </Window>
   );
@@ -91,32 +91,25 @@ export const CameraConsole = (props, context) => {
 
 export const CameraConsoleContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const [
-    searchText,
-    setSearchText,
-  ] = useLocalState(context, 'searchText', '');
+  const [searchText, setSearchText] = useLocalState(context, 'searchText', '');
   const { activeCamera } = data;
   const cameras = selectCameras(data.cameras, searchText);
   return (
-    <Flex
-      direction={"column"}
-      height="100%">
+    <Flex direction={'column'} height="100%">
       <Flex.Item>
         <Input
           autoFocus
           fluid
           mt={1}
           placeholder="Search for a camera"
-          onInput={(e, value) => setSearchText(value)} />
+          onInput={(e, value) => setSearchText(value)}
+        />
       </Flex.Item>
-      <Flex.Item
-        height="100%">
-        <Section
-          fill
-          scrollable>
-          {cameras.map(camera => (
-          // We're not using the component here because performance
-          // would be absolutely abysmal (50+ ms for each re-render).
+      <Flex.Item height="100%">
+        <Section fill scrollable>
+          {cameras.map((camera) => (
+            // We're not using the component here because performance
+            // would be absolutely abysmal (50+ ms for each re-render).
             <div
               key={camera.name}
               title={camera.name}
@@ -125,13 +118,16 @@ export const CameraConsoleContent = (props, context) => {
                 'Button--fluid',
                 'Button--color--transparent',
                 'Button--ellipsis',
-                activeCamera
-                && camera.name === activeCamera.name
-                && 'Button--selected',
+                activeCamera &&
+                  camera.name === activeCamera.name &&
+                  'Button--selected',
               ])}
-              onClick={() => act('switch_camera', {
-                name: camera.name,
-              })}>
+              onClick={() =>
+                act('switch_camera', {
+                  name: camera.name,
+                })
+              }
+            >
               {camera.name}
             </div>
           ))}
diff --git a/tgui/packages/tgui/interfaces/Canister.js b/tgui/packages/tgui/interfaces/Canister.js
index 4230dabafa51..a70728a32f5f 100644
--- a/tgui/packages/tgui/interfaces/Canister.js
+++ b/tgui/packages/tgui/interfaces/Canister.js
@@ -1,10 +1,21 @@
 import { toFixed } from 'common/math';
 import { useBackend } from '../backend';
-import { Box, Button, Flex, Icon, Knob, LabeledControls, LabeledList, RoundGauge, Section, Tooltip } from '../components';
+import {
+  Box,
+  Button,
+  Flex,
+  Icon,
+  Knob,
+  LabeledControls,
+  LabeledList,
+  RoundGauge,
+  Section,
+  Tooltip,
+} from '../components';
 import { formatSiUnit } from '../format';
 import { Window } from '../layouts';
 
-const formatPressure = value => {
+const formatPressure = (value) => {
   if (value < 10000) {
     return toFixed(value) + ' kPa';
   }
@@ -30,58 +41,55 @@ export const Canister = (props, context) => {
     restricted,
   } = data;
   return (
-    <Window
-      width={350}
-      height={275}>
+    <Window width={350} height={275}>
       <Window.Content>
         <Flex direction="column" height="100%">
           <Flex.Item mb={1}>
             <Section
               title="Canister"
-              buttons={(
+              buttons={
                 <>
                   {!!isPrototype && (
                     <Button
                       mr={1}
                       icon={restricted ? 'lock' : 'unlock'}
                       color="caution"
-                      content={restricted
-                        ? 'Engineering'
-                        : 'Public'}
-                      onClick={() => act('restricted')} />
+                      content={restricted ? 'Engineering' : 'Public'}
+                      onClick={() => act('restricted')}
+                    />
                   )}
                   <Button
                     icon={data.shielding ? 'power-off' : 'times'}
                     content={data.shielding ? 'Shielding-ON' : 'Shielding-OFF'}
                     selected={data.shielding}
-                    onClick={() => act('shielding')} />
+                    onClick={() => act('shielding')}
+                  />
                   <Button
                     icon="pencil-alt"
                     content="Relabel"
-                    onClick={() => act('relabel')} />
+                    onClick={() => act('relabel')}
+                  />
                 </>
-              )}>
+              }
+            >
               <LabeledControls>
-                <LabeledControls.Item
-                  minWidth="66px"
-                  label="Pressure">
+                <LabeledControls.Item minWidth="66px" label="Pressure">
                   <RoundGauge
                     size={1.75}
                     value={tankPressure}
                     minValue={0}
                     maxValue={pressureLimit}
-                    alertAfter={pressureLimit * 0.70}
+                    alertAfter={pressureLimit * 0.7}
                     ranges={{
-                      "good": [0, pressureLimit * 0.70],
-                      "average": [pressureLimit * 0.70, pressureLimit * 0.85],
-                      "bad": [pressureLimit * 0.85, pressureLimit],
+                      good: [0, pressureLimit * 0.7],
+                      average: [pressureLimit * 0.7, pressureLimit * 0.85],
+                      bad: [pressureLimit * 0.85, pressureLimit],
                     }}
-                    format={formatPressure} />
+                    format={formatPressure}
+                  />
                 </LabeledControls.Item>
                 <LabeledControls.Item label="Regulator">
-                  <Box
-                    position="relative"
-                    left="-8px">
+                  <Box position="relative" left="-8px">
                     <Knob
                       size={1.25}
                       color={!!valveOpen && 'yellow'}
@@ -91,9 +99,12 @@ export const Canister = (props, context) => {
                       maxValue={maxReleasePressure}
                       step={5}
                       stepPixelSize={1}
-                      onDrag={(e, value) => act('pressure', {
-                        pressure: value,
-                      })} />
+                      onDrag={(e, value) =>
+                        act('pressure', {
+                          pressure: value,
+                        })
+                      }
+                    />
                     <Button
                       fluid
                       position="absolute"
@@ -101,9 +112,12 @@ export const Canister = (props, context) => {
                       right="-20px"
                       color="transparent"
                       icon="fast-forward"
-                      onClick={() => act('pressure', {
-                        pressure: maxReleasePressure,
-                      })} />
+                      onClick={() =>
+                        act('pressure', {
+                          pressure: maxReleasePressure,
+                        })
+                      }
+                    />
                     <Button
                       fluid
                       position="absolute"
@@ -111,9 +125,12 @@ export const Canister = (props, context) => {
                       right="-20px"
                       color="transparent"
                       icon="undo"
-                      onClick={() => act('pressure', {
-                        pressure: defaultReleasePressure,
-                      })} />
+                      onClick={() =>
+                        act('pressure', {
+                          pressure: defaultReleasePressure,
+                        })
+                      }
+                    />
                   </Box>
                 </LabeledControls.Item>
                 <LabeledControls.Item label="Valve">
@@ -122,26 +139,24 @@ export const Canister = (props, context) => {
                     width="50px"
                     lineHeight={2}
                     fontSize="11px"
-                    color={valveOpen
-                      ? (hasHoldingTank ? 'caution' : 'danger')
-                      : null}
+                    color={
+                      valveOpen ? (hasHoldingTank ? 'caution' : 'danger') : null
+                    }
                     content={valveOpen ? 'Open' : 'Closed'}
-                    onClick={() => act('valve')} />
+                    onClick={() => act('valve')}
+                  />
                 </LabeledControls.Item>
-                <LabeledControls.Item
-                  mr={1}
-                  label="Port">
+                <LabeledControls.Item mr={1} label="Port">
                   <Tooltip
-                    content={portConnected
-                      ? 'Connected'
-                      : 'Disconnected'}
+                    content={portConnected ? 'Connected' : 'Disconnected'}
                     position="top"
                   >
                     <Box position="relative">
                       <Icon
                         size={1.25}
                         name={portConnected ? 'plug' : 'times'}
-                        color={portConnected ? 'good' : 'bad'} />
+                        color={portConnected ? 'good' : 'bad'}
+                      />
                     </Box>
                   </Tooltip>
                 </LabeledControls.Item>
@@ -149,9 +164,9 @@ export const Canister = (props, context) => {
             </Section>
             <Section>
               <Box>
-                {data.has_cell ? (
-                  "Cell charge at: " + data.cell_charge + "%"
-                ) : "Missing Cell"}
+                {data.has_cell
+                  ? 'Cell charge at: ' + data.cell_charge + '%'
+                  : 'Missing Cell'}
               </Box>
             </Section>
           </Flex.Item>
@@ -159,13 +174,17 @@ export const Canister = (props, context) => {
             <Section
               height="100%"
               title="Holding Tank"
-              buttons={!!hasHoldingTank && (
-                <Button
-                  icon="eject"
-                  color={valveOpen && 'danger'}
-                  content="Eject"
-                  onClick={() => act('eject')} />
-              )}>
+              buttons={
+                !!hasHoldingTank && (
+                  <Button
+                    icon="eject"
+                    color={valveOpen && 'danger'}
+                    content="Eject"
+                    onClick={() => act('eject')}
+                  />
+                )
+              }
+            >
               {!!hasHoldingTank && (
                 <LabeledList>
                   <LabeledList.Item label="Label">
@@ -178,20 +197,23 @@ export const Canister = (props, context) => {
                       maxValue={holdingTankFragPressure * 1.15}
                       alertAfter={holdingTankLeakPressure}
                       ranges={{
-                        "good": [0, holdingTankLeakPressure],
-                        "average": [holdingTankLeakPressure, holdingTankFragPressure],
-                        "bad": [holdingTankFragPressure, holdingTankFragPressure * 1.15],
+                        good: [0, holdingTankLeakPressure],
+                        average: [
+                          holdingTankLeakPressure,
+                          holdingTankFragPressure,
+                        ],
+                        bad: [
+                          holdingTankFragPressure,
+                          holdingTankFragPressure * 1.15,
+                        ],
                       }}
                       format={formatPressure}
-                      size={1.75} />
+                      size={1.75}
+                    />
                   </LabeledList.Item>
                 </LabeledList>
               )}
-              {!hasHoldingTank && (
-                <Box color="average">
-                  No Holding Tank
-                </Box>
-              )}
+              {!hasHoldingTank && <Box color="average">No Holding Tank</Box>}
             </Section>
           </Flex.Item>
         </Flex>
diff --git a/tgui/packages/tgui/interfaces/Canvas.tsx b/tgui/packages/tgui/interfaces/Canvas.tsx
index 0d4f845b40fe..c53bf0661294 100644
--- a/tgui/packages/tgui/interfaces/Canvas.tsx
+++ b/tgui/packages/tgui/interfaces/Canvas.tsx
@@ -6,33 +6,33 @@ import { Box, Button, Flex } from '../components';
 import { Window } from '../layouts';
 
 type PaintCanvasProps = Partial<{
-  onCanvasModifiedHandler: (data : PointData[]) => void,
-  value: string[][],
-  width: number,
-  height: number,
-  imageWidth: number,
-  imageHeight: number,
-  editable: boolean,
-  drawing_color: string | null,
+  onCanvasModifiedHandler: (data: PointData[]) => void;
+  value: string[][];
+  width: number;
+  height: number;
+  imageWidth: number;
+  imageHeight: number;
+  editable: boolean;
+  drawing_color: string | null;
 }>;
 
 type PointData = {
-  x: number,
-  y: number,
-  color: Color
-}
+  x: number;
+  y: number;
+  color: Color;
+};
 
 const fromDM = (data: string[][]) => {
-  return data.map(inner => inner.map(v => Color.fromHex(v)));
+  return data.map((inner) => inner.map((v) => Color.fromHex(v)));
 };
 
 const toMassPaintFormat = (data: PointData[]) => {
-  return data.map(p => ({ x: p.x+1, y: p.y+1 })); // 1-based index dm side
+  return data.map((p) => ({ x: p.x + 1, y: p.y + 1 })); // 1-based index dm side
 };
 
 class PaintCanvas extends Component<PaintCanvasProps> {
   canvasRef: RefObject<HTMLCanvasElement>;
-  baseImageData: Color[][]
+  baseImageData: Color[][];
   modifiedElements: PointData[];
   onCanvasModified: (data: PointData[]) => void;
   drawing: boolean;
@@ -57,14 +57,18 @@ class PaintCanvas extends Component<PaintCanvasProps> {
 
   componentDidUpdate() {
     // eslint-disable-next-line max-len
-    if (this.props.value !== undefined && JSON.stringify(this.baseImageData) !== JSON.stringify(fromDM(this.props.value))) {
+    if (
+      this.props.value !== undefined &&
+      JSON.stringify(this.baseImageData) !==
+        JSON.stringify(fromDM(this.props.value))
+    ) {
       this.syncCanvas();
     }
   }
 
   prepareCanvas() {
     const canvas = this.canvasRef.current!;
-    const ctx = canvas.getContext("2d");
+    const ctx = canvas.getContext('2d');
     const width = this.props.width || canvas.width || 360;
     const height = this.props.height || canvas.height || 360;
     const x_resolution = this.props.imageWidth || 36;
@@ -83,7 +87,7 @@ class PaintCanvas extends Component<PaintCanvasProps> {
     this.modifiedElements = [];
 
     const canvas = this.canvasRef.current!;
-    const ctx = canvas.getContext("2d")!;
+    const ctx = canvas.getContext('2d')!;
     for (let x = 0; x < this.baseImageData.length; x++) {
       const element = this.baseImageData[x];
       for (let y = 0; y < element.length; y++) {
@@ -94,7 +98,7 @@ class PaintCanvas extends Component<PaintCanvasProps> {
     }
   }
 
-  eventToCoords(event : MouseEvent) {
+  eventToCoords(event: MouseEvent) {
     const canvas = this.canvasRef.current!;
     const width = this.props.width || canvas.width || 360;
     const height = this.props.height || canvas.height || 360;
@@ -107,10 +111,12 @@ class PaintCanvas extends Component<PaintCanvasProps> {
     return { x, y };
   }
 
-  handleStartDrawing(event : MouseEvent) {
-    if (!this.props.editable
-       || this.props.drawing_color === undefined
-       || this.props.drawing_color === null) {
+  handleStartDrawing(event: MouseEvent) {
+    if (
+      !this.props.editable ||
+      this.props.drawing_color === undefined ||
+      this.props.drawing_color === null
+    ) {
       return;
     }
     this.modifiedElements = [];
@@ -124,7 +130,7 @@ class PaintCanvas extends Component<PaintCanvasProps> {
     let p: PointData = { x, y, color: Color.fromHex(color) };
     this.modifiedElements.push(p);
     const canvas = this.canvasRef.current!;
-    const ctx = canvas.getContext("2d")!;
+    const ctx = canvas.getContext('2d')!;
     ctx.fillStyle = color;
     ctx.fillRect(x, y, 1, 1);
   }
@@ -143,7 +149,7 @@ class PaintCanvas extends Component<PaintCanvasProps> {
     }
     this.drawing = false;
     const canvas = this.canvasRef.current!;
-    const ctx = canvas.getContext("2d")!;
+    const ctx = canvas.getContext('2d')!;
     if (this.onCanvasModified !== undefined) {
       this.onCanvasModified(this.modifiedElements);
     }
@@ -167,14 +173,15 @@ class PaintCanvas extends Component<PaintCanvasProps> {
         onMouseDown={this.handleStartDrawing}
         onMouseMove={this.handleDrawing}
         onMouseUp={this.handleEndDrawing}
-        onMouseOut={this.handleEndDrawing}>
+        onMouseOut={this.handleEndDrawing}
+      >
         Canvas failed to render.
       </canvas>
     );
   }
 }
 
-const getImageSize = value => {
+const getImageSize = (value) => {
   const width = value.length;
   const height = width !== 0 ? value[0].length : 0;
   return [width, height];
@@ -183,22 +190,22 @@ const getImageSize = value => {
 type PaletteColor = {
   color: string;
   is_selected: boolean;
-}
+};
 
 type CanvasData = {
-  grid: string[][],
-  px_per_unit: number,
-  finalized: boolean,
-  name: string,
-  editable: boolean,
-  paint_tool_color: string | null,
-  paint_tool_palette: PaletteColor[] | null,
-  author: string | null,
-  medium: string | null,
-  patron: string | null,
-  date: string | null,
-  show_plaque: boolean
-}
+  grid: string[][];
+  px_per_unit: number;
+  finalized: boolean;
+  name: string;
+  editable: boolean;
+  paint_tool_color: string | null;
+  paint_tool_palette: PaletteColor[] | null;
+  author: string | null;
+  medium: string | null;
+  patron: string | null;
+  date: string | null;
+  show_plaque: boolean;
+};
 
 export const Canvas = (props, context) => {
   const { act, data } = useBackend<CanvasData>(context);
@@ -210,9 +217,13 @@ export const Canvas = (props, context) => {
   return (
     <Window
       width={scaled_width + 72}
-      height={scaled_height + 75
-        + (data.show_plaque ? average_plaque_height : 0)
-		+ (data.editable && data.paint_tool_palette ? palette_height : 0)}>
+      height={
+        scaled_height +
+        75 +
+        (data.show_plaque ? average_plaque_height : 0) +
+        (data.editable && data.paint_tool_palette ? palette_height : 0)
+      }
+    >
       <Window.Content>
         <Box textAlign="center">
           <PaintCanvas
@@ -222,7 +233,9 @@ export const Canvas = (props, context) => {
             width={scaled_width}
             height={scaled_height}
             drawing_color={data.paint_tool_color}
-            onCanvasModifiedHandler={(changed) => act("paint", { data: toMassPaintFormat(changed) })}
+            onCanvasModifiedHandler={(changed) =>
+              act('paint', { data: toMassPaintFormat(changed) })
+            }
             editable={data.editable}
           />
           <Flex align="center" justify="center" direction="column">
@@ -233,23 +246,29 @@ export const Canvas = (props, context) => {
                     key={`${index}`}
                     backgroundColor={element.color}
                     style={{
-                      "width": "24px",
-                      "height": "24px",
-                      "border-style": "solid",
-                      "border-color": element.is_selected ? "lightblue" : "black",
-                      "border-width": "2px",
+                      width: '24px',
+                      height: '24px',
+                      'border-style': 'solid',
+                      'border-color': element.is_selected
+                        ? 'lightblue'
+                        : 'black',
+                      'border-width': '2px',
                     }}
-                    onClick={() => act('select_color', {
-                      selected_color: element.color,
-                    })} />
+                    onClick={() =>
+                      act('select_color', {
+                        selected_color: element.color,
+                      })
+                    }
+                  />
                 ))}
               </Flex.Item>
             )}
             {!data.finalized && (
               <Flex.Item>
                 <Button.Confirm
-                  onClick={() => act("finalize")}
-                  content="Finalize" />
+                  onClick={() => act('finalize')}
+                  content="Finalize"
+                />
               </Flex.Item>
             )}
             {!!data.finalized && !!data.show_plaque && (
@@ -260,16 +279,25 @@ export const Canvas = (props, context) => {
                 textColor="black"
                 textAlign="left"
                 backgroundColor="white"
-                style={{ "border-style": "inset" }}>
-                <Box mb={1} fontSize="18px" bold>{decodeHtmlEntities(data.name)}</Box>
+                style={{ 'border-style': 'inset' }}
+              >
+                <Box mb={1} fontSize="18px" bold>
+                  {decodeHtmlEntities(data.name)}
+                </Box>
                 <Box bold>
                   {data.author}
-                  {!!data.date && `- ${new Date(data.date).getFullYear()+805}`}
+                  {!!data.date &&
+                    `- ${new Date(data.date).getFullYear() + 805}`}
                 </Box>
                 <Box italic>{data.medium}</Box>
                 <Box italic>
                   {!!data.patron && `Sponsored by ${data.patron} `}
-                  <Button icon="hand-holding-usd" color="transparent" iconColor="black" onClick={() => act("patronage")} />
+                  <Button
+                    icon="hand-holding-usd"
+                    color="transparent"
+                    iconColor="black"
+                    onClick={() => act('patronage')}
+                  />
                 </Box>
               </Flex.Item>
             )}
diff --git a/tgui/packages/tgui/interfaces/Cargo.js b/tgui/packages/tgui/interfaces/Cargo.js
index f1186f1dd452..c2e90938ba4e 100644
--- a/tgui/packages/tgui/interfaces/Cargo.js
+++ b/tgui/packages/tgui/interfaces/Cargo.js
@@ -1,15 +1,26 @@
 import { flow } from 'common/fp';
 import { filter, sortBy } from 'common/collections';
 import { useBackend, useSharedState } from '../backend';
-import { AnimatedNumber, Box, Button, Flex, Icon, Input, LabeledList, NoticeBox, Section, Stack, Table, Tabs } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  Flex,
+  Icon,
+  Input,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Stack,
+  Table,
+  Tabs,
+} from '../components';
 import { formatMoney } from '../format';
 import { Window } from '../layouts';
 
 export const Cargo = (props, context) => {
   return (
-    <Window
-      width={780}
-      height={750}>
+    <Window width={780} height={750}>
       <Window.Content scrollable>
         <CargoContent />
       </Window.Content>
@@ -20,9 +31,7 @@ export const Cargo = (props, context) => {
 export const CargoContent = (props, context) => {
   const { act, data } = useBackend(context);
   const [tab, setTab] = useSharedState(context, 'tab', 'catalog');
-  const {
-    requestonly,
-  } = data;
+  const { requestonly } = data;
   const cart = data.cart || [];
   const requests = data.requests || [];
   return (
@@ -33,51 +42,43 @@ export const CargoContent = (props, context) => {
           <Tabs.Tab
             icon="list"
             selected={tab === 'catalog'}
-            onClick={() => setTab('catalog')}>
+            onClick={() => setTab('catalog')}
+          >
             Catalog
           </Tabs.Tab>
           <Tabs.Tab
             icon="envelope"
-            textColor={tab !== 'requests'
-              && requests.length > 0
-              && 'yellow'}
+            textColor={tab !== 'requests' && requests.length > 0 && 'yellow'}
             selected={tab === 'requests'}
-            onClick={() => setTab('requests')}>
+            onClick={() => setTab('requests')}
+          >
             Requests ({requests.length})
           </Tabs.Tab>
           {!requestonly && (
             <>
               <Tabs.Tab
                 icon="shopping-cart"
-                textColor={tab !== 'cart'
-                  && cart.length > 0
-                  && 'yellow'}
+                textColor={tab !== 'cart' && cart.length > 0 && 'yellow'}
                 selected={tab === 'cart'}
-                onClick={() => setTab('cart')}>
+                onClick={() => setTab('cart')}
+              >
                 Checkout ({cart.length})
               </Tabs.Tab>
               <Tabs.Tab
                 icon="question"
                 selected={tab === 'help'}
-                onClick={() => setTab('help')}>
+                onClick={() => setTab('help')}
+              >
                 Help
               </Tabs.Tab>
             </>
           )}
         </Tabs>
       </Section>
-      {tab === 'catalog' && (
-        <CargoCatalog />
-      )}
-      {tab === 'requests' && (
-        <CargoRequests />
-      )}
-      {tab === 'cart' && (
-        <CargoCart />
-      )}
-      {tab === 'help' && (
-        <CargoHelp />
-      )}
+      {tab === 'catalog' && <CargoCatalog />}
+      {tab === 'requests' && <CargoRequests />}
+      {tab === 'cart' && <CargoCart />}
+      {tab === 'help' && <CargoHelp />}
     </Box>
   );
 };
@@ -99,40 +100,42 @@ const CargoStatus = (props, context) => {
   return (
     <Section
       title="Cargo"
-      buttons={(
+      buttons={
         <Box inline bold>
           <AnimatedNumber
             value={points}
-            format={value => formatMoney(value)} />
+            format={(value) => formatMoney(value)}
+          />
           {' credits'}
         </Box>
-      )}>
+      }
+    >
       <LabeledList>
         <LabeledList.Item label="Shuttle">
-          {docked && !requestonly && can_send &&(
+          {(docked && !requestonly && can_send && (
             <Button
-              color={grocery && "orange" || "green"}
+              color={(grocery && 'orange') || 'green'}
               content={location}
-              tooltip={grocery && "The chef is waiting on their grocery supplies." || ""}
+              tooltip={
+                (grocery && 'The chef is waiting on their grocery supplies.') ||
+                ''
+              }
               tooltipPosition="right"
-              onClick={() => act('send')} />
-          ) || location}
-        </LabeledList.Item>
-        <LabeledList.Item label="CentCom Message">
-          {message}
+              onClick={() => act('send')}
+            />
+          )) ||
+            location}
         </LabeledList.Item>
+        <LabeledList.Item label="CentCom Message">{message}</LabeledList.Item>
         {!!loan && !requestonly && (
           <LabeledList.Item label="Loan">
-            {!loan_dispatched && (
+            {(!loan_dispatched && (
               <Button
                 content="Loan Shuttle"
                 disabled={!(away && docked)}
-                onClick={() => act('loan')} />
-            ) || (
-              <Box color="bad">
-                Loaned to Centcom
-              </Box>
-            )}
+                onClick={() => act('loan')}
+              />
+            )) || <Box color="bad">Loaned to Centcom</Box>}
           </LabeledList.Item>
         )}
       </LabeledList>
@@ -152,12 +155,14 @@ const searchForSupplies = (supplies, search) => {
   search = search.toLowerCase();
 
   return flow([
-    categories => categories.flatMap(category => category.packs),
-    filter(pack =>
-      pack.name?.toLowerCase().includes(search.toLowerCase())
-      || pack.desc?.toLowerCase().includes(search.toLowerCase())),
-    sortBy(pack => pack.name),
-    packs => packs.slice(0, 25),
+    (categories) => categories.flatMap((category) => category.packs),
+    filter(
+      (pack) =>
+        pack.name?.toLowerCase().includes(search.toLowerCase()) ||
+        pack.desc?.toLowerCase().includes(search.toLowerCase()),
+    ),
+    sortBy((pack) => pack.name),
+    (packs) => packs.slice(0, 25),
   ])(supplies);
 };
 
@@ -165,52 +170,58 @@ export const CargoCatalog = (props, context) => {
   const { express } = props;
   const { act, data } = useBackend(context);
 
-  const {
-    self_paid,
-    app_cost,
-  } = data;
+  const { self_paid, app_cost } = data;
 
   const supplies = Object.values(data.supplies);
 
-  const [
-    activeSupplyName,
-    setActiveSupplyName,
-  ] = useSharedState(context, 'supply', supplies[0]?.name);
+  const [activeSupplyName, setActiveSupplyName] = useSharedState(
+    context,
+    'supply',
+    supplies[0]?.name,
+  );
 
-  const [
-    searchText,
-    setSearchText,
-  ] = useSharedState(context, "search_text", "");
+  const [searchText, setSearchText] = useSharedState(
+    context,
+    'search_text',
+    '',
+  );
 
-  const activeSupply = activeSupplyName === "search_results"
-    ? { packs: searchForSupplies(supplies, searchText) }
-    : supplies.find(supply => supply.name === activeSupplyName);
+  const activeSupply =
+    activeSupplyName === 'search_results'
+      ? { packs: searchForSupplies(supplies, searchText) }
+      : supplies.find((supply) => supply.name === activeSupplyName);
 
   return (
     <Section
       title="Catalog"
-      buttons={!express && (
-        <>
-          <CargoCartButtons />
-          <Button.Checkbox
-            ml={2}
-            content="Buy Privately"
-            checked={self_paid}
-            onClick={() => act('toggleprivate')} />
-        </>
-      )}>
+      buttons={
+        !express && (
+          <>
+            <CargoCartButtons />
+            <Button.Checkbox
+              ml={2}
+              content="Buy Privately"
+              checked={self_paid}
+              onClick={() => act('toggleprivate')}
+            />
+          </>
+        )
+      }
+    >
       <Flex>
         <Flex.Item ml={-1} mr={1}>
           <Tabs vertical>
             <Tabs.Tab
               key="search_results"
-              selected={activeSupplyName === "search_results"}>
+              selected={activeSupplyName === 'search_results'}
+            >
               <Stack align="baseline">
                 <Stack.Item>
                   <Icon name="search" />
                 </Stack.Item>
                 <Stack.Item grow>
-                  <Input fluid
+                  <Input
+                    fluid
                     placeholder="Search..."
                     value={searchText}
                     onInput={(e, value) => {
@@ -220,8 +231,8 @@ export const CargoCatalog = (props, context) => {
 
                       if (value.length) {
                         // Start showing results
-                        setActiveSupplyName("search_results");
-                      } else if (activeSupplyName === "search_results") {
+                        setActiveSupplyName('search_results');
+                      } else if (activeSupplyName === 'search_results') {
                         // return to normal category
                         setActiveSupplyName(supplies[0]?.name);
                       }
@@ -233,18 +244,20 @@ export const CargoCatalog = (props, context) => {
                       if (onInput) {
                         onInput(e, value);
                       }
-                    }} />
+                    }}
+                  />
                 </Stack.Item>
               </Stack>
             </Tabs.Tab>
-            {supplies.map(supply => (
+            {supplies.map((supply) => (
               <Tabs.Tab
                 key={supply.name}
                 selected={supply.name === activeSupplyName}
                 onClick={() => {
                   setActiveSupplyName(supply.name);
-                  setSearchText("");
-                }}>
+                  setSearchText('');
+                }}
+              >
                 {supply.name} ({supply.packs.length})
               </Tabs.Tab>
             ))}
@@ -252,7 +265,7 @@ export const CargoCatalog = (props, context) => {
         </Flex.Item>
         <Flex.Item grow={1} basis={0}>
           <Table>
-            {activeSupply?.packs.map(pack => {
+            {activeSupply?.packs.map((pack) => {
               const tags = [];
               if (pack.small_item) {
                 tags.push('Small');
@@ -261,31 +274,27 @@ export const CargoCatalog = (props, context) => {
                 tags.push('Restricted');
               }
               return (
-                <Table.Row
-                  key={pack.name}
-                  className="candystripe">
-                  <Table.Cell>
-                    {pack.name}
-                  </Table.Cell>
-                  <Table.Cell
-                    collapsing
-                    color="label"
-                    textAlign="right">
+                <Table.Row key={pack.name} className="candystripe">
+                  <Table.Cell>{pack.name}</Table.Cell>
+                  <Table.Cell collapsing color="label" textAlign="right">
                     {tags.join(', ')}
                   </Table.Cell>
-                  <Table.Cell
-                    collapsing
-                    textAlign="right">
+                  <Table.Cell collapsing textAlign="right">
                     <Button
                       fluid
                       tooltip={pack.desc}
                       tooltipPosition="left"
-                      onClick={() => act('add', {
-                        id: pack.id,
-                      })}>
-                      {formatMoney((self_paid && !pack.goody) || app_cost
-                        ? Math.round(pack.cost * 1.1)
-                        : pack.cost)}
+                      onClick={() =>
+                        act('add', {
+                          id: pack.id,
+                        })
+                      }
+                    >
+                      {formatMoney(
+                        (self_paid && !pack.goody) || app_cost
+                          ? Math.round(pack.cost * 1.1)
+                          : pack.cost,
+                      )}
                       {' cr'}
                     </Button>
                   </Table.Cell>
@@ -301,40 +310,32 @@ export const CargoCatalog = (props, context) => {
 
 const CargoRequests = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    requestonly,
-    can_send,
-    can_approve_requests,
-  } = data;
+  const { requestonly, can_send, can_approve_requests } = data;
   const requests = data.requests || [];
   // Labeled list reimplementation to squeeze extra columns out of it
   return (
     <Section
       title="Active Requests"
-      buttons={!requestonly && (
-        <Button
-          icon="times"
-          content="Clear"
-          color="transparent"
-          onClick={() => act('denyall')} />
-      )}>
-      {requests.length === 0 && (
-        <Box color="good">
-          No Requests
-        </Box>
-      )}
+      buttons={
+        !requestonly && (
+          <Button
+            icon="times"
+            content="Clear"
+            color="transparent"
+            onClick={() => act('denyall')}
+          />
+        )
+      }
+    >
+      {requests.length === 0 && <Box color="good">No Requests</Box>}
       {requests.length > 0 && (
         <Table>
-          {requests.map(request => (
-            <Table.Row
-              key={request.id}
-              className="candystripe">
+          {requests.map((request) => (
+            <Table.Row key={request.id} className="candystripe">
               <Table.Cell collapsing color="label">
                 #{request.id}
               </Table.Cell>
-              <Table.Cell>
-                {request.object}
-              </Table.Cell>
+              <Table.Cell>{request.object}</Table.Cell>
               <Table.Cell>
                 <b>{request.orderer}</b>
               </Table.Cell>
@@ -344,20 +345,26 @@ const CargoRequests = (props, context) => {
               <Table.Cell collapsing textAlign="right">
                 {formatMoney(request.cost)} cr
               </Table.Cell>
-              {(!requestonly || can_send)&& can_approve_requests &&(
+              {(!requestonly || can_send) && can_approve_requests && (
                 <Table.Cell collapsing>
                   <Button
                     icon="check"
                     color="good"
-                    onClick={() => act('approve', {
-                      id: request.id,
-                    })} />
+                    onClick={() =>
+                      act('approve', {
+                        id: request.id,
+                      })
+                    }
+                  />
                   <Button
                     icon="times"
                     color="bad"
-                    onClick={() => act('deny', {
-                      id: request.id,
-                    })} />
+                    onClick={() =>
+                      act('deny', {
+                        id: request.id,
+                      })
+                    }
+                  />
                 </Table.Cell>
               )}
             </Table.Row>
@@ -370,11 +377,7 @@ const CargoRequests = (props, context) => {
 
 const CargoCartButtons = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    requestonly,
-    can_send,
-    can_approve_requests,
-  } = data;
+  const { requestonly, can_send, can_approve_requests } = data;
   const cart = data.cart || [];
   const total = cart.reduce((total, entry) => total + entry.cost, 0);
   if (requestonly || !can_send || !can_approve_requests) {
@@ -385,99 +388,77 @@ const CargoCartButtons = (props, context) => {
       <Box inline mx={1}>
         {cart.length === 0 && 'Cart is empty'}
         {cart.length === 1 && '1 item'}
-        {cart.length >= 2 && cart.length + ' items'}
-        {' '}
+        {cart.length >= 2 && cart.length + ' items'}{' '}
         {total > 0 && `(${formatMoney(total)} cr)`}
       </Box>
       <Button
         icon="times"
         color="transparent"
         content="Clear"
-        onClick={() => act('clear')} />
+        onClick={() => act('clear')}
+      />
     </>
   );
 };
 
 const CargoCart = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    requestonly,
-    away,
-    docked,
-    location,
-    can_send,
-  } = data;
+  const { requestonly, away, docked, location, can_send } = data;
   const cart = data.cart || [];
   return (
-    <Section
-      title="Current Cart"
-      buttons={(
-        <CargoCartButtons />
-      )}>
-      {cart.length === 0 && (
-        <Box color="label">
-          Nothing in cart
-        </Box>
-      )}
+    <Section title="Current Cart" buttons={<CargoCartButtons />}>
+      {cart.length === 0 && <Box color="label">Nothing in cart</Box>}
       {cart.length > 0 && (
         <Table>
-          {cart.map(entry => (
-            <Table.Row
-              key={entry.id}
-              className="candystripe">
+          {cart.map((entry) => (
+            <Table.Row key={entry.id} className="candystripe">
               <Table.Cell collapsing color="label">
                 #{entry.id}
               </Table.Cell>
-              <Table.Cell>
-                {entry.object}
-              </Table.Cell>
+              <Table.Cell>{entry.object}</Table.Cell>
               <Table.Cell collapsing>
-                {!!entry.paid && (
-                  <b>[Paid Privately]</b>
-                )}
+                {!!entry.paid && <b>[Paid Privately]</b>}
               </Table.Cell>
-              {entry.dep_order && (
+              {(entry.dep_order && (
                 <Table.Cell collapsing textAlign="right">
                   {formatMoney(entry.cost)} cr earned on delivery
                 </Table.Cell>
-              ) || (
+              )) || (
                 <>
                   <Table.Cell collapsing textAlign="right">
                     {formatMoney(entry.cost)} cr
                   </Table.Cell>
                   <Table.Cell collapsing>
-                    {can_send &&(
+                    {can_send && (
                       <Button
                         icon="minus"
-                        onClick={() => act('remove', {
-                          id: entry.id,
-                        })} />
+                        onClick={() =>
+                          act('remove', {
+                            id: entry.id,
+                          })
+                        }
+                      />
                     )}
                   </Table.Cell>
                 </>
               )}
-
-
             </Table.Row>
           ))}
         </Table>
       )}
       {cart.length > 0 && !requestonly && (
         <Box mt={2}>
-          {away === 1 && docked === 1 && (
+          {(away === 1 && docked === 1 && (
             <Button
               color="green"
               style={{
                 'line-height': '28px',
-                'padding': '0 12px',
+                padding: '0 12px',
               }}
               content="Confirm the order"
-              onClick={() => act('send')} />
-          ) || (
-            <Box opacity={0.5}>
-              Shuttle in {location}.
-            </Box>
-          )}
+              onClick={() => act('send')}
+            />
+          )) || <Box opacity={0.5}>Shuttle in {location}.</Box>}
         </Box>
       )}
     </Section>
@@ -507,15 +488,21 @@ const CargoHelp = (props, context) => {
         with minimal technician effort required. It is slow, though, and can be
         tampered with while en route.
         <br />
-        <b>Setting up a MULEbot is easy:</b><br />
-        <b>1.</b> Drag the crate you want to deliver next to the MULEbot.<br />
-        <b>2.</b> Drag the crate on top of MULEbot. It should load on.<br />
-        <b>3.</b> Open your PDA.<br />
+        <b>Setting up a MULEbot is easy:</b>
+        <br />
+        <b>1.</b> Drag the crate you want to deliver next to the MULEbot.
+        <br />
+        <b>2.</b> Drag the crate on top of MULEbot. It should load on.
+        <br />
+        <b>3.</b> Open your PDA.
+        <br />
         <b>4.</b> Click <i>Delivery Bot Control</i>.<br />
         <b>5.</b> Click <i>Scan for Active Bots</i>.<br />
-        <b>6.</b> Choose your MULE.<br />
+        <b>6.</b> Choose your MULE.
+        <br />
         <b>7.</b> Click on <i>Destination: (set)</i>.<br />
-        <b>8.</b> Choose a destination and click OK.<br />
+        <b>8.</b> Choose a destination and click OK.
+        <br />
         <b>9.</b> Click <i>Proceed</i>.
       </Section>
       <Section title="Disposals Delivery System">
@@ -526,11 +513,16 @@ const CargoHelp = (props, context) => {
         piece of paper and mail it the same way if you (or someone at the desk)
         wants to mail a letter.
         <br />
-        <b>Using the Disposals Delivery System is even easier:</b><br />
-        <b>1.</b> Wrap your item/crate in packaging paper.<br />
-        <b>2.</b> Use the destinations tagger to choose where to send it.<br />
-        <b>3.</b> Tag the package.<br />
-        <b>4.</b> Stick it on the conveyor and let the system handle it.<br />
+        <b>Using the Disposals Delivery System is even easier:</b>
+        <br />
+        <b>1.</b> Wrap your item/crate in packaging paper.
+        <br />
+        <b>2.</b> Use the destinations tagger to choose where to send it.
+        <br />
+        <b>3.</b> Tag the package.
+        <br />
+        <b>4.</b> Stick it on the conveyor and let the system handle it.
+        <br />
       </Section>
       <NoticeBox textAlign="center" info mb={0}>
         Pondering something not included here? When in doubt, ask the QM!
diff --git a/tgui/packages/tgui/interfaces/CargoExpress.js b/tgui/packages/tgui/interfaces/CargoExpress.js
index 9cbd9aef5daa..fcc031934ea7 100644
--- a/tgui/packages/tgui/interfaces/CargoExpress.js
+++ b/tgui/packages/tgui/interfaces/CargoExpress.js
@@ -1,5 +1,11 @@
 import { useBackend } from '../backend';
-import { AnimatedNumber, Box, Button, LabeledList, Section } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  LabeledList,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 import { CargoCatalog } from './Cargo';
 import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
@@ -7,15 +13,10 @@ import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
 export const CargoExpress = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={600}
-      height={700}>
+    <Window width={600} height={700}>
       <Window.Content scrollable>
-        <InterfaceLockNoticeBox
-          accessText="a QM-level ID card" />
-        {!data.locked && (
-          <CargoExpressContent />
-        )}
+        <InterfaceLockNoticeBox accessText="a QM-level ID card" />
+        {!data.locked && <CargoExpressContent />}
       </Window.Content>
     </Window>
   );
@@ -27,33 +28,34 @@ const CargoExpressContent = (props, context) => {
     <>
       <Section
         title="Cargo Express"
-        buttons={(
+        buttons={
           <Box inline bold>
-            <AnimatedNumber
-              value={Math.round(data.points)} />
+            <AnimatedNumber value={Math.round(data.points)} />
             {' credits'}
           </Box>
-        )}>
+        }
+      >
         <LabeledList>
           <LabeledList.Item label="Landing Location">
             <Button
               content="Cargo Bay"
               selected={!data.usingBeacon}
-              onClick={() => act('LZCargo')} />
+              onClick={() => act('LZCargo')}
+            />
             <Button
               selected={data.usingBeacon}
               disabled={!data.hasBeacon}
-              onClick={() => act('LZBeacon')}>
+              onClick={() => act('LZBeacon')}
+            >
               {data.beaconzone} ({data.beaconName})
             </Button>
             <Button
               content={data.printMsg}
               disabled={!data.canBuyBeacon}
-              onClick={() => act('printBeacon')} />
-          </LabeledList.Item>
-          <LabeledList.Item label="Notice">
-            {data.message}
+              onClick={() => act('printBeacon')}
+            />
           </LabeledList.Item>
+          <LabeledList.Item label="Notice">{data.message}</LabeledList.Item>
         </LabeledList>
       </Section>
       <CargoCatalog express />
diff --git a/tgui/packages/tgui/interfaces/CargoHoldTerminal.js b/tgui/packages/tgui/interfaces/CargoHoldTerminal.js
index 82db3c9dd84a..00fba7d44fa2 100644
--- a/tgui/packages/tgui/interfaces/CargoHoldTerminal.js
+++ b/tgui/packages/tgui/interfaces/CargoHoldTerminal.js
@@ -1,19 +1,18 @@
 import { useBackend } from '../backend';
-import { AnimatedNumber, Box, Button, LabeledList, Section } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  LabeledList,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const CargoHoldTerminal = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    points,
-    pad,
-    sending,
-    status_report,
-  } = data;
+  const { points, pad, sending, status_report } = data;
   return (
-    <Window
-      width={600}
-      height={230}>
+    <Window width={600} height={230}>
       <Window.Content scrollable>
         <Section>
           <LabeledList>
@@ -26,26 +25,27 @@ export const CargoHoldTerminal = (props, context) => {
         </Section>
         <Section
           title="Cargo Pad"
-          buttons={(
+          buttons={
             <>
               <Button
-                icon={"sync"}
-                content={"Recalculate Value"}
+                icon={'sync'}
+                content={'Recalculate Value'}
                 disabled={!pad}
-                onClick={() => act('recalc')} />
+                onClick={() => act('recalc')}
+              />
               <Button
                 icon={sending ? 'times' : 'arrow-up'}
-                content={sending ? "Stop Sending" : "Send Goods"}
+                content={sending ? 'Stop Sending' : 'Send Goods'}
                 selected={sending}
                 disabled={!pad}
-                onClick={() => act(sending ? 'stop' : 'send')} />
+                onClick={() => act(sending ? 'stop' : 'send')}
+              />
             </>
-          )}>
+          }
+        >
           <LabeledList>
-            <LabeledList.Item
-              label="Status"
-              color={pad ? "good" : "bad"}>
-              {pad ? "Online" : "Not Found"}
+            <LabeledList.Item label="Status" color={pad ? 'good' : 'bad'}>
+              {pad ? 'Online' : 'Not Found'}
             </LabeledList.Item>
             <LabeledList.Item label="Cargo Report">
               {status_report}
diff --git a/tgui/packages/tgui/interfaces/CellularEmporium.tsx b/tgui/packages/tgui/interfaces/CellularEmporium.tsx
index 097346d618cc..2191ed6a15ca 100644
--- a/tgui/packages/tgui/interfaces/CellularEmporium.tsx
+++ b/tgui/packages/tgui/interfaces/CellularEmporium.tsx
@@ -1,12 +1,20 @@
 import { useBackend } from '../backend';
-import { Button, Section, Icon, Stack, LabeledList, Box, NoticeBox } from '../components';
+import {
+  Button,
+  Section,
+  Icon,
+  Stack,
+  LabeledList,
+  Box,
+  NoticeBox,
+} from '../components';
 import { Window } from '../layouts';
 
 type CellularEmporiumContext = {
   abilities: Ability[];
   can_readapt: boolean;
   genetic_points_remaining: number;
-}
+};
 
 type Ability = {
   name: string;
@@ -16,31 +24,36 @@ type Ability = {
   helptext: string;
   owned: boolean;
   can_purchase: boolean;
-}
+};
 
 export const CellularEmporium = (props, context) => {
   const { act, data } = useBackend<CellularEmporiumContext>(context);
   const { can_readapt, genetic_points_remaining } = data;
   return (
-    <Window
-      width={900}
-      height={480}>
+    <Window width={900} height={480}>
       <Window.Content>
-        <Section fill scrollable title={"Genetic Points"} buttons={
-          <Stack>
-            <Stack.Item fontSize="16px">
-              {genetic_points_remaining && genetic_points_remaining}{' '}
-              <Icon name="dna" color="#DD66DD" />
-            </Stack.Item>
-            <Stack.Item>
-              <Button
-                icon="undo"
-                content="Readapt"
-                disabled={!can_readapt}
-                onClick={() => act('readapt')} />
-            </Stack.Item>
-          </Stack>
-        }><AbilityList />
+        <Section
+          fill
+          scrollable
+          title={'Genetic Points'}
+          buttons={
+            <Stack>
+              <Stack.Item fontSize="16px">
+                {genetic_points_remaining && genetic_points_remaining}{' '}
+                <Icon name="dna" color="#DD66DD" />
+              </Stack.Item>
+              <Stack.Item>
+                <Button
+                  icon="undo"
+                  content="Readapt"
+                  disabled={!can_readapt}
+                  onClick={() => act('readapt')}
+                />
+              </Stack.Item>
+            </Stack>
+          }
+        >
+          <AbilityList />
         </Section>
       </Window.Content>
     </Window>
@@ -56,37 +69,40 @@ const AbilityList = (props, context) => {
   } else {
     return (
       <LabeledList>
-        {abilities.map(ability => (
+        {abilities.map((ability) => (
           <LabeledList.Item
             key={ability.name}
             className="candystripe"
             label={ability.name}
-            buttons={(
+            buttons={
               <Stack>
+                <Stack.Item>{ability.dna_cost}</Stack.Item>
                 <Stack.Item>
-                  {ability.dna_cost}
-                </Stack.Item>
-                <Stack.Item>
-                  <Icon name="dna" color={ability.owned ? "#DD66DD" : "gray"} />
+                  <Icon name="dna" color={ability.owned ? '#DD66DD' : 'gray'} />
                 </Stack.Item>
                 <Stack.Item>
                   <Button
                     content={'Evolve'}
-                    disabled={ability.owned
-                      || ability.dna_cost > genetic_points_remaining
-                      || !ability.can_purchase}
-                    onClick={() => act('evolve', {
-                      path: ability.path,
-                    })} />
+                    disabled={
+                      ability.owned ||
+                      ability.dna_cost > genetic_points_remaining ||
+                      !ability.can_purchase
+                    }
+                    onClick={() =>
+                      act('evolve', {
+                        path: ability.path,
+                      })
+                    }
+                  />
                 </Stack.Item>
               </Stack>
-            )}>
+            }
+          >
             {ability.desc}
-            <Box color="good">
-              {ability.helptext}
-            </Box>
+            <Box color="good">{ability.helptext}</Box>
           </LabeledList.Item>
         ))}
-      </LabeledList>);
+      </LabeledList>
+    );
   }
 };
diff --git a/tgui/packages/tgui/interfaces/CentcomPodLauncher.js b/tgui/packages/tgui/interfaces/CentcomPodLauncher.js
index f722c3d67308..1354619d2e47 100644
--- a/tgui/packages/tgui/interfaces/CentcomPodLauncher.js
+++ b/tgui/packages/tgui/interfaces/CentcomPodLauncher.js
@@ -5,14 +5,25 @@ import { multiline } from 'common/string';
 import { createUuid } from 'common/uuid';
 import { Component, Fragment } from 'inferno';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, ByondUi, Divider, Input, Knob, LabeledControls, NumberInput, Section, Stack } from '../components';
+import {
+  Box,
+  Button,
+  ByondUi,
+  Divider,
+  Input,
+  Knob,
+  LabeledControls,
+  NumberInput,
+  Section,
+  Stack,
+} from '../components';
 import { Window } from '../layouts';
 
 const pod_grey = {
   color: 'grey',
 };
 
-const useCompact = context => {
+const useCompact = (context) => {
   const [compact, setCompact] = useLocalState(context, 'compact', false);
   const toggleCompact = () => setCompact(!compact);
   return [compact, toggleCompact];
@@ -24,7 +35,8 @@ export const CentcomPodLauncher = (props, context) => {
     <Window
       title="Supply Pod Menu (Use against Helen Weinstein)"
       width={compact ? 460 : 730}
-      height={compact ? 360 : 440}>
+      height={compact ? 360 : 440}
+    >
       <CentcomPodLauncherContent />
     </Window>
   );
@@ -329,7 +341,7 @@ const EFFECTS_NORMAL = [
   },
 ];
 
-const EFFECTS_HARM =[
+const EFFECTS_HARM = [
   {
     title: 'Explosion Custom',
     icon: 'bomb',
@@ -394,91 +406,99 @@ const EFFECTS_HARM =[
 const EFFECTS_ALL = [
   {
     list: EFFECTS_LOAD,
-    label: "Load From",
-    alt_label: "Load",
-    tooltipPosition: "right",
+    label: 'Load From',
+    alt_label: 'Load',
+    tooltipPosition: 'right',
   },
   {
     list: EFFECTS_NORMAL,
-    label: "Normal Effects",
-    tooltipPosition: "bottom",
+    label: 'Normal Effects',
+    tooltipPosition: 'bottom',
   },
   {
     list: EFFECTS_HARM,
-    label: "Harmful Effects",
-    tooltipPosition: "bottom",
+    label: 'Harmful Effects',
+    tooltipPosition: 'bottom',
   },
 ];
 
 const ViewTabHolder = (props, context) => {
   const { act, data } = useBackend(context);
-  const [
-    tabPageIndex,
-    setTabPageIndex,
-  ] = useLocalState(context, 'tabPageIndex', 1);
+  const [tabPageIndex, setTabPageIndex] = useLocalState(
+    context,
+    'tabPageIndex',
+    1,
+  );
   const { mapRef } = data;
   const TabPageComponent = TABPAGES[tabPageIndex].component();
   return (
-    <Section fill title="View" buttons={(
-      <>
-        {(!!data.customDropoff && data.effectReverse===1) && (
+    <Section
+      fill
+      title="View"
+      buttons={
+        <>
+          {!!data.customDropoff && data.effectReverse === 1 && (
+            <Button
+              inline
+              color="transparent"
+              tooltip="View Dropoff Location"
+              icon="arrow-circle-down"
+              selected={2 === tabPageIndex}
+              onClick={() => {
+                setTabPageIndex(2);
+                act('tabSwitch', { tabIndex: 2 });
+              }}
+            />
+          )}
           <Button
             inline
             color="transparent"
-            tooltip="View Dropoff Location"
-            icon="arrow-circle-down"
-            selected={2 === tabPageIndex}
+            tooltip="View Pod"
+            icon="rocket"
+            selected={0 === tabPageIndex}
             onClick={() => {
-              setTabPageIndex(2);
-              act('tabSwitch', { tabIndex: 2 });
-            }} />
-        )}
-        <Button
-          inline
-          color="transparent"
-          tooltip="View Pod"
-          icon="rocket"
-          selected={0 === tabPageIndex}
-          onClick={() => {
-            setTabPageIndex(0);
-            act('tabSwitch', { tabIndex: 0 });
-          }} />
-        <Button
-          inline
-          color="transparent"
-          tooltip="View Source Bay"
-          icon="th"
-          selected={1 === tabPageIndex}
-          onClick={() => {
-            setTabPageIndex(1);
-            act('tabSwitch', { tabIndex: 1 });
-          }} />
-        <span style={pod_grey}>|</span>
-        {(!!data.customDropoff && data.effectReverse===1) && (
+              setTabPageIndex(0);
+              act('tabSwitch', { tabIndex: 0 });
+            }}
+          />
           <Button
             inline
             color="transparent"
-            icon="lightbulb"
-            selected={data.renderLighting}
-            tooltip="Render Lighting for the dropoff view"
+            tooltip="View Source Bay"
+            icon="th"
+            selected={1 === tabPageIndex}
             onClick={() => {
-              act('renderLighting');
+              setTabPageIndex(1);
+              act('tabSwitch', { tabIndex: 1 });
+            }}
+          />
+          <span style={pod_grey}>|</span>
+          {!!data.customDropoff && data.effectReverse === 1 && (
+            <Button
+              inline
+              color="transparent"
+              icon="lightbulb"
+              selected={data.renderLighting}
+              tooltip="Render Lighting for the dropoff view"
+              onClick={() => {
+                act('renderLighting');
+                act('refreshView');
+              }}
+            />
+          )}
+          <Button
+            inline
+            color="transparent"
+            icon="sync-alt"
+            tooltip="Refresh view window in case it breaks"
+            onClick={() => {
+              setTabPageIndex(tabPageIndex);
               act('refreshView');
             }}
           />
-        )}
-        <Button
-          inline
-          color="transparent"
-          icon="sync-alt"
-          tooltip="Refresh view window in case it breaks"
-          onClick={() => {
-            setTabPageIndex(tabPageIndex);
-            act('refreshView');
-          }}
-        />
-      </>
-    )}>
+        </>
+      }
+    >
       <Stack fill vertical>
         <Stack.Item>
           <TabPageComponent />
@@ -490,7 +510,8 @@ const ViewTabHolder = (props, context) => {
               zoom: 0,
               id: mapRef,
               type: 'map',
-            }} />
+            }}
+          />
         </Stack.Item>
       </Stack>
     </Section>
@@ -514,12 +535,14 @@ const TabBay = (props, context) => {
       <Button
         content="Teleport"
         icon="street-view"
-        onClick={() => act('teleportCentcom')} />
+        onClick={() => act('teleportCentcom')}
+      />
       <Button
         content={data.oldArea ? data.oldArea.substring(0, 17) : 'Go Back'}
         disabled={!data.oldArea}
         icon="undo-alt"
-        onClick={() => act('teleportBack')} />
+        onClick={() => act('teleportBack')}
+      />
     </>
   );
 };
@@ -531,12 +554,14 @@ const TabDrop = (props, context) => {
       <Button
         content="Teleport"
         icon="street-view"
-        onClick={() => act('teleportDropoff')} />
+        onClick={() => act('teleportDropoff')}
+      />
       <Button
         content={data.oldArea ? data.oldArea.substring(0, 17) : 'Go Back'}
         disabled={!data.oldArea}
         icon="undo-alt"
-        onClick={() => act('teleportBack')} />
+        onClick={() => act('teleportBack')}
+      />
     </>
   );
 };
@@ -551,52 +576,57 @@ const PodStatusPage = (props, context) => {
           <Fragment key={i}>
             <Stack.Item>
               <Box bold color="label" mb={1}>
-                {(compact === 1 && list.alt_label)
-                  ? list.alt_label
-                  : list.label}:
+                {compact === 1 && list.alt_label ? list.alt_label : list.label}:
               </Box>
               <Box>
                 {list.list.map((effect, j) => (
                   <Fragment key={j}>
                     {effect.divider && (
-                      <span style={pod_grey}><b>|</b></span>
+                      <span style={pod_grey}>
+                        <b>|</b>
+                      </span>
                     )}
-                    {!effect.divider &&(
+                    {!effect.divider && (
                       <Button
-                        tooltip={effect.details
-                          ? (data.effectShrapnel
-                            ? effect.title
-                            +"\n"+data.shrapnelType
-                            +"\nMagnitude:"
-                            +data.shrapnelMagnitude
-                            : effect.title)
-                          : effect.title}
+                        tooltip={
+                          effect.details
+                            ? data.effectShrapnel
+                              ? effect.title +
+                                '\n' +
+                                data.shrapnelType +
+                                '\nMagnitude:' +
+                                data.shrapnelMagnitude
+                              : effect.title
+                            : effect.title
+                        }
                         tooltipPosition={list.tooltipPosition}
                         icon={effect.icon}
                         content={effect.content}
-                        selected={effect.soloSelected
-                          ? data[effect.soloSelected]
-                          : (data[effect.selected] === effect.choiceNumber)}
-                        onClick={() => data.payload !== 0
-                          ? act(effect.act, effect.payload)
-                          : act(effect.act)}
+                        selected={
+                          effect.soloSelected
+                            ? data[effect.soloSelected]
+                            : data[effect.selected] === effect.choiceNumber
+                        }
+                        onClick={() =>
+                          data.payload !== 0
+                            ? act(effect.act, effect.payload)
+                            : act(effect.act)
+                        }
                         style={{
                           'vertical-align': 'middle',
-                          'margin-left': (j !== 0 ? '1px' : '0px'),
-                          'margin-right': (
-                            j !== list.list.length-1 ? '1px' : '0px'
-                          ),
+                          'margin-left': j !== 0 ? '1px' : '0px',
+                          'margin-right':
+                            j !== list.list.length - 1 ? '1px' : '0px',
                           'border-radius': '5px',
-                        }} />
+                        }}
+                      />
                     )}
                   </Fragment>
                 ))}
               </Box>
             </Stack.Item>
-            {i < EFFECTS_ALL.length && (
-              <Stack.Divider />
-            )}
-            {i === EFFECTS_ALL.length - 1 &&(
+            {i < EFFECTS_ALL.length && <Stack.Divider />}
+            {i === EFFECTS_ALL.length - 1 && (
               <Stack.Item>
                 <Box color="label" mb={1}>
                   <b>Extras:</b>
@@ -609,7 +639,8 @@ const PodStatusPage = (props, context) => {
                     icon="list-alt"
                     tooltip="Game Panel"
                     tooltipPosition="top-start"
-                    onClick={() => act('gamePanel')} />
+                    onClick={() => act('gamePanel')}
+                  />
                   <Button
                     inline
                     m={0}
@@ -617,8 +648,9 @@ const PodStatusPage = (props, context) => {
                     icon="hammer"
                     tooltip="Build Mode"
                     tooltipPosition="top-start"
-                    onClick={() => act('buildMode')} />
-                  {compact && (
+                    onClick={() => act('buildMode')}
+                  />
+                  {(compact && (
                     <Button
                       inline
                       m={0}
@@ -629,8 +661,9 @@ const PodStatusPage = (props, context) => {
                       onClick={() => {
                         toggleCompact();
                         act('refreshView');
-                      }} />
-                  ) || (
+                      }}
+                    />
+                  )) || (
                     <Button
                       m={0}
                       inline
@@ -638,7 +671,8 @@ const PodStatusPage = (props, context) => {
                       icon="compress"
                       tooltip="Compact mode"
                       tooltipPosition="top-start"
-                      onClick={() => toggleCompact()} />
+                      onClick={() => toggleCompact()}
+                    />
                   )}
                 </Box>
               </Stack.Item>
@@ -652,18 +686,19 @@ const PodStatusPage = (props, context) => {
 
 const ReverseMenu = (props, context) => {
   const { act, data } = useBackend(context);
-  const [
-    tabPageIndex,
-    setTabPageIndex,
-  ] = useLocalState(context, 'tabPageIndex', 1);
+  const [tabPageIndex, setTabPageIndex] = useLocalState(
+    context,
+    'tabPageIndex',
+    1,
+  );
   return (
     <Section
       fill
       height="100%"
       title="Reverse"
-      buttons={(
+      buttons={
         <Button
-          icon={data.effectReverse === 1 ? "toggle-on" : "toggle-off"}
+          icon={data.effectReverse === 1 ? 'toggle-on' : 'toggle-off'}
           selected={data.effectReverse}
           tooltip={multiline`
             Doesn't send items.
@@ -677,8 +712,10 @@ const ReverseMenu = (props, context) => {
               setTabPageIndex(1);
               act('tabSwitch', { tabIndex: 1 });
             }
-          }} />
-      )}>
+          }}
+        />
+      }
+    >
       {data.effectReverse === 1 && (
         <Stack fill vertical>
           <Stack.Item maxHeight="20px">
@@ -690,7 +727,8 @@ const ReverseMenu = (props, context) => {
                 Where reverse pods
                 go after landing`}
               tooltipPosition="bottom-end"
-              onClick={() => act('pickDropoffTurf')} />
+              onClick={() => act('pickDropoffTurf')}
+            />
             <Button
               inline
               icon="trash"
@@ -707,7 +745,8 @@ const ReverseMenu = (props, context) => {
                   setTabPageIndex(1);
                   act('tabSwitch', { tabIndex: 1 });
                 }
-              }} />
+              }}
+            />
           </Stack.Item>
           <Stack.Divider />
           <Stack.Item maxHeight="20px">
@@ -723,10 +762,12 @@ const ReverseMenu = (props, context) => {
                     : data.reverse_option_list[option.title]
                 }
                 tooltip={option.title}
-                onClick={() => act('reverseOption', {
-                  reverseOption: option.key
-                    ? option.key
-                    : option.title })} />
+                onClick={() =>
+                  act('reverseOption', {
+                    reverseOption: option.key ? option.key : option.title,
+                  })
+                }
+              />
             ))}
           </Stack.Item>
         </Stack>
@@ -752,13 +793,13 @@ class PresetsPage extends Component {
   }
 
   saveDataToPreset(id, data) {
-    storage.set("podlauncher_preset_" + id, data);
+    storage.set('podlauncher_preset_' + id, data);
   }
 
   async loadDataFromPreset(id, context) {
     const { act } = useBackend(this.context);
-    act("loadDataFromPreset", {
-      payload: await storage.get("podlauncher_preset_" + id),
+    act('loadDataFromPreset', {
+      payload: await storage.get('podlauncher_preset_' + id),
     });
   }
 
@@ -766,17 +807,17 @@ class PresetsPage extends Component {
     let { presets } = this.state;
     if (!presets) {
       presets = [];
-      presets.push("hi!");
+      presets.push('hi!');
     }
     const id = createUuid();
     const thing = { id, title: presetName, hue };
     presets.push(thing);
-    storage.set("podlauncher_presetlist", presets);
+    storage.set('podlauncher_presetlist', presets);
     this.saveDataToPreset(id, data);
   }
 
   async getPresets() {
-    let thing = await storage.get("podlauncher_presetlist");
+    let thing = await storage.get('podlauncher_presetlist');
     if (thing === undefined) {
       thing = [];
     }
@@ -791,33 +832,41 @@ class PresetsPage extends Component {
         break;
       }
     }
-    storage.set("podlauncher_presetlist", presets);
+    storage.set('podlauncher_presetlist', presets);
   }
   render() {
     const { presets } = this.state;
     const { act, data } = useBackend(this.context);
-    const [
-      presetIndex,
-      setSelectedPreset,
-    ] = useLocalState(this.context, 'presetIndex', 0);
-    const [
-      settingName,
-      setEditingNameStatus,
-    ] = useLocalState(this.context, 'settingName', 0);
-    const [newNameText, setText] = useLocalState(this.context, 'newNameText', "");
+    const [presetIndex, setSelectedPreset] = useLocalState(
+      this.context,
+      'presetIndex',
+      0,
+    );
+    const [settingName, setEditingNameStatus] = useLocalState(
+      this.context,
+      'settingName',
+      0,
+    );
+    const [newNameText, setText] = useLocalState(
+      this.context,
+      'newNameText',
+      '',
+    );
     const [hue, setHue] = useLocalState(this.context, 'hue', 0);
     return (
-      <Section scrollable
+      <Section
+        scrollable
         fill
         title="Presets"
-        buttons={(
+        buttons={
           <>
             {settingName === 0 && (
               <Button
                 color="transparent"
                 icon="plus"
                 tooltip="New Preset"
-                onClick={() => setEditingNameStatus(1)} />
+                onClick={() => setEditingNameStatus(1)}
+              />
             )}
             <Button
               inline
@@ -826,7 +875,8 @@ class PresetsPage extends Component {
               icon="download"
               tooltip="Saves preset"
               tooltipPosition="bottom"
-              onClick={() => this.saveDataToPreset(presetIndex, data)} />
+              onClick={() => this.saveDataToPreset(presetIndex, data)}
+            />
             <Button
               inline
               color="transparent"
@@ -835,16 +885,19 @@ class PresetsPage extends Component {
               tooltip="Loads preset"
               onClick={() => {
                 this.loadDataFromPreset(presetIndex);
-              }} />
+              }}
+            />
             <Button
               inline
               color="transparent"
               icon="trash"
               tooltip="Deletes the selected preset"
               tooltipPosition="bottom-start"
-              onClick={() => this.deletePreset(presetIndex)} />
+              onClick={() => this.deletePreset(presetIndex)}
+            />
           </>
-        )}>
+        }
+      >
         {settingName === 1 && (
           <>
             <Button
@@ -855,15 +908,17 @@ class PresetsPage extends Component {
               onClick={() => {
                 this.newPreset(newNameText, hue, data);
                 setEditingNameStatus(0);
-              }} />
+              }}
+            />
             <Button
               inline
               icon="window-close"
               tooltip="Cancel"
               onClick={() => {
-                setText("");
+                setText('');
                 setEditingNameStatus(0);
-              }} />
+              }}
+            />
             <span color="label"> Hue: </span>
             <NumberInput
               inline
@@ -874,35 +929,44 @@ class PresetsPage extends Component {
               value={hue}
               minValue={0}
               maxValue={360}
-              onChange={(e, value) => setHue(value)} />
+              onChange={(e, value) => setHue(value)}
+            />
             <Input
               inline
               autofocus
               placeholder="Preset Name"
-              onChange={(e, value) => setText(value)} />
+              onChange={(e, value) => setText(value)}
+            />
             <Divider horizontal />
           </>
         )}
         {(!presets || presets.length === 0) && (
           <span style={pod_grey}>
-            Click [+] to define a new preset.
-            They are persistent across rounds/servers!
+            Click [+] to define a new preset. They are persistent across
+            rounds/servers!
           </span>
         )}
-        {presets ? presets.map((preset, i) => (
-          <Button
-            key={i}
-            width="100%"
-            backgroundColor={`hsl(${preset.hue}, 50%, 50%)`}
-            onClick={() => setSelectedPreset(preset.id)}
-            onDblClick={() => this.loadDataFromPreset(preset.id)}
-            content={preset.title}
-            style={presetIndex === preset.id ? {
-              'border-width': '1px',
-              'border-style': 'solid',
-              'border-color': `hsl(${preset.hue}, 80%, 80%)`,
-            } : ''} />
-        )) : ""}
+        {presets
+          ? presets.map((preset, i) => (
+              <Button
+                key={i}
+                width="100%"
+                backgroundColor={`hsl(${preset.hue}, 50%, 50%)`}
+                onClick={() => setSelectedPreset(preset.id)}
+                onDblClick={() => this.loadDataFromPreset(preset.id)}
+                content={preset.title}
+                style={
+                  presetIndex === preset.id
+                    ? {
+                        'border-width': '1px',
+                        'border-style': 'solid',
+                        'border-color': `hsl(${preset.hue}, 80%, 80%)`,
+                      }
+                    : ''
+                }
+              />
+            ))
+          : ''}
         <span style={pod_grey}>
           <br />
           <br />
@@ -925,14 +989,11 @@ const LaunchPage = (props, context) => {
         Codex Astartes says about this`}
       selected={data.giveLauncher}
       tooltipPosition="top"
-      content={(
-        <Box
-          bold
-          fontSize="1.4em"
-          lineHeight={compact ? 1.5 : 3}>
+      content={
+        <Box bold fontSize="1.4em" lineHeight={compact ? 1.5 : 3}>
           LAUNCH
         </Box>
-      )}
+      }
       onClick={() => act('giveLauncher')}
     />
   );
@@ -945,7 +1006,7 @@ const StylePage = (props, context) => {
       fill
       scrollable
       title="Style"
-      buttons={(
+      buttons={
         <Button
           content="Name"
           color="transparent"
@@ -955,17 +1016,23 @@ const StylePage = (props, context) => {
             Edit pod's
             name/desc.`}
           tooltipPosition="bottom-start"
-          onClick={() => act('effectName')} />
-      )}>
+          onClick={() => act('effectName')}
+        />
+      }
+    >
       {STYLES.map((page, i) => (
         <Button
           key={i}
           width="45px"
           height="45px"
           tooltipPosition={
-            i >= STYLES.length-2
-              ? (i%2===1 ? "top-start" : "top-end")
-              : (i%2===1 ? "bottom-start" : "bottom-end")
+            i >= STYLES.length - 2
+              ? i % 2 === 1
+                ? 'top-start'
+                : 'top-end'
+              : i % 2 === 1
+                ? 'bottom-start'
+                : 'bottom-end'
           }
           tooltip={page.title}
           style={{
@@ -973,13 +1040,16 @@ const StylePage = (props, context) => {
             'margin-right': '5px',
             'border-radius': '20px',
           }}
-          selected={data.styleChoice-1 === i}
-          onClick={() => act('setStyle', { style: i })}>
+          selected={data.styleChoice - 1 === i}
+          onClick={() => act('setStyle', { style: i })}
+        >
           <Box
-            className={classes(['supplypods64x64', 'pod_asset'+(i+1)])}
+            className={classes(['supplypods64x64', 'pod_asset' + (i + 1)])}
             style={{
-              'transform': 'rotate(45deg) translate(-25%,-10%)', 'pointer-events': 'none',
-            }} />
+              transform: 'rotate(45deg) translate(-25%,-10%)',
+              'pointer-events': 'none',
+            }}
+          />
         </Button>
       ))}
     </Section>
@@ -993,7 +1063,7 @@ const Bays = (props, context) => {
     <Section
       fill
       title="Bay"
-      buttons={(
+      buttons={
         <>
           <Button
             icon="trash"
@@ -1002,7 +1072,8 @@ const Bays = (props, context) => {
               Clears everything
               from the selected bay`}
             tooltipPosition="bottom-end"
-            onClick={() => act('clearBay')} />
+            onClick={() => act('clearBay')}
+          />
           <Button
             icon="question"
             color="transparent"
@@ -1014,16 +1085,19 @@ const Bays = (props, context) => {
               in these areas according
               to the "Load from Bay"
               options at the top left.`}
-            tooltipPosition="bottom-end" />
+            tooltipPosition="bottom-end"
+          />
         </>
-      )}>
+      }
+    >
       {BAYS.map((bay, i) => (
         <Button
           key={i}
           content={bay.title}
           tooltipPosition="bottom-end"
-          selected={data.bayNumber === ""+(i+1)}
-          onClick={() => act('switchBay', { bayNumber: (""+(i+1)) })} />
+          selected={data.bayNumber === '' + (i + 1)}
+          onClick={() => act('switchBay', { bayNumber: '' + (i + 1) })}
+        />
       ))}
     </Section>
   );
@@ -1035,7 +1109,7 @@ const Timing = (props, context) => {
     <Section
       fill
       title="Time"
-      buttons={(
+      buttons={
         <>
           <Button
             icon="undo"
@@ -1044,9 +1118,10 @@ const Timing = (props, context) => {
             Reset all pod
             timings/delays`}
             tooltipPosition="bottom-end"
-            onClick={() => act('resetTiming')} />
+            onClick={() => act('resetTiming')}
+          />
           <Button
-            icon={data.custom_rev_delay === 1 ? "toggle-on" : "toggle-off"}
+            icon={data.custom_rev_delay === 1 ? 'toggle-on' : 'toggle-off'}
             selected={data.custom_rev_delay}
             disabled={!data.effectReverse}
             color="transparent"
@@ -1056,56 +1131,56 @@ const Timing = (props, context) => {
             normal delays, bottom set
             is reversing pod's delays`}
             tooltipPosition="bottom-end"
-            onClick={() => act('toggleRevDelays')} />
+            onClick={() => act('toggleRevDelays')}
+          />
         </>
-      )}>
-      <DelayHelper
-        delay_list={DELAYS}
-      />
-      {data.custom_rev_delay && (
+      }
+    >
+      <DelayHelper delay_list={DELAYS} />
+      {(data.custom_rev_delay && (
         <>
           <Divider horizontal />
-          <DelayHelper
-            delay_list={REV_DELAYS}
-            reverse
-          />
+          <DelayHelper delay_list={REV_DELAYS} reverse />
         </>
-      )||""}
+      )) ||
+        ''}
     </Section>
   );
 };
 
 const DelayHelper = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    delay_list,
-    reverse = false,
-  } = props;
+  const { delay_list, reverse = false } = props;
   return (
     <LabeledControls wrap>
       {delay_list.map((delay, i) => (
         <LabeledControls.Item
           key={i}
-          label={data.custom_rev_delay ? "" : delay.title}>
+          label={data.custom_rev_delay ? '' : delay.title}
+        >
           <Knob
             inline
             step={0.02}
             size={data.custom_rev_delay ? 0.75 : 1}
-            value={(reverse ? data.rev_delays[i+1] : data.delays[i+1]) / 10}
+            value={(reverse ? data.rev_delays[i + 1] : data.delays[i + 1]) / 10}
             unclamped
             minValue={0}
-            unit={"s"}
-            format={value => toFixed(value, 2)}
+            unit={'s'}
+            format={(value) => toFixed(value, 2)}
             maxValue={10}
-            color={((reverse ? data.rev_delays[i+1] : data.delays[i+1]) / 10)
-              > 10 ? "orange" : "default"}
+            color={
+              (reverse ? data.rev_delays[i + 1] : data.delays[i + 1]) / 10 > 10
+                ? 'orange'
+                : 'default'
+            }
             onDrag={(e, value) => {
               act('editTiming', {
-                timer: ""+(i + 1),
+                timer: '' + (i + 1),
                 value: Math.max(value, 0),
                 reverse: reverse,
               });
-            }} />
+            }}
+          />
         </LabeledControls.Item>
       ))}
     </LabeledControls>
@@ -1115,16 +1190,22 @@ const DelayHelper = (props, context) => {
 const Sounds = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Section fill title="Sounds"
-      buttons={(
+    <Section
+      fill
+      title="Sounds"
+      buttons={
         <Button
           icon="volume-up"
           color="transparent"
           selected={data.soundVolume !== data.defaultSoundVolume}
-          tooltip={multiline`
-            Sound Volume:` + data.soundVolume}
-          onClick={() => act('soundVolume')} />
-      )}>
+          tooltip={
+            multiline`
+            Sound Volume:` + data.soundVolume
+          }
+          onClick={() => act('soundVolume')}
+        />
+      }
+    >
       {SOUNDS.map((sound, i) => (
         <Button
           key={i}
@@ -1132,7 +1213,8 @@ const Sounds = (props, context) => {
           tooltip={sound.tooltip}
           tooltipPosition="top-end"
           selected={data[sound.act]}
-          onClick={() => act(sound.act)} />
+          onClick={() => act(sound.act)}
+        />
       ))}
     </Section>
   );
diff --git a/tgui/packages/tgui/interfaces/ChameleonCard.js b/tgui/packages/tgui/interfaces/ChameleonCard.js
index 7a57bcd769e9..30a994eca7ff 100644
--- a/tgui/packages/tgui/interfaces/ChameleonCard.js
+++ b/tgui/packages/tgui/interfaces/ChameleonCard.js
@@ -19,14 +19,14 @@ export const ChameleonCard = (props, context) => {
     ourTrimAccess,
   } = data;
 
-  const parsedAccess = accesses.flatMap(region => {
+  const parsedAccess = accesses.flatMap((region) => {
     const regionName = region.name;
     const regionAccess = region.accesses;
     const parsedRegion = {
       name: regionName,
       accesses: [],
     };
-    parsedRegion.accesses = regionAccess.filter(access => {
+    parsedRegion.accesses = regionAccess.filter((access) => {
       // Snip everything that's part of our trim.
       if (ourTrimAccess.includes(access.ref)) {
         return false;
@@ -45,9 +45,7 @@ export const ChameleonCard = (props, context) => {
   });
 
   return (
-    <Window
-      width={500}
-      height={620}>
+    <Window width={500} height={620}>
       <Window.Content scrollable>
         <AccessList
           accesses={parsedAccess}
@@ -58,10 +56,13 @@ export const ChameleonCard = (props, context) => {
           accessFlags={accessFlags}
           accessFlagNames={accessFlagNames}
           showBasic={!!showBasic}
-          accessMod={(ref, wildcard) => act('mod_access', {
-            access_target: ref,
-            access_wildcard: wildcard,
-          })} />
+          accessMod={(ref, wildcard) =>
+            act('mod_access', {
+              access_target: ref,
+              access_wildcard: wildcard,
+            })
+          }
+        />
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/Changelog.js b/tgui/packages/tgui/interfaces/Changelog.js
index 45631ae05b7e..bb6ffe01dc3b 100644
--- a/tgui/packages/tgui/interfaces/Changelog.js
+++ b/tgui/packages/tgui/interfaces/Changelog.js
@@ -69,37 +69,38 @@ export class Changelog extends Component {
     const maxAttempts = 6;
 
     if (attemptNumber > maxAttempts) {
-      return this.setData('Failed to load data after ' + maxAttempts + ' attempts');
+      return this.setData(
+        'Failed to load data after ' + maxAttempts + ' attempts',
+      );
     }
 
     act('get_month', { date });
 
-    fetch(resolveAsset(date + '.yml'))
-      .then(async (changelogData) => {
-        const result = await changelogData.text();
-        const errorRegex = /^Cannot find/;
+    fetch(resolveAsset(date + '.yml')).then(async (changelogData) => {
+      const result = await changelogData.text();
+      const errorRegex = /^Cannot find/;
 
-        if (errorRegex.test(result)) {
-          const timeout = 50 + attemptNumber * 50;
+      if (errorRegex.test(result)) {
+        const timeout = 50 + attemptNumber * 50;
 
-          self.setData(
-            'Loading changelog data' + '.'.repeat(attemptNumber + 3)
-          );
-          setTimeout(() => {
-            self.getData(date, attemptNumber + 1);
-          }, timeout);
-        } else {
-          self.setData(yaml.load(result, { schema: yaml.CORE_SCHEMA }));
-        }
-      });
-  }
+        self.setData('Loading changelog data' + '.'.repeat(attemptNumber + 3));
+        setTimeout(() => {
+          self.getData(date, attemptNumber + 1);
+        }, timeout);
+      } else {
+        self.setData(yaml.load(result, { schema: yaml.CORE_SCHEMA }));
+      }
+    });
+  };
 
   componentDidMount() {
-    const { data: { dates = [] } } = useBackend(this.context);
+    const {
+      data: { dates = [] },
+    } = useBackend(this.context);
 
     if (dates) {
-      dates.forEach(
-        date => this.dateChoices.push(dateformat(date, 'mmmm yyyy', true))
+      dates.forEach((date) =>
+        this.dateChoices.push(dateformat(date, 'mmmm yyyy', true)),
       );
       this.setSelectedDate(this.dateChoices[0]);
       this.getData(dates[0]);
@@ -108,7 +109,9 @@ export class Changelog extends Component {
 
   render() {
     const { data, selectedDate, selectedIndex } = this.state;
-    const { data: { dates } } = useBackend(this.context);
+    const {
+      data: { dates },
+    } = useBackend(this.context);
     const { dateChoices } = this;
 
     const dateDropdown = dateChoices.length > 0 && (
@@ -126,17 +129,18 @@ export class Changelog extends Component {
               this.setSelectedDate(dateChoices[index]);
               window.scrollTo(
                 0,
-                document.body.scrollHeight
-                || document.documentElement.scrollHeight
+                document.body.scrollHeight ||
+                  document.documentElement.scrollHeight,
               );
               return this.getData(dates[index]);
-            }} />
+            }}
+          />
         </Stack.Item>
         <Stack.Item>
           <Dropdown
             displayText={selectedDate}
             options={dateChoices}
-            onSelected={value => {
+            onSelected={(value) => {
               const index = dateChoices.indexOf(value);
 
               this.setData('Loading changelog data...');
@@ -144,13 +148,14 @@ export class Changelog extends Component {
               this.setSelectedDate(value);
               window.scrollTo(
                 0,
-                document.body.scrollHeight
-                || document.documentElement.scrollHeight
+                document.body.scrollHeight ||
+                  document.documentElement.scrollHeight,
               );
               return this.getData(dates[index]);
             }}
             selected={selectedDate}
-            width={'150px'} />
+            width={'150px'}
+          />
         </Stack.Item>
         <Stack.Item>
           <Button
@@ -165,11 +170,12 @@ export class Changelog extends Component {
               this.setSelectedDate(dateChoices[index]);
               window.scrollTo(
                 0,
-                document.body.scrollHeight
-                || document.documentElement.scrollHeight
+                document.body.scrollHeight ||
+                  document.documentElement.scrollHeight,
               );
               return this.getData(dates[index]);
-            }} />
+            }}
+          />
         </Stack.Item>
       </Stack>
     );
@@ -184,26 +190,23 @@ export class Changelog extends Component {
         </p>
         <p>
           <b>Thanks to: </b>
-          Baystation 12, /vg/station, Goonstation, TGstation, NTstation,
-          CDK Station devs, FacepunchStation, the original Space Station 13
+          Baystation 12, /vg/station, Goonstation, TGstation, NTstation, CDK
+          Station devs, FacepunchStation, the original Space Station 13
           developers, Invisty for the title image and the countless others who
           have contributed to the game, over the years.
         </p>
         <p>
           {'Current project maintainers can be found '}
-          <a href="https://github.com/orgs/DaedalusDock/people">
-            here
-          </a>
+          <a href="https://github.com/orgs/DaedalusDock/people">here</a>
           {', recent GitHub contributors can be found '}
           <a href="https://github.com/daedalusDock/daedalusdock/pulse/monthly">
             here
-          </a>.
+          </a>
+          .
         </p>
         <p>
           {'You can also join our discord '}
-          <a href="https://discord.daedalus13.net/">
-            here
-          </a>.
+          <a href="https://discord.daedalus13.net/">here</a>.
         </p>
         {dateDropdown}
       </Section>
@@ -220,17 +223,14 @@ export class Changelog extends Component {
         </p>
         <p>
           <b>Spriters: </b>
-          Supernorn, Haruhi, Stuntwaffle, Pantaloons, Rho, SynthOrange,
-          I Said No
+          Supernorn, Haruhi, Stuntwaffle, Pantaloons, Rho, SynthOrange, I Said
+          No
         </p>
         <p>
-          Daedalus Dock is thankful to the
-          GoonStation 13 Development Team for its work on the game up to the
+          Daedalus Dock is thankful to the GoonStation 13 Development Team for
+          its work on the game up to the
           {' r4407 release. The changelog for changes up to r4407 can be seen '}
-          <a href="https://wiki.ss13.co/Pre-2016_Changelog#April_2010">
-            here
-          </a>
-          .
+          <a href="https://wiki.ss13.co/Pre-2016_Changelog#April_2010">here</a>.
         </p>
         <p>
           {'Except where otherwise noted, Goon Station 13 is licensed under a '}
@@ -244,26 +244,25 @@ export class Changelog extends Component {
         <h3>Traditional Games Space Station 13 License</h3>
         <p>
           {'All code after '}
-          <a href={'https://github.com/tgstation/tgstation/commit/'
-            + '333c566b88108de218d882840e61928a9b759d8f'}>
-            commit 333c566b88108de218d882840e61928a9b759d8f on 2014/31/12
-            at 4:38 PM PST
+          <a
+            href={
+              'https://github.com/tgstation/tgstation/commit/' +
+              '333c566b88108de218d882840e61928a9b759d8f'
+            }
+          >
+            commit 333c566b88108de218d882840e61928a9b759d8f on 2014/31/12 at
+            4:38 PM PST
           </a>
           {' is licensed under '}
-          <a href="https://www.gnu.org/licenses/agpl-3.0.html">
-            GNU AGPL v3
-          </a>
+          <a href="https://www.gnu.org/licenses/agpl-3.0.html">GNU AGPL v3</a>
           {'. All code before that commit is licensed under '}
-          <a href="https://www.gnu.org/licenses/gpl-3.0.html">
-            GNU GPL v3
-          </a>
+          <a href="https://www.gnu.org/licenses/gpl-3.0.html">GNU GPL v3</a>
           {', including tools unless their readme specifies otherwise. See '}
           <a href="https://github.com/tgstation/tgstation/blob/master/LICENSE">
             LICENSE
           </a>
           {' and '}
-          <a
-            href="https://github.com/tgstation/tgstation/blob/master/GPLv3.txt">
+          <a href="https://github.com/tgstation/tgstation/blob/master/GPLv3.txt">
             GPLv3.txt
           </a>
           {' for more details.'}
@@ -271,13 +270,21 @@ export class Changelog extends Component {
         <p>
           The TGS DMAPI API is licensed as a subproject under the MIT license.
           {' See the footer of '}
-          <a href={'https://github.com/tgstation/tgstation/blob/master'
-            + '/code/__DEFINES/tgs.dm'}>
+          <a
+            href={
+              'https://github.com/tgstation/tgstation/blob/master' +
+              '/code/__DEFINES/tgs.dm'
+            }
+          >
             code/__DEFINES/tgs.dm
           </a>
           {' and '}
-          <a href={'https://github.com/tgstation/tgstation/blob/master'
-            + '/code/modules/tgs/LICENSE'}>
+          <a
+            href={
+              'https://github.com/tgstation/tgstation/blob/master' +
+              '/code/modules/tgs/LICENSE'
+            }
+          >
             code/modules/tgs/LICENSE
           </a>
           {' for the MIT license.'}
@@ -292,52 +299,55 @@ export class Changelog extends Component {
       </Section>
     );
 
-    const changes = typeof data === 'object' && Object.keys(data).length > 0 && (
-      Object.entries(data).reverse().map(([date, authors]) => (
-        <Section key={date} title={dateformat(date, 'd mmmm yyyy', true)}>
-          <Box ml={3}>
-            {Object.entries(authors).map(([name, changes]) => (
-              <Fragment key={name}>
-                <h4>{name} changed:</h4>
-                <Box ml={3}>
-                  <Table>
-                    {changes.map(change => {
-                      const changeType = Object.keys(change)[0];
-                      return (
-                        <Table.Row key={changeType + change[changeType]}>
-                          <Table.Cell
-                            className={classes([
-                              'Changelog__Cell',
-                              'Changelog__Cell--Icon',
-                            ])}
-                          >
-                            <Icon
-                              color={
-                                icons[changeType]
-                                  ? icons[changeType].color
-                                  : icons['unknown'].color
-                              }
-                              name={
-                                icons[changeType]
-                                  ? icons[changeType].icon
-                                  : icons['unknown'].icon
-                              }
-                            />
-                          </Table.Cell>
-                          <Table.Cell className="Changelog__Cell">
-                            {change[changeType]}
-                          </Table.Cell>
-                        </Table.Row>
-                      );
-                    })}
-                  </Table>
-                </Box>
-              </Fragment>
-            ))}
-          </Box>
-        </Section>
-      ))
-    );
+    const changes =
+      typeof data === 'object' &&
+      Object.keys(data).length > 0 &&
+      Object.entries(data)
+        .reverse()
+        .map(([date, authors]) => (
+          <Section key={date} title={dateformat(date, 'd mmmm yyyy', true)}>
+            <Box ml={3}>
+              {Object.entries(authors).map(([name, changes]) => (
+                <Fragment key={name}>
+                  <h4>{name} changed:</h4>
+                  <Box ml={3}>
+                    <Table>
+                      {changes.map((change) => {
+                        const changeType = Object.keys(change)[0];
+                        return (
+                          <Table.Row key={changeType + change[changeType]}>
+                            <Table.Cell
+                              className={classes([
+                                'Changelog__Cell',
+                                'Changelog__Cell--Icon',
+                              ])}
+                            >
+                              <Icon
+                                color={
+                                  icons[changeType]
+                                    ? icons[changeType].color
+                                    : icons['unknown'].color
+                                }
+                                name={
+                                  icons[changeType]
+                                    ? icons[changeType].icon
+                                    : icons['unknown'].icon
+                                }
+                              />
+                            </Table.Cell>
+                            <Table.Cell className="Changelog__Cell">
+                              {change[changeType]}
+                            </Table.Cell>
+                          </Table.Row>
+                        );
+                      })}
+                    </Table>
+                  </Box>
+                </Fragment>
+              ))}
+            </Box>
+          </Section>
+        ));
 
     return (
       <Window title="Changelog" width={675} height={650}>
diff --git a/tgui/packages/tgui/interfaces/ChemAcclimator.js b/tgui/packages/tgui/interfaces/ChemAcclimator.js
index 82edbec2b66f..05f4722b70d2 100644
--- a/tgui/packages/tgui/interfaces/ChemAcclimator.js
+++ b/tgui/packages/tgui/interfaces/ChemAcclimator.js
@@ -5,9 +5,7 @@ import { Window } from '../layouts';
 export const ChemAcclimator = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={320}
-      height={271}>
+    <Window width={320} height={271}>
       <Window.Content>
         <Section title="Acclimator">
           <LabeledList>
@@ -23,9 +21,12 @@ export const ChemAcclimator = (props, context) => {
                 maxValue={1000}
                 step={5}
                 stepPixelSize={2}
-                onChange={(e, value) => act('set_target_temperature', {
-                  temperature: value,
-                })} />
+                onChange={(e, value) =>
+                  act('set_target_temperature', {
+                    temperature: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Acceptable Temp. Difference">
               <NumberInput
@@ -39,19 +40,22 @@ export const ChemAcclimator = (props, context) => {
                   act('set_allowed_temperature_difference', {
                     temperature: value,
                   });
-                }} />
+                }}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
         <Section
           title="Status"
-          buttons={(
+          buttons={
             <Button
               icon="power-off"
-              content={data.enabled ? "On" : "Off"}
+              content={data.enabled ? 'On' : 'Off'}
               selected={data.enabled}
-              onClick={() => act('toggle_power')} />
-          )}>
+              onClick={() => act('toggle_power')}
+            />
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Volume">
               <NumberInput
@@ -62,9 +66,12 @@ export const ChemAcclimator = (props, context) => {
                 maxValue={200}
                 step={2}
                 stepPixelSize={2}
-                onChange={(e, value) => act('change_volume', {
-                  volume: value,
-                })} />
+                onChange={(e, value) =>
+                  act('change_volume', {
+                    volume: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Current Operation">
               {data.acclimate_state}
diff --git a/tgui/packages/tgui/interfaces/ChemDebugSynthesizer.js b/tgui/packages/tgui/interfaces/ChemDebugSynthesizer.js
index 23786c9f4e35..99dc791e2304 100644
--- a/tgui/packages/tgui/interfaces/ChemDebugSynthesizer.js
+++ b/tgui/packages/tgui/interfaces/ChemDebugSynthesizer.js
@@ -1,5 +1,12 @@
 import { useBackend } from '../backend';
-import { AnimatedNumber, Box, Button, LabeledList, NumberInput, Section } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  LabeledList,
+  NumberInput,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const ChemDebugSynthesizer = (props, context) => {
@@ -12,39 +19,46 @@ export const ChemDebugSynthesizer = (props, context) => {
     beakerContents = [],
   } = data;
   return (
-    <Window
-      width={390}
-      height={330}>
+    <Window width={390} height={330}>
       <Window.Content scrollable>
         <Section
           title="Recipient"
-          buttons={isBeakerLoaded ? (
-            <>
-              <Button
-                icon="eject"
-                content="Eject"
-                onClick={() => act('ejectBeaker')} />
-              <NumberInput
-                value={amount}
-                unit="u"
-                minValue={1}
-                maxValue={beakerMaxVolume}
-                step={1}
-                stepPixelSize={2}
-                onChange={(e, value) => act('amount', {
-                  amount: value,
-                })} />
+          buttons={
+            isBeakerLoaded ? (
+              <>
+                <Button
+                  icon="eject"
+                  content="Eject"
+                  onClick={() => act('ejectBeaker')}
+                />
+                <NumberInput
+                  value={amount}
+                  unit="u"
+                  minValue={1}
+                  maxValue={beakerMaxVolume}
+                  step={1}
+                  stepPixelSize={2}
+                  onChange={(e, value) =>
+                    act('amount', {
+                      amount: value,
+                    })
+                  }
+                />
+                <Button
+                  icon="plus"
+                  content="Input"
+                  onClick={() => act('input')}
+                />
+              </>
+            ) : (
               <Button
                 icon="plus"
-                content="Input"
-                onClick={() => act('input')} />
-            </>
-          ) : (
-            <Button
-              icon="plus"
-              content="Create Beaker"
-              onClick={() => act('makecup')} />
-          )}>
+                content="Create Beaker"
+                onClick={() => act('makecup')}
+              />
+            )
+          }
+        >
           {isBeakerLoaded ? (
             <>
               <Box>
@@ -53,24 +67,18 @@ export const ChemDebugSynthesizer = (props, context) => {
               </Box>
               {beakerContents.length > 0 ? (
                 <LabeledList>
-                  {beakerContents.map(chem => (
-                    <LabeledList.Item
-                      key={chem.name}
-                      label={chem.name}>
+                  {beakerContents.map((chem) => (
+                    <LabeledList.Item key={chem.name} label={chem.name}>
                       {chem.volume} u
                     </LabeledList.Item>
                   ))}
                 </LabeledList>
               ) : (
-                <Box color="bad">
-                  Recipient Empty
-                </Box>
+                <Box color="bad">Recipient Empty</Box>
               )}
             </>
           ) : (
-            <Box color="average">
-              No Recipient
-            </Box>
+            <Box color="average">No Recipient</Box>
           )}
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/ChemDispenser.js b/tgui/packages/tgui/interfaces/ChemDispenser.js
index fd4a0b8e445f..541cf63b525a 100644
--- a/tgui/packages/tgui/interfaces/ChemDispenser.js
+++ b/tgui/packages/tgui/interfaces/ChemDispenser.js
@@ -1,5 +1,12 @@
 import { useBackend } from '../backend';
-import { AnimatedNumber, Box, Button, LabeledList, ProgressBar, Section } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  LabeledList,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const ChemDispenser = (props, context) => {
@@ -25,7 +32,8 @@ export const ChemDispenser = (props, context) => {
               tooltipPosition="bottom-start"
               onClick={() => act('reaction_lookup')}
             />
-          }>
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Cartridges">
               <ProgressBar value={data.cartAmount} maxValue={data.maxCarts}>
@@ -45,9 +53,11 @@ export const ChemDispenser = (props, context) => {
               onClick={() =>
                 act('amount', {
                   target: amount,
-                })}
+                })
+              }
             />
-          ))}>
+          ))}
+        >
           <Box mr={-1}>
             {data.chemicals.map((chemical) => (
               <Button
@@ -74,7 +84,8 @@ export const ChemDispenser = (props, context) => {
                 onClick={() =>
                   act('dispense', {
                     reagent: chemical.id,
-                  })}
+                  })
+                }
               />
             ))}
           </Box>
@@ -88,7 +99,8 @@ export const ChemDispenser = (props, context) => {
               content={amount}
               onClick={() => act('remove', { amount })}
             />
-          ))}>
+          ))}
+        >
           <LabeledList>
             <LabeledList.Item
               label="Beaker"
@@ -99,14 +111,16 @@ export const ChemDispenser = (props, context) => {
                     content="Eject"
                     disabled={!data.isBeakerLoaded}
                     onClick={() => act('eject')}
-                  />)
-              }>
-              {data.isBeakerLoaded ? (data.beakerName) : ('No Beaker')}
+                  />
+                )
+              }
+            >
+              {data.isBeakerLoaded ? data.beakerName : 'No Beaker'}
             </LabeledList.Item>
             <LabeledList.Item label="Contents">
               <Box color="label">
-                {(!data.isBeakerLoaded && 'N/A')
-                  || (beakerContents.length === 0 && 'Nothing')}
+                {(!data.isBeakerLoaded && 'N/A') ||
+                  (beakerContents.length === 0 && 'Nothing')}
               </Box>
               {beakerContents.map((chemical) => (
                 <Box key={chemical.name} color="label">
diff --git a/tgui/packages/tgui/interfaces/ChemFilter.js b/tgui/packages/tgui/interfaces/ChemFilter.js
index f0079dd5fdab..53d2221579f5 100644
--- a/tgui/packages/tgui/interfaces/ChemFilter.js
+++ b/tgui/packages/tgui/interfaces/ChemFilter.js
@@ -11,31 +11,39 @@ export const ChemFilterPane = (props, context) => {
     <Section
       title={title}
       minHeight="240px"
-      buttons={(
+      buttons={
         <>
           <Input
             placeholder="Reagent"
             width="140px"
-            onInput={(e, value) => onReagentInput(value)} />
+            onInput={(e, value) => onReagentInput(value)}
+          />
           <Button
             ml={1}
             icon="plus"
-            onClick={() => act('add', {
-              which: titleKey,
-              name: reagentName,
-            })} />
+            onClick={() =>
+              act('add', {
+                which: titleKey,
+                name: reagentName,
+              })
+            }
+          />
         </>
-      )}>
-      {list.map(filter => (
+      }
+    >
+      {list.map((filter) => (
         <Fragment key={filter}>
           <Button
             fluid
             icon="minus"
             content={filter}
-            onClick={() => act('remove', {
-              which: titleKey,
-              reagent: filter,
-            })} />
+            onClick={() =>
+              act('remove', {
+                which: titleKey,
+                reagent: filter,
+              })
+            }
+          />
         </Fragment>
       ))}
     </Section>
@@ -44,16 +52,11 @@ export const ChemFilterPane = (props, context) => {
 
 export const ChemFilter = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    left = [],
-    right = [],
-  } = data;
+  const { left = [], right = [] } = data;
   const [leftName, setLeftName] = useLocalState(context, 'leftName', '');
   const [rightName, setRightName] = useLocalState(context, 'rightName', '');
   return (
-    <Window
-      width={500}
-      height={300}>
+    <Window width={500} height={300}>
       <Window.Content scrollable>
         <Stack>
           <Stack.Item grow>
@@ -61,14 +64,16 @@ export const ChemFilter = (props, context) => {
               title="Left"
               list={left}
               reagentName={leftName}
-              onReagentInput={value => setLeftName(value)} />
+              onReagentInput={(value) => setLeftName(value)}
+            />
           </Stack.Item>
           <Stack.Item grow>
             <ChemFilterPane
               title="Right"
               list={right}
               reagentName={rightName}
-              onReagentInput={value => setRightName(value)} />
+              onReagentInput={(value) => setRightName(value)}
+            />
           </Stack.Item>
         </Stack>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/ChemHeater.js b/tgui/packages/tgui/interfaces/ChemHeater.js
index 5a2bcaee5f96..bc948843f9bc 100644
--- a/tgui/packages/tgui/interfaces/ChemHeater.js
+++ b/tgui/packages/tgui/interfaces/ChemHeater.js
@@ -1,6 +1,17 @@
 import { round, toFixed } from 'common/math';
 import { useBackend } from '../backend';
-import { AnimatedNumber, Box, Button, Flex, Icon, NumberInput, ProgressBar, RoundGauge, Section, Table } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  Flex,
+  Icon,
+  NumberInput,
+  ProgressBar,
+  RoundGauge,
+  Section,
+  Table,
+} from '../components';
 import { Window } from '../layouts';
 import { BeakerContents } from './common/BeakerContents';
 
@@ -20,21 +31,21 @@ export const ChemHeater = (props, context) => {
     activeReactions = [],
   } = data;
   return (
-    <Window
-      width={330}
-      height={350}>
+    <Window width={330} height={350}>
       <Window.Content scrollable>
         <Section
           title="Controls"
-          buttons={(
+          buttons={
             <Flex>
               <Button
                 icon={isActive ? 'power-off' : 'times'}
                 selected={isActive}
                 content={isActive ? 'On' : 'Off'}
-                onClick={() => act('power')} />
+                onClick={() => act('power')}
+              />
             </Flex>
-          )}>
+          }
+        >
           <Table>
             <Table.Row>
               <Table.Cell bold collapsing color="label">
@@ -56,9 +67,12 @@ export const ChemHeater = (props, context) => {
                   value={round(targetTemp)}
                   minValue={0}
                   maxValue={1000}
-                  onDrag={(e, value) => act('temperature', {
-                    target: value,
-                  })} />
+                  onDrag={(e, value) =>
+                    act('temperature', {
+                      target: value,
+                    })
+                  }
+                />
               </Table.Cell>
             </Table.Row>
             <Table.Row>
@@ -66,14 +80,14 @@ export const ChemHeater = (props, context) => {
                 Reading:
               </Table.Cell>
               <Table.Cell collapsing color="default">
-                <Box
-                  width="60px"
-                  textAlign="right">
-                  {isBeakerLoaded && (
+                <Box width="60px" textAlign="right">
+                  {(isBeakerLoaded && (
                     <AnimatedNumber
                       value={currentTemp}
-                      format={value => toFixed(value) + ' K'} />
-                  ) || '—'}
+                      format={(value) => toFixed(value) + ' K'}
+                    />
+                  )) ||
+                    '—'}
                 </Box>
               </Table.Cell>
             </Table.Row>
@@ -81,73 +95,74 @@ export const ChemHeater = (props, context) => {
         </Section>
         {!!isBeakerLoaded && (
           <Section title="Reactions">
-            {activeReactions.length === 0 && (
-              <Box color="label">
-                No active reactions.
-              </Box>
-            ) || (
+            {(activeReactions.length === 0 && (
+              <Box color="label">No active reactions.</Box>
+            )) || (
               <Table>
                 <Table.Row>
                   <Table.Cell bold color="label">
                     Reaction
                   </Table.Cell>
                   <Table.Cell bold color="label">
-                    {upgradeLevel < 4 ? "Status" : "Reaction quality"}
+                    {upgradeLevel < 4 ? 'Status' : 'Reaction quality'}
                   </Table.Cell>
                   <Table.Cell bold color="label">
                     Target
                   </Table.Cell>
                 </Table.Row>
-                {activeReactions.map(reaction => (
+                {activeReactions.map((reaction) => (
                   <Table.Row key="reactions">
-                    <Table.Cell width={'60px'} color={reaction.danger && "red"}>
+                    <Table.Cell width={'60px'} color={reaction.danger && 'red'}>
                       {reaction.name}
                     </Table.Cell>
                     <Table.Cell width={'100px'} pr={'10px'}>
-                      {upgradeLevel < 4 && (
+                      {(upgradeLevel < 4 && (
                         <Icon
-                          name={reaction.danger ? "exclamation-triangle" : "spinner"}
-                          color={reaction.danger && "red"}
+                          name={
+                            reaction.danger ? 'exclamation-triangle' : 'spinner'
+                          }
+                          color={reaction.danger && 'red'}
                           spin={!reaction.danger}
-                          ml={2.5} />
-                      ) || (
+                          ml={2.5}
+                        />
+                      )) || (
                         <AnimatedNumber value={reaction.quality}>
                           {(_, value) => (
                             <RoundGauge
-                              size={1.30}
+                              size={1.3}
                               value={value}
                               minValue={0}
                               maxValue={1}
                               alertAfter={reaction.purityAlert}
-                              content={"test"}
-                              format={value => null}
+                              content={'test'}
+                              format={(value) => null}
                               ml={5}
                               ranges={{
-                                "red": [0, reaction.minPure],
-                                "orange": [reaction.minPure, reaction.inverse],
-                                "yellow": [reaction.inverse, 0.8],
-                                "green": [0.8, 1],
-                              }} />
+                                red: [0, reaction.minPure],
+                                orange: [reaction.minPure, reaction.inverse],
+                                yellow: [reaction.inverse, 0.8],
+                                green: [0.8, 1],
+                              }}
+                            />
                           )}
                         </AnimatedNumber>
                       )}
                     </Table.Cell>
                     <Table.Cell width={'70px'}>
-                      {upgradeLevel > 2 && (
+                      {(upgradeLevel > 2 && (
                         <ProgressBar
                           value={reaction.reactedVol}
                           minValue={0}
                           maxValue={reaction.targetVol}
                           textAlign={'center'}
-                          icon={reaction.overheat && "thermometer-full"}
+                          icon={reaction.overheat && 'thermometer-full'}
                           width={7}
-                          color={reaction.overheat ? "red" : "label"}>
+                          color={reaction.overheat ? 'red' : 'label'}
+                        >
                           {reaction.targetVol}u
                         </ProgressBar>
-                      ) || (
-                        <Box
-                          color={reaction.danger && "red"}
-                          ml={2}>
+                      )) || (
+                        <Box color={reaction.danger && 'red'} ml={2}>
                           {reaction.targetVol}u
                         </Box>
                       )}
@@ -161,20 +176,25 @@ export const ChemHeater = (props, context) => {
         )}
         <Section
           title="Beaker"
-          buttons={!!isBeakerLoaded && (
-            <>
-              <Box inline color="label" mr={2}>
-                {beakerCurrentVolume} / {beakerMaxVolume} units
-              </Box>
-              <Button
-                icon="eject"
-                content="Eject"
-                onClick={() => act('eject')} />
-            </>
-          )}>
+          buttons={
+            !!isBeakerLoaded && (
+              <>
+                <Box inline color="label" mr={2}>
+                  {beakerCurrentVolume} / {beakerMaxVolume} units
+                </Box>
+                <Button
+                  icon="eject"
+                  content="Eject"
+                  onClick={() => act('eject')}
+                />
+              </>
+            )
+          }
+        >
           <BeakerContents
             beakerLoaded={isBeakerLoaded}
-            beakerContents={beakerContents} />
+            beakerContents={beakerContents}
+          />
         </Section>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/ChemMaster.js b/tgui/packages/tgui/interfaces/ChemMaster.js
index 4f1a380d57a3..f77c78e6e413 100644
--- a/tgui/packages/tgui/interfaces/ChemMaster.js
+++ b/tgui/packages/tgui/interfaces/ChemMaster.js
@@ -1,20 +1,23 @@
 import { useBackend, useSharedState } from '../backend';
-import { AnimatedNumber, Box, Button, ColorBox, LabeledList, NumberInput, Section, Table } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  ColorBox,
+  LabeledList,
+  NumberInput,
+  Section,
+  Table,
+} from '../components';
 import { Window } from '../layouts';
 
 export const ChemMaster = (props, context) => {
   const { data } = useBackend(context);
   const { screen } = data;
   return (
-    <Window
-      width={465}
-      height={550}>
+    <Window width={465} height={550}>
       <Window.Content scrollable>
-        {screen === 'analyze' && (
-          <AnalysisResults />
-        ) || (
-          <ChemMasterContent />
-        )}
+        {(screen === 'analyze' && <AnalysisResults />) || <ChemMasterContent />}
       </Window.Content>
     </Window>
   );
@@ -40,20 +43,22 @@ const ChemMasterContent = (props, context) => {
     <>
       <Section
         title="Beaker"
-        buttons={!!data.isBeakerLoaded && (
-          <>
-            <Box inline color="label" mr={2}>
-              <AnimatedNumber
-                value={beakerCurrentVolume}
-                initial={0} />
-              {` / ${beakerMaxVolume} units`}
-            </Box>
-            <Button
-              icon="eject"
-              content="Eject"
-              onClick={() => act('eject')} />
-          </>
-        )}>
+        buttons={
+          !!data.isBeakerLoaded && (
+            <>
+              <Box inline color="label" mr={2}>
+                <AnimatedNumber value={beakerCurrentVolume} initial={0} />
+                {` / ${beakerMaxVolume} units`}
+              </Box>
+              <Button
+                icon="eject"
+                content="Eject"
+                onClick={() => act('eject')}
+              />
+            </>
+          )
+        }
+      >
         {!isBeakerLoaded && (
           <Box color="label" mt="3px" mb="5px">
             No beaker loaded.
@@ -65,17 +70,18 @@ const ChemMasterContent = (props, context) => {
           </Box>
         )}
         <ChemicalBuffer>
-          {beakerContents.map(chemical => (
+          {beakerContents.map((chemical) => (
             <ChemicalBufferEntry
               key={chemical.id}
               chemical={chemical}
-              transferTo="buffer" />
+              transferTo="buffer"
+            />
           ))}
         </ChemicalBuffer>
       </Section>
       <Section
         title="Buffer"
-        buttons={(
+        buttons={
           <>
             <Box inline color="label" mr={1}>
               Mode:
@@ -84,31 +90,33 @@ const ChemMasterContent = (props, context) => {
               color={data.mode ? 'good' : 'bad'}
               icon={data.mode ? 'exchange-alt' : 'times'}
               content={data.mode ? 'Transfer' : 'Destroy'}
-              onClick={() => act('toggleMode')} />
+              onClick={() => act('toggleMode')}
+            />
           </>
-        )}>
+        }
+      >
         {bufferContents.length === 0 && (
           <Box color="label" mt="3px" mb="5px">
             Buffer is empty.
           </Box>
         )}
         <ChemicalBuffer>
-          {bufferContents.map(chemical => (
+          {bufferContents.map((chemical) => (
             <ChemicalBufferEntry
               key={chemical.id}
               chemical={chemical}
-              transferTo="beaker" />
+              transferTo="beaker"
+            />
           ))}
         </ChemicalBuffer>
       </Section>
-      <Section
-        title="Packaging">
+      <Section title="Packaging">
         <PackagingControls />
       </Section>
       {!!isPillBottleLoaded && (
         <Section
           title="Pill Bottle"
-          buttons={(
+          buttons={
             <>
               <Box inline color="label" mr={2}>
                 {pillBottleCurrentAmount} / {pillBottleMaxAmount} pills
@@ -116,9 +124,11 @@ const ChemMasterContent = (props, context) => {
               <Button
                 icon="eject"
                 content="Eject"
-                onClick={() => act('ejectPillBottle')} />
+                onClick={() => act('ejectPillBottle')}
+              />
             </>
-          )} />
+          }
+        />
       )}
     </>
   );
@@ -132,68 +142,78 @@ const ChemicalBufferEntry = (props, context) => {
   return (
     <Table.Row key={chemical.id}>
       <Table.Cell color="label">
-        <AnimatedNumber
-          value={chemical.volume}
-          initial={0} />
+        <AnimatedNumber value={chemical.volume} initial={0} />
         {` units of ${chemical.name}`}
       </Table.Cell>
       <Table.Cell collapsing>
         <Button
           content="1"
-          onClick={() => act('transfer', {
-            id: chemical.id,
-            amount: 1,
-            to: transferTo,
-          })} />
+          onClick={() =>
+            act('transfer', {
+              id: chemical.id,
+              amount: 1,
+              to: transferTo,
+            })
+          }
+        />
         <Button
           content="5"
-          onClick={() => act('transfer', {
-            id: chemical.id,
-            amount: 5,
-            to: transferTo,
-          })} />
+          onClick={() =>
+            act('transfer', {
+              id: chemical.id,
+              amount: 5,
+              to: transferTo,
+            })
+          }
+        />
         <Button
           content="10"
-          onClick={() => act('transfer', {
-            id: chemical.id,
-            amount: 10,
-            to: transferTo,
-          })} />
+          onClick={() =>
+            act('transfer', {
+              id: chemical.id,
+              amount: 10,
+              to: transferTo,
+            })
+          }
+        />
         <Button
           content="All"
-          onClick={() => act('transfer', {
-            id: chemical.id,
-            amount: 1000,
-            to: transferTo,
-          })} />
+          onClick={() =>
+            act('transfer', {
+              id: chemical.id,
+              amount: 1000,
+              to: transferTo,
+            })
+          }
+        />
         <Button
           icon="ellipsis-h"
           title="Custom amount"
-          onClick={() => act('transfer', {
-            id: chemical.id,
-            amount: -1,
-            to: transferTo,
-          })} />
+          onClick={() =>
+            act('transfer', {
+              id: chemical.id,
+              amount: -1,
+              to: transferTo,
+            })
+          }
+        />
         <Button
           icon="question"
           title="Analyze"
-          onClick={() => act('analyze', {
-            id: chemical.id,
-          })} />
+          onClick={() =>
+            act('analyze', {
+              id: chemical.id,
+            })
+          }
+        />
       </Table.Cell>
     </Table.Row>
   );
 };
 
-const PackagingControlsItem = props => {
-  const {
-    label,
-    amountUnit,
-    amount,
-    onChangeAmount,
-    onCreate,
-    sideNote,
-  } = props;
+const PackagingControlsItem = (props) => {
+  const { label, amountUnit, amount, onChangeAmount, onCreate, sideNote } =
+    props;
   return (
     <LabeledList.Item label={label}>
       <NumberInput
@@ -204,11 +224,9 @@ const PackagingControlsItem = props => {
         value={amount}
         minValue={1}
         maxValue={20}
-        onChange={onChangeAmount} />
-      <Button
-        ml={1}
-        content="Create"
-        onClick={onCreate} />
+        onChange={onChangeAmount}
+      />
+      <Button ml={1} content="Create" onClick={onCreate} />
       <Box inline ml={1} color="label">
         {sideNote}
       </Box>
@@ -218,28 +236,21 @@ const PackagingControlsItem = props => {
 
 const PackagingControls = (props, context) => {
   const { act, data } = useBackend(context);
-  const [
-    pillAmount,
-    setPillAmount,
-  ] = useSharedState(context, 'pillAmount', 1);
-  const [
-    patchAmount,
-    setPatchAmount,
-  ] = useSharedState(context, 'patchAmount', 1);
-  const [
-    bottleAmount,
-    setBottleAmount,
-  ] = useSharedState(context, 'bottleAmount', 1);
+  const [pillAmount, setPillAmount] = useSharedState(context, 'pillAmount', 1);
+  const [patchAmount, setPatchAmount] = useSharedState(
+    context,
+    'patchAmount',
+    1,
+  );
+  const [bottleAmount, setBottleAmount] = useSharedState(
+    context,
+    'bottleAmount',
+    1,
+  );
   // PARIAH EDIT ADDITION
-  const [
-    vialAmount,
-    setVialAmount,
-  ] = useSharedState(context, 'vialAmount', 1);
+  const [vialAmount, setVialAmount] = useSharedState(context, 'vialAmount', 1);
   // PARIAH EDIT END
-  const [
-    packAmount,
-    setPackAmount,
-  ] = useSharedState(context, 'packAmount', 1);
+  const [packAmount, setPackAmount] = useSharedState(context, 'packAmount', 1);
   const {
     condi,
     chosenPillStyle,
@@ -255,14 +266,15 @@ const PackagingControls = (props, context) => {
     <LabeledList>
       {!condi && (
         <LabeledList.Item label="Pill type">
-          {pillStyles.map(pill => (
+          {pillStyles.map((pill) => (
             <Button
               key={pill.id}
               width="30px"
               selected={pill.id === chosenPillStyle}
               textAlign="center"
               color="transparent"
-              onClick={() => act('pillStyle', { id: pill.id })}>
+              onClick={() => act('pillStyle', { id: pill.id })}
+            >
               <Box mx={-1} className={pill.className} />
             </Button>
           ))}
@@ -275,21 +287,27 @@ const PackagingControls = (props, context) => {
           amountUnit="pills"
           sideNote="max 50u"
           onChangeAmount={(e, value) => setPillAmount(value)}
-          onCreate={() => act('create', {
-            type: 'pill',
-            amount: pillAmount,
-            volume: 'auto',
-          })} />
+          onCreate={() =>
+            act('create', {
+              type: 'pill',
+              amount: pillAmount,
+              volume: 'auto',
+            })
+          }
+        />
       )}
       {!condi && (
         <LabeledList.Item label="Patch type">
-          {patch_styles.map(patch => (
+          {patch_styles.map((patch) => (
             <Button
               key={patch.style}
               selected={patch.style === patch_style}
               textAlign="center"
               color="transparent"
-              onClick={() => act('change_patch_style', { patch_style: patch.style })}>
+              onClick={() =>
+                act('change_patch_style', { patch_style: patch.style })
+              }
+            >
               <Box mb={0} mt={1} className={patch.class_name} />
             </Button>
           ))}
@@ -302,11 +320,14 @@ const PackagingControls = (props, context) => {
           amountUnit="patches"
           sideNote="max 40u"
           onChangeAmount={(e, value) => setPatchAmount(value)}
-          onCreate={() => act('create', {
-            type: 'patch',
-            amount: patchAmount,
-            volume: 'auto',
-          })} />
+          onCreate={() =>
+            act('create', {
+              type: 'patch',
+              amount: patchAmount,
+              volume: 'auto',
+            })
+          }
+        />
       )}
       {!condi && (
         <PackagingControlsItem
@@ -315,18 +336,26 @@ const PackagingControls = (props, context) => {
           amountUnit="bottles"
           sideNote="max 30u"
           onChangeAmount={(e, value) => setBottleAmount(value)}
-          onCreate={() => act('create', {
-            type: 'bottle',
-            amount: bottleAmount,
-            volume: 'auto',
-          })} />
+          onCreate={() =>
+            act('create', {
+              type: 'bottle',
+              amount: bottleAmount,
+              volume: 'auto',
+            })
+          }
+        />
       )}
       {!!condi && (
         <LabeledList.Item label="Bottle type">
           <Button.Checkbox
-            onClick={() => act('condiStyle', { id: autoCondiStyleChosen ? condiStyles[0].id : autoCondiStyle })}
+            onClick={() =>
+              act('condiStyle', {
+                id: autoCondiStyleChosen ? condiStyles[0].id : autoCondiStyle,
+              })
+            }
             checked={autoCondiStyleChosen}
-            disabled={!condiStyles.length}>
+            disabled={!condiStyles.length}
+          >
             Guess from contents
           </Button.Checkbox>
         </LabeledList.Item>
@@ -338,15 +367,18 @@ const PackagingControls = (props, context) => {
           amountUnit="vials"
           sideNote="max 60u"
           onChangeAmount={(e, value) => setVialAmount(value)}
-          onCreate={() => act('create', {
-            type: 'vial',
-            amount: vialAmount,
-            volume: 'auto',
-          })} /> // PARIAH EDIT END
+          onCreate={() =>
+            act('create', {
+              type: 'vial',
+              amount: vialAmount,
+              volume: 'auto',
+            })
+          }
+        /> // PARIAH EDIT END
       )}
       {!!condi && !autoCondiStyleChosen && (
         <LabeledList.Item label="">
-          {condiStyles.map(style => (
+          {condiStyles.map((style) => (
             <Button
               key={style.id}
               width="30px"
@@ -354,7 +386,8 @@ const PackagingControls = (props, context) => {
               textAlign="center"
               color="transparent"
               title={style.title}
-              onClick={() => act('condiStyle', { id: style.id })}>
+              onClick={() => act('condiStyle', { id: style.id })}
+            >
               <Box mx={-1} className={style.className} />
             </Button>
           ))}
@@ -367,11 +400,14 @@ const PackagingControls = (props, context) => {
           amountUnit="bottles"
           sideNote="max 50u"
           onChangeAmount={(e, value) => setBottleAmount(value)}
-          onCreate={() => act('create', {
-            type: 'condimentBottle',
-            amount: bottleAmount,
-            volume: 'auto',
-          })} />
+          onCreate={() =>
+            act('create', {
+              type: 'condimentBottle',
+              amount: bottleAmount,
+              volume: 'auto',
+            })
+          }
+        />
       )}
       {!!condi && (
         <PackagingControlsItem
@@ -380,11 +416,14 @@ const PackagingControls = (props, context) => {
           amountUnit="packs"
           sideNote="max 10u"
           onChangeAmount={(e, value) => setPackAmount(value)}
-          onCreate={() => act('create', {
-            type: 'condimentPack',
-            amount: packAmount,
-            volume: 'auto',
-          })} />
+          onCreate={() =>
+            act('create', {
+              type: 'condimentPack',
+              amount: packAmount,
+              volume: 'auto',
+            })
+          }
+        />
       )}
     </LabeledList>
   );
@@ -396,24 +435,22 @@ const AnalysisResults = (props, context) => {
   return (
     <Section
       title="Analysis Results"
-      buttons={(
+      buttons={
         <Button
           icon="arrow-left"
           content="Back"
-          onClick={() => act('goScreen', {
-            screen: 'home',
-          })} />
-      )}>
+          onClick={() =>
+            act('goScreen', {
+              screen: 'home',
+            })
+          }
+        />
+      }
+    >
       <LabeledList>
-        <LabeledList.Item label="Name">
-          {analyzeVars.name}
-        </LabeledList.Item>
-        <LabeledList.Item label="State">
-          {analyzeVars.state}
-        </LabeledList.Item>
-        <LabeledList.Item label="pH">
-          {analyzeVars.ph}
-        </LabeledList.Item>
+        <LabeledList.Item label="Name">{analyzeVars.name}</LabeledList.Item>
+        <LabeledList.Item label="State">{analyzeVars.state}</LabeledList.Item>
+        <LabeledList.Item label="pH">{analyzeVars.ph}</LabeledList.Item>
         <LabeledList.Item label="Color">
           <ColorBox color={analyzeVars.color} mr={1} />
           {analyzeVars.color}
diff --git a/tgui/packages/tgui/interfaces/ChemPress.js b/tgui/packages/tgui/interfaces/ChemPress.js
index 8b6613768967..7824af9a00eb 100644
--- a/tgui/packages/tgui/interfaces/ChemPress.js
+++ b/tgui/packages/tgui/interfaces/ChemPress.js
@@ -1,5 +1,12 @@
 import { useBackend } from '../backend';
-import { Box, Button, Input, LabeledList, NumberInput, Section } from '../components';
+import {
+  Box,
+  Button,
+  Input,
+  LabeledList,
+  NumberInput,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const ChemPress = (props, context) => {
@@ -16,40 +23,46 @@ export const ChemPress = (props, context) => {
     patch_styles = [],
   } = data;
   return (
-    <Window
-      width={300}
-      height={227}>
+    <Window width={300} height={227}>
       <Window.Content>
         <Section>
           <LabeledList>
             <LabeledList.Item label="Product">
               <Button.Checkbox
                 content="Pills"
-                checked={product === "pill"}
-                onClick={() => act('change_product', {
-                  product: "pill",
-                })}
+                checked={product === 'pill'}
+                onClick={() =>
+                  act('change_product', {
+                    product: 'pill',
+                  })
+                }
               />
               <Button.Checkbox
                 content="Patches"
-                checked={product === "patch"}
-                onClick={() => act('change_product', {
-                  product: "patch",
-                })}
+                checked={product === 'patch'}
+                onClick={() =>
+                  act('change_product', {
+                    product: 'patch',
+                  })
+                }
               />
               <Button.Checkbox
                 content="Bottles"
-                checked={product === "bottle"}
-                onClick={() => act('change_product', {
-                  product: "bottle",
-                })}
+                checked={product === 'bottle'}
+                onClick={() =>
+                  act('change_product', {
+                    product: 'bottle',
+                  })
+                }
               />
               <Button.Checkbox
                 content="Vials"
-                checked={product === "vial"}
-                onClick={() => act('change_product', {
-                  product: "vial",
-                })}
+                checked={product === 'vial'}
+                onClick={() =>
+                  act('change_product', {
+                    product: 'vial',
+                  })
+                }
               />
             </LabeledList.Item>
             <LabeledList.Item label="Volume">
@@ -61,49 +74,59 @@ export const ChemPress = (props, context) => {
                 maxValue={max_volume}
                 step={1}
                 stepPixelSize={2}
-                onChange={(e, value) => act('change_current_volume', {
-                  volume: value,
-                })} />
+                onChange={(e, value) =>
+                  act('change_current_volume', {
+                    volume: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Name">
               <Input
                 value={product_name}
                 placeholder={product_name}
-                onChange={(e, value) => act('change_product_name', {
-                  name: value,
-                })} />
-              <Box as="span">
-                {product}
-              </Box>
+                onChange={(e, value) =>
+                  act('change_product_name', {
+                    name: value,
+                  })
+                }
+              />
+              <Box as="span">{product}</Box>
             </LabeledList.Item>
-            {product === "pill" && (
+            {product === 'pill' && (
               <LabeledList.Item label="Style">
-                {pill_styles.map(pill => (
+                {pill_styles.map((pill) => (
                   <Button
                     key={pill.id}
                     width="30px"
                     selected={pill.id === pill_style}
                     textAlign="center"
                     color="transparent"
-                    onClick={() => act('change_pill_style', {
-                      id: pill.id,
-                    })}>
+                    onClick={() =>
+                      act('change_pill_style', {
+                        id: pill.id,
+                      })
+                    }
+                  >
                     <Box mx={-1} className={pill.class_name} />
                   </Button>
                 ))}
               </LabeledList.Item>
             )}
-            {product === "patch" && (
+            {product === 'patch' && (
               <LabeledList.Item label="Style">
-                {patch_styles.map(patch => (
+                {patch_styles.map((patch) => (
                   <Button
                     key={patch.style}
                     selected={patch.style === patch_style}
                     textAlign="center"
                     color="transparent"
-                    onClick={() => act('change_patch_style', {
-                      patch_style: patch.style,
-                    })}>
+                    onClick={() =>
+                      act('change_patch_style', {
+                        patch_style: patch.style,
+                      })
+                    }
+                  >
                     <Box mb={0} mt={1} className={patch.class_name} />
                   </Button>
                 ))}
diff --git a/tgui/packages/tgui/interfaces/ChemReactionChamber.js b/tgui/packages/tgui/interfaces/ChemReactionChamber.js
index cb7c3d1ae73c..5dc1a278c563 100644
--- a/tgui/packages/tgui/interfaces/ChemReactionChamber.js
+++ b/tgui/packages/tgui/interfaces/ChemReactionChamber.js
@@ -1,19 +1,31 @@
 import { useBackend, useLocalState } from '../backend';
-import { AnimatedNumber, Box, Button, Input, LabeledList, NumberInput, Section, RoundGauge, Stack } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  Input,
+  LabeledList,
+  NumberInput,
+  Section,
+  RoundGauge,
+  Stack,
+} from '../components';
 import { Window } from '../layouts';
 import { round, toFixed } from 'common/math';
 
 export const ChemReactionChamber = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const [
-    reagentName,
-    setReagentName,
-  ] = useLocalState(context, 'reagentName', '');
-  const [
-    reagentQuantity,
-    setReagentQuantity,
-  ] = useLocalState(context, 'reagentQuantity', 1);
+  const [reagentName, setReagentName] = useLocalState(
+    context,
+    'reagentName',
+    '',
+  );
+  const [reagentQuantity, setReagentQuantity] = useLocalState(
+    context,
+    'reagentQuantity',
+    1,
+  );
 
   const {
     emptying,
@@ -26,19 +38,15 @@ export const ChemReactionChamber = (props, context) => {
   } = data;
   const reagents = data.reagents || [];
   return (
-    <Window
-      width={290}
-      height={400}>
+    <Window width={290} height={400}>
       <Window.Content>
         <Stack vertical fill>
           <Stack.Item>
             <Section
               title="Conditions"
-              buttons={(
+              buttons={
                 <Stack>
-                  <Stack.Item mt={0.3}>
-                    {"Target:"}
-                  </Stack.Item>
+                  <Stack.Item mt={0.3}>{'Target:'}</Stack.Item>
                   <Stack.Item>
                     <NumberInput
                       width="65px"
@@ -48,12 +56,16 @@ export const ChemReactionChamber = (props, context) => {
                       value={round(targetTemp)}
                       minValue={0}
                       maxValue={1000}
-                      onDrag={(e, value) => act('temperature', {
-                        target: value,
-                      })} />
+                      onDrag={(e, value) =>
+                        act('temperature', {
+                          target: value,
+                        })
+                      }
+                    />
                   </Stack.Item>
                 </Stack>
-              )}>
+              }
+            >
               <Stack vertical>
                 <Stack.Item>
                   <Stack fill>
@@ -63,7 +75,8 @@ export const ChemReactionChamber = (props, context) => {
                     <Stack.Item grow>
                       <AnimatedNumber
                         value={temperature}
-                        format={value => toFixed(value) + ' K'} />
+                        format={(value) => toFixed(value) + ' K'}
+                      />
                     </Stack.Item>
                     <Stack.Item grow>
                       <RoundGauge
@@ -72,32 +85,29 @@ export const ChemReactionChamber = (props, context) => {
                         maxValue={14}
                         format={() => null}
                         position="absolute"
-                        size={1.50}
+                        size={1.5}
                         top={0.5}
                         right={0.5}
                         ranges={{
-                          "red": [-0.22, 1.5],
-                          "orange": [1.5, 3],
-                          "yellow": [3, 4.5],
-                          "olive": [4.5, 5],
-                          "good": [5, 6],
-                          "green": [6, 8.5],
-                          "teal": [8.5, 9.5],
-                          "blue": [9.5, 11],
-                          "purple": [11, 12.5],
-                          "violet": [12.5, 14],
-                        }} />
+                          red: [-0.22, 1.5],
+                          orange: [1.5, 3],
+                          yellow: [3, 4.5],
+                          olive: [4.5, 5],
+                          good: [5, 6],
+                          green: [6, 8.5],
+                          teal: [8.5, 9.5],
+                          blue: [9.5, 11],
+                          purple: [11, 12.5],
+                          violet: [12.5, 14],
+                        }}
+                      />
                     </Stack.Item>
                   </Stack>
                 </Stack.Item>
                 <Stack.Item>
                   <Stack fill>
-                    <Stack.Item textColor="label">
-                      {"ph:"}
-                    </Stack.Item>
-                    <Stack.Item grow={15}>
-                      {ph}
-                    </Stack.Item>
+                    <Stack.Item textColor="label">{'ph:'}</Stack.Item>
+                    <Stack.Item grow={15}>{ph}</Stack.Item>
                     <Stack.Item grow mt={1} mb={-0.5}>
                       <Button
                         color="transparent"
@@ -110,7 +120,8 @@ export const ChemReactionChamber = (props, context) => {
                         The pH scale is logarithmic and inversely
                         indicates the concentration of hydrogen ions
                         in the solution.`}
-                        tooltipPosition="bottom-start" />
+                        tooltipPosition="bottom-start"
+                      />
                     </Stack.Item>
                   </Stack>
                 </Stack.Item>
@@ -122,24 +133,23 @@ export const ChemReactionChamber = (props, context) => {
               title="Settings"
               fill
               scrollable
-              buttons={(
-                isReacting && (
-                  <Box
-                    inline
-                    bold
-                    color={"purple"}>
-                    {"Reacting"}
+              buttons={
+                (isReacting && (
+                  <Box inline bold color={'purple'}>
+                    {'Reacting'}
                   </Box>
-                ) || (
+                )) || (
                   <Box
                     fontSize="16px"
                     inline
                     bold
-                    color={emptying ? "bad" : "good"}>
-                    {emptying ? "Emptying" : "Filling"}
+                    color={emptying ? 'bad' : 'good'}
+                  >
+                    {emptying ? 'Emptying' : 'Filling'}
                   </Box>
                 )
-              )}>
+              }
+            >
               <Stack vertical fill>
                 <Stack.Item>
                   <LabeledList>
@@ -151,9 +161,12 @@ export const ChemReactionChamber = (props, context) => {
                         step={1}
                         stepPixelSize={3}
                         width="39px"
-                        onDrag={(e, value) => act('acidic', {
-                          target: value,
-                        })} />
+                        onDrag={(e, value) =>
+                          act('acidic', {
+                            target: value,
+                          })
+                        }
+                      />
                     </LabeledList.Item>
                     <LabeledList.Item label="Alkaline pH limit">
                       <NumberInput
@@ -163,9 +176,12 @@ export const ChemReactionChamber = (props, context) => {
                         step={1}
                         stepPixelSize={3}
                         width="39px"
-                        onDrag={(e, value) => act('alkaline', {
-                          target: value,
-                        })} />
+                        onDrag={(e, value) =>
+                          act('alkaline', {
+                            target: value,
+                          })
+                        }
+                      />
                       <Box inline mr={1} />
                     </LabeledList.Item>
                   </LabeledList>
@@ -177,7 +193,8 @@ export const ChemReactionChamber = (props, context) => {
                         fluid
                         value=""
                         placeholder="Reagent Name"
-                        onInput={(e, value) => setReagentName(value)} />
+                        onInput={(e, value) => setReagentName(value)}
+                      />
                     </Stack.Item>
                     <Stack.Item>
                       <NumberInput
@@ -187,26 +204,30 @@ export const ChemReactionChamber = (props, context) => {
                         step={1}
                         stepPixelSize={3}
                         width="39px"
-                        onDrag={(e, value) => setReagentQuantity(value)} />
+                        onDrag={(e, value) => setReagentQuantity(value)}
+                      />
                       <Box inline mr={1} />
                     </Stack.Item>
                     <Stack.Item>
                       <Button
                         icon="plus"
-                        onClick={() => act('add', {
-                          chem: reagentName,
-                          amount: reagentQuantity,
-                        })} />
+                        onClick={() =>
+                          act('add', {
+                            chem: reagentName,
+                            amount: reagentQuantity,
+                          })
+                        }
+                      />
                     </Stack.Item>
                   </Stack>
                 </Stack.Item>
                 <Stack.Item>
                   <Stack vertical>
-                    {reagents.map(reagent => (
+                    {reagents.map((reagent) => (
                       <Stack.Item key={reagent}>
                         <Stack fill>
                           <Stack.Item mt={0.25} textColor="label">
-                            {reagent.name+":"}
+                            {reagent.name + ':'}
                           </Stack.Item>
                           <Stack.Item mt={0.25} grow>
                             {reagent.required_reagent}
@@ -215,9 +236,12 @@ export const ChemReactionChamber = (props, context) => {
                             <Button
                               icon="minus"
                               color="bad"
-                              onClick={() => act('remove', {
-                                chem: reagent.name,
-                              })} />
+                              onClick={() =>
+                                act('remove', {
+                                  chem: reagent.name,
+                                })
+                              }
+                            />
                           </Stack.Item>
                         </Stack>
                       </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/ChemRecipeDebug.js b/tgui/packages/tgui/interfaces/ChemRecipeDebug.js
index 43f924259458..82b7cbbe7b6c 100644
--- a/tgui/packages/tgui/interfaces/ChemRecipeDebug.js
+++ b/tgui/packages/tgui/interfaces/ChemRecipeDebug.js
@@ -1,6 +1,17 @@
 import { round } from 'common/math';
 import { useBackend } from '../backend';
-import { AnimatedNumber, Box, Button, Flex, LabeledList, NumberInput, ProgressBar, RoundGauge, Section, Table } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  Flex,
+  LabeledList,
+  NumberInput,
+  ProgressBar,
+  RoundGauge,
+  Section,
+  Table,
+} from '../components';
 import { Window } from '../layouts';
 import { BeakerContents } from './common/BeakerContents';
 
@@ -30,42 +41,36 @@ export const ChemRecipeDebug = (props, context) => {
     queuedReactions = [],
   } = data;
   return (
-    <Window
-      width={450}
-      height={850}>
+    <Window width={450} height={850}>
       <Window.Content scrollable>
         <Section
           title="Controls"
-          buttons={(
+          buttons={
             <>
               <Button
                 icon={beakerSpawn ? 'power-off' : 'times'}
                 selected={beakerSpawn}
-                content={"Spawn beaker"}
-                onClick={() => act('beakerSpawn')} />
+                content={'Spawn beaker'}
+                onClick={() => act('beakerSpawn')}
+              />
               <Button
                 icon={processAll ? 'power-off' : 'times'}
                 selected={processAll}
-                content={"All"}
-                onClick={() => act('all')} />
+                content={'All'}
+                onClick={() => act('all')}
+              />
             </>
-          )}>
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Reactions">
-              <Button
-                icon="plus"
-                onClick={() => act('setTargetList')} />
+              <Button icon="plus" onClick={() => act('setTargetList')} />
             </LabeledList.Item>
             <LabeledList.Item label="Queued">
-              {processAll && (
-                <Box>All</Box>
-              ) || (
+              {(processAll && <Box>All</Box>) || (
                 <Box>
-                  {queuedReactions.length && (
-                    queuedReactions.map(entry => (
-                      entry.name+", "
-                    ))
-                  )}
+                  {queuedReactions.length &&
+                    queuedReactions.map((entry) => entry.name + ', ')}
                 </Box>
               )}
             </LabeledList.Item>
@@ -79,19 +84,24 @@ export const ChemRecipeDebug = (props, context) => {
                 value={round(targetTemp)}
                 minValue={0}
                 maxValue={1000}
-                onDrag={(e, value) => act('temperature', {
-                  target: value,
-                })} />
+                onDrag={(e, value) =>
+                  act('temperature', {
+                    target: value,
+                  })
+                }
+              />
               <Button
                 icon={forceTemp ? 'power-off' : 'times'}
                 selected={forceTemp}
-                content={"Force"}
-                onClick={() => act('forceTemp')} />
+                content={'Force'}
+                onClick={() => act('forceTemp')}
+              />
               <Button
                 icon={minTemp ? 'power-off' : 'times'}
                 selected={minTemp}
-                content={"MinTemp"}
-                onClick={() => act('minTemp')} />
+                content={'MinTemp'}
+                onClick={() => act('minTemp')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Vol multi">
               <NumberInput
@@ -102,9 +112,12 @@ export const ChemRecipeDebug = (props, context) => {
                 value={round(targetVol)}
                 minValue={1}
                 maxValue={200}
-                onDrag={(e, value) => act('vol', {
-                  target: value,
-                })} />
+                onDrag={(e, value) =>
+                  act('vol', {
+                    target: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="pH">
               {currentpH}
@@ -115,14 +128,18 @@ export const ChemRecipeDebug = (props, context) => {
                 value={targatpH}
                 minValue={0}
                 maxValue={14}
-                onDrag={(e, value) => act('pH', {
-                  target: value,
-                })} />
+                onDrag={(e, value) =>
+                  act('pH', {
+                    target: value,
+                  })
+                }
+              />
               <Button
                 icon={forcepH ? 'power-off' : 'times'}
                 selected={forcepH}
-                content={"Force"}
-                onClick={() => act('forcepH')} />
+                content={'Force'}
+                onClick={() => act('forcepH')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Index">
               {index} of {endIndex}
@@ -131,25 +148,29 @@ export const ChemRecipeDebug = (props, context) => {
               <Button
                 icon={processing ? 'power-off' : 'times'}
                 selected={!!processing}
-                content={"Start"}
-                onClick={() => act('start')} />
+                content={'Start'}
+                onClick={() => act('start')}
+              />
               <Button
                 icon={processing ? 'times' : 'power-off'}
                 color="red"
-                content={"Stop"}
-                onClick={() => act('stop')} />
+                content={'Stop'}
+                onClick={() => act('stop')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
-        <Section
-          title="Recipe edit">
+        <Section title="Recipe edit">
           <LabeledList>
-            <LabeledList.Item label={editRecipeName ? editRecipeName : "lookup"}>
+            <LabeledList.Item
+              label={editRecipeName ? editRecipeName : 'lookup'}
+            >
               <Button
                 icon={'flask'}
                 color="purple"
-                content={"Select recipe"}
-                onClick={() => act('setEdit')} />
+                content={'Select recipe'}
+                onClick={() => act('setEdit')}
+              />
             </LabeledList.Item>
             {!!editRecipe && (
               <>
@@ -157,13 +178,16 @@ export const ChemRecipeDebug = (props, context) => {
                   <Button
                     icon={editRecipeCold ? 'smile' : 'times'}
                     color={editRecipeCold ? 'green' : 'red'}
-                    content={"Cold?"}
-                    onClick={() => act("updateVar", {
-                      type: entry.name,
-                      target: value,
-                    })} />
+                    content={'Cold?'}
+                    onClick={() =>
+                      act('updateVar', {
+                        type: entry.name,
+                        target: value,
+                      })
+                    }
+                  />
                 </LabeledList.Item>
-                {editRecipe.map(entry => (
+                {editRecipe.map((entry) => (
                   <LabeledList.Item label={entry.name} key={entry.name}>
                     <NumberInput
                       width="65px"
@@ -172,10 +196,13 @@ export const ChemRecipeDebug = (props, context) => {
                       value={entry.var}
                       minValue={-9999}
                       maxValue={9999}
-                      onDrag={(e, value) => act("updateVar", {
-                        type: entry.name,
-                        target: value,
-                      })} />
+                      onDrag={(e, value) =>
+                        act('updateVar', {
+                          type: entry.name,
+                          target: value,
+                        })
+                      }
+                    />
                   </LabeledList.Item>
                 ))}
               </>
@@ -184,125 +211,121 @@ export const ChemRecipeDebug = (props, context) => {
               <Button
                 icon={'save'}
                 color="green"
-                content={"export"}
-                onClick={() => act('export')} />
+                content={'export'}
+                onClick={() => act('export')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
         <Section
           title="Reactions"
-          buttons={(
+          buttons={
             <Flex>
               <Flex.Item color="label">
                 <AnimatedNumber
                   value={currentpH}
-                  format={value => 'pH: ' + round(value, 3)} />
+                  format={(value) => 'pH: ' + round(value, 3)}
+                />
               </Flex.Item>
               <Flex.Item>
                 <AnimatedNumber value={currentpH}>
                   {(_, value) => (
                     <RoundGauge
-                      size={1.60}
+                      size={1.6}
                       value={value}
                       minValue={0}
                       maxValue={14}
                       alertAfter={isFlashing}
-                      content={"test"}
-                      format={value => null}
+                      content={'test'}
+                      format={(value) => null}
                       ranges={{
-                        "red": [-0.22, 1.5],
-                        "orange": [1.5, 3],
-                        "yellow": [3, 4.5],
-                        "olive": [4.5, 5],
-                        "good": [5, 6],
-                        "green": [6, 8.5],
-                        "teal": [8.5, 9.5],
-                        "blue": [9.5, 11],
-                        "purple": [11, 12.5],
-                        "violet": [12.5, 14],
-                      }} />
+                        red: [-0.22, 1.5],
+                        orange: [1.5, 3],
+                        yellow: [3, 4.5],
+                        olive: [4.5, 5],
+                        good: [5, 6],
+                        green: [6, 8.5],
+                        teal: [8.5, 9.5],
+                        blue: [9.5, 11],
+                        purple: [11, 12.5],
+                        violet: [12.5, 14],
+                      }}
+                    />
                   )}
                 </AnimatedNumber>
               </Flex.Item>
             </Flex>
-          )}>
-          {activeReactions.length === 0 && (
-            <Box color="label">
-              No active reactions.
-            </Box>
-          ) || (
+          }
+        >
+          {(activeReactions.length === 0 && (
+            <Box color="label">No active reactions.</Box>
+          )) || (
             <Table>
               <Table.Row>
                 <Table.Cell bold color="label">
                   Reaction
                 </Table.Cell>
                 <Table.Cell bold color="label">
-                  {"Reaction quality"}
+                  {'Reaction quality'}
                 </Table.Cell>
                 <Table.Cell bold color="label">
                   Target
                 </Table.Cell>
               </Table.Row>
-              {activeReactions && activeReactions.map(reaction => (
-                <Table.Row key="reactions">
-                  <Table.Cell width={'60px'} color={reaction.danger && "red"}>
-                    {reaction.name}
-                  </Table.Cell>
-                  <Table.Cell width={'100px'} pr={'10px'}>
-                    <AnimatedNumber value={reaction.quality}>
-                      {(_, value) => (
-                        <RoundGauge
-                          size={1.30}
-                          value={value}
-                          minValue={0}
-                          maxValue={1}
-                          alertAfter={reaction.purityAlert}
-                          content={"test"}
-                          format={value => null}
-                          ml={5}
-                          ranges={{
-                            "red": [0, reaction.minPure],
-                            "orange": [reaction.minPure, reaction.inverse],
-                            "yellow": [reaction.inverse, 0.8],
-                            "green": [0.8, 1],
-                          }} />
-                      )}
-                    </AnimatedNumber>
-                  </Table.Cell>
-                  <Table.Cell width={'70px'}>
-                    <ProgressBar
-                      value={reaction.reactedVol}
-                      minValue={0}
-                      maxValue={reaction.targetVol}
-                      textAlign={'center'}
-                      icon={reaction.overheat && "thermometer-full"}
-                      width={7}
-                      color={reaction.overheat ? "red" : "label"}>
-                      {reaction.targetVol}u
-                    </ProgressBar>
-                  </Table.Cell>
-                </Table.Row>
-              ))}
+              {activeReactions &&
+                activeReactions.map((reaction) => (
+                  <Table.Row key="reactions">
+                    <Table.Cell width={'60px'} color={reaction.danger && 'red'}>
+                      {reaction.name}
+                    </Table.Cell>
+                    <Table.Cell width={'100px'} pr={'10px'}>
+                      <AnimatedNumber value={reaction.quality}>
+                        {(_, value) => (
+                          <RoundGauge
+                            size={1.3}
+                            value={value}
+                            minValue={0}
+                            maxValue={1}
+                            alertAfter={reaction.purityAlert}
+                            content={'test'}
+                            format={(value) => null}
+                            ml={5}
+                            ranges={{
+                              red: [0, reaction.minPure],
+                              orange: [reaction.minPure, reaction.inverse],
+                              yellow: [reaction.inverse, 0.8],
+                              green: [0.8, 1],
+                            }}
+                          />
+                        )}
+                      </AnimatedNumber>
+                    </Table.Cell>
+                    <Table.Cell width={'70px'}>
+                      <ProgressBar
+                        value={reaction.reactedVol}
+                        minValue={0}
+                        maxValue={reaction.targetVol}
+                        textAlign={'center'}
+                        icon={reaction.overheat && 'thermometer-full'}
+                        width={7}
+                        color={reaction.overheat ? 'red' : 'label'}
+                      >
+                        {reaction.targetVol}u
+                      </ProgressBar>
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
               <Table.Row />
             </Table>
           )}
         </Section>
         <Section
           title="Chamber"
-          buttons={(
-            <Box>
-              {isActive ? "Reacting" : "Waiting"}
-            </Box>
-          )} >
-          {chamberContents.length &&(
-            <BeakerContents
-              beakerLoaded
-              beakerContents={chamberContents} />
-          ) || (
-            <Box>
-              Nothing
-            </Box>
-          )}
+          buttons={<Box>{isActive ? 'Reacting' : 'Waiting'}</Box>}
+        >
+          {(chamberContents.length && (
+            <BeakerContents beakerLoaded beakerContents={chamberContents} />
+          )) || <Box>Nothing</Box>}
         </Section>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/ChemSplitter.js b/tgui/packages/tgui/interfaces/ChemSplitter.js
index b45d6bbdba29..c4db42c94831 100644
--- a/tgui/packages/tgui/interfaces/ChemSplitter.js
+++ b/tgui/packages/tgui/interfaces/ChemSplitter.js
@@ -5,15 +5,9 @@ import { Window } from '../layouts';
 
 export const ChemSplitter = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    straight,
-    side,
-    max_transfer,
-  } = data;
+  const { straight, side, max_transfer } = data;
   return (
-    <Window
-      width={220}
-      height={105}>
+    <Window width={220} height={105}>
       <Window.Content>
         <Section>
           <LabeledList>
@@ -24,13 +18,16 @@ export const ChemSplitter = (props, context) => {
                 width="55px"
                 minValue={1}
                 maxValue={max_transfer}
-                format={value => toFixed(value, 2)}
+                format={(value) => toFixed(value, 2)}
                 step={0.05}
                 stepPixelSize={4}
-                onChange={(e, value) => act('set_amount', {
-                  target: 'straight',
-                  amount: value,
-                })} />
+                onChange={(e, value) =>
+                  act('set_amount', {
+                    target: 'straight',
+                    amount: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Side">
               <NumberInput
@@ -39,13 +36,16 @@ export const ChemSplitter = (props, context) => {
                 width="55px"
                 minValue={1}
                 maxValue={max_transfer}
-                format={value => toFixed(value, 2)}
+                format={(value) => toFixed(value, 2)}
                 step={0.05}
                 stepPixelSize={4}
-                onChange={(e, value) => act('set_amount', {
-                  target: 'side',
-                  amount: value,
-                })} />
+                onChange={(e, value) =>
+                  act('set_amount', {
+                    target: 'side',
+                    amount: value,
+                  })
+                }
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/ChemSynthesizer.js b/tgui/packages/tgui/interfaces/ChemSynthesizer.js
index 536173f0395c..3681758a3169 100644
--- a/tgui/packages/tgui/interfaces/ChemSynthesizer.js
+++ b/tgui/packages/tgui/interfaces/ChemSynthesizer.js
@@ -12,34 +12,38 @@ export const ChemSynthesizer = (props, context) => {
     possible_amounts = [],
   } = data;
   return (
-    <Window
-      width={300}
-      height={375}>
+    <Window width={300} height={375}>
       <Window.Content>
         <Section>
           <Box>
-            {possible_amounts.map(possible_amount => (
+            {possible_amounts.map((possible_amount) => (
               <Button
                 icon="plus"
                 key={toFixed(possible_amount, 0)}
                 content={toFixed(possible_amount, 0)}
                 selected={possible_amount === amount}
-                onClick={() => act('amount', {
-                  target: possible_amount,
-                })} />
+                onClick={() =>
+                  act('amount', {
+                    target: possible_amount,
+                  })
+                }
+              />
             ))}
           </Box>
           <Box mt={1}>
-            {chemicals.map(chemical => (
+            {chemicals.map((chemical) => (
               <Button
                 key={chemical.id}
                 icon="tint"
                 content={chemical.title}
                 width="129px"
                 selected={chemical.id === current_reagent}
-                onClick={() => act('select', {
-                  reagent: chemical.id,
-                })} />
+                onClick={() =>
+                  act('select', {
+                    reagent: chemical.id,
+                  })
+                }
+              />
             ))}
           </Box>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/CircuitAccessChecker.js b/tgui/packages/tgui/interfaces/CircuitAccessChecker.js
index 820d3a943df0..85af36261eaa 100644
--- a/tgui/packages/tgui/interfaces/CircuitAccessChecker.js
+++ b/tgui/packages/tgui/interfaces/CircuitAccessChecker.js
@@ -1,43 +1,46 @@
-import { useBackend } from "../backend";
-import { Window } from "../layouts";
-import { LabeledList, Button } from "../components";
-import { AccessConfig } from "./common/AccessConfig";
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+import { LabeledList, Button } from '../components';
+import { AccessConfig } from './common/AccessConfig';
 
 export const CircuitAccessChecker = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    oneAccess,
-  } = data;
+  const { oneAccess } = data;
   const regions = data.regions || [];
   const accesses = data.accesses || [];
   return (
-    <Window
-      width={420}
-      height={360}>
+    <Window width={420} height={360}>
       <Window.Content>
         <LabeledList>
-          <LabeledList.Item
-            label="Access Required">
+          <LabeledList.Item label="Access Required">
             <Button
               icon={oneAccess ? 'unlock' : 'lock'}
               content={oneAccess ? 'One' : 'All'}
-              onClick={() => act('one_access')} />
+              onClick={() => act('one_access')}
+            />
           </LabeledList.Item>
         </LabeledList>
         <AccessConfig
           accesses={regions}
           selectedList={accesses}
-          accessMod={ref => act('set', {
-            access: ref,
-          })}
+          accessMod={(ref) =>
+            act('set', {
+              access: ref,
+            })
+          }
           grantAll={() => act('grant_all')}
           denyAll={() => act('clear_all')}
-          grantDep={ref => act('grant_region', {
-            region: ref,
-          })}
-          denyDep={ref => act('deny_region', {
-            region: ref,
-          })} />
+          grantDep={(ref) =>
+            act('grant_region', {
+              region: ref,
+            })
+          }
+          denyDep={(ref) =>
+            act('deny_region', {
+              region: ref,
+            })
+          }
+        />
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/CircuitAdminPanel.tsx b/tgui/packages/tgui/interfaces/CircuitAdminPanel.tsx
index 814a147fc107..f61b1b00ff97 100644
--- a/tgui/packages/tgui/interfaces/CircuitAdminPanel.tsx
+++ b/tgui/packages/tgui/interfaces/CircuitAdminPanel.tsx
@@ -1,7 +1,7 @@
-import { BooleanLike } from "common/react";
-import { useBackend } from "../backend";
-import { Button, Table } from "../components";
-import { Window } from "../layouts";
+import { BooleanLike } from 'common/react';
+import { useBackend } from '../backend';
+import { Button, Table } from '../components';
+import { Window } from '../layouts';
 
 type CircuitAdminPanelData = {
   circuits: {
@@ -9,8 +9,8 @@ type CircuitAdminPanelData = {
     name: string;
     creator: string;
     has_inserter: BooleanLike;
-  }[]
-}
+  }[];
+};
 
 export const CircuitAdminPanel = (props, context) => {
   const { act, data } = useBackend<CircuitAdminPanelData>(context);
@@ -20,57 +20,39 @@ export const CircuitAdminPanel = (props, context) => {
       <Window.Content>
         <Table>
           <Table.Row header>
-            <Table.Cell>
-              Circuit name
-            </Table.Cell>
+            <Table.Cell>Circuit name</Table.Cell>
 
-            <Table.Cell>
-              Creator
-            </Table.Cell>
+            <Table.Cell>Creator</Table.Cell>
 
-            <Table.Cell>
-              Actions
-            </Table.Cell>
+            <Table.Cell>Actions</Table.Cell>
           </Table.Row>
 
-          {data.circuits.map(circuit => {
+          {data.circuits.map((circuit) => {
             const createAct = (action: string) => () => {
               act(action, { circuit: circuit.ref });
             };
 
             return (
               <Table.Row key={circuit.ref}>
-                <Table.Cell>
-                  {circuit.name}
-                </Table.Cell>
+                <Table.Cell>{circuit.name}</Table.Cell>
 
-                <Table.Cell>
-                  {circuit.creator}
-                </Table.Cell>
+                <Table.Cell>{circuit.creator}</Table.Cell>
 
                 <Table.Cell>
-                  <Button onClick={createAct("follow_circuit")}>
-                    Follow
-                  </Button>
+                  <Button onClick={createAct('follow_circuit')}>Follow</Button>
 
-                  <Button onClick={createAct("open_circuit")}>
-                    Open
-                  </Button>
+                  <Button onClick={createAct('open_circuit')}>Open</Button>
 
-                  <Button onClick={createAct("vv_circuit")}>
-                    VV
-                  </Button>
+                  <Button onClick={createAct('vv_circuit')}>VV</Button>
 
-                  <Button onClick={createAct("save_circuit")}>
-                    Save
-                  </Button>
+                  <Button onClick={createAct('save_circuit')}>Save</Button>
 
-                  <Button onClick={createAct("duplicate_circuit")}>
+                  <Button onClick={createAct('duplicate_circuit')}>
                     Duplicate
                   </Button>
 
                   {!!circuit.has_inserter && (
-                    <Button onClick={createAct("open_player_panel")}>
+                    <Button onClick={createAct('open_player_panel')}>
                       Player Panel
                     </Button>
                   )}
diff --git a/tgui/packages/tgui/interfaces/CircuitModule.js b/tgui/packages/tgui/interfaces/CircuitModule.js
index bb0ebb983e4e..500afefdbacc 100644
--- a/tgui/packages/tgui/interfaces/CircuitModule.js
+++ b/tgui/packages/tgui/interfaces/CircuitModule.js
@@ -1,14 +1,10 @@
-import { useBackend } from "../backend";
-import { Stack, Section, Input, Button, Dropdown } from "../components";
-import { Window } from "../layouts";
+import { useBackend } from '../backend';
+import { Stack, Section, Input, Button, Dropdown } from '../components';
+import { Window } from '../layouts';
 
 export const CircuitModule = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    input_ports,
-    output_ports,
-    global_port_types,
-  } = data;
+  const { input_ports, output_ports, global_port_types } = data;
   return (
     <Window width={600} height={300}>
       <Window.Content scrollable>
@@ -18,7 +14,7 @@ export const CircuitModule = (props, context) => {
               content="View Internal Circuit"
               textAlign="center"
               fluid
-              onClick={() => act("open_internal_circuit")}
+              onClick={() => act('open_internal_circuit')}
             />
           </Stack.Item>
           <Stack.Item>
@@ -32,19 +28,25 @@ export const CircuitModule = (props, context) => {
                         name={val.name}
                         datatype={val.type}
                         datatypeOptions={global_port_types}
-                        onRemove={() => act("remove_input_port", {
-                          port_id: index+1,
-                        })}
-                        onSetType={type => act("set_port_type", {
-                          port_id: index+1,
-                          is_input: true,
-                          port_type: type,
-                        })}
-                        onEnter={(e, value) => act("set_port_name", {
-                          port_id: index+1,
-                          is_input: true,
-                          port_name: value,
-                        })}
+                        onRemove={() =>
+                          act('remove_input_port', {
+                            port_id: index + 1,
+                          })
+                        }
+                        onSetType={(type) =>
+                          act('set_port_type', {
+                            port_id: index + 1,
+                            is_input: true,
+                            port_type: type,
+                          })
+                        }
+                        onEnter={(e, value) =>
+                          act('set_port_name', {
+                            port_id: index + 1,
+                            is_input: true,
+                            port_name: value,
+                          })
+                        }
                       />
                     ))}
                     <Stack.Item>
@@ -53,7 +55,7 @@ export const CircuitModule = (props, context) => {
                         content="Add Input Port"
                         color="good"
                         icon="plus"
-                        onClick={() => act("add_input_port")}
+                        onClick={() => act('add_input_port')}
                       />
                     </Stack.Item>
                   </Stack>
@@ -68,19 +70,25 @@ export const CircuitModule = (props, context) => {
                         name={val.name}
                         datatype={val.type}
                         datatypeOptions={global_port_types}
-                        onRemove={() => act("remove_output_port", {
-                          port_id: index+1,
-                        })}
-                        onSetType={type => act("set_port_type", {
-                          port_id: index+1,
-                          is_input: false,
-                          port_type: type,
-                        })}
-                        onEnter={(e, value) => act("set_port_name", {
-                          port_id: index+1,
-                          is_input: false,
-                          port_name: value,
-                        })}
+                        onRemove={() =>
+                          act('remove_output_port', {
+                            port_id: index + 1,
+                          })
+                        }
+                        onSetType={(type) =>
+                          act('set_port_type', {
+                            port_id: index + 1,
+                            is_input: false,
+                            port_type: type,
+                          })
+                        }
+                        onEnter={(e, value) =>
+                          act('set_port_name', {
+                            port_id: index + 1,
+                            is_input: false,
+                            port_name: value,
+                          })
+                        }
                       />
                     ))}
                     <Stack.Item>
@@ -89,7 +97,7 @@ export const CircuitModule = (props, context) => {
                         content="Add Output Port"
                         color="good"
                         icon="plus"
-                        onClick={() => act("add_output_port")}
+                        onClick={() => act('add_output_port')}
                       />
                     </Stack.Item>
                   </Stack>
@@ -118,12 +126,7 @@ const PortEntry = (props, context) => {
     <Stack.Item {...rest}>
       <Stack>
         <Stack.Item grow>
-          <Input
-            placeholder="Name"
-            value={name}
-            onChange={onEnter}
-            fluid
-          />
+          <Input placeholder="Name" value={name} onChange={onEnter} fluid />
         </Stack.Item>
         <Stack.Item>
           <Dropdown
@@ -133,11 +136,7 @@ const PortEntry = (props, context) => {
           />
         </Stack.Item>
         <Stack.Item>
-          <Button
-            icon="times"
-            color="red"
-            onClick={onRemove}
-          />
+          <Button icon="times" color="red" onClick={onRemove} />
         </Stack.Item>
       </Stack>
     </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/CircuitSignalHandler.tsx b/tgui/packages/tgui/interfaces/CircuitSignalHandler.tsx
index 156079424710..33f40f3af5f0 100644
--- a/tgui/packages/tgui/interfaces/CircuitSignalHandler.tsx
+++ b/tgui/packages/tgui/interfaces/CircuitSignalHandler.tsx
@@ -1,41 +1,43 @@
-import { Component } from "inferno";
-import { useBackend } from "../backend";
-import { Box, Stack, Section, Input, Button, Dropdown } from "../components";
-import { Window } from "../layouts";
+import { Component } from 'inferno';
+import { useBackend } from '../backend';
+import { Box, Stack, Section, Input, Button, Dropdown } from '../components';
+import { Window } from '../layouts';
 
 type Response = {
   name: string;
   bitflag: number;
-}
+};
 
 type Parameter = {
   name: string;
   datatype: string;
-}
+};
 
 type CircuitSignalHandlerState = {
   signal_id: string;
   responseList: Response[];
   parameterList: Parameter[];
   global: Boolean;
-}
+};
 
-type CircuitSignalHandlerData ={
+type CircuitSignalHandlerData = {
   global_port_types: string[];
-}
+};
 
 type BitflagToString = {
   [key: number]: string;
-}
+};
 
-export class CircuitSignalHandler
-  extends Component<{}, CircuitSignalHandlerState> {
+export class CircuitSignalHandler extends Component<
+  {},
+  CircuitSignalHandlerState
+> {
   bitflags: BitflagToString;
 
   constructor(props) {
     super(props);
     this.state = {
-      signal_id: "signal_id",
+      signal_id: 'signal_id',
       responseList: [],
       parameterList: [],
       global: false,
@@ -44,17 +46,15 @@ export class CircuitSignalHandler
     this.bitflags = {};
 
     for (let i = 0; i < 24; i++) {
-      this.bitflags[1 << i] = `Flag ${i+1}`;
+      this.bitflags[1 << i] = `Flag ${i + 1}`;
     }
   }
 
   render() {
     const { act, data } = useBackend<CircuitSignalHandlerData>(this.context);
-    const { responseList, parameterList, signal_id, global }
-      = this.state as CircuitSignalHandlerState;
-    const {
-      global_port_types,
-    } = data;
+    const { responseList, parameterList, signal_id, global } = this
+      .state as CircuitSignalHandlerState;
+    const { global_port_types } = data;
     return (
       <Window width={600} height={300}>
         <Window.Content>
@@ -110,10 +110,10 @@ export class CircuitSignalHandler
                             // have a number->key assoc array here, so we have
                             // to explicitly cast it to a number[] type.
                             const bitflag_keys = Object.keys(
-                              this.bitflags
+                              this.bitflags,
                             ) as unknown as number[];
                             responseList.push({
-                              name: "Response",
+                              name: 'Response',
                               bitflag: bitflag_keys[responseList.length],
                             });
                             this.setState({ parameterList });
@@ -136,7 +136,7 @@ export class CircuitSignalHandler
                             parameterList.splice(index, 1);
                             this.setState({ parameterList });
                           }}
-                          onSetOption={type => {
+                          onSetOption={(type) => {
                             const param = parameterList[index];
                             param.datatype = type;
                             this.setState({ parameterList });
@@ -156,7 +156,7 @@ export class CircuitSignalHandler
                           icon="plus"
                           onClick={() => {
                             parameterList.push({
-                              name: "Parameter",
+                              name: 'Parameter',
                               datatype: global_port_types[0],
                             });
                             this.setState({ parameterList });
@@ -173,12 +173,14 @@ export class CircuitSignalHandler
                 content="Submit"
                 textAlign="center"
                 fluid
-                onClick={() => act("add_new_id", {
-                  signal_id: signal_id,
-                  responses: responseList,
-                  parameters: parameterList,
-                  global: global,
-                })}
+                onClick={() =>
+                  act('add_new_id', {
+                    signal_id: signal_id,
+                    responses: responseList,
+                    parameters: parameterList,
+                    global: global,
+                  })
+                }
               />
             </Stack.Item>
           </Stack>
@@ -195,7 +197,7 @@ type EntryProps = {
   name: string;
   current_option: string;
   options?: string[];
-}
+};
 
 const Entry = (props: EntryProps, context) => {
   const {
@@ -212,36 +214,23 @@ const Entry = (props: EntryProps, context) => {
     <Stack.Item {...rest}>
       <Stack>
         <Stack.Item grow>
-          <Input
-            placeholder="Name"
-            value={name}
-            onChange={onEnter}
-            fluid
-          />
+          <Input placeholder="Name" value={name} onChange={onEnter} fluid />
         </Stack.Item>
         <Stack.Item>
-          {options.length && (
+          {(options.length && (
             <Dropdown
               displayText={current_option}
               options={options}
               onSelected={onSetOption}
             />
-          ) || (
-            <Box
-              textAlign="center"
-              py="2px"
-              px={2}
-            >
+          )) || (
+            <Box textAlign="center" py="2px" px={2}>
               {current_option}
             </Box>
           )}
         </Stack.Item>
         <Stack.Item>
-          <Button
-            icon="times"
-            color="red"
-            onClick={onRemove}
-          />
+          <Button icon="times" color="red" onClick={onRemove} />
         </Stack.Item>
       </Stack>
     </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/CivCargoHoldTerminal.js b/tgui/packages/tgui/interfaces/CivCargoHoldTerminal.js
index 09aa093c5a27..006ad07121eb 100644
--- a/tgui/packages/tgui/interfaces/CivCargoHoldTerminal.js
+++ b/tgui/packages/tgui/interfaces/CivCargoHoldTerminal.js
@@ -1,63 +1,64 @@
 import { useBackend } from '../backend';
-import { Box, Button, Flex, LabeledList, NoticeBox, Section } from '../components';
+import {
+  Box,
+  Button,
+  Flex,
+  LabeledList,
+  NoticeBox,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const CivCargoHoldTerminal = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    pad,
-    sending,
-    status_report,
-    id_inserted,
-    id_bounty_info,
-    picking,
-  } = data;
-  const in_text = "Welcome valued employee.";
-  const out_text = "To begin, insert your ID into the console.";
+  const { pad, sending, status_report, id_inserted, id_bounty_info, picking } =
+    data;
+  const in_text = 'Welcome valued employee.';
+  const out_text = 'To begin, insert your ID into the console.';
   return (
-    <Window
-      width={580}
-      height={375}>
+    <Window width={580} height={375}>
       <Window.Content scrollable>
         <Flex>
           <Flex.Item>
-            <NoticeBox
-              color={!id_inserted ? 'default': 'blue'}>
+            <NoticeBox color={!id_inserted ? 'default' : 'blue'}>
               {id_inserted ? in_text : out_text}
             </NoticeBox>
             <Section
               title="Cargo Pad"
-              buttons={(
+              buttons={
                 <>
                   <Button
-                    icon={"sync"}
-                    tooltip={"Check Contents"}
+                    icon={'sync'}
+                    tooltip={'Check Contents'}
                     disabled={!pad || !id_inserted}
-                    onClick={() => act('recalc')} />
+                    onClick={() => act('recalc')}
+                  />
                   <Button
                     icon={sending ? 'times' : 'arrow-up'}
-                    tooltip={sending ? "Stop Sending" : "Send Goods"}
+                    tooltip={sending ? 'Stop Sending' : 'Send Goods'}
                     selected={sending}
                     disabled={!pad || !id_inserted}
-                    onClick={() => act(sending ? 'stop' : 'send')} />
+                    onClick={() => act(sending ? 'stop' : 'send')}
+                  />
                   <Button
                     icon={id_bounty_info ? 'recycle' : 'pen'}
                     color={id_bounty_info ? 'green' : 'default'}
-                    tooltip={id_bounty_info ? "Replace Bounty" : "New Bounty"}
+                    tooltip={id_bounty_info ? 'Replace Bounty' : 'New Bounty'}
                     disabled={!id_inserted}
-                    onClick={() => act('bounty')} />
+                    onClick={() => act('bounty')}
+                  />
                   <Button
                     icon={'download'}
-                    content={"Eject ID"}
+                    content={'Eject ID'}
                     disabled={!id_inserted}
-                    onClick={() => act('eject')} />
+                    onClick={() => act('eject')}
+                  />
                 </>
-              )}>
+              }
+            >
               <LabeledList>
-                <LabeledList.Item
-                  label="Status"
-                  color={pad ? "good" : "bad"}>
-                  {pad ? "Online" : "Not Found"}
+                <LabeledList.Item label="Status" color={pad ? 'good' : 'bad'}>
+                  {pad ? 'Online' : 'Not Found'}
                 </LabeledList.Item>
                 <LabeledList.Item label="Cargo Report">
                   {status_report}
@@ -74,12 +75,8 @@ export const CivCargoHoldTerminal = (props, context) => {
 
 const BountyTextBox = (props, context) => {
   const { data } = useBackend(context);
-  const {
-    id_bounty_info,
-    id_bounty_value,
-    id_bounty_num,
-  } = data;
-  const na_text = "N/A, please add a new bounty.";
+  const { id_bounty_info, id_bounty_value, id_bounty_num } = data;
+  const na_text = 'N/A, please add a new bounty.';
   return (
     <Section title="Bounty Info">
       <LabeledList>
@@ -87,10 +84,10 @@ const BountyTextBox = (props, context) => {
           {id_bounty_info ? id_bounty_info : na_text}
         </LabeledList.Item>
         <LabeledList.Item label="Quantity">
-          {id_bounty_info ? id_bounty_num : "N/A"}
+          {id_bounty_info ? id_bounty_num : 'N/A'}
         </LabeledList.Item>
         <LabeledList.Item label="Value">
-          {id_bounty_info ? id_bounty_value : "N/A"}
+          {id_bounty_info ? id_bounty_value : 'N/A'}
         </LabeledList.Item>
       </LabeledList>
     </Section>
@@ -99,53 +96,38 @@ const BountyTextBox = (props, context) => {
 
 const BountyPickBox = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    id_bounty_names,
-    id_bounty_values,
-  } = data;
+  const { id_bounty_names, id_bounty_values } = data;
   return (
-    <Section
-      title="Please Select a Bounty:"
-      textAlign="center">
+    <Section title="Please Select a Bounty:" textAlign="center">
       <Flex width="100%" wrap>
-        <Flex.Item
-          shrink={0}
-          grow={0.5}>
+        <Flex.Item shrink={0} grow={0.5}>
           <Button
             fluid
             color="green"
             content={id_bounty_names[0]}
-            onClick={() => act('pick', { 'value': 1 })}>
-            <Box fontSize="14px">
-              Payout: {id_bounty_values[0]} cr
-            </Box>
+            onClick={() => act('pick', { value: 1 })}
+          >
+            <Box fontSize="14px">Payout: {id_bounty_values[0]} cr</Box>
           </Button>
         </Flex.Item>
-        <Flex.Item
-          shrink={0}
-          grow={0.5}
-          px={1}>
+        <Flex.Item shrink={0} grow={0.5} px={1}>
           <Button
             fluid
             color="green"
             content={id_bounty_names[1]}
-            onClick={() => act('pick', { 'value': 2 })}>
-            <Box fontSize="14px">
-              Payout: {id_bounty_values[1]} cr
-            </Box>
+            onClick={() => act('pick', { value: 2 })}
+          >
+            <Box fontSize="14px">Payout: {id_bounty_values[1]} cr</Box>
           </Button>
         </Flex.Item>
-        <Flex.Item
-          shrink={0}
-          grow={0.5}>
+        <Flex.Item shrink={0} grow={0.5}>
           <Button
             fluid
             color="green"
             content={id_bounty_names[2]}
-            onClick={() => act('pick', { 'value': 3 })}>
-            <Box fontSize="14px">
-              Payout: {id_bounty_values[2]} cr
-            </Box>
+            onClick={() => act('pick', { value: 3 })}
+          >
+            <Box fontSize="14px">Payout: {id_bounty_values[2]} cr</Box>
           </Button>
         </Flex.Item>
       </Flex>
diff --git a/tgui/packages/tgui/interfaces/Clipboard.js b/tgui/packages/tgui/interfaces/Clipboard.js
index 15c1fdebee0b..c117d403b7c8 100644
--- a/tgui/packages/tgui/interfaces/Clipboard.js
+++ b/tgui/packages/tgui/interfaces/Clipboard.js
@@ -1,4 +1,4 @@
-import { useBackend } from "../backend";
+import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -6,19 +6,13 @@ import {
   LabeledList,
   Flex,
   Section,
-} from "../components";
-import { Window } from "../layouts";
+} from '../components';
+import { Window } from '../layouts';
 
 export const Clipboard = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    pen,
-    integrated_pen,
-    top_paper,
-    top_paper_ref,
-    paper,
-    paper_ref,
-  } = data;
+  const { pen, integrated_pen, top_paper, top_paper_ref, paper, paper_ref } =
+    data;
   return (
     <Window title="Clipboard" width={400} height={500}>
       <Window.Content backgroundColor="#704D25" scrollable>
@@ -28,13 +22,13 @@ export const Clipboard = (props, context) => {
               <LabeledList.Item
                 label="Pen"
                 buttons={
-                  <Button icon="eject" onClick={() => act("remove_pen")} />
+                  <Button icon="eject" onClick={() => act('remove_pen')} />
                 }
               >
                 {pen}
               </LabeledList.Item>
             </LabeledList>
-          ) : (integrated_pen ? (
+          ) : integrated_pen ? (
             <Box color="white" align="center">
               There is a pen integrated into the clipboard&apos;s clip.
             </Box>
@@ -42,30 +36,30 @@ export const Clipboard = (props, context) => {
             <Box color="white" align="center">
               No pen attached!
             </Box>
-          ))}
+          )}
         </Section>
         <Divider />
         {top_paper ? (
           <Flex
             color="black"
             backgroundColor="white"
-            style={{ padding: "2px 2px 0 2px" }}
+            style={{ padding: '2px 2px 0 2px' }}
           >
             <Flex.Item align="center" grow={1}>
               <Box align="center">{top_paper}</Box>
             </Flex.Item>
             <Flex.Item>
               <Button
-                icon={pen ? "pen" : "eye"}
-                onClick={() => act("edit_paper", { ref: top_paper_ref })}
+                icon={pen ? 'pen' : 'eye'}
+                onClick={() => act('edit_paper', { ref: top_paper_ref })}
               />
               <Button
                 icon="tag"
-                onClick={() => act("rename_paper", { ref: top_paper_ref })}
+                onClick={() => act('rename_paper', { ref: top_paper_ref })}
               />
               <Button
                 icon="eject"
-                onClick={() => act("remove_paper", { ref: top_paper_ref })}
+                onClick={() => act('remove_paper', { ref: top_paper_ref })}
               />
             </Flex.Item>
           </Flex>
@@ -82,7 +76,7 @@ export const Clipboard = (props, context) => {
             key={paper_ref[index]}
             color="black"
             backgroundColor="white"
-            style={{ padding: "2px 2px 0 2px" }}
+            style={{ padding: '2px 2px 0 2px' }}
             mb={0.5}
           >
             <Flex.Item>
@@ -90,7 +84,7 @@ export const Clipboard = (props, context) => {
                 icon="chevron-up"
                 color="transparent"
                 iconColor="black"
-                onClick={() => act("move_top_paper", { ref: paper_ref[index] })}
+                onClick={() => act('move_top_paper', { ref: paper_ref[index] })}
               />
             </Flex.Item>
             <Flex.Item align="center" grow={1}>
@@ -98,16 +92,16 @@ export const Clipboard = (props, context) => {
             </Flex.Item>
             <Flex.Item>
               <Button
-                icon={pen ? "pen" : "eye"}
-                onClick={() => act("edit_paper", { ref: paper_ref[index] })}
+                icon={pen ? 'pen' : 'eye'}
+                onClick={() => act('edit_paper', { ref: paper_ref[index] })}
               />
               <Button
                 icon="tag"
-                onClick={() => act("rename_paper", { ref: paper_ref[index] })}
+                onClick={() => act('rename_paper', { ref: paper_ref[index] })}
               />
               <Button
                 icon="eject"
-                onClick={() => act("remove_paper", { ref: paper_ref[index] })}
+                onClick={() => act('remove_paper', { ref: paper_ref[index] })}
               />
             </Flex.Item>
           </Flex>
diff --git a/tgui/packages/tgui/interfaces/CodexGigas.js b/tgui/packages/tgui/interfaces/CodexGigas.js
index 3bdc75d22c55..ac9d87929c7c 100644
--- a/tgui/packages/tgui/interfaces/CodexGigas.js
+++ b/tgui/packages/tgui/interfaces/CodexGigas.js
@@ -3,103 +3,106 @@ import { Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 
 const PREFIXES = [
-  "Dark",
-  "Hellish",
-  "Fallen",
-  "Fiery",
-  "Sinful",
-  "Blood",
-  "Fluffy",
+  'Dark',
+  'Hellish',
+  'Fallen',
+  'Fiery',
+  'Sinful',
+  'Blood',
+  'Fluffy',
 ];
 
 const TITLES = [
-  "Lord",
-  "Prelate",
-  "Count",
-  "Viscount",
-  "Vizier",
-  "Elder",
-  "Adept",
+  'Lord',
+  'Prelate',
+  'Count',
+  'Viscount',
+  'Vizier',
+  'Elder',
+  'Adept',
 ];
 
 const NAMES = [
-  "hal",
-  "ve",
-  "odr",
-  "neit",
-  "ci",
-  "quon",
-  "mya",
-  "folth",
-  "wren",
-  "geyr",
-  "hil",
-  "niet",
-  "twou",
-  "phi",
-  "coa",
+  'hal',
+  've',
+  'odr',
+  'neit',
+  'ci',
+  'quon',
+  'mya',
+  'folth',
+  'wren',
+  'geyr',
+  'hil',
+  'niet',
+  'twou',
+  'phi',
+  'coa',
 ];
 
 const SUFFIXES = [
-  "the Red",
-  "the Soulless",
-  "the Master",
-  "the Lord of all things",
-  "Jr.",
+  'the Red',
+  'the Soulless',
+  'the Master',
+  'the Lord of all things',
+  'Jr.',
 ];
 
 // TODO: refactor the backend of this it's a trainwreck
 export const CodexGigas = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={450}
-      height={450}>
+    <Window width={450} height={450}>
       <Window.Content>
         <Section>
           {data.name}
           <LabeledList>
             <LabeledList.Item label="Prefix">
-              {PREFIXES.map(prefix => (
+              {PREFIXES.map((prefix) => (
                 <Button
                   key={prefix.toLowerCase()}
                   content={prefix}
                   disabled={data.currentSection !== 1}
-                  onClick={() => act(prefix + ' ')} />
+                  onClick={() => act(prefix + ' ')}
+                />
               ))}
             </LabeledList.Item>
             <LabeledList.Item label="Title">
-              {TITLES.map(title => (
+              {TITLES.map((title) => (
                 <Button
                   key={title.toLowerCase()}
                   content={title}
                   disabled={data.currentSection > 2}
-                  onClick={() => act(title + ' ')} />
+                  onClick={() => act(title + ' ')}
+                />
               ))}
             </LabeledList.Item>
             <LabeledList.Item label="Name">
-              {NAMES.map(name => (
+              {NAMES.map((name) => (
                 <Button
                   key={name.toLowerCase()}
                   content={name}
                   disabled={data.currentSection > 4}
-                  onClick={() => act(name)} />
+                  onClick={() => act(name)}
+                />
               ))}
             </LabeledList.Item>
             <LabeledList.Item label="Suffix">
-              {SUFFIXES.map(suffix => (
+              {SUFFIXES.map((suffix) => (
                 <Button
                   key={suffix.toLowerCase()}
                   content={suffix}
                   disabled={data.currentSection !== 4}
-                  onClick={() => act(' ' + suffix)} />
+                  onClick={() => act(' ' + suffix)}
+                />
               ))}
             </LabeledList.Item>
             <LabeledList.Item label="Submit">
               <Button
                 content="Search"
                 disabled={data.currentSection < 4}
-                onClick={() => act('search')} />
+                onClick={() => act('search')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/ColorBlindTester.js b/tgui/packages/tgui/interfaces/ColorBlindTester.js
index 76a1faac965a..519d0a0c4e2b 100644
--- a/tgui/packages/tgui/interfaces/ColorBlindTester.js
+++ b/tgui/packages/tgui/interfaces/ColorBlindTester.js
@@ -6,10 +6,7 @@ export const ColorBlindTester = (props, context) => {
   const { act, data } = useBackend(context);
   const { details } = data;
   return (
-    <Window
-      title="Color Blindness Testing"
-      width={600}
-      height={515}>
+    <Window title="Color Blindness Testing" width={600} height={515}>
       <Window.Content>
         <NoticeBox warning>
           <Box>
@@ -17,10 +14,10 @@ export const ColorBlindTester = (props, context) => {
             matrixes.
           </Box>
           <Box>
-            There is NO GOOD WAY to do proper color blind simulation in
-            BYOND, because we have no way to extract the gamma of a pixel
-            without iterating all pixels on the screen, which we need to do to
-            properly correct for the human eye.
+            There is NO GOOD WAY to do proper color blind simulation in BYOND,
+            because we have no way to extract the gamma of a pixel without
+            iterating all pixels on the screen, which we need to do to properly
+            correct for the human eye.
           </Box>
           <Box>
             Because of this, this simulation is very imperfect. You will notice
@@ -55,14 +52,18 @@ const ColorBlindCategory = (props, context) => {
       <Section
         key={category}
         title={category}
-        buttons={(
+        buttons={
           <Button
             icon="eye"
             content="Select"
-            onClick={() => act("set_matrix", {
-              name: category,
-            })} />
-        )}>
+            onClick={() =>
+              act('set_matrix', {
+                name: category,
+              })
+            }
+          />
+        }
+      >
         {details[category]}
       </Section>
     );
@@ -71,14 +72,15 @@ const ColorBlindCategory = (props, context) => {
     <Section
       key={category}
       title={category}
-      buttons={(
+      buttons={
         <Button
           icon="times"
           content="Clear"
           color="bad"
-          onClick={() => act("clear_matrix")}
+          onClick={() => act('clear_matrix')}
         />
-      )}>
+      }
+    >
       {details[category]}
     </Section>
   );
diff --git a/tgui/packages/tgui/interfaces/ColorMatrixEditor.js b/tgui/packages/tgui/interfaces/ColorMatrixEditor.js
index bcd6c7a27203..0d21ee53e7f6 100644
--- a/tgui/packages/tgui/interfaces/ColorMatrixEditor.js
+++ b/tgui/packages/tgui/interfaces/ColorMatrixEditor.js
@@ -1,6 +1,13 @@
 import { useBackend } from '../backend';
 import { toFixed } from 'common/math';
-import { Box, Stack, Section, ByondUi, NumberInput, Button } from '../components';
+import {
+  Box,
+  Stack,
+  Section,
+  ByondUi,
+  NumberInput,
+  Button,
+} from '../components';
 import { Window } from '../layouts';
 
 export const ColorMatrixEditor = (props, context) => {
@@ -15,10 +22,7 @@ export const ColorMatrixEditor = (props, context) => {
   ] = currentColor;
   const prefixes = ['r', 'g', 'b', 'a', 'c'];
   return (
-    <Window
-      title="Color Matrix Editor"
-      width={600}
-      height={220}>
+    <Window title="Color Matrix Editor" width={600} height={220}>
       <Window.Content>
         <Stack fill>
           <Stack.Item align="center">
@@ -31,25 +35,22 @@ export const ColorMatrixEditor = (props, context) => {
                       <Stack.Item key={key}>
                         <Stack vertical>
                           {[0, 1, 2, 3, 4].map((row, key) => (
-                            <Stack.Item
-                              key={key}>
-                              <Box
-                                inline
-                                textColor="label"
-                                width="2.1rem">
+                            <Stack.Item key={key}>
+                              <Box inline textColor="label" width="2.1rem">
                                 {`${prefixes[row]}${prefixes[col]}:`}
                               </Box>
                               <NumberInput
                                 inline
-                                value={currentColor[row*4+col]}
+                                value={currentColor[row * 4 + col]}
                                 step={0.01}
                                 width="50px"
-                                format={value => toFixed(value, 2)}
+                                format={(value) => toFixed(value, 2)}
                                 onDrag={(e, value) => {
                                   let retColor = currentColor;
-                                  retColor[row*4+col] = value;
-                                  act("transition_color", { color: retColor });
-                                }} />
+                                  retColor[row * 4 + col] = value;
+                                  act('transition_color', { color: retColor });
+                                }}
+                              />
                             </Stack.Item>
                           ))}
                         </Stack>
@@ -63,7 +64,8 @@ export const ColorMatrixEditor = (props, context) => {
                 <Button.Confirm
                   content="Confirm"
                   confirmContent="Confirm?"
-                  onClick={() => act("confirm")} />
+                  onClick={() => act('confirm')}
+                />
               </Stack.Item>
             </Stack>
           </Stack.Item>
@@ -73,7 +75,8 @@ export const ColorMatrixEditor = (props, context) => {
               params={{
                 id: mapRef,
                 type: 'map',
-              }} />
+              }}
+            />
           </Stack.Item>
         </Stack>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/CommandReport.js b/tgui/packages/tgui/interfaces/CommandReport.js
index afcdb746fe58..3a1a6d3c254d 100644
--- a/tgui/packages/tgui/interfaces/CommandReport.js
+++ b/tgui/packages/tgui/interfaces/CommandReport.js
@@ -1,5 +1,12 @@
 import { useBackend } from '../backend';
-import { Button, Dropdown, Input, Section, Stack, TextArea } from '../components';
+import {
+  Button,
+  Dropdown,
+  Input,
+  Section,
+  Stack,
+  TextArea,
+} from '../components';
 import { Window } from '../layouts';
 
 export const CommandReport = (props, context) => {
@@ -18,7 +25,8 @@ export const CommandReport = (props, context) => {
       title="Create Command Report"
       width={325}
       height={525}
-      theme="admin">
+      theme="admin"
+    >
       <Window.Content>
         <Stack vertical>
           <Stack.Item>
@@ -27,18 +35,24 @@ export const CommandReport = (props, context) => {
                 width="100%"
                 selected={command_name}
                 options={command_name_presets}
-                onSelected={value => act('update_command_name', {
-                  updated_name: value,
-                })} />
+                onSelected={(value) =>
+                  act('update_command_name', {
+                    updated_name: value,
+                  })
+                }
+              />
               {!!custom_name && (
                 <Input
                   width="100%"
                   mt={1}
                   value={command_name}
                   placeholder={command_name}
-                  onChange={(e, value) => act("update_command_name", {
-                    updated_name: value,
-                  })} />
+                  onChange={(e, value) =>
+                    act('update_command_name', {
+                      updated_name: value,
+                    })
+                  }
+                />
               )}
             </Section>
           </Stack.Item>
@@ -48,9 +62,12 @@ export const CommandReport = (props, context) => {
                 width="100%"
                 displayText={played_sound}
                 options={announcer_sounds}
-                onSelected={value => act('set_report_sound', {
-                  picked_sound: value,
-                })} />
+                onSelected={(value) =>
+                  act('set_report_sound', {
+                    picked_sound: value,
+                  })
+                }
+              />
             </Section>
           </Stack.Item>
           <Stack.Item>
@@ -59,15 +76,19 @@ export const CommandReport = (props, context) => {
                 height="200px"
                 mb={1}
                 value={command_report_content}
-                onChange={(e, value) => act("update_report_contents", {
-                  updated_contents: value,
-                })} />
+                onChange={(e, value) =>
+                  act('update_report_contents', {
+                    updated_contents: value,
+                  })
+                }
+              />
               <Stack vertical>
                 <Stack.Item>
                   <Button.Checkbox
                     fluid
                     checked={announce_contents}
-                    onClick={() => act("toggle_announce")}>
+                    onClick={() => act('toggle_announce')}
+                  >
                     Announce Contents
                   </Button.Checkbox>
                 </Stack.Item>
@@ -78,7 +99,8 @@ export const CommandReport = (props, context) => {
                     color="good"
                     textAlign="center"
                     content="Submit Report"
-                    onClick={() => act("submit_report")} />
+                    onClick={() => act('submit_report')}
+                  />
                 </Stack.Item>
               </Stack>
             </Section>
diff --git a/tgui/packages/tgui/interfaces/CommunicationsConsole.js b/tgui/packages/tgui/interfaces/CommunicationsConsole.js
index 2a3bc90151ba..fe768c0b368d 100644
--- a/tgui/packages/tgui/interfaces/CommunicationsConsole.js
+++ b/tgui/packages/tgui/interfaces/CommunicationsConsole.js
@@ -1,24 +1,35 @@
-import { sortBy } from "common/collections";
-import { capitalize } from "common/string";
-import { useBackend, useLocalState } from "../backend";
-import { Blink, Box, Button, Dimmer, Flex, Icon, Input, Modal, Section, TextArea } from "../components";
-import { Window } from "../layouts";
-import { sanitizeText } from "../sanitize";
-
-const STATE_BUYING_SHUTTLE = "buying_shuttle";
-const STATE_CHANGING_STATUS = "changing_status";
-const STATE_MAIN = "main";
-const STATE_MESSAGES = "messages";
+import { sortBy } from 'common/collections';
+import { capitalize } from 'common/string';
+import { useBackend, useLocalState } from '../backend';
+import {
+  Blink,
+  Box,
+  Button,
+  Dimmer,
+  Flex,
+  Icon,
+  Input,
+  Modal,
+  Section,
+  TextArea,
+} from '../components';
+import { Window } from '../layouts';
+import { sanitizeText } from '../sanitize';
+
+const STATE_BUYING_SHUTTLE = 'buying_shuttle';
+const STATE_CHANGING_STATUS = 'changing_status';
+const STATE_MAIN = 'main';
+const STATE_MESSAGES = 'messages';
 
 // Used for whether or not you need to swipe to confirm an alert level change
-const SWIPE_NEEDED = "SWIPE_NEEDED";
+const SWIPE_NEEDED = 'SWIPE_NEEDED';
 
-const EMAG_SHUTTLE_NOTICE
-  = "This shuttle is deemed significantly dangerous to the crew, and is only supplied by the Syndicate.";
+const EMAG_SHUTTLE_NOTICE =
+  'This shuttle is deemed significantly dangerous to the crew, and is only supplied by the Syndicate.';
 
 const sortShuttles = sortBy(
-  shuttle => !shuttle.emagOnly,
-  shuttle => shuttle.creditCost
+  (shuttle) => !shuttle.emagOnly,
+  (shuttle) => shuttle.creditCost,
 );
 
 const AlertButton = (props, context) => {
@@ -31,7 +42,7 @@ const AlertButton = (props, context) => {
   return (
     <Button
       icon="exclamation-triangle"
-      color={thisIsCurrent && "good"}
+      color={thisIsCurrent && 'good'}
       content={capitalize(alertLevel)}
       onClick={() => {
         if (thisIsCurrent) {
@@ -41,7 +52,7 @@ const AlertButton = (props, context) => {
         if (canSetAlertLevel === SWIPE_NEEDED) {
           setShowAlertLevelConfirm([alertLevel, alertLevelTick]);
         } else {
-          act("changeSecurityLevel", {
+          act('changeSecurityLevel', {
             newSecurityLevel: alertLevel,
           });
         }
@@ -54,10 +65,10 @@ const MessageModal = (props, context) => {
   const { data } = useBackend(context);
   const { maxMessageLength } = data;
 
-  const [input, setInput] = useLocalState(context, props.label, "");
+  const [input, setInput] = useLocalState(context, props.label, '');
 
-  const longEnough = props.minLength === undefined
-    || input.length >= props.minLength;
+  const longEnough =
+    props.minLength === undefined || input.length >= props.minLength;
 
   return (
     <Modal>
@@ -86,11 +97,11 @@ const MessageModal = (props, context) => {
             content={props.buttonText}
             color="good"
             disabled={!longEnough}
-            tooltip={!longEnough ? "You need a longer reason." : ""}
+            tooltip={!longEnough ? 'You need a longer reason.' : ''}
             tooltipPosition="right"
             onClick={() => {
               if (longEnough) {
-                setInput("");
+                setInput('');
                 props.onSubmit(input);
               }
             }}
@@ -117,22 +128,18 @@ const NoConnectionModal = () => {
     <Dimmer>
       <Flex direction="column" textAlign="center" width="300px">
         <Flex.Item>
-          <Icon
-            color="red"
-            name="wifi"
-            size={10}
-          />
+          <Icon color="red" name="wifi" size={10} />
 
           <Blink>
             <div
               style={{
-                background: "#db2828",
-                bottom: "60%",
-                left: "25%",
-                height: "10px",
-                position: "relative",
-                transform: "rotate(45deg)",
-                width: "150px",
+                background: '#db2828',
+                bottom: '60%',
+                left: '25%',
+                height: '10px',
+                position: 'relative',
+                transform: 'rotate(45deg)',
+                width: '150px',
               }}
             />
           </Blink>
@@ -155,7 +162,7 @@ const PageBuyingShuttle = (props, context) => {
         <Button
           icon="chevron-left"
           content="Back"
-          onClick={() => act("setState", { state: STATE_MAIN })}
+          onClick={() => act('setState', { state: STATE_MAIN })}
         />
       </Section>
 
@@ -163,40 +170,44 @@ const PageBuyingShuttle = (props, context) => {
         Budget: <b>{data.budget.toLocaleString()}</b> credits
       </Section>
 
-      {sortShuttles(data.shuttles).map(shuttle => (
+      {sortShuttles(data.shuttles).map((shuttle) => (
         <Section
-          title={(
+          title={
             <span
               style={{
-                display: "inline-block",
-                width: "70%",
-              }}>
+                display: 'inline-block',
+                width: '70%',
+              }}
+            >
               {shuttle.name}
             </span>
-          )}
+          }
           key={shuttle.ref}
-          buttons={(
+          buttons={
             <Button
               content={`${shuttle.creditCost.toLocaleString()} credits`}
-              color={shuttle.emagOnly ? "red" : "default"}
+              color={shuttle.emagOnly ? 'red' : 'default'}
               disabled={data.budget < shuttle.creditCost}
-              onClick={() => act("purchaseShuttle", {
-                shuttle: shuttle.ref,
-              })}
+              onClick={() =>
+                act('purchaseShuttle', {
+                  shuttle: shuttle.ref,
+                })
+              }
               tooltip={
                 data.budget < shuttle.creditCost
                   ? `You need ${shuttle.creditCost - data.budget} more credits.`
-                  : (shuttle.emagOnly ? EMAG_SHUTTLE_NOTICE : undefined)
+                  : shuttle.emagOnly
+                    ? EMAG_SHUTTLE_NOTICE
+                    : undefined
               }
               tooltipPosition="left"
             />
-          )}>
-          <Box>{shuttle.description}</Box>
-          {
-            shuttle.prerequisites
-              ? <b>Prerequisites: {shuttle.prerequisites}</b>
-              : null
           }
+        >
+          <Box>{shuttle.description}</Box>
+          {shuttle.prerequisites ? (
+            <b>Prerequisites: {shuttle.prerequisites}</b>
+          ) : null}
         </Section>
       ))}
     </Box>
@@ -207,8 +218,8 @@ const PageChangingStatus = (props, context) => {
   const { act, data } = useBackend(context);
   const { maxStatusLineLength } = data;
 
-  const [lineOne, setLineOne] = useLocalState(context, "lineOne", data.lineOne);
-  const [lineTwo, setLineTwo] = useLocalState(context, "lineTwo", data.lineTwo);
+  const [lineOne, setLineOne] = useLocalState(context, 'lineOne', data.lineOne);
+  const [lineTwo, setLineTwo] = useLocalState(context, 'lineTwo', data.lineTwo);
 
   return (
     <Box>
@@ -216,7 +227,7 @@ const PageChangingStatus = (props, context) => {
         <Button
           icon="chevron-left"
           content="Back"
-          onClick={() => act("setState", { state: STATE_MAIN })}
+          onClick={() => act('setState', { state: STATE_MAIN })}
         />
       </Section>
 
@@ -227,7 +238,7 @@ const PageChangingStatus = (props, context) => {
               icon="times"
               content="Clear Alert"
               color="bad"
-              onClick={() => act("setStatusPicture", { picture: "blank" })}
+              onClick={() => act('setStatusPicture', { picture: 'blank' })}
             />
           </Flex.Item>
 
@@ -235,31 +246,31 @@ const PageChangingStatus = (props, context) => {
             <Button
               icon="check-square-o"
               content="Default"
-              onClick={() => act("setStatusPicture", { picture: "default" })}
+              onClick={() => act('setStatusPicture', { picture: 'default' })}
             />
 
             <Button
               icon="bell-o"
               content="Red Alert"
-              onClick={() => act("setStatusPicture", { picture: "redalert" })}
+              onClick={() => act('setStatusPicture', { picture: 'redalert' })}
             />
 
             <Button
               icon="exclamation-triangle"
               content="Lockdown"
-              onClick={() => act("setStatusPicture", { picture: "lockdown" })}
+              onClick={() => act('setStatusPicture', { picture: 'lockdown' })}
             />
 
             <Button
               icon="exclamation-circle"
               content="Biohazard"
-              onClick={() => act("setStatusPicture", { picture: "biohazard" })}
+              onClick={() => act('setStatusPicture', { picture: 'biohazard' })}
             />
 
             <Button
               icon="space-shuttle"
               content="Shuttle ETA"
-              onClick={() => act("setStatusPicture", { picture: "shuttle" })}
+              onClick={() => act('setStatusPicture', { picture: 'shuttle' })}
             />
           </Flex.Item>
         </Flex>
@@ -289,10 +300,12 @@ const PageChangingStatus = (props, context) => {
             <Button
               icon="comment-o"
               content="Message"
-              onClick={() => act("setStatusMessage", {
-                lineOne,
-                lineTwo,
-              })}
+              onClick={() =>
+                act('setStatusMessage', {
+                  lineOne,
+                  lineTwo,
+                })
+              }
             />
           </Flex.Item>
         </Flex>
@@ -329,40 +342,51 @@ const PageMain = (props, context) => {
   } = data;
 
   const [callingShuttle, setCallingShuttle] = useLocalState(
-    context, "calling_shuttle", false);
+    context,
+    'calling_shuttle',
+    false,
+  );
   const [messagingAssociates, setMessagingAssociates] = useLocalState(
-    context, "messaging_associates", false);
+    context,
+    'messaging_associates',
+    false,
+  );
   const [messagingSector, setMessagingSector] = useLocalState(
-    context, "messaing_sector", null);
+    context,
+    'messaing_sector',
+    null,
+  );
   const [requestingNukeCodes, setRequestingNukeCodes] = useLocalState(
-    context, "requesting_nuke_codes", false);
+    context,
+    'requesting_nuke_codes',
+    false,
+  );
 
   const [
     [showAlertLevelConfirm, confirmingAlertLevelTick],
     setShowAlertLevelConfirm,
-  ] = useLocalState(context, "showConfirmPrompt", [null, null]);
+  ] = useLocalState(context, 'showConfirmPrompt', [null, null]);
 
   return (
     <Box>
       {!syndicate && (
         <Section title="Emergency Shuttle">
-          {!!shuttleCalled && (
+          {(!!shuttleCalled && (
             <Button.Confirm
               icon="space-shuttle"
               content="Recall Emergency Shuttle"
               color="bad"
               disabled={!canRecallShuttles || !shuttleRecallable}
-              tooltip={(
-                canRecallShuttles && (
-                  !shuttleRecallable && "It's too late for the emergency shuttle to be recalled."
-                ) || (
-                  "You do not have permission to recall the emergency shuttle."
-                )
-              )}
+              tooltip={
+                (canRecallShuttles &&
+                  !shuttleRecallable &&
+                  "It's too late for the emergency shuttle to be recalled.") ||
+                'You do not have permission to recall the emergency shuttle.'
+              }
               tooltipPosition="bottom-end"
-              onClick={() => act("recallShuttle")}
+              onClick={() => act('recallShuttle')}
             />
-          ) || (
+          )) || (
             <Button
               icon="space-shuttle"
               content="Call Emergency Shuttle"
@@ -376,16 +400,15 @@ const PageMain = (props, context) => {
               onClick={() => setCallingShuttle(true)}
             />
           )}
-          {!!shuttleCalledPreviously && (
-            shuttleLastCalled && (
+          {!!shuttleCalledPreviously &&
+            ((shuttleLastCalled && (
               <Box>
-                Most recent shuttle call/recall traced to:
-                {" "}<b>{shuttleLastCalled}</b>
+                Most recent shuttle call/recall traced to:{' '}
+                <b>{shuttleLastCalled}</b>
               </Box>
-            ) || (
+            )) || (
               <Box>Unable to trace most recent shuttle/recall signal.</Box>
-            )
-          )}
+            ))}
         </Section>
       )}
 
@@ -416,126 +439,140 @@ const PageMain = (props, context) => {
       )}
 
       <Section title="Functions">
-        <Flex
-          direction="column">
-          {!!canMakeAnnouncement && <Button
-            icon="bullhorn"
-            content="Make Priority Announcement"
-            onClick={() => act("makePriorityAnnouncement")}
-          />}
-
-          {!!aprilFools && !!canMakeAnnouncement && <Button
-            icon="bullhorn"
-            content="Call Emergency Meeting"
-            onClick={() => act("emergency_meeting")}
-          />}
-
-          {!!canToggleEmergencyAccess && <Button.Confirm
-            icon="id-card-o"
-            content={`${emergencyAccess ? "Disable" : "Enable"} Emergency Maintenance Access`}
-            color={emergencyAccess ? "bad" : undefined}
-            onClick={() => act("toggleEmergencyAccess")}
-          />}
+        <Flex direction="column">
+          {!!canMakeAnnouncement && (
+            <Button
+              icon="bullhorn"
+              content="Make Priority Announcement"
+              onClick={() => act('makePriorityAnnouncement')}
+            />
+          )}
+
+          {!!aprilFools && !!canMakeAnnouncement && (
+            <Button
+              icon="bullhorn"
+              content="Call Emergency Meeting"
+              onClick={() => act('emergency_meeting')}
+            />
+          )}
+
+          {!!canToggleEmergencyAccess && (
+            <Button.Confirm
+              icon="id-card-o"
+              content={`${emergencyAccess ? 'Disable' : 'Enable'} Emergency Maintenance Access`}
+              color={emergencyAccess ? 'bad' : undefined}
+              onClick={() => act('toggleEmergencyAccess')}
+            />
+          )}
 
           {!syndicate && (
             <Button
               icon="desktop"
               content="Set Status Display"
-              onClick={() => act("setState", { state: STATE_CHANGING_STATUS })}
+              onClick={() => act('setState', { state: STATE_CHANGING_STATUS })}
             />
           )}
 
           <Button
             icon="envelope-o"
             content="Message List"
-            onClick={() => act("setState", { state: STATE_MESSAGES })}
+            onClick={() => act('setState', { state: STATE_MESSAGES })}
           />
 
-          {(canBuyShuttles !== 0) && <Button
-            icon="shopping-cart"
-            content="Purchase Shuttle"
-            disabled={canBuyShuttles !== 1}
-            // canBuyShuttles is a string detailing the fail reason
-            // if one can be given
-            tooltip={canBuyShuttles !== 1 ? canBuyShuttles : undefined}
-            tooltipPosition="right"
-            onClick={() => act("setState", { state: STATE_BUYING_SHUTTLE })}
-          />}
-
-          {!!canMessageAssociates && <Button
-            icon="comment-o"
-            content={`Send message to ${emagged ? "[UNKNOWN]" : "CentCom"}`}
-            disabled={!importantActionReady}
-            onClick={() => setMessagingAssociates(true)}
-          />}
-
-          {!!canRequestNuke && <Button
-            icon="radiation"
-            content="Request Nuclear Authentication Codes"
-            disabled={!importantActionReady}
-            onClick={() => setRequestingNukeCodes(true)}
-          />}
-
-          {(!!emagged && !syndicate) && <Button
-            icon="undo"
-            content="Restore Backup Routing Data"
-            onClick={() => act("restoreBackupRoutingData")}
-          />}
+          {canBuyShuttles !== 0 && (
+            <Button
+              icon="shopping-cart"
+              content="Purchase Shuttle"
+              disabled={canBuyShuttles !== 1}
+              // canBuyShuttles is a string detailing the fail reason
+              // if one can be given
+              tooltip={canBuyShuttles !== 1 ? canBuyShuttles : undefined}
+              tooltipPosition="right"
+              onClick={() => act('setState', { state: STATE_BUYING_SHUTTLE })}
+            />
+          )}
+
+          {!!canMessageAssociates && (
+            <Button
+              icon="comment-o"
+              content={`Send message to ${emagged ? '[UNKNOWN]' : 'CentCom'}`}
+              disabled={!importantActionReady}
+              onClick={() => setMessagingAssociates(true)}
+            />
+          )}
+
+          {!!canRequestNuke && (
+            <Button
+              icon="radiation"
+              content="Request Nuclear Authentication Codes"
+              disabled={!importantActionReady}
+              onClick={() => setRequestingNukeCodes(true)}
+            />
+          )}
+
+          {!!emagged && !syndicate && (
+            <Button
+              icon="undo"
+              content="Restore Backup Routing Data"
+              onClick={() => act('restoreBackupRoutingData')}
+            />
+          )}
         </Flex>
       </Section>
 
-      {!!canMessageAssociates && messagingAssociates && <MessageModal
-        label={`Message to transmit to ${emagged ? "[ABNORMAL ROUTING COORDINATES]" : "CentCom"} via quantum entanglement`}
-        notice="Please be aware that this process is very expensive, and abuse will lead to...termination. Transmission does not guarantee a response."
-        icon="bullhorn"
-        buttonText="Send"
-        onBack={() => setMessagingAssociates(false)}
-        onSubmit={message => {
-          setMessagingAssociates(false);
-          act("messageAssociates", {
-            message,
-          });
-        }}
-      />}
-
-      {!!canRequestNuke && requestingNukeCodes && <MessageModal
-        label="Reason for requesting nuclear self-destruct codes"
-        notice="Misuse of the nuclear request system will not be tolerated under any circumstances. Transmission does not guarantee a response."
-        icon="bomb"
-        buttonText="Request Codes"
-        onBack={() => setRequestingNukeCodes(false)}
-        onSubmit={reason => {
-          setRequestingNukeCodes(false);
-          act("requestNukeCodes", {
-            reason,
-          });
-        }}
-      />}
-
-      {!!callingShuttle && <MessageModal
-        label="Nature of emergency"
-        icon="space-shuttle"
-        buttonText="Call Shuttle"
-        minLength={callShuttleReasonMinLength}
-        onBack={() => setCallingShuttle(false)}
-        onSubmit={reason => {
-          setCallingShuttle(false);
-          act("callShuttle", {
-            reason,
-          });
-        }}
-      />}
-
-      {
-        !!canSetAlertLevel
-        && showAlertLevelConfirm
-        && confirmingAlertLevelTick === alertLevelTick
-        && (
+      {!!canMessageAssociates && messagingAssociates && (
+        <MessageModal
+          label={`Message to transmit to ${emagged ? '[ABNORMAL ROUTING COORDINATES]' : 'CentCom'} via quantum entanglement`}
+          notice="Please be aware that this process is very expensive, and abuse will lead to...termination. Transmission does not guarantee a response."
+          icon="bullhorn"
+          buttonText="Send"
+          onBack={() => setMessagingAssociates(false)}
+          onSubmit={(message) => {
+            setMessagingAssociates(false);
+            act('messageAssociates', {
+              message,
+            });
+          }}
+        />
+      )}
+
+      {!!canRequestNuke && requestingNukeCodes && (
+        <MessageModal
+          label="Reason for requesting nuclear self-destruct codes"
+          notice="Misuse of the nuclear request system will not be tolerated under any circumstances. Transmission does not guarantee a response."
+          icon="bomb"
+          buttonText="Request Codes"
+          onBack={() => setRequestingNukeCodes(false)}
+          onSubmit={(reason) => {
+            setRequestingNukeCodes(false);
+            act('requestNukeCodes', {
+              reason,
+            });
+          }}
+        />
+      )}
+
+      {!!callingShuttle && (
+        <MessageModal
+          label="Nature of emergency"
+          icon="space-shuttle"
+          buttonText="Call Shuttle"
+          minLength={callShuttleReasonMinLength}
+          onBack={() => setCallingShuttle(false)}
+          onSubmit={(reason) => {
+            setCallingShuttle(false);
+            act('callShuttle', {
+              reason,
+            });
+          }}
+        />
+      )}
+
+      {!!canSetAlertLevel &&
+        showAlertLevelConfirm &&
+        confirmingAlertLevelTick === alertLevelTick && (
           <Modal>
-            <Flex
-              direction="column"
-              textAlign="center"
-              width="300px">
+            <Flex direction="column" textAlign="center" width="300px">
               <Flex.Item fontSize="16px" mb={2}>
                 Swipe ID to confirm change
               </Flex.Item>
@@ -546,9 +583,11 @@ const PageMain = (props, context) => {
                   content="Swipe ID"
                   color="good"
                   fontSize="16px"
-                  onClick={() => act("changeSecurityLevel", {
-                    newSecurityLevel: showAlertLevelConfirm,
-                  })}
+                  onClick={() =>
+                    act('changeSecurityLevel', {
+                      newSecurityLevel: showAlertLevelConfirm,
+                    })
+                  }
                 />
 
                 <Button
@@ -561,56 +600,43 @@ const PageMain = (props, context) => {
               </Flex.Item>
             </Flex>
           </Modal>
-        )
-      }
-
-      {
-        !!canSendToSectors
-        && sectors.length > 0
-        && (
-          <Section title="Allied Sectors">
-            <Flex
-              direction="column">
-              {
-                sectors.map(sectorName => (
-                  <Flex.Item key={sectorName}>
-                    <Button
-                      content={
-                        `Send a message to station in ${sectorName} sector`
-                      }
-                      disabled={!importantActionReady}
-                      onClick={() => setMessagingSector(sectorName)}
-                    />
-                  </Flex.Item>
-                ))
-              }
+        )}
 
-              {sectors.length > 2 && (
-                <Flex.Item>
-                  <Button
-                    content="Send a message to all allied stations"
-                    disabled={!importantActionReady}
-                    onClick={() => setMessagingSector("all")}
-                  />
-                </Flex.Item>
-              )}
-            </Flex>
-          </Section>
-        )
-      }
-
-      {
-        !!canSendToSectors
-        && sectors.length > 0
-        && messagingSector
-        && <MessageModal
+      {!!canSendToSectors && sectors.length > 0 && (
+        <Section title="Allied Sectors">
+          <Flex direction="column">
+            {sectors.map((sectorName) => (
+              <Flex.Item key={sectorName}>
+                <Button
+                  content={`Send a message to station in ${sectorName} sector`}
+                  disabled={!importantActionReady}
+                  onClick={() => setMessagingSector(sectorName)}
+                />
+              </Flex.Item>
+            ))}
+
+            {sectors.length > 2 && (
+              <Flex.Item>
+                <Button
+                  content="Send a message to all allied stations"
+                  disabled={!importantActionReady}
+                  onClick={() => setMessagingSector('all')}
+                />
+              </Flex.Item>
+            )}
+          </Flex>
+        </Section>
+      )}
+
+      {!!canSendToSectors && sectors.length > 0 && messagingSector && (
+        <MessageModal
           label="Message to send to allied station"
           notice="Please be aware that this process is very expensive, and abuse will lead to...termination."
           icon="bullhorn"
           buttonText="Send"
           onBack={() => setMessagingSector(null)}
-          onSubmit={message => {
-            act("sendToOtherSector", {
+          onSubmit={(message) => {
+            act('sendToOtherSector', {
               destination: messagingSector,
               message,
             });
@@ -618,7 +644,7 @@ const PageMain = (props, context) => {
             setMessagingSector(null);
           }}
         />
-      }
+      )}
     </Box>
   );
 };
@@ -629,15 +655,15 @@ const PageMessages = (props, context) => {
 
   const children = [];
 
-  children.push((
+  children.push(
     <Section>
       <Button
         icon="chevron-left"
         content="Back"
-        onClick={() => act("setState", { state: STATE_MAIN })}
+        onClick={() => act('setState', { state: STATE_MAIN })}
       />
-    </Section>
-  ));
+    </Section>,
+  );
 
   const messageElements = [];
 
@@ -650,12 +676,17 @@ const PageMessages = (props, context) => {
           {message.possibleAnswers.map((answer, answerIndex) => (
             <Button
               content={answer}
-              color={message.answered === answerIndex + 1 ? "good" : undefined}
+              color={message.answered === answerIndex + 1 ? 'good' : undefined}
               key={answerIndex}
-              onClick={message.answered ? undefined : () => act("answerMessage", {
-                message: parseInt(messageIndex, 10) + 1,
-                answer: answerIndex + 1,
-              })}
+              onClick={
+                message.answered
+                  ? undefined
+                  : () =>
+                      act('answerMessage', {
+                        message: parseInt(messageIndex, 10) + 1,
+                        answer: answerIndex + 1,
+                      })
+              }
             />
           ))}
         </Box>
@@ -666,26 +697,28 @@ const PageMessages = (props, context) => {
       __html: sanitizeText(message.content),
     };
 
-    messageElements.push((
+    messageElements.push(
       <Section
         title={message.title}
         key={messageIndex}
-        buttons={(
+        buttons={
           <Button.Confirm
             icon="trash"
             content="Delete"
             color="red"
-            onClick={() => act("deleteMessage", {
-              message: messageIndex + 1,
-            })}
+            onClick={() =>
+              act('deleteMessage', {
+                message: messageIndex + 1,
+              })
+            }
           />
-        )}>
-        <Box
-          dangerouslySetInnerHTML={textHtml} />
+        }
+      >
+        <Box dangerouslySetInnerHTML={textHtml} />
 
         {answers}
-      </Section>
-    ));
+      </Section>,
+    );
   }
 
   children.push(messageElements.reverse());
@@ -708,20 +741,21 @@ export const CommunicationsConsole = (props, context) => {
   } = data;
 
   return (
-    <Window
-      width={400}
-      height={650}
-      theme={emagged ? "syndicate" : undefined}>
+    <Window width={400} height={650} theme={emagged ? 'syndicate' : undefined}>
       <Window.Content scrollable>
         {!hasConnection && <NoConnectionModal />}
 
         {(canLogOut || !authenticated) && (
           <Section title="Authentication">
             <Button
-              icon={authenticated ? "sign-out-alt" : "sign-in-alt"}
-              content={authenticated ? `Log Out${authorizeName ? ` (${authorizeName})` : ""}` : "Log In"}
-              color={authenticated ? "bad" : "good"}
-              onClick={() => act("toggleAuthentication")}
+              icon={authenticated ? 'sign-out-alt' : 'sign-in-alt'}
+              content={
+                authenticated
+                  ? `Log Out${authorizeName ? ` (${authorizeName})` : ''}`
+                  : 'Log In'
+              }
+              color={authenticated ? 'bad' : 'good'}
+              onClick={() => act('toggleAuthentication')}
             />
           </Section>
         )}
@@ -732,22 +766,24 @@ export const CommunicationsConsole = (props, context) => {
               icon="key"
               content="Request Safe Code"
               color="good"
-              onClick={() => act("requestSafeCodes")} />
-          </Section>
-        )) || (!!safeCodeDeliveryWait && (
-          <Section title="Emergency Safe Code Delivery">
-            {`Drop pod to ${safeCodeDeliveryArea} in \
-            ${Math.round(safeCodeDeliveryWait/10)}s`}
+              onClick={() => act('requestSafeCodes')}
+            />
           </Section>
-        ))}
-
-        {!!authenticated && (
-          page === STATE_BUYING_SHUTTLE && <PageBuyingShuttle />
-          || page === STATE_CHANGING_STATUS && <PageChangingStatus />
-          || page === STATE_MAIN && <PageMain />
-          || page === STATE_MESSAGES && <PageMessages />
-          || <Box>Page not implemented: {page}</Box>
-        )}
+        )) ||
+          (!!safeCodeDeliveryWait && (
+            <Section title="Emergency Safe Code Delivery">
+              {`Drop pod to ${safeCodeDeliveryArea} in \
+            ${Math.round(safeCodeDeliveryWait / 10)}s`}
+            </Section>
+          ))}
+
+        {!!authenticated &&
+          ((page === STATE_BUYING_SHUTTLE && <PageBuyingShuttle />) ||
+            (page === STATE_CHANGING_STATUS && <PageChangingStatus />) ||
+            (page === STATE_MAIN && <PageMain />) ||
+            (page === STATE_MESSAGES && <PageMessages />) || (
+              <Box>Page not implemented: {page}</Box>
+            ))}
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/ComponentPrinter.tsx b/tgui/packages/tgui/interfaces/ComponentPrinter.tsx
index 2ddf3ceed984..66159f402d37 100644
--- a/tgui/packages/tgui/interfaces/ComponentPrinter.tsx
+++ b/tgui/packages/tgui/interfaces/ComponentPrinter.tsx
@@ -1,34 +1,38 @@
 import { createSearch } from 'common/string';
 import { useBackend, useLocalState } from '../backend';
-import { Material, MaterialAmount, MaterialFormatting, Materials, MATERIAL_KEYS } from './common/Materials';
+import {
+  Material,
+  MaterialAmount,
+  MaterialFormatting,
+  Materials,
+  MATERIAL_KEYS,
+} from './common/Materials';
 import { Window } from '../layouts';
 import { Box, Button, Input, Section, Stack, Tabs } from '../components';
 
-const CATEGORY_ALL = "All";
+const CATEGORY_ALL = 'All';
 
-const searchFor = searchText => createSearch(
-  searchText,
-  ([_, thing]) => thing.name + thing.description,
-);
+const searchFor = (searchText) =>
+  createSearch(searchText, ([_, thing]) => thing.name + thing.description);
 
 const getCategory = (category: string[]) => {
-  return category[0] === "Wiremod" ? category[1] : category[0];
+  return category[0] === 'Wiremod' ? category[1] : category[0];
 };
 
 type Design = {
-  name: string,
-  description: string,
-  materials: Record<keyof typeof MATERIAL_KEYS, number>,
-  categories: string[],
-}
+  name: string;
+  description: string;
+  materials: Record<keyof typeof MATERIAL_KEYS, number>;
+  categories: string[];
+};
 
 type ComponentPrinterData = {
-  designs: Record<string, Design>,
-  materials: Material[],
+  designs: Record<string, Design>;
+  materials: Material[];
 };
 
 const canProduce = (
-  designMaterials: Design["materials"],
+  designMaterials: Design['materials'],
   storedMaterials: Material[],
 ) => {
   for (const material of storedMaterials) {
@@ -42,26 +46,23 @@ const canProduce = (
   return true;
 };
 
-const MaterialCost = (props: {
-  materials: Design["materials"],
-}) => {
+const MaterialCost = (props: { materials: Design['materials'] }) => {
   return (
     <Stack>
-      {Object.entries(props.materials)
-        .map(([material, amount]) => {
-          return (
-            <Stack.Item key={material} mr={1}>
-              <MaterialAmount
-                name={material as keyof typeof MATERIAL_KEYS}
-                amount={amount}
-                formatting={MaterialFormatting.Locale}
-                style={{
-                  transform: 'scale(0.75) translate(0%, 10%)',
-                }}
-              />
-            </Stack.Item>
-          );
-        })}
+      {Object.entries(props.materials).map(([material, amount]) => {
+        return (
+          <Stack.Item key={material} mr={1}>
+            <MaterialAmount
+              name={material as keyof typeof MATERIAL_KEYS}
+              amount={amount}
+              formatting={MaterialFormatting.Locale}
+              style={{
+                transform: 'scale(0.75) translate(0%, 10%)',
+              }}
+            />
+          </Stack.Item>
+        );
+      })}
     </Stack>
   );
 };
@@ -69,8 +70,12 @@ const MaterialCost = (props: {
 export const ComponentPrinter = (props, context) => {
   const { act, data } = useBackend<ComponentPrinterData>(context);
 
-  const [currentCategory, setCurrentCategory] = useLocalState(context, "category", CATEGORY_ALL);
-  const [searchText, setSearchText] = useLocalState(context, "searchText", "");
+  const [currentCategory, setCurrentCategory] = useLocalState(
+    context,
+    'category',
+    CATEGORY_ALL,
+  );
+  const [searchText, setSearchText] = useLocalState(context, 'searchText', '');
 
   return (
     <Window title="Component Printer" width={900} height={700}>
@@ -81,7 +86,7 @@ export const ComponentPrinter = (props, context) => {
               <Materials
                 materials={data.materials || []}
                 onEject={(ref, amount) => {
-                  act("remove_mat", {
+                  act('remove_mat', {
                     ref: ref,
                     amount: amount,
                   });
@@ -95,16 +100,22 @@ export const ComponentPrinter = (props, context) => {
                 <Section title="Categories" fill>
                   <Tabs vertical fill>
                     {Object.values(data.designs)
-                      .reduce<string[]>((categories, design) => {
-                        const category = getCategory(design.categories);
-                        if (categories.indexOf(category) === -1) {
-                          return [category, ...categories];
-                        } else {
-                          return categories;
-                        }
-                      }, [CATEGORY_ALL]).sort().map(category => {
+                      .reduce<string[]>(
+                        (categories, design) => {
+                          const category = getCategory(design.categories);
+                          if (categories.indexOf(category) === -1) {
+                            return [category, ...categories];
+                          } else {
+                            return categories;
+                          }
+                        },
+                        [CATEGORY_ALL],
+                      )
+                      .sort()
+                      .map((category) => {
                         return (
-                          <Tabs.Tab key={category}
+                          <Tabs.Tab
+                            key={category}
                             onClick={() => setCurrentCategory(category)}
                             selected={category === currentCategory}
                             fluid
@@ -126,31 +137,41 @@ export const ComponentPrinter = (props, context) => {
                         autoFocus
                         fluid
                         value={searchText}
-                        onInput={(_, value) => setSearchText(value)} />
+                        onInput={(_, value) => setSearchText(value)}
+                      />
                     </Stack.Item>
 
                     {Object.entries(data.designs)
-                      .filter(([_, design]) => currentCategory === CATEGORY_ALL
-                        || design.categories.indexOf(currentCategory) !== -1)
+                      .filter(
+                        ([_, design]) =>
+                          currentCategory === CATEGORY_ALL ||
+                          design.categories.indexOf(currentCategory) !== -1,
+                      )
                       .filter(searchFor(searchText))
                       .map(([designId, design]) => {
                         return (
                           <Stack.Item key={designId}>
-                            <Section title={design.name} buttons={(
-                              <Button
-                                onClick={() => {
-                                  act("print", {
-                                    designId,
-                                  });
-                                }}
-                                disabled={
-                                  !canProduce(design.materials, data.materials)
-                                }
-                                px={1.5}
-                              >
-                                Print
-                              </Button>
-                            )}>
+                            <Section
+                              title={design.name}
+                              buttons={
+                                <Button
+                                  onClick={() => {
+                                    act('print', {
+                                      designId,
+                                    });
+                                  }}
+                                  disabled={
+                                    !canProduce(
+                                      design.materials,
+                                      data.materials,
+                                    )
+                                  }
+                                  px={1.5}
+                                >
+                                  Print
+                                </Button>
+                              }
+                            >
                               <Box inline width="100%">
                                 {design.description}
                               </Box>
diff --git a/tgui/packages/tgui/interfaces/ComputerFabricator.js b/tgui/packages/tgui/interfaces/ComputerFabricator.js
index bb5f5b8341fc..d48517dbf10d 100644
--- a/tgui/packages/tgui/interfaces/ComputerFabricator.js
+++ b/tgui/packages/tgui/interfaces/ComputerFabricator.js
@@ -6,10 +6,7 @@ import { Window } from '../layouts';
 export const ComputerFabricator = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      title="Personal Computer Vendor"
-      width={500}
-      height={400}>
+    <Window title="Personal Computer Vendor" width={500} height={400}>
       <Window.Content>
         <Section italic fontSize="20px">
           Your perfect device, only three steps away...
@@ -20,20 +17,13 @@ export const ComputerFabricator = (props, context) => {
             mb={1}
             icon="circle"
             content="Clear Order"
-            onClick={() => act('clean_order')} />
-        )}
-        {data.state === 0 && (
-          <CfStep1 />
-        )}
-        {data.state === 1 && (
-          <CfStep2 />
-        )}
-        {data.state === 2 && (
-          <CfStep3 />
-        )}
-        {data.state === 3 && (
-          <CfStep4 />
+            onClick={() => act('clean_order')}
+          />
         )}
+        {data.state === 0 && <CfStep1 />}
+        {data.state === 1 && <CfStep2 />}
+        {data.state === 2 && <CfStep3 />}
+        {data.state === 3 && <CfStep4 />}
       </Window.Content>
     </Window>
   );
@@ -44,14 +34,8 @@ export const ComputerFabricator = (props, context) => {
 const CfStep1 = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Section
-      title="Step 1"
-      minHeight="306px">
-      <Box
-        mt={5}
-        bold
-        textAlign="center"
-        fontSize="40px">
+    <Section title="Step 1" minHeight="306px">
+      <Box mt={5} bold textAlign="center" fontSize="40px">
         Choose your Device
       </Box>
       <Box mt={3}>
@@ -64,9 +48,12 @@ const CfStep1 = (props, context) => {
               textAlign="center"
               fontSize="30px"
               lineHeight={2}
-              onClick={() => act('pick_device', {
-                pick: '1',
-              })} />
+              onClick={() =>
+                act('pick_device', {
+                  pick: '1',
+                })
+              }
+            />
           </Grid.Column>
           <Grid.Column>
             <Button
@@ -76,9 +63,12 @@ const CfStep1 = (props, context) => {
               textAlign="center"
               fontSize="30px"
               lineHeight={2}
-              onClick={() => act('pick_device', {
-                pick: '2',
-              })} />
+              onClick={() =>
+                act('pick_device', {
+                  pick: '2',
+                })
+              }
+            />
           </Grid.Column>
         </Grid>
       </Box>
@@ -92,22 +82,22 @@ const CfStep2 = (props, context) => {
     <Section
       title="Step 2: Customize your device"
       minHeight="282px"
-      buttons={(
+      buttons={
         <Box bold color="good">
           {data.totalprice} cr
         </Box>
-      )}>
+      }
+    >
       <Table>
         <Table.Row>
-          <Table.Cell
-            bold
-            position="relative">
+          <Table.Cell bold position="relative">
             <Tooltip
               content={multiline`
                 Allows your device to operate without external utility power
                 source. Advanced batteries increase battery life.
               `}
-              position="right">
+              position="right"
+            >
               Battery:
             </Tooltip>
           </Table.Cell>
@@ -115,37 +105,45 @@ const CfStep2 = (props, context) => {
             <Button
               content="Standard"
               selected={data.hw_battery === 1}
-              onClick={() => act('hw_battery', {
-                battery: '1',
-              })} />
+              onClick={() =>
+                act('hw_battery', {
+                  battery: '1',
+                })
+              }
+            />
           </Table.Cell>
           <Table.Cell>
             <Button
               content="Upgraded"
               selected={data.hw_battery === 2}
-              onClick={() => act('hw_battery', {
-                battery: '2',
-              })} />
+              onClick={() =>
+                act('hw_battery', {
+                  battery: '2',
+                })
+              }
+            />
           </Table.Cell>
           <Table.Cell>
             <Button
               content="Advanced"
               selected={data.hw_battery === 3}
-              onClick={() => act('hw_battery', {
-                battery: '3',
-              })} />
+              onClick={() =>
+                act('hw_battery', {
+                  battery: '3',
+                })
+              }
+            />
           </Table.Cell>
         </Table.Row>
         <Table.Row>
-          <Table.Cell
-            bold
-            position="relative">
+          <Table.Cell bold position="relative">
             <Tooltip
               content={multiline`
                 Stores file on your device. Advanced drives can store more
                 files, but use more power, shortening battery life.
               `}
-              position="right">
+              position="right"
+            >
               Hard Drive:
             </Tooltip>
           </Table.Cell>
@@ -153,25 +151,34 @@ const CfStep2 = (props, context) => {
             <Button
               content="Standard"
               selected={data.hw_disk === 1}
-              onClick={() => act('hw_disk', {
-                disk: '1',
-              })} />
+              onClick={() =>
+                act('hw_disk', {
+                  disk: '1',
+                })
+              }
+            />
           </Table.Cell>
           <Table.Cell>
             <Button
               content="Upgraded"
               selected={data.hw_disk === 2}
-              onClick={() => act('hw_disk', {
-                disk: '2',
-              })} />
+              onClick={() =>
+                act('hw_disk', {
+                  disk: '2',
+                })
+              }
+            />
           </Table.Cell>
           <Table.Cell>
             <Button
               content="Advanced"
               selected={data.hw_disk === 3}
-              onClick={() => act('hw_disk', {
-                disk: '3',
-              })} />
+              onClick={() =>
+                act('hw_disk', {
+                  disk: '3',
+                })
+              }
+            />
           </Table.Cell>
         </Table.Row>
         <Table.Row>
@@ -183,7 +190,8 @@ const CfStep2 = (props, context) => {
                 advanced cards can operate anywhere near the station, which
                 includes asteroid outposts
               `}
-              position="right">
+              position="right"
+            >
               Network Card:
             </Tooltip>
           </Table.Cell>
@@ -191,25 +199,34 @@ const CfStep2 = (props, context) => {
             <Button
               content="None"
               selected={data.hw_netcard === 0}
-              onClick={() => act('hw_netcard', {
-                netcard: '0',
-              })} />
+              onClick={() =>
+                act('hw_netcard', {
+                  netcard: '0',
+                })
+              }
+            />
           </Table.Cell>
           <Table.Cell>
             <Button
               content="Standard"
               selected={data.hw_netcard === 1}
-              onClick={() => act('hw_netcard', {
-                netcard: '1',
-              })} />
+              onClick={() =>
+                act('hw_netcard', {
+                  netcard: '1',
+                })
+              }
+            />
           </Table.Cell>
           <Table.Cell>
             <Button
               content="Advanced"
               selected={data.hw_netcard === 2}
-              onClick={() => act('hw_netcard', {
-                netcard: '2',
-              })} />
+              onClick={() =>
+                act('hw_netcard', {
+                  netcard: '2',
+                })
+              }
+            />
           </Table.Cell>
         </Table.Row>
         <Table.Row>
@@ -221,7 +238,8 @@ const CfStep2 = (props, context) => {
                 This device was certified EcoFriendlyPlus and is capable of
                 recycling existing paper for printing purposes.
               `}
-              position="right">
+              position="right"
+            >
               Nano Printer:
             </Tooltip>
           </Table.Cell>
@@ -229,17 +247,23 @@ const CfStep2 = (props, context) => {
             <Button
               content="None"
               selected={data.hw_nanoprint === 0}
-              onClick={() => act('hw_nanoprint', {
-                print: '0',
-              })} />
+              onClick={() =>
+                act('hw_nanoprint', {
+                  print: '0',
+                })
+              }
+            />
           </Table.Cell>
           <Table.Cell>
             <Button
               content="Standard"
               selected={data.hw_nanoprint === 1}
-              onClick={() => act('hw_nanoprint', {
-                print: '1',
-              })} />
+              onClick={() =>
+                act('hw_nanoprint', {
+                  print: '1',
+                })
+              }
+            />
           </Table.Cell>
         </Table.Row>
         <Table.Row>
@@ -252,7 +276,8 @@ const CfStep2 = (props, context) => {
                 allow the device to read your identification, but one
                 is included in the base price.
               `}
-              position="right">
+              position="right"
+            >
               Secondary Card Reader:
             </Tooltip>
           </Table.Cell>
@@ -260,17 +285,23 @@ const CfStep2 = (props, context) => {
             <Button
               content="None"
               selected={data.hw_card === 0}
-              onClick={() => act('hw_card', {
-                card: '0',
-              })} />
+              onClick={() =>
+                act('hw_card', {
+                  card: '0',
+                })
+              }
+            />
           </Table.Cell>
           <Table.Cell>
             <Button
               content="Standard"
               selected={data.hw_card === 1}
-              onClick={() => act('hw_card', {
-                card: '1',
-              })} />
+              onClick={() =>
+                act('hw_card', {
+                  card: '1',
+                })
+              }
+            />
           </Table.Cell>
         </Table.Row>
         {data.devtype !== 2 && (
@@ -283,7 +314,8 @@ const CfStep2 = (props, context) => {
                   alternative power source. This component is currently
                   unavailable on tablet computers due to size restrictions.
                 `}
-                position="right">
+                position="right"
+              >
                 Tesla Relay:
               </Tooltip>
             </Table.Cell>
@@ -291,17 +323,23 @@ const CfStep2 = (props, context) => {
               <Button
                 content="None"
                 selected={data.hw_tesla === 0}
-                onClick={() => act('hw_tesla', {
-                  tesla: '0',
-                })} />
+                onClick={() =>
+                  act('hw_tesla', {
+                    tesla: '0',
+                  })
+                }
+              />
             </Table.Cell>
             <Table.Cell>
               <Button
                 content="Standard"
                 selected={data.hw_tesla === 1}
-                onClick={() => act('hw_tesla', {
-                  tesla: '1',
-                })} />
+                onClick={() =>
+                  act('hw_tesla', {
+                    tesla: '1',
+                  })
+                }
+              />
             </Table.Cell>
           </Table.Row>
         )}
@@ -314,7 +352,8 @@ const CfStep2 = (props, context) => {
         textAlign="center"
         fontSize="18px"
         lineHeight={2}
-        onClick={() => act('confirm_order')} />
+        onClick={() => act('confirm_order')}
+      />
     </Section>
   );
 };
@@ -322,33 +361,17 @@ const CfStep2 = (props, context) => {
 const CfStep3 = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Section
-      title="Step 3: Payment"
-      minHeight="282px">
-      <Box
-        italic
-        textAlign="center"
-        fontSize="20px">
+    <Section title="Step 3: Payment" minHeight="282px">
+      <Box italic textAlign="center" fontSize="20px">
         Your device is ready for fabrication...
       </Box>
-      <Box
-        bold
-        mt={2}
-        textAlign="center"
-        fontSize="16px">
-        <Box inline>
-          Please insert the required
-        </Box>
-        {' '}
+      <Box bold mt={2} textAlign="center" fontSize="16px">
+        <Box inline>Please insert the required</Box>{' '}
         <Box inline color="good">
           {data.totalprice} cr
         </Box>
       </Box>
-      <Box
-        bold
-        mt={1}
-        textAlign="center"
-        fontSize="18px">
+      <Box bold mt={1} textAlign="center" fontSize="18px">
         Current:
       </Box>
       <Box
@@ -356,7 +379,8 @@ const CfStep3 = (props, context) => {
         mt={0.5}
         textAlign="center"
         fontSize="18px"
-        color={data.credits >= data.totalprice ? "good" : "bad"}>
+        color={data.credits >= data.totalprice ? 'good' : 'bad'}
+      >
         {data.credits} cr
       </Box>
       <Button
@@ -368,28 +392,21 @@ const CfStep3 = (props, context) => {
         textAlign="center"
         fontSize="20px"
         lineHeight={2}
-        onClick={() => act('purchase')} />
+        onClick={() => act('purchase')}
+      />
     </Section>
   );
 };
 
 const CfStep4 = (props, context) => {
   return (
-    <Section
-      minHeight="282px">
-      <Box
-        bold
-        textAlign="center"
-        fontSize="28px"
-        mt={10}>
+    <Section minHeight="282px">
+      <Box bold textAlign="center" fontSize="28px" mt={10}>
         Thank you for your purchase!
       </Box>
-      <Box
-        italic
-        mt={1}
-        textAlign="center">
-        If you experience any difficulties with your new device, please
-        contact your local network administrator.
+      <Box italic mt={1} textAlign="center">
+        If you experience any difficulties with your new device, please contact
+        your local network administrator.
       </Box>
     </Section>
   );
diff --git a/tgui/packages/tgui/interfaces/Crayon.js b/tgui/packages/tgui/interfaces/Crayon.js
index 365b5c6183af..8f85e8a3e318 100644
--- a/tgui/packages/tgui/interfaces/Crayon.js
+++ b/tgui/packages/tgui/interfaces/Crayon.js
@@ -7,9 +7,7 @@ export const Crayon = (props, context) => {
   const capOrChanges = data.has_cap || data.can_change_colour;
   const drawables = data.drawables || [];
   return (
-    <Window
-      width={600}
-      height={600}>
+    <Window width={600} height={600}>
       <Window.Content scrollable>
         {!!capOrChanges && (
           <Section title="Basic">
@@ -19,30 +17,33 @@ export const Crayon = (props, context) => {
                   icon={data.is_capped ? 'power-off' : 'times'}
                   content={data.is_capped ? 'On' : 'Off'}
                   selected={data.is_capped}
-                  onClick={() => act('toggle_cap')} />
+                  onClick={() => act('toggle_cap')}
+                />
               </LabeledList.Item>
             </LabeledList>
             <Button
               content="Select New Color"
-              onClick={() => act('select_colour')} />
+              onClick={() => act('select_colour')}
+            />
           </Section>
         )}
         <Section title="Stencil">
           <LabeledList>
-            {drawables.map(drawable => {
+            {drawables.map((drawable) => {
               const items = drawable.items || [];
               return (
-                <LabeledList.Item
-                  key={drawable.name}
-                  label={drawable.name}>
-                  {items.map(item => (
+                <LabeledList.Item key={drawable.name} label={drawable.name}>
+                  {items.map((item) => (
                     <Button
                       key={item.item}
                       content={item.item}
                       selected={item.item === data.selected_stencil}
-                      onClick={() => act('select_stencil', {
-                        item: item.item,
-                      })} />
+                      onClick={() =>
+                        act('select_stencil', {
+                          item: item.item,
+                        })
+                      }
+                    />
                   ))}
                 </LabeledList.Item>
               );
@@ -55,9 +56,7 @@ export const Crayon = (props, context) => {
               {data.text_buffer}
             </LabeledList.Item>
           </LabeledList>
-          <Button
-            content="New Text"
-            onClick={() => act('enter_text')} />
+          <Button content="New Text" onClick={() => act('enter_text')} />
         </Section>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/CrewConsole.js b/tgui/packages/tgui/interfaces/CrewConsole.js
index b5a74c65bebf..c935e720e466 100644
--- a/tgui/packages/tgui/interfaces/CrewConsole.js
+++ b/tgui/packages/tgui/interfaces/CrewConsole.js
@@ -4,15 +4,11 @@ import { Button, Section, Table, Icon } from '../components';
 import { COLORS } from '../constants';
 import { Window } from '../layouts';
 
-const HEALTH_ICON_BY_LEVEL = [
-  'heart',
-  'heartbeat',
-  'skull',
-];
+const HEALTH_ICON_BY_LEVEL = ['heart', 'heartbeat', 'skull'];
 
-const jobIsHead = jobId => jobId % 10 === 0;
+const jobIsHead = (jobId) => jobId % 10 === 0;
 
-const jobToColor = jobId => {
+const jobToColor = (jobId) => {
   if (jobId === 0) {
     return COLORS.department.captain;
   }
@@ -37,7 +33,7 @@ const jobToColor = jobId => {
   return COLORS.department.other;
 };
 
-const statusToImage = life_status => {
+const statusToImage = (life_status) => {
   switch (life_status) {
     case 0:
       return <Icon name="heart" color="#17d568" size={1} />;
@@ -50,25 +46,22 @@ const statusToImage = life_status => {
   }
 };
 
-const statusToText = life_status => {
+const statusToText = (life_status) => {
   switch (life_status) {
     case 0:
-      return "Alive";
+      return 'Alive';
     case 1:
     case 2:
     case 3:
-      return "Critical Condition";
+      return 'Critical Condition';
     case 4:
-      return "Dead";
+      return 'Dead';
   }
 };
 
 export const CrewConsole = () => {
   return (
-    <Window
-      title="Crew Monitor"
-      width={600}
-      height={600}>
+    <Window title="Crew Monitor" width={600} height={600}>
       <Window.Content scrollable>
         <Section minHeight="540px">
           <CrewTable />
@@ -80,9 +73,7 @@ export const CrewConsole = () => {
 
 const CrewTable = (props, context) => {
   const { act, data } = useBackend(context);
-  const sensors = sortBy(
-    s => s.ijob
-  )(data.sensors ?? []);
+  const sensors = sortBy((s) => s.ijob)(data.sensors ?? []);
   return (
     <Table>
       <Table.Row>
@@ -102,7 +93,7 @@ const CrewTable = (props, context) => {
           </Table.Cell>
         )}
       </Table.Row>
-      {sensors.map(sensor => (
+      {sensors.map((sensor) => (
         <CrewTableEntry sensor_data={sensor} key={sensor.ref} />
       ))}
     </Table>
@@ -113,43 +104,38 @@ const CrewTableEntry = (props, context) => {
   const { act, data } = useBackend(context);
   const { link_allowed } = data;
   const { sensor_data } = props;
-  const {
-    name,
-    assignment,
-    ijob,
-    life_status,
-    area,
-    can_track,
-  } = sensor_data;
+  const { name, assignment, ijob, life_status, area, can_track } = sensor_data;
 
   return (
     <Table.Row>
-      <Table.Cell width="50%"
-        bold={jobIsHead(ijob)}
-        color={jobToColor(ijob)}>
-        {name}{assignment !== undefined ? ` (${assignment})` : ""}
+      <Table.Cell width="50%" bold={jobIsHead(ijob)} color={jobToColor(ijob)}>
+        {name}
+        {assignment !== undefined ? ` (${assignment})` : ''}
       </Table.Cell>
       <Table.Cell width="5%" collapsing textAlign="center">
-        {
-          statusToImage(life_status)
-        }
+        {statusToImage(life_status)}
       </Table.Cell>
       <Table.Cell width="15%" collapsing textAlign="center">
-        {
-          statusToText(life_status)
-        }
+        {statusToText(life_status)}
       </Table.Cell>
       <Table.Cell width="15%" collapsing textAlign="center">
-        {area !== undefined ? area : <Icon name="question" color="#ffffff" size={1} />}
+        {area !== undefined ? (
+          area
+        ) : (
+          <Icon name="question" color="#ffffff" size={1} />
+        )}
       </Table.Cell>
       {!!link_allowed && (
         <Table.Cell collapsing textAlign="center">
           <Button
             content="Track"
             disabled={!can_track}
-            onClick={() => act('select_person', {
-              name: name,
-            })} />
+            onClick={() =>
+              act('select_person', {
+                name: name,
+              })
+            }
+          />
         </Table.Cell>
       )}
     </Table.Row>
diff --git a/tgui/packages/tgui/interfaces/CrewManifest.js b/tgui/packages/tgui/interfaces/CrewManifest.js
index 75248504d2c3..92ab6a49a698 100644
--- a/tgui/packages/tgui/interfaces/CrewManifest.js
+++ b/tgui/packages/tgui/interfaces/CrewManifest.js
@@ -1,78 +1,73 @@
 import { classes } from 'common/react';
-import { useBackend } from "../backend";
-import { Icon, Section, Table, Tooltip } from "../components";
-import { Window } from "../layouts";
+import { useBackend } from '../backend';
+import { Icon, Section, Table, Tooltip } from '../components';
+import { Window } from '../layouts';
 
 const commandJobs = [
-  "Head of Personnel",
-  "Head of Security",
-  "Chief Engineer",
-  "Research Director",
-  "Medical Director",
+  'Head of Personnel',
+  'Head of Security',
+  'Chief Engineer',
+  'Research Director',
+  'Medical Director',
 ];
 
 // PARIAH EDIT
 // Any instance of crewMember.trim was originally crewMember.rank
 export const CrewManifest = (props, context) => {
-  const { data: { manifest, positions } } = useBackend(context);
+  const {
+    data: { manifest, positions },
+  } = useBackend(context);
 
   return (
     <Window title="Crew Manifest" width={350} height={500}>
       <Window.Content scrollable>
         {Object.entries(manifest).map(([dept, crew]) => (
           <Section
-            className={"CrewManifest--" + dept}
+            className={'CrewManifest--' + dept}
             key={dept}
             title={
-              dept + (dept !== "Misc"
-                ? ` (${positions[dept].open} positions open)` : "")
+              dept +
+              (dept !== 'Misc'
+                ? ` (${positions[dept].open} positions open)`
+                : '')
             }
           >
             <Table>
               {Object.entries(crew).map(([crewIndex, crewMember]) => (
                 <Table.Row key={crewIndex}>
-                  <Table.Cell className={"CrewManifest__Cell"}>
+                  <Table.Cell className={'CrewManifest__Cell'}>
                     {crewMember.name}
                   </Table.Cell>
                   <Table.Cell
                     className={classes([
-                      "CrewManifest__Cell",
-                      "CrewManifest__Icons",
+                      'CrewManifest__Cell',
+                      'CrewManifest__Icons',
                     ])}
                     collapsing
                   >
                     {positions[dept].exceptions.includes(crewMember.trim) && (
-                      <Tooltip
-                        content="No position limit"
-                        position="bottom"
-                      >
+                      <Tooltip content="No position limit" position="bottom">
                         <Icon className="CrewManifest__Icon" name="infinity" />
                       </Tooltip>
                     )}
-                    {crewMember.trim === "Captain" && (
-                      <Tooltip
-                        content="Captain"
-                        position="bottom"
-                      >
+                    {crewMember.trim === 'Captain' && (
+                      <Tooltip content="Captain" position="bottom">
                         <Icon
                           className={classes([
-                            "CrewManifest__Icon",
-                            "CrewManifest__Icon--Command",
+                            'CrewManifest__Icon',
+                            'CrewManifest__Icon--Command',
                           ])}
                           name="star"
                         />
                       </Tooltip>
                     )}
                     {commandJobs.includes(crewMember.trim) && (
-                      <Tooltip
-                        content="Member of command"
-                        position="bottom"
-                      >
+                      <Tooltip content="Member of command" position="bottom">
                         <Icon
                           className={classes([
-                            "CrewManifest__Icon",
-                            "CrewManifest__Icon--Command",
-                            "CrewManifest__Icon--Chevron",
+                            'CrewManifest__Icon',
+                            'CrewManifest__Icon--Command',
+                            'CrewManifest__Icon--Chevron',
                           ])}
                           name="chevron-up"
                         />
@@ -81,8 +76,8 @@ export const CrewManifest = (props, context) => {
                   </Table.Cell>
                   <Table.Cell
                     className={classes([
-                      "CrewManifest__Cell",
-                      "CrewManifest__Cell--Rank",
+                      'CrewManifest__Cell',
+                      'CrewManifest__Cell--Rank',
                     ])}
                     collapsing
                   >
diff --git a/tgui/packages/tgui/interfaces/Cryo.js b/tgui/packages/tgui/interfaces/Cryo.js
index 696ba5516d87..6c9958292484 100644
--- a/tgui/packages/tgui/interfaces/Cryo.js
+++ b/tgui/packages/tgui/interfaces/Cryo.js
@@ -1,32 +1,36 @@
 import { useBackend } from '../backend';
-import { AnimatedNumber, Button, LabeledList, ProgressBar, Section } from '../components';
+import {
+  AnimatedNumber,
+  Button,
+  LabeledList,
+  ProgressBar,
+  Section,
+} from '../components';
 import { BeakerContents } from './common/BeakerContents';
 import { Window } from '../layouts';
 
 const damageTypes = [
   {
-    label: "Brute",
-    type: "bruteLoss",
+    label: 'Brute',
+    type: 'bruteLoss',
   },
   {
-    label: "Respiratory",
-    type: "oxyLoss",
+    label: 'Respiratory',
+    type: 'oxyLoss',
   },
   {
-    label: "Toxin",
-    type: "toxLoss",
+    label: 'Toxin',
+    type: 'toxLoss',
   },
   {
-    label: "Burn",
-    type: "fireLoss",
+    label: 'Burn',
+    type: 'fireLoss',
   },
 ];
 
 export const Cryo = () => {
   return (
-    <Window
-      width={400}
-      height={550}>
+    <Window width={400} height={550}>
       <Window.Content scrollable>
         <CryoContent />
       </Window.Content>
@@ -45,37 +49,31 @@ const CryoContent = (props, context) => {
           </LabeledList.Item>
           {!!data.hasOccupant && (
             <>
-              <LabeledList.Item
-                label="State"
-                color={data.occupant.statstate}>
+              <LabeledList.Item label="State" color={data.occupant.statstate}>
                 {data.occupant.stat}
               </LabeledList.Item>
               <LabeledList.Item
                 label="Temperature"
-                color={data.occupant.temperaturestatus}>
-                <AnimatedNumber
-                  value={data.occupant.bodyTemperature} />
+                color={data.occupant.temperaturestatus}
+              >
+                <AnimatedNumber value={data.occupant.bodyTemperature} />
                 {' K'}
               </LabeledList.Item>
               <LabeledList.Item label="Health">
                 <ProgressBar
                   value={data.occupant.health / data.occupant.maxHealth}
-                  color={data.occupant.health > 0 ? 'good' : 'average'}>
-                  <AnimatedNumber
-                    value={data.occupant.health} />
+                  color={data.occupant.health > 0 ? 'good' : 'average'}
+                >
+                  <AnimatedNumber value={data.occupant.health} />
                 </ProgressBar>
               </LabeledList.Item>
-              {(damageTypes.map(damageType => (
-                <LabeledList.Item
-                  key={damageType.id}
-                  label={damageType.label}>
-                  <ProgressBar
-                    value={data.occupant[damageType.type]/100}>
-                    <AnimatedNumber
-                      value={data.occupant[damageType.type]} />
+              {damageTypes.map((damageType) => (
+                <LabeledList.Item key={damageType.id} label={damageType.label}>
+                  <ProgressBar value={data.occupant[damageType.type] / 100}>
+                    <AnimatedNumber value={data.occupant[damageType.type]} />
                   </ProgressBar>
                 </LabeledList.Item>
-              )))}
+              ))}
             </>
           )}
         </LabeledList>
@@ -84,11 +82,12 @@ const CryoContent = (props, context) => {
         <LabeledList>
           <LabeledList.Item label="Power">
             <Button
-              icon={data.isOperating ? "power-off" : "times"}
+              icon={data.isOperating ? 'power-off' : 'times'}
               disabled={data.isOpen}
               onClick={() => act('power')}
-              color={data.isOperating && 'green'}>
-              {data.isOperating ? "On" : "Off"}
+              color={data.isOperating && 'green'}
+            >
+              {data.isOperating ? 'On' : 'Off'}
             </Button>
           </LabeledList.Item>
           <LabeledList.Item label="Temperature">
@@ -96,24 +95,28 @@ const CryoContent = (props, context) => {
           </LabeledList.Item>
           <LabeledList.Item label="Door">
             <Button
-              icon={data.isOpen ? "unlock" : "lock"}
+              icon={data.isOpen ? 'unlock' : 'lock'}
               onClick={() => act('door')}
-              content={data.isOpen ? "Open" : "Closed"} />
+              content={data.isOpen ? 'Open' : 'Closed'}
+            />
           </LabeledList.Item>
         </LabeledList>
       </Section>
       <Section
         title="Beaker"
-        buttons={(
+        buttons={
           <Button
             icon="eject"
             disabled={!data.isBeakerLoaded}
             onClick={() => act('ejectbeaker')}
-            content="Eject" />
-        )}>
+            content="Eject"
+          />
+        }
+      >
         <BeakerContents
           beakerLoaded={data.isBeakerLoaded}
-          beakerContents={data.beakerContents} />
+          beakerContents={data.beakerContents}
+        />
       </Section>
     </>
   );
diff --git a/tgui/packages/tgui/interfaces/CryopodConsole.js b/tgui/packages/tgui/interfaces/CryopodConsole.js
index 8c74b55e4df1..5355831c3ab6 100644
--- a/tgui/packages/tgui/interfaces/CryopodConsole.js
+++ b/tgui/packages/tgui/interfaces/CryopodConsole.js
@@ -35,10 +35,8 @@ const CrewList = (props, context) => {
   const { frozen_crew } = data;
 
   return (
-    frozen_crew.length && (
-      <Section
-        fill
-        scrollable>
+    (frozen_crew.length && (
+      <Section fill scrollable>
         <LabeledList>
           {frozen_crew.map((person) => (
             <LabeledList.Item key={person} label={person.name}>
@@ -47,9 +45,7 @@ const CrewList = (props, context) => {
           ))}
         </LabeledList>
       </Section>
-    ) || (
-      <NoticeBox>No stored crew!</NoticeBox>
-    )
+    )) || <NoticeBox>No stored crew!</NoticeBox>
   );
 };
 
@@ -57,12 +53,10 @@ const ItemList = (props, context) => {
   const { act, data } = useBackend(context);
   const { item_ref_list, item_ref_name, item_retrieval_allowed } = data;
   if (!item_retrieval_allowed) {
-    return (
-      <NoticeBox>You are not authorized for item management.</NoticeBox>
-    );
+    return <NoticeBox>You are not authorized for item management.</NoticeBox>;
   }
   return (
-    item_ref_list.length && (
+    (item_ref_list.length && (
       <Section fill scrollable>
         <LabeledList>
           {item_ref_list.map((item) => (
@@ -71,13 +65,12 @@ const ItemList = (props, context) => {
                 icon="exclamation-circle"
                 content="Retrieve"
                 color="bad"
-                onClick={() => act('item_get', { item_get: item })} />
+                onClick={() => act('item_get', { item_get: item })}
+              />
             </LabeledList.Item>
           ))}
         </LabeledList>
       </Section>
-    ) || (
-      <NoticeBox>No stored items!</NoticeBox>
-    )
+    )) || <NoticeBox>No stored items!</NoticeBox>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/Crystallizer.js b/tgui/packages/tgui/interfaces/Crystallizer.js
index 40181ed793ba..8d627fad3b5e 100644
--- a/tgui/packages/tgui/interfaces/Crystallizer.js
+++ b/tgui/packages/tgui/interfaces/Crystallizer.js
@@ -1,10 +1,17 @@
 import { useBackend } from '../backend';
-import { Button, LabeledList, ProgressBar, Section, NumberInput, Box } from '../components';
+import {
+  Button,
+  LabeledList,
+  ProgressBar,
+  Section,
+  NumberInput,
+  Box,
+} from '../components';
 import { getGasColor, getGasLabel } from '../constants';
 import { toFixed } from 'common/math';
 import { Window } from '../layouts';
 
-const logScale = value => Math.log2(16 + Math.max(0, value)) - 4;
+const logScale = (value) => Math.log2(16 + Math.max(0, value)) - 4;
 
 export const Crystallizer = (props, context) => {
   const { act, data } = useBackend(context);
@@ -18,9 +25,7 @@ export const Crystallizer = (props, context) => {
     selected,
   } = data;
   return (
-    <Window
-      width={500}
-      height={600}>
+    <Window width={500} height={600}>
       <Window.Content scrollable>
         <Section title="Controls">
           <LabeledList>
@@ -29,17 +34,21 @@ export const Crystallizer = (props, context) => {
                 icon={data.on ? 'power-off' : 'times'}
                 content={data.on ? 'On' : 'Off'}
                 selected={data.on}
-                onClick={() => act('power')} />
+                onClick={() => act('power')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Recipe">
-              {selectedRecipes.map(recipe => (
+              {selectedRecipes.map((recipe) => (
                 <Button
                   key={recipe.id}
                   selected={recipe.id === selected}
                   content={recipe.name}
-                  onClick={() => act('recipe', {
-                    mode: recipe.id,
-                  })} />
+                  onClick={() =>
+                    act('recipe', {
+                      mode: recipe.id,
+                    })
+                  }
+                />
               ))}
             </LabeledList.Item>
             <LabeledList.Item label="Gas Input">
@@ -50,9 +59,12 @@ export const Crystallizer = (props, context) => {
                 unit="moles/s"
                 minValue={0}
                 maxValue={250}
-                onDrag={(e, value) => act('gas_input', {
-                  gas_input: value,
-                })} />
+                onDrag={(e, value) =>
+                  act('gas_input', {
+                    gas_input: value,
+                  })
+                }
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
@@ -65,7 +77,8 @@ export const Crystallizer = (props, context) => {
                   good: [0.67, 1],
                   average: [0.34, 0.66],
                   bad: [0, 0.33],
-                }} />
+                }}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Recipe">
               <Box m={1} preserveWhitespace>
@@ -82,7 +95,8 @@ export const Crystallizer = (props, context) => {
                   good: [logScale(80), logScale(600)],
                   average: [logScale(600), logScale(5000)],
                   bad: [logScale(5000), Infinity],
-                }}>
+                }}
+              >
                 {toFixed(internal_temperature) + ' K'}
               </ProgressBar>
             </LabeledList.Item>
@@ -90,15 +104,14 @@ export const Crystallizer = (props, context) => {
         </Section>
         <Section title="Gases">
           <LabeledList>
-            {gasTypes.map(gas => (
-              <LabeledList.Item
-                key={gas.name}
-                label={getGasLabel(gas.name)}>
+            {gasTypes.map((gas) => (
+              <LabeledList.Item key={gas.name} label={getGasLabel(gas.name)}>
                 <ProgressBar
                   color={getGasColor(gas.name)}
                   value={gas.amount}
                   minValue={0}
-                  maxValue={1000}>
+                  maxValue={1000}
+                >
                   {toFixed(gas.amount, 2) + ' moles'}
                 </ProgressBar>
               </LabeledList.Item>
diff --git a/tgui/packages/tgui/interfaces/CyborgBootDebug.js b/tgui/packages/tgui/interfaces/CyborgBootDebug.js
index f4bfe2ae0bc7..ba156d5c4125 100644
--- a/tgui/packages/tgui/interfaces/CyborgBootDebug.js
+++ b/tgui/packages/tgui/interfaces/CyborgBootDebug.js
@@ -35,62 +35,64 @@ const TOOLTIP_LAWSYNC = multiline`
 
 export const CyborgBootDebug = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    designation,
-    master,
-    lawsync,
-    aisync,
-    locomotion,
-    panel,
-  } = data;
+  const { designation, master, lawsync, aisync, locomotion, panel } = data;
   return (
-    <Window
-      width={master?.length > 26 ? 537 : 440}
-      height={289}>
+    <Window width={master?.length > 26 ? 537 : 440} height={289}>
       <Window.Content>
         <Section title="Basic Settings">
           <LabeledList>
             <LabeledList.Item
               label="Designation"
-              buttons={(
+              buttons={
                 <Button
                   icon="info"
                   tooltip={TOOLTIP_NAME}
-                  tooltipPosition="left" />
-              )}>
+                  tooltipPosition="left"
+                />
+              }
+            >
               <Input
                 fluid
-                value={designation || "Default Cyborg"}
-                onChange={(e, value) => act('rename', {
-                  new_name: value,
-                })} />
+                value={designation || 'Default Cyborg'}
+                onChange={(e, value) =>
+                  act('rename', {
+                    new_name: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item
               label="Servo Motor Functions"
-              buttons={(
+              buttons={
                 <Button
                   icon="info"
                   tooltip={TOOLTIP_LOCOMOTION}
-                  tooltipPosition="left" />
-              )}>
+                  tooltipPosition="left"
+                />
+              }
+            >
               <Button
-                icon={locomotion ? "unlock" : "lock"}
-                content={locomotion ? "Free" : "Restricted"}
-                color={locomotion ? "good" : "bad"}
-                onClick={() => act('locomotion')} />
+                icon={locomotion ? 'unlock' : 'lock'}
+                content={locomotion ? 'Free' : 'Restricted'}
+                color={locomotion ? 'good' : 'bad'}
+                onClick={() => act('locomotion')}
+              />
             </LabeledList.Item>
             <LabeledList.Item
               label="Cover Panel"
-              buttons={(
+              buttons={
                 <Button
                   icon="info"
                   tooltip={TOOLTIP_PANEL}
-                  tooltipPosition="left" />
-              )}>
+                  tooltipPosition="left"
+                />
+              }
+            >
               <Button
-                icon={panel ? "lock" : "unlock"}
-                content={panel ? "Locked" : "Unlocked"}
-                onClick={() => act('panel')} />
+                icon={panel ? 'lock' : 'unlock'}
+                content={panel ? 'Locked' : 'Unlocked'}
+                onClick={() => act('panel')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
@@ -98,45 +100,54 @@ export const CyborgBootDebug = (props, context) => {
           <LabeledList>
             <LabeledList.Item
               label="AI Connection Port"
-              buttons={(
+              buttons={
                 <Button
                   icon="info"
                   tooltip={TOOLTIP_AISYNC}
-                  tooltipPosition="left" />
-              )}>
+                  tooltipPosition="left"
+                />
+              }
+            >
               <Button
-                icon={aisync ? "unlock" : "lock"}
-                content={aisync ? "Open" : "Closed"}
-                onClick={() => act('aisync')} />
+                icon={aisync ? 'unlock' : 'lock'}
+                content={aisync ? 'Open' : 'Closed'}
+                onClick={() => act('aisync')}
+              />
             </LabeledList.Item>
             <LabeledList.Item
               label="Master AI"
-              buttons={(
+              buttons={
                 <Button
                   icon="info"
                   tooltip={TOOLTIP_AI}
-                  tooltipPosition="left" />
-              )}>
+                  tooltipPosition="left"
+                />
+              }
+            >
               <Button
-                icon={!aisync ? "times" : master ? "edit" : "sync"}
-                content={!aisync ? "None" : master || "Automatic"}
-                color={master ? "default" : "good"}
+                icon={!aisync ? 'times' : master ? 'edit' : 'sync'}
+                content={!aisync ? 'None' : master || 'Automatic'}
+                color={master ? 'default' : 'good'}
                 disabled={!aisync}
-                onClick={() => act('set_ai')} />
+                onClick={() => act('set_ai')}
+              />
             </LabeledList.Item>
             <LabeledList.Item
               label="LawSync Port"
-              buttons={(
+              buttons={
                 <Button
                   icon="info"
                   tooltip={TOOLTIP_LAWSYNC}
-                  tooltipPosition="top-start" />
-              )}>
+                  tooltipPosition="top-start"
+                />
+              }
+            >
               <Button
-                icon={!aisync ? "lock" : lawsync ? "unlock" : "lock"}
-                content={!aisync ? "Closed" : lawsync ? "Open" : "Closed"}
+                icon={!aisync ? 'lock' : lawsync ? 'unlock' : 'lock'}
+                content={!aisync ? 'Closed' : lawsync ? 'Open' : 'Closed'}
                 disabled={!aisync}
-                onClick={() => act('lawsync')} />
+                onClick={() => act('lawsync')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/DebugHealth.tsx b/tgui/packages/tgui/interfaces/DebugHealth.tsx
index bfa70e00961d..7f3b22be769c 100644
--- a/tgui/packages/tgui/interfaces/DebugHealth.tsx
+++ b/tgui/packages/tgui/interfaces/DebugHealth.tsx
@@ -1,6 +1,15 @@
 import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
-import { Button, Collapsible, LabeledList, NoticeBox, Section, Stack, Tabs, Tooltip } from '../components';
+import {
+  Button,
+  Collapsible,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Stack,
+  Tabs,
+  Tooltip,
+} from '../components';
 import { toTitleCase } from 'common/string';
 import { TableCell, TableRow } from '../components/Table';
 
@@ -11,7 +20,7 @@ export const DebugHealth = (props, context) => {
   const [currentTab, setCurrentTab] = useLocalState(
     context,
     'currentTab',
-    tabs[0]
+    tabs[0],
   );
 
   return (
@@ -24,7 +33,8 @@ export const DebugHealth = (props, context) => {
                 <Tabs.Tab
                   key={key}
                   selected={currentTab === key}
-                  onClick={() => setCurrentTab(key)}>
+                  onClick={() => setCurrentTab(key)}
+                >
                   {toTitleCase(key)}
                 </Tabs.Tab>
               ))}
@@ -135,7 +145,8 @@ const TooltipButton = (props, context) => {
             ))}
           </LabeledList>
         </>
-      }>
+      }
+    >
       <Button color="bad">{name}</Button>
     </Tooltip>
   );
diff --git a/tgui/packages/tgui/interfaces/DecalPainter.tsx b/tgui/packages/tgui/interfaces/DecalPainter.tsx
index a2d1057302f4..2dffb47ce035 100644
--- a/tgui/packages/tgui/interfaces/DecalPainter.tsx
+++ b/tgui/packages/tgui/interfaces/DecalPainter.tsx
@@ -34,7 +34,7 @@ export const DecalPainter = (props, context) => {
   const { act, data } = useBackend<DecalPainterData>(context);
 
   const custom_color_selected = !data.color_list.some(
-    (color) => color.color === data.current_color
+    (color) => color.color === data.current_color,
   );
   const supports_custom_color = !!data.supports_custom_color;
 
@@ -53,7 +53,9 @@ export const DecalPainter = (props, context) => {
                 onClick={() =>
                   act('select color', {
                     color: color.color,
-                  })}>
+                  })
+                }
+              >
                 <ColorBox color={color.color} mr={0.5} />
                 {color.name}
               </Button>
@@ -62,7 +64,8 @@ export const DecalPainter = (props, context) => {
           {supports_custom_color && (
             <Button
               selected={custom_color_selected}
-              onClick={() => act('pick custom color')}>
+              onClick={() => act('pick custom color')}
+            >
               <ColorBox color={data.current_custom_color} mr={0.5} />
               Custom
             </Button>
@@ -72,7 +75,7 @@ export const DecalPainter = (props, context) => {
           <Flex direction="row" wrap="nowrap" align="fill" justify="fill">
             {data.decal_list.map((decal) => {
               const nondirectional = data.nondirectional_decals.includes(
-                decal.decal
+                decal.decal,
               );
 
               return nondirectional ? (
@@ -92,11 +95,12 @@ export const DecalPainter = (props, context) => {
                   direction="column"
                   wrap="nowrap"
                   align="fill"
-                  justify="fill">
+                  justify="fill"
+                >
                   {data.dir_list.map((dir) => {
-                    const selected
-                      = decal.decal === data.current_decal
-                      && dir.dir === data.current_dir;
+                    const selected =
+                      decal.decal === data.current_decal &&
+                      dir.dir === data.current_dir;
 
                     return (
                       <IconButton
@@ -146,7 +150,9 @@ const IconButton = (props: IconButtonParams, context) => {
         act('select decal', {
           decal: props.decal,
           dir: props.dir,
-        })}>
+        })
+      }
+    >
       <div className={icon} style={{ display: 'block' }} />
     </Button>
   );
diff --git a/tgui/packages/tgui/interfaces/DepartmentOrders.tsx b/tgui/packages/tgui/interfaces/DepartmentOrders.tsx
index 02e64f04d82d..f52919451d77 100644
--- a/tgui/packages/tgui/interfaces/DepartmentOrders.tsx
+++ b/tgui/packages/tgui/interfaces/DepartmentOrders.tsx
@@ -1,6 +1,16 @@
 import { BooleanLike } from 'common/react';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Dimmer, Icon, NoticeBox, Section, Stack, Tabs, Tooltip } from '../components';
+import {
+  Box,
+  Button,
+  Dimmer,
+  Icon,
+  NoticeBox,
+  Section,
+  Stack,
+  Tabs,
+  Tooltip,
+} from '../components';
 import { Window } from '../layouts';
 
 // 15x crate value
@@ -12,12 +22,12 @@ type Pack = {
   id: string;
   desc: string;
   goody: string;
-}
+};
 
 type Category = {
   name: string;
   packs: Pack[];
-}
+};
 
 type Info = {
   can_override: BooleanLike;
@@ -26,15 +36,15 @@ type Info = {
 };
 
 const CooldownEstimate = (props) => {
-  const {
-    cost,
-  } = props;
-  const cooldownColor = cost > COST_UPPER_BOUND * 0.75 && "red"
-    || cost > COST_UPPER_BOUND * 0.25 && "orange"
-    || "green";
-  const cooldownText = cost > COST_UPPER_BOUND * 0.75 && "long"
-  || cost > COST_UPPER_BOUND * 0.25 && "moderate"
-  || "short";
+  const { cost } = props;
+  const cooldownColor =
+    (cost > COST_UPPER_BOUND * 0.75 && 'red') ||
+    (cost > COST_UPPER_BOUND * 0.25 && 'orange') ||
+    'green';
+  const cooldownText =
+    (cost > COST_UPPER_BOUND * 0.75 && 'long') ||
+    (cost > COST_UPPER_BOUND * 0.25 && 'moderate') ||
+    'short';
   return (
     <Box as="span" textColor={cooldownColor}>
       {cooldownText} cooldown.
@@ -44,37 +54,30 @@ const CooldownEstimate = (props) => {
 
 export const DepartmentOrders = (props, context) => {
   const { data } = useBackend<Info>(context);
-  const {
-    time_left,
-  } = data;
+  const { time_left } = data;
   return (
-    <Window
-      title="Department Orders"
-      width={620}
-      height={580} >
+    <Window title="Department Orders" width={620} height={580}>
       <Window.Content>
-        {!!time_left
-          && <CooldownDimmer />
-          || (
-            <Stack vertical fill>
-              <Stack.Item grow>
-                <Stack fill vertical>
-                  <Stack.Item>
-                    <NoticeBox info>
-                      As employees of Nanotrasen, the selection of orders
-                      here are completely free of charge, only incurring
-                      a cooldown on the service. Cheaper items will make
-                      you wait for less time before Nanotrasen allows
-                      another purchase, to encourage tasteful spending.
-                    </NoticeBox>
-                  </Stack.Item>
-                  <Stack.Item grow>
-                    <DepartmentCatalog />
-                  </Stack.Item>
-                </Stack>
-              </Stack.Item>
-            </Stack>
-          )}
+        {(!!time_left && <CooldownDimmer />) || (
+          <Stack vertical fill>
+            <Stack.Item grow>
+              <Stack fill vertical>
+                <Stack.Item>
+                  <NoticeBox info>
+                    As employees of Nanotrasen, the selection of orders here are
+                    completely free of charge, only incurring a cooldown on the
+                    service. Cheaper items will make you wait for less time
+                    before Nanotrasen allows another purchase, to encourage
+                    tasteful spending.
+                  </NoticeBox>
+                </Stack.Item>
+                <Stack.Item grow>
+                  <DepartmentCatalog />
+                </Stack.Item>
+              </Stack>
+            </Stack.Item>
+          </Stack>
+        )}
       </Window.Content>
     </Window>
   );
@@ -82,19 +85,12 @@ export const DepartmentOrders = (props, context) => {
 
 const CooldownDimmer = (props, context) => {
   const { act, data } = useBackend<Info>(context);
-  const {
-    can_override,
-    time_left,
-  } = data;
+  const { can_override, time_left } = data;
   return (
     <Dimmer>
       <Stack vertical>
         <Stack.Item textAlign="center">
-          <Icon
-            color="orange"
-            name="route"
-            size={20}
-          />
+          <Icon color="orange" name="route" size={20} />
         </Stack.Item>
         <Stack.Item fontSize="18px" color="orange">
           Ready for another order in {time_left}...
@@ -103,16 +99,17 @@ const CooldownDimmer = (props, context) => {
           <Button
             width="300px"
             lineHeight={2}
-            tooltip={!!can_override
-              && "This action requires Head of Staff access!"
-              || "Crate already shipped! No cancelling now!"}
+            tooltip={
+              (!!can_override &&
+                'This action requires Head of Staff access!') ||
+              'Crate already shipped! No cancelling now!'
+            }
             fontSize="14px"
             color="red"
             disabled={!can_override}
-            onClick={() => act("override_order")}>
-            <Box fontSize="22px">
-              Override
-            </Box>
+            onClick={() => act('override_order')}
+          >
+            <Box fontSize="22px">Override</Box>
           </Button>
         </Stack.Item>
       </Stack>
@@ -122,22 +119,22 @@ const CooldownDimmer = (props, context) => {
 
 const DepartmentCatalog = (props, context) => {
   const { act, data } = useBackend<Info>(context);
-  const {
-    supplies,
-  } = data;
-  const [
-    tabCategory,
-    setTabCategory,
-  ] = useLocalState(context, 'tabName', supplies[0]);
+  const { supplies } = data;
+  const [tabCategory, setTabCategory] = useLocalState(
+    context,
+    'tabName',
+    supplies[0],
+  );
   return (
     <Stack vertical fill>
       <Stack.Item>
         <Tabs textAlign="center" fluid>
-          {supplies.map(cat => (
+          {supplies.map((cat) => (
             <Tabs.Tab
               key={cat}
               selected={tabCategory === cat}
-              onClick={() => (setTabCategory(cat))}>
+              onClick={() => setTabCategory(cat)}
+            >
               {cat.name}
             </Tabs.Tab>
           ))}
@@ -146,14 +143,18 @@ const DepartmentCatalog = (props, context) => {
       <Stack.Item grow>
         <Section fill scrollable>
           <Stack vertical>
-            {tabCategory.packs.map(pack => (
+            {tabCategory.packs.map((pack) => (
               <Stack.Item className="candystripe" key={pack.name}>
                 <Stack fill>
                   <Stack.Item grow>
                     <Tooltip content={pack.desc}>
-                      <Box as="span" style={{
-                        "border-bottom": "2px dotted rgba(255, 255, 255, 0.8)",
-                      }}>
+                      <Box
+                        as="span"
+                        style={{
+                          'border-bottom':
+                            '2px dotted rgba(255, 255, 255, 0.8)',
+                        }}
+                      >
                         {pack.name}
                       </Box>
                     </Tooltip>
@@ -162,9 +163,12 @@ const DepartmentCatalog = (props, context) => {
                     <CooldownEstimate cost={pack.cost} />
                     &ensp;
                     <Button
-                      onClick={() => act("order", {
-                        id: pack.id,
-                      })}>
+                      onClick={() =>
+                        act('order', {
+                          id: pack.id,
+                        })
+                      }
+                    >
                       Order
                     </Button>
                   </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/DestinationTagger.tsx b/tgui/packages/tgui/interfaces/DestinationTagger.tsx
index 7bef9509c62d..e905ce3909ff 100644
--- a/tgui/packages/tgui/interfaces/DestinationTagger.tsx
+++ b/tgui/packages/tgui/interfaces/DestinationTagger.tsx
@@ -49,15 +49,19 @@ export const DestinationTagger = (props, context) => {
                 !currentTag
                   ? 'Please Select A Location'
                   : `Current Destination: ${locations[currentTag - 1]}`
-              }>
+              }
+            >
               {sortDestinations(locations).map((location) => {
                 return (
                   <Button.Checkbox
                     checked={currentTag === location.sorting_id}
                     height={2}
                     key={location.sorting_id}
-                    onClick={() => act('change', { index: location.sorting_id })}
-                    width={15}>
+                    onClick={() =>
+                      act('change', { index: location.sorting_id })
+                    }
+                    width={15}
+                  >
                     {location.name}
                   </Button.Checkbox>
                 );
diff --git a/tgui/packages/tgui/interfaces/DisposalUnit.js b/tgui/packages/tgui/interfaces/DisposalUnit.js
index 46ef63a99338..3499d914b72d 100644
--- a/tgui/packages/tgui/interfaces/DisposalUnit.js
+++ b/tgui/packages/tgui/interfaces/DisposalUnit.js
@@ -9,65 +9,51 @@ export const DisposalUnit = (props, context) => {
   if (data.full_pressure) {
     stateColor = 'good';
     stateText = 'Ready';
-  }
-  else if (data.panel_open) {
+  } else if (data.panel_open) {
     stateColor = 'bad';
     stateText = 'Power Disabled';
-  }
-  else if (data.pressure_charging) {
+  } else if (data.pressure_charging) {
     stateColor = 'average';
     stateText = 'Pressurizing';
-  }
-  else {
+  } else {
     stateColor = 'bad';
     stateText = 'Off';
   }
   return (
-    <Window
-      width={300}
-      height={180}>
+    <Window width={300} height={180}>
       <Window.Content>
         <Section>
           <LabeledList>
-            <LabeledList.Item
-              label="State"
-              color={stateColor}>
+            <LabeledList.Item label="State" color={stateColor}>
               {stateText}
             </LabeledList.Item>
-            <LabeledList.Item
-              label="Pressure">
-              <ProgressBar
-                value={data.per}
-                color="good" />
+            <LabeledList.Item label="Pressure">
+              <ProgressBar value={data.per} color="good" />
             </LabeledList.Item>
-            <LabeledList.Item
-              label="Handle">
+            <LabeledList.Item label="Handle">
               <Button
                 icon={data.flush ? 'toggle-on' : 'toggle-off'}
                 disabled={data.isai || data.panel_open}
                 content={data.flush ? 'Disengage' : 'Engage'}
-                onClick={() => act(data.flush
-                  ? 'handle-0'
-                  : 'handle-1')}
+                onClick={() => act(data.flush ? 'handle-0' : 'handle-1')}
               />
             </LabeledList.Item>
-            <LabeledList.Item
-              label="Eject">
+            <LabeledList.Item label="Eject">
               <Button
                 icon="sign-out-alt"
                 disabled={data.isai}
                 content="Eject Contents"
-                onClick={() => act('eject')} />
+                onClick={() => act('eject')}
+              />
             </LabeledList.Item>
-            <LabeledList.Item
-              label="Power">
+            <LabeledList.Item label="Power">
               <Button
                 icon="power-off"
                 disabled={data.panel_open}
                 selected={data.pressure_charging}
-                onClick={() => act(data.pressure_charging
-                  ? 'pump-0'
-                  : 'pump-1')}
+                onClick={() =>
+                  act(data.pressure_charging ? 'pump-0' : 'pump-1')
+                }
               />
             </LabeledList.Item>
           </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleEnzymes.js b/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleEnzymes.js
index 61a5fabf82e9..b2108952b9c9 100644
--- a/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleEnzymes.js
+++ b/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleEnzymes.js
@@ -1,27 +1,27 @@
 import { useBackend } from '../../backend';
-import { Box, Button, Collapsible, Dimmer, Divider, Icon, LabeledList, NumberInput, Section, Stack } from '../../components';
+import {
+  Box,
+  Button,
+  Collapsible,
+  Dimmer,
+  Divider,
+  Icon,
+  LabeledList,
+  NumberInput,
+  Section,
+  Stack,
+} from '../../components';
 import { GeneticMakeupInfo } from './GeneticMakeupInfo';
 import { PULSE_DURATION_MAX, PULSE_STRENGTH_MAX } from './constants';
 
 const GeneticMakeupBufferInfo = (props, context) => {
   const { index, makeup } = props;
   const { act, data } = useBackend(context);
-  const {
-    isViableSubject,
-    hasDisk,
-    diskReadOnly,
-    isInjectorReady,
-  } = data;
+  const { isViableSubject, hasDisk, diskReadOnly, isInjectorReady } = data;
   // Type of the action for applying makeup
-  const ACTION_MAKEUP_APPLY = isViableSubject
-    ? 'makeup_apply'
-    : 'makeup_delay';
+  const ACTION_MAKEUP_APPLY = isViableSubject ? 'makeup_apply' : 'makeup_delay';
   if (!makeup) {
-    return (
-      <Box color="average">
-        No stored subject data.
-      </Box>
-    );
+    return <Box color="average">No stored subject data.</Box>;
   }
   return (
     <>
@@ -36,16 +36,22 @@ const GeneticMakeupBufferInfo = (props, context) => {
             icon="syringe"
             disabled={!isInjectorReady}
             content="Print"
-            onClick={() => act('makeup_injector', {
-              index,
-              type: 'ue',
-            })} />
+            onClick={() =>
+              act('makeup_injector', {
+                index,
+                type: 'ue',
+              })
+            }
+          />
           <Button
             icon="exchange-alt"
-            onClick={() => act(ACTION_MAKEUP_APPLY, {
-              index,
-              type: 'ue',
-            })}>
+            onClick={() =>
+              act(ACTION_MAKEUP_APPLY, {
+                index,
+                type: 'ue',
+              })
+            }
+          >
             Transfer
             {!isViableSubject && ' (Delayed)'}
           </Button>
@@ -55,16 +61,22 @@ const GeneticMakeupBufferInfo = (props, context) => {
             icon="syringe"
             disabled={!isInjectorReady}
             content="Print"
-            onClick={() => act('makeup_injector', {
-              index,
-              type: 'ui',
-            })} />
+            onClick={() =>
+              act('makeup_injector', {
+                index,
+                type: 'ui',
+              })
+            }
+          />
           <Button
             icon="exchange-alt"
-            onClick={() => act(ACTION_MAKEUP_APPLY, {
-              index,
-              type: 'ui',
-            })}>
+            onClick={() =>
+              act(ACTION_MAKEUP_APPLY, {
+                index,
+                type: 'ui',
+              })
+            }
+          >
             Transfer
             {!isViableSubject && ' (Delayed)'}
           </Button>
@@ -74,16 +86,22 @@ const GeneticMakeupBufferInfo = (props, context) => {
             icon="syringe"
             disabled={!isInjectorReady}
             content="Print"
-            onClick={() => act('makeup_injector', {
-              index,
-              type: 'uf',
-            })} />
+            onClick={() =>
+              act('makeup_injector', {
+                index,
+                type: 'uf',
+              })
+            }
+          />
           <Button
             icon="exchange-alt"
-            onClick={() => act(ACTION_MAKEUP_APPLY, {
-              index,
-              type: 'uf',
-            })}>
+            onClick={() =>
+              act(ACTION_MAKEUP_APPLY, {
+                index,
+                type: 'uf',
+              })
+            }
+          >
             Transfer
             {!isViableSubject && ' (Delayed)'}
           </Button>
@@ -93,16 +111,22 @@ const GeneticMakeupBufferInfo = (props, context) => {
             icon="syringe"
             disabled={!isInjectorReady}
             content="Print"
-            onClick={() => act('makeup_injector', {
-              index,
-              type: 'mixed',
-            })} />
+            onClick={() =>
+              act('makeup_injector', {
+                index,
+                type: 'mixed',
+              })
+            }
+          />
           <Button
             icon="exchange-alt"
-            onClick={() => act(ACTION_MAKEUP_APPLY, {
-              index,
-              type: 'mixed',
-            })}>
+            onClick={() =>
+              act(ACTION_MAKEUP_APPLY, {
+                index,
+                type: 'mixed',
+              })
+            }
+          >
             Transfer
             {!isViableSubject && ' (Delayed)'}
           </Button>
@@ -112,9 +136,12 @@ const GeneticMakeupBufferInfo = (props, context) => {
             icon="save"
             disabled={!hasDisk || diskReadOnly}
             content="Export To Disk"
-            onClick={() => act('save_makeup_disk', {
-              index,
-            })} />
+            onClick={() =>
+              act('save_makeup_disk', {
+                index,
+              })
+            }
+          />
         </LabeledList.Item>
       </LabeledList>
     </>
@@ -136,9 +163,7 @@ const GeneticMakeupBuffers = (props, context) => {
     const makeup = makeupStorage[i];
     const element = (
       <Collapsible
-        title={makeup
-          ? (makeup.label || makeup.name)
-          : `Slot ${i}`}
+        title={makeup ? makeup.label || makeup.name : `Slot ${i}`}
         buttons={
           <>
             {!!(hasDisk && diskHasMakeup) && (
@@ -146,29 +171,37 @@ const GeneticMakeupBuffers = (props, context) => {
                 mr={1}
                 disabled={!hasDisk || !diskHasMakeup}
                 content="Import from disk"
-                onClick={() => act('load_makeup_disk', {
-                  index: i,
-                })} />
+                onClick={() =>
+                  act('load_makeup_disk', {
+                    index: i,
+                  })
+                }
+              />
             )}
             <Button
               disabled={!isViableSubject}
               content="Save"
-              onClick={() => act('save_makeup_console', {
-                index: i,
-              })} />
+              onClick={() =>
+                act('save_makeup_console', {
+                  index: i,
+                })
+              }
+            />
             <Button
               ml={1}
               icon="times"
               color="red"
               disabled={!makeup}
-              onClick={() => act('del_makeup_console', {
-                index: i,
-              })} />
+              onClick={() =>
+                act('del_makeup_console', {
+                  index: i,
+                })
+              }
+            />
           </>
-        }>
-        <GeneticMakeupBufferInfo
-          index={i}
-          makeup={makeup} />
+        }
+      >
+        <GeneticMakeupBufferInfo index={i} makeup={makeup} />
       </Collapsible>
     );
     elements.push(element);
@@ -176,13 +209,8 @@ const GeneticMakeupBuffers = (props, context) => {
   return (
     <Section title="Genetic Makeup Buffers">
       {!!geneticMakeupCooldown && (
-        <Dimmer
-          fontSize="14px"
-          textAlign="center">
-          <Icon
-            mr={1}
-            name="spinner"
-            spin />
+        <Dimmer fontSize="14px" textAlign="center">
+          <Icon mr={1} name="spinner" spin />
           Genetic makeup transfer ready in...
           <Box mt={1} />
           {geneticMakeupCooldown}s
@@ -195,28 +223,17 @@ const GeneticMakeupBuffers = (props, context) => {
 
 const PulseEmitterProbs = (props, context) => {
   const { data } = useBackend(context);
-  const {
-    stdDevAcc,
-    stdDevStr,
-  } = data;
+  const { stdDevAcc, stdDevStr } = data;
   return (
-    <Section
-      title="Probabilities"
-      minHeight="100%">
+    <Section title="Probabilities" minHeight="100%">
       <LabeledList>
-        <LabeledList.Item
-          label="Accuracy"
-          textAlign="right">
+        <LabeledList.Item label="Accuracy" textAlign="right">
           {stdDevAcc}
         </LabeledList.Item>
-        <LabeledList.Item
-          label={`P(±${stdDevStr})`}
-          textAlign="right">
+        <LabeledList.Item label={`P(±${stdDevStr})`} textAlign="right">
           68 %
         </LabeledList.Item>
-        <LabeledList.Item
-          label={`P(±${stdDevStr * 2})`}
-          textAlign="right">
+        <LabeledList.Item label={`P(±${stdDevStr * 2})`} textAlign="right">
           95 %
         </LabeledList.Item>
       </LabeledList>
@@ -226,11 +243,7 @@ const PulseEmitterProbs = (props, context) => {
 
 const PulseBoard = (props, context) => {
   const { act } = useBackend(context);
-  const {
-    subjectBlock = [],
-    type,
-    name,
-  } = props;
+  const { subjectBlock = [], type, name } = props;
   // Build blocks of buttons of unique enzymes
   const blocks = [];
   let buffer = [];
@@ -243,10 +256,13 @@ const PulseBoard = (props, context) => {
         key={i}
         textAlign="center"
         content={char}
-        onClick={() => act('makeup_pulse', {
-          index: i + 1,
-          type: type,
-        })} />
+        onClick={() =>
+          act('makeup_pulse', {
+            index: i + 1,
+            type: type,
+          })
+        }
+      />
     );
     buffer.push(button);
     // Create a block from the current buffer
@@ -262,27 +278,17 @@ const PulseBoard = (props, context) => {
     }
   }
   return (
-    <Section
-      title={"Unique " + name}
-      minHeight="100%"
-      position="relative">
-      <Box mx="-1px">
-        {blocks}
-      </Box>
+    <Section title={'Unique ' + name} minHeight="100%" position="relative">
+      <Box mx="-1px">{blocks}</Box>
     </Section>
   );
 };
 
 const PulseSettings = (props, context) => {
   const { data, act } = useBackend(context);
-  const {
-    pulseStrength,
-    pulseDuration,
-  } = data;
+  const { pulseStrength, pulseDuration } = data;
   return (
-    <Section
-      title="Emitter Configuration"
-      minHeight="100%">
+    <Section title="Emitter Configuration" minHeight="100%">
       <LabeledList>
         <LabeledList.Item label="Output level">
           <NumberInput
@@ -292,9 +298,12 @@ const PulseSettings = (props, context) => {
             value={pulseStrength}
             minValue={1}
             maxValue={PULSE_STRENGTH_MAX}
-            onDrag={(e, value) => act('set_pulse_strength', {
-              val: value,
-            })} />
+            onDrag={(e, value) =>
+              act('set_pulse_strength', {
+                val: value,
+              })
+            }
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Pulse duration">
           <NumberInput
@@ -304,9 +313,12 @@ const PulseSettings = (props, context) => {
             value={pulseDuration}
             minValue={1}
             maxValue={PULSE_DURATION_MAX}
-            onDrag={(e, value) => act('set_pulse_duration', {
-              val: value,
-            })} />
+            onDrag={(e, value) =>
+              act('set_pulse_duration', {
+                val: value,
+              })
+            }
+          />
         </LabeledList.Item>
       </LabeledList>
     </Section>
@@ -315,20 +327,10 @@ const PulseSettings = (props, context) => {
 
 export const DnaConsoleEnzymes = (props, context) => {
   const { data, act } = useBackend(context);
-  const {
-    isScannerConnected,
-  } = data;
-  const {
-    subjectBlock,
-    type,
-    name,
-  } = props;
+  const { isScannerConnected } = data;
+  const { subjectBlock, type, name } = props;
   if (!isScannerConnected) {
-    return (
-      <Section color="bad">
-        DNA Scanner is not connected.
-      </Section>
-    );
+    return <Section color="bad">DNA Scanner is not connected.</Section>;
   }
   return (
     <>
@@ -340,10 +342,7 @@ export const DnaConsoleEnzymes = (props, context) => {
           <PulseEmitterProbs />
         </Stack.Item>
         <Stack.Item grow={1} basis={0}>
-          <PulseBoard
-            subjectBlock={subjectBlock}
-            type={type}
-            name={name} />
+          <PulseBoard subjectBlock={subjectBlock} type={type} name={name} />
         </Stack.Item>
       </Stack>
       <GeneticMakeupBuffers />
diff --git a/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleSequencer.js b/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleSequencer.js
index 2ce379f4fc8d..ef3a85486c76 100644
--- a/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleSequencer.js
+++ b/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleSequencer.js
@@ -3,7 +3,15 @@ import { resolveAsset } from '../../assets';
 import { useBackend } from '../../backend';
 import { Box, Button, Section, Stack } from '../../components';
 import { MutationInfo } from './MutationInfo';
-import { CLEAR_GENE, GENE_COLORS, MUT_NORMAL, NEXT_GENE, PREV_GENE, SUBJECT_DEAD, SUBJECT_TRANSFORMING } from './constants';
+import {
+  CLEAR_GENE,
+  GENE_COLORS,
+  MUT_NORMAL,
+  NEXT_GENE,
+  PREV_GENE,
+  SUBJECT_DEAD,
+  SUBJECT_TRANSFORMING,
+} from './constants';
 
 const GenomeImage = (props, context) => {
   const { url, selected, onClick } = props;
@@ -21,7 +29,8 @@ const GenomeImage = (props, context) => {
         'margin-left': '4px',
         outline,
       }}
-      onClick={onClick} />
+      onClick={onClick}
+    />
   );
 };
 
@@ -33,7 +42,7 @@ const GeneCycler = (props, context) => {
     <Button
       {...rest}
       color={color}
-      onClick={e => {
+      onClick={(e) => {
         e.preventDefault();
         if (e.ctrlKey) {
           act('pulse_gene', {
@@ -52,7 +61,7 @@ const GeneCycler = (props, context) => {
 
         return;
       }}
-      oncontextmenu={e => {
+      oncontextmenu={(e) => {
         e.preventDefault();
 
         act('pulse_gene', {
@@ -60,7 +69,8 @@ const GeneCycler = (props, context) => {
           pulseAction: PREV_GENE,
           alias: alias,
         });
-      }}>
+      }}
+    >
       {gene}
     </Button>
   );
@@ -69,11 +79,7 @@ const GeneCycler = (props, context) => {
 const GenomeSequencer = (props, context) => {
   const { mutation } = props;
   if (!mutation) {
-    return (
-      <Box color="average">
-        No genome selected for sequencing.
-      </Box>
-    );
+    return <Box color="average">No genome selected for sequencing.</Box>;
   }
   if (mutation.Scrambled) {
     return (
@@ -94,16 +100,14 @@ const GenomeSequencer = (props, context) => {
         textAlign="center"
         disabled={!!mutation.Scrambled || mutation.Class !== MUT_NORMAL}
         className={
-          (defaultSeq?.charAt(i) === 'X' && !mutation.Active)
-            ? classes([
-              "outline-solid",
-              "outline-color-orange",
-            ])
+          defaultSeq?.charAt(i) === 'X' && !mutation.Active
+            ? classes(['outline-solid', 'outline-color-orange'])
             : false
         }
         gene={gene}
         index={i}
-        alias={mutation.Alias} />
+        alias={mutation.Alias}
+      />
     );
     buttons.push(button);
   }
@@ -111,22 +115,20 @@ const GenomeSequencer = (props, context) => {
   const pairs = [];
   for (let i = 0; i < buttons.length; i += 2) {
     const pair = (
-      <Box
-        key={i}
-        inline
-        m={0.5}>
+      <Box key={i} inline m={0.5}>
         {buttons[i]}
         <Box
           mt="-2px"
           ml="10px"
           width="2px"
           height="8px"
-          backgroundColor="label" />
+          backgroundColor="label"
+        />
         {buttons[i + 1]}
       </Box>
     );
 
-    if ((i % 8 === 0) && (i !== 0)) {
+    if (i % 8 === 0 && i !== 0) {
       pairs.push(
         <Box
           key={`${i}_divider`}
@@ -136,7 +138,8 @@ const GenomeSequencer = (props, context) => {
           left="-1px"
           width="8px"
           height="2px"
-          backgroundColor="label" />,
+          backgroundColor="label"
+        />,
       );
     }
 
@@ -144,12 +147,10 @@ const GenomeSequencer = (props, context) => {
   }
   return (
     <>
-      <Box m={-0.5}>
-        {pairs}
-      </Box>
+      <Box m={-0.5}>{pairs}</Box>
       <Box color="label" mt={1}>
-        <b>Tip:</b> Ctrl+Click on the gene to set it to X.
-        Right Click to cycle in reverse.
+        <b>Tip:</b> Ctrl+Click on the gene to set it to X. Right Click to cycle
+        in reverse.
       </Box>
     </>
   );
@@ -158,25 +159,21 @@ const GenomeSequencer = (props, context) => {
 export const DnaConsoleSequencer = (props, context) => {
   const { data, act } = useBackend(context);
   const mutations = data.storage?.occupant ?? [];
-  const {
-    isJokerReady,
-    isMonkey,
-    jokerSeconds,
-    subjectStatus,
-  } = data;
+  const { isJokerReady, isMonkey, jokerSeconds, subjectStatus } = data;
   const { sequencerMutation, jokerActive } = data.view;
-  const mutation = mutations.find(mutation => (
-    mutation.Alias === sequencerMutation
-  ));
+  const mutation = mutations.find(
+    (mutation) => mutation.Alias === sequencerMutation,
+  );
   return (
     <>
       <Stack mb={1}>
-        <Stack.Item width={mutations.length <= 8 && "154px" || "174px"}>
+        <Stack.Item width={(mutations.length <= 8 && '154px') || '174px'}>
           <Section
             title="Sequences"
             height="214px"
-            overflowY={mutations.length > 8 && "scroll"}>
-            {mutations.map(mutation => (
+            overflowY={mutations.length > 8 && 'scroll'}
+          >
+            {mutations.map((mutation) => (
               <GenomeImage
                 key={mutation.Alias}
                 url={resolveAsset(mutation.Image)}
@@ -188,69 +185,71 @@ export const DnaConsoleSequencer = (props, context) => {
                   act('check_discovery', {
                     alias: mutation.Alias,
                   });
-                }} />
+                }}
+              />
             ))}
           </Section>
         </Stack.Item>
         <Stack.Item grow={1} basis={0}>
-          <Section
-            title="Sequence Info"
-            minHeight="100%">
-            <MutationInfo
-              mutation={mutation} />
+          <Section title="Sequence Info" minHeight="100%">
+            <MutationInfo mutation={mutation} />
           </Section>
         </Stack.Item>
       </Stack>
-      {subjectStatus === SUBJECT_DEAD && (
+      {(subjectStatus === SUBJECT_DEAD && (
         <Section color="bad">
           Genetic sequence corrupted. Subject diagnostic report: DECEASED.
         </Section>
-      ) || (isMonkey && mutation?.Name !== 'Monkified') && (
-        <Section color="bad">
-          Genetic sequence corrupted. Subject diagnostic report: MONKEY.
-        </Section>
-      ) || (subjectStatus === SUBJECT_TRANSFORMING) && (
-        <Section color="bad">
-          Genetic sequence corrupted. Subject diagnostic report: TRANSFORMING.
-        </Section>
-      ) || (
-        <Section
-          title="Genome Sequencer™"
-          buttons={(
-            !isJokerReady && (
-              <Box
-                lineHeight="20px"
-                color="label">
-                Joker on cooldown ({jokerSeconds}s)
-              </Box>
-            ) || jokerActive && (
-              <>
-                <Box
-                  mr={1}
-                  inline
-                  color="label">
-                  Click on a gene to reveal it.
+      )) ||
+        (isMonkey && mutation?.Name !== 'Monkified' && (
+          <Section color="bad">
+            Genetic sequence corrupted. Subject diagnostic report: MONKEY.
+          </Section>
+        )) ||
+        (subjectStatus === SUBJECT_TRANSFORMING && (
+          <Section color="bad">
+            Genetic sequence corrupted. Subject diagnostic report: TRANSFORMING.
+          </Section>
+        )) || (
+          <Section
+            title="Genome Sequencer™"
+            buttons={
+              (!isJokerReady && (
+                <Box lineHeight="20px" color="label">
+                  Joker on cooldown ({jokerSeconds}s)
                 </Box>
+              )) ||
+              (jokerActive && (
+                <>
+                  <Box mr={1} inline color="label">
+                    Click on a gene to reveal it.
+                  </Box>
+                  <Button
+                    content="Cancel Joker"
+                    onClick={() =>
+                      act('set_view', {
+                        jokerActive: '',
+                      })
+                    }
+                  />
+                </>
+              )) || (
                 <Button
-                  content="Cancel Joker"
-                  onClick={() => act('set_view', {
-                    jokerActive: '',
-                  })} />
-              </>
-            ) || (
-              <Button
-                icon="crown"
-                color="purple"
-                content="Use Joker"
-                onClick={() => act('set_view', {
-                  jokerActive: '1',
-                })} />
-            )
-          )}>
-          <GenomeSequencer
-            mutation={mutation} />
-        </Section>
-      )}
+                  icon="crown"
+                  color="purple"
+                  content="Use Joker"
+                  onClick={() =>
+                    act('set_view', {
+                      jokerActive: '1',
+                    })
+                  }
+                />
+              )
+            }
+          >
+            <GenomeSequencer mutation={mutation} />
+          </Section>
+        )}
     </>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleStorage.js b/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleStorage.js
index 3adfde3d93eb..ee66e833e60c 100644
--- a/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleStorage.js
+++ b/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleStorage.js
@@ -1,7 +1,15 @@
 import { uniqBy } from 'common/collections';
 import { capitalize } from 'common/string';
 import { useBackend } from '../../backend';
-import { Box, Button, Collapsible, Divider, Flex, LabeledList, Section } from '../../components';
+import {
+  Box,
+  Button,
+  Collapsible,
+  Divider,
+  Flex,
+  LabeledList,
+  Section,
+} from '../../components';
 import { GeneticMakeupInfo } from './GeneticMakeupInfo';
 import { MutationInfo } from './MutationInfo';
 import {
@@ -14,42 +22,47 @@ import {
   STORAGE_MODE_DISK,
 } from './constants';
 
-
 const DnaConsoleAdvancedInjectors = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    maxAdvInjectors,
-    isInjectorReady,
-  } = data;
+  const { maxAdvInjectors, isInjectorReady } = data;
   const advInjectors = data.storage.injector ?? [];
   return (
     <Section title="Advanced Injectors">
-      {advInjectors.map(injector => (
+      {advInjectors.map((injector) => (
         <Collapsible
           key={injector.name}
           title={injector.name}
-          buttons={(
+          buttons={
             <>
               <Button
                 icon="syringe"
                 disabled={!isInjectorReady}
                 content="Print"
-                onClick={() => act('print_adv_inj', {
-                  name: injector.name,
-                })} />
+                onClick={() =>
+                  act('print_adv_inj', {
+                    name: injector.name,
+                  })
+                }
+              />
               <Button
                 ml={1}
                 color="red"
                 icon="times"
-                onClick={() => act('del_adv_inj', {
-                  name: injector.name,
-                })} />
+                onClick={() =>
+                  act('del_adv_inj', {
+                    name: injector.name,
+                  })
+                }
+              />
             </>
-          )}>
+          }
+        >
           <StorageMutations
             mutations={injector.mutations}
             customMode={`advinj${advInjectors.findIndex(
-              e => injector.name === e.name)}`} />
+              (e) => injector.name === e.name,
+            )}`}
+          />
         </Collapsible>
       ))}
       <Box mt={2}>
@@ -57,9 +70,12 @@ const DnaConsoleAdvancedInjectors = (props, context) => {
           minWidth="200px"
           content="Create new injector"
           disabled={advInjectors.length >= maxAdvInjectors}
-          onCommit={(e, value) => act('new_adv_inj', {
-            name: value,
-          })} />
+          onCommit={(e, value) =>
+            act('new_adv_inj', {
+              name: value,
+            })
+          }
+        />
       </Box>
     </Section>
   );
@@ -76,15 +92,21 @@ const StorageButtons = (props, context) => {
           <Button
             selected={storageConsSubMode === STORAGE_CONS_SUBMODE_MUTATIONS}
             content="Mutations"
-            onClick={() => act('set_view', {
-              storageConsSubMode: STORAGE_CONS_SUBMODE_MUTATIONS,
-            })} />
+            onClick={() =>
+              act('set_view', {
+                storageConsSubMode: STORAGE_CONS_SUBMODE_MUTATIONS,
+              })
+            }
+          />
           <Button
             selected={storageConsSubMode === STORAGE_CONS_SUBMODE_CHROMOSOMES}
             content="Chromosomes"
-            onClick={() => act('set_view', {
-              storageConsSubMode: STORAGE_CONS_SUBMODE_CHROMOSOMES,
-            })} />
+            onClick={() =>
+              act('set_view', {
+                storageConsSubMode: STORAGE_CONS_SUBMODE_CHROMOSOMES,
+              })
+            }
+          />
         </>
       )}
       {storageMode === STORAGE_MODE_DISK && (
@@ -92,41 +114,56 @@ const StorageButtons = (props, context) => {
           <Button
             selected={storageDiskSubMode === STORAGE_CONS_SUBMODE_MUTATIONS}
             content="Mutations"
-            onClick={() => act('set_view', {
-              storageDiskSubMode: STORAGE_CONS_SUBMODE_MUTATIONS,
-            })} />
+            onClick={() =>
+              act('set_view', {
+                storageDiskSubMode: STORAGE_CONS_SUBMODE_MUTATIONS,
+              })
+            }
+          />
           <Button
             selected={storageDiskSubMode === STORAGE_DISK_SUBMODE_ENZYMES}
             content="Enzymes"
-            onClick={() => act('set_view', {
-              storageDiskSubMode: STORAGE_DISK_SUBMODE_ENZYMES,
-            })} />
+            onClick={() =>
+              act('set_view', {
+                storageDiskSubMode: STORAGE_DISK_SUBMODE_ENZYMES,
+              })
+            }
+          />
         </>
       )}
       <Box inline mr={1} />
       <Button
         content="Console"
         selected={storageMode === STORAGE_MODE_CONSOLE}
-        onClick={() => act('set_view', {
-          storageMode: STORAGE_MODE_CONSOLE,
-          storageConsSubMode: STORAGE_CONS_SUBMODE_MUTATIONS
-            ?? storageConsSubMode,
-        })} />
+        onClick={() =>
+          act('set_view', {
+            storageMode: STORAGE_MODE_CONSOLE,
+            storageConsSubMode:
+              STORAGE_CONS_SUBMODE_MUTATIONS ?? storageConsSubMode,
+          })
+        }
+      />
       <Button
         content="Disk"
         disabled={!hasDisk}
         selected={storageMode === STORAGE_MODE_DISK}
-        onClick={() => act('set_view', {
-          storageMode: STORAGE_MODE_DISK,
-          storageDiskSubMode: STORAGE_DISK_SUBMODE_MUTATIONS
-            ?? storageDiskSubMode,
-        })} />
+        onClick={() =>
+          act('set_view', {
+            storageMode: STORAGE_MODE_DISK,
+            storageDiskSubMode:
+              STORAGE_DISK_SUBMODE_MUTATIONS ?? storageDiskSubMode,
+          })
+        }
+      />
       <Button
         content="Adv. Injector"
         selected={storageMode === STORAGE_MODE_ADVINJ}
-        onClick={() => act('set_view', {
-          storageMode: STORAGE_MODE_ADVINJ,
-        })} />
+        onClick={() =>
+          act('set_view', {
+            storageMode: STORAGE_MODE_ADVINJ,
+          })
+        }
+      />
     </>
   );
 };
@@ -134,16 +171,14 @@ const StorageButtons = (props, context) => {
 const StorageChromosomes = (props, context) => {
   const { data, act } = useBackend(context);
   const chromos = data.chromoStorage ?? [];
-  const uniqueChromos = uniqBy(chromo => chromo.Name)(chromos);
+  const uniqueChromos = uniqBy((chromo) => chromo.Name)(chromos);
   const chromoName = data.view.storageChromoName;
-  const chromo = chromos.find(chromo => chromo.Name === chromoName);
+  const chromo = chromos.find((chromo) => chromo.Name === chromoName);
   return (
     <Flex>
       <Flex.Item width="140px">
-        <Section
-          title="Console Storage"
-          level={2}>
-          {uniqueChromos.map(chromo => (
+        <Section title="Console Storage" level={2}>
+          {uniqueChromos.map((chromo) => (
             <Button
               key={chromo.Index}
               fluid
@@ -151,9 +186,12 @@ const StorageChromosomes = (props, context) => {
               color="transparent"
               selected={chromo.Name === chromoName}
               content={chromo.Name}
-              onClick={() => act('set_view', {
-                storageChromoName: chromo.Name,
-              })} />
+              onClick={() =>
+                act('set_view', {
+                  storageChromoName: chromo.Name,
+                })
+              }
+            />
           ))}
         </Section>
       </Flex.Item>
@@ -161,35 +199,28 @@ const StorageChromosomes = (props, context) => {
         <Divider vertical />
       </Flex.Item>
       <Flex.Item grow={1} basis={0}>
-        <Section
-          title="Chromosome Info"
-          level={2}>
-          {!chromo && (
-            <Box color="label">
-              Nothing to show.
-            </Box>
-          ) || (
+        <Section title="Chromosome Info" level={2}>
+          {(!chromo && <Box color="label">Nothing to show.</Box>) || (
             <>
               <LabeledList>
-                <LabeledList.Item label="Name">
-                  {chromo.Name}
-                </LabeledList.Item>
+                <LabeledList.Item label="Name">{chromo.Name}</LabeledList.Item>
                 <LabeledList.Item label="Description">
                   {chromo.Description}
                 </LabeledList.Item>
                 <LabeledList.Item label="Amount">
-                  {chromos
-                    .filter(x => x.Name === chromo.Name)
-                    .length}
+                  {chromos.filter((x) => x.Name === chromo.Name).length}
                 </LabeledList.Item>
               </LabeledList>
               <Button
                 mt={2}
                 icon="eject"
-                content={"Eject Chromosome"}
-                onClick={() => act('eject_chromo', {
-                  chromo: chromo.Name,
-                })} />
+                content={'Eject Chromosome'}
+                onClick={() =>
+                  act('eject_chromo', {
+                    chromo: chromo.Name,
+                  })
+                }
+              />
             </>
           )}
         </Section>
@@ -199,16 +230,15 @@ const StorageChromosomes = (props, context) => {
 };
 
 const StorageMutations = (props, context) => {
-  const {
-    customMode = '',
-  } = props;
+  const { customMode = '' } = props;
   const { data, act } = useBackend(context);
   const mutations = props.mutations || [];
   const mode = data.view.storageMode + customMode;
 
   let mutationRef = data.view[`storage${mode}MutationRef`];
-  let mutation = mutations
-    .find(mutation => mutation.ByondRef === mutationRef);
+  let mutation = mutations.find(
+    (mutation) => mutation.ByondRef === mutationRef,
+  );
 
   // If no mutation is selected but there are stored mutations, pick the first
   // mutation and set that as the currently showed one.
@@ -222,8 +252,9 @@ const StorageMutations = (props, context) => {
       <Flex.Item width="140px">
         <Section
           title={`${capitalize(data.view.storageMode)} Storage`}
-          level={2}>
-          {mutations.map(mutation => (
+          level={2}
+        >
+          {mutations.map((mutation) => (
             <Button
               key={mutation.ByondRef}
               fluid
@@ -231,9 +262,12 @@ const StorageMutations = (props, context) => {
               color="transparent"
               selected={mutation.ByondRef === mutationRef}
               content={mutation.Name}
-              onClick={() => act('set_view', {
-                [`storage${mode}MutationRef`]: mutation.ByondRef,
-              })} />
+              onClick={() =>
+                act('set_view', {
+                  [`storage${mode}MutationRef`]: mutation.ByondRef,
+                })
+              }
+            />
           ))}
         </Section>
       </Flex.Item>
@@ -241,11 +275,8 @@ const StorageMutations = (props, context) => {
         <Divider vertical />
       </Flex.Item>
       <Flex.Item grow={1} basis={0}>
-        <Section
-          title="Mutation Info"
-          level={2}>
-          <MutationInfo
-            mutation={mutation} />
+        <Section title="Mutation Info" level={2}>
+          <MutationInfo mutation={mutation} />
         </Section>
       </Flex.Item>
     </Flex>
@@ -258,38 +289,33 @@ export const DnaConsoleStorage = (props, context) => {
   const { diskMakeupBuffer, diskHasMakeup } = data;
   const mutations = data.storage[storageMode];
   return (
-    <Section
-      title="Storage"
-      buttons={(
-        <StorageButtons />
-      )}>
-      {storageMode === STORAGE_MODE_CONSOLE
-        && storageConsSubMode === STORAGE_CONS_SUBMODE_MUTATIONS && (
-        <StorageMutations mutations={mutations} />
-      )}
-      {storageMode === STORAGE_MODE_CONSOLE
-        && storageConsSubMode === STORAGE_CONS_SUBMODE_CHROMOSOMES && (
-        <StorageChromosomes />
-      )}
-      {storageMode === STORAGE_MODE_DISK
-        && storageDiskSubMode === STORAGE_DISK_SUBMODE_MUTATIONS && (
-        <StorageMutations mutations={mutations} />
-      )}
-      {storageMode === STORAGE_MODE_DISK
-        && storageDiskSubMode === STORAGE_DISK_SUBMODE_ENZYMES && (
-        <>
-          <GeneticMakeupInfo makeup={diskMakeupBuffer} />
-          <Button
-            icon="times"
-            color="red"
-            disabled={!diskHasMakeup}
-            content={'Delete'}
-            onClick={() => act('del_makeup_disk')} />
-        </>
-      )}
-      {storageMode === STORAGE_MODE_ADVINJ && (
-        <DnaConsoleAdvancedInjectors />
-      )}
+    <Section title="Storage" buttons={<StorageButtons />}>
+      {storageMode === STORAGE_MODE_CONSOLE &&
+        storageConsSubMode === STORAGE_CONS_SUBMODE_MUTATIONS && (
+          <StorageMutations mutations={mutations} />
+        )}
+      {storageMode === STORAGE_MODE_CONSOLE &&
+        storageConsSubMode === STORAGE_CONS_SUBMODE_CHROMOSOMES && (
+          <StorageChromosomes />
+        )}
+      {storageMode === STORAGE_MODE_DISK &&
+        storageDiskSubMode === STORAGE_DISK_SUBMODE_MUTATIONS && (
+          <StorageMutations mutations={mutations} />
+        )}
+      {storageMode === STORAGE_MODE_DISK &&
+        storageDiskSubMode === STORAGE_DISK_SUBMODE_ENZYMES && (
+          <>
+            <GeneticMakeupInfo makeup={diskMakeupBuffer} />
+            <Button
+              icon="times"
+              color="red"
+              disabled={!diskHasMakeup}
+              content={'Delete'}
+              onClick={() => act('del_makeup_disk')}
+            />
+          </>
+        )}
+      {storageMode === STORAGE_MODE_ADVINJ && <DnaConsoleAdvancedInjectors />}
     </Section>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/DnaConsole/DnaScanner.js b/tgui/packages/tgui/interfaces/DnaConsole/DnaScanner.js
index a85eca20c9c4..af04cb754b91 100644
--- a/tgui/packages/tgui/interfaces/DnaConsole/DnaScanner.js
+++ b/tgui/packages/tgui/interfaces/DnaConsole/DnaScanner.js
@@ -1,6 +1,19 @@
 import { useBackend } from '../../backend';
-import { Box, Button, Icon, LabeledList, ProgressBar, Section } from '../../components';
-import { SUBJECT_CONCIOUS, SUBJECT_DEAD, SUBJECT_SOFT_CRIT, SUBJECT_TRANSFORMING, SUBJECT_UNCONSCIOUS } from './constants';
+import {
+  Box,
+  Button,
+  Icon,
+  LabeledList,
+  ProgressBar,
+  Section,
+} from '../../components';
+import {
+  SUBJECT_CONCIOUS,
+  SUBJECT_DEAD,
+  SUBJECT_SOFT_CRIT,
+  SUBJECT_TRANSFORMING,
+  SUBJECT_UNCONSCIOUS,
+} from './constants';
 
 const DnaScannerButtons = (props, context) => {
   const { data, act } = useBackend(context);
@@ -18,7 +31,8 @@ const DnaScannerButtons = (props, context) => {
     return (
       <Button
         content="Connect Scanner"
-        onClick={() => act('connect_scanner')} />
+        onClick={() => act('connect_scanner')}
+      />
     );
   }
   return (
@@ -26,12 +40,14 @@ const DnaScannerButtons = (props, context) => {
       {!!hasDelayedAction && (
         <Button
           content="Cancel Delayed Action"
-          onClick={() => act('cancel_delay')} />
+          onClick={() => act('cancel_delay')}
+        />
       )}
       {!!isViableSubject && (
         <Button
           disabled={!isScrambleReady || isPulsing}
-          onClick={() => act('scramble_dna')}>
+          onClick={() => act('scramble_dna')}
+        >
           Scramble DNA
           {!isScrambleReady && ` (${scrambleSeconds}s)`}
         </Button>
@@ -42,11 +58,13 @@ const DnaScannerButtons = (props, context) => {
         color={scannerLocked && 'bad'}
         disabled={scannerOpen}
         content={scannerLocked ? 'Locked' : 'Unlocked'}
-        onClick={() => act('toggle_lock')} />
+        onClick={() => act('toggle_lock')}
+      />
       <Button
         disabled={scannerLocked}
         content={scannerOpen ? 'Close' : 'Open'}
-        onClick={() => act('toggle_door')} />
+        onClick={() => act('toggle_door')}
+      />
     </>
   );
 };
@@ -58,32 +76,40 @@ const SubjectStatus = (props, context) => {
   const { status } = props;
   if (status === SUBJECT_CONCIOUS) {
     return (
-      <Box inline color="good">Conscious</Box>
+      <Box inline color="good">
+        Conscious
+      </Box>
     );
   }
   if (status === SUBJECT_UNCONSCIOUS) {
     return (
-      <Box inline color="average">Unconscious</Box>
+      <Box inline color="average">
+        Unconscious
+      </Box>
     );
   }
   if (status === SUBJECT_SOFT_CRIT) {
     return (
-      <Box inline color="average">Critical</Box>
+      <Box inline color="average">
+        Critical
+      </Box>
     );
   }
   if (status === SUBJECT_DEAD) {
     return (
-      <Box inline color="bad">Dead</Box>
+      <Box inline color="bad">
+        Dead
+      </Box>
     );
   }
   if (status === SUBJECT_TRANSFORMING) {
     return (
-      <Box inline color="bad">Transforming</Box>
+      <Box inline color="bad">
+        Transforming
+      </Box>
     );
   }
-  return (
-    <Box inline>Unknown</Box>
-  );
+  return <Box inline>Unknown</Box>;
 };
 
 const DnaScannerContent = (props, context) => {
@@ -97,27 +123,16 @@ const DnaScannerContent = (props, context) => {
     subjectStatus,
   } = data;
   if (!isScannerConnected) {
-    return (
-      <Box color="bad">
-        DNA Scanner is not connected.
-      </Box>
-    );
+    return <Box color="bad">DNA Scanner is not connected.</Box>;
   }
   if (!isViableSubject) {
-    return (
-      <Box color="average">
-        No viable subject found in DNA Scanner.
-      </Box>
-    );
+    return <Box color="average">No viable subject found in DNA Scanner.</Box>;
   }
   return (
     <LabeledList>
       <LabeledList.Item label="Status">
         {subjectName}
-        <Icon
-          mx={1}
-          color="label"
-          name="long-arrow-alt-right" />
+        <Icon mx={1} color="label" name="long-arrow-alt-right" />
         <SubjectStatus status={subjectStatus} />
       </LabeledList.Item>
       <LabeledList.Item label="Health">
@@ -130,7 +145,8 @@ const DnaScannerContent = (props, context) => {
             good: [70, 101],
             average: [30, 70],
             bad: [-Infinity, 30],
-          }}>
+          }}
+        >
           {subjectHealth}%
         </ProgressBar>
       </LabeledList.Item>
@@ -144,7 +160,8 @@ const DnaScannerContent = (props, context) => {
             average: [30, 71],
             good: [0, 30],
             olive: [-Infinity, 0],
-          }}>
+          }}
+        >
           {subjectDamage}%
         </ProgressBar>
       </LabeledList.Item>
@@ -154,11 +171,7 @@ const DnaScannerContent = (props, context) => {
 
 export const DnaScanner = (props, context) => {
   return (
-    <Section
-      title="DNA Scanner"
-      buttons={(
-        <DnaScannerButtons />
-      )}>
+    <Section title="DNA Scanner" buttons={<DnaScannerButtons />}>
       <DnaScannerContent />
     </Section>
   );
diff --git a/tgui/packages/tgui/interfaces/DnaConsole/MutationInfo.js b/tgui/packages/tgui/interfaces/DnaConsole/MutationInfo.js
index 4eb93e4aa2ea..237893433735 100644
--- a/tgui/packages/tgui/interfaces/DnaConsole/MutationInfo.js
+++ b/tgui/packages/tgui/interfaces/DnaConsole/MutationInfo.js
@@ -2,7 +2,13 @@ import { filter, uniqBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { useBackend } from '../../backend';
 import { Box, Button, Divider, Dropdown, LabeledList } from '../../components';
-import { CHROMOSOME_NEVER, CHROMOSOME_NONE, CHROMOSOME_USED, MUT_COLORS, MUT_EXTRA } from './constants';
+import {
+  CHROMOSOME_NEVER,
+  CHROMOSOME_NONE,
+  CHROMOSOME_USED,
+  MUT_COLORS,
+  MUT_EXTRA,
+} from './constants';
 
 /**
  * The following predicate tests if two mutations are functionally
@@ -10,27 +16,18 @@ import { CHROMOSOME_NEVER, CHROMOSOME_NONE, CHROMOSOME_USED, MUT_COLORS, MUT_EXT
  * to prevent "true" duplicates - i.e. mutations with identical metadata.
  */
 const isSameMutation = (a, b) => {
-  return a.Alias === b.Alias
-    && a.AppliedChromo === b.AppliedChromo;
+  return a.Alias === b.Alias && a.AppliedChromo === b.AppliedChromo;
 };
 
 const ChromosomeInfo = (props, context) => {
   const { mutation, disabled } = props;
   const { data, act } = useBackend(context);
   if (mutation.CanChromo === CHROMOSOME_NEVER) {
-    return (
-      <Box color="label">
-        No compatible chromosomes
-      </Box>
-    );
+    return <Box color="label">No compatible chromosomes</Box>;
   }
   if (mutation.CanChromo === CHROMOSOME_NONE) {
     if (disabled) {
-      return (
-        <Box color="label">
-          No chromosome applied.
-        </Box>
-      );
+      return <Box color="label">No chromosome applied.</Box>;
     }
     return (
       <>
@@ -38,13 +35,18 @@ const ChromosomeInfo = (props, context) => {
           width="240px"
           options={mutation.ValidStoredChromos}
           disabled={mutation.ValidStoredChromos.length === 0}
-          selected={mutation.ValidStoredChromos.length === 0
-            ? "No Suitable Chromosomes"
-            : "Select a chromosome"}
-          onSelected={e => act('apply_chromo', {
-            chromo: e,
-            mutref: mutation.ByondRef,
-          })} />
+          selected={
+            mutation.ValidStoredChromos.length === 0
+              ? 'No Suitable Chromosomes'
+              : 'Select a chromosome'
+          }
+          onSelected={(e) =>
+            act('apply_chromo', {
+              chromo: e,
+              mutref: mutation.ByondRef,
+            })
+          }
+        />
         <Box color="label" mt={1}>
           Compatible with: {mutation.ValidChromos}
         </Box>
@@ -53,36 +55,34 @@ const ChromosomeInfo = (props, context) => {
   }
   if (mutation.CanChromo === CHROMOSOME_USED) {
     return (
-      <Box color="label">
-        Applied chromosome: {mutation.AppliedChromo}
-      </Box>
+      <Box color="label">Applied chromosome: {mutation.AppliedChromo}</Box>
     );
   }
   return null;
 };
 
 const MutationCombiner = (props, context) => {
-  const {
-    mutations = [],
-    source,
-  } = props;
+  const { mutations = [], source } = props;
   const { act, data } = useBackend(context);
 
-  const brefFromName = name => {
-    return mutations.find(mutation => mutation.Name === name)?.ByondRef;
+  const brefFromName = (name) => {
+    return mutations.find((mutation) => mutation.Name === name)?.ByondRef;
   };
 
   return (
     <Dropdown
       key={source.ByondRef}
       width="240px"
-      options={mutations.map(mutation => mutation.Name)}
+      options={mutations.map((mutation) => mutation.Name)}
       disabled={mutations.length === 0}
       selected="Combine mutations"
-      onSelected={value => act(`combine_${source.Source}`, {
-        firstref: brefFromName(value),
-        secondref: source.ByondRef,
-      })} />
+      onSelected={(value) =>
+        act(`combine_${source.Source}`, {
+          firstref: brefFromName(value),
+          secondref: source.ByondRef,
+        })
+      }
+    />
   );
 };
 
@@ -101,37 +101,30 @@ export const MutationInfo = (props, context) => {
   const mutationStorage = data.storage.console ?? [];
   const advInjectors = data.storage.injector ?? [];
   if (!mutation) {
-    return (
-      <Box color="label">
-        Nothing to show.
-      </Box>
-    );
+    return <Box color="label">Nothing to show.</Box>;
   }
   if (mutation.Source === 'occupant' && !mutation.Discovered) {
     return (
       <LabeledList>
-        <LabeledList.Item label="Name">
-          {mutation.Alias}
-        </LabeledList.Item>
+        <LabeledList.Item label="Name">{mutation.Alias}</LabeledList.Item>
       </LabeledList>
     );
   }
-  const savedToConsole = mutationStorage
-    .find(x => isSameMutation(x, mutation));
-  const savedToDisk = diskMutations
-    .find(x => isSameMutation(x, mutation));
+  const savedToConsole = mutationStorage.find((x) =>
+    isSameMutation(x, mutation),
+  );
+  const savedToDisk = diskMutations.find((x) => isSameMutation(x, mutation));
   const combinedMutations = flow([
-    uniqBy(mutation => mutation.Name),
-    filter(x => x.Name !== mutation.Name),
-  ])([
-    ...diskMutations,
-    ...mutationStorage,
-  ]);
+    uniqBy((mutation) => mutation.Name),
+    filter((x) => x.Name !== mutation.Name),
+  ])([...diskMutations, ...mutationStorage]);
   return (
     <>
       <LabeledList>
         <LabeledList.Item label="Name">
-          <Box inline color={MUT_COLORS[mutation.Quality]}>{mutation.Name}</Box>
+          <Box inline color={MUT_COLORS[mutation.Quality]}>
+            {mutation.Name}
+          </Box>
         </LabeledList.Item>
         <LabeledList.Item label="Description">
           {mutation.Description}
@@ -144,105 +137,127 @@ export const MutationInfo = (props, context) => {
       <Box>
         {mutation.Source === 'disk' && (
           <MutationCombiner
-            disabled={!hasDisk
-              || diskCapacity <= 0
-              || diskReadOnly}
+            disabled={!hasDisk || diskCapacity <= 0 || diskReadOnly}
             mutations={combinedMutations}
-            source={mutation} />
+            source={mutation}
+          />
         )}
         {mutation.Source === 'console' && (
-          <MutationCombiner
-            mutations={combinedMutations}
-            source={mutation} />
+          <MutationCombiner mutations={combinedMutations} source={mutation} />
         )}
         {['occupant', 'disk', 'console'].includes(mutation.Source) && (
           <>
             <Dropdown
               width="240px"
-              options={advInjectors.map(injector => injector.name)}
+              options={advInjectors.map((injector) => injector.name)}
               disabled={advInjectors.length === 0 || !mutation.Active}
               selected="Add to advanced injector"
-              onSelected={value => act('add_advinj_mut', {
-                mutref: mutation.ByondRef,
-                advinj: value,
-                source: mutation.Source,
-              })} />
+              onSelected={(value) =>
+                act('add_advinj_mut', {
+                  mutref: mutation.ByondRef,
+                  advinj: value,
+                  source: mutation.Source,
+                })
+              }
+            />
             <Button
               icon="syringe"
               disabled={!isInjectorReady || !mutation.Active}
               content="Print Activator"
-              onClick={() => act('print_injector', {
-                mutref: mutation.ByondRef,
-                is_activator: 1,
-                source: mutation.Source,
-              })} />
+              onClick={() =>
+                act('print_injector', {
+                  mutref: mutation.ByondRef,
+                  is_activator: 1,
+                  source: mutation.Source,
+                })
+              }
+            />
             <Button
               icon="syringe"
               disabled={!isInjectorReady || !mutation.Active}
               content="Print Mutator"
-              onClick={() => act('print_injector', {
-                mutref: mutation.ByondRef,
-                is_activator: 0,
-                source: mutation.Source,
-              })} />
+              onClick={() =>
+                act('print_injector', {
+                  mutref: mutation.ByondRef,
+                  is_activator: 0,
+                  source: mutation.Source,
+                })
+              }
+            />
             <Button
               icon="syringe"
               disabled={!mutation.Active || !isCrisprReady}
               content={`CRISPR [${crisprCharges}]`}
-              onClick={() => act('crispr', {
-                mutref: mutation.ByondRef,
-                source: mutation.Source,
-              })} />
+              onClick={() =>
+                act('crispr', {
+                  mutref: mutation.ByondRef,
+                  source: mutation.Source,
+                })
+              }
+            />
           </>
         )}
       </Box>
       {['disk', 'occupant'].includes(mutation.Source) && (
         <Button
           icon="save"
-          disabled={savedToConsole
-            || !mutation.Active}
+          disabled={savedToConsole || !mutation.Active}
           content="Save to Console"
-          onClick={() => act('save_console', {
-            mutref: mutation.ByondRef,
-            source: mutation.Source,
-          })} />
+          onClick={() =>
+            act('save_console', {
+              mutref: mutation.ByondRef,
+              source: mutation.Source,
+            })
+          }
+        />
       )}
       {['console', 'occupant'].includes(mutation.Source) && (
         <Button
           icon="save"
-          disabled={savedToDisk
-            || !hasDisk
-            || diskCapacity <= 0
-            || diskReadOnly
-            || !mutation.Active}
+          disabled={
+            savedToDisk ||
+            !hasDisk ||
+            diskCapacity <= 0 ||
+            diskReadOnly ||
+            !mutation.Active
+          }
           content="Save to Disk"
-          onClick={() => act('save_disk', {
-            mutref: mutation.ByondRef,
-            source: mutation.Source,
-          })} />
+          onClick={() =>
+            act('save_disk', {
+              mutref: mutation.ByondRef,
+              source: mutation.Source,
+            })
+          }
+        />
       )}
       {['console', 'disk', 'injector'].includes(mutation.Source) && (
         <Button
           icon="times"
           color="red"
           content={`Delete from ${mutation.Source}`}
-          onClick={() => act(`delete_${mutation.Source}_mut`, {
-            mutref: mutation.ByondRef,
-          })} />
+          onClick={() =>
+            act(`delete_${mutation.Source}_mut`, {
+              mutref: mutation.ByondRef,
+            })
+          }
+        />
       )}
-      {(mutation.Class === MUT_EXTRA || !!mutation.Scrambled
-        && mutation.Source === 'occupant')
-        && (
-          <Button
-            content="Nullify"
-            onClick={() => act('nullify', {
+      {(mutation.Class === MUT_EXTRA ||
+        (!!mutation.Scrambled && mutation.Source === 'occupant')) && (
+        <Button
+          content="Nullify"
+          onClick={() =>
+            act('nullify', {
               mutref: mutation.ByondRef,
-            })} />
-        )}
+            })
+          }
+        />
+      )}
       <Divider />
       <ChromosomeInfo
         disabled={mutation.Source !== 'occupant'}
-        mutation={mutation} />
+        mutation={mutation}
+      />
     </>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/DnaConsole/index.js b/tgui/packages/tgui/interfaces/DnaConsole/index.js
index 91d8db44ef20..699348b8b602 100644
--- a/tgui/packages/tgui/interfaces/DnaConsole/index.js
+++ b/tgui/packages/tgui/interfaces/DnaConsole/index.js
@@ -1,11 +1,24 @@
 import { useBackend } from '../../backend';
-import { Box, Button, Dimmer, Icon, LabeledList, Section } from '../../components';
+import {
+  Box,
+  Button,
+  Dimmer,
+  Icon,
+  LabeledList,
+  Section,
+} from '../../components';
 import { Window } from '../../layouts';
 import { DnaConsoleEnzymes } from './DnaConsoleEnzymes';
 import { DnaConsoleSequencer } from './DnaConsoleSequencer';
 import { DnaConsoleStorage } from './DnaConsoleStorage';
 import { DnaScanner } from './DnaScanner';
-import { CONSOLE_MODE_ENZYMES, CONSOLE_MODE_FEATURES, CONSOLE_MODE_SEQUENCER, CONSOLE_MODE_STORAGE, STORAGE_MODE_CONSOLE } from './constants';
+import {
+  CONSOLE_MODE_ENZYMES,
+  CONSOLE_MODE_FEATURES,
+  CONSOLE_MODE_SEQUENCER,
+  CONSOLE_MODE_STORAGE,
+  STORAGE_MODE_CONSOLE,
+} from './constants';
 
 const DnaConsoleCommands = (props, context) => {
   const { data, act } = useBackend(context);
@@ -14,40 +27,53 @@ const DnaConsoleCommands = (props, context) => {
   return (
     <Section
       title="DNA Console"
-      buttons={!isInjectorReady && (
-        <Box
-          lineHeight="20px"
-          color="label">
-          Injector on cooldown ({injectorSeconds}s)
-        </Box>
-      )}>
+      buttons={
+        !isInjectorReady && (
+          <Box lineHeight="20px" color="label">
+            Injector on cooldown ({injectorSeconds}s)
+          </Box>
+        )
+      }
+    >
       <LabeledList>
         <LabeledList.Item label="Mode">
           <Button
             content="Storage"
             selected={consoleMode === CONSOLE_MODE_STORAGE}
-            onClick={() => act('set_view', {
-              consoleMode: CONSOLE_MODE_STORAGE,
-            })} />
+            onClick={() =>
+              act('set_view', {
+                consoleMode: CONSOLE_MODE_STORAGE,
+              })
+            }
+          />
           <Button
             content="Sequencer"
             disabled={!data.isViableSubject}
             selected={consoleMode === CONSOLE_MODE_SEQUENCER}
-            onClick={() => act('set_view', {
-              consoleMode: CONSOLE_MODE_SEQUENCER,
-            })} />
+            onClick={() =>
+              act('set_view', {
+                consoleMode: CONSOLE_MODE_SEQUENCER,
+              })
+            }
+          />
           <Button
             content="Enzymes"
             selected={consoleMode === CONSOLE_MODE_ENZYMES}
-            onClick={() => act('set_view', {
-              consoleMode: CONSOLE_MODE_ENZYMES,
-            })} />
+            onClick={() =>
+              act('set_view', {
+                consoleMode: CONSOLE_MODE_ENZYMES,
+              })
+            }
+          />
           <Button
             content="Features"
             selected={consoleMode === CONSOLE_MODE_FEATURES}
-            onClick={() => act('set_view', {
-              consoleMode: CONSOLE_MODE_FEATURES,
-            })} />
+            onClick={() =>
+              act('set_view', {
+                consoleMode: CONSOLE_MODE_FEATURES,
+              })
+            }
+          />
         </LabeledList.Item>
         {!!hasDisk && (
           <LabeledList.Item label="Disk">
@@ -59,7 +85,8 @@ const DnaConsoleCommands = (props, context) => {
                 act('set_view', {
                   storageMode: STORAGE_MODE_CONSOLE,
                 });
-              }} />
+              }}
+            />
           </LabeledList.Item>
         )}
       </LabeledList>
@@ -69,26 +96,13 @@ const DnaConsoleCommands = (props, context) => {
 
 export const DnaConsole = (props, context) => {
   const { data, act } = useBackend(context);
-  const {
-    isPulsing,
-    timeToPulse,
-    subjectUNI,
-    subjectUF,
-  } = data;
+  const { isPulsing, timeToPulse, subjectUNI, subjectUF } = data;
   const { consoleMode } = data.view;
   return (
-    <Window
-      title="DNA Console"
-      width={539}
-      height={710}>
+    <Window title="DNA Console" width={539} height={710}>
       {!!isPulsing && (
-        <Dimmer
-          fontSize="14px"
-          textAlign="center">
-          <Icon
-            mr={1}
-            name="spinner"
-            spin />
+        <Dimmer fontSize="14px" textAlign="center">
+          <Icon mr={1} name="spinner" spin />
           Pulse in progress...
           <Box mt={1} />
           {timeToPulse}s
@@ -97,23 +111,21 @@ export const DnaConsole = (props, context) => {
       <Window.Content scrollable>
         <DnaScanner />
         <DnaConsoleCommands />
-        {consoleMode === CONSOLE_MODE_STORAGE && (
-          <DnaConsoleStorage />
-        )}
-        {consoleMode === CONSOLE_MODE_SEQUENCER && (
-          <DnaConsoleSequencer />
-        )}
+        {consoleMode === CONSOLE_MODE_STORAGE && <DnaConsoleStorage />}
+        {consoleMode === CONSOLE_MODE_SEQUENCER && <DnaConsoleSequencer />}
         {consoleMode === CONSOLE_MODE_ENZYMES && (
           <DnaConsoleEnzymes
             subjectBlock={subjectUNI}
             type="ui"
-            name="Enzymes" />
+            name="Enzymes"
+          />
         )}
         {consoleMode === CONSOLE_MODE_FEATURES && (
           <DnaConsoleEnzymes
             subjectBlock={subjectUF}
             type="uf"
-            name="Features" />
+            name="Features"
+          />
         )}
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/DnaVault.js b/tgui/packages/tgui/interfaces/DnaVault.js
index 25ac37ea3528..ddb671e86e0b 100644
--- a/tgui/packages/tgui/interfaces/DnaVault.js
+++ b/tgui/packages/tgui/interfaces/DnaVault.js
@@ -1,5 +1,12 @@
 import { useBackend } from '../backend';
-import { Box, Button, Grid, LabeledList, ProgressBar, Section } from '../components';
+import {
+  Box,
+  Button,
+  Grid,
+  LabeledList,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const DnaVault = (props, context) => {
@@ -17,27 +24,22 @@ export const DnaVault = (props, context) => {
     animals_max,
   } = data;
   return (
-    <Window
-      width={350}
-      height={400}>
+    <Window width={350} height={400}>
       <Window.Content>
         <Section title="DNA Vault Database">
           <LabeledList>
             <LabeledList.Item label="Human DNA">
-              <ProgressBar
-                value={dna / dna_max}>
+              <ProgressBar value={dna / dna_max}>
                 {dna + ' / ' + dna_max + ' Samples'}
               </ProgressBar>
             </LabeledList.Item>
             <LabeledList.Item label="Plant DNA">
-              <ProgressBar
-                value={plants / plants_max}>
+              <ProgressBar value={plants / plants_max}>
                 {plants + ' / ' + plants_max + ' Samples'}
               </ProgressBar>
             </LabeledList.Item>
             <LabeledList.Item label="Animal DNA">
-              <ProgressBar
-                value={animals / animals_max}>
+              <ProgressBar value={animals / animals_max}>
                 {animals + ' / ' + animals_max + ' Samples'}
               </ProgressBar>
             </LabeledList.Item>
@@ -45,10 +47,7 @@ export const DnaVault = (props, context) => {
         </Section>
         {!!(completed && !used) && (
           <Section title="Personal Gene Therapy">
-            <Box
-              bold
-              textAlign="center"
-              mb={1}>
+            <Box bold textAlign="center" mb={1}>
               Applicable Gene Therapy Treatments
             </Box>
             <Grid>
@@ -58,9 +57,12 @@ export const DnaVault = (props, context) => {
                   bold
                   content={choiceA}
                   textAlign="center"
-                  onClick={() => act('gene', {
-                    choice: choiceA,
-                  })} />
+                  onClick={() =>
+                    act('gene', {
+                      choice: choiceA,
+                    })
+                  }
+                />
               </Grid.Column>
               <Grid.Column>
                 <Button
@@ -68,9 +70,12 @@ export const DnaVault = (props, context) => {
                   bold
                   content={choiceB}
                   textAlign="center"
-                  onClick={() => act('gene', {
-                    choice: choiceB,
-                  })} />
+                  onClick={() =>
+                    act('gene', {
+                      choice: choiceB,
+                    })
+                  }
+                />
               </Grid.Column>
             </Grid>
           </Section>
diff --git a/tgui/packages/tgui/interfaces/DopplerArray.js b/tgui/packages/tgui/interfaces/DopplerArray.js
index d482ec78901c..32f9bb803db3 100644
--- a/tgui/packages/tgui/interfaces/DopplerArray.js
+++ b/tgui/packages/tgui/interfaces/DopplerArray.js
@@ -28,7 +28,7 @@ const DopplerArrayContent = (props, context) => {
   const [activeRecordName, setActiveRecordName] = useSharedState(
     context,
     'activeRecordrecord',
-    records[0]?.name
+    records[0]?.name,
   );
   const activeRecord = records.find((record) => {
     return record.name === activeRecordName;
@@ -55,7 +55,8 @@ const DopplerArrayContent = (props, context) => {
                 icon="file"
                 key={record.name}
                 selected={record.name === activeRecordName}
-                onClick={() => setActiveRecordName(record.name)}>
+                onClick={() => setActiveRecordName(record.name)}
+              >
                 {record.name}
               </Tabs.Tab>
             ))}
@@ -73,8 +74,9 @@ const DopplerArrayContent = (props, context) => {
                     color="bad"
                     onClick={() =>
                       act('delete_record', {
-                        'ref': activeRecord.ref,
-                      })}
+                        ref: activeRecord.ref,
+                      })
+                    }
                   />
                   <Button
                     icon="print"
@@ -84,11 +86,13 @@ const DopplerArrayContent = (props, context) => {
                     tooltipPosition="bottom"
                     onClick={() =>
                       act('print_record', {
-                        'ref': activeRecord.ref,
-                      })}
+                        ref: activeRecord.ref,
+                      })
+                    }
                   />
                 </>
-              }>
+              }
+            >
               <LabeledList>
                 <LabeledList.Item label="Timestamp">
                   {activeRecord.timestamp}
@@ -101,28 +105,28 @@ const DopplerArrayContent = (props, context) => {
                 </LabeledList.Item>
                 <LabeledList.Item label="Epicenter Radius">
                   {activeRecord.factual_epicenter_radius}
-                  {activeRecord.theory_epicenter_radius
-                    && ' (Theoretical: '
-                      + activeRecord.theory_epicenter_radius
-                      + ')'}
+                  {activeRecord.theory_epicenter_radius &&
+                    ' (Theoretical: ' +
+                      activeRecord.theory_epicenter_radius +
+                      ')'}
                 </LabeledList.Item>
                 <LabeledList.Item label="Outer Radius">
                   {activeRecord.factual_outer_radius}
-                  {activeRecord.theory_outer_radius
-                    && ' (Theoretical: ' + activeRecord.theory_outer_radius + ')'}
+                  {activeRecord.theory_outer_radius &&
+                    ' (Theoretical: ' + activeRecord.theory_outer_radius + ')'}
                 </LabeledList.Item>
                 <LabeledList.Item label="Shockwave Radius">
                   {activeRecord.factual_shockwave_radius}
-                  {activeRecord.theory_shockwave_radius
-                    && ' (Theoretical: '
-                      + activeRecord.theory_shockwave_radius
-                      + ')'}
+                  {activeRecord.theory_shockwave_radius &&
+                    ' (Theoretical: ' +
+                      activeRecord.theory_shockwave_radius +
+                      ')'}
                 </LabeledList.Item>
                 <LabeledList.Item label="Possible Cause(s)">
                   {activeRecord.reaction_results.length
                     ? activeRecord.reaction_results.map((reaction_name) => (
-                      <Box key={reaction_name}>{reaction_name}</Box>
-                    ))
+                        <Box key={reaction_name}>{reaction_name}</Box>
+                      ))
                     : 'No information available'}
                 </LabeledList.Item>
               </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/EightBallVote.js b/tgui/packages/tgui/interfaces/EightBallVote.js
index f8ce25f6f872..5170072c88a5 100644
--- a/tgui/packages/tgui/interfaces/EightBallVote.js
+++ b/tgui/packages/tgui/interfaces/EightBallVote.js
@@ -5,21 +5,13 @@ import { Window } from '../layouts';
 
 export const EightBallVote = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    shaking,
-  } = data;
+  const { shaking } = data;
   return (
-    <Window
-      width={400}
-      height={600}>
+    <Window width={400} height={600}>
       <Window.Content>
-        {!shaking && (
-          <NoticeBox>
-            No question is currently being asked.
-          </NoticeBox>
-        ) || (
-          <EightBallVoteQuestion />
-        )}
+        {(!shaking && (
+          <NoticeBox>No question is currently being asked.</NoticeBox>
+        )) || <EightBallVoteQuestion />}
       </Window.Content>
     </Window>
   );
@@ -27,21 +19,14 @@ export const EightBallVote = (props, context) => {
 
 const EightBallVoteQuestion = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    question,
-    answers = [],
-  } = data;
+  const { question, answers = [] } = data;
   return (
     <Section>
-      <Box
-        bold
-        textAlign="center"
-        fontSize="16px"
-        m={1}>
+      <Box bold textAlign="center" fontSize="16px" m={1}>
         &quot;{question}&quot;
       </Box>
       <Grid>
-        {answers.map(answer => (
+        {answers.map((answer) => (
           <Grid.Column key={answer.answer}>
             <Button
               fluid
@@ -52,13 +37,13 @@ const EightBallVoteQuestion = (props, context) => {
               lineHeight="24px"
               textAlign="center"
               mb={1}
-              onClick={() => act('vote', {
-                answer: answer.answer,
-              })} />
-            <Box
-              bold
-              textAlign="center"
-              fontSize="30px">
+              onClick={() =>
+                act('vote', {
+                  answer: answer.answer,
+                })
+              }
+            />
+            <Box bold textAlign="center" fontSize="30px">
               {answer.amount}
             </Box>
           </Grid.Column>
diff --git a/tgui/packages/tgui/interfaces/Electrolyzer.js b/tgui/packages/tgui/interfaces/Electrolyzer.js
index 7b63d2acc967..742e25dd4907 100644
--- a/tgui/packages/tgui/interfaces/Electrolyzer.js
+++ b/tgui/packages/tgui/interfaces/Electrolyzer.js
@@ -5,32 +5,31 @@ import { Window } from '../layouts';
 export const Electrolyzer = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={400}
-      height={305}>
+    <Window width={400} height={305}>
       <Window.Content>
         <Section
           title="Power"
-          buttons={(
+          buttons={
             <>
               <Button
                 icon="eject"
                 content="Eject Cell"
                 disabled={!data.hasPowercell || !data.open}
-                onClick={() => act('eject')} />
+                onClick={() => act('eject')}
+              />
               <Button
                 icon={data.on ? 'power-off' : 'times'}
                 content={data.on ? 'On' : 'Off'}
                 selected={data.on}
                 disabled={!data.hasPowercell && !data.anchored}
-                onClick={() => act('power')} />
+                onClick={() => act('power')}
+              />
             </>
-          )}>
+          }
+        >
           <LabeledList>
-            <LabeledList.Item
-              label="Cell"
-              color={!data.hasPowercell && 'bad'}>
-              {data.hasPowercell && (
+            <LabeledList.Item label="Cell" color={!data.hasPowercell && 'bad'}>
+              {(data.hasPowercell && (
                 <ProgressBar
                   value={data.powerLevel / 100}
                   content={data.powerLevel + '%'}
@@ -38,8 +37,10 @@ export const Electrolyzer = (props, context) => {
                     good: [0.6, Infinity],
                     average: [0.3, 0.6],
                     bad: [-Infinity, 0.3],
-                  }} />
-              ) || 'None'}
+                  }}
+                />
+              )) ||
+                'None'}
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/Electropack.js b/tgui/packages/tgui/interfaces/Electropack.js
index 5778048f456f..d7cfdb15b120 100644
--- a/tgui/packages/tgui/interfaces/Electropack.js
+++ b/tgui/packages/tgui/interfaces/Electropack.js
@@ -5,17 +5,9 @@ import { Window } from '../layouts';
 
 export const Electropack = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    power,
-    code,
-    frequency,
-    minFrequency,
-    maxFrequency,
-  } = data;
+  const { power, code, frequency, minFrequency, maxFrequency } = data;
   return (
-    <Window
-      width={260}
-      height={137}>
+    <Window width={260} height={137}>
       <Window.Content>
         <Section>
           <LabeledList>
@@ -24,18 +16,23 @@ export const Electropack = (props, context) => {
                 icon={power ? 'power-off' : 'times'}
                 content={power ? 'On' : 'Off'}
                 selected={power}
-                onClick={() => act('power')} />
+                onClick={() => act('power')}
+              />
             </LabeledList.Item>
             <LabeledList.Item
               label="Frequency"
-              buttons={(
+              buttons={
                 <Button
                   icon="sync"
                   content="Reset"
-                  onClick={() => act('reset', {
-                    reset: "freq",
-                  })} />
-              )}>
+                  onClick={() =>
+                    act('reset', {
+                      reset: 'freq',
+                    })
+                  }
+                />
+              }
+            >
               <NumberInput
                 animate
                 unit="kHz"
@@ -44,22 +41,29 @@ export const Electropack = (props, context) => {
                 minValue={minFrequency / 10}
                 maxValue={maxFrequency / 10}
                 value={frequency / 10}
-                format={value => toFixed(value, 1)}
+                format={(value) => toFixed(value, 1)}
                 width="80px"
-                onDrag={(e, value) => act('freq', {
-                  freq: value,
-                })} />
+                onDrag={(e, value) =>
+                  act('freq', {
+                    freq: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item
               label="Code"
-              buttons={(
+              buttons={
                 <Button
                   icon="sync"
                   content="Reset"
-                  onClick={() => act('reset', {
-                    reset: "code",
-                  })} />
-              )}>
+                  onClick={() =>
+                    act('reset', {
+                      reset: 'code',
+                    })
+                  }
+                />
+              }
+            >
               <NumberInput
                 animate
                 step={1}
@@ -68,9 +72,12 @@ export const Electropack = (props, context) => {
                 maxValue={100}
                 value={code}
                 width="80px"
-                onDrag={(e, value) => act('code', {
-                  code: value,
-                })} />
+                onDrag={(e, value) =>
+                  act('code', {
+                    code: value,
+                  })
+                }
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/EmergencyShuttleConsole.js b/tgui/packages/tgui/interfaces/EmergencyShuttleConsole.js
index a47690705837..ac6ac1897bb4 100644
--- a/tgui/packages/tgui/interfaces/EmergencyShuttleConsole.js
+++ b/tgui/packages/tgui/interfaces/EmergencyShuttleConsole.js
@@ -13,45 +13,33 @@ export const EmergencyShuttleConsole = (props, context) => {
     authorizations = [],
   } = data;
   return (
-    <Window
-      width={400}
-      height={350}>
+    <Window width={400} height={350}>
       <Window.Content>
         <Section>
-          <Box
-            bold
-            fontSize="40px"
-            textAlign="center"
-            fontFamily="monospace">
+          <Box bold fontSize="40px" textAlign="center" fontFamily="monospace">
             {timer_str}
           </Box>
-          <Box
-            textAlign="center"
-            fontSize="16px"
-            mb={1}>
-            <Box
-              inline
-              bold>
+          <Box textAlign="center" fontSize="16px" mb={1}>
+            <Box inline bold>
               ENGINES:
             </Box>
-            <Box
-              inline
-              color={engines_started ? 'good' : 'average'}
-              ml={1}>
+            <Box inline color={engines_started ? 'good' : 'average'} ml={1}>
               {engines_started ? 'Online' : 'Idle'}
             </Box>
           </Box>
           <Section
             title="Early Launch Authorization"
             level={2}
-            buttons={(
+            buttons={
               <Button
                 icon="times"
                 content="Repeal All"
                 color="bad"
                 disabled={!enabled}
-                onClick={() => act('abort')} />
-            )}>
+                onClick={() => act('abort')}
+              />
+            }
+          >
             <Grid>
               <Grid.Column>
                 <Button
@@ -60,7 +48,8 @@ export const EmergencyShuttleConsole = (props, context) => {
                   color="good"
                   content="AUTHORIZE"
                   disabled={!enabled}
-                  onClick={() => act('authorize')} />
+                  onClick={() => act('authorize')}
+                />
               </Grid.Column>
               <Grid.Column>
                 <Button
@@ -68,37 +57,33 @@ export const EmergencyShuttleConsole = (props, context) => {
                   icon="minus"
                   content="REPEAL"
                   disabled={!enabled}
-                  onClick={() => act('repeal')} />
+                  onClick={() => act('repeal')}
+                />
               </Grid.Column>
             </Grid>
             <Section
               title="Authorizations"
               level={3}
               minHeight="150px"
-              buttons={(
-                <Box
-                  inline
-                  bold
-                  color={emagged ? 'bad' : 'good'}>
+              buttons={
+                <Box inline bold color={emagged ? 'bad' : 'good'}>
                   {emagged ? 'ERROR' : 'Remaining: ' + authorizations_remaining}
                 </Box>
-              )}>
+              }
+            >
               {authorizations.length > 0 ? (
-                authorizations.map(authorization => (
+                authorizations.map((authorization) => (
                   <Box
                     key={authorization.name}
                     bold
                     fontSize="16px"
-                    className="candystripe">
+                    className="candystripe"
+                  >
                     {authorization.name} ({authorization.job})
                   </Box>
                 ))
               ) : (
-                <Box
-                  bold
-                  textAlign="center"
-                  fontSize="16px"
-                  color="average">
+                <Box bold textAlign="center" fontSize="16px" color="average">
                   No Active Authorizations
                 </Box>
               )}
diff --git a/tgui/packages/tgui/interfaces/EngravedMessage.js b/tgui/packages/tgui/interfaces/EngravedMessage.js
index 1db178346614..cdfaac644220 100644
--- a/tgui/packages/tgui/interfaces/EngravedMessage.js
+++ b/tgui/packages/tgui/interfaces/EngravedMessage.js
@@ -18,16 +18,10 @@ export const EngravedMessage = (props, context) => {
     realdate,
   } = data;
   return (
-    <Window
-      width={600}
-      height={300}>
+    <Window width={600} height={300}>
       <Window.Content scrollable>
         <Section>
-          <Box
-            bold
-            textAlign="center"
-            fontSize="20px"
-            mb={2}>
+          <Box bold textAlign="center" fontSize="20px" mb={2}>
             {decodeHtmlEntities(hidden_message)}
           </Box>
           <Stack>
@@ -35,13 +29,14 @@ export const EngravedMessage = (props, context) => {
               <Button
                 fluid
                 icon="arrow-up"
-                content={" " + num_likes}
+                content={' ' + num_likes}
                 disabled={is_creator}
                 selected={has_liked}
                 textAlign="center"
                 fontSize="16px"
                 lineHeight="24px"
-                onClick={() => act('like')} />
+                onClick={() => act('like')}
+              />
             </Stack.Item>
             <Stack.Item grow={1}>
               <Button
@@ -52,39 +47,41 @@ export const EngravedMessage = (props, context) => {
                 textAlign="center"
                 fontSize="16px"
                 lineHeight="24px"
-                onClick={() => act('neutral')} />
+                onClick={() => act('neutral')}
+              />
             </Stack.Item>
             <Stack.Item grow={1.05}>
               <Button
                 fluid
                 icon="arrow-down"
-                content={" " + num_dislikes}
+                content={' ' + num_dislikes}
                 disabled={is_creator}
                 selected={has_disliked}
                 textAlign="center"
                 fontSize="16px"
                 lineHeight="24px"
-                onClick={() => act('dislike')} />
+                onClick={() => act('dislike')}
+              />
             </Stack.Item>
           </Stack>
         </Section>
         <Section>
           <LabeledList>
-            <LabeledList.Item label="Created On">
-              {realdate}
-            </LabeledList.Item>
+            <LabeledList.Item label="Created On">{realdate}</LabeledList.Item>
           </LabeledList>
         </Section>
         {!!admin_mode && (
           <Section
             title="Admin Panel"
-            buttons={(
+            buttons={
               <Button
                 icon="times"
                 content="Delete"
                 color="bad"
-                onClick={() => act('delete')} />
-            )}>
+                onClick={() => act('delete')}
+              />
+            }
+          >
             <LabeledList>
               <LabeledList.Item label="Creator Ckey">
                 {creator_key}
diff --git a/tgui/packages/tgui/interfaces/ExodroneConsole.tsx b/tgui/packages/tgui/interfaces/ExodroneConsole.tsx
index 0297b211d7e1..e9a8bb722f60 100644
--- a/tgui/packages/tgui/interfaces/ExodroneConsole.tsx
+++ b/tgui/packages/tgui/interfaces/ExodroneConsole.tsx
@@ -1,5 +1,16 @@
 import { useBackend, useLocalState } from '../backend';
-import { BlockQuote, Box, Button, Dimmer, Icon, LabeledList, Modal, ProgressBar, Section, Stack } from '../components';
+import {
+  BlockQuote,
+  Box,
+  Button,
+  Dimmer,
+  Icon,
+  LabeledList,
+  Modal,
+  ProgressBar,
+  Section,
+  Stack,
+} from '../components';
 import { Window } from '../layouts';
 import { resolveAsset } from '../assets';
 import { formatTime } from '../format';
@@ -8,118 +19,118 @@ import nt_logo from '../assets/bg-nanotrasen.svg';
 import { Fragment } from 'inferno';
 
 type ExplorationEventData = {
-  name: string,
-  ref: string
-}
+  name: string;
+  ref: string;
+};
 
 type FullEventData = {
-  image: string,
-  description: string,
-  action_enabled: boolean,
-  action_text: string,
-  skippable: boolean,
-  ignore_text: string,
-  ref: string
-}
+  image: string;
+  description: string;
+  action_enabled: boolean;
+  action_text: string;
+  skippable: boolean;
+  ignore_text: string;
+  ref: string;
+};
 
 type ChoiceData = {
-  key: string,
-  text: string
-}
+  key: string;
+  text: string;
+};
 
 type AdventureData = {
-  description: string,
-  image: string,
-  raw_image: string,
-  choices: Array<ChoiceData>
-}
+  description: string;
+  image: string;
+  raw_image: string;
+  choices: Array<ChoiceData>;
+};
 
 type SiteData = {
-  name: string,
-  ref: string,
-  description: string,
-  coordinates: string,
-  distance: number,
-  band_info: Record<string, number>,
-  revealed: boolean,
-  point_scan_complete: boolean,
-  deep_scan_complete: boolean,
-  events: Array<ExplorationEventData>
-}
-
+  name: string;
+  ref: string;
+  description: string;
+  coordinates: string;
+  distance: number;
+  band_info: Record<string, number>;
+  revealed: boolean;
+  point_scan_complete: boolean;
+  deep_scan_complete: boolean;
+  events: Array<ExplorationEventData>;
+};
 
 enum DroneStatusEnum {
-  Idle = "idle",
-  Travel = "travel",
-  Exploration = "exploration",
-  Adventure = "adventure",
-  Busy = "busy"
+  Idle = 'idle',
+  Travel = 'travel',
+  Exploration = 'exploration',
+  Adventure = 'adventure',
+  Busy = 'busy',
 }
 
 enum CargoType {
-  Tool = "tool",
-  Cargo = "cargo",
-  Empty = "empty"
+  Tool = 'tool',
+  Cargo = 'cargo',
+  Empty = 'empty',
 }
 
 type CargoData = {
-  type: CargoType,
-  name: string
-}
+  type: CargoType;
+  name: string;
+};
 
 type DroneBasicData = {
-  name: string,
-  description: string,
-  controlled: boolean,
-  ref: string,
-}
+  name: string;
+  description: string;
+  controlled: boolean;
+  ref: string;
+};
 
 export type AdventureDataProvider = {
-  adventure_data: AdventureData,
-}
+  adventure_data: AdventureData;
+};
 
 type DroneAdventure = AdventureDataProvider & {
-  drone_status: DroneStatusEnum.Adventure,
+  drone_status: DroneStatusEnum.Adventure;
 };
 
 type DroneData = {
-  drone_name: string,
-  drone_integrity: number,
-  drone_max_integrity: number,
-  drone_travel_coefficent: number,
-  drone_log: Array<string>,
-  configurable: boolean,
-  cargo: Array<CargoData>,
-  can_travel: boolean,
-  travel_error: string,
+  drone_name: string;
+  drone_integrity: number;
+  drone_max_integrity: number;
+  drone_travel_coefficent: number;
+  drone_log: Array<string>;
+  configurable: boolean;
+  cargo: Array<CargoData>;
+  can_travel: boolean;
+  travel_error: string;
 };
 
 type DroneBusy = {
-  drone_status: DroneStatusEnum.Busy,
-  wait_time_left: number,
-  wait_message: string,
+  drone_status: DroneStatusEnum.Busy;
+  wait_time_left: number;
+  wait_message: string;
 };
 
 type DroneExploration = {
-  drone_status: DroneStatusEnum.Exploration,
-  sites: Array<SiteData>,
-  site: SiteData,
-  event?: FullEventData,
+  drone_status: DroneStatusEnum.Exploration;
+  sites: Array<SiteData>;
+  site: SiteData;
+  event?: FullEventData;
 };
 
 type DroneIdle = {
-  drone_status: DroneStatusEnum.Idle,
-  sites: Array<SiteData>,
-  site: null,
+  drone_status: DroneStatusEnum.Idle;
+  sites: Array<SiteData>;
+  site: null;
 };
 
 type DroneTravel = {
-  drone_status: DroneStatusEnum.Travel,
-  travel_time: number,
-  travel_time_left: number,
+  drone_status: DroneStatusEnum.Travel;
+  travel_time: number;
+  travel_time_left: number;
 };
 
-type ActiveDrone = DroneAdventure
+type ActiveDrone =
+  | DroneAdventure
   | DroneBusy
   | DroneExploration
   | DroneIdle
@@ -143,20 +154,19 @@ type ExodroneConsoleData = {
 );
 
 type ToolData = {
-  description: string,
-  icon: string
-}
+  description: string;
+  icon: string;
+};
 
 export const ExodroneConsole = (props, context) => {
   const { data } = useBackend<ExodroneConsoleData>(context);
-  const {
-    signal_lost,
-  } = data;
+  const { signal_lost } = data;
 
-  const [
-    choosingTools,
-    setChoosingTools,
-  ] = useLocalState(context, 'choosingTools', false);
+  const [choosingTools, setChoosingTools] = useLocalState(
+    context,
+    'choosingTools',
+    false,
+  );
 
   return (
     <Window width={750} height={600}>
@@ -178,45 +188,47 @@ const SignalLostModal = (props, context) => {
       width={30}
       height={22}
       p={0}
-      style={{ "border-radius": "5%" }}>
+      style={{ 'border-radius': '5%' }}
+    >
       <img src={nt_logo} width={64} height={64} />
       <Box
         backgroundColor="black"
         textColor="red"
         fontSize={2}
-        style={{ "border-radius": "-10%" }}>
+        style={{ 'border-radius': '-10%' }}
+      >
         CONNECTION LOST
       </Box>
       <Box p={2} italic>
-        Connection to exploration drone interrupted.
-        Please contact nearest Nanotrasen Exploration Division
-        representative for further instructions.
+        Connection to exploration drone interrupted. Please contact nearest
+        Nanotrasen Exploration Division representative for further instructions.
       </Box>
-      <Icon
-        name="exclamation-triangle"
-        textColor="black"
-        size={5} />
+      <Icon name="exclamation-triangle" textColor="black" size={5} />
       <Box>
         <Button
           content="Confirm"
           color="danger"
-          style={{ "border": "1px solid black" }}
-          onClick={() => act("confirm_signal_lost")} />
+          style={{ border: '1px solid black' }}
+          onClick={() => act('confirm_signal_lost')}
+        />
       </Box>
     </Modal>
   );
 };
 
-const DroneSelectionSection = (props: {
-  all_drones: Array<DroneBasicData>,
-}, context) => {
+const DroneSelectionSection = (
+  props: {
+    all_drones: Array<DroneBasicData>;
+  },
+  context,
+) => {
   const { act } = useBackend<ExodroneConsoleData>(context);
   const { all_drones } = props;
 
   return (
     <Section fill scrollable title="Exploration Drone Listing">
       <Stack vertical>
-        {all_drones.map(drone => (
+        {all_drones.map((drone) => (
           <Fragment key={drone.ref}>
             <Stack.Item>
               <Stack fill>
@@ -230,12 +242,13 @@ const DroneSelectionSection = (props: {
                 <Stack.Item grow />
                 <Stack.Divider mr={1} />
                 <Stack.Item ml={0}>
-                  {drone.controlled && (
-                    "Controlled by another console."
-                  ) || (
+                  {(drone.controlled && 'Controlled by another console.') || (
                     <Button
                       icon="plug"
-                      onClick={() => act("select_drone", { "drone_ref": drone.ref })}>
+                      onClick={() =>
+                        act('select_drone', { drone_ref: drone.ref })
+                      }
+                    >
                       Assume Control
                     </Button>
                   )}
@@ -250,51 +263,46 @@ const DroneSelectionSection = (props: {
   );
 };
 
-
 const ToolSelectionModal = (props, context) => {
   const { act, data } = useBackend<ExodroneConsoleData>(context);
-  const {
-    all_tools = {},
-  } = data;
+  const { all_tools = {} } = data;
 
-  const [
-    choosingTools,
-    setChoosingTools,
-  ] = useLocalState(context, 'choosingTools', false);
+  const [choosingTools, setChoosingTools] = useLocalState(
+    context,
+    'choosingTools',
+    false,
+  );
 
   const toolData = Object.keys(all_tools);
   return (
     <Modal>
       <Stack fill vertical pr={2}>
-        <Stack.Item>
-          Select Tool:
-        </Stack.Item>
+        <Stack.Item>Select Tool:</Stack.Item>
         <Stack.Item>
           <Stack textAlign="center">
-            {!!toolData && toolData.map(tool_name => (
-              <Stack.Item key={tool_name}>
-                <Button
-                  onClick={() => {
-                    setChoosingTools(false);
-                    act("add_tool", { tool_type: tool_name });
-                  }}
-                  width={6}
-                  height={6}
-                  tooltip={all_tools[tool_name].description}>
-                  <Stack vertical>
-                    <Stack.Item>
-                      {capitalize(tool_name)}
-                    </Stack.Item>
-                    <Stack.Item ml={2.5}>
-                      <Icon name={all_tools[tool_name].icon} size={3} />
-                    </Stack.Item>
-                  </Stack>
-                </Button>
-              </Stack.Item>
-            )) || (
+            {(!!toolData &&
+              toolData.map((tool_name) => (
+                <Stack.Item key={tool_name}>
+                  <Button
+                    onClick={() => {
+                      setChoosingTools(false);
+                      act('add_tool', { tool_type: tool_name });
+                    }}
+                    width={6}
+                    height={6}
+                    tooltip={all_tools[tool_name].description}
+                  >
+                    <Stack vertical>
+                      <Stack.Item>{capitalize(tool_name)}</Stack.Item>
+                      <Stack.Item ml={2.5}>
+                        <Icon name={all_tools[tool_name].icon} size={3} />
+                      </Stack.Item>
+                    </Stack>
+                  </Button>
+                </Stack.Item>
+              ))) || (
               <Stack.Item>
-                <Button
-                  content="Back" />
+                <Button content="Back" />
               </Stack.Item>
             )}
           </Stack>
@@ -304,17 +312,20 @@ const ToolSelectionModal = (props, context) => {
   );
 };
 
-const EquipmentBox = (props: {
-  cargo: CargoData,
-  drone: DroneData,
-}, context) => {
+const EquipmentBox = (
+  props: {
+    cargo: CargoData;
+    drone: DroneData;
+  },
+  context,
+) => {
   const { act, data } = useBackend<ExodroneConsoleData>(context);
   const { all_tools = {} } = data;
   const { configurable } = props.drone;
   const cargo = props.cargo;
-  const boxContents = cargo => {
+  const boxContents = (cargo) => {
     switch (cargo.type) {
-      case "tool": // Tool icon+Remove button if configurable
+      case 'tool': // Tool icon+Remove button if configurable
         return (
           <Stack direction="column">
             <Stack.Item grow>
@@ -323,28 +334,31 @@ const EquipmentBox = (props: {
                 width={4.7}
                 tooltip={capitalize(cargo.name)}
                 tooltipPosition="right"
-                color="transparent">
+                color="transparent"
+              >
                 <Icon
                   color="white"
                   name={all_tools[cargo.name].icon}
                   size={3}
                   pl={1.5}
-                  pt={2} />
+                  pt={2}
+                />
               </Button>
             </Stack.Item>
             {!!configurable && (
               <Stack.Item textAlign="right">
                 <Button
-                  onClick={() => act("remove_tool", { tool_type: cargo.name })}
+                  onClick={() => act('remove_tool', { tool_type: cargo.name })}
                   color="danger"
                   icon="minus"
                   tooltipPosition="right"
-                  tooltip="Remove Tool" />
+                  tooltip="Remove Tool"
+                />
               </Stack.Item>
             )}
           </Stack>
         );
-      case "cargo":// Jettison button.
+      case 'cargo': // Jettison button.
         return (
           <Stack direction="column">
             <Stack.Item>
@@ -354,27 +368,24 @@ const EquipmentBox = (props: {
                 width={4.7}
                 tooltip={capitalize(cargo.name)}
                 tooltipPosition="right"
-                color="transparent">
-                <Icon
-                  color="white"
-                  name="box"
-                  size={3}
-                  pl={2.2}
-                  pt={2} />
+                color="transparent"
+              >
+                <Icon color="white" name="box" size={3} pl={2.2} pt={2} />
               </Button>
             </Stack.Item>
             <Stack.Item mt={-9.4} textAlign="right">
               <Button
-                onClick={() => act("jettison", { target_ref: cargo.ref })}
+                onClick={() => act('jettison', { target_ref: cargo.ref })}
                 color="danger"
                 icon="minus"
                 tooltipPosition="right"
-                tooltip={`Jettison ${cargo.name}`} />
+                tooltip={`Jettison ${cargo.name}`}
+              />
             </Stack.Item>
           </Stack>
         );
-      case "empty":
-        return "";
+      case 'empty':
+        return '';
     }
   };
   return (
@@ -382,24 +393,26 @@ const EquipmentBox = (props: {
       width={5}
       height={5}
       style={{ border: '2px solid black' }}
-      textAlign="center">
+      textAlign="center"
+    >
       {boxContents(cargo)}
     </Box>
   );
 };
 
-const EquipmentGrid = (props: {
-  drone: ActiveDrone & DroneData,
-}, context) => {
+const EquipmentGrid = (
+  props: {
+    drone: ActiveDrone & DroneData;
+  },
+  context,
+) => {
   const { act } = useBackend<ExodroneConsoleData>(context);
-  const {
-    cargo,
-    configurable,
-  } = props.drone;
-  const [
-    choosingTools,
-    setChoosingTools,
-  ] = useLocalState(context, 'choosingTools', false);
+  const { cargo, configurable } = props.drone;
+  const [choosingTools, setChoosingTools] = useLocalState(
+    context,
+    'choosingTools',
+    false,
+  );
   return (
     <Stack vertical fill>
       <Stack.Item grow>
@@ -410,7 +423,8 @@ const EquipmentGrid = (props: {
                 fluid
                 icon="plug"
                 content="Disconnect"
-                onClick={() => act('end_control')} />
+                onClick={() => act('end_control')}
+              />
             </Stack.Item>
             <Stack.Divider />
             <Stack.Item>
@@ -419,7 +433,8 @@ const EquipmentGrid = (props: {
                 icon="bomb"
                 content="Self-Destruct"
                 color="bad"
-                onClick={() => act('self_destruct')} />
+                onClick={() => act('self_destruct')}
+              />
             </Stack.Item>
           </Stack>
         </Section>
@@ -434,16 +449,18 @@ const EquipmentGrid = (props: {
                   color="average"
                   icon="wrench"
                   content="Install Tool"
-                  onClick={() => setChoosingTools(true)} />
+                  onClick={() => setChoosingTools(true)}
+                />
               )}
             </Stack.Item>
             <Stack.Item>
               <Stack wrap="wrap" width={10}>
-                {cargo.map(cargo_element => (
+                {cargo.map((cargo_element) => (
                   <EquipmentBox
                     drone={props.drone}
                     key={cargo_element.name}
-                    cargo={cargo_element} />
+                    cargo={cargo_element}
+                  />
                 ))}
               </Stack>
             </Stack.Item>
@@ -454,14 +471,14 @@ const EquipmentGrid = (props: {
   );
 };
 
-const DroneStatus = (props: {
-  drone_integrity: number,
-  drone_max_integrity: number,
-}, context) => {
-  const {
-    drone_integrity,
-    drone_max_integrity,
-  } = props;
+const DroneStatus = (
+  props: {
+    drone_integrity: number;
+    drone_max_integrity: number;
+  },
+  context,
+) => {
+  const { drone_integrity, drone_max_integrity } = props;
 
   return (
     <Stack ml={-45}>
@@ -477,7 +494,8 @@ const DroneStatus = (props: {
             bad: [-Infinity, 0.4 * drone_max_integrity],
           }}
           value={drone_integrity}
-          maxValue={drone_max_integrity} />
+          maxValue={drone_max_integrity}
+        />
       </Stack.Item>
     </Stack>
   );
@@ -488,11 +506,7 @@ const NoSiteDimmer = () => {
     <Dimmer>
       <Stack textAlign="center" vertical>
         <Stack.Item>
-          <Icon
-            color="red"
-            name="map"
-            size={10}
-          />
+          <Icon color="red" name="map" size={10} />
         </Stack.Item>
         <Stack.Item fontSize="18px" color="red">
           No Destinations.
@@ -505,58 +519,60 @@ const NoSiteDimmer = () => {
   );
 };
 
-const TravelTargetSelectionScreen = (props: {
-  drone: (DroneExploration | DroneIdle | DroneTravel) & DroneData,
-  showCancelButton?: boolean,
-}, context) => {
+const TravelTargetSelectionScreen = (
+  props: {
+    drone: (DroneExploration | DroneIdle | DroneTravel) & DroneData;
+    showCancelButton?: boolean;
+  },
+  context,
+) => {
   // List of sites and eta travel times to each
   const { act, data } = useBackend<ExodroneConsoleData>(context);
   const { drone } = props;
   const { all_bands } = data;
-  const {
-    can_travel,
-    travel_error,
-    drone_travel_coefficent,
-  } = drone;
+  const { can_travel, travel_error, drone_travel_coefficent } = drone;
 
-  const site = ("site" in drone) ? drone.site : null;
-  const sites = ("sites" in drone) ? drone.sites : null;
+  const site = 'site' in drone ? drone.site : null;
+  const sites = 'sites' in drone ? drone.sites : null;
 
-  const travel_cost = target_site => {
+  const travel_cost = (target_site) => {
     if (site) {
-      return Math.max(Math.abs(site.distance - target_site.distance), 1)
-        * drone_travel_coefficent;
-    }
-    else {
+      return (
+        Math.max(Math.abs(site.distance - target_site.distance), 1) *
+        drone_travel_coefficent
+      );
+    } else {
       return target_site.distance * drone_travel_coefficent;
     }
   };
-  const [
-    choosingTools,
-    setChoosingTools,
-  ] = useLocalState(context, 'choosingTools', false);
-  const [
-    TravelDimmerShown,
-    setTravelDimmerShown,
-  ] = useLocalState(context, 'TravelDimmerShown', false);
-
-  const travel_to = ref => {
+  const [choosingTools, setChoosingTools] = useLocalState(
+    context,
+    'choosingTools',
+    false,
+  );
+  const [TravelDimmerShown, setTravelDimmerShown] = useLocalState(
+    context,
+    'TravelDimmerShown',
+    false,
+  );
+
+  const travel_to = (ref) => {
     setTravelDimmerShown(false);
-    act("start_travel", { "target_site": ref });
+    act('start_travel', { target_site: ref });
   };
 
-  const non_empty_bands = (dest : SiteData) => {
-    const band_check = (s: string) => dest.band_info[s] !== undefined
-      && dest.band_info[s] !== 0;
+  const non_empty_bands = (dest: SiteData) => {
+    const band_check = (s: string) =>
+      dest.band_info[s] !== undefined && dest.band_info[s] !== 0;
     return Object.keys(all_bands).filter(band_check);
   };
-  const valid_destinations = sites && sites.filter(destination => (
-    !site || destination.ref !== site.ref
-  ));
+  const valid_destinations =
+    sites &&
+    sites.filter((destination) => !site || destination.ref !== site.ref);
   return (
-    drone.drone_status === DroneStatusEnum.Travel && (
+    (drone.drone_status === DroneStatusEnum.Travel && (
       <TravelDimmer drone={drone} />
-    ) || (
+    )) || (
       <Section
         title="Travel Destinations"
         fill
@@ -568,7 +584,8 @@ const TravelTargetSelectionScreen = (props: {
                 ml={5}
                 mr={0}
                 content="Cancel"
-                onClick={() => setTravelDimmerShown(false)} />
+                onClick={() => setTravelDimmerShown(false)}
+              />
             )}
             <Box mt={props.showCancelButton && -3.5}>
               <DroneStatus
@@ -577,40 +594,43 @@ const TravelTargetSelectionScreen = (props: {
               />
             </Box>
           </>
-        }>
-        {((sites && !sites.length) && !choosingTools) && (
-          <NoSiteDimmer />
-        )}
+        }
+      >
+        {sites && !sites.length && !choosingTools && <NoSiteDimmer />}
         {site && (
           <Section
             mt={1}
             title="Home"
             buttons={
               <Box>
-                ETA: {formatTime(site.distance * drone_travel_coefficent, "short")}
+                ETA:{' '}
+                {formatTime(site.distance * drone_travel_coefficent, 'short')}
                 <Button
                   ml={1}
-                  content={can_travel ? "Launch!" : travel_error}
+                  content={can_travel ? 'Launch!' : travel_error}
                   onClick={() => travel_to(null)}
-                  disabled={!can_travel} />
+                  disabled={!can_travel}
+                />
               </Box>
             }
           />
         )}
-        {valid_destinations?.map(destination => (
+        {valid_destinations?.map((destination) => (
           <Section
             key={destination.ref}
             title={destination.name}
             buttons={
               <>
-                ETA: {formatTime(travel_cost(destination), "short")}
+                ETA: {formatTime(travel_cost(destination), 'short')}
                 <Button
                   ml={1}
-                  content={can_travel ? "Launch!" : travel_error}
+                  content={can_travel ? 'Launch!' : travel_error}
                   onClick={() => travel_to(destination.ref)}
-                  disabled={!can_travel} />
+                  disabled={!can_travel}
+                />
               </>
-            }>
+            }
+          >
             <LabeledList>
               <LabeledList.Item label="Location">
                 {destination.coordinates}
@@ -619,10 +639,8 @@ const TravelTargetSelectionScreen = (props: {
                 {destination.description}
               </LabeledList.Item>
               <LabeledList.Divider />
-              {non_empty_bands(destination).map(band => (
-                <LabeledList.Item
-                  key={band}
-                  label={band}>
+              {non_empty_bands(destination).map((band) => (
+                <LabeledList.Item key={band} label={band}>
                   {destination.band_info[band]}
                 </LabeledList.Item>
               ))}
@@ -634,20 +652,19 @@ const TravelTargetSelectionScreen = (props: {
   );
 };
 
-const TravelDimmer = (props: {
-  drone: DroneTravel,
-}, context) => {
+const TravelDimmer = (
+  props: {
+    drone: DroneTravel;
+  },
+  context,
+) => {
   const { travel_time_left } = props.drone;
   return (
     <Section fill>
       <Dimmer>
         <Stack textAlign="center" vertical>
           <Stack.Item>
-            <Icon
-              color="yellow"
-              name="route"
-              size={10}
-            />
+            <Icon color="yellow" name="route" size={10} />
           </Stack.Item>
           <Stack.Item fontSize="18px" color="yellow">
             Travel Time: {formatTime(travel_time_left)}
@@ -658,24 +675,15 @@ const TravelDimmer = (props: {
   );
 };
 
-const TimeoutScreen = (props: {
-  drone: DroneBusy,
-}) => {
-  const {
-    wait_time_left,
-    wait_message,
-  } = props.drone;
+const TimeoutScreen = (props: { drone: DroneBusy }) => {
+  const { wait_time_left, wait_message } = props.drone;
 
   return (
     <Section fill>
       <Dimmer>
         <Stack textAlign="center" vertical>
           <Stack.Item>
-            <Icon
-              color="green"
-              name="cog"
-              size={10}
-            />
+            <Icon color="green" name="cog" size={10} />
           </Stack.Item>
           <Stack.Item fontSize="18px" color="green">
             {wait_message} ({formatTime(wait_time_left)})
@@ -686,23 +694,24 @@ const TimeoutScreen = (props: {
   );
 };
 
-const ExplorationScreen = (props: {
-  drone: DroneExploration & DroneData,
-}, context) => {
+const ExplorationScreen = (
+  props: {
+    drone: DroneExploration & DroneData;
+  },
+  context,
+) => {
   const { act } = useBackend(context);
   const { drone } = props;
   const { site } = drone;
 
-  const [
-    TravelDimmerShown,
-    setTravelDimmerShown,
-  ] = useLocalState(context, 'TravelDimmerShown', false);
+  const [TravelDimmerShown, setTravelDimmerShown] = useLocalState(
+    context,
+    'TravelDimmerShown',
+    false,
+  );
 
   if (TravelDimmerShown) {
-    return (<TravelTargetSelectionScreen
-      drone={drone}
-      showCancelButton
-    />);
+    return <TravelTargetSelectionScreen drone={drone} showCancelButton />;
   }
   return (
     <Section
@@ -713,43 +722,46 @@ const ExplorationScreen = (props: {
           drone_integrity={drone.drone_integrity}
           drone_max_integrity={drone.drone_max_integrity}
         />
-      }>
+      }
+    >
       <Stack vertical fill>
         <Stack.Item grow>
           <LabeledList>
             <LabeledList.Item label="Site">{site.name}</LabeledList.Item>
-            <LabeledList.Item label="Location">{site.coordinates}</LabeledList.Item>
-            <LabeledList.Item label="Description">{site.description}</LabeledList.Item>
+            <LabeledList.Item label="Location">
+              {site.coordinates}
+            </LabeledList.Item>
+            <LabeledList.Item label="Description">
+              {site.description}
+            </LabeledList.Item>
           </LabeledList>
         </Stack.Item>
         <Stack.Item align="center" grow>
-          <Button
-            content="Explore!"
-            onClick={() => act("explore")} />
+          <Button content="Explore!" onClick={() => act('explore')} />
         </Stack.Item>
-        {site.events.map(e => (
-          <Stack.Item
-            align="center"
-            key={site.ref}
-            grow>
+        {site.events.map((e) => (
+          <Stack.Item align="center" key={site.ref} grow>
             <Button
               content={capitalize(e.name)}
-              onClick={() => act("explore_event", { target_event: e.ref })} />
-          </Stack.Item>))}
+              onClick={() => act('explore_event', { target_event: e.ref })}
+            />
+          </Stack.Item>
+        ))}
         <Stack.Item align="center" grow>
-          <Button
-            content="Travel"
-            onClick={() => setTravelDimmerShown(true)} />
+          <Button content="Travel" onClick={() => setTravelDimmerShown(true)} />
         </Stack.Item>
       </Stack>
     </Section>
   );
 };
 
-const EventScreen = (props: {
-  drone: DroneData,
-  event: FullEventData,
-}, context) => {
+const EventScreen = (
+  props: {
+    drone: DroneData;
+    event: FullEventData;
+  },
+  context,
+) => {
   const { act } = useBackend(context);
   const { drone, event } = props;
 
@@ -762,40 +774,43 @@ const EventScreen = (props: {
           drone_integrity={drone.drone_integrity}
           drone_max_integrity={drone.drone_max_integrity}
         />
-      }>
+      }
+    >
       <Stack vertical fill textAlign="center">
         <Stack.Item>
           <Stack fill>
             <Stack.Item>
-              <img src={resolveAsset(event.image)}
+              <img
+                src={resolveAsset(event.image)}
                 height="125px"
                 width="250px"
                 style={{
                   '-ms-interpolation-mode': 'nearest-neighbor',
-                }} />
+                }}
+              />
             </Stack.Item>
-            <Stack.Item >
-              <BlockQuote preserveWhitespace>
-                {event.description}
-              </BlockQuote>
+            <Stack.Item>
+              <BlockQuote preserveWhitespace>{event.description}</BlockQuote>
             </Stack.Item>
           </Stack>
         </Stack.Item>
         <Stack.Divider />
         <Stack.Item grow>
-          <Stack vertical fill >
+          <Stack vertical fill>
             <Stack.Item grow />
             <Stack.Item grow>
               <Button
                 content={event.action_text}
                 disabled={!event.action_enabled}
-                onClick={() => act("start_event")} />
+                onClick={() => act('start_event')}
+              />
             </Stack.Item>
             {!!event.skippable && (
               <Stack.Item mt={2}>
                 <Button
                   content={event.ignore_text}
-                  onClick={() => act("skip_event")} />
+                  onClick={() => act('skip_event')}
+                />
               </Stack.Item>
             )}
             <Stack.Item grow />
@@ -806,28 +821,32 @@ const EventScreen = (props: {
   );
 };
 
-export const AdventureScreen = (props: {
-  adventure_data: AdventureData,
-  drone_integrity: number,
-  drone_max_integrity: number,
-  hide_status?: boolean,
-}, context) => {
+export const AdventureScreen = (
+  props: {
+    adventure_data: AdventureData;
+    drone_integrity: number;
+    drone_max_integrity: number;
+    hide_status?: boolean;
+  },
+  context,
+) => {
   const { act } = useBackend(context);
-  const {
-    adventure_data,
-    drone_integrity,
-    drone_max_integrity,
-  } = props;
+  const { adventure_data, drone_integrity, drone_max_integrity } = props;
   const rawData = adventure_data.raw_image;
   const imgSource = rawData ? rawData : resolveAsset(adventure_data.image);
   return (
     <Section
       fill
       title="Exploration"
-      buttons={!props.hide_status && <DroneStatus
-        drone_integrity={drone_integrity}
-        drone_max_integrity={drone_max_integrity}
-      />}>
+      buttons={
+        !props.hide_status && (
+          <DroneStatus
+            drone_integrity={drone_integrity}
+            drone_max_integrity={drone_max_integrity}
+          />
+        )
+      }
+    >
       <Stack>
         <Stack.Item>
           <BlockQuote preserveWhitespace>
@@ -842,19 +861,24 @@ export const AdventureScreen = (props: {
             width="200px"
             style={{
               '-ms-interpolation-mode': 'nearest-neighbor',
-            }} />
+            }}
+          />
           <Stack vertical>
             <Stack.Divider />
             <Stack.Item grow />
-            {!!adventure_data.choices && adventure_data.choices.map(choice => (
-              <Stack.Item key={choice.key}>
-                <Button
-                  fluid
-                  content={choice.text}
-                  textAlign="center"
-                  onClick={() => act('adventure_choice', { choice: choice.key })} />
-              </Stack.Item>
-            ))}
+            {!!adventure_data.choices &&
+              adventure_data.choices.map((choice) => (
+                <Stack.Item key={choice.key}>
+                  <Button
+                    fluid
+                    content={choice.text}
+                    textAlign="center"
+                    onClick={() =>
+                      act('adventure_choice', { choice: choice.key })
+                    }
+                  />
+                </Stack.Item>
+              ))}
             <Stack.Item grow />
           </Stack>
         </Stack.Item>
@@ -863,9 +887,7 @@ export const AdventureScreen = (props: {
   );
 };
 
-const DroneScreen = (props: {
-  drone: ActiveDrone & DroneData,
-}) => {
+const DroneScreen = (props: { drone: ActiveDrone & DroneData }) => {
   const { drone } = props;
 
   switch (drone.drone_status) {
@@ -875,16 +897,17 @@ const DroneScreen = (props: {
     case DroneStatusEnum.Travel:
       return <TravelTargetSelectionScreen drone={drone} />;
     case DroneStatusEnum.Adventure:
-      return (<AdventureScreen
-        adventure_data={drone.adventure_data}
-        drone_integrity={drone.drone_integrity}
-        drone_max_integrity={drone.drone_max_integrity}
-      />);
+      return (
+        <AdventureScreen
+          adventure_data={drone.adventure_data}
+          drone_integrity={drone.drone_integrity}
+          drone_max_integrity={drone.drone_max_integrity}
+        />
+      );
     case DroneStatusEnum.Exploration:
       if (drone.event) {
         return <EventScreen drone={drone} event={drone.event} />;
-      }
-      else {
+      } else {
         return <ExplorationScreen drone={drone} />;
       }
   }
diff --git a/tgui/packages/tgui/interfaces/ExoscannerConsole.tsx b/tgui/packages/tgui/interfaces/ExoscannerConsole.tsx
index 039af0b3326a..b65d03abca46 100644
--- a/tgui/packages/tgui/interfaces/ExoscannerConsole.tsx
+++ b/tgui/packages/tgui/interfaces/ExoscannerConsole.tsx
@@ -1,26 +1,35 @@
 import { useBackend } from '../backend';
-import { BlockQuote, Box, Button, Icon, Modal, Section, LabeledList, NoticeBox, Stack } from '../components';
+import {
+  BlockQuote,
+  Box,
+  Button,
+  Icon,
+  Modal,
+  Section,
+  LabeledList,
+  NoticeBox,
+  Stack,
+} from '../components';
 import { Window } from '../layouts';
 import { formatTime } from '../format';
 
-
 type SiteData = {
-  name: string,
-  ref: string,
-  description: string,
-  distance: number,
-  band_info: Record<string, string>,
-  revealed: boolean,
-}
+  name: string;
+  ref: string;
+  description: string;
+  distance: number;
+  band_info: Record<string, string>;
+  revealed: boolean;
+};
 
 type ScanData = {
-  scan_power: number,
-  point_scan_eta: number,
-  deep_scan_eta: number,
-  point_scan_complete: boolean,
-  deep_scan_complete: boolean
-  site_data: SiteData
-}
+  scan_power: number;
+  point_scan_eta: number;
+  deep_scan_eta: number;
+  point_scan_complete: boolean;
+  deep_scan_complete: boolean;
+  site_data: SiteData;
+};
 
 const ScanFailedModal = (_, context) => {
   const { act } = useBackend(context);
@@ -31,12 +40,11 @@ const ScanFailedModal = (_, context) => {
           <Box color="bad">SCAN FAILURE!</Box>
         </Stack.Item>
         <Stack.Item>
-          <Button
-            content="Confirm"
-            onClick={() => act("confirm_fail")} />
+          <Button content="Confirm" onClick={() => act('confirm_fail')} />
         </Stack.Item>
       </Stack>
-    </Modal>);
+    </Modal>
+  );
 };
 
 const ScanSelectionSection = (_, context) => {
@@ -51,8 +59,8 @@ const ScanSelectionSection = (_, context) => {
   } = data;
   const site = site_data;
 
-  const point_cost = scan_power > 0 ? formatTime(point_scan_eta, "short") : "∞";
-  const deep_cost = scan_power > 0 ? formatTime(deep_scan_eta, "short") : "∞";
+  const point_cost = scan_power > 0 ? formatTime(point_scan_eta, 'short') : '∞';
+  const deep_cost = scan_power > 0 ? formatTime(deep_scan_eta, 'short') : '∞';
   const scan_available = !point_scan_complete || !deep_scan_complete;
   return (
     <Stack vertical fill>
@@ -63,21 +71,23 @@ const ScanSelectionSection = (_, context) => {
           buttons={
             <Button
               content="Back"
-              onClick={() => act("select_site", { "site_ref": null })} />
-          }>
+              onClick={() => act('select_site', { site_ref: null })}
+            />
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Name">{site.name}</LabeledList.Item>
             <LabeledList.Item label="Description">
-              {site.revealed ? site.description : "No Data"}
+              {site.revealed ? site.description : 'No Data'}
+            </LabeledList.Item>
+            <LabeledList.Item label="Distance">
+              {site.distance}
             </LabeledList.Item>
-            <LabeledList.Item label="Distance">{site.distance}</LabeledList.Item>
             <LabeledList.Divider />
             <LabeledList.Item label="Spectrography Data" />
             <LabeledList.Divider />
-            {Object.keys(site.band_info).map(band => (
-              <LabeledList.Item
-                key={band}
-                label={band}>
+            {Object.keys(site.band_info).map((band) => (
+              <LabeledList.Item key={band} label={band}>
                 {site.band_info[band]}
               </LabeledList.Item>
             ))}
@@ -90,17 +100,16 @@ const ScanSelectionSection = (_, context) => {
             {!point_scan_complete && (
               <Section title="Point Scan">
                 <BlockQuote>
-                  Point scan performs rudimentary scan of
-                  the site, revealing its general characteristics.
+                  Point scan performs rudimentary scan of the site, revealing
+                  its general characteristics.
                 </BlockQuote>
                 <Box>
                   <Button
                     content="Scan"
                     disabled={scan_power <= 0}
-                    onClick={() => act("start_point_scan")} />
-                  <Box
-                    inline
-                    pl={3}>
+                    onClick={() => act('start_point_scan')}
+                  />
+                  <Box inline pl={3}>
                     Estimated Time: {point_cost}.
                   </Box>
                 </Box>
@@ -109,17 +118,16 @@ const ScanSelectionSection = (_, context) => {
             {!deep_scan_complete && (
               <Section title="Deep Scan">
                 <BlockQuote>
-                  Deep scan performs full scan
-                  of the site, revealing all details.
+                  Deep scan performs full scan of the site, revealing all
+                  details.
                 </BlockQuote>
                 <Box>
                   <Button
                     content="Scan"
                     disabled={scan_power <= 0}
-                    onClick={() => act("start_deep_scan")} />
-                  <Box
-                    inline
-                    pl={3}>
+                    onClick={() => act('start_deep_scan')}
+                  />
+                  <Box inline pl={3}>
                     Estimated Time: {deep_cost}.
                   </Box>
                 </Box>
@@ -133,59 +141,51 @@ const ScanSelectionSection = (_, context) => {
 };
 
 type ScanInProgressData = {
-  scan_time: number,
-  scan_power: number,
-  scan_description: string,
-}
+  scan_time: number;
+  scan_power: number;
+  scan_description: string;
+};
 
 const ScanInProgressModal = (_, context) => {
   const { act, data } = useBackend<ScanInProgressData>(context);
-  const {
-    scan_time,
-    scan_power,
-    scan_description,
-  } = data;
+  const { scan_time, scan_power, scan_description } = data;
 
   return (
     <Modal ml={1}>
       <NoticeBox>Scan in Progress!</NoticeBox>
       <Box color="danger" />
       <LabeledList>
-        <LabeledList.Item
-          label="Scan summary">
+        <LabeledList.Item label="Scan summary">
           {scan_description}
         </LabeledList.Item>
-        <LabeledList.Item
-          label="Time left">
+        <LabeledList.Item label="Time left">
           {formatTime(scan_time)}
         </LabeledList.Item>
-        <LabeledList.Item
-          label="Scanning array power">
+        <LabeledList.Item label="Scanning array power">
           {scan_power}
         </LabeledList.Item>
-        <LabeledList.Item
-          label="Emergency Stop">
+        <LabeledList.Item label="Emergency Stop">
           <Button.Confirm
             content="STOP SCAN"
             color="red"
             icon="times"
-            onClick={() => act("stop_scan")} />
+            onClick={() => act('stop_scan')}
+          />
         </LabeledList.Item>
       </LabeledList>
     </Modal>
   );
 };
 
-
 type ExoscannerConsoleData = {
-  scan_in_progress: boolean,
-  scan_power: number,
-  possible_sites: Array<SiteData>,
-  wide_scan_eta: number,
-  selected_site: string,
-  failed: boolean,
-  scan_conditions: Array<string>,
-}
+  scan_in_progress: boolean;
+  scan_power: number;
+  possible_sites: Array<SiteData>;
+  wide_scan_eta: number;
+  selected_site: string;
+  failed: boolean;
+  scan_conditions: Array<string>;
+};
 
 export const ExoscannerConsole = (_, context) => {
   const { act, data } = useBackend<ExoscannerConsoleData>(context);
@@ -203,38 +203,32 @@ export const ExoscannerConsole = (_, context) => {
 
   return (
     <Window width={550} height={600}>
-      {!!scan_in_progress && (
-        <ScanInProgressModal />
-      )}
-      {!!failed && (
-        <ScanFailedModal />
-      )}
+      {!!scan_in_progress && <ScanInProgressModal />}
+      {!!failed && <ScanFailedModal />}
       <Window.Content>
         <Stack vertical fill>
           <Stack.Item>
             <Section fill title="Available array power">
               <Stack>
                 <Stack.Item grow>
-                  {scan_power > 0 && (
+                  {(scan_power > 0 && (
                     <>
-                      <Box pr={1} inline fontSize={2}>{scan_power}</Box>
-                      <Icon
-                        name="satellite-dish"
-                        size={3} />
+                      <Box pr={1} inline fontSize={2}>
+                        {scan_power}
+                      </Box>
+                      <Icon name="satellite-dish" size={3} />
                     </>
-                  ) || (
-                    "No properly configured scanner arrays detected."
-                  )}
+                  )) ||
+                    'No properly configured scanner arrays detected.'}
                 </Stack.Item>
               </Stack>
               <Section title="Special Scan Condtions">
-                {scan_conditions && scan_conditions.map(condition => (
-                  <NoticeBox
-                    key={condition}
-                    warning>
-                    {condition}
-                  </NoticeBox>
-                ))}
+                {scan_conditions &&
+                  scan_conditions.map((condition) => (
+                    <NoticeBox key={condition} warning>
+                      {condition}
+                    </NoticeBox>
+                  ))}
               </Section>
             </Section>
           </Stack.Item>
@@ -251,21 +245,26 @@ export const ExoscannerConsole = (_, context) => {
                     <Button
                       icon="search"
                       disabled={!can_start_wide_scan}
-                      onClick={() => act('start_wide_scan')}>
+                      onClick={() => act('start_wide_scan')}
+                    >
                       Scan
                     </Button>
                   }
                   fill
-                  title="Configure Wide Scan">
+                  title="Configure Wide Scan"
+                >
                   <Stack>
                     <Stack.Item>
                       <BlockQuote>
-                        Broad spectrum scan looking for
-                        anything not matching known start charts.
+                        Broad spectrum scan looking for anything not matching
+                        known start charts.
                       </BlockQuote>
                     </Stack.Item>
                     <Stack.Item>
-                      Cost estimate: {scan_power > 0 ? formatTime(wide_scan_eta, "short") : "∞ minutes"}
+                      Cost estimate:{' '}
+                      {scan_power > 0
+                        ? formatTime(wide_scan_eta, 'short')
+                        : '∞ minutes'}
                     </Stack.Item>
                   </Stack>
                 </Section>
@@ -278,15 +277,20 @@ export const ExoscannerConsole = (_, context) => {
                   buttons={
                     <Button
                       content="View Experiments"
-                      onClick={() => act("open_experiments")}
-                      icon="tasks" />
-                  }>
+                      onClick={() => act('open_experiments')}
+                      icon="tasks"
+                    />
+                  }
+                >
                   <Stack vertical>
-                    {possible_sites.map(site => (
+                    {possible_sites.map((site) => (
                       <Stack.Item key={site.ref}>
                         <Button
                           content={site.name}
-                          onClick={() => act("select_site", { "site_ref": site.ref })} />
+                          onClick={() =>
+                            act('select_site', { site_ref: site.ref })
+                          }
+                        />
                       </Stack.Item>
                     ))}
                   </Stack>
diff --git a/tgui/packages/tgui/interfaces/ExosuitControlConsole.js b/tgui/packages/tgui/interfaces/ExosuitControlConsole.js
index 8ca786f8180a..9a1d602abf3e 100644
--- a/tgui/packages/tgui/interfaces/ExosuitControlConsole.js
+++ b/tgui/packages/tgui/interfaces/ExosuitControlConsole.js
@@ -1,87 +1,94 @@
 import { toFixed } from 'common/math';
 import { useBackend } from '../backend';
-import { AnimatedNumber, Box, Button, LabeledList, NoticeBox, Section } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  LabeledList,
+  NoticeBox,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const ExosuitControlConsole = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    mechs = [],
-  } = data;
+  const { mechs = [] } = data;
   return (
-    <Window
-      width={500}
-      height={500}>
+    <Window width={500} height={500}>
       <Window.Content scrollable>
-        {mechs.length === 0 && (
-          <NoticeBox>
-            No exosuits detected
-          </NoticeBox>
-        )}
-        {mechs.map(mech => (
+        {mechs.length === 0 && <NoticeBox>No exosuits detected</NoticeBox>}
+        {mechs.map((mech) => (
           <Section
             key={mech.tracker_ref}
             title={mech.name}
-            buttons={(
+            buttons={
               <>
                 <Button
                   icon="envelope"
                   content="Message"
                   disabled={!mech.pilot}
-                  onClick={() => act('send_message', {
-                    tracker_ref: mech.tracker_ref,
-                  })} />
+                  onClick={() =>
+                    act('send_message', {
+                      tracker_ref: mech.tracker_ref,
+                    })
+                  }
+                />
                 <Button
                   icon="wifi"
-                  content={mech.emp_recharging
-                    ? 'Recharging...'
-                    : 'EMP Burst'}
+                  content={mech.emp_recharging ? 'Recharging...' : 'EMP Burst'}
                   color="bad"
                   disabled={mech.emp_recharging}
-                  onClick={() => act('shock', {
-                    tracker_ref: mech.tracker_ref,
-                  })} />
+                  onClick={() =>
+                    act('shock', {
+                      tracker_ref: mech.tracker_ref,
+                    })
+                  }
+                />
               </>
-            )}>
+            }
+          >
             <LabeledList>
               <LabeledList.Item label="Integrity">
                 <Box
-                  color={(
-                    mech.integrity <= 30 && 'bad'
-                    || mech.integrity <= 70 && 'average'
-                    || 'good'
-                  )}>
+                  color={
+                    (mech.integrity <= 30 && 'bad') ||
+                    (mech.integrity <= 70 && 'average') ||
+                    'good'
+                  }
+                >
                   {mech.integrity}%
                 </Box>
               </LabeledList.Item>
               <LabeledList.Item label="Charge">
                 <Box
-                  color={(
-                    mech.charge <= 30 && 'bad'
-                    || mech.charge <= 70 && 'average'
-                    || 'good'
-                  )}>
-                  {typeof mech.charge === 'number'
-                    && mech.charge + '%'
-                    || 'Not Found'}
+                  color={
+                    (mech.charge <= 30 && 'bad') ||
+                    (mech.charge <= 70 && 'average') ||
+                    'good'
+                  }
+                >
+                  {(typeof mech.charge === 'number' && mech.charge + '%') ||
+                    'Not Found'}
                 </Box>
               </LabeledList.Item>
               <LabeledList.Item label="Airtank">
-                {typeof mech.airtank === 'number' && (
+                {(typeof mech.airtank === 'number' && (
                   <AnimatedNumber
                     value={mech.airtank}
-                    format={value => toFixed(value, 2) + ' kPa'} />
-                ) || 'Not Equipped'}
+                    format={(value) => toFixed(value, 2) + ' kPa'}
+                  />
+                )) ||
+                  'Not Equipped'}
               </LabeledList.Item>
               <LabeledList.Item label="Pilot">
-                {mech.pilot.length > 0 && (
-                  mech.pilot.map(pilot => (
-                    <Box
-                      key={pilot}
-                      inline>
-                      {pilot}{mech.pilot.length > 1 ? '|' : ''}
+                {(mech.pilot.length > 0 &&
+                  mech.pilot.map((pilot) => (
+                    <Box key={pilot} inline>
+                      {pilot}
+                      {mech.pilot.length > 1 ? '|' : ''}
                     </Box>
-                  ))) || 'None'}
+                  ))) ||
+                  'None'}
               </LabeledList.Item>
               <LabeledList.Item label="Location">
                 {mech.location || 'Unknown'}
@@ -89,11 +96,12 @@ export const ExosuitControlConsole = (props, context) => {
               {mech.cargo_space >= 0 && (
                 <LabeledList.Item label="Used Cargo Space">
                   <Box
-                    color={(
-                      mech.cargo_space <= 30 && 'good'
-                      || mech.cargo_space <= 70 && 'average'
-                      || 'bad'
-                    )}>
+                    color={
+                      (mech.cargo_space <= 30 && 'good') ||
+                      (mech.cargo_space <= 70 && 'average') ||
+                      'bad'
+                    }
+                  >
                     {mech.cargo_space}%
                   </Box>
                 </LabeledList.Item>
diff --git a/tgui/packages/tgui/interfaces/ExosuitFabricator.js b/tgui/packages/tgui/interfaces/ExosuitFabricator.js
index cc2a685b566c..c3202416d8a7 100644
--- a/tgui/packages/tgui/interfaces/ExosuitFabricator.js
+++ b/tgui/packages/tgui/interfaces/ExosuitFabricator.js
@@ -2,8 +2,20 @@ import { uniqBy } from 'common/collections';
 import { createSearch } from 'common/string';
 import { Fragment } from 'inferno';
 import { useBackend, useSharedState } from '../backend';
-import { Box, Button, Icon, Input, ProgressBar, Section, Stack } from '../components';
-import { Materials, MaterialAmount, MaterialFormatting } from './common/Materials';
+import {
+  Box,
+  Button,
+  Icon,
+  Input,
+  ProgressBar,
+  Section,
+  Stack,
+} from '../components';
+import {
+  Materials,
+  MaterialAmount,
+  MaterialFormatting,
+} from './common/Materials';
 import { formatMoney } from '../format';
 import { Window } from '../layouts';
 
@@ -13,22 +25,23 @@ const COLOR_BAD = 2;
 
 const COLOR_KEYS = {
   [COLOR_NONE]: false,
-  [COLOR_AVERAGE]: "average",
-  [COLOR_BAD]: "bad",
+  [COLOR_AVERAGE]: 'average',
+  [COLOR_BAD]: 'bad',
 };
 
-const materialArrayToObj = materials => {
+const materialArrayToObj = (materials) => {
   let materialObj = {};
 
-  materials.forEach(m => {
-    materialObj[m.name] = m.amount; });
+  materials.forEach((m) => {
+    materialObj[m.name] = m.amount;
+  });
 
   return materialObj;
 };
 
 const partBuildColor = (cost, tally, material) => {
   if (cost > material) {
-    return { color: COLOR_BAD, deficit: (cost - material) };
+    return { color: COLOR_BAD, deficit: cost - material };
   }
 
   if (tally > material) {
@@ -36,20 +49,20 @@ const partBuildColor = (cost, tally, material) => {
   }
 
   if (cost + tally > material) {
-    return { color: COLOR_AVERAGE, deficit: ((cost + tally) - material) };
+    return { color: COLOR_AVERAGE, deficit: cost + tally - material };
   }
 
   return { color: COLOR_NONE, deficit: 0 };
 };
 
 const partCondFormat = (materials, tally, part) => {
-  let format = { "textColor": COLOR_NONE };
+  let format = { textColor: COLOR_NONE };
 
-  Object.keys(part.cost).forEach(mat => {
+  Object.keys(part.cost).forEach((mat) => {
     format[mat] = partBuildColor(part.cost[mat], tally[mat], materials[mat]);
 
-    if (format[mat].color > format["textColor"]) {
-      format["textColor"] = format[mat].color;
+    if (format[mat].color > format['textColor']) {
+      format['textColor'] = format[mat].color;
     }
   });
 
@@ -64,20 +77,21 @@ const queueCondFormat = (materials, queue) => {
 
   queue.forEach((part, i) => {
     textColors[i] = COLOR_NONE;
-    Object.keys(part.cost).forEach(mat => {
+    Object.keys(part.cost).forEach((mat) => {
       materialTally[mat] = materialTally[mat] || 0;
       missingMatTally[mat] = missingMatTally[mat] || 0;
 
       matFormat[mat] = partBuildColor(
-        part.cost[mat], materialTally[mat], materials[mat]
+        part.cost[mat],
+        materialTally[mat],
+        materials[mat],
       );
 
       if (matFormat[mat].color !== COLOR_NONE) {
         if (textColors[i] < matFormat[mat].color) {
           textColors[i] = matFormat[mat].color;
         }
-      }
-      else {
+      } else {
         materialTally[mat] += part.cost[mat];
       }
 
@@ -91,20 +105,17 @@ const searchFilter = (search, allparts) => {
   if (!search.length) {
     return;
   }
-  const resultFilter = createSearch(search, part => (
-    (part.name || "")
-    + (part.desc || "")
-    + (part.searchMeta || "")
-  ));
+  const resultFilter = createSearch(
+    search,
+    (part) => (part.name || '') + (part.desc || '') + (part.searchMeta || ''),
+  );
   let searchResults = [];
-  Object.keys(allparts).forEach(category => {
-    allparts[category]
-      .filter(resultFilter)
-      .forEach(e => {
-        searchResults.push(e);
-      });
+  Object.keys(allparts).forEach((category) => {
+    allparts[category].filter(resultFilter).forEach((e) => {
+      searchResults.push(e);
+    });
   });
-  searchResults = uniqBy(part => part.name)(searchResults);
+  searchResults = uniqBy((part) => part.name)(searchResults);
   return searchResults;
 };
 
@@ -112,18 +123,17 @@ export const ExosuitFabricator = (props, context) => {
   const { act, data } = useBackend(context);
   const queue = data.queue || [];
   const materialAsObj = materialArrayToObj(data.materials || []);
-  const {
-    materialTally,
-    missingMatTally,
-    textColors,
-  } = queueCondFormat(materialAsObj, queue);
+  const { materialTally, missingMatTally, textColors } = queueCondFormat(
+    materialAsObj,
+    queue,
+  );
   const [displayMatCost, setDisplayMatCost] = useSharedState(
-    context, 'display_mats', false);
+    context,
+    'display_mats',
+    false,
+  );
   return (
-    <Window
-      title="Exosuit Fabricator"
-      width={1100}
-      height={640}>
+    <Window title="Exosuit Fabricator" width={1100} height={640}>
       <Window.Content>
         <Stack fill vertical>
           <Stack.Item>
@@ -133,7 +143,7 @@ export const ExosuitFabricator = (props, context) => {
                   <Materials
                     materials={data.materials || []}
                     onEject={(ref, amount) => {
-                      act("remove_mat", {
+                      act('remove_mat', {
                         ref: ref,
                         amount: amount,
                       });
@@ -145,7 +155,8 @@ export const ExosuitFabricator = (props, context) => {
                 <Section fill title="Settings">
                   <Button.Checkbox
                     onClick={() => setDisplayMatCost(!displayMatCost)}
-                    checked={displayMatCost}>
+                    checked={displayMatCost}
+                  >
                     Display Material Costs
                   </Button.Checkbox>
                 </Section>
@@ -158,24 +169,28 @@ export const ExosuitFabricator = (props, context) => {
                 <Section
                   fill
                   title="Categories"
-                  buttons={(
+                  buttons={
                     <Button
                       content="R&D Sync"
-                      onClick={() => act("sync_rnd")} />
-                  )}>
+                      onClick={() => act('sync_rnd')}
+                    />
+                  }
+                >
                   <PartSets />
                 </Section>
               </Stack.Item>
               <Stack.Item grow>
                 <PartLists
                   queueMaterials={materialTally}
-                  materials={materialAsObj} />
+                  materials={materialAsObj}
+                />
               </Stack.Item>
               <Stack.Item width="420px">
                 <Queue
                   queueMaterials={materialTally}
                   missingMaterials={missingMatTally}
-                  textColors={textColors} />
+                  textColors={textColors}
+                />
               </Stack.Item>
             </Stack>
           </Stack.Item>
@@ -190,16 +205,20 @@ const PartSets = (props, context) => {
   const partSets = data.partSets || [];
   const buildableParts = data.buildableParts || {};
   const [selectedPartTab, setSelectedPartTab] = useSharedState(
-    context, 'part_tab', partSets.length ? buildableParts[0] : '');
+    context,
+    'part_tab',
+    partSets.length ? buildableParts[0] : '',
+  );
   return partSets
-    .filter(set => buildableParts[set])
-    .map(set => (
+    .filter((set) => buildableParts[set])
+    .map((set) => (
       <Button
         key={set}
         fluid
         color="transparent"
         selected={set === selectedPartTab}
-        onClick={() => setSelectedPartTab(set)}>
+        onClick={() => setSelectedPartTab(set)}
+      >
         {set}
       </Button>
     ));
@@ -208,43 +227,37 @@ const PartSets = (props, context) => {
 const PartLists = (props, context) => {
   const { data } = useBackend(context);
 
-  const getFirstValidPartSet = (sets => {
+  const getFirstValidPartSet = (sets) => {
     for (let set of sets) {
       if (buildableParts[set]) {
         return set;
       }
     }
     return null;
-  });
+  };
 
   const partSets = data.partSets || [];
   const buildableParts = data.buildableParts || [];
 
-  const {
-    queueMaterials,
-    materials,
-  } = props;
+  const { queueMaterials, materials } = props;
 
-  const [
-    selectedPartTab,
-    setSelectedPartTab,
-  ] = useSharedState(
+  const [selectedPartTab, setSelectedPartTab] = useSharedState(
     context,
-    "part_tab",
-    getFirstValidPartSet(partSets)
+    'part_tab',
+    getFirstValidPartSet(partSets),
   );
 
-  const [
-    searchText,
-    setSearchText,
-  ] = useSharedState(context, "search_text", "");
+  const [searchText, setSearchText] = useSharedState(
+    context,
+    'search_text',
+    '',
+  );
 
   if (!selectedPartTab || !buildableParts[selectedPartTab]) {
     const validSet = getFirstValidPartSet(partSets);
     if (validSet) {
       setSelectedPartTab(validSet);
-    }
-    else {
+    } else {
       return;
     }
   }
@@ -252,11 +265,11 @@ const PartLists = (props, context) => {
   let partsList;
   // Build list of sub-categories if not using a search filter.
   if (!searchText) {
-    partsList = { "Parts": [] };
-    buildableParts[selectedPartTab].forEach(part => {
-      part["format"] = partCondFormat(materials, queueMaterials, part);
+    partsList = { Parts: [] };
+    buildableParts[selectedPartTab].forEach((part) => {
+      part['format'] = partCondFormat(materials, queueMaterials, part);
       if (!part.subCategory) {
-        partsList["Parts"].push(part);
+        partsList['Parts'].push(part);
         return;
       }
       if (!(part.subCategory in partsList)) {
@@ -264,11 +277,10 @@ const PartLists = (props, context) => {
       }
       partsList[part.subCategory].push(part);
     });
-  }
-  else {
+  } else {
     partsList = [];
-    searchFilter(searchText, buildableParts).forEach(part => {
-      part["format"] = partCondFormat(materials, queueMaterials, part);
+    searchFilter(searchText, buildableParts).forEach((part) => {
+      part['format'] = partCondFormat(materials, queueMaterials, part);
       partsList.push(part);
     });
   }
@@ -285,27 +297,29 @@ const PartLists = (props, context) => {
               <Input
                 fluid
                 placeholder="Search for..."
-                onInput={(e, v) => setSearchText(v)} />
+                onInput={(e, v) => setSearchText(v)}
+              />
             </Stack.Item>
           </Stack>
         </Section>
       </Stack.Item>
       <Stack.Item grow>
         <Section fill scrollable>
-          {!!searchText && (
+          {(!!searchText && (
             <PartCategory
-              name={"Search Results"}
+              name={'Search Results'}
               parts={partsList}
               forceShow
-              placeholder="No matching results..." />
-          ) || (
-            Object.keys(partsList).map(category => (
+              placeholder="No matching results..."
+            />
+          )) ||
+            Object.keys(partsList).map((category) => (
               <PartCategory
                 key={category}
                 name={category}
-                parts={partsList[category]} />
-            ))
-          )}
+                parts={partsList[category]}
+              />
+            ))}
         </Section>
       </Stack.Item>
     </Stack>
@@ -314,18 +328,9 @@ const PartLists = (props, context) => {
 
 const PartCategory = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    buildingPart,
-  } = data;
-  const {
-    parts,
-    name,
-    forceShow,
-    placeholder,
-  } = props;
-  const [
-    displayMatCost,
-  ] = useSharedState(context, 'display_mats', false);
+  const { buildingPart } = data;
+  const { parts, name, forceShow, placeholder } = props;
+  const [displayMatCost] = useSharedState(context, 'display_mats', false);
   if (!forceShow && parts.length === 0) {
     return null;
   }
@@ -339,28 +344,32 @@ const PartCategory = (props, context) => {
           color="good"
           content="Queue All"
           icon="plus-circle"
-          onClick={() => act("add_queue_set", {
-            part_list: parts.map(part => part.id),
-          })} />
-      }>
+          onClick={() =>
+            act('add_queue_set', {
+              part_list: parts.map((part) => part.id),
+            })
+          }
+        />
+      }
+    >
       {!parts.length && placeholder}
-      {parts.map(part => (
+      {parts.map((part) => (
         <Fragment key={part.name}>
           <Stack align="center">
             <Stack.Item>
               <Button
-                disabled={(
-                  buildingPart || part.format.textColor === COLOR_BAD
-                )}
+                disabled={buildingPart || part.format.textColor === COLOR_BAD}
                 color="good"
                 icon="play"
-                onClick={() => act("build_part", { id: part.id })} />
+                onClick={() => act('build_part', { id: part.id })}
+              />
             </Stack.Item>
             <Stack.Item>
               <Button
                 color="average"
                 icon="plus-circle"
-                onClick={() => act("add_queue_part", { id: part.id })} />
+                onClick={() => act('add_queue_part', { id: part.id })}
+              />
             </Stack.Item>
             <Stack.Item grow color={COLOR_KEYS[part.format.textColor]}>
               {part.name}
@@ -369,27 +378,28 @@ const PartCategory = (props, context) => {
               <Button
                 icon="question-circle"
                 tooltip={
-                  'Build Time: '
-                  + part.printTime + 's. '
-                  + (part.desc || '')
+                  'Build Time: ' + part.printTime + 's. ' + (part.desc || '')
                 }
-                tooltipPosition="left" />
+                tooltipPosition="left"
+              />
             </Stack.Item>
           </Stack>
           {displayMatCost && (
             <Stack mb={2}>
-              {Object.keys(part.cost).map(material => (
+              {Object.keys(part.cost).map((material) => (
                 <Stack.Item
                   key={material}
                   width="50px"
-                  color={COLOR_KEYS[part.format[material].color]}>
+                  color={COLOR_KEYS[part.format[material].color]}
+                >
                   <MaterialAmount
                     formatting={MaterialFormatting.Money}
                     style={{
                       transform: 'scale(0.75) translate(0%, 10%)',
                     }}
                     name={material}
-                    amount={part.cost[material]} />
+                    amount={part.cost[material]}
+                  />
                 </Stack.Item>
               ))}
             </Stack>
@@ -404,11 +414,7 @@ const Queue = (props, context) => {
   const { act, data } = useBackend(context);
   const { isProcessingQueue } = data;
   const queue = data.queue || [];
-  const {
-    queueMaterials,
-    missingMaterials,
-    textColors,
-  } = props;
+  const { queueMaterials, missingMaterials, textColors } = props;
   return (
     <Stack fill vertical>
       <Stack.Item grow>
@@ -416,29 +422,33 @@ const Queue = (props, context) => {
           fill
           scrollable
           title="Queue"
-          buttons={(
+          buttons={
             <>
               <Button.Confirm
                 disabled={!queue.length}
                 color="bad"
                 icon="minus-circle"
                 content="Clear Queue"
-                onClick={() => act("clear_queue")} />
-              {!!isProcessingQueue && (
+                onClick={() => act('clear_queue')}
+              />
+              {(!!isProcessingQueue && (
                 <Button
                   disabled={!queue.length}
                   content="Stop"
                   icon="stop"
-                  onClick={() => act("stop_queue")} />
-              ) || (
+                  onClick={() => act('stop_queue')}
+                />
+              )) || (
                 <Button
                   disabled={!queue.length}
                   content="Build Queue"
                   icon="play"
-                  onClick={() => act("build_queue")} />
+                  onClick={() => act('build_queue')}
+                />
               )}
             </>
-          )}>
+          }
+        >
           <Stack fill vertical>
             <Stack.Item>
               <BeingBuilt />
@@ -454,7 +464,8 @@ const Queue = (props, context) => {
           <Section title="Material Cost">
             <QueueMaterials
               queueMaterials={queueMaterials}
-              missingMaterials={missingMaterials} />
+              missingMaterials={missingMaterials}
+            />
           </Section>
         </Stack.Item>
       )}
@@ -463,22 +474,18 @@ const Queue = (props, context) => {
 };
 
 const QueueMaterials = (props, context) => {
-  const {
-    queueMaterials,
-    missingMaterials,
-  } = props;
+  const { queueMaterials, missingMaterials } = props;
   return (
     <Stack wrap>
-      {Object.keys(queueMaterials).map(material => (
+      {Object.keys(queueMaterials).map((material) => (
         <Stack.Item key={material} textAlign="center">
           <MaterialAmount
             formatting={MaterialFormatting.Money}
             name={material}
-            amount={queueMaterials[material]} />
+            amount={queueMaterials[material]}
+          />
           {!!missingMaterials[material] && (
-            <Box color="bad">
-              {formatMoney(missingMaterials[material])}
-            </Box>
+            <Box color="bad">{formatMoney(missingMaterials[material])}</Box>
           )}
         </Stack.Item>
       ))}
@@ -489,18 +496,12 @@ const QueueMaterials = (props, context) => {
 const QueueList = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const {
-    textColors,
-  } = props;
+  const { textColors } = props;
 
   const queue = data.queue || [];
 
   if (!queue.length) {
-    return (
-      <>
-        No parts in queue.
-      </>
-    );
+    return <>No parts in queue.</>;
   }
 
   return queue.map((part, index) => (
@@ -509,7 +510,8 @@ const QueueList = (props, context) => {
         <Button
           icon="minus-circle"
           color="bad"
-          onClick={() => act("del_queue_part", { index: index + 1 })} />
+          onClick={() => act('del_queue_part', { index: index + 1 })}
+        />
       </Stack.Item>
       <Stack.Item textColor={COLOR_KEYS[textColors[index]]}>
         {part.name}
@@ -520,49 +522,29 @@ const QueueList = (props, context) => {
 
 const BeingBuilt = (props, context) => {
   const { data } = useBackend(context);
-  const {
-    buildingPart,
-    storedPart,
-  } = data;
+  const { buildingPart, storedPart } = data;
 
   if (storedPart) {
     const { name } = storedPart;
     return (
-      <ProgressBar
-        minValue={0}
-        maxValue={1}
-        value={1}
-        color="average">
+      <ProgressBar minValue={0} maxValue={1} value={1} color="average">
         <Stack>
-          <Stack.Item grow>
-            {name}
-          </Stack.Item>
-          <Stack.Item>
-            Fabricator outlet obstructed...
-          </Stack.Item>
+          <Stack.Item grow>{name}</Stack.Item>
+          <Stack.Item>Fabricator outlet obstructed...</Stack.Item>
         </Stack>
       </ProgressBar>
     );
   }
 
   if (buildingPart) {
-    const {
-      name,
-      duration,
-      printTime,
-    } = buildingPart;
-    const timeLeft = Math.ceil(duration/10);
+    const { name, duration, printTime } = buildingPart;
+    const timeLeft = Math.ceil(duration / 10);
     return (
-      <ProgressBar
-        minValue={0}
-        maxValue={printTime}
-        value={duration}>
+      <ProgressBar minValue={0} maxValue={printTime} value={duration}>
         <Stack>
-          <Stack.Item grow>
-            {name}
-          </Stack.Item>
+          <Stack.Item grow>{name}</Stack.Item>
           <Stack.Item>
-            {timeLeft >= 0 && (timeLeft + 's') || 'Dispensing...'}
+            {(timeLeft >= 0 && timeLeft + 's') || 'Dispensing...'}
           </Stack.Item>
         </Stack>
       </ProgressBar>
diff --git a/tgui/packages/tgui/interfaces/FaxMachine.js b/tgui/packages/tgui/interfaces/FaxMachine.js
index a91a467d67b6..8696c6b60b12 100644
--- a/tgui/packages/tgui/interfaces/FaxMachine.js
+++ b/tgui/packages/tgui/interfaces/FaxMachine.js
@@ -1,5 +1,14 @@
 import { useBackend, useSharedState, useLocalState } from '../backend';
-import { BlockQuote, Box, Button, Divider, Dropdown, Section, Stack, Tabs } from '../components';
+import {
+  BlockQuote,
+  Box,
+  Button,
+  Divider,
+  Dropdown,
+  Section,
+  Stack,
+  Tabs,
+} from '../components';
 import { Window } from '../layouts';
 
 export const FaxMachine = (props, context) => {
@@ -17,46 +26,48 @@ export const FaxMachine = (props, context) => {
     unread_message,
   } = data;
 
-  const [
-    tab,
-    setTab,
-  ] = useSharedState(context, 'tab', 1);
+  const [tab, setTab] = useSharedState(context, 'tab', 1);
 
-  const [
-    selectedPaperTab,
-    setSelectedPaper,
-  ] = useLocalState(context, 'ref', received_paperwork[0]?.ref);
+  const [selectedPaperTab, setSelectedPaper] = useLocalState(
+    context,
+    'ref',
+    received_paperwork[0]?.ref,
+  );
 
-  const [
-    destination,
-    setDestination,
-  ] = useLocalState(context, 'dest', default_destination);
+  const [destination, setDestination] = useLocalState(
+    context,
+    'dest',
+    default_destination,
+  );
 
-  const selectedPaper = received_paperwork.find(paper => {
+  const selectedPaper = received_paperwork.find((paper) => {
     return paper.ref === selectedPaperTab;
   });
 
-  const selectedDestination = destination_options.find(dest => {
+  const selectedDestination = destination_options.find((dest) => {
     return dest === destination;
   });
 
   return (
-    <Window
-      width={550}
-      height={630}
-      theme={emagged ? "syndicate" : "ntos"}>
+    <Window width={550} height={630} theme={emagged ? 'syndicate' : 'ntos'}>
       <Window.Content>
         <Section
           title="Nanotrasen Fax Device"
           height={6.5}
-          buttons={(
-            !!emagged && <Button
-              color="bad"
-              content="Restore Routing Information"
-              onClick={() => act('un_emag_machine')} />
-          )}>
-          Hello, {display_name}! {emagged ? "ERR- ERRoR. ERROR."
-            : "Welcome to the Nanotrasen Approved Faxing Device!"}
+          buttons={
+            !!emagged && (
+              <Button
+                color="bad"
+                content="Restore Routing Information"
+                onClick={() => act('un_emag_machine')}
+              />
+            )
+          }
+        >
+          Hello, {display_name}!{' '}
+          {emagged
+            ? 'ERR- ERRoR. ERROR.'
+            : 'Welcome to the Nanotrasen Approved Faxing Device!'}
         </Section>
         <Section title="Faxed Papers">
           <Stack vertical height={15}>
@@ -66,7 +77,8 @@ export const FaxMachine = (props, context) => {
                   width="50%"
                   icon="copy"
                   selected={tab === 1}
-                  onClick={() => setTab(1)}>
+                  onClick={() => setTab(1)}
+                >
                   <b>Send A Fax</b>
                 </Tabs.Tab>
                 <Tabs.Tab
@@ -76,7 +88,8 @@ export const FaxMachine = (props, context) => {
                   onClick={() => {
                     setTab(2);
                     act('read_last_received');
-                  }}>
+                  }}
+                >
                   <Stack grow width="100%">
                     <Stack.Item grow textAlign="left">
                       <b>Received Faxes</b>
@@ -84,47 +97,45 @@ export const FaxMachine = (props, context) => {
                     {received_paper && !!unread_message && (
                       <Stack.Item grow textAlign="right">
                         <i>New message!</i>
-                      </Stack.Item>)}
+                      </Stack.Item>
+                    )}
                   </Stack>
                 </Tabs.Tab>
               </Tabs>
             </Stack.Item>
             <Stack.Item mt={1} height={13}>
-              {tab === 1 && (
-                stored_paper ? (
+              {tab === 1 &&
+                (stored_paper ? (
                   <Box mt={1}>
-                    <span style={{
-                      color: (emagged ? "lightgreen" : "lightblue"),
-                      fontWeight: "bold" }}>
+                    <span
+                      style={{
+                        color: emagged ? 'lightgreen' : 'lightblue',
+                        fontWeight: 'bold',
+                      }}
+                    >
                       Message to Send:
                     </span>
-                    <BlockQuote mt={1}>
-                      {stored_paper.contents}
-                    </BlockQuote>
+                    <BlockQuote mt={1}>{stored_paper.contents}</BlockQuote>
                   </Box>
                 ) : (
                   <Box>
                     <i>
-                      Insert a paper into the machine
-                      to fax its contents somewhere.
+                      Insert a paper into the machine to fax its contents
+                      somewhere.
                     </i>
                   </Box>
                 ))}
-              {tab === 2 && (
-                received_paper ? (
+              {tab === 2 &&
+                (received_paper ? (
                   <Box mt={1}>
-                    <span style={{ color: "gold", fontWeight: "bold" }}>
+                    <span style={{ color: 'gold', fontWeight: 'bold' }}>
                       Message from {received_paper.source}:
                     </span>
-                    <BlockQuote mt={1}>
-                      {received_paper.contents}
-                    </BlockQuote>
+                    <BlockQuote mt={1}>{received_paper.contents}</BlockQuote>
                   </Box>
                 ) : (
                   <Box>
-                    <i>
-                      No papers have been received.
-                    </i>
+                    <i>No papers have been received.</i>
                   </Box>
                 ))}
             </Stack.Item>
@@ -135,18 +146,24 @@ export const FaxMachine = (props, context) => {
                     <Button
                       height="100%"
                       icon="fax"
-                      color={emagged
-                        ? "bad" : "good"}
+                      color={emagged ? 'bad' : 'good'}
                       content="Send to: "
-                      disabled={tab !== 1
-                        || !stored_paper
-                        || !(can_send_cc_messages || emagged)}
-                      tooltip={"Send the contents of the paper currently inserted \
+                      disabled={
+                        tab !== 1 ||
+                        !stored_paper ||
+                        !(can_send_cc_messages || emagged)
+                      }
+                      tooltip={
+                        'Send the contents of the paper currently inserted \
                       in the machine to the destination specified. Response not guaranteed. \
-                      A copy of the sent paper will print, too - for record-keeping."}
-                      onClick={() => act('send_stored_paper', {
-                        destination_machine: destination,
-                      })} />
+                      A copy of the sent paper will print, too - for record-keeping.'
+                      }
+                      onClick={() =>
+                        act('send_stored_paper', {
+                          destination_machine: destination,
+                        })
+                      }
+                    />
                   </Stack.Item>
                   <Stack.Item grow>
                     <Dropdown
@@ -154,7 +171,10 @@ export const FaxMachine = (props, context) => {
                       height="100%"
                       selected={selectedDestination}
                       options={destination_options}
-                      onSelected={dest => { setDestination(dest); }} />
+                      onSelected={(dest) => {
+                        setDestination(dest);
+                      }}
+                    />
                   </Stack.Item>
                 </Stack>
               )}
@@ -165,7 +185,8 @@ export const FaxMachine = (props, context) => {
                       disabled={!received_paper}
                       content="Print received Fax"
                       tooltip="Print the last received fax."
-                      onClick={() => act('print_received_paper')} />
+                      onClick={() => act('print_received_paper')}
+                    />
                   </Stack.Item>
                 </Stack>
               )}
@@ -174,33 +195,37 @@ export const FaxMachine = (props, context) => {
         </Section>
         <Section
           title="Paperwork"
-          buttons={(
+          buttons={
             <Button.Checkbox
               checked={can_receive}
               content="Toggle Incoming Paperwork"
-              tooltip={(can_receive ? "Disable" : "Enable")
-                + " the ability for this fax machine \
-                to receive paperwork every five minutes."}
+              tooltip={
+                (can_receive ? 'Disable' : 'Enable') +
+                ' the ability for this fax machine \
+                to receive paperwork every five minutes.'
+              }
               onClick={() => act('toggle_recieving')}
             />
-          )}>
+          }
+        >
           <Stack vertical grow>
             <Stack.Item height={2}>
               {received_paperwork.length > 0 ? (
                 <Tabs>
-                  {received_paperwork.map(paper => (
+                  {received_paperwork.map((paper) => (
                     <Tabs.Tab
                       width="12.5%"
                       key={paper}
                       textAlign="center"
                       selected={paper.ref === selectedPaperTab}
-                      onClick={() => setSelectedPaper(paper.ref)}>
+                      onClick={() => setSelectedPaper(paper.ref)}
+                    >
                       Paper {paper.num}
                     </Tabs.Tab>
                   ))}
                 </Tabs>
               ) : (
-                "No stored paperwork to process."
+                'No stored paperwork to process.'
               )}
             </Stack.Item>
             <Stack.Item height={8}>
@@ -209,23 +234,21 @@ export const FaxMachine = (props, context) => {
                   {selectedPaper.contents}
                 </BlockQuote>
               ) : (
-                received_paperwork.length > 0 && ("No paper selected.")
+                received_paperwork.length > 0 && 'No paper selected.'
               )}
             </Stack.Item>
             <Divider />
             <Stack.Item height={3} mb={1}>
               {!!selectedPaper && (
-                <Stack vertical align="center" >
+                <Stack vertical align="center">
                   <Stack.Item>
                     <b>
-                      To fulfill this paperwork, stamp accurately
-                      and answer the following:
+                      To fulfill this paperwork, stamp accurately and answer the
+                      following:
                     </b>
                   </Stack.Item>
                   <Stack.Item>
-                    <BlockQuote>
-                      {selectedPaper.required_answer}
-                    </BlockQuote>
+                    <BlockQuote>{selectedPaper.required_answer}</BlockQuote>
                   </Stack.Item>
                 </Stack>
               )}
@@ -239,9 +262,12 @@ export const FaxMachine = (props, context) => {
                     content="Print Paper"
                     tooltip="Print the selected paperwork. \
                       This is how you stamp and process the paperwork."
-                    onClick={() => act('print_select_paperwork', {
-                      ref: selectedPaper.ref,
-                    })} />
+                    onClick={() =>
+                      act('print_select_paperwork', {
+                        ref: selectedPaper.ref,
+                      })
+                    }
+                  />
                 </Stack.Item>
                 <Stack.Item>
                   <Button
@@ -250,9 +276,12 @@ export const FaxMachine = (props, context) => {
                     tooltip="Send the selected paperwork \
                       to your employer to check its \
                       validity and receive your payment."
-                    onClick={() => act('check_paper', {
-                      ref: selectedPaper.ref,
-                    })} />
+                    onClick={() =>
+                      act('check_paper', {
+                        ref: selectedPaper.ref,
+                      })
+                    }
+                  />
                 </Stack.Item>
                 <Stack.Item>
                   <Button
@@ -260,19 +289,27 @@ export const FaxMachine = (props, context) => {
                     disabled={!selectedPaper}
                     content="Delete Paper"
                     tooltip="Delete the selected paperwork from the machine."
-                    onClick={() => act('delete_select_paperwork', {
-                      ref: selectedPaper.ref,
-                    })} />
+                    onClick={() =>
+                      act('delete_select_paperwork', {
+                        ref: selectedPaper.ref,
+                      })
+                    }
+                  />
                 </Stack.Item>
                 <Stack.Item>
                   <Button
-                    color={(!received_paperwork
-                      || received_paperwork.length === 0) ? "good" : "caution"}
-                    disabled={!received_paperwork
-                      || received_paperwork.length === 0}
+                    color={
+                      !received_paperwork || received_paperwork.length === 0
+                        ? 'good'
+                        : 'caution'
+                    }
+                    disabled={
+                      !received_paperwork || received_paperwork.length === 0
+                    }
                     content="Print All Papers"
                     tooltip="Print out all the paperwork stored in the machine."
-                    onClick={() => act('print_all_paperwork')} />
+                    onClick={() => act('print_all_paperwork')}
+                  />
                 </Stack.Item>
               </Stack>
             </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/FilingCabinet.js b/tgui/packages/tgui/interfaces/FilingCabinet.js
index e9d0007253a9..0d7b0631b5ad 100644
--- a/tgui/packages/tgui/interfaces/FilingCabinet.js
+++ b/tgui/packages/tgui/interfaces/FilingCabinet.js
@@ -1,28 +1,19 @@
-import { useBackend } from "../backend";
-import {
-  Box,
-  Button,
-  Flex,
-  Section,
-} from "../components";
-import { Window } from "../layouts";
+import { useBackend } from '../backend';
+import { Box, Button, Flex, Section } from '../components';
+import { Window } from '../layouts';
 
 export const FilingCabinet = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    cabinet_name,
-    contents,
-    contents_ref,
-  } = data;
+  const { cabinet_name, contents, contents_ref } = data;
   return (
-    <Window title={cabinet_name || "Filing Cabinet"} width={350} height={300}>
+    <Window title={cabinet_name || 'Filing Cabinet'} width={350} height={300}>
       <Window.Content backgroundColor="#B88F3D" scrollable>
         {contents.map((object, index) => (
           <Flex
             key={contents_ref[index]}
             color="black"
             backgroundColor="white"
-            style={{ padding: "2px" }}
+            style={{ padding: '2px' }}
             mb={0.5}
           >
             <Flex.Item align="center" grow={1}>
@@ -31,7 +22,9 @@ export const FilingCabinet = (props, context) => {
             <Flex.Item>
               <Button
                 icon="eject"
-                onClick={() => act("remove_object", { ref: contents_ref[index] })}
+                onClick={() =>
+                  act('remove_object', { ref: contents_ref[index] })
+                }
               />
             </Flex.Item>
           </Flex>
diff --git a/tgui/packages/tgui/interfaces/Filteriffic.js b/tgui/packages/tgui/interfaces/Filteriffic.js
index 2662c6e68fad..0335a17deee6 100644
--- a/tgui/packages/tgui/interfaces/Filteriffic.js
+++ b/tgui/packages/tgui/interfaces/Filteriffic.js
@@ -2,7 +2,18 @@ import { map } from 'common/collections';
 import { toFixed } from 'common/math';
 import { numberOfDecimalDigits } from '../../common/math';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Collapsible, ColorBox, Dropdown, Input, LabeledList, NoticeBox, NumberInput, Section } from '../components';
+import {
+  Box,
+  Button,
+  Collapsible,
+  ColorBox,
+  Dropdown,
+  Input,
+  LabeledList,
+  NoticeBox,
+  NumberInput,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 const FilterIntegerEntry = (props, context) => {
@@ -15,12 +26,15 @@ const FilterIntegerEntry = (props, context) => {
       maxValue={500}
       stepPixelSize={5}
       width="39px"
-      onDrag={(e, value) => act('modify_filter_value', {
-        name: filterName,
-        new_data: {
-          [name]: value,
-        },
-      })} />
+      onDrag={(e, value) =>
+        act('modify_filter_value', {
+          name: filterName,
+          new_data: {
+            [name]: value,
+          },
+        })
+      }
+    />
   );
 };
 
@@ -36,26 +50,27 @@ const FilterFloatEntry = (props, context) => {
         maxValue={500}
         stepPixelSize={4}
         step={step}
-        format={value => toFixed(value, numberOfDecimalDigits(step))}
+        format={(value) => toFixed(value, numberOfDecimalDigits(step))}
         width="80px"
-        onDrag={(e, value) => act('transition_filter_value', {
-          name: filterName,
-          new_data: {
-            [name]: value,
-          },
-        })} />
-      <Box
-        inline
-        ml={2}
-        mr={1}>
+        onDrag={(e, value) =>
+          act('transition_filter_value', {
+            name: filterName,
+            new_data: {
+              [name]: value,
+            },
+          })
+        }
+      />
+      <Box inline ml={2} mr={1}>
         Step:
       </Box>
       <NumberInput
         value={step}
         step={0.001}
-        format={value => toFixed(value, 4)}
+        format={(value) => toFixed(value, 4)}
         width="70px"
-        onChange={(e, value) => setStep(value)} />
+        onChange={(e, value) => setStep(value)}
+      />
     </>
   );
 };
@@ -68,12 +83,15 @@ const FilterTextEntry = (props, context) => {
     <Input
       value={value}
       width="250px"
-      onInput={(e, value) => act('modify_filter_value', {
-        name: filterName,
-        new_data: {
-          [name]: value,
-        },
-      })} />
+      onInput={(e, value) =>
+        act('modify_filter_value', {
+          name: filterName,
+          new_data: {
+            [name]: value,
+          },
+        })
+      }
+    />
   );
 };
 
@@ -84,21 +102,25 @@ const FilterColorEntry = (props, context) => {
     <>
       <Button
         icon="pencil-alt"
-        onClick={() => act('modify_color_value', {
-          name: filterName,
-        })} />
-      <ColorBox
-        color={value}
-        mr={0.5} />
+        onClick={() =>
+          act('modify_color_value', {
+            name: filterName,
+          })
+        }
+      />
+      <ColorBox color={value} mr={0.5} />
       <Input
         value={value}
         width="90px"
-        onInput={(e, value) => act('transition_filter_value', {
-          name: filterName,
-          new_data: {
-            [name]: value,
-          },
-        })} />
+        onInput={(e, value) =>
+          act('transition_filter_value', {
+            name: filterName,
+            new_data: {
+              [name]: value,
+            },
+          })
+        }
+      />
     </>
   );
 };
@@ -110,9 +132,12 @@ const FilterIconEntry = (props, context) => {
     <>
       <Button
         icon="pencil-alt"
-        onClick={() => act('modify_icon_value', {
-          name: filterName,
-        })} />
+        onClick={() =>
+          act('modify_icon_value', {
+            name: filterName,
+          })
+        }
+      />
       <Box inline ml={1}>
         {value}
       </Box>
@@ -126,19 +151,20 @@ const FilterFlagsEntry = (props, context) => {
 
   const filterInfo = data.filter_info;
   const flags = filterInfo[filterType]['flags'];
-  return (
-    map((bitField, flagName) => (
-      <Button.Checkbox
-        checked={value & bitField}
-        content={flagName}
-        onClick={() => act('modify_filter_value', {
+  return map((bitField, flagName) => (
+    <Button.Checkbox
+      checked={value & bitField}
+      content={flagName}
+      onClick={() =>
+        act('modify_filter_value', {
           name: filterName,
           new_data: {
             [name]: value ^ bitField,
           },
-        })} />
-    ))(flags)
-  );
+        })
+      }
+    />
+  ))(flags);
 };
 
 const FilterDataEntry = (props, context) => {
@@ -172,9 +198,12 @@ const FilterDataEntry = (props, context) => {
 
   return (
     <LabeledList.Item label={name}>
-      {filterEntryTypes[filterEntryMap[name]] || "Not Found (This is an error)"}
-      {' '}
-      {!hasValue && <Box inline color="average">(Default)</Box>}
+      {filterEntryTypes[filterEntryMap[name]] || 'Not Found (This is an error)'}{' '}
+      {!hasValue && (
+        <Box inline color="average">
+          (Default)
+        </Box>
+      )}
     </LabeledList.Item>
   );
 };
@@ -184,40 +213,49 @@ const FilterEntry = (props, context) => {
   const { name, filterDataEntry } = props;
   const { type, priority, ...restOfProps } = filterDataEntry;
 
-  const filterDefaults = data["filter_info"];
+  const filterDefaults = data['filter_info'];
 
-  const targetFilterPossibleKeys = Object.keys(filterDefaults[type]['defaults']);
+  const targetFilterPossibleKeys = Object.keys(
+    filterDefaults[type]['defaults'],
+  );
 
   return (
     <Collapsible
-      title={name + " (" + type + ")"}
-      buttons={(
+      title={name + ' (' + type + ')'}
+      buttons={
         <>
           <NumberInput
             value={priority}
             stepPixelSize={10}
             width="60px"
-            onChange={(e, value) => act('change_priority', {
-              name: name,
-              new_priority: value,
-            })}
+            onChange={(e, value) =>
+              act('change_priority', {
+                name: name,
+                new_priority: value,
+              })
+            }
           />
           <Button.Input
             content="Rename"
             placeholder={name}
-            onCommit={(e, new_name) => act('rename_filter', {
-              name: name,
-              new_name: new_name,
-            })}
-            width="90px" />
+            onCommit={(e, new_name) =>
+              act('rename_filter', {
+                name: name,
+                new_name: new_name,
+              })
+            }
+            width="90px"
+          />
           <Button.Confirm
             icon="minus"
-            onClick={() => act("remove_filter", { name: name })} />
+            onClick={() => act('remove_filter', { name: name })}
+          />
         </>
-      )}>
+      }
+    >
       <Section level={2}>
         <LabeledList>
-          {targetFilterPossibleKeys.map(entryName => {
+          {targetFilterPossibleKeys.map((entryName) => {
             const defaults = filterDefaults[type]['defaults'];
             const value = restOfProps[entryName] || defaults[entryName];
             const hasValue = value !== defaults[entryName];
@@ -228,7 +266,8 @@ const FilterEntry = (props, context) => {
                 filterType={type}
                 name={entryName}
                 value={value}
-                hasValue={hasValue} />
+                hasValue={hasValue}
+              />
             );
           })}
         </LabeledList>
@@ -239,60 +278,69 @@ const FilterEntry = (props, context) => {
 
 export const Filteriffic = (props, context) => {
   const { act, data } = useBackend(context);
-  const name = data.target_name || "Unknown Object";
+  const name = data.target_name || 'Unknown Object';
   const filters = data.target_filter_data || {};
   const hasFilters = Object.keys(filters).length !== 0;
-  const filterDefaults = data["filter_info"];
-  const [massApplyPath, setMassApplyPath] = useLocalState(context, 'massApplyPath', '');
-  const [hiddenSecret, setHiddenSecret] = useLocalState(context, 'hidden', false);
+  const filterDefaults = data['filter_info'];
+  const [massApplyPath, setMassApplyPath] = useLocalState(
+    context,
+    'massApplyPath',
+    '',
+  );
+  const [hiddenSecret, setHiddenSecret] = useLocalState(
+    context,
+    'hidden',
+    false,
+  );
   return (
-    <Window
-      title="Filteriffic"
-      width={500}
-      height={500}>
+    <Window title="Filteriffic" width={500} height={500}>
       <Window.Content scrollable>
         <NoticeBox danger>
           DO NOT MESS WITH EXISTING FILTERS IF YOU DO NOT KNOW THE CONSEQUENCES.
           YOU HAVE BEEN WARNED.
         </NoticeBox>
         <Section
-          title={hiddenSecret ? (
-            <>
-              <Box mr={0.5} inline>
-                MASS EDIT:
+          title={
+            hiddenSecret ? (
+              <>
+                <Box mr={0.5} inline>
+                  MASS EDIT:
+                </Box>
+                <Input
+                  value={massApplyPath}
+                  width="100px"
+                  onInput={(e, value) => setMassApplyPath(value)}
+                />
+                <Button.Confirm
+                  content="Apply"
+                  confirmContent="ARE YOU SURE?"
+                  onClick={() => act('mass_apply', { path: massApplyPath })}
+                />
+              </>
+            ) : (
+              <Box inline onDblClick={() => setHiddenSecret(true)}>
+                {name}
               </Box>
-              <Input
-                value={massApplyPath}
-                width="100px"
-                onInput={(e, value) => setMassApplyPath(value)} />
-              <Button.Confirm
-                content="Apply"
-                confirmContent="ARE YOU SURE?"
-                onClick={() => act('mass_apply', { path: massApplyPath })} />
-            </>
-          ) : (
-            <Box
-              inline
-              onDblClick={() => setHiddenSecret(true)}>
-              {name}
-            </Box>
-          )}
-          buttons={(
+            )
+          }
+          buttons={
             <Dropdown
               icon="plus"
               displayText="Add Filter"
               nochevron
               options={Object.keys(filterDefaults)}
-              onSelected={value => act('add_filter', {
-                name: 'default',
-                priority: 10,
-                type: value,
-              })} />
-          )} >
+              onSelected={(value) =>
+                act('add_filter', {
+                  name: 'default',
+                  priority: 10,
+                  type: value,
+                })
+              }
+            />
+          }
+        >
           {!hasFilters ? (
-            <Box>
-              No filters
-            </Box>
+            <Box>No filters</Box>
           ) : (
             map((entry, key) => (
               <FilterEntry filterDataEntry={entry} name={key} key={key} />
diff --git a/tgui/packages/tgui/interfaces/FishCatalog.js b/tgui/packages/tgui/interfaces/FishCatalog.js
index 33e6544a5c4c..b043e19b34db 100644
--- a/tgui/packages/tgui/interfaces/FishCatalog.js
+++ b/tgui/packages/tgui/interfaces/FishCatalog.js
@@ -8,32 +8,31 @@ import { capitalize } from 'common/string';
 
 export const FishCatalog = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    fish_info,
-    sponsored_by,
-  } = data;
-  const fish_by_name = flow([
-    sortBy(fish => fish.name),
-  ])(data.fish_info || []);
-  const [
-    currentFish,
-    setCurrentFish,
-  ] = useLocalState(context, 'currentFish', null);
+  const { fish_info, sponsored_by } = data;
+  const fish_by_name = flow([sortBy((fish) => fish.name)])(
+    data.fish_info || [],
+  );
+  const [currentFish, setCurrentFish] = useLocalState(
+    context,
+    'currentFish',
+    null,
+  );
   return (
-    <Window
-      width={500}
-      height={300}>
+    <Window width={500} height={300}>
       <Window.Content>
         <Stack fill>
           <Stack.Item width="120px">
             <Section fill scrollable>
-              {fish_by_name.map(f => (
+              {fish_by_name.map((f) => (
                 <Button
                   key={f.name}
                   fluid
                   color="transparent"
                   selected={f === currentFish}
-                  onClick={() => { setCurrentFish(f); }}>
+                  onClick={() => {
+                    setCurrentFish(f);
+                  }}
+                >
                   {f.name}
                 </Button>
               ))}
@@ -43,9 +42,12 @@ export const FishCatalog = (props, context) => {
             <Section
               fill
               scrollable
-              title={currentFish
-                ? capitalize(currentFish.name)
-                : sponsored_by + " Fish Index"}>
+              title={
+                currentFish
+                  ? capitalize(currentFish.name)
+                  : sponsored_by + ' Fish Index'
+              }
+            >
               {currentFish && (
                 <LabeledList>
                   <LabeledList.Item label="Description">
@@ -64,11 +66,7 @@ export const FishCatalog = (props, context) => {
                     {currentFish.source}
                   </LabeledList.Item>
                   <LabeledList.Item label="Illustration">
-                    <Box
-                      className={classes([
-                        'fish32x32',
-                        currentFish.icon,
-                      ])} />
+                    <Box className={classes(['fish32x32', currentFish.icon])} />
                   </LabeledList.Item>
                 </LabeledList>
               )}
diff --git a/tgui/packages/tgui/interfaces/Folder.js b/tgui/packages/tgui/interfaces/Folder.js
index 0d966896d494..affdb35ee7ae 100644
--- a/tgui/packages/tgui/interfaces/Folder.js
+++ b/tgui/packages/tgui/interfaces/Folder.js
@@ -1,24 +1,24 @@
-import { useBackend } from "../backend";
-import { Box, Button, Flex, Section } from "../components";
-import { Window } from "../layouts";
+import { useBackend } from '../backend';
+import { Box, Button, Flex, Section } from '../components';
+import { Window } from '../layouts';
 
 export const Folder = (props, context) => {
   const { act, data } = useBackend(context);
   const { theme, bg_color, folder_name, contents, contents_ref } = data;
   return (
     <Window
-      title={folder_name || "Folder"}
+      title={folder_name || 'Folder'}
       theme={theme}
       width={400}
       height={500}
     >
-      <Window.Content backgroundColor={bg_color || "#7f7f7f"} scrollable>
+      <Window.Content backgroundColor={bg_color || '#7f7f7f'} scrollable>
         {contents.map((item, index) => (
           <Flex
             key={contents_ref[index]}
             color="black"
             backgroundColor="white"
-            style={{ padding: "2px 2px 0 2px" }}
+            style={{ padding: '2px 2px 0 2px' }}
             mb={0.5}
           >
             <Flex.Item align="center" grow={1}>
@@ -28,12 +28,12 @@ export const Folder = (props, context) => {
               {
                 <Button
                   icon="search"
-                  onClick={() => act("examine", { ref: contents_ref[index] })}
+                  onClick={() => act('examine', { ref: contents_ref[index] })}
                 />
               }
               <Button
                 icon="eject"
-                onClick={() => act("remove", { ref: contents_ref[index] })}
+                onClick={() => act('remove', { ref: contents_ref[index] })}
               />
             </Flex.Item>
           </Flex>
diff --git a/tgui/packages/tgui/interfaces/ForbiddenLore.js b/tgui/packages/tgui/interfaces/ForbiddenLore.js
index 492fceaaa763..3de83b42728c 100644
--- a/tgui/packages/tgui/interfaces/ForbiddenLore.js
+++ b/tgui/packages/tgui/interfaces/ForbiddenLore.js
@@ -6,26 +6,21 @@ import { Window } from '../layouts';
 
 export const ForbiddenLore = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    charges,
-  } = data;
+  const { charges } = data;
   const to_know = flow([
-    sortBy(to_know => to_know.state !== "Research",
-      to_know => to_know.path === "Side"),
+    sortBy(
+      (to_know) => to_know.state !== 'Research',
+      (to_know) => to_know.path === 'Side',
+    ),
   ])(data.to_know || []);
   return (
-    <Window
-      width={500}
-      height={900}>
+    <Window width={500} height={900}>
       <Window.Content scrollable>
         <Section title="Research Eldritch Knowledge">
           Charges left : {charges}
-          {to_know!== null ? (
-            to_know.map(knowledge => (
-              <Section
-                key={knowledge.name}
-                title={knowledge.name}
-                level={2}>
+          {to_know !== null ? (
+            to_know.map((knowledge) => (
+              <Section key={knowledge.name} title={knowledge.name} level={2}>
                 <Box bold my={1}>
                   {knowledge.path} path
                 </Box>
@@ -33,25 +28,23 @@ export const ForbiddenLore = (props, context) => {
                   <Button
                     content={knowledge.state}
                     disabled={knowledge.disabled}
-                    onClick={() => act('research', {
-                      name: knowledge.name,
-                      cost: knowledge.cost,
-                    })} />
-                  {' '}
+                    onClick={() =>
+                      act('research', {
+                        name: knowledge.name,
+                        cost: knowledge.cost,
+                      })
+                    }
+                  />{' '}
                   Cost : {knowledge.cost}
-                </Box >
+                </Box>
                 <Box italic my={1}>
                   {knowledge.flavour}
                 </Box>
-                <Box my={1}>
-                  {knowledge.desc}
-                </Box>
+                <Box my={1}>{knowledge.desc}</Box>
               </Section>
             ))
           ) : (
-            <Box>
-              No more knowledge can be found
-            </Box>
+            <Box>No more knowledge can be found</Box>
           )}
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/GasAnalyzer.tsx b/tgui/packages/tgui/interfaces/GasAnalyzer.tsx
index 84f8ac654a8d..83497f28adf4 100644
--- a/tgui/packages/tgui/interfaces/GasAnalyzer.tsx
+++ b/tgui/packages/tgui/interfaces/GasAnalyzer.tsx
@@ -11,9 +11,7 @@ export const GasAnalyzerContent = (props, context) => {
     <>
       {gasmixes.map((gasmix) => (
         <Section title={gasmix.name} key={gasmix.reference}>
-          <GasmixParser
-            gasmix={gasmix}
-          />
+          <GasmixParser gasmix={gasmix} />
         </Section>
       ))}
     </>
diff --git a/tgui/packages/tgui/interfaces/Gateway.js b/tgui/packages/tgui/interfaces/Gateway.js
index 402187a0f83a..d232f9522b50 100644
--- a/tgui/packages/tgui/interfaces/Gateway.js
+++ b/tgui/packages/tgui/interfaces/Gateway.js
@@ -1,5 +1,12 @@
 import { useBackend } from '../backend';
-import { Box, Button, Icon, NoticeBox, ProgressBar, Section } from '../components';
+import {
+  Box,
+  Button,
+  Icon,
+  NoticeBox,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const Gateway = () => {
@@ -23,12 +30,8 @@ const GatewayContent = (props, context) => {
   if (!gateway_present) {
     return (
       <Section>
-        <NoticeBox>
-          No linked gateway
-        </NoticeBox>
-        <Button
-          fluid
-          onClick={() => act('linkup')}>
+        <NoticeBox>No linked gateway</NoticeBox>
+        <Button fluid onClick={() => act('linkup')}>
           Linkup
         </Button>
       </Section>
@@ -36,53 +39,40 @@ const GatewayContent = (props, context) => {
   }
   if (current_target) {
     return (
-      <Section
-        title={current_target.name}>
+      <Section title={current_target.name}>
         <Icon name="rainbow" size={4} color="green" />
-        <Button
-          fluid
-          onClick={() => act("deactivate")}>
+        <Button fluid onClick={() => act('deactivate')}>
           Deactivate
         </Button>
       </Section>
     );
   }
   if (!destinations.length) {
-    return (
-      <Section>
-        No gateway nodes detected.
-      </Section>
-    );
+    return <Section>No gateway nodes detected.</Section>;
   }
   return (
     <>
-      {!gateway_status && (
-        <NoticeBox>
-          Gateway Unpowered
-        </NoticeBox>
-      )}
-      {destinations.map(dest => (
-        <Section
-          key={dest.ref}
-          title={dest.name}>
-          {dest.available && (
+      {!gateway_status && <NoticeBox>Gateway Unpowered</NoticeBox>}
+      {destinations.map((dest) => (
+        <Section key={dest.ref} title={dest.name}>
+          {(dest.available && (
             <Button
               fluid
-              onClick={() => act('activate', {
-                destination: dest.ref,
-              })}>
+              onClick={() =>
+                act('activate', {
+                  destination: dest.ref,
+                })
+              }
+            >
               Activate
             </Button>
-          ) || (
+          )) || (
             <>
               <Box m={1} textColor="bad">
                 {dest.reason}
               </Box>
               {!!dest.timeout && (
-                <ProgressBar
-                  value={dest.timeout}>
-                  Calibrating...
-                </ProgressBar>
+                <ProgressBar value={dest.timeout}>Calibrating...</ProgressBar>
               )}
             </>
           )}
diff --git a/tgui/packages/tgui/interfaces/GhostPoolProtection.js b/tgui/packages/tgui/interfaces/GhostPoolProtection.js
index 8ef2527b0057..cba4e9cf557d 100644
--- a/tgui/packages/tgui/interfaces/GhostPoolProtection.js
+++ b/tgui/packages/tgui/interfaces/GhostPoolProtection.js
@@ -16,7 +16,8 @@ export const GhostPoolProtection = (props, context) => {
       title="Ghost Pool Protection"
       width={400}
       height={270}
-      theme="admin">
+      theme="admin"
+    >
       <Window.Content>
         <Flex grow={1} height="100%">
           <Section
@@ -27,64 +28,71 @@ export const GhostPoolProtection = (props, context) => {
                   color="good"
                   icon="plus-circle"
                   content="Enable Everything"
-                  onClick={() => act("all_roles")} />
+                  onClick={() => act('all_roles')}
+                />
                 <Button
                   color="bad"
                   icon="minus-circle"
                   content="Disable Everything"
-                  onClick={() => act("no_roles")} />
+                  onClick={() => act('no_roles')}
+                />
               </>
-            }>
+            }
+          >
             <NoticeBox danger>
-              For people creating a sneaky event: If you
-              toggle Station Created Sentience, people may
-              catch on that admins have disabled roles for
+              For people creating a sneaky event: If you toggle Station Created
+              Sentience, people may catch on that admins have disabled roles for
               your event...
             </NoticeBox>
             <Flex.Item>
               <Button
                 fluid
                 textAlign="center"
-                color={events_or_midrounds ? "good" : "bad"}
+                color={events_or_midrounds ? 'good' : 'bad'}
                 icon="meteor"
                 content="Events and Midround Rulesets"
-                onClick={() => act("toggle_events_or_midrounds")} />
+                onClick={() => act('toggle_events_or_midrounds')}
+              />
             </Flex.Item>
             <Flex.Item>
               <Button
                 fluid
                 textAlign="center"
-                color={spawners ? "good" : "bad"}
+                color={spawners ? 'good' : 'bad'}
                 icon="pastafarianism"
                 content="Ghost Role Spawners"
-                onClick={() => act("toggle_spawners")} />
+                onClick={() => act('toggle_spawners')}
+              />
             </Flex.Item>
             <Flex.Item>
               <Button
                 fluid
                 textAlign="center"
-                color={station_sentience ? "good" : "bad"}
+                color={station_sentience ? 'good' : 'bad'}
                 icon="user-astronaut"
                 content="Station Created Sentience"
-                onClick={() => act("toggle_station_sentience")} />
+                onClick={() => act('toggle_station_sentience')}
+              />
             </Flex.Item>
             <Flex.Item>
               <Button
                 fluid
                 textAlign="center"
-                color={silicons ? "good" : "bad"}
+                color={silicons ? 'good' : 'bad'}
                 icon="robot"
                 content="Silicons"
-                onClick={() => act("toggle_silicons")} />
+                onClick={() => act('toggle_silicons')}
+              />
             </Flex.Item>
             <Flex.Item>
               <Button
                 fluid
                 textAlign="center"
-                color={minigames ? "good" : "bad"}
+                color={minigames ? 'good' : 'bad'}
                 icon="gamepad"
                 content="Minigames"
-                onClick={() => act("toggle_minigames")} />
+                onClick={() => act('toggle_minigames')}
+              />
             </Flex.Item>
             <Flex.Item>
               <Button
@@ -93,7 +101,8 @@ export const GhostPoolProtection = (props, context) => {
                 color="orange"
                 icon="check"
                 content="Apply Changes"
-                onClick={() => act("apply_settings")} />
+                onClick={() => act('apply_settings')}
+              />
             </Flex.Item>
           </Section>
         </Flex>
diff --git a/tgui/packages/tgui/interfaces/GlandDispenser.js b/tgui/packages/tgui/interfaces/GlandDispenser.js
index f572a92f0634..72fabc86e3d3 100644
--- a/tgui/packages/tgui/interfaces/GlandDispenser.js
+++ b/tgui/packages/tgui/interfaces/GlandDispenser.js
@@ -4,17 +4,12 @@ import { Window } from '../layouts';
 
 export const GlandDispenser = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    glands = [],
-  } = data;
+  const { glands = [] } = data;
   return (
-    <Window
-      width={300}
-      height={338}
-      theme="abductor">
+    <Window width={300} height={338} theme="abductor">
       <Window.Content>
         <Section>
-          {glands.map(gland => (
+          {glands.map((gland) => (
             <Button
               key={gland.id}
               width="60px"
@@ -24,11 +19,14 @@ export const GlandDispenser = (props, context) => {
               lineHeight="55px"
               icon="eject"
               backgroundColor={gland.color}
-              content={gland.amount || "0"}
+              content={gland.amount || '0'}
               disabled={!gland.amount}
-              onClick={() => act('dispense', {
-                gland_id: gland.id,
-              })} />
+              onClick={() =>
+                act('dispense', {
+                  gland_id: gland.id,
+                })
+              }
+            />
           ))}
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/Gps.js b/tgui/packages/tgui/interfaces/Gps.js
index 9980aca19c14..6166f04bfcd6 100644
--- a/tgui/packages/tgui/interfaces/Gps.js
+++ b/tgui/packages/tgui/interfaces/Gps.js
@@ -6,70 +6,68 @@ import { useBackend } from '../backend';
 import { Box, Button, Icon, LabeledList, Section, Table } from '../components';
 import { Window } from '../layouts';
 
-const coordsToVec = coords => map(parseFloat)(coords.split(', '));
+const coordsToVec = (coords) => map(parseFloat)(coords.split(', '));
 
 export const Gps = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    currentArea,
-    currentCoords,
-    globalmode,
-    power,
-    tag,
-    updating,
-  } = data;
+  const { currentArea, currentCoords, globalmode, power, tag, updating } = data;
   const signals = flow([
     map((signal, index) => {
       // Calculate distance to the target. BYOND distance is capped to 127,
       // that's why we roll our own calculations here.
-      const dist = signal.dist && (
-        Math.round(vecLength(vecSubtract(
-          coordsToVec(currentCoords),
-          coordsToVec(signal.coords))))
-      );
+      const dist =
+        signal.dist &&
+        Math.round(
+          vecLength(
+            vecSubtract(coordsToVec(currentCoords), coordsToVec(signal.coords)),
+          ),
+        );
       return { ...signal, dist, index };
     }),
     sortBy(
       // Signals with distance metric go first
-      signal => signal.dist === undefined,
+      (signal) => signal.dist === undefined,
       // Sort alphabetically
-      signal => signal.entrytag),
+      (signal) => signal.entrytag,
+    ),
   ])(data.signals || []);
   return (
-    <Window
-      title="Global Positioning System"
-      width={470}
-      height={700}>
+    <Window title="Global Positioning System" width={470} height={700}>
       <Window.Content scrollable>
         <Section
           title="Control"
-          buttons={(
+          buttons={
             <Button
               icon="power-off"
-              content={power ? "On" : "Off"}
+              content={power ? 'On' : 'Off'}
               selected={power}
-              onClick={() => act('power')} />
-          )}>
+              onClick={() => act('power')}
+            />
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Tag">
               <Button
                 icon="pencil-alt"
                 content={tag}
-                onClick={() => act('rename')} />
+                onClick={() => act('rename')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Scan Mode">
               <Button
-                icon={updating ? "unlock" : "lock"}
-                content={updating ? "AUTO" : "MANUAL"}
-                color={!updating && "bad"}
-                onClick={() => act('updating')} />
+                icon={updating ? 'unlock' : 'lock'}
+                content={updating ? 'AUTO' : 'MANUAL'}
+                color={!updating && 'bad'}
+                onClick={() => act('updating')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Range">
               <Button
                 icon="sync"
-                content={globalmode ? "MAXIMUM" : "LOCAL"}
+                content={globalmode ? 'MAXIMUM' : 'LOCAL'}
                 selected={!globalmode}
-                onClick={() => act('globalmode')} />
+                onClick={() => act('globalmode')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
@@ -87,34 +85,32 @@ export const Gps = (props, context) => {
                   <Table.Cell collapsing content="Direction" />
                   <Table.Cell collapsing content="Coordinates" />
                 </Table.Row>
-                {signals.map(signal => (
+                {signals.map((signal) => (
                   <Table.Row
                     key={signal.entrytag + signal.coords + signal.index}
-                    className="candystripe">
+                    className="candystripe"
+                  >
                     <Table.Cell bold color="label">
                       {signal.entrytag}
                     </Table.Cell>
                     <Table.Cell
                       collapsing
-                      opacity={signal.dist !== undefined && (
-                        clamp(
-                          1.2 / Math.log(Math.E + signal.dist / 20),
-                          0.4, 1)
-                      )}>
+                      opacity={
+                        signal.dist !== undefined &&
+                        clamp(1.2 / Math.log(Math.E + signal.dist / 20), 0.4, 1)
+                      }
+                    >
                       {signal.degrees !== undefined && (
                         <Icon
                           mr={1}
                           size={1.2}
                           name="arrow-up"
-                          rotation={signal.degrees} />
+                          rotation={signal.degrees}
+                        />
                       )}
-                      {signal.dist !== undefined && (
-                        signal.dist + 'm'
-                      )}
-                    </Table.Cell>
-                    <Table.Cell collapsing>
-                      {signal.coords}
+                      {signal.dist !== undefined && signal.dist + 'm'}
                     </Table.Cell>
+                    <Table.Cell collapsing>{signal.coords}</Table.Cell>
                   </Table.Row>
                 ))}
               </Table>
diff --git a/tgui/packages/tgui/interfaces/GravityGenerator.js b/tgui/packages/tgui/interfaces/GravityGenerator.js
index 699653c2be72..3db1b1b7fecd 100644
--- a/tgui/packages/tgui/interfaces/GravityGenerator.js
+++ b/tgui/packages/tgui/interfaces/GravityGenerator.js
@@ -1,23 +1,22 @@
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../components';
+import {
+  Box,
+  Button,
+  LabeledList,
+  NoticeBox,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const GravityGenerator = (props, context) => {
   const { data } = useBackend(context);
   const { operational } = data;
   return (
-    <Window
-      width={400}
-      height={155}>
+    <Window width={400} height={155}>
       <Window.Content>
-        {!operational && (
-          <NoticeBox>
-            No data available
-          </NoticeBox>
-        )}
-        {!!operational && (
-          <GravityGeneratorContent />
-        )}
+        {!operational && <NoticeBox>No data available</NoticeBox>}
+        {!!operational && <GravityGeneratorContent />}
       </Window.Content>
     </Window>
   );
@@ -25,13 +24,7 @@ export const GravityGenerator = (props, context) => {
 
 const GravityGeneratorContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    breaker,
-    charge_count,
-    charging_state,
-    on,
-    operational,
-  } = data;
+  const { breaker, charge_count, charging_state, on, operational } = data;
   return (
     <Section>
       <LabeledList>
@@ -41,7 +34,8 @@ const GravityGeneratorContent = (props, context) => {
             content={breaker ? 'On' : 'Off'}
             selected={breaker}
             disabled={!operational}
-            onClick={() => act('gentoggle')} />
+            onClick={() => act('gentoggle')}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Gravity Charge">
           <ProgressBar
@@ -50,29 +44,16 @@ const GravityGeneratorContent = (props, context) => {
               good: [0.7, Infinity],
               average: [0.3, 0.7],
               bad: [-Infinity, 0.3],
-            }} />
+            }}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Charge Mode">
-          {charging_state === 0 && (
-            on && (
-              <Box color="good">
-                Fully Charged
-              </Box>
-            ) || (
-              <Box color="bad">
-                Not Charging
-              </Box>
+          {charging_state === 0 &&
+            ((on && <Box color="good">Fully Charged</Box>) || (
+              <Box color="bad">Not Charging</Box>
             ))}
-          {charging_state === 1 && (
-            <Box color="average">
-              Charging
-            </Box>
-          )}
-          {charging_state === 2 && (
-            <Box color="average">
-              Discharging
-            </Box>
-          )}
+          {charging_state === 1 && <Box color="average">Charging</Box>}
+          {charging_state === 2 && <Box color="average">Discharging</Box>}
         </LabeledList.Item>
       </LabeledList>
     </Section>
diff --git a/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx b/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx
index e00e34cc5e0a..ed55b438dc69 100644
--- a/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx
+++ b/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx
@@ -1,24 +1,36 @@
 import { useBackend } from '../backend';
-import { Box, Button, ColorBox, Flex, Stack, Icon, Input, LabeledList, Section, Table, Divider } from '../components';
+import {
+  Box,
+  Button,
+  ColorBox,
+  Flex,
+  Stack,
+  Icon,
+  Input,
+  LabeledList,
+  Section,
+  Table,
+  Divider,
+} from '../components';
 import { Window } from '../layouts';
 
 type ColorEntry = {
   index: Number;
   value: string;
-}
+};
 
 type SpriteData = {
   icon_states: string[];
   finished: string;
   steps: SpriteEntry[];
   time_spent: Number;
-}
+};
 
 type SpriteEntry = {
   layer: string;
   result: string;
   config_name: string;
-}
+};
 
 type GreyscaleMenuData = {
   greyscale_config: string;
@@ -30,28 +42,28 @@ type GreyscaleMenuData = {
   sprites_dir: string;
   icon_state: string;
   refreshing: boolean;
-}
+};
 
 enum Direction {
-  North = "north",
-  NorthEast = "northeast",
-  East = "east",
-  SouthEast = "southeast",
-  South = "south",
-  SouthWest = "southwest",
-  West = "west",
-  NorthWest = "northwest"
+  North = 'north',
+  NorthEast = 'northeast',
+  East = 'east',
+  SouthEast = 'southeast',
+  South = 'south',
+  SouthWest = 'southwest',
+  West = 'west',
+  NorthWest = 'northwest',
 }
 
-const DirectionAbbreviation : Record<Direction, string> = {
-  [Direction.North]: "N",
-  [Direction.NorthEast]: "NE",
-  [Direction.East]: "E",
-  [Direction.SouthEast]: "SE",
-  [Direction.South]: "S",
-  [Direction.SouthWest]: "SW",
-  [Direction.West]: "W",
-  [Direction.NorthWest]: "NW",
+const DirectionAbbreviation: Record<Direction, string> = {
+  [Direction.North]: 'N',
+  [Direction.NorthEast]: 'NE',
+  [Direction.East]: 'E',
+  [Direction.SouthEast]: 'SE',
+  [Direction.South]: 'S',
+  [Direction.SouthWest]: 'SW',
+  [Direction.West]: 'W',
+  [Direction.NorthWest]: 'NW',
 };
 
 const ConfigDisplay = (props, context) => {
@@ -60,13 +72,12 @@ const ConfigDisplay = (props, context) => {
     <Section title="Designs">
       <LabeledList>
         <LabeledList.Item label="Design Type">
-          <Button
-            icon="cogs"
-            onClick={() => act("select_config")}
-          />
+          <Button icon="cogs" onClick={() => act('select_config')} />
           <Input
             value={data.greyscale_config}
-            onChange={(_, value) => act("load_config_from_string", { config_string: value })}
+            onChange={(_, value) =>
+              act('load_config_from_string', { config_string: value })
+            }
           />
         </LabeledList.Item>
       </LabeledList>
@@ -76,46 +87,46 @@ const ConfigDisplay = (props, context) => {
 
 const ColorDisplay = (props, context) => {
   const { act, data } = useBackend<GreyscaleMenuData>(context);
-  const colors = (data.colors || []);
+  const colors = data.colors || [];
   return (
     <Section title="Colors">
       <LabeledList>
-        <LabeledList.Item
-          label="Full Color String">
+        <LabeledList.Item label="Full Color String">
           <Button
             icon="dice"
-            onClick={() => act("random_all_colors")}
+            onClick={() => act('random_all_colors')}
             tooltip="Randomizes all color groups."
           />
           <Input
-            value={colors.map(item => item.value).join('')}
-            onChange={(_, value) => act("recolor_from_string", { color_string: value })}
+            value={colors.map((item) => item.value).join('')}
+            onChange={(_, value) =>
+              act('recolor_from_string', { color_string: value })
+            }
           />
         </LabeledList.Item>
-        {colors.map(item => (
+        {colors.map((item) => (
           <LabeledList.Item
             key={`colorgroup${item.index}${item.value}`}
             label={`Color Group ${item.index}`}
             color={item.value}
           >
-            <ColorBox
-              color={item.value}
-            />
-            {" "}
+            <ColorBox color={item.value} />{' '}
             <Button
               icon="palette"
-              onClick={() => act("pick_color", { color_index: item.index })}
+              onClick={() => act('pick_color', { color_index: item.index })}
               tooltip="Brings up a color pick window to replace this color group."
             />
             <Button
               icon="dice"
-              onClick={() => act("random_color", { color_index: item.index })}
+              onClick={() => act('random_color', { color_index: item.index })}
               tooltip="Randomizes the color for this color group."
             />
             <Input
               value={item.value}
               width={7}
-              onChange={(_, value) => act("recolor", { color_index: item.index, new_color: value })}
+              onChange={(_, value) =>
+                act('recolor', { color_index: item.index, new_color: value })
+              }
             />
           </LabeledList.Item>
         ))}
@@ -163,7 +174,7 @@ const SingleDirection = (props, context) => {
         tooltip={`Sets the direction of the preview sprite to ${dir}`}
         disabled={`${dir}` === data.sprites_dir ? true : false}
         textAlign="center"
-        onClick={() => act("change_dir", { new_sprite_dir: dir })}
+        onClick={() => act('change_dir', { new_sprite_dir: dir })}
         lineHeight={3}
         m={-0.2}
         fluid
@@ -177,18 +188,16 @@ const IconStatesDisplay = (props, context) => {
   return (
     <Section title="Icon States">
       <Flex>
-        {
-          data.sprites.icon_states.map(item => (
-            <Flex.Item key={item}>
-              <Button
-                mx={0.5}
-                content={item ? item : "Blank State"}
-                disabled={item === data.icon_state}
-                onClick={() => act("select_icon_state", { new_icon_state: item })}
-              />
-            </Flex.Item>
-          ))
-        }
+        {data.sprites.icon_states.map((item) => (
+          <Flex.Item key={item}>
+            <Button
+              mx={0.5}
+              content={item ? item : 'Blank State'}
+              disabled={item === data.icon_state}
+              onClick={() => act('select_icon_state', { new_icon_state: item })}
+            />
+          </Flex.Item>
+        ))}
       </Flex>
     </Section>
   );
@@ -203,73 +212,78 @@ const PreviewDisplay = (props, context) => {
           <Table.Cell width="50%">
             <PreviewCompassSelect />
           </Table.Cell>
-          {
-            data.sprites?.finished
-              ? (
+          {data.sprites?.finished ? (
+            <Table.Cell>
+              <Box
+                as="img"
+                src={data.sprites.finished}
+                m={0}
+                width="75%"
+                mx="10%"
+                style={{ '-ms-interpolation-mode': 'nearest-neighbor' }}
+              />
+            </Table.Cell>
+          ) : (
+            <Table.Cell>
+              <Box grow>
+                <Icon
+                  name="image"
+                  ml="25%"
+                  size={5}
+                  style={{ '-ms-interpolation-mode': 'nearest-neighbor' }}
+                />
+              </Box>
+            </Table.Cell>
+          )}
+        </Table.Row>
+      </Table>
+      {!!data.generate_full_preview &&
+        `Time Spent: ${data.sprites.time_spent}ms`}
+      <Divider />
+      {!data.refreshing && (
+        <Table>
+          {!!data.generate_full_preview && data.sprites.steps !== null && (
+            <Table.Row header>
+              <Table.Cell width="50%" textAlign="center">
+                Layer Source
+              </Table.Cell>
+              <Table.Cell width="25%" textAlign="center">
+                Step Layer
+              </Table.Cell>
+              <Table.Cell width="25%" textAlign="center">
+                Step Result
+              </Table.Cell>
+            </Table.Row>
+          )}
+          {!!data.generate_full_preview &&
+            data.sprites.steps !== null &&
+            data.sprites.steps.map((item) => (
+              <Table.Row key={`${item.result}|${item.layer}`}>
+                <Table.Cell verticalAlign="middle">
+                  {item.config_name}
+                </Table.Cell>
                 <Table.Cell>
-                  <Box as="img" src={data.sprites.finished} m={0} width="75%" mx="10%" style={{ "-ms-interpolation-mode": "nearest-neighbor" }} />
+                  <SingleSprite source={item.layer} />
                 </Table.Cell>
-              )
-              : (
                 <Table.Cell>
-                  <Box grow>
-                    <Icon name="image" ml="25%" size={5} style={{ "-ms-interpolation-mode": "nearest-neighbor" }} />
-                  </Box>
+                  <SingleSprite source={item.result} />
                 </Table.Cell>
-              )
-          }
-        </Table.Row>
-      </Table>
-      {
-        !!data.generate_full_preview
-          && `Time Spent: ${data.sprites.time_spent}ms`
-      }
-      <Divider />
-      {
-        !data.refreshing
-          && (
-            <Table>
-              {
-                !!data.generate_full_preview && data.sprites.steps !== null
-                  && (
-                    <Table.Row header>
-                      <Table.Cell width="50%" textAlign="center">Layer Source</Table.Cell>
-                      <Table.Cell width="25%" textAlign="center">Step Layer</Table.Cell>
-                      <Table.Cell width="25%" textAlign="center">Step Result</Table.Cell>
-                    </Table.Row>
-                  )
-              }
-              {
-                !!data.generate_full_preview && data.sprites.steps !== null
-                  && data.sprites.steps.map(item => (
-                    <Table.Row key={`${item.result}|${item.layer}`}>
-                      <Table.Cell verticalAlign="middle">{item.config_name}</Table.Cell>
-                      <Table.Cell>
-                        <SingleSprite source={item.layer} />
-                      </Table.Cell>
-                      <Table.Cell>
-                        <SingleSprite source={item.result} />
-                      </Table.Cell>
-                    </Table.Row>
-                  ))
-              }
-            </Table>
-          )
-      }
+              </Table.Row>
+            ))}
+        </Table>
+      )}
     </Section>
   );
 };
 
 const SingleSprite = (props) => {
-  const {
-    source,
-  } = props;
+  const { source } = props;
   return (
     <Box
       as="img"
       src={source}
       width="100%"
-      style={{ "-ms-interpolation-mode": "nearest-neighbor" }}
+      style={{ '-ms-interpolation-mode': 'nearest-neighbor' }}
     />
   );
 };
@@ -285,60 +299,54 @@ const LoadingAnimation = () => {
 export const GreyscaleModifyMenu = (props, context) => {
   const { act, data } = useBackend<GreyscaleMenuData>(context);
   return (
-    <Window
-      title="Color Configuration"
-      width={325}
-      height={800}>
+    <Window title="Color Configuration" width={325} height={800}>
       <Window.Content scrollable>
         <ConfigDisplay />
         <ColorDisplay />
         <IconStatesDisplay />
         <Flex direction="column">
-          {
-            !!data.unlocked
-              && (
-                <Flex.Item justify="flex-start">
-                  <Button
-                    content={<Icon name="file-image-o" spin={data.monitoring_files} />}
-                    tooltip="Continuously checks files for changes and reloads when necessary. WARNING: Very expensive"
-                    selected={data.monitoring_files}
-                    onClick={() => act("toggle_mass_refresh")}
-                    width={1.9}
-                    mr={-0.2}
-                  />
-                  <Button
-                    content="Refresh Icon File"
-                    tooltip="Loads the json configuration and icon file fresh from disk. This is useful to avoid restarting the server to see changes. WARNING: Expensive"
-                    onClick={() => act("refresh_file")}
-                  />
-                  <Button
-                    content="Save Icon File"
-                    tooltip="Saves the icon to a temp file in tmp/. This is useful if you want to use a generated icon elsewhere or just view a more accurate representation"
-                    onClick={() => act("save_dmi")}
-                  />
-                </Flex.Item>
-              )
-          }
+          {!!data.unlocked && (
+            <Flex.Item justify="flex-start">
+              <Button
+                content={
+                  <Icon name="file-image-o" spin={data.monitoring_files} />
+                }
+                tooltip="Continuously checks files for changes and reloads when necessary. WARNING: Very expensive"
+                selected={data.monitoring_files}
+                onClick={() => act('toggle_mass_refresh')}
+                width={1.9}
+                mr={-0.2}
+              />
+              <Button
+                content="Refresh Icon File"
+                tooltip="Loads the json configuration and icon file fresh from disk. This is useful to avoid restarting the server to see changes. WARNING: Expensive"
+                onClick={() => act('refresh_file')}
+              />
+              <Button
+                content="Save Icon File"
+                tooltip="Saves the icon to a temp file in tmp/. This is useful if you want to use a generated icon elsewhere or just view a more accurate representation"
+                onClick={() => act('save_dmi')}
+              />
+            </Flex.Item>
+          )}
           <Flex.Item>
             <Button
               content="Apply"
               tooltip="Applies changes made to the object this menu was created from."
               color="red"
-              onClick={() => act("apply")}
+              onClick={() => act('apply')}
             />
             <Button.Checkbox
               content="Full Preview"
               tooltip="Generates and displays the full sprite generation process instead of just the final output."
               disabled={!data.generate_full_preview && !data.unlocked}
               checked={data.generate_full_preview}
-              onClick={() => act("toggle_full_preview")}
+              onClick={() => act('toggle_full_preview')}
             />
           </Flex.Item>
         </Flex>
         <PreviewDisplay />
-        {
-          !!data.refreshing && <LoadingAnimation />
-        }
+        {!!data.refreshing && <LoadingAnimation />}
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/GulagItemReclaimer.js b/tgui/packages/tgui/interfaces/GulagItemReclaimer.js
index d2d8fc5b4de8..bef454da0e92 100644
--- a/tgui/packages/tgui/interfaces/GulagItemReclaimer.js
+++ b/tgui/packages/tgui/interfaces/GulagItemReclaimer.js
@@ -4,34 +4,27 @@ import { Window } from '../layouts';
 
 export const GulagItemReclaimer = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    mobs = [],
-  } = data;
+  const { mobs = [] } = data;
   return (
-    <Window
-      width={325}
-      height={400}>
+    <Window width={325} height={400}>
       <Window.Content scrollable>
-        {mobs.length === 0 && (
-          <NoticeBox>
-            No stored items
-          </NoticeBox>
-        )}
+        {mobs.length === 0 && <NoticeBox>No stored items</NoticeBox>}
         {mobs.length > 0 && (
           <Section title="Stored Items">
             <Table>
-              {mobs.map(mob => (
+              {mobs.map((mob) => (
                 <Table.Row key={mob.mob}>
-                  <Table.Cell>
-                    {mob.name}
-                  </Table.Cell>
+                  <Table.Cell>{mob.name}</Table.Cell>
                   <Table.Cell textAlign="right">
                     <Button
                       content="Retrieve Items"
                       disabled={!data.can_reclaim}
-                      onClick={() => act('release_items', {
-                        mobref: mob.mob,
-                      })} />
+                      onClick={() =>
+                        act('release_items', {
+                          mobref: mob.mob,
+                        })
+                      }
+                    />
                   </Table.Cell>
                 </Table.Row>
               ))}
diff --git a/tgui/packages/tgui/interfaces/GulagTeleporterConsole.js b/tgui/packages/tgui/interfaces/GulagTeleporterConsole.js
index 3ac2d0a59be1..59e110b0f225 100644
--- a/tgui/packages/tgui/interfaces/GulagTeleporterConsole.js
+++ b/tgui/packages/tgui/interfaces/GulagTeleporterConsole.js
@@ -18,47 +18,55 @@ export const GulagTeleporterConsole = (props, context) => {
     prisoner = {},
   } = data;
   return (
-    <Window
-      width={350}
-      height={295}>
+    <Window width={350} height={295}>
       <Window.Content>
         <Section
           title="Teleporter Console"
-          buttons={(
+          buttons={
             <>
               <Button
                 content={teleporter_state_open ? 'Open' : 'Closed'}
                 disabled={teleporter_lock}
                 selected={teleporter_state_open}
-                onClick={() => act('toggle_open')} />
+                onClick={() => act('toggle_open')}
+              />
               <Button
                 icon={teleporter_lock ? 'lock' : 'unlock'}
                 content={teleporter_lock ? 'Locked' : 'Unlocked'}
                 selected={teleporter_lock}
                 disabled={teleporter_state_open}
-                onClick={() => act('teleporter_lock')} />
+                onClick={() => act('teleporter_lock')}
+              />
             </>
-          )}>
+          }
+        >
           <LabeledList>
             <LabeledList.Item
               label="Teleporter Unit"
               color={teleporter ? 'good' : 'bad'}
-              buttons={!teleporter && (
-                <Button
-                  content="Reconnect"
-                  onClick={() => act('scan_teleporter')}
-                />
-              )}>
+              buttons={
+                !teleporter && (
+                  <Button
+                    content="Reconnect"
+                    onClick={() => act('scan_teleporter')}
+                  />
+                )
+              }
+            >
               {teleporter ? teleporter_location : 'Not Connected'}
             </LabeledList.Item>
             <LabeledList.Item
               label="Receiver Beacon"
               color={beacon ? 'good' : 'bad'}
-              buttons={!beacon && (
-                <Button
-                  content="Reconnect"
-                  onClick={() => act('scan_beacon')} />
-              )}>
+              buttons={
+                !beacon && (
+                  <Button
+                    content="Reconnect"
+                    onClick={() => act('scan_beacon')}
+                  />
+                )
+              }
+            >
               {beacon ? beacon_location : 'Not Connected'}
             </LabeledList.Item>
           </LabeledList>
@@ -69,7 +77,8 @@ export const GulagTeleporterConsole = (props, context) => {
               <Button
                 fluid
                 content={id ? id_name : 'No ID'}
-                onClick={() => act('handle_id')} />
+                onClick={() => act('handle_id')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Point Goal">
               <NumberInput
@@ -77,7 +86,8 @@ export const GulagTeleporterConsole = (props, context) => {
                 width="48px"
                 minValue={1}
                 maxValue={1000}
-                onChange={(e, value) => act('set_goal', { value })} />
+                onChange={(e, value) => act('set_goal', { value })}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Occupant">
               {prisoner.name || 'No Occupant'}
@@ -93,7 +103,8 @@ export const GulagTeleporterConsole = (props, context) => {
           disabled={!can_teleport}
           textAlign="center"
           color="bad"
-          onClick={() => act('teleport')} />
+          onClick={() => act('teleport')}
+        />
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/HoloPay.tsx b/tgui/packages/tgui/interfaces/HoloPay.tsx
index 13fe55b4fec2..1d16030e12eb 100644
--- a/tgui/packages/tgui/interfaces/HoloPay.tsx
+++ b/tgui/packages/tgui/interfaces/HoloPay.tsx
@@ -1,5 +1,17 @@
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Dropdown, Icon, NoticeBox, RestrictedInput, Section, Stack, Table, TextArea, Tooltip } from '../components';
+import {
+  Box,
+  Button,
+  Dropdown,
+  Icon,
+  NoticeBox,
+  RestrictedInput,
+  Section,
+  Stack,
+  Table,
+  TextArea,
+  Tooltip,
+} from '../components';
 import { Window } from '../layouts';
 
 type HoloPayData = {
@@ -92,8 +104,8 @@ const TerminalDisplay = (props, context) => {
   const { description, force_fee, name, owner, user, shop_logo } = data;
   const { onClick } = props;
   const is_owner = owner === user?.name;
-  const cannot_pay
-    = is_owner || !user || user?.balance < 1 || user?.balance < force_fee;
+  const cannot_pay =
+    is_owner || !user || user?.balance < 1 || user?.balance < force_fee;
   const decodedName = name.replace(/&#(\d+);/g, (_, dec) => {
     return String.fromCharCode(dec);
   });
@@ -104,10 +116,12 @@ const TerminalDisplay = (props, context) => {
         is_owner && (
           <Button icon="edit" onClick={onClick}>
             Setup
-          </Button>)
+          </Button>
+        )
       }
       fill
-      title="Terminal">
+      title="Terminal"
+    >
       <Stack fill vertical>
         <Stack.Item align="center">
           <Icon color="good" name={shop_logo} size="5" />
@@ -185,13 +199,15 @@ const SetupDisplay = (props, context) => {
           onClick={() => {
             act('done');
             onClick();
-          }}>
+          }}
+        >
           Done
         </Button>
       }
       fill
       scrollable
-      title="Settings">
+      title="Settings"
+    >
       <Stack fill vertical>
         <Stack.Item>
           <Box bold color="label">
diff --git a/tgui/packages/tgui/interfaces/Holodeck.js b/tgui/packages/tgui/interfaces/Holodeck.js
index 3f2c0bd41730..48989ace9a45 100644
--- a/tgui/packages/tgui/interfaces/Holodeck.js
+++ b/tgui/packages/tgui/interfaces/Holodeck.js
@@ -4,44 +4,43 @@ import { Window } from '../layouts';
 
 export const Holodeck = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    can_toggle_safety,
-    emagged,
-    program,
-  } = data;
+  const { can_toggle_safety, emagged, program } = data;
   const default_programs = data.default_programs || [];
   const emag_programs = data.emag_programs || [];
   return (
-    <Window
-      width={400}
-      height={500}>
+    <Window width={400} height={500}>
       <Window.Content scrollable>
         <Section
           title="Default Programs"
-          buttons={(
+          buttons={
             <Button
-              icon={emagged ? "unlock" : "lock"}
+              icon={emagged ? 'unlock' : 'lock'}
               content="Safeties"
               color="bad"
               disabled={!can_toggle_safety}
               selected={!emagged}
-              onClick={() => act('safety')} />
-          )}>
-          {default_programs.map(def_program => (
+              onClick={() => act('safety')}
+            />
+          }
+        >
+          {default_programs.map((def_program) => (
             <Button
               fluid
               key={def_program.id}
               content={def_program.name.substring(11)}
               textAlign="center"
               selected={def_program.id === program}
-              onClick={() => act('load_program', {
-                id: def_program.id,
-              })} />
+              onClick={() =>
+                act('load_program', {
+                  id: def_program.id,
+                })
+              }
+            />
           ))}
         </Section>
         {!!emagged && (
           <Section title="Dangerous Programs">
-            {emag_programs.map(emag_program => (
+            {emag_programs.map((emag_program) => (
               <Button
                 fluid
                 key={emag_program.id}
@@ -49,9 +48,12 @@ export const Holodeck = (props, context) => {
                 color="bad"
                 textAlign="center"
                 selected={emag_program.id === program}
-                onClick={() => act('load_program', {
-                  id: emag_program.id,
-                })} />
+                onClick={() =>
+                  act('load_program', {
+                    id: emag_program.id,
+                  })
+                }
+              />
             ))}
           </Section>
         )}
diff --git a/tgui/packages/tgui/interfaces/Holopad.js b/tgui/packages/tgui/interfaces/Holopad.js
index 6be9abb59410..62fc78f7ff7f 100644
--- a/tgui/packages/tgui/interfaces/Holopad.js
+++ b/tgui/packages/tgui/interfaces/Holopad.js
@@ -1,40 +1,37 @@
 import { useBackend } from '../backend';
-import { Box, Button, Flex, Icon, LabeledList, Modal, NoticeBox, Section } from '../components';
+import {
+  Box,
+  Button,
+  Flex,
+  Icon,
+  LabeledList,
+  Modal,
+  NoticeBox,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const Holopad = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    calling,
-  } = data;
+  const { calling } = data;
   return (
-    <Window
-      width={440}
-      height={245}>
+    <Window width={440} height={245}>
       {!!calling && (
-        <Modal
-          fontSize="36px"
-          fontFamily="monospace">
+        <Modal fontSize="36px" fontFamily="monospace">
           <Flex align="center">
             <Flex.Item mr={2} mt={2}>
-              <Icon
-                name="phone-alt"
-                rotation={25} />
-            </Flex.Item>
-            <Flex.Item mr={2}>
-              {'Dialing...'}
+              <Icon name="phone-alt" rotation={25} />
             </Flex.Item>
+            <Flex.Item mr={2}>{'Dialing...'}</Flex.Item>
           </Flex>
-          <Box
-            mt={2}
-            textAlign="center"
-            fontSize="24px">
+          <Box mt={2} textAlign="center" fontSize="24px">
             <Button
               lineHeight="40px"
               icon="times"
               content="Hang Up"
               color="bad"
-              onClick={() => act('hang_up')} />
+              onClick={() => act('hang_up')}
+            />
           </Box>
         </Modal>
       )}
@@ -62,50 +59,58 @@ const HolopadContent = (props, context) => {
     <>
       <Section
         title="Holopad"
-        buttons={(
+        buttons={
           <Button
             icon="bell"
-            content={on_cooldown
-              ? "AI's Presence Requested"
-              : "Request AI's Presence"}
+            content={
+              on_cooldown ? "AI's Presence Requested" : "Request AI's Presence"
+            }
             disabled={!on_network || on_cooldown}
-            onClick={() => act('AIrequest')} />
-        )} >
+            onClick={() => act('AIrequest')}
+          />
+        }
+      >
         <LabeledList>
           <LabeledList.Item label="Communicator">
             <Button
               icon="phone-alt"
-              content={allowed ? "Connect To Holopad" : "Call Holopad"}
+              content={allowed ? 'Connect To Holopad' : 'Call Holopad'}
               disabled={!on_network}
-              onClick={() => act('holocall', { headcall: allowed })} />
+              onClick={() => act('holocall', { headcall: allowed })}
+            />
           </LabeledList.Item>
-          {holo_calls.map((call => {
+          {holo_calls.map((call) => {
             return (
               <LabeledList.Item
-                label={call.connected
-                  ? "Current Call"
-                  : "Incoming Call"}
-                key={call.ref}>
+                label={call.connected ? 'Current Call' : 'Incoming Call'}
+                key={call.ref}
+              >
                 <Button
                   icon={call.connected ? 'phone-slash' : 'phone-alt'}
-                  content={call.connected
-                    ? "Disconnect call from " + call.caller
-                    : "Answer call from " + call.caller}
+                  content={
+                    call.connected
+                      ? 'Disconnect call from ' + call.caller
+                      : 'Answer call from ' + call.caller
+                  }
                   color={call.connected ? 'bad' : 'good'}
                   disabled={!on_network}
-                  onClick={() => act(call.connected
-                    ? 'disconnectcall'
-                    : 'connectcall', { holopad: call.ref })} />
+                  onClick={() =>
+                    act(call.connected ? 'disconnectcall' : 'connectcall', {
+                      holopad: call.ref,
+                    })
+                  }
+                />
               </LabeledList.Item>
             );
-          }))}
-          {holo_calls.filter(call => !call.connected).length > 0 && (
+          })}
+          {holo_calls.filter((call) => !call.connected).length > 0 && (
             <LabeledList.Item key="reject">
               <Button
                 icon="phone-slash"
                 content="Reject incoming call(s)"
                 color="bad"
-                onClick={() => act('rejectall')} />
+                onClick={() => act('rejectall')}
+              />
             </LabeledList.Item>
           )}
         </LabeledList>
@@ -117,13 +122,11 @@ const HolopadContent = (props, context) => {
             icon="eject"
             content="Eject"
             disabled={!disk || replay_mode || record_mode}
-            onClick={() => act('disk_eject')} />
-        }>
-        {!disk && (
-          <NoticeBox>
-            No holodisk
-          </NoticeBox>
-        ) || (
+            onClick={() => act('disk_eject')}
+          />
+        }
+      >
+        {(!disk && <NoticeBox>No holodisk</NoticeBox>) || (
           <LabeledList>
             <LabeledList.Item label="Disk Player">
               <Button
@@ -131,18 +134,21 @@ const HolopadContent = (props, context) => {
                 content={replay_mode ? 'Stop' : 'Replay'}
                 selected={replay_mode}
                 disabled={record_mode || !disk_record}
-                onClick={() => act('replay_mode')} />
+                onClick={() => act('replay_mode')}
+              />
               <Button
                 icon={'sync'}
                 content={loop_mode ? 'Looping' : 'Loop'}
                 selected={loop_mode}
                 disabled={record_mode || !disk_record}
-                onClick={() => act('loop_mode')} />
+                onClick={() => act('loop_mode')}
+              />
               <Button
                 icon="exchange-alt"
                 content="Change Offset"
                 disabled={!replay_mode}
-                onClick={() => act('offset')} />
+                onClick={() => act('offset')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Recorder">
               <Button
@@ -150,13 +156,15 @@ const HolopadContent = (props, context) => {
                 content={record_mode ? 'End Recording' : 'Record'}
                 selected={record_mode}
                 disabled={(disk_record && !record_mode) || replay_mode}
-                onClick={() => act('record_mode')} />
+                onClick={() => act('record_mode')}
+              />
               <Button
                 icon="trash"
                 content="Clear Recording"
                 color="bad"
                 disabled={!disk_record || replay_mode || record_mode}
-                onClick={() => act('record_clear')} />
+                onClick={() => act('record_clear')}
+              />
             </LabeledList.Item>
           </LabeledList>
         )}
diff --git a/tgui/packages/tgui/interfaces/HotkeysHelp.tsx b/tgui/packages/tgui/interfaces/HotkeysHelp.tsx
index 4d67927abfd4..1f24796fa588 100644
--- a/tgui/packages/tgui/interfaces/HotkeysHelp.tsx
+++ b/tgui/packages/tgui/interfaces/HotkeysHelp.tsx
@@ -1,48 +1,48 @@
 import { useBackend } from '../backend';
-import {
-  Box,
-  Section,
-  Table,
-  Tooltip,
-} from '../components';
+import { Box, Section, Table, Tooltip } from '../components';
 import { Window } from '../layouts';
 
 type BindingInfo = {
   name: string;
   desc: string;
-}
+};
 
 type HotkeyInfo = {
   key: string;
   bindings: BindingInfo[];
-}
+};
 
 type HotkeysHelpData = {
   hotkeys: HotkeyInfo[];
 };
 
 type KeyBindingBoxProps = {
-  keycode: string,
-}
+  keycode: string;
+};
 
 type ModkeyProps = {
-  text: string,
-  color: string
-}
+  text: string;
+  color: string;
+};
 
 const shiftRegex = /(.*)(Shift)(.*)/;
 const ctrlRegex = /(.*)(Ctrl)(.*)/;
 const altRegex = /(.*)(Alt)(.*)/;
 
-const addColorModifier = (content: string, regex: RegExp, color: string):
-    JSX.Element | null => {
+const addColorModifier = (
+  content: string,
+  regex: RegExp,
+  color: string,
+): JSX.Element | null => {
   const match = content.match(regex);
 
   if (match) {
     return (
       <>
         {processColorModifiers(match[1])}
-        <Box inline style={{ color }}>{match[2]}</Box>
+        <Box inline style={{ color }}>
+          {match[2]}
+        </Box>
         {processColorModifiers(match[3])}
       </>
     );
@@ -52,19 +52,19 @@ const addColorModifier = (content: string, regex: RegExp, color: string):
 };
 
 const processColorModifiers = (content: string): string | JSX.Element => {
-  const shifted = addColorModifier(content, shiftRegex, "#88f");
+  const shifted = addColorModifier(content, shiftRegex, '#88f');
 
   if (shifted) {
     return shifted;
   }
 
-  const ctrled = addColorModifier(content, ctrlRegex, "#8f8");
+  const ctrled = addColorModifier(content, ctrlRegex, '#8f8');
 
   if (ctrled) {
     return ctrled;
   }
 
-  const alted = addColorModifier(content, altRegex, "#fc4");
+  const alted = addColorModifier(content, altRegex, '#fc4');
 
   if (alted) {
     return alted;
@@ -73,15 +73,15 @@ const processColorModifiers = (content: string): string | JSX.Element => {
   // Fix the weirdly named keys
 
   return ` ${content}`
-    .replace("Northeast", "Page Up")
-    .replace("Southeast", "Page Down")
-    .replace("Northwest", "Home")
-    .replace("Southwest", "End")
-    .replace("North", "Up")
-    .replace("South", "Down")
-    .replace("East", "Right")
-    .replace("West", "Left")
-    .replace("Numpad", "Numpad ");
+    .replace('Northeast', 'Page Up')
+    .replace('Southeast', 'Page Down')
+    .replace('Northwest', 'Home')
+    .replace('Southwest', 'End')
+    .replace('North', 'Up')
+    .replace('South', 'Down')
+    .replace('East', 'Right')
+    .replace('West', 'Left')
+    .replace('Numpad', 'Numpad ');
 };
 
 const KeyBinding = (props: KeyBindingBoxProps) => (
@@ -104,26 +104,29 @@ export const HotkeysHelp = (_, context) => {
                 Binding
               </Table.Cell>
             </Table.Row>
-            {data.hotkeys.map(hotkey => (
+            {data.hotkeys.map((hotkey) => (
               <Table.Row key={hotkey.key} className="candystripe">
                 <Table.Cell bold textAlign="right" p={1}>
                   <KeyBinding keycode={hotkey.key} />
                 </Table.Cell>
-                <Table.Cell style={{ position: "relative" }}>
-                  {hotkey.bindings.map(binding => (
-                    binding.desc
-                      ? (
-                        <Tooltip key={binding.name} content={binding.desc} position="bottom">
-                          <Box p={1} m={1} inline className="HotkeysHelp__pill">
-                            {binding.name}
-                          </Box>
-                        </Tooltip>
-                      ) : (
+                <Table.Cell style={{ position: 'relative' }}>
+                  {hotkey.bindings.map((binding) =>
+                    binding.desc ? (
+                      <Tooltip
+                        key={binding.name}
+                        content={binding.desc}
+                        position="bottom"
+                      >
                         <Box p={1} m={1} inline className="HotkeysHelp__pill">
                           {binding.name}
                         </Box>
-                      )
-                  ))}
+                      </Tooltip>
+                    ) : (
+                      <Box p={1} m={1} inline className="HotkeysHelp__pill">
+                        {binding.name}
+                      </Box>
+                    ),
+                  )}
                 </Table.Cell>
               </Table.Row>
             ))}
diff --git a/tgui/packages/tgui/interfaces/Hypertorus/Controls.js b/tgui/packages/tgui/interfaces/Hypertorus/Controls.js
index 210dc379183b..78c4b9d32c31 100644
--- a/tgui/packages/tgui/interfaces/Hypertorus/Controls.js
+++ b/tgui/packages/tgui/interfaces/Hypertorus/Controls.js
@@ -1,5 +1,15 @@
 import { useBackend } from '../../backend';
-import { Box, Button, Icon, Knob, LabeledControls, LabeledList, NumberInput, Section, Tooltip } from '../../components';
+import {
+  Box,
+  Button,
+  Icon,
+  Knob,
+  LabeledControls,
+  LabeledList,
+  NumberInput,
+  Section,
+  Tooltip,
+} from '../../components';
 import { getGasLabel } from '../../constants';
 import { HelpDummy, HoverHelp } from './helpers';
 
@@ -10,7 +20,7 @@ import { HelpDummy, HoverHelp } from './helpers';
 
 const ComboKnob = (props, context) => {
   const {
-    color=false,
+    color = false,
     defaultValue,
     icon,
     flipIcon,
@@ -18,7 +28,7 @@ const ComboKnob = (props, context) => {
     minValue,
     maxValue,
     parameter,
-    step=5,
+    step = 5,
     value,
     ...rest
   } = props;
@@ -30,23 +40,21 @@ const ComboKnob = (props, context) => {
     iconProps.rotation = 180;
   }
 
-  const icon_element = icon && (<Icon
-    position="absolute"
-    top="16px"
-    left="-27px"
-    color="label"
-    fontSize="200%"
-    name={icon}
-    {...iconProps}
-  />);
+  const icon_element = icon && (
+    <Icon
+      position="absolute"
+      top="16px"
+      left="-27px"
+      color="label"
+      fontSize="200%"
+      name={icon}
+      {...iconProps}
+    />
+  );
 
   return (
-    <Box
-      position="relative"
-      left="2px">
-      {help
-        ? (<Tooltip content={help}>{icon_element}</Tooltip>)
-        : icon_element}
+    <Box position="relative" left="2px">
+      {help ? <Tooltip content={help}>{icon_element}</Tooltip> : icon_element}
       <Knob
         color={color}
         size={2}
@@ -96,7 +104,9 @@ export const HypertorusSecondaryControls = (props, context) => {
       <LabeledControls justify="space-around" wrap>
         <LabeledControls.Item label="Heating Conductor">
           <ComboKnob
-            color={data.heating_conductor > 50 && data.heat_output > 0 && "yellow"}
+            color={
+              data.heating_conductor > 50 && data.heat_output > 0 && 'yellow'
+            }
             value={parseFloat(data.heating_conductor)}
             unit="J/cm"
             minValue={50}
@@ -135,7 +145,7 @@ export const HypertorusSecondaryControls = (props, context) => {
         </LabeledControls.Item>
         <LabeledControls.Item label="Current Damper">
           <ComboKnob
-            color={data.current_damper && "yellow"}
+            color={data.current_damper && 'yellow'}
             value={parseFloat(data.current_damper)}
             unit="W"
             minValue={0}
@@ -161,8 +171,10 @@ export const HypertorusWasteRemove = (props, context) => {
           label={
             <>
               <HoverHelp
-                content={"Remove waste gases from Fusion,"
-                +" and any selected gases from the Moderator."}
+                content={
+                  'Remove waste gases from Fusion,' +
+                  ' and any selected gases from the Moderator.'
+                }
               />
               Waste remove:
             </>
@@ -172,10 +184,16 @@ export const HypertorusWasteRemove = (props, context) => {
             icon={data.waste_remove ? 'power-off' : 'times'}
             content={data.waste_remove ? 'On' : 'Off'}
             selected={data.waste_remove}
-            onClick={() => act('waste_remove')} />
+            onClick={() => act('waste_remove')}
+          />
         </LabeledList.Item>
         <LabeledList.Item
-          label={<><HelpDummy />Moderator filtering rate:</>}
+          label={
+            <>
+              <HelpDummy />
+              Moderator filtering rate:
+            </>
+          }
         >
           <NumberInput
             animated
@@ -183,22 +201,33 @@ export const HypertorusWasteRemove = (props, context) => {
             unit="mol/s"
             minValue={5}
             maxValue={200}
-            onDrag={(e, value) => act('mod_filtering_rate', {
-              mod_filtering_rate: value,
-            })} />
+            onDrag={(e, value) =>
+              act('mod_filtering_rate', {
+                mod_filtering_rate: value,
+              })
+            }
+          />
         </LabeledList.Item>
         <LabeledList.Item
-          label={<><HelpDummy />Filter from moderator mix:</>}
+          label={
+            <>
+              <HelpDummy />
+              Filter from moderator mix:
+            </>
+          }
         >
-          {filterTypes.map(filter => (
+          {filterTypes.map((filter) => (
             <Button
               key={filter.gas_id}
               icon={filter.enabled ? 'check-square-o' : 'square-o'}
               selected={filter.enabled}
               content={getGasLabel(filter.gas_id, filter.gas_name)}
-              onClick={() => act('filter', {
-                mode: filter.gas_id,
-              })} />
+              onClick={() =>
+                act('filter', {
+                  mode: filter.gas_id,
+                })
+              }
+            />
           ))}
         </LabeledList.Item>
       </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/Hypertorus/Gases.js b/tgui/packages/tgui/interfaces/Hypertorus/Gases.js
index 8dd1fe6cae0a..46adf4658ed6 100644
--- a/tgui/packages/tgui/interfaces/Hypertorus/Gases.js
+++ b/tgui/packages/tgui/interfaces/Hypertorus/Gases.js
@@ -2,7 +2,14 @@ import { filter, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { toFixed } from 'common/math';
 import { useBackend } from '../../backend';
-import { Box, Button, LabeledList, NumberInput, ProgressBar, Section } from '../../components';
+import {
+  Box,
+  Button,
+  LabeledList,
+  NumberInput,
+  ProgressBar,
+  Section,
+} from '../../components';
 import { getGasColor, getGasLabel } from '../../constants';
 import { HelpDummy, HoverHelp } from './helpers';
 
@@ -13,24 +20,27 @@ import { HelpDummy, HoverHelp } from './helpers';
  */
 
 const moderator_gases_help = {
-  plasma: "Produces basic gases. Has a modest heat bonus to help kick start the early fusion process. When added in large quantities, its high heat capacity can help to slow down temperature changes to manageable speeds.",
-  bz: "Produces intermediate gases at Fusion Level 3 or higher. Massively increases radiation, and induces hallucinations in bystanders.",
-  proto_nitrate: "Produces advanced gases. Massively increases radiation, and accelerates the rate of temperature change. Make sure you have enough cooling.",
-  o2: "When added in high quantities, rapidly purges iron content. Does not purge iron content fast enough to keep up with damage at high Fusion Levels.",
-  healium: "Directly heals a heavily damaged HFR core at high Fusion Levels, but is rapidly consumed in the process.",
-  antinoblium: "Provides huge amounts of energy and radiation. Can cause dangerous electrical storms even from a healthy HFR core when present in more than trace amounts. Wear appropriate electrical protection when handling.",
-  freon: "Saps most forms of energy expression. Slows the rate of temperature change.",
+  plasma:
+    'Produces basic gases. Has a modest heat bonus to help kick start the early fusion process. When added in large quantities, its high heat capacity can help to slow down temperature changes to manageable speeds.',
+  bz: 'Produces intermediate gases at Fusion Level 3 or higher. Massively increases radiation, and induces hallucinations in bystanders.',
+  proto_nitrate:
+    'Produces advanced gases. Massively increases radiation, and accelerates the rate of temperature change. Make sure you have enough cooling.',
+  o2: 'When added in high quantities, rapidly purges iron content. Does not purge iron content fast enough to keep up with damage at high Fusion Levels.',
+  healium:
+    'Directly heals a heavily damaged HFR core at high Fusion Levels, but is rapidly consumed in the process.',
+  antinoblium:
+    'Provides huge amounts of energy and radiation. Can cause dangerous electrical storms even from a healthy HFR core when present in more than trace amounts. Wear appropriate electrical protection when handling.',
+  freon:
+    'Saps most forms of energy expression. Slows the rate of temperature change.',
 };
 
-const moderator_gases_sticky_order = [
-  "plasma",
-  "bz",
-  "proto_nitrate",
-];
+const moderator_gases_sticky_order = ['plasma', 'bz', 'proto_nitrate'];
 
 const ensure_gases = (gas_array, gasids) => {
   const gases_by_id = {};
-  gas_array.forEach(gas => { gases_by_id[gas.id] = true; });
+  gas_array.forEach((gas) => {
+    gases_by_id[gas.id] = true;
+  });
 
   for (let gasid of gasids) {
     if (!gases_by_id[gasid]) {
@@ -54,8 +64,8 @@ const GasList = (props, context) => {
   } = props;
 
   const gases = flow([
-    filter(gas => gas.amount >= 0.01),
-    sortBy(gas => -gas.amount),
+    filter((gas) => gas.amount >= 0.01),
+    sortBy((gas) => -gas.amount),
   ])(raw_gases || []);
 
   if (stickyGases) {
@@ -73,12 +83,12 @@ const GasList = (props, context) => {
         }
       >
         <Button
-          disabled={data.start_power === 0
-              || data.start_cooling === 0}
+          disabled={data.start_power === 0 || data.start_cooling === 0}
           icon={data[input_switch] ? 'power-off' : 'times'}
           content={data[input_switch] ? 'On' : 'Off'}
           selected={data[input_switch]}
-          onClick={() => act(input_switch)} />
+          onClick={() => act(input_switch)}
+        />
         <NumberInput
           animated
           value={parseFloat(data[input_rate])}
@@ -88,7 +98,7 @@ const GasList = (props, context) => {
           onDrag={(_, v) => act(input_rate, { [input_rate]: v })}
         />
       </LabeledList.Item>
-      {gases.map(gas => {
+      {gases.map((gas) => {
         let labelPrefix;
         if (prepend) {
           labelPrefix = prepend(gas);
@@ -107,67 +117,70 @@ const GasList = (props, context) => {
               color={getGasColor(gas.id)}
               value={gas.amount}
               minValue={0}
-              maxValue={minimumScale}>
+              maxValue={minimumScale}
+            >
               {toFixed(gas.amount, 2) + ' moles'}
             </ProgressBar>
-          </LabeledList.Item>);
+          </LabeledList.Item>
+        );
       })}
-    </LabeledList>);
+    </LabeledList>
+  );
 };
 
 export const HypertorusGases = (props, context) => {
   const { data } = useBackend(context);
 
-  const {
-    fusion_gases,
-    moderator_gases,
-  } = data;
+  const { fusion_gases, moderator_gases } = data;
 
   const selected_fuel = (data.selectable_fuel || []).filter(
-    d => d.id === data.selected
+    (d) => d.id === data.selected,
   )[0];
 
   return (
     <>
       <Section title="Internal Fusion Gases">
-        {selected_fuel
-          ? (
-            <GasList
-              input_rate="fuel_injection_rate"
-              input_switch="start_fuel"
-              input_max={150}
-              input_min={.5}
-              gases={fusion_gases}
-              minimumScale={500}
-              prepend={() => (<HelpDummy />)}
-              rateHelp={
-                "The rate at which new fuel is added from the fuel input port."
-                + " This rate affects the rate of production,"
-                + " even when input is not active."
-              }
-              stickyGases={selected_fuel.requirements}
-            />
-          )
-          : (
-            <Box align="center" color="red">
-              {"No recipe selected"}
-            </Box>
-          )}
+        {selected_fuel ? (
+          <GasList
+            input_rate="fuel_injection_rate"
+            input_switch="start_fuel"
+            input_max={150}
+            input_min={0.5}
+            gases={fusion_gases}
+            minimumScale={500}
+            prepend={() => <HelpDummy />}
+            rateHelp={
+              'The rate at which new fuel is added from the fuel input port.' +
+              ' This rate affects the rate of production,' +
+              ' even when input is not active.'
+            }
+            stickyGases={selected_fuel.requirements}
+          />
+        ) : (
+          <Box align="center" color="red">
+            {'No recipe selected'}
+          </Box>
+        )}
       </Section>
       <Section title="Moderator Gases">
         <GasList
           input_rate="moderator_injection_rate"
           input_switch="start_moderator"
           input_max={150}
-          input_min={.5}
+          input_min={0.5}
           gases={moderator_gases}
           minimumScale={500}
-          rateHelp={"The rate at which new moderator gas is added from the moderator port."}
+          rateHelp={
+            'The rate at which new moderator gas is added from the moderator port.'
+          }
           stickyGases={moderator_gases_sticky_order}
-          prepend={gas =>
-            moderator_gases_help[gas.id]
-              ? (<HoverHelp content={moderator_gases_help[gas.id]} />)
-              : (<HelpDummy />)}
+          prepend={(gas) =>
+            moderator_gases_help[gas.id] ? (
+              <HoverHelp content={moderator_gases_help[gas.id]} />
+            ) : (
+              <HelpDummy />
+            )
+          }
         />
       </Section>
     </>
diff --git a/tgui/packages/tgui/interfaces/Hypertorus/Parameters.js b/tgui/packages/tgui/interfaces/Hypertorus/Parameters.js
index c0f608be81a2..3408a21df1fb 100644
--- a/tgui/packages/tgui/interfaces/Hypertorus/Parameters.js
+++ b/tgui/packages/tgui/interfaces/Hypertorus/Parameters.js
@@ -8,7 +8,7 @@ import { formatSiUnit } from '../../format';
  *
  * Displays a set of gauges displaying key information about the
  * HFR.
- * 
+ *
  * Parameters with dangerous thresholds also display warnings at the
  * relevant levels.
  */
@@ -16,18 +16,13 @@ import { formatSiUnit } from '../../format';
 export const HypertorusParameters = (props, context) => {
   const { data } = useBackend(context);
 
-  const {
-    heat_output,
-    heat_output_min,
-    heat_output_max,
-  } = data;
+  const { heat_output, heat_output_min, heat_output_max } = data;
 
   const energy_minimum_exponent = 12;
   const energy_minimum_suffix = energy_minimum_exponent / 3;
 
-  let activity = heat_output / (heat_output < 0
-    ? heat_output_min
-    : heat_output_max);
+  let activity =
+    heat_output / (heat_output < 0 ? heat_output_min : heat_output_max);
   if (isNaN(activity) || !isFinite(activity)) {
     activity = 0;
   }
@@ -44,12 +39,13 @@ export const HypertorusParameters = (props, context) => {
                 minValue={0}
                 maxValue={100}
                 alertBefore={95}
-                format={v => `${Math.round(v)}%`}
+                format={(v) => `${Math.round(v)}%`}
                 ranges={{
                   good: [90, 100],
                   average: [50, 90],
                   bad: [0, 50],
-                }} />
+                }}
+              />
             </LabeledControls.Item>
             <LabeledControls.Item label="Iron Content">
               <RoundGauge
@@ -57,13 +53,14 @@ export const HypertorusParameters = (props, context) => {
                 value={data.iron_content}
                 minValue={0}
                 maxValue={1}
-                alertAfter={.25}
-                format={v => `${Math.round(v*100)}%`}
+                alertAfter={0.25}
+                format={(v) => `${Math.round(v * 100)}%`}
                 ranges={{
-                  good: [0, .1],
-                  average: [.1, .36],
-                  bad: [.36, 1],
-                }} />
+                  good: [0, 0.1],
+                  average: [0.1, 0.36],
+                  bad: [0.36, 1],
+                }}
+              />
             </LabeledControls.Item>
             <LabeledControls.Item label="Area Power">
               <RoundGauge
@@ -72,13 +69,14 @@ export const HypertorusParameters = (props, context) => {
                 minValue={0}
                 maxValue={100}
                 alertBefore={30}
-                format={v => `${Math.round(v)}%`}
+                format={(v) => `${Math.round(v)}%`}
                 ranges={{
                   // Keep these in line with the auto-off thresholds in apc.dm
                   bad: [0, 15],
                   average: [15, 30],
                   good: [30, 100],
-                }} />
+                }}
+              />
             </LabeledControls.Item>
           </LabeledControls>
         </Flex.Item>
@@ -96,7 +94,8 @@ export const HypertorusParameters = (props, context) => {
                   good: [1, 3.5],
                   average: [3.5, 4.5],
                   bad: [4.5, 6],
-                }} />
+                }}
+              />
             </LabeledControls.Item>
           </LabeledControls>
         </Flex.Item>
@@ -108,13 +107,16 @@ export const HypertorusParameters = (props, context) => {
                 value={Math.max(0, Math.log10(data.energy_level))}
                 minValue={energy_minimum_exponent}
                 maxValue={30}
-                format={v => formatSiUnit(10**v, energy_minimum_suffix, 'J')}
+                format={(v) =>
+                  formatSiUnit(10 ** v, energy_minimum_suffix, 'J')
+                }
                 ranges={{
                   black: [energy_minimum_exponent, 15],
                   grey: [15, 18], // Anything under 1EJ is pretty mediocre
                   yellow: [18, 24],
                   orange: [24, 30],
-                }} />
+                }}
+              />
             </LabeledControls.Item>
             <LabeledControls.Item label="Reaction activity">
               <RoundGauge
@@ -122,12 +124,13 @@ export const HypertorusParameters = (props, context) => {
                 value={activity * 100}
                 minValue={0}
                 maxValue={130} // Proto-nitrate lets us exceed 100%
-                format={v => `${data.start_power ? toFixed(v, 1) : 0}%`}
+                format={(v) => `${data.start_power ? toFixed(v, 1) : 0}%`}
                 ranges={{
                   grey: [0, 70],
                   blue: [70, 100],
                   orange: [100, 130],
-                }} />
+                }}
+              />
             </LabeledControls.Item>
             <LabeledControls.Item label="Instability">
               <RoundGauge
@@ -135,11 +138,14 @@ export const HypertorusParameters = (props, context) => {
                 value={Math.max(data.instability, 0)}
                 minValue={0}
                 maxValue={10}
-                format={v => `${data.start_power ? toFixed(v/8 * 100, 1) : 0}%`}
+                format={(v) =>
+                  `${data.start_power ? toFixed((v / 8) * 100, 1) : 0}%`
+                }
                 ranges={{
                   orange: [0, 8], // exothermic
                   blue: [8, 10], // endothermic
-                }} />
+                }}
+              />
             </LabeledControls.Item>
           </LabeledControls>
         </Flex.Item>
diff --git a/tgui/packages/tgui/interfaces/Hypertorus/Recipes.js b/tgui/packages/tgui/interfaces/Hypertorus/Recipes.js
index 4d95914af3b6..bb862c3422a5 100644
--- a/tgui/packages/tgui/interfaces/Hypertorus/Recipes.js
+++ b/tgui/packages/tgui/interfaces/Hypertorus/Recipes.js
@@ -7,7 +7,7 @@ import { getGasColor, getGasLabel } from '../../constants';
  * Displays a table of recipes with their outputs and effects, along
  * with buttons to select the active recipe and highlights on the current
  * recipe.
- * 
+ *
  * Frankly, rather ugly and a good candidate for future improvements.
  */
 
@@ -30,65 +30,66 @@ import { getGasColor, getGasLabel } from '../../constants';
  */
 const recipe_effect_structure = [
   {
-    param: "recipe_cooling_multiplier",
-    label: "Cooling",
-    icon: "snowflake-o",
+    param: 'recipe_cooling_multiplier',
+    label: 'Cooling',
+    icon: 'snowflake-o',
     scale: 3,
   },
   {
-    param: "recipe_heating_multiplier",
-    label: "Heating",
-    icon: "fire",
+    param: 'recipe_heating_multiplier',
+    label: 'Heating',
+    icon: 'fire',
     scale: 3,
   },
   {
-    param: "energy_loss_multiplier",
-    label: "Energy loss",
-    icon: "sun-o",
+    param: 'energy_loss_multiplier',
+    label: 'Energy loss',
+    icon: 'sun-o',
     scale: 3,
   },
   {
-    param: "fuel_consumption_multiplier",
-    label: "Fuel use",
-    icon: ["window-minimize", "arrow-down"],
+    param: 'fuel_consumption_multiplier',
+    label: 'Fuel use',
+    icon: ['window-minimize', 'arrow-down'],
     scale: 1.5,
   },
   {
-    param: "gas_production_multiplier",
-    label: "Production",
-    icon: ["window-minimize", "arrow-up"],
+    param: 'gas_production_multiplier',
+    label: 'Production',
+    icon: ['window-minimize', 'arrow-up'],
     scale: 1.5,
   },
   {
-    param: "temperature_multiplier",
-    label: "Max temperature",
-    icon: "thermometer-full",
+    param: 'temperature_multiplier',
+    label: 'Max temperature',
+    icon: 'thermometer-full',
     override_base: 0.85,
     scale: 1.15,
-    tooltip: (v, d) => "Maximum: " + (d.baseMaximumTemperature * v).toExponential() + " K",
+    tooltip: (v, d) =>
+      'Maximum: ' + (d.baseMaximumTemperature * v).toExponential() + ' K',
   },
 ];
 
 const effect_to_icon = (effect_value, effect_scale, base) => {
   if (effect_value === base) {
-    return "minus";
+    return 'minus';
   }
   if (effect_value > base) {
     if (effect_value > base * effect_scale) {
-      return "angle-double-up";
+      return 'angle-double-up';
     }
-    return "angle-up";
+    return 'angle-up';
   }
   if (effect_value < base / effect_scale) {
-    return "angle-double-down";
+    return 'angle-double-down';
   }
-  return "angle-down";
+  return 'angle-down';
 };
 
 const recipeChange = {
   onComponentShouldUpdate: (lastProps, nextProps) =>
-    lastProps.selectedFuelID !== nextProps.selectedFuelID
-    || lastProps.enableRecipeSelection !== nextProps.enableRecipeSelection,
+    lastProps.selectedFuelID !== nextProps.selectedFuelID ||
+    lastProps.enableRecipeSelection !== nextProps.enableRecipeSelection,
 };
 
 const activeChange = {
@@ -96,13 +97,8 @@ const activeChange = {
     lastProps.active !== nextProps.active,
 };
 
-const MemoRow = props => {
-  const {
-    active,
-    children,
-    key,
-    ...rest
-  } = props;
+const MemoRow = (props) => {
+  const { active, children, key, ...rest } = props;
   return (
     <Table.Row
       className={`hypertorus-recipes__row${active ? ' hypertorus-recipes__activerow' : ''}`}
@@ -115,21 +111,16 @@ const MemoRow = props => {
 
 MemoRow.defaultHooks = activeChange;
 
-const GasCellItem = props => {
-  const {
-    gasid,
-    ...rest
-  } = props;
+const GasCellItem = (props) => {
+  const { gasid, ...rest } = props;
   return (
-    <Table.Cell
-      key={gasid}
-      label={getGasLabel(gasid)} {...rest}>
+    <Table.Cell key={gasid} label={getGasLabel(gasid)} {...rest}>
       <Box color={getGasColor(gasid)}>{getGasLabel(gasid)}</Box>
     </Table.Cell>
   );
 };
 
-export const HypertorusRecipes = props => {
+export const HypertorusRecipes = (props) => {
   const {
     enableRecipeSelection: enable_recipe_selection,
     onRecipe,
@@ -160,14 +151,17 @@ export const HypertorusRecipes = props => {
           <Table.Cell>Tier 6</Table.Cell>
           {
             // Lay out our pictographic headers for effects.
-            recipe_effect_structure.map(item => (
+            recipe_effect_structure.map((item) => (
               <Table.Cell key={item.param} color="label">
                 <Tooltip content={item.label}>
-                  {typeof(item.icon) === "string" ? (
-                    <Icon className="hypertorus-recipes__icon" name={item.icon} />
+                  {typeof item.icon === 'string' ? (
+                    <Icon
+                      className="hypertorus-recipes__icon"
+                      name={item.icon}
+                    />
                   ) : (
                     <Icon.Stack className="hypertorus-recipes__icon">
-                      {item.icon.map(icon => (
+                      {item.icon.map((icon) => (
                         <Icon key={icon} name={icon} />
                       ))}
                     </Icon.Stack>
@@ -177,43 +171,57 @@ export const HypertorusRecipes = props => {
             ))
           }
         </MemoRow>
-        {selectable_fuels.filter(d => d.id).map((recipe, index) => {
-          const active = recipe.id === selected_fuel_id;
-          return (
-            <MemoRow key={recipe.id} active={active}>
-              <Table.Cell>
-                <Button
-                  icon={recipe.id === selected_fuel_id ? "times" : "power-off"}
-                  disabled={!enable_recipe_selection}
-                  key={recipe.id}
-                  selected={recipe.id === selected_fuel_id}
-                  onClick={onRecipe.bind(null, recipe.id)}
-                />
-              </Table.Cell>
-              <GasCellItem gasid={recipe.requirements[0]} />
-              <GasCellItem gasid={recipe.requirements[1]} />
-              <GasCellItem gasid={recipe.fusion_byproducts[0]} />
-              <GasCellItem gasid={recipe.fusion_byproducts[1]} />
-              {recipe.product_gases.map(gasid => (
-                <GasCellItem key={gasid} gasid={gasid} />
-              ))}
-              {
-                recipe_effect_structure.map(item => {
+        {selectable_fuels
+          .filter((d) => d.id)
+          .map((recipe, index) => {
+            const active = recipe.id === selected_fuel_id;
+            return (
+              <MemoRow key={recipe.id} active={active}>
+                <Table.Cell>
+                  <Button
+                    icon={
+                      recipe.id === selected_fuel_id ? 'times' : 'power-off'
+                    }
+                    disabled={!enable_recipe_selection}
+                    key={recipe.id}
+                    selected={recipe.id === selected_fuel_id}
+                    onClick={onRecipe.bind(null, recipe.id)}
+                  />
+                </Table.Cell>
+                <GasCellItem gasid={recipe.requirements[0]} />
+                <GasCellItem gasid={recipe.requirements[1]} />
+                <GasCellItem gasid={recipe.fusion_byproducts[0]} />
+                <GasCellItem gasid={recipe.fusion_byproducts[1]} />
+                {recipe.product_gases.map((gasid) => (
+                  <GasCellItem key={gasid} gasid={gasid} />
+                ))}
+                {recipe_effect_structure.map((item) => {
                   const value = recipe[item.param];
                   // Note that the minus icon is wider than the arrow icons,
                   // so we set the width to work with both without jumping.
                   return (
                     <Table.Cell key={item.param}>
-                      <Tooltip content={(item.tooltip || (v => "x"+v))(value, rest)}>
-                        <Icon className="hypertorus-recipes__icon" name={effect_to_icon(value, item.scale, item.override_base || 1)} />
+                      <Tooltip
+                        content={(item.tooltip || ((v) => 'x' + v))(
+                          value,
+                          rest,
+                        )}
+                      >
+                        <Icon
+                          className="hypertorus-recipes__icon"
+                          name={effect_to_icon(
+                            value,
+                            item.scale,
+                            item.override_base || 1,
+                          )}
+                        />
                       </Tooltip>
                     </Table.Cell>
                   );
-                })
-              }
-            </MemoRow>
-          );
-        })}
+                })}
+              </MemoRow>
+            );
+          })}
       </Table>
     </Box>
   );
diff --git a/tgui/packages/tgui/interfaces/Hypertorus/Temperatures.js b/tgui/packages/tgui/interfaces/Hypertorus/Temperatures.js
index 7595fef743f8..778bbf539a73 100644
--- a/tgui/packages/tgui/interfaces/Hypertorus/Temperatures.js
+++ b/tgui/packages/tgui/interfaces/Hypertorus/Temperatures.js
@@ -16,50 +16,46 @@ import { to_exponential_if_big } from './helpers';
  */
 const height = 200;
 
-const VerticalBar = props => {
-  const {
-    color,
-    value,
-    progressHeight,
-  } = props;
+const VerticalBar = (props) => {
+  const { color, value, progressHeight } = props;
   let y = height - progressHeight;
   return (
     <div className="hypertorus-temperatures__vertical-bar">
-      {!!value && (<Box backgroundColor={color} top={`${y}px`} />)}
-    </div>);
+      {!!value && <Box backgroundColor={color} top={`${y}px`} />}
+    </div>
+  );
 };
 
 const BarLabel = (props) => {
-  const {
-    label,
-    delta,
-    value,
-  } = props;
+  const { label, delta, value } = props;
 
   return (
     <>
       <Box align="center">{label}</Box>
-      {value > 0
-        ? (
-          <>
-            <Box align="center">{to_exponential_if_big(value) + " K"}</Box>
-            <Box align="center">{(delta === 0
+      {value > 0 ? (
+        <>
+          <Box align="center">{to_exponential_if_big(value) + ' K'}</Box>
+          <Box align="center">
+            {delta === 0
               ? '-'
-              : `${delta < 0 ? '' : '+'}${to_exponential_if_big(delta)} K/s`
-            )}
-            </Box>
-          </>)
-        : (
-          <>
-            <Box align="center" color="red">Empty</Box>
-            <Box class="hypertorus__unselectable"
-              {...(Byond.IS_LTE_IE8 ? { style: { unselectable: true } } : {})}
-            >
-          &nbsp;
-            </Box>
-          </>
-        )}
-    </>);
+              : `${delta < 0 ? '' : '+'}${to_exponential_if_big(delta)} K/s`}
+          </Box>
+        </>
+      ) : (
+        <>
+          <Box align="center" color="red">
+            Empty
+          </Box>
+          <Box
+            class="hypertorus__unselectable"
+            {...(Byond.IS_LTE_IE8 ? { style: { unselectable: true } } : {})}
+          >
+            &nbsp;
+          </Box>
+        </>
+      )}
+    </>
+  );
 };
 
 export const HypertorusTemperatures = (props, context) => {
@@ -75,21 +71,27 @@ export const HypertorusTemperatures = (props, context) => {
     temperature_period,
   } = data;
 
-  const internal_fusion_temperature_delta = (internal_fusion_temperature
-    - data.internal_fusion_temperature_archived) / temperature_period;
-  const internal_output_temperature_delta = (internal_output_temperature
-    - data.internal_output_temperature_archived) / temperature_period;
-  const internal_coolant_temperature_delta = (internal_coolant_temperature
-    - data.internal_coolant_temperature_archived) / temperature_period;
-  const moderator_internal_temperature_delta = (moderator_internal_temperature
-    - data.moderator_internal_temperature_archived) / temperature_period;
+  const internal_fusion_temperature_delta =
+    (internal_fusion_temperature - data.internal_fusion_temperature_archived) /
+    temperature_period;
+  const internal_output_temperature_delta =
+    (internal_output_temperature - data.internal_output_temperature_archived) /
+    temperature_period;
+  const internal_coolant_temperature_delta =
+    (internal_coolant_temperature -
+      data.internal_coolant_temperature_archived) /
+    temperature_period;
+  const moderator_internal_temperature_delta =
+    (moderator_internal_temperature -
+      data.moderator_internal_temperature_archived) /
+    temperature_period;
 
   const selected_fuel = (data.selectable_fuel || []).filter(
-    d => d.id === data.selected
+    (d) => d.id === data.selected,
   )[0];
 
-  let prev_power_level_temperature = 10 ** (1+power_level);
-  let next_power_level_temperature = 10 ** (2+power_level);
+  let prev_power_level_temperature = 10 ** (1 + power_level);
+  let next_power_level_temperature = 10 ** (2 + power_level);
 
   if (power_level === 0) {
     prev_power_level_temperature = 0;
@@ -97,8 +99,9 @@ export const HypertorusTemperatures = (props, context) => {
   } else if (power_level === 1) {
     prev_power_level_temperature = 500;
   } else if (power_level === 6) {
-    next_power_level_temperature = base_max_temperature
-      * (selected_fuel ? selected_fuel.temperature_multiplier : 1);
+    next_power_level_temperature =
+      base_max_temperature *
+      (selected_fuel ? selected_fuel.temperature_multiplier : 1);
   }
 
   const temperatures = [
@@ -109,32 +112,28 @@ export const HypertorusTemperatures = (props, context) => {
       moderator_internal_temperature,
       internal_output_temperature,
       internal_coolant_temperature,
-    ].filter(d => d),
-  ].map(d => parseFloat(d));
+    ].filter((d) => d),
+  ].map((d) => parseFloat(d));
 
   const maxTemperature = Math.max(...temperatures);
   const minTemperature = Math.max(
     2.73,
-    Math.min(20, ...temperatures.filter(d => d>0))
+    Math.min(20, ...temperatures.filter((d) => d > 0)),
   );
 
   if (power_level === 6) {
     next_power_level_temperature = 0;
   }
 
-  const value_to_y = (value, baseTemp = minTemperature, fromBottom=false) => {
-    const ratio = (Math.log10(value) - Math.log10(baseTemp))
-      / (Math.log10(maxTemperature) - Math.log10(minTemperature));
-    return height * (fromBottom ? (1 - ratio) : ratio);
+  const value_to_y = (value, baseTemp = minTemperature, fromBottom = false) => {
+    const ratio =
+      (Math.log10(value) - Math.log10(baseTemp)) /
+      (Math.log10(maxTemperature) - Math.log10(minTemperature));
+    return height * (fromBottom ? 1 - ratio : ratio);
   };
 
-  const TemperatureLabel = props => {
-    const {
-      icon,
-      force,
-      tooltip,
-      value,
-    } = props;
+  const TemperatureLabel = (props) => {
+    const { icon, force, tooltip, value } = props;
     const y = value_to_y(value);
     const label = (
       <Box className="hypertorus-temperatures__y-axis-label">
@@ -142,38 +141,32 @@ export const HypertorusTemperatures = (props, context) => {
           <Icon
             className="hypertorus-temperatures__y-axis-label-icon"
             name={icon}
-          />)}
-        {to_exponential_if_big(value) + " K"}
+          />
+        )}
+        {to_exponential_if_big(value) + ' K'}
       </Box>
     );
-    return (!!value || force) && (
-      <Box class="hypertorus-temperatures__y-axis-tick-anchor" top={`${height - y}px`}>
-        <Box className="hypertorus-temperatures__y-axis-tick" />
-        {tooltip
-          ? (<Tooltip content={tooltip}>{label}</Tooltip>)
-          : label}
-      </Box>
+    return (
+      (!!value || force) && (
+        <Box
+          class="hypertorus-temperatures__y-axis-tick-anchor"
+          top={`${height - y}px`}
+        >
+          <Box className="hypertorus-temperatures__y-axis-tick" />
+          {tooltip ? <Tooltip content={tooltip}>{label}</Tooltip> : label}
+        </Box>
+      )
     );
   };
 
   const TemperatureBar = (props) => {
-    const {
-      label,
-      delta,
-      value,
-      children,
-      ...rest
-    } = props;
+    const { label, delta, value, children, ...rest } = props;
     const y = value_to_y(value);
     return (
       <Flex.Item mx={1}>
         <Stack vertical align="center">
           <Stack.Item>
-            <VerticalBar
-              progressHeight={y}
-              value={value}
-              {...rest}
-            >
+            <VerticalBar progressHeight={y} value={value} {...rest}>
               {children}
             </VerticalBar>
           </Stack.Item>
@@ -191,8 +184,9 @@ export const HypertorusTemperatures = (props, context) => {
   const label_legible = (l, r) =>
     Math.abs(value_to_y(l) - value_to_y(r)) > clutter_threshold;
 
-  const show_min = label_legible(prev_power_level_temperature, minTemperature)
-    || power_level === 0;
+  const show_min =
+    label_legible(prev_power_level_temperature, minTemperature) ||
+    power_level === 0;
   const show_max = label_legible(next_power_level_temperature, maxTemperature);
 
   return (
@@ -200,51 +194,56 @@ export const HypertorusTemperatures = (props, context) => {
       <Box className="hypertorus-temperatures__container">
         <Box className="hypertorus-temperatures__y-axis-marks">
           {show_min && (
-            <TemperatureLabel key="min_temp"
-              value={minTemperature}
-              force
-            />
+            <TemperatureLabel key="min_temp" value={minTemperature} force />
           )}
-          <TemperatureLabel key="prev_fusion_temp"
+          <TemperatureLabel
+            key="prev_fusion_temp"
             icon="chevron-down"
             tooltip="Previous Fusion Level"
             value={prev_power_level_temperature}
           />
-          <TemperatureLabel key="next_fusion_temp"
+          <TemperatureLabel
+            key="next_fusion_temp"
             icon="chevron-up"
             tooltip="Next Fusion Level"
             value={next_power_level_temperature}
           />
           {show_max && (
-            <TemperatureLabel key="max_temp"
-              value={maxTemperature}
-            />
+            <TemperatureLabel key="max_temp" value={maxTemperature} />
           )}
         </Box>
         <Box className="hypertorus-temperatures__y-axis">
           <Box className="hypertorus-temperatures__x-axis" />
         </Box>
-        <Flex overflowY="hidden" className="hypertorus-temperatures__chart" justify="space-around">
+        <Flex
+          overflowY="hidden"
+          className="hypertorus-temperatures__chart"
+          justify="space-around"
+        >
           <TemperatureBar
             label="Fusion"
             value={internal_fusion_temperature}
             delta={internal_fusion_temperature_delta}
-            color="#f2711c" />
+            color="#f2711c"
+          />
           <TemperatureBar
             label="Moderator"
             value={moderator_internal_temperature}
             delta={moderator_internal_temperature_delta}
-            color="#e03997" />
+            color="#e03997"
+          />
           <TemperatureBar
             label="Coolant"
             value={internal_coolant_temperature}
             delta={internal_coolant_temperature_delta}
-            color="aliceblue" />
+            color="aliceblue"
+          />
           <TemperatureBar
             label="Output"
             value={internal_output_temperature}
             delta={internal_output_temperature_delta}
-            color="#20b142" />
+            color="#20b142"
+          />
         </Flex>
       </Box>
     </Section>
diff --git a/tgui/packages/tgui/interfaces/Hypertorus/helpers.js b/tgui/packages/tgui/interfaces/Hypertorus/helpers.js
index ce08f224f9e5..ceef63107952 100644
--- a/tgui/packages/tgui/interfaces/Hypertorus/helpers.js
+++ b/tgui/packages/tgui/interfaces/Hypertorus/helpers.js
@@ -11,13 +11,11 @@ export const to_exponential_if_big = (value) => {
 };
 
 // Simple question mark icon with a hover tooltip
-export const HoverHelp = props => (
+export const HoverHelp = (props) => (
   <Tooltip content={props.content}>
     <Icon name="question-circle" width="12px" mr="6px" />
   </Tooltip>
 );
 
 // When no hover help is available, but we want a placeholder for spacing
-export const HelpDummy = props => (
-  <Icon name="" width="12px" mr="6px" />
-);
+export const HelpDummy = (props) => <Icon name="" width="12px" mr="6px" />;
diff --git a/tgui/packages/tgui/interfaces/Hypertorus/index.js b/tgui/packages/tgui/interfaces/Hypertorus/index.js
index 5d63f6faaedf..7cbaf28328ef 100644
--- a/tgui/packages/tgui/interfaces/Hypertorus/index.js
+++ b/tgui/packages/tgui/interfaces/Hypertorus/index.js
@@ -20,26 +20,30 @@ const HypertorusMainControls = (props, context) => {
             icon={data.start_power ? 'power-off' : 'times'}
             content={data.start_power ? 'On' : 'Off'}
             selected={data.start_power}
-            onClick={() => act('start_power')} />
+            onClick={() => act('start_power')}
+          />
         </Stack.Item>
         <Stack.Item color="label">
           {'Start cooling: '}
           <Button
-            disabled={data.start_fuel === 1
-                || data.start_moderator === 1
-                || data.start_power === 0
-                || (data.start_cooling && data.power_level > 0)}
+            disabled={
+              data.start_fuel === 1 ||
+              data.start_moderator === 1 ||
+              data.start_power === 0 ||
+              (data.start_cooling && data.power_level > 0)
+            }
             icon={data.start_cooling ? 'power-off' : 'times'}
             content={data.start_cooling ? 'On' : 'Off'}
             selected={data.start_cooling}
-            onClick={() => act('start_cooling')} />
+            onClick={() => act('start_cooling')}
+          />
         </Stack.Item>
       </Stack>
       <Collapsible title="Recipe selection">
         <HypertorusRecipes
           baseMaximumTemperature={data.base_max_temperature}
           enableRecipeSelection={data.power_level === 0}
-          onRecipe={id => act('fuel', { mode: id })}
+          onRecipe={(id) => act('fuel', { mode: id })}
           selectableFuels={data.selectable_fuel}
           selectedFuelID={data.selected}
         />
@@ -80,7 +84,8 @@ const HypertorusLayout = () => {
 export const Hypertorus = (props, context) => {
   // The HFR has a ridiculous amount of knobs and information.
   // Ideally we'd display a large window for it all...
-  const idealWidth = 850, idealHeight = 980;
+  const idealWidth = 850,
+    idealHeight = 980;
 
   // ...but we should check for small screens, to play nicely with eg laptops.
   const winWidth = window.screen.availWidth;
@@ -94,7 +99,8 @@ export const Hypertorus = (props, context) => {
     <Window
       title="Hypertorus Fusion Reactor control panel"
       width={width}
-      height={height}>
+      height={height}
+    >
       <Window.Content scrollable>
         <HypertorusLayout />
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/HypnoChair.js b/tgui/packages/tgui/interfaces/HypnoChair.js
index 1d590a112ddc..cb95eb886e64 100644
--- a/tgui/packages/tgui/interfaces/HypnoChair.js
+++ b/tgui/packages/tgui/interfaces/HypnoChair.js
@@ -5,22 +5,15 @@ import { Window } from '../layouts';
 export const HypnoChair = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={375}
-      height={480}>
+    <Window width={375} height={480}>
       <Window.Content>
-        <Section
-          title="Information"
-          backgroundColor="#450F44">
-          The Enhanced Interrogation Chamber is designed to induce a
-          deep-rooted trance trigger into the subject. Once the procedure
-          is complete, by using the implanted trigger phrase, the
-          authorities are able to ensure immediate and complete obedience
-          and truthfulness.
+        <Section title="Information" backgroundColor="#450F44">
+          The Enhanced Interrogation Chamber is designed to induce a deep-rooted
+          trance trigger into the subject. Once the procedure is complete, by
+          using the implanted trigger phrase, the authorities are able to ensure
+          immediate and complete obedience and truthfulness.
         </Section>
-        <Section
-          title="Occupant Information"
-          textAlign="center">
+        <Section title="Occupant Information" textAlign="center">
           <LabeledList>
             <LabeledList.Item label="Name">
               {data.occupant.name ? data.occupant.name : 'No Occupant'}
@@ -28,11 +21,14 @@ export const HypnoChair = (props, context) => {
             {!!data.occupied && (
               <LabeledList.Item
                 label="Status"
-                color={data.occupant.stat === 0
-                  ? 'good'
-                  : data.occupant.stat === 1
-                    ? 'average'
-                    : 'bad'}>
+                color={
+                  data.occupant.stat === 0
+                    ? 'good'
+                    : data.occupant.stat === 1
+                      ? 'average'
+                      : 'bad'
+                }
+              >
                 {data.occupant.stat === 0
                   ? 'Conscious'
                   : data.occupant.stat === 1
@@ -42,36 +38,38 @@ export const HypnoChair = (props, context) => {
             )}
           </LabeledList>
         </Section>
-        <Section
-          title="Operations"
-          textAlign="center">
+        <Section title="Operations" textAlign="center">
           <LabeledList>
             <LabeledList.Item label="Door">
               <Button
                 icon={data.open ? 'unlock' : 'lock'}
                 color={data.open ? 'default' : 'red'}
                 content={data.open ? 'Open' : 'Closed'}
-                onClick={() => act('door')} />
+                onClick={() => act('door')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Trigger Phrase">
               <Input
                 value={data.trigger}
-                onChange={(e, value) => act('set_phrase', {
-                  phrase: value,
-                })} />
+                onChange={(e, value) =>
+                  act('set_phrase', {
+                    phrase: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Interrogate Occupant">
               <Button
                 icon="code-branch"
-                content={data.interrogating
-                  ? "Interrupt Interrogation"
-                  : 'Begin Enhanced Interrogation'}
-                onClick={() => act('interrogate')} />
+                content={
+                  data.interrogating
+                    ? 'Interrupt Interrogation'
+                    : 'Begin Enhanced Interrogation'
+                }
+                onClick={() => act('interrogate')}
+              />
               {data.interrogating === 1 && (
-                <Icon
-                  name="cog"
-                  color="orange"
-                  spin />
+                <Icon name="cog" color="orange" spin />
               )}
             </LabeledList.Item>
           </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/IVDrip.js b/tgui/packages/tgui/interfaces/IVDrip.js
index c8bcfacdaf54..1a538ed148bf 100644
--- a/tgui/packages/tgui/interfaces/IVDrip.js
+++ b/tgui/packages/tgui/interfaces/IVDrip.js
@@ -19,25 +19,35 @@ export const IVDrip = (props, context) => {
       <Window.Content>
         <Section title="IV Status">
           <LabeledList>
-            <LabeledList.Item label="Status" color={connected ? 'good' : 'average'}>
-              {connected ? "Connected" : "Not Connected"}
+            <LabeledList.Item
+              label="Status"
+              color={connected ? 'good' : 'average'}
+            >
+              {connected ? 'Connected' : 'Not Connected'}
             </LabeledList.Item>
             <LabeledList.Item label="Mode">
               <Button
                 disabled={injectOnly}
                 content={mode ? 'Injecting' : 'Draining'}
-                icon={mode ? "sign-in-alt" : "sign-out-alt"}
-                onClick={() => act('changeMode')} />
+                icon={mode ? 'sign-in-alt' : 'sign-out-alt'}
+                onClick={() => act('changeMode')}
+              />
             </LabeledList.Item>
-            <LabeledList.Item label="Attached Container" color={beakerAttached ? 'good' : 'average'}>
+            <LabeledList.Item
+              label="Attached Container"
+              color={beakerAttached ? 'good' : 'average'}
+            >
               <Box as="span" mr={2}>
-                {beakerAttached ? "Container Attached" : "Container Not Attached"}
+                {beakerAttached
+                  ? 'Container Attached'
+                  : 'Container Not Attached'}
               </Box>
               <Button
-                disabled={(!beakerAttached) || useInternalStorage}
+                disabled={!beakerAttached || useInternalStorage}
                 content="Eject"
                 icon="eject"
-                onClick={() => act('eject')} />
+                onClick={() => act('eject')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
@@ -50,9 +60,11 @@ export const IVDrip = (props, context) => {
                 minValue={minInjectRate}
                 maxValue={maxInjectRate}
                 step={0.1}
-                onChange={(e, value) => act('changeRate', {
-                  rate: value,
-                })}
+                onChange={(e, value) =>
+                  act('changeRate', {
+                    rate: value,
+                  })
+                }
               />
             </LabeledList.Item>
           </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/ImplantChair.js b/tgui/packages/tgui/interfaces/ImplantChair.js
index 70d9fd3f2c17..fda82defa35c 100644
--- a/tgui/packages/tgui/interfaces/ImplantChair.js
+++ b/tgui/packages/tgui/interfaces/ImplantChair.js
@@ -5,13 +5,9 @@ import { Window } from '../layouts';
 export const ImplantChair = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={375}
-      height={280}>
+    <Window width={375} height={280}>
       <Window.Content>
-        <Section
-          title="Occupant Information"
-          textAlign="center">
+        <Section title="Occupant Information" textAlign="center">
           <LabeledList>
             <LabeledList.Item label="Name">
               {data.occupant.name || 'No Occupant'}
@@ -19,11 +15,14 @@ export const ImplantChair = (props, context) => {
             {!!data.occupied && (
               <LabeledList.Item
                 label="Status"
-                color={data.occupant.stat === 0
-                  ? 'good'
-                  : data.occupant.stat === 1
-                    ? 'average'
-                    : 'bad'}>
+                color={
+                  data.occupant.stat === 0
+                    ? 'good'
+                    : data.occupant.stat === 1
+                      ? 'average'
+                      : 'bad'
+                }
+              >
                 {data.occupant.stat === 0
                   ? 'Conscious'
                   : data.occupant.stat === 1
@@ -33,39 +32,29 @@ export const ImplantChair = (props, context) => {
             )}
           </LabeledList>
         </Section>
-        <Section
-          title="Operations"
-          textAlign="center">
+        <Section title="Operations" textAlign="center">
           <LabeledList>
             <LabeledList.Item label="Door">
               <Button
                 icon={data.open ? 'unlock' : 'lock'}
                 color={data.open ? 'default' : 'red'}
                 content={data.open ? 'Open' : 'Closed'}
-                onClick={() => act('door')} />
+                onClick={() => act('door')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Implant Occupant">
               <Button
                 icon="code-branch"
-                content={data.ready
-                  ? (data.special_name || 'Implant')
-                  : 'Recharging'}
-                onClick={() => act('implant')} />
-              {data.ready === 0 && (
-                <Icon
-                  name="cog"
-                  color="orange"
-                  spin />
-              )}
+                content={
+                  data.ready ? data.special_name || 'Implant' : 'Recharging'
+                }
+                onClick={() => act('implant')}
+              />
+              {data.ready === 0 && <Icon name="cog" color="orange" spin />}
             </LabeledList.Item>
             <LabeledList.Item label="Implants Remaining">
               {data.ready_implants}
-              {data.replenishing === 1 && (
-                <Icon
-                  name="sync"
-                  color="red"
-                  spin />
-              )}
+              {data.replenishing === 1 && <Icon name="sync" color="red" spin />}
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/InfraredEmitter.js b/tgui/packages/tgui/interfaces/InfraredEmitter.js
index a81e5ed7675a..fb8934043994 100644
--- a/tgui/packages/tgui/interfaces/InfraredEmitter.js
+++ b/tgui/packages/tgui/interfaces/InfraredEmitter.js
@@ -4,14 +4,9 @@ import { Window } from '../layouts';
 
 export const InfraredEmitter = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    on,
-    visible,
-  } = data;
+  const { on, visible } = data;
   return (
-    <Window
-      width={225}
-      height={110}>
+    <Window width={225} height={110}>
       <Window.Content>
         <Section>
           <LabeledList>
@@ -20,14 +15,16 @@ export const InfraredEmitter = (props, context) => {
                 icon={on ? 'power-off' : 'times'}
                 content={on ? 'On' : 'Off'}
                 selected={on}
-                onClick={() => act('power')} />
+                onClick={() => act('power')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Visibility">
               <Button
                 icon={visible ? 'eye' : 'eye-slash'}
                 content={visible ? 'Visible' : 'Invisible'}
                 selected={visible}
-                onClick={() => act('visibility')} />
+                onClick={() => act('visibility')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/CircuitInfo.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/CircuitInfo.js
index 49ba43e2de20..99513cf42490 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/CircuitInfo.js
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/CircuitInfo.js
@@ -1,18 +1,11 @@
 import { Button, Stack, Box } from '../../components';
 
 export const CircuitInfo = (props, context) => {
-  const {
-    name,
-    desc,
-    notices,
-    ...rest
-  } = props;
+  const { name, desc, notices, ...rest } = props;
   return (
     <Box {...rest}>
       <Stack fill vertical justify="space-around">
-        <Stack.Item maxWidth="200px">
-          {desc}
-        </Stack.Item>
+        <Stack.Item maxWidth="200px">{desc}</Stack.Item>
         <Stack.Item>
           <Stack vertical>
             {notices.map((val, index) => (
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.js
index 8dd554d8eb3a..491b9cc7429d 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.js
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.js
@@ -1,14 +1,7 @@
-import {
-  Section,
-  Button,
-  Dropdown,
-  Stack,
-  Box,
-  Input,
-} from '../../components';
+import { Section, Button, Dropdown, Stack, Box, Input } from '../../components';
 import { Component } from 'inferno';
 import { shallowDiffers } from 'common/react';
-import { fetchRetry } from "../../http";
+import { fetchRetry } from '../../http';
 import { resolveAsset } from '../../assets';
 import { Port } from './Port';
 import { DEFAULT_COMPONENT_MENU_LIMIT, noop } from './constants';
@@ -20,9 +13,9 @@ export class ComponentMenu extends Component {
   constructor() {
     super();
     this.state = {
-      selectedTab: "All",
+      selectedTab: 'All',
       currentLimit: DEFAULT_COMPONENT_MENU_LIMIT,
-      currentSearch: "",
+      currentSearch: '',
     };
   }
 
@@ -32,15 +25,17 @@ export class ComponentMenu extends Component {
 
   async populateServerData() {
     if (!fetchServerData) {
-      fetchServerData = fetchRetry(resolveAsset("circuit_components.json"))
-        .then(response => response.json());
+      fetchServerData = fetchRetry(
+        resolveAsset('circuit_components.json'),
+      ).then((response) => response.json());
     }
 
     const circuitData = await fetchServerData;
 
     this.setState({
-      componentData: circuitData.sort((a, b) =>
-        a.name.toLowerCase() < b.name.toLowerCase()),
+      componentData: circuitData.sort(
+        (a, b) => a.name.toLowerCase() < b.name.toLowerCase(),
+      ),
     });
   }
 
@@ -69,19 +64,20 @@ export class ComponentMenu extends Component {
       currentSearch,
     } = this.state;
 
-    const tabs = ["All"];
-    let shownComponents = componentData.filter(val => {
+    const tabs = ['All'];
+    let shownComponents = componentData.filter((val) => {
       let shouldShow = showAll || components.includes(val.type);
       if (shouldShow) {
         if (!tabs.includes(val.category)) {
           tabs.push(val.category);
         }
-        if (currentSearch !== "") {
-          const result
-            = val.name.toLowerCase().search(currentSearch.toLowerCase());
+        if (currentSearch !== '') {
+          const result = val.name
+            .toLowerCase()
+            .search(currentSearch.toLowerCase());
           return result !== -1;
         }
-        return selectedTab === "All" || selectedTab === val.category;
+        return selectedTab === 'All' || selectedTab === val.category;
       }
       return false;
     });
@@ -98,12 +94,7 @@ export class ComponentMenu extends Component {
         {...rest}
         fill
         buttons={
-          <Button
-            icon="times"
-            color="transparent"
-            mr={2}
-            onClick={onClose}
-          />
+          <Button icon="times" color="transparent" mr={2} onClick={onClose} />
         }
         onMouseUp={(event) => {
           event.preventDefault();
@@ -115,11 +106,13 @@ export class ComponentMenu extends Component {
             <Dropdown
               width="100%"
               options={tabs}
-              onSelected={(value) => this.setState({
-                selectedTab: value,
-                currentSearch: "",
-                currentLimit: DEFAULT_COMPONENT_MENU_LIMIT,
-              })}
+              onSelected={(value) =>
+                this.setState({
+                  selectedTab: value,
+                  currentSearch: '',
+                  currentLimit: DEFAULT_COMPONENT_MENU_LIMIT,
+                })
+              }
               displayText={`Category: ${selectedTab}`}
               color="transparent"
               className="IntegratedCircuit__BlueBorder"
@@ -130,23 +123,25 @@ export class ComponentMenu extends Component {
               placeholder="Search.."
               value={currentSearch}
               fluid
-              onInput={(e, val) => this.setState({
-                currentSearch: val,
-                selectedTab: "All",
-                currentLimit: DEFAULT_COMPONENT_MENU_LIMIT,
-              })}
+              onInput={(e, val) =>
+                this.setState({
+                  currentSearch: val,
+                  selectedTab: 'All',
+                  currentLimit: DEFAULT_COMPONENT_MENU_LIMIT,
+                })
+              }
             />
           </Stack.Item>
           <Stack.Item>
             <Stack vertical fill>
-              {shownComponents.map(val => (
+              {shownComponents.map((val) => (
                 <Stack.Item
                   key={val.type}
                   mt={1}
                   onMouseDown={(e) => onMouseDownComponent(e, val)}
                 >
                   <Box
-                    backgroundColor={val.color || "blue"}
+                    backgroundColor={val.color || 'blue'}
                     py={1}
                     px={1}
                     className="ObjectComponent__Titlebar"
@@ -170,16 +165,14 @@ export class ComponentMenu extends Component {
                     className="ObjectComponent__Content"
                     unselectable="on"
                     py={1}
-                    px={1}>
+                    px={1}
+                  >
                     <Stack>
                       <Stack.Item grow>
                         <Stack vertical fill>
                           {val.input_ports.map((port, portIndex) => (
                             <Stack.Item key={portIndex}>
-                              <Port
-                                port={port}
-                                act={noop}
-                              />
+                              <Port port={port} act={noop} />
                             </Stack.Item>
                           ))}
                         </Stack>
@@ -188,11 +181,7 @@ export class ComponentMenu extends Component {
                         <Stack vertical>
                           {val.output_ports.map((port, portIndex) => (
                             <Stack.Item key={portIndex}>
-                              <Port
-                                port={port}
-                                act={noop}
-                                isOutput
-                              />
+                              <Port port={port} act={noop} isOutput />
                             </Stack.Item>
                           ))}
                         </Stack>
@@ -209,9 +198,11 @@ export class ComponentMenu extends Component {
                     py={1}
                     mb={1}
                     content="Show More"
-                    onClick={() => this.setState({
-                      currentLimit: currentLimit + 5,
-                    })}
+                    onClick={() =>
+                      this.setState({
+                        currentLimit: currentLimit + 5,
+                      })
+                    }
                     fluid
                   />
                 </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/Connections.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/Connections.js
index 42f511358153..41abdcc36824 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/Connections.js
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/Connections.js
@@ -16,10 +16,11 @@ export const Connections = (props, context) => {
       width="100%"
       height="100%"
       style={{
-        'position': 'absolute',
+        position: 'absolute',
         'pointer-events': 'none',
         'z-index': -1,
-      }}>
+      }}
+    >
       {connections.map((val, index) => {
         const from = val.from;
         const to = val.to;
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/DisplayName.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/DisplayName.js
index c3db5e755733..f0cd2351f9c0 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/DisplayName.js
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/DisplayName.js
@@ -1,5 +1,8 @@
 import { Box, Button, Flex } from '../../components';
-import { FUNDAMENTAL_DATA_TYPES, DATATYPE_DISPLAY_HANDLERS } from './FundamentalTypes';
+import {
+  FUNDAMENTAL_DATA_TYPES,
+  DATATYPE_DISPLAY_HANDLERS,
+} from './FundamentalTypes';
 
 export const DisplayName = (props, context) => {
   const { port, isOutput, componentId, portIndex, act, ...rest } = props;
@@ -7,17 +10,18 @@ export const DisplayName = (props, context) => {
   const InputComponent = FUNDAMENTAL_DATA_TYPES[port.type || 'unknown'];
   const TypeDisplayHandler = DATATYPE_DISPLAY_HANDLERS[port.type || 'unknown'];
 
-  const hasInput = !isOutput
-    && !port.connected_to?.length
-    && (componentId || port.type === "option")
-    && InputComponent;
+  const hasInput =
+    !isOutput &&
+    !port.connected_to?.length &&
+    (componentId || port.type === 'option') &&
+    InputComponent;
 
-  const displayType = TypeDisplayHandler? TypeDisplayHandler(port) : port.type;
+  const displayType = TypeDisplayHandler ? TypeDisplayHandler(port) : port.type;
 
   return (
     <Box {...rest}>
       <Flex direction="column">
-        <Flex.Item textAlign={isOutput? "right" : "left"}>
+        <Flex.Item textAlign={isOutput ? 'right' : 'left'}>
           {(hasInput && (
             <InputComponent
               setValue={(val, extraParams) =>
@@ -26,14 +30,15 @@ export const DisplayName = (props, context) => {
                   port_id: portIndex,
                   input: val,
                   ...extraParams,
-                })}
+                })
+              }
               color={port.color}
               name={port.name}
               value={port.current_data}
               extraData={port.datatype_data}
             />
-          ))
-            || (isOutput && (
+          )) ||
+            (isOutput && (
               <Button
                 compact
                 color="transparent"
@@ -41,17 +46,20 @@ export const DisplayName = (props, context) => {
                   act('get_component_value', {
                     component_id: componentId,
                     port_id: portIndex,
-                  })}>
+                  })
+                }
+              >
                 <Box color="white">{port.name}</Box>
               </Button>
-            ))
-            || port.name}
+            )) ||
+            port.name}
         </Flex.Item>
         <Flex.Item>
           <Box
             fontSize={0.75}
             opacity={0.25}
-            textAlign={isOutput ? 'right' : 'left'}>
+            textAlign={isOutput ? 'right' : 'left'}
+          >
             {displayType || 'unknown'}
           </Box>
         </Flex.Item>
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/FundamentalTypes.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/FundamentalTypes.js
index 2a4216104356..64c57528523a 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/FundamentalTypes.js
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/FundamentalTypes.js
@@ -3,7 +3,7 @@ import { NumberInput, Button, Stack, Input, Dropdown } from '../../components';
 import { OPTION_DROPDOWN_LARGE_CHAR_AMOUNT } from './constants';
 
 export const FUNDAMENTAL_DATA_TYPES = {
-  'string': (props, context) => {
+  string: (props, context) => {
     const { name, value, setValue, color } = props;
     return (
       <BasicInput name={name} setValue={setValue} value={value} defaultValue="">
@@ -16,14 +16,15 @@ export const FUNDAMENTAL_DATA_TYPES = {
       </BasicInput>
     );
   },
-  'number': (props, context) => {
+  number: (props, context) => {
     const { name, value, setValue, color } = props;
     return (
       <BasicInput
         name={name}
         setValue={setValue}
         value={value}
-        defaultValue={0}>
+        defaultValue={0}
+      >
         <NumberInput
           value={value}
           color={color}
@@ -33,7 +34,7 @@ export const FUNDAMENTAL_DATA_TYPES = {
       </BasicInput>
     );
   },
-  'entity': (props, context) => {
+  entity: (props, context) => {
     const { name, setValue } = props;
     return (
       <Button
@@ -45,7 +46,7 @@ export const FUNDAMENTAL_DATA_TYPES = {
       />
     );
   },
-  'datum': (props, context) => {
+  datum: (props, context) => {
     const { name, setValue } = props;
     return (
       <Button
@@ -57,7 +58,7 @@ export const FUNDAMENTAL_DATA_TYPES = {
       />
     );
   },
-  'signal': (props, context) => {
+  signal: (props, context) => {
     const { name, setValue } = props;
     return (
       <Button
@@ -68,18 +69,13 @@ export const FUNDAMENTAL_DATA_TYPES = {
       />
     );
   },
-  'option': (props, context) => {
-    const {
-      value,
-      setValue,
-    } = props;
+  option: (props, context) => {
+    const { value, setValue } = props;
     let large = false;
     const extraData = props.extraData || [];
-    const data = Array.isArray(extraData)
-      ? extraData
-      : Object.keys(extraData);
+    const data = Array.isArray(extraData) ? extraData : Object.keys(extraData);
 
-    data.forEach(element => {
+    data.forEach((element) => {
       if (element.length > OPTION_DROPDOWN_LARGE_CHAR_AMOUNT) {
         large = true;
       }
@@ -88,23 +84,24 @@ export const FUNDAMENTAL_DATA_TYPES = {
     return (
       <Dropdown
         className="IntegratedCircuit__BlueBorder"
-        color={"transparent"}
+        color={'transparent'}
         options={data}
         onSelected={setValue}
         displayText={value}
-        openWidth={large ? "200px" : undefined}
+        openWidth={large ? '200px' : undefined}
         noscroll
       />
     );
   },
-  'any': (props, context) => {
+  any: (props, context) => {
     const { name, value, setValue, color } = props;
     return (
       <BasicInput
         name={name}
         setValue={setValue}
         value={value}
-        defaultValue={''}>
+        defaultValue={''}
+      >
         <Stack>
           <Stack.Item>
             <Button
@@ -128,7 +125,7 @@ export const FUNDAMENTAL_DATA_TYPES = {
 };
 
 export const DATATYPE_DISPLAY_HANDLERS = {
-  'option': (port) => {
+  option: (port) => {
     return port.name.toLowerCase();
   },
 };
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.js
index e498462aa8ed..40688b1213f7 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.js
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.js
@@ -1,12 +1,8 @@
-import {
-  Box,
-  Stack, Button,
-} from '../../components';
+import { Box, Stack, Button } from '../../components';
 import { Component } from 'inferno';
 import { shallowDiffers } from '../../../common/react';
 import { ABSOLUTE_Y_OFFSET, noop } from './constants';
-import { Port } from "./Port";
-
+import { Port } from './Port';
 
 export class ObjectComponent extends Component {
   constructor() {
@@ -77,10 +73,10 @@ export class ObjectComponent extends Component {
     const { input_ports, output_ports } = this.props;
 
     return (
-      shallowDiffers(this.props, nextProps)
-      || shallowDiffers(this.state, nextState)
-      || shallowDiffers(input_ports, nextProps.input_ports)
-      || shallowDiffers(output_ports, nextProps.output_ports)
+      shallowDiffers(this.props, nextProps) ||
+      shallowDiffers(this.state, nextState) ||
+      shallowDiffers(input_ports, nextProps.input_ports) ||
+      shallowDiffers(output_ports, nextProps.output_ports)
     );
   }
 
@@ -135,34 +131,41 @@ export class ObjectComponent extends Component {
           backgroundColor={color}
           py={1}
           px={1}
-          className="ObjectComponent__Titlebar">
+          className="ObjectComponent__Titlebar"
+        >
           <Stack>
             <Stack.Item grow={1} unselectable="on">
               {name}
             </Stack.Item>
-            {!!ui_buttons && Object.keys(ui_buttons).map(icon => (
-              <Stack.Item key={icon}>
-                <Button
-                  icon={icon}
-                  color="transparent"
-                  compact
-                  onClick={() => act('perform_action', {
-                    component_id: index,
-                    action_name: ui_buttons[icon],
-                  })}
-                />
-              </Stack.Item>
-            ))}
+            {!!ui_buttons &&
+              Object.keys(ui_buttons).map((icon) => (
+                <Stack.Item key={icon}>
+                  <Button
+                    icon={icon}
+                    color="transparent"
+                    compact
+                    onClick={() =>
+                      act('perform_action', {
+                        component_id: index,
+                        action_name: ui_buttons[icon],
+                      })
+                    }
+                  />
+                </Stack.Item>
+              ))}
             <Stack.Item>
               <Button
                 color="transparent"
                 icon="info"
                 compact
-                onClick={(e) => act('set_examined_component', {
-                  component_id: index,
-                  x: e.pageX,
-                  y: e.pageY + ABSOLUTE_Y_OFFSET,
-                })} />
+                onClick={(e) =>
+                  act('set_examined_component', {
+                    component_id: index,
+                    x: e.pageX,
+                    y: e.pageY + ABSOLUTE_Y_OFFSET,
+                  })
+                }
+              />
             </Stack.Item>
             {!!removable && (
               <Stack.Item>
@@ -170,7 +173,10 @@ export class ObjectComponent extends Component {
                   color="transparent"
                   icon="times"
                   compact
-                  onClick={() => act('detach_component', { component_id: index })} />
+                  onClick={() =>
+                    act('detach_component', { component_id: index })
+                  }
+                />
               </Stack.Item>
             )}
           </Stack>
@@ -179,7 +185,8 @@ export class ObjectComponent extends Component {
           className="ObjectComponent__Content"
           unselectable="on"
           py={1}
-          px={1}>
+          px={1}
+        >
           <Stack>
             <Stack.Item>
               <Stack vertical fill>
@@ -206,7 +213,8 @@ export class ObjectComponent extends Component {
                       portIndex={portIndex + 1}
                       componentId={index}
                       {...PortOptions}
-                      isOutput />
+                      isOutput
+                    />
                   </Stack.Item>
                 ))}
               </Stack>
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.js
index 06ecbb5f8d53..c1ffb8e512be 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.js
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.js
@@ -1,9 +1,6 @@
-import {
-  Stack,
-  Box,
-} from '../../components';
+import { Stack, Box } from '../../components';
 import { Component, createRef } from 'inferno';
-import { DisplayName } from "./DisplayName";
+import { DisplayName } from './DisplayName';
 import { classes } from 'common/react';
 import { noop } from './constants';
 
@@ -24,7 +21,7 @@ export class Port extends Component {
       portIndex,
       componentId,
       isOutput,
-      onPortMouseDown= noop,
+      onPortMouseDown = noop,
     } = this.props;
     onPortMouseDown(portIndex, componentId, port, isOutput, e);
   }
@@ -66,13 +63,7 @@ export class Port extends Component {
   }
 
   renderDisplayName() {
-    const {
-      port,
-      portIndex,
-      componentId,
-      isOutput,
-      act,
-    } = this.props;
+    const { port, portIndex, componentId, isOutput, act } = this.props;
 
     return (
       <Stack.Item>
@@ -81,18 +72,14 @@ export class Port extends Component {
           port={port}
           isOutput={isOutput}
           componentId={componentId}
-          portIndex={portIndex} />
+          portIndex={portIndex}
+        />
       </Stack.Item>
     );
   }
 
   render() {
-    const {
-      port,
-      isOutput,
-      ...rest
-    } = this.props;
-
+    const { port, isOutput, ...rest } = this.props;
 
     let composite_types = [];
     if (port.datatype_data?.composite_types) {
@@ -100,16 +87,11 @@ export class Port extends Component {
     }
 
     return (
-      <Stack
-        {...rest}
-        justify={isOutput ? 'flex-end' : 'flex-start'}
-      >
+      <Stack {...rest} justify={isOutput ? 'flex-end' : 'flex-start'}>
         {!!isOutput && this.renderDisplayName()}
         <Stack.Item>
           <Box
-            className={classes([
-              "ObjectComponent__Port",
-            ])}
+            className={classes(['ObjectComponent__Port'])}
             onMouseDown={this.handlePortMouseDown}
             onContextMenu={this.handlePortRightClick}
             onMouseUp={this.handlePortMouseUp}
@@ -117,22 +99,22 @@ export class Port extends Component {
           >
             <svg
               style={{
-                width: "100%",
-                height: "100%",
-                position: "absolute",
+                width: '100%',
+                height: '100%',
+                position: 'absolute',
               }}
               viewBox="0, 0, 100, 100"
             >
               {composite_types.map((compositeColor, index) => {
-                const radians = (2*Math.PI)/composite_types.length;
-                const arcLength = radians*50;
+                const radians = (2 * Math.PI) / composite_types.length;
+                const arcLength = radians * 50;
                 return (
                   <circle
                     key={index}
                     stroke={compositeColor}
-                    strokeDasharray={`${arcLength}, ${100*Math.PI}`}
+                    strokeDasharray={`${arcLength}, ${100 * Math.PI}`}
                     strokeDashoffset={
-                      -index*(100*(Math.PI/composite_types.length))
+                      -index * (100 * (Math.PI / composite_types.length))
                     }
                     className={`color-stroke-${compositeColor}`}
                     strokeWidth="50px"
@@ -144,7 +126,13 @@ export class Port extends Component {
                   />
                 );
               })}
-              <circle ref={this.iconRef} cx="50" cy="50" r="50" className={`color-fill-${port.color}`} />
+              <circle
+                ref={this.iconRef}
+                cx="50"
+                cy="50"
+                r="50"
+                className={`color-fill-${port.color}`}
+              />
             </svg>
             <span ref={this.iconRef} className="ObjectComponent__PortPos" />
           </Box>
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/VariableMenu.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/VariableMenu.js
index 9e552e6b6d8f..55a2b3e7b39e 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/VariableMenu.js
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/VariableMenu.js
@@ -14,8 +14,8 @@ export class VariableMenu extends Component {
   constructor() {
     super();
     this.state = {
-      variable_name: "",
-      variable_type: "any",
+      variable_name: '',
+      variable_type: 'any',
     };
   }
 
@@ -47,10 +47,7 @@ export class VariableMenu extends Component {
       types,
       ...rest
     } = this.props;
-    const {
-      variable_name,
-      variable_type,
-    } = this.state;
+    const { variable_name, variable_type } = this.state;
 
     return (
       <Section
@@ -58,21 +55,21 @@ export class VariableMenu extends Component {
         {...rest}
         fill
         buttons={
-          <Button
-            icon="times"
-            color="transparent"
-            mr={2}
-            onClick={onClose}
-          />
+          <Button icon="times" color="transparent" mr={2} onClick={onClose} />
         }
       >
         <Stack height="100%">
           <Stack.Item grow={1} mr={2}>
             <Section fill scrollable>
               <Stack vertical fill>
-                {variables.map(val => (
+                {variables.map((val) => (
                   <Stack.Item key={val.name}>
-                    <Box backgroundColor="transparent" px="1px" py="1px" height="100%">
+                    <Box
+                      backgroundColor="transparent"
+                      px="1px"
+                      py="1px"
+                      height="100%"
+                    >
                       <Stack>
                         <Stack.Item basis="50%" grow>
                           <Box width="100%" overflow="hidden">
@@ -80,11 +77,7 @@ export class VariableMenu extends Component {
                           </Box>
                         </Stack.Item>
                         <Stack.Item minWidth="80px">
-                          <Button
-                            textAlign="center"
-                            fluid
-                            color={val.color}
-                          >
+                          <Button textAlign="center" fluid color={val.color}>
                             {val.datatype}
                           </Button>
                         </Stack.Item>
@@ -92,28 +85,26 @@ export class VariableMenu extends Component {
                           <Button
                             fluid
                             onMouseDown={(e) =>
-                              handleMouseDownSetter(e, val.name)}
+                              handleMouseDownSetter(e, val.name)
+                            }
                             color={val.color}
                             disabled={!!val.is_list}
-                            tooltip={
-                              multiline`
+                            tooltip={multiline`
                             Drag me onto the circuit's grid
-                            to make a setter for this variable`
-                            }
+                            to make a setter for this variable`}
                             icon="pen"
                           />
                         </Stack.Item>
                         <Stack.Item>
                           <Button
                             fluid
-                            tooltip={
-                              multiline`
+                            tooltip={multiline`
                             Drag me onto the circuit's grid
-                            to make a getter for this variable`
-                            }
+                            to make a getter for this variable`}
                             color={val.color}
                             onMouseDown={(e) =>
-                              handleMouseDownGetter(e, val.name)}
+                              handleMouseDownGetter(e, val.name)
+                            }
                             icon="book-open"
                           />
                         </Stack.Item>
@@ -138,9 +129,11 @@ export class VariableMenu extends Component {
                   <Input
                     placeholder="Name"
                     fluid
-                    onChange={(e, nameVal) => this.setState({
-                      variable_name: nameVal,
-                    })}
+                    onChange={(e, nameVal) =>
+                      this.setState({
+                        variable_name: nameVal,
+                      })
+                    }
                   />
                 </Stack.Item>
                 <Stack.Item>
@@ -153,9 +146,11 @@ export class VariableMenu extends Component {
                         color="black"
                         width="100%"
                         over
-                        onSelected={(selectedVal) => this.setState({
-                          variable_type: selectedVal,
-                        })}
+                        onSelected={(selectedVal) =>
+                          this.setState({
+                            variable_type: selectedVal,
+                          })
+                        }
                       />
                     </Stack.Item>
                     <Stack.Item>
@@ -163,7 +158,8 @@ export class VariableMenu extends Component {
                         height="100%"
                         color="green"
                         onClick={(e) =>
-                          onAddVariable(variable_name, variable_type, false, e)}
+                          onAddVariable(variable_name, variable_type, false, e)
+                        }
                         fluid
                       >
                         <IconButton icon="plus" />
@@ -174,7 +170,8 @@ export class VariableMenu extends Component {
                         height="100%"
                         color="green"
                         onClick={(e) =>
-                          onAddVariable(variable_name, variable_type, true, e)}
+                          onAddVariable(variable_name, variable_type, true, e)
+                        }
                         fluid
                       >
                         <IconButton icon="list" />
@@ -195,12 +192,7 @@ const IconButton = (props, context) => {
   return (
     <Stack fill align="center">
       <Stack.Item grow basis="content">
-        <Icon
-          name={props.icon}
-          size={1}
-          width="100%"
-          m="0em"
-        />
+        <Icon name={props.icon} size={1} width="100%" m="0em" />
       </Stack.Item>
     </Stack>
   );
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/index.js b/tgui/packages/tgui/interfaces/IntegratedCircuit/index.js
index cc4c2c6a6c76..844f483544b1 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/index.js
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/index.js
@@ -1,16 +1,14 @@
 import { useBackend } from '../../backend';
-import {
-  Input,
-  InfinitePlane,
-  Stack,
-  Box,
-  Button,
-} from '../../components';
+import { Input, InfinitePlane, Stack, Box, Button } from '../../components';
 import { Component } from 'inferno';
 import { Window } from '../../layouts';
 import { resolveAsset } from '../../assets';
 import { CircuitInfo } from './CircuitInfo';
-import { ABSOLUTE_Y_OFFSET, MOUSE_BUTTON_LEFT, TIME_UNTIL_PORT_RELEASE_WORKS } from './constants';
+import {
+  ABSOLUTE_Y_OFFSET,
+  MOUSE_BUTTON_LEFT,
+  TIME_UNTIL_PORT_RELEASE_WORKS,
+} from './constants';
 import { Connections } from './Connections';
 import { ObjectComponent } from './ObjectComponent';
 import { VariableMenu } from './VariableMenu';
@@ -78,11 +76,11 @@ export class IntegratedCircuit extends Component {
     position.color = port.color;
 
     if (
-      isNaN(position.x)
-      || isNaN(position.y)
-      || (lastPosition
-        && lastPosition.x === position.x
-        && lastPosition.y === position.y)
+      isNaN(position.x) ||
+      isNaN(position.y) ||
+      (lastPosition &&
+        lastPosition.x === position.x &&
+        lastPosition.y === position.y)
     ) {
       return;
     }
@@ -112,8 +110,8 @@ export class IntegratedCircuit extends Component {
 
     this.handlePortDrag(event);
 
-    this.timeUntilPortReleaseTimesOut
-      = Date.now() + TIME_UNTIL_PORT_RELEASE_WORKS;
+    this.timeUntilPortReleaseTimesOut =
+      Date.now() + TIME_UNTIL_PORT_RELEASE_WORKS;
 
     window.addEventListener('mousemove', this.handlePortDrag);
     window.addEventListener('mouseup', this.handlePortRelease);
@@ -123,9 +121,7 @@ export class IntegratedCircuit extends Component {
   // exists and do perform some actions if it does.
   handlePortUp(portIndex, componentId, port, isOutput, event) {
     const { act, data: uiData } = useBackend(this.context);
-    const {
-      selectedPort,
-    } = this.state;
+    const { selectedPort } = this.state;
     if (!selectedPort) {
       return;
     }
@@ -151,7 +147,7 @@ export class IntegratedCircuit extends Component {
         output_component_id: selectedPort.component_id,
       };
     }
-    act("add_connection", data);
+    act('add_connection', data);
 
     const { components } = uiData;
     const {
@@ -161,17 +157,17 @@ export class IntegratedCircuit extends Component {
       output_port_id,
     } = data;
 
-    const input_comp = components[input_component_id-1];
-    const input_port = input_comp.input_ports[input_port_id-1];
-    const output_comp = components[output_component_id-1];
-    const output_port = output_comp.output_ports[output_port_id-1];
+    const input_comp = components[input_component_id - 1];
+    const input_port = input_comp.input_ports[input_port_id - 1];
+    const output_comp = components[output_component_id - 1];
+    const output_port = output_comp.output_ports[output_port_id - 1];
     // Do not predict ports that do not match because there is no guarantee
     // that they will properly match.
     // TODO: Implement proper prediction for this
     if (!input_port || input_port.type !== output_port.type) {
       return;
     }
-    input_port.connected_to.push(isOutput? port.ref : selectedPort.ref);
+    input_port.connected_to.push(isOutput ? port.ref : selectedPort.ref);
   }
 
   handlePortDrag(event) {
@@ -250,7 +246,7 @@ export class IntegratedCircuit extends Component {
     const { act } = useBackend(this.context);
     const { backgroundX, backgroundY } = this.state;
     if (backgroundX && backgroundY) {
-      act("move_screen", {
+      act('move_screen', {
         screen_x: backgroundX,
         screen_y: backgroundY,
       });
@@ -283,19 +279,16 @@ export class IntegratedCircuit extends Component {
       backgroundY,
       zoom,
     } = this.state;
-    const {
-      screen_x,
-      screen_y,
-    } = data;
+    const { screen_x, screen_y } = data;
 
-    const xPos = (event.clientX - (backgroundX || screen_x));
-    const yPos = (event.clientY - (backgroundY || screen_y));
+    const xPos = event.clientX - (backgroundX || screen_x);
+    const yPos = event.clientY - (backgroundY || screen_y);
 
-    act("add_setter_or_getter", {
+    act('add_setter_or_getter', {
       variable: draggingVariable,
       is_setter: variableIsSetter,
-      rel_x: xPos*Math.pow(zoom, -1),
-      rel_y: (yPos + ABSOLUTE_Y_OFFSET)*Math.pow(zoom, -1),
+      rel_x: xPos * Math.pow(zoom, -1),
+      rel_y: (yPos + ABSOLUTE_Y_OFFSET) * Math.pow(zoom, -1),
     });
 
     this.setState({
@@ -306,7 +299,6 @@ export class IntegratedCircuit extends Component {
     window.removeEventListener('mouseup', this.handleVarDropped);
   }
 
-
   handleMouseDownComponent(event, component) {
     this.setState({
       draggingComponent: component.type,
@@ -317,16 +309,8 @@ export class IntegratedCircuit extends Component {
 
   handleComponentDropped(event) {
     const { data, act } = useBackend(this.context);
-    const {
-      draggingComponent,
-      backgroundX,
-      backgroundY,
-      zoom,
-    } = this.state;
-    const {
-      screen_x,
-      screen_y,
-    } = data;
+    const { draggingComponent, backgroundX, backgroundY, zoom } = this.state;
+    const { screen_x, screen_y } = data;
 
     this.setState({
       draggingComponent: null,
@@ -338,13 +322,13 @@ export class IntegratedCircuit extends Component {
       return;
     }
 
-    const xPos = (event.clientX - (backgroundX || screen_x));
-    const yPos = (event.clientY - (backgroundY || screen_y));
+    const xPos = event.clientX - (backgroundX || screen_x);
+    const yPos = event.clientY - (backgroundY || screen_y);
 
-    act("print_component", {
+    act('print_component', {
       component_to_print: draggingComponent,
-      rel_x: xPos*Math.pow(zoom, -1),
-      rel_y: (yPos + ABSOLUTE_Y_OFFSET)*Math.pow(zoom, -1),
+      rel_x: xPos * Math.pow(zoom, -1),
+      rel_y: (yPos + ABSOLUTE_Y_OFFSET) * Math.pow(zoom, -1),
     });
   }
 
@@ -365,12 +349,8 @@ export class IntegratedCircuit extends Component {
       global_basic_types,
       stored_designs,
     } = data;
-    const {
-      locations,
-      selectedPort,
-      variableMenuOpen,
-      componentMenuOpen,
-    } = this.state;
+    const { locations, selectedPort, variableMenuOpen, componentMenuOpen } =
+      this.state;
     const connections = [];
 
     for (const comp of components) {
@@ -395,13 +375,13 @@ export class IntegratedCircuit extends Component {
       const isOutput = selectedPort.is_output;
       const portLocation = locations[selectedPort.ref];
       const mouseCoords = {
-        x: (mouseX)*Math.pow(zoom, -1),
-        y: (mouseY + ABSOLUTE_Y_OFFSET)*Math.pow(zoom, -1),
+        x: mouseX * Math.pow(zoom, -1),
+        y: (mouseY + ABSOLUTE_Y_OFFSET) * Math.pow(zoom, -1),
       };
       connections.push({
         color: (portLocation && portLocation.color) || 'blue',
-        from: isOutput? portLocation : mouseCoords,
-        to: isOutput? mouseCoords : portLocation,
+        from: isOutput ? portLocation : mouseCoords,
+        to: isOutput ? mouseCoords : portLocation,
       });
     }
 
@@ -409,20 +389,17 @@ export class IntegratedCircuit extends Component {
       <Window
         width={1200}
         height={800}
-        buttons={(
-          <Box
-            width="160px"
-            position="absolute"
-            top="5px"
-            height="22px"
-          >
+        buttons={
+          <Box width="160px" position="absolute" top="5px" height="22px">
             <Stack>
               <Stack.Item grow>
                 <Input
                   fluid
                   placeholder="Name"
                   value={display_name}
-                  onChange={(e, value) => act("set_display_name", { display_name: value })}
+                  onChange={(e, value) =>
+                    act('set_display_name', { display_name: value })
+                  }
                 />
               </Stack.Item>
               <Stack.Item basis="24px">
@@ -432,9 +409,11 @@ export class IntegratedCircuit extends Component {
                   color="transparent"
                   icon="cog"
                   selected={variableMenuOpen}
-                  onClick={() => this.setState((state) => ({
-                    variableMenuOpen: !state.variableMenuOpen,
-                  }))}
+                  onClick={() =>
+                    this.setState((state) => ({
+                      variableMenuOpen: !state.variableMenuOpen,
+                    }))
+                  }
                 />
               </Stack.Item>
               <Stack.Item basis="24px">
@@ -444,9 +423,11 @@ export class IntegratedCircuit extends Component {
                   color="transparent"
                   icon="plus"
                   selected={componentMenuOpen}
-                  onClick={() => this.setState((state) => ({
-                    componentMenuOpen: !state.componentMenuOpen,
-                  }))}
+                  onClick={() =>
+                    this.setState((state) => ({
+                      componentMenuOpen: !state.componentMenuOpen,
+                    }))
+                  }
                 />
               </Stack.Item>
               {!!is_admin && (
@@ -455,19 +436,20 @@ export class IntegratedCircuit extends Component {
                     position="absolute"
                     top={0}
                     color="transparent"
-                    onClick={() => act("save_circuit")}
+                    onClick={() => act('save_circuit')}
                     icon="save"
                   />
                 </Stack.Item>
               )}
             </Stack>
           </Box>
-        )}
+        }
       >
         <Window.Content
           style={{
             'background-image': 'none',
-          }}>
+          }}
+        >
           <InfinitePlane
             width="100%"
             height="100%"
@@ -492,7 +474,7 @@ export class IntegratedCircuit extends Component {
                     onPortMouseUp={this.handlePortUp}
                     act={act}
                   />
-                )
+                ),
             )}
             <Connections connections={connections} />
           </InfinitePlane>
@@ -517,9 +499,9 @@ export class IntegratedCircuit extends Component {
               minWidth="600px"
               width="50%"
               style={{
-                "border-radius": "0px 32px 0px 0px",
-                "background-color": "rgba(0, 0, 0, 0.3)",
-                "-ms-user-select": "none",
+                'border-radius': '0px 32px 0px 0px',
+                'background-color': 'rgba(0, 0, 0, 0.3)',
+                '-ms-user-select': 'none',
               }}
               unselectable="on"
             >
@@ -527,18 +509,22 @@ export class IntegratedCircuit extends Component {
                 variables={variables}
                 types={global_basic_types}
                 onClose={(event) => this.setState({ variableMenuOpen: false })}
-                onAddVariable={(name, type, asList, event) => act("add_variable", {
-                  variable_name: name,
-                  variable_datatype: type,
-                  is_list: asList,
-                })}
-                onRemoveVariable={(name, event) => act("remove_variable", {
-                  variable_name: name,
-                })}
+                onAddVariable={(name, type, asList, event) =>
+                  act('add_variable', {
+                    variable_name: name,
+                    variable_datatype: type,
+                    is_list: asList,
+                  })
+                }
+                onRemoveVariable={(name, event) =>
+                  act('remove_variable', {
+                    variable_name: name,
+                  })
+                }
                 handleMouseDownSetter={this.onVarClickedSetter}
                 handleMouseDownGetter={this.onVarClickedGetter}
                 style={{
-                  "border-radius": "0px 32px 0px 0px",
+                  'border-radius': '0px 32px 0px 0px',
                 }}
               />
             </Box>
@@ -551,13 +537,15 @@ export class IntegratedCircuit extends Component {
               height="100%"
               width="300px"
               style={{
-                "background-color": "rgba(0, 0, 0, 0.3)",
-                "-ms-user-select": "none",
+                'background-color': 'rgba(0, 0, 0, 0.3)',
+                '-ms-user-select': 'none',
               }}
               unselectable="on"
             >
               <ComponentMenu
-                components={stored_designs && Object.keys(stored_designs) || []}
+                components={
+                  (stored_designs && Object.keys(stored_designs)) || []
+                }
                 onClose={(event) => this.setState({ componentMenuOpen: false })}
                 onMouseDownComponent={this.handleMouseDownComponent}
                 showAll={is_admin}
@@ -569,4 +557,3 @@ export class IntegratedCircuit extends Component {
     );
   }
 }
-
diff --git a/tgui/packages/tgui/interfaces/Intellicard.js b/tgui/packages/tgui/interfaces/Intellicard.js
index e672987ed9b0..dd04b57c0fc0 100644
--- a/tgui/packages/tgui/interfaces/Intellicard.js
+++ b/tgui/packages/tgui/interfaces/Intellicard.js
@@ -1,5 +1,11 @@
 import { useBackend } from '../backend';
-import { BlockQuote, Button, LabeledList, ProgressBar, Section } from '../components';
+import {
+  BlockQuote,
+  Button,
+  LabeledList,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const Intellicard = (props, context) => {
@@ -16,24 +22,24 @@ export const Intellicard = (props, context) => {
   } = data;
   const offline = isDead || isBraindead;
   return (
-    <Window
-      width={500}
-      height={500}>
+    <Window width={500} height={500}>
       <Window.Content scrollable>
         <Section
-          title={name || "Empty Card"}
-          buttons={!!name && (
-            <Button
-              icon="trash"
-              content={wiping ? 'Stop Wiping' : 'Wipe'}
-              disabled={isDead}
-              onClick={() => act('wipe')} />
-          )}>
+          title={name || 'Empty Card'}
+          buttons={
+            !!name && (
+              <Button
+                icon="trash"
+                content={wiping ? 'Stop Wiping' : 'Wipe'}
+                disabled={isDead}
+                onClick={() => act('wipe')}
+              />
+            )
+          }
+        >
           {!!name && (
             <LabeledList>
-              <LabeledList.Item
-                label="Status"
-                color={offline ? 'bad' : 'good'}>
+              <LabeledList.Item label="Status" color={offline ? 'bad' : 'good'}>
                 {offline ? 'Offline' : 'Operation'}
               </LabeledList.Item>
               <LabeledList.Item label="Software Integrity">
@@ -53,18 +59,18 @@ export const Intellicard = (props, context) => {
                   icon="signal"
                   content="Wireless Activity"
                   selected={wireless}
-                  onClick={() => act('wireless')} />
+                  onClick={() => act('wireless')}
+                />
                 <Button
                   icon="microphone"
                   content="Subspace Radio"
                   selected={radio}
-                  onClick={() => act('radio')} />
+                  onClick={() => act('radio')}
+                />
               </LabeledList.Item>
               <LabeledList.Item label="Laws">
-                {laws.map(law => (
-                  <BlockQuote key={law}>
-                    {law}
-                  </BlockQuote>
+                {laws.map((law) => (
+                  <BlockQuote key={law}>{law}</BlockQuote>
                 ))}
               </LabeledList.Item>
             </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/Interview.js b/tgui/packages/tgui/interfaces/Interview.js
index 861c271f0e94..c3107b3b57db 100644
--- a/tgui/packages/tgui/interfaces/Interview.js
+++ b/tgui/packages/tgui/interfaces/Interview.js
@@ -62,8 +62,8 @@ export const Interview = (props, context) => {
           <Section title="Welcome!">
             <p>{linkify_text(welcome_message)}</p>
           </Section>
-        ))
-          || rendered_status(status)}
+        )) ||
+          rendered_status(status)}
         <Section
           title="Questionnaire"
           buttons={
@@ -93,7 +93,8 @@ export const Interview = (props, context) => {
                 </span>
               )}
             </span>
-          }>
+          }
+        >
           {!read_only && (
             <p>
               Please answer the following questions, and press submit when you
@@ -116,11 +117,12 @@ export const Interview = (props, context) => {
                   maxLength={500}
                   placeholder="Write your response here, max of 500 characters."
                   onChange={(e, input) =>
-                    input !== response
-                    && act('update_answer', {
+                    input !== response &&
+                    act('update_answer', {
                       qidx: qidx,
                       answer: input,
-                    })}
+                    })
+                  }
                 />
               )}
             </Section>
diff --git a/tgui/packages/tgui/interfaces/InterviewManager.js b/tgui/packages/tgui/interfaces/InterviewManager.js
index 2f9194471938..dd2b82b83f0e 100644
--- a/tgui/packages/tgui/interfaces/InterviewManager.js
+++ b/tgui/packages/tgui/interfaces/InterviewManager.js
@@ -4,44 +4,40 @@ import { useBackend } from '../backend';
 
 export const InterviewManager = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    open_interviews,
-    closed_interviews,
-  } = data;
+  const { open_interviews, closed_interviews } = data;
 
-  const colorMap = status => {
+  const colorMap = (status) => {
     switch (status) {
-      case "interview_approved":
-        return "good";
-      case "interview_denied":
-        return "bad";
-      case "interview_pending":
-        return "average";
+      case 'interview_approved':
+        return 'good';
+      case 'interview_denied':
+        return 'bad';
+      case 'interview_pending':
+        return 'average';
     }
   };
 
   return (
-    <Window
-      width={500}
-      height={600}
-      theme="admin">
+    <Window width={500} height={600} theme="admin">
       <Window.Content scrollable>
         <Section title="Active Interviews">
           {open_interviews.map(({ id, ckey, status, queued, disconnected }) => (
             <Button
               key={id}
-              content={ckey + (disconnected ? " (DC)" : "")}
-              color={queued ? "default" : colorMap(status)}
-              onClick={() => act('open', { "id": id })} />
+              content={ckey + (disconnected ? ' (DC)' : '')}
+              color={queued ? 'default' : colorMap(status)}
+              onClick={() => act('open', { id: id })}
+            />
           ))}
         </Section>
         <Section title="Closed Interviews">
           {closed_interviews.map(({ id, ckey, status, disconnected }) => (
             <Button
               key={id}
-              content={ckey + (disconnected ? " (DC)" : "")}
+              content={ckey + (disconnected ? ' (DC)' : '')}
               color={colorMap(status)}
-              onClick={() => act('open', { "id": id })} />
+              onClick={() => act('open', { id: id })}
+            />
           ))}
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/Jukebox.js b/tgui/packages/tgui/interfaces/Jukebox.js
index baa0ee263d78..790c2dc6a272 100644
--- a/tgui/packages/tgui/interfaces/Jukebox.js
+++ b/tgui/packages/tgui/interfaces/Jukebox.js
@@ -1,53 +1,59 @@
 import { sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { useBackend } from '../backend';
-import { Box, Button, Dropdown, Section, Knob, LabeledControls, LabeledList } from '../components';
+import {
+  Box,
+  Button,
+  Dropdown,
+  Section,
+  Knob,
+  LabeledControls,
+  LabeledList,
+} from '../components';
 import { Window } from '../layouts';
 
 export const Jukebox = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    active,
-    track_selected,
-    track_length,
-    track_author,
-    volume,
-  } = data;
-  const songs = flow([
-    sortBy(
-      song => song.name),
-  ])(data.songs || []);
+  const { active, track_selected, track_length, track_author, volume } = data;
+  const songs = flow([sortBy((song) => song.name)])(data.songs || []);
   return (
-    <Window
-      width={370}
-      height={313}>
+    <Window width={370} height={313}>
       <Window.Content>
         <Section
           title="Song Player"
-          buttons={(
+          buttons={
             <Button
               icon={active ? 'pause' : 'play'}
               content={active ? 'Stop' : 'Play'}
               selected={active}
-              onClick={() => act('toggle')} />
-          )}>
+              onClick={() => act('toggle')}
+            />
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Track Selected">
               <Dropdown
                 overflow-y="scroll"
                 width="240px"
-                options={songs.map(song => song.name)}
+                options={songs.map((song) => song.name)}
                 disabled={active}
-                selected={track_selected || "Select a Track"}
-                onSelected={value => act('select_track', {
-                  track: value,
-                })} />
+                selected={track_selected || 'Select a Track'}
+                onSelected={(value) =>
+                  act('select_track', {
+                    track: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Track Length">
-              {track_selected ? track_length : "No Track Selected"}
+              {track_selected ? track_length : 'No Track Selected'}
             </LabeledList.Item>
             <LabeledList.Item label="Author">
-              {track_selected ? (track_author ? track_author : "Priapus Company Band") : "No Track Selected"}
+              {track_selected
+                ? track_author
+                  ? track_author
+                  : 'Priapus Company Band'
+                : 'No Track Selected'}
             </LabeledList.Item>
           </LabeledList>
         </Section>
@@ -65,9 +71,12 @@ export const Jukebox = (props, context) => {
                   step={1}
                   stepPixelSize={1}
                   disabled={active}
-                  onDrag={(e, value) => act('set_volume', {
-                    volume: value,
-                  })} />
+                  onDrag={(e, value) =>
+                    act('set_volume', {
+                      volume: value,
+                    })
+                  }
+                />
                 <Button
                   fluid
                   position="absolute"
@@ -75,9 +84,12 @@ export const Jukebox = (props, context) => {
                   right="-22px"
                   color="transparent"
                   icon="fast-backward"
-                  onClick={() => act('set_volume', {
-                    volume: "min",
-                  })} />
+                  onClick={() =>
+                    act('set_volume', {
+                      volume: 'min',
+                    })
+                  }
+                />
                 <Button
                   fluid
                   position="absolute"
@@ -85,9 +97,12 @@ export const Jukebox = (props, context) => {
                   right="-22px"
                   color="transparent"
                   icon="fast-forward"
-                  onClick={() => act('set_volume', {
-                    volume: "max",
-                  })} />
+                  onClick={() =>
+                    act('set_volume', {
+                      volume: 'max',
+                    })
+                  }
+                />
                 <Button
                   fluid
                   position="absolute"
@@ -95,9 +110,12 @@ export const Jukebox = (props, context) => {
                   right="-22px"
                   color="transparent"
                   icon="undo"
-                  onClick={() => act('set_volume', {
-                    volume: "reset",
-                  })} />
+                  onClick={() =>
+                    act('set_volume', {
+                      volume: 'reset',
+                    })
+                  }
+                />
               </Box>
             </LabeledControls.Item>
           </LabeledControls>
diff --git a/tgui/packages/tgui/interfaces/KeycardAuth.js b/tgui/packages/tgui/interfaces/KeycardAuth.js
index 0f927aa45f83..5ebfd58aed55 100644
--- a/tgui/packages/tgui/interfaces/KeycardAuth.js
+++ b/tgui/packages/tgui/interfaces/KeycardAuth.js
@@ -5,9 +5,7 @@ import { Window } from '../layouts';
 export const KeycardAuth = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={375}
-      height={58+(data.optmap.length*22)}>
+    <Window width={375} height={58 + data.optmap.length * 22}>
       <Window.Content>
         <Section>
           <Box>
@@ -26,7 +24,8 @@ export const KeycardAuth = (props, context) => {
                     lineHeight="60px"
                     fluid
                     onClick={() => act('auth_swipe')}
-                    content="Authorize" />
+                    content="Authorize"
+                  />
                 )}
                 {data.auth_required === 0 && (
                   <>
@@ -44,15 +43,18 @@ export const KeycardAuth = (props, context) => {
                       icon="meteor"
                       fluid
                       onClick={() => act('bsa_unlock')}
-                      content="Bluespace Artillery Unlock" /> */}{/* frag2*/}
-                    {data.optmap.map(optbundle => {
+                      content="Bluespace Artillery Unlock" /> */}
+                    {/* frag2*/}
+                    {data.optmap.map((optbundle) => {
                       return (
                         <Button
                           fluid
                           key={optbundle.trigger_key}
                           icon={optbundle.icon}
                           content={optbundle.displaymsg}
-                          onClick={() => act('trigger', { path: optbundle.trigger_key })}
+                          onClick={() =>
+                            act('trigger', { path: optbundle.trigger_key })
+                          }
                           disabled={!optbundle.is_valid}
                         />
                       );
diff --git a/tgui/packages/tgui/interfaces/LaborClaimConsole.js b/tgui/packages/tgui/interfaces/LaborClaimConsole.js
index 4b539685069e..8a4d4e037484 100644
--- a/tgui/packages/tgui/interfaces/LaborClaimConsole.js
+++ b/tgui/packages/tgui/interfaces/LaborClaimConsole.js
@@ -5,40 +5,31 @@ import { Window } from '../layouts';
 
 export const LaborClaimConsole = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    can_go_home,
-    id_points,
-    ores,
-    status_info,
-    unclaimed_points,
-  } = data;
+  const { can_go_home, id_points, ores, status_info, unclaimed_points } = data;
   return (
-    <Window
-      width={315}
-      height={440}>
+    <Window width={315} height={440}>
       <Window.Content>
         <Section>
           <LabeledList>
-            <LabeledList.Item label="Status">
-              {status_info}
-            </LabeledList.Item>
+            <LabeledList.Item label="Status">{status_info}</LabeledList.Item>
             <LabeledList.Item label="Shuttle controls">
               <Button
                 content="Move shuttle"
                 disabled={!can_go_home}
-                onClick={() => act('move_shuttle')} />
-            </LabeledList.Item>
-            <LabeledList.Item label="Points">
-              {id_points}
+                onClick={() => act('move_shuttle')}
+              />
             </LabeledList.Item>
+            <LabeledList.Item label="Points">{id_points}</LabeledList.Item>
             <LabeledList.Item
               label="Unclaimed points"
-              buttons={(
+              buttons={
                 <Button
                   content="Claim points"
                   disabled={!unclaimed_points}
-                  onClick={() => act('claim_points')} />
-              )}>
+                  onClick={() => act('claim_points')}
+                />
+              }
+            >
               {unclaimed_points}
             </LabeledList.Item>
           </LabeledList>
@@ -46,18 +37,14 @@ export const LaborClaimConsole = (props, context) => {
         <Section title="Material values">
           <Table>
             <Table.Row header>
-              <Table.Cell>
-                Material
-              </Table.Cell>
+              <Table.Cell>Material</Table.Cell>
               <Table.Cell collapsing textAlign="right">
                 Value
               </Table.Cell>
             </Table.Row>
-            {ores.map(ore => (
+            {ores.map((ore) => (
               <Table.Row key={ore.ore}>
-                <Table.Cell>
-                  {toTitleCase(ore.ore)}
-                </Table.Cell>
+                <Table.Cell>{toTitleCase(ore.ore)}</Table.Cell>
                 <Table.Cell collapsing textAlign="right">
                   <Box color="label" inline>
                     {ore.value}
diff --git a/tgui/packages/tgui/interfaces/LanguageMenu.js b/tgui/packages/tgui/interfaces/LanguageMenu.js
index 89aa748ffc84..36170d04ed91 100644
--- a/tgui/packages/tgui/interfaces/LanguageMenu.js
+++ b/tgui/packages/tgui/interfaces/LanguageMenu.js
@@ -12,57 +12,60 @@ export const LanguageMenu = (props, context) => {
     unknown_languages = [],
   } = data;
   return (
-    <Window
-      title="Language Menu"
-      width={700}
-      height={600}>
+    <Window title="Language Menu" width={700} height={600}>
       <Window.Content scrollable>
         <Section title="Known Languages">
           <LabeledList>
-            {languages.map(language => (
+            {languages.map((language) => (
               <LabeledList.Item
                 key={language.name}
                 label={language.name}
-                buttons={(
+                buttons={
                   <>
                     {!!is_living && (
                       <Button
-                        content={language.is_default
-                          ? 'Default Language'
-                          : 'Select as Default'}
+                        content={
+                          language.is_default
+                            ? 'Default Language'
+                            : 'Select as Default'
+                        }
                         disabled={!language.can_speak}
                         selected={language.is_default}
-                        onClick={() => act('select_default', {
-                          language_name: language.name,
-                        })} />
+                        onClick={() =>
+                          act('select_default', {
+                            language_name: language.name,
+                          })
+                        }
+                      />
                     )}
                     {!!admin_mode && (
                       <>
                         <Button
                           content="Grant"
-                          onClick={() => act('grant_language', {
-                            language_name: language.name,
-                          })} />
+                          onClick={() =>
+                            act('grant_language', {
+                              language_name: language.name,
+                            })
+                          }
+                        />
                         <Button
                           content="Remove"
-                          onClick={() => act('remove_language', {
-                            language_name: language.name,
-                          })} />
+                          onClick={() =>
+                            act('remove_language', {
+                              language_name: language.name,
+                            })
+                          }
+                        />
                       </>
                     )}
                   </>
-                )}>
-                {language.desc}
-                {' '}
-                Key: ,{language.key}
-                {' '}
+                }
+              >
+                {language.desc} Key: ,{language.key}{' '}
                 {language.can_understand
                   ? 'Can understand.'
-                  : 'Cannot understand.'}
-                {' '}
-                {language.can_speak
-                  ? 'Can speak.'
-                  : 'Cannot speak.'}
+                  : 'Cannot understand.'}{' '}
+                {language.can_speak ? 'Can speak.' : 'Cannot speak.'}
               </LabeledList.Item>
             ))}
           </LabeledList>
@@ -70,34 +73,33 @@ export const LanguageMenu = (props, context) => {
         {!!admin_mode && (
           <Section
             title="Unknown Languages"
-            buttons={(
+            buttons={
               <Button
-                content={'Omnitongue '
-                  + (omnitongue ? 'Enabled' : 'Disabled')}
+                content={'Omnitongue ' + (omnitongue ? 'Enabled' : 'Disabled')}
                 selected={omnitongue}
-                onClick={() => act('toggle_omnitongue')} />
-            )}>
+                onClick={() => act('toggle_omnitongue')}
+              />
+            }
+          >
             <LabeledList>
-              {unknown_languages.map(language => (
+              {unknown_languages.map((language) => (
                 <LabeledList.Item
                   key={language.name}
                   label={language.name}
-                  buttons={(
+                  buttons={
                     <Button
                       content="Grant"
-                      onClick={() => act('grant_language', {
-                        language_name: language.name,
-                      })} />
-                  )}>
-                  {language.desc}
-                  {' '}
-                  Key: ,{language.key}
-                  {' '}
-                  {!!language.shadow && '(gained from mob)'}
-                  {' '}
-                  {language.can_speak
-                    ? 'Can speak.'
-                    : 'Cannot speak.' }
+                      onClick={() =>
+                        act('grant_language', {
+                          language_name: language.name,
+                        })
+                      }
+                    />
+                  }
+                >
+                  {language.desc} Key: ,{language.key}{' '}
+                  {!!language.shadow && '(gained from mob)'}{' '}
+                  {language.can_speak ? 'Can speak.' : 'Cannot speak.'}
                 </LabeledList.Item>
               ))}
             </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/LaunchpadConsole.js b/tgui/packages/tgui/interfaces/LaunchpadConsole.js
index 0b64ac4b2c08..9b7ebe911025 100644
--- a/tgui/packages/tgui/interfaces/LaunchpadConsole.js
+++ b/tgui/packages/tgui/interfaces/LaunchpadConsole.js
@@ -1,5 +1,15 @@
 import { useBackend } from '../backend';
-import { Box, Button, Divider, Flex, Grid, Input, NoticeBox, NumberInput, Section } from '../components';
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Grid,
+  Input,
+  NoticeBox,
+  NumberInput,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 const LaunchpadButtonPad = (props, context) => {
@@ -12,50 +22,68 @@ const LaunchpadButtonPad = (props, context) => {
           icon="arrow-left"
           iconRotation={45}
           mb={1}
-          onClick={() => act('move_pos', {
-            x: -1,
-            y: 1,
-          })} />
+          onClick={() =>
+            act('move_pos', {
+              x: -1,
+              y: 1,
+            })
+          }
+        />
         <Button
           fluid
           icon="arrow-left"
           mb={1}
-          onClick={() => act('move_pos', {
-            x: -1,
-          })} />
+          onClick={() =>
+            act('move_pos', {
+              x: -1,
+            })
+          }
+        />
         <Button
           fluid
           icon="arrow-down"
           iconRotation={45}
           mb={1}
-          onClick={() => act('move_pos', {
-            x: -1,
-            y: -1,
-          })} />
+          onClick={() =>
+            act('move_pos', {
+              x: -1,
+              y: -1,
+            })
+          }
+        />
       </Grid.Column>
       <Grid.Column>
         <Button
           fluid
           icon="arrow-up"
           mb={1}
-          onClick={() => act('move_pos', {
-            y: 1,
-          })} />
+          onClick={() =>
+            act('move_pos', {
+              y: 1,
+            })
+          }
+        />
         <Button
           fluid
           content="R"
           mb={1}
-          onClick={() => act('set_pos', {
-            x: 0,
-            y: 0,
-          })} />
+          onClick={() =>
+            act('set_pos', {
+              x: 0,
+              y: 0,
+            })
+          }
+        />
         <Button
           fluid
           icon="arrow-down"
           mb={1}
-          onClick={() => act('move_pos', {
-            y: -1,
-          })} />
+          onClick={() =>
+            act('move_pos', {
+              y: -1,
+            })
+          }
+        />
       </Grid.Column>
       <Grid.Column>
         <Button
@@ -63,26 +91,35 @@ const LaunchpadButtonPad = (props, context) => {
           icon="arrow-up"
           iconRotation={45}
           mb={1}
-          onClick={() => act('move_pos', {
-            x: 1,
-            y: 1,
-          })} />
+          onClick={() =>
+            act('move_pos', {
+              x: 1,
+              y: 1,
+            })
+          }
+        />
         <Button
           fluid
           icon="arrow-right"
           mb={1}
-          onClick={() => act('move_pos', {
-            x: 1,
-          })} />
+          onClick={() =>
+            act('move_pos', {
+              x: 1,
+            })
+          }
+        />
         <Button
           fluid
           icon="arrow-right"
           iconRotation={45}
           mb={1}
-          onClick={() => act('move_pos', {
-            x: 1,
-            y: -1,
-          })} />
+          onClick={() =>
+            act('move_pos', {
+              x: 1,
+              y: -1,
+            })
+          }
+        />
       </Grid.Column>
     </Grid>
   );
@@ -91,30 +128,30 @@ const LaunchpadButtonPad = (props, context) => {
 export const LaunchpadControl = (props, context) => {
   const { topLevel } = props;
   const { act, data } = useBackend(context);
-  const {
-    x,
-    y,
-    pad_name,
-    range,
-  } = data;
+  const { x, y, pad_name, range } = data;
   return (
     <Section
-      title={(
+      title={
         <Input
           value={pad_name}
           width="170px"
-          onChange={(e, value) => act('rename', {
-            name: value,
-          })} />
-      )}
+          onChange={(e, value) =>
+            act('rename', {
+              name: value,
+            })
+          }
+        />
+      }
       level={topLevel ? 1 : 2}
-      buttons={(
+      buttons={
         <Button
           icon="times"
           content="Remove"
           color="bad"
-          onClick={() => act('remove')} />
-      )}>
+          onClick={() => act('remove')}
+        />
+      }
+    >
       <Grid>
         <Grid.Column>
           <Section title="Controls" level={2}>
@@ -125,10 +162,7 @@ export const LaunchpadControl = (props, context) => {
           <Section title="Target" level={2}>
             <Box fontSize="26px">
               <Box mb={1}>
-                <Box
-                  inline
-                  bold
-                  mr={1}>
+                <Box inline bold mr={1}>
                   X:
                 </Box>
                 <NumberInput
@@ -140,15 +174,15 @@ export const LaunchpadControl = (props, context) => {
                   width="90px"
                   height="30px"
                   stepPixelSize={10}
-                  onChange={(e, value) => act('set_pos', {
-                    x: value,
-                  })} />
+                  onChange={(e, value) =>
+                    act('set_pos', {
+                      x: value,
+                    })
+                  }
+                />
               </Box>
               <Box>
-                <Box
-                  inline
-                  bold
-                  mr={1}>
+                <Box inline bold mr={1}>
                   Y:
                 </Box>
                 <NumberInput
@@ -160,9 +194,12 @@ export const LaunchpadControl = (props, context) => {
                   fontSize="26px"
                   width="90px"
                   height="30px"
-                  onChange={(e, value) => act('set_pos', {
-                    y: value,
-                  })} />
+                  onChange={(e, value) =>
+                    act('set_pos', {
+                      y: value,
+                    })
+                  }
+                />
               </Box>
             </Box>
           </Section>
@@ -175,7 +212,8 @@ export const LaunchpadControl = (props, context) => {
             icon="upload"
             content="Launch"
             textAlign="center"
-            onClick={() => act('launch')} />
+            onClick={() => act('launch')}
+          />
         </Grid.Column>
         <Grid.Column>
           <Button
@@ -183,7 +221,8 @@ export const LaunchpadControl = (props, context) => {
             icon="download"
             content="Pull"
             textAlign="center"
-            onClick={() => act('pull')} />
+            onClick={() => act('pull')}
+          />
         </Grid.Column>
       </Grid>
     </Section>
@@ -192,24 +231,17 @@ export const LaunchpadControl = (props, context) => {
 
 export const LaunchpadConsole = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    launchpads = [],
-    selected_id,
-  } = data;
+  const { launchpads = [], selected_id } = data;
   return (
-    <Window
-      width={475}
-      height={260}>
+    <Window width={475} height={260}>
       <Window.Content scrollable>
-        {launchpads.length === 0 && (
-          <NoticeBox>
-            No Pads Connected
-          </NoticeBox>
-        ) || (
+        {(launchpads.length === 0 && (
+          <NoticeBox>No Pads Connected</NoticeBox>
+        )) || (
           <Section>
             <Flex minHeight="190px">
               <Flex.Item width="140px" minHeight="190px">
-                {launchpads.map(launchpad => (
+                {launchpads.map((launchpad) => (
                   <Button
                     fluid
                     ellipsis
@@ -217,21 +249,20 @@ export const LaunchpadConsole = (props, context) => {
                     content={launchpad.name}
                     selected={selected_id === launchpad.id}
                     color="transparent"
-                    onClick={() => act('select_pad', {
-                      id: launchpad.id,
-                    })} />
+                    onClick={() =>
+                      act('select_pad', {
+                        id: launchpad.id,
+                      })
+                    }
+                  />
                 ))}
               </Flex.Item>
               <Flex.Item minHeight="100%">
                 <Divider vertical />
               </Flex.Item>
               <Flex.Item grow={1} basis={0} minHeight="100%">
-                {selected_id && (
-                  <LaunchpadControl />
-                ) || (
-                  <Box>
-                    Please select a pad
-                  </Box>
+                {(selected_id && <LaunchpadControl />) || (
+                  <Box>Please select a pad</Box>
                 )}
               </Flex.Item>
             </Flex>
diff --git a/tgui/packages/tgui/interfaces/LaunchpadRemote.js b/tgui/packages/tgui/interfaces/LaunchpadRemote.js
index 2173630c081d..5e0c2e1a4c7b 100644
--- a/tgui/packages/tgui/interfaces/LaunchpadRemote.js
+++ b/tgui/packages/tgui/interfaces/LaunchpadRemote.js
@@ -5,28 +5,19 @@ import { LaunchpadControl } from './LaunchpadConsole';
 
 export const LaunchpadRemote = (props, context) => {
   const { data } = useBackend(context);
-  const {
-    has_pad,
-    pad_closed,
-  } = data;
+  const { has_pad, pad_closed } = data;
   return (
     <Window
       title="Briefcase Launchpad Remote"
       width={300}
       height={240}
-      theme="syndicate">
+      theme="syndicate"
+    >
       <Window.Content>
-        {!has_pad && (
-          <NoticeBox>
-            No Launchpad Connected
-          </NoticeBox>
-        ) || pad_closed && (
-          <NoticeBox>
-            Launchpad Closed
-          </NoticeBox>
-        ) || (
-          <LaunchpadControl topLevel />
-        )}
+        {(!has_pad && <NoticeBox>No Launchpad Connected</NoticeBox>) ||
+          (pad_closed && <NoticeBox>Launchpad Closed</NoticeBox>) || (
+            <LaunchpadControl topLevel />
+          )}
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/LibraryConsole.js b/tgui/packages/tgui/interfaces/LibraryConsole.js
index fa3d7c4c9054..8e6bf363476f 100644
--- a/tgui/packages/tgui/interfaces/LibraryConsole.js
+++ b/tgui/packages/tgui/interfaces/LibraryConsole.js
@@ -2,21 +2,33 @@ import { map, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { classes } from 'common/react';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Dropdown, Input, Modal, NoticeBox, NumberInput, LabeledList, Section, Stack, Flex, Table } from '../components';
+import {
+  Box,
+  Button,
+  Dropdown,
+  Input,
+  Modal,
+  NoticeBox,
+  NumberInput,
+  LabeledList,
+  Section,
+  Stack,
+  Flex,
+  Table,
+} from '../components';
 import { Window } from '../layouts';
-import { sanitizeText } from "../sanitize";
+import { sanitizeText } from '../sanitize';
 
 export const LibraryConsole = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    display_lore,
-  } = data;
+  const { display_lore } = data;
   return (
     <Window
-      theme={display_lore ? "spookyconsole" : ""}
+      theme={display_lore ? 'spookyconsole' : ''}
       title="Library Terminal"
       width={880}
-      height={520}>
+      height={520}
+    >
       <Window.Content m="0">
         <Flex height="100%">
           <Flex.Item>
@@ -33,13 +45,9 @@ export const LibraryConsole = (props, context) => {
 
 export const PopoutMenu = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    screen_state,
-    show_dropdown,
-    display_lore,
-  } = data;
+  const { screen_state, show_dropdown, display_lore } = data;
   return (
-    <Section fill maxWidth={show_dropdown ? "150px" : "36px"}>
+    <Section fill maxWidth={show_dropdown ? '150px' : '36px'}>
       <Stack vertical fill>
         <Stack.Item>
           <Button
@@ -48,35 +56,22 @@ export const PopoutMenu = (props, context) => {
             onClick={() => act('toggle_dropdown')}
             icon={show_dropdown === 1 ? 'chevron-left' : 'chevron-right'}
             tooltip={!show_dropdown && 'Expand'}
-            content={!!show_dropdown && 'Collapse'} />
+            content={!!show_dropdown && 'Collapse'}
+          />
         </Stack.Item>
-        <PopoutEntry
-          id={1}
-          icon="list"
-          text="Inventory" />
-        <PopoutEntry
-          id={2}
-          icon="calendar"
-          text="Checkout" />
-        <PopoutEntry
-          id={3}
-          icon="server"
-          text="Archive" />
-        <PopoutEntry
-          id={4}
-          icon="upload"
-          text="Upload" />
-        <PopoutEntry
-          id={5}
-          icon="print"
-          text="Print" />
+        <PopoutEntry id={1} icon="list" text="Inventory" />
+        <PopoutEntry id={2} icon="calendar" text="Checkout" />
+        <PopoutEntry id={3} icon="server" text="Archive" />
+        <PopoutEntry id={4} icon="upload" text="Upload" />
+        <PopoutEntry id={5} icon="print" text="Print" />
         {!!display_lore && (
           <PopoutEntry
             id={6}
             icon="question"
-            text={screen_state === 6 ? "Gur Fbeprere": "Forbidden Lore"}
+            text={screen_state === 6 ? 'Gur Fbeprere' : 'Forbidden Lore'}
             color="black"
-            font="copperplate" />
+            font="copperplate"
+          />
         )}
       </Stack>
     </Section>
@@ -85,57 +80,53 @@ export const PopoutMenu = (props, context) => {
 
 export const PageDisplay = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    screen_state,
-  } = data;
+  const { screen_state } = data;
   /* eslint-disable indent */
   /* eslint-disable operator-linebreak */
-  return (
-    screen_state === 1 ? <Inventory /> :
-    screen_state === 2 ? <Checkout /> :
-    screen_state === 3 ? <Archive /> :
-    screen_state === 4 ? <Upload /> :
-    screen_state === 5 ? <Print /> :
-    screen_state === 6 ? <Forbidden /> :
-    null
-  );
+  return screen_state === 1 ? (
+    <Inventory />
+  ) : screen_state === 2 ? (
+    <Checkout />
+  ) : screen_state === 3 ? (
+    <Archive />
+  ) : screen_state === 4 ? (
+    <Upload />
+  ) : screen_state === 5 ? (
+    <Print />
+  ) : screen_state === 6 ? (
+    <Forbidden />
+  ) : null;
   /* eslint-enable indent */
   /* eslint-enable operator-linebreak */
 };
 
 export const Inventory = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    inventory_page_count,
-    inventory_page,
-    has_inventory,
-  } = data;
+  const { inventory_page_count, inventory_page, has_inventory } = data;
   if (!has_inventory) {
     return (
-      <NoticeBox>
-        No Book Records detected. Update your inventory!
-      </NoticeBox>
+      <NoticeBox>No Book Records detected. Update your inventory!</NoticeBox>
     );
   }
   return (
-    <Stack
-      vertical
-      justify="space-between"
-      height="100%">
+    <Stack vertical justify="space-between" height="100%">
       <Stack.Item grow>
         <ScrollableSection
           header="Library Inventory"
-          contents={<InventoryDetails />} />
+          contents={<InventoryDetails />}
+        />
       </Stack.Item>
-      <Stack.Item
-        align="center">
+      <Stack.Item align="center">
         <PageSelect
           minimum_page_count={1}
           page_count={inventory_page_count}
           current_page={inventory_page}
-          call_on_change={(value) => act('switch_inventory_page', {
-            page: value,
-          })} />
+          call_on_change={(value) =>
+            act('switch_inventory_page', {
+              page: value,
+            })
+          }
+        />
       </Stack.Item>
     </Stack>
   );
@@ -149,40 +140,33 @@ export const InventoryDetails = (props, context) => {
       // Generate a unique id
       key: i,
     })),
-    sortBy(book => book.key),
+    sortBy((book) => book.key),
   ])(data.inventory);
   return (
     <Section>
       <Table>
         <Table.Row header>
-          <Table.Cell>
-            Remove
-          </Table.Cell>
-          <Table.Cell>
-            Title
-          </Table.Cell>
-          <Table.Cell>
-            Author
-          </Table.Cell>
+          <Table.Cell>Remove</Table.Cell>
+          <Table.Cell>Title</Table.Cell>
+          <Table.Cell>Author</Table.Cell>
         </Table.Row>
-        {inventory.map(book => (
+        {inventory.map((book) => (
           <Table.Row key={book.key}>
             <Table.Cell>
               <Button
                 color="bad"
-                onClick={() => act('inventory_remove', {
-                  book_id: book.ref,
-                })}
-                icon="times">
+                onClick={() =>
+                  act('inventory_remove', {
+                    book_id: book.ref,
+                  })
+                }
+                icon="times"
+              >
                 Clear Record
               </Button>
             </Table.Cell>
-            <Table.Cell>
-              {book.title}
-            </Table.Cell>
-            <Table.Cell>
-              {book.author}
-            </Table.Cell>
+            <Table.Cell>{book.title}</Table.Cell>
+            <Table.Cell>{book.author}</Table.Cell>
           </Table.Row>
         ))}
       </Table>
@@ -192,13 +176,13 @@ export const InventoryDetails = (props, context) => {
 
 export const Checkout = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    checkout_page,
-    checkout_page_count,
-  } = data;
+  const { checkout_page, checkout_page_count } = data;
 
   const [checkoutBook, setCheckoutBook] = useLocalState(
-    context, "CheckoutBook", false);
+    context,
+    'CheckoutBook',
+    false,
+  );
   return (
     <Stack vertical height="100%" justify="space-between">
       <Stack.Item grow>
@@ -206,16 +190,20 @@ export const Checkout = (props, context) => {
           <Stack.Item grow>
             <ScrollableSection
               header="Checked Out Books"
-              contents={<CheckoutEntries />} />
+              contents={<CheckoutEntries />}
+            />
           </Stack.Item>
           <Stack.Item align="center">
             <PageSelect
               minimum_page_count={1}
               page_count={checkout_page_count}
               current_page={checkout_page}
-              call_on_change={(value) => act('switch_checkout_page', {
-                page: value,
-              })} />
+              call_on_change={(value) =>
+                act('switch_checkout_page', {
+                  page: value,
+                })
+              }
+            />
           </Stack.Item>
         </Stack>
       </Stack.Item>
@@ -225,7 +213,8 @@ export const Checkout = (props, context) => {
           icon="barcode"
           content="Check-Out Book"
           fontSize="20px"
-          onClick={() => setCheckoutBook(true)} />
+          onClick={() => setCheckoutBook(true)}
+        />
       </Stack.Item>
       {!!checkoutBook && <CheckoutModal />}
     </Stack>
@@ -234,10 +223,7 @@ export const Checkout = (props, context) => {
 
 export const CheckoutEntries = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    checkouts,
-    has_checkout,
-  } = data;
+  const { checkouts, has_checkout } = data;
 
   if (!has_checkout) {
     return null;
@@ -245,42 +231,28 @@ export const CheckoutEntries = (props, context) => {
   return (
     <Table>
       <Table.Row header>
-        <Table.Cell>
-          Check-In
-        </Table.Cell>
-        <Table.Cell>
-          Title
-        </Table.Cell>
-        <Table.Cell>
-          Author
-        </Table.Cell>
-        <Table.Cell>
-          Borrower
-        </Table.Cell>
-        <Table.Cell>
-          Time Left
-        </Table.Cell>
+        <Table.Cell>Check-In</Table.Cell>
+        <Table.Cell>Title</Table.Cell>
+        <Table.Cell>Author</Table.Cell>
+        <Table.Cell>Borrower</Table.Cell>
+        <Table.Cell>Time Left</Table.Cell>
       </Table.Row>
-      {checkouts.map(entry => (
+      {checkouts.map((entry) => (
         <Table.Row key={entry.id}>
           <Table.Cell>
             <Button
-              onClick={() => act('checkin', {
-                checked_out_id: entry.ref,
-              })}
-              icon="box-open" />
+              onClick={() =>
+                act('checkin', {
+                  checked_out_id: entry.ref,
+                })
+              }
+              icon="box-open"
+            />
           </Table.Cell>
-          <Table.Cell>
-            {entry.title}
-          </Table.Cell>
-          <Table.Cell>
-            {entry.author}
-          </Table.Cell>
-          <Table.Cell>
-            {entry.borrower}
-          </Table.Cell>
-          <Table.Cell
-            backgroundColor={entry.overdue ? 'bad' : 'good'} >
+          <Table.Cell>{entry.title}</Table.Cell>
+          <Table.Cell>{entry.author}</Table.Cell>
+          <Table.Cell>{entry.borrower}</Table.Cell>
+          <Table.Cell backgroundColor={entry.overdue ? 'bad' : 'good'}>
             {entry.overdue ? 'Overdue' : entry.due_in_minutes + ' Minutes'}
           </Table.Cell>
         </Table.Row>
@@ -294,13 +266,25 @@ const CheckoutModal = (props, context) => {
 
   const { checking_out } = data;
   const [checkoutBook, setCheckoutBook] = useLocalState(
-    context, 'CheckoutBook', false);
+    context,
+    'CheckoutBook',
+    false,
+  );
   const [bookName, setBookName] = useLocalState(
-    context, 'CheckoutBookName', checking_out || 'Book');
+    context,
+    'CheckoutBookName',
+    checking_out || 'Book',
+  );
   const [checkoutee, setCheckoutee] = useLocalState(
-    context, 'Checkoutee', 'Recipient');
+    context,
+    'Checkoutee',
+    'Recipient',
+  );
   const [checkoutPeriod, setCheckoutPeriod] = useLocalState(
-    context, 'CheckoutPeriod', 5);
+    context,
+    'CheckoutPeriod',
+    5,
+  );
 
   return (
     <Modal width="500px">
@@ -312,13 +296,15 @@ const CheckoutModal = (props, context) => {
           <Input
             width="250px"
             value={bookName}
-            onChange={(e, value) => setBookName(value)} />
+            onChange={(e, value) => setBookName(value)}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Loan To">
           <Input
             width="160px"
             value={checkoutee}
-            onChange={(e, value) => setCheckoutee(value)} />
+            onChange={(e, value) => setCheckoutee(value)}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Loan Period">
           <NumberInput
@@ -326,7 +312,8 @@ const CheckoutModal = (props, context) => {
             unit=" Minutes"
             minValue={1}
             stepPixelSize={10}
-            onChange={(e, value) => setCheckoutPeriod(value)} />
+            onChange={(e, value) => setCheckoutPeriod(value)}
+          />
         </LabeledList.Item>
       </LabeledList>
       <Stack justify="center" align="center" pt={1}>
@@ -344,7 +331,8 @@ const CheckoutModal = (props, context) => {
                 checkout_time: checkoutPeriod,
               });
             }}
-            lineHeight={2} />
+            lineHeight={2}
+          />
         </Stack.Item>
         <Stack.Item>
           <Button
@@ -353,7 +341,8 @@ const CheckoutModal = (props, context) => {
             fontSize="16px"
             color="bad"
             onClick={() => setCheckoutBook(false)}
-            lineHeight={2} />
+            lineHeight={2}
+          />
         </Stack.Item>
       </Stack>
     </Modal>
@@ -362,29 +351,22 @@ const CheckoutModal = (props, context) => {
 
 export const Archive = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    can_connect,
-    can_db_request,
-    page_count,
-    our_page,
-  } = data;
+  const { can_connect, can_db_request, page_count, our_page } = data;
   if (!can_connect) {
     return (
       <NoticeBox>
-        Unable to retrieve book listings.
-        Please contact your system administrator for assistance.
+        Unable to retrieve book listings. Please contact your system
+        administrator for assistance.
       </NoticeBox>
     );
   }
   return (
-    <Stack
-      vertical
-      justify="space-between"
-      height="100%">
+    <Stack vertical justify="space-between" height="100%">
       <Stack.Item grow>
         <ScrollableSection
           header="Remote Archive"
-          contents={<SearchAndDisplay />} />
+          contents={<SearchAndDisplay />}
+        />
       </Stack.Item>
       <Stack.Item align="center">
         <PageSelect
@@ -392,9 +374,12 @@ export const Archive = (props, context) => {
           page_count={page_count}
           current_page={our_page}
           disabled={!can_db_request}
-          call_on_change={(value) => act('switch_page', {
-            page: value,
-          })} />
+          call_on_change={(value) =>
+            act('switch_page', {
+              page: value,
+            })
+          }
+        />
       </Stack.Item>
     </Stack>
   );
@@ -416,7 +401,7 @@ export const SearchAndDisplay = (props, context) => {
       // Generate a unique id
       key: i,
     })),
-    sortBy(record => record.key),
+    sortBy((record) => record.key),
   ])(data.pages);
 
   return (
@@ -428,27 +413,36 @@ export const SearchAndDisplay = (props, context) => {
               <Dropdown
                 options={search_categories}
                 selected={category}
-                onSelected={(value) => act('set_search_category', {
-                  category: value,
-                })} />
+                onSelected={(value) =>
+                  act('set_search_category', {
+                    category: value,
+                  })
+                }
+              />
             </Stack.Item>
             <Stack.Item>
               <Input
                 value={title}
                 placeholder={title || 'Title'}
                 mt={0.5}
-                onChange={(e, value) => act('set_search_title', {
-                  title: value,
-                })} />
+                onChange={(e, value) =>
+                  act('set_search_title', {
+                    title: value,
+                  })
+                }
+              />
             </Stack.Item>
             <Stack.Item>
               <Input
                 value={author}
                 placeholder={author || 'Author'}
                 mt={0.5}
-                onChange={(e, value) => act('set_search_author', {
-                  author: value,
-                })} />
+                onChange={(e, value) =>
+                  act('set_search_author', {
+                    author: value,
+                  })
+                }
+              />
             </Stack.Item>
           </Stack>
         </Stack.Item>
@@ -458,7 +452,8 @@ export const SearchAndDisplay = (props, context) => {
             textAlign="right"
             onClick={() => act('search')}
             color={params_changed ? 'good' : ''}
-            icon="book">
+            icon="book"
+          >
             Search
           </Button>
           <Button
@@ -466,50 +461,36 @@ export const SearchAndDisplay = (props, context) => {
             textAlign="right"
             onClick={() => act('clear_data')}
             color="bad"
-            icon="fire">
+            icon="fire"
+          >
             Reset Search
           </Button>
         </Stack.Item>
       </Stack>
       <Table>
         <Table.Row>
-          <Table.Cell
-            fontSize={1.5}>
-            #
-          </Table.Cell>
-          <Table.Cell
-            fontSize={1.5}>
-            Category
-          </Table.Cell>
-          <Table.Cell
-            fontSize={1.5}>
-            Title
-          </Table.Cell>
-          <Table.Cell
-            fontSize={1.5}>
-            Author
-          </Table.Cell>
+          <Table.Cell fontSize={1.5}>#</Table.Cell>
+          <Table.Cell fontSize={1.5}>Category</Table.Cell>
+          <Table.Cell fontSize={1.5}>Title</Table.Cell>
+          <Table.Cell fontSize={1.5}>Author</Table.Cell>
         </Table.Row>
-        {records.map(record => (
+        {records.map((record) => (
           <Table.Row key={record.key}>
             <Table.Cell>
               <Button
-                onClick={() => act('print_book', {
-                  book_id: record.id,
-                })}
-                icon="print">
+                onClick={() =>
+                  act('print_book', {
+                    book_id: record.id,
+                  })
+                }
+                icon="print"
+              >
                 {record.id}
               </Button>
             </Table.Cell>
-            <Table.Cell>
-              {record.category}
-            </Table.Cell>
-            <Table.Cell>
-              {record.title}
-            </Table.Cell>
-            <Table.Cell>
-              {record.author}
-            </Table.Cell>
+            <Table.Cell>{record.category}</Table.Cell>
+            <Table.Cell>{record.title}</Table.Cell>
+            <Table.Cell>{record.author}</Table.Cell>
           </Table.Row>
         ))}
       </Table>
@@ -527,8 +508,7 @@ export const Upload = (props, context) => {
     cache_author,
     cache_content,
   } = data;
-  const [uploadToDB, setUploadToDB] = useLocalState(
-    context, 'UploadDB', false);
+  const [uploadToDB, setUploadToDB] = useLocalState(context, 'UploadDB', false);
   if (!has_scanner) {
     return (
       <NoticeBox>
@@ -537,11 +517,7 @@ export const Upload = (props, context) => {
     );
   }
   if (!has_cache) {
-    return (
-      <NoticeBox>
-        Scan in a book to upload.
-      </NoticeBox>
-    );
+    return <NoticeBox>Scan in a book to upload.</NoticeBox>;
   }
   const contentHtml = {
     __html: sanitizeText(cache_content),
@@ -559,7 +535,7 @@ export const Upload = (props, context) => {
             <Stack.Item>
               <Stack justify="center">
                 <Stack.Item>
-                  <Box pt={1} fontSize={"20px"}>
+                  <Box pt={1} fontSize={'20px'}>
                     Title:
                   </Box>
                 </Stack.Item>
@@ -570,9 +546,12 @@ export const Upload = (props, context) => {
                     placeholder={cache_title || 'Title'}
                     mt={0.5}
                     width={22}
-                    onChange={(e, value) => act('set_cache_title', {
-                      title: value,
-                    })} />
+                    onChange={(e, value) =>
+                      act('set_cache_title', {
+                        title: value,
+                      })
+                    }
+                  />
                 </Stack.Item>
                 <Stack.Item>
                   <Box pt={1} fontSize="20px">
@@ -585,9 +564,12 @@ export const Upload = (props, context) => {
                     value={cache_author}
                     placeholder={cache_author || 'Author'}
                     mt={0.5}
-                    onChange={(e, value) => act('set_cache_author', {
-                      author: value,
-                    })} />
+                    onChange={(e, value) =>
+                      act('set_cache_author', {
+                        author: value,
+                      })
+                    }
+                  />
                 </Stack.Item>
               </Stack>
             </Stack.Item>
@@ -597,7 +579,8 @@ export const Upload = (props, context) => {
                 scrollable
                 preserveWhitespace
                 fontSize="15px"
-                title="Content:">
+                title="Content:"
+              >
                 <Box dangerouslySetInnerHTML={contentHtml} />
               </Section>
             </Stack.Item>
@@ -613,7 +596,8 @@ export const Upload = (props, context) => {
                 fontSize="30px"
                 lineHeight={2}
                 textAlign="center"
-                onClick={() => act('news_post')} />
+                onClick={() => act('news_post')}
+              />
             </Stack.Item>
             <Stack.Item grow>
               <Button
@@ -624,7 +608,8 @@ export const Upload = (props, context) => {
                 fontSize="30px"
                 lineHeight={2}
                 textAlign="center"
-                onClick={() => setUploadToDB(true)} />
+                onClick={() => setUploadToDB(true)}
+              />
             </Stack.Item>
           </Stack>
         </Stack.Item>
@@ -637,15 +622,13 @@ export const Upload = (props, context) => {
 const UploadModal = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const {
-    upload_categories,
-    default_category,
-    can_db_request,
-  } = data;
-  const [uploadToDB, setUploadToDB] = useLocalState(
-    context, 'UploadDB', false);
+  const { upload_categories, default_category, can_db_request } = data;
+  const [uploadToDB, setUploadToDB] = useLocalState(context, 'UploadDB', false);
   const [uploadCategory, setUploadCategory] = useLocalState(
-    context, 'ModalUpload', '');
+    context,
+    'ModalUpload',
+    '',
+  );
 
   const display_category = uploadCategory || default_category;
   return (
@@ -658,7 +641,8 @@ const UploadModal = (props, context) => {
           <Dropdown
             options={upload_categories}
             selected={display_category}
-            onSelected={(value) => setUploadCategory(value)} />
+            onSelected={(value) => setUploadCategory(value)}
+          />
         </LabeledList.Item>
       </LabeledList>
       <Stack justify="center" align="center" pt={2}>
@@ -675,7 +659,8 @@ const UploadModal = (props, context) => {
                 category: display_category,
               });
             }}
-            lineHeight={2} />
+            lineHeight={2}
+          />
         </Stack.Item>
         <Stack.Item>
           <Button
@@ -684,7 +669,8 @@ const UploadModal = (props, context) => {
             fontSize="18px"
             color="bad"
             onClick={() => setUploadToDB(false)}
-            lineHeight={2} />
+            lineHeight={2}
+          />
         </Stack.Item>
       </Stack>
     </Modal>
@@ -693,15 +679,12 @@ const UploadModal = (props, context) => {
 
 export const Print = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    deity,
-    religion,
-    bible_name,
-    bible_sprite,
-    posters,
-  } = data;
+  const { deity, religion, bible_name, bible_sprite, posters } = data;
   const [selectedPoster, setSelectedPoster] = useLocalState(
-    context, 'selected_poster', posters[0]);
+    context,
+    'selected_poster',
+    posters[0],
+  );
 
   return (
     <Stack vertical fill>
@@ -709,7 +692,7 @@ export const Print = (props, context) => {
         <Stack fill>
           <Stack.Item width="50%">
             <Section fill scrollable>
-              {posters.map(poster => (
+              {posters.map((poster) => (
                 <div
                   key={poster}
                   title={poster}
@@ -718,11 +701,12 @@ export const Print = (props, context) => {
                     'Button--fluid',
                     'Button--color--transparent',
                     'Button--ellipsis',
-                    selectedPoster
-                    && poster === selectedPoster
-                    && 'Button--selected',
+                    selectedPoster &&
+                      poster === selectedPoster &&
+                      'Button--selected',
                   ])}
-                  onClick={() => setSelectedPoster(poster)} >
+                  onClick={() => setSelectedPoster(poster)}
+                >
                   {poster}
                 </div>
               ))}
@@ -735,27 +719,18 @@ export const Print = (props, context) => {
                 fontSize="25px"
                 italic
                 bold
-                textColor="#0b94c4">
+                textColor="#0b94c4"
+              >
                 {bible_name}
               </Stack.Item>
-              <Stack.Item
-                textAlign="center"
-                fontSize="22px"
-                textColor="purple">
+              <Stack.Item textAlign="center" fontSize="22px" textColor="purple">
                 In the Name of {deity}
               </Stack.Item>
-              <Stack.Item
-                textAlign="center"
-                fontSize="22px"
-                textColor="purple">
+              <Stack.Item textAlign="center" fontSize="22px" textColor="purple">
                 For the Sake of {religion}
               </Stack.Item>
               <Stack.Item align="center">
-                <Box
-                  className={classes([
-                    'bibles224x224',
-                    bible_sprite,
-                  ])} />
+                <Box className={classes(['bibles224x224', bible_sprite])} />
               </Stack.Item>
             </Stack>
           </Stack.Item>
@@ -771,9 +746,12 @@ export const Print = (props, context) => {
               fontSize="30px"
               lineHeight={2}
               textAlign="center"
-              onClick={() => act('print_poster', {
-                poster_name: selectedPoster,
-              })} />
+              onClick={() =>
+                act('print_poster', {
+                  poster_name: selectedPoster,
+                })
+              }
+            />
           </Stack.Item>
           <Stack.Item grow>
             <Button
@@ -783,7 +761,8 @@ export const Print = (props, context) => {
               fontSize="30px"
               lineHeight={2}
               textAlign="center"
-              onClick={() => act('print_bible')} />
+              onClick={() => act('print_bible')}
+            />
           </Stack.Item>
         </Stack>
       </Stack.Item>
@@ -798,14 +777,14 @@ const ForbiddenModal = (props, context) => {
       <Box className="LibraryComputer__CultText" fontSize="28px">
         Accessing Forbidden Lore Vault v 1.3:
       </Box>
-      <Box className="LibraryComputer__CultText" pt={0.4} >
+      <Box className="LibraryComputer__CultText" pt={0.4}>
         Are you absolutely sure you want to proceed?
       </Box>
       <Box className="LibraryComputer__CultText" pt={0.2} bold>
         EldritchRelics Inc. will take no responsibility for this choice
       </Box>
       <Stack justify="center" align="center">
-        <Stack.Item >
+        <Stack.Item>
           <Button
             className="LibraryComputer__CultText"
             fluid
@@ -814,9 +793,10 @@ const ForbiddenModal = (props, context) => {
             color="good"
             fontSize="20px"
             onClick={() => act('lore_spawn')}
-            lineHeight={2} />
+            lineHeight={2}
+          />
         </Stack.Item>
-        <Stack.Item >
+        <Stack.Item>
           <Button
             className="LibraryComputer__CultText"
             fluid
@@ -825,7 +805,8 @@ const ForbiddenModal = (props, context) => {
             color="bad"
             fontSize="20px"
             onClick={() => act('lore_deny')}
-            lineHeight={2} />
+            lineHeight={2}
+          />
         </Stack.Item>
       </Stack>
     </Modal>
@@ -833,9 +814,10 @@ const ForbiddenModal = (props, context) => {
 };
 
 export const Forbidden = (props, context) => {
-  const description = "Abf vqrnz cebprffhf pbzchgngvbanyvf fghqrer vapvcvrzhf\nCebprffhf pbzchgngvbanyrf fhag erf nofgenpgnr dhnr pbzchgngberf vapbyhag\nHg ribyihag, cebprffhf nyvn nofgenpgn dhnr qngn znavchyner qvphaghe\nRibyhgvbavf cebprffhf qvevtvghe cre rkrzcyhz erthynr cebtenzzngvf ibpngv\nUbzvarf cebtenzzngn nq cebprffhf erpgbf rssvpvhag\nEriren fcvevghf pbzchgngbevv phz vapnagnzragvf pbavhatvzhf\nCebprffhf pbzchgngvbanyvf rfg zhyghz fvzvyvf vqrnr irarsvpnr fcvevghf\nivqrev nhg gnatv aba cbgrfg\nAba rfg rk zngrevn pbzcbfvgn\nFrq vq cynpreng vcfhz\nAba cbgrfg bcrenev bchf vagryyrpghnyr\nErfcbaqrev cbgrfg\nZhaqhz nssvprer cbgrfg rebtnaqb crphavnz nq evcnz iry cre oenppuvhz \nebobgv snoevpnaqb zbqrenaqb\nPbafvyvvf hgvzhe cebprffvohf nhthenaqv fhag fvphg vapnagnzragn irarsvpvv";
+  const description =
+    'Abf vqrnz cebprffhf pbzchgngvbanyvf fghqrer vapvcvrzhf\nCebprffhf pbzchgngvbanyrf fhag erf nofgenpgnr dhnr pbzchgngberf vapbyhag\nHg ribyihag, cebprffhf nyvn nofgenpgn dhnr qngn znavchyner qvphaghe\nRibyhgvbavf cebprffhf qvevtvghe cre rkrzcyhz erthynr cebtenzzngvf ibpngv\nUbzvarf cebtenzzngn nq cebprffhf erpgbf rssvpvhag\nEriren fcvevghf pbzchgngbevv phz vapnagnzragvf pbavhatvzhf\nCebprffhf pbzchgngvbanyvf rfg zhyghz fvzvyvf vqrnr irarsvpnr fcvevghf\nivqrev nhg gnatv aba cbgrfg\nAba rfg rk zngrevn pbzcbfvgn\nFrq vq cynpreng vcfhz\nAba cbgrfg bcrenev bchf vagryyrpghnyr\nErfcbaqrev cbgrfg\nZhaqhz nssvprer cbgrfg rebtnaqb crphavnz nq evcnz iry cre oenppuvhz \nebobgv snoevpnaqb zbqrenaqb\nPbafvyvvf hgvzhe cebprffvohf nhthenaqv fhag fvphg vapnagnzragn irarsvpvv';
   return (
-    <Box className="LibraryComputer__CultNonsense" preserveWhitespace >
+    <Box className="LibraryComputer__CultNonsense" preserveWhitespace>
       {description}
       <ForbiddenModal />
     </Box>
@@ -843,10 +825,7 @@ export const Forbidden = (props, context) => {
 };
 
 export const ScrollableSection = (props, context) => {
-  const {
-    header,
-    contents,
-  } = props;
+  const { header, contents } = props;
 
   return (
     <Section fill scrollable>
@@ -862,33 +841,27 @@ export const ScrollableSection = (props, context) => {
 
 export const PopoutEntry = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    id,
-    text,
-    icon,
-    color,
-    font,
-  } = props;
-  const {
-    show_dropdown,
-    screen_state,
-  } = data;
-  const selected_color = color || "good";
-  const deselected_color = color || "";
+  const { id, text, icon, color, font } = props;
+  const { show_dropdown, screen_state } = data;
+  const selected_color = color || 'good';
+  const deselected_color = color || '';
 
   return (
     <Stack.Item>
       <Button
         fluid
         fontSize="13px"
-        onClick={() => act('set_screen', {
-          screen_index: id,
-        })}
+        onClick={() =>
+          act('set_screen', {
+            screen_index: id,
+          })
+        }
         color={id === screen_state ? selected_color : deselected_color}
         fontFamily={font}
         icon={icon}
         tooltip={!show_dropdown && text}
-        content={!!show_dropdown && text} />
+        content={!!show_dropdown && text}
+      />
     </Stack.Item>
   );
 };
@@ -912,36 +885,41 @@ export const PageSelect = (props, context) => {
         <Button
           disabled={current_page === minimum_page_count || disabled}
           icon="angle-double-left"
-          onClick={() => call_on_change(minimum_page_count)} />
+          onClick={() => call_on_change(minimum_page_count)}
+        />
       </Stack.Item>
       <Stack.Item>
         <Button
           disabled={current_page === minimum_page_count || disabled}
           icon="chevron-left"
-          onClick={() => call_on_change(current_page - 1)} />
+          onClick={() => call_on_change(current_page - 1)}
+        />
       </Stack.Item>
       <Stack.Item>
         <Input
-          placeholder={current_page + "/" + page_count}
+          placeholder={current_page + '/' + page_count}
           onChange={(e, value) => {
             // I am so sorry
-            if (value !== "") {
+            if (value !== '') {
               call_on_change(value);
-              e.target.value=null;
+              e.target.value = null;
             }
-          }} />
+          }}
+        />
       </Stack.Item>
       <Stack.Item>
         <Button
           disabled={current_page === page_count || disabled}
           icon="chevron-right"
-          onClick={() => call_on_change(current_page + 1)} />
+          onClick={() => call_on_change(current_page + 1)}
+        />
       </Stack.Item>
       <Stack.Item>
         <Button
           disabled={current_page === page_count || disabled}
           icon="angle-double-right"
-          onClick={() => call_on_change(page_count)} />
+          onClick={() => call_on_change(page_count)}
+        />
       </Stack.Item>
     </Stack>
   );
diff --git a/tgui/packages/tgui/interfaces/LibraryScanner.js b/tgui/packages/tgui/interfaces/LibraryScanner.js
index d1c98fb733db..dbf187f3894b 100644
--- a/tgui/packages/tgui/interfaces/LibraryScanner.js
+++ b/tgui/packages/tgui/interfaces/LibraryScanner.js
@@ -4,10 +4,7 @@ import { Window } from '../layouts';
 
 export const LibraryScanner = (props, context) => {
   return (
-    <Window
-      title="Library Scanner"
-      width={350}
-      height={150}>
+    <Window title="Library Scanner" width={350} height={150}>
       <BookScanning />
     </Window>
   );
@@ -15,59 +12,51 @@ export const LibraryScanner = (props, context) => {
 
 const BookScanning = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    has_book,
-    has_cache,
-    book,
-  } = data;
+  const { has_book, has_cache, book } = data;
   if (!has_book && !has_cache) {
-    return (
-      <NoticeBox>
-        Insert a book to scan
-      </NoticeBox>
-    );
+    return <NoticeBox>Insert a book to scan</NoticeBox>;
   }
   return (
-    <Stack
-      direction="column"
-      height="100%"
-      justify="flex-end">
+    <Stack direction="column" height="100%" justify="flex-end">
       <Stack.Item grow>
-        <Section
-          textAlign="center"
-          height="100%"
-          title={book.author}>
+        <Section textAlign="center" height="100%" title={book.author}>
           {book.title}
         </Section>
       </Stack.Item>
       <Stack.Item>
         <Stack>
           <Stack.Item grow>
-            <Button fluid
+            <Button
+              fluid
               textAlign="center"
               icon="eject"
               onClick={() => act('eject')}
-              disabled={!has_book}>
+              disabled={!has_book}
+            >
               Eject Book
             </Button>
           </Stack.Item>
           <Stack.Item grow>
-            <Button fluid
+            <Button
+              fluid
               textAlign="center"
               onClick={() => act('scan')}
               color="good"
               icon="qrcode"
-              disabled={!has_book}>
+              disabled={!has_book}
+            >
               Scan Book
             </Button>
           </Stack.Item>
           <Stack.Item grow>
-            <Button fluid
+            <Button
+              fluid
               textAlign="center"
               icon="fire"
               onClick={() => act('clear')}
               color="bad"
-              disabled={!has_cache}>
+              disabled={!has_cache}
+            >
               Clear Cache
             </Button>
           </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/LibraryVisitor.js b/tgui/packages/tgui/interfaces/LibraryVisitor.js
index 7104748aa453..ae9eb4f045ea 100644
--- a/tgui/packages/tgui/interfaces/LibraryVisitor.js
+++ b/tgui/packages/tgui/interfaces/LibraryVisitor.js
@@ -1,16 +1,22 @@
 import { map, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { useBackend } from '../backend';
-import { Box, Button, Dropdown, Input, NoticeBox, Section, Stack, Table } from '../components';
+import {
+  Box,
+  Button,
+  Dropdown,
+  Input,
+  NoticeBox,
+  Section,
+  Stack,
+  Table,
+} from '../components';
 import { Window } from '../layouts';
 import { PageSelect } from './LibraryConsole';
 
 export const LibraryVisitor = (props, context) => {
   return (
-    <Window
-      title="Library Lookup Console"
-      width={702}
-      height={421}>
+    <Window title="Library Lookup Console" width={702} height={421}>
       <BookListing />
     </Window>
   );
@@ -18,25 +24,17 @@ export const LibraryVisitor = (props, context) => {
 
 const BookListing = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    can_connect,
-    can_db_request,
-    our_page,
-    page_count,
-  } = data;
+  const { can_connect, can_db_request, our_page, page_count } = data;
   if (!can_connect) {
     return (
       <NoticeBox>
-        Unable to retrieve book listings.
-        Please contact your system administrator for assistance.
+        Unable to retrieve book listings. Please contact your system
+        administrator for assistance.
       </NoticeBox>
     );
   }
   return (
-    <Stack
-      fill
-      vertical
-      justify="space-between">
+    <Stack fill vertical justify="space-between">
       <Stack.Item>
         <Box fillPositionedParent bottom="25px">
           <Window.Content scrollable>
@@ -44,16 +42,18 @@ const BookListing = (props, context) => {
           </Window.Content>
         </Box>
       </Stack.Item>
-      <Stack.Item
-        align="center">
+      <Stack.Item align="center">
         <PageSelect
           minimum_page_count={1}
           page_count={page_count}
           current_page={our_page}
           disabled={!can_db_request}
-          call_on_change={(value) => act('switch_page', {
-            page: value,
-          })} />
+          call_on_change={(value) =>
+            act('switch_page', {
+              page: value,
+            })
+          }
+        />
       </Stack.Item>
     </Stack>
   );
@@ -75,7 +75,7 @@ const SearchAndDisplay = (props, context) => {
       // Generate a unique id
       key: i,
     })),
-    sortBy(record => record.key),
+    sortBy((record) => record.key),
   ])(data.pages);
   return (
     <Section>
@@ -86,27 +86,36 @@ const SearchAndDisplay = (props, context) => {
               <Dropdown
                 options={categories}
                 selected={category}
-                onSelected={(value) => act('set_search_category', {
-                  category: value,
-                })} />
+                onSelected={(value) =>
+                  act('set_search_category', {
+                    category: value,
+                  })
+                }
+              />
             </Stack.Item>
             <Stack.Item>
               <Input
                 value={title}
                 placeholder={title || 'Title'}
                 mt={0.5}
-                onChange={(e, value) => act('set_search_title', {
-                  title: value,
-                })} />
+                onChange={(e, value) =>
+                  act('set_search_title', {
+                    title: value,
+                  })
+                }
+              />
             </Stack.Item>
             <Stack.Item>
               <Input
                 value={author}
                 placeholder={author || 'Author'}
                 mt={0.5}
-                onChange={(e, value) => act('set_search_author', {
-                  author: value,
-                })} />
+                onChange={(e, value) =>
+                  act('set_search_author', {
+                    author: value,
+                  })
+                }
+              />
             </Stack.Item>
           </Stack>
         </Stack.Item>
@@ -116,7 +125,8 @@ const SearchAndDisplay = (props, context) => {
             textAlign="right"
             onClick={() => act('search')}
             color={params_changed ? 'good' : ''}
-            icon="book">
+            icon="book"
+          >
             Search
           </Button>
           <Button
@@ -124,44 +134,25 @@ const SearchAndDisplay = (props, context) => {
             textAlign="right"
             onClick={() => act('clear_data')}
             color="bad"
-            icon="fire">
+            icon="fire"
+          >
             Reset Search
           </Button>
         </Stack.Item>
       </Stack>
       <Table>
         <Table.Row>
-          <Table.Cell
-            fontSize={1.5}>
-            #
-          </Table.Cell>
-          <Table.Cell
-            fontSize={1.5}>
-            Category
-          </Table.Cell>
-          <Table.Cell
-            fontSize={1.5}>
-            Title
-          </Table.Cell>
-          <Table.Cell
-            fontSize={1.5}>
-            Author
-          </Table.Cell>
+          <Table.Cell fontSize={1.5}>#</Table.Cell>
+          <Table.Cell fontSize={1.5}>Category</Table.Cell>
+          <Table.Cell fontSize={1.5}>Title</Table.Cell>
+          <Table.Cell fontSize={1.5}>Author</Table.Cell>
         </Table.Row>
-        {records.map(record => (
+        {records.map((record) => (
           <Table.Row key={record.key}>
-            <Table.Cell>
-              {record.id}
-            </Table.Cell>
-            <Table.Cell>
-              {record.category}
-            </Table.Cell>
-            <Table.Cell>
-              {record.title}
-            </Table.Cell>
-            <Table.Cell>
-              {record.author}
-            </Table.Cell>
+            <Table.Cell>{record.id}</Table.Cell>
+            <Table.Cell>{record.category}</Table.Cell>
+            <Table.Cell>{record.title}</Table.Cell>
+            <Table.Cell>{record.author}</Table.Cell>
           </Table.Row>
         ))}
       </Table>
diff --git a/tgui/packages/tgui/interfaces/Limbgrower.js b/tgui/packages/tgui/interfaces/Limbgrower.js
index 6d06cde07d04..d88de0ae4a7e 100644
--- a/tgui/packages/tgui/interfaces/Limbgrower.js
+++ b/tgui/packages/tgui/interfaces/Limbgrower.js
@@ -1,5 +1,13 @@
 import { useBackend, useSharedState } from '../backend';
-import { Box, Button, Dimmer, Icon, LabeledList, Section, Tabs } from '../components';
+import {
+  Box,
+  Button,
+  Dimmer,
+  Icon,
+  LabeledList,
+  Section,
+  Tabs,
+} from '../components';
 import { Window } from '../layouts';
 
 export const Limbgrower = (props, context) => {
@@ -12,16 +20,15 @@ export const Limbgrower = (props, context) => {
     busy,
   } = data;
   const [tab, setTab] = useSharedState(
-    context, 'category', categories[0]?.name);
-  const designList = categories
-    .find(category => category.name === tab)
-    ?.designs || [];
+    context,
+    'category',
+    categories[0]?.name,
+  );
+  const designList =
+    categories.find((category) => category.name === tab)?.designs || [];
 
   return (
-    <Window
-      title="Limb Grower"
-      width={400}
-      height={550}>
+    <Window title="Limb Grower" width={400} height={550}>
       {!!busy && (
         <Dimmer fontSize="32px">
           <Icon name="cog" spin={1} />
@@ -34,20 +41,24 @@ export const Limbgrower = (props, context) => {
             {total_reagents} / {max_reagents} reagent capacity used.
           </Box>
           <LabeledList>
-            {reagents.map(reagent => (
+            {reagents.map((reagent) => (
               <LabeledList.Item
                 key={reagent.reagent_name}
                 label={reagent.reagent_name}
-                buttons={(
+                buttons={
                   <Button.Confirm
                     textAlign="center"
                     width="120px"
                     content="Remove Reagent"
                     color="bad"
-                    onClick={() => act('empty_reagent', {
-                      reagent_type: reagent.reagent_type,
-                    })} />
-                )}>
+                    onClick={() =>
+                      act('empty_reagent', {
+                        reagent_type: reagent.reagent_type,
+                      })
+                    }
+                  />
+                }
+              >
                 {reagent.reagent_amount}u
               </LabeledList.Item>
             ))}
@@ -55,31 +66,36 @@ export const Limbgrower = (props, context) => {
         </Section>
         <Section title="Designs">
           <Tabs>
-            {categories.map(category => (
+            {categories.map((category) => (
               <Tabs.Tab
                 fluid
                 key={category.name}
                 selected={tab === category.name}
-                onClick={() => setTab(category.name)}>
+                onClick={() => setTab(category.name)}
+              >
                 {category.name}
               </Tabs.Tab>
             ))}
           </Tabs>
           <LabeledList>
-            {designList.map(design => (
+            {designList.map((design) => (
               <LabeledList.Item
                 key={design.name}
                 label={design.name}
-                buttons={(
+                buttons={
                   <Button
                     content="Make"
                     color="good"
-                    onClick={() => act('make_limb', {
-                      design_id: design.id,
-                      active_tab: design.parent_category,
-                    })} />
-                )}>
-                {design.needed_reagents.map(reagent => (
+                    onClick={() =>
+                      act('make_limb', {
+                        design_id: design.id,
+                        active_tab: design.parent_category,
+                      })
+                    }
+                  />
+                }
+              >
+                {design.needed_reagents.map((reagent) => (
                   <Box key={reagent.name}>
                     {reagent.name}: {reagent.amount}u
                   </Box>
diff --git a/tgui/packages/tgui/interfaces/ListInputModal.tsx b/tgui/packages/tgui/interfaces/ListInputModal.tsx
index ddfa50062a20..2a9061c9a5c4 100644
--- a/tgui/packages/tgui/interfaces/ListInputModal.tsx
+++ b/tgui/packages/tgui/interfaces/ListInputModal.tsx
@@ -2,7 +2,14 @@ import { Loader } from './common/Loader';
 import { InputButtons } from './common/InputButtons';
 import { Button, Input, Section, Stack } from '../components';
 import { useBackend, useLocalState } from '../backend';
-import { KEY_A, KEY_DOWN, KEY_ESCAPE, KEY_ENTER, KEY_UP, KEY_Z } from '../../common/keycodes';
+import {
+  KEY_A,
+  KEY_DOWN,
+  KEY_ESCAPE,
+  KEY_ENTER,
+  KEY_UP,
+  KEY_Z,
+} from '../../common/keycodes';
 import { Window } from '../layouts';
 
 type ListInputData = {
@@ -18,7 +25,7 @@ export const ListInputModal = (_, context) => {
   const { act, data } = useBackend<ListInputData>(context);
   const {
     items = [],
-    message = "",
+    message = '',
     init_value,
     large_buttons,
     timeout,
@@ -27,17 +34,17 @@ export const ListInputModal = (_, context) => {
   const [selected, setSelected] = useLocalState<number>(
     context,
     'selected',
-    items.indexOf(init_value)
+    items.indexOf(init_value),
   );
   const [searchBarVisible, setSearchBarVisible] = useLocalState<boolean>(
     context,
     'searchBarVisible',
-    items.length > 9
+    items.length > 9,
   );
   const [searchQuery, setSearchQuery] = useLocalState<string>(
     context,
     'searchQuery',
-    ''
+    '',
   );
   // User presses up or down on keyboard
   // Simulates clicking an item
@@ -100,11 +107,11 @@ export const ListInputModal = (_, context) => {
     setSearchQuery('');
   };
   const filteredItems = items.filter((item) =>
-    item?.toLowerCase().includes(searchQuery.toLowerCase())
+    item?.toLowerCase().includes(searchQuery.toLowerCase()),
   );
   // Dynamically changes the window height based on the message.
-  const windowHeight
-    = 325 + Math.ceil(message.length / 3) + (large_buttons ? 5 : 0);
+  const windowHeight =
+    325 + Math.ceil(message.length / 3) + (large_buttons ? 5 : 0);
   // Grabs the cursor when no search bar is visible.
   if (!searchBarVisible) {
     setTimeout(() => document!.getElementById(selected.toString())?.focus(), 1);
@@ -132,7 +139,8 @@ export const ListInputModal = (_, context) => {
             event.preventDefault();
             act('cancel');
           }
-        }}>
+        }}
+      >
         <Section
           buttons={
             <Button
@@ -150,7 +158,8 @@ export const ListInputModal = (_, context) => {
           }
           className="ListInput__Section"
           fill
-          title={message}>
+          title={message}
+        >
           <Stack fill vertical>
             <Stack.Item grow>
               <ListDisplay
@@ -185,8 +194,8 @@ export const ListInputModal = (_, context) => {
  */
 const ListDisplay = (props, context) => {
   const { act } = useBackend<ListInputData>(context);
-  const { filteredItems, onClick, onFocusSearch, searchBarVisible, selected }
-    = props;
+  const { filteredItems, onClick, onFocusSearch, searchBarVisible, selected } =
+    props;
 
   return (
     <Section fill scrollable tabIndex={0}>
@@ -211,9 +220,10 @@ const ListDisplay = (props, context) => {
             }}
             selected={index === selected}
             style={{
-              'animation': 'none',
-              'transition': 'none',
-            }}>
+              animation: 'none',
+              transition: 'none',
+            }}
+          >
             {item.replace(/^\w/, (c) => c.toUpperCase())}
           </Button>
         );
diff --git a/tgui/packages/tgui/interfaces/LoadoutManager.js b/tgui/packages/tgui/interfaces/LoadoutManager.js
index d5426983fa3d..d0c8286af92f 100644
--- a/tgui/packages/tgui/interfaces/LoadoutManager.js
+++ b/tgui/packages/tgui/interfaces/LoadoutManager.js
@@ -4,37 +4,35 @@ import { Window } from '../layouts';
 
 export const LoadoutManager = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    selected_loadout,
-    loadout_tabs,
-  } = data;
+  const { selected_loadout, loadout_tabs } = data;
 
   const [selectedTabName, setSelectedTab] = useSharedState(
-    context, 'tabs', loadout_tabs[0]?.name);
-  const selectedTab = loadout_tabs.find(curTab => {
+    context,
+    'tabs',
+    loadout_tabs[0]?.name,
+  );
+  const selectedTab = loadout_tabs.find((curTab) => {
     return curTab.name === selectedTabName;
   });
 
   return (
-    <Window
-      title="Loadout Manager"
-      width={500}
-      height={650}>
+    <Window title="Loadout Manager" width={500} height={650}>
       <Window.Content>
         <Stack fill vertical>
           <Stack.Item>
             <Section
               title="Loadout Categories"
               align="center"
-              buttons={(
+              buttons={
                 <Button
                   icon="check-double"
                   color="good"
                   content="Confirm"
                   tooltip="Confirm loadout and exit UI."
-                  onClick={() => act('close_ui', { revert: 0 })} />
-
-              )}>
+                  onClick={() => act('close_ui', { revert: 0 })}
+                />
+              }
+            >
               <Dropdown
                 width="100%"
                 selected={selectedTabName}
@@ -50,12 +48,12 @@ export const LoadoutManager = (props, context) => {
           <Stack.Item grow>
             <Stack fill>
               <Stack.Item grow>
-                { selectedTab && selectedTab.contents ? (
+                {selectedTab && selectedTab.contents ? (
                   <Section
                     title={selectedTab.title}
                     fill
                     scrollable
-                    buttons={(
+                    buttons={
                       <Button.Confirm
                         icon="times"
                         color="red"
@@ -63,43 +61,51 @@ export const LoadoutManager = (props, context) => {
                         content="Clear All Items"
                         tooltip="Clears ALL selected items from all categories."
                         width={10}
-                        onClick={() => act('clear_all_items')} />
-                    )}>
+                        onClick={() => act('clear_all_items')}
+                      />
+                    }
+                  >
                     <Stack grow vertical>
-                      {selectedTab.contents.map(item => (
+                      {selectedTab.contents.map((item) => (
                         <Stack.Item key={item.name}>
                           <Stack fontSize="15px">
                             <Stack.Item grow align="left">
                               {item.name}
                             </Stack.Item>
-                            { !!item.is_greyscale
-                            && (
+                            {!!item.is_greyscale && (
                               <Stack.Item>
                                 <Button
                                   icon="palette"
-                                  onClick={() => act('select_color', {
-                                    path: item.path,
-                                  })} />
+                                  onClick={() =>
+                                    act('select_color', {
+                                      path: item.path,
+                                    })
+                                  }
+                                />
                               </Stack.Item>
                             )}
-                            { !!item.is_renamable
-                            && (
+                            {!!item.is_renamable && (
                               <Stack.Item>
                                 <Button
                                   icon="pen"
-                                  onClick={() => act('set_name', {
-                                    path: item.path,
-                                  })} />
+                                  onClick={() =>
+                                    act('set_name', {
+                                      path: item.path,
+                                    })
+                                  }
+                                />
                               </Stack.Item>
                             )}
-                            { !!item.is_job_restricted
-                            && (
+                            {!!item.is_job_restricted && (
                               <Stack.Item>
                                 <Button
                                   icon="lock"
-                                  onClick={() => act('display_restrictions', {
-                                    path: item.path,
-                                  })} />
+                                  onClick={() =>
+                                    act('display_restrictions', {
+                                      path: item.path,
+                                    })
+                                  }
+                                />
                               </Stack.Item>
                             )}
                             <Stack.Item>
@@ -110,11 +116,15 @@ export const LoadoutManager = (props, context) => {
                                   item.is_donator_only && !user_is_donator
                                 }
                                 fluid
-                                onClick={() => act('select_item', {
-                                  path: item.path,
-                                  deselect:
-                                    selected_loadout.includes(item.path),
-                                })} />
+                                onClick={() =>
+                                  act('select_item', {
+                                    path: item.path,
+                                    deselect: selected_loadout.includes(
+                                      item.path,
+                                    ),
+                                  })
+                                }
+                              />
                             </Stack.Item>
                           </Stack>
                         </Stack.Item>
@@ -123,9 +133,7 @@ export const LoadoutManager = (props, context) => {
                   </Section>
                 ) : (
                   <Section fill>
-                    <Box>
-                      No contents for selected tab.
-                    </Box>
+                    <Box>No contents for selected tab.</Box>
                   </Section>
                 )}
               </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/MODpaint.js b/tgui/packages/tgui/interfaces/MODpaint.js
index 52062d5cea3d..22d14b656113 100644
--- a/tgui/packages/tgui/interfaces/MODpaint.js
+++ b/tgui/packages/tgui/interfaces/MODpaint.js
@@ -1,69 +1,56 @@
 import { useBackend } from '../backend';
-import { Box, Stack, Section, ByondUi, Slider, Flex, Button } from '../components';
+import {
+  Box,
+  Stack,
+  Section,
+  ByondUi,
+  Slider,
+  Flex,
+  Button,
+} from '../components';
 import { Window } from '../layouts';
 import { capitalize } from 'common/string';
 
-const colorToMatrix = param => {
+const colorToMatrix = (param) => {
   switch (param) {
     case 'red':
       return [
-        1, 0, 0, 0,
-        0.25, 0.5, 0, 0,
-        0.25, 0, 0.5, 0,
-        0, 0, 0, 1,
-        0, 0, 0, 0,
+        1, 0, 0, 0, 0.25, 0.5, 0, 0, 0.25, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0,
       ];
     case 'yellow':
       return [
-        0.5, 0.5, 0, 0,
-        0.5, 0.5, 0, 0,
-        0.25, 0.25, 0.5, 0,
-        0, 0, 0, 1,
-        0, 0, 0, 0,
+        0.5, 0.5, 0, 0, 0.5, 0.5, 0, 0, 0.25, 0.25, 0.5, 0, 0, 0, 0, 1, 0, 0, 0,
+        0,
       ];
     case 'green':
       return [
-        0.5, 0.25, 0, 0,
-        0, 1, 0, 0,
-        0, 0.25, 0.5, 0,
-        0, 0, 0, 1,
-        0, 0, 0, 0,
+        0.5, 0.25, 0, 0, 0, 1, 0, 0, 0, 0.25, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0,
       ];
     case 'teal':
       return [
-        0.25, 0.25, 0.25, 0,
-        0, 0.5, 0.5, 0,
-        0, 0.5, 0.5, 0,
-        0, 0, 0, 1,
-        0, 0, 0, 0,
+        0.25, 0.25, 0.25, 0, 0, 0.5, 0.5, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 1, 0, 0,
+        0, 0,
       ];
     case 'blue':
       return [
-        0.25, 0, 0.25, 0,
-        0, 0.5, 0.25, 0,
-        0, 0, 1, 0,
-        0, 0, 0, 1,
-        0, 0, 0, 0,
+        0.25, 0, 0.25, 0, 0, 0.5, 0.25, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0,
       ];
     case 'purple':
       return [
-        0.5, 0, 0.5, 0,
-        0.25, 0.5, 0.25, 0,
-        0.5, 0, 0.5, 0,
-        0, 0, 0, 1,
-        0, 0, 0, 0,
+        0.5, 0, 0.5, 0, 0.25, 0.5, 0.25, 0, 0.5, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0,
+        0,
       ];
   }
 };
 
-const displayText = param => {
+const displayText = (param) => {
   switch (param) {
     case 'r':
-      return "Red";
+      return 'Red';
     case 'g':
-      return "Green";
+      return 'Green';
     case 'b':
-      return "Blue";
+      return 'Blue';
   }
 };
 
@@ -80,22 +67,19 @@ export const MODpaint = (props, context) => {
   const presets = ['red', 'yellow', 'green', 'teal', 'blue', 'purple'];
   const prefixes = ['r', 'g', 'b'];
   return (
-    <Window
-      width={600}
-      height={365}>
+    <Window width={600} height={365}>
       <Window.Content>
         <Stack fill>
           <Stack.Item fill width="30%">
             {[0, 1, 2].map((row) => (
-              <Section key={row}
-                title={`${displayText(prefixes[row])} turns to:`}>
+              <Section
+                key={row}
+                title={`${displayText(prefixes[row])} turns to:`}
+              >
                 {[0, 1, 2].map((col) => (
-                  <Flex
-                    key={col}>
+                  <Flex key={col}>
                     <Flex.Item align="left" width="30%">
-                      <Box
-                        inline
-                        textColor="label">
+                      <Box inline textColor="label">
                         {`${displayText(prefixes[col])}:`}
                       </Box>
                     </Flex.Item>
@@ -103,17 +87,18 @@ export const MODpaint = (props, context) => {
                       <Slider
                         inline
                         textAlign="right"
-                        value={currentColor[row*4+col]*100}
+                        value={currentColor[row * 4 + col] * 100}
                         minValue={0}
                         maxValue={125}
                         step={1}
                         stepPixelSize={0.75}
-                        format={value => `${value}%`}
+                        format={(value) => `${value}%`}
                         onDrag={(e, value) => {
                           let retColor = currentColor;
-                          retColor[row*4+col] = value/100;
-                          act("transition_color", { color: retColor });
-                        }} />
+                          retColor[row * 4 + col] = value / 100;
+                          act('transition_color', { color: retColor });
+                        }}
+                      />
                     </Flex.Item>
                   </Flex>
                 ))}
@@ -123,7 +108,7 @@ export const MODpaint = (props, context) => {
           <Stack.Item width="25%">
             <Section height="70%" title="Presets">
               <Box textAlign="center">
-                {presets.map(preset => (
+                {presets.map((preset) => (
                   <Button
                     key={preset}
                     height="50px"
@@ -131,8 +116,10 @@ export const MODpaint = (props, context) => {
                     color={preset}
                     tooltipPosition="top"
                     tooltip={capitalize(preset)}
-                    onClick={() => act("transition_color",
-                      { color: colorToMatrix(preset) })} />
+                    onClick={() =>
+                      act('transition_color', { color: colorToMatrix(preset) })
+                    }
+                  />
                 ))}
               </Box>
             </Section>
@@ -143,7 +130,8 @@ export const MODpaint = (props, context) => {
                 icon="question"
                 color="average"
                 tooltipPosition="top"
-                tooltip="This is a color matrix. Think of it as editing the image in 3 layers, red, green, and blue, rather than editing the final image like with RGB." />
+                tooltip="This is a color matrix. Think of it as editing the image in 3 layers, red, green, and blue, rather than editing the final image like with RGB."
+              />
               <Button
                 height="50px"
                 width="50px"
@@ -151,7 +139,8 @@ export const MODpaint = (props, context) => {
                 color="good"
                 tooltipPosition="top"
                 tooltip="Confirm changes!"
-                onClick={() => act("confirm")} />
+                onClick={() => act('confirm')}
+              />
             </Section>
           </Stack.Item>
           <Stack.Item width="45%">
@@ -161,7 +150,8 @@ export const MODpaint = (props, context) => {
                 params={{
                   id: mapRef,
                   type: 'map',
-                }} />
+                }}
+              />
             </Section>
           </Stack.Item>
         </Stack>
diff --git a/tgui/packages/tgui/interfaces/MODsuit.js b/tgui/packages/tgui/interfaces/MODsuit.js
index 34737d7d7c7c..b01b38e6a321 100644
--- a/tgui/packages/tgui/interfaces/MODsuit.js
+++ b/tgui/packages/tgui/interfaces/MODsuit.js
@@ -1,5 +1,21 @@
 import { useBackend, useLocalState } from '../backend';
-import { Button, ColorBox, LabeledList, ProgressBar, Section, Collapsible, Box, Icon, Stack, Table, Dimmer, NumberInput, Flex, AnimatedNumber, Dropdown } from '../components';
+import {
+  Button,
+  ColorBox,
+  LabeledList,
+  ProgressBar,
+  Section,
+  Collapsible,
+  Box,
+  Icon,
+  Stack,
+  Table,
+  Dimmer,
+  NumberInput,
+  Flex,
+  AnimatedNumber,
+  Dropdown,
+} from '../components';
 import { Window } from '../layouts';
 
 const ConfigureNumberEntry = (props, context) => {
@@ -12,11 +28,14 @@ const ConfigureNumberEntry = (props, context) => {
       maxValue={50}
       stepPixelSize={5}
       width="39px"
-      onChange={(e, value) => act('configure', {
-        "key": name,
-        "value": value,
-        "ref": module_ref,
-      })} />
+      onChange={(e, value) =>
+        act('configure', {
+          key: name,
+          value: value,
+          ref: module_ref,
+        })
+      }
+    />
   );
 };
 
@@ -26,11 +45,13 @@ const ConfigureBoolEntry = (props, context) => {
   return (
     <Button.Checkbox
       checked={value}
-      onClick={() => act('configure', {
-        "key": name,
-        "value": !value,
-        "ref": module_ref,
-      })}
+      onClick={() =>
+        act('configure', {
+          key: name,
+          value: !value,
+          ref: module_ref,
+        })
+      }
     />
   );
 };
@@ -42,13 +63,14 @@ const ConfigureColorEntry = (props, context) => {
     <>
       <Button
         icon="paint-brush"
-        onClick={() => act('configure', {
-          "key": name,
-          "ref": module_ref,
-        })} />
-      <ColorBox
-        color={value}
-        mr={0.5} />
+        onClick={() =>
+          act('configure', {
+            key: name,
+            ref: module_ref,
+          })
+        }
+      />
+      <ColorBox color={value} mr={0.5} />
     </>
   );
 };
@@ -60,11 +82,13 @@ const ConfigureListEntry = (props, context) => {
     <Dropdown
       displayText={value}
       options={values}
-      onSelected={value => act('configure', {
-        "key": name,
-        "value": value,
-        "ref": module_ref,
-      })}
+      onSelected={(value) =>
+        act('configure', {
+          key: name,
+          value: value,
+          ref: module_ref,
+        })
+      }
     />
   );
 };
@@ -85,18 +109,16 @@ const ConfigureDataEntry = (props, context) => {
 };
 
 const RadCounter = (props, context) => {
-  const {
-    active,
-    userradiated,
-    usertoxins,
-    usermaxtoxins,
-    threatlevel,
-  } = props;
+  const { active, userradiated, usertoxins, usermaxtoxins, threatlevel } =
+    props;
   return (
     <Stack fill textAlign="center">
       <Stack.Item grow>
-        <Section title="Radiation Level" color={active && userradiated ? "bad" : "good"}>
-          {active && userradiated ? "IRRADIATED" : "RADIATION-FREE"}
+        <Section
+          title="Radiation Level"
+          color={active && userradiated ? 'bad' : 'good'}
+        >
+          {active && userradiated ? 'IRRADIATED' : 'RADIATION-FREE'}
         </Section>
       </Stack.Item>
       <Stack.Item grow>
@@ -107,13 +129,18 @@ const RadCounter = (props, context) => {
               good: [-Infinity, 0.2],
               average: [0.2, 0.5],
               bad: [0.5, Infinity],
-            }} >
+            }}
+          >
             <AnimatedNumber value={usertoxins} />
           </ProgressBar>
         </Section>
       </Stack.Item>
       <Stack.Item grow>
-        <Section title="Hazard Level" color={active && threatlevel ? "bad" : "good"} bold>
+        <Section
+          title="Hazard Level"
+          color={active && threatlevel ? 'bad' : 'good'}
+          bold
+        >
           {active && threatlevel ? threatlevel : 0}
         </Section>
       </Stack.Item>
@@ -140,7 +167,8 @@ const HealthAnalyzer = (props, context) => {
             good: [0.5, Infinity],
             average: [0.2, 0.5],
             bad: [-Infinity, 0.2],
-          }} >
+          }}
+        >
           <AnimatedNumber value={userhealth} />
         </ProgressBar>
       </Section>
@@ -153,7 +181,8 @@ const HealthAnalyzer = (props, context) => {
                 good: [-Infinity, 0.2],
                 average: [0.2, 0.5],
                 bad: [0.5, Infinity],
-              }} >
+              }}
+            >
               <AnimatedNumber value={userbrute} />
             </ProgressBar>
           </Section>
@@ -166,7 +195,8 @@ const HealthAnalyzer = (props, context) => {
                 good: [-Infinity, 0.2],
                 average: [0.2, 0.5],
                 bad: [0.5, Infinity],
-              }} >
+              }}
+            >
               <AnimatedNumber value={userburn} />
             </ProgressBar>
           </Section>
@@ -179,7 +209,8 @@ const HealthAnalyzer = (props, context) => {
                 good: [-Infinity, 0.2],
                 average: [0.2, 0.5],
                 bad: [0.5, Infinity],
-              }} >
+              }}
+            >
               <AnimatedNumber value={usertoxin} />
             </ProgressBar>
           </Section>
@@ -192,7 +223,8 @@ const HealthAnalyzer = (props, context) => {
                 good: [-Infinity, 0.2],
                 average: [0.2, 0.5],
                 bad: [0.5, Infinity],
-              }} >
+              }}
+            >
               <AnimatedNumber value={useroxy} />
             </ProgressBar>
           </Section>
@@ -209,11 +241,7 @@ const ID2MODULE = {
 
 const LockedInterface = () => (
   <Section align="center" fill>
-    <Icon
-      color="red"
-      name="exclamation-triangle"
-      size={15}
-    />
+    <Icon color="red" name="exclamation-triangle" size={15} />
     <Box fontSize="30px" color="red">
       ERROR: INTERFACE UNRESPONSIVE
     </Box>
@@ -239,7 +267,7 @@ const ConfigureScreen = (props, context) => {
   return (
     <Dimmer backgroundColor="rgba(0, 0, 0, 0.8)">
       <Stack vertical>
-        {configuration_keys.map(key => {
+        {configuration_keys.map((key) => {
           const data = configuration_data[key];
           return (
             <Stack.Item key={data.key}>
@@ -249,7 +277,8 @@ const ConfigureScreen = (props, context) => {
                 type={data.type}
                 value={data.value}
                 values={data.values}
-                module_ref={module_ref} />
+                module_ref={module_ref}
+              />
             </Stack.Item>
           );
         })}
@@ -259,7 +288,8 @@ const ConfigureScreen = (props, context) => {
               fluid
               onClick={props.onExit}
               icon="times"
-              textAlign="center" >
+              textAlign="center"
+            >
               Exit
             </Button>
           </Box>
@@ -269,14 +299,14 @@ const ConfigureScreen = (props, context) => {
   );
 };
 
-const displayText = param => {
+const displayText = (param) => {
   switch (param) {
     case 1:
-      return "Use";
+      return 'Use';
     case 2:
-      return "Toggle";
+      return 'Toggle';
     case 3:
-      return "Select";
+      return 'Select';
   }
 };
 
@@ -297,8 +327,10 @@ const ParametersSection = (props, context) => {
     AI,
   } = data;
   const status = malfunctioning
-    ? 'Malfunctioning' : active
-      ? 'Active' : 'Inactive';
+    ? 'Malfunctioning'
+    : active
+      ? 'Active'
+      : 'Inactive';
   return (
     <Section title="Parameters">
       <LabeledList>
@@ -308,18 +340,22 @@ const ParametersSection = (props, context) => {
             <Button
               icon="power-off"
               content={active ? 'Deactivate' : 'Activate'}
-              onClick={() => act('activate')} />
-          } >
+              onClick={() => act('activate')}
+            />
+          }
+        >
           {status}
         </LabeledList.Item>
         <LabeledList.Item
           label="ID Lock"
           buttons={
             <Button
-              icon={locked ? "lock-open" : "lock"}
+              icon={locked ? 'lock-open' : 'lock'}
               content={locked ? 'Unlock' : 'Lock'}
-              onClick={() => act('lock')} />
-          } >
+              onClick={() => act('lock')}
+            />
+          }
+        >
           {locked ? 'Locked' : 'Unlocked'}
         </LabeledList.Item>
         <LabeledList.Item
@@ -329,21 +365,18 @@ const ParametersSection = (props, context) => {
               icon={'wifi'}
               color={link_call ? 'good' : 'default'}
               disabled={!link_id}
-              content={
-                link_call
-                  ? 'Calling (' + link_call + ')'
-                  : 'Call'
-              }
+              content={link_call ? 'Calling (' + link_call + ')' : 'Call'}
               onClick={() => act('call')}
             />
-          } >
+          }
+        >
           {link_id}
         </LabeledList.Item>
         <LabeledList.Item label="Cover">
           {open ? 'Open' : 'Closed'}
         </LabeledList.Item>
         <LabeledList.Item label="Selected Module">
-          {selected_module || "None"}
+          {selected_module || 'None'}
         </LabeledList.Item>
         <LabeledList.Item label="Complexity">
           {complexity} ({complexity_max})
@@ -351,9 +384,7 @@ const ParametersSection = (props, context) => {
         <LabeledList.Item label="Occupant">
           {wearer_name}, {wearer_job}
         </LabeledList.Item>
-        <LabeledList.Item label="Onboard AI">
-          {AI || 'None'}
-        </LabeledList.Item>
+        <LabeledList.Item label="Onboard AI">{AI || 'None'}</LabeledList.Item>
       </LabeledList>
     </Section>
   );
@@ -375,29 +406,21 @@ const HardwareSection = (props, context) => {
     <Section title="Hardware">
       <Collapsible title="Parts">
         <LabeledList>
-          <LabeledList.Item label="Control Unit">
-            {control}
-          </LabeledList.Item>
-          <LabeledList.Item label="Helmet">
-            {helmet || "None"}
-          </LabeledList.Item>
+          <LabeledList.Item label="Control Unit">{control}</LabeledList.Item>
+          <LabeledList.Item label="Helmet">{helmet || 'None'}</LabeledList.Item>
           <LabeledList.Item label="Chestplate">
-            {chestplate || "None"}
+            {chestplate || 'None'}
           </LabeledList.Item>
           <LabeledList.Item label="Gauntlets">
-            {gauntlets || "None"}
-          </LabeledList.Item>
-          <LabeledList.Item label="Boots">
-            {boots || "None"}
+            {gauntlets || 'None'}
           </LabeledList.Item>
+          <LabeledList.Item label="Boots">{boots || 'None'}</LabeledList.Item>
         </LabeledList>
       </Collapsible>
       <Collapsible title="Core">
-        {core && (
+        {(core && (
           <LabeledList>
-            <LabeledList.Item label="Core Type">
-              {core}
-            </LabeledList.Item>
+            <LabeledList.Item label="Core Type">{core}</LabeledList.Item>
             <LabeledList.Item label="Core Charge">
               <ProgressBar
                 value={charge / 100}
@@ -406,11 +429,14 @@ const HardwareSection = (props, context) => {
                   good: [0.6, Infinity],
                   average: [0.3, 0.6],
                   bad: [-Infinity, 0.3],
-                }} />
+                }}
+              />
             </LabeledList.Item>
           </LabeledList>
-        ) || (
-          <Box color="bad" textAlign="center">No Core Detected</Box>
+        )) || (
+          <Box color="bad" textAlign="center">
+            No Core Detected
+          </Box>
         )}
       </Collapsible>
     </Section>
@@ -419,26 +445,22 @@ const HardwareSection = (props, context) => {
 
 const InfoSection = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    active,
-    modules,
-  } = data;
-  const info_modules = modules.filter(module => !!module.id);
+  const { active, modules } = data;
+  const info_modules = modules.filter((module) => !!module.id);
 
   return (
     <Section title="Info">
       <Stack vertical>
-        {info_modules.length !== 0 && info_modules.map(module => {
-          const Module = ID2MODULE[module.id];
-          return (
-            <Stack.Item key={module.ref}>
-              {!active && <LockedModule />}
-              <Module {...module} active={active} />
-            </Stack.Item>
-          );
-        }) || (
-          <Box textAlign="center">No Info Modules Detected</Box>
-        )}
+        {(info_modules.length !== 0 &&
+          info_modules.map((module) => {
+            const Module = ID2MODULE[module.id];
+            return (
+              <Stack.Item key={module.ref}>
+                {!active && <LockedModule />}
+                <Module {...module} active={active} />
+              </Stack.Item>
+            );
+          })) || <Box textAlign="center">No Info Modules Detected</Box>}
       </Stack>
     </Section>
   );
@@ -446,131 +468,130 @@ const InfoSection = (props, context) => {
 
 const ModuleSection = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    complexity_max,
-    modules,
-  } = data;
-  const [configureState, setConfigureState]
-    = useLocalState(context, "module_configuration", null);
+  const { complexity_max, modules } = data;
+  const [configureState, setConfigureState] = useLocalState(
+    context,
+    'module_configuration',
+    null,
+  );
   return (
     <Section title="Modules" fill>
       <Flex direction="column">
-        {modules.length !== 0 && modules.map(module => {
-          return (
-            <Flex.Item key={module.ref} >
-              <Collapsible
-                title={module.name} >
-                <Section>
-                  {configureState === module.ref && (
-                    <ConfigureScreen
-                      configuration_data={module.configuration_data}
-                      module_ref={module.ref}
-                      onExit={() => setConfigureState(null)} />)}
-                  <Table>
-                    <Table.Row
-                      header>
-                      <Table.Cell
-                        textAlign="center">
-                        <Button
-                          color="transparent"
-                          icon="save"
-                          tooltip="Complexity"
-                          tooltipPosition="top" />
-                      </Table.Cell>
-                      <Table.Cell
-                        textAlign="center">
-                        <Button
-                          color="transparent"
-                          icon="plug"
-                          tooltip="Idle Power Cost"
-                          tooltipPosition="top" />
-                      </Table.Cell>
-                      <Table.Cell
-                        textAlign="center">
-                        <Button
-                          color="transparent"
-                          icon="lightbulb"
-                          tooltip="Active Power Cost"
-                          tooltipPosition="top" />
-                      </Table.Cell>
-                      <Table.Cell
-                        textAlign="center">
-                        <Button
-                          color="transparent"
-                          icon="bolt"
-                          tooltip="Use Power Cost"
-                          tooltipPosition="top" />
-                      </Table.Cell>
-                      <Table.Cell
-                        textAlign="center">
-                        <Button
-                          color="transparent"
-                          icon="hourglass-half"
-                          tooltip="Cooldown"
-                          tooltipPosition="top" />
-                      </Table.Cell>
-                      <Table.Cell
-                        textAlign="center">
-                        <Button
-                          color="transparent"
-                          icon="tasks"
-                          tooltip="Actions"
-                          tooltipPosition="top" />
-                      </Table.Cell>
-                    </Table.Row>
-                    <Table.Row>
-                      <Table.Cell textAlign="center">
-                        {module.complexity}/{complexity_max}
-                      </Table.Cell>
-                      <Table.Cell textAlign="center">
-                        {module.idle_power}
-                      </Table.Cell>
-                      <Table.Cell textAlign="center">
-                        {module.active_power}
-                      </Table.Cell>
-                      <Table.Cell textAlign="center">
-                        {module.use_power}
-                      </Table.Cell>
-                      <Table.Cell
-                        textAlign="center">
-                        {(module.cooldown > 0) && (
-                          module.cooldown / 10
-                        ) || ("0")}/{module.cooldown_time / 10}s
-                      </Table.Cell>
-                      <Table.Cell
-                        textAlign="center">
-                        <Button
-                          onClick={() => act('select', { "ref": module.ref })}
-                          icon="bullseye"
-                          selected={module.active}
-                          tooltip={displayText(module.module_type)}
-                          tooltipPosition="left"
-                          disabled={!module.module_type} />
-                        <Button
-                          onClick={() => setConfigureState(module.ref)}
-                          icon="cog"
-                          selected={configureState === module.ref}
-                          tooltip="Configure"
-                          tooltipPosition="left"
-                          disabled={module.configuration_data.length === 0} />
-                        <Button
-                          onClick={() => act('pin', { "ref": module.ref })}
-                          icon="thumbtack"
-                          selected={module.pinned}
-                          tooltip="Pin"
-                          tooltipPosition="left"
-                          disabled={!module.module_type} />
-                      </Table.Cell>
-                    </Table.Row>
-                  </Table>
-                  <Box>
-                    {module.description}
-                  </Box>
-                </Section>
-              </Collapsible>
-            </Flex.Item>
-          );
-        }) || (
+        {(modules.length !== 0 &&
+          modules.map((module) => {
+            return (
+              <Flex.Item key={module.ref}>
+                <Collapsible title={module.name}>
+                  <Section>
+                    {configureState === module.ref && (
+                      <ConfigureScreen
+                        configuration_data={module.configuration_data}
+                        module_ref={module.ref}
+                        onExit={() => setConfigureState(null)}
+                      />
+                    )}
+                    <Table>
+                      <Table.Row header>
+                        <Table.Cell textAlign="center">
+                          <Button
+                            color="transparent"
+                            icon="save"
+                            tooltip="Complexity"
+                            tooltipPosition="top"
+                          />
+                        </Table.Cell>
+                        <Table.Cell textAlign="center">
+                          <Button
+                            color="transparent"
+                            icon="plug"
+                            tooltip="Idle Power Cost"
+                            tooltipPosition="top"
+                          />
+                        </Table.Cell>
+                        <Table.Cell textAlign="center">
+                          <Button
+                            color="transparent"
+                            icon="lightbulb"
+                            tooltip="Active Power Cost"
+                            tooltipPosition="top"
+                          />
+                        </Table.Cell>
+                        <Table.Cell textAlign="center">
+                          <Button
+                            color="transparent"
+                            icon="bolt"
+                            tooltip="Use Power Cost"
+                            tooltipPosition="top"
+                          />
+                        </Table.Cell>
+                        <Table.Cell textAlign="center">
+                          <Button
+                            color="transparent"
+                            icon="hourglass-half"
+                            tooltip="Cooldown"
+                            tooltipPosition="top"
+                          />
+                        </Table.Cell>
+                        <Table.Cell textAlign="center">
+                          <Button
+                            color="transparent"
+                            icon="tasks"
+                            tooltip="Actions"
+                            tooltipPosition="top"
+                          />
+                        </Table.Cell>
+                      </Table.Row>
+                      <Table.Row>
+                        <Table.Cell textAlign="center">
+                          {module.complexity}/{complexity_max}
+                        </Table.Cell>
+                        <Table.Cell textAlign="center">
+                          {module.idle_power}
+                        </Table.Cell>
+                        <Table.Cell textAlign="center">
+                          {module.active_power}
+                        </Table.Cell>
+                        <Table.Cell textAlign="center">
+                          {module.use_power}
+                        </Table.Cell>
+                        <Table.Cell textAlign="center">
+                          {(module.cooldown > 0 && module.cooldown / 10) || '0'}
+                          /{module.cooldown_time / 10}s
+                        </Table.Cell>
+                        <Table.Cell textAlign="center">
+                          <Button
+                            onClick={() => act('select', { ref: module.ref })}
+                            icon="bullseye"
+                            selected={module.active}
+                            tooltip={displayText(module.module_type)}
+                            tooltipPosition="left"
+                            disabled={!module.module_type}
+                          />
+                          <Button
+                            onClick={() => setConfigureState(module.ref)}
+                            icon="cog"
+                            selected={configureState === module.ref}
+                            tooltip="Configure"
+                            tooltipPosition="left"
+                            disabled={module.configuration_data.length === 0}
+                          />
+                          <Button
+                            onClick={() => act('pin', { ref: module.ref })}
+                            icon="thumbtack"
+                            selected={module.pinned}
+                            tooltip="Pin"
+                            tooltipPosition="left"
+                            disabled={!module.module_type}
+                          />
+                        </Table.Cell>
+                      </Table.Row>
+                    </Table>
+                    <Box>{module.description}</Box>
+                  </Section>
+                </Collapsible>
+              </Flex.Item>
+            );
+          })) || (
           <Flex.Item>
             <Box textAlign="center">No Modules Detected</Box>
           </Flex.Item>
@@ -582,21 +603,17 @@ const ModuleSection = (props, context) => {
 
 export const MODsuit = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    ui_theme,
-    interface_break,
-  } = data;
+  const { ui_theme, interface_break } = data;
   return (
     <Window
       width={400}
       height={525}
       theme={ui_theme}
       title="MOD Interface Panel"
-      resizable>
+      resizable
+    >
       <Window.Content scrollable={!interface_break}>
-        {!!interface_break && (
-          <LockedInterface />
-        ) || (
+        {(!!interface_break && <LockedInterface />) || (
           <Stack vertical fill>
             <Stack.Item>
               <ParametersSection />
diff --git a/tgui/packages/tgui/interfaces/MafiaPanel.js b/tgui/packages/tgui/interfaces/MafiaPanel.js
index 5bb73be87b11..f28f798606c4 100644
--- a/tgui/packages/tgui/interfaces/MafiaPanel.js
+++ b/tgui/packages/tgui/interfaces/MafiaPanel.js
@@ -1,24 +1,23 @@
 import { classes } from 'common/react';
 import { multiline } from 'common/string';
 import { useBackend } from '../backend';
-import { Box, Button, Collapsible, Flex, NoticeBox, Section, Stack, TimeDisplay } from '../components';
+import {
+  Box,
+  Button,
+  Collapsible,
+  Flex,
+  NoticeBox,
+  Section,
+  Stack,
+  TimeDisplay,
+} from '../components';
 import { Window } from '../layouts';
 
 export const MafiaPanel = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    actions,
-    phase,
-    roleinfo,
-    role_theme,
-    admin_controls,
-  } = data;
+  const { actions, phase, roleinfo, role_theme, admin_controls } = data;
   return (
-    <Window
-      title="Mafia"
-      theme={role_theme}
-      width={650}
-      height={580}>
+    <Window title="Mafia" theme={role_theme} width={650} height={580}>
       <Window.Content>
         <Stack fill vertical>
           {!roleinfo && (
@@ -31,12 +30,15 @@ export const MafiaPanel = (props, context) => {
               <MafiaRole />
             </Stack.Item>
           )}
-          {actions?.map(action => (
+          {actions?.map((action) => (
             <Stack.Item key={action}>
               <Button
-                onClick={() => act('mf_action', {
-                  atype: action,
-                })}>
+                onClick={() =>
+                  act('mf_action', {
+                    atype: action,
+                  })
+                }
+              >
                 {action}
               </Button>
             </Stack.Item>
@@ -60,7 +62,7 @@ export const MafiaPanel = (props, context) => {
                     {!!roleinfo && (
                       <Stack.Item height="80px">
                         <Section fill scrollable>
-                          {roleinfo.action_log?.map(line => (
+                          {roleinfo.action_log?.map((line) => (
                             <Box key={line}>{line}</Box>
                           ))}
                         </Section>
@@ -84,24 +86,20 @@ export const MafiaPanel = (props, context) => {
 
 const MafiaLobby = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    lobbydata,
-    phase,
-    timeleft,
-  } = data;
-  const readyGhosts = lobbydata ? lobbydata.filter(
-    player => player.status === "Ready") : null;
+  const { lobbydata, phase, timeleft } = data;
+  const readyGhosts = lobbydata
+    ? lobbydata.filter((player) => player.status === 'Ready')
+    : null;
   return (
     <Section
       fill
       scrollable
       title="Lobby"
-      buttons={(
+      buttons={
         <>
           Phase = {phase}
           {' | '}
-          <TimeDisplay auto="down" value={timeleft} />
-          {' '}
+          <TimeDisplay auto="down" value={timeleft} />{' '}
           <Button
             icon="clipboard-check"
             tooltipPosition="bottom-start"
@@ -111,7 +109,8 @@ const MafiaLobby = (props, context) => {
               for the next.
             `}
             content="Sign Up"
-            onClick={() => act('mf_signup')} />
+            onClick={() => act('mf_signup')}
+          />
           <Button
             icon="eye"
             tooltipPosition="bottom-start"
@@ -123,27 +122,20 @@ const MafiaLobby = (props, context) => {
               rejoin SS13.
             `}
             content="Spectate"
-            onClick={() => act('mf_spectate')} />
+            onClick={() => act('mf_spectate')}
+          />
         </>
-      )}>
+      }
+    >
       <NoticeBox info>
-        The lobby currently has {readyGhosts
-          ? readyGhosts.length : "0"}/12 valid players signed up.
+        The lobby currently has {readyGhosts ? readyGhosts.length : '0'}/12
+        valid players signed up.
       </NoticeBox>
-      {lobbydata?.map(lobbyist => (
-        <Stack
-          key={lobbyist}
-          className="candystripe"
-          p={1}
-          align="baseline">
-          <Stack.Item grow>
-            {lobbyist.name}
-          </Stack.Item>
-          <Stack.Item>
-            Status:
-          </Stack.Item>
-          <Stack.Item
-            color={lobbyist.status === 'Ready' ? 'green' : 'red'}>
+      {lobbydata?.map((lobbyist) => (
+        <Stack key={lobbyist} className="candystripe" p={1} align="baseline">
+          <Stack.Item grow>{lobbyist.name}</Stack.Item>
+          <Stack.Item>Status:</Stack.Item>
+          <Stack.Item color={lobbyist.status === 'Ready' ? 'green' : 'red'}>
             {lobbyist.status} {lobbyist.spectating}
           </Stack.Item>
         </Stack>
@@ -154,55 +146,45 @@ const MafiaLobby = (props, context) => {
 
 const MafiaRole = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    phase,
-    roleinfo,
-    timeleft,
-  } = data;
+  const { phase, roleinfo, timeleft } = data;
   return (
     <Section
       title={phase}
       minHeight="100px"
       maxHeight="50px"
-      buttons={(
+      buttons={
         <Box
           style={{
             'font-family': 'Consolas, monospace',
             'font-size': '14px',
             'line-height': 1.5,
             'font-weight': 'bold',
-          }}>
+          }}
+        >
           <TimeDisplay auto="down" value={timeleft} />
         </Box>
-      )}>
+      }
+    >
       <Stack align="center">
         <Stack.Item grow>
-          <Box bold>
-            You are the {roleinfo.role}
-          </Box>
-          <Box italic>
-            {roleinfo.desc}
-          </Box>
+          <Box bold>You are the {roleinfo.role}</Box>
+          <Box italic>{roleinfo.desc}</Box>
         </Stack.Item>
         <Stack.Item>
           <Box
-            className={classes([
-              'mafia32x32',
-              roleinfo.revealed_icon,
-            ])}
+            className={classes(['mafia32x32', roleinfo.revealed_icon])}
             style={{
-              'transform': 'scale(2) translate(0px, 10%)',
+              transform: 'scale(2) translate(0px, 10%)',
               'vertical-align': 'middle',
-            }} />
+            }}
+          />
           <Box
-            className={classes([
-              'mafia32x32',
-              roleinfo.hud_icon,
-            ])}
+            className={classes(['mafia32x32', roleinfo.hud_icon])}
             style={{
-              'transform': 'scale(2) translate(-5px, -5px)',
+              transform: 'scale(2) translate(-5px, -5px)',
               'vertical-align': 'middle',
-            }} />
+            }}
+          />
         </Stack.Item>
       </Stack>
     </Section>
@@ -211,9 +193,7 @@ const MafiaRole = (props, context) => {
 
 const MafiaListOfRoles = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    all_roles,
-  } = data;
+  const { all_roles } = data;
   return (
     <Section
       fill
@@ -242,28 +222,26 @@ const MafiaListOfRoles = (props, context) => {
               detective work revealing a changeling).`}
           />
         </>
-      }>
+      }
+    >
       <Flex direction="column">
-        {all_roles?.map(r => (
+        {all_roles?.map((r) => (
           <Flex.Item
             key={r}
             height="30px"
-            className="Section__title candystripe">
-            <Flex
-              height="18px"
-              align="center"
-              justify="space-between">
-              <Flex.Item>
-                {r}
-              </Flex.Item>
-              <Flex.Item
-                textAlign="right">
+            className="Section__title candystripe"
+          >
+            <Flex height="18px" align="center" justify="space-between">
+              <Flex.Item>{r}</Flex.Item>
+              <Flex.Item textAlign="right">
                 <Button
                   color="transparent"
                   icon="question"
-                  onClick={() => act('mf_lookup', {
-                    atype: r.slice(0, -3),
-                  })}
+                  onClick={() =>
+                    act('mf_lookup', {
+                      atype: r.slice(0, -3),
+                    })
+                  }
                 />
               </Flex.Item>
             </Flex>
@@ -276,9 +254,7 @@ const MafiaListOfRoles = (props, context) => {
 
 const MafiaJudgement = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    judgement_phase,
-  } = data;
+  const { judgement_phase } = data;
   return (
     <Section
       title="Judgement"
@@ -294,19 +270,17 @@ const MafiaJudgement = (props, context) => {
             to abstaining with the middle button if you reconsider.
           `}
         />
-      }>
+      }
+    >
       <Flex justify="space-around">
         <Button
           icon="smile-beam"
           content="INNOCENT!"
           color="good"
           disabled={!judgement_phase}
-          onClick={() => act('vote_innocent')} />
-        {!judgement_phase && (
-          <Box>
-            There is nobody on trial at the moment.
-          </Box>
-        )}
+          onClick={() => act('vote_innocent')}
+        />
+        {!judgement_phase && <Box>There is nobody on trial at the moment.</Box>}
         {!!judgement_phase && (
           <Box>
             It is now time to vote, vote the accused innocent or guilty!
@@ -316,7 +290,8 @@ const MafiaJudgement = (props, context) => {
           icon="angry"
           color="bad"
           disabled={!judgement_phase}
-          onClick={() => act('vote_guilty')}>
+          onClick={() => act('vote_guilty')}
+        >
           GUILTY!
         </Button>
       </Flex>
@@ -325,7 +300,8 @@ const MafiaJudgement = (props, context) => {
           icon="meh"
           color="white"
           disabled={!judgement_phase}
-          onClick={() => act('vote_abstain')}>
+          onClick={() => act('vote_abstain')}
+        >
           Abstain
         </Button>
       </Flex>
@@ -335,35 +311,37 @@ const MafiaJudgement = (props, context) => {
 
 const MafiaPlayers = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    players,
-  } = data;
+  const { players } = data;
   return (
     <Section fill scrollable title="Players">
       <Flex direction="column">
-        {players?.map(player => (
+        {players?.map((player) => (
           <Flex.Item
             height="30px"
             className="Section__title candystripe"
-            key={player.ref}>
+            key={player.ref}
+          >
             <Stack height="18px" align="center">
               <Stack.Item grow color={!player.alive && 'red'}>
                 {player.name} {!player.alive && '(DEAD)'}
               </Stack.Item>
               <Stack.Item shrink={0}>
-                {player.votes !== undefined
-                  && !!player.alive
-                  && `Votes: ${player.votes}`}
+                {player.votes !== undefined &&
+                  !!player.alive &&
+                  `Votes: ${player.votes}`}
               </Stack.Item>
               <Stack.Item shrink={0} minWidth="42px" textAlign="center">
-                {player.actions?.map(action => (
+                {player.actions?.map((action) => (
                   <Button
                     key={action}
                     fluid
-                    onClick={() => act('mf_targ_action', {
-                      atype: action,
-                      target: player.ref,
-                    })}>
+                    onClick={() =>
+                      act('mf_targ_action', {
+                        atype: action,
+                        target: player.ref,
+                      })
+                    }
+                  >
                     {action}
                   </Button>
                 ))}
@@ -379,49 +357,32 @@ const MafiaPlayers = (props, context) => {
 const MafiaAdmin = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Collapsible
-      title="ADMIN CONTROLS"
-      color="red">
+    <Collapsible title="ADMIN CONTROLS" color="red">
       <Section>
-        <Collapsible
-          title="A kind, coder warning"
-          color="transparent">
-          Almost all of these are all built to help me debug
-          the game (ow, debugging a 12 player game!) So they are
-          rudamentary and prone to breaking at the drop of a hat.
-          Make sure you know what you&apos;re doing when you press one.
-          Also because an admin did it: do not gib/delete/dust
-          anyone! It will runtime the game to death
+        <Collapsible title="A kind, coder warning" color="transparent">
+          Almost all of these are all built to help me debug the game (ow,
+          debugging a 12 player game!) So they are rudamentary and prone to
+          breaking at the drop of a hat. Make sure you know what you&apos;re
+          doing when you press one. Also because an admin did it: do not
+          gib/delete/dust anyone! It will runtime the game to death
         </Collapsible>
-        <Button
-          icon="arrow-right"
-          onClick={() => act('next_phase')}>
+        <Button icon="arrow-right" onClick={() => act('next_phase')}>
           Next Phase
         </Button>
-        <Button
-          icon="home"
-          onClick={() => act('players_home')}>
+        <Button icon="home" onClick={() => act('players_home')}>
           Send All Players Home
         </Button>
-        <Button
-          icon="sync-alt"
-          onClick={() => act('new_game')}>
+        <Button icon="sync-alt" onClick={() => act('new_game')}>
           New Game
         </Button>
-        <Button
-          icon="skull"
-          onClick={() => act('nuke')}>
+        <Button icon="skull" onClick={() => act('nuke')}>
           Nuke
         </Button>
         <br />
-        <Button
-          icon="paint-brush"
-          onClick={() => act('debug_setup')}>
+        <Button icon="paint-brush" onClick={() => act('debug_setup')}>
           Create Custom Setup
         </Button>
-        <Button
-          icon="paint-roller"
-          onClick={() => act('cancel_setup')}>
+        <Button icon="paint-roller" onClick={() => act('cancel_setup')}>
           Reset Custom Setup
         </Button>
       </Section>
diff --git a/tgui/packages/tgui/interfaces/MalfunctionModulePicker.js b/tgui/packages/tgui/interfaces/MalfunctionModulePicker.js
index 8b48472d2bab..2bfe5988a920 100644
--- a/tgui/packages/tgui/interfaces/MalfunctionModulePicker.js
+++ b/tgui/packages/tgui/interfaces/MalfunctionModulePicker.js
@@ -1,13 +1,10 @@
 import { useBackend } from '../backend';
 import { Window } from '../layouts';
-import { GenericUplink } from "./Uplink/GenericUplink";
+import { GenericUplink } from './Uplink/GenericUplink';
 
 export const MalfunctionModulePicker = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    processingTime,
-    categories,
-  } = data;
+  const { processingTime, categories } = data;
 
   const categoriesList = [];
   const items = [];
@@ -28,16 +25,13 @@ export const MalfunctionModulePicker = (props, context) => {
   }
 
   return (
-    <Window
-      width={620}
-      height={525}
-      theme="malfunction">
+    <Window width={620} height={525} theme="malfunction">
       <Window.Content scrollable>
         <GenericUplink
           categories={categoriesList}
           items={items}
           currency={`${processingTime} PT`}
-          handleBuy={(item) => act("buy", { name: item.name })}
+          handleBuy={(item) => act('buy', { name: item.name })}
         />
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/MassDriverControl.js b/tgui/packages/tgui/interfaces/MassDriverControl.js
index 7f7136bcbe73..1bc132a9e322 100644
--- a/tgui/packages/tgui/interfaces/MassDriverControl.js
+++ b/tgui/packages/tgui/interfaces/MassDriverControl.js
@@ -4,72 +4,71 @@ import { Window } from '../layouts';
 
 export const MassDriverControl = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    connected,
-    minutes,
-    seconds,
-    timing,
-    power,
-    poddoor,
-  } = data;
+  const { connected, minutes, seconds, timing, power, poddoor } = data;
   return (
-    <Window
-      width={300}
-      height={connected ? 215 : 107}>
+    <Window width={300} height={connected ? 215 : 107}>
       <Window.Content>
         {!!connected && (
           <Section
             title="Auto Launch"
-            buttons={(
+            buttons={
               <Button
-                icon={"clock-o"}
+                icon={'clock-o'}
                 content={timing ? 'Stop' : 'Start'}
                 selected={timing}
-                onClick={() => act('time')} />
-            )}>
+                onClick={() => act('time')}
+              />
+            }
+          >
             <Button
               icon="fast-backward"
               disabled={timing}
-              onClick={() => act('input', { adjust: -30 })} />
+              onClick={() => act('input', { adjust: -30 })}
+            />
             <Button
               icon="backward"
               disabled={timing}
-              onClick={() => act('input', { adjust: -1 })} />
-            {' '}
+              onClick={() => act('input', { adjust: -1 })}
+            />{' '}
             {String(minutes).padStart(2, '0')}:
-            {String(seconds).padStart(2, '0')}
-            {' '}
+            {String(seconds).padStart(2, '0')}{' '}
             <Button
               icon="forward"
               disabled={timing}
-              onClick={() => act('input', { adjust: 1 })} />
+              onClick={() => act('input', { adjust: 1 })}
+            />
             <Button
               icon="fast-forward"
               disabled={timing}
-              onClick={() => act('input', { adjust: 30 })} />
+              onClick={() => act('input', { adjust: 30 })}
+            />
           </Section>
         )}
         <Section
           title="Controls"
-          buttons={(
+          buttons={
             <Button
-              icon={"toggle-on"}
+              icon={'toggle-on'}
               content="Toggle Outer Door"
               disabled={timing || !poddoor}
-              onClick={() => act('door')} />
-          )}>
-          {!!connected && (
+              onClick={() => act('door')}
+            />
+          }
+        >
+          {(!!connected && (
             <>
               <LabeledList>
                 <LabeledList.Item
                   label="Power Level"
                   buttons={
                     <Button
-                      icon={"bomb"}
+                      icon={'bomb'}
                       content="Test Fire"
                       disabled={timing}
-                      onClick={() => act('driver_test')} />
-                  }>
+                      onClick={() => act('driver_test')}
+                    />
+                  }
+                >
                   <NumberInput
                     value={power}
                     width="40px"
@@ -79,7 +78,8 @@ export const MassDriverControl = (props, context) => {
                       return act('set_power', {
                         power: value,
                       });
-                    }} />
+                    }}
+                  />
                 </LabeledList.Item>
               </LabeledList>
               <Button
@@ -89,13 +89,10 @@ export const MassDriverControl = (props, context) => {
                 mt={1.5}
                 icon="arrow-up"
                 textAlign="center"
-                onClick={() => act('launch')} />
+                onClick={() => act('launch')}
+              />
             </>
-          ) || (
-            <Box color="bad">
-              No connected mass driver
-            </Box>
-          )}
+          )) || <Box color="bad">No connected mass driver</Box>}
         </Section>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/MechBayPowerConsole.js b/tgui/packages/tgui/interfaces/MechBayPowerConsole.js
index 22a440791c90..630e11dbabcb 100644
--- a/tgui/packages/tgui/interfaces/MechBayPowerConsole.js
+++ b/tgui/packages/tgui/interfaces/MechBayPowerConsole.js
@@ -1,5 +1,12 @@
 import { useBackend } from '../backend';
-import { AnimatedNumber, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../components';
+import {
+  AnimatedNumber,
+  Button,
+  LabeledList,
+  NoticeBox,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const MechBayPowerConsole = (props, context) => {
@@ -8,64 +15,53 @@ export const MechBayPowerConsole = (props, context) => {
   const mech = recharge_port && recharge_port.mech;
   const cell = mech && mech.cell;
   return (
-    <Window
-      width={400}
-      height={200}>
+    <Window width={400} height={200}>
       <Window.Content>
         <Section
           title="Mech status"
           textAlign="center"
-          buttons={(
+          buttons={
             <Button
               icon="sync"
               content="Sync"
-              onClick={() => act('reconnect')} />
-          )}>
+              onClick={() => act('reconnect')}
+            />
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Integrity">
-              {!recharge_port && (
-                <NoticeBox>
-                  No power port detected. Please re-sync.
-                </NoticeBox>
-              ) || !mech && (
-                <NoticeBox>
-                  No mech detected.
-                </NoticeBox>
-              ) || (
-                <ProgressBar
-                  value={mech.health / mech.maxhealth}
-                  ranges={{
-                    good: [0.7, Infinity],
-                    average: [0.3, 0.7],
-                    bad: [-Infinity, 0.3],
-                  }} />
-              )}
+              {(!recharge_port && (
+                <NoticeBox>No power port detected. Please re-sync.</NoticeBox>
+              )) ||
+                (!mech && <NoticeBox>No mech detected.</NoticeBox>) || (
+                  <ProgressBar
+                    value={mech.health / mech.maxhealth}
+                    ranges={{
+                      good: [0.7, Infinity],
+                      average: [0.3, 0.7],
+                      bad: [-Infinity, 0.3],
+                    }}
+                  />
+                )}
             </LabeledList.Item>
             <LabeledList.Item label="Power">
-              {!recharge_port && (
-                <NoticeBox>
-                  No power port detected. Please re-sync.
-                </NoticeBox>
-              ) || !mech && (
-                <NoticeBox>
-                  No mech detected.
-                </NoticeBox>
-              ) || !cell && (
-                <NoticeBox>
-                  No cell is installed.
-                </NoticeBox>
-              ) || (
-                <ProgressBar
-                  value={cell.charge / cell.maxcharge}
-                  ranges={{
-                    good: [0.7, Infinity],
-                    average: [0.3, 0.7],
-                    bad: [-Infinity, 0.3],
-                  }}>
-                  <AnimatedNumber value={cell.charge} />
-                  {' / ' + cell.maxcharge}
-                </ProgressBar>
-              )}
+              {(!recharge_port && (
+                <NoticeBox>No power port detected. Please re-sync.</NoticeBox>
+              )) ||
+                (!mech && <NoticeBox>No mech detected.</NoticeBox>) ||
+                (!cell && <NoticeBox>No cell is installed.</NoticeBox>) || (
+                  <ProgressBar
+                    value={cell.charge / cell.maxcharge}
+                    ranges={{
+                      good: [0.7, Infinity],
+                      average: [0.3, 0.7],
+                      bad: [-Infinity, 0.3],
+                    }}
+                  >
+                    <AnimatedNumber value={cell.charge} />
+                    {' / ' + cell.maxcharge}
+                  </ProgressBar>
+                )}
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/Mecha/AlertPane.tsx b/tgui/packages/tgui/interfaces/Mecha/AlertPane.tsx
index 889aa1751186..23896fad2234 100644
--- a/tgui/packages/tgui/interfaces/Mecha/AlertPane.tsx
+++ b/tgui/packages/tgui/interfaces/Mecha/AlertPane.tsx
@@ -1,31 +1,40 @@
 import { useBackend } from '../../backend';
 import { Stack, Button, Box } from '../../components';
-import { OperatorData, InternalDamageToDamagedDesc, InternalDamageToNormalDesc } from './data';
+import {
+  OperatorData,
+  InternalDamageToDamagedDesc,
+  InternalDamageToNormalDesc,
+} from './data';
 
 export const AlertPane = (props, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    internal_damage,
-    internal_damage_keys,
-  } = data;
+  const { internal_damage, internal_damage_keys } = data;
   return (
     <Stack fill vertical>
-      {Object.keys(internal_damage_keys).map(t => (
+      {Object.keys(internal_damage_keys).map((t) => (
         <Stack.Item key={t}>
           <Stack justify="space-between">
             <Stack.Item>
-              <Box color={(internal_damage & internal_damage_keys[t]) ? "red" : "green"}>
-                {(internal_damage & internal_damage_keys[t])
-                  ?InternalDamageToDamagedDesc[t]:InternalDamageToNormalDesc[t]}
+              <Box
+                color={
+                  internal_damage & internal_damage_keys[t] ? 'red' : 'green'
+                }
+              >
+                {internal_damage & internal_damage_keys[t]
+                  ? InternalDamageToDamagedDesc[t]
+                  : InternalDamageToNormalDesc[t]}
               </Box>
             </Stack.Item>
             <Stack.Item>
               <Button
-                onClick={() => act('repair_int_damage', {
-                  flag: internal_damage_keys[t],
-                })}
-                color={"red"}
-                disabled={!(internal_damage&internal_damage_keys[t])}>
+                onClick={() =>
+                  act('repair_int_damage', {
+                    flag: internal_damage_keys[t],
+                  })
+                }
+                color={'red'}
+                disabled={!(internal_damage & internal_damage_keys[t])}
+              >
                 Repair
               </Button>
             </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/Mecha/ArmPane.tsx b/tgui/packages/tgui/interfaces/Mecha/ArmPane.tsx
index 4475519b2208..90244ef93863 100644
--- a/tgui/packages/tgui/interfaces/Mecha/ArmPane.tsx
+++ b/tgui/packages/tgui/interfaces/Mecha/ArmPane.tsx
@@ -1,24 +1,21 @@
 import { toFixed } from 'common/math';
 import { useBackend } from '../../backend';
-import { Button, LabeledList, Stack, Section, ProgressBar } from '../../components';
+import {
+  Button,
+  LabeledList,
+  Stack,
+  Section,
+  ProgressBar,
+} from '../../components';
 import { MechWeapon, OperatorData } from './data';
 
-export const ArmPane=(props:{weapon:MechWeapon}, context) => {
+export const ArmPane = (props: { weapon: MechWeapon }, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    name,
-    desc,
-    integrity,
-    energy_per_use,
-  } = props.weapon;
-  const {
-    power_level,
-  } = data;
+  const { name, desc, integrity, energy_per_use } = props.weapon;
+  const { power_level } = data;
   return (
     <Stack fill vertical>
-      <Stack.Item bold>
-        {name}
-      </Stack.Item>
+      <Stack.Item bold>{name}</Stack.Item>
       <Stack.Item>
         <Stack>
           <Stack.Item grow>
@@ -28,33 +25,41 @@ export const ArmPane=(props:{weapon:MechWeapon}, context) => {
                 average: [0.25, 0.75],
                 bad: [-Infinity, 0.25],
               }}
-              value={integrity} />
+              value={integrity}
+            />
           </Stack.Item>
           <Stack.Item>
-            <Button content={"Repair"}
+            <Button
+              content={'Repair'}
               icon={'wrench'}
-              onClick={() => act('equip_act', {
-                ref: props.weapon.ref,
-                gear_action: "repair",
-              })} />
+              onClick={() =>
+                act('equip_act', {
+                  ref: props.weapon.ref,
+                  gear_action: 'repair',
+                })
+              }
+            />
           </Stack.Item>
         </Stack>
       </Stack.Item>
       <Stack.Item vertical>
         <LabeledList>
-          <LabeledList.Item label={"Detach"}>
+          <LabeledList.Item label={'Detach'}>
             <Button
-              content={"Detach"}
-              onClick={() => act('equip_act', {
-                ref: props.weapon.ref,
-                gear_action: "detach",
-              })} />
+              content={'Detach'}
+              onClick={() =>
+                act('equip_act', {
+                  ref: props.weapon.ref,
+                  gear_action: 'detach',
+                })
+              }
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Energy per use">
             {energy_per_use} energy per use
           </LabeledList.Item>
           <LabeledList.Item label="Uses left">
-            {power_level? toFixed(power_level/energy_per_use):0} uses left
+            {power_level ? toFixed(power_level / energy_per_use) : 0} uses left
           </LabeledList.Item>
           <BallisticStats weapon={props.weapon} />
         </LabeledList>
@@ -62,14 +67,12 @@ export const ArmPane=(props:{weapon:MechWeapon}, context) => {
       <Stack.Item>
         <Snowflake weapon={props.weapon} />
       </Stack.Item>
-      <Stack.Item>
-        {desc}
-      </Stack.Item>
+      <Stack.Item>{desc}</Stack.Item>
     </Stack>
   );
 };
 
-const BallisticStats = (props: {weapon: MechWeapon}, context) => {
+const BallisticStats = (props: { weapon: MechWeapon }, context) => {
   const { act, data } = useBackend<OperatorData>(context);
   const {
     isballisticweapon,
@@ -89,8 +92,7 @@ const BallisticStats = (props: {weapon: MechWeapon}, context) => {
         <LabeledList.Item label="Ammo loaded">
           {projectiles} / {max_magazine}
         </LabeledList.Item>
-        {disabledreload ? (null
-        ) : (
+        {disabledreload ? null : (
           <>
             <LabeledList.Item label="Ammo stored">
               {projectiles_cache} / {projectiles_cache_max}
@@ -98,32 +100,32 @@ const BallisticStats = (props: {weapon: MechWeapon}, context) => {
             <LabeledList.Item label="Reload">
               <Button
                 icon={'redo'}
-                onClick={() => act('equip_act', {
-                  ref: ref,
-                  gear_action: "reload",
-                })}>
+                onClick={() =>
+                  act('equip_act', {
+                    ref: ref,
+                    gear_action: 'reload',
+                  })
+                }
+              >
                 Reload
               </Button>
             </LabeledList.Item>
-          </>)}
-        <LabeledList.Item label="Ammo type">
-          {ammo_type}
-        </LabeledList.Item>
+          </>
+        )}
+        <LabeledList.Item label="Ammo type">{ammo_type}</LabeledList.Item>
       </>
     );
   }
 };
 
-const MECHA_SNOWFLAKE_ID_SLEEPER = "sleeper_snowflake";
-const MECHA_SNOWFLAKE_ID_SYRINGE = "syringe_snowflake";
-const MECHA_SNOWFLAKE_ID_MODE = "mode_snowflake";
+const MECHA_SNOWFLAKE_ID_SLEEPER = 'sleeper_snowflake';
+const MECHA_SNOWFLAKE_ID_SYRINGE = 'syringe_snowflake';
+const MECHA_SNOWFLAKE_ID_MODE = 'mode_snowflake';
 
 // Handles all the snowflake buttons and whatever
-const Snowflake = (props: {weapon: MechWeapon}, context) => {
-  const {
-    snowflake,
-  } = props.weapon;
-  switch (snowflake["snowflake_id"]) {
+const Snowflake = (props: { weapon: MechWeapon }, context) => {
+  const { snowflake } = props.weapon;
+  switch (snowflake['snowflake_id']) {
     case MECHA_SNOWFLAKE_ID_SLEEPER:
       return <SnowflakeSleeper weapon={props.weapon} />;
     case MECHA_SNOWFLAKE_ID_SYRINGE:
@@ -135,44 +137,49 @@ const Snowflake = (props: {weapon: MechWeapon}, context) => {
   }
 };
 
-const SnowflakeSleeper = (props: {weapon: MechWeapon}, context) => {
+const SnowflakeSleeper = (props: { weapon: MechWeapon }, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    patient,
-  } = props.weapon.snowflake;
+  const { patient } = props.weapon.snowflake;
   if (!patient) {
     return null;
   } else {
     return (
-      <Section label={"Patient " + (patient.patientname)}>
+      <Section label={'Patient ' + patient.patientname}>
         <LabeledList>
-          <LabeledList.Item label={"Status"}>
-            {patient.isdead ? "DECEASED" : "ALIVE"}
+          <LabeledList.Item label={'Status'}>
+            {patient.isdead ? 'DECEASED' : 'ALIVE'}
           </LabeledList.Item>
-          <LabeledList.Item label={"Health"}>
+          <LabeledList.Item label={'Health'}>
             <ProgressBar
               ranges={{
                 good: [0.5, Infinity],
                 average: [0.25, 0.5],
                 bad: [-Infinity, 0.25],
               }}
-              value={patient.patient_health} />
+              value={patient.patient_health}
+            />
           </LabeledList.Item>
-          <LabeledList.Item label={"Ejection"}>
+          <LabeledList.Item label={'Ejection'}>
             <Button
-              content={"Eject"}
-              onClick={() => act('equip_act', {
-                ref: props.weapon.ref,
-                gear_action: "eject",
-              })} />
+              content={'Eject'}
+              onClick={() =>
+                act('equip_act', {
+                  ref: props.weapon.ref,
+                  gear_action: 'eject',
+                })
+              }
+            />
           </LabeledList.Item>
-          <LabeledList.Item label={"Stats"}>
+          <LabeledList.Item label={'Stats'}>
             <Button
-              content={"View"}
-              onClick={() => act('equip_act', {
-                ref: props.weapon.ref,
-                gear_action: "view_stats",
-              })} />
+              content={'View'}
+              onClick={() =>
+                act('equip_act', {
+                  ref: props.weapon.ref,
+                  gear_action: 'view_stats',
+                })
+              }
+            />
           </LabeledList.Item>
         </LabeledList>
       </Section>
@@ -180,54 +187,52 @@ const SnowflakeSleeper = (props: {weapon: MechWeapon}, context) => {
   }
 };
 
-const SnowflakeSyringe = (props: {weapon: MechWeapon}, context) => {
+const SnowflakeSyringe = (props: { weapon: MechWeapon }, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    mode,
-    syringe,
-    max_syringe,
-    reagents,
-    total_reagents,
-  } = props.weapon.snowflake;
+  const { mode, syringe, max_syringe, reagents, total_reagents } =
+    props.weapon.snowflake;
   return (
-    <Section label={"Syringe gun control"}>
+    <Section label={'Syringe gun control'}>
       <LabeledList>
-        <LabeledList.Item label={"Syringes"}>
+        <LabeledList.Item label={'Syringes'}>
           {syringe}/{max_syringe}
         </LabeledList.Item>
-        <LabeledList.Item label={"Reagents"}>
+        <LabeledList.Item label={'Reagents'}>
           {reagents}/{total_reagents}
         </LabeledList.Item>
-        <LabeledList.Item label={"Mode"}>
+        <LabeledList.Item label={'Mode'}>
           <Button
             content={mode}
-            onClick={() => act('equip_act', {
-              ref: props.weapon.ref,
-              gear_action: "change_mode",
-            })} />
+            onClick={() =>
+              act('equip_act', {
+                ref: props.weapon.ref,
+                gear_action: 'change_mode',
+              })
+            }
+          />
         </LabeledList.Item>
-        <LabeledList.Item label={"Reagent control"}>
+        <LabeledList.Item label={'Reagent control'}>
           <Button
-            content={"View"}
-            onClick={() => act('equip_act', {
-              ref: props.weapon.ref,
-              gear_action: "show_reagents",
-            })} />
+            content={'View'}
+            onClick={() =>
+              act('equip_act', {
+                ref: props.weapon.ref,
+                gear_action: 'show_reagents',
+              })
+            }
+          />
         </LabeledList.Item>
       </LabeledList>
     </Section>
   );
 };
 
-const SnowflakeExtinguisher = (props: {weapon: MechWeapon}, context) => {
-  const {
-    reagents,
-    total_reagents,
-  } = props.weapon.snowflake;
+const SnowflakeExtinguisher = (props: { weapon: MechWeapon }, context) => {
+  const { reagents, total_reagents } = props.weapon.snowflake;
   return (
-    <Section label={"Reagent status:"}>
+    <Section label={'Reagent status:'}>
       <LabeledList>
-        <LabeledList.Item label={"Reagents"}>
+        <LabeledList.Item label={'Reagents'}>
           {reagents}/{total_reagents}
         </LabeledList.Item>
       </LabeledList>
@@ -235,22 +240,22 @@ const SnowflakeExtinguisher = (props: {weapon: MechWeapon}, context) => {
   );
 };
 
-const SnowflakeMode = (props: {weapon: MechWeapon}, context) => {
+const SnowflakeMode = (props: { weapon: MechWeapon }, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    mode,
-    name,
-  } = props.weapon.snowflake;
+  const { mode, name } = props.weapon.snowflake;
   return (
     <Section label={name}>
       <LabeledList>
-        <LabeledList.Item label={"Mode"}>
+        <LabeledList.Item label={'Mode'}>
           <Button
             content={mode}
-            onClick={() => act('equip_act', {
-              ref: props.weapon.ref,
-              gear_action: "change_mode",
-            })} />
+            onClick={() =>
+              act('equip_act', {
+                ref: props.weapon.ref,
+                gear_action: 'change_mode',
+              })
+            }
+          />
         </LabeledList.Item>
       </LabeledList>
     </Section>
diff --git a/tgui/packages/tgui/interfaces/Mecha/ArmorPane.tsx b/tgui/packages/tgui/interfaces/Mecha/ArmorPane.tsx
index d963b656c888..3bdec05047b8 100644
--- a/tgui/packages/tgui/interfaces/Mecha/ArmorPane.tsx
+++ b/tgui/packages/tgui/interfaces/Mecha/ArmorPane.tsx
@@ -5,32 +5,31 @@ import { classes } from 'common/react';
 
 export const ArmorPane = (props, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    mech_equipment,
-  } = data;
+  const { mech_equipment } = data;
   return (
     <Stack fill vertical justify="space-evenly" align="center">
-      {mech_equipment["armor"].map((module, i) => (
+      {mech_equipment['armor'].map((module, i) => (
         <Stack.Item key={i}>
           <Stack vertical align="center">
-            <Stack.Item bold>
-              {module.protect_name}
-            </Stack.Item>
+            <Stack.Item bold>{module.protect_name}</Stack.Item>
             <Stack.Item>
-              <Box className={classes([
-                "mechaarmor76x76",
-                module.iconstate_name,
-              ])} style={{
-                "transform": "scale(0.8)",
-              }} />
+              <Box
+                className={classes(['mechaarmor76x76', module.iconstate_name])}
+                style={{
+                  transform: 'scale(0.8)',
+                }}
+              />
             </Stack.Item>
             <Stack.Item>
               <Button
-                content={"Detach"}
-                onClick={() => act('equip_act', {
-                  ref: module.ref,
-                  gear_action: "detach",
-                })} />
+                content={'Detach'}
+                onClick={() =>
+                  act('equip_act', {
+                    ref: module.ref,
+                    gear_action: 'detach',
+                  })
+                }
+              />
             </Stack.Item>
           </Stack>
         </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/Mecha/MaintMode.tsx b/tgui/packages/tgui/interfaces/Mecha/MaintMode.tsx
index 61d1d33f7380..30602a1b04f3 100644
--- a/tgui/packages/tgui/interfaces/Mecha/MaintMode.tsx
+++ b/tgui/packages/tgui/interfaces/Mecha/MaintMode.tsx
@@ -18,20 +18,27 @@ const MECHA_MAINT_PANELS = {
 };
 
 export const MaintMode = (props, context) => {
-  const [screen, setPanel] = useLocalState(context, 'screen', MECHA_MAINT_PANELS.main);
+  const [screen, setPanel] = useLocalState(
+    context,
+    'screen',
+    MECHA_MAINT_PANELS.main,
+  );
   const Component = screen.component();
   return (
     <Stack fill vertical>
       <Stack.Item>
-        {screen.returnfluff ? <Button
-          fluid
-          bold
-          content={screen.returnfluff}
-          textAlign="center"
-          fontSize="200%"
-          lineHeight={1.25}
-          className="Mecha__Button"
-          onClick={() => setPanel(MECHA_MAINT_PANELS.main)} /> : null}
+        {screen.returnfluff ? (
+          <Button
+            fluid
+            bold
+            content={screen.returnfluff}
+            textAlign="center"
+            fontSize="200%"
+            lineHeight={1.25}
+            className="Mecha__Button"
+            onClick={() => setPanel(MECHA_MAINT_PANELS.main)}
+          />
+        ) : null}
       </Stack.Item>
       <Stack.Item>
         <Component />
@@ -42,24 +49,30 @@ export const MaintMode = (props, context) => {
 
 const MainPanel = (props, context) => {
   const { act, data } = useBackend<MaintData>(context);
-  const [screen, setPanel] = useLocalState(context, 'screen', MECHA_MAINT_PANELS.main);
-  const {
-    mecha_flags,
-    mechflag_keys,
-  } = data;
+  const [screen, setPanel] = useLocalState(
+    context,
+    'screen',
+    MECHA_MAINT_PANELS.main,
+  );
+  const { mecha_flags, mechflag_keys } = data;
   return (
     <Stack fill vertical>
-      {(mecha_flags & mechflag_keys["ADDING_MAINT_ACCESS_POSSIBLE"]) ? <MaintEnabled /> : null}
+      {mecha_flags & mechflag_keys['ADDING_MAINT_ACCESS_POSSIBLE'] ? (
+        <MaintEnabled />
+      ) : null}
       <Stack.Item>
-        {(mecha_flags & mechflag_keys["ADDING_ACCESS_POSSIBLE"]) ? <Button
-          fluid
-          bold
-          content={"Open Access Panel"}
-          textAlign="center"
-          fontSize="200%"
-          lineHeight={1.25}
-          className="Mecha__Button"
-          onClick={() => setPanel(MECHA_MAINT_PANELS.access)} /> : null}
+        {mecha_flags & mechflag_keys['ADDING_ACCESS_POSSIBLE'] ? (
+          <Button
+            fluid
+            bold
+            content={'Open Access Panel'}
+            textAlign="center"
+            fontSize="200%"
+            lineHeight={1.25}
+            className="Mecha__Button"
+            onClick={() => setPanel(MECHA_MAINT_PANELS.access)}
+          />
+        ) : null}
       </Stack.Item>
     </Stack>
   );
@@ -67,41 +80,48 @@ const MainPanel = (props, context) => {
 
 const MaintEnabled = (props, context) => {
   const { act, data } = useBackend<MaintData>(context);
-  const [screen, setPanel] = useLocalState(context, 'screen', MECHA_MAINT_PANELS.main);
+  const [screen, setPanel] = useLocalState(
+    context,
+    'screen',
+    MECHA_MAINT_PANELS.main,
+  );
   return (
     <>
       <Stack.Item>
         <Button
           fluid
           bold
-          content={"Disable Maintenance"}
+          content={'Disable Maintenance'}
           textAlign="center"
           fontSize="200%"
           lineHeight={1.25}
           className="Mecha__ButtonDanger"
-          onClick={() => act('stopmaint')} />
+          onClick={() => act('stopmaint')}
+        />
       </Stack.Item>
       <Stack.Item>
         <Button
           fluid
           bold
-          content={"Manage Stock Parts"}
+          content={'Manage Stock Parts'}
           textAlign="center"
           fontSize="200%"
           lineHeight={1.25}
           className="Mecha__Button"
-          onClick={() => setPanel(MECHA_MAINT_PANELS.stockparts)} />
+          onClick={() => setPanel(MECHA_MAINT_PANELS.stockparts)}
+        />
       </Stack.Item>
       <Stack.Item>
         <Button
           fluid
           bold
-          content={"Set cabin pressure"}
+          content={'Set cabin pressure'}
           textAlign="center"
           fontSize="200%"
           lineHeight={1.25}
           className="Mecha__Button"
-          onClick={() => act('set_pressure')} />
+          onClick={() => act('set_pressure')}
+        />
       </Stack.Item>
     </>
   );
@@ -109,56 +129,56 @@ const MaintEnabled = (props, context) => {
 
 const StockPartsPanel = (props, context) => {
   const { act, data } = useBackend<MaintData>(context);
-  const {
-    cell,
-    scanning,
-    capacitor,
-  } = data;
+  const { cell, scanning, capacitor } = data;
   return (
     <Stack fill vertical>
       <Stack.Item>
         <Button
           fluid
           bold
-          content={"Toggle part replacement"}
+          content={'Toggle part replacement'}
           textAlign="center"
           fontSize="200%"
           lineHeight={1.25}
           className="Mecha__ButtonDanger"
-          onClick={() => act('togglemaint')} />
+          onClick={() => act('togglemaint')}
+        />
       </Stack.Item>
       <Stack.Item>
         <Button
           fluid
           bold
-          content={"Eject cell - " + cell}
+          content={'Eject cell - ' + cell}
           textAlign="center"
           fontSize="200%"
           lineHeight={1.25}
           className="Mecha__Button"
-          onClick={() => act('drop_cell')} />
+          onClick={() => act('drop_cell')}
+        />
       </Stack.Item>
       <Stack.Item>
         <Button
           fluid
           bold
-          content={"Eject scanning - " + scanning}
+          content={'Eject scanning - ' + scanning}
           textAlign="center"
           fontSize="200%"
           lineHeight={1.25}
           className="Mecha__Button"
-          onClick={() => act('drop_scanning')} />
+          onClick={() => act('drop_scanning')}
+        />
       </Stack.Item>
       <Stack.Item>
         <Button
           fluid
           bold
-          content={"Eject capacitor - " + capacitor}
+          content={'Eject capacitor - ' + capacitor}
           textAlign="center"
           fontSize="200%"
           lineHeight={1.25}
           className="Mecha__Button"
-          onClick={() => act('drop_capacitor')} />
+          onClick={() => act('drop_capacitor')}
+        />
       </Stack.Item>
     </Stack>
   );
@@ -166,22 +186,20 @@ const StockPartsPanel = (props, context) => {
 
 const AccessPanel = (props, context) => {
   const { act, data } = useBackend<MaintData>(context);
-  const {
-    idcard_access,
-    operation_req_access,
-  } = data;
+  const { idcard_access, operation_req_access } = data;
   return (
     <Stack fill vertical>
       <Stack.Item>
         <Button
           fluid
           bold
-          content={"Lock permissions panel"}
+          content={'Lock permissions panel'}
           textAlign="center"
           fontSize="200%"
           lineHeight={1.25}
           className="Mecha__ButtonDanger"
-          onClick={() => act('lock_req_edit')} />
+          onClick={() => act('lock_req_edit')}
+        />
       </Stack.Item>
       <Stack.Item>
         <Stack fill>
@@ -194,7 +212,8 @@ const AccessPanel = (props, context) => {
               fontSize="200%"
               lineHeight={1.25}
               className="Mecha__Button"
-              onClick={() => act('del_req_access', { removed_access: "all" })} />
+              onClick={() => act('del_req_access', { removed_access: 'all' })}
+            />
           </Stack.Item>
           <Stack.Item grow={1}>
             <Button
@@ -205,7 +224,8 @@ const AccessPanel = (props, context) => {
               fontSize="200%"
               lineHeight={1.25}
               className="Mecha__Button"
-              onClick={() => act('add_req_access', { added_access: "all" })} />
+              onClick={() => act('add_req_access', { added_access: 'all' })}
+            />
           </Stack.Item>
         </Stack>
       </Stack.Item>
@@ -213,10 +233,7 @@ const AccessPanel = (props, context) => {
         <Stack.Item key={code.name}>
           <Stack fill>
             <Stack.Item grow={1}>
-              <Box
-                className="Mecha__displayBoxRed">
-                {code.name}
-              </Box>
+              <Box className="Mecha__displayBoxRed">{code.name}</Box>
             </Stack.Item>
             <Stack.Item>
               <Button
@@ -227,18 +244,19 @@ const AccessPanel = (props, context) => {
                 fontSize="200%"
                 lineHeight={1.25}
                 className="Mecha__ButtonDanger"
-                onClick={() => act('del_req_access', { removed_access: code.number })} />
+                onClick={() =>
+                  act('del_req_access', { removed_access: code.number })
+                }
+              />
             </Stack.Item>
           </Stack>
-        </Stack.Item>))}
+        </Stack.Item>
+      ))}
       {idcard_access.map((code, i) => (
         <Stack.Item key={code.name}>
           <Stack fill>
             <Stack.Item grow={1}>
-              <Box
-                className="Mecha__displayBox">
-                {code.name}
-              </Box>
+              <Box className="Mecha__displayBox">{code.name}</Box>
             </Stack.Item>
             <Stack.Item>
               <Button
@@ -249,10 +267,14 @@ const AccessPanel = (props, context) => {
                 fontSize="200%"
                 lineHeight={1.25}
                 className="Mecha__Button"
-                onClick={() => act('add_req_access', { added_access: code.number })} />
+                onClick={() =>
+                  act('add_req_access', { added_access: code.number })
+                }
+              />
             </Stack.Item>
           </Stack>
-        </Stack.Item>))}
+        </Stack.Item>
+      ))}
     </Stack>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/Mecha/MechStatPane.tsx b/tgui/packages/tgui/interfaces/Mecha/MechStatPane.tsx
index 4d31f80935de..9b75a7233813 100644
--- a/tgui/packages/tgui/interfaces/Mecha/MechStatPane.tsx
+++ b/tgui/packages/tgui/interfaces/Mecha/MechStatPane.tsx
@@ -1,5 +1,12 @@
 import { useBackend } from '../../backend';
-import { Stack, Button, Section, Box, ProgressBar, LabeledList } from '../../components';
+import {
+  Stack,
+  Button,
+  Section,
+  Box,
+  ProgressBar,
+  LabeledList,
+} from '../../components';
 import { KelvinZeroCelcius, OperatorData } from './data';
 import { toFixed } from 'common/math';
 
@@ -21,11 +28,8 @@ export const MechStatPane = (props, context) => {
       <Stack.Item>
         <Section
           title={name}
-          buttons={(
-            <Button onClick={() => act('changename')}>
-              Rename
-            </Button>
-          )} />
+          buttons={<Button onClick={() => act('changename')}>Rename</Button>}
+        />
       </Stack.Item>
       <Stack.Item>
         <Section title="Status">
@@ -37,7 +41,8 @@ export const MechStatPane = (props, context) => {
                   average: [0.25, 0.5],
                   bad: [-Infinity, 0.25],
                 }}
-                value={integrity} />
+                value={integrity}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Power">
               <PowerBar />
@@ -54,14 +59,16 @@ export const MechStatPane = (props, context) => {
               </Button>
             </LabeledList.Item>
             <LabeledList.Item label="Cabin pressure">
-              <Box color={cabin_pressure>cabin_dangerous_highpressure?"red":null}>
+              <Box
+                color={
+                  cabin_pressure > cabin_dangerous_highpressure ? 'red' : null
+                }
+              >
                 {cabin_pressure} kPa
               </Box>
             </LabeledList.Item>
             <LabeledList.Item label="Cabin temperature">
-              <Box>
-                {GetTempFormat(cabin_temp)}
-              </Box>
+              <Box>{GetTempFormat(cabin_temp)}</Box>
             </LabeledList.Item>
             <EnviromentalAir />
           </LabeledList>
@@ -76,18 +83,35 @@ export const MechStatPane = (props, context) => {
         <Section title="Maintenance">
           <LabeledList>
             <LabeledList.Item label="Maintenance mode">
-              <Button onClick={() => act('toggle_maintenance')} selected={mecha_flags & mechflag_keys["ADDING_MAINT_ACCESS_POSSIBLE"]}>
-                {(mecha_flags & mechflag_keys["ADDING_MAINT_ACCESS_POSSIBLE"]) ? "En" : "Dis"}abled
+              <Button
+                onClick={() => act('toggle_maintenance')}
+                selected={
+                  mecha_flags & mechflag_keys['ADDING_MAINT_ACCESS_POSSIBLE']
+                }
+              >
+                {mecha_flags & mechflag_keys['ADDING_MAINT_ACCESS_POSSIBLE']
+                  ? 'En'
+                  : 'Dis'}
+                abled
               </Button>
             </LabeledList.Item>
             <LabeledList.Item label="ID reader panel">
-              <Button onClick={() => act('toggle_id_panel')} selected={mecha_flags & mechflag_keys["ADDING_ACCESS_POSSIBLE"]}>
-                {(mecha_flags & mechflag_keys["ADDING_ACCESS_POSSIBLE"]) ? "En" : "Dis"}abled
+              <Button
+                onClick={() => act('toggle_id_panel')}
+                selected={mecha_flags & mechflag_keys['ADDING_ACCESS_POSSIBLE']}
+              >
+                {mecha_flags & mechflag_keys['ADDING_ACCESS_POSSIBLE']
+                  ? 'En'
+                  : 'Dis'}
+                abled
               </Button>
             </LabeledList.Item>
             <LabeledList.Item label="Port connection">
-              <Button onClick={() => act('toggle_port')} selected={port_connected}>
-                {port_connected ? "C":"Disc"}onnected
+              <Button
+                onClick={() => act('toggle_port')}
+                selected={port_connected}
+              >
+                {port_connected ? 'C' : 'Disc'}onnected
               </Button>
             </LabeledList.Item>
           </LabeledList>
@@ -98,18 +122,16 @@ export const MechStatPane = (props, context) => {
 };
 
 const GetTempFormat = (temp) => {
-  return toFixed(temp, 1) +"°K\n"+ toFixed(temp-KelvinZeroCelcius, 1) + "°C";
+  return (
+    toFixed(temp, 1) + '°K\n' + toFixed(temp - KelvinZeroCelcius, 1) + '°C'
+  );
 };
 
-
 const EnviromentalAir = (props, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    airtank_pressure,
-    airtank_temp,
-  } = data;
+  const { airtank_pressure, airtank_temp } = data;
   if (airtank_temp === null) {
-    return (<Box>No air tank detected</Box>);
+    return <Box>No air tank detected</Box>;
   } else {
     return (
       <>
@@ -126,9 +148,7 @@ const EnviromentalAir = (props, context) => {
 
 const DNABody = (props, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    dna_lock,
-  } = data;
+  const { dna_lock } = data;
   if (dna_lock === null) {
     return (
       <LabeledList>
@@ -164,22 +184,20 @@ const DNABody = (props, context) => {
 
 const PowerBar = (props, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    power_level,
-    power_max,
-  } = data;
+  const { power_level, power_max } = data;
   if (power_max === null) {
-    return (<Box content={"No Power cell installed!"} />);
+    return <Box content={'No Power cell installed!'} />;
   } else {
     return (
       <ProgressBar
         ranges={{
-          good: [0.75*power_max, Infinity],
-          average: [0.25*power_max, 0.75*power_max],
-          bad: [-Infinity, 0.25*power_max],
+          good: [0.75 * power_max, Infinity],
+          average: [0.25 * power_max, 0.75 * power_max],
+          bad: [-Infinity, 0.25 * power_max],
         }}
         maxValue={power_max}
-        value={power_level} />
+        value={power_level}
+      />
     );
   }
 };
diff --git a/tgui/packages/tgui/interfaces/Mecha/OperatorMode.tsx b/tgui/packages/tgui/interfaces/Mecha/OperatorMode.tsx
index 2bb5a0b164aa..015ce1de6132 100644
--- a/tgui/packages/tgui/interfaces/Mecha/OperatorMode.tsx
+++ b/tgui/packages/tgui/interfaces/Mecha/OperatorMode.tsx
@@ -11,11 +11,7 @@ import { ArmPane } from './ArmPane';
 
 export const OperatorMode = (props, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    left_arm_weapon,
-    right_arm_weapon,
-    mech_view,
-  } = data;
+  const { left_arm_weapon, right_arm_weapon, mech_view } = data;
   return (
     <Stack fill>
       <Stack.Item grow>
@@ -45,7 +41,7 @@ export const OperatorMode = (props, context) => {
               params={{
                 id: mech_view,
                 zoom: 5,
-                type: "map",
+                type: 'map',
               }}
             />
           </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/Mecha/PowerModulesPane.tsx b/tgui/packages/tgui/interfaces/Mecha/PowerModulesPane.tsx
index 8e4181dc6c7a..763c7d81a8e9 100644
--- a/tgui/packages/tgui/interfaces/Mecha/PowerModulesPane.tsx
+++ b/tgui/packages/tgui/interfaces/Mecha/PowerModulesPane.tsx
@@ -5,27 +5,40 @@ import { toFixed } from 'common/math';
 
 export const PowerModulesPane = (props, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    mech_equipment,
-    mineral_material_amount,
-  } = data;
+  const { mech_equipment, mineral_material_amount } = data;
   return (
     <LabeledList>
-      {mech_equipment["power"].map((module, i) => (
-        <LabeledList.Item key={i} label={module.name + (module.snowflake.fuel === null ? "" : ": "+toFixed(module.snowflake.fuel*mineral_material_amount, 0.1)+" cm³")}>
+      {mech_equipment['power'].map((module, i) => (
+        <LabeledList.Item
+          key={i}
+          label={
+            module.name +
+            (module.snowflake.fuel === null
+              ? ''
+              : ': ' +
+                toFixed(module.snowflake.fuel * mineral_material_amount, 0.1) +
+                ' cm³')
+          }
+        >
           <Button
-            content={(module.activated ? "En" : "Dis") + "abled"}
+            content={(module.activated ? 'En' : 'Dis') + 'abled'}
             selected={module.activated}
-            onClick={() => act('equip_act', {
-              ref: module.ref,
-              gear_action: "toggle",
-            })} />
+            onClick={() =>
+              act('equip_act', {
+                ref: module.ref,
+                gear_action: 'toggle',
+              })
+            }
+          />
           <Button
-            content={"Detach"}
-            onClick={() => act('equip_act', {
-              ref: module.ref,
-              gear_action: "detach",
-            })} />
+            content={'Detach'}
+            onClick={() =>
+              act('equip_act', {
+                ref: module.ref,
+                gear_action: 'detach',
+              })
+            }
+          />
         </LabeledList.Item>
       ))}
     </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/Mecha/RadioPane.tsx b/tgui/packages/tgui/interfaces/Mecha/RadioPane.tsx
index 50cfa59b05be..ac9fb530582f 100644
--- a/tgui/packages/tgui/interfaces/Mecha/RadioPane.tsx
+++ b/tgui/packages/tgui/interfaces/Mecha/RadioPane.tsx
@@ -5,25 +5,26 @@ import { toFixed } from 'common/math';
 
 export const RadioPane = (props, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    microphone,
-    speaker,
-    minfreq,
-    maxfreq,
-    frequency,
-  } = data.mech_electronics;
+  const { microphone, speaker, minfreq, maxfreq, frequency } =
+    data.mech_electronics;
   return (
     <LabeledList>
       <LabeledList.Item label="Microphone">
         <Button
-          onClick={() => act('toggle_microphone')} selected={microphone} icon={microphone ? 'microphone' : 'microphone-slash'}>
-          {(microphone ? "En" : "Dis") + "abled"}
+          onClick={() => act('toggle_microphone')}
+          selected={microphone}
+          icon={microphone ? 'microphone' : 'microphone-slash'}
+        >
+          {(microphone ? 'En' : 'Dis') + 'abled'}
         </Button>
       </LabeledList.Item>
       <LabeledList.Item label="Speaker">
         <Button
-          onClick={() => act('toggle_speaker')} selected={speaker} icon={speaker ? 'volume-up' : 'volume-mute'}>
-          {(speaker ? "En" : "Dis") + "abled"}
+          onClick={() => act('toggle_speaker')}
+          selected={speaker}
+          icon={speaker ? 'volume-up' : 'volume-mute'}
+        >
+          {(speaker ? 'En' : 'Dis') + 'abled'}
         </Button>
       </LabeledList.Item>
       <LabeledList.Item label="Frequency">
@@ -32,14 +33,17 @@ export const RadioPane = (props, context) => {
           unit="kHz"
           step={0.2}
           stepPixelSize={6}
-          minValue={minfreq/10}
-          maxValue={maxfreq/10}
-          value={frequency/10}
-          format={value => toFixed(value, 1)}
+          minValue={minfreq / 10}
+          maxValue={maxfreq / 10}
+          value={frequency / 10}
+          format={(value) => toFixed(value, 1)}
           width="80px"
-          onDrag={(e, value) => act('set_frequency', {
-            new_frequency: value,
-          })} />
+          onDrag={(e, value) =>
+            act('set_frequency', {
+              new_frequency: value,
+            })
+          }
+        />
       </LabeledList.Item>
     </LabeledList>
   );
diff --git a/tgui/packages/tgui/interfaces/Mecha/UtilityModulesPane.tsx b/tgui/packages/tgui/interfaces/Mecha/UtilityModulesPane.tsx
index 5c20c5973138..5ddad376e218 100644
--- a/tgui/packages/tgui/interfaces/Mecha/UtilityModulesPane.tsx
+++ b/tgui/packages/tgui/interfaces/Mecha/UtilityModulesPane.tsx
@@ -4,29 +4,34 @@ import { OperatorData, MechaUtility } from './data';
 
 export const UtilityModulesPane = (props, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    mech_equipment,
-  } = data;
+  const { mech_equipment } = data;
   return (
     <LabeledList>
-      {mech_equipment["utility"].map((module, i) => (
+      {mech_equipment['utility'].map((module, i) => (
         <LabeledList.Item key={i} label={module.name}>
-          {module.snowflake.snowflake_id ? (<Snowflake module={module} />
+          {module.snowflake.snowflake_id ? (
+            <Snowflake module={module} />
           ) : (
             <>
               <Button
-                content={(module.activated ? "En" : "Dis") + "abled"}
-                onClick={() => act('equip_act', {
-                  ref: module.ref,
-                  gear_action: "toggle",
-                })}
-                selected={module.activated} />
+                content={(module.activated ? 'En' : 'Dis') + 'abled'}
+                onClick={() =>
+                  act('equip_act', {
+                    ref: module.ref,
+                    gear_action: 'toggle',
+                  })
+                }
+                selected={module.activated}
+              />
               <Button
-                content={"Detach"}
-                onClick={() => act('equip_act', {
-                  ref: module.ref,
-                  gear_action: "detach",
-                })} />
+                content={'Detach'}
+                onClick={() =>
+                  act('equip_act', {
+                    ref: module.ref,
+                    gear_action: 'detach',
+                  })
+                }
+              />
             </>
           )}
         </LabeledList.Item>
@@ -35,15 +40,13 @@ export const UtilityModulesPane = (props, context) => {
   );
 };
 
-const MECHA_SNOWFLAKE_ID_EJECTOR = "ejector_snowflake";
-const MECHA_SNOWFLAKE_ID_EXTINGUISHER = "extinguisher_snowflake";
+const MECHA_SNOWFLAKE_ID_EJECTOR = 'ejector_snowflake';
+const MECHA_SNOWFLAKE_ID_EXTINGUISHER = 'extinguisher_snowflake';
 
 // Handles all the snowflake buttons and whatever
-const Snowflake = (props: {module: MechaUtility}, context) => {
-  const {
-    snowflake,
-  } = props.module;
-  switch (snowflake["snowflake_id"]) {
+const Snowflake = (props: { module: MechaUtility }, context) => {
+  const { snowflake } = props.module;
+  switch (snowflake['snowflake_id']) {
     case MECHA_SNOWFLAKE_ID_EJECTOR:
       return <SnowflakeEjector module={props.module} />;
     case MECHA_SNOWFLAKE_ID_EXTINGUISHER:
@@ -53,22 +56,23 @@ const Snowflake = (props: {module: MechaUtility}, context) => {
   }
 };
 
-const SnowflakeEjector = (props: {module: MechaUtility}, context) => {
+const SnowflakeEjector = (props: { module: MechaUtility }, context) => {
   const { act, data } = useBackend<OperatorData>(context);
-  const {
-    cargo,
-  } = props.module.snowflake;
+  const { cargo } = props.module.snowflake;
   return (
     <LabeledList>
       {cargo.map((item, i) => (
         <LabeledList.Item key={i} label={item.name}>
           <Button
-            onClick={() => act('equip_act', {
-              ref: props.module.ref,
-              cargoref: item.ref,
-              gear_action: "eject",
-            })}>
-            {"Eject"}
+            onClick={() =>
+              act('equip_act', {
+                ref: props.module.ref,
+                cargoref: item.ref,
+                gear_action: 'eject',
+              })
+            }
+          >
+            {'Eject'}
           </Button>
         </LabeledList.Item>
       ))}
@@ -76,49 +80,63 @@ const SnowflakeEjector = (props: {module: MechaUtility}, context) => {
   );
 };
 
-const SnowflakeExtinguisher = (props: {module: MechaUtility}, context) => {
+const SnowflakeExtinguisher = (props: { module: MechaUtility }, context) => {
   const { act, data } = useBackend<OperatorData>(context);
   return (
     <>
       <ProgressBar
         value={props.module.snowflake.reagents}
         minValue={0}
-        maxValue={props.module.snowflake.total_reagents}>
+        maxValue={props.module.snowflake.total_reagents}
+      >
         {props.module.snowflake.reagents}
       </ProgressBar>
       <Button
-        tooltip={"ACTIVATE"}
-        color={"red"}
+        tooltip={'ACTIVATE'}
+        color={'red'}
         disabled={
           props.module.snowflake.reagents < props.module.snowflake.minimum_requ
-            ? 1 : 0
+            ? 1
+            : 0
         }
-        icon={"fire-extinguisher"}
-        onClick={() => act('equip_act', {
-          ref: props.module.ref,
-          gear_action: "activate",
-        })} />
+        icon={'fire-extinguisher'}
+        onClick={() =>
+          act('equip_act', {
+            ref: props.module.ref,
+            gear_action: 'activate',
+          })
+        }
+      />
       <Button
-        tooltip={"REFILL"}
-        icon={"fill"}
-        onClick={() => act('equip_act', {
-          ref: props.module.ref,
-          gear_action: "refill",
-        })} />
+        tooltip={'REFILL'}
+        icon={'fill'}
+        onClick={() =>
+          act('equip_act', {
+            ref: props.module.ref,
+            gear_action: 'refill',
+          })
+        }
+      />
       <Button
-        tooltip={"REPAIR"}
-        icon={"wrench"}
-        onClick={() => act('equip_act', {
-          ref: props.module.ref,
-          gear_action: "repair",
-        })} />
+        tooltip={'REPAIR'}
+        icon={'wrench'}
+        onClick={() =>
+          act('equip_act', {
+            ref: props.module.ref,
+            gear_action: 'repair',
+          })
+        }
+      />
       <Button
-        tooltip={"DETACH"}
-        icon={"arrow-down"}
-        onClick={() => act('equip_act', {
-          ref: props.module.ref,
-          gear_action: "detach",
-        })} />
+        tooltip={'DETACH'}
+        icon={'arrow-down'}
+        onClick={() =>
+          act('equip_act', {
+            ref: props.module.ref,
+            gear_action: 'detach',
+          })
+        }
+      />
     </>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/Mecha/data.ts b/tgui/packages/tgui/interfaces/Mecha/data.ts
index fb47ded5013c..198117f1ccf2 100644
--- a/tgui/packages/tgui/interfaces/Mecha/data.ts
+++ b/tgui/packages/tgui/interfaces/Mecha/data.ts
@@ -1,23 +1,23 @@
 export const KelvinZeroCelcius = 273.15;
 
 export const InternalDamageToDamagedDesc = {
-  "MECHA_INT_FIRE": "Internal fire detected",
-  "MECHA_INT_TEMP_CONTROL": "Temperature control inactive",
-  "MECHA_INT_TANK_BREACH": "Air tank breach detected",
-  "MECHA_INT_CONTROL_LOST": "Control module damaged",
+  MECHA_INT_FIRE: 'Internal fire detected',
+  MECHA_INT_TEMP_CONTROL: 'Temperature control inactive',
+  MECHA_INT_TANK_BREACH: 'Air tank breach detected',
+  MECHA_INT_CONTROL_LOST: 'Control module damaged',
 };
 
 export const InternalDamageToNormalDesc = {
-  "MECHA_INT_FIRE": "No internal fires detected",
-  "MECHA_INT_TEMP_CONTROL": "Temperature control active",
-  "MECHA_INT_TANK_BREACH": "Air tank intact",
-  "MECHA_INT_CONTROL_LOST": "Control module active",
+  MECHA_INT_FIRE: 'No internal fires detected',
+  MECHA_INT_TEMP_CONTROL: 'Temperature control active',
+  MECHA_INT_TANK_BREACH: 'Air tank intact',
+  MECHA_INT_CONTROL_LOST: 'Control module active',
 };
 
 export type AccessData = {
   name: string;
   number: number;
-}
+};
 
 type MechElectronics = {
   microphone: boolean;
@@ -25,7 +25,7 @@ type MechElectronics = {
   frequency: number;
   minfreq: number;
   maxfreq: number;
-}
+};
 
 export type MechWeapon = {
   name: string;
@@ -43,7 +43,7 @@ export type MechWeapon = {
   ammo_type: string | null;
   // first entry is always "snowflake_id"=snowflake_id if snowflake
   snowflake: any;
-}
+};
 
 export type MainData = {
   isoperator: boolean;
@@ -90,4 +90,4 @@ export type MechaUtility = {
   name: string;
   ref: string;
   snowflake: any;
-}
+};
diff --git a/tgui/packages/tgui/interfaces/Mecha/index.tsx b/tgui/packages/tgui/interfaces/Mecha/index.tsx
index fdd8e9c9f118..52ccdd3b776c 100644
--- a/tgui/packages/tgui/interfaces/Mecha/index.tsx
+++ b/tgui/packages/tgui/interfaces/Mecha/index.tsx
@@ -8,7 +8,7 @@ export const Mecha = (props, context) => {
   const { data } = useBackend<MainData>(context);
   if (data.isoperator) {
     return (
-      <Window theme={"ntos"}>
+      <Window theme={'ntos'}>
         <Window.Content>
           <OperatorMode />
         </Window.Content>
@@ -16,7 +16,7 @@ export const Mecha = (props, context) => {
     );
   }
   return (
-    <Window theme={"retro"} width={640} height={670}>
+    <Window theme={'retro'} width={640} height={670}>
       <Window.Content>
         <MaintMode />
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/MechpadConsole.js b/tgui/packages/tgui/interfaces/MechpadConsole.js
index 3beb6504a1f5..93d5d1732598 100644
--- a/tgui/packages/tgui/interfaces/MechpadConsole.js
+++ b/tgui/packages/tgui/interfaces/MechpadConsole.js
@@ -1,43 +1,54 @@
 import { useBackend } from '../backend';
-import { Box, Button, Divider, Flex, Input, NoticeBox, Section } from '../components';
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Input,
+  NoticeBox,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const MechpadControl = (props, context) => {
   const { topLevel } = props;
   const { act, data } = useBackend(context);
-  const {
-    pad_name,
-    connected_mechpad,
-  } = data;
+  const { pad_name, connected_mechpad } = data;
   return (
     <Section
-      title={(
+      title={
         <Input
           value={pad_name}
           width="170px"
-          onChange={(e, value) => act('rename', {
-            name: value,
-          })} />
-      )}
+          onChange={(e, value) =>
+            act('rename', {
+              name: value,
+            })
+          }
+        />
+      }
       level={topLevel ? 1 : 2}
-      buttons={(
+      buttons={
         <Button
           icon="times"
           content="Remove"
           color="bad"
-          onClick={() => act('remove')} />
-      )}>
-      {!connected_mechpad && (
+          onClick={() => act('remove')}
+        />
+      }
+    >
+      {(!connected_mechpad && (
         <Box color="bad" textAlign="center">
           No Pad Connected.
         </Box>
-      ) || (
+      )) || (
         <Button
           fluid
           icon="upload"
           content="Launch"
           textAlign="center"
-          onClick={() => act('launch')} />
+          onClick={() => act('launch')}
+        />
       )}
     </Section>
   );
@@ -45,24 +56,17 @@ export const MechpadControl = (props, context) => {
 
 export const MechpadConsole = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    mechpads = [],
-    selected_id,
-  } = data;
+  const { mechpads = [], selected_id } = data;
   return (
-    <Window
-      width={475}
-      height={130}>
+    <Window width={475} height={130}>
       <Window.Content>
-        {mechpads.length === 0 && (
-          <NoticeBox>
-            No Pads Connected
-          </NoticeBox>
-        ) || (
+        {(mechpads.length === 0 && (
+          <NoticeBox>No Pads Connected</NoticeBox>
+        )) || (
           <Section>
             <Flex minHeight="70px">
               <Flex.Item width="140px" minHeight="70px">
-                {mechpads.map(mechpad => (
+                {mechpads.map((mechpad) => (
                   <Button
                     fluid
                     ellipsis
@@ -70,21 +74,20 @@ export const MechpadConsole = (props, context) => {
                     content={mechpad.name}
                     selected={selected_id === mechpad.id}
                     color="transparent"
-                    onClick={() => act('select_pad', {
-                      id: mechpad.id,
-                    })} />
+                    onClick={() =>
+                      act('select_pad', {
+                        id: mechpad.id,
+                      })
+                    }
+                  />
                 ))}
               </Flex.Item>
               <Flex.Item minHeight="100%">
                 <Divider vertical />
               </Flex.Item>
               <Flex.Item grow={1} basis={0} minHeight="100%">
-                {selected_id && (
-                  <MechpadControl />
-                ) || (
-                  <Box>
-                    Please select a pad
-                  </Box>
+                {(selected_id && <MechpadControl />) || (
+                  <Box>Please select a pad</Box>
                 )}
               </Flex.Item>
             </Flex>
diff --git a/tgui/packages/tgui/interfaces/MedicalKiosk.js b/tgui/packages/tgui/interfaces/MedicalKiosk.js
index 6d7dd6c4aceb..6ebaeda8abe5 100644
--- a/tgui/packages/tgui/interfaces/MedicalKiosk.js
+++ b/tgui/packages/tgui/interfaces/MedicalKiosk.js
@@ -1,21 +1,25 @@
 import { multiline } from 'common/string';
 import { useBackend, useSharedState } from '../backend';
-import { AnimatedNumber, Box, Button, Flex, Icon, LabeledList, ProgressBar, Section, Stack } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  Flex,
+  Icon,
+  LabeledList,
+  ProgressBar,
+  Section,
+  Stack,
+} from '../components';
 import { Window } from '../layouts';
 
 export const MedicalKiosk = (props, context) => {
   const { act, data } = useBackend(context);
   const [scanIndex] = useSharedState(context, 'scanIndex');
-  const {
-    active_status_1,
-    active_status_2,
-    active_status_3,
-    active_status_4,
-  } = data;
+  const { active_status_1, active_status_2, active_status_3, active_status_4 } =
+    data;
   return (
-    <Window
-      width={575}
-      height={420}>
+    <Window width={575} height={420}>
       <Window.Content scrollable>
         <Flex mb={1}>
           <Flex.Item mr={1}>
@@ -26,7 +30,8 @@ export const MedicalKiosk = (props, context) => {
                 name="General Health Scan"
                 description={multiline`
                   Reads back exact values of your general health scan.
-                `} />
+                `}
+              />
               <MedicalKioskScanButton
                 index={2}
                 icon="heartbeat"
@@ -34,14 +39,16 @@ export const MedicalKiosk = (props, context) => {
                 description={multiline`
                   Provides information based on various non-obvious symptoms,
                   like blood levels or disease status.
-                `} />
+                `}
+              />
               <MedicalKioskScanButton
                 index={3}
                 icon="radiation-alt"
                 name="Neurological/Radiological Scan"
                 description={multiline`
                   Provides information about brain trauma and radiation.
-                `} />
+                `}
+              />
               <MedicalKioskScanButton
                 index={4}
                 icon="mortar-pestle"
@@ -49,37 +56,25 @@ export const MedicalKiosk = (props, context) => {
                 description={multiline`
                   Provides a list of consumed chemicals, as well as potential
                   side effects.
-                `} />
+                `}
+              />
             </Section>
           </Flex.Item>
           <Flex.Item grow={1} basis={0}>
             <MedicalKioskInstructions />
           </Flex.Item>
         </Flex>
-        {!!active_status_1 && scanIndex === 1 && (
-          <MedicalKioskScanResults1 />
-        )}
-        {!!active_status_2 && scanIndex === 2 && (
-          <MedicalKioskScanResults2 />
-        )}
-        {!!active_status_3 && scanIndex === 3 && (
-          <MedicalKioskScanResults3 />
-        )}
-        {!!active_status_4 && scanIndex === 4 && (
-          <MedicalKioskScanResults4 />
-        )}
+        {!!active_status_1 && scanIndex === 1 && <MedicalKioskScanResults1 />}
+        {!!active_status_2 && scanIndex === 2 && <MedicalKioskScanResults2 />}
+        {!!active_status_3 && scanIndex === 3 && <MedicalKioskScanResults3 />}
+        {!!active_status_4 && scanIndex === 4 && <MedicalKioskScanResults4 />}
       </Window.Content>
     </Window>
   );
 };
 
 const MedicalKioskScanButton = (props, context) => {
-  const {
-    index,
-    name,
-    description,
-    icon,
-  } = props;
+  const { index, name, description, icon } = props;
   const { act, data } = useBackend(context);
   const [scanIndex, setScanIndex] = useSharedState(context, 'scanIndex');
   const paid = data[`active_status_${index}`];
@@ -88,7 +83,8 @@ const MedicalKioskScanButton = (props, context) => {
       <Stack.Item width="16px" textAlign="center">
         <Icon
           name={paid ? 'check' : 'dollar-sign'}
-          color={paid ? 'green' : 'grey'} />
+          color={paid ? 'green' : 'grey'}
+        />
       </Stack.Item>
       <Stack.Item grow basis="content">
         <Button
@@ -103,7 +99,8 @@ const MedicalKioskScanButton = (props, context) => {
               act(`beginScan_${index}`);
             }
             setScanIndex(index);
-          }} />
+          }}
+        />
       </Stack.Item>
     </Stack>
   );
@@ -111,15 +108,12 @@ const MedicalKioskScanButton = (props, context) => {
 
 const MedicalKioskInstructions = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    kiosk_cost,
-    patient_name,
-  } = data;
+  const { kiosk_cost, patient_name } = data;
   return (
     <Section minHeight="100%">
       <Box italic>
-        Greetings Valued Employee! Please select a desired automatic
-        health check procedure. Diagnosis costs <b>{kiosk_cost} credits.</b>
+        Greetings Valued Employee! Please select a desired automatic health
+        check procedure. Diagnosis costs <b>{kiosk_cost} credits.</b>
       </Box>
       <Box mt={1}>
         <Box inline color="label" mr={1}>
@@ -135,7 +129,8 @@ const MedicalKioskInstructions = (props, context) => {
         icon="sync"
         color="average"
         onClick={() => act('clearTarget')}
-        content="Reset Scanner" />
+        content="Reset Scanner"
+      />
     </Section>
   );
 };
@@ -152,43 +147,29 @@ const MedicalKioskScanResults1 = (props, context) => {
   return (
     <Section title="Patient Health">
       <LabeledList>
-        <LabeledList.Item
-          label="Total Health">
-          <ProgressBar
-            value={patient_health / 100}>
+        <LabeledList.Item label="Total Health">
+          <ProgressBar value={patient_health / 100}>
             <AnimatedNumber value={patient_health} />%
           </ProgressBar>
         </LabeledList.Item>
         <LabeledList.Divider />
-        <LabeledList.Item
-          label="Brute Damage">
-          <ProgressBar
-            value={brute_health / 100}
-            color="bad">
+        <LabeledList.Item label="Brute Damage">
+          <ProgressBar value={brute_health / 100} color="bad">
             <AnimatedNumber value={brute_health} />
           </ProgressBar>
         </LabeledList.Item>
-        <LabeledList.Item
-          label="Burn Damage">
-          <ProgressBar
-            value={burn_health / 100}
-            color="bad">
+        <LabeledList.Item label="Burn Damage">
+          <ProgressBar value={burn_health / 100} color="bad">
             <AnimatedNumber value={burn_health} />
           </ProgressBar>
         </LabeledList.Item>
-        <LabeledList.Item
-          label="Oxygen Damage">
-          <ProgressBar
-            value={suffocation_health / 100}
-            color="bad">
+        <LabeledList.Item label="Oxygen Damage">
+          <ProgressBar value={suffocation_health / 100} color="bad">
             <AnimatedNumber value={suffocation_health} />
           </ProgressBar>
         </LabeledList.Item>
-        <LabeledList.Item
-          label="Toxin Damage">
-          <ProgressBar
-            value={toxin_health / 100}
-            color="bad">
+        <LabeledList.Item label="Toxin Damage">
+          <ProgressBar value={toxin_health / 100} color="bad">
             <AnimatedNumber value={toxin_health} />
           </ProgressBar>
         </LabeledList.Item>
@@ -210,34 +191,26 @@ const MedicalKioskScanResults2 = (props, context) => {
   return (
     <Section title="Symptom Based Checkup">
       <LabeledList>
-        <LabeledList.Item
-          label="Patient Status"
-          color="good">
+        <LabeledList.Item label="Patient Status" color="good">
           {patient_status}
         </LabeledList.Item>
         <LabeledList.Divider />
-        <LabeledList.Item
-          label="Disease Status">
+        <LabeledList.Item label="Disease Status">
           {patient_illness}
         </LabeledList.Item>
-        <LabeledList.Item
-          label="Disease information">
+        <LabeledList.Item label="Disease information">
           {illness_info}
         </LabeledList.Item>
         <LabeledList.Divider />
-        <LabeledList.Item
-          label="Blood Levels">
-          <ProgressBar
-            value={blood_levels / 100}
-            color="bad">
+        <LabeledList.Item label="Blood Levels">
+          <ProgressBar value={blood_levels / 100} color="bad">
             <AnimatedNumber value={blood_levels} />
           </ProgressBar>
           <Box mt={1} color="label">
             {bleed_status}
           </Box>
         </LabeledList.Item>
-        <LabeledList.Item
-          label="Blood Information">
+        <LabeledList.Item label="Blood Information">
           {blood_status}
         </LabeledList.Item>
       </LabeledList>
@@ -247,39 +220,25 @@ const MedicalKioskScanResults2 = (props, context) => {
 
 const MedicalKioskScanResults3 = (props, context) => {
   const { data } = useBackend(context);
-  const {
-    clone_health,
-    brain_damage,
-    brain_health,
-    trauma_status,
-  } = data;
+  const { clone_health, brain_damage, brain_health, trauma_status } = data;
   return (
     <Section title="Patient Neurological and Radiological Health">
       <LabeledList>
-        <LabeledList.Item
-          label="Cellular Damage">
-          <ProgressBar
-            value={clone_health / 100}
-            color="good">
+        <LabeledList.Item label="Cellular Damage">
+          <ProgressBar value={clone_health / 100} color="good">
             <AnimatedNumber value={clone_health} />
           </ProgressBar>
         </LabeledList.Item>
         <LabeledList.Divider />
-        <LabeledList.Item
-          label="Brain Damage">
-          <ProgressBar
-            value={brain_damage / 100}
-            color="good">
+        <LabeledList.Item label="Brain Damage">
+          <ProgressBar value={brain_damage / 100} color="good">
             <AnimatedNumber value={brain_damage} />
           </ProgressBar>
         </LabeledList.Item>
-        <LabeledList.Item
-          label="Brain Status"
-          color="health-0">
+        <LabeledList.Item label="Brain Status" color="health-0">
           {brain_health}
         </LabeledList.Item>
-        <LabeledList.Item
-          label="Brain Trauma Status">
+        <LabeledList.Item label="Brain Trauma Status">
           {trauma_status}
         </LabeledList.Item>
       </LabeledList>
@@ -298,51 +257,33 @@ const MedicalKioskScanResults4 = (props, context) => {
   return (
     <Section title="Chemical and Psychoactive Analysis">
       <LabeledList>
-        <LabeledList.Item
-          label="Chemical Contents">
+        <LabeledList.Item label="Chemical Contents">
           {chemical_list.length === 0 && (
-            <Box color="average">
-              No reagents detected.
-            </Box>
+            <Box color="average">No reagents detected.</Box>
           )}
-          {chemical_list.map(chem => (
-            <Box
-              key={chem.id}
-              color="good">
+          {chemical_list.map((chem) => (
+            <Box key={chem.id} color="good">
               {chem.volume} units of {chem.name}
             </Box>
           ))}
         </LabeledList.Item>
-        <LabeledList.Item
-          label="Overdose Status"
-          color="bad">
+        <LabeledList.Item label="Overdose Status" color="bad">
           {overdose_list.length === 0 && (
-            <Box color="good">
-              Patient is not overdosing.
-            </Box>
+            <Box color="good">Patient is not overdosing.</Box>
           )}
-          {overdose_list.map(chem => (
-            <Box key={chem.id}>
-              Overdosing on {chem.name}
-            </Box>
+          {overdose_list.map((chem) => (
+            <Box key={chem.id}>Overdosing on {chem.name}</Box>
           ))}
         </LabeledList.Item>
-        <LabeledList.Item
-          label="Addiction Status"
-          color="bad">
+        <LabeledList.Item label="Addiction Status" color="bad">
           {addict_list.length === 0 && (
-            <Box color="good">
-              Patient has no addictions.
-            </Box>
+            <Box color="good">Patient has no addictions.</Box>
           )}
-          {addict_list.map(chem => (
-            <Box key={chem.id}>
-              Addicted to {chem.name}
-            </Box>
+          {addict_list.map((chem) => (
+            <Box key={chem.id}>Addicted to {chem.name}</Box>
           ))}
         </LabeledList.Item>
-        <LabeledList.Item
-          label="Psychoactive Status">
+        <LabeledList.Item label="Psychoactive Status">
           {hallucinating_status}
         </LabeledList.Item>
       </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/MemoryPanel.js b/tgui/packages/tgui/interfaces/MemoryPanel.js
index 8c5190f0d131..63baeab70dbf 100644
--- a/tgui/packages/tgui/interfaces/MemoryPanel.js
+++ b/tgui/packages/tgui/interfaces/MemoryPanel.js
@@ -12,9 +12,7 @@ const STORY_VALUE_AMAZING = 4;
 
 const MemoryQuality = (props, context) => {
   const { act } = useBackend(context);
-  const {
-    quality,
-  } = props;
+  const { quality } = props;
 
   if (quality === STORY_VALUE_SHIT) {
     return (
@@ -24,7 +22,8 @@ const MemoryQuality = (props, context) => {
         tooltip={multiline`
           This memory is not interesting at all! It does not make for
           good art and is unlikely to pass to future generations.
-        `} />
+        `}
+      />
     );
   }
   if (quality === STORY_VALUE_NONE) {
@@ -36,7 +35,8 @@ const MemoryQuality = (props, context) => {
         tooltip={multiline`
           This memory pretty bland. It would make for some pretty
           mediocre art and is not likely to pass to future generations.
-  `} />
+  `}
+      />
     );
   }
   if (quality === STORY_VALUE_MEH) {
@@ -44,13 +44,15 @@ const MemoryQuality = (props, context) => {
       <Button
         icon="star"
         style={{
-          "background": "linear-gradient(to right, #964B30, #D68B60, #B66B30, #D68B60, #964B30);",
+          background:
+            'linear-gradient(to right, #964B30, #D68B60, #B66B30, #D68B60, #964B30);',
         }}
         tooltipPosition="right"
         tooltip={multiline`
           This memory is not super interesting. It could turn into
           an okay story but don't bet on it.
-    `} />
+    `}
+      />
     );
   }
   if (quality === STORY_VALUE_OKAY) {
@@ -58,13 +60,15 @@ const MemoryQuality = (props, context) => {
       <Button
         icon="star"
         style={{
-          "background": "linear-gradient(to right, #636363, #a3a3a3, #6e6e6e, #a3a3a3, #636363);",
+          background:
+            'linear-gradient(to right, #636363, #a3a3a3, #6e6e6e, #a3a3a3, #636363);',
         }}
         tooltipPosition="right"
         tooltip={multiline`
           This memory is pretty okay! Some good stories could be told
           from this and it might even come back in future generations.
-      `} />
+      `}
+      />
     );
   }
   if (quality === STORY_VALUE_AMAZING) {
@@ -72,26 +76,30 @@ const MemoryQuality = (props, context) => {
       <Button
         icon="star"
         style={{
-          "background": "linear-gradient(to right, #AA771C, #BCB68A, #B38728, #BCB68A, #AA771C);",
+          background:
+            'linear-gradient(to right, #AA771C, #BCB68A, #B38728, #BCB68A, #AA771C);',
         }}
         tooltipPosition="right"
         tooltip={multiline`
           This memory is great! You could tell a great story from it,
           and it would have a good chanced pass to future generations!
-      `} />
+      `}
+      />
     );
   }
   return (
     <Button
       icon="crown"
       style={{
-        "background": "linear-gradient(to right, #56A5B3, #75D4E2, #56A5B3, #75D4E2, #56A5B3)",
+        background:
+          'linear-gradient(to right, #56A5B3, #75D4E2, #56A5B3, #75D4E2, #56A5B3)',
       }}
       tooltipPosition="right"
       tooltip={multiline`
         This memory is the stuff of legends! It would make for
         legendary art and is likely to pass to future generations.
-      `} />
+      `}
+    />
   );
 };
 
@@ -99,15 +107,12 @@ export const MemoryPanel = (props, context) => {
   const { act, data } = useBackend(context);
   const memories = data.memories || [];
   return (
-    <Window
-      title="Memory Panel"
-      width={400}
-      height={500}>
+    <Window title="Memory Panel" width={400} height={500}>
       <Window.Content>
         <Section
           maxHeight="32px"
           title="Memories"
-          buttons={(
+          buttons={
             <Button
               color="transparent"
               tooltip={multiline`
@@ -115,15 +120,17 @@ export const MemoryPanel = (props, context) => {
                 and you can use them in art!
               `}
               tooltipPosition="bottom-start"
-              icon="info" />
-          )} />
-        {!memories && (
+              icon="info"
+            />
+          }
+        />
+        {(!memories && (
           <Dimmer fontSize="28px" align="center">
             You have no memories!
           </Dimmer>
-        ) || (
+        )) || (
           <Stack vertical>
-            {memories.map(memory => (
+            {memories.map((memory) => (
               <Stack.Item key={memory.name}>
                 <Section>
                   <MemoryQuality quality={memory.quality} /> {memory.name}
diff --git a/tgui/packages/tgui/interfaces/Microscope.js b/tgui/packages/tgui/interfaces/Microscope.js
index 81a1fc9f208c..dca6fda0806b 100644
--- a/tgui/packages/tgui/interfaces/Microscope.js
+++ b/tgui/packages/tgui/interfaces/Microscope.js
@@ -5,11 +5,7 @@ import { Window } from '../layouts';
 export const Microscope = (props, context) => {
   const { act, data } = useBackend(context);
   const [tab, setTab] = useSharedState(context, 'tab', 1);
-  const {
-    has_dish,
-    cell_lines = [],
-    viruses = [],
-  } = data;
+  const { has_dish, cell_lines = [], viruses = [] } = data;
   return (
     <Window>
       <Window.Content scrollable>
@@ -20,7 +16,8 @@ export const Microscope = (props, context) => {
                 icon="eject"
                 content="Eject"
                 disabled={!has_dish}
-                onClick={() => act('eject_petridish')} />
+                onClick={() => act('eject_petridish')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
@@ -29,23 +26,21 @@ export const Microscope = (props, context) => {
             icon="microscope"
             lineHeight="23px"
             selected={tab === 1}
-            onClick={() => setTab(1)}>
+            onClick={() => setTab(1)}
+          >
             Micro-Organisms ({cell_lines.length})
           </Tabs.Tab>
           <Tabs.Tab
             icon="microscope"
             lineHeight="23px"
             selected={tab === 2}
-            onClick={() => setTab(2)}>
+            onClick={() => setTab(2)}
+          >
             Viruses ({viruses.length})
           </Tabs.Tab>
         </Tabs>
-        {tab === 1 && (
-          <Organisms cell_lines={cell_lines} />
-        )}
-        {tab === 2 && (
-          <Viruses viruses={viruses} />
-        )}
+        {tab === 1 && <Organisms cell_lines={cell_lines} />}
+        {tab === 2 && <Viruses viruses={viruses} />}
       </Window.Content>
     </Window>
   );
@@ -55,17 +50,11 @@ const Organisms = (props, context) => {
   const { cell_lines } = props;
   const { act, data } = useBackend(context);
   if (!cell_lines.length) {
-    return (
-      <NoticeBox>
-        No micro-organisms found
-      </NoticeBox>
-    );
+    return <NoticeBox>No micro-organisms found</NoticeBox>;
   }
-  return cell_lines.map(cell_line => {
+  return cell_lines.map((cell_line) => {
     return (
-      <Section
-        key={cell_line.desc}
-        title={cell_line.desc}>
+      <Section key={cell_line.desc} title={cell_line.desc}>
         <LabeledList>
           <LabeledList.Item label="Growth Rate">
             {cell_line.growth_rate}
@@ -92,17 +81,9 @@ const Viruses = (props, context) => {
   const { viruses } = props;
   const { act } = useBackend(context);
   if (!viruses.length) {
-    return (
-      <NoticeBox>
-        No viruses found
-      </NoticeBox>
-    );
+    return <NoticeBox>No viruses found</NoticeBox>;
   }
-  return viruses.map(virus => {
-    return (
-      <Section
-        key={virus.desc}
-        title={virus.desc} />
-    );
+  return viruses.map((virus) => {
+    return <Section key={virus.desc} title={virus.desc} />;
   });
 };
diff --git a/tgui/packages/tgui/interfaces/MinigamesMenu.js b/tgui/packages/tgui/interfaces/MinigamesMenu.js
index 4c8bb9ebd7e0..35aea25d4471 100644
--- a/tgui/packages/tgui/interfaces/MinigamesMenu.js
+++ b/tgui/packages/tgui/interfaces/MinigamesMenu.js
@@ -1,14 +1,11 @@
 import { useBackend } from '../backend';
 import { Button, Section, Stack } from '../components';
 import { Window } from '../layouts';
- 
+
 export const MinigamesMenu = (props, context) => {
   const { act } = useBackend(context);
   return (
-    <Window
-      title="Minigames Menu"
-      width={450}
-      height={200}>
+    <Window title="Minigames Menu" width={450} height={200}>
       <Window.Content>
         <Section title="Select Minigame" textAlign="center">
           <Stack>
@@ -32,7 +29,7 @@ export const MinigamesMenu = (props, context) => {
                 onClick={() => act('mafia')}
               />
             </Stack.Item>
-          </Stack>  
+          </Stack>
         </Section>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/MiningVendor.js b/tgui/packages/tgui/interfaces/MiningVendor.js
index 4afa503fc4b0..d3721437fe4a 100644
--- a/tgui/packages/tgui/interfaces/MiningVendor.js
+++ b/tgui/packages/tgui/interfaces/MiningVendor.js
@@ -5,33 +5,29 @@ import { Window } from '../layouts';
 
 export const MiningVendor = (props, context) => {
   const { act, data } = useBackend(context);
-  let inventory = [
-    ...data.product_records,
-  ];
+  let inventory = [...data.product_records];
   return (
-    <Window
-      width={425}
-      height={600}>
+    <Window width={425} height={600}>
       <Window.Content scrollable>
         <Section title="User">
-          {data.user && (
+          {(data.user && (
             <Box>
-              Welcome, <b>{data.user.name || "Unknown"}</b>,
-              {' '}
-              <b>{data.user.job || "Unemployed"}</b>!
+              Welcome, <b>{data.user.name || 'Unknown'}</b>,{' '}
+              <b>{data.user.job || 'Unemployed'}</b>!
               <br />
               Your balance is <b>{data.user.points} mining points</b>.
             </Box>
-          ) || (
+          )) || (
             <Box color="light-gray">
-              No registered ID card!<br />
+              No registered ID card!
+              <br />
               Please contact your local HoP!
             </Box>
           )}
         </Section>
         <Section title="Equipment">
           <Table>
-            {inventory.map((product => {
+            {inventory.map((product) => {
               return (
                 <Table.Row key={product.name}>
                   <Table.Cell>
@@ -39,8 +35,9 @@ export const MiningVendor = (props, context) => {
                       className={classes(['vending32x32', product.path])}
                       style={{
                         'vertical-align': 'middle',
-                      }} />
-                    {' '}<b>{product.name}</b>
+                      }}
+                    />{' '}
+                    <b>{product.name}</b>
                   </Table.Cell>
                   <Table.Cell>
                     <Button
@@ -48,16 +45,18 @@ export const MiningVendor = (props, context) => {
                         'min-width': '95px',
                         'text-align': 'center',
                       }}
-                      disabled={!data.user
-                        || product.price > data.user.points}
+                      disabled={!data.user || product.price > data.user.points}
                       content={product.price + ' points'}
-                      onClick={() => act('purchase', {
-                        'ref': product.ref,
-                      })} />
+                      onClick={() =>
+                        act('purchase', {
+                          ref: product.ref,
+                        })
+                      }
+                    />
                   </Table.Cell>
                 </Table.Row>
               );
-            }))}
+            })}
           </Table>
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/Mule.js b/tgui/packages/tgui/interfaces/Mule.js
index 7633249a1d04..e51ade22f40d 100644
--- a/tgui/packages/tgui/interfaces/Mule.js
+++ b/tgui/packages/tgui/interfaces/Mule.js
@@ -1,5 +1,13 @@
 import { useBackend } from '../backend';
-import { Button, Dropdown, Flex, Input, LabeledList, ProgressBar, Section } from '../components';
+import {
+  Button,
+  Dropdown,
+  Flex,
+  Input,
+  LabeledList,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
 
@@ -23,24 +31,27 @@ export const Mule = (props, context) => {
   } = data;
   const locked = data.locked && !data.siliconUser;
   return (
-    <Window
-      width={350}
-      height={425}>
+    <Window width={350} height={425}>
       <Window.Content>
         <InterfaceLockNoticeBox />
         <Section
           title="Status"
           minHeight="110px"
-          buttons={!locked && (
-            <Button
-              icon={on ? 'power-off' : 'times'}
-              content={on ? 'On' : 'Off'}
-              selected={on}
-              onClick={() => act('on')} />
-          )}>
+          buttons={
+            !locked && (
+              <Button
+                icon={on ? 'power-off' : 'times'}
+                content={on ? 'On' : 'Off'}
+                selected={on}
+                onClick={() => act('on')}
+              />
+            )
+          }
+        >
           <ProgressBar
-            value={cell ? (cellPercent / 100) : 0}
-            color={cell ? 'good' : 'bad'} />
+            value={cell ? cellPercent / 100 : 0}
+            color={cell ? 'good' : 'bad'}
+          />
           <Flex mt={1}>
             <Flex.Item grow={1} basis={0}>
               <LabeledList>
@@ -53,7 +64,8 @@ export const Mule = (props, context) => {
               <LabeledList>
                 <LabeledList.Item
                   label="Load"
-                  color={load ? 'good' : 'average'}>
+                  color={load ? 'good' : 'average'}
+                >
                   {load || 'None'}
                 </LabeledList.Item>
               </LabeledList>
@@ -63,27 +75,31 @@ export const Mule = (props, context) => {
         {!locked && (
           <Section
             title="Controls"
-            buttons={(
+            buttons={
               <>
                 {!!load && (
                   <Button
                     icon="eject"
                     content="Unload"
-                    onClick={() => act('unload')} />
+                    onClick={() => act('unload')}
+                  />
                 )}
                 {!!haspai && (
                   <Button
                     icon="eject"
                     content="Eject PAI"
-                    onClick={() => act('ejectpai')} />
+                    onClick={() => act('ejectpai')}
+                  />
                 )}
               </>
-            )}>
+            }
+          >
             <LabeledList>
               <LabeledList.Item label="ID">
                 <Input
                   value={id}
-                  onChange={(e, value) => act('setid', { value })} />
+                  onChange={(e, value) => act('setid', { value })}
+                />
               </LabeledList.Item>
               <LabeledList.Item label="Destination">
                 <Dropdown
@@ -91,15 +107,14 @@ export const Mule = (props, context) => {
                   selected={destination || 'None'}
                   options={destinations}
                   width="150px"
-                  onSelected={value => act('destination', { value })} />
+                  onSelected={(value) => act('destination', { value })}
+                />
                 <Button
                   icon="stop"
                   content="Stop"
-                  onClick={() => act('stop')} />
-                <Button
-                  icon="play"
-                  content="Go"
-                  onClick={() => act('go')} />
+                  onClick={() => act('stop')}
+                />
+                <Button icon="play" content="Go" onClick={() => act('go')} />
               </LabeledList.Item>
               <LabeledList.Item label="Home">
                 <Dropdown
@@ -107,27 +122,32 @@ export const Mule = (props, context) => {
                   selected={home}
                   options={destinations}
                   width="150px"
-                  onSelected={value => act('destination', { value })} />
+                  onSelected={(value) => act('destination', { value })}
+                />
                 <Button
                   icon="home"
                   content="Go Home"
-                  onClick={() => act('home')} />
+                  onClick={() => act('home')}
+                />
               </LabeledList.Item>
               <LabeledList.Item label="Settings">
                 <Button.Checkbox
                   checked={autoReturn}
                   content="Auto-Return"
-                  onClick={() => act('autored')} />
+                  onClick={() => act('autored')}
+                />
                 <br />
                 <Button.Checkbox
                   checked={autoPickup}
                   content="Auto-Pickup"
-                  onClick={() => act('autopick')} />
+                  onClick={() => act('autopick')}
+                />
                 <br />
                 <Button.Checkbox
                   checked={reportDelivery}
                   content="Report Delivery"
-                  onClick={() => act('report')} />
+                  onClick={() => act('report')}
+                />
               </LabeledList.Item>
             </LabeledList>
           </Section>
diff --git a/tgui/packages/tgui/interfaces/Newscaster.js b/tgui/packages/tgui/interfaces/Newscaster.js
index d94a1641e368..3b2ca2c2a946 100644
--- a/tgui/packages/tgui/interfaces/Newscaster.js
+++ b/tgui/packages/tgui/interfaces/Newscaster.js
@@ -9,18 +9,34 @@ import { decodeHtmlEntities } from 'common/string';
 import { useBackend, useSharedState, useLocalState } from '../backend';
 import { BountyBoardContent } from './BountyBoard';
 import { UserDetails } from './Vending';
-import { BlockQuote, Box, Button, Divider, LabeledList, Modal, Section, Stack, Tabs, TextArea } from '../components';
+import {
+  BlockQuote,
+  Box,
+  Button,
+  Divider,
+  LabeledList,
+  Modal,
+  Section,
+  Stack,
+  Tabs,
+  TextArea,
+} from '../components';
 import { marked } from 'marked';
-import { sanitizeText } from "../sanitize";
+import { sanitizeText } from '../sanitize';
 
-const CENSOR_MESSAGE = "This channel has been deemed as threatening to \
-  the welfare of the station, and marked with a Nanotrasen D-Notice.";
+const CENSOR_MESSAGE =
+  'This channel has been deemed as threatening to \
+  the welfare of the station, and marked with a Nanotrasen D-Notice.';
 
 export const Newscaster = (props, context) => {
   const { act, data } = useBackend(context);
   const NEWSCASTER_SCREEN = 1;
   const BOUNTYBOARD_SCREEN = 2;
-  const [screenmode, setScreenmode] = useSharedState(context, 'tab_main', NEWSCASTER_SCREEN);
+  const [screenmode, setScreenmode] = useSharedState(
+    context,
+    'tab_main',
+    NEWSCASTER_SCREEN,
+  );
   return (
     <>
       <NewscasterChannelCreation />
@@ -32,24 +48,22 @@ export const Newscaster = (props, context) => {
             <Tabs.Tab
               color="Green"
               selected={screenmode === NEWSCASTER_SCREEN}
-              onClick={() => setScreenmode(NEWSCASTER_SCREEN)}>
+              onClick={() => setScreenmode(NEWSCASTER_SCREEN)}
+            >
               Newscaster
             </Tabs.Tab>
             <Tabs.Tab
               Color="Blue"
               selected={screenmode === BOUNTYBOARD_SCREEN}
-              onClick={() => setScreenmode(BOUNTYBOARD_SCREEN)}>
+              onClick={() => setScreenmode(BOUNTYBOARD_SCREEN)}
+            >
               Bounty Board
             </Tabs.Tab>
           </Tabs>
         </Stack.Item>
         <Stack.Item grow>
-          {screenmode === NEWSCASTER_SCREEN && (
-            <NewscasterContent />
-          )}
-          {screenmode === BOUNTYBOARD_SCREEN && (
-            <BountyBoardContent />
-          )}
+          {screenmode === NEWSCASTER_SCREEN && <NewscasterContent />}
+          {screenmode === BOUNTYBOARD_SCREEN && <BountyBoardContent />}
         </Stack.Item>
       </Stack>
     </>
@@ -60,18 +74,12 @@ export const Newscaster = (props, context) => {
 const NewscasterChannelCreation = (props, context) => {
   const { act, data } = useBackend(context);
   const [lockedmode, setLockedmode] = useLocalState(context, 'lockedmode', 1);
-  const {
-    creating_channel,
-    name,
-    desc,
-  } = data;
+  const { creating_channel, name, desc } = data;
   if (!creating_channel) {
     return null;
   }
   return (
-    <Modal
-      textAlign="center"
-      mr={1.5}>
+    <Modal textAlign="center" mr={1.5}>
       <Stack vertical>
         <>
           <Stack.Item>
@@ -83,7 +91,8 @@ const NewscasterChannelCreation = (props, context) => {
                 position="relative"
                 top="20%"
                 left="15%"
-                onClick={() => act('cancelCreation')} />
+                onClick={() => act('cancelCreation')}
+              />
             </Box>
             <TextArea
               fluid
@@ -92,16 +101,17 @@ const NewscasterChannelCreation = (props, context) => {
               backgroundColor="black"
               textColor="white"
               maxLength={42}
-              onChange={(e, name) => act('setChannelName', {
-                channeltext: name,
-              })}>
+              onChange={(e, name) =>
+                act('setChannelName', {
+                  channeltext: name,
+                })
+              }
+            >
               Channel Name
             </TextArea>
           </Stack.Item>
           <Stack.Item>
-            <Box pb={1}>
-              Enter channel description here:
-            </Box>
+            <Box pb={1}>Enter channel description here:</Box>
             <TextArea
               fluid
               height="150px"
@@ -109,9 +119,12 @@ const NewscasterChannelCreation = (props, context) => {
               backgroundColor="black"
               textColor="white"
               maxLength={512}
-              onChange={(e, desc) => act('setChannelDesc', {
-                channeldesc: desc,
-              })}>
+              onChange={(e, desc) =>
+                act('setChannelDesc', {
+                  channeldesc: desc,
+                })
+              }
+            >
               Channel Description
             </TextArea>
           </Stack.Item>
@@ -122,11 +135,13 @@ const NewscasterChannelCreation = (props, context) => {
                 <Button
                   selected={!lockedmode}
                   content="Public"
-                  onClick={() => setLockedmode(false)} />
+                  onClick={() => setLockedmode(false)}
+                />
                 <Button
                   selected={!!lockedmode}
                   content="Private"
-                  onClick={() => setLockedmode(true)} />
+                  onClick={() => setLockedmode(true)}
+                />
               </Box>
             </Section>
           </Stack.Item>
@@ -134,9 +149,12 @@ const NewscasterChannelCreation = (props, context) => {
             <Box>
               <Button
                 content="Submit Channel"
-                onClick={() => act('createChannel', {
-                  lockedmode: lockedmode,
-                })} />
+                onClick={() =>
+                  act('createChannel', {
+                    lockedmode: lockedmode,
+                  })
+                }
+              />
             </Box>
           </Stack.Item>
         </>
@@ -148,17 +166,12 @@ const NewscasterChannelCreation = (props, context) => {
 /** The modal menu that contains the prompts to making new comments. */
 const NewscasterCommentCreation = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    creating_comment,
-    viewing_message,
-  } = data;
+  const { creating_comment, viewing_message } = data;
   if (!creating_comment) {
     return null;
   }
   return (
-    <Modal
-      textAlign="center"
-      mr={1.5}>
+    <Modal textAlign="center" mr={1.5}>
       <Stack vertical>
         <Stack.Item>
           <Box pb={1}>
@@ -169,7 +182,8 @@ const NewscasterCommentCreation = (props, context) => {
               position="relative"
               top="20%"
               left="25%"
-              onClick={() => act('cancelCreation')} />
+              onClick={() => act('cancelCreation')}
+            />
           </Box>
           <TextArea
             fluid
@@ -178,19 +192,25 @@ const NewscasterCommentCreation = (props, context) => {
             backgroundColor="black"
             textColor="white"
             maxLength={512}
-            onChange={(e, comment) => act('setCommentBody', {
-              commenttext: comment,
-            })}>
+            onChange={(e, comment) =>
+              act('setCommentBody', {
+                commenttext: comment,
+              })
+            }
+          >
             Channel Name
           </TextArea>
         </Stack.Item>
         <Stack.Item>
           <Box>
             <Button
-              content={"Submit Comment"}
-              onClick={() => act('createComment', {
-                messageID: viewing_message,
-              })} />
+              content={'Submit Comment'}
+              onClick={() =>
+                act('createComment', {
+                  messageID: viewing_message,
+                })
+              }
+            />
           </Box>
         </Stack.Item>
       </Stack>
@@ -212,104 +232,98 @@ const NewscasterWantedScreen = (props, context) => {
     return null;
   }
   return (
-    <Modal
-      textAlign="center"
-      mr={1.5}
-      width={25}>
-      {wanted.map(activeWanted => (
+    <Modal textAlign="center" mr={1.5} width={25}>
+      {wanted.map((activeWanted) => (
         <>
           <Stack vertical>
             <Stack.Item>
               <Box bold color="red">
-                {activeWanted.active?"Active Wanted Issue:"
-                  :"Dismissed Wanted Issue:"}
+                {activeWanted.active
+                  ? 'Active Wanted Issue:'
+                  : 'Dismissed Wanted Issue:'}
                 <Button
                   content="X"
                   color="red"
                   position="relative"
                   top="20%"
                   left="18%"
-                  onClick={() => act('cancelCreation')} />
+                  onClick={() => act('cancelCreation')}
+                />
               </Box>
               <Section>
-                <Box bold>
-                  {activeWanted.criminal}
-                </Box>
-                <Box italic>
-                  {activeWanted.crime}
-                </Box>
+                <Box bold>{activeWanted.criminal}</Box>
+                <Box italic>{activeWanted.crime}</Box>
               </Section>
               <Box
                 as="img"
-                src={activeWanted.image
-                  ? activeWanted.image
-                  : null} />
+                src={activeWanted.image ? activeWanted.image : null}
+              />
               <Box italic>
-                Posted by {activeWanted.author ? activeWanted.author : "N/A"}
+                Posted by {activeWanted.author ? activeWanted.author : 'N/A'}
               </Box>
             </Stack.Item>
           </Stack>
           <Divider />
         </>
       ))}
-      {security_mode
-        ?(
-          <>
-            <LabeledList>
-              <LabeledList.Item
-                label="Criminal Name">
-                <Button
-                  content={criminal_name ? criminal_name : " N/A"}
-                  disabled={!security_mode}
-                  icon="pen"
-                  onClick={() => act('setCriminalName')} />
-              </LabeledList.Item>
-              <LabeledList.Item
-                label="Criminal Activity">
-                <Button
-                  content={crime_description ? crime_description : " N/A"}
-                  nowrap={false}
-                  disabled={!security_mode}
-                  icon="pen"
-                  onClick={() => act('setCrimeData')} />
-              </LabeledList.Item>
-            </LabeledList>
-            <Section>
-              <Button
-                icon="camera"
-                selected={photo_data}
-                disabled={!security_mode}
-                content={photo_data ? "Remove photo" : "Attach photo"}
-                onClick={() => act('togglePhoto')} />
+      {security_mode ? (
+        <>
+          <LabeledList>
+            <LabeledList.Item label="Criminal Name">
               <Button
-                content={"Set Wanted Issue"}
+                content={criminal_name ? criminal_name : ' N/A'}
                 disabled={!security_mode}
-                icon="volume-up"
-                onClick={() => act('submitWantedIssue')} />
+                icon="pen"
+                onClick={() => act('setCriminalName')}
+              />
+            </LabeledList.Item>
+            <LabeledList.Item label="Criminal Activity">
               <Button
-                content={"Clear Wanted"}
+                content={crime_description ? crime_description : ' N/A'}
+                nowrap={false}
                 disabled={!security_mode}
-                icon="times"
-                color="red"
-                onClick={() => act('clearWantedIssue')} />
-            </Section>
-          </>
-        ) : (
-          <Box>
-            {wanted.active
-              ? "Please contact your local security officer if spotted."
-              : "No wanted issue posted. Have a secure day."}
-          </Box>
-        )}
+                icon="pen"
+                onClick={() => act('setCrimeData')}
+              />
+            </LabeledList.Item>
+          </LabeledList>
+          <Section>
+            <Button
+              icon="camera"
+              selected={photo_data}
+              disabled={!security_mode}
+              content={photo_data ? 'Remove photo' : 'Attach photo'}
+              onClick={() => act('togglePhoto')}
+            />
+            <Button
+              content={'Set Wanted Issue'}
+              disabled={!security_mode}
+              icon="volume-up"
+              onClick={() => act('submitWantedIssue')}
+            />
+            <Button
+              content={'Clear Wanted'}
+              disabled={!security_mode}
+              icon="times"
+              color="red"
+              onClick={() => act('clearWantedIssue')}
+            />
+          </Section>
+        </>
+      ) : (
+        <Box>
+          {wanted.active
+            ? 'Please contact your local security officer if spotted.'
+            : 'No wanted issue posted. Have a secure day.'}
+        </Box>
+      )}
     </Modal>
   );
 };
 
 const NewscasterContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    current_channel = {},
-  } = data;
+  const { current_channel = {} } = data;
   return (
     <Stack fill vertical>
       <Stack.Item grow>
@@ -326,7 +340,8 @@ const NewscasterContent = (props, context) => {
                 <NewscasterChannelBox
                   channelName={current_channel.name}
                   channelOwner={current_channel.owner}
-                  channelDesc={current_channel.desc} />
+                  channelDesc={current_channel.desc}
+                />
               </Stack.Item>
             </Stack>
           </Stack.Item>
@@ -363,42 +378,51 @@ const NewscasterChannelBox = (_, context) => {
               <BlockQuote color="red">
                 <b>ATTENTION:</b> {CENSOR_MESSAGE}
               </BlockQuote>
-            </Section>)
-            : (
-              <Section fill scrollable>
-                <BlockQuote italic fontSize={1.2} wrap>
-                  {decodeHtmlEntities(channelDesc)}
-                </BlockQuote>
-              </Section>
-            )}
+            </Section>
+          ) : (
+            <Section fill scrollable>
+              <BlockQuote italic fontSize={1.2} wrap>
+                {decodeHtmlEntities(channelDesc)}
+              </BlockQuote>
+            </Section>
+          )}
         </Stack.Item>
         <Stack.Item>
           <Box>
             <Button
               icon="print"
               content="Submit Story"
-              disabled={(channelLocked && (channelAuthor !== user.name))
-            || channelCensored}
+              disabled={
+                (channelLocked && channelAuthor !== user.name) ||
+                channelCensored
+              }
               onClick={() => act('createStory', { current: viewing_channel })}
-              mt={1} />
+              mt={1}
+            />
             <Button
               icon="camera"
               selected={photo_data}
               content="Select Photo"
-              disabled={(channelLocked && (channelAuthor !== user.name))
-            || channelCensored}
-              onClick={() => act('togglePhoto')} />
+              disabled={
+                (channelLocked && channelAuthor !== user.name) ||
+                channelCensored
+              }
+              onClick={() => act('togglePhoto')}
+            />
             {!!security_mode && (
               <Button
                 icon="ban"
-                content={"D-Notice"}
+                content={'D-Notice'}
                 tooltip="Censor the whole channel and it's \
                   contents as dangerous to the station. Cannot be undone."
                 disabled={!security_mode || !viewing_channel}
-                onClick={() => act('channelDNotice', {
-                  secure: security_mode,
-                  channel: viewing_channel,
-                })} />
+                onClick={() =>
+                  act('channelDNotice', {
+                    secure: security_mode,
+                    channel: viewing_channel,
+                  })
+                }
+              />
             )}
           </Box>
           <Box>
@@ -406,7 +430,8 @@ const NewscasterChannelBox = (_, context) => {
               icon="newspaper"
               content="Print Newspaper"
               disabled={paper <= 0}
-              onClick={() => act('printNewspaper')} />
+              onClick={() => act('printNewspaper')}
+            />
           </Box>
         </Stack.Item>
       </Stack>
@@ -417,30 +442,24 @@ const NewscasterChannelBox = (_, context) => {
 /** Channel select is the left-hand menu where all the channels are listed. */
 const NewscasterChannelSelector = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    channels = [],
-    viewing_channel,
-    security_mode,
-    wanted = [],
-  } = data;
+  const { channels = [], viewing_channel, security_mode, wanted = [] } = data;
   return (
-    <Section
-      minHeight="100%"
-      width={(window.innerWidth - 410) + "px"}>
+    <Section minHeight="100%" width={window.innerWidth - 410 + 'px'}>
       <Tabs vertical>
-        {wanted.map(activeWanted => (
+        {wanted.map((activeWanted) => (
           <Tabs.Tab
             pt={0.75}
             pb={0.75}
             mr={1}
             key={activeWanted.index}
-            icon={activeWanted.active ? "skull-crossbones" : null}
-            textColor={activeWanted.active ? "red" : "grey"}
-            onClick={() => act('toggleWanted')}>
+            icon={activeWanted.active ? 'skull-crossbones' : null}
+            textColor={activeWanted.active ? 'red' : 'grey'}
+            onClick={() => act('toggleWanted')}
+          >
             Wanted Issue
           </Tabs.Tab>
         ))}
-        {channels.map(channel => (
+        {channels.map((channel) => (
           <Tabs.Tab
             key={channel.index}
             pt={0.75}
@@ -448,10 +467,13 @@ const NewscasterChannelSelector = (props, context) => {
             mr={1}
             selected={viewing_channel === channel.ID}
             icon={channel.censored ? 'ban' : null}
-            textColor={channel.censored ? "red" : "white"}
-            onClick={() => act('setChannel', {
-              channel: channel.ID,
-            })}>
+            textColor={channel.censored ? 'red' : 'white'}
+            onClick={() =>
+              act('setChannel', {
+                channel: channel.ID,
+              })
+            }
+          >
             {channel.name}
           </Tabs.Tab>
         ))}
@@ -461,7 +483,8 @@ const NewscasterChannelSelector = (props, context) => {
           mr={1}
           textColor="white"
           color="Green"
-          onClick={() => act('startCreateChannel')}>
+          onClick={() => act('startCreateChannel')}
+        >
           Create Channel [+]
         </Tabs.Tab>
       </Tabs>
@@ -469,19 +492,20 @@ const NewscasterChannelSelector = (props, context) => {
   );
 };
 
-const processedText = value => {
+const processedText = (value) => {
   const textHtml = {
-    __html: sanitizeText(marked(value, {
-      breaks: true,
-      smartypants: true,
-      smartLists: true,
-      baseUrl: 'thisshouldbreakhttp',
-    })),
+    __html: sanitizeText(
+      marked(value, {
+        breaks: true,
+        smartypants: true,
+        smartLists: true,
+        baseUrl: 'thisshouldbreakhttp',
+      }),
+    ),
   };
   return textHtml;
 };
 
-
 /** This is where the channels comments get spangled out (tm) */
 const NewscasterChannelMessages = (_, context) => {
   const { act, data } = useBackend(context);
@@ -497,98 +521,105 @@ const NewscasterChannelMessages = (_, context) => {
   if (channelCensored) {
     return (
       <Section color="red">
-        <b>ATTENTION:</b> Comments cannot be read at this time.<br />
+        <b>ATTENTION:</b> Comments cannot be read at this time.
+        <br />
         Thank you for your understanding, and have a secure day.
       </Section>
     );
   }
-  const visibleMessages = messages.filter(message => (
-    message.ID !== viewing_channel
-  ));
+  const visibleMessages = messages.filter(
+    (message) => message.ID !== viewing_channel,
+  );
   return (
     <Section>
-      {visibleMessages.map(message => {
+      {visibleMessages.map((message) => {
         return (
           <Section
             key={message.index}
             textColor="white"
-            title={(
+            title={
               <i>
                 {message.censored_author ? (
                   <Box textColor="red">
                     By: [REDACTED]. <b>D-Notice Notice</b> .
                   </Box>
-                ):(
+                ) : (
                   <>
                     By: {message.auth} at {message.time}
                   </>
                 )}
               </i>
-            )}
-            buttons={(
+            }
+            buttons={
               <>
                 {!!security_mode && (
                   <Button
                     icon="comment-slash"
                     tooltip="Censor Story"
                     disabled={!security_mode}
-                    onClick={() => act('storyCensor', {
-                      messageID: message.ID,
-                    })} />
+                    onClick={() =>
+                      act('storyCensor', {
+                        messageID: message.ID,
+                      })
+                    }
+                  />
                 )}
                 {!!security_mode && (
                   <Button
                     icon="user-slash"
                     tooltip="Censor Author"
                     disabled={!security_mode}
-                    onClick={() => act('authorCensor', {
-                      messageID: message.ID,
-                    })} />
+                    onClick={() =>
+                      act('authorCensor', {
+                        messageID: message.ID,
+                      })
+                    }
+                  />
                 )}
                 <Button
                   icon="comment"
                   tooltip="Leave a Comment."
                   disabled={
-                    message.censored_author
-                    || message.censored_message
-                    || user.name === "Unknown"
-                    || !!channelLocked && (channelAuthor !== user.name)
+                    message.censored_author ||
+                    message.censored_message ||
+                    user.name === 'Unknown' ||
+                    (!!channelLocked && channelAuthor !== user.name)
+                  }
+                  onClick={() =>
+                    act('startComment', {
+                      messageID: message.ID,
+                    })
                   }
-                  onClick={() => act('startComment', {
-                    messageID: message.ID,
-                  })}
                 />
               </>
-            )} >
+            }
+          >
             <BlockQuote>
               {message.censored_message ? (
                 <Section textColor="red">
-                  This message was deemed dangerous to the general welfare
-                  of the station and therefore marked with a <b>D-Notice</b>.
+                  This message was deemed dangerous to the general welfare of
+                  the station and therefore marked with a <b>D-Notice</b>.
                 </Section>
-              ):(
+              ) : (
                 <Section
                   dangerouslySetInnerHTML={processedText(message.body)}
-                  pl={1} />
+                  pl={1}
+                />
               )}
-              {message.photo !== null && !message.censored_message &&(
-                <Box
-                  as="img"
-                  src={message.photo} />
+              {message.photo !== null && !message.censored_message && (
+                <Box as="img" src={message.photo} />
               )}
-              {!!message.comments &&(
+              {!!message.comments && (
                 <Box>
-                  {message.comments.map(comment => (
-                    <BlockQuote
-                      key={comment.index}>
-                      <Box
-                        italic
-                        textColor="white">
+                  {message.comments.map((comment) => (
+                    <BlockQuote key={comment.index}>
+                      <Box italic textColor="white">
                         By: {comment.auth} at {comment.time}
                       </Box>
                       <Section
                         dangerouslySetInnerHTML={processedText(comment.body)}
-                        ml={2.5} />
+                        ml={2.5}
+                      />
                     </BlockQuote>
                   ))}
                 </Box>
@@ -596,8 +627,8 @@ const NewscasterChannelMessages = (_, context) => {
             </BlockQuote>
             <Divider />
           </Section>
-        ); }
-      )}
+        );
+      })}
     </Section>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/NoticeBoard.js b/tgui/packages/tgui/interfaces/NoticeBoard.js
index da595ca2ae97..6df894533855 100644
--- a/tgui/packages/tgui/interfaces/NoticeBoard.js
+++ b/tgui/packages/tgui/interfaces/NoticeBoard.js
@@ -1,18 +1,13 @@
-import { useBackend } from "../backend";
-import { Box, Button, Flex, Section } from "../components";
-import { Window } from "../layouts";
+import { useBackend } from '../backend';
+import { Box, Button, Flex, Section } from '../components';
+import { Window } from '../layouts';
 
 export const NoticeBoard = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    allowed,
-    items = {},
-  } = data;
+  const { allowed, items = {} } = data;
 
   return (
-    <Window
-      width={425}
-      height={176}>
+    <Window width={425} height={176}>
       <Window.Content backgroundColor="#704D25">
         {!items.length ? (
           <Section>
@@ -26,26 +21,26 @@ export const NoticeBoard = (props, context) => {
               key={item.ref}
               color="black"
               backgroundColor="white"
-              style={{ padding: "2px 2px 0 2px" }}
-              mb={0.5}>
+              style={{ padding: '2px 2px 0 2px' }}
+              mb={0.5}
+            >
               <Flex.Item align="center" grow={1}>
-                <Box align="center">
-                  {item.name}
-                </Box>
+                <Box align="center">{item.name}</Box>
               </Flex.Item>
               <Flex.Item>
                 <Button
                   icon="eye"
-                  onClick={() => act("examine", { ref: item.ref })}
+                  onClick={() => act('examine', { ref: item.ref })}
                 />
                 <Button
                   icon="eject"
                   disabled={!allowed}
-                  onClick={() => act("remove", { ref: item.ref })}
+                  onClick={() => act('remove', { ref: item.ref })}
                 />
               </Flex.Item>
             </Flex>
-          )))}
+          ))
+        )}
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/NotificationPreferences.js b/tgui/packages/tgui/interfaces/NotificationPreferences.js
index 74969c06bc30..5941acb63657 100644
--- a/tgui/packages/tgui/interfaces/NotificationPreferences.js
+++ b/tgui/packages/tgui/interfaces/NotificationPreferences.js
@@ -17,20 +17,18 @@ export const NotificationPreferences = (props, context) => {
     return 0;
   });
   return (
-    <Window
-      title="Notification Preferences"
-      width={270}
-      height={360}>
+    <Window title="Notification Preferences" width={270} height={360}>
       <Window.Content scrollable>
         <Section title="Ghost Role Notifications">
-          {ignores.map(ignore => (
+          {ignores.map((ignore) => (
             <Button
               fluid
               key={ignore.key}
               icon={ignore.enabled ? 'times' : 'check'}
               content={ignore.desc}
               color={ignore.enabled ? 'bad' : 'good'}
-              onClick={() => act('toggle_ignore', { key: ignore.key })} />
+              onClick={() => act('toggle_ignore', { key: ignore.key })}
+            />
           ))}
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/NtnetRelay.js b/tgui/packages/tgui/interfaces/NtnetRelay.js
index b41723edade0..f7faa3d00f2a 100644
--- a/tgui/packages/tgui/interfaces/NtnetRelay.js
+++ b/tgui/packages/tgui/interfaces/NtnetRelay.js
@@ -1,55 +1,51 @@
 import { useBackend } from '../backend';
-import { Box, Button, ProgressBar, Section, AnimatedNumber } from '../components';
+import {
+  Box,
+  Button,
+  ProgressBar,
+  Section,
+  AnimatedNumber,
+} from '../components';
 import { Window } from '../layouts';
 
 export const NtnetRelay = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    enabled,
-    dos_capacity,
-    dos_overload,
-    dos_crashed,
-  } = data;
+  const { enabled, dos_capacity, dos_overload, dos_crashed } = data;
   return (
-    <Window
-      title="NtNet Quantum Relay"
-      width={400}
-      height={300}>
+    <Window title="NtNet Quantum Relay" width={400} height={300}>
       <Window.Content>
         <Section
           title="Network Buffer"
-          buttons={(
+          buttons={
             <Button
               icon="power-off"
               selected={enabled}
               content={enabled ? 'ENABLED' : 'DISABLED'}
               onClick={() => act('toggle')}
             />
-          )}>
+          }
+        >
           {!dos_crashed ? (
             <ProgressBar
               value={dos_overload}
               minValue={0}
-              maxValue={dos_capacity}>
+              maxValue={dos_capacity}
+            >
               <AnimatedNumber value={dos_overload} /> GQ
               {' / '}
               {dos_capacity} GQ
             </ProgressBar>
           ) : (
             <Box fontFamily="monospace">
-              <Box fontSize="20px">
-                NETWORK BUFFER OVERFLOW
-              </Box>
-              <Box fontSize="16px">
-                OVERLOAD RECOVERY MODE
-              </Box>
+              <Box fontSize="20px">NETWORK BUFFER OVERFLOW</Box>
+              <Box fontSize="16px">OVERLOAD RECOVERY MODE</Box>
               <Box>
-                This system is suffering temporary outage due to overflow
-                of traffic buffers. Until buffered traffic is processed,
-                all further requests will be dropped. Frequent occurences
-                of this error may indicate insufficient hardware capacity
-                of your network. Please contact your network planning
-                department for instructions on how to resolve this issue.
+                This system is suffering temporary outage due to overflow of
+                traffic buffers. Until buffered traffic is processed, all
+                further requests will be dropped. Frequent occurences of this
+                error may indicate insufficient hardware capacity of your
+                network. Please contact your network planning department for
+                instructions on how to resolve this issue.
               </Box>
               <Box fontSize="20px" color="bad">
                 ADMINISTRATOR OVERRIDE
@@ -62,7 +58,8 @@ export const NtnetRelay = (props, context) => {
                 content="PURGE BUFFER"
                 mt={1}
                 color="bad"
-                onClick={() => act('restart')} />
+                onClick={() => act('restart')}
+              />
             </Box>
           )}
         </Section>
diff --git a/tgui/packages/tgui/interfaces/NtosAiRestorer.js b/tgui/packages/tgui/interfaces/NtosAiRestorer.js
index a5ebf22d52a2..e6b10a293596 100644
--- a/tgui/packages/tgui/interfaces/NtosAiRestorer.js
+++ b/tgui/packages/tgui/interfaces/NtosAiRestorer.js
@@ -3,9 +3,7 @@ import { AiRestorerContent } from './AiRestorer';
 
 export const NtosAiRestorer = () => {
   return (
-    <NtosWindow
-      width={370}
-      height={400}>
+    <NtosWindow width={370} height={400}>
       <NtosWindow.Content scrollable>
         <AiRestorerContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosArcade.js b/tgui/packages/tgui/interfaces/NtosArcade.js
index f0f7241ab871..072a8372427b 100644
--- a/tgui/packages/tgui/interfaces/NtosArcade.js
+++ b/tgui/packages/tgui/interfaces/NtosArcade.js
@@ -1,25 +1,28 @@
 import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
-import { AnimatedNumber, Box, Button, Grid, LabeledList, ProgressBar, Section } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  Grid,
+  LabeledList,
+  ProgressBar,
+  Section,
+} from '../components';
 import { NtosWindow } from '../layouts';
 
 export const NtosArcade = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <NtosWindow
-      width={450}
-      height={350}>
+    <NtosWindow width={450} height={350}>
       <NtosWindow.Content>
-        <Section
-          title="Outbomb Cuban Pete Ultra"
-          textAlign="center">
+        <Section title="Outbomb Cuban Pete Ultra" textAlign="center">
           <Box>
             <Grid>
               <Grid.Column size={2}>
                 <Box m={1} />
                 <LabeledList>
-                  <LabeledList.Item
-                    label="Player Health">
+                  <LabeledList.Item label="Player Health">
                     <ProgressBar
                       value={data.PlayerHitpoints}
                       minValue={0}
@@ -29,12 +32,12 @@ export const NtosArcade = (props, context) => {
                         good: [20, 31],
                         average: [10, 20],
                         bad: [-Infinity, 10],
-                      }}>
+                      }}
+                    >
                       {data.PlayerHitpoints}HP
                     </ProgressBar>
                   </LabeledList.Item>
-                  <LabeledList.Item
-                    label="Player Magic">
+                  <LabeledList.Item label="Player Magic">
                     <ProgressBar
                       value={data.PlayerMP}
                       minValue={0}
@@ -43,7 +46,8 @@ export const NtosArcade = (props, context) => {
                         purple: [11, Infinity],
                         violet: [3, 11],
                         bad: [-Infinity, 3],
-                      }}>
+                      }}
+                    >
                       {data.PlayerMP}MP
                     </ProgressBar>
                   </LabeledList.Item>
@@ -51,8 +55,9 @@ export const NtosArcade = (props, context) => {
                 <Box my={1} mx={4} />
                 <Section
                   backgroundColor={
-                    data.PauseState === 1 ? "#1b3622" : "#471915"
-                  }>
+                    data.PauseState === 1 ? '#1b3622' : '#471915'
+                  }
+                >
                   {data.Status}
                 </Section>
               </Grid.Column>
@@ -65,15 +70,13 @@ export const NtosArcade = (props, context) => {
                     good: [30, Infinity],
                     average: [5, 30],
                     bad: [-Infinity, 5],
-                  }}>
+                  }}
+                >
                   <AnimatedNumber value={data.Hitpoints} />
                   HP
                 </ProgressBar>
                 <Box m={1} />
-                <Section
-                  inline
-                  width="156px"
-                  textAlign="center">
+                <Section inline width="156px" textAlign="center">
                   <img src={resolveAsset(data.BossID)} />
                 </Section>
               </Grid.Column>
@@ -85,21 +88,24 @@ export const NtosArcade = (props, context) => {
               tooltipPosition="top"
               disabled={data.GameActive === 0 || data.PauseState === 1}
               onClick={() => act('Attack')}
-              content="Attack!" />
+              content="Attack!"
+            />
             <Button
               icon="band-aid"
               tooltip="Heal yourself!"
               tooltipPosition="top"
               disabled={data.GameActive === 0 || data.PauseState === 1}
               onClick={() => act('Heal')}
-              content="Heal!" />
+              content="Heal!"
+            />
             <Button
               icon="magic"
               tooltip="Recharge your magic!"
               tooltipPosition="top"
               disabled={data.GameActive === 0 || data.PauseState === 1}
               onClick={() => act('Recharge_Power')}
-              content="Recharge!" />
+              content="Recharge!"
+            />
           </Box>
           <Box>
             <Button
@@ -108,14 +114,16 @@ export const NtosArcade = (props, context) => {
               tooltipPosition="top"
               disabled={data.GameActive === 1}
               onClick={() => act('Start_Game')}
-              content="Begin Game" />
+              content="Begin Game"
+            />
             <Button
               icon="ticket-alt"
               tooltip="Claim at your local Arcade Computer for Prizes!"
               tooltipPosition="top"
               disabled={data.GameActive === 1}
               onClick={() => act('Dispense_Tickets')}
-              content="Claim Tickets" />
+              content="Claim Tickets"
+            />
           </Box>
           <Box color={data.TicketCount >= 1 ? 'good' : 'normal'}>
             Earned Tickets: {data.TicketCount}
diff --git a/tgui/packages/tgui/interfaces/NtosBountyBoard.js b/tgui/packages/tgui/interfaces/NtosBountyBoard.js
index b64069a3013d..f48810e517e2 100644
--- a/tgui/packages/tgui/interfaces/NtosBountyBoard.js
+++ b/tgui/packages/tgui/interfaces/NtosBountyBoard.js
@@ -3,9 +3,7 @@ import { NtosWindow } from '../layouts';
 
 export const NtosBountyBoard = (props, context) => {
   return (
-    <NtosWindow
-      width={550}
-      height={600}>
+    <NtosWindow width={550} height={600}>
       <NtosWindow.Content scrollable>
         <BountyBoardContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosCard.js b/tgui/packages/tgui/interfaces/NtosCard.js
index 42ee176687e0..59878ba7e146 100644
--- a/tgui/packages/tgui/interfaces/NtosCard.js
+++ b/tgui/packages/tgui/interfaces/NtosCard.js
@@ -1,13 +1,21 @@
 import { useBackend, useSharedState } from '../backend';
-import { Box, Button, Dropdown, Input, NoticeBox, NumberInput, Section, Stack, Tabs } from '../components';
+import {
+  Box,
+  Button,
+  Dropdown,
+  Input,
+  NoticeBox,
+  NumberInput,
+  Section,
+  Stack,
+  Tabs,
+} from '../components';
 import { NtosWindow } from '../layouts';
 import { AccessList } from './common/AccessList';
 
 export const NtosCard = (props, context) => {
   return (
-    <NtosWindow
-      width={500}
-      height={670}>
+    <NtosWindow width={500} height={670}>
       <NtosWindow.Content scrollable>
         <NtosCardContent />
       </NtosWindow.Content>
@@ -30,7 +38,7 @@ export const NtosCardContent = (props, context) => {
     accessFlagNames,
     showBasic,
     templates = {},
-  } = data; 
+  } = data;
 
   if (!have_id_slot) {
     return (
@@ -40,9 +48,7 @@ export const NtosCardContent = (props, context) => {
     );
   }
 
-  const [
-    selectedTab,
-  ] = useSharedState(context, "selectedTab", "login");
+  const [selectedTab] = useSharedState(context, 'selectedTab', 'login');
 
   return (
     <>
@@ -51,14 +57,11 @@ export const NtosCardContent = (props, context) => {
           <IDCardTabs />
         </Stack.Item>
         <Stack.Item width="100%">
-          {(selectedTab === "login") && (
-            <IDCardLogin />
-          ) || (selectedTab === "modify") && (
-            <IDCardTarget />
-          )}
+          {(selectedTab === 'login' && <IDCardLogin />) ||
+            (selectedTab === 'modify' && <IDCardTarget />)}
         </Stack.Item>
       </Stack>
-      {(!!has_id && !!authenticatedUser) && (
+      {!!has_id && !!authenticatedUser && (
         <Section
           title="Templates"
           mt={1}
@@ -66,16 +69,19 @@ export const NtosCardContent = (props, context) => {
             <Button
               icon="question-circle"
               tooltip={
-                "Will attempt to apply all access for the template to the ID card.\n"
-              + "Does not use wildcards unless the template specifies them."
+                'Will attempt to apply all access for the template to the ID card.\n' +
+                'Does not use wildcards unless the template specifies them.'
               }
-              tooltipPosition="left" />
-          } >
+              tooltipPosition="left"
+            />
+          }
+        >
           <TemplateDropdown templates={templates} />
-        </Section>)}
+        </Section>
+      )}
       <Stack mt={1}>
         <Stack.Item grow>
-          {(!!has_id && !!authenticatedUser) && (
+          {!!has_id && !!authenticatedUser && (
             <Box>
               <AccessList
                 accesses={regions}
@@ -91,12 +97,16 @@ export const NtosCardContent = (props, context) => {
                     content="Terminate Employment"
                     confirmContent="Fire Employee?"
                     color="bad"
-                    onClick={() => act('PRG_terminate')} />
+                    onClick={() => act('PRG_terminate')}
+                  />
+                }
+                accessMod={(ref, wildcard) =>
+                  act('PRG_access', {
+                    access_target: ref,
+                    access_wildcard: wildcard,
+                  })
                 }
-                accessMod={(ref, wildcard) => act('PRG_access', {
-                  access_target: ref,
-                  access_wildcard: wildcard,
-                })} />
+              />
             </Box>
           )}
         </Stack.Item>
@@ -106,27 +116,30 @@ export const NtosCardContent = (props, context) => {
 };
 
 const IDCardTabs = (props, context) => {
-  const [
-    selectedTab,
-    setSelectedTab,
-  ] = useSharedState(context, "selectedTab", "login");
+  const [selectedTab, setSelectedTab] = useSharedState(
+    context,
+    'selectedTab',
+    'login',
+  );
 
   return (
     <Tabs vertical fill>
       <Tabs.Tab
-        minWidth={"100%"}
+        minWidth={'100%'}
         altSelection
-        selected={"login" === selectedTab}
-        color={("login" === selectedTab) ? "green" : "default"}
-        onClick={() => setSelectedTab("login")}>
+        selected={'login' === selectedTab}
+        color={'login' === selectedTab ? 'green' : 'default'}
+        onClick={() => setSelectedTab('login')}
+      >
         Login ID
       </Tabs.Tab>
       <Tabs.Tab
-        minWidth={"100%"}
+        minWidth={'100%'}
         altSelection
-        selected={"modify" === selectedTab}
-        color={("modify" === selectedTab) ? "green" : "default"}
-        onClick={() => setSelectedTab("modify")}>
+        selected={'modify' === selectedTab}
+        color={'modify' === selectedTab ? 'green' : 'default'}
+        onClick={() => setSelectedTab('modify')}
+      >
         Target ID
       </Tabs.Tab>
     </Tabs>
@@ -135,32 +148,30 @@ const IDCardTabs = (props, context) => {
 
 export const IDCardLogin = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    authenticatedUser,
-    has_id,
-    have_printer,
-    authIDName,
-  } = data;
+  const { authenticatedUser, has_id, have_printer, authIDName } = data;
 
   return (
     <Section
       title="Login"
-      buttons={(
+      buttons={
         <>
           <Button
             icon="print"
             content="Print"
             disabled={!have_printer || !has_id}
-            onClick={() => act('PRG_print')} />
+            onClick={() => act('PRG_print')}
+          />
           <Button
-            icon={authenticatedUser ? "sign-out-alt" : "sign-in-alt"}
-            content={authenticatedUser ? "Log Out" : "Log In"}
-            color={authenticatedUser ? "bad" : "good"}
+            icon={authenticatedUser ? 'sign-out-alt' : 'sign-in-alt'}
+            content={authenticatedUser ? 'Log Out' : 'Log In'}
+            color={authenticatedUser ? 'bad' : 'good'}
             onClick={() => {
               act(authenticatedUser ? 'PRG_logout' : 'PRG_authenticate');
-            }} />
+            }}
+          />
         </>
-      )}>
+      }
+    >
       <Stack wrap="wrap">
         <Stack.Item width="100%">
           <Button
@@ -168,10 +179,11 @@ export const IDCardLogin = (props, context) => {
             ellipsis
             icon="eject"
             content={authIDName}
-            onClick={() => act('PRG_ejectauthid')} />
+            onClick={() => act('PRG_ejectauthid')}
+          />
         </Stack.Item>
         <Stack.Item width="100%" mt={1} ml={0}>
-          Login: {authenticatedUser || "-----"}
+          Login: {authenticatedUser || '-----'}
         </Stack.Item>
       </Stack>
     </Section>
@@ -180,14 +192,8 @@ export const IDCardLogin = (props, context) => {
 
 const IDCardTarget = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    authenticatedUser,
-    id_rank,
-    id_owner,
-    has_id,
-    id_name,
-    id_age,
-  } = data;
+  const { authenticatedUser, id_rank, id_owner, has_id, id_name, id_age } =
+    data;
 
   return (
     <Section title="Modify ID">
@@ -196,20 +202,22 @@ const IDCardTarget = (props, context) => {
         ellipsis
         icon="eject"
         content={id_name}
-        onClick={() => act('PRG_ejectmodid')} />
+        onClick={() => act('PRG_ejectmodid')}
+      />
       {!!(has_id && authenticatedUser) && (
         <>
           <Stack mt={1}>
-            <Stack.Item align="center">
-              Details:
-            </Stack.Item>
+            <Stack.Item align="center">Details:</Stack.Item>
             <Stack.Item grow={1} mr={1} ml={1}>
               <Input
                 width="100%"
                 value={id_owner}
-                onInput={(e, value) => act('PRG_edit', {
-                  name: value,
-                })} />
+                onInput={(e, value) =>
+                  act('PRG_edit', {
+                    name: value,
+                  })
+                }
+              />
             </Stack.Item>
             <Stack.Item>
               <NumberInput
@@ -217,24 +225,27 @@ const IDCardTarget = (props, context) => {
                 unit="Years"
                 minValue={17}
                 maxValue={85}
-                onChange={(e, value) => { act('PRG_age', {
-                  id_age: value,
-                });
-                }} />
+                onChange={(e, value) => {
+                  act('PRG_age', {
+                    id_age: value,
+                  });
+                }}
+              />
             </Stack.Item>
           </Stack>
           <Stack>
-            <Stack.Item align="center">
-              Assignment:
-            </Stack.Item>
+            <Stack.Item align="center">Assignment:</Stack.Item>
             <Stack.Item grow={1} ml={1}>
               <Input
                 fluid
                 mt={1}
                 value={id_rank}
-                onInput={(e, value) => act('PRG_assign', {
-                  assignment: value,
-                })} />
+                onInput={(e, value) =>
+                  act('PRG_assign', {
+                    assignment: value,
+                  })
+                }
+              />
             </Stack.Item>
           </Stack>
         </>
@@ -245,9 +256,7 @@ const IDCardTarget = (props, context) => {
 
 const TemplateDropdown = (props, context) => {
   const { act } = useBackend(context);
-  const {
-    templates,
-  } = props;
+  const { templates } = props;
 
   const templateKeys = Object.keys(templates);
 
@@ -260,15 +269,16 @@ const TemplateDropdown = (props, context) => {
       <Stack.Item grow>
         <Dropdown
           width="100%"
-          displayText={"Select a template..."}
-          options={
-            templateKeys.map(path => {
-              return templates[path];
+          displayText={'Select a template...'}
+          options={templateKeys.map((path) => {
+            return templates[path];
+          })}
+          onSelected={(sel) =>
+            act('PRG_template', {
+              name: sel,
             })
           }
-          onSelected={sel => act("PRG_template", {
-            name: sel,
-          })} />
+        />
       </Stack.Item>
     </Stack>
   );
diff --git a/tgui/packages/tgui/interfaces/NtosCargo.js b/tgui/packages/tgui/interfaces/NtosCargo.js
index 4570614fa865..b5009c0aeaf5 100644
--- a/tgui/packages/tgui/interfaces/NtosCargo.js
+++ b/tgui/packages/tgui/interfaces/NtosCargo.js
@@ -3,9 +3,7 @@ import { NtosWindow } from '../layouts';
 
 export const NtosCargo = (props, context) => {
   return (
-    <NtosWindow
-      width={800}
-      height={500}>
+    <NtosWindow width={800} height={500}>
       <NtosWindow.Content scrollable>
         <CargoContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosConfiguration.js b/tgui/packages/tgui/interfaces/NtosConfiguration.js
index 590005adadec..1eeb184be5e8 100644
--- a/tgui/packages/tgui/interfaces/NtosConfiguration.js
+++ b/tgui/packages/tgui/interfaces/NtosConfiguration.js
@@ -14,25 +14,21 @@ export const NtosConfiguration = (props, context) => {
     hardware = [],
   } = data;
   return (
-    <NtosWindow
-      theme={PC_device_theme}
-      width={420}
-      height={630}>
+    <NtosWindow theme={PC_device_theme} width={420} height={630}>
       <NtosWindow.Content scrollable>
         <Section
           title="Power Supply"
-          buttons={(
-            <Box
-              inline
-              bold
-              mr={1}>
+          buttons={
+            <Box inline bold mr={1}>
               Power Draw: {power_usage}W
             </Box>
-          )}>
+          }
+        >
           <LabeledList>
             <LabeledList.Item
               label="Battery Status"
-              color={!battery_exists && 'average'}>
+              color={!battery_exists && 'average'}
+            >
               {battery_exists ? (
                 <ProgressBar
                   value={battery.charge}
@@ -42,10 +38,13 @@ export const NtosConfiguration = (props, context) => {
                     good: [battery.max / 2, Infinity],
                     average: [battery.max / 4, battery.max / 2],
                     bad: [-Infinity, battery.max / 4],
-                  }}>
+                  }}
+                >
                   {battery.charge} / {battery.max}
                 </ProgressBar>
-              ) : 'Not Available'}
+              ) : (
+                'Not Available'
+              )}
             </LabeledList.Item>
           </LabeledList>
         </Section>
@@ -54,35 +53,37 @@ export const NtosConfiguration = (props, context) => {
             value={disk_used}
             minValue={0}
             maxValue={disk_size}
-            color="good">
+            color="good"
+          >
             {disk_used} GQ / {disk_size} GQ
           </ProgressBar>
         </Section>
         <Section title="Hardware Components">
-          {hardware.map(component => (
+          {hardware.map((component) => (
             <Section
               key={component.name}
               title={component.name}
               level={2}
-              buttons={(
+              buttons={
                 <>
                   {!component.critical && (
                     <Button.Checkbox
                       content="Enabled"
                       checked={component.enabled}
                       mr={1}
-                      onClick={() => act('PC_toggle_component', {
-                        name: component.name,
-                      })} />
+                      onClick={() =>
+                        act('PC_toggle_component', {
+                          name: component.name,
+                        })
+                      }
+                    />
                   )}
-                  <Box
-                    inline
-                    bold
-                    mr={1}>
+                  <Box inline bold mr={1}>
                     Power Usage: {component.powerusage}W
                   </Box>
                 </>
-              )}>
+              }
+            >
               {component.desc}
             </Section>
           ))}
diff --git a/tgui/packages/tgui/interfaces/NtosCrewManifest.js b/tgui/packages/tgui/interfaces/NtosCrewManifest.js
index ef286167d1b8..0c918673accb 100644
--- a/tgui/packages/tgui/interfaces/NtosCrewManifest.js
+++ b/tgui/packages/tgui/interfaces/NtosCrewManifest.js
@@ -3,7 +3,6 @@ import { useBackend } from '../backend';
 import { Button, Section, Table } from '../components';
 import { NtosWindow } from '../layouts';
 
-
 // PARIAH EDIT
 //
 // width={500} - Original: width={400}
@@ -13,41 +12,35 @@ import { NtosWindow } from '../layouts';
 
 export const NtosCrewManifest = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    have_printer,
-    manifest = {},
-  } = data;
+  const { have_printer, manifest = {} } = data;
   return (
-    <NtosWindow
-      width={500}
-      height={480}>
+    <NtosWindow width={500} height={480}>
       <NtosWindow.Content scrollable>
         <Section
           title="Crew Manifest"
-          buttons={(
+          buttons={
             <Button
               icon="print"
               content="Print"
               disabled={!have_printer}
-              onClick={() => act('PRG_print')} />
-          )}>
+              onClick={() => act('PRG_print')}
+            />
+          }
+        >
           {map((entries, department) => (
-            <Section
-              key={department}
-              level={2}
-              title={department}>
+            <Section key={department} level={2} title={department}>
               <Table>
-                {entries.map(entry => (
-                  <Table.Row
-                    key={entry.name}
-                    className="candystripe">
-                    <Table.Cell bold>
-                      {entry.name}
-                    </Table.Cell>
+                {entries.map((entry) => (
+                  <Table.Row key={entry.name} className="candystripe">
+                    <Table.Cell bold>{entry.name}</Table.Cell>
                     <Table.Cell>
-                      {entry.rank === entry.trim // PARIAH EDIT
-                        ? entry.rank
-                        : <>{entry.rank} ({entry.trim})</>}
+                      {entry.rank === entry.trim ? ( // PARIAH EDIT
+                        entry.rank
+                      ) : (
+                        <>
+                          {entry.rank} ({entry.trim})
+                        </>
+                      )}
                     </Table.Cell>
                   </Table.Row>
                 ))}
diff --git a/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js b/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js
index d03133d83d42..2973df10d5fc 100644
--- a/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js
+++ b/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js
@@ -1,12 +1,19 @@
 import { useBackend, useSharedState } from '../backend';
-import { Box, Button, LabeledList, NoticeBox, ProgressBar, Section, Stack, Tabs } from '../components';
+import {
+  Box,
+  Button,
+  LabeledList,
+  NoticeBox,
+  ProgressBar,
+  Section,
+  Stack,
+  Tabs,
+} from '../components';
 import { NtosWindow } from '../layouts';
 
 export const NtosCyborgRemoteMonitor = (props, context) => {
   return (
-    <NtosWindow
-      width={600}
-      height={800}>
+    <NtosWindow width={600} height={800}>
       <NtosWindow.Content>
         <NtosCyborgRemoteMonitorContent />
       </NtosWindow.Content>
@@ -14,7 +21,7 @@ export const NtosCyborgRemoteMonitor = (props, context) => {
   );
 };
 
-export const ProgressSwitch = param => {
+export const ProgressSwitch = (param) => {
   switch (param) {
     case -1:
       return '_';
@@ -34,19 +41,11 @@ export const ProgressSwitch = param => {
 export const NtosCyborgRemoteMonitorContent = (props, context) => {
   const { act, data } = useBackend(context);
   const [tab_main, setTab_main] = useSharedState(context, 'tab_main', 1);
-  const {
-    card,
-    cyborgs = [],
-    DL_progress,
-  } = data;
+  const { card, cyborgs = [], DL_progress } = data;
   const storedlog = data.borglog || [];
 
   if (!cyborgs.length) {
-    return (
-      <NoticeBox>
-        No cyborg units detected.
-      </NoticeBox>
-    );
+    return <NoticeBox>No cyborg units detected.</NoticeBox>;
   }
 
   return (
@@ -57,14 +56,16 @@ export const NtosCyborgRemoteMonitorContent = (props, context) => {
             icon="robot"
             lineHeight="23px"
             selected={tab_main === 1}
-            onClick={() => setTab_main(1)}>
+            onClick={() => setTab_main(1)}
+          >
             Cyborgs
           </Tabs.Tab>
           <Tabs.Tab
             icon="clipboard"
             lineHeight="23px"
             selected={tab_main === 2}
-            onClick={() => setTab_main(2)}>
+            onClick={() => setTab_main(2)}
+          >
             Stored Log File
           </Tabs.Tab>
         </Tabs>
@@ -73,67 +74,81 @@ export const NtosCyborgRemoteMonitorContent = (props, context) => {
         <>
           {!card && (
             <Stack.Item>
-              <NoticeBox>
-                Certain features require an ID card login.
-              </NoticeBox>
+              <NoticeBox>Certain features require an ID card login.</NoticeBox>
             </Stack.Item>
           )}
           <Stack.Item grow={1}>
             <Section fill scrollable>
-              {cyborgs.map(cyborg => (
+              {cyborgs.map((cyborg) => (
                 <Section
                   key={cyborg.ref}
                   title={cyborg.name}
-                  buttons={(
+                  buttons={
                     <Button
                       icon="terminal"
                       content="Send Message"
                       color="blue"
                       disabled={!card}
-                      onClick={() => act('messagebot', {
-                        ref: cyborg.ref,
-                      })} />
-                  )}>
+                      onClick={() =>
+                        act('messagebot', {
+                          ref: cyborg.ref,
+                        })
+                      }
+                    />
+                  }
+                >
                   <LabeledList>
                     <LabeledList.Item label="Status">
-                      <Box color={cyborg.status
-                        ? 'bad'
-                        : cyborg.locked_down
-                          ? 'average'
-                          : 'good'}>
+                      <Box
+                        color={
+                          cyborg.status
+                            ? 'bad'
+                            : cyborg.locked_down
+                              ? 'average'
+                              : 'good'
+                        }
+                      >
                         {cyborg.status
-                          ? "Not Responding"
+                          ? 'Not Responding'
                           : cyborg.locked_down
-                            ? "Locked Down"
+                            ? 'Locked Down'
                             : cyborg.shell_discon
-                              ? "Nominal/Disconnected"
-                              : "Nominal"}
+                              ? 'Nominal/Disconnected'
+                              : 'Nominal'}
                       </Box>
                     </LabeledList.Item>
                     <LabeledList.Item label="Condition">
-                      <Box color={cyborg.integ <= 25
-                        ? 'bad'
-                        : cyborg.integ <= 75
-                          ? 'average'
-                          : 'good'}>
+                      <Box
+                        color={
+                          cyborg.integ <= 25
+                            ? 'bad'
+                            : cyborg.integ <= 75
+                              ? 'average'
+                              : 'good'
+                        }
+                      >
                         {cyborg.integ === 0
-                          ? "Hard Fault"
+                          ? 'Hard Fault'
                           : cyborg.integ <= 25
-                            ? "Functionality Disrupted"
+                            ? 'Functionality Disrupted'
                             : cyborg.integ <= 75
-                              ? "Functionality Impaired"
-                              : "Operational"}
+                              ? 'Functionality Impaired'
+                              : 'Operational'}
                       </Box>
                     </LabeledList.Item>
                     <LabeledList.Item label="Charge">
-                      <Box color={cyborg.charge <= 30
-                        ? 'bad'
-                        : cyborg.charge <= 70
-                          ? 'average'
-                          : 'good'}>
+                      <Box
+                        color={
+                          cyborg.charge <= 30
+                            ? 'bad'
+                            : cyborg.charge <= 70
+                              ? 'average'
+                              : 'good'
+                        }
+                      >
                         {typeof cyborg.charge === 'number'
-                          ? cyborg.charge + "%"
-                          : "Not Found"}
+                          ? cyborg.charge + '%'
+                          : 'Not Found'}
                       </Box>
                     </LabeledList.Item>
                     <LabeledList.Item label="Model">
@@ -154,23 +169,15 @@ export const NtosCyborgRemoteMonitorContent = (props, context) => {
           <Stack.Item>
             <Section>
               Scan a cyborg to download stored logs.
-              <ProgressBar
-                value={DL_progress/100}>
+              <ProgressBar value={DL_progress / 100}>
                 {ProgressSwitch(DL_progress)}
               </ProgressBar>
             </Section>
           </Stack.Item>
-          <Stack.Item
-            grow={1}>
-            <Section
-              fill
-              scrollable
-              backgroundColor="black">
-              {storedlog.map(log => (
-                <Box
-                  mb={1}
-                  key={log}
-                  color="green">
+          <Stack.Item grow={1}>
+            <Section fill scrollable backgroundColor="black">
+              {storedlog.map((log) => (
+                <Box mb={1} key={log} color="green">
                   {log}
                 </Box>
               ))}
diff --git a/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js b/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js
index efa93513e702..0517f8f80ef3 100644
--- a/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js
+++ b/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js
@@ -3,10 +3,7 @@ import { NtosCyborgRemoteMonitorContent } from './NtosCyborgRemoteMonitor';
 
 export const NtosCyborgRemoteMonitorSyndicate = (props, context) => {
   return (
-    <NtosWindow
-      width={600}
-      height={800}
-      theme="syndicate">
+    <NtosWindow width={600} height={800} theme="syndicate">
       <NtosWindow.Content scrollable>
         <NtosCyborgRemoteMonitorContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosFileManager.js b/tgui/packages/tgui/interfaces/NtosFileManager.js
index ac2e33ee874a..79d3d84ed0b3 100644
--- a/tgui/packages/tgui/interfaces/NtosFileManager.js
+++ b/tgui/packages/tgui/interfaces/NtosFileManager.js
@@ -4,12 +4,7 @@ import { NtosWindow } from '../layouts';
 
 export const NtosFileManager = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    PC_device_theme,
-    usbconnected,
-    files = [],
-    usbfiles = [],
-  } = data;
+  const { PC_device_theme, usbconnected, files = [], usbfiles = [] } = data;
   return (
     <NtosWindow theme={PC_device_theme}>
       <NtosWindow.Content scrollable>
@@ -17,14 +12,17 @@ export const NtosFileManager = (props, context) => {
           <FileTable
             files={files}
             usbconnected={usbconnected}
-            onUpload={file => act('PRG_copytousb', { name: file })}
-            onDelete={file => act('PRG_deletefile', { name: file })}
-            onRename={(file, newName) => act('PRG_renamefile', {
-              name: file,
-              new_name: newName,
-            })}
-            onDuplicate={file => act('PRG_clone', { file: file })}
-            onToggleSilence={file => act('PRG_togglesilence', { name: file })} />
+            onUpload={(file) => act('PRG_copytousb', { name: file })}
+            onDelete={(file) => act('PRG_deletefile', { name: file })}
+            onRename={(file, newName) =>
+              act('PRG_renamefile', {
+                name: file,
+                new_name: newName,
+              })
+            }
+            onDuplicate={(file) => act('PRG_clone', { file: file })}
+            onToggleSilence={(file) => act('PRG_togglesilence', { name: file })}
+          />
         </Section>
         {usbconnected && (
           <Section title="Data Disk">
@@ -32,13 +30,16 @@ export const NtosFileManager = (props, context) => {
               usbmode
               files={usbfiles}
               usbconnected={usbconnected}
-              onUpload={file => act('PRG_copyfromusb', { name: file })}
-              onDelete={file => act('PRG_usbdeletefile', { name: file })}
-              onRename={(file, newName) => act('PRG_usbrenamefile', {
-                name: file,
-                new_name: newName,
-              })}
-              onDuplicate={file => act('PRG_clone', { file: file })} />
+              onUpload={(file) => act('PRG_copyfromusb', { name: file })}
+              onDelete={(file) => act('PRG_usbdeletefile', { name: file })}
+              onRename={(file, newName) =>
+                act('PRG_usbrenamefile', {
+                  name: file,
+                  new_name: newName,
+                })
+              }
+              onDuplicate={(file) => act('PRG_clone', { file: file })}
+            />
           </Section>
         )}
       </NtosWindow.Content>
@@ -46,7 +47,7 @@ export const NtosFileManager = (props, context) => {
   );
 };
 
-const FileTable = props => {
+const FileTable = (props) => {
   const {
     files = [],
     usbconnected,
@@ -59,17 +60,11 @@ const FileTable = props => {
   return (
     <Table>
       <Table.Row header>
-        <Table.Cell>
-          File
-        </Table.Cell>
-        <Table.Cell collapsing>
-          Type
-        </Table.Cell>
-        <Table.Cell collapsing>
-          Size
-        </Table.Cell>
+        <Table.Cell>File</Table.Cell>
+        <Table.Cell collapsing>Type</Table.Cell>
+        <Table.Cell collapsing>Size</Table.Cell>
       </Table.Row>
-      {files.map(file => (
+      {files.map((file) => (
         <Table.Row key={file.name} className="candystripe">
           <Table.Cell>
             {!file.undeletable ? (
@@ -78,24 +73,22 @@ const FileTable = props => {
                 content={file.name}
                 currentValue={file.name}
                 tooltip="Rename"
-                onCommit={(e, value) => onRename(file.name, value)} />
+                onCommit={(e, value) => onRename(file.name, value)}
+              />
             ) : (
               file.name
             )}
           </Table.Cell>
-          <Table.Cell>
-            {file.type}
-          </Table.Cell>
-          <Table.Cell>
-            {file.size}
-          </Table.Cell>
+          <Table.Cell>{file.type}</Table.Cell>
+          <Table.Cell>{file.size}</Table.Cell>
           <Table.Cell collapsing>
             {!!file.alert_able && (
               <Button
                 icon={file.alert_silenced ? 'bell-slash' : 'bell'}
                 color={file.alert_silenced ? 'red' : 'default'}
                 tooltip={file.alert_silenced ? 'Unmute Alerts' : 'Mute Alerts'}
-                onClick={() => onToggleSilence(file.name)} />
+                onClick={() => onToggleSilence(file.name)}
+              />
             )}
             {!file.undeletable && (
               <>
@@ -104,20 +97,22 @@ const FileTable = props => {
                   confirmIcon="times"
                   confirmContent=""
                   tooltip="Delete"
-                  onClick={() => onDelete(file.name)} />
-                {!!usbconnected && (
-                  usbmode ? (
+                  onClick={() => onDelete(file.name)}
+                />
+                {!!usbconnected &&
+                  (usbmode ? (
                     <Button
                       icon="download"
                       tooltip="Download"
-                      onClick={() => onUpload(file.name)} />
+                      onClick={() => onUpload(file.name)}
+                    />
                   ) : (
                     <Button
                       icon="upload"
                       tooltip="Upload"
-                      onClick={() => onUpload(file.name)} />
-                  )
-                )}
+                      onClick={() => onUpload(file.name)}
+                    />
+                  ))}
               </>
             )}
           </Table.Cell>
diff --git a/tgui/packages/tgui/interfaces/NtosJobManager.js b/tgui/packages/tgui/interfaces/NtosJobManager.js
index 70e3a9e0b967..fe1a8681849a 100644
--- a/tgui/packages/tgui/interfaces/NtosJobManager.js
+++ b/tgui/packages/tgui/interfaces/NtosJobManager.js
@@ -4,9 +4,7 @@ import { NtosWindow } from '../layouts';
 
 export const NtosJobManager = (props, context) => {
   return (
-    <NtosWindow
-      width={400}
-      height={620}>
+    <NtosWindow width={400} height={620}>
       <NtosWindow.Content scrollable>
         <NtosJobManagerContent />
       </NtosWindow.Content>
@@ -16,12 +14,7 @@ export const NtosJobManager = (props, context) => {
 
 export const NtosJobManagerContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    authed,
-    cooldown,
-    slots = [],
-    prioritized = [],
-  } = data;
+  const { authed, cooldown, slots = [], prioritized = [] } = data;
   if (!authed) {
     return (
       <NoticeBox>
@@ -33,37 +26,30 @@ export const NtosJobManagerContent = (props, context) => {
     <Section>
       {cooldown > 0 && (
         <Dimmer>
-          <Box
-            bold
-            textAlign="center"
-            fontSize="20px">
+          <Box bold textAlign="center" fontSize="20px">
             On Cooldown: {cooldown}s
           </Box>
         </Dimmer>
       )}
       <Table>
         <Table.Row header>
-          <Table.Cell>
-            Prioritized
-          </Table.Cell>
-          <Table.Cell>
-            Slots
-          </Table.Cell>
+          <Table.Cell>Prioritized</Table.Cell>
+          <Table.Cell>Slots</Table.Cell>
         </Table.Row>
-        {slots.map(slot => (
-          <Table.Row
-            key={slot.title}
-            className="candystripe">
-            <Table.Cell
-              bold>
+        {slots.map((slot) => (
+          <Table.Row key={slot.title} className="candystripe">
+            <Table.Cell bold>
               <Button.Checkbox
                 fluid
                 content={slot.title}
                 disabled={slot.total <= 0}
                 checked={slot.total > 0 && prioritized.includes(slot.title)}
-                onClick={() => act('PRG_priority', {
-                  target: slot.title,
-                })} />
+                onClick={() =>
+                  act('PRG_priority', {
+                    target: slot.title,
+                  })
+                }
+              />
             </Table.Cell>
             <Table.Cell collapsing>
               {slot.current} / {slot.total}
@@ -72,15 +58,21 @@ export const NtosJobManagerContent = (props, context) => {
               <Button
                 content="Open"
                 disabled={!slot.status_open}
-                onClick={() => act('PRG_open_job', {
-                  target: slot.title,
-                })} />
+                onClick={() =>
+                  act('PRG_open_job', {
+                    target: slot.title,
+                  })
+                }
+              />
               <Button
                 content="Close"
                 disabled={!slot.status_close}
-                onClick={() => act('PRG_close_job', {
-                  target: slot.title,
-                })} />
+                onClick={() =>
+                  act('PRG_close_job', {
+                    target: slot.title,
+                  })
+                }
+              />
             </Table.Cell>
           </Table.Row>
         ))}
diff --git a/tgui/packages/tgui/interfaces/NtosMain.js b/tgui/packages/tgui/interfaces/NtosMain.js
index 28b8e610807f..a5c8033e2701 100644
--- a/tgui/packages/tgui/interfaces/NtosMain.js
+++ b/tgui/packages/tgui/interfaces/NtosMain.js
@@ -22,12 +22,13 @@ export const NtosMain = (props, context) => {
   } = data;
   return (
     <NtosWindow
-      title={device_theme === 'syndicate'
-        && 'Syndix Main Menu'
-        || 'NtOS Main Menu'}
+      title={
+        (device_theme === 'syndicate' && 'Syndix Main Menu') || 'NtOS Main Menu'
+      }
       theme={device_theme}
       width={400}
-      height={500}>
+      height={500}
+    >
       <NtosWindow.Content scrollable>
         {!!has_light && (
           <Section>
@@ -35,12 +36,11 @@ export const NtosMain = (props, context) => {
               width="144px"
               icon="lightbulb"
               selected={light_on}
-              onClick={() => act('PC_toggle_light')}>
+              onClick={() => act('PC_toggle_light')}
+            >
               Flashlight: {light_on ? 'ON' : 'OFF'}
             </Button>
-            <Button
-              ml={1}
-              onClick={() => act('PC_light_color')}>
+            <Button ml={1} onClick={() => act('PC_light_color')}>
               Color:
               <ColorBox ml={1} color={comp_light_color} />
             </Button>
@@ -49,25 +49,27 @@ export const NtosMain = (props, context) => {
         {!!(cardholder && show_imprint) && (
           <Section
             title="User Login"
-            buttons={(
+            buttons={
               <>
                 <Button
                   icon="eject"
                   content="Eject ID"
                   disabled={!proposed_login.IDName}
-                  onClick={() => act('PC_Eject_Disk', { name: "ID" })}
+                  onClick={() => act('PC_Eject_Disk', { name: 'ID' })}
                 />
                 <Button
                   icon="dna"
                   content="Imprint ID"
-                  disabled={!proposed_login.IDName || (
-                    proposed_login.IDName === login.IDName
-                    && proposed_login.IDJob === login.IDJob
-                  )}
-                  onClick={() => act('PC_Imprint_ID', { name: "ID" })}
+                  disabled={
+                    !proposed_login.IDName ||
+                    (proposed_login.IDName === login.IDName &&
+                      proposed_login.IDJob === login.IDJob)
+                  }
+                  onClick={() => act('PC_Imprint_ID', { name: 'ID' })}
                 />
               </>
-            )}>
+            }
+          >
             <Table>
               <Table.Row>
                 ID Name: {login.IDName} ({proposed_login.IDName})
@@ -81,7 +83,7 @@ export const NtosMain = (props, context) => {
         {!!removable_media.length && (
           <Section title="Media Eject">
             <Table>
-              {removable_media.map(device => (
+              {removable_media.map((device) => (
                 <Table.Row key={device}>
                   <Table.Cell>
                     <Button
@@ -107,9 +109,11 @@ export const NtosMain = (props, context) => {
                     icon="eject"
                     color="transparent"
                     content="Eject pAI"
-                    onClick={() => act('PC_Pai_Interact', {
-                      option: "eject",
-                    })}
+                    onClick={() =>
+                      act('PC_Pai_Interact', {
+                        option: 'eject',
+                      })
+                    }
                   />
                 </Table.Cell>
               </Table.Row>
@@ -120,9 +124,11 @@ export const NtosMain = (props, context) => {
                     icon="cat"
                     color="transparent"
                     content="Configure pAI"
-                    onClick={() => act('PC_Pai_Interact', {
-                      option: "interact",
-                    })}
+                    onClick={() =>
+                      act('PC_Pai_Interact', {
+                        option: 'interact',
+                      })
+                    }
                   />
                 </Table.Cell>
               </Table.Row>
@@ -131,7 +137,7 @@ export const NtosMain = (props, context) => {
         )}
         <Section title="Programs">
           <Table>
-            {programs.map(program => (
+            {programs.map((program) => (
               <Table.Row key={program.name}>
                 <Table.Cell>
                   <Button
@@ -139,10 +145,13 @@ export const NtosMain = (props, context) => {
                     color={program.alert ? 'yellow' : 'transparent'}
                     icon={program.icon}
                     content={program.desc}
-                    onClick={() => act('PC_runprogram', {
-                      name: program.name,
-                      is_disk: false,
-                    })} />
+                    onClick={() =>
+                      act('PC_runprogram', {
+                        name: program.name,
+                        is_disk: false,
+                      })
+                    }
+                  />
                 </Table.Cell>
                 <Table.Cell collapsing width="18px">
                   {!!program.running && (
@@ -151,9 +160,12 @@ export const NtosMain = (props, context) => {
                       icon="times"
                       tooltip="Close program"
                       tooltipPosition="left"
-                      onClick={() => act('PC_killprogram', {
-                        name: program.name,
-                      })} />
+                      onClick={() =>
+                        act('PC_killprogram', {
+                          name: program.name,
+                        })
+                      }
+                    />
                   )}
                 </Table.Cell>
                 <Table.Cell collapsing width="18px">
@@ -162,9 +174,12 @@ export const NtosMain = (props, context) => {
                     content="A"
                     tooltip="Set Autorun"
                     tooltipPosition="left"
-                    onClick={() => act('PC_setautorun', {
-                      name: program.name,
-                    })} />
+                    onClick={() =>
+                      act('PC_setautorun', {
+                        name: program.name,
+                      })
+                    }
+                  />
                 </Table.Cell>
               </Table.Row>
             ))}
@@ -173,18 +188,22 @@ export const NtosMain = (props, context) => {
         {!!disk && (
           <Section
             // pain
-            title={disk_name
-              ? disk_name.substring(0, disk_name.length - 5)
-              : "No Job Disk Inserted"}
-            buttons={(
+            title={
+              disk_name
+                ? disk_name.substring(0, disk_name.length - 5)
+                : 'No Job Disk Inserted'
+            }
+            buttons={
               <Button
                 icon="eject"
                 content="Eject Job Disk"
                 disabled={!disk_name}
-                onClick={() => act('PC_Eject_Disk', { name: "job disk" })} />
-            )}>
+                onClick={() => act('PC_Eject_Disk', { name: 'job disk' })}
+              />
+            }
+          >
             <Table>
-              {disk_programs.map(program => (
+              {disk_programs.map((program) => (
                 <Table.Row key={program.name}>
                   <Table.Cell>
                     <Button
@@ -192,10 +211,13 @@ export const NtosMain = (props, context) => {
                       color={program.alert ? 'yellow' : 'transparent'}
                       icon={program.icon}
                       content={program.desc}
-                      onClick={() => act('PC_runprogram', {
-                        name: program.name,
-                        is_disk: true,
-                      })} />
+                      onClick={() =>
+                        act('PC_runprogram', {
+                          name: program.name,
+                          is_disk: true,
+                        })
+                      }
+                    />
                   </Table.Cell>
                   <Table.Cell collapsing width="18px">
                     {!!program.running && (
@@ -204,9 +226,12 @@ export const NtosMain = (props, context) => {
                         icon="times"
                         tooltip="Close program"
                         tooltipPosition="left"
-                        onClick={() => act('PC_killprogram', {
-                          name: program.name,
-                        })} />
+                        onClick={() =>
+                          act('PC_killprogram', {
+                            name: program.name,
+                          })
+                        }
+                      />
                     )}
                   </Table.Cell>
                   <Table.Cell collapsing width="18px">
@@ -215,9 +240,12 @@ export const NtosMain = (props, context) => {
                       content="A"
                       tooltip="Set Autorun"
                       tooltipPosition="left"
-                      onClick={() => act('PC_setautorun', {
-                        name: program.name,
-                      })} />
+                      onClick={() =>
+                        act('PC_setautorun', {
+                          name: program.name,
+                        })
+                      }
+                    />
                   </Table.Cell>
                 </Table.Row>
               ))}
diff --git a/tgui/packages/tgui/interfaces/NtosMessenger.js b/tgui/packages/tgui/interfaces/NtosMessenger.js
index 34489a140cfa..acbb53e49c88 100644
--- a/tgui/packages/tgui/interfaces/NtosMessenger.js
+++ b/tgui/packages/tgui/interfaces/NtosMessenger.js
@@ -13,11 +13,7 @@ const NoIDDimmer = (props, context) => {
             <Stack.Item>
               <Stack ml={-2}>
                 <Stack.Item>
-                  <Icon
-                    color="red"
-                    name="address-card"
-                    size={10}
-                  />
+                  <Icon color="red" name="address-card" size={10} />
                 </Stack.Item>
               </Stack>
             </Stack.Item>
@@ -63,38 +59,33 @@ export const NtosMessenger = (props, context) => {
                 onClick={() => act('PDA_clearMessages')}
               />
             </Section>
-            {messages.map(message => (
+            {messages.map((message) => (
               <Stack vertical key={message} mt={1}>
                 <Section fill textAlign="left">
                   <Box italic opacity={0.5}>
-                    {message.outgoing ? (
-                      "(OUTGOING)"
-                    ) : (
-                      "(INCOMING)"
-                    )}
+                    {message.outgoing ? '(OUTGOING)' : '(INCOMING)'}
                   </Box>
                   {/* Automated or outgoing, don't give a reply link, as
-                    * the reply address may not actually be valid.
-                    */}
+                   * the reply address may not actually be valid.
+                   */}
                   {message.outgoing || message.automated ? (
-                    <Box bold>
-                      {message.name + " (" + message.job + ")"}
-                    </Box>
+                    <Box bold>{message.name + ' (' + message.job + ')'}</Box>
                   ) : (
-                    <Button transparent
-                      content={message.name + " (" + message.job + ")"}
-                      onClick={() => act('PDA_sendMessage', {
-                        name: message.name,
-                        job: message.job,
-                        target_addr: message.target_addr,
-                      })}
+                    <Button
+                      transparent
+                      content={message.name + ' (' + message.job + ')'}
+                      onClick={() =>
+                        act('PDA_sendMessage', {
+                          name: message.name,
+                          job: message.job,
+                          target_addr: message.target_addr,
+                        })
+                      }
                     />
                   )}
                 </Section>
                 <Section mt={-1}>
-                  <Box italic>
-                    {message.contents}
-                  </Box>
+                  <Box italic>{message.contents}</Box>
                 </Section>
               </Stack>
             ))}
@@ -127,7 +118,11 @@ export const NtosMessenger = (props, context) => {
               />
               <Button
                 icon="address-card"
-                content={sending_and_receiving ? "Send / Receive: On" : "Send / Receive: Off"}
+                content={
+                  sending_and_receiving
+                    ? 'Send / Receive: On'
+                    : 'Send / Receive: Off'
+                }
                 onClick={() => act('PDA_sAndR')}
               />
               <Button
@@ -142,7 +137,7 @@ export const NtosMessenger = (props, context) => {
               />
               <Button
                 icon="sort"
-                content={`Sort by: ${sortByJob ? "Job" : "Name"}`}
+                content={`Sort by: ${sortByJob ? 'Job' : 'Name'}`}
                 onClick={() => act('PDA_changeSortStyle')}
               />
               <Button
@@ -154,7 +149,7 @@ export const NtosMessenger = (props, context) => {
                 <Button
                   icon="bug"
                   color="bad"
-                  content={`Attach Virus: ${sending_virus ? "Yes" : "No"}`}
+                  content={`Attach Virus: ${sending_virus ? 'Yes' : 'No'}`}
                   onClick={() => act('PDA_toggleVirus')}
                 />
               )}
@@ -170,15 +165,18 @@ export const NtosMessenger = (props, context) => {
         <Stack vertical mt={1}>
           <Section fill>
             <Stack vertical>
-              {messengers.map(messenger => (
+              {messengers.map((messenger) => (
                 <Button
                   key={messenger.target_addr}
                   fluid
-                  onClick={() => act('PDA_sendMessage', {
-                    name: messenger.name,
-                    job: messenger.job,
-                    target_addr: messenger.target_addr,
-                  })}>
+                  onClick={() =>
+                    act('PDA_sendMessage', {
+                      name: messenger.name,
+                      job: messenger.job,
+                      target_addr: messenger.target_addr,
+                    })
+                  }
+                >
                   {messenger.name} ({messenger.job})
                 </Button>
               ))}
@@ -193,9 +191,7 @@ export const NtosMessenger = (props, context) => {
             )}
           </Section>
         </Stack>
-        {(!owner && !isSilicon) && (
-          <NoIDDimmer />
-        )}
+        {!owner && !isSilicon && <NoIDDimmer />}
       </NtosWindow.Content>
     </NtosWindow>
   );
diff --git a/tgui/packages/tgui/interfaces/NtosNetChat.js b/tgui/packages/tgui/interfaces/NtosNetChat.js
index 9a573a44ad7d..fc1341c6cfae 100644
--- a/tgui/packages/tgui/interfaces/NtosNetChat.js
+++ b/tgui/packages/tgui/interfaces/NtosNetChat.js
@@ -1,5 +1,13 @@
 import { useBackend } from '../backend';
-import { Box, Button, Dimmer, Icon, Input, Section, Stack } from '../components';
+import {
+  Box,
+  Button,
+  Dimmer,
+  Icon,
+  Input,
+  Section,
+  Stack,
+} from '../components';
 import { NtosWindow } from '../layouts';
 
 // byond defines for the program state
@@ -8,9 +16,9 @@ const CLIENT_AWAY = 1;
 const CLIENT_OFFLINE = 0;
 
 const STATUS2TEXT = {
-  0: "Offline",
-  1: "Away",
-  2: "Online",
+  0: 'Offline',
+  1: 'Away',
+  2: 'Online',
 };
 
 const NoChannelDimmer = (props, context) => {
@@ -22,24 +30,13 @@ const NoChannelDimmer = (props, context) => {
         <Stack.Item>
           <Stack ml={-2}>
             <Stack.Item>
-              <Icon
-                color="green"
-                name="grin-beam"
-                size={10}
-              />
+              <Icon color="green" name="grin-beam" size={10} />
             </Stack.Item>
             <Stack.Item mt={-8}>
-              <Icon
-                name="comment-dots"
-                size={10}
-              />
+              <Icon name="comment-dots" size={10} />
             </Stack.Item>
             <Stack.Item ml={-1}>
-              <Icon
-                color="green"
-                name="smile"
-                size={10}
-              />
+              <Icon color="green" name="smile" size={10} />
             </Stack.Item>
           </Stack>
         </Stack.Item>
@@ -70,8 +67,8 @@ export const NtosNetChat = (props, context) => {
     clients = [],
     messages = [],
   } = data;
-  const in_channel = (active_channel !== null);
-  const authorized = (authed || adminmode);
+  const in_channel = active_channel !== null;
+  const authorized = authed || adminmode;
   // this list has cliented ordered from their status. online > away > offline
   const displayed_clients = clients.sort((clientA, clientB) => {
     if (clientA.operator) {
@@ -84,24 +81,22 @@ export const NtosNetChat = (props, context) => {
   });
   const client_color = (client) => {
     if (client.operator) {
-      return "green";
+      return 'green';
     }
     switch (client.status) {
       case CLIENT_ONLINE:
-        return "white";
+        return 'white';
       case CLIENT_AWAY:
-        return "yellow";
+        return 'yellow';
       case CLIENT_OFFLINE:
       default:
-        return "label";
+        return 'label';
     }
   };
   // client from this computer!
-  const this_client = clients.find(client => client.ref === selfref);
+  const this_client = clients.find((client) => client.ref === selfref);
   return (
-    <NtosWindow
-      width={1000}
-      height={675}>
+    <NtosWindow width={1000} height={675}>
       <NtosWindow.Content>
         <Stack fill>
           <Stack.Item>
@@ -111,40 +106,48 @@ export const NtosNetChat = (props, context) => {
                   <Button.Input
                     fluid
                     content="New Channel..."
-                    onCommit={(e, value) => act('PRG_newchannel', {
-                      new_channel_name: value,
-                    })} />
-                  {all_channels.map(channel => (
+                    onCommit={(e, value) =>
+                      act('PRG_newchannel', {
+                        new_channel_name: value,
+                      })
+                    }
+                  />
+                  {all_channels.map((channel) => (
                     <Button
                       fluid
                       key={channel.chan}
                       content={channel.chan}
                       selected={channel.id === active_channel}
                       color="transparent"
-                      onClick={() => act('PRG_joinchannel', {
-                        id: channel.id,
-                      })} />
+                      onClick={() =>
+                        act('PRG_joinchannel', {
+                          id: channel.id,
+                        })
+                      }
+                    />
                   ))}
                 </Stack.Item>
                 <Stack.Item>
-                  <Box>
-                    Username:
-                  </Box>
+                  <Box>Username:</Box>
                   <Button.Input
                     fluid
                     mt={1}
                     content={username + '...'}
                     currentValue={username}
-                    onCommit={(e, value) => act('PRG_changename', {
-                      new_name: value,
-                    })} />
+                    onCommit={(e, value) =>
+                      act('PRG_changename', {
+                        new_name: value,
+                      })
+                    }
+                  />
                   {!!can_admin && (
                     <Button
                       fluid
                       bold
-                      content={"ADMIN MODE: " + (adminmode ? 'ON' : 'OFF')}
+                      content={'ADMIN MODE: ' + (adminmode ? 'ON' : 'OFF')}
                       color={adminmode ? 'bad' : 'good'}
-                      onClick={() => act('PRG_toggleadmin')} />
+                      onClick={() => act('PRG_toggleadmin')}
+                    />
                   )}
                 </Stack.Item>
               </Stack>
@@ -155,49 +158,43 @@ export const NtosNetChat = (props, context) => {
             <Stack vertical fill>
               <Stack.Item grow>
                 <Section scrollable fill>
-                  {in_channel && (
-                    authorized ? (
-                      messages.map(message => (
-                        <Box
-                          key={message.msg}>
-                          {message.msg}
-                        </Box>
+                  {(in_channel &&
+                    (authorized ? (
+                      messages.map((message) => (
+                        <Box key={message.msg}>{message.msg}</Box>
                       ))
                     ) : (
-                      <Box
-                        textAlign="center">
+                      <Box textAlign="center">
                         <Icon
                           name="exclamation-triangle"
                           mt={4}
-                          fontSize="40px" />
-                        <Box
-                          mt={1}
-                          bold
-                          fontSize="18px">
+                          fontSize="40px"
+                        />
+                        <Box mt={1} bold fontSize="18px">
                           THIS CHANNEL IS PASSWORD PROTECTED
                         </Box>
-                        <Box mt={1}>
-                          INPUT PASSWORD TO ACCESS
-                        </Box>
+                        <Box mt={1}>INPUT PASSWORD TO ACCESS</Box>
                       </Box>
-                    )
-                  ) || (
-                    <NoChannelDimmer />
-                  )}
+                    ))) || <NoChannelDimmer />}
                 </Section>
               </Stack.Item>
               {!!in_channel && (
                 <Input
-                  backgroundColor={(this_client && this_client.muted) && "red"}
+                  backgroundColor={this_client && this_client.muted && 'red'}
                   height="22px"
-                  placeholder={(this_client && this_client.muted)
-                    && "You are muted!" || "Message "+title}
+                  placeholder={
+                    (this_client && this_client.muted && 'You are muted!') ||
+                    'Message ' + title
+                  }
                   fluid
                   selfClear
                   mt={1}
-                  onEnter={(e, value) => act('PRG_speak', {
-                    message: value,
-                  })} />
+                  onEnter={(e, value) =>
+                    act('PRG_speak', {
+                      message: value,
+                    })
+                  }
+                />
               )}
             </Stack>
           </Stack.Item>
@@ -209,12 +206,13 @@ export const NtosNetChat = (props, context) => {
                   <Stack.Item grow>
                     <Section scrollable fill>
                       <Stack vertical>
-                        {displayed_clients.map(client => (
+                        {displayed_clients.map((client) => (
                           <Stack height="18px" fill key={client.name}>
                             <Stack.Item
                               basis={0}
                               grow
-                              color={client_color(client)}>
+                              color={client_color(client)}
+                            >
                               {client.name}
                             </Stack.Item>
                             {client !== this_client && (
@@ -224,27 +222,40 @@ export const NtosNetChat = (props, context) => {
                                     disabled={this_client?.muted}
                                     compact
                                     icon="bullhorn"
-                                    tooltip={!this_client?.muted
-                                      && "Ping" || "You are muted!"}
+                                    tooltip={
+                                      (!this_client?.muted && 'Ping') ||
+                                      'You are muted!'
+                                    }
                                     tooltipPosition="left"
-                                    onClick={() => act('PRG_ping_user', {
-                                      ref: client.ref,
-                                    })} />
+                                    onClick={() =>
+                                      act('PRG_ping_user', {
+                                        ref: client.ref,
+                                      })
+                                    }
+                                  />
                                 </Stack.Item>
                                 {!!is_operator && (
                                   <Stack.Item>
                                     <Button
                                       compact
-                                      icon={!client.muted
-                                        && "volume-up" || "volume-mute"}
-                                      color={!client.muted
-                                        && "green" || "red"}
-                                      tooltip={!client.muted
-                                        && "Mute this User" || "Unmute this User"}
+                                      icon={
+                                        (!client.muted && 'volume-up') ||
+                                        'volume-mute'
+                                      }
+                                      color={
+                                        (!client.muted && 'green') || 'red'
+                                      }
+                                      tooltip={
+                                        (!client.muted && 'Mute this User') ||
+                                        'Unmute this User'
+                                      }
                                       tooltipPosition="left"
-                                      onClick={() => act('PRG_mute_user', {
-                                        ref: client.ref,
-                                      })} />
+                                      onClick={() =>
+                                        act('PRG_mute_user', {
+                                          ref: client.ref,
+                                        })
+                                      }
+                                    />
                                   </Stack.Item>
                                 )}
                               </>
@@ -255,9 +266,7 @@ export const NtosNetChat = (props, context) => {
                     </Section>
                   </Stack.Item>
                   <Section>
-                    <Stack.Item mb="8px">
-                      Settings for {title}:
-                    </Stack.Item>
+                    <Stack.Item mb="8px">Settings for {title}:</Stack.Item>
                     <Stack.Item>
                       {!!(in_channel && authorized) && (
                         <>
@@ -265,13 +274,17 @@ export const NtosNetChat = (props, context) => {
                             fluid
                             content="Save log..."
                             defaultValue="new_log"
-                            onCommit={(e, value) => act('PRG_savelog', {
-                              log_name: value,
-                            })} />
+                            onCommit={(e, value) =>
+                              act('PRG_savelog', {
+                                log_name: value,
+                              })
+                            }
+                          />
                           <Button.Confirm
                             fluid
                             content="Leave Channel"
-                            onClick={() => act('PRG_leavechannel')} />
+                            onClick={() => act('PRG_leavechannel')}
+                          />
                         </>
                       )}
                       {!!(is_operator && authed) && (
@@ -280,20 +293,27 @@ export const NtosNetChat = (props, context) => {
                             fluid
                             disabled={strong}
                             content="Delete Channel"
-                            onClick={() => act('PRG_deletechannel')} />
+                            onClick={() => act('PRG_deletechannel')}
+                          />
                           <Button.Input
                             fluid
                             disabled={strong}
                             content="Rename Channel..."
-                            onCommit={(e, value) => act('PRG_renamechannel', {
-                              new_name: value,
-                            })} />
+                            onCommit={(e, value) =>
+                              act('PRG_renamechannel', {
+                                new_name: value,
+                              })
+                            }
+                          />
                           <Button.Input
                             fluid
                             content="Set Password..."
-                            onCommit={(e, value) => act('PRG_setpassword', {
-                              new_password: value,
-                            })} />
+                            onCommit={(e, value) =>
+                              act('PRG_setpassword', {
+                                new_password: value,
+                              })
+                            }
+                          />
                         </>
                       )}
                     </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/NtosNetDos.js b/tgui/packages/tgui/interfaces/NtosNetDos.js
index f694638a6e81..b83794d790b7 100644
--- a/tgui/packages/tgui/interfaces/NtosNetDos.js
+++ b/tgui/packages/tgui/interfaces/NtosNetDos.js
@@ -4,10 +4,7 @@ import { NtosWindow } from '../layouts';
 
 export const NtosNetDos = (props, context) => {
   return (
-    <NtosWindow
-      width={400}
-      height={250}
-      theme="syndicate">
+    <NtosWindow width={400} height={250} theme="syndicate">
       <NtosWindow.Content>
         <NtosNetDosContent />
       </NtosWindow.Content>
@@ -18,22 +15,12 @@ export const NtosNetDos = (props, context) => {
 export const NtosNetDosContent = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const {
-    relays = [],
-    focus,
-    target,
-    speed,
-    overload,
-    capacity,
-    error,
-  } = data;
+  const { relays = [], focus, target, speed, overload, capacity, error } = data;
 
   if (error) {
     return (
       <>
-        <NoticeBox>
-          {error}
-        </NoticeBox>
+        <NoticeBox>{error}</NoticeBox>
         <Button
           fluid
           content="Reset"
@@ -44,14 +31,14 @@ export const NtosNetDosContent = (props, context) => {
     );
   }
 
-  const generate10String = length => {
-    let outString = "";
-    const factor = (overload / capacity);
+  const generate10String = (length) => {
+    let outString = '';
+    const factor = overload / capacity;
     while (outString.length < length) {
       if (Math.random() > factor) {
-        outString += "0";
+        outString += '0';
       } else {
-        outString += "1";
+        outString += '1';
       }
     }
     return outString;
@@ -62,25 +49,15 @@ export const NtosNetDosContent = (props, context) => {
   if (target) {
     return (
       <Section fontFamily="monospace" textAlign="center">
-        <Box>
-          CURRENT SPEED: {speed} GQ/s
-        </Box>
+        <Box>CURRENT SPEED: {speed} GQ/s</Box>
         <Box>
           {/* I don't care anymore */}
           {generate10String(lineLength)}
         </Box>
-        <Box>
-          {generate10String(lineLength)}
-        </Box>
-        <Box>
-          {generate10String(lineLength)}
-        </Box>
-        <Box>
-          {generate10String(lineLength)}
-        </Box>
-        <Box>
-          {generate10String(lineLength)}
-        </Box>
+        <Box>{generate10String(lineLength)}</Box>
+        <Box>{generate10String(lineLength)}</Box>
+        <Box>{generate10String(lineLength)}</Box>
+        <Box>{generate10String(lineLength)}</Box>
       </Section>
     );
   }
@@ -89,14 +66,16 @@ export const NtosNetDosContent = (props, context) => {
     <Section>
       <LabeledList>
         <LabeledList.Item label="Target">
-          {relays.map(relay => (
+          {relays.map((relay) => (
             <Button
               key={relay.id}
               content={relay.id}
               selected={focus === relay.id}
-              onClick={() => act('PRG_target_relay', {
-                targid: relay.id,
-              })}
+              onClick={() =>
+                act('PRG_target_relay', {
+                  targid: relay.id,
+                })
+              }
             />
           ))}
         </LabeledList.Item>
diff --git a/tgui/packages/tgui/interfaces/NtosNetDownloader.js b/tgui/packages/tgui/interfaces/NtosNetDownloader.js
index 88e7062a7fb5..f499b9cd04d8 100644
--- a/tgui/packages/tgui/interfaces/NtosNetDownloader.js
+++ b/tgui/packages/tgui/interfaces/NtosNetDownloader.js
@@ -1,6 +1,16 @@
 import { scale, toFixed } from 'common/math';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Stack, Icon, LabeledList, NoticeBox, ProgressBar, Section, Tabs } from '../components';
+import {
+  Box,
+  Button,
+  Stack,
+  Icon,
+  LabeledList,
+  NoticeBox,
+  ProgressBar,
+  Section,
+  Tabs,
+} from '../components';
 import { flow } from 'common/fp';
 import { filter, sortBy } from 'common/collections';
 import { NtosWindow } from '../layouts';
@@ -22,66 +32,70 @@ export const NtosNetDownloader = (props, context) => {
   } = data;
   const all_categories = ['All'].concat(categories);
   const downloadpercentage = toFixed(
-    scale(downloadcompletion, 0, downloadsize) * 100
+    scale(downloadcompletion, 0, downloadsize) * 100,
+  );
+  const [selectedCategory, setSelectedCategory] = useLocalState(
+    context,
+    'category',
+    all_categories[0],
   );
-  const [
-    selectedCategory,
-    setSelectedCategory,
-  ] = useLocalState(context, 'category', all_categories[0]);
   const items = flow([
     // This filters the list to only contain programs with category
-    selectedCategory !== all_categories[0]
-    && filter(program => program.category === selectedCategory),
+    selectedCategory !== all_categories[0] &&
+      filter((program) => program.category === selectedCategory),
     // This filters the list to only contain verified programs
-    (!emagged && PC_device_theme === "ntos")
-    && filter(program => program.verifiedsource === 1),
+    !emagged &&
+      PC_device_theme === 'ntos' &&
+      filter((program) => program.verifiedsource === 1),
     // This sorts all programs in the lists by name and compatibility
     sortBy(
-      program => -program.compatible,
-      program => program.filedesc),
+      (program) => -program.compatible,
+      (program) => program.filedesc,
+    ),
   ])(programs);
   const disk_free_space = downloading
     ? disk_size - toFixed(disk_used + downloadcompletion)
     : disk_size - disk_used;
   return (
-    <NtosWindow
-      theme={PC_device_theme}
-      width={600}
-      height={600}>
+    <NtosWindow theme={PC_device_theme} width={600} height={600}>
       <NtosWindow.Content scrollable>
         {!!error && (
           <NoticeBox>
-            <Box mb={1}>
-              {error}
-            </Box>
-            <Button
-              content="Reset"
-              onClick={() => act('PRG_reseterror')} />
+            <Box mb={1}>{error}</Box>
+            <Button content="Reset" onClick={() => act('PRG_reseterror')} />
           </NoticeBox>
         )}
         <Section>
           <LabeledList>
             <LabeledList.Item
               label="Hard drive"
-              buttons={(!!downloading) && (
-                <Button
-                  icon="spinner"
-                  iconSpin={1}
-                  tooltipPosition="left"
-                  tooltip={!!downloading && (
-                    `Download: ${downloadname}.prg (${downloadpercentage}%)`
-                  )} />
-              ) || (!!downloadname && (
-                <Button
-                  color="good"
-                  icon="download"
-                  tooltipPosition="left"
-                  tooltip={`${downloadname}.prg downloaded`} />
-              ))}>
+              buttons={
+                (!!downloading && (
+                  <Button
+                    icon="spinner"
+                    iconSpin={1}
+                    tooltipPosition="left"
+                    tooltip={
+                      !!downloading &&
+                      `Download: ${downloadname}.prg (${downloadpercentage}%)`
+                    }
+                  />
+                )) ||
+                (!!downloadname && (
+                  <Button
+                    color="good"
+                    icon="download"
+                    tooltipPosition="left"
+                    tooltip={`${downloadname}.prg downloaded`}
+                  />
+                ))
+              }
+            >
               <ProgressBar
                 value={downloading ? disk_used + downloadcompletion : disk_used}
                 minValue={0}
-                maxValue={disk_size}>
+                maxValue={disk_size}
+              >
                 <Box textAlign="left">
                   {`${disk_free_space} GQ free of ${disk_size} GQ`}
                 </Box>
@@ -92,21 +106,20 @@ export const NtosNetDownloader = (props, context) => {
         <Stack>
           <Stack.Item minWidth="105px" shrink={0} basis={0}>
             <Tabs vertical>
-              {all_categories.map(category => (
+              {all_categories.map((category) => (
                 <Tabs.Tab
                   key={category}
                   selected={category === selectedCategory}
-                  onClick={() => setSelectedCategory(category)}>
+                  onClick={() => setSelectedCategory(category)}
+                >
                   {category}
                 </Tabs.Tab>
               ))}
             </Tabs>
           </Stack.Item>
           <Stack.Item grow={1} basis={0}>
-            {items?.map(program => (
-              <Program
-                key={program.filename}
-                program={program} />
+            {items?.map((program) => (
+              <Program key={program.filename} program={program} />
             ))}
           </Stack.Item>
         </Stack>
@@ -134,54 +147,71 @@ const Program = (props, context) => {
           <Icon name={program.icon} mr={1} />
           {program.filedesc}
         </Stack.Item>
-        <Stack.Item shrink={0} width="48px" textAlign="right" color="label" nowrap>
+        <Stack.Item
+          shrink={0}
+          width="48px"
+          textAlign="right"
+          color="label"
+          nowrap
+        >
           {program.size} GQ
         </Stack.Item>
         <Stack.Item shrink={0} width="134px" textAlign="right">
-          {(downloading && program.filename === downloadname) && (
+          {(downloading && program.filename === downloadname && (
             <ProgressBar
               width="101px"
               height="23px"
               color="good"
               minValue={0}
               maxValue={program.size}
-              value={downloadcompletion} />
-          ) || (
-            (!program.installed
-              && program.compatible
-              && program.access
-              && program.size < disk_free) && (
-              <Button
-                bold
-                icon="download"
-                content="Download"
-                disabled={downloading}
-                tooltipPosition="left"
-                tooltip={!!downloading && ('Awaiting download completion...')}
-                onClick={() => act('PRG_downloadfile', {
-                  filename: program.filename,
-                })} />
-            ) || (
+              value={downloadcompletion}
+            />
+          )) ||
+            (!program.installed &&
+              program.compatible &&
+              program.access &&
+              program.size < disk_free && (
+                <Button
+                  bold
+                  icon="download"
+                  content="Download"
+                  disabled={downloading}
+                  tooltipPosition="left"
+                  tooltip={!!downloading && 'Awaiting download completion...'}
+                  onClick={() =>
+                    act('PRG_downloadfile', {
+                      filename: program.filename,
+                    })
+                  }
+                />
+              )) || (
               <Button
                 bold
                 icon={program.installed ? 'check' : 'times'}
                 color={
-                  program.installed ? 'good'
-                    : !program.compatible ? 'bad' : 'grey'
+                  program.installed
+                    ? 'good'
+                    : !program.compatible
+                      ? 'bad'
+                      : 'grey'
                 }
                 content={
-                  program.installed ? 'Installed'
-                    : !program.compatible ? 'Incompatible'
-                      : !program.access ? 'No Access' : 'No Space'
-                } />
-            )
-          )}
+                  program.installed
+                    ? 'Installed'
+                    : !program.compatible
+                      ? 'Incompatible'
+                      : !program.access
+                        ? 'No Access'
+                        : 'No Space'
+                }
+              />
+            )}
         </Stack.Item>
       </Stack>
       <Box mt={1} italic color="label">
         {program.fileinfo}
       </Box>
-      {(!program.verifiedsource && PC_device_theme === "ntos") && (
+      {!program.verifiedsource && PC_device_theme === 'ntos' && (
         <NoticeBox mt={1} mb={0} danger fontSize="12px">
           Unverified source. Please note that Nanotrasen does not recommend
           download and usage of software from non-official servers.
diff --git a/tgui/packages/tgui/interfaces/NtosNetMonitor.js b/tgui/packages/tgui/interfaces/NtosNetMonitor.js
index f0aaad2231a8..80f5db87f040 100644
--- a/tgui/packages/tgui/interfaces/NtosNetMonitor.js
+++ b/tgui/packages/tgui/interfaces/NtosNetMonitor.js
@@ -1,5 +1,12 @@
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, NoticeBox, NumberInput, Section } from '../components';
+import {
+  Box,
+  Button,
+  LabeledList,
+  NoticeBox,
+  NumberInput,
+  Section,
+} from '../components';
 import { NtosWindow } from '../layouts';
 
 export const NtosNetMonitor = (props, context) => {
@@ -22,119 +29,137 @@ export const NtosNetMonitor = (props, context) => {
     <NtosWindow>
       <NtosWindow.Content scrollable>
         <NoticeBox>
-          WARNING: Disabling wireless transmitters when using
-          a wireless device may prevent you from reenabling them!
+          WARNING: Disabling wireless transmitters when using a wireless device
+          may prevent you from reenabling them!
         </NoticeBox>
         <Section
           title="Wireless Connectivity"
-          buttons={(
+          buttons={
             <Button.Confirm
               icon={ntnetstatus ? 'power-off' : 'times'}
               content={ntnetstatus ? 'ENABLED' : 'DISABLED'}
               selected={ntnetstatus}
-              onClick={() => act('toggleWireless')} />
-          )}>
+              onClick={() => act('toggleWireless')}
+            />
+          }
+        >
           {ntnetrelays ? (
             <LabeledList>
               <LabeledList.Item label="Active NTNet Relays">
                 {ntnetrelays}
               </LabeledList.Item>
             </LabeledList>
-          ) : "No Relays Connected"}
+          ) : (
+            'No Relays Connected'
+          )}
         </Section>
         <Section title="Firewall Configuration">
           <LabeledList>
             <LabeledList.Item
               label="Software Downloads"
-              buttons={(
+              buttons={
                 <Button
                   icon={config_softwaredownload ? 'power-off' : 'times'}
                   content={config_softwaredownload ? 'ENABLED' : 'DISABLED'}
                   selected={config_softwaredownload}
-                  onClick={() => act('toggle_function', { id: "1" })} />
-              )} />
+                  onClick={() => act('toggle_function', { id: '1' })}
+                />
+              }
+            />
             <LabeledList.Item
               label="Peer to Peer Traffic"
-              buttons={(
+              buttons={
                 <Button
                   icon={config_peertopeer ? 'power-off' : 'times'}
                   content={config_peertopeer ? 'ENABLED' : 'DISABLED'}
                   selected={config_peertopeer}
-                  onClick={() => act('toggle_function', { id: "2" })} />
-              )} />
+                  onClick={() => act('toggle_function', { id: '2' })}
+                />
+              }
+            />
             <LabeledList.Item
               label="Communication Systems"
-              buttons={(
+              buttons={
                 <Button
                   icon={config_communication ? 'power-off' : 'times'}
                   content={config_communication ? 'ENABLED' : 'DISABLED'}
                   selected={config_communication}
-                  onClick={() => act('toggle_function', { id: "3" })} />
-              )} />
+                  onClick={() => act('toggle_function', { id: '3' })}
+                />
+              }
+            />
             <LabeledList.Item
               label="Remote System Control"
-              buttons={(
+              buttons={
                 <Button
                   icon={config_systemcontrol ? 'power-off' : 'times'}
                   content={config_systemcontrol ? 'ENABLED' : 'DISABLED'}
                   selected={config_systemcontrol}
-                  onClick={() => act('toggle_function', { id: "4" })} />
-              )} />
+                  onClick={() => act('toggle_function', { id: '4' })}
+                />
+              }
+            />
           </LabeledList>
         </Section>
         <Section title="Security Systems">
           {!!idsalarm && (
             <>
-              <NoticeBox>
-                NETWORK INCURSION DETECTED
-              </NoticeBox>
+              <NoticeBox>NETWORK INCURSION DETECTED</NoticeBox>
               <Box italics>
-                Abnormal activity has been detected in the network.
-                Check system logs for more information
+                Abnormal activity has been detected in the network. Check system
+                logs for more information
               </Box>
             </>
           )}
           <LabeledList>
             <LabeledList.Item
               label="IDS Status"
-              buttons={(
+              buttons={
                 <>
                   <Button
                     icon={idsstatus ? 'power-off' : 'times'}
                     content={idsstatus ? 'ENABLED' : 'DISABLED'}
                     selected={idsstatus}
-                    onClick={() => act('toggleIDS')} />
+                    onClick={() => act('toggleIDS')}
+                  />
                   <Button
                     icon="sync"
                     content="Reset"
                     color="bad"
-                    onClick={() => act('resetIDS')} />
+                    onClick={() => act('resetIDS')}
+                  />
                 </>
-              )} />
+              }
+            />
             <LabeledList.Item
               label="Max Log Count"
-              buttons={(
+              buttons={
                 <NumberInput
                   value={ntnetmaxlogs}
                   minValue={minlogs}
                   maxValue={maxlogs}
                   width="39px"
-                  onChange={(e, value) => act('updatemaxlogs', {
-                    new_number: value,
-                  })}
+                  onChange={(e, value) =>
+                    act('updatemaxlogs', {
+                      new_number: value,
+                    })
+                  }
                 />
-              )} />
+              }
+            />
           </LabeledList>
           <Section
             title="System Log"
             level={2}
-            buttons={(
+            buttons={
               <Button.Confirm
                 icon="trash"
                 content="Clear Logs"
-                onClick={() => act('purgelogs')} />
-            )}>
-            {ntnetlogs.map(log => (
+                onClick={() => act('purgelogs')}
+              />
+            }
+          >
+            {ntnetlogs.map((log) => (
               <Box key={log.entry} className="candystripe">
                 {log.entry}
               </Box>
diff --git a/tgui/packages/tgui/interfaces/NtosNotepad.js b/tgui/packages/tgui/interfaces/NtosNotepad.js
index ad8e40c0a098..34afa8a1c066 100644
--- a/tgui/packages/tgui/interfaces/NtosNotepad.js
+++ b/tgui/packages/tgui/interfaces/NtosNotepad.js
@@ -4,18 +4,14 @@ import { Stack, Input, Section } from '../components';
 
 export const NtosNotepad = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    note,
-  } = data;
+  const { note } = data;
   return (
     <NtosWindow width={600} height={800}>
       <NtosWindow.Content>
         <Stack fill vertical direction="column" justify="space-between">
           <Stack.Item>
             <Stack grow>
-              <Section>
-                {note}
-              </Section>
+              <Section>{note}</Section>
             </Stack>
           </Stack.Item>
           <Stack.Item>
@@ -23,9 +19,11 @@ export const NtosNotepad = (props, context) => {
               <Input
                 value={note}
                 fluid
-                onInput={(e, value) => act('UpdateNote', {
-                  newnote: value,
-                })}
+                onInput={(e, value) =>
+                  act('UpdateNote', {
+                    newnote: value,
+                  })
+                }
               />
             </Section>
           </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/NtosPhysScanner.js b/tgui/packages/tgui/interfaces/NtosPhysScanner.js
index 3384d4dce9bf..a01c4e5736b7 100644
--- a/tgui/packages/tgui/interfaces/NtosPhysScanner.js
+++ b/tgui/packages/tgui/interfaces/NtosPhysScanner.js
@@ -5,31 +5,29 @@ import { sanitizeText } from '../sanitize';
 
 export const NtosPhysScanner = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    set_mode,
-    last_record,
-    available_modes = [],
-  } = data;
+  const { set_mode, last_record, available_modes = [] } = data;
   const textHtml = {
     __html: sanitizeText(last_record),
   };
   return (
-    <NtosWindow
-      width={600}
-      height={350}>
+    <NtosWindow width={600} height={350}>
       <NtosWindow.Content scrollable>
         <Section>
-          Tap something (right-click) with your tablet
-          to use the physical scanner.
+          Tap something (right-click) with your tablet to use the physical
+          scanner.
         </Section>
         <Section>
-          <Box bold>SELECTED MODE <br /> <br /></Box>
+          <Box bold>
+            SELECTED MODE <br /> <br />
+          </Box>
           <Dropdown
             options={available_modes}
             selected={set_mode}
-            onSelected={(value) => act('selectMode', {
-              newMode: value,
-            })}
+            onSelected={(value) =>
+              act('selectMode', {
+                newMode: value,
+              })
+            }
           />
         </Section>
         <Section>
@@ -39,8 +37,9 @@ export const NtosPhysScanner = (props, context) => {
             <br />
           </Box>
           <Box
-            style={{ "white-space": "pre-line" }}
-            dangerouslySetInnerHTML={textHtml} />
+            style={{ 'white-space': 'pre-line' }}
+            dangerouslySetInnerHTML={textHtml}
+          />
         </Section>
       </NtosWindow.Content>
     </NtosWindow>
diff --git a/tgui/packages/tgui/interfaces/NtosPortraitPrinter.js b/tgui/packages/tgui/interfaces/NtosPortraitPrinter.js
index a33c4ac18a9a..4e79769422a4 100644
--- a/tgui/packages/tgui/interfaces/NtosPortraitPrinter.js
+++ b/tgui/packages/tgui/interfaces/NtosPortraitPrinter.js
@@ -6,31 +6,22 @@ import { NtosWindow } from '../layouts';
 export const NtosPortraitPrinter = (props, context) => {
   const { act, data } = useBackend(context);
   const [listIndex, setListIndex] = useLocalState(context, 'listIndex', 0);
-  const {
-    paintings,
-    search_string,
-    search_mode,
-  } = data;
+  const { paintings, search_string, search_mode } = data;
   const got_paintings = !!paintings.length;
-  const current_portrait_title = got_paintings
-    && paintings[listIndex]["title"];
-  const current_portrait_author = got_paintings
-    && "By " + paintings[listIndex]["creator"];
-  const current_portrait_asset_name = got_paintings
-    && "paintings" + "_" + paintings[listIndex]["md5"];
-  const current_portrait_ratio = got_paintings
-    && paintings[listIndex]["ratio"]; 
+  const current_portrait_title = got_paintings && paintings[listIndex]['title'];
+  const current_portrait_author =
+    got_paintings && 'By ' + paintings[listIndex]['creator'];
+  const current_portrait_asset_name =
+    got_paintings && 'paintings' + '_' + paintings[listIndex]['md5'];
+  const current_portrait_ratio = got_paintings && paintings[listIndex]['ratio'];
   return (
-    <NtosWindow
-      title="Art Galaxy"
-      width={400}
-      height={446}>
+    <NtosWindow title="Art Galaxy" width={400} height={446}>
       <NtosWindow.Content>
         <Stack vertical fill>
           <Stack.Item>
-            <Section
-              title="Search">
-              <Input fluid
+            <Section title="Search">
+              <Input
+                fluid
                 placeholder="Search Paintings..."
                 value={search_string}
                 onChange={(e, value) => {
@@ -38,7 +29,8 @@ export const NtosPortraitPrinter = (props, context) => {
                     to_search: value,
                   });
                   setListIndex(0);
-                }} />
+                }}
+              />
               <Button
                 content={search_mode}
                 onClick={() => {
@@ -46,7 +38,8 @@ export const NtosPortraitPrinter = (props, context) => {
                   if (search_string) {
                     setListIndex(0);
                   }
-                }} />
+                }}
+              />
             </Section>
           </Stack.Item>
           <Stack.Item grow={2}>
@@ -55,7 +48,8 @@ export const NtosPortraitPrinter = (props, context) => {
                 height="100%"
                 align="center"
                 justify="center"
-                direction="column">
+                direction="column"
+              >
                 {got_paintings ? (
                   <>
                     <Stack.Item>
@@ -66,14 +60,13 @@ export const NtosPortraitPrinter = (props, context) => {
                         style={{
                           'vertical-align': 'middle',
                           '-ms-interpolation-mode': 'nearest-neighbor',
-                        }} />
+                        }}
+                      />
                     </Stack.Item>
                     <Stack.Item className="Section__titleText">
                       {current_portrait_title}
                     </Stack.Item>
-                    <Stack.Item>
-                      {current_portrait_author}
-                    </Stack.Item>
+                    <Stack.Item>{current_portrait_author}</Stack.Item>
                   </>
                 ) : (
                   <Stack.Item className="Section__titleText">
@@ -99,7 +92,7 @@ export const NtosPortraitPrinter = (props, context) => {
                       <Button
                         disabled={listIndex === 0}
                         icon="chevron-left"
-                        onClick={() => setListIndex(listIndex-1)}
+                        onClick={() => setListIndex(listIndex - 1)}
                       />
                     </Stack.Item>
                     <Stack.Item grow={3}>
@@ -107,23 +100,25 @@ export const NtosPortraitPrinter = (props, context) => {
                         icon="check"
                         content="Print Portrait"
                         disabled={!got_paintings}
-                        onClick={() => act("select", {
-                          selected: paintings[listIndex]["ref"],
-                        })}
+                        onClick={() =>
+                          act('select', {
+                            selected: paintings[listIndex]['ref'],
+                          })
+                        }
                       />
                     </Stack.Item>
                     <Stack.Item grow={1}>
                       <Button
                         icon="chevron-right"
-                        disabled={listIndex >= paintings.length-1}
-                        onClick={() => setListIndex(listIndex+1)}
+                        disabled={listIndex >= paintings.length - 1}
+                        onClick={() => setListIndex(listIndex + 1)}
                       />
                     </Stack.Item>
                     <Stack.Item>
                       <Button
                         icon="angle-double-right"
-                        disabled={listIndex >= paintings.length-1}
-                        onClick={() => setListIndex(paintings.length-1)}
+                        disabled={listIndex >= paintings.length - 1}
+                        onClick={() => setListIndex(paintings.length - 1)}
                       />
                     </Stack.Item>
                   </Stack>
@@ -132,8 +127,8 @@ export const NtosPortraitPrinter = (props, context) => {
             </Stack>
             <Stack.Item mt={1} mb={-1}>
               <NoticeBox info>
-                Printing a canvas costs 10 paper from
-                the printer installed in your machine.
+                Printing a canvas costs 10 paper from the printer installed in
+                your machine.
               </NoticeBox>
             </Stack.Item>
           </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/NtosPowerMonitor.js b/tgui/packages/tgui/interfaces/NtosPowerMonitor.js
index 04d80fc1c7e9..39b36f03b721 100644
--- a/tgui/packages/tgui/interfaces/NtosPowerMonitor.js
+++ b/tgui/packages/tgui/interfaces/NtosPowerMonitor.js
@@ -3,9 +3,7 @@ import { PowerMonitorContent } from './PowerMonitor';
 
 export const NtosPowerMonitor = () => {
   return (
-    <NtosWindow
-      width={550}
-      height={700}>
+    <NtosWindow width={550} height={700}>
       <NtosWindow.Content scrollable>
         <PowerMonitorContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosRadar.js b/tgui/packages/tgui/interfaces/NtosRadar.js
index 3ba8683574d6..61d7627d648a 100644
--- a/tgui/packages/tgui/interfaces/NtosRadar.js
+++ b/tgui/packages/tgui/interfaces/NtosRadar.js
@@ -6,111 +6,102 @@ import { NtosWindow } from '../layouts';
 
 export const NtosRadar = (props, context) => {
   return (
-    <NtosWindow
-      width={800}
-      height={600}
-      theme="ntos">
-      <NtosRadarContent sig_err={"Signal Lost"} />
+    <NtosWindow width={800} height={600} theme="ntos">
+      <NtosRadarContent sig_err={'Signal Lost'} />
     </NtosWindow>
   );
 };
 
 export const NtosRadarContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    selected,
-    object = [],
-    target = [],
-    scanning,
-  } = data;
+  const { selected, object = [], target = [], scanning } = data;
   const { sig_err } = props;
   return (
-    <Flex
-      direction={"row"}
-      hight="100%">
-      <Flex.Item
-        position="relative"
-        width={20.5}
-        hight="100%">
+    <Flex direction={'row'} hight="100%">
+      <Flex.Item position="relative" width={20.5} hight="100%">
         <NtosWindow.Content scrollable>
           <Section>
             <Button
               icon="redo-alt"
-              content={scanning?"Scanning...":"Scan"}
+              content={scanning ? 'Scanning...' : 'Scan'}
               color="blue"
               disabled={scanning}
-              onClick={() => act('scan')} />
+              onClick={() => act('scan')}
+            />
             {!object.length && !scanning && (
-              <div>
-                No trackable signals found
-              </div>
+              <div>No trackable signals found</div>
             )}
-            {!scanning && object.map(object => (
-              <div
-                key={object.dev}
-                title={object.name}
-                className={classes([
-                  'Button',
-                  'Button--fluid',
-                  'Button--color--transparent',
-                  'Button--ellipsis',
-                  object.ref === selected
-                    && 'Button--selected',
-                ])}
-                onClick={() => {
-                  act('selecttarget', {
-                    ref: object.ref,
-                  });
-                }}>
-                {object.name}
-              </div>
-            ))}
+            {!scanning &&
+              object.map((object) => (
+                <div
+                  key={object.dev}
+                  title={object.name}
+                  className={classes([
+                    'Button',
+                    'Button--fluid',
+                    'Button--color--transparent',
+                    'Button--ellipsis',
+                    object.ref === selected && 'Button--selected',
+                  ])}
+                  onClick={() => {
+                    act('selecttarget', {
+                      ref: object.ref,
+                    });
+                  }}
+                >
+                  {object.name}
+                </div>
+              ))}
           </Section>
         </NtosWindow.Content>
       </Flex.Item>
       <Flex.Item
         style={{
-          'background-image': 'url("'
-            + resolveAsset('ntosradarbackground.png')
-            + '")',
+          'background-image':
+            'url("' + resolveAsset('ntosradarbackground.png') + '")',
           'background-position': 'center',
           'background-repeat': 'no-repeat',
-          'top': '20px',
+          top: '20px',
         }}
         position="relative"
         m={1.5}
         width={45}
-        height={45}>
+        height={45}
+      >
         {Object.keys(target).length === 0
           ? !!selected && (
-            <NoticeBox
-              position="absolute"
-              top={20.6}
-              left={1.35}
-              width={42}
-              fontSize="30px"
-              textAlign="center">
-              {sig_err}
-            </NoticeBox>
-          )
-          : !!target.userot && (
-            <Box as="img"
-              src={resolveAsset(target.arrowstyle)}
-              position="absolute"
-              top="20px"
-              left="243px"
-              style={{
-                'transform': `rotate(${target.rot}deg)`,
-              }} />
-          ) || (
-            <Icon
-              name={target.pointer}
-              position="absolute"
-              size={2}
-              color={target.color}
-              top={((target.locy * 10) + 19) + 'px'}
-              left={((target.locx * 10) + 16) + 'px'} />
-          )}
+              <NoticeBox
+                position="absolute"
+                top={20.6}
+                left={1.35}
+                width={42}
+                fontSize="30px"
+                textAlign="center"
+              >
+                {sig_err}
+              </NoticeBox>
+            )
+          : (!!target.userot && (
+              <Box
+                as="img"
+                src={resolveAsset(target.arrowstyle)}
+                position="absolute"
+                top="20px"
+                left="243px"
+                style={{
+                  transform: `rotate(${target.rot}deg)`,
+                }}
+              />
+            )) || (
+              <Icon
+                name={target.pointer}
+                position="absolute"
+                size={2}
+                color={target.color}
+                top={target.locy * 10 + 19 + 'px'}
+                left={target.locx * 10 + 16 + 'px'}
+              />
+            )}
       </Flex.Item>
     </Flex>
   );
diff --git a/tgui/packages/tgui/interfaces/NtosRadarSyndicate.js b/tgui/packages/tgui/interfaces/NtosRadarSyndicate.js
index 2ce76c0a9443..b8806d127ca2 100644
--- a/tgui/packages/tgui/interfaces/NtosRadarSyndicate.js
+++ b/tgui/packages/tgui/interfaces/NtosRadarSyndicate.js
@@ -3,11 +3,8 @@ import { NtosRadarContent } from './NtosRadar';
 
 export const NtosRadarSyndicate = (props, context) => {
   return (
-    <NtosWindow
-      width={800}
-      height={600}
-      theme="syndicate">
-      <NtosRadarContent sig_err={"Out of Range"} />
+    <NtosWindow width={800} height={600} theme="syndicate">
+      <NtosRadarContent sig_err={'Out of Range'} />
     </NtosWindow>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/NtosRecords.js b/tgui/packages/tgui/interfaces/NtosRecords.js
index 09f1e36e5e13..3212c70a42d5 100644
--- a/tgui/packages/tgui/interfaces/NtosRecords.js
+++ b/tgui/packages/tgui/interfaces/NtosRecords.js
@@ -5,81 +5,104 @@ import { NtosWindow } from '../layouts';
 
 export const NtosRecords = (props, context) => {
   const { act, data } = useBackend(context);
-  const [searchTerm, setSearchTerm] = useLocalState(context, "search", "");
-  const {
-    mode,
-    records,
-  } = data;
+  const [searchTerm, setSearchTerm] = useLocalState(context, 'search', '');
+  const { mode, records } = data;
 
   const isMatchingSearchTerms = createSearch(searchTerm);
 
   return (
-    <NtosWindow
-      width={600}
-      height={800}>
+    <NtosWindow width={600} height={800}>
       <NtosWindow.Content scrollable>
         <Section textAlign="center">
           NANOTRASEN PERSONNEL RECORDS (CLASSIFIED)
         </Section>
         <Section>
           <Input
-            placeholder={"Filter results..."}
+            placeholder={'Filter results...'}
             value={searchTerm}
             fluid
             textAlign="center"
             onInput={(e, value) => setSearchTerm(value)}
           />
         </Section>
-        {mode === "security" && records.map(record => (
-          <Section
-            key={record.id}
-            hidden={!(
-              searchTerm === '' || isMatchingSearchTerms(
-                record.name
-                  + " " + record.rank
-                  + " " + record.species
-                  + " " + record.gender
-                  + " " + record.age
-                  + " " + record.fingerprint
-              )
-            )}>
-            <Box bold>
-              <Icon name="user" mr={1} />
-              {record.name}
-            </Box>
-            <br />
-            Rank: {record.rank}<br />
-            Species: {record.species}<br />
-            Gender: {record.gender}<br />
-            Age: {record.age}<br />
-            Fingerprint Hash: {record.fingerprint}
-            <br /><br />
-            Criminal Status: {record.wanted || "DELETED"}
-          </Section>
-        ))}
-        {mode === "medical" && records.map(record => (
-          <Section
-            key={record.id}
-            hidden={!(
-              searchTerm === '' || isMatchingSearchTerms(
-                record.name
-                  + " " + record.bloodtype
-                  + " " + record.m_stat
-                  + " " + record.p_stat
-              )
-            )}>
-            <Box bold>
-              <Icon name="user" mr={1} />
-              {record.name}
-            </Box>
-            <br />
-            Bloodtype: {record.bloodtype}<br />
-            Minor Disabilities: {record.mi_dis}<br />
-            Major Disabilities: {record.ma_dis}<br /><br />
-            Notes: {record.notes}<br />
-            Notes Contd: {record.cnotes}
-          </Section>
-        ))}
+        {mode === 'security' &&
+          records.map((record) => (
+            <Section
+              key={record.id}
+              hidden={
+                !(
+                  searchTerm === '' ||
+                  isMatchingSearchTerms(
+                    record.name +
+                      ' ' +
+                      record.rank +
+                      ' ' +
+                      record.species +
+                      ' ' +
+                      record.gender +
+                      ' ' +
+                      record.age +
+                      ' ' +
+                      record.fingerprint,
+                  )
+                )
+              }
+            >
+              <Box bold>
+                <Icon name="user" mr={1} />
+                {record.name}
+              </Box>
+              <br />
+              Rank: {record.rank}
+              <br />
+              Species: {record.species}
+              <br />
+              Gender: {record.gender}
+              <br />
+              Age: {record.age}
+              <br />
+              Fingerprint Hash: {record.fingerprint}
+              <br />
+              <br />
+              Criminal Status: {record.wanted || 'DELETED'}
+            </Section>
+          ))}
+        {mode === 'medical' &&
+          records.map((record) => (
+            <Section
+              key={record.id}
+              hidden={
+                !(
+                  searchTerm === '' ||
+                  isMatchingSearchTerms(
+                    record.name +
+                      ' ' +
+                      record.bloodtype +
+                      ' ' +
+                      record.m_stat +
+                      ' ' +
+                      record.p_stat,
+                  )
+                )
+              }
+            >
+              <Box bold>
+                <Icon name="user" mr={1} />
+                {record.name}
+              </Box>
+              <br />
+              Bloodtype: {record.bloodtype}
+              <br />
+              Minor Disabilities: {record.mi_dis}
+              <br />
+              Major Disabilities: {record.ma_dis}
+              <br />
+              <br />
+              Notes: {record.notes}
+              <br />
+              Notes Contd: {record.cnotes}
+            </Section>
+          ))}
       </NtosWindow.Content>
     </NtosWindow>
   );
diff --git a/tgui/packages/tgui/interfaces/NtosRevelation.js b/tgui/packages/tgui/interfaces/NtosRevelation.js
index 643137501149..f52dfce8a268 100644
--- a/tgui/packages/tgui/interfaces/NtosRevelation.js
+++ b/tgui/packages/tgui/interfaces/NtosRevelation.js
@@ -5,28 +5,30 @@ import { NtosWindow } from '../layouts';
 export const NtosRevelation = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <NtosWindow
-      width={400}
-      height={250}
-      theme="syndicate">
+    <NtosWindow width={400} height={250} theme="syndicate">
       <NtosWindow.Content>
         <Section>
           <Button.Input
             fluid
             content="Obfuscate Name..."
-            onCommit={(e, value) => act('PRG_obfuscate', {
-              new_name: value,
-            })}
-            mb={1} />
+            onCommit={(e, value) =>
+              act('PRG_obfuscate', {
+                new_name: value,
+              })
+            }
+            mb={1}
+          />
           <LabeledList>
             <LabeledList.Item
               label="Payload Status"
-              buttons={(
+              buttons={
                 <Button
                   content={data.armed ? 'ARMED' : 'DISARMED'}
                   color={data.armed ? 'bad' : 'average'}
-                  onClick={() => act('PRG_arm')} />
-              )} />
+                  onClick={() => act('PRG_arm')}
+                />
+              }
+            />
           </LabeledList>
           <Button
             fluid
@@ -34,7 +36,8 @@ export const NtosRevelation = (props, context) => {
             content="ACTIVATE"
             textAlign="center"
             color="bad"
-            disabled={!data.armed} />
+            disabled={!data.armed}
+          />
         </Section>
       </NtosWindow.Content>
     </NtosWindow>
diff --git a/tgui/packages/tgui/interfaces/NtosRoboControl.js b/tgui/packages/tgui/interfaces/NtosRoboControl.js
index 8ea590978caa..304e327cb97d 100644
--- a/tgui/packages/tgui/interfaces/NtosRoboControl.js
+++ b/tgui/packages/tgui/interfaces/NtosRoboControl.js
@@ -1,32 +1,30 @@
 import { useBackend, useSharedState } from '../backend';
-import { Box, Button, Dropdown, LabeledList, ProgressBar, Section, Stack, Tabs } from '../components';
+import {
+  Box,
+  Button,
+  Dropdown,
+  LabeledList,
+  ProgressBar,
+  Section,
+  Stack,
+  Tabs,
+} from '../components';
 import { NtosWindow } from '../layouts';
 
 const getMuleByRef = (mules, ref) => {
-  return mules?.find(mule => mule.mule_ref === ref);
+  return mules?.find((mule) => mule.mule_ref === ref);
 };
 
 export const NtosRoboControl = (props, context) => {
   const { act, data } = useBackend(context);
   const [tab_main, setTab_main] = useSharedState(context, 'tab_main', 1);
-  const {
-    bots,
-    drones,
-    id_owner,
-    has_id,
-    droneaccess,
-    dronepingtypes,
-  } = data;
+  const { bots, drones, id_owner, has_id, droneaccess, dronepingtypes } = data;
   return (
-    <NtosWindow
-      width={550}
-      height={550}>
+    <NtosWindow width={550} height={550}>
       <NtosWindow.Content scrollable>
         <Section title="Robot Control Console">
           <LabeledList>
-            <LabeledList.Item label="ID Card">
-              {id_owner}
-            </LabeledList.Item>
+            <LabeledList.Item label="ID Card">{id_owner}</LabeledList.Item>
             <LabeledList.Item label="Bots In Range">
               {data.botcount}
             </LabeledList.Item>
@@ -38,14 +36,16 @@ export const NtosRoboControl = (props, context) => {
               icon="robot"
               lineHeight="23px"
               selected={tab_main === 1}
-              onClick={() => setTab_main(1)}>
+              onClick={() => setTab_main(1)}
+            >
               Bots
             </Tabs.Tab>
             <Tabs.Tab
               icon="hammer"
               lineHeight="23px"
               selected={tab_main === 2}
-              onClick={() => setTab_main(2)}>
+              onClick={() => setTab_main(2)}
+            >
               Drones
             </Tabs.Tab>
           </Tabs>
@@ -59,10 +59,8 @@ export const NtosRoboControl = (props, context) => {
                 </LabeledList.Item>
               </LabeledList>
             </Section>
-            {bots?.map(robot => (
-              <RobotInfo
-                key={robot.bot_ref}
-                robot={robot} />
+            {bots?.map((robot) => (
+              <RobotInfo key={robot.bot_ref} robot={robot} />
             ))}
           </Stack.Item>
         )}
@@ -72,21 +70,22 @@ export const NtosRoboControl = (props, context) => {
               <Button
                 icon="address-card"
                 tooltip="Grant/Remove Drone access to interact with machines and wires that would otherwise be deemed dangerous."
-                content={droneaccess ? 'Grant Drone Access' : 'Revoke Drone Access'}
+                content={
+                  droneaccess ? 'Grant Drone Access' : 'Revoke Drone Access'
+                }
                 color={droneaccess ? 'good' : 'bad'}
-                onClick={() => act('changedroneaccess')} />
+                onClick={() => act('changedroneaccess')}
+              />
               <Dropdown
                 tooltip="Drone pings"
                 width="100%"
-                displayText={"Drone pings"}
+                displayText={'Drone pings'}
                 options={dronepingtypes}
-                onSelected={value => act('ping_drones', { ping_type: value })}
+                onSelected={(value) => act('ping_drones', { ping_type: value })}
               />
             </Section>
-            {drones?.map(drone => (
-              <DroneInfo
-                key={drone.drone_ref}
-                drone={drone} />
+            {drones?.map((drone) => (
+              <DroneInfo key={drone.drone_ref} drone={drone} />
             ))}
           </Stack.Item>
         )}
@@ -100,63 +99,65 @@ export const RobotInfo = (props, context) => {
   const { act, data } = useBackend(context);
   const mules = data.mules || [];
   // Get a mule object
-  const mule = !!robot.mule_check
-    && getMuleByRef(mules, robot.bot_ref);
+  const mule = !!robot.mule_check && getMuleByRef(mules, robot.bot_ref);
   // Color based on type of a robot
-  const color = robot.mule_check === 1
-    ? 'rgba(110, 75, 14, 1)'
-    : 'rgba(74, 59, 140, 1)';
+  const color =
+    robot.mule_check === 1 ? 'rgba(110, 75, 14, 1)' : 'rgba(74, 59, 140, 1)';
   return (
     <Section
       title={robot.name}
       style={{
         border: `4px solid ${color}`,
       }}
-      buttons={mule && (
-        <>
-          <Button
-            icon="play"
-            tooltip="Go to Destination."
-            onClick={() => act('go', {
-              robot: mule.mule_ref,
-            })} />
-          <Button
-            icon="pause"
-            tooltip="Stop Moving."
-            onClick={() => act('stop', {
-              robot: mule.mule_ref,
-            })} />
-          <Button
-            icon="home"
-            tooltip="Travel Home."
-            tooltipPosition="bottom-start"
-            onClick={() => act('home', {
-              robot: mule.mule_ref,
-            })} />
-        </>
-      )}>
+      buttons={
+        mule && (
+          <>
+            <Button
+              icon="play"
+              tooltip="Go to Destination."
+              onClick={() =>
+                act('go', {
+                  robot: mule.mule_ref,
+                })
+              }
+            />
+            <Button
+              icon="pause"
+              tooltip="Stop Moving."
+              onClick={() =>
+                act('stop', {
+                  robot: mule.mule_ref,
+                })
+              }
+            />
+            <Button
+              icon="home"
+              tooltip="Travel Home."
+              tooltipPosition="bottom-start"
+              onClick={() =>
+                act('home', {
+                  robot: mule.mule_ref,
+                })
+              }
+            />
+          </>
+        )
+      }
+    >
       <Stack>
         <Stack.Item grow={1} basis={0}>
           <LabeledList>
-            <LabeledList.Item label="Model">
-              {robot.model}
-            </LabeledList.Item>
-            <LabeledList.Item label="Location">
-              {robot.locat}
-            </LabeledList.Item>
-            <LabeledList.Item label="Status">
-              {robot.mode}
-            </LabeledList.Item>
+            <LabeledList.Item label="Model">{robot.model}</LabeledList.Item>
+            <LabeledList.Item label="Location">{robot.locat}</LabeledList.Item>
+            <LabeledList.Item label="Status">{robot.mode}</LabeledList.Item>
             {mule && (
               <>
                 <LabeledList.Item label="Loaded Cargo">
-                  {data.load || "N/A"}
-                </LabeledList.Item>
-                <LabeledList.Item label="Home">
-                  {mule.home}
+                  {data.load || 'N/A'}
                 </LabeledList.Item>
+                <LabeledList.Item label="Home">{mule.home}</LabeledList.Item>
                 <LabeledList.Item label="Destination">
-                  {mule.dest || "N/A"}
+                  {mule.dest || 'N/A'}
                 </LabeledList.Item>
                 <LabeledList.Item label="Power">
                   <ProgressBar
@@ -167,7 +168,8 @@ export const RobotInfo = (props, context) => {
                       good: [60, Infinity],
                       average: [20, 60],
                       bad: [-Infinity, 20],
-                    }} />
+                    }}
+                  />
                 </LabeledList.Item>
               </>
             )}
@@ -179,48 +181,69 @@ export const RobotInfo = (props, context) => {
               <Button
                 fluid
                 content="Set Destination"
-                onClick={() => act('destination', {
-                  robot: mule.mule_ref,
-                })} />
+                onClick={() =>
+                  act('destination', {
+                    robot: mule.mule_ref,
+                  })
+                }
+              />
               <Button
                 fluid
                 content="Set ID"
-                onClick={() => act('setid', {
-                  robot: mule.mule_ref,
-                })} />
+                onClick={() =>
+                  act('setid', {
+                    robot: mule.mule_ref,
+                  })
+                }
+              />
               <Button
                 fluid
                 content="Set Home"
-                onClick={() => act('sethome', {
-                  robot: mule.mule_ref,
-                })} />
+                onClick={() =>
+                  act('sethome', {
+                    robot: mule.mule_ref,
+                  })
+                }
+              />
               <Button
                 fluid
                 content="Unload Cargo"
-                onClick={() => act('unload', {
-                  robot: mule.mule_ref,
-                })} />
+                onClick={() =>
+                  act('unload', {
+                    robot: mule.mule_ref,
+                  })
+                }
+              />
               <Button.Checkbox
                 fluid
                 content="Auto Return"
                 checked={mule.autoReturn}
-                onClick={() => act('autoret', {
-                  robot: mule.mule_ref,
-                })} />
+                onClick={() =>
+                  act('autoret', {
+                    robot: mule.mule_ref,
+                  })
+                }
+              />
               <Button.Checkbox
                 fluid
                 content="Auto Pickup"
                 checked={mule.autoPickup}
-                onClick={() => act('autopick', {
-                  robot: mule.mule_ref,
-                })} />
+                onClick={() =>
+                  act('autopick', {
+                    robot: mule.mule_ref,
+                  })
+                }
+              />
               <Button.Checkbox
                 fluid
                 content="Delivery Report"
                 checked={mule.reportDelivery}
-                onClick={() => act('report', {
-                  robot: mule.mule_ref,
-                })} />
+                onClick={() =>
+                  act('report', {
+                    robot: mule.mule_ref,
+                  })
+                }
+              />
             </>
           )}
           {!mule && (
@@ -228,27 +251,39 @@ export const RobotInfo = (props, context) => {
               <Button
                 fluid
                 content="Stop Patrol"
-                onClick={() => act('patroloff', {
-                  robot: robot.bot_ref,
-                })} />
+                onClick={() =>
+                  act('patroloff', {
+                    robot: robot.bot_ref,
+                  })
+                }
+              />
               <Button
                 fluid
                 content="Start Patrol"
-                onClick={() => act('patrolon', {
-                  robot: robot.bot_ref,
-                })} />
+                onClick={() =>
+                  act('patrolon', {
+                    robot: robot.bot_ref,
+                  })
+                }
+              />
               <Button
                 fluid
                 content="Summon"
-                onClick={() => act('summon', {
-                  robot: robot.bot_ref,
-                })} />
+                onClick={() =>
+                  act('summon', {
+                    robot: robot.bot_ref,
+                  })
+                }
+              />
               <Button
                 fluid
                 content="Eject PAi"
-                onClick={() => act('ejectpai', {
-                  robot: robot.bot_ref,
-                })} />
+                onClick={() =>
+                  act('ejectpai', {
+                    robot: robot.bot_ref,
+                  })
+                }
+              />
             </>
           )}
         </Stack.Item>
@@ -267,15 +302,14 @@ export const DroneInfo = (props, context) => {
       title={drone.name}
       style={{
         border: `4px solid ${color}`,
-      }}>
+      }}
+    >
       <Stack>
         <Stack.Item grow={1} basis={0}>
           <LabeledList>
             <LabeledList.Item label="Status">
               <Box color={drone.status ? 'bad' : 'good'}>
-                {drone.status
-                  ? "Not Responding"
-                  : 'Nominal'}
+                {drone.status ? 'Not Responding' : 'Nominal'}
               </Box>
             </LabeledList.Item>
           </LabeledList>
@@ -284,4 +318,3 @@ export const DroneInfo = (props, context) => {
     </Section>
   );
 };
-
diff --git a/tgui/packages/tgui/interfaces/NtosRobotact.js b/tgui/packages/tgui/interfaces/NtosRobotact.js
index bc20ace8a049..cb7d4eb64e34 100644
--- a/tgui/packages/tgui/interfaces/NtosRobotact.js
+++ b/tgui/packages/tgui/interfaces/NtosRobotact.js
@@ -1,15 +1,22 @@
 import { useBackend, useSharedState } from '../backend';
-import { AnimatedNumber, Box, Button, Flex, LabeledList, ProgressBar, Section, Slider, Tabs } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  Flex,
+  LabeledList,
+  ProgressBar,
+  Section,
+  Slider,
+  Tabs,
+} from '../components';
 import { NtosWindow } from '../layouts';
 
 export const NtosRobotact = (props, context) => {
   const { act, data } = useBackend(context);
   const { PC_device_theme } = data;
   return (
-    <NtosWindow
-      width={800}
-      height={600}
-      theme={PC_device_theme}>
+    <NtosWindow width={800} height={600} theme={PC_device_theme}>
       <NtosWindow.Content>
         <NtosRobotactContent />
       </NtosWindow.Content>
@@ -47,71 +54,59 @@ export const NtosRobotactContent = (props, context) => {
   const borgLog = data.borgLog || [];
   const borgUpgrades = data.borgUpgrades || [];
   return (
-    <Flex
-      direction={"column"}>
-      <Flex.Item
-        position="relative"
-        mb={1}>
+    <Flex direction={'column'}>
+      <Flex.Item position="relative" mb={1}>
         <Tabs>
           <Tabs.Tab
             icon="list"
             lineHeight="23px"
             selected={tab_main === 1}
-            onClick={() => setTab_main(1)}>
+            onClick={() => setTab_main(1)}
+          >
             Status
           </Tabs.Tab>
           <Tabs.Tab
             icon="list"
             lineHeight="23px"
             selected={tab_main === 2}
-            onClick={() => setTab_main(2)}>
+            onClick={() => setTab_main(2)}
+          >
             Logs
           </Tabs.Tab>
         </Tabs>
       </Flex.Item>
       {tab_main === 1 && (
         <>
-          <Flex
-            direction={"row"}>
-            <Flex.Item
-              width="30%">
-              <Section
-                title="Configuration"
-                fill>
+          <Flex direction={'row'}>
+            <Flex.Item width="30%">
+              <Section title="Configuration" fill>
                 <LabeledList>
-                  <LabeledList.Item
-                    label="Unit">
+                  <LabeledList.Item label="Unit">
                     {borgName.slice(0, 17)}
                   </LabeledList.Item>
-                  <LabeledList.Item
-                    label="Type">
-                    {borgType}
-                  </LabeledList.Item>
-                  <LabeledList.Item
-                    label="AI">
+                  <LabeledList.Item label="Type">{borgType}</LabeledList.Item>
+                  <LabeledList.Item label="AI">
                     {masterAI.slice(0, 17)}
                   </LabeledList.Item>
                 </LabeledList>
               </Section>
             </Flex.Item>
-            <Flex.Item
-              grow={1}
-              basis="content"
-              ml={1}>
-              <Section
-                title="Status">
+            <Flex.Item grow={1} basis="content" ml={1}>
+              <Section title="Status">
                 Charge:
                 <Button
                   content="Power Alert"
                   disabled={charge}
-                  onClick={() => act('alertPower')} />
+                  onClick={() => act('alertPower')}
+                />
                 <ProgressBar
                   value={charge / maxcharge}
                   ranges={{
                     good: [0.5, Infinity],
                     average: [0.1, 0.5],
                     bad: [-Infinity, 0.1],
-                  }}>
+                  }}
+                >
                   <AnimatedNumber value={charge} />
                 </ProgressBar>
                 Chassis Integrity:
@@ -123,49 +118,50 @@ export const NtosRobotactContent = (props, context) => {
                     bad: [-Infinity, 25],
                     average: [25, 75],
                     good: [75, Infinity],
-                  }} />
+                  }}
+                />
               </Section>
-              <Section
-                title="Lamp Power">
+              <Section title="Lamp Power">
                 <Slider
                   value={lampIntensity}
                   step={1}
                   stepPixelSize={25}
                   maxValue={5}
                   minValue={1}
-                  onChange={(e, value) => act('lampIntensity', {
-                    ref: value,
-                  })} />
-                Lamp power usage: {lampIntensity/2} watts
+                  onChange={(e, value) =>
+                    act('lampIntensity', {
+                      ref: value,
+                    })
+                  }
+                />
+                Lamp power usage: {lampIntensity / 2} watts
               </Section>
             </Flex.Item>
-            <Flex.Item
-              width="50%"
-              ml={1}>
-              <Section
-                fitted>
-                <Tabs
-                  fluid={1}
-                  textAlign="center">
+            <Flex.Item width="50%" ml={1}>
+              <Section fitted>
+                <Tabs fluid={1} textAlign="center">
                   <Tabs.Tab
                     icon=""
                     lineHeight="23px"
                     selected={tab_sub === 1}
-                    onClick={() => setTab_sub(1)}>
+                    onClick={() => setTab_sub(1)}
+                  >
                     Actions
                   </Tabs.Tab>
                   <Tabs.Tab
                     icon=""
                     lineHeight="23px"
                     selected={tab_sub === 2}
-                    onClick={() => setTab_sub(2)}>
+                    onClick={() => setTab_sub(2)}
+                  >
                     Upgrades
                   </Tabs.Tab>
                   <Tabs.Tab
                     icon=""
                     lineHeight="23px"
                     selected={tab_sub === 3}
-                    onClick={() => setTab_sub(3)}>
+                    onClick={() => setTab_sub(3)}
+                  >
                     Diagnostics
                   </Tabs.Tab>
                 </Tabs>
@@ -173,50 +169,51 @@ export const NtosRobotactContent = (props, context) => {
               {tab_sub === 1 && (
                 <Section>
                   <LabeledList>
-                    <LabeledList.Item
-                      label="Maintenance Cover">
+                    <LabeledList.Item label="Maintenance Cover">
                       <Button.Confirm
                         content="Unlock"
-                        disabled={cover==="UNLOCKED"}
-                        onClick={() => act('coverunlock')} />
+                        disabled={cover === 'UNLOCKED'}
+                        onClick={() => act('coverunlock')}
+                      />
                     </LabeledList.Item>
-                    <LabeledList.Item
-                      label="Sensor Overlay">
+                    <LabeledList.Item label="Sensor Overlay">
                       <Button
                         content={sensors}
-                        onClick={() => act('toggleSensors')} />
+                        onClick={() => act('toggleSensors')}
+                      />
                     </LabeledList.Item>
                     <LabeledList.Item
-                      label={"Stored Photos (" + printerPictures + ")"}>
+                      label={'Stored Photos (' + printerPictures + ')'}
+                    >
                       <Button
                         content="View"
                         disabled={!printerPictures}
-                        onClick={() => act('viewImage')} />
+                        onClick={() => act('viewImage')}
+                      />
                       <Button
                         content="Print"
                         disabled={!printerPictures}
-                        onClick={() => act('printImage')} />
+                        onClick={() => act('printImage')}
+                      />
                     </LabeledList.Item>
-                    <LabeledList.Item
-                      label="Printer Toner">
-                      <ProgressBar
-                        value={printerToner / printerTonerMax} />
+                    <LabeledList.Item label="Printer Toner">
+                      <ProgressBar value={printerToner / printerTonerMax} />
                     </LabeledList.Item>
                     {!!thrustersInstalled && (
-                      <LabeledList.Item
-                        label="Toggle Thrusters">
+                      <LabeledList.Item label="Toggle Thrusters">
                         <Button
                           content={thrustersStatus}
-                          onClick={() => act('toggleThrusters')} />
+                          onClick={() => act('toggleThrusters')}
+                        />
                       </LabeledList.Item>
                     )}
                     {!!selfDestructAble && (
-                      <LabeledList.Item
-                        label="Self Destruct">
+                      <LabeledList.Item label="Self Destruct">
                         <Button.Confirm
                           content="ACTIVATE"
                           color="red"
-                          onClick={() => act('selfDestruct')} />
+                          onClick={() => act('selfDestruct')}
+                        />
                       </LabeledList.Item>
                     )}
                   </LabeledList>
@@ -224,10 +221,8 @@ export const NtosRobotactContent = (props, context) => {
               )}
               {tab_sub === 2 && (
                 <Section>
-                  {borgUpgrades.map(upgrade => (
-                    <Box
-                      mb={1}
-                      key={upgrade}>
+                  {borgUpgrades.map((upgrade) => (
+                    <Box mb={1} key={upgrade}>
                       {upgrade}
                     </Box>
                   ))}
@@ -238,32 +233,56 @@ export const NtosRobotactContent = (props, context) => {
                   <LabeledList>
                     <LabeledList.Item
                       label="AI Connection"
-                      color={wireAI==="FAULT"?'red': wireAI==="READY"?'yellow': 'green'}>
+                      color={
+                        wireAI === 'FAULT'
+                          ? 'red'
+                          : wireAI === 'READY'
+                            ? 'yellow'
+                            : 'green'
+                      }
+                    >
                       {wireAI}
                     </LabeledList.Item>
                     <LabeledList.Item
                       label="LawSync"
-                      color={wireLaw==="FAULT"?"red":"green"}>
+                      color={wireLaw === 'FAULT' ? 'red' : 'green'}
+                    >
                       {wireLaw}
                     </LabeledList.Item>
                     <LabeledList.Item
                       label="Camera"
-                      color={wireCamera==="FAULT"?'red': wireCamera==="DISABLED"?'yellow': 'green'}>
+                      color={
+                        wireCamera === 'FAULT'
+                          ? 'red'
+                          : wireCamera === 'DISABLED'
+                            ? 'yellow'
+                            : 'green'
+                      }
+                    >
                       {wireCamera}
                     </LabeledList.Item>
                     <LabeledList.Item
                       label="Module Controller"
-                      color={wireModule==="FAULT"?"red":"green"}>
+                      color={wireModule === 'FAULT' ? 'red' : 'green'}
+                    >
                       {wireModule}
                     </LabeledList.Item>
                     <LabeledList.Item
                       label="Motor Controller"
-                      color={locomotion==="FAULT"?'red': locomotion==="DISABLED"?'yellow': 'green'}>
+                      color={
+                        locomotion === 'FAULT'
+                          ? 'red'
+                          : locomotion === 'DISABLED'
+                            ? 'yellow'
+                            : 'green'
+                      }
+                    >
                       {locomotion}
                     </LabeledList.Item>
                     <LabeledList.Item
                       label="Maintenance Cover"
-                      color={cover==="UNLOCKED"?"red":"green"}>
+                      color={cover === 'UNLOCKED' ? 'red' : 'green'}
+                    >
                       {cover}
                     </LabeledList.Item>
                   </LabeledList>
@@ -271,27 +290,23 @@ export const NtosRobotactContent = (props, context) => {
               )}
             </Flex.Item>
           </Flex>
-          <Flex.Item
-            height={21}
-            mt={1}>
+          <Flex.Item height={21} mt={1}>
             <Section
               title="Laws"
               fill
               scrollable
-              buttons={(
+              buttons={
                 <>
                   <Button
                     content="State Laws"
-                    onClick={() => act('lawstate')} />
-                  <Button
-                    icon="volume-off"
-                    onClick={() => act('lawchannel')} />
+                    onClick={() => act('lawstate')}
+                  />
+                  <Button icon="volume-off" onClick={() => act('lawchannel')} />
                 </>
-              )}>
-              {laws.map(law => (
-                <Box
-                  mb={1}
-                  key={law}>
+              }
+            >
+              {laws.map((law) => (
+                <Box mb={1} key={law}>
                   {law}
                 </Box>
               ))}
@@ -300,16 +315,10 @@ export const NtosRobotactContent = (props, context) => {
         </>
       )}
       {tab_main === 2 && (
-        <Flex.Item
-          height={40}>
-          <Section
-            fill
-            scrollable
-            backgroundColor="black">
-            {borgLog.map(log => (
-              <Box
-                mb={1}
-                key={log}>
+        <Flex.Item height={40}>
+          <Section fill scrollable backgroundColor="black">
+            {borgLog.map((log) => (
+              <Box mb={1} key={log}>
                 <font color="green">{log}</font>
               </Box>
             ))}
@@ -319,4 +328,3 @@ export const NtosRobotactContent = (props, context) => {
     </Flex>
   );
 };
-
diff --git a/tgui/packages/tgui/interfaces/NtosScipaper.js b/tgui/packages/tgui/interfaces/NtosScipaper.js
index 961c3098fc61..fc1ffd603d65 100644
--- a/tgui/packages/tgui/interfaces/NtosScipaper.js
+++ b/tgui/packages/tgui/interfaces/NtosScipaper.js
@@ -58,7 +58,8 @@ const PaperPublishing = (props, context) => {
               onChange={(e, value) =>
                 act('rewrite', {
                   title: value,
-                })}
+                })
+              }
             />
           </LabeledList.Item>
           <LabeledList.Item label="Principal Author">
@@ -68,7 +69,8 @@ const PaperPublishing = (props, context) => {
               onChange={(e, value) =>
                 act('rewrite', {
                   author: value,
-                })}
+                })
+              }
             />
             <Button selected={etAlia} onClick={() => act('et_alia')}>
               {'Multiple Authors'}
@@ -81,7 +83,8 @@ const PaperPublishing = (props, context) => {
               onChange={(e, value) =>
                 act('rewrite', {
                   abstract: value,
-                })}
+                })
+              }
             />
           </LabeledList.Item>
           <LabeledList.Item label="Selected File">
@@ -94,13 +97,15 @@ const PaperPublishing = (props, context) => {
                   onSelected={(ordfile_name) =>
                     act('select_file', {
                       selected_uid: fileList[ordfile_name],
-                    })}
+                    })
+                  }
                 />
               </Stack.Item>
               <Stack.Item align="center">
                 <Tooltip
                   position="left"
-                  content="The selected file containing experimental data for our paper. Must be present in the HDD to be accesible. Transfer files with the File Manager program.">
+                  content="The selected file containing experimental data for our paper. Must be present in the HDD to be accesible. Transfer files with the File Manager program."
+                >
                   <Icon size={1.15} name="info-circle" />
                 </Tooltip>
               </Stack.Item>
@@ -116,13 +121,15 @@ const PaperPublishing = (props, context) => {
                   onSelected={(experiment_name) =>
                     act('select_experiment', {
                       selected_expath: expList[experiment_name],
-                    })}
+                    })
+                  }
                 />
               </Stack.Item>
               <Stack.Item align="center">
                 <Tooltip
                   position="left"
-                  content="The topic we want to publish our paper on. Different topics unlock different technologies and possible partners.">
+                  content="The topic we want to publish our paper on. Different topics unlock different technologies and possible partners."
+                >
                   <Icon size={1.15} name="info-circle" />
                 </Tooltip>
               </Stack.Item>
@@ -138,13 +145,15 @@ const PaperPublishing = (props, context) => {
                   onSelected={(new_tier) =>
                     act('select_tier', {
                       selected_tier: Number(new_tier),
-                    })}
+                    })
+                  }
                 />
               </Stack.Item>
               <Stack.Item align="center">
                 <Tooltip
                   position="left"
-                  content="The tier we want to publish on. Higher tiers can confer better rewards but means our data will be judged more harshly.">
+                  content="The tier we want to publish on. Higher tiers can confer better rewards but means our data will be judged more harshly."
+                >
                   <Icon size={1.15} name="info-circle" />
                 </Tooltip>
               </Stack.Item>
@@ -160,13 +169,15 @@ const PaperPublishing = (props, context) => {
                   onSelected={(new_partner) =>
                     act('select_partner', {
                       selected_partner: allowedPartners[new_partner],
-                    })}
+                    })
+                  }
                 />
               </Stack.Item>
               <Stack.Item align="center">
                 <Tooltip
                   position="left"
-                  content="Which organization to partner with. We can obtain research boosts in techs related to the partner's interests.">
+                  content="Which organization to partner with. We can obtain research boosts in techs related to the partner's interests."
+                >
                   <Icon size={1.15} name="info-circle" />
                 </Tooltip>
               </Stack.Item>
@@ -179,7 +190,8 @@ const PaperPublishing = (props, context) => {
           <Stack.Item grow>
             <Tooltip
               position="top"
-              content="How much will our relation improve with the particular partner. Cooperation will be used to unlock boosts.">
+              content="How much will our relation improve with the particular partner. Cooperation will be used to unlock boosts."
+            >
               <Icon size={1.15} name="info-circle" />
             </Tooltip>
             {' Cooperation: '}
@@ -188,7 +200,8 @@ const PaperPublishing = (props, context) => {
           <Stack.Item grow>
             <Tooltip
               position="top"
-              content="How much grant will we be endowed with upon the publication of this paper.">
+              content="How much grant will we be endowed with upon the publication of this paper."
+            >
               <Icon size={1.15} name="info-circle" />
             </Tooltip>
             {' Funding: '}
@@ -217,7 +230,8 @@ const PaperBrowser = (props, context) => {
     return publishedPapers.map((paper) => (
       <Collapsible
         key={String(paper['experimentName'] + paper['tier'])}
-        title={paper['title']}>
+        title={paper['title']}
+      >
         <Section>
           <LabeledList>
             <LabeledList.Item label="Topic">
@@ -260,8 +274,12 @@ const ExperimentBrowser = (props, context) => {
           <LabeledList.Item
             key={tier}
             label={
-              'Optimal '+ experiment.prefix + ' Amount - Tier ' + String(Number(tier) + 1)
-            }>
+              'Optimal ' +
+              experiment.prefix +
+              ' Amount - Tier ' +
+              String(Number(tier) + 1)
+            }
+          >
             {experiment.target[tier] + ' ' + experiment.suffix}
           </LabeledList.Item>
         ))}
@@ -324,7 +342,8 @@ const PartnersBrowser = (props, context) => {
                         act('purchase_boost', {
                           purchased_boost: node.id,
                           boost_seller: partner.path,
-                        })}
+                        })
+                      }
                     />
                   </TableCell>
                 </TableRow>
@@ -348,7 +367,9 @@ export const NtosScipaperContent = (props, context) => {
           onClick={() =>
             act('change_tab', {
               new_tab: 1,
-            })}>
+            })
+          }
+        >
           {'Publish Papers'}
         </Tabs.Tab>
         <Tabs.Tab
@@ -356,7 +377,9 @@ export const NtosScipaperContent = (props, context) => {
           onClick={() =>
             act('change_tab', {
               new_tab: 2,
-            })}>
+            })
+          }
+        >
           {'View Previous Publications'}
         </Tabs.Tab>
         <Tabs.Tab
@@ -364,7 +387,9 @@ export const NtosScipaperContent = (props, context) => {
           onClick={() =>
             act('change_tab', {
               new_tab: 3,
-            })}>
+            })
+          }
+        >
           {'View Available Experiments'}
         </Tabs.Tab>
         <Tabs.Tab
@@ -372,7 +397,9 @@ export const NtosScipaperContent = (props, context) => {
           onClick={() =>
             act('change_tab', {
               new_tab: 4,
-            })}>
+            })
+          }
+        >
           {'View Scientific Partners'}
         </Tabs.Tab>
       </Tabs>
diff --git a/tgui/packages/tgui/interfaces/NtosSecurEye.js b/tgui/packages/tgui/interfaces/NtosSecurEye.js
index c5780b3efb37..d9a591a7b700 100644
--- a/tgui/packages/tgui/interfaces/NtosSecurEye.js
+++ b/tgui/packages/tgui/interfaces/NtosSecurEye.js
@@ -1,21 +1,22 @@
 import { useBackend } from '../backend';
 import { Button, ByondUi } from '../components';
 import { NtosWindow } from '../layouts';
-import { prevNextCamera, selectCameras, CameraConsoleContent } from './CameraConsole';
+import {
+  prevNextCamera,
+  selectCameras,
+  CameraConsoleContent,
+} from './CameraConsole';
 
 export const NtosSecurEye = (props, context) => {
   const { act, data, config } = useBackend(context);
   const { PC_device_theme, mapRef, activeCamera } = data;
   const cameras = selectCameras(data.cameras);
-  const [
-    prevCameraName,
-    nextCameraName,
-  ] = prevNextCamera(cameras, activeCamera);
+  const [prevCameraName, nextCameraName] = prevNextCamera(
+    cameras,
+    activeCamera,
+  );
   return (
-    <NtosWindow
-      width={800}
-      height={600}
-      theme={PC_device_theme}>
+    <NtosWindow width={800} height={600} theme={PC_device_theme}>
       <NtosWindow.Content>
         <div className="CameraConsole__left">
           <CameraConsoleContent />
@@ -23,30 +24,35 @@ export const NtosSecurEye = (props, context) => {
         <div className="CameraConsole__right">
           <div className="CameraConsole__toolbar">
             <b>Camera: </b>
-            {activeCamera
-              && activeCamera.name
-              || '—'}
+            {(activeCamera && activeCamera.name) || '—'}
           </div>
           <div className="CameraConsole__toolbarRight">
             <Button
               icon="chevron-left"
               disabled={!prevCameraName}
-              onClick={() => act('switch_camera', {
-                name: prevCameraName,
-              })} />
+              onClick={() =>
+                act('switch_camera', {
+                  name: prevCameraName,
+                })
+              }
+            />
             <Button
               icon="chevron-right"
               disabled={!nextCameraName}
-              onClick={() => act('switch_camera', {
-                name: nextCameraName,
-              })} />
+              onClick={() =>
+                act('switch_camera', {
+                  name: nextCameraName,
+                })
+              }
+            />
           </div>
           <ByondUi
             className="CameraConsole__map"
             params={{
               id: mapRef,
               type: 'map',
-            }} />
+            }}
+          />
         </div>
       </NtosWindow.Content>
     </NtosWindow>
diff --git a/tgui/packages/tgui/interfaces/NtosShipping.js b/tgui/packages/tgui/interfaces/NtosShipping.js
index 5769827dfa6d..2bcb21cdcf39 100644
--- a/tgui/packages/tgui/interfaces/NtosShipping.js
+++ b/tgui/packages/tgui/interfaces/NtosShipping.js
@@ -5,27 +5,27 @@ import { NtosWindow } from '../layouts';
 export const NtosShipping = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <NtosWindow
-      width={450}
-      height={350}>
+    <NtosWindow width={450} height={350}>
       <NtosWindow.Content scrollable>
         <Section
           title="NTOS Shipping Hub."
-          buttons={(
+          buttons={
             <Button
               icon="eject"
               content="Eject Id"
-              onClick={() => act('ejectid')} />
-          )}>
+              onClick={() => act('ejectid')}
+            />
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Current User">
-              {data.current_user || "N/A"}
+              {data.current_user || 'N/A'}
             </LabeledList.Item>
             <LabeledList.Item label="Inserted Card">
-              {data.card_owner || "N/A"}
+              {data.card_owner || 'N/A'}
             </LabeledList.Item>
             <LabeledList.Item label="Available Paper">
-              {data.has_printer ? data.paperamt : "N/A"}
+              {data.has_printer ? data.paperamt : 'N/A'}
             </LabeledList.Item>
             <LabeledList.Item label="Profit on Sale">
               {data.barcode_split}%
@@ -40,7 +40,8 @@ export const NtosShipping = (props, context) => {
               tooltipPosition="right"
               disabled={!data.has_id_slot}
               onClick={() => act('selectid')}
-              content="Set Current ID" />
+              content="Set Current ID"
+            />
           </Box>
           <Box>
             <Button
@@ -49,7 +50,8 @@ export const NtosShipping = (props, context) => {
               tooltipPosition="right"
               disabled={!data.has_printer || !data.current_user}
               onClick={() => act('print')}
-              content="Print Barcode" />
+              content="Print Barcode"
+            />
           </Box>
           <Box>
             <Button
@@ -57,13 +59,15 @@ export const NtosShipping = (props, context) => {
               tooltip="Set how much profit you'd like on your package."
               tooltipPosition="right"
               onClick={() => act('setsplit')}
-              content="Set Profit Margin" />
+              content="Set Profit Margin"
+            />
           </Box>
           <Box>
             <Button
               icon="sync-alt"
               content="Reset ID"
-              onClick={() => act('resetid')} />
+              onClick={() => act('resetid')}
+            />
           </Box>
         </Section>
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosSignaler.js b/tgui/packages/tgui/interfaces/NtosSignaler.js
index 5f948c85470e..02370dbf9401 100644
--- a/tgui/packages/tgui/interfaces/NtosSignaler.js
+++ b/tgui/packages/tgui/interfaces/NtosSignaler.js
@@ -3,9 +3,7 @@ import { NtosWindow } from '../layouts';
 
 export const NtosSignaler = (props, context) => {
   return (
-    <NtosWindow
-      width={400}
-      height={300}>
+    <NtosWindow width={400} height={300}>
       <NtosWindow.Content>
         <SignalerContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosSkillTracker.js b/tgui/packages/tgui/interfaces/NtosSkillTracker.js
index 4bc719ffb54d..abb3ec3f0296 100644
--- a/tgui/packages/tgui/interfaces/NtosSkillTracker.js
+++ b/tgui/packages/tgui/interfaces/NtosSkillTracker.js
@@ -1,39 +1,32 @@
 import { useBackend } from '../backend';
-import { Button, Section, Table, BlockQuote, ProgressBar, AnimatedNumber } from '../components';
+import {
+  Button,
+  Section,
+  Table,
+  BlockQuote,
+  ProgressBar,
+  AnimatedNumber,
+} from '../components';
 import { NtosWindow } from '../layouts';
 
 export const NtosSkillTracker = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    skills = {},
-  } = data;
+  const { skills = {} } = data;
   return (
-    <NtosWindow
-      width={500}
-      height={600}>
+    <NtosWindow width={500} height={600}>
       <NtosWindow.Content scrollable>
-        <Section
-          title="Skill Tracker">
+        <Section title="Skill Tracker">
           {skills.map((skill, idx) => (
-            <Section
-              key={idx}
-              level={2}
-              title={skill.name}>
-              <BlockQuote>
-                {skill.desc}
-              </BlockQuote>
+            <Section key={idx} level={2} title={skill.name}>
+              <BlockQuote>{skill.desc}</BlockQuote>
               <Section>
                 <Table>
                   <Table.Row header>
                     <Table.Cell textAlign="center" collapsing>
                       Level
                     </Table.Cell>
-                    <Table.Cell textAlign="center">
-                      Level Progress
-                    </Table.Cell>
-                    <Table.Cell textAlign="center">
-                      Overall Progress
-                    </Table.Cell>
+                    <Table.Cell textAlign="center">Level Progress</Table.Cell>
+                    <Table.Cell textAlign="center">Overall Progress</Table.Cell>
                   </Table.Row>
                   <Table.Row className="candystripe">
                     <Table.Cell textAlign="center" collapsing>
@@ -45,11 +38,16 @@ export const NtosSkillTracker = (props, context) => {
                           value={skill.progress_percent}
                           ranges={{
                             good: [0.75, 1.0],
-                          }}>
+                          }}
+                        >
                           <AnimatedNumber
-                            value={Math.round(skill.progress_percent * 100)} />%
+                            value={Math.round(skill.progress_percent * 100)}
+                          />
+                          %
                         </ProgressBar>
-                      ) : ('—')}
+                      ) : (
+                        '—'
+                      )}
                     </Table.Cell>
                     <Table.Cell textAlign="center">
                       {skill.overall_percent ? (
@@ -57,11 +55,16 @@ export const NtosSkillTracker = (props, context) => {
                           value={skill.overall_percent}
                           ranges={{
                             good: [0.75, 1.0],
-                          }}>
+                          }}
+                        >
                           <AnimatedNumber
-                            value={Math.round(skill.overall_percent * 100)} />%
+                            value={Math.round(skill.overall_percent * 100)}
+                          />
+                          %
                         </ProgressBar>
-                      ) : ('—')}
+                      ) : (
+                        '—'
+                      )}
                     </Table.Cell>
                   </Table.Row>
                   {!!skill.reward && (
@@ -70,7 +73,10 @@ export const NtosSkillTracker = (props, context) => {
                         <Button
                           icon="trophy"
                           style={{ margin: '8px' }}
-                          onClick={() => act('PRG_reward', { skill: skill.name })}>
+                          onClick={() =>
+                            act('PRG_reward', { skill: skill.name })
+                          }
+                        >
                           Contact the Professional {skill.title} Association
                         </Button>
                       </Table.Cell>
diff --git a/tgui/packages/tgui/interfaces/NtosStationAlertConsole.js b/tgui/packages/tgui/interfaces/NtosStationAlertConsole.js
index e39a38dd7373..a3c9ae8f00f9 100644
--- a/tgui/packages/tgui/interfaces/NtosStationAlertConsole.js
+++ b/tgui/packages/tgui/interfaces/NtosStationAlertConsole.js
@@ -3,9 +3,7 @@ import { StationAlertConsoleContent } from './StationAlertConsole';
 
 export const NtosStationAlertConsole = () => {
   return (
-    <NtosWindow
-      width={335}
-      height={587}>
+    <NtosWindow width={335} height={587}>
       <NtosWindow.Content scrollable>
         <StationAlertConsoleContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosStatus.js b/tgui/packages/tgui/interfaces/NtosStatus.js
index 64ad2e81e30c..6f6bf24cda69 100644
--- a/tgui/packages/tgui/interfaces/NtosStatus.js
+++ b/tgui/packages/tgui/interfaces/NtosStatus.js
@@ -4,33 +4,32 @@ import { Input, Section, Button } from '../components';
 
 export const NtosStatus = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    upper,
-    lower,
-  } = data;
+  const { upper, lower } = data;
 
   return (
-    <NtosWindow
-      width={310}
-      height={200}>
+    <NtosWindow width={310} height={200}>
       <NtosWindow.Content>
         <Section>
           <Input
             fluid
             value={upper}
-            onChange={(e, value) => act('stat_update', {
-              position: "upper",
-              text: value,
-            })}
+            onChange={(e, value) =>
+              act('stat_update', {
+                position: 'upper',
+                text: value,
+              })
+            }
           />
           <br />
           <Input
             fluid
             value={lower}
-            onChange={(e, value) => act('stat_update', {
-              position: "lower",
-              text: value,
-            })}
+            onChange={(e, value) =>
+              act('stat_update', {
+                position: 'lower',
+                text: value,
+              })
+            }
           />
           <br />
           <Button
diff --git a/tgui/packages/tgui/interfaces/NtosSupermatterMonitor.js b/tgui/packages/tgui/interfaces/NtosSupermatterMonitor.js
index 6ec5fe5e398d..82f078923166 100644
--- a/tgui/packages/tgui/interfaces/NtosSupermatterMonitor.js
+++ b/tgui/packages/tgui/interfaces/NtosSupermatterMonitor.js
@@ -3,9 +3,7 @@ import { SupermatterMonitorContent } from './SupermatterMonitor';
 
 export const NtosSupermatterMonitor = (props, context) => {
   return (
-    <NtosWindow
-      width={600}
-      height={350}>
+    <NtosWindow width={600} height={350}>
       <NtosWindow.Content scrollable>
         <SupermatterMonitorContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NuclearBomb.js b/tgui/packages/tgui/interfaces/NuclearBomb.js
index 0a4a3324b143..741b1bc5b07b 100644
--- a/tgui/packages/tgui/interfaces/NuclearBomb.js
+++ b/tgui/packages/tgui/interfaces/NuclearBomb.js
@@ -17,9 +17,9 @@ const NukeKeypad = (props, context) => {
   return (
     <Box width="185px">
       <Grid width="1px">
-        {keypadKeys.map(keyColumn => (
+        {keypadKeys.map((keyColumn) => (
           <Grid.Column key={keyColumn[0]}>
-            {keyColumn.map(key => (
+            {keyColumn.map((key) => (
               <Button
                 fluid
                 bold
@@ -35,7 +35,8 @@ const NukeKeypad = (props, context) => {
                   'NuclearBomb__Button--keypad',
                   'NuclearBomb__Button--' + key,
                 ])}
-                onClick={() => act('keypad', { digit: key })} />
+                onClick={() => act('keypad', { digit: key })}
+              />
             ))}
           </Grid.Column>
         ))}
@@ -46,29 +47,17 @@ const NukeKeypad = (props, context) => {
 
 export const NuclearBomb = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    anchored,
-    disk_present,
-    status1,
-    status2,
-  } = data;
+  const { anchored, disk_present, status1, status2 } = data;
   return (
-    <Window
-      width={350}
-      height={442}
-      theme="retro">
+    <Window width={350} height={442} theme="retro">
       <Window.Content>
         <Box m="6px">
-          <Box
-            mb="6px"
-            className="NuclearBomb__displayBox">
+          <Box mb="6px" className="NuclearBomb__displayBox">
             {status1}
           </Box>
           <Flex mb={1.5}>
             <Flex.Item grow={1}>
-              <Box className="NuclearBomb__displayBox">
-                {status2}
-              </Box>
+              <Box className="NuclearBomb__displayBox">{status2}</Box>
             </Flex.Item>
             <Flex.Item>
               <Button
@@ -81,7 +70,8 @@ export const NuclearBomb = (props, context) => {
                 mr="3px"
                 mt="3px"
                 className="NuclearBomb__Button NuclearBomb__Button--keypad"
-                onClick={() => act('eject_disk')} />
+                onClick={() => act('eject_disk')}
+              />
             </Flex.Item>
           </Flex>
           <Flex ml="3px">
@@ -99,7 +89,8 @@ export const NuclearBomb = (props, context) => {
                   lineHeight={1.1}
                   mb="6px"
                   className="NuclearBomb__Button NuclearBomb__Button--C"
-                  onClick={() => act('arm')} />
+                  onClick={() => act('arm')}
+                />
                 <Button
                   fluid
                   bold
@@ -108,16 +99,12 @@ export const NuclearBomb = (props, context) => {
                   fontSize="28px"
                   lineHeight={1.1}
                   className="NuclearBomb__Button NuclearBomb__Button--E"
-                  onClick={() => act('anchor')} />
-                <Box
-                  textAlign="center"
-                  color="#9C9987"
-                  fontSize="80px">
+                  onClick={() => act('anchor')}
+                />
+                <Box textAlign="center" color="#9C9987" fontSize="80px">
                   <Icon name="radiation" />
                 </Box>
-                <Box
-                  height="80px"
-                  className="NuclearBomb__NTIcon" />
+                <Box height="80px" className="NuclearBomb__NTIcon" />
               </Box>
             </Flex.Item>
           </Flex>
diff --git a/tgui/packages/tgui/interfaces/NumberInputModal.tsx b/tgui/packages/tgui/interfaces/NumberInputModal.tsx
index b662205a634d..56740f4e80e8 100644
--- a/tgui/packages/tgui/interfaces/NumberInputModal.tsx
+++ b/tgui/packages/tgui/interfaces/NumberInputModal.tsx
@@ -17,8 +17,7 @@ type NumberInputData = {
 
 export const NumberInputModal = (_, context) => {
   const { act, data } = useBackend<NumberInputData>(context);
-  const { init_value, large_buttons, message = "", timeout, title }
-    = data;
+  const { init_value, large_buttons, message = '', timeout, title } = data;
   const [input, setInput] = useLocalState(context, 'input', init_value);
   const onChange = (value: number) => {
     if (value === input) {
@@ -33,10 +32,10 @@ export const NumberInputModal = (_, context) => {
     setInput(value);
   };
   // Dynamically changes the window height based on the message.
-  const windowHeight
-    = 140
-    + (message.length > 30 ? Math.ceil(message.length / 3) : 0)
-    + (message.length && large_buttons ? 5 : 0);
+  const windowHeight =
+    140 +
+    (message.length > 30 ? Math.ceil(message.length / 3) : 0) +
+    (message.length && large_buttons ? 5 : 0);
 
   return (
     <Window title={title} width={270} height={windowHeight}>
@@ -50,7 +49,8 @@ export const NumberInputModal = (_, context) => {
           if (keyCode === KEY_ESCAPE) {
             act('cancel');
           }
-        }}>
+        }}
+      >
         <Section fill>
           <Stack fill vertical>
             <Stack.Item grow>
diff --git a/tgui/packages/tgui/interfaces/OperatingComputer.js b/tgui/packages/tgui/interfaces/OperatingComputer.js
index 54c4101c4252..3f5a5bac868d 100644
--- a/tgui/packages/tgui/interfaces/OperatingComputer.js
+++ b/tgui/packages/tgui/interfaces/OperatingComputer.js
@@ -1,5 +1,12 @@
 import { useBackend, useSharedState } from '../backend';
-import { AnimatedNumber, LabeledList, NoticeBox, ProgressBar, Section, Tabs } from '../components';
+import {
+  AnimatedNumber,
+  LabeledList,
+  NoticeBox,
+  ProgressBar,
+  Section,
+  Tabs,
+} from '../components';
 import { Window } from '../layouts';
 
 const damageTypes = [
@@ -26,32 +33,21 @@ export const OperatingComputer = (props, context) => {
   const [tab, setTab] = useSharedState(context, 'tab', 1);
 
   return (
-    <Window
-      width={350}
-      height={470}>
+    <Window width={350} height={470}>
       <Window.Content scrollable>
         <Tabs>
-          <Tabs.Tab
-            selected={tab === 1}
-            onClick={() => setTab(1)}>
+          <Tabs.Tab selected={tab === 1} onClick={() => setTab(1)}>
             Patient State
           </Tabs.Tab>
-          <Tabs.Tab
-            selected={tab === 2}
-            onClick={() => setTab(2)}>
+          <Tabs.Tab selected={tab === 2} onClick={() => setTab(2)}>
             Surgery Procedures
           </Tabs.Tab>
-          <Tabs.Tab
-            onClick={() => act("open_experiments")}>
+          <Tabs.Tab onClick={() => act('open_experiments')}>
             Experiments
           </Tabs.Tab>
         </Tabs>
-        {tab === 1 && (
-          <PatientStateView />
-        )}
-        {tab === 2 && (
-          <SurgeryProceduresView />
-        )}
+        {tab === 1 && <PatientStateView />}
+        {tab === 2 && <SurgeryProceduresView />}
       </Window.Content>
     </Window>
   );
@@ -59,26 +55,16 @@ export const OperatingComputer = (props, context) => {
 
 const PatientStateView = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    table,
-    procedures = [],
-    patient = {},
-  } = data;
+  const { table, procedures = [], patient = {} } = data;
   if (!table) {
-    return (
-      <NoticeBox>
-        No Table Detected
-      </NoticeBox>
-    );
+    return <NoticeBox>No Table Detected</NoticeBox>;
   }
   return (
     <>
       <Section title="Patient State">
-        {patient && (
+        {(patient && (
           <LabeledList>
-            <LabeledList.Item
-              label="State"
-              color={patient.statstate}>
+            <LabeledList.Item label="State" color={patient.statstate}>
               {patient.stat}
             </LabeledList.Item>
             <LabeledList.Item label="Blood Type">
@@ -89,33 +75,28 @@ const PatientStateView = (props, context) => {
                 value={patient.health}
                 minValue={patient.minHealth}
                 maxValue={patient.maxHealth}
-                color={patient.health >= 0 ? 'good' : 'average'}>
+                color={patient.health >= 0 ? 'good' : 'average'}
+              >
                 <AnimatedNumber value={patient.health} />
               </ProgressBar>
             </LabeledList.Item>
-            {damageTypes.map(type => (
+            {damageTypes.map((type) => (
               <LabeledList.Item key={type.type} label={type.label}>
                 <ProgressBar
                   value={patient[type.type] / patient.maxHealth}
-                  color="bad">
+                  color="bad"
+                >
                   <AnimatedNumber value={patient[type.type]} />
                 </ProgressBar>
               </LabeledList.Item>
             ))}
           </LabeledList>
-        ) || (
-          'No Patient Detected'
-        )}
+        )) ||
+          'No Patient Detected'}
       </Section>
-      {procedures.length === 0 && (
-        <Section>
-          No Active Procedures
-        </Section>
-      )}
-      {procedures.map(procedure => (
-        <Section
-          key={procedure.name}
-          title={procedure.name}>
+      {procedures.length === 0 && <Section>No Active Procedures</Section>}
+      {procedures.map((procedure) => (
+        <Section key={procedure.name} title={procedure.name}>
           <LabeledList>
             <LabeledList.Item label="Next Step">
               {procedure.next_step}
@@ -148,16 +129,11 @@ const PatientStateView = (props, context) => {
 
 const SurgeryProceduresView = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    surgeries = [],
-  } = data;
+  const { surgeries = [] } = data;
   return (
     <Section title="Advanced Surgery Procedures">
-      {surgeries.map(surgery => (
-        <Section
-          title={surgery.name}
-          key={surgery.name}
-          level={2}>
+      {surgeries.map((surgery) => (
+        <Section title={surgery.name} key={surgery.name} level={2}>
           {surgery.desc}
         </Section>
       ))}
diff --git a/tgui/packages/tgui/interfaces/Orbit.js b/tgui/packages/tgui/interfaces/Orbit.js
index 0a3301815487..b022e3e7e332 100644
--- a/tgui/packages/tgui/interfaces/Orbit.js
+++ b/tgui/packages/tgui/interfaces/Orbit.js
@@ -2,14 +2,23 @@ import { createSearch } from 'common/string';
 import { multiline } from 'common/string';
 import { resolveAsset } from '../assets';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Divider, Flex, Icon, Input, Section } from '../components';
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Icon,
+  Input,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 const PATTERN_NUMBER = / \(([0-9]+)\)$/;
 
-const searchFor = searchText => createSearch(searchText, thing => thing.name);
+const searchFor = (searchText) =>
+  createSearch(searchText, (thing) => thing.name);
 
-const compareString = (a, b) => a < b ? -1 : a > b;
+const compareString = (a, b) => (a < b ? -1 : a > b);
 
 const compareNumberedText = (a, b) => {
   const aName = a.name;
@@ -20,9 +29,10 @@ const compareNumberedText = (a, b) => {
   const aNumberMatch = aName.match(PATTERN_NUMBER);
   const bNumberMatch = bName.match(PATTERN_NUMBER);
 
-  if (aNumberMatch
-    && bNumberMatch
-    && aName.replace(PATTERN_NUMBER, "") === bName.replace(PATTERN_NUMBER, "")
+  if (
+    aNumberMatch &&
+    bNumberMatch &&
+    aName.replace(PATTERN_NUMBER, '') === bName.replace(PATTERN_NUMBER, '')
   ) {
     const aNumber = parseInt(aNumberMatch[1], 10);
     const bNumber = parseInt(bNumberMatch[1], 10);
@@ -39,18 +49,23 @@ const BasicSection = (props, context) => {
 
   const things = source.filter(searchFor(searchText));
   things.sort(compareNumberedText);
-  return source.length > 0 && (
-    <Section title={`${title} - (${source.length})`}>
-      {things.map(thing => (
-        <Button
-          key={thing.name}
-          content={thing.name}
-          onClick={() => act("orbit", {
-            ref: thing.ref,
-            auto_observe: autoObserve,
-          })} />
-      ))}
-    </Section>
+  return (
+    source.length > 0 && (
+      <Section title={`${title} - (${source.length})`}>
+        {things.map((thing) => (
+          <Button
+            key={thing.name}
+            content={thing.name}
+            onClick={() =>
+              act('orbit', {
+                ref: thing.ref,
+                auto_observe: autoObserve,
+              })
+            }
+          />
+        ))}
+      </Section>
+    )
   );
 };
 
@@ -61,19 +76,20 @@ const OrbitedButton = (props, context) => {
   return (
     <Button
       color={color}
-      onClick={() => act("orbit", {
-        ref: thing.ref,
-        auto_observe: autoObserve,
-      })}>
+      onClick={() =>
+        act('orbit', {
+          ref: thing.ref,
+          auto_observe: autoObserve,
+        })
+      }
+    >
       {thing.name}
       {thing.orbiters && (
         <Box inline ml={1}>
-          {"("}{thing.orbiters}{" "}
-          <Box
-            as="img"
-            src={resolveAsset('ghost.png')}
-            opacity={0.7} />
-          {")"}
+          {'('}
+          {thing.orbiters}{' '}
+          <Box as="img" src={resolveAsset('ghost.png')} opacity={0.7} />
+          {')'}
         </Box>
       )}
     </Button>
@@ -82,17 +98,14 @@ const OrbitedButton = (props, context) => {
 
 export const Orbit = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    alive,
-    antagonists,
-    dead,
-    ghosts,
-    misc,
-    npcs,
-  } = data;
-
-  const [searchText, setSearchText] = useLocalState(context, "searchText", "");
-  const [autoObserve, setAutoObserve] = useLocalState(context, "autoObserve", true);
+  const { alive, antagonists, dead, ghosts, misc, npcs } = data;
+
+  const [searchText, setSearchText] = useLocalState(context, 'searchText', '');
+  const [autoObserve, setAutoObserve] = useLocalState(
+    context,
+    'autoObserve',
+    true,
+  );
 
   const collatedAntagonists = {};
   for (const antagonist of antagonists) {
@@ -107,16 +120,20 @@ export const Orbit = (props, context) => {
     return compareString(a[0], b[0]);
   });
 
-  const orbitMostRelevant = searchText => {
+  const orbitMostRelevant = (searchText) => {
     for (const source of [
       sortedAntagonists.map(([_, antags]) => antags),
-      alive, ghosts, dead, npcs, misc,
+      alive,
+      ghosts,
+      dead,
+      npcs,
+      misc,
     ]) {
       const member = source
         .filter(searchFor(searchText))
         .sort(compareNumberedText)[0];
       if (member !== undefined) {
-        act("orbit", {
+        act('orbit', {
           ref: member.ref,
           auto_observe: autoObserve,
         });
@@ -126,17 +143,12 @@ export const Orbit = (props, context) => {
   };
 
   return (
-    <Window
-      title="Orbit"
-      width={350}
-      height={700}>
+    <Window title="Orbit" width={350} height={700}>
       <Window.Content scrollable>
         <Section>
           <Flex>
             <Flex.Item>
-              <Icon
-                name="search"
-                mr={1} />
+              <Icon name="search" mr={1} />
             </Flex.Item>
             <Flex.Item grow={1}>
               <Input
@@ -145,7 +157,8 @@ export const Orbit = (props, context) => {
                 fluid
                 value={searchText}
                 onInput={(_, value) => setSearchText(value)}
-                onEnter={(_, value) => orbitMostRelevant(value)} />
+                onEnter={(_, value) => orbitMostRelevant(value)}
+              />
             </Flex.Item>
             <Flex.Item>
               <Divider vertical />
@@ -158,8 +171,9 @@ export const Orbit = (props, context) => {
                 see the UI / full inventory of whoever you're orbiting. Neat!`}
                 tooltipPosition="bottom-start"
                 selected={autoObserve}
-                icon={autoObserve ? "toggle-on" : "toggle-off"}
-                onClick={() => setAutoObserve(!autoObserve)} />
+                icon={autoObserve ? 'toggle-on' : 'toggle-off'}
+                onClick={() => setAutoObserve(!autoObserve)}
+              />
             </Flex.Item>
             <Flex.Item>
               <Button
@@ -168,7 +182,8 @@ export const Orbit = (props, context) => {
                 tooltip="Refresh"
                 tooltipPosition="bottom-start"
                 icon="sync-alt"
-                onClick={() => act("refresh")} />
+                onClick={() => act('refresh')}
+              />
             </Flex.Item>
           </Flex>
         </Section>
@@ -179,7 +194,7 @@ export const Orbit = (props, context) => {
                 {antags
                   .filter(searchFor(searchText))
                   .sort(compareNumberedText)
-                  .map(antag => (
+                  .map((antag) => (
                     <OrbitedButton
                       key={antag.name}
                       color="bad"
@@ -196,12 +211,13 @@ export const Orbit = (props, context) => {
           {alive
             .filter(searchFor(searchText))
             .sort(compareNumberedText)
-            .map(thing => (
+            .map((thing) => (
               <OrbitedButton
                 key={thing.name}
                 color="good"
                 thing={thing}
-                autoObserve={autoObserve} />
+                autoObserve={autoObserve}
+              />
             ))}
         </Section>
 
@@ -209,12 +225,13 @@ export const Orbit = (props, context) => {
           {ghosts
             .filter(searchFor(searchText))
             .sort(compareNumberedText)
-            .map(thing => (
+            .map((thing) => (
               <OrbitedButton
                 key={thing.name}
                 color="grey"
                 thing={thing}
-                autoObserve={autoObserve} />
+                autoObserve={autoObserve}
+              />
             ))}
         </Section>
 
@@ -225,17 +242,9 @@ export const Orbit = (props, context) => {
           autoObserve={autoObserve}
         />
 
-        <BasicSection
-          title="NPCs"
-          source={npcs}
-          searchText={searchText}
-        />
+        <BasicSection title="NPCs" source={npcs} searchText={searchText} />
 
-        <BasicSection
-          title="Misc"
-          source={misc}
-          searchText={searchText}
-        />
+        <BasicSection title="Misc" source={misc} searchText={searchText} />
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/OreBox.js b/tgui/packages/tgui/interfaces/OreBox.js
index 326385e7066d..f3aef4290d79 100644
--- a/tgui/packages/tgui/interfaces/OreBox.js
+++ b/tgui/packages/tgui/interfaces/OreBox.js
@@ -7,31 +7,22 @@ export const OreBox = (props, context) => {
   const { act, data } = useBackend(context);
   const { materials } = data;
   return (
-    <Window
-      width={335}
-      height={415}>
+    <Window width={335} height={415}>
       <Window.Content scrollable>
         <Section
           title="Ores"
-          buttons={(
-            <Button
-              content="Empty"
-              onClick={() => act('removeall')} />
-          )}>
+          buttons={<Button content="Empty" onClick={() => act('removeall')} />}
+        >
           <Table>
             <Table.Row header>
-              <Table.Cell>
-                Ore
-              </Table.Cell>
+              <Table.Cell>Ore</Table.Cell>
               <Table.Cell collapsing textAlign="right">
                 Amount
               </Table.Cell>
             </Table.Row>
-            {materials.map(material => (
+            {materials.map((material) => (
               <Table.Row key={material.type}>
-                <Table.Cell>
-                  {toTitleCase(material.name)}
-                </Table.Cell>
+                <Table.Cell>{toTitleCase(material.name)}</Table.Cell>
                 <Table.Cell collapsing textAlign="right">
                   <Box color="label" inline>
                     {material.amount}
diff --git a/tgui/packages/tgui/interfaces/OreRedemptionMachine.js b/tgui/packages/tgui/interfaces/OreRedemptionMachine.js
index 90edb693b37d..8a948be83e6c 100644
--- a/tgui/packages/tgui/interfaces/OreRedemptionMachine.js
+++ b/tgui/packages/tgui/interfaces/OreRedemptionMachine.js
@@ -1,26 +1,25 @@
 import { toTitleCase } from 'common/string';
 import { useBackend, useLocalState } from '../backend';
-import { BlockQuote, Box, Button, NumberInput, Section, Table } from '../components';
+import {
+  BlockQuote,
+  Box,
+  Button,
+  NumberInput,
+  Section,
+  Table,
+} from '../components';
 import { Window } from '../layouts';
 
 export const OreRedemptionMachine = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    unclaimedPoints,
-    materials,
-    alloys,
-    diskDesigns,
-    hasDisk,
-  } = data;
+  const { unclaimedPoints, materials, alloys, diskDesigns, hasDisk } = data;
   return (
-    <Window
-      title="Ore Redemption Machine"
-      width={440}
-      height={550}>
+    <Window title="Ore Redemption Machine" width={440} height={550}>
       <Window.Content scrollable>
         <Section>
           <BlockQuote mb={1}>
-            This machine only accepts ore.<br />
+            This machine only accepts ore.
+            <br />
             Gibtonite and Slag are not accepted.
           </BlockQuote>
           <Box>
@@ -32,20 +31,22 @@ export const OreRedemptionMachine = (props, context) => {
               ml={2}
               content="Claim"
               disabled={unclaimedPoints === 0}
-              onClick={() => act('Claim')} />
+              onClick={() => act('Claim')}
+            />
           </Box>
         </Section>
         <Section>
-          {hasDisk && (
+          {(hasDisk && (
             <>
               <Box mb={1}>
                 <Button
                   icon="eject"
                   content="Eject design disk"
-                  onClick={() => act('diskEject')} />
+                  onClick={() => act('diskEject')}
+                />
               </Box>
               <Table>
-                {diskDesigns.map(design => (
+                {diskDesigns.map((design) => (
                   <Table.Row key={design.index}>
                     <Table.Cell>
                       File {design.index}: {design.name}
@@ -54,44 +55,54 @@ export const OreRedemptionMachine = (props, context) => {
                       <Button
                         disabled={!design.canupload}
                         content="Upload"
-                        onClick={() => act('diskUpload', {
-                          design: design.index,
-                        })} />
+                        onClick={() =>
+                          act('diskUpload', {
+                            design: design.index,
+                          })
+                        }
+                      />
                     </Table.Cell>
                   </Table.Row>
                 ))}
               </Table>
             </>
-          ) || (
+          )) || (
             <Button
               icon="save"
               content="Insert design disk"
-              onClick={() => act('diskInsert')} />
+              onClick={() => act('diskInsert')}
+            />
           )}
         </Section>
         <Section title="Materials">
           <Table>
-            {materials.map(material => (
+            {materials.map((material) => (
               <MaterialRow
                 key={material.id}
                 material={material}
-                onRelease={amount => act('Release', {
-                  id: material.id,
-                  sheets: amount,
-                })} />
+                onRelease={(amount) =>
+                  act('Release', {
+                    id: material.id,
+                    sheets: amount,
+                  })
+                }
+              />
             ))}
           </Table>
         </Section>
         <Section title="Alloys">
           <Table>
-            {alloys.map(material => (
+            {alloys.map((material) => (
               <MaterialRow
                 key={material.id}
                 material={material}
-                onRelease={amount => act('Smelt', {
-                  id: material.id,
-                  sheets: amount,
-                })} />
+                onRelease={(amount) =>
+                  act('Smelt', {
+                    id: material.id,
+                    sheets: amount,
+                  })
+                }
+              />
             ))}
           </Table>
         </Section>
@@ -100,21 +111,19 @@ export const OreRedemptionMachine = (props, context) => {
   );
 };
 
-
 const MaterialRow = (props, context) => {
   const { material, onRelease } = props;
 
-  const [
-    amount,
-    setAmount,
-  ] = useLocalState(context, "amount" + material.name, 1);
+  const [amount, setAmount] = useLocalState(
+    context,
+    'amount' + material.name,
+    1,
+  );
 
   const amountAvailable = Math.floor(material.amount);
   return (
     <Table.Row>
-      <Table.Cell>
-        {toTitleCase(material.name).replace('Alloy', '')}
-      </Table.Cell>
+      <Table.Cell>{toTitleCase(material.name).replace('Alloy', '')}</Table.Cell>
       <Table.Cell collapsing textAlign="right">
         <Box mr={2} color="label" inline>
           {material.value && material.value + ' cr'}
@@ -133,11 +142,13 @@ const MaterialRow = (props, context) => {
           minValue={1}
           maxValue={50}
           value={amount}
-          onChange={(e, value) => setAmount(value)} />
+          onChange={(e, value) => setAmount(value)}
+        />
         <Button
           disabled={amountAvailable < 1}
           content="Release"
-          onClick={() => onRelease(amount)} />
+          onClick={() => onRelease(amount)}
+        />
       </Table.Cell>
     </Table.Row>
   );
diff --git a/tgui/packages/tgui/interfaces/OrionGame.js b/tgui/packages/tgui/interfaces/OrionGame.js
index 33c4eb2ca797..302de0635ef7 100644
--- a/tgui/packages/tgui/interfaces/OrionGame.js
+++ b/tgui/packages/tgui/interfaces/OrionGame.js
@@ -25,23 +25,23 @@ const fuelstyle = {
 };
 
 const variousButtonIcons = {
-  "Restore Hull": "wrench",
-  "Fix Engine": "rocket",
-  "Repair Electronics": "server",
-  "Wait": "clock",
-  "Continue": "arrow-right",
-  "Explore Ship": "door-open",
-  "Leave the Derelict": "arrow-right",
-  "Welcome aboard.": "user-plus",
-  "Where did you go?!": "user-minus",
-  "A good find.": "box-open",
-  "Continue travels.": "arrow-right",
-  "Keep Speed": "tachometer-alt",
-  "Slow Down": "arrow-left",
-  "Speed Past": "tachometer-alt",
-  "Go Around": "redo",
-  "Oh...": "circle",
-  "Dock": "dollar-sign",
+  'Restore Hull': 'wrench',
+  'Fix Engine': 'rocket',
+  'Repair Electronics': 'server',
+  Wait: 'clock',
+  Continue: 'arrow-right',
+  'Explore Ship': 'door-open',
+  'Leave the Derelict': 'arrow-right',
+  'Welcome aboard.': 'user-plus',
+  'Where did you go?!': 'user-minus',
+  'A good find.': 'box-open',
+  'Continue travels.': 'arrow-right',
+  'Keep Speed': 'tachometer-alt',
+  'Slow Down': 'arrow-left',
+  'Speed Past': 'tachometer-alt',
+  'Go Around': 'redo',
+  'Oh...': 'circle',
+  Dock: 'dollar-sign',
 };
 
 const STATUS2COMPONENT = [
@@ -54,40 +54,49 @@ const STATUS2COMPONENT = [
 
 const locationInfo = [
   {
-    title: "Pluto",
-    blurb: "Pluto, long since occupied with long-range sensors and scanners, stands ready to, and indeed continues to probe the far reaches of the galaxy.",
+    title: 'Pluto',
+    blurb:
+      'Pluto, long since occupied with long-range sensors and scanners, stands ready to, and indeed continues to probe the far reaches of the galaxy.',
   },
   {
-    title: "Asteroid Belt",
-    blurb: "At the edge of the Sol system lies a treacherous asteroid belt. Many have been crushed by stray asteroids and misguided judgement.",
+    title: 'Asteroid Belt',
+    blurb:
+      'At the edge of the Sol system lies a treacherous asteroid belt. Many have been crushed by stray asteroids and misguided judgement.',
   },
   {
-    title: "Proxima Centauri",
-    blurb: "The nearest star system to Sol, in ages past it stood as a reminder of the boundaries of sub-light travel, now a low-population sanctuary for adventurers and traders.",
+    title: 'Proxima Centauri',
+    blurb:
+      'The nearest star system to Sol, in ages past it stood as a reminder of the boundaries of sub-light travel, now a low-population sanctuary for adventurers and traders.',
   },
   {
-    title: "Dead Space",
-    blurb: "This region of space is particularly devoid of matter. Such low-density pockets are known to exist, but the vastness of it is astounding.",
+    title: 'Dead Space',
+    blurb:
+      'This region of space is particularly devoid of matter. Such low-density pockets are known to exist, but the vastness of it is astounding.',
   },
   {
-    title: "Rigel Prime",
-    blurb: "Rigel Prime, the center of the Rigel system, burns hot, basking its planetary bodies in warmth and radiation.",
+    title: 'Rigel Prime',
+    blurb:
+      'Rigel Prime, the center of the Rigel system, burns hot, basking its planetary bodies in warmth and radiation.',
   },
   {
-    title: "Tau Ceti Beta",
-    blurb: "Tau Ceti Beta has recently become a waypoint for colonists headed towards Orion. There are many ships and makeshift stations in the vicinity.",
+    title: 'Tau Ceti Beta',
+    blurb:
+      'Tau Ceti Beta has recently become a waypoint for colonists headed towards Orion. There are many ships and makeshift stations in the vicinity.',
   },
   {
-    title: "Space Bugs",
-    blurb: "You see some space bugs out your window. They contort in various reality bending ways, and it makes you sick. You know it's Galactic Policy to report all sightings of space bugs.",
+    title: 'Space Bugs',
+    blurb:
+      "You see some space bugs out your window. They contort in various reality bending ways, and it makes you sick. You know it's Galactic Policy to report all sightings of space bugs.",
   },
   {
-    title: "Space Outpost Beta-9",
-    blurb: "You have come into range of the first man-made structure in this region of space. It has been constructed not by travellers from Sol, but by colonists from Orion. It stands as a monument to the colonists' success.",
+    title: 'Space Outpost Beta-9',
+    blurb:
+      "You have come into range of the first man-made structure in this region of space. It has been constructed not by travellers from Sol, but by colonists from Orion. It stands as a monument to the colonists' success.",
   },
   {
-    title: "Orion Prime",
-    blurb: "You have made it to Orion! Congratulations! Your crew is one of the few to start a new foothold for mankind!",
+    title: 'Orion Prime',
+    blurb:
+      'You have made it to Orion! Congratulations! Your crew is one of the few to start a new foothold for mankind!',
   },
 ];
 
@@ -108,7 +117,7 @@ const AdventureStatus = (props, context) => {
     <Section
       title="Adventure Status"
       fill
-      buttons={(
+      buttons={
         !!lings_suspected && (
           <Button
             fluid
@@ -117,12 +126,14 @@ const AdventureStatus = (props, context) => {
             icon="skull"
             content="RANDOM KILL"
             disabled={eventname}
-            onClick={() => act('random_kill')} />
+            onClick={() => act('random_kill')}
+          />
         )
-      )} >
+      }
+    >
       <Stack mb={-1} fill>
         <Stack.Item grow mb={-0.5}>
-          {settlers?.map(settler => (
+          {settlers?.map((settler) => (
             <Stack key={settler}>
               <Stack.Item grow mt={0.9}>
                 {settler}
@@ -135,12 +146,17 @@ const AdventureStatus = (props, context) => {
                   icon="skull"
                   content="KILL"
                   disabled={lings_suspected || eventname}
-                  onClick={() => act('target_kill', {
-                    who: settler,
-                  })} />
+                  onClick={() =>
+                    act('target_kill', {
+                      who: settler,
+                    })
+                  }
+                />
               </Stack.Item>
               <Stack.Item mr={0}>
-                <Box className={'moods32x32 mood' + (settlermoods[settler] + 1)} />
+                <Box
+                  className={'moods32x32 mood' + (settlermoods[settler] + 1)}
+                />
               </Stack.Item>
             </Stack>
           ))}
@@ -152,36 +168,41 @@ const AdventureStatus = (props, context) => {
               <Button
                 fluid
                 icon="hamburger"
-                content={"Food Left: " + food}
-                color="green" />
+                content={'Food Left: ' + food}
+                color="green"
+              />
             </Stack.Item>
             <Stack.Item>
               <Button
                 fluid
                 icon="gas-pump"
-                content={"Fuel Left: " + fuel}
-                color="olive" />
+                content={'Fuel Left: ' + fuel}
+                color="olive"
+              />
             </Stack.Item>
             <Stack.Item>
               <Button
                 fluid
                 icon="wrench"
-                content={"Hull Parts: "+hull}
-                color="average" />
+                content={'Hull Parts: ' + hull}
+                color="average"
+              />
             </Stack.Item>
             <Stack.Item>
               <Button
                 fluid
                 icon="server"
-                content={"Electronics: "+electronics}
-                color="blue" />
+                content={'Electronics: ' + electronics}
+                color="blue"
+              />
             </Stack.Item>
             <Stack.Item mb={1}>
               <Button
                 fluid
                 icon="rocket"
-                content={"Engine Parts: "+engine}
-                color="violet" />
+                content={'Engine Parts: ' + engine}
+                color="violet"
+              />
             </Stack.Item>
           </Stack>
         </Stack.Item>
@@ -192,18 +213,14 @@ const AdventureStatus = (props, context) => {
 
 const ORION_STATUS_START = (props, context) => {
   const { data, act } = useBackend(context);
-  const {
-    gamename,
-  } = data;
+  const { gamename } = data;
   return (
     <Section fill>
       <Stack vertical textAlign="center" fill>
         <Stack.Item grow={1} />
-        <Stack.Item fontSize="32px">
-          {gamename}
-        </Stack.Item>
+        <Stack.Item fontSize="32px">{gamename}</Stack.Item>
         <Stack.Item grow fontSize="15px" color="label">
-          {"\"Experience the journey of your ancestors!\""}
+          {'"Experience the journey of your ancestors!"'}
         </Stack.Item>
         <Stack.Item fontSize="15px">
           <Button
@@ -211,7 +228,8 @@ const ORION_STATUS_START = (props, context) => {
             fluid
             icon="play"
             content="Begin Game"
-            onClick={() => act('start_game')} />
+            onClick={() => act('start_game')}
+          />
         </Stack.Item>
         <Stack.Item fontSize="15px">
           <Button
@@ -219,7 +237,8 @@ const ORION_STATUS_START = (props, context) => {
             fluid
             icon="info"
             content="Instructions"
-            onClick={() => act('instructions')} />
+            onClick={() => act('instructions')}
+          />
         </Stack.Item>
         <Stack.Item grow={3} />
       </Stack>
@@ -229,28 +248,30 @@ const ORION_STATUS_START = (props, context) => {
 
 const ORION_STATUS_INSTRUCTIONS = (props, context) => {
   const { act } = useBackend(context);
-  const fake_settlers = ["John", "William", "Alice", "Tom"];
+  const fake_settlers = ['John', 'William', 'Alice', 'Tom'];
   return (
     <>
       <Section
         color="label"
         title="Objective"
-        buttons={(
+        buttons={
           <Button
             content="Back to Main Menu"
-            onClick={() => act('back_to_menu')} />
-        )}>
+            onClick={() => act('back_to_menu')}
+          />
+        }
+      >
         <Box fontSize="11px">
-          In the 2200&apos;s, the Orion trail was established as a dangerous
-          yet opportunistic trail through space for those willing to risk it.
-          Many pioneers seeking new lives on the galactic frontier would find
-          exactly what they were seeking... or lose their lives on the way.
+          In the 2200&apos;s, the Orion trail was established as a dangerous yet
+          opportunistic trail through space for those willing to risk it. Many
+          pioneers seeking new lives on the galactic frontier would find exactly
+          what they were seeking... or lose their lives on the way.
         </Box>
       </Section>
       <Section title="Status Example">
         <Stack mb={-1}>
           <Stack.Item basis={70} grow mb={-0.5}>
-            {fake_settlers?.map(settler => (
+            {fake_settlers?.map((settler) => (
               <Stack key={settler}>
                 <Stack.Item grow mt={0.9}>
                   {settler}
@@ -261,7 +282,8 @@ const ORION_STATUS_INSTRUCTIONS = (props, context) => {
                     color="red"
                     textAlign="center"
                     icon="skull"
-                    content="KILL" />
+                    content="KILL"
+                  />
                 </Stack.Item>
                 <Stack.Item mr={0}>
                   <Box className={'moods32x32 mood5'} />
@@ -271,14 +293,14 @@ const ORION_STATUS_INSTRUCTIONS = (props, context) => {
           </Stack.Item>
           <Divider vertical />
           <Stack.Item>
-            This is the status panel for your pioneers. Each one requires
-            1 food every time you continue
-            towards <span style={goodstyle}>Orion</span>.
-            You can find more crew on your journey, and lose them as
-            fast as you found &apos;em.
-            <br /><br />
-            If you run out of food or crew,
-            it&apos;s <span style={badstyle}>GAME OVER</span> for you!
+            This is the status panel for your pioneers. Each one requires 1 food
+            every time you continue towards <span style={goodstyle}>Orion</span>
+            . You can find more crew on your journey, and lose them as fast as
+            you found &apos;em.
+            <br />
+            <br />
+            If you run out of food or crew, it&apos;s{' '}
+            <span style={badstyle}>GAME OVER</span> for you!
           </Stack.Item>
         </Stack>
       </Section>
@@ -288,11 +310,11 @@ const ORION_STATUS_INSTRUCTIONS = (props, context) => {
             If you want to make it to <span style={goodstyle}>Orion</span>,
             you&apos;ll need to manage your resources:
             <br />
-            <span style={goodstyle}>Food</span>: Your crewmembers consume
-            it. More crew means this goes down faster!
+            <span style={goodstyle}>Food</span>: Your crewmembers consume it.
+            More crew means this goes down faster!
             <br />
-            <span style={fuelstyle}>Fuel</span>: You use 5u of fuel with
-            every movement. Don&apos;t let it run out.
+            <span style={fuelstyle}>Fuel</span>: You use 5u of fuel with every
+            movement. Don&apos;t let it run out.
             <br />
             <span style={partstyle}>Parts</span>: Used to repair breakdowns.
             Nobody likes wasting time on repairs!
@@ -304,36 +326,41 @@ const ORION_STATUS_INSTRUCTIONS = (props, context) => {
                 <Button
                   fluid
                   icon="hamburger"
-                  content={"Food Left: 80"}
-                  color="green" />
+                  content={'Food Left: 80'}
+                  color="green"
+                />
               </Stack.Item>
               <Stack.Item>
                 <Button
                   fluid
                   icon="gas-pump"
-                  content={"Fuel Left: 60"}
-                  color="olive" />
+                  content={'Fuel Left: 60'}
+                  color="olive"
+                />
               </Stack.Item>
               <Stack.Item>
                 <Button
                   fluid
                   icon="wrench"
-                  content={"Hull Parts: 1"}
-                  color="average" />
+                  content={'Hull Parts: 1'}
+                  color="average"
+                />
               </Stack.Item>
               <Stack.Item>
                 <Button
                   fluid
                   icon="server"
-                  content={"Electronics: 1"}
-                  color="blue" />
+                  content={'Electronics: 1'}
+                  color="blue"
+                />
               </Stack.Item>
               <Stack.Item mb={-0.3}>
                 <Button
                   fluid
                   icon="rocket"
-                  content={"Engine Parts: 1"}
-                  color="violet" />
+                  content={'Engine Parts: 1'}
+                  color="violet"
+                />
               </Stack.Item>
             </Stack>
           </Stack.Item>
@@ -361,20 +388,20 @@ const ORION_STATUS_NORMAL = (props, context) => {
   return (
     <Stack vertical fill>
       <Stack.Item grow>
-        <Section title={!!eventname && "Event" || "Location"} fill>
+        <Section title={(!!eventname && 'Event') || 'Location'} fill>
           <Stack fill textAlign="center" vertical>
-            <Stack.Item grow >
+            <Stack.Item grow>
               <Box bold fontSize="15px">
-                {!!eventname && eventname || locationInfo[turns-1].title}
+                {(!!eventname && eventname) || locationInfo[turns - 1].title}
               </Box>
               <br />
               <Box fontSize="15px">
-                {!!eventtext && eventtext || locationInfo[turns-1].blurb}
+                {(!!eventtext && eventtext) || locationInfo[turns - 1].blurb}
               </Box>
             </Stack.Item>
             <Stack.Item>
-              {!!buttons && (
-                buttons.map(button => (
+              {(!!buttons &&
+                buttons.map((button) => (
                   <Stack.Item key={button}>
                     <Button
                       mb={1}
@@ -382,17 +409,18 @@ const ORION_STATUS_NORMAL = (props, context) => {
                       width={16}
                       icon={variousButtonIcons[button]}
                       content={button}
-                      onClick={() => act(button)} />
+                      onClick={() => act(button)}
+                    />
                   </Stack.Item>
-                ))
-              ) || (
+                ))) || (
                 <Button
                   mb={1}
                   lineHeight={3}
                   width={16}
                   icon="arrow-right"
                   content="Continue"
-                  onClick={() => act('continue')} />
+                  onClick={() => act('continue')}
+                />
               )}
             </Stack.Item>
           </Stack>
@@ -407,15 +435,13 @@ const ORION_STATUS_NORMAL = (props, context) => {
 
 const ORION_STATUS_GAMEOVER = (props, context) => {
   const { data, act } = useBackend(context);
-  const {
-    reason,
-  } = data;
+  const { reason } = data;
   return (
     <Section fill>
       <Stack vertical textAlign="center" fill>
         <Stack.Item grow={1} />
         <Stack.Item color="red" fontSize="32px">
-          {"Game Over"}
+          {'Game Over'}
         </Stack.Item>
         <Stack.Item grow fontSize="15px" color="label">
           {reason}
@@ -426,7 +452,8 @@ const ORION_STATUS_GAMEOVER = (props, context) => {
             fluid
             icon="arrow-left"
             content="Main Menu"
-            onClick={() => act('back_to_menu')} />
+            onClick={() => act('back_to_menu')}
+          />
         </Stack.Item>
         <Stack.Item grow={3} />
       </Stack>
@@ -438,61 +465,58 @@ const marketButtonSpacing = 0.8;
 
 const ORION_STATUS_MARKET = (props, context) => {
   const { data, act } = useBackend(context);
-  const {
-    turns,
-    spaceport_raided,
-  } = data;
+  const { turns, spaceport_raided } = data;
   return (
     <Stack vertical fill>
       <Stack.Item grow>
         <Section
           title="Market"
           fill
-          buttons={(
+          buttons={
             <>
               <Button
                 content="Raid"
                 icon="skull"
                 color="black"
                 disabled={spaceport_raided}
-                onClick={() => act('raid_spaceport')} />
+                onClick={() => act('raid_spaceport')}
+              />
               <Button
                 content="Leave"
                 icon="arrow-right"
-                onClick={() => act('leave_spaceport')} />
+                onClick={() => act('leave_spaceport')}
+              />
             </>
-          )}>
+          }
+        >
           <Stack fill textAlign="center" vertical>
-            <Stack.Item grow >
+            <Stack.Item grow>
               <Box mb={-2} bold fontSize="15px">
-                {turns === 4 && "Tau Ceti Beta" || "Small Space Port"}
+                {(turns === 4 && 'Tau Ceti Beta') || 'Small Space Port'}
               </Box>
               <br />
               <Box fontSize="14px">
-                {spaceport_raided && (
+                {(spaceport_raided && (
                   <Box color="red">
-                    You are lucky to have escaped with your life. Attempting
-                    to dock again would be certain death.
+                    You are lucky to have escaped with your life. Attempting to
+                    dock again would be certain death.
                   </Box>
-                ) || (
+                )) ||
                   "Hello, Pioneer! We have supplies for you to help \
-                  you reach Orion. They aren't free, though!"
-                )}
+                  you reach Orion. They aren't free, though!"}
               </Box>
             </Stack.Item>
-            {spaceport_raided && (
+            {(spaceport_raided && (
               <>
                 <Stack.Item>
-                  The Port is under high security. Any possibility of
-                  purchasing goods has long since sailed.
+                  The Port is under high security. Any possibility of purchasing
+                  goods has long since sailed.
                 </Stack.Item>
                 <Stack.Item grow />
               </>
-            ) || (
+            )) || (
               <>
-                <Stack.Item>
-                  General Markets:
-                </Stack.Item>
+                <Stack.Item>General Markets:</Stack.Item>
                 <Stack.Item>
                   <Stack mb={-1} fill>
                     <Stack.Item grow basis={0}>
@@ -501,45 +525,55 @@ const ORION_STATUS_MARKET = (props, context) => {
                           <Button
                             fluid
                             icon="gas-pump"
-                            content={"5 Food -> 5 Fuel"}
+                            content={'5 Food -> 5 Fuel'}
                             color="green"
-                            onClick={() => act('trade', {
-                              what: 2,
-                            })} />
+                            onClick={() =>
+                              act('trade', {
+                                what: 2,
+                              })
+                            }
+                          />
                         </Stack.Item>
                         <Divider />
-                        <Stack.Item mt={0}>
-                          Port Hangar Bay:
-                        </Stack.Item>
+                        <Stack.Item mt={0}>Port Hangar Bay:</Stack.Item>
                         <Stack.Item mb={marketButtonSpacing}>
                           <Button
                             fluid
                             icon="wrench"
-                            content={"5 Fuel for Hull Plates"}
+                            content={'5 Fuel for Hull Plates'}
                             color="average"
-                            onClick={() => act('buyparts', {
-                              part: 2,
-                            })} />
+                            onClick={() =>
+                              act('buyparts', {
+                                part: 2,
+                              })
+                            }
+                          />
                         </Stack.Item>
                         <Stack.Item mb={marketButtonSpacing}>
                           <Button
                             fluid
                             icon="server"
-                            content={"5 Fuel for Electronics"}
+                            content={'5 Fuel for Electronics'}
                             color="blue"
-                            onClick={() => act('buyparts', {
-                              part: 3,
-                            })} />
+                            onClick={() =>
+                              act('buyparts', {
+                                part: 3,
+                              })
+                            }
+                          />
                         </Stack.Item>
                         <Stack.Item mb={marketButtonSpacing}>
                           <Button
                             fluid
                             icon="rocket"
-                            content={"5 Fuel for Engine Parts"}
+                            content={'5 Fuel for Engine Parts'}
                             color="violet"
-                            onClick={() => act('buyparts', {
-                              part: 1,
-                            })} />
+                            onClick={() =>
+                              act('buyparts', {
+                                part: 1,
+                              })
+                            }
+                          />
                         </Stack.Item>
                       </Stack>
                     </Stack.Item>
@@ -549,41 +583,47 @@ const ORION_STATUS_MARKET = (props, context) => {
                           <Button
                             fluid
                             icon="hamburger"
-                            content={"5 Fuel -> 5 Food"}
+                            content={'5 Fuel -> 5 Food'}
                             color="olive"
-                            onClick={() => act('trade', {
-                              what: 1,
-                            })} />
+                            onClick={() =>
+                              act('trade', {
+                                what: 1,
+                              })
+                            }
+                          />
                         </Stack.Item>
                         <Divider />
-                        <Stack.Item mt={0}>
-                          Port Bar:
-                        </Stack.Item>
+                        <Stack.Item mt={0}>Port Bar:</Stack.Item>
                         <Stack.Item mb={marketButtonSpacing}>
                           <Button
                             fluid
                             icon="user-plus"
-                            content={"10 Food, 10 Fuel for Crew"}
+                            content={'10 Food, 10 Fuel for Crew'}
                             color="white"
-                            onClick={() => act('buycrew')} />
+                            onClick={() => act('buycrew')}
+                          />
                         </Stack.Item>
                         <Stack.Item mb={marketButtonSpacing}>
                           <Button
                             fluid
                             icon="user-minus"
-                            content={"Crew for 7 Food, 7 Fuel"}
+                            content={'Crew for 7 Food, 7 Fuel'}
                             color="black"
-                            onClick={() => act('sellcrew')} />
+                            onClick={() => act('sellcrew')}
+                          />
                         </Stack.Item>
                         <Stack.Item mb={marketButtonSpacing}>
                           <Button
                             fluid
                             icon="meteor"
-                            content={"Odd Crew (Same Price)"}
+                            content={'Odd Crew (Same Price)'}
                             color="purple"
-                            onClick={() => act('buycrew', {
-                              odd: 1,
-                            })} />
+                            onClick={() =>
+                              act('buycrew', {
+                                odd: 1,
+                              })
+                            }
+                          />
                         </Stack.Item>
                       </Stack>
                     </Stack.Item>
@@ -591,7 +631,6 @@ const ORION_STATUS_MARKET = (props, context) => {
                 </Stack.Item>
               </>
             )}
-
           </Stack>
         </Section>
       </Stack.Item>
@@ -604,22 +643,13 @@ const ORION_STATUS_MARKET = (props, context) => {
 
 export const OrionGame = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    gamestatus,
-    gamename,
-    eventname,
-  } = data;
+  const { gamestatus, gamename, eventname } = data;
   const GameStatusComponent = STATUS2COMPONENT[gamestatus].component();
   const MarketRaid = STATUS2COMPONENT[2].component();
   return (
-    <Window
-      title={gamename}
-      width={420}
-      height={510}>
+    <Window title={gamename} width={420} height={510}>
       <Window.Content scrollable>
-        {eventname === "Space Port Raid" && (
-          <MarketRaid />
-        ) || (
+        {(eventname === 'Space Port Raid' && <MarketRaid />) || (
           <GameStatusComponent />
         )}
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/OutfitEditor.js b/tgui/packages/tgui/interfaces/OutfitEditor.js
index b44b8f7369a6..7be547f704d8 100644
--- a/tgui/packages/tgui/interfaces/OutfitEditor.js
+++ b/tgui/packages/tgui/interfaces/OutfitEditor.js
@@ -6,10 +6,7 @@ export const OutfitEditor = (props, context) => {
   const { act, data } = useBackend(context);
   const { outfit, saveable, dummy64 } = data;
   return (
-    <Window
-      width={380}
-      height={600}
-      theme="admin">
+    <Window width={380} height={600} theme="admin">
       <Window.Content>
         <Box
           as="img"
@@ -21,23 +18,27 @@ export const OutfitEditor = (props, context) => {
           src={`data:image/jpeg;base64,${dummy64}`}
           style={{
             '-ms-interpolation-mode': 'nearest-neighbor',
-          }} />
+          }}
+        />
         <Section
           fill
           title={
             <Stack>
-              <Stack.Item grow={1}
+              <Stack.Item
+                grow={1}
                 style={{
-                  'overflow': 'hidden',
+                  overflow: 'hidden',
                   'white-space': 'nowrap',
                   'text-overflow': 'ellipsis',
-                }}>
+                }}
+              >
                 <Button
                   ml={0.5}
                   color="transparent"
                   icon="pencil-alt"
                   title="Rename this outfit"
-                  onClick={() => act("rename", {})} />
+                  onClick={() => act('rename', {})}
+                />
                 {outfit.name}
               </Stack.Item>
               <Stack.Item align="end" shrink={0}>
@@ -45,23 +46,29 @@ export const OutfitEditor = (props, context) => {
                   color="transparent"
                   icon="info"
                   tooltip="Ctrl-click a button to select *any* item instead of what will probably fit in that slot."
-                  tooltipPosition="bottom-start" />
+                  tooltipPosition="bottom-start"
+                />
                 <Button
                   icon="code"
                   tooltip="Edit this outfit on a VV window"
                   tooltipPosition="bottom-start"
-                  onClick={() => act("vv")} />
+                  onClick={() => act('vv')}
+                />
                 <Button
-                  color={!saveable && "bad"}
-                  icon={saveable ? "save" : "trash-alt"}
-                  tooltip={saveable
-                    ? "Save this outfit to the custom outfit list"
-                    : "Remove this outfit from the custom outfit list"}
+                  color={!saveable && 'bad'}
+                  icon={saveable ? 'save' : 'trash-alt'}
+                  tooltip={
+                    saveable
+                      ? 'Save this outfit to the custom outfit list'
+                      : 'Remove this outfit from the custom outfit list'
+                  }
                   tooltipPosition="bottom-start"
-                  onClick={() => act(saveable ? "save" : "delete")} />
+                  onClick={() => act(saveable ? 'save' : 'delete')}
+                />
               </Stack.Item>
             </Stack>
-          }>
+          }
+        >
           <Box textAlign="center">
             <Stack mb={2}>
               <OutfitSlot name="Headgear" icon="hard-hat" slot="head" />
@@ -78,7 +85,11 @@ export const OutfitEditor = (props, context) => {
               <OutfitSlot name="Gloves" icon="mitten" slot="gloves" />
             </Stack>
             <Stack mb={2}>
-              <OutfitSlot name="Suit Storage" icon="briefcase-medical" slot="suit_store" />
+              <OutfitSlot
+                name="Suit Storage"
+                icon="briefcase-medical"
+                slot="suit_store"
+              />
               <OutfitSlot name="Back" icon="shopping-bag" slot="back" />
               <OutfitSlot name="ID" icon="id-card-o" slot="id" />
             </Stack>
@@ -89,8 +100,18 @@ export const OutfitEditor = (props, context) => {
             </Stack>
             <Stack mb={2}>
               <OutfitSlot name="Shoes" icon="socks" slot="shoes" />
-              <OutfitSlot name="Left Pocket" icon="envelope-open-o" iconRot={180} slot="l_pocket" />
-              <OutfitSlot name="Right Pocket" icon="envelope-open-o" iconRot={180} slot="r_pocket" />
+              <OutfitSlot
+                name="Left Pocket"
+                icon="envelope-open-o"
+                iconRot={180}
+                slot="l_pocket"
+              />
+              <OutfitSlot
+                name="Right Pocket"
+                icon="envelope-open-o"
+                iconRot={180}
+                slot="r_pocket"
+              />
             </Stack>
           </Box>
         </Section>
@@ -106,10 +127,13 @@ const OutfitSlot = (props, context) => {
   const currItem = outfit[slot];
   return (
     <Stack.Item grow={1} basis={0}>
-      <Button fluid height={2}
+      <Button
+        fluid
+        height={2}
         bold
         // todo: intuitive way to clear items
-        onClick={e => act(e.ctrlKey ? "ctrlClick" : "click", { slot })} >
+        onClick={(e) => act(e.ctrlKey ? 'ctrlClick' : 'click', { slot })}
+      >
         <Icon name={icon} rotation={iconRot} />
         {name}
       </Button>
@@ -122,25 +146,28 @@ const OutfitSlot = (props, context) => {
               title={currItem?.desc}
               style={{
                 '-ms-interpolation-mode': 'nearest-neighbor',
-              }} />
+              }}
+            />
             <Icon
               position="absolute"
               name="times"
               color="label"
               style={{ cursor: 'pointer' }}
-              onClick={() => act("clear", { slot })} />
+              onClick={() => act('clear', { slot })}
+            />
           </>
         )}
       </Box>
       <Box
         color="label"
         style={{
-          'overflow': 'hidden',
+          overflow: 'hidden',
           'white-space': 'nowrap',
           'text-overflow': 'ellipsis',
         }}
-        title={currItem?.path}>
-        {currItem?.name || "Empty"}
+        title={currItem?.path}
+      >
+        {currItem?.name || 'Empty'}
       </Box>
     </Stack.Item>
   );
diff --git a/tgui/packages/tgui/interfaces/OutfitManager.js b/tgui/packages/tgui/interfaces/OutfitManager.js
index ed7b835897f1..d3a402b04c13 100644
--- a/tgui/packages/tgui/interfaces/OutfitManager.js
+++ b/tgui/packages/tgui/interfaces/OutfitManager.js
@@ -6,11 +6,7 @@ export const OutfitManager = (props, context) => {
   const { act, data } = useBackend(context);
   const { outfits } = data;
   return (
-    <Window
-      title="Outfit Manager"
-      width={300}
-      height={300}
-      theme="admin">
+    <Window title="Outfit Manager" width={300} height={300} theme="admin">
       <Window.Content>
         <Section
           fill
@@ -22,45 +18,54 @@ export const OutfitManager = (props, context) => {
                 icon="file-upload"
                 tooltip="Load an outfit from a file"
                 tooltipPosition="left"
-                onClick={() => act("load")} />
+                onClick={() => act('load')}
+              />
               <Button
                 icon="copy"
                 tooltip="Copy an already existing outfit"
                 tooltipPosition="left"
-                onClick={() => act("copy")} />
+                onClick={() => act('copy')}
+              />
               <Button
                 icon="plus"
                 tooltip="Create a new outfit"
                 tooltipPosition="left"
-                onClick={() => act("new")} />
+                onClick={() => act('new')}
+              />
             </>
-          }>
+          }
+        >
           <Stack vertical>
-            {outfits?.map(outfit => (
+            {outfits?.map((outfit) => (
               <Stack.Item key={outfit.ref}>
                 <Stack>
-                  <Stack.Item grow={1} shrink={1}
+                  <Stack.Item
+                    grow={1}
+                    shrink={1}
                     style={{
-                      'overflow': 'hidden',
+                      overflow: 'hidden',
                       'white-space': 'nowrap',
                       'text-overflow': 'ellipsis',
-                    }}>
+                    }}
+                  >
                     <Button
                       fluid
                       style={{
-                        'overflow': 'hidden',
+                        overflow: 'hidden',
                         'white-space': 'nowrap',
                         'text-overflow': 'ellipsis',
                       }}
                       content={outfit.name}
-                      onClick={() => act("edit", { outfit: outfit.ref })} />
+                      onClick={() => act('edit', { outfit: outfit.ref })}
+                    />
                   </Stack.Item>
                   <Stack.Item ml={0.5}>
                     <Button
                       icon="save"
                       tooltip="Save this outfit to a file"
                       tooltipPosition="left"
-                      onClick={() => act("save", { outfit: outfit.ref })} />
+                      onClick={() => act('save', { outfit: outfit.ref })}
+                    />
                   </Stack.Item>
                   <Stack.Item ml={0.5}>
                     <Button
@@ -68,7 +73,8 @@ export const OutfitManager = (props, context) => {
                       icon="trash-alt"
                       tooltip="Delete this outfit"
                       tooltipPosition="left"
-                      onClick={() => act("delete", { outfit: outfit.ref })} />
+                      onClick={() => act('delete', { outfit: outfit.ref })}
+                    />
                   </Stack.Item>
                 </Stack>
               </Stack.Item>
@@ -79,4 +85,3 @@ export const OutfitManager = (props, context) => {
     </Window>
   );
 };
-
diff --git a/tgui/packages/tgui/interfaces/PaiCard.tsx b/tgui/packages/tgui/interfaces/PaiCard.tsx
index 2ddaa648c991..9c789930f930 100644
--- a/tgui/packages/tgui/interfaces/PaiCard.tsx
+++ b/tgui/packages/tgui/interfaces/PaiCard.tsx
@@ -1,6 +1,13 @@
 import { BooleanLike } from '../../common/react';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, LabeledList, NoticeBox, Section, Stack } from '../components';
+import {
+  Box,
+  Button,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Stack,
+} from '../components';
 import { Window } from '../layouts';
 
 type PaiCardData = {
@@ -54,21 +61,24 @@ const PaiDownload = (_, context) => {
             <Button
               icon="info"
               onClick={onClick}
-              tooltip="Toggles between IC and OOC information.">
+              tooltip="Toggles between IC and OOC information."
+            >
               {tabInChar ? 'IC' : 'OOC'}
             </Button>
           )}
           <Button
             icon="bell"
             onClick={() => act('request')}
-            tooltip="Request candidates.">
+            tooltip="Request candidates."
+          >
             Request
           </Button>
         </>
       }
       fill
       scrollable
-      title="pAI Candidates">
+      title="pAI Candidates"
+    >
       {!candidates.length ? (
         <NoticeBox>None found!</NoticeBox>
       ) : (
@@ -102,24 +112,27 @@ const CandidateDisplay = (props, context) => {
   return (
     <Box
       style={{
-        'background': '#111111',
-        'border': '1px solid #4972a1',
+        background: '#111111',
+        border: '1px solid #4972a1',
         'border-radius': '5px',
-        'padding': '1rem',
-      }}>
+        padding: '1rem',
+      }}
+    >
       <Section
         buttons={
           <Button
             icon="download"
             onClick={() => act('download', { key })}
-            tooltip="Accepts this pAI candidate.">
+            tooltip="Accepts this pAI candidate."
+          >
             Download
           </Button>
         }
         fill
         height={12}
         scrollable
-        title={'Candidate ' + index}>
+        title={'Candidate ' + index}
+      >
         <Box color="green" fontSize="16px">
           Name: {name || 'Randomized Name'}
         </Box>
@@ -153,7 +166,8 @@ const PaiOptions = (_, context) => {
           <Button
             icon={can_holo ? 'toggle-on' : 'toggle-off'}
             onClick={() => act('toggle_holo')}
-            selected={can_holo}>
+            selected={can_holo}
+          >
             Toggle
           </Button>
         </LabeledList.Item>
@@ -161,7 +175,8 @@ const PaiOptions = (_, context) => {
           <Button
             icon={transmit ? 'toggle-on' : 'toggle-off'}
             onClick={() => act('toggle_radio', { option: 'transmit' })}
-            selected={transmit}>
+            selected={transmit}
+          >
             Toggle
           </Button>
         </LabeledList.Item>
@@ -169,7 +184,8 @@ const PaiOptions = (_, context) => {
           <Button
             icon={receive ? 'toggle-on' : 'toggle-off'}
             onClick={() => act('toggle_radio', { option: 'receive' })}
-            selected={receive}>
+            selected={receive}
+          >
             Toggle
           </Button>
         </LabeledList.Item>
diff --git a/tgui/packages/tgui/interfaces/PaiInterface.tsx b/tgui/packages/tgui/interfaces/PaiInterface.tsx
index 19641ab81d6c..1664956bfc25 100644
--- a/tgui/packages/tgui/interfaces/PaiInterface.tsx
+++ b/tgui/packages/tgui/interfaces/PaiInterface.tsx
@@ -1,5 +1,17 @@
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, LabeledList, Icon, NoticeBox, ProgressBar, Section, Stack, Table, Tabs, Tooltip } from '../components';
+import {
+  Box,
+  Button,
+  LabeledList,
+  Icon,
+  NoticeBox,
+  ProgressBar,
+  Section,
+  Stack,
+  Table,
+  Tabs,
+  Tooltip,
+} from '../components';
 import { Window } from '../layouts';
 
 type PaiInterfaceData = {
@@ -82,8 +94,7 @@ const SOFTWARE_DESC = {
   'security HUD': 'Allows you to view security records using an overlay HUD.',
   'loudness booster':
     'Synthesizes instruments, plays sounds and imported songs.',
-  'newscaster':
-    'A tool that allows you to broadcast news to other crew members.',
+  newscaster: 'A tool that allows you to broadcast news to other crew members.',
   'door jack': 'A tool that allows you to open doors.',
   'encryption keys':
     'A tool that allows you to decrypt and speak on other radio frequencies.',
@@ -92,15 +103,15 @@ const SOFTWARE_DESC = {
 };
 
 const ICON_MAP = {
-  'angry': 'angry',
-  'cat': 'cat',
+  angry: 'angry',
+  cat: 'cat',
   'extremely-happy': 'grin-beam',
-  'laugh': 'grin-squint',
-  'happy': 'smile',
-  'off': 'power-off',
-  'sad': 'frown',
-  'sunglasses': 'sun',
-  'what': 'question',
+  laugh: 'grin-squint',
+  happy: 'smile',
+  off: 'power-off',
+  sad: 'frown',
+  sunglasses: 'sun',
+  what: 'question',
 };
 
 export const PaiInterface = (_, context) => {
@@ -137,25 +148,29 @@ const TabDisplay = (props) => {
       <Tabs.Tab
         icon="list"
         onClick={() => onTabClick(Tab.System)}
-        selected={tab === Tab.System}>
+        selected={tab === Tab.System}
+      >
         System
       </Tabs.Tab>
       <Tabs.Tab
         icon="list"
         onClick={() => onTabClick(Tab.Directive)}
-        selected={tab === Tab.Directive}>
+        selected={tab === Tab.Directive}
+      >
         Directives
       </Tabs.Tab>
       <Tabs.Tab
         icon="list"
         onClick={() => onTabClick(Tab.Installed)}
-        selected={tab === Tab.Installed}>
+        selected={tab === Tab.Installed}
+      >
         Installed
       </Tabs.Tab>
       <Tabs.Tab
         icon="list"
         onClick={() => onTabClick(Tab.Available)}
-        selected={tab === Tab.Available}>
+        selected={tab === Tab.Available}
+      >
         Download
       </Tabs.Tab>
     </Tabs>
@@ -233,20 +248,23 @@ const SystemInfo = (_, context) => {
             disabled={!master.dna}
             icon="dna"
             onClick={() => act('check_dna')}
-            tooltip="Verifies your master's DNA. Must be carried in hand.">
+            tooltip="Verifies your master's DNA. Must be carried in hand."
+          >
             Verify
           </Button>
           <Button
             icon={ICON_MAP[image] || 'meh-blank'}
             onClick={() => act('change_image')}
-            tooltip="Change your display image.">
+            tooltip="Change your display image."
+          >
             Display
           </Button>
         </>
       }
       fill
       scrollable
-      title="System Info">
+      title="System Info"
+    >
       <LabeledList>
         <LabeledList.Item label="Master">
           {master.name || 'None.'}
@@ -302,7 +320,7 @@ const InstalledDisplay = (_, context) => {
   const [installSelected, setInstallSelected] = useLocalState(
     context,
     'software',
-    ''
+    '',
   );
   const onInstallHandler = (software: string) => {
     setInstallSelected(software);
@@ -335,7 +353,7 @@ const InstalledSoftware = (props, context) => {
           return (
             <Button key={software} onClick={() => onInstallClick(software)}>
               {software.replace(/(^\w{1})|(\s+\w{1})/g, (letter) =>
-                letter.toUpperCase()
+                letter.toUpperCase(),
               )}
             </Button>
           );
@@ -363,8 +381,10 @@ const InstalledInfo = (props) => {
           !software
             ? 'Select a Program'
             : software.replace(/(^\w{1})|(\s+\w{1})/g, (letter) =>
-              letter.toUpperCase())
-        }>
+                letter.toUpperCase(),
+              )
+        }
+      >
         {software && (
           <Stack fill vertical>
             <Stack.Item>{SOFTWARE_DESC[software] || ''}</Stack.Item>
@@ -394,7 +414,8 @@ const RecordsDisplay = (props, context) => {
             <Button
               disabled={refresh_spam}
               onClick={() => act('refresh', { list: record_type })}
-              tooltip="Refresh">
+              tooltip="Refresh"
+            >
               <Icon mr={-0.7} name="sync" spin={refresh_spam} />
             </Button>
           </Stack.Item>
@@ -404,7 +425,8 @@ const RecordsDisplay = (props, context) => {
         </Stack>
       }
       fill
-      scrollable>
+      scrollable
+    >
       <Table>
         {convertedRecords?.map((record) => {
           return <RecordRow key={record.ref} record={record} />;
@@ -462,19 +484,22 @@ const SoftwareButtons = (props, context) => {
           <Button
             icon="power-off"
             onClick={() => act('pda', { pda: 'power' })}
-            selected={pda.power}>
+            selected={pda.power}
+          >
             Power
           </Button>
           <Button
             icon="volume-mute"
             onClick={() => act('pda', { pda: 'silent' })}
-            selected={pda.silent}>
+            selected={pda.silent}
+          >
             Silent
           </Button>
           <Button
             disabled={!pda.power}
             icon="envelope"
-            onClick={() => act('pda', { pda: 'message' })}>
+            onClick={() => act('pda', { pda: 'message' })}
+          >
             Message
           </Button>
         </>
@@ -485,20 +510,23 @@ const SoftwareButtons = (props, context) => {
           <Button
             disabled={door_jack}
             icon="plug"
-            onClick={() => act('door_jack', { jack: 'cable' })}>
+            onClick={() => act('door_jack', { jack: 'cable' })}
+          >
             Extend Cable
           </Button>
           <Button
             color="bad"
             disabled={!door_jack}
             icon="door-open"
-            onClick={() => act('door_jack', { jack: 'jack' })}>
+            onClick={() => act('door_jack', { jack: 'jack' })}
+          >
             Hack Door
           </Button>
           <Button
             disabled={!door_jack}
             icon="unlink"
-            onClick={() => act('door_jack', { jack: 'cancel' })}>
+            onClick={() => act('door_jack', { jack: 'cancel' })}
+          >
             Cancel
           </Button>
         </>
@@ -508,17 +536,20 @@ const SoftwareButtons = (props, context) => {
         <>
           <Button
             icon="search"
-            onClick={() => act('host_scan', { scan: 'scan' })}>
+            onClick={() => act('host_scan', { scan: 'scan' })}
+          >
             Host Scan
           </Button>
           <Button
             icon="cog"
-            onClick={() => act('host_scan', { scan: 'wounds' })}>
+            onClick={() => act('host_scan', { scan: 'wounds' })}
+          >
             Toggle Wounds
           </Button>
           <Button
             icon="cog"
-            onClick={() => act('host_scan', { scan: 'limbs' })}>
+            onClick={() => act('host_scan', { scan: 'limbs' })}
+          >
             Toggle Limbs
           </Button>
         </>
@@ -529,7 +560,8 @@ const SoftwareButtons = (props, context) => {
         <Button
           icon="download"
           onClick={() => act(software.toLowerCase().replace(/ /g, '_'))}
-          disabled={!!languages}>
+          disabled={!!languages}
+        >
           {!languages ? 'Install' : 'Installed'}
         </Button>
       );
@@ -538,7 +570,8 @@ const SoftwareButtons = (props, context) => {
         <Button
           icon="power-off"
           onClick={() => act(software.toLowerCase().replace(/ /g, '_'))}
-          tooltip="Attempts to toggle the module's power.">
+          tooltip="Attempts to toggle the module's power."
+        >
           Toggle
         </Button>
       );
@@ -551,7 +584,8 @@ const AvailableDisplay = () => {
       buttons={<AvailableMemory />}
       fill
       scrollable
-      title="Available Software">
+      title="Available Software"
+    >
       <AvailableSoftware />
     </Section>
   );
@@ -634,7 +668,8 @@ const AvailableRow = (props, context) => {
           mb={0.5}
           disabled={ram < software.value || purchased}
           onClick={() => act('buy', { selection: software.name })}
-          tooltip={SOFTWARE_DESC[software.name] || ''}>
+          tooltip={SOFTWARE_DESC[software.name] || ''}
+        >
           <Icon ml={1} mr={-2} name="download" />
         </Button>
       </Table.Cell>
diff --git a/tgui/packages/tgui/interfaces/PaiSubmit.tsx b/tgui/packages/tgui/interfaces/PaiSubmit.tsx
index 01762b52f653..833a2c4b7641 100644
--- a/tgui/packages/tgui/interfaces/PaiSubmit.tsx
+++ b/tgui/packages/tgui/interfaces/PaiSubmit.tsx
@@ -123,14 +123,16 @@ const ButtonsDisplay = (props, context) => {
         <Stack.Item>
           <Button
             onClick={() => act('save', { candidate: input })}
-            tooltip="Saves your candidate data locally.">
+            tooltip="Saves your candidate data locally."
+          >
             SAVE
           </Button>
         </Stack.Item>
         <Stack.Item>
           <Button
             onClick={() => act('load')}
-            tooltip="Loads saved candidate data, if any.">
+            tooltip="Loads saved candidate data, if any."
+          >
             LOAD
           </Button>
         </Stack.Item>
@@ -139,7 +141,9 @@ const ButtonsDisplay = (props, context) => {
             onClick={() =>
               act('submit', {
                 candidate: input,
-              })}>
+              })
+            }
+          >
             SUBMIT
           </Button>
         </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/PaintingAdminPanel.tsx b/tgui/packages/tgui/interfaces/PaintingAdminPanel.tsx
index d2d6e42ef3de..25d3b99d0ac9 100644
--- a/tgui/packages/tgui/interfaces/PaintingAdminPanel.tsx
+++ b/tgui/packages/tgui/interfaces/PaintingAdminPanel.tsx
@@ -9,37 +9,39 @@ type PaintingAdminPanelData = {
 };
 
 type PaintingData = {
-  md5: string,
-  title: string,
-  creator_ckey: string,
-  creator_name: string | null,
-  creation_date: Date | null,
-  creation_round_id: number | null,
-  patron_ckey: string | null,
-  patron_name: string | null,
-  credit_value: number,
-  width: number,
-  height: number,
-  ref: string,
-  tags: string[] | null,
-  medium: string | null
-}
+  md5: string;
+  title: string;
+  creator_ckey: string;
+  creator_name: string | null;
+  creation_date: Date | null;
+  creation_round_id: number | null;
+  patron_ckey: string | null;
+  patron_name: string | null;
+  credit_value: number;
+  width: number;
+  height: number;
+  ref: string;
+  tags: string[] | null;
+  medium: string | null;
+};
 
 export const PaintingAdminPanel = (props, context) => {
   const { act, data } = useBackend<PaintingAdminPanelData>(context);
-  const [chosenPaintingRef, setChosenPaintingRef] = useLocalState<string|null>(context, 'chosenPainting', null);
-  const {
-    paintings,
-  } = data;
-  const chosenPainting = paintings.find(p => p.ref === chosenPaintingRef);
+  const [chosenPaintingRef, setChosenPaintingRef] = useLocalState<
+    string | null
+  >(context, 'chosenPainting', null);
+  const { paintings } = data;
+  const chosenPainting = paintings.find((p) => p.ref === chosenPaintingRef);
   return (
-    <Window
-      title="Painting Admin Panel"
-      width={800}
-      height={600}>
+    <Window title="Painting Admin Panel" width={800} height={600}>
       <Window.Content scrollable>
         {chosenPainting && (
-          <Section title="Painting Information" buttons={<Button onClick={() => setChosenPaintingRef(null)}>Close</Button>}>
+          <Section
+            title="Painting Information"
+            buttons={
+              <Button onClick={() => setChosenPaintingRef(null)}>Close</Button>
+            }
+          >
             <img
               src={resolveAsset(`paintings_${chosenPainting.md5}`)}
               height="96px"
@@ -47,44 +49,95 @@ export const PaintingAdminPanel = (props, context) => {
               style={{
                 'vertical-align': 'middle',
                 '-ms-interpolation-mode': 'nearest-neighbor',
-              }} />
+              }}
+            />
             <LabeledList>
               <LabeledList.Item label="md5" content={chosenPainting.md5} />
               <LabeledList.Item label="title">
-                <Box inline style={{ "word-break": "break-all" }}>{decodeHtmlEntities(chosenPainting.title)}</Box>
-                <Button onClick={() => act("rename", { ref: chosenPainting.ref })} icon="edit" />
+                <Box inline style={{ 'word-break': 'break-all' }}>
+                  {decodeHtmlEntities(chosenPainting.title)}
+                </Box>
+                <Button
+                  onClick={() => act('rename', { ref: chosenPainting.ref })}
+                  icon="edit"
+                />
               </LabeledList.Item>
-              <LabeledList.Item label="creator ckey" content={chosenPainting.creator_ckey} />
+              <LabeledList.Item
+                label="creator ckey"
+                content={chosenPainting.creator_ckey}
+              />
               <LabeledList.Item label="creator name">
                 <Box inline>{chosenPainting.creator_name}</Box>
-                <Button onClick={() => act("rename_author", { ref: chosenPainting.ref })} icon="edit" />
+                <Button
+                  onClick={() =>
+                    act('rename_author', { ref: chosenPainting.ref })
+                  }
+                  icon="edit"
+                />
               </LabeledList.Item>
-              <LabeledList.Item label="creation date" content={chosenPainting.creation_date} />
-              <LabeledList.Item label="creation round id" content={chosenPainting.creation_round_id} />
-              <LabeledList.Item label="medium" content={chosenPainting.medium} />
+              <LabeledList.Item
+                label="creation date"
+                content={chosenPainting.creation_date}
+              />
+              <LabeledList.Item
+                label="creation round id"
+                content={chosenPainting.creation_round_id}
+              />
+              <LabeledList.Item
+                label="medium"
+                content={chosenPainting.medium}
+              />
               <LabeledList.Item label="tags">
                 {chosenPainting.tags?.map((tag) => (
                   <Button
                     key={tag}
                     color="red"
                     icon="minus-circle"
-                    iconPosition="right" content={tag}
-                    onClick={() => act("remove_tag", { tag, ref: chosenPainting.ref })} />
+                    iconPosition="right"
+                    content={tag}
+                    onClick={() =>
+                      act('remove_tag', { tag, ref: chosenPainting.ref })
+                    }
+                  />
                 ))}
                 <Button
                   color="green"
                   icon="plus-circle"
-                  onClick={() => act("add_tag", { ref: chosenPainting.ref })} />
+                  onClick={() => act('add_tag', { ref: chosenPainting.ref })}
+                />
               </LabeledList.Item>
-              <LabeledList.Item label="patron ckey" content={chosenPainting.patron_ckey} />
-              <LabeledList.Item label="patron name" content={chosenPainting.patron_name} />
-              <LabeledList.Item label="credit value" content={chosenPainting.credit_value} />
+              <LabeledList.Item
+                label="patron ckey"
+                content={chosenPainting.patron_ckey}
+              />
+              <LabeledList.Item
+                label="patron name"
+                content={chosenPainting.patron_name}
+              />
+              <LabeledList.Item
+                label="credit value"
+                content={chosenPainting.credit_value}
+              />
               <LabeledList.Item label="width" content={chosenPainting.width} />
-              <LabeledList.Item label="height" content={chosenPainting.height} />
+              <LabeledList.Item
+                label="height"
+                content={chosenPainting.height}
+              />
             </LabeledList>
             <Section title="Actions">
-              <Button.Confirm onClick={() => { setChosenPaintingRef(null); act("delete", { ref: chosenPainting.ref }); }}>Delete</Button.Confirm>
-              <Button onClick={() => act("dumpit", { ref: chosenPainting.ref })}>Reset Patronage</Button>
+              <Button.Confirm
+                onClick={() => {
+                  setChosenPaintingRef(null);
+                  act('delete', { ref: chosenPainting.ref });
+                }}
+              >
+                Delete
+              </Button.Confirm>
+              <Button
+                onClick={() => act('dumpit', { ref: chosenPainting.ref })}
+              >
+                Reset Patronage
+              </Button>
             </Section>
           </Section>
         )}
@@ -96,23 +149,22 @@ export const PaintingAdminPanel = (props, context) => {
               <Table.Cell color="label">Preview</Table.Cell>
               <Table.Cell color="label">Actions</Table.Cell>
             </Table.Row>
-            {paintings.map(painting => (
-              <Table.Row
-                key={painting.ref}
-                className="candystripe">
-                <Table.Cell
-                  style={{ "word-break": "break-all" }}>
+            {paintings.map((painting) => (
+              <Table.Row key={painting.ref} className="candystripe">
+                <Table.Cell style={{ 'word-break': 'break-all' }}>
                   {decodeHtmlEntities(painting.title)}
                 </Table.Cell>
                 <Table.Cell>{painting.creator_ckey}</Table.Cell>
-                <Table.Cell><img
-                  src={resolveAsset(`paintings_${painting.md5}`)}
-                  height="36px"
-                  width="36px"
-                  style={{
-                    'vertical-align': 'middle',
-                    '-ms-interpolation-mode': 'nearest-neighbor',
-                  }} />
+                <Table.Cell>
+                  <img
+                    src={resolveAsset(`paintings_${painting.md5}`)}
+                    height="36px"
+                    width="36px"
+                    style={{
+                      'vertical-align': 'middle',
+                      '-ms-interpolation-mode': 'nearest-neighbor',
+                    }}
+                  />
                 </Table.Cell>
                 <Table.Cell>
                   <Button onClick={() => setChosenPaintingRef(painting.ref)}>
@@ -127,5 +179,3 @@ export const PaintingAdminPanel = (props, context) => {
     </Window>
   );
 };
-
-
diff --git a/tgui/packages/tgui/interfaces/PaintingMachine.js b/tgui/packages/tgui/interfaces/PaintingMachine.js
index 7292b795ed57..e2bbd84cbf31 100644
--- a/tgui/packages/tgui/interfaces/PaintingMachine.js
+++ b/tgui/packages/tgui/interfaces/PaintingMachine.js
@@ -5,29 +5,22 @@ import { Button, Dropdown, Section, Stack } from '../components';
 export const PaintingMachine = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const {
-    pdaTypes,
-    cardTrims,
-    hasPDA,
-    pdaName,
-    hasID,
-    idName,
-  } = data;
-
-  const [
-    selectedPDA,
-  ] = useSharedState(context, "pdaSelection", pdaTypes[Object.keys(pdaTypes)[0]]);
-
-  const [
-    selectedTrim,
-  ] = useSharedState(context, "trimSelection", cardTrims[Object.keys(cardTrims)[0]]);
+  const { pdaTypes, cardTrims, hasPDA, pdaName, hasID, idName } = data;
 
+  const [selectedPDA] = useSharedState(
+    context,
+    'pdaSelection',
+    pdaTypes[Object.keys(pdaTypes)[0]],
+  );
 
+  const [selectedTrim] = useSharedState(
+    context,
+    'trimSelection',
+    cardTrims[Object.keys(cardTrims)[0]],
+  );
 
   return (
-    <Window
-      width={500}
-      height={620}>
+    <Window width={500} height={620}>
       <Window.Content scrollable>
         <Section
           title="PDA Painter"
@@ -36,20 +29,23 @@ export const PaintingMachine = (props, context) => {
               disabled={!hasPDA}
               content="Paint PDA"
               confirmContent="Confirm?"
-              onClick={() => act("trim_pda", {
-                selection: selectedPDA,
-              })} />
-          }>
+              onClick={() =>
+                act('trim_pda', {
+                  selection: selectedPDA,
+                })
+              }
+            />
+          }
+        >
           <Stack vertical>
             <Stack.Item height="100%">
               <EjectButton
-                name={pdaName || "-----"}
-                onClickEject={() => act("eject_pda")} />
+                name={pdaName || '-----'}
+                onClickEject={() => act('eject_pda')}
+              />
             </Stack.Item>
             <Stack.Item height="100%">
-              <PainterDropdown
-                stateKey="pdaSelection"
-                options={pdaTypes} />
+              <PainterDropdown stateKey="pdaSelection" options={pdaTypes} />
             </Stack.Item>
           </Stack>
         </Section>
@@ -61,31 +57,38 @@ export const PaintingMachine = (props, context) => {
                 disabled={!hasID}
                 content="Reset ID Account"
                 confirmContent="Confirm?"
-                onClick={() => act("reset_card")} />
+                onClick={() => act('reset_card')}
+              />
               <Button.Confirm
                 disabled={!hasID}
                 content="Imprint ID Trim"
                 confirmContent="Confirm?"
-                onClick={sel => act("trim_card", {
-                  selection: selectedTrim,
-                })} />
+                onClick={(sel) =>
+                  act('trim_card', {
+                    selection: selectedTrim,
+                  })
+                }
+              />
               <Button
                 icon="question-circle"
-                tooltip={"WARNING: This is destructive"
-                + " and will wipe ALL access on the card."}
-                tooltipPosition="left" />
+                tooltip={
+                  'WARNING: This is destructive' +
+                  ' and will wipe ALL access on the card.'
+                }
+                tooltipPosition="left"
+              />
             </>
-          }>
+          }
+        >
           <Stack vertical>
             <Stack.Item height="100%">
               <EjectButton
-                name={idName || "-----"}
-                onClickEject={() => act("eject_card")} />
+                name={idName || '-----'}
+                onClickEject={() => act('eject_card')}
+              />
             </Stack.Item>
             <Stack.Item height="100%">
-              <PainterDropdown
-                stateKey="trimSelection"
-                options={cardTrims} />
+              <PainterDropdown stateKey="trimSelection" options={cardTrims} />
             </Stack.Item>
           </Stack>
         </Section>
@@ -95,10 +98,7 @@ export const PaintingMachine = (props, context) => {
 };
 
 export const EjectButton = (props, context) => {
-  const {
-    name,
-    onClickEject,
-  } = props;
+  const { name, onClickEject } = props;
 
   return (
     <Button
@@ -106,30 +106,28 @@ export const EjectButton = (props, context) => {
       ellipsis
       icon="eject"
       content={name}
-      onClick={() => onClickEject()} />
+      onClick={() => onClickEject()}
+    />
   );
 };
 
 export const PainterDropdown = (props, context) => {
-  const {
-    stateKey,
-    options,
-  } = props;
+  const { stateKey, options } = props;
 
-  const [
-    selectedOption,
-    setSelectedOption,
-  ] = useSharedState(context, stateKey, options[Object.keys(options)[0]]);
+  const [selectedOption, setSelectedOption] = useSharedState(
+    context,
+    stateKey,
+    options[Object.keys(options)[0]],
+  );
 
   return (
     <Dropdown
       width="100%"
       selected={selectedOption}
-      options={
-        Object.keys(options).map(path => {
-          return options[path];
-        })
-      }
-      onSelected={sel => setSelectedOption(sel)} />
+      options={Object.keys(options).map((path) => {
+        return options[path];
+      })}
+      onSelected={(sel) => setSelectedOption(sel)}
+    />
   );
 };
diff --git a/tgui/packages/tgui/interfaces/Pandemic.tsx b/tgui/packages/tgui/interfaces/Pandemic.tsx
index 897988efea99..7c4690f950a4 100644
--- a/tgui/packages/tgui/interfaces/Pandemic.tsx
+++ b/tgui/packages/tgui/interfaces/Pandemic.tsx
@@ -1,6 +1,18 @@
 import { BooleanLike } from '../../common/react';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Collapsible, Input, LabeledList, NoticeBox, ProgressBar, Section, Stack, Tabs, Tooltip } from '../components';
+import {
+  Box,
+  Button,
+  Collapsible,
+  Input,
+  LabeledList,
+  NoticeBox,
+  ProgressBar,
+  Section,
+  Stack,
+  Tabs,
+  Tooltip,
+} from '../components';
 import { Window } from '../layouts';
 
 type PandemicContext = {
@@ -158,7 +170,8 @@ const BeakerDisplay = (_, context) => {
             onClick={() => act('eject_beaker')}
           />
         </>
-      }>
+      }
+    >
       {content}
     </Section>
   );
@@ -193,9 +206,9 @@ const BeakerInfoDisplay = (_, context) => {
               minValue={0}
               maxValue={beaker.capacity}
               ranges={{
-                'good': [beaker.capacity * 0.85, beaker.capacity],
-                'average': [beaker.capacity * 0.25, beaker.capacity * 0.85],
-                'bad': [0, beaker.capacity * 0.25],
+                good: [beaker.capacity * 0.85, beaker.capacity],
+                average: [beaker.capacity * 0.25, beaker.capacity * 0.85],
+                bad: [0, beaker.capacity * 0.25],
               }}
             />
           </LabeledList.Item>
@@ -219,20 +232,22 @@ const AntibodyInfoDisplay = (_, context) => {
         {!resistances.length
           ? 'None'
           : resistances.map((resistance) => {
-            return (
-              <Button
-                key={resistance.name}
-                icon="eye-dropper"
-                disabled={!is_ready}
-                tooltip="Creates a vaccine bottle."
-                onClick={() =>
-                  act('create_vaccine_bottle', {
-                    index: resistance.id,
-                  })}>
-                {`${resistance.name}`}
-              </Button>
-            );
-          })}
+              return (
+                <Button
+                  key={resistance.name}
+                  icon="eye-dropper"
+                  disabled={!is_ready}
+                  tooltip="Creates a vaccine bottle."
+                  onClick={() =>
+                    act('create_vaccine_bottle', {
+                      index: resistance.id,
+                    })
+                  }
+                >
+                  {`${resistance.name}`}
+                </Button>
+              );
+            })}
       </LabeledList.Item>
     </LabeledList>
   );
@@ -271,18 +286,19 @@ const SpecimenDisplay = (_, context) => {
               onClick={() =>
                 act('create_culture_bottle', {
                   index: virus.index,
-                })}
+                })
+              }
             />
           </Stack.Item>
         </Stack>
-      }>
+      }
+    >
       <Stack fill vertical>
         <Stack.Item>
           <VirusDisplay virus={virus} />
         </Stack.Item>
         <Stack.Item>
-          {virus?.symptoms
-          && <SymptomDisplay symptoms={virus.symptoms} />}
+          {virus?.symptoms && <SymptomDisplay symptoms={virus.symptoms} />}
         </Stack.Item>
       </Stack>
     </Section>
@@ -304,7 +320,8 @@ const VirusTabs = (props: TabsProps, context) => {
           <Tabs.Tab
             selected={tab === index}
             onClick={() => tabHandler(index)}
-            key={virus.name}>
+            key={virus.name}
+          >
             {virus.name}
           </Tabs.Tab>
         );
@@ -352,7 +369,8 @@ const VirusTextInfo = (props: VirusInfoProps, context) => {
               act('rename_disease', {
                 index: virus.index,
                 name: value,
-              })}
+              })
+            }
           />
         ) : (
           <Box color="bad">{virus.name}</Box>
@@ -383,14 +401,16 @@ const VirusTraitInfo = (props: VirusInfoProps) => {
         <Tooltip content="Decides the cure complexity.">
           <LabeledList.Item
             color={GetColor(virus.resistance)}
-            label="Resistance">
+            label="Resistance"
+          >
             {virus.resistance}
           </LabeledList.Item>
         </Tooltip>
         <Tooltip content="Symptomic progression.">
           <LabeledList.Item
             color={GetColor(virus.stage_speed)}
-            label="Stage speed">
+            label="Stage speed"
+          >
             {virus.stage_speed}
           </LabeledList.Item>
         </Tooltip>
@@ -402,7 +422,8 @@ const VirusTraitInfo = (props: VirusInfoProps) => {
         <Tooltip content="Decides the spread type.">
           <LabeledList.Item
             color={GetColor(virus.transmission)}
-            label="Transmissibility">
+            label="Transmissibility"
+          >
             {virus.transmission}
           </LabeledList.Item>
         </Tooltip>
@@ -457,14 +478,16 @@ const SymptomTraitInfo = (props: SymptomInfoProps) => {
         <Tooltip content="Decides the cure complexity.">
           <LabeledList.Item
             color={GetColor(symptom.resistance)}
-            label="Resistance">
+            label="Resistance"
+          >
             {symptom.resistance}
           </LabeledList.Item>
         </Tooltip>
         <Tooltip content="Symptomic progression.">
           <LabeledList.Item
             color={GetColor(symptom.stage_speed)}
-            label="Stage Speed">
+            label="Stage Speed"
+          >
             {symptom.stage_speed}
           </LabeledList.Item>
         </Tooltip>
@@ -476,7 +499,8 @@ const SymptomTraitInfo = (props: SymptomInfoProps) => {
         <Tooltip content="Decides the spread type.">
           <LabeledList.Item
             color={GetColor(symptom.transmission)}
-            label="Transmission">
+            label="Transmission"
+          >
             {symptom.transmission}
           </LabeledList.Item>
         </Tooltip>
diff --git a/tgui/packages/tgui/interfaces/PaperSheet.js b/tgui/packages/tgui/interfaces/PaperSheet.js
index 809d6c3a9683..17f031564b9c 100644
--- a/tgui/packages/tgui/interfaces/PaperSheet.js
+++ b/tgui/packages/tgui/interfaces/PaperSheet.js
@@ -22,58 +22,86 @@ const MAX_PAPER_LENGTH = 5000; // Question, should we send this with ui_data?
 // Hacky, yes, works?...yes
 const textWidth = (text, font, fontsize) => {
   // default font height is 12 in tgui
-  font = fontsize + "x " + font;
+  font = fontsize + 'x ' + font;
   const c = document.createElement('canvas');
-  const ctx = c.getContext("2d");
+  const ctx = c.getContext('2d');
   ctx.font = font;
   const width = ctx.measureText(text).width;
   return width;
 };
 
-const setFontinText = (text, font, color, bold=false, italics=false) => {
-  return "<span style=\""
-    + "color:" + color + ";"
-    + "font-family:'" + font + "';"
-    + ((bold)
-      ? "font-weight: bold;"
-      : "")
-    + ((italics)
-      ? "font-style: italic;"
-      : "")
-    + "\">" + text + "</span>";
+const setFontinText = (text, font, color, bold = false, italics = false) => {
+  return (
+    '<span style="' +
+    'color:' +
+    color +
+    ';' +
+    "font-family:'" +
+    font +
+    "';" +
+    (bold ? 'font-weight: bold;' : '') +
+    (italics ? 'font-style: italic;' : '') +
+    '">' +
+    text +
+    '</span>'
+  );
 };
 
-const createIDHeader = index => {
-  return "paperfield_" + index;
+const createIDHeader = (index) => {
+  return 'paperfield_' + index;
 };
 // To make a field you do a [_______] or however long the field is
 // we will then output a TEXT input for it that hopefully covers
 // the exact amount of spaces
 const field_regex = /\[(_+)\]/g;
-const field_tag_regex = /\[<input\s+(?!disabled)(.*?)\s+id="(?<id>paperfield_\d+)"(.*?)\/>\]/gm;
-const sign_regex = /%s(?:ign)?(?=\\s|$)?/igm;
-
-const createInputField = (length, width, font,
-  fontsize, color, id) => {
-  return "[<input "
-      + "type=\"text\" "
-      + "style=\""
-      + "font:'" + fontsize + "x " + font + "';"
-      + "color:" + color + ";"
-      + "min-width:" + width + ";"
-      + "max-width:" + width + ";"
-      + "\" "
-      + "id=\"" + id + "\" "
-      + "maxlength=" + length +" "
-      + "size=" + length + " "
-      + "/>]";
+const field_tag_regex =
+  /\[<input\s+(?!disabled)(.*?)\s+id="(?<id>paperfield_\d+)"(.*?)\/>\]/gm;
+const sign_regex = /%s(?:ign)?(?=\\s|$)?/gim;
+
+const createInputField = (length, width, font, fontsize, color, id) => {
+  return (
+    '[<input ' +
+    'type="text" ' +
+    'style="' +
+    "font:'" +
+    fontsize +
+    'x ' +
+    font +
+    "';" +
+    'color:' +
+    color +
+    ';' +
+    'min-width:' +
+    width +
+    ';' +
+    'max-width:' +
+    width +
+    ';' +
+    '" ' +
+    'id="' +
+    id +
+    '" ' +
+    'maxlength=' +
+    length +
+    ' ' +
+    'size=' +
+    length +
+    ' ' +
+    '/>]'
+  );
 };
 
 const createFields = (txt, font, fontsize, color, counter) => {
   const ret_text = txt.replace(field_regex, (match, p1, offset, string) => {
-    const width = textWidth(match, font, fontsize) + "px";
-    return createInputField(p1.length,
-      width, font, fontsize, color, createIDHeader(counter++));
+    const width = textWidth(match, font, fontsize) + 'px';
+    return createInputField(
+      p1.length,
+      width,
+      font,
+      fontsize,
+      color,
+      createIDHeader(counter++),
+    );
   });
   return {
     counter,
@@ -83,14 +111,14 @@ const createFields = (txt, font, fontsize, color, counter) => {
 
 const signDocument = (txt, color, user) => {
   return txt.replace(sign_regex, () => {
-    return setFontinText(user, "Times New Roman", color, true, true);
+    return setFontinText(user, 'Times New Roman', color, true, true);
   });
 };
 
-const run_marked_default = value => {
+const run_marked_default = (value) => {
   // Override function, any links and images should
   // kill any other marked tokens we don't want here
-  const walkTokens = token => {
+  const walkTokens = (token) => {
     switch (token.type) {
       case 'url':
       case 'autolink':
@@ -100,7 +128,7 @@ const run_marked_default = value => {
         token.type = 'text';
         // Once asset system is up change to some default image
         // or rewrite for icon images
-        token.href = "";
+        token.href = '';
         break;
     }
   };
@@ -115,17 +143,17 @@ const run_marked_default = value => {
 };
 
 /*
-** This gets the field, and finds the dom object and sees if
-** the user has typed something in.  If so, it replaces,
-** the dom object, in txt with the value, spaces so it
-** fits the [] format and saves the value into a object
-** There may be ways to optimize this in javascript but
-** doing this in byond is nightmarish.
-**
-** It returns any values that were saved and a corrected
-** html code or null if nothing was updated
-*/
-const checkAllFields = (txt, font, color, user_name, bold=false) => {
+ ** This gets the field, and finds the dom object and sees if
+ ** the user has typed something in.  If so, it replaces,
+ ** the dom object, in txt with the value, spaces so it
+ ** fits the [] format and saves the value into a object
+ ** There may be ways to optimize this in javascript but
+ ** doing this in byond is nightmarish.
+ **
+ ** It returns any values that were saved and a corrected
+ ** html code or null if nothing was updated
+ */
+const checkAllFields = (txt, font, color, user_name, bold = false) => {
   let matches;
   let values = {};
   let replace = [];
@@ -140,7 +168,7 @@ const checkAllFields = (txt, font, color, user_name, bold=false) => {
       const dom = document.getElementById(id);
       // make sure we got data, and kill any html that might
       // be in it
-      const dom_text = dom && dom.value ? dom.value : "";
+      const dom_text = dom && dom.value ? dom.value : '';
       if (dom_text.length === 0) {
         continue;
       }
@@ -152,65 +180,61 @@ const checkAllFields = (txt, font, color, user_name, bold=false) => {
       const target = dom.cloneNode(true);
       // in case they sign in a field
       if (sanitized_text.match(sign_regex)) {
-        target.style.fontFamily = "Times New Roman";
+        target.style.fontFamily = 'Times New Roman';
         bold = true;
         target.defaultValue = user_name;
-      }
-      else {
+      } else {
         target.style.fontFamily = font;
         target.defaultValue = sanitized_text;
       }
       if (bold) {
-        target.style.fontWeight = "bold";
+        target.style.fontWeight = 'bold';
       }
       target.style.color = color;
       target.disabled = true;
       const wrap = document.createElement('div');
       wrap.appendChild(target);
       values[id] = sanitized_text; // save the data
-      replace.push({ value: "[" + wrap.innerHTML + "]", raw_text: full_match });
+      replace.push({ value: '[' + wrap.innerHTML + ']', raw_text: full_match });
     }
   }
   if (replace.length > 0) {
     for (const o of replace) {
-
       txt = txt.replace(o.raw_text, o.value);
     }
   }
   return { text: txt, fields: values };
 };
 
-const pauseEvent = e => {
-  if (e.stopPropagation) { e.stopPropagation(); }
-  if (e.preventDefault) { e.preventDefault(); }
-  e.cancelBubble=true;
-  e.returnValue=false;
+const pauseEvent = (e) => {
+  if (e.stopPropagation) {
+    e.stopPropagation();
+  }
+  if (e.preventDefault) {
+    e.preventDefault();
+  }
+  e.cancelBubble = true;
+  e.returnValue = false;
   return false;
 };
 
 const Stamp = (props, context) => {
-  const {
-    image,
-    opacity,
-  } = props;
+  const { image, opacity } = props;
   const stamp_transform = {
-    'left': image.x + 'px',
-    'top': image.y + 'px',
-    'transform': 'rotate(' + image.rotate + 'deg)',
-    'opacity': opacity || 1.0,
+    left: image.x + 'px',
+    top: image.y + 'px',
+    transform: 'rotate(' + image.rotate + 'deg)',
+    opacity: opacity || 1.0,
   };
   return (
     <div
       id="stamp"
-      className={classes([
-        'Paper__Stamp',
-        image.sprite,
-      ])}
-      style={stamp_transform} />
+      className={classes(['Paper__Stamp', image.sprite])}
+      style={stamp_transform}
+    />
   );
 };
 
-
 const setInputReadonly = (text, readonly) => {
   return readonly
     ? text.replace(/<input\s[^d]/g, '<input disabled ')
@@ -220,34 +244,34 @@ const setInputReadonly = (text, readonly) => {
 // got to make this a full component if we
 // want to control updates
 const PaperSheetView = (props, context) => {
-  const {
-    value = "",
-    stamps = [],
-    backgroundColor,
-    readOnly,
-  } = props;
+  const { value = '', stamps = [], backgroundColor, readOnly } = props;
   const stamp_list = stamps;
   const text_html = {
-    __html: '<span class="paper-text">'
-      + setInputReadonly(value, readOnly)
-      + '</span>',
+    __html:
+      '<span class="paper-text">' +
+      setInputReadonly(value, readOnly) +
+      '</span>',
   };
   return (
     <Box
       position="relative"
       backgroundColor={backgroundColor}
       width="100%"
-      height="100%" >
+      height="100%"
+    >
       <Box
         className="Paper__Page"
         fillPositionedParent
         width="100%"
         height="100%"
         dangerouslySetInnerHTML={text_html}
-        p="10px" />
+        p="10px"
+      />
       {stamp_list.map((o, i) => (
-        <Stamp key={o[0] + i}
-          image={{ sprite: o[0], x: o[1], y: o[2], rotate: o[3] }} />
+        <Stamp
+          key={o[0] + i}
+          image={{ sprite: o[0], x: o[1], y: o[2], rotate: o[3] }}
+        />
       ))}
     </Box>
   );
@@ -263,22 +287,28 @@ class PaperSheetStamper extends Component {
       rotate: 0,
     };
     this.style = null;
-    this.handleMouseMove = e => {
+    this.handleMouseMove = (e) => {
       const pos = this.findStampPosition(e);
-      if (!pos) { return; }
+      if (!pos) {
+        return;
+      }
       // center offset of stamp & rotate
       pauseEvent(e);
       this.setState({ x: pos[0], y: pos[1], rotate: pos[2] });
     };
-    this.handleMouseClick = e => {
-      if (e.pageY <= 30) { return; }
+    this.handleMouseClick = (e) => {
+      if (e.pageY <= 30) {
+        return;
+      }
       const { act, data } = useBackend(this.context);
       const stamp_obj = {
-        x: this.state.x, y: this.state.y, r: this.state.rotate,
+        x: this.state.x,
+        y: this.state.y,
+        r: this.state.rotate,
         stamp_class: this.props.stamp_class,
         stamp_icon_state: data.stamp_icon_state,
       };
-      act("stamp", stamp_obj);
+      act('stamp', stamp_obj);
     };
   }
 
@@ -289,30 +319,30 @@ class PaperSheetStamper extends Component {
       rotating = true;
     }
 
-    if (document.getElementById("stamp"))
-    {
-      const stamp = document.getElementById("stamp");
+    if (document.getElementById('stamp')) {
+      const stamp = document.getElementById('stamp');
       const stampHeight = stamp.clientHeight;
       const stampWidth = stamp.clientWidth;
 
-      const currentHeight = rotating ? this.state.y : e.pageY
-      - windowRef.scrollTop - stampHeight;
-      const currentWidth = rotating ? this.state.x : e.pageX - (stampWidth / 2);
+      const currentHeight = rotating
+        ? this.state.y
+        : e.pageY - windowRef.scrollTop - stampHeight;
+      const currentWidth = rotating ? this.state.x : e.pageX - stampWidth / 2;
 
       const widthMin = 0;
       const heightMin = 0;
 
-      const widthMax = (windowRef.clientWidth) - (
-        stampWidth);
-      const heightMax = (windowRef.clientHeight - windowRef.scrollTop) - (
-        stampHeight);
+      const widthMax = windowRef.clientWidth - stampWidth;
+      const heightMax =
+        windowRef.clientHeight - windowRef.scrollTop - stampHeight;
 
       const radians = Math.atan2(
         e.pageX - currentWidth,
-        e.pageY - currentHeight
+        e.pageY - currentHeight,
       );
 
-      const rotate = rotating ? (radians * (180 / Math.PI) * -1)
+      const rotate = rotating
+        ? radians * (180 / Math.PI) * -1
         : this.state.rotate;
 
       const pos = [
@@ -325,21 +355,17 @@ class PaperSheetStamper extends Component {
   }
 
   componentDidMount() {
-    document.addEventListener("mousemove", this.handleMouseMove);
-    document.addEventListener("click", this.handleMouseClick);
+    document.addEventListener('mousemove', this.handleMouseMove);
+    document.addEventListener('click', this.handleMouseClick);
   }
 
   componentWillUnmount() {
-    document.removeEventListener("mousemove", this.handleMouseMove);
-    document.removeEventListener("click", this.handleMouseClick);
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('click', this.handleMouseClick);
   }
 
   render() {
-    const {
-      value,
-      stamp_class,
-      stamps,
-    } = this.props;
+    const { value, stamp_class, stamps } = this.props;
     const stamp_list = stamps || [];
     const current_pos = {
       sprite: stamp_class,
@@ -349,13 +375,8 @@ class PaperSheetStamper extends Component {
     };
     return (
       <>
-        <PaperSheetView
-          readOnly
-          value={value}
-          stamps={stamp_list} />
-        <Stamp
-          active_stamp
-          opacity={0.5} image={current_pos} />
+        <PaperSheetView readOnly value={value} stamps={stamp_list} />
+        <Stamp active_stamp opacity={0.5} image={current_pos} />
       </>
     );
   }
@@ -379,19 +400,29 @@ const createPreview = (
   value = value.trim();
   if (value.length > 0) {
     // First lets make sure it ends in a new line
-    value += value[value.length] === "\n" ? " \n" : "\n \n";
+    value += value[value.length] === '\n' ? ' \n' : '\n \n';
     // Second, we sanitize the text of html
     const sanitized_text = sanitizeText(value);
     const signed_text = signDocument(sanitized_text, color, user_name);
     // Third we replace the [__] with fields as markedjs fucks them up
     const fielded_text = createFields(
-      signed_text, font, 12, color, field_counter);
+      signed_text,
+      font,
+      12,
+      color,
+      field_counter,
+    );
     // Fourth, parse the text using markup
     const formatted_text = run_marked_default(fielded_text.text);
     // Fifth, we wrap the created text in the pin color, and font.
     // crayon is bold (<b> tags), maybe make fountain pin italic?
     const fonted_text = setFontinText(
-      formatted_text, font, color, is_crayon, false);
+      formatted_text,
+      font,
+      color,
+      is_crayon,
+      false,
+    );
     out.text += fonted_text;
     out.field_counter = fielded_text.counter;
   }
@@ -400,7 +431,12 @@ const createPreview = (
     // if any data was entered by the user and
     // if it was return the data and modify the text
     const final_processing = checkAllFields(
-      out.text, font, color, user_name, is_crayon);
+      out.text,
+      font,
+      color,
+      user_name,
+      is_crayon,
+    );
     out.text = final_processing.text;
     out.form_fields = final_processing.fields;
   }
@@ -414,18 +450,19 @@ class PaperSheetEdit extends Component {
   constructor(props, context) {
     super(props, context);
     this.state = {
-      previewSelected: "Preview",
-      old_text: props.value || "",
+      previewSelected: 'Preview',
+      old_text: props.value || '',
       counter: props.counter || 0,
-      textarea_text: "",
-      combined_text: props.value || "",
+      textarea_text: '',
+      combined_text: props.value || '',
       showingHelpTip: false,
     };
   }
 
   createPreviewFromData(value, do_fields = false) {
     const { data } = useBackend(this.context);
-    return createPreview(value,
+    return createPreview(
+      value,
       this.state.old_text,
       do_fields,
       this.state.counter,
@@ -437,15 +474,17 @@ class PaperSheetEdit extends Component {
   }
   onInputHandler(e, value) {
     if (value !== this.state.textarea_text) {
-      const combined_length = this.state.old_text.length
-        + this.state.textarea_text.length;
+      const combined_length =
+        this.state.old_text.length + this.state.textarea_text.length;
       if (combined_length > MAX_PAPER_LENGTH) {
-        if ((combined_length - MAX_PAPER_LENGTH) >= value.length) {
+        if (combined_length - MAX_PAPER_LENGTH >= value.length) {
           // Basically we cannot add any more text to the paper
           value = '';
         } else {
-          value = value.substr(0, value.length
-            - (combined_length - MAX_PAPER_LENGTH));
+          value = value.substr(
+            0,
+            value.length - (combined_length - MAX_PAPER_LENGTH),
+          );
         }
         // we check again to save an update
         if (value === this.state.textarea_text) {
@@ -464,88 +503,91 @@ class PaperSheetEdit extends Component {
     const { act } = useBackend(this.context);
     const final_processing = this.createPreviewFromData(new_text, true);
     act('save', final_processing);
-    this.setState(() => { return {
-      textarea_text: "",
-      previewSelected: "save",
-      combined_text: final_processing.text,
-      old_text: final_processing.text,
-      counter: final_processing.field_counter,
-    }; });
+    this.setState(() => {
+      return {
+        textarea_text: '',
+        previewSelected: 'save',
+        combined_text: final_processing.text,
+        old_text: final_processing.text,
+        counter: final_processing.field_counter,
+      };
+    });
     // byond should switch us to readonly mode from here
   }
 
   render() {
-    const {
-      textColor,
-      fontFamily,
-      stamps,
-      backgroundColor,
-    } = this.props;
+    const { textColor, fontFamily, stamps, backgroundColor } = this.props;
     return (
-      <Flex
-        direction="column"
-        fillPositionedParent>
+      <Flex direction="column" fillPositionedParent>
         <Flex.Item>
-          <Tabs
-            size="100%">
+          <Tabs size="100%">
             <Tabs.Tab
               key="marked_edit"
               textColor={'black'}
-              backgroundColor={this.state.previewSelected === "Edit"
-                ? "grey"
-                : "white"}
-              selected={this.state.previewSelected === "Edit"}
-              onClick={() => this.setState({ previewSelected: "Edit" })}>
+              backgroundColor={
+                this.state.previewSelected === 'Edit' ? 'grey' : 'white'
+              }
+              selected={this.state.previewSelected === 'Edit'}
+              onClick={() => this.setState({ previewSelected: 'Edit' })}
+            >
               Edit
             </Tabs.Tab>
             <Tabs.Tab
               key="marked_preview"
               textColor={'black'}
-              backgroundColor={this.state.previewSelected === "Preview"
-                ? "grey"
-                : "white"}
-              selected={this.state.previewSelected === "Preview"}
-              onClick={() => this.setState(() => {
-                const new_state = {
-                  previewSelected: "Preview",
-                  textarea_text: this.state.textarea_text,
-                  combined_text: this.createPreviewFromData(
-                    this.state.textarea_text).text,
-                };
-                return new_state;
-              })}>
+              backgroundColor={
+                this.state.previewSelected === 'Preview' ? 'grey' : 'white'
+              }
+              selected={this.state.previewSelected === 'Preview'}
+              onClick={() =>
+                this.setState(() => {
+                  const new_state = {
+                    previewSelected: 'Preview',
+                    textarea_text: this.state.textarea_text,
+                    combined_text: this.createPreviewFromData(
+                      this.state.textarea_text,
+                    ).text,
+                  };
+                  return new_state;
+                })
+              }
+            >
               Preview
             </Tabs.Tab>
             <Tabs.Tab
               key="marked_done"
               textColor={'black'}
-              backgroundColor={this.state.previewSelected === "confirm"
-                ? "red"
-                : this.state.previewSelected === "save"
-                  ? "grey"
-                  : "white"}
-              selected={this.state.previewSelected === "confirm"
-                || this.state.previewSelected === "save"}
+              backgroundColor={
+                this.state.previewSelected === 'confirm'
+                  ? 'red'
+                  : this.state.previewSelected === 'save'
+                    ? 'grey'
+                    : 'white'
+              }
+              selected={
+                this.state.previewSelected === 'confirm' ||
+                this.state.previewSelected === 'save'
+              }
               onClick={() => {
-                if (this.state.previewSelected === "confirm") {
+                if (this.state.previewSelected === 'confirm') {
                   this.finalUpdate(this.state.textarea_text);
-                }
-                else if (this.state.previewSelected === "Edit") {
+                } else if (this.state.previewSelected === 'Edit') {
                   this.setState(() => {
                     const new_state = {
-                      previewSelected: "confirm",
+                      previewSelected: 'confirm',
                       textarea_text: this.state.textarea_text,
                       combined_text: this.createPreviewFromData(
-                        this.state.textarea_text).text,
+                        this.state.textarea_text,
+                      ).text,
                     };
                     return new_state;
                   });
+                } else {
+                  this.setState({ previewSelected: 'confirm' });
                 }
-                else {
-                  this.setState({ previewSelected: "confirm" });
-                }
-              }}>
-              {this.state.previewSelected === "confirm" ? "Confirm" : "Save"}
+              }}
+            >
+              {this.state.previewSelected === 'confirm' ? 'Confirm' : 'Save'}
             </Tabs.Tab>
             <Tabs.Tab
               key="marked_help"
@@ -557,33 +599,32 @@ class PaperSheetEdit extends Component {
               }}
               onmouseout={() => {
                 this.setState({ showingHelpTip: false });
-              }}>
+              }}
+            >
               Help
             </Tabs.Tab>
           </Tabs>
         </Flex.Item>
-        <Flex.Item
-          grow={1}
-          basis={1}>
-          {this.state.previewSelected === "Edit" && (
+        <Flex.Item grow={1} basis={1}>
+          {(this.state.previewSelected === 'Edit' && (
             <TextArea
               value={this.state.textarea_text}
               textColor={textColor}
               fontFamily={fontFamily}
-              height={(window.innerHeight - 80) + "px"}
+              height={window.innerHeight - 80 + 'px'}
               backgroundColor={backgroundColor}
-              onInput={this.onInputHandler.bind(this)} />
-          ) || (
+              onInput={this.onInputHandler.bind(this)}
+            />
+          )) || (
             <PaperSheetView
               value={this.state.combined_text}
               stamps={stamps}
               fontFamily={fontFamily}
-              textColor={textColor} />
+              textColor={textColor}
+            />
           )}
         </Flex.Item>
-        {this.state.showingHelpTip && (
-          <HelpToolip />
-        )}
+        {this.state.showingHelpTip && <HelpToolip />}
       </Flex>
     );
   }
@@ -594,9 +635,9 @@ export const PaperSheet = (props, context) => {
   const {
     edit_mode,
     text,
-    paper_color = "white",
-    pen_color = "black",
-    pen_font = "Verdana",
+    paper_color = 'white',
+    pen_color = 'black',
+    pen_font = 'Verdana',
     stamps,
     stamp_class,
     sizeX,
@@ -623,23 +664,18 @@ export const PaperSheet = (props, context) => {
         values.field_counter,
         used_color,
         used_font,
-        used_sign
+        used_sign,
       );
       values.text = processing.text;
       values.field_counter = processing.field_counter;
     }
   }
-  const stamp_list = !stamps
-    ? []
-    : stamps;
-  const decide_mode = mode => {
+  const stamp_list = !stamps ? [] : stamps;
+  const decide_mode = (mode) => {
     switch (mode) {
       case 0:
         return (
-          <PaperSheetView
-            value={values.text}
-            stamps={stamp_list}
-            readOnly />
+          <PaperSheetView value={values.text} stamps={stamp_list} readOnly />
         );
       case 1:
         return (
@@ -649,17 +685,19 @@ export const PaperSheet = (props, context) => {
             textColor={pen_color}
             fontFamily={pen_font}
             stamps={stamp_list}
-            backgroundColor={paper_color} />
+            backgroundColor={paper_color}
+          />
         );
       case 2:
         return (
           <PaperSheetStamper
             value={values.text}
             stamps={stamp_list}
-            stamp_class={stamp_class} />
+            stamp_class={stamp_class}
+          />
         );
       default:
-        return "ERROR ERROR WE CANNOT BE HERE!!";
+        return 'ERROR ERROR WE CANNOT BE HERE!!';
     }
   };
   return (
@@ -667,14 +705,10 @@ export const PaperSheet = (props, context) => {
       title={name}
       theme="paper"
       width={sizeX || 400}
-      height={sizeY || 500}>
-      <Window.Content
-        backgroundColor={paper_color}
-        scrollable>
-        <Box
-          id="page"
-          fitted
-          fillPositionedParent>
+      height={sizeY || 500}
+    >
+      <Window.Content backgroundColor={paper_color} scrollable>
+        <Box id="page" fitted fillPositionedParent>
           {decide_mode(edit_mode)}
         </Box>
       </Window.Content>
@@ -684,7 +718,8 @@ export const PaperSheet = (props, context) => {
 
 const HelpToolip = () => {
   const signature_text = {
-    __html: '<span style="color:#000000;font-family:\'Verdana\';"><span style="color:#000000;font-family:\'Times New Roman\';font-weight: bold;font-style: italic;">Your Name Here</span></span>',
+    __html:
+      '<span style="color:#000000;font-family:\'Verdana\';"><span style="color:#000000;font-family:\'Times New Roman\';font-weight: bold;font-style: italic;">Your Name Here</span></span>',
   };
   const input_field = {
     __html: '<input></input>',
@@ -697,106 +732,71 @@ const HelpToolip = () => {
       width="300px"
       height="370px"
       backgroundColor="#E8E4C9" // offset from paper color
-      textAlign="center">
-      <h3>
-        Papercode Syntax
-      </h3>
+      textAlign="center"
+    >
+      <h3>Papercode Syntax</h3>
       <Table>
         <Table.Row>
-          <Table.Cell>
-            Signature: %s
-          </Table.Cell>
-          <Table.Cell
-            dangerouslySetInnerHTML={signature_text}
-          />
+          <Table.Cell>Signature: %s</Table.Cell>
+          <Table.Cell dangerouslySetInnerHTML={signature_text} />
         </Table.Row>
 
         <Table.Row>
-          <Table.Cell>
-            {'[_____]'}
-          </Table.Cell>
-          <Table.Cell
-            dangerouslySetInnerHTML={input_field}
-          />
+          <Table.Cell>{'[_____]'}</Table.Cell>
+          <Table.Cell dangerouslySetInnerHTML={input_field} />
         </Table.Row>
 
         <Table.Row>
           <Table.Cell>
-            <Box>
-              Heading
-            </Box>
+            <Box>Heading</Box>
             =====
           </Table.Cell>
           <Table.Cell>
-            <h2>
-              Heading
-            </h2>
+            <h2>Heading</h2>
           </Table.Cell>
         </Table.Row>
 
         <Table.Row>
           <Table.Cell>
-            <Box>
-              Sub Heading
-            </Box>
+            <Box>Sub Heading</Box>
             ------
           </Table.Cell>
           <Table.Cell>
-            <h4>
-              Sub Heading
-            </h4>
+            <h4>Sub Heading</h4>
           </Table.Cell>
         </Table.Row>
 
         <Table.Row>
+          <Table.Cell>_Italic Text_</Table.Cell>
           <Table.Cell>
-            _Italic Text_
-          </Table.Cell>
-          <Table.Cell>
-            <i>
-              Italic Text
-            </i>
+            <i>Italic Text</i>
           </Table.Cell>
         </Table.Row>
 
         <Table.Row>
+          <Table.Cell>**Bold Text**</Table.Cell>
           <Table.Cell>
-            **Bold Text**
-          </Table.Cell>
-          <Table.Cell>
-            <b>
-              Bold Text
-            </b>
+            <b>Bold Text</b>
           </Table.Cell>
         </Table.Row>
 
         <Table.Row>
+          <Table.Cell>`Code Text`</Table.Cell>
           <Table.Cell>
-            `Code Text`
-          </Table.Cell>
-          <Table.Cell>
-            <code>
-              Code Text
-            </code>
+            <code>Code Text</code>
           </Table.Cell>
         </Table.Row>
 
         <Table.Row>
+          <Table.Cell>~~Strikethrough Text~~</Table.Cell>
           <Table.Cell>
-            ~~Strikethrough Text~~
-          </Table.Cell>
-          <Table.Cell>
-            <s>
-              Strikethrough Text
-            </s>
+            <s>Strikethrough Text</s>
           </Table.Cell>
         </Table.Row>
 
         <Table.Row>
           <Table.Cell>
-            <Box>
-              Horizontal Rule
-            </Box>
+            <Box>Horizontal Rule</Box>
             ---
           </Table.Cell>
           <Table.Cell>
@@ -808,28 +808,16 @@ const HelpToolip = () => {
         <Table.Row>
           <Table.Cell>
             <Table>
-              <Table.Row>
-                * List Element 1
-              </Table.Row>
-              <Table.Row>
-                * List Element 2
-              </Table.Row>
-              <Table.Row>
-                * Etc...
-              </Table.Row>
+              <Table.Row>* List Element 1</Table.Row>
+              <Table.Row>* List Element 2</Table.Row>
+              <Table.Row>* Etc...</Table.Row>
             </Table>
           </Table.Cell>
           <Table.Cell>
             <ul>
-              <li>
-                List Element 1
-              </li>
-              <li>
-                List Element 2
-              </li>
-              <li>
-                Etc...
-              </li>
+              <li>List Element 1</li>
+              <li>List Element 2</li>
+              <li>Etc...</li>
             </ul>
           </Table.Cell>
         </Table.Row>
@@ -837,28 +825,16 @@ const HelpToolip = () => {
         <Table.Row>
           <Table.Cell>
             <Table>
-              <Table.Row>
-                1. List Element 1
-              </Table.Row>
-              <Table.Row>
-                2. List Element 2
-              </Table.Row>
-              <Table.Row>
-                3. Etc...
-              </Table.Row>
+              <Table.Row>1. List Element 1</Table.Row>
+              <Table.Row>2. List Element 2</Table.Row>
+              <Table.Row>3. Etc...</Table.Row>
             </Table>
           </Table.Cell>
           <Table.Cell>
             <ol>
-              <li>
-                List Element 1
-              </li>
-              <li>
-                List Element 2
-              </li>
-              <li>
-                Etc...
-              </li>
+              <li>List Element 1</li>
+              <li>List Element 2</li>
+              <li>Etc...</li>
             </ol>
           </Table.Cell>
         </Table.Row>
diff --git a/tgui/packages/tgui/interfaces/ParticleEdit/EntriesBasic.tsx b/tgui/packages/tgui/interfaces/ParticleEdit/EntriesBasic.tsx
index b5d45dc556a7..eff1faaaeb0c 100644
--- a/tgui/packages/tgui/interfaces/ParticleEdit/EntriesBasic.tsx
+++ b/tgui/packages/tgui/interfaces/ParticleEdit/EntriesBasic.tsx
@@ -1,6 +1,28 @@
 import { useBackend, useLocalState } from '../../backend';
-import { Box, Button, LabeledList, NumberInput, ColorBox, Input, Dropdown, Stack } from '../../components';
-import { EntryCoordProps, EntryFloatProps, EntryGradientProps, EntryIconStateProps, EntryTransformProps, MatrixTypes, ParticleUIData, P_DATA_ICON_ADD, P_DATA_ICON_REMOVE, P_DATA_ICON_WEIGHT, SpaceToNum, SpaceTypes } from './data';
+import {
+  Box,
+  Button,
+  LabeledList,
+  NumberInput,
+  ColorBox,
+  Input,
+  Dropdown,
+  Stack,
+} from '../../components';
+import {
+  EntryCoordProps,
+  EntryFloatProps,
+  EntryGradientProps,
+  EntryIconStateProps,
+  EntryTransformProps,
+  MatrixTypes,
+  ParticleUIData,
+  P_DATA_ICON_ADD,
+  P_DATA_ICON_REMOVE,
+  P_DATA_ICON_WEIGHT,
+  SpaceToNum,
+  SpaceTypes,
+} from './data';
 import { editKeyOf, editWeightOf, setGradientSpace } from './helpers';
 
 export const EntryFloat = (props: EntryFloatProps, context) => {
@@ -22,7 +44,8 @@ export const EntryFloat = (props: EntryFloatProps, context) => {
           act('edit', {
             var: var_name,
             new_value: value,
-          })}
+          })
+        }
       />
     </LabeledList.Item>
   );
@@ -46,7 +69,8 @@ export const EntryCoord = (props: EntryCoordProps, context) => {
           act('edit', {
             var: var_name,
             new_value: [value, coord?.[1], coord?.[2]],
-          })}
+          })
+        }
       />
       <NumberInput
         animated
@@ -55,7 +79,8 @@ export const EntryCoord = (props: EntryCoordProps, context) => {
           act('edit', {
             var: var_name,
             new_value: [coord?.[0], value, coord?.[2]],
-          })}
+          })
+        }
       />
       <NumberInput
         animated
@@ -64,7 +89,8 @@ export const EntryCoord = (props: EntryCoordProps, context) => {
           act('edit', {
             var: var_name,
             new_value: [coord?.[0], coord?.[1], value],
-          })}
+          })
+        }
       />
     </LabeledList.Item>
   );
@@ -77,8 +103,8 @@ export const EntryGradient = (props: EntryGradientProps, context) => {
   const isLooping = gradient?.find((x) => x === 'loop');
   const space_type = gradient?.includes('space')
     ? Object.keys(SpaceToNum).find(
-      (space) => SpaceToNum[space] === gradient['space']
-    )
+        (space) => SpaceToNum[space] === gradient['space'],
+      )
     : 'COLORSPACE_RGB';
   return (
     <LabeledList.Item label={name}>
@@ -101,7 +127,8 @@ export const EntryGradient = (props: EntryGradientProps, context) => {
                 new_value: isLooping
                   ? gradient!.filter((x, i) => i !== gradient!.indexOf('loop'))
                   : [...(gradient || []), 'loop'],
-              })}
+              })
+            }
           />
         </Stack.Item>
         <Stack.Item>
@@ -113,8 +140,9 @@ export const EntryGradient = (props: EntryGradientProps, context) => {
                 var: var_name,
                 new_value: gradient
                   ? setGradientSpace(gradient, SpaceToNum[e])
-                  : { 'space': SpaceToNum[e] },
-              })}
+                  : { space: SpaceToNum[e] },
+              })
+            }
             width="145px"
           />
         </Stack.Item>
@@ -133,9 +161,10 @@ export const EntryGradient = (props: EntryGradientProps, context) => {
                     act('edit', {
                       var: var_name,
                       new_value: gradient!.map((x, i) =>
-                        i === index ? value : x
+                        i === index ? value : x,
                       ),
-                    })}
+                    })
+                  }
                 />
                 <Button
                   icon={'minus'}
@@ -144,10 +173,11 @@ export const EntryGradient = (props: EntryGradientProps, context) => {
                     act('edit', {
                       var: var_name,
                       new_value: gradient.filter((x, i) => i !== index),
-                    })}
+                    })
+                  }
                 />
               </>
-            )
+            ),
           )}
         </Stack.Item>
         <Stack.Item>
@@ -158,7 +188,8 @@ export const EntryGradient = (props: EntryGradientProps, context) => {
               act('edit', {
                 var: var_name,
                 new_value: [...(gradient || []), '#FFFFFF'],
-              })}
+              })
+            }
           />
         </Stack.Item>
       </Stack>
@@ -170,8 +201,8 @@ export const EntryTransform = (props: EntryTransformProps, context) => {
   const { act, data } = useBackend<ParticleUIData>(context);
   const [desc, setdesc] = useLocalState(context, 'desc', '');
   const len = props.transform?.length ? props.transform.length : 0;
-  const selected
-    = len < 7
+  const selected =
+    len < 7
       ? 'Simple Matrix'
       : len < 13
         ? 'Complex Matrix'
@@ -207,8 +238,10 @@ export const EntryTransform = (props: EntryTransformProps, context) => {
                 act('edit', {
                   var: var_name,
                   new_value: transform!.map((x, i) =>
-                    i === index ? value : x
-                  ) })}
+                    i === index ? value : x,
+                  ),
+                })
+              }
             />
           ))}
         </Stack.Item>
@@ -248,7 +281,8 @@ export const EntryIcon = (props: EntryIconStateProps, context) => {
                       var: var_name,
                       var_mod: P_DATA_ICON_WEIGHT,
                       new_value: [icon_name, value],
-                    })}
+                    })
+                  }
                 />
               </Stack.Item>
               <Button
@@ -258,7 +292,8 @@ export const EntryIcon = (props: EntryIconStateProps, context) => {
                     var: var_name,
                     var_mod: P_DATA_ICON_REMOVE,
                     new_value: icon_name,
-                  })}
+                  })
+                }
               />
             </>
           ))
@@ -278,7 +313,8 @@ export const EntryIcon = (props: EntryIconStateProps, context) => {
               act('edit', {
                 var: var_name,
                 var_mod: P_DATA_ICON_ADD,
-              })}
+              })
+            }
           />
         </Stack.Item>
       </Stack>
@@ -290,10 +326,10 @@ export const EntryIconState = (props: EntryIconStateProps, context) => {
   const { act, data } = useBackend<ParticleUIData>(context);
   const [desc, setdesc] = useLocalState(context, 'desc', '');
   const { name, var_name, icon_state } = props;
-  const newValue
-    = typeof icon_state === 'string'
-      ? { [icon_state]: 1, 'None': 0 }
-      : { ...icon_state, 'None': 0 };
+  const newValue =
+    typeof icon_state === 'string'
+      ? { [icon_state]: 1, None: 0 }
+      : { ...icon_state, None: 0 };
   return (
     <LabeledList.Item label={name}>
       <Stack>
@@ -317,7 +353,8 @@ export const EntryIconState = (props: EntryIconStateProps, context) => {
                     act('edit', {
                       var: var_name,
                       new_value: editKeyOf(icon_state, iconstate, value),
-                    })}
+                    })
+                  }
                 />
               </Stack.Item>
               <Stack.Item>
@@ -332,7 +369,8 @@ export const EntryIconState = (props: EntryIconStateProps, context) => {
                     act('edit', {
                       var: var_name,
                       new_value: editWeightOf(icon_state, iconstate, value),
-                    })}
+                    })
+                  }
                 />
               </Stack.Item>
               <Stack.Item>
@@ -343,10 +381,11 @@ export const EntryIconState = (props: EntryIconStateProps, context) => {
                       var: var_name,
                       new_value: Object.fromEntries(
                         Object.entries(icon_state).filter(
-                          ([key]) => key !== iconstate
-                        )
+                          ([key]) => key !== iconstate,
+                        ),
                       ),
-                    })}
+                    })
+                  }
                 />
               </Stack.Item>
             </>
@@ -359,7 +398,8 @@ export const EntryIconState = (props: EntryIconStateProps, context) => {
                 act('edit', {
                   var: var_name,
                   new_value: value,
-                })}
+                })
+              }
             />
             = 1
           </>
@@ -370,7 +410,8 @@ export const EntryIconState = (props: EntryIconStateProps, context) => {
             act('edit', {
               var: var_name,
               new_value: newValue,
-            })}
+            })
+          }
         />
       </Stack>
     </LabeledList.Item>
diff --git a/tgui/packages/tgui/interfaces/ParticleEdit/EntriesGenerators.tsx b/tgui/packages/tgui/interfaces/ParticleEdit/EntriesGenerators.tsx
index c615d97e507e..aaf878e6127a 100644
--- a/tgui/packages/tgui/interfaces/ParticleEdit/EntriesGenerators.tsx
+++ b/tgui/packages/tgui/interfaces/ParticleEdit/EntriesGenerators.tsx
@@ -1,7 +1,21 @@
 /* eslint-disable react/jsx-no-undef */
 import { useBackend, useLocalState } from '../../backend';
-import { Button, LabeledList, NumberInput, ColorBox, Input, Stack } from '../../components';
-import { EntryGeneratorNumbersListProps, FloatGeneratorColorProps, FloatGeneratorProps, ParticleUIData, P_DATA_GENERATOR, RandToNumber } from './data';
+import {
+  Button,
+  LabeledList,
+  NumberInput,
+  ColorBox,
+  Input,
+  Stack,
+} from '../../components';
+import {
+  EntryGeneratorNumbersListProps,
+  FloatGeneratorColorProps,
+  FloatGeneratorProps,
+  ParticleUIData,
+  P_DATA_GENERATOR,
+  RandToNumber,
+} from './data';
 import { isStringArray } from './helpers';
 import { GeneratorListEntry } from './Generators';
 
@@ -30,7 +44,8 @@ export const FloatGenerator = (props: FloatGeneratorProps, context) => {
                 new_value: !Array.isArray(float)
                   ? ['num', 0, 1, RandToNumber['UNIFORM_RAND']]
                   : 0,
-              })}
+              })
+            }
           />
         </Stack.Item>
         {!Array.isArray(float) ? (
@@ -42,7 +57,8 @@ export const FloatGenerator = (props: FloatGeneratorProps, context) => {
                 act('edit', {
                   var: var_name,
                   new_value: value,
-                })}
+                })
+              }
             />
           </Stack.Item>
         ) : (
@@ -55,7 +71,7 @@ export const FloatGenerator = (props: FloatGeneratorProps, context) => {
 
 export const FloatGeneratorColor = (
   props: FloatGeneratorColorProps,
-  context
+  context,
 ) => {
   const { act, data } = useBackend<ParticleUIData>(context);
   const [desc, setdesc] = useLocalState(context, 'desc', '');
@@ -81,7 +97,8 @@ export const FloatGeneratorColor = (
                 new_value: !Array.isArray(float)
                   ? ['num', 0, 1, RandToNumber['UNIFORM_RAND']]
                   : '#FFFFFF',
-              })}
+              })
+            }
           />
         </Stack.Item>
         {typeof float === 'string' ? (
@@ -98,7 +115,8 @@ export const FloatGeneratorColor = (
                 act('edit', {
                   var: var_name,
                   new_value: value,
-                })}
+                })
+              }
             />
           </Stack.Item>
         ) : (
@@ -111,7 +129,7 @@ export const FloatGeneratorColor = (
 
 export const EntryGeneratorNumbersList = (
   props: EntryGeneratorNumbersListProps,
-  context
+  context,
 ) => {
   const { act, data } = useBackend<ParticleUIData>(context);
   const [desc, setdesc] = useLocalState(context, 'desc', '');
@@ -136,13 +154,14 @@ export const EntryGeneratorNumbersList = (
                 var_mod: !isStringArray(input) ? P_DATA_GENERATOR : null,
                 new_value: !isStringArray(input)
                   ? [
-                    'sphere',
-                    [0, 0, 0],
-                    [1, 1, 1],
-                    RandToNumber['UNIFORM_RAND'],
-                  ]
+                      'sphere',
+                      [0, 0, 0],
+                      [1, 1, 1],
+                      RandToNumber['UNIFORM_RAND'],
+                    ]
                   : [1, 1, 1],
-              })}
+              })
+            }
           />
         </Stack.Item>
         <Stack.Item>
@@ -154,7 +173,8 @@ export const EntryGeneratorNumbersList = (
               act('edit', {
                 var: var_name,
                 new_value: Array.isArray(input) ? 1 : [1, 1, 1],
-              })}
+              })
+            }
           />
         </Stack.Item>
 
@@ -167,7 +187,8 @@ export const EntryGeneratorNumbersList = (
                 act('edit', {
                   var: var_name,
                   new_value: value,
-                })}
+                })
+              }
             />
           </Stack.Item>
         ) : isStringArray(input) ? (
@@ -185,7 +206,8 @@ export const EntryGeneratorNumbersList = (
                 act('edit', {
                   var: var_name,
                   new_value: [value, input![1], input![2]],
-                })}
+                })
+              }
             />
             <NumberInput
               animated
@@ -194,7 +216,8 @@ export const EntryGeneratorNumbersList = (
                 act('edit', {
                   var: var_name,
                   new_value: [input![0], value, input![2]],
-                })}
+                })
+              }
             />
             {allow_z ? (
               <NumberInput
@@ -204,7 +227,8 @@ export const EntryGeneratorNumbersList = (
                   act('edit', {
                     var: var_name,
                     new_value: [input![0], input![1], value],
-                  })}
+                  })
+                }
               />
             ) : null}
           </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/ParticleEdit/Generators.tsx b/tgui/packages/tgui/interfaces/ParticleEdit/Generators.tsx
index 9481ee8b38b4..22e75dcd2628 100644
--- a/tgui/packages/tgui/interfaces/ParticleEdit/Generators.tsx
+++ b/tgui/packages/tgui/interfaces/ParticleEdit/Generators.tsx
@@ -1,6 +1,14 @@
 import { useBackend } from '../../backend';
 import { NumberInput, Dropdown, Stack } from '../../components';
-import { GeneratorProps, GeneratorTypes, GeneratorTypesNoVectors, ParticleUIData, P_DATA_GENERATOR, RandToNumber, RandTypes } from './data';
+import {
+  GeneratorProps,
+  GeneratorTypes,
+  GeneratorTypesNoVectors,
+  ParticleUIData,
+  P_DATA_GENERATOR,
+  RandToNumber,
+  RandTypes,
+} from './data';
 
 export const GeneratorListEntry = (props: GeneratorProps, context) => {
   const { act, data } = useBackend<ParticleUIData>(context);
@@ -47,7 +55,8 @@ export const GeneratorListEntry = (props: GeneratorProps, context) => {
               var: var_name,
               var_mod: P_DATA_GENERATOR,
               new_value: [e, A, B, RandToNumber[rand_type]],
-            })}
+            })
+          }
           width="130px"
         />
       </Stack.Item>
@@ -63,7 +72,8 @@ export const GeneratorListEntry = (props: GeneratorProps, context) => {
                 var: var_name,
                 var_mod: P_DATA_GENERATOR,
                 new_value: [type, value, B, RandToNumber[rand_type]],
-              })}
+              })
+            }
           />
         ) : (
           <>
@@ -80,7 +90,8 @@ export const GeneratorListEntry = (props: GeneratorProps, context) => {
                     B,
                     RandToNumber[rand_type],
                   ],
-                })}
+                })
+              }
             />
             <NumberInput
               animated
@@ -90,7 +101,8 @@ export const GeneratorListEntry = (props: GeneratorProps, context) => {
                   var: var_name,
                   var_mod: P_DATA_GENERATOR,
                   new_value: [type, [A[0], value, A[2]], B, rand_type],
-                })}
+                })
+              }
             />
             <NumberInput
               animated
@@ -100,7 +112,8 @@ export const GeneratorListEntry = (props: GeneratorProps, context) => {
                   var: var_name,
                   var_mod: P_DATA_GENERATOR,
                   new_value: [type, [A[0], A[1], value], B, rand_type],
-                })}
+                })
+              }
             />
           </>
         )}
@@ -116,7 +129,8 @@ export const GeneratorListEntry = (props: GeneratorProps, context) => {
                 var: var_name,
                 var_mod: P_DATA_GENERATOR,
                 new_value: [type, A, value, RandToNumber[rand_type]],
-              })}
+              })
+            }
           />
         ) : (
           <>
@@ -133,7 +147,8 @@ export const GeneratorListEntry = (props: GeneratorProps, context) => {
                     [value, B[1], B[2]],
                     RandToNumber[rand_type],
                   ],
-                })}
+                })
+              }
             />
             <NumberInput
               animated
@@ -148,7 +163,8 @@ export const GeneratorListEntry = (props: GeneratorProps, context) => {
                     [B[0], value, B[2]],
                     RandToNumber[rand_type],
                   ],
-                })}
+                })
+              }
             />
             <NumberInput
               animated
@@ -163,7 +179,8 @@ export const GeneratorListEntry = (props: GeneratorProps, context) => {
                     [B[0], B[1], value],
                     RandToNumber[rand_type],
                   ],
-                })}
+                })
+              }
             />
           </>
         )}
@@ -177,7 +194,8 @@ export const GeneratorListEntry = (props: GeneratorProps, context) => {
               var: var_name,
               var_mod: P_DATA_GENERATOR,
               new_value: [type, A, B, RandToNumber[value]],
-            })}
+            })
+          }
           width="130px"
         />
       </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/ParticleEdit/Tutorial.tsx b/tgui/packages/tgui/interfaces/ParticleEdit/Tutorial.tsx
index c6ca18dbd2c0..c0fab0b4efc4 100644
--- a/tgui/packages/tgui/interfaces/ParticleEdit/Tutorial.tsx
+++ b/tgui/packages/tgui/interfaces/ParticleEdit/Tutorial.tsx
@@ -1,5 +1,12 @@
 import { useLocalState } from '../../backend';
-import { Box, Button, LabeledList, Section, Modal, Stack } from '../../components';
+import {
+  Box,
+  Button,
+  LabeledList,
+  Section,
+  Modal,
+  Stack,
+} from '../../components';
 import { resolveAsset } from '../../assets';
 
 export const ShowDesc = (props, context) => {
@@ -7,7 +14,8 @@ export const ShowDesc = (props, context) => {
   return (
     <Modal
       width={'60em'}
-      align={VarExplanation[desc].dataunit ? 'center' : 'left'}>
+      align={VarExplanation[desc].dataunit ? 'center' : 'left'}
+    >
       <Section
         title={'Var Details'}
         buttons={
@@ -36,8 +44,10 @@ export const ShowDesc = (props, context) => {
                 color={'red'}
                 onClick={() => setdesc('')}
               />
-            </>)
-        }>
+            </>
+          )
+        }
+      >
         {VarExplanation[desc].dataunit ? (
           <LabeledList>
             <LabeledList.Item label={'Data unit'}>
@@ -57,106 +67,106 @@ export const ShowDesc = (props, context) => {
 
 /** Dictionary for all the tutorial question marks + generators guide */
 const VarExplanation = {
-  'width': {
+  width: {
     dataunit: 'Pixels',
     desc: 'This is the width of the particle "image" ie if you go out of this size the particles vanish, but if they go back into the "image" they reappear.',
   },
-  'height': {
+  height: {
     dataunit: 'Pixels',
     desc: 'This is the height of the particle "image" ie if you go out of this size the particles vanish, but if they go back into the "image" they reappear.',
   },
-  'count': {
+  count: {
     dataunit: 'Integer',
     desc: 'This is the maximum number of possibly active particles for this spawner. If this amount is spawned it wont spawn any more until the lifespan of the other particles ends.',
   },
-  'spawning': {
+  spawning: {
     dataunit: 'Particles spawned per tick',
     desc: 'Particle spawn rate in particles per tick. Does not need to be an integer as this is the spawn RATE not spawn COUNT.',
   },
-  'bound1': {
+  bound1: {
     dataunit: 'Coordinate',
     desc: 'Minimum x/y/z particle area. If a particle goes below any of these given x/y/z values it gets deleted. Can be set to a single number (bound1 = -100) but this is treated as (bound1 = list(-100,-100,-100)',
   },
-  'bound2': {
+  bound2: {
     dataunit: 'Coordinate',
     desc: 'Maximum x/y/z particle area. If a particle goes above any of these given x/y/z values it gets deleted. Can be set to a single number (bound2 = 100) but this is treated as (bound2 = list(100,100,100)',
   },
-  'gravity': {
+  gravity: {
     dataunit: 'Vector',
     desc: 'Constant acceleration that is applied to every particle every tick.',
   },
-  'gradient': {
+  gradient: {
     dataunit: 'Byond Color gradient',
     desc: 'Color gradients are an advanced way to manipulate colors. list(0, "#f00",0.1, 0.3, "#ff0", 0.4, 0.6, "#008000", 0.7, 0.9, "#00f", "loop") for example is 10% each red, yellow, green, blue, with a 20% transition zone between each, then when it does over it loops back around. When this is active, color will need to be set to a number to use it. Ie in the previous case color = 0 means the color will be "#f00". Color is then changed by the color_change var, which means that color_change = 0.1 means the next tick color will be 0.2 and the color will be blended between 2/3 "#f00" and 1/3 "#ff0". The "space" key changes what color spaces byond should treat the colors as being in as (https://secure.byond.com/docs/ref/index.html#/{{appendix}}/color-space). This affects how the colors are blended together when switching from one color to the other.',
   },
-  'transform': {
+  transform: {
     dataunit: 'Matrix (list form)',
     desc: 'One of three byond matrix types (See reference).\n SIMPLE MATRIX:\n Standard matrix type that is used in most byond code: list(a, b, c, d, e, f). \n COMPLEX MATRIX: Like the simple matrix, but instead of just changing x and y also changes the z value. The last row is optional, and is added to the x/y/z values respectively if present: list(xx,xy,xz, yx,yy,yz, zx,zy,zz) OR list(xx,xy,xz, yx,yy,yz, zx,zy,zz, cx,cy,cz) \nPROJECTION MATRIX:\n A special particle-only matrix. Like the complex matrix, manipulates the x, y, and z, but also manipulates a fourth axis called "w", which influences how much changes in z changes in z decrease it\'s size by. Ie a lower w will make it seem like it\'s farther away from the camera faster :list(xx,xy,xz,xw, yx,yy,yz,yw, zx,zy,zz,zw, wx,wy,wz,ww)',
   },
 
-  'icon': {
+  icon: {
     dataunit: 'Icon file OR list(icon_file = weight)',
     desc: "Icon file to use for particles spawned. If not specified will spawn a 1x1 white dot. If an icon file reference, will apply that icon file every tick. If instead a list it will use the key as icons to choose from with their assigned values as weight. Example: list('rain.dmi' = 1, 'snow.dmi' = 2) will have 33% chance to use rain.dmi and 66% chance to use snow.dmi.",
   },
-  'icon_state': {
+  icon_state: {
     dataunit: 'String OR list(icon_state = weight)',
     desc: 'icon state to use for particles spawned. If instead a list it will use the key as icons to choose from with their assigned values as weight. Example: list("rain" = 1, "snow" = 2) will have 33% chance to use "rain" and 66% chance to use "snow".',
   },
-  'lifespan': {
+  lifespan: {
     dataunit: 'Ticks',
     desc: 'Applied to particles when it spawns; determines how many ticks before this particle starts despawning. Can use a generator.',
   },
-  'fade': {
+  fade: {
     dataunit: 'Ticks',
     desc: 'After lifespan has elapsed, how long a particle spends fading out in ticks. Can use a generator.',
   },
-  'fadein': {
+  fadein: {
     dataunit: 'Ticks',
     desc: 'How long a particle spends fading in in when it is spawned in ticks. When this ends, starts ticking down lifespan. Can use a generator.',
   },
-  'color': {
+  color: {
     dataunit: 'Number OR color string',
     desc: 'Usually a standard color string. However, when using a gradient this value can be a number. Can use a generator. See gradient for details.',
   },
-  'color_change': {
+  color_change: {
     dataunit: 'Float',
     desc: 'If a gradient is defined, change the color value by this value every tick. Can use a generator. See gradient for details.',
   },
-  'position': {
+  position: {
     dataunit: 'Coordinate',
     desc: 'X,Y,Z coordinates for where this particle spawns. Can use a generator.',
   },
-  'velocity': {
+  velocity: {
     dataunit: 'Coordinate',
     desc: 'When spawned, spawns with this velocity. Can use a generator.',
   },
-  'scale': {
+  scale: {
     dataunit: 'Scale',
     desc: 'Scale that is applied to the icon when it spawns. list(x_scale, y_scale). Defaults to (1,1). Can use a generator.',
   },
-  'grow': {
+  grow: {
     dataunit: 'Scale',
     desc: 'How much the scale applied to the particle changes every tick. Can use a generator.',
   },
-  'rotation': {
+  rotation: {
     dataunit: 'Number',
     desc: 'If icon is specified, this is by how many degrees this icon will be rotated clockwise when it spawns. Can use a generator.',
   },
-  'spin': {
+  spin: {
     dataunit: 'Number',
     desc: 'How much rotation is changed by every tick. Can use a generator.',
   },
-  'friction': {
+  friction: {
     dataunit: 'Float',
     desc: '% of velocity that is removed every tick. Value from 0 to 1. Can use a generator.',
   },
 
-  'drift': {
+  drift: {
     dataunit: 'Vector',
     desc: 'How much acceleration is added every tick to the particle. This var is re-evalutated every tick. Can use a generator.',
   },
 
-  'motion': {
+  motion: {
     desc: (
       <>
         The first thing to understand before we dive into how generators is
@@ -200,7 +210,7 @@ const VarExplanation = {
     ),
   },
 
-  'randtypes': {
+  randtypes: {
     desc: (
       <Stack vertical fill>
         <Stack.Item>
@@ -253,7 +263,7 @@ const VarExplanation = {
     ),
   },
 
-  'gentypes': {
+  gentypes: {
     desc: (
       <Stack vertical fill>
         <Stack.Item height={2}>
@@ -283,7 +293,7 @@ const VarExplanation = {
                 src={resolveAsset('num')}
                 width={15}
                 style={{
-                  'transform': 'translateY(-20%)',
+                  transform: 'translateY(-20%)',
                 }}
               />
             </Stack.Item>
@@ -302,7 +312,7 @@ const VarExplanation = {
                 src={resolveAsset('vector')}
                 width={15}
                 style={{
-                  'transform': 'translateY(-35%)',
+                  transform: 'translateY(-35%)',
                 }}
               />
             </Stack.Item>
@@ -321,7 +331,7 @@ const VarExplanation = {
                 src={resolveAsset('box')}
                 width={15}
                 style={{
-                  'transform': 'translateY(-10%)',
+                  transform: 'translateY(-10%)',
                 }}
               />
             </Stack.Item>
@@ -355,7 +365,7 @@ const VarExplanation = {
                 src={resolveAsset('circle')}
                 width={15}
                 style={{
-                  'transform': 'translateY(-30%)',
+                  transform: 'translateY(-30%)',
                 }}
               />
             </Stack.Item>
@@ -375,7 +385,7 @@ const VarExplanation = {
                 src={resolveAsset('sphere')}
                 width={15}
                 style={{
-                  'transform': 'translateY(15%)',
+                  transform: 'translateY(15%)',
                 }}
               />
             </Stack.Item>
@@ -408,7 +418,7 @@ const VarExplanation = {
                 src={resolveAsset('cube')}
                 width={15}
                 style={{
-                  'transform': 'translateY(-10%)',
+                  transform: 'translateY(-10%)',
                 }}
               />
             </Stack.Item>
@@ -418,7 +428,7 @@ const VarExplanation = {
     ),
   },
 
-  'generator': {
+  generator: {
     desc: <Box>Please select a topic</Box>,
   },
 };
diff --git a/tgui/packages/tgui/interfaces/ParticleEdit/data.ts b/tgui/packages/tgui/interfaces/ParticleEdit/data.ts
index 8fa37722144c..2ccfb5501e20 100644
--- a/tgui/packages/tgui/interfaces/ParticleEdit/data.ts
+++ b/tgui/packages/tgui/interfaces/ParticleEdit/data.ts
@@ -5,10 +5,10 @@ export const RandTypes = [
   'SQUARE_RAND',
 ];
 export const RandToNumber = {
-  'UNIFORM_RAND': 1,
-  'NORMAL_RAND': 2,
-  'LINEAR_RAND': 3,
-  'SQUARE_RAND': 4,
+  UNIFORM_RAND: 1,
+  NORMAL_RAND: 2,
+  LINEAR_RAND: 3,
+  SQUARE_RAND: 4,
 };
 
 export const P_DATA_GENERATOR = 'generator';
@@ -29,10 +29,10 @@ export const SpaceTypes = [
   'COLORSPACE_HCY',
 ];
 export const SpaceToNum = {
-  'COLORSPACE_RGB': 0,
-  'COLORSPACE_HSV': 1,
-  'COLORSPACE_HSL': 2,
-  'COLORSPACE_HCY': 3,
+  COLORSPACE_RGB: 0,
+  COLORSPACE_HSV: 1,
+  COLORSPACE_HSL: 2,
+  COLORSPACE_HCY: 3,
 };
 
 export const GeneratorTypes = [
diff --git a/tgui/packages/tgui/interfaces/ParticleEdit/helpers.ts b/tgui/packages/tgui/interfaces/ParticleEdit/helpers.ts
index 7e6f8d6a666a..d8402e51ce17 100644
--- a/tgui/packages/tgui/interfaces/ParticleEdit/helpers.ts
+++ b/tgui/packages/tgui/interfaces/ParticleEdit/helpers.ts
@@ -2,7 +2,7 @@
 export const editKeyOf = (
   icon_state: { [key: string]: number },
   old_key: string,
-  new_key: string
+  new_key: string,
 ) => {
   let returnval = {};
   Object.keys(icon_state).forEach((key) => {
@@ -20,7 +20,7 @@ export const editKeyOf = (
 export const editWeightOf = (
   icon_state: { [key: string]: number },
   key: string,
-  weight: number
+  weight: number,
 ) => {
   icon_state[key] = weight;
   return icon_state;
@@ -37,7 +37,7 @@ export const isStringArray = (value: any): value is string[] => {
 /** sets the "space" keys value on  an object, then returns that object*/
 export const setGradientSpace = (
   gradient: (number | string)[],
-  space: number
+  space: number,
 ) => {
   gradient['space'] = space;
   return gradient;
diff --git a/tgui/packages/tgui/interfaces/ParticleEdit/index.tsx b/tgui/packages/tgui/interfaces/ParticleEdit/index.tsx
index 8d5b7b3a96b8..c6daf3bf9cab 100644
--- a/tgui/packages/tgui/interfaces/ParticleEdit/index.tsx
+++ b/tgui/packages/tgui/interfaces/ParticleEdit/index.tsx
@@ -4,8 +4,19 @@ import { Button, LabeledList, Section } from '../../components';
 import { Window } from '../../layouts';
 import { ParticleUIData } from './data';
 import { ShowDesc } from './Tutorial';
-import { EntryFloat, EntryCoord, EntryGradient, EntryTransform, EntryIcon, EntryIconState } from './EntriesBasic';
-import { FloatGenerator, FloatGeneratorColor, EntryGeneratorNumbersList } from './EntriesGenerators';
+import {
+  EntryFloat,
+  EntryCoord,
+  EntryGradient,
+  EntryTransform,
+  EntryIcon,
+  EntryIconState,
+} from './EntriesBasic';
+import {
+  FloatGenerator,
+  FloatGeneratorColor,
+  EntryGeneratorNumbersList,
+} from './EntriesGenerators';
 
 export const ParticleEdit = (props, context) => {
   const { act, data } = useBackend<ParticleUIData>(context);
@@ -66,7 +77,8 @@ export const ParticleEdit = (props, context) => {
                   tooltip={'Delete and close UI'}
                 />
               </>
-            }>
+            }
+          >
             <EntryFloat name={'Width'} var_name={'width'} float={width} />
             <EntryFloat name={'Height'} var_name={'height'} float={height} />
             <EntryFloat name={'Count'} var_name={'count'} float={count} />
diff --git a/tgui/packages/tgui/interfaces/PersonalCrafting.js b/tgui/packages/tgui/interfaces/PersonalCrafting.js
index 708eecc22a46..541fa956f4aa 100644
--- a/tgui/packages/tgui/interfaces/PersonalCrafting.js
+++ b/tgui/packages/tgui/interfaces/PersonalCrafting.js
@@ -1,5 +1,13 @@
 import { useBackend, useLocalState } from '../backend';
-import { Button, Dimmer, Icon, LabeledList, Section, Stack, Tabs } from '../components';
+import {
+  Button,
+  Dimmer,
+  Icon,
+  LabeledList,
+  Section,
+  Stack,
+  Tabs,
+} from '../components';
 import { Window } from '../layouts';
 
 export const PersonalCrafting = (props, context) => {
@@ -68,7 +76,8 @@ export const PersonalCrafting = (props, context) => {
                         category: category.category,
                         subcategory: category.subcategory,
                       });
-                    }}>
+                    }}
+                  >
                     {category.name}
                   </Tabs.Tab>
                 ))}
@@ -92,7 +101,8 @@ export const PersonalCrafting = (props, context) => {
                     onClick={() => act('toggle_recipes')}
                   />
                 </>
-              }>
+              }
+            >
               <Section fill scrollable>
                 {busy ? (
                   <Dimmer fontSize="32px">
@@ -138,9 +148,11 @@ const CraftingList = (props, context) => {
               onClick={() =>
                 act('make', {
                   recipe: craftable.ref,
-                })}
+                })
+              }
             />
-          }>
+          }
+        >
           {craftable.req_text}
         </LabeledList.Item>
       );
@@ -159,9 +171,11 @@ const CraftingList = (props, context) => {
             onClick={() =>
               act('make', {
                 recipe: craftable.ref,
-              })}
+              })
+            }
           />
-        }>
+        }
+      >
         <LabeledList>
           {!!craftable.req_text && (
             <LabeledList.Item label="Required">
diff --git a/tgui/packages/tgui/interfaces/Photocopier.js b/tgui/packages/tgui/interfaces/Photocopier.js
index e74354d312bb..00dfb0511210 100644
--- a/tgui/packages/tgui/interfaces/Photocopier.js
+++ b/tgui/packages/tgui/interfaces/Photocopier.js
@@ -1,30 +1,28 @@
 import { sortBy } from 'common/collections';
 import { useBackend } from '../backend';
-import { Box, Button, Dropdown, Flex, NumberInput, ProgressBar, Section } from '../components';
+import {
+  Box,
+  Button,
+  Dropdown,
+  Flex,
+  NumberInput,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const Photocopier = (props, context) => {
   const { data } = useBackend(context);
-  const {
-    isAI,
-    has_toner,
-    has_item,
-    forms_exist,
-  } = data;
+  const { isAI, has_toner, has_item, forms_exist } = data;
 
   return (
-    <Window
-      title="Photocopier"
-      width={320}
-      height={512}>
+    <Window title="Photocopier" width={320} height={512}>
       <Window.Content>
         {has_toner ? (
           <Toner />
         ) : (
           <Section title="Toner">
-            <Box color="average">
-              No inserted toner cartridge.
-            </Box>
+            <Box color="average">No inserted toner cartridge.</Box>
           </Section>
         )}
         {forms_exist ? (
@@ -34,20 +32,16 @@ export const Photocopier = (props, context) => {
             <Box color="average">
               No forms found. Please contact your system administrator.
             </Box>
-          </Section>  
+          </Section>
         )}
         {has_item ? (
           <Options />
         ) : (
           <Section title="Options">
-            <Box color="average">
-              No inserted item.
-            </Box>
+            <Box color="average">No inserted item.</Box>
           </Section>
         )}
-        {!!isAI && (
-          <AIOptions />
-        )}
+        {!!isAI && <AIOptions />}
       </Window.Content>
     </Window>
   );
@@ -55,11 +49,7 @@ export const Photocopier = (props, context) => {
 
 const Toner = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    has_toner,
-    max_toner,
-    current_toner,
-  } = data;
+  const { has_toner, max_toner, current_toner } = data;
 
   const average_toner = max_toner * 0.66;
   const bad_toner = max_toner * 0.33;
@@ -71,10 +61,12 @@ const Toner = (props, context) => {
         <Button
           disabled={!has_toner}
           onClick={() => act('remove_toner')}
-          icon="eject">
+          icon="eject"
+        >
           Eject
         </Button>
-      }>
+      }
+    >
       <ProgressBar
         ranges={{
           good: [average_toner, max_toner],
@@ -83,27 +75,20 @@ const Toner = (props, context) => {
         }}
         value={current_toner}
         minValue={0}
-        maxValue={max_toner} />
+        maxValue={max_toner}
+      />
     </Section>
   );
 };
 
 const Options = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    color_mode,
-    is_photo,
-    num_copies,
-    has_enough_toner,
-  } = data;
+  const { color_mode, is_photo, num_copies, has_enough_toner } = data;
 
   return (
     <Section title="Options">
       <Flex>
-        <Flex.Item
-          mt={0.4}
-          width={11}
-          color="label">
+        <Flex.Item mt={0.4} width={11} color="label">
           Make copies:
         </Flex.Item>
         <Flex.Item>
@@ -116,9 +101,12 @@ const Options = (props, context) => {
             minValue={1}
             maxValue={10}
             value={num_copies}
-            onDrag={(e, value) => act('set_copies', {
-              num_copies: value,
-            })} />
+            onDrag={(e, value) =>
+              act('set_copies', {
+                num_copies: value,
+              })
+            }
+          />
         </Flex.Item>
         <Flex.Item>
           <Button
@@ -126,36 +114,39 @@ const Options = (props, context) => {
             icon="copy"
             textAlign="center"
             disabled={!has_enough_toner}
-            onClick={() => act('make_copy')}>
+            onClick={() => act('make_copy')}
+          >
             Copy
           </Button>
         </Flex.Item>
       </Flex>
       {!!is_photo && (
         <Flex mt={0.5}>
-          <Flex.Item
-            mr={0.4}
-            width="50%">
+          <Flex.Item mr={0.4} width="50%">
             <Button
               fluid
               textAlign="center"
-              selected={color_mode === "Greyscale"}
-              onClick={() => act('color_mode', {
-                mode: "Greyscale",
-              })}>
+              selected={color_mode === 'Greyscale'}
+              onClick={() =>
+                act('color_mode', {
+                  mode: 'Greyscale',
+                })
+              }
+            >
               Greyscale
             </Button>
           </Flex.Item>
-          <Flex.Item
-            ml={0.4}
-            width="50%">
+          <Flex.Item ml={0.4} width="50%">
             <Button
               fluid
               textAlign="center"
-              selected={color_mode === "Color"}
-              onClick={() => act('color_mode', {
-                mode: "Color",
-              })}>
+              selected={color_mode === 'Color'}
+              onClick={() =>
+                act('color_mode', {
+                  mode: 'Color',
+                })
+              }
+            >
               Color
             </Button>
           </Flex.Item>
@@ -166,7 +157,8 @@ const Options = (props, context) => {
         textAlign="center"
         icon="reply"
         fluid
-        onClick={() => act('remove')}>
+        onClick={() => act('remove')}
+      >
         Remove item
       </Button>
     </Section>
@@ -175,15 +167,9 @@ const Options = (props, context) => {
 
 const Blanks = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    blanks,
-    category,
-    has_toner,
-  } = data;
+  const { blanks, category, has_toner } = data;
 
-  const sortedBlanks = sortBy(
-    blank => blanks.category,
-  )(blanks || []);
+  const sortedBlanks = sortBy((blank) => blanks.category)(blanks || []);
 
   const categories = [];
   for (let blank of sortedBlanks) {
@@ -193,9 +179,9 @@ const Blanks = (props, context) => {
   }
 
   const selectedCategory = category ?? categories[0];
-  const visibleBlanks = sortedBlanks.filter(blank => (
-    blank.category === selectedCategory
-  ));
+  const visibleBlanks = sortedBlanks.filter(
+    (blank) => blank.category === selectedCategory,
+  );
 
   return (
     <Section title="Blanks">
@@ -203,20 +189,24 @@ const Blanks = (props, context) => {
         width="100%"
         options={categories}
         selected={selectedCategory}
-        onSelected={value => act("choose_category", {
-          category: value,
-        })}
+        onSelected={(value) =>
+          act('choose_category', {
+            category: value,
+          })
+        }
       />
       <Box mt={0.4}>
-        {visibleBlanks.map(blank => (
+        {visibleBlanks.map((blank) => (
           <Button
             key={blank.code}
             title={blank.name}
             disabled={!has_toner}
-            onClick={() => act("print_blank", {
-              name: blank.name,
-              info: blank.info,
-            })}
+            onClick={() =>
+              act('print_blank', {
+                name: blank.name,
+                info: blank.info,
+              })
+            }
           >
             {blank.code}
           </Button>
@@ -238,7 +228,8 @@ const AIOptions = (props, context) => {
           icon="images"
           textAlign="center"
           disabled={!can_AI_print}
-          onClick={() => act('ai_photo')}>
+          onClick={() => act('ai_photo')}
+        >
           Print photo from database
         </Button>
       </Box>
diff --git a/tgui/packages/tgui/interfaces/PhysicalNewscaster.js b/tgui/packages/tgui/interfaces/PhysicalNewscaster.js
index 74d016e2a802..38d3b6c59ddb 100644
--- a/tgui/packages/tgui/interfaces/PhysicalNewscaster.js
+++ b/tgui/packages/tgui/interfaces/PhysicalNewscaster.js
@@ -1,11 +1,9 @@
-import { Newscaster } from "../interfaces/Newscaster";
-import { Window } from "../layouts";
+import { Newscaster } from '../interfaces/Newscaster';
+import { Window } from '../layouts';
 
 export const PhysicalNewscaster = (props, context) => {
   return (
-    <Window
-      width={575}
-      height={560}>
+    <Window width={575} height={560}>
       <Window.Content scrollable>
         <Newscaster />
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/PipeDispenser.js b/tgui/packages/tgui/interfaces/PipeDispenser.js
index 490f5875e0fa..d51bfb3ae0ef 100644
--- a/tgui/packages/tgui/interfaces/PipeDispenser.js
+++ b/tgui/packages/tgui/interfaces/PipeDispenser.js
@@ -1,20 +1,23 @@
 import { useBackend, useLocalState } from '../backend';
 import { Button, LabeledList, Section, Stack, Tabs } from '../components';
 import { Window } from '../layouts';
-import { ICON_BY_CATEGORY_NAME, ColorItem, LayerSelect, SmartPipeBlockSection } from './RapidPipeDispenser';
+import {
+  ICON_BY_CATEGORY_NAME,
+  ColorItem,
+  LayerSelect,
+  SmartPipeBlockSection,
+} from './RapidPipeDispenser';
 
 const PipeTypeSection = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    categories = [],
-  } = data;
-  const [
-    categoryName,
-    setCategoryName,
-  ] = useLocalState(context, 'categoryName');
-  const shownCategory = categories
-    .find(category => category.cat_name === categoryName)
-    || categories[0];
+  const { categories = [] } = data;
+  const [categoryName, setCategoryName] = useLocalState(
+    context,
+    'categoryName',
+  );
+  const shownCategory =
+    categories.find((category) => category.cat_name === categoryName) ||
+    categories[0];
   return (
     <Section fill scrollable>
       <Tabs>
@@ -24,23 +27,27 @@ const PipeTypeSection = (props, context) => {
             key={category.cat_name}
             icon={ICON_BY_CATEGORY_NAME[category.cat_name]}
             selected={category.cat_name === shownCategory.cat_name}
-            onClick={() => setCategoryName(category.cat_name)}>
+            onClick={() => setCategoryName(category.cat_name)}
+          >
             {category.cat_name}
           </Tabs.Tab>
         ))}
       </Tabs>
-      {shownCategory?.recipes.map(recipe => (
+      {shownCategory?.recipes.map((recipe) => (
         <Button
           key={recipe.pipe_index}
           fluid
           ellipsis
           content={recipe.pipe_name}
           title={recipe.pipe_name}
-          onClick={() => act('pipe_type', {
-            pipe_type: recipe.pipe_index,
-            pipe_dir: recipe.dir,
-            category: shownCategory.cat_name,
-          })} />
+          onClick={() =>
+            act('pipe_type', {
+              pipe_type: recipe.pipe_index,
+              pipe_dir: recipe.dir,
+              category: shownCategory.cat_name,
+            })
+          }
+        />
       ))}
     </Section>
   );
@@ -48,13 +55,9 @@ const PipeTypeSection = (props, context) => {
 
 export const PipeDispenser = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    category: rootCategoryIndex,
-  } = data;
+  const { category: rootCategoryIndex } = data;
   return (
-    <Window
-      width={450}
-      height={575}>
+    <Window width={450} height={575}>
       <Window.Content>
         <Stack fill vertical>
           {rootCategoryIndex === 0 && (
diff --git a/tgui/packages/tgui/interfaces/PortableChemMixer.js b/tgui/packages/tgui/interfaces/PortableChemMixer.js
index 22df9a43b10f..ec1624c60bc0 100644
--- a/tgui/packages/tgui/interfaces/PortableChemMixer.js
+++ b/tgui/packages/tgui/interfaces/PortableChemMixer.js
@@ -1,115 +1,120 @@
 import { sortBy } from 'common/collections';
 import { toTitleCase } from 'common/string';
 import { useBackend } from '../backend';
-import { AnimatedNumber, Box, Button, LabeledList, Section } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  LabeledList,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const PortableChemMixer = (props, context) => {
   const { act, data } = useBackend(context);
   const recording = !!data.recordingRecipe;
   const beakerTransferAmounts = data.beakerTransferAmounts || [];
-  const beakerContents = recording
-    && Object.keys(data.recordingRecipe)
-      .map(id => ({
+  const beakerContents =
+    (recording &&
+      Object.keys(data.recordingRecipe).map((id) => ({
         id,
         name: toTitleCase(id.replace(/_/, ' ')),
         volume: data.recordingRecipe[id],
-      }))
-    || data.beakerContents
-    || [];
-  const chemicals = sortBy(chem => chem.title)(data.chemicals);
+      }))) ||
+    data.beakerContents ||
+    [];
+  const chemicals = sortBy((chem) => chem.title)(data.chemicals);
   return (
-    <Window
-      width={465}
-      height={550}>
+    <Window width={465} height={550}>
       <Window.Content scrollable>
         <Section
           title="Dispense"
-          buttons={(
-            beakerTransferAmounts.map(amount => (
-              <Button
-                key={amount}
-                icon="plus"
-                selected={amount === data.amount}
-                content={amount}
-                onClick={() => act('amount', {
+          buttons={beakerTransferAmounts.map((amount) => (
+            <Button
+              key={amount}
+              icon="plus"
+              selected={amount === data.amount}
+              content={amount}
+              onClick={() =>
+                act('amount', {
                   target: amount,
-                })} />
-            ))
-          )}>
+                })
+              }
+            />
+          ))}
+        >
           <Box>
-            {chemicals.map(chemical => (
+            {chemicals.map((chemical) => (
               <Button
                 key={chemical.id}
                 icon="tint"
                 fluid
                 lineHeight={1.75}
                 content={`(${chemical.volume}) ${chemical.title}`}
-                tooltip={"pH: " + chemical.pH}
-                onClick={() => act('dispense', {
-                  reagent: chemical.id,
-                })} />
+                tooltip={'pH: ' + chemical.pH}
+                onClick={() =>
+                  act('dispense', {
+                    reagent: chemical.id,
+                  })
+                }
+              />
             ))}
           </Box>
         </Section>
         <Section
           title="Disposal controls"
-          buttons={(
-            beakerTransferAmounts.map(amount => (
-              <Button
-                key={amount}
-                icon="minus"
-                disabled={recording}
-                content={amount}
-                onClick={() => act('remove', { amount })} />
-            ))
-          )}>
+          buttons={beakerTransferAmounts.map((amount) => (
+            <Button
+              key={amount}
+              icon="minus"
+              disabled={recording}
+              content={amount}
+              onClick={() => act('remove', { amount })}
+            />
+          ))}
+        >
           <LabeledList>
             <LabeledList.Item
               label="Beaker"
-              buttons={!!data.isBeakerLoaded && (
-                <Button
-                  icon="eject"
-                  content="Eject"
-                  disabled={!data.isBeakerLoaded}
-                  onClick={() => act('eject')} />
-              )}>
-              {recording
-                && 'Virtual beaker'
-                || data.isBeakerLoaded
-                  && (
-                    <>
-                      <AnimatedNumber
-                        initial={0}
-                        value={data.beakerCurrentVolume} />
-                      /{data.beakerMaxVolume} units
-                    </>
-                  )
-                || 'No beaker'}
+              buttons={
+                !!data.isBeakerLoaded && (
+                  <Button
+                    icon="eject"
+                    content="Eject"
+                    disabled={!data.isBeakerLoaded}
+                    onClick={() => act('eject')}
+                  />
+                )
+              }
+            >
+              {(recording && 'Virtual beaker') ||
+                (data.isBeakerLoaded && (
+                  <>
+                    <AnimatedNumber
+                      initial={0}
+                      value={data.beakerCurrentVolume}
+                    />
+                    /{data.beakerMaxVolume} units
+                  </>
+                )) ||
+                'No beaker'}
             </LabeledList.Item>
-            <LabeledList.Item
-              label="Contents">
+            <LabeledList.Item label="Contents">
               <Box color="label">
-                {(!data.isBeakerLoaded && !recording) && 'N/A'
-                  || beakerContents.length === 0 && 'Nothing'}
+                {(!data.isBeakerLoaded && !recording && 'N/A') ||
+                  (beakerContents.length === 0 && 'Nothing')}
               </Box>
-              {beakerContents.map(chemical => (
-                <Box
-                  key={chemical.name}
-                  color="label">
-                  <AnimatedNumber
-                    initial={0}
-                    value={chemical.volume} />
-                  {' '}
-                  units of {chemical.name}
+              {beakerContents.map((chemical) => (
+                <Box key={chemical.name} color="label">
+                  <AnimatedNumber initial={0} value={chemical.volume} /> units
+                  of {chemical.name}
                 </Box>
               ))}
-              {((beakerContents.length > 0 && !!data.showpH) && (
+              {beakerContents.length > 0 && !!data.showpH && (
                 <Box>
                   pH:
-                  <AnimatedNumber
-                    value={data.beakerCurrentpH} />
-                </Box>)
+                  <AnimatedNumber value={data.beakerCurrentpH} />
+                </Box>
               )}
             </LabeledList.Item>
           </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/PortableGenerator.js b/tgui/packages/tgui/interfaces/PortableGenerator.js
index 3f3acd4f1f6a..d0c1eb990b06 100644
--- a/tgui/packages/tgui/interfaces/PortableGenerator.js
+++ b/tgui/packages/tgui/interfaces/PortableGenerator.js
@@ -1,43 +1,47 @@
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../components';
+import {
+  Box,
+  Button,
+  LabeledList,
+  NoticeBox,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const PortableGenerator = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    stack_percent,
-  } = data;
-  const stackPercentState = (
-    stack_percent > 50 && 'good'
-    || stack_percent > 15 && 'average'
-    || 'bad'
-  );
+  const { stack_percent } = data;
+  const stackPercentState =
+    (stack_percent > 50 && 'good') ||
+    (stack_percent > 15 && 'average') ||
+    'bad';
   return (
-    <Window
-      width={450}
-      height={340}>
+    <Window width={450} height={340}>
       <Window.Content scrollable>
-        {!data.anchored && (
-          <NoticeBox>Generator not anchored.</NoticeBox>
-        )}
+        {!data.anchored && <NoticeBox>Generator not anchored.</NoticeBox>}
         <Section title="Status">
           <LabeledList>
             <LabeledList.Item label="Power switch">
               <Button
                 icon={data.active ? 'power-off' : 'times'}
                 onClick={() => act('toggle_power')}
-                disabled={!data.ready_to_boot}>
+                disabled={!data.ready_to_boot}
+              >
                 {data.active ? 'On' : 'Off'}
               </Button>
             </LabeledList.Item>
             <LabeledList.Item label={data.sheet_name + ' sheets'}>
-              <Box inline color={stackPercentState}>{data.sheets}</Box>
+              <Box inline color={stackPercentState}>
+                {data.sheets}
+              </Box>
               {data.sheets >= 1 && (
                 <Button
                   ml={1}
                   icon="eject"
                   disabled={data.active}
-                  onClick={() => act('eject')}>
+                  onClick={() => act('eject')}
+                >
                   Eject
                 </Button>
               )}
@@ -49,17 +53,22 @@ export const PortableGenerator = (props, context) => {
                   good: [0.1, Infinity],
                   average: [0.01, 0.1],
                   bad: [-Infinity, 0.01],
-                }} />
+                }}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Heat level">
               {data.current_heat < 100 ? (
-                <Box inline color="good">Nominal</Box>
+                <Box inline color="good">
+                  Nominal
+                </Box>
+              ) : data.current_heat < 200 ? (
+                <Box inline color="average">
+                  Caution
+                </Box>
               ) : (
-                data.current_heat < 200 ? (
-                  <Box inline color="average">Caution</Box>
-                ) : (
-                  <Box inline color="bad">DANGER</Box>
-                )
+                <Box inline color="bad">
+                  DANGER
+                </Box>
               )}
             </LabeledList.Item>
           </LabeledList>
@@ -70,20 +79,16 @@ export const PortableGenerator = (props, context) => {
               {data.power_output}
             </LabeledList.Item>
             <LabeledList.Item label="Adjust output">
-              <Button
-                icon="minus"
-                onClick={() => act('lower_power')}>
+              <Button icon="minus" onClick={() => act('lower_power')}>
                 {data.power_generated}
               </Button>
-              <Button
-                icon="plus"
-                onClick={() => act('higher_power')}>
+              <Button icon="plus" onClick={() => act('higher_power')}>
                 {data.power_generated}
               </Button>
             </LabeledList.Item>
             <LabeledList.Item label="Power available">
               <Box inline color={!data.connected && 'bad'}>
-                {data.connected ? data.power_available : "Unconnected"}
+                {data.connected ? data.power_available : 'Unconnected'}
               </Box>
             </LabeledList.Item>
           </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/PortablePump.js b/tgui/packages/tgui/interfaces/PortablePump.js
index 874a6588bf03..f76e1a0feb35 100644
--- a/tgui/packages/tgui/interfaces/PortablePump.js
+++ b/tgui/packages/tgui/interfaces/PortablePump.js
@@ -14,20 +14,20 @@ export const PortablePump = (props, context) => {
     max_pressure,
   } = data;
   return (
-    <Window
-      width={300}
-      height={315}>
+    <Window width={300} height={315}>
       <Window.Content>
         <PortableBasicInfo />
         <Section
           title="Pump"
-          buttons={(
+          buttons={
             <Button
               icon={direction ? 'sign-in-alt' : 'sign-out-alt'}
               content={direction ? 'In' : 'Out'}
               selected={direction}
-              onClick={() => act('direction')} />
-          )}>
+              onClick={() => act('direction')}
+            />
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Output">
               <NumberInput
@@ -37,29 +37,41 @@ export const PortablePump = (props, context) => {
                 minValue={min_pressure}
                 maxValue={max_pressure}
                 step={10}
-                onChange={(e, value) => act('pressure', {
-                  pressure: value,
-                })} />
+                onChange={(e, value) =>
+                  act('pressure', {
+                    pressure: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Presets">
               <Button
                 icon="minus"
                 disabled={target_pressure === min_pressure}
-                onClick={() => act('pressure', {
-                  pressure: 'min',
-                })} />
+                onClick={() =>
+                  act('pressure', {
+                    pressure: 'min',
+                  })
+                }
+              />
               <Button
                 icon="sync"
                 disabled={target_pressure === default_pressure}
-                onClick={() => act('pressure', {
-                  pressure: 'reset',
-                })} />
+                onClick={() =>
+                  act('pressure', {
+                    pressure: 'reset',
+                  })
+                }
+              />
               <Button
                 icon="plus"
                 disabled={target_pressure === max_pressure}
-                onClick={() => act('pressure', {
-                  pressure: 'max',
-                })} />
+                onClick={() =>
+                  act('pressure', {
+                    pressure: 'max',
+                  })
+                }
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/PortableScrubber.js b/tgui/packages/tgui/interfaces/PortableScrubber.js
index a239b3f42713..a18a5c431685 100644
--- a/tgui/packages/tgui/interfaces/PortableScrubber.js
+++ b/tgui/packages/tgui/interfaces/PortableScrubber.js
@@ -8,21 +8,22 @@ export const PortableScrubber = (props, context) => {
   const { act, data } = useBackend(context);
   const filter_types = data.filter_types || [];
   return (
-    <Window
-      width={320}
-      height={396}>
+    <Window width={320} height={396}>
       <Window.Content>
         <PortableBasicInfo />
         <Section title="Filters">
-          {filter_types.map(filter => (
+          {filter_types.map((filter) => (
             <Button
               key={filter.id}
               icon={filter.enabled ? 'check-square-o' : 'square-o'}
               content={getGasLabel(filter.gas_id, filter.gas_name)}
               selected={filter.enabled}
-              onClick={() => act('toggle_filter', {
-                val: filter.gas_id,
-              })} />
+              onClick={() =>
+                act('toggle_filter', {
+                  val: filter.gas_id,
+                })
+              }
+            />
           ))}
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/PortableTurret.js b/tgui/packages/tgui/interfaces/PortableTurret.js
index cbfafca5c578..a2cdab07df96 100644
--- a/tgui/packages/tgui/interfaces/PortableTurret.js
+++ b/tgui/packages/tgui/interfaces/PortableTurret.js
@@ -20,9 +20,7 @@ export const PortableTurret = (props, context) => {
     lasertag_turret,
   } = data;
   return (
-    <Window
-      width={310}
-      height={lasertag_turret ? 110 : 292}>
+    <Window width={310} height={lasertag_turret ? 110 : 292}>
       <Window.Content>
         <NoticeBox>
           Swipe an ID card to {locked ? 'unlock' : 'lock'} this interface.
@@ -32,72 +30,88 @@ export const PortableTurret = (props, context) => {
             <LabeledList>
               <LabeledList.Item
                 label="Status"
-                buttons={!lasertag_turret && (!!allow_manual_control
-                  || (!!manual_control && !!silicon_user)) && (
-                  <Button
-                    icon={manual_control ? "wifi" : "terminal"}
-                    content={manual_control
-                      ? "Remotely Controlled"
-                      : "Manual Control"}
-                    disabled={manual_control}
-                    color="bad"
-                    onClick={() => act('manual')} />
-                )}>
+                buttons={
+                  !lasertag_turret &&
+                  (!!allow_manual_control ||
+                    (!!manual_control && !!silicon_user)) && (
+                    <Button
+                      icon={manual_control ? 'wifi' : 'terminal'}
+                      content={
+                        manual_control
+                          ? 'Remotely Controlled'
+                          : 'Manual Control'
+                      }
+                      disabled={manual_control}
+                      color="bad"
+                      onClick={() => act('manual')}
+                    />
+                  )
+                }
+              >
                 <Button
                   icon={on ? 'power-off' : 'times'}
                   content={on ? 'On' : 'Off'}
                   selected={on}
                   disabled={locked}
-                  onClick={() => act('power')} />
+                  onClick={() => act('power')}
+                />
               </LabeledList.Item>
             </LabeledList>
           </Section>
           {!lasertag_turret && (
             <Section
               title="Target Settings"
-              buttons={(
+              buttons={
                 <Button.Checkbox
                   checked={!neutralize_heads}
                   content="Ignore Command"
                   disabled={locked}
-                  onClick={() => act('shootheads')} />
-              )}>
+                  onClick={() => act('shootheads')}
+                />
+              }
+            >
               <Button.Checkbox
                 fluid
                 checked={neutralize_all}
                 content="Non-Security and Non-Command"
                 disabled={locked}
-                onClick={() => act('shootall')} />
+                onClick={() => act('shootall')}
+              />
               <Button.Checkbox
                 fluid
                 checked={check_weapons}
                 content="Unauthorized Weapons"
                 disabled={locked}
-                onClick={() => act('authweapon')} />
+                onClick={() => act('authweapon')}
+              />
               <Button.Checkbox
                 fluid
                 checked={neutralize_unidentified}
                 content="Unidentified Life Signs"
                 disabled={locked}
-                onClick={() => act('checkxenos')} />
+                onClick={() => act('checkxenos')}
+              />
               <Button.Checkbox
                 fluid
                 checked={neutralize_nonmindshielded}
                 content="Non-Mindshielded"
                 disabled={locked}
-                onClick={() => act('checkloyal')} />
+                onClick={() => act('checkloyal')}
+              />
               <Button.Checkbox
                 fluid
                 checked={neutralize_criminals}
                 content="Wanted Criminals"
                 disabled={locked}
-                onClick={() => act('shootcriminals')} />
+                onClick={() => act('shootcriminals')}
+              />
               <Button.Checkbox
                 fluid
                 checked={neutralize_cyborgs}
                 content="Cyborgs"
                 disabled={locked}
-                onClick={() => act('shootborgs')} />
+                onClick={() => act('shootborgs')}
+              />
             </Section>
           )}
         </>
diff --git a/tgui/packages/tgui/interfaces/PortraitPicker.js b/tgui/packages/tgui/interfaces/PortraitPicker.js
index 98dce26e5c5c..b38ad2431fa6 100644
--- a/tgui/packages/tgui/interfaces/PortraitPicker.js
+++ b/tgui/packages/tgui/interfaces/PortraitPicker.js
@@ -6,30 +6,21 @@ import { Window } from '../layouts';
 export const PortraitPicker = (props, context) => {
   const { act, data } = useBackend(context);
   const [listIndex, setListIndex] = useLocalState(context, 'listIndex', 0);
-  const {
-    paintings,
-    search_string,
-    search_mode,
-  } = data;
+  const { paintings, search_string, search_mode } = data;
   const got_paintings = !!paintings.length;
-  const current_portrait_title = got_paintings
-    && paintings[listIndex]["title"];
-  const current_portrait_author = got_paintings
-    && "By " + paintings[listIndex]["creator"];
-  const current_portrait_asset_name = got_paintings
-    && "paintings" + "_" + paintings[listIndex]["md5"];
+  const current_portrait_title = got_paintings && paintings[listIndex]['title'];
+  const current_portrait_author =
+    got_paintings && 'By ' + paintings[listIndex]['creator'];
+  const current_portrait_asset_name =
+    got_paintings && 'paintings' + '_' + paintings[listIndex]['md5'];
   return (
-    <Window
-      theme="ntos"
-      title="Portrait Picker"
-      width={400}
-      height={406}>
+    <Window theme="ntos" title="Portrait Picker" width={400} height={406}>
       <Window.Content>
         <Flex height="100%" direction="column">
           <Flex.Item mb={1}>
-            <Section
-              title="Search">
-              <Input fluid
+            <Section title="Search">
+              <Input
+                fluid
                 placeholder="Search Paintings..."
                 value={search_string}
                 onChange={(e, value) => {
@@ -37,7 +28,8 @@ export const PortraitPicker = (props, context) => {
                     to_search: value,
                   });
                   setListIndex(0);
-                }} />
+                }}
+              />
               <Button
                 content={search_mode}
                 onClick={() => {
@@ -45,7 +37,8 @@ export const PortraitPicker = (props, context) => {
                   if (search_string) {
                     setListIndex(0);
                   }
-                }} />
+                }}
+              />
             </Section>
           </Flex.Item>
           <Flex.Item mb={1} grow={2}>
@@ -54,7 +47,8 @@ export const PortraitPicker = (props, context) => {
                 height="100%"
                 align="center"
                 justify="center"
-                direction="column">
+                direction="column"
+              >
                 {got_paintings ? (
                   <>
                     <Flex.Item>
@@ -65,14 +59,13 @@ export const PortraitPicker = (props, context) => {
                         style={{
                           'vertical-align': 'middle',
                           '-ms-interpolation-mode': 'nearest-neighbor',
-                        }} />
+                        }}
+                      />
                     </Flex.Item>
                     <Flex.Item className="Section__titleText">
                       {current_portrait_title}
                     </Flex.Item>
-                    <Flex.Item>
-                      {current_portrait_author}
-                    </Flex.Item>
+                    <Flex.Item>{current_portrait_author}</Flex.Item>
                   </>
                 ) : (
                   <Flex.Item className="Section__titleText">
@@ -98,7 +91,7 @@ export const PortraitPicker = (props, context) => {
                       <Button
                         disabled={listIndex === 0}
                         icon="chevron-left"
-                        onClick={() => setListIndex(listIndex-1)}
+                        onClick={() => setListIndex(listIndex - 1)}
                       />
                     </Flex.Item>
                     <Flex.Item grow={3}>
@@ -106,23 +99,25 @@ export const PortraitPicker = (props, context) => {
                         icon="check"
                         content="Select Portrait"
                         disabled={!got_paintings}
-                        onClick={() => act("select", {
-                          selected: paintings[listIndex]["ref"],
-                        })}
+                        onClick={() =>
+                          act('select', {
+                            selected: paintings[listIndex]['ref'],
+                          })
+                        }
                       />
                     </Flex.Item>
                     <Flex.Item grow={1}>
                       <Button
                         icon="chevron-right"
-                        disabled={listIndex >= paintings.length-1}
-                        onClick={() => setListIndex(listIndex+1)}
+                        disabled={listIndex >= paintings.length - 1}
+                        onClick={() => setListIndex(listIndex + 1)}
                       />
                     </Flex.Item>
                     <Flex.Item>
                       <Button
                         icon="angle-double-right"
-                        disabled={listIndex >= paintings.length-1}
-                        onClick={() => setListIndex(paintings.length-1)}
+                        disabled={listIndex >= paintings.length - 1}
+                        onClick={() => setListIndex(paintings.length - 1)}
                       />
                     </Flex.Item>
                   </Flex>
@@ -131,18 +126,17 @@ export const PortraitPicker = (props, context) => {
             </Flex>
             <Flex.Item mt={1}>
               <NoticeBox info>
-                Only the 23x23 or 24x24 canvas size art can be
-                displayed. Make sure you read the warning below
-                before embracing the wide wonderful world of
-                artistic expression!
+                Only the 23x23 or 24x24 canvas size art can be displayed. Make
+                sure you read the warning below before embracing the wide
+                wonderful world of artistic expression!
               </NoticeBox>
             </Flex.Item>
             <Flex.Item>
               <NoticeBox danger>
                 WARNING: While Central Command loves art as much as you do,
                 choosing erotic art will lead to severe consequences.
-                Additionally, Central Command reserves the right to request
-                you change your display portrait, for any reason.
+                Additionally, Central Command reserves the right to request you
+                change your display portrait, for any reason.
               </NoticeBox>
             </Flex.Item>
           </Flex.Item>
diff --git a/tgui/packages/tgui/interfaces/PowerMonitor.js b/tgui/packages/tgui/interfaces/PowerMonitor.js
index 89b1ad94c60a..91844a5ccef1 100644
--- a/tgui/packages/tgui/interfaces/PowerMonitor.js
+++ b/tgui/packages/tgui/interfaces/PowerMonitor.js
@@ -3,21 +3,30 @@ import { flow } from 'common/fp';
 import { toFixed } from 'common/math';
 import { pureComponentHooks } from 'common/react';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Chart, ColorBox, Flex, Icon, LabeledList, ProgressBar, Section, Table } from '../components';
+import {
+  Box,
+  Button,
+  Chart,
+  ColorBox,
+  Flex,
+  Icon,
+  LabeledList,
+  ProgressBar,
+  Section,
+  Table,
+} from '../components';
 import { Window } from '../layouts';
 
 const PEAK_DRAW = 500000;
 
-export const powerRank = str => {
+export const powerRank = (str) => {
   const unit = String(str.split(' ')[1]).toLowerCase();
   return ['w', 'kw', 'mw', 'gw'].indexOf(unit);
 };
 
 export const PowerMonitor = () => {
   return (
-    <Window
-      width={550}
-      height={700}>
+    <Window width={550} height={700}>
       <Window.Content scrollable>
         <PowerMonitorContent />
       </Window.Content>
@@ -28,30 +37,30 @@ export const PowerMonitor = () => {
 export const PowerMonitorContent = (props, context) => {
   const { data } = useBackend(context);
   const { history } = data;
-  const [
-    sortByField,
-    setSortByField,
-  ] = useLocalState(context, 'sortByField', null);
+  const [sortByField, setSortByField] = useLocalState(
+    context,
+    'sortByField',
+    null,
+  );
   const supply = history.supply[history.supply.length - 1] || 0;
   const demand = history.demand[history.demand.length - 1] || 0;
   const supplyData = history.supply.map((value, i) => [i, value]);
   const demandData = history.demand.map((value, i) => [i, value]);
-  const maxValue = Math.max(
-    PEAK_DRAW,
-    ...history.supply,
-    ...history.demand);
-    // Process area data
+  const maxValue = Math.max(PEAK_DRAW, ...history.supply, ...history.demand);
+  // Process area data
   const areas = flow([
     map((area, i) => ({
       ...area,
       // Generate a unique id
       id: area.name + i,
     })),
-    sortByField === 'name' && sortBy(area => area.name),
-    sortByField === 'charge' && sortBy(area => -area.charge),
-    sortByField === 'draw' && sortBy(
-      area => -powerRank(area.load),
-      area => -parseFloat(area.load)),
+    sortByField === 'name' && sortBy((area) => area.name),
+    sortByField === 'charge' && sortBy((area) => -area.charge),
+    sortByField === 'draw' &&
+      sortBy(
+        (area) => -powerRank(area.load),
+        (area) => -parseFloat(area.load),
+      ),
   ])(data.areas);
   return (
     <>
@@ -64,7 +73,8 @@ export const PowerMonitorContent = (props, context) => {
                   value={supply}
                   minValue={0}
                   maxValue={maxValue}
-                  color="teal">
+                  color="teal"
+                >
                   {toFixed(supply / 1000) + ' kW'}
                 </ProgressBar>
               </LabeledList.Item>
@@ -73,7 +83,8 @@ export const PowerMonitorContent = (props, context) => {
                   value={demand}
                   minValue={0}
                   maxValue={maxValue}
-                  color="pink">
+                  color="pink"
+                >
                   {toFixed(demand / 1000) + ' kW'}
                 </ProgressBar>
               </LabeledList.Item>
@@ -88,14 +99,16 @@ export const PowerMonitorContent = (props, context) => {
               rangeX={[0, supplyData.length - 1]}
               rangeY={[0, maxValue]}
               strokeColor="rgba(0, 181, 173, 1)"
-              fillColor="rgba(0, 181, 173, 0.25)" />
+              fillColor="rgba(0, 181, 173, 0.25)"
+            />
             <Chart.Line
               fillPositionedParent
               data={demandData}
               rangeX={[0, demandData.length - 1]}
               rangeY={[0, maxValue]}
               strokeColor="rgba(224, 57, 151, 1)"
-              fillColor="rgba(224, 57, 151, 0.25)" />
+              fillColor="rgba(224, 57, 151, 0.25)"
+            />
           </Section>
         </Flex.Item>
       </Flex>
@@ -107,33 +120,24 @@ export const PowerMonitorContent = (props, context) => {
           <Button.Checkbox
             checked={sortByField === 'name'}
             content="Name"
-            onClick={() => setSortByField(
-              sortByField !== 'name' && 'name'
-            )} />
+            onClick={() => setSortByField(sortByField !== 'name' && 'name')}
+          />
           <Button.Checkbox
             checked={sortByField === 'charge'}
             content="Charge"
-            onClick={() => setSortByField(
-              sortByField !== 'charge' && 'charge'
-            )} />
+            onClick={() => setSortByField(sortByField !== 'charge' && 'charge')}
+          />
           <Button.Checkbox
             checked={sortByField === 'draw'}
             content="Draw"
-            onClick={() => setSortByField(
-              sortByField !== 'draw' && 'draw'
-            )} />
+            onClick={() => setSortByField(sortByField !== 'draw' && 'draw')}
+          />
         </Box>
         <Table>
           <Table.Row header>
-            <Table.Cell>
-              Area
-            </Table.Cell>
-            <Table.Cell collapsing>
-              Charge
-            </Table.Cell>
-            <Table.Cell textAlign="right">
-              Draw
-            </Table.Cell>
+            <Table.Cell>Area</Table.Cell>
+            <Table.Cell collapsing>Charge</Table.Cell>
+            <Table.Cell textAlign="right">Draw</Table.Cell>
             <Table.Cell collapsing title="Equipment">
               Eqp
             </Table.Cell>
@@ -145,16 +149,10 @@ export const PowerMonitorContent = (props, context) => {
             </Table.Cell>
           </Table.Row>
           {areas.map((area, i) => (
-            <tr
-              key={area.id}
-              className="Table__row candystripe">
-              <td>
-                {area.name}
-              </td>
+            <tr key={area.id} className="Table__row candystripe">
+              <td>{area.name}</td>
               <td className="Table__cell text-right text-nowrap">
-                <AreaCharge
-                  charging={area.charging}
-                  charge={area.charge} />
+                <AreaCharge charging={area.charging} charge={area.charge} />
               </td>
               <td className="Table__cell text-right text-nowrap">
                 {area.load}
@@ -176,35 +174,26 @@ export const PowerMonitorContent = (props, context) => {
   );
 };
 
-export const AreaCharge = props => {
+export const AreaCharge = (props) => {
   const { charging, charge } = props;
   return (
     <>
       <Icon
         width="18px"
         textAlign="center"
-        name={(
-          charging === 0 && (
-            charge > 50
-              ? 'battery-half'
-              : 'battery-quarter'
-          )
-          || charging === 1 && 'bolt'
-          || charging === 2 && 'battery-full'
-        )}
-        color={(
-          charging === 0 && (
-            charge > 50
-              ? 'yellow'
-              : 'red'
-          )
-          || charging === 1 && 'yellow'
-          || charging === 2 && 'green'
-        )} />
-      <Box
-        inline
-        width="36px"
-        textAlign="right">
+        name={
+          (charging === 0 &&
+            (charge > 50 ? 'battery-half' : 'battery-quarter')) ||
+          (charging === 1 && 'bolt') ||
+          (charging === 2 && 'battery-full')
+        }
+        color={
+          (charging === 0 && (charge > 50 ? 'yellow' : 'red')) ||
+          (charging === 1 && 'yellow') ||
+          (charging === 2 && 'green')
+        }
+      />
+      <Box inline width="36px" textAlign="right">
         {toFixed(charge) + '%'}
       </Box>
     </>
@@ -213,17 +202,17 @@ export const AreaCharge = props => {
 
 AreaCharge.defaultHooks = pureComponentHooks;
 
-const AreaStatusColorBox = props => {
+const AreaStatusColorBox = (props) => {
   const { status } = props;
   const power = Boolean(status & 2);
   const mode = Boolean(status & 1);
-  const tooltipText = (power ? 'On' : 'Off')
-    + ` [${mode ? 'auto' : 'manual'}]`;
+  const tooltipText = (power ? 'On' : 'Off') + ` [${mode ? 'auto' : 'manual'}]`;
   return (
     <ColorBox
       color={power ? 'good' : 'bad'}
       content={mode ? undefined : 'M'}
-      title={tooltipText} />
+      title={tooltipText}
+    />
   );
 };
 
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/AntagsPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/AntagsPage.tsx
index c12e316c5281..e1db1fe69cdc 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/AntagsPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/AntagsPage.tsx
@@ -1,11 +1,23 @@
-import { binaryInsertWith } from "common/collections";
-import { classes } from "common/react";
-import { useBackend, useLocalState } from "../../backend";
-import { Box, Button, Divider, Flex, Section, Stack, Tooltip } from "../../components";
-import { Antagonist, Category } from "./antagonists/base";
-import { PreferencesMenuData } from "./data";
-
-const requireAntag = require.context("./antagonists/antagonists", false, /.ts$/);
+import { binaryInsertWith } from 'common/collections';
+import { classes } from 'common/react';
+import { useBackend, useLocalState } from '../../backend';
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Section,
+  Stack,
+  Tooltip,
+} from '../../components';
+import { Antagonist, Category } from './antagonists/base';
+import { PreferencesMenuData } from './data';
+
+const requireAntag = require.context(
+  './antagonists/antagonists',
+  false,
+  /.ts$/,
+);
 
 const antagsByCategory = new Map<Category, Antagonist[]>();
 
@@ -17,7 +29,7 @@ const binaryInsertAntag = binaryInsertWith((antag: Antagonist) => {
 
 for (const antagKey of requireAntag.keys()) {
   const antag = requireAntag<{
-    default?: Antagonist,
+    default?: Antagonist;
   }>(antagKey).default;
 
   if (!antag) {
@@ -26,26 +38,25 @@ for (const antagKey of requireAntag.keys()) {
 
   antagsByCategory.set(
     antag.category,
-    binaryInsertAntag(
-      antagsByCategory.get(antag.category) || [],
-      antag,
-    )
+    binaryInsertAntag(antagsByCategory.get(antag.category) || [], antag),
   );
 }
 
-const AntagSelection = (props: {
-  antagonists: Antagonist[],
-  name: string,
-}, context) => {
+const AntagSelection = (
+  props: {
+    antagonists: Antagonist[];
+    name: string;
+  },
+  context,
+) => {
   const { act, data } = useBackend<PreferencesMenuData>(context);
-  const className = "PreferencesMenu__Antags__antagSelection";
+  const className = 'PreferencesMenu__Antags__antagSelection';
 
-  const [predictedState, setPredictedState]
-    = useLocalState(
-      context,
-      "AntagSelection_predictedState",
-      new Set(data.selected_antags),
-    );
+  const [predictedState, setPredictedState] = useLocalState(
+    context,
+    'AntagSelection_predictedState',
+    new Set(data.selected_antags),
+  );
 
   const enableAntags = (antags: string[]) => {
     const newState = new Set(predictedState);
@@ -56,7 +67,7 @@ const AntagSelection = (props: {
 
     setPredictedState(newState);
 
-    act("set_antags", {
+    act('set_antags', {
       antags,
       toggled: true,
     });
@@ -71,81 +82,84 @@ const AntagSelection = (props: {
 
     setPredictedState(newState);
 
-    act("set_antags", {
+    act('set_antags', {
       antags,
       toggled: false,
     });
   };
 
-  const antagonistKeys = props.antagonists.map(antagonist => antagonist.key);
+  const antagonistKeys = props.antagonists.map((antagonist) => antagonist.key);
 
   return (
-    <Section title={props.name} buttons={(
-      <>
-        <Button
-          color="good"
-          onClick={() => enableAntags(antagonistKeys)}
-        >
-          Enable All
-        </Button>
-
-        <Button
-          color="bad"
-          onClick={() => disableAntags(antagonistKeys)}
-        >
-          Disable All
-        </Button>
-      </>
-    )}>
+    <Section
+      title={props.name}
+      buttons={
+        <>
+          <Button color="good" onClick={() => enableAntags(antagonistKeys)}>
+            Enable All
+          </Button>
+
+          <Button color="bad" onClick={() => disableAntags(antagonistKeys)}>
+            Disable All
+          </Button>
+        </>
+      }
+    >
       <Flex className={className} align="flex-end" wrap>
-        {props.antagonists.map(antagonist => {
-          const isBanned = data.antag_bans
-            && data.antag_bans.indexOf(antagonist.key) !== -1;
+        {props.antagonists.map((antagonist) => {
+          const isBanned =
+            data.antag_bans && data.antag_bans.indexOf(antagonist.key) !== -1;
 
-          const daysLeft
-            = (data.antag_days_left && data.antag_days_left[antagonist.key])
-              || 0;
+          const daysLeft =
+            (data.antag_days_left && data.antag_days_left[antagonist.key]) || 0;
 
           return (
             <Flex.Item
               className={classes([
                 `${className}__antagonist`,
                 `${className}__antagonist--${
-                  (isBanned || daysLeft > 0)
-                    ? "banned"
-                    : predictedState.has(antagonist.key) ? "on" : "off"
+                  isBanned || daysLeft > 0
+                    ? 'banned'
+                    : predictedState.has(antagonist.key)
+                      ? 'on'
+                      : 'off'
                 }`,
               ])}
               key={antagonist.key}
             >
               <Stack align="center" vertical>
-                <Stack.Item style={{
-                  "font-weight": "bold",
-                  "margin-top": "auto",
-                  "max-width": "100px",
-                  "text-align": "center",
-                }}>
+                <Stack.Item
+                  style={{
+                    'font-weight': 'bold',
+                    'margin-top': 'auto',
+                    'max-width': '100px',
+                    'text-align': 'center',
+                  }}
+                >
                   {antagonist.name}
                 </Stack.Item>
 
                 <Stack.Item align="center">
-                  <Tooltip content={
-                    isBanned
-                      ? `You are banned from ${antagonist.name}.`
-                      : antagonist.description.map((text, index) => {
-                        return (
-                          <div key={antagonist.key + index}>
-                            {text}
-                            {
-                              index !== antagonist.description.length - 1
-                              && <Divider />
-                            }
-                          </div>
-                        );
-                      })
-                  } position="bottom">
+                  <Tooltip
+                    content={
+                      isBanned
+                        ? `You are banned from ${antagonist.name}.`
+                        : antagonist.description.map((text, index) => {
+                            return (
+                              <div key={antagonist.key + index}>
+                                {text}
+                                {index !==
+                                  antagonist.description.length - 1 && (
+                                  <Divider />
+                                )}
+                              </div>
+                            );
+                          })
+                    }
+                    position="bottom"
+                  >
                     <Box
-                      className={"antagonist-icon-parent"}
+                      className={'antagonist-icon-parent'}
                       onClick={() => {
                         if (isBanned) {
                           return;
@@ -158,15 +172,15 @@ const AntagSelection = (props: {
                         }
                       }}
                     >
-                      <Box className={classes([
-                        "antagonists96x96",
-                        antagonist.key,
-                        "antagonist-icon",
-                      ])} />
-
-                      {isBanned && (
-                        <Box className="antagonist-banned-slash" />
-                      )}
+                      <Box
+                        className={classes([
+                          'antagonists96x96',
+                          antagonist.key,
+                          'antagonist-icon',
+                        ])}
+                      />
+
+                      {isBanned && <Box className="antagonist-banned-slash" />}
 
                       {daysLeft > 0 && (
                         <Box className="antagonist-days-left">
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx
index f189d47a77f0..108ab0ac8058 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx
@@ -1,14 +1,14 @@
-import { exhaustiveCheck } from "common/exhaustive";
-import { useBackend, useLocalState } from "../../backend";
-import { Stack, Dropdown, Flex } from "../../components";
-import { Window } from "../../layouts";
-import { PreferencesMenuData } from "./data";
-import { PageButton } from "./PageButton";
-import { AntagsPage } from "./AntagsPage";
-import { JobsPage } from "./JobsPage";
-import { MainPage } from "./MainPage";
-import { SpeciesPage } from "./SpeciesPage";
-import { QuirksPage } from "./QuirksPage";
+import { exhaustiveCheck } from 'common/exhaustive';
+import { useBackend, useLocalState } from '../../backend';
+import { Stack, Dropdown, Flex } from '../../components';
+import { Window } from '../../layouts';
+import { PreferencesMenuData } from './data';
+import { PageButton } from './PageButton';
+import { AntagsPage } from './AntagsPage';
+import { JobsPage } from './JobsPage';
+import { MainPage } from './MainPage';
+import { SpeciesPage } from './SpeciesPage';
+import { QuirksPage } from './QuirksPage';
 
 enum Page {
   Antags,
@@ -19,9 +19,9 @@ enum Page {
 }
 
 const CharacterProfiles = (props: {
-  activeSlot: number,
-  onClick: (index: number) => void,
-  profiles: (string | null)[],
+  activeSlot: number;
+  onClick: (index: number) => void;
+  profiles: (string | null)[];
 }) => {
   const { profiles, activeSlot, onClick } = props;
 
@@ -47,7 +47,11 @@ const CharacterProfiles = (props: {
 export const CharacterPreferenceWindow = (props, context) => {
   const { act, data } = useBackend<PreferencesMenuData>(context);
 
-  const [currentPage, setCurrentPage] = useLocalState(context, "currentPage", Page.Main);
+  const [currentPage, setCurrentPage] = useLocalState(
+    context,
+    'currentPage',
+    Page.Main,
+  );
 
   let pageContents;
 
@@ -59,15 +63,15 @@ export const CharacterPreferenceWindow = (props, context) => {
       pageContents = <JobsPage />;
       break;
     case Page.Main:
-      pageContents = (<MainPage
-        openSpecies={() => setCurrentPage(Page.Species)}
-      />);
+      pageContents = (
+        <MainPage openSpecies={() => setCurrentPage(Page.Species)} />
+      );
 
       break;
     case Page.Species:
-      pageContents = (<SpeciesPage
-        closeSpecies={() => setCurrentPage(Page.Main)}
-      />);
+      pageContents = (
+        <SpeciesPage closeSpecies={() => setCurrentPage(Page.Main)} />
+      );
 
       break;
     case Page.Quirks:
@@ -90,7 +94,7 @@ export const CharacterPreferenceWindow = (props, context) => {
             <CharacterProfiles
               activeSlot={data.active_slot - 1}
               onClick={(slot) => {
-                act("change_slot", {
+                act('change_slot', {
                   slot: slot + 1,
                 });
               }}
@@ -129,7 +133,6 @@ export const CharacterPreferenceWindow = (props, context) => {
                     Fun fact: This isn't "Jobs" so that it intentionally
                     catches your eyes, because it's really important!
                   */}
-
                   Occupations
                 </PageButton>
               </Stack.Item>
@@ -158,9 +161,7 @@ export const CharacterPreferenceWindow = (props, context) => {
 
           <Stack.Divider />
 
-          <Stack.Item>
-            {pageContents}
-          </Stack.Item>
+          <Stack.Item>{pageContents}</Stack.Item>
         </Stack>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreview.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreview.tsx
index ab27d2fe2f54..71622d4937ee 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreview.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreview.tsx
@@ -1,15 +1,14 @@
-import { ByondUi } from "../../components";
+import { ByondUi } from '../../components';
 
-export const CharacterPreview = (props: {
-  height: string,
-  id: string,
-}) => {
-  return (<ByondUi
-    width="220px"
-    height={props.height}
-    params={{
-      id: props.id,
-      type: "map",
-    }}
-  />);
+export const CharacterPreview = (props: { height: string; id: string }) => {
+  return (
+    <ByondUi
+      width="220px"
+      height={props.height}
+      params={{
+        id: props.id,
+        type: 'map',
+      }}
+    />
+  );
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/GamePreferenceWindow.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/GamePreferenceWindow.tsx
index 4bddd3305edb..863ffa6426b0 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/GamePreferenceWindow.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/GamePreferenceWindow.tsx
@@ -1,23 +1,25 @@
-import { Stack } from "../../components";
-import { Window } from "../../layouts";
-import { KeybindingsPage } from "./KeybindingsPage";
-import { GamePreferencesPage } from "./GamePreferencesPage";
-import { PageButton } from "./PageButton";
-import { useBackend, useLocalState } from "../../backend";
-import { GamePreferencesSelectedPage, PreferencesMenuData } from "./data";
-import { exhaustiveCheck } from "common/exhaustive";
+import { Stack } from '../../components';
+import { Window } from '../../layouts';
+import { KeybindingsPage } from './KeybindingsPage';
+import { GamePreferencesPage } from './GamePreferencesPage';
+import { PageButton } from './PageButton';
+import { useBackend, useLocalState } from '../../backend';
+import { GamePreferencesSelectedPage, PreferencesMenuData } from './data';
+import { exhaustiveCheck } from 'common/exhaustive';
 
-export const GamePreferenceWindow = (props: {
-  startingPage?: GamePreferencesSelectedPage,
-}, context) => {
+export const GamePreferenceWindow = (
+  props: {
+    startingPage?: GamePreferencesSelectedPage;
+  },
+  context,
+) => {
   const { act, data } = useBackend<PreferencesMenuData>(context);
 
-  const [currentPage, setCurrentPage]
-    = useLocalState(
-      context,
-      "currentPage",
-      props.startingPage ?? GamePreferencesSelectedPage.Settings,
-    );
+  const [currentPage, setCurrentPage] = useLocalState(
+    context,
+    'currentPage',
+    props.startingPage ?? GamePreferencesSelectedPage.Settings,
+  );
 
   let pageContents;
 
@@ -32,13 +34,8 @@ export const GamePreferenceWindow = (props: {
       exhaustiveCheck(currentPage);
   }
 
-
   return (
-    <Window
-      title="Game Preferences"
-      width={920}
-      height={770}
-    >
+    <Window title="Game Preferences" width={920} height={770}>
       <Window.Content>
         <Stack vertical fill>
           <Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/GamePreferencesPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/GamePreferencesPage.tsx
index 7e0245ed7661..c1c3c3bc4358 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/GamePreferencesPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/GamePreferencesPage.tsx
@@ -1,15 +1,15 @@
-import { binaryInsertWith, sortBy } from "common/collections";
-import { InfernoNode } from "inferno";
-import { useBackend } from "../../backend";
-import { Box, Flex, Tooltip } from "../../components";
-import { PreferencesMenuData } from "./data";
-import features from "./preferences/features";
-import { FeatureValueInput } from "./preferences/features/base";
-import { TabbedMenu } from "./TabbedMenu";
+import { binaryInsertWith, sortBy } from 'common/collections';
+import { InfernoNode } from 'inferno';
+import { useBackend } from '../../backend';
+import { Box, Flex, Tooltip } from '../../components';
+import { PreferencesMenuData } from './data';
+import features from './preferences/features';
+import { FeatureValueInput } from './preferences/features/base';
+import { TabbedMenu } from './TabbedMenu';
 
 type PreferenceChild = {
-  name: string,
-  children: InfernoNode,
+  name: string;
+  children: InfernoNode;
 };
 
 const binaryInsertPreference = binaryInsertWith<PreferenceChild>(
@@ -24,7 +24,7 @@ export const GamePreferencesPage = (props, context) => {
   const gamePreferences: Record<string, PreferenceChild[]> = {};
 
   for (const [featureId, value] of Object.entries(
-    data.character_preferences.game_preferences
+    data.character_preferences.game_preferences,
   )) {
     const feature = features[featureId];
 
@@ -32,9 +32,12 @@ export const GamePreferencesPage = (props, context) => {
 
     if (feature?.description) {
       nameInner = (
-        <Box as="span" style={{
-          "border-bottom": "2px dotted rgba(255, 255, 255, 0.8)",
-        }}>
+        <Box
+          as="span"
+          style={{
+            'border-bottom': '2px dotted rgba(255, 255, 255, 0.8)',
+          }}
+        >
           {nameInner}
         </Box>
       );
@@ -59,12 +62,14 @@ export const GamePreferencesPage = (props, context) => {
         {name}
 
         <Flex.Item grow={1} basis={0}>
-          {feature && <FeatureValueInput
-            feature={feature}
-            featureId={featureId}
-            value={value}
-            act={act}
-          /> || (
+          {(feature && (
+            <FeatureValueInput
+              feature={feature}
+              featureId={featureId}
+              value={value}
+              act={act}
+            />
+          )) || (
             <Box as="b" color="red">
               ...is not filled out properly!!!
             </Box>
@@ -78,18 +83,19 @@ export const GamePreferencesPage = (props, context) => {
       children: child,
     };
 
-    const category = feature?.category || "ERROR";
+    const category = feature?.category || 'ERROR';
 
-    gamePreferences[category]
-      = binaryInsertPreference(gamePreferences[category] || [], entry);
+    gamePreferences[category] = binaryInsertPreference(
+      gamePreferences[category] || [],
+      entry,
+    );
   }
 
   const gamePreferenceEntries: [string, InfernoNode][] = sortByName(
-    Object.entries(gamePreferences)
-  ).map(
-    ([category, preferences]) => {
-      return [category, preferences.map(entry => entry.children)];
-    });
+    Object.entries(gamePreferences),
+  ).map(([category, preferences]) => {
+    return [category, preferences.map((entry) => entry.children)];
+  });
 
   return (
     <TabbedMenu
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/JobsPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/JobsPage.tsx
index 33b2b9d41d1b..63a577b2c4aa 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/JobsPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/JobsPage.tsx
@@ -1,28 +1,32 @@
-import { sortBy } from "common/collections";
-import { classes } from "common/react";
-import { InfernoNode, SFC } from "inferno";
-import { useBackend } from "../../backend";
-import { Box, Button, Dropdown, Stack, Tooltip } from "../../components";
-import { logger } from "../../logging";
-import { createSetPreference, Job, JoblessRole, JobPriority, PreferencesMenuData } from "./data";
-import { ServerPreferencesFetcher } from "./ServerPreferencesFetcher";
-
-const sortJobs = (
-  entries: [string, Job][],
-  head?: string,
-) => sortBy<[string, Job]>(
-  ([key, _]) => key === head ? -1 : 1,
-  ([key, _]) => key,
-)(entries);
-
-const PRIORITY_BUTTON_SIZE = "18px";
+import { sortBy } from 'common/collections';
+import { classes } from 'common/react';
+import { InfernoNode, SFC } from 'inferno';
+import { useBackend } from '../../backend';
+import { Box, Button, Dropdown, Stack, Tooltip } from '../../components';
+import { logger } from '../../logging';
+import {
+  createSetPreference,
+  Job,
+  JoblessRole,
+  JobPriority,
+  PreferencesMenuData,
+} from './data';
+import { ServerPreferencesFetcher } from './ServerPreferencesFetcher';
+
+const sortJobs = (entries: [string, Job][], head?: string) =>
+  sortBy<[string, Job]>(
+    ([key, _]) => (key === head ? -1 : 1),
+    ([key, _]) => key,
+  )(entries);
+
+const PRIORITY_BUTTON_SIZE = '18px';
 
 const PriorityButton = (props: {
-  name: string,
-  color: string,
-  modifier?: string,
-  enabled: boolean,
-  onClick: () => void,
+  name: string;
+  color: string;
+  modifier?: string;
+  enabled: boolean;
+  onClick: () => void;
 }) => {
   const className = `PreferencesMenu__Jobs__departments__priority`;
 
@@ -33,7 +37,7 @@ const PriorityButton = (props: {
         className,
         props.modifier && `${className}--${props.modifier}`,
       ])}
-      color={props.enabled ? props.color : "white"}
+      color={props.enabled ? props.color : 'white'}
       circular
       onClick={props.onClick}
       tooltip={props.name}
@@ -49,140 +53,136 @@ type CreateSetPriority = (priority: JobPriority | null) => () => void;
 
 const createSetPriorityCache: Record<string, CreateSetPriority> = {};
 
-const createCreateSetPriorityFromName
-  = (context, jobName: string): CreateSetPriority => {
-    if (createSetPriorityCache[jobName] !== undefined) {
-      return createSetPriorityCache[jobName];
-    }
-
-    const perPriorityCache: Map<JobPriority | null, () => void> = new Map();
+const createCreateSetPriorityFromName = (
+  context,
+  jobName: string,
+): CreateSetPriority => {
+  if (createSetPriorityCache[jobName] !== undefined) {
+    return createSetPriorityCache[jobName];
+  }
 
-    const createSetPriority = (priority: JobPriority | null) => {
-      const existingCallback = perPriorityCache.get(priority);
-      if (existingCallback !== undefined) {
-        return existingCallback;
-      }
+  const perPriorityCache: Map<JobPriority | null, () => void> = new Map();
 
-      const setPriority = () => {
-        const { act } = useBackend<PreferencesMenuData>(context);
+  const createSetPriority = (priority: JobPriority | null) => {
+    const existingCallback = perPriorityCache.get(priority);
+    if (existingCallback !== undefined) {
+      return existingCallback;
+    }
 
-        act("set_job_preference", {
-          job: jobName,
-          level: priority,
-        });
-      };
+    const setPriority = () => {
+      const { act } = useBackend<PreferencesMenuData>(context);
 
-      perPriorityCache.set(priority, setPriority);
-      return setPriority;
+      act('set_job_preference', {
+        job: jobName,
+        level: priority,
+      });
     };
 
-    createSetPriorityCache[jobName] = createSetPriority;
-
-    return createSetPriority;
+    perPriorityCache.set(priority, setPriority);
+    return setPriority;
   };
 
+  createSetPriorityCache[jobName] = createSetPriority;
+
+  return createSetPriority;
+};
+
 const PriorityHeaders = () => {
-  const className = "PreferencesMenu__Jobs__PriorityHeader";
+  const className = 'PreferencesMenu__Jobs__PriorityHeader';
 
   return (
     <Stack>
       <Stack.Item grow />
 
-      <Stack.Item className={className}>
-        Off
-      </Stack.Item>
+      <Stack.Item className={className}>Off</Stack.Item>
 
-      <Stack.Item className={className}>
-        Low
-      </Stack.Item>
+      <Stack.Item className={className}>Low</Stack.Item>
 
-      <Stack.Item className={className}>
-        Medium
-      </Stack.Item>
+      <Stack.Item className={className}>Medium</Stack.Item>
 
-      <Stack.Item className={className}>
-        High
-      </Stack.Item>
+      <Stack.Item className={className}>High</Stack.Item>
     </Stack>
   );
 };
 
 const PriorityButtons = (props: {
-  createSetPriority: CreateSetPriority,
-  isOverflow: boolean,
-  priority: JobPriority,
+  createSetPriority: CreateSetPriority;
+  isOverflow: boolean;
+  priority: JobPriority;
 }) => {
   const { createSetPriority, isOverflow, priority } = props;
 
   return (
-    <Box inline // PARIAH EDIT
+    <Box
+      inline // PARIAH EDIT
       style={{
-        "align-items": "center",
-        "height": "100%",
-        "textAlign": "end", // PARIAH EDIT
-        "padding": "0.3em", // PARIAH EDIT
+        'align-items': 'center',
+        height: '100%',
+        textAlign: 'end', // PARIAH EDIT
+        padding: '0.3em', // PARIAH EDIT
       }}
     >
-      {isOverflow
-        ? (
-          <>
-            <PriorityButton
-              name="Off"
-              modifier="off"
-              color="light-grey"
-              enabled={!priority}
-              onClick={createSetPriority(null)}
-            />
-
-            <PriorityButton
-              name="On"
-              color="green"
-              enabled={!!priority}
-              onClick={createSetPriority(JobPriority.High)}
-            />
-          </>
-        )
-        : (
-          <>
-            <PriorityButton
-              name="Off"
-              modifier="off"
-              color="light-grey"
-              enabled={!priority}
-              onClick={createSetPriority(null)}
-            />
-
-            <PriorityButton
-              name="Low"
-              color="red"
-              enabled={priority === JobPriority.Low}
-              onClick={createSetPriority(JobPriority.Low)}
-            />
-
-            <PriorityButton
-              name="Medium"
-              color="yellow"
-              enabled={priority === JobPriority.Medium}
-              onClick={createSetPriority(JobPriority.Medium)}
-            />
-
-            <PriorityButton
-              name="High"
-              color="green"
-              enabled={priority === JobPriority.High}
-              onClick={createSetPriority(JobPriority.High)}
-            />
-          </>
-        )}
+      {isOverflow ? (
+        <>
+          <PriorityButton
+            name="Off"
+            modifier="off"
+            color="light-grey"
+            enabled={!priority}
+            onClick={createSetPriority(null)}
+          />
+
+          <PriorityButton
+            name="On"
+            color="green"
+            enabled={!!priority}
+            onClick={createSetPriority(JobPriority.High)}
+          />
+        </>
+      ) : (
+        <>
+          <PriorityButton
+            name="Off"
+            modifier="off"
+            color="light-grey"
+            enabled={!priority}
+            onClick={createSetPriority(null)}
+          />
+
+          <PriorityButton
+            name="Low"
+            color="red"
+            enabled={priority === JobPriority.Low}
+            onClick={createSetPriority(JobPriority.Low)}
+          />
+
+          <PriorityButton
+            name="Medium"
+            color="yellow"
+            enabled={priority === JobPriority.Medium}
+            onClick={createSetPriority(JobPriority.Medium)}
+          />
+
+          <PriorityButton
+            name="High"
+            color="green"
+            enabled={priority === JobPriority.High}
+            onClick={createSetPriority(JobPriority.High)}
+          />
+        </>
+      )}
     </Box> // PARIAH EDIT
   );
 };
 
-const JobRow = (props: {
-  className?: string,
-  job: Job,
-  name: string,
-}, context) => {
+const JobRow = (
+  props: {
+    className?: string;
+    job: Job;
+    name: string;
+  },
+  context,
+) => {
   const { data } = useBackend<PreferencesMenuData>(context);
   const { className, job, name } = props;
 
@@ -194,13 +194,14 @@ const JobRow = (props: {
   const { act } = useBackend<PreferencesMenuData>(context);
   // PARIAH EDIT END
 
-  const experienceNeeded = data.job_required_experience
-    && data.job_required_experience[name];
+  const experienceNeeded =
+    data.job_required_experience && data.job_required_experience[name];
   const daysLeft = data.job_days_left ? data.job_days_left[name] : 0;
 
   // PARIAH EDIT
   const alt_title_selected = data.job_alt_titles[name]
-    ? data.job_alt_titles[name] : name;
+    ? data.job_alt_titles[name]
+    : name;
   // PARIAH EDIT END
 
   let rightSide: InfernoNode;
@@ -220,7 +221,7 @@ const JobRow = (props: {
     rightSide = (
       <Stack align="center" height="100%" pr={1}>
         <Stack.Item grow textAlign="right">
-          <b>{daysLeft}</b> day{daysLeft === 1 ? "" : "s"} left
+          <b>{daysLeft}</b> day{daysLeft === 1 ? '' : 's'} left
         </Stack.Item>
       </Stack>
     );
@@ -233,31 +234,50 @@ const JobRow = (props: {
       </Stack>
     );
   } else {
-    rightSide = (<PriorityButtons
-      createSetPriority={createSetPriority}
-      isOverflow={isOverflow}
-      priority={priority}
-    />);
+    rightSide = (
+      <PriorityButtons
+        createSetPriority={createSetPriority}
+        isOverflow={isOverflow}
+        priority={priority}
+      />
+    );
   }
   return (
-    <Box className={className} style={{ // PARIAH EDIT
-      "margin-top": 0,
-    }}>
+    <Box
+      className={className}
+      style={{
+        // PARIAH EDIT
+        'margin-top': 0,
+      }}
+    >
       <Stack align="center" /* PARIAH EDIT */>
         <Tooltip
           content={job.description}
-          position="right"// PARIAH EDIT bottom-start->right
+          position="right" // PARIAH EDIT bottom-start->right
         >
-          <Stack.Item className="job-name" width="50%" style={{
-            "padding-left": "0.3em",
-          }}> { // PARIAH EDIT
-              (!job.alt_titles ? name : <Dropdown
-                width="100%"
-                options={job.alt_titles}
-                displayText={alt_title_selected}
-                onSelected={(value) => act("set_job_title", { job: name, new_title: value })}
-              />)
-            // PARIAH EDIT END
+          <Stack.Item
+            className="job-name"
+            width="50%"
+            style={{
+              'padding-left': '0.3em',
+            }}
+          >
+            {' '}
+            {
+              // PARIAH EDIT
+              !job.alt_titles ? (
+                name
+              ) : (
+                <Dropdown
+                  width="100%"
+                  options={job.alt_titles}
+                  displayText={alt_title_selected}
+                  onSelected={(value) =>
+                    act('set_job_title', { job: name, new_title: value })
+                  }
+                />
+              )
+              // PARIAH EDIT END
             }
           </Stack.Item>
         </Tooltip>
@@ -270,10 +290,10 @@ const JobRow = (props: {
   );
 };
 
-const Department: SFC<{ department: string}> = (props) => {
+const Department: SFC<{ department: string }> = (props) => {
   const { children, department: name } = props;
   const className = `PreferencesMenu__Jobs__departments--${name}`;
-  logger.log(name + ": " + className);
+  logger.log(name + ': ' + className);
 
   return (
     <ServerPreferencesFetcher
@@ -294,24 +314,29 @@ const Department: SFC<{ department: string}> = (props) => {
         }
 
         const jobsForDepartment = sortJobs(
-          Object.entries(jobs).filter(
-            ([_, job]) => job.department === name
-          ),
-          department.head
+          Object.entries(jobs).filter(([_, job]) => job.department === name),
+          department.head,
         );
 
         logger.log(className);
         return (
           <Box>
-            {jobsForDepartment.map(([name, job]) => {
-              logger.log(name);
-              return (<JobRow /* PARIAH EDIT START - Fixing alt titles */
-                className={classes([className, name === department.head && "head"])}
-                key={name}
-                job={job}
-                name={name}
-              />);
-            })/* PARIAH EDIT END */}
+            {
+              jobsForDepartment.map(([name, job]) => {
+                logger.log(name);
+                return (
+                  <JobRow /* PARIAH EDIT START - Fixing alt titles */
+                    className={classes([
+                      className,
+                      name === department.head && 'head',
+                    ])}
+                    key={name}
+                    job={job}
+                    name={name}
+                  />
+                );
+              }) /* PARIAH EDIT END */
+            }
 
             {children}
           </Box>
@@ -325,9 +350,7 @@ const Department: SFC<{ department: string}> = (props) => {
 // All I want is for a gap to pretend to be an empty space.
 // But in order for everything to align, I also need to add the 0.2em padding.
 // But also, we can't be aligned with names that break into multiple lines!
-const Gap = (props: {
-  amount: number,
-}) => {
+const Gap = (props: { amount: number }) => {
   // 0.2em comes from the padding-bottom in the department listing
   return <Box height={`calc(${props.amount}px + 0.2em)`} />;
 };
@@ -352,19 +375,15 @@ const JoblessRoleDropdown = (props, context) => {
   ];
 
   return (
-    <Box
-      position="absolute"
-      right={0}
-      width="30%"
-    >
+    <Box position="absolute" right={0} width="30%">
       <Dropdown
         width="100%"
         selected={selected}
-        onSelected={createSetPreference(act, "joblessrole")}
+        onSelected={createSetPreference(act, 'joblessrole')}
         options={options}
         displayText={
           <Box pr={1}>
-            {options.find(option => option.value === selected)!.displayText}
+            {options.find((option) => option.value === selected)!.displayText}
           </Box>
         }
       />
@@ -399,9 +418,7 @@ export const JobsPage = () => {
                 <Gap amount={12} />
               </Department>
 
-              <Department
-                department="Assistant"
-              />
+              <Department department="Assistant" />
             </Stack.Item>
 
             <Stack.Item mr={1}>
@@ -427,9 +444,7 @@ export const JobsPage = () => {
                 <Gap amount={6} />
               </Department>
 
-              <Department
-                department="Medical"
-              />
+              <Department department="Medical" />
             </Stack.Item>
           </Stack>
         </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/KeybindingsPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/KeybindingsPage.tsx
index 24ad1946d2c4..25f224d21d64 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/KeybindingsPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/KeybindingsPage.tsx
@@ -1,12 +1,19 @@
-import { Component } from "inferno";
-import { Box, Button, KeyListener, Stack, Tooltip, TrackOutsideClicks } from "../../components";
-import { resolveAsset } from "../../assets";
-import { PreferencesMenuData } from "./data";
-import { useBackend } from "../../backend";
-import { range, sortBy } from "common/collections";
-import { KeyEvent } from "../../events";
-import { TabbedMenu } from "./TabbedMenu";
-import { fetchRetry } from "../../http";
+import { Component } from 'inferno';
+import {
+  Box,
+  Button,
+  KeyListener,
+  Stack,
+  Tooltip,
+  TrackOutsideClicks,
+} from '../../components';
+import { resolveAsset } from '../../assets';
+import { PreferencesMenuData } from './data';
+import { useBackend } from '../../backend';
+import { range, sortBy } from 'common/collections';
+import { KeyEvent } from '../../events';
+import { TabbedMenu } from './TabbedMenu';
+import { fetchRetry } from '../../http';
 
 type Keybinding = {
   name: string;
@@ -18,7 +25,7 @@ type Keybindings = Record<string, Record<string, Keybinding>>;
 type KeybindingsPageState = {
   keybindings?: Keybindings;
   lastKeyboardEvent?: KeyboardEvent;
-  selectedKeybindings?: PreferencesMenuData["keybindings"];
+  selectedKeybindings?: PreferencesMenuData['keybindings'];
 
   /**
    * The current hotkey that the user is rebinding.
@@ -29,24 +36,26 @@ type KeybindingsPageState = {
 };
 
 const isStandardKey = (event: KeyboardEvent): boolean => {
-  return event.key !== "Alt"
-    && event.key !== "Control"
-    && event.key !== "Shift"
-    && event.key !== "Esc";
+  return (
+    event.key !== 'Alt' &&
+    event.key !== 'Control' &&
+    event.key !== 'Shift' &&
+    event.key !== 'Esc'
+  );
 };
 
 const KEY_CODE_TO_BYOND: Record<string, string> = {
-  "DEL": "Delete",
-  "DOWN": "South",
-  "END": "Southwest",
-  "HOME": "Northwest",
-  "INSERT": "Insert",
-  "LEFT": "West",
-  "PAGEDOWN": "Southeast",
-  "PAGEUP": "Northeast",
-  "RIGHT": "East",
-  "SPACEBAR": "Space",
-  "UP": "North",
+  DEL: 'Delete',
+  DOWN: 'South',
+  END: 'Southwest',
+  HOME: 'Northwest',
+  INSERT: 'Insert',
+  LEFT: 'West',
+  PAGEDOWN: 'Southeast',
+  PAGEUP: 'Northeast',
+  RIGHT: 'East',
+  SPACEBAR: 'Space',
+  UP: 'North',
 };
 
 /**
@@ -56,33 +65,33 @@ const KEY_CODE_TO_BYOND: Record<string, string> = {
  */
 const DOM_KEY_LOCATION_NUMPAD = 3;
 
-const sortKeybindings = sortBy(
-  ([_, keybinding]: [string, Keybinding]) => {
-    return keybinding.name;
-  });
+const sortKeybindings = sortBy(([_, keybinding]: [string, Keybinding]) => {
+  return keybinding.name;
+});
 
 const sortKeybindingsByCategory = sortBy(
   ([category, _]: [string, Record<string, Keybinding>]) => {
     return category;
-  });
+  },
+);
 
 const formatKeyboardEvent = (event: KeyboardEvent): string => {
-  let text = "";
+  let text = '';
 
   if (event.altKey) {
-    text += "Alt";
+    text += 'Alt';
   }
 
   if (event.ctrlKey) {
-    text += "Ctrl";
+    text += 'Ctrl';
   }
 
   if (event.shiftKey) {
-    text += "Shift";
+    text += 'Shift';
   }
 
   if (event.location === DOM_KEY_LOCATION_NUMPAD) {
-    text += "Numpad";
+    text += 'Numpad';
   }
 
   if (isStandardKey(event)) {
@@ -98,27 +107,26 @@ const moveToBottom = (entries: [string, unknown][], findCategory: string) => {
     entries.splice(
       entries.findIndex(([category, _]) => {
         return category === findCategory;
-      }), 1
-    )[0]
+      }),
+      1,
+    )[0],
   );
 };
 
 class KeybindingButton extends Component<{
-  currentHotkey?: string,
-  onClick?: () => void,
-  typingHotkey?: string,
+  currentHotkey?: string;
+  onClick?: () => void;
+  typingHotkey?: string;
 }> {
   shouldComponentUpdate(nextProps) {
-    return this.props.typingHotkey !== nextProps.typingHotkey
-      || this.props.currentHotkey !== nextProps.currentHotkey;
+    return (
+      this.props.typingHotkey !== nextProps.typingHotkey ||
+      this.props.currentHotkey !== nextProps.currentHotkey
+    );
   }
 
   render() {
-    const {
-      currentHotkey,
-      onClick,
-      typingHotkey,
-    } = this.props;
+    const { currentHotkey, onClick, typingHotkey } = this.props;
 
     const child = (
       <Button
@@ -128,7 +136,7 @@ class KeybindingButton extends Component<{
         onClick={onClick}
         selected={typingHotkey !== undefined}
       >
-        {typingHotkey || currentHotkey || "Unbound"}
+        {typingHotkey || currentHotkey || 'Unbound'}
       </Button>
     );
 
@@ -145,25 +153,23 @@ class KeybindingButton extends Component<{
   }
 }
 
-const KeybindingName = (props: {
-  keybinding: Keybinding,
-}) => {
+const KeybindingName = (props: { keybinding: Keybinding }) => {
   const { keybinding } = props;
 
-  return keybinding.description
-    ? (
-      <Tooltip
-        content={keybinding.description}
-        position="bottom"
+  return keybinding.description ? (
+    <Tooltip content={keybinding.description} position="bottom">
+      <Box
+        as="span"
+        style={{
+          'border-bottom': '2px dotted rgba(255, 255, 255, 0.8)',
+        }}
       >
-        <Box as="span" style={{
-          "border-bottom": "2px dotted rgba(255, 255, 255, 0.8)",
-        }}>
-          {keybinding.name}
-        </Box>
-      </Tooltip>
-    )
-    : <span>{keybinding.name}</span>;
+        {keybinding.name}
+      </Box>
+    </Tooltip>
+  ) : (
+    <span>{keybinding.name}</span>
+  );
 };
 
 KeybindingName.defaultHooks = {
@@ -172,9 +178,12 @@ KeybindingName.defaultHooks = {
   },
 };
 
-const ResetToDefaultButton = (props: {
-  keybindingId: string,
-}, context) => {
+const ResetToDefaultButton = (
+  props: {
+    keybindingId: string;
+  },
+  context,
+) => {
   const { act } = useBackend<PreferencesMenuData>(context);
 
   return (
@@ -182,7 +191,7 @@ const ResetToDefaultButton = (props: {
       fluid
       textAlign="center"
       onClick={() => {
-        act("reset_keybinds_to_defaults", {
+        act('reset_keybinds_to_defaults', {
           keybind_name: props.keybindingId,
         });
       }}
@@ -195,7 +204,7 @@ const ResetToDefaultButton = (props: {
 export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
   cancelNextKeyUp?: number;
   keybindingOnClicks: Record<string, (() => void)[]> = {};
-  lastKeybinds?: PreferencesMenuData["keybindings"];
+  lastKeybinds?: PreferencesMenuData['keybindings'];
 
   state: KeybindingsPageState = {
     lastKeyboardEvent: undefined,
@@ -245,10 +254,9 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
 
       if (selectedKeybindings[keybindName]) {
         if (value) {
-          selectedKeybindings[keybindName][Math.min(
-            selectedKeybindings[keybindName].length,
-            slot
-          )] = value;
+          selectedKeybindings[keybindName][
+            Math.min(selectedKeybindings[keybindName].length, slot)
+          ] = value;
         } else {
           selectedKeybindings[keybindName].splice(slot, 1);
         }
@@ -258,9 +266,9 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
         selectedKeybindings[keybindName] = [value];
       }
 
-      act("set_keybindings", {
-        "keybind_name": keybindName,
-        "hotkeys": selectedKeybindings[keybindName],
+      act('set_keybindings', {
+        keybind_name: keybindName,
+        hotkeys: selectedKeybindings[keybindName],
       });
 
       return {
@@ -286,7 +294,7 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
     if (isStandardKey(event)) {
       this.setRebindingHotkey(formatKeyboardEvent(event));
       return;
-    } else if (event.key === "Esc") {
+    } else if (event.key === 'Esc') {
       this.setRebindingHotkey(undefined);
       return;
     }
@@ -309,10 +317,7 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
     }
   }
 
-  getKeybindingOnClick(
-    keybindingId: string,
-    slot: number,
-  ): () => void {
+  getKeybindingOnClick(keybindingId: string, slot: number): () => void {
     if (!this.keybindingOnClicks[keybindingId]) {
       this.keybindingOnClicks[keybindingId] = [];
     }
@@ -343,21 +348,21 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
       return undefined;
     }
 
-    if (rebindingHotkey[0] !== keybindingId
-        || rebindingHotkey[1] !== slot
-    ) {
+    if (rebindingHotkey[0] !== keybindingId || rebindingHotkey[1] !== slot) {
       return undefined;
     }
 
     if (lastKeyboardEvent === undefined) {
-      return "...";
+      return '...';
     }
 
     return formatKeyboardEvent(lastKeyboardEvent);
   }
 
   async populateKeybindings() {
-    const keybindingsResponse = await fetchRetry(resolveAsset("keybindings.json"));
+    const keybindingsResponse = await fetchRetry(
+      resolveAsset('keybindings.json'),
+    );
     const keybindingsData: Keybindings = await keybindingsResponse.json();
 
     this.setState({
@@ -372,10 +377,9 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
 
     this.setState({
       selectedKeybindings: Object.fromEntries(
-        Object.entries(data.keybindings)
-          .map(([keybind, hotkeys]) => {
-            return [keybind, hotkeys.filter(value => value !== "Unbound")];
-          })
+        Object.entries(data.keybindings).map(([keybind, hotkeys]) => {
+          return [keybind, hotkeys.filter((value) => value !== 'Unbound')];
+        }),
       ),
     });
   }
@@ -389,11 +393,11 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
     }
 
     const keybindingEntries = sortKeybindingsByCategory(
-      Object.entries(keybindings)
+      Object.entries(keybindings),
     );
 
-    moveToBottom(keybindingEntries, "EMOTE");
-    moveToBottom(keybindingEntries, "ADMIN");
+    moveToBottom(keybindingEntries, 'EMOTE');
+    moveToBottom(keybindingEntries, 'ADMIN');
 
     return (
       <>
@@ -407,13 +411,13 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
             <TabbedMenu
               categoryEntries={keybindingEntries.map(
                 ([category, keybindings]) => {
-                  return [category, (
+                  return [
+                    category,
                     <Stack key={category} vertical fill>
                       {sortKeybindings(Object.entries(keybindings)).map(
                         ([keybindingId, keybinding]) => {
-                          const keys
-                        = this.state.selectedKeybindings![keybindingId]
-                          || [];
+                          const keys =
+                            this.state.selectedKeybindings![keybindingId] || [];
 
                           const name = (
                             <Stack.Item basis="25%">
@@ -426,7 +430,7 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
                               <Stack fill>
                                 {name}
 
-                                {range(0, 3).map(key => (
+                                {range(0, 3).map((key) => (
                                   <Stack.Item key={key} grow basis="10%">
                                     <KeybindingButton
                                       currentHotkey={keys[key]}
@@ -444,16 +448,17 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
 
                                 <Stack.Item shrink>
                                   <ResetToDefaultButton
-                                    keybindingId={keybindingId} />
+                                    keybindingId={keybindingId}
+                                  />
                                 </Stack.Item>
                               </Stack>
                             </Stack.Item>
                           );
-                        }
+                        },
                       )}
-                    </Stack>
-                  )];
-                }
+                    </Stack>,
+                  ];
+                },
               )}
             />
           </Stack.Item>
@@ -461,10 +466,9 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
           <Stack.Item align="center">
             <Button.Confirm
               content="Reset all keybindings"
-              onClick={() => act("reset_all_keybinds")}
+              onClick={() => act('reset_all_keybinds')}
             />
           </Stack.Item>
-
         </Stack>
       </>
     );
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/MainPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/MainPage.tsx
index 81c511d8c800..c9e587124086 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/MainPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/MainPage.tsx
@@ -1,17 +1,35 @@
-import { classes } from "common/react";
-import { InfernoNode } from "inferno";
-import { sendAct, useBackend, useLocalState } from "../../backend";
-import { Autofocus, Box, Button, Flex, LabeledList, Popper, Stack, TrackOutsideClicks, Dropdown, Tooltip } from "../../components";
-import { createSetPreference, PreferencesMenuData, RandomSetting } from "./data";
-import { CharacterPreview } from "./CharacterPreview";
-import { RandomizationButton } from "./RandomizationButton";
-import { ServerPreferencesFetcher } from "./ServerPreferencesFetcher";
-import { MultiNameInput, NameInput } from "./names";
-import { Gender, GENDERS } from "./preferences/gender";
-import features from "./preferences/features";
-import { FeatureChoicedServerData, FeatureValueInput } from "./preferences/features/base";
-import { filterMap, sortBy } from "common/collections";
-import { useRandomToggleState } from "./useRandomToggleState";
+import { classes } from 'common/react';
+import { InfernoNode } from 'inferno';
+import { sendAct, useBackend, useLocalState } from '../../backend';
+import {
+  Autofocus,
+  Box,
+  Button,
+  Flex,
+  LabeledList,
+  Popper,
+  Stack,
+  TrackOutsideClicks,
+  Dropdown,
+  Tooltip,
+} from '../../components';
+import {
+  createSetPreference,
+  PreferencesMenuData,
+  RandomSetting,
+} from './data';
+import { CharacterPreview } from './CharacterPreview';
+import { RandomizationButton } from './RandomizationButton';
+import { ServerPreferencesFetcher } from './ServerPreferencesFetcher';
+import { MultiNameInput, NameInput } from './names';
+import { Gender, GENDERS } from './preferences/gender';
+import features from './preferences/features';
+import {
+  FeatureChoicedServerData,
+  FeatureValueInput,
+} from './preferences/features/base';
+import { filterMap, sortBy } from 'common/collections';
+import { useRandomToggleState } from './useRandomToggleState';
 
 const CLOTHING_CELL_SIZE = 48;
 const CLOTHING_SIDEBAR_ROWS = 13.4; // PARIAH EDIT CHANGE - ORIGINAL:  9
@@ -21,13 +39,13 @@ const CLOTHING_SELECTION_WIDTH = 5.4;
 const CLOTHING_SELECTION_MULTIPLIER = 5.2;
 
 const CharacterControls = (props: {
-  handleRotate: () => void,
-  handleOpenSpecies: () => void,
-  handleLoadout: () => void,
-  handleAppearanceMods: () => void,
-  gender: Gender,
-  setGender: (gender: Gender) => void,
-  showGender: boolean,
+  handleRotate: () => void;
+  handleOpenSpecies: () => void;
+  handleLoadout: () => void;
+  handleAppearanceMods: () => void;
+  gender: Gender;
+  setGender: (gender: Gender) => void;
+  showGender: boolean;
 }) => {
   return (
     <Stack>
@@ -86,40 +104,36 @@ const CharacterControls = (props: {
   );
 };
 
-const ChoicedSelection = (props: {
-  name: string,
-  catalog: FeatureChoicedServerData,
-  selected: string,
-  supplementalFeature?: string,
-  supplementalValue?: unknown,
-  onClose: () => void,
-  onSelect: (value: string) => void,
-}, context) => {
+const ChoicedSelection = (
+  props: {
+    name: string;
+    catalog: FeatureChoicedServerData;
+    selected: string;
+    supplementalFeature?: string;
+    supplementalValue?: unknown;
+    onClose: () => void;
+    onSelect: (value: string) => void;
+  },
+  context,
+) => {
   const { act } = useBackend<PreferencesMenuData>(context);
 
-  const {
-    catalog,
-    supplementalFeature,
-    supplementalValue,
-  } = props;
+  const { catalog, supplementalFeature, supplementalValue } = props;
 
   if (!catalog.icons) {
-    return (
-      <Box color="red">
-        Provided catalog had no icons!
-      </Box>
-    );
+    return <Box color="red">Provided catalog had no icons!</Box>;
   }
 
   return (
-    <Box style={{
-      background: "white",
-      padding: "5px",
-
-      height:
-      `${CLOTHING_SELECTION_CELL_SIZE * CLOTHING_SELECTION_MULTIPLIER}px`,
-      width: `${CLOTHING_SELECTION_CELL_SIZE * CLOTHING_SELECTION_WIDTH}px`,
-    }}>
+    <Box
+      style={{
+        background: 'white',
+        padding: '5px',
+
+        height: `${CLOTHING_SELECTION_CELL_SIZE * CLOTHING_SELECTION_MULTIPLIER}px`,
+        width: `${CLOTHING_SELECTION_CELL_SIZE * CLOTHING_SELECTION_WIDTH}px`,
+      }}
+    >
       <Stack vertical fill>
         <Stack.Item>
           <Stack fill>
@@ -136,21 +150,20 @@ const ChoicedSelection = (props: {
             )}
 
             <Stack.Item grow>
-              <Box style={{
-                "border-bottom": "1px solid #888",
-                "font-weight": "bold",
-                "font-size": "14px",
-                "text-align": "center",
-              }}>
+              <Box
+                style={{
+                  'border-bottom': '1px solid #888',
+                  'font-weight': 'bold',
+                  'font-size': '14px',
+                  'text-align': 'center',
+                }}
+              >
                 Select {props.name.toLowerCase()}
               </Box>
             </Stack.Item>
 
             <Stack.Item>
-              <Button
-                color="red"
-                onClick={props.onClose}
-              >
+              <Button color="red" onClick={props.onClose}>
                 X
               </Button>
             </Stack.Item>
@@ -166,7 +179,7 @@ const ChoicedSelection = (props: {
                     key={index}
                     basis={`${CLOTHING_SELECTION_CELL_SIZE}px`}
                     style={{
-                      padding: "5px",
+                      padding: '5px',
                     }}
                   >
                     <Button
@@ -181,7 +194,13 @@ const ChoicedSelection = (props: {
                         width: `${CLOTHING_SELECTION_CELL_SIZE}px`,
                       }}
                     >
-                      <Box className={classes(["preferences32x32", image, "centered-image"])} />
+                      <Box
+                        className={classes([
+                          'preferences32x32',
+                          image,
+                          'centered-image',
+                        ])}
+                      />
                     </Button>
                   </Flex.Item>
                 );
@@ -194,20 +213,28 @@ const ChoicedSelection = (props: {
   );
 };
 
-const GenderButton = (props: {
-  handleSetGender: (gender: Gender) => void,
-  gender: Gender,
-}, context) => {
-  const [genderMenuOpen, setGenderMenuOpen] = useLocalState(context, "genderMenuOpen", false);
+const GenderButton = (
+  props: {
+    handleSetGender: (gender: Gender) => void;
+    gender: Gender;
+  },
+  context,
+) => {
+  const [genderMenuOpen, setGenderMenuOpen] = useLocalState(
+    context,
+    'genderMenuOpen',
+    false,
+  );
 
   return (
-    <Popper options={{
-      placement: "right-end",
-    }} popperContent={(
-      genderMenuOpen
-        && (
+    <Popper
+      options={{
+        placement: 'right-end',
+      }}
+      popperContent={
+        genderMenuOpen && (
           <Stack backgroundColor="white" ml={0.5} p={0.3}>
-            {[Gender.Male, Gender.Female, Gender.Other].map(gender => {
+            {[Gender.Male, Gender.Female, Gender.Other].map((gender) => {
               return (
                 <Stack.Item key={gender}>
                   <Button
@@ -226,7 +253,8 @@ const GenderButton = (props: {
             })}
           </Stack>
         )
-    )}>
+      }
+    >
       <Button
         onClick={() => {
           setGenderMenuOpen(!genderMenuOpen);
@@ -240,19 +268,22 @@ const GenderButton = (props: {
   );
 };
 
-const MainFeature = (props: {
-  catalog: FeatureChoicedServerData & {
-    name: string,
-    supplemental_feature?: string,
+const MainFeature = (
+  props: {
+    catalog: FeatureChoicedServerData & {
+      name: string;
+      supplemental_feature?: string;
+    };
+    currentValue: string;
+    isOpen: boolean;
+    handleClose: () => void;
+    handleOpen: () => void;
+    handleSelect: (newClothing: string) => void;
+    randomization?: RandomSetting;
+    setRandomization: (newSetting: RandomSetting) => void;
   },
-  currentValue: string,
-  isOpen: boolean,
-  handleClose: () => void,
-  handleOpen: () => void,
-  handleSelect: (newClothing: string) => void,
-  randomization?: RandomSetting,
-  setRandomization: (newSetting: RandomSetting) => void,
-}, context) => {
+  context,
+) => {
   const { act, data } = useBackend<PreferencesMenuData>(context);
 
   const {
@@ -269,25 +300,31 @@ const MainFeature = (props: {
   const supplementalFeature = catalog.supplemental_feature;
 
   return (
-    <Popper options={{
-      placement: "bottom-start",
-    }} popperContent={isOpen && (
-      <TrackOutsideClicks onOutsideClick={props.handleClose}>
-        <ChoicedSelection
-          name={catalog.name}
-          catalog={catalog}
-          selected={currentValue}
-          supplementalFeature={supplementalFeature}
-          supplementalValue={supplementalFeature && (
-            data
-              .character_preferences
-              .supplemental_features[supplementalFeature]
-          )}
-          onClose={handleClose}
-          onSelect={handleSelect}
-        />
-      </TrackOutsideClicks>
-    )}>
+    <Popper
+      options={{
+        placement: 'bottom-start',
+      }}
+      popperContent={
+        isOpen && (
+          <TrackOutsideClicks onOutsideClick={props.handleClose}>
+            <ChoicedSelection
+              name={catalog.name}
+              catalog={catalog}
+              selected={currentValue}
+              supplementalFeature={supplementalFeature}
+              supplementalValue={
+                supplementalFeature &&
+                data.character_preferences.supplemental_features[
+                  supplementalFeature
+                ]
+              }
+              onClose={handleClose}
+              onSelect={handleSelect}
+            />
+          </TrackOutsideClicks>
+        )
+      }
+    >
       <Button
         onClick={() => {
           if (isOpen) {
@@ -306,345 +343,360 @@ const MainFeature = (props: {
       >
         <Box
           className={classes([
-            "preferences32x32",
-              catalog.icons![currentValue],
-              "centered-image",
+            'preferences32x32',
+            catalog.icons![currentValue],
+            'centered-image',
           ])}
           style={{
             transform: randomization
-              ? "translateX(-70%) translateY(-70%) scale(1.1)"
-              : "translateX(-50%) translateY(-50%) scale(1.3)",
+              ? 'translateX(-70%) translateY(-70%) scale(1.1)'
+              : 'translateX(-50%) translateY(-50%) scale(1.3)',
           }}
         />
 
-        {(randomization && <RandomizationButton
-          dropdownProps={{
-            dropdownStyle: {
-              bottom: 0,
-              position: "absolute",
-              right: "1px",
-            },
-
-            onOpen: (event) => {
-              // We're a button inside a button.
-              // Did you know that's against the W3C standard? :)
-              event.cancelBubble = true;
-              event.stopPropagation();
-            },
-          }}
-          value={randomization}
-          setValue={setRandomization}
-        />)}
+        {randomization && (
+          <RandomizationButton
+            dropdownProps={{
+              dropdownStyle: {
+                bottom: 0,
+                position: 'absolute',
+                right: '1px',
+              },
+
+              onOpen: (event) => {
+                // We're a button inside a button.
+                // Did you know that's against the W3C standard? :)
+                event.cancelBubble = true;
+                event.stopPropagation();
+              },
+            }}
+            value={randomization}
+            setValue={setRandomization}
+          />
+        )}
       </Button>
     </Popper>
   );
 };
 
-const createSetRandomization = (
-  act: typeof sendAct,
-  preference: string,
-) => (newSetting: RandomSetting) => {
-  act("set_random_preference", {
-    preference,
-    value: newSetting,
-  });
-};
+const createSetRandomization =
+  (act: typeof sendAct, preference: string) => (newSetting: RandomSetting) => {
+    act('set_random_preference', {
+      preference,
+      value: newSetting,
+    });
+  };
 
-const sortPreferences = sortBy<[string, unknown]>(
-  ([featureId, _]) => {
-    const feature = features[featureId];
-    return feature?.name;
-  });
+const sortPreferences = sortBy<[string, unknown]>(([featureId, _]) => {
+  const feature = features[featureId];
+  return feature?.name;
+});
 
 const PreferenceList = (props: {
-  act: typeof sendAct,
-  preferences: Record<string, unknown>,
-  randomizations: Record<string, RandomSetting>,
+  act: typeof sendAct;
+  preferences: Record<string, unknown>;
+  randomizations: Record<string, RandomSetting>;
 }) => {
   return (
-    <Stack.Item basis="50%" grow style={{
-      background: "rgba(0, 0, 0, 0.5)",
-      padding: "4px",
-    }} overflowX="hidden" overflowY="scroll">
+    <Stack.Item
+      basis="50%"
+      grow
+      style={{
+        background: 'rgba(0, 0, 0, 0.5)',
+        padding: '4px',
+      }}
+      overflowX="hidden"
+      overflowY="scroll"
+    >
       <LabeledList>
-        {
-          sortPreferences(Object.entries(props.preferences))
-            .map(([featureId, value]) => {
-              const feature = features[featureId];
-              const randomSetting = props.randomizations[featureId];
+        {sortPreferences(Object.entries(props.preferences)).map(
+          ([featureId, value]) => {
+            const feature = features[featureId];
+            const randomSetting = props.randomizations[featureId];
 
-              if (feature === undefined) {
-                return (
-                  <Stack.Item key={featureId}>
-                    <b>Feature {featureId} is not recognized.</b>
-                  </Stack.Item>
-                );
-              }
+            if (feature === undefined) {
+              return (
+                <Stack.Item key={featureId}>
+                  <b>Feature {featureId} is not recognized.</b>
+                </Stack.Item>
+              );
+            }
 
-              let name: InfernoNode = feature.name;
-              if (feature.description) {
-                name = (
-                  <Tooltip content={feature.description} position="bottom-start">
-                    <Box as="span" style={{
-                      "border-bottom": "2px dotted rgba(255, 255, 255, 0.8)",
-                    }}>
-                      {name}:
-                    </Box>
-                  </Tooltip>
-                );
-              }
+            let name: InfernoNode = feature.name;
+            if (feature.description) {
+              name = (
+                <Tooltip content={feature.description} position="bottom-start">
+                  <Box
+                    as="span"
+                    style={{
+                      'border-bottom': '2px dotted rgba(255, 255, 255, 0.8)',
+                    }}
+                  >
+                    {name}:
+                  </Box>
+                </Tooltip>
+              );
+            }
 
-              return (
-                <LabeledList.Item
-                  key={featureId}
-                  label={name}
-                  verticalAlign="middle"
-                >
-                  <Stack fill>
-                    {randomSetting && (
-                      <Stack.Item>
-                        <RandomizationButton
-                          setValue={createSetRandomization(
-                            props.act,
-                            featureId,
-                          )}
-                          value={randomSetting}
-                        />
-                      </Stack.Item>
-                    )}
-
-                    <Stack.Item grow>
-                      <FeatureValueInput
-                        act={props.act}
-                        feature={feature}
-                        featureId={featureId}
-                        value={value}
+            return (
+              <LabeledList.Item
+                key={featureId}
+                label={name}
+                verticalAlign="middle"
+              >
+                <Stack fill>
+                  {randomSetting && (
+                    <Stack.Item>
+                      <RandomizationButton
+                        setValue={createSetRandomization(props.act, featureId)}
+                        value={randomSetting}
                       />
                     </Stack.Item>
-                  </Stack>
-                </LabeledList.Item>
-              );
-            })
-        }
+                  )}
+
+                  <Stack.Item grow>
+                    <FeatureValueInput
+                      act={props.act}
+                      feature={feature}
+                      featureId={featureId}
+                      value={value}
+                    />
+                  </Stack.Item>
+                </Stack>
+              </LabeledList.Item>
+            );
+          },
+        )}
       </LabeledList>
     </Stack.Item>
   );
 };
 
-export const MainPage = (props: {
-  openSpecies: () => void,
-}, context) => {
+export const MainPage = (
+  props: {
+    openSpecies: () => void;
+  },
+  context,
+) => {
   const { act, data } = useBackend<PreferencesMenuData>(context);
-  const [currentClothingMenu, setCurrentClothingMenu]
-    = useLocalState<string | null>(context, "currentClothingMenu", null);
-  const [multiNameInputOpen, setMultiNameInputOpen]
-    = useLocalState(context, "multiNameInputOpen", false);
+  const [currentClothingMenu, setCurrentClothingMenu] = useLocalState<
+    string | null
+  >(context, 'currentClothingMenu', null);
+  const [multiNameInputOpen, setMultiNameInputOpen] = useLocalState(
+    context,
+    'multiNameInputOpen',
+    false,
+  );
   const [randomToggleEnabled] = useRandomToggleState(context);
 
   return (
-    <ServerPreferencesFetcher render={(serverData) => {
-      const currentSpeciesData = serverData && serverData.species[
-        data
-          .character_preferences
-          .misc
-          .species
-      ];
-
-      const contextualPreferences
-        = data.character_preferences.secondary_features || [];
-
-      const mainFeatures = [
-        ...Object.entries(data.character_preferences.clothing),
-        ...Object.entries(data.character_preferences.features)
-          .filter(([featureName]) => {
-            if (!currentSpeciesData) {
-              return false;
-            }
+    <ServerPreferencesFetcher
+      render={(serverData) => {
+        const currentSpeciesData =
+          serverData &&
+          serverData.species[data.character_preferences.misc.species];
+
+        const contextualPreferences =
+          data.character_preferences.secondary_features || [];
+
+        const mainFeatures = [
+          ...Object.entries(data.character_preferences.clothing),
+          ...Object.entries(data.character_preferences.features).filter(
+            ([featureName]) => {
+              if (!currentSpeciesData) {
+                return false;
+              }
 
-            return currentSpeciesData
-              .enabled_features
-              .indexOf(featureName) !== -1;
-          }),
-      ];
-
-      const randomBodyEnabled
-        = (data.character_preferences.non_contextual.random_body
-            !== RandomSetting.Disabled)
-          || randomToggleEnabled;
-
-      const getRandomization = (
-        preferences: Record<string, unknown>
-      ): Record<string, RandomSetting> => {
-        if (!serverData) {
-          return {};
-        }
+              return (
+                currentSpeciesData.enabled_features.indexOf(featureName) !== -1
+              );
+            },
+          ),
+        ];
+
+        const randomBodyEnabled =
+          data.character_preferences.non_contextual.random_body !==
+            RandomSetting.Disabled || randomToggleEnabled;
+
+        const getRandomization = (
+          preferences: Record<string, unknown>,
+        ): Record<string, RandomSetting> => {
+          if (!serverData) {
+            return {};
+          }
 
-        return Object.fromEntries(filterMap(
-          Object.keys(preferences), preferenceKey => {
-            if (serverData.random.randomizable.indexOf(preferenceKey) === -1) {
-              return undefined;
-            }
+          return Object.fromEntries(
+            filterMap(Object.keys(preferences), (preferenceKey) => {
+              if (
+                serverData.random.randomizable.indexOf(preferenceKey) === -1
+              ) {
+                return undefined;
+              }
 
-            if (!randomBodyEnabled) {
-              return undefined;
-            }
+              if (!randomBodyEnabled) {
+                return undefined;
+              }
 
-            return [
-              preferenceKey,
-              data.character_preferences.randomization[preferenceKey]
-                || RandomSetting.Disabled,
-            ];
-          }));
-      };
+              return [
+                preferenceKey,
+                data.character_preferences.randomization[preferenceKey] ||
+                  RandomSetting.Disabled,
+              ];
+            }),
+          );
+        };
 
-      const randomizationOfMainFeatures
-        = getRandomization(Object.fromEntries(mainFeatures));
+        const randomizationOfMainFeatures = getRandomization(
+          Object.fromEntries(mainFeatures),
+        );
 
-      const nonContextualPreferences
-        = {
+        const nonContextualPreferences = {
           ...data.character_preferences.non_contextual,
         };
 
-      if (randomBodyEnabled) {
-        nonContextualPreferences["random_species"]
-          = data.character_preferences.randomization["species"];
-      } else {
-        // We can't use random_name/is_accessible because the
-        // server doesn't know whether the random toggle is on.
-        delete nonContextualPreferences["random_name"];
-      }
+        if (randomBodyEnabled) {
+          nonContextualPreferences['random_species'] =
+            data.character_preferences.randomization['species'];
+        } else {
+          // We can't use random_name/is_accessible because the
+          // server doesn't know whether the random toggle is on.
+          delete nonContextualPreferences['random_name'];
+        }
 
-      return (
-        <>
-          {multiNameInputOpen && <MultiNameInput
-            handleClose={() => setMultiNameInputOpen(false)}
-            handleRandomizeName={preference => act("randomize_name", {
-              preference,
-            })}
-            handleUpdateName={(nameType, value) => act("set_preference", {
-              preference: nameType,
-              value,
-            })}
-            names={data.character_preferences.names}
-          />}
-
-          <Stack height={`${CLOTHING_SIDEBAR_ROWS * CLOTHING_CELL_SIZE}px`}>
-            <Stack.Item fill>
-              <Stack vertical fill>
-                <Stack.Item>
-                  <CharacterControls
-                    gender={data.character_preferences.misc.gender}
-                    handleOpenSpecies={props.openSpecies}
-                    handleRotate={() => {
-                      act("rotate");
-                    }}
-                    handleLoadout={() => {
-                      act("open_loadout");
-                    }}
-                    handleAppearanceMods={() => {
-                      act("appearance_mods");
-                    }}
-                    setGender={createSetPreference(act, "gender")}
-                    showGender={
-                      currentSpeciesData ? !!currentSpeciesData.sexes : true
-                    }
-                  />
-                </Stack.Item>
+        return (
+          <>
+            {multiNameInputOpen && (
+              <MultiNameInput
+                handleClose={() => setMultiNameInputOpen(false)}
+                handleRandomizeName={(preference) =>
+                  act('randomize_name', {
+                    preference,
+                  })
+                }
+                handleUpdateName={(nameType, value) =>
+                  act('set_preference', {
+                    preference: nameType,
+                    value,
+                  })
+                }
+                names={data.character_preferences.names}
+              />
+            )}
 
-                <Stack.Item grow>
-                  <CharacterPreview
-                    height="80%" // PARIAH EDIT - ORIGINAL: height="100%"
-                    id={data.character_preview_view} />
-                </Stack.Item>
+            <Stack height={`${CLOTHING_SIDEBAR_ROWS * CLOTHING_CELL_SIZE}px`}>
+              <Stack.Item fill>
+                <Stack vertical fill>
+                  <Stack.Item>
+                    <CharacterControls
+                      gender={data.character_preferences.misc.gender}
+                      handleOpenSpecies={props.openSpecies}
+                      handleRotate={() => {
+                        act('rotate');
+                      }}
+                      handleLoadout={() => {
+                        act('open_loadout');
+                      }}
+                      handleAppearanceMods={() => {
+                        act('appearance_mods');
+                      }}
+                      setGender={createSetPreference(act, 'gender')}
+                      showGender={
+                        currentSpeciesData ? !!currentSpeciesData.sexes : true
+                      }
+                    />
+                  </Stack.Item>
 
-                <Dropdown
-                  // PARIAH EDIT ADDITION
-                  width="100%"
-                  position="relative"
-                  selected={data.preview_selection}
-                  options={data.preview_options}
-                  onSelected={value => act('update_preview', {
-                    updated_preview: value,
-                  })} />
-                <Stack.Item position="relative">
-                  <NameInput
-                    name={
-                      data.character_preferences.names[data.name_to_use]
-                    }
-                    handleUpdateName={
-                      createSetPreference(act, data.name_to_use)
+                  <Stack.Item grow>
+                    <CharacterPreview
+                      height="80%" // PARIAH EDIT - ORIGINAL: height="100%"
+                      id={data.character_preview_view}
+                    />
+                  </Stack.Item>
+
+                  <Dropdown
+                    // PARIAH EDIT ADDITION
+                    width="100%"
+                    position="relative"
+                    selected={data.preview_selection}
+                    options={data.preview_options}
+                    onSelected={(value) =>
+                      act('update_preview', {
+                        updated_preview: value,
+                      })
                     }
-                    openMultiNameInput={() => {
-                      setMultiNameInputOpen(true);
-                    }}
                   />
-                </Stack.Item>
-
-              </Stack>
-            </Stack.Item>
+                  <Stack.Item position="relative">
+                    <NameInput
+                      name={data.character_preferences.names[data.name_to_use]}
+                      handleUpdateName={createSetPreference(
+                        act,
+                        data.name_to_use,
+                      )}
+                      openMultiNameInput={() => {
+                        setMultiNameInputOpen(true);
+                      }}
+                    />
+                  </Stack.Item>
+                </Stack>
+              </Stack.Item>
 
-            <Stack.Item
-              fill
-              width={`${(CLOTHING_CELL_SIZE * 2) + 15}px`}
-            >
-              <Stack height="100%" vertical wrap>
-                {mainFeatures
-                  .map(([clothingKey, clothing]) => {
-                    const catalog = (
-                      serverData
-                          && serverData[clothingKey] as
-                            FeatureChoicedServerData & {
-                              name: string,
+              <Stack.Item fill width={`${CLOTHING_CELL_SIZE * 2 + 15}px`}>
+                <Stack height="100%" vertical wrap>
+                  {mainFeatures.map(([clothingKey, clothing]) => {
+                    const catalog =
+                      serverData &&
+                      (serverData[clothingKey] as FeatureChoicedServerData & {
+                        name: string;
+                      });
+
+                    return (
+                      catalog && (
+                        <Stack.Item key={clothingKey} mt={0.5} px={0.5}>
+                          <MainFeature
+                            catalog={catalog}
+                            currentValue={clothing}
+                            isOpen={currentClothingMenu === clothingKey}
+                            handleClose={() => {
+                              setCurrentClothingMenu(null);
+                            }}
+                            handleOpen={() => {
+                              setCurrentClothingMenu(clothingKey);
+                            }}
+                            handleSelect={createSetPreference(act, clothingKey)}
+                            randomization={
+                              randomizationOfMainFeatures[clothingKey]
                             }
-                    );
-
-                    return catalog && (
-                      <Stack.Item key={clothingKey} mt={0.5} px={0.5}>
-                        <MainFeature
-                          catalog={catalog}
-                          currentValue={clothing}
-                          isOpen={
-                            currentClothingMenu === clothingKey
-                          }
-                          handleClose={() => {
-                            setCurrentClothingMenu(null);
-                          }}
-                          handleOpen={() => {
-                            setCurrentClothingMenu(clothingKey);
-                          }}
-                          handleSelect={createSetPreference(act, clothingKey)}
-                          randomization={
-                            randomizationOfMainFeatures[clothingKey]
-                          }
-                          setRandomization={createSetRandomization(
-                            act,
-                            clothingKey,
-                          )}
-                        />
-                      </Stack.Item>
+                            setRandomization={createSetRandomization(
+                              act,
+                              clothingKey,
+                            )}
+                          />
+                        </Stack.Item>
+                      )
                     );
                   })}
-              </Stack>
-            </Stack.Item>
+                </Stack>
+              </Stack.Item>
 
-            <Stack.Item grow basis={0}>
-              <Stack vertical fill>
-                <PreferenceList
-                  act={act}
-                  randomizations={getRandomization(contextualPreferences)}
-                  preferences={contextualPreferences}
-                />
+              <Stack.Item grow basis={0}>
+                <Stack vertical fill>
+                  <PreferenceList
+                    act={act}
+                    randomizations={getRandomization(contextualPreferences)}
+                    preferences={contextualPreferences}
+                  />
 
-                <PreferenceList
-                  act={act}
-                  randomizations={getRandomization(nonContextualPreferences)}
-                  preferences={nonContextualPreferences}
-                />
-              </Stack>
-            </Stack.Item>
-          </Stack>
-        </>
-      );
-    }} />
+                  <PreferenceList
+                    act={act}
+                    randomizations={getRandomization(nonContextualPreferences)}
+                    preferences={nonContextualPreferences}
+                  />
+                </Stack>
+              </Stack.Item>
+            </Stack>
+          </>
+        );
+      }}
+    />
   );
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/PageButton.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/PageButton.tsx
index 8ac3de359759..ce18a5d6ebcd 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/PageButton.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/PageButton.tsx
@@ -1,20 +1,19 @@
-import { InfernoNode } from "inferno";
-import { Button } from "../../components";
+import { InfernoNode } from 'inferno';
+import { Button } from '../../components';
 
 export const PageButton = <P extends unknown>(props: {
-  currentPage: P,
-  page: P,
-  otherActivePages?: P[],
+  currentPage: P;
+  page: P;
+  otherActivePages?: P[];
 
-  setPage: (page: P) => void,
+  setPage: (page: P) => void;
 
-  children?: InfernoNode,
+  children?: InfernoNode;
 }) => {
-  const pageIsActive = props.currentPage === props.page
-    || (
-      props.otherActivePages
-        && props.otherActivePages.indexOf(props.currentPage) !== -1
-    );
+  const pageIsActive =
+    props.currentPage === props.page ||
+    (props.otherActivePages &&
+      props.otherActivePages.indexOf(props.currentPage) !== -1);
 
   return (
     <Button
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx
index e1f8d58bc762..df2440a19539 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx
@@ -1,30 +1,33 @@
-import { StatelessComponent } from "inferno";
-import { Box, Icon, Stack, Tooltip } from "../../components";
-import { PreferencesMenuData, Quirk } from "./data";
-import { useBackend, useLocalState } from "../../backend";
-import { ServerPreferencesFetcher } from "./ServerPreferencesFetcher";
+import { StatelessComponent } from 'inferno';
+import { Box, Icon, Stack, Tooltip } from '../../components';
+import { PreferencesMenuData, Quirk } from './data';
+import { useBackend, useLocalState } from '../../backend';
+import { ServerPreferencesFetcher } from './ServerPreferencesFetcher';
 
 const getValueClass = (value: number): string => {
   if (value > 0) {
-    return "positive";
+    return 'positive';
   } else if (value < 0) {
-    return "negative";
+    return 'negative';
   } else {
-    return "neutral";
+    return 'neutral';
   }
 };
 
 const QuirkList = (props: {
-  quirks: [string, Quirk & {
-    failTooltip?: string;
-  }][],
-  onClick: (quirkName: string, quirk: Quirk) => void,
+  quirks: [
+    string,
+    Quirk & {
+      failTooltip?: string;
+    },
+  ][];
+  onClick: (quirkName: string, quirk: Quirk) => void;
 }) => {
   return (
     // Stack is not used here for a variety of IE flex bugs
     <Box className="PreferencesMenu__Quirks__QuirkList">
       {props.quirks.map(([quirkKey, quirk]) => {
-        const className = "PreferencesMenu__Quirks__QuirkList__quirk";
+        const className = 'PreferencesMenu__Quirks__QuirkList__quirk';
 
         const child = (
           <Box
@@ -37,42 +40,48 @@ const QuirkList = (props: {
             }}
           >
             <Stack fill>
-              <Stack.Item align="center" style={{
-                "min-width": "15%",
-                "max-width": "15%",
-                "text-align": "center",
-              }}>
-                <Icon
-                  color="#333"
-                  fontSize={3}
-                  name={quirk.icon}
-                />
+              <Stack.Item
+                align="center"
+                style={{
+                  'min-width': '15%',
+                  'max-width': '15%',
+                  'text-align': 'center',
+                }}
+              >
+                <Icon color="#333" fontSize={3} name={quirk.icon} />
               </Stack.Item>
 
-              <Stack.Item align="stretch" style={{
-                "border-right": "1px solid black",
-                "margin-left": 0,
-              }} />
+              <Stack.Item
+                align="stretch"
+                style={{
+                  'border-right': '1px solid black',
+                  'margin-left': 0,
+                }}
+              />
 
-              <Stack.Item grow style={{
-                "margin-left": 0,
+              <Stack.Item
+                grow
+                style={{
+                  'margin-left': 0,
 
-                // Fixes an IE bug for text overflowing in Flex boxes
-                "min-width": "0%",
-              }}>
+                  // Fixes an IE bug for text overflowing in Flex boxes
+                  'min-width': '0%',
+                }}
+              >
                 <Stack vertical fill>
                   <Stack.Item
-                    className={
-                      `${className}--${getValueClass(quirk.value)}`
-                    }
+                    className={`${className}--${getValueClass(quirk.value)}`}
                     style={{
-                      "border-bottom": "1px solid black",
-                      "padding": "2px",
+                      'border-bottom': '1px solid black',
+                      padding: '2px',
                     }}
                   >
-                    <Stack fill style={{
-                      "font-size": "1.2em",
-                    }}>
+                    <Stack
+                      fill
+                      style={{
+                        'font-size': '1.2em',
+                      }}
+                    >
                       <Stack.Item grow basis="content">
                         <b>{quirk.name}</b>
                       </Stack.Item>
@@ -83,10 +92,14 @@ const QuirkList = (props: {
                     </Stack>
                   </Stack.Item>
 
-                  <Stack.Item grow basis="content" style={{
-                    "margin-top": 0,
-                    "padding": "3px",
-                  }}>
+                  <Stack.Item
+                    grow
+                    basis="content"
+                    style={{
+                      'margin-top': 0,
+                      padding: '3px',
+                    }}
+                  >
                     {quirk.description}
                   </Stack.Item>
                 </Stack>
@@ -96,11 +109,7 @@ const QuirkList = (props: {
         );
 
         if (quirk.failTooltip) {
-          return (
-            <Tooltip content={quirk.failTooltip}>
-              {child}
-            </Tooltip>
-          );
+          return <Tooltip content={quirk.failTooltip}>{child}</Tooltip>;
         } else {
           return child;
         }
@@ -135,7 +144,7 @@ export const QuirksPage = (props, context) => {
 
   return (
     <ServerPreferencesFetcher
-      render={data => {
+      render={(data) => {
         if (!data) {
           return <Box>Loading quirks...</Box>;
         }
@@ -149,7 +158,7 @@ export const QuirksPage = (props, context) => {
         const quirks = Object.entries(quirkInfo);
         quirks.sort(([_, quirkA], [__, quirkB]) => {
           if (quirkA.value === quirkB.value) {
-            return (quirkA.name > quirkB.name) ? 1 : -1;
+            return quirkA.name > quirkB.name ? 1 : -1;
           } else {
             return quirkA.value - quirkB.value;
           }
@@ -174,17 +183,15 @@ export const QuirksPage = (props, context) => {
         const getReasonToNotAdd = (quirkName: string) => {
           const quirk = quirkInfo[quirkName];
 
-          if (
-            quirk.value > 0
-          ) {
+          if (quirk.value > 0) {
             if (positiveQuirks >= maxPositiveQuirks) {
               return "You can't have any more positive quirks!";
             } else if (balance + quirk.value > 0) {
-              return "You need a negative quirk to balance this out!";
+              return 'You need a negative quirk to balance this out!';
             }
           }
 
-          const selectedQuirkNames = selectedQuirks.map(quirkKey => {
+          const selectedQuirkNames = selectedQuirks.map((quirkKey) => {
             return quirkInfo[quirkKey].name;
           });
 
@@ -195,8 +202,8 @@ export const QuirksPage = (props, context) => {
 
             for (const incompatibleQuirk of blacklist) {
               if (
-                incompatibleQuirk !== quirk.name
-                && selectedQuirkNames.indexOf(incompatibleQuirk) !== -1
+                incompatibleQuirk !== quirk.name &&
+                selectedQuirkNames.indexOf(incompatibleQuirk) !== -1
               ) {
                 return `This is incompatible with ${incompatibleQuirk}!`;
               }
@@ -210,7 +217,7 @@ export const QuirksPage = (props, context) => {
           const quirk = quirkInfo[quirkName];
 
           if (balance - quirk.value > 0) {
-            return "You need to remove a positive quirk first!";
+            return 'You need to remove a positive quirk first!';
           }
 
           return undefined;
@@ -221,9 +228,7 @@ export const QuirksPage = (props, context) => {
             <Stack.Item basis="50%">
               <Stack vertical fill align="center">
                 <Stack.Item>
-                  <Box fontSize="1.3em">
-                    Positive Quirks
-                  </Box>
+                  <Box fontSize="1.3em">Positive Quirks</Box>
                 </Stack.Item>
 
                 <Stack.Item>
@@ -247,43 +252,38 @@ export const QuirksPage = (props, context) => {
 
                       setSelectedQuirks(selectedQuirks.concat(quirkName));
 
-                      act("give_quirk", { quirk: quirk.name });
+                      act('give_quirk', { quirk: quirk.name });
                     }}
-                    quirks={quirks.filter(([quirkName, _]) => {
-                      return selectedQuirks
-                        .indexOf(quirkName) === -1;
-                    }).map(([quirkName, quirk]) => {
-                      return [quirkName, {
-                        ...quirk,
-                        failTooltip: getReasonToNotAdd(quirkName),
-                      }];
-                    })}
+                    quirks={quirks
+                      .filter(([quirkName, _]) => {
+                        return selectedQuirks.indexOf(quirkName) === -1;
+                      })
+                      .map(([quirkName, quirk]) => {
+                        return [
+                          quirkName,
+                          {
+                            ...quirk,
+                            failTooltip: getReasonToNotAdd(quirkName),
+                          },
+                        ];
+                      })}
                   />
                 </Stack.Item>
               </Stack>
             </Stack.Item>
 
             <Stack.Item>
-              <Icon
-                name="exchange-alt"
-                size={1.5}
-                ml={2}
-                mr={2}
-              />
+              <Icon name="exchange-alt" size={1.5} ml={2} mr={2} />
             </Stack.Item>
 
             <Stack.Item basis="50%">
               <Stack vertical fill align="center">
                 <Stack.Item>
-                  <Box fontSize="1.3em">
-                    Quirk Balance
-                  </Box>
+                  <Box fontSize="1.3em">Quirk Balance</Box>
                 </Stack.Item>
 
                 <Stack.Item>
-                  <StatDisplay>
-                    {balance}
-                  </StatDisplay>
+                  <StatDisplay>{balance}</StatDisplay>
                 </Stack.Item>
 
                 <Stack.Item>
@@ -300,21 +300,26 @@ export const QuirksPage = (props, context) => {
                       }
 
                       setSelectedQuirks(
-                        selectedQuirks
-                          .filter(otherQuirk => quirkName !== otherQuirk),
+                        selectedQuirks.filter(
+                          (otherQuirk) => quirkName !== otherQuirk,
+                        ),
                       );
 
-                      act("remove_quirk", { quirk: quirk.name });
+                      act('remove_quirk', { quirk: quirk.name });
                     }}
-                    quirks={quirks.filter(([quirkName, _]) => {
-                      return selectedQuirks
-                        .indexOf(quirkName) !== -1;
-                    }).map(([quirkName, quirk]) => {
-                      return [quirkName, {
-                        ...quirk,
-                        failTooltip: getReasonToNotRemove(quirkName),
-                      }];
-                    })}
+                    quirks={quirks
+                      .filter(([quirkName, _]) => {
+                        return selectedQuirks.indexOf(quirkName) !== -1;
+                      })
+                      .map(([quirkName, quirk]) => {
+                        return [
+                          quirkName,
+                          {
+                            ...quirk,
+                            failTooltip: getReasonToNotRemove(quirkName),
+                          },
+                        ];
+                      })}
                   />
                 </Stack.Item>
               </Stack>
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/RandomizationButton.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/RandomizationButton.tsx
index ea9a4a64a604..ea33f7437f05 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/RandomizationButton.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/RandomizationButton.tsx
@@ -1,29 +1,25 @@
-import { Dropdown, Icon } from "../../components";
-import { RandomSetting } from "./data";
-import { exhaustiveCheck } from "common/exhaustive";
+import { Dropdown, Icon } from '../../components';
+import { RandomSetting } from './data';
+import { exhaustiveCheck } from 'common/exhaustive';
 
 export const RandomizationButton = (props: {
-  dropdownProps?: Record<string, unknown>,
-  setValue: (newValue: RandomSetting) => void,
-  value: RandomSetting,
+  dropdownProps?: Record<string, unknown>;
+  setValue: (newValue: RandomSetting) => void;
+  value: RandomSetting;
 }) => {
-  const {
-    dropdownProps = {},
-    setValue,
-    value,
-  } = props;
+  const { dropdownProps = {}, setValue, value } = props;
 
   let color;
 
   switch (value) {
     case RandomSetting.AntagOnly:
-      color = "orange";
+      color = 'orange';
       break;
     case RandomSetting.Disabled:
-      color = "red";
+      color = 'red';
       break;
     case RandomSetting.Enabled:
-      color = "green";
+      color = 'green';
       break;
     default:
       exhaustiveCheck(value);
@@ -34,25 +30,20 @@ export const RandomizationButton = (props: {
       backgroundColor={color}
       {...dropdownProps}
       clipSelectedText={false}
-      displayText={(
-        <Icon
-          name="dice-d20"
-          mr="-0.25em"
-        />
-      )}
+      displayText={<Icon name="dice-d20" mr="-0.25em" />}
       options={[
         {
-          displayText: "Do not randomize",
+          displayText: 'Do not randomize',
           value: RandomSetting.Disabled,
         },
 
         {
-          displayText: "Always randomize",
+          displayText: 'Always randomize',
           value: RandomSetting.Enabled,
         },
 
         {
-          displayText: "Randomize when antagonist",
+          displayText: 'Randomize when antagonist',
           value: RandomSetting.AntagOnly,
         },
       ]}
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/ServerPreferencesFetcher.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/ServerPreferencesFetcher.tsx
index d21cff506ac5..2251f1e17f2b 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/ServerPreferencesFetcher.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/ServerPreferencesFetcher.tsx
@@ -1,16 +1,19 @@
-import { Component, InfernoNode } from "inferno";
-import { resolveAsset } from "../../assets";
-import { fetchRetry } from "../../http";
-import { ServerData } from "./data";
+import { Component, InfernoNode } from 'inferno';
+import { resolveAsset } from '../../assets';
+import { fetchRetry } from '../../http';
+import { ServerData } from './data';
 
 // Cache response so it's only sent once
 let fetchServerData: Promise<ServerData> | undefined;
 
-export class ServerPreferencesFetcher extends Component<{
-  render: (serverData: ServerData | undefined) => InfernoNode,
-}, {
-  serverData?: ServerData;
-}> {
+export class ServerPreferencesFetcher extends Component<
+  {
+    render: (serverData: ServerData | undefined) => InfernoNode;
+  },
+  {
+    serverData?: ServerData;
+  }
+> {
   state = {
     serverData: undefined,
   };
@@ -21,8 +24,9 @@ export class ServerPreferencesFetcher extends Component<{
 
   async populateServerData() {
     if (!fetchServerData) {
-      fetchServerData = fetchRetry(resolveAsset("preferences.json"))
-        .then(response => response.json());
+      fetchServerData = fetchRetry(resolveAsset('preferences.json')).then(
+        (response) => response.json(),
+      );
     }
 
     const preferencesData: ServerData = await fetchServerData;
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/SpeciesPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/SpeciesPage.tsx
index c864c3693246..feeb8a05399f 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/SpeciesPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/SpeciesPage.tsx
@@ -1,42 +1,58 @@
-import { classes } from "common/react";
-import { useBackend } from "../../backend";
-import { BlockQuote, Box, Button, Divider, Icon, Section, Stack, Tooltip } from "../../components";
-import { CharacterPreview } from "./CharacterPreview";
-import { createSetPreference, Food, Perk, PreferencesMenuData, ServerData, Species } from "./data";
-import { ServerPreferencesFetcher } from "./ServerPreferencesFetcher";
+import { classes } from 'common/react';
+import { useBackend } from '../../backend';
+import {
+  BlockQuote,
+  Box,
+  Button,
+  Divider,
+  Icon,
+  Section,
+  Stack,
+  Tooltip,
+} from '../../components';
+import { CharacterPreview } from './CharacterPreview';
+import {
+  createSetPreference,
+  Food,
+  Perk,
+  PreferencesMenuData,
+  ServerData,
+  Species,
+} from './data';
+import { ServerPreferencesFetcher } from './ServerPreferencesFetcher';
 
 const FOOD_ICONS = {
-  [Food.Cloth]: "tshirt",
-  [Food.Dairy]: "cheese",
-  [Food.Fried]: "bacon",
-  [Food.Fruit]: "apple-alt",
-  [Food.Grain]: "bread-slice",
-  [Food.Gross]: "trash",
-  [Food.Junkfood]: "pizza-slice",
-  [Food.Meat]: "hamburger",
-  [Food.Nuts]: "seedling",
-  [Food.Raw]: "drumstick-bite",
-  [Food.Seafood]: "fish",
-  [Food.Sugar]: "candy-cane",
-  [Food.Toxic]: "biohazard",
-  [Food.Vegetables]: "carrot",
+  [Food.Cloth]: 'tshirt',
+  [Food.Dairy]: 'cheese',
+  [Food.Fried]: 'bacon',
+  [Food.Fruit]: 'apple-alt',
+  [Food.Grain]: 'bread-slice',
+  [Food.Gross]: 'trash',
+  [Food.Junkfood]: 'pizza-slice',
+  [Food.Meat]: 'hamburger',
+  [Food.Nuts]: 'seedling',
+  [Food.Raw]: 'drumstick-bite',
+  [Food.Seafood]: 'fish',
+  [Food.Sugar]: 'candy-cane',
+  [Food.Toxic]: 'biohazard',
+  [Food.Vegetables]: 'carrot',
 };
 
 const FOOD_NAMES: Record<keyof typeof FOOD_ICONS, string> = {
-  [Food.Cloth]: "Clothing",
-  [Food.Dairy]: "Dairy",
-  [Food.Fried]: "Fried food",
-  [Food.Fruit]: "Fruit",
-  [Food.Grain]: "Grain",
-  [Food.Gross]: "Gross food",
-  [Food.Junkfood]: "Junk food",
-  [Food.Meat]: "Meat",
-  [Food.Nuts]: "Nuts",
-  [Food.Raw]: "Raw",
-  [Food.Seafood]: "Seafood",
-  [Food.Sugar]: "Sugar",
-  [Food.Toxic]: "Toxic food",
-  [Food.Vegetables]: "Vegetables",
+  [Food.Cloth]: 'Clothing',
+  [Food.Dairy]: 'Dairy',
+  [Food.Fried]: 'Fried food',
+  [Food.Fruit]: 'Fruit',
+  [Food.Grain]: 'Grain',
+  [Food.Gross]: 'Gross food',
+  [Food.Junkfood]: 'Junk food',
+  [Food.Meat]: 'Meat',
+  [Food.Nuts]: 'Nuts',
+  [Food.Raw]: 'Raw',
+  [Food.Seafood]: 'Seafood',
+  [Food.Sugar]: 'Sugar',
+  [Food.Toxic]: 'Toxic food',
+  [Food.Vegetables]: 'Vegetables',
 };
 
 const IGNORE_UNLESS_LIKED: Set<Food> = new Set([
@@ -45,17 +61,17 @@ const IGNORE_UNLESS_LIKED: Set<Food> = new Set([
   Food.Toxic,
 ]);
 
-const notIn = function<T> (set: Set<T>) {
+const notIn = function <T>(set: Set<T>) {
   return (value: T) => {
     return !set.has(value);
   };
 };
 
 const FoodList = (props: {
-  food: Food[],
-  icon: string,
-  name: string,
-  className: string,
+  food: Food[];
+  icon: string;
+  name: string;
+  className: string;
 }) => {
   if (props.food.length === 0) {
     return null;
@@ -66,21 +82,23 @@ const FoodList = (props: {
       position="bottom-end"
       content={
         <Box>
-          <Icon name={props.icon} />  <b>{props.name}</b>
+          <Icon name={props.icon} /> <b>{props.name}</b>
           <Divider />
           <Box>
             {props.food
               .reduce((names, food) => {
                 const foodName = FOOD_NAMES[food];
                 return foodName ? names.concat(foodName) : names;
-              }, []).join(", ")}
+              }, [])
+              .join(', ')}
           </Box>
         </Box>
-      }>
+      }
+    >
       <Stack ml={2}>
-        {props.food.map(food => {
-          return FOOD_ICONS[food]
-            && (
+        {props.food.map((food) => {
+          return (
+            FOOD_ICONS[food] && (
               <Stack.Item>
                 <Icon
                   className={props.className}
@@ -89,17 +107,15 @@ const FoodList = (props: {
                   name={FOOD_ICONS[food]}
                 />
               </Stack.Item>
-            );
+            )
+          );
         })}
       </Stack>
     </Tooltip>
   );
 };
 
-const Diet = (props: {
-  diet: Species["diet"],
-}) => {
-
+const Diet = (props: { diet: Species['diet'] }) => {
   if (!props.diet) {
     return null;
   }
@@ -138,20 +154,20 @@ const Diet = (props: {
   );
 };
 
-const SpeciesPerk = (props: {
-  className: string,
-  perk: Perk,
-}) => {
+const SpeciesPerk = (props: { className: string; perk: Perk }) => {
   const { className, perk } = props;
 
   return (
-    <Tooltip position="bottom-end" content={
-      <Box>
-        <Box as="b">{perk.name}</Box>
-        <Divider />
-        <Box>{perk.description}</Box>
-      </Box>
-    }>
+    <Tooltip
+      position="bottom-end"
+      content={
+        <Box>
+          <Box as="b">{perk.name}</Box>
+          <Divider />
+          <Box>{perk.description}</Box>
+        </Box>
+      }
+    >
       <Box class={className} width="32px" height="32px">
         <Icon
           name={perk.ui_icon}
@@ -159,9 +175,9 @@ const SpeciesPerk = (props: {
           ml={0}
           mt={1}
           style={{
-            "text-align": "center",
-            height: "100%",
-            width: "100%",
+            'text-align': 'center',
+            height: '100%',
+            width: '100%',
           }}
         />
       </Box>
@@ -169,22 +185,17 @@ const SpeciesPerk = (props: {
   );
 };
 
-const SpeciesPerks = (props: {
-  perks: Species["perks"],
-}) => {
-
+const SpeciesPerks = (props: { perks: Species['perks'] }) => {
   const { positive, negative, neutral } = props.perks;
 
   return (
     <Stack fill justify="space-between">
       <Stack.Item>
         <Stack>
-          {positive.map(perk => {
+          {positive.map((perk) => {
             return (
               <Stack.Item key={perk.name}>
-                <SpeciesPerk
-                  className="color-bg-green"
-                  perk={perk} />
+                <SpeciesPerk className="color-bg-green" perk={perk} />
               </Stack.Item>
             );
           })}
@@ -192,24 +203,20 @@ const SpeciesPerks = (props: {
       </Stack.Item>
 
       <Stack grow>
-        {neutral.map(perk => {
+        {neutral.map((perk) => {
           return (
             <Stack.Item key={perk.name}>
-              <SpeciesPerk
-                className="color-bg-grey"
-                perk={perk} />
+              <SpeciesPerk className="color-bg-grey" perk={perk} />
             </Stack.Item>
           );
         })}
       </Stack>
 
       <Stack>
-        {negative.map(perk => {
+        {negative.map((perk) => {
           return (
             <Stack.Item key={perk.name}>
-              <SpeciesPerk
-                className="color-bg-red"
-                perk={perk} />
+              <SpeciesPerk className="color-bg-red" perk={perk} />
             </Stack.Item>
           );
         })}
@@ -218,25 +225,24 @@ const SpeciesPerks = (props: {
   );
 };
 
-const SpeciesPageInner = (props: {
-  handleClose: () => void,
-  species: ServerData["species"],
-}, context) => {
-
+const SpeciesPageInner = (
+  props: {
+    handleClose: () => void;
+    species: ServerData['species'];
+  },
+  context,
+) => {
   const { act, data } = useBackend<PreferencesMenuData>(context);
-  const setSpecies = createSetPreference(act, "species");
+  const setSpecies = createSetPreference(act, 'species');
 
-  let species: [string, Species][]
-    = Object.entries(props.species)
-      .map(([species, data]) => {
-        return [
-          species,
-          data,
-        ];
-      });
+  let species: [string, Species][] = Object.entries(props.species).map(
+    ([species, data]) => {
+      return [species, data];
+    },
+  );
 
   // Humans are always the top of the list
-  const humanIndex = species.findIndex(([species]) => species === "human");
+  const humanIndex = species.findIndex(([species]) => species === 'human');
   const swapWith = species[0];
   species[0] = species[humanIndex];
   species[humanIndex] = swapWith;
@@ -269,16 +275,13 @@ const SpeciesPageInner = (props: {
                     }
                     tooltip={species.name}
                     style={{
-                      display: "block",
-                      height: "64px",
-                      width: "64px",
+                      display: 'block',
+                      height: '64px',
+                      width: '64px',
                     }}
                   >
                     <Box
-                      className={classes([
-                        "species64x64",
-                        species.icon,
-                      ])}
+                      className={classes(['species64x64', species.icon])}
                       ml={-1}
                     />
                   </Button>
@@ -297,10 +300,11 @@ const SpeciesPageInner = (props: {
                       buttons={
                         // NOHUNGER species have no diet (diet = null),
                         // so we have nothing to show
-                        (currentSpecies.diet
-                          && <Diet diet={currentSpecies.diet} />)
-                      }>
-
+                        currentSpecies.diet && (
+                          <Diet diet={currentSpecies.diet} />
+                        )
+                      }
+                    >
                       <Section title="Description">
                         {currentSpecies.desc}
                       </Section>
@@ -308,7 +312,6 @@ const SpeciesPageInner = (props: {
                       <Section title="Features">
                         <SpeciesPerks perks={currentSpecies.perks} />
                       </Section>
-
                     </Section>
                   </Stack.Item>
 
@@ -327,14 +330,17 @@ const SpeciesPageInner = (props: {
                     {currentSpecies.lore.map((text, index) => (
                       <Box key={index} maxWidth="100%">
                         {text}
-                        {index !== currentSpecies.lore.length - 1
-                          && (<><br /><br /></>)}
+                        {index !== currentSpecies.lore.length - 1 && (
+                          <>
+                            <br />
+                            <br />
+                          </>
+                        )}
                       </Box>
                     ))}
                   </BlockQuote>
                 </Section>
               </Box>
-
             </Box>
           </Stack.Item>
         </Stack>
@@ -343,17 +349,17 @@ const SpeciesPageInner = (props: {
   );
 };
 
-export const SpeciesPage = (props: {
-  closeSpecies: () => void,
-}) => {
+export const SpeciesPage = (props: { closeSpecies: () => void }) => {
   return (
     <ServerPreferencesFetcher
-      render={serverData => {
+      render={(serverData) => {
         if (serverData) {
-          return (<SpeciesPageInner
-            handleClose={props.closeSpecies}
-            species={serverData.species}
-          />);
+          return (
+            <SpeciesPageInner
+              handleClose={props.closeSpecies}
+              species={serverData.species}
+            />
+          );
         } else {
           return <Box>Loading species...</Box>;
         }
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/TabbedMenu.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/TabbedMenu.tsx
index 267f624c19f4..4a9650bd29d3 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/TabbedMenu.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/TabbedMenu.tsx
@@ -1,10 +1,10 @@
-import { Component, createRef, InfernoNode, RefObject } from "inferno";
-import { Button, Section, Stack } from "../../components";
-import { FlexProps } from "../../components/Flex";
+import { Component, createRef, InfernoNode, RefObject } from 'inferno';
+import { Button, Section, Stack } from '../../components';
+import { FlexProps } from '../../components/Flex';
 
 type TabbedMenuProps = {
-  categoryEntries: [string, InfernoNode][],
-  contentProps?: FlexProps,
+  categoryEntries: [string, InfernoNode][];
+  contentProps?: FlexProps;
 };
 
 export class TabbedMenu extends Component<TabbedMenuProps> {
@@ -32,8 +32,8 @@ export class TabbedMenu extends Component<TabbedMenuProps> {
                     fontSize="1.2em"
                     fluid
                     onClick={() => {
-                      const offsetTop = this.categoryRefs[category]
-                        .current?.offsetTop;
+                      const offsetTop =
+                        this.categoryRefs[category].current?.offsetTop;
 
                       if (offsetTop === undefined) {
                         return;
@@ -69,23 +69,18 @@ export class TabbedMenu extends Component<TabbedMenuProps> {
           }}
         >
           <Stack vertical fill px={2}>
-            {this.props.categoryEntries.map(
-              ([category, children]) => {
-                return (
-                  <Stack.Item
-                    key={category}
-                    innerRef={this.getCategoryRef(category)}
-                  >
-                    <Section
-                      fill
-                      title={category}
-                    >
-                      {children}
-                    </Section>
-                  </Stack.Item>
-                );
-              }
-            )}
+            {this.props.categoryEntries.map(([category, children]) => {
+              return (
+                <Stack.Item
+                  key={category}
+                  innerRef={this.getCategoryRef(category)}
+                >
+                  <Section fill title={category}>
+                    {children}
+                  </Section>
+                </Stack.Item>
+              );
+            })}
           </Stack>
         </Stack.Item>
       </Stack>
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/abductor.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/abductor.ts
index 9f0abe6da87a..58db32a372d4 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/abductor.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/abductor.ts
@@ -1,9 +1,9 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 const Abductor: Antagonist = {
-  key: "abductor",
-  name: "Abductor",
+  key: 'abductor',
+  name: 'Abductor',
   description: [
     multiline`
       Abductors are technologically advanced alien society set on cataloging
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/blob.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/blob.ts
index 1d2de66ab481..c562e4e5ee55 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/blob.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/blob.ts
@@ -1,5 +1,5 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 export const BLOB_MECHANICAL_DESCRIPTION = multiline`
   The blob infests the station and destroys everything in its path, including
@@ -9,11 +9,9 @@ export const BLOB_MECHANICAL_DESCRIPTION = multiline`
 `;
 
 const Blob: Antagonist = {
-  key: "blob",
-  name: "Blob",
-  description: [
-    BLOB_MECHANICAL_DESCRIPTION,
-  ],
+  key: 'blob',
+  name: 'Blob',
+  description: [BLOB_MECHANICAL_DESCRIPTION],
   category: Category.Midround,
 };
 
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/blobinfection.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/blobinfection.ts
index 45a8a03dc844..3cddceb3c3dd 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/blobinfection.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/blobinfection.ts
@@ -1,10 +1,10 @@
-import { Antagonist, Category } from "../base";
-import { BLOB_MECHANICAL_DESCRIPTION } from "./blob";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { BLOB_MECHANICAL_DESCRIPTION } from './blob';
+import { multiline } from 'common/string';
 
 const BlobInfection: Antagonist = {
-  key: "blobinfection",
-  name: "Blob Infection",
+  key: 'blobinfection',
+  name: 'Blob Infection',
   description: [
     multiline`
       At any point in the middle of the shift, be strucken with an infection
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/bloodbrother.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/bloodbrother.ts
index 3a05cf1ec00e..8d4d45f582f4 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/bloodbrother.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/bloodbrother.ts
@@ -1,9 +1,9 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 const BloodBrother: Antagonist = {
-  key: "bloodbrother",
-  name: "Blood Brother",
+  key: 'bloodbrother',
+  name: 'Blood Brother',
   description: [
     multiline`
       Team up with other crew members as blood brothers to combine the strengths
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/changeling.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/changeling.ts
index 114e6413850e..3368ff791760 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/changeling.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/changeling.ts
@@ -1,9 +1,9 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 const Changeling: Antagonist = {
-  key: "changeling",
-  name: "Changeling",
+  key: 'changeling',
+  name: 'Changeling',
   description: [
     multiline`
       A highly intelligent alien predator that is capable of altering their
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/clownoperative.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/clownoperative.ts
index ac305e2fe8b4..bcb16a8d95a6 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/clownoperative.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/clownoperative.ts
@@ -1,10 +1,10 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
-import { OPERATIVE_MECHANICAL_DESCRIPTION } from "./operative";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
+import { OPERATIVE_MECHANICAL_DESCRIPTION } from './operative';
 
 const ClownOperative: Antagonist = {
-  key: "clownoperative",
-  name: "Clown Operative",
+  key: 'clownoperative',
+  name: 'Clown Operative',
   description: [
     multiline`
       Honk! You have been chosen, for better or worse to join the Syndicate
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/cultist.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/cultist.ts
index ea27413786a9..a3bb81721428 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/cultist.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/cultist.ts
@@ -1,9 +1,9 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 const Cultist: Antagonist = {
-  key: "cultist",
-  name: "Cultist",
+  key: 'cultist',
+  name: 'Cultist',
   description: [
     multiline`
       The Geometer of Blood, Nar-Sie, has sent a number of her followers to
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/familyheadaspirant.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/familyheadaspirant.ts
index 6ed2e8dda575..f648fa1b723a 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/familyheadaspirant.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/familyheadaspirant.ts
@@ -1,10 +1,10 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
-import { GANGSTER_MECHANICAL_DESCRIPTION } from "./gangster";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
+import { GANGSTER_MECHANICAL_DESCRIPTION } from './gangster';
 
 const FamilyHeadAspirant: Antagonist = {
-  key: "familyheadaspirant",
-  name: "Family Head Aspirant",
+  key: 'familyheadaspirant',
+  name: 'Family Head Aspirant',
   description: [
     multiline`
       A form of family leader that can activate at any point in the middle
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/fugitive.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/fugitive.ts
index 23785c305448..0516788543fc 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/fugitive.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/fugitive.ts
@@ -1,9 +1,9 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 const Fugitive: Antagonist = {
-  key: "fugitive",
-  name: "Fugitive",
+  key: 'fugitive',
+  name: 'Fugitive',
   description: [
     multiline`
     Wherever you come from, you're being hunted. You have 10 minutes to prepare
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/gangster.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/gangster.ts
index 38df184b26aa..84fb130c06df 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/gangster.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/gangster.ts
@@ -1,18 +1,15 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
-export const GANGSTER_MECHANICAL_DESCRIPTION
-   = multiline`
+export const GANGSTER_MECHANICAL_DESCRIPTION = multiline`
       Convince people to join your family, wear your uniform, tag turf
       for the family, and accomplish your family's goals.
    `;
 
 const Gangster: Antagonist = {
-  key: "gangster",
-  name: "Family Leader",
-  description: [
-    GANGSTER_MECHANICAL_DESCRIPTION,
-  ],
+  key: 'gangster',
+  name: 'Family Leader',
+  description: [GANGSTER_MECHANICAL_DESCRIPTION],
   category: Category.Roundstart,
 };
 
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/headrevolutionary.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/headrevolutionary.ts
index ea670d854dfa..fd2081fe49e2 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/headrevolutionary.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/headrevolutionary.ts
@@ -1,19 +1,15 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
-export const REVOLUTIONARY_MECHANICAL_DESCRIPTION
-   = multiline`
+export const REVOLUTIONARY_MECHANICAL_DESCRIPTION = multiline`
       Armed with a flash, convert as many people to the revolution as you can.
       Kill or exile all heads of staff on the station.
    `;
 
 const HeadRevolutionary: Antagonist = {
-  key: "headrevolutionary",
-  name: "Head Revolutionary",
-  description: [
-    "VIVA LA REVOLUTION!",
-    REVOLUTIONARY_MECHANICAL_DESCRIPTION,
-  ],
+  key: 'headrevolutionary',
+  name: 'Head Revolutionary',
+  description: ['VIVA LA REVOLUTION!', REVOLUTIONARY_MECHANICAL_DESCRIPTION],
   category: Category.Roundstart,
 };
 
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/heretic.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/heretic.ts
index 611ad714eda8..b8daffc0b64d 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/heretic.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/heretic.ts
@@ -1,15 +1,14 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
-export const HERETIC_MECHANICAL_DESCRIPTION
-   = multiline`
+export const HERETIC_MECHANICAL_DESCRIPTION = multiline`
       Find hidden influences and sacrifice crew members to gain magical
       powers and ascend as one of several paths.
    `;
 
 const Heretic: Antagonist = {
-  key: "heretic",
-  name: "Heretic",
+  key: 'heretic',
+  name: 'Heretic',
   description: [
     multiline`
       Forgotten, devoured, gutted. Humanity has forgotten the eldritch forces
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/hereticsmuggler.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/hereticsmuggler.ts
index 8667e0b19991..6ce90a3552e3 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/hereticsmuggler.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/hereticsmuggler.ts
@@ -1,11 +1,11 @@
-import { Antagonist, Category } from "../base";
-import { HERETIC_MECHANICAL_DESCRIPTION } from "./heretic";
+import { Antagonist, Category } from '../base';
+import { HERETIC_MECHANICAL_DESCRIPTION } from './heretic';
 
 const HereticSmuggler: Antagonist = {
-  key: "hereticsmuggler",
-  name: "Heretic Smuggler",
+  key: 'hereticsmuggler',
+  name: 'Heretic Smuggler',
   description: [
-    "A form of heretic that can activate when joining an ongoing shift.",
+    'A form of heretic that can activate when joining an ongoing shift.',
     HERETIC_MECHANICAL_DESCRIPTION,
   ],
   category: Category.Latejoin,
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/loneoperative.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/loneoperative.ts
index b0de7f13b3e1..c74b2ca01b42 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/loneoperative.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/loneoperative.ts
@@ -1,10 +1,10 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
-import { OPERATIVE_MECHANICAL_DESCRIPTION } from "./operative";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
+import { OPERATIVE_MECHANICAL_DESCRIPTION } from './operative';
 
 const LoneOperative: Antagonist = {
-  key: "loneoperative",
-  name: "Lone Operative",
+  key: 'loneoperative',
+  name: 'Lone Operative',
   description: [
     multiline`
       A solo nuclear operative that has a higher chance of spawning the longer
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/malfai.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/malfai.ts
index ed6b5d7f9230..1aa9e0034bbd 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/malfai.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/malfai.ts
@@ -1,19 +1,16 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
-export const MALF_AI_MECHANICAL_DESCRIPTION
-  = multiline`
+export const MALF_AI_MECHANICAL_DESCRIPTION = multiline`
     With a law zero to complete your objectives at all costs, combine your
     omnipotence and malfunction modules to wreak havoc across the station.
     Go delta to destroy the station and all those who opposed you.
   `;
 
 const MalfAI: Antagonist = {
-  key: "malfai",
-  name: "Malfunctioning AI",
-  description: [
-    MALF_AI_MECHANICAL_DESCRIPTION,
-  ],
+  key: 'malfai',
+  name: 'Malfunctioning AI',
+  description: [MALF_AI_MECHANICAL_DESCRIPTION],
   category: Category.Roundstart,
 };
 
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/malfaimidround.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/malfaimidround.ts
index 1334e48379b0..d686a78af498 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/malfaimidround.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/malfaimidround.ts
@@ -1,10 +1,10 @@
-import { multiline } from "common/string";
-import { Antagonist, Category } from "../base";
-import { MALF_AI_MECHANICAL_DESCRIPTION } from "./malfai";
+import { multiline } from 'common/string';
+import { Antagonist, Category } from '../base';
+import { MALF_AI_MECHANICAL_DESCRIPTION } from './malfai';
 
 const MalfAIMidround: Antagonist = {
-  key: "malfaimidround",
-  name: "Value Drifted AI",
+  key: 'malfaimidround',
+  name: 'Value Drifted AI',
   description: [
     multiline`
       A form of malfunctioning AI that is given to existing AIs in the middle
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/nightmare.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/nightmare.ts
index 42cb1380bf46..b66f03f2b2c6 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/nightmare.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/nightmare.ts
@@ -1,9 +1,9 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 const Nightmare: Antagonist = {
-  key: "nightmare",
-  name: "Nightmare",
+  key: 'nightmare',
+  name: 'Nightmare',
   description: [
     multiline`
       Use your light eater to break sources of light to survive and thrive.
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/obsessed.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/obsessed.ts
index 4caf77f29d6e..fcb18419a81d 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/obsessed.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/obsessed.ts
@@ -1,9 +1,9 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 const Obsessed: Antagonist = {
-  key: "obsessed",
-  name: "Obsessed",
+  key: 'obsessed',
+  name: 'Obsessed',
   description: [
     multiline`
     You're obsessed with someone! Your obsession may begin to notice their
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/operative.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/operative.ts
index 582c74f003fb..a8b14e88fce8 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/operative.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/operative.ts
@@ -1,5 +1,5 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 export const OPERATIVE_MECHANICAL_DESCRIPTION = multiline`
   Retrieve the nuclear authentication disk, use it to activate the nuclear
@@ -7,8 +7,8 @@ export const OPERATIVE_MECHANICAL_DESCRIPTION = multiline`
 `;
 
 const Operative: Antagonist = {
-  key: "operative",
-  name: "Nuclear Operative",
+  key: 'operative',
+  name: 'Nuclear Operative',
   description: [
     multiline`
       Congratulations, agent. You have been chosen to join the Syndicate
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/operativemidround.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/operativemidround.ts
index ae23adc8151d..cd4e0e948588 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/operativemidround.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/operativemidround.ts
@@ -1,10 +1,10 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
-import { OPERATIVE_MECHANICAL_DESCRIPTION } from "./operative";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
+import { OPERATIVE_MECHANICAL_DESCRIPTION } from './operative';
 
 const OperativeMidround: Antagonist = {
-  key: "operativemidround",
-  name: "Nuclear Assailant",
+  key: 'operativemidround',
+  name: 'Nuclear Assailant',
   description: [
     multiline`
       A form of nuclear operative that is offered to ghosts in the middle
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/opportunist.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/opportunist.ts
index 74ed11b1803e..c3e26b517e1e 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/opportunist.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/opportunist.ts
@@ -1,10 +1,10 @@
-import { multiline } from "common/string";
-import { Antagonist, Category } from "../base";
-import { THIEF_MECHANICAL_DESCRIPTION } from "./thief";
+import { multiline } from 'common/string';
+import { Antagonist, Category } from '../base';
+import { THIEF_MECHANICAL_DESCRIPTION } from './thief';
 
 const Opportunist: Antagonist = {
-  key: "opportunist",
-  name: "Opportunist",
+  key: 'opportunist',
+  name: 'Opportunist',
   description: [
     multiline`A form of thief that can activate at any point in the middle
     of the shift, looking to line their paychecks while nobody's looking.`,
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/provocateur.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/provocateur.ts
index a55ab96435d3..b8b847da11de 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/provocateur.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/provocateur.ts
@@ -1,10 +1,10 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
-import { REVOLUTIONARY_MECHANICAL_DESCRIPTION } from "./headrevolutionary";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
+import { REVOLUTIONARY_MECHANICAL_DESCRIPTION } from './headrevolutionary';
 
 const Provocateur: Antagonist = {
-  key: "provocateur",
-  name: "Provocateur",
+  key: 'provocateur',
+  name: 'Provocateur',
   description: [
     multiline`
       A form of head revolutionary that can activate when joining an ongoing
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/revenant.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/revenant.ts
index f351dac602a7..a23b4e178c87 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/revenant.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/revenant.ts
@@ -1,9 +1,9 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 const Revenant: Antagonist = {
-  key: "revenant",
-  name: "Revenant",
+  key: 'revenant',
+  name: 'Revenant',
   description: [
     multiline`
       Become the mysterious revenant. Break windows, overload lights, and eat
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/sentientdisease.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/sentientdisease.ts
index 4691fda264e4..fabe1d34e5f5 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/sentientdisease.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/sentientdisease.ts
@@ -1,9 +1,9 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 const SentientDisease: Antagonist = {
-  key: "sentientdisease",
-  name: "Sentient Disease",
+  key: 'sentientdisease',
+  name: 'Sentient Disease',
   description: [
     multiline`
       Mutate and spread yourself and infect as much of the crew as possible
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/spacedragon.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/spacedragon.ts
index f4bebfcf50e6..e3e8940dda91 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/spacedragon.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/spacedragon.ts
@@ -1,9 +1,9 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 const SpaceDragon: Antagonist = {
-  key: "spacedragon",
-  name: "Space Dragon",
+  key: 'spacedragon',
+  name: 'Space Dragon',
   description: [
     multiline`
       Become a ferocious space dragon. Breathe fire, summon an army of space
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/spaceninja.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/spaceninja.ts
index 971fe8160619..18ce064b3738 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/spaceninja.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/spaceninja.ts
@@ -1,9 +1,9 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 const SpaceNinja: Antagonist = {
-  key: "spaceninja",
-  name: "Space Ninja",
+  key: 'spaceninja',
+  name: 'Space Ninja',
   description: [
     multiline`
       The Spider Clan practice a sort of augmentation of human flesh in order to
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/syndicateinfiltrator.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/syndicateinfiltrator.ts
index 2bcafe666f8e..45ad29292b9c 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/syndicateinfiltrator.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/syndicateinfiltrator.ts
@@ -1,11 +1,11 @@
-import { Antagonist, Category } from "../base";
-import { TRAITOR_MECHANICAL_DESCRIPTION } from "./traitor";
+import { Antagonist, Category } from '../base';
+import { TRAITOR_MECHANICAL_DESCRIPTION } from './traitor';
 
 const SyndicateInfiltrator: Antagonist = {
-  key: "syndicateinfiltrator",
-  name: "Syndicate Infiltrator",
+  key: 'syndicateinfiltrator',
+  name: 'Syndicate Infiltrator',
   description: [
-    "A form of traitor that can activate when joining an ongoing shift.",
+    'A form of traitor that can activate when joining an ongoing shift.',
     TRAITOR_MECHANICAL_DESCRIPTION,
   ],
   category: Category.Latejoin,
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/syndicatesleeperagent.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/syndicatesleeperagent.ts
index bc3fb9d44f14..a692736c408e 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/syndicatesleeperagent.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/syndicatesleeperagent.ts
@@ -1,10 +1,10 @@
-import { Antagonist, Category } from "../base";
-import { TRAITOR_MECHANICAL_DESCRIPTION } from "./traitor";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { TRAITOR_MECHANICAL_DESCRIPTION } from './traitor';
+import { multiline } from 'common/string';
 
 const SyndicateSleeperAgent: Antagonist = {
-  key: "syndicatesleeperagent",
-  name: "Syndicate Sleeper Agent",
+  key: 'syndicatesleeperagent',
+  name: 'Syndicate Sleeper Agent',
   description: [
     multiline`
       A form of traitor that can activate at any point in the middle
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/thief.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/thief.ts
index f620b2ba4b53..2c3f5ff12645 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/thief.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/thief.ts
@@ -1,15 +1,14 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
-export const THIEF_MECHANICAL_DESCRIPTION
-  = multiline`
+export const THIEF_MECHANICAL_DESCRIPTION = multiline`
       While all the chaos of the station goes down, try to escape with
       some loot without getting caught!
     `;
 
 const Thief: Antagonist = {
-  key: "thief",
-  name: "Thief",
+  key: 'thief',
+  name: 'Thief',
   description: [
     `You're working at a state of the art research station, yet you're
     running into financial issues. Nobody will miss a couple expensive doodads,
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/traitor.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/traitor.ts
index 218c2822cf3b..86f4089277a9 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/traitor.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/traitor.ts
@@ -1,15 +1,14 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
-export const TRAITOR_MECHANICAL_DESCRIPTION
-   = multiline`
+export const TRAITOR_MECHANICAL_DESCRIPTION = multiline`
       Start with an uplink to purchase your gear and take on your sinister
       objectives. Ascend through the ranks and become an infamous legend.
    `;
 
 const Traitor: Antagonist = {
-  key: "traitor",
-  name: "Traitor",
+  key: 'traitor',
+  name: 'Traitor',
   description: [
     multiline`
       An unpaid debt. A score to be settled. Maybe you were just in the wrong
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/wizard.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/wizard.ts
index 0455235cb586..9c8f5dc84c78 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/wizard.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/wizard.ts
@@ -1,15 +1,14 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
-export const WIZARD_MECHANICAL_DESCRIPTION
-  = multiline`
+export const WIZARD_MECHANICAL_DESCRIPTION = multiline`
       Choose between a variety of powerful spells in order to cause chaos
       among Space Station 13.
     `;
 
 const Wizard: Antagonist = {
-  key: "wizard",
-  name: "Wizard",
+  key: 'wizard',
+  name: 'Wizard',
   description: [
     `"GREETINGS. WE'RE THE WIZARDS OF THE WIZARD'S FEDERATION."`,
     WIZARD_MECHANICAL_DESCRIPTION,
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/wizardmidround.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/wizardmidround.ts
index 3a1f88e8f7ac..b36a9f5170f9 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/wizardmidround.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/wizardmidround.ts
@@ -1,11 +1,11 @@
-import { Antagonist, Category } from "../base";
-import { WIZARD_MECHANICAL_DESCRIPTION } from "./wizard";
+import { Antagonist, Category } from '../base';
+import { WIZARD_MECHANICAL_DESCRIPTION } from './wizard';
 
 const WizardMidround: Antagonist = {
-  key: "wizardmidround",
-  name: "Wizard (Midround)",
+  key: 'wizardmidround',
+  name: 'Wizard (Midround)',
   description: [
-    "A form of wizard that is offered to ghosts in the middle of the shift.",
+    'A form of wizard that is offered to ghosts in the middle of the shift.',
     WIZARD_MECHANICAL_DESCRIPTION,
   ],
   category: Category.Midround,
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/xenomorph.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/xenomorph.ts
index 82e75ce7d8e5..6bea64450e93 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/xenomorph.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/antagonists/antagonists/xenomorph.ts
@@ -1,9 +1,9 @@
-import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { Antagonist, Category } from '../base';
+import { multiline } from 'common/string';
 
 const Xenomorph: Antagonist = {
-  key: "xenomorph",
-  name: "Xenomorph",
+  key: 'xenomorph',
+  name: 'Xenomorph',
   description: [
     multiline`
       Become the extraterrestrial xenomorph. Start as a larva, and progress
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/data.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/data.ts
index 5b98d39b053f..7fa5320315f8 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/data.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/data.ts
@@ -1,25 +1,25 @@
-import { BooleanLike } from "common/react";
-import { sendAct } from "../../backend";
-import { Gender } from "./preferences/gender";
+import { BooleanLike } from 'common/react';
+import { sendAct } from '../../backend';
+import { Gender } from './preferences/gender';
 
 export enum Food {
-  Alcohol = "ALCOHOL",
-  Breakfast = "BREAKFAST",
-  Cloth = "CLOTH",
-  Dairy = "DAIRY",
-  Fried = "FRIED",
-  Fruit = "FRUIT",
-  Grain = "GRAIN",
-  Gross = "GROSS",
-  Junkfood = "JUNKFOOD",
-  Meat = "MEAT",
-  Nuts = "NUTS",
-  Pineapple = "PINEAPPLE",
-  Raw = "RAW",
-  Seafood = "SEAFOOD",
-  Sugar = "SUGAR",
-  Toxic = "TOXIC",
-  Vegetables = "VEGETABLES",
+  Alcohol = 'ALCOHOL',
+  Breakfast = 'BREAKFAST',
+  Cloth = 'CLOTH',
+  Dairy = 'DAIRY',
+  Fried = 'FRIED',
+  Fruit = 'FRUIT',
+  Grain = 'GRAIN',
+  Gross = 'GROSS',
+  Junkfood = 'JUNKFOOD',
+  Meat = 'MEAT',
+  Nuts = 'NUTS',
+  Pineapple = 'PINEAPPLE',
+  Raw = 'RAW',
+  Seafood = 'SEAFOOD',
+  Sugar = 'SUGAR',
+  Toxic = 'TOXIC',
+  Vegetables = 'VEGETABLES',
 }
 
 export enum JobPriority {
@@ -56,7 +56,6 @@ export type Species = {
     disliked_food: Food[];
     toxic_food: Food[];
   };
-
 };
 
 export type Perk = {
@@ -74,7 +73,7 @@ export type Job = {
   department: string;
   // PARIAH EDIT
   alt_titles?: string[];
-// PARIAH EDIT END
+  // PARIAH EDIT END
 };
 
 export type Quirk = {
@@ -107,15 +106,13 @@ export enum GamePreferencesSelectedPage {
   Keybindings,
 }
 
-export const createSetPreference = (
-  act: typeof sendAct,
-  preference: string
-) => (value: unknown) => {
-  act("set_preference", {
-    preference,
-    value,
-  });
-};
+export const createSetPreference =
+  (act: typeof sendAct, preference: string) => (value: unknown) => {
+    act('set_preference', {
+      preference,
+      value,
+    });
+  };
 
 export enum Window {
   Character = 0,
@@ -135,7 +132,7 @@ export type PreferencesMenuData = {
     features: Record<string, string>;
     game_preferences: Record<string, unknown>;
     non_contextual: {
-      random_body: RandomSetting,
+      random_body: RandomSetting;
       [otherKey: string]: unknown;
     };
     secondary_features: Record<string, unknown>;
@@ -152,17 +149,19 @@ export type PreferencesMenuData = {
     randomization: Record<string, RandomSetting>;
   };
 
-  content_unlocked: BooleanLike,
+  content_unlocked: BooleanLike;
 
   job_bans?: string[];
   job_days_left?: Record<string, number>;
-  job_required_experience?: Record<string, {
-    experience_type: string,
-    required_playtime: number,
-  }>;
+  job_required_experience?: Record<
+    string,
+    {
+      experience_type: string;
+      required_playtime: number;
+    }
+  >;
   job_preferences: Record<string, JobPriority>;
 
-
   job_alt_titles: Record<string, string>; // PARIAH EDIT ADDITION
 
   keybindings: Record<string, string[]>;
@@ -187,7 +186,7 @@ export type ServerData = {
   names: {
     types: Record<string, Name>;
   };
-  quirks: QuirkInfo,
+  quirks: QuirkInfo;
   random: {
     randomizable: string[];
   };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/index.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/index.tsx
index f7b3f87c8a0a..3dcf515a5467 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/index.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/index.tsx
@@ -1,8 +1,12 @@
-import { exhaustiveCheck } from "common/exhaustive";
-import { useBackend } from "../../backend";
-import { GamePreferencesSelectedPage, PreferencesMenuData, Window } from "./data";
-import { CharacterPreferenceWindow } from "./CharacterPreferenceWindow";
-import { GamePreferenceWindow } from "./GamePreferenceWindow";
+import { exhaustiveCheck } from 'common/exhaustive';
+import { useBackend } from '../../backend';
+import {
+  GamePreferencesSelectedPage,
+  PreferencesMenuData,
+  Window,
+} from './data';
+import { CharacterPreferenceWindow } from './CharacterPreferenceWindow';
+import { GamePreferenceWindow } from './GamePreferenceWindow';
 
 export const PreferencesMenu = (props, context) => {
   const { data } = useBackend<PreferencesMenuData>(context);
@@ -15,9 +19,11 @@ export const PreferencesMenu = (props, context) => {
     case Window.Game:
       return <GamePreferenceWindow />;
     case Window.Keybindings:
-      return (<GamePreferenceWindow
-        startingPage={GamePreferencesSelectedPage.Keybindings}
-      />);
+      return (
+        <GamePreferenceWindow
+          startingPage={GamePreferencesSelectedPage.Keybindings}
+        />
+      );
     default:
       exhaustiveCheck(window);
   }
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/names.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/names.tsx
index 8f798394491f..f7dd18901ba3 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/names.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/names.tsx
@@ -1,156 +1,171 @@
-import { binaryInsertWith, sortBy } from "common/collections";
-import { useLocalState } from "../../backend";
-import { Box, Button, FitText, Icon, Input, LabeledList, Modal, Section, Stack, TrackOutsideClicks } from "../../components";
-import { Name } from "./data";
-import { ServerPreferencesFetcher } from "./ServerPreferencesFetcher";
+import { binaryInsertWith, sortBy } from 'common/collections';
+import { useLocalState } from '../../backend';
+import {
+  Box,
+  Button,
+  FitText,
+  Icon,
+  Input,
+  LabeledList,
+  Modal,
+  Section,
+  Stack,
+  TrackOutsideClicks,
+} from '../../components';
+import { Name } from './data';
+import { ServerPreferencesFetcher } from './ServerPreferencesFetcher';
 
 type NameWithKey = {
-  key: string,
-  name: Name,
+  key: string;
+  name: Name;
 };
 
 const binaryInsertName = binaryInsertWith<NameWithKey>(({ key }) => key);
 
-const sortNameWithKeyEntries = sortBy<[string, NameWithKey[]]>(
-  ([key]) => key,
-);
+const sortNameWithKeyEntries = sortBy<[string, NameWithKey[]]>(([key]) => key);
 
-export const MultiNameInput = (props: {
-  handleClose: () => void,
-  handleRandomizeName: (nameType: string) => void,
-  handleUpdateName: (nameType: string, value: string) => void,
-  names: Record<string, string>,
-}, context) => {
-  const [currentlyEditingName, setCurrentlyEditingName]
-    = useLocalState<string | null>(context, "currentlyEditingName", null);
+export const MultiNameInput = (
+  props: {
+    handleClose: () => void;
+    handleRandomizeName: (nameType: string) => void;
+    handleUpdateName: (nameType: string, value: string) => void;
+    names: Record<string, string>;
+  },
+  context,
+) => {
+  const [currentlyEditingName, setCurrentlyEditingName] = useLocalState<
+    string | null
+  >(context, 'currentlyEditingName', null);
 
   return (
-    <ServerPreferencesFetcher render={data => {
-      if (!data) {
-        return null;
-      }
-
-      const namesIntoGroups: Record<string, NameWithKey[]> = {};
-
-      for (const [key, name] of Object.entries(data.names.types)) {
-        namesIntoGroups[name.group] = binaryInsertName(
-          namesIntoGroups[name.group] || [],
-          {
-            key,
-            name,
-          }
-        );
-      }
-
-      return (
-        <Modal style={{
-          "margin": "0 auto",
-          "width": "40%",
-        }}>
-          <TrackOutsideClicks onOutsideClick={props.handleClose}>
-            <Section
-              buttons={(
-                <Button
-                  color="red"
-                  onClick={props.handleClose}
-                >
-                  Close
-                </Button>
-              )}
-              title="Alternate names"
-            >
-              <LabeledList>
-                {sortNameWithKeyEntries(Object.entries(namesIntoGroups))
-                  .map(([_, names], index, collection) => (
-                    <>
-                      {names.map(({ key, name }) => {
-                        let content;
-
-                        if (currentlyEditingName === key) {
-                          const updateName = (event, value) => {
-                            props.handleUpdateName(
-                              key,
-                              value,
+    <ServerPreferencesFetcher
+      render={(data) => {
+        if (!data) {
+          return null;
+        }
+
+        const namesIntoGroups: Record<string, NameWithKey[]> = {};
+
+        for (const [key, name] of Object.entries(data.names.types)) {
+          namesIntoGroups[name.group] = binaryInsertName(
+            namesIntoGroups[name.group] || [],
+            {
+              key,
+              name,
+            },
+          );
+        }
+
+        return (
+          <Modal
+            style={{
+              margin: '0 auto',
+              width: '40%',
+            }}
+          >
+            <TrackOutsideClicks onOutsideClick={props.handleClose}>
+              <Section
+                buttons={
+                  <Button color="red" onClick={props.handleClose}>
+                    Close
+                  </Button>
+                }
+                title="Alternate names"
+              >
+                <LabeledList>
+                  {sortNameWithKeyEntries(Object.entries(namesIntoGroups)).map(
+                    ([_, names], index, collection) => (
+                      <>
+                        {names.map(({ key, name }) => {
+                          let content;
+
+                          if (currentlyEditingName === key) {
+                            const updateName = (event, value) => {
+                              props.handleUpdateName(key, value);
+
+                              setCurrentlyEditingName(null);
+                            };
+
+                            content = (
+                              <Input
+                                autoSelect
+                                onEnter={updateName}
+                                onChange={updateName}
+                                onEscape={() => {
+                                  setCurrentlyEditingName(null);
+                                }}
+                                value={props.names[key]}
+                              />
+                            );
+                          } else {
+                            content = (
+                              <Button
+                                width="100%"
+                                onClick={(event) => {
+                                  setCurrentlyEditingName(key);
+                                  event.cancelBubble = true;
+                                  event.stopPropagation();
+                                }}
+                              >
+                                <FitText maxFontSize={12} maxWidth={130}>
+                                  {props.names[key]}
+                                </FitText>
+                              </Button>
                             );
+                          }
 
-                            setCurrentlyEditingName(null);
-                          };
-
-                          content = (
-                            <Input
-                              autoSelect
-                              onEnter={updateName}
-                              onChange={updateName}
-                              onEscape={() => {
-                                setCurrentlyEditingName(null);
-                              }}
-                              value={props.names[key]}
-                            />
-                          );
-                        } else {
-                          content = (
-                            <Button
-                              width="100%"
-                              onClick={(event) => {
-                                setCurrentlyEditingName(key);
-                                event.cancelBubble = true;
-                                event.stopPropagation();
-                              }}
+                          return (
+                            <LabeledList.Item
+                              key={key}
+                              label={name.explanation}
                             >
-                              <FitText maxFontSize={12} maxWidth={130}>
-                                {props.names[key]}
-                              </FitText>
-                            </Button>
+                              <Stack fill>
+                                <Stack.Item grow>{content}</Stack.Item>
+
+                                {!!name.can_randomize && (
+                                  <Stack.Item>
+                                    <Button
+                                      icon="dice"
+                                      tooltip="Randomize"
+                                      tooltipPosition="right"
+                                      onClick={() => {
+                                        props.handleRandomizeName(key);
+                                      }}
+                                    />
+                                  </Stack.Item>
+                                )}
+                              </Stack>
+                            </LabeledList.Item>
                           );
-                        }
-
-                        return (
-                          <LabeledList.Item
-                            key={key}
-                            label={name.explanation}
-                          >
-                            <Stack fill>
-                              <Stack.Item grow>
-                                {content}
-                              </Stack.Item>
-
-                              {!!name.can_randomize && (
-                                <Stack.Item>
-                                  <Button
-                                    icon="dice"
-                                    tooltip="Randomize"
-                                    tooltipPosition="right"
-                                    onClick={() => {
-                                      props.handleRandomizeName(key);
-                                    }}
-                                  />
-                                </Stack.Item>
-                              )}
-                            </Stack>
-                          </LabeledList.Item>
-                        );
-                      })}
-
-                      {(index !== collection.length - 1)
-                        && <LabeledList.Divider />}
-                    </>
-                  ))}
-              </LabeledList>
-            </Section>
-          </TrackOutsideClicks>
-        </Modal>
-      );
-    }} />
+                        })}
+
+                        {index !== collection.length - 1 && (
+                          <LabeledList.Divider />
+                        )}
+                      </>
+                    ),
+                  )}
+                </LabeledList>
+              </Section>
+            </TrackOutsideClicks>
+          </Modal>
+        );
+      }}
+    />
   );
 };
 
-export const NameInput = (props: {
-  handleUpdateName: (name: string) => void,
-  name: string,
-  openMultiNameInput: () => void,
-}, context) => {
-  const [lastNameBeforeEdit, setLastNameBeforeEdit]
-    = useLocalState<string | null>(context, "lastNameBeforeEdit", null);
+export const NameInput = (
+  props: {
+    handleUpdateName: (name: string) => void;
+    name: string;
+    openMultiNameInput: () => void;
+  },
+  context,
+) => {
+  const [lastNameBeforeEdit, setLastNameBeforeEdit] = useLocalState<
+    string | null
+  >(context, 'lastNameBeforeEdit', null);
   const editing = lastNameBeforeEdit === props.name;
 
   const updateName = (e, value) => {
@@ -159,19 +174,28 @@ export const NameInput = (props: {
   };
 
   return (
-    <Button captureKeys={!editing} onClick={() => {
-      setLastNameBeforeEdit(props.name);
-    }} textAlign="center" width="100%" height="28px">
+    <Button
+      captureKeys={!editing}
+      onClick={() => {
+        setLastNameBeforeEdit(props.name);
+      }}
+      textAlign="center"
+      width="100%"
+      height="28px"
+    >
       <Stack align="center" fill>
         <Stack.Item>
-          <Icon style={{
-            "color": "rgba(255, 255, 255, 0.5)",
-            "font-size": "17px",
-          }} name="edit" />
+          <Icon
+            style={{
+              color: 'rgba(255, 255, 255, 0.5)',
+              'font-size': '17px',
+            }}
+            name="edit"
+          />
         </Stack.Item>
 
         <Stack.Item grow position="relative">
-          {editing && (
+          {(editing && (
             <Input
               autoSelect
               onEnter={updateName}
@@ -181,57 +205,64 @@ export const NameInput = (props: {
               }}
               value={props.name}
             />
-          ) || (
+          )) || (
             <FitText maxFontSize={16} maxWidth={130}>
               {props.name}
             </FitText>
           )}
 
-          <Box style={{
-            "border-bottom": "2px dotted rgba(255, 255, 255, 0.8)",
-            right: "50%",
-            transform: "translateX(50%)",
-            position: "absolute",
-            width: "90%",
-            bottom: "-1px",
-          }} />
+          <Box
+            style={{
+              'border-bottom': '2px dotted rgba(255, 255, 255, 0.8)',
+              right: '50%',
+              transform: 'translateX(50%)',
+              position: 'absolute',
+              width: '90%',
+              bottom: '-1px',
+            }}
+          />
         </Stack.Item>
 
         {/* We only know other names when the server tells us */}
-        <ServerPreferencesFetcher render={data => data ? (
-          <Stack.Item>
-            <Button
-              as="span"
-              tooltip="Alternate Names"
-              tooltipPosition="bottom"
-              style={{
-                background: "rgba(0, 0, 0, 0.7)",
-                position: "absolute",
-                right: "2px",
-                top: "50%",
-                transform: "translateY(-50%)",
-                width: "2%",
-              }}
-              onClick={(event) => {
-                props.openMultiNameInput();
+        <ServerPreferencesFetcher
+          render={(data) =>
+            data ? (
+              <Stack.Item>
+                <Button
+                  as="span"
+                  tooltip="Alternate Names"
+                  tooltipPosition="bottom"
+                  style={{
+                    background: 'rgba(0, 0, 0, 0.7)',
+                    position: 'absolute',
+                    right: '2px',
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    width: '2%',
+                  }}
+                  onClick={(event) => {
+                    props.openMultiNameInput();
 
-                // We're a button inside a button.
-                // Did you know that's against the W3C standard? :)
-                event.cancelBubble = true;
-                event.stopPropagation();
-              }}
-            >
-              <Icon name="ellipsis-v" style={{
-                "position": "relative",
-                "left": "1px",
-                "min-width": "0px",
-              }} />
-            </Button>
-          </Stack.Item>
-        ) : null} />
+                    // We're a button inside a button.
+                    // Did you know that's against the W3C standard? :)
+                    event.cancelBubble = true;
+                    event.stopPropagation();
+                  }}
+                >
+                  <Icon
+                    name="ellipsis-v"
+                    style={{
+                      position: 'relative',
+                      left: '1px',
+                      'min-width': '0px',
+                    }}
+                  />
+                </Button>
+              </Stack.Item>
+            ) : null
+          }
+        />
       </Stack>
     </Button>
   );
 };
-
-
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/base.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/base.tsx
index 9c1a7c7a8400..d57970af81cf 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/base.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/base.tsx
@@ -1,11 +1,19 @@
-import { sortBy, sortStrings } from "common/collections";
-import { BooleanLike, classes } from "common/react";
-import { ComponentType, createComponentVNode, InfernoNode } from "inferno";
-import { VNodeFlags } from "inferno-vnode-flags";
-import { sendAct, useBackend, useLocalState } from "../../../../backend";
-import { Box, Button, Dropdown, NumberInput, Stack, TextArea, Input } from "../../../../components";
-import { createSetPreference, PreferencesMenuData } from "../../data";
-import { ServerPreferencesFetcher } from "../../ServerPreferencesFetcher";
+import { sortBy, sortStrings } from 'common/collections';
+import { BooleanLike, classes } from 'common/react';
+import { ComponentType, createComponentVNode, InfernoNode } from 'inferno';
+import { VNodeFlags } from 'inferno-vnode-flags';
+import { sendAct, useBackend, useLocalState } from '../../../../backend';
+import {
+  Box,
+  Button,
+  Dropdown,
+  NumberInput,
+  Stack,
+  TextArea,
+  Input,
+} from '../../../../components';
+import { createSetPreference, PreferencesMenuData } from '../../data';
+import { ServerPreferencesFetcher } from '../../ServerPreferencesFetcher';
 
 export const sortChoices = sortBy<[string, InfernoNode]>(([name]) => name);
 
@@ -15,11 +23,7 @@ export type Feature<
   TServerData = undefined,
 > = {
   name: string;
-  component: FeatureValue<
-    TReceiving,
-    TSending,
-    TServerData
-  >;
+  component: FeatureValue<TReceiving, TSending, TServerData>;
   category?: string;
   description?: string;
 };
@@ -34,54 +38,51 @@ type FeatureValue<
   TReceiving,
   TSending = TReceiving,
   TServerData = undefined,
->
-  = ComponentType<FeatureValueProps<
-      TReceiving,
-      TSending,
-      TServerData
-    >>;
+> = ComponentType<FeatureValueProps<TReceiving, TSending, TServerData>>;
 
 export type FeatureValueProps<
   TReceiving,
   TSending = TReceiving,
   TServerData = undefined,
 > = {
-  act: typeof sendAct,
-  featureId: string,
-  handleSetValue: (newValue: TSending) => void,
-  serverData: TServerData | undefined,
-  shrink?: boolean,
-  value: TReceiving,
+  act: typeof sendAct;
+  featureId: string;
+  handleSetValue: (newValue: TSending) => void;
+  serverData: TServerData | undefined;
+  shrink?: boolean;
+  value: TReceiving;
 };
 
 export const FeatureColorInput = (props: FeatureValueProps<string>) => {
   return (
-    <Button onClick={() => {
-      props.act("set_color_preference", {
-        preference: props.featureId,
-      });
-    }}>
+    <Button
+      onClick={() => {
+        props.act('set_color_preference', {
+          preference: props.featureId,
+        });
+      }}
+    >
       <Stack align="center" fill>
         <Stack.Item>
-          <Box style={{
-            background: props.value.startsWith("#")
-              ? props.value
-              : `#${props.value}`,
-            border: "2px solid white",
-            "box-sizing": "content-box",
-            height: "11px",
-            width: "11px",
-            ...(props.shrink ? {
-              "margin": "1px",
-            } : {}),
-          }} />
+          <Box
+            style={{
+              background: props.value.startsWith('#')
+                ? props.value
+                : `#${props.value}`,
+              border: '2px solid white',
+              'box-sizing': 'content-box',
+              height: '11px',
+              width: '11px',
+              ...(props.shrink
+                ? {
+                    margin: '1px',
+                  }
+                : {}),
+            }}
+          />
         </Stack.Item>
 
-        {!props.shrink && (
-          <Stack.Item>
-            Change
-          </Stack.Item>
-        )}
+        {!props.shrink && <Stack.Item>Change</Stack.Item>}
       </Stack>
     </Button>
   );
@@ -90,25 +91,29 @@ export const FeatureColorInput = (props: FeatureValueProps<string>) => {
 export type FeatureToggle = Feature<BooleanLike, boolean>;
 
 export const CheckboxInput = (
-  props: FeatureValueProps<BooleanLike, boolean>
+  props: FeatureValueProps<BooleanLike, boolean>,
 ) => {
-  return (<Button.Checkbox
-    checked={!!props.value}
-    onClick={() => {
-      props.handleSetValue(!props.value);
-    }}
-  />);
+  return (
+    <Button.Checkbox
+      checked={!!props.value}
+      onClick={() => {
+        props.handleSetValue(!props.value);
+      }}
+    />
+  );
 };
 
 export const CheckboxInputInverse = (
-  props: FeatureValueProps<BooleanLike, boolean>
+  props: FeatureValueProps<BooleanLike, boolean>,
 ) => {
-  return (<Button.Checkbox
-    checked={!props.value}
-    onClick={() => {
-      props.handleSetValue(!props.value);
-    }}
-  />);
+  return (
+    <Button.Checkbox
+      checked={!props.value}
+      onClick={() => {
+        props.handleSetValue(!props.value);
+      }}
+    />
+  );
 };
 
 export const createDropdownInput = <T extends string | number = string>(
@@ -117,20 +122,23 @@ export const createDropdownInput = <T extends string | number = string>(
   dropdownProps?: Record<T, unknown>,
 ): FeatureValue<T> => {
   return (props: FeatureValueProps<T>) => {
-    return (<Dropdown
-      selected={props.value}
-      displayText={choices[props.value]}
-      onSelected={props.handleSetValue}
-      width="100%"
-      options={sortChoices(Object.entries(choices))
-        .map(([dataValue, label]) => {
-          return {
-            displayText: label,
-            value: dataValue,
-          };
-        })}
-      {...dropdownProps}
-    />);
+    return (
+      <Dropdown
+        selected={props.value}
+        displayText={choices[props.value]}
+        onSelected={props.handleSetValue}
+        width="100%"
+        options={sortChoices(Object.entries(choices)).map(
+          ([dataValue, label]) => {
+            return {
+              displayText: label,
+              value: dataValue,
+            };
+          },
+        )}
+        {...dropdownProps}
+      />
+    );
   };
 };
 
@@ -142,46 +150,38 @@ export type FeatureChoicedServerData = {
 
 export type FeatureChoiced = Feature<string, string, FeatureChoicedServerData>;
 
-const capitalizeFirstLetter = (text: string) => (
-  text.toString().charAt(0).toUpperCase() + text.toString().slice(1)
-);
+const capitalizeFirstLetter = (text: string) =>
+  text.toString().charAt(0).toUpperCase() + text.toString().slice(1);
 
 export const StandardizedDropdown = (props: {
-  choices: string[],
-  disabled?: boolean,
-  displayNames: Record<string, InfernoNode>,
-  onSetValue: (newValue: string) => void,
-  value: string,
+  choices: string[];
+  disabled?: boolean;
+  displayNames: Record<string, InfernoNode>;
+  onSetValue: (newValue: string) => void;
+  value: string;
 }) => {
-  const {
-    choices,
-    disabled,
-    displayNames,
-    onSetValue,
-    value,
-  } = props;
-
-  return (<Dropdown
-    disabled={disabled}
-    selected={value}
-    onSelected={onSetValue}
-    width="100%"
-    displayText={displayNames[value]}
-    options={
-      choices
-        .map(choice => {
-          return {
-            displayText: displayNames[choice],
-            value: choice,
-          };
-        })
-    }
-  />);
+  const { choices, disabled, displayNames, onSetValue, value } = props;
+
+  return (
+    <Dropdown
+      disabled={disabled}
+      selected={value}
+      onSelected={onSetValue}
+      width="100%"
+      displayText={displayNames[value]}
+      options={choices.map((choice) => {
+        return {
+          displayText: displayNames[choice],
+          value: choice,
+        };
+      })}
+    />
+  );
 };
 
 export const FeatureDropdownInput = (
   props: FeatureValueProps<string, string, FeatureChoicedServerData> & {
-    disabled?: boolean,
+    disabled?: boolean;
   },
 ) => {
   const serverData = props.serverData;
@@ -189,18 +189,24 @@ export const FeatureDropdownInput = (
     return null;
   }
 
-  const displayNames = serverData.display_names
-    || Object.fromEntries(
-      serverData.choices.map(choice => [choice, capitalizeFirstLetter(choice)])
+  const displayNames =
+    serverData.display_names ||
+    Object.fromEntries(
+      serverData.choices.map((choice) => [
+        choice,
+        capitalizeFirstLetter(choice),
+      ]),
     );
 
-  return (<StandardizedDropdown
-    choices={sortStrings(serverData.choices)}
-    disabled={props.disabled}
-    displayNames={displayNames}
-    onSetValue={props.handleSetValue}
-    value={props.value}
-  />);
+  return (
+    <StandardizedDropdown
+      choices={sortStrings(serverData.choices)}
+      disabled={props.disabled}
+      displayNames={displayNames}
+      onSetValue={props.handleSetValue}
+      value={props.value}
+    />
+  );
 };
 
 export type FeatureWithIcons<T> = Feature<
@@ -210,9 +216,13 @@ export type FeatureWithIcons<T> = Feature<
 >;
 
 export const FeatureIconnedDropdownInput = (
-  props: FeatureValueProps<{
-    value: string,
-  }, string, FeatureChoicedServerData>,
+  props: FeatureValueProps<
+    {
+      value: string;
+    },
+    string,
+    FeatureChoicedServerData
+  >,
 ) => {
   const serverData = props.serverData;
   if (!serverData) {
@@ -221,9 +231,13 @@ export const FeatureIconnedDropdownInput = (
 
   const icons = serverData.icons;
 
-  const textNames = serverData.display_names
-    || Object.fromEntries(
-      serverData.choices.map(choice => [choice, capitalizeFirstLetter(choice)])
+  const textNames =
+    serverData.display_names ||
+    Object.fromEntries(
+      serverData.choices.map((choice) => [
+        choice,
+        capitalizeFirstLetter(choice),
+      ]),
     );
 
   const displayNames = Object.fromEntries(
@@ -235,68 +249,72 @@ export const FeatureIconnedDropdownInput = (
         element = (
           <Stack>
             <Stack.Item>
-              <Box className={classes([
-                "preferences32x32",
-                icon,
-              ])} style={{
-                "transform": "scale(0.8)",
-              }} />
+              <Box
+                className={classes(['preferences32x32', icon])}
+                style={{
+                  transform: 'scale(0.8)',
+                }}
+              />
             </Stack.Item>
 
-            <Stack.Item grow>
-              {element}
-            </Stack.Item>
+            <Stack.Item grow>{element}</Stack.Item>
           </Stack>
         );
       }
 
       return [choice, element];
-    })
+    }),
   );
 
-  return (<StandardizedDropdown
-    choices={sortStrings(serverData.choices)}
-    displayNames={displayNames}
-    onSetValue={props.handleSetValue}
-    value={props.value.value}
-  />);
+  return (
+    <StandardizedDropdown
+      choices={sortStrings(serverData.choices)}
+      displayNames={displayNames}
+      onSetValue={props.handleSetValue}
+      value={props.value.value}
+    />
+  );
 };
 
-
 export type FeatureNumericData = {
-  minimum: number,
-  maximum: number,
-  step: number,
-}
+  minimum: number;
+  maximum: number;
+  step: number;
+};
 
 export type FeatureNumeric = Feature<number, number, FeatureNumericData>;
 
 export const FeatureNumberInput = (
-  props: FeatureValueProps<number, number, FeatureNumericData>
+  props: FeatureValueProps<number, number, FeatureNumericData>,
 ) => {
   if (!props.serverData) {
     return <Box>Loading...</Box>;
   }
 
-  return (<NumberInput
-    onChange={(e, value) => {
-      props.handleSetValue(value);
-    }}
-    minValue={props.serverData.minimum}
-    maxValue={props.serverData.maximum}
-    step={props.serverData.step}
-    value={props.value}
-  />);
+  return (
+    <NumberInput
+      onChange={(e, value) => {
+        props.handleSetValue(value);
+      }}
+      minValue={props.serverData.minimum}
+      maxValue={props.serverData.maximum}
+      step={props.serverData.step}
+      value={props.value}
+    />
+  );
 };
 
-export const FeatureValueInput = (props: {
-  feature: Feature<unknown>,
-  featureId: string,
-  shrink?: boolean,
-  value: unknown,
+export const FeatureValueInput = (
+  props: {
+    feature: Feature<unknown>;
+    featureId: string;
+    shrink?: boolean;
+    value: unknown;
 
-  act: typeof sendAct,
-}, context) => {
+    act: typeof sendAct;
+  },
+  context,
+) => {
   const { data } = useBackend<PreferencesMenuData>(context);
 
   const feature = props.feature;
@@ -314,7 +332,7 @@ export const FeatureValueInput = (props: {
 
   return (
     <ServerPreferencesFetcher
-      render={serverData => {
+      render={(serverData) => {
         return createComponentVNode(
           VNodeFlags.ComponentUnknown,
           feature.component,
@@ -326,7 +344,8 @@ export const FeatureValueInput = (props: {
 
             handleSetValue: changeValue,
             value: predictedValue,
-          });
+          },
+        );
       }}
     />
   );
@@ -334,57 +353,59 @@ export const FeatureValueInput = (props: {
 
 // PARIAH FEATURES
 
-export const FeatureTextInput = (
-  props: FeatureValueProps<string>
-) => {
-  return (<TextArea
-    height="100px"
-    value={props.value}
-    onChange={(_, value) => props.handleSetValue(value)}
-  />);
+export const FeatureTextInput = (props: FeatureValueProps<string>) => {
+  return (
+    <TextArea
+      height="100px"
+      value={props.value}
+      onChange={(_, value) => props.handleSetValue(value)}
+    />
+  );
 };
 
-export const FeatureShortTextInput = (
-  props: FeatureValueProps<string>
-) => {
-  return (<Input
-    width="100%"
-    value={props.value}
-    onChange={(_, value) => props.handleSetValue(value)}
-  />);
+export const FeatureShortTextInput = (props: FeatureValueProps<string>) => {
+  return (
+    <Input
+      width="100%"
+      value={props.value}
+      onChange={(_, value) => props.handleSetValue(value)}
+    />
+  );
 };
 
 export const FeatureTriColorInput = (props: FeatureValueProps<string[]>) => {
   const buttonFromValue = (index) => {
     return (
       <Stack.Item>
-        <Button onClick={() => {
-          props.act("set_tricolor_preference", {
-            preference: props.featureId,
-            value: index+1,
-          });
-        }}>
+        <Button
+          onClick={() => {
+            props.act('set_tricolor_preference', {
+              preference: props.featureId,
+              value: index + 1,
+            });
+          }}
+        >
           <Stack align="center" fill>
             <Stack.Item>
-              <Box style={{
-                background: props.value[index].startsWith("#")
-                  ? props.value[index]
-                  : `#${props.value[index]}`,
-                border: "2px solid white",
-                "box-sizing": "content-box",
-                height: "11px",
-                width: "11px",
-                ...(props.shrink ? {
-                  "margin": "1px",
-                } : {}),
-              }} />
+              <Box
+                style={{
+                  background: props.value[index].startsWith('#')
+                    ? props.value[index]
+                    : `#${props.value[index]}`,
+                  border: '2px solid white',
+                  'box-sizing': 'content-box',
+                  height: '11px',
+                  width: '11px',
+                  ...(props.shrink
+                    ? {
+                        margin: '1px',
+                      }
+                    : {}),
+                }}
+              />
             </Stack.Item>
 
-            {!props.shrink && (
-              <Stack.Item>
-                Change
-              </Stack.Item>
-            )}
+            {!props.shrink && <Stack.Item>Change</Stack.Item>}
           </Stack>
         </Button>
       </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/accessibility.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/accessibility.tsx
index c09c478455a9..411986f30e60 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/accessibility.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/accessibility.tsx
@@ -1,14 +1,14 @@
-import { CheckboxInput, FeatureToggle } from "../base";
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const disable_pain_flash: FeatureToggle = {
-  name: "Disable pain flashes",
-  category: "ACCESSIBILITY",
+  name: 'Disable pain flashes',
+  category: 'ACCESSIBILITY',
   component: CheckboxInput,
 };
 
 export const motion_sickness: FeatureToggle = {
-  name: "Motion sickness aid",
-  description: "Disables effects that may induce motion sickness.",
-  category: "ACCESSIBILITY",
+  name: 'Motion sickness aid',
+  description: 'Disables effects that may induce motion sickness.',
+  category: 'ACCESSIBILITY',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/admin.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/admin.tsx
index 3f92ac580b0f..5859c66ae63e 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/admin.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/admin.tsx
@@ -1,29 +1,37 @@
-import { CheckboxInput, FeatureColorInput, Feature, FeatureDropdownInput, FeatureToggle } from "../base";
+import {
+  CheckboxInput,
+  FeatureColorInput,
+  Feature,
+  FeatureDropdownInput,
+  FeatureToggle,
+} from '../base';
 
 export const asaycolor: Feature<string> = {
-  name: "Admin chat color",
-  category: "ADMIN",
-  description: "The color of your messages in Adminsay.",
+  name: 'Admin chat color',
+  category: 'ADMIN',
+  description: 'The color of your messages in Adminsay.',
   component: FeatureColorInput,
 };
 
 export const brief_outfit: Feature<string> = {
-  name: "Brief outfit",
-  category: "ADMIN",
-  description: "The outfit to gain when spawning as the briefing officer.",
+  name: 'Brief outfit',
+  category: 'ADMIN',
+  description: 'The outfit to gain when spawning as the briefing officer.',
   component: FeatureDropdownInput,
 };
 
 export const bypass_deadmin_in_centcom: FeatureToggle = {
-  name: "Bypass deadmin options when in CentCom",
-  category: "ADMIN",
-  description: "Whether or not to always remain an admin when spawned in CentCom.",
+  name: 'Bypass deadmin options when in CentCom',
+  category: 'ADMIN',
+  description:
+    'Whether or not to always remain an admin when spawned in CentCom.',
   component: CheckboxInput,
 };
 
 export const fast_mc_refresh: FeatureToggle = {
-  name: "Enable fast MC stat panel refreshes",
-  category: "ADMIN",
-  description: "Whether or not the MC tab of the Stat Panel refreshes fast. This is expensive so make sure you need it.",
+  name: 'Enable fast MC stat panel refreshes',
+  category: 'ADMIN',
+  description:
+    'Whether or not the MC tab of the Stat Panel refreshes fast. This is expensive so make sure you need it.',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/auto_fit_viewport.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/auto_fit_viewport.tsx
index 5339de43d15a..31609990f18c 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/auto_fit_viewport.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/auto_fit_viewport.tsx
@@ -1,7 +1,7 @@
-import { CheckboxInput, FeatureToggle } from "../base";
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const auto_fit_viewport: FeatureToggle = {
-  name: "Auto fit viewport",
-  category: "UI",
+  name: 'Auto fit viewport',
+  category: 'UI',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/autopunctuation.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/autopunctuation.tsx
index 745c73c9b475..bdf589653d27 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/autopunctuation.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/autopunctuation.tsx
@@ -1,8 +1,9 @@
-import { CheckboxInput, FeatureToggle } from "../base";
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const autopunctuation: FeatureToggle = {
-  name: "Auto Punctuation",
-  category: "GAMEPLAY",
-  description: "Automatically append a period to speech if there is no punctuation.",
+  name: 'Auto Punctuation',
+  category: 'GAMEPLAY',
+  description:
+    'Automatically append a period to speech if there is no punctuation.',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/binary_radials.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/binary_radials.tsx
index fa1efa4850f5..64436e21c6f1 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/binary_radials.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/binary_radials.tsx
@@ -1,8 +1,8 @@
-import { CheckboxInput, FeatureToggle } from "../base";
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const binaryradials: FeatureToggle = {
-  name: "Enable binary radial menus",
-  category: "GAMEPLAY",
-  description: "Enable binary radial menus in place of some 1-click actions.",
+  name: 'Enable binary radial menus',
+  category: 'GAMEPLAY',
+  description: 'Enable binary radial menus in place of some 1-click actions.',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/bloom.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/bloom.tsx
index ab727cb2cd7f..351b4cca80ed 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/bloom.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/bloom.tsx
@@ -1,8 +1,8 @@
-import { CheckboxInput, FeatureToggle } from "../base";
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const seebloom: FeatureToggle = {
-  name: "See Bloom",
-  category: "GAMEPLAY",
-  description: "Enable Bloom",
+  name: 'See Bloom',
+  category: 'GAMEPLAY',
+  description: 'Enable Bloom',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/broadcast_login_logout.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/broadcast_login_logout.tsx
index a997b265f64a..f8252412fc99 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/broadcast_login_logout.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/broadcast_login_logout.tsx
@@ -1,9 +1,9 @@
-import { multiline } from "common/string";
-import { CheckboxInput, FeatureToggle } from "../base";
+import { multiline } from 'common/string';
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const broadcast_login_logout: FeatureToggle = {
-  name: "Broadcast login/logout",
-  category: "GAMEPLAY",
+  name: 'Broadcast login/logout',
+  category: 'GAMEPLAY',
   description: multiline`
     When enabled, disconnecting and reconnecting will announce to deadchat.
   `,
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/buttons_locked.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/buttons_locked.tsx
index 67849342094d..d82bc89306ea 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/buttons_locked.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/buttons_locked.tsx
@@ -1,8 +1,8 @@
-import { CheckboxInput, FeatureToggle } from "../base";
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const buttons_locked: FeatureToggle = {
-  name: "Lock action buttons",
-  category: "GAMEPLAY",
-  description: "When enabled, action buttons will be locked in place.",
+  name: 'Lock action buttons',
+  category: 'GAMEPLAY',
+  description: 'When enabled, action buttons will be locked in place.',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/credits_uses_ckey.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/credits_uses_ckey.tsx
index 997e460b3984..b41f22dd0ed1 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/credits_uses_ckey.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/credits_uses_ckey.tsx
@@ -1,8 +1,8 @@
-import { CheckboxInput, FeatureToggle } from "../base";
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const credits_uses_ckey: FeatureToggle = {
-  name: "Credits: Use Ckey",
-  category: "GAMEPLAY",
-  description: "End of round credits will use your Ckey or Character Name.",
+  name: 'Credits: Use Ckey',
+  category: 'GAMEPLAY',
+  description: 'End of round credits will use your Ckey or Character Name.',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/darkened_flash.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/darkened_flash.tsx
index 706b17877059..0703c7ef04c0 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/darkened_flash.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/darkened_flash.tsx
@@ -1,9 +1,9 @@
-import { multiline } from "common/string";
-import { CheckboxInput, FeatureToggle } from "../base";
+import { multiline } from 'common/string';
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const darkened_flash: FeatureToggle = {
-  name: "Enable darkened flashes",
-  category: "GAMEPLAY",
+  name: 'Enable darkened flashes',
+  category: 'GAMEPLAY',
   description: multiline`
     When toggled, being flashed will show a dark screen rather than a
     bright one.
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/fps.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/fps.tsx
index 55c091a9714f..c812f0e3616f 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/fps.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/fps.tsx
@@ -1,13 +1,11 @@
-import { Dropdown, NumberInput, Stack } from "../../../../../components";
-import { Feature, FeatureNumericData, FeatureValueProps } from "../base";
+import { Dropdown, NumberInput, Stack } from '../../../../../components';
+import { Feature, FeatureNumericData, FeatureValueProps } from '../base';
 
 type FpsServerData = FeatureNumericData & {
   recommended_fps: number;
-}
+};
 
-const FpsInput = (
-  props: FeatureValueProps<number, number, FpsServerData>
-) => {
+const FpsInput = (props: FeatureValueProps<number, number, FpsServerData>) => {
   const { handleSetValue, serverData } = props;
 
   let recommened = `Recommended`;
@@ -19,7 +17,7 @@ const FpsInput = (
     <Stack fill>
       <Stack.Item basis="70%">
         <Dropdown
-          selected={props.value === -1 ? recommened : "Custom"}
+          selected={props.value === -1 ? recommened : 'Custom'}
           onSelected={(value) => {
             if (value === recommened) {
               handleSetValue(-1);
@@ -28,29 +26,28 @@ const FpsInput = (
             }
           }}
           width="100%"
-          options={[
-            recommened,
-            "Custom",
-          ]}
+          options={[recommened, 'Custom']}
         />
       </Stack.Item>
 
       <Stack.Item>
-        {serverData && props.value !== -1 && (<NumberInput
-          onChange={(e, value) => {
-            props.handleSetValue(value);
-          }}
-          minValue={1}
-          maxValue={serverData.maximum}
-          value={props.value}
-        />)}
+        {serverData && props.value !== -1 && (
+          <NumberInput
+            onChange={(e, value) => {
+              props.handleSetValue(value);
+            }}
+            minValue={1}
+            maxValue={serverData.maximum}
+            value={props.value}
+          />
+        )}
       </Stack.Item>
     </Stack>
   );
 };
 
 export const clientfps: Feature<number, number, FpsServerData> = {
-  name: "FPS",
-  category: "GAMEPLAY",
+  name: 'FPS',
+  category: 'GAMEPLAY',
   component: FpsInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ghost.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ghost.tsx
index bb3fa64363fd..f3e5e5d7d4eb 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ghost.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ghost.tsx
@@ -1,18 +1,25 @@
-import { multiline } from "common/string";
-import { CheckboxInput, FeatureChoiced, FeatureChoicedServerData, FeatureDropdownInput, FeatureToggle, FeatureValueProps } from "../base";
-import { useBackend } from "../../../../../backend";
-import { PreferencesMenuData } from "../../../data";
+import { multiline } from 'common/string';
+import {
+  CheckboxInput,
+  FeatureChoiced,
+  FeatureChoicedServerData,
+  FeatureDropdownInput,
+  FeatureToggle,
+  FeatureValueProps,
+} from '../base';
+import { useBackend } from '../../../../../backend';
+import { PreferencesMenuData } from '../../../data';
 
 export const ghost_hud: FeatureToggle = {
-  name: "Ghost HUD",
-  category: "GHOST",
-  description: "Enable HUD buttons for ghosts.",
+  name: 'Ghost HUD',
+  category: 'GHOST',
+  description: 'Enable HUD buttons for ghosts.',
   component: CheckboxInput,
 };
 
 export const ghost_orbit: FeatureChoiced = {
-  name: "Ghost orbit",
-  category: "GHOST",
+  name: 'Ghost orbit',
+  category: 'GHOST',
   description: multiline`
     The shape in which your ghost will orbit.
     Requires BYOND membership.
@@ -23,16 +30,15 @@ export const ghost_orbit: FeatureChoiced = {
   ) => {
     const { data } = useBackend<PreferencesMenuData>(context);
 
-    return (<FeatureDropdownInput
-      {...props}
-      disabled={!data.content_unlocked}
-    />);
+    return (
+      <FeatureDropdownInput {...props} disabled={!data.content_unlocked} />
+    );
   },
 };
 
 export const inquisitive_ghost: FeatureToggle = {
-  name: "Ghost inquisitiveness",
-  category: "GHOST",
-  description: "Clicking on something as a ghost will examine it.",
+  name: 'Ghost inquisitiveness',
+  category: 'GHOST',
+  description: 'Clicking on something as a ghost will examine it.',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ghost_lighting.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ghost_lighting.tsx
index 85e2960ac5e3..8fe6f6c50592 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ghost_lighting.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ghost_lighting.tsx
@@ -1,8 +1,8 @@
-import { FeatureChoiced, FeatureDropdownInput } from "../base";
+import { FeatureChoiced, FeatureDropdownInput } from '../base';
 
 export const ghost_lighting: FeatureChoiced = {
-  name: "Ghost Lighting",
+  name: 'Ghost Lighting',
   component: FeatureDropdownInput,
-  category: "GHOST",
-  description: "Effects the brightness of lights for ghosts",
+  category: 'GHOST',
+  description: 'Effects the brightness of lights for ghosts',
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/glasses_color.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/glasses_color.tsx
index ffd79bb8f3e7..6fb88fbd4d22 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/glasses_color.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/glasses_color.tsx
@@ -1,8 +1,8 @@
-import { CheckboxInput, FeatureToggle } from "../base";
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const glasses_color: FeatureToggle = {
-  name: "See Glasses Color",
-  category: "GAMEPLAY",
-  description: "Enables screen color changing effects from wearing glasses.",
+  name: 'See Glasses Color',
+  category: 'GAMEPLAY',
+  description: 'Enables screen color changing effects from wearing glasses.',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/hotkeys.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/hotkeys.tsx
index ac01bad9d9d2..15b17f36fd89 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/hotkeys.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/hotkeys.tsx
@@ -1,8 +1,9 @@
-import { CheckboxInputInverse, FeatureToggle } from "../base";
+import { CheckboxInputInverse, FeatureToggle } from '../base';
 
 export const hotkeys: FeatureToggle = {
-  name: "Classic Hotkeys",
-  category: "GAMEPLAY",
-  description: "When enabled, will revert to the legacy hotkeys, using the input bar rather than popups.",
+  name: 'Classic Hotkeys',
+  category: 'GAMEPLAY',
+  description:
+    'When enabled, will revert to the legacy hotkeys, using the input bar rather than popups.',
   component: CheckboxInputInverse,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/hotkeys_silence.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/hotkeys_silence.tsx
index 03c69fdeea3c..e1eef78d2c56 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/hotkeys_silence.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/hotkeys_silence.tsx
@@ -1,8 +1,9 @@
-import { CheckboxInputInverse, FeatureToggle } from "../base";
+import { CheckboxInputInverse, FeatureToggle } from '../base';
 
 export const hotkeys_silence: FeatureToggle = {
-  name: "Classic Hotkey Warnings",
-  category: "GAMEPLAY",
-  description: "When enabled, will suppress the warning about bad/unbindable hotkeys. You should probably read them at least once.",
+  name: 'Classic Hotkey Warnings',
+  category: 'GAMEPLAY',
+  description:
+    'When enabled, will suppress the warning about bad/unbindable hotkeys. You should probably read them at least once.',
   component: CheckboxInputInverse,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/item_outlines.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/item_outlines.tsx
index 3877da11007b..d315fca51e7e 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/item_outlines.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/item_outlines.tsx
@@ -1,8 +1,8 @@
-import { CheckboxInput, FeatureToggle } from "../base";
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const itemoutline_pref: FeatureToggle = {
-  name: "Item outlines",
-  category: "GAMEPLAY",
-  description: "When enabled, hovering over items will outline them.",
+  name: 'Item outlines',
+  category: 'GAMEPLAY',
+  description: 'When enabled, hovering over items will outline them.',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/legacy_chat_toggles.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/legacy_chat_toggles.tsx
index dc359e57d459..58b1a5b99146 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/legacy_chat_toggles.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/legacy_chat_toggles.tsx
@@ -1,22 +1,22 @@
-import { multiline } from "common/string";
-import { FeatureToggle, CheckboxInput } from "../base";
+import { multiline } from 'common/string';
+import { FeatureToggle, CheckboxInput } from '../base';
 
 export const chat_bankcard: FeatureToggle = {
-  name: "Enable income updates",
-  category: "CHAT",
-  description: "Receive notifications for your bank account.",
+  name: 'Enable income updates',
+  category: 'CHAT',
+  description: 'Receive notifications for your bank account.',
   component: CheckboxInput,
 };
 
 export const chat_dead: FeatureToggle = {
-  name: "Enable deadchat",
-  category: "ADMIN",
+  name: 'Enable deadchat',
+  category: 'ADMIN',
   component: CheckboxInput,
 };
 
 export const chat_ghostears: FeatureToggle = {
-  name: "Hear all messages",
-  category: "GHOST",
+  name: 'Hear all messages',
+  category: 'GHOST',
   description: multiline`
     When enabled, you will be able to hear all speech as a ghost.
     When disabled, you will only be able to hear nearby speech.
@@ -25,36 +25,36 @@ export const chat_ghostears: FeatureToggle = {
 };
 
 export const chat_ghostlaws: FeatureToggle = {
-  name: "Enable law change updates",
-  category: "GHOST",
-  description: "When enabled, be notified of any new law changes as a ghost.",
+  name: 'Enable law change updates',
+  category: 'GHOST',
+  description: 'When enabled, be notified of any new law changes as a ghost.',
   component: CheckboxInput,
 };
 
 export const chat_ghostpda: FeatureToggle = {
-  name: "Enable PDA notifications",
-  category: "GHOST",
-  description: "When enabled, be notified of any PDA messages as a ghost.",
+  name: 'Enable PDA notifications',
+  category: 'GHOST',
+  description: 'When enabled, be notified of any PDA messages as a ghost.',
   component: CheckboxInput,
 };
 
 export const chat_ghostradio: FeatureToggle = {
-  name: "Enable radio",
-  category: "GHOST",
-  description: "When enabled, be notified of any radio messages as a ghost.",
+  name: 'Enable radio',
+  category: 'GHOST',
+  description: 'When enabled, be notified of any radio messages as a ghost.',
   component: CheckboxInput,
 };
 
 export const chat_ghostsight: FeatureToggle = {
-  name: "See all emotes",
-  category: "GHOST",
-  description: "When enabled, see all emotes as a ghost.",
+  name: 'See all emotes',
+  category: 'GHOST',
+  description: 'When enabled, see all emotes as a ghost.',
   component: CheckboxInput,
 };
 
 export const chat_ghostwhisper: FeatureToggle = {
-  name: "See all whispers",
-  category: "GHOST",
+  name: 'See all whispers',
+  category: 'GHOST',
   description: multiline`
     When enabled, you will be able to hear all whispers as a ghost.
     When disabled, you will only be able to hear nearby whispers.
@@ -63,27 +63,27 @@ export const chat_ghostwhisper: FeatureToggle = {
 };
 
 export const chat_login_logout: FeatureToggle = {
-  name: "See login/logout messages",
-  category: "GHOST",
-  description: "When enabled, be notified when a player logs in or out.",
+  name: 'See login/logout messages',
+  category: 'GHOST',
+  description: 'When enabled, be notified when a player logs in or out.',
   component: CheckboxInput,
 };
 
 export const chat_ooc: FeatureToggle = {
-  name: "Enable OOC",
-  category: "CHAT",
+  name: 'Enable OOC',
+  category: 'CHAT',
   component: CheckboxInput,
 };
 
 export const chat_prayer: FeatureToggle = {
-  name: "Listen to prayers",
-  category: "ADMIN",
+  name: 'Listen to prayers',
+  category: 'ADMIN',
   component: CheckboxInput,
 };
 
 export const chat_pullr: FeatureToggle = {
-  name: "Enable pull request notifications",
-  category: "CHAT",
-  description: "Be notified when a pull request is made, closed, or merged.",
+  name: 'Enable pull request notifications',
+  category: 'CHAT',
+  description: 'Be notified when a pull request is made, closed, or merged.',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/legacy_toggles.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/legacy_toggles.tsx
index 6b6c44661e5c..07156fe6b02f 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/legacy_toggles.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/legacy_toggles.tsx
@@ -1,9 +1,9 @@
-import { multiline } from "common/string";
-import { FeatureToggle, CheckboxInput, CheckboxInputInverse } from "../base";
+import { multiline } from 'common/string';
+import { FeatureToggle, CheckboxInput, CheckboxInputInverse } from '../base';
 
 export const admin_ignore_cult_ghost: FeatureToggle = {
-  name: "Prevent being summoned as a cult ghost",
-  category: "ADMIN",
+  name: 'Prevent being summoned as a cult ghost',
+  category: 'ADMIN',
   description: multiline`
     When enabled and observing, prevents Spirit Realm from forcing you
     into a cult ghost.
@@ -12,142 +12,146 @@ export const admin_ignore_cult_ghost: FeatureToggle = {
 };
 
 export const announce_login: FeatureToggle = {
-  name: "Announce login",
-  category: "ADMIN",
-  description: "Admins will be notified when you login.",
+  name: 'Announce login',
+  category: 'ADMIN',
+  description: 'Admins will be notified when you login.',
   component: CheckboxInput,
 };
 
 export const combohud_lighting: FeatureToggle = {
-  name: "Enable fullbright Combo HUD",
-  category: "ADMIN",
+  name: 'Enable fullbright Combo HUD',
+  category: 'ADMIN',
   component: CheckboxInput,
 };
 
 export const deadmin_always: FeatureToggle = {
-  name: "Auto deadmin - Always",
-  category: "ADMIN",
-  description: "When enabled, you will automatically deadmin.",
+  name: 'Auto deadmin - Always',
+  category: 'ADMIN',
+  description: 'When enabled, you will automatically deadmin.',
   component: CheckboxInput,
 };
 
 export const deadmin_antagonist: FeatureToggle = {
-  name: "Auto deadmin - Antagonist",
-  category: "ADMIN",
-  description: "When enabled, you will automatically deadmin as an antagonist.",
+  name: 'Auto deadmin - Antagonist',
+  category: 'ADMIN',
+  description: 'When enabled, you will automatically deadmin as an antagonist.',
   component: CheckboxInput,
 };
 
 export const deadmin_position_head: FeatureToggle = {
-  name: "Auto deadmin - Head of Staff",
-  category: "ADMIN",
-  description: "When enabled, you will automatically deadmin as a head of staff.",
+  name: 'Auto deadmin - Head of Staff',
+  category: 'ADMIN',
+  description:
+    'When enabled, you will automatically deadmin as a head of staff.',
   component: CheckboxInput,
 };
 
 export const deadmin_position_security: FeatureToggle = {
-  name: "Auto deadmin - Security",
-  category: "ADMIN",
-  description: "When enabled, you will automatically deadmin as a member of security.",
+  name: 'Auto deadmin - Security',
+  category: 'ADMIN',
+  description:
+    'When enabled, you will automatically deadmin as a member of security.',
   component: CheckboxInput,
 };
 
 export const deadmin_position_silicon: FeatureToggle = {
-  name: "Auto deadmin - Silicon",
-  category: "ADMIN",
-  description: "When enabled, you will automatically deadmin as a silicon.",
+  name: 'Auto deadmin - Silicon',
+  category: 'ADMIN',
+  description: 'When enabled, you will automatically deadmin as a silicon.',
   component: CheckboxInput,
 };
 
 export const disable_arrivalrattle: FeatureToggle = {
-  name: "Notify for new arrivals",
-  category: "GHOST",
-  description: "When enabled, you will be notified as a ghost for new crew.",
+  name: 'Notify for new arrivals',
+  category: 'GHOST',
+  description: 'When enabled, you will be notified as a ghost for new crew.',
   component: CheckboxInputInverse,
 };
 
 export const disable_deathrattle: FeatureToggle = {
-  name: "Notify for deaths",
-  category: "GHOST",
-  description: "When enabled, you will be notified as a ghost whenever someone dies.",
+  name: 'Notify for deaths',
+  category: 'GHOST',
+  description:
+    'When enabled, you will be notified as a ghost whenever someone dies.',
   component: CheckboxInputInverse,
 };
 
 export const member_public: FeatureToggle = {
-  name: "Publicize BYOND membership",
-  category: "CHAT",
-  description: "When enabled, a BYOND logo will be shown next to your name in OOC.",
+  name: 'Publicize BYOND membership',
+  category: 'CHAT',
+  description:
+    'When enabled, a BYOND logo will be shown next to your name in OOC.',
   component: CheckboxInput,
 };
 
 export const sound_adminhelp: FeatureToggle = {
-  name: "Enable adminhelp sounds",
-  category: "ADMIN",
+  name: 'Enable adminhelp sounds',
+  category: 'ADMIN',
   component: CheckboxInput,
 };
 
 export const sound_ambience: FeatureToggle = {
-  name: "Enable ambience",
-  category: "SOUND",
+  name: 'Enable ambience',
+  category: 'SOUND',
   component: CheckboxInput,
 };
 
 export const sound_announcements: FeatureToggle = {
-  name: "Enable announcement sounds",
-  category: "SOUND",
-  description: "When enabled, hear sounds for command reports, notices, etc.",
+  name: 'Enable announcement sounds',
+  category: 'SOUND',
+  description: 'When enabled, hear sounds for command reports, notices, etc.',
   component: CheckboxInput,
 };
 
 export const sound_combatmode: FeatureToggle = {
-  name: "Enable combat mode sound",
-  category: "SOUND",
-  description: "When enabled, hear sounds when toggling combat mode.",
+  name: 'Enable combat mode sound',
+  category: 'SOUND',
+  description: 'When enabled, hear sounds when toggling combat mode.',
   component: CheckboxInput,
 };
 
 export const sound_endofround: FeatureToggle = {
-  name: "Enable end of round sounds",
-  category: "SOUND",
-  description: "When enabled, hear a sound when the server is rebooting.",
+  name: 'Enable end of round sounds',
+  category: 'SOUND',
+  description: 'When enabled, hear a sound when the server is rebooting.',
   component: CheckboxInput,
 };
 
 export const sound_instruments: FeatureToggle = {
-  name: "Enable instruments",
-  category: "SOUND",
-  description: "When enabled, be able hear instruments in game.",
+  name: 'Enable instruments',
+  category: 'SOUND',
+  description: 'When enabled, be able hear instruments in game.',
   component: CheckboxInput,
 };
 
 export const sound_lobby: FeatureToggle = {
-  name: "Enable lobby music",
-  category: "SOUND",
+  name: 'Enable lobby music',
+  category: 'SOUND',
   component: CheckboxInput,
 };
 
 export const sound_midi: FeatureToggle = {
-  name: "Enable admin music",
-  category: "SOUND",
-  description: "When enabled, admins will be able to play music to you.",
+  name: 'Enable admin music',
+  category: 'SOUND',
+  description: 'When enabled, admins will be able to play music to you.',
   component: CheckboxInput,
 };
 
 export const sound_prayers: FeatureToggle = {
-  name: "Enable prayer sound",
-  category: "ADMIN",
+  name: 'Enable prayer sound',
+  category: 'ADMIN',
   component: CheckboxInput,
 };
 
 export const sound_ship_ambience: FeatureToggle = {
-  name: "Enable ship ambience",
-  category: "SOUND",
+  name: 'Enable ship ambience',
+  category: 'SOUND',
   component: CheckboxInput,
 };
 
 export const split_admin_tabs: FeatureToggle = {
-  name: "Split admin tabs",
-  category: "ADMIN",
+  name: 'Split admin tabs',
+  category: 'ADMIN',
   description: "When enabled, will split the 'Admin' panel into several tabs.",
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/mod_select.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/mod_select.tsx
index f3e7f31945af..844b286e9237 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/mod_select.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/mod_select.tsx
@@ -1,8 +1,8 @@
-import { Feature, FeatureDropdownInput } from "../base";
+import { Feature, FeatureDropdownInput } from '../base';
 
 export const mod_select: Feature<string> = {
-  name: "MOD active module key",
-  category: "GAMEPLAY",
-  description: "The key you need to use an active MODsuit module.",
+  name: 'MOD active module key',
+  category: 'GAMEPLAY',
+  description: 'The key you need to use an active MODsuit module.',
   component: FeatureDropdownInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/monochrome_ghost.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/monochrome_ghost.tsx
index 581dc2ef4e89..d214be75656e 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/monochrome_ghost.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/monochrome_ghost.tsx
@@ -1,7 +1,7 @@
-import { CheckboxInput, FeatureToggle } from "../base";
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const monochrome_ghost: FeatureToggle = {
-  name: "See Monochrome as Ghost",
-  category: "GHOST",
+  name: 'See Monochrome as Ghost',
+  category: 'GHOST',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ooc.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ooc.tsx
index e4f5c5466f0e..3e0421de7124 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ooc.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ooc.tsx
@@ -1,8 +1,8 @@
-import { FeatureColorInput, Feature } from "../base";
+import { FeatureColorInput, Feature } from '../base';
 
 export const ooccolor: Feature<string> = {
-  name: "OOC color",
-  category: "CHAT",
-  description: "The color of your OOC messages.",
+  name: 'OOC color',
+  category: 'CHAT',
+  description: 'The color of your OOC messages.',
   component: FeatureColorInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/parallax.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/parallax.tsx
index 1fbb2230ff20..a7b143a6d3d0 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/parallax.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/parallax.tsx
@@ -1,7 +1,7 @@
-import { Feature, FeatureDropdownInput } from "../base";
+import { Feature, FeatureDropdownInput } from '../base';
 
 export const parallax: Feature<string> = {
-  name: "Parallax (fancy space)",
-  category: "GAMEPLAY",
+  name: 'Parallax (fancy space)',
+  category: 'GAMEPLAY',
   component: FeatureDropdownInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/pixel_size.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/pixel_size.tsx
index bb07453e340f..4afde6a8bb1b 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/pixel_size.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/pixel_size.tsx
@@ -1,13 +1,13 @@
-import { createDropdownInput, Feature } from "../base";
+import { createDropdownInput, Feature } from '../base';
 
 export const pixel_size: Feature<number> = {
-  name: "Pixel Scaling",
-  category: "UI",
+  name: 'Pixel Scaling',
+  category: 'UI',
   component: createDropdownInput({
-    0: "Stretch to fit",
-    1: "Pixel Perfect 1x",
-    1.5: "Pixel Perfect 1.5x",
-    2: "Pixel Perfect 2x",
-    3: "Pixel Perfect 3x",
+    0: 'Stretch to fit',
+    1: 'Pixel Perfect 1x',
+    1.5: 'Pixel Perfect 1.5x',
+    2: 'Pixel Perfect 2x',
+    3: 'Pixel Perfect 3x',
   }),
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/preferred_map.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/preferred_map.tsx
index 3acfad00445a..8d3c8b174269 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/preferred_map.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/preferred_map.tsx
@@ -1,9 +1,9 @@
-import { multiline } from "common/string";
-import { Feature, FeatureDropdownInput } from "../base";
+import { multiline } from 'common/string';
+import { Feature, FeatureDropdownInput } from '../base';
 
 export const preferred_map: Feature<string> = {
-  name: "Preferred map",
-  category: "GAMEPLAY",
+  name: 'Preferred map',
+  category: 'GAMEPLAY',
   description: multiline`
     During map rotation, prefer this map be chosen.
     This does not affect the map vote, only random rotation when a vote
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/runechat.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/runechat.tsx
index d85a814d8add..bb86e2626bf1 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/runechat.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/runechat.tsx
@@ -1,29 +1,34 @@
-import { CheckboxInput, FeatureNumberInput, FeatureNumeric, FeatureToggle } from "../base";
+import {
+  CheckboxInput,
+  FeatureNumberInput,
+  FeatureNumeric,
+  FeatureToggle,
+} from '../base';
 
 export const chat_on_map: FeatureToggle = {
-  name: "Enable Runechat",
-  category: "RUNECHAT",
-  description: "Chat messages will show above heads.",
+  name: 'Enable Runechat',
+  category: 'RUNECHAT',
+  description: 'Chat messages will show above heads.',
   component: CheckboxInput,
 };
 
 export const see_chat_non_mob: FeatureToggle = {
-  name: "Enable Runechat on objects",
-  category: "RUNECHAT",
-  description: "Chat messages will show above objects when they speak.",
+  name: 'Enable Runechat on objects',
+  category: 'RUNECHAT',
+  description: 'Chat messages will show above objects when they speak.',
   component: CheckboxInput,
 };
 
 export const see_rc_emotes: FeatureToggle = {
-  name: "Enable Runechat emotes",
-  category: "RUNECHAT",
-  description: "Emotes will show above heads.",
+  name: 'Enable Runechat emotes',
+  category: 'RUNECHAT',
+  description: 'Emotes will show above heads.',
   component: CheckboxInput,
 };
 
 export const max_chat_length: FeatureNumeric = {
-  name: "Max chat length",
-  category: "RUNECHAT",
-  description: "The maximum length a Runechat message will show as.",
+  name: 'Max chat length',
+  category: 'RUNECHAT',
+  description: 'The maximum length a Runechat message will show as.',
   component: FeatureNumberInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/scaling_method.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/scaling_method.tsx
index 114cc80ef5e8..68a4c9c87fa3 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/scaling_method.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/scaling_method.tsx
@@ -1,11 +1,11 @@
-import { createDropdownInput, Feature } from "../base";
+import { createDropdownInput, Feature } from '../base';
 
 export const scaling_method: Feature<string> = {
-  name: "Scaling method",
-  category: "UI",
+  name: 'Scaling method',
+  category: 'UI',
   component: createDropdownInput({
-    blur: "Bilinear",
-    distort: "Nearest Neighbor",
-    normal: "Point Sampling",
+    blur: 'Bilinear',
+    distort: 'Nearest Neighbor',
+    normal: 'Point Sampling',
   }),
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/screentips.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/screentips.tsx
index b397388aa3da..a391e61855c5 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/screentips.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/screentips.tsx
@@ -1,9 +1,14 @@
-import { multiline } from "common/string";
-import { FeatureColorInput, Feature, FeatureChoiced, FeatureDropdownInput } from "../base";
+import { multiline } from 'common/string';
+import {
+  FeatureColorInput,
+  Feature,
+  FeatureChoiced,
+  FeatureDropdownInput,
+} from '../base';
 
 export const screentip_color: Feature<string> = {
-  name: "Screentips color",
-  category: "UI",
+  name: 'Screentips color',
+  category: 'UI',
   description: multiline`
     The color of screen tips, the text you see when hovering over something.
   `,
@@ -11,8 +16,8 @@ export const screentip_color: Feature<string> = {
 };
 
 export const screentip_pref: FeatureChoiced = {
-  name: "Enable screentips",
-  category: "UI",
+  name: 'Enable screentips',
+  category: 'UI',
   description: multiline`
     Enables screen tips, the text you see when hovering over something.
     When set to "Only with tips", will only show when there is more information
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/see_credits.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/see_credits.tsx
index 160561f280a7..a8cb04146d94 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/see_credits.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/see_credits.tsx
@@ -1,8 +1,8 @@
-import { CheckboxInput, FeatureToggle } from "../base";
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const see_credits: FeatureToggle = {
-  name: "Credits: See Credits Roll",
-  category: "GAMEPLAY",
-  description: "Show the full screen overlay credits roll when the round ends.",
+  name: 'Credits: See Credits Roll',
+  category: 'GAMEPLAY',
+  description: 'Show the full screen overlay credits roll when the round ends.',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/show_ready.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/show_ready.tsx
index ee8bea243c36..cead3ba91745 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/show_ready.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/show_ready.tsx
@@ -1,8 +1,8 @@
-import { CheckboxInput, FeatureToggle } from "../base";
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const ready_job: FeatureToggle = {
-  name: "Show Ready Job In Lobby",
-  category: "GAMEPLAY",
-  description: "Show your Ckey and Job when you are readied up in the lobby.",
+  name: 'Show Ready Job In Lobby',
+  category: 'GAMEPLAY',
+  description: 'Show your Ckey and Job when you are readied up in the lobby.',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/tooltips.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/tooltips.tsx
index d3147a01a1f2..34d668642599 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/tooltips.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/tooltips.tsx
@@ -1,9 +1,14 @@
-import { multiline } from "common/string";
-import { CheckboxInput, Feature, FeatureNumberInput, FeatureToggle } from "../base";
+import { multiline } from 'common/string';
+import {
+  CheckboxInput,
+  Feature,
+  FeatureNumberInput,
+  FeatureToggle,
+} from '../base';
 
 export const enable_tips: FeatureToggle = {
-  name: "Enable tooltips",
-  category: "TOOLTIPS",
+  name: 'Enable tooltips',
+  category: 'TOOLTIPS',
   description: multiline`
     Do you want to see tooltips when hovering over items?
   `,
@@ -11,8 +16,8 @@ export const enable_tips: FeatureToggle = {
 };
 
 export const tip_delay: Feature<number> = {
-  name: "Tooltip delay (in milliseconds)",
-  category: "TOOLTIPS",
+  name: 'Tooltip delay (in milliseconds)',
+  category: 'TOOLTIPS',
   description: multiline`
     How long should it take to see a tooltip when hovering over items?
   `,
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ui_style.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ui_style.tsx
index 83a315bccac1..fa133c4abc2a 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ui_style.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ui_style.tsx
@@ -1,9 +1,14 @@
-import { classes } from "common/react";
-import { FeatureChoiced, FeatureChoicedServerData, FeatureValueProps, sortChoices } from "../base";
-import { Box, Dropdown, Stack } from "../../../../../components";
+import { classes } from 'common/react';
+import {
+  FeatureChoiced,
+  FeatureChoicedServerData,
+  FeatureValueProps,
+  sortChoices,
+} from '../base';
+import { Box, Dropdown, Stack } from '../../../../../components';
 
 const UIStyleInput = (
-  props: FeatureValueProps<string, string, FeatureChoicedServerData>
+  props: FeatureValueProps<string, string, FeatureChoicedServerData>,
 ) => {
   const { serverData, value } = props;
   if (!serverData) {
@@ -13,29 +18,27 @@ const UIStyleInput = (
   const { icons } = serverData;
 
   if (!icons) {
-    return (<Box color="red">ui_style had no icons!</Box>);
+    return <Box color="red">ui_style had no icons!</Box>;
   }
 
   const choices = Object.fromEntries(
-    Object.entries(icons)
-      .map(([name, icon]) => {
-        return [name, (
-          <Stack key={name}>
-            <Stack.Item>
-              <Box className={classes([
-                "preferences64x32",
-                icon,
-              ])} style={{
-                "transform": "scale(0.8)",
-              }} />
-            </Stack.Item>
+    Object.entries(icons).map(([name, icon]) => {
+      return [
+        name,
+        <Stack key={name}>
+          <Stack.Item>
+            <Box
+              className={classes(['preferences64x32', icon])}
+              style={{
+                transform: 'scale(0.8)',
+              }}
+            />
+          </Stack.Item>
 
-            <Stack.Item grow>
-              {name}
-            </Stack.Item>
-          </Stack>
-        )];
-      })
+          <Stack.Item grow>{name}</Stack.Item>
+        </Stack>,
+      ];
+    }),
   );
 
   return (
@@ -45,19 +48,20 @@ const UIStyleInput = (
       displayText={choices[value]}
       onSelected={props.handleSetValue}
       width="100%"
-      options={sortChoices(Object.entries(choices))
-        .map(([dataValue, label]) => {
+      options={sortChoices(Object.entries(choices)).map(
+        ([dataValue, label]) => {
           return {
             displayText: label,
             value: dataValue,
           };
-        })}
+        },
+      )}
     />
   );
 };
 
 export const UI_style: FeatureChoiced = {
-  name: "UI Style",
-  category: "UI",
+  name: 'UI Style',
+  category: 'UI',
   component: UIStyleInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/widescreen.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/widescreen.tsx
index e4d7595775ee..052c3b68ca6c 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/widescreen.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/widescreen.tsx
@@ -1,7 +1,7 @@
-import { CheckboxInput, FeatureToggle } from "../base";
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const widescreenpref: FeatureToggle = {
-  name: "Enable widescreen",
-  category: "UI",
+  name: 'Enable widescreen',
+  category: 'UI',
   component: CheckboxInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/window_flashing.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/window_flashing.tsx
index 58f32c947688..c4b7b6c2768d 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/window_flashing.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/window_flashing.tsx
@@ -1,9 +1,9 @@
-import { multiline } from "common/string";
-import { CheckboxInput, FeatureToggle } from "../base";
+import { multiline } from 'common/string';
+import { CheckboxInput, FeatureToggle } from '../base';
 
 export const windowflashing: FeatureToggle = {
-  name: "Enable window flashing",
-  category: "UI",
+  name: 'Enable window flashing',
+  category: 'UI',
   description: multiline`
     When toggled, some important events will make your game icon flash on your
     task tray.
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/index.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/index.ts
index d487a282e58c..d8fa77f496bd 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/index.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/index.ts
@@ -3,15 +3,15 @@
 // extremely small, and so it's easier for everyone to just combine them
 // together.
 // This still helps to prevent the server from needing to send client UI data
-import { Feature } from "./base";
+import { Feature } from './base';
 
 // while also preventing downstreams from needing to mutate existing files.
 const features: Record<string, Feature<unknown>> = {};
 
-const requireFeature = require.context("./", true, /.tsx$/);
+const requireFeature = require.context('./', true, /.tsx$/);
 
 for (const key of requireFeature.keys()) {
-  if (key === "index" || key === "base") {
+  if (key === 'index' || key === 'base') {
     continue;
   }
 
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/randomization.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/randomization.tsx
index 3d47560edf9e..c3a18b7d7cd6 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/randomization.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/randomization.tsx
@@ -1,12 +1,12 @@
-import { useBackend } from "../../../../backend";
-import { Button, Stack } from "../../../../components";
-import { PreferencesMenuData, RandomSetting } from "../../data";
-import { RandomizationButton } from "../../RandomizationButton";
-import { useRandomToggleState } from "../../useRandomToggleState";
-import { CheckboxInput, Feature, FeatureToggle } from "./base";
+import { useBackend } from '../../../../backend';
+import { Button, Stack } from '../../../../components';
+import { PreferencesMenuData, RandomSetting } from '../../data';
+import { RandomizationButton } from '../../RandomizationButton';
+import { useRandomToggleState } from '../../useRandomToggleState';
+import { CheckboxInput, Feature, FeatureToggle } from './base';
 
 export const random_body: Feature<RandomSetting> = {
-  name: "Random body",
+  name: 'Random body',
   component: (props, context) => {
     const [randomToggle, setRandomToggle] = useRandomToggleState(context);
 
@@ -19,51 +19,47 @@ export const random_body: Feature<RandomSetting> = {
           />
         </Stack.Item>
 
-        {
-          randomToggle
-            ? (
-              <>
-                <Stack.Item>
-                  <Button color="green" onClick={() => {
-                    props.act("randomize_character");
-                    setRandomToggle(false);
-                  }}>
-                    Randomize
-                  </Button>
-                </Stack.Item>
-
-                <Stack.Item>
-                  <Button color="red" onClick={() => setRandomToggle(false)}>
-                    Cancel
-                  </Button>
-                </Stack.Item>
-              </>
-            )
-            : (
-              <Stack.Item>
-                <Button onClick={() => setRandomToggle(true)}>
-                  Randomize
-                </Button>
-              </Stack.Item>
-            )
-        }
+        {randomToggle ? (
+          <>
+            <Stack.Item>
+              <Button
+                color="green"
+                onClick={() => {
+                  props.act('randomize_character');
+                  setRandomToggle(false);
+                }}
+              >
+                Randomize
+              </Button>
+            </Stack.Item>
 
+            <Stack.Item>
+              <Button color="red" onClick={() => setRandomToggle(false)}>
+                Cancel
+              </Button>
+            </Stack.Item>
+          </>
+        ) : (
+          <Stack.Item>
+            <Button onClick={() => setRandomToggle(true)}>Randomize</Button>
+          </Stack.Item>
+        )}
       </Stack>
     );
   },
 };
 
 export const random_hardcore: FeatureToggle = {
-  name: "Hardcore random",
+  name: 'Hardcore random',
   component: CheckboxInput,
 };
 
 export const random_name: Feature<RandomSetting> = {
-  name: "Random name",
+  name: 'Random name',
   component: (props, context) => {
     return (
       <RandomizationButton
-        setValue={value => props.handleSetValue(value)}
+        setValue={(value) => props.handleSetValue(value)}
         value={props.value}
       />
     );
@@ -71,18 +67,20 @@ export const random_name: Feature<RandomSetting> = {
 };
 
 export const random_species: Feature<RandomSetting> = {
-  name: "Random species",
+  name: 'Random species',
   component: (props, context) => {
     const { act, data } = useBackend<PreferencesMenuData>(context);
 
-    const species = data.character_preferences.randomization["species"];
+    const species = data.character_preferences.randomization['species'];
 
     return (
       <RandomizationButton
-        setValue={(newValue) => act("set_random_preference", {
-          preference: "species",
-          value: newValue,
-        })}
+        setValue={(newValue) =>
+          act('set_random_preference', {
+            preference: 'species',
+            value: newValue,
+          })
+        }
         value={species || RandomSetting.Disabled}
       />
     );
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/species_features.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/species_features.tsx
index bf942aae74d9..fd112862d670 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/species_features.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/species_features.tsx
@@ -1,102 +1,107 @@
-import { FeatureColorInput, FeatureTriColorInput, Feature, FeatureChoiced, FeatureDropdownInput } from "./base";
+import {
+  FeatureColorInput,
+  FeatureTriColorInput,
+  Feature,
+  FeatureChoiced,
+  FeatureDropdownInput,
+} from './base';
 
 export const feature_mutant_colors: Feature<string[]> = {
-  name: "Generic Mutant Colors",
+  name: 'Generic Mutant Colors',
   component: FeatureTriColorInput,
 };
 
 export const eye_color: Feature<string> = {
-  name: "Eye color",
+  name: 'Eye color',
   component: FeatureColorInput,
 };
 
 export const facial_hair_color: Feature<string> = {
-  name: "Facial hair color",
+  name: 'Facial hair color',
   component: FeatureColorInput,
 };
 
 export const facial_hair_gradient: FeatureChoiced = {
-  name: "Facial hair gradient",
+  name: 'Facial hair gradient',
   component: FeatureDropdownInput,
 };
 
 export const facial_hair_gradient_color: Feature<string> = {
-  name: "Facial hair gradient color",
+  name: 'Facial hair gradient color',
   component: FeatureColorInput,
 };
 
 export const hair_color: Feature<string> = {
-  name: "Hair color",
+  name: 'Hair color',
   component: FeatureColorInput,
 };
 
 export const hair_gradient: FeatureChoiced = {
-  name: "Hair gradient",
+  name: 'Hair gradient',
   component: FeatureDropdownInput,
 };
 
 export const hair_gradient_color: Feature<string> = {
-  name: "Hair gradient color",
+  name: 'Hair gradient color',
   component: FeatureColorInput,
 };
 
-
 export const feature_human_ears: FeatureChoiced = {
-  name: "Ears",
+  name: 'Ears',
   component: FeatureDropdownInput,
 };
 
 export const feature_human_tail: FeatureChoiced = {
-  name: "Tail",
+  name: 'Tail',
   component: FeatureDropdownInput,
 };
 
 export const feature_lizard_legs: FeatureChoiced = {
-  name: "Legs",
+  name: 'Legs',
   component: FeatureDropdownInput,
 };
 
 export const feature_lizard_spines: FeatureChoiced = {
-  name: "Spines",
+  name: 'Spines',
   component: FeatureDropdownInput,
 };
 
 export const feature_lizard_tail: FeatureChoiced = {
-  name: "Tail",
+  name: 'Tail',
   component: FeatureDropdownInput,
 };
 
 export const underwear_color: Feature<string> = {
-  name: "Underwear color",
+  name: 'Underwear color',
   component: FeatureColorInput,
 };
 
 export const feature_vampire_status: Feature<string> = {
-  name: "Vampire status",
+  name: 'Vampire status',
   component: FeatureDropdownInput,
 };
 
 export const feature_headtails: FeatureChoiced = {
-  name: "Headtails",
+  name: 'Headtails',
   component: FeatureDropdownInput,
 };
 
 export const teshari_tail_colors: Feature<string[]> = {
-  name: "Teshari Tail Colors",
+  name: 'Teshari Tail Colors',
   component: FeatureTriColorInput,
 };
 
 export const teshari_body_colors: Feature<string[]> = {
-  name: "Teshari Feather Colors",
+  name: 'Teshari Feather Colors',
   component: FeatureTriColorInput,
 };
 
 export const heterochromatic: Feature<string> = {
-  name: "Heterochromatic (Right Eye) color",
+  name: 'Heterochromatic (Right Eye) color',
   component: FeatureColorInput,
 };
 
 export const sclera_color: Feature<string> = {
-  name: "Sclera color",
+  name: 'Sclera color',
   component: FeatureColorInput,
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/gender.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/gender.ts
index 787a3c900cb0..d757c47aa487 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/gender.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/gender.ts
@@ -1,22 +1,22 @@
 export enum Gender {
-  Male = "male",
-  Female = "female",
-  Other = "plural",
+  Male = 'male',
+  Female = 'female',
+  Other = 'plural',
 }
 
 export const GENDERS = {
   [Gender.Male]: {
-    icon: "male",
-    text: "Male",
+    icon: 'male',
+    text: 'Male',
   },
 
   [Gender.Female]: {
-    icon: "female",
-    text: "Female",
+    icon: 'female',
+    text: 'Female',
   },
 
   [Gender.Other]: {
-    icon: "tg-non-binary",
-    text: "Other",
+    icon: 'tg-non-binary',
+    text: 'Other',
   },
 };
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/useRandomToggleState.ts b/tgui/packages/tgui/interfaces/PreferencesMenu/useRandomToggleState.ts
index 6721ee70cf5c..9409ac5c0523 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/useRandomToggleState.ts
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/useRandomToggleState.ts
@@ -1,4 +1,4 @@
-import { useLocalState } from "../../backend";
+import { useLocalState } from '../../backend';
 
-export const useRandomToggleState
-  = context => useLocalState(context, "randomToggle", false);
+export const useRandomToggleState = (context) =>
+  useLocalState(context, 'randomToggle', false);
diff --git a/tgui/packages/tgui/interfaces/ProbingConsole.js b/tgui/packages/tgui/interfaces/ProbingConsole.js
index bbc35d911bea..da6cc5670a82 100644
--- a/tgui/packages/tgui/interfaces/ProbingConsole.js
+++ b/tgui/packages/tgui/interfaces/ProbingConsole.js
@@ -4,18 +4,9 @@ import { Window } from '../layouts';
 
 export const ProbingConsole = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    open,
-    feedback,
-    occupant,
-    occupant_name,
-    occupant_status,
-  } = data;
+  const { open, feedback, occupant, occupant_name, occupant_status } = data;
   return (
-    <Window
-      width={330}
-      height={207}
-      theme="abductor">
+    <Window width={330} height={207} theme="abductor">
       <Window.Content>
         <Section>
           <LabeledList>
@@ -26,24 +17,27 @@ export const ProbingConsole = (props, context) => {
         </Section>
         <Section
           title="Scanner"
-          buttons={(
+          buttons={
             <Button
               icon={open ? 'sign-out-alt' : 'sign-in-alt'}
               content={open ? 'Close' : 'Open'}
-              onClick={() => act('door')} />
-          )}>
-          {occupant && (
+              onClick={() => act('door')}
+            />
+          }
+        >
+          {(occupant && (
             <LabeledList>
-              <LabeledList.Item label="Name">
-                {occupant_name}
-              </LabeledList.Item>
+              <LabeledList.Item label="Name">{occupant_name}</LabeledList.Item>
               <LabeledList.Item
                 label="Status"
-                color={occupant_status === 3
-                  ? 'bad'
-                  : occupant_status === 2
-                    ? 'average'
-                    : 'good'}>
+                color={
+                  occupant_status === 3
+                    ? 'bad'
+                    : occupant_status === 2
+                      ? 'average'
+                      : 'good'
+                }
+              >
                 {occupant_status === 3
                   ? 'Deceased'
                   : occupant_status === 2
@@ -54,28 +48,33 @@ export const ProbingConsole = (props, context) => {
                 <Button
                   icon="thermometer"
                   content="Probe"
-                  onClick={() => act('experiment', {
-                    experiment_type: 1,
-                  })} />
+                  onClick={() =>
+                    act('experiment', {
+                      experiment_type: 1,
+                    })
+                  }
+                />
                 <Button
                   icon="brain"
                   content="Dissect"
-                  onClick={() => act('experiment', {
-                    experiment_type: 2,
-                  })} />
+                  onClick={() =>
+                    act('experiment', {
+                      experiment_type: 2,
+                    })
+                  }
+                />
                 <Button
                   icon="search"
                   content="Analyze"
-                  onClick={() => act('experiment', {
-                    experiment_type: 3,
-                  })} />
+                  onClick={() =>
+                    act('experiment', {
+                      experiment_type: 3,
+                    })
+                  }
+                />
               </LabeledList.Item>
             </LabeledList>
-          ) || (
-            <NoticeBox>
-              No Subject
-            </NoticeBox>
-          )}
+          )) || <NoticeBox>No Subject</NoticeBox>}
         </Section>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/ProcCallMenu.tsx b/tgui/packages/tgui/interfaces/ProcCallMenu.tsx
index d0b0fbc4278e..54e41245d5f2 100644
--- a/tgui/packages/tgui/interfaces/ProcCallMenu.tsx
+++ b/tgui/packages/tgui/interfaces/ProcCallMenu.tsx
@@ -1,21 +1,28 @@
-import { BooleanLike } from "common/react";
-import { useBackend } from "../backend";
-import { Stack, Section, Input, Button, Dropdown, NoticeBox } from "../components";
-import { Window } from "../layouts";
+import { BooleanLike } from 'common/react';
+import { useBackend } from '../backend';
+import {
+  Stack,
+  Section,
+  Input,
+  Button,
+  Dropdown,
+  NoticeBox,
+} from '../components';
+import { Window } from '../layouts';
 
 type Port = {
-  name: string,
-  color: string,
-  datatype: string,
-}
+  name: string;
+  color: string;
+  datatype: string;
+};
 
 type ProcCallMenuData = {
-  input_ports: Port[],
-  possible_types: string[],
-  expected_output: string,
-  expected_output_color: string,
-  resolve_weakref: BooleanLike,
-}
+  input_ports: Port[];
+  possible_types: string[];
+  expected_output: string;
+  expected_output_color: string;
+  resolve_weakref: BooleanLike;
+};
 
 export const ProcCallMenu = (props, context) => {
   const { act, data } = useBackend<ProcCallMenuData>(context);
@@ -33,15 +40,16 @@ export const ProcCallMenu = (props, context) => {
           <Stack.Item>
             <Section fill title="Options">
               <Stack vertical width="180px">
-                <Stack.Item color="label">
-                  Expected Output:
-                </Stack.Item>
+                <Stack.Item color="label">Expected Output:</Stack.Item>
                 <Stack.Item>
-                  <Dropdown width="100%"
+                  <Dropdown
+                    width="100%"
                     displayText={expected_output}
                     options={possible_types}
                     color={expected_output_color}
-                    onSelected={(value) => act("set_expected_output", { datatype: value })}
+                    onSelected={(value) =>
+                      act('set_expected_output', { datatype: value })
+                    }
                   />
                 </Stack.Item>
                 <Stack.Divider />
@@ -50,7 +58,7 @@ export const ProcCallMenu = (props, context) => {
                     content="Resolve Weakref"
                     textAlign="center"
                     checked={resolve_weakref}
-                    onClick={() => act("resolve_weakref")}
+                    onClick={() => act('resolve_weakref')}
                     fluid
                   />
                 </Stack.Item>
@@ -73,17 +81,23 @@ export const ProcCallMenu = (props, context) => {
                     color={val.color}
                     datatype={val.datatype}
                     datatypeOptions={possible_types}
-                    onRemove={() => act("remove_argument", {
-                      index: index+1,
-                    })}
-                    onSetType={type => act("set_argument_datatype", {
-                      index: index+1,
-                      datatype: type,
-                    })}
-                    onEnter={(e, value) => act("rename_argument", {
-                      index: index+1,
-                      name: value,
-                    })}
+                    onRemove={() =>
+                      act('remove_argument', {
+                        index: index + 1,
+                      })
+                    }
+                    onSetType={(type) =>
+                      act('set_argument_datatype', {
+                        index: index + 1,
+                        datatype: type,
+                      })
+                    }
+                    onEnter={(e, value) =>
+                      act('rename_argument', {
+                        index: index + 1,
+                        name: value,
+                      })
+                    }
                   />
                 ))}
                 <Stack.Item>
@@ -92,7 +106,7 @@ export const ProcCallMenu = (props, context) => {
                     content="Add Argument"
                     color="good"
                     icon="plus"
-                    onClick={() => act("add_argument")}
+                    onClick={() => act('add_argument')}
                   />
                 </Stack.Item>
               </Stack>
@@ -120,12 +134,7 @@ const PortEntry = (props, context) => {
     <Stack.Item {...rest}>
       <Stack>
         <Stack.Item grow>
-          <Input
-            placeholder="Name"
-            value={name}
-            onChange={onEnter}
-            fluid
-          />
+          <Input placeholder="Name" value={name} onChange={onEnter} fluid />
         </Stack.Item>
         <Stack.Item>
           <Dropdown
@@ -136,11 +145,7 @@ const PortEntry = (props, context) => {
           />
         </Stack.Item>
         <Stack.Item>
-          <Button
-            icon="times"
-            color="red"
-            onClick={onRemove}
-          />
+          <Button icon="times" color="red" onClick={onRemove} />
         </Stack.Item>
       </Stack>
     </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/ProduceConsole.js b/tgui/packages/tgui/interfaces/ProduceConsole.js
index c1bd4a907572..7f3d8a7fba28 100644
--- a/tgui/packages/tgui/interfaces/ProduceConsole.js
+++ b/tgui/packages/tgui/interfaces/ProduceConsole.js
@@ -1,6 +1,15 @@
 import { multiline } from 'common/string';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Dimmer, Divider, Icon, NumberInput, Section, Stack } from '../components';
+import {
+  Box,
+  Button,
+  Dimmer,
+  Divider,
+  Icon,
+  NumberInput,
+  Section,
+  Stack,
+} from '../components';
 import { Window } from '../layouts';
 
 const buttonWidth = 2;
@@ -16,16 +25,11 @@ const TAB2NAME = [
 
 const ShoppingTab = (props, context) => {
   const { data, act } = useBackend(context);
-  const {
-    order_datums,
-  } = data;
-  const [
-    shopIndex,
-    setShopIndex,
-  ] = useLocalState(context, 'shop-index', 1);
-  const mapped_food = order_datums.filter(food => (
-    food && food.cat === shopIndex
-  ));
+  const { order_datums } = data;
+  const [shopIndex, setShopIndex] = useLocalState(context, 'shop-index', 1);
+  const mapped_food = order_datums.filter(
+    (food) => food && food.cat === shopIndex,
+  );
   return (
     <Stack fill vertical>
       <Section mb={-0.9}>
@@ -36,21 +40,24 @@ const ShoppingTab = (props, context) => {
                 fluid
                 color="green"
                 content="Fruits and Veggies"
-                onClick={() => setShopIndex(1)} />
+                onClick={() => setShopIndex(1)}
+              />
             </Stack.Item>
             <Stack.Item grow>
               <Button
                 fluid
                 color="white"
                 content="Milk and Eggs"
-                onClick={() => setShopIndex(2)} />
+                onClick={() => setShopIndex(2)}
+              />
             </Stack.Item>
             <Stack.Item grow>
               <Button
                 fluid
                 color="olive"
                 content="Sauces and Reagents"
-                onClick={() => setShopIndex(3)} />
+                onClick={() => setShopIndex(3)}
+              />
             </Stack.Item>
           </Stack>
         </Stack.Item>
@@ -59,30 +66,31 @@ const ShoppingTab = (props, context) => {
         <Section fill scrollable>
           <Stack vertical mt={-2}>
             <Divider />
-            {mapped_food.map(item => (
+            {mapped_food.map((item) => (
               <Stack.Item key={item}>
                 <Stack>
-                  <Stack.Item grow>
-                    {item.name}
-                  </Stack.Item>
+                  <Stack.Item grow>{item.name}</Stack.Item>
                   <Stack.Item mt={-1} color="label" fontSize="10px">
-                    {"\""+item.desc+"\""}
+                    {'"' + item.desc + '"'}
                     <br />
                     <Box textAlign="right">
-                      {item.name+" costs "+item.cost+" per order."}
+                      {item.name + ' costs ' + item.cost + ' per order.'}
                     </Box>
                   </Stack.Item>
                   <Stack.Item mt={-0.5}>
                     <NumberInput
                       animated
-                      value={item.amt && item.amt || 0}
+                      value={(item.amt && item.amt) || 0}
                       width="41px"
                       minValue={0}
                       maxValue={20}
-                      onChange={(e, value) => act('cart_set', {
-                        target: item.ref,
-                        amt: value,
-                      })} />
+                      onChange={(e, value) =>
+                        act('cart_set', {
+                          target: item.ref,
+                          amt: value,
+                        })
+                      }
+                    />
                   </Stack.Item>
                 </Stack>
                 <Divider />
@@ -97,21 +105,14 @@ const ShoppingTab = (props, context) => {
 
 const CheckoutTab = (props, context) => {
   const { data, act } = useBackend(context);
-  const {
-    order_datums,
-    total_cost,
-  } = data;
-  const checkout_list = order_datums.filter(food => (
-    food && food.amt
-  ));
+  const { order_datums, total_cost } = data;
+  const checkout_list = order_datums.filter((food) => food && food.amt);
   return (
     <Stack vertical fill>
       <Stack.Item grow>
         <Section fill scrollable>
           <Stack vertical fill>
-            <Stack.Item textAlign="center">
-              Checkout list:
-            </Stack.Item>
+            <Stack.Item textAlign="center">Checkout list:</Stack.Item>
             <Divider />
             {!checkout_list.length && (
               <>
@@ -125,29 +126,30 @@ const CheckoutTab = (props, context) => {
               </>
             )}
             <Stack.Item grow>
-              {checkout_list.map(item => (
+              {checkout_list.map((item) => (
                 <Stack.Item key={item}>
                   <Stack>
-                    <Stack.Item grow>
-                      {item.name}
-                    </Stack.Item>
+                    <Stack.Item grow>{item.name}</Stack.Item>
                     <Stack.Item mt={-1} color="label" fontSize="10px">
-                      {"\""+item.desc+"\""}
+                      {'"' + item.desc + '"'}
                       <br />
                       <Box textAlign="right">
-                        {item.name+" costs "+item.cost+" per order."}
+                        {item.name + ' costs ' + item.cost + ' per order.'}
                       </Box>
                     </Stack.Item>
                     <Stack.Item mt={-0.5}>
                       <NumberInput
-                        value={item.amt && item.amt || 0}
+                        value={(item.amt && item.amt) || 0}
                         width="41px"
                         minValue={0}
-                        maxValue={item.cost > 10 && 50 || 10}
-                        onChange={(e, value) => act('cart_set', {
-                          target: item.ref,
-                          amt: value,
-                        })} />
+                        maxValue={(item.cost > 10 && 50) || 10}
+                        onChange={(e, value) =>
+                          act('cart_set', {
+                            target: item.ref,
+                            amt: value,
+                          })
+                        }
+                      />
                     </Stack.Item>
                   </Stack>
                   <Divider />
@@ -173,7 +175,8 @@ const CheckoutTab = (props, context) => {
                 and hopefully get delivered by them.
                 `}
                 tooltipPosition="top"
-                onClick={() => act('purchase')} />
+                onClick={() => act('purchase')}
+              />
             </Stack.Item>
             <Stack.Item grow textAlign="center">
               <Button
@@ -186,7 +189,8 @@ const CheckoutTab = (props, context) => {
                 and locks the console longer. Doubles the price!
                 `}
                 tooltipPosition="top-start"
-                onClick={() => act('express')} />
+                onClick={() => act('express')}
+              />
             </Stack.Item>
           </Stack>
         </Section>
@@ -201,12 +205,7 @@ const OrderSent = (props, context) => {
     <Dimmer>
       <Stack vertical>
         <Stack.Item>
-          <Icon
-            ml="28%"
-            color="green"
-            name="plane-arrival"
-            size={10}
-          />
+          <Icon ml="28%" color="green" name="plane-arrival" size={10} />
         </Stack.Item>
         <Stack.Item fontSize="18px" color="green">
           Order sent! Machine on cooldown...
@@ -218,23 +217,13 @@ const OrderSent = (props, context) => {
 
 export const ProduceConsole = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    off_cooldown,
-  } = data;
-  const [
-    tabIndex,
-    setTabIndex,
-  ] = useLocalState(context, 'tab-index', 1);
-  const TabComponent = TAB2NAME[tabIndex-1].component();
+  const { off_cooldown } = data;
+  const [tabIndex, setTabIndex] = useLocalState(context, 'tab-index', 1);
+  const TabComponent = TAB2NAME[tabIndex - 1].component();
   return (
-    <Window
-      title="Produce Orders"
-      width={500}
-      height={400}>
+    <Window title="Produce Orders" width={500} height={400}>
       <Window.Content>
-        {!off_cooldown && (
-          <OrderSent />
-        )}
+        {!off_cooldown && <OrderSent />}
         <Stack vertical fill>
           <Stack.Item>
             <Section fill>
@@ -246,7 +235,8 @@ export const ProduceConsole = (props, context) => {
                     lineHeight={buttonWidth}
                     icon="cart-plus"
                     content="Shopping"
-                    onClick={() => setTabIndex(1)} />
+                    onClick={() => setTabIndex(1)}
+                  />
                 </Stack.Item>
                 <Stack.Item grow>
                   <Button
@@ -255,7 +245,8 @@ export const ProduceConsole = (props, context) => {
                     lineHeight={buttonWidth}
                     icon="dollar-sign"
                     content="Checkout"
-                    onClick={() => setTabIndex(2)} />
+                    onClick={() => setTabIndex(2)}
+                  />
                 </Stack.Item>
               </Stack>
             </Section>
diff --git a/tgui/packages/tgui/interfaces/ProximitySensor.js b/tgui/packages/tgui/interfaces/ProximitySensor.js
index c8dd04c3ee59..f42ba9edb403 100644
--- a/tgui/packages/tgui/interfaces/ProximitySensor.js
+++ b/tgui/packages/tgui/interfaces/ProximitySensor.js
@@ -4,17 +4,9 @@ import { Window } from '../layouts';
 
 export const ProximitySensor = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    minutes,
-    seconds,
-    timing,
-    scanning,
-    sensitivity,
-  } = data;
+  const { minutes, seconds, timing, scanning, sensitivity } = data;
   return (
-    <Window
-      width={250}
-      height={185}>
+    <Window width={250} height={185}>
       <Window.Content>
         <Section>
           <LabeledList>
@@ -23,53 +15,57 @@ export const ProximitySensor = (props, context) => {
                 icon={scanning ? 'lock' : 'unlock'}
                 content={scanning ? 'Armed' : 'Not Armed'}
                 selected={scanning}
-                onClick={() => act('scanning')} />
+                onClick={() => act('scanning')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Detection Range">
               <Button
                 icon="backward"
                 disabled={scanning}
-                onClick={() => act('sense', { range: -1 })} />
-              {' '}
-              {String(sensitivity).padStart(1, '1')}
-              {' '}
+                onClick={() => act('sense', { range: -1 })}
+              />{' '}
+              {String(sensitivity).padStart(1, '1')}{' '}
               <Button
                 icon="forward"
                 disabled={scanning}
-                onClick={() => act('sense', { range: 1 })} />
+                onClick={() => act('sense', { range: 1 })}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
         <Section
           title="Auto Arm"
-          buttons={(
+          buttons={
             <Button
-              icon={"clock-o"}
+              icon={'clock-o'}
               content={timing ? 'Stop' : 'Start'}
               selected={timing}
               disabled={scanning}
-              onClick={() => act('time')} />
-          )}>
+              onClick={() => act('time')}
+            />
+          }
+        >
           <Button
             icon="fast-backward"
             disabled={scanning || timing}
-            onClick={() => act('input', { adjust: -30 })} />
+            onClick={() => act('input', { adjust: -30 })}
+          />
           <Button
             icon="backward"
             disabled={scanning || timing}
-            onClick={() => act('input', { adjust: -1 })} />
-          {' '}
-          {String(minutes).padStart(2, '0')}:
-          {String(seconds).padStart(2, '0')}
-          {' '}
+            onClick={() => act('input', { adjust: -1 })}
+          />{' '}
+          {String(minutes).padStart(2, '0')}:{String(seconds).padStart(2, '0')}{' '}
           <Button
             icon="forward"
             disabled={scanning || timing}
-            onClick={() => act('input', { adjust: 1 })} />
+            onClick={() => act('input', { adjust: 1 })}
+          />
           <Button
             icon="fast-forward"
             disabled={scanning || timing}
-            onClick={() => act('input', { adjust: 30 })} />
+            onClick={() => act('input', { adjust: 30 })}
+          />
         </Section>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/Radio.js b/tgui/packages/tgui/interfaces/Radio.js
index 738826ba63b0..af53c0f69285 100644
--- a/tgui/packages/tgui/interfaces/Radio.js
+++ b/tgui/packages/tgui/interfaces/Radio.js
@@ -19,8 +19,9 @@ export const Radio = (props, context) => {
     subspace,
     subspaceSwitchable,
   } = data;
-  const tunedChannel = RADIO_CHANNELS
-    .find(channel => channel.freq === frequency);
+  const tunedChannel = RADIO_CHANNELS.find(
+    (channel) => channel.freq === frequency,
+  );
   const channels = map((value, key) => ({
     name: key,
     status: !!value,
@@ -30,24 +31,21 @@ export const Radio = (props, context) => {
   if (subspace) {
     if (channels.length > 0) {
       height += channels.length * 21 + 6;
-    }
-    else {
+    } else {
       height += 24;
     }
   }
   return (
-    <Window
-      width={360}
-      height={height}>
+    <Window width={360} height={height}>
       <Window.Content>
         <Section>
           <LabeledList>
             <LabeledList.Item label="Frequency">
-              {freqlock && (
+              {(freqlock && (
                 <Box inline color="light-gray">
                   {toFixed(frequency / 10, 1) + ' kHz'}
                 </Box>
-              ) || (
+              )) || (
                 <NumberInput
                   animate
                   unit="kHz"
@@ -56,10 +54,13 @@ export const Radio = (props, context) => {
                   minValue={minFrequency / 10}
                   maxValue={maxFrequency / 10}
                   value={frequency / 10}
-                  format={value => toFixed(value, 1)}
-                  onDrag={(e, value) => act('frequency', {
-                    adjust: (value - frequency / 10),
-                  })} />
+                  format={(value) => toFixed(value, 1)}
+                  onDrag={(e, value) =>
+                    act('frequency', {
+                      adjust: value - frequency / 10,
+                    })
+                  }
+                />
               )}
               {tunedChannel && (
                 <Box inline color={tunedChannel.color} ml={2}>
@@ -73,20 +74,23 @@ export const Radio = (props, context) => {
                 width="37px"
                 icon={listening ? 'volume-up' : 'volume-mute'}
                 selected={listening}
-                onClick={() => act('listen')} />
+                onClick={() => act('listen')}
+              />
               <Button
                 textAlign="center"
                 width="37px"
                 icon={broadcasting ? 'microphone' : 'microphone-slash'}
                 selected={broadcasting}
-                onClick={() => act('broadcast')} />
+                onClick={() => act('broadcast')}
+              />
               {!!command && (
                 <Button
                   ml={1}
                   icon="bullhorn"
                   selected={useCommand}
                   content={`High volume ${useCommand ? 'ON' : 'OFF'}`}
-                  onClick={() => act('command')} />
+                  onClick={() => act('command')}
+                />
               )}
               {!!subspaceSwitchable && (
                 <Button
@@ -94,7 +98,8 @@ export const Radio = (props, context) => {
                   icon="bullhorn"
                   selected={subspace}
                   content={`Subspace Tx ${subspace ? 'ON' : 'OFF'}`}
-                  onClick={() => act('subspace')} />
+                  onClick={() => act('subspace')}
+                />
               )}
             </LabeledList.Item>
             {!!subspace && (
@@ -104,15 +109,18 @@ export const Radio = (props, context) => {
                     No encryption keys installed.
                   </Box>
                 )}
-                {channels.map(channel => (
+                {channels.map((channel) => (
                   <Box key={channel.name}>
                     <Button
                       icon={channel.status ? 'check-square-o' : 'square-o'}
                       selected={channel.status}
                       content={channel.name}
-                      onClick={() => act('channel', {
-                        channel: channel.name,
-                      })} />
+                      onClick={() =>
+                        act('channel', {
+                          channel: channel.name,
+                        })
+                      }
+                    />
                   </Box>
                 ))}
               </LabeledList.Item>
diff --git a/tgui/packages/tgui/interfaces/RadioactiveMicrolaser.js b/tgui/packages/tgui/interfaces/RadioactiveMicrolaser.js
index 2fd20aa65877..ccf868119ef2 100644
--- a/tgui/packages/tgui/interfaces/RadioactiveMicrolaser.js
+++ b/tgui/packages/tgui/interfaces/RadioactiveMicrolaser.js
@@ -18,13 +18,14 @@ export const RadioactiveMicrolaser = (props, context) => {
       title="Radioactive Microlaser"
       width={320}
       height={335}
-      theme="syndicate">
+      theme="syndicate"
+    >
       <Window.Content>
         <Section>
           <LabeledList>
             <LabeledList.Item label="Laser Status">
-              <Box color={on_cooldown ? "average" : "good"}>
-                {on_cooldown ? "Recharging" : "Ready"}
+              <Box color={on_cooldown ? 'average' : 'good'}>
+                {on_cooldown ? 'Recharging' : 'Ready'}
               </Box>
             </LabeledList.Item>
           </LabeledList>
@@ -36,7 +37,8 @@ export const RadioactiveMicrolaser = (props, context) => {
                 icon={irradiate ? 'power-off' : 'times'}
                 content={irradiate ? 'On' : 'Off'}
                 selected={irradiate}
-                onClick={() => act('irradiate')} />
+                onClick={() => act('irradiate')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Stealth Mode">
               <Button
@@ -44,14 +46,16 @@ export const RadioactiveMicrolaser = (props, context) => {
                 content={stealth ? 'On' : 'Off'}
                 disabled={!irradiate}
                 selected={stealth}
-                onClick={() => act('stealth')} />
+                onClick={() => act('stealth')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Scan Mode">
               <Button
                 icon={scanmode ? 'mortar-pestle' : 'heartbeat'}
                 content={scanmode ? 'Scan Reagents' : 'Scan Health'}
                 disabled={irradiate && stealth}
-                onClick={() => act('scanmode')} />
+                onClick={() => act('scanmode')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
@@ -60,11 +64,12 @@ export const RadioactiveMicrolaser = (props, context) => {
             <LabeledList.Item label="Radiation Intensity">
               <Button
                 icon="fast-backward"
-                onClick={() => act('radintensity', { adjust: -5 })} />
+                onClick={() => act('radintensity', { adjust: -5 })}
+              />
               <Button
                 icon="backward"
-                onClick={() => act('radintensity', { adjust: -1 })} />
-              {' '}
+                onClick={() => act('radintensity', { adjust: -1 })}
+              />{' '}
               <NumberInput
                 value={Math.round(intensity)}
                 width="40px"
@@ -74,23 +79,26 @@ export const RadioactiveMicrolaser = (props, context) => {
                   return act('radintensity', {
                     target: value,
                   });
-                }} />
-              {' '}
+                }}
+              />{' '}
               <Button
                 icon="forward"
-                onClick={() => act('radintensity', { adjust: 1 })} />
+                onClick={() => act('radintensity', { adjust: 1 })}
+              />
               <Button
                 icon="fast-forward"
-                onClick={() => act('radintensity', { adjust: 5 })} />
+                onClick={() => act('radintensity', { adjust: 5 })}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Radiation Wavelength">
               <Button
                 icon="fast-backward"
-                onClick={() => act('radwavelength', { adjust: -5 })} />
+                onClick={() => act('radwavelength', { adjust: -5 })}
+              />
               <Button
                 icon="backward"
-                onClick={() => act('radwavelength', { adjust: -1 })} />
-              {' '}
+                onClick={() => act('radwavelength', { adjust: -1 })}
+              />{' '}
               <NumberInput
                 value={Math.round(wavelength)}
                 width="40px"
@@ -100,14 +108,16 @@ export const RadioactiveMicrolaser = (props, context) => {
                   return act('radwavelength', {
                     target: value,
                   });
-                }} />
-              {' '}
+                }}
+              />{' '}
               <Button
                 icon="forward"
-                onClick={() => act('radwavelength', { adjust: 1 })} />
+                onClick={() => act('radwavelength', { adjust: 1 })}
+              />
               <Button
                 icon="fast-forward"
-                onClick={() => act('radwavelength', { adjust: 5 })} />
+                onClick={() => act('radwavelength', { adjust: 5 })}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Laser Cooldown">
               <Box inline bold>
diff --git a/tgui/packages/tgui/interfaces/RapidPipeDispenser.js b/tgui/packages/tgui/interfaces/RapidPipeDispenser.js
index a4fc2b248ebc..f27f46f2a1c5 100644
--- a/tgui/packages/tgui/interfaces/RapidPipeDispenser.js
+++ b/tgui/packages/tgui/interfaces/RapidPipeDispenser.js
@@ -1,22 +1,26 @@
 import { classes } from 'common/react';
 import { multiline } from 'common/string';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, ColorBox, LabeledList, Section, Stack, Tabs } from '../components';
+import {
+  Box,
+  Button,
+  ColorBox,
+  LabeledList,
+  Section,
+  Stack,
+  Tabs,
+} from '../components';
 import { Window } from '../layouts';
 
-const ROOT_CATEGORIES = [
-  'Atmospherics',
-  'Disposals',
-  'Transit Tubes',
-];
+const ROOT_CATEGORIES = ['Atmospherics', 'Disposals', 'Transit Tubes'];
 
 export const ICON_BY_CATEGORY_NAME = {
-  'Atmospherics': 'wrench',
-  'Disposals': 'trash-alt',
+  Atmospherics: 'wrench',
+  Disposals: 'trash-alt',
   'Transit Tubes': 'bus',
-  'Pipes': 'grip-lines',
+  Pipes: 'grip-lines',
   'Disposal Pipes': 'grip-lines',
-  'Devices': 'microchip',
+  Devices: 'microchip',
   'Heat Exchange': 'thermometer-half',
   'Station Equipment': 'microchip',
 };
@@ -42,49 +46,46 @@ const TOOLS = [
 
 export const ColorItem = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    selected_color,
-  } = data;
+  const { selected_color } = data;
   return (
-    <LabeledList.Item
-      label="Color">
-      <Box
-        inline
-        width="64px"
-        color={data.paint_colors[selected_color]}>
+    <LabeledList.Item label="Color">
+      <Box inline width="64px" color={data.paint_colors[selected_color]}>
         {selected_color}
       </Box>
-      {Object.keys(data.paint_colors)
-        .map(colorName => (
-          <ColorBox
-            key={colorName}
-            ml={1}
-            color={data.paint_colors[colorName]}
-            onClick={() => act('color', {
+      {Object.keys(data.paint_colors).map((colorName) => (
+        <ColorBox
+          key={colorName}
+          ml={1}
+          color={data.paint_colors[colorName]}
+          onClick={() =>
+            act('color', {
               paint_color: colorName,
-            })} />
-        ))}
+            })
+          }
+        />
+      ))}
     </LabeledList.Item>
   );
 };
 
 const ModeItem = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    mode,
-  } = data;
+  const { mode } = data;
   return (
     <LabeledList.Item label="Modes">
       <Stack fill>
-        {TOOLS.map(tool => (
+        {TOOLS.map((tool) => (
           <Stack.Item grow key={tool.bitmask}>
             <Button.Checkbox
               checked={mode & tool.bitmask}
               fluid
               content={tool.name}
-              onClick={() => act('mode', {
-                mode: tool.bitmask,
-              })} />
+              onClick={() =>
+                act('mode', {
+                  mode: tool.bitmask,
+                })
+              }
+            />
           </Stack.Item>
         ))}
       </Stack>
@@ -94,19 +95,17 @@ const ModeItem = (props, context) => {
 
 const CategoryItem = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    category: rootCategoryIndex,
-  } = data;
+  const { category: rootCategoryIndex } = data;
   return (
-    <LabeledList.Item
-      label="Category">
+    <LabeledList.Item label="Category">
       {ROOT_CATEGORIES.map((categoryName, i) => (
         <Button
           key={categoryName}
           selected={rootCategoryIndex === i}
           icon={ICON_BY_CATEGORY_NAME[categoryName]}
           color="transparent"
-          onClick={() => act('category', { category: i })} >
+          onClick={() => act('category', { category: i })}
+        >
           {categoryName}
         </Button>
       ))}
@@ -129,19 +128,20 @@ const SelectionSection = (props, context) => {
 
 export const LayerSelect = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    piping_layer,
-  } = data;
+  const { piping_layer } = data;
   return (
     <Stack vertical mb={1}>
-      {[1, 2, 3, 4, 5].map(layer => (
+      {[1, 2, 3, 4, 5].map((layer) => (
         <Stack.Item my={0} key={layer}>
           <Button.Checkbox
             checked={layer === piping_layer}
             content={'Layer ' + layer}
-            onClick={() => act('piping_layer', {
-              piping_layer: layer,
-            })} />
+            onClick={() =>
+              act('piping_layer', {
+                piping_layer: layer,
+              })
+            }
+          />
         </Stack.Item>
       ))}
     </Stack>
@@ -150,13 +150,11 @@ export const LayerSelect = (props, context) => {
 
 const PreviewSelect = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    category: rootCategoryIndex,
-  } = data;
-  const previews = data.preview_rows.flatMap(row => row.previews);
+  const { category: rootCategoryIndex } = data;
+  const previews = data.preview_rows.flatMap((row) => row.previews);
   return (
     <Box width="120px">
-      {previews.map(preview => (
+      {previews.map((preview) => (
         <Button
           ml={0}
           key={preview.dir}
@@ -167,10 +165,13 @@ const PreviewSelect = (props, context) => {
             height: '40px',
             padding: 0,
           }}
-          onClick={() => act('setdir', {
-            dir: preview.dir,
-            flipped: preview.flipped,
-          })}>
+          onClick={() =>
+            act('setdir', {
+              dir: preview.dir,
+              flipped: preview.flipped,
+            })
+          }
+        >
           <Box
             className={classes([
               'pipes32x32',
@@ -178,7 +179,8 @@ const PreviewSelect = (props, context) => {
             ])}
             style={{
               transform: 'scale(1.5) translate(9.5%, 9.5%)',
-            }} />
+            }}
+          />
         </Button>
       ))}
     </Box>
@@ -187,16 +189,11 @@ const PreviewSelect = (props, context) => {
 
 const LayerSection = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    category: rootCategoryIndex,
-    piping_layer,
-  } = data;
-  const previews = data.preview_rows.flatMap(row => row.previews);
+  const { category: rootCategoryIndex, piping_layer } = data;
+  const previews = data.preview_rows.flatMap((row) => row.previews);
   return (
     <Section fill width={7.5}>
-      {rootCategoryIndex === 0 && (
-        <LayerSelect />
-      )}
+      {rootCategoryIndex === 0 && <LayerSelect />}
       <PreviewSelect />
     </Section>
   );
@@ -204,16 +201,14 @@ const LayerSection = (props, context) => {
 
 const PipeTypeSection = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    categories = [],
-  } = data;
-  const [
-    categoryName,
-    setCategoryName,
-  ] = useLocalState(context, 'categoryName');
-  const shownCategory = categories
-    .find(category => category.cat_name === categoryName)
-    || categories[0];
+  const { categories = [] } = data;
+  const [categoryName, setCategoryName] = useLocalState(
+    context,
+    'categoryName',
+  );
+  const shownCategory =
+    categories.find((category) => category.cat_name === categoryName) ||
+    categories[0];
   return (
     <Section fill scrollable>
       <Tabs>
@@ -223,12 +218,13 @@ const PipeTypeSection = (props, context) => {
             key={category.cat_name}
             icon={ICON_BY_CATEGORY_NAME[category.cat_name]}
             selected={category.cat_name === shownCategory.cat_name}
-            onClick={() => setCategoryName(category.cat_name)}>
+            onClick={() => setCategoryName(category.cat_name)}
+          >
             {category.cat_name}
           </Tabs.Tab>
         ))}
       </Tabs>
-      {shownCategory?.recipes.map(recipe => (
+      {shownCategory?.recipes.map((recipe) => (
         <Button.Checkbox
           key={recipe.pipe_index}
           fluid
@@ -236,10 +232,13 @@ const PipeTypeSection = (props, context) => {
           checked={recipe.selected}
           content={recipe.pipe_name}
           title={recipe.pipe_name}
-          onClick={() => act('pipe_type', {
-            pipe_type: recipe.pipe_index,
-            category: shownCategory.cat_name,
-          })} />
+          onClick={() =>
+            act('pipe_type', {
+              pipe_type: recipe.pipe_index,
+              category: shownCategory.cat_name,
+            })
+          }
+        />
       ))}
     </Section>
   );
@@ -248,9 +247,7 @@ const PipeTypeSection = (props, context) => {
 export const SmartPipeBlockSection = (props, context) => {
   const { act, data } = useBackend(context);
   const init_directions = data.init_directions || [];
-  const {
-    category: rootCategoryIndex,
-  } = data;
+  const { category: rootCategoryIndex } = data;
   return (
     <Section height={7.5}>
       <Stack fill vertical textAlign="center">
@@ -265,47 +262,62 @@ export const SmartPipeBlockSection = (props, context) => {
                 This is a panel for blocking certain connection
                 directions for the smart pipes.
                 The button in the center resets to
-                default (all directions can connect)`} />
+                default (all directions can connect)`}
+              />
             </Stack.Item>
             <Stack.Item>
-              <Button icon="arrow-up"
+              <Button
+                icon="arrow-up"
                 disabled={!!data.smart_pipe}
-                selected={init_directions["north"]}
-                onClick={() => act('init_dir_setting', {
-                  dir_flag: "north",
-                })} />
+                selected={init_directions['north']}
+                onClick={() =>
+                  act('init_dir_setting', {
+                    dir_flag: 'north',
+                  })
+                }
+              />
             </Stack.Item>
           </Stack>
         </Stack.Item>
         <Stack.Item basis={1.5}>
           <Stack fill>
             <Stack.Item>
-              <Button icon="arrow-left"
-                selected={init_directions["west"]}
-                onClick={() => act('init_dir_setting', {
-                  dir_flag: "west",
-                })} />
+              <Button
+                icon="arrow-left"
+                selected={init_directions['west']}
+                onClick={() =>
+                  act('init_dir_setting', {
+                    dir_flag: 'west',
+                  })
+                }
+              />
             </Stack.Item>
             <Stack.Item grow>
-              <Button icon="circle"
-                onClick={() => act('init_reset', {
-                })} />
+              <Button icon="circle" onClick={() => act('init_reset', {})} />
             </Stack.Item>
             <Stack.Item>
-              <Button icon="arrow-right"
-                selected={init_directions["east"]}
-                onClick={() => act('init_dir_setting', {
-                  dir_flag: "east",
-                })} />
+              <Button
+                icon="arrow-right"
+                selected={init_directions['east']}
+                onClick={() =>
+                  act('init_dir_setting', {
+                    dir_flag: 'east',
+                  })
+                }
+              />
             </Stack.Item>
           </Stack>
         </Stack.Item>
         <Stack.Item grow>
-          <Button icon="arrow-down"
-            selected={init_directions["south"]}
-            onClick={() => act('init_dir_setting', {
-              dir_flag: "south",
-            })} />
+          <Button
+            icon="arrow-down"
+            selected={init_directions['south']}
+            onClick={() =>
+              act('init_dir_setting', {
+                dir_flag: 'south',
+              })
+            }
+          />
         </Stack.Item>
       </Stack>
     </Section>
@@ -314,13 +326,9 @@ export const SmartPipeBlockSection = (props, context) => {
 
 export const RapidPipeDispenser = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    category: rootCategoryIndex,
-  } = data;
+  const { category: rootCategoryIndex } = data;
   return (
-    <Window
-      width={450}
-      height={575}>
+    <Window width={450} height={575}>
       <Window.Content>
         <Stack fill vertical>
           <Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/Reagents.js b/tgui/packages/tgui/interfaces/Reagents.js
index 518f24213f8f..44d692e90ab1 100644
--- a/tgui/packages/tgui/interfaces/Reagents.js
+++ b/tgui/packages/tgui/interfaces/Reagents.js
@@ -6,22 +6,16 @@ import { RecipeLookup } from './common/RecipeLookup';
 
 const bookmarkedReactions = new Set();
 
-const matchBitflag = (a, b) => (a & b) && (a | b) === b;
+const matchBitflag = (a, b) => a & b && (a | b) === b;
 
 export const Reagents = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    beakerSync,
-    reagent_mode_recipe,
-    reagent_mode_reagent,
-  } = data;
+  const { beakerSync, reagent_mode_recipe, reagent_mode_reagent } = data;
 
-  const [page, setPage] = useLocalState(context, "page", 1);
+  const [page, setPage] = useLocalState(context, 'page', 1);
 
   return (
-    <Window
-      width={720}
-      height={850}>
+    <Window width={720} height={850}>
       <Window.Content>
         <Stack fill vertical>
           <Stack.Item>
@@ -30,55 +24,67 @@ export const Reagents = (props, context) => {
                 <Section
                   title="Recipe lookup"
                   minWidth="353px"
-                  buttons={(
+                  buttons={
                     <>
                       <Button
                         content="Beaker Sync"
                         icon="atom"
-                        color={beakerSync ? "green" : "red"}
+                        color={beakerSync ? 'green' : 'red'}
                         tooltip="When enabled the displayed reaction will automatically display ongoing reactions in the associated beaker."
-                        onClick={() => act('beaker_sync')} />
+                        onClick={() => act('beaker_sync')}
+                      />
                       <Button
                         content="Search"
                         icon="search"
                         color="purple"
                         tooltip="Search for a recipe by product name"
-                        onClick={() => act('search_recipe')} />
+                        onClick={() => act('search_recipe')}
+                      />
                       <Button
                         icon="times"
                         color="red"
                         disabled={!reagent_mode_recipe}
-                        onClick={() => act('recipe_click', {
-                          id: null,
-                        })} />
+                        onClick={() =>
+                          act('recipe_click', {
+                            id: null,
+                          })
+                        }
+                      />
                     </>
-                  )}>
+                  }
+                >
                   <RecipeLookup
                     recipe={reagent_mode_recipe}
-                    bookmarkedReactions={bookmarkedReactions} />
+                    bookmarkedReactions={bookmarkedReactions}
+                  />
                 </Section>
               </Stack.Item>
               <Stack.Item grow basis={0}>
                 <Section
                   title="Reagent lookup"
                   minWidth="300px"
-                  buttons={(
+                  buttons={
                     <>
                       <Button
                         content="Search"
                         icon="search"
                         tooltip="Search for a reagent by name"
                         tooltipPosition="left"
-                        onClick={() => act('search_reagents')} />
+                        onClick={() => act('search_reagents')}
+                      />
                       <Button
                         icon="times"
                         color="red"
                         disabled={!reagent_mode_reagent}
-                        onClick={() => act('reagent_click', {
-                          id: null,
-                        })} />
+                        onClick={() =>
+                          act('reagent_click', {
+                            id: null,
+                          })
+                        }
+                      />
                     </>
-                  )}>
+                  }
+                >
                   <ReagentLookup reagent={reagent_mode_reagent} />
                 </Section>
               </Stack.Item>
@@ -90,10 +96,9 @@ export const Reagents = (props, context) => {
   );
 };
 
-
 const RecipeLibrary = (props, context) => {
   const { act, data } = useBackend(context);
-  const [page, setPage] = useLocalState(context, "page", 1);
+  const [page, setPage] = useLocalState(context, 'page', 1);
   const {
     currentReagents = [],
     master_reaction_list = [],
@@ -101,39 +106,43 @@ const RecipeLibrary = (props, context) => {
   } = data;
 
   const [reagentFilter, setReagentFilter] = useLocalState(
-    context, 'reagentFilter', true);
+    context,
+    'reagentFilter',
+    true,
+  );
   const [bookmarkMode, setBookmarkMode] = useLocalState(
-    context, 'bookmarkMode', false);
+    context,
+    'bookmarkMode',
+    false,
+  );
 
-  const matchReagents = reaction => {
+  const matchReagents = (reaction) => {
     if (!reagentFilter || currentReagents === null) {
       return true;
     }
-    let matches = reaction.reactants
-      .filter(reactant => currentReagents.includes(reactant.id))
-      .length;
+    let matches = reaction.reactants.filter((reactant) =>
+      currentReagents.includes(reactant.id),
+    ).length;
     return matches === currentReagents.length;
   };
 
   const bookmarkArray = Array.from(bookmarkedReactions);
 
-  const startIndex = 50 * (page-1);
+  const startIndex = 50 * (page - 1);
 
   const endIndex = 50 * page;
 
   const visibleReactions = bookmarkMode
     ? bookmarkArray
-    : master_reaction_list.filter(reaction => (
-      matchReagents(reaction)
-    ));
+    : master_reaction_list.filter((reaction) => matchReagents(reaction));
 
-  const pageIndexMax = Math.ceil(visibleReactions.length/50);
+  const pageIndexMax = Math.ceil(visibleReactions.length / 50);
 
-  const addBookmark = bookmark => {
+  const addBookmark = (bookmark) => {
     bookmarkedReactions.add(bookmark);
   };
 
-  const removeBookmark = bookmark => {
+  const removeBookmark = (bookmark) => {
     bookmarkedReactions.delete(bookmark);
   };
 
@@ -141,31 +150,34 @@ const RecipeLibrary = (props, context) => {
     <Section
       fill
       scrollable
-      title={bookmarkMode ? "Bookmarked recipes" : "Possible recipes"}
-      buttons={(
+      title={bookmarkMode ? 'Bookmarked recipes' : 'Possible recipes'}
+      buttons={
         <>
-          Beaker: {linkedBeaker+"  "}
+          Beaker: {linkedBeaker + '  '}
           <Button
             content="Filter by reagents in beaker"
             icon="search"
             disabled={bookmarkMode}
-            color={reagentFilter ? "green" : "red"}
+            color={reagentFilter ? 'green' : 'red'}
             onClick={() => {
               setReagentFilter(!reagentFilter);
               setPage(1);
-            }} />
+            }}
+          />
           <Button
             content="Bookmarks"
             icon="book"
-            color={bookmarkMode ? "green" : "red"}
+            color={bookmarkMode ? 'green' : 'red'}
             onClick={() => {
               setBookmarkMode(!bookmarkMode);
               setPage(1);
-            }} />
+            }}
+          />
           <Button
             icon="minus"
             disabled={page === 1}
-            onClick={() => setPage(Math.max(page - 1, 1))} />
+            onClick={() => setPage(Math.max(page - 1, 1))}
+          />
           <NumberInput
             width="25px"
             step={1}
@@ -173,13 +185,16 @@ const RecipeLibrary = (props, context) => {
             value={page}
             minValue={1}
             maxValue={pageIndexMax}
-            onDrag={(e, value) => setPage(value)} />
+            onDrag={(e, value) => setPage(value)}
+          />
           <Button
             icon="plus"
             disabled={page === pageIndexMax}
-            onClick={() => setPage(Math.min(page + 1, pageIndexMax))} />
+            onClick={() => setPage(Math.min(page + 1, pageIndexMax))}
+          />
         </>
-      )}>
+      }
+    >
       <Table>
         <Table.Row>
           <Table.Cell bold color="label">
@@ -192,39 +207,43 @@ const RecipeLibrary = (props, context) => {
             Tags
           </Table.Cell>
           <Table.Cell bold color="label" width="20px">
-            {!bookmarkMode ? "Save" : "Del"}
+            {!bookmarkMode ? 'Save' : 'Del'}
           </Table.Cell>
         </Table.Row>
-        {visibleReactions.slice(startIndex, endIndex).map(reaction => (
-          <Table.Row
-            key={reaction.id}
-            className="candystripe">
+        {visibleReactions.slice(startIndex, endIndex).map((reaction) => (
+          <Table.Row key={reaction.id} className="candystripe">
             <Table.Cell bold color="label">
               <Button
                 mt={0.5}
                 icon="flask"
                 color="purple"
                 content={reaction.name}
-                onClick={() => act('recipe_click', {
-                  id: reaction.id,
-                })} />
+                onClick={() =>
+                  act('recipe_click', {
+                    id: reaction.id,
+                  })
+                }
+              />
             </Table.Cell>
             <Table.Cell>
-              {reaction.reactants.map(reactant => (
+              {reaction.reactants.map((reactant) => (
                 <Button
                   key={reactant.id}
                   mt={0.1}
                   icon="vial"
                   textColor="white"
-                  color={currentReagents?.includes(reactant.id) && "green"} // check here
+                  color={currentReagents?.includes(reactant.id) && 'green'} // check here
                   content={reactant.name}
-                  onClick={() => act('reagent_click', {
-                    id: reactant.id,
-                  })} />
+                  onClick={() =>
+                    act('reagent_click', {
+                      id: reactant.id,
+                    })
+                  }
+                />
               ))}
             </Table.Cell>
             <Table.Cell width="20px">
-              {!bookmarkMode && (
+              {(!bookmarkMode && (
                 <Button
                   icon="book"
                   color="green"
@@ -232,12 +251,14 @@ const RecipeLibrary = (props, context) => {
                   onClick={() => {
                     addBookmark(reaction);
                     act('update_ui');
-                  }} />
-              ) || (
+                  }}
+                />
+              )) || (
                 <Button
                   icon="trash"
                   color="red"
-                  onClick={() => removeBookmark(reaction)} />
+                  onClick={() => removeBookmark(reaction)}
+                />
               )}
             </Table.Cell>
           </Table.Row>
diff --git a/tgui/packages/tgui/interfaces/ReligiousTool.js b/tgui/packages/tgui/interfaces/ReligiousTool.js
index 48c7d6832dd5..e49a68c08868 100644
--- a/tgui/packages/tgui/interfaces/ReligiousTool.js
+++ b/tgui/packages/tgui/interfaces/ReligiousTool.js
@@ -1,55 +1,50 @@
 import { useBackend, useSharedState } from '../backend';
-import { BlockQuote, Box, Button, Collapsible, Dimmer, Icon, Section, Stack, Tabs } from '../components';
+import {
+  BlockQuote,
+  Box,
+  Button,
+  Collapsible,
+  Dimmer,
+  Icon,
+  Section,
+  Stack,
+  Tabs,
+} from '../components';
 import { Window } from '../layouts';
 
 const ALIGNMENT2COLOR = {
-  "good": "yellow",
-  "neutral": "white",
-  "evil": "red",
+  good: 'yellow',
+  neutral: 'white',
+  evil: 'red',
 };
 
 export const ReligiousTool = (props, context) => {
   const { act, data } = useBackend(context);
   const [tab, setTab] = useSharedState(context, 'tab', 1);
-  const {
-    sects,
-    alignment,
-    toolname,
-  } = data;
+  const { sects, alignment, toolname } = data;
   return (
-    <Window
-      title={toolname}
-      width={560}
-      height={500}>
+    <Window title={toolname} width={560} height={500}>
       <Window.Content scrollable>
         <Stack vertical fill>
           <Stack.Item>
             <Tabs textAlign="center" fluid>
-              <Tabs.Tab
-                selected={tab === 1}
-                onClick={() => setTab(1)}>
-                Sect <Icon name="place-of-worship" color={ALIGNMENT2COLOR[alignment]} />
+              <Tabs.Tab selected={tab === 1} onClick={() => setTab(1)}>
+                Sect{' '}
+                <Icon
+                  name="place-of-worship"
+                  color={ALIGNMENT2COLOR[alignment]}
+                />
               </Tabs.Tab>
               {!sects && (
-                <Tabs.Tab
-                  selected={tab === 2}
-                  onClick={() => setTab(2)}>
+                <Tabs.Tab selected={tab === 2} onClick={() => setTab(2)}>
                   Rites <Icon name="pray" color={ALIGNMENT2COLOR[alignment]} />
                 </Tabs.Tab>
               )}
             </Tabs>
           </Stack.Item>
           <Stack.Item grow={1}>
-            {tab === 1 && (
-              !!sects && (
-                <SectSelectTab />
-              ) || (
-                <SectTab />
-              )
-            )}
-            {tab === 2 && (
-              <RiteTab />
-            )}
+            {tab === 1 && ((!!sects && <SectSelectTab />) || <SectTab />)}
+            {tab === 2 && <RiteTab />}
           </Stack.Item>
         </Stack>
       </Window.Content>
@@ -75,27 +70,22 @@ const SectTab = (props, context) => {
       <Stack fill vertical fontSize="15px" textAlign="center">
         <Stack.Item mt={2} fontSize="32px">
           <Icon name={icon} color={ALIGNMENT2COLOR[alignment]} />
-          {" " + name + " "}
+          {' ' + name + ' '}
           <Icon name={icon} color={ALIGNMENT2COLOR[alignment]} />
         </Stack.Item>
         <Stack.Item grow mb={2} color="grey">
-          {"\""+quote+"\""}
+          {'"' + quote + '"'}
         </Stack.Item>
-        <Stack.Item color={favor === 0 ? "white" : "green"}>
+        <Stack.Item color={favor === 0 ? 'white' : 'green'}>
           {favordesc}
         </Stack.Item>
         <Stack.Item mb={2} textAlign="left">
-          <BlockQuote>
-            {desc}
-          </BlockQuote>
+          <BlockQuote>{desc}</BlockQuote>
         </Stack.Item>
         <Stack.Item>
           <Section mx={3} mt={-1} title="Wanted Sacrifices">
-            {!wanted && (
-              deity + " doesn't want any sacrifices."
-            ) || (
-              deity + " wishes for " + wanted + "."
-            )}
+            {(!wanted && deity + " doesn't want any sacrifices.") ||
+              deity + ' wishes for ' + wanted + '.'}
           </Section>
         </Stack.Item>
       </Stack>
@@ -105,41 +95,41 @@ const SectTab = (props, context) => {
 
 const SectSelectTab = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    sects,
-  } = data;
+  const { sects } = data;
   return (
     <Section fill title="Sect Select" scrollable>
       <Stack vertical>
-        {sects.map(sect => (
+        {sects.map((sect) => (
           <>
             <Collapsible
-              title={(
+              title={
                 <Stack mt={-3.3} ml={3}>
                   <Stack.Item>
                     <Icon
                       name={sect.icon}
-                      color={ALIGNMENT2COLOR[sect.alignment]} />
-                  </Stack.Item>
-                  <Stack.Item grow>
-                    {sect.name}
-                  </Stack.Item>
-                  <Stack.Item italic >
-                    {"\""+sect.quote+"\""}
+                      color={ALIGNMENT2COLOR[sect.alignment]}
+                    />
                   </Stack.Item>
+                  <Stack.Item grow>{sect.name}</Stack.Item>
+                  <Stack.Item italic>{'"' + sect.quote + '"'}</Stack.Item>
                 </Stack>
-              )}
-              color="transparent">
-              <Stack.Item key={sect} >
-                {sect.desc}<br />
+              }
+              color="transparent"
+            >
+              <Stack.Item key={sect}>
+                {sect.desc}
+                <br />
                 <Button
                   mt={0.25}
                   textAlign="center"
                   icon="plus"
                   fluid
-                  onClick={() => act('sect_select', {
-                    path: sect.path,
-                  })} >
+                  onClick={() =>
+                    act('sect_select', {
+                      path: sect.path,
+                    })
+                  }
+                >
                   Select {sect.name}
                 </Button>
               </Stack.Item>
@@ -154,17 +144,11 @@ const SectSelectTab = (props, context) => {
 
 const RiteTab = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    rites,
-    deity,
-    icon,
-    alignment,
-    favor,
-  } = data;
+  const { rites, deity, icon, alignment, favor } = data;
   return (
     <>
       {!rites.length && (
-        <Section fill >
+        <Section fill>
           <Dimmer>
             <Stack vertical>
               <Stack.Item textAlign="center">
@@ -182,31 +166,32 @@ const RiteTab = (props, context) => {
         </Section>
       )}
       <Stack vertical>
-        {rites.map(rite => (
+        {rites.map((rite) => (
           <Stack.Item key={rite}>
             <Section
               title={rite.name}
-              buttons={(
+              buttons={
                 <Button
                   fontColor="white"
                   iconColor={ALIGNMENT2COLOR[alignment]}
                   disabled={favor < rite.favor}
                   color="transparent"
                   icon="arrow-right"
-                  onClick={() => act('perform_rite', {
-                    path: rite.path,
-                  })} >
+                  onClick={() =>
+                    act('perform_rite', {
+                      path: rite.path,
+                    })
+                  }
+                >
                   Invoke
                 </Button>
-              )} >
-              <Box
-                color={favor < rite.favor ? "red" : "grey"}
-                mb={0.5}>
-                <Icon name="star" color={ALIGNMENT2COLOR[alignment]} /> Costs {rite.favor} favor.
+              }
+            >
+              <Box color={favor < rite.favor ? 'red' : 'grey'} mb={0.5}>
+                <Icon name="star" color={ALIGNMENT2COLOR[alignment]} /> Costs{' '}
+                {rite.favor} favor.
               </Box>
-              <BlockQuote>
-                {rite.desc}
-              </BlockQuote>
+              <BlockQuote>{rite.desc}</BlockQuote>
             </Section>
           </Stack.Item>
         ))}
diff --git a/tgui/packages/tgui/interfaces/RemoteRobotControl.js b/tgui/packages/tgui/interfaces/RemoteRobotControl.js
index 75be82c8e33f..5a71a2ae46d4 100644
--- a/tgui/packages/tgui/interfaces/RemoteRobotControl.js
+++ b/tgui/packages/tgui/interfaces/RemoteRobotControl.js
@@ -5,10 +5,7 @@ import { Window } from '../layouts';
 
 export const RemoteRobotControl = (props, context) => {
   return (
-    <Window
-      title="Remote Robot Control"
-      width={500}
-      height={500}>
+    <Window title="Remote Robot Control" width={500} height={500}>
       <Window.Content scrollable>
         <RemoteRobotControlContent />
       </Window.Content>
@@ -18,58 +15,64 @@ export const RemoteRobotControl = (props, context) => {
 
 export const RemoteRobotControlContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    robots = [],
-  } = data;
+  const { robots = [] } = data;
   if (!robots.length) {
     return (
       <Section>
-        <NoticeBox textAlign="center">
-          No robots detected
-        </NoticeBox>
+        <NoticeBox textAlign="center">No robots detected</NoticeBox>
       </Section>
     );
   }
-  return robots.map(robot => {
+  return robots.map((robot) => {
     return (
       <Section
         key={robot.ref}
-        title={robot.name + " (" + robot.model + ")"}
-        buttons={(
+        title={robot.name + ' (' + robot.model + ')'}
+        buttons={
           <>
             <Button
               icon="tools"
               content="Interface"
-              onClick={() => act('interface', {
-                ref: robot.ref,
-              })} />
+              onClick={() =>
+                act('interface', {
+                  ref: robot.ref,
+                })
+              }
+            />
             <Button
               icon="phone-alt"
               content="Call"
-              onClick={() => act('callbot', {
-                ref: robot.ref,
-              })} />
+              onClick={() =>
+                act('callbot', {
+                  ref: robot.ref,
+                })
+              }
+            />
           </>
-        )}>
+        }
+      >
         <LabeledList>
           <LabeledList.Item label="Status">
-            <Box inline color={decodeHtmlEntities(robot.mode) === "Inactive"
-              ? 'bad'
-              : decodeHtmlEntities(robot.mode) === "Idle"
-                ? 'average'
-                : 'good'}>
+            <Box
+              inline
+              color={
+                decodeHtmlEntities(robot.mode) === 'Inactive'
+                  ? 'bad'
+                  : decodeHtmlEntities(robot.mode) === 'Idle'
+                    ? 'average'
+                    : 'good'
+              }
+            >
               {decodeHtmlEntities(robot.mode)}
-            </Box>
-            {' '}
-            {robot.hacked && (
+            </Box>{' '}
+            {(robot.hacked && (
               <Box inline color="bad">
                 (HACKED)
               </Box>
-            ) || "" }
-          </LabeledList.Item>
-          <LabeledList.Item label="Location">
-            {robot.location}
+            )) ||
+              ''}
           </LabeledList.Item>
+          <LabeledList.Item label="Location">{robot.location}</LabeledList.Item>
         </LabeledList>
       </Section>
     );
diff --git a/tgui/packages/tgui/interfaces/RequestManager.js b/tgui/packages/tgui/interfaces/RequestManager.js
index f66ec5ac19b6..3dbe01f563cb 100644
--- a/tgui/packages/tgui/interfaces/RequestManager.js
+++ b/tgui/packages/tgui/interfaces/RequestManager.js
@@ -17,14 +17,14 @@ export const RequestManager = (props, context) => {
     context,
     'filteredTypes',
     Object.fromEntries(
-      Object.entries(displayTypeMap).map(([type, _]) => [type, true])
-    )
+      Object.entries(displayTypeMap).map(([type, _]) => [type, true]),
+    ),
   );
   const [searchText, setSearchText] = useLocalState(context, 'searchText');
 
   // Handle filtering
   let displayedRequests = requests.filter(
-    (request) => filteredTypes[request.req_type]
+    (request) => filteredTypes[request.req_type],
   );
   if (searchText) {
     const filterText = searchText.toLowerCase();
@@ -32,8 +32,8 @@ export const RequestManager = (props, context) => {
       (request) =>
         decodeHtmlEntities(request.message)
           .toLowerCase()
-          .includes(filterText)
-        || request.owner_name.toLowerCase().includes(filterText)
+          .includes(filterText) ||
+        request.owner_name.toLowerCase().includes(filterText),
     );
   }
 
@@ -52,7 +52,8 @@ export const RequestManager = (props, context) => {
               />
               <FilterPanel />
             </>
-          }>
+          }
+        >
           {displayedRequests.map((request) => (
             <div className="RequestManager__row" key={request.id}>
               <div className="RequestManager__rowContents">
@@ -80,10 +81,10 @@ export const RequestManager = (props, context) => {
 };
 
 const displayTypeMap = {
-  'request_prayer': 'PRAYER',
-  'request_centcom': 'CENTCOM',
-  'request_syndicate': 'SYNDICATE',
-  'request_nuke': 'NUKE CODE',
+  request_prayer: 'PRAYER',
+  request_centcom: 'CENTCOM',
+  request_syndicate: 'SYNDICATE',
+  request_nuke: 'NUKE CODE',
 };
 
 const RequestType = (props) => {
@@ -125,14 +126,14 @@ const FilterPanel = (_, context) => {
   const [filterVisible, setFilterVisible] = useLocalState(
     context,
     'filterVisible',
-    false
+    false,
   );
   const [filteredTypes, setFilteredTypes] = useLocalState(
     context,
     'filteredTypes',
     Object.fromEntries(
-      Object.entries(displayTypeMap).map(([type, _]) => [type, true])
-    )
+      Object.entries(displayTypeMap).map(([type, _]) => [type, true]),
+    ),
   );
 
   return (
@@ -145,7 +146,8 @@ const FilterPanel = (_, context) => {
           className="RequestManager__filterPanel"
           style={{
             display: filterVisible ? 'block' : 'none',
-          }}>
+          }}
+        >
           <Table width="0">
             {Object.keys(displayTypeMap).map((type) => {
               return (
@@ -168,7 +170,8 @@ const FilterPanel = (_, context) => {
             })}
           </Table>
         </div>
-      }>
+      }
+    >
       <Button icon="cog" onClick={() => setFilterVisible(!filterVisible)}>
         Type Filter
       </Button>
diff --git a/tgui/packages/tgui/interfaces/RoboticsControlConsole.js b/tgui/packages/tgui/interfaces/RoboticsControlConsole.js
index 1faed10f5169..77930abc3d9b 100644
--- a/tgui/packages/tgui/interfaces/RoboticsControlConsole.js
+++ b/tgui/packages/tgui/interfaces/RoboticsControlConsole.js
@@ -1,34 +1,36 @@
 import { useBackend, useSharedState } from '../backend';
-import { Box, Button, LabeledList, NoticeBox, Section, Tabs } from '../components';
+import {
+  Box,
+  Button,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Tabs,
+} from '../components';
 import { Window } from '../layouts';
 
 export const RoboticsControlConsole = (props, context) => {
   const { act, data } = useBackend(context);
   const [tab, setTab] = useSharedState(context, 'tab', 1);
-  const {
-    can_hack,
-    can_detonate,
-    cyborgs = [],
-    drones = [],
-  } = data;
+  const { can_hack, can_detonate, cyborgs = [], drones = [] } = data;
   return (
-    <Window
-      width={500}
-      height={460}>
+    <Window width={500} height={460}>
       <Window.Content scrollable>
         <Tabs>
           <Tabs.Tab
             icon="list"
             lineHeight="23px"
             selected={tab === 1}
-            onClick={() => setTab(1)}>
+            onClick={() => setTab(1)}
+          >
             Cyborgs ({cyborgs.length})
           </Tabs.Tab>
           <Tabs.Tab
             icon="list"
             lineHeight="23px"
             selected={tab === 2}
-            onClick={() => setTab(2)}>
+            onClick={() => setTab(2)}
+          >
             Drones ({drones.length})
           </Tabs.Tab>
         </Tabs>
@@ -36,11 +38,10 @@ export const RoboticsControlConsole = (props, context) => {
           <Cyborgs
             cyborgs={cyborgs}
             can_hack={can_hack}
-            can_detonate={can_detonate} />
-        )}
-        {tab === 2 && (
-          <Drones drones={drones} />
+            can_detonate={can_detonate}
+          />
         )}
+        {tab === 2 && <Drones drones={drones} />}
       </Window.Content>
     </Window>
   );
@@ -51,76 +52,86 @@ const Cyborgs = (props, context) => {
   const { act, data } = useBackend(context);
   if (!cyborgs.length) {
     return (
-      <NoticeBox>
-        No cyborg units detected within access parameters
-      </NoticeBox>
+      <NoticeBox>No cyborg units detected within access parameters</NoticeBox>
     );
   }
-  return cyborgs.map(cyborg => {
+  return cyborgs.map((cyborg) => {
     return (
       <Section
         key={cyborg.ref}
         title={cyborg.name}
-        buttons={(
+        buttons={
           <>
             {!!can_hack && !cyborg.emagged && (
               <Button
                 icon="terminal"
                 content="Hack"
                 color="bad"
-                onClick={() => act('magbot', {
-                  ref: cyborg.ref,
-                })} />
+                onClick={() =>
+                  act('magbot', {
+                    ref: cyborg.ref,
+                  })
+                }
+              />
             )}
             <Button.Confirm
               icon={cyborg.locked_down ? 'unlock' : 'lock'}
               color={cyborg.locked_down ? 'good' : 'default'}
-              content={cyborg.locked_down ? "Release" : "Lockdown"}
-              onClick={() => act('stopbot', {
-                ref: cyborg.ref,
-              })} />
+              content={cyborg.locked_down ? 'Release' : 'Lockdown'}
+              onClick={() =>
+                act('stopbot', {
+                  ref: cyborg.ref,
+                })
+              }
+            />
             {!!can_detonate && (
               <Button.Confirm
                 icon="bomb"
                 content="Detonate"
                 color="bad"
-                onClick={() => act('killbot', {
-                  ref: cyborg.ref,
-                })} />
+                onClick={() =>
+                  act('killbot', {
+                    ref: cyborg.ref,
+                  })
+                }
+              />
             )}
           </>
-        )}>
+        }
+      >
         <LabeledList>
           <LabeledList.Item label="Status">
-            <Box color={cyborg.status
-              ? 'bad'
-              : cyborg.locked_down
-                ? 'average'
-                : 'good'}>
+            <Box
+              color={
+                cyborg.status ? 'bad' : cyborg.locked_down ? 'average' : 'good'
+              }
+            >
               {cyborg.status
-                ? "Not Responding"
+                ? 'Not Responding'
                 : cyborg.locked_down
-                  ? "Locked Down"
-                  : "Nominal"}
+                  ? 'Locked Down'
+                  : 'Nominal'}
             </Box>
           </LabeledList.Item>
           <LabeledList.Item label="Charge">
-            <Box color={cyborg.charge <= 30
-              ? 'bad'
-              : cyborg.charge <= 70
-                ? 'average'
-                : 'good'}>
+            <Box
+              color={
+                cyborg.charge <= 30
+                  ? 'bad'
+                  : cyborg.charge <= 70
+                    ? 'average'
+                    : 'good'
+              }
+            >
               {typeof cyborg.charge === 'number'
-                ? cyborg.charge + "%"
-                : "Not Found"}
+                ? cyborg.charge + '%'
+                : 'Not Found'}
             </Box>
           </LabeledList.Item>
-          <LabeledList.Item label="Model">
-            {cyborg.module}
-          </LabeledList.Item>
+          <LabeledList.Item label="Model">{cyborg.module}</LabeledList.Item>
           <LabeledList.Item label="Master AI">
             <Box color={cyborg.synchronization ? 'default' : 'average'}>
-              {cyborg.synchronization || "None"}
+              {cyborg.synchronization || 'None'}
             </Box>
           </LabeledList.Item>
         </LabeledList>
@@ -135,34 +146,32 @@ const Drones = (props, context) => {
 
   if (!drones.length) {
     return (
-      <NoticeBox>
-        No drone units detected within access parameters
-      </NoticeBox>
+      <NoticeBox>No drone units detected within access parameters</NoticeBox>
     );
   }
 
-  return drones.map(drone => {
+  return drones.map((drone) => {
     return (
       <Section
         key={drone.ref}
         title={drone.name}
-        buttons={(
+        buttons={
           <Button.Confirm
             icon="bomb"
             content="Detonate"
             color="bad"
-            onClick={() => act('killdrone', {
-              ref: drone.ref,
-            })} />
-        )}>
+            onClick={() =>
+              act('killdrone', {
+                ref: drone.ref,
+              })
+            }
+          />
+        }
+      >
         <LabeledList>
           <LabeledList.Item label="Status">
-            <Box color={drone.status
-              ? 'bad'
-              : 'good'}>
-              {drone.status
-                ? "Not Responding"
-                : 'Nominal'}
+            <Box color={drone.status ? 'bad' : 'good'}>
+              {drone.status ? 'Not Responding' : 'Nominal'}
             </Box>
           </LabeledList.Item>
         </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/Roulette.js b/tgui/packages/tgui/interfaces/Roulette.js
index 3a60b48c708b..c00966f9dc12 100644
--- a/tgui/packages/tgui/interfaces/Roulette.js
+++ b/tgui/packages/tgui/interfaces/Roulette.js
@@ -3,11 +3,9 @@ import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Grid, NumberInput, Table } from '../components';
 import { Window } from '../layouts';
 
-const getNumberColor = number => {
-  const inRedOddRange = (
-    (number >= 1 && number <= 10)
-    || (number >= 19 && number <= 28)
-  );
+const getNumberColor = (number) => {
+  const inRedOddRange =
+    (number >= 1 && number <= 10) || (number >= 19 && number <= 28);
 
   if (number % 2 === 1) {
     return inRedOddRange ? 'red' : 'black';
@@ -20,8 +18,8 @@ export const RouletteNumberCell = (props, context) => {
     buttonClass = null,
     cellClass = null,
     color,
-    colspan = "1",
-    rowspan = "1",
+    colspan = '1',
+    rowspan = '1',
     text,
     value,
   } = props;
@@ -30,18 +28,16 @@ export const RouletteNumberCell = (props, context) => {
   return (
     <Table.Cell
       className={classes([
-        "Roulette__board-cell",
-        "Roulette__board-cell-number",
+        'Roulette__board-cell',
+        'Roulette__board-cell-number',
         cellClass,
       ])}
       colspan={colspan}
-      rowspan={rowspan}>
+      rowspan={rowspan}
+    >
       <Button
         color={color}
-        className={classes([
-          "Roulette__board-button",
-          buttonClass,
-        ])}
+        className={classes(['Roulette__board-button', buttonClass])}
         onClick={() => act('ChangeBetType', { type: value })}
       >
         <span className="Roulette__board-button-text">{text}</span>
@@ -55,17 +51,17 @@ export const RouletteBoard = () => {
   const secondRow = [2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32, 35];
   const thirdRow = [1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34];
   const fourthRow = {
-    "s1-12": "1st 12",
-    "s13-24": "2nd 12",
-    "s25-36": "3rd 12",
+    's1-12': '1st 12',
+    's13-24': '2nd 12',
+    's25-36': '3rd 12',
   };
   const fifthRow = [
-    { color: "transparent", text: "1-18", value: "s1-18" },
-    { color: "transparent", text: "Even", value: "even" },
-    { color: "black", text: "Black", value: "black" },
-    { color: "red", text: "Red", value: "red" },
-    { color: "transparent", text: "Odd", value: "odd" },
-    { color: "transparent", text: "19-36", value: "s19-36" },
+    { color: 'transparent', text: '1-18', value: 's1-18' },
+    { color: 'transparent', text: 'Even', value: 'even' },
+    { color: 'black', text: 'Black', value: 'black' },
+    { color: 'red', text: 'Red', value: 'red' },
+    { color: 'transparent', text: 'Odd', value: 'odd' },
+    { color: 'transparent', text: '19-36', value: 's19-36' },
   ];
 
   return (
@@ -79,7 +75,7 @@ export const RouletteBoard = () => {
             text="0"
             value="0"
           />
-          {firstRow.map(number => (
+          {firstRow.map((number) => (
             <RouletteNumberCell
               color={getNumberColor(number)}
               key={number}
@@ -94,7 +90,7 @@ export const RouletteBoard = () => {
           />
         </Table.Row>
         <Table.Row>
-          {secondRow.map(number => (
+          {secondRow.map((number) => (
             <RouletteNumberCell
               color={getNumberColor(number)}
               key={number}
@@ -109,7 +105,7 @@ export const RouletteBoard = () => {
           />
         </Table.Row>
         <Table.Row>
-          {thirdRow.map(number => (
+          {thirdRow.map((number) => (
             <RouletteNumberCell
               color={getNumberColor(number)}
               key={number}
@@ -138,7 +134,7 @@ export const RouletteBoard = () => {
         </Table.Row>
         <Table.Row>
           <Table.Cell />
-          {fifthRow.map(cell => (
+          {fifthRow.map((cell) => (
             <RouletteNumberCell
               cellClass="Roulette__board-cell-number--colspan-2"
               color={cell.color}
@@ -157,14 +153,9 @@ export const RouletteBoard = () => {
 export const RouletteBetTable = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const [
-    customBet,
-    setCustomBet,
-  ] = useLocalState(context, 'customBet', 500);
+  const [customBet, setCustomBet] = useLocalState(context, 'customBet', 500);
 
-  let {
-    BetType,
-  } = data;
+  let { BetType } = data;
 
   if (BetType.startsWith('s')) {
     BetType = BetType.substring(1, BetType.length);
@@ -178,7 +169,8 @@ export const RouletteBetTable = (props, context) => {
             'Roulette',
             'Roulette__lowertable--cell',
             'Roulette__lowertable--header',
-          ])}>
+          ])}
+        >
           Last Spin:
         </Table.Cell>
         <Table.Cell
@@ -186,69 +178,79 @@ export const RouletteBetTable = (props, context) => {
             'Roulette',
             'Roulette__lowertable--cell',
             'Roulette__lowertable--header',
-          ])}>
+          ])}
+        >
           Current Bet:
         </Table.Cell>
       </Table.Row>
       <Table.Row>
-        <Table.Cell className={classes([
-          'Roulette',
-          'Roulette__lowertable--cell',
-          'Roulette__lowertable--spinresult',
-          'Roulette__lowertable--spinresult-' + getNumberColor(data.LastSpin),
-        ])}>
+        <Table.Cell
+          className={classes([
+            'Roulette',
+            'Roulette__lowertable--cell',
+            'Roulette__lowertable--spinresult',
+            'Roulette__lowertable--spinresult-' + getNumberColor(data.LastSpin),
+          ])}
+        >
           {data.LastSpin}
         </Table.Cell>
-        <Table.Cell className={classes([
-          'Roulette',
-          'Roulette__lowertable--cell',
-          'Roulette__lowertable--betscell',
-        ])}>
-          <Box
-            bold
-            mt={1}
-            mb={1}
-            fontSize="20px"
-            textAlign="center">
+        <Table.Cell
+          className={classes([
+            'Roulette',
+            'Roulette__lowertable--cell',
+            'Roulette__lowertable--betscell',
+          ])}
+        >
+          <Box bold mt={1} mb={1} fontSize="20px" textAlign="center">
             {data.BetAmount} cr on {BetType}
           </Box>
           <Box ml={1} mr={1}>
             <Button
               fluid
               content="Bet 10 cr"
-              onClick={() => act('ChangeBetAmount', {
-                amount: 10,
-              })}
+              onClick={() =>
+                act('ChangeBetAmount', {
+                  amount: 10,
+                })
+              }
             />
             <Button
               fluid
               content="Bet 50 cr"
-              onClick={() => act('ChangeBetAmount', {
-                amount: 50,
-              })}
+              onClick={() =>
+                act('ChangeBetAmount', {
+                  amount: 50,
+                })
+              }
             />
             <Button
               fluid
               content="Bet 100 cr"
-              onClick={() => act('ChangeBetAmount', {
-                amount: 100,
-              })}
+              onClick={() =>
+                act('ChangeBetAmount', {
+                  amount: 100,
+                })
+              }
             />
             <Button
               fluid
               content="Bet 500 cr"
-              onClick={() => act('ChangeBetAmount', {
-                amount: 500,
-              })}
+              onClick={() =>
+                act('ChangeBetAmount', {
+                  amount: 500,
+                })
+              }
             />
             <Grid>
               <Grid.Column>
                 <Button
                   fluid
                   content="Bet custom amount..."
-                  onClick={() => act('ChangeBetAmount', {
-                    amount: customBet,
-                  })}
+                  onClick={() =>
+                    act('ChangeBetAmount', {
+                      amount: customBet,
+                    })
+                  }
                 />
               </Grid.Column>
               <Grid.Column size={0.1}>
@@ -268,11 +270,7 @@ export const RouletteBetTable = (props, context) => {
       </Table.Row>
       <Table.Row>
         <Table.Cell colSpan="2">
-          <Box
-            bold
-            m={1}
-            fontSize="14px"
-            textAlign="center">
+          <Box bold m={1} fontSize="14px" textAlign="center">
             Swipe an ID card with a connected account to spin!
           </Box>
         </Table.Cell>
@@ -283,13 +281,13 @@ export const RouletteBetTable = (props, context) => {
             House Balance:
           </Box>
           <Box inline>
-            {data.HouseBalance ? data.HouseBalance + ' cr': "None"}
+            {data.HouseBalance ? data.HouseBalance + ' cr' : 'None'}
           </Box>
         </Table.Cell>
         <Table.Cell className="Roulette__lowertable--cell">
           <Button
             fluid
-            content={data.IsAnchored ? "Bolted" : "Unbolted"}
+            content={data.IsAnchored ? 'Bolted' : 'Unbolted'}
             m={1}
             color="transparent"
             textAlign="center"
@@ -303,10 +301,7 @@ export const RouletteBetTable = (props, context) => {
 
 export const Roulette = (props, context) => {
   return (
-    <Window
-      width={570}
-      height={520}
-      theme="cardtable">
+    <Window width={570} height={520} theme="cardtable">
       <Window.Content>
         <RouletteBoard />
         <RouletteBetTable />
diff --git a/tgui/packages/tgui/interfaces/Safe.js b/tgui/packages/tgui/interfaces/Safe.js
index 76640865baab..44f7a927e3de 100644
--- a/tgui/packages/tgui/interfaces/Safe.js
+++ b/tgui/packages/tgui/interfaces/Safe.js
@@ -2,35 +2,26 @@ import { Fragment } from 'inferno';
 import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
 import { Box, Button, Icon, Section } from '../components';
-import { Window } from "../layouts";
+import { Window } from '../layouts';
 
 export const Safe = (properties, context) => {
   const { act, data } = useBackend(context);
-  const {
-    dial,
-    open,
-  } = data;
+  const { dial, open } = data;
   return (
-    <Window
-      width={625}
-      height={800}
-      theme="ntos">
+    <Window width={625} height={800} theme="ntos">
       <Window.Content>
         <Box className="Safe__engraving">
           <Dialer />
           <Box>
-            <Box
-              className="Safe__engraving-hinge"
-              top="25%" />
-            <Box
-              className="Safe__engraving-hinge"
-              top="75%" />
+            <Box className="Safe__engraving-hinge" top="25%" />
+            <Box className="Safe__engraving-hinge" top="75%" />
           </Box>
           <Icon
             className="Safe__engraving-arrow"
             name="long-arrow-alt-down"
             size="5"
-          /><br />
+          />
+          <br />
           {open ? (
             <Contents />
           ) : (
@@ -39,14 +30,12 @@ export const Safe = (properties, context) => {
               className="Safe__dial"
               src={resolveAsset('safe_dial.png')}
               style={{
-                "transform": "rotate(-" + (3.6 * dial) + "deg)",
+                transform: 'rotate(-' + 3.6 * dial + 'deg)',
               }}
             />
           )}
         </Box>
-        {!open && (
-          <Help />
-        )}
+        {!open && <Help />}
       </Window.Content>
     </Window>
   );
@@ -54,22 +43,19 @@ export const Safe = (properties, context) => {
 
 const Dialer = (properties, context) => {
   const { act, data } = useBackend(context);
-  const {
-    dial,
-    open,
-    locked,
-    broken,
-  } = data;
+  const { dial, open, locked, broken } = data;
   const dialButton = (amount, right) => {
     return (
       <Button
         disabled={open || (right && !locked) || broken}
-        icon={"arrow-" + (right ? "right" : "left")}
-        content={(right ? "Right" : "Left") + " " + amount}
-        iconPosition={right ? "right" : "left"}
-        onClick={() => act(!right ? "turnright" : "turnleft", {
-          num: amount,
-        })}
+        icon={'arrow-' + (right ? 'right' : 'left')}
+        content={(right ? 'Right' : 'Left') + ' ' + amount}
+        iconPosition={right ? 'right' : 'left'}
+        onClick={() =>
+          act(!right ? 'turnright' : 'turnleft', {
+            num: amount,
+          })
+        }
       />
     );
   };
@@ -77,45 +63,41 @@ const Dialer = (properties, context) => {
     <Box className="Safe__dialer">
       <Button
         disabled={locked && !broken}
-        icon={open ? "lock" : "lock-open"}
-        content={open ? "Close" : "Open"}
+        icon={open ? 'lock' : 'lock-open'}
+        content={open ? 'Close' : 'Open'}
         mb="0.5rem"
         onClick={() => act('open')}
-      /><br />
+      />
+      <br />
       <Box position="absolute">
         {[dialButton(50), dialButton(10), dialButton(1)]}
       </Box>
-      <Box
-        className="Safe__dialer-right"
-        position="absolute" right="5px">
+      <Box className="Safe__dialer-right" position="absolute" right="5px">
         {[dialButton(1, true), dialButton(10, true), dialButton(50, true)]}
       </Box>
-      <Box className="Safe__dialer-number">
-        {dial}
-      </Box>
+      <Box className="Safe__dialer-number">{dial}</Box>
     </Box>
   );
 };
 
 const Contents = (properties, context) => {
   const { act, data } = useBackend(context);
-  const {
-    contents,
-  } = data;
+  const { contents } = data;
   return (
-    <Box
-      className="Safe__contents"
-      overflow="auto">
+    <Box className="Safe__contents" overflow="auto">
       {contents.map((item, index) => (
         <Fragment key={item}>
           <Button
             mb="0.5rem"
-            onClick={() => act("retrieve", {
-              index: index + 1,
-            })}>
+            onClick={() =>
+              act('retrieve', {
+                index: index + 1,
+              })
+            }
+          >
             <Box
               as="img"
-              src={item.sprite + ".png"}
+              src={item.sprite + '.png'}
               verticalAlign="middle"
               ml="-6px"
               mr="0.5rem"
@@ -133,12 +115,16 @@ const Help = (properties, context) => {
   return (
     <Section
       className="Safe__help"
-      title="Safe opening instructions (because you all keep forgetting)">
+      title="Safe opening instructions (because you all keep forgetting)"
+    >
       <Box>
-        1. Turn the dial left to the first number.<br />
-        2. Turn the dial right to the second number.<br />
-        3. Continue repeating this process for each number,
-        switching between left and right each time.<br />
+        1. Turn the dial left to the first number.
+        <br />
+        2. Turn the dial right to the second number.
+        <br />
+        3. Continue repeating this process for each number, switching between
+        left and right each time.
+        <br />
         4. Open the safe.
       </Box>
       <Box bold>
diff --git a/tgui/packages/tgui/interfaces/SatelliteControl.js b/tgui/packages/tgui/interfaces/SatelliteControl.js
index ccc24ae7cb96..084570787b35 100644
--- a/tgui/packages/tgui/interfaces/SatelliteControl.js
+++ b/tgui/packages/tgui/interfaces/SatelliteControl.js
@@ -6,38 +6,44 @@ export const SatelliteControl = (props, context) => {
   const { act, data } = useBackend(context);
   const satellites = data.satellites || [];
   return (
-    <Window
-      width={400}
-      height={305}>
+    <Window width={400} height={305}>
       <Window.Content>
         {data.meteor_shield && (
           <Section>
             <LabeledList>
               <LabeledList.Item label="Coverage">
                 <ProgressBar
-                  value={data.meteor_shield_coverage
-                    / data.meteor_shield_coverage_max}
-                  content={100 * data.meteor_shield_coverage
-                    / data.meteor_shield_coverage_max + '%'}
+                  value={
+                    data.meteor_shield_coverage /
+                    data.meteor_shield_coverage_max
+                  }
+                  content={
+                    (100 * data.meteor_shield_coverage) /
+                      data.meteor_shield_coverage_max +
+                    '%'
+                  }
                   ranges={{
                     good: [1, Infinity],
-                    average: [0.30, 1],
-                    bad: [-Infinity, 0.30],
-                  }} />
+                    average: [0.3, 1],
+                    bad: [-Infinity, 0.3],
+                  }}
+                />
               </LabeledList.Item>
             </LabeledList>
           </Section>
         )}
         <Section title="Satellite Controls">
           <Box mr={-1}>
-            {satellites.map(satellite => (
+            {satellites.map((satellite) => (
               <Button.Checkbox
                 key={satellite.id}
                 checked={satellite.active}
-                content={"#" + satellite.id + " " + satellite.mode}
-                onClick={() => act('toggle', {
-                  id: satellite.id,
-                })}
+                content={'#' + satellite.id + ' ' + satellite.mode}
+                onClick={() =>
+                  act('toggle', {
+                    id: satellite.id,
+                  })
+                }
               />
             ))}
           </Box>
diff --git a/tgui/packages/tgui/interfaces/ScannerGate.js b/tgui/packages/tgui/interfaces/ScannerGate.js
index b2c46fa01476..ba9248a9d600 100644
--- a/tgui/packages/tgui/interfaces/ScannerGate.js
+++ b/tgui/packages/tgui/interfaces/ScannerGate.js
@@ -54,7 +54,8 @@ const TARGET_SPECIES_LIST = [
     name: 'Zombie',
     value: 'zombie',
   },
-  { // Why are these hardcoded
+  {
+    // Why are these hardcoded
     name: 'Teshari',
     value: 'teshari',
   },
@@ -74,15 +75,12 @@ const TARGET_NUTRITION_LIST = [
 export const ScannerGate = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={400}
-      height={300}>
+    <Window width={400} height={300}>
       <Window.Content scrollable>
         <InterfaceLockNoticeBox
-          onLockedStatusChange={() => act('toggle_lock')} />
-        {!data.locked && (
-          <ScannerGateControl />
-        )}
+          onLockedStatusChange={() => act('toggle_lock')}
+        />
+        {!data.locked && <ScannerGateControl />}
       </Window.Content>
     </Window>
   );
@@ -122,18 +120,21 @@ const SCANNER_GATE_ROUTES = {
 const ScannerGateControl = (props, context) => {
   const { act, data } = useBackend(context);
   const { scan_mode } = data;
-  const route = SCANNER_GATE_ROUTES[scan_mode]
-    || SCANNER_GATE_ROUTES.off;
+  const route = SCANNER_GATE_ROUTES[scan_mode] || SCANNER_GATE_ROUTES.off;
   const Component = route.component();
   return (
     <Section
       title={route.title}
-      buttons={scan_mode !== 'Off' && (
-        <Button
-          icon="arrow-left"
-          content="back"
-          onClick={() => act('set_mode', { new_mode: 'Off' })} />
-      )}>
+      buttons={
+        scan_mode !== 'Off' && (
+          <Button
+            icon="arrow-left"
+            content="back"
+            onClick={() => act('set_mode', { new_mode: 'Off' })}
+          />
+        )
+      }
+    >
       <Component />
     </Section>
   );
@@ -143,28 +144,32 @@ const ScannerGateOff = (props, context) => {
   const { act } = useBackend(context);
   return (
     <>
-      <Box mb={2}>
-        Select a scanning mode below.
-      </Box>
+      <Box mb={2}>Select a scanning mode below.</Box>
       <Box>
         <Button
           content="Wanted"
-          onClick={() => act('set_mode', { new_mode: 'Wanted' })} />
+          onClick={() => act('set_mode', { new_mode: 'Wanted' })}
+        />
         <Button
           content="Guns"
-          onClick={() => act('set_mode', { new_mode: 'Guns' })} />
+          onClick={() => act('set_mode', { new_mode: 'Guns' })}
+        />
         <Button
           content="Mindshield"
-          onClick={() => act('set_mode', { new_mode: 'Mindshield' })} />
+          onClick={() => act('set_mode', { new_mode: 'Mindshield' })}
+        />
         <Button
           content="Disease"
-          onClick={() => act('set_mode', { new_mode: 'Disease' })} />
+          onClick={() => act('set_mode', { new_mode: 'Disease' })}
+        />
         <Button
           content="Species"
-          onClick={() => act('set_mode', { new_mode: 'Species' })} />
+          onClick={() => act('set_mode', { new_mode: 'Species' })}
+        />
         <Button
           content="Nutrition"
-          onClick={() => act('set_mode', { new_mode: 'Nutrition' })} />
+          onClick={() => act('set_mode', { new_mode: 'Nutrition' })}
+        />
       </Box>
     </>
   );
@@ -176,8 +181,8 @@ const ScannerGateWanted = (props, context) => {
   return (
     <>
       <Box mb={2}>
-        Trigger if the person scanned {reverse ? 'does not have' : 'has'}
-        {' '}any warrants for their arrest.
+        Trigger if the person scanned {reverse ? 'does not have' : 'has'} any
+        warrants for their arrest.
       </Box>
       <ScannerGateMode />
     </>
@@ -190,8 +195,8 @@ const ScannerGateGuns = (props, context) => {
   return (
     <>
       <Box mb={2}>
-        Trigger if the person scanned {reverse ? 'does not have' : 'has'}
-        {' '}any guns.
+        Trigger if the person scanned {reverse ? 'does not have' : 'has'} any
+        guns.
       </Box>
       <ScannerGateMode />
     </>
@@ -204,8 +209,8 @@ const ScannerGateMindshield = (props, context) => {
   return (
     <>
       <Box mb={2}>
-        Trigger if the person scanned {reverse ? 'does not have' : 'has'}
-        {' '}a mindshield.
+        Trigger if the person scanned {reverse ? 'does not have' : 'has'} a
+        mindshield.
       </Box>
       <ScannerGateMode />
     </>
@@ -218,18 +223,21 @@ const ScannerGateDisease = (props, context) => {
   return (
     <>
       <Box mb={2}>
-        Trigger if the person scanned {reverse ? 'does not have' : 'has'}
-        {' '}a disease equal or worse than {disease_threshold}.
+        Trigger if the person scanned {reverse ? 'does not have' : 'has'} a
+        disease equal or worse than {disease_threshold}.
       </Box>
       <Box mb={2}>
-        {DISEASE_THEASHOLD_LIST.map(threshold => (
+        {DISEASE_THEASHOLD_LIST.map((threshold) => (
           <Button.Checkbox
             key={threshold}
             checked={threshold === disease_threshold}
             content={threshold}
-            onClick={() => act('set_disease_threshold', {
-              new_threshold: threshold,
-            })} />
+            onClick={() =>
+              act('set_disease_threshold', {
+                new_threshold: threshold,
+              })
+            }
+          />
         ))}
       </Box>
       <ScannerGateMode />
@@ -240,27 +248,29 @@ const ScannerGateDisease = (props, context) => {
 const ScannerGateSpecies = (props, context) => {
   const { act, data } = useBackend(context);
   const { reverse, target_species } = data;
-  const species = TARGET_SPECIES_LIST.find(species => {
+  const species = TARGET_SPECIES_LIST.find((species) => {
     return species.value === target_species;
   });
   return (
     <>
       <Box mb={2}>
-        Trigger if the person scanned is {reverse ? 'not' : ''}
-        {' '}of the {species.name} species.
-        {target_species === 'zombie' && (
-          ' All zombie types will be detected, including dormant zombies.'
-        )}
+        Trigger if the person scanned is {reverse ? 'not' : ''} of the{' '}
+        {species.name} species.
+        {target_species === 'zombie' &&
+          ' All zombie types will be detected, including dormant zombies.'}
       </Box>
       <Box mb={2}>
-        {TARGET_SPECIES_LIST.map(species => (
+        {TARGET_SPECIES_LIST.map((species) => (
           <Button.Checkbox
             key={species.value}
             checked={species.value === target_species}
             content={species.name}
-            onClick={() => act('set_target_species', {
-              new_species: species.value,
-            })} />
+            onClick={() =>
+              act('set_target_species', {
+                new_species: species.value,
+              })
+            }
+          />
         ))}
       </Box>
       <ScannerGateMode />
@@ -271,24 +281,27 @@ const ScannerGateSpecies = (props, context) => {
 const ScannerGateNutrition = (props, context) => {
   const { act, data } = useBackend(context);
   const { reverse, target_nutrition } = data;
-  const nutrition = TARGET_NUTRITION_LIST.find(nutrition => {
+  const nutrition = TARGET_NUTRITION_LIST.find((nutrition) => {
     return nutrition.value === target_nutrition;
   });
   return (
     <>
       <Box mb={2}>
-        Trigger if the person scanned {reverse ? 'does not have' : 'has'}
-        {' '}the {nutrition.name} nutrition level.
+        Trigger if the person scanned {reverse ? 'does not have' : 'has'} the{' '}
+        {nutrition.name} nutrition level.
       </Box>
       <Box mb={2}>
-        {TARGET_NUTRITION_LIST.map(nutrition => (
+        {TARGET_NUTRITION_LIST.map((nutrition) => (
           <Button.Checkbox
             key={nutrition.name}
             checked={nutrition.value === target_nutrition}
             content={nutrition.name}
-            onClick={() => act('set_target_nutrition', {
-              new_nutrition: nutrition.name,
-            })} />
+            onClick={() =>
+              act('set_target_nutrition', {
+                new_nutrition: nutrition.name,
+              })
+            }
+          />
         ))}
       </Box>
       <ScannerGateMode />
@@ -306,7 +319,8 @@ const ScannerGateMode = (props, context) => {
           content={reverse ? 'Inverted' : 'Default'}
           icon={reverse ? 'random' : 'long-arrow-alt-right'}
           onClick={() => act('toggle_reverse')}
-          color={reverse ? 'bad' : 'good'} />
+          color={reverse ? 'bad' : 'good'}
+        />
       </LabeledList.Item>
     </LabeledList>
   );
diff --git a/tgui/packages/tgui/interfaces/Secrets.js b/tgui/packages/tgui/interfaces/Secrets.js
index 4d4a83991e66..849f44c83884 100644
--- a/tgui/packages/tgui/interfaces/Secrets.js
+++ b/tgui/packages/tgui/interfaces/Secrets.js
@@ -1,6 +1,14 @@
 import { toFixed } from 'common/math';
 import { useBackend, useLocalState } from '../backend';
-import { Button, Flex, LabeledControls, NoticeBox, RoundGauge, Section, Stack } from '../components';
+import {
+  Button,
+  Flex,
+  LabeledControls,
+  NoticeBox,
+  RoundGauge,
+  Section,
+  Stack,
+} from '../components';
 import { Window } from '../layouts';
 
 const TAB2NAME = [
@@ -45,7 +53,8 @@ const DebuggingTab = (props, context) => {
           icon="question"
           fluid
           content="Change all maintenance doors to engie/brig access only"
-          onClick={() => act("maint_access_engiebrig")} />
+          onClick={() => act('maint_access_engiebrig')}
+        />
       </Stack.Item>
       <Stack.Item>
         <Button
@@ -54,7 +63,8 @@ const DebuggingTab = (props, context) => {
           icon="question"
           fluid
           content="Change all maintenance doors to brig access only"
-          onClick={() => act("maint_access_brig")} />
+          onClick={() => act('maint_access_brig')}
+        />
       </Stack.Item>
       <Stack.Item>
         <Button
@@ -63,7 +73,8 @@ const DebuggingTab = (props, context) => {
           icon="question"
           fluid
           content="Remove cap on security officers"
-          onClick={() => act("infinite_sec")} />
+          onClick={() => act('infinite_sec')}
+        />
       </Stack.Item>
     </Stack>
   );
@@ -79,7 +90,8 @@ const HelpfulTab = (props, context) => {
             <NoticeBox
               mb={-0.5}
               width={buttonWidthNormal}
-              height={lineHeightNormal}>
+              height={lineHeightNormal}
+            >
               Your admin button here, coder!
             </NoticeBox>
           </Stack.Item>
@@ -89,7 +101,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Cure all diseases"
-              onClick={() => act("clear_virus")} />
+              onClick={() => act('clear_virus')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -97,7 +110,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Trigger Outbreak"
-              onClick={() => act("virus")} />
+              onClick={() => act('virus')}
+            />
           </Stack.Item>
         </Stack>
       </Stack.Item>
@@ -109,7 +123,7 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Set all lights"
-              onClick={() => act("set_lights")}
+              onClick={() => act('set_lights')}
             />
           </Stack.Item>
           <Stack.Item>
@@ -118,7 +132,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Break all lights"
-              onClick={() => act("blackout")} />
+              onClick={() => act('blackout')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -126,7 +141,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Fix all lights"
-              onClick={() => act("whiteout")} />
+              onClick={() => act('whiteout')}
+            />
           </Stack.Item>
         </Stack>
       </Stack.Item>
@@ -138,7 +154,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="List Bombers"
-              onClick={() => act("list_bombers")} />
+              onClick={() => act('list_bombers')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -146,7 +163,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="List Signalers"
-              onClick={() => act("list_signalers")} />
+              onClick={() => act('list_signalers')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -154,7 +172,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="List laws"
-              onClick={() => act("list_lawchanges")} />
+              onClick={() => act('list_lawchanges')}
+            />
           </Stack.Item>
         </Stack>
       </Stack.Item>
@@ -166,7 +185,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Show Manifest"
-              onClick={() => act("manifest")} />
+              onClick={() => act('manifest')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -174,7 +194,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Show DNA"
-              onClick={() => act("dna")} />
+              onClick={() => act('dna')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -182,7 +203,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Show Fingerprints"
-              onClick={() => act("fingerprints")} />
+              onClick={() => act('fingerprints')}
+            />
           </Stack.Item>
         </Stack>
       </Stack.Item>
@@ -194,7 +216,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Toggle CTF"
-              onClick={() => act("ctfbutton")} />
+              onClick={() => act('ctfbutton')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -202,7 +225,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Reset Thunderdome"
-              onClick={() => act("tdomereset")} />
+              onClick={() => act('tdomereset')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -210,7 +234,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Set Nightshift"
-              onClick={() => act("night_shift_set")} />
+              onClick={() => act('night_shift_set')}
+            />
           </Stack.Item>
         </Stack>
       </Stack.Item>
@@ -222,7 +247,8 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Rename Station"
-              onClick={() => act("set_name")} />
+              onClick={() => act('set_name')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -230,13 +256,15 @@ const HelpfulTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Default Station Name"
-              onClick={() => act("reset_name")} />
+              onClick={() => act('reset_name')}
+            />
           </Stack.Item>
           <Stack.Item>
             <NoticeBox
               mb={-0.5}
               width={buttonWidthNormal}
-              height={lineHeightNormal}>
+              height={lineHeightNormal}
+            >
               Your admin button here, coder!
             </NoticeBox>
           </Stack.Item>
@@ -258,13 +286,15 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Make N.E.R.D."
-              onClick={() => act("makeNerd")} />
+              onClick={() => act('makeNerd')}
+            />
           </Stack.Item>
           <Stack.Item>
             <NoticeBox
               mb={-0.5}
               width={buttonWidthNormal}
-              height={lineHeightNormal}>
+              height={lineHeightNormal}
+            >
               Your admin button here, coder!
             </NoticeBox>
           </Stack.Item>
@@ -272,7 +302,8 @@ const FunTab = (props, context) => {
             <NoticeBox
               mb={0.0}
               width={buttonWidthNormal}
-              height={lineHeightNormal}>
+              height={lineHeightNormal}
+            >
               Your admin button here, coder!
             </NoticeBox>
           </Stack.Item>
@@ -286,7 +317,8 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="All areas powered"
-              onClick={() => act("power")} />
+              onClick={() => act('power')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -294,7 +326,8 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="All areas unpowered"
-              onClick={() => act("unpower")} />
+              onClick={() => act('unpower')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -302,7 +335,8 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="recharge SMESs"
-              onClick={() => act("quickpower")} />
+              onClick={() => act('quickpower')}
+            />
           </Stack.Item>
         </Stack>
       </Stack.Item>
@@ -314,7 +348,8 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Anonymous Names"
-              onClick={() => act("anon_name")} />
+              onClick={() => act('anon_name')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -322,7 +357,8 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Triple AI mode"
-              onClick={() => act("tripleAI")} />
+              onClick={() => act('tripleAI')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -330,7 +366,8 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="THERE CAN ONLY BE-"
-              onClick={() => act("onlyone")} />
+              onClick={() => act('onlyone')}
+            />
           </Stack.Item>
         </Stack>
       </Stack.Item>
@@ -342,7 +379,8 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Summon Guns"
-              onClick={() => act("guns")} />
+              onClick={() => act('guns')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -350,7 +388,8 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Summon Magic"
-              onClick={() => act("magic")} />
+              onClick={() => act('magic')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -358,7 +397,8 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Summon Events"
-              onClick={() => act("events")} />
+              onClick={() => act('events')}
+            />
           </Stack.Item>
         </Stack>
       </Stack.Item>
@@ -370,7 +410,8 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Egalitarian Station"
-              onClick={() => act("eagles")} />
+              onClick={() => act('eagles')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -378,13 +419,15 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Ancap Station"
-              onClick={() => act("ancap")} />
+              onClick={() => act('ancap')}
+            />
           </Stack.Item>
           <Stack.Item>
             <NoticeBox
               mb={-0.5}
               width={buttonWidthNormal}
-              height={lineHeightNormal}>
+              height={lineHeightNormal}
+            >
               Your admin button here, coder!
             </NoticeBox>
           </Stack.Item>
@@ -398,7 +441,8 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Custom Portal Storm"
-              onClick={() => act("customportal")} />
+              onClick={() => act('customportal')}
+            />
           </Stack.Item>
           <Stack.Item>
             <Button
@@ -406,13 +450,15 @@ const FunTab = (props, context) => {
               lineHeight={lineHeightNormal}
               width={buttonWidthNormal}
               content="Change Bomb Cap"
-              onClick={() => act("changebombcap")} />
+              onClick={() => act('changebombcap')}
+            />
           </Stack.Item>
           <Stack.Item>
             <NoticeBox
               mb={-0.5}
               width={buttonWidthNormal}
-              height={lineHeightNormal}>
+              height={lineHeightNormal}
+            >
               Your admin button here, coder!
             </NoticeBox>
           </Stack.Item>
@@ -435,7 +481,8 @@ const FunForYouTab = (props, context) => {
                 icon="user-secret"
                 fluid
                 content="Everyone is the traitor"
-                onClick={() => act("traitor_all")} />
+                onClick={() => act('traitor_all')}
+              />
             </NoticeBox>
           </Stack.Item>
           <Stack.Item>
@@ -445,7 +492,8 @@ const FunForYouTab = (props, context) => {
                 icon="brain"
                 fluid
                 content="Everyone gets brain damage"
-                onClick={() => act("massbraindamage")} />
+                onClick={() => act('massbraindamage')}
+              />
             </NoticeBox>
           </Stack.Item>
         </Stack>
@@ -457,7 +505,8 @@ const FunForYouTab = (props, context) => {
             icon="hand-lizard"
             fluid
             content="Change everyone's species"
-            onClick={() => act("allspecies")} />
+            onClick={() => act('allspecies')}
+          />
         </NoticeBox>
       </Stack.Item>
       <Stack.Item>
@@ -467,7 +516,8 @@ const FunForYouTab = (props, context) => {
             icon="paw"
             fluid
             content="Turn all humans into monkeys (DANGEROUS: worst species)"
-            onClick={() => act("monkey")} />
+            onClick={() => act('monkey')}
+          />
         </NoticeBox>
       </Stack.Item>
       <Stack.Item>
@@ -477,7 +527,8 @@ const FunForYouTab = (props, context) => {
             icon="fire"
             fluid
             content="The floor is lava! (DANGEROUS: extremely lame)"
-            onClick={() => act("floorlava")} />
+            onClick={() => act('floorlava')}
+          />
         </NoticeBox>
       </Stack.Item>
       <Stack.Item>
@@ -487,7 +538,8 @@ const FunForYouTab = (props, context) => {
             icon="fire"
             fluid
             content="Chinese Cartoons! (DANGEROUS: no going back, also fuck you)"
-            onClick={() => act("anime")} />
+            onClick={() => act('anime')}
+          />
         </NoticeBox>
       </Stack.Item>
       <Stack.Item>
@@ -499,7 +551,8 @@ const FunForYouTab = (props, context) => {
                 icon="cat"
                 fluid
                 content="Mass Purrbation"
-                onClick={() => act("masspurrbation")} />
+                onClick={() => act('masspurrbation')}
+              />
             </NoticeBox>
           </Stack.Item>
           <Stack.Item>
@@ -509,7 +562,8 @@ const FunForYouTab = (props, context) => {
                 icon="user"
                 fluid
                 content="Cure Purrbation"
-                onClick={() => act("massremovepurrbation")} />
+                onClick={() => act('massremovepurrbation')}
+              />
             </NoticeBox>
           </Stack.Item>
         </Stack>
@@ -523,7 +577,8 @@ const FunForYouTab = (props, context) => {
                 icon="flushed"
                 fluid
                 content="Fully Immerse Everyone"
-                onClick={() => act("massimmerse")} />
+                onClick={() => act('massimmerse')}
+              />
             </NoticeBox>
           </Stack.Item>
           <Stack.Item grow>
@@ -533,7 +588,8 @@ const FunForYouTab = (props, context) => {
                 icon="sync-alt"
                 fluid
                 content="Shatter the Immersion"
-                onClick={() => act("unmassimmerse")} />
+                onClick={() => act('unmassimmerse')}
+              />
             </NoticeBox>
           </Stack.Item>
         </Stack>
@@ -544,48 +600,38 @@ const FunForYouTab = (props, context) => {
 
 export const Secrets = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    is_debugger,
-    is_funmin,
-  } = data;
-  const [
-    tabIndex,
-    setTabIndex,
-  ] = useLocalState(context, 'tab-index', 2);
-  const TabComponent = TAB2NAME[tabIndex-1].component();
+  const { is_debugger, is_funmin } = data;
+  const [tabIndex, setTabIndex] = useLocalState(context, 'tab-index', 2);
+  const TabComponent = TAB2NAME[tabIndex - 1].component();
   return (
-    <Window
-      title="Secrets Panel"
-      width={500}
-      height={488}
-      theme="admin">
+    <Window title="Secrets Panel" width={500} height={488} theme="admin">
       <Window.Content>
         <Flex direction="column" height="100%">
           <Flex.Item mb={1}>
             <Section
               title="Secrets"
-              buttons={(
+              buttons={
                 <>
                   <Button
                     color="blue"
                     icon="address-card"
                     content="Admin Log"
-                    onClick={() => act("admin_log")} />
+                    onClick={() => act('admin_log')}
+                  />
                   <Button
                     color="blue"
                     icon="eye"
                     content="Show Admins"
-                    onClick={() => act("show_admins")} />
+                    onClick={() => act('show_admins')}
+                  />
                 </>
-              )}>
-              <Flex
-                mx={-0.5}
-                align="stretch"
-                justify="center">
+              }
+            >
+              <Flex mx={-0.5} align="stretch" justify="center">
                 <Flex.Item bold>
                   <NoticeBox color="black">
-                    &quot;The first rule of adminbuse is:
-                    you don&apos;t talk about the adminbuse.&quot;
+                    &quot;The first rule of adminbuse is: you don&apos;t talk
+                    about the adminbuse.&quot;
                   </NoticeBox>
                 </Flex.Item>
               </Flex>
@@ -593,13 +639,15 @@ export const Secrets = (props, context) => {
                 textAlign="center"
                 mx={-0.5}
                 align="stretch"
-                justify="center">
+                justify="center"
+              >
                 <Flex.Item ml={-10} mr={1}>
                   <Button
                     selected={tabIndex === 2}
                     icon="check-circle"
                     content="Helpful"
-                    onClick={() => setTabIndex(2)} />
+                    onClick={() => setTabIndex(2)}
+                  />
                 </Flex.Item>
                 <Flex.Item ml={1}>
                   <Button
@@ -607,38 +655,39 @@ export const Secrets = (props, context) => {
                     selected={tabIndex === 3}
                     icon="smile"
                     content="Fun"
-                    onClick={() => setTabIndex(3)} />
+                    onClick={() => setTabIndex(3)}
+                  />
                 </Flex.Item>
               </Flex>
-              <Flex
-                mx={-0.5}
-                align="stretch"
-                justify="center">
+              <Flex mx={-0.5} align="stretch" justify="center">
                 <Flex.Item mt={1}>
                   <Button
                     disabled={is_debugger === 0}
                     selected={tabIndex === 1}
                     icon="glasses"
                     content="Debugging"
-                    onClick={() => setTabIndex(1)} />
+                    onClick={() => setTabIndex(1)}
+                  />
                 </Flex.Item>
                 <Flex.Item>
                   <LabeledControls>
                     <LabeledControls.Item
                       minWidth="66px"
-                      label="Chances of admin complaint">
+                      label="Chances of admin complaint"
+                    >
                       <RoundGauge
                         size={2}
-                        value={TAB2NAME[tabIndex-1].gauge}
+                        value={TAB2NAME[tabIndex - 1].gauge}
                         minValue={0}
                         maxValue={100}
-                        alertAfter={100 * 0.70}
+                        alertAfter={100 * 0.7}
                         ranges={{
-                          "good": [-2, 100 * 0.25],
-                          "average": [100 * 0.25, 100 * 0.75],
-                          "bad": [100 * 0.75, 100],
+                          good: [-2, 100 * 0.25],
+                          average: [100 * 0.25, 100 * 0.75],
+                          bad: [100 * 0.75, 100],
                         }}
-                        format={value => toFixed(value) + '%'} />
+                        format={(value) => toFixed(value) + '%'}
+                      />
                     </LabeledControls.Item>
                   </LabeledControls>
                 </Flex.Item>
@@ -648,7 +697,8 @@ export const Secrets = (props, context) => {
                     selected={tabIndex === 4}
                     icon="smile-wink"
                     content="Only Fun For You"
-                    onClick={() => setTabIndex(4)} />
+                    onClick={() => setTabIndex(4)}
+                  />
                 </Flex.Item>
               </Flex>
             </Section>
@@ -656,8 +706,12 @@ export const Secrets = (props, context) => {
           <Flex.Item grow={1}>
             <Section
               fill={false}
-              title={TAB2NAME[tabIndex-1].title
-                + " Or: " + TAB2NAME[tabIndex-1].blurb}>
+              title={
+                TAB2NAME[tabIndex - 1].title +
+                ' Or: ' +
+                TAB2NAME[tabIndex - 1].blurb
+              }
+            >
               <TabComponent />
             </Section>
           </Flex.Item>
diff --git a/tgui/packages/tgui/interfaces/SeedExtractor.js b/tgui/packages/tgui/interfaces/SeedExtractor.js
index 9277ab66cbe2..0da80af8dc9d 100644
--- a/tgui/packages/tgui/interfaces/SeedExtractor.js
+++ b/tgui/packages/tgui/interfaces/SeedExtractor.js
@@ -9,7 +9,7 @@ import { Window } from '../layouts';
  * This method takes a seed string and splits the values
  * into an object
  */
-const splitSeedString = text => {
+const splitSeedString = (text) => {
   const re = /([^;=]+)=([^;]+)/g;
   const ret = {};
   let m;
@@ -29,26 +29,22 @@ const splitSeedString = text => {
  *
  * @returns {any[]}
  */
-const createSeeds = seedStrings => {
-  const objs = Object.keys(seedStrings).map(key => {
+const createSeeds = (seedStrings) => {
+  const objs = Object.keys(seedStrings).map((key) => {
     const obj = splitSeedString(key);
     obj.amount = seedStrings[key];
     obj.key = key;
     obj.name = toTitleCase(obj.name.replace('pack of ', ''));
     return obj;
   });
-  return flow([
-    sortBy(item => item.name),
-  ])(objs);
+  return flow([sortBy((item) => item.name)])(objs);
 };
 
 export const SeedExtractor = (props, context) => {
   const { act, data } = useBackend(context);
   const seeds = createSeeds(data.seeds);
   return (
-    <Window
-      width={1000}
-      height={400}>
+    <Window width={1000} height={400}>
       <Window.Content scrollable>
         <Section title="Stored seeds:">
           <Table cellpadding="3" textAlign="center">
@@ -63,7 +59,7 @@ export const SeedExtractor = (props, context) => {
               <Table.Cell>Instability</Table.Cell>
               <Table.Cell>Stock</Table.Cell>
             </Table.Row>
-            {seeds.map(item => (
+            {seeds.map((item) => (
               <Table.Row key={item.key}>
                 <Table.Cell bold>{item.name}</Table.Cell>
                 <Table.Cell>{item.lifespan}</Table.Cell>
@@ -76,9 +72,12 @@ export const SeedExtractor = (props, context) => {
                 <Table.Cell>
                   <Button
                     content="Vend"
-                    onClick={() => act('select', {
-                      item: item.key,
-                    })} />
+                    onClick={() =>
+                      act('select', {
+                        item: item.key,
+                      })
+                    }
+                  />
                   ({item.amount} left)
                 </Table.Cell>
               </Table.Row>
diff --git a/tgui/packages/tgui/interfaces/SelectEquipment.js b/tgui/packages/tgui/interfaces/SelectEquipment.js
index bbcab8136b4d..a135cd02e0f5 100644
--- a/tgui/packages/tgui/interfaces/SelectEquipment.js
+++ b/tgui/packages/tgui/interfaces/SelectEquipment.js
@@ -7,7 +7,7 @@ import { Window } from '../layouts';
 
 // here's an important mental define:
 // custom outfits give a ref keyword instead of path
-const getOutfitKey = outfit => outfit.path || outfit.ref;
+const getOutfitKey = (outfit) => outfit.path || outfit.ref;
 
 const useOutfitTabs = (context, categories) => {
   return useLocalState(context, 'selected-tab', categories[0]);
@@ -15,58 +15,46 @@ const useOutfitTabs = (context, categories) => {
 
 export const SelectEquipment = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    name,
-    icon64,
-    current_outfit,
-    favorites,
-  } = data;
+  const { name, icon64, current_outfit, favorites } = data;
 
-  const isFavorited = entry => favorites?.includes(entry.path);
+  const isFavorited = (entry) => favorites?.includes(entry.path);
 
-  const outfits = map(entry => ({
+  const outfits = map((entry) => ({
     ...entry,
     favorite: isFavorited(entry),
-  }))([
-    ...data.outfits,
-    ...data.custom_outfits,
-  ]);
+  }))([...data.outfits, ...data.custom_outfits]);
 
   // even if no custom outfits were sent, we still want to make sure there's
   // at least a 'Custom' tab so the button to create a new one pops up
   const categories = uniq([
-    ...outfits.map(entry => entry.category),
+    ...outfits.map((entry) => entry.category),
     'Custom',
   ]);
   const [tab] = useOutfitTabs(context, categories);
 
-  const [searchText, setSearchText] = useLocalState(
-    context, 'searchText', '');
-  const searchFilter = createSearch(searchText, entry => (
-    entry.name + entry.path
-  ));
+  const [searchText, setSearchText] = useLocalState(context, 'searchText', '');
+  const searchFilter = createSearch(
+    searchText,
+    (entry) => entry.name + entry.path,
+  );
 
   const visibleOutfits = flow([
-    filter(entry => entry.category === tab),
+    filter((entry) => entry.category === tab),
     filter(searchFilter),
     sortBy(
-      entry => !entry.favorite,
-      entry => !entry.priority,
-      entry => entry.name
+      (entry) => !entry.favorite,
+      (entry) => !entry.priority,
+      (entry) => entry.name,
     ),
   ])(outfits);
 
-  const getOutfitEntry = current_outfit => outfits.find(outfit => (
-    getOutfitKey(outfit) === current_outfit
-  ));
+  const getOutfitEntry = (current_outfit) =>
+    outfits.find((outfit) => getOutfitKey(outfit) === current_outfit);
 
   const currentOutfitEntry = getOutfitEntry(current_outfit);
 
   return (
-    <Window
-      width={650}
-      height={415}
-      theme="admin">
+    <Window width={650} height={415} theme="admin">
       <Window.Content>
         <Stack fill>
           <Stack.Item>
@@ -77,15 +65,14 @@ export const SelectEquipment = (props, context) => {
                   autoFocus
                   placeholder="Search"
                   value={searchText}
-                  onInput={(e, value) => setSearchText(value)} />
+                  onInput={(e, value) => setSearchText(value)}
+                />
               </Stack.Item>
               <Stack.Item>
                 <DisplayTabs categories={categories} />
               </Stack.Item>
               <Stack.Item mt={0} grow={1} basis={0}>
-                <OutfitDisplay
-                  entries={visibleOutfits}
-                  currentTab={tab} />
+                <OutfitDisplay entries={visibleOutfits} currentTab={tab} />
               </Stack.Item>
             </Stack>
           </Stack.Item>
@@ -97,10 +84,7 @@ export const SelectEquipment = (props, context) => {
                 </Section>
               </Stack.Item>
               <Stack.Item grow={1}>
-                <Section
-                  fill
-                  title={name}
-                  textAlign="center">
+                <Section fill title={name} textAlign="center">
                   <Box
                     as="img"
                     m={0}
@@ -108,7 +92,8 @@ export const SelectEquipment = (props, context) => {
                     height="100%"
                     style={{
                       '-ms-interpolation-mode': 'nearest-neighbor',
-                    }} />
+                    }}
+                  />
                 </Section>
               </Stack.Item>
             </Stack>
@@ -124,11 +109,12 @@ const DisplayTabs = (props, context) => {
   const [tab, setTab] = useOutfitTabs(context, categories);
   return (
     <Tabs textAlign="center">
-      {categories.map(category => (
+      {categories.map((category) => (
         <Tabs.Tab
           key={category}
           selected={tab === category}
-          onClick={() => setTab(category)}>
+          onClick={() => setTab(category)}
+        >
           {category}
         </Tabs.Tab>
       ))}
@@ -142,7 +128,7 @@ const OutfitDisplay = (props, context) => {
   const { entries, currentTab } = props;
   return (
     <Section fill scrollable>
-      {entries.map(entry => (
+      {entries.map((entry) => (
         <Button
           key={getOutfitKey(entry)}
           fluid
@@ -152,19 +138,25 @@ const OutfitDisplay = (props, context) => {
           content={entry.name}
           title={entry.path || entry.name}
           selected={getOutfitKey(entry) === current_outfit}
-          onClick={() => act('preview', {
-            path: getOutfitKey(entry),
-          })}
-          onDblClick={() => act('applyoutfit', {
-            path: getOutfitKey(entry),
-          })} />
+          onClick={() =>
+            act('preview', {
+              path: getOutfitKey(entry),
+            })
+          }
+          onDblClick={() =>
+            act('applyoutfit', {
+              path: getOutfitKey(entry),
+            })
+          }
+        />
       ))}
-      {currentTab === "Custom" && (
+      {currentTab === 'Custom' && (
         <Button
           color="transparent"
           icon="plus"
           fluid
-          onClick={() => act('customoutfit')}>
+          onClick={() => act('customoutfit')}
+        >
           Create a custom outfit...
         </Button>
       )}
@@ -185,22 +177,24 @@ const CurrentlySelectedDisplay = (props, context) => {
             name={entry.favorite ? 'star' : 'star-o'}
             color="gold"
             style={{ cursor: 'pointer' }}
-            onClick={() => act('togglefavorite', {
-              path: entry.path,
-            })} />
+            onClick={() =>
+              act('togglefavorite', {
+                path: entry.path,
+              })
+            }
+          />
         </Stack.Item>
       )}
       <Stack.Item grow={1} basis={0}>
-        <Box color="label">
-          Currently selected:
-        </Box>
+        <Box color="label">Currently selected:</Box>
         <Box
           title={entry?.path}
           style={{
-            'overflow': 'hidden',
+            overflow: 'hidden',
             'white-space': 'nowrap',
             'text-overflow': 'ellipsis',
-          }}>
+          }}
+        >
           {entry?.name}
         </Box>
       </Stack.Item>
@@ -209,9 +203,12 @@ const CurrentlySelectedDisplay = (props, context) => {
           mr={0.8}
           lineHeight={2}
           color="green"
-          onClick={() => act('applyoutfit', {
-            path: current_outfit,
-          })}>
+          onClick={() =>
+            act('applyoutfit', {
+              path: current_outfit,
+            })
+          }
+        >
           Confirm
         </Button>
       </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/SentienceFunBalloon.js b/tgui/packages/tgui/interfaces/SentienceFunBalloon.js
index 8a9ddc239953..d2158ccdd9c7 100644
--- a/tgui/packages/tgui/interfaces/SentienceFunBalloon.js
+++ b/tgui/packages/tgui/interfaces/SentienceFunBalloon.js
@@ -1,16 +1,19 @@
-import { useBackend } from "../backend";
-import { Button, NumberInput, Section, Stack, Input, LabeledList } from '../components';
-import { Window } from "../layouts";
+import { useBackend } from '../backend';
+import {
+  Button,
+  NumberInput,
+  Section,
+  Stack,
+  Input,
+  LabeledList,
+} from '../components';
+import { Window } from '../layouts';
 
 export const SentienceFunBalloon = (props, context) => {
   const { act, data } = useBackend(context);
   const { group_name, range } = data;
   return (
-    <Window
-      title={"Sentience Fun Balloon"}
-      width={400}
-      height={175}
-    >
+    <Window title={'Sentience Fun Balloon'} width={400} height={175}>
       <Window.Content>
         <Stack vertical>
           <Section title="Configure balloon effect:">
@@ -19,9 +22,12 @@ export const SentienceFunBalloon = (props, context) => {
                 <Input
                   fluid
                   value={group_name}
-                  onChange={(e, value) => act("group_name", {
-                    updated_name: value,
-                  })} />
+                  onChange={(e, value) =>
+                    act('group_name', {
+                      updated_name: value,
+                    })
+                  }
+                />
               </LabeledList.Item>
               <LabeledList.Item label="Effect range">
                 <NumberInput
@@ -30,9 +36,12 @@ export const SentienceFunBalloon = (props, context) => {
                   minValue={1}
                   maxValue={100}
                   stepPixelSize={15}
-                  onDrag={(e, value) => act('effect_range', {
-                    updated_range: value,
-                  })} />
+                  onDrag={(e, value) =>
+                    act('effect_range', {
+                      updated_range: value,
+                    })
+                  }
+                />
               </LabeledList.Item>
             </LabeledList>
           </Section>
@@ -43,7 +52,8 @@ export const SentienceFunBalloon = (props, context) => {
               color="good"
               textAlign="center"
               content="Pop Balloon"
-              onClick={() => act("pop")} />
+              onClick={() => act('pop')}
+            />
           </Section>
         </Stack>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/ServerMonitor.js b/tgui/packages/tgui/interfaces/ServerMonitor.js
index 7c5477215001..b92852b568e8 100644
--- a/tgui/packages/tgui/interfaces/ServerMonitor.js
+++ b/tgui/packages/tgui/interfaces/ServerMonitor.js
@@ -1,47 +1,40 @@
 import { useBackend, useLocalState } from '../backend';
-import { Section, Stack, Input, Button, Table, LabeledList, Flex, Divider, NoticeBox } from '../components';
+import {
+  Section,
+  Stack,
+  Input,
+  Button,
+  Table,
+  LabeledList,
+  Flex,
+  Divider,
+  NoticeBox,
+} from '../components';
 import { Window } from '../layouts';
 
-
 const PacketInfo = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    packet,
-  } = props;
+  const { packet } = props;
   return (
     <Stack.Item>
       <Flex justify="space-between">
-        <Flex.Item align="left">
-          {packet.name}
-        </Flex.Item>
+        <Flex.Item align="left">{packet.name}</Flex.Item>
         <Flex.Item align="right">
           <Button
             icon="trash"
             color="red"
-            onClick={() => act("delete_packet", { ref: packet.ref })} />
+            onClick={() => act('delete_packet', { ref: packet.ref })}
+          />
         </Flex.Item>
       </Flex>
       <LabeledList>
-        <LabeledList.Item
-          label="Data Type">
-          {packet.type}
-        </LabeledList.Item>
-        <LabeledList.Item
-          label="Source">
-          {packet.source + (packet.job? " (" + packet.job + ")" : "")}
-        </LabeledList.Item>
-        <LabeledList.Item
-          label="Class">
-          {packet.race}
-        </LabeledList.Item>
-        <LabeledList.Item
-          label="Contents">
-          {packet.message}
-        </LabeledList.Item>
-        <LabeledList.Item
-          label="Language">
-          {packet.language}
+        <LabeledList.Item label="Data Type">{packet.type}</LabeledList.Item>
+        <LabeledList.Item label="Source">
+          {packet.source + (packet.job ? ' (' + packet.job + ')' : '')}
         </LabeledList.Item>
+        <LabeledList.Item label="Class">{packet.race}</LabeledList.Item>
+        <LabeledList.Item label="Contents">{packet.message}</LabeledList.Item>
+        <LabeledList.Item label="Language">{packet.language}</LabeledList.Item>
       </LabeledList>
       <Divider />
     </Stack.Item>
@@ -50,10 +43,7 @@ const PacketInfo = (props, context) => {
 
 const ServerScreen = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    network,
-    server,
-  } = data;
+  const { network, server } = data;
   return (
     <Stack fill vertical>
       <Stack.Item>
@@ -63,27 +53,23 @@ const ServerScreen = (props, context) => {
             <Button
               content="Main Menu"
               icon="home"
-              onClick={() => act("return_home")} />
-          }>
+              onClick={() => act('return_home')}
+            />
+          }
+        >
           <LabeledList>
-            <LabeledList.Item
-              label="Network">
-              {network}
-            </LabeledList.Item>
-            <LabeledList.Item
-              label="Server">
-              {server.name}
-            </LabeledList.Item>
-            <LabeledList.Item
-              label="Total Recorded Traffic">
-              {server.traffic >= 1024? (server.traffic / 1024) + " TB" : server.traffic + " GB"}
+            <LabeledList.Item label="Network">{network}</LabeledList.Item>
+            <LabeledList.Item label="Server">{server.name}</LabeledList.Item>
+            <LabeledList.Item label="Total Recorded Traffic">
+              {server.traffic >= 1024
+                ? server.traffic / 1024 + ' TB'
+                : server.traffic + ' GB'}
             </LabeledList.Item>
           </LabeledList>
         </Section>
       </Stack.Item>
       <Stack.Item grow>
-        <Section fill scrollable
-          title="Stored Packets">
+        <Section fill scrollable title="Stored Packets">
           <Stack vertical>
             {server.packets?.map((p) => (
               <PacketInfo key={p.ref} packet={p} />
@@ -97,15 +83,13 @@ const ServerScreen = (props, context) => {
 
 const MainScreen = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    servers,
+  const { servers, network } = data;
+  const [networkId, setNetworkId] = useLocalState(
+    context,
+    'networkId',
     network,
-  } = data;
-  const [
-    networkId,
-    setNetworkId,
-  ] = useLocalState(context, "networkId", network);
-  
+  );
+
   return (
     <Stack fill vertical>
       <Stack.Item>
@@ -113,14 +97,18 @@ const MainScreen = (props, context) => {
           <Input
             value={networkId}
             onInput={(e, value) => setNetworkId(value)}
-            placeholder="Network ID" />
+            placeholder="Network ID"
+          />
           <Button
             content="Scan"
-            onClick={() => act("scan_network", { network_id: networkId })} />
+            onClick={() => act('scan_network', { network_id: networkId })}
+          />
         </Section>
       </Stack.Item>
       <Stack.Item grow>
-        <Section fill scrollable
+        <Section
+          fill
+          scrollable
           title="Detected Telecommunication Servers"
           buttons={
             <Button
@@ -128,8 +116,10 @@ const MainScreen = (props, context) => {
               icon="trash"
               color="red"
               disabled={servers.length === 0}
-              onClick={() => act("clear_buffer")} />
-          }>
+              onClick={() => act('clear_buffer')}
+            />
+          }
+        >
           <Table>
             <Table.Row header>
               <Table.Cell>Address</Table.Cell>
@@ -143,7 +133,8 @@ const MainScreen = (props, context) => {
                 <Table.Cell>
                   <Button
                     content={s.name}
-                    onClick={() => act("view_server", { server: s.ref })} />
+                    onClick={() => act('view_server', { server: s.ref })}
+                  />
                 </Table.Cell>
               </Table.Row>
             ))}
@@ -156,30 +147,20 @@ const MainScreen = (props, context) => {
 
 export const ServerMonitor = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    screen,
-    error,
-  } = data;
+  const { screen, error } = data;
   return (
-    <Window
-      width={575}
-      height={400}>
+    <Window width={575} height={400}>
       <Window.Content>
         <Stack vertical fill>
           <Stack.Item>
-            {error !== "" && (
-              <NoticeBox>
-                {error}
-              </NoticeBox>
-            )}
+            {error !== '' && <NoticeBox>{error}</NoticeBox>}
           </Stack.Item>
           <Stack.Item grow>
-            {screen === 0 && <MainScreen />
-              || screen === 1 && <ServerScreen />}
+            {(screen === 0 && <MainScreen />) ||
+              (screen === 1 && <ServerScreen />)}
           </Stack.Item>
         </Stack>
       </Window.Content>
     </Window>
   );
 };
-
diff --git a/tgui/packages/tgui/interfaces/ShuttleConsole.js b/tgui/packages/tgui/interfaces/ShuttleConsole.js
index dc32510e3ec1..7546e517c9c7 100644
--- a/tgui/packages/tgui/interfaces/ShuttleConsole.js
+++ b/tgui/packages/tgui/interfaces/ShuttleConsole.js
@@ -1,20 +1,22 @@
 import { useBackend } from '../backend';
-import { Box, Button, Dropdown, Flex, Icon, LabeledList, Modal, Section } from '../components';
+import {
+  Box,
+  Button,
+  Dropdown,
+  Flex,
+  Icon,
+  LabeledList,
+  Modal,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const ShuttleConsole = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    type = "shuttle",
-    blind_drop,
-  } = props;
-  const {
-    authorization_required,
-  } = data;
+  const { type = 'shuttle', blind_drop } = props;
+  const { authorization_required } = data;
   return (
-    <Window
-      width={350}
-      height={230}>
+    <Window width={350} height={230}>
       {!!authorization_required && (
         <Modal
           ml={1}
@@ -23,56 +25,50 @@ export const ShuttleConsole = (props, context) => {
           height={12}
           fontSize="28px"
           fontFamily="monospace"
-          textAlign="center">
+          textAlign="center"
+        >
           <Flex>
             <Flex.Item mt={2}>
-              <Icon
-                name="minus-circle" />
+              <Icon name="minus-circle" />
             </Flex.Item>
-            <Flex.Item
-              mt={2}
-              ml={2}
-              color="bad">
-              {type === "shuttle" ? 'SHUTTLE LOCKED' : "BASE LOCKED"}
+            <Flex.Item mt={2} ml={2} color="bad">
+              {type === 'shuttle' ? 'SHUTTLE LOCKED' : 'BASE LOCKED'}
             </Flex.Item>
           </Flex>
-          <Box
-            fontSize="18px"
-            mt={4}>
+          <Box fontSize="18px" mt={4}>
             <Button
               lineHeight="40px"
               icon="arrow-circle-right"
               content="Request Authorization"
               color="bad"
-              onClick={() => act('request')} />
+              onClick={() => act('request')}
+            />
           </Box>
         </Modal>
       )}
       <Window.Content>
-        <ShuttleConsoleContent
-          type={type}
-          blind_drop={blind_drop} />
+        <ShuttleConsoleContent type={type} blind_drop={blind_drop} />
       </Window.Content>
     </Window>
   );
 };
 
 const getLocationNameById = (locations, id) => {
-  return locations?.find(location => location.id === id)?.name;
+  return locations?.find((location) => location.id === id)?.name;
 };
 
 const getLocationIdByName = (locations, name) => {
-  return locations?.find(location => location.name === name)?.id;
+  return locations?.find((location) => location.name === name)?.id;
 };
 
 const STATUS_COLOR_KEYS = {
-  "In Transit": "good",
-  "Idle": "average",
-  "Igniting": "average",
-  "Recharging": "average",
-  "Missing": "bad",
-  "Unauthorized Access": "bad",
-  "Locked": "bad",
+  'In Transit': 'good',
+  Idle: 'average',
+  Igniting: 'average',
+  Recharging: 'average',
+  Missing: 'bad',
+  'Unauthorized Access': 'bad',
+  Locked: 'bad',
 };
 
 export const ShuttleConsoleContent = (props, context) => {
@@ -89,82 +85,86 @@ export const ShuttleConsoleContent = (props, context) => {
   } = data;
   return (
     <Section>
-      <Box
-        bold
-        fontSize="26px"
-        textAlign="center"
-        fontFamily="monospace">
-        {timer_str || "00:00"}
+      <Box bold fontSize="26px" textAlign="center" fontFamily="monospace">
+        {timer_str || '00:00'}
       </Box>
-      <Box
-        textAlign="center"
-        fontSize="14px"
-        mb={1}>
-        <Box
-          inline
-          bold>
+      <Box textAlign="center" fontSize="14px" mb={1}>
+        <Box inline bold>
           STATUS:
         </Box>
-        <Box
-          inline
-          color={STATUS_COLOR_KEYS[status] || "bad"}
-          ml={1}>
-          {status || "Not Available"}
+        <Box inline color={STATUS_COLOR_KEYS[status] || 'bad'} ml={1}>
+          {status || 'Not Available'}
         </Box>
       </Box>
       <Section
-        title={type === "shuttle" ? "Shuttle Controls" : "Base Launch Controls"}
-        level={2}>
+        title={type === 'shuttle' ? 'Shuttle Controls' : 'Base Launch Controls'}
+        level={2}
+      >
         <LabeledList>
           <LabeledList.Item label="Location">
-            {docked_location || "Not Available"}
+            {docked_location || 'Not Available'}
           </LabeledList.Item>
           <LabeledList.Item
             label="Destination"
-            buttons={(
-              type !== "shuttle" && locations.length===0 && !!blind_drop && (
+            buttons={
+              type !== 'shuttle' &&
+              locations.length === 0 &&
+              !!blind_drop && (
                 <Button
                   color="bad"
                   icon="exclamation-triangle"
                   disabled={authorization_required || !blind_drop}
-                  content={"Blind Drop"}
-                  onClick={() => act('random')} />
-              ))} >
-            {locations.length===0 && (
-              <Box
-                mb={1.7}
-                color="bad">
+                  content={'Blind Drop'}
+                  onClick={() => act('random')}
+                />
+              )
+            }
+          >
+            {(locations.length === 0 && (
+              <Box mb={1.7} color="bad">
                 Not Available
               </Box>
-            ) || locations.length===1 &&(
-              <Box
-                mb={1.7}
-                color="average">
-                {getLocationNameById(locations, destination)}
-              </Box>
-            ) || (
-              <Dropdown
-                mb={1.7}
-                over
-                width="240px"
-                options={locations.map(location => location.name)}
-                disabled={locked || authorization_required}
-                selected={getLocationNameById(locations, destination) || "Select a Destination"}
-                onSelected={value => act('set_destination', {
-                  destination: getLocationIdByName(locations, value),
-                })} />)}
+            )) ||
+              (locations.length === 1 && (
+                <Box mb={1.7} color="average">
+                  {getLocationNameById(locations, destination)}
+                </Box>
+              )) || (
+                <Dropdown
+                  mb={1.7}
+                  over
+                  width="240px"
+                  options={locations.map((location) => location.name)}
+                  disabled={locked || authorization_required}
+                  selected={
+                    getLocationNameById(locations, destination) ||
+                    'Select a Destination'
+                  }
+                  onSelected={(value) =>
+                    act('set_destination', {
+                      destination: getLocationIdByName(locations, value),
+                    })
+                  }
+                />
+              )}
           </LabeledList.Item>
         </LabeledList>
         <Button
           fluid
           content="Depart"
-          disabled={!getLocationNameById(locations, destination)
-            || locked || authorization_required}
+          disabled={
+            !getLocationNameById(locations, destination) ||
+            locked ||
+            authorization_required
+          }
           icon="arrow-up"
           textAlign="center"
-          onClick={() => act('move', {
-            shuttle_id: destination,
-          })} />
+          onClick={() =>
+            act('move', {
+              shuttle_id: destination,
+            })
+          }
+        />
       </Section>
     </Section>
   );
diff --git a/tgui/packages/tgui/interfaces/ShuttleManipulator.js b/tgui/packages/tgui/interfaces/ShuttleManipulator.js
index 0a304d49a723..7614100f64c3 100644
--- a/tgui/packages/tgui/interfaces/ShuttleManipulator.js
+++ b/tgui/packages/tgui/interfaces/ShuttleManipulator.js
@@ -6,38 +6,22 @@ import { Window } from '../layouts';
 export const ShuttleManipulator = (props, context) => {
   const [tab, setTab] = useLocalState(context, 'tab', 1);
   return (
-    <Window
-      title="Shuttle Manipulator"
-      width={800}
-      height={600}
-      theme="admin">
+    <Window title="Shuttle Manipulator" width={800} height={600} theme="admin">
       <Window.Content scrollable>
         <Tabs>
-          <Tabs.Tab
-            selected={tab === 1}
-            onClick={() => setTab(1)}>
+          <Tabs.Tab selected={tab === 1} onClick={() => setTab(1)}>
             Status
           </Tabs.Tab>
-          <Tabs.Tab
-            selected={tab === 2}
-            onClick={() => setTab(2)}>
+          <Tabs.Tab selected={tab === 2} onClick={() => setTab(2)}>
             Templates
           </Tabs.Tab>
-          <Tabs.Tab
-            selected={tab === 3}
-            onClick={() => setTab(3)}>
+          <Tabs.Tab selected={tab === 3} onClick={() => setTab(3)}>
             Modification
           </Tabs.Tab>
         </Tabs>
-        {tab === 1 && (
-          <ShuttleManipulatorStatus />
-        )}
-        {tab === 2 && (
-          <ShuttleManipulatorTemplates />
-        )}
-        {tab === 3 && (
-          <ShuttleManipulatorModification />
-        )}
+        {tab === 1 && <ShuttleManipulatorStatus />}
+        {tab === 2 && <ShuttleManipulatorTemplates />}
+        {tab === 3 && <ShuttleManipulatorModification />}
       </Window.Content>
     </Window>
   );
@@ -49,35 +33,35 @@ export const ShuttleManipulatorStatus = (props, context) => {
   return (
     <Section>
       <Table>
-        {shuttles.map(shuttle => (
+        {shuttles.map((shuttle) => (
           <Table.Row key={shuttle.id}>
             <Table.Cell>
               <Button
                 content="JMP"
                 key={shuttle.id}
-                onClick={() => act('jump_to', {
-                  type: 'mobile',
-                  id: shuttle.id,
-                })} />
+                onClick={() =>
+                  act('jump_to', {
+                    type: 'mobile',
+                    id: shuttle.id,
+                  })
+                }
+              />
             </Table.Cell>
             <Table.Cell>
               <Button
                 content="Fly"
                 key={shuttle.id}
                 disabled={!shuttle.can_fly}
-                onClick={() => act('fly', {
-                  id: shuttle.id,
-                })} />
-            </Table.Cell>
-            <Table.Cell>
-              {shuttle.name}
-            </Table.Cell>
-            <Table.Cell>
-              {shuttle.id}
-            </Table.Cell>
-            <Table.Cell>
-              {shuttle.status}
+                onClick={() =>
+                  act('fly', {
+                    id: shuttle.id,
+                  })
+                }
+              />
             </Table.Cell>
+            <Table.Cell>{shuttle.name}</Table.Cell>
+            <Table.Cell>{shuttle.id}</Table.Cell>
+            <Table.Cell>{shuttle.status}</Table.Cell>
             <Table.Cell>
               {shuttle.mode}
               {!!shuttle.timer && (
@@ -87,9 +71,12 @@ export const ShuttleManipulatorStatus = (props, context) => {
                     content="Fast Travel"
                     key={shuttle.id}
                     disabled={!shuttle.can_fast_travel}
-                    onClick={() => act('fast_travel', {
-                      id: shuttle.id,
-                    })} />
+                    onClick={() =>
+                      act('fast_travel', {
+                        id: shuttle.id,
+                      })
+                    }
+                  />
                 </>
               )}
             </Table.Cell>
@@ -104,10 +91,11 @@ export const ShuttleManipulatorTemplates = (props, context) => {
   const { act, data } = useBackend(context);
   const templateObject = data.templates || {};
   const selected = data.selected || {};
-  const [
-    selectedTemplateId,
-    setSelectedTemplateId,
-  ] = useLocalState(context, 'templateId', Object.keys(templateObject)[0]);
+  const [selectedTemplateId, setSelectedTemplateId] = useLocalState(
+    context,
+    'templateId',
+    Object.keys(templateObject)[0],
+  );
   const actualTemplates = templateObject[selectedTemplateId]?.templates || [];
   return (
     <Section>
@@ -118,34 +106,37 @@ export const ShuttleManipulatorTemplates = (props, context) => {
               <Tabs.Tab
                 key={templateId}
                 selected={selectedTemplateId === templateId}
-                onClick={() => setSelectedTemplateId(templateId)}>
+                onClick={() => setSelectedTemplateId(templateId)}
+              >
                 {template.port_id}
               </Tabs.Tab>
             ))(templateObject)}
           </Tabs>
         </Flex.Item>
         <Flex.Item grow={1} basis={0}>
-          {actualTemplates.map(actualTemplate => {
-            const isSelected = (
-              actualTemplate.shuttle_id === selected.shuttle_id
-            );
+          {actualTemplates.map((actualTemplate) => {
+            const isSelected =
+              actualTemplate.shuttle_id === selected.shuttle_id;
             // Whoever made the structure being sent is an asshole
             return (
               <Section
                 title={actualTemplate.name}
                 level={2}
                 key={actualTemplate.shuttle_id}
-                buttons={(
+                buttons={
                   <Button
                     content={isSelected ? 'Selected' : 'Select'}
                     selected={isSelected}
-                    onClick={() => act('select_template', {
-                      shuttle_id: actualTemplate.shuttle_id,
-                    })} />
-                )}>
-                {(!!actualTemplate.description
-                  || !!actualTemplate.admin_notes
-                ) && (
+                    onClick={() =>
+                      act('select_template', {
+                        shuttle_id: actualTemplate.shuttle_id,
+                      })
+                    }
+                  />
+                }
+              >
+                {(!!actualTemplate.description ||
+                  !!actualTemplate.admin_notes) && (
                   <LabeledList>
                     {!!actualTemplate.description && (
                       <LabeledList.Item label="Description">
@@ -176,9 +167,7 @@ export const ShuttleManipulatorModification = (props, context) => {
     <Section>
       {selected ? (
         <>
-          <Section
-            level={2}
-            title={selected.name}>
+          <Section level={2} title={selected.name}>
             {(!!selected.description || !!selected.admin_notes) && (
               <LabeledList>
                 {!!selected.description && (
@@ -197,55 +186,63 @@ export const ShuttleManipulatorModification = (props, context) => {
           {existingShuttle ? (
             <Section
               level={2}
-              title={'Existing Shuttle: ' + existingShuttle.name}>
+              title={'Existing Shuttle: ' + existingShuttle.name}
+            >
               <LabeledList>
                 <LabeledList.Item
                   label="Status"
-                  buttons={(
+                  buttons={
                     <Button
                       content="Jump To"
-                      onClick={() => act('jump_to', {
-                        type: 'mobile',
-                        id: existingShuttle.id,
-                      })} />
-                  )}>
+                      onClick={() =>
+                        act('jump_to', {
+                          type: 'mobile',
+                          id: existingShuttle.id,
+                        })
+                      }
+                    />
+                  }
+                >
                   {existingShuttle.status}
-                  {!!existingShuttle.timer && (
-                    <>
-                      ({existingShuttle.timeleft})
-                    </>
-                  )}
+                  {!!existingShuttle.timer && <>({existingShuttle.timeleft})</>}
                 </LabeledList.Item>
               </LabeledList>
             </Section>
           ) : (
-            <Section
-              level={2}
-              title="Existing Shuttle: None" />
+            <Section level={2} title="Existing Shuttle: None" />
           )}
-          <Section
-            level={2}
-            title="Status">
+          <Section level={2} title="Status">
             <Button
               content="Load"
               color="good"
-              onClick={() => act('load', {
-                shuttle_id: selected.shuttle_id,
-              })} />
+              onClick={() =>
+                act('load', {
+                  shuttle_id: selected.shuttle_id,
+                })
+              }
+            />
             <Button
               content="Preview"
-              onClick={() => act('preview', {
-                shuttle_id: selected.shuttle_id,
-              })} />
+              onClick={() =>
+                act('preview', {
+                  shuttle_id: selected.shuttle_id,
+                })
+              }
+            />
             <Button
               content="Replace"
               color="bad"
-              onClick={() => act('replace', {
-                shuttle_id: selected.shuttle_id,
-              })} />
+              onClick={() =>
+                act('replace', {
+                  shuttle_id: selected.shuttle_id,
+                })
+              }
+            />
           </Section>
         </>
-      ) : 'No shuttle selected'}
+      ) : (
+        'No shuttle selected'
+      )}
     </Section>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/Signaler.js b/tgui/packages/tgui/interfaces/Signaler.js
index 1eaf98683717..ac353a2d39ac 100644
--- a/tgui/packages/tgui/interfaces/Signaler.js
+++ b/tgui/packages/tgui/interfaces/Signaler.js
@@ -6,9 +6,7 @@ import { Window } from '../layouts';
 export const Signaler = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={280}
-      height={132}>
+    <Window width={280} height={132}>
       <Window.Content>
         <SignalerContent />
       </Window.Content>
@@ -18,12 +16,7 @@ export const Signaler = (props, context) => {
 
 export const SignalerContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    code,
-    frequency,
-    minFrequency,
-    maxFrequency,
-  } = data;
+  const { code, frequency, minFrequency, maxFrequency } = data;
   const color = 'rgba(13, 13, 213, 0.7)';
   const backColor = 'rgba(0, 0, 69, 0.5)';
   return (
@@ -41,20 +34,26 @@ export const SignalerContent = (props, context) => {
             minValue={minFrequency / 10}
             maxValue={maxFrequency / 10}
             value={frequency / 10}
-            format={value => toFixed(value, 1)}
+            format={(value) => toFixed(value, 1)}
             width="80px"
-            onDrag={(e, value) => act('freq', {
-              freq: value,
-            })} />
+            onDrag={(e, value) =>
+              act('freq', {
+                freq: value,
+              })
+            }
+          />
         </Grid.Column>
         <Grid.Column>
           <Button
             ml={1.3}
             icon="sync"
             content="Reset"
-            onClick={() => act('reset', {
-              reset: "freq",
-            })} />
+            onClick={() =>
+              act('reset', {
+                reset: 'freq',
+              })
+            }
+          />
         </Grid.Column>
       </Grid>
       <Grid mt={0.6}>
@@ -70,18 +69,24 @@ export const SignalerContent = (props, context) => {
             maxValue={100}
             value={code}
             width="80px"
-            onDrag={(e, value) => act('code', {
-              code: value,
-            })} />
+            onDrag={(e, value) =>
+              act('code', {
+                code: value,
+              })
+            }
+          />
         </Grid.Column>
         <Grid.Column>
           <Button
             ml={1.3}
             icon="sync"
             content="Reset"
-            onClick={() => act('reset', {
-              reset: "code",
-            })} />
+            onClick={() =>
+              act('reset', {
+                reset: 'code',
+              })
+            }
+          />
         </Grid.Column>
       </Grid>
       <Grid mt={0.8}>
@@ -92,7 +97,8 @@ export const SignalerContent = (props, context) => {
             icon="arrow-up"
             content="Send Signal"
             textAlign="center"
-            onClick={() => act('signal')} />
+            onClick={() => act('signal')}
+          />
         </Grid.Column>
       </Grid>
     </Section>
diff --git a/tgui/packages/tgui/interfaces/SimpleBot.tsx b/tgui/packages/tgui/interfaces/SimpleBot.tsx
index a750a7b511a4..240378c8f629 100644
--- a/tgui/packages/tgui/interfaces/SimpleBot.tsx
+++ b/tgui/packages/tgui/interfaces/SimpleBot.tsx
@@ -1,6 +1,15 @@
 import { multiline } from '../../common/string';
 import { useBackend } from '../backend';
-import { Button, Icon, LabeledControls, NoticeBox, Section, Slider, Stack, Tooltip } from '../components';
+import {
+  Button,
+  Icon,
+  LabeledControls,
+  NoticeBox,
+  Section,
+  Slider,
+  Stack,
+  Tooltip,
+} from '../components';
 import { Window } from '../layouts';
 
 type SimpleBotContext = {
@@ -32,7 +41,7 @@ type Controls = {
 export const SimpleBot = (_, context) => {
   const { data } = useBackend<SimpleBotContext>(context);
   const { can_hack, locked } = data;
-  const access = (!locked || can_hack);
+  const access = !locked || can_hack;
 
   return (
     <Window width={450} height={300}>
@@ -40,9 +49,7 @@ export const SimpleBot = (_, context) => {
         <Stack fill vertical>
           <Stack.Item>
             <Section title="Settings" buttons={<TabDisplay />}>
-              {!access
-                ? (<NoticeBox>Locked!</NoticeBox>)
-                : (<SettingsDisplay />)}
+              {!access ? <NoticeBox>Locked!</NoticeBox> : <SettingsDisplay />}
             </Section>
           </Stack.Item>
           {access && (
@@ -74,7 +81,8 @@ const TabDisplay = (_, context) => {
         icon={locked ? 'lock' : 'lock-open'}
         onClick={() => act('lock')}
         selected={locked}
-        tooltip={`${locked ? 'Unlock' : 'Lock'} the control panel.`}>
+        tooltip={`${locked ? 'Unlock' : 'Lock'} the control panel.`}
+      >
         Controls Lock
       </Button>
     </>
@@ -97,7 +105,8 @@ const HackButton = (_, context) => {
         !emagged
           ? 'Unlocks the safety protocols.'
           : 'Resets the bot operating system.'
-      }>
+      }
+    >
       {emagged ? 'Malfunctional' : 'Safety Lock'}
     </Button>
   );
@@ -113,7 +122,8 @@ const PaiButton = (_, context) => {
       <Button
         color="transparent"
         icon="robot"
-        tooltip={multiline`Insert an active PAI card to control this device.`}>
+        tooltip={multiline`Insert an active PAI card to control this device.`}
+      >
         No PAI Inserted
       </Button>
     );
@@ -123,7 +133,8 @@ const PaiButton = (_, context) => {
         disabled={!card_inserted}
         icon="eject"
         onClick={() => act('eject_pai')}
-        tooltip={multiline`Ejects the current PAI.`}>
+        tooltip={multiline`Ejects the current PAI.`}
+      >
         Eject PAI
       </Button>
     );
@@ -152,7 +163,8 @@ const SettingsDisplay = (_, context) => {
         <Tooltip
           content={`${
             !airplane_mode ? 'Disables' : 'Enables'
-          } remote access via console.`}>
+          } remote access via console.`}
+        >
           <Icon
             size={2}
             name="plane"
@@ -165,7 +177,8 @@ const SettingsDisplay = (_, context) => {
         <Tooltip
           content={`${
             patrol_station ? 'Disables' : 'Enables'
-          } automatic station patrol.`}>
+          } automatic station patrol.`}
+        >
           <Icon
             size={2}
             name="map-signs"
@@ -180,7 +193,8 @@ const SettingsDisplay = (_, context) => {
             maintenance_lock
               ? 'Opens the maintenance hatch for repairs.'
               : 'Closes the maintenance hatch.'
-          }>
+          }
+        >
           <Icon
             size={2}
             name="toolbox"
@@ -210,7 +224,9 @@ const ControlsDisplay = (_, context) => {
             label={control[0]
               .replace('_', ' ')
               .replace(/(^\w{1})|(\s+\w{1})/g, (letter) =>
-                letter.toUpperCase())}>
+                letter.toUpperCase(),
+              )}
+          >
             <ControlHelper control={control} />
           </LabeledControls.Item>
         );
@@ -255,7 +271,8 @@ const MedbotSync = (_, context) => {
   return (
     <Tooltip
       content={multiline`Synchronize surgical data with research network.
-       Improves Tending Efficiency.`}>
+       Improves Tending Efficiency.`}
+    >
       <Icon
         color="purple"
         name="cloud-download-alt"
@@ -300,7 +317,8 @@ const FloorbotTiles = (props, context) => {
       disabled={!control[1]}
       icon={control[1] ? 'eject' : ''}
       onClick={() => act('eject_tiles')}
-      tooltip="Number of floor tiles contained in the bot.">
+      tooltip="Number of floor tiles contained in the bot."
+    >
       {control[1] ? `${control[1]}` : 'Empty'}
     </Button>
   );
@@ -317,7 +335,8 @@ const FloorbotLine = (props, context) => {
         color={control[1] ? 'good' : 'gray'}
         name={control[1] ? 'compass' : 'toggle-off'}
         onClick={() => act('line_mode')}
-        size={!control[1] ? 2 : 1.5}>
+        size={!control[1] ? 2 : 1.5}
+      >
         {' '}
         {control[1] ? control[1].toString().charAt(0).toUpperCase() : ''}
       </Icon>
diff --git a/tgui/packages/tgui/interfaces/SkillPanel.js b/tgui/packages/tgui/interfaces/SkillPanel.js
index f2282de5c9ed..e4ff03f2c3fc 100644
--- a/tgui/packages/tgui/interfaces/SkillPanel.js
+++ b/tgui/packages/tgui/interfaces/SkillPanel.js
@@ -16,24 +16,15 @@ export const SkillPanel = (props, context) => {
   const { act, data } = useBackend(context);
   const skills = data.skills || [];
   return (
-    <Window
-      title="Manage Skills"
-      width={600}
-      height={500}>
+    <Window title="Manage Skills" width={600} height={500}>
       <Window.Content scrollable>
         <Section title={skills.playername}>
           <LabeledList>
-            {skills.map(skill => (
-              <LabeledList.Item
-                key={skill.name}
-                label={skill.name}>
-                <span style={skillyellow}>
-                  {skill.desc}
-                </span>
+            {skills.map((skill) => (
+              <LabeledList.Item key={skill.name} label={skill.name}>
+                <span style={skillyellow}>{skill.desc}</span>
                 <br />
-                <Level
-                  skill_lvl_num={skill.lvlnum}
-                  skill_lvl={skill.lvl} />
+                <Level skill_lvl_num={skill.lvlnum} skill_lvl={skill.lvl} />
                 <br />
                 Total Experience: [{skill.exp} XP]
                 <br />
@@ -43,31 +34,36 @@ export const SkillPanel = (props, context) => {
                     [{skill.exp_prog} / {skill.exp_req}]
                   </span>
                 ) : (
-                  <span style={skillgreen}>
-                    [MAXXED]
-                  </span>
+                  <span style={skillgreen}>[MAXXED]</span>
                 )}
                 <br />
                 Overall Skill Progress: [{skill.exp} / {skill.max_exp}]
-                <ProgressBar
-                  value={skill.exp_percent}
-                  color="good" />
+                <ProgressBar value={skill.exp_percent} color="good" />
                 <br />
                 <Button
                   content="Adjust Exp"
-                  onClick={() => act('adj_exp', {
-                    skill: skill.path,
-                  })} />
+                  onClick={() =>
+                    act('adj_exp', {
+                      skill: skill.path,
+                    })
+                  }
+                />
                 <Button
                   content="Set Exp"
-                  onClick={() => act('set_exp', {
-                    skill: skill.path,
-                  })} />
+                  onClick={() =>
+                    act('set_exp', {
+                      skill: skill.path,
+                    })
+                  }
+                />
                 <Button
                   content="Set Level"
-                  onClick={() => act('set_lvl', {
-                    skill: skill.path,
-                  })} />
+                  onClick={() =>
+                    act('set_lvl', {
+                      skill: skill.path,
+                    })
+                  }
+                />
                 <br />
                 <br />
               </LabeledList.Item>
@@ -79,18 +75,12 @@ export const SkillPanel = (props, context) => {
   );
 };
 
-const Level = props => {
-  const {
-    skill_lvl_num,
-    skill_lvl,
-  } = props;
+const Level = (props) => {
+  const { skill_lvl_num, skill_lvl } = props;
   return (
     <Box inline>
       Level: [
-      <Box
-        inline
-        bold
-        textColor={`hsl(${skill_lvl_num * 50}, 50%, 50%)`}>
+      <Box inline bold textColor={`hsl(${skill_lvl_num * 50}, 50%, 50%)`}>
         {skill_lvl}
       </Box>
       ]
diff --git a/tgui/packages/tgui/interfaces/SkillStation.js b/tgui/packages/tgui/interfaces/SkillStation.js
index c3ff64ed9714..24e84d0535e9 100644
--- a/tgui/packages/tgui/interfaces/SkillStation.js
+++ b/tgui/packages/tgui/interfaces/SkillStation.js
@@ -1,6 +1,16 @@
 import { toFixed } from 'common/math';
 import { useBackend } from '../backend';
-import { Box, Button, Flex, Icon, LabeledList, NoticeBox, Section, Stack, Table } from '../components';
+import {
+  Box,
+  Button,
+  Flex,
+  Icon,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Stack,
+  Table,
+} from '../components';
 import { Window } from '../layouts';
 
 export const InsertedSkillchip = (props, context) => {
@@ -21,14 +31,7 @@ export const InsertedSkillchip = (props, context) => {
   } = data;
 
   if (!skillchip_ready) {
-    return (
-      (!working && (
-        <NoticeBox
-          info>
-          Please insert a skillchip.
-        </NoticeBox>
-      ))
-    );
+    return !working && <NoticeBox info>Please insert a skillchip.</NoticeBox>;
   }
 
   return (
@@ -39,59 +42,45 @@ export const InsertedSkillchip = (props, context) => {
           <Button
             icon="syringe"
             disabled={!implantable || !!working}
-            color={implantable ? "good" : "default"}
-            onClick={() => act("implant")}
+            color={implantable ? 'good' : 'default'}
+            onClick={() => act('implant')}
             content="Implant"
-            tooltip={implantable_reason} />
+            tooltip={implantable_reason}
+          />
           <Button
             icon="eject"
             disabled={!!working}
-            onClick={() => act("eject")}
-            content="Eject" />
+            onClick={() => act('eject')}
+            content="Eject"
+          />
         </>
-      }>
+      }
+    >
       <Stack fill align="center">
         <Stack.Item>
           <Icon m={1} size={3} name={skill_icon} />
         </Stack.Item>
         <Stack.Item grow basis={0}>
           <LabeledList>
-            <LabeledList.Item
-              label="Skillchip">
-              <Box
-                bold>{skill_name}
-              </Box>
+            <LabeledList.Item label="Skillchip">
+              <Box bold>{skill_name}</Box>
             </LabeledList.Item>
-            <LabeledList.Item
-              label="Description">
-              <Box
-                italic>
-                {skill_desc}
-              </Box>
+            <LabeledList.Item label="Description">
+              <Box italic>{skill_desc}</Box>
             </LabeledList.Item>
-            <LabeledList.Item
-              label="Complexity">
-              <Icon
-                name="brain"
-                width="15px"
-                textAlign="center"
-              /> {complexity}
+            <LabeledList.Item label="Complexity">
+              <Icon name="brain" width="15px" textAlign="center" /> {complexity}
             </LabeledList.Item>
-            <LabeledList.Item
-              label="Slot Size">
-              <Box
-                color={(slots_used + slot_use > slots_max) && "red"}>
-                <Icon
-                  name="save"
-                  width="15px"
-                  textAlign="center"
-                /> {slot_use}
+            <LabeledList.Item label="Slot Size">
+              <Box color={slots_used + slot_use > slots_max && 'red'}>
+                <Icon name="save" width="15px" textAlign="center" /> {slot_use}
               </Box>
             </LabeledList.Item>
             {!!implantable_reason && (
               <LabeledList.Item
                 label="Error"
-                color={implantable ? "good" : "bad"}>
+                color={implantable ? 'good' : 'bad'}
+              >
                 {implantable_reason}
               </LabeledList.Item>
             )}
@@ -105,138 +94,128 @@ export const InsertedSkillchip = (props, context) => {
 export const ImplantedSkillchips = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const {
-    slots_used,
-    slots_max,
-    complexity_used,
-    complexity_max,
-    working,
-  } = data;
+  const { slots_used, slots_max, complexity_used, complexity_max, working } =
+    data;
 
   const current = data.current || [];
 
   return (
-    <Section
-      title="Implanted Skillchips">
-      {!current.length && "No skillchips detected."}
+    <Section title="Implanted Skillchips">
+      {!current.length && 'No skillchips detected.'}
       {!!current.length && (
         <Table>
-          <Table.Row
-            header>
-            <Table.Cell>
-              Chip
-            </Table.Cell>
-            <Table.Cell
-              textAlign="center">
+          <Table.Row header>
+            <Table.Cell>Chip</Table.Cell>
+            <Table.Cell textAlign="center">
               <Button
                 color="transparent"
                 icon="brain"
                 tooltip="Complexity"
                 tooltipPosition="top"
-                content={complexity_used + "/" + complexity_max} />
+                content={complexity_used + '/' + complexity_max}
+              />
             </Table.Cell>
-            <Table.Cell
-              textAlign="center">
+            <Table.Cell textAlign="center">
               <Button
                 color="transparent"
                 icon="save"
                 tooltip="Slot Size"
                 tooltipPosition="top"
-                content={slots_used + "/" + slots_max} />
+                content={slots_used + '/' + slots_max}
+              />
             </Table.Cell>
-            <Table.Cell
-              textAlign="center">
+            <Table.Cell textAlign="center">
               <Button
                 color="transparent"
                 icon="check"
                 tooltip="Is Active"
-                tooltipPosition="top" />
+                tooltipPosition="top"
+              />
             </Table.Cell>
-            <Table.Cell
-              textAlign="center">
+            <Table.Cell textAlign="center">
               <Button
                 color="transparent"
                 icon="hourglass-half"
                 tooltip="Cooldown"
-                tooltipPosition="top" />
+                tooltipPosition="top"
+              />
             </Table.Cell>
-            <Table.Cell
-              textAlign="center">
+            <Table.Cell textAlign="center">
               <Button
                 color="transparent"
                 icon="tasks"
                 tooltip="Actions"
-                tooltipPosition="top" />
+                tooltipPosition="top"
+              />
             </Table.Cell>
           </Table.Row>
-          {current.map(skill => (
-            <Table.Row
-              key={skill.ref}>
+          {current.map((skill) => (
+            <Table.Row key={skill.ref}>
               <Table.Cell>
                 <Icon
                   textAlign="center"
                   width="18px"
                   mr={1}
-                  name={skill.icon} />
+                  name={skill.icon}
+                />
                 {skill.name}
               </Table.Cell>
               <Table.Cell
                 bold
-                color={(!!skill.active && "good"
-                ) || (
-                  (skill.complexity + complexity_used > complexity_max) && "bad"
-                ) || (
-                  "grey"
-                )}
-                textAlign="center">
+                color={
+                  (!!skill.active && 'good') ||
+                  (skill.complexity + complexity_used > complexity_max &&
+                    'bad') ||
+                  'grey'
+                }
+                textAlign="center"
+              >
                 {skill.complexity}
               </Table.Cell>
-              <Table.Cell
-                bold
-                color="good"
-                textAlign="center">
+              <Table.Cell bold color="good" textAlign="center">
                 {skill.slot_use}
               </Table.Cell>
-              <Table.Cell
-                textAlign="center">
+              <Table.Cell textAlign="center">
                 <Icon
-                  name={skill.active ? "check" : "times"}
-                  color={skill.active ? "good" : "bad"} />
+                  name={skill.active ? 'check' : 'times'}
+                  color={skill.active ? 'good' : 'bad'}
+                />
               </Table.Cell>
-              <Table.Cell
-                textAlign="center">
-                {(skill.cooldown > 0) && (
-                  Math.ceil(skill.cooldown / 10) + "s"
-                ) || ("0s")}
+              <Table.Cell textAlign="center">
+                {(skill.cooldown > 0 && Math.ceil(skill.cooldown / 10) + 's') ||
+                  '0s'}
               </Table.Cell>
-              <Table.Cell
-                textAlign="center">
+              <Table.Cell textAlign="center">
                 <Button
-                  onClick={() => act("remove", { "ref": skill.ref })}
-                  icon={skill.removable ? "eject" : "trash"}
-                  color={skill.removable ? "good" : "bad"}
-                  tooltip={skill.removable ? "Extract" : "Destroy"}
+                  onClick={() => act('remove', { ref: skill.ref })}
+                  icon={skill.removable ? 'eject' : 'trash'}
+                  color={skill.removable ? 'good' : 'bad'}
+                  tooltip={skill.removable ? 'Extract' : 'Destroy'}
                   tooltipPosition="left"
-                  disabled={skill.cooldown || working} />
+                  disabled={skill.cooldown || working}
+                />
                 <Button
-                  onClick={() => act("toggle_activate", { "ref": skill.ref })}
-                  icon={skill.active ? "check-square-o" : "square-o"}
-                  color={skill.active ? "good" : "default"}
-                  tooltip={(!!skill.active_error
-                    && !skill.active
-                    && skill.active_error) || (
-                    skill.active && "Deactivate") || (
-                    "Activate"
-                  )}
+                  onClick={() => act('toggle_activate', { ref: skill.ref })}
+                  icon={skill.active ? 'check-square-o' : 'square-o'}
+                  color={skill.active ? 'good' : 'default'}
+                  tooltip={
+                    (!!skill.active_error &&
+                      !skill.active &&
+                      skill.active_error) ||
+                    (skill.active && 'Deactivate') ||
+                    'Activate'
+                  }
                   tooltipPosition="left"
                   disabled={
-                    skill.cooldown
-                    || working
-                    || (!skill.active
-                      && (skill.complexity + complexity_used > complexity_max))
-                  } />
+                    skill.cooldown ||
+                    working ||
+                    (!skill.active &&
+                      skill.complexity + complexity_used > complexity_max)
+                  }
+                />
               </Table.Cell>
-            </Table.Row>))}
+            </Table.Row>
+          ))}
         </Table>
       )}
     </Section>
@@ -246,38 +225,30 @@ export const ImplantedSkillchips = (props, context) => {
 export const TimeFormat = (props, context) => {
   const { value } = props;
 
-  const seconds = toFixed(Math.floor((value/10) % 60)).padStart(2, "0");
-  const minutes = toFixed(Math.floor((value/(10*60)) % 60)).padStart(2, "0");
-  const hours = toFixed(Math.floor((value/(10*60*60)) % 24)).padStart(2, "0");
+  const seconds = toFixed(Math.floor((value / 10) % 60)).padStart(2, '0');
+  const minutes = toFixed(Math.floor((value / (10 * 60)) % 60)).padStart(
+    2,
+    '0',
+  );
+  const hours = toFixed(Math.floor((value / (10 * 60 * 60)) % 24)).padStart(
+    2,
+    '0',
+  );
   const formattedValue = `${hours}:${minutes}:${seconds}`;
   return formattedValue;
 };
 
 export const SkillStation = (props, context) => {
   const { data } = useBackend(context);
-  const {
-    working,
-    timeleft,
-    error,
-  } = data;
+  const { working, timeleft, error } = data;
   return (
-    <Window
-      title="Skillsoft Station"
-      width={500}
-      height={500}>
+    <Window title="Skillsoft Station" width={500} height={500}>
       <Window.Content>
-        {!!error && (
-          <NoticeBox>
-            {error}
-          </NoticeBox>
-        )}
+        {!!error && <NoticeBox>{error}</NoticeBox>}
         {!!working && (
-          <NoticeBox
-            danger>
-            <Flex
-              direction="column">
-              <Flex.Item
-                mb={0.5}>
+          <NoticeBox danger>
+            <Flex direction="column">
+              <Flex.Item mb={0.5}>
                 Operation in progress. Please do not leave the chamber.
               </Flex.Item>
               <Flex.Item>
diff --git a/tgui/packages/tgui/interfaces/Sleeper.js b/tgui/packages/tgui/interfaces/Sleeper.js
index 9264825eedd6..b790f8452240 100644
--- a/tgui/packages/tgui/interfaces/Sleeper.js
+++ b/tgui/packages/tgui/interfaces/Sleeper.js
@@ -23,11 +23,7 @@ const damageTypes = [
 
 export const Sleeper = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    open,
-    occupant = {},
-    occupied,
-  } = data;
+  const { open, occupant = {}, occupied } = data;
   const preSortChems = data.chems || [];
   const chems = preSortChems.sort((a, b) => {
     const descA = a.name.toLowerCase();
@@ -41,21 +37,19 @@ export const Sleeper = (props, context) => {
     return 0;
   });
   return (
-    <Window
-      width={310}
-      height={465}>
+    <Window width={310} height={465}>
       <Window.Content>
         <Section
           title={occupant.name ? occupant.name : 'No Occupant'}
           minHeight="210px"
-          buttons={!!occupant.stat && (
-            <Box
-              inline
-              bold
-              color={occupant.statstate}>
-              {occupant.stat}
-            </Box>
-          )}>
+          buttons={
+            !!occupant.stat && (
+              <Box inline bold color={occupant.statstate}>
+                {occupant.stat}
+              </Box>
+            )
+          }
+        >
           {!!occupied && (
             <>
               <ProgressBar
@@ -66,28 +60,30 @@ export const Sleeper = (props, context) => {
                   good: [50, Infinity],
                   average: [0, 50],
                   bad: [-Infinity, 0],
-                }} />
+                }}
+              />
               <Box mt={1} />
               <LabeledList>
-                {damageTypes.map(type => (
-                  <LabeledList.Item
-                    key={type.type}
-                    label={type.label}>
+                {damageTypes.map((type) => (
+                  <LabeledList.Item key={type.type} label={type.label}>
                     <ProgressBar
                       value={occupant[type.type]}
                       minValue={0}
                       maxValue={occupant.maxHealth}
-                      color="bad" />
+                      color="bad"
+                    />
                   </LabeledList.Item>
                 ))}
                 <LabeledList.Item
                   label="Cells"
-                  color={occupant.cloneLoss ? 'bad' : 'good'}>
+                  color={occupant.cloneLoss ? 'bad' : 'good'}
+                >
                   {occupant.cloneLoss ? 'Damaged' : 'Healthy'}
                 </LabeledList.Item>
                 <LabeledList.Item
                   label="Brain"
-                  color={occupant.brainLoss ? 'bad' : 'good'}>
+                  color={occupant.brainLoss ? 'bad' : 'good'}
+                >
                   {occupant.brainLoss ? 'Abnormal' : 'Healthy'}
                 </LabeledList.Item>
               </LabeledList>
@@ -97,22 +93,27 @@ export const Sleeper = (props, context) => {
         <Section
           title="Medicines"
           minHeight="205px"
-          buttons={(
+          buttons={
             <Button
               icon={open ? 'door-open' : 'door-closed'}
               content={open ? 'Open' : 'Closed'}
-              onClick={() => act('door')} />
-          )}>
-          {chems.map(chem => (
+              onClick={() => act('door')}
+            />
+          }
+        >
+          {chems.map((chem) => (
             <Button
               key={chem.name}
               icon="flask"
               content={chem.name}
               disabled={!occupied || !chem.allowed}
               width="140px"
-              onClick={() => act('inject', {
-                chem: chem.id,
-              })} />
+              onClick={() =>
+                act('inject', {
+                  chem: chem.id,
+                })
+              }
+            />
           ))}
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/SlimeBodySwapper.js b/tgui/packages/tgui/interfaces/SlimeBodySwapper.js
index 723631d7f1b8..1c4faaf35bef 100644
--- a/tgui/packages/tgui/interfaces/SlimeBodySwapper.js
+++ b/tgui/packages/tgui/interfaces/SlimeBodySwapper.js
@@ -3,48 +3,42 @@ import { Section, LabeledList, Button, Box } from '../components';
 import { Window } from '../layouts';
 
 const statusMap = {
-  Dead: "bad",
-  Unconscious: "average",
-  Conscious: "good",
+  Dead: 'bad',
+  Unconscious: 'average',
+  Conscious: 'good',
 };
 
 const occupiedMap = {
-  owner: "You Are Here",
-  stranger: "Occupied",
-  available: "Swap",
+  owner: 'You Are Here',
+  stranger: 'Occupied',
+  available: 'Swap',
 };
 
 export const BodyEntry = (props, context) => {
   const { body, swapFunc } = props;
   return (
     <Section
-      title={(
+      title={
         <Box inline color={body.htmlcolor}>
           {body.name}
         </Box>
-      )}
+      }
       level={2}
-      buttons={(
+      buttons={
         <Button
           content={occupiedMap[body.occupied]}
           selected={body.occupied === 'owner'}
-          color={(body.occupied === 'stranger') && 'bad'}
+          color={body.occupied === 'stranger' && 'bad'}
           onClick={() => swapFunc()}
         />
-      )}>
+      }
+    >
       <LabeledList>
-        <LabeledList.Item
-          label="Status"
-          bold
-          color={statusMap[body.status]}>
+        <LabeledList.Item label="Status" bold color={statusMap[body.status]}>
           {body.status}
         </LabeledList.Item>
-        <LabeledList.Item label="Jelly">
-          {body.exoticblood}
-        </LabeledList.Item>
-        <LabeledList.Item label="Location">
-          {body.area}
-        </LabeledList.Item>
+        <LabeledList.Item label="Jelly">{body.exoticblood}</LabeledList.Item>
+        <LabeledList.Item label="Location">{body.area}</LabeledList.Item>
       </LabeledList>
     </Section>
   );
@@ -52,20 +46,17 @@ export const BodyEntry = (props, context) => {
 
 export const SlimeBodySwapper = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    bodies = [],
-  } = data;
+  const { bodies = [] } = data;
   return (
-    <Window
-      width={400}
-      height={400}>
+    <Window width={400} height={400}>
       <Window.Content scrollable>
         <Section>
-          {bodies.map(body => (
+          {bodies.map((body) => (
             <BodyEntry
               key={body.name}
               body={body}
-              swapFunc={() => act('swap', { ref: body.ref })} />
+              swapFunc={() => act('swap', { ref: body.ref })}
+            />
           ))}
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/SmartVend.js b/tgui/packages/tgui/interfaces/SmartVend.js
index 1ae57e2a1ce5..10c4e5da0245 100644
--- a/tgui/packages/tgui/interfaces/SmartVend.js
+++ b/tgui/packages/tgui/interfaces/SmartVend.js
@@ -6,29 +6,27 @@ import { Window } from '../layouts';
 export const SmartVend = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={440}
-      height={550}>
+    <Window width={440} height={550}>
       <Window.Content scrollable>
         <Section
           title="Storage"
-          buttons={!!data.isdryer && (
-            <Button
-              icon={data.drying ? 'stop' : 'tint'}
-              onClick={() => act('Dry')}>
-              {data.drying ? 'Stop drying' : 'Dry'}
-            </Button>
-          )}>
-          {data.contents.length === 0 && (
-            <NoticeBox>
-              Unfortunately, this {data.name} is empty.
-            </NoticeBox>
-          ) || (
+          buttons={
+            !!data.isdryer && (
+              <Button
+                icon={data.drying ? 'stop' : 'tint'}
+                onClick={() => act('Dry')}
+              >
+                {data.drying ? 'Stop drying' : 'Dry'}
+              </Button>
+            )
+          }
+        >
+          {(data.contents.length === 0 && (
+            <NoticeBox>Unfortunately, this {data.name} is empty.</NoticeBox>
+          )) || (
             <Table>
               <Table.Row header>
-                <Table.Cell>
-                  Item
-                </Table.Cell>
+                <Table.Cell>Item</Table.Cell>
                 <Table.Cell collapsing />
                 <Table.Cell collapsing textAlign="center">
                   {data.verb ? data.verb : 'Dispense'}
@@ -36,9 +34,7 @@ export const SmartVend = (props, context) => {
               </Table.Row>
               {map((value, key) => (
                 <Table.Row key={key}>
-                  <Table.Cell>
-                    {value.name}
-                  </Table.Cell>
+                  <Table.Cell>{value.name}</Table.Cell>
                   <Table.Cell collapsing textAlign="right">
                     {value.amount}
                   </Table.Cell>
@@ -46,16 +42,22 @@ export const SmartVend = (props, context) => {
                     <Button
                       content="One"
                       disabled={value.amount < 1}
-                      onClick={() => act('Release', {
-                        name: value.name,
-                        amount: 1,
-                      })} />
+                      onClick={() =>
+                        act('Release', {
+                          name: value.name,
+                          amount: 1,
+                        })
+                      }
+                    />
                     <Button
                       content="Many"
                       disabled={value.amount <= 1}
-                      onClick={() => act('Release', {
-                        name: value.name,
-                      })} />
+                      onClick={() =>
+                        act('Release', {
+                          name: value.name,
+                        })
+                      }
+                    />
                   </Table.Cell>
                 </Table.Row>
               ))(data.contents)}
diff --git a/tgui/packages/tgui/interfaces/Smes.js b/tgui/packages/tgui/interfaces/Smes.js
index f64b19c393a7..a3bdec09298e 100644
--- a/tgui/packages/tgui/interfaces/Smes.js
+++ b/tgui/packages/tgui/interfaces/Smes.js
@@ -1,5 +1,13 @@
 import { useBackend } from '../backend';
-import { Box, Button, Flex, LabeledList, ProgressBar, Section, Slider } from '../components';
+import {
+  Box,
+  Button,
+  Flex,
+  LabeledList,
+  ProgressBar,
+  Section,
+  Slider,
+} from '../components';
 import { formatPower } from '../format';
 import { Window } from '../layouts';
 
@@ -23,20 +31,12 @@ export const Smes = (props, context) => {
     outputLevelMax,
     outputUsed,
   } = data;
-  const inputState = (
-    capacityPercent >= 100 && 'good'
-    || inputting && 'average'
-    || 'bad'
-  );
-  const outputState = (
-    outputting && 'good'
-    || charge > 0 && 'average'
-    || 'bad'
-  );
+  const inputState =
+    (capacityPercent >= 100 && 'good') || (inputting && 'average') || 'bad';
+  const outputState =
+    (outputting && 'good') || (charge > 0 && 'average') || 'bad';
   return (
-    <Window
-      width={340}
-      height={350}>
+    <Window width={340} height={350}>
       <Window.Content>
         <Section title="Stored Energy">
           <ProgressBar
@@ -45,7 +45,8 @@ export const Smes = (props, context) => {
               good: [0.5, Infinity],
               average: [0.15, 0.5],
               bad: [-Infinity, 0.15],
-            }} />
+            }}
+          />
         </Section>
         <Section title="Input">
           <LabeledList>
@@ -55,14 +56,16 @@ export const Smes = (props, context) => {
                 <Button
                   icon={inputAttempt ? 'sync-alt' : 'times'}
                   selected={inputAttempt}
-                  onClick={() => act('tryinput')}>
+                  onClick={() => act('tryinput')}
+                >
                   {inputAttempt ? 'Auto' : 'Off'}
                 </Button>
-              }>
+              }
+            >
               <Box color={inputState}>
-                {capacityPercent >= 100 && 'Fully Charged'
-                  || inputting && 'Charging'
-                  || 'Not Charging'}
+                {(capacityPercent >= 100 && 'Fully Charged') ||
+                  (inputting && 'Charging') ||
+                  'Not Charging'}
               </Box>
             </LabeledList.Item>
             <LabeledList.Item label="Target Input">
@@ -71,15 +74,21 @@ export const Smes = (props, context) => {
                   <Button
                     icon="fast-backward"
                     disabled={inputLevel === 0}
-                    onClick={() => act('input', {
-                      target: 'min',
-                    })} />
+                    onClick={() =>
+                      act('input', {
+                        target: 'min',
+                      })
+                    }
+                  />
                   <Button
                     icon="backward"
                     disabled={inputLevel === 0}
-                    onClick={() => act('input', {
-                      adjust: -10000,
-                    })} />
+                    onClick={() =>
+                      act('input', {
+                        adjust: -10000,
+                      })
+                    }
+                  />
                 </Flex.Item>
                 <Flex.Item grow={1} mx={1}>
                   <Slider
@@ -89,24 +98,33 @@ export const Smes = (props, context) => {
                     maxValue={inputLevelMax / POWER_MUL}
                     step={5}
                     stepPixelSize={4}
-                    format={value => formatPower(value * POWER_MUL, 1)}
-                    onDrag={(e, value) => act('input', {
-                      target: value * POWER_MUL,
-                    })} />
+                    format={(value) => formatPower(value * POWER_MUL, 1)}
+                    onDrag={(e, value) =>
+                      act('input', {
+                        target: value * POWER_MUL,
+                      })
+                    }
+                  />
                 </Flex.Item>
                 <Flex.Item>
                   <Button
                     icon="forward"
                     disabled={inputLevel === inputLevelMax}
-                    onClick={() => act('input', {
-                      adjust: 10000,
-                    })} />
+                    onClick={() =>
+                      act('input', {
+                        adjust: 10000,
+                      })
+                    }
+                  />
                   <Button
                     icon="fast-forward"
                     disabled={inputLevel === inputLevelMax}
-                    onClick={() => act('input', {
-                      target: 'max',
-                    })} />
+                    onClick={() =>
+                      act('input', {
+                        target: 'max',
+                      })
+                    }
+                  />
                 </Flex.Item>
               </Flex>
             </LabeledList.Item>
@@ -123,10 +141,12 @@ export const Smes = (props, context) => {
                 <Button
                   icon={outputAttempt ? 'power-off' : 'times'}
                   selected={outputAttempt}
-                  onClick={() => act('tryoutput')}>
+                  onClick={() => act('tryoutput')}
+                >
                   {outputAttempt ? 'On' : 'Off'}
                 </Button>
-              }>
+              }
+            >
               <Box color={outputState}>
                 {outputting
                   ? 'Sending'
@@ -141,15 +161,21 @@ export const Smes = (props, context) => {
                   <Button
                     icon="fast-backward"
                     disabled={outputLevel === 0}
-                    onClick={() => act('output', {
-                      target: 'min',
-                    })} />
+                    onClick={() =>
+                      act('output', {
+                        target: 'min',
+                      })
+                    }
+                  />
                   <Button
                     icon="backward"
                     disabled={outputLevel === 0}
-                    onClick={() => act('output', {
-                      adjust: -10000,
-                    })} />
+                    onClick={() =>
+                      act('output', {
+                        adjust: -10000,
+                      })
+                    }
+                  />
                 </Flex.Item>
                 <Flex.Item grow={1} mx={1}>
                   <Slider
@@ -158,24 +184,33 @@ export const Smes = (props, context) => {
                     maxValue={outputLevelMax / POWER_MUL}
                     step={5}
                     stepPixelSize={4}
-                    format={value => formatPower(value * POWER_MUL, 1)}
-                    onDrag={(e, value) => act('output', {
-                      target: value * POWER_MUL,
-                    })} />
+                    format={(value) => formatPower(value * POWER_MUL, 1)}
+                    onDrag={(e, value) =>
+                      act('output', {
+                        target: value * POWER_MUL,
+                      })
+                    }
+                  />
                 </Flex.Item>
                 <Flex.Item>
                   <Button
                     icon="forward"
                     disabled={outputLevel === outputLevelMax}
-                    onClick={() => act('output', {
-                      adjust: 10000,
-                    })} />
+                    onClick={() =>
+                      act('output', {
+                        adjust: 10000,
+                      })
+                    }
+                  />
                   <Button
                     icon="fast-forward"
                     disabled={outputLevel === outputLevelMax}
-                    onClick={() => act('output', {
-                      target: 'max',
-                    })} />
+                    onClick={() =>
+                      act('output', {
+                        target: 'max',
+                      })
+                    }
+                  />
                 </Flex.Item>
               </Flex>
             </LabeledList.Item>
diff --git a/tgui/packages/tgui/interfaces/SmokeMachine.js b/tgui/packages/tgui/interfaces/SmokeMachine.js
index f4181deeb25b..4f13b2613a95 100644
--- a/tgui/packages/tgui/interfaces/SmokeMachine.js
+++ b/tgui/packages/tgui/interfaces/SmokeMachine.js
@@ -1,5 +1,12 @@
 import { useBackend } from '../backend';
-import { AnimatedNumber, Box, Button, LabeledList, ProgressBar, Section } from '../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  LabeledList,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const SmokeMachine = (props, context) => {
@@ -15,58 +22,55 @@ export const SmokeMachine = (props, context) => {
     maxSetting = [],
   } = data;
   return (
-    <Window
-      width={350}
-      height={350}>
+    <Window width={350} height={350}>
       <Window.Content>
-        <Section title="Dispersal Tank"
-          buttons={(
+        <Section
+          title="Dispersal Tank"
+          buttons={
             <Button
               icon={active ? 'power-off' : 'times'}
               selected={active}
               content={active ? 'On' : 'Off'}
-              onClick={() => act('power')} />
-          )}>
+              onClick={() => act('power')}
+            />
+          }
+        >
           <ProgressBar
             value={TankCurrentVolume / TankMaxVolume}
             ranges={{
               bad: [-Infinity, 0.3],
-            }}>
+            }}
+          >
             <AnimatedNumber initial={0} value={TankCurrentVolume || 0} />
             {' / ' + TankMaxVolume}
           </ProgressBar>
           <Box mt={1}>
             <LabeledList>
               <LabeledList.Item label="Range">
-                {[1, 2, 3, 4, 5].map(amount => (
+                {[1, 2, 3, 4, 5].map((amount) => (
                   <Button
                     key={amount}
                     selected={setting === amount}
                     icon="plus"
                     content={amount * 3}
                     disabled={maxSetting < amount}
-                    onClick={() => act('setting', { amount })} />
+                    onClick={() => act('setting', { amount })}
+                  />
                 ))}
               </LabeledList.Item>
             </LabeledList>
           </Box>
         </Section>
-        <Section title="Contents"
-          buttons={(
-            <Button
-              icon="trash"
-              content="Purge"
-              onClick={() => act('purge')} />
-          )}>
-          {TankContents.map(chemical => (
-            <Box
-              key={chemical.name}
-              color="label">
-              <AnimatedNumber
-                initial={0}
-                value={chemical.volume} />
-              {' '}
-              units of {chemical.name}
+        <Section
+          title="Contents"
+          buttons={
+            <Button icon="trash" content="Purge" onClick={() => act('purge')} />
+          }
+        >
+          {TankContents.map((chemical) => (
+            <Box key={chemical.name} color="label">
+              <AnimatedNumber initial={0} value={chemical.volume} /> units of{' '}
+              {chemical.name}
             </Box>
           ))}
         </Section>
diff --git a/tgui/packages/tgui/interfaces/SolarControl.js b/tgui/packages/tgui/interfaces/SolarControl.js
index 4490600d97da..87b11ffbe487 100644
--- a/tgui/packages/tgui/interfaces/SolarControl.js
+++ b/tgui/packages/tgui/interfaces/SolarControl.js
@@ -1,5 +1,13 @@
 import { useBackend } from '../backend';
-import { Box, Button, Grid, LabeledList, NumberInput, ProgressBar, Section } from '../components';
+import {
+  Box,
+  Button,
+  Grid,
+  LabeledList,
+  NumberInput,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const SolarControl = (props, context) => {
@@ -15,29 +23,31 @@ export const SolarControl = (props, context) => {
     connected_tracker,
   } = data;
   return (
-    <Window
-      width={380}
-      height={230}>
+    <Window width={380} height={230}>
       <Window.Content>
         <Section
           title="Status"
-          buttons={(
+          buttons={
             <Button
               icon="sync"
               content="Scan for new hardware"
-              onClick={() => act('refresh')} />
-          )}>
+              onClick={() => act('refresh')}
+            />
+          }
+        >
           <Grid>
             <Grid.Column>
               <LabeledList>
                 <LabeledList.Item
                   label="Solar tracker"
-                  color={connected_tracker ? 'good' : 'bad'}>
+                  color={connected_tracker ? 'good' : 'bad'}
+                >
                   {connected_tracker ? 'OK' : 'N/A'}
                 </LabeledList.Item>
                 <LabeledList.Item
                   label="Solar panels"
-                  color={connected_panels > 0 ? 'good' : 'bad'}>
+                  color={connected_panels > 0 ? 'good' : 'bad'}
+                >
                   {connected_panels}
                 </LabeledList.Item>
               </LabeledList>
@@ -53,7 +63,8 @@ export const SolarControl = (props, context) => {
                     }}
                     minValue={0}
                     maxValue={1}
-                    value={generated_ratio}>
+                    value={generated_ratio}
+                  >
                     {generated + ' W'}
                   </ProgressBar>
                 </LabeledList.Item>
@@ -68,18 +79,21 @@ export const SolarControl = (props, context) => {
                 icon="times"
                 content="Off"
                 selected={tracking_state === 0}
-                onClick={() => act('tracking', { mode: 0 })} />
+                onClick={() => act('tracking', { mode: 0 })}
+              />
               <Button
                 icon="clock-o"
                 content="Timed"
                 selected={tracking_state === 1}
-                onClick={() => act('tracking', { mode: 1 })} />
+                onClick={() => act('tracking', { mode: 1 })}
+              />
               <Button
                 icon="sync"
                 content="Auto"
                 selected={tracking_state === 2}
                 disabled={!connected_tracker}
-                onClick={() => act('tracking', { mode: 2 })} />
+                onClick={() => act('tracking', { mode: 2 })}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Azimuth">
               {(tracking_state === 0 || tracking_state === 1) && (
@@ -91,7 +105,8 @@ export const SolarControl = (props, context) => {
                   minValue={-360}
                   maxValue={+720}
                   value={azimuth_current}
-                  onDrag={(e, value) => act('azimuth', { value })} />
+                  onDrag={(e, value) => act('azimuth', { value })}
+                />
               )}
               {tracking_state === 1 && (
                 <NumberInput
@@ -99,14 +114,15 @@ export const SolarControl = (props, context) => {
                   unit="°/m"
                   step={0.01}
                   stepPixelSize={1}
-                  minValue={-max_rotation_rate-0.01}
-                  maxValue={max_rotation_rate+0.01}
+                  minValue={-max_rotation_rate - 0.01}
+                  maxValue={max_rotation_rate + 0.01}
                   value={azimuth_rate}
-                  format={rate => {
+                  format={(rate) => {
                     const sign = Math.sign(rate) > 0 ? '+' : '-';
                     return sign + Math.abs(rate);
                   }}
-                  onDrag={(e, value) => act('azimuth_rate', { value })} />
+                  onDrag={(e, value) => act('azimuth_rate', { value })}
+                />
               )}
               {tracking_state === 2 && (
                 <Box inline color="label" mt="3px">
diff --git a/tgui/packages/tgui/interfaces/SpaceHeater.js b/tgui/packages/tgui/interfaces/SpaceHeater.js
index b71370998dd3..66040ced9024 100644
--- a/tgui/packages/tgui/interfaces/SpaceHeater.js
+++ b/tgui/packages/tgui/interfaces/SpaceHeater.js
@@ -1,53 +1,62 @@
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, NumberInput, ProgressBar, Section } from '../components';
+import {
+  Box,
+  Button,
+  LabeledList,
+  NumberInput,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const SpaceHeater = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={400}
-      height={305}>
+    <Window width={400} height={305}>
       <Window.Content>
         <Section
           title="Power"
-          buttons={(
+          buttons={
             <>
               {!!data.chemHacked && (
                 <Button
                   icon="eject"
                   content="Eject beaker"
                   disabled={!data.beaker}
-                  onClick={() => act('ejectBeaker')} />
+                  onClick={() => act('ejectBeaker')}
+                />
               )}
               <Button
                 icon="eject"
                 content="Eject Cell"
                 disabled={!data.hasPowercell || !data.open}
-                onClick={() => act('eject')} />
+                onClick={() => act('eject')}
+              />
               <Button
                 icon={data.on ? 'power-off' : 'times'}
                 content={data.on ? 'On' : 'Off'}
                 selected={data.on}
                 disabled={!data.hasPowercell}
-                onClick={() => act('power')} />
+                onClick={() => act('power')}
+              />
             </>
-          )}>
+          }
+        >
           <LabeledList>
-            <LabeledList.Item
-              label="Cell"
-              color={!data.hasPowercell && 'bad'}>
-              {data.hasPowercell && (
+            <LabeledList.Item label="Cell" color={!data.hasPowercell && 'bad'}>
+              {(data.hasPowercell && (
                 <ProgressBar
                   value={data.powerLevel / 100}
                   ranges={{
                     good: [0.6, Infinity],
                     average: [0.3, 0.6],
                     bad: [-Infinity, 0.3],
-                  }}>
+                  }}
+                >
                   {data.powerLevel + '%'}
                 </ProgressBar>
-              ) || 'None'}
+              )) ||
+                'None'}
             </LabeledList.Item>
           </LabeledList>
         </Section>
@@ -56,16 +65,19 @@ export const SpaceHeater = (props, context) => {
             <LabeledList.Item label="Current Temperature">
               <Box
                 fontSize="18px"
-                color={Math.abs(data.targetTemp - data.currentTemp) > 50
-                  ? 'bad'
-                  : Math.abs(data.targetTemp - data.currentTemp) > 20
-                    ? 'average'
-                    : 'good'}>
+                color={
+                  Math.abs(data.targetTemp - data.currentTemp) > 50
+                    ? 'bad'
+                    : Math.abs(data.targetTemp - data.currentTemp) > 20
+                      ? 'average'
+                      : 'good'
+                }
+              >
                 {data.currentTemp}°C
               </Box>
             </LabeledList.Item>
             <LabeledList.Item label="Target Temperature">
-              {data.open && (
+              {(data.open && (
                 <NumberInput
                   animated
                   value={parseFloat(data.targetTemp)}
@@ -73,37 +85,48 @@ export const SpaceHeater = (props, context) => {
                   unit="°C"
                   minValue={data.minTemp}
                   maxValue={data.maxTemp}
-                  onChange={(e, value) => act('target', {
-                    target: value,
-                  })} />
-              ) || (
-                data.targetTemp + '°C'
-              )}
+                  onChange={(e, value) =>
+                    act('target', {
+                      target: value,
+                    })
+                  }
+                />
+              )) ||
+                data.targetTemp + '°C'}
             </LabeledList.Item>
             <LabeledList.Item label="Mode">
-              {!data.open && 'Auto' || (
+              {(!data.open && 'Auto') || (
                 <>
                   <Button
                     icon="thermometer-half"
                     content="Auto"
                     selected={data.mode === 'auto'}
-                    onClick={() => act('mode', {
-                      mode: "auto",
-                    })} />
+                    onClick={() =>
+                      act('mode', {
+                        mode: 'auto',
+                      })
+                    }
+                  />
                   <Button
                     icon="fire-alt"
                     content="Heat"
                     selected={data.mode === 'heat'}
-                    onClick={() => act('mode', {
-                      mode: "heat",
-                    })} />
+                    onClick={() =>
+                      act('mode', {
+                        mode: 'heat',
+                      })
+                    }
+                  />
                   <Button
                     icon="fan"
                     content="Cool"
                     selected={data.mode === 'cool'}
-                    onClick={() => act('mode', {
-                      mode: 'cool',
-                    })} />
+                    onClick={() =>
+                      act('mode', {
+                        mode: 'cool',
+                      })
+                    }
+                  />
                 </>
               )}
             </LabeledList.Item>
diff --git a/tgui/packages/tgui/interfaces/SparringContract.tsx b/tgui/packages/tgui/interfaces/SparringContract.tsx
index 4d867f54a062..0198888d4039 100644
--- a/tgui/packages/tgui/interfaces/SparringContract.tsx
+++ b/tgui/packages/tgui/interfaces/SparringContract.tsx
@@ -8,30 +8,25 @@ import { Window } from '../layouts';
 const STAKES_HOLY_MATCH = 1;
 
 const weaponlist = [
-  "Fist Fight",
-  "Ceremonial Weapons",
-  "Melee Only",
-  "Any Weapons",
+  'Fist Fight',
+  'Ceremonial Weapons',
+  'Melee Only',
+  'Any Weapons',
 ];
 
-const stakelist = [
-  "No Stakes",
-  "Holy Match",
-  "Money Match",
-  "Your Soul",
-];
+const stakelist = ['No Stakes', 'Holy Match', 'Money Match', 'Your Soul'];
 
 const weaponblurb = [
-  "You will fight with your fists only. Any weapons will be considered a violation.",
-  "You can only fight with ceremonial weapons. You will be at a severe disadvantage without one!",
-  "You can fight with weapons, or fists if you have none. Ranged weapons are a violation.",
-  "You can fight with any and all weapons as you please. Try not to kill them, okay?",
+  'You will fight with your fists only. Any weapons will be considered a violation.',
+  'You can only fight with ceremonial weapons. You will be at a severe disadvantage without one!',
+  'You can fight with weapons, or fists if you have none. Ranged weapons are a violation.',
+  'You can fight with any and all weapons as you please. Try not to kill them, okay?',
 ];
 
 const stakesblurb = [
   "No stakes, just for fun. Who doesn't love some recreational sparring?",
   "A match for the chaplain's deity. The Chaplain suffers large consequences for failure, but advances their sect by winning.",
-  "A match with money on the line. Whomever wins takes all the money of whomever loses.",
+  'A match with money on the line. Whomever wins takes all the money of whomever loses.',
   "A lethal match with the loser's soul becoming under ownership of the winner.",
 ];
 
@@ -58,13 +53,11 @@ export const SparringContract = (props, context) => {
     in_area,
     no_chaplains,
   } = data;
-  const [weapon, setWeapon] = useLocalState(context, "weapon", set_weapon);
-  const [area, setArea] = useLocalState(context, "area", set_area);
-  const [stakes, setStakes] = useLocalState(context, "stakes", set_stakes);
+  const [weapon, setWeapon] = useLocalState(context, 'weapon', set_weapon);
+  const [area, setArea] = useLocalState(context, 'area', set_area);
+  const [stakes, setStakes] = useLocalState(context, 'stakes', set_stakes);
   return (
-    <Window
-      width={420}
-      height={380}>
+    <Window width={420} height={380}>
       <Window.Content>
         <Section fill>
           <Stack vertical fill>
@@ -86,7 +79,8 @@ export const SparringContract = (props, context) => {
                         signatures will erase and the new terms must be
                         re-agreed upon.
                         `}
-                        icon="info">
+                        icon="info"
+                      >
                         Contract?
                       </Button>
                     </Stack.Item>
@@ -95,101 +89,96 @@ export const SparringContract = (props, context) => {
                 <Stack.Item>
                   <Dropdown
                     width="100%"
-                    selected={weaponlist[weapon-1]}
+                    selected={weaponlist[weapon - 1]}
                     options={weaponlist}
-                    onSelected={value =>
-                      setWeapon(weaponlist.findIndex(title => (
-                        title === value
-                      ))+1)} />
+                    onSelected={(value) =>
+                      setWeapon(
+                        weaponlist.findIndex((title) => title === value) + 1,
+                      )
+                    }
+                  />
                 </Stack.Item>
                 <Stack.Item>
-                  <BlockQuote>
-                    {weaponblurb[weapon-1]}
-                  </BlockQuote>
+                  <BlockQuote>{weaponblurb[weapon - 1]}</BlockQuote>
                 </Stack.Item>
               </Stack>
             </Stack.Item>
             <Stack.Item>
               <Stack vertical>
-                <Stack.Item fontSize="16px">
-                  Arena:
-                </Stack.Item>
+                <Stack.Item fontSize="16px">Arena:</Stack.Item>
                 <Stack.Item>
                   <Dropdown
                     width="100%"
                     selected={area}
                     options={possible_areas}
-                    onSelected={value => setArea(value)} />
+                    onSelected={(value) => setArea(value)}
+                  />
                 </Stack.Item>
                 <Stack.Item>
                   <BlockQuote>
-                    This fight will take place in the {area}.
-                    Leaving the arena mid-fight is a violation.
+                    This fight will take place in the {area}. Leaving the arena
+                    mid-fight is a violation.
                   </BlockQuote>
                 </Stack.Item>
               </Stack>
             </Stack.Item>
             <Stack.Item>
               <Stack vertical>
-                <Stack.Item fontSize="16px">
-                  Stakes:
-                </Stack.Item>
+                <Stack.Item fontSize="16px">Stakes:</Stack.Item>
                 <Stack.Item>
                   <Dropdown
                     width="100%"
-                    selected={stakelist[stakes-1]}
+                    selected={stakelist[stakes - 1]}
                     options={stakelist}
-                    onSelected={value =>
-                      setStakes(stakelist.findIndex(title => (
-                        title === value
-                      ))+1)} />
+                    onSelected={(value) =>
+                      setStakes(
+                        stakelist.findIndex((title) => title === value) + 1,
+                      )
+                    }
+                  />
                 </Stack.Item>
                 <Stack.Item>
-                  <BlockQuote>
-                    {stakesblurb[stakes-1]}
-                  </BlockQuote>
+                  <BlockQuote>{stakesblurb[stakes - 1]}</BlockQuote>
                 </Stack.Item>
               </Stack>
             </Stack.Item>
             <Stack.Item grow>
               <Stack grow textAlign="center">
-                <Stack.Item
-                  fontSize={left_sign !== "none" && "14px"}
-                  grow>
-                  {left_sign === 'none' && (
+                <Stack.Item fontSize={left_sign !== 'none' && '14px'} grow>
+                  {(left_sign === 'none' && (
                     <Button
                       icon="pen"
-                      onClick={() => act('sign', {
-                        "weapon": weapon,
-                        "area": area,
-                        "stakes": stakes,
-                        "sign_position": "left",
-                      })}>
+                      onClick={() =>
+                        act('sign', {
+                          weapon: weapon,
+                          area: area,
+                          stakes: stakes,
+                          sign_position: 'left',
+                        })
+                      }
+                    >
                       Sign Here
                     </Button>
-                  ) || (
-                    left_sign
-                  )}
+                  )) ||
+                    left_sign}
                 </Stack.Item>
-                <Stack.Item fontSize="16px">
-                  VS
-                </Stack.Item>
-                <Stack.Item
-                  fontSize={right_sign !== "none" && "14px"}
-                  grow>
-                  {right_sign === "none" && (
+                <Stack.Item fontSize="16px">VS</Stack.Item>
+                <Stack.Item fontSize={right_sign !== 'none' && '14px'} grow>
+                  {(right_sign === 'none' && (
                     <Button
                       icon="pen"
-                      onClick={() => act('sign', {
-                        "weapon": weapon,
-                        "area": area,
-                        "stakes": stakes,
-                      })}>
+                      onClick={() =>
+                        act('sign', {
+                          weapon: weapon,
+                          area: area,
+                          stakes: stakes,
+                        })
+                      }
+                    >
                       Sign Here
                     </Button>
-                  ) || (
-                    right_sign
-                  )}
+                  )) ||
+                    right_sign}
                 </Stack.Item>
               </Stack>
             </Stack.Item>
@@ -198,11 +187,12 @@ export const SparringContract = (props, context) => {
                 <Stack.Item grow>
                   <Button
                     disabled={
-                      !in_area
-                      || (no_chaplains && set_stakes === STAKES_HOLY_MATCH)
+                      !in_area ||
+                      (no_chaplains && set_stakes === STAKES_HOLY_MATCH)
                     }
                     icon="fist-raised"
-                    onClick={() => act('fight')} >
+                    onClick={() => act('fight')}
+                  >
                     FIGHT!
                   </Button>
                   <Button
@@ -212,35 +202,49 @@ export const SparringContract = (props, context) => {
                       this button.
                     `}
                     icon="door-open"
-                    onClick={() => act('clear')} >
+                    onClick={() => act('clear')}
+                  >
                     Clear
                   </Button>
                 </Stack.Item>
                 <Stack.Item>
                   <Button
-                    tooltip={in_area
-                      && "Both participants are present in the "+ area + "."
-                      || "Both participants need to be in the arena!"}
-                    color={in_area && "green" || "red"}
-                    icon="ring" >
+                    tooltip={
+                      (in_area &&
+                        'Both participants are present in the ' + area + '.') ||
+                      'Both participants need to be in the arena!'
+                    }
+                    color={(in_area && 'green') || 'red'}
+                    icon="ring"
+                  >
                     Arena
                   </Button>
                   <Button
-                    tooltip={(left_sign !== "none" && right_sign !== "none")
-                      && "Both signatures present, terms agreed upon."
-                      || "You need signatures from both fighters on the terms!"}
-                    color={(left_sign !== "none" && right_sign !== "none")
-                      && "green"
-                      || "red"}
-                    icon="file-signature" >
+                    tooltip={
+                      (left_sign !== 'none' &&
+                        right_sign !== 'none' &&
+                        'Both signatures present, terms agreed upon.') ||
+                      'You need signatures from both fighters on the terms!'
+                    }
+                    color={
+                      (left_sign !== 'none' &&
+                        right_sign !== 'none' &&
+                        'green') ||
+                      'red'
+                    }
+                    icon="file-signature"
+                  >
                     Signatures
                   </Button>
                   <Button
-                    tooltip={!no_chaplains
-                      && "At least one chaplain is present. Holy matches allowed."
-                      || "No chaplain present for this fight. No Holy Matches!"}
-                    color={!no_chaplains && "green" || "yellow"}
-                    icon="cross" >
+                    tooltip={
+                      (!no_chaplains &&
+                        'At least one chaplain is present. Holy matches allowed.') ||
+                      'No chaplain present for this fight. No Holy Matches!'
+                    }
+                    color={(!no_chaplains && 'green') || 'yellow'}
+                    icon="cross"
+                  >
                     Chaplain
                   </Button>
                 </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/SpawnersMenu.tsx b/tgui/packages/tgui/interfaces/SpawnersMenu.tsx
index 6fe816af2e65..de1515308554 100644
--- a/tgui/packages/tgui/interfaces/SpawnersMenu.tsx
+++ b/tgui/packages/tgui/interfaces/SpawnersMenu.tsx
@@ -38,18 +38,21 @@ export const SpawnersMenu = (props, context) => {
                         onClick={() =>
                           act('jump', {
                             name: spawner.name,
-                          })}
+                          })
+                        }
                       />
                       <Button
                         content="Spawn"
                         onClick={() =>
                           act('spawn', {
                             name: spawner.name,
-                          })}
+                          })
+                        }
                       />
                     </Stack.Item>
                   </Stack>
-                }>
+                }
+              >
                 <LabeledList>
                   <LabeledList.Item label="Origin">
                     {spawner.you_are_text || 'Unknown'}
diff --git a/tgui/packages/tgui/interfaces/Spellbook.js b/tgui/packages/tgui/interfaces/Spellbook.js
index a4542df9a610..07399be9b22b 100644
--- a/tgui/packages/tgui/interfaces/Spellbook.js
+++ b/tgui/packages/tgui/interfaces/Spellbook.js
@@ -1,6 +1,16 @@
 import { multiline } from 'common/string';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Dimmer, Divider, Icon, NoticeBox, ProgressBar, Section, Stack } from '../components';
+import {
+  Box,
+  Button,
+  Dimmer,
+  Divider,
+  Icon,
+  NoticeBox,
+  ProgressBar,
+  Section,
+  Stack,
+} from '../components';
 import { Window } from '../layouts';
 
 const TAB2NAME = [
@@ -79,7 +89,8 @@ const EnscribedName = (props, context) => {
         fontSize="50px"
         color="bad"
         textAlign="center"
-        fontFamily="Ink Free">
+        fontFamily="Ink Free"
+      >
         {owner}
       </Box>
       <Divider />
@@ -235,7 +246,8 @@ const SingleLoadout = (props, context) => {
           onClick={() =>
             act('purchase_loadout', {
               id: loadoutId,
-            })}
+            })
+          }
         />
         <Divider />
         <Box color={loadoutColor}>Added by {author}.</Box>
@@ -409,7 +421,8 @@ export const Spellbook = (props, context) => {
                         {tabIndex}
                       </Box>
                     </>
-                  }>
+                  }
+                >
                   {!!TAB2NAME[tabIndex - 1].locked && <LockedPage />}
                   <Stack vertical>
                     {TAB2NAME[tabIndex - 1].blurb !== null && (
@@ -434,11 +447,12 @@ export const Spellbook = (props, context) => {
                                 buttons={
                                   <>
                                     <Box
-                                      mr={entry.buyword === 'Learn' ? 6.5 : 2}>
+                                      mr={entry.buyword === 'Learn' ? 6.5 : 2}
+                                    >
                                       {entry.cost} Points
                                     </Box>
-                                    {(entry.cat === 'Rituals'
-                                      && ((!!entry.times && (
+                                    {(entry.cat === 'Rituals' &&
+                                      ((!!entry.times && (
                                         <Box ml={-104} mt={-2.2}>
                                           Cast {entry.times} Times.
                                         </Box>
@@ -446,16 +460,16 @@ export const Spellbook = (props, context) => {
                                         <Box ml={-110} mt={-2.2}>
                                           Not Casted Yet.
                                         </Box>
-                                      )))
-                                      || (entry.cooldown && (
+                                      ))) ||
+                                      (entry.cooldown && (
                                         <Box ml={-115} mt={-2.2}>
                                           {entry.cooldown}s Cooldown
                                         </Box>
                                       )) || (
-                                      <Box ml={-120} mt={-2.2}>
-                                        No Cooldown!
-                                      </Box>
-                                    )}
+                                        <Box ml={-120} mt={-2.2}>
+                                          No Cooldown!
+                                        </Box>
+                                      )}
                                     {entry.buyword === 'Learn' && (
                                       <Box mr={-9.5} mt={-3}>
                                         <Button
@@ -475,7 +489,8 @@ export const Spellbook = (props, context) => {
                                       </Box>
                                     )}
                                   </>
-                                }>
+                                }
+                              >
                                 <Stack>
                                   <Stack.Item grow>{entry.desc}</Stack.Item>
                                   <Stack.Item>
@@ -495,7 +510,8 @@ export const Spellbook = (props, context) => {
                                       onClick={() =>
                                         act('purchase', {
                                           spellref: entry.ref,
-                                        })}
+                                        })
+                                      }
                                     />
                                     <br />
                                     {(!entry.refundable && (
@@ -509,7 +525,8 @@ export const Spellbook = (props, context) => {
                                         onClick={() =>
                                           act('refund', {
                                             spellref: entry.ref,
-                                          })}
+                                          })
+                                        }
                                       />
                                     )}
                                   </Stack.Item>
@@ -544,7 +561,8 @@ export const Spellbook = (props, context) => {
                         {tabIndex + 1}
                       </Box>
                     </>
-                  }>
+                  }
+                >
                   {!!TAB2NAME[tabIndex].locked && <LockedPage />}
                   <Stack vertical>
                     {TAB2NAME[tabIndex].blurb !== null && (
@@ -569,11 +587,12 @@ export const Spellbook = (props, context) => {
                                 buttons={
                                   <>
                                     <Box
-                                      mr={entry.buyword === 'Learn' ? 6.5 : 2}>
+                                      mr={entry.buyword === 'Learn' ? 6.5 : 2}
+                                    >
                                       {entry.cost} Points
                                     </Box>
-                                    {(entry.cat === 'Rituals'
-                                      && ((!!entry.times && (
+                                    {(entry.cat === 'Rituals' &&
+                                      ((!!entry.times && (
                                         <Box ml={-118} mt={-2.2}>
                                           Cast {entry.times} Time(s).
                                         </Box>
@@ -581,16 +600,16 @@ export const Spellbook = (props, context) => {
                                         <Box ml={-118} mt={-2.2}>
                                           Not Casted Yet.
                                         </Box>
-                                      )))
-                                      || (entry.cooldown && (
+                                      ))) ||
+                                      (entry.cooldown && (
                                         <Box ml={-115} mt={-2.2}>
                                           {entry.cooldown}s Cooldown
                                         </Box>
                                       )) || (
-                                      <Box ml={-120} mt={-2.2}>
-                                        No Cooldown!
-                                      </Box>
-                                    )}
+                                        <Box ml={-120} mt={-2.2}>
+                                          No Cooldown!
+                                        </Box>
+                                      )}
                                     {entry.buyword === 'Learn' && (
                                       <Box mr={-9.5} mt={-3}>
                                         <Button
@@ -610,7 +629,8 @@ export const Spellbook = (props, context) => {
                                       </Box>
                                     )}
                                   </>
-                                }>
+                                }
+                              >
                                 <Stack>
                                   <Stack.Item grow>{entry.desc}</Stack.Item>
                                   <Stack.Item>
@@ -630,7 +650,8 @@ export const Spellbook = (props, context) => {
                                       onClick={() =>
                                         act('purchase', {
                                           spellref: entry.ref,
-                                        })}
+                                        })
+                                      }
                                     />
                                     <br />
                                     {(!entry.refundable && (
@@ -644,7 +665,8 @@ export const Spellbook = (props, context) => {
                                         onClick={() =>
                                           act('refund', {
                                             spellref: entry.ref,
-                                          })}
+                                          })
+                                        }
                                       />
                                     )}
                                   </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/Stack.js b/tgui/packages/tgui/interfaces/Stack.js
index 8ba13220a70e..9543f6de9bbe 100644
--- a/tgui/packages/tgui/interfaces/Stack.js
+++ b/tgui/packages/tgui/interfaces/Stack.js
@@ -1,59 +1,58 @@
 import { createSearch } from 'common/string';
 import { sortBy } from 'common/collections';
-import { useBackend, useLocalState } from "../backend";
-import { Box, Button, Input, NoticeBox, Section, Collapsible, Table } from "../components";
-import { Window } from "../layouts";
+import { useBackend, useLocalState } from '../backend';
+import {
+  Box,
+  Button,
+  Input,
+  NoticeBox,
+  Section,
+  Collapsible,
+  Table,
+} from '../components';
+import { Window } from '../layouts';
 
 export const Stack = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const {
-    amount,
-    recipes = [],
-  } = data;
+  const { amount, recipes = [] } = data;
 
-  const [
-    searchText,
-    setSearchText,
-  ] = useLocalState(context, 'searchText', '');
+  const [searchText, setSearchText] = useLocalState(context, 'searchText', '');
 
-  const testSearch = createSearch(searchText, item => {
+  const testSearch = createSearch(searchText, (item) => {
     return item;
   });
 
-  const items = searchText.length > 0
-   && Object.keys(recipes)
-     .filter(testSearch)
-     .reduce((obj, key) => {
-       obj[key] = recipes[key];
-       return obj;
-     }, {})
-    || recipes;
+  const items =
+    (searchText.length > 0 &&
+      Object.keys(recipes)
+        .filter(testSearch)
+        .reduce((obj, key) => {
+          obj[key] = recipes[key];
+          return obj;
+        }, {})) ||
+    recipes;
 
   const height = Math.max(94 + Object.keys(recipes).length * 26, 250);
 
   return (
-    <Window
-      width={400}
-      height={Math.min(height, 500)}>
+    <Window width={400} height={Math.min(height, 500)}>
       <Window.Content scrollable>
         <Section
-          title={"Amount: " + amount}
-          buttons={(
+          title={'Amount: ' + amount}
+          buttons={
             <>
               Search
               <Input
                 autoFocus
                 value={searchText}
                 onInput={(e, value) => setSearchText(value)}
-                mx={1} />
+                mx={1}
+              />
             </>
-          )}>
-          {items.length === 0 && (
-            <NoticeBox>
-              No recipes found.
-            </NoticeBox>
-          ) || (
+          }
+        >
+          {(items.length === 0 && <NoticeBox>No recipes found.</NoticeBox>) || (
             <RecipeList recipes={items} />
           )}
         </Section>
@@ -65,31 +64,22 @@ export const Stack = (props, context) => {
 const RecipeList = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const {
-    recipes,
-  } = props;
+  const { recipes } = props;
 
-  const sortedKeys = sortBy(key => key.toLowerCase())(Object.keys(recipes));
+  const sortedKeys = sortBy((key) => key.toLowerCase())(Object.keys(recipes));
 
-  return sortedKeys.map(title => {
+  return sortedKeys.map((title) => {
     const recipe = recipes[title];
     if (recipe.ref === undefined) {
       return (
-        <Collapsible
-          ml={1}
-          color="label"
-          title={title}>
+        <Collapsible ml={1} color="label" title={title}>
           <Box ml={1}>
             <RecipeList recipes={recipe} />
           </Box>
         </Collapsible>
       );
     } else {
-      return (
-        <Recipe
-          title={title}
-          recipe={recipe} />
-      );
+      return <Recipe title={title} recipe={recipe} />;
     }
   });
 };
@@ -105,13 +95,12 @@ const buildMultiplier = (recipe, amount) => {
 const Multipliers = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const {
-    recipe,
-    maxMultiplier,
-  } = props;
+  const { recipe, maxMultiplier } = props;
 
-  const maxM = Math.min(maxMultiplier,
-    Math.floor(recipe.max_res_amount / recipe.res_amount));
+  const maxM = Math.min(
+    maxMultiplier,
+    Math.floor(recipe.max_res_amount / recipe.res_amount),
+  );
 
   const multipliers = [5, 10, 25];
 
@@ -119,26 +108,32 @@ const Multipliers = (props, context) => {
 
   for (const multiplier of multipliers) {
     if (maxM >= multiplier) {
-      finalResult.push((
+      finalResult.push(
         <Button
-          content={multiplier * recipe.res_amount + "x"}
-          onClick={() => act("make", {
-            ref: recipe.ref,
-            multiplier: multiplier,
-          })} />
-      ));
+          content={multiplier * recipe.res_amount + 'x'}
+          onClick={() =>
+            act('make', {
+              ref: recipe.ref,
+              multiplier: multiplier,
+            })
+          }
+        />,
+      );
     }
   }
 
   if (multipliers.indexOf(maxM) === -1) {
-    finalResult.push((
+    finalResult.push(
       <Button
-        content={maxM * recipe.res_amount + "x"}
-        onClick={() => act("make", {
-          ref: recipe.ref,
-          multiplier: maxM,
-        })} />
-    ));
+        content={maxM * recipe.res_amount + 'x'}
+        onClick={() =>
+          act('make', {
+            ref: recipe.ref,
+            multiplier: maxM,
+          })
+        }
+      />,
+    );
   }
 
   return finalResult;
@@ -147,30 +142,20 @@ const Multipliers = (props, context) => {
 const Recipe = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const {
-    amount,
-  } = data;
+  const { amount } = data;
 
-  const {
-    recipe,
-    title,
-  } = props;
+  const { recipe, title } = props;
 
-  const {
-    res_amount,
-    max_res_amount,
-    req_amount,
-    ref,
-  } = recipe;
+  const { res_amount, max_res_amount, req_amount, ref } = recipe;
 
   let buttonName = title;
-  buttonName += " (";
-  buttonName += req_amount + " ";
-  buttonName += ("sheet" + (req_amount > 1 ? "s" : ""));
-  buttonName += ")";
+  buttonName += ' (';
+  buttonName += req_amount + ' ';
+  buttonName += 'sheet' + (req_amount > 1 ? 's' : '');
+  buttonName += ')';
 
   if (res_amount > 1) {
-    buttonName = res_amount + "x " + buttonName;
+    buttonName = res_amount + 'x ' + buttonName;
   }
 
   const maxMultiplier = buildMultiplier(recipe, amount);
@@ -185,16 +170,17 @@ const Recipe = (props, context) => {
               disabled={!maxMultiplier}
               icon="wrench"
               content={buttonName}
-              onClick={() => act("make", {
-                ref: recipe.ref,
-                multiplier: 1,
-              })} />
+              onClick={() =>
+                act('make', {
+                  ref: recipe.ref,
+                  multiplier: 1,
+                })
+              }
+            />
           </Table.Cell>
           {max_res_amount > 1 && maxMultiplier > 1 && (
             <Table.Cell collapsing>
-              <Multipliers
-                recipe={recipe}
-                maxMultiplier={maxMultiplier} />
+              <Multipliers recipe={recipe} maxMultiplier={maxMultiplier} />
             </Table.Cell>
           )}
         </Table.Row>
diff --git a/tgui/packages/tgui/interfaces/StackingConsole.js b/tgui/packages/tgui/interfaces/StackingConsole.js
index e894c8d08e94..1686ffa32e16 100644
--- a/tgui/packages/tgui/interfaces/StackingConsole.js
+++ b/tgui/packages/tgui/interfaces/StackingConsole.js
@@ -4,18 +4,12 @@ import { Window } from '../layouts';
 
 export const StackingConsole = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    machine,
-  } = data;
+  const { machine } = data;
   return (
-    <Window
-      width={320}
-      height={340}>
+    <Window width={320} height={340}>
       <Window.Content scrollable>
         {!machine ? (
-          <NoticeBox>
-            No connected stacking machine
-          </NoticeBox>
+          <NoticeBox>No connected stacking machine</NoticeBox>
         ) : (
           <StackingConsoleContent />
         )}
@@ -26,39 +20,38 @@ export const StackingConsole = (props, context) => {
 
 export const StackingConsoleContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    stacking_amount,
-    contents = [],
-  } = data;
+  const { stacking_amount, contents = [] } = data;
   return (
     <>
       <Section>
         <LabeledList>
           <LabeledList.Item label="Stacking Amount">
-            {stacking_amount || "Unknown"}
+            {stacking_amount || 'Unknown'}
           </LabeledList.Item>
         </LabeledList>
       </Section>
       <Section title="Stored Materials">
         {!contents.length ? (
-          <NoticeBox>
-            No stored materials
-          </NoticeBox>
+          <NoticeBox>No stored materials</NoticeBox>
         ) : (
           <LabeledList>
-            {contents.map(sheet => (
+            {contents.map((sheet) => (
               <LabeledList.Item
                 key={sheet.type}
                 label={sheet.name}
-                buttons={(
+                buttons={
                   <Button
                     icon="eject"
                     content="Release"
-                    onClick={() => act('release', {
-                      type: sheet.type,
-                    })} />
-                )}>
-                {sheet.amount || "Unknown"}
+                    onClick={() =>
+                      act('release', {
+                        type: sheet.type,
+                      })
+                    }
+                  />
+                }
+              >
+                {sheet.amount || 'Unknown'}
               </LabeledList.Item>
             ))}
           </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/StationAlertConsole.js b/tgui/packages/tgui/interfaces/StationAlertConsole.js
index c1a39128b511..a7bb08c1bd82 100644
--- a/tgui/packages/tgui/interfaces/StationAlertConsole.js
+++ b/tgui/packages/tgui/interfaces/StationAlertConsole.js
@@ -6,13 +6,9 @@ import { Window } from '../layouts';
 
 export const StationAlertConsole = (props, context) => {
   const { data } = useBackend(context);
-  const {
-    cameraView,
-  } = data;
+  const { cameraView } = data;
   return (
-    <Window
-      width={cameraView ? 390 : 345}
-      height={587}>
+    <Window width={cameraView ? 390 : 345} height={587}>
       <Window.Content scrollable>
         <StationAlertConsoleContent />
       </Window.Content>
@@ -22,59 +18,61 @@ export const StationAlertConsole = (props, context) => {
 
 export const StationAlertConsoleContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    cameraView,
-  } = data;
+  const { cameraView } = data;
 
   const sortingKey = {
-    "Fire": 0,
-    "Atmosphere": 1,
-    "Power": 2,
-    "Burglar": 3,
-    "Motion": 4,
-    "Camera": 5,
+    Fire: 0,
+    Atmosphere: 1,
+    Power: 2,
+    Burglar: 3,
+    Motion: 4,
+    Camera: 5,
   };
 
-  const sortedAlarms = flow([
-    sortBy((alarm) => sortingKey[alarm.name]),
-  ])(data.alarms || []);
+  const sortedAlarms = flow([sortBy((alarm) => sortingKey[alarm.name])])(
+    data.alarms || [],
+  );
 
   return (
     <>
-      {sortedAlarms.map(category => (
-        <Section key={category.name} title={category.name + " Alarms"}>
+      {sortedAlarms.map((category) => (
+        <Section key={category.name} title={category.name + ' Alarms'}>
           <ul>
             {category.alerts.length === 0 && (
-              <li className="color-good">
-                Systems Nominal
-              </li>
+              <li className="color-good">Systems Nominal</li>
             )}
-            {category.alerts.map(alert => (
-              <Stack 
-                key={alert.name} 
-                height="30px" 
-                align="baseline">
+            {category.alerts.map((alert) => (
+              <Stack key={alert.name} height="30px" align="baseline">
                 <Stack.Item grow>
                   <li className="color-average">
-                    {alert.name} {!!cameraView && alert.sources > 1 
-                      ? " (" + alert.sources + " sources)" : ""}
+                    {alert.name}{' '}
+                    {!!cameraView && alert.sources > 1
+                      ? ' (' + alert.sources + ' sources)'
+                      : ''}
                   </li>
                 </Stack.Item>
-                {!!cameraView && (      
-                  <Stack.Item>       
+                {!!cameraView && (
+                  <Stack.Item>
                     <Button
                       textAlign="center"
                       width="100px"
-                      icon={alert.cameras ? "video" : ""}
+                      icon={alert.cameras ? 'video' : ''}
                       disabled={!alert.cameras}
-                      content={alert.cameras === 1 
-                        ? alert.cameras + " Camera" : alert.cameras > 1
-                          ? alert.cameras + " Cameras" : "No Camera"}
-                      onClick={() => act('select_camera', {
-                        alert: alert.ref,
-                      })} />
+                      content={
+                        alert.cameras === 1
+                          ? alert.cameras + ' Camera'
+                          : alert.cameras > 1
+                            ? alert.cameras + ' Cameras'
+                            : 'No Camera'
+                      }
+                      onClick={() =>
+                        act('select_camera', {
+                          alert: alert.ref,
+                        })
+                      }
+                    />
                   </Stack.Item>
-                )}  
+                )}
               </Stack>
             ))}
           </ul>
diff --git a/tgui/packages/tgui/interfaces/StationTraitsPanel.tsx b/tgui/packages/tgui/interfaces/StationTraitsPanel.tsx
index a137017b4040..0d26684496eb 100644
--- a/tgui/packages/tgui/interfaces/StationTraitsPanel.tsx
+++ b/tgui/packages/tgui/interfaces/StationTraitsPanel.tsx
@@ -1,26 +1,26 @@
-import { filterMap } from "common/collections";
-import { exhaustiveCheck } from "common/exhaustive";
-import { BooleanLike } from "common/react";
-import { useBackend, useLocalState } from "../backend";
-import { Box, Button, Divider, Dropdown, Stack, Tabs } from "../components";
-import { Window } from "../layouts";
+import { filterMap } from 'common/collections';
+import { exhaustiveCheck } from 'common/exhaustive';
+import { BooleanLike } from 'common/react';
+import { useBackend, useLocalState } from '../backend';
+import { Box, Button, Divider, Dropdown, Stack, Tabs } from '../components';
+import { Window } from '../layouts';
 
 type CurrentStationTrait = {
-  can_revert: BooleanLike,
-  name: string,
-  ref: string,
-}
+  can_revert: BooleanLike;
+  name: string;
+  ref: string;
+};
 
 type ValidStationTrait = {
-  name: string,
-  path: string,
-}
+  name: string;
+  path: string;
+};
 
 type StationTraitsData = {
-  current_traits: CurrentStationTrait[],
-  future_station_traits?: ValidStationTrait[],
-  too_late_to_revert: BooleanLike,
-  valid_station_traits: ValidStationTrait[],
+  current_traits: CurrentStationTrait[];
+  future_station_traits?: ValidStationTrait[];
+  too_late_to_revert: BooleanLike;
+  valid_station_traits: ValidStationTrait[];
 };
 
 enum Tab {
@@ -34,14 +34,14 @@ const FutureStationTraitsPage = (props, context) => {
 
   const [selectedTrait, setSelectedTrait] = useLocalState<string | null>(
     context,
-    "selectedFutureTrait",
+    'selectedFutureTrait',
     null,
   );
 
   const traitsByName = Object.fromEntries(
-    data.valid_station_traits.map(trait => {
+    data.valid_station_traits.map((trait) => {
       return [trait.name, trait.path];
-    })
+    }),
   );
 
   const traitNames = Object.keys(traitsByName);
@@ -52,7 +52,7 @@ const FutureStationTraitsPage = (props, context) => {
       <Stack fill>
         <Stack.Item grow>
           <Dropdown
-            displayText={!selectedTrait && "Select trait to add..."}
+            displayText={!selectedTrait && 'Select trait to add...'}
             onSelected={setSelectedTrait}
             options={traitNames}
             selected={selectedTrait}
@@ -73,18 +73,20 @@ const FutureStationTraitsPage = (props, context) => {
 
               let newStationTraits = [selectedPath];
               if (future_station_traits) {
-                const selectedTraitPaths
-                  = future_station_traits.map(trait => trait.path);
+                const selectedTraitPaths = future_station_traits.map(
+                  (trait) => trait.path,
+                );
 
                 if (selectedTraitPaths.indexOf(selectedPath) !== -1) {
                   return;
                 }
 
-                newStationTraits
-                  = newStationTraits.concat(...selectedTraitPaths);
+                newStationTraits = newStationTraits.concat(
+                  ...selectedTraitPaths,
+                );
               }
 
-              act("setup_future_traits", {
+              act('setup_future_traits', {
                 station_traits: newStationTraits,
               });
             }}
@@ -96,82 +98,75 @@ const FutureStationTraitsPage = (props, context) => {
 
       <Divider />
 
-      {
-        Array.isArray(future_station_traits)
-          ? (
-            future_station_traits.length > 0
-              ? (
-                <Stack vertical fill>
-                  {future_station_traits.map(trait => (
-                    <Stack.Item key={trait.path}>
-                      <Stack fill>
-                        <Stack.Item grow>
-                          {trait.name}
-                        </Stack.Item>
+      {Array.isArray(future_station_traits) ? (
+        future_station_traits.length > 0 ? (
+          <Stack vertical fill>
+            {future_station_traits.map((trait) => (
+              <Stack.Item key={trait.path}>
+                <Stack fill>
+                  <Stack.Item grow>{trait.name}</Stack.Item>
 
-                        <Stack.Item>
-                          <Button
-                            color="red"
-                            icon="times"
-                            onClick={() => {
-                              act("setup_future_traits", {
-                                station_traits:
-                                filterMap(future_station_traits, otherTrait => {
-                                  if (otherTrait.path === trait.path) {
-                                    return undefined;
-                                  } else {
-                                    return otherTrait.path;
-                                  }
-                                }),
-                              });
-                            }}
-                          >
-                            Delete
-                          </Button>
-                        </Stack.Item>
-                      </Stack>
-                    </Stack.Item>
-                  ))}
-                </Stack>
-              ) : (
-                <>
-                  <Box>
-                    No station traits will run next round.
-                  </Box>
-
-                  <Box>
+                  <Stack.Item>
                     <Button
                       color="red"
                       icon="times"
-                      tooltip="The next round will roll station traits randomly, just like normal"
-                      onClick={() => act("clear_future_traits")}
+                      onClick={() => {
+                        act('setup_future_traits', {
+                          station_traits: filterMap(
+                            future_station_traits,
+                            (otherTrait) => {
+                              if (otherTrait.path === trait.path) {
+                                return undefined;
+                              } else {
+                                return otherTrait.path;
+                              }
+                            },
+                          ),
+                        });
+                      }}
                     >
-                      Run Station Traits Normally
+                      Delete
                     </Button>
-                  </Box>
-                </>
-              )
-          )
-          : (
-            <>
-              <Box>
-                No future station traits are planned.
-              </Box>
+                  </Stack.Item>
+                </Stack>
+              </Stack.Item>
+            ))}
+          </Stack>
+        ) : (
+          <>
+            <Box>No station traits will run next round.</Box>
 
-              <Box>
-                <Button
-                  color="red"
-                  icon="times"
-                  onClick={() => act("setup_future_traits", {
-                    station_traits: [],
-                  })}
-                >
-                  Prevent station traits from running next round
-                </Button>
-              </Box>
-            </>
-          )
-      }
+            <Box>
+              <Button
+                color="red"
+                icon="times"
+                tooltip="The next round will roll station traits randomly, just like normal"
+                onClick={() => act('clear_future_traits')}
+              >
+                Run Station Traits Normally
+              </Button>
+            </Box>
+          </>
+        )
+      ) : (
+        <>
+          <Box>No future station traits are planned.</Box>
+
+          <Box>
+            <Button
+              color="red"
+              icon="times"
+              onClick={() =>
+                act('setup_future_traits', {
+                  station_traits: [],
+                })
+              }
+            >
+              Prevent station traits from running next round
+            </Button>
+          </Box>
+        </>
+      )}
     </Box>
   );
 };
@@ -181,12 +176,10 @@ const ViewStationTraitsPage = (props, context) => {
 
   return data.current_traits.length > 0 ? (
     <Stack vertical fill>
-      {data.current_traits.map(stationTrait => (
+      {data.current_traits.map((stationTrait) => (
         <Stack.Item key={stationTrait.ref}>
           <Stack fill>
-            <Stack.Item grow>
-              {stationTrait.name}
-            </Stack.Item>
+            <Stack.Item grow>{stationTrait.name}</Stack.Item>
 
             <Stack.Item>
               <Button.Confirm
@@ -194,13 +187,17 @@ const ViewStationTraitsPage = (props, context) => {
                 color="red"
                 disabled={data.too_late_to_revert || !stationTrait.can_revert}
                 tooltip={
-                  (!stationTrait.can_revert && "This trait is not revertable.")
-                  || (data.too_late_to_revert && "It's too late to revert station traits, the round has already started.")
+                  (!stationTrait.can_revert &&
+                    'This trait is not revertable.') ||
+                  (data.too_late_to_revert &&
+                    "It's too late to revert station traits, the round has already started.")
                 }
                 icon="times"
-                onClick={() => act("revert", {
-                  ref: stationTrait.ref,
-                })}
+                onClick={() =>
+                  act('revert', {
+                    ref: stationTrait.ref,
+                  })
+                }
               />
             </Stack.Item>
           </Stack>
@@ -208,16 +205,14 @@ const ViewStationTraitsPage = (props, context) => {
       ))}
     </Stack>
   ) : (
-    <Box>
-      There are no active station traits.
-    </Box>
+    <Box>There are no active station traits.</Box>
   );
 };
 
 export const StationTraitsPanel = (props, context) => {
   const [currentTab, setCurrentTab] = useLocalState(
     context,
-    "station_traits_tab",
+    'station_traits_tab',
     Tab.ViewStationTraits,
   );
 
@@ -235,11 +230,7 @@ export const StationTraitsPanel = (props, context) => {
   }
 
   return (
-    <Window
-      title="Modify Station Traits"
-      height={500}
-      width={500}
-    >
+    <Window title="Modify Station Traits" height={500} width={500}>
       <Window.Content scrollable>
         <Tabs>
           <Tabs.Tab
diff --git a/tgui/packages/tgui/interfaces/StripMenu.tsx b/tgui/packages/tgui/interfaces/StripMenu.tsx
index 2f13943d462b..0f44ca115dd3 100644
--- a/tgui/packages/tgui/interfaces/StripMenu.tsx
+++ b/tgui/packages/tgui/interfaces/StripMenu.tsx
@@ -1,14 +1,14 @@
-import { range } from "common/collections";
-import { BooleanLike } from "common/react";
-import { resolveAsset } from "../assets";
-import { useBackend } from "../backend";
-import { Box, Button, Icon, Stack } from "../components";
-import { Window } from "../layouts";
+import { range } from 'common/collections';
+import { BooleanLike } from 'common/react';
+import { resolveAsset } from '../assets';
+import { useBackend } from '../backend';
+import { Box, Button, Icon, Stack } from '../components';
+import { Window } from '../layouts';
 
 const ROWS = 5;
 const COLUMNS = 6;
 
-const BUTTON_DIMENSIONS = "50px";
+const BUTTON_DIMENSIONS = '50px';
 
 type GridSpotKey = string;
 
@@ -17,7 +17,7 @@ const getGridSpotKey = (spot: [number, number]): GridSpotKey => {
 };
 
 const CornerText = (props: {
-  align: "left" | "right";
+  align: 'left' | 'right';
   children: string;
 }): JSX.Element => {
   const { align, children } = props;
@@ -25,10 +25,10 @@ const CornerText = (props: {
   return (
     <Box
       style={{
-        position: "relative",
-        left: align === "left" ? "2px" : "-2px",
-        "text-align": align,
-        "text-shadow": "1px 1px 1px #555",
+        position: 'relative',
+        left: align === 'left' ? '2px' : '-2px',
+        'text-align': align,
+        'text-shadow': '1px 1px 1px #555',
       }}
     >
       {children}
@@ -43,33 +43,33 @@ type AlternateAction = {
 
 const ALTERNATE_ACTIONS: Record<string, AlternateAction> = {
   knot: {
-    icon: "shoe-prints",
-    text: "Knot",
+    icon: 'shoe-prints',
+    text: 'Knot',
   },
 
   untie: {
-    icon: "shoe-prints",
-    text: "Untie",
+    icon: 'shoe-prints',
+    text: 'Untie',
   },
 
   unknot: {
-    icon: "shoe-prints",
-    text: "Unknot",
+    icon: 'shoe-prints',
+    text: 'Unknot',
   },
 
   enable_internals: {
-    icon: "tg-air-tank",
-    text: "Enable internals",
+    icon: 'tg-air-tank',
+    text: 'Enable internals',
   },
 
   disable_internals: {
-    icon: "tg-air-tank-slash",
-    text: "Disable internals",
+    icon: 'tg-air-tank-slash',
+    text: 'Disable internals',
   },
 
   adjust_jumpsuit: {
-    icon: "tshirt",
-    text: "Adjust jumpsuit",
+    icon: 'tshirt',
+    text: 'Adjust jumpsuit',
   },
 };
 
@@ -83,129 +83,129 @@ const SLOTS: Record<
   }
 > = {
   eyes: {
-    displayName: "eyewear",
+    displayName: 'eyewear',
     gridSpot: getGridSpotKey([0, 1]),
-    image: "inventory-glasses.png",
+    image: 'inventory-glasses.png',
   },
 
   head: {
-    displayName: "headwear",
+    displayName: 'headwear',
     gridSpot: getGridSpotKey([0, 2]),
-    image: "inventory-head.png",
+    image: 'inventory-head.png',
   },
 
   neck: {
-    displayName: "neckwear",
+    displayName: 'neckwear',
     gridSpot: getGridSpotKey([1, 1]),
-    image: "inventory-neck.png",
+    image: 'inventory-neck.png',
   },
 
   mask: {
-    displayName: "mask",
+    displayName: 'mask',
     gridSpot: getGridSpotKey([1, 2]),
-    image: "inventory-mask.png",
+    image: 'inventory-mask.png',
   },
 
   corgi_collar: {
-    displayName: "collar",
+    displayName: 'collar',
     gridSpot: getGridSpotKey([1, 2]),
-    image: "inventory-collar.png",
+    image: 'inventory-collar.png',
   },
 
   ears: {
-    displayName: "earwear",
+    displayName: 'earwear',
     gridSpot: getGridSpotKey([1, 3]),
-    image: "inventory-ears.png",
+    image: 'inventory-ears.png',
   },
 
   parrot_headset: {
-    displayName: "headset",
+    displayName: 'headset',
     gridSpot: getGridSpotKey([1, 3]),
-    image: "inventory-ears.png",
+    image: 'inventory-ears.png',
   },
 
   handcuffs: {
-    displayName: "handcuffs",
+    displayName: 'handcuffs',
     gridSpot: getGridSpotKey([1, 4]),
   },
 
   legcuffs: {
-    displayName: "legcuffs",
+    displayName: 'legcuffs',
     gridSpot: getGridSpotKey([1, 5]),
   },
 
   jumpsuit: {
-    displayName: "uniform",
+    displayName: 'uniform',
     gridSpot: getGridSpotKey([2, 1]),
-    image: "inventory-uniform.png",
+    image: 'inventory-uniform.png',
   },
 
   suit: {
-    displayName: "suit",
+    displayName: 'suit',
     gridSpot: getGridSpotKey([2, 2]),
-    image: "inventory-suit.png",
+    image: 'inventory-suit.png',
   },
 
   gloves: {
-    displayName: "gloves",
+    displayName: 'gloves',
     gridSpot: getGridSpotKey([2, 3]),
-    image: "inventory-gloves.png",
+    image: 'inventory-gloves.png',
   },
 
   right_hand: {
-    displayName: "right hand",
+    displayName: 'right hand',
     gridSpot: getGridSpotKey([2, 4]),
-    image: "inventory-hand_r.png",
+    image: 'inventory-hand_r.png',
     additionalComponent: <CornerText align="left">R</CornerText>,
   },
 
   left_hand: {
-    displayName: "left hand",
+    displayName: 'left hand',
     gridSpot: getGridSpotKey([2, 5]),
-    image: "inventory-hand_l.png",
+    image: 'inventory-hand_l.png',
     additionalComponent: <CornerText align="right">L</CornerText>,
   },
 
   shoes: {
-    displayName: "shoes",
+    displayName: 'shoes',
     gridSpot: getGridSpotKey([3, 2]),
-    image: "inventory-shoes.png",
+    image: 'inventory-shoes.png',
   },
 
   suit_storage: {
-    displayName: "suit storage item",
+    displayName: 'suit storage item',
     gridSpot: getGridSpotKey([4, 0]),
-    image: "inventory-suit_storage.png",
+    image: 'inventory-suit_storage.png',
   },
 
   id: {
-    displayName: "ID",
+    displayName: 'ID',
     gridSpot: getGridSpotKey([4, 1]),
-    image: "inventory-id.png",
+    image: 'inventory-id.png',
   },
 
   belt: {
-    displayName: "belt",
+    displayName: 'belt',
     gridSpot: getGridSpotKey([4, 2]),
-    image: "inventory-belt.png",
+    image: 'inventory-belt.png',
   },
 
   back: {
-    displayName: "backpack",
+    displayName: 'backpack',
     gridSpot: getGridSpotKey([4, 3]),
-    image: "inventory-back.png",
+    image: 'inventory-back.png',
   },
 
   left_pocket: {
-    displayName: "left pocket",
+    displayName: 'left pocket',
     gridSpot: getGridSpotKey([4, 4]),
-    image: "inventory-pocket.png",
+    image: 'inventory-pocket.png',
   },
 
   right_pocket: {
-    displayName: "right pocket",
+    displayName: 'right pocket',
     gridSpot: getGridSpotKey([4, 5]),
-    image: "inventory-pocket.png",
+    image: 'inventory-pocket.png',
   },
 };
 
@@ -260,10 +260,10 @@ export const StripMenu = (props, context) => {
     <Window title={`Stripping ${data.name}`} width={400} height={400}>
       <Window.Content>
         <Stack fill vertical>
-          {range(0, ROWS).map(row => (
+          {range(0, ROWS).map((row) => (
             <Stack.Item key={row}>
               <Stack fill>
-                {range(0, COLUMNS).map(column => {
+                {range(0, COLUMNS).map((column) => {
                   const key = getGridSpotKey([row, column]);
                   const keyAtSpot = gridSpots.get(key);
 
@@ -289,7 +289,7 @@ export const StripMenu = (props, context) => {
 
                   if (item === null) {
                     tooltip = slot.displayName;
-                  } else if ("name" in item) {
+                  } else if ('name' in item) {
                     if (item.alternate) {
                       alternateAction = ALTERNATE_ACTIONS[item.alternate];
                     }
@@ -301,28 +301,28 @@ export const StripMenu = (props, context) => {
                         height="100%"
                         width="100%"
                         style={{
-                          "-ms-interpolation-mode": "nearest-neighbor",
-                          "vertical-align": "middle",
+                          '-ms-interpolation-mode': 'nearest-neighbor',
+                          'vertical-align': 'middle',
                         }}
                       />
                     );
 
                     tooltip = item.name;
-                  } else if ("obscured" in item) {
+                  } else if ('obscured' in item) {
                     content = (
                       <Icon
                         name={
                           item.obscured === ObscuringLevel.Completely
-                            ? "ban"
-                            : "eye-slash"
+                            ? 'ban'
+                            : 'eye-slash'
                         }
                         size={3}
                         ml={0}
                         mt={1.3}
                         style={{
-                          "text-align": "center",
-                          height: "100%",
-                          width: "100%",
+                          'text-align': 'center',
+                          height: '100%',
+                          width: '100%',
                         }}
                       />
                     );
@@ -340,14 +340,14 @@ export const StripMenu = (props, context) => {
                     >
                       <Box
                         style={{
-                          position: "relative",
-                          width: "100%",
-                          height: "100%",
+                          position: 'relative',
+                          width: '100%',
+                          height: '100%',
                         }}
                       >
                         <Button
                           onClick={() => {
-                            act("use", {
+                            act('use', {
                               key: keyAtSpot,
                             });
                           }}
@@ -355,11 +355,11 @@ export const StripMenu = (props, context) => {
                           tooltip={tooltip}
                           style={{
                             background: item?.interacting
-                              ? "hsl(39, 73%, 30%)"
+                              ? 'hsl(39, 73%, 30%)'
                               : undefined,
-                            position: "relative",
-                            width: "100%",
-                            height: "100%",
+                            position: 'relative',
+                            width: '100%',
+                            height: '100%',
                             padding: 0,
                           }}
                         >
@@ -372,9 +372,7 @@ export const StripMenu = (props, context) => {
                             />
                           )}
 
-                          <Box style={{ position: "relative" }}>
-                            {content}
-                          </Box>
+                          <Box style={{ position: 'relative' }}>{content}</Box>
 
                           {slot.additionalComponent}
                         </Button>
@@ -382,17 +380,17 @@ export const StripMenu = (props, context) => {
                         {alternateAction !== undefined && (
                           <Button
                             onClick={() => {
-                              act("alt", {
+                              act('alt', {
                                 key: keyAtSpot,
                               });
                             }}
                             tooltip={alternateAction.text}
                             style={{
-                              background: "rgba(0, 0, 0, 0.6)",
-                              position: "absolute",
+                              background: 'rgba(0, 0, 0, 0.6)',
+                              position: 'absolute',
                               bottom: 0,
                               right: 0,
-                              "z-index": 2,
+                              'z-index': 2,
                             }}
                           >
                             <Icon name={alternateAction.icon} />
diff --git a/tgui/packages/tgui/interfaces/SupermatterMonitor.js b/tgui/packages/tgui/interfaces/SupermatterMonitor.js
index 4b201e879f9c..9a0c3f426833 100644
--- a/tgui/packages/tgui/interfaces/SupermatterMonitor.js
+++ b/tgui/packages/tgui/interfaces/SupermatterMonitor.js
@@ -2,7 +2,14 @@ import { sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { toFixed } from 'common/math';
 import { useBackend } from '../backend';
-import { Button, LabeledList, ProgressBar, Section, Stack, Table } from '../components';
+import {
+  Button,
+  LabeledList,
+  ProgressBar,
+  Section,
+  Stack,
+  Table,
+} from '../components';
 import { getGasColor, getGasLabel } from '../constants';
 import { Window } from '../layouts';
 
@@ -43,13 +50,16 @@ export const SupermatterMonitorContent = (props, context) => {
   return (
     <Section
       title={SM_uid + '. ' + SM_area_name}
-      buttons={!singlecrystal && (
-        <Button
-          icon="arrow-left"
-          content="Back"
-          onClick={() => act('PRG_clear')}
-        />
-      )}>
+      buttons={
+        !singlecrystal && (
+          <Button
+            icon="arrow-left"
+            content="Back"
+            onClick={() => act('PRG_clear')}
+          />
+        )
+      }
+    >
       <Stack>
         <Stack.Item width="270px">
           <Section title="Metrics">
@@ -73,7 +83,8 @@ export const SupermatterMonitorContent = (props, context) => {
                     good: [-Infinity, 150],
                     average: [150, 300],
                     bad: [300, Infinity],
-                  }}>
+                  }}
+                >
                   {toFixed(SM_power) + ' MeV/cm3'}
                 </ProgressBar>
               </LabeledList.Item>
@@ -87,7 +98,8 @@ export const SupermatterMonitorContent = (props, context) => {
                     good: [logScale(500), logScale(2000)],
                     average: [logScale(2000), logScale(4000)],
                     bad: [logScale(4000), Infinity],
-                  }}>
+                  }}
+                >
                   {toFixed(SM_ambienttemp) + ' K'}
                 </ProgressBar>
               </LabeledList.Item>
@@ -103,7 +115,8 @@ export const SupermatterMonitorContent = (props, context) => {
                       logScale(SM_bad_moles_amount),
                     ],
                     bad: [logScale(SM_bad_moles_amount), Infinity],
-                  }}>
+                  }}
+                >
                   {toFixed(SM_moles) + ' moles'}
                 </ProgressBar>
               </LabeledList.Item>
@@ -116,7 +129,8 @@ export const SupermatterMonitorContent = (props, context) => {
                     good: [-Infinity, logScale(5000)],
                     average: [logScale(5000), logScale(10000)],
                     bad: [logScale(10000), +Infinity],
-                  }}>
+                  }}
+                >
                   {toFixed(SM_ambientpressure) + ' kPa'}
                 </ProgressBar>
               </LabeledList.Item>
@@ -132,7 +146,8 @@ export const SupermatterMonitorContent = (props, context) => {
                     color={getGasColor(gas.name)}
                     value={gas.amount}
                     minValue={0}
-                    maxValue={gasMaxAmount}>
+                    maxValue={gasMaxAmount}
+                  >
                     {toFixed(gas.amount, 2) + '%'}
                   </ProgressBar>
                 </LabeledList.Item>
@@ -157,7 +172,8 @@ const SupermatterList = (props, context) => {
           content="Refresh"
           onClick={() => act('PRG_refresh')}
         />
-      }>
+      }
+    >
       <Table>
         {supermatters.map((sm) => (
           <Table.Row key={sm.uid}>
@@ -181,7 +197,8 @@ const SupermatterList = (props, context) => {
                 onClick={() =>
                   act('PRG_set', {
                     target: sm.uid,
-                  })}
+                  })
+                }
               />
             </Table.Cell>
           </Table.Row>
diff --git a/tgui/packages/tgui/interfaces/SurgeryInitiator.tsx b/tgui/packages/tgui/interfaces/SurgeryInitiator.tsx
index 00137c552eb5..06e9e040930f 100644
--- a/tgui/packages/tgui/interfaces/SurgeryInitiator.tsx
+++ b/tgui/packages/tgui/interfaces/SurgeryInitiator.tsx
@@ -1,28 +1,27 @@
-import { sortBy } from "common/collections";
-import { KEY_DOWN, KEY_ENTER, KEY_UP } from "common/keycodes";
-import { BooleanLike } from "common/react";
-import { Component } from "inferno";
-import { useBackend } from "../backend";
-import { Button, KeyListener, Stack } from "../components";
-import { BodyZone, BodyZoneSelector } from "../components/BodyZoneSelector";
-import { Window } from "../layouts";
+import { sortBy } from 'common/collections';
+import { KEY_DOWN, KEY_ENTER, KEY_UP } from 'common/keycodes';
+import { BooleanLike } from 'common/react';
+import { Component } from 'inferno';
+import { useBackend } from '../backend';
+import { Button, KeyListener, Stack } from '../components';
+import { BodyZone, BodyZoneSelector } from '../components/BodyZoneSelector';
+import { Window } from '../layouts';
 
 type Surgery = {
-  name: string,
-  blocked?: BooleanLike,
+  name: string;
+  blocked?: BooleanLike;
 };
 
 type SurgeryInitiatorData = {
-  selected_zone: BodyZone,
-  surgeries: Surgery[],
-  target_name: string,
+  selected_zone: BodyZone;
+  surgeries: Surgery[];
+  target_name: string;
 };
 
-const sortSurgeries
-  = sortBy((surgery: Surgery) => surgery.name);
+const sortSurgeries = sortBy((surgery: Surgery) => surgery.name);
 
 type SurgeryInitiatorInnerState = {
-  selectedSurgeryIndex: number,
+  selectedSurgeryIndex: number;
 };
 
 class SurgeryInitiatorInner extends Component<
@@ -31,7 +30,7 @@ class SurgeryInitiatorInner extends Component<
 > {
   state = {
     selectedSurgeryIndex: 0,
-  }
+  };
 
   componentDidMount() {
     this.updateSelectedSurgeryIndexState();
@@ -50,10 +49,9 @@ class SurgeryInitiatorInner extends Component<
   }
 
   findSelectedSurgeryAfter(after: number): number | undefined {
-    const foundIndex
-     = this.props.surgeries.findIndex(
-       (surgery, index) => index > after && !surgery.blocked
-     );
+    const foundIndex = this.props.surgeries.findIndex(
+      (surgery, index) => index > after && !surgery.blocked,
+    );
 
     return foundIndex === -1 ? undefined : foundIndex;
   }
@@ -74,16 +72,12 @@ class SurgeryInitiatorInner extends Component<
     const { selected_zone, surgeries, target_name } = this.props;
 
     return (
-      <Window
-        width={400}
-        height={350}
-        title={`Surgery on ${target_name}`}
-      >
+      <Window width={400} height={350} title={`Surgery on ${target_name}`}>
         <Window.Content>
           <Stack fill height="100%">
             <Stack.Item width="30%">
               <BodyZoneSelector
-                onClick={(zone) => act("change_zone", { new_zone: zone })}
+                onClick={(zone) => act('change_zone', { new_zone: zone })}
                 selectedZone={selected_zone}
               />
             </Stack.Item>
@@ -93,13 +87,15 @@ class SurgeryInitiatorInner extends Component<
                 {surgeries.map((surgery, index) => (
                   <Button
                     onClick={() => {
-                      act("start_surgery", {
+                      act('start_surgery', {
                         surgery_name: surgery.name,
                       });
                     }}
                     disabled={surgery.blocked}
                     selected={index === this.state.selectedSurgeryIndex}
-                    tooltip={surgery.blocked ? "Their body is covered!" : undefined}
+                    tooltip={
+                      surgery.blocked ? 'Their body is covered!' : undefined
+                    }
                     key={surgery.name}
                     fluid
                   >
@@ -121,8 +117,10 @@ class SurgeryInitiatorInner extends Component<
                     return {
                       selectedSurgeryIndex:
                         this.findSelectedSurgeryAfter(
-                          state.selectedSurgeryIndex
-                        ) || this.findSelectedSurgeryAfter(-1) || 0,
+                          state.selectedSurgeryIndex,
+                        ) ||
+                        this.findSelectedSurgeryAfter(-1) ||
+                        0,
                     };
                   });
 
@@ -132,19 +130,19 @@ class SurgeryInitiatorInner extends Component<
                     return {
                       selectedSurgeryIndex:
                         this.findSelectedSurgeryBefore(
-                          state.selectedSurgeryIndex - 1
-                        )
-                        ?? this.findSelectedSurgeryBefore(
-                          this.props.surgeries.length - 1
-                        )
-                        ?? 0,
+                          state.selectedSurgeryIndex - 1,
+                        ) ??
+                        this.findSelectedSurgeryBefore(
+                          this.props.surgeries.length - 1,
+                        ) ??
+                        0,
                     };
                   });
 
                   break;
                 case KEY_ENTER:
                   if (surgery) {
-                    act("start_surgery", {
+                    act('start_surgery', {
                       surgery_name: surgery.name,
                     });
                   }
diff --git a/tgui/packages/tgui/interfaces/SyndContractor.js b/tgui/packages/tgui/interfaces/SyndContractor.js
index b6809dddaee8..f7324d759258 100644
--- a/tgui/packages/tgui/interfaces/SyndContractor.js
+++ b/tgui/packages/tgui/interfaces/SyndContractor.js
@@ -1,6 +1,18 @@
 import { Component, Fragment } from 'inferno';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Flex, Grid, Icon, LabeledList, Modal, NoticeBox, Section, Table, Tabs } from '../components';
+import {
+  Box,
+  Button,
+  Flex,
+  Grid,
+  Icon,
+  LabeledList,
+  Modal,
+  NoticeBox,
+  Section,
+  Table,
+  Tabs,
+} from '../components';
 import { NtosWindow } from '../layouts';
 
 const CONTRACT_STATUS_INACTIVE = 1;
@@ -23,10 +35,10 @@ export class FakeTerminal extends Component {
   tick() {
     const { props, state } = this;
     if (state.currentIndex <= props.allMessages.length) {
-      this.setState(prevState => {
-        return ({
+      this.setState((prevState) => {
+        return {
           currentIndex: prevState.currentIndex + 1,
-        });
+        };
       });
       const { currentDisplay } = state;
       currentDisplay.push(props.allMessages[state.currentIndex]);
@@ -37,9 +49,7 @@ export class FakeTerminal extends Component {
   }
 
   componentDidMount() {
-    const {
-      linesPerSecond = 2.5,
-    } = this.props;
+    const { linesPerSecond = 2.5 } = this.props;
     this.timer = setInterval(() => this.tick(), 1000 / linesPerSecond);
   }
 
@@ -50,7 +60,7 @@ export class FakeTerminal extends Component {
   render() {
     return (
       <Box m={1}>
-        {this.state.currentDisplay.map(value => (
+        {this.state.currentDisplay.map((value) => (
           <Fragment key={value}>
             {value}
             <br />
@@ -63,10 +73,7 @@ export class FakeTerminal extends Component {
 
 export const SyndContractor = (props, context) => {
   return (
-    <NtosWindow
-      width={500}
-      height={600}
-      theme="syndicate">
+    <NtosWindow width={500} height={600} theme="syndicate">
       <NtosWindow.Content scrollable>
         <SyndContractorContent />
       </NtosWindow.Content>
@@ -78,79 +85,69 @@ export const SyndContractorContent = (props, context) => {
   const { data, act } = useBackend(context);
 
   const terminalMessages = [
-    "Recording biometric data...",
-    "Analyzing embedded syndicate info...",
-    "STATUS CONFIRMED",
-    "Contacting syndicate database...",
-    "Awaiting response...",
-    "Awaiting response...",
-    "Awaiting response...",
-    "Awaiting response...",
-    "Awaiting response...",
-    "Awaiting response...",
-    "Response received, ack 4851234...",
-    "CONFIRM ACC " + (Math.round(Math.random() * 20000)),
-    "Setting up private accounts...",
-    "CONTRACTOR ACCOUNT CREATED",
-    "Searching for available contracts...",
-    "Searching for available contracts...",
-    "Searching for available contracts...",
-    "Searching for available contracts...",
-    "CONTRACTS FOUND",
-    "WELCOME, AGENT",
+    'Recording biometric data...',
+    'Analyzing embedded syndicate info...',
+    'STATUS CONFIRMED',
+    'Contacting syndicate database...',
+    'Awaiting response...',
+    'Awaiting response...',
+    'Awaiting response...',
+    'Awaiting response...',
+    'Awaiting response...',
+    'Awaiting response...',
+    'Response received, ack 4851234...',
+    'CONFIRM ACC ' + Math.round(Math.random() * 20000),
+    'Setting up private accounts...',
+    'CONTRACTOR ACCOUNT CREATED',
+    'Searching for available contracts...',
+    'Searching for available contracts...',
+    'Searching for available contracts...',
+    'Searching for available contracts...',
+    'CONTRACTS FOUND',
+    'WELCOME, AGENT',
   ];
 
   const infoEntries = [
-    "SyndTract v2.0",
-    "",
+    'SyndTract v2.0',
+    '',
     "We've identified potentional high-value targets that are",
-    "currently assigned to your mission area. They are believed",
-    "to hold valuable information which could be of immediate",
-    "importance to our organisation.",
-    "",
-    "Listed below are all of the contracts available to you. You",
-    "are to bring the specified target to the designated",
-    "drop-off, and contact us via this uplink. We will send",
-    "a specialised extraction unit to put the body into.",
-    "",
-    "We want targets alive - but we will sometimes pay slight",
+    'currently assigned to your mission area. They are believed',
+    'to hold valuable information which could be of immediate',
+    'importance to our organisation.',
+    '',
+    'Listed below are all of the contracts available to you. You',
+    'are to bring the specified target to the designated',
+    'drop-off, and contact us via this uplink. We will send',
+    'a specialised extraction unit to put the body into.',
+    '',
+    'We want targets alive - but we will sometimes pay slight',
     "amounts if they're not, you just won't recieve the shown",
-    "bonus. You can redeem your payment through this uplink in",
-    "the form of raw telecrystals, which can be put into your",
-    "regular Syndicate uplink to purchase whatever you may need.",
-    "We provide you with these crystals the moment you send the",
-    "target up to us, which can be collected at anytime through",
-    "this system.",
-    "",
-    "Targets extracted will be ransomed back to the station once",
-    "their use to us is fulfilled, with us providing you a small",
-    "percentage cut. You may want to be mindful of them",
-    "identifying you when they come back. We provide you with",
-    "a standard contractor loadout, which will help cover your",
-    "identity.",
+    'bonus. You can redeem your payment through this uplink in',
+    'the form of raw telecrystals, which can be put into your',
+    'regular Syndicate uplink to purchase whatever you may need.',
+    'We provide you with these crystals the moment you send the',
+    'target up to us, which can be collected at anytime through',
+    'this system.',
+    '',
+    'Targets extracted will be ransomed back to the station once',
+    'their use to us is fulfilled, with us providing you a small',
+    'percentage cut. You may want to be mindful of them',
+    'identifying you when they come back. We provide you with',
+    'a standard contractor loadout, which will help cover your',
+    'identity.',
   ];
 
   const errorPane = !!data.error && (
     <Modal backgroundColor="red">
       <Flex align="center">
         <Flex.Item mr={2}>
-          <Icon
-            size={4}
-            name="exclamation-triangle" />
+          <Icon size={4} name="exclamation-triangle" />
         </Flex.Item>
-        <Flex.Item
-          mr={2}
-          grow={1}
-          textAlign="center">
-          <Box
-            width="260px"
-            textAlign="left"
-            minHeight="80px">
+        <Flex.Item mr={2} grow={1} textAlign="center">
+          <Box width="260px" textAlign="left" minHeight="80px">
             {data.error}
           </Box>
-          <Button
-            content="Dismiss"
-            onClick={() => act('PRG_clear_error')} />
+          <Button content="Dismiss" onClick={() => act('PRG_clear_error')} />
         </Flex.Item>
       </Flex>
     </Modal>
@@ -159,32 +156,26 @@ export const SyndContractorContent = (props, context) => {
   if (!data.logged_in) {
     return (
       <Section minHeight="525px">
-        <Box
-          width="100%"
-          textAlign="center">
+        <Box width="100%" textAlign="center">
           <Button
             content="REGISTER USER"
             color="transparent"
-            onClick={() => act('PRG_login')} />
+            onClick={() => act('PRG_login')}
+          />
         </Box>
-        {!!data.error && (
-          <NoticeBox>
-            {data.error}
-          </NoticeBox>
-        )}
+        {!!data.error && <NoticeBox>{data.error}</NoticeBox>}
       </Section>
     );
   }
 
   if (data.logged_in && data.first_load) {
     return (
-      <Box
-        backgroundColor="rgba(0, 0, 0, 0.8)"
-        minHeight="525px">
+      <Box backgroundColor="rgba(0, 0, 0, 0.8)" minHeight="525px">
         <FakeTerminal
           allMessages={terminalMessages}
           finishedTimeout={3000}
-          onFinished={() => act('PRG_set_first_load_finished')} />
+          onFinished={() => act('PRG_set_first_load_finished')}
+        />
       </Box>
     );
   }
@@ -192,19 +183,16 @@ export const SyndContractorContent = (props, context) => {
   if (data.info_screen) {
     return (
       <>
-        <Box
-          backgroundColor="rgba(0, 0, 0, 0.8)"
-          minHeight="500px">
-          <FakeTerminal
-            allMessages={infoEntries}
-            linesPerSecond={10} />
+        <Box backgroundColor="rgba(0, 0, 0, 0.8)" minHeight="500px">
+          <FakeTerminal allMessages={infoEntries} linesPerSecond={10} />
         </Box>
         <Button
           fluid
           content="CONTINUE"
           color="transparent"
           textAlign="center"
-          onClick={() => act('PRG_toggle_info')} />
+          onClick={() => act('PRG_toggle_info')}
+        />
       </>
     );
   }
@@ -222,7 +210,7 @@ export const StatusPane = (props, context) => {
 
   return (
     <Section
-      title={(
+      title={
         <>
           Contractor Status
           <Button
@@ -230,25 +218,29 @@ export const StatusPane = (props, context) => {
             color="transparent"
             mb={0}
             ml={1}
-            onClick={() => act('PRG_toggle_info')} />
+            onClick={() => act('PRG_toggle_info')}
+          />
         </>
-      )}
-      buttons={(
+      }
+      buttons={
         <Box bold mr={1}>
           {data.contract_rep} Rep
         </Box>
-      )}>
+      }
+    >
       <Grid>
         <Grid.Column size={0.85}>
           <LabeledList>
             <LabeledList.Item
               label="TC Available"
-              buttons={(
+              buttons={
                 <Button
                   content="Claim"
                   disabled={data.redeemable_tc <= 0}
-                  onClick={() => act('PRG_redeem_TC')} />
-              )}>
+                  onClick={() => act('PRG_redeem_TC')}
+                />
+              }
+            >
               {data.redeemable_tc}
             </LabeledList.Item>
             <LabeledList.Item label="TC Earned">
@@ -261,9 +253,7 @@ export const StatusPane = (props, context) => {
             <LabeledList.Item label="Contracts Completed">
               {data.contracts_completed}
             </LabeledList.Item>
-            <LabeledList.Item label="Current Status">
-              ACTIVE
-            </LabeledList.Item>
+            <LabeledList.Item label="Current Status">ACTIVE</LabeledList.Item>
           </LabeledList>
         </Grid.Column>
       </Grid>
@@ -277,23 +267,15 @@ export const SyndPane = (props, context) => {
     <>
       <StatusPane state={props.state} />
       <Tabs>
-        <Tabs.Tab
-          selected={tab === 1}
-          onClick={() => setTab(1)}>
+        <Tabs.Tab selected={tab === 1} onClick={() => setTab(1)}>
           Contracts
         </Tabs.Tab>
-        <Tabs.Tab
-          selected={tab === 2}
-          onClick={() => setTab(2)}>
+        <Tabs.Tab selected={tab === 2} onClick={() => setTab(2)}>
           Hub
         </Tabs.Tab>
       </Tabs>
-      {tab === 1 && (
-        <ContractsTab />
-      )}
-      {tab === 2 && (
-        <HubTab />
-      )}
+      {tab === 1 && <ContractsTab />}
+      {tab === 2 && <HubTab />}
     </>
   );
 };
@@ -305,60 +287,59 @@ const ContractsTab = (props, context) => {
     <>
       <Section
         title="Available Contracts"
-        buttons={(
+        buttons={
           <Button
             content="Call Extraction"
             disabled={!data.ongoing_contract || data.extraction_enroute}
-            onClick={() => act('PRG_call_extraction')} />
-        )}>
-        {contracts.map(contract => {
-          if (data.ongoing_contract
-            && contract.status !== CONTRACT_STATUS_ACTIVE) {
+            onClick={() => act('PRG_call_extraction')}
+          />
+        }
+      >
+        {contracts.map((contract) => {
+          if (
+            data.ongoing_contract &&
+            contract.status !== CONTRACT_STATUS_ACTIVE
+          ) {
             return;
           }
-          const active = (contract.status > CONTRACT_STATUS_INACTIVE);
+          const active = contract.status > CONTRACT_STATUS_INACTIVE;
           if (contract.status >= CONTRACT_STATUS_COMPLETE) {
             return;
           }
           return (
             <Section
               key={contract.target}
-              title={contract.target
-                ? `${contract.target} (${contract.target_rank})`
-                : "Invalid Target"}
+              title={
+                contract.target
+                  ? `${contract.target} (${contract.target_rank})`
+                  : 'Invalid Target'
+              }
               level={active ? 1 : 2}
-              buttons={(
+              buttons={
                 <>
-                  <Box
-                    inline
-                    bold
-                    mr={1}>
+                  <Box inline bold mr={1}>
                     {contract.payout} (+{contract.payout_bonus}) TC
                   </Box>
                   <Button
-                    content={active ? "Abort" : "Accept"}
+                    content={active ? 'Abort' : 'Accept'}
                     disabled={contract.extraction_enroute}
-                    color={active && "bad"}
-                    onClick={() => act(
-                      'PRG_contract' + (active ? '_abort' : '-accept'),
-                      {
+                    color={active && 'bad'}
+                    onClick={() =>
+                      act('PRG_contract' + (active ? '_abort' : '-accept'), {
                         contract_id: contract.id,
-                      })} />
+                      })
+                    }
+                  />
                 </>
-              )}>
+              }
+            >
               <Grid>
-                <Grid.Column>
-                  {contract.message}
-                </Grid.Column>
+                <Grid.Column>{contract.message}</Grid.Column>
                 <Grid.Column size={0.5}>
-                  <Box
-                    bold
-                    mb={1}>
+                  <Box bold mb={1}>
                     Dropoff Location:
                   </Box>
-                  <Box>
-                    {contract.dropoff}
-                  </Box>
+                  <Box>{contract.dropoff}</Box>
                 </Grid.Column>
               </Grid>
             </Section>
@@ -368,10 +349,9 @@ const ContractsTab = (props, context) => {
       <Section
         title="Dropoff Locator"
         textAlign="center"
-        opacity={data.ongoing_contract ? 100 : 0}>
-        <Box bold>
-          {data.dropoff_direction}
-        </Box>
+        opacity={data.ongoing_contract ? 100 : 0}
+      >
+        <Box bold>{data.dropoff_direction}</Box>
       </Section>
     </>
   );
@@ -382,15 +362,15 @@ const HubTab = (props, context) => {
   const contractor_hub_items = data.contractor_hub_items || [];
   return (
     <Section>
-      {contractor_hub_items.map(item => {
-        const repInfo = item.cost ? (item.cost + ' Rep') : 'FREE';
-        const limited = (item.limited !== -1);
+      {contractor_hub_items.map((item) => {
+        const repInfo = item.cost ? item.cost + ' Rep' : 'FREE';
+        const limited = item.limited !== -1;
         return (
           <Section
             key={item.name}
             title={item.name + ' - ' + repInfo}
             level={2}
-            buttons={(
+            buttons={
               <>
                 {limited && (
                   <Box inline bold mr={1}>
@@ -399,25 +379,26 @@ const HubTab = (props, context) => {
                 )}
                 <Button
                   content="Purchase"
-                  disabled={data.contract_rep < item.cost
-                    || (limited && item.limited <= 0)}
-                  onClick={() => act('buy_hub', {
-                    item: item.name,
-                    cost: item.cost,
-                  })} />
+                  disabled={
+                    data.contract_rep < item.cost ||
+                    (limited && item.limited <= 0)
+                  }
+                  onClick={() =>
+                    act('buy_hub', {
+                      item: item.name,
+                      cost: item.cost,
+                    })
+                  }
+                />
               </>
-            )}>
+            }
+          >
             <Table>
               <Table.Row>
                 <Table.Cell>
-                  <Icon
-                    fontSize="60px"
-                    name={item.item_icon} />
-                </Table.Cell>
-                <Table.Cell
-                  verticalAlign="top">
-                  {item.desc}
+                  <Icon fontSize="60px" name={item.item_icon} />
                 </Table.Cell>
+                <Table.Cell verticalAlign="top">{item.desc}</Table.Cell>
               </Table.Row>
             </Table>
           </Section>
diff --git a/tgui/packages/tgui/interfaces/Tank.js b/tgui/packages/tgui/interfaces/Tank.js
index 7b5f20b83459..288a87443310 100644
--- a/tgui/packages/tgui/interfaces/Tank.js
+++ b/tgui/packages/tgui/interfaces/Tank.js
@@ -1,10 +1,16 @@
 import { toFixed } from 'common/math';
 import { useBackend } from '../backend';
-import { Button, LabeledControls, NumberInput, RoundGauge, Section } from '../components';
+import {
+  Button,
+  LabeledControls,
+  NumberInput,
+  RoundGauge,
+  Section,
+} from '../components';
 import { formatSiUnit } from '../format';
 import { Window } from '../layouts';
 
-const formatPressure = value => {
+const formatPressure = (value) => {
   if (value < 10000) {
     return toFixed(value) + ' kPa';
   }
@@ -24,9 +30,7 @@ export const Tank = (props, context) => {
     connected,
   } = data;
   return (
-    <Window
-      width={275}
-      height={120}>
+    <Window width={275} height={120}>
       <Window.Content>
         <Section>
           <LabeledControls>
@@ -37,20 +41,24 @@ export const Tank = (props, context) => {
                 maxValue={fragmentPressure * 1.15}
                 alertAfter={leakPressure}
                 ranges={{
-                  "good": [0, leakPressure],
-                  "average": [leakPressure, fragmentPressure],
-                  "bad": [fragmentPressure, fragmentPressure * 1.15],
+                  good: [0, leakPressure],
+                  average: [leakPressure, fragmentPressure],
+                  bad: [fragmentPressure, fragmentPressure * 1.15],
                 }}
                 format={formatPressure}
-                size={2} />
+                size={2}
+              />
             </LabeledControls.Item>
             <LabeledControls.Item label="Pressure Regulator">
               <Button
                 icon="fast-backward"
                 disabled={data.ReleasePressure === data.minReleasePressure}
-                onClick={() => act('pressure', {
-                  pressure: 'min',
-                })} />
+                onClick={() =>
+                  act('pressure', {
+                    pressure: 'min',
+                  })
+                }
+              />
               <NumberInput
                 animated
                 value={parseFloat(data.releasePressure)}
@@ -58,22 +66,31 @@ export const Tank = (props, context) => {
                 unit="kPa"
                 minValue={data.minReleasePressure}
                 maxValue={data.maxReleasePressure}
-                onChange={(e, value) => act('pressure', {
-                  pressure: value,
-                })} />
+                onChange={(e, value) =>
+                  act('pressure', {
+                    pressure: value,
+                  })
+                }
+              />
               <Button
                 icon="fast-forward"
                 disabled={data.ReleasePressure === data.maxReleasePressure}
-                onClick={() => act('pressure', {
-                  pressure: 'max',
-                })} />
+                onClick={() =>
+                  act('pressure', {
+                    pressure: 'max',
+                  })
+                }
+              />
               <Button
                 icon="undo"
                 content=""
                 disabled={data.ReleasePressure === data.defaultReleasePressure}
-                onClick={() => act('pressure', {
-                  pressure: 'reset',
-                })} />
+                onClick={() =>
+                  act('pressure', {
+                    pressure: 'reset',
+                  })
+                }
+              />
             </LabeledControls.Item>
           </LabeledControls>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/TankCompressor.js b/tgui/packages/tgui/interfaces/TankCompressor.js
index d78c4116199e..29822250fea9 100644
--- a/tgui/packages/tgui/interfaces/TankCompressor.js
+++ b/tgui/packages/tgui/interfaces/TankCompressor.js
@@ -37,15 +37,16 @@ const TankCompressorContent = (props, context) => {
       {currentTab === 2 && <TankCompressorRecords />}
       <Stack.Item>
         <Section
-          title={disk ? disk + ' (' + storage + ')' : 'No Disk Inserted'}>
+          title={disk ? disk + ' (' + storage + ')' : 'No Disk Inserted'}
+        >
           <Stack>
             <Stack.Item grow>
               <Button
                 textAlign="center"
                 fluid
                 icon={currentTab === 1 ? 'clipboard-list' : 'times'}
-                onClick={() =>
-                  currentTab === 1 ? changeTab(2) : changeTab(1)}>
+                onClick={() => (currentTab === 1 ? changeTab(2) : changeTab(1))}
+              >
                 {currentTab === 1 ? 'Open Records' : 'Close Records'}
               </Button>
             </Stack.Item>
@@ -74,7 +75,8 @@ const AlertBoxes = (props, context) => {
       bold
       height="100%"
       fontSize={1.25}
-      backgroundColor={active ? color : '#999999'}>
+      backgroundColor={active ? color : '#999999'}
+    >
       <Flex height="100%" width="100%" justify="center" direction="column">
         <Flex.Item>
           <Icon name={icon_name} width={2} />
@@ -114,10 +116,12 @@ const TankCompressorControls = (props, context) => {
             <Button
               icon="eject"
               disabled={!tankPresent || tankPressure > ejectPressure}
-              onClick={() => act('eject_tank')}>
+              onClick={() => act('eject_tank')}
+            >
               {'Eject Tank'}
             </Button>
-          }>
+          }
+        >
           {!pressure && <Modal>{'No Pressure Detected'}</Modal>}
           {usingLastData && (
             <NoticeBox warning>
@@ -132,9 +136,9 @@ const TankCompressorControls = (props, context) => {
                 maxValue={fragmentPressure * 1.15}
                 alertAfter={leakPressure}
                 ranges={{
-                  'good': [0, leakPressure],
-                  'average': [leakPressure, fragmentPressure],
-                  'bad': [fragmentPressure, fragmentPressure * 1.15],
+                  good: [0, leakPressure],
+                  average: [leakPressure, fragmentPressure],
+                  bad: [fragmentPressure, fragmentPressure * 1.15],
                 }}
                 size={5}
                 textAlign="center"
@@ -167,9 +171,9 @@ const TankCompressorControls = (props, context) => {
                     icon_name="biohazard"
                     color="red"
                     active={
-                      (pressure >= leakPressure
-                        && pressure < fragmentPressure)
-                      || leaking
+                      (pressure >= leakPressure &&
+                        pressure < fragmentPressure) ||
+                      leaking
                     }
                   />
                 </Stack.Item>
@@ -198,7 +202,8 @@ const TankCompressorControls = (props, context) => {
                 step={0.5}
                 unit="L/S"
                 onDrag={(e, new_rate) =>
-                  act('change_rate', { target: new_rate })}
+                  act('change_rate', { target: new_rate })
+                }
               />
             </Stack.Item>
             <Stack.Item>
@@ -208,7 +213,8 @@ const TankCompressorControls = (props, context) => {
                 }
                 selected={active}
                 icon={active ? 'power-off' : 'times'}
-                onClick={() => act('toggle_injection')}>
+                onClick={() => act('toggle_injection')}
+              >
                 {active ? 'On' : 'Off'}
               </Button>
             </Stack.Item>
@@ -239,7 +245,8 @@ const TankCompressorControls = (props, context) => {
                   icon="exclamation"
                   tooltip="The buffer gas mixture will be recorded when a tank is destroyed or ejected. The printed records will refer to this port for it's experimental data."
                 />
-              }>
+              }
+            >
               {!bufferData.total_moles && <Modal>{'No Gas Present'}</Modal>}
               <GasmixParser gasmix={bufferData} />
             </Section>
@@ -256,11 +263,11 @@ const TankCompressorRecords = (props, context) => {
   const [activeRecordRef, setActiveRecordRef] = useSharedState(
     context,
     'recordRef',
-    records[0]?.ref
+    records[0]?.ref,
   );
-  const activeRecord
-    = !!activeRecordRef
-    && records.find((record) => activeRecordRef === record.ref);
+  const activeRecord =
+    !!activeRecordRef &&
+    records.find((record) => activeRecordRef === record.ref);
   if (records.length === 0) {
     return (
       <Stack.Item grow>
@@ -278,7 +285,8 @@ const TankCompressorRecords = (props, context) => {
                   icon="file"
                   key={record.name}
                   selected={record.ref === activeRecordRef}
-                  onClick={() => setActiveRecordRef(record.ref)}>
+                  onClick={() => setActiveRecordRef(record.ref)}
+                >
                   {record.name}
                 </Tabs.Tab>
               ))}
@@ -296,7 +304,7 @@ const TankCompressorRecords = (props, context) => {
                     color="bad"
                     onClick={() => {
                       act('delete_record', {
-                        'ref': activeRecord.ref,
+                        ref: activeRecord.ref,
                       });
                     }}
                   />,
@@ -309,11 +317,12 @@ const TankCompressorRecords = (props, context) => {
                     tooltipPosition="bottom"
                     onClick={() => {
                       act('print_record', {
-                        'ref': activeRecord.ref,
+                        ref: activeRecord.ref,
                       });
                     }}
                   />,
-                ]}>
+                ]}
+              >
                 <LabeledList>
                   <LabeledList.Item label="Timestamp">
                     {activeRecord.timestamp}
diff --git a/tgui/packages/tgui/interfaces/TankDispenser.js b/tgui/packages/tgui/interfaces/TankDispenser.js
index e1e2ae6ea083..1be9c0d860ae 100644
--- a/tgui/packages/tgui/interfaces/TankDispenser.js
+++ b/tgui/packages/tgui/interfaces/TankDispenser.js
@@ -5,32 +5,34 @@ import { Window } from '../layouts';
 export const TankDispenser = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={275}
-      height={103}>
+    <Window width={275} height={103}>
       <Window.Content>
         <Section>
           <LabeledList>
             <LabeledList.Item
               label="Plasma"
-              buttons={(
+              buttons={
                 <Button
                   icon={data.plasma ? 'square' : 'square-o'}
                   content="Dispense"
                   disabled={!data.plasma}
-                  onClick={() => act('plasma')} />
-              )}>
+                  onClick={() => act('plasma')}
+                />
+              }
+            >
               {data.plasma}
             </LabeledList.Item>
             <LabeledList.Item
               label="Oxygen"
-              buttons={(
+              buttons={
                 <Button
                   icon={data.oxygen ? 'square' : 'square-o'}
                   content="Dispense"
                   disabled={!data.oxygen}
-                  onClick={() => act('oxygen')} />
-              )}>
+                  onClick={() => act('oxygen')}
+                />
+              }
+            >
               {data.oxygen}
             </LabeledList.Item>
           </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/Teg.js b/tgui/packages/tgui/interfaces/Teg.js
index da3cc655196c..d27714ff7e4a 100644
--- a/tgui/packages/tgui/interfaces/Teg.js
+++ b/tgui/packages/tgui/interfaces/Teg.js
@@ -24,20 +24,33 @@ export const Teg = (props, context) => {
         <Section title="Status">
           <Button
             content="Refresh Parts"
-            onClick={() => act('refresh_parts')} />
+            onClick={() => act('refresh_parts')}
+          />
           <Box m={1}>Power Output: {power_output}</Box>
           <Box m={1}>
-            {has_powernet && (<Box color="good">Connected to the power network</Box>)}
-            {(has_hot_circ && has_cold_circ) && (<Box color="good">Circulators connected to generator</Box>)}
-            {!has_powernet && (<Box color="bad">Not connected to the power network</Box>)}
-            {!has_hot_circ && (<Box color="bad">Unable to locate hot circulator</Box>)}
-            {!has_cold_circ && (<Box color="bad">Unable to locate cold circulator</Box>)}
+            {has_powernet && (
+              <Box color="good">Connected to the power network</Box>
+            )}
+            {has_hot_circ && has_cold_circ && (
+              <Box color="good">Circulators connected to generator</Box>
+            )}
+            {!has_powernet && (
+              <Box color="bad">Not connected to the power network</Box>
+            )}
+            {!has_hot_circ && (
+              <Box color="bad">Unable to locate hot circulator</Box>
+            )}
+            {!has_cold_circ && (
+              <Box color="bad">Unable to locate cold circulator</Box>
+            )}
           </Box>
         </Section>
         <Stack justify="center">
           <Section title="Hot Circulator" width={260} height={15}>
             <Stack.Item m={1}>
-              <Box mx={1} bold>Inlet</Box>
+              <Box mx={1} bold>
+                Inlet
+              </Box>
               <LabeledList.Item label="Temperature">
                 {hot_temp_in} K
               </LabeledList.Item>
@@ -46,7 +59,9 @@ export const Teg = (props, context) => {
               </LabeledList.Item>
             </Stack.Item>
             <Stack.Item m={1}>
-              <Box mx={1} bold>Outlet</Box>
+              <Box mx={1} bold>
+                Outlet
+              </Box>
               <LabeledList.Item label="Temperature">
                 {hot_temp_out} K
               </LabeledList.Item>
@@ -57,7 +72,9 @@ export const Teg = (props, context) => {
           </Section>
           <Section title="Cold Circulator" width={260} height={15}>
             <Stack.Item m={1}>
-              <Box mx={1} bold>Inlet</Box>
+              <Box mx={1} bold>
+                Inlet
+              </Box>
               <LabeledList.Item label="Temperature">
                 {cold_temp_in} K
               </LabeledList.Item>
@@ -66,7 +83,9 @@ export const Teg = (props, context) => {
               </LabeledList.Item>
             </Stack.Item>
             <Stack.Item m={1}>
-              <Box mx={1} bold>Outlet</Box>
+              <Box mx={1} bold>
+                Outlet
+              </Box>
               <LabeledList.Item label="Temperature">
                 {cold_temp_out} K
               </LabeledList.Item>
diff --git a/tgui/packages/tgui/interfaces/Telecomms.js b/tgui/packages/tgui/interfaces/Telecomms.js
index ad83346594c3..6fee58080148 100644
--- a/tgui/packages/tgui/interfaces/Telecomms.js
+++ b/tgui/packages/tgui/interfaces/Telecomms.js
@@ -1,5 +1,15 @@
 import { useBackend } from '../backend';
-import { Button, Input, LabeledList, Section, Table, NoticeBox, NumberInput, LabeledControls, Box } from '../components';
+import {
+  Button,
+  Input,
+  LabeledList,
+  Section,
+  Table,
+  NoticeBox,
+  NumberInput,
+  LabeledControls,
+  Box,
+} from '../components';
 import { RADIO_CHANNELS } from '../constants';
 import { Window } from '../layouts';
 
@@ -24,74 +34,83 @@ export const Telecomms = (props, context) => {
   const linked = data.linked || [];
   const frequencies = data.frequencies || [];
   return (
-    <Window
-      title={id}
-      width={400}
-      height={600}>
+    <Window title={id} width={400} height={600}>
       <Window.Content scrollable>
-        {!multitool && (
-          <NoticeBox>Use a multitool to make changes.</NoticeBox>
-        )}
+        {!multitool && <NoticeBox>Use a multitool to make changes.</NoticeBox>}
         <Section title="Settings">
           <LabeledList>
             <LabeledList.Item
               label="Power"
               buttons={
                 <Button
-                  icon={toggled ? "power-off" : "times"}
-                  content={toggled ? "On" : "Off"}
-                  color={toggled ? "good" : "bad"}
+                  icon={toggled ? 'power-off' : 'times'}
+                  content={toggled ? 'On' : 'Off'}
+                  color={toggled ? 'good' : 'bad'}
                   disabled={!multitool}
-                  onClick={() => act('toggle')} />
-              } />
+                  onClick={() => act('toggle')}
+                />
+              }
+            />
             <LabeledList.Item
               label="Identification String"
               buttons={
                 <Input
                   width={13}
                   value={id}
-                  onChange={(e, value) => act('id', { value })} />
-              } />
+                  onChange={(e, value) => act('id', { value })}
+                />
+              }
+            />
             <LabeledList.Item
               label="Network"
               buttons={
                 <Input
                   width={10}
                   value={network}
-                  defaultValue={"tcommsat"}
-                  onChange={(e, value) => act('network', { value })} />
-              } />
+                  defaultValue={'tcommsat'}
+                  onChange={(e, value) => act('network', { value })}
+                />
+              }
+            />
             <LabeledList.Item
               label="Prefabrication"
               buttons={
                 <Button
-                  icon={prefab ? "check" : "times"}
-                  content={prefab ? "True" : "False"}
-                  disabled={"True"} />
-              } />
+                  icon={prefab ? 'check' : 'times'}
+                  content={prefab ? 'True' : 'False'}
+                  disabled={'True'}
+                />
+              }
+            />
           </LabeledList>
         </Section>
         {!!(toggled && multitool) && (
           <Box>
-            {(type === 'bus') && (
+            {type === 'bus' && (
               <Section title="Bus">
                 <Table>
                   <Table.Row>
+                    <Table.Cell>Change Frequency:</Table.Cell>
                     <Table.Cell>
-                      Change Frequency:
-                    </Table.Cell>
-                    <Table.Cell>
-                      {RADIO_CHANNELS
-                        .find(channel => channel.freq === changefrequency) && (
+                      {RADIO_CHANNELS.find(
+                        (channel) => channel.freq === changefrequency,
+                      ) && (
                         <Box
                           inline
-                          color={RADIO_CHANNELS
-                            .find(channel => channel.freq === changefrequency)
-                            .color}
-                          ml={2}>
-                          [{RADIO_CHANNELS
-                            .find(channel => channel
-                              .freq === changefrequency).name}]
+                          color={
+                            RADIO_CHANNELS.find(
+                              (channel) => channel.freq === changefrequency,
+                            ).color
+                          }
+                          ml={2}
+                        >
+                          [
+                          {
+                            RADIO_CHANNELS.find(
+                              (channel) => channel.freq === changefrequency,
+                            ).name
+                          }
+                          ]
                         </Box>
                       )}
                     </Table.Cell>
@@ -103,11 +122,10 @@ export const Telecomms = (props, context) => {
                       minValue={minfreq / 10}
                       maxValue={maxfreq / 10}
                       value={changefrequency / 10}
-                      onChange={(e, value) => act(
-                        'change_freq', { value })}
+                      onChange={(e, value) => act('change_freq', { value })}
                     />
                     <Button
-                      icon={"times"}
+                      icon={'times'}
                       disabled={changefrequency === 0}
                       onClick={() => act('change_freq', { value: 10001 })}
                     />
@@ -115,32 +133,35 @@ export const Telecomms = (props, context) => {
                 </Table>
               </Section>
             )}
-            {(type === 'relay') && (
+            {type === 'relay' && (
               <Section title="Relay">
                 <Button
-                  content={"Receiving"}
+                  content={'Receiving'}
                   icon={receiving ? 'volume-up' : 'volume-mute'}
                   color={receiving ? '' : 'bad'}
-                  onClick={() => act('receive')} />
+                  onClick={() => act('receive')}
+                />
                 <Button
-                  content={"Broadcasting"}
+                  content={'Broadcasting'}
                   icon={broadcasting ? 'microphone' : 'microphone-slash'}
                   color={broadcasting ? '' : 'bad'}
-                  onClick={() => act('broadcast')} />
+                  onClick={() => act('broadcast')}
+                />
               </Section>
             )}
             <Section title="Linked Network Entities">
               <Table>
-                {linked.map(entry => (
+                {linked.map((entry) => (
                   <Table.Row key={entry.id} className="candystripe">
                     <Table.Cell bold>
                       {entry.index}. {entry.id} ({entry.name})
                     </Table.Cell>
                     {!!multitool && (
                       <Button
-                        icon={"times"}
+                        icon={'times'}
                         disabled={!multitool}
-                        onClick={() => act('unlink', { value: entry.index })} />
+                        onClick={() => act('unlink', { value: entry.index })}
+                      />
                     )}
                   </Table.Row>
                 ))}
@@ -148,52 +169,65 @@ export const Telecomms = (props, context) => {
             </Section>
             <Section title="Filtered Frequencies">
               <Table>
-                {frequencies.map(entry => (
+                {frequencies.map((entry) => (
                   <Table.Row key={frequencies.i} className="candystripe">
-                    <Table.Cell bold>
-                      {entry/10} kHz
-                    </Table.Cell>
+                    <Table.Cell bold>{entry / 10} kHz</Table.Cell>
                     <Table.Cell>
-                      {RADIO_CHANNELS
-                        .find(channel => channel.freq === entry) && (
+                      {RADIO_CHANNELS.find(
+                        (channel) => channel.freq === entry,
+                      ) && (
                         <Box
                           inline
-                          color={RADIO_CHANNELS
-                            .find(channel => channel.freq === entry)
-                            .color}
-                          ml={2}>
-                          [{RADIO_CHANNELS
-                            .find(channel => channel
-                              .freq === entry).name } ]
+                          color={
+                            RADIO_CHANNELS.find(
+                              (channel) => channel.freq === entry,
+                            ).color
+                          }
+                          ml={2}
+                        >
+                          [
+                          {
+                            RADIO_CHANNELS.find(
+                              (channel) => channel.freq === entry,
+                            ).name
+                          }{' '}
+                          ]
                         </Box>
                       )}
                     </Table.Cell>
                     <Table.Cell />
                     {!!multitool && (
                       <Button
-                        icon={"times"}
+                        icon={'times'}
                         disabled={!multitool}
-                        onClick={() => act('delete', { value: entry })} />
+                        onClick={() => act('delete', { value: entry })}
+                      />
                     )}
                   </Table.Row>
                 ))}
                 {!!multitool && (
                   <Table.Row className="candystripe" collapsing>
+                    <Table.Cell>Add Frequency</Table.Cell>
                     <Table.Cell>
-                      Add Frequency
-                    </Table.Cell>
-                    <Table.Cell>
-                      {RADIO_CHANNELS
-                        .find(channel => channel.freq === frequency) && (
+                      {RADIO_CHANNELS.find(
+                        (channel) => channel.freq === frequency,
+                      ) && (
                         <Box
                           inline
-                          color={RADIO_CHANNELS
-                            .find(channel => channel.freq === frequency)
-                            .color}
-                          ml={2}>
-                          [{RADIO_CHANNELS
-                            .find(channel => channel
-                              .freq === frequency).name}]
+                          color={
+                            RADIO_CHANNELS.find(
+                              (channel) => channel.freq === frequency,
+                            ).color
+                          }
+                          ml={2}
+                        >
+                          [
+                          {
+                            RADIO_CHANNELS.find(
+                              (channel) => channel.freq === frequency,
+                            ).name
+                          }
+                          ]
                         </Box>
                       )}
                     </Table.Cell>
@@ -206,14 +240,14 @@ export const Telecomms = (props, context) => {
                         minValue={minfreq / 10}
                         maxValue={maxfreq / 10}
                         value={frequency / 10}
-                        onChange={(e, value) => act(
-                          "tempfreq", { value })}
+                        onChange={(e, value) => act('tempfreq', { value })}
                       />
                     </Table.Cell>
                     <Button
-                      icon={"plus"}
+                      icon={'plus'}
                       disabled={!multitool}
-                      onClick={() => act('freq')} />
+                      onClick={() => act('freq')}
+                    />
                   </Table.Row>
                 )}
               </Table>
@@ -227,22 +261,26 @@ export const Telecomms = (props, context) => {
                 )}
                 <LabeledControls m={1}>
                   <Button
-                    icon={"plus"}
-                    content={"Add Machine"}
+                    icon={'plus'}
+                    content={'Add Machine'}
                     disabled={!multitool}
-                    onClick={() => act('buffer')} />
+                    onClick={() => act('buffer')}
+                  />
                   <Button
-                    icon={"link"}
-                    content={"Link"}
+                    icon={'link'}
+                    content={'Link'}
                     disabled={!multibuff}
-                    onClick={() => act('link')} />
+                    onClick={() => act('link')}
+                  />
                   <Button
-                    icon={"times"}
-                    content={"Flush"}
+                    icon={'times'}
+                    content={'Flush'}
                     disabled={!multibuff}
-                    onClick={() => act('flush')} />
+                    onClick={() => act('flush')}
+                  />
                 </LabeledControls>
-              </Section>)}
+              </Section>
+            )}
           </Box>
         )}
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/Teleporter.js b/tgui/packages/tgui/interfaces/Teleporter.js
index 467f29e08377..16af9d19b475 100644
--- a/tgui/packages/tgui/interfaces/Teleporter.js
+++ b/tgui/packages/tgui/interfaces/Teleporter.js
@@ -13,55 +13,50 @@ export const Teleporter = (props, context) => {
     target,
   } = data;
   return (
-    <Window
-      width={360}
-      height={130}>
+    <Window width={360} height={130}>
       <Window.Content>
         <Section>
-          {!power_station && (
+          {(!power_station && (
             <Box color="bad" textAlign="center">
               No power station linked.
             </Box>
-          ) || (!teleporter_hub && (
-            <Box color="bad" textAlign="center">
-              No hub linked.
-            </Box>
-          )) || (
-            <LabeledList>
-              <LabeledList.Item label="Regime">
-                <Button
-                  content={regime_set}
-                  onClick={() => act('regimeset')} />
-              </LabeledList.Item>
-              <LabeledList.Item label="Target">
-                <Button
-                  icon="edit"
-                  content={target}
-                  onClick={() => act('settarget')} />
-              </LabeledList.Item>
-              <LabeledList.Item label="Calibration"
-                buttons={(
+          )) ||
+            (!teleporter_hub && (
+              <Box color="bad" textAlign="center">
+                No hub linked.
+              </Box>
+            )) || (
+              <LabeledList>
+                <LabeledList.Item label="Regime">
+                  <Button
+                    content={regime_set}
+                    onClick={() => act('regimeset')}
+                  />
+                </LabeledList.Item>
+                <LabeledList.Item label="Target">
                   <Button
-                    icon="tools"
-                    content="Calibrate"
-                    onClick={() => act('calibrate')} />
-                )}>
-                {calibrating && (
-                  <Box color="average">
-                    In Progress
-                  </Box>
-                ) || (calibrated && (
-                  <Box color="good">
-                    Optimal
-                  </Box>
-                ) || (
-                  <Box color="bad">
-                    Sub-Optimal
-                  </Box>
-                ))}
-              </LabeledList.Item>
-            </LabeledList>
-          )}
+                    icon="edit"
+                    content={target}
+                    onClick={() => act('settarget')}
+                  />
+                </LabeledList.Item>
+                <LabeledList.Item
+                  label="Calibration"
+                  buttons={
+                    <Button
+                      icon="tools"
+                      content="Calibrate"
+                      onClick={() => act('calibrate')}
+                    />
+                  }
+                >
+                  {(calibrating && <Box color="average">In Progress</Box>) ||
+                    (calibrated && <Box color="good">Optimal</Box>) || (
+                      <Box color="bad">Sub-Optimal</Box>
+                    )}
+                </LabeledList.Item>
+              </LabeledList>
+            )}
         </Section>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/TextInputModal.tsx b/tgui/packages/tgui/interfaces/TextInputModal.tsx
index d6c7ba0afc27..9ada30b6aaa6 100644
--- a/tgui/packages/tgui/interfaces/TextInputModal.tsx
+++ b/tgui/packages/tgui/interfaces/TextInputModal.tsx
@@ -20,7 +20,7 @@ export const TextInputModal = (_, context) => {
   const {
     large_buttons,
     max_length,
-    message = "",
+    message = '',
     multiline,
     placeholder,
     timeout,
@@ -29,7 +29,7 @@ export const TextInputModal = (_, context) => {
   const [input, setInput] = useLocalState<string>(
     context,
     'input',
-    placeholder || ''
+    placeholder || '',
   );
   const onType = (value: string) => {
     if (value === input) {
@@ -38,11 +38,11 @@ export const TextInputModal = (_, context) => {
     setInput(value);
   };
   // Dynamically changes the window height based on the message.
-  const windowHeight
-    = 135
-    + (message.length > 30 ? Math.ceil(message.length / 4) : 0)
-    + (multiline || input.length >= 30 ? 75 : 0)
-    + (message.length && large_buttons ? 5 : 0);
+  const windowHeight =
+    135 +
+    (message.length > 30 ? Math.ceil(message.length / 4) : 0) +
+    (multiline || input.length >= 30 ? 75 : 0) +
+    (message.length && large_buttons ? 5 : 0);
 
   return (
     <Window title={title} width={325} height={windowHeight}>
@@ -56,7 +56,8 @@ export const TextInputModal = (_, context) => {
           if (keyCode === KEY_ESCAPE) {
             act('cancel');
           }
-        }}>
+        }}
+      >
         <Section fill>
           <Stack fill vertical>
             <Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/ThermoMachine.js b/tgui/packages/tgui/interfaces/ThermoMachine.js
index a5b5f42ab805..4890d39a9258 100644
--- a/tgui/packages/tgui/interfaces/ThermoMachine.js
+++ b/tgui/packages/tgui/interfaces/ThermoMachine.js
@@ -1,40 +1,48 @@
 import { toFixed } from 'common/math';
 import { useBackend } from '../backend';
-import { AnimatedNumber, Button, LabeledList, NumberInput, Section } from '../components';
+import {
+  AnimatedNumber,
+  Button,
+  LabeledList,
+  NumberInput,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const ThermoMachine = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={300}
-      height={350}>
+    <Window width={300} height={350}>
       <Window.Content>
         <Section title="Status">
           <LabeledList>
             <LabeledList.Item label="Temperature">
               <AnimatedNumber
                 value={data.temperature}
-                format={value => toFixed(value, 2)} />
+                format={(value) => toFixed(value, 2)}
+              />
               {' K'}
             </LabeledList.Item>
             <LabeledList.Item label="Pressure">
               <AnimatedNumber
                 value={data.pressure}
-                format={value => toFixed(value, 2)} />
+                format={(value) => toFixed(value, 2)}
+              />
               {' kPa'}
             </LabeledList.Item>
           </LabeledList>
         </Section>
         <Section
           title="Controls"
-          buttons={(
+          buttons={
             <Button
               icon={data.on ? 'power-off' : 'times'}
               content={data.on ? 'On' : 'Off'}
               selected={data.on}
-              onClick={() => act('power')} />
-          )}>
+              onClick={() => act('power')}
+            />
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Target Temperature">
               <NumberInput
@@ -46,9 +54,12 @@ export const ThermoMachine = (props, context) => {
                 maxValue={Math.round(data.max)}
                 step={5}
                 stepPixelSize={3}
-                onDrag={(e, value) => act('target', {
-                  target: value,
-                })} />
+                onDrag={(e, value) =>
+                  act('target', {
+                    target: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Power">
               <NumberInput
@@ -60,32 +71,44 @@ export const ThermoMachine = (props, context) => {
                 maxValue={Math.round(data.max_power)}
                 step={5}
                 stepPixelSize={3}
-                onDrag={(e, value) => act('set_power', {
-                  target: value,
-                })} />
+                onDrag={(e, value) =>
+                  act('set_power', {
+                    target: value,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Presets">
               <Button
                 icon="fast-backward"
                 disabled={data.target === data.min}
                 title="Minimum temperature"
-                onClick={() => act('target', {
-                  target: data.min,
-                })} />
+                onClick={() =>
+                  act('target', {
+                    target: data.min,
+                  })
+                }
+              />
               <Button
                 icon="sync"
                 disabled={data.target === data.initial}
                 title="Room Temperature"
-                onClick={() => act('target', {
-                  target: data.initial,
-                })} />
+                onClick={() =>
+                  act('target', {
+                    target: data.initial,
+                  })
+                }
+              />
               <Button
                 icon="fast-forward"
                 disabled={data.target === data.max}
                 title="Maximum Temperature"
-                onClick={() => act('target', {
-                  target: data.max,
-                })} />
+                onClick={() =>
+                  act('target', {
+                    target: data.max,
+                  })
+                }
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/Thermometer.js b/tgui/packages/tgui/interfaces/Thermometer.js
index ac68196e252a..638d50663b6d 100644
--- a/tgui/packages/tgui/interfaces/Thermometer.js
+++ b/tgui/packages/tgui/interfaces/Thermometer.js
@@ -19,21 +19,22 @@ export class Thermometer extends Component {
   render() {
     const { act, data } = useBackend(this.context);
     return (
-      <Window
-        width={70}
-        height={430}>
+      <Window width={70} height={430}>
         <Stack
           fill
           align="center"
           justify="space-around"
           backgroundColor="#242322"
           style={{
-            'background-image': "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEVya3UjIyN3S/1dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAMSURBVAjXY2hgcAAAAcQAwUlFKkkAAAAASUVORK5CYII=')",
-          }}>
+            'background-image':
+              "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEVya3UjIyN3S/1dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAMSURBVAjXY2hgcAAAAcQAwUlFKkkAAAAASUVORK5CYII=')",
+          }}
+        >
           <Stack.Item ml={1}>
             <ThermometerIcon
               temperature={data.Temperature}
-              maxTemperature={1000} />
+              maxTemperature={1000}
+            />
           </Stack.Item>
         </Stack>
       </Window>
@@ -41,58 +42,60 @@ export class Thermometer extends Component {
   }
 }
 
-const ThermometerIcon = props => {
+const ThermometerIcon = (props) => {
   const { temperature, maxTemperature } = props;
   return (
     <Box>
       <Box
         style={{
-          'position': 'relative',
-          'width': '22px',
-          'height': '340px',
-          'margin': '0 auto',
+          position: 'relative',
+          width: '22px',
+          height: '340px',
+          margin: '0 auto',
           'background-color': '#595959',
-          'border': '4px solid #363636',
+          border: '4px solid #363636',
           'border-radius': '12px',
           'border-bottom': 'none',
           'border-index': '0',
           'box-shadow': '4px 4px #000000',
-        }}>
+        }}
+      >
         <Box
           style={{
-            'position': 'absolute',
-            'width': '5x',
-            'bottom': 0,
-            'left': '0px',
-            'right': 0,
-            'transition': 'height 2s ease-out',
+            position: 'absolute',
+            width: '5x',
+            bottom: 0,
+            left: '0px',
+            right: 0,
+            transition: 'height 2s ease-out',
             // Temp in %
-            'height': `${((temperature / maxTemperature)*100)}%`,
+            height: `${(temperature / maxTemperature) * 100}%`,
             'background-color': '#bd2020',
             'border-radius': '8px',
             'border-bottom': 'none',
             'z-index': '1',
-          }} />
+          }}
+        />
       </Box>
       <Box
         style={{
-          'position': 'relative',
-          'width': '56px',
+          position: 'relative',
+          width: '56px',
           'line-height': '48px',
           'text-align': 'center',
-          'margin': '-8px auto 0 auto',
+          margin: '-8px auto 0 auto',
           'background-color': '#bd2020',
-          'border': '4px solid #363636',
+          border: '4px solid #363636',
           'border-spacing': '5px',
           'border-radius': '35px',
           'border-index': '1',
           'border-bottom': '0.1',
           'box-shadow': '4px 4px #000000',
           'z-index': '0',
-        }}>
+        }}
+      >
         {temperature}K
       </Box>
     </Box>
   );
 };
-
diff --git a/tgui/packages/tgui/interfaces/Timer.js b/tgui/packages/tgui/interfaces/Timer.js
index f0e675ee9a19..37d01237773b 100644
--- a/tgui/packages/tgui/interfaces/Timer.js
+++ b/tgui/packages/tgui/interfaces/Timer.js
@@ -4,53 +4,50 @@ import { Window } from '../layouts';
 
 export const Timer = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    minutes,
-    seconds,
-    timing,
-    loop,
-  } = data;
+  const { minutes, seconds, timing, loop } = data;
   return (
-    <Window
-      width={275}
-      height={115}>
+    <Window width={275} height={115}>
       <Window.Content>
         <Section
           title="Timing Unit"
-          buttons={(
+          buttons={
             <>
               <Button
                 icon={'sync'}
                 content={loop ? 'Repeating' : 'Repeat'}
                 selected={loop}
-                onClick={() => act('repeat')} />
+                onClick={() => act('repeat')}
+              />
               <Button
-                icon={"clock-o"}
+                icon={'clock-o'}
                 content={timing ? 'Stop' : 'Start'}
                 selected={timing}
-                onClick={() => act('time')} />
+                onClick={() => act('time')}
+              />
             </>
-          )}>
+          }
+        >
           <Button
             icon="fast-backward"
             disabled={timing}
-            onClick={() => act('input', { adjust: -30 })} />
+            onClick={() => act('input', { adjust: -30 })}
+          />
           <Button
             icon="backward"
             disabled={timing}
-            onClick={() => act('input', { adjust: -1 })} />
-          {' '}
-          {String(minutes).padStart(2, '0')}:
-          {String(seconds).padStart(2, '0')}
-          {' '}
+            onClick={() => act('input', { adjust: -1 })}
+          />{' '}
+          {String(minutes).padStart(2, '0')}:{String(seconds).padStart(2, '0')}{' '}
           <Button
             icon="forward"
             disabled={timing}
-            onClick={() => act('input', { adjust: 1 })} />
+            onClick={() => act('input', { adjust: 1 })}
+          />
           <Button
             icon="fast-forward"
             disabled={timing}
-            onClick={() => act('input', { adjust: 30 })} />
+            onClick={() => act('input', { adjust: 30 })}
+          />
         </Section>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/TrackedPlaytime.js b/tgui/packages/tgui/interfaces/TrackedPlaytime.js
index 1ca9d04f92c0..e9020aff89b2 100644
--- a/tgui/packages/tgui/interfaces/TrackedPlaytime.js
+++ b/tgui/packages/tgui/interfaces/TrackedPlaytime.js
@@ -1,21 +1,22 @@
-import { sortBy } from "common/collections";
-import { useBackend } from "../backend";
-import { Box, Button, Flex, ProgressBar, Section, Table } from "../components";
-import { Window } from "../layouts";
+import { sortBy } from 'common/collections';
+import { useBackend } from '../backend';
+import { Box, Button, Flex, ProgressBar, Section, Table } from '../components';
+import { Window } from '../layouts';
 
 const JOB_REPORT_MENU_FAIL_REASON_TRACKING_DISABLED = 1;
 const JOB_REPORT_MENU_FAIL_REASON_NO_RECORDS = 2;
 
 const sortByPlaytime = sortBy(([_, playtime]) => -playtime);
 
-const PlaytimeSection = props => {
+const PlaytimeSection = (props) => {
   const { playtimes } = props;
 
-  const sortedPlaytimes = sortByPlaytime(Object.entries(playtimes))
-    .filter(entry => entry[1]);
+  const sortedPlaytimes = sortByPlaytime(Object.entries(playtimes)).filter(
+    (entry) => entry[1],
+  );
 
   if (!sortedPlaytimes.length) {
-    return "No recorded playtime hours for this section.";
+    return 'No recorded playtime hours for this section.';
   }
 
   const mostPlayed = sortedPlaytimes[0][1];
@@ -25,22 +26,25 @@ const PlaytimeSection = props => {
         const ratio = playtime / mostPlayed;
         return (
           <Table.Row key={jobName}>
-            <Table.Cell collapsing p={0.5} style={{
-              "vertical-align": "middle",
-            }}>
+            <Table.Cell
+              collapsing
+              p={0.5}
+              style={{
+                'vertical-align': 'middle',
+              }}
+            >
               <Box align="right">{jobName}</Box>
             </Table.Cell>
             <Table.Cell>
-              <ProgressBar
-                maxValue={mostPlayed}
-                value={playtime}>
+              <ProgressBar maxValue={mostPlayed} value={playtime}>
                 <Flex>
                   <Flex.Item width={`${ratio * 100}%`} />
                   <Flex.Item>
                     {(playtime / 60).toLocaleString(undefined, {
-                      "minimumFractionDigits": 1,
-                      "maximumFractionDigits": 1,
-                    })}h
+                      minimumFractionDigits: 1,
+                      maximumFractionDigits: 1,
+                    })}
+                    h
                   </Flex.Item>
                 </Flex>
               </ProgressBar>
@@ -65,39 +69,39 @@ export const TrackedPlaytime = (props, context) => {
     adminTime,
   } = data;
   return (
-    <Window
-      title="Tracked Playtime"
-      width={550}
-      height={650}>
+    <Window title="Tracked Playtime" width={550} height={650}>
       <Window.Content scrollable>
-        {failReason && (
-          failReason === JOB_REPORT_MENU_FAIL_REASON_TRACKING_DISABLED
-            && <Box>This server has disabled tracking.</Box>
-          || failReason === JOB_REPORT_MENU_FAIL_REASON_NO_RECORDS
-            && <Box>You have no records.</Box>
-        ) || (
+        {(failReason &&
+          ((failReason === JOB_REPORT_MENU_FAIL_REASON_TRACKING_DISABLED && (
+            <Box>This server has disabled tracking.</Box>
+          )) ||
+            (failReason === JOB_REPORT_MENU_FAIL_REASON_NO_RECORDS && (
+              <Box>You have no records.</Box>
+            )))) || (
           <Box>
             <Section title="Total">
               <PlaytimeSection
                 playtimes={{
-                  "Ghost": ghostTime,
-                  "Living": livingTime,
-                  "Admin": adminTime,
+                  Ghost: ghostTime,
+                  Living: livingTime,
+                  Admin: adminTime,
                 }}
               />
             </Section>
             <Section
               title="Jobs"
-              buttons={!!isAdmin && (
-                <Button.Checkbox
-                  checked={!!exemptStatus}
-                  onClick={() => act("toggle_exempt")}>
-                  Job Playtime Exempt
-                </Button.Checkbox>
-              )}>
-              <PlaytimeSection
-                playtimes={jobPlaytimes}
-              />
+              buttons={
+                !!isAdmin && (
+                  <Button.Checkbox
+                    checked={!!exemptStatus}
+                    onClick={() => act('toggle_exempt')}
+                  >
+                    Job Playtime Exempt
+                  </Button.Checkbox>
+                )
+              }
+            >
+              <PlaytimeSection playtimes={jobPlaytimes} />
             </Section>
             <Section title="Special">
               <PlaytimeSection playtimes={specialPlaytimes} />
diff --git a/tgui/packages/tgui/interfaces/TrainingMachine.js b/tgui/packages/tgui/interfaces/TrainingMachine.js
index debe2d5d051b..8773aa5c9b32 100644
--- a/tgui/packages/tgui/interfaces/TrainingMachine.js
+++ b/tgui/packages/tgui/interfaces/TrainingMachine.js
@@ -1,14 +1,19 @@
 import { useBackend } from '../backend';
-import { Box, Button, Divider, Flex, Knob, LabeledControls, Section } from '../components';
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Knob,
+  LabeledControls,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const TrainingMachine = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={230}
-      height={150}
-      title="AURUMILL">
+    <Window width={230} height={150} title="AURUMILL">
       <Window.Content>
         <Section fill title="Training Machine">
           <LabeledControls m={1}>
@@ -16,12 +21,12 @@ export const TrainingMachine = (props, context) => {
               <Knob
                 inline
                 size={1.2}
-                step={.5}
+                step={0.5}
                 stepPixelSize={10}
                 value={data.movespeed}
                 minValue={1}
                 maxValue={10}
-                onDrag={(e, value) => act("movespeed", { movespeed: value })}
+                onDrag={(e, value) => act('movespeed', { movespeed: value })}
               />
             </LabeledControls.Item>
             <LabeledControls.Item label="Range">
@@ -33,7 +38,7 @@ export const TrainingMachine = (props, context) => {
                 value={data.range}
                 minValue={1}
                 maxValue={7}
-                onDrag={(e, value) => act("range", { range: value })}
+                onDrag={(e, value) => act('range', { range: value })}
               />
             </LabeledControls.Item>
             <Flex.Item>
@@ -43,14 +48,11 @@ export const TrainingMachine = (props, context) => {
               <Button
                 fluid
                 selected={data.moving}
-                content={(
-                  <Box
-                    bold
-                    fontSize="1.4em"
-                    lineHeight={3}>
-                    {data.moving ? "END" : "BEGIN"}
+                content={
+                  <Box bold fontSize="1.4em" lineHeight={3}>
+                    {data.moving ? 'END' : 'BEGIN'}
                   </Box>
-                )}
+                }
                 onClick={() => act('toggle')}
               />
             </Flex.Item>
diff --git a/tgui/packages/tgui/interfaces/TraitorObjectiveDebug.tsx b/tgui/packages/tgui/interfaces/TraitorObjectiveDebug.tsx
index 3427ad9df325..3cf8cdc460d8 100644
--- a/tgui/packages/tgui/interfaces/TraitorObjectiveDebug.tsx
+++ b/tgui/packages/tgui/interfaces/TraitorObjectiveDebug.tsx
@@ -1,42 +1,42 @@
-import { useBackend, useLocalState } from "../backend";
-import { Box, LabeledList, Stack, Tabs, Tooltip } from "../components";
-import { Window } from "../layouts";
-import { getReputation } from "./Uplink/calculateReputationLevel";
+import { useBackend, useLocalState } from '../backend';
+import { Box, LabeledList, Stack, Tabs, Tooltip } from '../components';
+import { Window } from '../layouts';
+import { getReputation } from './Uplink/calculateReputationLevel';
 
 type Objective = {
-  name: string
-  description: string
-  progression_minimum: number
-  progression_maximum: number
-  global_progression_limit_coeff: number
-  global_progression_influence_intensity: number
-  progression_reward: [number, number]
-  telecrystal_reward: [number, number]
-  telecrystal_penalty: number
-  weight: number
-  type: string
-}
+  name: string;
+  description: string;
+  progression_minimum: number;
+  progression_maximum: number;
+  global_progression_limit_coeff: number;
+  global_progression_influence_intensity: number;
+  progression_reward: [number, number];
+  telecrystal_reward: [number, number];
+  telecrystal_penalty: number;
+  weight: number;
+  type: string;
+};
 
 type ObjectiveList = {
-  objectives: (ObjectiveList|Objective)[]
-  weight: number
-}
+  objectives: (ObjectiveList | Objective)[];
+  weight: number;
+};
 
 type ObjectiveCategory = ObjectiveList & {
-  name: string
-}
+  name: string;
+};
 
 type PlayerData = {
-  player: string,
-  progression_points: number,
-  total_progression_from_objectives: number,
-}
+  player: string;
+  progression_points: number;
+  total_progression_from_objectives: number;
+};
 
 type ObjectiveData = {
-  current_progression: number
-  objective_data: ObjectiveCategory[],
-  player_data: PlayerData[]
-}
+  current_progression: number;
+  objective_data: ObjectiveCategory[];
+  player_data: PlayerData[];
+};
 
 const recursivelyGetObjectives = (value: ObjectiveList) => {
   let listToReturn: Objective[] = [];
@@ -44,7 +44,8 @@ const recursivelyGetObjectives = (value: ObjectiveList) => {
     const possibleValue = value.objectives[i];
     if ((possibleValue as ObjectiveList).objectives) {
       listToReturn = listToReturn.concat(
-        recursivelyGetObjectives(possibleValue as ObjectiveList));
+        recursivelyGetObjectives(possibleValue as ObjectiveList),
+      );
     } else {
       listToReturn.push(possibleValue as Objective);
     }
@@ -56,17 +57,17 @@ const recursivelyGetObjectives = (value: ObjectiveList) => {
 const sizeLimit = 90000;
 
 type SortingOption = {
-  name: string
+  name: string;
   // Function used to determine the order of the elements.
   // It is expected to return a negative value
   // if first argument is less than second argument,
   // zero if they're equal and a positive value otherwise.
-  sort: (a: Objective, b: Objective) => number
-}
+  sort: (a: Objective, b: Objective) => number;
+};
 
 const sortingOptions: SortingOption[] = [
   {
-    name: "Minimum Progression",
+    name: 'Minimum Progression',
     sort: (a, b) => {
       if (a.progression_minimum < b.progression_minimum) {
         return -1;
@@ -77,12 +78,12 @@ const sortingOptions: SortingOption[] = [
     },
   },
   {
-    name: "Telecrystal Payout",
+    name: 'Telecrystal Payout',
     sort: (a, b) => {
-      const telecrystalMeanA
-        = (a.telecrystal_reward[0] + a.telecrystal_reward[1])/2;
-      const telecrystalMeanB
-        = (b.telecrystal_reward[0] + b.telecrystal_reward[1])/2;
+      const telecrystalMeanA =
+        (a.telecrystal_reward[0] + a.telecrystal_reward[1]) / 2;
+      const telecrystalMeanB =
+        (b.telecrystal_reward[0] + b.telecrystal_reward[1]) / 2;
       if (telecrystalMeanA < telecrystalMeanB) {
         return -1;
       } else if (telecrystalMeanA === telecrystalMeanB) {
@@ -92,12 +93,12 @@ const sortingOptions: SortingOption[] = [
     },
   },
   {
-    name: "Progression Payout",
+    name: 'Progression Payout',
     sort: (a, b) => {
-      const progressionMeanA
-        = (a.progression_reward[0] + a.progression_reward[1])/2;
-      const progressionMeanB
-        = (b.progression_reward[0] + b.progression_reward[1])/2;
+      const progressionMeanA =
+        (a.progression_reward[0] + a.progression_reward[1]) / 2;
+      const progressionMeanB =
+        (b.progression_reward[0] + b.progression_reward[1]) / 2;
       if (progressionMeanA < progressionMeanB) {
         return -1;
       } else if (progressionMeanA === progressionMeanB) {
@@ -107,14 +108,14 @@ const sortingOptions: SortingOption[] = [
     },
   },
   {
-    name: "Progression Payout + Min. Prog.",
+    name: 'Progression Payout + Min. Prog.',
     sort: (a, b) => {
-      const progressionMeanA
-        = (a.progression_reward[0] + a.progression_reward[1])/2
-          + a.progression_minimum;
-      const progressionMeanB
-        = (b.progression_reward[0] + b.progression_reward[1])/2
-          + b.progression_minimum;
+      const progressionMeanA =
+        (a.progression_reward[0] + a.progression_reward[1]) / 2 +
+        a.progression_minimum;
+      const progressionMeanB =
+        (b.progression_reward[0] + b.progression_reward[1]) / 2 +
+        b.progression_minimum;
       if (progressionMeanA < progressionMeanB) {
         return -1;
       } else if (progressionMeanA === progressionMeanB) {
@@ -131,7 +132,7 @@ export const TraitorObjectiveDebug = (props, context) => {
   const lines: JSX.Element[] = [];
   lines.sort();
   for (let i = 10; i < 100; i += 10) {
-    lines.push((
+    lines.push(
       <Box
         position="absolute"
         height="100%"
@@ -148,7 +149,7 @@ export const TraitorObjectiveDebug = (props, context) => {
           backgroundColor="green"
           height="5px"
           style={{
-            "z-index": 5,
+            'z-index': 5,
           }}
         />
         <Box
@@ -156,20 +157,32 @@ export const TraitorObjectiveDebug = (props, context) => {
           top={0}
           left={1}
           style={{
-            "z-index": 5,
+            'z-index': 5,
           }}
         >
           {/* Time in minutes of this threshold */}
-          {Math.round((sizeLimit*(i/100))/(600))} mins
+          {Math.round((sizeLimit * (i / 100)) / 600)} mins
         </Box>
-      </Box>
-    ));
+      </Box>,
+    );
   }
   let objectivesToRender: Objective[] = [];
-  const [currentTab, setCurrentTab] = useLocalState(context, "currentTab", "All");
-  const [sortingFunc, setSortingFunc] = useLocalState(context, "sortingFunc", sortingOptions[0].name);
+  const [currentTab, setCurrentTab] = useLocalState(
+    context,
+    'currentTab',
+    'All',
+  );
+  const [sortingFunc, setSortingFunc] = useLocalState(
+    context,
+    'sortingFunc',
+    sortingOptions[0].name,
+  );
   // true = ascending, false = descending
-  const [sortDirection, setSortingDirection] = useLocalState(context, "sortDirection", true);
+  const [sortDirection, setSortingDirection] = useLocalState(
+    context,
+    'sortDirection',
+    true,
+  );
 
   let actualSortingFunc;
   for (let index = 0; index < sortingOptions.length; index++) {
@@ -181,11 +194,12 @@ export const TraitorObjectiveDebug = (props, context) => {
 
   for (let index = 0; index < objective_data.length; index++) {
     const value = objective_data[index];
-    if (value.name !== currentTab && currentTab !== "All") {
+    if (value.name !== currentTab && currentTab !== 'All') {
       continue;
     }
-    objectivesToRender
-      = objectivesToRender.concat(recursivelyGetObjectives(value));
+    objectivesToRender = objectivesToRender.concat(
+      recursivelyGetObjectives(value),
+    );
   }
 
   objectivesToRender.sort(actualSortingFunc);
@@ -194,25 +208,13 @@ export const TraitorObjectiveDebug = (props, context) => {
   }
 
   return (
-    <Window
-      width={1000}
-      height={1000}
-      theme="admin"
-    >
-      <Window.Content
-        scrollable
-      >
-        <Box
-          position="absolute"
-          height="100px"
-          width="100%"
-          top={0}
-          left={0}
-        >
+    <Window width={1000} height={1000} theme="admin">
+      <Window.Content scrollable>
+        <Box position="absolute" height="100px" width="100%" top={0} left={0}>
           <Stack vertical>
             <Stack.Item>
               <Tabs width="100%" fluid textAlign="center">
-                {sortingOptions.map(value => (
+                {sortingOptions.map((value) => (
                   <Tabs.Tab
                     key={value.sort}
                     selected={value.name === sortingFunc}
@@ -226,12 +228,12 @@ export const TraitorObjectiveDebug = (props, context) => {
             <Stack.Item>
               <Tabs height="100%" width="100%" fluid textAlign="center">
                 <Tabs.Tab
-                  selected={currentTab === "All"}
-                  onClick={() => setCurrentTab("All")}
+                  selected={currentTab === 'All'}
+                  onClick={() => setCurrentTab('All')}
                 >
                   All
                 </Tabs.Tab>
-                {objective_data.map(value => (
+                {objective_data.map((value) => (
                   <Tabs.Tab
                     key={value.name}
                     selected={value.name === currentTab}
@@ -272,40 +274,41 @@ export const TraitorObjectiveDebug = (props, context) => {
           <Stack vertical mt={8}>
             {objectivesToRender.map((value, index) => (
               <Stack.Item key={index} position="relative" basis="100px">
-                <ObjectiveBox
-                  objective={value}
-                />
+                <ObjectiveBox objective={value} />
               </Stack.Item>
             ))}
           </Stack>
-          {player_data.map(value => {
+          {player_data.map((value) => {
             const rep = getReputation(value.progression_points);
             return (
               <Tooltip
                 key={value.player}
-                content={(
+                content={
                   <Box>
                     <LabeledList>
-                      <LabeledList.Item label={"Key"}>
+                      <LabeledList.Item label={'Key'}>
                         {value.player}
                       </LabeledList.Item>
-                      <LabeledList.Item label={"Total PR"}>
-                        {Math.floor(value.progression_points/600)} mins
+                      <LabeledList.Item label={'Total PR'}>
+                        {Math.floor(value.progression_points / 600)} mins
                       </LabeledList.Item>
-                      <LabeledList.Item label={"Obj PR"}>
+                      <LabeledList.Item label={'Obj PR'}>
                         {Math.floor(
-                          value.total_progression_from_objectives/600)} mins
+                          value.total_progression_from_objectives / 600,
+                        )}{' '}
+                        mins
                       </LabeledList.Item>
                     </LabeledList>
                   </Box>
-                )}
+                }
                 position="top"
               >
                 <Box
                   backgroundColor="red"
                   position="absolute"
-                  left={`${(value.progression_points/sizeLimit)
-                  *(window.innerWidth)}px`}
+                  left={`${
+                    (value.progression_points / sizeLimit) * window.innerWidth
+                  }px`}
                   width="3px"
                   height="100%"
                   top={0}
@@ -323,14 +326,16 @@ export const TraitorObjectiveDebug = (props, context) => {
             );
           })}
           <Tooltip
-            content={`Expected Progression: ${
-              Math.floor(current_progression/600)} mins`}
+            content={`Expected Progression: ${Math.floor(
+              current_progression / 600,
+            )} mins`}
             position="top"
           >
             <Box
               position="absolute"
-              left={`${(current_progression/sizeLimit)
-                  *(window.innerWidth)}px`}
+              left={`${
+                (current_progression / sizeLimit) * window.innerWidth
+              }px`}
               width="3px"
               height="100%"
               top={0}
@@ -353,42 +358,45 @@ export const TraitorObjectiveDebug = (props, context) => {
 };
 
 type ObjectiveBoxProps = {
-  objective: Objective
-}
+  objective: Objective;
+};
 
 const ObjectiveBox = (props: ObjectiveBoxProps, context) => {
   const { objective } = props;
-  let width = `${(objective.progression_maximum/sizeLimit)
-    *(window.innerWidth)}px`;
+  let width = `${
+    (objective.progression_maximum / sizeLimit) * window.innerWidth
+  }px`;
   if (objective.progression_maximum > sizeLimit) {
-    width = "100%";
+    width = '100%';
   }
   return (
     <Box
       backgroundColor="grey"
       position="absolute"
-      left={`${(objective.progression_minimum/sizeLimit)
-        *(window.innerWidth)}px`}
+      left={`${
+        (objective.progression_minimum / sizeLimit) * window.innerWidth
+      }px`}
       width={width}
       height="95px"
     >
       <Stack vertical width="100%">
-        <Stack.Item style={{
-          "text-overflow": "ellipsis",
-          "white-space": "nowrap",
-          "overflow": "hidden",
-        }}
+        <Stack.Item
+          style={{
+            'text-overflow': 'ellipsis',
+            'white-space': 'nowrap',
+            overflow: 'hidden',
+          }}
         >
           {objective.name}
         </Stack.Item>
         <Stack.Item>
           <Stack>
             <Stack.Item grow>
-              {objective.progression_minimum/600} mins
+              {objective.progression_minimum / 600} mins
             </Stack.Item>
             {objective.progression_maximum <= sizeLimit && (
               <Stack.Item>
-                {objective.progression_maximum/600} mins
+                {objective.progression_maximum / 600} mins
               </Stack.Item>
             )}
           </Stack>
@@ -399,14 +407,15 @@ const ObjectiveBox = (props: ObjectiveBoxProps, context) => {
             left={0}
             height="100%"
             backgroundColor="green"
-            width={`${(objective.progression_reward[1]/sizeLimit)
-              *(window.innerWidth)}px`}
+            width={`${
+              (objective.progression_reward[1] / sizeLimit) * window.innerWidth
+            }px`}
             style={{
-              "white-space": "nowrap",
+              'white-space': 'nowrap',
             }}
           >
-            {objective.progression_reward[0]/600}
-            &nbsp;to {objective.progression_reward[1]/600} pr
+            {objective.progression_reward[0] / 600}
+            &nbsp;to {objective.progression_reward[1] / 600} pr
           </Box>
         </Stack.Item>
         <Stack.Item position="relative" basis="18px">
@@ -415,9 +424,9 @@ const ObjectiveBox = (props: ObjectiveBoxProps, context) => {
             left={0}
             height="100%"
             backgroundColor="red"
-            width={`${(objective.telecrystal_reward[1] * 10)}px`}
+            width={`${objective.telecrystal_reward[1] * 10}px`}
             style={{
-              "white-space": "nowrap",
+              'white-space': 'nowrap',
             }}
           >
             {objective.telecrystal_reward[0]}
diff --git a/tgui/packages/tgui/interfaces/TramControl.js b/tgui/packages/tgui/interfaces/TramControl.js
index 87ad3aa8c8f1..2d626ee8fbc3 100644
--- a/tgui/packages/tgui/interfaces/TramControl.js
+++ b/tgui/packages/tgui/interfaces/TramControl.js
@@ -4,30 +4,30 @@ import { Window } from '../layouts';
 
 const DEPARTMENT2COLOR = {
   // Station
-  Arrivals: "black",
-  Service: "olive",
-  Command: "blue",
-  Security: "red",
-  Medical: "teal",
-  Engineering: "yellow",
-  Cargo: "brown",
-  Science: "purple",
-  Departures: "white",
+  Arrivals: 'black',
+  Service: 'olive',
+  Command: 'blue',
+  Security: 'red',
+  Medical: 'teal',
+  Engineering: 'yellow',
+  Cargo: 'brown',
+  Science: 'purple',
+  Departures: 'white',
   // Hilbert Research Facility
-  Reception: "white",
-  Botany: "olive",
-  Chemistry: "teal",
-  Processing: "brown",
-  Xenobiology: "purple",
-  Ordnance: "yellow",
-  Office: "red",
-  Dormitories: "black",
+  Reception: 'white',
+  Botany: 'olive',
+  Chemistry: 'teal',
+  Processing: 'brown',
+  Xenobiology: 'purple',
+  Ordnance: 'yellow',
+  Office: 'red',
+  Dormitories: 'black',
 };
 
 const COLOR2BLURB = {
   blue: "This is the tram's current location.",
-  green: "This is the selected destination.",
-  transparent: "Click to set destination.",
+  green: 'This is the selected destination.',
+  transparent: 'Click to set destination.',
 };
 
 const marginNormal = 1;
@@ -44,12 +44,7 @@ const BrokenTramDimmer = () => {
     <Dimmer>
       <Stack vertical>
         <Stack.Item>
-          <Icon
-            ml={7}
-            color="red"
-            name="exclamation"
-            size={10}
-          />
+          <Icon ml={7} color="red" name="exclamation" size={10} />
         </Stack.Item>
         <Stack.Item fontSize="14px" color="red">
           No Tram Detected!
@@ -61,28 +56,19 @@ const BrokenTramDimmer = () => {
 
 export const TramControl = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    broken,
-    moving,
-    destinations,
-    tram_location,
-  } = data;
+  const { broken, moving, destinations, tram_location } = data;
 
-  const [
-    transitIndex,
-    setTransitIndex,
-  ] = useLocalState(context, 'transit-index', 1);
+  const [transitIndex, setTransitIndex] = useLocalState(
+    context,
+    'transit-index',
+    1,
+  );
   const MovingTramDimmer = () => {
     return (
       <Dimmer>
         <Stack vertical>
           <Stack.Item>
-            <Icon
-              ml={10}
-              name="sync-alt"
-              color="green"
-              size={11}
-            />
+            <Icon ml={10} name="sync-alt" color="green" size={11} />
           </Stack.Item>
           <Stack.Item mt={5} fontSize="14px" color="green">
             The tram is travelling to {tram_location}!
@@ -91,13 +77,13 @@ export const TramControl = (props, context) => {
       </Dimmer>
     );
   };
-  const Destination = props => {
+  const Destination = (props) => {
     const { dest } = props;
-    const getDestColor = dest => {
-      if (!tram_location) return "bad";
+    const getDestColor = (dest) => {
+      if (!tram_location) return 'bad';
       const here = dest.name === tram_location;
       const selected = transitIndex === destinations.indexOf(dest);
-      return here ? "blue" : selected ? "green" : "transparent";
+      return here ? 'blue' : selected ? 'green' : 'transparent';
     };
     return (
       <Stack vertical>
@@ -111,21 +97,19 @@ export const TramControl = (props, context) => {
             width={5}
             tooltipPosition="top"
             tooltip={COLOR2BLURB[getDestColor(dest)]}
-            onClick={() => setTransitIndex(destinations.indexOf(dest))} >
+            onClick={() => setTransitIndex(destinations.indexOf(dest))}
+          >
             <Icon ml={-2.1} mt={0.55} fontSize="60px" name="circle-o" />
           </Button>
-          {destinations.length-1 !== destinations.indexOf(dest) && (
+          {(destinations.length - 1 !== destinations.indexOf(dest) && (
             <Section title=" " mt={-7.3} ml={10} mr={-6.1} />
-          ) || (
-            <Box mt={-2.3} />
-          )}
+          )) || <Box mt={-2.3} />}
         </Stack.Item>
         {dest.dest_icons && (
-          <Stack.Item >
+          <Stack.Item>
             <Stack>
-              {Object.keys(dest.dest_icons).map(dep => (
-                <Stack.Item key={dep}
-                  mt={dipUnderCircle(dest, dep)}>
+              {Object.keys(dest.dest_icons).map((dep) => (
+                <Stack.Item key={dep} mt={dipUnderCircle(dest, dep)}>
                   <Button
                     color={DEPARTMENT2COLOR[dep]}
                     icon={dest.dest_icons[dep]}
@@ -133,7 +117,7 @@ export const TramControl = (props, context) => {
                     tooltip={dep}
                     style={{
                       'border-radius': '5em',
-                      'border': '2px solid white',
+                      border: '2px solid white',
                     }}
                   />
                 </Stack.Item>
@@ -145,18 +129,11 @@ export const TramControl = (props, context) => {
     );
   };
   return (
-    <Window
-      title="Tram Controls"
-      width={600}
-      height={300}>
+    <Window title="Tram Controls" width={600} height={300}>
       <Window.Content>
-        {!!broken && (
-          <BrokenTramDimmer />
-        ) || (
+        {(!!broken && <BrokenTramDimmer />) || (
           <Section fill>
-            {!!moving && (
-              <MovingTramDimmer />
-            )}
+            {!!moving && <MovingTramDimmer />}
             <Stack ml="-6px" vertical fill>
               <Stack.Item grow fontSize="16px" mt={1} mb={9} textAlign="center">
                 Nanotrasen Transit System
@@ -164,8 +141,8 @@ export const TramControl = (props, context) => {
               <Stack.Item mb={4}>
                 <Stack fill>
                   <Stack.Item grow />
-                  {destinations.map(dest => (
-                    <Stack.Item key={dest.name} grow={1} >
+                  {destinations.map((dest) => (
+                    <Stack.Item key={dest.name} grow={1}>
                       <Destination dest={dest} />
                     </Stack.Item>
                   ))}
@@ -174,13 +151,14 @@ export const TramControl = (props, context) => {
               </Stack.Item>
               <Stack.Item fontSize="16px" mt={1} mb={9} textAlign="center" grow>
                 <Button
-                  disabled={
-                    tram_location === destinations[transitIndex].name
-                  }
+                  disabled={tram_location === destinations[transitIndex].name}
                   content="Send Tram"
-                  onClick={() => act('send', {
-                    destination: destinations[transitIndex].id,
-                  })} />
+                  onClick={() =>
+                    act('send', {
+                      destination: destinations[transitIndex].id,
+                    })
+                  }
+                />
               </Stack.Item>
             </Stack>
           </Section>
diff --git a/tgui/packages/tgui/interfaces/TransferValve.js b/tgui/packages/tgui/interfaces/TransferValve.js
index 95960d7712dc..16cfb6975e30 100644
--- a/tgui/packages/tgui/interfaces/TransferValve.js
+++ b/tgui/packages/tgui/interfaces/TransferValve.js
@@ -4,49 +4,44 @@ import { Window } from '../layouts';
 
 export const TransferValve = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    tank_one,
-    tank_two,
-    attached_device,
-    valve,
-  } = data;
+  const { tank_one, tank_two, attached_device, valve } = data;
   return (
-    <Window
-      width={310}
-      height={300}>
+    <Window width={310} height={300}>
       <Window.Content>
         <Section>
           <LabeledList>
             <LabeledList.Item label="Valve Status">
               <Button
-                icon={valve ? "unlock" : "lock"}
-                content={valve ? "Open" : "Closed"}
+                icon={valve ? 'unlock' : 'lock'}
+                content={valve ? 'Open' : 'Closed'}
                 disabled={!tank_one || !tank_two}
-                onClick={() => act('toggle')} />
+                onClick={() => act('toggle')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
         <Section
           title="Valve Attachment"
-          buttons={(
+          buttons={
             <Button
               content="Configure"
-              icon={"cog"}
+              icon={'cog'}
               disabled={!attached_device}
-              onClick={() => act('device')} />
-          )}>
+              onClick={() => act('device')}
+            />
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Attachment">
               {attached_device ? (
                 <Button
-                  icon={"eject"}
+                  icon={'eject'}
                   content={attached_device}
                   disabled={!attached_device}
-                  onClick={() => act('remove_device')} />
+                  onClick={() => act('remove_device')}
+                />
               ) : (
-                <Box color="average">
-                  No Assembly
-                </Box>
+                <Box color="average">No Assembly</Box>
               )}
             </LabeledList.Item>
           </LabeledList>
@@ -56,14 +51,13 @@ export const TransferValve = (props, context) => {
             <LabeledList.Item label="Attachment">
               {tank_one ? (
                 <Button
-                  icon={"eject"}
+                  icon={'eject'}
                   content={tank_one}
                   disabled={!tank_one}
-                  onClick={() => act('tankone')} />
+                  onClick={() => act('tankone')}
+                />
               ) : (
-                <Box color="average">
-                  No Tank
-                </Box>
+                <Box color="average">No Tank</Box>
               )}
             </LabeledList.Item>
           </LabeledList>
@@ -73,14 +67,13 @@ export const TransferValve = (props, context) => {
             <LabeledList.Item label="Attachment">
               {tank_two ? (
                 <Button
-                  icon={"eject"}
+                  icon={'eject'}
                   content={tank_two}
                   disabled={!tank_two}
-                  onClick={() => act('tanktwo')} />
+                  onClick={() => act('tanktwo')}
+                />
               ) : (
-                <Box color="average">
-                  No Tank
-                </Box>
+                <Box color="average">No Tank</Box>
               )}
             </LabeledList.Item>
           </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/TurbineComputer.js b/tgui/packages/tgui/interfaces/TurbineComputer.js
index fe225116c088..84f5e3bbcbc1 100644
--- a/tgui/packages/tgui/interfaces/TurbineComputer.js
+++ b/tgui/packages/tgui/interfaces/TurbineComputer.js
@@ -1,5 +1,13 @@
 import { useBackend } from '../backend';
-import { Button, LabeledList, Section, Box, Modal, ProgressBar, NumberInput } from '../components';
+import {
+  Button,
+  LabeledList,
+  Section,
+  Box,
+  Modal,
+  ProgressBar,
+  NumberInput,
+} from '../components';
 import { Window } from '../layouts';
 
 export const TurbineComputer = (props, context) => {
@@ -10,8 +18,11 @@ export const TurbineComputer = (props, context) => {
         style={{ margin: 'auto' }}
         width="200px"
         textAlign="center"
-        minHeight="39px">
-        {"Parts not connected, use a multitool on the core rotor before trying again"}
+        minHeight="39px"
+      >
+        {
+          'Parts not connected, use a multitool on the core rotor before trying again'
+        }
       </Box>
     </Modal>
   );
@@ -21,26 +32,29 @@ export const TurbineComputer = (props, context) => {
         style={{ margin: 'auto' }}
         width="200px"
         textAlign="center"
-        minHeight="39px">
-        {"Some parts have open maintenance hatchet, please close them before starting"}
+        minHeight="39px"
+      >
+        {
+          'Some parts have open maintenance hatchet, please close them before starting'
+        }
       </Box>
     </Modal>
   );
   return (
-    <Window
-      width={310}
-      height={240}>
+    <Window width={310} height={240}>
       <Window.Content>
         <Section
           title="Status"
-          buttons={(
+          buttons={
             <Button
               icon={data.active ? 'power-off' : 'times'}
               content={data.active ? 'Online' : 'Offline'}
               selected={data.active}
               disabled={!data.can_turn_off || !data.parts_linked}
-              onClick={() => act('toggle_power')} />
-          )}>
+              onClick={() => act('toggle_power')}
+            />
+          }
+        >
           {parts_not_connected}
           {parts_not_ready}
           <LabeledList>
@@ -51,9 +65,12 @@ export const TurbineComputer = (props, context) => {
                 unit="%"
                 minValue={1}
                 maxValue={100}
-                onDrag={(e, value) => act('regulate', {
-                  regulate: (value * 0.01),
-                })} />
+                onDrag={(e, value) =>
+                  act('regulate', {
+                    regulate: value * 0.01,
+                  })
+                }
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Turbine Integrity">
               <ProgressBar
@@ -64,8 +81,9 @@ export const TurbineComputer = (props, context) => {
                   good: [60, 100],
                   average: [40, 59],
                   bad: [0, 39],
-                }}>
-                {data.integrity + " %"}
+                }}
+              >
+                {data.integrity + ' %'}
               </ProgressBar>
             </LabeledList.Item>
             <LabeledList.Item label="Turbine Speed">
diff --git a/tgui/packages/tgui/interfaces/TurretControl.js b/tgui/packages/tgui/interfaces/TurretControl.js
index b56c75e6020d..294e106ddea3 100644
--- a/tgui/packages/tgui/interfaces/TurretControl.js
+++ b/tgui/packages/tgui/interfaces/TurretControl.js
@@ -6,15 +6,9 @@ import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
 export const TurretControl = (props, context) => {
   const { act, data } = useBackend(context);
   const locked = data.locked && !data.siliconUser;
-  const {
-    enabled,
-    lethal,
-    shootCyborgs,
-  } = data;
+  const { enabled, lethal, shootCyborgs } = data;
   return (
-    <Window
-      width={305}
-      height={data.siliconUser ? 168 : 164}>
+    <Window width={305} height={data.siliconUser ? 168 : 164}>
       <Window.Content>
         <InterfaceLockNoticeBox />
         <Section>
@@ -25,15 +19,17 @@ export const TurretControl = (props, context) => {
                 content={enabled ? 'Enabled' : 'Disabled'}
                 selected={enabled}
                 disabled={locked}
-                onClick={() => act('power')} />
+                onClick={() => act('power')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Turret Mode">
               <Button
                 icon={lethal ? 'exclamation-triangle' : 'minus-circle'}
                 content={lethal ? 'Lethal' : 'Stun'}
-                color={lethal ? "bad" : "average"}
+                color={lethal ? 'bad' : 'average'}
                 disabled={locked}
-                onClick={() => act('mode')} />
+                onClick={() => act('mode')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Target Cyborgs">
               <Button
@@ -41,7 +37,8 @@ export const TurretControl = (props, context) => {
                 content={shootCyborgs ? 'Yes' : 'No'}
                 selected={shootCyborgs}
                 disabled={locked}
-                onClick={() => act('shoot_silicons')} />
+                onClick={() => act('shoot_silicons')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx b/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx
index 2988cf45c745..7e8250e61755 100644
--- a/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx
+++ b/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx
@@ -1,14 +1,22 @@
 import { BooleanLike } from 'common/react';
 import { useLocalState, useSharedState } from '../../backend';
-import { Box, Button, Input, Section, Tabs, NoticeBox, Stack } from '../../components';
+import {
+  Box,
+  Button,
+  Input,
+  Section,
+  Tabs,
+  NoticeBox,
+  Stack,
+} from '../../components';
 
 type GenericUplinkProps = {
-  currency?: string | JSX.Element,
-  categories: string[],
-  items: Item[],
+  currency?: string | JSX.Element;
+  categories: string[];
+  items: Item[];
 
   handleBuy: (item: Item) => void;
-}
+};
 
 export const GenericUplink = (props: GenericUplinkProps, context) => {
   const {
@@ -17,16 +25,18 @@ export const GenericUplink = (props: GenericUplinkProps, context) => {
 
     handleBuy,
   } = props;
-  const [
-    searchText, setSearchText,
-  ] = useLocalState(context, 'searchText', '');
-  const [
-    selectedCategory, setSelectedCategory,
-  ] = useLocalState(context, 'category', categories[0]);
-  const [
-    compactMode, setCompactMode,
-  ] = useSharedState(context, 'compactModeUplink', false);
-  let items = props.items.filter(value => {
+  const [searchText, setSearchText] = useLocalState(context, 'searchText', '');
+  const [selectedCategory, setSelectedCategory] = useLocalState(
+    context,
+    'category',
+    categories[0],
+  );
+  const [compactMode, setCompactMode] = useSharedState(
+    context,
+    'compactModeUplink',
+    false,
+  );
+  let items = props.items.filter((value) => {
     if (searchText.length === 0) {
       return value.category === selectedCategory;
     }
@@ -34,35 +44,34 @@ export const GenericUplink = (props: GenericUplinkProps, context) => {
   });
   return (
     <Section
-      title={(
-        <Box
-          inline>
-          {currency}
-        </Box>
-      )}
-      buttons={(
+      title={<Box inline>{currency}</Box>}
+      buttons={
         <>
           Search
           <Input
             autoFocus
             value={searchText}
             onInput={(e, value) => setSearchText(value)}
-            mx={1} />
+            mx={1}
+          />
           <Button
             icon={compactMode ? 'list' : 'info'}
             content={compactMode ? 'Compact' : 'Detailed'}
-            onClick={() => setCompactMode(!compactMode)} />
+            onClick={() => setCompactMode(!compactMode)}
+          />
         </>
-      )}>
+      }
+    >
       <Stack>
         {searchText.length === 0 && (
           <Stack.Item mr={1}>
             <Tabs vertical>
-              {categories.map(category => (
+              {categories.map((category) => (
                 <Tabs.Tab
                   key={category}
                   selected={category === selectedCategory}
-                  onClick={() => setSelectedCategory(category)}>
+                  onClick={() => setSelectedCategory(category)}
+                >
                   {category}
                 </Tabs.Tab>
               ))}
@@ -89,28 +98,24 @@ export const GenericUplink = (props: GenericUplinkProps, context) => {
 };
 
 export type Item<ItemData = {}> = {
-  id: string | number,
-  name: string,
-  category: string,
-  cost: JSX.Element | string,
-  desc: JSX.Element | string,
-  disabled: BooleanLike,
-  extraData?: ItemData,
-}
+  id: string | number;
+  name: string;
+  category: string;
+  cost: JSX.Element | string;
+  desc: JSX.Element | string;
+  disabled: BooleanLike;
+  extraData?: ItemData;
+};
 
 export type ItemListProps = {
-  compactMode: BooleanLike,
-  items: Item[],
+  compactMode: BooleanLike;
+  items: Item[];
 
   handleBuy: (item: Item) => void;
-}
+};
 
 const ItemList = (props: ItemListProps, context: any) => {
-  const {
-    compactMode,
-    items,
-    handleBuy,
-  } = props;
+  const { compactMode, items, handleBuy } = props;
   return (
     <Stack vertical>
       {items.map((item, index) => (
@@ -118,13 +123,15 @@ const ItemList = (props: ItemListProps, context: any) => {
           <Section
             key={item.name}
             title={item.name}
-            buttons={(
+            buttons={
               <Button
                 content={item.cost}
                 disabled={item.disabled}
-                onClick={(e) => handleBuy(item)} />
-            )}>
-            {compactMode? null : item.desc}
+                onClick={(e) => handleBuy(item)}
+              />
+            }
+          >
+            {compactMode ? null : item.desc}
           </Section>
         </Stack.Item>
       ))}
diff --git a/tgui/packages/tgui/interfaces/Uplink/ObjectiveMenu.tsx b/tgui/packages/tgui/interfaces/Uplink/ObjectiveMenu.tsx
index e1f5032390c7..75ec3ffb345c 100644
--- a/tgui/packages/tgui/interfaces/Uplink/ObjectiveMenu.tsx
+++ b/tgui/packages/tgui/interfaces/Uplink/ObjectiveMenu.tsx
@@ -1,29 +1,43 @@
-import { BooleanLike, classes } from "common/react";
-import { Component } from "inferno";
-import { Section, Stack, Box, Button, Flex, Tooltip, NoticeBox, Dimmer, Icon } from "../../components";
-import { calculateProgression, getReputation, Rank } from "./calculateReputationLevel";
-import { ObjectiveState } from "./constants";
+import { BooleanLike, classes } from 'common/react';
+import { Component } from 'inferno';
+import {
+  Section,
+  Stack,
+  Box,
+  Button,
+  Flex,
+  Tooltip,
+  NoticeBox,
+  Dimmer,
+  Icon,
+} from '../../components';
+import {
+  calculateProgression,
+  getReputation,
+  Rank,
+} from './calculateReputationLevel';
+import { ObjectiveState } from './constants';
 
 export type Objective = {
-  id: number,
-  name: string,
-  description: string,
-  progression_minimum: number,
-  progression_reward: number,
-  telecrystal_reward: number,
-  telecrystal_penalty: number,
-  ui_buttons?: ObjectiveUiButton[],
-  objective_state: ObjectiveState,
-  original_progression: number,
-  final_objective: BooleanLike
-}
+  id: number;
+  name: string;
+  description: string;
+  progression_minimum: number;
+  progression_reward: number;
+  telecrystal_reward: number;
+  telecrystal_penalty: number;
+  ui_buttons?: ObjectiveUiButton[];
+  objective_state: ObjectiveState;
+  original_progression: number;
+  final_objective: BooleanLike;
+};
 
 export type ObjectiveUiButton = {
-  name: string,
-  tooltip: string,
-  icon: string,
-  action: string,
-}
+  name: string;
+  tooltip: string;
+  icon: string;
+  action: string;
+};
 
 type ObjectiveMenuProps = {
   activeObjectives: Objective[];
@@ -36,18 +50,20 @@ type ObjectiveMenuProps = {
   handleObjectiveCompleted: (objective: Objective) => void;
   handleObjectiveAbort: (objective: Objective) => void;
   handleRequestObjectives: () => void;
-}
+};
 
 type ObjectiveMenuState = {
-  draggingObjective: Objective|null;
+  draggingObjective: Objective | null;
   objectiveX: number;
   objectiveY: number;
-}
+};
 
 let dragClickTimer = 0;
 
-export class ObjectiveMenu
-  extends Component<ObjectiveMenuProps, ObjectiveMenuState> {
+export class ObjectiveMenu extends Component<
+  ObjectiveMenuProps,
+  ObjectiveMenuState
+> {
   constructor() {
     super();
     this.state = {
@@ -66,7 +82,8 @@ export class ObjectiveMenu
     if (this.state?.draggingObjective) {
       return;
     }
-    if (event.button === 0) { // Left click
+    if (event.button === 0) {
+      // Left click
       this.setState({
         draggingObjective: objective,
         objectiveX: event.clientX,
@@ -101,9 +118,7 @@ export class ObjectiveMenu
   }
 
   handleObjectiveAdded(event: MouseEvent) {
-    const {
-      draggingObjective,
-    } = this.state as ObjectiveMenuState;
+    const { draggingObjective } = this.state as ObjectiveMenuState;
     if (!draggingObjective) {
       return;
     }
@@ -122,11 +137,8 @@ export class ObjectiveMenu
       handleObjectiveAbort,
       handleRequestObjectives,
     } = this.props;
-    const {
-      draggingObjective,
-      objectiveX,
-      objectiveY,
-    } = this.state as ObjectiveMenuState;
+    const { draggingObjective, objectiveX, objectiveY } = this
+      .state as ObjectiveMenuState;
 
     potentialObjectives.sort((objA, objB) => {
       if (objA.progression_minimum < objB.progression_minimum) {
@@ -142,46 +154,41 @@ export class ObjectiveMenu
           <Stack.Item>
             <Section>
               <Stack>
-                {Array.apply(null,
-                  Array(maximumActiveObjectives)).map((_, index) => {
-                  if (index >= activeObjectives.length) {
+                {Array.apply(null, Array(maximumActiveObjectives)).map(
+                  (_, index) => {
+                    if (index >= activeObjectives.length) {
+                      return (
+                        <Stack.Item key={index} minHeight="100px" grow>
+                          <Box
+                            color="label"
+                            className="UplinkObjective__EmptyObjective"
+                            onMouseUp={this.handleObjectiveAdded}
+                          >
+                            <Stack textAlign="center" fill align="center">
+                              <Stack.Item textAlign="center" width="100%">
+                                Empty Objective, drop objectives here to take
+                                them
+                              </Stack.Item>
+                            </Stack>
+                          </Box>
+                        </Stack.Item>
+                      );
+                    }
+                    const objective = activeObjectives[index];
                     return (
-                      <Stack.Item
-                        key={index}
-                        minHeight="100px"
-                        grow
-                      >
-                        <Box
-                          color="label"
-                          className="UplinkObjective__EmptyObjective"
-                          onMouseUp={this.handleObjectiveAdded}
-                        >
-                          <Stack textAlign="center" fill align="center">
-                            <Stack.Item textAlign="center" width="100%">
-                              Empty Objective, drop objectives here to take them
-                            </Stack.Item>
-                          </Stack>
-                        </Box>
+                      <Stack.Item key={index} grow>
+                        {ObjectiveFunction(
+                          objective,
+                          true,
+                          handleObjectiveAction,
+                          handleObjectiveCompleted,
+                          handleObjectiveAbort,
+                          true,
+                        )}
                       </Stack.Item>
                     );
-                  }
-                  const objective = activeObjectives[index];
-                  return (
-                    <Stack.Item
-                      key={index}
-                      grow
-                    >
-                      {ObjectiveFunction(
-                        objective,
-                        true,
-                        handleObjectiveAction,
-                        handleObjectiveCompleted,
-                        handleObjectiveAbort,
-                        true,
-                      )}
-                    </Stack.Item>
-                  );
-                })}
+                  },
+                )}
               </Stack>
             </Section>
           </Stack.Item>
@@ -193,7 +200,7 @@ export class ObjectiveMenu
               scrollable
             >
               <Flex wrap="wrap" justify="space-evenly">
-                {potentialObjectives.map(objective => {
+                {potentialObjectives.map((objective) => {
                   return (
                     <Flex.Item
                       key={objective.id}
@@ -205,18 +212,18 @@ export class ObjectiveMenu
                         this.handleObjectiveClick(event, objective);
                       }}
                     >
-                      {objective.id !== draggingObjective?.id
-                      && ObjectiveFunction(
-                        objective,
-                        false,
-                        undefined,
-                        undefined,
-                        undefined,
-                        true,
-                      ) || (
+                      {(objective.id !== draggingObjective?.id &&
+                        ObjectiveFunction(
+                          objective,
+                          false,
+                          undefined,
+                          undefined,
+                          undefined,
+                          true,
+                        )) || (
                         <Box
                           style={{
-                            "border": "2px dashed black",
+                            border: '2px dashed black',
                           }}
                           width="100%"
                           height="100%"
@@ -226,45 +233,42 @@ export class ObjectiveMenu
                     </Flex.Item>
                   );
                 })}
-                {maximumPotentialObjectives === 0 && (
+                {(maximumPotentialObjectives === 0 && (
                   <Dimmer>
-                    <Icon
-                      name="lock"
-                      color="red"
-                      fontSize={8}
-                      mb={2}
-                    />
+                    <Icon name="lock" color="red" fontSize={8} mb={2} />
                     <Box color="red" fontSize={3}>
                       You are locked out of objectives
                     </Box>
                   </Dimmer>
-                )
-                || potentialObjectives.length < maximumPotentialObjectives && (
-                  <Flex.Item
-                    basis="100%"
-                    style={{
-                      // "background-color": "rgba(0, 0, 0, 0.5)",
-                    }}
-                    mb={1}
-                    mx="0.5%"
-                    minHeight="100px"
-                  >
-                    <Stack
-                      align="center"
-                      height="100%"
-                      width="100%"
-                      textAlign="center"
+                )) ||
+                  (potentialObjectives.length < maximumPotentialObjectives && (
+                    <Flex.Item
+                      basis="100%"
+                      style={
+                        {
+                          // "background-color": "rgba(0, 0, 0, 0.5)",
+                        }
+                      }
+                      mb={1}
+                      mx="0.5%"
+                      minHeight="100px"
                     >
-                      <Stack.Item width="100%">
-                        <Button
-                          content="Request More Objectives"
-                          fontSize={2}
-                          onClick={handleRequestObjectives}
-                        />
-                      </Stack.Item>
-                    </Stack>
-                  </Flex.Item>
-                )}
+                      <Stack
+                        align="center"
+                        height="100%"
+                        width="100%"
+                        textAlign="center"
+                      >
+                        <Stack.Item width="100%">
+                          <Button
+                            content="Request More Objectives"
+                            fontSize={2}
+                            onClick={handleRequestObjectives}
+                          />
+                        </Stack.Item>
+                      </Stack>
+                    </Flex.Item>
+                  ))}
               </Flex>
             </Section>
           </Stack.Item>
@@ -277,7 +281,7 @@ export class ObjectiveMenu
             left={`${objectiveX - 180}px`}
             top={`${objectiveY}px`}
             style={{
-              "pointer-events": "none",
+              'pointer-events': 'none',
             }}
           >
             {ObjectiveFunction(draggingObjective, false)}
@@ -308,8 +312,11 @@ const ObjectiveFunction = (
       objectiveState={objective.objective_state}
       originalProgression={objective.original_progression}
       finalObjective={objective.final_objective}
-      canAbort={!!handleAbort && !objective.final_objective
-        && objective.objective_state === ObjectiveState.Active}
+      canAbort={
+        !!handleAbort &&
+        !objective.final_objective &&
+        objective.objective_state === ObjectiveState.Active
+      }
       grow={grow}
       handleCompletion={(event) => {
         if (handleCompletion) {
@@ -322,27 +329,24 @@ const ObjectiveFunction = (
         }
       }}
       uiButtons={
-        active && handleObjectiveAction
-          ? (
-            <Stack width="100%" justify="center">
-              {objective.ui_buttons?.map((value, index) => (
-                <Stack.Item key={index}>
-                  <Button
-                    content={value.name}
-                    icon={value.icon}
-                    tooltip={value.tooltip}
-                    className={reputation.gradient}
-                    onClick={() => {
-                      handleObjectiveAction(objective, value.action);
-                    }}
-                  />
-                </Stack.Item>
-              ))}
-            </Stack>
-          )
-          : undefined
+        active && handleObjectiveAction ? (
+          <Stack width="100%" justify="center">
+            {objective.ui_buttons?.map((value, index) => (
+              <Stack.Item key={index}>
+                <Button
+                  content={value.name}
+                  icon={value.icon}
+                  tooltip={value.tooltip}
+                  className={reputation.gradient}
+                  onClick={() => {
+                    handleObjectiveAction(objective, value.action);
+                  }}
+                />
+              </Stack.Item>
+            ))}
+          </Stack>
+        ) : undefined
       }
-
     />
   );
 };
@@ -363,7 +367,7 @@ type ObjectiveElementProps = {
 
   handleCompletion: (event: MouseEvent) => void;
   handleAbort: (event: MouseEvent) => void;
-}
+};
 
 const ObjectiveElement = (props: ObjectiveElementProps, context) => {
   const {
@@ -384,36 +388,34 @@ const ObjectiveElement = (props: ObjectiveElementProps, context) => {
     ...rest
   } = props;
 
-  const objectiveFinished
-    = objectiveState === ObjectiveState.Completed
-    || objectiveState === ObjectiveState.Failed
-    || objectiveState === ObjectiveState.Invalid;
+  const objectiveFinished =
+    objectiveState === ObjectiveState.Completed ||
+    objectiveState === ObjectiveState.Failed ||
+    objectiveState === ObjectiveState.Invalid;
 
   const objectiveFailed = objectiveState !== ObjectiveState.Completed;
   let objectiveCompletionText;
   switch (objectiveState) {
     case ObjectiveState.Invalid:
-      objectiveCompletionText = "Invalidated";
+      objectiveCompletionText = 'Invalidated';
       break;
     case ObjectiveState.Completed:
-      objectiveCompletionText = "Completed";
+      objectiveCompletionText = 'Completed';
       break;
     case ObjectiveState.Failed:
-      objectiveCompletionText = "Failed";
+      objectiveCompletionText = 'Failed';
       break;
   }
 
-
-  const progressionDiff = Math.round(
-    (1 - (progressionReward / originalProgression))*1000
-  )/10;
+  const progressionDiff =
+    Math.round((1 - progressionReward / originalProgression) * 1000) / 10;
 
   return (
-    <Flex height={grow? "100%" : undefined} direction="column">
+    <Flex height={grow ? '100%' : undefined} direction="column">
       <Flex.Item grow={grow} basis="content">
         <Box
           className={classes([
-            "UplinkObjective__Titlebar",
+            'UplinkObjective__Titlebar',
             reputation.gradient,
           ])}
           width="100%"
@@ -421,7 +423,8 @@ const ObjectiveElement = (props: ObjectiveElementProps, context) => {
         >
           <Stack>
             <Stack.Item grow={1}>
-              {name} {!objectiveFinished? null : `- ${objectiveCompletionText}`}
+              {name}{' '}
+              {!objectiveFinished ? null : `- ${objectiveCompletionText}`}
             </Stack.Item>
             {canAbort && (
               <Stack.Item>
@@ -437,41 +440,33 @@ const ObjectiveElement = (props: ObjectiveElementProps, context) => {
         </Box>
       </Flex.Item>
       <Flex.Item grow={grow} basis="content">
-        <Box
-          className="UplinkObjective__Content"
-          height="100%"
-        >
-          <Box>
-            {description}
-          </Box>
+        <Box className="UplinkObjective__Content" height="100%">
+          <Box>{description}</Box>
           {!finalObjective && (
             <Box mt={1}>
               Failing this objective will deduct {telecrystalPenalty} TC.
             </Box>
           )}
-          {(finalObjective && objectiveState === ObjectiveState.Inactive) && (
+          {finalObjective && objectiveState === ObjectiveState.Inactive && (
             <NoticeBox warning mt={1}>
-              Taking this objective will lock you out of getting
-              anymore objectives! Furthermore, you will be unable to
-              abort this objective.
+              Taking this objective will lock you out of getting anymore
+              objectives! Furthermore, you will be unable to abort this
+              objective.
             </NoticeBox>
           )}
-
         </Box>
       </Flex.Item>
       <Flex.Item>
-        <Box
-          className="UplinkObjective__Footer"
-        >
+        <Box className="UplinkObjective__Footer">
           <Stack vertical>
             <Stack.Item>
               <Stack align="center" justify="center">
                 <Box
                   style={{
-                    "border": "2px solid rgba(0, 0, 0, 0.5)",
-                    "border-left": "none",
-                    "border-right": "none",
-                    "border-bottom": objectiveFinished? "none" : undefined,
+                    border: '2px solid rgba(0, 0, 0, 0.5)',
+                    'border-left': 'none',
+                    'border-right': 'none',
+                    'border-bottom': objectiveFinished ? 'none' : undefined,
                   }}
                   className={reputation.gradient}
                   py={0.5}
@@ -483,44 +478,58 @@ const ObjectiveElement = (props: ObjectiveElementProps, context) => {
                     {calculateProgression(progressionReward)} Reputation
                     {Math.abs(progressionDiff) > 10 && (
                       <Tooltip
-                        content={(
+                        content={
                           <Box>
                             You will get
                             <Box
                               mr={1}
                               ml={1}
-                              color={progressionDiff > 0? progressionDiff > 25? "red" : "orange" : "green"}
+                              color={
+                                progressionDiff > 0
+                                  ? progressionDiff > 25
+                                    ? 'red'
+                                    : 'orange'
+                                  : 'green'
+                              }
                               as="span"
                             >
                               {Math.abs(progressionDiff)}%
                             </Box>
-                            {progressionDiff > 0 ? "less" : "more"} reputation from this objective.
-                            This is because your reputation is {progressionDiff > 0? "ahead " : "behind "}
+                            {progressionDiff > 0 ? 'less' : 'more'} reputation
+                            from this objective. This is because your reputation
+                            is {progressionDiff > 0 ? 'ahead ' : 'behind '}
                             where it normally should be at.
                           </Box>
-                        )}
+                        }
                       >
                         <Box
                           ml={1}
-                          color={progressionDiff > 0? progressionDiff > 35? "red" : "orange" : "green"}
+                          color={
+                            progressionDiff > 0
+                              ? progressionDiff > 35
+                                ? 'red'
+                                : 'orange'
+                              : 'green'
+                          }
                           as="span"
                         >
-                          ({progressionDiff > 0? "-" : "+"}{Math.abs(progressionDiff)}%)
+                          ({progressionDiff > 0 ? '-' : '+'}
+                          {Math.abs(progressionDiff)}%)
                         </Box>
                       </Tooltip>
                     )}
                   </Box>
                 </Box>
               </Stack>
-              {objectiveFinished? (
+              {objectiveFinished ? (
                 <Box
                   inline
                   className={reputation.gradient}
                   style={{
-                    "border-radius": "0",
-                    "border": "2px solid rgba(0, 0, 0, 0.5)",
-                    "border-left": "none",
-                    "border-right": "none",
+                    'border-radius': '0',
+                    border: '2px solid rgba(0, 0, 0, 0.5)',
+                    'border-left': 'none',
+                    'border-right': 'none',
                   }}
                   position="relative"
                   width="100%"
@@ -530,31 +539,30 @@ const ObjectiveElement = (props: ObjectiveElementProps, context) => {
                   <Box
                     width="100%"
                     height="100%"
-                    backgroundColor={objectiveFailed
-                      ? "rgba(255, 0, 0, 0.1)"
-                      : "rgba(0, 255, 0, 0.1)"}
+                    backgroundColor={
+                      objectiveFailed
+                        ? 'rgba(255, 0, 0, 0.1)'
+                        : 'rgba(0, 255, 0, 0.1)'
+                    }
                     position="absolute"
                     left={0}
                     top={0}
                   />
                   <Button
                     onClick={handleCompletion}
-                    color={objectiveFailed? "bad" : "good"}
+                    color={objectiveFailed ? 'bad' : 'good'}
                     style={{
-                      "border": "1px solid rgba(0, 0, 0, 0.65)",
+                      border: '1px solid rgba(0, 0, 0, 0.65)',
                     }}
                     my={1}
                   >
                     TURN IN
                   </Button>
                 </Box>
-              )
-                : null}
+              ) : null}
             </Stack.Item>
             {!!uiButtons && !objectiveFinished && (
-              <Stack.Item>
-                {uiButtons}
-              </Stack.Item>
+              <Stack.Item>{uiButtons}</Stack.Item>
             )}
           </Stack>
         </Box>
diff --git a/tgui/packages/tgui/interfaces/Uplink/calculateReputationLevel.tsx b/tgui/packages/tgui/interfaces/Uplink/calculateReputationLevel.tsx
index 26f37c9972bf..7efe50b1cf2e 100644
--- a/tgui/packages/tgui/interfaces/Uplink/calculateReputationLevel.tsx
+++ b/tgui/packages/tgui/interfaces/Uplink/calculateReputationLevel.tsx
@@ -4,79 +4,79 @@ export const calculateProgression = (progression_points: number) => {
   return Math.round(progression_points / 6) / 10;
 };
 
-const badGradient = "reputation-bad";
-const normalGradient = "reputation-normal";
-const goodGradient = "reputation-good";
-const veryGoodGradient = "reputation-very-good";
-const ultraGoodGradient = "reputation-super-good";
-const bestGradient = "reputation-best";
+const badGradient = 'reputation-bad';
+const normalGradient = 'reputation-normal';
+const goodGradient = 'reputation-good';
+const veryGoodGradient = 'reputation-very-good';
+const ultraGoodGradient = 'reputation-super-good';
+const bestGradient = 'reputation-best';
 
 export type Rank = {
   minutesLessThan: number;
   title: string;
   gradient: string;
-}
+};
 
 export const ranks: Rank[] = [
   {
     minutesLessThan: 5,
-    title: "Obscure",
+    title: 'Obscure',
     gradient: badGradient,
   },
   {
     minutesLessThan: 10,
-    title: "Insignificant",
+    title: 'Insignificant',
     gradient: normalGradient,
   },
   {
     minutesLessThan: 20,
-    title: "Noteworthy",
+    title: 'Noteworthy',
     gradient: normalGradient,
   },
   {
     minutesLessThan: 30,
-    title: "Reputable",
+    title: 'Reputable',
     gradient: goodGradient,
   },
   {
     minutesLessThan: 50,
-    title: "Well-known",
+    title: 'Well-known',
     gradient: goodGradient,
   },
   {
     minutesLessThan: 70,
-    title: "Significant",
+    title: 'Significant',
     gradient: veryGoodGradient,
   },
   {
     minutesLessThan: 90,
-    title: "Famous",
+    title: 'Famous',
     gradient: veryGoodGradient,
   },
   {
     minutesLessThan: 110,
-    title: "Glorious",
+    title: 'Glorious',
     gradient: ultraGoodGradient,
   },
   {
     minutesLessThan: 130,
-    title: "Fabled",
+    title: 'Fabled',
     gradient: ultraGoodGradient,
   },
   {
     minutesLessThan: -1,
-    title: "Legendary",
+    title: 'Legendary',
     gradient: bestGradient,
   },
 ];
 
-export const reputationDefault = 50*600;
+export const reputationDefault = 50 * 600;
 
 let lastMinutesThan = -1;
 export const reputationLevelsTooltip = (
   <Box preserveWhitespace>
     <Flex direction="column" mt={1}>
-      {ranks.map(value => {
+      {ranks.map((value) => {
         if (lastMinutesThan === -1) {
           lastMinutesThan = 0;
         }
@@ -90,8 +90,8 @@ export const reputationLevelsTooltip = (
               color="white"
               className={value.gradient}
               style={{
-                "border-radius": "5px",
-                "display": "inline-block",
+                'border-radius': '5px',
+                display: 'inline-block',
               }}
               px={0.8}
               py={0.6}
@@ -120,21 +120,25 @@ export const getReputation = (progression_points: number) => {
 
 export const calculateReputationLevel = (
   progression_points: number,
-  textOnly: boolean
+  textOnly: boolean,
 ) => {
   const minutes = progression_points / 600;
   const displayedProgression = calculateProgression(progression_points);
   const reputation = getReputation(progression_points);
   if (textOnly) {
-    return (<Box as="span">{reputation.title} ({displayedProgression})</Box>);
+    return (
+      <Box as="span">
+        {reputation.title} ({displayedProgression})
+      </Box>
+    );
   }
   return (
     <Box
       color="white"
       className={reputation.gradient}
       style={{
-        "border-radius": "5px",
-        "display": "inline-block",
+        'border-radius': '5px',
+        display: 'inline-block',
       }}
       px={0.8}
       py={0.6}
diff --git a/tgui/packages/tgui/interfaces/Uplink/index.tsx b/tgui/packages/tgui/interfaces/Uplink/index.tsx
index c921c2eca371..97875fd36702 100644
--- a/tgui/packages/tgui/interfaces/Uplink/index.tsx
+++ b/tgui/packages/tgui/interfaces/Uplink/index.tsx
@@ -7,65 +7,70 @@ import { resolveAsset } from '../../assets';
 import { BooleanLike } from 'common/react';
 import { Box, Tabs, Button, Stack, Section, Tooltip } from '../../components';
 import { Objective, ObjectiveMenu } from './ObjectiveMenu';
-import { calculateProgression, calculateReputationLevel, reputationDefault, reputationLevelsTooltip } from './calculateReputationLevel';
+import {
+  calculateProgression,
+  calculateReputationLevel,
+  reputationDefault,
+  reputationLevelsTooltip,
+} from './calculateReputationLevel';
 
 type UplinkItem = {
-  id: string,
-  name: string,
-  cost: number,
-  desc: string,
-  category: string,
-  purchasable_from: number,
-  restricted: BooleanLike,
-  limited_stock: number,
-  restricted_roles: string,
-  restricted_species: string,
-  progression_minimum: number,
-  cost_override_string: string
-  ref?: string,
-}
+  id: string;
+  name: string;
+  cost: number;
+  desc: string;
+  category: string;
+  purchasable_from: number;
+  restricted: BooleanLike;
+  limited_stock: number;
+  restricted_roles: string;
+  restricted_species: string;
+  progression_minimum: number;
+  cost_override_string: string;
+  ref?: string;
+};
 
 type UplinkData = {
-  telecrystals: number,
-  progression_points: number,
-  lockable: BooleanLike,
-  current_expected_progression: number,
-  progression_scaling_deviance: number,
-  current_progression_scaling: number,
-  uplink_flag: number,
-  assigned_role: string,
-  assigned_species: string,
-  debug: BooleanLike,
-  extra_purchasable: UplinkItem[],
+  telecrystals: number;
+  progression_points: number;
+  lockable: BooleanLike;
+  current_expected_progression: number;
+  progression_scaling_deviance: number;
+  current_progression_scaling: number;
+  uplink_flag: number;
+  assigned_role: string;
+  assigned_species: string;
+  debug: BooleanLike;
+  extra_purchasable: UplinkItem[];
   extra_purchasable_stock: {
     [key: string]: number;
-  }
+  };
   current_stock: {
     [key: string]: number;
-  }
+  };
 
-  has_objectives: BooleanLike,
-  has_progression: BooleanLike,
-  potential_objectives: Objective[],
-  active_objectives: Objective[],
-  maximum_active_objectives: number,
-  maximum_potential_objectives: number,
-}
+  has_objectives: BooleanLike;
+  has_progression: BooleanLike;
+  potential_objectives: Objective[];
+  active_objectives: Objective[];
+  maximum_active_objectives: number;
+  maximum_potential_objectives: number;
+};
 
 type UplinkState = {
-  allItems: UplinkItem[],
-  allCategories: string[],
-  currentTab: number,
-}
+  allItems: UplinkItem[];
+  allCategories: string[];
+  currentTab: number;
+};
 
 type ServerData = {
-  items: UplinkItem[],
-  categories: string[],
-}
+  items: UplinkItem[];
+  categories: string[];
+};
 
 type ItemExtraData = {
-  ref?: string | undefined
-}
+  ref?: string | undefined;
+};
 
 // Cache response so it's only sent once
 let fetchServerData: Promise<ServerData> | undefined;
@@ -86,8 +91,9 @@ export class Uplink extends Component<{}, UplinkState> {
 
   async populateServerData() {
     if (!fetchServerData) {
-      fetchServerData = fetchRetry(resolveAsset("uplink.json"))
-        .then(response => response.json());
+      fetchServerData = fetchRetry(resolveAsset('uplink.json')).then(
+        (response) => response.json(),
+      );
     }
     const { data } = useBackend<UplinkData>(this.context);
 
@@ -107,29 +113,36 @@ export class Uplink extends Component<{}, UplinkState> {
     });
 
     const availableCategories: string[] = [];
-    uplinkData.items = uplinkData.items.filter(value => {
-      if (value.restricted_roles.length > 0
-        && !value.restricted_roles.includes(uplinkRole)) {
+    uplinkData.items = uplinkData.items.filter((value) => {
+      if (
+        value.restricted_roles.length > 0 &&
+        !value.restricted_roles.includes(uplinkRole)
+      ) {
         return false;
       }
-      if (value.restricted_species.length > 0
-        && !value.restricted_species.includes(uplinkSpecies)) {
+      if (
+        value.restricted_species.length > 0 &&
+        !value.restricted_species.includes(uplinkSpecies)
+      ) {
         return false;
       }
-      { if (value.purchasable_from & uplinkFlag) {
-        return true;
-      } }
+      {
+        if (value.purchasable_from & uplinkFlag) {
+          return true;
+        }
+      }
       return false;
     });
 
-    uplinkData.items.forEach(item => {
+    uplinkData.items.forEach((item) => {
       if (!availableCategories.includes(item.category)) {
         availableCategories.push(item.category);
       }
     });
 
-    uplinkData.categories = uplinkData.categories.filter(value =>
-      availableCategories.includes(value));
+    uplinkData.categories = uplinkData.categories.filter((value) =>
+      availableCategories.includes(value),
+    );
 
     this.setState({
       allItems: uplinkData.items,
@@ -156,11 +169,7 @@ export class Uplink extends Component<{}, UplinkState> {
       current_stock,
       lockable,
     } = data;
-    const {
-      allItems,
-      allCategories,
-      currentTab,
-    } = this.state as UplinkState;
+    const { allItems, allCategories, currentTab } = this.state as UplinkState;
 
     const itemsToAdd = [...allItems];
     const items: Item<ItemExtraData>[] = [];
@@ -173,10 +182,10 @@ export class Uplink extends Component<{}, UplinkState> {
     }
     for (let i = 0; i < itemsToAdd.length; i++) {
       const item = itemsToAdd[i];
-      const hasEnoughProgression
-        = progression_points >= item.progression_minimum;
+      const hasEnoughProgression =
+        progression_points >= item.progression_minimum;
 
-      let stock: number|null = current_stock[item.id];
+      let stock: number | null = current_stock[item.id];
       if (item.ref) {
         stock = extra_purchasable_stock[item.ref];
       }
@@ -188,24 +197,20 @@ export class Uplink extends Component<{}, UplinkState> {
         id: item.id,
         name: item.name,
         category: item.category,
-        desc: (
-          <Box>
-            {item.desc}
-          </Box>
-        ),
+        desc: <Box>{item.desc}</Box>,
         cost: (
           <Box>
             {item.cost_override_string || `${item.cost} TC`}
-            {has_progression
-              ? (
-                <>
-                  ,&nbsp;
-                  <Box as="span">
-                    {calculateReputationLevel(item.progression_minimum, true)}
-                  </Box>
-                </>
-              )
-              : ""}
+            {has_progression ? (
+              <>
+                ,&nbsp;
+                <Box as="span">
+                  {calculateReputationLevel(item.progression_minimum, true)}
+                </Box>
+              </>
+            ) : (
+              ''
+            )}
           </Box>
         ),
         disabled: !canBuy || (has_progression && !hasEnoughProgression),
@@ -216,19 +221,17 @@ export class Uplink extends Component<{}, UplinkState> {
     }
     // Get the difference between the current progression and
     // expected progression
-    let progressionPercentage
-      = (current_expected_progression - progression_points);
+    let progressionPercentage =
+      current_expected_progression - progression_points;
     // Clamp it down between 0 and 2
-    progressionPercentage
-      = Math.min(Math.max(
-        progressionPercentage / progression_scaling_deviance, -1), 1);
+    progressionPercentage = Math.min(
+      Math.max(progressionPercentage / progression_scaling_deviance, -1),
+      1,
+    );
     // Round it and convert it into a percentage
-    progressionPercentage = Math.round(progressionPercentage * 1000)/10;
+    progressionPercentage = Math.round(progressionPercentage * 1000) / 10;
     return (
-      <Window
-        width={820}
-        height={580}
-        theme="syndicate">
+      <Window width={820} height={580} theme="syndicate">
         <Window.Content scrollable={currentTab !== 0 || !has_objectives}>
           <Stack vertical fill>
             <Stack.Item>
@@ -247,36 +250,56 @@ export class Uplink extends Component<{}, UplinkState> {
                   </Stack.Item>
                   <Stack.Item align="center">
                     <Box bold fontSize={1.2}>
-                      <Tooltip content={!!has_progression && (
-                        <Box>
-                          <Box>
-                            Your current level of reputation.&nbsp;
-                            Reputation determines what quality of objective
-                            you get and what items you can purchase.&nbsp;
-                            <Box mt={0.5}>
-                              {/* A minute in deciseconds */}
-                              Reputation passively increases by <Box color="green" as="span">{calculateProgression(current_progression_scaling)}</Box>
-                              &nbsp;every minute
-                            </Box>
-                            {Math.abs(progressionPercentage) > 0 && (
-                              <Box mt={0.5}>
-                                Because your reputation is {progressionPercentage < 0? "ahead " : "behind "}
-                                of where it should be, you are getting
-                                <Box
-                                  as="span"
-                                  color={progressionPercentage < 0? "red" : "green"}
-                                  ml={1}
-                                  mr={1}
-                                >
-                                  {progressionPercentage}%
+                      <Tooltip
+                        content={
+                          (!!has_progression && (
+                            <Box>
+                              <Box>
+                                Your current level of reputation.&nbsp;
+                                Reputation determines what quality of objective
+                                you get and what items you can purchase.&nbsp;
+                                <Box mt={0.5}>
+                                  {/* A minute in deciseconds */}
+                                  Reputation passively increases by{' '}
+                                  <Box color="green" as="span">
+                                    {calculateProgression(
+                                      current_progression_scaling,
+                                    )}
+                                  </Box>
+                                  &nbsp;every minute
                                 </Box>
-                                {progressionPercentage < 0? "less": "more"} reputation every minute
+                                {Math.abs(progressionPercentage) > 0 && (
+                                  <Box mt={0.5}>
+                                    Because your reputation is{' '}
+                                    {progressionPercentage < 0
+                                      ? 'ahead '
+                                      : 'behind '}
+                                    of where it should be, you are getting
+                                    <Box
+                                      as="span"
+                                      color={
+                                        progressionPercentage < 0
+                                          ? 'red'
+                                          : 'green'
+                                      }
+                                      ml={1}
+                                      mr={1}
+                                    >
+                                      {progressionPercentage}%
+                                    </Box>
+                                    {progressionPercentage < 0
+                                      ? 'less'
+                                      : 'more'}{' '}
+                                    reputation every minute
+                                  </Box>
+                                )}
+                                {reputationLevelsTooltip}
                               </Box>
-                            )}
-                            {reputationLevelsTooltip}
-                          </Box>
-                        </Box>
-                      ) || "Your current level of reputation. You are a respected elite and do not need to improve your reputation."}>
+                            </Box>
+                          )) ||
+                          'Your current level of reputation. You are a respected elite and do not need to improve your reputation.'
+                        }
+                      >
                         {/* If we have no progression,
                       just give them a generic title */}
                         {has_progression
@@ -318,7 +341,7 @@ export class Uplink extends Component<{}, UplinkState> {
                         icon="times"
                         content="Lock"
                         color="transparent"
-                        onClick={() => act("lock")}
+                        onClick={() => act('lock')}
                       />
                     </Stack.Item>
                   )}
@@ -326,21 +349,40 @@ export class Uplink extends Component<{}, UplinkState> {
               </Section>
             </Stack.Item>
             <Stack.Item grow>
-              {(currentTab === 0 && has_objectives) && (
+              {(currentTab === 0 && has_objectives && (
                 <ObjectiveMenu
                   activeObjectives={active_objectives}
                   potentialObjectives={potential_objectives}
                   maximumActiveObjectives={maximum_active_objectives}
                   maximumPotentialObjectives={maximum_potential_objectives}
                   handleObjectiveAction={(objective, action) =>
-                    act("objective_act", { check: objective.original_progression, objective_action: action, index: objective.id })}
-                  handleStartObjective={(objective) => act("start_objective", { check: objective.original_progression, index: objective.id })}
+                    act('objective_act', {
+                      check: objective.original_progression,
+                      objective_action: action,
+                      index: objective.id,
+                    })
+                  }
+                  handleStartObjective={(objective) =>
+                    act('start_objective', {
+                      check: objective.original_progression,
+                      index: objective.id,
+                    })
+                  }
                   handleObjectiveAbort={(objective) =>
-                    act("objective_abort", { check: objective.original_progression, index: objective.id })}
-                  handleObjectiveCompleted={(objective) => act("finish_objective", { check: objective.original_progression, index: objective.id })}
-                  handleRequestObjectives={() => act("regenerate_objectives")}
+                    act('objective_abort', {
+                      check: objective.original_progression,
+                      index: objective.id,
+                    })
+                  }
+                  handleObjectiveCompleted={(objective) =>
+                    act('finish_objective', {
+                      check: objective.original_progression,
+                      index: objective.id,
+                    })
+                  }
+                  handleRequestObjectives={() => act('regenerate_objectives')}
                 />
-              ) || (
+              )) || (
                 <GenericUplink
                   currency=""
                   categories={allCategories}
@@ -348,9 +390,9 @@ export class Uplink extends Component<{}, UplinkState> {
                   handleBuy={(item) => {
                     const extraDataItem = item as Item<ItemExtraData>;
                     if (!extraDataItem.extraData?.ref) {
-                      act("buy", { path: item.id });
+                      act('buy', { path: item.id });
                     } else {
-                      act("buy", { ref: extraDataItem.extraData.ref });
+                      act('buy', { ref: extraDataItem.extraData.ref });
                     }
                   }}
                 />
@@ -361,7 +403,4 @@ export class Uplink extends Component<{}, UplinkState> {
       </Window>
     );
   }
-
 }
-
-
diff --git a/tgui/packages/tgui/interfaces/VaultController.js b/tgui/packages/tgui/interfaces/VaultController.js
index 510c6029547e..f41f6396e7e8 100644
--- a/tgui/packages/tgui/interfaces/VaultController.js
+++ b/tgui/packages/tgui/interfaces/VaultController.js
@@ -6,30 +6,33 @@ import { Window } from '../layouts';
 export const VaultController = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window
-      width={300}
-      height={120}>
+    <Window width={300} height={120}>
       <Window.Content>
         <Section
           title="Lock Status: "
-          buttons={(
+          buttons={
             <Button
               content={data.doorstatus ? 'Locked' : 'Unlocked'}
               icon={data.doorstatus ? 'lock' : 'unlock'}
               disabled={data.stored < data.max}
-              onClick={() => act('togglelock')} />
-          )}>
+              onClick={() => act('togglelock')}
+            />
+          }
+        >
           <LabeledList>
             <LabeledList.Item label="Charge">
               <ProgressBar
                 value={data.stored / data.max}
                 ranges={{
                   good: [1, Infinity],
-                  average: [0.30, 1],
-                  bad: [-Infinity, 0.30],
-                }}>
-                {toFixed(data.stored / 1000) + ' / '
-                  + toFixed(data.max / 1000) + ' kW'}
+                  average: [0.3, 1],
+                  bad: [-Infinity, 0.3],
+                }}
+              >
+                {toFixed(data.stored / 1000) +
+                  ' / ' +
+                  toFixed(data.max / 1000) +
+                  ' kW'}
               </ProgressBar>
             </LabeledList.Item>
           </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/Vendatray.js b/tgui/packages/tgui/interfaces/Vendatray.js
index 6be5878f8ad3..a292518c7b04 100644
--- a/tgui/packages/tgui/interfaces/Vendatray.js
+++ b/tgui/packages/tgui/interfaces/Vendatray.js
@@ -4,37 +4,19 @@ import { Window } from '../layouts';
 
 export const Vendatray = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    product_name,
-    product_cost,
-    tray_open,
-    registered,
-    owner_name,
-  } = data;
+  const { product_name, product_cost, tray_open, registered, owner_name } =
+    data;
   return (
-    <Window
-      width={300}
-      height={270}>
+    <Window width={300} height={270}>
       <Window.Content>
-        <Flex
-          mb={1}>
-          <Flex.Item
-            mr={1}>
-            {!!product_name && (
-              <VendingImage />
-            )}
-          </Flex.Item>
-          <Flex.Item
-            grow={1}>
-            <Section
-              fontSize="18px"
-              align="center">
-              <b>{product_name ? product_name : "Empty"}</b>
+        <Flex mb={1}>
+          <Flex.Item mr={1}>{!!product_name && <VendingImage />}</Flex.Item>
+          <Flex.Item grow={1}>
+            <Section fontSize="18px" align="center">
+              <b>{product_name ? product_name : 'Empty'}</b>
               <Box fontSize="16px">
-                <i>{product_name ? product_cost : "N/A"} cr </i>
-                <Button
-                  icon="pen"
-                  onClick={() => act('Adjust')} />
+                <i>{product_name ? product_cost : 'N/A'} cr </i>
+                <Button icon="pen" onClick={() => act('Adjust')} />
               </Box>
             </Section>
             <>
@@ -43,31 +25,30 @@ export const Vendatray = (props, context) => {
                 icon="window-restore"
                 content={tray_open ? 'Open' : 'Closed'}
                 selected={tray_open}
-                onClick={() => act('Open')} />
+                onClick={() => act('Open')}
+              />
               <Button.Confirm
                 fluid
                 icon="money-bill-wave"
                 content="Purchase Item"
                 disabled={!product_name}
-                onClick={() => act('Buy')} />
+                onClick={() => act('Buy')}
+              />
             </>
           </Flex.Item>
         </Flex>
-        {registered?(
-          <Section italics>
-            Pays to the account of {owner_name}.
-          </Section>
-        ):(
+        {registered ? (
+          <Section italics>Pays to the account of {owner_name}.</Section>
+        ) : (
           <>
-            <Section>
-              Tray is unregistered.
-            </Section>
+            <Section>Tray is unregistered.</Section>
             <Button
               fluid
               icon="cash-register"
               content="Register Tray"
               disabled={registered}
-              onClick={() => act('Register')} />
+              onClick={() => act('Register')}
+            />
           </>
         )}
       </Window.Content>
@@ -77,12 +58,11 @@ export const Vendatray = (props, context) => {
 
 const VendingImage = (props, context) => {
   const { data } = useBackend(context);
-  const {
-    product_icon,
-  } = data;
+  const { product_icon } = data;
   return (
     <Section height="100%">
-      <Box as="img"
+      <Box
+        as="img"
         m={1}
         src={`data:image/jpeg;base64,${product_icon}`}
         height="96px"
@@ -90,7 +70,8 @@ const VendingImage = (props, context) => {
         style={{
           '-ms-interpolation-mode': 'nearest-neighbor',
           'vertical-align': 'middle',
-        }} />
+        }}
+      />
     </Section>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/Vending.tsx b/tgui/packages/tgui/interfaces/Vending.tsx
index 2d90e68f1540..98b681b483c2 100644
--- a/tgui/packages/tgui/interfaces/Vending.tsx
+++ b/tgui/packages/tgui/interfaces/Vending.tsx
@@ -1,6 +1,15 @@
 import { classes } from 'common/react';
 import { useBackend } from '../backend';
-import { Box, Button, Icon, LabeledList, NoticeBox, Section, Stack, Table } from '../components';
+import {
+  Box,
+  Button,
+  Icon,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Stack,
+  Table,
+} from '../components';
 import { Window } from '../layouts';
 
 type VendingData = {
@@ -145,12 +154,14 @@ const ProductDisplay = (_, context) => {
       scrollable
       title="Products"
       buttons={
-        !!onstation
-        && user && (
+        !!onstation &&
+        user && (
           <Box fontSize="16px" color="green">
             {(user && user.cash) || 0} cr <Icon name="coins" color="gold" />
-          </Box>)
-      }>
+          </Box>
+        )
+      }
+    >
       <Table>
         {inventory.map((product) => (
           <VendingRow
@@ -173,17 +184,16 @@ const VendingRow = (props, context) => {
   const { data } = useBackend<VendingData>(context);
   const { custom, product, productStock } = props;
   const { access, department, jobDiscount, onstation, user } = data;
-  const free
-    = !onstation
-    || product.price === 0;
+  const free = !onstation || product.price === 0;
   const discount = !product.premium && access;
   const remaining = custom ? product.amount : productStock.amount;
   const redPrice = Math.round(product.price * jobDiscount);
-  const disabled
-    = remaining === 0
-    || (onstation && !user)
-    || (onstation && !access
-    && (discount ? redPrice : product.price) > user?.cash);
+  const disabled =
+    remaining === 0 ||
+    (onstation && !user) ||
+    (onstation &&
+      !access &&
+      (discount ? redPrice : product.price) > user?.cash);
 
   return (
     <Table.Row>
@@ -199,11 +209,7 @@ const VendingRow = (props, context) => {
         )}
       </Table.Cell>
       <Table.Cell collapsing textAlign="right">
-        <ProductStock
-          custom={custom}
-          product={product}
-          remaining={remaining}
-        />
+        <ProductStock custom={custom} product={product} remaining={remaining} />
       </Table.Cell>
       <Table.Cell collapsing textAlign="center">
         <ProductButton
@@ -266,10 +272,11 @@ const ProductStock = (props) => {
   return (
     <Box
       color={
-        (remaining <= 0 && 'bad')
-        || (!custom && remaining <= product.max_amount / 2 && 'average')
-        || 'good'
-      }>
+        (remaining <= 0 && 'bad') ||
+        (!custom && remaining <= product.max_amount / 2 && 'average') ||
+        'good'
+      }
+    >
       {remaining} left
     </Box>
   );
@@ -283,7 +290,7 @@ const ProductButton = (props, context) => {
   const customPrice = access ? 'FREE' : product.price + ' cr';
   let standardPrice = product.price + ' cr';
   if (free) {
-    standardPrice = "FREE";
+    standardPrice = 'FREE';
   } else if (discount) {
     standardPrice = redPrice + ' cr';
   }
@@ -293,8 +300,10 @@ const ProductButton = (props, context) => {
       disabled={disabled}
       onClick={() =>
         act('dispense', {
-          'item': product.name,
-        })}>
+          item: product.name,
+        })
+      }
+    >
       {customPrice}
     </Button>
   ) : (
@@ -303,8 +312,10 @@ const ProductButton = (props, context) => {
       disabled={disabled}
       onClick={() =>
         act('vend', {
-          'ref': product.ref,
-        })}>
+          ref: product.ref,
+        })
+      }
+    >
       {standardPrice}
     </Button>
   );
diff --git a/tgui/packages/tgui/interfaces/Vote.js b/tgui/packages/tgui/interfaces/Vote.js
index 9d16a6614b3f..70c4ce6761bb 100644
--- a/tgui/packages/tgui/interfaces/Vote.js
+++ b/tgui/packages/tgui/interfaces/Vote.js
@@ -1,5 +1,14 @@
 import { useBackend } from '../backend';
-import { Box, Icon, Stack, Button, Section, NoticeBox, LabeledList, Collapsible } from '../components';
+import {
+  Box,
+  Icon,
+  Stack,
+  Button,
+  Section,
+  NoticeBox,
+  LabeledList,
+  Collapsible,
+} from '../components';
 import { Window } from '../layouts';
 
 export const Vote = (props, context) => {
@@ -11,7 +20,8 @@ export const Vote = (props, context) => {
    */
   let windowTitle = 'Vote';
   if (mode) {
-    windowTitle += ': ' + (question || mode).replace(/^\w/, (c) => c.toUpperCase());
+    windowTitle +=
+      ': ' + (question || mode).replace(/^\w/, (c) => c.toUpperCase());
   }
 
   return (
@@ -36,12 +46,7 @@ export const Vote = (props, context) => {
  */
 const VoteOptions = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    allow_vote_restart,
-    allow_vote_map,
-    lower_admin,
-    upper_admin,
-  } = data;
+  const { allow_vote_restart, allow_vote_map, lower_admin, upper_admin } = data;
 
   return (
     <Stack.Item>
@@ -56,7 +61,8 @@ const VoteOptions = (props, context) => {
                     color="red"
                     checked={!!allow_vote_map}
                     disabled={!upper_admin}
-                    onClick={() => act('toggle_map')}>
+                    onClick={() => act('toggle_map')}
+                  >
                     {allow_vote_map ? 'Enabled' : 'Disabled'}
                   </Button.Checkbox>
                 )}
@@ -71,13 +77,15 @@ const VoteOptions = (props, context) => {
                     color="red"
                     checked={!!allow_vote_restart}
                     disabled={!upper_admin}
-                    onClick={() => act('toggle_restart')}>
+                    onClick={() => act('toggle_restart')}
+                  >
                     {allow_vote_restart ? 'Enabled' : 'Disabled'}
                   </Button.Checkbox>
                 )}
                 <Button
                   disabled={!allow_vote_restart}
-                  onClick={() => act('restart')}>
+                  onClick={() => act('restart')}
+                >
                   Restart
                 </Button>
               </Stack.Item>
@@ -106,7 +114,9 @@ const VotersList = (props, context) => {
 
   return (
     <Stack.Item>
-      <Collapsible title={`View Voters${voting.length ? `: ${voting.length}` : ""}`}>
+      <Collapsible
+        title={`View Voters${voting.length ? `: ${voting.length}` : ''}`}
+      >
         <Section height={8} fill scrollable>
           {voting.map((voter) => {
             return <Box key={voter}>{voter}</Box>;
@@ -140,10 +150,12 @@ const ChoicesPanel = (props, context) => {
                       disabled={i === selected_choice - 1}
                       onClick={() => {
                         act('vote', { index: i + 1 });
-                      }}>
+                      }}
+                    >
                       Vote
                     </Button>
-                  }>
+                  }
+                >
                   {i === selected_choice - 1 && (
                     <Icon
                       alignSelf="right"
@@ -183,7 +195,8 @@ const TimePanel = (props, context) => {
             <Button
               color="red"
               disabled={!lower_admin}
-              onClick={() => act('cancel')}>
+              onClick={() => act('cancel')}
+            >
               Cancel Vote
             </Button>
           )}
diff --git a/tgui/packages/tgui/interfaces/Wires.js b/tgui/packages/tgui/interfaces/Wires.js
index eb6734aab7ad..cdae9134bb3f 100644
--- a/tgui/packages/tgui/interfaces/Wires.js
+++ b/tgui/packages/tgui/interfaces/Wires.js
@@ -10,58 +10,61 @@ export const Wires = (props, context) => {
   return (
     <Window
       width={350}
-      height={150
-        + (wires.length * 30)
-        + (!!proper_name && 30)}>
+      height={150 + wires.length * 30 + (!!proper_name && 30)}
+    >
       <Window.Content>
-        {(!!proper_name && (
+        {!!proper_name && (
           <NoticeBox textAlign="center">
             {proper_name} Wire Configuration
           </NoticeBox>
-        ))}
+        )}
         <Section>
           <LabeledList>
-            {wires.map(wire => (
+            {wires.map((wire) => (
               <LabeledList.Item
                 key={wire.color}
                 className="candystripe"
                 label={wire.color}
                 labelColor={wire.color}
                 color={wire.color}
-                buttons={(
+                buttons={
                   <>
                     <Button
                       content={wire.cut ? 'Mend' : 'Cut'}
-                      onClick={() => act('cut', {
-                        wire: wire.color,
-                      })} />
+                      onClick={() =>
+                        act('cut', {
+                          wire: wire.color,
+                        })
+                      }
+                    />
                     <Button
                       content="Pulse"
-                      onClick={() => act('pulse', {
-                        wire: wire.color,
-                      })} />
+                      onClick={() =>
+                        act('pulse', {
+                          wire: wire.color,
+                        })
+                      }
+                    />
                     <Button
                       content={wire.attached ? 'Detach' : 'Attach'}
-                      onClick={() => act('attach', {
-                        wire: wire.color,
-                      })} />
+                      onClick={() =>
+                        act('attach', {
+                          wire: wire.color,
+                        })
+                      }
+                    />
                   </>
-                )}>
-                {!!wire.wire && (
-                  <i>
-                    ({wire.wire})
-                  </i>
-                )}
+                }
+              >
+                {!!wire.wire && <i>({wire.wire})</i>}
               </LabeledList.Item>
             ))}
           </LabeledList>
         </Section>
         {!!statuses.length && (
           <Section>
-            {statuses.map(status => (
-              <Box key={status}>
-                {status}
-              </Box>
+            {statuses.map((status) => (
+              <Box key={status}>{status}</Box>
             ))}
           </Section>
         )}
diff --git a/tgui/packages/tgui/interfaces/common/AccessConfig.js b/tgui/packages/tgui/interfaces/common/AccessConfig.js
index 29afea9a9b0f..e9a9ebaa2331 100644
--- a/tgui/packages/tgui/interfaces/common/AccessConfig.js
+++ b/tgui/packages/tgui/interfaces/common/AccessConfig.js
@@ -12,34 +12,33 @@ export const AccessConfig = (props, context) => {
     grantDep,
     denyDep,
   } = props;
-  const [
-    selectedAccessName,
-    setSelectedAccessName,
-  ] = useLocalState(context, 'accessName', accesses[0]?.name);
-  const selectedAccess = accesses
-    .find(access => access.name === selectedAccessName);
-  const selectedAccessEntries = sortBy(
-    entry => entry.desc,
-  )(selectedAccess?.accesses || []);
+  const [selectedAccessName, setSelectedAccessName] = useLocalState(
+    context,
+    'accessName',
+    accesses[0]?.name,
+  );
+  const selectedAccess = accesses.find(
+    (access) => access.name === selectedAccessName,
+  );
+  const selectedAccessEntries = sortBy((entry) => entry.desc)(
+    selectedAccess?.accesses || [],
+  );
 
-  const checkAccessIcon = accesses => {
+  const checkAccessIcon = (accesses) => {
     let oneAccess = false;
     let oneInaccess = false;
     for (let element of accesses) {
       if (selectedList.includes(element.ref)) {
         oneAccess = true;
-      }
-      else {
+      } else {
         oneInaccess = true;
       }
     }
     if (!oneAccess && oneInaccess) {
       return 0;
-    }
-    else if (oneAccess && oneInaccess) {
+    } else if (oneAccess && oneInaccess) {
       return 1;
-    }
-    else {
+    } else {
       return 2;
     }
   };
@@ -47,24 +46,27 @@ export const AccessConfig = (props, context) => {
   return (
     <Section
       title="Access"
-      buttons={(
+      buttons={
         <>
           <Button
             icon="check-double"
             content="Grant All"
             color="good"
-            onClick={() => grantAll()} />
+            onClick={() => grantAll()}
+          />
           <Button
             icon="undo"
             content="Deny All"
             color="bad"
-            onClick={() => denyAll()} />
+            onClick={() => denyAll()}
+          />
         </>
-      )}>
+      }
+    >
       <Flex>
         <Flex.Item>
           <Tabs vertical>
-            {accesses.map(access => {
+            {accesses.map((access) => {
               const entries = access.accesses || [];
               const icon = diffMap[checkAccessIcon(entries)].icon;
               const color = diffMap[checkAccessIcon(entries)].color;
@@ -75,7 +77,8 @@ export const AccessConfig = (props, context) => {
                   color={color}
                   icon={icon}
                   selected={access.name === selectedAccessName}
-                  onClick={() => setSelectedAccessName(access.name)}>
+                  onClick={() => setSelectedAccessName(access.name)}
+                >
                   {access.name}
                 </Tabs.Tab>
               );
@@ -90,7 +93,8 @@ export const AccessConfig = (props, context) => {
                 icon="check"
                 content="Grant Region"
                 color="good"
-                onClick={() => grantDep(selectedAccess.name)} />
+                onClick={() => grantDep(selectedAccess.name)}
+              />
             </Grid.Column>
             <Grid.Column ml={0}>
               <Button
@@ -98,16 +102,18 @@ export const AccessConfig = (props, context) => {
                 icon="times"
                 content="Deny Region"
                 color="bad"
-                onClick={() => denyDep(selectedAccess.name)} />
+                onClick={() => denyDep(selectedAccess.name)}
+              />
             </Grid.Column>
           </Grid>
-          {selectedAccessEntries.map(entry => (
+          {selectedAccessEntries.map((entry) => (
             <Button.Checkbox
               fluid
               key={entry.desc}
               content={entry.desc}
               checked={selectedList.includes(entry.ref)}
-              onClick={() => accessMod(entry.ref)} />
+              onClick={() => accessMod(entry.ref)}
+            />
           ))}
         </Flex.Item>
       </Flex>
diff --git a/tgui/packages/tgui/interfaces/common/AccessList.js b/tgui/packages/tgui/interfaces/common/AccessList.js
index ceef44a16609..b70e4e98be39 100644
--- a/tgui/packages/tgui/interfaces/common/AccessList.js
+++ b/tgui/packages/tgui/interfaces/common/AccessList.js
@@ -16,24 +16,24 @@ export const AccessList = (props, context) => {
     showBasic,
   } = props;
 
-  const [
-    wildcardTab,
-    setWildcardTab,
-  ] = useSharedState(context, "wildcardSelected", showBasic ? "None" : Object.keys(wildcardSlots)[0]);
+  const [wildcardTab, setWildcardTab] = useSharedState(
+    context,
+    'wildcardSelected',
+    showBasic ? 'None' : Object.keys(wildcardSlots)[0],
+  );
 
   let selectedWildcard;
 
-  if ((wildcardTab !== "None") && !wildcardSlots[wildcardTab]) {
-    selectedWildcard = showBasic ? "None" : Object.keys(wildcardSlots)[0];
+  if (wildcardTab !== 'None' && !wildcardSlots[wildcardTab]) {
+    selectedWildcard = showBasic ? 'None' : Object.keys(wildcardSlots)[0];
     setWildcardTab(selectedWildcard);
-  }
-  else {
+  } else {
     selectedWildcard = wildcardTab;
   }
 
   const parsedRegions = [];
   const selectedTrimAccess = [];
-  accesses.forEach(region => {
+  accesses.forEach((region) => {
     const regionName = region.name;
     const regionAccess = region.accesses;
     const parsedRegion = {
@@ -47,10 +47,11 @@ export const AccessList = (props, context) => {
     // we want to figure out how many are selected for later formatting
     // logic.
     if (showBasic) {
-      regionAccess.forEach(access => {
-        if (trimAccess.includes(access.ref)
-          && selectedList.includes(access.ref)
-          && !selectedTrimAccess.includes(access.ref)
+      regionAccess.forEach((access) => {
+        if (
+          trimAccess.includes(access.ref) &&
+          selectedList.includes(access.ref) &&
+          !selectedTrimAccess.includes(access.ref)
         ) {
           selectedTrimAccess.push(access.ref);
         }
@@ -59,16 +60,15 @@ export const AccessList = (props, context) => {
 
     // If there's no wildcard selected, grab accesses in
     // the trimAccess list as they require no wildcard.
-    if (selectedWildcard === "None") {
-      regionAccess.forEach(access => {
+    if (selectedWildcard === 'None') {
+      regionAccess.forEach((access) => {
         if (!trimAccess.includes(access.ref)) {
           return;
         }
         parsedRegion.accesses.push(access);
         if (selectedList.includes(access.ref)) {
           parsedRegion.hasSelected = true;
-        }
-        else {
+        } else {
           parsedRegion.allSelected = false;
         }
       });
@@ -80,7 +80,7 @@ export const AccessList = (props, context) => {
     // Otherwise, a trim is selected. We want to grab all
     // accesses not in trimAccess that are compatible with
     // the given wildcard.
-    regionAccess.forEach(access => {
+    regionAccess.forEach((access) => {
       if (trimAccess.includes(access.ref)) {
         return;
       }
@@ -88,8 +88,7 @@ export const AccessList = (props, context) => {
         parsedRegion.accesses.push(access);
         if (selectedList.includes(access.ref)) {
           parsedRegion.hasSelected = true;
-        }
-        else {
+        } else {
           parsedRegion.allSelected = false;
         }
       }
@@ -100,9 +99,7 @@ export const AccessList = (props, context) => {
   });
 
   return (
-    <Section
-      title="Access"
-      buttons={extraButtons} >
+    <Section title="Access" buttons={extraButtons}>
       <Flex wrap="wrap">
         <Flex.Item width="100%">
           <FormatWildcards
@@ -110,11 +107,11 @@ export const AccessList = (props, context) => {
             selectedList={selectedList}
             showBasic={showBasic}
             basicUsed={selectedTrimAccess.length}
-            basicMax={trimAccess.length} />
+            basicMax={trimAccess.length}
+          />
         </Flex.Item>
         <Flex.Item>
-          <RegionTabList
-            accesses={parsedRegions} />
+          <RegionTabList accesses={parsedRegions} />
         </Flex.Item>
         <Flex.Item grow={1}>
           <RegionAccessList
@@ -125,7 +122,8 @@ export const AccessList = (props, context) => {
             accessFlags={accessFlags}
             accessFlagNames={accessFlagNames}
             wildcardSlots={wildcardSlots}
-            showBasic={showBasic} />
+            showBasic={showBasic}
+          />
         </Flex.Item>
       </Flex>
     </Section>
@@ -133,25 +131,20 @@ export const AccessList = (props, context) => {
 };
 
 export const FormatWildcards = (props, context) => {
-  const {
-    wildcardSlots = {},
-    showBasic,
-    basicUsed = 0,
-    basicMax = 0,
-  } = props;
+  const { wildcardSlots = {}, showBasic, basicUsed = 0, basicMax = 0 } = props;
 
-  const [
-    wildcardTab,
-    setWildcardTab,
-  ] = useSharedState(context, "wildcardSelected", showBasic ? "None" : Object.keys(wildcardSlots)[0]);
+  const [wildcardTab, setWildcardTab] = useSharedState(
+    context,
+    'wildcardSelected',
+    showBasic ? 'None' : Object.keys(wildcardSlots)[0],
+  );
 
   let selectedWildcard;
 
-  if ((wildcardTab !== "None") && !wildcardSlots[wildcardTab]) {
-    selectedWildcard = showBasic ? "None" : Object.keys(wildcardSlots)[0];
+  if (wildcardTab !== 'None' && !wildcardSlots[wildcardTab]) {
+    selectedWildcard = showBasic ? 'None' : Object.keys(wildcardSlots)[0];
     setWildcardTab(selectedWildcard);
-  }
-  else {
+  } else {
     selectedWildcard = wildcardTab;
   }
 
@@ -159,27 +152,33 @@ export const FormatWildcards = (props, context) => {
     <Tabs>
       {showBasic && (
         <Tabs.Tab
-          selected={selectedWildcard === "None"}
-          onClick={() => setWildcardTab("None")} >
-          Trim:<br />{basicUsed + "/" + basicMax}
+          selected={selectedWildcard === 'None'}
+          onClick={() => setWildcardTab('None')}
+        >
+          Trim:
+          <br />
+          {basicUsed + '/' + basicMax}
         </Tabs.Tab>
       )}
 
-      {Object.keys(wildcardSlots).map(wildcard => {
+      {Object.keys(wildcardSlots).map((wildcard) => {
         const wcObj = wildcardSlots[wildcard];
         let wcLimit = wcObj.limit;
         const wcUsage = wcObj.usage.length;
         const wcLeft = wcLimit - wcUsage;
         if (wcLeft < 0) {
-          wcLimit = "∞";
+          wcLimit = '∞';
         }
         const wcLeftStr = `${wcUsage}/${wcLimit}`;
         return (
           <Tabs.Tab
             key={wildcard}
             selected={selectedWildcard === wildcard}
-            onClick={() => setWildcardTab(wildcard)} >
-            {wildcard + ":"}<br />{wcLeftStr}
+            onClick={() => setWildcardTab(wildcard)}
+          >
+            {wildcard + ':'}
+            <br />
+            {wcLeftStr}
           </Tabs.Tab>
         );
       })}
@@ -188,29 +187,30 @@ export const FormatWildcards = (props, context) => {
 };
 
 const RegionTabList = (props, context) => {
-  const {
-    accesses = [],
-  } = props;
+  const { accesses = [] } = props;
 
-  const [
-    selectedAccessName,
-    setSelectedAccessName,
-  ] = useSharedState(context, 'accessName', accesses[0]?.name);
+  const [selectedAccessName, setSelectedAccessName] = useSharedState(
+    context,
+    'accessName',
+    accesses[0]?.name,
+  );
 
   return (
     <Tabs vertical>
-      {accesses.map(access => {
-        const icon = (access.allSelected && "check")
-          || (access.hasSelected && "minus")
-          || "times";
+      {accesses.map((access) => {
+        const icon =
+          (access.allSelected && 'check') ||
+          (access.hasSelected && 'minus') ||
+          'times';
         return (
           <Tabs.Tab
             key={access.name}
             icon={icon}
-            minWidth={"100%"}
+            minWidth={'100%'}
             altSelection
             selected={access.name === selectedAccessName}
-            onClick={() => setSelectedAccessName(access.name)}>
+            onClick={() => setSelectedAccessName(access.name)}
+          >
             {access.name}
           </Tabs.Tab>
         );
@@ -231,35 +231,38 @@ const RegionAccessList = (props, context) => {
     showBasic,
   } = props;
 
-  const [
-    wildcardTab,
-    setWildcardTab,
-  ] = useSharedState(context, "wildcardSelected", showBasic ? "None" : Object.keys(wildcardSlots)[0]);
+  const [wildcardTab, setWildcardTab] = useSharedState(
+    context,
+    'wildcardSelected',
+    showBasic ? 'None' : Object.keys(wildcardSlots)[0],
+  );
 
   let selWildcard;
 
-  if ((wildcardTab !== "None") && !wildcardSlots[wildcardTab]) {
-    selWildcard = showBasic ? "None" : Object.keys(wildcardSlots)[0];
+  if (wildcardTab !== 'None' && !wildcardSlots[wildcardTab]) {
+    selWildcard = showBasic ? 'None' : Object.keys(wildcardSlots)[0];
     setWildcardTab(selWildcard);
-  }
-  else {
+  } else {
     selWildcard = wildcardTab;
   }
 
-  const [
-    selectedAccessName,
-  ] = useSharedState(context, 'accessName', accesses[0]?.name);
+  const [selectedAccessName] = useSharedState(
+    context,
+    'accessName',
+    accesses[0]?.name,
+  );
 
-  const selectedAccess = accesses
-    .find(access => access.name === selectedAccessName);
-  const selectedAccessEntries = sortBy(
-    entry => entry.desc,
-  )(selectedAccess?.accesses || []);
+  const selectedAccess = accesses.find(
+    (access) => access.name === selectedAccessName,
+  );
+  const selectedAccessEntries = sortBy((entry) => entry.desc)(
+    selectedAccess?.accesses || [],
+  );
 
   const allWildcards = Object.keys(wildcardSlots);
   let wcAccess = {};
-  allWildcards.forEach(wildcard => {
-    wildcardSlots[wildcard].usage.forEach(access => {
+  allWildcards.forEach((wildcard) => {
+    wildcardSlots[wildcard].usage.forEach((access) => {
       wcAccess[access] = wildcard;
     });
   });
@@ -270,27 +273,28 @@ const RegionAccessList = (props, context) => {
   const wcUsage = wildcard ? wildcard.usage.length : 0;
   const wcAvail = wcLimit - wcUsage;
 
-  return (
-    selectedAccessEntries.map(entry => {
-      const id = entry.ref;
-      const disableButton = (
-        ((wcAvail === 0) && (wcAccess[id] !== selWildcard))
-        || ((wcAvail > 0) && wcAccess[id] && wcAccess[id] !== selWildcard));
-      const entryName = (!wcAccess[id] && trimAccess.includes(id))
-        ? entry.desc : entry.desc + " (" + accessFlagNames[accessFlags[id]] + ")";
+  return selectedAccessEntries.map((entry) => {
+    const id = entry.ref;
+    const disableButton =
+      (wcAvail === 0 && wcAccess[id] !== selWildcard) ||
+      (wcAvail > 0 && wcAccess[id] && wcAccess[id] !== selWildcard);
+    const entryName =
+      !wcAccess[id] && trimAccess.includes(id)
+        ? entry.desc
+        : entry.desc + ' (' + accessFlagNames[accessFlags[id]] + ')';
 
-      return (
-        <Button.Checkbox
-          ml={1}
-          fluid
-          key={entry.desc}
-          content={entryName}
-          disabled={disableButton}
-          checked={selectedList.includes(entry.ref)}
-          onClick={() => accessMod(
-            entry.ref,
-            (selWildcard === "None") ? null : selWildcard)} />
-      );
-    })
-  );
+    return (
+      <Button.Checkbox
+        ml={1}
+        fluid
+        key={entry.desc}
+        content={entryName}
+        disabled={disableButton}
+        checked={selectedList.includes(entry.ref)}
+        onClick={() =>
+          accessMod(entry.ref, selWildcard === 'None' ? null : selWildcard)
+        }
+      />
+    );
+  });
 };
diff --git a/tgui/packages/tgui/interfaces/common/AtmosControls.js b/tgui/packages/tgui/interfaces/common/AtmosControls.js
index cfa167bf8212..086337380f7f 100644
--- a/tgui/packages/tgui/interfaces/common/AtmosControls.js
+++ b/tgui/packages/tgui/interfaces/common/AtmosControls.js
@@ -23,44 +23,57 @@ export const Vent = (props, context) => {
     <Section
       level={2}
       title={decodeHtmlEntities(long_name)}
-      buttons={(
+      buttons={
         <Button
           icon={power ? 'power-off' : 'times'}
           selected={power}
           content={power ? 'On' : 'Off'}
-          onClick={() => act('power', {
-            id_tag,
-            val: Number(!power),
-          })} />
-      )}>
+          onClick={() =>
+            act('power', {
+              id_tag,
+              val: Number(!power),
+            })
+          }
+        />
+      }
+    >
       <LabeledList>
         <LabeledList.Item label="Mode">
           <Button
             icon="sign-in-alt"
             content={direction ? 'Pressurizing' : 'Siphoning'}
             color={!direction && 'danger'}
-            onClick={() => act('direction', {
-              id_tag,
-              val: Number(!direction),
-            })} />
+            onClick={() =>
+              act('direction', {
+                id_tag,
+                val: Number(!direction),
+              })
+            }
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Pressure Regulator">
           <Button
             icon="sign-in-alt"
             content="Internal"
             selected={incheck}
-            onClick={() => act('incheck', {
-              id_tag,
-              val: checks,
-            })} />
+            onClick={() =>
+              act('incheck', {
+                id_tag,
+                val: checks,
+              })
+            }
+          />
           <Button
             icon="sign-out-alt"
             content="External"
             selected={excheck}
-            onClick={() => act('excheck', {
-              id_tag,
-              val: checks,
-            })} />
+            onClick={() =>
+              act('excheck', {
+                id_tag,
+                val: checks,
+              })
+            }
+          />
         </LabeledList.Item>
         {!!incheck && (
           <LabeledList.Item label="Internal Target">
@@ -71,17 +84,23 @@ export const Vent = (props, context) => {
               minValue={0}
               step={10}
               maxValue={5066}
-              onChange={(e, value) => act('set_internal_pressure', {
-                id_tag,
-                value,
-              })} />
+              onChange={(e, value) =>
+                act('set_internal_pressure', {
+                  id_tag,
+                  value,
+                })
+              }
+            />
             <Button
               icon="undo"
               disabled={intdefault}
               content="Reset"
-              onClick={() => act('reset_internal_pressure', {
-                id_tag,
-              })} />
+              onClick={() =>
+                act('reset_internal_pressure', {
+                  id_tag,
+                })
+              }
+            />
           </LabeledList.Item>
         )}
         {!!excheck && (
@@ -93,17 +112,23 @@ export const Vent = (props, context) => {
               minValue={0}
               step={10}
               maxValue={5066}
-              onChange={(e, value) => act('set_external_pressure', {
-                id_tag,
-                value,
-              })} />
+              onChange={(e, value) =>
+                act('set_external_pressure', {
+                  id_tag,
+                  value,
+                })
+              }
+            />
             <Button
               icon="undo"
               disabled={extdefault}
               content="Reset"
-              onClick={() => act('reset_external_pressure', {
-                id_tag,
-              })} />
+              onClick={() =>
+                act('reset_external_pressure', {
+                  id_tag,
+                })
+              }
+            />
           </LabeledList.Item>
         )}
       </LabeledList>
@@ -111,65 +136,72 @@ export const Vent = (props, context) => {
   );
 };
 
-
 export const Scrubber = (props, context) => {
   const { scrubber } = props;
   const { act } = useBackend(context);
-  const {
-    long_name,
-    power,
-    scrubbing,
-    id_tag,
-    quicksucc,
-    filter_types,
-  } = scrubber;
+  const { long_name, power, scrubbing, id_tag, quicksucc, filter_types } =
+    scrubber;
   return (
     <Section
       level={2}
       title={decodeHtmlEntities(long_name)}
-      buttons={(
+      buttons={
         <Button
           icon={power ? 'power-off' : 'times'}
           content={power ? 'On' : 'Off'}
           selected={power}
-          onClick={() => act('power', {
-            id_tag,
-            val: Number(!power),
-          })} />
-      )}>
+          onClick={() =>
+            act('power', {
+              id_tag,
+              val: Number(!power),
+            })
+          }
+        />
+      }
+    >
       <LabeledList>
         <LabeledList.Item label="Mode">
           <Button
             icon={scrubbing ? 'filter' : 'sign-in-alt'}
             color={scrubbing || 'danger'}
             content={scrubbing ? 'Scrubbing' : 'Siphoning'}
-            onClick={() => act('scrubbing', {
-              id_tag,
-              val: Number(!scrubbing),
-            })} />
+            onClick={() =>
+              act('scrubbing', {
+                id_tag,
+                val: Number(!scrubbing),
+              })
+            }
+          />
           <Button
             icon={quicksucc ? 'expand' : 'compress'}
             selected={quicksucc}
             content={quicksucc ? 'Fast Siphon' : 'Standard Siphon'}
-            onClick={() => act('quicksucc', {
-              id_tag,
-              val: Number(!quicksucc),
-            })} />
+            onClick={() =>
+              act('quicksucc', {
+                id_tag,
+                val: Number(!quicksucc),
+              })
+            }
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Filters">
-          {scrubbing
-            && filter_types.map(filter => (
-              <Button key={filter.gas_id}
+          {(scrubbing &&
+            filter_types.map((filter) => (
+              <Button
+                key={filter.gas_id}
                 icon={filter.enabled ? 'check-square-o' : 'square-o'}
                 content={getGasLabel(filter.gas_id, filter.gas_name)}
                 title={filter.gas_name}
                 selected={filter.enabled}
-                onClick={() => act('toggle_filter', {
-                  id_tag,
-                  val: filter.gas_id,
-                })} />
-            ))
-            || 'N/A'}
+                onClick={() =>
+                  act('toggle_filter', {
+                    id_tag,
+                    val: filter.gas_id,
+                  })
+                }
+              />
+            ))) ||
+            'N/A'}
         </LabeledList.Item>
       </LabeledList>
     </Section>
diff --git a/tgui/packages/tgui/interfaces/common/AtmosHandbook.tsx b/tgui/packages/tgui/interfaces/common/AtmosHandbook.tsx
index 4e15a0d8a899..4292e3aae0b2 100644
--- a/tgui/packages/tgui/interfaces/common/AtmosHandbook.tsx
+++ b/tgui/packages/tgui/interfaces/common/AtmosHandbook.tsx
@@ -51,7 +51,7 @@ const GasSearchBar = (
     activeInput: boolean;
     setActiveInput: (toggle: boolean) => void;
   },
-  context
+  context,
 ) => {
   const { title, onChange, activeInput, setActiveInput } = props;
   return (
@@ -82,17 +82,17 @@ const GasHandbook = (props, context) => {
   const [activeGasId, setActiveGasId] = useLocalState(
     context,
     'activeGasId',
-    ''
+    '',
   );
   const [activeReactionId, setActiveReactionId] = useLocalState(
     context,
     'activeReactionId',
-    ''
+    '',
   );
   const [gasActiveInput, setGasActiveInput] = useLocalState(
     context,
     'gasActiveInput',
-    false
+    false,
   );
   const relevantGas = gasInfo.find((gas) => gas.id === activeGasId);
   return (
@@ -103,12 +103,15 @@ const GasHandbook = (props, context) => {
           onChange={(keyword) =>
             setActiveGasId(
               gasInfo.find((gas) =>
-                gas.name.toLowerCase().startsWith(keyword.toLowerCase())
-              )?.id || '')}
+                gas.name.toLowerCase().startsWith(keyword.toLowerCase()),
+              )?.id || '',
+            )
+          }
           activeInput={gasActiveInput}
           setActiveInput={setGasActiveInput}
         />
-      }>
+      }
+    >
       {relevantGas && (
         <>
           <Box mb="0.5em">{relevantGas.description}</Box>
@@ -124,7 +127,7 @@ const GasHandbook = (props, context) => {
                   content={reaction_name}
                 />
               </Box>
-            )
+            ),
           )}
         </>
       )}
@@ -138,20 +141,20 @@ const ReactionHandbook = (props, context) => {
   const [activeGasId, setActiveGasId] = useLocalState(
     context,
     'activeGasId',
-    ''
+    '',
   );
   const [activeReactionId, setActiveReactionId] = useLocalState(
     context,
     'activeReactionId',
-    ''
+    '',
   );
   const [reactionActiveInput, setReactionActiveInput] = useLocalState(
     context,
     'reactionActiveInput',
-    false
+    false,
   );
   const relevantReaction = reactionInfo?.find(
-    (reaction) => reaction.id === activeReactionId
+    (reaction) => reaction.id === activeReactionId,
   );
   return (
     <Section
@@ -165,12 +168,15 @@ const ReactionHandbook = (props, context) => {
           onChange={(keyword) =>
             setActiveReactionId(
               reactionInfo.find((reaction) =>
-                reaction.name.toLowerCase().startsWith(keyword.toLowerCase())
-              )?.id || '')}
+                reaction.name.toLowerCase().startsWith(keyword.toLowerCase()),
+              )?.id || '',
+            )
+          }
           activeInput={reactionActiveInput}
           setActiveInput={setReactionActiveInput}
         />
-      }>
+      }
+    >
       {relevantReaction && (
         <>
           <Box mb="0.5em">{relevantReaction.description}</Box>
@@ -190,13 +196,17 @@ const ReactionHandbook = (props, context) => {
                       <Flex>
                         <Flex.Item
                           style={{ 'border-bottom': 'dotted 2px' }}
-                          shrink>
+                          shrink
+                        >
                           {factor.factor_name + ':'}
                         </Flex.Item>
                       </Flex>
                     </Tooltip>
-                  ) : (factor.factor_name)
-                }>
+                  ) : (
+                    factor.factor_name
+                  )
+                }
+              >
                 {factor.desc}
               </LabeledList.Item>
             ))}
@@ -211,12 +221,12 @@ export const atmosHandbookHooks = (context) => {
   const [activeGasId, setActiveGasId] = useLocalState(
     context,
     'activeGasId',
-    ''
+    '',
   );
   const [activeReactionId, setActiveReactionId] = useLocalState(
     context,
     'activeReactionId',
-    ''
+    '',
   );
   return [setActiveGasId, setActiveReactionId];
 };
diff --git a/tgui/packages/tgui/interfaces/common/BeakerContents.js b/tgui/packages/tgui/interfaces/common/BeakerContents.js
index 0dae690513dd..b330f9560795 100644
--- a/tgui/packages/tgui/interfaces/common/BeakerContents.js
+++ b/tgui/packages/tgui/interfaces/common/BeakerContents.js
@@ -1,24 +1,17 @@
 import { AnimatedNumber, Box } from '../../components';
 
-export const BeakerContents = props => {
+export const BeakerContents = (props) => {
   const { beakerLoaded, beakerContents } = props;
   return (
     <Box>
-      {!beakerLoaded && (
-        <Box color="label">
-          No beaker loaded.
-        </Box>
-      ) || beakerContents.length === 0 && (
-        <Box color="label">
-          Beaker is empty.
-        </Box>
-      )}
-      {beakerContents.map(chemical => (
+      {(!beakerLoaded && <Box color="label">No beaker loaded.</Box>) ||
+        (beakerContents.length === 0 && (
+          <Box color="label">Beaker is empty.</Box>
+        ))}
+      {beakerContents.map((chemical) => (
         <Box key={chemical.name} color="label">
-          <AnimatedNumber
-            initial={0}
-            value={chemical.volume} /> 
-          {" units of "+chemical.name}
+          <AnimatedNumber initial={0} value={chemical.volume} />
+          {' units of ' + chemical.name}
         </Box>
       ))}
     </Box>
diff --git a/tgui/packages/tgui/interfaces/common/GasmixParser.tsx b/tgui/packages/tgui/interfaces/common/GasmixParser.tsx
index b614d6bff3e2..7b774feb8b92 100644
--- a/tgui/packages/tgui/interfaces/common/GasmixParser.tsx
+++ b/tgui/packages/tgui/interfaces/common/GasmixParser.tsx
@@ -28,8 +28,7 @@ export const GasmixParser = (props: GasmixParserProps, context) => {
     ...rest
   } = props;
 
-  const { gases, temperature, volume, pressure, total_moles }
-    = gasmix;
+  const { gases, temperature, volume, pressure, total_moles } = gasmix;
 
   return !total_moles ? (
     <Box nowrap italic mb="10px">
@@ -42,13 +41,16 @@ export const GasmixParser = (props: GasmixParserProps, context) => {
           label={
             gasesOnClick ? (
               <Button content={gas[1]} onClick={() => gasesOnClick(gas[0])} />
-            ) : (gas[1])
+            ) : (
+              gas[1]
+            )
           }
-          key={gas[1]}>
-          {gas[2].toFixed(2)
-            + ' mol ('
-            + ((gas[2] / total_moles) * 100).toFixed(2)
-            + ' %)'}
+          key={gas[1]}
+        >
+          {gas[2].toFixed(2) +
+            ' mol (' +
+            ((gas[2] / total_moles) * 100).toFixed(2) +
+            ' %)'}
         </LabeledList.Item>
       ))}
       <LabeledList.Item
@@ -58,24 +60,33 @@ export const GasmixParser = (props: GasmixParserProps, context) => {
               content={'Temperature'}
               onClick={() => temperatureOnClick()}
             />
-          ) : ('Temperature')
-        }>
+          ) : (
+            'Temperature'
+          )
+        }
+      >
         {(total_moles ? temperature.toFixed(2) : '-') + ' K'}
       </LabeledList.Item>
       <LabeledList.Item
         label={
           volumeOnClick ? (
             <Button content={'Volume'} onClick={() => volumeOnClick()} />
-          ) : ('Volume')
-        }>
+          ) : (
+            'Volume'
+          )
+        }
+      >
         {(total_moles ? volume.toFixed(2) : '-') + ' L'}
       </LabeledList.Item>
       <LabeledList.Item
         label={
           pressureOnClick ? (
             <Button content={'Pressure'} onClick={() => pressureOnClick()} />
-          ) : ('Pressure')
-        }>
+          ) : (
+            'Pressure'
+          )
+        }
+      >
         {(total_moles ? pressure.toFixed(2) : '-') + ' kPa'}
       </LabeledList.Item>
     </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/common/InputButtons.tsx b/tgui/packages/tgui/interfaces/common/InputButtons.tsx
index c5f79add6e9b..af79cd9eb977 100644
--- a/tgui/packages/tgui/interfaces/common/InputButtons.tsx
+++ b/tgui/packages/tgui/interfaces/common/InputButtons.tsx
@@ -27,7 +27,8 @@ export const InputButtons = (props: InputButtonsProps, context) => {
       pt={large_buttons ? 0.33 : 0}
       textAlign="center"
       tooltip={large_buttons && message}
-      width={!large_buttons && 6}>
+      width={!large_buttons && 6}
+    >
       {large_buttons ? 'SUBMIT' : 'Submit'}
     </Button>
   );
@@ -42,7 +43,8 @@ export const InputButtons = (props: InputButtonsProps, context) => {
       pr={2}
       pt={large_buttons ? 0.33 : 0}
       textAlign="center"
-      width={!large_buttons && 6}>
+      width={!large_buttons && 6}
+    >
       {large_buttons ? 'CANCEL' : 'Cancel'}
     </Button>
   );
@@ -52,7 +54,8 @@ export const InputButtons = (props: InputButtonsProps, context) => {
       align="center"
       direction={!swapped_buttons ? 'row' : 'row-reverse'}
       fill
-      justify="space-around">
+      justify="space-around"
+    >
       {large_buttons ? (
         <Flex.Item grow>{cancelButton}</Flex.Item>
       ) : (
diff --git a/tgui/packages/tgui/interfaces/common/InterfaceLockNoticeBox.js b/tgui/packages/tgui/interfaces/common/InterfaceLockNoticeBox.js
index 978a456277d1..8932a3085607 100644
--- a/tgui/packages/tgui/interfaces/common/InterfaceLockNoticeBox.js
+++ b/tgui/packages/tgui/interfaces/common/InterfaceLockNoticeBox.js
@@ -28,9 +28,7 @@ export const InterfaceLockNoticeBox = (props, context) => {
     return (
       <NoticeBox color="grey">
         <Flex align="center">
-          <Flex.Item>
-            Interface lock status:
-          </Flex.Item>
+          <Flex.Item>Interface lock status:</Flex.Item>
           <Flex.Item grow={1} />
           <Flex.Item>
             <Button
@@ -42,7 +40,8 @@ export const InterfaceLockNoticeBox = (props, context) => {
                 if (onLockStatusChange) {
                   onLockStatusChange(!locked);
                 }
-              }} />
+              }}
+            />
           </Flex.Item>
         </Flex>
       </NoticeBox>
@@ -51,8 +50,7 @@ export const InterfaceLockNoticeBox = (props, context) => {
   // For everyone else
   return (
     <NoticeBox>
-      Swipe {accessText}{' '}
-      to {locked ? 'unlock' : 'lock'} this interface.
+      Swipe {accessText} to {locked ? 'unlock' : 'lock'} this interface.
     </NoticeBox>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/common/Loader.tsx b/tgui/packages/tgui/interfaces/common/Loader.tsx
index 65c7d11e0662..7f758a94ad95 100644
--- a/tgui/packages/tgui/interfaces/common/Loader.tsx
+++ b/tgui/packages/tgui/interfaces/common/Loader.tsx
@@ -1,14 +1,15 @@
 import { Box } from '../../components';
 import { clamp01 } from 'common/math';
 
-export const Loader = props => {
+export const Loader = (props) => {
   const { value } = props;
 
   return (
     <div className="AlertModal__Loader">
       <Box
         className="AlertModal__LoaderProgress"
-        style={{ width: clamp01(value) * 100 + '%' }} />
+        style={{ width: clamp01(value) * 100 + '%' }}
+      />
     </div>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/common/Materials.tsx b/tgui/packages/tgui/interfaces/common/Materials.tsx
index 5501b18d6629..19fd4ca3c2ec 100644
--- a/tgui/packages/tgui/interfaces/common/Materials.tsx
+++ b/tgui/packages/tgui/interfaces/common/Materials.tsx
@@ -6,17 +6,17 @@ import { useSharedState } from '../../backend';
 import { BoxProps } from '../../components/Box';
 
 export const MATERIAL_KEYS = {
-  "iron": "sheet-metal_3",
-  "glass": "sheet-glass_3",
-  "silver": "sheet-silver_3",
-  "gold": "sheet-gold_3",
-  "diamond": "sheet-diamond",
-  "plasma": "sheet-plasma_3",
-  "uranium": "sheet-uranium",
-  "bananium": "sheet-bananium",
-  "titanium": "sheet-titanium_3",
-  "bluespace crystal": "polycrystal",
-  "plastic": "sheet-plastic_3",
+  iron: 'sheet-metal_3',
+  glass: 'sheet-glass_3',
+  silver: 'sheet-silver_3',
+  gold: 'sheet-gold_3',
+  diamond: 'sheet-diamond',
+  plasma: 'sheet-plasma_3',
+  uranium: 'sheet-uranium',
+  bananium: 'sheet-bananium',
+  titanium: 'sheet-titanium_3',
+  'bluespace crystal': 'polycrystal',
+  plastic: 'sheet-plastic_3',
 } as const;
 
 export type Material = {
@@ -34,25 +34,27 @@ interface MaterialIconProps extends BoxProps {
 export const MaterialIcon = (props: MaterialIconProps) => {
   const { material, ...rest } = props;
 
-  return (<Box
-    {...rest}
-    className={classes([
-      'sheetmaterials32x32',
-      MATERIAL_KEYS[material],
-    ])} />);
+  return (
+    <Box
+      {...rest}
+      className={classes(['sheetmaterials32x32', MATERIAL_KEYS[material]])}
+    />
+  );
 };
 
-const EjectMaterial = (props: {
-  material: Material,
-  onEject: (amount: number) => void,
-}, context) => {
-  const {
-    name,
-    removable,
-    sheets,
-  } = props.material;
+const EjectMaterial = (
+  props: {
+    material: Material;
+    onEject: (amount: number) => void;
+  },
+  context,
+) => {
+  const { name, removable, sheets } = props.material;
   const [removeMaterials, setRemoveMaterials] = useSharedState(
-    context, 'remove_mats_' + name, 1);
+    context,
+    'remove_mats_' + name,
+    1,
+  );
   if (removeMaterials > 1 && sheets < removeMaterials) {
     setRemoveMaterials(sheets || 1);
   }
@@ -70,33 +72,39 @@ const EjectMaterial = (props: {
           if (Number.isInteger(newVal)) {
             setRemoveMaterials(newVal);
           }
-        }} />
+        }}
+      />
       <Button
         icon="eject"
         disabled={!removable}
         onClick={() => {
           props.onEject(removeMaterials);
-        }} />
+        }}
+      />
     </>
   );
 };
 
 export const Materials = (props: {
-  materials: Material[],
-  onEject: (ref: string, amount: number) => void,
+  materials: Material[];
+  onEject: (ref: string, amount: number) => void;
 }) => {
   return (
     <Flex wrap>
-      {props.materials.map(material => (
+      {props.materials.map((material) => (
         <Flex.Item key={material.name} grow={1} shrink={1}>
           <MaterialAmount
             name={material.name}
             amount={material.amount}
-            formatting={MaterialFormatting.SIUnits} />
+            formatting={MaterialFormatting.SIUnits}
+          />
           <Box mt={1} textAlign="center">
-            <EjectMaterial material={material} onEject={(amount) => {
-              props.onEject(material.ref, amount);
-            }} />
+            <EjectMaterial
+              material={material}
+              onEject={(amount) => {
+                props.onEject(material.ref, amount);
+              }}
+            />
           </Box>
         </Flex.Item>
       ))}
@@ -111,18 +119,13 @@ export enum MaterialFormatting {
 }
 
 export const MaterialAmount = (props: {
-  name: keyof typeof MATERIAL_KEYS,
-  amount: number,
-  formatting?: MaterialFormatting,
-  color?: string,
-  style?: Record<string, string>,
+  name: keyof typeof MATERIAL_KEYS;
+  amount: number;
+  formatting?: MaterialFormatting;
+  color?: string;
+  style?: Record<string, string>;
 }) => {
-  const {
-    name,
-    amount,
-    color,
-    style,
-  } = props;
+  const { name, amount, color, style } = props;
 
   let amountDisplay;
 
@@ -145,9 +148,7 @@ export const MaterialAmount = (props: {
       <Flex.Item>
         <MaterialIcon material={name} style={style} />
       </Flex.Item>
-      <Flex.Item color={color}>
-        {amountDisplay}
-      </Flex.Item>
+      <Flex.Item color={color}>{amountDisplay}</Flex.Item>
     </Flex>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/common/PortableAtmos.js b/tgui/packages/tgui/interfaces/common/PortableAtmos.js
index f32138cc3d89..b86bc3ae7ff4 100644
--- a/tgui/packages/tgui/interfaces/common/PortableAtmos.js
+++ b/tgui/packages/tgui/interfaces/common/PortableAtmos.js
@@ -1,33 +1,34 @@
 import { useBackend } from '../../backend';
-import { AnimatedNumber, Box, Button, LabeledList, Section } from '../../components';
+import {
+  AnimatedNumber,
+  Box,
+  Button,
+  LabeledList,
+  Section,
+} from '../../components';
 
 export const PortableBasicInfo = (props, context) => {
   const { act, data } = useBackend(context);
-  const {
-    connected,
-    holding,
-    on,
-    pressure,
-  } = data;
+  const { connected, holding, on, pressure } = data;
   return (
     <>
       <Section
         title="Status"
-        buttons={(
+        buttons={
           <Button
             icon={on ? 'power-off' : 'times'}
             content={on ? 'On' : 'Off'}
             selected={on}
-            onClick={() => act('power')} />
-        )}>
+            onClick={() => act('power')}
+          />
+        }
+      >
         <LabeledList>
           <LabeledList.Item label="Pressure">
             <AnimatedNumber value={pressure} />
             {' kPa'}
           </LabeledList.Item>
-          <LabeledList.Item
-            label="Port"
-            color={connected ? 'good' : 'average'}>
+          <LabeledList.Item label="Port" color={connected ? 'good' : 'average'}>
             {connected ? 'Connected' : 'Not Connected'}
           </LabeledList.Item>
         </LabeledList>
@@ -35,28 +36,25 @@ export const PortableBasicInfo = (props, context) => {
       <Section
         title="Holding Tank"
         minHeight="82px"
-        buttons={(
+        buttons={
           <Button
             icon="eject"
             content="Eject"
             disabled={!holding}
-            onClick={() => act('eject')} />
-        )}>
+            onClick={() => act('eject')}
+          />
+        }
+      >
         {holding ? (
           <LabeledList>
-            <LabeledList.Item label="Label">
-              {holding.name}
-            </LabeledList.Item>
+            <LabeledList.Item label="Label">{holding.name}</LabeledList.Item>
             <LabeledList.Item label="Pressure">
-              <AnimatedNumber
-                value={holding.pressure} />
+              <AnimatedNumber value={holding.pressure} />
               {' kPa'}
             </LabeledList.Item>
           </LabeledList>
         ) : (
-          <Box color="average">
-            No holding tank
-          </Box>
+          <Box color="average">No holding tank</Box>
         )}
       </Section>
     </>
diff --git a/tgui/packages/tgui/interfaces/common/ReagentLookup.js b/tgui/packages/tgui/interfaces/common/ReagentLookup.js
index 42cd03a0b0b4..80f528b1526b 100644
--- a/tgui/packages/tgui/interfaces/common/ReagentLookup.js
+++ b/tgui/packages/tgui/interfaces/common/ReagentLookup.js
@@ -5,11 +5,7 @@ export const ReagentLookup = (props, context) => {
   const { reagent } = props;
   const { act } = useBackend(context);
   if (!reagent) {
-    return (
-      <Box>
-        No reagent selected!
-      </Box>
-    );
+    return <Box>No reagent selected!</Box>;
   }
 
   return (
@@ -25,11 +21,10 @@ export const ReagentLookup = (props, context) => {
           tooltipPosition="left"
           onClick={() => {
             Byond.command(`wiki Guide_to_chemistry#${reagent.name}`);
-          }} />
-      </LabeledList.Item>
-      <LabeledList.Item label="Description">
-        {reagent.desc}
+          }}
+        />
       </LabeledList.Item>
+      <LabeledList.Item label="Description">{reagent.desc}</LabeledList.Item>
       <LabeledList.Item label="pH">
         <Icon name="circle" mr={1} color={reagent.pHCol} />
         {reagent.pH}
@@ -37,16 +32,12 @@ export const ReagentLookup = (props, context) => {
       <LabeledList.Item label="Properties">
         <LabeledList>
           {!!reagent.OD && (
-            <LabeledList.Item label="Overdose">
-              {reagent.OD}u
-            </LabeledList.Item>
+            <LabeledList.Item label="Overdose">{reagent.OD}u</LabeledList.Item>
           )}
           {reagent.addictions[0] && (
             <LabeledList.Item label="Addiction">
-              {reagent.addictions.map(addiction => (
-                <Box key={addiction}>
-                  {addiction}
-                </Box>
+              {reagent.addictions.map((addiction) => (
+                <Box key={addiction}>{addiction}</Box>
               ))}
             </LabeledList.Item>
           )}
@@ -64,9 +55,12 @@ export const ReagentLookup = (props, context) => {
                 tooltip="This reagent will partially convert into this when the purity is above the Inverse purity on consumption."
                 tooltipPosition="left"
                 content={reagent.impureReagent}
-                onClick={() => act('reagent_click', {
-                  id: reagent.impureId,
-                })} />
+                onClick={() =>
+                  act('reagent_click', {
+                    id: reagent.impureId,
+                  })
+                }
+              />
             </LabeledList.Item>
           )}
           {reagent.inverseReagent && (
@@ -76,9 +70,12 @@ export const ReagentLookup = (props, context) => {
                 content={reagent.inverseReagent}
                 tooltip="This reagent will convert into this when the purity is below the Inverse purity on consumption."
                 tooltipPosition="left"
-                onClick={() => act('reagent_click', {
-                  id: reagent.inverseId,
-                })} />
+                onClick={() =>
+                  act('reagent_click', {
+                    id: reagent.inverseId,
+                  })
+                }
+              />
             </LabeledList.Item>
           )}
           {reagent.failedReagent && (
@@ -88,39 +85,35 @@ export const ReagentLookup = (props, context) => {
                 tooltip="This reagent will turn into this if the purity of the reaction is below the minimum purity on completion."
                 tooltipPosition="left"
                 content={reagent.failedReagent}
-                onClick={() => act('reagent_click', {
-                  id: reagent.failedId,
-                })} />
+                onClick={() =>
+                  act('reagent_click', {
+                    id: reagent.failedId,
+                  })
+                }
+              />
             </LabeledList.Item>
           )}
         </LabeledList>
-        {reagent.isImpure && (
-          <Box>
-            This reagent is created by impurity.
-          </Box>
-        )}
-        {reagent.deadProcess && (
-          <Box>
-            This reagent works on the dead.
-          </Box>
-        )}
-        {!reagent.failedReagent
-          && !reagent.inverseReagent
-          && !reagent.impureReagent && (
-          <Box>
-            This reagent has no impure reagents.
-          </Box>
-        )}
+        {reagent.isImpure && <Box>This reagent is created by impurity.</Box>}
+        {reagent.deadProcess && <Box>This reagent works on the dead.</Box>}
+        {!reagent.failedReagent &&
+          !reagent.inverseReagent &&
+          !reagent.impureReagent && (
+            <Box>This reagent has no impure reagents.</Box>
+          )}
       </LabeledList.Item>
       <LabeledList.Item>
         <Button
           icon="flask"
           mt={2}
-          content={"Find associated reaction"}
+          content={'Find associated reaction'}
           color="purple"
-          onClick={() => act('find_reagent_reaction', {
-            id: reagent.id,
-          })} />
+          onClick={() =>
+            act('find_reagent_reaction', {
+              id: reagent.id,
+            })
+          }
+        />
       </LabeledList.Item>
     </LabeledList>
   );
diff --git a/tgui/packages/tgui/interfaces/common/RecipeLookup.js b/tgui/packages/tgui/interfaces/common/RecipeLookup.js
index e128d5ba069a..a64df3631590 100644
--- a/tgui/packages/tgui/interfaces/common/RecipeLookup.js
+++ b/tgui/packages/tgui/interfaces/common/RecipeLookup.js
@@ -1,24 +1,26 @@
 import { useBackend } from '../../backend';
-import { Box, Button, Chart, Flex, Icon, LabeledList, Tooltip } from '../../components';
+import {
+  Box,
+  Button,
+  Chart,
+  Flex,
+  Icon,
+  LabeledList,
+  Tooltip,
+} from '../../components';
 
 export const RecipeLookup = (props, context) => {
   const { recipe, bookmarkedReactions } = props;
   const { act, data } = useBackend(context);
   if (!recipe) {
-    return (
-      <Box>
-        No reaction selected!
-      </Box>
-    );
+    return <Box>No reaction selected!</Box>;
   }
 
-  const getReaction = id => {
-    return data.master_reaction_list.filter(reaction => (
-      reaction.id === id
-    ));
+  const getReaction = (id) => {
+    return data.master_reaction_list.filter((reaction) => reaction.id === id);
   };
 
-  const addBookmark = bookmark => {
+  const addBookmark = (bookmark) => {
     bookmarkedReactions.add(bookmark);
   };
 
@@ -31,15 +33,21 @@ export const RecipeLookup = (props, context) => {
           icon="arrow-left"
           ml={3}
           disabled={recipe.subReactIndex === 1}
-          onClick={() => act('reduce_index', {
-            id: recipe.name,
-          })} />
+          onClick={() =>
+            act('reduce_index', {
+              id: recipe.name,
+            })
+          }
+        />
         <Button
           icon="arrow-right"
           disabled={recipe.subReactIndex === recipe.subReactLen}
-          onClick={() => act('increment_index', {
-            id: recipe.name,
-          })} />
+          onClick={() =>
+            act('increment_index', {
+              id: recipe.name,
+            })
+          }
+        />
         {bookmarkedReactions && (
           <Button
             icon="book"
@@ -48,68 +56,84 @@ export const RecipeLookup = (props, context) => {
             onClick={() => {
               addBookmark(getReaction(recipe.id)[0]);
               act('update_ui');
-            }} />
+            }}
+          />
         )}
       </LabeledList.Item>
       {recipe.products && (
         <LabeledList.Item bold label="Products">
-          {recipe.products.map(product => (
+          {recipe.products.map((product) => (
             <Button
               key={product.name}
               icon="vial"
               disabled={product.hasProduct}
-              content={product.ratio + "u " + product.name}
-              onClick={() => act('reagent_click', {
-                id: product.id,
-              })} />
+              content={product.ratio + 'u ' + product.name}
+              onClick={() =>
+                act('reagent_click', {
+                  id: product.id,
+                })
+              }
+            />
           ))}
         </LabeledList.Item>
       )}
       <LabeledList.Item bold label="Reactants">
-        {recipe.reactants.map(reactant => (
+        {recipe.reactants.map((reactant) => (
           <Box key={reactant.id}>
             <Button
               icon="vial"
               color={reactant.color}
-              content={reactant.ratio + "u " + reactant.name}
-              onClick={() => act('reagent_click', {
-                id: reactant.id,
-              })} />
+              content={reactant.ratio + 'u ' + reactant.name}
+              onClick={() =>
+                act('reagent_click', {
+                  id: reactant.id,
+                })
+              }
+            />
             {!!reactant.tooltipBool && (
               <Button
                 icon="flask"
                 color="purple"
                 tooltip={reactant.tooltip}
                 tooltipPosition="right"
-                onClick={() => act('find_reagent_reaction', {
-                  id: reactant.id,
-                })} />
+                onClick={() =>
+                  act('find_reagent_reaction', {
+                    id: reactant.id,
+                  })
+                }
+              />
             )}
           </Box>
         ))}
       </LabeledList.Item>
       {recipe.catalysts && (
         <LabeledList.Item bold label="Catalysts">
-          {recipe.catalysts.map(catalyst => (
+          {recipe.catalysts.map((catalyst) => (
             <Box key={catalyst.id}>
-              {catalyst.tooltipBool && (
+              {(catalyst.tooltipBool && (
                 <Button
                   icon="vial"
                   color={catalyst.color}
-                  content={catalyst.ratio + "u " + catalyst.name}
+                  content={catalyst.ratio + 'u ' + catalyst.name}
                   tooltip={catalyst.tooltip}
-                  tooltipPosition={"right"}
-                  onClick={() => act('reagent_click', {
-                    id: catalyst.id,
-                  })} />
-              ) || (
+                  tooltipPosition={'right'}
+                  onClick={() =>
+                    act('reagent_click', {
+                      id: catalyst.id,
+                    })
+                  }
+                />
+              )) || (
                 <Button
                   icon="vial"
                   color={catalyst.color}
-                  content={catalyst.ratio + "u " + catalyst.name}
-                  onClick={() => act('reagent_click', {
-                    id: catalyst.id,
-                  })} />
+                  content={catalyst.ratio + 'u ' + catalyst.name}
+                  onClick={() =>
+                    act('reagent_click', {
+                      id: catalyst.id,
+                    })
+                  }
+                />
               )}
             </Box>
           ))}
@@ -122,7 +146,8 @@ export const RecipeLookup = (props, context) => {
             textColor="white"
             tooltipPosition="right"
             content={recipe.reqContainer}
-            tooltip="The required container for this reaction to occur in." />
+            tooltip="The required container for this reaction to occur in."
+          />
         </LabeledList.Item>
       )}
       <LabeledList.Item bold label="Purity">
@@ -130,9 +155,8 @@ export const RecipeLookup = (props, context) => {
           {!!recipe.inversePurity && (
             <LabeledList.Item label="Inverse purity">
               <Box position="relative">
-                <Tooltip
-                  content="If your purity is below this it will 100% convert into the product's associated Inverse reagent on consumption." >
-                  {`<${(recipe.inversePurity*100)}%`}
+                <Tooltip content="If your purity is below this it will 100% convert into the product's associated Inverse reagent on consumption.">
+                  {`<${recipe.inversePurity * 100}%`}
                 </Tooltip>
               </Box>
             </LabeledList.Item>
@@ -140,9 +164,8 @@ export const RecipeLookup = (props, context) => {
           {!!recipe.minPurity && (
             <LabeledList.Item label="Minimum purity">
               <Box position="relative">
-                <Tooltip
-                  content="If your purity is below this at any point during the reaction, it will cause negative effects, and if it remains below this value on completion it will convert into the product's associated Failed reagent." >
-                  {`<${(recipe.minPurity*100)}%`}
+                <Tooltip content="If your purity is below this at any point during the reaction, it will cause negative effects, and if it remains below this value on completion it will convert into the product's associated Failed reagent.">
+                  {`<${recipe.minPurity * 100}%`}
                 </Tooltip>
               </Box>
             </LabeledList.Item>
@@ -155,12 +178,14 @@ export const RecipeLookup = (props, context) => {
           position="relative"
           style={{
             'background-color': 'black',
-          }}>
+          }}
+        >
           <Chart.Line
             fillPositionedParent
             data={recipe.thermodynamics}
             strokeWidth={0}
-            fillColor={"#3cf072"} />
+            fillColor={'#3cf072'}
+          />
           {recipe.explosive && (
             <Chart.Line
               position="absolute"
@@ -171,35 +196,43 @@ export const RecipeLookup = (props, context) => {
               width="28px"
               data={recipe.explosive}
               strokeWidth={0}
-              fillColor={"#d92727"} />
+              fillColor={'#d92727'}
+            />
           )}
         </Box>
-        <Flex
-          justify="space-between">
+        <Flex justify="space-between">
           <Tooltip
-            content={recipe.isColdRecipe
-              ? "The temperature at which it is underheated, causing negative effects on the reaction."
-              : "The minimum temperature needed for this reaction to start. Heating it up past this point will increase the reaction rate."} >
+            content={
+              recipe.isColdRecipe
+                ? 'The temperature at which it is underheated, causing negative effects on the reaction.'
+                : 'The minimum temperature needed for this reaction to start. Heating it up past this point will increase the reaction rate.'
+            }
+          >
             <Flex.Item
               position="relative"
-              textColor={recipe.isColdRecipe && "red"}>
+              textColor={recipe.isColdRecipe && 'red'}
+            >
               {recipe.isColdRecipe
-                ? recipe.explodeTemp + "K"
-                : recipe.tempMin + "K"}
+                ? recipe.explodeTemp + 'K'
+                : recipe.tempMin + 'K'}
             </Flex.Item>
           </Tooltip>
 
           {recipe.explosive && (
             <Tooltip
-              content={recipe.isColdRecipe
-                ? "The minimum temperature needed for this reaction to start. Heating it up past this point will increase the reaction rate."
-                : "The temperature at which it is overheated, causing negative effects on the reaction."}>
+              content={
+                recipe.isColdRecipe
+                  ? 'The minimum temperature needed for this reaction to start. Heating it up past this point will increase the reaction rate.'
+                  : 'The temperature at which it is overheated, causing negative effects on the reaction.'
+              }
+            >
               <Flex.Item
                 position="relative"
-                textColor={!recipe.isColdRecipe && "red"}>
+                textColor={!recipe.isColdRecipe && 'red'}
+              >
                 {recipe.isColdRecipe
-                  ? recipe.tempMin + "K"
-                  : recipe.explodeTemp + "K"}
+                  ? recipe.tempMin + 'K'
+                  : recipe.explodeTemp + 'K'}
               </Flex.Item>
             </Tooltip>
           )}
@@ -208,20 +241,13 @@ export const RecipeLookup = (props, context) => {
       <LabeledList.Item bold label="Dynamics">
         <LabeledList>
           <LabeledList.Item label="Optimal rate">
-            <Tooltip
-              content="The fastest rate the reaction can go, in units per second. This is the plateu region shown in the rate profile above.">
-              <Box position="relative">
-                {recipe.thermoUpper + "u/s"}
-              </Box>
+            <Tooltip content="The fastest rate the reaction can go, in units per second. This is the plateu region shown in the rate profile above.">
+              <Box position="relative">{recipe.thermoUpper + 'u/s'}</Box>
             </Tooltip>
           </LabeledList.Item>
         </LabeledList>
-        <Tooltip
-          content="The heat generated by a reaction - exothermic produces heat, endothermic consumes heat." >
-          <Box
-            position="relative">
-            {recipe.thermics}
-          </Box>
+        <Tooltip content="The heat generated by a reaction - exothermic produces heat, endothermic consumes heat.">
+          <Box position="relative">{recipe.thermics}</Box>
         </Tooltip>
       </LabeledList.Item>
     </LabeledList>
diff --git a/tgui/packages/tgui/layouts/Layout.js b/tgui/packages/tgui/layouts/Layout.js
index cd253ae2575b..63a963c5882a 100644
--- a/tgui/packages/tgui/layouts/Layout.js
+++ b/tgui/packages/tgui/layouts/Layout.js
@@ -8,35 +8,22 @@ import { classes } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from '../components/Box';
 import { addScrollableNode, removeScrollableNode } from '../events';
 
-export const Layout = props => {
-  const {
-    className,
-    theme = 'nanotrasen',
-    children,
-    ...rest
-  } = props;
+export const Layout = (props) => {
+  const { className, theme = 'nanotrasen', children, ...rest } = props;
   return (
     <div className={'theme-' + theme}>
       <div
-        className={classes([
-          'Layout',
-          className,
-          ...computeBoxClassName(rest),
-        ])}
-        {...computeBoxProps(rest)}>
+        className={classes(['Layout', className, ...computeBoxClassName(rest)])}
+        {...computeBoxProps(rest)}
+      >
         {children}
       </div>
     </div>
   );
 };
 
-const LayoutContent = props => {
-  const {
-    className,
-    scrollable,
-    children,
-    ...rest
-  } = props;
+const LayoutContent = (props) => {
+  const { className, scrollable, children, ...rest } = props;
   return (
     <div
       className={classes([
@@ -45,15 +32,16 @@ const LayoutContent = props => {
         className,
         ...computeBoxClassName(rest),
       ])}
-      {...computeBoxProps(rest)}>
+      {...computeBoxProps(rest)}
+    >
       {children}
     </div>
   );
 };
 
 LayoutContent.defaultHooks = {
-  onComponentDidMount: node => addScrollableNode(node),
-  onComponentWillUnmount: node => removeScrollableNode(node),
+  onComponentDidMount: (node) => addScrollableNode(node),
+  onComponentWillUnmount: (node) => removeScrollableNode(node),
 };
 
 Layout.Content = LayoutContent;
diff --git a/tgui/packages/tgui/layouts/NtosWindow.js b/tgui/packages/tgui/layouts/NtosWindow.js
index 61badb48ebbd..21ab8c66dd27 100644
--- a/tgui/packages/tgui/layouts/NtosWindow.js
+++ b/tgui/packages/tgui/layouts/NtosWindow.js
@@ -10,13 +10,7 @@ import { Box, Button } from '../components';
 import { Window } from './Window';
 
 export const NtosWindow = (props, context) => {
-  const {
-    title,
-    width = 575,
-    height = 700,
-    theme = 'ntos',
-    children,
-  } = props;
+  const { title, width = 575, height = 700, theme = 'ntos', children } = props;
   const { act, data } = useBackend(context);
   const {
     PC_device_theme,
@@ -30,11 +24,7 @@ export const NtosWindow = (props, context) => {
     PC_showexitprogram,
   } = data;
   return (
-    <Window
-      title={title}
-      width={width}
-      height={height}
-      theme={theme}>
+    <Window title={title} width={width} height={height} theme={theme}>
       <div className="NtosWindow">
         <div className="NtosWindow__header NtosHeader">
           <div className="NtosHeader__left">
@@ -47,35 +37,37 @@ export const NtosWindow = (props, context) => {
             </Box>
           </div>
           <div className="NtosHeader__right">
-            {PC_programheaders.map(header => (
+            {PC_programheaders.map((header) => (
               <Box key={header.icon} inline mr={1}>
                 <img
                   className="NtosHeader__icon"
-                  src={resolveAsset(header.icon)} />
+                  src={resolveAsset(header.icon)}
+                />
               </Box>
             ))}
             <Box inline>
               {PC_ntneticon && (
                 <img
                   className="NtosHeader__icon"
-                  src={resolveAsset(PC_ntneticon)} />
+                  src={resolveAsset(PC_ntneticon)}
+                />
               )}
             </Box>
             {!!(PC_showbatteryicon && PC_batteryicon) && (
               <Box inline mr={1}>
                 <img
                   className="NtosHeader__icon"
-                  src={resolveAsset(PC_batteryicon)} />
-                {PC_batterypercent && (
-                  PC_batterypercent
-                )}
+                  src={resolveAsset(PC_batteryicon)}
+                />
+                {PC_batterypercent && PC_batterypercent}
               </Box>
             )}
             {PC_apclinkicon && (
               <Box inline mr={1}>
                 <img
                   className="NtosHeader__icon"
-                  src={resolveAsset(PC_apclinkicon)} />
+                  src={resolveAsset(PC_apclinkicon)}
+                />
               </Box>
             )}
             {!!PC_showexitprogram && (
@@ -87,7 +79,8 @@ export const NtosWindow = (props, context) => {
                 icon="window-minimize-o"
                 tooltip="Minimize"
                 tooltipPosition="bottom"
-                onClick={() => act('PC_minimize')} />
+                onClick={() => act('PC_minimize')}
+              />
             )}
             {!!PC_showexitprogram && (
               <Button
@@ -99,7 +92,8 @@ export const NtosWindow = (props, context) => {
                 icon="window-close-o"
                 tooltip="Close"
                 tooltipPosition="bottom-start"
-                onClick={() => act('PC_exit')} />
+                onClick={() => act('PC_exit')}
+              />
             )}
             {!PC_showexitprogram && (
               <Button
@@ -111,7 +105,8 @@ export const NtosWindow = (props, context) => {
                 icon="power-off"
                 tooltip="Power off"
                 tooltipPosition="bottom-start"
-                onClick={() => act('PC_shutdown')} />
+                onClick={() => act('PC_shutdown')}
+              />
             )}
           </div>
         </div>
@@ -121,7 +116,7 @@ export const NtosWindow = (props, context) => {
   );
 };
 
-const NtosWindowContent = props => {
+const NtosWindowContent = (props) => {
   return (
     <div className="NtosWindow__content">
       <Window.Content {...props} />
diff --git a/tgui/packages/tgui/layouts/Pane.js b/tgui/packages/tgui/layouts/Pane.js
index 3cb1af048cbe..16c720f30b36 100644
--- a/tgui/packages/tgui/layouts/Pane.js
+++ b/tgui/packages/tgui/layouts/Pane.js
@@ -11,49 +11,27 @@ import { useDebug } from '../debug';
 import { Layout } from './Layout';
 
 export const Pane = (props, context) => {
-  const {
-    theme,
-    children,
-    className,
-    ...rest
-  } = props;
+  const { theme, children, className, ...rest } = props;
   const { suspended } = useBackend(context);
   const { debugLayout } = useDebug(context);
   return (
-    <Layout
-      className={classes([
-        'Window',
-        className,
-      ])}
-      theme={theme}
-      {...rest}>
-      <Box
-        fillPositionedParent
-        className={debugLayout && 'debug-layout'}>
+    <Layout className={classes(['Window', className])} theme={theme} {...rest}>
+      <Box fillPositionedParent className={debugLayout && 'debug-layout'}>
         {!suspended && children}
       </Box>
     </Layout>
   );
 };
 
-const PaneContent = props => {
-  const {
-    className,
-    fitted,
-    children,
-    ...rest
-  } = props;
+const PaneContent = (props) => {
+  const { className, fitted, children, ...rest } = props;
   return (
     <Layout.Content
-      className={classes([
-        'Window__content',
-        className,
-      ])}
-      {...rest}>
-      {fitted && children || (
-        <div className="Window__contentPadding">
-          {children}
-        </div>
+      className={classes(['Window__content', className])}
+      {...rest}
+    >
+      {(fitted && children) || (
+        <div className="Window__contentPadding">{children}</div>
       )}
     </Layout.Content>
   );
diff --git a/tgui/packages/tgui/layouts/Window.js b/tgui/packages/tgui/layouts/Window.js
index 64c45f987906..bc5964714aec 100644
--- a/tgui/packages/tgui/layouts/Window.js
+++ b/tgui/packages/tgui/layouts/Window.js
@@ -13,7 +13,12 @@ import { Icon } from '../components';
 import { UI_DISABLED, UI_INTERACTIVE, UI_UPDATE } from '../constants';
 import { useDebug } from '../debug';
 import { toggleKitchenSink } from '../debug/actions';
-import { dragStartHandler, recallWindowGeometry, resizeStartHandler, setWindowKey } from '../drag';
+import {
+  dragStartHandler,
+  recallWindowGeometry,
+  resizeStartHandler,
+  setWindowKey,
+} from '../drag';
 import { createLogger } from '../logging';
 import { Layout } from './Layout';
 
@@ -36,10 +41,9 @@ export class Window extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const shouldUpdateGeometry = (
-      this.props.width !== prevProps.width
-      || this.props.height !== prevProps.height
-    );
+    const shouldUpdateGeometry =
+      this.props.width !== prevProps.width ||
+      this.props.height !== prevProps.height;
     if (shouldUpdateGeometry) {
       this.updateGeometry();
     }
@@ -61,30 +65,19 @@ export class Window extends Component {
   }
 
   render() {
-    const {
-      canClose = true,
-      theme,
-      title,
-      children,
-      buttons,
-    } = this.props;
-    const {
-      config,
-      suspended,
-    } = useBackend(this.context);
+    const { canClose = true, theme, title, children, buttons } = this.props;
+    const { config, suspended } = useBackend(this.context);
     const { debugLayout } = useDebug(this.context);
     const dispatch = useDispatch(this.context);
     const fancy = config.window?.fancy;
     // Determine when to show dimmer
-    const showDimmer = config.user && (
-      config.user.observer
+    const showDimmer =
+      config.user &&
+      (config.user.observer
         ? config.status < UI_DISABLED
-        : config.status < UI_INTERACTIVE
-    );
+        : config.status < UI_INTERACTIVE);
     return (
-      <Layout
-        className="Window"
-        theme={theme}>
+      <Layout className="Window" theme={theme}>
         <TitleBar
           className="Window__titleBar"
           title={!suspended && (title || decodeHtmlEntities(config.title))}
@@ -95,27 +88,30 @@ export class Window extends Component {
             logger.log('pressed close');
             dispatch(backendSuspendStart());
           }}
-          canClose={canClose}>
+          canClose={canClose}
+        >
           {buttons}
         </TitleBar>
         <div
-          className={classes([
-            'Window__rest',
-            debugLayout && 'debug-layout',
-          ])}>
+          className={classes(['Window__rest', debugLayout && 'debug-layout'])}
+        >
           {!suspended && children}
-          {showDimmer && (
-            <div className="Window__dimmer" />
-          )}
+          {showDimmer && <div className="Window__dimmer" />}
         </div>
         {fancy && (
           <>
-            <div className="Window__resizeHandle__e"
-              onMousedown={resizeStartHandler(1, 0)} />
-            <div className="Window__resizeHandle__s"
-              onMousedown={resizeStartHandler(0, 1)} />
-            <div className="Window__resizeHandle__se"
-              onMousedown={resizeStartHandler(1, 1)} />
+            <div
+              className="Window__resizeHandle__e"
+              onMousedown={resizeStartHandler(1, 0)}
+            />
+            <div
+              className="Window__resizeHandle__s"
+              onMousedown={resizeStartHandler(0, 1)}
+            />
+            <div
+              className="Window__resizeHandle__se"
+              onMousedown={resizeStartHandler(1, 1)}
+            />
           </>
         )}
       </Layout>
@@ -123,24 +119,15 @@ export class Window extends Component {
   }
 }
 
-const WindowContent = props => {
-  const {
-    className,
-    fitted,
-    children,
-    ...rest
-  } = props;
+const WindowContent = (props) => {
+  const { className, fitted, children, ...rest } = props;
   return (
     <Layout.Content
-      className={classes([
-        'Window__content',
-        className,
-      ])}
-      {...rest}>
-      {fitted && children || (
-        <div className="Window__contentPadding">
-          {children}
-        </div>
+      className={classes(['Window__content', className])}
+      {...rest}
+    >
+      {(fitted && children) || (
+        <div className="Window__contentPadding">{children}</div>
       )}
     </Layout.Content>
   );
@@ -148,7 +135,7 @@ const WindowContent = props => {
 
 Window.Content = WindowContent;
 
-const statusToColor = status => {
+const statusToColor = (status) => {
   switch (status) {
     case UI_INTERACTIVE:
       return 'good';
@@ -173,40 +160,32 @@ const TitleBar = (props, context) => {
   } = props;
   const dispatch = useDispatch(context);
   return (
-    <div
-      className={classes([
-        'TitleBar',
-        className,
-      ])}>
-      {status === undefined && (
-        <Icon
-          className="TitleBar__statusIcon"
-          name="tools"
-          opacity={0.5} />
-      ) || (
+    <div className={classes(['TitleBar', className])}>
+      {(status === undefined && (
+        <Icon className="TitleBar__statusIcon" name="tools" opacity={0.5} />
+      )) || (
         <Icon
           className="TitleBar__statusIcon"
           color={statusToColor(status)}
-          name="eye" />
+          name="eye"
+        />
       )}
       <div
         className="TitleBar__dragZone"
-        onMousedown={e => fancy && onDragStart(e)} />
+        onMousedown={(e) => fancy && onDragStart(e)}
+      />
       <div className="TitleBar__title">
-        {typeof title === 'string'
-          && title === title.toLowerCase()
-          && toTitleCase(title)
-          || title}
-        {!!children && (
-          <div className="TitleBar__buttons">
-            {children}
-          </div>
-        )}
+        {(typeof title === 'string' &&
+          title === title.toLowerCase() &&
+          toTitleCase(title)) ||
+          title}
+        {!!children && <div className="TitleBar__buttons">{children}</div>}
       </div>
       {process.env.NODE_ENV !== 'production' && (
         <div
           className="TitleBar__devBuildIndicator"
-          onClick={() => dispatch(toggleKitchenSink())}>
+          onClick={() => dispatch(toggleKitchenSink())}
+        >
           <Icon name="bug" />
         </div>
       )}
@@ -216,7 +195,8 @@ const TitleBar = (props, context) => {
           // IE8: Synthetic onClick event doesn't work on IE8.
           // IE8: Use a plain character instead of a unicode symbol.
           // eslint-disable-next-line react/no-unknown-property
-          onclick={onClose}>
+          onclick={onClose}
+        >
           {Byond.IS_LTE_IE8 ? 'x' : '×'}
         </div>
       )}
diff --git a/tgui/packages/tgui/links.js b/tgui/packages/tgui/links.js
index 5c1a34d46d55..f2ad10abfcc4 100644
--- a/tgui/packages/tgui/links.js
+++ b/tgui/packages/tgui/links.js
@@ -9,7 +9,7 @@
  */
 export const captureExternalLinks = () => {
   // Subscribe to all document clicks
-  document.addEventListener('click', e => {
+  document.addEventListener('click', (e) => {
     /** @type {HTMLElement} */
     let target = e.target;
     // Recurse down the tree to find a valid link
@@ -26,8 +26,8 @@ export const captureExternalLinks = () => {
     }
     const hrefAttr = target.getAttribute('href') || '';
     // Leave BYOND links alone
-    const isByondLink = hrefAttr.charAt(0) === '?'
-      || hrefAttr.startsWith('byond://');
+    const isByondLink =
+      hrefAttr.charAt(0) === '?' || hrefAttr.startsWith('byond://');
     if (isByondLink) {
       return;
     }
diff --git a/tgui/packages/tgui/logging.js b/tgui/packages/tgui/logging.js
index d44b67ebc5b8..925fd6283aaa 100644
--- a/tgui/packages/tgui/logging.js
+++ b/tgui/packages/tgui/logging.js
@@ -19,19 +19,21 @@ const log = (level, ns, ...args) => {
   }
   // Send important logs to the backend
   if (level >= LEVEL_INFO) {
-    const logEntry = [ns, ...args]
-      .map(value => {
-        if (typeof value === 'string') {
-          return value;
-        }
-        if (value instanceof Error) {
-          return value.stack || String(value);
-        }
-        return JSON.stringify(value);
-      })
-      .filter(value => value)
-      .join(' ')
-      + '\nUser Agent: ' + navigator.userAgent;
+    const logEntry =
+      [ns, ...args]
+        .map((value) => {
+          if (typeof value === 'string') {
+            return value;
+          }
+          if (value instanceof Error) {
+            return value.stack || String(value);
+          }
+          return JSON.stringify(value);
+        })
+        .filter((value) => value)
+        .join(' ') +
+      '\nUser Agent: ' +
+      navigator.userAgent;
     Byond.sendMessage({
       type: 'log',
       ns,
@@ -40,7 +42,7 @@ const log = (level, ns, ...args) => {
   }
 };
 
-export const createLogger = ns => {
+export const createLogger = (ns) => {
   return {
     debug: (...args) => log(LEVEL_DEBUG, ns, ...args),
     log: (...args) => log(LEVEL_LOG, ns, ...args),
diff --git a/tgui/packages/tgui/renderer.ts b/tgui/packages/tgui/renderer.ts
index 86832b0b6586..a17d71bfa38a 100644
--- a/tgui/packages/tgui/renderer.ts
+++ b/tgui/packages/tgui/renderer.ts
@@ -22,45 +22,50 @@ type CreateRenderer = <T extends unknown[] = [unknown]>(
   getVNode?: (...args: T) => any,
 ) => (...args: T) => void;
 
-export const createRenderer: CreateRenderer = (getVNode) => (...args) => {
-  perf.mark('render/start');
-  // Start rendering
-  if (!reactRoot) {
-    reactRoot = document.getElementById('react-root');
-  }
-  if (getVNode) {
-    render(getVNode(...args), reactRoot);
-  }
-  else {
-    render(args[0] as any, reactRoot);
-  }
-  perf.mark('render/finish');
-  if (suspended) {
-    return;
-  }
-  // Report rendering time
-  if (process.env.NODE_ENV !== 'production') {
-    if (initialRender === 'resumed') {
-      logger.log('rendered in',
-        perf.measure('render/start', 'render/finish'));
+export const createRenderer: CreateRenderer =
+  (getVNode) =>
+  (...args) => {
+    perf.mark('render/start');
+    // Start rendering
+    if (!reactRoot) {
+      reactRoot = document.getElementById('react-root');
     }
-    else if (initialRender) {
-      logger.debug('serving from:', location.href);
-      logger.debug('bundle entered in',
-        perf.measure('inception', 'init'));
-      logger.debug('initialized in',
-        perf.measure('init', 'render/start'));
-      logger.log('rendered in',
-        perf.measure('render/start', 'render/finish'));
-      logger.log('fully loaded in',
-        perf.measure('inception', 'render/finish'));
+    if (getVNode) {
+      render(getVNode(...args), reactRoot);
+    } else {
+      render(args[0] as any, reactRoot);
     }
-    else {
-      logger.debug('rendered in',
-        perf.measure('render/start', 'render/finish'));
+    perf.mark('render/finish');
+    if (suspended) {
+      return;
     }
-  }
-  if (initialRender) {
-    initialRender = false;
-  }
-};
+    // Report rendering time
+    if (process.env.NODE_ENV !== 'production') {
+      if (initialRender === 'resumed') {
+        logger.log(
+          'rendered in',
+          perf.measure('render/start', 'render/finish'),
+        );
+      } else if (initialRender) {
+        logger.debug('serving from:', location.href);
+        logger.debug('bundle entered in', perf.measure('inception', 'init'));
+        logger.debug('initialized in', perf.measure('init', 'render/start'));
+        logger.log(
+          'rendered in',
+          perf.measure('render/start', 'render/finish'),
+        );
+        logger.log(
+          'fully loaded in',
+          perf.measure('inception', 'render/finish'),
+        );
+      } else {
+        logger.debug(
+          'rendered in',
+          perf.measure('render/start', 'render/finish'),
+        );
+      }
+    }
+    if (initialRender) {
+      initialRender = false;
+    }
+  };
diff --git a/tgui/packages/tgui/routes.js b/tgui/packages/tgui/routes.js
index eaf298529e91..eb4ddff15393 100644
--- a/tgui/packages/tgui/routes.js
+++ b/tgui/packages/tgui/routes.js
@@ -16,10 +16,14 @@ const routingError = (type, name) => () => {
     <Window>
       <Window.Content scrollable>
         {type === 'notFound' && (
-          <div>Interface <b>{name}</b> was not found.</div>
+          <div>
+            Interface <b>{name}</b> was not found.
+          </div>
         )}
         {type === 'missingExport' && (
-          <div>Interface <b>{name}</b> is missing an export.</div>
+          <div>
+            Interface <b>{name}</b> is missing an export.
+          </div>
         )}
       </Window.Content>
     </Window>
@@ -35,7 +39,6 @@ const SuspendedWindow = () => {
 };
 
 const RefreshingWindow = () => {
-
   return (
     <Window title="Loading">
       <Window.Content>
@@ -44,9 +47,7 @@ const RefreshingWindow = () => {
             <Stack.Item>
               <Icon color="blue" name="toolbox" spin size={4} />
             </Stack.Item>
-            <Stack.Item>
-              Please wait...
-            </Stack.Item>
+            <Stack.Item>Please wait...</Stack.Item>
           </Stack>
         </Section>
       </Window.Content>
@@ -54,7 +55,7 @@ const RefreshingWindow = () => {
   );
 };
 
-export const getRoutedComponent = store => {
+export const getRoutedComponent = (store) => {
   const state = store.getState();
   const { suspended, config } = selectBackend(state);
   if (suspended) {
@@ -72,10 +73,10 @@ export const getRoutedComponent = store => {
   }
   const name = config?.interface;
   const interfacePathBuilders = [
-    name => `./${name}.tsx`,
-    name => `./${name}.js`,
-    name => `./${name}/index.tsx`,
-    name => `./${name}/index.js`,
+    (name) => `./${name}.tsx`,
+    (name) => `./${name}.js`,
+    (name) => `./${name}/index.tsx`,
+    (name) => `./${name}/index.js`,
   ];
   let esModule;
   while (!esModule && interfacePathBuilders.length > 0) {
@@ -83,8 +84,7 @@ export const getRoutedComponent = store => {
     const interfacePath = interfacePathBuilder(name);
     try {
       esModule = requireInterface(interfacePath);
-    }
-    catch (err) {
+    } catch (err) {
       if (err.code !== 'MODULE_NOT_FOUND') {
         throw err;
       }
diff --git a/tgui/packages/tgui/store.js b/tgui/packages/tgui/store.js
index 35f80444560a..a3f7e3c6ccf1 100644
--- a/tgui/packages/tgui/store.js
+++ b/tgui/packages/tgui/store.js
@@ -23,20 +23,19 @@ export const configureStore = (options = {}) => {
     }),
     options.reducer,
   ]);
-  const middleware = !sideEffects ? [] : [
-    ...(options.middleware?.pre || []),
-    assetMiddleware,
-    backendMiddleware,
-    ...(options.middleware?.post || []),
-  ];
+  const middleware = !sideEffects
+    ? []
+    : [
+        ...(options.middleware?.pre || []),
+        assetMiddleware,
+        backendMiddleware,
+        ...(options.middleware?.post || []),
+      ];
   if (process.env.NODE_ENV !== 'production') {
     // We are using two if statements because Webpack is capable of
     // removing this specific block as dead code.
     if (sideEffects) {
-      middleware.unshift(
-        loggingMiddleware,
-        debugMiddleware,
-        relayMiddleware);
+      middleware.unshift(loggingMiddleware, debugMiddleware, relayMiddleware);
     }
   }
   const enhancer = applyMiddleware(...middleware);
@@ -47,12 +46,11 @@ export const configureStore = (options = {}) => {
   return store;
 };
 
-const loggingMiddleware = store => next => action => {
+const loggingMiddleware = (store) => (next) => (action) => {
   const { type, payload } = action;
   if (type === 'update' || type === 'backend/update') {
     logger.debug('action', { type });
-  }
-  else {
+  } else {
     logger.debug('action', action);
   }
   return next(action);
@@ -62,12 +60,11 @@ const loggingMiddleware = store => next => action => {
  * Creates a function, which can be assigned to window.__augmentStack__
  * to augment reported stack traces with useful data for debugging.
  */
-const createStackAugmentor = store => (stack, error) => {
+const createStackAugmentor = (store) => (stack, error) => {
   if (!error) {
     error = new Error(stack.split('\n')[0]);
     error.stack = stack;
-  }
-  else if (typeof error === 'object' && !error.stack) {
+  } else if (typeof error === 'object' && !error.stack) {
     error.stack = stack;
   }
   logger.log('FatalError:', error);
@@ -75,11 +72,13 @@ const createStackAugmentor = store => (stack, error) => {
   const config = state?.backend?.config;
   let augmentedStack = stack;
   augmentedStack += '\nUser Agent: ' + navigator.userAgent;
-  augmentedStack += '\nState: ' + JSON.stringify({
-    ckey: config?.client?.ckey,
-    interface: config?.interface,
-    window: config?.window,
-  });
+  augmentedStack +=
+    '\nState: ' +
+    JSON.stringify({
+      ckey: config?.client?.ckey,
+      interface: config?.interface,
+      window: config?.window,
+    });
   return augmentedStack;
 };
 
diff --git a/tgui/packages/tgui/stories/Blink.stories.js b/tgui/packages/tgui/stories/Blink.stories.js
index 54196d79f124..5fc2e8c81577 100644
--- a/tgui/packages/tgui/stories/Blink.stories.js
+++ b/tgui/packages/tgui/stories/Blink.stories.js
@@ -14,9 +14,7 @@ export const meta = {
 const Story = (props, context) => {
   return (
     <Section>
-      <Blink>
-        Blink
-      </Blink>
+      <Blink>Blink</Blink>
     </Section>
   );
 };
diff --git a/tgui/packages/tgui/stories/Box.stories.js b/tgui/packages/tgui/stories/Box.stories.js
index 16861e61fa8b..3f1cbd1e2096 100644
--- a/tgui/packages/tgui/stories/Box.stories.js
+++ b/tgui/packages/tgui/stories/Box.stories.js
@@ -14,30 +14,14 @@ export const meta = {
 const Story = (props, context) => {
   return (
     <Section>
-      <Box bold>
-        bold
-      </Box>
-      <Box italic>
-        italic
-      </Box>
-      <Box opacity={0.5}>
-        opacity 0.5
-      </Box>
-      <Box opacity={0.25}>
-        opacity 0.25
-      </Box>
-      <Box m={2}>
-        m: 2
-      </Box>
-      <Box textAlign="left">
-        left
-      </Box>
-      <Box textAlign="center">
-        center
-      </Box>
-      <Box textAlign="right">
-        right
-      </Box>
+      <Box bold>bold</Box>
+      <Box italic>italic</Box>
+      <Box opacity={0.5}>opacity 0.5</Box>
+      <Box opacity={0.25}>opacity 0.25</Box>
+      <Box m={2}>m: 2</Box>
+      <Box textAlign="left">left</Box>
+      <Box textAlign="center">center</Box>
+      <Box textAlign="right">right</Box>
     </Section>
   );
 };
diff --git a/tgui/packages/tgui/stories/Button.stories.js b/tgui/packages/tgui/stories/Button.stories.js
index 7e29dcbf46f0..36f029e778c4 100644
--- a/tgui/packages/tgui/stories/Button.stories.js
+++ b/tgui/packages/tgui/stories/Button.stories.js
@@ -26,13 +26,7 @@ const COLORS_SPECTRUM = [
   'grey',
 ];
 
-const COLORS_STATES = [
-  'good',
-  'average',
-  'bad',
-  'black',
-  'white',
-];
+const COLORS_STATES = ['good', 'average', 'bad', 'black', 'white'];
 
 const Story = (props, context) => {
   return (
@@ -51,28 +45,20 @@ const Story = (props, context) => {
           lineHeight={2}
           minWidth={15}
           textAlign="center"
-          content="With Box props" />
+          content="With Box props"
+        />
       </Box>
       <Box mb={1}>
-        {COLORS_STATES.map(color => (
-          <Button
-            key={color}
-            color={color}
-            content={color} />
+        {COLORS_STATES.map((color) => (
+          <Button key={color} color={color} content={color} />
         ))}
         <br />
-        {COLORS_SPECTRUM.map(color => (
-          <Button
-            key={color}
-            color={color}
-            content={color} />
+        {COLORS_SPECTRUM.map((color) => (
+          <Button key={color} color={color} content={color} />
         ))}
         <br />
-        {COLORS_SPECTRUM.map(color => (
-          <Box inline
-            mx="7px"
-            key={color}
-            color={color}>
+        {COLORS_SPECTRUM.map((color) => (
+          <Box inline mx="7px" key={color} color={color}>
             {color}
           </Box>
         ))}
diff --git a/tgui/packages/tgui/stories/ByondUi.stories.js b/tgui/packages/tgui/stories/ByondUi.stories.js
index ca88d1028ff2..e055ec554c8a 100644
--- a/tgui/packages/tgui/stories/ByondUi.stories.js
+++ b/tgui/packages/tgui/stories/ByondUi.stories.js
@@ -14,9 +14,11 @@ export const meta = {
 };
 
 const Story = (props, context) => {
-  const [code, setCode] = useLocalState(context,
+  const [code, setCode] = useLocalState(
+    context,
     'byondUiEvalCode',
-    `Byond.winset('${Byond.windowId}', {\n  'is-visible': true,\n})`);
+    `Byond.winset('${Byond.windowId}', {\n  'is-visible': true,\n})`,
+  );
   return (
     <>
       <Section title="Button">
@@ -24,36 +26,40 @@ const Story = (props, context) => {
           params={{
             type: 'button',
             text: 'Button',
-          }} />
+          }}
+        />
       </Section>
       <Section
         title="Make BYOND calls"
-        buttons={(
+        buttons={
           <Button
             icon="chevron-right"
-            onClick={() => setImmediate(() => {
-              try {
-                const result = new Function('return (' + code + ')')();
-                if (result && result.then) {
-                  logger.log('Promise');
-                  result.then(logger.log);
-                }
-                else {
-                  logger.log(result);
+            onClick={() =>
+              setImmediate(() => {
+                try {
+                  const result = new Function('return (' + code + ')')();
+                  if (result && result.then) {
+                    logger.log('Promise');
+                    result.then(logger.log);
+                  } else {
+                    logger.log(result);
+                  }
+                } catch (err) {
+                  logger.log(err);
                 }
-              }
-              catch (err) {
-                logger.log(err);
-              }
-            })}>
+              })
+            }
+          >
             Evaluate
           </Button>
-        )}>
+        }
+      >
         <Box
           as="textarea"
           width="100%"
           height="10em"
-          onChange={e => setCode(e.target.value)}>
+          onChange={(e) => setCode(e.target.value)}
+        >
           {code}
         </Box>
       </Section>
diff --git a/tgui/packages/tgui/stories/Collapsible.stories.js b/tgui/packages/tgui/stories/Collapsible.stories.js
index 244ca052f523..eace08607ba3 100644
--- a/tgui/packages/tgui/stories/Collapsible.stories.js
+++ b/tgui/packages/tgui/stories/Collapsible.stories.js
@@ -15,11 +15,7 @@ export const meta = {
 const Story = (props, context) => {
   return (
     <Section>
-      <Collapsible
-        title="Collapsible Demo"
-        buttons={(
-          <Button icon="cog" />
-        )}>
+      <Collapsible title="Collapsible Demo" buttons={<Button icon="cog" />}>
         <BoxWithSampleText />
       </Collapsible>
     </Section>
diff --git a/tgui/packages/tgui/stories/Flex.stories.js b/tgui/packages/tgui/stories/Flex.stories.js
index de7a3b28b965..64dc79edfc4d 100644
--- a/tgui/packages/tgui/stories/Flex.stories.js
+++ b/tgui/packages/tgui/stories/Flex.stories.js
@@ -13,63 +13,54 @@ export const meta = {
 };
 
 const Story = (props, context) => {
-  const [grow, setGrow] = useLocalState(
-    context, 'fs_grow', 1);
+  const [grow, setGrow] = useLocalState(context, 'fs_grow', 1);
   const [direction, setDirection] = useLocalState(
-    context, 'fs_direction', 'column');
-  const [fill, setFill] = useLocalState(
-    context, 'fs_fill', true);
-  const [hasTitle, setHasTitle] = useLocalState(
-    context, 'fs_title', true);
+    context,
+    'fs_direction',
+    'column',
+  );
+  const [fill, setFill] = useLocalState(context, 'fs_fill', true);
+  const [hasTitle, setHasTitle] = useLocalState(context, 'fs_title', true);
   return (
-    <Flex
-      height="100%"
-      direction="column">
+    <Flex height="100%" direction="column">
       <Flex.Item mb={1}>
         <Section>
           <Button
             fluid
-            onClick={() => setDirection(
-              direction === 'column' ? 'row' : 'column'
-            )}>
+            onClick={() =>
+              setDirection(direction === 'column' ? 'row' : 'column')
+            }
+          >
             {`Flex direction="${direction}"`}
           </Button>
-          <Button
-            fluid
-            onClick={() => setGrow(Number(!grow))}>
+          <Button fluid onClick={() => setGrow(Number(!grow))}>
             {`Flex.Item grow={${grow}}`}
           </Button>
-          <Button
-            fluid
-            onClick={() => setFill(!fill)}>
+          <Button fluid onClick={() => setFill(!fill)}>
             {`Section fill={${String(fill)}}`}
           </Button>
           <Button
             fluid
             selected={hasTitle}
-            onClick={() => setHasTitle(!hasTitle)}>
+            onClick={() => setHasTitle(!hasTitle)}
+          >
             {`Section title`}
           </Button>
         </Section>
       </Flex.Item>
       <Flex.Item grow={1}>
-        <Flex
-          height="100%"
-          direction={direction}>
+        <Flex height="100%" direction={direction}>
           <Flex.Item
             mr={direction === 'row' && 1}
             mb={direction === 'column' && 1}
-            grow={grow}>
-            <Section
-              title={hasTitle && 'Section 1'}
-              fill={fill}>
+            grow={grow}
+          >
+            <Section title={hasTitle && 'Section 1'} fill={fill}>
               Content
             </Section>
           </Flex.Item>
           <Flex.Item grow={grow}>
-            <Section
-              title={hasTitle && 'Section 2'}
-              fill={fill}>
+            <Section title={hasTitle && 'Section 2'} fill={fill}>
               Content
             </Section>
           </Flex.Item>
diff --git a/tgui/packages/tgui/stories/Input.stories.js b/tgui/packages/tgui/stories/Input.stories.js
index b15316902eb0..66fcd602b320 100644
--- a/tgui/packages/tgui/stories/Input.stories.js
+++ b/tgui/packages/tgui/stories/Input.stories.js
@@ -5,7 +5,17 @@
  */
 
 import { useLocalState } from '../backend';
-import { Box, DraggableControl, Icon, Input, Knob, LabeledList, NumberInput, Section, Slider } from '../components';
+import {
+  Box,
+  DraggableControl,
+  Icon,
+  Input,
+  Knob,
+  LabeledList,
+  NumberInput,
+  Section,
+  Slider,
+} from '../components';
 
 export const meta = {
   title: 'Input',
@@ -13,26 +23,16 @@ export const meta = {
 };
 
 const Story = (props, context) => {
-  const [
-    number,
-    setNumber,
-  ] = useLocalState(context, 'number', 0);
-  const [
-    text,
-    setText,
-  ] = useLocalState(context, 'text', "Sample text");
+  const [number, setNumber] = useLocalState(context, 'number', 0);
+  const [text, setText] = useLocalState(context, 'text', 'Sample text');
   return (
     <Section>
       <LabeledList>
         <LabeledList.Item label="Input (onChange)">
-          <Input
-            value={text}
-            onChange={(e, value) => setText(value)} />
+          <Input value={text} onChange={(e, value) => setText(value)} />
         </LabeledList.Item>
         <LabeledList.Item label="Input (onInput)">
-          <Input
-            value={text}
-            onInput={(e, value) => setText(value)} />
+          <Input value={text} onInput={(e, value) => setText(value)} />
         </LabeledList.Item>
         <LabeledList.Item label="NumberInput (onChange)">
           <NumberInput
@@ -43,7 +43,8 @@ const Story = (props, context) => {
             value={number}
             minValue={-100}
             maxValue={100}
-            onChange={(e, value) => setNumber(value)} />
+            onChange={(e, value) => setNumber(value)}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="NumberInput (onDrag)">
           <NumberInput
@@ -54,7 +55,8 @@ const Story = (props, context) => {
             value={number}
             minValue={-100}
             maxValue={100}
-            onDrag={(e, value) => setNumber(value)} />
+            onDrag={(e, value) => setNumber(value)}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Slider (onDrag)">
           <Slider
@@ -63,7 +65,8 @@ const Story = (props, context) => {
             value={number}
             minValue={-100}
             maxValue={100}
-            onDrag={(e, value) => setNumber(value)} />
+            onDrag={(e, value) => setNumber(value)}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Knob (onDrag)">
           <Knob
@@ -74,7 +77,8 @@ const Story = (props, context) => {
             value={number}
             minValue={-100}
             maxValue={100}
-            onDrag={(e, value) => setNumber(value)} />
+            onDrag={(e, value) => setNumber(value)}
+          />
           <Knob
             ml={1}
             inline
@@ -85,7 +89,8 @@ const Story = (props, context) => {
             value={number}
             minValue={-100}
             maxValue={100}
-            onDrag={(e, value) => setNumber(value)} />
+            onDrag={(e, value) => setNumber(value)}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Rotating Icon">
           <Box inline position="relative">
@@ -96,14 +101,16 @@ const Story = (props, context) => {
               dragMatrix={[0, -1]}
               step={1}
               stepPixelSize={5}
-              onDrag={(e, value) => setNumber(value)}>
-              {control => (
+              onDrag={(e, value) => setNumber(value)}
+            >
+              {(control) => (
                 <Box onMouseDown={control.handleDragStart}>
                   <Icon
                     size={4}
                     color="yellow"
                     name="times"
-                    rotation={control.displayValue * 4} />
+                    rotation={control.displayValue * 4}
+                  />
                   {control.inputElement}
                 </Box>
               )}
diff --git a/tgui/packages/tgui/stories/Popper.stories.js b/tgui/packages/tgui/stories/Popper.stories.js
index 25388740bb2b..5a984ac6feaa 100644
--- a/tgui/packages/tgui/stories/Popper.stories.js
+++ b/tgui/packages/tgui/stories/Popper.stories.js
@@ -1,45 +1,59 @@
-import { Box, Popper } from "../components";
+import { Box, Popper } from '../components';
 
 export const meta = {
-  title: "Popper",
+  title: 'Popper',
   render: () => <Story />,
 };
 
 const Story = () => {
   return (
     <>
-      <Popper popperContent={
-        <Box style={{
-          background: "white",
-          border: "2px solid blue",
-        }}>
-          Loogatme!
-        </Box>
-      } options={{
-        placement: "bottom",
-      }}>
-        <Box style={{
-          border: "5px solid white",
-          height: "300px",
-          width: "200px",
-        }} />
+      <Popper
+        popperContent={
+          <Box
+            style={{
+              background: 'white',
+              border: '2px solid blue',
+            }}
+          >
+            Loogatme!
+          </Box>
+        }
+        options={{
+          placement: 'bottom',
+        }}
+      >
+        <Box
+          style={{
+            border: '5px solid white',
+            height: '300px',
+            width: '200px',
+          }}
+        />
       </Popper>
 
-      <Popper popperContent={
-        <Box style={{
-          background: "white",
-          border: "2px solid blue",
-        }}>
-          I am on the right!
-        </Box>
-      } options={{
-        placement: "right",
-      }}>
-        <Box style={{
-          border: "5px solid white",
-          height: "500px",
-          width: "100px",
-        }} />
+      <Popper
+        popperContent={
+          <Box
+            style={{
+              background: 'white',
+              border: '2px solid blue',
+            }}
+          >
+            I am on the right!
+          </Box>
+        }
+        options={{
+          placement: 'right',
+        }}
+      >
+        <Box
+          style={{
+            border: '5px solid white',
+            height: '500px',
+            width: '100px',
+          }}
+        />
       </Popper>
     </>
   );
diff --git a/tgui/packages/tgui/stories/ProgressBar.stories.js b/tgui/packages/tgui/stories/ProgressBar.stories.js
index e6a8919d8dfd..a05f6b2e85c9 100644
--- a/tgui/packages/tgui/stories/ProgressBar.stories.js
+++ b/tgui/packages/tgui/stories/ProgressBar.stories.js
@@ -5,7 +5,14 @@
  */
 
 import { useLocalState } from '../backend';
-import { Box, Button, Input, LabeledList, ProgressBar, Section } from '../components';
+import {
+  Box,
+  Button,
+  Input,
+  LabeledList,
+  ProgressBar,
+  Section,
+} from '../components';
 
 export const meta = {
   title: 'ProgressBar',
@@ -13,30 +20,22 @@ export const meta = {
 };
 
 const Story = (props, context) => {
-  const [
-    progress,
-    setProgress,
-  ] = useLocalState(context, 'progress', 0.5);
-  const [
-    color,
-    setColor,
-  ] = useLocalState(context, 'color', '');
+  const [progress, setProgress] = useLocalState(context, 'progress', 0.5);
+  const [color, setColor] = useLocalState(context, 'color', '');
 
   const color_data = color
     ? { color: color }
-    : { ranges: {
-      good: [0.5, Infinity],
-      bad: [-Infinity, 0.1],
-      average: [0, 0.5],
-    } };
+    : {
+        ranges: {
+          good: [0.5, Infinity],
+          bad: [-Infinity, 0.1],
+          average: [0, 0.5],
+        },
+      };
 
   return (
     <Section>
-      <ProgressBar
-        {...color_data}
-        minValue={-1}
-        maxValue={1}
-        value={progress}>
+      <ProgressBar {...color_data} minValue={-1} maxValue={1} value={progress}>
         Value: {Number(progress).toFixed(1)}
       </ProgressBar>
       <Box mt={1}>
@@ -44,15 +43,15 @@ const Story = (props, context) => {
           <LabeledList.Item label="Adjust value">
             <Button
               content="-0.1"
-              onClick={() => setProgress(progress - 0.1)} />
+              onClick={() => setProgress(progress - 0.1)}
+            />
             <Button
               content="+0.1"
-              onClick={() => setProgress(progress + 0.1)} />
+              onClick={() => setProgress(progress + 0.1)}
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Override color">
-            <Input
-              value={color}
-              onChange={(e, value) => setColor(value)} />
+            <Input value={color} onChange={(e, value) => setColor(value)} />
           </LabeledList.Item>
         </LabeledList>
       </Box>
diff --git a/tgui/packages/tgui/stories/Storage.stories.js b/tgui/packages/tgui/stories/Storage.stories.js
index f00899f1db71..3172a097d24a 100644
--- a/tgui/packages/tgui/stories/Storage.stories.js
+++ b/tgui/packages/tgui/stories/Storage.stories.js
@@ -15,25 +15,23 @@ export const meta = {
 
 const Story = (props, context) => {
   if (!window.localStorage) {
-    return (
-      <NoticeBox>
-        Local storage is not available.
-      </NoticeBox>
-    );
+    return <NoticeBox>Local storage is not available.</NoticeBox>;
   }
   return (
     <Section
       title="Local Storage"
-      buttons={(
+      buttons={
         <Button
           icon="recycle"
           onClick={() => {
             localStorage.clear();
             storage.clear();
-          }}>
+          }}
+        >
           Clear
         </Button>
-      )}>
+      }
+    >
       <LabeledList>
         <LabeledList.Item label="Keys in use">
           {localStorage.length}
diff --git a/tgui/packages/tgui/stories/Tabs.stories.js b/tgui/packages/tgui/stories/Tabs.stories.js
index 67efa65f2597..b2b51c3ea745 100644
--- a/tgui/packages/tgui/stories/Tabs.stories.js
+++ b/tgui/packages/tgui/stories/Tabs.stories.js
@@ -12,12 +12,7 @@ export const meta = {
   render: () => <Story />,
 };
 
-const TAB_RANGE = [
-  'Tab #1',
-  'Tab #2',
-  'Tab #3',
-  'Tab #4',
-];
+const TAB_RANGE = ['Tab #1', 'Tab #2', 'Tab #3', 'Tab #4'];
 
 const Story = (props, context) => {
   const [tabProps, setTabProps] = useLocalState(context, 'tabProps', {});
@@ -28,50 +23,68 @@ const Story = (props, context) => {
           inline
           content="vertical"
           checked={tabProps.vertical}
-          onClick={() => setTabProps({
-            ...tabProps,
-            vertical: !tabProps.vertical,
-          })} />
+          onClick={() =>
+            setTabProps({
+              ...tabProps,
+              vertical: !tabProps.vertical,
+            })
+          }
+        />
         <Button.Checkbox
           inline
           content="leftSlot"
           checked={tabProps.leftSlot}
-          onClick={() => setTabProps({
-            ...tabProps,
-            leftSlot: !tabProps.leftSlot,
-          })} />
+          onClick={() =>
+            setTabProps({
+              ...tabProps,
+              leftSlot: !tabProps.leftSlot,
+            })
+          }
+        />
         <Button.Checkbox
           inline
           content="rightSlot"
           checked={tabProps.rightSlot}
-          onClick={() => setTabProps({
-            ...tabProps,
-            rightSlot: !tabProps.rightSlot,
-          })} />
+          onClick={() =>
+            setTabProps({
+              ...tabProps,
+              rightSlot: !tabProps.rightSlot,
+            })
+          }
+        />
         <Button.Checkbox
           inline
           content="icon"
           checked={tabProps.icon}
-          onClick={() => setTabProps({
-            ...tabProps,
-            icon: !tabProps.icon,
-          })} />
+          onClick={() =>
+            setTabProps({
+              ...tabProps,
+              icon: !tabProps.icon,
+            })
+          }
+        />
         <Button.Checkbox
           inline
           content="fluid"
           checked={tabProps.fluid}
-          onClick={() => setTabProps({
-            ...tabProps,
-            fluid: !tabProps.fluid,
-          })} />
+          onClick={() =>
+            setTabProps({
+              ...tabProps,
+              fluid: !tabProps.fluid,
+            })
+          }
+        />
         <Button.Checkbox
           inline
           content="centered"
           checked={tabProps.centered}
-          onClick={() => setTabProps({
-            ...tabProps,
-            centered: !tabProps.centered,
-          })} />
+          onClick={() =>
+            setTabProps({
+              ...tabProps,
+              centered: !tabProps.centered,
+            })
+          }
+        />
       </Section>
       <Section fitted>
         <TabsPrefab />
@@ -95,27 +108,25 @@ const TabsPrefab = (props, context) => {
     <Tabs
       vertical={tabProps.vertical}
       fluid={tabProps.fluid}
-      textAlign={tabProps.centered && 'center'}>
+      textAlign={tabProps.centered && 'center'}
+    >
       {TAB_RANGE.map((text, i) => (
         <Tabs.Tab
           key={i}
           selected={i === tabIndex}
           icon={tabProps.icon && 'info-circle'}
-          leftSlot={tabProps.leftSlot && (
-            <Button
-              circular
-              compact
-              color="transparent"
-              icon="times" />
-          )}
-          rightSlot={tabProps.rightSlot && (
-            <Button
-              circular
-              compact
-              color="transparent"
-              icon="times" />
-          )}
-          onClick={() => setTabIndex(i)}>
+          leftSlot={
+            tabProps.leftSlot && (
+              <Button circular compact color="transparent" icon="times" />
+            )
+          }
+          rightSlot={
+            tabProps.rightSlot && (
+              <Button circular compact color="transparent" icon="times" />
+            )
+          }
+          onClick={() => setTabIndex(i)}
+        >
           {text}
         </Tabs.Tab>
       ))}
diff --git a/tgui/packages/tgui/stories/Themes.stories.js b/tgui/packages/tgui/stories/Themes.stories.js
index 813e20957bfc..2a9db1e974e0 100644
--- a/tgui/packages/tgui/stories/Themes.stories.js
+++ b/tgui/packages/tgui/stories/Themes.stories.js
@@ -21,7 +21,8 @@ const Story = (props, context) => {
           <Input
             placeholder="theme_name"
             value={theme}
-            onInput={(e, value) => setTheme(value)} />
+            onInput={(e, value) => setTheme(value)}
+          />
         </LabeledList.Item>
       </LabeledList>
     </Section>
diff --git a/tgui/packages/tgui/stories/Tooltip.stories.js b/tgui/packages/tgui/stories/Tooltip.stories.js
index 03425a222a9d..58b949d41f8b 100644
--- a/tgui/packages/tgui/stories/Tooltip.stories.js
+++ b/tgui/packages/tgui/stories/Tooltip.stories.js
@@ -29,18 +29,17 @@ const Story = () => {
             Box (hover me).
           </Box>
         </Tooltip>
-        <Button
-          tooltip="Tooltip text."
-          content="Button" />
+        <Button tooltip="Tooltip text." content="Button" />
       </Box>
       <Box mt={1}>
-        {positions.map(position => (
+        {positions.map((position) => (
           <Button
             key={position}
             color="transparent"
             tooltip="Tooltip text."
             tooltipPosition={position}
-            content={position} />
+            content={position}
+          />
         ))}
       </Box>
     </Section>
diff --git a/tgui/packages/tgui/stories/common.js b/tgui/packages/tgui/stories/common.js
index fea8ef0e5185..08703e32d2d0 100644
--- a/tgui/packages/tgui/stories/common.js
+++ b/tgui/packages/tgui/stories/common.js
@@ -6,16 +6,13 @@
 
 import { Box } from '../components';
 
-export const BoxWithSampleText = props => {
+export const BoxWithSampleText = (props) => {
   return (
     <Box {...props}>
-      <Box italic>
-        Jackdaws love my big sphinx of quartz.
-      </Box>
+      <Box italic>Jackdaws love my big sphinx of quartz.</Box>
       <Box mt={1} bold>
-        The wide electrification of the southern
-        provinces will give a powerful impetus to the
-        growth of agriculture.
+        The wide electrification of the southern provinces will give a powerful
+        impetus to the growth of agriculture.
       </Box>
     </Box>
   );
diff --git a/tgui/packages/tgui/styles/atomic/debug-layout.scss b/tgui/packages/tgui/styles/atomic/debug-layout.scss
index a3e2150acc00..d015185927ad 100644
--- a/tgui/packages/tgui/styles/atomic/debug-layout.scss
+++ b/tgui/packages/tgui/styles/atomic/debug-layout.scss
@@ -5,10 +5,10 @@
 
 .debug-layout,
 .debug-layout *:not(g):not(path) {
-	color: rgba(255, 255, 255, 0.9) !important;
-	background: transparent !important;
-	outline: 1px solid rgba(255, 255, 255, 0.5) !important;
-	box-shadow: none !important;
+  color: rgba(255, 255, 255, 0.9) !important;
+  background: transparent !important;
+  outline: 1px solid rgba(255, 255, 255, 0.5) !important;
+  box-shadow: none !important;
   filter: none !important;
 
   &:hover {
diff --git a/tgui/packages/tgui/styles/atomic/fit-text.scss b/tgui/packages/tgui/styles/atomic/fit-text.scss
index 2a899601ba26..1d49e13c8e35 100644
--- a/tgui/packages/tgui/styles/atomic/fit-text.scss
+++ b/tgui/packages/tgui/styles/atomic/fit-text.scss
@@ -2,7 +2,11 @@ $mqIterations: 19;
 @mixin fontResize($iterations) {
   $i: 1;
   @while $i <= $iterations {
-    @media all and (min-width: 100px * $i) { .fit-text { font-size:0.1em * $i; } }
+    @media all and (min-width: 100px * $i) {
+      .fit-text {
+        font-size: 0.1em * $i;
+      }
+    }
     $i: $i + 1;
   }
 }
diff --git a/tgui/packages/tgui/styles/atomic/links.scss b/tgui/packages/tgui/styles/atomic/links.scss
index b681a46f82cc..8754c3bc2e18 100644
--- a/tgui/packages/tgui/styles/atomic/links.scss
+++ b/tgui/packages/tgui/styles/atomic/links.scss
@@ -1,10 +1,12 @@
 @use '../colors.scss';
 
 a {
-  &:link, &:visited {
+  &:link,
+  &:visited {
     color: colors.$blue;
   }
-  &:hover, &:active {
+  &:hover,
+  &:active {
     color: colors.$primary;
   }
 }
diff --git a/tgui/packages/tgui/styles/base.scss b/tgui/packages/tgui/styles/base.scss
index 4142fd7c8427..1ce8539babc2 100644
--- a/tgui/packages/tgui/styles/base.scss
+++ b/tgui/packages/tgui/styles/base.scss
@@ -11,9 +11,13 @@ $color-bg: #333333 !default;
 $color-bg-section: rgba(0, 0, 0, 0.25) !default;
 $color-bg-grad-spread: 0% !default; //Dummied out at kapu's request
 $color-bg-start: color.adjust(
-  $color-bg, $lightness: $color-bg-grad-spread) !default;
+  $color-bg,
+  $lightness: $color-bg-grad-spread
+) !default;
 $color-bg-end: color.adjust(
-  $color-bg, $lightness: -$color-bg-grad-spread) !default;
+  $color-bg,
+  $lightness: -$color-bg-grad-spread
+) !default;
 
 $unit: 12px;
 $font-size: 1 * $unit !default;
diff --git a/tgui/packages/tgui/styles/colors.scss b/tgui/packages/tgui/styles/colors.scss
index 496bb31ef50d..d1a9fc4fd9de 100644
--- a/tgui/packages/tgui/styles/colors.scss
+++ b/tgui/packages/tgui/styles/colors.scss
@@ -73,14 +73,20 @@ $bg-map-keys: map.keys($_gen_map) !default;
 
 $fg-map: ();
 @each $color-name in $fg-map-keys {
-  $fg-map: map-merge($fg-map, (
-    $color-name: fg(map.get($_gen_map, $color-name)),
-  ));
+  $fg-map: map-merge(
+    $fg-map,
+    (
+      $color-name: fg(map.get($_gen_map, $color-name)),
+    )
+  );
 }
 
 $bg-map: ();
 @each $color-name in $bg-map-keys {
-  $bg-map: map-merge($bg-map, (
-    $color-name: bg(map.get($_gen_map, $color-name)),
-  ));
+  $bg-map: map-merge(
+    $bg-map,
+    (
+      $color-name: bg(map.get($_gen_map, $color-name)),
+    )
+  );
 }
diff --git a/tgui/packages/tgui/styles/components/Button.scss b/tgui/packages/tgui/styles/components/Button.scss
index f48ea8fa94bf..f559cc263599 100644
--- a/tgui/packages/tgui/styles/components/Button.scss
+++ b/tgui/packages/tgui/styles/components/Button.scss
@@ -19,20 +19,24 @@ $bg-map: colors.$bg-map !default;
 @mixin button-color($color) {
   // Adapt text color to background luminance to ensure high contast
   $luminance: luminance($color);
-  $text-color: if($luminance > 0.4,
-    rgba(0, 0, 0, 1),
-    rgba(255, 255, 255, 1));
+  $text-color: if($luminance > 0.4, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
 
-  transition: color 50ms, background-color 50ms;
+  transition:
+    color 50ms,
+    background-color 50ms;
   background-color: $color;
   color: $text-color;
 
   &:hover {
-    transition: color 0ms, background-color 0ms;
+    transition:
+      color 0ms,
+      background-color 0ms;
   }
 
   &:focus {
-    transition: color 100ms, background-color 100ms;
+    transition:
+      color 100ms,
+      background-color 100ms;
   }
 
   &:hover,
@@ -61,7 +65,9 @@ $bg-map: colors.$bg-map !default;
     margin-bottom: 0;
   }
 
-  .fa, .fas, .far {
+  .fa,
+  .fas,
+  .far {
     margin-left: -0.25em;
     margin-right: -0.25em;
     min-width: 1.333em;
@@ -71,13 +77,17 @@ $bg-map: colors.$bg-map !default;
 
 .Button--hasContent {
   // Add a margin to the icon to keep it separate from the text
-  .fa, .fas, .far {
+  .fa,
+  .fas,
+  .far {
     margin-right: 0.25em;
   }
 }
 
 .Button--hasContent.Button--iconPosition--right {
-  .fa, .fas, .far {
+  .fa,
+  .fas,
+  .far {
     margin-right: 0px;
     margin-left: 3px;
   }
@@ -147,11 +157,11 @@ $bg-map: colors.$bg-map !default;
 .Button--verticalAlignContent--top {
   justify-content: flex-start;
 }
-  
+
 .Button--verticalAlignContent--middle {
   justify-content: center;
 }
-  
+
 .Button--verticalAlignContent--bottom {
   justify-content: flex-end;
 }
diff --git a/tgui/packages/tgui/styles/components/Dropdown.scss b/tgui/packages/tgui/styles/components/Dropdown.scss
index 40928642d671..6909f8d93123 100644
--- a/tgui/packages/tgui/styles/components/Dropdown.scss
+++ b/tgui/packages/tgui/styles/components/Dropdown.scss
@@ -68,7 +68,7 @@
 
 .Dropdown__over {
   top: auto;
-  bottom: 100%
+  bottom: 100%;
 }
 
 .Dropdown__selected-text {
diff --git a/tgui/packages/tgui/styles/components/Icon.scss b/tgui/packages/tgui/styles/components/Icon.scss
index 14ee2a7abd50..320117a65f3e 100644
--- a/tgui/packages/tgui/styles/components/Icon.scss
+++ b/tgui/packages/tgui/styles/components/Icon.scss
@@ -11,7 +11,6 @@
   text-align: center;
 }
 
-
 .IconStack {
   position: relative;
   display: inline-block;
diff --git a/tgui/packages/tgui/styles/components/Knob.scss b/tgui/packages/tgui/styles/components/Knob.scss
index 7633e18514ca..1a5f0d10a998 100644
--- a/tgui/packages/tgui/styles/components/Knob.scss
+++ b/tgui/packages/tgui/styles/components/Knob.scss
@@ -42,9 +42,11 @@ $inner-padding: 0.1em;
   right: $inner-padding;
   margin: 0.3em;
   background-color: $knob-color;
-  background-image: linear-gradient(to bottom,
+  background-image: linear-gradient(
+    to bottom,
     rgba(255, 255, 255, 0.15) 0%,
-    rgba(255, 255, 255, 0) 100%);
+    rgba(255, 255, 255, 0) 100%
+  );
   border-radius: 50%;
   box-shadow: 0 0.05em 0.5em 0 rgba(0, 0, 0, 0.5);
 }
diff --git a/tgui/packages/tgui/styles/components/NoticeBox.scss b/tgui/packages/tgui/styles/components/NoticeBox.scss
index 154905f87080..0394ffaa660b 100644
--- a/tgui/packages/tgui/styles/components/NoticeBox.scss
+++ b/tgui/packages/tgui/styles/components/NoticeBox.scss
@@ -17,9 +17,7 @@ $bg-map: colors.$bg-map !default;
 .NoticeBox {
   // Adapt text color to background luminance to ensure high contast
   $luminance: luminance($background-color);
-  $text-color: if($luminance > 0.35,
-    rgba(0, 0, 0, 1),
-    rgba(255, 255, 255, 1));
+  $text-color: if($luminance > 0.35, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
 
   padding: 0.33em 0.5em;
   margin-bottom: 0.5em;
@@ -33,24 +31,20 @@ $bg-map: colors.$bg-map !default;
     transparent,
     transparent base.em(10px),
     $color-stripes base.em(10px),
-    $color-stripes base.em(20px));
+    $color-stripes base.em(20px)
+  );
 }
 
 @mixin box-color($color) {
   $luminance: luminance($color);
-  $text-color: if($luminance > 0.35,
-    rgba(0, 0, 0, 1),
-    rgba(255, 255, 255, 1));
+  $text-color: if($luminance > 0.35, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
   color: $text-color;
-  background-color: color.adjust(
-    $color,
-    $saturation: -15%,
-    $lightness: -15%);
+  background-color: color.adjust($color, $saturation: -15%, $lightness: -15%);
 }
 
 @each $color-name, $color-value in $bg-map {
   .NoticeBox--color--#{$color-name} {
-    @include box-color($color-value)
+    @include box-color($color-value);
   }
 }
 
diff --git a/tgui/packages/tgui/styles/components/ProgressBar.scss b/tgui/packages/tgui/styles/components/ProgressBar.scss
index a544ee2e930e..e13d25e83759 100644
--- a/tgui/packages/tgui/styles/components/ProgressBar.scss
+++ b/tgui/packages/tgui/styles/components/ProgressBar.scss
@@ -32,7 +32,9 @@ $bg-map: colors.$bg-map !default;
 }
 
 .ProgressBar__fill--animated {
-  transition: background-color 900ms ease-out, width 900ms ease-out;
+  transition:
+    background-color 900ms ease-out,
+    width 900ms ease-out;
 }
 
 .ProgressBar__content {
diff --git a/tgui/packages/tgui/styles/components/RoundGauge.scss b/tgui/packages/tgui/styles/components/RoundGauge.scss
index 423f2e77ced2..be95519d6461 100644
--- a/tgui/packages/tgui/styles/components/RoundGauge.scss
+++ b/tgui/packages/tgui/styles/components/RoundGauge.scss
@@ -21,11 +21,11 @@ $ring-color: #6a96c9 !default;
 $pi: 3.1416;
 
 .RoundGauge__ringTrack {
-    fill: transparent;
-    stroke: rgba(255, 255, 255, 0.1);
-    stroke-width: 10;
-    stroke-dasharray: 50 * $pi;
-    stroke-dashoffset: 50 * $pi;
+  fill: transparent;
+  stroke: rgba(255, 255, 255, 0.1);
+  stroke-width: 10;
+  stroke-dasharray: 50 * $pi;
+  stroke-dashoffset: 50 * $pi;
 }
 
 .RoundGauge__ringFill {
@@ -36,11 +36,13 @@ $pi: 3.1416;
   transition: stroke 50ms ease-out;
 }
 
-.RoundGauge__needle, .RoundGauge__ringFill {
+.RoundGauge__needle,
+.RoundGauge__ringFill {
   transition: transform 50ms ease-in-out;
 }
 
-.RoundGauge__needleLine, .RoundGauge__needleMiddle {
+.RoundGauge__needleLine,
+.RoundGauge__needleMiddle {
   fill: colors.$bad;
 }
 
@@ -66,7 +68,10 @@ $pi: 3.1416;
   .RoundGauge__alert--#{$color-name} {
     fill: $color-value;
     transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
-    animation: RoundGauge__alertAnim 1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
+    animation: RoundGauge__alertAnim
+      1s
+      cubic-bezier(0.34, 1.56, 0.64, 1)
+      infinite;
   }
 }
 
diff --git a/tgui/packages/tgui/styles/components/Tabs.scss b/tgui/packages/tgui/styles/components/Tabs.scss
index ed943bd5dce5..2ab091250271 100644
--- a/tgui/packages/tgui/styles/components/Tabs.scss
+++ b/tgui/packages/tgui/styles/components/Tabs.scss
@@ -8,7 +8,10 @@
 @use '../base.scss';
 @use '../colors.scss';
 
-$color-default: color.scale(colors.fg(colors.$primary), $lightness: 75%) !default;
+$color-default: color.scale(
+  colors.fg(colors.$primary),
+  $lightness: 75%
+) !default;
 $text-color: rgba(255, 255, 255, 0.5) !default;
 $text-color-selected: color.scale($color-default, $lightness: 25%) !default;
 $tab-color: transparent !default;
diff --git a/tgui/packages/tgui/styles/components/Tooltip.scss b/tgui/packages/tgui/styles/components/Tooltip.scss
index 270ea44510b6..497813a206d0 100644
--- a/tgui/packages/tgui/styles/components/Tooltip.scss
+++ b/tgui/packages/tgui/styles/components/Tooltip.scss
@@ -4,7 +4,7 @@
  */
 
 @use '../base.scss';
-@use '../functions.scss'as *;
+@use '../functions.scss' as *;
 
 $color: #ffffff !default;
 $background-color: #000000 !default;
diff --git a/tgui/packages/tgui/styles/functions.scss b/tgui/packages/tgui/styles/functions.scss
index 2153ba21e33d..5b5496892c63 100644
--- a/tgui/packages/tgui/styles/functions.scss
+++ b/tgui/packages/tgui/styles/functions.scss
@@ -23,7 +23,6 @@
   @return math.div($value, $value * 0 + 1);
 }
 
-
 //  Color
 // --------------------------------------------------------
 
@@ -32,7 +31,8 @@
   $scaled: hsl(
     color.hue($color),
     color.saturation($color),
-    color.lightness($color) * (1 + num($percent)));
+    color.lightness($color) * (1 + num($percent))
+  );
   $mixed: color.mix(#ffffff, $color, 100% * num($percent));
   @return color.mix($scaled, $mixed, 75%);
 }
@@ -43,7 +43,7 @@
   $colors: (
     'red': color.red($color),
     'green': color.green($color),
-    'blue': color.blue($color)
+    'blue': color.blue($color),
   );
 
   @each $name, $value in $colors {
@@ -51,17 +51,20 @@
     $value: math.div($value, 255);
     @if $value < 0.03928 {
       $value: math.div($value, 12.92);
-    }
-    @else {
-      $value: math.div($value + .055, 1.055);
+    } @else {
+      $value: math.div($value + 0.055, 1.055);
       $value: math.pow($value, 2.4);
     }
-    $colors: map.merge($colors, ($name: $value));
+    $colors: map.merge(
+      $colors,
+      (
+        $name: $value,
+      )
+    );
   }
 
-  @return (map.get($colors, 'red') * .2126)
-    + (map.get($colors, 'green') * .7152)
-    + (map.get($colors, 'blue') * .0722);
+  @return (map.get($colors, 'red') * 0.2126) +
+    (map.get($colors, 'green') * 0.7152) + (map.get($colors, 'blue') * 0.0722);
 }
 
 // Blends an RGBA color with a static background color based on its
@@ -70,5 +73,6 @@
   @return color.mix(
     color.change($color-rgba, $alpha: 1),
     $color-background,
-    color.alpha($color-rgba) * 100%);
+    color.alpha($color-rgba) * 100%
+  );
 }
diff --git a/tgui/packages/tgui/styles/interfaces/AlertModal.scss b/tgui/packages/tgui/styles/interfaces/AlertModal.scss
index 546082d2dc5f..beff2b5535e6 100644
--- a/tgui/packages/tgui/styles/interfaces/AlertModal.scss
+++ b/tgui/packages/tgui/styles/interfaces/AlertModal.scss
@@ -22,7 +22,9 @@
 
 .AlertModal__LoaderProgress {
   position: absolute;
-  transition: background-color 500ms ease-out, width 500ms ease-out;
+  transition:
+    background-color 500ms ease-out,
+    width 500ms ease-out;
   background-color: colors.bg(colors.$primary);
   height: 100%;
 }
diff --git a/tgui/packages/tgui/styles/interfaces/HellishRunes.scss b/tgui/packages/tgui/styles/interfaces/HellishRunes.scss
index 60f584a5414b..c62194ce2ec4 100644
--- a/tgui/packages/tgui/styles/interfaces/HellishRunes.scss
+++ b/tgui/packages/tgui/styles/interfaces/HellishRunes.scss
@@ -17,6 +17,6 @@ $bg-map: colors.$bg-map !default;
     transform: translate(0px, 0px);
   }
   to {
-    transform: translate(0px,194px);
+    transform: translate(0px, 194px);
   }
 }
diff --git a/tgui/packages/tgui/styles/interfaces/Hypertorus.scss b/tgui/packages/tgui/styles/interfaces/Hypertorus.scss
index 0c51be19c67c..a3adce4b64fb 100644
--- a/tgui/packages/tgui/styles/interfaces/Hypertorus.scss
+++ b/tgui/packages/tgui/styles/interfaces/Hypertorus.scss
@@ -4,12 +4,12 @@
 
 .hypertorus-layout {
   margin-right: -0.5em;
-};
+}
 
 .hypertorus-layout > * {
   margin-bottom: 0.5em;
   margin-right: 0.5em;
-};
+}
 
 /// @}
 
@@ -17,33 +17,33 @@
 
 // Subtle horizontal stripes for the table
 .hypertorus-recipes__row:nth-child(odd) {
-  background-color: rgba(0, 0, 0, .37);
-};
+  background-color: rgba(0, 0, 0, 0.37);
+}
 .hypertorus-recipes__row:nth-child(even) {
-  background-color: rgba(14, 14, 14, .37);
-};
+  background-color: rgba(14, 14, 14, 0.37);
+}
 
 // Highlight an active row
 .hypertorus-recipes__activerow:nth-child(odd) {
-  background-color: rgba(20, 50, 81, .37);
-};
+  background-color: rgba(20, 50, 81, 0.37);
+}
 .hypertorus-recipes__activerow:nth-child(even) {
-  background-color: rgba(29, 61, 98, .37);
-};
+  background-color: rgba(29, 61, 98, 0.37);
+}
 
 // Headers shouldn't get stripes, but should take the label text color.
 // Headers get left borders as a separator, except if they're furtherest left.
 .hypertorus-recipes__row.Table__row--header {
   color: colors.fg(colors.$label);
-  background-color: rgba(0,0,0,0);
-};
+  background-color: rgba(0, 0, 0, 0);
+}
 .hypertorus-recipes__row.Table__row--header > td {
   border-left: 1px solid colors.bg(colors.$label);
   text-align: center;
-};
+}
 .hypertorus-recipes__row.Table__row--header > td:first-child {
   border-left: none;
-};
+}
 
 // Recipe icons are red, unless they're in a header
 .hypertorus-recipes__icon {
@@ -51,10 +51,10 @@
   position: relative;
   color: colors.fg(colors.$red);
   width: 10px;
-};
+}
 .hypertorus-recipes__row.Table__row--header * .hypertorus-recipes__icon {
   color: colors.fg(colors.$label);
-};
+}
 
 /// @}
 
@@ -89,7 +89,7 @@ $yAxisMargin: $yAxisLabelWidth + $yAxisIconWidth + $yAxisIconPadding * 2;
   height: 1px;
   left: $yAxisMargin;
   right: 0;
-};
+}
 
 .hypertorus-temperatures__y-axis {
   background-color: colors.bg(colors.$label);
@@ -97,14 +97,14 @@ $yAxisMargin: $yAxisLabelWidth + $yAxisIconWidth + $yAxisIconPadding * 2;
   width: 1px;
   left: $yAxisMargin;
   height: $height;
-};
+}
 
 // Note: top set in js
 .hypertorus-temperatures__y-axis-tick-anchor {
   position: absolute;
   left: 0px;
   right: 0;
-};
+}
 
 .hypertorus-temperatures__y-axis-tick {
   background-color: colors.bg(colors.$label);
@@ -112,7 +112,7 @@ $yAxisMargin: $yAxisLabelWidth + $yAxisIconWidth + $yAxisIconPadding * 2;
   left: $yAxisMargin;
   right: 0;
   height: 1px;
-};
+}
 
 .hypertorus-temperatures__y-axis-label {
   text-align: right;
@@ -121,7 +121,7 @@ $yAxisMargin: $yAxisLabelWidth + $yAxisIconWidth + $yAxisIconPadding * 2;
   top: 0;
   left: 0;
   width: $yAxisMargin;
-};
+}
 
 .hypertorus-temperatures__y-axis-icon {
   display: inline-block;
@@ -132,14 +132,14 @@ $yAxisMargin: $yAxisLabelWidth + $yAxisIconWidth + $yAxisIconPadding * 2;
   left: 0;
   right: 0;
   margin-left: $yAxisMargin;
-};
+}
 
 .hypertorus-temperatures__vertical-bar {
   height: $height;
   position: relative;
   width: 17px;
   bottom: 0;
-};
+}
 
 // Note: top set in js
 .hypertorus-temperatures__vertical-bar > * {
@@ -148,11 +148,11 @@ $yAxisMargin: $yAxisLabelWidth + $yAxisIconWidth + $yAxisIconPadding * 2;
   right: -0.5px;
   bottom: 0px;
   border-radius: 0.16em;
-};
+}
 
 .hypertorus__unselectable {
   user-select: none;
   -ms-user-select: none;
-};
+}
 
 /// @}
diff --git a/tgui/packages/tgui/styles/interfaces/LibraryComputer.scss b/tgui/packages/tgui/styles/interfaces/LibraryComputer.scss
index c2ec1bb0ea82..581932265ac4 100644
--- a/tgui/packages/tgui/styles/interfaces/LibraryComputer.scss
+++ b/tgui/packages/tgui/styles/interfaces/LibraryComputer.scss
@@ -1,5 +1,5 @@
 .LibraryComputer__CultNonsense {
-  font-size: 28px; 
+  font-size: 28px;
   width: 100%;
   font-family: copperplate;
   height: 100%;
@@ -7,5 +7,5 @@
 
 .LibraryComputer__CultText {
   font-family: copperplate;
-  font-size: 20px; 
+  font-size: 20px;
 }
diff --git a/tgui/packages/tgui/styles/interfaces/ListInput.scss b/tgui/packages/tgui/styles/interfaces/ListInput.scss
index 1533cf66cb97..a7c74e6252de 100644
--- a/tgui/packages/tgui/styles/interfaces/ListInput.scss
+++ b/tgui/packages/tgui/styles/interfaces/ListInput.scss
@@ -3,11 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
- @use '../colors.scss';
- @use '../base.scss';
+@use '../colors.scss';
+@use '../base.scss';
 
-
-.ListInput__Section .Section__title{
+.ListInput__Section .Section__title {
   flex-shrink: 0;
 }
 
@@ -15,15 +14,17 @@
   font-size: base.em(12px);
 }
 
- .ListInput__Loader {
-   width: 100%;
-   position: relative;
-   height: 4px;
- }
+.ListInput__Loader {
+  width: 100%;
+  position: relative;
+  height: 4px;
+}
 
- .ListInput__LoaderProgress {
-   position: absolute;
-   transition: background-color 500ms ease-out, width 500ms ease-out;
-   background-color: colors.bg(colors.$primary);
-   height: 100%;
- }
+.ListInput__LoaderProgress {
+  position: absolute;
+  transition:
+    background-color 500ms ease-out,
+    width 500ms ease-out;
+  background-color: colors.bg(colors.$primary);
+  height: 100%;
+}
diff --git a/tgui/packages/tgui/styles/interfaces/Mecha.scss b/tgui/packages/tgui/styles/interfaces/Mecha.scss
index ba910f392fbe..8795c8cb69da 100644
--- a/tgui/packages/tgui/styles/interfaces/Mecha.scss
+++ b/tgui/packages/tgui/styles/interfaces/Mecha.scss
@@ -6,7 +6,7 @@ $color-danger: #c92020 !default;
 
 .Mecha__displayBox {
   background-color: #002003;
-  border: 0.167em inset #E8E4C9;
+  border: 0.167em inset #e8e4c9;
   color: #03e017;
   font-size: 2em;
   font-family: monospace;
@@ -15,7 +15,7 @@ $color-danger: #c92020 !default;
 
 .Mecha__displayBoxRed {
   background-color: #002003;
-  border: 0.167em inset #E8E4C9;
+  border: 0.167em inset #e8e4c9;
   color: #f54b4b;
   font-size: 2em;
   font-family: monospace;
diff --git a/tgui/packages/tgui/styles/interfaces/NuclearBomb.scss b/tgui/packages/tgui/styles/interfaces/NuclearBomb.scss
index 255ab7cb3dac..615a3f696afa 100644
--- a/tgui/packages/tgui/styles/interfaces/NuclearBomb.scss
+++ b/tgui/packages/tgui/styles/interfaces/NuclearBomb.scss
@@ -5,7 +5,7 @@
 $color-danger: colors.bg(colors.$red) !default;
 $color-caution: colors.bg(colors.$yellow) !default;
 
-$background-beige: #E8E4C9;
+$background-beige: #e8e4c9;
 
 .NuclearBomb__displayBox {
   background-color: #002003;
@@ -33,9 +33,9 @@ $background-beige: #E8E4C9;
 }
 
 .NuclearBomb__Button--1 {
-  background-color: #D3CFB7 !important;
-  border-color:#D3CFB7 !important;
-  color: #A9A692 !important;
+  background-color: #d3cfb7 !important;
+  border-color: #d3cfb7 !important;
+  color: #a9a692 !important;
 }
 
 .NuclearBomb__Button--E {
diff --git a/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss b/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
index 736e28a11e24..5c8f22a65b70 100644
--- a/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
+++ b/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
@@ -194,7 +194,7 @@ $department_map: (
         border: 1px solid rgba(0, 0, 0, 0.3);
 
         &--off::after {
-          content: "";
+          content: '';
 
           background: rgba(0, 0, 0, 0.2);
           display: block;
@@ -210,10 +210,7 @@ $department_map: (
 
     &__PriorityHeader {
       font-weight: bold;
-      transform:
-        translateX(-4px)
-        translateY(-8px)
-        rotate(315deg);
+      transform: translateX(-4px) translateY(-8px) rotate(315deg);
       white-space: nowrap;
       width: 19px;
     }
@@ -233,9 +230,9 @@ $department_map: (
         transition: background-color 0.1s ease-in;
 
         $quality_map: (
-          "positive": colors.$green,
-          "neutral": colors.$white,
-          "negative": colors.$red,
+          'positive': colors.$green,
+          'neutral': colors.$white,
+          'negative': colors.$red,
         );
 
         @each $quality, $color-value in $quality_map {
diff --git a/tgui/packages/tgui/styles/interfaces/RequestManager.scss b/tgui/packages/tgui/styles/interfaces/RequestManager.scss
index 8e113c4fb6e5..c932818ceb6a 100644
--- a/tgui/packages/tgui/styles/interfaces/RequestManager.scss
+++ b/tgui/packages/tgui/styles/interfaces/RequestManager.scss
@@ -98,7 +98,7 @@ $text-color: base.$color-fg !default;
   padding: 0.5rem;
   background-color: functions.fake-alpha($background-color, base.$color-bg);
   background-color: $background-color;
-  color: $text-color
+  color: $text-color;
 }
 
 .RequestManager__filterPanel tr:not(:last-of-type) {
diff --git a/tgui/packages/tgui/styles/interfaces/Safe.scss b/tgui/packages/tgui/styles/interfaces/Safe.scss
index d217a157659f..2f9f3d9d3613 100644
--- a/tgui/packages/tgui/styles/interfaces/Safe.scss
+++ b/tgui/packages/tgui/styles/interfaces/Safe.scss
@@ -14,7 +14,7 @@
 }
 
 .Safe__engraving-hinge {
-  content: " ";
+  content: ' ';
   background-color: #191f2a;
   width: 25px;
   height: 40px;
@@ -65,19 +65,15 @@
   font-style: italic;
   color: black;
   box-shadow: 5px 5px #111111;
-  background-image: linear-gradient(to bottom,
-    #b2ae74 0%,
-    #8e8b5d 100%);
+  background-image: linear-gradient(to bottom, #b2ae74 0%, #8e8b5d 100%);
   transform: rotate(-1deg);
 
   &:before {
-    content: " ";
+    content: ' ';
     display: block;
     width: 24px;
     height: 40px;
-    background-image: linear-gradient(to bottom,
-      transparent 0%,
-      #ffffff 100%);
+    background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
     box-shadow: 1px 1px #111111;
     opacity: 0.2;
     position: absolute;
diff --git a/tgui/packages/tgui/styles/interfaces/Uplink.scss b/tgui/packages/tgui/styles/interfaces/Uplink.scss
index 6730cd636ebb..58cf956a9027 100644
--- a/tgui/packages/tgui/styles/interfaces/Uplink.scss
+++ b/tgui/packages/tgui/styles/interfaces/Uplink.scss
@@ -1,7 +1,7 @@
 $badGradient: linear-gradient(to right, #9c1e1e, #6c2828, #9c1e1e);
 $normalGradient: linear-gradient(to right, #5d5041, #40372d, #5d5041);
 $goodGradient: linear-gradient(to right, #515d6c, #252a30, #515d6c);
-$veryGoodGradient:  linear-gradient(to right, #977949, #534328, #977949);
+$veryGoodGradient: linear-gradient(to right, #977949, #534328, #977949);
 $superGoodGradient: linear-gradient(to right, #9d9948, #777437, #9d9948);
 $bestGradient: linear-gradient(to right, #9d486b, #57283c, #9d486b);
 
@@ -11,7 +11,7 @@ $_rep_map: (
   'good': $goodGradient,
   'very-good': $veryGoodGradient,
   'super-good': $superGoodGradient,
-  'best': $bestGradient
+  'best': $bestGradient,
 );
 
 @each $reputation-name, $gradient-value in $_rep_map {
@@ -71,7 +71,6 @@ $_rep_map: (
   padding-bottom: 0;
 }
 
-
 .UplinkObjective__Footer {
   background-color: rgba(0, 0, 0, 0.4);
   border: black solid 2px;
diff --git a/tgui/packages/tgui/styles/layouts/Layout.scss b/tgui/packages/tgui/styles/layouts/Layout.scss
index 32b94bf125b4..eaadcd9a6978 100644
--- a/tgui/packages/tgui/styles/layouts/Layout.scss
+++ b/tgui/packages/tgui/styles/layouts/Layout.scss
@@ -13,25 +13,32 @@ $scrollbar-color-multiplier: 1 !default;
   // Fancy scrollbar
   scrollbar-base-color: color.scale(
     base.$color-bg,
-    $lightness: -25% * $scrollbar-color-multiplier);
+    $lightness: -25% * $scrollbar-color-multiplier
+  );
   scrollbar-face-color: color.scale(
     base.$color-bg,
-    $lightness: 10% * $scrollbar-color-multiplier);
+    $lightness: 10% * $scrollbar-color-multiplier
+  );
   scrollbar-3dlight-color: color.scale(
     base.$color-bg,
-    $lightness: 0% * $scrollbar-color-multiplier);
+    $lightness: 0% * $scrollbar-color-multiplier
+  );
   scrollbar-highlight-color: color.scale(
     base.$color-bg,
-    $lightness: 0% * $scrollbar-color-multiplier);
+    $lightness: 0% * $scrollbar-color-multiplier
+  );
   scrollbar-track-color: color.scale(
     base.$color-bg,
-    $lightness: -25% * $scrollbar-color-multiplier);
+    $lightness: -25% * $scrollbar-color-multiplier
+  );
   scrollbar-arrow-color: color.scale(
     base.$color-bg,
-    $lightness: 50% * $scrollbar-color-multiplier);
+    $lightness: 50% * $scrollbar-color-multiplier
+  );
   scrollbar-shadow-color: color.scale(
     base.$color-bg,
-    $lightness: 10% * $scrollbar-color-multiplier);
+    $lightness: 10% * $scrollbar-color-multiplier
+  );
 }
 
 .Layout__content {
diff --git a/tgui/packages/tgui/styles/layouts/TitleBar.scss b/tgui/packages/tgui/styles/layouts/TitleBar.scss
index bcbbb9df9513..1a26dd9e29eb 100644
--- a/tgui/packages/tgui/styles/layouts/TitleBar.scss
+++ b/tgui/packages/tgui/styles/layouts/TitleBar.scss
@@ -24,12 +24,16 @@ $shadow-color: rgba(0, 0, 0, 0.1) !default;
 .TitleBar__clickable {
   color: color.change($text-color, $alpha: 0.5);
   background-color: $background-color;
-  transition: color 250ms ease-out, background-color 250ms ease-out;
+  transition:
+    color 250ms ease-out,
+    background-color 250ms ease-out;
 
   &:hover {
-    color: rgba(255, 255, 255, 1.0);
+    color: rgba(255, 255, 255, 1);
     background-color: #cc0000;
-    transition: color 0ms, background-color 0ms;
+    transition:
+      color 0ms,
+      background-color 0ms;
   }
 }
 
diff --git a/tgui/packages/tgui/styles/layouts/Window.scss b/tgui/packages/tgui/styles/layouts/Window.scss
index 3d00c9023331..232dd8396bbf 100644
--- a/tgui/packages/tgui/styles/layouts/Window.scss
+++ b/tgui/packages/tgui/styles/layouts/Window.scss
@@ -15,9 +15,11 @@
   right: 0;
   color: base.$color-fg;
   background-color: base.$color-bg;
-  background-image: linear-gradient(to bottom,
+  background-image: linear-gradient(
+    to bottom,
     base.$color-bg-start 0%,
-    base.$color-bg-end 100%);
+    base.$color-bg-end 100%
+  );
 }
 
 .Window__titleBar {
diff --git a/tgui/packages/tgui/styles/reset.scss b/tgui/packages/tgui/styles/reset.scss
index 80d2a13780ed..b25845915e2f 100644
--- a/tgui/packages/tgui/styles/reset.scss
+++ b/tgui/packages/tgui/styles/reset.scss
@@ -5,7 +5,8 @@
 
 @use './base.scss';
 
-html, body {
+html,
+body {
   box-sizing: border-box;
   height: 100%;
   margin: 0;
@@ -22,11 +23,18 @@ body {
   font-family: Verdana, Geneva, sans-serif;
 }
 
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   box-sizing: inherit;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   display: block;
   margin: 0;
   padding: 6px 0;
@@ -53,7 +61,8 @@ h4 {
   font-size: 1rem;
 }
 
-td, th {
+td,
+th {
   vertical-align: baseline;
   text-align: left;
 }
diff --git a/tgui/packages/tgui/styles/themes/abductor.scss b/tgui/packages/tgui/styles/themes/abductor.scss
index 2e3738bf93f2..39dac5773c06 100644
--- a/tgui/packages/tgui/styles/themes/abductor.scss
+++ b/tgui/packages/tgui/styles/themes/abductor.scss
@@ -9,12 +9,12 @@
 @use '../colors.scss' with (
   $primary: #ad2350,
   $fg-map-keys: (),
-  $bg-map-keys: (),
+  $bg-map-keys: ()
 );
 @use '../base.scss' with (
   $color-bg: #2a314a,
   $color-bg-grad-spread: 6%,
-  $border-radius: 2px,
+  $border-radius: 2px
 );
 
 .theme-abductor {
@@ -22,36 +22,45 @@
   @include meta.load-css('../atomic/color.scss');
 
   // Components
-  @include meta.load-css('../components/Button.scss', $with: (
-    'color-default': colors.$primary,
-    'color-disabled': #363636,
-    'color-selected': #465899,
-    'color-caution': #be6209,
-    'color-danger': #9a9d00,
-  ));
-  @include meta.load-css('../components/Input.scss', $with: (
-    'border-color': #404b6e,
-  ));
-  @include meta.load-css('../components/NoticeBox.scss', $with: (
-    'background-color': #a82d55,
-  ));
-  @include meta.load-css('../components/NumberInput.scss', $with: (
-    'border-color': #404b6e,
-  ));
-  @include meta.load-css('../components/ProgressBar.scss', $with: (
-    'background-color': rgba(0, 0, 0, 0.5),
-  ));
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': colors.$primary,
+      'color-disabled': #363636,
+      'color-selected': #465899,
+      'color-caution': #be6209,
+      'color-danger': #9a9d00
+    )
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #404b6e)
+  );
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #a82d55)
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #404b6e)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
   @include meta.load-css('../components/Section.scss');
-  @include meta.load-css('../components/Tooltip.scss', $with: (
-    'background-color': #a82d55,
-  ));
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #a82d55)
+  );
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: (
-    'background-color': #9e1b46,
-  ));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #9e1b46)
+  );
 
   .Layout__content {
     background-image: none;
diff --git a/tgui/packages/tgui/styles/themes/admin.scss b/tgui/packages/tgui/styles/themes/admin.scss
index b6e3ab8dbd40..75399ee04a58 100644
--- a/tgui/packages/tgui/styles/themes/admin.scss
+++ b/tgui/packages/tgui/styles/themes/admin.scss
@@ -3,29 +3,29 @@
  * SPDX-License-Identifier: MIT
  */
 
- @use 'sass:color';
- @use 'sass:meta';
+@use 'sass:color';
+@use 'sass:meta';
 
- @use '../colors.scss' with (
-   $primary: #1596b6,
-   $fg-map-keys: (),
-   $bg-map-keys: (),
- );
- @use '../base.scss' with (
-   $color-bg: #29333a,
-   $color-bg-grad-spread: 6%,
-   $border-radius: 2px,
- );
+@use '../colors.scss' with (
+  $primary: #1596b6,
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: #29333a,
+  $color-bg-grad-spread: 6%,
+  $border-radius: 2px
+);
 
- .theme-admin {
-   // Atomic classes
-   @include meta.load-css('../atomic/color.scss');
+.theme-admin {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
 
-   // Layouts
-   @include meta.load-css('../layouts/Layout.scss');
-   @include meta.load-css('../layouts/Window.scss');
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
 
-   .Layout__content {
-     background-image: url('../../assets/bg-admin.svg');
-   }
- }
+  .Layout__content {
+    background-image: url('../../assets/bg-admin.svg');
+  }
+}
diff --git a/tgui/packages/tgui/styles/themes/cardtable.scss b/tgui/packages/tgui/styles/themes/cardtable.scss
index e5c1c6ef9e99..e5047e2e2f0c 100644
--- a/tgui/packages/tgui/styles/themes/cardtable.scss
+++ b/tgui/packages/tgui/styles/themes/cardtable.scss
@@ -9,12 +9,12 @@
 @use '../colors.scss' with (
   $primary: #000000,
   $fg-map-keys: (),
-  $bg-map-keys: (),
+  $bg-map-keys: ()
 );
 @use '../base.scss' with (
   $color-bg: #117039,
   $color-bg-grad-spread: 0%,
-  $border-radius: 0,
+  $border-radius: 0
 );
 
 //Made for the roulette table, probably requires a bunch of manual hacks to work for anything else
@@ -23,27 +23,33 @@
   @include meta.load-css('../atomic/color.scss');
 
   // Components
-  @include meta.load-css('../components/Button.scss', $with: (
-    'color-default': #117039,
-    'color-disabled': #363636,
-    'color-selected': #9d0808,
-    'color-caution': #be6209,
-    'color-danger': #9a9d00,
-  ));
-  @include meta.load-css('../components/NumberInput.scss', $with: (
-    'border-color': #fff,
-  ));
-  @include meta.load-css('../components/ProgressBar.scss', $with: (
-    'background-color': rgba(0, 0, 0, 0.5),
-  ));
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': #117039,
+      'color-disabled': #363636,
+      'color-selected': #9d0808,
+      'color-caution': #be6209,
+      'color-danger': #9a9d00
+    )
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #fff)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
   @include meta.load-css('../components/Section.scss');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: (
-    'background-color': #381608,
-  ));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #381608)
+  );
 
   .Button {
     border: base.em(2px) solid #fff;
diff --git a/tgui/packages/tgui/styles/themes/crt.scss b/tgui/packages/tgui/styles/themes/crt.scss
index bffc754404e3..dd2cf2935494 100644
--- a/tgui/packages/tgui/styles/themes/crt.scss
+++ b/tgui/packages/tgui/styles/themes/crt.scss
@@ -1,5 +1,5 @@
 @use 'sass:color';
-@use "sass:math";
+@use 'sass:math';
 @use 'sass:meta';
 
 $font-family: monospace;
@@ -139,7 +139,9 @@ $background-radial-opacity: 0.2 !default;
         rgba(0, 0, 255, 0.06)
       );
     z-index: 2;
-    background-size: 100% 2px, 3px 100%;
+    background-size:
+      100% 2px,
+      3px 100%;
     pointer-events: none;
   }
 
diff --git a/tgui/packages/tgui/styles/themes/hackerman.scss b/tgui/packages/tgui/styles/themes/hackerman.scss
index deb3c05c4a9c..51befcf1b366 100644
--- a/tgui/packages/tgui/styles/themes/hackerman.scss
+++ b/tgui/packages/tgui/styles/themes/hackerman.scss
@@ -9,11 +9,11 @@
 @use '../colors.scss' with (
   $primary: #00ff00,
   $fg-map-keys: (),
-  $bg-map-keys: (),
+  $bg-map-keys: ()
 );
 @use '../base.scss' with (
   $color-bg: #121b12,
-  $color-bg-grad-spread: 0%,
+  $color-bg-grad-spread: 0%
 );
 
 .theme-hackerman {
@@ -21,28 +21,36 @@
   @include meta.load-css('../atomic/color.scss');
 
   // Components
-  @include meta.load-css('../components/Button.scss', $with: (
-    'color-default': colors.$primary,
-    'color-disabled': #4A6A4A,
-    'color-selected': #00FF00,
-  ));
-  @include meta.load-css('../components/Tabs.scss', $with: (
-    'color-default': colors.$primary,
-    'tab-color-selected': #00ff003f,
-    'text-color': #e7e7e7
-  ));
-  @include meta.load-css('../components/Input.scss', $with: (
-    'border-color': colors.$primary,
-  ));
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': colors.$primary,
+      'color-disabled': #4a6a4a,
+      'color-selected': #00ff00
+    )
+  );
+  @include meta.load-css(
+    '../components/Tabs.scss',
+    $with: (
+      'color-default': colors.$primary,
+      'tab-color-selected': #00ff003f,
+      'text-color': #e7e7e7
+    )
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': colors.$primary)
+  );
   @include meta.load-css('../components/Modal.scss');
   @include meta.load-css('../components/Section.scss');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: (
-    'background-color': #223d22,
-  ));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #223d22)
+  );
 
   .Layout__content {
     background-image: none;
@@ -52,11 +60,11 @@
     font-family: monospace;
     border-width: base.em(2px);
     border-style: outset;
-    border-color: #00AA00;
+    border-color: #00aa00;
     outline: base.em(1px) solid rgb(0, 122, 0);
   }
 
   .candystripe:nth-child(odd) {
-    background-color: rgba(0, 100, 0, 0.50);
+    background-color: rgba(0, 100, 0, 0.5);
   }
 }
diff --git a/tgui/packages/tgui/styles/themes/malfunction.scss b/tgui/packages/tgui/styles/themes/malfunction.scss
index 5fb621cf8dfb..d32113ba5e66 100644
--- a/tgui/packages/tgui/styles/themes/malfunction.scss
+++ b/tgui/packages/tgui/styles/themes/malfunction.scss
@@ -9,11 +9,11 @@
 @use '../colors.scss' with (
   $primary: #910101,
   $fg-map-keys: (),
-  $bg-map-keys: (),
+  $bg-map-keys: ()
 );
 @use '../base.scss' with (
   $color-bg: #1b3443,
-  $color-bg-grad-spread: 6%,
+  $color-bg-grad-spread: 6%
 );
 
 .theme-malfunction {
@@ -21,36 +21,45 @@
   @include meta.load-css('../atomic/color.scss');
 
   // Components
-  @include meta.load-css('../components/Button.scss', $with: (
-    'color-default': colors.$primary,
-    'color-disabled': #363636,
-    'color-selected': #1e5881,
-    'color-caution': #be6209,
-    'color-danger': #9a9d00,
-  ));
-  @include meta.load-css('../components/Input.scss', $with: (
-    'border-color': #910101,
-  ));
-  @include meta.load-css('../components/NoticeBox.scss', $with: (
-    'background-color': #1a3f57,
-  ));
-  @include meta.load-css('../components/NumberInput.scss', $with: (
-    'border-color': #910101,
-  ));
-  @include meta.load-css('../components/ProgressBar.scss', $with: (
-    'background-color': rgba(0, 0, 0, 0.5),
-  ));
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': colors.$primary,
+      'color-disabled': #363636,
+      'color-selected': #1e5881,
+      'color-caution': #be6209,
+      'color-danger': #9a9d00
+    )
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #910101)
+  );
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #1a3f57)
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #910101)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
   @include meta.load-css('../components/Section.scss');
-  @include meta.load-css('../components/Tooltip.scss', $with: (
-    'background-color': #235577,
-  ));
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #235577)
+  );
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: (
-    'background-color': #1a3f57,
-  ));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #1a3f57)
+  );
 
   .Layout__content {
     background-image: none;
diff --git a/tgui/packages/tgui/styles/themes/neutral.scss b/tgui/packages/tgui/styles/themes/neutral.scss
index 0ef5a74a391c..e8ed3ca7da98 100644
--- a/tgui/packages/tgui/styles/themes/neutral.scss
+++ b/tgui/packages/tgui/styles/themes/neutral.scss
@@ -3,41 +3,48 @@
  * SPDX-License-Identifier: MIT
  */
 
- @use 'sass:color';
- @use 'sass:meta';
+@use 'sass:color';
+@use 'sass:meta';
 
- $neutral: #ffb300;
+$neutral: #ffb300;
 
- @use '../colors.scss' with (
-   $primary: $neutral,
-   $fg-map-keys: (),
-   $bg-map-keys: (),
- );
- @use '../base.scss' with (
-   $color-bg: color.scale($neutral, $lightness: -40%),
-   $color-bg-grad-spread: 6%,
- );
+@use '../colors.scss' with (
+  $primary: $neutral,
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: color.scale($neutral, $lightness: -40%),
+  $color-bg-grad-spread: 6%
+);
 
- .theme-neutral {
-   // Components
-   @include meta.load-css('../components/Button.scss', $with: (
-     'color-default': color.scale($neutral, $lightness: -30%),
-     'color-transparent-text': color.scale($neutral, $lightness: 30%),
-   ));
-   @include meta.load-css('../components/ProgressBar.scss', $with: (
-     'color-default-fill': $neutral,
-     'background-color': rgba(0, 0, 0, 0.5),
-   ));
-   @include meta.load-css('../components/Section.scss');
+.theme-neutral {
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': color.scale($neutral, $lightness: -30%),
+      'color-transparent-text': color.scale($neutral, $lightness: 30%)
+    )
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: (
+      'color-default-fill': $neutral,
+      'background-color': rgba(0, 0, 0, 0.5)
+    )
+  );
+  @include meta.load-css('../components/Section.scss');
 
-   // Layouts
-   @include meta.load-css('../layouts/Layout.scss');
-   @include meta.load-css('../layouts/Window.scss');
-   @include meta.load-css('../layouts/TitleBar.scss', $with: (
-     'background-color': color.scale($neutral, $lightness: -25%),
-   ));
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': color.scale($neutral, $lightness: -25%))
+  );
 
-   .Layout__content {
-     background-image: url('../../assets/bg-neutral.svg');
-   }
- }
+  .Layout__content {
+    background-image: url('../../assets/bg-neutral.svg');
+  }
+}
diff --git a/tgui/packages/tgui/styles/themes/ntos.scss b/tgui/packages/tgui/styles/themes/ntos.scss
index a1b11c78b987..8b102b477781 100644
--- a/tgui/packages/tgui/styles/themes/ntos.scss
+++ b/tgui/packages/tgui/styles/themes/ntos.scss
@@ -10,28 +10,35 @@ $nanotrasen: #384e68;
 
 @use '../colors.scss' with (
   $fg-map-keys: (),
-  $bg-map-keys: (),
+  $bg-map-keys: ()
 );
 @use '../base.scss' with (
-  $color-bg: color.scale($nanotrasen, $lightness: -45%),
+  $color-bg: color.scale($nanotrasen, $lightness: -45%)
 );
 
 .theme-ntos {
   // Components
-  @include meta.load-css('../components/Button.scss', $with: (
-    'color-default': $nanotrasen,
-    'color-transparent-text': rgba(227, 240, 255, 0.75),
-  ));
-  @include meta.load-css('../components/ProgressBar.scss', $with: (
-    'color-default-fill': $nanotrasen,
-    'background-color': rgba(0, 0, 0, 0.5),
-  ));
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': $nanotrasen,
+      'color-transparent-text': rgba(227, 240, 255, 0.75)
+    )
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: (
+      'color-default-fill': $nanotrasen,
+      'background-color': rgba(0, 0, 0, 0.5)
+    )
+  );
   @include meta.load-css('../components/Section.scss');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: (
-    'background-color': color.scale($nanotrasen, $lightness: -25%),
-  ));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': color.scale($nanotrasen, $lightness: -25%))
+  );
 }
diff --git a/tgui/packages/tgui/styles/themes/paper.scss b/tgui/packages/tgui/styles/themes/paper.scss
index 3bc00789d09c..ea9da08ffbe4 100644
--- a/tgui/packages/tgui/styles/themes/paper.scss
+++ b/tgui/packages/tgui/styles/themes/paper.scss
@@ -13,12 +13,12 @@
   // Commenting out color maps will adjust all colors based on the lightness
   // settings above, but will add extra 10KB to the theme.
   $fg-map-keys: (),
-  $bg-map-keys: (),
+  $bg-map-keys: ()
 );
 @use '../base.scss' with (
   $color-fg: #000000,
   $color-bg: #ffffff,
-  $color-bg-grad-spread: 0%,
+  $color-bg-grad-spread: 0%
 );
 
 $font-size: 24px;
@@ -31,26 +31,33 @@ $font-size: 24px;
 
   // Components
   @include meta.load-css('../components/Tabs.scss');
-  @include meta.load-css('../components/Section.scss', $with: (
-    'background-color': rgba(0, 0, 0, 0.1),
-  ));
-  @include meta.load-css('../components/Button.scss', $with: (
-    'color-default': #E8E4C9,
-    'color-disabled': #363636,
-    'color-selected': #9d0808,
-    'color-caution': #be6209,
-    'color-danger': #9a9d00,
-    'color-transparent-text': rgba(0, 0, 0, 0.5),
-  ));
+  @include meta.load-css(
+    '../components/Section.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.1))
+  );
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': #e8e4c9,
+      'color-disabled': #363636,
+      'color-selected': #9d0808,
+      'color-caution': #be6209,
+      'color-danger': #9a9d00,
+      'color-transparent-text': rgba(0, 0, 0, 0.5)
+    )
+  );
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: (
-    'text-color': rgba(0, 0, 0, 0.75),
-    'background-color': base.$color-bg,
-    'shadow-color-core': rgba(0, 0, 0, 0.25),
-  ));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: (
+      'text-color': rgba(0, 0, 0, 0.75),
+      'background-color': base.$color-bg,
+      'shadow-color-core': rgba(0, 0, 0, 0.25)
+    )
+  );
 
   .PaperInput {
     position: relative;
@@ -60,7 +67,7 @@ $font-size: 24px;
     background: transparent;
     border-bottom: 1px solid #000;
     outline: none;
-    background-color:rgba(255, 255, 62, 0.8);
+    background-color: rgba(255, 255, 62, 0.8);
     padding: 0 4px;
     margin-right: 2px;
     line-height: 17px;
@@ -116,7 +123,7 @@ $font-size: 24px;
       background: transparent;
       border-bottom: 1px solid #000;
       outline: none;
-      background-color:rgba(255, 255, 62, 0.8);
+      background-color: rgba(255, 255, 62, 0.8);
       padding: 0 4px;
       margin-right: 2px;
       line-height: 17px;
@@ -130,7 +137,7 @@ $font-size: 24px;
       background: transparent;
       border-bottom: 1px solid #000;
       outline: none;
-      background-color:rgba(255, 255, 62, 0.8);
+      background-color: rgba(255, 255, 62, 0.8);
       padding: 0 4px;
       margin-right: 2px;
       line-height: 17px;
@@ -146,7 +153,7 @@ $font-size: 24px;
     background: transparent;
     border-bottom: 1px solid #000;
     outline: none;
-    background-color:rgba(255, 255, 62, 0.8);
+    background-color: rgba(255, 255, 62, 0.8);
     padding: 0 4px;
     margin-right: 2px;
     line-height: 17px;
@@ -160,7 +167,7 @@ $font-size: 24px;
       background: transparent;
       border-bottom: 1px solid #000;
       outline: none;
-      background-color:rgba(255, 255, 62, 0.8);
+      background-color: rgba(255, 255, 62, 0.8);
       padding: 0 4px;
       margin-right: 2px;
       line-height: 17px;
diff --git a/tgui/packages/tgui/styles/themes/retro.scss b/tgui/packages/tgui/styles/themes/retro.scss
index 5c2a5f0bdb4e..fcf407157736 100644
--- a/tgui/packages/tgui/styles/themes/retro.scss
+++ b/tgui/packages/tgui/styles/themes/retro.scss
@@ -9,12 +9,12 @@
 @use '../colors.scss' with (
   $primary: #000000,
   $fg-map-keys: (),
-  $bg-map-keys: (),
+  $bg-map-keys: ()
 );
 @use '../base.scss' with (
-  $color-bg: #E8E4C9,
+  $color-bg: #e8e4c9,
   $color-bg-grad-spread: 0%,
-  $border-radius: 0,
+  $border-radius: 0
 );
 
 // A fat warning to anyone who wants to use this: this only half works.
@@ -24,29 +24,34 @@
   @include meta.load-css('../atomic/color.scss');
 
   // Components
-  @include meta.load-css('../components/Button.scss', $with: (
-    'color-default': #E8E4C9,
-    'color-disabled': #363636,
-    'color-selected': #9d0808,
-    'color-caution': #be6209,
-    'color-danger': #9a9d00,
-  ));
-  @include meta.load-css('../components/ProgressBar.scss', $with: (
-    'background-color': rgba(0, 0, 0, 0.5),
-  ));
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': #e8e4c9,
+      'color-disabled': #363636,
+      'color-selected': #9d0808,
+      'color-caution': #be6209,
+      'color-danger': #9a9d00
+    )
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
   @include meta.load-css('../components/Section.scss');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: (
-    'background-color': #585337,
-  ));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #585337)
+  );
 
   .Button {
     font-family: monospace;
     color: #161613;
-    border: base.em(2px) outset #E8E4C9;
+    border: base.em(2px) outset #e8e4c9;
     outline: base.em(1px) solid #161613;
   }
 
diff --git a/tgui/packages/tgui/styles/themes/rounded_base.scss b/tgui/packages/tgui/styles/themes/rounded_base.scss
index 0fc03fe7a613..bb1d1d926720 100644
--- a/tgui/packages/tgui/styles/themes/rounded_base.scss
+++ b/tgui/packages/tgui/styles/themes/rounded_base.scss
@@ -5,12 +5,11 @@
 @use 'sass:meta';
 
 @use '../base.scss' with (
-  $border-radius: 0.16em,
+  $border-radius: 0.16em
 );
 
 //We have to import a copy of every component that reads $border-radius.
 .theme-rounded_base {
-
   @include meta.load-css('../components/Button.scss');
   @include meta.load-css('../components/Input.scss');
   @include meta.load-css('../components/NumberInput.scss');
diff --git a/tgui/packages/tgui/styles/themes/spookyconsole.scss b/tgui/packages/tgui/styles/themes/spookyconsole.scss
index d0c75ed5b189..07fd5b4dbe3d 100644
--- a/tgui/packages/tgui/styles/themes/spookyconsole.scss
+++ b/tgui/packages/tgui/styles/themes/spookyconsole.scss
@@ -7,11 +7,11 @@
   $good: #010005,
   $bad: #970934,
   $fg-map-keys: (),
-  $bg-map-keys: (),
+  $bg-map-keys: ()
 );
 @use '../base.scss' with (
   $color-bg: #240101,
-  $color-bg-grad-spread: 12%,
+  $color-bg-grad-spread: 12%
 );
 
 $updated-bg-map: colors.$bg-map !default;
@@ -21,42 +21,51 @@ $updated-bg-map: map.set($updated-bg-map, 'bad', colors.$bad);
 
 .theme-spookyconsole {
   // Atomic classes
-  @include meta.load-css('../atomic/color.scss', $with: (
-    'bg-map': $updated-bg-map,
-  ));
+  @include meta.load-css(
+    '../atomic/color.scss',
+    $with: ('bg-map': $updated-bg-map)
+  );
 
   // Components
-  @include meta.load-css('../components/Button.scss', $with: (
-    'color-default': #7e0322,
-    'color-disabled': #363636,
-    'color-selected': #610a0a,
-    'color-caution': #1416a3,
-    'color-danger': #5c1e80,
-    'bg-map': $updated-bg-map,
-  ));
-  @include meta.load-css('../components/Dimmer.scss', $with: (
-    'background-dimness': 0.45,
-  ));
-  @include meta.load-css('../components/Input.scss', $with: (
-    'border-color': #473a37,
-  ));
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': #7e0322,
+      'color-disabled': #363636,
+      'color-selected': #610a0a,
+      'color-caution': #1416a3,
+      'color-danger': #5c1e80,
+      'bg-map': $updated-bg-map
+    )
+  );
+  @include meta.load-css(
+    '../components/Dimmer.scss',
+    $with: ('background-dimness': 0.45)
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #473a37)
+  );
   @include meta.load-css('../components/Modal.scss');
-  @include meta.load-css('../components/NoticeBox.scss', $with: (
-    'background-color': #740707,
-  ));
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #740707)
+  );
   @include meta.load-css('../components/NumberInput.scss');
   @include meta.load-css('../components/Section.scss');
   @include meta.load-css('../components/Table.scss');
-  @include meta.load-css('../components/Tooltip.scss', $with: (
-    'background-color': #000000,
-  ));
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #000000)
+  );
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: (
-    'background-color': #6b0808,
-  ));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #6b0808)
+  );
 
   .Layout__content {
     background-image: url('../../assets/bg-spookycomp-compressed.svg');
diff --git a/tgui/packages/tgui/styles/themes/syndicate.scss b/tgui/packages/tgui/styles/themes/syndicate.scss
index b440710969e7..4a547edef9b6 100644
--- a/tgui/packages/tgui/styles/themes/syndicate.scss
+++ b/tgui/packages/tgui/styles/themes/syndicate.scss
@@ -9,11 +9,11 @@
 @use '../colors.scss' with (
   $primary: #397439,
   $fg-map-keys: (),
-  $bg-map-keys: (),
+  $bg-map-keys: ()
 );
 @use '../base.scss' with (
   $color-bg: #550202,
-  $color-bg-grad-spread: 6%,
+  $color-bg-grad-spread: 6%
 );
 
 .theme-syndicate {
@@ -21,36 +21,45 @@
   @include meta.load-css('../atomic/color.scss');
 
   // Components
-  @include meta.load-css('../components/Button.scss', $with: (
-    'color-default': colors.$primary,
-    'color-disabled': #363636,
-    'color-selected': #9d0808,
-    'color-caution': #be6209,
-    'color-danger': #9a9d00,
-  ));
-  @include meta.load-css('../components/Input.scss', $with: (
-    'border-color': #87ce87,
-  ));
-  @include meta.load-css('../components/NoticeBox.scss', $with: (
-    'background-color': #910101,
-  ));
-  @include meta.load-css('../components/NumberInput.scss', $with: (
-    'border-color': #87ce87,
-  ));
-  @include meta.load-css('../components/ProgressBar.scss', $with: (
-    'background-color': rgba(0, 0, 0, 0.5),
-  ));
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': colors.$primary,
+      'color-disabled': #363636,
+      'color-selected': #9d0808,
+      'color-caution': #be6209,
+      'color-danger': #9a9d00
+    )
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #87ce87)
+  );
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #910101)
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #87ce87)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
   @include meta.load-css('../components/Section.scss');
-  @include meta.load-css('../components/Tooltip.scss', $with: (
-    'background-color': #4a0202,
-  ));
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #4a0202)
+  );
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: (
-    'background-color': #910101,
-  ));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #910101)
+  );
 
   .Layout__content {
     background-image: url('../../assets/bg-syndicate.svg');
diff --git a/tgui/packages/tgui/styles/themes/wizard.scss b/tgui/packages/tgui/styles/themes/wizard.scss
index 4b42f3876e15..9c4056cc1289 100644
--- a/tgui/packages/tgui/styles/themes/wizard.scss
+++ b/tgui/packages/tgui/styles/themes/wizard.scss
@@ -3,57 +3,66 @@
  * SPDX-License-Identifier: MIT
  */
 
- @use 'sass:color';
- @use 'sass:meta';
+@use 'sass:color';
+@use 'sass:meta';
 
- @use '../colors.scss' with (
-   $primary: #1596b6,
-   $fg-map-keys: (),
-   $bg-map-keys: (),
- );
- @use '../base.scss' with (
-   $color-bg: #213e4e,
-   $color-bg-grad-spread: 6%,
-   $border-radius: 2px,
- );
+@use '../colors.scss' with (
+  $primary: #1596b6,
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: #213e4e,
+  $color-bg-grad-spread: 6%,
+  $border-radius: 2px
+);
 
- .theme-wizard {
-   // Atomic classes
-   @include meta.load-css('../atomic/color.scss');
+.theme-wizard {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
 
-   // Components
-   @include meta.load-css('../components/Button.scss', $with: (
-     'color-default': colors.$primary,
-     'color-disabled': #02426d,
-     'color-selected': #465899,
-     'color-caution': #be6209,
-     'color-danger': #b30707,
-   ));
-   @include meta.load-css('../components/Input.scss', $with: (
-     'border-color': #404b6e,
-   ));
-   @include meta.load-css('../components/NoticeBox.scss', $with: (
-     'background-color': #a82d55,
-   ));
-   @include meta.load-css('../components/NumberInput.scss', $with: (
-     'border-color': #404b6e,
-   ));
-   @include meta.load-css('../components/ProgressBar.scss', $with: (
-     'background-color': rgba(0, 0, 0, 0.5),
-   ));
-   @include meta.load-css('../components/Section.scss');
-   @include meta.load-css('../components/Tooltip.scss', $with: (
-     'background-color': #2da848,
-   ));
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': colors.$primary,
+      'color-disabled': #02426d,
+      'color-selected': #465899,
+      'color-caution': #be6209,
+      'color-danger': #b30707
+    )
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #404b6e)
+  );
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #a82d55)
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #404b6e)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
+  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #2da848)
+  );
 
-   // Layouts
-   @include meta.load-css('../layouts/Layout.scss');
-   @include meta.load-css('../layouts/Window.scss');
-   @include meta.load-css('../layouts/TitleBar.scss', $with: (
-     'background-color': #1b9e26,
-   ));
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #1b9e26)
+  );
 
-   .Layout__content {
-     background-image: url('../../assets/bg-wizard.svg');
-   }
- }
+  .Layout__content {
+    background-image: url('../../assets/bg-wizard.svg');
+  }
+}
diff --git a/tgui/tsconfig.json b/tgui/tsconfig.json
index b00f4138cf95..c149d1302a60 100644
--- a/tgui/tsconfig.json
+++ b/tgui/tsconfig.json
@@ -17,8 +17,5 @@
     "strictNullChecks": true,
     "target": "ES3"
   },
-  "include": [
-    "./*.d.ts",
-    "./packages"
-  ]
+  "include": ["./*.d.ts", "./packages"]
 }
diff --git a/tgui/webpack.config.js b/tgui/webpack.config.js
index 1aa326eee878..05bf4c96f24d 100644
--- a/tgui/webpack.config.js
+++ b/tgui/webpack.config.js
@@ -9,7 +9,7 @@ const path = require('path');
 const ExtractCssPlugin = require('mini-css-extract-plugin');
 const { createBabelConfig } = require('./babel.config.js');
 
-const createStats = verbose => ({
+const createStats = (verbose) => ({
   assets: verbose,
   builtAt: verbose,
   cached: false,
@@ -32,14 +32,8 @@ module.exports = (env = {}, argv) => {
     context: path.resolve(__dirname),
     target: ['web', 'es3', 'browserslist:ie 8'],
     entry: {
-      'tgui': [
-        './packages/tgui-polyfill',
-        './packages/tgui',
-      ],
-      'tgui-panel': [
-        './packages/tgui-polyfill',
-        './packages/tgui-panel',
-      ],
+      tgui: ['./packages/tgui-polyfill', './packages/tgui'],
+      'tgui-panel': ['./packages/tgui-polyfill', './packages/tgui-panel'],
     },
     output: {
       path: argv.useTmpFolder
diff --git a/tgui/yarn.lock b/tgui/yarn.lock
index f4f74d964db3..967ef2e3b1c8 100644
--- a/tgui/yarn.lock
+++ b/tgui/yarn.lock
@@ -3678,6 +3678,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-config-prettier@npm:^9.1.0":
+  version: 9.1.0
+  resolution: "eslint-config-prettier@npm:9.1.0"
+  peerDependencies:
+    eslint: ">=7.0.0"
+  bin:
+    eslint-config-prettier: bin/cli.js
+  checksum: 9229b768c879f500ee54ca05925f31b0c0bafff3d9f5521f98ff05127356de78c81deb9365c86a5ec4efa990cb72b74df8612ae15965b14136044c73e1f6a907
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-radar@npm:^0.2.1":
   version: 0.2.1
   resolution: "eslint-plugin-radar@npm:0.2.1"
@@ -6853,6 +6864,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier@npm:^3.2.5":
+  version: 3.2.5
+  resolution: "prettier@npm:3.2.5"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: 2ee4e1417572372afb7a13bb446b34f20f1bf1747db77cf6ccaf57a9be005f2f15c40f903d41a6b79eec3f57fff14d32a20fb6dee1f126da48908926fe43c311
+  languageName: node
+  linkType: hard
+
 "pretty-format@npm:^27.0.0, pretty-format@npm:^27.0.6":
   version: 27.0.6
   resolution: "pretty-format@npm:27.0.6"
@@ -8182,6 +8202,7 @@ resolve@^2.0.0-next.3:
     common: "workspace:*"
     css-loader: ^5.2.7
     eslint: ^7.32.0
+    eslint-config-prettier: ^9.1.0
     eslint-plugin-radar: ^0.2.1
     eslint-plugin-react: ^7.24.0
     eslint-plugin-unused-imports: ^1.1.4
@@ -8191,6 +8212,7 @@ resolve@^2.0.0-next.3:
     jest-circus: ^27.0.6
     jsdom: ^16.7.0
     mini-css-extract-plugin: ^1.6.2
+    prettier: ^3.2.5
     sass: ^1.37.5
     sass-loader: ^11.1.1
     style-loader: ^2.0.0
diff --git a/tools/build/build.js b/tools/build/build.js
index 862e0cdfde94..2a2226fd3788 100755
--- a/tools/build/build.js
+++ b/tools/build/build.js
@@ -6,80 +6,78 @@
  * https://github.com/stylemistake/juke-build
  */
 
-import fs from 'fs';
-import Juke from './juke/index.js';
-import { DreamDaemon, DreamMaker } from './lib/byond.js';
-import { yarn } from './lib/yarn.js';
+import fs from "fs";
+import Juke from "./juke/index.js";
+import { DreamDaemon, DreamMaker } from "./lib/byond.js";
+import { yarn } from "./lib/yarn.js";
 
-Juke.chdir('../..', import.meta.url);
+Juke.chdir("../..", import.meta.url);
 Juke.setup({ file: import.meta.url }).then((code) => {
   // We're using the currently available quirk in Juke Build, which
   // prevents it from exiting on Windows, to wait on errors.
-  if (code !== 0 && process.argv.includes('--wait-on-error')) {
-    Juke.logger.error('Please inspect the error and close the window.');
+  if (code !== 0 && process.argv.includes("--wait-on-error")) {
+    Juke.logger.error("Please inspect the error and close the window.");
     return;
   }
   process.exit(code);
 });
 
-const DME_NAME = 'daedalus';
+const DME_NAME = "daedalus";
 
 export const DefineParameter = new Juke.Parameter({
-  type: 'string[]',
-  alias: 'D',
+  type: "string[]",
+  alias: "D",
 });
 
 export const PortParameter = new Juke.Parameter({
-  type: 'string',
-  alias: 'p',
+  type: "string",
+  alias: "p",
 });
 
-export const CiParameter = new Juke.Parameter({ type: 'boolean' });
+export const CiParameter = new Juke.Parameter({ type: "boolean" });
 
 export const WarningParameter = new Juke.Parameter({
-  type: 'string[]',
-  alias: 'W',
+  type: "string[]",
+  alias: "W",
 });
 
 export const DmMapsIncludeTarget = new Juke.Target({
   executes: async () => {
     const folders = [
-      ...Juke.glob('_maps/RandomRuins/**/*.dmm'),
-      ...Juke.glob('_maps/RandomZLevels/**/*.dmm'),
-      ...Juke.glob('_maps/shuttles/**/*.dmm'),
-      ...Juke.glob('_maps/templates/**/*.dmm'),
+      ...Juke.glob("_maps/RandomRuins/**/*.dmm"),
+      ...Juke.glob("_maps/RandomZLevels/**/*.dmm"),
+      ...Juke.glob("_maps/shuttles/**/*.dmm"),
+      ...Juke.glob("_maps/templates/**/*.dmm"),
     ];
-    const content = folders
-      .map((file) => file.replace('_maps/', ''))
-      .map((file) => `#include "${file}"`)
-      .join('\n') + '\n';
-    fs.writeFileSync('_maps/templates.dm', content);
+    const content =
+      folders
+        .map((file) => file.replace("_maps/", ""))
+        .map((file) => `#include "${file}"`)
+        .join("\n") + "\n";
+    fs.writeFileSync("_maps/templates.dm", content);
   },
 });
 
 export const DmTarget = new Juke.Target({
   parameters: [DefineParameter],
   dependsOn: ({ get }) => [
-    get(DefineParameter).includes('ALL_MAPS') && DmMapsIncludeTarget,
+    get(DefineParameter).includes("ALL_MAPS") && DmMapsIncludeTarget,
   ],
   inputs: [
-    '_maps/map_files/generic/**',
-    'code/**',
-    'goon/**',
-    'html/**',
-    'icons/**',
-    'interface/**',
-    'modular_pariah/**', //PARIAH EDIT
+    "_maps/map_files/generic/**",
+    "code/**",
+    "goon/**",
+    "html/**",
+    "icons/**",
+    "interface/**",
+    "modular_pariah/**", //PARIAH EDIT
     `${DME_NAME}.dme`,
   ],
-  outputs: [
-    `${DME_NAME}.dmb`,
-    `${DME_NAME}.rsc`,
-  ],
+  outputs: [`${DME_NAME}.dmb`, `${DME_NAME}.rsc`],
   executes: async ({ get }) => {
     await DreamMaker(`${DME_NAME}.dme`, {
-      defines: ['CBT', ...get(DefineParameter)],
-      warningsAsErrors: get(WarningParameter).includes('error'),
+      defines: ["CBT", ...get(DefineParameter)],
+      warningsAsErrors: get(WarningParameter).includes("error"),
     });
   },
 });
@@ -87,27 +85,29 @@ export const DmTarget = new Juke.Target({
 export const DmTestTarget = new Juke.Target({
   parameters: [DefineParameter],
   dependsOn: ({ get }) => [
-    get(DefineParameter).includes('ALL_MAPS') && DmMapsIncludeTarget,
+    get(DefineParameter).includes("ALL_MAPS") && DmMapsIncludeTarget,
   ],
   executes: async ({ get }) => {
     fs.copyFileSync(`${DME_NAME}.dme`, `${DME_NAME}.test.dme`);
     await DreamMaker(`${DME_NAME}.test.dme`, {
-      defines: ['CBT', 'CIBUILDING', ...get(DefineParameter)],
-      warningsAsErrors: get(WarningParameter).includes('error'),
+      defines: ["CBT", "CIBUILDING", ...get(DefineParameter)],
+      warningsAsErrors: get(WarningParameter).includes("error"),
     });
-    Juke.rm('data/logs/ci', { recursive: true });
+    Juke.rm("data/logs/ci", { recursive: true });
     await DreamDaemon(
       `${DME_NAME}.test.dmb`,
-      '-close', '-trusted', '-verbose',
-      '-params', 'log-directory=ci'
+      "-close",
+      "-trusted",
+      "-verbose",
+      "-params",
+      "log-directory=ci",
     );
-    Juke.rm('*.test.*');
+    Juke.rm("*.test.*");
     try {
-      const cleanRun = fs.readFileSync('data/logs/ci/clean_run.lk', 'utf-8');
+      const cleanRun = fs.readFileSync("data/logs/ci/clean_run.lk", "utf-8");
       console.log(cleanRun);
-    }
-    catch (err) {
-      Juke.logger.error('Test run was not clean, exiting');
+    } catch (err) {
+      Juke.logger.error("Test run was not clean, exiting");
       throw new Juke.ExitCode(1);
     }
   },
@@ -116,117 +116,122 @@ export const DmTestTarget = new Juke.Target({
 export const AutowikiTarget = new Juke.Target({
   parameters: [DefineParameter],
   dependsOn: ({ get }) => [
-    get(DefineParameter).includes('ALL_MAPS') && DmMapsIncludeTarget,
-  ],
-  outputs: [
-    'data/autowiki_edits.txt',
+    get(DefineParameter).includes("ALL_MAPS") && DmMapsIncludeTarget,
   ],
+  outputs: ["data/autowiki_edits.txt"],
   executes: async ({ get }) => {
     fs.copyFileSync(`${DME_NAME}.dme`, `${DME_NAME}.test.dme`);
     await DreamMaker(`${DME_NAME}.test.dme`, {
-      defines: ['CBT', 'AUTOWIKI', ...get(DefineParameter)],
-      warningsAsErrors: get(WarningParameter).includes('error'),
+      defines: ["CBT", "AUTOWIKI", ...get(DefineParameter)],
+      warningsAsErrors: get(WarningParameter).includes("error"),
     });
-    Juke.rm('data/autowiki_edits.txt');
-    Juke.rm('data/autowiki_files', { recursive: true });
-    Juke.rm('data/logs/ci', { recursive: true });
+    Juke.rm("data/autowiki_edits.txt");
+    Juke.rm("data/autowiki_files", { recursive: true });
+    Juke.rm("data/logs/ci", { recursive: true });
     await DreamDaemon(
       `${DME_NAME}.test.dmb`,
-      '-close', '-trusted', '-verbose',
-      '-params', 'log-directory=ci',
+      "-close",
+      "-trusted",
+      "-verbose",
+      "-params",
+      "log-directory=ci",
     );
-    Juke.rm('*.test.*');
-    if (!fs.existsSync('data/autowiki_edits.txt')) {
-      Juke.logger.error('Autowiki did not generate an output, exiting');
+    Juke.rm("*.test.*");
+    if (!fs.existsSync("data/autowiki_edits.txt")) {
+      Juke.logger.error("Autowiki did not generate an output, exiting");
       throw new Juke.ExitCode(1);
     }
   },
-})
+});
 
 export const YarnTarget = new Juke.Target({
   parameters: [CiParameter],
   inputs: [
-    'tgui/.yarn/+(cache|releases|plugins|sdks)/**/*',
-    'tgui/**/package.json',
-    'tgui/yarn.lock',
+    "tgui/.yarn/+(cache|releases|plugins|sdks)/**/*",
+    "tgui/**/package.json",
+    "tgui/yarn.lock",
   ],
-  outputs: [
-    'tgui/.yarn/install-target',
-  ],
-  executes: ({ get }) => yarn('install', get(CiParameter) && '--immutable'),
+  outputs: ["tgui/.yarn/install-target"],
+  executes: ({ get }) => yarn("install", get(CiParameter) && "--immutable"),
 });
 
 export const TgFontTarget = new Juke.Target({
   dependsOn: [YarnTarget],
   inputs: [
-    'tgui/.yarn/install-target',
-    'tgui/packages/tgfont/**/*.+(js|cjs|svg)',
-    'tgui/packages/tgfont/package.json',
+    "tgui/.yarn/install-target",
+    "tgui/packages/tgfont/**/*.+(js|cjs|svg)",
+    "tgui/packages/tgfont/package.json",
   ],
   outputs: [
-    'tgui/packages/tgfont/dist/tgfont.css',
-    'tgui/packages/tgfont/dist/tgfont.eot',
-    'tgui/packages/tgfont/dist/tgfont.woff2',
+    "tgui/packages/tgfont/dist/tgfont.css",
+    "tgui/packages/tgfont/dist/tgfont.eot",
+    "tgui/packages/tgfont/dist/tgfont.woff2",
   ],
-  executes: () => yarn('tgfont:build'),
+  executes: () => yarn("tgfont:build"),
 });
 
 export const TguiTarget = new Juke.Target({
   dependsOn: [YarnTarget],
   inputs: [
-    'tgui/.yarn/install-target',
-    'tgui/webpack.config.js',
-    'tgui/**/package.json',
-    'tgui/packages/**/*.+(js|cjs|ts|tsx|scss)',
+    "tgui/.yarn/install-target",
+    "tgui/webpack.config.js",
+    "tgui/**/package.json",
+    "tgui/packages/**/*.+(js|cjs|ts|tsx|scss)",
   ],
   outputs: [
-    'tgui/public/tgui.bundle.css',
-    'tgui/public/tgui.bundle.js',
-    'tgui/public/tgui-panel.bundle.css',
-    'tgui/public/tgui-panel.bundle.js',
+    "tgui/public/tgui.bundle.css",
+    "tgui/public/tgui.bundle.js",
+    "tgui/public/tgui-panel.bundle.css",
+    "tgui/public/tgui-panel.bundle.js",
   ],
-  executes: () => yarn('tgui:build'),
+  executes: () => yarn("tgui:build"),
 });
 
 export const TguiEslintTarget = new Juke.Target({
   parameters: [CiParameter],
   dependsOn: [YarnTarget],
-  executes: ({ get }) => yarn('tgui:lint', !get(CiParameter) && '--fix'),
+  executes: ({ get }) => yarn("tgui:lint", !get(CiParameter) && "--fix"),
+});
+
+export const TguiPrettierTarget = new Juke.Target({
+  dependsOn: [YarnTarget],
+  executes: () => yarn("tgui:prettier"),
 });
 
 export const TguiSonarTarget = new Juke.Target({
   dependsOn: [YarnTarget],
-  executes: () => yarn('tgui:sonar'),
+  executes: () => yarn("tgui:sonar"),
 });
 
 export const TguiTscTarget = new Juke.Target({
   dependsOn: [YarnTarget],
-  executes: () => yarn('tgui:tsc'),
+  executes: () => yarn("tgui:tsc"),
 });
 
 export const TguiTestTarget = new Juke.Target({
   parameters: [CiParameter],
   dependsOn: [YarnTarget],
-  executes: ({ get }) => yarn(`tgui:test-${get(CiParameter) ? 'ci' : 'simple'}`),
+  executes: ({ get }) =>
+    yarn(`tgui:test-${get(CiParameter) ? "ci" : "simple"}`),
 });
 
 export const TguiLintTarget = new Juke.Target({
-  dependsOn: [YarnTarget, TguiEslintTarget, TguiTscTarget],
+  dependsOn: [YarnTarget, TguiPrettierTarget, TguiEslintTarget, TguiTscTarget],
 });
 
 export const TguiDevTarget = new Juke.Target({
   dependsOn: [YarnTarget],
-  executes: ({ args }) => yarn('tgui:dev', ...args),
+  executes: ({ args }) => yarn("tgui:dev", ...args),
 });
 
 export const TguiAnalyzeTarget = new Juke.Target({
   dependsOn: [YarnTarget],
-  executes: () => yarn('tgui:analyze'),
+  executes: () => yarn("tgui:analyze"),
 });
 
 export const TguiBenchTarget = new Juke.Target({
   dependsOn: [YarnTarget],
-  executes: () => yarn('tgui:bench'),
+  executes: () => yarn("tgui:bench"),
 });
 
 export const TestTarget = new Juke.Target({
@@ -244,8 +249,8 @@ export const BuildTarget = new Juke.Target({
 export const ServerTarget = new Juke.Target({
   dependsOn: [BuildTarget],
   executes: async ({ get }) => {
-    const port = get(PortParameter) || '1337';
-    await DreamDaemon(`${DME_NAME}.dmb`, port, '-trusted');
+    const port = get(PortParameter) || "1337";
+    await DreamDaemon(`${DME_NAME}.dmb`, port, "-trusted");
   },
 });
 
@@ -255,23 +260,23 @@ export const AllTarget = new Juke.Target({
 
 export const TguiCleanTarget = new Juke.Target({
   executes: async () => {
-    Juke.rm('tgui/public/.tmp', { recursive: true });
-    Juke.rm('tgui/public/*.map');
-    Juke.rm('tgui/public/*.{chunk,bundle,hot-update}.*');
-    Juke.rm('tgui/packages/tgfont/dist', { recursive: true });
-    Juke.rm('tgui/.yarn/{cache,unplugged,webpack}', { recursive: true });
-    Juke.rm('tgui/.yarn/build-state.yml');
-    Juke.rm('tgui/.yarn/install-state.gz');
-    Juke.rm('tgui/.yarn/install-target');
-    Juke.rm('tgui/.pnp.*');
+    Juke.rm("tgui/public/.tmp", { recursive: true });
+    Juke.rm("tgui/public/*.map");
+    Juke.rm("tgui/public/*.{chunk,bundle,hot-update}.*");
+    Juke.rm("tgui/packages/tgfont/dist", { recursive: true });
+    Juke.rm("tgui/.yarn/{cache,unplugged,webpack}", { recursive: true });
+    Juke.rm("tgui/.yarn/build-state.yml");
+    Juke.rm("tgui/.yarn/install-state.gz");
+    Juke.rm("tgui/.yarn/install-target");
+    Juke.rm("tgui/.pnp.*");
   },
 });
 
 export const CleanTarget = new Juke.Target({
   dependsOn: [TguiCleanTarget],
   executes: async () => {
-    Juke.rm('*.{dmb,rsc}');
-    Juke.rm('_maps/templates.dm');
+    Juke.rm("*.{dmb,rsc}");
+    Juke.rm("_maps/templates.dm");
   },
 });
 
@@ -281,10 +286,10 @@ export const CleanTarget = new Juke.Target({
 export const CleanAllTarget = new Juke.Target({
   dependsOn: [CleanTarget],
   executes: async () => {
-    Juke.logger.info('Cleaning up data/logs');
-    Juke.rm('data/logs', { recursive: true });
-    Juke.logger.info('Cleaning up global yarn cache');
-    await yarn('cache', 'clean', '--all');
+    Juke.logger.info("Cleaning up data/logs");
+    Juke.rm("data/logs", { recursive: true });
+    Juke.logger.info("Cleaning up global yarn cache");
+    await yarn("cache", "clean", "--all");
   },
 });
 
@@ -295,18 +300,18 @@ export const CleanAllTarget = new Juke.Target({
  */
 const prependDefines = (...defines) => {
   const dmeContents = fs.readFileSync(`${DME_NAME}.dme`);
-  const textToWrite = defines.map(define => `#define ${define}\n`);
+  const textToWrite = defines.map((define) => `#define ${define}\n`);
   fs.writeFileSync(`${DME_NAME}.dme`, `${textToWrite}\n${dmeContents}`);
 };
 
 export const TgsTarget = new Juke.Target({
   dependsOn: [TguiTarget],
   executes: async () => {
-    Juke.logger.info('Prepending TGS define');
-    prependDefines('TGS');
+    Juke.logger.info("Prepending TGS define");
+    prependDefines("TGS");
   },
 });
 
-const TGS_MODE = process.env.CBT_BUILD_MODE === 'TGS';
+const TGS_MODE = process.env.CBT_BUILD_MODE === "TGS";
 
 export default TGS_MODE ? TgsTarget : BuildTarget;