diff --git a/code/modules/client/preferences/README.md b/code/modules/client/preferences/README.md
index 674f234d48e..a653039f1b8 100644
--- a/code/modules/client/preferences/README.md
+++ b/code/modules/client/preferences/README.md
@@ -419,7 +419,7 @@ In the `.ts` file you created earlier, you must now give the information of your
 
 ```ts
 import { Antagonist, Category } from "../base";
-import { multiline } from "common/string";
+import { multiline } from "tgui-core/string";
 
 const Changeling: Antagonist = {
   key: "changeling", // This must be the same as your filename
diff --git a/tgui/docs/writing-tests.md b/tgui/docs/writing-tests.md
index 633e73bcd1a..dc6299d53d9 100644
--- a/tgui/docs/writing-tests.md
+++ b/tgui/docs/writing-tests.md
@@ -12,7 +12,7 @@ test('something', () => {
 
 Refer to [README](../README.md) to learn how to run tests.
 
-There is an example test in `packages/common/react.spec.ts`.
+There is an example test in `packages/tgui-core/react.spec.ts`.
 
 You can read more about Jest here: https://jestjs.io/docs/en/getting-started
 
diff --git a/tgui/packages/tgui/interfaces/AmmoWorkbench.jsx b/tgui/packages/tgui/interfaces/AmmoWorkbench.jsx
index b815cc212da..3f21e12880a 100644
--- a/tgui/packages/tgui/interfaces/AmmoWorkbench.jsx
+++ b/tgui/packages/tgui/interfaces/AmmoWorkbench.jsx
@@ -1,5 +1,5 @@
 // THIS IS A SKYRAT UI FILE
-import { toTitleCase } from 'common/string';
+import { toTitleCase } from 'tgui-core/string';
 import { useState } from 'react';
 
 import { useBackend, useSharedState } from '../backend';
diff --git a/tgui/packages/tgui/interfaces/AntagInfoAssaultops.tsx b/tgui/packages/tgui/interfaces/AntagInfoAssaultops.tsx
index 9cd4a1f5edc..cebc1c05064 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoAssaultops.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoAssaultops.tsx
@@ -1,8 +1,5 @@
 // THIS IS A SKYRAT UI FILE
-import { BooleanLike } from 'common/react';
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -12,7 +9,10 @@ import {
   Section,
   Stack,
   Tabs,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 import { Rules } from './AntagInfoRules';
 
diff --git a/tgui/packages/tgui/interfaces/AntagInfoBloodsucker.tsx b/tgui/packages/tgui/interfaces/AntagInfoBloodsucker.tsx
index 13985de99ba..cd02e1322a5 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoBloodsucker.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoBloodsucker.tsx
@@ -1,9 +1,9 @@
-import { BooleanLike } from 'common/react';
 import { useState } from 'react';
+import { Box, Button, Image, Section, Stack, Tabs } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
 
 import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
-import { Box, Button, Image, Section, Stack, Tabs } from 'tgui-core/components';
 import { Window } from '../layouts';
 import { Objective } from './common/Objectives';
 import { PowerDetails } from './PowerInfo';
diff --git a/tgui/packages/tgui/interfaces/AntagInfoClock.tsx b/tgui/packages/tgui/interfaces/AntagInfoClock.tsx
index 78911f8462c..757cb999fab 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoClock.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoClock.tsx
@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { Icon, Section, Stack } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Icon, Section, Stack } from '../components';
 import { Window } from '../layouts';
 import { Rules } from './AntagInfoRules';
 
diff --git a/tgui/packages/tgui/interfaces/AntagInfoGhoul.tsx b/tgui/packages/tgui/interfaces/AntagInfoGhoul.tsx
index b403dc98fca..b653d9ef101 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoGhoul.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoGhoul.tsx
@@ -1,5 +1,6 @@
+import { Section, Stack } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Section, Stack } from '../components';
 import { Window } from '../layouts';
 import { GhoulProps } from './AntagInfoBloodsucker';
 import { ObjectivePrintout } from './common/Objectives';
diff --git a/tgui/packages/tgui/interfaces/AntagInfoOpfor.tsx b/tgui/packages/tgui/interfaces/AntagInfoOpfor.tsx
index cd344af8619..9343fb6a9fe 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoOpfor.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoOpfor.tsx
@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { Button, Section, Stack } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Button, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 export const AntagInfoOpfor = (props) => {
diff --git a/tgui/packages/tgui/interfaces/AntagInfoRules.tsx b/tgui/packages/tgui/interfaces/AntagInfoRules.tsx
index b1a3a919add..ca7ba2d0509 100644
--- a/tgui/packages/tgui/interfaces/AntagInfoRules.tsx
+++ b/tgui/packages/tgui/interfaces/AntagInfoRules.tsx
@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { Stack } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Stack } from '../components';
 import { Objective } from './common/Objectives';
 
 type Info = {
diff --git a/tgui/packages/tgui/interfaces/ArmamentStation.jsx b/tgui/packages/tgui/interfaces/ArmamentStation.jsx
index c223cd4eb5c..9d066779543 100644
--- a/tgui/packages/tgui/interfaces/ArmamentStation.jsx
+++ b/tgui/packages/tgui/interfaces/ArmamentStation.jsx
@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend, useLocalState } from '../backend';
 import {
   Box,
   Button,
@@ -8,7 +7,9 @@ import {
   NoticeBox,
   Section,
   Stack,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
 
 export const ArmamentStation = (props) => {
diff --git a/tgui/packages/tgui/interfaces/BluespaceArtillerySkyrat.tsx b/tgui/packages/tgui/interfaces/BluespaceArtillerySkyrat.tsx
index fd29ca62d21..7d9e24d3fa1 100644
--- a/tgui/packages/tgui/interfaces/BluespaceArtillerySkyrat.tsx
+++ b/tgui/packages/tgui/interfaces/BluespaceArtillerySkyrat.tsx
@@ -1,7 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -9,8 +6,11 @@ import {
   NoticeBox,
   Section,
   Slider,
-} from '../components';
-import { formatPower } from '../format';
+} from 'tgui-core/components';
+import { formatPower } from 'tgui-core/format';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 type Data = {
diff --git a/tgui/packages/tgui/interfaces/BorerChem.jsx b/tgui/packages/tgui/interfaces/BorerChem.jsx
index 42b7841abe1..2b268e32775 100644
--- a/tgui/packages/tgui/interfaces/BorerChem.jsx
+++ b/tgui/packages/tgui/interfaces/BorerChem.jsx
@@ -1,8 +1,14 @@
 // THIS IS A SKYRAT UI FILE
-import { toFixed } from 'common/math';
+import {
+  Box,
+  Button,
+  LabeledList,
+  ProgressBar,
+  Section,
+} from 'tgui-core/components';
+import { toFixed } from 'tgui-core/math';
 
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';
 
 export const BorerChem = (props) => {
diff --git a/tgui/packages/tgui/interfaces/BorerEvolution.tsx b/tgui/packages/tgui/interfaces/BorerEvolution.tsx
index a906cb24ee8..15696772a66 100644
--- a/tgui/packages/tgui/interfaces/BorerEvolution.tsx
+++ b/tgui/packages/tgui/interfaces/BorerEvolution.tsx
@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { BlockQuote, Button, Section, Stack } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { BlockQuote, Button, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 const borerColor = {
diff --git a/tgui/packages/tgui/interfaces/CargoImportConsole.jsx b/tgui/packages/tgui/interfaces/CargoImportConsole.jsx
index 2854aee9828..6f6a3eb557c 100644
--- a/tgui/packages/tgui/interfaces/CargoImportConsole.jsx
+++ b/tgui/packages/tgui/interfaces/CargoImportConsole.jsx
@@ -1,8 +1,15 @@
 // THIS IS A SKYRAT UI FILE
 import { useState } from 'react';
+import {
+  Box,
+  Button,
+  Divider,
+  Image,
+  Section,
+  Stack,
+} from 'tgui-core/components';
 
 import { useBackend } from '../backend';
-import { Box, Button, Divider, Image, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 export const CargoImportConsole = (props) => {
diff --git a/tgui/packages/tgui/interfaces/CharacterPreview.tsx b/tgui/packages/tgui/interfaces/CharacterPreview.tsx
index c6935409fb4..bd3fe7c4853 100644
--- a/tgui/packages/tgui/interfaces/CharacterPreview.tsx
+++ b/tgui/packages/tgui/interfaces/CharacterPreview.tsx
@@ -1,4 +1,4 @@
-import { ByondUi } from '../components';
+import { ByondUi } from 'tgui-core/components';
 
 export const CharacterPreview = (props: { height: string; id: string }) => {
   return (
diff --git a/tgui/packages/tgui/interfaces/ChemPress.jsx b/tgui/packages/tgui/interfaces/ChemPress.jsx
index b91406db3ec..217646a0ffc 100644
--- a/tgui/packages/tgui/interfaces/ChemPress.jsx
+++ b/tgui/packages/tgui/interfaces/ChemPress.jsx
@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -7,7 +6,9 @@ import {
   LabeledList,
   NumberInput,
   Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const ChemPress = (props) => {
diff --git a/tgui/packages/tgui/interfaces/ClockworkResearch.tsx b/tgui/packages/tgui/interfaces/ClockworkResearch.tsx
index 215e0343077..a831fb28f2b 100644
--- a/tgui/packages/tgui/interfaces/ClockworkResearch.tsx
+++ b/tgui/packages/tgui/interfaces/ClockworkResearch.tsx
@@ -1,7 +1,15 @@
 // THIS IS A SKYRAT UI FILE
-import { BooleanLike, classes } from '../../common/react';
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Section,
+  Stack,
+} from 'tgui-core/components';
+import { BooleanLike, classes } from 'tgui-core/react';
+
 import { useBackend } from '../backend';
-import { Box, Button, Divider, Flex, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 type Data = {
diff --git a/tgui/packages/tgui/interfaces/ClockworkSlab.jsx b/tgui/packages/tgui/interfaces/ClockworkSlab.jsx
index 7acb39b8713..7cb3244e7ca 100644
--- a/tgui/packages/tgui/interfaces/ClockworkSlab.jsx
+++ b/tgui/packages/tgui/interfaces/ClockworkSlab.jsx
@@ -1,7 +1,5 @@
 // THIS IS A SKYRAT UI FILE
 import { Fragment } from 'react';
-
-import { useBackend, useLocalState } from '../backend';
 import {
   Box,
   Button,
@@ -12,8 +10,9 @@ import {
   Section,
   Stack,
   Table,
-} from '../components';
-import { TableRow } from '../components/Table';
+} from 'tgui-core/components';
+
+import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
 
 const brassColor = '#DFC69C';
@@ -221,7 +220,7 @@ const ClockworkSpellList = (props) => {
       {scriptures.map((script) =>
         script.type === selectedTab ? (
           <Fragment key={script}>
-            <TableRow>
+            <Table.Row>
               <Table.Cell bold>{script.name}</Table.Cell>
               <Table.Cell collapsing textAlign="right">
                 <Button
@@ -245,8 +244,8 @@ const ClockworkSpellList = (props) => {
                   }
                 />
               </Table.Cell>
-            </TableRow>
-            <TableRow>
+            </Table.Row>
+            <Table.Row>
               <Table.Cell>{script.desc}</Table.Cell>
               <Table.Cell collapsing textAlign="right">
                 <Button
@@ -260,7 +259,7 @@ const ClockworkSpellList = (props) => {
                   }
                 />
               </Table.Cell>
-            </TableRow>
+            </Table.Row>
             <Table.Cell>
               <Divider />
             </Table.Cell>
diff --git a/tgui/packages/tgui/interfaces/ColorPickerModal.tsx b/tgui/packages/tgui/interfaces/ColorPickerModal.tsx
index c9b2405d4b0..fe9a0a36adf 100644
--- a/tgui/packages/tgui/interfaces/ColorPickerModal.tsx
+++ b/tgui/packages/tgui/interfaces/ColorPickerModal.tsx
@@ -14,26 +14,26 @@ import {
   rgbaToHsva,
   validHex,
 } from 'common/colorpicker';
-import { clamp } from 'common/math';
-import { classes } from 'common/react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Interaction, Interactive } from 'tgui/components/Interactive';
-
-import { useBackend } from '../backend';
 import {
+  Autofocus,
   Box,
   Button,
   Flex,
   NumberInput,
-  Pointer,
   Section,
   Stack,
   Tooltip,
-} from '../components';
-import { Autofocus } from '../components/Autofocus';
+} from 'tgui-core/components';
+import { clamp } from 'tgui-core/math';
+import { classes } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 import { InputButtons } from './common/InputButtons';
+import { Interaction, Interactive } from './common/Interactive';
 import { Loader } from './common/Loader';
+import { Pointer } from './common/Pointer';
 
 interface ColorPickerData {
   autofocus: boolean;
diff --git a/tgui/packages/tgui/interfaces/CommandReportConsole.jsx b/tgui/packages/tgui/interfaces/CommandReportConsole.jsx
index 8791d1c416a..b3985a99e48 100644
--- a/tgui/packages/tgui/interfaces/CommandReportConsole.jsx
+++ b/tgui/packages/tgui/interfaces/CommandReportConsole.jsx
@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend } from '../backend';
 import {
   Button,
   Input,
@@ -7,7 +6,9 @@ import {
   Section,
   Stack,
   TextArea,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const CommandReportConsole = (props) => {
diff --git a/tgui/packages/tgui/interfaces/CrewConsoleBubbers.tsx b/tgui/packages/tgui/interfaces/CrewConsoleBubbers.tsx
index b0cc18349d1..4b9ca9a0a2f 100644
--- a/tgui/packages/tgui/interfaces/CrewConsoleBubbers.tsx
+++ b/tgui/packages/tgui/interfaces/CrewConsoleBubbers.tsx
@@ -1,9 +1,9 @@
-import { BooleanLike } from 'common/react';
-import { createSearch } from 'common/string';
 import { useState } from 'react';
+import { Box, Button, Icon, Input, Section, Table } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+import { createSearch } from 'tgui-core/string';
 
 import { useBackend } from '../backend';
-import { Box, Button, Icon, Input, Section, Table } from '../components';
 import { COLORS } from '../constants';
 import { Window } from '../layouts';
 
diff --git a/tgui/packages/tgui/interfaces/CrewConsoleSkyrat.jsx b/tgui/packages/tgui/interfaces/CrewConsoleSkyrat.jsx
index 2818836f733..e229cd48db3 100644
--- a/tgui/packages/tgui/interfaces/CrewConsoleSkyrat.jsx
+++ b/tgui/packages/tgui/interfaces/CrewConsoleSkyrat.jsx
@@ -1,8 +1,8 @@
 // THIS IS A SKYRAT UI FILE
 import { sortBy } from 'common/collections';
+import { Box, Button, Icon, Section, Table } from 'tgui-core/components';
 
 import { useBackend } from '../backend';
-import { Box, Button, Icon, Section, Table } from '../components';
 import { COLORS } from '../constants';
 import { Window } from '../layouts';
 
diff --git a/tgui/packages/tgui/interfaces/CrewConsoleSkyratBlueshield.jsx b/tgui/packages/tgui/interfaces/CrewConsoleSkyratBlueshield.jsx
index acf36ed8e7b..8751be3ce85 100644
--- a/tgui/packages/tgui/interfaces/CrewConsoleSkyratBlueshield.jsx
+++ b/tgui/packages/tgui/interfaces/CrewConsoleSkyratBlueshield.jsx
@@ -1,8 +1,8 @@
 // THIS IS A SKYRAT UI FILE
 import { sortBy } from 'common/collections';
+import { Box, Button, Icon, Section, Table } from 'tgui-core/components';
 
 import { useBackend } from '../backend';
-import { Box, Button, Icon, Section, Table } from '../components';
 import { COLORS } from '../constants';
 import { Window } from '../layouts';
 
diff --git a/tgui/packages/tgui/interfaces/CryopodConsole.jsx b/tgui/packages/tgui/interfaces/CryopodConsole.jsx
index 2932046c066..15607cec1d9 100644
--- a/tgui/packages/tgui/interfaces/CryopodConsole.jsx
+++ b/tgui/packages/tgui/interfaces/CryopodConsole.jsx
@@ -1,6 +1,13 @@
 // THIS IS A SKYRAT UI FILE
+import {
+  Button,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Stack,
+} from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Button, LabeledList, NoticeBox, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 export const CryopodConsole = (props) => {
diff --git a/tgui/packages/tgui/interfaces/DelamProcedure.tsx b/tgui/packages/tgui/interfaces/DelamProcedure.tsx
index 1dfe78947f3..0a39bd4de3d 100644
--- a/tgui/packages/tgui/interfaces/DelamProcedure.tsx
+++ b/tgui/packages/tgui/interfaces/DelamProcedure.tsx
@@ -1,5 +1,6 @@
 // THIS IS A SKYRAT UI FILE
-import { BlockQuote, Box, NoticeBox, Section } from '../components';
+import { BlockQuote, Box, NoticeBox, Section } from 'tgui-core/components';
+
 import { Window } from '../layouts';
 
 export const DelamProcedure = () => {
diff --git a/tgui/packages/tgui/interfaces/EventPanel.jsx b/tgui/packages/tgui/interfaces/EventPanel.jsx
index 41736971165..66ce54ea8be 100644
--- a/tgui/packages/tgui/interfaces/EventPanel.jsx
+++ b/tgui/packages/tgui/interfaces/EventPanel.jsx
@@ -1,8 +1,14 @@
 // THIS IS A SKYRAT UI FILE
-import { toFixed } from 'common/math';
+import {
+  Button,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Stack,
+} from 'tgui-core/components';
+import { toFixed } from 'tgui-core/math';
 
 import { useBackend } from '../backend';
-import { Button, LabeledList, NoticeBox, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 export const EventPanel = (props) => {
diff --git a/tgui/packages/tgui/interfaces/ExaminePanel.jsx b/tgui/packages/tgui/interfaces/ExaminePanel.jsx
index ced74a78602..bc8959210ce 100644
--- a/tgui/packages/tgui/interfaces/ExaminePanel.jsx
+++ b/tgui/packages/tgui/interfaces/ExaminePanel.jsx
@@ -1,9 +1,9 @@
 // THIS IS A SKYRAT UI FILE
 import { useState } from 'react';
+import { ByondUi, Section, Stack, Tabs } from 'tgui-core/components';
 
 import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
-import { ByondUi, Section, Stack, Tabs } from '../components';
 import { Window } from '../layouts';
 
 const formatURLs = (text) => {
diff --git a/tgui/packages/tgui/interfaces/FishingBubbers.tsx b/tgui/packages/tgui/interfaces/FishingBubbers.tsx
index 7de0bb6366d..bfa5d97333c 100644
--- a/tgui/packages/tgui/interfaces/FishingBubbers.tsx
+++ b/tgui/packages/tgui/interfaces/FishingBubbers.tsx
@@ -1,18 +1,18 @@
-import { KEY_CTRL } from 'common/keycodes';
-import { clamp } from 'common/math';
+import { Component } from 'react';
+import { useDispatch } from 'tgui/backend';
+import { Icon, KeyListener } from 'tgui-core/components';
+import { globalEvents, KeyEvent } from 'tgui-core/events';
+import { KEY_CTRL } from 'tgui-core/keycodes';
+import { clamp } from 'tgui-core/math';
 import {
   randomInteger,
   randomNumber,
   randomPick,
   randomProb,
-} from 'common/random';
-import { Component } from 'react';
-import { useDispatch } from 'tgui/backend';
+} from 'tgui-core/random';
 
 import { resolveAsset } from '../assets';
 import { backendSuspendStart, useBackend } from '../backend';
-import { Icon, KeyListener } from '../components';
-import { globalEvents, KeyEvent } from '../events';
 import { Window } from '../layouts';
 
 type Bait = {
diff --git a/tgui/packages/tgui/interfaces/FoodPreferences.tsx b/tgui/packages/tgui/interfaces/FoodPreferences.tsx
index 85fdbe1451f..e7bfc5c2ea4 100644
--- a/tgui/packages/tgui/interfaces/FoodPreferences.tsx
+++ b/tgui/packages/tgui/interfaces/FoodPreferences.tsx
@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
 import {
   Box,
+  Button,
   Dimmer,
   Divider,
   Icon,
@@ -11,7 +12,6 @@ import {
 } from 'tgui-core/components';
 
 import { useBackend } from '../backend';
-import { Button } from '../components/Button';
 import { Window } from '../layouts';
 
 type Data = {
diff --git a/tgui/packages/tgui/interfaces/GlassBlowing.tsx b/tgui/packages/tgui/interfaces/GlassBlowing.tsx
index 7c0e5bd5652..5e0dee980dc 100644
--- a/tgui/packages/tgui/interfaces/GlassBlowing.tsx
+++ b/tgui/packages/tgui/interfaces/GlassBlowing.tsx
@@ -1,8 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { toFixed } from 'common/math';
-import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
 import {
   AnimatedNumber,
   Box,
@@ -12,7 +8,11 @@ import {
   Section,
   Stack,
   Table,
-} from '../components';
+} from 'tgui-core/components';
+import { toFixed } from 'tgui-core/math';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 type GlassData = {
diff --git a/tgui/packages/tgui/interfaces/InteractionMenu.tsx b/tgui/packages/tgui/interfaces/InteractionMenu.tsx
index 27605655420..a3f09b20535 100644
--- a/tgui/packages/tgui/interfaces/InteractionMenu.tsx
+++ b/tgui/packages/tgui/interfaces/InteractionMenu.tsx
@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -8,7 +7,9 @@ import {
   NoticeBox,
   Section,
   Stack,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 class Interaction {
diff --git a/tgui/packages/tgui/interfaces/KindredBook.tsx b/tgui/packages/tgui/interfaces/KindredBook.tsx
index 38820aa0f4e..d92ca61680a 100644
--- a/tgui/packages/tgui/interfaces/KindredBook.tsx
+++ b/tgui/packages/tgui/interfaces/KindredBook.tsx
@@ -1,5 +1,6 @@
+import { Collapsible, Section, Table } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Collapsible, Section, Table } from '../components';
 import { Window } from '../layouts';
 
 type Data = {
diff --git a/tgui/packages/tgui/interfaces/MaturityPrompt.tsx b/tgui/packages/tgui/interfaces/MaturityPrompt.tsx
index cec4963d975..e6b9e892d6b 100644
--- a/tgui/packages/tgui/interfaces/MaturityPrompt.tsx
+++ b/tgui/packages/tgui/interfaces/MaturityPrompt.tsx
@@ -1,6 +1,4 @@
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -8,7 +6,9 @@ import {
   NumberInput,
   Section,
   Stack,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 import { Loader } from './common/Loader';
 
diff --git a/tgui/packages/tgui/interfaces/MicrofusionGunControl.jsx b/tgui/packages/tgui/interfaces/MicrofusionGunControl.jsx
index f46a971c1fa..f7444c4f522 100644
--- a/tgui/packages/tgui/interfaces/MicrofusionGunControl.jsx
+++ b/tgui/packages/tgui/interfaces/MicrofusionGunControl.jsx
@@ -1,7 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { toFixed } from 'common/math';
-
-import { useBackend } from '../backend';
 import {
   Button,
   LabeledList,
@@ -9,7 +6,10 @@ import {
   ProgressBar,
   Section,
   Stack,
-} from '../components';
+} from 'tgui-core/components';
+import { toFixed } from 'tgui-core/math';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const MicrofusionGunControl = (props) => {
diff --git a/tgui/packages/tgui/interfaces/MilkingMachine.jsx b/tgui/packages/tgui/interfaces/MilkingMachine.jsx
index 64aeb4efedc..a4ef74b9805 100644
--- a/tgui/packages/tgui/interfaces/MilkingMachine.jsx
+++ b/tgui/packages/tgui/interfaces/MilkingMachine.jsx
@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { Box, Button, Section, Stack } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Box, Button, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 let palette;
diff --git a/tgui/packages/tgui/interfaces/Minesweeper.jsx b/tgui/packages/tgui/interfaces/Minesweeper.jsx
index 0e09303d493..aa5ef55fe94 100644
--- a/tgui/packages/tgui/interfaces/Minesweeper.jsx
+++ b/tgui/packages/tgui/interfaces/Minesweeper.jsx
@@ -1,6 +1,7 @@
+import { Box, Button, Knob, Section } from 'tgui-core/components';
+
 import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
-import { Box, Button, Knob, Section } from '../components';
 import { Window } from '../layouts';
 
 export const Minesweeper = (props, context) => {
diff --git a/tgui/packages/tgui/interfaces/NifPanel.jsx b/tgui/packages/tgui/interfaces/NifPanel.jsx
index 6f3adfb7138..e50893ceb7a 100644
--- a/tgui/packages/tgui/interfaces/NifPanel.jsx
+++ b/tgui/packages/tgui/interfaces/NifPanel.jsx
@@ -1,7 +1,5 @@
 // THIS IS A SKYRAT UI FILE
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   BlockQuote,
   Box,
@@ -15,8 +13,9 @@ import {
   ProgressBar,
   Section,
   Table,
-} from '../components';
-import { TableCell, TableRow } from '../components/Table';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const NifPanel = (props) => {
@@ -83,8 +82,8 @@ export const NifPanel = (props) => {
                         }
                       >
                         <Table>
-                          <TableRow>
-                            <TableCell>
+                          <Table.Row>
+                            <Table.Cell>
                               <Button
                                 icon="bolt"
                                 color="yellow"
@@ -95,8 +94,8 @@ export const NifPanel = (props) => {
                                 : ' ' +
                                   (nifsoft.activation_cost / max_power) * 100 +
                                   '% per activation'}
-                            </TableCell>
-                            <TableCell>
+                            </Table.Cell>
+                            <Table.Cell>
                               <Button
                                 icon="battery-half"
                                 color="orange"
@@ -108,8 +107,8 @@ export const NifPanel = (props) => {
                                 : ' ' +
                                   (nifsoft.active_cost / max_power) * 100 +
                                   '% consumed while active'}
-                            </TableCell>
-                            <TableCell>
+                            </Table.Cell>
+                            <Table.Cell>
                               <Button
                                 icon="exclamation"
                                 color={nifsoft.active ? 'green' : 'red'}
@@ -119,8 +118,8 @@ export const NifPanel = (props) => {
                               {nifsoft.active
                                 ? ' The NIFSoft is active!'
                                 : ' The NIFSoft is inactive!'}
-                            </TableCell>
-                          </TableRow>
+                            </Table.Cell>
+                          </Table.Row>
                         </Table>
                         <br />
                         <BlockQuote preserveWhitespace>
diff --git a/tgui/packages/tgui/interfaces/NifSoulPoem.jsx b/tgui/packages/tgui/interfaces/NifSoulPoem.jsx
index 9e397962c59..a0adff60ba5 100644
--- a/tgui/packages/tgui/interfaces/NifSoulPoem.jsx
+++ b/tgui/packages/tgui/interfaces/NifSoulPoem.jsx
@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend } from '../backend';
 import {
   BlockQuote,
   Box,
@@ -9,7 +8,9 @@ import {
   Input,
   LabeledList,
   Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const NifSoulPoem = (props) => {
diff --git a/tgui/packages/tgui/interfaces/NtosNifsoftCatalog.jsx b/tgui/packages/tgui/interfaces/NtosNifsoftCatalog.jsx
index cc54bb45883..dbcddf5b304 100644
--- a/tgui/packages/tgui/interfaces/NtosNifsoftCatalog.jsx
+++ b/tgui/packages/tgui/interfaces/NtosNifsoftCatalog.jsx
@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend, useSharedState } from '../backend';
 import {
   BlockQuote,
   Box,
@@ -10,7 +9,9 @@ import {
   LabeledList,
   Section,
   Tabs,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend, useSharedState } from '../backend';
 import { NtosWindow } from '../layouts';
 
 export const NtosNifsoftCatalog = (props) => {
diff --git a/tgui/packages/tgui/interfaces/OpposingForcePanel.jsx b/tgui/packages/tgui/interfaces/OpposingForcePanel.jsx
index f267dc29fe2..049d75e7a08 100644
--- a/tgui/packages/tgui/interfaces/OpposingForcePanel.jsx
+++ b/tgui/packages/tgui/interfaces/OpposingForcePanel.jsx
@@ -1,8 +1,5 @@
 // THIS IS A SKYRAT UI FILE
-import { round } from 'common/math';
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -16,7 +13,10 @@ import {
   Stack,
   Tabs,
   TextArea,
-} from '../components';
+} from 'tgui-core/components';
+import { round } from 'tgui-core/math';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const OpposingForcePanel = (props) => {
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/bubber/character_voice.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/bubber/character_voice.tsx
index 8e6344c803f..a8e3d9b6c58 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/bubber/character_voice.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/character_preferences/bubber/character_voice.tsx
@@ -1,4 +1,5 @@
-import { Button, Stack } from '../../../../../../components';
+import { Button, Stack } from 'tgui-core/components';
+
 import {
   CheckboxInput,
   Feature,
diff --git a/tgui/packages/tgui/interfaces/RBMK2.tsx b/tgui/packages/tgui/interfaces/RBMK2.tsx
index c379db0b8eb..a002df24335 100644
--- a/tgui/packages/tgui/interfaces/RBMK2.tsx
+++ b/tgui/packages/tgui/interfaces/RBMK2.tsx
@@ -1,13 +1,13 @@
-import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
 import {
   Button,
   LabeledList,
   NoticeBox,
   ProgressBar,
   Section,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 type ReactorInfo = {
diff --git a/tgui/packages/tgui/interfaces/RecordManifest.jsx b/tgui/packages/tgui/interfaces/RecordManifest.jsx
index 2abc482513d..b32b634df17 100644
--- a/tgui/packages/tgui/interfaces/RecordManifest.jsx
+++ b/tgui/packages/tgui/interfaces/RecordManifest.jsx
@@ -1,8 +1,8 @@
 // THIS IS A SKYRAT UI FILE
-import { classes } from 'common/react';
+import { Button, Icon, Section, Table, Tooltip } from 'tgui-core/components';
+import { classes } from 'tgui-core/react';
 
 import { useBackend } from '../backend';
-import { Button, Icon, Section, Table, Tooltip } from '../components';
 import { Window } from '../layouts';
 
 const commandJobs = [
diff --git a/tgui/packages/tgui/interfaces/ServerControlPanel.jsx b/tgui/packages/tgui/interfaces/ServerControlPanel.jsx
index 5e6d9c82f92..3e1901fbe06 100644
--- a/tgui/packages/tgui/interfaces/ServerControlPanel.jsx
+++ b/tgui/packages/tgui/interfaces/ServerControlPanel.jsx
@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { Button, LabeledList, NoticeBox, Section } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Button, LabeledList, NoticeBox, Section } from '../components';
 import { Window } from '../layouts';
 
 export const MicrofusionGunControl = (props) => {
diff --git a/tgui/packages/tgui/interfaces/Signalvib.jsx b/tgui/packages/tgui/interfaces/Signalvib.jsx
index 192233cc40c..79f55ab67b4 100644
--- a/tgui/packages/tgui/interfaces/Signalvib.jsx
+++ b/tgui/packages/tgui/interfaces/Signalvib.jsx
@@ -1,8 +1,13 @@
 // THIS IS A SKYRAT UI FILE
-import { toFixed } from 'common/math';
+import {
+  Button,
+  LabeledList,
+  NumberInput,
+  Section,
+} from 'tgui-core/components';
+import { toFixed } from 'tgui-core/math';
 
 import { useBackend } from '../backend';
-import { Button, LabeledList, NumberInput, Section } from '../components';
 import { Window } from '../layouts';
 
 export const Signalvib = (props) => {
diff --git a/tgui/packages/tgui/interfaces/SiliconJobManager.jsx b/tgui/packages/tgui/interfaces/SiliconJobManager.jsx
index 1709baa0f24..16f5b72e302 100644
--- a/tgui/packages/tgui/interfaces/SiliconJobManager.jsx
+++ b/tgui/packages/tgui/interfaces/SiliconJobManager.jsx
@@ -1,5 +1,6 @@
+import { Button, NoticeBox, Section, Table } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Box, Button, Dimmer, NoticeBox, Section, Table } from '../components';
 import { NtosWindow } from '../layouts';
 
 export const SiliconJobManager = (props) => {
diff --git a/tgui/packages/tgui/interfaces/Soulcatcher.jsx b/tgui/packages/tgui/interfaces/Soulcatcher.jsx
index 24f07e0e567..6f95da48d0d 100644
--- a/tgui/packages/tgui/interfaces/Soulcatcher.jsx
+++ b/tgui/packages/tgui/interfaces/Soulcatcher.jsx
@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend } from '../backend';
 import {
   BlockQuote,
   Box,
@@ -10,7 +9,9 @@ import {
   LabeledList,
   ProgressBar,
   Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const Soulcatcher = (props) => {
diff --git a/tgui/packages/tgui/interfaces/SoulcatcherUser.jsx b/tgui/packages/tgui/interfaces/SoulcatcherUser.jsx
index c1e83b953f6..5de89158e28 100644
--- a/tgui/packages/tgui/interfaces/SoulcatcherUser.jsx
+++ b/tgui/packages/tgui/interfaces/SoulcatcherUser.jsx
@@ -1,5 +1,4 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend } from '../backend';
 import {
   BlockQuote,
   Box,
@@ -9,7 +8,9 @@ import {
   Flex,
   LabeledList,
   Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 export const SoulcatcherUser = (props) => {
diff --git a/tgui/packages/tgui/interfaces/StoryManager.tsx b/tgui/packages/tgui/interfaces/StoryManager.tsx
index fef496464eb..4ed9e6b2285 100644
--- a/tgui/packages/tgui/interfaces/StoryManager.tsx
+++ b/tgui/packages/tgui/interfaces/StoryManager.tsx
@@ -1,12 +1,13 @@
 // THIS IS A SKYRAT UI FILE
-import { useBackend, useLocalState } from '../backend';
 import {
   Button,
   Collapsible,
   LabeledList,
   Section,
   TextArea,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
 
 type StoryManagerData = {
diff --git a/tgui/packages/tgui/interfaces/SyndContractor.jsx b/tgui/packages/tgui/interfaces/SyndContractor.jsx
index 5daa40b1195..3ffa989c1bc 100644
--- a/tgui/packages/tgui/interfaces/SyndContractor.jsx
+++ b/tgui/packages/tgui/interfaces/SyndContractor.jsx
@@ -1,11 +1,8 @@
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
   Flex,
-  Grid,
   Icon,
   LabeledList,
   Modal,
@@ -14,9 +11,11 @@ import {
   Stack,
   Table,
   Tabs,
-} from '../components';
-import { FakeTerminal } from '../components/FakeTerminal';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { NtosWindow } from '../layouts';
+import { FakeTerminal } from './common/FakeTerminal';
 
 const CONTRACT_STATUS_INACTIVE = 1;
 const CONTRACT_STATUS_ACTIVE = 2;
@@ -287,15 +286,13 @@ const ContractsTab = (props) => {
                 </>
               }
             >
-              <Grid>
-                <Grid.Column>{contract.message}</Grid.Column>
-                <Grid.Column size={0.5}>
-                  <Box bold mb={1}>
-                    Dropoff Location:
-                  </Box>
-                  <Box>{contract.dropoff}</Box>
-                </Grid.Column>
-              </Grid>
+              <NoticeBox>
+                <box>{contract.message}</box>
+                <Box bold mb={1}>
+                  Dropoff Location:
+                </Box>
+                <Box>{contract.dropoff}</Box>
+              </NoticeBox>
             </Section>
           );
         })}
diff --git a/tgui/packages/tgui/interfaces/TimeClock.jsx b/tgui/packages/tgui/interfaces/TimeClock.jsx
index dc8f0e8165b..13df3385704 100644
--- a/tgui/packages/tgui/interfaces/TimeClock.jsx
+++ b/tgui/packages/tgui/interfaces/TimeClock.jsx
@@ -1,6 +1,7 @@
 // THIS IS A SKYRAT UI FILE
+import { Box, Button, LabeledList, Section } from 'tgui-core/components';
+
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 
 export const TimeClock = (props) => {
diff --git a/tgui/packages/tgui/interfaces/VorePanel/AppearanceDisplay.tsx b/tgui/packages/tgui/interfaces/VorePanel/AppearanceDisplay.tsx
index c1a55fb9af7..3b56e215aba 100644
--- a/tgui/packages/tgui/interfaces/VorePanel/AppearanceDisplay.tsx
+++ b/tgui/packages/tgui/interfaces/VorePanel/AppearanceDisplay.tsx
@@ -1,7 +1,7 @@
-import { BooleanLike } from 'common/react';
 import { useEffect, useRef, useState } from 'react';
 import { Color } from 'tgui-core/color';
 import { Box, Icon, Image } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
 
 /**
  * Waits until two XMLHttpRequests have loaded at iconSrc before calling cb().
diff --git a/tgui/packages/tgui/interfaces/VorePanel/BellyUI.tsx b/tgui/packages/tgui/interfaces/VorePanel/BellyUI.tsx
index ae7243470b5..71faecd6977 100644
--- a/tgui/packages/tgui/interfaces/VorePanel/BellyUI.tsx
+++ b/tgui/packages/tgui/interfaces/VorePanel/BellyUI.tsx
@@ -1,4 +1,3 @@
-import { toFixed } from 'common/math';
 import React, { useEffect, useState } from 'react';
 import { useBackend, useSharedState } from 'tgui/backend';
 import {
@@ -15,8 +14,9 @@ import {
   Stack,
   TextArea,
 } from 'tgui-core/components';
-
 import { FitText } from 'tgui-core/components';
+import { toFixed } from 'tgui-core/math';
+
 import { AppearanceDisplay, BellyFullscreenIcon } from './AppearanceDisplay';
 import * as types from './types';
 
diff --git a/tgui/packages/tgui/interfaces/ZubbersCharacterDirectory.jsx b/tgui/packages/tgui/interfaces/ZubbersCharacterDirectory.jsx
index 80f61aa885d..e7969f0918e 100644
--- a/tgui/packages/tgui/interfaces/ZubbersCharacterDirectory.jsx
+++ b/tgui/packages/tgui/interfaces/ZubbersCharacterDirectory.jsx
@@ -1,6 +1,4 @@
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   Button,
   Icon,
@@ -9,7 +7,9 @@ import {
   Section,
   Table,
   Tooltip,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 const erpTagColor = {
diff --git a/tgui/packages/tgui/interfaces/common/Interactive.tsx b/tgui/packages/tgui/interfaces/common/Interactive.tsx
new file mode 100644
index 00000000000..cfeefa334a2
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/common/Interactive.tsx
@@ -0,0 +1,136 @@
+/**
+ * MIT License
+ * https://github.com/omgovich/react-colorful/
+ *
+ * Copyright (c) 2020 Vlad Shilov <omgovich@ya.ru>
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ * THIS IS A BUBBER FILE
+ */
+
+import React, { Component, createRef, ReactNode, RefObject } from 'react';
+import { clamp } from 'tgui-core/math';
+
+export interface Interaction {
+  left: number;
+  top: number;
+}
+
+// Finds the proper window object to fix iframe embedding issues
+const getParentWindow = (node?: HTMLDivElement | null): Window => {
+  return (node && node.ownerDocument.defaultView) || window;
+};
+
+// Returns a relative position of the pointer inside the node's bounding box
+const getRelativePosition = (
+  node: HTMLDivElement,
+  event: MouseEvent,
+): Interaction => {
+  const rect = node.getBoundingClientRect();
+  const parentWindow = getParentWindow(node);
+
+  const offsetX = event.pageX - (rect.left + parentWindow.pageXOffset);
+  const offsetY = event.pageY - (rect.top + parentWindow.pageYOffset);
+
+  return {
+    left: clamp(offsetX / rect.width, 0, 1),
+    top: clamp(offsetY / rect.height, 0, 1),
+  };
+};
+
+export interface InteractiveProps {
+  onMove: (interaction: Interaction) => void;
+  onKey: (offset: Interaction) => void;
+  children: ReactNode; // Change from ReactNode[] to ReactNode
+  style?: React.CSSProperties;
+}
+
+export class Interactive extends Component<InteractiveProps> {
+  containerRef: RefObject<HTMLDivElement>;
+
+  constructor(props: InteractiveProps) {
+    super(props);
+    this.containerRef = createRef();
+  }
+
+  handleMoveStart = (event: React.MouseEvent<HTMLDivElement>) => {
+    const el = this.containerRef?.current;
+    if (!el) return;
+
+    // Prevent text selection
+    event.preventDefault();
+    el.focus();
+    this.props.onMove(getRelativePosition(el, event.nativeEvent));
+    this.toggleDocumentEvents(true);
+  };
+
+  handleMove = (event: MouseEvent) => {
+    event.preventDefault();
+
+    const isDown = event.buttons > 0;
+
+    if (isDown && this.containerRef?.current) {
+      this.props.onMove(getRelativePosition(this.containerRef.current, event));
+    } else {
+      this.toggleDocumentEvents(false);
+    }
+  };
+
+  handleMoveEnd = () => {
+    this.toggleDocumentEvents(false);
+  };
+
+  handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const keyCode = event.which || event.keyCode;
+
+    if (keyCode < 37 || keyCode > 40) return;
+    event.preventDefault();
+    this.props.onKey({
+      left: keyCode === 39 ? 0.05 : keyCode === 37 ? -0.05 : 0,
+      top: keyCode === 40 ? 0.05 : keyCode === 38 ? -0.05 : 0,
+    });
+  };
+
+  toggleDocumentEvents(state?: boolean) {
+    const el = this.containerRef?.current;
+    const parentWindow = getParentWindow(el);
+
+    const toggleEvent = state
+      ? parentWindow.addEventListener
+      : parentWindow.removeEventListener;
+    toggleEvent('mousemove', this.handleMove);
+    toggleEvent('mouseup', this.handleMoveEnd);
+  }
+
+  componentDidMount() {
+    this.toggleDocumentEvents(true);
+  }
+
+  componentWillUnmount() {
+    this.toggleDocumentEvents(false);
+  }
+
+  render() {
+    const { style, children, ...rest } = this.props;
+    return (
+      <div
+        {...rest}
+        style={style}
+        ref={this.containerRef}
+        onMouseDown={this.handleMoveStart}
+        className="react-colorful__interactive"
+        onKeyDown={this.handleKeyDown}
+        tabIndex={0}
+        role="slider"
+      >
+        {children}
+      </div>
+    );
+  }
+}
diff --git a/tgui/packages/tgui/interfaces/common/Pointer.tsx b/tgui/packages/tgui/interfaces/common/Pointer.tsx
index 1e52cec4559..0e72de0e97a 100644
--- a/tgui/packages/tgui/interfaces/common/Pointer.tsx
+++ b/tgui/packages/tgui/interfaces/common/Pointer.tsx
@@ -12,8 +12,8 @@
  * SOFTWARE.
  */
 
-import { classes } from 'common/react';
 import React from 'react';
+import { classes } from 'tgui-core/react';
 
 interface PointerProps {
   className?: string;
diff --git a/tgui/packages/tgui/styles/themes/clockwork.scss b/tgui/packages/tgui/styles/themes/clockwork.scss
index abfcc0558ca..19c58b7ba44 100644
--- a/tgui/packages/tgui/styles/themes/clockwork.scss
+++ b/tgui/packages/tgui/styles/themes/clockwork.scss
@@ -21,7 +21,7 @@
 
   // Components
   @include meta.load-css(
-    'pkg:tgui-styles/components/Button',
+    '~tgui-core/styles/components/Button',
     $with: (
       'color-default': colors.$primary,
       'color-disabled': hsl(46, 26%, 32%),
@@ -30,21 +30,21 @@
       'color-danger': hsl(60, 100%, 50%)
     )
   );
-  @include meta.load-css('pkg:tgui-styles/components/Input');
+  @include meta.load-css('~tgui-core/styles/components/Input');
   @include meta.load-css(
-    'pkg:tgui-styles/components/Tooltip',
+    '~tgui-core/styles/components/Tooltip',
     $with: ('background-color': #2d1400)
   );
   @include meta.load-css(
-    'pkg:tgui-styles/components/Section',
+    '~tgui-core/styles/components/Section',
     $with: ('separator-color': #d6ca85)
   );
   @include meta.load-css(
-    'pkg:tgui-styles/components/Divider',
+    '~tgui-core/styles/components/Divider',
     $with: ('color': #d6ca85)
   );
   @include meta.load-css(
-    'pkg:tgui-styles/components/ProgressBar',
+    '~tgui-core/styles/components/ProgressBar',
     $with: ('background-color': rgba(0, 0, 0, 0.5))
   );