From a0cfc6eb97bbb52544d8e78de61c333659db264a Mon Sep 17 00:00:00 2001
From: Iajret <HellDog15@gmail.com>
Date: Tue, 12 Dec 2023 00:34:32 +0300
Subject: [PATCH] Revert "[MIRROR] Ports React [READY] [MDB IGNORE] (#1054)"

This reverts commit 07cf8853f3369bef9f0b5a87c6842c44669657dc.
---
 tgui/.eslintignore                            |   2 +-
 tgui/.yarnrc.yml                              |   5 +
 tgui/README.md                                |   8 +-
 tgui/babel.config.js                          |  40 ++-
 tgui/docs/component-reference.md              |  14 +-
 tgui/package.json                             |   4 +-
 tgui/packages/common/keys.ts                  |  10 +-
 tgui/packages/common/react.ts                 |  15 +-
 tgui/packages/common/redux.ts                 |  20 ++
 tgui/packages/tgui-bench/package.json         |   5 +-
 .../packages/tgui-bench/tests/Button.test.tsx |  23 ++
 .../tgui-bench/tests/DisposalUnit.test.tsx    |  12 +-
 tgui/packages/tgui-dev-server/package.json    |   2 +-
 tgui/packages/tgui-panel/Panel.jsx            |  16 +-
 .../tgui-panel/audio/NowPlayingWidget.jsx     |  16 +-
 tgui/packages/tgui-panel/audio/hooks.js       |   8 +-
 .../tgui-panel/chat/ChatPageSettings.jsx      |   8 +-
 tgui/packages/tgui-panel/chat/ChatPanel.jsx   |   8 +-
 tgui/packages/tgui-panel/chat/ChatTabs.jsx    |  22 +-
 tgui/packages/tgui-panel/chat/renderer.jsx    |   2 +-
 tgui/packages/tgui-panel/game/hooks.js        |   6 +-
 tgui/packages/tgui-panel/index.jsx            |   8 +-
 tgui/packages/tgui-panel/package.json         |   4 +-
 .../tgui-panel/ping/PingIndicator.jsx         |   6 +-
 .../tgui-panel/settings/SettingsPanel.jsx     |  32 +--
 tgui/packages/tgui-panel/settings/hooks.js    |   8 +-
 tgui/packages/tgui-polyfill/1-misc.js         |   5 +
 tgui/packages/tgui-polyfill/package.json      |   2 +-
 tgui/packages/tgui-say/TguiSay.tsx            |  14 +-
 tgui/packages/tgui-say/package.json           |   3 +-
 tgui/packages/tgui/backend.ts                 |   8 -
 .../tgui/components/AnimatedNumber.tsx        |   5 +-
 tgui/packages/tgui/components/Autofocus.tsx   |  26 +-
 tgui/packages/tgui/components/Blink.jsx       |   6 +-
 .../tgui/components/BodyZoneSelector.tsx      |  29 ++-
 tgui/packages/tgui/components/Box.tsx         | 187 +++++++-------
 tgui/packages/tgui/components/Button.jsx      |  41 +++-
 tgui/packages/tgui/components/ByondUi.jsx     |  16 +-
 .../tgui/components/{Chart.tsx => Chart.jsx}  | 116 ++++-----
 tgui/packages/tgui/components/Collapsible.jsx |   2 +-
 tgui/packages/tgui/components/ColorBox.jsx    |   4 +-
 .../tgui/components/DraggableControl.jsx      |   8 +-
 tgui/packages/tgui/components/Dropdown.tsx    |  48 ++--
 .../packages/tgui/components/FakeTerminal.jsx |   2 +-
 tgui/packages/tgui/components/FitText.tsx     |  15 +-
 tgui/packages/tgui/components/Flex.tsx        |  81 +++---
 tgui/packages/tgui/components/Grid.jsx        |   5 +
 tgui/packages/tgui/components/Icon.tsx        |  27 +-
 .../tgui/components/InfinitePlane.jsx         |  30 +--
 tgui/packages/tgui/components/Input.jsx       |   6 +-
 tgui/packages/tgui/components/KeyListener.tsx |   6 +-
 tgui/packages/tgui/components/Knob.jsx        |  10 +-
 tgui/packages/tgui/components/LabeledList.tsx |  35 ++-
 tgui/packages/tgui/components/MenuBar.tsx     |   8 +-
 tgui/packages/tgui/components/NoticeBox.jsx   |   4 +-
 tgui/packages/tgui/components/NumberInput.jsx |  34 ++-
 tgui/packages/tgui/components/Popper.tsx      |  21 +-
 .../{ProgressBar.tsx => ProgressBar.jsx}      |  49 ++--
 .../tgui/components/RestrictedInput.jsx       |   6 +-
 tgui/packages/tgui/components/RoundGauge.jsx  |  11 +-
 tgui/packages/tgui/components/Section.tsx     | 145 ++++++-----
 tgui/packages/tgui/components/Slider.jsx      |   5 +
 tgui/packages/tgui/components/Stack.tsx       |  29 +--
 .../tgui/components/StyleableSection.tsx      |  27 +-
 tgui/packages/tgui/components/Table.jsx       |   8 +-
 .../tgui/components/{Tabs.tsx => Tabs.jsx}    |  32 +--
 tgui/packages/tgui/components/TextArea.jsx    |   7 +-
 tgui/packages/tgui/components/TimeDisplay.jsx |   2 +-
 tgui/packages/tgui/components/Tooltip.tsx     |  21 +-
 .../tgui/components/TrackOutsideClicks.tsx    |   8 +-
 tgui/packages/tgui/debug/hooks.js             |   4 +-
 tgui/packages/tgui/drag.ts                    |   4 +-
 .../tgui/interfaces/AdminBookViewer.tsx       |   2 +-
 tgui/packages/tgui/interfaces/AdminFax.jsx    |   2 +-
 tgui/packages/tgui/interfaces/Adminhelp.tsx   |   4 +-
 tgui/packages/tgui/interfaces/AirAlarm.tsx    |   2 +-
 .../tgui/interfaces/AntagInfoAssaultops.tsx   |   6 +-
 .../tgui/interfaces/AntagInfoDemon.tsx        |   2 +-
 .../tgui/interfaces/AntagInfoGlitch.tsx       |   2 +-
 .../tgui/interfaces/AntagInfoHeretic.tsx      |   4 +-
 .../tgui/interfaces/AntagInfoMalf.tsx         |   8 +-
 tgui/packages/tgui/interfaces/ApcControl.jsx  |   3 +
 .../tgui/interfaces/ApprenticeContract.tsx    |   4 +-
 .../packages/tgui/interfaces/Biogenerator.tsx |   6 +-
 tgui/packages/tgui/interfaces/Canvas.tsx      |  28 ++-
 tgui/packages/tgui/interfaces/Cargo.jsx       |   4 +-
 .../tgui/interfaces/CentcomPodLauncher.jsx    |  30 +--
 tgui/packages/tgui/interfaces/Changelog.jsx   |   6 +-
 tgui/packages/tgui/interfaces/ChemFilter.tsx  |   2 +-
 tgui/packages/tgui/interfaces/ChemMaster.tsx  |   8 +-
 .../tgui/interfaces/ChemSeparator.tsx         |   4 +-
 .../tgui/interfaces/CircuitAdminPanel.tsx     |   2 +-
 .../tgui/interfaces/CircuitSignalHandler.tsx  |   2 +-
 .../tgui/interfaces/ClockworkResearch.tsx     |  10 +-
 .../tgui/interfaces/ClockworkSlab.jsx         |   6 +-
 tgui/packages/tgui/interfaces/CrewConsole.jsx |   2 +-
 .../tgui/interfaces/DepartmentOrders.tsx      |   5 +-
 .../tgui/interfaces/DestructiveAnalyzer.tsx   |  10 +-
 .../DnaConsole/DnaConsoleSequencer.jsx        |   2 +-
 .../packages/tgui/interfaces/Electrolyzer.tsx |   3 +-
 .../tgui/interfaces/ElevatorPanel.tsx         |  10 +-
 .../tgui/interfaces/ExodroneConsole.tsx       |  23 +-
 .../interfaces/Fabrication/DesignBrowser.tsx  |  14 +-
 .../tgui/interfaces/Fabrication/SearchBar.tsx |   2 +-
 tgui/packages/tgui/interfaces/Fabricator.tsx  |   2 +-
 tgui/packages/tgui/interfaces/FishingRod.tsx  |  14 +-
 .../packages/tgui/interfaces/GlassBlowing.tsx |   5 +-
 .../tgui/interfaces/GreyscaleModifyMenu.tsx   |  14 +-
 tgui/packages/tgui/interfaces/HoloPay.tsx     |   2 +-
 .../interfaces/Hypertorus/Temperatures.tsx    |   8 +-
 tgui/packages/tgui/interfaces/IVDrip.tsx      |   5 +-
 tgui/packages/tgui/interfaces/InfuserBook.tsx |   4 +-
 .../IntegratedCircuit/ComponentMenu.jsx       |   6 +-
 .../IntegratedCircuit/DisplayComponent.jsx    |   6 +-
 .../IntegratedCircuit/ObjectComponent.jsx     |   6 +-
 .../interfaces/IntegratedCircuit/Port.jsx     |   6 +-
 .../IntegratedCircuit/VariableMenu.jsx        |   6 +-
 .../interfaces/IntegratedCircuit/index.jsx    |  16 +-
 .../tgui/interfaces/InteractionMenu.tsx       |  13 +-
 .../packages/tgui/interfaces/JobSelection.tsx |  57 +++--
 tgui/packages/tgui/interfaces/Lawpanel.tsx    |   2 +-
 .../packages/tgui/interfaces/LibraryAdmin.tsx |   2 +-
 .../tgui/interfaces/LuaEditor/Log.jsx         |   2 +-
 .../tgui/interfaces/LuaEditor/index.jsx       |   4 +-
 tgui/packages/tgui/interfaces/MODsuit.tsx     |  15 +-
 tgui/packages/tgui/interfaces/MafiaPanel.tsx  |  12 +-
 .../tgui/interfaces/MarkdownViewer.tsx        |   2 +-
 tgui/packages/tgui/interfaces/MassSpec.jsx    |   4 +-
 .../tgui/interfaces/Mecha/ModulesPane.tsx     |  18 +-
 tgui/packages/tgui/interfaces/Mecha/index.tsx |   4 +-
 tgui/packages/tgui/interfaces/MemoryPanel.jsx |   8 +-
 tgui/packages/tgui/interfaces/NavBeacon.tsx   |   2 +-
 .../tgui/interfaces/NtosEmojipedia.jsx        |   3 +
 .../interfaces/NtosMessenger/ChatScreen.tsx   |   4 +-
 tgui/packages/tgui/interfaces/NtosNotepad.tsx |   6 +-
 .../tgui/interfaces/NtosPhysScanner.jsx       |   2 +-
 .../tgui/interfaces/NtosPortraitPrinter.jsx   |   8 +-
 tgui/packages/tgui/interfaces/NtosRadar.tsx   |  10 +-
 .../packages/tgui/interfaces/OreContainer.tsx |   3 +-
 .../tgui/interfaces/OreRedemptionMachine.jsx  |   3 +-
 .../packages/tgui/interfaces/OutfitEditor.jsx |  14 +-
 .../tgui/interfaces/OutfitManager.jsx         |   8 +-
 .../tgui/interfaces/PaiInterface/System.tsx   |   2 +-
 .../tgui/interfaces/PaintingAdminPanel.tsx    |  10 +-
 .../tgui/interfaces/Pandemic/Symptom.tsx      |   2 +-
 tgui/packages/tgui/interfaces/PaperSheet.tsx  |  20 +-
 .../tgui/interfaces/PersonalCrafting.tsx      |  22 +-
 .../tgui/interfaces/PlaneMasterDebug.tsx      |  12 +-
 .../tgui/interfaces/PlayerTicketHistory.tsx   |   4 +-
 .../tgui/interfaces/PortraitPicker.jsx        |   3 +-
 .../packages/tgui/interfaces/PowerMonitor.jsx |   5 +
 .../interfaces/PreferencesMenu/AntagsPage.tsx |   8 +-
 .../PreferencesMenu/GamePreferencesPage.tsx   |  12 +-
 .../interfaces/PreferencesMenu/JobsPage.tsx   |  44 ++--
 .../PreferencesMenu/KeybindingsPage.tsx       |   8 +-
 .../interfaces/PreferencesMenu/LimbsPage.tsx  |   8 +-
 .../interfaces/PreferencesMenu/MainPage.tsx   |  20 +-
 .../interfaces/PreferencesMenu/PageButton.tsx |   4 +-
 .../interfaces/PreferencesMenu/QuirksPage.tsx |  33 +--
 .../ServerPreferencesFetcher.tsx              |   6 +-
 .../PreferencesMenu/SpeciesPage.tsx           |  10 +-
 .../interfaces/PreferencesMenu/TabbedMenu.tsx |   4 +-
 .../tgui/interfaces/PreferencesMenu/names.tsx |  16 +-
 .../preferences/features/base.tsx             |  40 +--
 .../character_preferences/skin_tone.tsx       |   6 +-
 .../features/game_preferences/ghost.tsx       |   8 +-
 .../features/game_preferences/ui_style.tsx    |   2 +-
 .../tgui/interfaces/ProduceConsole.tsx        |   5 +-
 tgui/packages/tgui/interfaces/Puzzgrid.tsx    |  31 ++-
 .../tgui/interfaces/RapidPipeDispenser.tsx    |   4 +-
 tgui/packages/tgui/interfaces/Safe.jsx        |   2 +-
 .../tgui/interfaces/SatelliteControl.tsx      |   3 +
 .../tgui/interfaces/SeedExtractor.tsx         |   4 +-
 .../tgui/interfaces/SelectEquipment.jsx       |   7 +-
 .../tgui/interfaces/ServerControl.tsx         |   2 +-
 tgui/packages/tgui/interfaces/Spellbook.tsx   |   4 +-
 .../tgui/interfaces/StackingConsole.jsx       |   6 +-
 tgui/packages/tgui/interfaces/StripMenu.tsx   |  11 +-
 tgui/packages/tgui/interfaces/Supermatter.tsx |   8 +-
 .../tgui/interfaces/SurgeryInitiator.tsx      |   2 +-
 .../tgui/interfaces/SyndContractor.jsx        |  10 +-
 tgui/packages/tgui/interfaces/Thermometer.jsx |  72 +++---
 .../tgui/interfaces/TrackedPlaytime.jsx       |   2 +-
 .../tgui/interfaces/TraitorObjectiveDebug.tsx |  14 +-
 tgui/packages/tgui/interfaces/TramControl.jsx |   2 +-
 .../tgui/interfaces/TrophyAdminPanel.jsx      |  12 +-
 tgui/packages/tgui/interfaces/Trophycase.jsx  |   3 +
 .../tgui/interfaces/Uplink/ObjectiveMenu.tsx  |  39 +--
 .../Uplink/calculateDangerLevel.tsx           |   8 +-
 .../packages/tgui/interfaces/Uplink/index.tsx |  10 +-
 tgui/packages/tgui/interfaces/Vendatray.tsx   |   3 +-
 tgui/packages/tgui/interfaces/Vending.tsx     |   6 +-
 tgui/packages/tgui/interfaces/VotePanel.tsx   |   2 +-
 .../tgui/interfaces/common/AtmosHandbook.tsx  |   6 +-
 .../tgui/interfaces/common/Connections.tsx    |   4 +-
 .../tgui/interfaces/common/EditableText.tsx   |   8 +-
 .../tgui/interfaces/common/Objectives.tsx     |   4 +-
 .../tgui/interfaces/common/RecipeLookup.jsx   |   2 +-
 tgui/packages/tgui/layouts/Window.jsx         | 206 ++++++++++++++++
 tgui/packages/tgui/layouts/Window.tsx         | 231 ------------------
 tgui/packages/tgui/package.json               |   8 +-
 tgui/packages/tgui/renderer.ts                |   2 +-
 tgui/packages/tgui/store.ts                   |  15 ++
 tgui/public/tgui-polyfill.min.js              |   2 +-
 tgui/yarn.lock                                | 215 +++++-----------
 205 files changed, 1686 insertions(+), 1588 deletions(-)
 rename tgui/packages/tgui/components/{Chart.tsx => Chart.jsx} (53%)
 rename tgui/packages/tgui/components/{ProgressBar.tsx => ProgressBar.jsx} (57%)
 rename tgui/packages/tgui/components/{Tabs.tsx => Tabs.jsx} (67%)
 create mode 100644 tgui/packages/tgui/layouts/Window.jsx
 delete mode 100644 tgui/packages/tgui/layouts/Window.tsx

diff --git a/tgui/.eslintignore b/tgui/.eslintignore
index 692ac5f24af..a59187b933a 100644
--- a/tgui/.eslintignore
+++ b/tgui/.eslintignore
@@ -3,4 +3,4 @@
 /**/*.bundle.*
 /**/*.chunk.*
 /**/*.hot-update.*
-
+/packages/inferno/**
diff --git a/tgui/.yarnrc.yml b/tgui/.yarnrc.yml
index 086484a243a..ddacbb4b64d 100644
--- a/tgui/.yarnrc.yml
+++ b/tgui/.yarnrc.yml
@@ -6,6 +6,11 @@ logFilters:
   - code: YN0062
     level: discard
 
+packageExtensions:
+  'babel-plugin-inferno@*':
+    dependencies:
+      '@babel/core': '*'
+
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: '@yarnpkg/plugin-interactive-tools'
diff --git a/tgui/README.md b/tgui/README.md
index 1bae91fd132..e8713024342 100644
--- a/tgui/README.md
+++ b/tgui/README.md
@@ -16,9 +16,10 @@ If you are completely new to frontend and prefer to **learn by doing**, start wi
 
 ### Guides
 
-This project uses React. Take your time to read the guide:
+This project uses **Inferno** - a very fast UI rendering engine with a similar API to React. Take your time to read these guides:
 
-- [React guide](https://react.dev/learn)
+- [React guide](https://reactjs.org/docs/hello-world.html)
+- [Inferno documentation](https://infernojs.org/docs/guides/components) - highlights differences with React.
 
 If you were already familiar with an older, Ractive-based tgui, and want to translate concepts between old and new tgui, read this [interface conversion guide](docs/converting-old-tgui-interfaces.md).
 
@@ -70,7 +71,6 @@ 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 +137,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 69a5a401cc7..5f86bada506 100644
--- a/tgui/babel.config.js
+++ b/tgui/babel.config.js
@@ -6,36 +6,28 @@
 
 const createBabelConfig = (options) => {
   const { presets = [], plugins = [], removeConsole } = options;
+  // prettier-ignore
   return {
     presets: [
-      [
-        require.resolve('@babel/preset-typescript'),
-        {
-          allowDeclareFields: true,
-        },
-      ],
-      [
-        require.resolve('@babel/preset-env'),
-        {
-          modules: 'commonjs',
-          useBuiltIns: 'entry',
-          corejs: '3.3.2',
-          spec: false,
-          loose: true,
-          targets: [],
-        },
-      ],
-      [require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
+      [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-transform-class-properties'),
-        {
-          loose: true,
-        },
-      ],
+      [require.resolve('@babel/plugin-transform-class-properties'), {
+        loose: true,
+      }],
       require.resolve('@babel/plugin-transform-jscript'),
+      require.resolve('babel-plugin-inferno'),
       removeConsole && require.resolve('babel-plugin-transform-remove-console'),
       require.resolve('common/string.babel-plugin.cjs'),
       ...plugins,
diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md
index f56bb68eec7..9fff68172fd 100644
--- a/tgui/docs/component-reference.md
+++ b/tgui/docs/component-reference.md
@@ -65,13 +65,17 @@ it is used a lot in this framework.
 
 **Event handlers.**
 Event handlers are callbacks that you can attack to various element to
-listen for browser events. React supports camelcase (`onClick`) event names.
+listen for browser events. Inferno supports camelcase (`onClick`) and
+lowercase (`onclick`) event names.
 
 - Camel case names are what's called *synthetic* events, and are the
 **preferred way** of handling events in React, for efficiency and
 performance reasons. Please read
-[React Event Handling](https://react.dev/learn/responding-to-events)
+[Inferno Event Handling](https://infernojs.org/docs/guides/event-handling)
 to understand what this is about.
+- Lower case names are native browser events and should be used sparingly,
+for example when you need an explicit IE8 support. **DO NOT** use
+lowercase event handlers unless you really know what you are doing.
 
 ## `tgui/components`
 
@@ -366,7 +370,7 @@ dropdown when open. See Dropdown.tsx for more adcanced usage with DropdownEntry
 - `over: boolean` - Dropdown renders over instead of below
 - `color: string` - Color of dropdown button
 - `nochevron: boolean` - Whether or not the arrow on the right hand side of the dropdown button is visible
-- `displayText: string | number | ReactNode` - Text to always display in place of the selected text
+- `displayText: string | number | InfernoNode` - Text to always display in place of the selected text
 - `onClick: (e) => void` - Called when dropdown button is clicked
 - `onSelected: (value) => void` - Called when a value is picked from the list, `value` is the value that was picked
 
@@ -661,7 +665,7 @@ to perform some sort of action), there is a way to do that:
 **Props:**
 
 - `className: string` - Applies a CSS class to the element.
-- `label: string|ReactNode` - Item label.
+- `label: string|InfernoNode` - Item label.
 - `labelWrap: boolean` - Lets the label wrap and makes it not take the minimum width.
 - `labelColor: string` - Sets the color of the label.
 - `color: string` - Sets the color of the content text.
@@ -756,7 +760,7 @@ Popper lets you position elements so that they don't go out of the bounds of the
 
 **Props:**
 
-- `popperContent: ReactNode` - The content that will be put inside the popper.
+- `popperContent: InfernoNode` - The content that will be put inside the popper.
 - `options?: { ... }` - An object of options to pass to `createPopper`. See [https://popper.js.org/docs/v2/constructors/#options], but the one you want most is `placement`. Valid placements are "bottom", "top", "left", and "right". You can affix "-start" and "-end" to achieve something like top left or top right respectively. You can also use "auto" (with an optional "-start" or "-end"), where a best fit will be chosen.
 - `additionalStyles: { ... }` - A map of CSS styles to add to the element that will contain the popper.
 
diff --git a/tgui/package.json b/tgui/package.json
index 9ae4f99dbca..79e4946875d 100644
--- a/tgui/package.json
+++ b/tgui/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "tgui-workspace",
-  "version": "5.0.0",
+  "version": "4.4.0",
   "packageManager": "yarn@3.3.1",
   "workspaces": [
     "packages/*"
@@ -25,7 +25,6 @@
     "@babel/plugin-transform-class-properties": "^7.23.3",
     "@babel/plugin-transform-jscript": "^7.23.3",
     "@babel/preset-env": "^7.23.3",
-    "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@types/jest": "^29.5.10",
     "@types/jsdom": "^21.1.6",
@@ -35,6 +34,7 @@
     "@typescript-eslint/parser": "^5.62.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^8.3.0",
+    "babel-plugin-inferno": "^6.7.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "common": "workspace:*",
     "css-loader": "^6.8.1",
diff --git a/tgui/packages/common/keys.ts b/tgui/packages/common/keys.ts
index 34ac9e1614d..61b79992b48 100644
--- a/tgui/packages/common/keys.ts
+++ b/tgui/packages/common/keys.ts
@@ -22,18 +22,18 @@ export enum KEY {
   Backspace = 'Backspace',
   Control = 'Control',
   Delete = 'Delete',
-  Down = 'ArrowDown',
+  Down = 'Down',
   End = 'End',
   Enter = 'Enter',
-  Escape = 'Escape',
+  Escape = 'Esc',
   Home = 'Home',
   Insert = 'Insert',
-  Left = 'ArrowLeft',
+  Left = 'Left',
   PageDown = 'PageDown',
   PageUp = 'PageUp',
-  Right = 'ArrowRight',
+  Right = 'Right',
   Shift = 'Shift',
   Space = ' ',
   Tab = 'Tab',
-  Up = 'ArrowUp',
+  Up = 'Up',
 }
diff --git a/tgui/packages/common/react.ts b/tgui/packages/common/react.ts
index 5260ff6ae12..8e42d0971ab 100644
--- a/tgui/packages/common/react.ts
+++ b/tgui/packages/common/react.ts
@@ -52,10 +52,13 @@ export const shallowDiffers = (a: object, b: object) => {
 };
 
 /**
- * A common case in tgui, when you pass a value conditionally, these are
- * the types that can fall through the condition.
+ * Default inferno hooks for pure components.
  */
-export type BooleanLike = number | boolean | null | undefined;
+export const pureComponentHooks = {
+  onComponentShouldUpdate: (lastProps, nextProps) => {
+    return shallowDiffers(lastProps, nextProps);
+  },
+};
 
 /**
  * A helper to determine whether the object is renderable by React.
@@ -66,3 +69,9 @@ export const canRender = (value: unknown) => {
     && value !== null
     && typeof value !== 'boolean';
 };
+
+/**
+ * A common case in tgui, when you pass a value conditionally, these are
+ * the types that can fall through the condition.
+ */
+export type BooleanLike = number | boolean | null | undefined;
diff --git a/tgui/packages/common/redux.ts b/tgui/packages/common/redux.ts
index 7b4999d93b1..1635853c6b4 100644
--- a/tgui/packages/common/redux.ts
+++ b/tgui/packages/common/redux.ts
@@ -194,3 +194,23 @@ export const createAction = <TAction extends string>(
 
   return actionCreator;
 };
+
+// Implementation specific
+// --------------------------------------------------------
+
+export const useDispatch = <TAction extends Action = AnyAction>(context: {
+  store: Store<unknown, TAction>;
+}): Dispatch<TAction> => {
+  return context?.store?.dispatch;
+};
+
+export const useSelector = <State, Selected>(
+  context: { store: Store<State, Action> },
+  selector: (state: State) => Selected
+): Selected => {
+  if (!context) {
+    return {} as Selected;
+  }
+
+  return selector(context?.store?.getState());
+};
diff --git a/tgui/packages/tgui-bench/package.json b/tgui/packages/tgui-bench/package.json
index 47cad082fb9..22719711733 100644
--- a/tgui/packages/tgui-bench/package.json
+++ b/tgui/packages/tgui-bench/package.json
@@ -1,14 +1,15 @@
 {
   "private": true,
   "name": "tgui-bench",
-  "version": "5.0.0",
+  "version": "4.4.0",
   "dependencies": {
     "@fastify/static": "^6.12.0",
     "common": "workspace:*",
     "fastify": "^3.29.5",
+    "inferno": "^7.4.11",
+    "inferno-vnode-flags": "^7.4.11",
     "lodash": "^4.17.21",
     "platform": "^1.3.6",
-    "react": "^18.2.0",
     "tgui": "workspace:*"
   }
 }
diff --git a/tgui/packages/tgui-bench/tests/Button.test.tsx b/tgui/packages/tgui-bench/tests/Button.test.tsx
index 0549e69b623..6b806d720ab 100644
--- a/tgui/packages/tgui-bench/tests/Button.test.tsx
+++ b/tgui/packages/tgui-bench/tests/Button.test.tsx
@@ -1,8 +1,11 @@
+import { linkEvent } from 'inferno';
 import { Button } from 'tgui/components';
 import { createRenderer } from 'tgui/renderer';
 
 const render = createRenderer();
 
