diff --git a/tgui/packages/tgui/interfaces/Achievements.js b/tgui/packages/tgui/interfaces/Achievements.js
index 464708d248..512c39fb59 100644
--- a/tgui/packages/tgui/interfaces/Achievements.js
+++ b/tgui/packages/tgui/interfaces/Achievements.js
@@ -12,7 +12,11 @@ export const Achievements = (props, context) => {
   const achievements = data.achievements
     .filter(x => x.category === selectedCategory);
   return (
-    <Window resizable>
+    <Window
+      title="Achievements"
+      width={540}
+      height={680}
+      resizable>
       <Window.Content scrollable>
         <Tabs>
           {categories.map(category => (
diff --git a/tgui/packages/tgui/interfaces/AiAirlock.js b/tgui/packages/tgui/interfaces/AiAirlock.js
index 4886e71034..a48ce24402 100644
--- a/tgui/packages/tgui/interfaces/AiAirlock.js
+++ b/tgui/packages/tgui/interfaces/AiAirlock.js
@@ -24,7 +24,9 @@ export const AiAirlock = (props, context) => {
   const statusBackup = dangerMap[data.power.backup] || dangerMap[0];
   const statusElectrify = dangerMap[data.shock] || dangerMap[0];
   return (
-    <Window>
+    <Window
+      width={500}
+      height={390}>
       <Window.Content>
         <Section title="Power Status">
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/AiRestorer.js b/tgui/packages/tgui/interfaces/AiRestorer.js
index e91d392d10..9dfacda0c8 100644
--- a/tgui/packages/tgui/interfaces/AiRestorer.js
+++ b/tgui/packages/tgui/interfaces/AiRestorer.js
@@ -5,7 +5,10 @@ import { Window } from '../layouts';
 
 export const AiRestorer = () => {
   return (
-    <Window resizable>
+    <Window
+      width={370}
+      height={360}
+      resizable>
       <Window.Content scrollable>
         <AiRestorerContent />
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/AirAlarm.js b/tgui/packages/tgui/interfaces/AirAlarm.js
index c6f440985a..e669d8d948 100644
--- a/tgui/packages/tgui/interfaces/AirAlarm.js
+++ b/tgui/packages/tgui/interfaces/AirAlarm.js
@@ -6,12 +6,16 @@ import { Box, Button, LabeledList, NumberInput, Section } from '../components';
 import { getGasLabel } from '../constants';
 import { Window } from '../layouts';
 import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
+import { Vent, Scrubber } from './common/AtmosControls';
 
 export const AirAlarm = (props, context) => {
   const { act, data } = useBackend(context);
   const locked = data.locked && !data.siliconUser;
   return (
-    <Window resizable>
+    <Window
+      width={440}
+      height={650}
+      resizable>
       <Window.Content scrollable>
         <InterfaceLockNoticeBox />
         <AirAlarmStatus />
@@ -202,108 +206,6 @@ const AirAlarmControlVents = (props, context) => {
   ));
 };
 
-const Vent = (props, context) => {
-  const { vent } = props;
-  const { act } = useBackend(context);
-  const {
-    id_tag,
-    long_name,
-    power,
-    checks,
-    excheck,
-    incheck,
-    direction,
-    external,
-    internal,
-    extdefault,
-    intdefault,
-  } = vent;
-  return (
-    <Section
-      level={2}
-      title={decodeHtmlEntities(long_name)}
-      buttons={(
-        <Button
-          icon={power ? 'power-off' : 'times'}
-          selected={power}
-          content={power ? 'On' : 'Off'}
-          onClick={() => act('power', {
-            id_tag,
-            val: Number(!power),
-          })} />
-      )}>
-      <LabeledList>
-        <LabeledList.Item label="Mode">
-          {direction === 'release' ? 'Pressurizing' : 'Releasing'}
-        </LabeledList.Item>
-        <LabeledList.Item label="Pressure Regulator">
-          <Button
-            icon="sign-in-alt"
-            content="Internal"
-            selected={incheck}
-            onClick={() => act('incheck', {
-              id_tag,
-              val: checks,
-            })} />
-          <Button
-            icon="sign-out-alt"
-            content="External"
-            selected={excheck}
-            onClick={() => act('excheck', {
-              id_tag,
-              val: checks,
-            })} />
-        </LabeledList.Item>
-        {!!incheck && (
-          <LabeledList.Item label="Internal Target">
-            <NumberInput
-              value={Math.round(internal)}
-              unit="kPa"
-              width="75px"
-              minValue={0}
-              step={10}
-              maxValue={5066}
-              onChange={(e, value) => act('set_internal_pressure', {
-                id_tag,
-                value,
-              })} />
-            <Button
-              icon="undo"
-              disabled={intdefault}
-              content="Reset"
-              onClick={() => act('reset_internal_pressure', {
-                id_tag,
-              })} />
-          </LabeledList.Item>
-        )}
-        {!!excheck && (
-          <LabeledList.Item label="External Target">
-            <NumberInput
-              value={Math.round(external)}
-              unit="kPa"
-              width="75px"
-              minValue={0}
-              step={10}
-              maxValue={5066}
-              onChange={(e, value) => act('set_external_pressure', {
-                id_tag,
-                value,
-              })} />
-            <Button
-              icon="undo"
-              disabled={extdefault}
-              content="Reset"
-              onClick={() => act('reset_external_pressure', {
-                id_tag,
-              })} />
-          </LabeledList.Item>
-        )}
-      </LabeledList>
-    </Section>
-  );
-};
-
-
 //  Scrubbers
 // --------------------------------------------------------
 
@@ -320,71 +222,6 @@ const AirAlarmControlScrubbers = (props, context) => {
   ));
 };
 
-const Scrubber = (props, context) => {
-  const { scrubber } = props;
-  const { act } = useBackend(context);
-  const {
-    long_name,
-    power,
-    scrubbing,
-    id_tag,
-    widenet,
-    filter_types,
-  } = scrubber;
-  return (
-    <Section
-      level={2}
-      title={decodeHtmlEntities(long_name)}
-      buttons={(
-        <Button
-          icon={power ? 'power-off' : 'times'}
-          content={power ? 'On' : 'Off'}
-          selected={power}
-          onClick={() => act('power', {
-            id_tag,
-            val: Number(!power),
-          })} />
-      )}>
-      <LabeledList>
-        <LabeledList.Item label="Mode">
-          <Button
-            icon={scrubbing ? 'filter' : 'sign-in-alt'}
-            color={scrubbing || 'danger'}
-            content={scrubbing ? 'Scrubbing' : 'Siphoning'}
-            onClick={() => act('scrubbing', {
-              id_tag,
-              val: Number(!scrubbing),
-            })} />
-          <Button
-            icon={widenet ? 'expand' : 'compress'}
-            selected={widenet}
-            content={widenet ? 'Expanded range' : 'Normal range'}
-            onClick={() => act('widenet', {
-              id_tag,
-              val: Number(!widenet),
-            })} />
-        </LabeledList.Item>
-        <LabeledList.Item label="Filters">
-          {scrubbing
-            && filter_types.map(filter => (
-              <Button key={filter.gas_id}
-                icon={filter.enabled ? 'check-square-o' : 'square-o'}
-                content={getGasLabel(filter.gas_id, filter.gas_name)}
-                title={filter.gas_name}
-                selected={filter.enabled}
-                onClick={() => act('toggle_filter', {
-                  id_tag,
-                  val: filter.gas_id,
-                })} />
-            ))
-            || 'N/A'}
-        </LabeledList.Item>
-      </LabeledList>
-    </Section>
-  );
-};
-
-
 //  Modes
 // --------------------------------------------------------
 
diff --git a/tgui/packages/tgui/interfaces/AirlockElectronics.js b/tgui/packages/tgui/interfaces/AirlockElectronics.js
index 1575bdeb45..a448f55e9b 100644
--- a/tgui/packages/tgui/interfaces/AirlockElectronics.js
+++ b/tgui/packages/tgui/interfaces/AirlockElectronics.js
@@ -12,7 +12,9 @@ export const AirlockElectronics = (props, context) => {
   const regions = data.regions || [];
   const accesses = data.accesses || [];
   return (
-    <Window>
+    <Window
+      width={420}
+      height={485}>
       <Window.Content>
         <Section title="Main">
           <LabeledList>
@@ -34,14 +36,14 @@ export const AirlockElectronics = (props, context) => {
                 })} />
               <Button
                 icon={unres_direction & 2 ? 'check-square-o' : 'square-o'}
-                content="East"
+                content="South"
                 selected={unres_direction & 2}
                 onClick={() => act('direc_set', {
                   unres_direction: '2',
                 })} />
               <Button
                 icon={unres_direction & 4 ? 'check-square-o' : 'square-o'}
-                content="South"
+                content="East"
                 selected={unres_direction & 4}
                 onClick={() => act('direc_set', {
                   unres_direction: '4',
diff --git a/tgui/packages/tgui/interfaces/Apc.js b/tgui/packages/tgui/interfaces/Apc.js
index 72cee0bf83..60a11789bc 100644
--- a/tgui/packages/tgui/interfaces/Apc.js
+++ b/tgui/packages/tgui/interfaces/Apc.js
@@ -6,7 +6,10 @@ import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
 
 export const Apc = (props, context) => {
   return (
-    <Window resizable>
+    <Window
+      width={450}
+      height={445}
+      resizable>
       <Window.Content scrollable>
         <ApcContent />
       </Window.Content>
@@ -82,7 +85,6 @@ const ApcContent = (props, context) => {
       </NoticeBox>
     );
   }
-
   return (
     <Fragment>
       <InterfaceLockNoticeBox />
@@ -182,32 +184,34 @@ const ApcContent = (props, context) => {
               onClick={() => act('overload')} />
           </Fragment>
         )}>
-        <LabeledList.Item
-          label="Cover Lock"
-          buttons={(
-            <Button
-              icon={data.coverLocked ? 'lock' : 'unlock'}
-              content={data.coverLocked ? 'Engaged' : 'Disengaged'}
-              disabled={locked}
-              onClick={() => act('cover')} />
-          )} />
-        <LabeledList.Item
-          label="Emergency Lighting"
-          buttons={(
-            <Button
-              icon="lightbulb-o"
-              content={data.emergencyLights ? 'Enabled' : 'Disabled'}
-              disabled={locked}
-              onClick={() => act('emergency_lighting')} />
-          )} />
-        <LabeledList.Item
-          label="Night Shift Lighting"
-          buttons={(
-            <Button
-              icon="lightbulb-o"
-              content={data.nightshiftLights ? 'Enabled' : 'Disabled'}
-              onClick={() => act('toggle_nightshift')} />
-          )} />
+        <LabeledList>
+          <LabeledList.Item
+            label="Cover Lock"
+            buttons={(
+              <Button
+                icon={data.coverLocked ? 'lock' : 'unlock'}
+                content={data.coverLocked ? 'Engaged' : 'Disengaged'}
+                disabled={locked}
+                onClick={() => act('cover')} />
+            )} />
+          <LabeledList.Item
+            label="Emergency Lighting"
+            buttons={(
+              <Button
+                icon="lightbulb-o"
+                content={data.emergencyLights ? 'Enabled' : 'Disabled'}
+                disabled={locked}
+                onClick={() => act('emergency_lighting')} />
+            )} />
+          <LabeledList.Item
+            label="Night Shift Lighting"
+            buttons={(
+              <Button
+                icon="lightbulb-o"
+                content={data.nightshiftLights ? 'Enabled' : 'Disabled'}
+                onClick={() => act('toggle_nightshift')} />
+            )} />
+        </LabeledList>
       </Section>
     </Fragment>
   );
diff --git a/tgui/packages/tgui/interfaces/AtmosAlertConsole.js b/tgui/packages/tgui/interfaces/AtmosAlertConsole.js
index 58d4cc7456..1d55ccf595 100644
--- a/tgui/packages/tgui/interfaces/AtmosAlertConsole.js
+++ b/tgui/packages/tgui/interfaces/AtmosAlertConsole.js
@@ -7,7 +7,10 @@ export const AtmosAlertConsole = (props, context) => {
   const priorityAlerts = data.priority || [];
   const minorAlerts = data.minor || [];
   return (
-    <Window resizable>
+    <Window
+      width={350}
+      height={300}
+      resizable>
       <Window.Content scrollable>
         <Section title="Alarms">
           <ul>
@@ -25,7 +28,7 @@ export const AtmosAlertConsole = (props, context) => {
                   onClick={() => act('clear', { zone: alert })} />
               </li>
             ))}
-            {minorAlerts.length > 0 && (
+            {minorAlerts.length === 0 && (
               <li className="color-good">
                 No Minor Alerts
               </li>
diff --git a/tgui/packages/tgui/interfaces/AtmosControlConsole.js b/tgui/packages/tgui/interfaces/AtmosControlConsole.js
index 7a35db6870..454866aa2f 100644
--- a/tgui/packages/tgui/interfaces/AtmosControlConsole.js
+++ b/tgui/packages/tgui/interfaces/AtmosControlConsole.js
@@ -8,7 +8,10 @@ export const AtmosControlConsole = (props, context) => {
   const { act, data } = useBackend(context);
   const sensors = data.sensors || [];
   return (
-    <Window resizable>
+    <Window
+      width={500}
+      height={315}
+      resizable>
       <Window.Content scrollable>
         <Section
           title={!!data.tank && sensors[0]?.long_name}>
diff --git a/tgui/packages/tgui/interfaces/AtmosFilter.js b/tgui/packages/tgui/interfaces/AtmosFilter.js
index 1bc7e8f63b..8b382cbad9 100644
--- a/tgui/packages/tgui/interfaces/AtmosFilter.js
+++ b/tgui/packages/tgui/interfaces/AtmosFilter.js
@@ -7,7 +7,9 @@ export const AtmosFilter = (props, context) => {
   const { act, data } = useBackend(context);
   const filterTypes = data.filter_types || [];
   return (
-    <Window>
+    <Window
+      width={390}
+      height={187}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/AtmosMixer.js b/tgui/packages/tgui/interfaces/AtmosMixer.js
index 067118dea1..9ac9dbb878 100644
--- a/tgui/packages/tgui/interfaces/AtmosMixer.js
+++ b/tgui/packages/tgui/interfaces/AtmosMixer.js
@@ -5,7 +5,9 @@ import { Window } from '../layouts';
 export const AtmosMixer = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      width={370}
+      height={165}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/AtmosPump.js b/tgui/packages/tgui/interfaces/AtmosPump.js
index ec3285cd44..3d3a7de10c 100644
--- a/tgui/packages/tgui/interfaces/AtmosPump.js
+++ b/tgui/packages/tgui/interfaces/AtmosPump.js
@@ -5,7 +5,9 @@ import { Window } from '../layouts';
 export const AtmosPump = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      width={335}
+      height={115}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/AutomatedAnnouncement.js b/tgui/packages/tgui/interfaces/AutomatedAnnouncement.js
index d7b517d961..0baea4de97 100644
--- a/tgui/packages/tgui/interfaces/AutomatedAnnouncement.js
+++ b/tgui/packages/tgui/interfaces/AutomatedAnnouncement.js
@@ -17,7 +17,10 @@ export const AutomatedAnnouncement = (props, context) => {
     newhead,
   } = data;
   return (
-    <Window>
+    <Window
+      title="Automated Announcement System"
+      width={500}
+      height={225}>
       <Window.Content>
         <Section
           title="Arrival Announcement"
diff --git a/tgui/packages/tgui/interfaces/BankMachine.js b/tgui/packages/tgui/interfaces/BankMachine.js
index e8c8c2f57d..f77fa087dc 100644
--- a/tgui/packages/tgui/interfaces/BankMachine.js
+++ b/tgui/packages/tgui/interfaces/BankMachine.js
@@ -10,11 +10,14 @@ export const BankMachine = (props, context) => {
     station_name,
   } = data;
   return (
-    <Window>
+    <Window
+      width={335}
+      height={160}>
       <Window.Content>
         <Section title={station_name + ' Vault'}>
           <LabeledList>
-            <LabeledList.Item label="Current Balance"
+            <LabeledList.Item
+              label="Current Balance"
               buttons={(
                 <Button
                   icon={siphoning ? 'times' : 'sync'}
diff --git a/tgui/packages/tgui/interfaces/Bepis.js b/tgui/packages/tgui/interfaces/Bepis.js
index 5f9f5d65b1..8315e4c935 100644
--- a/tgui/packages/tgui/interfaces/Bepis.js
+++ b/tgui/packages/tgui/interfaces/Bepis.js
@@ -8,7 +8,9 @@ export const Bepis = (props, context) => {
     amount,
   } = data;
   return (
-    <Window>
+    <Window
+      width={500}
+      height={480}>
       <Window.Content>
         <Section title="Business Exploration Protocol Incubation Sink">
           <Section
diff --git a/tgui/packages/tgui/interfaces/Biogenerator.js b/tgui/packages/tgui/interfaces/Biogenerator.js
index 7142cb045b..ee10920667 100644
--- a/tgui/packages/tgui/interfaces/Biogenerator.js
+++ b/tgui/packages/tgui/interfaces/Biogenerator.js
@@ -2,7 +2,7 @@ import { classes } from 'common/react';
 import { createSearch } from 'common/string';
 import { Fragment } from 'inferno';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Dimmer, Flex, Icon, Input, Section, Table, Tabs, NoticeBox, NumberInput } from '../components';
+import { Box, Button, Dimmer, Flex, Icon, Input, NoticeBox, NumberInput, Section, Table, Tabs } from '../components';
 import { formatMoney } from '../format';
 import { Window } from '../layouts';
 
@@ -15,7 +15,10 @@ export const Biogenerator = (props, context) => {
     processing,
   } = data;
   return (
-    <Window resizable>
+    <Window
+      width={550}
+      height={380}
+      resizable>
       {!!processing && (
         <Dimmer fontSize="32px">
           <Icon name="cog" spin={1} />
@@ -77,6 +80,7 @@ export const BiogeneratorContent = (props, context) => {
         <Fragment>
           Search
           <Input
+            autoFocus
             value={searchText}
             onInput={(e, value) => setSearchText(value)}
             mx={1} />
diff --git a/tgui/packages/tgui/interfaces/BlackmarketUplink.js b/tgui/packages/tgui/interfaces/BlackmarketUplink.js
index 0d51cc4c36..8cfcff5756 100644
--- a/tgui/packages/tgui/interfaces/BlackmarketUplink.js
+++ b/tgui/packages/tgui/interfaces/BlackmarketUplink.js
@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { AnimatedNumber, Box, Button, Flex, Modal, Section, Table, Tabs } from '../components';
+import { AnimatedNumber, Box, Button, Flex, Modal, Section, Tabs } from '../components';
 import { formatMoney } from '../format';
 import { Window } from '../layouts';
 
@@ -15,6 +15,8 @@ export const BlackMarketUplink = (props, context) => {
   } = data;
   return (
     <Window
+      width={600}
+      height={480}
       theme="hackerman"
       resizable>
       <ShipmentSelector />
diff --git a/tgui/packages/tgui/interfaces/BluespaceArtillery.js b/tgui/packages/tgui/interfaces/BluespaceArtillery.js
index 6d2d94f7bf..91f7c50761 100644
--- a/tgui/packages/tgui/interfaces/BluespaceArtillery.js
+++ b/tgui/packages/tgui/interfaces/BluespaceArtillery.js
@@ -12,7 +12,9 @@ export const BluespaceArtillery = (props, context) => {
     target,
   } = data;
   return (
-    <Window>
+    <Window
+      width={400}
+      height={220}>
       <Window.Content>
         {!!notice && (
           <NoticeBox>
diff --git a/tgui/packages/tgui/interfaces/BorgPanel.js b/tgui/packages/tgui/interfaces/BorgPanel.js
index 1661940196..7e7aa60d83 100644
--- a/tgui/packages/tgui/interfaces/BorgPanel.js
+++ b/tgui/packages/tgui/interfaces/BorgPanel.js
@@ -13,7 +13,11 @@ export const BorgPanel = (props, context) => {
   const ais = data.ais || [];
   const laws = data.laws || [];
   return (
-    <Window resizable>
+    <Window
+      title="Borg Panel"
+      width={700}
+      height={700}
+      resizable>
       <Window.Content scrollable>
         <Section
           title={borg.name}
diff --git a/tgui/packages/tgui/interfaces/BrigTimer.js b/tgui/packages/tgui/interfaces/BrigTimer.js
index d7292d356d..ee00abf179 100644
--- a/tgui/packages/tgui/interfaces/BrigTimer.js
+++ b/tgui/packages/tgui/interfaces/BrigTimer.js
@@ -6,7 +6,10 @@ import { Window } from '../layouts';
 export const BrigTimer = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window resizable>
+    <Window
+      width={300}
+      height={138}
+      resizable>
       <Window.Content scrollable>
         <Section
           title="Cell Timer"
diff --git a/tgui/packages/tgui/interfaces/CameraConsole.js b/tgui/packages/tgui/interfaces/CameraConsole.js
index 594de52eb2..6437769a78 100644
--- a/tgui/packages/tgui/interfaces/CameraConsole.js
+++ b/tgui/packages/tgui/interfaces/CameraConsole.js
@@ -50,7 +50,10 @@ export const CameraConsole = (props, context) => {
     nextCameraName,
   ] = prevNextCamera(cameras, activeCamera);
   return (
-    <Window resizable>
+    <Window
+      width={870}
+      height={708}
+      resizable>
       <div className="CameraConsole__left">
         <Window.Content scrollable>
           <CameraConsoleContent />
@@ -81,7 +84,6 @@ export const CameraConsole = (props, context) => {
           className="CameraConsole__map"
           params={{
             id: mapRef,
-            parent: config.window,
             type: 'map',
           }} />
       </div>
@@ -100,6 +102,7 @@ export const CameraConsoleContent = (props, context) => {
   return (
     <Fragment>
       <Input
+        autoFocus
         fluid
         mb={1}
         placeholder="Search for a camera"
diff --git a/tgui/packages/tgui/interfaces/Canister.js b/tgui/packages/tgui/interfaces/Canister.js
index e369f798cd..b94dc8ef8f 100644
--- a/tgui/packages/tgui/interfaces/Canister.js
+++ b/tgui/packages/tgui/interfaces/Canister.js
@@ -21,7 +21,9 @@ export const Canister = (props, context) => {
     restricted,
   } = data;
   return (
-    <Window>
+    <Window
+      width={300}
+      height={232}>
       <Window.Content>
         <Section
           title="Canister"
diff --git a/tgui/packages/tgui/interfaces/Canvas.js b/tgui/packages/tgui/interfaces/Canvas.js
index 385b23caf6..5ee8470cbc 100644
--- a/tgui/packages/tgui/interfaces/Canvas.js
+++ b/tgui/packages/tgui/interfaces/Canvas.js
@@ -3,6 +3,8 @@ import { useBackend } from '../backend';
 import { Box, Button } from '../components';
 import { Window } from '../layouts';
 
+const PX_PER_UNIT = 28;
+
 class PaintCanvas extends Component {
   constructor(props) {
     super(props);
@@ -58,16 +60,14 @@ class PaintCanvas extends Component {
     const {
       res = 1,
       value,
-      px_per_unit = 28,
       ...rest
     } = this.props;
-    const x_size = value.length * px_per_unit;
-    const y_size = x_size !== 0 ? value[0].length * px_per_unit : 0;
+    const [width, height] = getImageSize(value);
     return (
       <canvas
         ref={this.canvasRef}
-        width={x_size || 300}
-        height={y_size || 300}
+        width={(width * PX_PER_UNIT) || 300}
+        height={(height * PX_PER_UNIT) || 300}
         {...rest}
         onClick={e => this.clickwrapper(e)}>
         Canvas failed to render.
@@ -76,10 +76,20 @@ class PaintCanvas extends Component {
   }
 }
 
+const getImageSize = value => {
+  const width = value.length;
+  const height = width !== 0 ? value[0].length : 0;
+  return [width, height];
+};
+
 export const Canvas = (props, context) => {
   const { act, data } = useBackend(context);
+  const [width, height] = getImageSize(data.grid);
   return (
-    <Window resizable>
+    <Window
+      width={Math.min(400, width * PX_PER_UNIT * 32 + 24)}
+      height={Math.min(400, height * PX_PER_UNIT * 32 + 24)}
+      resizable>
       <Window.Content scrollable>
         <Box textAlign="center">
           <PaintCanvas
diff --git a/tgui/packages/tgui/interfaces/Cargo.js b/tgui/packages/tgui/interfaces/Cargo.js
index be1507d07f..c270a37a10 100644
--- a/tgui/packages/tgui/interfaces/Cargo.js
+++ b/tgui/packages/tgui/interfaces/Cargo.js
@@ -14,7 +14,10 @@ export const Cargo = (props, context) => {
   const cart = data.cart || [];
   const requests = data.requests || [];
   return (
-    <Window resizable>
+    <Window
+      width={780}
+      height={750}
+      resizable>
       <Window.Content scrollable>
         <CargoStatus />
         <Tabs>
diff --git a/tgui/packages/tgui/interfaces/CargoExpress.js b/tgui/packages/tgui/interfaces/CargoExpress.js
index 4e4ccf6a88..685569f6d5 100644
--- a/tgui/packages/tgui/interfaces/CargoExpress.js
+++ b/tgui/packages/tgui/interfaces/CargoExpress.js
@@ -8,7 +8,10 @@ import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
 export const CargoExpress = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window resizable>
+    <Window
+      width={600}
+      height={700}
+      resizable>
       <Window.Content scrollable>
         <InterfaceLockNoticeBox
           accessText="a QM-level ID card" />
diff --git a/tgui/packages/tgui/interfaces/CargoHoldTerminal.js b/tgui/packages/tgui/interfaces/CargoHoldTerminal.js
index aaf66e701c..b20c0c9f9b 100644
--- a/tgui/packages/tgui/interfaces/CargoHoldTerminal.js
+++ b/tgui/packages/tgui/interfaces/CargoHoldTerminal.js
@@ -12,7 +12,10 @@ export const CargoHoldTerminal = (props, context) => {
     status_report,
   } = data;
   return (
-    <Window resizable>
+    <Window
+      width={600}
+      height={230}
+      resizable>
       <Window.Content scrollable>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/CellularEmporium.js b/tgui/packages/tgui/interfaces/CellularEmporium.js
index 8e8d58cb94..07989d8bad 100644
--- a/tgui/packages/tgui/interfaces/CellularEmporium.js
+++ b/tgui/packages/tgui/interfaces/CellularEmporium.js
@@ -7,7 +7,10 @@ export const CellularEmporium = (props, context) => {
   const { act, data } = useBackend(context);
   const { abilities } = data;
   return (
-    <Window resizable>
+    <Window
+      width={900}
+      height={480}
+      resizable>
       <Window.Content scrollable>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/CentcomPodLauncher.js b/tgui/packages/tgui/interfaces/CentcomPodLauncher.js
index 28ff827f78..05982b2fbf 100644
--- a/tgui/packages/tgui/interfaces/CentcomPodLauncher.js
+++ b/tgui/packages/tgui/interfaces/CentcomPodLauncher.js
@@ -6,7 +6,11 @@ import { Window } from '../layouts';
 
 export const CentcomPodLauncher = () => {
   return (
-    <Window resizable>
+    <Window
+      title="Config/Launch Supply Pod"
+      width={700}
+      height={700}
+      resizable>
       <Window.Content scrollable>
         <CentcomPodLauncherContent />
       </Window.Content>
@@ -57,6 +61,42 @@ export const CentcomPodLauncherContent = (props, context) => {
               `}
               onClick={() => act('bay5')} />
           </LabeledList.Item>
+          {!!data.effectReverse && (
+            <LabeledList.Item label="Reverse Drop">
+              <Button
+                content="Pick Dropoff Location"
+                selected={data.picking_dropoff_turf}
+                disabled={!data.effectReverse}
+                tooltip={multiline`
+                  [NOTE: ONLY WORKS WHEN REVERSE MODE IS ACTIVE]
+                  This will allow you to select a dropoff turf. After
+                  selecting a turf, any pod in 'Reverse Mode' will drop off
+                  it's newly gotten cargo on this turf. Can be used to
+                  transport things or people around the station in a neat,
+                  IC way. Try doing this with the 'Seethrough Pod' style
+                  enabled for extra fun!
+                `}
+                onClick={() => act('pickDropoffTurf')} />
+              <Button
+                content="Clear Dropoff Location"
+                disabled={!data.dropoff_turf}
+                tooltip={multiline`
+                  Clears the selected dropoff turf for reverse mode.
+                `}
+                onClick={() => act('clearDropoffTurf')} />
+              <p>
+                Reverse Drop-off Location: 
+                {data.dropoff_turf ? data.dropoff_turf : 'None'}
+              </p>
+            </LabeledList.Item>
+          )}
+          {!data.effectReverse && (
+            <LabeledList.Item label="Reverse Drop">
+              <p>
+                [Enable Reverse Mode for this feature]
+              </p>
+            </LabeledList.Item>
+          )} 
           <LabeledList.Item label="Teleport to">
             <Button
               content={data.bay}
@@ -66,7 +106,7 @@ export const CentcomPodLauncherContent = (props, context) => {
               disabled={!data.oldArea}
               onClick={() => act('teleportBack')} />
           </LabeledList.Item>
-          <LabeledList.Item label="Item Mode" >
+          <LabeledList.Item label="Item Mode">
             <Button
               content="Clone Items"
               selected={data.launchClone}
@@ -147,6 +187,14 @@ export const CentcomPodLauncherContent = (props, context) => {
               onClick={() => act('damageGib')} />
           </LabeledList.Item>
           <LabeledList.Item label="Effects">
+            <Button
+              content="Projectile Cloud"
+              selected={data.effectShrapnel}
+              tooltip={multiline`
+                This will create a cloud of shrapnel on landing, 
+                of any projectile you'd like!
+              `}
+              onClick={() => act('effectShrapnel')} />
             <Button
               content="Stun"
               selected={data.effectStun}
diff --git a/tgui/packages/tgui/interfaces/ChemAcclimator.js b/tgui/packages/tgui/interfaces/ChemAcclimator.js
index 9613a69b8b..82edbec2b6 100644
--- a/tgui/packages/tgui/interfaces/ChemAcclimator.js
+++ b/tgui/packages/tgui/interfaces/ChemAcclimator.js
@@ -5,7 +5,9 @@ import { Window } from '../layouts';
 export const ChemAcclimator = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      width={320}
+      height={271}>
       <Window.Content>
         <Section title="Acclimator">
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/ChemDebugSynthesizer.js b/tgui/packages/tgui/interfaces/ChemDebugSynthesizer.js
index 94b939eeae..0e073ba885 100644
--- a/tgui/packages/tgui/interfaces/ChemDebugSynthesizer.js
+++ b/tgui/packages/tgui/interfaces/ChemDebugSynthesizer.js
@@ -13,7 +13,10 @@ export const ChemDebugSynthesizer = (props, context) => {
     beakerContents = [],
   } = data;
   return (
-    <Window resizable>
+    <Window
+      width={390}
+      height={330}
+      resizable>
       <Window.Content scrollable>
         <Section
           title="Recipient"
diff --git a/tgui/packages/tgui/interfaces/ChemDispenser.js b/tgui/packages/tgui/interfaces/ChemDispenser.js
index 6b3f34b83e..9d50b1ad54 100644
--- a/tgui/packages/tgui/interfaces/ChemDispenser.js
+++ b/tgui/packages/tgui/interfaces/ChemDispenser.js
@@ -26,7 +26,10 @@ export const ChemDispenser = (props, context) => {
     || data.beakerContents
     || [];
   return (
-    <Window resizable>
+    <Window
+      width={565}
+      height={620}
+      resizable>
       <Window.Content scrollable>
         <Section
           title="Status"
@@ -86,7 +89,7 @@ export const ChemDispenser = (props, context) => {
                 key={recipe.name}
                 icon="tint"
                 width="129.5px"
-                lineHeight="21px"
+                lineHeight={1.75}
                 content={recipe.name}
                 onClick={() => act('dispense_recipe', {
                   recipe: recipe.name,
@@ -119,7 +122,7 @@ export const ChemDispenser = (props, context) => {
                 key={chemical.id}
                 icon="tint"
                 width="129.5px"
-                lineHeight="21px"
+                lineHeight={1.75}
                 content={chemical.title}
                 onClick={() => act('dispense', {
                   reagent: chemical.id,
diff --git a/tgui/packages/tgui/interfaces/ChemFilter.js b/tgui/packages/tgui/interfaces/ChemFilter.js
index 18c99adef4..ed72dbd68c 100644
--- a/tgui/packages/tgui/interfaces/ChemFilter.js
+++ b/tgui/packages/tgui/interfaces/ChemFilter.js
@@ -51,7 +51,10 @@ export const ChemFilter = (props, context) => {
   const [leftName, setLeftName] = useLocalState(context, 'leftName', '');
   const [rightName, setRightName] = useLocalState(context, 'rightName', '');
   return (
-    <Window resizable>
+    <Window
+      width={500}
+      height={300}
+      resizable>
       <Window.Content scrollable>
         <Flex spacing={1}>
           <Flex.Item grow={1}>
diff --git a/tgui/packages/tgui/interfaces/ChemHeater.js b/tgui/packages/tgui/interfaces/ChemHeater.js
index b49349d4d7..998ac3e708 100644
--- a/tgui/packages/tgui/interfaces/ChemHeater.js
+++ b/tgui/packages/tgui/interfaces/ChemHeater.js
@@ -18,7 +18,10 @@ export const ChemHeater = (props, context) => {
     currentpH,
   } = data;
   return (
-    <Window resizable>
+    <Window
+      width={275}
+      height={320}
+      resizable>
       <Window.Content scrollable>
         <Section
           title="Thermostat"
diff --git a/tgui/packages/tgui/interfaces/ChemMaster.js b/tgui/packages/tgui/interfaces/ChemMaster.js
index da89ee5c9d..9d16dc82e6 100644
--- a/tgui/packages/tgui/interfaces/ChemMaster.js
+++ b/tgui/packages/tgui/interfaces/ChemMaster.js
@@ -7,7 +7,10 @@ export const ChemMaster = (props, context) => {
   const { data } = useBackend(context);
   const { screen } = data;
   return (
-    <Window resizable>
+    <Window
+      width={465}
+      height={550}
+      resizable>
       <Window.Content scrollable>
         {screen === 'analyze' && (
           <AnalysisResults />
@@ -220,7 +223,6 @@ const PackagingControls = (props, context) => {
   const [
     pillAmount,
     setPillAmount,
-
   ] = useSharedState(context, 'pillAmount', 1);
   const [
     patchAmount,
@@ -374,79 +376,56 @@ const AnalysisResults = (props, context) => {
             screen: 'home',
           })} />
       )}>
-      {!fermianalyze && (
-        <LabeledList>
-          <LabeledList.Item label="Name">
-            {analyzeVars.name}
-          </LabeledList.Item>
-          <LabeledList.Item label="State">
-            {analyzeVars.state}
-          </LabeledList.Item>
-          <LabeledList.Item label="Color">
-            <ColorBox color={analyzeVars.color} mr={1} />
-            {analyzeVars.color}
-          </LabeledList.Item>
-          <LabeledList.Item label="Description">
-            {analyzeVars.description}
-          </LabeledList.Item>
-          <LabeledList.Item label="Metabolization Rate">
-            {analyzeVars.metaRate} u/minute
-          </LabeledList.Item>
-          <LabeledList.Item label="Overdose Threshold">
-            {analyzeVars.overD}
-          </LabeledList.Item>
-          <LabeledList.Item label="Addiction Threshold">
-            {analyzeVars.addicD}
-          </LabeledList.Item>
-        </LabeledList>
-      )}
-      {!!fermianalyze && (
-        <LabeledList>
-          <LabeledList.Item label="Name">
-            {analyzeVars.name}
-          </LabeledList.Item>
-          <LabeledList.Item label="State">
-            {analyzeVars.state}
-          </LabeledList.Item>
-          <LabeledList.Item label="Color">
-            <ColorBox color={analyzeVars.color} mr={1} />
-            {analyzeVars.color}
-          </LabeledList.Item>
-          <LabeledList.Item label="Description">
-            {analyzeVars.description}
-          </LabeledList.Item>
-          <LabeledList.Item label="Metabolization Rate">
-            {analyzeVars.metaRate} u/minute
-          </LabeledList.Item>
-          <LabeledList.Item label="Overdose Threshold">
-            {analyzeVars.overD}
-          </LabeledList.Item>
-          <LabeledList.Item label="Addiction Threshold">
-            {analyzeVars.addicD}
-          </LabeledList.Item>
-          <LabeledList.Item label="Purity">
-            {analyzeVars.purityF}
-          </LabeledList.Item>
-          <LabeledList.Item label="Inverse Ratio">
-            {analyzeVars.inverseRatioF}
-          </LabeledList.Item>
-          <LabeledList.Item label="Purity E">
-            {analyzeVars.purityE}
-          </LabeledList.Item>
-          <LabeledList.Item label="Lower Optimal Temperature">
-            {analyzeVars.minTemp}
-          </LabeledList.Item>
-          <LabeledList.Item label="Upper Optimal Temperature">
-            {analyzeVars.maxTemp}
-          </LabeledList.Item>
-          <LabeledList.Item label="Explosive Temperature">
-            {analyzeVars.eTemp}
-          </LabeledList.Item>
-          <LabeledList.Item label="pH Peak">
-            {analyzeVars.pHpeak}
-          </LabeledList.Item>
-        </LabeledList>
-      )}
+
+      <LabeledList>
+        <LabeledList.Item label="Name">
+          {analyzeVars.name}
+        </LabeledList.Item>
+        <LabeledList.Item label="State">
+          {analyzeVars.state}
+        </LabeledList.Item>
+        <LabeledList.Item label="Color">
+          <ColorBox color={analyzeVars.color} mr={1} />
+          {analyzeVars.color}
+        </LabeledList.Item>
+        <LabeledList.Item label="Description">
+          {analyzeVars.description}
+        </LabeledList.Item>
+        <LabeledList.Item label="Metabolization Rate">
+          {analyzeVars.metaRate} u/minute
+        </LabeledList.Item>
+        <LabeledList.Item label="Overdose Threshold">
+          {analyzeVars.overD}
+        </LabeledList.Item>
+        <LabeledList.Item label="Addiction Threshold">
+          {analyzeVars.addicD}
+        </LabeledList.Item>
+        {!!fermianalyze && ( // why did you do that before? it's fucking bad.
+          <Fragment>
+            <LabeledList.Item label="Purity">
+              {analyzeVars.purityF}
+            </LabeledList.Item>
+            <LabeledList.Item label="Inverse Ratio">
+              {analyzeVars.inverseRatioF}
+            </LabeledList.Item>
+            <LabeledList.Item label="Purity E">
+              {analyzeVars.purityE}
+            </LabeledList.Item>
+            <LabeledList.Item label="Lower Optimal Temperature">
+              {analyzeVars.minTemp}
+            </LabeledList.Item>
+            <LabeledList.Item label="Upper Optimal Temperature">
+              {analyzeVars.maxTemp}
+            </LabeledList.Item>
+            <LabeledList.Item label="Explosive Temperature">
+              {analyzeVars.eTemp}
+            </LabeledList.Item>
+            <LabeledList.Item label="pH Peak">
+              {analyzeVars.pHpeak}
+            </LabeledList.Item>
+          </Fragment>
+        )}
+      </LabeledList>
     </Section>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/ChemReactionChamber.js b/tgui/packages/tgui/interfaces/ChemReactionChamber.js
index 9af7ef7ddb..cbcf5574d8 100644
--- a/tgui/packages/tgui/interfaces/ChemReactionChamber.js
+++ b/tgui/packages/tgui/interfaces/ChemReactionChamber.js
@@ -17,7 +17,10 @@ export const ChemReactionChamber = (props, context) => {
   const emptying = data.emptying;
   const reagents = data.reagents || [];
   return (
-    <Window resizable>
+    <Window
+      width={250}
+      height={225}
+      resizable>
       <Window.Content scrollable>
         <Section
           title="Reagents"
diff --git a/tgui/packages/tgui/interfaces/ChemSplitter.js b/tgui/packages/tgui/interfaces/ChemSplitter.js
index c11a374ac7..b45d6bbdba 100644
--- a/tgui/packages/tgui/interfaces/ChemSplitter.js
+++ b/tgui/packages/tgui/interfaces/ChemSplitter.js
@@ -11,7 +11,9 @@ export const ChemSplitter = (props, context) => {
     max_transfer,
   } = data;
   return (
-    <Window>
+    <Window
+      width={220}
+      height={105}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/ChemSynthesizer.js b/tgui/packages/tgui/interfaces/ChemSynthesizer.js
index 26db58cb3a..536173f039 100644
--- a/tgui/packages/tgui/interfaces/ChemSynthesizer.js
+++ b/tgui/packages/tgui/interfaces/ChemSynthesizer.js
@@ -12,7 +12,9 @@ export const ChemSynthesizer = (props, context) => {
     possible_amounts = [],
   } = data;
   return (
-    <Window>
+    <Window
+      width={300}
+      height={375}>
       <Window.Content>
         <Section>
           <Box>
diff --git a/tgui/packages/tgui/interfaces/CodexGigas.js b/tgui/packages/tgui/interfaces/CodexGigas.js
index b55911750b..3bdc75d22c 100644
--- a/tgui/packages/tgui/interfaces/CodexGigas.js
+++ b/tgui/packages/tgui/interfaces/CodexGigas.js
@@ -52,7 +52,9 @@ const SUFFIXES = [
 export const CodexGigas = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      width={450}
+      height={450}>
       <Window.Content>
         <Section>
           {data.name}
diff --git a/tgui/packages/tgui/interfaces/ComputerFabricator.js b/tgui/packages/tgui/interfaces/ComputerFabricator.js
index ec4cffcb7b..f88e08ffb7 100644
--- a/tgui/packages/tgui/interfaces/ComputerFabricator.js
+++ b/tgui/packages/tgui/interfaces/ComputerFabricator.js
@@ -7,7 +7,11 @@ import { Window } from '../layouts';
 export const ComputerFabricator = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      title="Personal Computer Vendor"
+      width={500}
+      height={400}
+      resizable>
       <Window.Content>
         <Section italic fontSize="20px">
           Your perfect device, only three steps away...
@@ -61,7 +65,7 @@ const CfStep1 = (props, context) => {
               content="Laptop"
               textAlign="center"
               fontSize="30px"
-              lineHeight="50px"
+              lineHeight={2}
               onClick={() => act('pick_device', {
                 pick: '1',
               })} />
@@ -73,7 +77,7 @@ const CfStep1 = (props, context) => {
               content="Tablet"
               textAlign="center"
               fontSize="30px"
-              lineHeight="50px"
+              lineHeight={2}
               onClick={() => act('pick_device', {
                 pick: '2',
               })} />
@@ -108,7 +112,7 @@ const CfStep2 = (props, context) => {
               `}
               position="right" />
           </Table.Cell>
-          <Table.Cell >
+          <Table.Cell>
             <Button
               content="Standard"
               selected={data.hw_battery === 1}
@@ -335,7 +339,7 @@ const CfStep2 = (props, context) => {
         color="good"
         textAlign="center"
         fontSize="18px"
-        lineHeight="26px"
+        lineHeight={2}
         onClick={() => act('confirm_order')} />
     </Section>
   );
@@ -389,7 +393,7 @@ const CfStep3 = (props, context) => {
         color="good"
         textAlign="center"
         fontSize="20px"
-        lineHeight="28px"
+        lineHeight={2}
         onClick={() => act('purchase')} />
     </Section>
   );
diff --git a/tgui/packages/tgui/interfaces/Crayon.js b/tgui/packages/tgui/interfaces/Crayon.js
index 68d3bb46fc..05191f8c66 100644
--- a/tgui/packages/tgui/interfaces/Crayon.js
+++ b/tgui/packages/tgui/interfaces/Crayon.js
@@ -7,7 +7,10 @@ export const Crayon = (props, context) => {
   const capOrChanges = data.has_cap || data.can_change_colour;
   const drawables = data.drawables || [];
   return (
-    <Window resizable>
+    <Window
+      width={600}
+      height={600}
+      resizable>
       <Window.Content scrollable>
         {!!capOrChanges && (
           <Section title="Basic">
diff --git a/tgui/packages/tgui/interfaces/CrewConsole.js b/tgui/packages/tgui/interfaces/CrewConsole.js
index 754574a641..2bdeb43ce6 100644
--- a/tgui/packages/tgui/interfaces/CrewConsole.js
+++ b/tgui/packages/tgui/interfaces/CrewConsole.js
@@ -60,7 +60,11 @@ const HealthStat = props => {
 
 export const CrewConsole = () => {
   return (
-    <Window resizable>
+    <Window
+      title="Crew Monitor"
+      width={800}
+      height={600}
+      resizable>
       <Window.Content scrollable>
         <Section minHeight="540px">
           <CrewTable />
diff --git a/tgui/packages/tgui/interfaces/Cryo.js b/tgui/packages/tgui/interfaces/Cryo.js
index 4ec29490c1..ddcf0d88a7 100644
--- a/tgui/packages/tgui/interfaces/Cryo.js
+++ b/tgui/packages/tgui/interfaces/Cryo.js
@@ -25,7 +25,10 @@ const damageTypes = [
 
 export const Cryo = () => {
   return (
-    <Window resizable>
+    <Window
+      width={400}
+      height={550}
+      resizable>
       <Window.Content scrollable>
         <CryoContent />
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/DecalPainter.js b/tgui/packages/tgui/interfaces/DecalPainter.js
index 36e764bc66..90ab589208 100644
--- a/tgui/packages/tgui/interfaces/DecalPainter.js
+++ b/tgui/packages/tgui/interfaces/DecalPainter.js
@@ -8,7 +8,9 @@ export const DecalPainter = (props, context) => {
   const color_list = data.color_list || [];
   const dir_list = data.dir_list || [];
   return (
-    <Window>
+    <Window
+      width={500}
+      height={400}>
       <Window.Content>
         <Section title="Decal Type">
           {decal_list.map(decal => (
diff --git a/tgui/packages/tgui/interfaces/DisposalUnit.js b/tgui/packages/tgui/interfaces/DisposalUnit.js
index e734e3b30e..46ef63a993 100644
--- a/tgui/packages/tgui/interfaces/DisposalUnit.js
+++ b/tgui/packages/tgui/interfaces/DisposalUnit.js
@@ -23,7 +23,9 @@ export const DisposalUnit = (props, context) => {
     stateText = 'Off';
   }
   return (
-    <Window>
+    <Window
+      width={300}
+      height={180}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/DnaConsole.js b/tgui/packages/tgui/interfaces/DnaConsole.js
index f4fd255120..194b9a4a6b 100644
--- a/tgui/packages/tgui/interfaces/DnaConsole.js
+++ b/tgui/packages/tgui/interfaces/DnaConsole.js
@@ -3,6 +3,7 @@ import { flow } from 'common/fp';
 import { classes } from 'common/react';
 import { capitalize } from 'common/string';
 import { Fragment } from 'inferno';
+import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
 import { Box, Button, Collapsible, Dimmer, Divider, Dropdown, Flex, Icon, LabeledList, NumberInput, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';
@@ -75,7 +76,11 @@ export const DnaConsole = (props, context) => {
   } = data;
   const { consoleMode } = data.view;
   return (
-    <Window resizable>
+    <Window
+      title="DNA Console"
+      width={539}
+      height={710}
+      resizable>
       {!!isPulsingRads && (
         <Dimmer
           fontSize="14px"
@@ -773,7 +778,7 @@ const DnaConsoleSequencer = (props, context) => {
             {mutations.map(mutation => (
               <GenomeImage
                 key={mutation.Alias}
-                url={mutation.Image}
+                url={resolveAsset(mutation.Image)}
                 selected={mutation.Alias === sequencerMutation}
                 onClick={() => {
                   act('set_view', {
diff --git a/tgui/packages/tgui/interfaces/DnaVault.js b/tgui/packages/tgui/interfaces/DnaVault.js
index 6ce2093086..37d6d22737 100644
--- a/tgui/packages/tgui/interfaces/DnaVault.js
+++ b/tgui/packages/tgui/interfaces/DnaVault.js
@@ -17,7 +17,9 @@ export const DnaVault = (props, context) => {
     animals_max,
   } = data;
   return (
-    <Window>
+    <Window
+      width={350}
+      height={400}>
       <Window.Content>
         <Section title="DNA Vault Database">
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/EightBallVote.js b/tgui/packages/tgui/interfaces/EightBallVote.js
index 340751e1fa..f8ce25f6f8 100644
--- a/tgui/packages/tgui/interfaces/EightBallVote.js
+++ b/tgui/packages/tgui/interfaces/EightBallVote.js
@@ -9,7 +9,9 @@ export const EightBallVote = (props, context) => {
     shaking,
   } = data;
   return (
-    <Window>
+    <Window
+      width={400}
+      height={600}>
       <Window.Content>
         {!shaking && (
           <NoticeBox>
diff --git a/tgui/packages/tgui/interfaces/Electrolyzer.js b/tgui/packages/tgui/interfaces/Electrolyzer.js
index f60319269c..4a8641e83b 100644
--- a/tgui/packages/tgui/interfaces/Electrolyzer.js
+++ b/tgui/packages/tgui/interfaces/Electrolyzer.js
@@ -1,12 +1,14 @@
 import { Fragment } from 'inferno';
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, NumberInput, ProgressBar, Section } from '../components';
+import { Button, LabeledList, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';
 
 export const Electrolyzer = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      width={400}
+      height={305}>
       <Window.Content>
         <Section
           title="Power"
diff --git a/tgui/packages/tgui/interfaces/Electropack.js b/tgui/packages/tgui/interfaces/Electropack.js
index 0f46be58cd..5778048f45 100644
--- a/tgui/packages/tgui/interfaces/Electropack.js
+++ b/tgui/packages/tgui/interfaces/Electropack.js
@@ -13,7 +13,9 @@ export const Electropack = (props, context) => {
     maxFrequency,
   } = data;
   return (
-    <Window>
+    <Window
+      width={260}
+      height={137}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/EmergencyShuttleConsole.js b/tgui/packages/tgui/interfaces/EmergencyShuttleConsole.js
index be64709a19..a476907058 100644
--- a/tgui/packages/tgui/interfaces/EmergencyShuttleConsole.js
+++ b/tgui/packages/tgui/interfaces/EmergencyShuttleConsole.js
@@ -13,7 +13,9 @@ export const EmergencyShuttleConsole = (props, context) => {
     authorizations = [],
   } = data;
   return (
-    <Window>
+    <Window
+      width={400}
+      height={350}>
       <Window.Content>
         <Section>
           <Box
@@ -100,15 +102,6 @@ export const EmergencyShuttleConsole = (props, context) => {
                   No Active Authorizations
                 </Box>
               )}
-              {authorizations.map(authorization => (
-                <Box
-                  key={authorization.name}
-                  bold
-                  fontSize="16px"
-                  className="candystripe">
-                  {authorization.name} ({authorization.job})
-                </Box>
-              ))}
             </Section>
           </Section>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/EngravedMessage.js b/tgui/packages/tgui/interfaces/EngravedMessage.js
index 40d34d0427..e62fbf0ff7 100644
--- a/tgui/packages/tgui/interfaces/EngravedMessage.js
+++ b/tgui/packages/tgui/interfaces/EngravedMessage.js
@@ -18,7 +18,10 @@ export const EngravedMessage = (props, context) => {
     realdate,
   } = data;
   return (
-    <Window resizable>
+    <Window
+      width={600}
+      height={300}
+      resizable>
       <Window.Content scrollable>
         <Section>
           <Box
diff --git a/tgui/packages/tgui/interfaces/ExosuitControlConsole.js b/tgui/packages/tgui/interfaces/ExosuitControlConsole.js
index c2028d9eab..4e318a6d1b 100644
--- a/tgui/packages/tgui/interfaces/ExosuitControlConsole.js
+++ b/tgui/packages/tgui/interfaces/ExosuitControlConsole.js
@@ -10,7 +10,10 @@ export const ExosuitControlConsole = (props, context) => {
     mechs = [],
   } = data;
   return (
-    <Window resizable>
+    <Window
+      width={500}
+      height={500}
+      resizable>
       <Window.Content scrollable>
         {mechs.length === 0 && (
           <NoticeBox>
diff --git a/tgui/packages/tgui/interfaces/Gps.js b/tgui/packages/tgui/interfaces/Gps.js
index a5fcb8d194..beffdad9c4 100644
--- a/tgui/packages/tgui/interfaces/Gps.js
+++ b/tgui/packages/tgui/interfaces/Gps.js
@@ -37,7 +37,11 @@ export const Gps = (props, context) => {
       signal => signal.entrytag),
   ])(data.signals || []);
   return (
-    <Window resizable>
+    <Window
+      title="Global Positioning System"
+      width={470}
+      height={700}
+      resizable>
       <Window.Content scrollable>
         <Section
           title="Control"
diff --git a/tgui/packages/tgui/interfaces/GravityGenerator.js b/tgui/packages/tgui/interfaces/GravityGenerator.js
index cf4eaa7bb0..5c6499cf54 100644
--- a/tgui/packages/tgui/interfaces/GravityGenerator.js
+++ b/tgui/packages/tgui/interfaces/GravityGenerator.js
@@ -9,7 +9,9 @@ export const GravityGenerator = (props, context) => {
     operational,
   } = data;
   return (
-    <Window>
+    <Window
+      width={400}
+      height={165}>
       <Window.Content>
         {!operational && (
           <NoticeBox>
diff --git a/tgui/packages/tgui/interfaces/GulagItemReclaimer.js b/tgui/packages/tgui/interfaces/GulagItemReclaimer.js
index 846b465998..6f47eed342 100644
--- a/tgui/packages/tgui/interfaces/GulagItemReclaimer.js
+++ b/tgui/packages/tgui/interfaces/GulagItemReclaimer.js
@@ -8,7 +8,10 @@ export const GulagItemReclaimer = (props, context) => {
     mobs = [],
   } = data;
   return (
-    <Window resizable>
+    <Window
+      width={325}
+      height={400}
+      resizable>
       <Window.Content scrollable>
         {mobs.length === 0 && (
           <NoticeBox>
diff --git a/tgui/packages/tgui/interfaces/GulagTeleporterConsole.js b/tgui/packages/tgui/interfaces/GulagTeleporterConsole.js
index 3b709cbcb0..abb8da8b64 100644
--- a/tgui/packages/tgui/interfaces/GulagTeleporterConsole.js
+++ b/tgui/packages/tgui/interfaces/GulagTeleporterConsole.js
@@ -19,7 +19,9 @@ export const GulagTeleporterConsole = (props, context) => {
     prisoner = {},
   } = data;
   return (
-    <Window>
+    <Window
+      width={350}
+      height={295}>
       <Window.Content>
         <Section
           title="Teleporter Console"
diff --git a/tgui/packages/tgui/interfaces/Holodeck.js b/tgui/packages/tgui/interfaces/Holodeck.js
index bc664d2090..4eb9c5cd54 100644
--- a/tgui/packages/tgui/interfaces/Holodeck.js
+++ b/tgui/packages/tgui/interfaces/Holodeck.js
@@ -12,7 +12,10 @@ export const Holodeck = (props, context) => {
     program,
   } = data;
   return (
-    <Window resizable>
+    <Window
+      width={400}
+      height={500}
+      resizable>
       <Window.Content scrollable>
         <Section
           title="Default Programs"
diff --git a/tgui/packages/tgui/interfaces/HypnoChair.js b/tgui/packages/tgui/interfaces/HypnoChair.js
index 58ac1b0a80..1d590a112d 100644
--- a/tgui/packages/tgui/interfaces/HypnoChair.js
+++ b/tgui/packages/tgui/interfaces/HypnoChair.js
@@ -5,7 +5,9 @@ import { Window } from '../layouts';
 export const HypnoChair = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      width={375}
+      height={480}>
       <Window.Content>
         <Section
           title="Information"
diff --git a/tgui/packages/tgui/interfaces/ImplantChair.js b/tgui/packages/tgui/interfaces/ImplantChair.js
index 38da8c27be..70d9fd3f2c 100644
--- a/tgui/packages/tgui/interfaces/ImplantChair.js
+++ b/tgui/packages/tgui/interfaces/ImplantChair.js
@@ -5,7 +5,9 @@ import { Window } from '../layouts';
 export const ImplantChair = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      width={375}
+      height={280}>
       <Window.Content>
         <Section
           title="Occupant Information"
diff --git a/tgui/packages/tgui/interfaces/InfraredEmitter.js b/tgui/packages/tgui/interfaces/InfraredEmitter.js
index 766f922a79..a81e5ed767 100644
--- a/tgui/packages/tgui/interfaces/InfraredEmitter.js
+++ b/tgui/packages/tgui/interfaces/InfraredEmitter.js
@@ -9,7 +9,9 @@ export const InfraredEmitter = (props, context) => {
     visible,
   } = data;
   return (
-    <Window>
+    <Window
+      width={225}
+      height={110}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/Intellicard.js b/tgui/packages/tgui/interfaces/Intellicard.js
index 99e653ed31..1a6e3885d9 100644
--- a/tgui/packages/tgui/interfaces/Intellicard.js
+++ b/tgui/packages/tgui/interfaces/Intellicard.js
@@ -16,7 +16,10 @@ export const Intellicard = (props, context) => {
   } = data;
   const offline = isDead || isBraindead;
   return (
-    <Window resizable>
+    <Window
+      width={500}
+      height={500}
+      resizable>
       <Window.Content scrollable>
         <Section
           title={name || "Empty Card"}
diff --git a/tgui/packages/tgui/interfaces/KeycardAuth.js b/tgui/packages/tgui/interfaces/KeycardAuth.js
index eb4dafeb28..199067b161 100644
--- a/tgui/packages/tgui/interfaces/KeycardAuth.js
+++ b/tgui/packages/tgui/interfaces/KeycardAuth.js
@@ -6,7 +6,9 @@ import { Window } from '../layouts';
 export const KeycardAuth = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      width={375}
+      height={125}>
       <Window.Content>
         <Section>
           <Box>
diff --git a/tgui/packages/tgui/interfaces/LaborClaimConsole.js b/tgui/packages/tgui/interfaces/LaborClaimConsole.js
index b3ee427844..5483b1dd70 100644
--- a/tgui/packages/tgui/interfaces/LaborClaimConsole.js
+++ b/tgui/packages/tgui/interfaces/LaborClaimConsole.js
@@ -13,7 +13,9 @@ export const LaborClaimConsole = (props, context) => {
     unclaimed_points,
   } = data;
   return (
-    <Window>
+    <Window
+      width={315}
+      height={430}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/LanguageMenu.js b/tgui/packages/tgui/interfaces/LanguageMenu.js
index 80e0168c42..656d4a818e 100644
--- a/tgui/packages/tgui/interfaces/LanguageMenu.js
+++ b/tgui/packages/tgui/interfaces/LanguageMenu.js
@@ -13,7 +13,11 @@ export const LanguageMenu = (props, context) => {
     unknown_languages = [],
   } = data;
   return (
-    <Window resizable>
+    <Window
+      title="Language Menu"
+      width={700}
+      height={600}
+      resizable>
       <Window.Content scrollable>
         <Section title="Known Languages">
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/LaunchpadConsole.js b/tgui/packages/tgui/interfaces/LaunchpadConsole.js
index 1fd24e981d..83f8d0aa59 100644
--- a/tgui/packages/tgui/interfaces/LaunchpadConsole.js
+++ b/tgui/packages/tgui/interfaces/LaunchpadConsole.js
@@ -197,7 +197,10 @@ export const LaunchpadConsole = (props, context) => {
     selected_id,
   } = data;
   return (
-    <Window resizable>
+    <Window
+      width={475}
+      height={260}
+      resizable>
       <Window.Content scrollable>
         {launchpads.length === 0 && (
           <NoticeBox>
diff --git a/tgui/packages/tgui/interfaces/LaunchpadRemote.js b/tgui/packages/tgui/interfaces/LaunchpadRemote.js
index 2720914611..2173630c08 100644
--- a/tgui/packages/tgui/interfaces/LaunchpadRemote.js
+++ b/tgui/packages/tgui/interfaces/LaunchpadRemote.js
@@ -10,7 +10,11 @@ export const LaunchpadRemote = (props, context) => {
     pad_closed,
   } = data;
   return (
-    <Window theme="syndicate">
+    <Window
+      title="Briefcase Launchpad Remote"
+      width={300}
+      height={240}
+      theme="syndicate">
       <Window.Content>
         {!has_pad && (
           <NoticeBox>
diff --git a/tgui/packages/tgui/interfaces/MafiaPanel.js b/tgui/packages/tgui/interfaces/MafiaPanel.js
index 3412cfed11..e3c2c893ec 100644
--- a/tgui/packages/tgui/interfaces/MafiaPanel.js
+++ b/tgui/packages/tgui/interfaces/MafiaPanel.js
@@ -1,8 +1,7 @@
-import { useBackend } from '../backend';
-import { Flex, Button, LabeledList, Section, Box, Table, TimeDisplay } from '../components';
 import { Fragment } from 'inferno';
+import { useBackend } from '../backend';
+import { Box, Button, Flex, LabeledList, Section, TimeDisplay } from '../components';
 import { Window } from '../layouts';
-import { FlexItem } from '../components/Flex';
 
 export const MafiaPanel = (props, context) => {
   const { act, data } = useBackend(context);
@@ -10,97 +9,155 @@ export const MafiaPanel = (props, context) => {
     players,
     actions,
     phase,
-    role_info,
+    roleinfo,
+    role_theme,
     admin_controls,
+    judgement_phase,
     timeleft,
-    all_roles } = data;
+    all_roles,
+  } = data;
   return (
-    <Window resizable>
+    <Window
+      title="Mafia"
+      theme={role_theme}
+      width={650}
+      height={550}
+      resizable>
       <Window.Content>
         <Section title={phase}>
-          {!!role_info && (
-            <Table>
-              <Table.Row>
-                <Table.Cell>
-                  <TimeDisplay auto="down" value={timeleft} />
-                </Table.Cell>
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell bold>
-                  You are a {role_info.role}
-                </Table.Cell>
-              </Table.Row>
-              <Table.Row bold>
-                <Table.Cell>
-                  {role_info.desc}
-                </Table.Cell>
-              </Table.Row>
-              {!!role_info.action_log && role_info.action_log.map(log_line => (
-                <Table.Row key={log_line}>
-                  <Table.Cell>
-                    {role_info.action_log}
-                  </Table.Cell>
-                </Table.Row>
-              ))}
-            </Table>
+          {!!roleinfo && (
+            <Fragment>
+              <Box>
+                <TimeDisplay auto="down" value={timeleft} />
+              </Box>
+              <Box>
+                <b>You are a {roleinfo.role}</b>
+              </Box>
+              <Box>
+                <b>{roleinfo.desc}</b>
+              </Box>
+            </Fragment>
           )}
         </Section>
         <Flex>
-          {!!actions && actions.map(action => {
-            return (
-              <Flex.Item key={action}>
-                <Button
-                  onClick={() => act("mf_action", { atype: action })}>
-                  {action}
-                </Button>
-              </Flex.Item>);
-          })}
-          { !!admin_controls && (
-            <Fragment>
-              <Flex.Item>
-                <Button onClick={() => act("next_phase")}>Next Phase</Button>
-              </Flex.Item>
-              <FlexItem>
-                <Button onClick={() => act("new_game")}>New Game</Button>
-              </FlexItem>
-            </Fragment>)}
+          {!!actions && actions.map(action => (
+            <Flex.Item key={action}>
+              <Button
+                onClick={() => act("mf_action", { atype: action })}>
+                {action}
+              </Button>
+            </Flex.Item>
+          ))}
         </Flex>
+        {!!admin_controls && (
+          <Section
+            title="ADMIN CONTROLS"
+            backgroundColor="red">
+            THESE ARE DEBUG, THEY WILL BREAK THE GAME, DO NOT TOUCH <br />
+            Also because an admin did it: do not gib/delete/etc
+            anyone! It will runtime the game to death! <br />
+            <Button
+              icon="arrow-right"
+              onClick={() => act("next_phase")}>
+              Next Phase
+            </Button>
+            <Button
+              icon="home"
+              onClick={() => act("players_home")}>
+              Send All Players Home
+            </Button>
+            <Button
+              icon="radiation"
+              onClick={() => act("new_game")}>
+              New Game
+            </Button>
+            <br />
+            <Button
+              icon="skull"
+              onClick={() => act("nuke")}
+              color="black">
+              Nuke (delete datum + landmarks, hope it fixes everything!)
+            </Button>
+          </Section>
+        )}
         <Section title="Players">
           <LabeledList>
-            {!!players && players.map(player => { return (
+            {!!players && players.map(player => (
               <LabeledList.Item
                 className="candystripe"
                 key={player.ref}
                 label={player.name}>
-                {player.votes !== undefined
+                {!player.alive && (<Box color="red">DEAD</Box>)}
+                {player.votes !== undefined && !!player.alive
                 && (<Fragment>Votes : {player.votes} </Fragment>)}
                 {
                   !!player.actions && player.actions.map(action => {
                     return (
                       <Button
                         key={action}
-                        onClick={
-                        // eslint-disable-next-line indent
-      () => act("mf_targ_action", { atype: action, target: player.ref })
-                        }>
+                        onClick={() => act('mf_targ_action', {
+                          atype: action,
+                          target: player.ref,
+                        })}>
                         {action}
                       </Button>); })
                 }
-              </LabeledList.Item>);
-            })}
+              </LabeledList.Item>)
+            )}
           </LabeledList>
         </Section>
-        <Section title="Roles">
-          <Table>
-            {!!all_roles && all_roles.map(r => (
-              <Table.Row key={r}>
-                <Table.Cell bold>
-                  {r}
-                </Table.Cell>
-              </Table.Row>
-            ))}
-          </Table>
-        </Section>
+        {!!judgement_phase && (
+          <Section title="JUDGEMENT">
+            <Flex justify="space-around">
+              <Button
+                icon="smile-beam"
+                color="good"
+                onClick={() => act("vote_innocent")}>
+                INNOCENT!
+              </Button>
+              Use these buttons to vote the accused innocent or guilty!
+              <Button
+                icon="angry"
+                color="bad"
+                onClick={() => act("vote_guilty")}>
+                GUILTY!
+              </Button>
+            </Flex>
+          </Section>
+        )}
+        <Flex mt={1} spacing={1}>
+          <Flex.Item grow={1} basis={0}>
+            <Section
+              title="Roles"
+              minHeight={10}>
+              {!!all_roles && all_roles.map(r => (
+                <Box key={r}>
+                  <Flex justify="space-between">
+                    {r}
+                    <Button
+                      content="?"
+                      onClick={() => act("mf_lookup", {
+                        atype: r.slice(0, -3),
+                      })}
+                    />
+                  </Flex>
+                </Box>
+              ))}
+            </Section>
+          </Flex.Item>
+          <Flex.Item grow={2} basis={0}>
+            <Section
+              title="Notes"
+              minHeight={10}>
+              {roleinfo !== undefined && !!roleinfo.action_log
+              && roleinfo.action_log.map(log_line => (
+                <Box key={log_line}>
+                  {log_line}
+                </Box>
+              ))}
+            </Section>
+          </Flex.Item>
+        </Flex>
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/MalfunctionModulePicker.js b/tgui/packages/tgui/interfaces/MalfunctionModulePicker.js
index 298e56655d..70a1716ed6 100644
--- a/tgui/packages/tgui/interfaces/MalfunctionModulePicker.js
+++ b/tgui/packages/tgui/interfaces/MalfunctionModulePicker.js
@@ -9,6 +9,8 @@ export const MalfunctionModulePicker = (props, context) => {
   } = data;
   return (
     <Window
+      width={620}
+      height={525}
       theme="malfunction"
       resizable>
       <Window.Content scrollable>
diff --git a/tgui/packages/tgui/interfaces/MechBayPowerConsole.js b/tgui/packages/tgui/interfaces/MechBayPowerConsole.js
index bed15d261e..22a440791c 100644
--- a/tgui/packages/tgui/interfaces/MechBayPowerConsole.js
+++ b/tgui/packages/tgui/interfaces/MechBayPowerConsole.js
@@ -8,7 +8,9 @@ export const MechBayPowerConsole = (props, context) => {
   const mech = recharge_port && recharge_port.mech;
   const cell = mech && mech.cell;
   return (
-    <Window>
+    <Window
+      width={400}
+      height={200}>
       <Window.Content>
         <Section
           title="Mech status"
diff --git a/tgui/packages/tgui/interfaces/MedicalKiosk.js b/tgui/packages/tgui/interfaces/MedicalKiosk.js
index 8e221d169e..6359acd0e9 100644
--- a/tgui/packages/tgui/interfaces/MedicalKiosk.js
+++ b/tgui/packages/tgui/interfaces/MedicalKiosk.js
@@ -13,7 +13,10 @@ export const MedicalKiosk = (props, context) => {
     active_status_4,
   } = data;
   return (
-    <Window resizable>
+    <Window
+      width={575}
+      height={420}
+      resizable>
       <Window.Content scrollable>
         <Flex mb={1}>
           <Flex.Item mr={1}>
@@ -97,7 +100,9 @@ const MedicalKioskScanButton = (props, context) => {
           tooltipPosition="right"
           content={name}
           onClick={() => {
-            act(`beginScan_${index}`);
+            if (!paid) {
+              act(`beginScan_${index}`);
+            }
             setScanIndex(index);
           }} />
       </Flex.Item>
@@ -247,8 +252,10 @@ const MedicalKioskScanResults3 = (props, context) => {
     clone_health,
     brain_damage,
     brain_health,
-    rad_status,
-    rad_value,
+    rad_contamination_status,
+    rad_contamination_value,
+    rad_sickness_status,
+    rad_sickness_value,
     trauma_status,
   } = data;
   return (
@@ -282,12 +289,20 @@ const MedicalKioskScanResults3 = (props, context) => {
         </LabeledList.Item>
         <LabeledList.Divider />
         <LabeledList.Item
-          label="Radiation Status">
-          {rad_status}
+          label="Radiation Sickness Status">
+          {rad_sickness_status}
         </LabeledList.Item>
         <LabeledList.Item
-          label="Irradiation Percentage">
-          {rad_value}%
+          label="Radiation Sickness Percentage">
+          {rad_sickness_value}%
+        </LabeledList.Item>
+        <LabeledList.Item
+          label="Radiation Contamination Status">
+          {rad_contamination_status}
+        </LabeledList.Item>
+        <LabeledList.Item
+          label="Radiation Contamination Percentage">
+          {rad_contamination_value}%
         </LabeledList.Item>
       </LabeledList>
     </Section>
diff --git a/tgui/packages/tgui/interfaces/MiningVendor.js b/tgui/packages/tgui/interfaces/MiningVendor.js
index 950deb196b..39ff2969b1 100644
--- a/tgui/packages/tgui/interfaces/MiningVendor.js
+++ b/tgui/packages/tgui/interfaces/MiningVendor.js
@@ -9,7 +9,10 @@ export const MiningVendor = (props, context) => {
     ...data.product_records,
   ];
   return (
-    <Window resizable>
+    <Window
+      width={425}
+      height={600}
+      resizable>
       <Window.Content scrollable>
         <Section title="User">
           {data.user && (
@@ -27,7 +30,7 @@ export const MiningVendor = (props, context) => {
             </Box>
           )}
         </Section>
-        <Section title="Equipment" >
+        <Section title="Equipment">
           <Table>
             {inventory.map((product => {
               return (
diff --git a/tgui/packages/tgui/interfaces/Mule.js b/tgui/packages/tgui/interfaces/Mule.js
index b6ae6c1f24..71c14ed3b1 100644
--- a/tgui/packages/tgui/interfaces/Mule.js
+++ b/tgui/packages/tgui/interfaces/Mule.js
@@ -1,6 +1,6 @@
 import { Fragment } from 'inferno';
 import { useBackend } from '../backend';
-import { Button, Dropdown, Grid, Input, LabeledList, ProgressBar, Section, Flex } from '../components';
+import { Button, Dropdown, Flex, Input, LabeledList, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';
 import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
 
@@ -24,7 +24,9 @@ export const Mule = (props, context) => {
   } = data;
   const locked = data.locked && !data.siliconUser;
   return (
-    <Window>
+    <Window
+      width={350}
+      height={425}>
       <Window.Content>
         <InterfaceLockNoticeBox />
         <Section
diff --git a/tgui/packages/tgui/interfaces/NaniteChamberControl.js b/tgui/packages/tgui/interfaces/NaniteChamberControl.js
index 2d16c643b2..515e705697 100644
--- a/tgui/packages/tgui/interfaces/NaniteChamberControl.js
+++ b/tgui/packages/tgui/interfaces/NaniteChamberControl.js
@@ -5,7 +5,10 @@ import { Window } from '../layouts';
 
 export const NaniteChamberControl = (props, context) => {
   return (
-    <Window resizable>
+    <Window
+      width={380}
+      height={570}
+      resizable>
       <Window.Content scrollable>
         <NaniteChamberControlContent />
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/NaniteCloudControl.js b/tgui/packages/tgui/interfaces/NaniteCloudControl.js
index 3ecfcef92c..e9eb566464 100644
--- a/tgui/packages/tgui/interfaces/NaniteCloudControl.js
+++ b/tgui/packages/tgui/interfaces/NaniteCloudControl.js
@@ -10,7 +10,6 @@ export const NaniteDiskBox = (props, context) => {
     has_program,
     disk,
   } = data;
-
   if (!has_disk) {
     return (
       <NoticeBox>
@@ -18,7 +17,6 @@ export const NaniteDiskBox = (props, context) => {
       </NoticeBox>
     );
   }
-
   if (!has_program) {
     return (
       <NoticeBox>
@@ -26,7 +24,6 @@ export const NaniteDiskBox = (props, context) => {
       </NoticeBox>
     );
   }
-
   return (
     <NaniteInfoBox program={disk} />
   );
@@ -34,7 +31,6 @@ export const NaniteDiskBox = (props, context) => {
 
 export const NaniteInfoBox = (props, context) => {
   const { program } = props;
-
   const {
     name,
     desc,
@@ -52,9 +48,7 @@ export const NaniteInfoBox = (props, context) => {
     timer_trigger,
     timer_trigger_delay,
   } = program;
-
   const extra_settings = program.extra_settings || [];
-
   return (
     <Section
       title={name}
@@ -165,18 +159,16 @@ export const NaniteInfoBox = (props, context) => {
 export const NaniteCloudBackupList = (props, context) => {
   const { act, data } = useBackend(context);
   const cloud_backups = data.cloud_backups || [];
-  return (
-    cloud_backups.map(backup => (
-      <Button
-        fluid
-        key={backup.cloud_id}
-        content={"Backup #" + backup.cloud_id}
-        textAlign="center"
-        onClick={() => act('set_view', {
-          view: backup.cloud_id,
-        })} />
-    ))
-  );
+  return cloud_backups.map(backup => (
+    <Button
+      fluid
+      key={backup.cloud_id}
+      content={"Backup #" + backup.cloud_id}
+      textAlign="center"
+      onClick={() => act('set_view', {
+        view: backup.cloud_id,
+      })} />
+  ));
 };
 
 export const NaniteCloudBackupDetails = (props, context) => {
@@ -187,9 +179,7 @@ export const NaniteCloudBackupDetails = (props, context) => {
     has_program,
     cloud_backup,
   } = data;
-
   const can_rule = (disk && disk.can_rule) || false;
-
   if (!cloud_backup) {
     return (
       <NoticeBox>
@@ -197,9 +187,7 @@ export const NaniteCloudBackupDetails = (props, context) => {
       </NoticeBox>
     );
   }
-
   const cloud_programs = data.cloud_programs || [];
-
   return (
     <Section
       title={"Backup #" + current_view}
@@ -278,9 +266,11 @@ export const NaniteCloudControl = (props, context) => {
     current_view,
     new_backup_id,
   } = data;
-
   return (
-    <Window resizable>
+    <Window
+      width={375}
+      height={700}
+      resizable>
       <Window.Content scrollable>
         <Section
           title="Program Disk"
diff --git a/tgui/packages/tgui/interfaces/NaniteProgramHub.js b/tgui/packages/tgui/interfaces/NaniteProgramHub.js
index 198fad0b83..619357d9a2 100644
--- a/tgui/packages/tgui/interfaces/NaniteProgramHub.js
+++ b/tgui/packages/tgui/interfaces/NaniteProgramHub.js
@@ -21,7 +21,10 @@ export const NaniteProgramHub = (props, context) => {
     && programs[selectedCategory]
     || [];
   return (
-    <Window resizable>
+    <Window
+      width={500}
+      height={700}
+      resizable>
       <Window.Content scrollable>
         <Section
           title="Program Disk"
diff --git a/tgui/packages/tgui/interfaces/NaniteProgrammer.js b/tgui/packages/tgui/interfaces/NaniteProgrammer.js
index 1c9f7fdebb..7091d87148 100644
--- a/tgui/packages/tgui/interfaces/NaniteProgrammer.js
+++ b/tgui/packages/tgui/interfaces/NaniteProgrammer.js
@@ -5,7 +5,6 @@ import { Window } from '../layouts';
 
 export const NaniteCodes = (props, context) => {
   const { act, data } = useBackend(context);
-
   return (
     <Section
       title="Codes"
@@ -228,7 +227,10 @@ export const NaniteExtraBoolean = (props, context) => {
 
 export const NaniteProgrammer = (props, context) => {
   return (
-    <Window resizable>
+    <Window
+      width={420}
+      height={550}
+      resizable>
       <Window.Content scrollable>
         <NaniteProgrammerContent />
       </Window.Content>
@@ -251,7 +253,6 @@ export const NaniteProgrammerContent = (props, context) => {
     has_extra_settings,
     extra_settings = {},
   } = data;
-
   if (!has_disk) {
     return (
       <NoticeBox textAlign="center">
@@ -259,7 +260,6 @@ export const NaniteProgrammerContent = (props, context) => {
       </NoticeBox>
     );
   }
-
   if (!has_program) {
     return (
       <Section
@@ -272,7 +272,6 @@ export const NaniteProgrammerContent = (props, context) => {
         )} />
     );
   }
-
   return (
     <Section
       title={name}
diff --git a/tgui/packages/tgui/interfaces/NaniteRemote.js b/tgui/packages/tgui/interfaces/NaniteRemote.js
index c7a188296a..5108172f19 100644
--- a/tgui/packages/tgui/interfaces/NaniteRemote.js
+++ b/tgui/packages/tgui/interfaces/NaniteRemote.js
@@ -5,7 +5,10 @@ import { Window } from '../layouts';
 
 export const NaniteRemote = (props, context) => {
   return (
-    <Window resizable>
+    <Window
+      width={420}
+      height={500}
+      resizable>
       <Window.Content scrollable>
         <NaniteRemoteContent />
       </Window.Content>
@@ -51,7 +54,7 @@ export const NaniteRemoteContent = (props, context) => {
             icon="lock"
             content="Lock Interface"
             onClick={() => act('lock')} />
-        )} >
+        )}>
         <LabeledList>
           <LabeledList.Item label="Name">
             <Input
@@ -66,7 +69,7 @@ export const NaniteRemoteContent = (props, context) => {
               content="Save"
               onClick={() => act('save')} />
           </LabeledList.Item>
-          <LabeledList.Item label={comms ? "Comm Code" : "Signal Code"} >
+          <LabeledList.Item label={comms ? "Comm Code" : "Signal Code"}>
             <NumberInput
               value={code}
               minValue={0}
@@ -135,7 +138,7 @@ export const NaniteRemoteContent = (props, context) => {
             {saved_settings.map(setting => (
               <Table.Row
                 key={setting.id}
-                className="candystripe" >
+                className="candystripe">
                 <Table.Cell bold color="label">
                   {setting.name}:
                 </Table.Cell>
diff --git a/tgui/packages/tgui/interfaces/NotificationPreferences.js b/tgui/packages/tgui/interfaces/NotificationPreferences.js
index b46e12504c..3d8e4d15da 100644
--- a/tgui/packages/tgui/interfaces/NotificationPreferences.js
+++ b/tgui/packages/tgui/interfaces/NotificationPreferences.js
@@ -4,7 +4,6 @@ import { Window } from '../layouts';
 
 export const NotificationPreferences = (props, context) => {
   const { act, data } = useBackend(context);
-
   const ignoresPreSort = data.ignore || [];
   const ignores = ignoresPreSort.sort((a, b) => {
     const descA = a.desc.toLowerCase();
@@ -17,9 +16,12 @@ export const NotificationPreferences = (props, context) => {
     }
     return 0;
   });
-
   return (
-    <Window resizable>
+    <Window
+      title="Notification Preferences"
+      width={270}
+      height={360}
+      resizable>
       <Window.Content scrollable>
         <Section title="Ghost Role Notifications">
           {ignores.map(ignore => (
diff --git a/tgui/packages/tgui/interfaces/NtnetRelay.js b/tgui/packages/tgui/interfaces/NtnetRelay.js
index 69d6b4dd8d..b41723edad 100644
--- a/tgui/packages/tgui/interfaces/NtnetRelay.js
+++ b/tgui/packages/tgui/interfaces/NtnetRelay.js
@@ -4,16 +4,17 @@ import { Window } from '../layouts';
 
 export const NtnetRelay = (props, context) => {
   const { act, data } = useBackend(context);
-
   const {
     enabled,
     dos_capacity,
     dos_overload,
     dos_crashed,
   } = data;
-
   return (
-    <Window>
+    <Window
+      title="NtNet Quantum Relay"
+      width={400}
+      height={300}>
       <Window.Content>
         <Section
           title="Network Buffer"
diff --git a/tgui/packages/tgui/interfaces/NtosAiRestorer.js b/tgui/packages/tgui/interfaces/NtosAiRestorer.js
index 4783de3f5c..b305a16158 100644
--- a/tgui/packages/tgui/interfaces/NtosAiRestorer.js
+++ b/tgui/packages/tgui/interfaces/NtosAiRestorer.js
@@ -3,7 +3,10 @@ import { AiRestorerContent } from './AiRestorer';
 
 export const NtosAiRestorer = () => {
   return (
-    <NtosWindow resizable>
+    <NtosWindow
+      width={370}
+      height={400}
+      resizable>
       <NtosWindow.Content scrollable>
         <AiRestorerContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosArcade.js b/tgui/packages/tgui/interfaces/NtosArcade.js
index d6048e2e1e..f0f7241ab8 100644
--- a/tgui/packages/tgui/interfaces/NtosArcade.js
+++ b/tgui/packages/tgui/interfaces/NtosArcade.js
@@ -1,3 +1,4 @@
+import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
 import { AnimatedNumber, Box, Button, Grid, LabeledList, ProgressBar, Section } from '../components';
 import { NtosWindow } from '../layouts';
@@ -5,7 +6,9 @@ import { NtosWindow } from '../layouts';
 export const NtosArcade = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <NtosWindow>
+    <NtosWindow
+      width={450}
+      height={350}>
       <NtosWindow.Content>
         <Section
           title="Outbomb Cuban Pete Ultra"
@@ -71,7 +74,7 @@ export const NtosArcade = (props, context) => {
                   inline
                   width="156px"
                   textAlign="center">
-                  <img src={data.BossID} />
+                  <img src={resolveAsset(data.BossID)} />
                 </Section>
               </Grid.Column>
             </Grid>
diff --git a/tgui/packages/tgui/interfaces/NtosAtmos.js b/tgui/packages/tgui/interfaces/NtosAtmos.js
index 0356cc2994..0e8141b9ea 100644
--- a/tgui/packages/tgui/interfaces/NtosAtmos.js
+++ b/tgui/packages/tgui/interfaces/NtosAtmos.js
@@ -18,7 +18,10 @@ export const NtosAtmos = (props, context) => {
   ])(data.AirData || []);
   const gasMaxPercentage = Math.max(1, ...gases.map(gas => gas.percentage));
   return (
-    <NtosWindow resizable>
+    <NtosWindow
+      width={300}
+      height={350}
+      resizable>
       <NtosWindow.Content scrollable>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/NtosBountyConsole.js b/tgui/packages/tgui/interfaces/NtosBountyConsole.js
new file mode 100644
index 0000000000..bfd2b0e4c9
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/NtosBountyConsole.js
@@ -0,0 +1,119 @@
+import { useBackend } from '../backend';
+import { AnimatedNumber, Box, Button, Section, Table } from '../components';
+import { formatMoney } from '../format';
+import { NtosWindow } from '../layouts';
+
+export const NtosBountyConsole = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    bountydata = [],
+  } = data;
+  return (
+    <NtosWindow
+      width={750}
+      height={600}
+      resizable>
+      <NtosWindow.Content scrollable>
+        <Section
+          title={<BountyHeader />}
+          buttons={(
+            <Button
+              icon="print"
+              content="Print Bounty List"
+              onClick={() => act('Print')} />
+          )}>
+          <Table border>
+            <Table.Row
+              bold
+              italic
+              color="label"
+              fontSize={1.25}>
+              <Table.Cell p={1} textAlign="center">
+                Bounty Object
+              </Table.Cell>
+              <Table.Cell p={1} textAlign="center">
+                Description
+              </Table.Cell>
+              <Table.Cell p={1} textAlign="center">
+                Progress
+              </Table.Cell>
+              <Table.Cell p={1} textAlign="center">
+                Value
+              </Table.Cell>
+              <Table.Cell p={1} textAlign="center">
+                Claim
+              </Table.Cell>
+            </Table.Row>
+            {bountydata.map(bounty => (
+              <Table.Row
+                key={bounty.name}
+                backgroundColor={bounty.priority === 1
+                  ? 'rgba(252, 152, 3, 0.25)'
+                  : ''}>
+                <Table.Cell bold p={1}>
+                  {bounty.name}
+                </Table.Cell>
+                <Table.Cell
+                  italic
+                  textAlign="center"
+                  p={1}>
+                  {bounty.description}
+                </Table.Cell>
+                <Table.Cell
+                  bold
+                  p={1}
+                  textAlign="center">
+                  {bounty.priority === 1
+                    ? <Box>High Priority</Box>
+                    : ""}
+                  {bounty.completion_string}
+                </Table.Cell>
+                <Table.Cell
+                  bold
+                  p={1}
+                  textAlign="center">
+                  {bounty.reward_string}
+                </Table.Cell>
+                <Table.Cell
+                  bold
+                  p={1}>
+                  <Button
+                    fluid
+                    textAlign="center"
+                    icon={bounty.claimed === 1
+                      ? "check"
+                      : ""}
+                    content={bounty.claimed === 1
+                      ? "Claimed"
+                      : "Claim"}
+                    disabled={bounty.claimed === 1}
+                    color={bounty.can_claim === 1
+                      ? 'green'
+                      : 'red'}
+                    onClick={() => act('ClaimBounty', {
+                      bounty: bounty.bounty_ref,
+                    })} />
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table>
+        </Section>
+      </NtosWindow.Content>
+    </NtosWindow>
+  );
+};
+
+const BountyHeader = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    stored_cash,
+  } = data;
+  return (
+    <Box inline bold>
+      <AnimatedNumber
+        value={stored_cash}
+        format={value => formatMoney(value)} />
+      {' credits'}
+    </Box>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/NtosCard.js b/tgui/packages/tgui/interfaces/NtosCard.js
index 95d7754b83..3b114589a9 100644
--- a/tgui/packages/tgui/interfaces/NtosCard.js
+++ b/tgui/packages/tgui/interfaces/NtosCard.js
@@ -6,7 +6,10 @@ import { AccessList } from './common/AccessList';
 
 export const NtosCard = (props, context) => {
   return (
-    <NtosWindow resizable>
+    <NtosWindow
+      width={450}
+      height={520}
+      resizable>
       <NtosWindow.Content scrollable>
         <NtosCardContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosConfiguration.js b/tgui/packages/tgui/interfaces/NtosConfiguration.js
index 0a86ccb728..2d60a6dd76 100644
--- a/tgui/packages/tgui/interfaces/NtosConfiguration.js
+++ b/tgui/packages/tgui/interfaces/NtosConfiguration.js
@@ -5,8 +5,8 @@ import { NtosWindow } from '../layouts';
 
 export const NtosConfiguration = (props, context) => {
   const { act, data } = useBackend(context);
-
   const {
+    PC_device_theme,
     power_usage,
     battery_exists,
     battery = {},
@@ -14,9 +14,12 @@ export const NtosConfiguration = (props, context) => {
     disk_used,
     hardware = [],
   } = data;
-
   return (
-    <NtosWindow resizable>
+    <NtosWindow
+      theme={PC_device_theme}
+      width={420}
+      height={630}
+      resizable>
       <NtosWindow.Content scrollable>
         <Section
           title="Power Supply"
@@ -72,8 +75,7 @@ export const NtosConfiguration = (props, context) => {
                       mr={1}
                       onClick={() => act('PC_toggle_component', {
                         name: component.name,
-                      })}
-                    />
+                      })} />
                   )}
                   <Box
                     inline
diff --git a/tgui/packages/tgui/interfaces/NtosCrewManifest.js b/tgui/packages/tgui/interfaces/NtosCrewManifest.js
index d1b477fddf..744c6965a9 100644
--- a/tgui/packages/tgui/interfaces/NtosCrewManifest.js
+++ b/tgui/packages/tgui/interfaces/NtosCrewManifest.js
@@ -1,18 +1,19 @@
+import { map } from 'common/collections';
 import { useBackend } from '../backend';
 import { Button, Section, Table } from '../components';
-import { map } from 'common/collections';
 import { NtosWindow } from '../layouts';
 
 export const NtosCrewManifest = (props, context) => {
   const { act, data } = useBackend(context);
-
   const {
     have_printer,
     manifest = {},
   } = data;
-
   return (
-    <NtosWindow resizable>
+    <NtosWindow
+      width={400}
+      height={480}
+      resizable>
       <NtosWindow.Content scrollable>
         <Section
           title="Crew Manifest"
diff --git a/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js b/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js
index 6fe9bc8f67..ce562f5236 100644
--- a/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js
+++ b/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js
@@ -4,12 +4,11 @@ import { Box, Button, LabeledList, NoticeBox, Section } from '../components';
 import { NtosWindow } from '../layouts';
 
 export const NtosCyborgRemoteMonitor = (props, context) => {
-  const { data } = useBackend(context);
-  const {
-    theme,
-  } = data;
   return (
-    <NtosWindow theme={data.theme}>
+    <NtosWindow
+      width={600}
+      height={800}
+      resizable>
       <NtosWindow.Content scrollable>
         <NtosCyborgRemoteMonitorContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js b/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js
index 07a0038544..efa93513e7 100644
--- a/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js
+++ b/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js
@@ -1,12 +1,12 @@
-import { Fragment } from 'inferno';
-import { useBackend } from '../backend';
-import { Box, Button, LabeledList, NoticeBox, Section } from '../components';
 import { NtosWindow } from '../layouts';
 import { NtosCyborgRemoteMonitorContent } from './NtosCyborgRemoteMonitor';
 
 export const NtosCyborgRemoteMonitorSyndicate = (props, context) => {
   return (
-    <NtosWindow theme="syndicate">
+    <NtosWindow
+      width={600}
+      height={800}
+      theme="syndicate">
       <NtosWindow.Content scrollable>
         <NtosCyborgRemoteMonitorContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosFileManager.js b/tgui/packages/tgui/interfaces/NtosFileManager.js
index 9e5da68298..da762e459f 100644
--- a/tgui/packages/tgui/interfaces/NtosFileManager.js
+++ b/tgui/packages/tgui/interfaces/NtosFileManager.js
@@ -6,12 +6,13 @@ import { NtosWindow } from '../layouts';
 export const NtosFileManager = (props, context) => {
   const { act, data } = useBackend(context);
   const {
+    PC_device_theme,
     usbconnected,
     files = [],
     usbfiles = [],
   } = data;
   return (
-    <NtosWindow resizable>
+    <NtosWindow resizable theme={PC_device_theme}>
       <NtosWindow.Content scrollable>
         <Section>
           <FileTable
diff --git a/tgui/packages/tgui/interfaces/NtosJobManager.js b/tgui/packages/tgui/interfaces/NtosJobManager.js
index 06dd96ff26..a5ccf84278 100644
--- a/tgui/packages/tgui/interfaces/NtosJobManager.js
+++ b/tgui/packages/tgui/interfaces/NtosJobManager.js
@@ -4,7 +4,10 @@ import { NtosWindow } from '../layouts';
 
 export const NtosJobManager = (props, context) => {
   return (
-    <NtosWindow resizable>
+    <NtosWindow
+      width={400}
+      height={620}
+      resizable>
       <NtosWindow.Content scrollable>
         <NtosJobManagerContent />
       </NtosWindow.Content>
@@ -14,14 +17,12 @@ export const NtosJobManager = (props, context) => {
 
 export const NtosJobManagerContent = (props, context) => {
   const { act, data } = useBackend(context);
-
   const {
     authed,
     cooldown,
     slots = [],
     prioritized = [],
   } = data;
-
   if (!authed) {
     return (
       <NoticeBox>
@@ -29,7 +30,6 @@ export const NtosJobManagerContent = (props, context) => {
       </NoticeBox>
     );
   }
-
   return (
     <Section>
       {cooldown > 0 && (
@@ -64,8 +64,7 @@ export const NtosJobManagerContent = (props, context) => {
                 checked={slot.total > 0 && prioritized.includes(slot.title)}
                 onClick={() => act('PRG_priority', {
                   target: slot.title,
-                })}
-              />
+                })} />
             </Table.Cell>
             <Table.Cell collapsing>
               {slot.current} / {slot.total}
@@ -76,15 +75,13 @@ export const NtosJobManagerContent = (props, context) => {
                 disabled={!slot.status_open}
                 onClick={() => act('PRG_open_job', {
                   target: slot.title,
-                })}
-              />
+                })} />
               <Button
                 content="Close"
                 disabled={!slot.status_close}
                 onClick={() => act('PRG_close_job', {
                   target: slot.title,
-                })}
-              />
+                })} />
             </Table.Cell>
           </Table.Row>
         ))}
diff --git a/tgui/packages/tgui/interfaces/NtosMain.js b/tgui/packages/tgui/interfaces/NtosMain.js
index d03e9ba4b3..c61767bd7b 100644
--- a/tgui/packages/tgui/interfaces/NtosMain.js
+++ b/tgui/packages/tgui/interfaces/NtosMain.js
@@ -23,13 +23,21 @@ const PROGRAM_ICONS = {
 export const NtosMain = (props, context) => {
   const { act, data } = useBackend(context);
   const {
+    device_theme,
     programs = [],
     has_light,
     light_on,
     comp_light_color,
   } = data;
   return (
-    <NtosWindow resizable>
+    <NtosWindow
+      title={device_theme === 'syndicate'
+        && 'Syndix Main Menu'
+        || 'NtOS Main Menu'}
+      theme={device_theme}
+      width={400}
+      height={500}
+      resizable>
       <NtosWindow.Content scrollable>
         {!!has_light && (
           <Section>
@@ -55,7 +63,6 @@ export const NtosMain = (props, context) => {
                 <Table.Cell>
                   <Button
                     fluid
-                    lineHeight="24px"
                     color="transparent"
                     icon={PROGRAM_ICONS[program.name]
                       || 'window-maximize-o'}
@@ -67,7 +74,6 @@ export const NtosMain = (props, context) => {
                 <Table.Cell collapsing width="18px">
                   {!!program.running && (
                     <Button
-                      lineHeight="24px"
                       color="transparent"
                       icon="times"
                       tooltip="Close program"
diff --git a/tgui/packages/tgui/interfaces/NtosNetChat.js b/tgui/packages/tgui/interfaces/NtosNetChat.js
index 7c5c4656b6..13e9e1e74c 100644
--- a/tgui/packages/tgui/interfaces/NtosNetChat.js
+++ b/tgui/packages/tgui/interfaces/NtosNetChat.js
@@ -1,11 +1,10 @@
-import { useBackend } from '../backend';
-import { Box, Button, Section, Input, Table, Icon } from '../components';
 import { Fragment } from 'inferno';
+import { useBackend } from '../backend';
+import { Box, Button, Icon, Input, Section, Table } from '../components';
 import { NtosWindow } from '../layouts';
 
 export const NtosNetChat = (props, context) => {
   const { act, data } = useBackend(context);
-
   const {
     can_admin,
     adminmode,
@@ -17,17 +16,15 @@ export const NtosNetChat = (props, context) => {
     clients = [],
     messages = [],
   } = data;
-
   const in_channel = (active_channel !== null);
   const authorized = (authed || adminmode);
-
   return (
-    <NtosWindow>
+    <NtosWindow
+      width={900}
+      height={675}>
       <NtosWindow.Content>
-        <Section
-          height="600px">
-          <Table
-            height="580px">
+        <Section height="600px">
+          <Table height="580px">
             <Table.Row>
               <Table.Cell
                 verticalAlign="top"
@@ -104,7 +101,6 @@ export const NtosNetChat = (props, context) => {
                     )
                   )}
                 </Box>
-
                 <Input
                   fluid
                   selfClear
diff --git a/tgui/packages/tgui/interfaces/NtosNetDos.js b/tgui/packages/tgui/interfaces/NtosNetDos.js
index 4d1cd5d426..f2768e792a 100644
--- a/tgui/packages/tgui/interfaces/NtosNetDos.js
+++ b/tgui/packages/tgui/interfaces/NtosNetDos.js
@@ -1,12 +1,14 @@
-import { Section, Button, LabeledList, Box, NoticeBox } from "../components";
-import { useBackend } from "../backend";
-import { createLogger } from "../logging";
-import { Fragment } from "inferno";
-import { NtosWindow } from "../layouts";
+import { Fragment } from 'inferno';
+import { useBackend } from '../backend';
+import { Box, Button, LabeledList, NoticeBox, Section } from '../components';
+import { NtosWindow } from '../layouts';
 
 export const NtosNetDos = (props, context) => {
   return (
-    <NtosWindow theme="syndicate">
+    <NtosWindow
+      width={400}
+      height={250}
+      theme="syndicate">
       <NtosWindow.Content>
         <NtosNetDosContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosNetDownloader.js b/tgui/packages/tgui/interfaces/NtosNetDownloader.js
index e1f8871167..24d127455a 100644
--- a/tgui/packages/tgui/interfaces/NtosNetDownloader.js
+++ b/tgui/packages/tgui/interfaces/NtosNetDownloader.js
@@ -5,6 +5,7 @@ import { NtosWindow } from '../layouts';
 export const NtosNetDownloader = (props, context) => {
   const { act, data } = useBackend(context);
   const {
+    PC_device_theme,
     disk_size,
     disk_used,
     downloadable_programs = [],
@@ -13,7 +14,11 @@ export const NtosNetDownloader = (props, context) => {
     hackedavailable,
   } = data;
   return (
-    <NtosWindow resizable>
+    <NtosWindow
+      theme={PC_device_theme}
+      width={480}
+      height={735}
+      resizable>
       <NtosWindow.Content scrollable>
         {!!error && (
           <NoticeBox>
diff --git a/tgui/packages/tgui/interfaces/NtosPowerMonitor.js b/tgui/packages/tgui/interfaces/NtosPowerMonitor.js
index a9f6d2e8fc..c178fa7663 100644
--- a/tgui/packages/tgui/interfaces/NtosPowerMonitor.js
+++ b/tgui/packages/tgui/interfaces/NtosPowerMonitor.js
@@ -3,7 +3,10 @@ import { PowerMonitorContent } from './PowerMonitor';
 
 export const NtosPowerMonitor = () => {
   return (
-    <NtosWindow resizable>
+    <NtosWindow
+      width={550}
+      height={700}
+      resizable>
       <NtosWindow.Content scrollable>
         <PowerMonitorContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosRadar.js b/tgui/packages/tgui/interfaces/NtosRadar.js
index ca38935056..2d2fe6a452 100644
--- a/tgui/packages/tgui/interfaces/NtosRadar.js
+++ b/tgui/packages/tgui/interfaces/NtosRadar.js
@@ -1,12 +1,15 @@
-import { Fragment } from 'inferno';
-import { useBackend } from '../backend';
 import { classes } from 'common/react';
-import { Box, Button, LabeledList, NoticeBox, Section, Table, Flex, Icon } from '../components';
+import { resolveAsset } from '../assets';
+import { useBackend } from '../backend';
+import { Box, Button, Flex, Icon, NoticeBox, Section } from '../components';
 import { NtosWindow } from '../layouts';
 
 export const NtosRadar = (props, context) => {
   return (
-    <NtosWindow theme="ntos">
+    <NtosWindow
+      width={800}
+      height={600}
+      theme="ntos">
       <NtosRadarContent />
     </NtosWindow>
   );
@@ -20,9 +23,8 @@ export const NtosRadarContent = (props, context) => {
     target = [],
     scanning,
   } = data;
-
   return (
-    <Flex 
+    <Flex
       direction={"row"}
       hight="100%">
       <Flex.Item
@@ -67,7 +69,9 @@ export const NtosRadarContent = (props, context) => {
       </Flex.Item>
       <Flex.Item
         style={{
-          'background-image': 'url("ntosradarbackground.png")',
+          'background-image': 'url("'
+            + resolveAsset('ntosradarbackground.png')
+            + '")',
           'background-position': 'center',
           'background-repeat': 'no-repeat',
           'top': '20px',
@@ -90,23 +94,21 @@ export const NtosRadarContent = (props, context) => {
           )
           : !!target.userot && (
             <Box as="img"
-              src={target.arrowstyle}
+              src={resolveAsset(target.arrowstyle)}
               position="absolute"
               top="20px"
               left="243px"
               style={{
                 'transform': `rotate(${target.rot}deg)`,
-              }}
-            />
+              }} />
           ) || (
             <Icon
               name={target.pointer}
               position="absolute"
               size={2}
               color={target.color}
-              top={((target.locy * 10) + 29) + 'px'}
-              left={((target.locx * 10) + 16) + 'px'}
-            />
+              top={((target.locy * 10) + 19) + 'px'}
+              left={((target.locx * 10) + 16) + 'px'} />
           )}
       </Flex.Item>
     </Flex>
diff --git a/tgui/packages/tgui/interfaces/NtosRadarSyndicate.js b/tgui/packages/tgui/interfaces/NtosRadarSyndicate.js
index 2079ce6bcf..3cb4626bb9 100644
--- a/tgui/packages/tgui/interfaces/NtosRadarSyndicate.js
+++ b/tgui/packages/tgui/interfaces/NtosRadarSyndicate.js
@@ -1,14 +1,13 @@
-import { Fragment } from 'inferno';
-import { useBackend } from '../backend';
-import { classes } from 'common/react';
-import { Box, Button, LabeledList, NoticeBox, Section, Table, Flex, Icon } from '../components';
 import { NtosWindow } from '../layouts';
 import { NtosRadarContent } from './NtosRadar';
 
 export const NtosRadarSyndicate = (props, context) => {
   return (
-    <NtosWindow theme="syndicate">
+    <NtosWindow
+      width={800}
+      height={600}
+      theme="syndicate">
       <NtosRadarContent />
     </NtosWindow>
   );
-};
\ No newline at end of file
+};
diff --git a/tgui/packages/tgui/interfaces/NtosRevelation.js b/tgui/packages/tgui/interfaces/NtosRevelation.js
index c4df0fa5b2..6431375011 100644
--- a/tgui/packages/tgui/interfaces/NtosRevelation.js
+++ b/tgui/packages/tgui/interfaces/NtosRevelation.js
@@ -1,20 +1,23 @@
-import { Section, Button, LabeledList } from "../components";
-import { useBackend } from "../backend";
-import { NtosWindow } from "../layouts";
+import { Section, Button, LabeledList } from '../components';
+import { useBackend } from '../backend';
+import { NtosWindow } from '../layouts';
 
 export const NtosRevelation = (props, context) => {
   const { act, data } = useBackend(context);
-
   return (
-    <NtosWindow theme="syndicate">
+    <NtosWindow
+      width={400}
+      height={250}
+      theme="syndicate">
       <NtosWindow.Content>
         <Section>
           <Button.Input
             fluid
             content="Obfuscate Name..."
-            onCommit={(e, value) => act('PRG_obfuscate', { new_name: value })}
-            mb={1}
-          />
+            onCommit={(e, value) => act('PRG_obfuscate', {
+              new_name: value,
+            })}
+            mb={1} />
           <LabeledList>
             <LabeledList.Item
               label="Payload Status"
@@ -22,10 +25,8 @@ export const NtosRevelation = (props, context) => {
                 <Button
                   content={data.armed ? 'ARMED' : 'DISARMED'}
                   color={data.armed ? 'bad' : 'average'}
-                  onClick={() => act('PRG_arm')}
-                />
-              )}
-            />
+                  onClick={() => act('PRG_arm')} />
+              )} />
           </LabeledList>
           <Button
             fluid
@@ -33,8 +34,7 @@ export const NtosRevelation = (props, context) => {
             content="ACTIVATE"
             textAlign="center"
             color="bad"
-            disabled={!data.armed}
-          />
+            disabled={!data.armed} />
         </Section>
       </NtosWindow.Content>
     </NtosWindow>
diff --git a/tgui/packages/tgui/interfaces/NtosRoboControl.js b/tgui/packages/tgui/interfaces/NtosRoboControl.js
index 6bab7b9948..7343fadc23 100644
--- a/tgui/packages/tgui/interfaces/NtosRoboControl.js
+++ b/tgui/packages/tgui/interfaces/NtosRoboControl.js
@@ -15,7 +15,10 @@ export const NtosRoboControl = (props, context) => {
     has_id,
   } = data;
   return (
-    <NtosWindow resizable>
+    <NtosWindow
+      width={550}
+      height={550}
+      resizable>
       <NtosWindow.Content scrollable>
         <Section title="Robot Control Console">
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/NtosShipping.js b/tgui/packages/tgui/interfaces/NtosShipping.js
index ac387b2ef9..0ff0704cd1 100644
--- a/tgui/packages/tgui/interfaces/NtosShipping.js
+++ b/tgui/packages/tgui/interfaces/NtosShipping.js
@@ -5,7 +5,10 @@ import { NtosWindow } from '../layouts';
 export const NtosShipping = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <NtosWindow resizable>
+    <NtosWindow
+      width={450}
+      height={350}
+      resizable>
       <NtosWindow.Content scrollable>
         <Section
           title="NTOS Shipping Hub."
diff --git a/tgui/packages/tgui/interfaces/NtosStationAlertConsole.js b/tgui/packages/tgui/interfaces/NtosStationAlertConsole.js
index 67fdbcc936..6e303bcf27 100644
--- a/tgui/packages/tgui/interfaces/NtosStationAlertConsole.js
+++ b/tgui/packages/tgui/interfaces/NtosStationAlertConsole.js
@@ -3,7 +3,10 @@ import { StationAlertConsoleContent } from './StationAlertConsole';
 
 export const NtosStationAlertConsole = () => {
   return (
-    <NtosWindow resizable>
+    <NtosWindow
+      width={315}
+      height={500}
+      resizable>
       <NtosWindow.Content scrollable>
         <StationAlertConsoleContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NtosSupermatterMonitor.js b/tgui/packages/tgui/interfaces/NtosSupermatterMonitor.js
index c62eb5686f..9975113334 100644
--- a/tgui/packages/tgui/interfaces/NtosSupermatterMonitor.js
+++ b/tgui/packages/tgui/interfaces/NtosSupermatterMonitor.js
@@ -10,7 +10,10 @@ const logScale = value => Math.log2(16 + Math.max(0, value)) - 4;
 
 export const NtosSupermatterMonitor = (props, context) => {
   return (
-    <NtosWindow resizable>
+    <NtosWindow
+      width={600}
+      height={350}
+      resizable>
       <NtosWindow.Content scrollable>
         <NtosSupermatterMonitorContent />
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui/interfaces/NuclearBomb.js b/tgui/packages/tgui/interfaces/NuclearBomb.js
index a708602469..0a4a3324b1 100644
--- a/tgui/packages/tgui/interfaces/NuclearBomb.js
+++ b/tgui/packages/tgui/interfaces/NuclearBomb.js
@@ -24,11 +24,11 @@ const NukeKeypad = (props, context) => {
                 fluid
                 bold
                 key={key}
-                mb={1}
+                mb="6px"
                 content={key}
                 textAlign="center"
                 fontSize="40px"
-                lineHeight="50px"
+                lineHeight={1.25}
                 width="55px"
                 className={classes([
                   'NuclearBomb__Button',
@@ -53,11 +53,14 @@ export const NuclearBomb = (props, context) => {
     status2,
   } = data;
   return (
-    <Window theme="retro">
+    <Window
+      width={350}
+      height={442}
+      theme="retro">
       <Window.Content>
-        <Box m={1}>
+        <Box m="6px">
           <Box
-            mb={1}
+            mb="6px"
             className="NuclearBomb__displayBox">
             {status1}
           </Box>
@@ -71,10 +74,10 @@ export const NuclearBomb = (props, context) => {
               <Button
                 icon="eject"
                 fontSize="24px"
-                lineHeight="23px"
+                lineHeight={1}
                 textAlign="center"
                 width="43px"
-                ml={1}
+                ml="6px"
                 mr="3px"
                 mt="3px"
                 className="NuclearBomb__Button NuclearBomb__Button--keypad"
@@ -85,7 +88,7 @@ export const NuclearBomb = (props, context) => {
             <Flex.Item>
               <NukeKeypad />
             </Flex.Item>
-            <Flex.Item ml={1} width="129px">
+            <Flex.Item ml="6px" width="129px">
               <Box>
                 <Button
                   fluid
@@ -93,8 +96,8 @@ export const NuclearBomb = (props, context) => {
                   content="ARM"
                   textAlign="center"
                   fontSize="28px"
-                  lineHeight="32px"
-                  mb={1}
+                  lineHeight={1.1}
+                  mb="6px"
                   className="NuclearBomb__Button NuclearBomb__Button--C"
                   onClick={() => act('arm')} />
                 <Button
@@ -103,7 +106,7 @@ export const NuclearBomb = (props, context) => {
                   content="ANCHOR"
                   textAlign="center"
                   fontSize="28px"
-                  lineHeight="32px"
+                  lineHeight={1.1}
                   className="NuclearBomb__Button NuclearBomb__Button--E"
                   onClick={() => act('anchor')} />
                 <Box
diff --git a/tgui/packages/tgui/interfaces/OperatingComputer.js b/tgui/packages/tgui/interfaces/OperatingComputer.js
index 403c6fa07f..828504ae75 100644
--- a/tgui/packages/tgui/interfaces/OperatingComputer.js
+++ b/tgui/packages/tgui/interfaces/OperatingComputer.js
@@ -25,7 +25,10 @@ const damageTypes = [
 export const OperatingComputer = (props, context) => {
   const [tab, setTab] = useSharedState(context, 'tab', 1);
   return (
-    <Window resizable>
+    <Window
+      width={350}
+      height={470}
+      resizable>
       <Window.Content scrollable>
         <Tabs>
           <Tabs.Tab
diff --git a/tgui/packages/tgui/interfaces/Orbit.js b/tgui/packages/tgui/interfaces/Orbit.js
index 131c63651d..7423dadbc4 100644
--- a/tgui/packages/tgui/interfaces/Orbit.js
+++ b/tgui/packages/tgui/interfaces/Orbit.js
@@ -1,7 +1,8 @@
 import { createSearch } from 'common/string';
-import { Box, Button, Input, Section } from '../components';
-import { Window } from '../layouts';
+import { resolveAsset } from '../assets';
 import { useBackend, useLocalState } from '../backend';
+import { Box, Button, Flex, Icon, Input, Section } from '../components';
+import { Window } from '../layouts';
 
 const PATTERN_DESCRIPTOR = / \[(?:ghost|dead)\]$/;
 const PATTERN_NUMBER = / \(([0-9]+)\)$/;
@@ -44,7 +45,7 @@ const BasicSection = (props, context) => {
           key={thing.name}
           content={thing.name.replace(PATTERN_DESCRIPTOR, "")}
           onClick={() => act("orbit", {
-            name: thing.name,
+            ref: thing.ref,
           })} />
       ))}
     </Section>
@@ -59,7 +60,7 @@ const OrbitedButton = (props, context) => {
     <Button
       color={color}
       onClick={() => act("orbit", {
-        name: thing.name,
+        ref: thing.ref,
       })}>
       {thing.name}
       {thing.orbiters && (
@@ -67,7 +68,7 @@ const OrbitedButton = (props, context) => {
           {"("}{thing.orbiters}{" "}
           <Box
             as="img"
-            src="ghost.png"
+            src={resolveAsset('ghost.png')}
             opacity={0.7} />
           {")"}
         </Box>
@@ -111,24 +112,36 @@ export const Orbit = (props, context) => {
         .filter(searchFor(searchText))
         .sort(compareNumberedText)[0];
       if (member !== undefined) {
-        act("orbit", { name: member.name });
+        act("orbit", { ref: member.ref });
         break;
       }
     }
   };
 
   return (
-    <Window>
+    <Window
+      title="Orbit"
+      width={350}
+      height={700}>
       <Window.Content scrollable>
         <Section>
-          <Input
-            autoFocus
-            fluid
-            value={searchText}
-            onInput={(_, value) => setSearchText(value)}
-            onEnter={(_, value) => orbitMostRelevant(value)} />
+          <Flex>
+            <Flex.Item>
+              <Icon
+                name="search"
+                mr={1} />
+            </Flex.Item>
+            <Flex.Item grow={1}>
+              <Input
+                placeholder="Search..."
+                autoFocus
+                fluid
+                value={searchText}
+                onInput={(_, value) => setSearchText(value)}
+                onEnter={(_, value) => orbitMostRelevant(value)} />
+            </Flex.Item>
+          </Flex>
         </Section>
-
         {antagonists.length > 0 && (
           <Section title="Ghost-Visible Antagonists">
             {sortedAntagonists.map(([name, antags]) => (
diff --git a/tgui/packages/tgui/interfaces/OreBox.js b/tgui/packages/tgui/interfaces/OreBox.js
index fedf59beff..9f9c5a8ece 100644
--- a/tgui/packages/tgui/interfaces/OreBox.js
+++ b/tgui/packages/tgui/interfaces/OreBox.js
@@ -7,7 +7,10 @@ export const OreBox = (props, context) => {
   const { act, data } = useBackend(context);
   const { materials } = data;
   return (
-    <Window resizable>
+    <Window
+      width={335}
+      height={415}
+      resizable>
       <Window.Content scrollable>
         <Section
           title="Ores"
diff --git a/tgui/packages/tgui/interfaces/OreRedemptionMachine.js b/tgui/packages/tgui/interfaces/OreRedemptionMachine.js
index f1bfcd4529..c2a1e5b3dc 100644
--- a/tgui/packages/tgui/interfaces/OreRedemptionMachine.js
+++ b/tgui/packages/tgui/interfaces/OreRedemptionMachine.js
@@ -1,5 +1,5 @@
 import { toTitleCase } from 'common/string';
-import { Component, Fragment } from 'inferno';
+import { Fragment } from 'inferno';
 import { useBackend, useLocalState } from '../backend';
 import { BlockQuote, Box, Button, NumberInput, Section, Table } from '../components';
 import { Window } from '../layouts';
@@ -14,7 +14,11 @@ export const OreRedemptionMachine = (props, context) => {
     hasDisk,
   } = data;
   return (
-    <Window resizable>
+    <Window
+      title="Ore Redemption Machine"
+      width={440}
+      height={550}
+      resizable>
       <Window.Content scrollable>
         <Section>
           <BlockQuote mb={1}>
diff --git a/tgui/packages/tgui/interfaces/Pandemic.js b/tgui/packages/tgui/interfaces/Pandemic.js
index 50555525f5..bddf4a2bc0 100644
--- a/tgui/packages/tgui/interfaces/Pandemic.js
+++ b/tgui/packages/tgui/interfaces/Pandemic.js
@@ -6,16 +6,13 @@ import { Window } from '../layouts';
 
 export const PandemicBeakerDisplay = (props, context) => {
   const { act, data } = useBackend(context);
-
   const {
     has_beaker,
     beaker_empty,
     has_blood,
     blood,
   } = data;
-
   const cant_empty = !has_beaker || beaker_empty;
-
   return (
     <Section
       title="Beaker"
@@ -38,7 +35,7 @@ export const PandemicBeakerDisplay = (props, context) => {
             disabled={!has_beaker}
             onClick={() => act('eject_beaker')} />
         </Fragment>
-      )} >
+      )}>
       {has_beaker ? (
         !beaker_empty ? (
           has_blood ? (
@@ -71,13 +68,10 @@ export const PandemicBeakerDisplay = (props, context) => {
 
 export const PandemicDiseaseDisplay = (props, context) => {
   const { act, data } = useBackend(context);
-
   const {
     is_ready,
   } = data;
-
   const viruses = data.viruses || [];
-
   return (
     viruses.map(virus => {
       const symptoms = virus.symptoms || [];
@@ -102,7 +96,7 @@ export const PandemicDiseaseDisplay = (props, context) => {
               onClick={() => act('create_culture_bottle', {
                 index: virus.index,
               })} />
-          )} >
+          )}>
           <Grid>
             <Grid.Column>
               {virus.description}
@@ -125,7 +119,7 @@ export const PandemicDiseaseDisplay = (props, context) => {
             <Fragment>
               <Section
                 title="Statistics"
-                level={2} >
+                level={2}>
                 <Grid>
                   <Grid.Column>
                     <LabeledList>
@@ -151,11 +145,11 @@ export const PandemicDiseaseDisplay = (props, context) => {
               </Section>
               <Section
                 title="Symptoms"
-                level={2} >
+                level={2}>
                 {symptoms.map(symptom => (
                   <Collapsible
                     key={symptom.name}
-                    title={symptom.name} >
+                    title={symptom.name}>
                     <Section>
                       <PandemicSymptomDisplay symptom={symptom} />
                     </Section>
@@ -182,10 +176,8 @@ export const PandemicSymptomDisplay = (props, context) => {
     level,
     neutered,
   } = symptom;
-
   const thresholds = map((desc, label) => ({ desc, label }))(
     symptom.threshold_desc || {});
-
   return (
     <Section
       title={name}
@@ -193,10 +185,10 @@ export const PandemicSymptomDisplay = (props, context) => {
       buttons={!!neutered && (
         <Box
           bold
-          color="bad" >
+          color="bad">
           Neutered
         </Box>
-      )} >
+      )}>
       <Grid>
         <Grid.Column size={2}>
           {desc}
@@ -224,13 +216,13 @@ export const PandemicSymptomDisplay = (props, context) => {
       {thresholds.length > 0 && (
         <Section
           title="Thresholds"
-          level={3} >
+          level={3}>
           <LabeledList>
             {thresholds.map(threshold => {
               return (
                 <LabeledList.Item
                   key={threshold.label}
-                  label={threshold.label} >
+                  label={threshold.label}>
                   {threshold.desc}
                 </LabeledList.Item>
               );
@@ -240,14 +232,11 @@ export const PandemicSymptomDisplay = (props, context) => {
       )}
     </Section>
   );
-
 };
 
 export const PandemicAntibodyDisplay = (props, context) => {
   const { act, data } = useBackend(context);
-
   const resistances = data.resistances || [];
-
   return (
     <Section title="Antibodies">
       {resistances.length > 0 ? (
@@ -255,7 +244,7 @@ export const PandemicAntibodyDisplay = (props, context) => {
           {resistances.map(resistance => (
             <LabeledList.Item
               key={resistance.name}
-              label={resistance.name} >
+              label={resistance.name}>
               <Button
                 icon="eye-dropper"
                 content="Create vaccine bottle"
@@ -270,7 +259,7 @@ export const PandemicAntibodyDisplay = (props, context) => {
         <Box
           bold
           color="bad"
-          mt={1} >
+          mt={1}>
           No antibodies detected.
         </Box>
       )}
@@ -280,9 +269,11 @@ export const PandemicAntibodyDisplay = (props, context) => {
 
 export const Pandemic = (props, context) => {
   const { data } = useBackend(context);
-
   return (
-    <Window resizable>
+    <Window
+      width={520}
+      height={550}
+      resizable>
       <Window.Content scrollable>
         <PandemicBeakerDisplay />
         {!!data.has_blood && (
diff --git a/tgui/packages/tgui/interfaces/PaperSheet.js b/tgui/packages/tgui/interfaces/PaperSheet.js
index 5970204046..b3f4a945c8 100644
--- a/tgui/packages/tgui/interfaces/PaperSheet.js
+++ b/tgui/packages/tgui/interfaces/PaperSheet.js
@@ -5,24 +5,18 @@
  * @author Changes stylemistake
  * @license MIT
  */
-import { Component } from 'inferno';
-import { Tabs, Box, Flex, TextArea } from '../components';
-import { useBackend } from '../backend';
-import { Window } from '../layouts';
-import marked from 'marked';
-import DOMPurify from 'dompurify';
+
 import { classes, isFalsy } from "common/react";
-// There is a sanatize option in marked but they say its deprecated.
-// Might as well use a proper one then
+import { vecScale, vecSubtract } from 'common/vector';
+import DOMPurify from 'dompurify';
+import { Component } from 'inferno';
+import marked from 'marked';
+import { useBackend } from '../backend';
+import { Box, Flex, Tabs, TextArea } from '../components';
+import { Window } from '../layouts';
 
-import { createLogger } from '../logging';
-import { Fragment } from 'inferno';
-import { vecCreate, vecAdd, vecSubtract } from 'common/vector';
-const logger = createLogger('PaperSheet');
 const MAX_PAPER_LENGTH = 5000; // Question, should we send this with ui_data?
 
-
-
 const sanatize_text = value => {
   // This is VERY important to think first if you NEED
   // the tag you put in here.  We are pushing all this
@@ -40,7 +34,6 @@ const sanatize_text = value => {
   });
 };
 
-
 // Hacky, yes, works?...yes
 const textWidth = (text, font, fontsize) => {
   // default font height is 12 in tgui
@@ -52,7 +45,6 @@ const textWidth = (text, font, fontsize) => {
   return width;
 };
 
-
 const setFontinText = (text, font, color, bold=false) => {
   return "<span style=\""
     + "color:'" + color + "';"
@@ -63,7 +55,6 @@ const setFontinText = (text, font, color, bold=false) => {
     + "\">" + text + "</span>";
 };
 
-const paperfield_id_headder = "paperfield_";
 const createIDHeader = index => {
   return "paperfield_" + index;
 };
@@ -74,10 +65,6 @@ const field_regex = /\[(_+)\]/g;
 const field_tag_regex = /\[<input\s+(.*?)id="(?<id>paperfield_\d+)"(.*?)\/>\]/gm;
 const sign_regex = /%s(?:ign)?(?=\\s|$)/igm;
 
-
-const field_id_regex = /id\s*=\s*'(paperfield_\d+)'/g;
-const field_maxlength_regex = /maxlength\s*=\s*(\d+)/g;
-
 const createInputField = (length, width, font,
   fontsize, color, id) => {
   return "[<input "
@@ -100,7 +87,10 @@ const createFields = (txt, font, fontsize, color, counter) => {
     return createInputField(p1.length,
       width, font, fontsize, color, createIDHeader(counter++));
   });
-  return { counter: counter, text: ret_text };
+  return {
+    counter,
+    text: ret_text,
+  };
 };
 
 const signDocument = (txt, color, user) => {
@@ -108,8 +98,8 @@ const signDocument = (txt, color, user) => {
     return setFontinText(user, "Times New Roman", color, true);
   });
 };
-const run_marked_default = value => {
 
+const run_marked_default = value => {
   // Override function, any links and images should
   // kill any other marked tokens we don't want here
   const walkTokens = token => {
@@ -126,23 +116,14 @@ const run_marked_default = value => {
         break;
     }
   };
-  return marked(value,
-    { breaks: true,
-      smartypants: true,
-      smartLists: true,
-      walkTokens: walkTokens,
-      // Once assets are fixed might need to change this for them
-      baseUrl: "thisshouldbreakhttp",
-    });
-};
-const fillAllfields = fields => {
-  for (const id in fields) {
-    const dom = document.getElementById(id);
-    if (dom) {
-
-    }
-    const dom_text = dom && dom.value ? dom.value : "";
-  }
+  return marked(value, {
+    breaks: true,
+    smartypants: true,
+    smartLists: true,
+    walkTokens,
+    // Once assets are fixed might need to change this for them
+    baseUrl: 'thisshouldbreakhttp',
+  });
 };
 
 /*
@@ -172,19 +153,24 @@ const checkAllFields = (txt, font, color, user_name, bold=false) => {
       // make sure we got data, and kill any html that might
       // be in it
       const dom_text = dom && dom.value ? dom.value : "";
-      if (dom_text.length === 0) { continue; }
-      const sanitized_text
-        = DOMPurify.sanitize(
-          dom.value.trim(), { ALLOWED_TAGS: [] });
-      if (sanitized_text.length === 0) { continue; }
+      if (dom_text.length === 0) {
+        continue;
+      }
+      const sanitized_text = DOMPurify.sanitize(dom.value.trim(), {
+        ALLOWED_TAGS: [],
+      });
+      if (sanitized_text.length === 0) {
+        continue;
+      }
       // this is easyer than doing a bunch of text manipulations
       const target = dom.cloneNode(true);
       // in case they sign in a field
       if (sanitized_text.match(sign_regex)) {
         target.style.fontFamily = "Times New Roman";
-        bold=true;
+        bold = true;
         target.defaultValue = user_name;
-      } else {
+      }
+      else {
         target.style.fontFamily = font;
         target.defaultValue = sanitized_text;
       }
@@ -192,14 +178,10 @@ const checkAllFields = (txt, font, color, user_name, bold=false) => {
         target.style.fontWeight = "bold";
       }
       target.style.color = color;
-
       target.disabled = true;
-
       const wrap = document.createElement('div');
       wrap.appendChild(target);
-
       values[id] = sanitized_text; // save the data
-
       replace.push({ value: "[" + wrap.innerHTML + "]", raw_text: full_match });
     }
   }
@@ -212,7 +194,6 @@ const checkAllFields = (txt, font, color, user_name, bold=false) => {
   return { text: txt, fields: values };
 };
 
-
 const pauseEvent = e => {
   if (e.stopPropagation) { e.stopPropagation(); }
   if (e.preventDefault) { e.preventDefault(); }
@@ -221,14 +202,12 @@ const pauseEvent = e => {
   return false;
 };
 
-
 const Stamp = (props, context) => {
   const {
     image,
     opacity,
     ...rest
   } = props;
-
   const matrix_trasform = 'rotate(' + image.rotate
     + 'deg) translate(' + image.x + 'px,' + image.y + 'px)';
   const stamp_trasform = {
@@ -244,19 +223,14 @@ const Stamp = (props, context) => {
         'paper121x54',
         image.sprite,
       ])}
-      style={stamp_trasform}
-    />
+      style={stamp_trasform} />
   );
 };
-// If the prop dosn't exist OR its not true
-const isFalsyProperty = (obj, prop) => {
-  return Object.prototype.hasOwnProperty.call(obj, prop) && !isFalsy(obj.prop);
-};
 
 const setInputReadonly = (text, readonly) => {
   return readonly
-    ? text.replace(/<input\s[^d]/g, "<input disabled ")
-    : text.replace(/<input\sdisabled\s/g, "<input ");
+    ? text.replace(/<input\s[^d]/g, '<input disabled ')
+    : text.replace(/<input\sdisabled\s/g, '<input ');
 };
 
 // got to make this a full component if we
@@ -271,13 +245,23 @@ const PaperSheetView = (props, context) => {
   } = props;
   const readonly = !isFalsy(readOnly);
   const stamp_list = stamps || [];
-  const text_html = { __html: "<span class='paper-text'>"
-    + setInputReadonly(value, readonly) + "</span>" };
+  const text_html = {
+    __html: '<span class="paper-text">'
+      + setInputReadonly(value, readonly)
+      + '</span>',
+  };
   return (
-    <Box position="relative"
-      backgroundColor={backgroundColor} width="100%" height="100%" >
-      <Box fillPositionedParent={1} width="100%" height="100%"
-        dangerouslySetInnerHTML={text_html} p="10px" />
+    <Box
+      position="relative"
+      backgroundColor={backgroundColor}
+      width="100%"
+      height="100%" >
+      <Box
+        fillPositionedParent
+        width="100%"
+        height="100%"
+        dangerouslySetInnerHTML={text_html}
+        p="10px" />
       {stamp_list.map((o, i) => (
         <Stamp key={o[0] + i}
           image={{ sprite: o[0], x: o[1], y: o[2], rotate: o[3] }} />
@@ -296,6 +280,7 @@ class PaperSheetStamper extends Component {
       rotate: 0,
     };
   }
+
   findStampPosition(e) {
     const position = {
       x: event.pageX,
@@ -315,17 +300,19 @@ class PaperSheetStamper extends Component {
       reference = reference.offsetParent;
     }
 
-    const pos_x = position.x - offset.left;
-    const pos_y = position.y - offset.top;
-    const pos = vecCreate(pos_x, pos_y);
-
-    const center_offset = vecCreate((121/2), (51/2));
-    const center = vecSubtract(pos, center_offset);
+    const pos = [
+      position.x - offset.left,
+      position.y - offset.top,
+    ];
+    const centerOffset = vecScale([121, 51], 0.5);
+    const center = vecSubtract(pos, centerOffset);
     return center;
   }
+
   componentDidMount() {
     document.onwheel = this.handleWheel.bind(this);
   }
+
   handleMouseMove(e) {
     const pos = this.findStampPosition(e);
     // center offset of stamp
@@ -368,7 +355,8 @@ class PaperSheetStamper extends Component {
       rotate: this.state.rotate,
     };
     return (
-      <Box onClick={this.handleMouseClick.bind(this)}
+      <Box
+        onClick={this.handleMouseClick.bind(this)}
         onMouseMove={this.handleMouseMove.bind(this)}
         onwheel={this.handleWheel.bind(this)} {...rest}>
         <PaperSheetView
@@ -395,9 +383,10 @@ class PaperSheetEdit extends Component {
       combined_text: props.value || "",
     };
   }
+
   // This is the main rendering part, this creates the html from marked text
   // as well as the form fields
-  createPreview(value, do_fields=false) {
+  createPreview(value, do_fields = false) {
     const { data } = useBackend(this.context);
     const {
       text,
@@ -419,46 +408,51 @@ class PaperSheetEdit extends Component {
       const sanatized_text = sanatize_text(value);
       const signed_text = signDocument(sanatized_text, pen_color, edit_usr);
       // Third we replace the [__] with fields as markedjs fucks them up
-      const fielded_text = createFields(signed_text
-        , pen_font, 12, pen_color, field_counter);
+      const fielded_text = createFields(
+        signed_text, pen_font, 12, pen_color, field_counter);
       // Fourth, parse the text using markup
       const formated_text = run_marked_default(fielded_text.text);
       // Fifth, we wrap the created text in the pin color, and font.
       // crayon is bold (<b> tags), mabye make fountain pin italic?
-      const fonted_text = setFontinText(formated_text
-        , pen_font, pen_color, is_crayon);
+      const fonted_text = setFontinText(
+        formated_text, pen_font, pen_color, is_crayon);
       out.text += fonted_text;
       out.field_counter = fielded_text.counter;
     }
     if (do_fields) {
       // finaly we check all the form fields to see
       // if any data was entered by the user and
-      // if it was return the data and modify
-      // the text
-      const final_processing = checkAllFields(out.text
-        , pen_font, pen_color, edit_usr, is_crayon);
+      // if it was return the data and modify the text
+      const final_processing = checkAllFields(
+        out.text, pen_font, pen_color, edit_usr, is_crayon);
       out.text = final_processing.text;
       out.form_fields = final_processing.fields;
     }
     return out;
   }
+
   onInputHandler(e, value) {
     if (value !== this.state.textarea_text) {
       const combined_length = this.state.old_text.length
         + this.state.textarea_text.length;
       if (combined_length > MAX_PAPER_LENGTH) {
         if ((combined_length - MAX_PAPER_LENGTH) >= value.length) {
-          value = ''; // basicly we cannot add any more text to the paper
+          // Basicly we cannot add any more text to the paper
+          value = '';
         } else {
           value = value.substr(0, value.length
             - (combined_length - MAX_PAPER_LENGTH));
         }
         // we check again to save an update
-        if (value === this.state.textarea_text) { return; }// do nooothing
+        if (value === this.state.textarea_text) {
+          // Do nothing
+          return;
+        }
       }
-      this.setState(() => {
-        return { textarea_text: value,
-          combined_text: this.createPreview(value) }; });
+      this.setState(() => ({
+        textarea_text: value,
+        combined_text: this.createPreview(value),
+      }));
     }
   }
   // the final update send to byond, final upkeep
@@ -483,9 +477,8 @@ class PaperSheetEdit extends Component {
       backgroundColor,
       ...rest
     } = this.props;
-
     return (
-      <Flex direction="column" fillPositionedParent={1}>
+      <Flex direction="column" fillPositionedParent>
         <Flex.Item>
           <Tabs>
             <Tabs.Tab
@@ -529,7 +522,8 @@ class PaperSheetEdit extends Component {
               onClick={() => {
                 if (this.state.previewSelected === "confirm") {
                   this.finalUpdate(this.state.textarea_text);
-                } else if (this.state.previewSelected === "Edit") {
+                }
+                else if (this.state.previewSelected === "Edit") {
                   this.setState(() => {
                     const new_state = {
                       previewSelected: "confirm",
@@ -539,14 +533,14 @@ class PaperSheetEdit extends Component {
                     };
                     return new_state;
                   });
-                } else {
+                }
+                else {
                   this.setState({ previewSelected: "confirm" });
                 }
               }}>
-              { this.state.previewSelected === "confirm" ? "confirm" : "save" }
+              {this.state.previewSelected === "confirm" ? "confirm" : "save"}
             </Tabs.Tab>
           </Tabs>
-
         </Flex.Item>
         <Flex.Item
           grow={1}
@@ -559,7 +553,6 @@ class PaperSheetEdit extends Component {
               height={(window.innerHeight - 80) + "px"}
               backgroundColor={backgroundColor}
               onInput={this.onInputHandler.bind(this)} />
-
           ) || (
             <PaperSheetView
               value={this.state.combined_text}
@@ -573,7 +566,6 @@ class PaperSheetEdit extends Component {
   }
 }
 
-
 export const PaperSheet = (props, context) => {
   const { data } = useBackend(context);
   const {
@@ -591,43 +583,48 @@ export const PaperSheet = (props, context) => {
   const backgroundColor = paper_color && paper_color !== "white"
     ? paper_color
     : "#FFFFFF";
-  const background_style = {
-    'background-color': backgroundColor,
-  };
   const stamp_list = !stamps || stamps === null
     ? []
     : stamps;
-
   const decide_mode = mode => {
     switch (mode) {
-      case 0: // min-height="100vh" min-width="100vw"
-        return (<PaperSheetView
-          value={text}
-          stamps={stamp_list}
-          readOnly={1} />);
+      case 0:
+        return (
+          <PaperSheetView
+            value={text}
+            stamps={stamp_list}
+            readOnly={1} />
+        );
       case 1:
-        return (<PaperSheetEdit value={text}
-          textColor={pen_color}
-          fontFamily={pen_font}
-          stamps={stamp_list}
-          backgroundColor={backgroundColor}
-        />);
+        return (
+          <PaperSheetEdit
+            value={text}
+            textColor={pen_color}
+            fontFamily={pen_font}
+            stamps={stamp_list}
+            backgroundColor={backgroundColor} />
+        );
       case 2:
-        return (<PaperSheetStamper value={text}
-          stamps={stamp_list}
-          stamp_class={stamp_class}
-        />);
+        return (
+          <PaperSheetStamper
+            value={text}
+            stamps={stamp_list}
+            stamp_class={stamp_class} />
+        );
       default:
         return "ERROR ERROR WE CANNOT BE HERE!!";
     }
   };
-
   return (
-    <Window resizable theme="paper" style={background_style}>
-      <Window.Content min-height="100vh" min-width="100vw"
-        style={background_style}>
-        <Box fillPositionedParent={1} min-height="100vh"
-          min-width="100vw" backgroundColor={backgroundColor}>
+    <Window
+      theme="paper"
+      width={400}
+      height={500}
+      resizable>
+      <Window.Content>
+        <Box
+          fillPositionedParent
+          backgroundColor={backgroundColor}>
           {decide_mode(edit_mode)}
         </Box>
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/ParticleAccelerator.js b/tgui/packages/tgui/interfaces/ParticleAccelerator.js
index f9656810b8..480fdbe05e 100644
--- a/tgui/packages/tgui/interfaces/ParticleAccelerator.js
+++ b/tgui/packages/tgui/interfaces/ParticleAccelerator.js
@@ -11,7 +11,9 @@ export const ParticleAccelerator = (props, context) => {
     strength,
   } = data;
   return (
-    <Window>
+    <Window
+      width={350}
+      height={185}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/PersonalCrafting.js b/tgui/packages/tgui/interfaces/PersonalCrafting.js
index 89a41b4f26..d55af82d0e 100644
--- a/tgui/packages/tgui/interfaces/PersonalCrafting.js
+++ b/tgui/packages/tgui/interfaces/PersonalCrafting.js
@@ -58,7 +58,11 @@ export const PersonalCrafting = (props, context) => {
   const shownRecipes = recipes
     .filter(recipe => recipe.category === tab);
   return (
-    <Window resizable>
+    <Window
+      title="Crafting Menu"
+      width={700}
+      height={800}
+      resizable>
       <Window.Content scrollable>
         {!!busy && (
           <Dimmer fontSize="32px">
@@ -89,7 +93,6 @@ export const PersonalCrafting = (props, context) => {
                     selected={category.name === tab}
                     onClick={() => {
                       setTab(category.name);
-                      // Backend expects `0` or '' to indicate no subcategory
                       act('set_category', {
                         category: category.category,
                         subcategory: category.subcategory,
diff --git a/tgui/packages/tgui/interfaces/PortableGenerator.js b/tgui/packages/tgui/interfaces/PortableGenerator.js
index 5a1b0cd46c..47165a25c6 100644
--- a/tgui/packages/tgui/interfaces/PortableGenerator.js
+++ b/tgui/packages/tgui/interfaces/PortableGenerator.js
@@ -1,4 +1,3 @@
-import { Fragment } from 'inferno';
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, NoticeBox, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';
@@ -14,7 +13,10 @@ export const PortableGenerator = (props, context) => {
     || 'bad'
   );
   return (
-    <Window resizable>
+    <Window
+      width={450}
+      height={340}
+      resizable>
       <Window.Content scrollable>
         {!data.anchored && (
           <NoticeBox>Generator not anchored.</NoticeBox>
@@ -31,7 +33,7 @@ export const PortableGenerator = (props, context) => {
             </LabeledList.Item>
             <LabeledList.Item label={data.sheet_name + ' sheets'}>
               <Box inline color={stackPercentState}>{data.sheets}</Box>
-              {(data.sheets >= 1) && (
+              {data.sheets >= 1 && (
                 <Button
                   ml={1}
                   icon="eject"
diff --git a/tgui/packages/tgui/interfaces/PortablePump.js b/tgui/packages/tgui/interfaces/PortablePump.js
index b88f339fe0..874a6588bf 100644
--- a/tgui/packages/tgui/interfaces/PortablePump.js
+++ b/tgui/packages/tgui/interfaces/PortablePump.js
@@ -1,11 +1,10 @@
 import { useBackend } from '../backend';
-import { Section, LabeledList, Button, NumberInput } from '../components';
+import { Button, LabeledList, NumberInput, Section } from '../components';
 import { Window } from '../layouts';
 import { PortableBasicInfo } from './common/PortableAtmos';
 
 export const PortablePump = (props, context) => {
   const { act, data } = useBackend(context);
-
   const {
     direction,
     holding,
@@ -14,9 +13,10 @@ export const PortablePump = (props, context) => {
     min_pressure,
     max_pressure,
   } = data;
-
   return (
-    <Window>
+    <Window
+      width={300}
+      height={315}>
       <Window.Content>
         <PortableBasicInfo />
         <Section
diff --git a/tgui/packages/tgui/interfaces/PortableScrubber.js b/tgui/packages/tgui/interfaces/PortableScrubber.js
index 5c1eda2eab..ee43d5f18e 100644
--- a/tgui/packages/tgui/interfaces/PortableScrubber.js
+++ b/tgui/packages/tgui/interfaces/PortableScrubber.js
@@ -1,17 +1,16 @@
 import { useBackend } from '../backend';
-import { Fragment } from 'inferno';
-import { Box, Section, LabeledList, Button, AnimatedNumber, NumberInput } from '../components';
+import { Button, Section } from '../components';
 import { getGasLabel } from '../constants';
 import { Window } from '../layouts';
 import { PortableBasicInfo } from './common/PortableAtmos';
 
 export const PortableScrubber = (props, context) => {
   const { act, data } = useBackend(context);
-
   const filter_types = data.filter_types || [];
-
   return (
-    <Window>
+    <Window
+      width={320}
+      height={350}>
       <Window.Content>
         <PortableBasicInfo />
         <Section title="Filters">
diff --git a/tgui/packages/tgui/interfaces/PowerMonitor.js b/tgui/packages/tgui/interfaces/PowerMonitor.js
index 8f5aaa4ebd..16d8421ada 100644
--- a/tgui/packages/tgui/interfaces/PowerMonitor.js
+++ b/tgui/packages/tgui/interfaces/PowerMonitor.js
@@ -2,21 +2,24 @@ import { map, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { toFixed } from 'common/math';
 import { pureComponentHooks } from 'common/react';
-import { Component, Fragment } from 'inferno';
+import { Fragment } from 'inferno';
+import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Chart, ColorBox, Flex, Icon, LabeledList, ProgressBar, Section, Table } from '../components';
 import { Window } from '../layouts';
-import { useBackend, useLocalState } from '../backend';
 
 const PEAK_DRAW = 500000;
 
-const powerRank = str => {
+export const powerRank = str => {
   const unit = String(str.split(' ')[1]).toLowerCase();
   return ['w', 'kw', 'mw', 'gw'].indexOf(unit);
 };
 
 export const PowerMonitor = () => {
   return (
-    <Window resizable>
+    <Window
+      width={550}
+      height={700}
+      resizable>
       <Window.Content scrollable>
         <PowerMonitorContent />
       </Window.Content>
@@ -27,7 +30,6 @@ export const PowerMonitor = () => {
 export const PowerMonitorContent = (props, context) => {
   const { data } = useBackend(context);
   const { history } = data;
-
   const [
     sortByField,
     setSortByField,
@@ -55,8 +57,8 @@ export const PowerMonitorContent = (props, context) => {
   ])(data.areas);
   return (
     <Fragment>
-      <Flex spacing={1}>
-        <Flex.Item width="200px">
+      <Flex mx={-0.5} mb={1}>
+        <Flex.Item mx={0.5} width="200px">
           <Section>
             <LabeledList>
               <LabeledList.Item label="Supply">
@@ -80,7 +82,7 @@ export const PowerMonitorContent = (props, context) => {
             </LabeledList>
           </Section>
         </Flex.Item>
-        <Flex.Item grow={1}>
+        <Flex.Item mx={0.5} grow={1}>
           <Section position="relative" height="100%">
             <Chart.Line
               fillPositionedParent
@@ -107,7 +109,9 @@ export const PowerMonitorContent = (props, context) => {
           <Button.Checkbox
             checked={sortByField === 'name'}
             content="Name"
-            onClick={() => setSortByField(sortByField !== 'name' && 'name')} />
+            onClick={() => setSortByField(
+              sortByField !== 'name' && 'name'
+            )} />
           <Button.Checkbox
             checked={sortByField === 'charge'}
             content="Charge"
@@ -117,7 +121,9 @@ export const PowerMonitorContent = (props, context) => {
           <Button.Checkbox
             checked={sortByField === 'draw'}
             content="Draw"
-            onClick={() => setSortByField(sortByField !== 'draw' && 'draw')} />
+            onClick={() => setSortByField(
+              sortByField !== 'draw' && 'draw'
+            )} />
         </Box>
         <Table>
           <Table.Row header>
@@ -172,7 +178,7 @@ export const PowerMonitorContent = (props, context) => {
   );
 };
 
-const AreaCharge = props => {
+export const AreaCharge = props => {
   const { charging, charge } = props;
   return (
     <Fragment>
diff --git a/tgui/packages/tgui/interfaces/ProximitySensor.js b/tgui/packages/tgui/interfaces/ProximitySensor.js
index 8227d04802..c8dd04c3ee 100644
--- a/tgui/packages/tgui/interfaces/ProximitySensor.js
+++ b/tgui/packages/tgui/interfaces/ProximitySensor.js
@@ -12,7 +12,9 @@ export const ProximitySensor = (props, context) => {
     sensitivity,
   } = data;
   return (
-    <Window>
+    <Window
+      width={250}
+      height={185}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/Radio.js b/tgui/packages/tgui/interfaces/Radio.js
index 68b48d0230..738826ba63 100644
--- a/tgui/packages/tgui/interfaces/Radio.js
+++ b/tgui/packages/tgui/interfaces/Radio.js
@@ -25,8 +25,20 @@ export const Radio = (props, context) => {
     name: key,
     status: !!value,
   }))(data.channels);
+  // Calculate window height
+  let height = 106;
+  if (subspace) {
+    if (channels.length > 0) {
+      height += channels.length * 21 + 6;
+    }
+    else {
+      height += 24;
+    }
+  }
   return (
-    <Window>
+    <Window
+      width={360}
+      height={height}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/RadioactiveMicrolaser.js b/tgui/packages/tgui/interfaces/RadioactiveMicrolaser.js
index 40b6794d61..2fd20aa658 100644
--- a/tgui/packages/tgui/interfaces/RadioactiveMicrolaser.js
+++ b/tgui/packages/tgui/interfaces/RadioactiveMicrolaser.js
@@ -14,7 +14,11 @@ export const RadioactiveMicrolaser = (props, context) => {
     cooldown,
   } = data;
   return (
-    <Window theme="syndicate">
+    <Window
+      title="Radioactive Microlaser"
+      width={320}
+      height={335}
+      theme="syndicate">
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/RapidPipeDispenser.js b/tgui/packages/tgui/interfaces/RapidPipeDispenser.js
index 54b664c57d..0380b7c4a3 100644
--- a/tgui/packages/tgui/interfaces/RapidPipeDispenser.js
+++ b/tgui/packages/tgui/interfaces/RapidPipeDispenser.js
@@ -72,7 +72,10 @@ export const RapidPipeDispenser = (props, context) => {
     .find(category => category.cat_name === categoryName)
     || categories[0];
   return (
-    <Window resizable>
+    <Window
+      width={425}
+      height={515}
+      resizable>
       <Window.Content scrollable>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/RemoteRobotControl.js b/tgui/packages/tgui/interfaces/RemoteRobotControl.js
index eb24bf22f8..91e0fa5ddf 100644
--- a/tgui/packages/tgui/interfaces/RemoteRobotControl.js
+++ b/tgui/packages/tgui/interfaces/RemoteRobotControl.js
@@ -6,7 +6,11 @@ import { Window } from '../layouts';
 
 export const RemoteRobotControl = (props, context) => {
   return (
-    <Window resizable>
+    <Window
+      title="Remote Robot Control"
+      width={500}
+      height={500}
+      resizable>
       <Window.Content scrollable>
         <RemoteRobotControlContent />
       </Window.Content>
@@ -19,7 +23,6 @@ export const RemoteRobotControlContent = (props, context) => {
   const {
     robots = [],
   } = data;
-
   if (!robots.length) {
     return (
       <Section>
@@ -29,7 +32,6 @@ export const RemoteRobotControlContent = (props, context) => {
       </Section>
     );
   }
-
   return robots.map(robot => {
     return (
       <Section
diff --git a/tgui/packages/tgui/interfaces/RoboticsControlConsole.js b/tgui/packages/tgui/interfaces/RoboticsControlConsole.js
index e5f4f6f73b..746cb7ad9c 100644
--- a/tgui/packages/tgui/interfaces/RoboticsControlConsole.js
+++ b/tgui/packages/tgui/interfaces/RoboticsControlConsole.js
@@ -12,7 +12,10 @@ export const RoboticsControlConsole = (props, context) => {
     drones = [],
   } = data;
   return (
-    <Window resizable>
+    <Window
+      width={500}
+      height={460}
+      resizable>
       <Window.Content scrollable>
         <Tabs>
           <Tabs.Tab
diff --git a/tgui/packages/tgui/interfaces/Roulette.js b/tgui/packages/tgui/interfaces/Roulette.js
index 1bfa094c22..5aac72d3d1 100644
--- a/tgui/packages/tgui/interfaces/Roulette.js
+++ b/tgui/packages/tgui/interfaces/Roulette.js
@@ -1,8 +1,7 @@
-import { classes } from "common/react";
-import { useBackend, useLocalState } from "../backend";
-import { Box, Button, Grid, NumberInput } from "../components";
-import { Component } from "inferno";
-import { Window } from "../layouts";
+import { classes } from 'common/react';
+import { useBackend, useLocalState } from '../backend';
+import { Box, Button, Grid, NumberInput } from '../components';
+import { Window } from '../layouts';
 
 const getNumberColor = number => {
   if (number === 0) {
@@ -379,7 +378,10 @@ export const RouletteBetTable = (props, context) => {
 
 export const Roulette = (props, context) => {
   return (
-    <Window theme="cardtable">
+    <Window
+      width={603}
+      height={475}
+      theme="cardtable">
       <Window.Content>
         <RouletteBoard />
         <RouletteBetTable />
diff --git a/tgui/packages/tgui/interfaces/SatelliteControl.js b/tgui/packages/tgui/interfaces/SatelliteControl.js
index 26aadee269..9c163cf671 100644
--- a/tgui/packages/tgui/interfaces/SatelliteControl.js
+++ b/tgui/packages/tgui/interfaces/SatelliteControl.js
@@ -1,6 +1,5 @@
 import { useBackend } from '../backend';
-import { Button, LabeledList, ProgressBar, Section, Box } from '../components';
-import { Fragment } from 'inferno';
+import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
 import { LabeledListItem } from '../components/LabeledList';
 import { Window } from '../layouts';
 
@@ -8,7 +7,9 @@ export const SatelliteControl = (props, context) => {
   const { act, data } = useBackend(context);
   const satellites = data.satellites || [];
   return (
-    <Window>
+    <Window
+      width={400}
+      height={305}>
       <Window.Content>
         {data.meteor_shield && (
           <Section>
@@ -16,9 +17,9 @@ export const SatelliteControl = (props, context) => {
               <LabeledListItem label="Coverage">
                 <ProgressBar
                   value={data.meteor_shield_coverage
-                  / data.meteor_shield_coverage_max}
+                    / data.meteor_shield_coverage_max}
                   content={100 * data.meteor_shield_coverage
-                  / data.meteor_shield_coverage_max + '%'}
+                    / data.meteor_shield_coverage_max + '%'}
                   ranges={{
                     good: [1, Infinity],
                     average: [0.30, 1],
diff --git a/tgui/packages/tgui/interfaces/ScannerGate.js b/tgui/packages/tgui/interfaces/ScannerGate.js
index e390284d57..14a696ef51 100644
--- a/tgui/packages/tgui/interfaces/ScannerGate.js
+++ b/tgui/packages/tgui/interfaces/ScannerGate.js
@@ -71,7 +71,10 @@ const TARGET_NUTRITION_LIST = [
 export const ScannerGate = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window resizable>
+    <Window
+      width={400}
+      height={300}
+      resizable>
       <Window.Content scrollable>
         <InterfaceLockNoticeBox
           onLockedStatusChange={() => act('toggle_lock')} />
diff --git a/tgui/packages/tgui/interfaces/SeedExtractor.js b/tgui/packages/tgui/interfaces/SeedExtractor.js
index 3dbdd6da06..57f2db62a9 100644
--- a/tgui/packages/tgui/interfaces/SeedExtractor.js
+++ b/tgui/packages/tgui/interfaces/SeedExtractor.js
@@ -46,11 +46,14 @@ export const SeedExtractor = (props, context) => {
   const { act, data } = useBackend(context);
   const seeds = createSeeds(data.seeds);
   return (
-    <Window resizable>
+    <Window
+      width={1000}
+      height={400}
+      resizable>
       <Window.Content scrollable>
         <Section title="Stored seeds:">
           <Table cellpadding="3" textAlign="center">
-            <Table.Row>
+            <Table.Row header>
               <Table.Cell>Name</Table.Cell>
               <Table.Cell>Lifespan</Table.Cell>
               <Table.Cell>Endurance</Table.Cell>
diff --git a/tgui/packages/tgui/interfaces/ShuttleManipulator.js b/tgui/packages/tgui/interfaces/ShuttleManipulator.js
index 606a0700aa..6e0260151b 100644
--- a/tgui/packages/tgui/interfaces/ShuttleManipulator.js
+++ b/tgui/packages/tgui/interfaces/ShuttleManipulator.js
@@ -7,7 +7,11 @@ import { Window } from '../layouts';
 export const ShuttleManipulator = (props, context) => {
   const [tab, setTab] = useLocalState(context, 'tab', 1);
   return (
-    <Window resizable>
+    <Window
+      title="Shuttle Manipulator"
+      width={800}
+      height={600}
+      resizable>
       <Window.Content scrollable>
         <Tabs>
           <Tabs.Tab
diff --git a/tgui/packages/tgui/interfaces/Signaler.js b/tgui/packages/tgui/interfaces/Signaler.js
index bb7180d749..36aa9c9f5d 100644
--- a/tgui/packages/tgui/interfaces/Signaler.js
+++ b/tgui/packages/tgui/interfaces/Signaler.js
@@ -1,6 +1,6 @@
-import { Grid, NumberInput, Button, Section } from '../components';
-import { useBackend } from '../backend';
 import { toFixed } from 'common/math';
+import { useBackend } from '../backend';
+import { Button, Grid, NumberInput, Section } from '../components';
 import { Window } from '../layouts';
 
 export const Signaler = (props, context) => {
@@ -11,9 +11,10 @@ export const Signaler = (props, context) => {
     minFrequency,
     maxFrequency,
   } = data;
-
   return (
-    <Window>
+    <Window
+      width={280}
+      height={132}>
       <Window.Content>
         <Section>
           <Grid>
diff --git a/tgui/packages/tgui/interfaces/SkillPanel.js b/tgui/packages/tgui/interfaces/SkillPanel.js
index 636e4f2154..361cd99680 100644
--- a/tgui/packages/tgui/interfaces/SkillPanel.js
+++ b/tgui/packages/tgui/interfaces/SkillPanel.js
@@ -1,29 +1,40 @@
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';
+
 const skillgreen = {
   color: 'lightgreen',
   fontWeight: 'bold',
 };
+
 const skillyellow = {
   color: '#FFDB58',
   fontWeight: 'bold',
 };
+
 export const SkillPanel = (props, context) => {
   const { act, data } = useBackend(context);
   const skills = data.skills || [];
   return (
-    <Window resizable>
+    <Window
+      title="Manage Skills"
+      width={600}
+      height={500}
+      resizable>
       <Window.Content scrollable>
         <Section title={skills.playername}>
           <LabeledList>
             {skills.map(skill => (
-              <LabeledList.Item key={skill.name} label={skill.name}>
+              <LabeledList.Item
+                key={skill.name}
+                label={skill.name}>
                 <span style={skillyellow}>
                   {skill.desc}
                 </span>
                 <br />
-                <Level skill_lvl_num={skill.lvlnum} skill_lvl={skill.lvl} />
+                <Level
+                  skill_lvl_num={skill.lvlnum}
+                  skill_lvl={skill.lvl} />
                 <br />
                 Total Experience: [{skill.exp} XP]
                 <br />
@@ -33,7 +44,7 @@ export const SkillPanel = (props, context) => {
                     [{skill.exp_prog} / {skill.exp_req}]
                   </span>
                 ) : (
-                  <span style={skillgreen}> 
+                  <span style={skillgreen}>
                     [MAXXED]
                   </span>
                 )}
@@ -68,31 +79,22 @@ export const SkillPanel = (props, context) => {
     </Window>
   );
 };
-const Level = (props, context) => {
-  const { act, data } = useBackend(context);
+
+const Level = props => {
   const {
     skill_lvl_num,
     skill_lvl,
   } = props;
-  let textstyle="font-weight:bold; color:hsl("+skill_lvl_num*50+", 50%, 50%)";
   return (
-    <span>Level: [<span style={textstyle}>{skill_lvl}</span>]</span>
-  );
-};
-const XPToNextLevel = (props, context) => {
-  const { act, data } = useBackend(context);
-  const {
-    xp_req,
-    xp_prog,
-  } = props;
-  if (xp_req === 0) {
-    return (
-      <span style={skillgreen}> 
-        to next level: MAXXED
-      </span>
-    );
-  }
-  return (
-    <span>XP to next level: [{xp_prog} / {xp_req}]</span>
+    <Box inline>
+      Level: [
+      <Box
+        inline
+        bold
+        textColor={`hsl(${skill_lvl_num * 50}, 50%, 50%)`}>
+        {skill_lvl}
+      </Box>
+      ]
+    </Box>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/SlimeBodySwapper.js b/tgui/packages/tgui/interfaces/SlimeBodySwapper.js
index 51fbd8bce3..723631d7f1 100644
--- a/tgui/packages/tgui/interfaces/SlimeBodySwapper.js
+++ b/tgui/packages/tgui/interfaces/SlimeBodySwapper.js
@@ -2,21 +2,20 @@ import { useBackend } from '../backend';
 import { Section, LabeledList, Button, Box } from '../components';
 import { Window } from '../layouts';
 
+const statusMap = {
+  Dead: "bad",
+  Unconscious: "average",
+  Conscious: "good",
+};
+
+const occupiedMap = {
+  owner: "You Are Here",
+  stranger: "Occupied",
+  available: "Swap",
+};
+
 export const BodyEntry = (props, context) => {
   const { body, swapFunc } = props;
-
-  const statusMap = {
-    Dead: "bad",
-    Unconscious: "average",
-    Conscious: "good",
-  };
-
-  const occupiedMap = {
-    owner: "You Are Here",
-    stranger: "Occupied",
-    available: "Swap",
-  };
-
   return (
     <Section
       title={(
@@ -53,13 +52,13 @@ export const BodyEntry = (props, context) => {
 
 export const SlimeBodySwapper = (props, context) => {
   const { act, data } = useBackend(context);
-
   const {
     bodies = [],
   } = data;
-
   return (
-    <Window>
+    <Window
+      width={400}
+      height={400}>
       <Window.Content scrollable>
         <Section>
           {bodies.map(body => (
diff --git a/tgui/packages/tgui/interfaces/SmartVend.js b/tgui/packages/tgui/interfaces/SmartVend.js
index b835c3996e..2a1dd924dd 100644
--- a/tgui/packages/tgui/interfaces/SmartVend.js
+++ b/tgui/packages/tgui/interfaces/SmartVend.js
@@ -6,7 +6,10 @@ import { Window } from '../layouts';
 export const SmartVend = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window resizable>
+    <Window
+      width={440}
+      height={550}
+      resizable>
       <Window.Content scrollable>
         <Section
           title="Storage"
diff --git a/tgui/packages/tgui/interfaces/Smes.js b/tgui/packages/tgui/interfaces/Smes.js
index 552ad1d1a5..f64b19c393 100644
--- a/tgui/packages/tgui/interfaces/Smes.js
+++ b/tgui/packages/tgui/interfaces/Smes.js
@@ -34,7 +34,9 @@ export const Smes = (props, context) => {
     || 'bad'
   );
   return (
-    <Window>
+    <Window
+      width={340}
+      height={350}>
       <Window.Content>
         <Section title="Stored Energy">
           <ProgressBar
diff --git a/tgui/packages/tgui/interfaces/SmokeMachine.js b/tgui/packages/tgui/interfaces/SmokeMachine.js
index bc76dfb23a..f4181deeb2 100644
--- a/tgui/packages/tgui/interfaces/SmokeMachine.js
+++ b/tgui/packages/tgui/interfaces/SmokeMachine.js
@@ -15,7 +15,9 @@ export const SmokeMachine = (props, context) => {
     maxSetting = [],
   } = data;
   return (
-    <Window>
+    <Window
+      width={350}
+      height={350}>
       <Window.Content>
         <Section title="Dispersal Tank"
           buttons={(
diff --git a/tgui/packages/tgui/interfaces/SolarControl.js b/tgui/packages/tgui/interfaces/SolarControl.js
index 36cb711916..4490600d97 100644
--- a/tgui/packages/tgui/interfaces/SolarControl.js
+++ b/tgui/packages/tgui/interfaces/SolarControl.js
@@ -1,5 +1,3 @@
-import { toFixed } from 'common/math';
-import { Fragment } from 'inferno';
 import { useBackend } from '../backend';
 import { Box, Button, Grid, LabeledList, NumberInput, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';
@@ -17,7 +15,9 @@ export const SolarControl = (props, context) => {
     connected_tracker,
   } = data;
   return (
-    <Window>
+    <Window
+      width={380}
+      height={230}>
       <Window.Content>
         <Section
           title="Status"
diff --git a/tgui/packages/tgui/interfaces/SpaceHeater.js b/tgui/packages/tgui/interfaces/SpaceHeater.js
index 0dbc0908ac..3c3aedf54d 100644
--- a/tgui/packages/tgui/interfaces/SpaceHeater.js
+++ b/tgui/packages/tgui/interfaces/SpaceHeater.js
@@ -6,7 +6,9 @@ import { Window } from '../layouts';
 export const SpaceHeater = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      width={400}
+      height={305}>
       <Window.Content>
         <Section
           title="Power"
diff --git a/tgui/packages/tgui/interfaces/SpawnersMenu.js b/tgui/packages/tgui/interfaces/SpawnersMenu.js
index ba5c5d74ec..8c8927b414 100644
--- a/tgui/packages/tgui/interfaces/SpawnersMenu.js
+++ b/tgui/packages/tgui/interfaces/SpawnersMenu.js
@@ -7,7 +7,11 @@ export const SpawnersMenu = (props, context) => {
   const { act, data } = useBackend(context);
   const spawners = data.spawners || [];
   return (
-    <Window resizable>
+    <Window
+      title="Spawners Menu"
+      width={700}
+      height={600}
+      resizable>
       <Window.Content scrollable>
         <Section>
           {spawners.map(spawner => (
diff --git a/tgui/packages/tgui/interfaces/StationAlertConsole.js b/tgui/packages/tgui/interfaces/StationAlertConsole.js
index 504467f985..7d13c85eb7 100644
--- a/tgui/packages/tgui/interfaces/StationAlertConsole.js
+++ b/tgui/packages/tgui/interfaces/StationAlertConsole.js
@@ -5,7 +5,10 @@ import { Window } from '../layouts';
 
 export const StationAlertConsole = () => {
   return (
-    <Window resizable>
+    <Window
+      width={325}
+      height={500}
+      resizable>
       <Window.Content scrollable>
         <StationAlertConsoleContent />
       </Window.Content>
diff --git a/tgui/packages/tgui/interfaces/SuitStorageUnit.js b/tgui/packages/tgui/interfaces/SuitStorageUnit.js
index 65c990d763..c6f66a79d2 100644
--- a/tgui/packages/tgui/interfaces/SuitStorageUnit.js
+++ b/tgui/packages/tgui/interfaces/SuitStorageUnit.js
@@ -17,7 +17,9 @@ export const SuitStorageUnit = (props, context) => {
     storage,
   } = data;
   return (
-    <Window>
+    <Window
+      width={400}
+      height={305}>
       <Window.Content>
         {!!(occupied && safeties) && (
           <NoticeBox>
diff --git a/tgui/packages/tgui/interfaces/SyndContractor.js b/tgui/packages/tgui/interfaces/SyndContractor.js
index f717d681e2..70ac59f09a 100644
--- a/tgui/packages/tgui/interfaces/SyndContractor.js
+++ b/tgui/packages/tgui/interfaces/SyndContractor.js
@@ -64,6 +64,8 @@ export class FakeTerminal extends Component {
 export const SyndContractor = (props, context) => {
   return (
     <NtosWindow
+      width={500}
+      height={600}
       theme="syndicate"
       resizable>
       <NtosWindow.Content scrollable>
@@ -392,10 +394,7 @@ const HubTab = (props, context) => {
             buttons={(
               <Fragment>
                 {limited && (
-                  <Box
-                    inline
-                    bold
-                    mr={1}>
+                  <Box inline bold mr={1}>
                     {item.limited} remaining
                   </Box>
                 )}
diff --git a/tgui/packages/tgui/interfaces/Tank.js b/tgui/packages/tgui/interfaces/Tank.js
index bee6deddea..de43ad3f39 100644
--- a/tgui/packages/tgui/interfaces/Tank.js
+++ b/tgui/packages/tgui/interfaces/Tank.js
@@ -5,7 +5,9 @@ import { Window } from '../layouts';
 export const Tank = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      width={400}
+      height={120}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/TankDispenser.js b/tgui/packages/tgui/interfaces/TankDispenser.js
index a11476df2c..e1e2ae6ea0 100644
--- a/tgui/packages/tgui/interfaces/TankDispenser.js
+++ b/tgui/packages/tgui/interfaces/TankDispenser.js
@@ -5,7 +5,9 @@ import { Window } from '../layouts';
 export const TankDispenser = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      width={275}
+      height={103}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/Teleporter.js b/tgui/packages/tgui/interfaces/Teleporter.js
index 8f61f9d8c4..22403d24d0 100644
--- a/tgui/packages/tgui/interfaces/Teleporter.js
+++ b/tgui/packages/tgui/interfaces/Teleporter.js
@@ -13,7 +13,9 @@ export const Teleporter = (props, context) => {
     target,
   } = data;
   return (
-    <Window>
+    <Window
+      width={470}
+      height={140}>
       <Window.Content>
         <Section>
           {!power_station && (
diff --git a/tgui/packages/tgui/interfaces/ThermoMachine.js b/tgui/packages/tgui/interfaces/ThermoMachine.js
index e79a112c15..69bd39aaaa 100644
--- a/tgui/packages/tgui/interfaces/ThermoMachine.js
+++ b/tgui/packages/tgui/interfaces/ThermoMachine.js
@@ -6,7 +6,9 @@ import { Window } from '../layouts';
 export const ThermoMachine = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      width={300}
+      height={230}>
       <Window.Content>
         <Section title="Status">
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/Timer.js b/tgui/packages/tgui/interfaces/Timer.js
index 9ba3366a68..872a27a3da 100644
--- a/tgui/packages/tgui/interfaces/Timer.js
+++ b/tgui/packages/tgui/interfaces/Timer.js
@@ -12,7 +12,9 @@ export const Timer = (props, context) => {
     loop,
   } = data;
   return (
-    <Window>
+    <Window
+      width={275}
+      height={115}>
       <Window.Content>
         <Section
           title="Timing Unit"
diff --git a/tgui/packages/tgui/interfaces/TransferValve.js b/tgui/packages/tgui/interfaces/TransferValve.js
index 7401e8f22f..bed05651b5 100644
--- a/tgui/packages/tgui/interfaces/TransferValve.js
+++ b/tgui/packages/tgui/interfaces/TransferValve.js
@@ -11,7 +11,9 @@ export const TransferValve = (props, context) => {
     valve,
   } = data;
   return (
-    <Window>
+    <Window
+      width={310}
+      height={320}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/TurbineComputer.js b/tgui/packages/tgui/interfaces/TurbineComputer.js
index 1f85128682..c9d58c9318 100644
--- a/tgui/packages/tgui/interfaces/TurbineComputer.js
+++ b/tgui/packages/tgui/interfaces/TurbineComputer.js
@@ -10,7 +10,9 @@ export const TurbineComputer = (props, context) => {
     && data.turbine
     && !data.turbine_broke);
   return (
-    <Window>
+    <Window
+      width={310}
+      height={150}>
       <Window.Content>
         <Section
           title="Status"
diff --git a/tgui/packages/tgui/interfaces/Uplink.js b/tgui/packages/tgui/interfaces/Uplink.js
index be337241bf..1a20833485 100644
--- a/tgui/packages/tgui/interfaces/Uplink.js
+++ b/tgui/packages/tgui/interfaces/Uplink.js
@@ -12,6 +12,8 @@ export const Uplink = (props, context) => {
   const { telecrystals } = data;
   return (
     <Window
+      width={620}
+      height={580}
       theme="syndicate"
       resizable>
       <Window.Content scrollable>
@@ -70,6 +72,7 @@ export const GenericUplink = (props, context) => {
         <Fragment>
           Search
           <Input
+            autoFocus
             value={searchText}
             onInput={(e, value) => setSearchText(value)}
             mx={1} />
diff --git a/tgui/packages/tgui/interfaces/VaultController.js b/tgui/packages/tgui/interfaces/VaultController.js
index f5fb00add9..510c602954 100644
--- a/tgui/packages/tgui/interfaces/VaultController.js
+++ b/tgui/packages/tgui/interfaces/VaultController.js
@@ -6,7 +6,9 @@ import { Window } from '../layouts';
 export const VaultController = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window>
+    <Window
+      width={300}
+      height={120}>
       <Window.Content>
         <Section
           title="Lock Status: "
@@ -27,7 +29,7 @@ export const VaultController = (props, context) => {
                   bad: [-Infinity, 0.30],
                 }}>
                 {toFixed(data.stored / 1000) + ' / '
-              + toFixed(data.max / 1000) + ' kW'}
+                  + toFixed(data.max / 1000) + ' kW'}
               </ProgressBar>
             </LabeledList.Item>
           </LabeledList>
diff --git a/tgui/packages/tgui/interfaces/Vending.js b/tgui/packages/tgui/interfaces/Vending.js
index 0a90e8a737..8a9bdc0b6e 100644
--- a/tgui/packages/tgui/interfaces/Vending.js
+++ b/tgui/packages/tgui/interfaces/Vending.js
@@ -10,27 +10,32 @@ const VendingRow = (props, context) => {
     productStock,
     custom,
   } = props;
+  const {
+    onstation,
+    department,
+    user,
+  } = data;
   const free = (
-    !data.onstation
+    !onstation
     || product.price === 0
     || (
       !product.premium
-      && data.department
-      && data.user
-      && data.department === data.user.department
+      && department
+      && user
+      && department === user.department
     )
   );
   return (
     <Table.Row>
       <Table.Cell collapsing>
-        {product.base64 ? (
+        {product.base64 && (
           <img
             src={`data:image/jpeg;base64,${product.img}`}
             style={{
               'vertical-align': 'middle',
               'horizontal-align': 'middle',
             }} />
-        ) : (
+        ) || (
           <span
             className={classes([
               'vending32x32',
@@ -47,13 +52,12 @@ const VendingRow = (props, context) => {
       </Table.Cell>
       <Table.Cell collapsing textAlign="center">
         <Box
-          color={custom
-            ? 'good'
-            : productStock <= 0
-              ? 'bad'
-              : productStock <= (product.max_amount / 2)
-                ? 'average'
-                : 'good'}>
+          color={(
+            custom && 'good'
+            || productStock <= 0 && 'bad'
+            || productStock <= (product.max_amount / 2) && 'average'
+            || 'good'
+          )}>
           {productStock} in stock
         </Box>
       </Table.Cell>
@@ -87,52 +91,67 @@ const VendingRow = (props, context) => {
 
 export const Vending = (props, context) => {
   const { act, data } = useBackend(context);
+  const {
+    user,
+    onstation,
+    product_records = [],
+    coin_records = [],
+    hidden_records = [],
+    stock,
+  } = data;
   let inventory;
   let custom = false;
   if (data.vending_machine_input) {
-    inventory = data.vending_machine_input;
+    inventory = data.vending_machine_input || [];
     custom = true;
-  } else if (data.extended_inventory) {
-    inventory = [
-      ...data.product_records,
-      ...data.coin_records,
-      ...data.hidden_records,
-    ];
-  } else {
-    inventory = [
-      ...data.product_records,
-      ...data.coin_records,
-    ];
   }
+  else {
+    inventory = [
+      ...product_records,
+      ...coin_records,
+    ];
+    if (data.extended_inventory) {
+      inventory = [
+        ...inventory,
+        ...hidden_records,
+      ];
+    }
+  }
+  // Just in case we still have undefined values in the list
+  inventory = inventory.filter(item => !!item);
   return (
-    <Window resizable>
+    <Window
+      title="Vending Machine"
+      width={450}
+      height={600}
+      resizable>
       <Window.Content scrollable>
-        {!!data.onstation && (
+        {!!onstation && (
           <Section title="User">
-            {data.user && (
+            {user && (
               <Box>
-                Welcome, <b>{data.user.name}</b>,
+                Welcome, <b>{user.name}</b>,
                 {' '}
-                <b>{data.user.job || 'Unemployed'}</b>!
+                <b>{user.job || 'Unemployed'}</b>!
                 <br />
-                Your balance is <b>{data.user.cash} credits</b>.
+                Your balance is <b>{user.cash} credits</b>.
               </Box>
             ) || (
-              <Box color="light-gray">
+              <Box color="light-grey">
                 No registered ID card!<br />
                 Please contact your local HoP!
               </Box>
             )}
           </Section>
         )}
-        <Section title="Products" >
+        <Section title="Products">
           <Table>
             {inventory.map(product => (
               <VendingRow
                 key={product.name}
                 custom={custom}
                 product={product}
-                productStock={data.stock[product.name]} />
+                productStock={stock[product.name]} />
             ))}
           </Table>
         </Section>
diff --git a/tgui/packages/tgui/interfaces/Wires.js b/tgui/packages/tgui/interfaces/Wires.js
index 6e9ac9b160..4f3e16f77f 100644
--- a/tgui/packages/tgui/interfaces/Wires.js
+++ b/tgui/packages/tgui/interfaces/Wires.js
@@ -8,7 +8,9 @@ export const Wires = (props, context) => {
   const wires = data.wires || [];
   const statuses = data.status || [];
   return (
-    <Window>
+    <Window
+      width={350}
+      height={150 + wires.length * 30}>
       <Window.Content>
         <Section>
           <LabeledList>
diff --git a/tgui/packages/tgui/interfaces/common/AtmosControls.js b/tgui/packages/tgui/interfaces/common/AtmosControls.js
new file mode 100644
index 0000000000..8dd933731b
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/common/AtmosControls.js
@@ -0,0 +1,178 @@
+import { decodeHtmlEntities } from 'common/string';
+import { useBackend, useLocalState } from '../../backend';
+import { Box, Button, LabeledList, NumberInput, Section } from '../../components';
+import { getGasLabel } from '../../constants';
+
+
+export const Vent = (props, context) => {
+  const { vent } = props;
+  const { act } = useBackend(context);
+  const {
+    id_tag,
+    long_name,
+    power,
+    checks,
+    excheck,
+    incheck,
+    direction,
+    external,
+    internal,
+    extdefault,
+    intdefault,
+  } = vent;
+  return (
+    <Section
+      level={2}
+      title={decodeHtmlEntities(long_name)}
+      buttons={(
+        <Button
+          icon={power ? 'power-off' : 'times'}
+          selected={power}
+          content={power ? 'On' : 'Off'}
+          onClick={() => act('power', {
+            id_tag,
+            val: Number(!power),
+          })} />
+      )}>
+      <LabeledList>
+        <LabeledList.Item label="Mode">
+          <Button
+            icon="sign-in-alt"
+            content={direction ? 'Pressurizing' : 'Scrubbing'}
+            color={!direction && 'danger'}
+            onClick={() => act('direction', {
+              id_tag,
+              val: Number(!direction),
+            })} />
+        </LabeledList.Item>
+        <LabeledList.Item label="Pressure Regulator">
+          <Button
+            icon="sign-in-alt"
+            content="Internal"
+            selected={incheck}
+            onClick={() => act('incheck', {
+              id_tag,
+              val: checks,
+            })} />
+          <Button
+            icon="sign-out-alt"
+            content="External"
+            selected={excheck}
+            onClick={() => act('excheck', {
+              id_tag,
+              val: checks,
+            })} />
+        </LabeledList.Item>
+        {!!incheck && (
+          <LabeledList.Item label="Internal Target">
+            <NumberInput
+              value={Math.round(internal)}
+              unit="kPa"
+              width="75px"
+              minValue={0}
+              step={10}
+              maxValue={5066}
+              onChange={(e, value) => act('set_internal_pressure', {
+                id_tag,
+                value,
+              })} />
+            <Button
+              icon="undo"
+              disabled={intdefault}
+              content="Reset"
+              onClick={() => act('reset_internal_pressure', {
+                id_tag,
+              })} />
+          </LabeledList.Item>
+        )}
+        {!!excheck && (
+          <LabeledList.Item label="External Target">
+            <NumberInput
+              value={Math.round(external)}
+              unit="kPa"
+              width="75px"
+              minValue={0}
+              step={10}
+              maxValue={5066}
+              onChange={(e, value) => act('set_external_pressure', {
+                id_tag,
+                value,
+              })} />
+            <Button
+              icon="undo"
+              disabled={extdefault}
+              content="Reset"
+              onClick={() => act('reset_external_pressure', {
+                id_tag,
+              })} />
+          </LabeledList.Item>
+        )}
+      </LabeledList>
+    </Section>
+  );
+};
+
+
+export const Scrubber = (props, context) => {
+  const { scrubber } = props;
+  const { act } = useBackend(context);
+  const {
+    long_name,
+    power,
+    scrubbing,
+    id_tag,
+    widenet,
+    filter_types,
+  } = scrubber;
+  return (
+    <Section
+      level={2}
+      title={decodeHtmlEntities(long_name)}
+      buttons={(
+        <Button
+          icon={power ? 'power-off' : 'times'}
+          content={power ? 'On' : 'Off'}
+          selected={power}
+          onClick={() => act('power', {
+            id_tag,
+            val: Number(!power),
+          })} />
+      )}>
+      <LabeledList>
+        <LabeledList.Item label="Mode">
+          <Button
+            icon={scrubbing ? 'filter' : 'sign-in-alt'}
+            color={scrubbing || 'danger'}
+            content={scrubbing ? 'Scrubbing' : 'Siphoning'}
+            onClick={() => act('scrubbing', {
+              id_tag,
+              val: Number(!scrubbing),
+            })} />
+          <Button
+            icon={widenet ? 'expand' : 'compress'}
+            selected={widenet}
+            content={widenet ? 'Expanded range' : 'Normal range'}
+            onClick={() => act('widenet', {
+              id_tag,
+              val: Number(!widenet),
+            })} />
+        </LabeledList.Item>
+        <LabeledList.Item label="Filters">
+          {scrubbing
+            && filter_types.map(filter => (
+              <Button key={filter.gas_id}
+                icon={filter.enabled ? 'check-square-o' : 'square-o'}
+                content={getGasLabel(filter.gas_id, filter.gas_name)}
+                title={filter.gas_name}
+                selected={filter.enabled}
+                onClick={() => act('toggle_filter', {
+                  id_tag,
+                  val: filter.gas_id,
+                })} />
+            ))
+            || 'N/A'}
+        </LabeledList.Item>
+      </LabeledList>
+    </Section>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/manually-routed/KitchenSink.js b/tgui/packages/tgui/interfaces/manually-routed/KitchenSink.js
deleted file mode 100644
index fcca031fe9..0000000000
--- a/tgui/packages/tgui/interfaces/manually-routed/KitchenSink.js
+++ /dev/null
@@ -1,457 +0,0 @@
-import { Fragment } from 'inferno';
-import { useBackend, useLocalState } from '../../backend';
-import { BlockQuote, Box, Button, ByondUi, Collapsible, Flex, Icon, Input, Knob, LabeledList, NumberInput, ProgressBar, Section, Slider, Tabs, Tooltip } from '../../components';
-import { DraggableControl } from '../../components/DraggableControl';
-import { Window } from '../../layouts';
-
-const COLORS_ARBITRARY = [
-  'red',
-  'orange',
-  'yellow',
-  'olive',
-  'green',
-  'teal',
-  'blue',
-  'violet',
-  'purple',
-  'pink',
-  'brown',
-  'grey',
-];
-
-const COLORS_STATES = [
-  'good',
-  'average',
-  'bad',
-  'black',
-  'white',
-];
-
-const PAGES = [
-  {
-    title: 'Button',
-    component: () => KitchenSinkButton,
-  },
-  {
-    title: 'Box',
-    component: () => KitchenSinkBox,
-  },
-  {
-    title: 'ProgressBar',
-    component: () => KitchenSinkProgressBar,
-  },
-  {
-    title: 'Tabs',
-    component: () => KitchenSinkTabs,
-  },
-  {
-    title: 'Tooltip',
-    component: () => KitchenSinkTooltip,
-  },
-  {
-    title: 'Input / Control',
-    component: () => KitchenSinkInput,
-  },
-  {
-    title: 'Collapsible',
-    component: () => KitchenSinkCollapsible,
-  },
-  {
-    title: 'BlockQuote',
-    component: () => KitchenSinkBlockQuote,
-  },
-  {
-    title: 'ByondUi',
-    component: () => KitchenSinkByondUi,
-  },
-  {
-    title: 'Themes',
-    component: () => KitchenSinkThemes,
-  },
-];
-
-export const KitchenSink = (props, context) => {
-  const [theme] = useLocalState(context, 'kitchenSinkTheme');
-  const [pageIndex, setPageIndex] = useLocalState(context, 'pageIndex', 0);
-  const PageComponent = PAGES[pageIndex].component();
-  return (
-    <Window
-      theme={theme}
-      resizable>
-      <Window.Content scrollable>
-        <Section>
-          <Flex>
-            <Flex.Item>
-              <Tabs vertical>
-                {PAGES.map((page, i) => (
-                  <Tabs.Tab
-                    key={i}
-                    selected={i === pageIndex}
-                    onClick={() => setPageIndex(i)}>
-                    {page.title}
-                  </Tabs.Tab>
-                ))}
-              </Tabs>
-            </Flex.Item>
-            <Flex.Item grow={1} basis={0}>
-              <PageComponent />
-            </Flex.Item>
-          </Flex>
-        </Section>
-      </Window.Content>
-    </Window>
-  );
-};
-
-const KitchenSinkButton = props => {
-  return (
-    <Box>
-      <Box mb={1}>
-        <Button content="Simple" />
-        <Button selected content="Selected" />
-        <Button altSelected content="Alt Selected" />
-        <Button disabled content="Disabled" />
-        <Button color="transparent" content="Transparent" />
-        <Button icon="cog" content="Icon" />
-        <Button icon="power-off" />
-        <Button fluid content="Fluid" />
-        <Button
-          my={1}
-          lineHeight={2}
-          minWidth={15}
-          textAlign="center"
-          content="With Box props" />
-      </Box>
-      <Box mb={1}>
-        {COLORS_STATES.map(color => (
-          <Button
-            key={color}
-            color={color}
-            content={color} />
-        ))}
-        <br />
-        {COLORS_ARBITRARY.map(color => (
-          <Button
-            key={color}
-            color={color}
-            content={color} />
-        ))}
-        <br />
-        {COLORS_ARBITRARY.map(color => (
-          <Box inline
-            mx="7px"
-            key={color}
-            color={color}>
-            {color}
-          </Box>
-        ))}
-      </Box>
-    </Box>
-  );
-};
-
-const KitchenSinkBox = props => {
-  return (
-    <Box>
-      <Box bold>
-        bold
-      </Box>
-      <Box italic>
-        italic
-      </Box>
-      <Box opacity={0.5}>
-        opacity 0.5
-      </Box>
-      <Box opacity={0.25}>
-        opacity 0.25
-      </Box>
-      <Box m={2}>
-        m: 2
-      </Box>
-      <Box textAlign="left">
-        left
-      </Box>
-      <Box textAlign="center">
-        center
-      </Box>
-      <Box textAlign="right">
-        right
-      </Box>
-    </Box>
-  );
-};
-
-const KitchenSinkProgressBar = (props, context) => {
-  const [
-    progress,
-    setProgress,
-  ] = useLocalState(context, 'progress', 0.5);
-
-  return (
-    <Box>
-      <ProgressBar
-        ranges={{
-          good: [0.5, Infinity],
-          bad: [-Infinity, 0.1],
-          average: [0, 0.5],
-        }}
-        minValue={-1}
-        maxValue={1}
-        value={progress}>
-        Value: {Number(progress).toFixed(1)}
-      </ProgressBar>
-      <Box mt={1}>
-        <Button
-          content="-0.1"
-          onClick={() => setProgress(progress - 0.1)} />
-        <Button
-          content="+0.1"
-          onClick={() => setProgress(progress + 0.1)} />
-      </Box>
-    </Box>
-  );
-};
-
-const KitchenSinkTabs = (props, context) => {
-  const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
-  const [vertical, setVertical] = useLocalState(context, 'tabVert');
-  const [altSelection, setAltSelection] = useLocalState(context, 'tabAlt');
-  const TAB_RANGE = [1, 2, 3, 4, 5];
-  return (
-    <Box>
-      <Box mb={2}>
-        <Button.Checkbox
-          inline
-          content="vertical"
-          checked={vertical}
-          onClick={() => setVertical(!vertical)} />
-        <Button.Checkbox
-          inline
-          content="altSelection"
-          checked={altSelection}
-          onClick={() => setAltSelection(!altSelection)} />
-      </Box>
-      <Tabs vertical={vertical}>
-        {TAB_RANGE.map((number, i) => (
-          <Tabs.Tab
-            key={i}
-            altSelection={altSelection}
-            selected={i === tabIndex}
-            onClick={() => setTabIndex(i)}>
-            Tab #{number}
-          </Tabs.Tab>
-        ))}
-      </Tabs>
-    </Box>
-  );
-};
-
-const KitchenSinkTooltip = props => {
-  const positions = [
-    'top',
-    'left',
-    'right',
-    'bottom',
-    'bottom-left',
-    'bottom-right',
-  ];
-  return (
-    <Fragment>
-      <Box>
-        <Box inline position="relative" mr={1}>
-          Box (hover me).
-          <Tooltip content="Tooltip text." />
-        </Box>
-        <Button
-          tooltip="Tooltip text."
-          content="Button" />
-      </Box>
-      <Box mt={1}>
-        {positions.map(position => (
-          <Button
-            key={position}
-            color="transparent"
-            tooltip="Tooltip text."
-            tooltipPosition={position}
-            content={position} />
-        ))}
-      </Box>
-    </Fragment>
-  );
-};
-
-const KitchenSinkInput = (props, context) => {
-  const [
-    number,
-    setNumber,
-  ] = useLocalState(context, 'number', 0);
-
-  const [
-    text,
-    setText,
-  ] = useLocalState(context, 'text', "Sample text");
-
-  return (
-    <Box>
-      <LabeledList>
-        <LabeledList.Item label="Input (onChange)">
-          <Input
-            value={text}
-            onChange={(e, value) => setText(value)} />
-        </LabeledList.Item>
-        <LabeledList.Item label="Input (onInput)">
-          <Input
-            value={text}
-            onInput={(e, value) => setText(value)} />
-        </LabeledList.Item>
-        <LabeledList.Item label="NumberInput (onChange)">
-          <NumberInput
-            animated
-            width="40px"
-            step={1}
-            stepPixelSize={5}
-            value={number}
-            minValue={-100}
-            maxValue={100}
-            onChange={(e, value) => setNumber(value)} />
-        </LabeledList.Item>
-        <LabeledList.Item label="NumberInput (onDrag)">
-          <NumberInput
-            animated
-            width="40px"
-            step={1}
-            stepPixelSize={5}
-            value={number}
-            minValue={-100}
-            maxValue={100}
-            onDrag={(e, value) => setNumber(value)} />
-        </LabeledList.Item>
-        <LabeledList.Item label="Slider (onDrag)">
-          <Slider
-            step={1}
-            stepPixelSize={5}
-            value={number}
-            minValue={-100}
-            maxValue={100}
-            onDrag={(e, value) => setNumber(value)} />
-        </LabeledList.Item>
-        <LabeledList.Item label="Knob (onDrag)">
-          <Knob
-            inline
-            size={1}
-            step={1}
-            stepPixelSize={2}
-            value={number}
-            minValue={-100}
-            maxValue={100}
-            onDrag={(e, value) => setNumber(value)} />
-          <Knob
-            ml={1}
-            inline
-            bipolar
-            size={1}
-            step={1}
-            stepPixelSize={2}
-            value={number}
-            minValue={-100}
-            maxValue={100}
-            onDrag={(e, value) => setNumber(value)} />
-        </LabeledList.Item>
-        <LabeledList.Item label="Rotating Icon">
-          <Box inline position="relative">
-            <DraggableControl
-              value={number}
-              minValue={-100}
-              maxValue={100}
-              dragMatrix={[0, -1]}
-              step={1}
-              stepPixelSize={5}
-              onDrag={(e, value) => setNumber(value)}>
-              {control => (
-                <Box onMouseDown={control.handleDragStart}>
-                  <Icon
-                    size={4}
-                    color="yellow"
-                    name="times"
-                    rotation={control.displayValue * 4} />
-                  {control.inputElement}
-                </Box>
-              )}
-            </DraggableControl>
-          </Box>
-        </LabeledList.Item>
-      </LabeledList>
-    </Box>
-  );
-};
-
-const KitchenSinkCollapsible = props => {
-  return (
-    <Collapsible
-      title="Collapsible Demo"
-      buttons={(
-        <Button icon="cog" />
-      )}>
-      <Section>
-        <BoxWithSampleText />
-      </Section>
-    </Collapsible>
-  );
-};
-
-const BoxWithSampleText = props => {
-  return (
-    <Box {...props}>
-      <Box italic>
-        Jackdaws love my big sphinx of quartz.
-      </Box>
-      <Box mt={1} bold>
-        The wide electrification of the southern
-        provinces will give a powerful impetus to the
-        growth of agriculture.
-      </Box>
-    </Box>
-  );
-};
-
-const KitchenSinkBlockQuote = props => {
-  return (
-    <BlockQuote>
-      <BoxWithSampleText />
-    </BlockQuote>
-  );
-};
-
-const KitchenSinkByondUi = (props, context) => {
-  const { config } = useBackend(context);
-  return (
-    <Box>
-      <Section
-        title="Button"
-        level={2}>
-        <ByondUi
-          params={{
-            type: 'button',
-            parent: config.window,
-            text: 'Button',
-          }} />
-      </Section>
-    </Box>
-  );
-};
-
-const KitchenSinkThemes = (props, context) => {
-  const [theme, setTheme] = useLocalState(context, 'kitchenSinkTheme');
-  return (
-    <Box>
-      <LabeledList>
-        <LabeledList.Item label="Use theme">
-          <Input
-            placeholder="theme_name"
-            value={theme}
-            onInput={(e, value) => setTheme(value)} />
-        </LabeledList.Item>
-      </LabeledList>
-    </Box>
-  );
-};