+const handleClick = () => undefined;
+
 export const SingleButton = () => {
   const node = <Button>Hello world!</Button>;
   render(node);
@@ -13,6 +16,13 @@ export const SingleButtonWithCallback = () => {
   render(node);
 };
 
+export const SingleButtonWithLinkEvent = () => {
+  const node = (
+    <Button onClick={linkEvent(null, handleClick)}>Hello world!</Button>
+  );
+  render(node);
+};
+
 export const ListOfButtons = () => {
   const nodes: JSX.Element[] = [];
   for (let i = 0; i < 100; i++) {
@@ -35,6 +45,19 @@ export const ListOfButtonsWithCallback = () => {
   render(<div>{nodes}</div>);
 };
 
+export const ListOfButtonsWithLinkEvent = () => {
+  const nodes: JSX.Element[] = [];
+  for (let i = 0; i < 100; i++) {
+    const node = (
+      <Button key={i} onClick={linkEvent(null, handleClick)}>
+        Hello world! {i}
+      </Button>
+    );
+    nodes.push(node);
+  }
+  render(<div>{nodes}</div>);
+};
+
 export const ListOfButtonsWithIcons = () => {
   const nodes: JSX.Element[] = [];
   for (let i = 0; i < 100; i++) {
diff --git a/tgui/packages/tgui-bench/tests/DisposalUnit.test.tsx b/tgui/packages/tgui-bench/tests/DisposalUnit.test.tsx
index a3a53cf750c..1ae610e2e2e 100644
--- a/tgui/packages/tgui-bench/tests/DisposalUnit.test.tsx
+++ b/tgui/packages/tgui-bench/tests/DisposalUnit.test.tsx
@@ -1,20 +1,22 @@
-import { configureStore } from 'tgui/store';
+import { StoreProvider, configureStore } from 'tgui/store';
 
 import { DisposalUnit } from 'tgui/interfaces/DisposalUnit';
-import { backendUpdate, setGlobalStore } from 'tgui/backend';
+import { backendUpdate } from 'tgui/backend';
 import { createRenderer } from 'tgui/renderer';
 
 const store = configureStore({ sideEffects: false });
 
 const renderUi = createRenderer((dataJson: string) => {
-  setGlobalStore(store);
-
   store.dispatch(
     backendUpdate({
       data: Byond.parseJson(dataJson),
     })
   );
-  return <DisposalUnit />;
+  return (
+    <StoreProvider store={store}>
+      <DisposalUnit />
+    </StoreProvider>
+  );
 });
 
 export const data = JSON.stringify({
diff --git a/tgui/packages/tgui-dev-server/package.json b/tgui/packages/tgui-dev-server/package.json
index 496e25c6c18..d911f9693de 100644
--- a/tgui/packages/tgui-dev-server/package.json
+++ b/tgui/packages/tgui-dev-server/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "tgui-dev-server",
-  "version": "5.0.0",
+  "version": "4.4.0",
   "type": "module",
   "dependencies": {
     "axios": "^1.6.2",
diff --git a/tgui/packages/tgui-panel/Panel.jsx b/tgui/packages/tgui-panel/Panel.jsx
index 260e1dfd6df..83150ab6ef1 100644
--- a/tgui/packages/tgui-panel/Panel.jsx
+++ b/tgui/packages/tgui-panel/Panel.jsx
@@ -14,17 +14,17 @@ import { PingIndicator } from './ping';
 import { ReconnectButton } from './reconnect';
 import { SettingsPanel, useSettings } from './settings';
 
-export const Panel = (props) => {
+export const Panel = (props, context) => {
   // IE8-10: Needs special treatment due to missing Flex support
   if (Byond.IS_LTE_IE10) {
     return <HoboPanel />;
   }
-  const audio = useAudio();
-  const settings = useSettings();
-  const game = useGame();
+  const audio = useAudio(context);
+  const settings = useSettings(context);
+  const game = useGame(context);
   if (process.env.NODE_ENV !== 'production') {
     const { useDebug, KitchenSink } = require('tgui/debug');
-    const debug = useDebug();
+    const debug = useDebug(context);
     if (debug.kitchenSink) {
       return <KitchenSink panel />;
     }
@@ -103,8 +103,8 @@ export const Panel = (props) => {
   );
 };
 
-const HoboPanel = (props) => {
-  const settings = useSettings();
+const HoboPanel = (props, context) => {
+  const settings = useSettings(context);
   return (
     <Pane theme={settings.theme}>
       <Pane.Content scrollable>
@@ -113,7 +113,7 @@ const HoboPanel = (props) => {
             position: 'fixed',
             top: '1em',
             right: '2em',
-            zIndex: 1000,
+            'z-index': 1000,
           }}
           selected={settings.visible}
           onClick={() => settings.toggle()}>
diff --git a/tgui/packages/tgui-panel/audio/NowPlayingWidget.jsx b/tgui/packages/tgui-panel/audio/NowPlayingWidget.jsx
index 8260ee8c233..30052c3f3a3 100644
--- a/tgui/packages/tgui-panel/audio/NowPlayingWidget.jsx
+++ b/tgui/packages/tgui-panel/audio/NowPlayingWidget.jsx
@@ -5,15 +5,15 @@
  */
 
 import { toFixed } from 'common/math';
-import { useDispatch, useSelector } from 'tgui/backend';
+import { useDispatch, useSelector } from 'common/redux';
 import { Button, Collapsible, Flex, Knob, Section } from 'tgui/components';
 import { useSettings } from '../settings';
 import { selectAudio } from './selectors';
 
-export const NowPlayingWidget = (props) => {
-  const audio = useSelector(selectAudio),
-    dispatch = useDispatch(),
-    settings = useSettings(),
+export const NowPlayingWidget = (props, context) => {
+  const audio = useSelector(context, selectAudio),
+    dispatch = useDispatch(context),
+    settings = useSettings(context),
     title = audio.meta?.title,
     URL = audio.meta?.link,
     Artist = audio.meta?.artist || 'Unknown Artist',
@@ -35,9 +35,9 @@ export const NowPlayingWidget = (props) => {
           mx={0.5}
           grow={1}
           style={{
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
+            'white-space': 'nowrap',
+            'overflow': 'hidden',
+            'text-overflow': 'ellipsis',
           }}>
           {
             <Collapsible title={title || 'Unknown Track'} color={'blue'}>
diff --git a/tgui/packages/tgui-panel/audio/hooks.js b/tgui/packages/tgui-panel/audio/hooks.js
index 1286754a37d..504b4f5c6e7 100644
--- a/tgui/packages/tgui-panel/audio/hooks.js
+++ b/tgui/packages/tgui-panel/audio/hooks.js
@@ -4,12 +4,12 @@
  * @license MIT
  */
 
-import { useSelector, useDispatch } from 'tgui/backend';
+import { useSelector, useDispatch } from 'common/redux';
 import { selectAudio } from './selectors';
 
-export const useAudio = () => {
-  const state = useSelector(selectAudio);
-  const dispatch = useDispatch();
+export const useAudio = (context) => {
+  const state = useSelector(context, selectAudio);
+  const dispatch = useDispatch(context);
   return {
     ...state,
     toggle: () => dispatch({ type: 'audio/toggle' }),
diff --git a/tgui/packages/tgui-panel/chat/ChatPageSettings.jsx b/tgui/packages/tgui-panel/chat/ChatPageSettings.jsx
index 2da47daa07d..c0d9962d253 100644
--- a/tgui/packages/tgui-panel/chat/ChatPageSettings.jsx
+++ b/tgui/packages/tgui-panel/chat/ChatPageSettings.jsx
@@ -4,15 +4,15 @@
  * @license MIT
  */
 
-import { useDispatch, useSelector } from 'tgui/backend';
+import { useDispatch, useSelector } from 'common/redux';
 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';
 
-export const ChatPageSettings = (props) => {
-  const page = useSelector(selectCurrentChatPage);
-  const dispatch = useDispatch();
+export const ChatPageSettings = (props, context) => {
+  const page = useSelector(context, selectCurrentChatPage);
+  const dispatch = useDispatch(context);
   return (
     <Section>
       <Stack align="center">
diff --git a/tgui/packages/tgui-panel/chat/ChatPanel.jsx b/tgui/packages/tgui-panel/chat/ChatPanel.jsx
index 166705361fa..3132a66ce7f 100644
--- a/tgui/packages/tgui-panel/chat/ChatPanel.jsx
+++ b/tgui/packages/tgui-panel/chat/ChatPanel.jsx
@@ -5,13 +5,13 @@
  */
 
 import { shallowDiffers } from 'common/react';
-import { Component, createRef } from 'react';
+import { Component, createRef } from 'inferno';
 import { Button } from 'tgui/components';
 import { chatRenderer } from './renderer';
 
 export class ChatPanel extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.ref = createRef();
     this.state = {
       scrollTracking: true,
@@ -46,7 +46,7 @@ export class ChatPanel extends Component {
       !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,
diff --git a/tgui/packages/tgui-panel/chat/ChatTabs.jsx b/tgui/packages/tgui-panel/chat/ChatTabs.jsx
index 04d5f25b4bf..1d4f6f65edf 100644
--- a/tgui/packages/tgui-panel/chat/ChatTabs.jsx
+++ b/tgui/packages/tgui-panel/chat/ChatTabs.jsx
@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { useDispatch, useSelector } from 'tgui/backend';
+import { useDispatch, useSelector } from 'common/redux';
 import { Box, Tabs, Flex, Button } from 'tgui/components';
 import { changeChatPage, addChatPage } from './actions';
 import { selectChatPages, selectCurrentChatPage } from './selectors';
@@ -13,21 +13,21 @@ import { openChatSettings } from '../settings/actions';
 const UnreadCountWidget = ({ value }) => (
   <Box
     style={{
-      fontSize: '0.7em',
-      borderRadius: '0.25em',
-      width: '1.7em',
-      lineHeight: '1.55em',
-      backgroundColor: 'crimson',
-      color: '#fff',
+      'font-size': '0.7em',
+      'border-radius': '0.25em',
+      'width': '1.7em',
+      'line-height': '1.55em',
+      'background-color': 'crimson',
+      'color': '#fff',
     }}>
     {Math.min(value, 99)}
   </Box>
 );
 
-export const ChatTabs = (props) => {
-  const pages = useSelector(selectChatPages);
-  const currentPage = useSelector(selectCurrentChatPage);
-  const dispatch = useDispatch();
+export const ChatTabs = (props, context) => {
+  const pages = useSelector(context, selectChatPages);
+  const currentPage = useSelector(context, selectCurrentChatPage);
+  const dispatch = useDispatch(context);
   return (
     <Flex align="center">
       <Flex.Item>
diff --git a/tgui/packages/tgui-panel/chat/renderer.jsx b/tgui/packages/tgui-panel/chat/renderer.jsx
index f2b4ac2caa6..5d6337148fb 100644
--- a/tgui/packages/tgui-panel/chat/renderer.jsx
+++ b/tgui/packages/tgui-panel/chat/renderer.jsx
@@ -8,7 +8,7 @@ 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_INTERNAL, MESSAGE_TYPE_UNKNOWN } from './constants';
-import { render } from 'react-dom';
+import { render } from 'inferno';
 import { canPageAcceptType, createMessage, isSameMessage } from './model';
 import { highlightNode, linkifyNode } from './replaceInTextNode';
 import { Tooltip } from 'tgui/components';
diff --git a/tgui/packages/tgui-panel/game/hooks.js b/tgui/packages/tgui-panel/game/hooks.js
index c3e7c062847..859aaa09a40 100644
--- a/tgui/packages/tgui-panel/game/hooks.js
+++ b/tgui/packages/tgui-panel/game/hooks.js
@@ -4,9 +4,9 @@
  * @license MIT
  */
 
-import { useSelector } from 'tgui/backend';
+import { useSelector } from 'common/redux';
 import { selectGame } from './selectors';
 
-export const useGame = () => {
-  return useSelector(selectGame);
+export const useGame = (context) => {
+  return useSelector(context, selectGame);
 };
diff --git a/tgui/packages/tgui-panel/index.jsx b/tgui/packages/tgui-panel/index.jsx
index ed0f01a6e79..336d46031c4 100644
--- a/tgui/packages/tgui-panel/index.jsx
+++ b/tgui/packages/tgui-panel/index.jsx
@@ -14,7 +14,7 @@ import { setupHotReloading } from 'tgui-dev-server/link/client.cjs';
 import { setupGlobalEvents } from 'tgui/events';
 import { captureExternalLinks } from 'tgui/links';
 import { createRenderer } from 'tgui/renderer';
-import { configureStore } from 'tgui/store';
+import { configureStore, StoreProvider } from 'tgui/store';
 import { audioMiddleware, audioReducer } from './audio';
 import { chatMiddleware, chatReducer } from './chat';
 import { gameMiddleware, gameReducer } from './game';
@@ -51,7 +51,11 @@ const renderApp = createRenderer(() => {
   setGlobalStore(store);
 
   const { Panel } = require('./Panel');
-  return <Panel />;
+  return (
+    <StoreProvider store={store}>
+      <Panel />
+    </StoreProvider>
+  );
 });
 
 const setupApp = () => {
diff --git a/tgui/packages/tgui-panel/package.json b/tgui/packages/tgui-panel/package.json
index b1c4bb1786c..9d2aa05be22 100644
--- a/tgui/packages/tgui-panel/package.json
+++ b/tgui/packages/tgui-panel/package.json
@@ -3,11 +3,9 @@
   "name": "tgui-panel",
   "version": "4.3.2",
   "dependencies": {
-    "@types/react": "^18.2.39",
     "common": "workspace:*",
     "dompurify": "^2.4.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "inferno": "^7.4.11",
     "tgui": "workspace:*",
     "tgui-dev-server": "workspace:*",
     "tgui-polyfill": "workspace:*"
diff --git a/tgui/packages/tgui-panel/ping/PingIndicator.jsx b/tgui/packages/tgui-panel/ping/PingIndicator.jsx
index b2355820e58..aadbd1c134b 100644
--- a/tgui/packages/tgui-panel/ping/PingIndicator.jsx
+++ b/tgui/packages/tgui-panel/ping/PingIndicator.jsx
@@ -6,12 +6,12 @@
 
 import { Color } from 'common/color';
 import { toFixed } from 'common/math';
-import { useSelector } from 'tgui/backend';
+import { useSelector } from 'common/redux';
 import { Box } from 'tgui/components';
 import { selectPing } from './selectors';
 
-export const PingIndicator = (props) => {
-  const ping = useSelector(selectPing);
+export const PingIndicator = (props, context) => {
+  const ping = useSelector(context, selectPing);
   const color = Color.lookup(ping.networkQuality, [
     new Color(220, 40, 40),
     new Color(220, 200, 40),
diff --git a/tgui/packages/tgui-panel/settings/SettingsPanel.jsx b/tgui/packages/tgui-panel/settings/SettingsPanel.jsx
index 87e5d8b74e7..90abe4e36b2 100644
--- a/tgui/packages/tgui-panel/settings/SettingsPanel.jsx
+++ b/tgui/packages/tgui-panel/settings/SettingsPanel.jsx
@@ -6,7 +6,7 @@
 
 import { toFixed } from 'common/math';
 import { useLocalState } from 'tgui/backend';
-import { useDispatch, useSelector } 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 { ChatPageSettings } from '../chat';
 import { rebuildChat, saveChatToDisk } from '../chat/actions';
@@ -15,9 +15,9 @@ import { changeSettingsTab, updateSettings, addHighlightSetting, removeHighlight
 import { SETTINGS_TABS, FONTS, MAX_HIGHLIGHT_SETTINGS } from './constants';
 import { selectActiveTab, selectSettings, selectHighlightSettings, selectHighlightSettingById } from './selectors';
 
-export const SettingsPanel = (props) => {
-  const activeTab = useSelector(selectActiveTab);
-  const dispatch = useDispatch();
+export const SettingsPanel = (props, context) => {
+  const activeTab = useSelector(context, selectActiveTab);
+  const dispatch = useDispatch(context);
   return (
     <Stack fill>
       <Stack.Item>
@@ -49,11 +49,13 @@ export const SettingsPanel = (props) => {
   );
 };
 
-export const SettingsGeneral = (props) => {
-  const { theme, fontFamily, fontSize, lineHeight } =
-    useSelector(selectSettings);
-  const dispatch = useDispatch();
-  const [freeFont, setFreeFont] = useLocalState('freeFont', false);
+export const SettingsGeneral = (props, context) => {
+  const { theme, fontFamily, fontSize, lineHeight } = useSelector(
+    context,
+    selectSettings
+  );
+  const dispatch = useDispatch(context);
+  const [freeFont, setFreeFont] = useLocalState(context, 'freeFont', false);
   return (
     <Section>
       <LabeledList>
@@ -157,9 +159,9 @@ export const SettingsGeneral = (props) => {
   );
 };
 
-const TextHighlightSettings = (props) => {
-  const highlightSettings = useSelector(selectHighlightSettings);
-  const dispatch = useDispatch();
+const TextHighlightSettings = (props, context) => {
+  const highlightSettings = useSelector(context, selectHighlightSettings);
+  const dispatch = useDispatch(context);
   return (
     <Section fill scrollable height="200px">
       <Section p={0}>
@@ -198,10 +200,10 @@ const TextHighlightSettings = (props) => {
   );
 };
 
-const TextHighlightSetting = (props) => {
+const TextHighlightSetting = (props, context) => {
   const { id, ...rest } = props;
-  const highlightSettingById = useSelector(selectHighlightSettingById);
-  const dispatch = useDispatch();
+  const highlightSettingById = useSelector(context, selectHighlightSettingById);
+  const dispatch = useDispatch(context);
   const {
     highlightColor,
     highlightText,
diff --git a/tgui/packages/tgui-panel/settings/hooks.js b/tgui/packages/tgui-panel/settings/hooks.js
index 5ea91c86067..da46322f9a9 100644
--- a/tgui/packages/tgui-panel/settings/hooks.js
+++ b/tgui/packages/tgui-panel/settings/hooks.js
@@ -4,13 +4,13 @@
  * @license MIT
  */
 
-import { useDispatch, useSelector } from 'tgui/backend';
+import { useDispatch, useSelector } from 'common/redux';
 import { updateSettings, toggleSettings } from './actions';
 import { selectSettings } from './selectors';
 
-export const useSettings = () => {
-  const settings = useSelector(selectSettings);
-  const dispatch = useDispatch();
+export const useSettings = (context) => {
+  const settings = useSelector(context, selectSettings);
+  const dispatch = useDispatch(context);
   return {
     ...settings,
     visible: settings.view.visible,
diff --git a/tgui/packages/tgui-polyfill/1-misc.js b/tgui/packages/tgui-polyfill/1-misc.js
index cefbdbdbdfc..af9b900fe0b 100644
--- a/tgui/packages/tgui-polyfill/1-misc.js
+++ b/tgui/packages/tgui-polyfill/1-misc.js
@@ -8,6 +8,11 @@
 (function () {
   'use strict';
 
+  // Inferno needs Int32Array, and it is not covered by core-js.
+  if (!window.Int32Array) {
+    window.Int32Array = Array;
+  }
+
   // ie11 polyfills
   !(function () {
     // append
diff --git a/tgui/packages/tgui-polyfill/package.json b/tgui/packages/tgui-polyfill/package.json
index 8e43bb87224..c0cb0911160 100644
--- a/tgui/packages/tgui-polyfill/package.json
+++ b/tgui/packages/tgui-polyfill/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "tgui-polyfill",
-  "version": "5.0.0",
+  "version": "4.4.0",
   "scripts": {
     "tgui-polyfill:build": "terser 1-misc.js -f ascii_only,comments=false -o ../../public/tgui-polyfill.min.js"
   },
diff --git a/tgui/packages/tgui-say/TguiSay.tsx b/tgui/packages/tgui-say/TguiSay.tsx
index b5ac871130a..267febef650 100644
--- a/tgui/packages/tgui-say/TguiSay.tsx
+++ b/tgui/packages/tgui-say/TguiSay.tsx
@@ -1,6 +1,6 @@
 import { Channel, ChannelIterator } from './ChannelIterator';
 import { ChatHistory } from './ChatHistory';
-import { Component, createRef, RefObject } from 'react';
+import { Component, createRef, InfernoKeyboardEvent, RefObject } from 'inferno';
 import { LINE_LENGTHS, RADIO_PREFIXES, WINDOW_SIZES } from './constants';
 import { byondMessages } from './timers';
 import { dragStartHandler } from 'tgui/drag';
@@ -221,7 +221,7 @@ export class TguiSay extends Component<{}, State> {
     this.setValue(typed.slice(3));
   }
 
-  handleKeyDown(event) {
+  handleKeyDown(event: InfernoKeyboardEvent<HTMLTextAreaElement>) {
     switch (event.key) {
       case KEY.Up:
       case KEY.Down:
@@ -310,11 +310,13 @@ export class TguiSay extends Component<{}, State> {
       this.channelIterator.current();
 
     return (
-      <div className={`window window-${theme} window-${this.state.size}`}>
+      <div
+        className={`window window-${theme} window-${this.state.size}`}
+        $HasKeyedChildren>
         <Dragzone position="top" theme={theme} />
-        <div className="center">
+        <div className="center" $HasKeyedChildren>
           <Dragzone position="left" theme={theme} />
-          <div className="input">
+          <div className="input" $HasKeyedChildren>
             <button
               className={`button button-${theme}`}
               onClick={this.handleIncrementChannel}
@@ -345,7 +347,7 @@ const Dragzone = ({ theme, position }: { theme: string; position: string }) => {
   return (
     <div
       className={`dragzone-${location} dragzone-${position} dragzone-${theme}`}
-      onMouseDown={dragStartHandler}
+      onmousedown={dragStartHandler}
     />
   );
 };
diff --git a/tgui/packages/tgui-say/package.json b/tgui/packages/tgui-say/package.json
index 6fc66ade82f..5650d6368e4 100644
--- a/tgui/packages/tgui-say/package.json
+++ b/tgui/packages/tgui-say/package.json
@@ -3,9 +3,8 @@
   "name": "tgui-say",
   "version": "1.0.0",
   "dependencies": {
-    "@types/react": "^18.2.39",
     "common": "workspace:*",
-    "react": "^18.2.0",
+    "inferno": "^7.4.11",
     "tgui": "workspace:*",
     "tgui-polyfill": "workspace:*"
   }
diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts
index 746e511a502..46b86feb7bc 100644
--- a/tgui/packages/tgui/backend.ts
+++ b/tgui/packages/tgui/backend.ts
@@ -375,11 +375,3 @@ export const useSharedState = <T>(
     },
   ];
 };
-
-export const useDispatch = () => {
-  return globalStore.dispatch;
-};
-
-export const useSelector = (selector: (state: any) => any) => {
-  return selector(globalStore?.getState());
-};
diff --git a/tgui/packages/tgui/components/AnimatedNumber.tsx b/tgui/packages/tgui/components/AnimatedNumber.tsx
index 572fef2b5ee..6dba043cf09 100644
--- a/tgui/packages/tgui/components/AnimatedNumber.tsx
+++ b/tgui/packages/tgui/components/AnimatedNumber.tsx
@@ -5,7 +5,7 @@
  */
 
 import { clamp, toFixed } from 'common/math';
-import { Component, createRef } from 'react';
+import { Component, createRef } from 'inferno';
 
 const isSafeNumber = (value: number) => {
   // prettier-ignore
@@ -100,6 +100,8 @@ export class AnimatedNumber extends Component<AnimatedNumberProps> {
       this.startTicking();
     }
 
+    // We render the inner `span` directly using a ref to bypass inferno diffing
+    // and reach 60 frames per second--tell inferno not to re-render this tree.
     return false;
   }
 
@@ -153,6 +155,7 @@ export class AnimatedNumber extends Component<AnimatedNumberProps> {
     }
 
     if (this.ref.current) {
+      // Directly update the inner span, without bothering inferno.
       this.ref.current.textContent = this.getText();
     }
   }
diff --git a/tgui/packages/tgui/components/Autofocus.tsx b/tgui/packages/tgui/components/Autofocus.tsx
index a0b3f6f7659..28945dd7aa4 100644
--- a/tgui/packages/tgui/components/Autofocus.tsx
+++ b/tgui/packages/tgui/components/Autofocus.tsx
@@ -1,17 +1,19 @@
-import { createRef, PropsWithChildren, useEffect } from 'react';
+import { Component, createRef } from 'inferno';
 
-export const Autofocus = (props: PropsWithChildren) => {
-  const ref = createRef<HTMLDivElement>();
+export class Autofocus extends Component {
+  ref = createRef<HTMLDivElement>();
 
-  useEffect(() => {
+  componentDidMount() {
     setTimeout(() => {
-      ref.current?.focus();
+      this.ref.current?.focus();
     }, 1);
-  }, []);
+  }
 
-  return (
-    <div ref={ref} tabIndex={-1}>
-      {props.children}
-    </div>
-  );
-};
+  render() {
+    return (
+      <div ref={this.ref} tabIndex={-1}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
diff --git a/tgui/packages/tgui/components/Blink.jsx b/tgui/packages/tgui/components/Blink.jsx
index bf92fe02b42..bd781336b46 100644
--- a/tgui/packages/tgui/components/Blink.jsx
+++ b/tgui/packages/tgui/components/Blink.jsx
@@ -1,11 +1,11 @@
-import { Component } from 'react';
+import { Component } from 'inferno';
 
 const DEFAULT_BLINKING_INTERVAL = 1000;
 const DEFAULT_BLINKING_TIME = 1000;
 
 export class Blink extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       hidden: false,
     };
diff --git a/tgui/packages/tgui/components/BodyZoneSelector.tsx b/tgui/packages/tgui/components/BodyZoneSelector.tsx
index 0fe3bcbe5a4..cf8dc430e2b 100644
--- a/tgui/packages/tgui/components/BodyZoneSelector.tsx
+++ b/tgui/packages/tgui/components/BodyZoneSelector.tsx
@@ -1,4 +1,4 @@
-import { Component, createRef } from 'react';
+import { Component, createRef } from 'inferno';
 import { resolveAsset } from '../assets';
 import { Box } from './Box';
 
@@ -112,9 +112,10 @@ export class BodyZoneSelector extends Component<
             });
           }}
           style={{
-            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`,
           }}
         />
 
@@ -123,10 +124,11 @@ export class BodyZoneSelector extends Component<
             as="img"
             src={resolveAsset(`body_zones.${selectedZone}.png`)}
             style={{
-              pointerEvents: '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`,
             }}
           />
         )}
@@ -136,11 +138,12 @@ export class BodyZoneSelector extends Component<
             as="img"
             src={resolveAsset(`body_zones.${hoverZone}.png`)}
             style={{
-              opacity: 0.5,
-              pointerEvents: '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 02dd2d4dcd3..ed10072b623 100644
--- a/tgui/packages/tgui/components/Box.tsx
+++ b/tgui/packages/tgui/components/Box.tsx
@@ -4,15 +4,16 @@
  * @license MIT
  */
 
-import { BooleanLike, classes } from 'common/react';
-import { createElement, ReactNode } from 'react';
+import { BooleanLike, classes, pureComponentHooks } from 'common/react';
+import { createVNode, InfernoNode, SFC } from 'inferno';
+import { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';
 import { CSS_COLORS } from '../constants';
 
 export type BoxProps = {
   [key: string]: any;
   as?: string;
   className?: string | BooleanLike;
-  children?: ReactNode;
+  children?: InfernoNode;
   position?: string | BooleanLike;
   overflow?: string | BooleanLike;
   overflowX?: string | BooleanLike;
@@ -64,12 +65,15 @@ export type BoxProps = {
 export const unit = (value: unknown): string | undefined => {
   if (typeof value === 'string') {
     // Transparently convert pixels into rem units
-    if (value.endsWith('px')) {
+    if (value.endsWith('px') && !Byond.IS_LTE_IE8) {
       return parseFloat(value) / 12 + 'rem';
     }
     return value;
   }
   if (typeof value === 'number') {
+    if (Byond.IS_LTE_IE8) {
+      return value * 12 + 'px';
+    }
     return value + 'rem';
   }
 };
@@ -124,66 +128,70 @@ const mapColorPropTo = (attrName) => (style, value) => {
   }
 };
 
-// String / number props
-const stringStyleMap = {
+const styleMapperByPropName = {
+  // Direct mapping
+  position: mapRawPropTo('position'),
+  overflow: mapRawPropTo('overflow'),
+  overflowX: mapRawPropTo('overflow-x'),
+  overflowY: mapRawPropTo('overflow-y'),
+  top: mapUnitPropTo('top', unit),
   bottom: mapUnitPropTo('bottom', unit),
-  fontFamily: mapRawPropTo('fontFamily'),
-  fontSize: mapUnitPropTo('fontSize', unit),
-  height: mapUnitPropTo('height', unit),
   left: mapUnitPropTo('left', unit),
-  maxHeight: mapUnitPropTo('maxHeight', unit),
-  maxWidth: mapUnitPropTo('maxWidth', unit),
-  minHeight: mapUnitPropTo('minHeight', unit),
-  minWidth: mapUnitPropTo('minWidth', unit),
-  opacity: mapRawPropTo('opacity'),
-  overflow: mapRawPropTo('overflow'),
-  overflowX: mapRawPropTo('overflowX'),
-  overflowY: mapRawPropTo('overflowY'),
-  position: mapRawPropTo('position'),
   right: mapUnitPropTo('right', unit),
-  textAlign: mapRawPropTo('textAlign'),
-  top: mapUnitPropTo('top', unit),
-  verticalAlign: mapRawPropTo('verticalAlign'),
   width: mapUnitPropTo('width', unit),
-
+  minWidth: mapUnitPropTo('min-width', unit),
+  maxWidth: mapUnitPropTo('max-width', unit),
+  height: mapUnitPropTo('height', unit),
+  minHeight: mapUnitPropTo('min-height', unit),
+  maxHeight: mapUnitPropTo('max-height', unit),
+  fontSize: mapUnitPropTo('font-size', unit),
+  fontFamily: mapRawPropTo('font-family'),
   lineHeight: (style, value) => {
     if (typeof value === 'number') {
-      style['lineHeight'] = value;
+      style['line-height'] = value;
     } else if (typeof value === 'string') {
-      style['lineHeight'] = unit(value);
+      style['line-height'] = unit(value);
     }
   },
+  opacity: mapRawPropTo('opacity'),
+  textAlign: mapRawPropTo('text-align'),
+  verticalAlign: mapRawPropTo('vertical-align'),
+  // Boolean props
+  inline: mapBooleanPropTo('display', 'inline-block'),
+  bold: mapBooleanPropTo('font-weight', 'bold'),
+  italic: mapBooleanPropTo('font-style', 'italic'),
+  nowrap: mapBooleanPropTo('white-space', 'nowrap'),
+  preserveWhitespace: mapBooleanPropTo('white-space', 'pre-wrap'),
   // Margin
   m: mapDirectionalUnitPropTo('margin', halfUnit, [
-    'Top',
-    'Bottom',
-    'Left',
-    'Right',
+    'top',
+    'bottom',
+    'left',
+    'right',
   ]),
-  mx: mapDirectionalUnitPropTo('margin', halfUnit, ['Left', 'Right']),
-  my: mapDirectionalUnitPropTo('margin', halfUnit, ['Top', 'Bottom']),
-  mt: mapUnitPropTo('marginTop', halfUnit),
-  mb: mapUnitPropTo('marginBottom', halfUnit),
-  ml: mapUnitPropTo('marginLeft', halfUnit),
-  mr: mapUnitPropTo('marginRight', halfUnit),
+  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),
   // Padding
   p: mapDirectionalUnitPropTo('padding', halfUnit, [
-    'Top',
-    'Bottom',
-    'Left',
-    'Right',
+    'top',
+    'bottom',
+    'left',
+    'right',
   ]),
-  px: mapDirectionalUnitPropTo('padding', halfUnit, ['Left', 'Right']),
-  py: mapDirectionalUnitPropTo('padding', halfUnit, ['Top', 'Bottom']),
-  pt: mapUnitPropTo('paddingTop', halfUnit),
-  pb: mapUnitPropTo('paddingBottom', halfUnit),
-  pl: mapUnitPropTo('paddingLeft', halfUnit),
-  pr: mapUnitPropTo('paddingRight', halfUnit),
+  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),
+  pr: mapUnitPropTo('padding-right', halfUnit),
   // Color props
   color: mapColorPropTo('color'),
   textColor: mapColorPropTo('color'),
-  backgroundColor: mapColorPropTo('backgroundColor'),
-
+  backgroundColor: mapColorPropTo('background-color'),
   // Utility props
   fillPositionedParent: (style, value) => {
     if (value) {
@@ -194,42 +202,44 @@ const stringStyleMap = {
       style['right'] = 0;
     }
   },
-} as const;
-
-// Boolean props
-const booleanStyleMap = {
-  bold: mapBooleanPropTo('fontWeight', 'bold'),
-  inline: mapBooleanPropTo('display', 'inline-block'),
-  italic: mapBooleanPropTo('fontStyle', 'italic'),
-  nowrap: mapBooleanPropTo('whiteSpace', 'nowrap'),
-  preserveWhitespace: mapBooleanPropTo('whiteSpace', 'pre-wrap'),
-} as const;
-
-export const computeBoxProps = (props) => {
-  const computedProps: Record<string, any> = {};
-  const computedStyles: Record<string, string | number> = {};
+};
 
+export const computeBoxProps = (props: BoxProps) => {
+  const computedProps: HTMLAttributes<any> = {};
+  const computedStyles = {};
   // Compute props
   for (let propName of Object.keys(props)) {
     if (propName === 'style') {
       continue;
     }
-
+    // IE8: onclick workaround
+    if (Byond.IS_LTE_IE8 && propName === 'onClick') {
+      computedProps.onclick = props[propName];
+      continue;
+    }
     const propValue = props[propName];
-
-    const mapPropToStyle =
-      stringStyleMap[propName] || booleanStyleMap[propName];
-
+    const mapPropToStyle = styleMapperByPropName[propName];
     if (mapPropToStyle) {
       mapPropToStyle(computedStyles, propValue);
     } else {
       computedProps[propName] = propValue;
     }
   }
-
-  // Merge computed styles and any directly provided styles
-  computedProps.style = { ...computedStyles, ...props.style };
-
+  // Concatenate styles
+  let style = '';
+  for (let attrName of Object.keys(computedStyles)) {
+    const attrValue = computedStyles[attrName];
+    style += attrName + ':' + attrValue + ';';
+  }
+  if (props.style) {
+    for (let attrName of Object.keys(props.style)) {
+      const attrValue = props.style[attrName];
+      style += attrName + ':' + attrValue + ';';
+    }
+  }
+  if (style.length > 0) {
+    computedProps.style = style;
+  }
   return computedProps;
 };
 
@@ -242,26 +252,27 @@ export const computeBoxClassName = (props: BoxProps) => {
   ]);
 };
 
-export const Box = (props: BoxProps) => {
+export const Box: SFC<BoxProps> = (props: BoxProps) => {
   const { as = 'div', className, children, ...rest } = props;
-
-  // Compute class name and styles
-  const computedClassName = className
-    ? `${className} ${computeBoxClassName(rest)}`
-    : computeBoxClassName(rest);
-  const computedProps = computeBoxProps(rest);
-
-  if (as === 'img') {
-    computedProps.style['-ms-interpolation-mode'] = 'nearest-neighbor';
+  // Render props
+  if (typeof children === 'function') {
+    return children(computeBoxProps(props));
   }
-
-  // Render the component
-  return createElement(
-    typeof as === 'string' ? as : 'div',
-    {
-      ...computedProps,
-      className: computedClassName,
-    },
-    children
+  const computedClassName =
+    typeof className === 'string'
+      ? className + ' ' + computeBoxClassName(rest)
+      : computeBoxClassName(rest);
+  const computedProps = computeBoxProps(rest);
+  // Render a wrapper element
+  return createVNode(
+    VNodeFlags.HtmlElement,
+    as,
+    computedClassName,
+    children,
+    ChildFlags.UnknownChildren,
+    computedProps,
+    undefined
   );
 };
+
+Box.defaultHooks = pureComponentHooks;
diff --git a/tgui/packages/tgui/components/Button.jsx b/tgui/packages/tgui/components/Button.jsx
index b31e8d459de..ef434d04c7a 100644
--- a/tgui/packages/tgui/components/Button.jsx
+++ b/tgui/packages/tgui/components/Button.jsx
@@ -5,12 +5,15 @@
  */
 
 import { KEY_ENTER, KEY_ESCAPE, KEY_SPACE } from 'common/keycodes';
-import { classes } from 'common/react';
-import { Component, createRef } from 'react';
+import { classes, pureComponentHooks } from 'common/react';
+import { Component, createRef } from 'inferno';
+import { createLogger } from '../logging';
 import { Box, computeBoxClassName, computeBoxProps } from './Box';
 import { Icon } from './Icon';
 import { Tooltip } from './Tooltip';
 
+const logger = createLogger('Button');
+
 export const Button = (props) => {
   const {
     className,
@@ -30,18 +33,30 @@ export const Button = (props) => {
     circular,
     content,
     children,
+    onclick,
     onClick,
     verticalAlignContent,
     ...rest
   } = props;
   const hasContent = !!(content || children);
-
+  // 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`
+    );
+  }
   rest.onClick = (e) => {
     if (!disabled && onClick) {
       onClick(e);
     }
   };
-
+  // IE8: Use "unselectable" because "user-select" doesn't work.
+  if (Byond.IS_LTE_IE8) {
+    rest.unselectable = true;
+  }
   let buttonContent = (
     <div
       className={classes([
@@ -119,6 +134,8 @@ export const Button = (props) => {
   return buttonContent;
 };
 
+Button.defaultHooks = pureComponentHooks;
+
 export const ButtonCheckbox = (props) => {
   const { checked, ...rest } = props;
   return (
@@ -134,8 +151,8 @@ export const ButtonCheckbox = (props) => {
 Button.Checkbox = ButtonCheckbox;
 
 export class ButtonConfirm extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       clickedOnce: false,
     };
@@ -185,8 +202,8 @@ export class ButtonConfirm extends Component {
 Button.Confirm = ButtonConfirm;
 
 export class ButtonInput extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.inputRef = createRef();
     this.state = {
       inInput: false,
@@ -255,8 +272,8 @@ export class ButtonInput extends Component {
           ref={this.inputRef}
           className="NumberInput__input"
           style={{
-            display: !this.state.inInput ? 'none' : '',
-            textAlign: 'left',
+            'display': !this.state.inInput ? 'none' : undefined,
+            'text-align': 'left',
           }}
           onBlur={(e) => {
             if (!this.state.inInput) {
@@ -294,8 +311,8 @@ export class ButtonInput extends Component {
 Button.Input = ButtonInput;
 
 export class ButtonFile extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.inputRef = createRef();
   }
 
diff --git a/tgui/packages/tgui/components/ByondUi.jsx b/tgui/packages/tgui/components/ByondUi.jsx
index 2914bb89058..4623fe57701 100644
--- a/tgui/packages/tgui/components/ByondUi.jsx
+++ b/tgui/packages/tgui/components/ByondUi.jsx
@@ -6,7 +6,7 @@
 
 import { shallowDiffers } from 'common/react';
 import { debounce } from 'common/timer';
-import { Component, createRef } from 'react';
+import { Component, createRef } from 'inferno';
 import { createLogger } from '../logging';
 import { computeBoxProps } from './Box';
 
@@ -92,12 +92,20 @@ export class ByondUi extends Component {
   }
 
   componentDidMount() {
+    // IE8: It probably works, but fuck you anyway.
+    if (Byond.IS_LTE_IE10) {
+      return;
+    }
     window.addEventListener('resize', this.handleResize);
     this.componentDidUpdate();
     this.handleResize();
   }
 
   componentDidUpdate() {
+    // IE8: It probably works, but fuck you anyway.
+    if (Byond.IS_LTE_IE10) {
+      return;
+    }
     const { params = {} } = this.props;
     const box = getBoundingBox(this.containerRef.current);
     logger.debug('bounding box', box);
@@ -110,6 +118,10 @@ export class ByondUi extends Component {
   }
 
   componentWillUnmount() {
+    // IE8: It probably works, but fuck you anyway.
+    if (Byond.IS_LTE_IE10) {
+      return;
+    }
     window.removeEventListener('resize', this.handleResize);
     this.byondUiElement.unmount();
   }
@@ -119,7 +131,7 @@ export class ByondUi extends Component {
     return (
       <div ref={this.containerRef} {...computeBoxProps(rest)}>
         {/* Filler */}
-        <div style={{ minHeight: '22px' }} />
+        <div style={{ 'min-height': '22px' }} />
       </div>
     );
   }
diff --git a/tgui/packages/tgui/components/Chart.tsx b/tgui/packages/tgui/components/Chart.jsx
similarity index 53%
rename from tgui/packages/tgui/components/Chart.tsx
rename to tgui/packages/tgui/components/Chart.jsx
index 795475d7c8e..fac444bd1da 100644
--- a/tgui/packages/tgui/components/Chart.tsx
+++ b/tgui/packages/tgui/components/Chart.jsx
@@ -5,56 +5,29 @@
  */
 
 import { map, zipWith } from 'common/collections';
-import { Component, createRef, RefObject } from 'react';
-import { Box, BoxProps } from './Box';
+import { pureComponentHooks } from 'common/react';
+import { Component, createRef } from 'inferno';
+import { Box } from './Box';
 
-type Props = {
-  data: number[][];
-} & Partial<{
-  fillColor: string;
-  rangeX: [number, number];
-  rangeY: [number, number];
-  strokeColor: string;
-  strokeWidth: number;
-}> &
-  BoxProps;
-
-type State = {
-  viewBox: [number, number];
-};
-
-type Point = number[];
-type Range = [number, number];
-
-const normalizeData = (
-  data: Point[],
-  scale: number[],
-  rangeX?: Range,
-  rangeY?: Range
-) => {
+const normalizeData = (data, scale, rangeX, rangeY) => {
   if (data.length === 0) {
     return [];
   }
-
   const min = zipWith(Math.min)(...data);
   const max = zipWith(Math.max)(...data);
-
   if (rangeX !== undefined) {
     min[0] = rangeX[0];
     max[0] = rangeX[1];
   }
-
   if (rangeY !== undefined) {
     min[1] = rangeY[0];
     max[1] = rangeY[1];
   }
-
-  const normalized = map((point: Point) => {
-    return zipWith((value: number, min: number, max: number, scale: number) => {
+  const normalized = map((point) => {
+    return zipWith((value, min, max, scale) => {
       return ((value - min) / (max - min)) * scale;
     })(point, min, max, scale);
   })(data);
-
   return normalized;
 };
 
@@ -67,18 +40,20 @@ const dataToPolylinePoints = (data) => {
   return points;
 };
 
-class LineChart extends Component<Props> {
-  ref: RefObject<HTMLDivElement>;
-  state: State;
-
-  constructor(props: Props) {
+class LineChart extends Component {
+  constructor(props) {
     super(props);
     this.ref = createRef();
     this.state = {
       // Initial guess
       viewBox: [600, 200],
     };
-    this.handleResize = this.handleResize.bind(this);
+    this.handleResize = () => {
+      const element = this.ref.current;
+      this.setState({
+        viewBox: [element.offsetWidth, element.offsetHeight],
+      });
+    };
   }
 
   componentDidMount() {
@@ -90,16 +65,6 @@ class LineChart extends Component<Props> {
     window.removeEventListener('resize', this.handleResize);
   }
 
-  handleResize = () => {
-    const element = this.ref.current;
-    if (!element) {
-      return;
-    }
-    this.setState({
-      viewBox: [element.offsetWidth, element.offsetHeight],
-    });
-  };
-
   render() {
     const {
       data = [],
@@ -122,36 +87,41 @@ class LineChart extends Component<Props> {
       normalized.push([-strokeWidth, first[1]]);
     }
     const points = dataToPolylinePoints(normalized);
-    const divProps = { ...rest, className: '', ref: this.ref };
-
     return (
       <Box position="relative" {...rest}>
-        <Box {...divProps}>
-          <svg
-            viewBox={`0 0 ${viewBox[0]} ${viewBox[1]}`}
-            preserveAspectRatio="none"
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              overflow: 'hidden',
-            }}>
-            <polyline
-              transform={`scale(1, -1) translate(0, -${viewBox[1]})`}
-              fill={fillColor}
-              stroke={strokeColor}
-              strokeWidth={strokeWidth}
-              points={points}
-            />
-          </svg>
-        </Box>
+        {(props) => (
+          <div ref={this.ref} {...props}>
+            <svg
+              viewBox={`0 0 ${viewBox[0]} ${viewBox[1]}`}
+              preserveAspectRatio="none"
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                overflow: 'hidden',
+              }}>
+              <polyline
+                transform={`scale(1, -1) translate(0, -${viewBox[1]})`}
+                fill={fillColor}
+                stroke={strokeColor}
+                strokeWidth={strokeWidth}
+                points={points}
+              />
+            </svg>
+          </div>
+        )}
       </Box>
     );
   }
 }
 
+LineChart.defaultHooks = pureComponentHooks;
+
+const Stub = (props) => null;
+
+// IE8: No inline svg support
 export const Chart = {
-  Line: LineChart,
+  Line: Byond.IS_LTE_IE8 ? Stub : LineChart,
 };
diff --git a/tgui/packages/tgui/components/Collapsible.jsx b/tgui/packages/tgui/components/Collapsible.jsx
index 805fc7d129c..f91eeddb456 100644
--- a/tgui/packages/tgui/components/Collapsible.jsx
+++ b/tgui/packages/tgui/components/Collapsible.jsx
@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { Component } from 'react';
+import { Component } from 'inferno';
 import { Box } from './Box';
 import { Button } from './Button';
 
diff --git a/tgui/packages/tgui/components/ColorBox.jsx b/tgui/packages/tgui/components/ColorBox.jsx
index ce3c202d8cd..a6203ca4694 100644
--- a/tgui/packages/tgui/components/ColorBox.jsx
+++ b/tgui/packages/tgui/components/ColorBox.jsx
@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { classes } from 'common/react';
+import { classes, pureComponentHooks } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 
 export const ColorBox = (props) => {
@@ -27,3 +27,5 @@ export const ColorBox = (props) => {
     </div>
   );
 };
+
+ColorBox.defaultHooks = pureComponentHooks;
diff --git a/tgui/packages/tgui/components/DraggableControl.jsx b/tgui/packages/tgui/components/DraggableControl.jsx
index 456f804a0ed..8ada6f2fa4d 100644
--- a/tgui/packages/tgui/components/DraggableControl.jsx
+++ b/tgui/packages/tgui/components/DraggableControl.jsx
@@ -5,7 +5,8 @@
  */
 
 import { clamp } from 'common/math';
-import { Component, createRef } from 'react';
+import { pureComponentHooks } from 'common/react';
+import { Component, createRef } from 'inferno';
 import { AnimatedNumber } from './AnimatedNumber';
 
 const DEFAULT_UPDATE_RATE = 400;
@@ -195,8 +196,8 @@ export class DraggableControl extends Component {
         style={{
           display: !editing ? 'none' : undefined,
           height: height,
-          lineHeight: lineHeight,
-          fontsize: fontSize,
+          'line-height': lineHeight,
+          'font-size': fontSize,
         }}
         onBlur={(e) => {
           if (!editing) {
@@ -275,6 +276,7 @@ export class DraggableControl extends Component {
   }
 }
 
+DraggableControl.defaultHooks = pureComponentHooks;
 DraggableControl.defaultProps = {
   minValue: -Infinity,
   maxValue: +Infinity,
diff --git a/tgui/packages/tgui/components/Dropdown.tsx b/tgui/packages/tgui/components/Dropdown.tsx
index 444c96bab90..7fa0e3ae8d1 100644
--- a/tgui/packages/tgui/components/Dropdown.tsx
+++ b/tgui/packages/tgui/components/Dropdown.tsx
@@ -1,36 +1,33 @@
 import { createPopper, VirtualElement } from '@popperjs/core';
 import { classes } from 'common/react';
-import { Component, ReactNode } from 'react';
-import { findDOMNode, render } from 'react-dom';
+import { Component, findDOMfromVNode, InfernoNode, render } from 'inferno';
 import { Box, BoxProps } from './Box';
 import { Button } from './Button';
 import { Icon } from './Icon';
 import { Stack } from './Stack';
 
 export interface DropdownEntry {
-  displayText: string | number | ReactNode;
+  displayText: string | number | InfernoNode;
   value: string | number | Enumerator;
 }
 
-type DropdownUniqueProps = { options: string[] | DropdownEntry[] } & Partial<{
-  buttons: boolean;
-  clipSelectedText: boolean;
-  color: string;
-  disabled: boolean;
-  displayText: string | number | ReactNode;
-  dropdownStyle: any;
-  icon: string;
-  iconRotation: number;
-  iconSpin: boolean;
-  menuWidth: string;
-  nochevron: boolean;
-  onClick: (event) => void;
-  onSelected: (selected: any) => void;
-  over: boolean;
+type DropdownUniqueProps = {
+  options: string[] | DropdownEntry[];
+  icon?: string;
+  iconRotation?: number;
+  clipSelectedText?: boolean;
+  width?: string;
+  menuWidth?: string;
+  over?: boolean;
+  color?: string;
+  nochevron?: boolean;
+  displayText?: string | number | InfernoNode;
+  onClick?: (event) => void;
   // you freaks really are just doing anything with this shit
-  selected: any;
-  width: string;
-}>;
+  selected?: any;
+  onSelected?: (selected: any) => void;
+  buttons?: boolean;
+};
 
 export type DropdownProps = BoxProps & DropdownUniqueProps;
 
@@ -84,8 +81,7 @@ export class Dropdown extends Component<DropdownProps, DropdownState> {
   };
 
   getDOMNode() {
-    // eslint-disable-next-line react/no-find-dom-node
-    return findDOMNode(this) as Element;
+    return findDOMfromVNode(this.$LI, true);
   }
 
   componentDidMount() {
@@ -109,7 +105,11 @@ export class Dropdown extends Component<DropdownProps, DropdownState> {
     Dropdown.currentOpenMenu = domNode;
 
     renderedMenu.scrollTop = 0;
-    renderedMenu.style.width = this.props.menuWidth || '10rem';
+    renderedMenu.style.width =
+      this.props.menuWidth ||
+      // Hack, but domNode should *always* be the parent control meaning it will have width
+      // @ts-ignore
+      `${domNode.offsetWidth}px`;
     renderedMenu.style.opacity = '1';
     renderedMenu.style.pointerEvents = 'auto';
 
diff --git a/tgui/packages/tgui/components/FakeTerminal.jsx b/tgui/packages/tgui/components/FakeTerminal.jsx
index f97f7e6bf3a..d6479a25796 100644
--- a/tgui/packages/tgui/components/FakeTerminal.jsx
+++ b/tgui/packages/tgui/components/FakeTerminal.jsx
@@ -1,5 +1,5 @@
 import { Box } from './Box';
-import { Component, Fragment } from 'react';
+import { Component, Fragment } from 'inferno';
 
 export class FakeTerminal extends Component {
   constructor(props) {
diff --git a/tgui/packages/tgui/components/FitText.tsx b/tgui/packages/tgui/components/FitText.tsx
index 63bc1c0132d..334eb970733 100644
--- a/tgui/packages/tgui/components/FitText.tsx
+++ b/tgui/packages/tgui/components/FitText.tsx
@@ -1,4 +1,4 @@
-import { Component, createRef, HTMLAttributes, PropsWithChildren, RefObject } from 'react';
+import { Component, createRef, RefObject } from 'inferno';
 
 const DEFAULT_ACCEPTABLE_DIFFERENCE = 5;
 
@@ -7,7 +7,7 @@ type Props = {
   maxWidth: number;
   maxFontSize: number;
   native?: HTMLAttributes<HTMLDivElement>;
-} & PropsWithChildren;
+};
 
 type State = {
   fontSize: number;
@@ -19,8 +19,8 @@ export class FitText extends Component<Props, State> {
     fontSize: 0,
   };
 
-  constructor(props: Props) {
-    super(props);
+  constructor() {
+    super();
 
     this.resize = this.resize.bind(this);
 
@@ -80,10 +80,9 @@ export class FitText extends Component<Props, State> {
       <span
         ref={this.ref}
         style={{
-          fontSize: `${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 da063f0296f..f67738280ba 100644
--- a/tgui/packages/tgui/components/Flex.tsx
+++ b/tgui/packages/tgui/components/Flex.tsx
@@ -4,19 +4,16 @@
  * @license MIT
  */
 
-import { classes } from 'common/react';
+import { BooleanLike, classes, pureComponentHooks } from 'common/react';
 import { BoxProps, computeBoxClassName, computeBoxProps, unit } from './Box';
 
-export type FlexProps = Partial<{
-  align: string | boolean;
-  direction: string;
-  inline: boolean;
-  justify: string;
-  scrollable: boolean;
-  style: Partial<HTMLDivElement['style']>;
-  wrap: string | boolean;
-}> &
-  BoxProps;
+export type FlexProps = BoxProps & {
+  direction?: string | BooleanLike;
+  wrap?: string | BooleanLike;
+  align?: string | BooleanLike;
+  justify?: string | BooleanLike;
+  inline?: BooleanLike;
+};
 
 export const computeFlexClassName = (props: FlexProps) => {
   return classes([
@@ -30,14 +27,13 @@ export const computeFlexClassName = (props: FlexProps) => {
 
 export const computeFlexProps = (props: FlexProps) => {
   const { className, direction, wrap, align, justify, inline, ...rest } = props;
-
   return computeBoxProps({
     style: {
       ...rest.style,
-      flexDirection: direction,
-      flexWrap: wrap === true ? 'wrap' : wrap,
-      alignItems: align,
-      justifyContent: justify,
+      'flex-direction': direction,
+      'flex-wrap': wrap === true ? 'wrap' : wrap,
+      'align-items': align,
+      'justify-content': justify,
     },
     ...rest,
   });
@@ -53,15 +49,15 @@ export const Flex = (props) => {
   );
 };
 
-export type FlexItemProps = BoxProps &
-  Partial<{
-    grow: number | boolean;
-    order: number;
-    shrink: number | boolean;
-    basis: string | number;
-    align: string | boolean;
-    style: Partial<HTMLDivElement['style']>;
-  }>;
+Flex.defaultHooks = pureComponentHooks;
+
+export type FlexItemProps = BoxProps & {
+  grow?: number;
+  order?: number;
+  shrink?: number;
+  basis?: string | BooleanLike;
+  align?: string | BooleanLike;
+};
 
 export const computeFlexItemClassName = (props: FlexItemProps) => {
   return classes([
@@ -72,26 +68,33 @@ export const computeFlexItemClassName = (props: FlexItemProps) => {
 };
 
 export const computeFlexItemProps = (props: FlexItemProps) => {
-  const { className, style, grow, order, shrink, basis, align, ...rest } =
-    props;
-
-  const computedBasis =
-    basis ??
+  // prettier-ignore
+  const {
+    className,
+    style,
+    grow,
+    order,
+    shrink,
+    basis,
+    align,
+    ...rest
+  } = props;
+  // prettier-ignore
+  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,
-      flexGrow: grow !== undefined && Number(grow),
-      flexShrink: shrink !== undefined && Number(shrink),
-      flexBasis: unit(computedBasis),
-      order: order,
-      alignSelf: align,
+      'flex-grow': grow !== undefined && Number(grow),
+      'flex-shrink': shrink !== undefined && Number(shrink),
+      'flex-basis': unit(computedBasis),
+      'order': order,
+      'align-self': align,
     },
     ...rest,
   });
@@ -107,4 +110,6 @@ const FlexItem = (props) => {
   );
 };
 
+FlexItem.defaultHooks = pureComponentHooks;
+
 Flex.Item = FlexItem;
diff --git a/tgui/packages/tgui/components/Grid.jsx b/tgui/packages/tgui/components/Grid.jsx
index f5593c9e00a..7ad3fd1dfdb 100644
--- a/tgui/packages/tgui/components/Grid.jsx
+++ b/tgui/packages/tgui/components/Grid.jsx
@@ -5,6 +5,7 @@
  */
 
 import { Table } from './Table';
+import { pureComponentHooks } from 'common/react';
 
 /** @deprecated */
 export const Grid = (props) => {
@@ -16,6 +17,8 @@ export const Grid = (props) => {
   );
 };
 
+Grid.defaultHooks = pureComponentHooks;
+
 /** @deprecated */
 export const GridColumn = (props) => {
   const { size = 1, style, ...rest } = props;
@@ -30,4 +33,6 @@ export const GridColumn = (props) => {
   );
 };
 
+Grid.defaultHooks = pureComponentHooks;
+
 Grid.Column = GridColumn;
diff --git a/tgui/packages/tgui/components/Icon.tsx b/tgui/packages/tgui/components/Icon.tsx
index 02f07bea09b..da8b6af26af 100644
--- a/tgui/packages/tgui/components/Icon.tsx
+++ b/tgui/packages/tgui/components/Icon.tsx
@@ -6,19 +6,20 @@
  * @license MIT
  */
 
-import { classes } from 'common/react';
-import { ReactNode } from 'react';
+import { classes, pureComponentHooks } from 'common/react';
+import { InfernoNode } from 'inferno';
 import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
 
 const FA_OUTLINE_REGEX = /-o$/;
 
-type IconPropsUnique = { name: string } & Partial<{
-  size: number;
-  spin: boolean;
-  className: string;
-  rotation: number;
-  style: Partial<HTMLDivElement['style']>;
-}>;
+type IconPropsUnique = {
+  name: string;
+  size?: number;
+  spin?: boolean;
+  className?: string;
+  rotation?: number;
+  style?: string | CSSProperties;
+};
 
 export type IconProps = IconPropsUnique & BoxProps;
 
@@ -30,7 +31,7 @@ export const Icon = (props: IconProps) => {
     if (!style) {
       style = {};
     }
-    style['fontSize'] = size * 100 + '%';
+    style['font-size'] = size * 100 + '%';
   }
   if (rotation) {
     if (!style) {
@@ -74,8 +75,10 @@ export const Icon = (props: IconProps) => {
   );
 };
 
+Icon.defaultHooks = pureComponentHooks;
+
 type IconStackUnique = {
-  children: ReactNode;
+  children: InfernoNode;
   className?: string;
 };
 
@@ -85,7 +88,7 @@ export const IconStack = (props: IconStackProps) => {
   const { className, children, ...rest } = props;
   return (
     <span
-      className={classes(['IconStack', className, computeBoxClassName(rest)])}
+      class={classes(['IconStack', className, computeBoxClassName(rest)])}
       {...computeBoxProps(rest)}>
       {children}
     </span>
diff --git a/tgui/packages/tgui/components/InfinitePlane.jsx b/tgui/packages/tgui/components/InfinitePlane.jsx
index c7b3aff382f..74f60f1e4d4 100644
--- a/tgui/packages/tgui/components/InfinitePlane.jsx
+++ b/tgui/packages/tgui/components/InfinitePlane.jsx
@@ -2,7 +2,7 @@ import { computeBoxProps } from './Box';
 import { Stack } from './Stack';
 import { ProgressBar } from './ProgressBar';
 import { Button } from './Button';
-import { Component } from 'react';
+import { Component } from 'inferno';
 
 const ZOOM_MIN_VAL = 0.5;
 const ZOOM_MAX_VAL = 1.5;
@@ -10,8 +10,8 @@ const ZOOM_MAX_VAL = 1.5;
 const ZOOM_INCREMENT = 0.1;
 
 export class InfinitePlane extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
 
     this.state = {
       mouseDown: false,
@@ -144,24 +144,24 @@ export class InfinitePlane extends Component {
           onMouseDown={this.handleMouseDown}
           onMouseMove={this.handleMouseMove}
           style={{
-            position: 'fixed',
-            height: '100%',
-            width: '100%',
-            backgroundImage: `url("${backgroundImage}")`,
-            backgroundPosition: `${finalLeft}px ${finalTop}px`,
-            backgroundRepeat: 'repeat',
-            backgroundSize: `${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})`,
-            transformOrigin: '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>
diff --git a/tgui/packages/tgui/components/Input.jsx b/tgui/packages/tgui/components/Input.jsx
index b6bcbf84936..ac7ce6eef36 100644
--- a/tgui/packages/tgui/components/Input.jsx
+++ b/tgui/packages/tgui/components/Input.jsx
@@ -6,7 +6,7 @@
 
 import { KEY_ENTER, KEY_ESCAPE } from 'common/keycodes';
 import { classes } from 'common/react';
-import { Component, createRef } from 'react';
+import { Component, createRef } from 'inferno';
 import { Box } from './Box';
 
 // prettier-ignore
@@ -17,8 +17,8 @@ export const toInputValue = value => (
 );
 
 export class Input extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.inputRef = createRef();
     this.state = {
       editing: false,
diff --git a/tgui/packages/tgui/components/KeyListener.tsx b/tgui/packages/tgui/components/KeyListener.tsx
index d401642a3cf..62509cae96d 100644
--- a/tgui/packages/tgui/components/KeyListener.tsx
+++ b/tgui/packages/tgui/components/KeyListener.tsx
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component } from 'inferno';
 import { KeyEvent } from '../events';
 import { listenForKeyEvents } from '../hotkeys';
 
@@ -11,8 +11,8 @@ type KeyListenerProps = Partial<{
 export class KeyListener extends Component<KeyListenerProps> {
   dispose: () => void;
 
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
 
     this.dispose = listenForKeyEvents((key) => {
       if (this.props.onKey) {
diff --git a/tgui/packages/tgui/components/Knob.jsx b/tgui/packages/tgui/components/Knob.jsx
index be04a6de9b7..1d40ff1ed23 100644
--- a/tgui/packages/tgui/components/Knob.jsx
+++ b/tgui/packages/tgui/components/Knob.jsx
@@ -8,8 +8,14 @@ import { keyOfMatchingRange, scale } from 'common/math';
 import { classes } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 import { DraggableControl } from './DraggableControl';
+import { NumberInput } from './NumberInput';
 
 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} />;
+  }
   const {
     // Draggable props (passthrough)
     animated,
@@ -82,7 +88,7 @@ export const Knob = (props) => {
             ])}
             {...computeBoxProps({
               style: {
-                fontSize: size + 'em',
+                'font-size': size + 'em',
                 ...style,
               },
               ...rest,
@@ -111,7 +117,7 @@ export const Knob = (props) => {
               <circle
                 className="Knob__ringFill"
                 style={{
-                  strokeDashoffset: Math.max(
+                  'stroke-dashoffset': Math.max(
                     ((bipolar ? 2.75 : 2.0) - scaledFillValue * 1.5) *
                       Math.PI *
                       50,
diff --git a/tgui/packages/tgui/components/LabeledList.tsx b/tgui/packages/tgui/components/LabeledList.tsx
index a08c1be36fe..d89423aded2 100644
--- a/tgui/packages/tgui/components/LabeledList.tsx
+++ b/tgui/packages/tgui/components/LabeledList.tsx
@@ -4,29 +4,34 @@
  * @license MIT
  */
 
-import { BooleanLike, classes } from 'common/react';
-import { PropsWithChildren, ReactNode } from 'react';
+import { BooleanLike, classes, pureComponentHooks } from 'common/react';
+import { InfernoNode } from 'inferno';
 import { Box, unit } from './Box';
 import { Divider } from './Divider';
 import { Tooltip } from './Tooltip';
 
-export const LabeledList = (props: PropsWithChildren) => {
+type LabeledListProps = {
+  children?: any;
+};
+
+export const LabeledList = (props: LabeledListProps) => {
   const { children } = props;
   return <table className="LabeledList">{children}</table>;
 };
 
+LabeledList.defaultHooks = pureComponentHooks;
+
 type LabeledListItemProps = Partial<{
-  buttons: ReactNode;
   className: string | BooleanLike;
-  color: string;
-  key: string | number;
-  label: string | ReactNode | BooleanLike;
-  labelColor: string;
+  label: string | InfernoNode | BooleanLike;
+  labelColor: string | BooleanLike;
   labelWrap: boolean;
-  textAlign: string;
+  color: string | BooleanLike;
+  textAlign: string | BooleanLike;
+  buttons: InfernoNode;
   /** @deprecated */
   content: any;
-  children: ReactNode;
+  children: InfernoNode;
   verticalAlign: string;
   tooltip: string;
 }>;
@@ -58,7 +63,7 @@ const LabeledListItem = (props: LabeledListItemProps) => {
         <Box
           as="span"
           style={{
-            borderBottom: '2px dotted rgba(255, 255, 255, 0.8)',
+            'border-bottom': '2px dotted rgba(255, 255, 255, 0.8)',
           }}>
           {innerLabel}
         </Box>
@@ -100,6 +105,8 @@ const LabeledListItem = (props: LabeledListItemProps) => {
   );
 };
 
+LabeledListItem.defaultHooks = pureComponentHooks;
+
 type LabeledListDividerProps = {
   size?: number;
 };
@@ -111,8 +118,8 @@ const LabeledListDivider = (props: LabeledListDividerProps) => {
       <td
         colSpan={3}
         style={{
-          paddingTop: padding,
-          paddingBottom: padding,
+          'padding-top': padding,
+          'padding-bottom': padding,
         }}>
         <Divider />
       </td>
@@ -120,5 +127,7 @@ const LabeledListDivider = (props: LabeledListDividerProps) => {
   );
 };
 
+LabeledListDivider.defaultHooks = pureComponentHooks;
+
 LabeledList.Item = LabeledListItem;
 LabeledList.Divider = LabeledListDivider;
diff --git a/tgui/packages/tgui/components/MenuBar.tsx b/tgui/packages/tgui/components/MenuBar.tsx
index 6547973a708..35de61ec9cd 100644
--- a/tgui/packages/tgui/components/MenuBar.tsx
+++ b/tgui/packages/tgui/components/MenuBar.tsx
@@ -5,7 +5,7 @@
  */
 
 import { classes } from 'common/react';
-import { Component, createRef, ReactNode, RefObject } from 'react';
+import { Component, createRef, InfernoNode, RefObject } from 'inferno';
 import { Box } from './Box';
 import { logger } from '../logging';
 import { Icon } from './Icon';
@@ -105,8 +105,8 @@ class MenuBarButton extends Component<MenuBarDropdownProps> {
             className,
           ])}
           {...rest}
-          onClick={disabled ? () => null : onClick}
-          onMouseOver={onMouseOver}>
+          onClick={disabled ? undefined : onClick}
+          onmouseover={onMouseOver}>
           <span className="MenuBar__MenuBarButton-text">{display}</span>
         </Box>
         {open && (
@@ -126,7 +126,7 @@ type MenuBarItemProps = {
   entry: string;
   children: any;
   openWidth: string;
-  display: ReactNode;
+  display: InfernoNode;
   setOpenMenuBar: (entry: string | null) => void;
   openMenuBar: string | null;
   setOpenOnHover: (flag: boolean) => void;
diff --git a/tgui/packages/tgui/components/NoticeBox.jsx b/tgui/packages/tgui/components/NoticeBox.jsx
index 09e205b46be..1c3b49b16a5 100644
--- a/tgui/packages/tgui/components/NoticeBox.jsx
+++ b/tgui/packages/tgui/components/NoticeBox.jsx
@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { classes } from 'common/react';
+import { classes, pureComponentHooks } from 'common/react';
 import { Box } from './Box';
 
 export const NoticeBox = (props) => {
@@ -23,3 +23,5 @@ export const NoticeBox = (props) => {
     />
   );
 };
+
+NoticeBox.defaultHooks = pureComponentHooks;
diff --git a/tgui/packages/tgui/components/NumberInput.jsx b/tgui/packages/tgui/components/NumberInput.jsx
index 1910c14eb88..e264d811d37 100644
--- a/tgui/packages/tgui/components/NumberInput.jsx
+++ b/tgui/packages/tgui/components/NumberInput.jsx
@@ -5,8 +5,8 @@
  */
 
 import { clamp } from 'common/math';
-import { classes } from 'common/react';
-import { Component, createRef } from 'react';
+import { classes, pureComponentHooks } from 'common/react';
+import { Component, createRef } from 'inferno';
 import { AnimatedNumber } from './AnimatedNumber';
 import { Box } from './Box';
 
@@ -165,15 +165,14 @@ export class NumberInput extends Component {
       displayValue = intermediateValue;
     }
 
+    // prettier-ignore
     const contentElement = (
-      <div className="NumberInput__content">
-        {animated && !dragging && !suppressingFlicker ? (
-          <AnimatedNumber value={displayValue} format={format} />
-        ) : format ? (
-          format(displayValue)
-        ) : (
-          displayValue
-        )}
+      <div className="NumberInput__content" unselectable={Byond.IS_LTE_IE8}>
+        {
+          (animated && !dragging && !suppressingFlicker) ?
+            (<AnimatedNumber value={displayValue} format={format} />) :
+            (format ? format(displayValue) : displayValue)
+        }
 
         {unit ? ' ' + unit : ''}
       </div>
@@ -195,12 +194,10 @@ export class NumberInput extends Component {
           <div
             className="NumberInput__bar"
             style={{
-              height:
-                clamp(
-                  ((displayValue - minValue) / (maxValue - minValue)) * 100,
-                  0,
-                  100
-                ) + '%',
+              // prettier-ignore
+              height: clamp(
+                (displayValue - minValue) / (maxValue - minValue) * 100,
+                0, 100) + '%',
             }}
           />
         </div>
@@ -211,8 +208,8 @@ export class NumberInput extends Component {
           style={{
             display: !editing ? 'none' : undefined,
             height: height,
-            lineHeight: lineHeight,
-            fontSize: fontSize,
+            'line-height': lineHeight,
+            'font-size': fontSize,
           }}
           onBlur={(e) => {
             if (!editing) {
@@ -277,6 +274,7 @@ export class NumberInput extends Component {
   }
 }
 
+NumberInput.defaultHooks = pureComponentHooks;
 NumberInput.defaultProps = {
   minValue: -Infinity,
   maxValue: +Infinity,
diff --git a/tgui/packages/tgui/components/Popper.tsx b/tgui/packages/tgui/components/Popper.tsx
index 4875aaa4e65..907896d6b8a 100644
--- a/tgui/packages/tgui/components/Popper.tsx
+++ b/tgui/packages/tgui/components/Popper.tsx
@@ -1,23 +1,21 @@
 import { createPopper } from '@popperjs/core';
 import { ArgumentsOf } from 'common/types';
-import { Component, CSSProperties, JSXElementConstructor, PropsWithChildren, ReactElement, RefObject } from 'react';
-import { findDOMNode, render } from 'react-dom';
+import { Component, findDOMfromVNode, InfernoNode, render } from 'inferno';
 
 type PopperProps = {
-  popperContent: ReactElement<any, string | JSXElementConstructor<any>>;
+  popperContent: InfernoNode;
   options?: ArgumentsOf<typeof createPopper>[2];
   additionalStyles?: CSSProperties;
-} & PropsWithChildren;
+};
 
 export class Popper extends Component<PopperProps> {
   static id: number = 0;
-  popperRef: RefObject<HTMLDivElement>;
 
   renderedContent: HTMLDivElement;
   popperInstance: ReturnType<typeof createPopper>;
 
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
 
     Popper.id += 1;
   }
@@ -37,16 +35,15 @@ export class Popper extends Component<PopperProps> {
       document.body.appendChild(this.renderedContent);
 
       // HACK: We don't want to create a wrapper, as it could break the layout
-      // of consumers, so we use findDOMNode.
+      // of consumers, so we do the inferno equivalent of `findDOMNode(this)`.
       // This is usually bad as refs are usually better, but refs did
       // not work in this case, as they weren't propagating correctly.
       // A previous attempt was made as a render prop that passed an ID,
       // but this made consuming use too unwieldly.
+      // This code is copied from `findDOMNode` in inferno-extras.
       // Because this component is written in TypeScript, we will know
       // immediately if this internal variable is removed.
-      //
-      // eslint-disable-next-line react/no-find-dom-node
-      const domNode = findDOMNode(this) as Element;
+      const domNode = findDOMfromVNode(this.$LI, true);
       if (!domNode) {
         return;
       }
@@ -65,7 +62,7 @@ export class Popper extends Component<PopperProps> {
 
   componentWillUnmount() {
     this.popperInstance?.destroy();
-    render(<> </>, this.renderedContent, () => {
+    render(null, this.renderedContent, () => {
       this.renderedContent.remove();
     });
   }
diff --git a/tgui/packages/tgui/components/ProgressBar.tsx b/tgui/packages/tgui/components/ProgressBar.jsx
similarity index 57%
rename from tgui/packages/tgui/components/ProgressBar.tsx
rename to tgui/packages/tgui/components/ProgressBar.jsx
index 23eef869dfd..86116732c3f 100644
--- a/tgui/packages/tgui/components/ProgressBar.tsx
+++ b/tgui/packages/tgui/components/ProgressBar.jsx
@@ -5,29 +5,11 @@
  */
 
 import { clamp01, scale, keyOfMatchingRange, toFixed } from 'common/math';
-import { classes } from 'common/react';
-import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+import { classes, pureComponentHooks } from 'common/react';
+import { computeBoxClassName, computeBoxProps } from './Box';
 import { CSS_COLORS } from '../constants';
-import { PropsWithChildren } from 'react';
 
-type Props = {
-  value: number;
-} & Partial<{
-  backgroundColor: string;
-  className: string;
-  color: string;
-  height: string | number;
-  maxValue: number;
-  minValue: number;
-  ranges: Record<string, [number, number]>;
-  style: Partial<HTMLDivElement['style']>;
-  title: string;
-  width: string | number;
-}> &
-  Partial<BoxProps> &
-  PropsWithChildren;
-
-export const ProgressBar = (props: Props) => {
+export const ProgressBar = (props) => {
   const {
     className,
     value,
@@ -40,25 +22,32 @@ export const ProgressBar = (props: Props) => {
   } = props;
   const scaledValue = scale(value, minValue, maxValue);
   const hasContent = children !== undefined;
-
-  const effectiveColor =
-    color || keyOfMatchingRange(value, ranges) || 'default';
+  // prettier-ignore
+  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)];
+  // prettier-ignore
+  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, borderColor: effectiveColor };
-    fillStyles['backgroundColor'] = effectiveColor;
+    // prettier-ignore
+    outerProps.style = (outerProps.style || "")
+      + `border-color: ${effectiveColor};`;
+    fillStyles['background-color'] = effectiveColor;
   }
 
   return (
@@ -73,3 +62,5 @@ export const ProgressBar = (props: Props) => {
     </div>
   );
 };
+
+ProgressBar.defaultHooks = pureComponentHooks;
diff --git a/tgui/packages/tgui/components/RestrictedInput.jsx b/tgui/packages/tgui/components/RestrictedInput.jsx
index ad2b19d2dc4..1b082296ca5 100644
--- a/tgui/packages/tgui/components/RestrictedInput.jsx
+++ b/tgui/packages/tgui/components/RestrictedInput.jsx
@@ -1,6 +1,6 @@
 import { classes } from 'common/react';
 import { clamp } from 'common/math';
-import { Component, createRef } from 'react';
+import { Component, createRef } from 'inferno';
 import { Box } from './Box';
 import { KEY_ESCAPE, KEY_ENTER } from 'common/keycodes';
 
@@ -29,8 +29,8 @@ const getClampedNumber = (value, minValue, maxValue, allowFloats) => {
 };
 
 export class RestrictedInput extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.inputRef = createRef();
     this.state = {
       editing: false,
diff --git a/tgui/packages/tgui/components/RoundGauge.jsx b/tgui/packages/tgui/components/RoundGauge.jsx
index 84ed208e1de..fb016fa0e4c 100644
--- a/tgui/packages/tgui/components/RoundGauge.jsx
+++ b/tgui/packages/tgui/components/RoundGauge.jsx
@@ -10,6 +10,11 @@ import { AnimatedNumber } from './AnimatedNumber';
 import { Box, computeBoxClassName, computeBoxProps } from './Box';
 
 export const RoundGauge = (props) => {
+  // Support for IE8 is for losers sorry B)
+  if (Byond.IS_LTE_IE8) {
+    return <AnimatedNumber {...props} />;
+  }
+
   const {
     value,
     minValue = 1,
@@ -26,7 +31,7 @@ export const RoundGauge = (props) => {
 
   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) => {
       const range = ranges[x];
@@ -68,7 +73,7 @@ export const RoundGauge = (props) => {
         ])}
         {...computeBoxProps({
           style: {
-            fontSize: size + 'em',
+            'font-size': size + 'em',
             ...style,
           },
           ...rest,
@@ -94,7 +99,7 @@ export const RoundGauge = (props) => {
                   className={`RoundGauge__ringFill RoundGauge--color--${x}`}
                   key={i}
                   style={{
-                    strokeDashoffset: Math.max(
+                    'stroke-dashoffset': Math.max(
                       (2.0 - (col_ranges[1] - col_ranges[0])) * Math.PI * 50,
                       0
                     ),
diff --git a/tgui/packages/tgui/components/Section.tsx b/tgui/packages/tgui/components/Section.tsx
index 9b5170e3774..7399671498d 100644
--- a/tgui/packages/tgui/components/Section.tsx
+++ b/tgui/packages/tgui/components/Section.tsx
@@ -5,78 +5,99 @@
  */
 
 import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
-import { ReactNode, RefObject, createRef, useEffect } from 'react';
+import { Component, InfernoNode, RefObject, createRef } from 'inferno';
 import { addScrollableNode, removeScrollableNode } from '../events';
 import { canRender, classes } from 'common/react';
 
-export type SectionProps = Partial<{
-  buttons: ReactNode;
-  fill: boolean;
-  fitted: boolean;
-  scrollable: boolean;
-  scrollableHorizontal: boolean;
-  title: ReactNode;
+export type SectionProps = BoxProps & {
+  className?: string;
+  title?: InfernoNode;
+  buttons?: InfernoNode;
+  fill?: boolean;
+  fitted?: boolean;
+  scrollable?: boolean;
+  scrollableHorizontal?: boolean;
+  /** @deprecated This property no longer works, please remove it. */
+  level?: never;
+  /** @deprecated Please use `scrollable` property */
+  overflowY?: never;
   /** @member Allows external control of scrolling. */
-  scrollableRef: RefObject<HTMLDivElement>;
+  scrollableRef?: RefObject<HTMLDivElement>;
   /** @member Callback function for the `scroll` event */
-  onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-}> &
-  BoxProps;
+  onScroll?: (this: GlobalEventHandlers, ev: Event) => any;
+};
 
-export const Section = (props: SectionProps) => {
-  const {
-    className,
-    title,
-    buttons,
-    fill,
-    fitted,
-    scrollable,
-    scrollableHorizontal,
-    children,
-    onScroll,
-    ...rest
-  } = props;
+export class Section extends Component<SectionProps> {
+  scrollableRef: RefObject<HTMLDivElement>;
+  scrollable: boolean;
+  onScroll?: (this: GlobalEventHandlers, ev: Event) => any;
+  scrollableHorizontal: boolean;
 
-  const scrollableRef = props.scrollableRef || createRef();
-  const hasTitle = canRender(title) || canRender(buttons);
+  constructor(props) {
+    super(props);
+    this.scrollableRef = props.scrollableRef || createRef();
+    this.scrollable = props.scrollable;
+    this.onScroll = props.onScroll;
+    this.scrollableHorizontal = props.scrollableHorizontal;
+  }
 
-  useEffect(() => {
-    if (scrollable || scrollableHorizontal) {
-      addScrollableNode(scrollableRef.current as HTMLElement);
-      if (onScroll && scrollableRef.current) {
-        scrollableRef.current.onscroll = onScroll;
+  componentDidMount() {
+    if (this.scrollable || this.scrollableHorizontal) {
+      addScrollableNode(this.scrollableRef.current as HTMLElement);
+      if (this.onScroll && this.scrollableRef.current) {
+        this.scrollableRef.current.onscroll = this.onScroll;
       }
     }
-    return () => {
-      if (scrollable || scrollableHorizontal) {
-        removeScrollableNode(scrollableRef.current as HTMLElement);
-      }
-    };
-  }, []);
+  }
 
-  return (
-    <div
-      className={classes([
-        'Section',
-        fill && 'Section--fill',
-        fitted && 'Section--fitted',
-        scrollable && 'Section--scrollable',
-        scrollableHorizontal && 'Section--scrollableHorizontal',
-        className,
-        computeBoxClassName(rest),
-      ])}
-      {...computeBoxProps(rest)}>
-      {hasTitle && (
-        <div className="Section__title">
-          <span className="Section__titleText">{title}</span>
-          <div className="Section__buttons">{buttons}</div>
-        </div>
-      )}
-      <div className="Section__rest">
-        <div onScroll={onScroll as any} className="Section__content">
-          {children}
+  componentWillUnmount() {
+    if (this.scrollable || this.scrollableHorizontal) {
+      removeScrollableNode(this.scrollableRef.current as HTMLElement);
+    }
+  }
+
+  render() {
+    const {
+      className,
+      title,
+      buttons,
+      fill,
+      fitted,
+      scrollable,
+      scrollableHorizontal,
+      children,
+      onScroll,
+      ...rest
+    } = this.props;
+    const hasTitle = canRender(title) || canRender(buttons);
+    return (
+      <div
+        className={classes([
+          'Section',
+          Byond.IS_LTE_IE8 && 'Section--iefix',
+          fill && 'Section--fill',
+          fitted && 'Section--fitted',
+          scrollable && 'Section--scrollable',
+          scrollableHorizontal && 'Section--scrollableHorizontal',
+          className,
+          computeBoxClassName(rest),
+        ])}
+        {...computeBoxProps(rest)}>
+        {hasTitle && (
+          <div className="Section__title">
+            <span className="Section__titleText">{title}</span>
+            <div className="Section__buttons">{buttons}</div>
+          </div>
+        )}
+        <div className="Section__rest">
+          <div
+            ref={this.scrollableRef}
+            onScroll={onScroll}
+            className="Section__content">
+            {children}
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
diff --git a/tgui/packages/tgui/components/Slider.jsx b/tgui/packages/tgui/components/Slider.jsx
index 206029e663d..84ee8421a9a 100644
--- a/tgui/packages/tgui/components/Slider.jsx
+++ b/tgui/packages/tgui/components/Slider.jsx
@@ -8,8 +8,13 @@ import { clamp01, keyOfMatchingRange, scale } from 'common/math';
 import { classes } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 import { DraggableControl } from './DraggableControl';
+import { NumberInput } from './NumberInput';
 
 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} />;
+  }
   const {
     // Draggable props (passthrough)
     animated,
diff --git a/tgui/packages/tgui/components/Stack.tsx b/tgui/packages/tgui/components/Stack.tsx
index 3eb31bd3256..4d0ab75cab5 100644
--- a/tgui/packages/tgui/components/Stack.tsx
+++ b/tgui/packages/tgui/components/Stack.tsx
@@ -5,17 +5,16 @@
  */
 
 import { classes } from 'common/react';
-import { RefObject } from 'react';
+import { RefObject } from 'inferno';
 import { computeFlexClassName, computeFlexItemClassName, computeFlexItemProps, computeFlexProps, FlexItemProps, FlexProps } from './Flex';
 
-type Props = Partial<{
-  vertical: boolean;
-  fill: boolean;
-  zebra: boolean;
-}> &
-  FlexProps;
+type StackProps = FlexProps & {
+  vertical?: boolean;
+  fill?: boolean;
+  zebra?: boolean;
+};
 
-export const Stack = (props: Props) => {
+export const Stack = (props: StackProps) => {
   const { className, vertical, fill, zebra, ...rest } = props;
   return (
     <div
@@ -35,10 +34,9 @@ export const Stack = (props: Props) => {
   );
 };
 
-type StackItemProps = FlexItemProps &
-  Partial<{
-    innerRef: RefObject<HTMLDivElement>;
-  }>;
+type StackItemProps = FlexProps & {
+  innerRef?: RefObject<HTMLDivElement>;
+};
 
 const StackItem = (props: StackItemProps) => {
   const { className, innerRef, ...rest } = props;
@@ -57,10 +55,9 @@ const StackItem = (props: StackItemProps) => {
 
 Stack.Item = StackItem;
 
-type StackDividerProps = FlexItemProps &
-  Partial<{
-    hidden: boolean;
-  }>;
+type StackDividerProps = FlexItemProps & {
+  hidden?: boolean;
+};
 
 const StackDivider = (props: StackDividerProps) => {
   const { className, hidden, ...rest } = props;
diff --git a/tgui/packages/tgui/components/StyleableSection.tsx b/tgui/packages/tgui/components/StyleableSection.tsx
index 8a1ea48edb9..ad38984fee4 100644
--- a/tgui/packages/tgui/components/StyleableSection.tsx
+++ b/tgui/packages/tgui/components/StyleableSection.tsx
@@ -1,28 +1,25 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { SFC } from 'inferno';
 import { Box } from './Box';
 
-type Props = Partial<{
-  style: Record<string, any>;
-  titleStyle: Record<string, any>;
-  textStyle: Record<string, any>;
-  title: ReactNode;
-  titleSubtext: string;
-}> &
-  PropsWithChildren;
-
 // The cost of flexibility and prettiness.
-export const StyleableSection = (props: Props) => {
+export const StyleableSection: SFC<{
+  style?;
+  titleStyle?;
+  textStyle?;
+  title?;
+  titleSubtext?;
+}> = (props) => {
   return (
     <Box style={props.style}>
       {/* Yes, this box (line above) is missing the "Section" class. This is very intentional, as the layout looks *ugly* with it.*/}
-      <Box className="Section__title" style={props.titleStyle}>
-        <Box className="Section__titleText" style={props.textStyle}>
+      <Box class="Section__title" style={props.titleStyle}>
+        <Box class="Section__titleText" style={props.textStyle}>
           {props.title}
         </Box>
         <div className="Section__buttons">{props.titleSubtext}</div>
       </Box>
-      <Box className="Section__rest">
-        <Box className="Section__content">{props.children}</Box>
+      <Box class="Section__rest">
+        <Box class="Section__content">{props.children}</Box>
       </Box>
     </Box>
   );
diff --git a/tgui/packages/tgui/components/Table.jsx b/tgui/packages/tgui/components/Table.jsx
index 60e7ea1cd22..e936b914480 100644
--- a/tgui/packages/tgui/components/Table.jsx
+++ b/tgui/packages/tgui/components/Table.jsx
@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { classes } from 'common/react';
+import { classes, pureComponentHooks } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 
 export const Table = (props) => {
@@ -23,6 +23,8 @@ export const Table = (props) => {
   );
 };
 
+Table.defaultHooks = pureComponentHooks;
+
 export const TableRow = (props) => {
   const { className, header, ...rest } = props;
   return (
@@ -38,6 +40,8 @@ export const TableRow = (props) => {
   );
 };
 
+TableRow.defaultHooks = pureComponentHooks;
+
 export const TableCell = (props) => {
   const { className, collapsing, header, ...rest } = props;
   return (
@@ -54,5 +58,7 @@ export const TableCell = (props) => {
   );
 };
 
+TableCell.defaultHooks = pureComponentHooks;
+
 Table.Row = TableRow;
 Table.Cell = TableCell;
diff --git a/tgui/packages/tgui/components/Tabs.tsx b/tgui/packages/tgui/components/Tabs.jsx
similarity index 67%
rename from tgui/packages/tgui/components/Tabs.tsx
rename to tgui/packages/tgui/components/Tabs.jsx
index 9080a9904ed..46d1b078a85 100644
--- a/tgui/packages/tgui/components/Tabs.tsx
+++ b/tgui/packages/tgui/components/Tabs.jsx
@@ -5,34 +5,11 @@
  */
 
 import { canRender, classes } from 'common/react';
-import { PropsWithChildren, ReactNode } from 'react';
-import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+import { computeBoxClassName, computeBoxProps } from './Box';
 import { Icon } from './Icon';
 
-type Props = Partial<{
-  className: string;
-  fill: boolean;
-  fluid: boolean;
-  vertical: boolean;
-}> &
-  BoxProps &
-  PropsWithChildren;
-
-type TabProps = Partial<{
-  className: string;
-  color: string;
-  icon: string;
-  leftSlot: ReactNode;
-  onClick: (e?) => void;
-  rightSlot: ReactNode;
-  selected: boolean;
-}> &
-  BoxProps &
-  PropsWithChildren;
-
-export const Tabs = (props: Props) => {
+export const Tabs = (props) => {
   const { className, vertical, fill, fluid, children, ...rest } = props;
-
   return (
     <div
       className={classes([
@@ -49,7 +26,7 @@ export const Tabs = (props: Props) => {
   );
 };
 
-const Tab = (props: TabProps) => {
+const Tab = (props) => {
   const {
     className,
     selected,
@@ -60,7 +37,6 @@ const Tab = (props: TabProps) => {
     children,
     ...rest
   } = props;
-
   return (
     <div
       className={classes([
@@ -69,7 +45,7 @@ const Tab = (props: TabProps) => {
         'Tab--color--' + color,
         selected && 'Tab--selected',
         className,
-        computeBoxClassName(rest),
+        ...computeBoxClassName(rest),
       ])}
       {...computeBoxProps(rest)}>
       {(canRender(leftSlot) && <div className="Tab__left">{leftSlot}</div>) ||
diff --git a/tgui/packages/tgui/components/TextArea.jsx b/tgui/packages/tgui/components/TextArea.jsx
index 5e129b235f8..4fdf5542428 100644
--- a/tgui/packages/tgui/components/TextArea.jsx
+++ b/tgui/packages/tgui/components/TextArea.jsx
@@ -6,7 +6,7 @@
  */
 
 import { classes } from 'common/react';
-import { Component, createRef } from 'react';
+import { Component, createRef } from 'inferno';
 import { Box } from './Box';
 import { toInputValue } from './Input';
 import { KEY_ENTER, KEY_ESCAPE, KEY_TAB } from 'common/keycodes';
@@ -185,7 +185,6 @@ export class TextArea extends Component {
       displayedValue,
       ...boxProps
     } = this.props;
-
     // Box props
     const { className, fluid, nowrap, ...rest } = boxProps;
     const { scrolledAmount } = this.state;
@@ -206,7 +205,7 @@ export class TextArea extends Component {
                 'TextArea__textarea_custom',
               ])}
               style={{
-                transform: `translateY(-${scrolledAmount}px)`,
+                'transform': `translateY(-${scrolledAmount}px)`,
               }}>
               {displayedValue}
             </div>
@@ -229,7 +228,7 @@ export class TextArea extends Component {
           onScroll={this.handleScroll}
           maxLength={maxLength}
           style={{
-            color: displayedValue ? 'rgba(0, 0, 0, 0)' : 'inherit',
+            'color': displayedValue ? 'rgba(0, 0, 0, 0)' : 'inherit',
           }}
         />
       </Box>
diff --git a/tgui/packages/tgui/components/TimeDisplay.jsx b/tgui/packages/tgui/components/TimeDisplay.jsx
index bbdd747701c..6b87ee5260a 100644
--- a/tgui/packages/tgui/components/TimeDisplay.jsx
+++ b/tgui/packages/tgui/components/TimeDisplay.jsx
@@ -1,5 +1,5 @@
 import { formatTime } from '../format';
-import { Component } from 'react';
+import { Component } from 'inferno';
 
 // AnimatedNumber Copypaste
 const isSafeNumber = (value) => {
diff --git a/tgui/packages/tgui/components/Tooltip.tsx b/tgui/packages/tgui/components/Tooltip.tsx
index 10753394250..b4278d49af6 100644
--- a/tgui/packages/tgui/components/Tooltip.tsx
+++ b/tgui/packages/tgui/components/Tooltip.tsx
@@ -1,10 +1,9 @@
 import { createPopper, Placement, VirtualElement } from '@popperjs/core';
-import { Component, ReactNode } from 'react';
-import { findDOMNode, render } from 'react-dom';
+import { Component, findDOMfromVNode, InfernoNode, render } from 'inferno';
 
 type TooltipProps = {
-  children?: ReactNode;
-  content: ReactNode;
+  children?: InfernoNode;
+  content: InfernoNode;
   position?: Placement;
 };
 
@@ -51,16 +50,14 @@ export class Tooltip extends Component<TooltipProps, TooltipState> {
 
   getDOMNode() {
     // HACK: We don't want to create a wrapper, as it could break the layout
-    // of consumers, so we use findDOMNode.
-    // This is usually bad as refs are usually better, but refs did
-    // not work in this case, as they weren't propagating correctly.
-    // A previous attempt was made as a render prop that passed an ID,
-    // but this made consuming use too unwieldly.
+    // of consumers, so we do the inferno equivalent of `findDOMNode(this)`.
+    // My attempt to avoid this was a render prop that passed in
+    // callbacks to onmouseenter and onmouseleave, but this was unwiedly
+    // to consumers, specifically buttons.
+    // This code is copied from `findDOMNode` in inferno-extras.
     // Because this component is written in TypeScript, we will know
     // immediately if this internal variable is removed.
-    //
-    // eslint-disable-next-line react/no-find-dom-node
-    return findDOMNode(this) as Element;
+    return findDOMfromVNode(this.$LI, true);
   }
 
   componentDidMount() {
diff --git a/tgui/packages/tgui/components/TrackOutsideClicks.tsx b/tgui/packages/tgui/components/TrackOutsideClicks.tsx
index c8451fe12d2..578b4f55db0 100644
--- a/tgui/packages/tgui/components/TrackOutsideClicks.tsx
+++ b/tgui/packages/tgui/components/TrackOutsideClicks.tsx
@@ -1,14 +1,14 @@
-import { Component, createRef, PropsWithChildren } from 'react';
+import { Component, createRef } from 'inferno';
 
 type Props = {
   onOutsideClick: () => void;
-} & PropsWithChildren;
+};
 
 export class TrackOutsideClicks extends Component<Props> {
   ref = createRef<HTMLDivElement>();
 
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
 
     this.handleOutsideClick = this.handleOutsideClick.bind(this);
 
diff --git a/tgui/packages/tgui/debug/hooks.js b/tgui/packages/tgui/debug/hooks.js
index fc4901c4965..d324dd68d88 100644
--- a/tgui/packages/tgui/debug/hooks.js
+++ b/tgui/packages/tgui/debug/hooks.js
@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { useSelector } from '../backend';
+import { useSelector } from 'common/redux';
 import { selectDebug } from './selectors';
 
-export const useDebug = () => useSelector(selectDebug);
+export const useDebug = (context) => useSelector(context, selectDebug);
diff --git a/tgui/packages/tgui/drag.ts b/tgui/packages/tgui/drag.ts
index a34c49ac462..4b6f82e1207 100644
--- a/tgui/packages/tgui/drag.ts
+++ b/tgui/packages/tgui/drag.ts
@@ -203,7 +203,7 @@ const constraintPosition = (
 };
 
 // Start dragging the window
-export const dragStartHandler = (event) => {
+export const dragStartHandler = (event: MouseEvent) => {
   logger.log('drag start');
   dragging = true;
   dragPointOffset = vecSubtract(
@@ -218,7 +218,7 @@ export const dragStartHandler = (event) => {
 };
 
 // End dragging the window
-const dragEndHandler = (event) => {
+const dragEndHandler = (event: MouseEvent) => {
   logger.log('drag end');
   dragMoveHandler(event);
   document.removeEventListener('mousemove', dragMoveHandler);
diff --git a/tgui/packages/tgui/interfaces/AdminBookViewer.tsx b/tgui/packages/tgui/interfaces/AdminBookViewer.tsx
index 857ce71e7af..653c029cd71 100644
--- a/tgui/packages/tgui/interfaces/AdminBookViewer.tsx
+++ b/tgui/packages/tgui/interfaces/AdminBookViewer.tsx
@@ -12,7 +12,7 @@ type ViewerData = {
 export const AdminBookViewer = (_: any) => {
   const { data } = useBackend<ViewerData>();
   return (
-    <Window title={'Reading: ' + data.title} height={400} width={400}>
+    <Window title={'Reading: ' + data.title}>
       <Window.Content scrollable>
         {data.view_raw ? (
           data.content
diff --git a/tgui/packages/tgui/interfaces/AdminFax.jsx b/tgui/packages/tgui/interfaces/AdminFax.jsx
index e0f6a521c24..8e78204db8d 100644
--- a/tgui/packages/tgui/interfaces/AdminFax.jsx
+++ b/tgui/packages/tgui/interfaces/AdminFax.jsx
@@ -28,7 +28,7 @@ export const FaxMainPanel = (props) => {
     data.stamps.unshift('None');
   }
   return (
-    <div className="faxmenu">
+    <div class="faxmenu">
       <Section
         title="Fax Menu"
         buttons={
diff --git a/tgui/packages/tgui/interfaces/Adminhelp.tsx b/tgui/packages/tgui/interfaces/Adminhelp.tsx
index 60480af1e72..c2a888cdc33 100644
--- a/tgui/packages/tgui/interfaces/Adminhelp.tsx
+++ b/tgui/packages/tgui/interfaces/Adminhelp.tsx
@@ -33,7 +33,7 @@ export const Adminhelp = (props) => {
     <Window title="Create Adminhelp" theme="admin" height={300} width={500}>
       <Window.Content
         style={{
-          backgroundImage: 'none',
+          'background-image': 'none',
         }}>
         <Stack vertical fill>
           <Stack.Item grow>
@@ -56,7 +56,7 @@ export const Adminhelp = (props) => {
                     fontFamily="arial"
                     backgroundColor="grey"
                     style={{
-                      fontStyle: 'normal',
+                      'font-style': 'normal',
                     }}>
                     Input &apos;{confirmationText}&apos; to proceed.
                     <Input
diff --git a/tgui/packages/tgui/interfaces/AirAlarm.tsx b/tgui/packages/tgui/interfaces/AirAlarm.tsx
index 14229e93782..0caa2398dac 100644
--- a/tgui/packages/tgui/interfaces/AirAlarm.tsx
+++ b/tgui/packages/tgui/interfaces/AirAlarm.tsx
@@ -1,5 +1,5 @@
 import { BooleanLike } from 'common/react';
-import { Fragment } from 'react';
+import { Fragment } from 'inferno';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, LabeledList, Modal, NumberInput, Section, Table } from '../components';
 import { Window } from '../layouts';
diff --git a/tgui/packages/tgui/interfaces/AntagInfoAssaultops.tsx b/tgui/packages/tgui/interfaces/AntagInfoAssaultops.tsx
index eff1c5605ae..b6f6afb4d34 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoAssaultops.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoAssaultops.tsx
@@ -32,9 +32,9 @@ type GoldeneyeKeys = {
 };
 
 type Info = {
-  equipped: number;
-  required_keys: number;
-  uploaded_keys: number;
+  equipped: Number;
+  required_keys: Number;
+  uploaded_keys: Number;
   objectives: Objectives[];
   available_targets: AvailableTargets[];
   extracted_targets: ExtractedTargets[];
diff --git a/tgui/packages/tgui/interfaces/AntagInfoDemon.tsx b/tgui/packages/tgui/interfaces/AntagInfoDemon.tsx
index e19b3e37f58..183f540439a 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoDemon.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoDemon.tsx
@@ -23,7 +23,7 @@ export const AntagInfoDemon = (props) => {
   const { fluff, objectives, explain_attack } = data;
   return (
     <Window width={620} height={356} theme="syndicate">
-      <Window.Content style={{ backgroundImage: 'none' }}>
+      <Window.Content style={{ 'background-image': 'none' }}>
         <Stack fill>
           <Stack.Item>
             <DemonRunes />
diff --git a/tgui/packages/tgui/interfaces/AntagInfoGlitch.tsx b/tgui/packages/tgui/interfaces/AntagInfoGlitch.tsx
index 0fd7d18a47c..1281bc61904 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoGlitch.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoGlitch.tsx
@@ -98,7 +98,7 @@ const SpecificInfo = (props) => {
     case 'NetGuardian Prime':
       return (
         <Stack.Item grow>
-          <span style={{ ...textStyles.danger, fontSize: '16px' }}>
+          <span style={{ ...textStyles.danger, 'font-size': '16px' }}>
             ORGANIC LIFE MUST BE TERMINATED.
           </span>
         </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx b/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx
index 11812e0ecde..b43063b8da7 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx
@@ -319,8 +319,8 @@ export const AntagInfoHeretic = (props) => {
     <Window width={675} height={635}>
       <Window.Content
         style={{
-          backgroundImage: 'none',
-          background: ascended
+          '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%);',
         }}>
diff --git a/tgui/packages/tgui/interfaces/AntagInfoMalf.tsx b/tgui/packages/tgui/interfaces/AntagInfoMalf.tsx
index d89acbd6f96..99156d188c5 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoMalf.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoMalf.tsx
@@ -93,7 +93,7 @@ const FlavorSection = (props) => {
       <Stack vertical fill>
         <Stack.Item grow>
           <Stack fill vertical>
-            <Stack.Item style={{ backgroundColor: 'black' }}>
+            <Stack.Item style={{ 'background-color': 'black' }}>
               <span style={goalstyle}>
                 System Integrity Report:
                 <br />
@@ -101,7 +101,7 @@ const FlavorSection = (props) => {
               &gt;{goal}
             </Stack.Item>
             <Stack.Divider />
-            <Stack.Item grow style={{ backgroundColor: 'black' }}>
+            <Stack.Item grow style={{ 'background-color': 'black' }}>
               <span style={allystyle}>
                 Morality Core Report:
                 <br />
@@ -109,7 +109,7 @@ const FlavorSection = (props) => {
               &gt;{allies}
             </Stack.Item>
             <Stack.Divider />
-            <Stack.Item style={{ backgroundColor: 'black' }}>
+            <Stack.Item style={{ 'background-color': 'black' }}>
               <span style={badstyle}>
                 Overall Sentience Coherence Grade: FAILING.
                 <br />
@@ -197,7 +197,7 @@ export const AntagInfoMalf = (props) => {
       width={660}
       height={530}
       theme={(antagInfoTab === 0 && 'hackerman') || 'malfunction'}>
-      <Window.Content style={{ fontFamily: 'Consolas, monospace' }}>
+      <Window.Content style={{ 'font-family': 'Consolas, monospace' }}>
         <Stack vertical fill>
           <Stack.Item>
             <Tabs fluid>
diff --git a/tgui/packages/tgui/interfaces/ApcControl.jsx b/tgui/packages/tgui/interfaces/ApcControl.jsx
index 9b0389f3987..98cab09b763 100644
--- a/tgui/packages/tgui/interfaces/ApcControl.jsx
+++ b/tgui/packages/tgui/interfaces/ApcControl.jsx
@@ -1,5 +1,6 @@
 import { map, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
+import { pureComponentHooks } from 'common/react';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Dimmer, Icon, Table, Tabs, Stack, Section } from '../components';
 import { Window } from '../layouts';
@@ -284,3 +285,5 @@ const statusChange = (status) => {
   // 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 06a8a46ba1c..1544f1e3709 100644
--- a/tgui/packages/tgui/interfaces/ApprenticeContract.tsx
+++ b/tgui/packages/tgui/interfaces/ApprenticeContract.tsx
@@ -77,8 +77,8 @@ const ApprenticeSelection = (props) => {
               <img
                 src={resolveAsset(assetName)}
                 style={{
-                  borderStyle: 'solid',
-                  borderColor: '#7e90a7',
+                  'border-style': 'solid',
+                  'border-color': '#7e90a7',
                 }}
               />
             </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/Biogenerator.tsx b/tgui/packages/tgui/interfaces/Biogenerator.tsx
index 36d5348bbad..134e69a9931 100644
--- a/tgui/packages/tgui/interfaces/Biogenerator.tsx
+++ b/tgui/packages/tgui/interfaces/Biogenerator.tsx
@@ -83,7 +83,7 @@ export const Biogenerator = (props) => {
                     <Box
                       lineHeight={1.9}
                       style={{
-                        textShadow: '1px 1px 0 black',
+                        'text-shadow': '1px 1px 0 black',
                       }}>
                       {`${parseFloat(biomass.toFixed(2))} units`}
                     </Box>
@@ -111,7 +111,7 @@ export const Biogenerator = (props) => {
                       <Box
                         lineHeight={1.9}
                         style={{
-                          textShadow: '1px 1px 0 black',
+                          'text-shadow': '1px 1px 0 black',
                         }}>
                         {`${beakerCurrentVolume} of ${beakerMaxVolume} units`}
                       </Box>
@@ -193,7 +193,7 @@ const ItemList = (props) => {
         <span
           className={classes(['design32x32', item.id])}
           style={{
-            verticalAlign: 'middle',
+            'vertical-align': 'middle',
           }}
         />{' '}
         <b>{item.name}</b>
diff --git a/tgui/packages/tgui/interfaces/Canvas.tsx b/tgui/packages/tgui/interfaces/Canvas.tsx
index 84eaacb562b..df7e98dc144 100644
--- a/tgui/packages/tgui/interfaces/Canvas.tsx
+++ b/tgui/packages/tgui/interfaces/Canvas.tsx
@@ -1,6 +1,6 @@
 import { Color } from 'common/color';
 import { multiline, decodeHtmlEntities } from 'common/string';
-import { Component, createRef, RefObject } from 'react';
+import { Component, createRef, RefObject } from 'inferno';
 import { useBackend } from '../backend';
 import { Tooltip, Icon, Box, Button, Flex } from '../components';
 import { Window } from '../layouts';
@@ -202,11 +202,11 @@ class PaintCanvas extends Component<PaintCanvasProps> {
         width={width}
         height={height}
         {...rest}
-        onMouseDown={this.handleStartDrawing as any}
-        onMouseMove={this.handleDrawing as any}
-        onMouseUp={this.handleEndDrawing as any}
-        onMouseOut={this.handleEndDrawing as any}
-        onContextMenu={this.handleDropper as any}>
+        onMouseDown={this.handleStartDrawing}
+        onMouseMove={this.handleDrawing}
+        onMouseUp={this.handleEndDrawing}
+        onMouseOut={this.handleEndDrawing}
+        onContextMenu={this.handleDropper}>
         Canvas failed to render.
       </canvas>
     );
@@ -318,18 +318,20 @@ export const Canvas = (props) => {
                     key={`${index}`}
                     backgroundColor={element.color}
                     style={{
-                      width: '24px',
-                      height: '24px',
-                      borderStyle: 'solid',
-                      borderColor: element.is_selected ? 'lightblue' : 'black',
-                      borderWidth: '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,
                       })
                     }
-                    onContextMenu={(e) => {
+                    oncontextmenu={(e) => {
                       e.preventDefault();
                       act('change_palette', {
                         color_index: index + 1,
@@ -356,7 +358,7 @@ export const Canvas = (props) => {
                 textColor="black"
                 textAlign="left"
                 backgroundColor="white"
-                style={{ borderStyle: 'inset' }}>
+                style={{ 'border-style': 'inset' }}>
                 <Box mb={1} fontSize="18px" bold>
                   {decodeHtmlEntities(data.name)}
                 </Box>
diff --git a/tgui/packages/tgui/interfaces/Cargo.jsx b/tgui/packages/tgui/interfaces/Cargo.jsx
index ebe1931eb47..974d133d857 100644
--- a/tgui/packages/tgui/interfaces/Cargo.jsx
+++ b/tgui/packages/tgui/interfaces/Cargo.jsx
@@ -475,8 +475,8 @@ const CargoCart = (props) => {
             <Button
               color="green"
               style={{
-                lineHeight: '28px',
-                padding: '0 12px',
+                'line-height': '28px',
+                'padding': '0 12px',
               }}
               content="Confirm the order"
               onClick={() => act('send')}
diff --git a/tgui/packages/tgui/interfaces/CentcomPodLauncher.jsx b/tgui/packages/tgui/interfaces/CentcomPodLauncher.jsx
index d0b68fdb5f0..17a79fa6b40 100644
--- a/tgui/packages/tgui/interfaces/CentcomPodLauncher.jsx
+++ b/tgui/packages/tgui/interfaces/CentcomPodLauncher.jsx
@@ -3,7 +3,7 @@ import { classes } from 'common/react';
 import { storage } from 'common/storage';
 import { multiline } from 'common/string';
 import { createUuid } from 'common/uuid';
-import { Component, Fragment } from 'react';
+import { Component, Fragment } from 'inferno';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, ByondUi, Divider, Input, Knob, LabeledControls, NumberInput, Section, Stack } from '../components';
 import { Window } from '../layouts';
@@ -596,11 +596,11 @@ const PodStatusPage = (props) => {
                             : act(effect.act)
                         }
                         style={{
-                          verticalAlign: 'middle',
-                          marginLeft: j !== 0 ? '1px' : '0px',
-                          marginRight:
+                          'vertical-align': 'middle',
+                          'margin-left': j !== 0 ? '1px' : '0px',
+                          'margin-right':
                             j !== list.list.length - 1 ? '1px' : '0px',
-                          borderRadius: '5px',
+                          'border-radius': '5px',
                         }}
                       />
                     )}
@@ -755,8 +755,8 @@ const ReverseMenu = (props) => {
 };
 
 class PresetsPage extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       presets: [],
     };
@@ -923,9 +923,9 @@ class PresetsPage extends Component {
               style={
                 presetIndex === preset.id
                   ? {
-                    borderWidth: '1px',
-                    borderStyle: 'solid',
-                    borderColor: `hsl(${preset.hue}, 80%, 80%)`,
+                    'border-width': '1px',
+                    'border-style': 'solid',
+                    'border-color': `hsl(${preset.hue}, 80%, 80%)`,
                   }
                   : ''
               }
@@ -1000,17 +1000,17 @@ const StylePage = (props) => {
           }
           tooltip={page.title}
           style={{
-            verticalAlign: 'middle',
-            marginRight: '5px',
-            borderRadius: '20px',
+            'vertical-align': 'middle',
+            'margin-right': '5px',
+            'border-radius': '20px',
           }}
           selected={data.styleChoice - 1 === i}
           onClick={() => act('setStyle', { style: i })}>
           <Box
             className={classes(['supplypods64x64', 'pod_asset' + (i + 1)])}
             style={{
-              transform: 'rotate(45deg) translate(-25%,-10%)',
-              pointerEvents: 'none',
+              'transform': 'rotate(45deg) translate(-25%,-10%)',
+              'pointer-events': 'none',
             }}
           />
         </Button>
diff --git a/tgui/packages/tgui/interfaces/Changelog.jsx b/tgui/packages/tgui/interfaces/Changelog.jsx
index 3ac6205fd03..a3e84ad8ea9 100644
--- a/tgui/packages/tgui/interfaces/Changelog.jsx
+++ b/tgui/packages/tgui/interfaces/Changelog.jsx
@@ -1,6 +1,6 @@
 import { classes } from 'common/react';
 import { useBackend } from '../backend';
-import { Component, Fragment } from 'react';
+import { Component, Fragment } from 'inferno';
 import { Box, Button, Dropdown, Icon, Section, Stack, Table } from '../components';
 import { Window } from '../layouts';
 import { resolveAsset } from '../assets';
@@ -35,8 +35,8 @@ const icons = {
 };
 
 export class Changelog extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       data: 'Loading changelog data...',
       selectedDate: '',
diff --git a/tgui/packages/tgui/interfaces/ChemFilter.tsx b/tgui/packages/tgui/interfaces/ChemFilter.tsx
index fc3774ee5bb..9a7cfe5f30e 100644
--- a/tgui/packages/tgui/interfaces/ChemFilter.tsx
+++ b/tgui/packages/tgui/interfaces/ChemFilter.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment } from 'inferno';
 import { useBackend } from '../backend';
 import { Button, Section, Stack } from '../components';
 import { Window } from '../layouts';
diff --git a/tgui/packages/tgui/interfaces/ChemMaster.tsx b/tgui/packages/tgui/interfaces/ChemMaster.tsx
index 441a411d60b..6b911c77ee7 100644
--- a/tgui/packages/tgui/interfaces/ChemMaster.tsx
+++ b/tgui/packages/tgui/interfaces/ChemMaster.tsx
@@ -249,7 +249,7 @@ const ChemMasterContent = (props) => {
             <Box
               lineHeight={1.9}
               style={{
-                textShadow: '1px 1px 0 black',
+                'text-shadow': '1px 1px 0 black',
               }}>
               {`Printing ${printingProgress} out of ${printingTotal}`}
             </Box>
@@ -366,7 +366,7 @@ const ContainerButton = ({ container, category }) => {
         <Box
           m={isPillPatch ? '0' : '8px'}
           style={{
-            transform: 'scale(2)',
+            'transform': 'scale(2)',
           }}
           className={classes(['chemmaster32x32', container.icon])}
         />
@@ -405,7 +405,7 @@ const AnalysisResults = (props) => {
         <LabeledList.Item label="Purity">
           <Box
             style={{
-              textTransform: 'capitalize',
+              'text-transform': 'capitalize',
             }}
             color={purityLevel}>
             {purityLevel}
@@ -440,7 +440,7 @@ const GroupTitle = ({ title }) => {
       </Stack.Item>
       <Stack.Item
         style={{
-          textTransform: 'capitalize',
+          'text-transform': 'capitalize',
         }}
         color={'gray'}>
         {title}
diff --git a/tgui/packages/tgui/interfaces/ChemSeparator.tsx b/tgui/packages/tgui/interfaces/ChemSeparator.tsx
index de91668cc8e..bf6130d710e 100644
--- a/tgui/packages/tgui/interfaces/ChemSeparator.tsx
+++ b/tgui/packages/tgui/interfaces/ChemSeparator.tsx
@@ -78,7 +78,7 @@ export const ChemSeparator = (props) => {
                 <Box
                   lineHeight={1.9}
                   style={{
-                    textShadow: '1px 1px 0 black',
+                    'text-shadow': '1px 1px 0 black',
                   }}>
                   {`${Math.ceil(data.own_total_volume)} of ${
                     data.own_maximum_volume
@@ -125,7 +125,7 @@ export const ChemSeparator = (props) => {
                   <Box
                     lineHeight={1.9}
                     style={{
-                      textShadow: '1px 1px 0 black',
+                      'text-shadow': '1px 1px 0 black',
                     }}>
                     {`${Math.ceil(data.beaker_total_volume)} of ${
                       data.beaker_maximum_volume
diff --git a/tgui/packages/tgui/interfaces/CircuitAdminPanel.tsx b/tgui/packages/tgui/interfaces/CircuitAdminPanel.tsx
index 02acc8ec135..0687f0d4de0 100644
--- a/tgui/packages/tgui/interfaces/CircuitAdminPanel.tsx
+++ b/tgui/packages/tgui/interfaces/CircuitAdminPanel.tsx
@@ -16,7 +16,7 @@ export const CircuitAdminPanel = (props) => {
   const { act, data } = useBackend<CircuitAdminPanelData>();
 
   return (
-    <Window title="Circuit Admin Panel" width={1200} height={500}>
+    <Window title="Circuit Admin Panel" width={1200} height={500} resizable>
       <Window.Content>
         <Stack vertical>
           <Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/CircuitSignalHandler.tsx b/tgui/packages/tgui/interfaces/CircuitSignalHandler.tsx
index 3a756209e3e..d2d53e09c60 100644
--- a/tgui/packages/tgui/interfaces/CircuitSignalHandler.tsx
+++ b/tgui/packages/tgui/interfaces/CircuitSignalHandler.tsx
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component } from 'inferno';
 import { useBackend } from '../backend';
 import { Box, Stack, Section, Input, Button, Dropdown } from '../components';
 import { Window } from '../layouts';
diff --git a/tgui/packages/tgui/interfaces/ClockworkResearch.tsx b/tgui/packages/tgui/interfaces/ClockworkResearch.tsx
index 80a18280224..4edd1a6c4a5 100644
--- a/tgui/packages/tgui/interfaces/ClockworkResearch.tsx
+++ b/tgui/packages/tgui/interfaces/ClockworkResearch.tsx
@@ -52,7 +52,7 @@ const SelectedSection = (props) => {
   const { act, data } = useBackend<Data>();
   return (
     <Box>
-      <div style={{ textAlign: 'center' }}>
+      <div style={{ 'text-align': 'center' }}>
         <Box color="good" bold fontSize="16px">
           {'Selected Research'}
         </Box>
@@ -61,7 +61,7 @@ const SelectedSection = (props) => {
           {data.focused_research.name}
         </Box>
         <Box>{data.focused_research.desc}</Box>
-        <div style={{ paddingTop: '5px' }}>
+        <div style={{ 'padding-top': '5px' }}>
           <Box>
             <i>{data.focused_research.lore}</i>
           </Box>
@@ -103,7 +103,7 @@ const ResearchSection = (props) => {
     <Stack vertical>
       <Stack.Item fill>
         <Section fill title="Basic Research">
-          <div style={{ textAlign: 'center' }}>
+          <div style={{ 'text-align': 'center' }}>
             {ResearchNode(data.starting_research, act)}
           </div>
         </Section>
@@ -115,7 +115,7 @@ const ResearchSection = (props) => {
             {inside_array.map((single_research: Research) => (
               <Stack.Item key={single_research.name}>
                 <Section fill>
-                  <div style={{ textAlign: 'center' }}>
+                  <div style={{ 'text-align': 'center' }}>
                     {ResearchNode(single_research, act)}
                   </div>
                 </Section>
@@ -141,7 +141,7 @@ const ResearchNode = (research: Research, act: any) => {
         />
       </Stack.Item>
       <Stack.Item>
-        <div style={{ paddingTop: '6px' }}>{research.desc}</div>
+        <div style={{ 'padding-top': '6px' }}>{research.desc}</div>
       </Stack.Item>
       <br />
       <Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/ClockworkSlab.jsx b/tgui/packages/tgui/interfaces/ClockworkSlab.jsx
index 16f1d04aeca..144ed917f2c 100644
--- a/tgui/packages/tgui/interfaces/ClockworkSlab.jsx
+++ b/tgui/packages/tgui/interfaces/ClockworkSlab.jsx
@@ -1,5 +1,5 @@
 // THIS IS A SKYRAT UI FILE
-import { Fragment } from 'react';
+import { Fragment } from 'inferno';
 import { useBackend, useLocalState } from '../backend';
 import { Icon, Box, Button, Section, Table, Divider, Grid, ProgressBar, Collapsible } from '../components';
 import { Window } from '../layouts';
@@ -66,7 +66,7 @@ export const ClockworkSlab = (props) => {
 
 const ClockworkHelp = (props) => {
   return (
-    <>
+    <Fragment>
       <Collapsible title="Where To Start" color="average" open={1}>
         <Section>
           After a long and destructive war, Rat&#39;Var has been imprisoned
@@ -195,7 +195,7 @@ const ClockworkHelp = (props) => {
           <br />
         </Section>
       </Collapsible>
-    </>
+    </Fragment>
   );
 };
 
diff --git a/tgui/packages/tgui/interfaces/CrewConsole.jsx b/tgui/packages/tgui/interfaces/CrewConsole.jsx
index bacb91c383c..a7e5fb45c43 100644
--- a/tgui/packages/tgui/interfaces/CrewConsole.jsx
+++ b/tgui/packages/tgui/interfaces/CrewConsole.jsx
@@ -125,7 +125,7 @@ const CrewTableEntry = (props) => {
   } = sensor_data;
 
   return (
-    <Table.Row className="candystripe">
+    <Table.Row>
       <Table.Cell bold={jobIsHead(ijob)} color={jobToColor(ijob)}>
         {name}
         {assignment !== undefined ? ` (${assignment})` : ''}
diff --git a/tgui/packages/tgui/interfaces/DepartmentOrders.tsx b/tgui/packages/tgui/interfaces/DepartmentOrders.tsx
index 76447fd7eda..d17d7971861 100644
--- a/tgui/packages/tgui/interfaces/DepartmentOrders.tsx
+++ b/tgui/packages/tgui/interfaces/DepartmentOrders.tsx
@@ -116,7 +116,7 @@ const DepartmentCatalog = (props) => {
         <Tabs textAlign="center" fluid>
           {supplies.map((cat) => (
             <Tabs.Tab
-              key={cat.name}
+              key={cat}
               selected={tabCategory === cat}
               onClick={() => setTabCategory(cat)}>
               {cat.name}
@@ -135,7 +135,8 @@ const DepartmentCatalog = (props) => {
                       <Box
                         as="span"
                         style={{
-                          borderBottom: '2px dotted rgba(255, 255, 255, 0.8)',
+                          'border-bottom':
+                            '2px dotted rgba(255, 255, 255, 0.8)',
                         }}>
                         {pack.name}
                       </Box>
diff --git a/tgui/packages/tgui/interfaces/DestructiveAnalyzer.tsx b/tgui/packages/tgui/interfaces/DestructiveAnalyzer.tsx
index 6fe0b16fdd3..3561058d79f 100644
--- a/tgui/packages/tgui/interfaces/DestructiveAnalyzer.tsx
+++ b/tgui/packages/tgui/interfaces/DestructiveAnalyzer.tsx
@@ -56,7 +56,12 @@ export const DestructiveAnalyzer = (props) => {
     );
   }
   return (
-    <Window width={400} height={260} title="Destructive Analyzer">
+    <Window
+      width={400}
+      height={260}
+      scrollable
+      fill
+      title="Destructive Analyzer">
       <Window.Content scrollable>
         <Section
           title={loaded_item}
@@ -73,7 +78,8 @@ export const DestructiveAnalyzer = (props) => {
             height="64px"
             width="64px"
             style={{
-              verticalAlign: 'middle',
+              '-ms-interpolation-mode': 'nearest-neighbor',
+              'vertical-align': 'middle',
             }}
           />
         </Section>
diff --git a/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleSequencer.jsx b/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleSequencer.jsx
index 7fb1445b1c9..512613b256c 100644
--- a/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleSequencer.jsx
+++ b/tgui/packages/tgui/interfaces/DnaConsole/DnaConsoleSequencer.jsx
@@ -18,7 +18,7 @@ const GenomeImage = (props) => {
       style={{
         width: '64px',
         margin: '2px',
-        marginLeft: '4px',
+        'margin-left': '4px',
         outline,
       }}
       onClick={onClick}
diff --git a/tgui/packages/tgui/interfaces/Electrolyzer.tsx b/tgui/packages/tgui/interfaces/Electrolyzer.tsx
index 3f2365bd5b5..34b457803d6 100644
--- a/tgui/packages/tgui/interfaces/Electrolyzer.tsx
+++ b/tgui/packages/tgui/interfaces/Electrolyzer.tsx
@@ -38,10 +38,11 @@ export const Electrolyzer = (props) => {
             </>
           }>
           <LabeledList>
-            <LabeledList.Item label="Cell" color={!hasPowercell ? 'bad' : ''}>
+            <LabeledList.Item label="Cell" color={!hasPowercell && 'bad'}>
               {(hasPowercell && (
                 <ProgressBar
                   value={powerLevel / 100}
+                  content={powerLevel + '%'}
                   ranges={{
                     good: [0.6, Infinity],
                     average: [0.3, 0.6],
diff --git a/tgui/packages/tgui/interfaces/ElevatorPanel.tsx b/tgui/packages/tgui/interfaces/ElevatorPanel.tsx
index d810f68e108..41c55de8729 100644
--- a/tgui/packages/tgui/interfaces/ElevatorPanel.tsx
+++ b/tgui/packages/tgui/interfaces/ElevatorPanel.tsx
@@ -71,8 +71,8 @@ export const ElevatorPanel = (props) => {
                   <Stack.Item key={index}>
                     <Button
                       style={{
-                        fontWeight: 'bold',
-                        fontSize: '14px',
+                        'font-weight': 'bold',
+                        'font-size': '14px',
                       }}
                       fluid
                       ellipsis
@@ -183,9 +183,9 @@ const FloorPanel = (props) => {
         <Box
           textColor="white"
           style={{
-            fontFamily: 'Monospace',
-            fontSize: '50px',
-            fontWeight: 'bold',
+            'font-family': 'Monospace',
+            'font-size': '50px',
+            'font-weight': 'bold',
           }}>
           {current_floor - 1}
         </Box>
diff --git a/tgui/packages/tgui/interfaces/ExodroneConsole.tsx b/tgui/packages/tgui/interfaces/ExodroneConsole.tsx
index a892c4420db..8bbde51d9c9 100644
--- a/tgui/packages/tgui/interfaces/ExodroneConsole.tsx
+++ b/tgui/packages/tgui/interfaces/ExodroneConsole.tsx
@@ -5,7 +5,7 @@ import { resolveAsset } from '../assets';
 import { formatTime } from '../format';
 import { capitalize } from 'common/string';
 import nt_logo from '../assets/bg-nanotrasen.svg';
-import { Fragment } from 'react';
+import { Fragment } from 'inferno';
 
 type ExplorationEventData = {
   name: string;
@@ -176,13 +176,13 @@ const SignalLostModal = (props) => {
       width={30}
       height={22}
       p={0}
-      style={{ borderRadius: '5%' }}>
+      style={{ 'border-radius': '5%' }}>
       <img src={nt_logo} width={64} height={64} />
       <Box
         backgroundColor="black"
         textColor="red"
         fontSize={2}
-        style={{ borderRadius: '-10%' }}>
+        style={{ 'border-radius': '-10%' }}>
         CONNECTION LOST
       </Box>
       <Box p={2} italic>
@@ -194,7 +194,7 @@ const SignalLostModal = (props) => {
         <Button
           content="Confirm"
           color="danger"
-          style={{ border: '1px solid black' }}
+          style={{ 'border': '1px solid black' }}
           onClick={() => act('confirm_signal_lost')}
         />
       </Box>
@@ -716,11 +716,13 @@ const EventScreen = (props: { drone: DroneData; event: FullEventData }) => {
         <Stack.Item>
           <Stack fill>
             <Stack.Item>
-              <Box
-                as="img"
+              <img
                 src={resolveAsset(event.image)}
                 height="125px"
                 width="250px"
+                style={{
+                  '-ms-interpolation-mode': 'nearest-neighbor',
+                }}
               />
             </Stack.Item>
             <Stack.Item>
@@ -785,7 +787,14 @@ export const AdventureScreen = (props: {
         </Stack.Item>
         <Stack.Divider />
         <Stack.Item>
-          <Box as="img" src={imgSource} height="100px" width="200px" />
+          <img
+            src={imgSource}
+            height="100px"
+            width="200px"
+            style={{
+              '-ms-interpolation-mode': 'nearest-neighbor',
+            }}
+          />
           <Stack vertical>
             <Stack.Divider />
             <Stack.Item grow />
diff --git a/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx b/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx
index 32e3355e216..0f7cac72266 100644
--- a/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx
+++ b/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx
@@ -1,6 +1,6 @@
 import { sortBy } from 'common/collections';
 import { classes } from 'common/react';
-import { ReactNode } from 'react';
+import { InfernoNode } from 'inferno';
 import { useSharedState } from '../../backend';
 import { Stack, Section, Icon, Dimmer } from '../../components';
 import { Design, MaterialMap } from './Types';
@@ -51,12 +51,12 @@ export type DesignBrowserProps<T extends Design = Design> = {
      * A callback to print the design.
      */
     onPrintDesign: (design: T, amount: number) => void
-  ) => ReactNode;
+  ) => InfernoNode;
 
   /**
    * If provided, renders a node into each category in the output.
    */
-  categoryButtons?: (category: Category<T>) => ReactNode;
+  categoryButtons?: (category: Category<T>) => InfernoNode;
 };
 
 /**
@@ -311,8 +311,8 @@ export const DesignBrowser = <T extends Design = Design>(
             {!!busy && (
               <Dimmer
                 style={{
-                  fontSize: '2em',
-                  textAlign: 'center',
+                  'font-size': '2em',
+                  'text-align': 'center',
                 }}>
                 <Icon name="cog" spin />
                 {' Building items...'}
@@ -431,12 +431,12 @@ type CategoryViewProps<T extends Design = Design> = {
      * A callback to print the design.
      */
     onPrintDesign: (design: T, amount: number) => void
-  ) => ReactNode;
+  ) => InfernoNode;
 
   /**
    * If provided, renders a node into each category in the output.
    */
-  categoryButtons?: (category: Category<T>) => ReactNode;
+  categoryButtons?: (category: Category<T>) => InfernoNode;
 };
 
 const CategoryView = <T extends Design = Design>(
diff --git a/tgui/packages/tgui/interfaces/Fabrication/SearchBar.tsx b/tgui/packages/tgui/interfaces/Fabrication/SearchBar.tsx
index 0831a349a0b..9a2c8889e27 100644
--- a/tgui/packages/tgui/interfaces/Fabrication/SearchBar.tsx
+++ b/tgui/packages/tgui/interfaces/Fabrication/SearchBar.tsx
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component } from 'inferno';
 import { Stack, Input, Icon } from '../../components';
 
 /**
diff --git a/tgui/packages/tgui/interfaces/Fabricator.tsx b/tgui/packages/tgui/interfaces/Fabricator.tsx
index 45a06b9b989..5c3a4730c8b 100644
--- a/tgui/packages/tgui/interfaces/Fabricator.tsx
+++ b/tgui/packages/tgui/interfaces/Fabricator.tsx
@@ -49,7 +49,7 @@ export const Fabricator = (props) => {
           </Stack.Item>
         </Stack>
         {!!onHold && (
-          <Dimmer style={{ fontSize: '2em', textAlign: 'center' }}>
+          <Dimmer style={{ 'font-size': '2em', 'text-align': 'center' }}>
             Mineral access is on hold, please contact the quartermaster.
           </Dimmer>
         )}
diff --git a/tgui/packages/tgui/interfaces/FishingRod.tsx b/tgui/packages/tgui/interfaces/FishingRod.tsx
index ac700144def..5e1f00b1e82 100644
--- a/tgui/packages/tgui/interfaces/FishingRod.tsx
+++ b/tgui/packages/tgui/interfaces/FishingRod.tsx
@@ -2,6 +2,11 @@ import { useBackend } from '../backend';
 import { Window } from '../layouts';
 import { Box, Stack, Button, Section, Flex } from '../components';
 
+type Quality = {
+  name: string;
+  kind: 'good' | 'neutral' | 'medium';
+};
+
 type FishingRodData = {
   bait_name: string;
   bait_icon: string;
@@ -29,8 +34,9 @@ const FishingRodSlot = (props: FishingSlotProps) => {
       height="64px"
       src={`data:image/jpeg;base64,${icon}`}
       style={{
-        verticalAlign: 'middle',
-        objectFit: 'cover',
+        '-ms-interpolation-mode': 'nearest-neighbor',
+        'vertical-align': 'middle',
+        'object-fit': 'cover',
       }}
     />
   );
@@ -61,10 +67,10 @@ const FishingRodSlot = (props: FishingSlotProps) => {
 };
 
 export const FishingRod = (props) => {
-  const { data } = useBackend<FishingRodData>();
+  const { act, data } = useBackend<FishingRodData>();
 
   return (
-    <Window height={300} width={300}>
+    <Window>
       <Window.Content>
         <Section>
           <FishingRodSlot
diff --git a/tgui/packages/tgui/interfaces/GlassBlowing.tsx b/tgui/packages/tgui/interfaces/GlassBlowing.tsx
index 0103abeda8a..4c6808f15d3 100644
--- a/tgui/packages/tgui/interfaces/GlassBlowing.tsx
+++ b/tgui/packages/tgui/interfaces/GlassBlowing.tsx
@@ -229,7 +229,8 @@ export const GlassBlowing = (props) => {
                 black: [-Infinity, 0.05],
               }}
               style={{
-                backgroundImage: 'linear-gradient(to right, blue, yellow, red)',
+                'background-image':
+                  'linear-gradient(to right, blue, yellow, red)',
               }}>
               <AnimatedNumber
                 value={glass.timeLeft}
@@ -245,7 +246,7 @@ export const GlassBlowing = (props) => {
               value={0 / 0}
               ranges={{}}
               style={{
-                backgroundImage: 'grey',
+                'background-image': 'grey',
               }}>
               <AnimatedNumber value={0} />
             </ProgressBar>
diff --git a/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx b/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx
index b9a180119f9..9d3c6f4a9da 100644
--- a/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx
+++ b/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx
@@ -203,16 +203,22 @@ const PreviewDisplay = (props) => {
             <Table.Cell>
               <Box
                 as="img"
-                m={0}
-                mx="10%"
                 src={data.sprites.finished}
+                m={0}
                 width="75%"
+                mx="10%"
+                style={{ '-ms-interpolation-mode': 'nearest-neighbor' }}
               />
             </Table.Cell>
           ) : (
             <Table.Cell>
-              <Box>
-                <Icon name="image" ml="25%" size={5} />
+              <Box grow>
+                <Icon
+                  name="image"
+                  ml="25%"
+                  size={5}
+                  style={{ '-ms-interpolation-mode': 'nearest-neighbor' }}
+                />
               </Box>
             </Table.Cell>
           )}
diff --git a/tgui/packages/tgui/interfaces/HoloPay.tsx b/tgui/packages/tgui/interfaces/HoloPay.tsx
index 847b7631f60..1505d372a18 100644
--- a/tgui/packages/tgui/interfaces/HoloPay.tsx
+++ b/tgui/packages/tgui/interfaces/HoloPay.tsx
@@ -30,7 +30,7 @@ export const HoloPay = (props) => {
   };
 
   return (
-    <Window height={300} width={250} title="Holo Pay">
+    <Window height="300" width="250" title="Holo Pay">
       <Window.Content>
         {!owner ? (
           <NoticeBox>Error! Swipe an ID first.</NoticeBox>
diff --git a/tgui/packages/tgui/interfaces/Hypertorus/Temperatures.tsx b/tgui/packages/tgui/interfaces/Hypertorus/Temperatures.tsx
index c2b0d951907..8c33572fe4d 100644
--- a/tgui/packages/tgui/interfaces/Hypertorus/Temperatures.tsx
+++ b/tgui/packages/tgui/interfaces/Hypertorus/Temperatures.tsx
@@ -65,7 +65,11 @@ const BarLabel = (props) => {
           <Box align="center" color="red">
             Empty
           </Box>
-          <Box className="hypertorus__unselectable">&nbsp;</Box>
+          <Box
+            class="hypertorus__unselectable"
+            {...(Byond.IS_LTE_IE8 ? { style: { unselectable: true } } : {})}>
+            &nbsp;
+          </Box>
         </>
       )}
     </>
@@ -164,7 +168,7 @@ export const HypertorusTemperatures = (props) => {
     return (
       (!!value || force) && (
         <Box
-          className="hypertorus-temperatures__y-axis-tick-anchor"
+          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}
diff --git a/tgui/packages/tgui/interfaces/IVDrip.tsx b/tgui/packages/tgui/interfaces/IVDrip.tsx
index 792f44c6d01..f713d05fc86 100644
--- a/tgui/packages/tgui/interfaces/IVDrip.tsx
+++ b/tgui/packages/tgui/interfaces/IVDrip.tsx
@@ -94,7 +94,7 @@ export const IVDrip = (props) => {
             </LabeledList.Item>
             <LabeledList.Item
               label="Direction"
-              color={!mode ? 'bad' : ''}
+              color={!mode && 'bad'}
               buttons={
                 <Button
                   my={1}
@@ -132,13 +132,14 @@ export const IVDrip = (props) => {
                   )
                 }>
                 <ProgressBar
+                  py={0.3}
                   value={containerCurrentVolume}
                   minValue={0}
                   maxValue={containerMaxVolume}
                   color={containerReagentColor}>
                   <span
                     style={{
-                      textShadow: '1px 1px 0 black',
+                      'text-shadow': '1px 1px 0 black',
                     }}>
                     {`${containerCurrentVolume} of ${containerMaxVolume} units`}
                   </span>
diff --git a/tgui/packages/tgui/interfaces/InfuserBook.tsx b/tgui/packages/tgui/interfaces/InfuserBook.tsx
index 9ae633fc87e..b475e297a6c 100644
--- a/tgui/packages/tgui/interfaces/InfuserBook.tsx
+++ b/tgui/packages/tgui/interfaces/InfuserBook.tsx
@@ -148,9 +148,7 @@ export const InfuserBook = (props) => {
                       key={tabIndex}
                       selected={chapter === tabIndex}
                       onClick={
-                        tabIndex === 4
-                          ? undefined
-                          : () => switchChapter(tabIndex)
+                        tabIndex === 4 ? null : () => switchChapter(tabIndex)
                       }>
                       <Box color={tabIndex === 4 && 'red'}>{tab}</Box>
                     </Tabs.Tab>
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.jsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.jsx
index a304630a954..8515f18e4ab 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.jsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.jsx
@@ -1,5 +1,5 @@
 import { Section, Button, Dropdown, Stack, Input, NoticeBox } from '../../components';
-import { Component } from 'react';
+import { Component } from 'inferno';
 import { shallowDiffers } from 'common/react';
 import { fetchRetry } from '../../http';
 import { resolveAsset } from '../../assets';
@@ -10,8 +10,8 @@ import { DEFAULT_COMPONENT_MENU_LIMIT } from './constants';
 let fetchServerData;
 
 export class ComponentMenu extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       selectedTab: 'All',
       currentLimit: DEFAULT_COMPONENT_MENU_LIMIT,
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/DisplayComponent.jsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/DisplayComponent.jsx
index 28b14415818..9f25a81f83b 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/DisplayComponent.jsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/DisplayComponent.jsx
@@ -1,11 +1,11 @@
 import { Button, Stack, Box } from '../../components';
-import { Component, createRef } from 'react';
+import { Component, createRef } from 'inferno';
 import { Port } from './Port';
 import { noop } from './constants';
 
 export class DisplayComponent extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.ref = createRef();
   }
 
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.jsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.jsx
index 3b27f090899..49cd3327285 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.jsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/ObjectComponent.jsx
@@ -1,12 +1,12 @@
 import { Box, Stack, Button } from '../../components';
-import { Component } from 'react';
+import { Component } from 'inferno';
 import { shallowDiffers } from '../../../common/react';
 import { ABSOLUTE_Y_OFFSET, noop } from './constants';
 import { Port } from './Port';
 
 export class ObjectComponent extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       isDragging: false,
       dragPos: null,
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.jsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.jsx
index d8cc5b07917..d2fbd920fc3 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.jsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/Port.jsx
@@ -1,12 +1,12 @@
 import { Stack, Box } from '../../components';
-import { Component, createRef } from 'react';
+import { Component, createRef } from 'inferno';
 import { DisplayName } from './DisplayName';
 import { classes } from 'common/react';
 import { noop } from './constants';
 
 export class Port extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.iconRef = createRef();
     this.componentDidUpdate = this.componentDidUpdate.bind(this);
     this.componentDidMount = this.componentDidMount.bind(this);
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/VariableMenu.jsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/VariableMenu.jsx
index adc9b881738..89ebcd12378 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/VariableMenu.jsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/VariableMenu.jsx
@@ -1,11 +1,11 @@
 import { Box, Stack, Section, Button, Input, Dropdown, Icon } from '../../components';
-import { Component } from 'react';
+import { Component } from 'inferno';
 import { shallowDiffers } from 'common/react';
 import { VARIABLE_ASSOC_LIST, VARIABLE_LIST, VARIABLE_NOT_A_LIST } from './constants';
 
 export class VariableMenu extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       variable_name: '',
       variable_type: 'any',
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/index.jsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/index.jsx
index 6a449c49c43..bc409ad7bc2 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/index.jsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/index.jsx
@@ -1,6 +1,6 @@
 import { useBackend } from '../../backend';
 import { Input, InfinitePlane, Stack, Box, Button } from '../../components';
-import { Component } from 'react';
+import { Component } from 'inferno';
 import { Window } from '../../layouts';
 import { resolveAsset } from '../../assets';
 import { CircuitInfo } from './CircuitInfo';
@@ -12,8 +12,8 @@ import { VariableMenu } from './VariableMenu';
 import { ComponentMenu } from './ComponentMenu';
 
 export class IntegratedCircuit extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       locations: {},
       selectedPort: null,
@@ -505,7 +505,7 @@ export class IntegratedCircuit extends Component {
         }>
         <Window.Content
           style={{
-            backgroundImage: 'none',
+            'background-image': 'none',
           }}>
           <InfinitePlane
             width="100%"
@@ -565,8 +565,8 @@ export class IntegratedCircuit extends Component {
               minWidth="600px"
               width="50%"
               style={{
-                borderRadius: '0px 32px 0px 0px',
-                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                'border-radius': '0px 32px 0px 0px',
+                'background-color': 'rgba(0, 0, 0, 0.3)',
                 '-ms-user-select': 'none',
               }}
               unselectable="on">
@@ -590,7 +590,7 @@ export class IntegratedCircuit extends Component {
                 handleMouseDownSetter={this.onVarClickedSetter}
                 handleMouseDownGetter={this.onVarClickedGetter}
                 style={{
-                  borderRadius: '0px 32px 0px 0px',
+                  'border-radius': '0px 32px 0px 0px',
                 }}
               />
             </Box>
@@ -603,7 +603,7 @@ export class IntegratedCircuit extends Component {
               height="100%"
               width="300px"
               style={{
-                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                'background-color': 'rgba(0, 0, 0, 0.3)',
                 '-ms-user-select': 'none',
               }}
               unselectable="on">
diff --git a/tgui/packages/tgui/interfaces/InteractionMenu.tsx b/tgui/packages/tgui/interfaces/InteractionMenu.tsx
index bb502980dce..0d44352be0e 100644
--- a/tgui/packages/tgui/interfaces/InteractionMenu.tsx
+++ b/tgui/packages/tgui/interfaces/InteractionMenu.tsx
@@ -90,16 +90,17 @@ export const InteractionMenu = (props) => {
                       tooltip={element.name}>
                       <Box
                         style={{
-                          width: '32px',
-                          height: '32px',
-                          margin: '0.5em 0',
+                          'width': '32px',
+                          'height': '32px',
+                          'margin': '0.5em 0',
                         }}>
                         {element.img ? (
                           <img
                             src={'data:image/png;base64,' + element.img}
                             style={{
-                              width: '100%',
-                              height: '100%',
+                              '-ms-interpolation-mode': 'nearest-neighbor',
+                              'width': '100%',
+                              'height': '100%',
                             }}
                           />
                         ) : (
@@ -109,7 +110,7 @@ export const InteractionMenu = (props) => {
                             ml={0}
                             mt={0.75}
                             style={{
-                              textAlign: 'center',
+                              'text-align': 'center',
                             }}
                           />
                         )}
diff --git a/tgui/packages/tgui/interfaces/JobSelection.tsx b/tgui/packages/tgui/interfaces/JobSelection.tsx
index d8857a308af..338dab7e278 100644
--- a/tgui/packages/tgui/interfaces/JobSelection.tsx
+++ b/tgui/packages/tgui/interfaces/JobSelection.tsx
@@ -2,6 +2,7 @@ import { useBackend } from '../backend';
 import { Box, Button, StyleableSection, Icon, Stack, NoticeBox } from '../components';
 import { Window } from '../layouts';
 import { Color } from 'common/color';
+import { SFC } from 'inferno';
 import { JOB2ICON } from './common/JobToIcon';
 import { deepMerge } from 'common/collections';
 import { BooleanLike } from 'common/react';
@@ -32,12 +33,12 @@ type Data = {
   alert_level: { name: string; color: string }; // SKYRAT EDIT ADDITION - Alert level on jobs menu
 };
 
-export const JobEntry = (data: {
+export const JobEntry: SFC<{
   jobName: string;
   job: Job;
   department: Department;
   onClick: () => void;
-}) => {
+}> = (data) => {
   const jobName = data.jobName;
   const job = data.job;
   const department = data.department;
@@ -47,26 +48,26 @@ export const JobEntry = (data: {
       fluid
       style={{
         // Try not to think too hard about this one.
-        backgroundColor: job.unavailable_reason
+        'background-color': job.unavailable_reason
           ? '#949494' // Grey background
           : job.prioritized
             ? '#16fc0f' // Bright green background
             : Color.fromHex(department.color)
               .darken(10)
               .toString(),
-        color: job.unavailable_reason
+        'color': job.unavailable_reason
           ? '#616161' // Dark grey font
           : Color.fromHex(department.color)
             .darken(90)
             .toString(),
-        fontSize: '1.1rem',
-        cursor: job.unavailable_reason ? 'initial' : 'pointer',
+        'font-size': '1.1rem',
+        'cursor': job.unavailable_reason ? 'initial' : 'pointer',
       }}
       tooltip={
         job.unavailable_reason ||
         (job.prioritized ? (
           <>
-            <p style={{ marginTop: '0px' }}>
+            <p style={{ 'margin-top': '0px' }}>
               <b>The HoP wants more people in this job!</b>
             </p>
             {job.description}
@@ -83,9 +84,9 @@ export const JobEntry = (data: {
         {job.command ? <b>{jobName}</b> : jobName}
         <span
           style={{
-            whiteSpace: 'nowrap',
-            position: 'absolute',
-            right: '0.5em',
+            'white-space': 'nowrap',
+            'position': 'absolute',
+            'right': '0.5em',
           }}>
           {job.used_slots} / {job.open_slots}
         </span>
@@ -110,8 +111,12 @@ export const JobSelection = (props) => {
       height={
         data.shuttle_status
           ? 916
-          : 900 /* Hahahahahaha */ /* SKYRAT EDIT CHANGE - Expand UI for available jobs */
-      }>
+          : 900 /* Hahahahahaha */ /* SKYRAT EDIT - Expand UI for available jobs - ORIGINAL: data.shuttle_status ? 690 : 666 */
+      }
+      onComponentDidMount={() => {
+        // Send a heartbeat back to DM to let it know the window is alive and well
+        act('ui_mounted_with_no_bluescreen');
+      }}>
       <Window.Content scrollable>
         <StyleableSection
           title={
@@ -125,19 +130,19 @@ export const JobSelection = (props) => {
                   The current alert level is: {data.alert_level.name}
                 </NoticeBox>
               }
-              <span style={{ color: 'grey' }}>
+              <span style={{ 'color': 'grey' }}>
                 It is currently {data.round_duration} into the shift.
               </span>
               <Button
-                style={{ position: 'absolute', right: '1em' }}
-                onClick={() => act('select_job', { job: 'Random' })}
+                style={{ 'position': 'absolute', 'right': '1em' }}
+                onClick={() => act('select_job', { 'job': 'Random' })}
                 content="Random Job!"
                 tooltip="Roll target random job. You can re-roll or cancel your random job if you don't like it."
               />
             </>
           }
-          titleStyle={{ minHeight: '3.4em' }}>
-          <Box wrap="wrap" style={{ columns: '20em' }}>
+          titleStyle={{ 'min-height': '3.4em' }}>
+          <Box wrap="wrap" style={{ 'columns': '20em' }}>
             {Object.entries(departments).map((departmentEntry) => {
               const departmentName = departmentEntry[0];
               const entry = departmentEntry[1];
@@ -149,11 +154,11 @@ export const JobSelection = (props) => {
                         {departmentName}
                         <span
                           style={{
-                            fontSize: '1rem',
-                            whiteSpace: 'nowrap',
-                            position: 'absolute',
-                            right: '1em',
-                            color: Color.fromHex(entry.color)
+                            'font-size': '1rem',
+                            'white-space': 'nowrap',
+                            'position': 'absolute',
+                            'right': '1em',
+                            'color': Color.fromHex(entry.color)
                               .darken(60)
                               .toString(),
                           }}>
@@ -164,9 +169,9 @@ export const JobSelection = (props) => {
                       </>
                     }
                     style={{
-                      backgroundColor: entry.color,
-                      marginBottom: '1em',
-                      breakInside: 'avoid-column',
+                      'background-color': entry.color,
+                      'margin-bottom': '1em',
+                      'break-inside': 'avoid-column',
                     }}
                     titleStyle={{
                       'border-bottom-color': Color.fromHex(entry.color)
@@ -174,7 +179,7 @@ export const JobSelection = (props) => {
                         .toString(),
                     }}
                     textStyle={{
-                      color: Color.fromHex(entry.color)
+                      'color': Color.fromHex(entry.color)
                         .darken(80)
                         .toString(),
                     }}>
diff --git a/tgui/packages/tgui/interfaces/Lawpanel.tsx b/tgui/packages/tgui/interfaces/Lawpanel.tsx
index 7c6f9920f2f..09fac09c1fd 100644
--- a/tgui/packages/tgui/interfaces/Lawpanel.tsx
+++ b/tgui/packages/tgui/interfaces/Lawpanel.tsx
@@ -290,7 +290,7 @@ export const Lawpanel = (props) => {
   const { all_silicons } = data;
 
   return (
-    <Window title="Law Panel" theme="admin" width={800} height={600}>
+    <Window title="Law Panel" theme="admin" width="800" height="600">
       <Window.Content>
         <Section
           fill
diff --git a/tgui/packages/tgui/interfaces/LibraryAdmin.tsx b/tgui/packages/tgui/interfaces/LibraryAdmin.tsx
index 87711908166..13bb7940860 100644
--- a/tgui/packages/tgui/interfaces/LibraryAdmin.tsx
+++ b/tgui/packages/tgui/interfaces/LibraryAdmin.tsx
@@ -438,7 +438,7 @@ const ModifyPage = (props) => {
             <Table.Cell
               className="LibraryAdmin_RecordCell"
               style={{
-                whiteSpace: 'pre-wrap',
+                'white-space': 'pre-wrap',
               }}>
               {entry.reason}
             </Table.Cell>
diff --git a/tgui/packages/tgui/interfaces/LuaEditor/Log.jsx b/tgui/packages/tgui/interfaces/LuaEditor/Log.jsx
index 4bdb0119bae..2b186fdc3ab 100644
--- a/tgui/packages/tgui/interfaces/LuaEditor/Log.jsx
+++ b/tgui/packages/tgui/interfaces/LuaEditor/Log.jsx
@@ -129,7 +129,7 @@ export const Log = (props) => {
             px="0.25rem"
             mt="0.25rem"
             style={{
-              borderRadius: '0.5em',
+              'border-radius': '0.5em',
             }}
             backgroundColor={messageColor}>
             x{repeats + 1}
diff --git a/tgui/packages/tgui/interfaces/LuaEditor/index.jsx b/tgui/packages/tgui/interfaces/LuaEditor/index.jsx
index 3f667e730c1..e86dd0fb451 100644
--- a/tgui/packages/tgui/interfaces/LuaEditor/index.jsx
+++ b/tgui/packages/tgui/interfaces/LuaEditor/index.jsx
@@ -9,7 +9,7 @@ import { Log } from './Log';
 import { TaskManager } from './TaskManager';
 import { sanitizeText } from '../../sanitize';
 import { marked } from 'marked';
-import { Component, createRef } from 'react';
+import { Component, createRef } from 'inferno';
 import hljs from 'highlight.js/lib/core';
 import lua from 'highlight.js/lib/languages/lua';
 hljs.registerLanguage('lua', lua);
@@ -192,7 +192,7 @@ export class LuaEditor extends Component {
                     displayedValue={
                       <Box
                         style={{
-                          pointerEvents: 'none',
+                          'pointer-events': 'none',
                         }}
                         dangerouslySetInnerHTML={{
                           __html: hljs.highlight(scriptInput, {
diff --git a/tgui/packages/tgui/interfaces/MODsuit.tsx b/tgui/packages/tgui/interfaces/MODsuit.tsx
index ce193b75268..ba740e19591 100644
--- a/tgui/packages/tgui/interfaces/MODsuit.tsx
+++ b/tgui/packages/tgui/interfaces/MODsuit.tsx
@@ -105,7 +105,8 @@ export const MODsuit = (props) => {
       width={600}
       height={600}
       theme={ui_theme}
-      title="MOD Interface Panel">
+      title="MOD Interface Panel"
+      resizable>
       <Window.Content scrollable={!interface_break}>
         <MODsuitContent />
       </Window.Content>
@@ -355,7 +356,7 @@ const SuitStatusSection = (props) => {
               bad: [-Infinity, 0.3],
             }}
             style={{
-              textShadow: '1px 1px 0 black',
+              'text-shadow': '1px 1px 0 black',
             }}>
             {!core_name
               ? 'No Core Detected'
@@ -440,7 +441,7 @@ const HardwareSection = (props) => {
   const { control, helmet, chestplate, gauntlets, boots } = data;
   const { ai_name, core_name } = data.suit_status;
   return (
-    <Section title="Hardware" style={{ textTransform: 'capitalize' }}>
+    <Section title="Hardware" style={{ 'text-transform': 'capitalize' }}>
       <LabeledList>
         <LabeledList.Item label="AI Assistant">
           {ai_name || 'No AI Detected'}
@@ -583,8 +584,8 @@ const UserStatusSection = (props) => {
           <LabeledList.Item label="Fingerprints">
             <Box
               style={{
-                wordBreak: 'break-all',
-                wordWrap: 'break-word',
+                'word-break': 'break-all',
+                'word-wrap': 'break-word',
               }}>
               {active ? dna_unique_identity : '???'}
             </Box>
@@ -594,8 +595,8 @@ const UserStatusSection = (props) => {
           <LabeledList.Item label="Enzymes">
             <Box
               style={{
-                wordBreak: 'break-all',
-                wordWrap: 'break-word',
+                'word-break': 'break-all',
+                'word-wrap': 'break-word',
               }}>
               {active ? dna_unique_enzymes : '???'}
             </Box>
diff --git a/tgui/packages/tgui/interfaces/MafiaPanel.tsx b/tgui/packages/tgui/interfaces/MafiaPanel.tsx
index d4051e87204..7e3bfafe9d4 100644
--- a/tgui/packages/tgui/interfaces/MafiaPanel.tsx
+++ b/tgui/packages/tgui/interfaces/MafiaPanel.tsx
@@ -291,10 +291,10 @@ const MafiaRole = (props) => {
       buttons={
         <Box
           style={{
-            fontFamily: 'Consolas, monospace',
-            fontSize: '14px',
-            lineHeight: 1.5,
-            fontWeight: 'bold',
+            'font-family': 'Consolas, monospace',
+            'font-size': '14px',
+            'line-height': 1.5,
+            'font-weight': 'bold',
           }}>
           {formatTime(timeleft)}
         </Box>
@@ -309,14 +309,14 @@ const MafiaRole = (props) => {
             className={classes(['mafia32x32', roleinfo.revealed_icon])}
             style={{
               'transform': 'scale(2) translate(0px, 10%)',
-              verticalAlign: 'middle',
+              'vertical-align': 'middle',
             }}
           />
           <Box
             className={classes(['mafia32x32', roleinfo.hud_icon])}
             style={{
               'transform': 'scale(2) translate(-5px, -5px)',
-              verticalAlign: 'middle',
+              'vertical-align': 'middle',
             }}
           />
         </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/MarkdownViewer.tsx b/tgui/packages/tgui/interfaces/MarkdownViewer.tsx
index 66701658111..fdc9e14e04c 100644
--- a/tgui/packages/tgui/interfaces/MarkdownViewer.tsx
+++ b/tgui/packages/tgui/interfaces/MarkdownViewer.tsx
@@ -12,7 +12,7 @@ type MarkdownViewerData = {
 export const MarkdownViewer = (_: any) => {
   const { data } = useBackend<MarkdownViewerData>();
   return (
-    <Window theme="paper" title={data.title} width={300} height={300}>
+    <Window theme="paper" title={data.title}>
       <Window.Content scrollable backgroundColor={'#FFFFFF'}>
         <MarkdownRenderer content={data.content} />
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/MassSpec.jsx b/tgui/packages/tgui/interfaces/MassSpec.jsx
index 8bfddbb707c..65ee4ffd388 100644
--- a/tgui/packages/tgui/interfaces/MassSpec.jsx
+++ b/tgui/packages/tgui/interfaces/MassSpec.jsx
@@ -272,7 +272,7 @@ const MassSpectroscopy = (props) => {
                   ((peak.mass + 10) / graphUpperRange) * 500
                 },265 `}
                 opacity="0.6"
-                style={{ fill: peak.color }}
+                style={`fill:${peak.color}`}
               />
             ))}
             <polygon
@@ -282,7 +282,7 @@ const MassSpectroscopy = (props) => {
                 (upperRange / deltaRange) * 500
               },265`}
               opacity="0.2"
-              style={{ fill: 'blue' }}
+              style={`fill:blue`}
             />
             <line
               x1={0}
diff --git a/tgui/packages/tgui/interfaces/Mecha/ModulesPane.tsx b/tgui/packages/tgui/interfaces/Mecha/ModulesPane.tsx
index c279eadf1b5..b51bd3aec27 100644
--- a/tgui/packages/tgui/interfaces/Mecha/ModulesPane.tsx
+++ b/tgui/packages/tgui/interfaces/Mecha/ModulesPane.tsx
@@ -47,7 +47,7 @@ export const ModulesPane = (props) => {
     <Section
       title="Equipment"
       fill
-      style={{ overflowY: 'auto' }}
+      style={{ 'overflow-y': 'auto' }}
       buttons={
         <Button
           icon={!weapons_safety ? 'triangle-exclamation' : 'helmet-safety'}
@@ -83,9 +83,9 @@ export const ModulesPane = (props) => {
                   <Stack.Item
                     lineHeight="32px"
                     style={{
-                      textTransform: 'capitalize',
+                      'text-transform': 'capitalize',
                       'overflow': 'hidden',
-                      textOverflow: 'ellipsis',
+                      'text-overflow': 'ellipsis',
                     }}>
                     {`${moduleSlotLabel(module.slot)} Slot`}
                   </Stack.Item>
@@ -113,9 +113,9 @@ export const ModulesPane = (props) => {
                   <Stack.Item
                     lineHeight="32px"
                     style={{
-                      textTransform: 'capitalize',
+                      'text-transform': 'capitalize',
                       'overflow': 'hidden',
-                      textOverflow: 'ellipsis',
+                      'text-overflow': 'ellipsis',
                     }}>
                     {module.name}
                   </Stack.Item>
@@ -144,7 +144,7 @@ export const ModuleDetails = (props) => {
           <Stack.Item>
             <Stack>
               <Stack.Item grow>
-                <h2 style={{ textTransform: 'capitalize' }}>{name}</h2>
+                <h2 style={{ 'text-transform': 'capitalize' }}>{name}</h2>
                 <Box italic opacity={0.5}>
                   {moduleSlotLabel(slot)}
                 </Box>
@@ -782,9 +782,9 @@ const SnowflakeOrebox = (props) => {
             <Stack.Item
               lineHeight="24px"
               style={{
-                textTransform: 'capitalize',
+                'text-transform': 'capitalize',
                 'overflow': 'hidden',
-                textOverflow: 'ellipsis',
+                'text-overflow': 'ellipsis',
               }}>
               {`${contents[item].amount}x ${contents[item].name}`}
             </Stack.Item>
@@ -823,7 +823,7 @@ const SnowflakeCargo = (props) => {
                 })
               }
               style={{
-                textTransform: 'capitalize',
+                'text-transform': 'capitalize',
               }}>
               {item.name}
             </Button>
diff --git a/tgui/packages/tgui/interfaces/Mecha/index.tsx b/tgui/packages/tgui/interfaces/Mecha/index.tsx
index f243083fe63..2c17ff5a91c 100644
--- a/tgui/packages/tgui/interfaces/Mecha/index.tsx
+++ b/tgui/packages/tgui/interfaces/Mecha/index.tsx
@@ -148,7 +148,7 @@ const PowerBar = (props) => {
           bad: [-Infinity, 0.25],
         }}
         style={{
-          textShadow: '1px 1px 0 black',
+          'text-shadow': '1px 1px 0 black',
         }}>
         {power_max === null
           ? 'Power cell missing'
@@ -177,7 +177,7 @@ const IntegrityBar = (props) => {
           bad: [-Infinity, 0.25],
         }}
         style={{
-          textShadow: '1px 1px 0 black',
+          'text-shadow': '1px 1px 0 black',
         }}>
         {!scanmod_rating ? 'Unknown' : `${integrity} of ${integrity_max}`}
       </ProgressBar>
diff --git a/tgui/packages/tgui/interfaces/MemoryPanel.jsx b/tgui/packages/tgui/interfaces/MemoryPanel.jsx
index dd57a659c06..ac39ecca607 100644
--- a/tgui/packages/tgui/interfaces/MemoryPanel.jsx
+++ b/tgui/packages/tgui/interfaces/MemoryPanel.jsx
@@ -59,7 +59,7 @@ const MemoryQuality = (props) => {
       <Button
         icon="star"
         style={{
-          background:
+          'background':
             'linear-gradient(to right, #964B30, #D68B60, #B66B30, #D68B60, #964B30);',
         }}
         tooltipPosition="right"
@@ -75,7 +75,7 @@ const MemoryQuality = (props) => {
       <Button
         icon="star"
         style={{
-          background:
+          'background':
             'linear-gradient(to right, #636363, #a3a3a3, #6e6e6e, #a3a3a3, #636363);',
         }}
         tooltipPosition="right"
@@ -91,7 +91,7 @@ const MemoryQuality = (props) => {
       <Button
         icon="star"
         style={{
-          background:
+          'background':
             'linear-gradient(to right, #AA771C, #BCB68A, #B38728, #BCB68A, #AA771C);',
         }}
         tooltipPosition="right"
@@ -107,7 +107,7 @@ const MemoryQuality = (props) => {
       <Button
         icon="crown"
         style={{
-          background:
+          'background':
             'linear-gradient(to right, #56A5B3, #75D4E2, #56A5B3, #75D4E2, #56A5B3)',
         }}
         tooltipPosition="right"
diff --git a/tgui/packages/tgui/interfaces/NavBeacon.tsx b/tgui/packages/tgui/interfaces/NavBeacon.tsx
index 6d58db7c4d5..a941e169bb8 100644
--- a/tgui/packages/tgui/interfaces/NavBeacon.tsx
+++ b/tgui/packages/tgui/interfaces/NavBeacon.tsx
@@ -97,7 +97,7 @@ export const NavBeaconControlSection = (props: DisabledProps) => {
         </LabeledList.Item>
         <LabeledList.Item label="Delivery Direction">
           <Dropdown
-            disabled={!!props.disabled}
+            disabled={props.disabled}
             options={static_controls.direction_options}
             displayText={controls.delivery_direction || 'none'}
             onSelected={(value) =>
diff --git a/tgui/packages/tgui/interfaces/NtosEmojipedia.jsx b/tgui/packages/tgui/interfaces/NtosEmojipedia.jsx
index 17b5780a366..b39672e9cb4 100644
--- a/tgui/packages/tgui/interfaces/NtosEmojipedia.jsx
+++ b/tgui/packages/tgui/interfaces/NtosEmojipedia.jsx
@@ -45,6 +45,9 @@ export const NtosEmojipedia = (props) => {
               as="img"
               m={0}
               title={emoji.name}
+              style={{
+                '-ms-interpolation-mode': 'nearest-neighbor',
+              }}
               onClick={() => {
                 new Promise((resolve, _) => {
                   const input = document.createElement('input');
diff --git a/tgui/packages/tgui/interfaces/NtosMessenger/ChatScreen.tsx b/tgui/packages/tgui/interfaces/NtosMessenger/ChatScreen.tsx
index 6aa436fe1a2..67c5ad0ce19 100644
--- a/tgui/packages/tgui/interfaces/NtosMessenger/ChatScreen.tsx
+++ b/tgui/packages/tgui/interfaces/NtosMessenger/ChatScreen.tsx
@@ -1,5 +1,5 @@
 import { Stack, Section, Button, Box, Input, Modal, Tooltip, Icon } from '../../components';
-import { Component, RefObject, createRef } from 'react';
+import { Component, RefObject, createRef, SFC } from 'inferno';
 import { NtMessage, NtMessenger, NtPicture } from './types';
 import { BooleanLike } from 'common/react';
 import { useBackend } from '../../backend';
@@ -419,7 +419,7 @@ const ChatMessage = (props: ChatMessageProps) => {
   );
 };
 
-const ChatDivider = (props: { mt: number }) => {
+const ChatDivider: SFC<{ mt: number }> = (props) => {
   return (
     <Box className="UnreadDivider" m={0} mt={props.mt}>
       <div />
diff --git a/tgui/packages/tgui/interfaces/NtosNotepad.tsx b/tgui/packages/tgui/interfaces/NtosNotepad.tsx
index 5971de0a0c3..cff8f06752e 100644
--- a/tgui/packages/tgui/interfaces/NtosNotepad.tsx
+++ b/tgui/packages/tgui/interfaces/NtosNotepad.tsx
@@ -7,7 +7,7 @@
 import { NtosWindow } from '../layouts';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Section, TextArea, MenuBar, Divider } from '../components';
-import { Component, createRef, RefObject } from 'react';
+import { Component, createRef, RefObject } from 'inferno';
 import { createLogger } from '../logging';
 import { Dialog, UnsavedChangesDialog } from '../components/Dialog';
 
@@ -28,7 +28,7 @@ const PartiallyUnderlined = (props: PartiallyUnderlinedProps) => {
   return (
     <>
       {start}
-      <span style={{ textDecoration: 'underline' }}>{underlined}</span>
+      <span style={{ 'text-decoration': 'underline' }}>{underlined}</span>
       {end}
     </>
   );
@@ -342,7 +342,7 @@ const AboutDialog = (props: AboutDialogProps) => {
           <span
             style={{
               'padding': '3rem 1rem 0.5rem 2rem',
-              maxWidth: '35rem',
+              'max-width': '35rem',
             }}>
             This product is licensed under the NT Corporation Terms to:
           </span>
diff --git a/tgui/packages/tgui/interfaces/NtosPhysScanner.jsx b/tgui/packages/tgui/interfaces/NtosPhysScanner.jsx
index fdf1481ff6b..811779cee47 100644
--- a/tgui/packages/tgui/interfaces/NtosPhysScanner.jsx
+++ b/tgui/packages/tgui/interfaces/NtosPhysScanner.jsx
@@ -23,7 +23,7 @@ export const NtosPhysScanner = (props) => {
             <br />
           </Box>
           <Box
-            style={{ whiteSpace: 'pre-line' }}
+            style={{ 'white-space': 'pre-line' }}
             dangerouslySetInnerHTML={textHtml}
           />
         </Section>
diff --git a/tgui/packages/tgui/interfaces/NtosPortraitPrinter.jsx b/tgui/packages/tgui/interfaces/NtosPortraitPrinter.jsx
index 0042d05eb68..fa67d921804 100644
--- a/tgui/packages/tgui/interfaces/NtosPortraitPrinter.jsx
+++ b/tgui/packages/tgui/interfaces/NtosPortraitPrinter.jsx
@@ -1,6 +1,6 @@
 import { resolveAsset } from '../assets';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, NoticeBox, Section, Stack, Input } from '../components';
+import { Button, NoticeBox, Section, Stack, Input } from '../components';
 import { NtosWindow } from '../layouts';
 
 export const NtosPortraitPrinter = (props) => {
@@ -52,13 +52,13 @@ export const NtosPortraitPrinter = (props) => {
                 {got_paintings ? (
                   <>
                     <Stack.Item>
-                      <Box
-                        as="img"
+                      <img
                         src={resolveAsset(current_portrait_asset_name)}
                         height="128px"
                         width={`${Math.round(128 * current_portrait_ratio)}px`}
                         style={{
-                          verticalAlign: 'middle',
+                          'vertical-align': 'middle',
+                          '-ms-interpolation-mode': 'nearest-neighbor',
                         }}
                       />
                     </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/NtosRadar.tsx b/tgui/packages/tgui/interfaces/NtosRadar.tsx
index f94e0389712..ab16bf63330 100644
--- a/tgui/packages/tgui/interfaces/NtosRadar.tsx
+++ b/tgui/packages/tgui/interfaces/NtosRadar.tsx
@@ -43,11 +43,11 @@ export const NtosRadarContent = (props) => {
       </Stack.Item>
       <Stack.Item
         style={{
-          backgroundImage:
+          'background-image':
             'url("' + resolveAsset('ntosradarbackground.png') + '")',
-          backgroundPosition: 'center',
-          backgroundRepeat: 'no-repeat',
-          top: '20px',
+          'background-position': 'center',
+          'background-repeat': 'no-repeat',
+          'top': '20px',
         }}
         position="relative"
         m={1.5}
@@ -129,7 +129,7 @@ const TargetDisplay = (props) => {
       top="20px"
       left="243px"
       style={{
-        transform: `rotate(${target.rot}deg)`,
+        'transform': `rotate(${target.rot}deg)`,
       }}
     />
   ) : (
diff --git a/tgui/packages/tgui/interfaces/OreContainer.tsx b/tgui/packages/tgui/interfaces/OreContainer.tsx
index 5f7db63a838..3c79971390c 100644
--- a/tgui/packages/tgui/interfaces/OreContainer.tsx
+++ b/tgui/packages/tgui/interfaces/OreContainer.tsx
@@ -103,7 +103,8 @@ const RetrieveIcon = (props) => {
       height="64px"
       width="64px"
       style={{
-        verticalAlign: 'middle',
+        '-ms-interpolation-mode': 'nearest-neighbor',
+        'vertical-align': 'middle',
       }}
     />
   );
diff --git a/tgui/packages/tgui/interfaces/OreRedemptionMachine.jsx b/tgui/packages/tgui/interfaces/OreRedemptionMachine.jsx
index e3eb91cc6ed..ed50b922775 100644
--- a/tgui/packages/tgui/interfaces/OreRedemptionMachine.jsx
+++ b/tgui/packages/tgui/interfaces/OreRedemptionMachine.jsx
@@ -181,7 +181,8 @@ const MaterialRow = (props) => {
             height="18px"
             width="18px"
             style={{
-              verticalAlign: 'middle',
+              '-ms-interpolation-mode': 'nearest-neighbor',
+              'vertical-align': 'middle',
             }}
           />
         </Table.Cell>
diff --git a/tgui/packages/tgui/interfaces/OutfitEditor.jsx b/tgui/packages/tgui/interfaces/OutfitEditor.jsx
index ae2b0825486..b4373e591e2 100644
--- a/tgui/packages/tgui/interfaces/OutfitEditor.jsx
+++ b/tgui/packages/tgui/interfaces/OutfitEditor.jsx
@@ -16,6 +16,9 @@ export const OutfitEditor = (props) => {
           opacity={0.5}
           py={3}
           src={`data:image/jpeg;base64,${dummy64}`}
+          style={{
+            '-ms-interpolation-mode': 'nearest-neighbor',
+          }}
         />
         <Section
           fill
@@ -25,8 +28,8 @@ export const OutfitEditor = (props) => {
                 grow={1}
                 style={{
                   'overflow': 'hidden',
-                  whiteSpace: 'nowrap',
-                  textOverflow: 'ellipsis',
+                  'white-space': 'nowrap',
+                  'text-overflow': 'ellipsis',
                 }}>
                 <Button
                   ml={0.5}
@@ -138,6 +141,9 @@ const OutfitSlot = (props) => {
               as="img"
               src={`data:image/jpeg;base64,${currItem?.sprite}`}
               title={currItem?.desc}
+              style={{
+                '-ms-interpolation-mode': 'nearest-neighbor',
+              }}
             />
             <Icon
               position="absolute"
@@ -153,8 +159,8 @@ const OutfitSlot = (props) => {
         color="label"
         style={{
           'overflow': 'hidden',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
+          'white-space': 'nowrap',
+          'text-overflow': 'ellipsis',
         }}
         title={currItem?.path}>
         {currItem?.name || 'Empty'}
diff --git a/tgui/packages/tgui/interfaces/OutfitManager.jsx b/tgui/packages/tgui/interfaces/OutfitManager.jsx
index 58341fa62ba..138ff6378ed 100644
--- a/tgui/packages/tgui/interfaces/OutfitManager.jsx
+++ b/tgui/packages/tgui/interfaces/OutfitManager.jsx
@@ -43,15 +43,15 @@ export const OutfitManager = (props) => {
                     shrink={1}
                     style={{
                       'overflow': 'hidden',
-                      whiteSpace: 'nowrap',
-                      textOverflow: 'ellipsis',
+                      'white-space': 'nowrap',
+                      'text-overflow': 'ellipsis',
                     }}>
                     <Button
                       fluid
                       style={{
                         'overflow': 'hidden',
-                        whiteSpace: 'nowrap',
-                        textOverflow: 'ellipsis',
+                        'white-space': 'nowrap',
+                        'text-overflow': 'ellipsis',
                       }}
                       content={outfit.name}
                       onClick={() => act('edit', { outfit: outfit.ref })}
diff --git a/tgui/packages/tgui/interfaces/PaiInterface/System.tsx b/tgui/packages/tgui/interfaces/PaiInterface/System.tsx
index 4528c94f37e..ce5db1726ac 100644
--- a/tgui/packages/tgui/interfaces/PaiInterface/System.tsx
+++ b/tgui/packages/tgui/interfaces/PaiInterface/System.tsx
@@ -91,7 +91,7 @@ const SystemInfo = (props) => {
         <LabeledList.Item label="Master">
           {master_name || 'None.'}
         </LabeledList.Item>
-        <LabeledList.Item color={master_dna ? 'red' : ''} label="DNA">
+        <LabeledList.Item color={master_dna && 'red'} label="DNA">
           {master_dna || 'None.'}
         </LabeledList.Item>
       </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/PaintingAdminPanel.tsx b/tgui/packages/tgui/interfaces/PaintingAdminPanel.tsx
index 05175c9e501..ef0c6a66c7b 100644
--- a/tgui/packages/tgui/interfaces/PaintingAdminPanel.tsx
+++ b/tgui/packages/tgui/interfaces/PaintingAdminPanel.tsx
@@ -46,13 +46,14 @@ export const PaintingAdminPanel = (props) => {
               height="96px"
               width="96px"
               style={{
-                verticalAlign: 'middle',
+                'vertical-align': 'middle',
+                '-ms-interpolation-mode': 'nearest-neighbor',
               }}
             />
             <LabeledList>
               <LabeledList.Item label="md5" content={chosenPainting.md5} />
               <LabeledList.Item label="title">
-                <Box inline style={{ wordBreak: 'break-all' }}>
+                <Box inline style={{ 'word-break': 'break-all' }}>
                   {decodeHtmlEntities(chosenPainting.title)}
                 </Box>
                 <Button
@@ -147,7 +148,7 @@ export const PaintingAdminPanel = (props) => {
             </Table.Row>
             {paintings.map((painting) => (
               <Table.Row key={painting.ref} className="candystripe">
-                <Table.Cell style={{ wordBreak: 'break-all' }}>
+                <Table.Cell style={{ 'word-break': 'break-all' }}>
                   {decodeHtmlEntities(painting.title)}
                 </Table.Cell>
                 <Table.Cell>{painting.creator_ckey}</Table.Cell>
@@ -157,7 +158,8 @@ export const PaintingAdminPanel = (props) => {
                     height="36px"
                     width="36px"
                     style={{
-                      verticalAlign: 'middle',
+                      'vertical-align': 'middle',
+                      '-ms-interpolation-mode': 'nearest-neighbor',
                     }}
                   />
                 </Table.Cell>
diff --git a/tgui/packages/tgui/interfaces/Pandemic/Symptom.tsx b/tgui/packages/tgui/interfaces/Pandemic/Symptom.tsx
index 738fd255b48..60d7c3db3ba 100644
--- a/tgui/packages/tgui/interfaces/Pandemic/Symptom.tsx
+++ b/tgui/packages/tgui/interfaces/Pandemic/Symptom.tsx
@@ -49,7 +49,7 @@ const Thresholds = (props) => {
           {convertedThresholds.map(([label, descr], index) => {
             return (
               <LabeledList.Item key={index} label={label}>
-                {String(descr)}
+                {descr}
               </LabeledList.Item>
             );
           })}
diff --git a/tgui/packages/tgui/interfaces/PaperSheet.tsx b/tgui/packages/tgui/interfaces/PaperSheet.tsx
index ea858583f30..607520e6826 100644
--- a/tgui/packages/tgui/interfaces/PaperSheet.tsx
+++ b/tgui/packages/tgui/interfaces/PaperSheet.tsx
@@ -8,7 +8,7 @@ import { Box, Button, Flex, Section, TextArea } from '../components';
 import { Window } from '../layouts';
 import { sanitizeText } from '../sanitize';
 import { marked } from 'marked';
-import { Component, createRef, RefObject } from 'react';
+import { Component, createRef, RefObject } from 'inferno';
 import { clamp } from 'common/math';
 
 const Z_INDEX_STAMP = 1;
@@ -245,14 +245,14 @@ class PaperSheetStamper extends Component<PaperSheetStamperProps> {
 }
 
 // Creates a full stamp div to render the given stamp to the preview.
-export const Stamp = (props) => {
+export const Stamp = (props): InfernoElement<HTMLDivElement> => {
   const { activeStamp, sprite, x, y, rotation, opacity, yOffset = 0 } = props;
   const stamp_transform = {
-    left: x + 'px',
-    top: y + yOffset + 'px',
-    transform: 'rotate(' + rotation + 'deg)',
-    opacity: opacity || 1.0,
-    zIndex: activeStamp ? Z_INDEX_STAMP_PREVIEW : Z_INDEX_STAMP,
+    'left': x + 'px',
+    'top': y + yOffset + 'px',
+    'transform': 'rotate(' + rotation + 'deg)',
+    'opacity': opacity || 1.0,
+    'z-index': activeStamp ? Z_INDEX_STAMP_PREVIEW : Z_INDEX_STAMP,
   };
 
   return (
@@ -667,9 +667,9 @@ export class PreviewView extends Component<PreviewViewProps> {
     color: string,
     bold: boolean = false
   ): string => {
-    return `<span style={{color:${color};font-family:${font};${
+    return `<span style="color:${color};font-family:${font};${
       bold ? 'font-weight: bold;' : ''
-    }}}>${text}</span>`;
+    }">${text}</span>`;
   };
 
   // Parses the given raw text through marked for applying markdown.
@@ -944,7 +944,7 @@ export class PreviewView extends Component<PreviewViewProps> {
     }
 
     const textHTML = {
-      __html: `<span className='paper-text'>${previewText}</span>`,
+      __html: `<span class='paper-text'>${previewText}</span>`,
     };
 
     const { scrollableRef, handleOnScroll } = this.props;
diff --git a/tgui/packages/tgui/interfaces/PersonalCrafting.tsx b/tgui/packages/tgui/interfaces/PersonalCrafting.tsx
index 2e8a08f0fe9..5bb7cc8715e 100644
--- a/tgui/packages/tgui/interfaces/PersonalCrafting.tsx
+++ b/tgui/packages/tgui/interfaces/PersonalCrafting.tsx
@@ -306,7 +306,7 @@ export const PersonalCrafting = (props) => {
                   </Tabs>
                 </Stack.Item>
                 <Stack.Item grow m={-1}>
-                  <Box height={'100%'} p={1} style={{ overflowY: 'auto' }}>
+                  <Box height={'100%'} p={1} style={{ 'overflow-y': 'auto' }}>
                     <Tabs vertical>
                       {tabMode === TABS.foodtype &&
                         mode === MODE.cooking &&
@@ -481,7 +481,7 @@ export const PersonalCrafting = (props) => {
               pr={1}
               pt={1}
               mr={-1}
-              style={{ overflowY: 'auto' }}>
+              style={{ 'overflow-y': 'auto' }}>
               {recipes.length > 0 ? (
                 recipes
                   .slice(0, displayLimit)
@@ -556,10 +556,10 @@ const MaterialContent = (props) => {
         lineHeight="32px"
         grow
         style={{
-          textTransform: 'capitalize',
+          'text-transform': 'capitalize',
           'overflow': 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
+          'text-overflow': 'ellipsis',
+          'white-space': 'nowrap',
         }}>
         {name}
       </Stack.Item>
@@ -577,7 +577,7 @@ const FoodtypeContent = (props) => {
       <Stack.Item width="14px" textAlign="center">
         <Icon name={TYPE_ICONS[type] || 'circle'} />
       </Stack.Item>
-      <Stack.Item grow style={{ textTransform: 'capitalize' }}>
+      <Stack.Item grow style={{ 'text-transform': 'capitalize' }}>
         {type.toLowerCase()}
       </Stack.Item>
       <Stack.Item>
@@ -609,10 +609,10 @@ const RecipeContentCompact = ({ item, craftable, busy, mode }) => {
         <Stack.Item grow>
           <Stack>
             <Stack.Item grow>
-              <Box mb={0.5} bold style={{ textTransform: 'capitalize' }}>
+              <Box mb={0.5} bold style={{ 'text-transform': 'capitalize' }}>
                 {item.name}
               </Box>
-              <Box style={{ textTransform: 'capitalize' }} color={'gray'}>
+              <Box style={{ 'text-transform': 'capitalize' }} color={'gray'}>
                 {Array.from(
                   Object.keys(item.reqs).map((atom_id) => {
                     const name = data.atom_data[(atom_id as any) - 1]?.name;
@@ -729,11 +729,11 @@ const RecipeContent = ({ item, craftable, busy, mode, diet }) => {
         <Stack.Item grow>
           <Stack>
             <Stack.Item grow>
-              <Box mb={0.5} bold style={{ textTransform: 'capitalize' }}>
+              <Box mb={0.5} bold style={{ 'text-transform': 'capitalize' }}>
                 {item.name}
               </Box>
               {item.desc && <Box color={'gray'}>{item.desc}</Box>}
-              <Box style={{ textTransform: 'capitalize' }}>
+              <Box style={{ 'text-transform': 'capitalize' }}>
                 {item.reqs && (
                   <Box>
                     <GroupTitle
@@ -795,7 +795,7 @@ const RecipeContent = ({ item, craftable, busy, mode, diet }) => {
               {!!item.steps?.length && (
                 <Box>
                   <GroupTitle title="Steps" />
-                  <ul style={{ paddingLeft: '20px' }}>
+                  <ul style={{ 'padding-left': '20px' }}>
                     {item.steps.map((step) => (
                       <li key={step}>{step}</li>
                     ))}
diff --git a/tgui/packages/tgui/interfaces/PlaneMasterDebug.tsx b/tgui/packages/tgui/interfaces/PlaneMasterDebug.tsx
index de78f5fca3c..7e783e46f3b 100644
--- a/tgui/packages/tgui/interfaces/PlaneMasterDebug.tsx
+++ b/tgui/packages/tgui/interfaces/PlaneMasterDebug.tsx
@@ -3,7 +3,7 @@ import { InfinitePlane, Stack, Box, Button, Modal, Dropdown, Section, LabeledLis
 import { sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { classes, shallowDiffers } from 'common/react';
-import { Component, createRef, RefObject } from 'react';
+import { Component, createRef, RefObject } from 'inferno';
 import { Window } from '../layouts';
 import { resolveAsset } from '../assets';
 import { MOUSE_BUTTON_LEFT, noop } from './IntegratedCircuit/constants';
@@ -316,8 +316,8 @@ const arrayRemove = function (arr: any, value) {
 };
 
 export class PlaneMasterDebug extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.handlePortClick = this.handlePortClick.bind(this);
   }
 
@@ -395,7 +395,7 @@ export class PlaneMasterDebug extends Component {
       <Window width={1200} height={800} title={'Plane Debugging: ' + mob_name}>
         <Window.Content
           style={{
-            backgroundImage: 'none',
+            'background-image': 'none',
           }}>
           <InfinitePlane
             width="100%"
@@ -555,8 +555,8 @@ class Port extends Component<PortProps> {
   // But it's how it was being done in circuit code, so eh
   iconRef: RefObject<SVGCircleElement> | RefObject<HTMLSpanElement> | any;
 
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.iconRef = createRef();
     this.handlePortMouseDown = this.handlePortMouseDown.bind(this);
   }
diff --git a/tgui/packages/tgui/interfaces/PlayerTicketHistory.tsx b/tgui/packages/tgui/interfaces/PlayerTicketHistory.tsx
index 71a93c6504e..226bdd74cc2 100644
--- a/tgui/packages/tgui/interfaces/PlayerTicketHistory.tsx
+++ b/tgui/packages/tgui/interfaces/PlayerTicketHistory.tsx
@@ -41,7 +41,7 @@ export const PlayerTicketHistory = (props: any) => {
 
   if (!data.db_connected) {
     return (
-      <Window title="Player Ticket History" width={300} height={300}>
+      <Window title="Player Ticket History">
         <Window.Content>
           <NoticeBox>The database is not connected.</NoticeBox>
         </Window.Content>
@@ -51,8 +51,6 @@ export const PlayerTicketHistory = (props: any) => {
 
   return (
     <Window
-      width={300}
-      height={300}
       title={`Player Ticket History${
         data.target_ckey ? ` - ${data.target_ckey}` : ''
       }`}>
diff --git a/tgui/packages/tgui/interfaces/PortraitPicker.jsx b/tgui/packages/tgui/interfaces/PortraitPicker.jsx
index 0326d80cd5e..bfc935c7e90 100644
--- a/tgui/packages/tgui/interfaces/PortraitPicker.jsx
+++ b/tgui/packages/tgui/interfaces/PortraitPicker.jsx
@@ -56,7 +56,8 @@ export const PortraitPicker = (props) => {
                         height="128px"
                         width="128px"
                         style={{
-                          verticalAlign: 'middle',
+                          'vertical-align': 'middle',
+                          '-ms-interpolation-mode': 'nearest-neighbor',
                         }}
                       />
                     </Flex.Item>
diff --git a/tgui/packages/tgui/interfaces/PowerMonitor.jsx b/tgui/packages/tgui/interfaces/PowerMonitor.jsx
index 299f9451f37..f169965529a 100644
--- a/tgui/packages/tgui/interfaces/PowerMonitor.jsx
+++ b/tgui/packages/tgui/interfaces/PowerMonitor.jsx
@@ -1,6 +1,7 @@
 import { map, sortBy } from 'common/collections';
 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, Dimmer, Stack } from '../components';
 import { Window } from '../layouts';
@@ -194,6 +195,8 @@ export const AreaCharge = (props) => {
   );
 };
 
+AreaCharge.defaultHooks = pureComponentHooks;
+
 const AreaStatusColorBox = (props) => {
   const { status } = props;
   const power = Boolean(status & 2);
@@ -207,3 +210,5 @@ const AreaStatusColorBox = (props) => {
     />
   );
 };
+
+AreaStatusColorBox.defaultHooks = pureComponentHooks;
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/AntagsPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/AntagsPage.tsx
index 8b2633ab3a6..472e57adb57 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/AntagsPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/AntagsPage.tsx
@@ -113,10 +113,10 @@ const AntagSelection = (props: { antagonists: Antagonist[]; name: string }) => {
               <Stack align="center" vertical>
                 <Stack.Item
                   style={{
-                    fontWeight: 'bold',
-                    marginTop: 'auto',
-                    maxWidth: '100px',
-                    textAlign: 'center',
+                    'font-weight': 'bold',
+                    'margin-top': 'auto',
+                    'max-width': '100px',
+                    'text-align': 'center',
                   }}>
                   {antagonist.name}
                 </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/GamePreferencesPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/GamePreferencesPage.tsx
index 07390a4aef5..d1d35a56340 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/GamePreferencesPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/GamePreferencesPage.tsx
@@ -1,5 +1,5 @@
 import { binaryInsertWith, sortBy } from 'common/collections';
-import { ReactNode } from 'react';
+import { InfernoNode } from 'inferno';
 import { useBackend } from '../../backend';
 import { Box, Flex, Tooltip } from '../../components';
 import { PreferencesMenuData } from './data';
@@ -9,7 +9,7 @@ import { TabbedMenu } from './TabbedMenu';
 
 type PreferenceChild = {
   name: string;
-  children: ReactNode;
+  children: InfernoNode;
 };
 
 const binaryInsertPreference = binaryInsertWith<PreferenceChild>(
@@ -28,21 +28,21 @@ export const GamePreferencesPage = (props) => {
   )) {
     const feature = features[featureId];
 
-    let nameInner: ReactNode = feature?.name || featureId;
+    let nameInner: InfernoNode = feature?.name || featureId;
 
     if (feature?.description) {
       nameInner = (
         <Box
           as="span"
           style={{
-            borderBottom: '2px dotted rgba(255, 255, 255, 0.8)',
+            'border-bottom': '2px dotted rgba(255, 255, 255, 0.8)',
           }}>
           {nameInner}
         </Box>
       );
     }
 
-    let name: ReactNode = (
+    let name: InfernoNode = (
       <Flex.Item grow={1} pr={2} basis={0} ml={2}>
         {nameInner}
       </Flex.Item>
@@ -90,7 +90,7 @@ export const GamePreferencesPage = (props) => {
     );
   }
 
-  const gamePreferenceEntries: [string, ReactNode][] = sortByName(
+  const gamePreferenceEntries: [string, InfernoNode][] = sortByName(
     Object.entries(gamePreferences)
   ).map(([category, preferences]) => {
     return [category, preferences.map((entry) => entry.children)];
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/JobsPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/JobsPage.tsx
index 46cef1f2214..a83eff9f201 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/JobsPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/JobsPage.tsx
@@ -1,6 +1,6 @@
 import { sortBy } from 'common/collections';
 import { classes } from 'common/react';
-import { PropsWithChildren, ReactNode } from 'react';
+import { InfernoNode, SFC } from 'inferno';
 import { useBackend } from '../../backend';
 import { Box, Button, Dropdown, Stack, Tooltip } from '../../components';
 import { logger } from '../../logging';
@@ -107,13 +107,12 @@ const PriorityButtons = (props: {
 
   return (
     <Box
+      inline // SKYRAT EDIT
       style={{
-        alignItems: 'center',
-        height: '100%',
-        justifyContent: 'flex-end',
-        paddingLeft: '0.3em',
-        paddingTop: '0.12em', // SKYRAT EDIT ADDITION - Add some vertical padding
-        paddingBottom: '0.12em', // SKYRAT EDIT ADDITION - To make this look nicer
+        'align-items': 'center',
+        'height': '100%',
+        'textAlign': 'end', // SKYRAT EDIT
+        'padding': '0.3em', // SKYRAT EDIT
       }}>
       {isOverflow ? (
         <>
@@ -169,25 +168,28 @@ const PriorityButtons = (props: {
 };
 
 const JobRow = (props: { className?: string; job: Job; name: string }) => {
-  const { data, act } = useBackend<PreferencesMenuData>(); // SKYRAT EDIT CHANGE - Adds act param
+  const { data } = useBackend<PreferencesMenuData>();
   const { className, job, name } = props;
 
   const isOverflow = data.overflow_role === name;
   const priority = data.job_preferences[name];
 
   const createSetPriority = createCreateSetPriorityFromName(name);
+  // SKYRAT EDIT
+  const { act } = useBackend<PreferencesMenuData>();
+  // SKYRAT EDIT END
 
   const experienceNeeded =
     data.job_required_experience && data.job_required_experience[name];
   const daysLeft = data.job_days_left ? data.job_days_left[name] : 0;
 
-  // SKYRAT EDIT ADDITION
+  // SKYRAT EDIT
   const alt_title_selected = data.job_alt_titles[name]
     ? data.job_alt_titles[name]
     : name;
   // SKYRAT EDIT END
 
-  let rightSide: ReactNode;
+  let rightSide: InfernoNode;
 
   if (experienceNeeded) {
     const { experience_type, required_playtime } = experienceNeeded;
@@ -247,14 +249,22 @@ const JobRow = (props: { className?: string; job: Job; name: string }) => {
     );
   }
   return (
-    <Stack.Item className={className} height="100%" mt={0}>
-      <Stack fill align="center">
-        <Tooltip content={job.description} position="bottom-start">
+    <Box
+      className={className}
+      style={{
+        // SKYRAT EDIT
+        'margin-top': 0,
+      }}>
+      <Stack align="center" /* SKYRAT EDIT */>
+        <Tooltip
+          content={job.description}
+          position="right" // SKYRAT EDIT bottom-start->right
+        >
           <Stack.Item
             className="job-name"
             width="50%"
             style={{
-              paddingLeft: '0.3em',
+              'padding-left': '0.3em',
             }}>
             {' '}
             {
@@ -276,15 +286,15 @@ const JobRow = (props: { className?: string; job: Job; name: string }) => {
           </Stack.Item>
         </Tooltip>
 
-        <Stack.Item grow className="options">
+        <Stack.Item width="50%" className="options" /* SKYRAT EDIT */>
           {rightSide}
         </Stack.Item>
       </Stack>
-    </Stack.Item>
+    </Box> // SKYRAT EDIT
   );
 };
 
-const Department = (props: { department: string } & PropsWithChildren) => {
+const Department: SFC<{ department: string }> = (props) => {
   const { children, department: name } = props;
   const className = `PreferencesMenu__Jobs__departments--${name}`;
   logger.log(name + ': ' + className);
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/KeybindingsPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/KeybindingsPage.tsx
index b1c3fc87be8..0afe14fb40b 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/KeybindingsPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/KeybindingsPage.tsx
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component } from 'inferno';
 import { Box, Button, KeyListener, Stack, Tooltip, TrackOutsideClicks } from '../../components';
 import { resolveAsset } from '../../assets';
 import { PreferencesMenuData } from './data';
@@ -153,7 +153,7 @@ const KeybindingName = (props: { keybinding: Keybinding }) => {
       <Box
         as="span"
         style={{
-          borderBottom: '2px dotted rgba(255, 255, 255, 0.8)',
+          'border-bottom': '2px dotted rgba(255, 255, 255, 0.8)',
         }}>
         {keybinding.name}
       </Box>
@@ -198,8 +198,8 @@ export class KeybindingsPage extends Component<{}, KeybindingsPageState> {
     rebindingHotkey: undefined,
   };
 
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
 
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleKeyUp = this.handleKeyUp.bind(this);
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/LimbsPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/LimbsPage.tsx
index 30e806cbb32..3ef796744fb 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/LimbsPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/LimbsPage.tsx
@@ -124,7 +124,7 @@ export const AugmentationPage = (props) => {
   let balance = -data.quirks_balance;
   if (props.limb.can_augment) {
     return (
-      <div style={{ marginBottom: '1.5em' }}>
+      <div style={{ 'margin-bottom': '1.5em' }}>
         <Section fill title={props.limb.name}>
           <Stack fill vertical>
             <Stack.Item>
@@ -243,7 +243,7 @@ export const LimbsPage = (props) => {
           <RotateCharacterButtons />
           <Box
             style={{
-              marginTop: '3em',
+              'margin-top': '3em',
             }}>
             <Section title="Quirk Points Balance" />
           </Box>
@@ -255,8 +255,8 @@ export const LimbsPage = (props) => {
             fontSize="1.2em"
             py={0.5}
             style={{
-              width: '20%',
-              alignItems: 'center',
+              'width': '20%',
+              'align-items': 'center',
             }}>
             {balance}
           </Box>
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/MainPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/MainPage.tsx
index 1c9ad43c839..e0ab5c1138b 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/MainPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/MainPage.tsx
@@ -119,10 +119,10 @@ const ChoicedSelection = (props: {
             <Stack.Item grow>
               <Box
                 style={{
-                  borderBottom: '1px solid #888',
-                  fontWeight: 'bold',
-                  fontSize: '14px',
-                  textAlign: 'center',
+                  'border-bottom': '1px solid #888',
+                  'font-weight': 'bold',
+                  'font-size': '14px',
+                  'text-align': 'center',
                 }}>
                 Select {props.name.toLowerCase()}
               </Box>
@@ -192,7 +192,7 @@ const GenderButton = (props: {
         placement: 'right-end',
       }}
       popperContent={
-        genderMenuOpen ? (
+        genderMenuOpen && (
           <Stack backgroundColor="white" ml={0.5} p={0.3}>
             {[Gender.Male, Gender.Female, Gender.Other, Gender.Other2].map(
               (gender) => {
@@ -214,8 +214,6 @@ const GenderButton = (props: {
               }
             )}
           </Stack>
-        ) : (
-          <> </>
         )
       }>
       <Button
@@ -265,7 +263,7 @@ const MainFeature = (props: {
         placement: 'bottom-start',
       }}
       popperContent={
-        isOpen ? (
+        isOpen && (
           <TrackOutsideClicks onOutsideClick={props.handleClose}>
             <ChoicedSelection
               name={catalog.name}
@@ -282,8 +280,6 @@ const MainFeature = (props: {
               onSelect={handleSelect}
             />
           </TrackOutsideClicks>
-        ) : (
-          <> </>
         )
       }>
       <Button
@@ -527,7 +523,7 @@ export const MainPage = (props: { openSpecies: () => void }) => {
             )}
 
             <Stack height={`${CLOTHING_SIDEBAR_ROWS * CLOTHING_CELL_SIZE}px`}>
-              <Stack.Item>
+              <Stack.Item fill>
                 <Stack vertical fill>
                   <Stack.Item>
                     <CharacterControls
@@ -583,7 +579,7 @@ export const MainPage = (props: { openSpecies: () => void }) => {
                 </Stack>
               </Stack.Item>
 
-              <Stack.Item width={`${CLOTHING_CELL_SIZE * 2 + 15}px`}>
+              <Stack.Item fill width={`${CLOTHING_CELL_SIZE * 2 + 15}px`}>
                 <Stack height="100%" vertical wrap>
                   {mainFeatures.map(([clothingKey, clothing]) => {
                     const catalog =
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/PageButton.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/PageButton.tsx
index b836b41abde..20c130f7d53 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/PageButton.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/PageButton.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { InfernoNode } from 'inferno';
 import { Button } from '../../components';
 
 export const PageButton = <P extends unknown>(props: {
@@ -8,7 +8,7 @@ export const PageButton = <P extends unknown>(props: {
 
   setPage: (page: P) => void;
 
-  children?: ReactNode;
+  children?: InfernoNode;
 }) => {
   const pageIsActive =
     props.currentPage === props.page ||
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx
index 56280a8b1af..f9a6e57d9ca 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx
@@ -1,3 +1,4 @@
+import { StatelessComponent } from 'inferno';
 import { Box, Button, Icon, Popper, Stack, Tooltip } from '../../components';
 import { PreferencesMenuData, Quirk, RandomSetting, ServerData } from './data';
 import { useBackend, useLocalState } from '../../backend';
@@ -77,39 +78,40 @@ const QuirkList = (props: {
               <Stack.Item
                 align="center"
                 style={{
-                  minWidth: '15%',
-                  maxWidth: '15%',
-                  textAlign: 'center',
+                  'min-width': '15%',
+                  'max-width': '15%',
+                  'text-align': 'center',
                 }}>
                 <Icon color="#333" fontSize={3} name={quirk.icon} />
               </Stack.Item>
 
               <Stack.Item
                 align="stretch"
-                ml={0}
                 style={{
-                  borderRight: '1px solid black',
+                  'border-right': '1px solid black',
+                  'margin-left': 0,
                 }}
               />
 
               <Stack.Item
                 grow
-                ml={0}
                 style={{
+                  'margin-left': 0,
+
                   // Fixes an IE bug for text overflowing in Flex boxes
-                  minWidth: '0%',
+                  'min-width': '0%',
                 }}>
                 <Stack vertical fill>
                   <Stack.Item
                     className={`${className}--${getValueClass(quirk.value)}`}
                     style={{
-                      borderBottom: '1px solid black',
-                      padding: '2px',
+                      'border-bottom': '1px solid black',
+                      'padding': '2px',
                     }}>
                     <Stack
                       fill
                       style={{
-                        fontSize: '1.2em',
+                        'font-size': '1.2em',
                       }}>
                       <Stack.Item grow basis="content">
                         <b>{quirk.name}</b>
@@ -124,9 +126,9 @@ const QuirkList = (props: {
                   <Stack.Item
                     grow
                     basis="content"
-                    mt={0}
                     style={{
-                      padding: '3px',
+                      'margin-top': 0,
+                      'padding': '3px',
                     }}>
                     {quirk.description}
                     {!!quirk.customizable && (
@@ -141,7 +143,7 @@ const QuirkList = (props: {
                                 <Box
                                   mt="1px"
                                   style={{
-                                    boxShadow:
+                                    'box-shadow':
                                       '0px 4px 8px 3px rgba(0, 0, 0, 0.7)',
                                   }}>
                                   <Stack
@@ -188,7 +190,7 @@ const QuirkList = (props: {
                               setCustomizationExpanded(!customizationExpanded);
                             }}
                             style={{
-                              float: 'right',
+                              'float': 'right',
                             }}
                           />
                         )}
@@ -215,7 +217,8 @@ const QuirkList = (props: {
   );
 };
 
-const StatDisplay = (props) => {
+export const StatDisplay: StatelessComponent<{}> = (props) => {
+  // SKYRAT EDIT
   return (
     <Box
       backgroundColor="#eee"
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/ServerPreferencesFetcher.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/ServerPreferencesFetcher.tsx
index 510f1d1973c..d4dd41294b0 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/ServerPreferencesFetcher.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/ServerPreferencesFetcher.tsx
@@ -1,4 +1,4 @@
-import { Component, ReactNode } from 'react';
+import { Component, InfernoNode } from 'inferno';
 import { resolveAsset } from '../../assets';
 import { fetchRetry } from '../../http';
 import { ServerData } from './data';
@@ -8,7 +8,7 @@ let fetchServerData: Promise<ServerData> | undefined;
 
 export class ServerPreferencesFetcher extends Component<
   {
-    render: (serverData: ServerData | undefined) => ReactNode;
+    render: (serverData: ServerData | undefined) => InfernoNode;
   },
   {
     serverData?: ServerData;
@@ -37,6 +37,6 @@ export class ServerPreferencesFetcher extends Component<
   }
 
   render() {
-    return this.props?.render?.(this.state.serverData);
+    return this.props.render(this.state.serverData);
   }
 }
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/SpeciesPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/SpeciesPage.tsx
index 1ae9fab5611..461ab77f1ba 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/SpeciesPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/SpeciesPage.tsx
@@ -157,14 +157,14 @@ const SpeciesPerk = (props: { className: string; perk: Perk }) => {
           <Box>{perk.description}</Box>
         </Box>
       }>
-      <Box className={className} width="32px" height="32px">
+      <Box class={className} width="32px" height="32px">
         <Icon
           name={perk.ui_icon}
           size={1.5}
           ml={0}
           mt={1}
           style={{
-            textAlign: 'center',
+            'text-align': 'center',
             height: '100%',
             width: '100%',
           }}
@@ -191,7 +191,7 @@ const SpeciesPerks = (props: { perks: Species['perks'] }) => {
         </Stack>
       </Stack.Item>
 
-      <Stack>
+      <Stack grow>
         {neutral.map((perk) => {
           return (
             <Stack.Item key={perk.name}>
@@ -292,7 +292,7 @@ const SpeciesPageInner = (props: {
           </Stack.Item>
 
           <Stack.Item grow>
-            <Box>
+            <Box fill>
               <Box>
                 <Stack fill>
                   <Stack.Item width="70%">
@@ -309,7 +309,7 @@ const SpeciesPageInner = (props: {
                         /* SKYRAT EDIT START - Scrollable description */
                         title="Description"
                         maxHeight="14vh"
-                        scrollable
+                        scrollable:true
                         /* SKYRAT EDIT END*/
                       >
                         {currentSpecies.desc}
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/TabbedMenu.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/TabbedMenu.tsx
index 6972bd1f6ac..0eaf772b26d 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/TabbedMenu.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/TabbedMenu.tsx
@@ -1,9 +1,9 @@
-import { Component, createRef, ReactNode, RefObject } from 'react';
+import { Component, createRef, InfernoNode, RefObject } from 'inferno';
 import { Button, Section, Stack } from '../../components';
 import { FlexProps } from '../../components/Flex';
 
 type TabbedMenuProps = {
-  categoryEntries: [string, ReactNode][];
+  categoryEntries: [string, InfernoNode][];
   contentProps?: FlexProps;
 };
 
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/names.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/names.tsx
index 740fa7e0d6e..6d23dccc564 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/names.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/names.tsx
@@ -45,8 +45,8 @@ export const MultiNameInput = (props: {
         return (
           <Modal
             style={{
-              margin: '0 auto',
-              width: '40%',
+              'margin': '0 auto',
+              'width': '40%',
             }}>
             <TrackOutsideClicks onOutsideClick={props.handleClose}>
               <Section
@@ -165,8 +165,8 @@ export const NameInput = (props: {
         <Stack.Item>
           <Icon
             style={{
-              color: 'rgba(255, 255, 255, 0.5)',
-              fontSize: '17px',
+              'color': 'rgba(255, 255, 255, 0.5)',
+              'font-size': '17px',
             }}
             name="edit"
           />
@@ -191,7 +191,7 @@ export const NameInput = (props: {
 
           <Box
             style={{
-              borderBottom: '2px dotted rgba(255, 255, 255, 0.8)',
+              'border-bottom': '2px dotted rgba(255, 255, 255, 0.8)',
               right: '50%',
               transform: 'translateX(50%)',
               position: 'absolute',
@@ -229,9 +229,9 @@ export const NameInput = (props: {
                   <Icon
                     name="ellipsis-v"
                     style={{
-                      position: 'relative',
-                      left: '1px',
-                      minWidth: '0px',
+                      'position': 'relative',
+                      'left': '1px',
+                      'min-width': '0px',
                     }}
                   />
                 </Button>
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/base.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/base.tsx
index cf96adcc6ba..b5ea05dd600 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/base.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/base.tsx
@@ -1,7 +1,7 @@
 import { sortBy, sortStrings } from 'common/collections';
 import { BooleanLike, classes } from 'common/react';
-import { ComponentType, createElement, ReactNode } from 'react';
-
+import { ComponentType, createComponentVNode, InfernoNode } from 'inferno';
+import { VNodeFlags } from 'inferno-vnode-flags';
 import { sendAct, useBackend, useLocalState } from '../../../../backend';
 // SKYRAT EDIT - adds TextArea to imports
 import { Box, Button, Dropdown, Input, NumberInput, Slider, Stack, TextArea } from '../../../../components';
@@ -9,7 +9,7 @@ import { Box, Button, Dropdown, Input, NumberInput, Slider, Stack, TextArea } fr
 import { createSetPreference, PreferencesMenuData } from '../../data';
 import { ServerPreferencesFetcher } from '../../ServerPreferencesFetcher';
 
-export const sortChoices = sortBy<[string, ReactNode]>(([name]) => name);
+export const sortChoices = sortBy<[string, InfernoNode]>(([name]) => name);
 
 export type Feature<
   TReceiving,
@@ -63,12 +63,12 @@ export const FeatureColorInput = (props: FeatureValueProps<string>) => {
                 ? props.value
                 : `#${props.value}`,
               border: '2px solid white',
-              boxSizing: 'content-box',
+              'box-sizing': 'content-box',
               height: '11px',
               width: '11px',
               ...(props.shrink
                 ? {
-                  margin: '1px',
+                  'margin': '1px',
                 }
                 : {}),
             }}
@@ -111,7 +111,7 @@ export const CheckboxInputInverse = (
 
 export const createDropdownInput = <T extends string | number = string>(
   // Map of value to display texts
-  choices: Record<T, ReactNode>,
+  choices: Record<T, InfernoNode>,
   dropdownProps?: Record<T, unknown>
 ): FeatureValue<T> => {
   return (props: FeatureValueProps<T>) => {
@@ -152,7 +152,7 @@ const capitalizeFirstLetter = (text: string) =>
 export const StandardizedDropdown = (props: {
   choices: string[];
   disabled?: boolean;
-  displayNames: Record<string, ReactNode>;
+  displayNames: Record<string, InfernoNode>;
   onSetValue: (newValue: string) => void;
   value: string;
   buttons?: boolean;
@@ -242,7 +242,7 @@ export const FeatureIconnedDropdownInput = (
 
   const displayNames = Object.fromEntries(
     Object.entries(textNames).map(([choice, textName]) => {
-      let element: ReactNode = textName;
+      let element: InfernoNode = textName;
 
       if (icons && icons[choice]) {
         const icon = icons[choice];
@@ -252,7 +252,7 @@ export const FeatureIconnedDropdownInput = (
               <Box
                 className={classes(['preferences32x32', icon])}
                 style={{
-                  transform: 'scale(0.8)',
+                  'transform': 'scale(0.8)',
                 }}
               />
             </Stack.Item>
@@ -350,15 +350,19 @@ export const FeatureValueInput = (props: {
   return (
     <ServerPreferencesFetcher
       render={(serverData) => {
-        return createElement(feature.component, {
-          act: props.act,
-          featureId: props.featureId,
-          serverData: serverData?.[props.featureId] as any,
-          shrink: props.shrink,
-
-          handleSetValue: changeValue,
-          value: predictedValue,
-        });
+        return createComponentVNode(
+          VNodeFlags.ComponentUnknown,
+          feature.component,
+          {
+            act: props.act,
+            featureId: props.featureId,
+            serverData: serverData && serverData[props.featureId],
+            shrink: props.shrink,
+
+            handleSetValue: changeValue,
+            value: predictedValue,
+          }
+        );
       }}
     />
   );
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/skin_tone.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/skin_tone.tsx
index 544070d0468..68be3a01c5a 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/skin_tone.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/skin_tone.tsx
@@ -41,9 +41,9 @@ export const skin_tone: Feature<string, string, SkinToneServerData> = {
                   <Box
                     style={{
                       background: hexColor.value,
-                      boxSizing: 'content-box',
-                      height: '11px',
-                      width: '11px',
+                      'box-sizing': 'content-box',
+                      'height': '11px',
+                      'width': '11px',
                     }}
                   />
                 </Stack.Item>
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 8ee50d9ab18..a3ccca9c796 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
@@ -2,7 +2,7 @@ import { multiline } from 'common/string';
 import { CheckboxInput, FeatureChoiced, FeatureChoicedServerData, FeatureDropdownInput, FeatureToggle, FeatureValueProps } from '../base';
 import { Box, Dropdown, Flex } from '../../../../../components';
 import { classes } from 'common/react';
-import { ReactNode } from 'react';
+import { InfernoNode } from 'inferno';
 import { binaryInsertWith } from 'common/collections';
 import { useBackend } from '../../../../../backend';
 import { PreferencesMenuData } from '../../../data';
@@ -15,7 +15,7 @@ export const ghost_accs: FeatureChoiced = {
 };
 
 const insertGhostForm = binaryInsertWith<{
-  displayText: ReactNode;
+  displayText: InfernoNode;
   value: string;
 }>(({ value }) => value);
 
@@ -26,7 +26,7 @@ const GhostFormInput = (
 
   const serverData = props.serverData;
   if (!serverData) {
-    return <> </>;
+    return;
   }
 
   const displayNames = serverData.display_names;
@@ -36,7 +36,7 @@ const GhostFormInput = (
 
   const displayTexts = {};
   let options: {
-    displayText: ReactNode;
+    displayText: InfernoNode;
     value: string;
   }[] = [];
 
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 c13a004f74f..df33e4c4c94 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
@@ -25,7 +25,7 @@ const UIStyleInput = (
             <Box
               className={classes(['preferences64x32', icon])}
               style={{
-                transform: 'scale(0.8)',
+                'transform': 'scale(0.8)',
               }}
             />
           </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/ProduceConsole.tsx b/tgui/packages/tgui/interfaces/ProduceConsole.tsx
index 83de80805e8..19ab62dc30c 100644
--- a/tgui/packages/tgui/interfaces/ProduceConsole.tsx
+++ b/tgui/packages/tgui/interfaces/ProduceConsole.tsx
@@ -110,7 +110,7 @@ const ShoppingTab = (props) => {
                 <Stack>
                   <span
                     style={{
-                      verticalAlign: 'middle',
+                      'vertical-align': 'middle',
                     }}
                   />{' '}
                   {!condensed && (
@@ -121,7 +121,8 @@ const ShoppingTab = (props) => {
                         height="34px"
                         width="34px"
                         style={{
-                          verticalAlign: 'middle',
+                          '-ms-interpolation-mode': 'nearest-neighbor',
+                          'vertical-align': 'middle',
                         }}
                       />
                     </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/Puzzgrid.tsx b/tgui/packages/tgui/interfaces/Puzzgrid.tsx
index 0eb005876e1..df9c442cfa9 100644
--- a/tgui/packages/tgui/interfaces/Puzzgrid.tsx
+++ b/tgui/packages/tgui/interfaces/Puzzgrid.tsx
@@ -1,7 +1,6 @@
 import { range } from 'common/collections';
 import { BooleanLike } from 'common/react';
-import { PropsWithChildren } from 'react';
-
+import { SFC } from 'inferno';
 import { useBackend } from '../backend';
 import { Box, Button, FitText, Stack } from '../components';
 import { Window } from '../layouts';
@@ -24,12 +23,10 @@ type PuzzgridData = {
   wrong_group_select_cooldown: BooleanLike;
 };
 
-const PuzzgridButton = (
-  props: {
-    // In the future, this would be the TypeScript props of the button
-    [key: string]: unknown;
-  } & PropsWithChildren
-) => {
+const PuzzgridButton: SFC<{
+  // In the future, this would be the TypeScript props of the button
+  [key: string]: unknown;
+}> = (props) => {
   return (
     <Button
       verticalAlignContent="middle"
@@ -37,9 +34,9 @@ const PuzzgridButton = (
         'width': '100%',
         'height': '100%',
 
-        textAlign: 'center',
-        verticalAlign: 'middle',
-        whiteSpace: 'normal',
+        'text-align': 'center',
+        'vertical-align': 'middle',
+        'white-space': 'normal',
       }}
       {...props}>
       <FitText maxFontSize={17} maxWidth={CELL_WIDTH}>
@@ -109,8 +106,8 @@ export const Puzzgrid = (props) => {
           <Box
             color="red"
             style={{
-              textShadow: '1px 1px 1px #222',
-              fontSize: '30px',
+              'text-shadow': '1px 1px 1px #222',
+              'font-size': '30px',
               position: 'absolute',
               top: 0,
               left: '10px',
@@ -124,10 +121,10 @@ export const Puzzgrid = (props) => {
         {data.time_left && (
           <Box
             style={{
-              textShadow: '1px 1px 1px #222',
-              textAlign: 'right',
-              fontSize: '15px',
-              pointerEvents: 'none',
+              'text-shadow': '1px 1px 1px #222',
+              'text-align': 'right',
+              'font-size': '15px',
+              'pointer-events': 'none',
               position: 'absolute',
               top: 0,
               right: '10px',
diff --git a/tgui/packages/tgui/interfaces/RapidPipeDispenser.tsx b/tgui/packages/tgui/interfaces/RapidPipeDispenser.tsx
index bb8c4d42624..e6c2ec7786d 100644
--- a/tgui/packages/tgui/interfaces/RapidPipeDispenser.tsx
+++ b/tgui/packages/tgui/interfaces/RapidPipeDispenser.tsx
@@ -269,7 +269,7 @@ const PipeTypeSection = (props) => {
         {shownCategory?.recipes.map((recipe) => (
           <Table.Row
             key={recipe.pipe_index}
-            style={{ borderBottom: '1px solid #333' }}>
+            style={{ 'border-bottom': '1px solid #333' }}>
             <Table.Cell collapsing py="2px" pb="1px">
               <PreviewSelect
                 previews={recipe.previews}
@@ -278,7 +278,7 @@ const PipeTypeSection = (props) => {
               />
             </Table.Cell>
             <Table.Cell />
-            <Table.Cell style={{ verticalAlign: 'middle' }}>
+            <Table.Cell style={{ 'vertical-align': 'middle' }}>
               {recipe.pipe_name}
             </Table.Cell>
           </Table.Row>
diff --git a/tgui/packages/tgui/interfaces/Safe.jsx b/tgui/packages/tgui/interfaces/Safe.jsx
index 42dad2b1077..f9314a2e3bf 100644
--- a/tgui/packages/tgui/interfaces/Safe.jsx
+++ b/tgui/packages/tgui/interfaces/Safe.jsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment } from 'inferno';
 import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
 import { Box, Button, Icon, Section } from '../components';
diff --git a/tgui/packages/tgui/interfaces/SatelliteControl.tsx b/tgui/packages/tgui/interfaces/SatelliteControl.tsx
index a9009b77efe..b6f9a7d5924 100644
--- a/tgui/packages/tgui/interfaces/SatelliteControl.tsx
+++ b/tgui/packages/tgui/interfaces/SatelliteControl.tsx
@@ -41,6 +41,9 @@ const ShieldInfo = (props) => {
         <LabeledList.Item label="Coverage">
           <ProgressBar
             value={meteor_shield_coverage / meteor_shield_coverage_max}
+            content={
+              (100 * meteor_shield_coverage) / meteor_shield_coverage_max + '%'
+            }
             ranges={{
               good: [1, Infinity],
               average: [0.3, 1],
diff --git a/tgui/packages/tgui/interfaces/SeedExtractor.tsx b/tgui/packages/tgui/interfaces/SeedExtractor.tsx
index 9989e4eb178..c2b95babdd3 100644
--- a/tgui/packages/tgui/interfaces/SeedExtractor.tsx
+++ b/tgui/packages/tgui/interfaces/SeedExtractor.tsx
@@ -178,7 +178,7 @@ export const SeedExtractor = (props) => {
               seeds.map((item) => (
                 <Table.Row
                   key={item.key}
-                  style={{ borderTop: '2px solid #222' }}>
+                  style={{ 'border-top': '2px solid #222' }}>
                   <Table.Cell collapsing>
                     <Box
                       mb={-2}
@@ -310,7 +310,7 @@ const Level = (props) => {
       }>
       <span
         style={{
-          textShadow: '1px 1px 0 black',
+          'text-shadow': '1px 1px 0 black',
         }}>
         {props.value}
       </span>
diff --git a/tgui/packages/tgui/interfaces/SelectEquipment.jsx b/tgui/packages/tgui/interfaces/SelectEquipment.jsx
index 9c65cd49ed9..4afd098f21d 100644
--- a/tgui/packages/tgui/interfaces/SelectEquipment.jsx
+++ b/tgui/packages/tgui/interfaces/SelectEquipment.jsx
@@ -90,6 +90,9 @@ export const SelectEquipment = (props) => {
                     m={0}
                     src={`data:image/jpeg;base64,${icon64}`}
                     height="100%"
+                    style={{
+                      '-ms-interpolation-mode': 'nearest-neighbor',
+                    }}
                   />
                 </Section>
               </Stack.Item>
@@ -186,8 +189,8 @@ const CurrentlySelectedDisplay = (props) => {
           title={entry?.path}
           style={{
             'overflow': 'hidden',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
+            'white-space': 'nowrap',
+            'text-overflow': 'ellipsis',
           }}>
           {entry?.name}
         </Box>
diff --git a/tgui/packages/tgui/interfaces/ServerControl.tsx b/tgui/packages/tgui/interfaces/ServerControl.tsx
index 9e0c86d4715..1084d3f87ca 100644
--- a/tgui/packages/tgui/interfaces/ServerControl.tsx
+++ b/tgui/packages/tgui/interfaces/ServerControl.tsx
@@ -46,7 +46,7 @@ export const ServerControl = (props) => {
     );
   }
   return (
-    <Window width={575} height={400}>
+    <Window width={575} height={400} scrollable fill>
       <Window.Content scrollable>
         {!servers ? (
           <NoticeBox mt={2} info>
diff --git a/tgui/packages/tgui/interfaces/Spellbook.tsx b/tgui/packages/tgui/interfaces/Spellbook.tsx
index 38ca9b47355..f16a5aeee6d 100644
--- a/tgui/packages/tgui/interfaces/Spellbook.tsx
+++ b/tgui/packages/tgui/interfaces/Spellbook.tsx
@@ -3,7 +3,7 @@ import { multiline } from 'common/string';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Dimmer, Divider, Icon, Input, NoticeBox, ProgressBar, Section, Stack } from '../components';
 import { Window } from '../layouts';
-import { ReactNode } from 'react';
+import { InfernoNode } from 'inferno';
 
 enum SpellCategory {
   Offensive = 'Offensive',
@@ -49,7 +49,7 @@ type Data = {
 type TabType = {
   title: string;
   blurb?: string;
-  component?: () => ReactNode;
+  component?: () => InfernoNode;
   locked?: boolean;
   scrollable?: boolean;
 };
diff --git a/tgui/packages/tgui/interfaces/StackingConsole.jsx b/tgui/packages/tgui/interfaces/StackingConsole.jsx
index c147038adfc..296ea072161 100644
--- a/tgui/packages/tgui/interfaces/StackingConsole.jsx
+++ b/tgui/packages/tgui/interfaces/StackingConsole.jsx
@@ -46,7 +46,9 @@ export const StackingConsoleContent = (props) => {
                 }
               />
             }>
-            <Box style={{ textTransform: 'capitalize' }}>{input_direction}</Box>
+            <Box style={{ 'text-transform': 'capitalize' }}>
+              {input_direction}
+            </Box>
           </LabeledList.Item>
           <LabeledList.Item
             label="Output"
@@ -61,7 +63,7 @@ export const StackingConsoleContent = (props) => {
                 }
               />
             }>
-            <Box style={{ textTransform: 'capitalize' }}>
+            <Box style={{ 'text-transform': 'capitalize' }}>
               {output_direction}
             </Box>
           </LabeledList.Item>
diff --git a/tgui/packages/tgui/interfaces/StripMenu.tsx b/tgui/packages/tgui/interfaces/StripMenu.tsx
index f193a29feac..40616e7d965 100644
--- a/tgui/packages/tgui/interfaces/StripMenu.tsx
+++ b/tgui/packages/tgui/interfaces/StripMenu.tsx
@@ -27,8 +27,8 @@ const CornerText = (props: {
       style={{
         position: 'relative',
         left: align === 'left' ? '2px' : '-2px',
-        textAlign: align,
-        textShadow: '1px 1px 1px #555',
+        'text-align': align,
+        'text-shadow': '1px 1px 1px #555',
       }}>
       {children}
     </Box>
@@ -324,7 +324,8 @@ export const StripMenu = (props) => {
                         height="100%"
                         width="100%"
                         style={{
-                          verticalAlign: 'middle',
+                          '-ms-interpolation-mode': 'nearest-neighbor',
+                          'vertical-align': 'middle',
                         }}
                       />
                     );
@@ -342,7 +343,7 @@ export const StripMenu = (props) => {
                         ml={0}
                         mt={1.3}
                         style={{
-                          textAlign: 'center',
+                          'text-align': 'center',
                           height: '100%',
                           width: '100%',
                         }}
@@ -409,7 +410,7 @@ export const StripMenu = (props) => {
                               position: 'absolute',
                               bottom: 0,
                               right: 0,
-                              zIndex: 2,
+                              'z-index': 2,
                             }}>
                             <Icon name={alternateAction.icon} />
                           </Button>
diff --git a/tgui/packages/tgui/interfaces/Supermatter.tsx b/tgui/packages/tgui/interfaces/Supermatter.tsx
index 9f3c46b6061..052dff046b4 100644
--- a/tgui/packages/tgui/interfaces/Supermatter.tsx
+++ b/tgui/packages/tgui/interfaces/Supermatter.tsx
@@ -2,7 +2,7 @@ import { filter, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { toFixed } from 'common/math';
 import { BooleanLike } from 'common/react';
-import { ReactNode } from 'react';
+import { InfernoNode } from 'inferno';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, LabeledList, ProgressBar, Section, Stack } from '../components';
 import { getGasFromPath } from '../constants';
@@ -23,7 +23,7 @@ type SMGasMetadata = {
 };
 
 type SupermatterProps = {
-  sectionButton?: ReactNode;
+  sectionButton?: InfernoNode;
   uid: number;
   area_name: string;
   integrity: number;
@@ -50,8 +50,8 @@ type SupermatterProps = {
 // LabeledList but stack and with a chevron dropdown.
 type SupermatterEntryProps = {
   title: string;
-  content: ReactNode;
-  detail?: ReactNode;
+  content: InfernoNode;
+  detail?: InfernoNode;
   alwaysShowChevron?: boolean;
 };
 const SupermatterEntry = (props: SupermatterEntryProps) => {
diff --git a/tgui/packages/tgui/interfaces/SurgeryInitiator.tsx b/tgui/packages/tgui/interfaces/SurgeryInitiator.tsx
index aed55ae8080..8be56e3728a 100644
--- a/tgui/packages/tgui/interfaces/SurgeryInitiator.tsx
+++ b/tgui/packages/tgui/interfaces/SurgeryInitiator.tsx
@@ -1,7 +1,7 @@
 import { sortBy } from 'common/collections';
 import { KEY_DOWN, KEY_ENTER, KEY_UP } from 'common/keycodes';
 import { BooleanLike } from 'common/react';
-import { Component } from 'react';
+import { Component } from 'inferno';
 import { useBackend } from '../backend';
 import { Button, KeyListener, Stack } from '../components';
 import { BodyZone, BodyZoneSelector } from '../components/BodyZoneSelector';
diff --git a/tgui/packages/tgui/interfaces/SyndContractor.jsx b/tgui/packages/tgui/interfaces/SyndContractor.jsx
index fff904c758b..bb7f9887f75 100644
--- a/tgui/packages/tgui/interfaces/SyndContractor.jsx
+++ b/tgui/packages/tgui/interfaces/SyndContractor.jsx
@@ -1,4 +1,4 @@
-import { Component, Fragment } from 'react';
+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 { NtosWindow } from '../layouts';
@@ -227,17 +227,17 @@ export const StatusPane = (props) => {
                   onClick={() => act('PRG_redeem_TC')}
                 />
               }>
-              {String(redeemable_tc)}
+              {data.redeemable_tc}
             </LabeledList.Item>
             <LabeledList.Item label="TC Earned">
-              {String(earned_tc)}
+              {data.earned_tc}
             </LabeledList.Item>
           </LabeledList>
         </Grid.Column>
         <Grid.Column>
           <LabeledList>
             <LabeledList.Item label="Contracts Completed">
-              {String(contracts_completed)}
+              {data.contracts_completed}
             </LabeledList.Item>
             <LabeledList.Item label="Current Status">ACTIVE</LabeledList.Item>
           </LabeledList>
@@ -303,7 +303,7 @@ const ContractsTab = (props) => {
               buttons={
                 <>
                   <Box inline bold mr={1}>
-                    {`${contract.payout} (+${contract.payout_bonus}) TC`}
+                    {contract.payout} (+{contract.payout_bonus}) TC
                   </Box>
                   <Button
                     content={active ? 'Abort' : 'Accept'}
diff --git a/tgui/packages/tgui/interfaces/Thermometer.jsx b/tgui/packages/tgui/interfaces/Thermometer.jsx
index 9aca9f912fa..cf6ebf4a373 100644
--- a/tgui/packages/tgui/interfaces/Thermometer.jsx
+++ b/tgui/packages/tgui/interfaces/Thermometer.jsx
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component } from 'inferno';
 import { useBackend } from '../backend';
 import { Box, Stack } from '../components';
 import { Window } from '../layouts';
@@ -26,7 +26,7 @@ export class Thermometer extends Component {
           justify="space-around"
           backgroundColor="#242322"
           style={{
-            backgroundImage:
+            'background-image':
               "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEVya3UjIyN3S/1dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAMSURBVAjXY2hgcAAAAcQAwUlFKkkAAAAASUVORK5CYII=')",
           }}>
           <Stack.Item ml={1}>
@@ -47,49 +47,49 @@ const ThermometerIcon = (props) => {
     <Box>
       <Box
         style={{
-          position: 'relative',
-          width: '22px',
-          height: '340px',
-          margin: '0 auto',
-          backgroundColor: '#595959',
-          border: '4px solid #363636',
-          borderRadius: '12px',
-          borderBottom: 'none',
-          borderIndex: '0',
-          boxShadow: '4px 4px #000000',
+          'position': 'relative',
+          'width': '22px',
+          'height': '340px',
+          'margin': '0 auto',
+          'background-color': '#595959',
+          '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}%`,
-            backgroundColor: '#bd2020',
-            borderRadius: '8px',
-            borderBottom: 'none',
-            zIndex: '1',
+            'height': `${(temperature / maxTemperature) * 100}%`,
+            'background-color': '#bd2020',
+            'border-radius': '8px',
+            'border-bottom': 'none',
+            'z-index': '1',
           }}
         />
       </Box>
       <Box
         style={{
-          position: 'relative',
-          width: '56px',
-          lineHeight: '48px',
-          textAlign: 'center',
-          margin: '-8px auto 0 auto',
-          backgroundColor: '#bd2020',
-          border: '4px solid #363636',
-          borderSpacing: '5px',
-          borderRadius: '35px',
-          borderIndex: '1',
-          borderBottom: '0.1',
-          boxShadow: '4px 4px #000000',
-          zIndex: '0',
+          'position': 'relative',
+          'width': '56px',
+          'line-height': '48px',
+          'text-align': 'center',
+          'margin': '-8px auto 0 auto',
+          'background-color': '#bd2020',
+          '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>
diff --git a/tgui/packages/tgui/interfaces/TrackedPlaytime.jsx b/tgui/packages/tgui/interfaces/TrackedPlaytime.jsx
index 3cd0bbb92f1..0cb47893aa2 100644
--- a/tgui/packages/tgui/interfaces/TrackedPlaytime.jsx
+++ b/tgui/packages/tgui/interfaces/TrackedPlaytime.jsx
@@ -30,7 +30,7 @@ const PlaytimeSection = (props) => {
               collapsing
               p={0.5}
               style={{
-                verticalAlign: 'middle',
+                'vertical-align': 'middle',
               }}>
               <Box align="right">{jobName}</Box>
             </Table.Cell>
diff --git a/tgui/packages/tgui/interfaces/TraitorObjectiveDebug.tsx b/tgui/packages/tgui/interfaces/TraitorObjectiveDebug.tsx
index 2aa5fe35811..f3267bcc7a4 100644
--- a/tgui/packages/tgui/interfaces/TraitorObjectiveDebug.tsx
+++ b/tgui/packages/tgui/interfaces/TraitorObjectiveDebug.tsx
@@ -148,7 +148,7 @@ export const TraitorObjectiveDebug = (props) => {
           backgroundColor="green"
           height="5px"
           style={{
-            zIndex: 5,
+            'z-index': 5,
           }}
         />
         <Box
@@ -156,7 +156,7 @@ export const TraitorObjectiveDebug = (props) => {
           top={0}
           left={1}
           style={{
-            zIndex: 5,
+            'z-index': 5,
           }}>
           {/* Time in minutes of this threshold */}
           {Math.round((sizeLimit * (i / 100)) / 600)} mins
@@ -208,7 +208,7 @@ export const TraitorObjectiveDebug = (props) => {
               <Tabs width="100%" fluid textAlign="center">
                 {sortingOptions.map((value) => (
                   <Tabs.Tab
-                    key={value.name}
+                    key={value.sort}
                     selected={value.name === sortingFunc}
                     onClick={() => setSortingFunc(value.name)}>
                     {value.name}
@@ -363,8 +363,8 @@ const ObjectiveBox = (props: ObjectiveBoxProps) => {
       <Stack vertical width="100%">
         <Stack.Item
           style={{
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
+            'text-overflow': 'ellipsis',
+            'white-space': 'nowrap',
             'overflow': 'hidden',
           }}>
           {objective.name}
@@ -391,7 +391,7 @@ const ObjectiveBox = (props: ObjectiveBoxProps) => {
               (objective.progression_reward[1] / sizeLimit) * window.innerWidth
             }px`}
             style={{
-              whiteSpace: 'nowrap',
+              'white-space': 'nowrap',
             }}>
             {objective.progression_reward[0] / 600}
             &nbsp;to {objective.progression_reward[1] / 600} pr
@@ -405,7 +405,7 @@ const ObjectiveBox = (props: ObjectiveBoxProps) => {
             backgroundColor="red"
             width={`${objective.telecrystal_reward[1] * 10}px`}
             style={{
-              whiteSpace: 'nowrap',
+              'white-space': 'nowrap',
             }}>
             {objective.telecrystal_reward[0]}
             &nbsp;to {objective.telecrystal_reward[1]} tc
diff --git a/tgui/packages/tgui/interfaces/TramControl.jsx b/tgui/packages/tgui/interfaces/TramControl.jsx
index a96949108c2..9e0f1c5c0b9 100644
--- a/tgui/packages/tgui/interfaces/TramControl.jsx
+++ b/tgui/packages/tgui/interfaces/TramControl.jsx
@@ -111,7 +111,7 @@ export const TramControl = (props) => {
                     tooltipPosition="bottom"
                     tooltip={dep}
                     style={{
-                      borderRadius: '5em',
+                      'border-radius': '5em',
                       'border': '2px solid white',
                     }}
                   />
diff --git a/tgui/packages/tgui/interfaces/TrophyAdminPanel.jsx b/tgui/packages/tgui/interfaces/TrophyAdminPanel.jsx
index 309d1207f19..dc9debaec16 100644
--- a/tgui/packages/tgui/interfaces/TrophyAdminPanel.jsx
+++ b/tgui/packages/tgui/interfaces/TrophyAdminPanel.jsx
@@ -23,8 +23,8 @@ export const TrophyAdminPanel = (props) => {
               <Table.Row key={trophy.ref} className="candystripe">
                 <Table.Cell
                   style={{
-                    wordBreak: 'break-all',
-                    wordWrap: 'break-word',
+                    'word-break': 'break-all',
+                    'word-wrap': 'break-word',
                     'color': !trophy.is_valid
                       ? 'rgba(255, 0, 0, 0.5)'
                       : 'inherit',
@@ -41,8 +41,8 @@ export const TrophyAdminPanel = (props) => {
                 </Table.Cell>
                 <Table.Cell
                   style={{
-                    wordBreak: 'break-all',
-                    wordWrap: 'break-word',
+                    'word-break': 'break-all',
+                    'word-wrap': 'break-word',
                   }}>
                   {decodeHtmlEntities(trophy.message)}
                 </Table.Cell>
@@ -56,8 +56,8 @@ export const TrophyAdminPanel = (props) => {
                 </Table.Cell>
                 <Table.Cell
                   style={{
-                    wordBreak: 'break-all',
-                    wordWrap: 'break-word',
+                    'word-break': 'break-all',
+                    'word-wrap': 'break-word',
                   }}>
                   {decodeHtmlEntities(trophy.placer_key)}
                 </Table.Cell>
diff --git a/tgui/packages/tgui/interfaces/Trophycase.jsx b/tgui/packages/tgui/interfaces/Trophycase.jsx
index 95a9d8ca901..e8d8292a3c3 100644
--- a/tgui/packages/tgui/interfaces/Trophycase.jsx
+++ b/tgui/packages/tgui/interfaces/Trophycase.jsx
@@ -128,6 +128,9 @@ const ShowpieceImage = (props) => {
         src={`data:image/jpeg;base64,${showpiece_icon}`}
         height="96px"
         width="96px"
+        style={{
+          '-ms-interpolation-mode': 'nearest-neighbor',
+        }}
       />
     </Section>
   ) : (
diff --git a/tgui/packages/tgui/interfaces/Uplink/ObjectiveMenu.tsx b/tgui/packages/tgui/interfaces/Uplink/ObjectiveMenu.tsx
index a1f8e746336..bec7c918a48 100644
--- a/tgui/packages/tgui/interfaces/Uplink/ObjectiveMenu.tsx
+++ b/tgui/packages/tgui/interfaces/Uplink/ObjectiveMenu.tsx
@@ -1,5 +1,5 @@
 import { BooleanLike, classes } from 'common/react';
-import { Component } from 'react';
+import { Component } from 'inferno';
 import { Section, Stack, Box, Button, Flex, Tooltip, NoticeBox, Dimmer, Icon } from '../../components';
 import { calculateProgression, getDangerLevel, Rank } from './calculateDangerLevel';
 import { ObjectiveState } from './constants';
@@ -50,8 +50,8 @@ export class ObjectiveMenu extends Component<
   ObjectiveMenuProps,
   ObjectiveMenuState
 > {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       draggingObjective: null,
       objectiveX: 0,
@@ -206,7 +206,7 @@ export class ObjectiveMenu extends Component<
                         )) || (
                         <Box
                           style={{
-                            border: '2px dashed black',
+                            'border': '2px dashed black',
                           }}
                           width="100%"
                           height="100%"
@@ -225,7 +225,16 @@ export class ObjectiveMenu extends Component<
                   </Dimmer>
                 )) ||
                   (potentialObjectives.length < maximumPotentialObjectives && (
-                    <Flex.Item basis="100%" mb={1} mx="0.5%" minHeight="100px">
+                    <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%"
@@ -253,7 +262,7 @@ export class ObjectiveMenu extends Component<
             left={`${objectiveX - 180}px`}
             top={`${objectiveY}px`}
             style={{
-              pointerEvents: 'none',
+              'pointer-events': 'none',
             }}>
             {ObjectiveFunction(draggingObjective, false)}
           </Box>
@@ -437,10 +446,10 @@ export const ObjectiveElement = (props: ObjectiveElementProps) => {
                 <Stack align="center" justify="center">
                   <Box
                     style={{
-                      border: '2px solid rgba(0, 0, 0, 0.5)',
-                      borderLeft: 'none',
-                      borderRight: 'none',
-                      borderBottom: objectiveFinished ? 'none' : undefined,
+                      'border': '2px solid rgba(0, 0, 0, 0.5)',
+                      'border-left': 'none',
+                      'border-right': 'none',
+                      'border-bottom': objectiveFinished ? 'none' : undefined,
                     }}
                     className={dangerLevel.gradient}
                     py={0.5}
@@ -497,10 +506,10 @@ export const ObjectiveElement = (props: ObjectiveElementProps) => {
                     inline
                     className={dangerLevel.gradient}
                     style={{
-                      borderRadius: '0',
-                      border: '2px solid rgba(0, 0, 0, 0.5)',
-                      borderLeft: 'none',
-                      borderRight: 'none',
+                      'border-radius': '0',
+                      'border': '2px solid rgba(0, 0, 0, 0.5)',
+                      'border-left': 'none',
+                      'border-right': 'none',
                     }}
                     position="relative"
                     width="100%"
@@ -522,7 +531,7 @@ export const ObjectiveElement = (props: ObjectiveElementProps) => {
                       onClick={handleCompletion}
                       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
diff --git a/tgui/packages/tgui/interfaces/Uplink/calculateDangerLevel.tsx b/tgui/packages/tgui/interfaces/Uplink/calculateDangerLevel.tsx
index 88c32aa22e6..f2dc9bdd037 100644
--- a/tgui/packages/tgui/interfaces/Uplink/calculateDangerLevel.tsx
+++ b/tgui/packages/tgui/interfaces/Uplink/calculateDangerLevel.tsx
@@ -90,8 +90,8 @@ export const dangerLevelsTooltip = (
               color="white"
               className={value.gradient}
               style={{
-                borderRadius: '5px',
-                display: 'inline-block',
+                'border-radius': '5px',
+                'display': 'inline-block',
               }}
               px={0.8}
               py={0.6}>
@@ -136,8 +136,8 @@ export const calculateDangerLevel = (
       color="white"
       className={dangerLevel.gradient}
       style={{
-        borderRadius: '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 1ad17f8a084..6753b1a232e 100644
--- a/tgui/packages/tgui/interfaces/Uplink/index.tsx
+++ b/tgui/packages/tgui/interfaces/Uplink/index.tsx
@@ -1,7 +1,7 @@
 import { useBackend } from '../../backend';
 import { Window } from '../../layouts';
 import { GenericUplink, Item } from './GenericUplink';
-import { Component, Fragment } from 'react';
+import { Component, Fragment } from 'inferno';
 import { fetchRetry } from '../../http';
 import { resolveAsset } from '../../assets';
 import { BooleanLike } from 'common/react';
@@ -81,8 +81,8 @@ type ItemExtraData = {
 let fetchServerData: Promise<ServerData> | undefined;
 
 export class Uplink extends Component<{}, UplinkState> {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       allItems: [],
       allCategories: [],
@@ -346,7 +346,7 @@ export class Uplink extends Component<{}, UplinkState> {
                   <Stack.Item grow={1}>
                     <Tabs fluid textAlign="center">
                       {!!has_objectives && (
-                        <>
+                        <Fragment>
                           <Tabs.Tab
                             selected={currentTab === 0}
                             onClick={() => this.setState({ currentTab: 0 })}>
@@ -357,7 +357,7 @@ export class Uplink extends Component<{}, UplinkState> {
                             onClick={() => this.setState({ currentTab: 1 })}>
                             Secondary Objectives
                           </Tabs.Tab>
-                        </>
+                        </Fragment>
                       )}
                       <Tabs.Tab
                         selected={currentTab === 2 || !has_objectives}
diff --git a/tgui/packages/tgui/interfaces/Vendatray.tsx b/tgui/packages/tgui/interfaces/Vendatray.tsx
index 0fdf52f0b5a..ad5bdf466a2 100644
--- a/tgui/packages/tgui/interfaces/Vendatray.tsx
+++ b/tgui/packages/tgui/interfaces/Vendatray.tsx
@@ -92,7 +92,8 @@ const VendingImage = (props) => {
         height="96px"
         width="96px"
         style={{
-          verticalAlign: 'middle',
+          '-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 ca7f4981b7f..ceb429cb100 100644
--- a/tgui/packages/tgui/interfaces/Vending.tsx
+++ b/tgui/packages/tgui/interfaces/Vending.tsx
@@ -275,14 +275,16 @@ const ProductImage = (props) => {
     <img
       src={`data:image/jpeg;base64,${product.img}`}
       style={{
-        verticalAlign: 'middle',
+        'vertical-align': 'middle',
+        'horizontal-align': 'middle',
       }}
     />
   ) : (
     <span
       className={classes(['vending32x32', product.path])}
       style={{
-        verticalAlign: 'middle',
+        'vertical-align': 'middle',
+        'horizontal-align': 'middle',
       }}
     />
   );
diff --git a/tgui/packages/tgui/interfaces/VotePanel.tsx b/tgui/packages/tgui/interfaces/VotePanel.tsx
index 0d080b47f57..fe8e2bf9c93 100644
--- a/tgui/packages/tgui/interfaces/VotePanel.tsx
+++ b/tgui/packages/tgui/interfaces/VotePanel.tsx
@@ -67,7 +67,7 @@ export const VotePanel = (props) => {
   }
 
   return (
-    <Window title={windowTitle} width={400} height={500}>
+    <Window resizable title={windowTitle} width={400} height={500}>
       <Window.Content>
         <Stack fill vertical>
           <Section title="Create Vote">
diff --git a/tgui/packages/tgui/interfaces/common/AtmosHandbook.tsx b/tgui/packages/tgui/interfaces/common/AtmosHandbook.tsx
index 378227b326f..c221769668c 100644
--- a/tgui/packages/tgui/interfaces/common/AtmosHandbook.tsx
+++ b/tgui/packages/tgui/interfaces/common/AtmosHandbook.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { InfernoNode } from 'inferno';
 import { useBackend, useLocalState } from '../../backend';
 import { Box, Button, Flex, Input, LabeledList, Section, Stack, Tooltip } from '../../components';
 
@@ -37,7 +37,7 @@ type Gas = {
 };
 
 const GasSearchBar = (props: {
-  title: ReactNode;
+  title: InfernoNode;
   onChange: (inputValue: string) => void;
   activeInput: boolean;
   setActiveInput: (toggle: boolean) => void;
@@ -170,7 +170,7 @@ const ReactionHandbook = (props) => {
                     <Tooltip content={factor.tooltip} position="top">
                       <Flex>
                         <Flex.Item
-                          style={{ borderBottom: 'dotted 2px' }}
+                          style={{ 'border-bottom': 'dotted 2px' }}
                           shrink>
                           {factor.factor_name + ':'}
                         </Flex.Item>
diff --git a/tgui/packages/tgui/interfaces/common/Connections.tsx b/tgui/packages/tgui/interfaces/common/Connections.tsx
index 853008a8bb1..1595c52b210 100644
--- a/tgui/packages/tgui/interfaces/common/Connections.tsx
+++ b/tgui/packages/tgui/interfaces/common/Connections.tsx
@@ -45,8 +45,8 @@ export const Connections = (props: {
       height="100%"
       style={{
         'position': 'absolute',
-        pointerEvents: 'none',
-        zIndex: zLayer,
+        'pointer-events': 'none',
+        'z-index': zLayer,
       }}>
       {connections.map((val, index) => {
         const from = val.from;
diff --git a/tgui/packages/tgui/interfaces/common/EditableText.tsx b/tgui/packages/tgui/interfaces/common/EditableText.tsx
index ee12e453cc4..9bcfbf61578 100644
--- a/tgui/packages/tgui/interfaces/common/EditableText.tsx
+++ b/tgui/packages/tgui/interfaces/common/EditableText.tsx
@@ -49,10 +49,10 @@ export const EditableText = (props: Props) => {
           as="span"
           color={!text ? 'grey' : color || 'white'}
           style={{
-            textDecoration: 'underline',
-            textDecorationColor: 'white',
-            textDecorationThickness: '1px',
-            textUnderlineOffset: '1px',
+            'text-decoration': 'underline',
+            'text-decoration-color': 'white',
+            'text-decoration-thickness': '1px',
+            'text-underline-offset': '1px',
           }}
           onClick={() => setEditing(true)}>
           {!text ? '(none)' : text}
diff --git a/tgui/packages/tgui/interfaces/common/Objectives.tsx b/tgui/packages/tgui/interfaces/common/Objectives.tsx
index 73fbfe2ccf2..d96c6bce5d4 100644
--- a/tgui/packages/tgui/interfaces/common/Objectives.tsx
+++ b/tgui/packages/tgui/interfaces/common/Objectives.tsx
@@ -1,5 +1,5 @@
 import { BooleanLike } from 'common/react';
-import { ReactNode } from 'react';
+import { InfernoNode } from 'inferno';
 import { useBackend } from '../../backend';
 import { Button, Stack } from '../../components';
 
@@ -18,7 +18,7 @@ type ObjectivePrintoutProps = {
   // For passing onto the Stack component
   fill?: boolean;
   // Allows additional components to follow the printout in the same stack
-  objectiveFollowup?: ReactNode;
+  objectiveFollowup?: InfernoNode;
   // The prefix to use for each objective, defaults to "#" (#1, #2)
   objectivePrefix?: string;
   // The font size to use for each objective
diff --git a/tgui/packages/tgui/interfaces/common/RecipeLookup.jsx b/tgui/packages/tgui/interfaces/common/RecipeLookup.jsx
index fb26f4c474b..53ae3e435fa 100644
--- a/tgui/packages/tgui/interfaces/common/RecipeLookup.jsx
+++ b/tgui/packages/tgui/interfaces/common/RecipeLookup.jsx
@@ -176,7 +176,7 @@ export const RecipeLookup = (props) => {
           height="50px"
           position="relative"
           style={{
-            backgroundColor: 'black',
+            'background-color': 'black',
           }}>
           <Chart.Line
             fillPositionedParent
diff --git a/tgui/packages/tgui/layouts/Window.jsx b/tgui/packages/tgui/layouts/Window.jsx
new file mode 100644
index 00000000000..8ab23b27fb2
--- /dev/null
+++ b/tgui/packages/tgui/layouts/Window.jsx
@@ -0,0 +1,206 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from 'common/react';
+import { decodeHtmlEntities, toTitleCase } from 'common/string';
+import { Component } from 'inferno';
+import { backendSuspendStart, useBackend } from '../backend';
+import { Icon } from '../components';
+import { UI_DISABLED, UI_INTERACTIVE, UI_UPDATE } from '../constants';
+import { toggleKitchenSink } from '../debug/actions';
+import { dragStartHandler, recallWindowGeometry, resizeStartHandler, setWindowKey } from '../drag';
+import { createLogger } from '../logging';
+import { Layout } from './Layout';
+import { globalStore } from '../backend';
+
+const logger = createLogger('Window');
+
+const DEFAULT_SIZE = [400, 600];
+
+export class Window extends Component {
+  componentDidMount() {
+    const { suspended } = useBackend();
+    const { canClose = true } = this.props;
+    if (suspended) {
+      return;
+    }
+    Byond.winset(Byond.windowId, {
+      'can-close': Boolean(canClose),
+    });
+    logger.log('mounting');
+    this.updateGeometry();
+  }
+
+  componentDidUpdate(prevProps) {
+    // prettier-ignore
+    const shouldUpdateGeometry = (
+      this.props.width !== prevProps.width
+      || this.props.height !== prevProps.height
+    );
+    if (shouldUpdateGeometry) {
+      this.updateGeometry();
+    }
+  }
+
+  updateGeometry() {
+    const { config } = useBackend();
+    const options = {
+      size: DEFAULT_SIZE,
+      ...config.window,
+    };
+    if (this.props.width && this.props.height) {
+      options.size = [this.props.width, this.props.height];
+    }
+    if (config.window?.key) {
+      setWindowKey(config.window.key);
+    }
+    recallWindowGeometry(options);
+  }
+
+  render() {
+    const { canClose = true, theme, title, children, buttons } = this.props;
+    const { config, suspended, debug } = useBackend();
+
+    let debugLayout = false;
+    if (debug) {
+      debugLayout = debug.debugLayout;
+    }
+
+    const dispatch = globalStore.dispatch;
+    const fancy = config.window?.fancy;
+    // Determine when to show dimmer
+    // prettier-ignore
+    const showDimmer = config.user && (
+      config.user.observer
+        ? config.status < UI_DISABLED
+        : config.status < UI_INTERACTIVE
+    );
+    return (
+      <Layout className="Window" theme={theme}>
+        <TitleBar
+          className="Window__titleBar"
+          title={!suspended && (title || decodeHtmlEntities(config.title))}
+          status={config.status}
+          fancy={fancy}
+          onDragStart={dragStartHandler}
+          onClose={() => {
+            logger.log('pressed close');
+            dispatch(backendSuspendStart());
+          }}
+          canClose={canClose}>
+          {buttons}
+        </TitleBar>
+        <div
+          className={classes(['Window__rest', debugLayout && 'debug-layout'])}>
+          {!suspended && children}
+          {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)}
+            />
+          </>
+        )}
+      </Layout>
+    );
+  }
+}
+
+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>
+      )}
+    </Layout.Content>
+  );
+};
+
+Window.Content = WindowContent;
+
+const statusToColor = (status) => {
+  switch (status) {
+    case UI_INTERACTIVE:
+      return 'good';
+    case UI_UPDATE:
+      return 'average';
+    case UI_DISABLED:
+    default:
+      return 'bad';
+  }
+};
+
+const TitleBar = (props) => {
+  const {
+    className,
+    title,
+    status,
+    canClose,
+    fancy,
+    onDragStart,
+    onClose,
+    children,
+  } = props;
+  const dispatch = globalStore.dispatch;
+  // prettier-ignore
+  const finalTitle = (
+    typeof title === 'string'
+    && title === title.toLowerCase()
+    && toTitleCase(title)
+    || title
+  );
+  return (
+    <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"
+        />
+      )}
+      <div
+        className="TitleBar__dragZone"
+        onMousedown={(e) => fancy && onDragStart(e)}
+      />
+      <div className="TitleBar__title">
+        {finalTitle}
+        {!!children && <div className="TitleBar__buttons">{children}</div>}
+      </div>
+      {process.env.NODE_ENV !== 'production' && (
+        <div
+          className="TitleBar__devBuildIndicator"
+          onClick={() => dispatch(toggleKitchenSink())}>
+          <Icon name="bug" />
+        </div>
+      )}
+      {Boolean(fancy && canClose) && (
+        <div
+          className="TitleBar__close TitleBar__clickable"
+          // 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}>
+          {Byond.IS_LTE_IE8 ? 'x' : '×'}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/tgui/packages/tgui/layouts/Window.tsx b/tgui/packages/tgui/layouts/Window.tsx
deleted file mode 100644
index 658c21bff54..00000000000
--- a/tgui/packages/tgui/layouts/Window.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { classes } from 'common/react';
-import { decodeHtmlEntities, toTitleCase } from 'common/string';
-import { backendSuspendStart, useBackend } from '../backend';
-import { Icon } from '../components';
-import { UI_DISABLED, UI_INTERACTIVE, UI_UPDATE } from '../constants';
-import { toggleKitchenSink } from '../debug/actions';
-import { dragStartHandler, recallWindowGeometry, resizeStartHandler, setWindowKey } from '../drag';
-import { createLogger } from '../logging';
-import { Layout } from './Layout';
-import { globalStore } from '../backend';
-import { PropsWithChildren, ReactNode, useEffect } from 'react';
-import { BoxProps } from '../components/Box';
-
-const logger = createLogger('Window');
-
-const DEFAULT_SIZE: [number, number] = [400, 600];
-
-type Props = Partial<{
-  buttons: ReactNode;
-  canClose: boolean;
-  height: number;
-  theme: string;
-  title: string;
-  width: number;
-}> &
-  PropsWithChildren;
-
-export const Window = (props: Props) => {
-  const {
-    canClose = true,
-    theme,
-    title,
-    children,
-    buttons,
-    width,
-    height,
-  } = props;
-
-  const { config, suspended, debug } = useBackend();
-  if (suspended) {
-    return null;
-  }
-
-  useEffect(() => {
-    const updateGeometry = () => {
-      const options = {
-        ...config.window,
-        size: DEFAULT_SIZE,
-      };
-
-      if (width && height) {
-        options.size = [width, height];
-      }
-      if (config.window?.key) {
-        setWindowKey(config.window.key);
-      }
-      recallWindowGeometry(options);
-    };
-
-    Byond.winset(Byond.windowId, {
-      'can-close': Boolean(canClose),
-    });
-    logger.log('mounting');
-    updateGeometry();
-
-    return () => {
-      logger.log('unmounting');
-    };
-  }, [width, height]);
-
-  let debugLayout = false;
-  if (debug) {
-    debugLayout = debug.debugLayout;
-  }
-
-  const dispatch = globalStore.dispatch;
-  const fancy = config.window?.fancy;
-
-  // Determine when to show dimmer
-  const showDimmer =
-    config.user &&
-    (config.user.observer
-      ? config.status < UI_DISABLED
-      : config.status < UI_INTERACTIVE);
-
-  return (
-    <Layout className="Window" theme={theme}>
-      <TitleBar
-        className="Window__titleBar"
-        title={!suspended && (title || decodeHtmlEntities(config.title))}
-        status={config.status}
-        fancy={fancy}
-        onDragStart={dragStartHandler}
-        onClose={() => {
-          logger.log('pressed close');
-          dispatch(backendSuspendStart());
-        }}
-        canClose={canClose}>
-        {buttons}
-      </TitleBar>
-      <div className={classes(['Window__rest', debugLayout && 'debug-layout'])}>
-        {!suspended && children}
-        {showDimmer && <div className="Window__dimmer" />}
-      </div>
-      {fancy && (
-        <>
-          <div
-            className="Window__resizeHandle__e"
-            onMouseDown={resizeStartHandler(1, 0) as any}
-          />
-          <div
-            className="Window__resizeHandle__s"
-            onMouseDown={resizeStartHandler(0, 1) as any}
-          />
-          <div
-            className="Window__resizeHandle__se"
-            onMouseDown={resizeStartHandler(1, 1) as any}
-          />
-        </>
-      )}
-    </Layout>
-  );
-};
-
-type ContentProps = Partial<{
-  className: string;
-  fitted: boolean;
-  scrollable: boolean;
-  vertical: boolean;
-}> &
-  BoxProps &
-  PropsWithChildren;
-
-const WindowContent = (props: ContentProps) => {
-  const { className, fitted, children, ...rest } = props;
-
-  return (
-    <Layout.Content
-      className={classes(['Window__content', className])}
-      {...rest}>
-      {(fitted && children) || (
-        <div className="Window__contentPadding">{children}</div>
-      )}
-    </Layout.Content>
-  );
-};
-
-Window.Content = WindowContent;
-
-const statusToColor = (status) => {
-  switch (status) {
-    case UI_INTERACTIVE:
-      return 'good';
-    case UI_UPDATE:
-      return 'average';
-    case UI_DISABLED:
-    default:
-      return 'bad';
-  }
-};
-
-type TitleBarProps = Partial<{
-  canClose: boolean;
-  className: string;
-  fancy: boolean;
-  onClose: (e) => void;
-  onDragStart: (e) => void;
-  status: number;
-  title: string;
-}> &
-  PropsWithChildren;
-
-const TitleBar = (props: TitleBarProps) => {
-  const {
-    className,
-    title,
-    status,
-    canClose,
-    fancy,
-    onDragStart,
-    onClose,
-    children,
-  } = props;
-  const dispatch = globalStore.dispatch;
-
-  const finalTitle =
-    (typeof title === 'string' &&
-      title === title.toLowerCase() &&
-      toTitleCase(title)) ||
-    title;
-
-  return (
-    <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"
-        />
-      )}
-      <div
-        className="TitleBar__dragZone"
-        onMouseDown={(e) => fancy && onDragStart && onDragStart(e)}
-      />
-      <div className="TitleBar__title">
-        {finalTitle}
-        {!!children && <div className="TitleBar__buttons">{children}</div>}
-      </div>
-      {process.env.NODE_ENV !== 'production' && (
-        <div
-          className="TitleBar__devBuildIndicator"
-          onClick={() => dispatch(toggleKitchenSink())}>
-          <Icon name="bug" />
-        </div>
-      )}
-      {Boolean(fancy && canClose) && (
-        <div className="TitleBar__close TitleBar__clickable" onClick={onClose}>
-          ×
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/tgui/packages/tgui/package.json b/tgui/packages/tgui/package.json
index b59766c04b2..d7cdd701db4 100644
--- a/tgui/packages/tgui/package.json
+++ b/tgui/packages/tgui/package.json
@@ -1,20 +1,18 @@
 {
   "private": true,
   "name": "tgui",
-  "version": "5.0.0",
+  "version": "4.4.0",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "@types/marked": "^4.0.8",
-    "@types/react": "^18.2.39",
-    "@types/react-dom": "^18.2.17",
     "common": "workspace:*",
     "dateformat": "^4.6.2",
     "dompurify": "^2.4.4",
     "highlight.js": "^11.9.0",
+    "inferno": "^7.4.11",
+    "inferno-vnode-flags": "^7.4.11",
     "js-yaml": "^4.1.0",
     "marked": "^4.2.12",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "tgui-dev-server": "workspace:*",
     "tgui-polyfill": "workspace:*"
   }
diff --git a/tgui/packages/tgui/renderer.ts b/tgui/packages/tgui/renderer.ts
index 4478cedc761..1c7068f8be2 100644
--- a/tgui/packages/tgui/renderer.ts
+++ b/tgui/packages/tgui/renderer.ts
@@ -1,5 +1,5 @@
 import { perf } from 'common/perf';
-import { render } from 'react-dom';
+import { render } from 'inferno';
 import { createLogger } from './logging';
 
 const logger = createLogger('renderer');
diff --git a/tgui/packages/tgui/store.ts b/tgui/packages/tgui/store.ts
index 4b1455b9029..468298fe07c 100644
--- a/tgui/packages/tgui/store.ts
+++ b/tgui/packages/tgui/store.ts
@@ -8,6 +8,7 @@ import { Middleware, Reducer, Store, applyMiddleware, combineReducers, createSto
 import { backendMiddleware, backendReducer } from './backend';
 import { debugMiddleware, debugReducer, relayMiddleware } from './debug';
 
+import { Component } from 'inferno';
 import { assetMiddleware } from './assets';
 import { createLogger } from './logging';
 import { flow } from 'common/fp';
@@ -102,3 +103,17 @@ const createStackAugmentor =
       })
     );
   };
+
+/**
+ * Store provider for Inferno apps.
+ */
+export class StoreProvider extends Component<StoreProviderProps> {
+  getChildContext() {
+    const { store } = this.props;
+    return { store };
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
diff --git a/tgui/public/tgui-polyfill.min.js b/tgui/public/tgui-polyfill.min.js
index fc7c7a51287..68c21147e6d 100644
--- a/tgui/public/tgui-polyfill.min.js
+++ b/tgui/public/tgui-polyfill.min.js
@@ -1 +1 @@
-(function(){"use strict";!function(){function t(){var e=Array.prototype.slice.call(arguments),n=document.createDocumentFragment();e.forEach((function(e){var t=e instanceof Node;n.appendChild(t?e:document.createTextNode(String(e)))})),this.appendChild(n)}function n(){this.parentNode&&this.parentNode.removeChild(this)}[Element.prototype,Document.prototype,DocumentFragment.prototype].forEach((function(e){e.hasOwnProperty("append")||Object.defineProperty(e,"append",{configurable:!0,enumerable:!0,writable:!0,value:t});e.hasOwnProperty("remove")||Object.defineProperty(e,"remove",{configurable:!0,enumerable:!0,writable:!0,value:n})}))}()})();
\ No newline at end of file
+(function(){"use strict";if(!window.Int32Array){window.Int32Array=Array}!function(){function t(){var e=Array.prototype.slice.call(arguments),n=document.createDocumentFragment();e.forEach((function(e){var t=e instanceof Node;n.appendChild(t?e:document.createTextNode(String(e)))})),this.appendChild(n)}function n(){this.parentNode&&this.parentNode.removeChild(this)}[Element.prototype,Document.prototype,DocumentFragment.prototype].forEach((function(e){e.hasOwnProperty("append")||Object.defineProperty(e,"append",{configurable:!0,enumerable:!0,writable:!0,value:t});e.hasOwnProperty("remove")||Object.defineProperty(e,"remove",{configurable:!0,enumerable:!0,writable:!0,value:n})}))}()})();
\ No newline at end of file
diff --git a/tgui/yarn.lock b/tgui/yarn.lock
index 2b8978c9623..925234c1a72 100644
--- a/tgui/yarn.lock
+++ b/tgui/yarn.lock
@@ -68,7 +68,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.23.3":
+"@babel/core@npm:*, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/core@npm:7.23.3"
   dependencies:
@@ -595,6 +595,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-jsx@npm:^7":
+  version: 7.12.13
+  resolution: "@babel/plugin-syntax-jsx@npm:7.12.13"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.12.13
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 30697ad4607a9339b06c2648c2d128ce6865c3d2d14049b422c5ca060d6532978bb1008e086df402d365fda04fbafe9bd4ad9f62d78ef2e7a7063459b59645c0
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-jsx@npm:^7.23.3, @babel/plugin-syntax-jsx@npm:^7.7.2":
   version: 7.23.3
   resolution: "@babel/plugin-syntax-jsx@npm:7.23.3"
@@ -1193,55 +1204,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-display-name@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-react-display-name@npm:7.23.3"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.22.5
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 7f86964e8434d3ddbd3c81d2690c9b66dbf1cd8bd9512e2e24500e9fa8cf378bc52c0853270b3b82143aba5965aec04721df7abdb768f952b44f5c6e0b198779
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-react-jsx-development@npm:^7.22.5":
-  version: 7.22.5
-  resolution: "@babel/plugin-transform-react-jsx-development@npm:7.22.5"
-  dependencies:
-    "@babel/plugin-transform-react-jsx": ^7.22.5
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 36bc3ff0b96bb0ef4723070a50cfdf2e72cfd903a59eba448f9fe92fea47574d6f22efd99364413719e1f3fb3c51b6c9b2990b87af088f8486a84b2a5f9e4560
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-react-jsx@npm:^7.22.15, @babel/plugin-transform-react-jsx@npm:^7.22.5":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-react-jsx@npm:7.23.4"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.22.5
-    "@babel/helper-module-imports": ^7.22.15
-    "@babel/helper-plugin-utils": ^7.22.5
-    "@babel/plugin-syntax-jsx": ^7.23.3
-    "@babel/types": ^7.23.4
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: d8b8c52e8e22e833bf77c8d1a53b0a57d1fd52ba9596a319d572de79446a8ed9d95521035bc1175c1589d1a6a34600d2e678fa81d81bac8fac121137097f1f0a
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-react-pure-annotations@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.23.3"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.22.5
-    "@babel/helper-plugin-utils": ^7.22.5
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 9ea3698b1d422561d93c0187ac1ed8f2367e4250b10e259785ead5aa643c265830fd0f4cf5087a5bedbc4007444c06da2f2006686613220acf0949895f453666
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-regenerator@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-regenerator@npm:7.23.3"
@@ -1485,22 +1447,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-react@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/preset-react@npm:7.23.3"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.22.5
-    "@babel/helper-validator-option": ^7.22.15
-    "@babel/plugin-transform-react-display-name": ^7.23.3
-    "@babel/plugin-transform-react-jsx": ^7.22.15
-    "@babel/plugin-transform-react-jsx-development": ^7.22.5
-    "@babel/plugin-transform-react-pure-annotations": ^7.23.3
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 2d90961e7e627a74b44551e88ad36a440579e283e8dc27972bf2f50682152bbc77228673a3ea22c0e0d005b70cbc487eccd64897c5e5e0384e5ce18f300b21eb
-  languageName: node
-  linkType: hard
-
 "@babel/preset-typescript@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/preset-typescript@npm:7.23.3"
@@ -1572,7 +1518,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.14.5, @babel/types@npm:^7.15.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
+"@babel/types@npm:^7, @babel/types@npm:^7.0.0, @babel/types@npm:^7.14.5, @babel/types@npm:^7.15.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
   version: 7.15.0
   resolution: "@babel/types@npm:7.15.0"
   dependencies:
@@ -2612,40 +2558,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*":
-  version: 15.7.11
-  resolution: "@types/prop-types@npm:15.7.11"
-  checksum: 7519ff11d06fbf6b275029fe03fff9ec377b4cb6e864cac34d87d7146c7f5a7560fd164bdc1d2dbe00b60c43713631251af1fd3d34d46c69cd354602bc0c7c54
-  languageName: node
-  linkType: hard
-
-"@types/react-dom@npm:^18.2.17":
-  version: 18.2.17
-  resolution: "@types/react-dom@npm:18.2.17"
-  dependencies:
-    "@types/react": "*"
-  checksum: 7a4e704ed4be6e0c3ccd8a22ff69386fe548304bf4db090513f42e059ff4c65f7a427790320051524d6578a2e4c9667bb7a80a4c989b72361c019fbe851d9385
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:*, @types/react@npm:^18.2.39":
-  version: 18.2.39
-  resolution: "@types/react@npm:18.2.39"
-  dependencies:
-    "@types/prop-types": "*"
-    "@types/scheduler": "*"
-    csstype: ^3.0.2
-  checksum: 9bcb1f1f060f1bf8f4730fb1c7772d0323a6e707f274efee3b976c40d92af4677df4d88e9135faaacf34e13e02f92ef24eb7d0cbcf7fb75c1883f5623ccb19f4
-  languageName: node
-  linkType: hard
-
-"@types/scheduler@npm:*":
-  version: 0.16.8
-  resolution: "@types/scheduler@npm:0.16.8"
-  checksum: 6c091b096daa490093bf30dd7947cd28e5b2cd612ec93448432b33f724b162587fed9309a0acc104d97b69b1d49a0f3fc755a62282054d62975d53d7fd13472d
-  languageName: node
-  linkType: hard
-
 "@types/stack-utils@npm:^2.0.0":
   version: 2.0.0
   resolution: "@types/stack-utils@npm:2.0.0"
@@ -3691,6 +3603,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-inferno@npm:^6.7.0":
+  version: 6.7.0
+  resolution: "babel-plugin-inferno@npm:6.7.0"
+  dependencies:
+    "@babel/plugin-syntax-jsx": ^7
+    "@babel/types": ^7
+  checksum: 37b04f04ca326a41e5717a0dbc419d264b05fed57daff8300bd6988608517946f419014b96e546595dbd093e16db136844d7dc95897db0a8b7e2b870d020a00c
+  languageName: node
+  linkType: hard
+
 "babel-plugin-istanbul@npm:^6.1.1":
   version: 6.1.1
   resolution: "babel-plugin-istanbul@npm:6.1.1"
@@ -4510,13 +4432,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2":
-  version: 3.1.2
-  resolution: "csstype@npm:3.1.2"
-  checksum: e1a52e6c25c1314d6beef5168da704ab29c5186b877c07d822bd0806717d9a265e8493a2e35ca7e68d0f5d472d43fac1cdce70fd79fd0853dff81f3028d857b5
-  languageName: node
-  linkType: hard
-
 "cubic2quad@npm:^1.0.0":
   version: 1.1.1
   resolution: "cubic2quad@npm:1.1.1"
@@ -6598,6 +6513,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"inferno-shared@npm:7.4.11":
+  version: 7.4.11
+  resolution: "inferno-shared@npm:7.4.11"
+  checksum: 48b453fb11d7126d30668e3d74ccc4a4f00f9f7b191d27eded2138acc0cd07c02d14c1c936319b5b25bf46f7476b480938337ec7a64b932b2949b73c968ae52a
+  languageName: node
+  linkType: hard
+
+"inferno-vnode-flags@npm:7.4.11, inferno-vnode-flags@npm:^7.4.11":
+  version: 7.4.11
+  resolution: "inferno-vnode-flags@npm:7.4.11"
+  checksum: 8a2f1d8d546b99c14c31a25a88ac45f076be9ac630202f898c49140aa420cf2c96d871fcc3f8e5813d5176d569a40c3fd1727198edf46306de3a989fe85176ab
+  languageName: node
+  linkType: hard
+
+"inferno@npm:^7.4.11":
+  version: 7.4.11
+  resolution: "inferno@npm:7.4.11"
+  dependencies:
+    inferno-shared: 7.4.11
+    inferno-vnode-flags: 7.4.11
+    opencollective-postinstall: ^2.0.3
+  checksum: 1651aad357995170c135520ff09d6e24311e05f0b0736b66d50dba5e68ff521b6c9dff13eec64effd6b79455d39f06176f0a5be50a1aaa979384721ae9b9862c
+  languageName: node
+  linkType: hard
+
 "inflight@npm:^1.0.4":
   version: 1.0.6
   resolution: "inflight@npm:1.0.6"
@@ -8089,7 +8029,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -8775,6 +8715,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"opencollective-postinstall@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "opencollective-postinstall@npm:2.0.3"
+  bin:
+    opencollective-postinstall: index.js
+  checksum: 0a68c5cef135e46d11e665d5077398285d1ce5311c948e8327b435791c409744d4a6bb9c55bd6507fb5f2ef34b0ad920565adcdaf974cbdae701aead6f32b396
+  languageName: node
+  linkType: hard
+
 "opener@npm:^1.5.2":
   version: 1.5.2
   resolution: "opener@npm:1.5.2"
@@ -9461,18 +9410,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.2.0":
-  version: 18.2.0
-  resolution: "react-dom@npm:18.2.0"
-  dependencies:
-    loose-envify: ^1.1.0
-    scheduler: ^0.23.0
-  peerDependencies:
-    react: ^18.2.0
-  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
-  languageName: node
-  linkType: hard
-
 "react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -9487,15 +9424,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.2.0":
-  version: 18.2.0
-  resolution: "react@npm:18.2.0"
-  dependencies:
-    loose-envify: ^1.1.0
-  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
-  languageName: node
-  linkType: hard
-
 "readable-stream@npm:^1.0.33":
   version: 1.1.14
   resolution: "readable-stream@npm:1.1.14"
@@ -9971,15 +9899,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.23.0":
-  version: 0.23.0
-  resolution: "scheduler@npm:0.23.0"
-  dependencies:
-    loose-envify: ^1.1.0
-  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
-  languageName: node
-  linkType: hard
-
 "schema-utils@npm:^2.6.5":
   version: 2.7.1
   resolution: "schema-utils@npm:2.7.1"
@@ -10925,9 +10844,10 @@ __metadata:
     "@fastify/static": ^6.12.0
     common: "workspace:*"
     fastify: ^3.29.5
+    inferno: ^7.4.11
+    inferno-vnode-flags: ^7.4.11
     lodash: ^4.17.21
     platform: ^1.3.6
-    react: ^18.2.0
     tgui: "workspace:*"
   languageName: unknown
   linkType: soft
@@ -10948,11 +10868,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "tgui-panel@workspace:packages/tgui-panel"
   dependencies:
-    "@types/react": ^18.2.39
     common: "workspace:*"
     dompurify: ^2.4.4
-    react: ^18.2.0
-    react-dom: ^18.2.0
+    inferno: ^7.4.11
     tgui: "workspace:*"
     tgui-dev-server: "workspace:*"
     tgui-polyfill: "workspace:*"
@@ -10974,9 +10892,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "tgui-say@workspace:packages/tgui-say"
   dependencies:
-    "@types/react": ^18.2.39
     common: "workspace:*"
-    react: ^18.2.0
+    inferno: ^7.4.11
     tgui: "workspace:*"
     tgui-polyfill: "workspace:*"
   languageName: unknown
@@ -10991,7 +10908,6 @@ __metadata:
     "@babel/plugin-transform-class-properties": ^7.23.3
     "@babel/plugin-transform-jscript": ^7.23.3
     "@babel/preset-env": ^7.23.3
-    "@babel/preset-react": ^7.23.3
     "@babel/preset-typescript": ^7.23.3
     "@types/jest": ^29.5.10
     "@types/jsdom": ^21.1.6
@@ -11001,6 +10917,7 @@ __metadata:
     "@typescript-eslint/parser": ^5.62.0
     babel-jest: ^29.7.0
     babel-loader: ^8.3.0
+    babel-plugin-inferno: ^6.7.0
     babel-plugin-transform-remove-console: ^6.9.4
     common: "workspace:*"
     css-loader: ^6.8.1
@@ -11034,16 +10951,14 @@ __metadata:
   dependencies:
     "@popperjs/core": ^2.11.8
     "@types/marked": ^4.0.8
-    "@types/react": ^18.2.39
-    "@types/react-dom": ^18.2.17
     common: "workspace:*"
     dateformat: ^4.6.2
     dompurify: ^2.4.4
     highlight.js: ^11.9.0
+    inferno: ^7.4.11
+    inferno-vnode-flags: ^7.4.11
     js-yaml: ^4.1.0
     marked: ^4.2.12
-    react: ^18.2.0
-    react-dom: ^18.2.0
     tgui-dev-server: "workspace:*"
     tgui-polyfill: "workspace:*"
   languageName: unknown