diff --git a/tgui/packages/tgui/interfaces/CharacterDirectory.js b/tgui/packages/tgui/interfaces/CharacterDirectory.js
index 7bc6a1dda1..d7a45241e3 100644
--- a/tgui/packages/tgui/interfaces/CharacterDirectory.js
+++ b/tgui/packages/tgui/interfaces/CharacterDirectory.js
@@ -25,8 +25,14 @@ const getTagColor = (tag) => {
 export const CharacterDirectory = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { personalVisibility, personalTag, personalGenderTag, personalSexualityTag, personalErpTag, personalEventTag } =
-    data;
+  const {
+    personalVisibility,
+    personalTag,
+    personalGenderTag,
+    personalSexualityTag,
+    personalErpTag,
+    personalEventTag,
+  } = data;
 
   const [overlay, setOverlay] = useLocalState(context, 'overlay', null);
 
@@ -79,14 +85,20 @@ export const CharacterDirectory = (props, context) => {
                   <Button
                     fluid
                     content={personalGenderTag}
-                    onClick={() => act('setGenderTag', { overwrite_prefs: overwritePrefs })}
+                    onClick={() =>
+                      act('setGenderTag', { overwrite_prefs: overwritePrefs })
+                    }
                   />
                 </LabeledList.Item>
                 <LabeledList.Item label="Sexuality">
                   <Button
                     fluid
                     content={personalSexualityTag}
-                    onClick={() => act('setSexualityTag', { overwrite_prefs: overwritePrefs })}
+                    onClick={() =>
+                      act('setSexualityTag', {
+                        overwrite_prefs: overwritePrefs,
+                      })
+                    }
                   />
                 </LabeledList.Item>
                 <LabeledList.Item label="ERP Tag">
@@ -102,7 +114,9 @@ export const CharacterDirectory = (props, context) => {
                   <Button
                     fluid
                     content={personalEventTag}
-                    onClick={() => act('setEventTag', { overwrite_prefs: overwritePrefs })}
+                    onClick={() =>
+                      act('setEventTag', { overwrite_prefs: overwritePrefs })
+                    }
                   />
                 </LabeledList.Item>
                 <LabeledList.Item label="Advertisement">
diff --git a/tgui/packages/tgui/interfaces/ChemSynthesizer.js b/tgui/packages/tgui/interfaces/ChemSynthesizer.js
index a2b0b57859..af1e0b6b52 100644
--- a/tgui/packages/tgui/interfaces/ChemSynthesizer.js
+++ b/tgui/packages/tgui/interfaces/ChemSynthesizer.js
@@ -28,7 +28,13 @@ export const ChemSynthesizer = (props, context) => {
 
 const ChemSynthesizerQueueRecipes = (props, context) => {
   const { act, data } = useBackend(context);
-  const { busy, use_catalyst, queue = [], recipes = [], production_mode } = data;
+  const {
+    busy,
+    use_catalyst,
+    queue = [],
+    recipes = [],
+    production_mode,
+  } = data;
 
   return (
     <Flex height="100%" width="100%" direction="column">
@@ -55,7 +61,12 @@ const ChemSynthesizerQueueRecipes = (props, context) => {
                 onClick={() => act('clear_queue')}
               />
               {!busy && (
-                <Button disabled={!queue.length} icon="play" tooltip="Start Queue" onClick={() => act('start_queue')} />
+                <Button
+                  disabled={!queue.length}
+                  icon="play"
+                  tooltip="Start Queue"
+                  onClick={() => act('start_queue')}
+                />
               )}
             </Fragment>
           }>
@@ -203,10 +214,18 @@ const ChemSynthesizerChemicals = (props, context) => {
                 {catalystCurrentVolume} / {catalystMaxVolume} units
               </Box>
             )}
-            <Button icon="eject" content="Eject" disabled={!catalyst || !!busy} onClick={() => act('eject_catalyst')} />
+            <Button
+              icon="eject"
+              content="Eject"
+              disabled={!catalyst || !!busy}
+              onClick={() => act('eject_catalyst')}
+            />
           </Box>
         }>
-        <BeakerContents beakerLoaded={catalyst} beakerContents={catalyst_reagents} />
+        <BeakerContents
+          beakerLoaded={catalyst}
+          beakerContents={catalyst_reagents}
+        />
       </Section>
     </Flex>
   );
@@ -214,7 +233,16 @@ const ChemSynthesizerChemicals = (props, context) => {
 
 const ChemSynthesizerSettings = (props, context) => {
   const { act, data } = useBackend(context);
-  const { busy, production_mode, panel_open, rxn_vessel, drug_substance, bottle_icon, pill_icon, patch_icon } = data;
+  const {
+    busy,
+    production_mode,
+    panel_open,
+    rxn_vessel,
+    drug_substance,
+    bottle_icon,
+    pill_icon,
+    patch_icon,
+  } = data;
 
   return (
     <Flex height="100%" width="100%" direction="column">
@@ -225,7 +253,11 @@ const ChemSynthesizerSettings = (props, context) => {
               <Button
                 color={production_mode ? 'green' : 'bad'}
                 icon="wrench"
-                content={production_mode ? 'Recipe mode: Import' : 'Recipe mode: Tutorial'}
+                content={
+                  production_mode
+                    ? 'Recipe mode: Import'
+                    : 'Recipe mode: Tutorial'
+                }
                 onClick={() => act('mode_toggle')}
               />
             </Flex.Item>
diff --git a/tgui/packages/tgui/interfaces/ColorMate.js b/tgui/packages/tgui/interfaces/ColorMate.js
index 6422e8fcf8..e1e2e5400d 100644
--- a/tgui/packages/tgui/interfaces/ColorMate.js
+++ b/tgui/packages/tgui/interfaces/ColorMate.js
@@ -76,12 +76,33 @@ export const ColorMate = (props, context) => {
               <center>Coloring: {item.name}</center>
               <Table mt={1}>
                 <Table.Cell width="33%">
-                  <Button fluid content="Paint" icon="fill" onClick={() => act('paint')} />
-                  <Button fluid content="Clear" icon="eraser" onClick={() => act('clear')} />
-                  <Button fluid content="Eject" icon="eject" onClick={() => act('drop')} />
+                  <Button
+                    fluid
+                    content="Paint"
+                    icon="fill"
+                    onClick={() => act('paint')}
+                  />
+                  <Button
+                    fluid
+                    content="Clear"
+                    icon="eraser"
+                    onClick={() => act('clear')}
+                  />
+                  <Button
+                    fluid
+                    content="Eject"
+                    icon="eject"
+                    onClick={() => act('drop')}
+                  />
                 </Table.Cell>
                 <Table.Cell width="66%">
-                  {activemode === 1 ? <ColorMateTint /> : activemode === 2 ? <ColorMateHSV /> : <ColorMateMatrix />}
+                  {activemode === 1 ? (
+                    <ColorMateTint />
+                  ) : activemode === 2 ? (
+                    <ColorMateHSV />
+                  ) : (
+                    <ColorMateMatrix />
+                  )}
                 </Table.Cell>
               </Table>
             </>
@@ -96,7 +117,14 @@ export const ColorMate = (props, context) => {
 
 export const ColorMateTint = (props, context) => {
   const { act, data } = useBackend(context);
-  return <Button fluid content="Select new color" icon="paint-brush" onClick={() => act('choose_color')} />;
+  return (
+    <Button
+      fluid
+      content="Select new color"
+      icon="paint-brush"
+      onClick={() => act('choose_color')}
+    />
+  );
 };
 
 export const ColorMateMatrix = (props, context) => {
@@ -305,9 +333,11 @@ export const ColorMateMatrix = (props, context) => {
         </Table.Row>
       </Table.Cell>
       <Table.Cell width="40%">
-        <Icon name="question-circle" color="blue" /> RG means red will become this much green.
+        <Icon name="question-circle" color="blue" /> RG means red will become
+        this much green.
         <br />
-        <Icon name="question-circle" color="blue" /> CR means this much red will be added.
+        <Icon name="question-circle" color="blue" /> CR means this much red will
+        be added.
       </Table.Cell>
     </Table>
   );
diff --git a/tgui/packages/tgui/interfaces/PetrificationInterface.js b/tgui/packages/tgui/interfaces/PetrificationInterface.js
index 241368e62e..d42399d867 100644
--- a/tgui/packages/tgui/interfaces/PetrificationInterface.js
+++ b/tgui/packages/tgui/interfaces/PetrificationInterface.js
@@ -5,7 +5,17 @@ import { Window } from '../layouts';
 export const PetrificationInterface = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { material, identifier, adjective, tint, t, able_to_unpetrify, discard_clothes, target, can_remote } = data;
+  const {
+    material,
+    identifier,
+    adjective,
+    tint,
+    t,
+    able_to_unpetrify,
+    discard_clothes,
+    target,
+    can_remote,
+  } = data;
 
   return (
     <Window width={425} height={313} resizable>
@@ -65,7 +75,9 @@ export const PetrificationInterface = (props, context) => {
                 selected={able_to_unpetrify}
                 tooltip="Whether or not the statue can be unpetrified. If yes, they will get a verb letting them turn back- if not, even if they're a gargoyle, it will be taken away. OOC Escape is always an option though."
                 tooltipPosition="top"
-                onClick={() => act('set_option', { 'option': 'able_to_unpetrify' })}
+                onClick={() =>
+                  act('set_option', { 'option': 'able_to_unpetrify' })
+                }
               />
             </LabeledList.Item>
             <LabeledList.Item label="Discard Clothes">
@@ -75,11 +87,17 @@ export const PetrificationInterface = (props, context) => {
                 selected={discard_clothes}
                 tooltip="Whether the target's clothing falls off before the petrification happens. (Clothes do not change color when petrified, and cannot be removed while being a statue)"
                 tooltipPosition="top"
-                onClick={() => act('set_option', { 'option': 'discard_clothes' })}
+                onClick={() =>
+                  act('set_option', { 'option': 'discard_clothes' })
+                }
               />
             </LabeledList.Item>
             <LabeledList.Item label="Target">
-              <Button fluid content={target} onClick={() => act('set_option', { 'option': 'target' })} />
+              <Button
+                fluid
+                content={target}
+                onClick={() => act('set_option', { 'option': 'target' })}
+              />
             </LabeledList.Item>
           </LabeledList>
           <br />
@@ -88,7 +106,9 @@ export const PetrificationInterface = (props, context) => {
             disabled={!can_remote}
             content="Petrify"
             tooltip={
-              'Turn the target to ' + material + ". This is meant for roleplay/scene purposes. Please don't abuse it."
+              'Turn the target to ' +
+              material +
+              ". This is meant for roleplay/scene purposes. Please don't abuse it."
             }
             tooltipPosition="top"
             onClick={() => act('petrify')}
diff --git a/tgui/packages/tgui/interfaces/PrecisionEditor.js b/tgui/packages/tgui/interfaces/PrecisionEditor.js
index 20c9e365ab..4f8ccc76da 100644
--- a/tgui/packages/tgui/interfaces/PrecisionEditor.js
+++ b/tgui/packages/tgui/interfaces/PrecisionEditor.js
@@ -29,9 +29,13 @@ const SeedStatus = (props, context) => {
         <>
           <LabeledList.Item label="Name">{seedname}</LabeledList.Item>
           {health < 100 ? (
-            <LabeledList.Item label="Genetic Integrity">{100 - health + '%'}</LabeledList.Item>
+            <LabeledList.Item label="Genetic Integrity">
+              {100 - health + '%'}
+            </LabeledList.Item>
           ) : (
-            <LabeledList.Item label="Genetic Integrity">{'UNVIABLE'}</LabeledList.Item>
+            <LabeledList.Item label="Genetic Integrity">
+              {'UNVIABLE'}
+            </LabeledList.Item>
           )}
 
           <LabeledList.Item label="Plant Color">{plantcolor}</LabeledList.Item>
@@ -47,13 +51,21 @@ const SeedStatus = (props, context) => {
               />
             ))}
           </LabeledList.Item>
-          <Button content="Edit Colors" onClick={() => act('change_focus', { window: 'colors' })} />
-          <Button content="Add Reagents" onClick={() => act('change_focus', { window: 'reagents' })} />
+          <Button
+            content="Edit Colors"
+            onClick={() => act('change_focus', { window: 'colors' })}
+          />
+          <Button
+            content="Add Reagents"
+            onClick={() => act('change_focus', { window: 'reagents' })}
+          />
           <LabeledList.Divider size={2} />
           <Button content="Eject Seed" onClick={() => act('eject')} />
         </>
       ) : (
-        <LabeledList.Item label="Waiting">{'There is currently no seed loaded.'}</LabeledList.Item>
+        <LabeledList.Item label="Waiting">
+          {'There is currently no seed loaded.'}
+        </LabeledList.Item>
       )}
     </LabeledList>
   );
@@ -69,10 +81,19 @@ const ColorEditor = (props, context) => {
       <ColorBox color={plantcolor} />
       <LabeledList.Item label="Fruit Color">{fruitcolor}</LabeledList.Item>
       <ColorBox color={fruitcolor} />
-      <Button content="Change plant color" onClick={() => act('change_color', { option: 0 })} />
-      <Button content="Change fruit color" onClick={() => act('change_color', { option: 1 })} />
+      <Button
+        content="Change plant color"
+        onClick={() => act('change_color', { option: 0 })}
+      />
+      <Button
+        content="Change fruit color"
+        onClick={() => act('change_color', { option: 1 })}
+      />
       <LabeledList.Divider size={2} />
-      <Button content="Return" onClick={() => act('change_focus', { window: 'main' })} />
+      <Button
+        content="Return"
+        onClick={() => act('change_focus', { window: 'main' })}
+      />
     </LabeledList>
   );
 };
@@ -84,13 +105,21 @@ const BiochemEditor = (props, context) => {
   return (
     <LabeledList>
       {health < 100 ? (
-        <LabeledList.Item label="Genetic Integrity">{100 - health + '%'}</LabeledList.Item>
+        <LabeledList.Item label="Genetic Integrity">
+          {100 - health + '%'}
+        </LabeledList.Item>
       ) : (
-        <LabeledList.Item label="Genetic Integrity">{'UNVIABLE'}</LabeledList.Item>
+        <LabeledList.Item label="Genetic Integrity">
+          {'UNVIABLE'}
+        </LabeledList.Item>
       )}
       <NoticeBox info={1} width={19} height={9} ml={1}>
-        {'Available chems to choose are based on the reagents stored in the beaker. '}
-        {' A minimum of 100 units of reagent is required to generate a viable sequence. '}
+        {
+          'Available chems to choose are based on the reagents stored in the beaker. '
+        }
+        {
+          ' A minimum of 100 units of reagent is required to generate a viable sequence. '
+        }
         {'The chosen reagent will be consumed in the process.'}
         <Box bold={1} mt={1}>
           {'This process severely damages genetic integrity.'}
@@ -114,16 +143,23 @@ const BiochemEditor = (props, context) => {
               ))}
             </LabeledList.Item>
           ) : (
-            <NoticeBox warning={1}>{'WARNING: Genetic integrity of seed is too poor to proceed.'}</NoticeBox>
+            <NoticeBox warning={1}>
+              {'WARNING: Genetic integrity of seed is too poor to proceed.'}
+            </NoticeBox>
           )}
 
           <Button content="Eject Beaker" onClick={() => act('eject_beaker')} />
         </>
       ) : (
-        <LabeledList.Item label="Waiting">{'There is currently no beaker loaded.'}</LabeledList.Item>
+        <LabeledList.Item label="Waiting">
+          {'There is currently no beaker loaded.'}
+        </LabeledList.Item>
       )}
 
-      <Button content="Return" onClick={() => act('change_focus', { window: 'main' })} />
+      <Button
+        content="Return"
+        onClick={() => act('change_focus', { window: 'main' })}
+      />
     </LabeledList>
   );
 };
diff --git a/tgui/packages/tgui/interfaces/StarcasterCh.js b/tgui/packages/tgui/interfaces/StarcasterCh.js
index 6f48eea817..c58d2aa662 100644
--- a/tgui/packages/tgui/interfaces/StarcasterCh.js
+++ b/tgui/packages/tgui/interfaces/StarcasterCh.js
@@ -59,7 +59,9 @@ const ViewArticles = (props, context) => {
     <Section
       title="Articles List"
       buttons={
-        <Button.Checkbox onClick={() => act('PRG_toggle_archived')} checked={showing_archived}>
+        <Button.Checkbox
+          onClick={() => act('PRG_toggle_archived')}
+          checked={showing_archived}>
           Show Archived
         </Button.Checkbox>
       }>
@@ -69,9 +71,18 @@ const ViewArticles = (props, context) => {
             <LabeledList.Item
               label={article.name}
               key={article.uid}
-              buttons={<Button icon="download" onClick={() => act('PRG_openarticle', { uid: article.uid })} />}
+              buttons={
+                <Button
+                  icon="download"
+                  onClick={() => act('PRG_openarticle', { uid: article.uid })}
+                />
+              }
             />
-          ))) || <LabeledList.Item label="Error">Unable to connect to Starfire database.</LabeledList.Item>}
+          ))) || (
+          <LabeledList.Item label="Error">
+            Unable to connect to Starfire database.
+          </LabeledList.Item>
+        )}
       </LabeledList>
     </Section>
   );
diff --git a/tgui/packages/tgui/interfaces/VorePanelExport.tsx b/tgui/packages/tgui/interfaces/VorePanelExport.tsx
index 5074bd134d..40f729b703 100644
--- a/tgui/packages/tgui/interfaces/VorePanelExport.tsx
+++ b/tgui/packages/tgui/interfaces/VorePanelExport.tsx
@@ -22,7 +22,8 @@ const ItemModeSpan = {
   'Digest (Food Only)':
     '<span class="badge text-bg-danger">Item: Digest (Food Only)</span>',
   'Digest': '<span class="badge text-bg-danger">Item: Digest</span>',
-  'Digest (Dispersed Damage)': '<span class="badge text-bg-danger">Item: Digest (Dispersed Damage)</span>',
+  'Digest (Dispersed Damage)':
+    '<span class="badge text-bg-danger">Item: Digest (Dispersed Damage)</span>',
 };
 
 const AddonIcon = {
@@ -67,7 +68,11 @@ const GetLiquidAddons = (addons: string[]) => {
 
   addons?.forEach((addon) => {
     result.push(
-      '<span class="badge text-bg-secondary"><i class="' + ReagentAddonIcon[addon] + '"></i>' + addon + '</span>'
+      '<span class="badge text-bg-secondary"><i class="' +
+        ReagentAddonIcon[addon] +
+        '"></i>' +
+        addon +
+        '</span>'
     );
   });
 
diff --git a/tgui/packages/tgui_ch/backend.ts b/tgui/packages/tgui_ch/backend.ts
index 8e483ebfe1..e579f769a7 100644
--- a/tgui/packages/tgui_ch/backend.ts
+++ b/tgui/packages/tgui_ch/backend.ts
@@ -195,7 +195,10 @@ export const backendMiddleware = (store) => {
         });
         perf.mark('resume/finish');
         if (process.env.NODE_ENV !== 'production') {
-          logger.log('visible in', perf.measure('render/finish', 'resume/finish'));
+          logger.log(
+            'visible in',
+            perf.measure('render/finish', 'resume/finish')
+          );
         }
       });
     }
@@ -210,7 +213,8 @@ export const backendMiddleware = (store) => {
  */
 export const sendAct = (action: string, payload: object = {}) => {
   // Validate that payload is an object
-  const isObject = typeof payload === 'object' && payload !== null && !Array.isArray(payload);
+  const isObject =
+    typeof payload === 'object' && payload !== null && !Array.isArray(payload);
   if (!isObject) {
     logger.error(`Payload for act() must be an object, got this:`, payload);
     return;
@@ -249,7 +253,8 @@ type BackendState<TData> = {
 /**
  * Selects a backend-related slice of Redux state
  */
-export const selectBackend = <TData>(state: any): BackendState<TData> => state.backend || {};
+export const selectBackend = <TData>(state: any): BackendState<TData> =>
+  state.backend || {};
 
 /**
  * Get data from tgui backend.
@@ -283,7 +288,11 @@ type StateWithSetter<T> = [T, (nextState: T) => void];
  * @param key Key which uniquely identifies this state in Redux store.
  * @param initialState Initializes your global variable with this value.
  */
-export const useLocalState = <T>(context: any, key: string, initialState: T): StateWithSetter<T> => {
+export const useLocalState = <T>(
+  context: any,
+  key: string,
+  initialState: T
+): StateWithSetter<T> => {
   const { store } = context;
   const state = selectBackend(store.getState());
   const sharedStates = state.shared ?? {};
@@ -294,7 +303,10 @@ export const useLocalState = <T>(context: any, key: string, initialState: T): St
       store.dispatch(
         backendSetSharedState({
           key,
-          nextState: typeof nextState === 'function' ? nextState(sharedState) : nextState,
+          nextState:
+            typeof nextState === 'function'
+              ? nextState(sharedState)
+              : nextState,
         })
       );
     },
@@ -315,7 +327,11 @@ export const useLocalState = <T>(context: any, key: string, initialState: T): St
  * @param key Key which uniquely identifies this state in Redux store.
  * @param initialState Initializes your global variable with this value.
  */
-export const useSharedState = <T>(context: any, key: string, initialState: T): StateWithSetter<T> => {
+export const useSharedState = <T>(
+  context: any,
+  key: string,
+  initialState: T
+): StateWithSetter<T> => {
   const { store } = context;
   const state = selectBackend(store.getState());
   const sharedStates = state.shared ?? {};
@@ -326,7 +342,10 @@ export const useSharedState = <T>(context: any, key: string, initialState: T): S
       Byond.sendMessage({
         type: 'setSharedState',
         key,
-        value: JSON.stringify(typeof nextState === 'function' ? nextState(sharedState) : nextState) || '',
+        value:
+          JSON.stringify(
+            typeof nextState === 'function' ? nextState(sharedState) : nextState
+          ) || '',
       });
     },
   ];
diff --git a/tgui/packages/tgui_ch/components/AnimatedNumber.js b/tgui/packages/tgui_ch/components/AnimatedNumber.js
index 0258609e58..a763becfd4 100644
--- a/tgui/packages/tgui_ch/components/AnimatedNumber.js
+++ b/tgui/packages/tgui_ch/components/AnimatedNumber.js
@@ -11,7 +11,9 @@ const FPS = 20;
 const Q = 0.5;
 
 const isSafeNumber = (value) => {
-  return typeof value === 'number' && Number.isFinite(value) && !Number.isNaN(value);
+  return (
+    typeof value === 'number' && Number.isFinite(value) && !Number.isNaN(value)
+  );
 };
 
 export class AnimatedNumber extends Component {
diff --git a/tgui/packages/tgui_ch/components/Blink.js b/tgui/packages/tgui_ch/components/Blink.js
index f81ecef8b4..bd781336b4 100644
--- a/tgui/packages/tgui_ch/components/Blink.js
+++ b/tgui/packages/tgui_ch/components/Blink.js
@@ -12,7 +12,10 @@ export class Blink extends Component {
   }
 
   createTimer() {
-    const { interval = DEFAULT_BLINKING_INTERVAL, time = DEFAULT_BLINKING_TIME } = this.props;
+    const {
+      interval = DEFAULT_BLINKING_INTERVAL,
+      time = DEFAULT_BLINKING_TIME,
+    } = this.props;
 
     clearInterval(this.interval);
     clearTimeout(this.timer);
@@ -39,7 +42,10 @@ export class Blink extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.interval !== this.props.interval || prevProps.time !== this.props.time) {
+    if (
+      prevProps.interval !== this.props.interval ||
+      prevProps.time !== this.props.time
+    ) {
       this.createTimer();
     }
   }
diff --git a/tgui/packages/tgui_ch/components/Box.tsx b/tgui/packages/tgui_ch/components/Box.tsx
index 441ec43cac..d4e21d85ef 100644
--- a/tgui/packages/tgui_ch/components/Box.tsx
+++ b/tgui/packages/tgui_ch/components/Box.tsx
@@ -181,7 +181,12 @@ const styleMapperByPropName = {
   nowrap: mapBooleanPropTo('white-space', 'nowrap'),
   preserveWhitespace: mapBooleanPropTo('white-space', 'pre-wrap'),
   // Margins
-  m: mapDirectionalUnitPropTo('margin', halfUnit, ['top', 'bottom', 'left', 'right']),
+  m: mapDirectionalUnitPropTo('margin', halfUnit, [
+    'top',
+    'bottom',
+    'left',
+    'right',
+  ]),
   mx: mapDirectionalUnitPropTo('margin', halfUnit, ['left', 'right']),
   my: mapDirectionalUnitPropTo('margin', halfUnit, ['top', 'bottom']),
   mt: mapUnitPropTo('margin-top', halfUnit),
@@ -189,7 +194,12 @@ const styleMapperByPropName = {
   ml: mapUnitPropTo('margin-left', halfUnit),
   mr: mapUnitPropTo('margin-right', halfUnit),
   // Margins
-  p: mapDirectionalUnitPropTo('padding', halfUnit, ['top', 'bottom', 'left', 'right']),
+  p: mapDirectionalUnitPropTo('padding', halfUnit, [
+    'top',
+    'bottom',
+    'left',
+    'right',
+  ]),
   px: mapDirectionalUnitPropTo('padding', halfUnit, ['left', 'right']),
   py: mapDirectionalUnitPropTo('padding', halfUnit, ['top', 'bottom']),
   pt: mapUnitPropTo('padding-top', halfUnit),
@@ -281,7 +291,9 @@ export const Box: SFC<BoxProps> = (props: BoxProps) => {
     return children(computeBoxProps(props));
   }
   const computedClassName =
-    typeof className === 'string' ? className + ' ' + computeBoxClassName(rest) : computeBoxClassName(rest);
+    typeof className === 'string'
+      ? className + ' ' + computeBoxClassName(rest)
+      : computeBoxClassName(rest);
   const computedProps = computeBoxProps(rest);
   // Render a wrapper element
   return createVNode(
diff --git a/tgui/packages/tgui_ch/components/Button.js b/tgui/packages/tgui_ch/components/Button.js
index 05abfc39ee..99a7ceae49 100644
--- a/tgui/packages/tgui_ch/components/Button.js
+++ b/tgui/packages/tgui_ch/components/Button.js
@@ -69,7 +69,9 @@ export const Button = (props) => {
         circular && 'Button--circular',
         compact && 'Button--compact',
         iconPosition && 'Button--iconPosition--' + iconPosition,
-        color && typeof color === 'string' ? 'Button--color--' + color : 'Button--color--default',
+        color && typeof color === 'string'
+          ? 'Button--color--' + color
+          : 'Button--color--default',
         className,
         computeBoxClassName(rest),
       ])}
@@ -96,7 +98,12 @@ export const Button = (props) => {
       }}
       {...computeBoxProps(rest)}>
       {icon && iconPosition !== 'right' && (
-        <Icon name={icon} color={iconColor} rotation={iconRotation} spin={iconSpin} />
+        <Icon
+          name={icon}
+          color={iconColor}
+          rotation={iconRotation}
+          spin={iconSpin}
+        />
       )}
       {content}
       {children}
@@ -127,7 +134,14 @@ Button.defaultHooks = pureComponentHooks;
 
 export const ButtonCheckbox = (props) => {
   const { checked, ...rest } = props;
-  return <Button color="transparent" icon={checked ? 'check-square-o' : 'square-o'} selected={checked} {...rest} />;
+  return (
+    <Button
+      color="transparent"
+      icon={checked ? 'check-square-o' : 'square-o'}
+      selected={checked}
+      {...rest}
+    />
+  );
 };
 
 Button.Checkbox = ButtonCheckbox;
@@ -172,7 +186,9 @@ export class ButtonConfirm extends Component {
         content={this.state.clickedOnce ? confirmContent : content}
         icon={this.state.clickedOnce ? confirmIcon : icon}
         color={this.state.clickedOnce ? confirmColor : color}
-        onClick={() => (this.state.clickedOnce ? onClick() : this.setClickedOnce(true))}
+        onClick={() =>
+          this.state.clickedOnce ? onClick() : this.setClickedOnce(true)
+        }
         {...rest}
       />
     );
@@ -239,7 +255,11 @@ export class ButtonInput extends Component {
 
     let buttonContent = (
       <Box
-        className={classes(['Button', fluid && 'Button--fluid', 'Button--color--' + color])}
+        className={classes([
+          'Button',
+          fluid && 'Button--fluid',
+          'Button--color--' + color,
+        ])}
         {...rest}
         onClick={() => this.setInInput(true)}>
         {icon && <Icon name={icon} rotation={iconRotation} spin={iconSpin} />}
diff --git a/tgui/packages/tgui_ch/components/ByondUi.js b/tgui/packages/tgui_ch/components/ByondUi.js
index 556dcd59d7..dc1a23d7a9 100644
--- a/tgui/packages/tgui_ch/components/ByondUi.js
+++ b/tgui/packages/tgui_ch/components/ByondUi.js
@@ -61,7 +61,10 @@ const getBoundingBox = (element) => {
   const rect = element.getBoundingClientRect();
   return {
     pos: [rect.left * pixelRatio, rect.top * pixelRatio],
-    size: [(rect.right - rect.left) * pixelRatio, (rect.bottom - rect.top) * pixelRatio],
+    size: [
+      (rect.right - rect.left) * pixelRatio,
+      (rect.bottom - rect.top) * pixelRatio,
+    ],
   };
 };
 
@@ -78,7 +81,10 @@ export class ByondUi extends Component {
   shouldComponentUpdate(nextProps) {
     const { params: prevParams = {}, ...prevRest } = this.props;
     const { params: nextParams = {}, ...nextRest } = nextProps;
-    return shallowDiffers(prevParams, nextParams) || shallowDiffers(prevRest, nextRest);
+    return (
+      shallowDiffers(prevParams, nextParams) ||
+      shallowDiffers(prevRest, nextRest)
+    );
   }
 
   componentDidMount() {
diff --git a/tgui/packages/tgui_ch/components/Collapsible.js b/tgui/packages/tgui_ch/components/Collapsible.js
index 848422404d..f91eeddb45 100644
--- a/tgui/packages/tgui_ch/components/Collapsible.js
+++ b/tgui/packages/tgui_ch/components/Collapsible.js
@@ -34,7 +34,9 @@ export class Collapsible extends Component {
               {title}
             </Button>
           </div>
-          {buttons && <div className="Table__cell Table__cell--collapsing">{buttons}</div>}
+          {buttons && (
+            <div className="Table__cell Table__cell--collapsing">{buttons}</div>
+          )}
         </div>
         {open && <Box mt={1}>{children}</Box>}
       </Box>
diff --git a/tgui/packages/tgui_ch/components/ColorBox.js b/tgui/packages/tgui_ch/components/ColorBox.js
index 641e5fa751..256bb5c90e 100644
--- a/tgui/packages/tgui_ch/components/ColorBox.js
+++ b/tgui/packages/tgui_ch/components/ColorBox.js
@@ -8,11 +8,14 @@ import { classes, pureComponentHooks } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 
 export const ColorBox = (props) => {
-  const { content, children, className, color, backgroundColor, ...rest } = props;
+  const { content, children, className, color, backgroundColor, ...rest } =
+    props;
   rest.color = content ? null : 'transparent';
   rest.backgroundColor = color || backgroundColor;
   return (
-    <div className={classes(['ColorBox', className, computeBoxClassName(rest)])} {...computeBoxProps(rest)}>
+    <div
+      className={classes(['ColorBox', className, computeBoxClassName(rest)])}
+      {...computeBoxProps(rest)}>
       {content || '.'}
     </div>
   );
diff --git a/tgui/packages/tgui_ch/components/DraggableControl.js b/tgui/packages/tgui_ch/components/DraggableControl.js
index fffd0cc254..a22fde5227 100644
--- a/tgui/packages/tgui_ch/components/DraggableControl.js
+++ b/tgui/packages/tgui_ch/components/DraggableControl.js
@@ -81,7 +81,8 @@ export class DraggableControl extends Component {
     };
 
     this.handleDragMove = (e) => {
-      const { minValue, maxValue, step, stepPixelSize, dragMatrix } = this.props;
+      const { minValue, maxValue, step, stepPixelSize, dragMatrix } =
+        this.props;
       this.setState((prevState) => {
         const state = { ...prevState };
         const offset = getScalarScreenOffset(e, dragMatrix) - state.origin;
@@ -95,7 +96,11 @@ export class DraggableControl extends Component {
             maxValue + step
           );
           // Clamp the final value
-          state.value = clamp(state.internalValue - (state.internalValue % step) + stepOffset, minValue, maxValue);
+          state.value = clamp(
+            state.internalValue - (state.internalValue % step) + stepOffset,
+            minValue,
+            maxValue
+          );
           state.origin = getScalarScreenOffset(e, dragMatrix);
         } else if (Math.abs(offset) > 4) {
           state.dragging = true;
@@ -139,7 +144,12 @@ export class DraggableControl extends Component {
   }
 
   render() {
-    const { dragging, editing, value: intermediateValue, suppressingFlicker } = this.state;
+    const {
+      dragging,
+      editing,
+      value: intermediateValue,
+      suppressingFlicker,
+    } = this.state;
     const {
       animated,
       value,
diff --git a/tgui/packages/tgui_ch/components/Dropdown.js b/tgui/packages/tgui_ch/components/Dropdown.js
index 1309df92b9..32c8dca237 100644
--- a/tgui/packages/tgui_ch/components/Dropdown.js
+++ b/tgui/packages/tgui_ch/components/Dropdown.js
@@ -105,7 +105,10 @@ export class Dropdown extends Component {
         style={{
           'width': width,
         }}
-        className={classes([(noscroll && 'Dropdown__menu-noscroll') || 'Dropdown__menu', over && 'Dropdown__over'])}>
+        className={classes([
+          (noscroll && 'Dropdown__menu-noscroll') || 'Dropdown__menu',
+          over && 'Dropdown__over',
+        ])}>
         {this.buildMenu()}
       </div>
     ) : null;
@@ -128,9 +131,15 @@ export class Dropdown extends Component {
             }
             this.setOpen(!this.state.open);
           }}>
-          {icon && <Icon name={icon} rotation={iconRotation} spin={iconSpin} mr={1} />}
+          {icon && (
+            <Icon name={icon} rotation={iconRotation} spin={iconSpin} mr={1} />
+          )}
           <span className="Dropdown__selected-text">
-            {displayText ? displayText : this.state.selected || placeholder /* VOREStation Edit */}
+            {
+              displayText
+                ? displayText
+                : this.state.selected || placeholder /* VOREStation Edit */
+            }
           </span>
           {!!nochevron || (
             <span className="Dropdown__arrow-button">
diff --git a/tgui/packages/tgui_ch/components/Flex.tsx b/tgui/packages/tgui_ch/components/Flex.tsx
index 915047bd9c..060bae5b73 100644
--- a/tgui/packages/tgui_ch/components/Flex.tsx
+++ b/tgui/packages/tgui_ch/components/Flex.tsx
@@ -52,7 +52,12 @@ export const computeFlexProps = (props: FlexProps) => {
 
 export const Flex = (props) => {
   const { className, ...rest } = props;
-  return <div className={classes([className, computeFlexClassName(rest)])} {...computeFlexProps(rest)} />;
+  return (
+    <div
+      className={classes([className, computeFlexClassName(rest)])}
+      {...computeFlexProps(rest)}
+    />
+  );
 };
 
 Flex.defaultHooks = pureComponentHooks;
@@ -66,7 +71,11 @@ export type FlexItemProps = BoxProps & {
 };
 
 export const computeFlexItemClassName = (props: FlexItemProps) => {
-  return classes(['Flex__item', Byond.IS_LTE_IE10 && 'Flex__item--iefix', computeBoxClassName(props)]);
+  return classes([
+    'Flex__item',
+    Byond.IS_LTE_IE10 && 'Flex__item--iefix',
+    computeBoxClassName(props),
+  ]);
 };
 
 export const computeFlexItemProps = (props: FlexItemProps) => {
@@ -99,7 +108,11 @@ const FlexItem = (props) => {
   const { className, ...rest } = props;
   return (
     <div
-      className={classes([className, computeFlexItemClassName(props), computeBoxClassName(props)])}
+      className={classes([
+        className,
+        computeFlexItemClassName(props),
+        computeBoxClassName(props),
+      ])}
       {...computeFlexItemProps(rest)}
     />
   );
diff --git a/tgui/packages/tgui_ch/components/Icon.js b/tgui/packages/tgui_ch/components/Icon.js
index ef02b1059d..f8d1292502 100644
--- a/tgui/packages/tgui_ch/components/Icon.js
+++ b/tgui/packages/tgui_ch/components/Icon.js
@@ -37,9 +37,20 @@ export const Icon = (props) => {
     // font awesome icon
     const faRegular = FA_OUTLINE_REGEX.test(name);
     const faName = name.replace(FA_OUTLINE_REGEX, '');
-    iconClass = (faRegular ? 'far ' : 'fas ') + 'fa-' + faName + (spin ? ' fa-spin' : '');
+    iconClass =
+      (faRegular ? 'far ' : 'fas ') + 'fa-' + faName + (spin ? ' fa-spin' : '');
   }
-  return <i className={classes(['Icon', iconClass, className, computeBoxClassName(rest)])} {...boxProps} />;
+  return (
+    <i
+      className={classes([
+        'Icon',
+        iconClass,
+        className,
+        computeBoxClassName(rest),
+      ])}
+      {...boxProps}
+    />
+  );
 };
 
 Icon.defaultHooks = pureComponentHooks;
@@ -47,7 +58,9 @@ Icon.defaultHooks = pureComponentHooks;
 export const IconStack = (props) => {
   const { className, children, ...rest } = props;
   return (
-    <span class={classes(['IconStack', className, computeBoxClassName(rest)])} {...computeBoxProps(rest)}>
+    <span
+      class={classes(['IconStack', className, computeBoxClassName(rest)])}
+      {...computeBoxProps(rest)}>
       {children}
     </span>
   );
diff --git a/tgui/packages/tgui_ch/components/InfinitePlane.js b/tgui/packages/tgui_ch/components/InfinitePlane.js
index a14c478156..a9fcfc01e8 100644
--- a/tgui/packages/tgui_ch/components/InfinitePlane.js
+++ b/tgui/packages/tgui_ch/components/InfinitePlane.js
@@ -134,7 +134,10 @@ export class InfinitePlane extends Component {
             />
           </Stack.Item>
           <Stack.Item grow={1}>
-            <ProgressBar minValue={ZOOM_MIN_VAL} value={zoom} maxValue={ZOOM_MAX_VAL}>
+            <ProgressBar
+              minValue={ZOOM_MIN_VAL}
+              value={zoom}
+              maxValue={ZOOM_MAX_VAL}>
               {zoom}x
             </ProgressBar>
           </Stack.Item>
diff --git a/tgui/packages/tgui_ch/components/Input.js b/tgui/packages/tgui_ch/components/Input.js
index 92f654f241..0107865f1d 100644
--- a/tgui/packages/tgui_ch/components/Input.js
+++ b/tgui/packages/tgui_ch/components/Input.js
@@ -9,7 +9,8 @@ import { Component, createRef } from 'inferno';
 import { Box } from './Box';
 import { KEY_ESCAPE, KEY_ENTER } from 'common/keycodes';
 
-export const toInputValue = (value) => (typeof value !== 'number' && typeof value !== 'string' ? '' : String(value));
+export const toInputValue = (value) =>
+  typeof value !== 'number' && typeof value !== 'string' ? '' : String(value);
 
 export class Input extends Component {
   constructor() {
@@ -117,12 +118,26 @@ export class Input extends Component {
   render() {
     const { props } = this;
     // Input only props
-    const { selfClear, onInput, onChange, onEnter, value, maxLength, placeholder, ...boxProps } = props;
+    const {
+      selfClear,
+      onInput,
+      onChange,
+      onEnter,
+      value,
+      maxLength,
+      placeholder,
+      ...boxProps
+    } = props;
     // Box props
     const { className, fluid, monospace, ...rest } = boxProps;
     return (
       <Box
-        className={classes(['Input', fluid && 'Input--fluid', monospace && 'Input--monospace', className])}
+        className={classes([
+          'Input',
+          fluid && 'Input--fluid',
+          monospace && 'Input--monospace',
+          className,
+        ])}
         {...rest}>
         <div className="Input__baseline">.</div>
         <input
diff --git a/tgui/packages/tgui_ch/components/Knob.js b/tgui/packages/tgui_ch/components/Knob.js
index c89db848e4..1d40ff1ed2 100644
--- a/tgui/packages/tgui_ch/components/Knob.js
+++ b/tgui/packages/tgui_ch/components/Knob.js
@@ -59,10 +59,23 @@ export const Knob = (props) => {
         value,
       }}>
       {(control) => {
-        const { dragging, editing, value, displayValue, displayElement, inputElement, handleDragStart } = control;
-        const scaledFillValue = scale(fillValue ?? displayValue, minValue, maxValue);
+        const {
+          dragging,
+          editing,
+          value,
+          displayValue,
+          displayElement,
+          inputElement,
+          handleDragStart,
+        } = control;
+        const scaledFillValue = scale(
+          fillValue ?? displayValue,
+          minValue,
+          maxValue
+        );
         const scaledDisplayValue = scale(displayValue, minValue, maxValue);
-        const effectiveColor = color || keyOfMatchingRange(fillValue ?? value, ranges) || 'default';
+        const effectiveColor =
+          color || keyOfMatchingRange(fillValue ?? value, ranges) || 'default';
         const rotation = Math.min((scaledDisplayValue - 0.5) * 270, 225);
         return (
           <div
@@ -90,15 +103,26 @@ export const Knob = (props) => {
                 <div className="Knob__cursor" />
               </div>
             </div>
-            {dragging && <div className="Knob__popupValue">{displayElement}</div>}
-            <svg className="Knob__ring Knob__ringTrackPivot" viewBox="0 0 100 100">
+            {dragging && (
+              <div className="Knob__popupValue">{displayElement}</div>
+            )}
+            <svg
+              className="Knob__ring Knob__ringTrackPivot"
+              viewBox="0 0 100 100">
               <circle className="Knob__ringTrack" cx="50" cy="50" r="50" />
             </svg>
-            <svg className="Knob__ring Knob__ringFillPivot" viewBox="0 0 100 100">
+            <svg
+              className="Knob__ring Knob__ringFillPivot"
+              viewBox="0 0 100 100">
               <circle
                 className="Knob__ringFill"
                 style={{
-                  'stroke-dashoffset': Math.max(((bipolar ? 2.75 : 2.0) - scaledFillValue * 1.5) * Math.PI * 50, 0),
+                  'stroke-dashoffset': Math.max(
+                    ((bipolar ? 2.75 : 2.0) - scaledFillValue * 1.5) *
+                      Math.PI *
+                      50,
+                    0
+                  ),
                 }}
                 cx="50"
                 cy="50"
diff --git a/tgui/packages/tgui_ch/components/LabeledControls.js b/tgui/packages/tgui_ch/components/LabeledControls.js
index 2da7efe928..eea3b2c29b 100644
--- a/tgui/packages/tgui_ch/components/LabeledControls.js
+++ b/tgui/packages/tgui_ch/components/LabeledControls.js
@@ -9,7 +9,12 @@ import { Flex } from './Flex';
 export const LabeledControls = (props) => {
   const { children, wrap, ...rest } = props;
   return (
-    <Flex mx={-0.5} wrap={wrap} align="stretch" justify="space-between" {...rest}>
+    <Flex
+      mx={-0.5}
+      wrap={wrap}
+      align="stretch"
+      justify="space-between"
+      {...rest}>
       {children}
     </Flex>
   );
@@ -19,7 +24,13 @@ const LabeledControlsItem = (props) => {
   const { label, children, mx = 1, ...rest } = props;
   return (
     <Flex.Item mx={mx}>
-      <Flex height="100%" direction="column" align="center" textAlign="center" justify="space-between" {...rest}>
+      <Flex
+        height="100%"
+        direction="column"
+        align="center"
+        textAlign="center"
+        justify="space-between"
+        {...rest}>
         <Flex.Item />
         <Flex.Item>{children}</Flex.Item>
         <Flex.Item color="label">{label}</Flex.Item>
diff --git a/tgui/packages/tgui_ch/components/LabeledList.tsx b/tgui/packages/tgui_ch/components/LabeledList.tsx
index 0a06916ee0..668d42332e 100644
--- a/tgui/packages/tgui_ch/components/LabeledList.tsx
+++ b/tgui/packages/tgui_ch/components/LabeledList.tsx
@@ -67,7 +67,9 @@ const LabeledListItem = (props: LabeledListItemProps) => {
         {content}
         {children}
       </Box>
-      {buttons && <td className="LabeledList__cell LabeledList__buttons">{buttons}</td>}
+      {buttons && (
+        <td className="LabeledList__cell LabeledList__buttons">{buttons}</td>
+      )}
     </tr>
   );
 };
diff --git a/tgui/packages/tgui_ch/components/Modal.js b/tgui/packages/tgui_ch/components/Modal.js
index 72e65cdb13..33d0146161 100644
--- a/tgui/packages/tgui_ch/components/Modal.js
+++ b/tgui/packages/tgui_ch/components/Modal.js
@@ -28,7 +28,9 @@ export const Modal = (props) => {
   // VOREStation Addition End
   return (
     <Dimmer onKeyDown={handleKeyDown /* VOREStation Edit */}>
-      <div className={classes(['Modal', className, computeBoxClassName(rest)])} {...computeBoxProps(rest)}>
+      <div
+        className={classes(['Modal', className, computeBoxClassName(rest)])}
+        {...computeBoxProps(rest)}>
         {children}
       </div>
     </Dimmer>
diff --git a/tgui/packages/tgui_ch/components/NanoMap.js b/tgui/packages/tgui_ch/components/NanoMap.js
index 6bb4c49592..4ee5199119 100644
--- a/tgui/packages/tgui_ch/components/NanoMap.js
+++ b/tgui/packages/tgui_ch/components/NanoMap.js
@@ -143,7 +143,11 @@ export class NanoMap extends Component {
 
     return (
       <Box className="NanoMap__container">
-        <Box style={newStyle} textAlign="center" onMouseDown={this.handleDragStart} onClick={this.handleOnClick}>
+        <Box
+          style={newStyle}
+          textAlign="center"
+          onMouseDown={this.handleDragStart}
+          onClick={this.handleOnClick}>
           <Box>{children}</Box>
         </Box>
         <NanoMapZoomer zoom={zoom} onZoom={this.handleZoom} />
diff --git a/tgui/packages/tgui_ch/components/NumberInput.js b/tgui/packages/tgui_ch/components/NumberInput.js
index 74929778a4..e05f92074d 100644
--- a/tgui/packages/tgui_ch/components/NumberInput.js
+++ b/tgui/packages/tgui_ch/components/NumberInput.js
@@ -90,7 +90,11 @@ export class NumberInput extends Component {
             maxValue + step
           );
           // Clamp the final value
-          state.value = clamp(state.internalValue - (state.internalValue % step) + stepOffset, minValue, maxValue);
+          state.value = clamp(
+            state.internalValue - (state.internalValue % step) + stepOffset,
+            minValue,
+            maxValue
+          );
           state.origin = e.screenY;
         } else if (Math.abs(offset) > 4) {
           state.dragging = true;
@@ -134,7 +138,12 @@ export class NumberInput extends Component {
   }
 
   render() {
-    const { dragging, editing, value: intermediateValue, suppressingFlicker } = this.state;
+    const {
+      dragging,
+      editing,
+      value: intermediateValue,
+      suppressingFlicker,
+    } = this.state;
     const {
       className,
       fluid,
@@ -170,7 +179,11 @@ export class NumberInput extends Component {
       renderContentElement(format ? format(displayValue) : displayValue);
     return (
       <Box
-        className={classes(['NumberInput', fluid && 'NumberInput--fluid', className])}
+        className={classes([
+          'NumberInput',
+          fluid && 'NumberInput--fluid',
+          className,
+        ])}
         minWidth={width}
         minHeight={height}
         lineHeight={lineHeight}
@@ -180,7 +193,12 @@ export class NumberInput extends Component {
           <div
             className="NumberInput__bar"
             style={{
-              height: clamp(((displayValue - minValue) / (maxValue - minValue)) * 100, 0, 100) + '%',
+              height:
+                clamp(
+                  ((displayValue - minValue) / (maxValue - minValue)) * 100,
+                  0,
+                  100
+                ) + '%',
             }}
           />
         </div>
@@ -219,7 +237,11 @@ export class NumberInput extends Component {
           }}
           onKeyDown={(e) => {
             if (e.keyCode === 13) {
-              const value = clamp(parseFloat(e.target.value), minValue, maxValue);
+              const value = clamp(
+                parseFloat(e.target.value),
+                minValue,
+                maxValue
+              );
               if (Number.isNaN(value)) {
                 this.setState({
                   editing: false,
diff --git a/tgui/packages/tgui_ch/components/Popper.tsx b/tgui/packages/tgui_ch/components/Popper.tsx
index 1f025fe63b..c7d41293bc 100644
--- a/tgui/packages/tgui_ch/components/Popper.tsx
+++ b/tgui/packages/tgui_ch/components/Popper.tsx
@@ -47,7 +47,11 @@ export class Popper extends Component<PopperProps> {
         return;
       }
 
-      this.popperInstance = createPopper(domNode, this.renderedContent, options);
+      this.popperInstance = createPopper(
+        domNode,
+        this.renderedContent,
+        options
+      );
     });
   }
 
@@ -65,7 +69,12 @@ export class Popper extends Component<PopperProps> {
   renderPopperContent(callback: () => void) {
     // `render` errors when given false, so we convert it to `null`,
     // which is supported.
-    render(this.props.popperContent || null, this.renderedContent, callback, this.context);
+    render(
+      this.props.popperContent || null,
+      this.renderedContent,
+      callback,
+      this.context
+    );
   }
 
   render() {
diff --git a/tgui/packages/tgui_ch/components/ProgressBar.js b/tgui/packages/tgui_ch/components/ProgressBar.js
index 5b026f2506..194395164b 100644
--- a/tgui/packages/tgui_ch/components/ProgressBar.js
+++ b/tgui/packages/tgui_ch/components/ProgressBar.js
@@ -9,10 +9,20 @@ import { classes, pureComponentHooks } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 
 export const ProgressBar = (props) => {
-  const { className, value, minValue = 0, maxValue = 1, color, ranges = {}, children, ...rest } = props;
+  const {
+    className,
+    value,
+    minValue = 0,
+    maxValue = 1,
+    color,
+    ranges = {},
+    children,
+    ...rest
+  } = props;
   const scaledValue = scale(value, minValue, maxValue);
   const hasContent = children !== undefined;
-  const effectiveColor = color || keyOfMatchingRange(value, ranges) || 'default';
+  const effectiveColor =
+    color || keyOfMatchingRange(value, ranges) || 'default';
   return (
     <div
       className={classes([
@@ -28,7 +38,9 @@ export const ProgressBar = (props) => {
           width: clamp01(scaledValue) * 100 + '%',
         }}
       />
-      <div className="ProgressBar__content">{hasContent ? children : toFixed(scaledValue * 100) + '%'}</div>
+      <div className="ProgressBar__content">
+        {hasContent ? children : toFixed(scaledValue * 100) + '%'}
+      </div>
     </div>
   );
 };
diff --git a/tgui/packages/tgui_ch/components/RestrictedInput.js b/tgui/packages/tgui_ch/components/RestrictedInput.js
index 32293f61a5..977c911d4e 100644
--- a/tgui/packages/tgui_ch/components/RestrictedInput.js
+++ b/tgui/packages/tgui_ch/components/RestrictedInput.js
@@ -131,7 +131,12 @@ export class RestrictedInput extends Component {
     const { className, fluid, monospace, ...rest } = boxProps;
     return (
       <Box
-        className={classes(['Input', fluid && 'Input--fluid', monospace && 'Input--monospace', className])}
+        className={classes([
+          'Input',
+          fluid && 'Input--fluid',
+          monospace && 'Input--monospace',
+          className,
+        ])}
         {...rest}>
         <div className="Input__baseline">.</div>
         <input
diff --git a/tgui/packages/tgui_ch/components/RoundGauge.js b/tgui/packages/tgui_ch/components/RoundGauge.js
index 696906b48e..06c268dd0c 100644
--- a/tgui/packages/tgui_ch/components/RoundGauge.js
+++ b/tgui/packages/tgui_ch/components/RoundGauge.js
@@ -15,7 +15,18 @@ export const RoundGauge = (props) => {
     return <AnimatedNumber {...props} />;
   }
 
-  const { value, minValue = 1, maxValue = 1, ranges, alertAfter, format, size = 1, className, style, ...rest } = props;
+  const {
+    value,
+    minValue = 1,
+    maxValue = 1,
+    ranges,
+    alertAfter,
+    format,
+    size = 1,
+    className,
+    style,
+    ...rest
+  } = props;
 
   const scaledValue = scale(value, minValue, maxValue);
   const clampedValue = clamp01(scaledValue);
@@ -23,7 +34,10 @@ export const RoundGauge = (props) => {
   if (ranges) {
     Object.keys(ranges).forEach((x) => {
       const range = ranges[x];
-      scaledRanges[x] = [scale(range[0], minValue, maxValue), scale(range[1], minValue, maxValue)];
+      scaledRanges[x] = [
+        scale(range[0], minValue, maxValue),
+        scale(range[1], minValue, maxValue),
+      ];
     });
   }
 
@@ -35,7 +49,11 @@ export const RoundGauge = (props) => {
   return (
     <Box inline>
       <div
-        className={classes(['RoundGauge', className, computeBoxClassName(rest)])}
+        className={classes([
+          'RoundGauge',
+          className,
+          computeBoxClassName(rest),
+        ])}
         {...computeBoxProps({
           style: {
             'font-size': size + 'em',
@@ -45,7 +63,11 @@ export const RoundGauge = (props) => {
         })}>
         <svg viewBox="0 0 100 50">
           {alertAfter && (
-            <g className={classes(['RoundGauge__alert', alertColor ? `active RoundGauge__alert--${alertColor}` : ''])}>
+            <g
+              className={classes([
+                'RoundGauge__alert',
+                alertColor ? `active RoundGauge__alert--${alertColor}` : '',
+              ])}>
               <path d="M48.211,14.578C48.55,13.9 49.242,13.472 50,13.472C50.758,13.472 51.45,13.9 51.789,14.578C54.793,20.587 60.795,32.589 63.553,38.106C63.863,38.726 63.83,39.462 63.465,40.051C63.101,40.641 62.457,41 61.764,41C55.996,41 44.004,41 38.236,41C37.543,41 36.899,40.641 36.535,40.051C36.17,39.462 36.137,38.726 36.447,38.106C39.205,32.589 45.207,20.587 48.211,14.578ZM50,34.417C51.426,34.417 52.583,35.574 52.583,37C52.583,38.426 51.426,39.583 50,39.583C48.574,39.583 47.417,38.426 47.417,37C47.417,35.574 48.574,34.417 50,34.417ZM50,32.75C50,32.75 53,31.805 53,22.25C53,20.594 51.656,19.25 50,19.25C48.344,19.25 47,20.594 47,22.25C47,31.805 50,32.75 50,32.75Z" />
             </g>
           )}
@@ -60,7 +82,10 @@ export const RoundGauge = (props) => {
                   className={`RoundGauge__ringFill RoundGauge--color--${x}`}
                   key={i}
                   style={{
-                    'stroke-dashoffset': Math.max((2.0 - (col_ranges[1] - col_ranges[0])) * Math.PI * 50, 0),
+                    'stroke-dashoffset': Math.max(
+                      (2.0 - (col_ranges[1] - col_ranges[0])) * Math.PI * 50,
+                      0
+                    ),
                   }}
                   transform={`rotate(${180 + 180 * col_ranges[0]} 50 50)`}
                   cx="50"
@@ -70,9 +95,19 @@ export const RoundGauge = (props) => {
               );
             })}
           </g>
-          <g className="RoundGauge__needle" transform={`rotate(${clampedValue * 180 - 90} 50 50)`}>
-            <polygon className="RoundGauge__needleLine" points="46,50 50,0 54,50" />
-            <circle className="RoundGauge__needleMiddle" cx="50" cy="50" r="8" />
+          <g
+            className="RoundGauge__needle"
+            transform={`rotate(${clampedValue * 180 - 90} 50 50)`}>
+            <polygon
+              className="RoundGauge__needleLine"
+              points="46,50 50,0 54,50"
+            />
+            <circle
+              className="RoundGauge__needleMiddle"
+              cx="50"
+              cy="50"
+              r="8"
+            />
           </g>
         </svg>
       </div>
diff --git a/tgui/packages/tgui_ch/components/Slider.js b/tgui/packages/tgui_ch/components/Slider.js
index 31b47bb0f3..45e00fe3cd 100644
--- a/tgui/packages/tgui_ch/components/Slider.js
+++ b/tgui/packages/tgui_ch/components/Slider.js
@@ -54,12 +54,25 @@ export const Slider = (props) => {
         value,
       }}>
       {(control) => {
-        const { dragging, editing, value, displayValue, displayElement, inputElement, handleDragStart } = control;
+        const {
+          dragging,
+          editing,
+          value,
+          displayValue,
+          displayElement,
+          inputElement,
+          handleDragStart,
+        } = control;
         const hasFillValue = fillValue !== undefined && fillValue !== null;
         const scaledValue = scale(value, minValue, maxValue);
-        const scaledFillValue = scale(fillValue ?? displayValue, minValue, maxValue);
+        const scaledFillValue = scale(
+          fillValue ?? displayValue,
+          minValue,
+          maxValue
+        );
         const scaledDisplayValue = scale(displayValue, minValue, maxValue);
-        const effectiveColor = color || keyOfMatchingRange(fillValue ?? value, ranges) || 'default';
+        const effectiveColor =
+          color || keyOfMatchingRange(fillValue ?? value, ranges) || 'default';
         return (
           <div
             className={classes([
@@ -72,7 +85,10 @@ export const Slider = (props) => {
             {...computeBoxProps(rest)}
             onMouseDown={handleDragStart}>
             <div
-              className={classes(['ProgressBar__fill', hasFillValue && 'ProgressBar__fill--animated'])}
+              className={classes([
+                'ProgressBar__fill',
+                hasFillValue && 'ProgressBar__fill--animated',
+              ])}
               style={{
                 width: clamp01(scaledFillValue) * 100 + '%',
                 opacity: 0.4,
@@ -81,7 +97,9 @@ export const Slider = (props) => {
             <div
               className="ProgressBar__fill"
               style={{
-                width: clamp01(Math.min(scaledFillValue, scaledDisplayValue)) * 100 + '%',
+                width:
+                  clamp01(Math.min(scaledFillValue, scaledDisplayValue)) * 100 +
+                  '%',
               }}
             />
             <div
@@ -91,9 +109,13 @@ export const Slider = (props) => {
               }}>
               <div className="Slider__cursor" />
               <div className="Slider__pointer" />
-              {dragging && <div className="Slider__popupValue">{displayElement}</div>}
+              {dragging && (
+                <div className="Slider__popupValue">{displayElement}</div>
+              )}
+            </div>
+            <div className="ProgressBar__content">
+              {hasContent ? children : displayElement}
             </div>
-            <div className="ProgressBar__content">{hasContent ? children : displayElement}</div>
             {inputElement}
           </div>
         );
diff --git a/tgui/packages/tgui_ch/components/Stack.tsx b/tgui/packages/tgui_ch/components/Stack.tsx
index f399e97a45..28aaa8080c 100644
--- a/tgui/packages/tgui_ch/components/Stack.tsx
+++ b/tgui/packages/tgui_ch/components/Stack.tsx
@@ -35,7 +35,13 @@ type StackItemProps = FlexProps & {
 
 const StackItem = (props: StackItemProps) => {
   const { className, innerRef, ...rest } = props;
-  return <Flex.Item className={classes(['Stack__item', className])} ref={innerRef} {...rest} />;
+  return (
+    <Flex.Item
+      className={classes(['Stack__item', className])}
+      ref={innerRef}
+      {...rest}
+    />
+  );
 };
 
 Stack.Item = StackItem;
@@ -48,7 +54,12 @@ const StackDivider = (props: StackDividerProps) => {
   const { className, hidden, ...rest } = props;
   return (
     <Flex.Item
-      className={classes(['Stack__item', 'Stack__divider', hidden && 'Stack__divider--hidden', className])}
+      className={classes([
+        'Stack__item',
+        'Stack__divider',
+        hidden && 'Stack__divider--hidden',
+        className,
+      ])}
       {...rest}
     />
   );
diff --git a/tgui/packages/tgui_ch/components/Table.js b/tgui/packages/tgui_ch/components/Table.js
index 3c8487242b..e936b91448 100644
--- a/tgui/packages/tgui_ch/components/Table.js
+++ b/tgui/packages/tgui_ch/components/Table.js
@@ -11,7 +11,12 @@ export const Table = (props) => {
   const { className, collapsing, children, ...rest } = props;
   return (
     <table
-      className={classes(['Table', collapsing && 'Table--collapsing', className, computeBoxClassName(rest)])}
+      className={classes([
+        'Table',
+        collapsing && 'Table--collapsing',
+        className,
+        computeBoxClassName(rest),
+      ])}
       {...computeBoxProps(rest)}>
       <tbody>{children}</tbody>
     </table>
@@ -24,7 +29,12 @@ export const TableRow = (props) => {
   const { className, header, ...rest } = props;
   return (
     <tr
-      className={classes(['Table__row', header && 'Table__row--header', className, computeBoxClassName(props)])}
+      className={classes([
+        'Table__row',
+        header && 'Table__row--header',
+        className,
+        computeBoxClassName(props),
+      ])}
       {...computeBoxProps(rest)}
     />
   );
diff --git a/tgui/packages/tgui_ch/components/Tabs.js b/tgui/packages/tgui_ch/components/Tabs.js
index 8dfc28b3f1..46d1b078a8 100644
--- a/tgui/packages/tgui_ch/components/Tabs.js
+++ b/tgui/packages/tgui_ch/components/Tabs.js
@@ -27,7 +27,16 @@ export const Tabs = (props) => {
 };
 
 const Tab = (props) => {
-  const { className, selected, color, icon, leftSlot, rightSlot, children, ...rest } = props;
+  const {
+    className,
+    selected,
+    color,
+    icon,
+    leftSlot,
+    rightSlot,
+    children,
+    ...rest
+  } = props;
   return (
     <div
       className={classes([
diff --git a/tgui/packages/tgui_ch/components/TextArea.js b/tgui/packages/tgui_ch/components/TextArea.js
index f616713401..42f8455db7 100644
--- a/tgui/packages/tgui_ch/components/TextArea.js
+++ b/tgui/packages/tgui_ch/components/TextArea.js
@@ -98,7 +98,10 @@ export class TextArea extends Component {
         if (keyCode === KEY_TAB) {
           e.preventDefault();
           const { value, selectionStart, selectionEnd } = e.target;
-          e.target.value = value.substring(0, selectionStart) + '\t' + value.substring(selectionEnd);
+          e.target.value =
+            value.substring(0, selectionStart) +
+            '\t' +
+            value.substring(selectionEnd);
           e.target.selectionEnd = selectionStart + 1;
           // CHOMPedit
           if (onInput) {
@@ -194,12 +197,20 @@ export class TextArea extends Component {
     const { scrolledAmount } = this.state;
     return (
       <Box
-        className={classes(['TextArea', fluid && 'TextArea--fluid', noborder && 'TextArea--noborder', className])}
+        className={classes([
+          'TextArea',
+          fluid && 'TextArea--fluid',
+          noborder && 'TextArea--noborder',
+          className,
+        ])}
         {...rest}>
         {!!displayedValue && (
           <Box position="absolute" width="100%" height="100%" overflow="hidden">
             <div
-              className={classes(['TextArea__textarea', 'TextArea__textarea_custom'])}
+              className={classes([
+                'TextArea__textarea',
+                'TextArea__textarea_custom',
+              ])}
               style={{
                 'transform': `translateY(-${scrolledAmount}px)`,
               }}>
diff --git a/tgui/packages/tgui_ch/components/TimeDisplay.js b/tgui/packages/tgui_ch/components/TimeDisplay.js
index 2ca963eb8c..6b87ee5260 100644
--- a/tgui/packages/tgui_ch/components/TimeDisplay.js
+++ b/tgui/packages/tgui_ch/components/TimeDisplay.js
@@ -3,7 +3,9 @@ import { Component } from 'inferno';
 
 // AnimatedNumber Copypaste
 const isSafeNumber = (value) => {
-  return typeof value === 'number' && Number.isFinite(value) && !Number.isNaN(value);
+  return (
+    typeof value === 'number' && Number.isFinite(value) && !Number.isNaN(value)
+  );
 };
 
 export class TimeDisplay extends Component {
diff --git a/tgui/packages/tgui_ch/components/Tooltip.tsx b/tgui/packages/tgui_ch/components/Tooltip.tsx
index d1822f5e05..2c5a035eb1 100644
--- a/tgui/packages/tgui_ch/components/Tooltip.tsx
+++ b/tgui/packages/tgui_ch/components/Tooltip.tsx
@@ -38,7 +38,9 @@ export class Tooltip extends Component<TooltipProps, TooltipState> {
   static singletonPopper: ReturnType<typeof createPopper> | undefined;
   static currentHoveredElement: Element | undefined;
   static virtualElement: VirtualElement = {
-    getBoundingClientRect: () => (Tooltip.currentHoveredElement?.getBoundingClientRect() as DOMRect) ?? NULL_RECT,
+    getBoundingClientRect: () =>
+      (Tooltip.currentHoveredElement?.getBoundingClientRect() as DOMRect) ??
+      NULL_RECT,
   };
 
   getDOMNode() {
@@ -101,10 +103,14 @@ export class Tooltip extends Component<TooltipProps, TooltipState> {
       () => {
         let singletonPopper = Tooltip.singletonPopper;
         if (singletonPopper === undefined) {
-          singletonPopper = createPopper(Tooltip.virtualElement, renderedTooltip!, {
-            ...DEFAULT_OPTIONS,
-            placement: this.props.position || 'auto',
-          });
+          singletonPopper = createPopper(
+            Tooltip.virtualElement,
+            renderedTooltip!,
+            {
+              ...DEFAULT_OPTIONS,
+              placement: this.props.position || 'auto',
+            }
+          );
 
           Tooltip.singletonPopper = singletonPopper;
         } else {
diff --git a/tgui/packages/tgui_ch/constants.js b/tgui/packages/tgui_ch/constants.js
index 6d9503ad28..49278a5d0f 100644
--- a/tgui/packages/tgui_ch/constants.js
+++ b/tgui/packages/tgui_ch/constants.js
@@ -278,13 +278,19 @@ const GASES = [
 
 export const getGasLabel = (gasId, fallbackValue) => {
   const gasSearchString = String(gasId).toLowerCase();
-  const gas = GASES.find((gas) => gas.id === gasSearchString || gas.name.toLowerCase() === gasSearchString);
+  const gas = GASES.find(
+    (gas) =>
+      gas.id === gasSearchString || gas.name.toLowerCase() === gasSearchString
+  );
   return (gas && gas.label) || fallbackValue || gasId;
 };
 
 export const getGasColor = (gasId) => {
   const gasSearchString = String(gasId).toLowerCase();
-  const gas = GASES.find((gas) => gas.id === gasSearchString || gas.name.toLowerCase() === gasSearchString);
+  const gas = GASES.find(
+    (gas) =>
+      gas.id === gasSearchString || gas.name.toLowerCase() === gasSearchString
+  );
   return gas && gas.color;
 };
 
diff --git a/tgui/packages/tgui_ch/debug/KitchenSink.js b/tgui/packages/tgui_ch/debug/KitchenSink.js
index 372074d215..246b4f50b4 100644
--- a/tgui/packages/tgui_ch/debug/KitchenSink.js
+++ b/tgui/packages/tgui_ch/debug/KitchenSink.js
@@ -34,7 +34,11 @@ export const KitchenSink = (props, context) => {
           <Section fill fitted>
             <Tabs vertical>
               {stories.map((story, i) => (
-                <Tabs.Tab key={i} color="transparent" selected={i === pageIndex} onClick={() => setPageIndex(i)}>
+                <Tabs.Tab
+                  key={i}
+                  color="transparent"
+                  selected={i === pageIndex}
+                  onClick={() => setPageIndex(i)}>
                   {story.meta.title}
                 </Tabs.Tab>
               ))}
diff --git a/tgui/packages/tgui_ch/drag.js b/tgui/packages/tgui_ch/drag.js
index 991585815d..9d59da0d54 100644
--- a/tgui/packages/tgui_ch/drag.js
+++ b/tgui/packages/tgui_ch/drag.js
@@ -25,9 +25,15 @@ export const setWindowKey = (key) => {
   windowKey = key;
 };
 
-const getWindowPosition = () => [window.screenLeft * pixelRatio, window.screenTop * pixelRatio];
+const getWindowPosition = () => [
+  window.screenLeft * pixelRatio,
+  window.screenTop * pixelRatio,
+];
 
-const getWindowSize = () => [window.innerWidth * pixelRatio, window.innerHeight * pixelRatio];
+const getWindowSize = () => [
+  window.innerWidth * pixelRatio,
+  window.innerHeight * pixelRatio,
+];
 
 const setWindowPosition = (vec) => {
   const byondPos = vecAdd(vec, screenOffset);
@@ -44,7 +50,10 @@ const setWindowSize = (vec) => {
 
 const getScreenPosition = () => [0 - screenOffset[0], 0 - screenOffset[1]];
 
-const getScreenSize = () => [window.screen.availWidth * pixelRatio, window.screen.availHeight * pixelRatio];
+const getScreenSize = () => [
+  window.screen.availWidth * pixelRatio,
+  window.screen.availHeight * pixelRatio,
+];
 
 /**
  * Moves an item to the top of the recents array, and keeps its length
@@ -79,7 +88,10 @@ const storeWindowGeometry = async () => {
   };
   storage.set(windowKey, geometry);
   // Update the list of stored geometries
-  const [geometries, trimmedKey] = touchRecents((await storage.get('geometries')) || [], windowKey);
+  const [geometries, trimmedKey] = touchRecents(
+    (await storage.get('geometries')) || [],
+    windowKey
+  );
   if (trimmedKey) {
     storage.remove(trimmedKey);
   }
@@ -105,7 +117,10 @@ export const recallWindowGeometry = async (options = {}) => {
   // Set window size
   if (size) {
     // Constraint size to not exceed available screen area.
-    size = [Math.min(areaAvailable[0], size[0]), Math.min(areaAvailable[1], size[1])];
+    size = [
+      Math.min(areaAvailable[0], size[0]),
+      Math.min(areaAvailable[1], size[1]),
+    ];
     setWindowSize(size);
   }
   // Set window position
@@ -118,7 +133,11 @@ export const recallWindowGeometry = async (options = {}) => {
   }
   // Set window position at the center of the screen.
   else if (size) {
-    pos = vecAdd(vecScale(areaAvailable, 0.5), vecScale(size, -0.5), vecScale(screenOffset, -1.0));
+    pos = vecAdd(
+      vecScale(areaAvailable, 0.5),
+      vecScale(size, -0.5),
+      vecScale(screenOffset, -1.0)
+    );
     setWindowPosition(pos);
   }
 };
@@ -162,7 +181,10 @@ export const dragStartHandler = (event) => {
   logger.log('drag start');
   dragging = true;
   let windowPosition = getWindowPosition();
-  dragPointOffset = vecSubtract([event.screenX, event.screenY], getWindowPosition());
+  dragPointOffset = vecSubtract(
+    [event.screenX, event.screenY],
+    getWindowPosition()
+  );
   // Focus click target
   event.target?.focus();
   document.addEventListener('mousemove', dragMoveHandler);
@@ -184,14 +206,19 @@ const dragMoveHandler = (event) => {
     return;
   }
   event.preventDefault();
-  setWindowPosition(vecSubtract([event.screenX, event.screenY], dragPointOffset));
+  setWindowPosition(
+    vecSubtract([event.screenX, event.screenY], dragPointOffset)
+  );
 };
 
 export const resizeStartHandler = (x, y) => (event) => {
   resizeMatrix = [x, y];
   logger.log('resize start', resizeMatrix);
   resizing = true;
-  dragPointOffset = vecSubtract([event.screenX, event.screenY], getWindowPosition());
+  dragPointOffset = vecSubtract(
+    [event.screenX, event.screenY],
+    getWindowPosition()
+  );
   initialSize = getWindowSize();
   // Focus click target
   event.target?.focus();
@@ -214,7 +241,10 @@ const resizeMoveHandler = (event) => {
     return;
   }
   event.preventDefault();
-  const currentOffset = vecSubtract([event.screenX, event.screenY], getWindowPosition());
+  const currentOffset = vecSubtract(
+    [event.screenX, event.screenY],
+    getWindowPosition()
+  );
   const delta = vecSubtract(currentOffset, dragPointOffset);
   // Extra 1x1 area is added to ensure the browser can see the cursor
   size = vecAdd(initialSize, vecMultiply(resizeMatrix, delta), [1, 1]);
diff --git a/tgui/packages/tgui_ch/events.js b/tgui/packages/tgui_ch/events.js
index 8178149532..87013da203 100644
--- a/tgui/packages/tgui_ch/events.js
+++ b/tgui/packages/tgui_ch/events.js
@@ -159,7 +159,9 @@ export class KeyEvent {
   }
 
   isModifierKey() {
-    return this.code === KEY_CTRL || this.code === KEY_SHIFT || this.code === KEY_ALT;
+    return (
+      this.code === KEY_CTRL || this.code === KEY_SHIFT || this.code === KEY_ALT
+    );
   }
 
   isDown() {
diff --git a/tgui/packages/tgui_ch/format.js b/tgui/packages/tgui_ch/format.js
index a4d8014dd0..4e6461e5af 100644
--- a/tgui/packages/tgui_ch/format.js
+++ b/tgui/packages/tgui_ch/format.js
@@ -38,7 +38,11 @@ const SI_BASE_INDEX = SI_SYMBOLS.indexOf(' ');
  * Formats a number to a human readable form, by reducing it to SI units.
  * TODO: This is quite a shit code and shit math, needs optimization.
  */
-export const formatSiUnit = (value, minBase1000 = -SI_BASE_INDEX, unit = '') => {
+export const formatSiUnit = (
+  value,
+  minBase1000 = -SI_BASE_INDEX,
+  unit = ''
+) => {
   if (typeof value !== 'number' || !Number.isFinite(value)) {
     return value;
   }
@@ -49,10 +53,12 @@ export const formatSiUnit = (value, minBase1000 = -SI_BASE_INDEX, unit = '') =>
   const symbolIndex = clamp(SI_BASE_INDEX + base1000, 0, SI_SYMBOLS.length);
   const symbol = SI_SYMBOLS[symbolIndex];
   const scaledNumber = value / Math.pow(1000, base1000);
-  const scaledPrecision = realBase1000 > minBase1000 ? 2 + base1000 * 3 - base10 : 0;
+  const scaledPrecision =
+    realBase1000 > minBase1000 ? 2 + base1000 * 3 - base10 : 0;
   // TODO: Make numbers bigger than precision value show
   // up to 2 decimal numbers.
-  const finalString = toFixed(scaledNumber, scaledPrecision) + ' ' + symbol + unit;
+  const finalString =
+    toFixed(scaledNumber, scaledPrecision) + ' ' + symbol + unit;
   return finalString.trim();
 };
 
@@ -125,7 +131,11 @@ const SI_BASE_TEN_INDEX = SI_BASE_TEN_UNIT.indexOf(' ');
  * Formats a number to a human readable form, by reducing it to SI units.
  * TODO: This is quite a shit code and shit math, needs optimization.
  */
-export const formatSiBaseTenUnit = (value, minBase1000 = -SI_BASE_TEN_INDEX, unit = '') => {
+export const formatSiBaseTenUnit = (
+  value,
+  minBase1000 = -SI_BASE_TEN_INDEX,
+  unit = ''
+) => {
   if (typeof value !== 'number' || !Number.isFinite(value)) {
     return value;
   }
@@ -133,13 +143,19 @@ export const formatSiBaseTenUnit = (value, minBase1000 = -SI_BASE_TEN_INDEX, uni
   const base10 = Math.floor(Math.max(minBase1000 * 3, realBase10));
   const realBase1000 = Math.floor(realBase10 / 3);
   const base1000 = Math.floor(base10 / 3);
-  const symbolIndex = clamp(SI_BASE_TEN_INDEX + base1000, 0, SI_BASE_TEN_UNIT.length);
+  const symbolIndex = clamp(
+    SI_BASE_TEN_INDEX + base1000,
+    0,
+    SI_BASE_TEN_UNIT.length
+  );
   const symbol = SI_BASE_TEN_UNIT[symbolIndex];
   const scaledNumber = value / Math.pow(1000, base1000);
-  const scaledPrecision = realBase1000 > minBase1000 ? 2 + base1000 * 3 - base10 : 0;
+  const scaledPrecision =
+    realBase1000 > minBase1000 ? 2 + base1000 * 3 - base10 : 0;
   // TODO: Make numbers bigger than precision value show
   // up to 2 decimal numbers.
-  const finalString = toFixed(scaledNumber, scaledPrecision) + ' ' + symbol + ' ' + unit;
+  const finalString =
+    toFixed(scaledNumber, scaledPrecision) + ' ' + symbol + ' ' + unit;
   return finalString.trim();
 };
 
diff --git a/tgui/packages/tgui_ch/hotkeys.ts b/tgui/packages/tgui_ch/hotkeys.ts
index 62c563fd60..5d3adfc4c1 100644
--- a/tgui/packages/tgui_ch/hotkeys.ts
+++ b/tgui/packages/tgui_ch/hotkeys.ts
@@ -81,7 +81,11 @@ const handlePassthrough = (key: KeyEvent) => {
     return;
   }
   // NOTE: Alt modifier is pretty bad and sticky in IE11.
-  if (key.event.defaultPrevented || key.isModifierKey() || hotKeysAcquired.includes(key.code)) {
+  if (
+    key.event.defaultPrevented ||
+    key.isModifierKey() ||
+    hotKeysAcquired.includes(key.code)
+  ) {
     return;
   }
   const byondKeyCode = keyCodeToByond(key.code);
@@ -164,7 +168,8 @@ export const setupHotKeys = () => {
     }
     // Insert macros
     const escapedQuotRegex = /\\"/g;
-    const unescape = (str: string) => str.substring(1, str.length - 1).replace(escapedQuotRegex, '"');
+    const unescape = (str: string) =>
+      str.substring(1, str.length - 1).replace(escapedQuotRegex, '"');
     for (let ref of Object.keys(groupedByRef)) {
       const macro = groupedByRef[ref];
       const byondKeyName = unescape(macro.name);
@@ -196,7 +201,9 @@ export const setupHotKeys = () => {
  * @param callback The function to call whenever a key event occurs
  * @returns A callback to stop listening
  */
-export const listenForKeyEvents = (callback: (key: KeyEvent) => void): (() => void) => {
+export const listenForKeyEvents = (
+  callback: (key: KeyEvent) => void
+): (() => void) => {
   keyListeners.push(callback);
 
   let removed = false;
diff --git a/tgui/packages/tgui_ch/http.ts b/tgui/packages/tgui_ch/http.ts
index 8c18cf0c09..a0ea97c3b6 100644
--- a/tgui/packages/tgui_ch/http.ts
+++ b/tgui/packages/tgui_ch/http.ts
@@ -1,7 +1,11 @@
 /**
  * An equivalent to `fetch`, except will automatically retry.
  */
-export const fetchRetry = (url: string, options?: RequestInit, retryTimer: number = 1000): Promise<Response> => {
+export const fetchRetry = (
+  url: string,
+  options?: RequestInit,
+  retryTimer: number = 1000
+): Promise<Response> => {
   return fetch(url, options).catch(() => {
     return new Promise((resolve) => {
       setTimeout(() => {
diff --git a/tgui/packages/tgui_ch/index.js b/tgui/packages/tgui_ch/index.js
index a65eaccc4f..5885ff9372 100644
--- a/tgui/packages/tgui_ch/index.js
+++ b/tgui/packages/tgui_ch/index.js
@@ -62,9 +62,12 @@ const setupApp = () => {
   // Enable hot module reloading
   if (module.hot) {
     setupHotReloading();
-    module.hot.accept(['./components', './debug', './layouts', './routes'], () => {
-      renderApp();
-    });
+    module.hot.accept(
+      ['./components', './debug', './layouts', './routes'],
+      () => {
+        renderApp();
+      }
+    );
   }
 };
 
diff --git a/tgui/packages/tgui_ch/interfaces/AICard.js b/tgui/packages/tgui_ch/interfaces/AICard.js
index 748dc9a09c..c0695e414a 100644
--- a/tgui/packages/tgui_ch/interfaces/AICard.js
+++ b/tgui/packages/tgui_ch/interfaces/AICard.js
@@ -5,7 +5,16 @@ import { Window } from '../layouts';
 export const AICard = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { has_ai, integrity, backup_capacitor, flushing, has_laws, laws, wireless, radio } = data;
+  const {
+    has_ai,
+    integrity,
+    backup_capacitor,
+    flushing,
+    has_laws,
+    laws,
+    wireless,
+    radio,
+  } = data;
 
   if (has_ai === 0) {
     return (
@@ -52,7 +61,10 @@ export const AICard = (props, context) => {
                   <ProgressBar color={integrityColor} value={integrity / 100} />
                 </LabeledList.Item>
                 <LabeledList.Item label="Power">
-                  <ProgressBar color={powerColor} value={backup_capacitor / 100} />
+                  <ProgressBar
+                    color={powerColor}
+                    value={backup_capacitor / 100}
+                  />
                 </LabeledList.Item>
               </LabeledList>
             </Box>
diff --git a/tgui/packages/tgui_ch/interfaces/APC.js b/tgui/packages/tgui_ch/interfaces/APC.js
index 45e21ee399..ef13cc098a 100644
--- a/tgui/packages/tgui_ch/interfaces/APC.js
+++ b/tgui/packages/tgui_ch/interfaces/APC.js
@@ -68,8 +68,10 @@ const ApcContent = (props, context) => {
   const { act, data } = useBackend(context);
   const locked = data.locked && !data.siliconUser;
   const normallyLocked = data.normallyLocked;
-  const externalPowerStatus = powerStatusMap[data.externalPower] || powerStatusMap[0];
-  const chargingStatus = powerStatusMap[data.chargingStatus] || powerStatusMap[0];
+  const externalPowerStatus =
+    powerStatusMap[data.externalPower] || powerStatusMap[0];
+  const chargingStatus =
+    powerStatusMap[data.chargingStatus] || powerStatusMap[0];
   const channelArray = data.powerChannels || [];
   // const malfStatus = malfMap[data.malfStatus] || null;
   const adjustedCellChange = data.powerCellStatus / 100;
@@ -133,13 +135,19 @@ const ApcContent = (props, context) => {
                 label={channel.title}
                 buttons={
                   <Fragment>
-                    <Box inline mx={2} color={channel.status >= 2 ? 'good' : 'bad'}>
+                    <Box
+                      inline
+                      mx={2}
+                      color={channel.status >= 2 ? 'good' : 'bad'}>
                       {channel.status >= 2 ? 'On' : 'Off'}
                     </Box>
                     <Button
                       icon="sync"
                       content="Auto"
-                      selected={!locked && (channel.status === 1 || channel.status === 3)}
+                      selected={
+                        !locked &&
+                        (channel.status === 1 || channel.status === 3)
+                      }
                       disabled={locked}
                       onClick={() => act('channel', topicParams.auto)}
                     />
@@ -177,7 +185,13 @@ const ApcContent = (props, context) => {
       <Section
         title="Misc"
         buttons={
-          !!data.siliconUser && <Button icon="lightbulb-o" content="Overload" onClick={() => act('overload')} />
+          !!data.siliconUser && (
+            <Button
+              icon="lightbulb-o"
+              content="Overload"
+              onClick={() => act('overload')}
+            />
+          )
         }>
         <LabeledList>
           <LabeledList.Item
@@ -250,7 +264,12 @@ const GridCheck = (props, context) => {
   return (
     <FullscreenNotice title="System Failure">
       <Box fontSize="1.5rem" bold>
-        <Icon name="exclamation-triangle" verticalAlign="middle" size={3} mr="1rem" />
+        <Icon
+          name="exclamation-triangle"
+          verticalAlign="middle"
+          size={3}
+          mr="1rem"
+        />
       </Box>
       <Box fontSize="1.5rem" bold>
         Power surge detected, grid check in effect...
@@ -262,7 +281,14 @@ const GridCheck = (props, context) => {
 const ApcFailure = (props, context) => {
   const { data, act } = useBackend(context);
 
-  let rebootOptions = <Button icon="repeat" content="Restart Now" color="good" onClick={() => act('reboot')} />;
+  let rebootOptions = (
+    <Button
+      icon="repeat"
+      content="Restart Now"
+      color="good"
+      onClick={() => act('reboot')}
+    />
+  );
 
   if (data.locked && !data.siliconUser) {
     rebootOptions = <Box color="bad">Swipe an ID card for manual reboot.</Box>;
@@ -274,7 +300,9 @@ const ApcFailure = (props, context) => {
         <h1>SYSTEM FAILURE</h1>
       </Box>
       <Box color="average">
-        <h2>I/O regulators malfunction detected! Waiting for system reboot...</h2>
+        <h2>
+          I/O regulators malfunction detected! Waiting for system reboot...
+        </h2>
       </Box>
       <Box color="good">Automatic reboot in {data.failTime} seconds...</Box>
       <Box mt={4}>{rebootOptions}</Box>
diff --git a/tgui/packages/tgui_ch/interfaces/AccountsTerminal.js b/tgui/packages/tgui_ch/interfaces/AccountsTerminal.js
index dfc0809e72..56c7de0185 100644
--- a/tgui/packages/tgui_ch/interfaces/AccountsTerminal.js
+++ b/tgui/packages/tgui_ch/interfaces/AccountsTerminal.js
@@ -45,14 +45,21 @@ const AccountTerminalContent = (props, context) => {
           onClick={() => act('view_accounts_list')}>
           Home
         </Tabs.Tab>
-        <Tabs.Tab selected={creating_new_account} icon="cog" onClick={() => act('create_account')}>
+        <Tabs.Tab
+          selected={creating_new_account}
+          icon="cog"
+          onClick={() => act('create_account')}>
           New Account
         </Tabs.Tab>
-        <Tabs.Tab disabled={creating_new_account} icon="print" onClick={() => act('print')}>
+        <Tabs.Tab
+          disabled={creating_new_account}
+          icon="print"
+          onClick={() => act('print')}>
           Print
         </Tabs.Tab>
       </Tabs>
-      {(creating_new_account && <NewAccountView />) || (detailed_account_view && <DetailedView />) || <ListView />}
+      {(creating_new_account && <NewAccountView />) ||
+        (detailed_account_view && <DetailedView />) || <ListView />}
     </Section>
   );
 };
@@ -93,15 +100,32 @@ const NewAccountView = (props, context) => {
 const DetailedView = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { access_level, station_account_number, account_number, owner_name, money, suspended, transactions } = data;
+  const {
+    access_level,
+    station_account_number,
+    account_number,
+    owner_name,
+    money,
+    suspended,
+    transactions,
+  } = data;
 
   return (
     <Section
       title="Account Details"
       level={2}
-      buttons={<Button icon="ban" selected={suspended} content="Suspend" onClick={() => act('toggle_suspension')} />}>
+      buttons={
+        <Button
+          icon="ban"
+          selected={suspended}
+          content="Suspend"
+          onClick={() => act('toggle_suspension')}
+        />
+      }>
       <LabeledList>
-        <LabeledList.Item label="Account Number">#{account_number}</LabeledList.Item>
+        <LabeledList.Item label="Account Number">
+          #{account_number}
+        </LabeledList.Item>
         <LabeledList.Item label="Holder">{owner_name}</LabeledList.Item>
         <LabeledList.Item label="Balance">{money}₮</LabeledList.Item>
         <LabeledList.Item label="Status" color={suspended ? 'bad' : 'good'}>
@@ -126,8 +150,16 @@ const DetailedView = (props, context) => {
       </Section>
       {access_level >= 2 && (
         <Section title="Silent Funds Transfer" level={2}>
-          <Button icon="plus" onClick={() => act('add_funds')} content="Add Funds" />
-          <Button icon="plus" onClick={() => act('remove_funds')} content="Remove Funds" />
+          <Button
+            icon="plus"
+            onClick={() => act('add_funds')}
+            content="Add Funds"
+          />
+          <Button
+            icon="plus"
+            onClick={() => act('remove_funds')}
+            content="Remove Funds"
+          />
         </Section>
       )}
       <Section title="Transactions" level={2} mt={1}>
@@ -173,7 +205,11 @@ const ListView = (props, context) => {
               <Button
                 fluid
                 content={'#' + acc.account_number}
-                onClick={() => act('view_account_detail', { 'account_index': acc.account_index })}
+                onClick={() =>
+                  act('view_account_detail', {
+                    'account_index': acc.account_index,
+                  })
+                }
               />
             </LabeledList.Item>
           ))}
diff --git a/tgui/packages/tgui_ch/interfaces/AdminShuttleController.tsx b/tgui/packages/tgui_ch/interfaces/AdminShuttleController.tsx
index 242ef40690..e24331d1fd 100644
--- a/tgui/packages/tgui_ch/interfaces/AdminShuttleController.tsx
+++ b/tgui/packages/tgui_ch/interfaces/AdminShuttleController.tsx
@@ -42,10 +42,18 @@ export const ShuttleList = (props, context) => {
           {sortBy((f: Shuttle) => f.name)(shuttles).map((shuttle) => (
             <Table.Row key={shuttle.ref}>
               <Table.Cell collapsing>
-                <Button m={0} content="JMP" onClick={() => act('adminobserve', { ref: shuttle.ref })} />
+                <Button
+                  m={0}
+                  content="JMP"
+                  onClick={() => act('adminobserve', { ref: shuttle.ref })}
+                />
               </Table.Cell>
               <Table.Cell collapsing>
-                <Button m={0} content="Fly" onClick={() => act('classicmove', { ref: shuttle.ref })} />
+                <Button
+                  m={0}
+                  content="Fly"
+                  onClick={() => act('classicmove', { ref: shuttle.ref })}
+                />
               </Table.Cell>
               <Table.Cell>{shuttle.name}</Table.Cell>
               <Table.Cell>{shuttle.current_location}</Table.Cell>
@@ -56,13 +64,21 @@ export const ShuttleList = (props, context) => {
       </Section>
       <Section title="Overmap Ships">
         <Table>
-          {sortBy((f: OvermapShip) => f.name?.toLowerCase() || f.name || f.ref)(overmap_ships).map((ship) => (
+          {sortBy((f: OvermapShip) => f.name?.toLowerCase() || f.name || f.ref)(
+            overmap_ships
+          ).map((ship) => (
             <Table.Row key={ship.ref}>
               <Table.Cell collapsing>
-                <Button content="JMP" onClick={() => act('adminobserve', { ref: ship.ref })} />
+                <Button
+                  content="JMP"
+                  onClick={() => act('adminobserve', { ref: ship.ref })}
+                />
               </Table.Cell>
               <Table.Cell collapsing>
-                <Button content="Control" onClick={() => act('overmap_control', { ref: ship.ref })} />
+                <Button
+                  content="Control"
+                  onClick={() => act('overmap_control', { ref: ship.ref })}
+                />
               </Table.Cell>
               <Table.Cell>{ship.name}</Table.Cell>
             </Table.Row>
diff --git a/tgui/packages/tgui_ch/interfaces/AdminTicketPanel.tsx b/tgui/packages/tgui_ch/interfaces/AdminTicketPanel.tsx
index bb025c0f28..adec835748 100644
--- a/tgui/packages/tgui_ch/interfaces/AdminTicketPanel.tsx
+++ b/tgui/packages/tgui_ch/interfaces/AdminTicketPanel.tsx
@@ -25,7 +25,18 @@ type Data = {
 
 export const AdminTicketPanel = (props, context) => {
   const { act, data } = useBackend<Data>(context);
-  const { id, title, name, state, opened_at, closed_at, opened_at_date, closed_at_date, actions, log } = data;
+  const {
+    id,
+    title,
+    name,
+    state,
+    opened_at,
+    closed_at,
+    opened_at_date,
+    closed_at_date,
+    actions,
+    log,
+  } = data;
   return (
     <Window width={900} height={600}>
       <Window.Content scrollable>
@@ -33,7 +44,11 @@ export const AdminTicketPanel = (props, context) => {
           title={'Ticket #' + id}
           buttons={
             <Box nowrap>
-              <Button icon="pen" content="Rename Ticket" onClick={() => act('retitle')} />{' '}
+              <Button
+                icon="pen"
+                content="Rename Ticket"
+                onClick={() => act('retitle')}
+              />{' '}
               <Button content="Legacy UI" onClick={() => act('legacy')} />
             </Box>
           }>
@@ -44,11 +59,13 @@ export const AdminTicketPanel = (props, context) => {
             <LabeledList.Item label="State">{State[state]}</LabeledList.Item>
             {State[state] === State.open ? (
               <LabeledList.Item label="Opened At">
-                {opened_at_date} ({Math.round((opened_at / 600) * 10) / 10} minutes ago.)
+                {opened_at_date} ({Math.round((opened_at / 600) * 10) / 10}{' '}
+                minutes ago.)
               </LabeledList.Item>
             ) : (
               <LabeledList.Item label="Closed At">
-                {closed_at_date} ({Math.round((closed_at / 600) * 10) / 10} minutes ago.){' '}
+                {closed_at_date} ({Math.round((closed_at / 600) * 10) / 10}{' '}
+                minutes ago.){' '}
                 <Button content="Reopen" onClick={() => act('reopen')} />
               </LabeledList.Item>
             )}
diff --git a/tgui/packages/tgui_ch/interfaces/AgentCard.tsx b/tgui/packages/tgui_ch/interfaces/AgentCard.tsx
index 3323ba6372..203af364cb 100644
--- a/tgui/packages/tgui_ch/interfaces/AgentCard.tsx
+++ b/tgui/packages/tgui_ch/interfaces/AgentCard.tsx
@@ -21,7 +21,10 @@ export const AgentCard = (props, context) => {
             {entries.map((a) => (
               <Table.Row key={a.name}>
                 <Table.Cell>
-                  <Button onClick={() => act(a.name.toLowerCase().replace(/ /g, ''))} icon="cog" />
+                  <Button
+                    onClick={() => act(a.name.toLowerCase().replace(/ /g, ''))}
+                    icon="cog"
+                  />
                 </Table.Cell>
                 <Table.Cell>{a.name}</Table.Cell>
                 <Table.Cell>{a.value}</Table.Cell>
diff --git a/tgui/packages/tgui_ch/interfaces/AiAirlock.js b/tgui/packages/tgui_ch/interfaces/AiAirlock.js
index 7c683778c7..e89ddebc06 100644
--- a/tgui/packages/tgui_ch/interfaces/AiAirlock.js
+++ b/tgui/packages/tgui_ch/interfaces/AiAirlock.js
@@ -40,8 +40,10 @@ export const AiAirlock = (props, context) => {
                 />
               }>
               {data.power.main ? 'Online' : 'Offline'}{' '}
-              {((!data.wires.main_1 || !data.wires.main_2) && '[Wires have been cut!]') ||
-                (data.power.main_timeleft > 0 && `[${data.power.main_timeleft}s]`)}
+              {((!data.wires.main_1 || !data.wires.main_2) &&
+                '[Wires have been cut!]') ||
+                (data.power.main_timeleft > 0 &&
+                  `[${data.power.main_timeleft}s]`)}
             </LabeledList.Item>
             <LabeledList.Item
               label="Backup"
@@ -55,8 +57,10 @@ export const AiAirlock = (props, context) => {
                 />
               }>
               {data.power.backup ? 'Online' : 'Offline'}{' '}
-              {((!data.wires.backup_1 || !data.wires.backup_2) && '[Wires have been cut!]') ||
-                (data.power.backup_timeleft > 0 && `[${data.power.backup_timeleft}s]`)}
+              {((!data.wires.backup_1 || !data.wires.backup_2) &&
+                '[Wires have been cut!]') ||
+                (data.power.backup_timeleft > 0 &&
+                  `[${data.power.backup_timeleft}s]`)}
             </LabeledList.Item>
             <LabeledList.Item
               label="Electrify"
diff --git a/tgui/packages/tgui_ch/interfaces/AiRestorer.js b/tgui/packages/tgui_ch/interfaces/AiRestorer.js
index a8f11678a1..d5a582bb4b 100644
--- a/tgui/packages/tgui_ch/interfaces/AiRestorer.js
+++ b/tgui/packages/tgui_ch/interfaces/AiRestorer.js
@@ -15,7 +15,16 @@ export const AiRestorer = () => {
 
 export const AiRestorerContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const { AI_present, error, name, laws, isDead, restoring, health, ejectable } = data;
+  const {
+    AI_present,
+    error,
+    name,
+    laws,
+    isDead,
+    restoring,
+    health,
+    ejectable,
+  } = data;
   return (
     <Fragment>
       {error && <NoticeBox textAlign="center">{error}</NoticeBox>}
diff --git a/tgui/packages/tgui_ch/interfaces/AiSupermatter.js b/tgui/packages/tgui_ch/interfaces/AiSupermatter.js
index 103515c7bd..5b90191eee 100644
--- a/tgui/packages/tgui_ch/interfaces/AiSupermatter.js
+++ b/tgui/packages/tgui_ch/interfaces/AiSupermatter.js
@@ -6,7 +6,8 @@ import { FullscreenNotice } from './common/FullscreenNotice';
 export const AiSupermatter = (props, context) => {
   const { data } = useBackend(context);
 
-  const { integrity_percentage, ambient_temp, ambient_pressure, detonating } = data;
+  const { integrity_percentage, ambient_temp, ambient_pressure, detonating } =
+    data;
 
   let body = <AiSupermatterContent />;
   if (detonating) {
@@ -23,7 +24,13 @@ export const AiSupermatter = (props, context) => {
 const AiSupermatterDetonation = (props, context) => (
   <FullscreenNotice title="DETONATION IMMINENT">
     <Box fontSize="1.5rem" bold color="bad">
-      <Icon color="bad" name="exclamation-triangle" verticalAlign="middle" size={3} mr="1rem" />
+      <Icon
+        color="bad"
+        name="exclamation-triangle"
+        verticalAlign="middle"
+        size={3}
+        mr="1rem"
+      />
       <Box color="bad">CRYSTAL DELAMINATING</Box>
       <Box color="bad">Evacuate area immediately</Box>
     </Box>
@@ -61,7 +68,9 @@ const AiSupermatterContent = (props, context) => {
             {ambient_temp} K
           </ProgressBar>
         </LabeledList.Item>
-        <LabeledList.Item label="Environment Pressure">{ambient_pressure} kPa</LabeledList.Item>
+        <LabeledList.Item label="Environment Pressure">
+          {ambient_pressure} kPa
+        </LabeledList.Item>
       </LabeledList>
     </Section>
   );
diff --git a/tgui/packages/tgui_ch/interfaces/AirAlarm.js b/tgui/packages/tgui_ch/interfaces/AirAlarm.js
index 60d2327312..8b31b36970 100644
--- a/tgui/packages/tgui_ch/interfaces/AirAlarm.js
+++ b/tgui/packages/tgui_ch/interfaces/AirAlarm.js
@@ -24,7 +24,9 @@ export const AirAlarm = (props, context) => {
 
 const AirAlarmStatus = (props, context) => {
   const { data } = useBackend(context);
-  const entries = (data.environment_data || []).filter((entry) => entry.value >= 0.01);
+  const entries = (data.environment_data || []).filter(
+    (entry) => entry.value >= 0.01
+  );
   const dangerMap = {
     0: {
       color: 'good',
@@ -48,7 +50,10 @@ const AirAlarmStatus = (props, context) => {
             {entries.map((entry) => {
               const status = dangerMap[entry.danger_level] || dangerMap[0];
               return (
-                <LabeledList.Item key={entry.name} label={getGasLabel(entry.name)} color={status.color}>
+                <LabeledList.Item
+                  key={entry.name}
+                  label={getGasLabel(entry.name)}
+                  color={status.color}>
                   {toFixed(entry.value, 2)}
                   {entry.unit}
                 </LabeledList.Item>
@@ -57,8 +62,12 @@ const AirAlarmStatus = (props, context) => {
             <LabeledList.Item label="Local status" color={localStatus.color}>
               {localStatus.localStatusText}
             </LabeledList.Item>
-            <LabeledList.Item label="Area status" color={data.atmos_alarm || data.fire_alarm ? 'bad' : 'good'}>
-              {(data.atmos_alarm && 'Atmosphere Alarm') || (data.fire_alarm && 'Fire Alarm') || 'Nominal'}
+            <LabeledList.Item
+              label="Area status"
+              color={data.atmos_alarm || data.fire_alarm ? 'bad' : 'good'}>
+              {(data.atmos_alarm && 'Atmosphere Alarm') ||
+                (data.fire_alarm && 'Fire Alarm') ||
+                'Nominal'}
             </LabeledList.Item>
           </Fragment>
         )) || (
@@ -83,12 +92,27 @@ const AirAlarmUnlockedControl = (props, context) => {
     <Section title="Comfort Settings">
       <LabeledList>
         <LabeledList.Item label="Remote Control">
-          <Button selected={rcon === 1} content="Off" onClick={() => act('rcon', { 'rcon': 1 })} />
-          <Button selected={rcon === 2} content="Auto" onClick={() => act('rcon', { 'rcon': 2 })} />
-          <Button selected={rcon === 3} content="On" onClick={() => act('rcon', { 'rcon': 3 })} />
+          <Button
+            selected={rcon === 1}
+            content="Off"
+            onClick={() => act('rcon', { 'rcon': 1 })}
+          />
+          <Button
+            selected={rcon === 2}
+            content="Auto"
+            onClick={() => act('rcon', { 'rcon': 2 })}
+          />
+          <Button
+            selected={rcon === 3}
+            content="On"
+            onClick={() => act('rcon', { 'rcon': 3 })}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Thermostat">
-          <Button content={target_temperature} onClick={() => act('temperature')} />
+          <Button
+            content={target_temperature}
+            onClick={() => act('temperature')}
+          />
         </LabeledList.Item>
       </LabeledList>
     </Section>
@@ -125,7 +149,15 @@ const AirAlarmControl = (props, context) => {
   return (
     <Section
       title={route.title}
-      buttons={screen && <Button icon="arrow-left" content="Back" onClick={() => setScreen()} />}>
+      buttons={
+        screen && (
+          <Button
+            icon="arrow-left"
+            content="Back"
+            onClick={() => setScreen()}
+          />
+        )
+      }>
       <Component />
     </Section>
   );
@@ -158,13 +190,29 @@ const AirAlarmControlHome = (props, context) => {
         }
       />
       <Box mt={2} />
-      <Button icon="sign-out-alt" content="Vent Controls" onClick={() => setScreen('vents')} />
+      <Button
+        icon="sign-out-alt"
+        content="Vent Controls"
+        onClick={() => setScreen('vents')}
+      />
       <Box mt={1} />
-      <Button icon="filter" content="Scrubber Controls" onClick={() => setScreen('scrubbers')} />
+      <Button
+        icon="filter"
+        content="Scrubber Controls"
+        onClick={() => setScreen('scrubbers')}
+      />
       <Box mt={1} />
-      <Button icon="cog" content="Operating Mode" onClick={() => setScreen('modes')} />
+      <Button
+        icon="cog"
+        content="Operating Mode"
+        onClick={() => setScreen('modes')}
+      />
       <Box mt={1} />
-      <Button icon="chart-bar" content="Alarm Thresholds" onClick={() => setScreen('thresholds')} />
+      <Button
+        icon="chart-bar"
+        content="Alarm Thresholds"
+        onClick={() => setScreen('thresholds')}
+      />
     </Fragment>
   );
 };
@@ -190,7 +238,9 @@ const AirAlarmControlScrubbers = (props, context) => {
   if (!scrubbers || scrubbers.length === 0) {
     return 'Nothing to show';
   }
-  return scrubbers.map((scrubber) => <Scrubber key={scrubber.id_tag} scrubber={scrubber} />);
+  return scrubbers.map((scrubber) => (
+    <Scrubber key={scrubber.id_tag} scrubber={scrubber} />
+  ));
 };
 
 //  Modes
@@ -237,7 +287,9 @@ const AirAlarmControlThresholds = (props, context) => {
         {thresholds.map((threshold) => (
           <tr key={threshold.name}>
             <td className="LabeledList__label">
-              <span className={'color-' + getGasColor(threshold.name)}>{getGasLabel(threshold.name)}</span>
+              <span className={'color-' + getGasColor(threshold.name)}>
+                {getGasLabel(threshold.name)}
+              </span>
             </td>
             {threshold.settings.map((setting) => (
               <td key={setting.val}>
diff --git a/tgui/packages/tgui_ch/interfaces/AlertModal.tsx b/tgui/packages/tgui_ch/interfaces/AlertModal.tsx
index 7722745c91..ee53a0f1b6 100644
--- a/tgui/packages/tgui_ch/interfaces/AlertModal.tsx
+++ b/tgui/packages/tgui_ch/interfaces/AlertModal.tsx
@@ -19,11 +19,20 @@ const KEY_INCREMENT = 1;
 
 export const AlertModal = (props, context) => {
   const { act, data } = useBackend<AlertModalData>(context);
-  const { autofocus, buttons = [], large_buttons, message = '', timeout, title } = data;
+  const {
+    autofocus,
+    buttons = [],
+    large_buttons,
+    message = '',
+    timeout,
+    title,
+  } = data;
   const [selected, setSelected] = useLocalState<number>(context, 'selected', 0);
   // Dynamically sets window dimensions
   const windowHeight =
-    115 + (message.length > 30 ? Math.ceil(message.length / 4) : 0) + (message.length && large_buttons ? 5 : 0);
+    115 +
+    (message.length > 30 ? Math.ceil(message.length / 4) : 0) +
+    (message.length && large_buttons ? 5 : 0);
   const windowWidth = 325 + (buttons.length > 2 ? 55 : 0);
   const onKey = (direction: number) => {
     if (selected === 0 && direction === KEY_DECREMENT) {
@@ -86,15 +95,28 @@ const ButtonDisplay = (props, context) => {
   const { selected } = props;
 
   return (
-    <Flex align="center" direction={!swapped_buttons ? 'row-reverse' : 'row'} fill justify="space-around" wrap>
+    <Flex
+      align="center"
+      direction={!swapped_buttons ? 'row-reverse' : 'row'}
+      fill
+      justify="space-around"
+      wrap>
       {buttons?.map((button, index) =>
         !!large_buttons && buttons.length < 3 ? (
           <Flex.Item grow key={index}>
-            <AlertButton button={button} id={index.toString()} selected={selected === index} />
+            <AlertButton
+              button={button}
+              id={index.toString()}
+              selected={selected === index}
+            />
           </Flex.Item>
         ) : (
           <Flex.Item key={index}>
-            <AlertButton button={button} id={index.toString()} selected={selected === index} />
+            <AlertButton
+              button={button}
+              id={index.toString()}
+              selected={selected === index}
+            />
           </Flex.Item>
         )
       )}
diff --git a/tgui/packages/tgui_ch/interfaces/AlgaeFarm.js b/tgui/packages/tgui_ch/interfaces/AlgaeFarm.js
index e33ba5bab8..79cf35baad 100644
--- a/tgui/packages/tgui_ch/interfaces/AlgaeFarm.js
+++ b/tgui/packages/tgui_ch/interfaces/AlgaeFarm.js
@@ -5,7 +5,17 @@ import { capitalize } from 'common/string';
 
 export const AlgaeFarm = (props, context) => {
   const { act, data } = useBackend(context);
-  const { usePower, materials, last_flow_rate, last_power_draw, inputDir, outputDir, input, output, errorText } = data;
+  const {
+    usePower,
+    materials,
+    last_flow_rate,
+    last_power_draw,
+    inputDir,
+    outputDir,
+    input,
+    output,
+    errorText,
+  } = data;
 
   return (
     <Window width={500} height={300} resizable>
@@ -20,15 +30,29 @@ export const AlgaeFarm = (props, context) => {
         <Section
           title="Status"
           buttons={
-            <Button icon="power-off" content="Processing" selected={usePower === 2} onClick={() => act('toggle')} />
+            <Button
+              icon="power-off"
+              content="Processing"
+              selected={usePower === 2}
+              onClick={() => act('toggle')}
+            />
           }>
           <LabeledList>
-            <LabeledList.Item label="Flow Rate">{last_flow_rate} L/s</LabeledList.Item>
-            <LabeledList.Item label="Power Draw">{last_power_draw} W</LabeledList.Item>
+            <LabeledList.Item label="Flow Rate">
+              {last_flow_rate} L/s
+            </LabeledList.Item>
+            <LabeledList.Item label="Power Draw">
+              {last_power_draw} W
+            </LabeledList.Item>
             <LabeledList.Divider size={1} />
             {materials.map((material) => (
-              <LabeledList.Item key={material.name} label={capitalize(material.display)}>
-                <ProgressBar width="80%" value={material.qty} maxValue={material.max}>
+              <LabeledList.Item
+                key={material.name}
+                label={capitalize(material.display)}>
+                <ProgressBar
+                  width="80%"
+                  value={material.qty}
+                  maxValue={material.max}>
                   {material.qty}/{material.max}
                 </ProgressBar>
                 <Button
@@ -49,7 +73,9 @@ export const AlgaeFarm = (props, context) => {
                 <Section title={'Gas Input (' + inputDir + ')'}>
                   {input ? (
                     <LabeledList>
-                      <LabeledList.Item label="Total Pressure">{input.pressure} kPa</LabeledList.Item>
+                      <LabeledList.Item label="Total Pressure">
+                        {input.pressure} kPa
+                      </LabeledList.Item>
                       <LabeledList.Item label={input.name}>
                         {input.percent}% ({input.moles} moles)
                       </LabeledList.Item>
@@ -63,7 +89,9 @@ export const AlgaeFarm = (props, context) => {
                 <Section title={'Gas Output (' + outputDir + ')'}>
                   {output ? (
                     <LabeledList>
-                      <LabeledList.Item label="Total Pressure">{output.pressure} kPa</LabeledList.Item>
+                      <LabeledList.Item label="Total Pressure">
+                        {output.pressure} kPa
+                      </LabeledList.Item>
                       <LabeledList.Item label={output.name}>
                         {output.percent}% ({output.moles} moles)
                       </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/AppearanceChanger.js b/tgui/packages/tgui_ch/interfaces/AppearanceChanger.js
index 23fd8d8ebb..2b0b05769a 100644
--- a/tgui/packages/tgui_ch/interfaces/AppearanceChanger.js
+++ b/tgui/packages/tgui_ch/interfaces/AppearanceChanger.js
@@ -34,7 +34,11 @@ export const AppearanceChanger = (props, context) => {
   const { title } = config;
 
   const change_color =
-    change_eye_color || change_skin_tone || change_skin_color || change_hair_color || change_facial_hair_color;
+    change_eye_color ||
+    change_skin_tone ||
+    change_skin_color ||
+    change_hair_color ||
+    change_facial_hair_color;
 
   let firstAccesibleTab = -1;
   if (change_race) {
@@ -49,7 +53,11 @@ export const AppearanceChanger = (props, context) => {
     firstAccesibleTab = 5;
   }
 
-  const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', firstAccesibleTab);
+  const [tabIndex, setTabIndex] = useLocalState(
+    context,
+    'tabIndex',
+    firstAccesibleTab
+  );
 
   return (
     <Window width={700} height={650} title={decodeHtmlEntities(title)}>
@@ -59,28 +67,46 @@ export const AppearanceChanger = (props, context) => {
             <Flex.Item grow={1}>
               <LabeledList>
                 <LabeledList.Item label="Name">{name}</LabeledList.Item>
-                <LabeledList.Item label="Species" color={!change_race ? 'grey' : null}>
+                <LabeledList.Item
+                  label="Species"
+                  color={!change_race ? 'grey' : null}>
                   {specimen}
                 </LabeledList.Item>
-                <LabeledList.Item label="Biological Sex" color={!change_gender ? 'grey' : null}>
+                <LabeledList.Item
+                  label="Biological Sex"
+                  color={!change_gender ? 'grey' : null}>
                   {gender ? capitalize(gender) : 'Not Set'}
                 </LabeledList.Item>
-                <LabeledList.Item label="Gender Identity" color={!change_color ? 'grey' : null}>
+                <LabeledList.Item
+                  label="Gender Identity"
+                  color={!change_color ? 'grey' : null}>
                   {gender_id ? capitalize(gender_id) : 'Not Set'}
                 </LabeledList.Item>
-                <LabeledList.Item label="Hair Style" color={!change_hair ? 'grey' : null}>
+                <LabeledList.Item
+                  label="Hair Style"
+                  color={!change_hair ? 'grey' : null}>
                   {hair_style ? capitalize(hair_style) : 'Not Set'}
                 </LabeledList.Item>
-                <LabeledList.Item label="Facial Hair Style" color={!change_facial_hair ? 'grey' : null}>
-                  {facial_hair_style ? capitalize(facial_hair_style) : 'Not Set'}
+                <LabeledList.Item
+                  label="Facial Hair Style"
+                  color={!change_facial_hair ? 'grey' : null}>
+                  {facial_hair_style
+                    ? capitalize(facial_hair_style)
+                    : 'Not Set'}
                 </LabeledList.Item>
-                <LabeledList.Item label="Ear Style" color={!change_hair ? 'grey' : null}>
+                <LabeledList.Item
+                  label="Ear Style"
+                  color={!change_hair ? 'grey' : null}>
                   {ear_style ? capitalize(ear_style) : 'Not Set'}
                 </LabeledList.Item>
-                <LabeledList.Item label="Tail Style" color={!change_hair ? 'grey' : null}>
+                <LabeledList.Item
+                  label="Tail Style"
+                  color={!change_hair ? 'grey' : null}>
                   {tail_style ? capitalize(tail_style) : 'Not Set'}
                 </LabeledList.Item>
-                <LabeledList.Item label="Wing Style" color={!change_hair ? 'grey' : null}>
+                <LabeledList.Item
+                  label="Wing Style"
+                  color={!change_hair ? 'grey' : null}>
                   {wing_style ? capitalize(wing_style) : 'Not Set'}
                 </LabeledList.Item>
               </LabeledList>
@@ -117,19 +143,29 @@ export const AppearanceChanger = (props, context) => {
           ) : null}
           {change_hair ? (
             <Fragment>
-              <Tabs.Tab selected={tabIndex === 3} onClick={() => setTabIndex(3)}>
+              <Tabs.Tab
+                selected={tabIndex === 3}
+                onClick={() => setTabIndex(3)}>
                 Hair
               </Tabs.Tab>
-              <Tabs.Tab selected={tabIndex === 5} onClick={() => setTabIndex(5)}>
+              <Tabs.Tab
+                selected={tabIndex === 5}
+                onClick={() => setTabIndex(5)}>
                 Ear
               </Tabs.Tab>
-              <Tabs.Tab selected={tabIndex === 6} onClick={() => setTabIndex(6)}>
+              <Tabs.Tab
+                selected={tabIndex === 6}
+                onClick={() => setTabIndex(6)}>
                 Tail
               </Tabs.Tab>
-              <Tabs.Tab selected={tabIndex === 7} onClick={() => setTabIndex(7)}>
+              <Tabs.Tab
+                selected={tabIndex === 7}
+                onClick={() => setTabIndex(7)}>
                 Wing
               </Tabs.Tab>
-              <Tabs.Tab selected={tabIndex === 8} onClick={() => setTabIndex(8)}>
+              <Tabs.Tab
+                selected={tabIndex === 8}
+                onClick={() => setTabIndex(8)}>
                 Markings
               </Tabs.Tab>
             </Fragment>
@@ -145,7 +181,9 @@ export const AppearanceChanger = (props, context) => {
           {change_gender && tabIndex === 1 ? <AppearanceChangerGender /> : null}
           {change_color && tabIndex === 2 ? <AppearanceChangerColors /> : null}
           {change_hair && tabIndex === 3 ? <AppearanceChangerHair /> : null}
-          {change_facial_hair && tabIndex === 4 ? <AppearanceChangerFacialHair /> : null}
+          {change_facial_hair && tabIndex === 4 ? (
+            <AppearanceChangerFacialHair />
+          ) : null}
           {change_hair && tabIndex === 5 ? <AppearanceChangerEars /> : null}
           {change_hair && tabIndex === 6 ? <AppearanceChangerTails /> : null}
           {change_hair && tabIndex === 7 ? <AppearanceChangerWings /> : null}
@@ -246,45 +284,72 @@ const AppearanceChangerColors = (props, context) => {
       {change_skin_color ? (
         <Box>
           <ColorBox color={skin_color} mr={1} />
-          <Button content="Change Skin Color" onClick={() => act('skin_color')} />
+          <Button
+            content="Change Skin Color"
+            onClick={() => act('skin_color')}
+          />
         </Box>
       ) : null}
       {change_hair_color ? (
         <Fragment>
           <Box>
             <ColorBox color={hair_color} mr={1} />
-            <Button content="Change Hair Color" onClick={() => act('hair_color')} />
+            <Button
+              content="Change Hair Color"
+              onClick={() => act('hair_color')}
+            />
           </Box>
           <Box>
             <ColorBox color={ears_color} mr={1} />
-            <Button content="Change Ears Color" onClick={() => act('ears_color')} />
+            <Button
+              content="Change Ears Color"
+              onClick={() => act('ears_color')}
+            />
           </Box>
           <Box>
             <ColorBox color={ears2_color} mr={1} />
-            <Button content="Change Secondary Ears Color" onClick={() => act('ears2_color')} />
+            <Button
+              content="Change Secondary Ears Color"
+              onClick={() => act('ears2_color')}
+            />
           </Box>
           <Box>
             <ColorBox color={tail_color} mr={1} />
-            <Button content="Change Tail Color" onClick={() => act('tail_color')} />
+            <Button
+              content="Change Tail Color"
+              onClick={() => act('tail_color')}
+            />
           </Box>
           <Box>
             <ColorBox color={tail2_color} mr={1} />
-            <Button content="Change Secondary Tail Color" onClick={() => act('tail2_color')} />
+            <Button
+              content="Change Secondary Tail Color"
+              onClick={() => act('tail2_color')}
+            />
           </Box>
           <Box>
             <ColorBox color={wing_color} mr={1} />
-            <Button content="Change Wing Color" onClick={() => act('wing_color')} />
+            <Button
+              content="Change Wing Color"
+              onClick={() => act('wing_color')}
+            />
           </Box>
           <Box>
             <ColorBox color={wing2_color} mr={1} />
-            <Button content="Change Secondary Wing Color" onClick={() => act('wing2_color')} />
+            <Button
+              content="Change Secondary Wing Color"
+              onClick={() => act('wing2_color')}
+            />
           </Box>
         </Fragment>
       ) : null}
       {change_facial_hair_color ? (
         <Box>
           <ColorBox color={facial_hair_color} mr={1} />
-          <Button content="Change Facial Hair Color" onClick={() => act('facial_hair_color')} />
+          <Button
+            content="Change Facial Hair Color"
+            onClick={() => act('facial_hair_color')}
+          />
         </Box>
       ) : null}
     </Section>
@@ -320,7 +385,9 @@ const AppearanceChangerFacialHair = (props, context) => {
       {facial_hair_styles.map((hair) => (
         <Button
           key={hair.facialhairstyle}
-          onClick={() => act('facial_hair', { facial_hair: hair.facialhairstyle })}
+          onClick={() =>
+            act('facial_hair', { facial_hair: hair.facialhairstyle })
+          }
           selected={hair.facialhairstyle === facial_hair_style}
           content={hair.facialhairstyle}
         />
@@ -336,7 +403,11 @@ const AppearanceChangerEars = (props, context) => {
 
   return (
     <Section title="Ears" fill scrollable>
-      <Button onClick={() => act('ear', { clear: true })} selected={ear_style === null} content="-- Not Set --" />
+      <Button
+        onClick={() => act('ear', { clear: true })}
+        selected={ear_style === null}
+        content="-- Not Set --"
+      />
       {sortBy((e) => e.name.toLowerCase())(ear_styles).map((ear) => (
         <Button
           key={ear.instance}
@@ -356,7 +427,11 @@ const AppearanceChangerTails = (props, context) => {
 
   return (
     <Section title="Tails" fill scrollable>
-      <Button onClick={() => act('tail', { clear: true })} selected={tail_style === null} content="-- Not Set --" />
+      <Button
+        onClick={() => act('tail', { clear: true })}
+        selected={tail_style === null}
+        content="-- Not Set --"
+      />
       {sortBy((e) => e.name.toLowerCase())(tail_styles).map((tail) => (
         <Button
           key={tail.instance}
@@ -376,7 +451,11 @@ const AppearanceChangerWings = (props, context) => {
 
   return (
     <Section title="Wings" fill scrollable>
-      <Button onClick={() => act('wing', { clear: true })} selected={wing_style === null} content="-- Not Set --" />
+      <Button
+        onClick={() => act('wing', { clear: true })}
+        selected={wing_style === null}
+        content="-- Not Set --"
+      />
       {sortBy((e) => e.name.toLowerCase())(wing_styles).map((wing) => (
         <Button
           key={wing.instance}
@@ -397,16 +476,31 @@ const AppearanceChangerMarkings = (props, context) => {
   return (
     <Section title="Markings" fill scrollable>
       <Box>
-        <Button content="Add Marking" onClick={() => act('marking', { todo: 1, name: 'na' })} />
+        <Button
+          content="Add Marking"
+          onClick={() => act('marking', { todo: 1, name: 'na' })}
+        />
       </Box>
       <LabeledList>
         {markings.map((m) => (
           <LabeledList.Item key={m.marking_name} label={m.marking_name}>
             <ColorBox color={m.marking_color} mr={1} />
-            <Button content="Change Color" onClick={() => act('marking', { todo: 4, name: m.marking_name })} />
-            <Button content="-" onClick={() => act('marking', { todo: 0, name: m.marking_name })} />
-            <Button content="Move down" onClick={() => act('marking', { todo: 3, name: m.marking_name })} />
-            <Button content="Move up" onClick={() => act('marking', { todo: 2, name: m.marking_name })} />
+            <Button
+              content="Change Color"
+              onClick={() => act('marking', { todo: 4, name: m.marking_name })}
+            />
+            <Button
+              content="-"
+              onClick={() => act('marking', { todo: 0, name: m.marking_name })}
+            />
+            <Button
+              content="Move down"
+              onClick={() => act('marking', { todo: 3, name: m.marking_name })}
+            />
+            <Button
+              content="Move up"
+              onClick={() => act('marking', { todo: 2, name: m.marking_name })}
+            />
           </LabeledList.Item>
         ))}
       </LabeledList>
diff --git a/tgui/packages/tgui_ch/interfaces/ArcadeBattle.js b/tgui/packages/tgui_ch/interfaces/ArcadeBattle.js
index cdebff4014..23130f61c8 100644
--- a/tgui/packages/tgui_ch/interfaces/ArcadeBattle.js
+++ b/tgui/packages/tgui_ch/interfaces/ArcadeBattle.js
@@ -5,7 +5,17 @@ import { Window } from '../layouts';
 export const ArcadeBattle = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { name, temp, enemyAction, enemyName, playerHP, playerMP, enemyHP, enemyMP, gameOver } = data;
+  const {
+    name,
+    temp,
+    enemyAction,
+    enemyName,
+    playerHP,
+    playerMP,
+    enemyHP,
+    enemyMP,
+    gameOver,
+  } = data;
 
   return (
     <Window width={400} height={240} resizable>
@@ -66,7 +76,15 @@ export const ArcadeBattle = (props, context) => {
               </LabeledList>
             </Flex.Item>
           </Flex>
-          {(gameOver && <Button fluid mt={1} color="green" content="New Game" onClick={() => act('newgame')} />) || (
+          {(gameOver && (
+            <Button
+              fluid
+              mt={1}
+              color="green"
+              content="New Game"
+              onClick={() => act('newgame')}
+            />
+          )) || (
             <Flex mt={2} justify="space-between" spacing={1}>
               <Flex.Item grow={1}>
                 <Button
diff --git a/tgui/packages/tgui_ch/interfaces/AreaScrubberControl.js b/tgui/packages/tgui_ch/interfaces/AreaScrubberControl.js
index 5f2c102463..ff4ba9bd40 100644
--- a/tgui/packages/tgui_ch/interfaces/AreaScrubberControl.js
+++ b/tgui/packages/tgui_ch/interfaces/AreaScrubberControl.js
@@ -14,7 +14,12 @@ export const AreaScrubberControl = (props, context) => {
     return (
       <Section title="Error">
         <Box color="bad">No Scrubbers Detected.</Box>
-        <Button fluid icon="search" content="Scan" onClick={() => act('scan')} />
+        <Button
+          fluid
+          icon="search"
+          content="Scan"
+          onClick={() => act('scan')}
+        />
       </Section>
     );
   }
@@ -25,7 +30,13 @@ export const AreaScrubberControl = (props, context) => {
         <Section>
           <Flex wrap="wrap">
             <Flex.Item m="2px" basis="49%">
-              <Button textAlign="center" fluid icon="search" content="Scan" onClick={() => act('scan')} />
+              <Button
+                textAlign="center"
+                fluid
+                icon="search"
+                content="Scan"
+                onClick={() => act('scan')}
+              />
             </Flex.Item>
             <Flex.Item m="2px" basis="49%" grow={1}>
               <Button
@@ -38,10 +49,22 @@ export const AreaScrubberControl = (props, context) => {
               />
             </Flex.Item>
             <Flex.Item m="2px" basis="49%">
-              <Button textAlign="center" fluid icon="toggle-on" content="All On" onClick={() => act('allon')} />
+              <Button
+                textAlign="center"
+                fluid
+                icon="toggle-on"
+                content="All On"
+                onClick={() => act('allon')}
+              />
             </Flex.Item>
             <Flex.Item m="2px" basis="49%" grow={1}>
-              <Button textAlign="center" fluid icon="toggle-off" content="All Off" onClick={() => act('alloff')} />
+              <Button
+                textAlign="center"
+                fluid
+                icon="toggle-off"
+                content="All Off"
+                onClick={() => act('alloff')}
+              />
             </Flex.Item>
           </Flex>
           <Flex wrap="wrap">
@@ -72,10 +95,18 @@ const BigScrubber = (props, context) => {
         onClick={() => act('toggle', { id: scrubber.id })}
       />
       <LabeledList>
-        <LabeledList.Item label="Pressure">{scrubber.pressure} kPa</LabeledList.Item>
-        <LabeledList.Item label="Flow Rate">{scrubber.flow_rate} L/s</LabeledList.Item>
+        <LabeledList.Item label="Pressure">
+          {scrubber.pressure} kPa
+        </LabeledList.Item>
+        <LabeledList.Item label="Flow Rate">
+          {scrubber.flow_rate} L/s
+        </LabeledList.Item>
         <LabeledList.Item label="Load">{scrubber.load} W</LabeledList.Item>
-        {showArea && <LabeledList.Item label="Area">{toTitleCase(scrubber.area)}</LabeledList.Item>}
+        {showArea && (
+          <LabeledList.Item label="Area">
+            {toTitleCase(scrubber.area)}
+          </LabeledList.Item>
+        )}
       </LabeledList>
     </Section>
   );
diff --git a/tgui/packages/tgui_ch/interfaces/AssemblyInfrared.tsx b/tgui/packages/tgui_ch/interfaces/AssemblyInfrared.tsx
index ab13248981..0d5e5feae3 100644
--- a/tgui/packages/tgui_ch/interfaces/AssemblyInfrared.tsx
+++ b/tgui/packages/tgui_ch/interfaces/AssemblyInfrared.tsx
@@ -17,12 +17,20 @@ export const AssemblyInfrared = (props, context) => {
         <Section title="Infrared Unit">
           <LabeledList>
             <LabeledList.Item label="Laser">
-              <Button icon="power-off" fluid selected={on} onClick={() => act('state')}>
+              <Button
+                icon="power-off"
+                fluid
+                selected={on}
+                onClick={() => act('state')}>
                 {on ? 'On' : 'Off'}
               </Button>
             </LabeledList.Item>
             <LabeledList.Item label="Visibility">
-              <Button icon="eye" fluid selected={visible} onClick={() => act('visible')}>
+              <Button
+                icon="eye"
+                fluid
+                selected={visible}
+                onClick={() => act('visible')}>
                 {visible ? 'Able to be seen' : 'Invisible'}
               </Button>
             </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/AssemblyProx.js b/tgui/packages/tgui_ch/interfaces/AssemblyProx.js
index 2078022e90..285dd514bd 100644
--- a/tgui/packages/tgui_ch/interfaces/AssemblyProx.js
+++ b/tgui/packages/tgui_ch/interfaces/AssemblyProx.js
@@ -15,7 +15,10 @@ export const AssemblyProx = (props, context) => {
             <LabeledList.Item
               label="Timer"
               buttons={
-                <Button icon="stopwatch" selected={timing} onClick={() => act('timing')}>
+                <Button
+                  icon="stopwatch"
+                  selected={timing}
+                  onClick={() => act('timing')}>
                   {timing ? 'Counting Down' : 'Disabled'}
                 </Button>
               }>
@@ -42,7 +45,11 @@ export const AssemblyProx = (props, context) => {
               />
             </LabeledList.Item>
             <LabeledList.Item label="Armed">
-              <Button mr={1} icon={scanning ? 'lock' : 'lock-open'} selected={scanning} onClick={() => act('scanning')}>
+              <Button
+                mr={1}
+                icon={scanning ? 'lock' : 'lock-open'}
+                selected={scanning}
+                onClick={() => act('scanning')}>
                 {scanning ? 'ARMED' : 'Unarmed'}
               </Button>
               Movement sensor is active when armed!
diff --git a/tgui/packages/tgui_ch/interfaces/AssemblyTimer.js b/tgui/packages/tgui_ch/interfaces/AssemblyTimer.js
index ca1ffe9da7..80bb162230 100644
--- a/tgui/packages/tgui_ch/interfaces/AssemblyTimer.js
+++ b/tgui/packages/tgui_ch/interfaces/AssemblyTimer.js
@@ -15,7 +15,10 @@ export const AssemblyTimer = (props, context) => {
             <LabeledList.Item
               label="Timer"
               buttons={
-                <Button icon="stopwatch" selected={timing} onClick={() => act('timing')}>
+                <Button
+                  icon="stopwatch"
+                  selected={timing}
+                  onClick={() => act('timing')}>
                   {timing ? 'Counting Down' : 'Disabled'}
                 </Button>
               }>
diff --git a/tgui/packages/tgui_ch/interfaces/AtmosAlertConsole.js b/tgui/packages/tgui_ch/interfaces/AtmosAlertConsole.js
index 6955b4ffc7..aa6dcd745e 100644
--- a/tgui/packages/tgui_ch/interfaces/AtmosAlertConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/AtmosAlertConsole.js
@@ -11,7 +11,9 @@ export const AtmosAlertConsole = (props, context) => {
       <Window.Content scrollable>
         <Section title="Alarms">
           <ul>
-            {priorityAlerts.length === 0 && <li className="color-good">No Priority Alerts</li>}
+            {priorityAlerts.length === 0 && (
+              <li className="color-good">No Priority Alerts</li>
+            )}
             {priorityAlerts.map((alert) => (
               <li key={alert.name}>
                 <Button
@@ -22,7 +24,9 @@ export const AtmosAlertConsole = (props, context) => {
                 />
               </li>
             ))}
-            {minorAlerts.length === 0 && <li className="color-good">No Minor Alerts</li>}
+            {minorAlerts.length === 0 && (
+              <li className="color-good">No Minor Alerts</li>
+            )}
             {minorAlerts.map((alert) => (
               <li key={alert.name}>
                 <Button
diff --git a/tgui/packages/tgui_ch/interfaces/AtmosControl.js b/tgui/packages/tgui_ch/interfaces/AtmosControl.js
index 4add651548..08752a365e 100644
--- a/tgui/packages/tgui_ch/interfaces/AtmosControl.js
+++ b/tgui/packages/tgui_ch/interfaces/AtmosControl.js
@@ -35,7 +35,9 @@ export const AtmosControlContent = (props, context) => {
           <Button
             key={alarm.name}
             content={alarm.name}
-            color={alarm.danger === 2 ? 'bad' : alarm.danger === 1 ? 'average' : ''}
+            color={
+              alarm.danger === 2 ? 'bad' : alarm.danger === 1 ? 'average' : ''
+            }
             onClick={() => act('alarm', { 'alarm': alarm.ref })}
           />
         ))}
@@ -70,10 +72,16 @@ export const AtmosControlContent = (props, context) => {
   return (
     <Fragment>
       <Tabs>
-        <Tabs.Tab key="AlarmView" selected={0 === tabIndex} onClick={() => setTabIndex(0)}>
+        <Tabs.Tab
+          key="AlarmView"
+          selected={0 === tabIndex}
+          onClick={() => setTabIndex(0)}>
           <Icon name="table" /> Alarm View
         </Tabs.Tab>
-        <Tabs.Tab key="MapView" selected={1 === tabIndex} onClick={() => setTabIndex(1)}>
+        <Tabs.Tab
+          key="MapView"
+          selected={1 === tabIndex}
+          onClick={() => setTabIndex(1)}>
           <Icon name="map-marked-alt" /> Map View
         </Tabs.Tab>
       </Tabs>
diff --git a/tgui/packages/tgui_ch/interfaces/AtmosFilter.js b/tgui/packages/tgui_ch/interfaces/AtmosFilter.js
index 4e5362c4f7..2af429d5a4 100644
--- a/tgui/packages/tgui_ch/interfaces/AtmosFilter.js
+++ b/tgui/packages/tgui_ch/interfaces/AtmosFilter.js
@@ -20,7 +20,10 @@ export const AtmosFilter = (props, context) => {
             </LabeledList.Item>
             <LabeledList.Item label="Transfer Rate">
               <Box inline mr={1}>
-                <AnimatedNumber value={data.last_flow_rate} format={(val) => val + ' L/s'} />
+                <AnimatedNumber
+                  value={data.last_flow_rate}
+                  format={(val) => val + ' L/s'}
+                />
               </Box>
               <NumberInput
                 animated
diff --git a/tgui/packages/tgui_ch/interfaces/Autolathe.js b/tgui/packages/tgui_ch/interfaces/Autolathe.js
index 1c8693524c..d136fc0e2b 100644
--- a/tgui/packages/tgui_ch/interfaces/Autolathe.js
+++ b/tgui/packages/tgui_ch/interfaces/Autolathe.js
@@ -32,7 +32,11 @@ export const Autolathe = (props, context) => {
 
   const [category, setCategory] = useSharedState(context, 'category', 0);
 
-  const [searchText, setSearchText] = useSharedState(context, 'search_text', '');
+  const [searchText, setSearchText] = useSharedState(
+    context,
+    'search_text',
+    ''
+  );
 
   const testSearch = createSearch(searchText, (recipe) => recipe.name);
 
@@ -58,7 +62,12 @@ export const Autolathe = (props, context) => {
               onSelected={(val) => setCategory(categories.indexOf(val))}
             />
           }>
-          <Input fluid placeholder="Search for..." onInput={(e, v) => setSearchText(v)} mb={1} />
+          <Input
+            fluid
+            placeholder="Search for..."
+            onInput={(e, v) => setSearchText(v)}
+            mb={1}
+          />
           {recipesToShow.map((recipe) => (
             <Flex justify="space-between" align="center" key={recipe.ref}>
               <Flex.Item>
@@ -75,13 +84,17 @@ export const Autolathe = (props, context) => {
                     <Button
                       color={(recipe.hidden && 'red') || null}
                       disabled={!canBeMade(recipe, materials, 5)}
-                      onClick={() => act('make', { make: recipe.ref, multiplier: 5 })}>
+                      onClick={() =>
+                        act('make', { make: recipe.ref, multiplier: 5 })
+                      }>
                       x5
                     </Button>
                     <Button
                       color={(recipe.hidden && 'red') || null}
                       disabled={!canBeMade(recipe, materials, 10)}
-                      onClick={() => act('make', { make: recipe.ref, multiplier: 10 })}>
+                      onClick={() =>
+                        act('make', { make: recipe.ref, multiplier: 10 })
+                      }>
                       x10
                     </Button>
                   </Box>
@@ -91,7 +104,10 @@ export const Autolathe = (props, context) => {
               <Flex.Item>
                 {(recipe.requirements &&
                   Object.keys(recipe.requirements)
-                    .map((mat) => toTitleCase(mat) + ': ' + recipe.requirements[mat])
+                    .map(
+                      (mat) =>
+                        toTitleCase(mat) + ': ' + recipe.requirements[mat]
+                    )
                     .join(', ')) || <Box>No resources required.</Box>}
               </Flex.Item>
             </Flex>
diff --git a/tgui/packages/tgui_ch/interfaces/Batteryrack.js b/tgui/packages/tgui_ch/interfaces/Batteryrack.js
index 0f77c04191..4e372d1877 100644
--- a/tgui/packages/tgui_ch/interfaces/Batteryrack.js
+++ b/tgui/packages/tgui_ch/interfaces/Batteryrack.js
@@ -5,7 +5,17 @@ import { Window } from '../layouts';
 export const Batteryrack = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { mode, transfer_max, output_load, input_load, equalise, blink_tick, cells_max, cells_cur, cells_list } = data;
+  const {
+    mode,
+    transfer_max,
+    output_load,
+    input_load,
+    equalise,
+    blink_tick,
+    cells_max,
+    cells_cur,
+    cells_list,
+  } = data;
 
   return (
     <Window width={500} height={430} resizable>
@@ -15,7 +25,9 @@ export const Batteryrack = (props, context) => {
             <LabeledList.Item label="Current Mode">
               {(mode === 1 && <Box color="good">OUTPUT ONLY</Box>) ||
                 (mode === 2 && <Box color="good">INPUT ONLY</Box>) ||
-                (mode === 3 && <Box color="good">INPUT AND OUTPUT</Box>) || <Box color="bad">OFFLINE</Box>}
+                (mode === 3 && <Box color="good">INPUT AND OUTPUT</Box>) || (
+                  <Box color="bad">OFFLINE</Box>
+                )}
             </LabeledList.Item>
             <LabeledList.Item label="Input Status">
               <AnimatedNumber value={input_load} /> / {transfer_max} W
@@ -24,12 +36,32 @@ export const Batteryrack = (props, context) => {
               <AnimatedNumber value={output_load} /> / {transfer_max} W
             </LabeledList.Item>
             <LabeledList.Item label="Control Panel">
-              <Button content="OFF" selected={mode === 0} onClick={() => act('disable')} />
-              <Button content="OUT" selected={mode === 1} onClick={() => act('enable', { enable: 1 })} />
-              <Button content="IN" selected={mode === 2} onClick={() => act('enable', { enable: 2 })} />
-              <Button content="IN/OUT" selected={mode === 3} onClick={() => act('enable', { enable: 3 })} />
+              <Button
+                content="OFF"
+                selected={mode === 0}
+                onClick={() => act('disable')}
+              />
+              <Button
+                content="OUT"
+                selected={mode === 1}
+                onClick={() => act('enable', { enable: 1 })}
+              />
+              <Button
+                content="IN"
+                selected={mode === 2}
+                onClick={() => act('enable', { enable: 2 })}
+              />
+              <Button
+                content="IN/OUT"
+                selected={mode === 3}
+                onClick={() => act('enable', { enable: 3 })}
+              />
               {(equalise && (
-                <Button content="EQ" color={blink_tick ? 'red' : 'yellow'} onClick={() => act('equaliseoff')} />
+                <Button
+                  content="EQ"
+                  color={blink_tick ? 'red' : 'yellow'}
+                  onClick={() => act('equaliseoff')}
+                />
               )) || <Button content="EQ" onClick={() => act('equaliseon')} />}
             </LabeledList.Item>
           </LabeledList>
@@ -49,7 +81,11 @@ export const Batteryrack = (props, context) => {
                   </ProgressBar>
                 </Table.Cell>
                 <Table.Cell collapsing>
-                  <Button icon="eject" disabled={!cell.used} onClick={() => act('ejectcell', { ejectcell: cell.id })} />
+                  <Button
+                    icon="eject"
+                    disabled={!cell.used}
+                    onClick={() => act('ejectcell', { ejectcell: cell.id })}
+                  />
                 </Table.Cell>
               </Table.Row>
             ))}
diff --git a/tgui/packages/tgui_ch/interfaces/BeaconLocator.js b/tgui/packages/tgui_ch/interfaces/BeaconLocator.js
index 1074764521..65d05a5129 100644
--- a/tgui/packages/tgui_ch/interfaces/BeaconLocator.js
+++ b/tgui/packages/tgui_ch/interfaces/BeaconLocator.js
@@ -21,7 +21,12 @@ export const BeaconLocator = (props, context) => {
               Locked on. Follow the arrow.
             </Box>
           )) || <Box color="average">No lock.</Box>}
-          <Button mt={1} mb={1} fluid icon="broadcast-tower" onClick={() => act('reset_tracking')}>
+          <Button
+            mt={1}
+            mb={1}
+            fluid
+            icon="broadcast-tower"
+            onClick={() => act('reset_tracking')}>
             Reset tracker
           </Button>
           <LabeledList>
diff --git a/tgui/packages/tgui_ch/interfaces/Biogenerator.js b/tgui/packages/tgui_ch/interfaces/Biogenerator.js
index b63b6c387d..d6a56d82de 100644
--- a/tgui/packages/tgui_ch/interfaces/Biogenerator.js
+++ b/tgui/packages/tgui_ch/interfaces/Biogenerator.js
@@ -16,14 +16,22 @@ export const Biogenerator = (props, context) => {
   return (
     <Window width={400} height={450} resizable>
       <Window.Content className="Layout__content--flexColumn" scrollable>
-        {(data.processing && <Section title="Processing">The biogenerator is processing reagents!</Section>) || (
+        {(data.processing && (
+          <Section title="Processing">
+            The biogenerator is processing reagents!
+          </Section>
+        )) || (
           <Fragment>
             <Section>
               {data.points} points available.
               <Button ml={1} icon="blender" onClick={() => act('activate')}>
                 Activate
               </Button>
-              <Button ml={1} icon="eject" disabled={!data.beaker} onClick={() => act('detach')}>
+              <Button
+                ml={1}
+                icon="eject"
+                disabled={!data.beaker}
+                onClick={() => act('detach')}>
                 Eject Beaker
               </Button>
             </Section>
@@ -41,8 +49,16 @@ const BiogeneratorItems = (props, context) => {
   const { points, items } = data;
   // Search thingies
   const [searchText, _setSearchText] = useLocalState(context, 'search', '');
-  const [sortOrder, _setSortOrder] = useLocalState(context, 'sort', 'Alphabetical');
-  const [descending, _setDescending] = useLocalState(context, 'descending', false);
+  const [sortOrder, _setSortOrder] = useLocalState(
+    context,
+    'sort',
+    'Alphabetical'
+  );
+  const [descending, _setDescending] = useLocalState(
+    context,
+    'descending',
+    false
+  );
   const searcher = createSearch(searchText, (item) => {
     return item[0];
   });
@@ -64,12 +80,22 @@ const BiogeneratorItems = (props, context) => {
     }
 
     has_contents = true;
-    return <BiogeneratorItemsCategory key={kv[0]} title={kv[0]} items={items_in_cat} />;
+    return (
+      <BiogeneratorItemsCategory
+        key={kv[0]}
+        title={kv[0]}
+        items={items_in_cat}
+      />
+    );
   });
   return (
     <Flex.Item grow="1" overflow="auto">
       <Section onClick={(e) => refocusLayout()}>
-        {has_contents ? contents : <Box color="label">No items matching your criteria was found!</Box>}
+        {has_contents ? (
+          contents
+        ) : (
+          <Box color="label">No items matching your criteria was found!</Box>
+        )}
       </Section>
     </Flex.Item>
   );
@@ -78,12 +104,20 @@ const BiogeneratorItems = (props, context) => {
 const BiogeneratorSearch = (props, context) => {
   const [_searchText, setSearchText] = useLocalState(context, 'search', '');
   const [_sortOrder, setSortOrder] = useLocalState(context, 'sort', '');
-  const [descending, setDescending] = useLocalState(context, 'descending', false);
+  const [descending, setDescending] = useLocalState(
+    context,
+    'descending',
+    false
+  );
   return (
     <Box mb="0.5rem">
       <Flex width="100%">
         <Flex.Item grow="1" mr="0.5rem">
-          <Input placeholder="Search by item name.." width="100%" onInput={(_e, value) => setSearchText(value)} />
+          <Input
+            placeholder="Search by item name.."
+            width="100%"
+            onInput={(_e, value) => setSearchText(value)}
+          />
         </Flex.Item>
         <Flex.Item basis="30%">
           <Dropdown
diff --git a/tgui/packages/tgui_ch/interfaces/BodyDesigner.js b/tgui/packages/tgui_ch/interfaces/BodyDesigner.js
index cf506ccadd..a6ed1373aa 100644
--- a/tgui/packages/tgui_ch/interfaces/BodyDesigner.js
+++ b/tgui/packages/tgui_ch/interfaces/BodyDesigner.js
@@ -15,9 +15,23 @@ export const BodyDesigner = (props, context) => {
       <Window.Content>
         {disk ? (
           <Box>
-            <Button icon="save" content="Save To Disk" onClick={() => act('savetodisk')} disabled={!activeBodyRecord} />
-            <Button icon="save" content="Load From Disk" onClick={() => act('loadfromdisk')} disabled={!diskStored} />
-            <Button icon="eject" content="Eject" onClick={() => act('ejectdisk')} />
+            <Button
+              icon="save"
+              content="Save To Disk"
+              onClick={() => act('savetodisk')}
+              disabled={!activeBodyRecord}
+            />
+            <Button
+              icon="save"
+              content="Load From Disk"
+              onClick={() => act('loadfromdisk')}
+              disabled={!diskStored}
+            />
+            <Button
+              icon="eject"
+              content="Eject"
+              onClick={() => act('ejectdisk')}
+            />
           </Box>
         ) : null}
         {body}
@@ -30,8 +44,16 @@ const BodyDesignerMain = (props, context) => {
   const { act, data } = useBackend(context);
   return (
     <Section title="Database Functions">
-      <Button icon="eye" content="View Individual Body Records" onClick={() => act('menu', { menu: 'Body Records' })} />
-      <Button icon="eye" content="View Stock Body Records" onClick={() => act('menu', { menu: 'Stock Records' })} />
+      <Button
+        icon="eye"
+        content="View Individual Body Records"
+        onClick={() => act('menu', { menu: 'Body Records' })}
+      />
+      <Button
+        icon="eye"
+        content="View Stock Body Records"
+        onClick={() => act('menu', { menu: 'Stock Records' })}
+      />
     </Section>
   );
 };
@@ -42,7 +64,13 @@ const BodyDesignerBodyRecords = (props, context) => {
   return (
     <Section
       title="Body Records"
-      buttons={<Button icon="arrow-left" content="Back" onClick={() => act('menu', { menu: 'Main' })} />}>
+      buttons={
+        <Button
+          icon="arrow-left"
+          content="Back"
+          onClick={() => act('menu', { menu: 'Main' })}
+        />
+      }>
       {bodyrecords.map((record) => (
         <Button
           icon="eye"
@@ -61,7 +89,13 @@ const BodyDesignerStockRecords = (props, context) => {
   return (
     <Section
       title="Stock Records"
-      buttons={<Button icon="arrow-left" content="Back" onClick={() => act('menu', { menu: 'Main' })} />}>
+      buttons={
+        <Button
+          icon="arrow-left"
+          content="Back"
+          onClick={() => act('menu', { menu: 'Main' })}
+        />
+      }>
       {stock_bodyrecords.map((record) => (
         <Button
           icon="eye"
@@ -82,10 +116,20 @@ const BodyDesignerSpecificRecord = (props, context) => {
       <Flex.Item basis="165px">
         <Section
           title="Specific Record"
-          buttons={<Button icon="arrow-left" content="Back" onClick={() => act('menu', { menu: 'Main' })} />}>
+          buttons={
+            <Button
+              icon="arrow-left"
+              content="Back"
+              onClick={() => act('menu', { menu: 'Main' })}
+            />
+          }>
           <LabeledList>
-            <LabeledList.Item label="Name">{activeBodyRecord.real_name}</LabeledList.Item>
-            <LabeledList.Item label="Species">{activeBodyRecord.speciesname}</LabeledList.Item>
+            <LabeledList.Item label="Name">
+              {activeBodyRecord.real_name}
+            </LabeledList.Item>
+            <LabeledList.Item label="Species">
+              {activeBodyRecord.speciesname}
+            </LabeledList.Item>
             <LabeledList.Item label="Bio. Sex">
               <Button
                 icon="pen"
@@ -98,7 +142,9 @@ const BodyDesignerSpecificRecord = (props, context) => {
                 }
               />
             </LabeledList.Item>
-            <LabeledList.Item label="Synthetic">{activeBodyRecord.synthetic}</LabeledList.Item>
+            <LabeledList.Item label="Synthetic">
+              {activeBodyRecord.synthetic}
+            </LabeledList.Item>
             <LabeledList.Item label="Mind Compat">
               {activeBodyRecord.locked}
               <Button
@@ -271,9 +317,16 @@ const BodyDesignerOOCNotes = (props, context) => {
       title="Body OOC Notes (This is OOC!)"
       height="100%"
       scrollable
-      buttons={<Button icon="arrow-left" content="Back" onClick={() => act('menu', { menu: 'Specific Record' })} />}
+      buttons={
+        <Button
+          icon="arrow-left"
+          content="Back"
+          onClick={() => act('menu', { menu: 'Specific Record' })}
+        />
+      }
       style={{ 'word-break': 'break-all' }}>
-      {(activeBodyRecord && activeBodyRecord.booc) || 'ERROR: Body record not found!'}
+      {(activeBodyRecord && activeBodyRecord.booc) ||
+        'ERROR: Body record not found!'}
     </Section>
   );
 };
diff --git a/tgui/packages/tgui_ch/interfaces/BodyScanner.js b/tgui/packages/tgui_ch/interfaces/BodyScanner.js
index 5a93a3b7d4..aa4ccf81fd 100644
--- a/tgui/packages/tgui_ch/interfaces/BodyScanner.js
+++ b/tgui/packages/tgui_ch/interfaces/BodyScanner.js
@@ -14,11 +14,17 @@ const abnormalities = [
   [
     'hasBorer',
     'bad',
-    (occupant) => 'Large growth detected in frontal lobe,' + ' possibly cancerous. Surgical removal is recommended.',
+    (occupant) =>
+      'Large growth detected in frontal lobe,' +
+      ' possibly cancerous. Surgical removal is recommended.',
   ],
   ['hasVirus', 'bad', (occupant) => 'Viral pathogen detected in blood stream.'],
   ['blind', 'average', (occupant) => 'Cataracts detected.'],
-  ['colourblind', 'average', (occupant) => 'Photoreceptor abnormalities detected.'],
+  [
+    'colourblind',
+    'average',
+    (occupant) => 'Photoreceptor abnormalities detected.',
+  ],
   ['nearsighted', 'average', (occupant) => 'Retinal misalignment detected.'],
   /* VOREStation Add */
   [
@@ -115,7 +121,11 @@ const germStatus = (i) => {
 export const BodyScanner = (props, context) => {
   const { data } = useBackend(context);
   const { occupied, occupant = {} } = data;
-  const body = occupied ? <BodyScannerMain occupant={occupant} /> : <BodyScannerEmpty />;
+  const body = occupied ? (
+    <BodyScannerMain occupant={occupant} />
+  ) : (
+    <BodyScannerEmpty />
+  );
   return (
     <Window width={690} height={600} resizable>
       <Window.Content scrollable className="Layout__content--flexColumn">
@@ -179,13 +189,17 @@ const BodyScannerMainOccupant = (props, context) => {
           &deg;F
         </LabeledList.Item>
         <LabeledList.Item label="Blood Volume">
-          <AnimatedNumber value={round(occupant.blood.volume, 0)} /> units&nbsp;(
+          <AnimatedNumber value={round(occupant.blood.volume, 0)} />{' '}
+          units&nbsp;(
           <AnimatedNumber value={round(occupant.blood.percent, 0)} />
           %)
         </LabeledList.Item>
         {/* VOREStation Add */}
         <LabeledList.Item label="Weight">
-          {round(data.occupant.weight) + 'lbs, ' + round(data.occupant.weight / 2.20463) + 'kgs'}
+          {round(data.occupant.weight) +
+            'lbs, ' +
+            round(data.occupant.weight / 2.20463) +
+            'kgs'}
         </LabeledList.Item>
         {/* VOREStation Add End */}
       </LabeledList>
@@ -209,7 +223,8 @@ const BodyScannerMainReagents = (props) => {
               <Table.Row key={reagent.name}>
                 <Table.Cell>{reagent.name}</Table.Cell>
                 <Table.Cell textAlign="right">
-                  {reagent.amount} Units {reagent.overdose ? <Box color="bad">OVERDOSING</Box> : null}
+                  {reagent.amount} Units{' '}
+                  {reagent.overdose ? <Box color="bad">OVERDOSING</Box> : null}
                 </Table.Cell>
               </Table.Row>
             ))}
@@ -229,7 +244,8 @@ const BodyScannerMainReagents = (props) => {
               <Table.Row key={reagent.name}>
                 <Table.Cell>{reagent.name}</Table.Cell>
                 <Table.Cell textAlign="right">
-                  {reagent.amount} Units {reagent.overdose ? <Box color="bad">OVERDOSING</Box> : null}
+                  {reagent.amount} Units{' '}
+                  {reagent.overdose ? <Box color="bad">OVERDOSING</Box> : null}
                 </Table.Cell>
               </Table.Row>
             ))}
@@ -246,10 +262,18 @@ const BodyScannerMainAbnormalities = (props) => {
   const { occupant } = props;
 
   let hasAbnormalities =
-    occupant.hasBorer || occupant.blind || occupant.colourblind || occupant.nearsighted || occupant.hasVirus;
+    occupant.hasBorer ||
+    occupant.blind ||
+    occupant.colourblind ||
+    occupant.nearsighted ||
+    occupant.hasVirus;
 
   /* VOREStation Add */
-  hasAbnormalities = hasAbnormalities || occupant.humanPrey || occupant.livingPrey || occupant.objectPrey;
+  hasAbnormalities =
+    hasAbnormalities ||
+    occupant.humanPrey ||
+    occupant.livingPrey ||
+    occupant.objectPrey;
   /* VOREStation Add End */
 
   if (!hasAbnormalities) {
@@ -288,9 +312,14 @@ const BodyScannerMainDamage = (props) => {
             </Table.Row>
             <Table.Row>
               <Table.Cell>
-                <BodyScannerMainDamageBar value={occupant[d1[1]]} marginBottom={i < damages.length - 2} />
+                <BodyScannerMainDamageBar
+                  value={occupant[d1[1]]}
+                  marginBottom={i < damages.length - 2}
+                />
+              </Table.Cell>
+              <Table.Cell>
+                {!!d2 && <BodyScannerMainDamageBar value={occupant[d2[1]]} />}
               </Table.Cell>
-              <Table.Cell>{!!d2 && <BodyScannerMainDamageBar value={occupant[d2[1]]} />}</Table.Cell>
             </Table.Row>
           </Fragment>
         ))}
@@ -377,7 +406,9 @@ const BodyScannerMainOrgansExternal = (props) => {
                   !!o.status.robotic && 'Robotic',
                   !!o.status.dead && <Box color="bad">DEAD</Box>,
                 ])}
-                {reduceOrganStatus(o.implants.map((s) => (s.known ? s.name : 'Unknown object')))}
+                {reduceOrganStatus(
+                  o.implants.map((s) => (s.known ? s.name : 'Unknown object'))
+                )}
               </Box>
             </Table.Cell>
           </Table.Row>
@@ -408,13 +439,21 @@ const BodyScannerMainOrgansInternal = (props) => {
           <Table.Row key={i} textTransform="capitalize">
             <Table.Cell width="33%">{o.name}</Table.Cell>
             <Table.Cell textAlign="center">
-              <ProgressBar min="0" max={o.maxHealth} value={o.damage / 100} mt={i > 0 && '0.5rem'} ranges={damageRange}>
+              <ProgressBar
+                min="0"
+                max={o.maxHealth}
+                value={o.damage / 100}
+                mt={i > 0 && '0.5rem'}
+                ranges={damageRange}>
                 {round(o.damage, 0)}
               </ProgressBar>
             </Table.Cell>
             <Table.Cell textAlign="right" width="33%">
               <Box color="average" inline>
-                {reduceOrganStatus([germStatus(o.germ_level), !!o.inflamed && 'Appendicitis detected.'])}
+                {reduceOrganStatus([
+                  germStatus(o.germ_level),
+                  !!o.inflamed && 'Appendicitis detected.',
+                ])}
               </Box>
               <Box inline>
                 {reduceOrganStatus([
diff --git a/tgui/packages/tgui_ch/interfaces/BombTester.js b/tgui/packages/tgui_ch/interfaces/BombTester.js
index 44347a3ddf..81d016b924 100644
--- a/tgui/packages/tgui_ch/interfaces/BombTester.js
+++ b/tgui/packages/tgui_ch/interfaces/BombTester.js
@@ -6,7 +6,16 @@ import { Window } from '../layouts';
 export const BombTester = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { simulating, mode, tank1, tank1ref, tank2, tank2ref, canister, sim_canister_output } = data;
+  const {
+    simulating,
+    mode,
+    tank1,
+    tank1ref,
+    tank2,
+    tank2ref,
+    canister,
+    sim_canister_output,
+  } = data;
 
   return (
     <Window width={450} height={400}>
@@ -15,34 +24,48 @@ export const BombTester = (props, context) => {
           <Section title="Virtual Explosive Simulator v2.01">
             <LabeledList>
               <LabeledList.Item label="Mode">
-                <Button onClick={() => act('set_mode', { mode: 1 })} selected={mode === 1}>
+                <Button
+                  onClick={() => act('set_mode', { mode: 1 })}
+                  selected={mode === 1}>
                   Single Tank
                 </Button>
-                <Button onClick={() => act('set_mode', { mode: 2 })} selected={mode === 2}>
+                <Button
+                  onClick={() => act('set_mode', { mode: 2 })}
+                  selected={mode === 2}>
                   Transfer Valve
                 </Button>
-                <Button onClick={() => act('set_mode', { mode: 3 })} selected={mode === 3}>
+                <Button
+                  onClick={() => act('set_mode', { mode: 3 })}
+                  selected={mode === 3}>
                   Canister
                 </Button>
               </LabeledList.Item>
               <LabeledList.Item label="Primary Slot">
                 {(tank1 && (
-                  <Button onClick={() => act('remove_tank', { ref: tank1ref })} icon="eject">
+                  <Button
+                    onClick={() => act('remove_tank', { ref: tank1ref })}
+                    icon="eject">
                     {tank1}
                   </Button>
                 )) || (
-                  <Button onClick={() => act('add_tank', { slot: 1 })} icon="upload">
+                  <Button
+                    onClick={() => act('add_tank', { slot: 1 })}
+                    icon="upload">
                     Insert Tank
                   </Button>
                 )}
               </LabeledList.Item>
               <LabeledList.Item label="Secondary Slot">
                 {(tank2 && (
-                  <Button onClick={() => act('remove_tank', { ref: tank2ref })} icon="eject">
+                  <Button
+                    onClick={() => act('remove_tank', { ref: tank2ref })}
+                    icon="eject">
                     {tank2}
                   </Button>
                 )) || (
-                  <Button onClick={() => act('add_tank', { slot: 2 })} icon="upload">
+                  <Button
+                    onClick={() => act('add_tank', { slot: 2 })}
+                    icon="upload">
                     Insert Tank
                   </Button>
                 )}
@@ -54,7 +77,9 @@ export const BombTester = (props, context) => {
                     Scan
                   </Button>
                 }>
-                {(canister && <Box color="label">{canister}</Box>) || <Box color="bad">No tank connected.</Box>}
+                {(canister && <Box color="label">{canister}</Box>) || (
+                  <Box color="bad">No tank connected.</Box>
+                )}
               </LabeledList.Item>
               {canister && (
                 <LabeledList.Item label="Canister Release Pressure">
@@ -62,12 +87,20 @@ export const BombTester = (props, context) => {
                     minValue={0}
                     value={sim_canister_output}
                     maxValue={1013.25}
-                    onDrag={(e, val) => act('set_can_pressure', { pressure: val })}
+                    onDrag={(e, val) =>
+                      act('set_can_pressure', { pressure: val })
+                    }
                   />
                 </LabeledList.Item>
               )}
             </LabeledList>
-            <Button mt={2} color="red" icon="bomb" fontSize={2} onClick={() => act('start_sim')} fluid>
+            <Button
+              mt={2}
+              color="red"
+              icon="bomb"
+              fontSize={2}
+              onClick={() => act('start_sim')}
+              fluid>
               Begin Simulation
             </Button>
           </Section>
@@ -150,7 +183,9 @@ class BombTesterSimulation extends Component {
 
     return (
       <Section title="Simulation in progress!" fill>
-        <Box position="absolute" style={{ overflow: 'hidden', width: '100%', height: '100%' }}>
+        <Box
+          position="absolute"
+          style={{ overflow: 'hidden', width: '100%', height: '100%' }}>
           <Icon style={newStyle} name="bomb" size={10} color="red" />
         </Box>
       </Section>
diff --git a/tgui/packages/tgui_ch/interfaces/BotanyEditor.js b/tgui/packages/tgui_ch/interfaces/BotanyEditor.js
index 48007503bb..142fe7d5ed 100644
--- a/tgui/packages/tgui_ch/interfaces/BotanyEditor.js
+++ b/tgui/packages/tgui_ch/interfaces/BotanyEditor.js
@@ -25,7 +25,9 @@ export const BotanyEditor = (props, context) => {
             <Box>
               <LabeledList>
                 <LabeledList.Item label="Source">{sourceName}</LabeledList.Item>
-                <LabeledList.Item label="Gene Decay">{degradation}%</LabeledList.Item>
+                <LabeledList.Item label="Gene Decay">
+                  {degradation}%
+                </LabeledList.Item>
                 <LabeledList.Item label="Locus">{locus}</LabeledList.Item>
               </LabeledList>
               <Button mt={1} icon="eject" onClick={() => act('eject_disk')}>
diff --git a/tgui/packages/tgui_ch/interfaces/BotanyIsolator.js b/tgui/packages/tgui_ch/interfaces/BotanyIsolator.js
index 59a2bce6ae..af53b6817e 100644
--- a/tgui/packages/tgui_ch/interfaces/BotanyIsolator.js
+++ b/tgui/packages/tgui_ch/interfaces/BotanyIsolator.js
@@ -5,7 +5,15 @@ import { Window } from '../layouts';
 export const BotanyIsolator = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { geneMasks, activity, degradation, disk, loaded, hasGenetics, sourceName } = data;
+  const {
+    geneMasks,
+    activity,
+    degradation,
+    disk,
+    loaded,
+    hasGenetics,
+    sourceName,
+  } = data;
 
   if (activity) {
     return (
@@ -25,12 +33,17 @@ export const BotanyIsolator = (props, context) => {
             <Box>
               <LabeledList>
                 <LabeledList.Item label="Source">{sourceName}</LabeledList.Item>
-                <LabeledList.Item label="Gene decay">{degradation}%</LabeledList.Item>
+                <LabeledList.Item label="Gene decay">
+                  {degradation}%
+                </LabeledList.Item>
                 {(disk &&
                   geneMasks.length &&
                   geneMasks.map((mask) => (
                     <LabeledList.Item key={mask.mask} label={mask.mask}>
-                      <Button mb={-1} icon="download" onClick={() => act('get_gene', { get_gene: mask.tag })}>
+                      <Button
+                        mb={-1}
+                        icon="download"
+                        onClick={() => act('get_gene', { get_gene: mask.tag })}>
                         Extract
                       </Button>
                     </LabeledList.Item>
@@ -71,7 +84,9 @@ export const BotanyIsolator = (props, context) => {
           {(loaded && (
             <Box>
               <LabeledList>
-                <LabeledList.Item label="Packet Loaded">{loaded}</LabeledList.Item>
+                <LabeledList.Item label="Packet Loaded">
+                  {loaded}
+                </LabeledList.Item>
               </LabeledList>
               <Button mt={1} icon="cog" onClick={() => act('scan_genome')}>
                 Process Genome
diff --git a/tgui/packages/tgui_ch/interfaces/CameraConsole.js b/tgui/packages/tgui_ch/interfaces/CameraConsole.js
index 02d8f43fc3..3a3c39f3f7 100644
--- a/tgui/packages/tgui_ch/interfaces/CameraConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/CameraConsole.js
@@ -15,7 +15,9 @@ const prevNextCamera = (cameras, activeCamera) => {
   if (!activeCamera) {
     return [];
   }
-  const index = cameras.findIndex((camera) => camera.name === activeCamera.name);
+  const index = cameras.findIndex(
+    (camera) => camera.name === activeCamera.name
+  );
   return [cameras[index - 1]?.name, cameras[index + 1]?.name];
 };
 
@@ -32,7 +34,8 @@ const selectCameras = (cameras, searchText = '', networkFilter = '') => {
     // Optional search term
     searchText && filter(testSearch),
     // Optional network filter
-    networkFilter && filter((camera) => camera.networks.includes(networkFilter)),
+    networkFilter &&
+      filter((camera) => camera.networks.includes(networkFilter)),
     // Slightly expensive, but way better than sorting in BYOND
     sortBy((camera) => camera.name),
   ])(cameras);
@@ -52,7 +55,10 @@ export const CameraConsoleContent = (props, context) => {
 
   const { mapRef, activeCamera } = data;
   const cameras = selectCameras(data.cameras);
-  const [prevCameraName, nextCameraName] = prevNextCamera(cameras, activeCamera);
+  const [prevCameraName, nextCameraName] = prevNextCamera(
+    cameras,
+    activeCamera
+  );
   return (
     <Fragment>
       <div className="CameraConsole__left">
@@ -86,13 +92,22 @@ export const CameraConsoleContent = (props, context) => {
 export const CameraConsoleSearch = (props, context) => {
   const { act, data } = useBackend(context);
   const [searchText, setSearchText] = useLocalState(context, 'searchText', '');
-  const [networkFilter, setNetworkFilter] = useLocalState(context, 'networkFilter', '');
+  const [networkFilter, setNetworkFilter] = useLocalState(
+    context,
+    'networkFilter',
+    ''
+  );
   const { activeCamera, allNetworks } = data;
   allNetworks.sort();
   const cameras = selectCameras(data.cameras, searchText, networkFilter);
   return (
     <Fragment>
-      <Input fluid mb={1} placeholder="Search for a camera" onInput={(e, value) => setSearchText(value)} />
+      <Input
+        fluid
+        mb={1}
+        placeholder="Search for a camera"
+        onInput={(e, value) => setSearchText(value)}
+      />
       <Dropdown
         mb={1}
         width="177px"
@@ -112,7 +127,9 @@ export const CameraConsoleSearch = (props, context) => {
               'Button--fluid',
               'Button--color--transparent',
               'Button--ellipsis',
-              activeCamera && camera.name === activeCamera.name && 'Button--selected',
+              activeCamera &&
+                camera.name === activeCamera.name &&
+                'Button--selected',
             ])}
             onClick={() => {
               refocusLayout();
diff --git a/tgui/packages/tgui_ch/interfaces/Canister.js b/tgui/packages/tgui_ch/interfaces/Canister.js
index fb134f1c77..c60fb0a87d 100644
--- a/tgui/packages/tgui_ch/interfaces/Canister.js
+++ b/tgui/packages/tgui_ch/interfaces/Canister.js
@@ -23,7 +23,12 @@ export const Canister = (props, context) => {
         <Section
           title="Canister"
           buttons={
-            <Button icon="pencil-alt" disabled={!can_relabel} content="Relabel" onClick={() => act('relabel')} />
+            <Button
+              icon="pencil-alt"
+              disabled={!can_relabel}
+              content="Relabel"
+              onClick={() => act('relabel')}
+            />
           }>
           <LabeledControls>
             <LabeledControls.Item minWidth="66px" label="Tank Pressure">
@@ -95,8 +100,15 @@ export const Canister = (props, context) => {
             </LabeledControls.Item>
             <LabeledControls.Item mr={1} label="Port">
               <Box position="relative">
-                <Icon size={1.25} name={connected ? 'plug' : 'times'} color={connected ? 'good' : 'bad'} />
-                <Tooltip content={connected ? 'Connected' : 'Disconnected'} position="top" />
+                <Icon
+                  size={1.25}
+                  name={connected ? 'plug' : 'times'}
+                  color={connected ? 'good' : 'bad'}
+                />
+                <Tooltip
+                  content={connected ? 'Connected' : 'Disconnected'}
+                  position="top"
+                />
               </Box>
             </LabeledControls.Item>
           </LabeledControls>
@@ -105,7 +117,12 @@ export const Canister = (props, context) => {
           title="Holding Tank"
           buttons={
             !!holding && (
-              <Button icon="eject" color={valveOpen && 'danger'} content="Eject" onClick={() => act('eject')} />
+              <Button
+                icon="eject"
+                color={valveOpen && 'danger'}
+                content="Eject"
+                onClick={() => act('eject')}
+              />
             )
           }>
           {!!holding && (
diff --git a/tgui/packages/tgui_ch/interfaces/Canvas.js b/tgui/packages/tgui_ch/interfaces/Canvas.js
index e8dd0eb23c..b0c63378e1 100644
--- a/tgui/packages/tgui_ch/interfaces/Canvas.js
+++ b/tgui/packages/tgui_ch/interfaces/Canvas.js
@@ -83,12 +83,23 @@ export const Canvas = (props, context) => {
   const dotsize = PX_PER_UNIT;
   const [width, height] = getImageSize(data.grid);
   return (
-    <Window width={Math.min(700, width * dotsize + 72)} height={Math.min(700, height * dotsize + 72)}>
+    <Window
+      width={Math.min(700, width * dotsize + 72)}
+      height={Math.min(700, height * dotsize + 72)}>
       <Window.Content>
         <Box textAlign="center">
-          <PaintCanvas value={data.grid} dotsize={dotsize} onCanvasClick={(x, y) => act('paint', { x, y })} />
+          <PaintCanvas
+            value={data.grid}
+            dotsize={dotsize}
+            onCanvasClick={(x, y) => act('paint', { x, y })}
+          />
           <Box>
-            {!data.finalized && <Button.Confirm onClick={() => act('finalize')} content="Finalize" />}
+            {!data.finalized && (
+              <Button.Confirm
+                onClick={() => act('finalize')}
+                content="Finalize"
+              />
+            )}
             &nbsp;{data.name}
           </Box>
         </Box>
diff --git a/tgui/packages/tgui_ch/interfaces/CasinoPrizeDispenserCh.js b/tgui/packages/tgui_ch/interfaces/CasinoPrizeDispenserCh.js
index 500b6ed0ab..e81473c4d4 100644
--- a/tgui/packages/tgui_ch/interfaces/CasinoPrizeDispenserCh.js
+++ b/tgui/packages/tgui_ch/interfaces/CasinoPrizeDispenserCh.js
@@ -27,12 +27,20 @@ export const CasinoPrizeDispenserCh = () => {
 const CasinoPrizeDispenserChSearch = (props, context) => {
   const [_searchText, setSearchText] = useLocalState(context, 'search', '');
   const [_sortOrder, setSortOrder] = useLocalState(context, 'sort', '');
-  const [descending, setDescending] = useLocalState(context, 'descending', false);
+  const [descending, setDescending] = useLocalState(
+    context,
+    'descending',
+    false
+  );
   return (
     <Box mb="0.5rem">
       <Flex width="100%">
         <Flex.Item grow="1" mr="0.5rem">
-          <Input placeholder="Search by item name.." width="100%" onInput={(_e, value) => setSearchText(value)} />
+          <Input
+            placeholder="Search by item name.."
+            width="100%"
+            onInput={(_e, value) => setSearchText(value)}
+          />
         </Flex.Item>
         <Flex.Item basis="30%">
           <Dropdown
@@ -63,8 +71,16 @@ const CasinoPrizeDispenserChItems = (props, context) => {
   const { points, items } = data;
   // Search thingies
   const [searchText, _setSearchText] = useLocalState(context, 'search', '');
-  const [sortOrder, _setSortOrder] = useLocalState(context, 'sort', 'Alphabetical');
-  const [descending, _setDescending] = useLocalState(context, 'descending', false);
+  const [sortOrder, _setSortOrder] = useLocalState(
+    context,
+    'sort',
+    'Alphabetical'
+  );
+  const [descending, _setDescending] = useLocalState(
+    context,
+    'descending',
+    false
+  );
   const searcher = createSearch(searchText, (item) => {
     return item[0];
   });
@@ -86,12 +102,22 @@ const CasinoPrizeDispenserChItems = (props, context) => {
     }
 
     has_contents = true;
-    return <CasinoPrizeDispenserChItemsCategory key={kv[0]} title={kv[0]} items={items_in_cat} />;
+    return (
+      <CasinoPrizeDispenserChItemsCategory
+        key={kv[0]}
+        title={kv[0]}
+        items={items_in_cat}
+      />
+    );
   });
   return (
     <Flex.Item grow="1" overflow="auto">
       <Section onClick={(e) => refocusLayout()}>
-        {has_contents ? contents : <Box color="label">No items matching your criteria was found!</Box>}
+        {has_contents ? (
+          contents
+        ) : (
+          <Box color="label">No items matching your criteria was found!</Box>
+        )}
       </Section>
     </Flex.Item>
   );
diff --git a/tgui/packages/tgui_ch/interfaces/CharacterDirectory.js b/tgui/packages/tgui_ch/interfaces/CharacterDirectory.js
index 9c7fc14968..d7a45241e3 100644
--- a/tgui/packages/tgui_ch/interfaces/CharacterDirectory.js
+++ b/tgui/packages/tgui_ch/interfaces/CharacterDirectory.js
@@ -25,12 +25,22 @@ const getTagColor = (tag) => {
 export const CharacterDirectory = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { personalVisibility, personalTag, personalGenderTag, personalSexualityTag, personalErpTag, personalEventTag } =
-    data;
+  const {
+    personalVisibility,
+    personalTag,
+    personalGenderTag,
+    personalSexualityTag,
+    personalErpTag,
+    personalEventTag,
+  } = data;
 
   const [overlay, setOverlay] = useLocalState(context, 'overlay', null);
 
-  const [overwritePrefs, setOverwritePrefs] = useLocalState(context, 'overwritePrefs', false);
+  const [overwritePrefs, setOverwritePrefs] = useLocalState(
+    context,
+    'overwritePrefs',
+    false
+  );
 
   return (
     <Window width={816} height={722} resizeable>
@@ -57,46 +67,66 @@ export const CharacterDirectory = (props, context) => {
                   <Button
                     fluid
                     content={personalVisibility ? 'Shown' : 'Not Shown'}
-                    onClick={() => act('setVisible', { overwrite_prefs: overwritePrefs })}
+                    onClick={() =>
+                      act('setVisible', { overwrite_prefs: overwritePrefs })
+                    }
                   />
                 </LabeledList.Item>
                 <LabeledList.Item label="Vore Tag">
                   <Button
                     fluid
                     content={personalTag}
-                    onClick={() => act('setTag', { overwrite_prefs: overwritePrefs })}
+                    onClick={() =>
+                      act('setTag', { overwrite_prefs: overwritePrefs })
+                    }
                   />
                 </LabeledList.Item>
                 <LabeledList.Item label="Gender">
                   <Button
                     fluid
                     content={personalGenderTag}
-                    onClick={() => act('setGenderTag', { overwrite_prefs: overwritePrefs })}
+                    onClick={() =>
+                      act('setGenderTag', { overwrite_prefs: overwritePrefs })
+                    }
                   />
                 </LabeledList.Item>
                 <LabeledList.Item label="Sexuality">
                   <Button
                     fluid
                     content={personalSexualityTag}
-                    onClick={() => act('setSexualityTag', { overwrite_prefs: overwritePrefs })}
+                    onClick={() =>
+                      act('setSexualityTag', {
+                        overwrite_prefs: overwritePrefs,
+                      })
+                    }
                   />
                 </LabeledList.Item>
                 <LabeledList.Item label="ERP Tag">
                   <Button
                     fluid
                     content={personalErpTag}
-                    onClick={() => act('setErpTag', { overwrite_prefs: overwritePrefs })}
+                    onClick={() =>
+                      act('setErpTag', { overwrite_prefs: overwritePrefs })
+                    }
                   />
                 </LabeledList.Item>
                 <LabeledList.Item label="Event Pref">
                   <Button
                     fluid
                     content={personalEventTag}
-                    onClick={() => act('setEventTag', { overwrite_prefs: overwritePrefs })}
+                    onClick={() =>
+                      act('setEventTag', { overwrite_prefs: overwritePrefs })
+                    }
                   />
                 </LabeledList.Item>
                 <LabeledList.Item label="Advertisement">
-                  <Button fluid content="Edit Ad" onClick={() => act('editAd', { overwrite_prefs: overwritePrefs })} />
+                  <Button
+                    fluid
+                    content="Edit Ad"
+                    onClick={() =>
+                      act('editAd', { overwrite_prefs: overwritePrefs })
+                    }
+                  />
                 </LabeledList.Item>
               </LabeledList>
             </Section>
@@ -114,7 +144,13 @@ const ViewCharacter = (props, context) => {
   return (
     <Section
       title={overlay.name}
-      buttons={<Button icon="arrow-left" content="Back" onClick={() => setOverlay(null)} />}>
+      buttons={
+        <Button
+          icon="arrow-left"
+          content="Back"
+          onClick={() => setOverlay(null)}
+        />
+      }>
       <Section level={2} title="Species">
         <Box>{overlay.species}</Box>
       </Section>
@@ -160,11 +196,19 @@ const CharacterDirectoryList = (props, context) => {
   const { directory } = data;
 
   const [sortId, _setSortId] = useLocalState(context, 'sortId', 'name');
-  const [sortOrder, _setSortOrder] = useLocalState(context, 'sortOrder', 'name');
+  const [sortOrder, _setSortOrder] = useLocalState(
+    context,
+    'sortOrder',
+    'name'
+  );
   const [overlay, setOverlay] = useLocalState(context, 'overlay', null);
 
   return (
-    <Section title="Directory" buttons={<Button icon="sync" content="Refresh" onClick={() => act('refresh')} />}>
+    <Section
+      title="Directory"
+      buttons={
+        <Button icon="sync" content="Refresh" onClick={() => act('refresh')} />
+      }>
       <Table>
         <Table.Row bold>
           <SortButton id="name">Name</SortButton>
@@ -231,7 +275,9 @@ const SortButton = (props, context) => {
           }
         }}>
         {children}
-        {sortId === id && <Icon name={sortOrder ? 'sort-up' : 'sort-down'} ml="0.25rem;" />}
+        {sortId === id && (
+          <Icon name={sortOrder ? 'sort-up' : 'sort-down'} ml="0.25rem;" />
+        )}
       </Button>
     </Table.Cell>
   );
diff --git a/tgui/packages/tgui_ch/interfaces/ChemDispenser.js b/tgui/packages/tgui_ch/interfaces/ChemDispenser.js
index 51d7804ba0..ee362d6ddb 100644
--- a/tgui/packages/tgui_ch/interfaces/ChemDispenser.js
+++ b/tgui/packages/tgui_ch/interfaces/ChemDispenser.js
@@ -72,7 +72,9 @@ const ChemDispenserChemicals = (properties, context) => {
     flexFillers.push(true);
   }
   return (
-    <Section title={data.glass ? 'Drink Dispenser' : 'Chemical Dispenser'} flexGrow="1">
+    <Section
+      title={data.glass ? 'Drink Dispenser' : 'Chemical Dispenser'}
+      flexGrow="1">
       <Flex direction="row" wrap="wrap" height="100%" align="flex-start">
         {chemicals.map((c, i) => (
           <Flex.Item key={i} grow="1" m={0.2} basis="40%" height="20px">
@@ -100,7 +102,12 @@ const ChemDispenserChemicals = (properties, context) => {
 
 const ChemDispenserBeaker = (properties, context) => {
   const { act, data } = useBackend(context);
-  const { isBeakerLoaded, beakerCurrentVolume, beakerMaxVolume, beakerContents = [] } = data;
+  const {
+    isBeakerLoaded,
+    beakerCurrentVolume,
+    beakerMaxVolume,
+    beakerContents = [],
+  } = data;
   return (
     <Section
       title="Beaker"
@@ -113,7 +120,12 @@ const ChemDispenserBeaker = (properties, context) => {
               {beakerCurrentVolume} / {beakerMaxVolume} units
             </Box>
           )}
-          <Button icon="eject" content="Eject" disabled={!isBeakerLoaded} onClick={() => act('ejectBeaker')} />
+          <Button
+            icon="eject"
+            content="Eject"
+            disabled={!isBeakerLoaded}
+            onClick={() => act('ejectBeaker')}
+          />
         </Box>
       }>
       <BeakerContents
diff --git a/tgui/packages/tgui_ch/interfaces/ChemMaster.js b/tgui/packages/tgui_ch/interfaces/ChemMaster.js
index 20fe4c2349..c6e385905c 100644
--- a/tgui/packages/tgui_ch/interfaces/ChemMaster.js
+++ b/tgui/packages/tgui_ch/interfaces/ChemMaster.js
@@ -6,13 +6,23 @@ import { BeakerContents } from './common/BeakerContents';
 import { ComplexModal, modalOpen, modalRegisterBodyOverride } from './common/ComplexModal';
 
 const transferAmounts = [1, 5, 10, 30, 60];
-const bottleStyles = ['bottle.png', 'small_bottle.png', 'wide_bottle.png', 'round_bottle.png', 'reagent_bottle.png'];
+const bottleStyles = [
+  'bottle.png',
+  'small_bottle.png',
+  'wide_bottle.png',
+  'round_bottle.png',
+  'reagent_bottle.png',
+];
 
 const analyzeModalBodyOverride = (modal, context) => {
   const { act, data } = useBackend(context);
   const result = modal.args.analysis;
   return (
-    <Section level={2} m="-1rem" pb="1rem" title={data.condi ? 'Condiment Analysis' : 'Reagent Analysis'}>
+    <Section
+      level={2}
+      m="-1rem"
+      pb="1rem"
+      title={data.condi ? 'Condiment Analysis' : 'Reagent Analysis'}>
       <Box mx="0.5rem">
         <LabeledList>
           <LabeledList.Item label="Name">{result.name}</LabeledList.Item>
@@ -21,8 +31,12 @@ const analyzeModalBodyOverride = (modal, context) => {
           </LabeledList.Item>
           {result.blood_type && (
             <Fragment>
-              <LabeledList.Item label="Blood type">{result.blood_type}</LabeledList.Item>
-              <LabeledList.Item label="Blood DNA" className="LabeledList__breakContents">
+              <LabeledList.Item label="Blood type">
+                {result.blood_type}
+              </LabeledList.Item>
+              <LabeledList.Item
+                label="Blood DNA"
+                className="LabeledList__breakContents">
                 {result.blood_dna}
               </LabeledList.Item>
             </Fragment>
@@ -50,7 +64,13 @@ const analyzeModalBodyOverride = (modal, context) => {
 
 export const ChemMaster = (props, context) => {
   const { data } = useBackend(context);
-  const { condi, beaker, beaker_reagents = [], buffer_reagents = [], mode } = data;
+  const {
+    condi,
+    beaker,
+    beaker_reagents = [],
+    buffer_reagents = [],
+    mode,
+  } = data;
   return (
     <Window width={575} height={500} resizable>
       <ComplexModal />
@@ -61,8 +81,12 @@ export const ChemMaster = (props, context) => {
           bufferNonEmpty={buffer_reagents.length > 0}
         />
         <ChemMasterBuffer mode={mode} bufferReagents={buffer_reagents} />
-        <ChemMasterProduction isCondiment={condi} bufferNonEmpty={buffer_reagents.length > 0} />
-        <ChemMasterCustomization /> {/* CHOMPEdit - Enable customizing pill bottle type */}
+        <ChemMasterProduction
+          isCondiment={condi}
+          bufferNonEmpty={buffer_reagents.length > 0}
+        />
+        <ChemMasterCustomization />{' '}
+        {/* CHOMPEdit - Enable customizing pill bottle type */}
       </Window.Content>
     </Window>
   );
@@ -73,9 +97,19 @@ const ChemMasterBeaker = (props, context) => {
   const { beaker, beakerReagents, bufferNonEmpty } = props;
 
   let headerButton = bufferNonEmpty ? (
-    <Button.Confirm icon="eject" disabled={!beaker} content="Eject and Clear Buffer" onClick={() => act('eject')} />
+    <Button.Confirm
+      icon="eject"
+      disabled={!beaker}
+      content="Eject and Clear Buffer"
+      onClick={() => act('eject')}
+    />
   ) : (
-    <Button icon="eject" disabled={!beaker} content="Eject and Clear Buffer" onClick={() => act('eject')} />
+    <Button
+      icon="eject"
+      disabled={!beaker}
+      content="Eject and Clear Buffer"
+      onClick={() => act('eject')}
+    />
   );
 
   return (
@@ -271,7 +305,11 @@ const ChemMasterProduction = (props, context) => {
           onClick={() => act('ejectp')}
         />
       }>
-      {!props.isCondiment ? <ChemMasterProductionChemical /> : <ChemMasterProductionCondiment />}
+      {!props.isCondiment ? (
+        <ChemMasterProductionChemical />
+      ) : (
+        <ChemMasterProductionCondiment />
+      )}
     </Section>
   );
 };
@@ -281,7 +319,12 @@ const ChemMasterProductionChemical = (props, context) => {
   return (
     <LabeledList>
       <LabeledList.Item label="Pills">
-        <Button icon="circle" content="One (60u max)" mr="0.5rem" onClick={() => modalOpen(context, 'create_pill')} />
+        <Button
+          icon="circle"
+          content="One (60u max)"
+          mr="0.5rem"
+          onClick={() => modalOpen(context, 'create_pill')}
+        />
         <Button
           icon="plus-circle"
           content="Multiple"
@@ -307,8 +350,17 @@ const ChemMasterProductionChemical = (props, context) => {
         </Button>
       </LabeledList.Item>
       <LabeledList.Item label="Patches">
-        <Button icon="square" content="One (60u max)" mr="0.5rem" onClick={() => modalOpen(context, 'create_patch')} />
-        <Button icon="plus-square" content="Multiple" onClick={() => modalOpen(context, 'create_patch_multiple')} />
+        <Button
+          icon="square"
+          content="One (60u max)"
+          mr="0.5rem"
+          onClick={() => modalOpen(context, 'create_patch')}
+        />
+        <Button
+          icon="plus-square"
+          content="Multiple"
+          onClick={() => modalOpen(context, 'create_patch_multiple')}
+        />
       </LabeledList.Item>
       <LabeledList.Item label="Bottle">
         <Button
@@ -318,9 +370,15 @@ const ChemMasterProductionChemical = (props, context) => {
           mb="0.5rem"
           onClick={() => modalOpen(context, 'create_bottle')}
         />
-        <Button icon="plus-square" content="Multiple" onClick={() => modalOpen(context, 'create_bottle_multiple')} />
+        <Button
+          icon="plus-square"
+          content="Multiple"
+          onClick={() => modalOpen(context, 'create_bottle_multiple')}
+        />
         <br />
-        <Button mb="0.5rem" onClick={() => modalOpen(context, 'change_bottle_style')}>
+        <Button
+          mb="0.5rem"
+          onClick={() => modalOpen(context, 'change_bottle_style')}>
           <div
             style={
               'display: inline-block;' +
@@ -352,7 +410,12 @@ const ChemMasterProductionCondiment = (props, context) => {
         onClick={() => modalOpen(context, 'create_condi_pack')}
       />
       <br />
-      <Button icon="wine-bottle" content="Create bottle (60u max)" mb="0" onClick={() => act('create_condi_bottle')} />
+      <Button
+        icon="wine-bottle"
+        content="Create bottle (60u max)"
+        mb="0"
+        onClick={() => act('create_condi_bottle')}
+      />
     </Fragment>
   );
 };
diff --git a/tgui/packages/tgui_ch/interfaces/ChemSynthesizer.js b/tgui/packages/tgui_ch/interfaces/ChemSynthesizer.js
index a2b0b57859..af1e0b6b52 100644
--- a/tgui/packages/tgui_ch/interfaces/ChemSynthesizer.js
+++ b/tgui/packages/tgui_ch/interfaces/ChemSynthesizer.js
@@ -28,7 +28,13 @@ export const ChemSynthesizer = (props, context) => {
 
 const ChemSynthesizerQueueRecipes = (props, context) => {
   const { act, data } = useBackend(context);
-  const { busy, use_catalyst, queue = [], recipes = [], production_mode } = data;
+  const {
+    busy,
+    use_catalyst,
+    queue = [],
+    recipes = [],
+    production_mode,
+  } = data;
 
   return (
     <Flex height="100%" width="100%" direction="column">
@@ -55,7 +61,12 @@ const ChemSynthesizerQueueRecipes = (props, context) => {
                 onClick={() => act('clear_queue')}
               />
               {!busy && (
-                <Button disabled={!queue.length} icon="play" tooltip="Start Queue" onClick={() => act('start_queue')} />
+                <Button
+                  disabled={!queue.length}
+                  icon="play"
+                  tooltip="Start Queue"
+                  onClick={() => act('start_queue')}
+                />
               )}
             </Fragment>
           }>
@@ -203,10 +214,18 @@ const ChemSynthesizerChemicals = (props, context) => {
                 {catalystCurrentVolume} / {catalystMaxVolume} units
               </Box>
             )}
-            <Button icon="eject" content="Eject" disabled={!catalyst || !!busy} onClick={() => act('eject_catalyst')} />
+            <Button
+              icon="eject"
+              content="Eject"
+              disabled={!catalyst || !!busy}
+              onClick={() => act('eject_catalyst')}
+            />
           </Box>
         }>
-        <BeakerContents beakerLoaded={catalyst} beakerContents={catalyst_reagents} />
+        <BeakerContents
+          beakerLoaded={catalyst}
+          beakerContents={catalyst_reagents}
+        />
       </Section>
     </Flex>
   );
@@ -214,7 +233,16 @@ const ChemSynthesizerChemicals = (props, context) => {
 
 const ChemSynthesizerSettings = (props, context) => {
   const { act, data } = useBackend(context);
-  const { busy, production_mode, panel_open, rxn_vessel, drug_substance, bottle_icon, pill_icon, patch_icon } = data;
+  const {
+    busy,
+    production_mode,
+    panel_open,
+    rxn_vessel,
+    drug_substance,
+    bottle_icon,
+    pill_icon,
+    patch_icon,
+  } = data;
 
   return (
     <Flex height="100%" width="100%" direction="column">
@@ -225,7 +253,11 @@ const ChemSynthesizerSettings = (props, context) => {
               <Button
                 color={production_mode ? 'green' : 'bad'}
                 icon="wrench"
-                content={production_mode ? 'Recipe mode: Import' : 'Recipe mode: Tutorial'}
+                content={
+                  production_mode
+                    ? 'Recipe mode: Import'
+                    : 'Recipe mode: Tutorial'
+                }
                 onClick={() => act('mode_toggle')}
               />
             </Flex.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/Cleanbot.js b/tgui/packages/tgui_ch/interfaces/Cleanbot.js
index 50c5b8cabb..fc45fc6490 100644
--- a/tgui/packages/tgui_ch/interfaces/Cleanbot.js
+++ b/tgui/packages/tgui_ch/interfaces/Cleanbot.js
@@ -32,10 +32,14 @@ export const Cleanbot = (props, context) => {
             </Button>
           }>
           <LabeledList>
-            <LabeledList.Item label="Maintenance Panel" color={open ? 'bad' : 'good'}>
+            <LabeledList.Item
+              label="Maintenance Panel"
+              color={open ? 'bad' : 'good'}>
               {open ? 'Open' : 'Closed'}
             </LabeledList.Item>
-            <LabeledList.Item label="Behavior Controls" color={locked ? 'good' : 'bad'}>
+            <LabeledList.Item
+              label="Behavior Controls"
+              color={locked ? 'good' : 'bad'}>
               {locked ? 'Locked' : 'Unlocked'}
             </LabeledList.Item>
           </LabeledList>
@@ -44,12 +48,20 @@ export const Cleanbot = (props, context) => {
           <Section title="Behavior Controls">
             <LabeledList>
               <LabeledList.Item label="Blood">
-                <Button fluid icon={blood ? 'toggle-on' : 'toggle-off'} selected={blood} onClick={() => act('blood')}>
+                <Button
+                  fluid
+                  icon={blood ? 'toggle-on' : 'toggle-off'}
+                  selected={blood}
+                  onClick={() => act('blood')}>
                   {blood ? 'Clean' : 'Ignore'}
                 </Button>
               </LabeledList.Item>
               <LabeledList.Item label="Speaker">
-                <Button fluid icon={vocal ? 'toggle-on' : 'toggle-off'} selected={vocal} onClick={() => act('vocal')}>
+                <Button
+                  fluid
+                  icon={vocal ? 'toggle-on' : 'toggle-off'}
+                  selected={vocal}
+                  onClick={() => act('vocal')}>
                   {vocal ? 'On' : 'Off'}
                 </Button>
               </LabeledList.Item>
@@ -95,7 +107,11 @@ export const Cleanbot = (props, context) => {
               <Box>
                 <LabeledList>
                   <LabeledList.Item label="Odd Looking Screw Twiddled">
-                    <Button fluid selected={wet_floors} onClick={() => act('wet_floors')} icon="screwdriver">
+                    <Button
+                      fluid
+                      selected={wet_floors}
+                      onClick={() => act('wet_floors')}
+                      icon="screwdriver">
                       {wet_floors ? 'Yes' : 'No'}
                     </Button>
                   </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/CloningConsole.js b/tgui/packages/tgui_ch/interfaces/CloningConsole.js
index 93cd8aff74..9aa74b9f63 100644
--- a/tgui/packages/tgui_ch/interfaces/CloningConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/CloningConsole.js
@@ -8,7 +8,8 @@ import { Window } from '../layouts';
 
 const viewRecordModalBodyOverride = (modal, context) => {
   const { act, data } = useBackend(context);
-  const { activerecord, realname, health, unidentity, strucenzymes } = modal.args;
+  const { activerecord, realname, health, unidentity, strucenzymes } =
+    modal.args;
   const damages = health.split(' - ');
   return (
     <Section level={2} m="-1rem" pb="1rem" title={'Records of ' + realname}>
@@ -99,7 +100,11 @@ const viewRecordModalBodyOverride = (modal, context) => {
               })
             }
           />
-          <Button icon="trash" content="Delete" onClick={() => act('del_rec')} />
+          <Button
+            icon="trash"
+            content="Delete"
+            onClick={() => act('del_rec')}
+          />
         </LabeledList.Item>
       </LabeledList>
     </Section>
@@ -168,7 +173,17 @@ const CloningConsoleBody = (props, context) => {
 
 const CloningConsoleMain = (props, context) => {
   const { act, data } = useBackend(context);
-  const { loading, scantemp, occupant, locked, can_brainscan, scan_mode, numberofpods, pods, selected_pod } = data;
+  const {
+    loading,
+    scantemp,
+    occupant,
+    locked,
+    can_brainscan,
+    scan_mode,
+    numberofpods,
+    pods,
+    selected_pod,
+  } = data;
   const isLocked = locked && !!occupant;
   return (
     <Fragment>
@@ -267,7 +282,12 @@ const CloningConsoleMain = (props, context) => {
             }
 
             return (
-              <Box key={i} width="64px" textAlign="center" display="inline-block" mr="0.5rem">
+              <Box
+                key={i}
+                width="64px"
+                textAlign="center"
+                display="inline-block"
+                mr="0.5rem">
                 <img
                   src={'pod_' + pod.status + '.gif'}
                   style={{
@@ -339,7 +359,11 @@ const CloningConsoleTemp = (props, context) => {
       <Box display="inline-block" verticalAlign="middle">
         {temp.text}
       </Box>
-      <Button icon="times-circle" float="right" onClick={() => act('cleartemp')} />
+      <Button
+        icon="times-circle"
+        float="right"
+        onClick={() => act('cleartemp')}
+      />
       <Box clear="both" />
     </NoticeBox>
   );
@@ -384,10 +408,18 @@ const CloningConsoleStatus = (props, context) => {
       }>
       <LabeledList>
         <LabeledList.Item label="Scanner">
-          {scanner ? <Box color="good">Connected</Box> : <Box color="bad">Not connected!</Box>}
+          {scanner ? (
+            <Box color="good">Connected</Box>
+          ) : (
+            <Box color="bad">Not connected!</Box>
+          )}
         </LabeledList.Item>
         <LabeledList.Item label="Pods">
-          {numberofpods ? <Box color="good">{numberofpods} connected</Box> : <Box color="bad">None connected!</Box>}
+          {numberofpods ? (
+            <Box color="good">{numberofpods} connected</Box>
+          ) : (
+            <Box color="bad">None connected!</Box>
+          )}
         </LabeledList.Item>
       </LabeledList>
     </Section>
diff --git a/tgui/packages/tgui_ch/interfaces/ColorMate.js b/tgui/packages/tgui_ch/interfaces/ColorMate.js
index 6422e8fcf8..e1e2e5400d 100644
--- a/tgui/packages/tgui_ch/interfaces/ColorMate.js
+++ b/tgui/packages/tgui_ch/interfaces/ColorMate.js
@@ -76,12 +76,33 @@ export const ColorMate = (props, context) => {
               <center>Coloring: {item.name}</center>
               <Table mt={1}>
                 <Table.Cell width="33%">
-                  <Button fluid content="Paint" icon="fill" onClick={() => act('paint')} />
-                  <Button fluid content="Clear" icon="eraser" onClick={() => act('clear')} />
-                  <Button fluid content="Eject" icon="eject" onClick={() => act('drop')} />
+                  <Button
+                    fluid
+                    content="Paint"
+                    icon="fill"
+                    onClick={() => act('paint')}
+                  />
+                  <Button
+                    fluid
+                    content="Clear"
+                    icon="eraser"
+                    onClick={() => act('clear')}
+                  />
+                  <Button
+                    fluid
+                    content="Eject"
+                    icon="eject"
+                    onClick={() => act('drop')}
+                  />
                 </Table.Cell>
                 <Table.Cell width="66%">
-                  {activemode === 1 ? <ColorMateTint /> : activemode === 2 ? <ColorMateHSV /> : <ColorMateMatrix />}
+                  {activemode === 1 ? (
+                    <ColorMateTint />
+                  ) : activemode === 2 ? (
+                    <ColorMateHSV />
+                  ) : (
+                    <ColorMateMatrix />
+                  )}
                 </Table.Cell>
               </Table>
             </>
@@ -96,7 +117,14 @@ export const ColorMate = (props, context) => {
 
 export const ColorMateTint = (props, context) => {
   const { act, data } = useBackend(context);
-  return <Button fluid content="Select new color" icon="paint-brush" onClick={() => act('choose_color')} />;
+  return (
+    <Button
+      fluid
+      content="Select new color"
+      icon="paint-brush"
+      onClick={() => act('choose_color')}
+    />
+  );
 };
 
 export const ColorMateMatrix = (props, context) => {
@@ -305,9 +333,11 @@ export const ColorMateMatrix = (props, context) => {
         </Table.Row>
       </Table.Cell>
       <Table.Cell width="40%">
-        <Icon name="question-circle" color="blue" /> RG means red will become this much green.
+        <Icon name="question-circle" color="blue" /> RG means red will become
+        this much green.
         <br />
-        <Icon name="question-circle" color="blue" /> CR means this much red will be added.
+        <Icon name="question-circle" color="blue" /> CR means this much red will
+        be added.
       </Table.Cell>
     </Table>
   );
diff --git a/tgui/packages/tgui_ch/interfaces/CommunicationsConsole.js b/tgui/packages/tgui_ch/interfaces/CommunicationsConsole.js
index 9da53f5070..332c72013d 100644
--- a/tgui/packages/tgui_ch/interfaces/CommunicationsConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/CommunicationsConsole.js
@@ -107,7 +107,12 @@ const CommunicationsConsoleMain = (props, context) => {
                 disabled={!authmax || cc_cooldown > 0}
                 onClick={() => act('MessageSyndicate')}
               />
-              <Button icon="sync-alt" content="Reset Relays" disabled={!authmax} onClick={() => act('RestoreBackup')} />
+              <Button
+                icon="sync-alt"
+                content="Reset Relays"
+                disabled={!authmax}
+                onClick={() => act('RestoreBackup')}
+              />
             </LabeledList.Item>
           )) || (
             <LabeledList.Item label="Transmit">
@@ -126,7 +131,9 @@ const CommunicationsConsoleMain = (props, context) => {
           <LabeledList.Item label="Current Alert" color={security_level_color}>
             {alertLevelText}
           </LabeledList.Item>
-          <LabeledList.Item label="Change Alert">{alertLevelButtons}</LabeledList.Item>
+          <LabeledList.Item label="Change Alert">
+            {alertLevelButtons}
+          </LabeledList.Item>
           <LabeledList.Item label="Displays">
             <Button
               icon="tv"
@@ -161,7 +168,8 @@ const CommunicationsConsoleMain = (props, context) => {
 const CommunicationsConsoleAuth = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { authenticated, is_ai, esc_status, esc_callable, esc_recallable } = data;
+  const { authenticated, is_ai, esc_status, esc_callable, esc_recallable } =
+    data;
 
   let authReadable;
   if (!authenticated) {
@@ -180,12 +188,16 @@ const CommunicationsConsoleAuth = (props, context) => {
     <Fragment>
       <Section title="Authentication">
         <LabeledList>
-          {(is_ai && <LabeledList.Item label="Access Level">AI</LabeledList.Item>) || (
+          {(is_ai && (
+            <LabeledList.Item label="Access Level">AI</LabeledList.Item>
+          )) || (
             <LabeledList.Item label="Actions">
               <Button
                 icon={authenticated ? 'sign-out-alt' : 'id-card'}
                 selected={authenticated}
-                content={authenticated ? 'Log Out (' + authReadable + ')' : 'Log In'}
+                content={
+                  authenticated ? 'Log Out (' + authReadable + ')' : 'Log In'
+                }
                 onClick={() => act('auth')}
               />
             </LabeledList.Item>
@@ -194,7 +206,9 @@ const CommunicationsConsoleAuth = (props, context) => {
       </Section>
       <Section title="Escape Shuttle">
         <LabeledList>
-          {!!esc_status && <LabeledList.Item label="Status">{esc_status}</LabeledList.Item>}
+          {!!esc_status && (
+            <LabeledList.Item label="Status">{esc_status}</LabeledList.Item>
+          )}
           {!!esc_callable && (
             <LabeledList.Item label="Options">
               <Button
@@ -224,7 +238,8 @@ const CommunicationsConsoleAuth = (props, context) => {
 const CommunicationsConsoleMessage = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { message_current, message_deletion_allowed, authenticated, messages } = data;
+  const { message_current, message_deletion_allowed, authenticated, messages } =
+    data;
 
   if (message_current) {
     return (
@@ -249,7 +264,10 @@ const CommunicationsConsoleMessage = (props, context) => {
         <Button
           icon="eye"
           content="View"
-          disabled={!authenticated || (message_current && message_current.title === m.title)}
+          disabled={
+            !authenticated ||
+            (message_current && message_current.title === m.title)
+          }
           onClick={() => act('messagelist', { msgid: m.id })}
         />
         <Button
@@ -265,7 +283,13 @@ const CommunicationsConsoleMessage = (props, context) => {
   return (
     <Section
       title="Messages Received"
-      buttons={<Button icon="arrow-circle-left" content="Back To Main Menu" onClick={() => act('main')} />}>
+      buttons={
+        <Button
+          icon="arrow-circle-left"
+          content="Back To Main Menu"
+          onClick={() => act('main')}
+        />
+      }>
       <LabeledList>
         {(messages.length && messageRows) || (
           <LabeledList.Item label="404" color="bad">
@@ -296,7 +320,13 @@ const CommunicationsConsoleStatusDisplay = (props, context) => {
   return (
     <Section
       title="Modify Status Screens"
-      buttons={<Button icon="arrow-circle-left" content="Back To Main Menu" onClick={() => act('main')} />}>
+      buttons={
+        <Button
+          icon="arrow-circle-left"
+          content="Back To Main Menu"
+          onClick={() => act('main')}
+        />
+      }>
       <LabeledList>
         <LabeledList.Item label="Presets">{presetButtons}</LabeledList.Item>
         <LabeledList.Item label="Message Line 1">
diff --git a/tgui/packages/tgui_ch/interfaces/Communicator.tsx b/tgui/packages/tgui_ch/interfaces/Communicator.tsx
index aef3982c96..6a6580fc47 100644
--- a/tgui/packages/tgui_ch/interfaces/Communicator.tsx
+++ b/tgui/packages/tgui_ch/interfaces/Communicator.tsx
@@ -51,12 +51,21 @@ export const Communicator = (props, context) => {
    * 1: Popup Video
    * 2: Minimized Video
    */
-  const [videoSetting, setVideoSetting] = useLocalState(context, 'videoSetting', 0);
+  const [videoSetting, setVideoSetting] = useLocalState(
+    context,
+    'videoSetting',
+    0
+  );
 
   return (
     <Window width={475} height={700} resizable>
       <Window.Content>
-        {video_comm && <VideoComm videoSetting={videoSetting} setVideoSetting={setVideoSetting} />}
+        {video_comm && (
+          <VideoComm
+            videoSetting={videoSetting}
+            setVideoSetting={setVideoSetting}
+          />
+        )}
         {(!video_comm || videoSetting !== 0) && (
           <Fragment>
             <CommunicatorHeader />
@@ -68,7 +77,10 @@ export const Communicator = (props, context) => {
               }}>
               {TabToTemplate[currentTab] || <TemplateError />}
             </Box>
-            <CommunicatorFooter videoSetting={videoSetting} setVideoSetting={setVideoSetting} />
+            <CommunicatorFooter
+              videoSetting={videoSetting}
+              setVideoSetting={setVideoSetting}
+            />
           </Fragment>
         )}
       </Window.Content>
@@ -96,7 +108,13 @@ const VideoComm = (props, context) => {
         />
         <Flex justify="space-between" spacing={1} mt={0.5}>
           <Flex.Item grow={1}>
-            <Button textAlign="center" fluid fontSize={1.5} icon="window-minimize" onClick={() => setVideoSetting(1)} />
+            <Button
+              textAlign="center"
+              fluid
+              fontSize={1.5}
+              icon="window-minimize"
+              onClick={() => setVideoSetting(1)}
+            />
           </Flex.Item>
           <Flex.Item grow={1}>
             <Button
@@ -191,7 +209,11 @@ const TemplateError = (props, context) => {
 
   const { currentTab } = data;
 
-  return <Section title="Error!">You tried to access tab #{currentTab}, but there was no template defined!</Section>;
+  return (
+    <Section title="Error!">
+      You tried to access tab #{currentTab}, but there was no template defined!
+    </Section>
+  );
 };
 
 const CommunicatorHeader = (props, context) => {
@@ -280,7 +302,13 @@ const hasNotifications = (app, context) => {
   } = data;
 
   if (app === 'Phone') {
-    if (voice_mobs.length || communicating.length || requestsReceived.length || invitesSent.length || video_comm) {
+    if (
+      voice_mobs.length ||
+      communicating.length ||
+      requestsReceived.length ||
+      invitesSent.length ||
+      video_comm
+    ) {
       return true;
     }
   }
@@ -335,7 +363,12 @@ TabToTemplate[HOMETAB] = <HomeTab />;
 type PhoneTabData = {
   targetAddress: string;
   voice_mobs: { name: string; true_name: string; ref: string }[];
-  communicating: { address: string; name: string; true_name: string; ref: string }[];
+  communicating: {
+    address: string;
+    name: string;
+    true_name: string;
+    ref: string;
+  }[];
   requestsReceived: { address: string; name: string; ref: string }[];
   invitesSent: { address: string; name: string }[];
   video_comm: string;
@@ -346,7 +379,15 @@ type PhoneTabData = {
 const PhoneTab = (props, context) => {
   const { act, data } = useBackend<PhoneTabData>(context);
 
-  const { targetAddress, voice_mobs, communicating, requestsReceived, invitesSent, video_comm, selfie_mode } = data;
+  const {
+    targetAddress,
+    voice_mobs,
+    communicating,
+    requestsReceived,
+    invitesSent,
+    video_comm,
+    selfie_mode,
+  } = data;
 
   return (
     <Section title="Phone">
@@ -354,10 +395,17 @@ const PhoneTab = (props, context) => {
         <LabeledList.Item label="Target EPv2 Address" verticalAlign="middle">
           <Flex align="center">
             <Flex.Item grow={1}>
-              <Input fluid value={targetAddress} onInput={(e, val) => act('write_target_address', { val: val })} />
+              <Input
+                fluid
+                value={targetAddress}
+                onInput={(e, val) => act('write_target_address', { val: val })}
+              />
             </Flex.Item>
             <Flex.Item>
-              <Button icon="times" onClick={() => act('clear_target_address')} />
+              <Button
+                icon="times"
+                onClick={() => act('clear_target_address')}
+              />
             </Flex.Item>
           </Flex>
         </LabeledList.Item>
@@ -368,7 +416,9 @@ const PhoneTab = (props, context) => {
           <LabeledList.Item label="Camera Mode">
             <Button
               fluid
-              content={selfie_mode ? 'Front-facing Camera' : 'Rear-facing Camera'}
+              content={
+                selfie_mode ? 'Front-facing Camera' : 'Rear-facing Camera'
+              }
               onClick={() => act('selfie_mode')}
             />
           </LabeledList.Item>
@@ -377,12 +427,16 @@ const PhoneTab = (props, context) => {
           {(!!voice_mobs.length && (
             <LabeledList>
               {voice_mobs.map((mob) => (
-                <LabeledList.Item label={decodeHtmlEntities(mob.name)} key={mob.ref}>
+                <LabeledList.Item
+                  label={decodeHtmlEntities(mob.name)}
+                  key={mob.ref}>
                   <Button
                     icon="times"
                     color="bad"
                     content="Disconnect"
-                    onClick={() => act('disconnect', { disconnect: mob.true_name })}
+                    onClick={() =>
+                      act('disconnect', { disconnect: mob.true_name })
+                    }
                   />
                 </LabeledList.Item>
               ))}
@@ -394,19 +448,25 @@ const PhoneTab = (props, context) => {
             <Table>
               {communicating.map((comm) => (
                 <Table.Row key={comm.address}>
-                  <Table.Cell color="label">{decodeHtmlEntities(comm.name)}</Table.Cell>
+                  <Table.Cell color="label">
+                    {decodeHtmlEntities(comm.name)}
+                  </Table.Cell>
                   <Table.Cell>
                     <Button
                       icon="times"
                       color="bad"
                       content="Disconnect"
-                      onClick={() => act('disconnect', { disconnect: comm.true_name })}
+                      onClick={() =>
+                        act('disconnect', { disconnect: comm.true_name })
+                      }
                     />
                     {(video_comm === null && (
                       <Button
                         icon="camera"
                         content="Start Video"
-                        onClick={() => act('startvideo', { startvideo: comm.ref })}
+                        onClick={() =>
+                          act('startvideo', { startvideo: comm.ref })
+                        }
                       />
                     )) ||
                       (video_comm === comm.ref && (
@@ -414,7 +474,9 @@ const PhoneTab = (props, context) => {
                           icon="times"
                           color="bad"
                           content="Stop Video"
-                          onClick={() => act('endvideo', { endvideo: comm.true_name })}
+                          onClick={() =>
+                            act('endvideo', { endvideo: comm.true_name })
+                          }
                         />
                       ))}
                   </Table.Cell>
@@ -427,11 +489,21 @@ const PhoneTab = (props, context) => {
           {(!!requestsReceived.length && (
             <LabeledList>
               {requestsReceived.map((request) => (
-                <LabeledList.Item label={decodeHtmlEntities(request.name)} key={request.address}>
+                <LabeledList.Item
+                  label={decodeHtmlEntities(request.name)}
+                  key={request.address}>
                   <Box>{decodeHtmlEntities(request.address)}</Box>
                   <Box>
-                    <Button icon="signal" content="Accept" onClick={() => act('dial', { dial: request.address })} />
-                    <Button icon="times" content="Decline" onClick={() => act('decline', { decline: request.ref })} />
+                    <Button
+                      icon="signal"
+                      content="Accept"
+                      onClick={() => act('dial', { dial: request.address })}
+                    />
+                    <Button
+                      icon="times"
+                      content="Decline"
+                      onClick={() => act('decline', { decline: request.ref })}
+                    />
                   </Box>
                 </LabeledList.Item>
               ))}
@@ -442,7 +514,9 @@ const PhoneTab = (props, context) => {
           {(!!invitesSent.length && (
             <LabeledList>
               {invitesSent.map((invite) => (
-                <LabeledList.Item label={decodeHtmlEntities(invite.name)} key={invite.address}>
+                <LabeledList.Item
+                  label={decodeHtmlEntities(invite.name)}
+                  key={invite.address}>
                   <Box>{decodeHtmlEntities(invite.address)}</Box>
                   <Box>
                     <Button
@@ -469,10 +543,33 @@ const NumberPad = (props, context) => {
 
   const { targetAddress } = data;
 
-  const validCharacters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
+  const validCharacters = [
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    'A',
+    'B',
+    'C',
+    'D',
+    'E',
+    'F',
+  ];
 
   let buttonArray = validCharacters.map((char) => (
-    <Button key={char} content={char} fontSize={2} fluid onClick={() => act('add_hex', { add_hex: char })} />
+    <Button
+      key={char}
+      content={char}
+      fontSize={2}
+      fluid
+      onClick={() => act('add_hex', { add_hex: char })}
+    />
   ));
 
   let finalArray: any[] = [];
@@ -495,8 +592,18 @@ const NumberPad = (props, context) => {
         <Flex width="100%" justify="space-between">
           {/* Dial */}
           <Flex.Item basis="33%">
-            <Button width="100%" height="64px" position="relative" onClick={() => act('dial', { dial: targetAddress })}>
-              <Icon name="phone" position="absolute" size={3} top="25%" left="25%" />
+            <Button
+              width="100%"
+              height="64px"
+              position="relative"
+              onClick={() => act('dial', { dial: targetAddress })}>
+              <Icon
+                name="phone"
+                position="absolute"
+                size={3}
+                top="25%"
+                left="25%"
+              />
             </Button>
             <Box textAlign="center">Dial</Box>
           </Flex.Item>
@@ -510,14 +617,30 @@ const NumberPad = (props, context) => {
                 act('message', { message: targetAddress });
                 act('switch_tab', { switch_tab: MESSTAB });
               }}>
-              <Icon name="comment-alt" position="absolute" size={3} top="25%" left="25%" />
+              <Icon
+                name="comment-alt"
+                position="absolute"
+                size={3}
+                top="25%"
+                left="25%"
+              />
             </Button>
             <Box textAlign="center">Message</Box>
           </Flex.Item>
           {/* Hang Up */}
           <Flex.Item basis="33%">
-            <Button width="100%" height="64px" position="relative" onClick={() => act('hang_up')}>
-              <Icon name="times" position="absolute" size={3} top="25%" left="25%" />
+            <Button
+              width="100%"
+              height="64px"
+              position="relative"
+              onClick={() => act('hang_up')}>
+              <Icon
+                name="times"
+                position="absolute"
+                size={3}
+                top="25%"
+                left="25%"
+              />
             </Button>
             <Box textAlign="center">Hang Up</Box>
           </Flex.Item>
@@ -642,7 +765,12 @@ const MessagingTab = (props, context) => {
       )) || (
         <Box>
           You haven&apos;t sent any messages yet.
-          <Button fluid icon="user" onClick={() => act('switch_tab', { switch_tab: CONTTAB })} content="Contacts" />
+          <Button
+            fluid
+            icon="user"
+            onClick={() => act('switch_tab', { switch_tab: CONTTAB })}
+            content="Contacts"
+          />
         </Box>
       )}
     </Section>
@@ -668,7 +796,9 @@ const enforceLengthLimit = (prefix: string, name: string, length: number) => {
 
 const findClassMessage = (im, targetAddress, lastIndex, filterArray) => {
   if (lastIndex < 0 || lastIndex > filterArray.length) {
-    return IsIMOurs(im, targetAddress) ? 'TinderMessage_First_Sent' : 'TinderMessage_First_Received';
+    return IsIMOurs(im, targetAddress)
+      ? 'TinderMessage_First_Sent'
+      : 'TinderMessage_First_Received';
   }
 
   let thisSent = IsIMOurs(im, targetAddress);
@@ -686,7 +816,11 @@ const MessagingThreadTab = (props, context) => {
 
   const { targetAddressName, targetAddress, imList } = data;
 
-  const [clipboardMode, setClipboardMode] = useLocalState(context, 'clipboardMode', false);
+  const [clipboardMode, setClipboardMode] = useLocalState(
+    context,
+    'clipboardMode',
+    false
+  );
 
   if (clipboardMode) {
     return (
@@ -699,7 +833,11 @@ const MessagingThreadTab = (props, context) => {
               'overflow-x': 'hidden',
             }}
             width="90%">
-            {enforceLengthLimit('Conversation with ', decodeHtmlEntities(targetAddressName), 30)}
+            {enforceLengthLimit(
+              'Conversation with ',
+              decodeHtmlEntities(targetAddressName),
+              30
+            )}
           </Box>
         }
         buttons={
@@ -720,16 +858,25 @@ const MessagingThreadTab = (props, context) => {
           }}>
           {imList.map(
             (im, i) =>
-              (im.to_address === targetAddress || im.address === targetAddress) && (
+              (im.to_address === targetAddress ||
+                im.address === targetAddress) && (
                 <Box
                   key={i}
-                  className={IsIMOurs(im, targetAddress) ? 'ClassicMessage_Sent' : 'ClassicMessage_Received'}>
+                  className={
+                    IsIMOurs(im, targetAddress)
+                      ? 'ClassicMessage_Sent'
+                      : 'ClassicMessage_Received'
+                  }>
                   {IsIMOurs(im, targetAddress) ? 'You' : 'Them'}: {im.im}
                 </Box>
               )
           )}
         </Section>
-        <Button icon="comment" onClick={() => act('message', { 'message': targetAddress })} content="Message" />
+        <Button
+          icon="comment"
+          onClick={() => act('message', { 'message': targetAddress })}
+          content="Message"
+        />
       </Section>
     );
   }
@@ -744,7 +891,11 @@ const MessagingThreadTab = (props, context) => {
             'overflow-x': 'hidden',
           }}
           width="100%">
-          {enforceLengthLimit('Conversation with ', decodeHtmlEntities(targetAddressName), 30)}
+          {enforceLengthLimit(
+            'Conversation with ',
+            decodeHtmlEntities(targetAddressName),
+            30
+          )}
         </Box>
       }
       buttons={
@@ -765,16 +916,32 @@ const MessagingThreadTab = (props, context) => {
         }}>
         {imList.map(
           (im, i, filterArr) =>
-            (im.to_address === targetAddress || im.address === targetAddress) && (
-              <Box textAlign={IsIMOurs(im, targetAddress) ? 'right' : 'left'} mb={1} key={i}>
-                <Box maxWidth="75%" className={findClassMessage(im, targetAddress, i - 1, filterArr)} inline>
+            (im.to_address === targetAddress ||
+              im.address === targetAddress) && (
+              <Box
+                textAlign={IsIMOurs(im, targetAddress) ? 'right' : 'left'}
+                mb={1}
+                key={i}>
+                <Box
+                  maxWidth="75%"
+                  className={findClassMessage(
+                    im,
+                    targetAddress,
+                    i - 1,
+                    filterArr
+                  )}
+                  inline>
                   {decodeHtmlEntities(im.im)}
                 </Box>
               </Box>
             )
         )}
       </Section>
-      <Button icon="comment" onClick={() => act('message', { 'message': targetAddress })} content="Message" />
+      <Button
+        icon="comment"
+        onClick={() => act('message', { 'message': targetAddress })}
+        content="Message"
+      />
     </Section>
   );
 };
@@ -808,7 +975,11 @@ const NewsTab = (props, context) => {
 
   return (
     <Section title="News" stretchContents height="100%">
-      {(!feeds.length && <Box color="bad">Error: No newsfeeds available. Please try again later.</Box>) ||
+      {(!feeds.length && (
+        <Box color="bad">
+          Error: No newsfeeds available. Please try again later.
+        </Box>
+      )) ||
         (target_feed && <NewsTargetFeed />) || <NewsFeed />}
     </Section>
   );
@@ -821,8 +992,18 @@ const NewsTargetFeed = (props, context) => {
 
   return (
     <Section
-      title={decodeHtmlEntities(target_feed.name) + ' by ' + decodeHtmlEntities(target_feed.author)}
-      buttons={<Button content="Back" icon="chevron-up" onClick={() => act('newsfeed', { newsfeed: null })} />}>
+      title={
+        decodeHtmlEntities(target_feed.name) +
+        ' by ' +
+        decodeHtmlEntities(target_feed.author)
+      }
+      buttons={
+        <Button
+          content="Back"
+          icon="chevron-up"
+          onClick={() => act('newsfeed', { newsfeed: null })}
+        />
+      }>
       {target_feed.messages.map((message) => (
         <Section key={message.ref}>
           - {decodeHtmlEntities(message.body)}
@@ -833,7 +1014,8 @@ const NewsTargetFeed = (props, context) => {
             </Box>
           )}
           <Box color="grey">
-            [{message.message_type} by {decodeHtmlEntities(message.author)} - {message.time_stamp}]
+            [{message.message_type} by {decodeHtmlEntities(message.author)} -{' '}
+            {message.time_stamp}]
           </Box>
         </Section>
       ))}
@@ -911,7 +1093,9 @@ const NoteTab = (props, context) => {
       title="Note Keeper"
       height="100%"
       stretchContents
-      buttons={<Button icon="pen" onClick={() => act('edit')} content="Edit Notes" />}>
+      buttons={
+        <Button icon="pen" onClick={() => act('edit')} content="Edit Notes" />
+      }>
       <Section
         color="average"
         width="100%"
@@ -978,13 +1162,22 @@ const WeatherTab = (props, context) => {
     <Section title="Weather">
       <Section title="Current Conditions">
         <LabeledList>
-          {filter((i: AirContent) => i.val !== '0' || i.entry === 'Pressure' || i.entry === 'Temperature')(
-            aircontents
-          ).map((item: AirContent) => (
+          {filter(
+            (i: AirContent) =>
+              i.val !== '0' ||
+              i.entry === 'Pressure' ||
+              i.entry === 'Temperature'
+          )(aircontents).map((item: AirContent) => (
             <LabeledList.Item
               key={item.entry}
               label={item.entry}
-              color={getItemColor(item.val, item.bad_low, item.poor_low, item.poor_high, item.bad_high)}>
+              color={getItemColor(
+                item.val,
+                item.bad_low,
+                item.poor_low,
+                item.poor_high,
+                item.bad_high
+              )}>
               {item.val}
               {decodeHtmlEntities(item.units)}
             </LabeledList.Item>
@@ -998,19 +1191,31 @@ const WeatherTab = (props, context) => {
               <LabeledList.Item label={wr.Planet} key={wr.Planet}>
                 <LabeledList>
                   <LabeledList.Item label="Time">{wr.Time}</LabeledList.Item>
-                  <LabeledList.Item label="Weather">{toTitleCase(wr.Weather)}</LabeledList.Item>
-                  <LabeledList.Item label="Temperature">
-                    Current: {wr.Temperature.toFixed()}&deg;C | High: {wr.High.toFixed()}&deg;C | Low:{' '}
-                    {wr.Low.toFixed()}&deg;C
+                  <LabeledList.Item label="Weather">
+                    {toTitleCase(wr.Weather)}
+                  </LabeledList.Item>
+                  <LabeledList.Item label="Temperature">
+                    Current: {wr.Temperature.toFixed()}&deg;C | High:{' '}
+                    {wr.High.toFixed()}&deg;C | Low: {wr.Low.toFixed()}&deg;C
+                  </LabeledList.Item>
+                  <LabeledList.Item label="Wind Direction">
+                    {wr.WindDir}
+                  </LabeledList.Item>
+                  <LabeledList.Item label="Wind Speed">
+                    {wr.WindSpeed}
+                  </LabeledList.Item>
+                  <LabeledList.Item label="Forecast">
+                    {decodeHtmlEntities(wr.Forecast)}
                   </LabeledList.Item>
-                  <LabeledList.Item label="Wind Direction">{wr.WindDir}</LabeledList.Item>
-                  <LabeledList.Item label="Wind Speed">{wr.WindSpeed}</LabeledList.Item>
-                  <LabeledList.Item label="Forecast">{decodeHtmlEntities(wr.Forecast)}</LabeledList.Item>
                 </LabeledList>
               </LabeledList.Item>
             ))}
           </LabeledList>
-        )) || <Box color="bad">No weather reports available. Please check back later.</Box>}
+        )) || (
+          <Box color="bad">
+            No weather reports available. Please check back later.
+          </Box>
+        )}
       </Section>
     </Section>
   );
@@ -1036,13 +1241,26 @@ type SettingsTabData = {
 const SettingsTab = (props, context) => {
   const { act, data } = useBackend<SettingsTabData>(context);
 
-  const { owner, occupation, connectionStatus, address, visible, ring, selfie_mode } = data;
+  const {
+    owner,
+    occupation,
+    connectionStatus,
+    address,
+    visible,
+    ring,
+    selfie_mode,
+  } = data;
 
   return (
     <Section title="Settings">
       <LabeledList>
         <LabeledList.Item label="Owner">
-          <Button icon="pen" fluid content={decodeHtmlEntities(owner)} onClick={() => act('rename')} />
+          <Button
+            icon="pen"
+            fluid
+            content={decodeHtmlEntities(owner)}
+            onClick={() => act('rename')}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Camera Mode">
           <Button
@@ -1051,18 +1269,28 @@ const SettingsTab = (props, context) => {
             onClick={() => act('selfie_mode')}
           />
         </LabeledList.Item>
-        <LabeledList.Item label="Occupation">{decodeHtmlEntities(occupation)}</LabeledList.Item>
-        <LabeledList.Item label="Connection">
-          {connectionStatus === 1 ? <Box color="good">Connected</Box> : <Box color="bad">Disconnected</Box>}
+        <LabeledList.Item label="Occupation">
+          {decodeHtmlEntities(occupation)}
+        </LabeledList.Item>
+        <LabeledList.Item label="Connection">
+          {connectionStatus === 1 ? (
+            <Box color="good">Connected</Box>
+          ) : (
+            <Box color="bad">Disconnected</Box>
+          )}
+        </LabeledList.Item>
+        <LabeledList.Item label="Device EPv2 Address">
+          {address}
         </LabeledList.Item>
-        <LabeledList.Item label="Device EPv2 Address">{address}</LabeledList.Item>
         <LabeledList.Item label="Visibility">
           <Button.Checkbox
             checked={visible}
             selected={visible}
             fluid
             content={
-              visible ? 'This device can be seen by other devices.' : 'This device is invisible to other devices.'
+              visible
+                ? 'This device can be seen by other devices.'
+                : 'This device is invisible to other devices.'
             }
             onClick={() => act('toggle_visibility')}
           />
@@ -1075,7 +1303,11 @@ const SettingsTab = (props, context) => {
             content={ring ? 'Ringer on.' : 'Ringer off.'}
             onClick={() => act('toggle_ringer')}
           />
-          <Button fluid content="Set Ringer Tone" onClick={() => act('set_ringer_tone')} />
+          <Button
+            fluid
+            content="Set Ringer Tone"
+            onClick={() => act('set_ringer_tone')}
+          />
         </LabeledList.Item>
       </LabeledList>
     </Section>
diff --git a/tgui/packages/tgui_ch/interfaces/ComputerFabricator.js b/tgui/packages/tgui_ch/interfaces/ComputerFabricator.js
index 296bf698a4..3bf5f8bc4d 100644
--- a/tgui/packages/tgui_ch/interfaces/ComputerFabricator.js
+++ b/tgui/packages/tgui_ch/interfaces/ComputerFabricator.js
@@ -12,7 +12,13 @@ export const ComputerFabricator = (props, context) => {
           Your perfect device, only three steps away...
         </Section>
         {data.state !== 0 && (
-          <Button fluid mb={1} icon="circle" content="Clear Order" onClick={() => act('clean_order')} />
+          <Button
+            fluid
+            mb={1}
+            icon="circle"
+            content="Clear Order"
+            onClick={() => act('clean_order')}
+          />
         )}
         {data.state === 0 && <CfStep1 />}
         {data.state === 1 && <CfStep2 />}
@@ -406,7 +412,8 @@ const CfStep4 = (props, context) => {
         Thank you for your purchase!
       </Box>
       <Box italic mt={1} textAlign="center">
-        If you experience any difficulties with your new device, please contact your local network administrator.
+        If you experience any difficulties with your new device, please contact
+        your local network administrator.
       </Box>
     </Section>
   );
diff --git a/tgui/packages/tgui_ch/interfaces/CookingAppliance.js b/tgui/packages/tgui_ch/interfaces/CookingAppliance.js
index e4ec8cda7d..6c81f9ff81 100644
--- a/tgui/packages/tgui_ch/interfaces/CookingAppliance.js
+++ b/tgui/packages/tgui_ch/interfaces/CookingAppliance.js
@@ -5,7 +5,14 @@ import { Window } from '../layouts';
 export const CookingAppliance = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { temperature, optimalTemp, temperatureEnough, efficiency, containersRemovable, our_contents } = data;
+  const {
+    temperature,
+    optimalTemp,
+    temperatureEnough,
+    efficiency,
+    containersRemovable,
+    our_contents,
+  } = data;
 
   return (
     <Window width={600} height={600} resizable>
@@ -13,7 +20,10 @@ export const CookingAppliance = (props, context) => {
         <Section title="Status">
           <LabeledList>
             <LabeledList.Item label="Temperature">
-              <ProgressBar color={temperatureEnough ? 'good' : 'blue'} value={temperature} maxValue={optimalTemp}>
+              <ProgressBar
+                color={temperatureEnough ? 'good' : 'blue'}
+                value={temperature}
+                maxValue={optimalTemp}>
                 <AnimatedNumber value={temperature} />
                 &deg;C / {optimalTemp}&deg;C
               </ProgressBar>
@@ -29,21 +39,31 @@ export const CookingAppliance = (props, context) => {
               if (content.empty) {
                 return (
                   <LabeledList.Item label={'Slot #' + (i + 1)}>
-                    <Button onClick={() => act('slot', { slot: i + 1 })}>Empty</Button>
+                    <Button onClick={() => act('slot', { slot: i + 1 })}>
+                      Empty
+                    </Button>
                   </LabeledList.Item>
                 );
               }
 
               return (
-                <LabeledList.Item label={'Slot #' + (i + 1)} verticalAlign="middle" key={i}>
+                <LabeledList.Item
+                  label={'Slot #' + (i + 1)}
+                  verticalAlign="middle"
+                  key={i}>
                   <Flex spacing={1}>
                     <Flex.Item>
-                      <Button disabled={!containersRemovable} onClick={() => act('slot', { slot: i + 1 })}>
+                      <Button
+                        disabled={!containersRemovable}
+                        onClick={() => act('slot', { slot: i + 1 })}>
                         {content.container || 'No Container'}
                       </Button>
                     </Flex.Item>
                     <Flex.Item grow={1}>
-                      <ProgressBar color={content.progressText[0]} value={content.progress} maxValue={1}>
+                      <ProgressBar
+                        color={content.progressText[0]}
+                        value={content.progress}
+                        maxValue={1}>
                         {content.progressText[1]}
                       </ProgressBar>
                     </Flex.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/CrewManifest.tsx b/tgui/packages/tgui_ch/interfaces/CrewManifest.tsx
index b717a3ce4a..fb5f69a6e1 100644
--- a/tgui/packages/tgui_ch/interfaces/CrewManifest.tsx
+++ b/tgui/packages/tgui_ch/interfaces/CrewManifest.tsx
@@ -28,7 +28,10 @@ export const CrewManifest = () => {
 };
 
 type Data = {
-  manifest: { elems: { name: string; rank: string; active: string }[]; cat: string }[];
+  manifest: {
+    elems: { name: string; rank: string; active: string }[];
+    cat: string;
+  }[];
 };
 
 export const CrewManifestContent = (props, context) => {
@@ -43,7 +46,11 @@ export const CrewManifestContent = (props, context) => {
           !!cat.elems.length && (
             <Section
               title={
-                <Box backgroundColor={COLORS.manifest[cat.cat.toLowerCase()]} m={-1} pt={1} pb={1}>
+                <Box
+                  backgroundColor={COLORS.manifest[cat.cat.toLowerCase()]}
+                  m={-1}
+                  pt={1}
+                  pb={1}>
                   <Box ml={1} textAlign="center" fontSize={1.4}>
                     {cat.cat}
                   </Box>
diff --git a/tgui/packages/tgui_ch/interfaces/CrewMonitor.js b/tgui/packages/tgui_ch/interfaces/CrewMonitor.js
index dc9a3bd4bf..016e377fec 100644
--- a/tgui/packages/tgui_ch/interfaces/CrewMonitor.js
+++ b/tgui/packages/tgui_ch/interfaces/CrewMonitor.js
@@ -41,9 +41,12 @@ export const CrewMonitorContent = (props, context) => {
   const { act, data, config } = useBackend(context);
   const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
 
-  const crew = flow([sortBy((cm) => cm.name), sortBy((cm) => cm?.x), sortBy((cm) => cm?.y), sortBy((cm) => cm?.realZ)])(
-    data.crewmembers || []
-  );
+  const crew = flow([
+    sortBy((cm) => cm.name),
+    sortBy((cm) => cm?.x),
+    sortBy((cm) => cm?.y),
+    sortBy((cm) => cm?.realZ),
+  ])(data.crewmembers || []);
 
   const [zoom, setZoom] = useLocalState(context, 'zoom', 1);
 
@@ -124,10 +127,16 @@ export const CrewMonitorContent = (props, context) => {
   return (
     <Fragment>
       <Tabs>
-        <Tabs.Tab key="DataView" selected={0 === tabIndex} onClick={() => setTabIndex(0)}>
+        <Tabs.Tab
+          key="DataView"
+          selected={0 === tabIndex}
+          onClick={() => setTabIndex(0)}>
           <Icon name="table" /> Data View
         </Tabs.Tab>
-        <Tabs.Tab key="MapView" selected={1 === tabIndex} onClick={() => setTabIndex(1)}>
+        <Tabs.Tab
+          key="MapView"
+          selected={1 === tabIndex}
+          onClick={() => setTabIndex(1)}>
           <Icon name="map-marked-alt" /> Map View
         </Tabs.Tab>
       </Tabs>
@@ -143,7 +152,9 @@ const CrewMonitorMapView = (props, context) => {
     <Box height="526px" mb="0.5rem" overflow="hidden">
       <NanoMap onZoom={(v) => setZoom(v)}>
         {data.crewmembers
-          .filter((x) => x.sensor_type === 3 && ~~x.realZ === ~~config.mapZLevel)
+          .filter(
+            (x) => x.sensor_type === 3 && ~~x.realZ === ~~config.mapZLevel
+          )
           .map((cm) => (
             <NanoMap.Marker
               key={cm.ref}
diff --git a/tgui/packages/tgui_ch/interfaces/Cryo.js b/tgui/packages/tgui_ch/interfaces/Cryo.js
index 2796221100..7d82854201 100644
--- a/tgui/packages/tgui_ch/interfaces/Cryo.js
+++ b/tgui/packages/tgui_ch/interfaces/Cryo.js
@@ -40,20 +40,32 @@ export const Cryo = (props, context) => {
 
 const CryoContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const { isOperating, hasOccupant, occupant = [], cellTemperature, cellTemperatureStatus, isBeakerLoaded } = data;
+  const {
+    isOperating,
+    hasOccupant,
+    occupant = [],
+    cellTemperature,
+    cellTemperatureStatus,
+    isBeakerLoaded,
+  } = data;
   return (
     <Fragment>
       <Section
         title="Occupant"
         flexGrow="1"
         buttons={
-          <Button icon="user-slash" onClick={() => act('ejectOccupant')} disabled={!hasOccupant}>
+          <Button
+            icon="user-slash"
+            onClick={() => act('ejectOccupant')}
+            disabled={!hasOccupant}>
             Eject
           </Button>
         }>
         {hasOccupant ? (
           <LabeledList>
-            <LabeledList.Item label="Occupant">{occupant.name || 'Unknown'}</LabeledList.Item>
+            <LabeledList.Item label="Occupant">
+              {occupant.name || 'Unknown'}
+            </LabeledList.Item>
             <LabeledList.Item label="Health">
               <ProgressBar
                 min={occupant.health}
@@ -63,7 +75,9 @@ const CryoContent = (props, context) => {
                 <AnimatedNumber value={Math.round(occupant.health)} />
               </ProgressBar>
             </LabeledList.Item>
-            <LabeledList.Item label="Status" color={statNames[occupant.stat][0]}>
+            <LabeledList.Item
+              label="Status"
+              color={statNames[occupant.stat][0]}>
               {statNames[occupant.stat][1]}
             </LabeledList.Item>
             <LabeledList.Item label="Temperature">
@@ -73,8 +87,12 @@ const CryoContent = (props, context) => {
             <LabeledList.Divider />
             {damageTypes.map((damageType) => (
               <LabeledList.Item key={damageType.id} label={damageType.label}>
-                <ProgressBar value={occupant[damageType.type] / 100} ranges={{ bad: [0.01, Infinity] }}>
-                  <AnimatedNumber value={Math.round(occupant[damageType.type])} />
+                <ProgressBar
+                  value={occupant[damageType.type] / 100}
+                  ranges={{ bad: [0.01, Infinity] }}>
+                  <AnimatedNumber
+                    value={Math.round(occupant[damageType.type])}
+                  />
                 </ProgressBar>
               </LabeledList.Item>
             ))}
@@ -92,13 +110,19 @@ const CryoContent = (props, context) => {
       <Section
         title="Cell"
         buttons={
-          <Button icon="eject" onClick={() => act('ejectBeaker')} disabled={!isBeakerLoaded}>
+          <Button
+            icon="eject"
+            onClick={() => act('ejectBeaker')}
+            disabled={!isBeakerLoaded}>
             Eject Beaker
           </Button>
         }>
         <LabeledList>
           <LabeledList.Item label="Power">
-            <Button icon="power-off" onClick={() => act(isOperating ? 'switchOff' : 'switchOn')} selected={isOperating}>
+            <Button
+              icon="power-off"
+              onClick={() => act(isOperating ? 'switchOff' : 'switchOn')}
+              selected={isOperating}>
               {isOperating ? 'On' : 'Off'}
             </Button>
           </LabeledList.Item>
@@ -123,7 +147,10 @@ const CryoBeaker = (props, context) => {
         {beakerLabel ? beakerLabel : <Box color="average">No label</Box>}
         <Box color={!beakerVolume && 'bad'}>
           {beakerVolume ? (
-            <AnimatedNumber value={beakerVolume} format={(v) => Math.round(v) + ' units remaining'} />
+            <AnimatedNumber
+              value={beakerVolume}
+              format={(v) => Math.round(v) + ' units remaining'}
+            />
           ) : (
             'Beaker is empty'
           )}
diff --git a/tgui/packages/tgui_ch/interfaces/CryoStorage.js b/tgui/packages/tgui_ch/interfaces/CryoStorage.js
index 8c08dc723b..028f31d1da 100644
--- a/tgui/packages/tgui_ch/interfaces/CryoStorage.js
+++ b/tgui/packages/tgui_ch/interfaces/CryoStorage.js
@@ -62,7 +62,10 @@ export const CryoStorageItems = (props, context) => {
       }>
       {(items.length &&
         items.map((item) => (
-          <Button key={item.ref} icon="hand-rock" onClick={() => act('item', { ref: item.ref })}>
+          <Button
+            key={item.ref}
+            icon="hand-rock"
+            onClick={() => act('item', { ref: item.ref })}>
             {item.name}
           </Button>
         ))) || <Box color="average">No items stored.</Box>}
diff --git a/tgui/packages/tgui_ch/interfaces/DNAForensics.js b/tgui/packages/tgui_ch/interfaces/DNAForensics.js
index 68a431d968..4d60fe72ca 100644
--- a/tgui/packages/tgui_ch/interfaces/DNAForensics.js
+++ b/tgui/packages/tgui_ch/interfaces/DNAForensics.js
@@ -13,10 +13,17 @@ export const DNAForensics = (props, context) => {
           title="Status"
           buttons={
             <Fragment>
-              <Button selected={scanning} disabled={!bloodsamp} icon="power-off" onClick={() => act('scanItem')}>
+              <Button
+                selected={scanning}
+                disabled={!bloodsamp}
+                icon="power-off"
+                onClick={() => act('scanItem')}>
                 {scanning ? 'Halt Scan' : 'Begin Scan'}
               </Button>
-              <Button disabled={!bloodsamp} icon="eject" onClick={() => act('ejectItem')}>
+              <Button
+                disabled={!bloodsamp}
+                icon="eject"
+                onClick={() => act('ejectItem')}>
                 Eject Bloodsample
               </Button>
             </Fragment>
diff --git a/tgui/packages/tgui_ch/interfaces/DNAModifier.js b/tgui/packages/tgui_ch/interfaces/DNAModifier.js
index d29c82645f..85f8f6e0d5 100644
--- a/tgui/packages/tgui_ch/interfaces/DNAModifier.js
+++ b/tgui/packages/tgui_ch/interfaces/DNAModifier.js
@@ -23,7 +23,10 @@ export const DNAModifier = (props, context) => {
   const { act, data } = useBackend(context);
   const { irradiating, dnaBlockSize, occupant } = data;
   context.dnaBlockSize = dnaBlockSize;
-  context.isDNAInvalid = !occupant.isViableSubject || !occupant.uniqueIdentity || !occupant.structuralEnzymes;
+  context.isDNAInvalid =
+    !occupant.isViableSubject ||
+    !occupant.uniqueIdentity ||
+    !occupant.structuralEnzymes;
   let radiatingModal;
   if (irradiating) {
     radiatingModal = <DNAModifierIrradiating duration={irradiating} />;
@@ -92,13 +95,18 @@ const DNAModifierOccupant = (props, context) => {
           {context.isDNAInvalid ? (
             <Box color="bad">
               <Icon name="exclamation-circle" />
-              &nbsp; The occupant&apos;s DNA structure is ruined beyond recognition, please insert a subject with an
-              intact DNA structure.
+              &nbsp; The occupant&apos;s DNA structure is ruined beyond
+              recognition, please insert a subject with an intact DNA structure.
             </Box>
           ) : (
             <LabeledList>
               <LabeledList.Item label="Radiation">
-                <ProgressBar min="0" max="100" value={occupant.radiationLevel / 100} color="average" />
+                <ProgressBar
+                  min="0"
+                  max="100"
+                  value={occupant.radiationLevel / 100}
+                  color="average"
+                />
               </LabeledList.Item>
               <LabeledList.Item label="Unique Enzymes">
                 {data.occupant.uniqueEnzymes ? (
@@ -172,7 +180,10 @@ const DNAModifierMain = (props, context) => {
     <Section flexGrow="1">
       <Tabs>
         {operations.map((op, i) => (
-          <Tabs.Tab key={i} selected={selectedMenuKey === op[0]} onClick={() => act('selectMenuKey', { key: op[0] })}>
+          <Tabs.Tab
+            key={i}
+            selected={selectedMenuKey === op[0]}
+            onClick={() => act('selectMenuKey', { key: op[0] })}>
             <Icon name={op[2]} />
             {op[1]}
           </Tabs.Tab>
@@ -185,7 +196,8 @@ const DNAModifierMain = (props, context) => {
 
 const DNAModifierMainUI = (props, context) => {
   const { act, data } = useBackend(context);
-  const { selectedUIBlock, selectedUISubBlock, selectedUITarget, occupant } = data;
+  const { selectedUIBlock, selectedUISubBlock, selectedUITarget, occupant } =
+    data;
   return (
     <Section title="Modify Unique Identifier" level="2">
       <DNAModifierBlocks
@@ -208,7 +220,12 @@ const DNAModifierMainUI = (props, context) => {
           />
         </LabeledList.Item>
       </LabeledList>
-      <Button icon="radiation" content="Irradiate Block" mt="0.5rem" onClick={() => act('pulseUIRadiation')} />
+      <Button
+        icon="radiation"
+        content="Irradiate Block"
+        mt="0.5rem"
+        onClick={() => act('pulseUIRadiation')}
+      />
     </Section>
   );
 };
@@ -225,7 +242,11 @@ const DNAModifierMainSE = (props, context) => {
         blockSize={context.dnaBlockSize}
         action="selectSEBlock"
       />
-      <Button icon="radiation" content="Irradiate Block" onClick={() => act('pulseSERadiation')} />
+      <Button
+        icon="radiation"
+        content="Irradiate Block"
+        onClick={() => act('pulseSERadiation')}
+      />
     </Section>
   );
 };
@@ -276,7 +297,12 @@ const DNAModifierMainBuffers = (props, context) => {
   const { act, data } = useBackend(context);
   const { buffers } = data;
   let bufferElements = buffers.map((buffer, i) => (
-    <DNAModifierMainBuffersElement key={i} id={i + 1} name={'Buffer ' + (i + 1)} buffer={buffer} />
+    <DNAModifierMainBuffersElement
+      key={i}
+      id={i + 1}
+      name={'Buffer ' + (i + 1)}
+      buffer={buffer}
+    />
   ));
   return (
     <Fragment>
@@ -389,9 +415,13 @@ const DNAModifierMainBuffersElement = (props, context) => {
           </LabeledList.Item>
           {buffer.data ? (
             <Fragment>
-              <LabeledList.Item label="Subject">{buffer.owner || <Box color="average">Unknown</Box>}</LabeledList.Item>
+              <LabeledList.Item label="Subject">
+                {buffer.owner || <Box color="average">Unknown</Box>}
+              </LabeledList.Item>
               <LabeledList.Item label="Data Type">
-                {buffer.type === 'ui' ? 'Unique Identifiers' : 'Structural Enzymes'}
+                {buffer.type === 'ui'
+                  ? 'Unique Identifiers'
+                  : 'Structural Enzymes'}
                 {!!buffer.ue && ' and Unique Enzymes'}
               </LabeledList.Item>
               <LabeledList.Item label="Transfer to">
@@ -462,13 +492,20 @@ const DNAModifierMainBuffersDisk = (props, context) => {
             content="Wipe"
             onClick={() => act('wipeDisk')}
           />
-          <Button disabled={!hasDisk} icon="eject" content="Eject" onClick={() => act('ejectDisk')} />
+          <Button
+            disabled={!hasDisk}
+            icon="eject"
+            content="Eject"
+            onClick={() => act('ejectDisk')}
+          />
         </Fragment>
       }>
       {hasDisk ? (
         disk.data ? (
           <LabeledList>
-            <LabeledList.Item label="Label">{disk.label ? disk.label : 'No label'}</LabeledList.Item>
+            <LabeledList.Item label="Label">
+              {disk.label ? disk.label : 'No label'}
+            </LabeledList.Item>
             <LabeledList.Item label="Subject">
               {disk.owner ? disk.owner : <Box color="average">Unknown</Box>}
             </LabeledList.Item>
@@ -498,7 +535,14 @@ const DNAModifierMainRejuvenators = (props, context) => {
     <Section
       title="Rejuvenators and Beaker"
       level="2"
-      buttons={<Button disabled={!isBeakerLoaded} icon="eject" content="Eject" onClick={() => act('ejectBeaker')} />}>
+      buttons={
+        <Button
+          disabled={!isBeakerLoaded}
+          icon="eject"
+          content="Eject"
+          onClick={() => act('ejectBeaker')}
+        />
+      }>
       {isBeakerLoaded ? (
         <LabeledList>
           <LabeledList.Item label="Inject">
@@ -571,7 +615,8 @@ const DNAModifierIrradiating = (props, context) => {
 
 const DNAModifierBlocks = (props, context) => {
   const { act, data } = useBackend(context);
-  const { dnaString, selectedBlock, selectedSubblock, blockSize, action } = props;
+  const { dnaString, selectedBlock, selectedSubblock, blockSize, action } =
+    props;
 
   const characters = dnaString.split('');
   let curBlock = 0;
@@ -583,7 +628,9 @@ const DNAModifierBlocks = (props, context) => {
       const realSubblock = subblock + 1;
       subBlocks.push(
         <Button
-          selected={selectedBlock === realBlock && selectedSubblock === realSubblock}
+          selected={
+            selectedBlock === realBlock && selectedSubblock === realSubblock
+          }
           content={characters[block + subblock]}
           mb="0"
           onClick={() =>
diff --git a/tgui/packages/tgui_ch/interfaces/DiseaseSplicer.js b/tgui/packages/tgui_ch/interfaces/DiseaseSplicer.js
index 86e4d013ae..f35c7b208f 100644
--- a/tgui/packages/tgui_ch/interfaces/DiseaseSplicer.js
+++ b/tgui/packages/tgui_ch/interfaces/DiseaseSplicer.js
@@ -36,7 +36,14 @@ const DiseaseSplicerVirusDish = (props, context) => {
   return (
     <Section
       title="Virus Dish"
-      buttons={<Button icon="eject" content="Eject Dish" disabled={!dish_inserted} onClick={() => act('eject')} />}>
+      buttons={
+        <Button
+          icon="eject"
+          content="Eject Dish"
+          disabled={!dish_inserted}
+          onClick={() => act('eject')}
+        />
+      }>
       <LabeledList>
         <LabeledList.Item label="Growth Density">
           <ProgressBar
@@ -61,7 +68,8 @@ const DiseaseSplicerVirusDish = (props, context) => {
             {(effects &&
               effects.map((effect) => (
                 <Box color="label" key={effect.stage}>
-                  ({effect.stage}) {effect.name} {effect.badness > 1 ? 'Dangerous!' : null}
+                  ({effect.stage}) {effect.name}{' '}
+                  {effect.badness > 1 ? 'Dangerous!' : null}
                 </Box>
               ))) || <Box>No virus sample loaded.</Box>}
           </Section>
@@ -81,7 +89,11 @@ const DiseaseSplicerVirusDish = (props, context) => {
                 onClick={() => act('grab', { grab: e.reference })}
               />
             ))}
-            <Button content="Species" icon="exchange-alt" onClick={() => act('affected_species')} />
+            <Button
+              content="Species"
+              icon="exchange-alt"
+              onClick={() => act('affected_species')}
+            />
           </Section>
         </Fragment>
       )}
@@ -92,7 +104,16 @@ const DiseaseSplicerVirusDish = (props, context) => {
 const DiseaseSplicerStorage = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { dish_inserted, buffer, species_buffer, effects, info, growth, affected_species, busy } = data;
+  const {
+    dish_inserted,
+    buffer,
+    species_buffer,
+    effects,
+    info,
+    growth,
+    affected_species,
+    busy,
+  } = data;
 
   return (
     <Section title="Storage">
diff --git a/tgui/packages/tgui_ch/interfaces/DishIncubator.js b/tgui/packages/tgui_ch/interfaces/DishIncubator.js
index 5170793f44..1ffc664a8c 100644
--- a/tgui/packages/tgui_ch/interfaces/DishIncubator.js
+++ b/tgui/packages/tgui_ch/interfaces/DishIncubator.js
@@ -30,10 +30,22 @@ export const DishIncubator = (props, context) => {
       <Window.Content scrollable>
         <Section
           title="Environmental Conditions"
-          buttons={<Button icon="power-off" selected={on} content={on ? 'On' : 'Off'} onClick={() => act('power')} />}>
+          buttons={
+            <Button
+              icon="power-off"
+              selected={on}
+              content={on ? 'On' : 'Off'}
+              onClick={() => act('power')}
+            />
+          }>
           <Flex spacing={1} mb={1}>
             <Flex.Item grow={1}>
-              <Button fluid icon="radiation" content="Add Radiation" onClick={() => act('rad')} />
+              <Button
+                fluid
+                icon="radiation"
+                content="Add Radiation"
+                onClick={() => act('rad')}
+              />
             </Flex.Item>
             <Flex.Item grow={1}>
               <Button.Confirm
@@ -64,7 +76,9 @@ export const DishIncubator = (props, context) => {
               <ProgressBar
                 minValue={0}
                 maxValue={100}
-                color={radiation >= 50 ? 'bad' : growth >= 25 ? 'average' : 'good'}
+                color={
+                  radiation >= 50 ? 'bad' : growth >= 25 ? 'average' : 'good'
+                }
                 value={radiation}>
                 {formatCommaNumber(radiation * 10000)} &micro;Sv
               </ProgressBar>
@@ -93,21 +107,37 @@ export const DishIncubator = (props, context) => {
                 disabled={!chemicals_inserted}
                 onClick={() => act('ejectchem')}
               />
-              <Button icon="virus" content="Breed Virus" disabled={!can_breed_virus} onClick={() => act('virus')} />
+              <Button
+                icon="virus"
+                content="Breed Virus"
+                disabled={!can_breed_virus}
+                onClick={() => act('virus')}
+              />
             </Fragment>
           }>
           {(chemicals_inserted && (
             <Box>
               <LabeledList>
                 <LabeledList.Item label="Volume">
-                  <ProgressBar minValue={0} maxValue={max_chemical_volume} value={chemical_volume}>
+                  <ProgressBar
+                    minValue={0}
+                    maxValue={max_chemical_volume}
+                    value={chemical_volume}>
                     {chemical_volume}/{max_chemical_volume}
                   </ProgressBar>
                 </LabeledList.Item>
-                <LabeledList.Item label="Breeding Environment" color={can_breed_virus ? 'good' : 'average'}>
-                  {dish_inserted ? (can_breed_virus ? 'Suitable' : 'No hemolytic samples detected') : 'N/A'}
+                <LabeledList.Item
+                  label="Breeding Environment"
+                  color={can_breed_virus ? 'good' : 'average'}>
+                  {dish_inserted
+                    ? can_breed_virus
+                      ? 'Suitable'
+                      : 'No hemolytic samples detected'
+                    : 'N/A'}
                   {blood_already_infected ? (
-                    <Box color="bad">CAUTION: Viral infection detected in blood sample.</Box>
+                    <Box color="bad">
+                      CAUTION: Viral infection detected in blood sample.
+                    </Box>
                   ) : null}
                 </LabeledList.Item>
               </LabeledList>
@@ -117,7 +147,12 @@ export const DishIncubator = (props, context) => {
         <Section
           title="Virus Dish"
           buttons={
-            <Button icon="eject" content="Eject Dish" disabled={!dish_inserted} onClick={() => act('ejectdish')} />
+            <Button
+              icon="eject"
+              content="Eject Dish"
+              disabled={!dish_inserted}
+              onClick={() => act('ejectdish')}
+            />
           }>
           {dish_inserted ? (
             virus ? (
@@ -134,7 +169,9 @@ export const DishIncubator = (props, context) => {
                     value={growth}
                   />
                 </LabeledList.Item>
-                <LabeledList.Item label="Infection Rate">{analysed ? infection_rate : 'Unknown.'}</LabeledList.Item>
+                <LabeledList.Item label="Infection Rate">
+                  {analysed ? infection_rate : 'Unknown.'}
+                </LabeledList.Item>
               </LabeledList>
             ) : (
               <Box color="bad">No virus detected.</Box>
diff --git a/tgui/packages/tgui_ch/interfaces/DisposalBin.tsx b/tgui/packages/tgui_ch/interfaces/DisposalBin.tsx
index df46db7b06..ccba3f0f5f 100644
--- a/tgui/packages/tgui_ch/interfaces/DisposalBin.tsx
+++ b/tgui/packages/tgui_ch/interfaces/DisposalBin.tsx
@@ -90,7 +90,12 @@ export const DisposalBin = (props, context) => {
               />
             </LabeledList.Item>
             <LabeledList.Item label="Eject">
-              <Button icon="sign-out-alt" disabled={isAI} content="Eject Contents" onClick={() => act('eject')} />
+              <Button
+                icon="sign-out-alt"
+                disabled={isAI}
+                content="Eject Contents"
+                onClick={() => act('eject')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui_ch/interfaces/DroneConsole.js b/tgui/packages/tgui_ch/interfaces/DroneConsole.js
index 9c88e290cc..e01aa766b8 100644
--- a/tgui/packages/tgui_ch/interfaces/DroneConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/DroneConsole.js
@@ -25,7 +25,11 @@ export const DroneConsole = (props, context) => {
           {!fabricator ? (
             <Box color="bad">
               Fabricator not detected.
-              <Button icon="sync" content="Search for Fabricator" onClick={() => act('search_fab')} />
+              <Button
+                icon="sync"
+                content="Search for Fabricator"
+                onClick={() => act('search_fab')}
+              />
             </Box>
           ) : (
             <Box color="good">Linked.</Box>
@@ -38,7 +42,11 @@ export const DroneConsole = (props, context) => {
             width="100%"
             onSelected={(val) => act('set_dcall_area', { area: val })}
           />
-          <Button icon="share-square" content="Send Ping" onClick={() => act('ping')} />
+          <Button
+            icon="share-square"
+            content="Send Ping"
+            onClick={() => act('ping')}
+          />
         </Section>
         <Section title="Maintenance Units">
           {drones && drones.length ? (
@@ -49,7 +57,11 @@ export const DroneConsole = (props, context) => {
                   label={drone.name}
                   buttons={
                     <Fragment>
-                      <Button icon="sync" content="Resync" onClick={() => act('resync', { ref: drone.ref })} />
+                      <Button
+                        icon="sync"
+                        content="Resync"
+                        onClick={() => act('resync', { ref: drone.ref })}
+                      />
                       <Button.Confirm
                         icon="exclamation-triangle"
                         color="red"
@@ -59,11 +71,15 @@ export const DroneConsole = (props, context) => {
                     </Fragment>
                   }>
                   <LabeledList>
-                    <LabeledList.Item label="Location">{drone.loc}</LabeledList.Item>
+                    <LabeledList.Item label="Location">
+                      {drone.loc}
+                    </LabeledList.Item>
                     <LabeledList.Item label="Charge">
                       {drone.charge} / {drone.maxCharge}
                     </LabeledList.Item>
-                    <LabeledList.Item label="Active">{drone.active ? 'Yes' : 'No'}</LabeledList.Item>
+                    <LabeledList.Item label="Active">
+                      {drone.active ? 'Yes' : 'No'}
+                    </LabeledList.Item>
                   </LabeledList>
                 </LabeledList.Item>
               ))}
diff --git a/tgui/packages/tgui_ch/interfaces/EmbeddedController.js b/tgui/packages/tgui_ch/interfaces/EmbeddedController.js
index ad0e416899..ae19ed1ab7 100644
--- a/tgui/packages/tgui_ch/interfaces/EmbeddedController.js
+++ b/tgui/packages/tgui_ch/interfaces/EmbeddedController.js
@@ -75,7 +75,9 @@ export const EmbeddedController = (props, context) => {
 
   const Component = primaryRoutes[internalTemplateName];
   if (!Component) {
-    throw Error('Unable to find Component for template name: ' + internalTemplateName);
+    throw Error(
+      'Unable to find Component for template name: ' + internalTemplateName
+    );
   }
 
   return (
@@ -117,7 +119,11 @@ const StatusDisplay = (props, context) => {
       <LabeledList>
         {bars.map((bar) => (
           <LabeledList.Item key={bar.label} label={bar.label}>
-            <ProgressBar color={bar.color(bar.value)} minValue={bar.minValue} maxValue={bar.maxValue} value={bar.value}>
+            <ProgressBar
+              color={bar.color(bar.value)}
+              minValue={bar.minValue}
+              maxValue={bar.maxValue}
+              value={bar.value}>
               {bar.textValue}
             </ProgressBar>
           </LabeledList.Item>
@@ -140,14 +146,18 @@ const StandardControls = (props, context) => {
   if (data['interior_status'] && data.interior_status.state === 'open') {
     externalForceSafe = false;
   } else if (data['external_pressure'] && data['chamber_pressure']) {
-    externalForceSafe = !(Math.abs(data['external_pressure'] - data['chamber_pressure']) > 5);
+    externalForceSafe = !(
+      Math.abs(data['external_pressure'] - data['chamber_pressure']) > 5
+    );
   }
 
   let internalForceSafe = true;
   if (data['exterior_status'] && data.exterior_status.state === 'open') {
     internalForceSafe = false;
   } else if (data['internal_pressure'] && data['chamber_pressure']) {
-    internalForceSafe = !(Math.abs(data['internal_pressure'] - data['chamber_pressure']) > 5);
+    internalForceSafe = !(
+      Math.abs(data['internal_pressure'] - data['chamber_pressure']) > 5
+    );
   }
 
   return (
@@ -216,7 +226,9 @@ const EscapePodStatus = (props, context) => {
   return (
     <Section>
       <LabeledList>
-        <LabeledList.Item label="Escape Pod Status">{statusToHtml[data.docking_status]}</LabeledList.Item>
+        <LabeledList.Item label="Escape Pod Status">
+          {statusToHtml[data.docking_status]}
+        </LabeledList.Item>
         <LabeledList.Item label="Docking Hatch">{dockHatch}</LabeledList.Item>
       </LabeledList>
     </Section>
@@ -230,7 +242,11 @@ const EscapePodStatus = (props, context) => {
  */
 const Armed = (props, context) => {
   const { data, act } = useBackend(context);
-  return data.armed ? <Box color="average">ARMED</Box> : <Box color="good">SYSTEMS OK</Box>;
+  return data.armed ? (
+    <Box color="average">ARMED</Box>
+  ) : (
+    <Box color="good">SYSTEMS OK</Box>
+  );
 };
 
 /**
@@ -276,7 +292,11 @@ const DockStatus = (props, context) => {
   let dockStatus = statusToHtml[data.docking_status];
 
   if (data.override_enabled) {
-    dockStatus = <Box color="bad">{data.docking_status.toUpperCase()}-OVERRIDE ENABLED</Box>;
+    dockStatus = (
+      <Box color="bad">
+        {data.docking_status.toUpperCase()}-OVERRIDE ENABLED
+      </Box>
+    );
   }
 
   return dockStatus;
@@ -296,7 +316,11 @@ const AirlockConsoleAdvanced = (props, context) => {
   const { act, data } = useBackend(context);
 
   const color = (value) => {
-    return value < 80 || value > 120 ? 'bad' : value < 95 || value > 110 ? 'average' : 'good';
+    return value < 80 || value > 120
+      ? 'bad'
+      : value < 95 || value > 110
+        ? 'average'
+        : 'good';
   };
 
   const bars = [
@@ -333,10 +357,20 @@ const AirlockConsoleAdvanced = (props, context) => {
         <StandardControls />
         <Box>
           <Button icon="sync" content="Purge" onClick={() => act('purge')} />
-          <Button icon="lock-open" content="Secure" onClick={() => act('secure')} />
+          <Button
+            icon="lock-open"
+            content="Secure"
+            onClick={() => act('secure')}
+          />
         </Box>
         <Box>
-          <Button disabled={!data.processing} icon="ban" color="bad" content="Abort" onClick={() => act('abort')} />
+          <Button
+            disabled={!data.processing}
+            icon="ban"
+            color="bad"
+            content="Abort"
+            onClick={() => act('abort')}
+          />
         </Box>
       </Section>
     </Fragment>
@@ -361,7 +395,11 @@ const AirlockConsoleSimple = (props, context) => {
       label: 'Chamber Pressure',
       textValue: data.chamber_pressure + ' kPa',
       color: (value) => {
-        return value < 80 || value > 120 ? 'bad' : value < 95 || value > 110 ? 'average' : 'good';
+        return value < 80 || value > 120
+          ? 'bad'
+          : value < 95 || value > 110
+            ? 'average'
+            : 'good';
       },
     },
   ];
@@ -372,7 +410,13 @@ const AirlockConsoleSimple = (props, context) => {
       <Section title="Controls">
         <StandardControls />
         <Box>
-          <Button disabled={!data.processing} icon="ban" color="bad" content="Abort" onClick={() => act('abort')} />
+          <Button
+            disabled={!data.processing}
+            icon="ban"
+            color="bad"
+            content="Abort"
+            onClick={() => act('abort')}
+          />
         </Box>
       </Section>
     </Fragment>
@@ -397,7 +441,11 @@ const AirlockConsolePhoron = (props, context) => {
       label: 'Chamber Pressure',
       textValue: data.chamber_pressure + ' kPa',
       color: (value) => {
-        return value < 80 || value > 120 ? 'bad' : value < 95 || value > 110 ? 'average' : 'good';
+        return value < 80 || value > 120
+          ? 'bad'
+          : value < 95 || value > 110
+            ? 'average'
+            : 'good';
       },
     },
     {
@@ -418,7 +466,13 @@ const AirlockConsolePhoron = (props, context) => {
       <Section title="Controls">
         <StandardControls />
         <Box>
-          <Button disabled={!data.processing} icon="ban" color="bad" content="Abort" onClick={() => act('abort')} />
+          <Button
+            disabled={!data.processing}
+            icon="ban"
+            color="bad"
+            content="Abort"
+            onClick={() => act('abort')}
+          />
         </Box>
       </Section>
     </Fragment>
@@ -442,7 +496,11 @@ const AirlockConsoleDocking = (props, context) => {
       label: 'Chamber Pressure',
       textValue: data.chamber_pressure + ' kPa',
       color: (value) => {
-        return value < 80 || value > 120 ? 'bad' : value < 95 || value > 110 ? 'average' : 'good';
+        return value < 80 || value > 120
+          ? 'bad'
+          : value < 95 || value > 110
+            ? 'average'
+            : 'good';
       },
     },
   ];
@@ -467,7 +525,13 @@ const AirlockConsoleDocking = (props, context) => {
       <Section title="Controls">
         <StandardControls />
         <Box>
-          <Button disabled={!data.processing} icon="ban" color="bad" content="Abort" onClick={() => act('abort')} />
+          <Button
+            disabled={!data.processing}
+            icon="ban"
+            color="bad"
+            content="Abort"
+            onClick={() => act('abort')}
+          />
         </Box>
       </Section>
     </Fragment>
@@ -571,8 +635,12 @@ primaryRoutes['DockingConsoleMulti'] = DockingConsoleMulti;
 const DoorAccessConsole = (props, context) => {
   const { act, data } = useBackend(context);
 
-  let interiorOpen = data.interior_status.state === 'open' || data.exterior_status.state === 'closed';
-  let exteriorOpen = data.exterior_status.state === 'open' || data.interior_status.state === 'closed';
+  let interiorOpen =
+    data.interior_status.state === 'open' ||
+    data.exterior_status.state === 'closed';
+  let exteriorOpen =
+    data.exterior_status.state === 'open' ||
+    data.interior_status.state === 'closed';
 
   return (
     <Section
diff --git a/tgui/packages/tgui_ch/interfaces/ExonetNode.tsx b/tgui/packages/tgui_ch/interfaces/ExonetNode.tsx
index 793b0d09db..fa0efa23eb 100644
--- a/tgui/packages/tgui_ch/interfaces/ExonetNode.tsx
+++ b/tgui/packages/tgui_ch/interfaces/ExonetNode.tsx
@@ -63,7 +63,9 @@ export const ExonetNode = (props, context) => {
                 {log}
               </Flex.Item>
             ))}
-            {!logs || logs.length === 0 ? <Box color="average">No logs found.</Box> : null}
+            {!logs || logs.length === 0 ? (
+              <Box color="average">No logs found.</Box>
+            ) : null}
           </Flex>
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui_ch/interfaces/ExosuitFabricator.js b/tgui/packages/tgui_ch/interfaces/ExosuitFabricator.js
index 8300fca713..86bbb40a96 100644
--- a/tgui/packages/tgui_ch/interfaces/ExosuitFabricator.js
+++ b/tgui/packages/tgui_ch/interfaces/ExosuitFabricator.js
@@ -91,7 +91,11 @@ const queueCondFormat = (materials, queue) => {
       materialTally[mat] = materialTally[mat] || 0;
       missingMatTally[mat] = missingMatTally[mat] || 0;
 
-      matFormat[mat] = partBuildColor(part.cost[mat], materialTally[mat], materials[mat]);
+      matFormat[mat] = partBuildColor(
+        part.cost[mat],
+        materialTally[mat],
+        materials[mat]
+      );
 
       if (matFormat[mat].color !== COLOR_NONE) {
         if (textColors[i] < matFormat[mat].color) {
@@ -114,7 +118,10 @@ const searchFilter = (search, allparts) => {
     return;
   }
 
-  const resultFilter = createSearch(search, (part) => (part.name || '') + (part.desc || '') + (part.searchMeta || ''));
+  const resultFilter = createSearch(
+    search,
+    (part) => (part.name || '') + (part.desc || '') + (part.searchMeta || '')
+  );
 
   Object.keys(allparts).forEach((category) => {
     allparts[category].filter(resultFilter).forEach((e) => {
@@ -133,11 +140,22 @@ export const ExosuitFabricator = (props, context) => {
   const queue = data.queue || [];
   const materialAsObj = materialArrayToObj(data.materials || []);
 
-  const { materialTally, missingMatTally, textColors } = queueCondFormat(materialAsObj, queue);
+  const { materialTally, missingMatTally, textColors } = queueCondFormat(
+    materialAsObj,
+    queue
+  );
 
-  const [displayMatCost, setDisplayMatCost] = useSharedState(context, 'display_mats', false);
+  const [displayMatCost, setDisplayMatCost] = useSharedState(
+    context,
+    'display_mats',
+    false
+  );
 
-  const [displayAllMat, setDisplayAllMat] = useSharedState(context, 'display_all_mats', false);
+  const [displayAllMat, setDisplayAllMat] = useSharedState(
+    context,
+    'display_all_mats',
+    false
+  );
 
   return (
     <Window resizable width={1100} height={640}>
@@ -151,23 +169,31 @@ export const ExosuitFabricator = (props, context) => {
             </Flex.Item>
             <Flex.Item mt={1} mr={1}>
               <Section title="Settings" height="100%">
-                <Button.Checkbox onClick={() => setDisplayMatCost(!displayMatCost)} checked={displayMatCost}>
+                <Button.Checkbox
+                  onClick={() => setDisplayMatCost(!displayMatCost)}
+                  checked={displayMatCost}>
                   Display Material Costs
                 </Button.Checkbox>
-                <Button.Checkbox onClick={() => setDisplayAllMat(!displayAllMat)} checked={displayAllMat}>
+                <Button.Checkbox
+                  onClick={() => setDisplayAllMat(!displayAllMat)}
+                  checked={displayAllMat}>
                   Display All Materials
                 </Button.Checkbox>
                 {(data.species_types && (
                   <Box color="label">
                     Species:
-                    <Button onClick={() => act('species')}>{data.species}</Button>
+                    <Button onClick={() => act('species')}>
+                      {data.species}
+                    </Button>
                   </Box>
                 )) ||
                   null}
                 {(data.manufacturers && (
                   <Box color="label">
                     Manufacturer:
-                    <Button onClick={() => act('manufacturer')}>{data.manufacturer}</Button>
+                    <Button onClick={() => act('manufacturer')}>
+                      {data.manufacturer}
+                    </Button>
                   </Box>
                 )) ||
                   null}
@@ -181,17 +207,29 @@ export const ExosuitFabricator = (props, context) => {
                   height="100%"
                   overflowY="auto"
                   title="Categories"
-                  buttons={<Button content="R&D Sync" onClick={() => act('sync_rnd')} />}>
+                  buttons={
+                    <Button
+                      content="R&D Sync"
+                      onClick={() => act('sync_rnd')}
+                    />
+                  }>
                   <PartSets />
                 </Section>
               </Flex.Item>
               <Flex.Item position="relative" grow={1}>
                 <Box fillPositionedParent overflowY="auto">
-                  <PartLists queueMaterials={materialTally} materials={materialAsObj} />
+                  <PartLists
+                    queueMaterials={materialTally}
+                    materials={materialAsObj}
+                  />
                 </Box>
               </Flex.Item>
               <Flex.Item width="420px" position="relative">
-                <Queue queueMaterials={materialTally} missingMaterials={missingMatTally} textColors={textColors} />
+                <Queue
+                  queueMaterials={materialTally}
+                  missingMaterials={missingMatTally}
+                  textColors={textColors}
+                />
               </Flex.Item>
             </Flex>
           </Flex.Item>
@@ -208,7 +246,11 @@ const EjectMaterial = (props, context) => {
 
   const { name, removable, sheets } = material;
 
-  const [removeMaterials, setRemoveMaterials] = useSharedState(context, 'remove_mats_' + name, 1);
+  const [removeMaterials, setRemoveMaterials] = useSharedState(
+    context,
+    'remove_mats_' + name,
+    1
+  );
 
   if (removeMaterials > 1 && sheets < removeMaterials) {
     setRemoveMaterials(sheets || 1);
@@ -251,7 +293,9 @@ export const Materials = (props, context) => {
 
   const materials = data.materials || [];
 
-  let display_materials = materials.filter((mat) => displayAllMat || mat.amount > 0);
+  let display_materials = materials.filter(
+    (mat) => displayAllMat || mat.amount > 0
+  );
 
   if (display_materials.length === 0) {
     return (
@@ -269,7 +313,11 @@ export const Materials = (props, context) => {
         (material) =>
           (
             <Flex.Item width="80px" key={material.name}>
-              <MaterialAmount name={material.name} amount={material.amount} formatsi />
+              <MaterialAmount
+                name={material.name}
+                amount={material.amount}
+                formatsi
+              />
               {!disableEject && (
                 <Box mt={1} style={{ 'text-align': 'center' }}>
                   <EjectMaterial material={material} />
@@ -300,7 +348,11 @@ const MaterialAmount = (props, context) => {
     <Flex direction="column" align="center">
       <Flex.Item>
         <Tooltip position="bottom" content={toTitleCase(name)}>
-          <Box className={classes(['sheetmaterials32x32', MATERIAL_KEYS[name]])} position="relative" style={style} />
+          <Box
+            className={classes(['sheetmaterials32x32', MATERIAL_KEYS[name]])}
+            position="relative"
+            style={style}
+          />
         </Tooltip>
       </Flex.Item>
       <Flex.Item>
@@ -359,9 +411,17 @@ const PartLists = (props, context) => {
 
   const { queueMaterials, materials } = props;
 
-  const [selectedPartTab, setSelectedPartTab] = useSharedState(context, 'part_tab', getFirstValidPartSet(partSets));
+  const [selectedPartTab, setSelectedPartTab] = useSharedState(
+    context,
+    'part_tab',
+    getFirstValidPartSet(partSets)
+  );
 
-  const [searchText, setSearchText] = useSharedState(context, 'search_text', '');
+  const [searchText, setSearchText] = useSharedState(
+    context,
+    'search_text',
+    ''
+  );
 
   if (!selectedPartTab || !buildableParts[selectedPartTab]) {
     const validSet = getFirstValidPartSet(partSets);
@@ -403,15 +463,28 @@ const PartLists = (props, context) => {
             <Icon name="search" />
           </Flex.Item>
           <Flex.Item grow={1}>
-            <Input fluid placeholder="Search for..." onInput={(e, v) => setSearchText(v)} />
+            <Input
+              fluid
+              placeholder="Search for..."
+              onInput={(e, v) => setSearchText(v)}
+            />
           </Flex.Item>
         </Flex>
       </Section>
       {(!!searchText && (
-        <PartCategory name={'Search Results'} parts={partsList} forceShow placeholder="No matching results..." />
+        <PartCategory
+          name={'Search Results'}
+          parts={partsList}
+          forceShow
+          placeholder="No matching results..."
+        />
       )) ||
         Object.keys(partsList).map((category) => (
-          <PartCategory key={category} name={category} parts={partsList[category]} />
+          <PartCategory
+            key={category}
+            name={category}
+            parts={partsList[category]}
+          />
         ))}
     </Fragment>
   );
@@ -477,7 +550,9 @@ const PartCategory = (props, context) => {
                   icon="question-circle"
                   transparent
                   height="20px"
-                  tooltip={'Build Time: ' + part.printTime + 's. ' + (part.desc || '')}
+                  tooltip={
+                    'Build Time: ' + part.printTime + 's. ' + (part.desc || '')
+                  }
                   tooltipPosition="left"
                 />
               </Flex.Item>
@@ -485,7 +560,10 @@ const PartCategory = (props, context) => {
             {displayMatCost && (
               <Flex mb={2}>
                 {Object.keys(part.cost).map((material) => (
-                  <Flex.Item width={'50px'} key={material} color={COLOR_KEYS[part.format[material].color]}>
+                  <Flex.Item
+                    width={'50px'}
+                    key={material}
+                    color={COLOR_KEYS[part.format[material].color]}>
                     <MaterialAmount
                       formatmoney
                       style={{
@@ -531,9 +609,19 @@ const Queue = (props, context) => {
                 onClick={() => act('clear_queue')}
               />
               {(!!isProcessingQueue && (
-                <Button disabled={!queue.length} content="Stop" icon="stop" onClick={() => act('stop_queue')} />
+                <Button
+                  disabled={!queue.length}
+                  content="Stop"
+                  icon="stop"
+                  onClick={() => act('stop_queue')}
+                />
               )) || (
-                <Button disabled={!queue.length} content="Build Queue" icon="play" onClick={() => act('build_queue')} />
+                <Button
+                  disabled={!queue.length}
+                  content="Build Queue"
+                  icon="play"
+                  onClick={() => act('build_queue')}
+                />
               )}
             </Fragment>
           }>
@@ -550,7 +638,10 @@ const Queue = (props, context) => {
       {!!queue.length && (
         <Flex.Item mt={1}>
           <Section title="Material Cost">
-            <QueueMaterials queueMaterials={queueMaterials} missingMaterials={missingMaterials} />
+            <QueueMaterials
+              queueMaterials={queueMaterials}
+              missingMaterials={missingMaterials}
+            />
           </Section>
         </Flex.Item>
       )}
@@ -565,7 +656,11 @@ const QueueMaterials = (props, context) => {
     <Flex wrap="wrap">
       {Object.keys(queueMaterials).map((material) => (
         <Flex.Item width="12%" key={material}>
-          <MaterialAmount formatmoney name={material} amount={queueMaterials[material]} />
+          <MaterialAmount
+            formatmoney
+            name={material}
+            amount={queueMaterials[material]}
+          />
           {!!missingMaterials[material] && (
             <Box textColor="bad" style={{ 'text-align': 'center' }}>
               {formatMoney(missingMaterials[material])}
@@ -590,7 +685,13 @@ const QueueList = (props, context) => {
 
   return queue.map((part, index) => (
     <Box key={part.name}>
-      <Flex mb={0.5} direction="column" justify="center" wrap="wrap" height="20px" inline>
+      <Flex
+        mb={0.5}
+        direction="column"
+        justify="center"
+        wrap="wrap"
+        height="20px"
+        inline>
         <Flex.Item basis="content">
           <Button
             height="20px"
@@ -642,7 +743,9 @@ const BeingBuilt = (props, context) => {
           <Flex>
             <Flex.Item>{name}</Flex.Item>
             <Flex.Item grow={1} />
-            <Flex.Item>{(timeLeft >= 0 && timeLeft + 's') || 'Dispensing...'}</Flex.Item>
+            <Flex.Item>
+              {(timeLeft >= 0 && timeLeft + 's') || 'Dispensing...'}
+            </Flex.Item>
           </Flex>
         </ProgressBar>
       </Box>
diff --git a/tgui/packages/tgui_ch/interfaces/Farmbot.js b/tgui/packages/tgui_ch/interfaces/Farmbot.js
index cbdc4658f2..08bebc9400 100644
--- a/tgui/packages/tgui_ch/interfaces/Farmbot.js
+++ b/tgui/packages/tgui_ch/interfaces/Farmbot.js
@@ -37,7 +37,9 @@ export const Farmbot = (props, context) => {
                 </ProgressBar>
               )) || <Box color="average">No water tank detected.</Box>}
             </LabeledList.Item>
-            <LabeledList.Item label="Behavior Controls" color={locked ? 'good' : 'bad'}>
+            <LabeledList.Item
+              label="Behavior Controls"
+              color={locked ? 'good' : 'bad'}>
               {locked ? 'Locked' : 'Unlocked'}
             </LabeledList.Item>
           </LabeledList>
diff --git a/tgui/packages/tgui_ch/interfaces/Fax.js b/tgui/packages/tgui_ch/interfaces/Fax.js
index c5ccf4d155..acd19b6189 100644
--- a/tgui/packages/tgui_ch/interfaces/Fax.js
+++ b/tgui/packages/tgui_ch/interfaces/Fax.js
@@ -38,19 +38,36 @@ export const FaxContent = (props, context) => {
 
   return (
     <Section>
-      {!!cooldown && <NoticeBox info>Transmitter arrays realigning. Please stand by.</NoticeBox>}
+      {!!cooldown && (
+        <NoticeBox info>
+          Transmitter arrays realigning. Please stand by.
+        </NoticeBox>
+      )}
       <LabeledList>
-        <LabeledList.Item label="Network">{bossName} Quantum Entanglement Network</LabeledList.Item>
+        <LabeledList.Item label="Network">
+          {bossName} Quantum Entanglement Network
+        </LabeledList.Item>
       </LabeledList>
       {(copyItem && (
         <Box mt={1}>
           <LabeledList>
-            <LabeledList.Item label="Currently Sending">{copyItem}</LabeledList.Item>
+            <LabeledList.Item label="Currently Sending">
+              {copyItem}
+            </LabeledList.Item>
             <LabeledList.Item label="Sending To">
-              <Button icon="map-marker-alt" content={destination} onClick={() => act('dept')} />
+              <Button
+                icon="map-marker-alt"
+                content={destination}
+                onClick={() => act('dept')}
+              />
             </LabeledList.Item>
           </LabeledList>
-          <Button icon="share-square" onClick={() => act('send')} content="Send" fluid />
+          <Button
+            icon="share-square"
+            onClick={() => act('send')}
+            content="Send"
+            fluid
+          />
         </Box>
       )) || <Box mt={1}>Please insert item to transmit.</Box>}
     </Section>
@@ -68,7 +85,12 @@ const RemoveItem = (props, context) => {
 
   return (
     <Box>
-      <Button fluid icon="eject" onClick={() => act('remove')} content="Remove Item" />
+      <Button
+        fluid
+        icon="eject"
+        onClick={() => act('remove')}
+        content="Remove Item"
+      />
     </Box>
   );
 };
diff --git a/tgui/packages/tgui_ch/interfaces/Floorbot.js b/tgui/packages/tgui_ch/interfaces/Floorbot.js
index c9598faf25..cacfbd43fe 100644
--- a/tgui/packages/tgui_ch/interfaces/Floorbot.js
+++ b/tgui/packages/tgui_ch/interfaces/Floorbot.js
@@ -5,7 +5,18 @@ import { Window } from '../layouts';
 export const Floorbot = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { on, open, locked, vocal, amount, possible_bmode, improvefloors, eattiles, maketiles, bmode } = data;
+  const {
+    on,
+    open,
+    locked,
+    vocal,
+    amount,
+    possible_bmode,
+    improvefloors,
+    eattiles,
+    maketiles,
+    bmode,
+  } = data;
 
   return (
     <Window width={390} height={310}>
@@ -21,10 +32,14 @@ export const Floorbot = (props, context) => {
             <LabeledList.Item label="Tiles Left">
               <AnimatedNumber value={amount} />
             </LabeledList.Item>
-            <LabeledList.Item label="Maintenance Panel" color={open ? 'bad' : 'good'}>
+            <LabeledList.Item
+              label="Maintenance Panel"
+              color={open ? 'bad' : 'good'}>
               {open ? 'Open' : 'Closed'}
             </LabeledList.Item>
-            <LabeledList.Item label="Behavior Controls" color={locked ? 'good' : 'bad'}>
+            <LabeledList.Item
+              label="Behavior Controls"
+              color={locked ? 'good' : 'bad'}>
               {locked ? 'Locked' : 'Unlocked'}
             </LabeledList.Item>
           </LabeledList>
@@ -33,7 +48,10 @@ export const Floorbot = (props, context) => {
           <Section title="Behavior Controls">
             <LabeledList>
               <LabeledList.Item label="Speaker">
-                <Button icon={vocal ? 'toggle-on' : 'toggle-off'} selected={vocal} onClick={() => act('vocal')}>
+                <Button
+                  icon={vocal ? 'toggle-on' : 'toggle-off'}
+                  selected={vocal}
+                  onClick={() => act('vocal')}>
                   {vocal ? 'On' : 'Off'}
                 </Button>
               </LabeledList.Item>
@@ -46,12 +64,18 @@ export const Floorbot = (props, context) => {
                 </Button>
               </LabeledList.Item>
               <LabeledList.Item label="Finds Tiles">
-                <Button icon={eattiles ? 'toggle-on' : 'toggle-off'} selected={eattiles} onClick={() => act('tiles')}>
+                <Button
+                  icon={eattiles ? 'toggle-on' : 'toggle-off'}
+                  selected={eattiles}
+                  onClick={() => act('tiles')}>
                   {eattiles ? 'On' : 'Off'}
                 </Button>
               </LabeledList.Item>
               <LabeledList.Item label="Makes Metal Sheets into Tiles">
-                <Button icon={maketiles ? 'toggle-on' : 'toggle-off'} selected={maketiles} onClick={() => act('make')}>
+                <Button
+                  icon={maketiles ? 'toggle-on' : 'toggle-off'}
+                  selected={maketiles}
+                  onClick={() => act('make')}>
                   {maketiles ? 'On' : 'Off'}
                 </Button>
               </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/GasPump.js b/tgui/packages/tgui_ch/interfaces/GasPump.js
index c7d44989b1..f39c75725e 100644
--- a/tgui/packages/tgui_ch/interfaces/GasPump.js
+++ b/tgui/packages/tgui_ch/interfaces/GasPump.js
@@ -5,7 +5,8 @@ import { Window } from '../layouts';
 export const GasPump = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { on, pressure_set, last_flow_rate, last_power_draw, max_power_draw } = data;
+  const { on, pressure_set, last_flow_rate, last_power_draw, max_power_draw } =
+    data;
 
   return (
     <Window width={470} height={290} resizable>
@@ -20,7 +21,9 @@ export const GasPump = (props, context) => {
                 value={last_power_draw}
                 minValue={0}
                 maxValue={max_power_draw}
-                color={last_power_draw < max_power_draw - 5 ? 'good' : 'average'}>
+                color={
+                  last_power_draw < max_power_draw - 5 ? 'good' : 'average'
+                }>
                 {last_power_draw + ' W'}
               </ProgressBar>
             </LabeledList.Item>
@@ -28,14 +31,35 @@ export const GasPump = (props, context) => {
         </Section>
         <Section
           title="Controls"
-          buttons={<Button icon="power-off" content={on ? 'On' : 'Off'} selected={on} onClick={() => act('power')} />}>
+          buttons={
+            <Button
+              icon="power-off"
+              content={on ? 'On' : 'Off'}
+              selected={on}
+              onClick={() => act('power')}
+            />
+          }>
           <LabeledControls>
             <LabeledControls.Item>
-              <Button icon="compress-arrows-alt" content="MIN" onClick={() => act('set_press', { press: 'min' })} />
-              <Button icon="expand-arrows-alt" content="MAX" onClick={() => act('set_press', { press: 'max' })} />
-              <Button icon="wrench" content="SET" onClick={() => act('set_press', { press: 'set' })} />
+              <Button
+                icon="compress-arrows-alt"
+                content="MIN"
+                onClick={() => act('set_press', { press: 'min' })}
+              />
+              <Button
+                icon="expand-arrows-alt"
+                content="MAX"
+                onClick={() => act('set_press', { press: 'max' })}
+              />
+              <Button
+                icon="wrench"
+                content="SET"
+                onClick={() => act('set_press', { press: 'set' })}
+              />
+            </LabeledControls.Item>
+            <LabeledControls.Item label="Desired Output Pressure">
+              {pressure_set / 100} kPa
             </LabeledControls.Item>
-            <LabeledControls.Item label="Desired Output Pressure">{pressure_set / 100} kPa</LabeledControls.Item>
           </LabeledControls>
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui_ch/interfaces/GasTemperatureSystem.js b/tgui/packages/tgui_ch/interfaces/GasTemperatureSystem.js
index db290fa66d..ab44575360 100644
--- a/tgui/packages/tgui_ch/interfaces/GasTemperatureSystem.js
+++ b/tgui/packages/tgui_ch/interfaces/GasTemperatureSystem.js
@@ -23,7 +23,12 @@ export const GasTemperatureSystem = (props, context) => {
         <Section
           title="Controls"
           buttons={
-            <Button icon="power-off" content={on ? 'On' : 'Off'} selected={on} onClick={() => act('toggleStatus')} />
+            <Button
+              icon="power-off"
+              content={on ? 'On' : 'Off'}
+              selected={on}
+              onClick={() => act('toggleStatus')}
+            />
           }>
           <LabeledControls>
             <LabeledControls.Item label="Power Level">
@@ -35,7 +40,9 @@ export const GasTemperatureSystem = (props, context) => {
                 onChange={(e, val) => act('setPower', { value: val })}
               />
             </LabeledControls.Item>
-            <LabeledControls.Item label="Gas Pressure">{gasPressure} kPa</LabeledControls.Item>
+            <LabeledControls.Item label="Gas Pressure">
+              {gasPressure} kPa
+            </LabeledControls.Item>
           </LabeledControls>
         </Section>
         <Section title="Gas Temperature">
diff --git a/tgui/packages/tgui_ch/interfaces/GeneralAtmoControl.js b/tgui/packages/tgui_ch/interfaces/GeneralAtmoControl.js
index 013f59b73e..4c1a253f2e 100644
--- a/tgui/packages/tgui_ch/interfaces/GeneralAtmoControl.js
+++ b/tgui/packages/tgui_ch/interfaces/GeneralAtmoControl.js
@@ -71,15 +71,20 @@ const AtmoSensor = (props, context) => {
     return <Box color="bad">UNABLE TO FIND SENSOR</Box>;
   }
 
-  const { pressure, temperature, oxygen, nitrogen, carbon_dioxide, phoron } = sensor.sensor_data;
+  const { pressure, temperature, oxygen, nitrogen, carbon_dioxide, phoron } =
+    sensor.sensor_data;
 
   let labeledListContents = [];
   if (pressure) {
-    labeledListContents.push(<LabeledList.Item label="Pressure">{pressure} kPa</LabeledList.Item>);
+    labeledListContents.push(
+      <LabeledList.Item label="Pressure">{pressure} kPa</LabeledList.Item>
+    );
   }
 
   if (temperature) {
-    labeledListContents.push(<LabeledList.Item label="Temperature">{temperature} K</LabeledList.Item>);
+    labeledListContents.push(
+      <LabeledList.Item label="Temperature">{temperature} K</LabeledList.Item>
+    );
   }
 
   if (oxygen || nitrogen || carbon_dioxide || phoron) {
@@ -88,7 +93,9 @@ const AtmoSensor = (props, context) => {
         <Flex justify="space-around">
           {oxygen ? <Flex.Item>({oxygen}% O²)</Flex.Item> : null}
           {nitrogen ? <Flex.Item>({nitrogen}% N²)</Flex.Item> : null}
-          {carbon_dioxide ? <Flex.Item>({carbon_dioxide}% CO²)</Flex.Item> : null}
+          {carbon_dioxide ? (
+            <Flex.Item>({carbon_dioxide}% CO²)</Flex.Item>
+          ) : null}
           {phoron ? <Flex.Item>({phoron}% TX)</Flex.Item> : null}
         </Flex>
       </LabeledList.Item>
@@ -166,14 +173,28 @@ const AtmoControlTankCore = (props, context) => {
 };
 
 const AtmoControlTankCoreControl = (props, context) => {
-  const { info, maxSliderValue, sliderControl, sliderFill, unit, name, limitName, actions } = props;
+  const {
+    info,
+    maxSliderValue,
+    sliderControl,
+    sliderFill,
+    unit,
+    name,
+    limitName,
+    actions,
+  } = props;
 
   return (
     <Section
       title={name}
       buttons={
         <Fragment>
-          <Button content="Refresh" icon="sync" disabled={!info} onClick={() => actions.refresh()} />
+          <Button
+            content="Refresh"
+            icon="sync"
+            disabled={!info}
+            onClick={() => actions.refresh()}
+          />
           <Button
             content="Power"
             icon="power-off"
@@ -184,15 +205,30 @@ const AtmoControlTankCoreControl = (props, context) => {
         </Fragment>
       }>
       <LabeledList>
-        {(info && <LabeledList.Item label={name}>{info.power ? 'Injecting' : 'On Hold'}</LabeledList.Item>) || (
+        {(info && (
+          <LabeledList.Item label={name}>
+            {info.power ? 'Injecting' : 'On Hold'}
+          </LabeledList.Item>
+        )) || (
           <LabeledList.Item>
             <Box color="bad">ERROR: Cannot Find {name} Port</Box>
-            <Button icon="search" content="Search" onClick={() => actions.refresh()} />
+            <Button
+              icon="search"
+              content="Search"
+              onClick={() => actions.refresh()}
+            />
           </LabeledList.Item>
         )}
         <LabeledList.Item
           label={limitName}
-          buttons={<Button content="Apply" icon="edit" disabled={!info} onClick={() => actions.apply()} />}>
+          buttons={
+            <Button
+              content="Apply"
+              icon="edit"
+              disabled={!info}
+              onClick={() => actions.apply()}
+            />
+          }>
           <Slider
             mt="0.4em"
             animated
@@ -225,7 +261,11 @@ const AtmoControlFuel = (props, context) => {
             onClick={() => act('injection')}
             disabled={automation || !device_info}
           />
-          <Button icon="sync" content="Refresh" onClick={() => act('refresh_status')} />
+          <Button
+            icon="sync"
+            content="Refresh"
+            onClick={() => act('refresh_status')}
+          />
           <Button
             icon="power-off"
             content="Injector Power"
@@ -237,8 +277,12 @@ const AtmoControlFuel = (props, context) => {
       }>
       {device_info ? (
         <LabeledList>
-          <LabeledList.Item label="Status">{device_info.power ? 'Injecting' : 'On Hold'}</LabeledList.Item>
-          <LabeledList.Item label="Rate">{device_info.volume_rate}</LabeledList.Item>
+          <LabeledList.Item label="Status">
+            {device_info.power ? 'Injecting' : 'On Hold'}
+          </LabeledList.Item>
+          <LabeledList.Item label="Rate">
+            {device_info.volume_rate}
+          </LabeledList.Item>
           <LabeledList.Item label="Automated Fuel Injection">
             <Button
               icon="robot"
@@ -251,7 +295,11 @@ const AtmoControlFuel = (props, context) => {
       ) : (
         <Fragment>
           <Box color="bad">ERROR: Cannot Find Device</Box>
-          <Button icon="search" content="Search" onClick={() => act('refresh_status')} />
+          <Button
+            icon="search"
+            content="Search"
+            onClick={() => act('refresh_status')}
+          />
         </Fragment>
       )}
     </Section>
diff --git a/tgui/packages/tgui_ch/interfaces/GeneralRecords.js b/tgui/packages/tgui_ch/interfaces/GeneralRecords.js
index a030bdc884..09df40be98 100644
--- a/tgui/packages/tgui_ch/interfaces/GeneralRecords.js
+++ b/tgui/packages/tgui_ch/interfaces/GeneralRecords.js
@@ -87,7 +87,11 @@ const GeneralRecordsList = (_properties, context) => {
       <Box mb="0.2rem">
         <Button icon="pen" content="New Record" onClick={() => act('new')} />
       </Box>
-      <Input fluid placeholder="Search by Name, DNA, or ID" onInput={(e, value) => setSearchText(value)} />
+      <Input
+        fluid
+        placeholder="Search by Name, DNA, or ID"
+        onInput={(e, value) => setSearchText(value)}
+      />
       <Box mt="0.5rem">
         {records.map((record, i) => (
           <Button
@@ -105,7 +109,13 @@ const GeneralRecordsList = (_properties, context) => {
 
 const GeneralRecordsMaintenance = (_properties, context) => {
   const { act } = useBackend(context);
-  return <Button.Confirm icon="trash" content="Delete All Employment Records" onClick={() => act('del_all')} />;
+  return (
+    <Button.Confirm
+      icon="trash"
+      content="Delete All Employment Records"
+      onClick={() => act('del_all')}
+    />
+  );
 };
 
 const GeneralRecordsView = (_properties, context) => {
@@ -133,7 +143,12 @@ const GeneralRecordsView = (_properties, context) => {
           onClick={() => act('print_p')}
         />
         <br />
-        <Button icon="arrow-left" content="Back" mt="0.5rem" onClick={() => act('screen', { screen: 2 })} />
+        <Button
+          icon="arrow-left"
+          content="Back"
+          mt="0.5rem"
+          onClick={() => act('screen', { screen: 2 })}
+        />
       </Section>
     </Fragment>
   );
@@ -146,7 +161,12 @@ const GeneralRecordsViewGeneral = (_properties, context) => {
     return (
       <Box color="bad">
         General record lost!
-        <Button icon="pen" content="New Record" ml="0.5rem" onClick={() => act('new')} />
+        <Button
+          icon="pen"
+          content="New Record"
+          ml="0.5rem"
+          onClick={() => act('new')}
+        />
       </Box>
     );
   }
@@ -159,7 +179,13 @@ const GeneralRecordsViewGeneral = (_properties, context) => {
               <Box height="20px" display="inline-block">
                 {field.value}
               </Box>
-              {!!field.edit && <Button icon="pen" ml="0.5rem" onClick={() => doEdit(context, field)} />}
+              {!!field.edit && (
+                <Button
+                  icon="pen"
+                  ml="0.5rem"
+                  onClick={() => doEdit(context, field)}
+                />
+              )}
             </LabeledList.Item>
           ))}
         </LabeledList>
@@ -177,7 +203,12 @@ const GeneralRecordsViewGeneral = (_properties, context) => {
                 </Box>
                 <br />
                 {comment.text}
-                <Button icon="comment-slash" color="bad" ml="0.5rem" onClick={() => act('del_c', { del_c: i + 1 })} />
+                <Button
+                  icon="comment-slash"
+                  color="bad"
+                  ml="0.5rem"
+                  onClick={() => act('del_c', { del_c: i + 1 })}
+                />
               </Box>
             ))
           )}
@@ -195,7 +226,11 @@ const GeneralRecordsViewGeneral = (_properties, context) => {
       <Box width="50%" float="right" textAlign="right">
         {!!general.has_photos &&
           general.photos.map((p, i) => (
-            <Box key={i} display="inline-block" textAlign="center" color="label">
+            <Box
+              key={i}
+              display="inline-block"
+              textAlign="center"
+              color="label">
               <img
                 src={p.substr(1, p.length - 1)}
                 style={{
@@ -218,11 +253,15 @@ const GeneralRecordsNavigation = (_properties, context) => {
   const { screen } = data;
   return (
     <Tabs>
-      <Tabs.Tab selected={screen === 2} onClick={() => act('screen', { screen: 2 })}>
+      <Tabs.Tab
+        selected={screen === 2}
+        onClick={() => act('screen', { screen: 2 })}>
         <Icon name="list" />
         List Records
       </Tabs.Tab>
-      <Tabs.Tab selected={screen === 3} onClick={() => act('screen', { screen: 3 })}>
+      <Tabs.Tab
+        selected={screen === 3}
+        onClick={() => act('screen', { screen: 3 })}>
         <Icon name="wrench" />
         Record Maintenance
       </Tabs.Tab>
diff --git a/tgui/packages/tgui_ch/interfaces/Gps.js b/tgui/packages/tgui_ch/interfaces/Gps.js
index 3892a2f4ef..4bc3a8ca23 100644
--- a/tgui/packages/tgui_ch/interfaces/Gps.js
+++ b/tgui/packages/tgui_ch/interfaces/Gps.js
@@ -11,12 +11,22 @@ const coordsToVec = (coords) => map(parseFloat)(coords.split(', '));
 
 export const Gps = (props, context) => {
   const { act, data } = useBackend(context);
-  const { currentArea, currentCoords, currentCoordsText, globalmode, power, tag, updating } = data;
+  const {
+    currentArea,
+    currentCoords,
+    currentCoordsText,
+    globalmode,
+    power,
+    tag,
+    updating,
+  } = data;
   const signals = flow([
     map((signal, index) => {
       // Calculate distance to the target. BYOND distance is capped to 127,
       // that's why we roll our own calculations here.
-      const dist = signal.dist && Math.round(vecLength(vecSubtract(currentCoords, signal.coords)));
+      const dist =
+        signal.dist &&
+        Math.round(vecLength(vecSubtract(currentCoords, signal.coords)));
       return { ...signal, dist, index };
     }),
     sortBy(
@@ -27,16 +37,29 @@ export const Gps = (props, context) => {
     ),
   ])(data.signals || []);
   return (
-    <Window title="Global Positioning System" width={470} height={700} resizable>
+    <Window
+      title="Global Positioning System"
+      width={470}
+      height={700}
+      resizable>
       <Window.Content scrollable>
         <Section
           title="Control"
           buttons={
-            <Button icon="power-off" content={power ? 'On' : 'Off'} selected={power} onClick={() => act('power')} />
+            <Button
+              icon="power-off"
+              content={power ? 'On' : 'Off'}
+              selected={power}
+              onClick={() => act('power')}
+            />
           }>
           <LabeledList>
             <LabeledList.Item label="Tag">
-              <Button icon="pencil-alt" content={tag} onClick={() => act('rename')} />
+              <Button
+                icon="pencil-alt"
+                content={tag}
+                onClick={() => act('rename')}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Scan Mode">
               <Button
@@ -71,15 +94,25 @@ export const Gps = (props, context) => {
                   <Table.Cell collapsing content="Coordinates" />
                 </Table.Row>
                 {signals.map((signal) => (
-                  <Table.Row key={signal.entrytag + signal.coords + signal.index} className="candystripe">
+                  <Table.Row
+                    key={signal.entrytag + signal.coords + signal.index}
+                    className="candystripe">
                     <Table.Cell bold color="label">
                       {signal.entrytag}
                     </Table.Cell>
                     <Table.Cell
                       collapsing
-                      opacity={signal.dist !== undefined && clamp(1.2 / Math.log(Math.E + signal.dist / 20), 0.4, 1)}>
+                      opacity={
+                        signal.dist !== undefined &&
+                        clamp(1.2 / Math.log(Math.E + signal.dist / 20), 0.4, 1)
+                      }>
                       {signal.degrees !== undefined && (
-                        <Icon mr={1} size={1.2} name="arrow-up" rotation={signal.degrees} />
+                        <Icon
+                          mr={1}
+                          size={1.2}
+                          name="arrow-up"
+                          rotation={signal.degrees}
+                        />
                       )}
                       {signal.dist !== undefined && signal.dist + 'm'}
                     </Table.Cell>
diff --git a/tgui/packages/tgui_ch/interfaces/GravityGenerator.js b/tgui/packages/tgui_ch/interfaces/GravityGenerator.js
index 391b847bd1..11c5ab0f1f 100644
--- a/tgui/packages/tgui_ch/interfaces/GravityGenerator.js
+++ b/tgui/packages/tgui_ch/interfaces/GravityGenerator.js
@@ -27,7 +27,11 @@ export const GravityGenerator = (props, context) => {
               confirmIcon="exclamation-triangle"
               color="red"
               content="Toggle Breaker"
-              confirmContent={breaker ? 'This will disable gravity!' : 'This will enable gravity!'}
+              confirmContent={
+                breaker
+                  ? 'This will disable gravity!'
+                  : 'This will enable gravity!'
+              }
               onClick={() => act('gentoggle')}
             />
           }>
@@ -35,8 +39,12 @@ export const GravityGenerator = (props, context) => {
             <LabeledList.Item label="Breaker Setting">
               {breaker ? 'Generator Enabled' : 'Generator Disabled'}
             </LabeledList.Item>
-            <LabeledList.Item label="Charge Mode">Generator {genstatus}</LabeledList.Item>
-            <LabeledList.Item label="Charge Status">{charge_count}%</LabeledList.Item>
+            <LabeledList.Item label="Charge Mode">
+              Generator {genstatus}
+            </LabeledList.Item>
+            <LabeledList.Item label="Charge Status">
+              {charge_count}%
+            </LabeledList.Item>
           </LabeledList>
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui_ch/interfaces/GuestPass.js b/tgui/packages/tgui_ch/interfaces/GuestPass.js
index 4fc123d999..dfb3b76ce2 100644
--- a/tgui/packages/tgui_ch/interfaces/GuestPass.js
+++ b/tgui/packages/tgui_ch/interfaces/GuestPass.js
@@ -7,7 +7,8 @@ import { Window } from '../layouts';
 export const GuestPass = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { access, area, giver, giveName, reason, duration, mode, log, uid } = data;
+  const { access, area, giver, giveName, reason, duration, mode, log, uid } =
+    data;
 
   return (
     <Window width={500} height={520} resizable>
@@ -15,22 +16,45 @@ export const GuestPass = (props, context) => {
         {(mode === 1 && (
           <Section
             title="Activity Log"
-            buttons={<Button icon="scroll" content="Activity Log" selected onClick={() => act('mode', { mode: 0 })} />}>
-            <Button icon="print" content="Print" onClick={() => act('print')} fluid mb={1} />
+            buttons={
+              <Button
+                icon="scroll"
+                content="Activity Log"
+                selected
+                onClick={() => act('mode', { mode: 0 })}
+              />
+            }>
+            <Button
+              icon="print"
+              content="Print"
+              onClick={() => act('print')}
+              fluid
+              mb={1}
+            />
             <Section level={2} title="Logs">
               {/* These are internally generated only. */}
-              {(log.length && log.map((l) => <div key={l} dangerouslySetInnerHTML={{ __html: l }} />)) || (
-                <Box>No logs.</Box>
-              )}
+              {(log.length &&
+                log.map((l) => (
+                  <div key={l} dangerouslySetInnerHTML={{ __html: l }} />
+                ))) || <Box>No logs.</Box>}
             </Section>
           </Section>
         )) || (
           <Section
             title={'Guest pass terminal #' + uid}
-            buttons={<Button icon="scroll" content="Activity Log" onClick={() => act('mode', { mode: 1 })} />}>
+            buttons={
+              <Button
+                icon="scroll"
+                content="Activity Log"
+                onClick={() => act('mode', { mode: 1 })}
+              />
+            }>
             <LabeledList>
               <LabeledList.Item label="Issuing ID">
-                <Button content={giver || 'Insert ID'} onClick={() => act('id')} />
+                <Button
+                  content={giver || 'Insert ID'}
+                  onClick={() => act('id')}
+                />
               </LabeledList.Item>
               <LabeledList.Item label="Issued To">
                 <Button content={giveName} onClick={() => act('giv_name')} />
@@ -42,7 +66,12 @@ export const GuestPass = (props, context) => {
                 <Button content={duration} onClick={() => act('duration')} />
               </LabeledList.Item>
             </LabeledList>
-            <Button.Confirm icon="check" fluid content="Issue Pass" onClick={() => act('issue')} />
+            <Button.Confirm
+              icon="check"
+              fluid
+              content="Issue Pass"
+              onClick={() => act('issue')}
+            />
             <Section title="Access" level={2}>
               {sortBy((a) => a.area_name)(area).map((a) => (
                 <Button.Checkbox
diff --git a/tgui/packages/tgui_ch/interfaces/GyrotronControl.tsx b/tgui/packages/tgui_ch/interfaces/GyrotronControl.tsx
index 5f26ef11ea..0c0648581d 100644
--- a/tgui/packages/tgui_ch/interfaces/GyrotronControl.tsx
+++ b/tgui/packages/tgui_ch/interfaces/GyrotronControl.tsx
@@ -12,7 +12,17 @@ export const GyrotronControl = () => (
 );
 
 type Data = {
-  gyros: { name: string; x; y; z; active: BooleanLike; deployed: BooleanLike; ref: string; fire_delay; strength }[];
+  gyros: {
+    name: string;
+    x;
+    y;
+    z;
+    active: BooleanLike;
+    deployed: BooleanLike;
+    ref: string;
+    fire_delay;
+    strength;
+  }[];
 };
 
 export const GyrotronControlContent = (props, context) => {
@@ -23,7 +33,13 @@ export const GyrotronControlContent = (props, context) => {
   return (
     <Section
       title="Gyrotrons"
-      buttons={<Button icon="pencil-alt" content={'Set Tag'} onClick={() => act('set_tag')} />}>
+      buttons={
+        <Button
+          icon="pencil-alt"
+          content={'Set Tag'}
+          onClick={() => act('set_tag')}
+        />
+      }>
       <Table>
         <Table.Row header>
           <Table.Cell>Name</Table.Cell>
diff --git a/tgui/packages/tgui_ch/interfaces/Holodeck.js b/tgui/packages/tgui_ch/interfaces/Holodeck.js
index f1907694da..7b932de916 100644
--- a/tgui/packages/tgui_ch/interfaces/Holodeck.js
+++ b/tgui/packages/tgui_ch/interfaces/Holodeck.js
@@ -5,7 +5,15 @@ import { Window } from '../layouts';
 export const Holodeck = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { supportedPrograms, restrictedPrograms, currentProgram, isSilicon, safetyDisabled, emagged, gravity } = data;
+  const {
+    supportedPrograms,
+    restrictedPrograms,
+    currentProgram,
+    isSilicon,
+    safetyDisabled,
+    emagged,
+    gravity,
+  } = data;
 
   let programsToShow = supportedPrograms;
 
@@ -45,10 +53,17 @@ export const Holodeck = (props, context) => {
         <Section title="Controls">
           <LabeledList>
             <LabeledList.Item label="Safeties">
-              {safetyDisabled ? <Box color="bad">DISABLED</Box> : <Box color="good">ENABLED</Box>}
+              {safetyDisabled ? (
+                <Box color="bad">DISABLED</Box>
+              ) : (
+                <Box color="good">ENABLED</Box>
+              )}
             </LabeledList.Item>
             <LabeledList.Item label="Gravity">
-              <Button icon="user-astronaut" selected={gravity} onClick={() => act('gravity')}>
+              <Button
+                icon="user-astronaut"
+                selected={gravity}
+                onClick={() => act('gravity')}>
                 {gravity ? 'Enabled' : 'Disabled'}
               </Button>
             </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/ICAssembly.js b/tgui/packages/tgui_ch/interfaces/ICAssembly.js
index 51ffd53135..077adad7ab 100644
--- a/tgui/packages/tgui_ch/interfaces/ICAssembly.js
+++ b/tgui/packages/tgui_ch/interfaces/ICAssembly.js
@@ -33,7 +33,8 @@ export const ICAssembly = (props, context) => {
                 }}
                 value={total_parts / max_components}
                 maxValue={1}>
-                {total_parts} / {max_components} ({round((total_parts / max_components) * 100, 1)}%)
+                {total_parts} / {max_components} (
+                {round((total_parts / max_components) * 100, 1)}%)
               </ProgressBar>
             </LabeledList.Item>
             <LabeledList.Item label="Complexity">
@@ -45,7 +46,8 @@ export const ICAssembly = (props, context) => {
                 }}
                 value={total_complexity / max_complexity}
                 maxValue={1}>
-                {total_complexity} / {max_complexity} ({round((total_complexity / max_complexity) * 100, 1)}%)
+                {total_complexity} / {max_complexity} (
+                {round((total_complexity / max_complexity) * 100, 1)}%)
               </ProgressBar>
             </LabeledList.Item>
             <LabeledList.Item label="Cell Charge">
@@ -58,23 +60,33 @@ export const ICAssembly = (props, context) => {
                   }}
                   value={battery_charge / battery_max}
                   maxValue={1}>
-                  {battery_charge} / {battery_max} ({round((battery_charge / battery_max) * 100, 1)}%)
+                  {battery_charge} / {battery_max} (
+                  {round((battery_charge / battery_max) * 100, 1)}%)
                 </ProgressBar>
               )) || <Box color="bad">No cell detected.</Box>}
             </LabeledList.Item>
             <LabeledList.Item label="Net Energy">
               {(net_power === 0 && '0 W/s') || (
-                <AnimatedNumber value={net_power} format={(val) => '-' + formatPower(Math.abs(val)) + '/s'} />
+                <AnimatedNumber
+                  value={net_power}
+                  format={(val) => '-' + formatPower(Math.abs(val)) + '/s'}
+                />
               )}
             </LabeledList.Item>
           </LabeledList>
         </Section>
         {(unremovable_circuits.length && (
-          <ICAssemblyCircuits title="Built-in Components" circuits={unremovable_circuits} />
+          <ICAssemblyCircuits
+            title="Built-in Components"
+            circuits={unremovable_circuits}
+          />
         )) ||
           null}
         {(removable_circuits.length && (
-          <ICAssemblyCircuits title="Removable Components" circuits={removable_circuits} />
+          <ICAssemblyCircuits
+            title="Removable Components"
+            circuits={removable_circuits}
+          />
         )) ||
           null}
       </Window.Content>
@@ -92,19 +104,29 @@ const ICAssemblyCircuits = (props, context) => {
       <LabeledList>
         {circuits.map((circuit) => (
           <LabeledList.Item key={circuit.ref} label={circuit.name}>
-            <Button icon="eye" onClick={() => act('open_circuit', { ref: circuit.ref })}>
+            <Button
+              icon="eye"
+              onClick={() => act('open_circuit', { ref: circuit.ref })}>
               View
             </Button>
-            <Button icon="eye" onClick={() => act('rename_circuit', { ref: circuit.ref })}>
+            <Button
+              icon="eye"
+              onClick={() => act('rename_circuit', { ref: circuit.ref })}>
               Rename
             </Button>
-            <Button icon="eye" onClick={() => act('scan_circuit', { ref: circuit.ref })}>
+            <Button
+              icon="eye"
+              onClick={() => act('scan_circuit', { ref: circuit.ref })}>
               Debugger Scan
             </Button>
-            <Button icon="eye" onClick={() => act('remove_circuit', { ref: circuit.ref })}>
+            <Button
+              icon="eye"
+              onClick={() => act('remove_circuit', { ref: circuit.ref })}>
               Remove
             </Button>
-            <Button icon="eye" onClick={() => act('bottom_circuit', { ref: circuit.ref })}>
+            <Button
+              icon="eye"
+              onClick={() => act('bottom_circuit', { ref: circuit.ref })}>
               Move to Bottom
             </Button>
           </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/ICCircuit.js b/tgui/packages/tgui_ch/interfaces/ICCircuit.js
index 75a6649ba3..812917fb45 100644
--- a/tgui/packages/tgui_ch/interfaces/ICCircuit.js
+++ b/tgui/packages/tgui_ch/interfaces/ICCircuit.js
@@ -37,11 +37,15 @@ export const ICCircuit = (props, context) => {
           <LabeledList>
             <LabeledList.Item label="Complexity">{complexity}</LabeledList.Item>
             {(power_draw_idle && (
-              <LabeledList.Item label="Power Draw (Idle)">{formatPower(power_draw_idle)}</LabeledList.Item>
+              <LabeledList.Item label="Power Draw (Idle)">
+                {formatPower(power_draw_idle)}
+              </LabeledList.Item>
             )) ||
               null}
             {(power_draw_per_use && (
-              <LabeledList.Item label="Power Draw (Active)">{formatPower(power_draw_per_use)}</LabeledList.Item>
+              <LabeledList.Item label="Power Draw (Active)">
+                {formatPower(power_draw_per_use)}
+              </LabeledList.Item>
             )) ||
               null}
           </LabeledList>
@@ -58,7 +62,13 @@ export const ICCircuit = (props, context) => {
             )) ||
               null}
             <Flex.Item
-              basis={inputs.length && outputs.length ? '33%' : inputs.length || outputs.length ? '45%' : '100%'}>
+              basis={
+                inputs.length && outputs.length
+                  ? '33%'
+                  : inputs.length || outputs.length
+                    ? '45%'
+                    : '100%'
+              }>
               <Section title={displayed_name} mb={1}>
                 <Box>{desc}</Box>
               </Section>
@@ -98,7 +108,9 @@ const ICIODisplay = (props, context) => {
       <Button onClick={() => act('pin_name', { pin: iopin.ref })}>
         {decodeHtmlEntities(iopin.type)}: {iopin.name}
       </Button>
-      <Button onClick={() => act('pin_data', { pin: iopin.ref })}>{iopin.data}</Button>
+      <Button onClick={() => act('pin_data', { pin: iopin.ref })}>
+        {iopin.data}
+      </Button>
       <ICLinkDisplay pin={iopin} />
     </Box>
   ));
@@ -111,8 +123,14 @@ const ICLinkDisplay = (props, context) => {
 
   return pin.linked.map((link) => (
     <Box inline key={link.ref}>
-      <Button onClick={() => act('pin_unwire', { pin: pin.ref, link: link.ref })}>{link.name}</Button>@&nbsp;
-      <Button onClick={() => act('examine', { ref: link.holder_ref })}>{link.holder_name}</Button>
+      <Button
+        onClick={() => act('pin_unwire', { pin: pin.ref, link: link.ref })}>
+        {link.name}
+      </Button>
+      @&nbsp;
+      <Button onClick={() => act('examine', { ref: link.holder_ref })}>
+        {link.holder_name}
+      </Button>
     </Box>
   ));
 };
diff --git a/tgui/packages/tgui_ch/interfaces/ICPrinter.js b/tgui/packages/tgui_ch/interfaces/ICPrinter.js
index dc1e218335..58ccc73b34 100644
--- a/tgui/packages/tgui_ch/interfaces/ICPrinter.js
+++ b/tgui/packages/tgui_ch/interfaces/ICPrinter.js
@@ -6,7 +6,16 @@ import { sortBy, filter } from 'common/collections';
 export const ICPrinter = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { metal, max_metal, metal_per_sheet, debug, upgraded, can_clone, assembly_to_clone, categories } = data;
+  const {
+    metal,
+    max_metal,
+    metal_per_sheet,
+    debug,
+    upgraded,
+    can_clone,
+    assembly_to_clone,
+    categories,
+  } = data;
 
   return (
     <Window width={600} height={630}>
@@ -18,10 +27,17 @@ export const ICPrinter = (props, context) => {
                 {metal / metal_per_sheet} / {max_metal / metal_per_sheet} sheets
               </ProgressBar>
             </LabeledList.Item>
-            <LabeledList.Item label="Circuits Available">{upgraded ? 'Advanced' : 'Regular'}</LabeledList.Item>
-            <LabeledList.Item label="Assembly Cloning">{can_clone ? 'Available' : 'Unavailable'}</LabeledList.Item>
+            <LabeledList.Item label="Circuits Available">
+              {upgraded ? 'Advanced' : 'Regular'}
+            </LabeledList.Item>
+            <LabeledList.Item label="Assembly Cloning">
+              {can_clone ? 'Available' : 'Unavailable'}
+            </LabeledList.Item>
           </LabeledList>
-          <Box mt={1}>Note: A red component name means that the printer must be upgraded to create that component.</Box>
+          <Box mt={1}>
+            Note: A red component name means that the printer must be upgraded
+            to create that component.
+          </Box>
         </Section>
         <ICPrinterCategories />
       </Window.Content>
@@ -46,9 +62,15 @@ const ICPrinterCategories = (props, context) => {
 
   const { categories, debug } = data;
 
-  const [categoryTarget, setcategoryTarget] = useSharedState(context, 'categoryTarget', null);
+  const [categoryTarget, setcategoryTarget] = useSharedState(
+    context,
+    'categoryTarget',
+    null
+  );
 
-  const selectedCategory = filter((cat) => cat.name === categoryTarget)(categories)[0];
+  const selectedCategory = filter((cat) => cat.name === categoryTarget)(
+    categories
+  )[0];
 
   return (
     <Section title="Circuits">
@@ -69,22 +91,24 @@ const ICPrinterCategories = (props, context) => {
           {(selectedCategory && (
             <Section>
               <LabeledList>
-                {sortBy((item) => item.name)(selectedCategory.items).map((item) => (
-                  <LabeledList.Item
-                    key={item.name}
-                    label={item.name}
-                    labelColor={item.can_build ? 'good' : 'bad'}
-                    buttons={
-                      <Button
-                        disabled={!canBuild(item, data)}
-                        icon="print"
-                        onClick={() => act('build', { build: item.path })}>
-                        Print
-                      </Button>
-                    }>
-                    {item.desc}
-                  </LabeledList.Item>
-                ))}
+                {sortBy((item) => item.name)(selectedCategory.items).map(
+                  (item) => (
+                    <LabeledList.Item
+                      key={item.name}
+                      label={item.name}
+                      labelColor={item.can_build ? 'good' : 'bad'}
+                      buttons={
+                        <Button
+                          disabled={!canBuild(item, data)}
+                          icon="print"
+                          onClick={() => act('build', { build: item.path })}>
+                          Print
+                        </Button>
+                      }>
+                      {item.desc}
+                    </LabeledList.Item>
+                  )
+                )}
               </LabeledList>
             </Section>
           )) ||
diff --git a/tgui/packages/tgui_ch/interfaces/IDCard.js b/tgui/packages/tgui_ch/interfaces/IDCard.js
index 854a43b9c1..61ba2071cb 100644
--- a/tgui/packages/tgui_ch/interfaces/IDCard.js
+++ b/tgui/packages/tgui_ch/interfaces/IDCard.js
@@ -6,7 +6,17 @@ import { RankIcon } from './common/RankIcon';
 export const IDCard = (props, context) => {
   const { data } = useBackend(context);
 
-  const { registered_name, sex, species, age, assignment, fingerprint_hash, blood_type, dna_hash, photo_front } = data;
+  const {
+    registered_name,
+    sex,
+    species,
+    age,
+    assignment,
+    fingerprint_hash,
+    blood_type,
+    dna_hash,
+    photo_front,
+  } = data;
 
   const dataIter = [
     { name: 'Sex', val: sex },
@@ -53,7 +63,10 @@ export const IDCard = (props, context) => {
               </LabeledList>
             </Flex.Item>
           </Flex>
-          <Flex className="IDCard__NamePlate" align="center" justify="space-around">
+          <Flex
+            className="IDCard__NamePlate"
+            align="center"
+            justify="space-around">
             <Flex.Item>
               <Box textAlign="center">{registered_name}</Box>
             </Flex.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/IdentificationComputer.js b/tgui/packages/tgui_ch/interfaces/IdentificationComputer.js
index 1167e697f5..f5f0e2c85b 100644
--- a/tgui/packages/tgui_ch/interfaces/IdentificationComputer.js
+++ b/tgui/packages/tgui_ch/interfaces/IdentificationComputer.js
@@ -36,16 +36,27 @@ export const IdentificationComputerContent = (props, context) => {
     <Fragment>
       <Tabs>
         {(!ntos || !!data.have_id_slot) && (
-          <Tabs.Tab icon="home" selected={mode === 0} onClick={() => act('mode', { 'mode_target': 0 })}>
+          <Tabs.Tab
+            icon="home"
+            selected={mode === 0}
+            onClick={() => act('mode', { 'mode_target': 0 })}>
             Access Modification
           </Tabs.Tab>
         )}
-        <Tabs.Tab icon="home" selected={mode === 1} onClick={() => act('mode', { 'mode_target': 1 })}>
+        <Tabs.Tab
+          icon="home"
+          selected={mode === 1}
+          onClick={() => act('mode', { 'mode_target': 1 })}>
           Crew Manifest
         </Tabs.Tab>
         {!ntos ||
           (!!data.have_printer && (
-            <Tabs.Tab float="right" icon="print" onClick={() => act('print')} disabled={!mode && !has_modify} color="">
+            <Tabs.Tab
+              float="right"
+              icon="print"
+              onClick={() => act('print')}
+              disabled={!mode && !has_modify}
+              color="">
               Print
             </Tabs.Tab>
           ))}
@@ -88,11 +99,21 @@ export const IdentificationComputerAccessModification = (props, context) => {
       )}
       <LabeledList>
         <LabeledList.Item label="Target Identitity">
-          <Button icon="eject" fluid content={target_name} onClick={() => act('modify')} />
+          <Button
+            icon="eject"
+            fluid
+            content={target_name}
+            onClick={() => act('modify')}
+          />
         </LabeledList.Item>
         {!ntos && (
           <LabeledList.Item label="Authorized Identitity">
-            <Button icon="eject" fluid content={scan_name} onClick={() => act('scan')} />
+            <Button
+              icon="eject"
+              fluid
+              content={scan_name}
+              onClick={() => act('scan')}
+            />
           </LabeledList.Item>
         )}
       </LabeledList>
@@ -101,10 +122,18 @@ export const IdentificationComputerAccessModification = (props, context) => {
           <Section title="Details" level={2}>
             <LabeledList>
               <LabeledList.Item label="Registered Name">
-                <Input value={target_owner} fluid onInput={(e, val) => act('reg', { reg: val })} />
+                <Input
+                  value={target_owner}
+                  fluid
+                  onInput={(e, val) => act('reg', { reg: val })}
+                />
               </LabeledList.Item>
               <LabeledList.Item label="Account Number">
-                <Input value={account_number} fluid onInput={(e, val) => act('account', { account: val })} />
+                <Input
+                  value={account_number}
+                  fluid
+                  onInput={(e, val) => act('account', { account: val })}
+                />
               </LabeledList.Item>
               <LabeledList.Item label="Dismissals">
                 <Button.Confirm
@@ -113,7 +142,9 @@ export const IdentificationComputerAccessModification = (props, context) => {
                   confirmIcon="fire"
                   fluid
                   content={'Dismiss ' + target_owner}
-                  confirmContent={'You are dismissing ' + target_owner + ', confirm?'}
+                  confirmContent={
+                    'You are dismissing ' + target_owner + ', confirm?'
+                  }
                   onClick={() => act('terminate')}
                 />
               </LabeledList.Item>
@@ -132,13 +163,16 @@ export const IdentificationComputerAccessModification = (props, context) => {
                         <Button
                           key={job.job}
                           selected={job.job === id_rank}
-                          onClick={() => act('assign', { 'assign_target': job.job })}>
+                          onClick={() =>
+                            act('assign', { 'assign_target': job.job })
+                          }>
                           {decodeHtmlEntities(job.display_name)}
                         </Button>
                       ))}
                     </Table.Cell>
                   </Table.Row>
-                  <Box mt={-1}>&nbsp;</Box> {/* Hacky little thing to add spacing */}
+                  <Box mt={-1}>&nbsp;</Box>{' '}
+                  {/* Hacky little thing to add spacing */}
                 </Fragment>
               ))}
               <Table.Row>
@@ -146,7 +180,12 @@ export const IdentificationComputerAccessModification = (props, context) => {
                   Special
                 </Table.Cell>
                 <Table.Cell>
-                  <Button onClick={() => act('assign', { 'assign_target': 'Custom' })}>Custom</Button>
+                  <Button
+                    onClick={() =>
+                      act('assign', { 'assign_target': 'Custom' })
+                    }>
+                    Custom
+                  </Button>
                 </Table.Cell>
               </Table.Row>
             </Table>
@@ -158,7 +197,12 @@ export const IdentificationComputerAccessModification = (props, context) => {
                   <Button
                     fluid
                     selected={access.allowed}
-                    onClick={() => act('access', { access_target: access.ref, allowed: access.allowed })}>
+                    onClick={() =>
+                      act('access', {
+                        access_target: access.ref,
+                        allowed: access.allowed,
+                      })
+                    }>
                     {decodeHtmlEntities(access.desc)}
                   </Button>
                 </Box>
@@ -192,7 +236,12 @@ export const IdentificationComputerRegions = (props, context) => {
                 <Button
                   fluid
                   selected={access.allowed}
-                  onClick={() => act(actName, { access_target: access.ref, allowed: access.allowed })}>
+                  onClick={() =>
+                    act(actName, {
+                      access_target: access.ref,
+                      allowed: access.allowed,
+                    })
+                  }>
                   {decodeHtmlEntities(access.desc)}
                 </Button>
               </Box>
diff --git a/tgui/packages/tgui_ch/interfaces/InventoryPanel.tsx b/tgui/packages/tgui_ch/interfaces/InventoryPanel.tsx
index d8a954b223..5bbd2dd642 100644
--- a/tgui/packages/tgui_ch/interfaces/InventoryPanel.tsx
+++ b/tgui/packages/tgui_ch/interfaces/InventoryPanel.tsx
@@ -22,7 +22,10 @@ export const InventoryPanel = (props, context) => {
               slots.length &&
               slots.map((slot) => (
                 <LabeledList.Item key={slot.name} label={slot.name}>
-                  <Button mb={-1} icon={slot.item ? 'hand-paper' : 'gift'} onClick={() => act(slot.act)}>
+                  <Button
+                    mb={-1}
+                    icon={slot.item ? 'hand-paper' : 'gift'}
+                    onClick={() => act(slot.act)}>
                     {slot.item || 'Nothing'}
                   </Button>
                 </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/InventoryPanelHuman.js b/tgui/packages/tgui_ch/interfaces/InventoryPanelHuman.js
index 82ba34ef38..0e61ab6340 100644
--- a/tgui/packages/tgui_ch/interfaces/InventoryPanelHuman.js
+++ b/tgui/packages/tgui_ch/interfaces/InventoryPanelHuman.js
@@ -27,7 +27,10 @@ export const InventoryPanelHuman = (props, context) => {
               slots.length &&
               slots.map((slot) => (
                 <LabeledList.Item key={slot.name} label={slot.name}>
-                  <Button mb={-1} icon={slot.item ? 'hand-paper' : 'gift'} onClick={() => act(slot.act, slot.params)}>
+                  <Button
+                    mb={-1}
+                    icon={slot.item ? 'hand-paper' : 'gift'}
+                    onClick={() => act(slot.act, slot.params)}>
                     {slot.item || 'Nothing'}
                   </Button>
                 </LabeledList.Item>
@@ -37,7 +40,10 @@ export const InventoryPanelHuman = (props, context) => {
               specialSlots.length &&
               specialSlots.map((slot) => (
                 <LabeledList.Item key={slot.name} label={slot.name}>
-                  <Button mb={-1} icon={slot.item ? 'hand-paper' : 'gift'} onClick={() => act(slot.act, slot.params)}>
+                  <Button
+                    mb={-1}
+                    icon={slot.item ? 'hand-paper' : 'gift'}
+                    onClick={() => act(slot.act, slot.params)}>
                     {slot.item || 'Nothing'}
                   </Button>
                 </LabeledList.Item>
@@ -45,38 +51,62 @@ export const InventoryPanelHuman = (props, context) => {
           </LabeledList>
         </Section>
         <Section title="Actions">
-          <Button fluid icon="running" onClick={() => act('targetSlot', { slot: 'splints' })}>
+          <Button
+            fluid
+            icon="running"
+            onClick={() => act('targetSlot', { slot: 'splints' })}>
             Remove Splints
           </Button>
-          <Button fluid icon="hand-paper" onClick={() => act('targetSlot', { slot: 'pockets' })}>
+          <Button
+            fluid
+            icon="hand-paper"
+            onClick={() => act('targetSlot', { slot: 'pockets' })}>
             Empty Pockets
           </Button>
           {(internalsValid && (
-            <Button fluid icon="lungs" onClick={() => act('targetSlot', { slot: 'internals' })}>
+            <Button
+              fluid
+              icon="lungs"
+              onClick={() => act('targetSlot', { slot: 'internals' })}>
               Set Internals
             </Button>
           )) ||
             null}
           {(sensors && (
-            <Button fluid icon="book-medical" onClick={() => act('targetSlot', { slot: 'sensors' })}>
+            <Button
+              fluid
+              icon="book-medical"
+              onClick={() => act('targetSlot', { slot: 'sensors' })}>
               Set Sensors
             </Button>
           )) ||
             null}
           {(handcuffed && (
-            <Button fluid color="bad" icon="unlink" onClick={() => act('targetSlot', handcuffedParams)}>
+            <Button
+              fluid
+              color="bad"
+              icon="unlink"
+              onClick={() => act('targetSlot', handcuffedParams)}>
               Handcuffed
             </Button>
           )) ||
             null}
           {(legcuffed && (
-            <Button fluid color="bad" icon="unlink" onClick={() => act('targetSlot', legcuffedParams)}>
+            <Button
+              fluid
+              color="bad"
+              icon="unlink"
+              onClick={() => act('targetSlot', legcuffedParams)}>
               Legcuffed
             </Button>
           )) ||
             null}
           {(accessory && (
-            <Button fluid color="bad" icon="unlink" onClick={() => act('targetSlot', { slot: 'tie' })}>
+            <Button
+              fluid
+              color="bad"
+              icon="unlink"
+              onClick={() => act('targetSlot', { slot: 'tie' })}>
               Remove Accessory
             </Button>
           )) ||
diff --git a/tgui/packages/tgui_ch/interfaces/IsolationCentrifuge.js b/tgui/packages/tgui_ch/interfaces/IsolationCentrifuge.js
index d25bf183cb..e1aa40dced 100644
--- a/tgui/packages/tgui_ch/interfaces/IsolationCentrifuge.js
+++ b/tgui/packages/tgui_ch/interfaces/IsolationCentrifuge.js
@@ -6,17 +6,22 @@ import { Window } from '../layouts';
 export const IsolationCentrifuge = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { busy, antibodies, pathogens, is_antibody_sample, sample_inserted } = data;
+  const { busy, antibodies, pathogens, is_antibody_sample, sample_inserted } =
+    data;
 
   let blood_sample = <Box color="average">No vial detected.</Box>;
 
   if (sample_inserted) {
     if (!antibodies && !pathogens) {
-      blood_sample = <Box color="average">No antibodies or viral strains detected.</Box>;
+      blood_sample = (
+        <Box color="average">No antibodies or viral strains detected.</Box>
+      );
     } else {
       blood_sample = (
         <Fragment>
-          {antibodies ? <Section title="Antibodies">{antibodies}</Section> : null}
+          {antibodies ? (
+            <Section title="Antibodies">{antibodies}</Section>
+          ) : null}
           {pathogens.length ? (
             <Section title="Pathogens">
               <LabeledList>
@@ -44,7 +49,8 @@ export const IsolationCentrifuge = (props, context) => {
           </Section>
         ) : (
           <Fragment>
-            <Section title={is_antibody_sample ? 'Antibody Sample' : 'Blood Sample'}>
+            <Section
+              title={is_antibody_sample ? 'Antibody Sample' : 'Blood Sample'}>
               <Flex spacing={1} mb={1}>
                 <Flex.Item grow={1}>
                   <Button
@@ -72,7 +78,11 @@ export const IsolationCentrifuge = (props, context) => {
                 <LabeledList>
                   {antibodies && !is_antibody_sample ? (
                     <LabeledList.Item label="Isolate Antibodies">
-                      <Button icon="pen" content={antibodies} onClick={() => act('antibody')} />
+                      <Button
+                        icon="pen"
+                        content={antibodies}
+                        onClick={() => act('antibody')}
+                      />
                     </LabeledList.Item>
                   ) : null}
                   {pathogens.length ? (
@@ -82,7 +92,9 @@ export const IsolationCentrifuge = (props, context) => {
                           key={virus.name}
                           icon="pen"
                           content={virus.name}
-                          onClick={() => act('isolate', { isolate: virus.reference })}
+                          onClick={() =>
+                            act('isolate', { isolate: virus.reference })
+                          }
                         />
                       ))}
                     </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/Jukebox.js b/tgui/packages/tgui_ch/interfaces/Jukebox.js
index 45ffd7cf11..c057a1ed63 100644
--- a/tgui/packages/tgui_ch/interfaces/Jukebox.js
+++ b/tgui/packages/tgui_ch/interfaces/Jukebox.js
@@ -6,7 +6,16 @@ import { Window } from '../layouts';
 export const Jukebox = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { playing, loop_mode, volume, current_track_ref, current_track, current_genre, percent, tracks } = data;
+  const {
+    playing,
+    loop_mode,
+    volume,
+    current_track_ref,
+    current_track,
+    current_genre,
+    percent,
+    tracks,
+  } = data;
 
   let genre_songs =
     tracks.length &&
@@ -34,24 +43,42 @@ export const Jukebox = (props, context) => {
               )) || <Box>Stopped</Box>}
             </LabeledList.Item>
             <LabeledList.Item label="Controls">
-              <Button icon="play" disabled={playing} onClick={() => act('play')}>
+              <Button
+                icon="play"
+                disabled={playing}
+                onClick={() => act('play')}>
                 Play
               </Button>
-              <Button icon="stop" disabled={!playing} onClick={() => act('stop')}>
+              <Button
+                icon="stop"
+                disabled={!playing}
+                onClick={() => act('stop')}>
                 Stop
               </Button>
             </LabeledList.Item>
             <LabeledList.Item label="Loop Mode">
-              <Button icon="play" onClick={() => act('loopmode', { loopmode: 1 })} selected={loop_mode === 1}>
+              <Button
+                icon="play"
+                onClick={() => act('loopmode', { loopmode: 1 })}
+                selected={loop_mode === 1}>
                 Next
               </Button>
-              <Button icon="random" onClick={() => act('loopmode', { loopmode: 2 })} selected={loop_mode === 2}>
+              <Button
+                icon="random"
+                onClick={() => act('loopmode', { loopmode: 2 })}
+                selected={loop_mode === 2}>
                 Shuffle
               </Button>
-              <Button icon="redo" onClick={() => act('loopmode', { loopmode: 3 })} selected={loop_mode === 3}>
+              <Button
+                icon="redo"
+                onClick={() => act('loopmode', { loopmode: 3 })}
+                selected={loop_mode === 3}>
                 Repeat
               </Button>
-              <Button icon="step-forward" onClick={() => act('loopmode', { loopmode: 4 })} selected={loop_mode === 4}>
+              <Button
+                icon="step-forward"
+                onClick={() => act('loopmode', { loopmode: 4 })}
+                selected={loop_mode === 4}>
                 Once
               </Button>
             </LabeledList.Item>
@@ -70,7 +97,9 @@ export const Jukebox = (props, context) => {
                   bad: [0, 25],
                 }}
                 format={(val) => round(val, 1) + '%'}
-                onChange={(e, val) => act('volume', { val: round(val / 100, 2) })}
+                onChange={(e, val) =>
+                  act('volume', { val: round(val / 100, 2) })
+                }
               />
             </LabeledList.Item>
           </LabeledList>
@@ -80,7 +109,11 @@ export const Jukebox = (props, context) => {
             Object.keys(genre_songs)
               .sort()
               .map((genre) => (
-                <Collapsible title={genre} key={genre} color={true_genre === genre ? 'green' : 'default'} child_mt={0}>
+                <Collapsible
+                  title={genre}
+                  key={genre}
+                  color={true_genre === genre ? 'green' : 'default'}
+                  child_mt={0}>
                   <div style={{ 'margin-left': '1em' }}>
                     {genre_songs[genre].map((track) => (
                       <Button
@@ -88,7 +121,9 @@ export const Jukebox = (props, context) => {
                         icon="play"
                         key={track.ref}
                         selected={current_track_ref === track.ref}
-                        onClick={() => act('change_track', { change_track: track.ref })}>
+                        onClick={() =>
+                          act('change_track', { change_track: track.ref })
+                        }>
                         {track.title}
                       </Button>
                     ))}
diff --git a/tgui/packages/tgui_ch/interfaces/LawManager.js b/tgui/packages/tgui_ch/interfaces/LawManager.js
index 029f765b04..2121ced226 100644
--- a/tgui/packages/tgui_ch/interfaces/LawManager.js
+++ b/tgui/packages/tgui_ch/interfaces/LawManager.js
@@ -11,7 +11,8 @@ export const LawManager = (props, context) => {
   return (
     <Window width={800} height={600} resizable>
       <Window.Content scrollable>
-        {(isSlaved && <NoticeBox info>Law-synced to {isSlaved}</NoticeBox>) || null}
+        {(isSlaved && <NoticeBox info>Law-synced to {isSlaved}</NoticeBox>) ||
+          null}
         <LawManagerContent />
       </Window.Content>
     </Window>
@@ -71,9 +72,18 @@ const LawManagerLaws = (props, context) => {
 
   return (
     <Section>
-      {(has_ion_laws && <LawsTable laws={ion_laws} title={ion_law_nr + ' Laws:'} mt={-2} />) || null}
-      {((has_zeroth_laws || has_inherent_laws) && <LawsTable laws={allLaws} title="Inherent Laws" mt={-2} />) || null}
-      {(has_supplied_laws && <LawsTable laws={supplied_laws} title="Supplied Laws" mt={-2} />) || null}
+      {(has_ion_laws && (
+        <LawsTable laws={ion_laws} title={ion_law_nr + ' Laws:'} mt={-2} />
+      )) ||
+        null}
+      {((has_zeroth_laws || has_inherent_laws) && (
+        <LawsTable laws={allLaws} title="Inherent Laws" mt={-2} />
+      )) ||
+        null}
+      {(has_supplied_laws && (
+        <LawsTable laws={supplied_laws} title="Supplied Laws" mt={-2} />
+      )) ||
+        null}
       <Section level={2} title="Controls" mt={-2}>
         <LabeledList>
           <LabeledList.Item label="Statement Channel">
@@ -82,7 +92,9 @@ const LawManagerLaws = (props, context) => {
                 key={chan.channel}
                 content={chan.channel}
                 selected={channel === chan.channel}
-                onClick={() => act('law_channel', { law_channel: chan.channel })}
+                onClick={() =>
+                  act('law_channel', { law_channel: chan.channel })
+                }
               />
             ))}
           </LabeledList.Item>
@@ -114,7 +126,13 @@ const LawManagerLaws = (props, context) => {
               <Table.Row>
                 <Table.Cell collapsing>Zero</Table.Cell>
                 <Table.Cell>
-                  <Input value={zeroth_law} fluid onChange={(e, val) => act('change_zeroth_law', { val: val })} />
+                  <Input
+                    value={zeroth_law}
+                    fluid
+                    onChange={(e, val) =>
+                      act('change_zeroth_law', { val: val })
+                    }
+                  />
                 </Table.Cell>
                 <Table.Cell>N/A</Table.Cell>
                 <Table.Cell collapsing>
@@ -128,7 +146,11 @@ const LawManagerLaws = (props, context) => {
             <Table.Row>
               <Table.Cell collapsing>Ion</Table.Cell>
               <Table.Cell>
-                <Input value={ion_law} fluid onChange={(e, val) => act('change_ion_law', { val: val })} />
+                <Input
+                  value={ion_law}
+                  fluid
+                  onChange={(e, val) => act('change_ion_law', { val: val })}
+                />
               </Table.Cell>
               <Table.Cell>N/A</Table.Cell>
               <Table.Cell collapsing>
@@ -140,7 +162,13 @@ const LawManagerLaws = (props, context) => {
             <Table.Row>
               <Table.Cell>Inherent</Table.Cell>
               <Table.Cell>
-                <Input value={inherent_law} fluid onChange={(e, val) => act('change_inherent_law', { val: val })} />
+                <Input
+                  value={inherent_law}
+                  fluid
+                  onChange={(e, val) =>
+                    act('change_inherent_law', { val: val })
+                  }
+                />
               </Table.Cell>
               <Table.Cell>N/A</Table.Cell>
               <Table.Cell>
@@ -152,10 +180,18 @@ const LawManagerLaws = (props, context) => {
             <Table.Row>
               <Table.Cell>Supplied</Table.Cell>
               <Table.Cell>
-                <Input value={supplied_law} fluid onChange={(e, val) => act('change_supplied_law', { val: val })} />
+                <Input
+                  value={supplied_law}
+                  fluid
+                  onChange={(e, val) =>
+                    act('change_supplied_law', { val: val })
+                  }
+                />
               </Table.Cell>
               <Table.Cell>
-                <Button icon="pen" onClick={() => act('change_supplied_law_position')}>
+                <Button
+                  icon="pen"
+                  onClick={() => act('change_supplied_law_position')}>
                   {supplied_law_position}
                 </Button>
               </Table.Cell>
@@ -205,7 +241,9 @@ const LawsTable = (props, context) => {
                   fluid
                   icon="volume-up"
                   selected={law.state}
-                  onClick={() => act('state_law', { ref: law.ref, state_law: !law.state })}>
+                  onClick={() =>
+                    act('state_law', { ref: law.ref, state_law: !law.state })
+                  }>
                   {law.state ? 'Yes' : 'No'}
                 </Button>
               </Table.Cell>
@@ -248,7 +286,8 @@ const LawManagerLawSets = (props, context) => {
   return (
     <Fragment>
       <NoticeBox>
-        Remember: Stating laws other than those currently loaded may be grounds for decommissioning! - NanoTrasen
+        Remember: Stating laws other than those currently loaded may be grounds
+        for decommissioning! - NanoTrasen
       </NoticeBox>
       {(law_sets.length &&
         law_sets.map((laws) => (
@@ -260,24 +299,42 @@ const LawManagerLawSets = (props, context) => {
                 <Button
                   disabled={!isMalf}
                   icon="sync"
-                  onClick={() => act('transfer_laws', { transfer_laws: laws.ref })}>
+                  onClick={() =>
+                    act('transfer_laws', { transfer_laws: laws.ref })
+                  }>
                   Load Laws
                 </Button>
-                <Button icon="volume-up" onClick={() => act('state_law_set', { state_law_set: laws.ref })}>
+                <Button
+                  icon="volume-up"
+                  onClick={() =>
+                    act('state_law_set', { state_law_set: laws.ref })
+                  }>
                   State Laws
                 </Button>
               </Fragment>
             }>
             {(laws.laws.has_ion_laws && (
-              <LawsTable noButtons laws={laws.laws.ion_laws} title={laws.laws.ion_law_nr + ' Laws:'} />
+              <LawsTable
+                noButtons
+                laws={laws.laws.ion_laws}
+                title={laws.laws.ion_law_nr + ' Laws:'}
+              />
             )) ||
               null}
             {((laws.laws.has_zeroth_laws || laws.laws.has_inherent_laws) && (
-              <LawsTable noButtons laws={laws.laws.zeroth_laws.concat(laws.laws.inherent_laws)} title={laws.header} />
+              <LawsTable
+                noButtons
+                laws={laws.laws.zeroth_laws.concat(laws.laws.inherent_laws)}
+                title={laws.header}
+              />
             )) ||
               null}
             {(laws.laws.has_supplied_laws && (
-              <LawsTable noButtons laws={laws.laws.supplied_laws} title="Supplied Laws" />
+              <LawsTable
+                noButtons
+                laws={laws.laws.supplied_laws}
+                title="Supplied Laws"
+              />
             )) ||
               null}
           </Section>
diff --git a/tgui/packages/tgui_ch/interfaces/ListInputModal.tsx b/tgui/packages/tgui_ch/interfaces/ListInputModal.tsx
index 74d03a8644..7cb207c9dc 100644
--- a/tgui/packages/tgui_ch/interfaces/ListInputModal.tsx
+++ b/tgui/packages/tgui_ch/interfaces/ListInputModal.tsx
@@ -16,10 +16,29 @@ type ListInputData = {
 
 export const ListInputModal = (props, context) => {
   const { act, data } = useBackend<ListInputData>(context);
-  const { items = [], message = '', init_value, large_buttons, timeout, title } = data;
-  const [selected, setSelected] = useLocalState<number>(context, 'selected', items.indexOf(init_value));
-  const [searchBarVisible, setSearchBarVisible] = useLocalState<boolean>(context, 'searchBarVisible', items.length > 9);
-  const [searchQuery, setSearchQuery] = useLocalState<string>(context, 'searchQuery', '');
+  const {
+    items = [],
+    message = '',
+    init_value,
+    large_buttons,
+    timeout,
+    title,
+  } = data;
+  const [selected, setSelected] = useLocalState<number>(
+    context,
+    'selected',
+    items.indexOf(init_value)
+  );
+  const [searchBarVisible, setSearchBarVisible] = useLocalState<boolean>(
+    context,
+    'searchBarVisible',
+    items.length > 9
+  );
+  const [searchQuery, setSearchQuery] = useLocalState<string>(
+    context,
+    'searchQuery',
+    ''
+  );
   // User presses up or down on keyboard
   // Simulates clicking an item
   const onArrowKey = (key: number) => {
@@ -80,9 +99,12 @@ export const ListInputModal = (props, context) => {
     setSearchBarVisible(!searchBarVisible);
     setSearchQuery('');
   };
-  const filteredItems = items.filter((item) => item?.toLowerCase().includes(searchQuery.toLowerCase()));
+  const filteredItems = items.filter((item) =>
+    item?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
   // Dynamically changes the window height based on the message.
-  const windowHeight = 325 + Math.ceil(message.length / 3) + (large_buttons ? 5 : 0);
+  const windowHeight =
+    325 + Math.ceil(message.length / 3) + (large_buttons ? 5 : 0);
   // Grabs the cursor when no search bar is visible.
   if (!searchBarVisible) {
     setTimeout(() => document!.getElementById(selected.toString())?.focus(), 1);
@@ -163,7 +185,8 @@ export const ListInputModal = (props, context) => {
  */
 const ListDisplay = (props, context) => {
   const { act } = useBackend<ListInputData>(context);
-  const { filteredItems, onClick, onFocusSearch, searchBarVisible, selected } = props;
+  const { filteredItems, onClick, onFocusSearch, searchBarVisible, selected } =
+    props;
 
   return (
     <Section fill scrollable tabIndex={0}>
diff --git a/tgui/packages/tgui_ch/interfaces/LookingGlass.js b/tgui/packages/tgui_ch/interfaces/LookingGlass.js
index 6fc1d5ecc7..f759ca9879 100644
--- a/tgui/packages/tgui_ch/interfaces/LookingGlass.js
+++ b/tgui/packages/tgui_ch/interfaces/LookingGlass.js
@@ -27,12 +27,21 @@ export const LookingGlass = (props, context) => {
         <Section title="Controls">
           <LabeledList>
             <LabeledList.Item label="Gravity">
-              <Button fluid icon="user-astronaut" selected={gravity} onClick={() => act('gravity')}>
+              <Button
+                fluid
+                icon="user-astronaut"
+                selected={gravity}
+                onClick={() => act('gravity')}>
                 {gravity ? 'Enabled' : 'Disabled'}
               </Button>
             </LabeledList.Item>
             <LabeledList.Item label="Full Immersion">
-              <Button mt={-1} fluid icon="eye" selected={immersion} onClick={() => act('immersion')}>
+              <Button
+                mt={-1}
+                fluid
+                icon="eye"
+                selected={immersion}
+                onClick={() => act('immersion')}>
                 {immersion ? 'Enabled' : 'Disabled'}
               </Button>
             </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/MechaControlConsole.js b/tgui/packages/tgui_ch/interfaces/MechaControlConsole.js
index 1c5ea441d5..e7172589fb 100644
--- a/tgui/packages/tgui_ch/interfaces/MechaControlConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/MechaControlConsole.js
@@ -16,7 +16,9 @@ export const MechaControlConsole = (props, context) => {
               height="400px"
               style={{ 'overflow-y': 'auto' }}
               title="Log"
-              buttons={<Button icon="window-close" onClick={() => act('clear_log')} />}>
+              buttons={
+                <Button icon="window-close" onClick={() => act('clear_log')} />
+              }>
               {stored_data.map((data) => (
                 <Box key={data.time}>
                   <Box color="label">
@@ -36,10 +38,14 @@ export const MechaControlConsole = (props, context) => {
               title={beacon.name}
               buttons={
                 <Fragment>
-                  <Button icon="comment" onClick={() => act('send_message', { mt: beacon.ref })}>
+                  <Button
+                    icon="comment"
+                    onClick={() => act('send_message', { mt: beacon.ref })}>
                     Message
                   </Button>
-                  <Button icon="eye" onClick={() => act('get_log', { mt: beacon.ref })}>
+                  <Button
+                    icon="eye"
+                    onClick={() => act('get_log', { mt: beacon.ref })}>
                     View Log
                   </Button>
                   <Button.Confirm
@@ -55,7 +61,10 @@ export const MechaControlConsole = (props, context) => {
                   <ProgressBar
                     ranges={{
                       good: [beacon.maxHealth * 0.75, Infinity],
-                      average: [beacon.maxHealth * 0.5, beacon.maxHealth * 0.75],
+                      average: [
+                        beacon.maxHealth * 0.5,
+                        beacon.maxHealth * 0.75,
+                      ],
                       bad: [-Infinity, beacon.maxHealth * 0.5],
                     }}
                     value={beacon.health}
@@ -67,7 +76,10 @@ export const MechaControlConsole = (props, context) => {
                     <ProgressBar
                       ranges={{
                         good: [beacon.cellMaxCharge * 0.75, Infinity],
-                        average: [beacon.cellMaxCharge * 0.5, beacon.cellMaxCharge * 0.75],
+                        average: [
+                          beacon.cellMaxCharge * 0.5,
+                          beacon.cellMaxCharge * 0.75,
+                        ],
                         bad: [-Infinity, beacon.cellMaxCharge * 0.5],
                       }}
                       value={beacon.cellCharge}
@@ -75,16 +87,27 @@ export const MechaControlConsole = (props, context) => {
                     />
                   )) || <NoticeBox>No Cell Installed</NoticeBox>}
                 </LabeledList.Item>
-                <LabeledList.Item label="Air Tank">{beacon.airtank}kPa</LabeledList.Item>
-                <LabeledList.Item label="Pilot">{beacon.pilot || 'Unoccupied'}</LabeledList.Item>
-                <LabeledList.Item label="Location">{toTitleCase(beacon.location) || 'Unknown'}</LabeledList.Item>
-                <LabeledList.Item label="Active Equipment">{beacon.active || 'None'}</LabeledList.Item>
+                <LabeledList.Item label="Air Tank">
+                  {beacon.airtank}kPa
+                </LabeledList.Item>
+                <LabeledList.Item label="Pilot">
+                  {beacon.pilot || 'Unoccupied'}
+                </LabeledList.Item>
+                <LabeledList.Item label="Location">
+                  {toTitleCase(beacon.location) || 'Unknown'}
+                </LabeledList.Item>
+                <LabeledList.Item label="Active Equipment">
+                  {beacon.active || 'None'}
+                </LabeledList.Item>
                 {(beacon.cargoMax && (
                   <LabeledList.Item label="Cargo Space">
                     <ProgressBar
                       ranges={{
                         bad: [beacon.cargoMax * 0.75, Infinity],
-                        average: [beacon.cargoMax * 0.5, beacon.cargoMax * 0.75],
+                        average: [
+                          beacon.cargoMax * 0.5,
+                          beacon.cargoMax * 0.75,
+                        ],
                         good: [-Infinity, beacon.cargoMax * 0.5],
                       }}
                       value={beacon.cargoUsed}
diff --git a/tgui/packages/tgui_ch/interfaces/Medbot.js b/tgui/packages/tgui_ch/interfaces/Medbot.js
index c6bb1136d4..bd69cc2c89 100644
--- a/tgui/packages/tgui_ch/interfaces/Medbot.js
+++ b/tgui/packages/tgui_ch/interfaces/Medbot.js
@@ -33,13 +33,18 @@ export const Medbot = (props, context) => {
             </Button>
           }>
           <LabeledList>
-            <LabeledList.Item label="Maintenance Panel" color={open ? 'bad' : 'good'}>
+            <LabeledList.Item
+              label="Maintenance Panel"
+              color={open ? 'bad' : 'good'}>
               {open ? 'Open' : 'Closed'}
             </LabeledList.Item>
             <LabeledList.Item
               label="Beaker"
               buttons={
-                <Button disabled={!beaker} icon="eject" onClick={() => act('eject')}>
+                <Button
+                  disabled={!beaker}
+                  icon="eject"
+                  onClick={() => act('eject')}>
                   Eject
                 </Button>
               }>
@@ -49,7 +54,9 @@ export const Medbot = (props, context) => {
                 </ProgressBar>
               )) || <Box color="average">No beaker loaded.</Box>}
             </LabeledList.Item>
-            <LabeledList.Item label="Behavior Controls" color={locked ? 'good' : 'bad'}>
+            <LabeledList.Item
+              label="Behavior Controls"
+              color={locked ? 'good' : 'bad'}>
               {locked ? 'Locked' : 'Unlocked'}
             </LabeledList.Item>
           </LabeledList>
@@ -81,7 +88,9 @@ export const Medbot = (props, context) => {
                   icon={use_beaker ? 'toggle-on' : 'toggle-off'}
                   selected={use_beaker}
                   onClick={() => act('use_beaker')}>
-                  {use_beaker ? 'Loaded Beaker (When available)' : 'Internal Synthesizer'}
+                  {use_beaker
+                    ? 'Loaded Beaker (When available)'
+                    : 'Internal Synthesizer'}
                 </Button>
               </LabeledList.Item>
               <LabeledList.Item label="Treatment Report">
diff --git a/tgui/packages/tgui_ch/interfaces/MedicalRecords.js b/tgui/packages/tgui_ch/interfaces/MedicalRecords.js
index dd5806c386..da0d91846b 100644
--- a/tgui/packages/tgui_ch/interfaces/MedicalRecords.js
+++ b/tgui/packages/tgui_ch/interfaces/MedicalRecords.js
@@ -30,14 +30,26 @@ const virusModalBodyOverride = (modal, context) => {
       level={2}
       m="-1rem"
       title={virus.name || 'Virus'}
-      buttons={<Button icon="times" color="red" onClick={() => act('modal_close')} />}>
+      buttons={
+        <Button icon="times" color="red" onClick={() => act('modal_close')} />
+      }>
       <Box mx="0.5rem">
         <LabeledList>
-          <LabeledList.Item label="Spread">{virus.spread_text} Transmission</LabeledList.Item>
-          <LabeledList.Item label="Possible cure">{virus.antigen}</LabeledList.Item>
-          <LabeledList.Item label="Rate of Progression">{virus.rate}</LabeledList.Item>
-          <LabeledList.Item label="Antibiotic Resistance">{virus.resistance}%</LabeledList.Item>
-          <LabeledList.Item label="Species Affected">{virus.species}</LabeledList.Item>
+          <LabeledList.Item label="Spread">
+            {virus.spread_text} Transmission
+          </LabeledList.Item>
+          <LabeledList.Item label="Possible cure">
+            {virus.antigen}
+          </LabeledList.Item>
+          <LabeledList.Item label="Rate of Progression">
+            {virus.rate}
+          </LabeledList.Item>
+          <LabeledList.Item label="Antibiotic Resistance">
+            {virus.resistance}%
+          </LabeledList.Item>
+          <LabeledList.Item label="Species Affected">
+            {virus.species}
+          </LabeledList.Item>
           <LabeledList.Item label="Symptoms">
             <LabeledList>
               {virus.symptoms.map((s) => (
@@ -137,8 +149,18 @@ const MedicalRecordsMaintenance = (_properties, context) => {
     <Fragment>
       <Button icon="download" content="Backup to Disk" disabled />
       <br />
-      <Button icon="upload" content="Upload from Disk" my="0.5rem" disabled /> <br />
-      <Button.Confirm icon="trash" content="Delete All Medical Records" onClick={() => act('del_all')} />
+      <Button
+        icon="upload"
+        content="Upload from Disk"
+        my="0.5rem"
+        disabled
+      />{' '}
+      <br />
+      <Button.Confirm
+        icon="trash"
+        content="Delete All Medical Records"
+        onClick={() => act('del_all')}
+      />
     </Fragment>
   );
 };
@@ -171,7 +193,12 @@ const MedicalRecordsView = (_properties, context) => {
           onClick={() => act('print_p')}
         />
         <br />
-        <Button icon="arrow-left" content="Back" mt="0.5rem" onClick={() => act('screen', { screen: 2 })} />
+        <Button
+          icon="arrow-left"
+          content="Back"
+          mt="0.5rem"
+          onClick={() => act('screen', { screen: 2 })}
+        />
       </Section>
     </Fragment>
   );
@@ -192,7 +219,13 @@ const MedicalRecordsViewGeneral = (_properties, context) => {
               <Box height="20px" display="inline-block" preserveWhitespace>
                 {field.value}
               </Box>
-              {!!field.edit && <Button icon="pen" ml="0.5rem" onClick={() => doEdit(context, field)} />}
+              {!!field.edit && (
+                <Button
+                  icon="pen"
+                  ml="0.5rem"
+                  onClick={() => doEdit(context, field)}
+                />
+              )}
             </LabeledList.Item>
           ))}
         </LabeledList>
@@ -200,7 +233,11 @@ const MedicalRecordsViewGeneral = (_properties, context) => {
       <Box width="50%" float="right" textAlign="right">
         {!!general.has_photos &&
           general.photos.map((p, i) => (
-            <Box key={i} display="inline-block" textAlign="center" color="label">
+            <Box
+              key={i}
+              display="inline-block"
+              textAlign="center"
+              color="label">
               <img
                 src={p.substr(1, p.length - 1)}
                 style={{
@@ -225,7 +262,12 @@ const MedicalRecordsViewMedical = (_properties, context) => {
     return (
       <Box color="bad">
         Medical records lost!
-        <Button icon="pen" content="New Record" ml="0.5rem" onClick={() => act('new')} />
+        <Button
+          icon="pen"
+          content="New Record"
+          ml="0.5rem"
+          onClick={() => act('new')}
+        />
       </Box>
     );
   }
@@ -255,7 +297,12 @@ const MedicalRecordsViewMedical = (_properties, context) => {
               </Box>
               <br />
               {comment.text}
-              <Button icon="comment-slash" color="bad" ml="0.5rem" onClick={() => act('del_c', { del_c: i + 1 })} />
+              <Button
+                icon="comment-slash"
+                color="bad"
+                ml="0.5rem"
+                onClick={() => act('del_c', { del_c: i + 1 })}
+              />
             </Box>
           ))
         )}
@@ -279,7 +326,12 @@ const MedicalRecordsViruses = (_properties, context) => {
   virus.sort((a, b) => (a.name > b.name ? 1 : -1));
   return virus.map((vir, i) => (
     <Fragment key={i}>
-      <Button icon="flask" content={vir.name} mb="0.5rem" onClick={() => act('vir', { vir: vir.D })} />
+      <Button
+        icon="flask"
+        content={vir.name}
+        mb="0.5rem"
+        onClick={() => act('vir', { vir: vir.D })}
+      />
       <br />
     </Fragment>
   ));
@@ -304,7 +356,10 @@ const MedicalRecordsMedbots = (_properties, context) => {
                 <Box color="good">Online</Box>
                 <Box mt="0.5rem">
                   {medbot.use_beaker
-                    ? 'Reservoir: ' + medbot.total_volume + '/' + medbot.maximum_volume
+                    ? 'Reservoir: ' +
+                    medbot.total_volume +
+                    '/' +
+                    medbot.maximum_volume
                     : 'Using internal synthesizer.'}
                 </Box>
               </Fragment>
@@ -323,19 +378,27 @@ const MedicalRecordsNavigation = (_properties, context) => {
   const { screen } = data;
   return (
     <Tabs>
-      <Tabs.Tab selected={screen === 2} onClick={() => act('screen', { screen: 2 })}>
+      <Tabs.Tab
+        selected={screen === 2}
+        onClick={() => act('screen', { screen: 2 })}>
         <Icon name="list" />
         List Records
       </Tabs.Tab>
-      <Tabs.Tab selected={screen === 5} onClick={() => act('screen', { screen: 5 })}>
+      <Tabs.Tab
+        selected={screen === 5}
+        onClick={() => act('screen', { screen: 5 })}>
         <Icon name="database" />
         Virus Database
       </Tabs.Tab>
-      <Tabs.Tab selected={screen === 6} onClick={() => act('screen', { screen: 6 })}>
+      <Tabs.Tab
+        selected={screen === 6}
+        onClick={() => act('screen', { screen: 6 })}>
         <Icon name="plus-square" />
         Medbot Tracking
       </Tabs.Tab>
-      <Tabs.Tab selected={screen === 3} onClick={() => act('screen', { screen: 3 })}>
+      <Tabs.Tab
+        selected={screen === 3}
+        onClick={() => act('screen', { screen: 3 })}>
         <Icon name="wrench" />
         Record Maintenance
       </Tabs.Tab>
diff --git a/tgui/packages/tgui_ch/interfaces/MentorTicketPanel.tsx b/tgui/packages/tgui_ch/interfaces/MentorTicketPanel.tsx
index 52adf43e48..dc685e3acd 100644
--- a/tgui/packages/tgui_ch/interfaces/MentorTicketPanel.tsx
+++ b/tgui/packages/tgui_ch/interfaces/MentorTicketPanel.tsx
@@ -24,7 +24,18 @@ type Data = {
 
 export const MentorTicketPanel = (props, context) => {
   const { act, data } = useBackend<Data>(context);
-  const { id, title, name, state, opened_at, closed_at, opened_at_date, closed_at_date, actions, log } = data;
+  const {
+    id,
+    title,
+    name,
+    state,
+    opened_at,
+    closed_at,
+    opened_at_date,
+    closed_at_date,
+    actions,
+    log,
+  } = data;
   return (
     <Window width={900} height={600}>
       <Window.Content scrollable>
@@ -32,7 +43,11 @@ export const MentorTicketPanel = (props, context) => {
           title={'Ticket #' + id}
           buttons={
             <Box nowrap>
-              <Button icon="arrow-up" content="Escalate" onClick={() => act('escalate')} />{' '}
+              <Button
+                icon="arrow-up"
+                content="Escalate"
+                onClick={() => act('escalate')}
+              />{' '}
               <Button content="Legacy UI" onClick={() => act('legacy')} />
             </Box>
           }>
@@ -43,11 +58,13 @@ export const MentorTicketPanel = (props, context) => {
             <LabeledList.Item label="State">{State[state]}</LabeledList.Item>
             {State[state] === State.open ? (
               <LabeledList.Item label="Opened At">
-                {opened_at_date} ({Math.round((opened_at / 600) * 10) / 10} minutes ago.)
+                {opened_at_date} ({Math.round((opened_at / 600) * 10) / 10}{' '}
+                minutes ago.)
               </LabeledList.Item>
             ) : (
               <LabeledList.Item label="Closed At">
-                {closed_at_date} ({Math.round((closed_at / 600) * 10) / 10} minutes ago.){' '}
+                {closed_at_date} ({Math.round((closed_at / 600) * 10) / 10}{' '}
+                minutes ago.){' '}
                 <Button content="Reopen" onClick={() => act('reopen')} />
               </LabeledList.Item>
             )}
diff --git a/tgui/packages/tgui_ch/interfaces/MessageMonitor.js b/tgui/packages/tgui_ch/interfaces/MessageMonitor.js
index 525f5747e8..949680d3bf 100644
--- a/tgui/packages/tgui_ch/interfaces/MessageMonitor.js
+++ b/tgui/packages/tgui_ch/interfaces/MessageMonitor.js
@@ -40,7 +40,10 @@ const MessageMonitorHack = (props, context) => {
   return (
     <FullscreenNotice title="ERROR">
       {isMalfAI ? (
-        <Box>Brute-forcing for server key. It will take 20 seconds for every character that the password has.</Box>
+        <Box>
+          Brute-forcing for server key. It will take 20 seconds for every
+          character that the password has.
+        </Box>
       ) : (
         <Box>
           01000010011100100111010101110100011001010010110
@@ -126,15 +129,28 @@ const MessageMonitorLogin = (props, context) => {
   return (
     <FullscreenNotice title="Welcome">
       <Box fontSize="1.5rem" bold>
-        <Icon name="exclamation-triangle" verticalAlign="middle" size={3} mr="1rem" />
+        <Icon
+          name="exclamation-triangle"
+          verticalAlign="middle"
+          size={3}
+          mr="1rem"
+        />
         Unauthorized
       </Box>
       <Box color="label" my="1rem">
         Decryption Key:
-        <Input placeholder="Decryption Key" ml="0.5rem" onChange={(e, val) => act('auth', { key: val })} />
+        <Input
+          placeholder="Decryption Key"
+          ml="0.5rem"
+          onChange={(e, val) => act('auth', { key: val })}
+        />
+      </Box>
+      {!!isMalfAI && (
+        <Button icon="terminal" content="Hack" onClick={() => act('hack')} />
+      )}
+      <Box color="label">
+        Please authenticate with the server in order to show additional options.
       </Box>
-      {!!isMalfAI && <Button icon="terminal" content="Hack" onClick={() => act('hack')} />}
-      <Box color="label">Please authenticate with the server in order to show additional options.</Box>
     </FullscreenNotice>
   );
 };
@@ -162,19 +178,34 @@ const MessageMonitorContent = (props, context) => {
   return (
     <Fragment>
       <Tabs>
-        <Tabs.Tab key="Main" selected={0 === tabIndex} onClick={() => setTabIndex(0)}>
+        <Tabs.Tab
+          key="Main"
+          selected={0 === tabIndex}
+          onClick={() => setTabIndex(0)}>
           <Icon name="bars" /> Main Menu
         </Tabs.Tab>
-        <Tabs.Tab key="MessageLogs" selected={1 === tabIndex} onClick={() => setTabIndex(1)}>
+        <Tabs.Tab
+          key="MessageLogs"
+          selected={1 === tabIndex}
+          onClick={() => setTabIndex(1)}>
           <Icon name="font" /> Message Logs
         </Tabs.Tab>
-        <Tabs.Tab key="RequestLogs" selected={2 === tabIndex} onClick={() => setTabIndex(2)}>
+        <Tabs.Tab
+          key="RequestLogs"
+          selected={2 === tabIndex}
+          onClick={() => setTabIndex(2)}>
           <Icon name="bold" /> Request Logs
         </Tabs.Tab>
-        <Tabs.Tab key="AdminMessage" selected={3 === tabIndex} onClick={() => setTabIndex(3)}>
+        <Tabs.Tab
+          key="AdminMessage"
+          selected={3 === tabIndex}
+          onClick={() => setTabIndex(3)}>
           <Icon name="comment-alt" /> Admin Messaging
         </Tabs.Tab>
-        <Tabs.Tab key="SpamFilter" selected={4 === tabIndex} onClick={() => setTabIndex(4)}>
+        <Tabs.Tab
+          key="SpamFilter"
+          selected={4 === tabIndex}
+          onClick={() => setTabIndex(4)}>
           <Icon name="comment-slash" /> Spam Filter
         </Tabs.Tab>
         <Tabs.Tab key="Logout" color="red" onClick={() => act('deauth')}>
@@ -196,7 +227,11 @@ const MessageMonitorMain = (props, context) => {
       title="Main Menu"
       buttons={
         <Fragment>
-          <Button icon="link" content="Server Link" onClick={() => act('find')} />
+          <Button
+            icon="link"
+            content="Server Link"
+            onClick={() => act('find')}
+          />
           <Button
             icon="power-off"
             content={'Server ' + (linkedServer.active ? 'Enabled' : 'Disabled')}
@@ -210,7 +245,12 @@ const MessageMonitorMain = (props, context) => {
           <Box color="good">Good</Box>
         </LabeledList.Item>
       </LabeledList>
-      <Button mt={1} icon="key" content="Set Custom Key" onClick={() => act('pass')} />
+      <Button
+        mt={1}
+        icon="key"
+        content="Set Custom Key"
+        onClick={() => act('pass')}
+      />
       <Button.Confirm
         color="red"
         confirmIcon="exclamation-triangle"
@@ -265,8 +305,12 @@ const MessageMonitorLogs = (props, context) => {
               }>
               {rc ? (
                 <LabeledList>
-                  <LabeledList.Item label="Message">{log.message}</LabeledList.Item>
-                  <LabeledList.Item label="Verification" color={log.id_auth === 'Unauthenticated' ? 'bad' : 'good'}>
+                  <LabeledList.Item label="Message">
+                    {log.message}
+                  </LabeledList.Item>
+                  <LabeledList.Item
+                    label="Verification"
+                    color={log.id_auth === 'Unauthenticated' ? 'bad' : 'good'}>
                     {decodeHtmlEntities(log.id_auth)}
                   </LabeledList.Item>
                   <LabeledList.Item label="Stamp">{log.stamp}</LabeledList.Item>
@@ -285,7 +329,13 @@ const MessageMonitorLogs = (props, context) => {
 const MessageMonitorAdmin = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { possibleRecipients, customsender, customrecepient, customjob, custommessage } = data;
+  const {
+    possibleRecipients,
+    customsender,
+    customrecepient,
+    customjob,
+    custommessage,
+  } = data;
 
   const recipientOptions = Object.keys(possibleRecipients);
 
@@ -293,10 +343,18 @@ const MessageMonitorAdmin = (props, context) => {
     <Section title="Admin Messaging">
       <LabeledList>
         <LabeledList.Item label="Sender">
-          <Input fluid value={customsender} onChange={(e, val) => act('set_sender', { val: val })} />
+          <Input
+            fluid
+            value={customsender}
+            onChange={(e, val) => act('set_sender', { val: val })}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Sender's Job">
-          <Input fluid value={customjob} onChange={(e, val) => act('set_sender_job', { val: val })} />
+          <Input
+            fluid
+            value={customjob}
+            onChange={(e, val) => act('set_sender_job', { val: val })}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Recipient">
           <Dropdown
@@ -312,10 +370,20 @@ const MessageMonitorAdmin = (props, context) => {
           />
         </LabeledList.Item>
         <LabeledList.Item label="Message" verticalAlign="top">
-          <Input fluid mb={0.5} value={custommessage} onChange={(e, val) => act('set_message', { val: val })} />
+          <Input
+            fluid
+            mb={0.5}
+            value={custommessage}
+            onChange={(e, val) => act('set_message', { val: val })}
+          />
         </LabeledList.Item>
       </LabeledList>
-      <Button fluid icon="comment" content="Send Message" onClick={() => act('send_message')} />
+      <Button
+        fluid
+        icon="comment"
+        content="Send Message"
+        onClick={() => act('send_message')}
+      />
     </Section>
   );
 };
@@ -344,7 +412,11 @@ const MessageMonitorSpamFilter = (props, context) => {
           </LabeledList.Item>
         ))}
       </LabeledList>
-      <Button icon="plus" content="Add New Entry" onClick={() => act('addtoken')} />
+      <Button
+        icon="plus"
+        content="Add New Entry"
+        onClick={() => act('addtoken')}
+      />
     </Section>
   );
 };
diff --git a/tgui/packages/tgui_ch/interfaces/MiningOreProcessingConsole.js b/tgui/packages/tgui_ch/interfaces/MiningOreProcessingConsole.js
index 3dc0e8f742..553e333d0c 100644
--- a/tgui/packages/tgui_ch/interfaces/MiningOreProcessingConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/MiningOreProcessingConsole.js
@@ -27,10 +27,16 @@ export const MiningOreProcessingConsole = (props, context) => {
           title="Status"
           buttons={
             <Fragment>
-              <Button icon="bolt" selected={speed} onClick={() => act('speed_toggle')}>
+              <Button
+                icon="bolt"
+                selected={speed}
+                onClick={() => act('speed_toggle')}>
                 {speed ? 'High-Speed Active' : 'High-Speed Inactive'}
               </Button>
-              <Button icon="power-off" selected={power} onClick={() => act('power')}>
+              <Button
+                icon="power-off"
+                selected={power}
+                onClick={() => act('power')}>
                 {power ? 'Smelting' : 'Not Smelting'}
               </Button>
             </Fragment>
@@ -39,7 +45,10 @@ export const MiningOreProcessingConsole = (props, context) => {
             <LabeledList.Item
               label="Current unclaimed points"
               buttons={
-                <Button disabled={unclaimedPoints < 1} icon="download" onClick={() => act('claim')}>
+                <Button
+                  disabled={unclaimedPoints < 1}
+                  icon="download"
+                  onClick={() => act('claim')}>
                   Claim
                 </Button>
               }>
@@ -54,7 +63,12 @@ export const MiningOreProcessingConsole = (props, context) => {
 };
 
 // ORDER IS IMPORTANT HERE.
-const processingOptions = ['Not Processing', 'Smelting', 'Compressing', 'Alloying'];
+const processingOptions = [
+  'Not Processing',
+  'Smelting',
+  'Compressing',
+  'Alloying',
+];
 
 // Higher in the list == closer to top
 // This is just kind of an arbitrary list to sort by because the machine has no predictable ore order in it's list
diff --git a/tgui/packages/tgui_ch/interfaces/MiningStackingConsole.js b/tgui/packages/tgui_ch/interfaces/MiningStackingConsole.js
index d9e2e3f41d..165c0fa209 100644
--- a/tgui/packages/tgui_ch/interfaces/MiningStackingConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/MiningStackingConsole.js
@@ -30,7 +30,11 @@ export const MiningStackingConsole = (props, context) => {
                   key={stack.type}
                   label={toTitleCase(stack.type)}
                   buttons={
-                    <Button icon="eject" onClick={() => act('release_stack', { stack: stack.type })}>
+                    <Button
+                      icon="eject"
+                      onClick={() =>
+                        act('release_stack', { stack: stack.type })
+                      }>
                       Eject
                     </Button>
                   }>
diff --git a/tgui/packages/tgui_ch/interfaces/MiningVendor.js b/tgui/packages/tgui_ch/interfaces/MiningVendor.js
index a4a074af36..22e404b9cd 100644
--- a/tgui/packages/tgui_ch/interfaces/MiningVendor.js
+++ b/tgui/packages/tgui_ch/interfaces/MiningVendor.js
@@ -28,8 +28,16 @@ const MiningVendorItems = (props, context) => {
   const { has_id, id, items } = data;
   // Search thingies
   const [searchText, _setSearchText] = useLocalState(context, 'search', '');
-  const [sortOrder, _setSortOrder] = useLocalState(context, 'sort', 'Alphabetical');
-  const [descending, _setDescending] = useLocalState(context, 'descending', false);
+  const [sortOrder, _setSortOrder] = useLocalState(
+    context,
+    'sort',
+    'Alphabetical'
+  );
+  const [descending, _setDescending] = useLocalState(
+    context,
+    'descending',
+    false
+  );
   const searcher = createSearch(searchText, (item) => {
     return item[0];
   });
@@ -51,12 +59,22 @@ const MiningVendorItems = (props, context) => {
     }
 
     has_contents = true;
-    return <MiningVendorItemsCategory key={kv[0]} title={kv[0]} items={items_in_cat} />;
+    return (
+      <MiningVendorItemsCategory
+        key={kv[0]}
+        title={kv[0]}
+        items={items_in_cat}
+      />
+    );
   });
   return (
     <Flex.Item grow="1" overflow="auto">
       <Section onClick={(e) => refocusLayout()}>
-        {has_contents ? contents : <Box color="label">No items matching your criteria was found!</Box>}
+        {has_contents ? (
+          contents
+        ) : (
+          <Box color="label">No items matching your criteria was found!</Box>
+        )}
       </Section>
     </Flex.Item>
   );
@@ -65,12 +83,20 @@ const MiningVendorItems = (props, context) => {
 const MiningVendorSearch = (props, context) => {
   const [_searchText, setSearchText] = useLocalState(context, 'search', '');
   const [_sortOrder, setSortOrder] = useLocalState(context, 'sort', '');
-  const [descending, setDescending] = useLocalState(context, 'descending', false);
+  const [descending, setDescending] = useLocalState(
+    context,
+    'descending',
+    false
+  );
   return (
     <Box mb="0.5rem">
       <Flex width="100%">
         <Flex.Item grow="1" mr="0.5rem">
-          <Input placeholder="Search by item name.." width="100%" onInput={(_e, value) => setSearchText(value)} />
+          <Input
+            placeholder="Search by item name.."
+            width="100%"
+            onInput={(_e, value) => setSearchText(value)}
+          />
         </Flex.Item>
         <Flex.Item basis="30%">
           <Dropdown
diff --git a/tgui/packages/tgui_ch/interfaces/MobSpawner.tsx b/tgui/packages/tgui_ch/interfaces/MobSpawner.tsx
index d54e9d9d5f..1f98c55570 100644
--- a/tgui/packages/tgui_ch/interfaces/MobSpawner.tsx
+++ b/tgui/packages/tgui_ch/interfaces/MobSpawner.tsx
@@ -55,11 +55,23 @@ const GeneralMobSettings = (props, context) => {
   const { act, data } = useBackend<Data>(context);
 
   const [amount, setAmount] = useLocalState(context, 'amount', 1);
-  const [name, setName] = useLocalState(context, 'name', data.default_path_name);
+  const [name, setName] = useLocalState(
+    context,
+    'name',
+    data.default_path_name
+  );
   const [desc, setDesc] = useLocalState(context, 'desc', data.default_desc);
-  const [flavorText, setFlavorText] = useLocalState(context, 'flavorText', data.default_flavor_text);
+  const [flavorText, setFlavorText] = useLocalState(
+    context,
+    'flavorText',
+    data.default_flavor_text
+  );
 
-  const [sizeMultiplier, setSizeMultiplier] = useLocalState(context, 'sizeMultiplier', 100);
+  const [sizeMultiplier, setSizeMultiplier] = useLocalState(
+    context,
+    'sizeMultiplier',
+    100
+  );
 
   const [x, setX] = useLocalState(context, 'x', data.initial_x);
   const [y, setY] = useLocalState(context, 'y', data.initial_y);
@@ -72,7 +84,11 @@ const GeneralMobSettings = (props, context) => {
       <Section title="General">
         <LabeledList>
           <LabeledList.Item label="Mob Name">
-            <Input fluid value={name || data.default_path_name} onChange={(e, val) => setName(val)} />
+            <Input
+              fluid
+              value={name || data.default_path_name}
+              onChange={(e, val) => setName(val)}
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Mob Path">
             <Dropdown
@@ -83,7 +99,12 @@ const GeneralMobSettings = (props, context) => {
             />
           </LabeledList.Item>
           <LabeledList.Item label="Spawn Amount">
-            <NumberInput value={amount} minValue={0} maxValue={256} onChange={(e, val) => setAmount(val)} />
+            <NumberInput
+              value={amount}
+              minValue={0}
+              maxValue={256}
+              onChange={(e, val) => setAmount(val)}
+            />
           </LabeledList.Item>
           <LabeledList.Item label={'Size (' + sizeMultiplier + '%)'}>
             <Knob
@@ -117,10 +138,20 @@ const GeneralMobSettings = (props, context) => {
               maxValue={256}
               onChange={(e, val) => setZ(val)}
             />
-            <Button.Checkbox content="Lock coords to self" checked={data.loc_lock} onClick={() => act('loc_lock')} />
+            <Button.Checkbox
+              content="Lock coords to self"
+              checked={data.loc_lock}
+              onClick={() => act('loc_lock')}
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Spawn Radius (WIP)">
-            <NumberInput value={radius} disabled minValue={0} maxValue={256} onChange={(e, val) => setRadius(val)} />
+            <NumberInput
+              value={radius}
+              disabled
+              minValue={0}
+              maxValue={256}
+              onChange={(e, val) => setRadius(val)}
+            />
           </LabeledList.Item>
         </LabeledList>
       </Section>
@@ -129,7 +160,11 @@ const GeneralMobSettings = (props, context) => {
           <Flex.Item width="50%">
             Description:
             <br />
-            <TextArea height={'18rem'} onChange={(e, val) => setDesc(val)} value={desc || data.default_desc} />
+            <TextArea
+              height={'18rem'}
+              onChange={(e, val) => setDesc(val)}
+              value={desc || data.default_desc}
+            />
           </Flex.Item>
           <Flex.Item width="50%">
             Flavor Text:
diff --git a/tgui/packages/tgui_ch/interfaces/MuleBot.tsx b/tgui/packages/tgui_ch/interfaces/MuleBot.tsx
index 66776333e5..410e50c55a 100644
--- a/tgui/packages/tgui_ch/interfaces/MuleBot.tsx
+++ b/tgui/packages/tgui_ch/interfaces/MuleBot.tsx
@@ -27,7 +27,14 @@ export const MuleBot = (props, context) => {
             <LabeledList.Item label="ID">{suffix}</LabeledList.Item>
             <LabeledList.Item
               label="Current Load"
-              buttons={<Button icon="eject" content="Unload Now" disabled={!load} onClick={() => act('unload')} />}>
+              buttons={
+                <Button
+                  icon="eject"
+                  content="Unload Now"
+                  disabled={!load}
+                  onClick={() => act('unload')}
+                />
+              }>
               {load ? load : 'None.'}
             </LabeledList.Item>
           </LabeledList>
@@ -58,23 +65,52 @@ const MuleBotClosed = (props, context) => {
         <Box color="bad">This interface is currently locked.</Box>
       ) : (
         <Fragment>
-          <Button fluid icon="stop" content="Stop" onClick={() => act('stop')} />
-          <Button fluid icon="truck-monster" content="Proceed" onClick={() => act('go')} />
-          <Button fluid icon="home" content="Return Home" onClick={() => act('home')} />
-          <Button fluid icon="map-marker-alt" content="Set Destination" onClick={() => act('destination')} />
-          <Button fluid icon="cog" content="Set Home" onClick={() => act('sethome')} />
+          <Button
+            fluid
+            icon="stop"
+            content="Stop"
+            onClick={() => act('stop')}
+          />
+          <Button
+            fluid
+            icon="truck-monster"
+            content="Proceed"
+            onClick={() => act('go')}
+          />
+          <Button
+            fluid
+            icon="home"
+            content="Return Home"
+            onClick={() => act('home')}
+          />
+          <Button
+            fluid
+            icon="map-marker-alt"
+            content="Set Destination"
+            onClick={() => act('destination')}
+          />
+          <Button
+            fluid
+            icon="cog"
+            content="Set Home"
+            onClick={() => act('sethome')}
+          />
           <Button
             fluid
             icon="home"
             selected={auto_return}
-            content={'Auto Return Home: ' + (auto_return ? 'Enabled' : 'Disabled')}
+            content={
+              'Auto Return Home: ' + (auto_return ? 'Enabled' : 'Disabled')
+            }
             onClick={() => act('autoret')}
           />
           <Button
             fluid
             icon="biking"
             selected={!crates_only}
-            content={'Non-standard Cargo: ' + (crates_only ? 'Disabled' : 'Enabled')}
+            content={
+              'Non-standard Cargo: ' + (crates_only ? 'Disabled' : 'Enabled')
+            }
             onClick={() => act('cargotypes')}
           />
         </Fragment>
diff --git a/tgui/packages/tgui_ch/interfaces/NIF.js b/tgui/packages/tgui_ch/interfaces/NIF.js
index 5d4d534ed5..16be6c1624 100644
--- a/tgui/packages/tgui_ch/interfaces/NIF.js
+++ b/tgui/packages/tgui_ch/interfaces/NIF.js
@@ -9,15 +9,32 @@ const NIF_TEMPFAIL = 2;
 const NIF_INSTALLING = 3;
 const NIF_PREINSTALL = 4;
 
-const validThemes = ['abductor', 'cardtable', 'hackerman', 'malfunction', 'ntos', 'paper', 'retro', 'syndicate'];
+const validThemes = [
+  'abductor',
+  'cardtable',
+  'hackerman',
+  'malfunction',
+  'ntos',
+  'paper',
+  'retro',
+  'syndicate',
+];
 
 export const NIF = (props, context) => {
   const { act, config, data } = useBackend(context);
 
   const { theme, last_notification } = data;
 
-  const [settingsOpen, setSettingsOpen] = useLocalState(context, 'settingsOpen', false);
-  const [viewingModule, setViewing] = useLocalState(context, 'viewingModule', null);
+  const [settingsOpen, setSettingsOpen] = useLocalState(
+    context,
+    'settingsOpen',
+    false
+  );
+  const [viewingModule, setViewing] = useLocalState(
+    context,
+    'viewingModule',
+    null
+  );
 
   return (
     <Window theme={theme} width={500} height={400} resizable>
@@ -26,7 +43,9 @@ export const NIF = (props, context) => {
           <NoticeBox info>
             <Table verticalAlign="middle">
               <Table.Row verticalAlign="middle">
-                <Table.Cell verticalAlign="middle">{last_notification}</Table.Cell>
+                <Table.Cell verticalAlign="middle">
+                  {last_notification}
+                </Table.Cell>
                 <Table.Cell verticalAlign="middle" collapsing>
                   <Button
                     color="red"
@@ -58,7 +77,10 @@ export const NIF = (props, context) => {
                       setViewing(null);
                     }}
                   />
-                  <Button icon="window-close" onClick={() => setViewing(null)} />
+                  <Button
+                    icon="window-close"
+                    onClick={() => setViewing(null)}
+                  />
                 </Fragment>
               }>
               <Box>{viewingModule.desc}</Box>
@@ -74,7 +96,8 @@ export const NIF = (props, context) => {
                 additionally while active.
               </Box>
               <Box color={viewingModule.illegal ? 'bad' : 'good'}>
-                It is {viewingModule.illegal ? 'NOT ' : ''}a legal software package.
+                It is {viewingModule.illegal ? 'NOT ' : ''}a legal software
+                package.
               </Box>
               <Box>
                 The MSRP of the package is{' '}
@@ -103,7 +126,9 @@ export const NIF = (props, context) => {
               onClick={() => setSettingsOpen(!settingsOpen)}
             />
           }>
-          {(settingsOpen && <NIFSettings />) || <NIFMain setViewing={setViewing} />}
+          {(settingsOpen && <NIFSettings />) || (
+            <NIFMain setViewing={setViewing} />
+          )}
         </Section>
       </Window.Content>
     </Window>
@@ -153,7 +178,14 @@ const getNutritionText = (nutrition, isSynthetic) => {
 const NIFMain = (props, context) => {
   const { act, config, data } = useBackend(context);
 
-  const { nif_percent, nif_stat, last_notification, nutrition, isSynthetic, modules } = data;
+  const {
+    nif_percent,
+    nif_stat,
+    last_notification,
+    nutrition,
+    isSynthetic,
+    modules,
+  } = data;
 
   const { setViewing } = props;
 
@@ -170,7 +202,8 @@ const NIFMain = (props, context) => {
               average: [25, 50],
               bad: [-Infinity, 0],
             }}>
-            {getNifCondition(nif_stat, nif_percent)} (<AnimatedNumber value={nif_percent} />
+            {getNifCondition(nif_stat, nif_percent)} (
+            <AnimatedNumber value={nif_percent} />
             %)
           </ProgressBar>
         </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/NTNetRelay.js b/tgui/packages/tgui_ch/interfaces/NTNetRelay.js
index 6197318ddd..07e43f5abb 100644
--- a/tgui/packages/tgui_ch/interfaces/NTNetRelay.js
+++ b/tgui/packages/tgui_ch/interfaces/NTNetRelay.js
@@ -15,7 +15,10 @@ export const NTNetRelay = (props, context) => {
   }
 
   return (
-    <Window width={dos_crashed ? 700 : 500} height={dos_crashed ? 600 : 300} resizable>
+    <Window
+      width={dos_crashed ? 700 : 500}
+      height={dos_crashed ? 600 : 300}
+      resizable>
       <Window.Content scrollable>{body}</Window.Content>
     </Window>
   );
@@ -42,7 +45,11 @@ const NTNetRelayContent = (props, context) => {
           {dos_overload} / {dos_capacity} GQ
         </LabeledList.Item>
         <LabeledList.Item label="Options">
-          <Button icon="exclamation-triangle" content="Purge network blacklist" onClick={() => act('purge')} />
+          <Button
+            icon="exclamation-triangle"
+            content="Purge network blacklist"
+            onClick={() => act('purge')}
+          />
         </LabeledList.Item>
       </LabeledList>
     </Section>
@@ -55,20 +62,31 @@ const NTNetRelayCrash = (props, context) => {
   return (
     <FullscreenNotice title="ERROR">
       <Box fontSize="1.5rem" bold color="bad">
-        <Icon name="exclamation-triangle" verticalAlign="middle" size={3} mr="1rem" />
+        <Icon
+          name="exclamation-triangle"
+          verticalAlign="middle"
+          size={3}
+          mr="1rem"
+        />
         <h2>NETWORK BUFFERS OVERLOADED</h2>
         <h3>Overload Recovery Mode</h3>
         <i>
-          This system is suffering temporary outage due to overflow of traffic buffers. Until buffered traffic is
-          processed, all further requests will be dropped. Frequent occurences of this error may indicate insufficient
-          hardware capacity of your network. Please contact your network planning department for instructions on how to
-          resolve this issue.
+          This system is suffering temporary outage due to overflow of traffic
+          buffers. Until buffered traffic is processed, all further requests
+          will be dropped. Frequent occurences of this error may indicate
+          insufficient hardware capacity of your network. Please contact your
+          network planning department for instructions on how to resolve this
+          issue.
         </i>
         <h3>ADMINISTRATIVE OVERRIDE</h3>
         <b> CAUTION - Data loss may occur </b>
       </Box>
       <Box>
-        <Button icon="exclamation-triangle" content="Purge buffered traffic" onClick={() => act('restart')} />
+        <Button
+          icon="exclamation-triangle"
+          content="Purge buffered traffic"
+          onClick={() => act('restart')}
+        />
       </Box>
     </FullscreenNotice>
   );
diff --git a/tgui/packages/tgui_ch/interfaces/Newscaster.js b/tgui/packages/tgui_ch/interfaces/Newscaster.js
index 7266f750ae..aeb0d77256 100644
--- a/tgui/packages/tgui_ch/interfaces/Newscaster.js
+++ b/tgui/packages/tgui_ch/interfaces/Newscaster.js
@@ -34,7 +34,11 @@ const NewscasterContent = (props, context) => {
 
   const { user } = data;
 
-  const [screen, setScreen] = useSharedState(context, 'screen', NEWSCASTER_SCREEN_MAIN);
+  const [screen, setScreen] = useSharedState(
+    context,
+    'screen',
+    NEWSCASTER_SCREEN_MAIN
+  );
   let Template = screenToTemplate[screen];
 
   return (
@@ -55,26 +59,45 @@ const NewscasterMainMenu = (props, context) => {
     <Fragment>
       <Section title="Main Menu">
         {wanted_issue && (
-          <Button fluid icon="eye" onClick={() => setScreen(NEWSCASTER_SCREEN_VIEWWANTED)} color="bad">
+          <Button
+            fluid
+            icon="eye"
+            onClick={() => setScreen(NEWSCASTER_SCREEN_VIEWWANTED)}
+            color="bad">
             Read WANTED Issue
           </Button>
         )}
-        <Button fluid icon="eye" onClick={() => setScreen(NEWSCASTER_SCREEN_VIEWLIST)}>
+        <Button
+          fluid
+          icon="eye"
+          onClick={() => setScreen(NEWSCASTER_SCREEN_VIEWLIST)}>
           View Feed Channels
         </Button>
-        <Button fluid icon="plus" onClick={() => setScreen(NEWSCASTER_SCREEN_NEWCHANNEL)}>
+        <Button
+          fluid
+          icon="plus"
+          onClick={() => setScreen(NEWSCASTER_SCREEN_NEWCHANNEL)}>
           Create Feed Channel
         </Button>
-        <Button fluid icon="plus" onClick={() => setScreen(NEWSCASTER_SCREEN_NEWSTORY)}>
+        <Button
+          fluid
+          icon="plus"
+          onClick={() => setScreen(NEWSCASTER_SCREEN_NEWSTORY)}>
           Create Feed Message
         </Button>
-        <Button fluid icon="print" onClick={() => setScreen(NEWSCASTER_SCREEN_PRINT)}>
+        <Button
+          fluid
+          icon="print"
+          onClick={() => setScreen(NEWSCASTER_SCREEN_PRINT)}>
           Print Newspaper
         </Button>
       </Section>
       {!!securityCaster && (
         <Section title="Feed Security Functions">
-          <Button fluid icon="plus" onClick={() => setScreen(NEWSCASTER_SCREEN_NEWWANTED)}>
+          <Button
+            fluid
+            icon="plus"
+            onClick={() => setScreen(NEWSCASTER_SCREEN_NEWWANTED)}>
             Manage &quot;Wanted&quot; Issue
           </Button>
         </Section>
@@ -110,15 +133,26 @@ const NewscasterNewChannel = (props, context) => {
           {user}
         </LabeledList.Item>
         <LabeledList.Item label="Accept Public Feeds">
-          <Button icon={c_locked ? 'lock' : 'lock-open'} selected={!c_locked} onClick={() => act('set_channel_lock')}>
+          <Button
+            icon={c_locked ? 'lock' : 'lock-open'}
+            selected={!c_locked}
+            onClick={() => act('set_channel_lock')}>
             {c_locked ? 'No' : 'Yes'}
           </Button>
         </LabeledList.Item>
       </LabeledList>
-      <Button fluid color="good" icon="plus" onClick={() => act('submit_new_channel')}>
+      <Button
+        fluid
+        color="good"
+        icon="plus"
+        onClick={() => act('submit_new_channel')}>
         Submit Channel
       </Button>
-      <Button fluid color="bad" icon="undo" onClick={() => setScreen(NEWSCASTER_SCREEN_MAIN)}>
+      <Button
+        fluid
+        color="bad"
+        icon="undo"
+        onClick={() => setScreen(NEWSCASTER_SCREEN_MAIN)}>
         Cancel
       </Button>
     </Section>
@@ -166,7 +200,11 @@ const NewscasterNewStory = (props, context) => {
 
   const label_style = { 'white-space': 'nowrap' };
 
-  const break_style = { width: '100%', 'word-break': 'break-all', 'word-wrap': 'break-word' };
+  const break_style = {
+    width: '100%',
+    'word-break': 'break-all',
+    'word-wrap': 'break-word',
+  };
 
   return (
     <Section
@@ -231,10 +269,18 @@ const NewscasterNewStory = (props, context) => {
           </td>
         </tr>
       </table>
-      <Button fluid color="good" icon="plus" onClick={() => act('submit_new_message')}>
+      <Button
+        fluid
+        color="good"
+        icon="plus"
+        onClick={() => act('submit_new_message')}>
         Submit Message
       </Button>
-      <Button fluid color="bad" icon="undo" onClick={() => setScreen(NEWSCASTER_SCREEN_MAIN)}>
+      <Button
+        fluid
+        color="bad"
+        icon="undo"
+        onClick={() => setScreen(NEWSCASTER_SCREEN_MAIN)}>
         Cancel
       </Button>
     </Section>
@@ -257,16 +303,28 @@ const NewscasterPrint = (props, context) => {
         </Button>
       }>
       <Box color="label" mb={1}>
-        Newscaster currently serves a total of {total_num} Feed channels, {active_num} of which are active, and a total
-        of {message_num} Feed stories.
+        Newscaster currently serves a total of {total_num} Feed channels,{' '}
+        {active_num} of which are active, and a total of {message_num} Feed
+        stories.
       </Box>
       <LabeledList>
-        <LabeledList.Item label="Liquid Paper remaining">{paper_remaining * 100} cm&sup3;</LabeledList.Item>
+        <LabeledList.Item label="Liquid Paper remaining">
+          {paper_remaining * 100} cm&sup3;
+        </LabeledList.Item>
       </LabeledList>
-      <Button mt={1} fluid color="good" icon="plus" onClick={() => act('print_paper')}>
+      <Button
+        mt={1}
+        fluid
+        color="good"
+        icon="plus"
+        onClick={() => act('print_paper')}>
         Print Paper
       </Button>
-      <Button fluid color="bad" icon="undo" onClick={() => setScreen(NEWSCASTER_SCREEN_MAIN)}>
+      <Button
+        fluid
+        color="bad"
+        icon="undo"
+        onClick={() => setScreen(NEWSCASTER_SCREEN_MAIN)}>
         Cancel
       </Button>
     </Section>
@@ -291,7 +349,8 @@ const NewscasterNewWanted = (props, context) => {
       <LabeledList>
         {!!wanted_issue && (
           <LabeledList.Item label="Already In Circulation">
-            A wanted issue is already in circulation. You can edit or cancel it below.
+            A wanted issue is already in circulation. You can edit or cancel it
+            below.
           </LabeledList.Item>
         )}
         <LabeledList.Item label="Criminal Name">
@@ -302,7 +361,11 @@ const NewscasterNewWanted = (props, context) => {
           />
         </LabeledList.Item>
         <LabeledList.Item label="Description">
-          <Input fluid value={decodeHtmlEntities(msg)} onInput={(e, val) => act('set_wanted_desc', { val: val })} />
+          <Input
+            fluid
+            value={decodeHtmlEntities(msg)}
+            onInput={(e, val) => act('set_wanted_desc', { val: val })}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Attach Photo">
           <Button fluid icon="image" onClick={() => act('set_attachment')}>
@@ -313,15 +376,28 @@ const NewscasterNewWanted = (props, context) => {
           {user}
         </LabeledList.Item>
       </LabeledList>
-      <Button mt={1} fluid color="good" icon="plus" onClick={() => act('submit_wanted')}>
+      <Button
+        mt={1}
+        fluid
+        color="good"
+        icon="plus"
+        onClick={() => act('submit_wanted')}>
         Submit Wanted Issue
       </Button>
       {!!wanted_issue && (
-        <Button fluid color="average" icon="minus" onClick={() => act('cancel_wanted')}>
+        <Button
+          fluid
+          color="average"
+          icon="minus"
+          onClick={() => act('cancel_wanted')}>
           Take Down Issue
         </Button>
       )}
-      <Button fluid color="bad" icon="undo" onClick={() => setScreen(NEWSCASTER_SCREEN_MAIN)}>
+      <Button
+        fluid
+        color="bad"
+        icon="undo"
+        onClick={() => setScreen(NEWSCASTER_SCREEN_MAIN)}>
         Cancel
       </Button>
     </Section>
@@ -364,8 +440,12 @@ const NewscasterViewWanted = (props, context) => {
             {decodeHtmlEntities(wanted_issue.author)}
           </LabeledList.Item>
           <LabeledList.Divider />
-          <LabeledList.Item label="Criminal">{decodeHtmlEntities(wanted_issue.criminal)}</LabeledList.Item>
-          <LabeledList.Item label="Description">{decodeHtmlEntities(wanted_issue.desc)}</LabeledList.Item>
+          <LabeledList.Item label="Criminal">
+            {decodeHtmlEntities(wanted_issue.criminal)}
+          </LabeledList.Item>
+          <LabeledList.Item label="Description">
+            {decodeHtmlEntities(wanted_issue.desc)}
+          </LabeledList.Item>
           <LabeledList.Item label="Photo">
             {(wanted_issue.img && <img src={wanted_issue.img} />) || 'None'}
           </LabeledList.Item>
@@ -387,7 +467,9 @@ const NewscasterViewSelected = (props, context) => {
       <Section
         title="Channel Not Found"
         buttons={
-          <Button icon="undo" onClick={() => setScreen(NEWSCASTER_SCREEN_VIEWLIST)}>
+          <Button
+            icon="undo"
+            onClick={() => setScreen(NEWSCASTER_SCREEN_VIEWLIST)}>
             Back
           </Button>
         }>
@@ -407,10 +489,14 @@ const NewscasterViewSelected = (props, context) => {
               icon="ban"
               confirmIcon="ban"
               content="Issue D-Notice"
-              onClick={() => act('toggle_d_notice', { ref: viewing_channel.ref })}
+              onClick={() =>
+                act('toggle_d_notice', { ref: viewing_channel.ref })
+              }
             />
           )}
-          <Button icon="undo" onClick={() => setScreen(NEWSCASTER_SCREEN_VIEWLIST)}>
+          <Button
+            icon="undo"
+            onClick={() => setScreen(NEWSCASTER_SCREEN_VIEWLIST)}>
             Back
           </Button>
         </Fragment>
@@ -425,15 +511,18 @@ const NewscasterViewSelected = (props, context) => {
               content={decodeHtmlEntities(viewing_channel.author)}
               tooltip="Censor?"
               confirmContent="Censor Author"
-              onClick={() => act('censor_channel_author', { ref: viewing_channel.ref })}
+              onClick={() =>
+                act('censor_channel_author', { ref: viewing_channel.ref })
+              }
             />
           )) || <Box>{decodeHtmlEntities(viewing_channel.author)}</Box>}
         </LabeledList.Item>
       </LabeledList>
       {!!viewing_channel.censored && (
         <Box color="bad">
-          ATTENTION: This channel has been deemed as threatening to the welfare of the station, and marked with a{' '}
-          {company} D-Notice. No further feed story additions are allowed while the D-Notice is in effect.
+          ATTENTION: This channel has been deemed as threatening to the welfare
+          of the station, and marked with a {company} D-Notice. No further feed
+          story additions are allowed while the D-Notice is in effect.
         </Box>
       )}
       {(!!viewing_channel.messages.length &&
@@ -447,7 +536,8 @@ const NewscasterViewSelected = (props, context) => {
               </Box>
             )}
             <Box color="grey">
-              [Story by {decodeHtmlEntities(message.author)} - {message.timestamp}]
+              [Story by {decodeHtmlEntities(message.author)} -{' '}
+              {message.timestamp}]
             </Box>
             {!!securityCaster && (
               <Fragment>
@@ -457,20 +547,26 @@ const NewscasterViewSelected = (props, context) => {
                   icon="strikethrough"
                   confirmIcon="strikethrough"
                   content="Censor Story"
-                  onClick={() => act('censor_channel_story_body', { ref: message.ref })}
+                  onClick={() =>
+                    act('censor_channel_story_body', { ref: message.ref })
+                  }
                 />
                 <Button.Confirm
                   color="bad"
                   icon="strikethrough"
                   confirmIcon="strikethrough"
                   content="Censor Author"
-                  onClick={() => act('censor_channel_story_author', { ref: message.ref })}
+                  onClick={() =>
+                    act('censor_channel_story_author', { ref: message.ref })
+                  }
                 />
               </Fragment>
             )}
           </Section>
         ))) ||
-        (!viewing_channel.censored && <Box color="average">No feed messages found in channel.</Box>)}
+        (!viewing_channel.censored && (
+          <Box color="average">No feed messages found in channel.</Box>
+        ))}
     </Section>
   );
 };
diff --git a/tgui/packages/tgui_ch/interfaces/NoticeBoard.tsx b/tgui/packages/tgui_ch/interfaces/NoticeBoard.tsx
index 432a312e5a..daadf40424 100644
--- a/tgui/packages/tgui_ch/interfaces/NoticeBoard.tsx
+++ b/tgui/packages/tgui_ch/interfaces/NoticeBoard.tsx
@@ -5,7 +5,12 @@ import { Box, Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 
 type Data = {
-  notices: { name: string; isphoto: BooleanLike; ispaper: BooleanLike; ref: string }[];
+  notices: {
+    name: string;
+    isphoto: BooleanLike;
+    ispaper: BooleanLike;
+    ref: string;
+  }[];
 };
 
 export const NoticeBoard = (props, context) => {
@@ -22,16 +27,32 @@ export const NoticeBoard = (props, context) => {
               {notices.map((notice, i) => (
                 <LabeledList.Item key={i} label={notice.name}>
                   {(notice.isphoto && (
-                    <Button icon="image" content="Look" onClick={() => act('look', { ref: notice.ref })} />
+                    <Button
+                      icon="image"
+                      content="Look"
+                      onClick={() => act('look', { ref: notice.ref })}
+                    />
                   )) ||
                     (notice.ispaper && (
                       <Fragment>
-                        <Button icon="sticky-note" content="Read" onClick={() => act('read', { ref: notice.ref })} />
-                        <Button icon="pen" content="Write" onClick={() => act('write', { ref: notice.ref })} />
+                        <Button
+                          icon="sticky-note"
+                          content="Read"
+                          onClick={() => act('read', { ref: notice.ref })}
+                        />
+                        <Button
+                          icon="pen"
+                          content="Write"
+                          onClick={() => act('write', { ref: notice.ref })}
+                        />
                       </Fragment>
                     )) ||
                     'Unknown Entity'}
-                  <Button icon="minus-circle" content="Remove" onClick={() => act('remove', { ref: notice.ref })} />
+                  <Button
+                    icon="minus-circle"
+                    content="Remove"
+                    onClick={() => act('remove', { ref: notice.ref })}
+                  />
                 </LabeledList.Item>
               ))}
             </LabeledList>
diff --git a/tgui/packages/tgui_ch/interfaces/NtosAccessDecrypter.tsx b/tgui/packages/tgui_ch/interfaces/NtosAccessDecrypter.tsx
index 6ccf7c44c0..f66e440075 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosAccessDecrypter.tsx
+++ b/tgui/packages/tgui_ch/interfaces/NtosAccessDecrypter.tsx
@@ -37,7 +37,8 @@ export const NtosAccessDecrypter = (props, context) => {
         {(message && <NoticeBox>{message}</NoticeBox>) ||
           (running && (
             <Section>
-              Attempting to decrypt network access codes. Please wait. Rate: {rate} PHash/s
+              Attempting to decrypt network access codes. Please wait. Rate:{' '}
+              {rate} PHash/s
               <Box>
                 {/* I don't care anymore */}
                 {generate10String(lineLength)}
@@ -52,9 +53,9 @@ export const NtosAccessDecrypter = (props, context) => {
             </Section>
           )) || (
             <Section title="Pick access code to decrypt">
-              {(regions.length && <IdentificationComputerRegions actName="PRG_execute" />) || (
-                <Box>Please insert ID card.</Box>
-              )}
+              {(regions.length && (
+                <IdentificationComputerRegions actName="PRG_execute" />
+              )) || <Box>Please insert ID card.</Box>}
             </Section>
           )}
       </NtosWindow.Content>
diff --git a/tgui/packages/tgui_ch/interfaces/NtosArcade.js b/tgui/packages/tgui_ch/interfaces/NtosArcade.js
index 8ea499c613..e94d33b15c 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosArcade.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosArcade.js
@@ -43,7 +43,12 @@ export const NtosArcade = (props, context) => {
                   </LabeledList.Item>
                 </LabeledList>
                 <Box my={1} mx={4} />
-                <Section backgroundColor={data.PauseState === 1 ? '#1b3622' : '#471915'}>{data.Status}</Section>
+                <Section
+                  backgroundColor={
+                    data.PauseState === 1 ? '#1b3622' : '#471915'
+                  }>
+                  {data.Status}
+                </Section>
               </Grid.Column>
               <Grid.Column>
                 <ProgressBar
@@ -108,7 +113,9 @@ export const NtosArcade = (props, context) => {
               content="Claim Tickets"
             />
           </Box>
-          <Box color={data.TicketCount >= 1 ? 'good' : 'normal'}>Earned Tickets: {data.TicketCount}</Box>
+          <Box color={data.TicketCount >= 1 ? 'good' : 'normal'}>
+            Earned Tickets: {data.TicketCount}
+          </Box>
         </Section>
       </NtosWindow.Content>
     </NtosWindow>
diff --git a/tgui/packages/tgui_ch/interfaces/NtosConfiguration.js b/tgui/packages/tgui_ch/interfaces/NtosConfiguration.js
index cc960ba36b..010b7b73e8 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosConfiguration.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosConfiguration.js
@@ -5,7 +5,15 @@ import { NtosWindow } from '../layouts';
 
 export const NtosConfiguration = (props, context) => {
   const { act, data } = useBackend(context);
-  const { PC_device_theme, power_usage, battery_exists, battery = {}, disk_size, disk_used, hardware = [] } = data;
+  const {
+    PC_device_theme,
+    power_usage,
+    battery_exists,
+    battery = {},
+    disk_size,
+    disk_used,
+    hardware = [],
+  } = data;
   return (
     <NtosWindow theme={PC_device_theme} width={520} height={630} resizable>
       <NtosWindow.Content scrollable>
@@ -17,7 +25,9 @@ export const NtosConfiguration = (props, context) => {
             </Box>
           }>
           <LabeledList>
-            <LabeledList.Item label="Battery Status" color={!battery_exists && 'average'}>
+            <LabeledList.Item
+              label="Battery Status"
+              color={!battery_exists && 'average'}>
               {battery_exists ? (
                 <ProgressBar
                   value={battery.charge}
@@ -37,7 +47,11 @@ export const NtosConfiguration = (props, context) => {
           </LabeledList>
         </Section>
         <Section title="File System">
-          <ProgressBar value={disk_used} minValue={0} maxValue={disk_size} color="good">
+          <ProgressBar
+            value={disk_used}
+            minValue={0}
+            maxValue={disk_size}
+            color="good">
             {disk_used} GQ / {disk_size} GQ
           </ProgressBar>
         </Section>
diff --git a/tgui/packages/tgui_ch/interfaces/NtosDigitalWarrant.js b/tgui/packages/tgui_ch/interfaces/NtosDigitalWarrant.js
index 84f8f3f204..1d18f2e799 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosDigitalWarrant.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosDigitalWarrant.js
@@ -66,7 +66,10 @@ const WarrantList = (props, context) => {
             <Table.Cell>{warrant.charges}</Table.Cell>
             <Table.Cell>{warrant.auth}</Table.Cell>
             <Table.Cell collapsing>
-              <Button icon="pen" onClick={() => act('editwarrant', { id: warrant.id })} />
+              <Button
+                icon="pen"
+                onClick={() => act('editwarrant', { id: warrant.id })}
+              />
             </Table.Cell>
           </Table.Row>
         ))) || (
@@ -113,20 +116,32 @@ const ActiveWarrant = (props, context) => {
             (isArrest && (
               <Fragment>
                 <Button icon="search" onClick={() => act('editwarrantname')} />
-                <Button icon="pen" onClick={() => act('editwarrantnamecustom')} />
+                <Button
+                  icon="pen"
+                  onClick={() => act('editwarrantnamecustom')}
+                />
               </Fragment>
-            )) || <Button icon="pen" onClick={() => act('editwarrantnamecustom')} />
+            )) || (
+              <Button icon="pen" onClick={() => act('editwarrantnamecustom')} />
+            )
           }>
           {warrantname}
         </LabeledList.Item>
         <LabeledList.Item
           label={warrantchargesLabel}
-          buttons={<Button icon="pen" onClick={() => act('editwarrantcharges')} />}>
+          buttons={
+            <Button icon="pen" onClick={() => act('editwarrantcharges')} />
+          }>
           {warrantcharges}
         </LabeledList.Item>
         <LabeledList.Item
           label="Authorized By"
-          buttons={<Button icon="balance-scale" onClick={() => act('editwarrantauth')} />}>
+          buttons={
+            <Button
+              icon="balance-scale"
+              onClick={() => act('editwarrantauth')}
+            />
+          }>
           {warrantauth}
         </LabeledList.Item>
       </LabeledList>
diff --git a/tgui/packages/tgui_ch/interfaces/NtosEmailAdministration.js b/tgui/packages/tgui_ch/interfaces/NtosEmailAdministration.js
index cf160a3f66..901bb0c422 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosEmailAdministration.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosEmailAdministration.js
@@ -40,7 +40,11 @@ const MainMenu = (props, context) => {
         Select account to administrate
       </Box>
       {accounts.map((account) => (
-        <Button fluid icon="eye" key={account.uid} onClick={() => act('viewaccount', { viewaccount: account.uid })}>
+        <Button
+          fluid
+          icon="eye"
+          key={account.uid}
+          onClick={() => act('viewaccount', { viewaccount: account.uid })}>
           {account.login}
         </Button>
       ))}
@@ -75,8 +79,17 @@ const ViewEmail = (props, context) => {
 
 const ViewAccount = (props, context) => {
   const { act, data } = useBackend(context);
-  const { error, msg_title, msg_body, msg_timestamp, msg_source, current_account, cur_suspended, messages, accounts } =
-    data;
+  const {
+    error,
+    msg_title,
+    msg_body,
+    msg_timestamp,
+    msg_source,
+    current_account,
+    cur_suspended,
+    messages,
+    accounts,
+  } = data;
   return (
     <Section
       title={'Viewing ' + current_account + ' in admin mode'}
@@ -116,7 +129,9 @@ const ViewAccount = (props, context) => {
                 <Table.Cell>{message.title}</Table.Cell>
                 <Table.Cell>{message.timestamp}</Table.Cell>
                 <Table.Cell>
-                  <Button icon="eye" onClick={() => act('viewmail', { viewmail: message.uid })}>
+                  <Button
+                    icon="eye"
+                    onClick={() => act('viewmail', { viewmail: message.uid })}>
                     View
                   </Button>
                 </Table.Cell>
diff --git a/tgui/packages/tgui_ch/interfaces/NtosEmailClient.js b/tgui/packages/tgui_ch/interfaces/NtosEmailClient.js
index 0aeebe97ef..ceebf7b9ee 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosEmailClient.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosEmailClient.js
@@ -43,7 +43,8 @@ const NtosEmailClientDownloading = (props, context) => {
         </LabeledList.Item>
         <LabeledList.Item label="Progress">
           <ProgressBar color="good" value={down_progress} maxValue={down_size}>
-            {down_progress}/{down_size} ({round((down_progress / down_size) * 100, 1)}%)
+            {down_progress}/{down_size} (
+            {round((down_progress / down_size) * 100, 1)}%)
           </ProgressBar>
         </LabeledList.Item>
       </LabeledList>
@@ -71,9 +72,24 @@ const NtosEmailClientContent = (props, context) => {
       title={'Logged in as: ' + current_account}
       buttons={
         <Fragment>
-          <Button icon="plus" tooltip="New Message" tooltipPosition="left" onClick={() => act('new_message')} />
-          <Button icon="cogs" tooltip="Change Password" tooltipPosition="left" onClick={() => act('changepassword')} />
-          <Button icon="sign-out-alt" tooltip="Log Out" tooltipPosition="left" onClick={() => act('logout')} />
+          <Button
+            icon="plus"
+            tooltip="New Message"
+            tooltipPosition="left"
+            onClick={() => act('new_message')}
+          />
+          <Button
+            icon="cogs"
+            tooltip="Change Password"
+            tooltipPosition="left"
+            onClick={() => act('changepassword')}
+          />
+          <Button
+            icon="sign-out-alt"
+            tooltip="Log Out"
+            tooltipPosition="left"
+            onClick={() => act('logout')}
+          />
         </Fragment>
       }>
       {content}
@@ -89,13 +105,19 @@ const NtosEmailClientInbox = (props, context) => {
   return (
     <Section level={2} noTopPadding>
       <Tabs>
-        <Tabs.Tab selected={folder === 'Inbox'} onClick={() => act('set_folder', { 'set_folder': 'Inbox' })}>
+        <Tabs.Tab
+          selected={folder === 'Inbox'}
+          onClick={() => act('set_folder', { 'set_folder': 'Inbox' })}>
           Inbox
         </Tabs.Tab>
-        <Tabs.Tab selected={folder === 'Spam'} onClick={() => act('set_folder', { 'set_folder': 'Spam' })}>
+        <Tabs.Tab
+          selected={folder === 'Spam'}
+          onClick={() => act('set_folder', { 'set_folder': 'Spam' })}>
           Spam
         </Tabs.Tab>
-        <Tabs.Tab selected={folder === 'Deleted'} onClick={() => act('set_folder', { 'set_folder': 'Deleted' })}>
+        <Tabs.Tab
+          selected={folder === 'Deleted'}
+          onClick={() => act('set_folder', { 'set_folder': 'Deleted' })}>
           Deleted
         </Tabs.Tab>
       </Tabs>
@@ -114,8 +136,16 @@ const NtosEmailClientInbox = (props, context) => {
                 <Table.Cell>{msg.title}</Table.Cell>
                 <Table.Cell>{msg.timestamp}</Table.Cell>
                 <Table.Cell>
-                  <Button icon="eye" onClick={() => act('view', { view: msg.uid })} tooltip="View" />
-                  <Button icon="share" onClick={() => act('reply', { reply: msg.uid })} tooltip="Reply" />
+                  <Button
+                    icon="eye"
+                    onClick={() => act('view', { view: msg.uid })}
+                    tooltip="View"
+                  />
+                  <Button
+                    icon="share"
+                    onClick={() => act('reply', { reply: msg.uid })}
+                    tooltip="Reply"
+                  />
                   <Button
                     color="bad"
                     icon="trash"
@@ -227,7 +257,13 @@ const NtosEmailClientAddressBook = (props, context) => {
     <Section
       title="Address Book"
       level={2}
-      buttons={<Button color="bad" icon="times" onClick={() => act('set_recipient', { set_recipient: null })} />}>
+      buttons={
+        <Button
+          color="bad"
+          icon="times"
+          onClick={() => act('set_recipient', { set_recipient: null })}
+        />
+      }>
       {accounts.map((acc) => (
         <Button
           key={acc.login}
@@ -267,12 +303,20 @@ const NtosEmailClientNewMessage = (props, context) => {
       }>
       <LabeledList>
         <LabeledList.Item label="Title">
-          <Input fluid value={msg_title} onInput={(e, val) => act('edit_title', { val: val })} />
+          <Input
+            fluid
+            value={msg_title}
+            onInput={(e, val) => act('edit_title', { val: val })}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Recipient" verticalAlign="top">
           <Flex>
             <Flex.Item grow={1}>
-              <Input fluid value={msg_recipient} onInput={(e, val) => act('edit_recipient', { val: val })} />
+              <Input
+                fluid
+                value={msg_recipient}
+                onInput={(e, val) => act('edit_recipient', { val: val })}
+              />
             </Flex.Item>
             <Flex.Item>
               <Button
@@ -288,7 +332,10 @@ const NtosEmailClientNewMessage = (props, context) => {
           label="Attachments"
           buttons={
             (msg_hasattachment && (
-              <Button color="bad" icon="times" onClick={() => act('remove_attachment')}>
+              <Button
+                color="bad"
+                icon="times"
+                onClick={() => act('remove_attachment')}>
                 Remove Attachment
               </Button>
             )) || (
@@ -331,7 +378,15 @@ const NtosEmailClientError = (props, context) => {
   const { act } = useBackend(context);
   const { error } = props;
   return (
-    <Section title="Notification" buttons={<Button icon="arrow-left" content="Return" onClick={() => act('reset')} />}>
+    <Section
+      title="Notification"
+      buttons={
+        <Button
+          icon="arrow-left"
+          content="Return"
+          onClick={() => act('reset')}
+        />
+      }>
       <Box color="bad">{error}</Box>
     </Section>
   );
@@ -346,10 +401,18 @@ const NtosEmailClientLogin = (props, context) => {
     <Section title="Please Log In">
       <LabeledList>
         <LabeledList.Item label="Email address">
-          <Input fluid value={stored_login} onInput={(e, val) => act('edit_login', { val: val })} />
+          <Input
+            fluid
+            value={stored_login}
+            onInput={(e, val) => act('edit_login', { val: val })}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Password">
-          <Input fluid value={stored_password} onInput={(e, val) => act('edit_password', { val: val })} />
+          <Input
+            fluid
+            value={stored_password}
+            onInput={(e, val) => act('edit_password', { val: val })}
+          />
         </LabeledList.Item>
       </LabeledList>
       <Button icon="sign-in-alt" onClick={() => act('login')}>
diff --git a/tgui/packages/tgui_ch/interfaces/NtosFileManager.js b/tgui/packages/tgui_ch/interfaces/NtosFileManager.js
index 70314bc2f6..870388a568 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosFileManager.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosFileManager.js
@@ -6,7 +6,15 @@ import { NtosWindow } from '../layouts';
 
 export const NtosFileManager = (props, context) => {
   const { act, data } = useBackend(context);
-  const { PC_device_theme, usbconnected, filename, filedata, error, files = [], usbfiles = [] } = data;
+  const {
+    PC_device_theme,
+    usbconnected,
+    filename,
+    filedata,
+    error,
+    files = [],
+    usbfiles = [],
+  } = data;
   return (
     <NtosWindow resizable theme={PC_device_theme}>
       <NtosWindow.Content scrollable>
@@ -15,9 +23,21 @@ export const NtosFileManager = (props, context) => {
             title={'Viewing File ' + filename}
             buttons={
               <Fragment>
-                <Button icon="pen" content="Edit" onClick={() => act('PRG_edit')} />
-                <Button icon="print" content="Print" onClick={() => act('PRG_printfile')} />
-                <Button icon="times" content="Close" onClick={() => act('PRG_closefile')} />
+                <Button
+                  icon="pen"
+                  content="Edit"
+                  onClick={() => act('PRG_edit')}
+                />
+                <Button
+                  icon="print"
+                  content="Print"
+                  onClick={() => act('PRG_printfile')}
+                />
+                <Button
+                  icon="times"
+                  content="Close"
+                  onClick={() => act('PRG_closefile')}
+                />
               </Fragment>
             }>
             {/* This dangerouslySetInnerHTML is only ever passed data that has passed through pencode2html
@@ -74,7 +94,12 @@ export const NtosFileManager = (props, context) => {
           <Flex wrap="wrap" position="fixed" bottom="5px">
             <Flex.Item>
               <Section>
-                <Button bottom="0" left="0" icon="ban" onClick={() => act('PRG_clearerror')} />
+                <Button
+                  bottom="0"
+                  left="0"
+                  icon="ban"
+                  onClick={() => act('PRG_clearerror')}
+                />
               </Section>
             </Flex.Item>
             <Section>
@@ -88,7 +113,15 @@ export const NtosFileManager = (props, context) => {
 };
 
 const FileTable = (props) => {
-  const { files = [], usbconnected, usbmode, onUpload, onDelete, onRename, onOpen } = props;
+  const {
+    files = [],
+    usbconnected,
+    usbmode,
+    onUpload,
+    onDelete,
+    onRename,
+    onOpen,
+  } = props;
   return (
     <Table>
       <Table.Row header>
@@ -128,9 +161,17 @@ const FileTable = (props) => {
                 />
                 {!!usbconnected &&
                   (usbmode ? (
-                    <Button icon="download" tooltip="Download" onClick={() => onUpload(file.uid)} />
+                    <Button
+                      icon="download"
+                      tooltip="Download"
+                      onClick={() => onUpload(file.uid)}
+                    />
                   ) : (
-                    <Button icon="upload" tooltip="Upload" onClick={() => onUpload(file.uid)} />
+                    <Button
+                      icon="upload"
+                      tooltip="Upload"
+                      onClick={() => onUpload(file.uid)}
+                    />
                   ))}
               </Fragment>
             )}
diff --git a/tgui/packages/tgui_ch/interfaces/NtosMain.js b/tgui/packages/tgui_ch/interfaces/NtosMain.js
index 7457d2d354..16e8b95d78 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosMain.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosMain.js
@@ -22,10 +22,20 @@ const PROGRAM_ICONS = {
 
 export const NtosMain = (props, context) => {
   const { act, data } = useBackend(context);
-  const { device_theme, programs = [], has_light, light_on, comp_light_color, removable_media = [], login = [] } = data;
+  const {
+    device_theme,
+    programs = [],
+    has_light,
+    light_on,
+    comp_light_color,
+    removable_media = [],
+    login = [],
+  } = data;
   return (
     <NtosWindow
-      title={(device_theme === 'syndicate' && 'Syndix Main Menu') || 'NtOS Main Menu'}
+      title={
+        (device_theme === 'syndicate' && 'Syndix Main Menu') || 'NtOS Main Menu'
+      }
       theme={device_theme}
       width={400}
       height={500}
@@ -33,7 +43,11 @@ export const NtosMain = (props, context) => {
       <NtosWindow.Content scrollable>
         {!!has_light && (
           <Section>
-            <Button width="144px" icon="lightbulb" selected={light_on} onClick={() => act('PC_toggle_light')}>
+            <Button
+              width="144px"
+              icon="lightbulb"
+              selected={light_on}
+              onClick={() => act('PC_toggle_light')}>
               Flashlight: {light_on ? 'ON' : 'OFF'}
             </Button>
             <Button ml={1} onClick={() => act('PC_light_color')}>
diff --git a/tgui/packages/tgui_ch/interfaces/NtosNetChat.js b/tgui/packages/tgui_ch/interfaces/NtosNetChat.js
index b1afbcafaf..39447983ed 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosNetChat.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosNetChat.js
@@ -79,10 +79,16 @@ export const NtosNetChat = (props, context) => {
                 <Box height="560px" overflowY="scroll">
                   {in_channel &&
                     (authorized ? (
-                      messages.map((message) => <Box key={message.msg}>{message.msg}</Box>)
+                      messages.map((message) => (
+                        <Box key={message.msg}>{message.msg}</Box>
+                      ))
                     ) : (
                       <Box textAlign="center">
-                        <Icon name="exclamation-triangle" mt={4} fontSize="40px" />
+                        <Icon
+                          name="exclamation-triangle"
+                          mt={4}
+                          fontSize="40px"
+                        />
                         <Box mt={1} bold fontSize="18px">
                           THIS CHANNEL IS PASSWORD PROTECTED
                         </Box>
@@ -123,12 +129,20 @@ export const NtosNetChat = (props, context) => {
                         })
                       }
                     />
-                    <Button.Confirm fluid content="Leave Channel" onClick={() => act('PRG_leavechannel')} />
+                    <Button.Confirm
+                      fluid
+                      content="Leave Channel"
+                      onClick={() => act('PRG_leavechannel')}
+                    />
                   </Fragment>
                 )}
                 {!!is_operator && authed && (
                   <Fragment>
-                    <Button.Confirm fluid content="Delete Channel" onClick={() => act('PRG_deletechannel')} />
+                    <Button.Confirm
+                      fluid
+                      content="Delete Channel"
+                      onClick={() => act('PRG_deletechannel')}
+                    />
                     <Button.Input
                       fluid
                       content="Rename Channel..."
diff --git a/tgui/packages/tgui_ch/interfaces/NtosNetDos.js b/tgui/packages/tgui_ch/interfaces/NtosNetDos.js
index cce3577c94..ff2eb70093 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosNetDos.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosNetDos.js
@@ -22,7 +22,12 @@ export const NtosNetDosContent = (props, context) => {
     return (
       <Fragment>
         <NoticeBox>{error}</NoticeBox>
-        <Button fluid content="Reset" textAlign="center" onClick={() => act('PRG_reset')} />
+        <Button
+          fluid
+          content="Reset"
+          textAlign="center"
+          onClick={() => act('PRG_reset')}
+        />
       </Fragment>
     );
   }
diff --git a/tgui/packages/tgui_ch/interfaces/NtosNetDownloader.js b/tgui/packages/tgui_ch/interfaces/NtosNetDownloader.js
index d848502c51..39bbb641ff 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosNetDownloader.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosNetDownloader.js
@@ -40,7 +40,8 @@ export const NtosNetDownloader = (props, context) => {
         {!!hackedavailable && (
           <Section title="UNKNOWN Software Repository">
             <NoticeBox mb={1}>
-              Please note that Nanotrasen does not recommend download of software from non-official servers.
+              Please note that Nanotrasen does not recommend download of
+              software from non-official servers.
             </NoticeBox>
             {hacked_programs.map((program) => (
               <Program key={program.filename} program={program} />
@@ -77,8 +78,13 @@ const Program = (props, context) => {
         </Flex.Item>
         <Flex.Item ml={2} width="94px" textAlign="center">
           {(program.filename === downloadname && (
-            <ProgressBar color="green" minValue={0} maxValue={downloadsize} value={downloadcompletion}>
-              {round((downloadcompletion / downloadsize) * 100, 1)}% ({downloadspeed}GQ/s)
+            <ProgressBar
+              color="green"
+              minValue={0}
+              maxValue={downloadsize}
+              value={downloadcompletion}>
+              {round((downloadcompletion / downloadsize) * 100, 1)}% (
+              {downloadspeed}GQ/s)
             </ProgressBar>
           )) ||
             (downloads_queue.indexOf(program.filename) !== -1 && (
diff --git a/tgui/packages/tgui_ch/interfaces/NtosNetMonitor.js b/tgui/packages/tgui_ch/interfaces/NtosNetMonitor.js
index 96ebb2d896..9f69412570 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosNetMonitor.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosNetMonitor.js
@@ -24,7 +24,8 @@ export const NtosNetMonitor = (props, context) => {
     <NtosWindow resizable>
       <NtosWindow.Content scrollable>
         <NoticeBox>
-          WARNING: Disabling wireless transmitters when using a wireless device may prevent you from reenabling them!
+          WARNING: Disabling wireless transmitters when using a wireless device
+          may prevent you from reenabling them!
         </NoticeBox>
         <Section
           title="Wireless Connectivity"
@@ -38,7 +39,9 @@ export const NtosNetMonitor = (props, context) => {
           }>
           {ntnetrelays ? (
             <LabeledList>
-              <LabeledList.Item label="Active NTNet Relays">{ntnetrelays}</LabeledList.Item>
+              <LabeledList.Item label="Active NTNet Relays">
+                {ntnetrelays}
+              </LabeledList.Item>
             </LabeledList>
           ) : (
             'No Relays Connected'
@@ -97,7 +100,8 @@ export const NtosNetMonitor = (props, context) => {
             <Fragment>
               <NoticeBox>NETWORK INCURSION DETECTED</NoticeBox>
               <Box italics>
-                Abnormal activity has been detected in the network. Check system logs for more information
+                Abnormal activity has been detected in the network. Check system
+                logs for more information
               </Box>
             </Fragment>
           )}
@@ -126,7 +130,12 @@ export const NtosNetMonitor = (props, context) => {
                     selected={idsstatus}
                     onClick={() => act('toggleIDS')}
                   />
-                  <Button icon="sync" content="Reset" color="bad" onClick={() => act('resetIDS')} />
+                  <Button
+                    icon="sync"
+                    content="Reset"
+                    color="bad"
+                    onClick={() => act('resetIDS')}
+                  />
                 </Fragment>
               }
             />
@@ -150,7 +159,13 @@ export const NtosNetMonitor = (props, context) => {
           <Section
             title="System Log"
             level={2}
-            buttons={<Button.Confirm icon="trash" content="Clear Logs" onClick={() => act('purgelogs')} />}>
+            buttons={
+              <Button.Confirm
+                icon="trash"
+                content="Clear Logs"
+                onClick={() => act('purgelogs')}
+              />
+            }>
             {ntnetlogs.map((log) => (
               <Box key={log.entry} className="candystripe">
                 {log.entry}
diff --git a/tgui/packages/tgui_ch/interfaces/NtosNetTransfer.js b/tgui/packages/tgui_ch/interfaces/NtosNetTransfer.js
index 504b6a2c34..a048285acc 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosNetTransfer.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosNetTransfer.js
@@ -44,17 +44,22 @@ const P2PError = (props, context) => {
 
 const P2PDownload = (props, context) => {
   const { act, data } = useBackend(context);
-  const { download_name, download_progress, download_size, download_netspeed } = data;
+  const { download_name, download_progress, download_size, download_netspeed } =
+    data;
   return (
     <Section title="Download in progress">
       <LabeledList>
-        <LabeledList.Item label="Downloaded File">{download_name}</LabeledList.Item>
+        <LabeledList.Item label="Downloaded File">
+          {download_name}
+        </LabeledList.Item>
         <LabeledList.Item label="Progress">
           <ProgressBar value={download_progress} maxValue={download_size}>
             {download_progress} / {download_size} GQ
           </ProgressBar>
         </LabeledList.Item>
-        <LabeledList.Item label="Transfer Speed">{download_netspeed} GQ/s</LabeledList.Item>
+        <LabeledList.Item label="Transfer Speed">
+          {download_netspeed} GQ/s
+        </LabeledList.Item>
         <LabeledList.Item label="Controls">
           <Button icon="ban" onClick={() => act('PRG_reset')}>
             Cancel Download
@@ -71,9 +76,15 @@ const P2PUpload = (props, context) => {
   return (
     <Section title="Server enabled">
       <LabeledList>
-        <LabeledList.Item label="Clients Connected">{upload_clients}</LabeledList.Item>
-        <LabeledList.Item label="Provided file">{upload_filename}</LabeledList.Item>
-        <LabeledList.Item label="Server Password">{upload_haspassword ? 'Enabled' : 'Disabled'}</LabeledList.Item>
+        <LabeledList.Item label="Clients Connected">
+          {upload_clients}
+        </LabeledList.Item>
+        <LabeledList.Item label="Provided file">
+          {upload_filename}
+        </LabeledList.Item>
+        <LabeledList.Item label="Server Password">
+          {upload_haspassword ? 'Enabled' : 'Disabled'}
+        </LabeledList.Item>
         <LabeledList.Item label="Commands">
           <Button icon="lock" onClick={() => act('PRG_setpassword')}>
             Set Password
@@ -103,7 +114,11 @@ const P2PUploadServer = (props, context) => {
       </Button>
       <Section title="Pick file to serve." level={2}>
         {upload_filelist.map((file) => (
-          <Button key={file.uid} fluid icon="upload" onClick={() => act('PRG_uploadfile', { uid: file.uid })}>
+          <Button
+            key={file.uid}
+            fluid
+            icon="upload"
+            onClick={() => act('PRG_uploadfile', { uid: file.uid })}>
             {file.filename} ({file.size}GQ)
           </Button>
         ))}
@@ -129,7 +144,9 @@ const P2PAvailable = (props, context) => {
             <LabeledList.Item label={server.uid} key={server.uid}>
               {!!server.haspassword && <Icon name="lock" mr={1} />}
               {server.filename}&nbsp; ({server.size}GQ)&nbsp;
-              <Button icon="download" onClick={() => act('PRG_downloadfile', { uid: server.uid })}>
+              <Button
+                icon="download"
+                onClick={() => act('PRG_downloadfile', { uid: server.uid })}>
                 Download
               </Button>
             </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/NtosNewsBrowser.js b/tgui/packages/tgui_ch/interfaces/NtosNewsBrowser.js
index 6289e6a47e..2fbac06b55 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosNewsBrowser.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosNewsBrowser.js
@@ -23,7 +23,8 @@ export const NtosNewsBrowser = (props, context) => {
       <NtosWindow.Content scrollable>
         {!!message && (
           <NoticeBox>
-            {message} <Button icon="times" onClick={() => act('PRG_clearmessage')} />
+            {message}{' '}
+            <Button icon="times" onClick={() => act('PRG_clearmessage')} />
           </NoticeBox>
         )}
         {body}
@@ -74,7 +75,9 @@ const ViewArticles = (props, context) => {
     <Section
       title="Articles List"
       buttons={
-        <Button.Checkbox onClick={() => act('PRG_toggle_archived')} checked={showing_archived}>
+        <Button.Checkbox
+          onClick={() => act('PRG_toggle_archived')}
+          checked={showing_archived}>
           Show Archived
         </Button.Checkbox>
       }>
@@ -84,7 +87,12 @@ const ViewArticles = (props, context) => {
             <LabeledList.Item
               label={article.name}
               key={article.uid}
-              buttons={<Button icon="download" onClick={() => act('PRG_openarticle', { uid: article.uid })} />}>
+              buttons={
+                <Button
+                  icon="download"
+                  onClick={() => act('PRG_openarticle', { uid: article.uid })}
+                />
+              }>
               {article.size} GQ
             </LabeledList.Item>
           ))) || (
@@ -100,17 +108,24 @@ const ViewArticles = (props, context) => {
 const ArticleDownloading = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { download_progress, download_maxprogress, download_rate } = data.download;
+  const { download_progress, download_maxprogress, download_rate } =
+    data.download;
 
   return (
     <Section title="Downloading...">
       <LabeledList>
         <LabeledList.Item label="Progress">
-          <ProgressBar color="good" minValue={0} value={download_progress} maxValue={download_maxprogress}>
+          <ProgressBar
+            color="good"
+            minValue={0}
+            value={download_progress}
+            maxValue={download_maxprogress}>
             {download_progress} / {download_maxprogress} GQ
           </ProgressBar>
         </LabeledList.Item>
-        <LabeledList.Item label="Download Speed">{download_rate} GQ/s</LabeledList.Item>
+        <LabeledList.Item label="Download Speed">
+          {download_rate} GQ/s
+        </LabeledList.Item>
         <LabeledList.Item label="Controls">
           <Button icon="ban" fluid onClick={() => act('PRG_reset')}>
             Abort Download
diff --git a/tgui/packages/tgui_ch/interfaces/NtosRevelation.tsx b/tgui/packages/tgui_ch/interfaces/NtosRevelation.tsx
index cdd8bc0a33..2c079c64ab 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosRevelation.tsx
+++ b/tgui/packages/tgui_ch/interfaces/NtosRevelation.tsx
@@ -36,7 +36,14 @@ export const NtosRevelation = (props, context) => {
               }
             />
           </LabeledList>
-          <Button fluid bold content="ACTIVATE" textAlign="center" color="bad" disabled={!armed} />
+          <Button
+            fluid
+            bold
+            content="ACTIVATE"
+            textAlign="center"
+            color="bad"
+            disabled={!armed}
+          />
         </Section>
       </NtosWindow.Content>
     </NtosWindow>
diff --git a/tgui/packages/tgui_ch/interfaces/NtosUAV.js b/tgui/packages/tgui_ch/interfaces/NtosUAV.js
index 80c6c49414..3ebcfbcb07 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosUAV.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosUAV.js
@@ -12,11 +12,18 @@ export const NtosUAV = (props, context) => {
       <NtosWindow.Content>
         <Section title="Selected UAV">
           <LabeledList>
-            <LabeledList.Item label="UAV">{(current_uav && current_uav.status) || '[Not Connected]'}</LabeledList.Item>
-            <LabeledList.Item label="Signal">{(current_uav && signal_strength) || '[Not Connected]'}</LabeledList.Item>
+            <LabeledList.Item label="UAV">
+              {(current_uav && current_uav.status) || '[Not Connected]'}
+            </LabeledList.Item>
+            <LabeledList.Item label="Signal">
+              {(current_uav && signal_strength) || '[Not Connected]'}
+            </LabeledList.Item>
             <LabeledList.Item label="Power">
               {(current_uav && (
-                <Button icon="power-off" selected={current_uav.power} onClick={() => act('power_uav')}>
+                <Button
+                  icon="power-off"
+                  selected={current_uav.power}
+                  onClick={() => act('power_uav')}>
                   {current_uav.power ? 'Online' : 'Offline'}
                 </Button>
               )) ||
@@ -41,12 +48,21 @@ export const NtosUAV = (props, context) => {
             paired_uavs.map((uav) => (
               <Flex key={uav.uavref} spacing={1}>
                 <Flex.Item grow={1}>
-                  <Button fluid icon="quidditch" onClick={() => act('switch_uav', { 'switch_uav': uav.uavref })}>
+                  <Button
+                    fluid
+                    icon="quidditch"
+                    onClick={() =>
+                      act('switch_uav', { 'switch_uav': uav.uavref })
+                    }>
                     {uav.name}
                   </Button>
                 </Flex.Item>
                 <Flex.Item>
-                  <Button color="bad" icon="times" onClick={() => act('del_uav', { 'del_uav': uav.uavref })} />
+                  <Button
+                    color="bad"
+                    icon="times"
+                    onClick={() => act('del_uav', { 'del_uav': uav.uavref })}
+                  />
                 </Flex.Item>
               </Flex>
             ))) || <Box color="average">No UAVs Paired.</Box>}
diff --git a/tgui/packages/tgui_ch/interfaces/NtosWordProcessor.js b/tgui/packages/tgui_ch/interfaces/NtosWordProcessor.js
index 2ba5776561..6d073d20f0 100644
--- a/tgui/packages/tgui_ch/interfaces/NtosWordProcessor.js
+++ b/tgui/packages/tgui_ch/interfaces/NtosWordProcessor.js
@@ -6,7 +6,16 @@ import { NtosWindow } from '../layouts';
 export const NtosWordProcessor = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { PC_device_theme, error, browsing, files, usbconnected, usbfiles, filename, filedata } = data;
+  const {
+    PC_device_theme,
+    error,
+    browsing,
+    files,
+    usbconnected,
+    usbfiles,
+    filename,
+    filedata,
+  } = data;
 
   return (
     <NtosWindow resizable theme={PC_device_theme}>
@@ -15,14 +24,25 @@ export const NtosWordProcessor = (props, context) => {
           <Box color="bad">
             <h2>An Error has occured:</h2>
             Additional Information: {error}
-            Please try again. If the problem persists, contact your system administrator for assistance.
-            <Button icon="arrow-left" content="Back to menu" onClick={() => act('PRG_backtomenu')} />
+            Please try again. If the problem persists, contact your system
+            administrator for assistance.
+            <Button
+              icon="arrow-left"
+              content="Back to menu"
+              onClick={() => act('PRG_backtomenu')}
+            />
           </Box>
         )) ||
           (browsing && (
             <Section
               title="File Browser"
-              buttons={<Button icon="arrow-left" content="Back to editor" onClick={() => act('PRG_closebrowser')} />}>
+              buttons={
+                <Button
+                  icon="arrow-left"
+                  content="Back to editor"
+                  onClick={() => act('PRG_closebrowser')}
+                />
+              }>
               <Section title="Available documents (local)" level={2}>
                 <Table>
                   <Table.Row header>
@@ -35,7 +55,11 @@ export const NtosWordProcessor = (props, context) => {
                       <Table.Cell>{file.name}</Table.Cell>
                       <Table.Cell>{file.size}</Table.Cell>
                       <Table.Cell collapsing>
-                        <Button icon="file-word" onClick={() => act('PRG_openfile', { 'PRG_openfile': file.name })}>
+                        <Button
+                          icon="file-word"
+                          onClick={() =>
+                            act('PRG_openfile', { 'PRG_openfile': file.name })
+                          }>
                           Open
                         </Button>
                       </Table.Cell>
@@ -55,8 +79,12 @@ export const NtosWordProcessor = (props, context) => {
               <Box>
                 <Button onClick={() => act('PRG_editfile')}>Edit</Button>
                 <Button onClick={() => act('PRG_txtrpeview')}>Preview</Button>
-                <Button onClick={() => act('PRG_taghelp')}>Formatting Help</Button>
-                <Button disabled={!filedata} onClick={() => act('PRG_printfile')}>
+                <Button onClick={() => act('PRG_taghelp')}>
+                  Formatting Help
+                </Button>
+                <Button
+                  disabled={!filedata}
+                  onClick={() => act('PRG_printfile')}>
                   Print
                 </Button>
               </Box>
diff --git a/tgui/packages/tgui_ch/interfaces/NumberInputModal.tsx b/tgui/packages/tgui_ch/interfaces/NumberInputModal.tsx
index 6d94ac8710..7b15f4217e 100644
--- a/tgui/packages/tgui_ch/interfaces/NumberInputModal.tsx
+++ b/tgui/packages/tgui_ch/interfaces/NumberInputModal.tsx
@@ -33,7 +33,9 @@ export const NumberInputModal = (props, context) => {
   };
   // Dynamically changes the window height based on the message.
   const windowHeight =
-    140 + (message.length > 30 ? Math.ceil(message.length / 3) : 0) + (message.length && large_buttons ? 5 : 0);
+    140 +
+    (message.length > 30 ? Math.ceil(message.length / 3) : 0) +
+    (message.length && large_buttons ? 5 : 0);
 
   return (
     <Window title={title} width={270} height={windowHeight}>
diff --git a/tgui/packages/tgui_ch/interfaces/OmniFilter.tsx b/tgui/packages/tgui_ch/interfaces/OmniFilter.tsx
index fff4c20964..42f36f9ef8 100644
--- a/tgui/packages/tgui_ch/interfaces/OmniFilter.tsx
+++ b/tgui/packages/tgui_ch/interfaces/OmniFilter.tsx
@@ -44,7 +44,11 @@ export const OmniFilter = (props, context) => {
                 disabled={config}
                 onClick={() => act('power')}
               />
-              <Button icon="wrench" selected={config} onClick={() => act('configure')} />
+              <Button
+                icon="wrench"
+                selected={config}
+                onClick={() => act('configure')}
+              />
             </Fragment>
           }>
           <LabeledList>
@@ -99,10 +103,16 @@ export const OmniFilter = (props, context) => {
         </Section>
         <Section title="Flow Rate">
           <LabeledList>
-            <LabeledList.Item label="Current Flow Rate">{last_flow_rate} L/s</LabeledList.Item>
+            <LabeledList.Item label="Current Flow Rate">
+              {last_flow_rate} L/s
+            </LabeledList.Item>
             <LabeledList.Item label="Flow Rate Limit">
               {config ? (
-                <Button icon="wrench" content={set_flow_rate / 10 + ' L/s'} onClick={() => act('set_flow_rate')} />
+                <Button
+                  icon="wrench"
+                  content={set_flow_rate / 10 + ' L/s'}
+                  onClick={() => act('set_flow_rate')}
+                />
               ) : (
                 set_flow_rate / 10 + ' L/s'
               )}
diff --git a/tgui/packages/tgui_ch/interfaces/OmniMixer.tsx b/tgui/packages/tgui_ch/interfaces/OmniMixer.tsx
index 8291095b0b..83f5169bb5 100644
--- a/tgui/packages/tgui_ch/interfaces/OmniMixer.tsx
+++ b/tgui/packages/tgui_ch/interfaces/OmniMixer.tsx
@@ -51,7 +51,11 @@ export const OmniMixer = (props, context) => {
                 disabled={config}
                 onClick={() => act('power')}
               />
-              <Button icon="wrench" selected={config} onClick={() => act('configure')} />
+              <Button
+                icon="wrench"
+                selected={config}
+                onClick={() => act('configure')}
+              />
             </Fragment>
           }>
           <Table>
@@ -69,7 +73,9 @@ export const OmniMixer = (props, context) => {
               {config ? <Table.Cell textAlign="center">Lock</Table.Cell> : null}
             </Table.Row>
             {ports ? (
-              ports.map((port) => <PortRow key={port.dir} port={port} config={config} />)
+              ports.map((port) => (
+                <PortRow key={port.dir} port={port} config={config} />
+              ))
             ) : (
               <Box color="bad">No Ports Detected</Box>
             )}
@@ -77,10 +83,16 @@ export const OmniMixer = (props, context) => {
         </Section>
         <Section title="Flow Rate">
           <LabeledList>
-            <LabeledList.Item label="Current Flow Rate">{last_flow_rate} L/s</LabeledList.Item>
+            <LabeledList.Item label="Current Flow Rate">
+              {last_flow_rate} L/s
+            </LabeledList.Item>
             <LabeledList.Item label="Flow Rate Limit">
               {config ? (
-                <Button icon="wrench" content={set_flow_rate / 10 + ' L/s'} onClick={() => act('set_flow_rate')} />
+                <Button
+                  icon="wrench"
+                  content={set_flow_rate / 10 + ' L/s'}
+                  onClick={() => act('set_flow_rate')}
+                />
               ) : (
                 set_flow_rate / 10 + ' L/s'
               )}
diff --git a/tgui/packages/tgui_ch/interfaces/OperatingComputer.js b/tgui/packages/tgui_ch/interfaces/OperatingComputer.js
index 68e83e7993..05d902bd0f 100644
--- a/tgui/packages/tgui_ch/interfaces/OperatingComputer.js
+++ b/tgui/packages/tgui_ch/interfaces/OperatingComputer.js
@@ -22,14 +22,26 @@ const damageRange = {
   bad: [0.5, Infinity],
 };
 
-const tempColors = ['bad', 'average', 'average', 'good', 'average', 'average', 'bad'];
+const tempColors = [
+  'bad',
+  'average',
+  'average',
+  'good',
+  'average',
+  'average',
+  'bad',
+];
 
 export const OperatingComputer = (props, context) => {
   const { act, data } = useBackend(context);
   const { hasOccupant, choice } = data;
   let body;
   if (!choice) {
-    body = hasOccupant ? <OperatingComputerPatient /> : <OperatingComputerUnoccupied />;
+    body = hasOccupant ? (
+      <OperatingComputerPatient />
+    ) : (
+      <OperatingComputerUnoccupied />
+    );
   } else {
     body = <OperatingComputerOptions />;
   }
@@ -37,10 +49,16 @@ export const OperatingComputer = (props, context) => {
     <Window width={650} height={455} resizable>
       <Window.Content>
         <Tabs>
-          <Tabs.Tab selected={!choice} icon="user" onClick={() => act('choiceOff')}>
+          <Tabs.Tab
+            selected={!choice}
+            icon="user"
+            onClick={() => act('choiceOff')}>
             Patient
           </Tabs.Tab>
-          <Tabs.Tab selected={!!choice} icon="cog" onClick={() => act('choiceOn')}>
+          <Tabs.Tab
+            selected={!!choice}
+            icon="cog"
+            onClick={() => act('choiceOn')}>
             Options
           </Tabs.Tab>
         </Tabs>
@@ -75,7 +93,12 @@ const OperatingComputerPatient = (props, context) => {
           </LabeledList.Item>
           {damages.map((d, i) => (
             <LabeledList.Item key={i} label={d[0] + ' Damage'}>
-              <ProgressBar key={i} min="0" max="100" value={occupant[d[1]] / 100} ranges={damageRange}>
+              <ProgressBar
+                key={i}
+                min="0"
+                max="100"
+                value={occupant[d[1]] / 100}
+                ranges={damageRange}>
                 {round(occupant[d[1]])}
               </ProgressBar>
             </LabeledList.Item>
@@ -104,7 +127,9 @@ const OperatingComputerPatient = (props, context) => {
                   {occupant.bloodPercent}%, {occupant.bloodLevel}cl
                 </ProgressBar>
               </LabeledList.Item>
-              <LabeledList.Item label="Pulse">{occupant.pulse} BPM</LabeledList.Item>
+              <LabeledList.Item label="Pulse">
+                {occupant.pulse} BPM
+              </LabeledList.Item>
             </Fragment>
           )}
         </LabeledList>
@@ -115,7 +140,9 @@ const OperatingComputerPatient = (props, context) => {
             {occupant.surgery.map((limb) => (
               <LabeledList.Item key={limb.name} label={limb.name}>
                 <LabeledList>
-                  <LabeledList.Item label="Current State">{limb.currentStage}</LabeledList.Item>
+                  <LabeledList.Item label="Current State">
+                    {limb.currentStage}
+                  </LabeledList.Item>
                   <LabeledList.Item label="Possible Next Steps">
                     {limb.nextSteps.map((step) => (
                       <div key={step}>{step}</div>
diff --git a/tgui/packages/tgui_ch/interfaces/OvermapDisperser.js b/tgui/packages/tgui_ch/interfaces/OvermapDisperser.js
index c857aa5321..ce78b3542d 100644
--- a/tgui/packages/tgui_ch/interfaces/OvermapDisperser.js
+++ b/tgui/packages/tgui_ch/interfaces/OvermapDisperser.js
@@ -15,28 +15,49 @@ export const OvermapDisperser = (props, context) => {
 
 const OvermapDisperserContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const { faillink, calibration, overmapdir, cal_accuracy, strength, range, next_shot, nopower, skill, chargeload } =
-    data;
+  const {
+    faillink,
+    calibration,
+    overmapdir,
+    cal_accuracy,
+    strength,
+    range,
+    next_shot,
+    nopower,
+    skill,
+    chargeload,
+  } = data;
 
   if (faillink) {
-    return <Section title="Error">Machine is incomplete, out of range, or misaligned!</Section>;
+    return (
+      <Section title="Error">
+        Machine is incomplete, out of range, or misaligned!
+      </Section>
+    );
   }
 
   return (
     <Flex wrap="wrap" spacing={1}>
       <Flex.Item basis="22%">
         <Section title="Targeting" textAlign="center">
-          <OvermapPanControls actToDo="choose" selected={(val) => val === overmapdir} />
+          <OvermapPanControls
+            actToDo="choose"
+            selected={(val) => val === overmapdir}
+          />
         </Section>
       </Flex.Item>
       <Flex.Item basis="74%" grow={1}>
         <Section title="Charge">
           <LabeledList>
             {(nopower && (
-              <LabeledList.Item label="Error">At least one part of the machine is unpowered.</LabeledList.Item>
+              <LabeledList.Item label="Error">
+                At least one part of the machine is unpowered.
+              </LabeledList.Item>
             )) ||
               null}
-            <LabeledList.Item label="Charge Load Type">{chargeload}</LabeledList.Item>
+            <LabeledList.Item label="Charge Load Type">
+              {chargeload}
+            </LabeledList.Item>
             <LabeledList.Item label="Cooldown">
               {(next_shot === 0 && <Box color="good">Ready</Box>) ||
                 (next_shot > 1 && (
@@ -53,15 +74,23 @@ const OvermapDisperserContent = (props, context) => {
       <Flex.Item basis="50%" mt={1}>
         <Section title="Calibration">
           <AnimatedNumber value={cal_accuracy} />%
-          <Button ml={1} icon="exchange-alt" onClick={() => act('skill_calibration')}>
+          <Button
+            ml={1}
+            icon="exchange-alt"
+            onClick={() => act('skill_calibration')}>
             Pre-Calibration
           </Button>
           <Box mt={1}>
             {calibration.map((cal, i) => (
               <Box key={i}>
                 Cal #{i}:
-                <Button ml={1} icon="random" onClick={() => act('calibration', { calibration: i })}>
-                  {cal.toString() /* We do this to make the button size correctly at 0 */}
+                <Button
+                  ml={1}
+                  icon="random"
+                  onClick={() => act('calibration', { calibration: i })}>
+                  {
+                    cal.toString() /* We do this to make the button size correctly at 0 */
+                  }
                 </Button>
               </Box>
             ))}
@@ -77,7 +106,10 @@ const OvermapDisperserContent = (props, context) => {
               </Button>
             </LabeledList.Item>
             <LabeledList.Item label="Radius">
-              <Button fluid icon="expand-arrows-alt" onClick={() => act('range')}>
+              <Button
+                fluid
+                icon="expand-arrows-alt"
+                onClick={() => act('range')}>
                 {range}
               </Button>
             </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/OvermapEngines.js b/tgui/packages/tgui_ch/interfaces/OvermapEngines.js
index 36c7d3bbef..59d763d0d3 100644
--- a/tgui/packages/tgui_ch/interfaces/OvermapEngines.js
+++ b/tgui/packages/tgui_ch/interfaces/OvermapEngines.js
@@ -26,14 +26,25 @@ export const OvermapEnginesContent = (props, context) => {
       <Section title="Status">
         <LabeledList>
           <LabeledList.Item label="Engines">
-            <Button icon="power-off" selected={global_state} onClick={() => act('global_toggle')}>
+            <Button
+              icon="power-off"
+              selected={global_state}
+              onClick={() => act('global_toggle')}>
               {global_state ? 'Shut All Engines Down' : 'Start All Engines'}
             </Button>
           </LabeledList.Item>
           <LabeledList.Item label="Volume Limit">
-            <Button onClick={() => act('global_limit', { global_limit: -0.1 })} icon="minus" />
-            <Button onClick={() => act('set_global_limit')}>{global_limit}%</Button>
-            <Button onClick={() => act('global_limit', { global_limit: 0.1 })} icon="plus" />
+            <Button
+              onClick={() => act('global_limit', { global_limit: -0.1 })}
+              icon="minus"
+            />
+            <Button onClick={() => act('set_global_limit')}>
+              {global_limit}%
+            </Button>
+            <Button
+              onClick={() => act('global_limit', { global_limit: 0.1 })}
+              icon="plus"
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Total Thrust">
             <AnimatedNumber value={total_thrust} />
@@ -47,8 +58,12 @@ export const OvermapEnginesContent = (props, context) => {
               <Collapsible
                 title={
                   <Box inline>
-                    Engine #{i + 1} | Thrust: <AnimatedNumber value={engine.eng_thrust} /> | Limit:{' '}
-                    <AnimatedNumber value={engine.eng_thrust_limiter} format={(val) => val + '%'} />
+                    Engine #{i + 1} | Thrust:{' '}
+                    <AnimatedNumber value={engine.eng_thrust} /> | Limit:{' '}
+                    <AnimatedNumber
+                      value={engine.eng_thrust_limiter}
+                      format={(val) => val + '%'}
+                    />
                   </Box>
                   // "Engine " + (i + 1)
                   //   + " | Thrust: " + engine.eng_thrust
@@ -56,10 +71,23 @@ export const OvermapEnginesContent = (props, context) => {
                 }>
                 <Section width="127%">
                   <LabeledList>
-                    <LabeledList.Item label="Type">{engine.eng_type}</LabeledList.Item>
+                    <LabeledList.Item label="Type">
+                      {engine.eng_type}
+                    </LabeledList.Item>
                     <LabeledList.Item label="Status">
-                      <Box color={engine.eng_on ? (engine.eng_on === 1 ? 'good' : 'average') : 'bad'}>
-                        {engine.eng_on ? (engine.eng_on === 1 ? 'Online' : 'Booting') : 'Offline'}
+                      <Box
+                        color={
+                          engine.eng_on
+                            ? engine.eng_on === 1
+                              ? 'good'
+                              : 'average'
+                            : 'bad'
+                        }>
+                        {engine.eng_on
+                          ? engine.eng_on === 1
+                            ? 'Online'
+                            : 'Booting'
+                          : 'Offline'}
                       </Box>
                       {engine.eng_status.map((status) => {
                         if (Array.isArray(status)) {
@@ -69,16 +97,34 @@ export const OvermapEnginesContent = (props, context) => {
                         }
                       })}
                     </LabeledList.Item>
-                    <LabeledList.Item label="Current Thrust">{engine.eng_thrust}</LabeledList.Item>
+                    <LabeledList.Item label="Current Thrust">
+                      {engine.eng_thrust}
+                    </LabeledList.Item>
                     <LabeledList.Item label="Volume Limit">
                       <Button
-                        onClick={() => act('limit', { limit: -0.1, engine: engine.eng_reference })}
+                        onClick={() =>
+                          act('limit', {
+                            limit: -0.1,
+                            engine: engine.eng_reference,
+                          })
+                        }
                         icon="minus"
                       />
-                      <Button onClick={() => act('set_limit', { engine: engine.eng_reference })}>
+                      <Button
+                        onClick={() =>
+                          act('set_limit', { engine: engine.eng_reference })
+                        }>
                         {engine.eng_thrust_limiter}%
                       </Button>
-                      <Button onClick={() => act('limit', { limit: 0.1, engine: engine.eng_reference })} icon="plus" />
+                      <Button
+                        onClick={() =>
+                          act('limit', {
+                            limit: 0.1,
+                            engine: engine.eng_reference,
+                          })
+                        }
+                        icon="plus"
+                      />
                     </LabeledList.Item>
                   </LabeledList>
                 </Section>
@@ -91,8 +137,14 @@ export const OvermapEnginesContent = (props, context) => {
                 color={engine.eng_on === -1 ? 'purple' : null}
                 selected={engine.eng_on === 1}
                 icon="power-off"
-                onClick={() => act('toggle_engine', { engine: engine.eng_reference })}>
-                {engine.eng_on ? (engine.eng_on === 1 ? 'Shutoff' : 'Booting') : 'Startup'}
+                onClick={() =>
+                  act('toggle_engine', { engine: engine.eng_reference })
+                }>
+                {engine.eng_on
+                  ? engine.eng_on === 1
+                    ? 'Shutoff'
+                    : 'Booting'
+                  : 'Startup'}
               </Button>
             </Flex.Item>
           </Flex>
diff --git a/tgui/packages/tgui_ch/interfaces/OvermapHelm.js b/tgui/packages/tgui_ch/interfaces/OvermapHelm.js
index f56f9e2645..b7237aa2ed 100644
--- a/tgui/packages/tgui_ch/interfaces/OvermapHelm.js
+++ b/tgui/packages/tgui_ch/interfaces/OvermapHelm.js
@@ -39,7 +39,9 @@ export const OvermapFlightDataWrap = (props, context) => {
   // While, yes, this is a strange choice to use fieldset over Section
   // just look at how pretty the legend is, sticking partially through the border ;///;
   return (
-    <fieldset style={{ height: '100%', border: '1px solid #4972a1', margin: 'none' }} className="Section">
+    <fieldset
+      style={{ height: '100%', border: '1px solid #4972a1', margin: 'none' }}
+      className="Section">
       <legend>Flight Data</legend>
       <OvermapFlightData />
     </fieldset>
@@ -52,7 +54,9 @@ const OvermapManualControl = (props, context) => {
   const { canburn, manual_control } = data;
 
   return (
-    <fieldset style={{ height: '100%', border: '1px solid #4972a1' }} className="Section">
+    <fieldset
+      style={{ height: '100%', border: '1px solid #4972a1' }}
+      className="Section">
       <legend>Manual Control</legend>
       <Flex align="center" justify="center">
         <Flex.Item>
@@ -63,7 +67,10 @@ const OvermapManualControl = (props, context) => {
         <Box bold underline>
           Direct Control
         </Box>
-        <Button selected={manual_control} onClick={() => act('manual')} icon="compass">
+        <Button
+          selected={manual_control}
+          onClick={() => act('manual')}
+          icon="compass">
           {manual_control ? 'Enabled' : 'Disabled'}
         </Button>
       </Box>
@@ -77,14 +84,17 @@ const OvermapAutopilot = (props, context) => {
 
   if (autopilot_disabled) {
     return (
-      <fieldset style={{ height: '100%', border: '1px solid #4972a1' }} className="Section">
+      <fieldset
+        style={{ height: '100%', border: '1px solid #4972a1' }}
+        className="Section">
         <legend>Autopilot</legend>
         <Box textAlign="center" color="bad" fontSize={1.2}>
           AUTOPILOT DISABLED
         </Box>
         <Box textAlign="center" color="average">
-          Warning: This vessel is equipped with a class I autopilot. Class I autopilots are unable to do anything but
-          fly in a straight line directly towards the target, and may result in collisions.
+          Warning: This vessel is equipped with a class I autopilot. Class I
+          autopilots are unable to do anything but fly in a straight line
+          directly towards the target, and may result in collisions.
         </Box>
         <Box textAlign="center">
           <Button.Confirm
@@ -102,17 +112,25 @@ const OvermapAutopilot = (props, context) => {
   }
 
   return (
-    <fieldset style={{ height: '100%', border: '1px solid #4972a1' }} className="Section">
+    <fieldset
+      style={{ height: '100%', border: '1px solid #4972a1' }}
+      className="Section">
       <legend>Autopilot</legend>
       <LabeledList>
         <LabeledList.Item label="Target">
           {(dest && (
             <Fragment>
-              <Button onClick={() => act('setcoord', { setx: true })}>{d_x}</Button>
-              <Button onClick={() => act('setcoord', { sety: true })}>{d_y}</Button>
+              <Button onClick={() => act('setcoord', { setx: true })}>
+                {d_x}
+              </Button>
+              <Button onClick={() => act('setcoord', { sety: true })}>
+                {d_y}
+              </Button>
             </Fragment>
           )) || (
-            <Button icon="pen" onClick={() => act('setcoord', { setx: true, sety: true })}>
+            <Button
+              icon="pen"
+              onClick={() => act('setcoord', { setx: true, sety: true })}>
               None
             </Button>
           )}
@@ -123,10 +141,20 @@ const OvermapAutopilot = (props, context) => {
           </Button>
         </LabeledList.Item>
       </LabeledList>
-      <Button mt={1} fluid selected={autopilot} disabled={!dest} icon="robot" onClick={() => act('apilot')}>
+      <Button
+        mt={1}
+        fluid
+        selected={autopilot}
+        disabled={!dest}
+        icon="robot"
+        onClick={() => act('apilot')}>
         {autopilot ? 'Engaged' : 'Disengaged'}
       </Button>
-      <Button fluid color="good" icon="exclamation-triangle" onClick={() => act('apilot_lock')}>
+      <Button
+        fluid
+        color="good"
+        icon="exclamation-triangle"
+        onClick={() => act('apilot_lock')}>
         Lock Autopilot
       </Button>
     </fieldset>
@@ -150,12 +178,18 @@ const OvermapNavComputer = (props, context) => {
       </LabeledList>
       <Flex mt={1} align="center" justify="center" spacing={1}>
         <Flex.Item basis="50%">
-          <Button fluid icon="save" onClick={() => act('add', { add: 'current' })}>
+          <Button
+            fluid
+            icon="save"
+            onClick={() => act('add', { add: 'current' })}>
             Save Current Position
           </Button>
         </Flex.Item>
         <Flex.Item basis="50%">
-          <Button fluid icon="sticky-note" onClick={() => act('add', { add: 'new' })}>
+          <Button
+            fluid
+            icon="sticky-note"
+            onClick={() => act('add', { add: 'new' })}>
             Add New Entry
           </Button>
         </Flex.Item>
@@ -174,10 +208,14 @@ const OvermapNavComputer = (props, context) => {
                 {loc.x} : {loc.y}
               </Table.Cell>
               <Table.Cell collapsing>
-                <Button icon="rocket" onClick={() => act('setds', { x: loc.x, y: loc.y })}>
+                <Button
+                  icon="rocket"
+                  onClick={() => act('setds', { x: loc.x, y: loc.y })}>
                   Plot Course
                 </Button>
-                <Button icon="trash" onClick={() => act('remove', { remove: loc.reference })}>
+                <Button
+                  icon="trash"
+                  onClick={() => act('remove', { remove: loc.reference })}>
                   Remove
                 </Button>
               </Table.Cell>
diff --git a/tgui/packages/tgui_ch/interfaces/OvermapNavigation.tsx b/tgui/packages/tgui_ch/interfaces/OvermapNavigation.tsx
index 6461654510..3a6d6d465d 100644
--- a/tgui/packages/tgui_ch/interfaces/OvermapNavigation.tsx
+++ b/tgui/packages/tgui_ch/interfaces/OvermapNavigation.tsx
@@ -40,7 +40,9 @@ export const OvermapNavigationContent = (props, context) => {
           <LabeledList.Item label="Coordinates">
             {s_x} : {s_y}
           </LabeledList.Item>
-          <LabeledList.Item label="Additional Information">{sector_info}</LabeledList.Item>
+          <LabeledList.Item label="Additional Information">
+            {sector_info}
+          </LabeledList.Item>
         </LabeledList>
       </Section>
       <Section title="Flight Data">
diff --git a/tgui/packages/tgui_ch/interfaces/OvermapShieldGenerator.js b/tgui/packages/tgui_ch/interfaces/OvermapShieldGenerator.js
index 55873b70ee..77a7e8ebfb 100644
--- a/tgui/packages/tgui_ch/interfaces/OvermapShieldGenerator.js
+++ b/tgui/packages/tgui_ch/interfaces/OvermapShieldGenerator.js
@@ -20,8 +20,9 @@ const OvermapShieldGeneratorContent = (props, context) => {
   if (offline_for) {
     return (
       <Section title="EMERGENCY SHUTDOWN" color="bad">
-        An emergency shutdown has been initiated - generator cooling down. Please wait until the generator cools down
-        before resuming operation. Estimated time left: {offline_for} seconds.
+        An emergency shutdown has been initiated - generator cooling down.
+        Please wait until the generator cools down before resuming operation.
+        Estimated time left: {offline_for} seconds.
       </Section>
     );
   }
@@ -81,14 +82,17 @@ const OvermapShieldGeneratorStatus = (props, context) => {
       <LabeledList>
         <LabeledList.Item label="Generator is">
           {(running === 1 && <Box color="average">Shutting Down</Box>) ||
-            (running === 2 && ((overloaded && <Box color="bad">Overloaded</Box>) || <Box color="good">Running</Box>)) ||
+            (running === 2 &&
+              ((overloaded && <Box color="bad">Overloaded</Box>) || (
+                <Box color="good">Running</Box>
+              ))) ||
             (running === 3 && <Box color="average">Inactive</Box>) ||
             (running === 4 && (
               <Box color="blue">
                 Spinning Up&nbsp;
-                {(target_radius !== field_radius && <Box inline>(Adjusting Radius)</Box>) || (
-                  <Box inline>{spinup_counter * 2}s</Box>
-                )}
+                {(target_radius !== field_radius && (
+                  <Box inline>(Adjusting Radius)</Box>
+                )) || <Box inline>{spinup_counter * 2}s</Box>}
               </Box>
             )) || <Box color="bad">Offline</Box>}
         </LabeledList.Item>
@@ -101,7 +105,8 @@ const OvermapShieldGeneratorStatus = (props, context) => {
           <AnimatedNumber value={field_integrity} />%
         </LabeledList.Item>
         <LabeledList.Item label="Mitigation">
-          {mitigation_em}% EM / {mitigation_physical}% PH / {mitigation_heat}% HE / {mitigation_max}% MAX
+          {mitigation_em}% EM / {mitigation_physical}% PH / {mitigation_heat}%
+          HE / {mitigation_max}% MAX
         </LabeledList.Item>
         <LabeledList.Item label="Upkeep Energy Use">
           <AnimatedNumber value={upkeep_power_usage} /> kW
@@ -122,7 +127,8 @@ const OvermapShieldGeneratorStatus = (props, context) => {
         <LabeledList.Item label="Field Size">
           <AnimatedNumber value={functional_segments} />
           &nbsp;/&nbsp;
-          <AnimatedNumber value={total_segments} /> m&sup2; (radius <AnimatedNumber value={field_radius} />, target{' '}
+          <AnimatedNumber value={total_segments} /> m&sup2; (radius{' '}
+          <AnimatedNumber value={field_radius} />, target{' '}
           <AnimatedNumber value={target_radius} />)
         </LabeledList.Item>
       </LabeledList>
@@ -141,15 +147,23 @@ const OvermapShieldGeneratorControls = (props, context) => {
         <Fragment>
           {(running >= 2 && (
             <Box>
-              <Button icon="power-off" onClick={() => act('begin_shutdown')} selected>
+              <Button
+                icon="power-off"
+                onClick={() => act('begin_shutdown')}
+                selected>
                 Turn off
               </Button>
               {(running === 3 && (
-                <Button icon="power-off" onClick={() => act('toggle_idle', { toggle_idle: 0 })}>
+                <Button
+                  icon="power-off"
+                  onClick={() => act('toggle_idle', { toggle_idle: 0 })}>
                   Activate
                 </Button>
               )) || (
-                <Button icon="power-off" onClick={() => act('toggle_idle', { toggle_idle: 1 })} selected>
+                <Button
+                  icon="power-off"
+                  onClick={() => act('toggle_idle', { toggle_idle: 1 })}
+                  selected>
                   Deactivate
                 </Button>
               )}
@@ -160,7 +174,10 @@ const OvermapShieldGeneratorControls = (props, context) => {
             </Button>
           )}
           {(running && hacked && (
-            <Button icon="exclamation-triangle" onClick={() => act('emergency_shutdown')} color="bad">
+            <Button
+              icon="exclamation-triangle"
+              onClick={() => act('emergency_shutdown')}
+              color="bad">
               EMERGENCY SHUTDOWN
             </Button>
           )) ||
diff --git a/tgui/packages/tgui_ch/interfaces/OvermapShipSensors.js b/tgui/packages/tgui_ch/interfaces/OvermapShipSensors.js
index cac57ef184..118b10439d 100644
--- a/tgui/packages/tgui_ch/interfaces/OvermapShipSensors.js
+++ b/tgui/packages/tgui_ch/interfaces/OvermapShipSensors.js
@@ -15,7 +15,17 @@ export const OvermapShipSensors = (props, context) => {
 
 export const OvermapShipSensorsContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const { viewing, on, range, health, max_health, heat, critical_heat, status, contacts } = data;
+  const {
+    viewing,
+    on,
+    range,
+    health,
+    max_health,
+    heat,
+    critical_heat,
+    status,
+    contacts,
+  } = data;
 
   return (
     <Fragment>
@@ -23,10 +33,16 @@ export const OvermapShipSensorsContent = (props, context) => {
         title="Status"
         buttons={
           <Fragment>
-            <Button icon="eye" selected={viewing} onClick={() => act('viewing')}>
+            <Button
+              icon="eye"
+              selected={viewing}
+              onClick={() => act('viewing')}>
               Map View
             </Button>
-            <Button icon="power-off" selected={on} onClick={() => act('toggle_sensor')}>
+            <Button
+              icon="power-off"
+              selected={on}
+              onClick={() => act('toggle_sensor')}>
               {on ? 'Sensors Enabled' : 'Sensors Disabled'}
             </Button>
           </Fragment>
@@ -60,8 +76,12 @@ export const OvermapShipSensorsContent = (props, context) => {
               value={heat}
               maxValue={critical_heat}>
               {(heat < critical_heat * 0.5 && <Box>Temperature low.</Box>) ||
-                (heat < critical_heat * 0.75 && <Box>Sensor temperature high!</Box>) || (
-                  <Box>TEMPERATURE CRITICAL: Disable or reduce power immediately!</Box>
+                (heat < critical_heat * 0.75 && (
+                  <Box>Sensor temperature high!</Box>
+                )) || (
+                  <Box>
+                    TEMPERATURE CRITICAL: Disable or reduce power immediately!
+                  </Box>
                 )}
             </ProgressBar>
           </LabeledList.Item>
@@ -70,7 +90,11 @@ export const OvermapShipSensorsContent = (props, context) => {
       <Section title="Contacts">
         {(contacts.length &&
           contacts.map((alien) => (
-            <Button key={alien.ref} fluid icon="search" onClick={() => act('scan', { scan: alien.ref })}>
+            <Button
+              key={alien.ref}
+              fluid
+              icon="search"
+              onClick={() => act('scan', { scan: alien.ref })}>
               <Box bold inline>
                 Scan: {alien.name}
               </Box>
diff --git a/tgui/packages/tgui_ch/interfaces/ParticleAccelerator.tsx b/tgui/packages/tgui_ch/interfaces/ParticleAccelerator.tsx
index bdc3b783b8..c8f9242102 100644
--- a/tgui/packages/tgui_ch/interfaces/ParticleAccelerator.tsx
+++ b/tgui/packages/tgui_ch/interfaces/ParticleAccelerator.tsx
@@ -19,9 +19,17 @@ export const ParticleAccelerator = (props, context) => {
           <LabeledList>
             <LabeledList.Item
               label="Status"
-              buttons={<Button icon={'sync'} content={'Run Scan'} onClick={() => act('scan')} />}>
+              buttons={
+                <Button
+                  icon={'sync'}
+                  content={'Run Scan'}
+                  onClick={() => act('scan')}
+                />
+              }>
               <Box color={assembled ? 'good' : 'bad'}>
-                {assembled ? 'Ready - All parts in place' : 'Unable to detect all parts'}
+                {assembled
+                  ? 'Ready - All parts in place'
+                  : 'Unable to detect all parts'}
               </Box>
             </LabeledList.Item>
           </LabeledList>
@@ -38,9 +46,17 @@ export const ParticleAccelerator = (props, context) => {
               />
             </LabeledList.Item>
             <LabeledList.Item label="Particle Strength">
-              <Button icon="backward" disabled={!assembled} onClick={() => act('remove_strength')} />{' '}
+              <Button
+                icon="backward"
+                disabled={!assembled}
+                onClick={() => act('remove_strength')}
+              />{' '}
               {String(strength).padStart(1, '0')}{' '}
-              <Button icon="forward" disabled={!assembled} onClick={() => act('add_strength')} />
+              <Button
+                icon="forward"
+                disabled={!assembled}
+                onClick={() => act('add_strength')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui_ch/interfaces/PartsLathe.js b/tgui/packages/tgui_ch/interfaces/PartsLathe.js
index 73ddb247fe..779602e932 100644
--- a/tgui/packages/tgui_ch/interfaces/PartsLathe.js
+++ b/tgui/packages/tgui_ch/interfaces/PartsLathe.js
@@ -7,18 +7,30 @@ import { Materials } from './ExosuitFabricator';
 
 export const PartsLathe = (props, context) => {
   const { act, data } = useBackend(context);
-  const { panelOpen, copyBoard, copyBoardReqComponents, queue, building, buildPercent, error, recipies } = data;
+  const {
+    panelOpen,
+    copyBoard,
+    copyBoardReqComponents,
+    queue,
+    building,
+    buildPercent,
+    error,
+    recipies,
+  } = data;
   return (
     <Window width={500} height={500} resizable>
       <Window.Content scrollable>
-        {(error && <NoticeBox danger>Missing Materials: {error}</NoticeBox>) || null}
+        {(error && <NoticeBox danger>Missing Materials: {error}</NoticeBox>) ||
+          null}
         <Section title="Materials">
           <Materials displayAllMat />
         </Section>
         {(building && (
           <Section title="Currently Building">
             <LabeledList>
-              <LabeledList.Item label="Name">{toTitleCase(building)}</LabeledList.Item>
+              <LabeledList.Item label="Name">
+                {toTitleCase(building)}
+              </LabeledList.Item>
               <LabeledList.Item label="Progress">
                 <ProgressBar color="good" value={buildPercent} maxValue={100} />
               </LabeledList.Item>
@@ -59,7 +71,10 @@ export const PartsLathe = (props, context) => {
               <Box key={item} color="label">
                 #{i + 1}: {toTitleCase(item)}
                 {((i > 0 || !building) && (
-                  <Button ml={1} icon="times" onClick={() => act('cancel', { cancel: i + 1 })}>
+                  <Button
+                    ml={1}
+                    icon="times"
+                    onClick={() => act('cancel', { cancel: i + 1 })}>
                     Cancel
                   </Button>
                 )) ||
@@ -71,7 +86,9 @@ export const PartsLathe = (props, context) => {
           {recipies.length &&
             recipies.map((recipe) => (
               <Box key={recipe.name}>
-                <Button icon="wrench" onClick={() => act('queue', { queue: recipe.type })}>
+                <Button
+                  icon="wrench"
+                  onClick={() => act('queue', { queue: recipe.type })}>
                   {toTitleCase(recipe.name)}
                 </Button>
               </Box>
diff --git a/tgui/packages/tgui_ch/interfaces/PathogenicIsolator.js b/tgui/packages/tgui_ch/interfaces/PathogenicIsolator.js
index 2fdc8b901a..b4b9e935a5 100644
--- a/tgui/packages/tgui_ch/interfaces/PathogenicIsolator.js
+++ b/tgui/packages/tgui_ch/interfaces/PathogenicIsolator.js
@@ -19,18 +19,30 @@ const virusModalBodyOverride = (modal, context) => {
             disabled={!can_print}
             icon="print"
             content="Print"
-            onClick={() => act('print', { type: 'virus_record', vir: virus.record })}
+            onClick={() =>
+              act('print', { type: 'virus_record', vir: virus.record })
+            }
           />
           <Button icon="times" color="red" onClick={() => act('modal_close')} />
         </Fragment>
       }>
       <Box mx="0.5rem">
         <LabeledList>
-          <LabeledList.Item label="Spread">{virus.spread_text} Transmission</LabeledList.Item>
-          <LabeledList.Item label="Possible cure">{virus.antigen}</LabeledList.Item>
-          <LabeledList.Item label="Rate of Progression">{virus.rate}</LabeledList.Item>
-          <LabeledList.Item label="Antibiotic Resistance">{virus.resistance}%</LabeledList.Item>
-          <LabeledList.Item label="Species Affected">{virus.species}</LabeledList.Item>
+          <LabeledList.Item label="Spread">
+            {virus.spread_text} Transmission
+          </LabeledList.Item>
+          <LabeledList.Item label="Possible cure">
+            {virus.antigen}
+          </LabeledList.Item>
+          <LabeledList.Item label="Rate of Progression">
+            {virus.rate}
+          </LabeledList.Item>
+          <LabeledList.Item label="Antibiotic Resistance">
+            {virus.resistance}%
+          </LabeledList.Item>
+          <LabeledList.Item label="Species Affected">
+            {virus.species}
+          </LabeledList.Item>
           <LabeledList.Item label="Symptoms">
             <LabeledList>
               {virus.symptoms.map((s) => (
@@ -76,7 +88,10 @@ export const PathogenicIsolator = (props, context) => {
     <Window height={500} width={520} resizable>
       <ComplexModal maxHeight="100%" maxWidth="95%" />
       <Window.Content scrollable>
-        {(isolating && <NoticeBox warning>The Isolator is currently isolating...</NoticeBox>) || null}
+        {(isolating && (
+          <NoticeBox warning>The Isolator is currently isolating...</NoticeBox>
+        )) ||
+          null}
         <Tabs>
           <Tabs.Tab selected={tabIndex === 0} onClick={() => setTabIndex(0)}>
             Home
@@ -105,7 +120,12 @@ const PathogenicIsolatorTabHome = (props, context) => {
             disabled={!can_print}
             onClick={() => act('print', { type: 'patient_diagnosis' })}
           />
-          <Button icon="eject" content="Eject Syringe" disabled={!syringe_inserted} onClick={() => act('eject')} />
+          <Button
+            icon="eject"
+            content="Eject Syringe"
+            disabled={!syringe_inserted}
+            onClick={() => act('eject')}
+          />
         </Fragment>
       }>
       {(pathogen_pool.length &&
@@ -121,7 +141,9 @@ const PathogenicIsolatorTabHome = (props, context) => {
                   <Button
                     icon="virus"
                     content="Isolate"
-                    onClick={() => act('isolate', { isolate: pathogen.reference })}
+                    onClick={() =>
+                      act('isolate', { isolate: pathogen.reference })
+                    }
                   />
                   <Button
                     icon="search"
@@ -165,7 +187,11 @@ const PathogenicIsolatorTabDatabase = (props, context) => {
       }>
       {(database.length &&
         database.map((entry) => (
-          <Button key={entry.name} fluid icon="search" onClick={() => act('view_entry', { vir: entry.record })}>
+          <Button
+            key={entry.name}
+            fluid
+            icon="search"
+            onClick={() => act('view_entry', { vir: entry.record })}>
             {entry.name}
           </Button>
         ))) || <Box color="average">The viral database is empty.</Box>}
diff --git a/tgui/packages/tgui_ch/interfaces/Pda.js b/tgui/packages/tgui_ch/interfaces/Pda.js
index d40d93b3af..b573e0d4db 100644
--- a/tgui/packages/tgui_ch/interfaces/Pda.js
+++ b/tgui/packages/tgui_ch/interfaces/Pda.js
@@ -33,7 +33,9 @@ export const Pda = (props, context) => {
     return (
       <Window>
         <Window.Content>
-          <Section stretchContents>Warning: No ID information found! Please swipe ID!</Section>
+          <Section stretchContents>
+            Warning: No ID information found! Please swipe ID!
+          </Section>
         </Window.Content>
       </Window>
     );
@@ -41,12 +43,23 @@ export const Pda = (props, context) => {
 
   let App = getPdaApp(app.template);
 
-  const [settingsMode, setSettingsMode] = useLocalState(context, 'settingsMode', false);
+  const [settingsMode, setSettingsMode] = useLocalState(
+    context,
+    'settingsMode',
+    false
+  );
 
   return (
-    <Window width={580} height={670} theme={useRetro ? 'pda-retro' : null} resizable>
+    <Window
+      width={580}
+      height={670}
+      theme={useRetro ? 'pda-retro' : null}
+      resizable>
       <Window.Content scrollable>
-        <PDAHeader settingsMode={settingsMode} setSettingsMode={setSettingsMode} />
+        <PDAHeader
+          settingsMode={settingsMode}
+          setSettingsMode={setSettingsMode}
+        />
         {(settingsMode && <PDASettings />) || (
           <Section
             title={
@@ -78,14 +91,23 @@ const PDAHeader = (props, context) => {
       <Flex align="center" justify="space-between">
         {!!idInserted && (
           <Flex.Item>
-            <Button icon="eject" color="transparent" onClick={() => act('Authenticate')} content={idLink} />
+            <Button
+              icon="eject"
+              color="transparent"
+              onClick={() => act('Authenticate')}
+              content={idLink}
+            />
           </Flex.Item>
         )}
         <Flex.Item grow={1} textAlign="center" bold>
           {stationTime}
         </Flex.Item>
         <Flex.Item>
-          <Button selected={settingsMode} onClick={() => setSettingsMode(!settingsMode)} icon="cog" />
+          <Button
+            selected={settingsMode}
+            onClick={() => setSettingsMode(!settingsMode)}
+            icon="cog"
+          />
           <Button onClick={() => act('Retro')} icon="adjust" />
         </Flex.Item>
       </Flex>
@@ -102,7 +124,11 @@ const PDASettings = (props, context) => {
     <Section title="Settings">
       <LabeledList>
         <LabeledList.Item label="R.E.T.R.O Mode">
-          <Button icon="cog" content={'Retro Theme'} onClick={() => act('Retro')} />
+          <Button
+            icon="cog"
+            content={'Retro Theme'}
+            onClick={() => act('Retro')}
+          />
         </LabeledList.Item>
         <LabeledList.Item label="Touch Sounds">
           <Button
@@ -114,12 +140,20 @@ const PDASettings = (props, context) => {
         </LabeledList.Item>
         {!!cartridge_name && (
           <LabeledList.Item label="Cartridge">
-            <Button icon="eject" onClick={() => act('Eject')} content={cartridge_name} />
+            <Button
+              icon="eject"
+              onClick={() => act('Eject')}
+              content={cartridge_name}
+            />
           </LabeledList.Item>
         )}
         {!!idInserted && (
           <LabeledList.Item label="ID Card">
-            <Button icon="eject" onClick={() => act('Authenticate')} content={idLink} />
+            <Button
+              icon="eject"
+              onClick={() => act('Authenticate')}
+              content={idLink}
+            />
           </LabeledList.Item>
         )}
       </LabeledList>
@@ -135,7 +169,12 @@ const PDAFooter = (props, context) => {
   const { app, useRetro } = data;
 
   return (
-    <Box position="fixed" bottom="0%" left="0%" right="0%" backgroundColor={useRetro ? '#6f7961' : '#1b1b1b'}>
+    <Box
+      position="fixed"
+      bottom="0%"
+      left="0%"
+      right="0%"
+      backgroundColor={useRetro ? '#6f7961' : '#1b1b1b'}>
       <Flex>
         <Flex.Item basis="33%">
           <Button
diff --git a/tgui/packages/tgui_ch/interfaces/PersonalCrafting.js b/tgui/packages/tgui_ch/interfaces/PersonalCrafting.js
index 31b677bc95..eeeb62de23 100644
--- a/tgui/packages/tgui_ch/interfaces/PersonalCrafting.js
+++ b/tgui/packages/tgui_ch/interfaces/PersonalCrafting.js
@@ -63,7 +63,11 @@ export const PersonalCrafting = (props, context) => {
           title="Personal Crafting"
           buttons={
             <>
-              <Button.Checkbox content="Compact" checked={display_compact} onClick={() => act('toggle_compact')} />
+              <Button.Checkbox
+                content="Compact"
+                checked={display_compact}
+                onClick={() => act('toggle_compact')}
+              />
               <Button.Checkbox
                 content="Craftable Only"
                 checked={display_craftable_only}
@@ -120,7 +124,9 @@ const CraftingList = (props, context) => {
               icon="cog"
               content="Craft"
               disabled={!craftability[craftable.ref]}
-              tooltip={craftable.tool_text && 'Tools needed: ' + craftable.tool_text}
+              tooltip={
+                craftable.tool_text && 'Tools needed: ' + craftable.tool_text
+              }
               tooltipPosition="left"
               onClick={() =>
                 act('make', {
@@ -152,9 +158,21 @@ const CraftingList = (props, context) => {
           />
         }>
         <LabeledList>
-          {!!craftable.req_text && <LabeledList.Item label="Required">{craftable.req_text}</LabeledList.Item>}
-          {!!craftable.catalyst_text && <LabeledList.Item label="Catalyst">{craftable.catalyst_text}</LabeledList.Item>}
-          {!!craftable.tool_text && <LabeledList.Item label="Tools">{craftable.tool_text}</LabeledList.Item>}
+          {!!craftable.req_text && (
+            <LabeledList.Item label="Required">
+              {craftable.req_text}
+            </LabeledList.Item>
+          )}
+          {!!craftable.catalyst_text && (
+            <LabeledList.Item label="Catalyst">
+              {craftable.catalyst_text}
+            </LabeledList.Item>
+          )}
+          {!!craftable.tool_text && (
+            <LabeledList.Item label="Tools">
+              {craftable.tool_text}
+            </LabeledList.Item>
+          )}
         </LabeledList>
       </Section>
     );
diff --git a/tgui/packages/tgui_ch/interfaces/PetrificationInterface.js b/tgui/packages/tgui_ch/interfaces/PetrificationInterface.js
index 241368e62e..d42399d867 100644
--- a/tgui/packages/tgui_ch/interfaces/PetrificationInterface.js
+++ b/tgui/packages/tgui_ch/interfaces/PetrificationInterface.js
@@ -5,7 +5,17 @@ import { Window } from '../layouts';
 export const PetrificationInterface = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { material, identifier, adjective, tint, t, able_to_unpetrify, discard_clothes, target, can_remote } = data;
+  const {
+    material,
+    identifier,
+    adjective,
+    tint,
+    t,
+    able_to_unpetrify,
+    discard_clothes,
+    target,
+    can_remote,
+  } = data;
 
   return (
     <Window width={425} height={313} resizable>
@@ -65,7 +75,9 @@ export const PetrificationInterface = (props, context) => {
                 selected={able_to_unpetrify}
                 tooltip="Whether or not the statue can be unpetrified. If yes, they will get a verb letting them turn back- if not, even if they're a gargoyle, it will be taken away. OOC Escape is always an option though."
                 tooltipPosition="top"
-                onClick={() => act('set_option', { 'option': 'able_to_unpetrify' })}
+                onClick={() =>
+                  act('set_option', { 'option': 'able_to_unpetrify' })
+                }
               />
             </LabeledList.Item>
             <LabeledList.Item label="Discard Clothes">
@@ -75,11 +87,17 @@ export const PetrificationInterface = (props, context) => {
                 selected={discard_clothes}
                 tooltip="Whether the target's clothing falls off before the petrification happens. (Clothes do not change color when petrified, and cannot be removed while being a statue)"
                 tooltipPosition="top"
-                onClick={() => act('set_option', { 'option': 'discard_clothes' })}
+                onClick={() =>
+                  act('set_option', { 'option': 'discard_clothes' })
+                }
               />
             </LabeledList.Item>
             <LabeledList.Item label="Target">
-              <Button fluid content={target} onClick={() => act('set_option', { 'option': 'target' })} />
+              <Button
+                fluid
+                content={target}
+                onClick={() => act('set_option', { 'option': 'target' })}
+              />
             </LabeledList.Item>
           </LabeledList>
           <br />
@@ -88,7 +106,9 @@ export const PetrificationInterface = (props, context) => {
             disabled={!can_remote}
             content="Petrify"
             tooltip={
-              'Turn the target to ' + material + ". This is meant for roleplay/scene purposes. Please don't abuse it."
+              'Turn the target to ' +
+              material +
+              ". This is meant for roleplay/scene purposes. Please don't abuse it."
             }
             tooltipPosition="top"
             onClick={() => act('petrify')}
diff --git a/tgui/packages/tgui_ch/interfaces/Photocopier.js b/tgui/packages/tgui_ch/interfaces/Photocopier.js
index 0efd2cb2ff..9851fd16f0 100644
--- a/tgui/packages/tgui_ch/interfaces/Photocopier.js
+++ b/tgui/packages/tgui_ch/interfaces/Photocopier.js
@@ -80,12 +80,21 @@ const Options = (props, context) => {
           />
         </Flex.Item>
         <Flex.Item>
-          <Button ml={0.2} icon="copy" textAlign="center" onClick={() => act('make_copy')}>
+          <Button
+            ml={0.2}
+            icon="copy"
+            textAlign="center"
+            onClick={() => act('make_copy')}>
             Copy
           </Button>
         </Flex.Item>
       </Flex>
-      <Button mt={0.5} textAlign="center" icon="reply" fluid onClick={() => act('remove')}>
+      <Button
+        mt={0.5}
+        textAlign="center"
+        icon="reply"
+        fluid
+        onClick={() => act('remove')}>
         Remove item
       </Button>
     </Section>
@@ -99,7 +108,12 @@ const AIOptions = (props, context) => {
   return (
     <Section title="AI Options">
       <Box>
-        <Button fluid icon="images" textAlign="center" disabled={!can_AI_print} onClick={() => act('ai_photo')}>
+        <Button
+          fluid
+          icon="images"
+          textAlign="center"
+          disabled={!can_AI_print}
+          onClick={() => act('ai_photo')}>
           Print photo from database
         </Button>
       </Box>
diff --git a/tgui/packages/tgui_ch/interfaces/PipeDispenser.js b/tgui/packages/tgui_ch/interfaces/PipeDispenser.js
index 729953037c..7679d10191 100644
--- a/tgui/packages/tgui_ch/interfaces/PipeDispenser.js
+++ b/tgui/packages/tgui_ch/interfaces/PipeDispenser.js
@@ -7,8 +7,13 @@ export const PipeDispenser = (props, context) => {
   const { act, data } = useBackend(context);
   const { disposals, p_layer, pipe_layers, categories = [] } = data;
 
-  const [categoryName, setCategoryName] = useLocalState(context, 'categoryName');
-  const shownCategory = categories.find((category) => category.cat_name === categoryName) || categories[0];
+  const [categoryName, setCategoryName] = useLocalState(
+    context,
+    'categoryName'
+  );
+  const shownCategory =
+    categories.find((category) => category.cat_name === categoryName) ||
+    categories[0];
   return (
     <Window width={425} height={515} resizable>
       <Window.Content scrollable>
diff --git a/tgui/packages/tgui_ch/interfaces/PlantAnalyzer.js b/tgui/packages/tgui_ch/interfaces/PlantAnalyzer.js
index adfca22db1..51df2feed4 100644
--- a/tgui/packages/tgui_ch/interfaces/PlantAnalyzer.js
+++ b/tgui/packages/tgui_ch/interfaces/PlantAnalyzer.js
@@ -31,7 +31,11 @@ const PlantAnalyzerContent = (props, context) => {
   const { no_seed, seed, reagents } = data;
 
   if (no_seed) {
-    return <Section title="Analyzer Unused">You should go scan a plant! There is no data currently loaded.</Section>;
+    return (
+      <Section title="Analyzer Unused">
+        You should go scan a plant! There is no data currently loaded.
+      </Section>
+    );
   }
 
   return (
@@ -42,7 +46,11 @@ const PlantAnalyzerContent = (props, context) => {
           <Button icon="print" onClick={() => act('print')}>
             Print Report
           </Button>
-          <Button icon="window-close" color="red" onClick={() => act('close')} />
+          <Button
+            icon="window-close"
+            color="red"
+            onClick={() => act('close')}
+          />
         </Fragment>
       }>
       <LabeledList>
@@ -51,8 +59,12 @@ const PlantAnalyzerContent = (props, context) => {
         </LabeledList.Item>
         <LabeledList.Item label="Endurance">{seed.endurance}</LabeledList.Item>
         <LabeledList.Item label="Yield">{seed.yield}</LabeledList.Item>
-        <LabeledList.Item label="Maturation Time">{seed.maturation_time}</LabeledList.Item>
-        <LabeledList.Item label="Production Time">{seed.production_time}</LabeledList.Item>
+        <LabeledList.Item label="Maturation Time">
+          {seed.maturation_time}
+        </LabeledList.Item>
+        <LabeledList.Item label="Production Time">
+          {seed.production_time}
+        </LabeledList.Item>
         <LabeledList.Item label="Potency">{seed.potency}</LabeledList.Item>
       </LabeledList>
       {(reagents.length && (
diff --git a/tgui/packages/tgui_ch/interfaces/PlayerNotes.tsx b/tgui/packages/tgui_ch/interfaces/PlayerNotes.tsx
index e06d4873c2..fc7f640da4 100644
--- a/tgui/packages/tgui_ch/interfaces/PlayerNotes.tsx
+++ b/tgui/packages/tgui_ch/interfaces/PlayerNotes.tsx
@@ -18,7 +18,12 @@ export const PlayerNotes = (props, context) => {
   };
 
   return (
-    <Window title={'Player Notes'} theme={device_theme} width={400} height={500} resizable>
+    <Window
+      title={'Player Notes'}
+      theme={device_theme}
+      width={400}
+      height={500}
+      resizable>
       <Window.Content scrollable>
         <Section title="Player notes">
           <Button icon="filter" onClick={() => act('filter_player_notes')}>
@@ -37,7 +42,11 @@ export const PlayerNotes = (props, context) => {
             }
           />
           <Divider vertical />
-          <Button color="green" content={filter} onClick={() => act('clear_player_info_filter')} />
+          <Button
+            color="green"
+            content={filter}
+            onClick={() => act('clear_player_info_filter')}
+          />
           <Divider />
           <Table>
             {ckeys.map((ckey) => (
diff --git a/tgui/packages/tgui_ch/interfaces/PlayerNotesInfo.tsx b/tgui/packages/tgui_ch/interfaces/PlayerNotesInfo.tsx
index f77a9a0859..705a3808d4 100644
--- a/tgui/packages/tgui_ch/interfaces/PlayerNotesInfo.tsx
+++ b/tgui/packages/tgui_ch/interfaces/PlayerNotesInfo.tsx
@@ -13,7 +13,12 @@ export const PlayerNotesInfo = (props, context) => {
   const { act, data } = useBackend<Data>(context);
   const { device_theme, age, ckey, entries } = data;
   return (
-    <Window title={`Info on ${ckey}`} theme={device_theme} width={400} height={500} resizable>
+    <Window
+      title={`Info on ${ckey}`}
+      theme={device_theme}
+      width={400}
+      height={500}
+      resizable>
       <Window.Content scrollable>
         <Section title={`Player age: ${age}`}>
           <Table>
@@ -23,7 +28,8 @@ export const PlayerNotesInfo = (props, context) => {
                 <Table.Cell collapsing={false}>
                   <Divider />
                   <Box>
-                    Written by {entry.author} on <span color="blue">{entry.date}</span>
+                    Written by {entry.author} on{' '}
+                    <span color="blue">{entry.date}</span>
                     <br />
                     <span color="green">&quot;{entry.comment}&quot;</span>
                   </Box>
diff --git a/tgui/packages/tgui_ch/interfaces/PointDefenseControl.tsx b/tgui/packages/tgui_ch/interfaces/PointDefenseControl.tsx
index 4d3bd2a9d7..070e03cbde 100644
--- a/tgui/packages/tgui_ch/interfaces/PointDefenseControl.tsx
+++ b/tgui/packages/tgui_ch/interfaces/PointDefenseControl.tsx
@@ -5,7 +5,14 @@ import { Window } from '../layouts';
 
 type Data = {
   id: string;
-  turrets: { id: string; active: BooleanLike; ref: string; effective_range; reaction_wheel_delay; recharge_time }[];
+  turrets: {
+    id: string;
+    active: BooleanLike;
+    ref: string;
+    effective_range;
+    reaction_wheel_delay;
+    recharge_time;
+  }[];
 };
 
 export const PointDefenseControl = (props, context) => {
@@ -29,12 +36,23 @@ export const PointDefenseControl = (props, context) => {
                   </Button>
                 }>
                 <LabeledList>
-                  <LabeledList.Item label="Effective range">{pd.effective_range}</LabeledList.Item>
-                  <LabeledList.Item label="Reaction wheel delay">{pd.reaction_wheel_delay}</LabeledList.Item>
-                  <LabeledList.Item label="Recharge time">{pd.recharge_time}</LabeledList.Item>
+                  <LabeledList.Item label="Effective range">
+                    {pd.effective_range}
+                  </LabeledList.Item>
+                  <LabeledList.Item label="Reaction wheel delay">
+                    {pd.reaction_wheel_delay}
+                  </LabeledList.Item>
+                  <LabeledList.Item label="Recharge time">
+                    {pd.recharge_time}
+                  </LabeledList.Item>
                 </LabeledList>
               </Section>
-            ))) || <Box color="bad">Error: No weapon systems detected. Please check network connection.</Box>}
+            ))) || (
+            <Box color="bad">
+              Error: No weapon systems detected. Please check network
+              connection.
+            </Box>
+          )}
         </Section>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui_ch/interfaces/PortableGenerator.js b/tgui/packages/tgui_ch/interfaces/PortableGenerator.js
index e7fe204e92..34f9494103 100644
--- a/tgui/packages/tgui_ch/interfaces/PortableGenerator.js
+++ b/tgui/packages/tgui_ch/interfaces/PortableGenerator.js
@@ -6,7 +6,10 @@ import { round } from 'common/math';
 export const PortableGenerator = (props, context) => {
   const { act, data } = useBackend(context);
   const stack_percent = data.fuel_stored / data.fuel_capacity;
-  const stackPercentState = (stack_percent >= 0.5 && 'good') || (stack_percent > 0.15 && 'average') || 'bad';
+  const stackPercentState =
+    (stack_percent >= 0.5 && 'good') ||
+    (stack_percent > 0.15 && 'average') ||
+    'bad';
   return (
     <Window width={450} height={340} resizable>
       <Window.Content scrollable>
@@ -26,7 +29,11 @@ export const PortableGenerator = (props, context) => {
               label="Fuel Type"
               buttons={
                 data.fuel_stored >= 1 && (
-                  <Button ml={1} icon="eject" disabled={data.active} onClick={() => act('eject')}>
+                  <Button
+                    ml={1}
+                    icon="eject"
+                    disabled={data.active}
+                    onClick={() => act('eject')}>
                     Eject
                   </Button>
                 )
@@ -46,7 +53,9 @@ export const PortableGenerator = (props, context) => {
                 {data.fuel_stored}cm&sup3; / {data.fuel_capacity}cm&sup3;
               </ProgressBar>
             </LabeledList.Item>
-            <LabeledList.Item label="Fuel Usage">{data.fuel_usage} cm&sup3;/s</LabeledList.Item>
+            <LabeledList.Item label="Fuel Usage">
+              {data.fuel_usage} cm&sup3;/s
+            </LabeledList.Item>
             <LabeledList.Item label="Temperature">
               <ProgressBar
                 value={data.temperature_current}
@@ -59,7 +68,9 @@ export const PortableGenerator = (props, context) => {
         </Section>
         <Section title="Output">
           <LabeledList>
-            <LabeledList.Item label="Current output" color={data.unsafe_output ? 'bad' : null}>
+            <LabeledList.Item
+              label="Current output"
+              color={data.unsafe_output ? 'bad' : null}>
               {data.power_output}
             </LabeledList.Item>
             <LabeledList.Item label="Adjust output">
diff --git a/tgui/packages/tgui_ch/interfaces/PortablePump.js b/tgui/packages/tgui_ch/interfaces/PortablePump.js
index 52c985b1e6..d16bd7bbb0 100644
--- a/tgui/packages/tgui_ch/interfaces/PortablePump.js
+++ b/tgui/packages/tgui_ch/interfaces/PortablePump.js
@@ -5,7 +5,13 @@ import { PortableBasicInfo } from './common/PortableAtmos';
 
 export const PortablePump = (props, context) => {
   const { act, data } = useBackend(context);
-  const { direction, target_pressure, default_pressure, min_pressure, max_pressure } = data;
+  const {
+    direction,
+    target_pressure,
+    default_pressure,
+    min_pressure,
+    max_pressure,
+  } = data;
   return (
     <Window width={330} height={375} resizable>
       <Window.Content scrollable>
diff --git a/tgui/packages/tgui_ch/interfaces/PortableTurret.js b/tgui/packages/tgui_ch/interfaces/PortableTurret.js
index e7690b653a..a84f2e14f1 100644
--- a/tgui/packages/tgui_ch/interfaces/PortableTurret.js
+++ b/tgui/packages/tgui_ch/interfaces/PortableTurret.js
@@ -23,7 +23,9 @@ export const PortableTurret = (props, context) => {
   return (
     <Window width={500} height={400} resizable>
       <Window.Content scrollable>
-        <NoticeBox>Swipe an ID card to {locked ? 'unlock' : 'lock'} this interface.</NoticeBox>
+        <NoticeBox>
+          Swipe an ID card to {locked ? 'unlock' : 'lock'} this interface.
+        </NoticeBox>
         <Section>
           <LabeledList>
             <LabeledList.Item label="Status">
diff --git a/tgui/packages/tgui_ch/interfaces/PowerMonitor.js b/tgui/packages/tgui_ch/interfaces/PowerMonitor.js
index e40fba910a..685150c796 100644
--- a/tgui/packages/tgui_ch/interfaces/PowerMonitor.js
+++ b/tgui/packages/tgui_ch/interfaces/PowerMonitor.js
@@ -56,7 +56,13 @@ export const PowerMonitorContent = (props, context) => {
   return (
     <Section
       title="No active sensor. Listing all."
-      buttons={<Button content="Scan For Sensors" icon="undo" onClick={() => act('refresh')} />}>
+      buttons={
+        <Button
+          content="Scan For Sensors"
+          icon="undo"
+          onClick={() => act('refresh')}
+        />
+      }>
       {body}
     </Section>
   );
@@ -66,7 +72,11 @@ export const PowerMonitorFocus = (props, context) => {
   const { act, data } = useBackend(context);
   const { focus } = props;
   const { history } = focus;
-  const [sortByField, setSortByField] = useLocalState(context, 'sortByField', null);
+  const [sortByField, setSortByField] = useLocalState(
+    context,
+    'sortByField',
+    null
+  );
   const supply = history.supply[history.supply.length - 1] || 0;
   const demand = history.demand[history.demand.length - 1] || 0;
   const supplyData = history.supply.map((value, i) => [i, value]);
@@ -99,19 +109,33 @@ export const PowerMonitorFocus = (props, context) => {
     <Fragment>
       <Section
         title={focus.name}
-        buttons={<Button icon="sign-out-alt" content="Back To Main" onClick={() => act('clear')} />}
+        buttons={
+          <Button
+            icon="sign-out-alt"
+            content="Back To Main"
+            onClick={() => act('clear')}
+          />
+        }
       />
       <Flex mx={-0.5} mb={1}>
         <Flex.Item mx={0.5} width="200px">
           <Section>
             <LabeledList>
               <LabeledList.Item label="Supply">
-                <ProgressBar value={supply} minValue={0} maxValue={maxValue} color="teal">
+                <ProgressBar
+                  value={supply}
+                  minValue={0}
+                  maxValue={maxValue}
+                  color="teal">
                   {toFixed(supply / 1000) + ' kW'}
                 </ProgressBar>
               </LabeledList.Item>
               <LabeledList.Item label="Draw">
-                <ProgressBar value={demand} minValue={0} maxValue={maxValue} color="pink">
+                <ProgressBar
+                  value={demand}
+                  minValue={0}
+                  maxValue={maxValue}
+                  color="pink">
                   {toFixed(demand / 1000) + ' kW'}
                 </ProgressBar>
               </LabeledList.Item>
@@ -162,7 +186,9 @@ export const PowerMonitorFocus = (props, context) => {
           <Button.Checkbox
             checked={sortByField === 'problems'}
             content="Problems"
-            onClick={() => setSortByField(sortByField !== 'problems' && 'problems')}
+            onClick={() =>
+              setSortByField(sortByField !== 'problems' && 'problems')
+            }
           />
         </Box>
         <Table>
@@ -186,7 +212,9 @@ export const PowerMonitorFocus = (props, context) => {
               <td className="Table__cell text-right text-nowrap">
                 <AreaCharge charging={area.charging} charge={area.charge} />
               </td>
-              <td className="Table__cell text-right text-nowrap">{area.load}</td>
+              <td className="Table__cell text-right text-nowrap">
+                {area.load}
+              </td>
               <td className="Table__cell text-center text-nowrap">
                 <AreaStatusColorBox status={area.eqp} />
               </td>
@@ -212,7 +240,8 @@ export const AreaCharge = (props) => {
         width="18px"
         textAlign="center"
         name={
-          (charging === 0 && (charge > 50 ? 'battery-half' : 'battery-quarter')) ||
+          (charging === 0 &&
+            (charge > 50 ? 'battery-half' : 'battery-quarter')) ||
           (charging === 1 && 'bolt') ||
           (charging === 2 && 'battery-full')
         }
@@ -236,7 +265,13 @@ const AreaStatusColorBox = (props) => {
   const power = Boolean(status & 2);
   const mode = Boolean(status & 1);
   const tooltipText = (power ? 'On' : 'Off') + ` [${mode ? 'auto' : 'manual'}]`;
-  return <ColorBox color={power ? 'good' : 'bad'} content={mode ? undefined : 'M'} title={tooltipText} />;
+  return (
+    <ColorBox
+      color={power ? 'good' : 'bad'}
+      content={mode ? undefined : 'M'}
+      title={tooltipText}
+    />
+  );
 };
 
 AreaStatusColorBox.defaultHooks = pureComponentHooks;
diff --git a/tgui/packages/tgui_ch/interfaces/PrecisionEditor.js b/tgui/packages/tgui_ch/interfaces/PrecisionEditor.js
index 20c9e365ab..4f8ccc76da 100644
--- a/tgui/packages/tgui_ch/interfaces/PrecisionEditor.js
+++ b/tgui/packages/tgui_ch/interfaces/PrecisionEditor.js
@@ -29,9 +29,13 @@ const SeedStatus = (props, context) => {
         <>
           <LabeledList.Item label="Name">{seedname}</LabeledList.Item>
           {health < 100 ? (
-            <LabeledList.Item label="Genetic Integrity">{100 - health + '%'}</LabeledList.Item>
+            <LabeledList.Item label="Genetic Integrity">
+              {100 - health + '%'}
+            </LabeledList.Item>
           ) : (
-            <LabeledList.Item label="Genetic Integrity">{'UNVIABLE'}</LabeledList.Item>
+            <LabeledList.Item label="Genetic Integrity">
+              {'UNVIABLE'}
+            </LabeledList.Item>
           )}
 
           <LabeledList.Item label="Plant Color">{plantcolor}</LabeledList.Item>
@@ -47,13 +51,21 @@ const SeedStatus = (props, context) => {
               />
             ))}
           </LabeledList.Item>
-          <Button content="Edit Colors" onClick={() => act('change_focus', { window: 'colors' })} />
-          <Button content="Add Reagents" onClick={() => act('change_focus', { window: 'reagents' })} />
+          <Button
+            content="Edit Colors"
+            onClick={() => act('change_focus', { window: 'colors' })}
+          />
+          <Button
+            content="Add Reagents"
+            onClick={() => act('change_focus', { window: 'reagents' })}
+          />
           <LabeledList.Divider size={2} />
           <Button content="Eject Seed" onClick={() => act('eject')} />
         </>
       ) : (
-        <LabeledList.Item label="Waiting">{'There is currently no seed loaded.'}</LabeledList.Item>
+        <LabeledList.Item label="Waiting">
+          {'There is currently no seed loaded.'}
+        </LabeledList.Item>
       )}
     </LabeledList>
   );
@@ -69,10 +81,19 @@ const ColorEditor = (props, context) => {
       <ColorBox color={plantcolor} />
       <LabeledList.Item label="Fruit Color">{fruitcolor}</LabeledList.Item>
       <ColorBox color={fruitcolor} />
-      <Button content="Change plant color" onClick={() => act('change_color', { option: 0 })} />
-      <Button content="Change fruit color" onClick={() => act('change_color', { option: 1 })} />
+      <Button
+        content="Change plant color"
+        onClick={() => act('change_color', { option: 0 })}
+      />
+      <Button
+        content="Change fruit color"
+        onClick={() => act('change_color', { option: 1 })}
+      />
       <LabeledList.Divider size={2} />
-      <Button content="Return" onClick={() => act('change_focus', { window: 'main' })} />
+      <Button
+        content="Return"
+        onClick={() => act('change_focus', { window: 'main' })}
+      />
     </LabeledList>
   );
 };
@@ -84,13 +105,21 @@ const BiochemEditor = (props, context) => {
   return (
     <LabeledList>
       {health < 100 ? (
-        <LabeledList.Item label="Genetic Integrity">{100 - health + '%'}</LabeledList.Item>
+        <LabeledList.Item label="Genetic Integrity">
+          {100 - health + '%'}
+        </LabeledList.Item>
       ) : (
-        <LabeledList.Item label="Genetic Integrity">{'UNVIABLE'}</LabeledList.Item>
+        <LabeledList.Item label="Genetic Integrity">
+          {'UNVIABLE'}
+        </LabeledList.Item>
       )}
       <NoticeBox info={1} width={19} height={9} ml={1}>
-        {'Available chems to choose are based on the reagents stored in the beaker. '}
-        {' A minimum of 100 units of reagent is required to generate a viable sequence. '}
+        {
+          'Available chems to choose are based on the reagents stored in the beaker. '
+        }
+        {
+          ' A minimum of 100 units of reagent is required to generate a viable sequence. '
+        }
         {'The chosen reagent will be consumed in the process.'}
         <Box bold={1} mt={1}>
           {'This process severely damages genetic integrity.'}
@@ -114,16 +143,23 @@ const BiochemEditor = (props, context) => {
               ))}
             </LabeledList.Item>
           ) : (
-            <NoticeBox warning={1}>{'WARNING: Genetic integrity of seed is too poor to proceed.'}</NoticeBox>
+            <NoticeBox warning={1}>
+              {'WARNING: Genetic integrity of seed is too poor to proceed.'}
+            </NoticeBox>
           )}
 
           <Button content="Eject Beaker" onClick={() => act('eject_beaker')} />
         </>
       ) : (
-        <LabeledList.Item label="Waiting">{'There is currently no beaker loaded.'}</LabeledList.Item>
+        <LabeledList.Item label="Waiting">
+          {'There is currently no beaker loaded.'}
+        </LabeledList.Item>
       )}
 
-      <Button content="Return" onClick={() => act('change_focus', { window: 'main' })} />
+      <Button
+        content="Return"
+        onClick={() => act('change_focus', { window: 'main' })}
+      />
     </LabeledList>
   );
 };
diff --git a/tgui/packages/tgui_ch/interfaces/PressureRegulator.js b/tgui/packages/tgui_ch/interfaces/PressureRegulator.js
index afa700f46e..c5669cf344 100644
--- a/tgui/packages/tgui_ch/interfaces/PressureRegulator.js
+++ b/tgui/packages/tgui_ch/interfaces/PressureRegulator.js
@@ -73,9 +73,21 @@ export const PressureRegulator = (props, context) => {
               label="Desired Output Pressure"
               buttons={
                 <Fragment>
-                  <Button icon="compress-arrows-alt" content="MIN" onClick={() => act('set_press', { press: 'min' })} />
-                  <Button icon="expand-arrows-alt" content="MAX" onClick={() => act('set_press', { press: 'max' })} />
-                  <Button icon="wrench" content="SET" onClick={() => act('set_press', { press: 'set' })} />
+                  <Button
+                    icon="compress-arrows-alt"
+                    content="MIN"
+                    onClick={() => act('set_press', { press: 'min' })}
+                  />
+                  <Button
+                    icon="expand-arrows-alt"
+                    content="MAX"
+                    onClick={() => act('set_press', { press: 'max' })}
+                  />
+                  <Button
+                    icon="wrench"
+                    content="SET"
+                    onClick={() => act('set_press', { press: 'set' })}
+                  />
                 </Fragment>
               }>
               {pressure_set / 100} kPa
@@ -94,7 +106,11 @@ export const PressureRegulator = (props, context) => {
                     content="MAX"
                     onClick={() => act('set_flow_rate', { press: 'max' })}
                   />
-                  <Button icon="wrench" content="SET" onClick={() => act('set_flow_rate', { press: 'set' })} />
+                  <Button
+                    icon="wrench"
+                    content="SET"
+                    onClick={() => act('set_flow_rate', { press: 'set' })}
+                  />
                 </Fragment>
               }>
               {set_flow_rate / 10} L/s
diff --git a/tgui/packages/tgui_ch/interfaces/PrisonerManagement.js b/tgui/packages/tgui_ch/interfaces/PrisonerManagement.js
index 59c4e01c80..92269e1018 100644
--- a/tgui/packages/tgui_ch/interfaces/PrisonerManagement.js
+++ b/tgui/packages/tgui_ch/interfaces/PrisonerManagement.js
@@ -39,11 +39,28 @@ export const PrisonerManagement = (props, context) => {
                   {chemImplants.map((chem) => (
                     <Table.Row key={chem.ref}>
                       <Table.Cell textAlign="center">{chem.host}</Table.Cell>
-                      <Table.Cell textAlign="center">{chem.units}u remaining</Table.Cell>
                       <Table.Cell textAlign="center">
-                        <Button onClick={() => act('inject', { imp: chem.ref, val: 1 })}>(1)</Button>
-                        <Button onClick={() => act('inject', { imp: chem.ref, val: 5 })}>(5)</Button>
-                        <Button onClick={() => act('inject', { imp: chem.ref, val: 10 })}>(10)</Button>
+                        {chem.units}u remaining
+                      </Table.Cell>
+                      <Table.Cell textAlign="center">
+                        <Button
+                          onClick={() =>
+                            act('inject', { imp: chem.ref, val: 1 })
+                          }>
+                          (1)
+                        </Button>
+                        <Button
+                          onClick={() =>
+                            act('inject', { imp: chem.ref, val: 5 })
+                          }>
+                          (5)
+                        </Button>
+                        <Button
+                          onClick={() =>
+                            act('inject', { imp: chem.ref, val: 10 })
+                          }>
+                          (10)
+                        </Button>
                       </Table.Cell>
                     </Table.Row>
                   ))}
@@ -65,7 +82,9 @@ export const PrisonerManagement = (props, context) => {
                       </Table.Cell>
                       <Table.Cell textAlign="center">{track.loc}</Table.Cell>
                       <Table.Cell textAlign="center">
-                        <Button onClick={() => act('warn', { imp: track.ref })}>Message</Button>
+                        <Button onClick={() => act('warn', { imp: track.ref })}>
+                          Message
+                        </Button>
                       </Table.Cell>
                     </Table.Row>
                   ))}
diff --git a/tgui/packages/tgui_ch/interfaces/RCON.js b/tgui/packages/tgui_ch/interfaces/RCON.js
index df1a809946..9f8ecaf20a 100644
--- a/tgui/packages/tgui_ch/interfaces/RCON.js
+++ b/tgui/packages/tgui_ch/interfaces/RCON.js
@@ -32,10 +32,16 @@ export const RCONContent = (props, context) => {
   return (
     <Fragment>
       <Tabs>
-        <Tabs.Tab key="SMESs" selected={0 === tabIndex} onClick={() => setTabIndex(0)}>
+        <Tabs.Tab
+          key="SMESs"
+          selected={0 === tabIndex}
+          onClick={() => setTabIndex(0)}>
           <Icon name="power-off" /> SMESs
         </Tabs.Tab>
-        <Tabs.Tab key="Breakers" selected={1 === tabIndex} onClick={() => setTabIndex(1)}>
+        <Tabs.Tab
+          key="Breakers"
+          selected={1 === tabIndex}
+          onClick={() => setTabIndex(1)}>
           <Icon name="bolt" /> Breakers
         </Tabs.Tab>
       </Tabs>
@@ -120,7 +126,8 @@ const SMESItem = (props, context) => {
                 average: [0.15, 0.5],
                 bad: [-Infinity, 0.15],
               }}>
-              {round(charge / (1000 * 60), 1)} kWh / {round(capacity / (1000 * 60))} kWh ({capacityPercent}%)
+              {round(charge / (1000 * 60), 1)} kWh /{' '}
+              {round(capacity / (1000 * 60))} kWh ({capacityPercent}%)
             </ProgressBar>
           </Stack.Item>
         </Stack>
@@ -246,7 +253,11 @@ const SMESControls = (props, context) => {
               maxValue={levelMax / POWER_MUL}
               step={5}
               stepPixelSize={4}
-              format={(value) => formatPower(available, 1) + '/' + formatPower(value * POWER_MUL, 1)}
+              format={(value) =>
+                formatPower(available, 1) +
+                '/' +
+                formatPower(value * POWER_MUL, 1)
+              }
               onDrag={(e, value) =>
                 act(changeAmountAct, {
                   target: value * POWER_MUL,
diff --git a/tgui/packages/tgui_ch/interfaces/RIGSuit.js b/tgui/packages/tgui_ch/interfaces/RIGSuit.js
index 9af3274470..306ce613d4 100644
--- a/tgui/packages/tgui_ch/interfaces/RIGSuit.js
+++ b/tgui/packages/tgui_ch/interfaces/RIGSuit.js
@@ -57,7 +57,10 @@ const RIGSuitStatus = (props, context) => {
 
   const SealButton = (
     <Button
-      content={'Suit ' + (sealing ? 'seals working...' : sealed ? 'is Active' : 'is Inactive')}
+      content={
+        'Suit ' +
+        (sealing ? 'seals working...' : sealed ? 'is Active' : 'is Inactive')
+      }
       icon={sealing ? 'redo' : sealed ? 'power-off' : 'lock-open'}
       iconSpin={sealing}
       disabled={sealing}
@@ -232,13 +235,17 @@ const RIGSuitModules = (props, context) => {
           <Section
             key={module.name}
             level={2}
-            title={toTitleCase(module.name) + (module.damage ? ' (damaged)' : '')}
+            title={
+              toTitleCase(module.name) + (module.damage ? ' (damaged)' : '')
+            }
             buttons={
               <Fragment>
                 {module.can_select ? (
                   <Button
                     selected={module.name === primarysystem}
-                    content={module.name === primarysystem ? 'Selected' : 'Select'}
+                    content={
+                      module.name === primarysystem ? 'Selected' : 'Select'
+                    }
                     icon="arrow-circle-right"
                     onClick={() =>
                       act('interact_module', {
@@ -263,7 +270,11 @@ const RIGSuitModules = (props, context) => {
                 {module.can_toggle ? (
                   <Button
                     selected={module.is_active}
-                    content={module.is_active ? module.deactivatestring : module.activatestring}
+                    content={
+                      module.is_active
+                        ? module.deactivatestring
+                        : module.activatestring
+                    }
                     icon="arrow-circle-down"
                     onClick={() =>
                       act('interact_module', {
@@ -291,9 +302,13 @@ const RIGSuitModules = (props, context) => {
               <Flex.Item>
                 <Section title="Module Charges">
                   <LabeledList>
-                    <LabeledList.Item label="Selected">{capitalize(module.chargetype)}</LabeledList.Item>
+                    <LabeledList.Item label="Selected">
+                      {capitalize(module.chargetype)}
+                    </LabeledList.Item>
                     {module.charges.map((charge, i) => (
-                      <LabeledList.Item key={charge.caption} label={capitalize(charge.caption)}>
+                      <LabeledList.Item
+                        key={charge.caption}
+                        label={capitalize(charge.caption)}>
                         <Button
                           selected={module.realchargetype === charge.index}
                           icon="arrow-right"
diff --git a/tgui/packages/tgui_ch/interfaces/Radio.js b/tgui/packages/tgui_ch/interfaces/Radio.js
index a0c1938d57..83f27fc20b 100644
--- a/tgui/packages/tgui_ch/interfaces/Radio.js
+++ b/tgui/packages/tgui_ch/interfaces/Radio.js
@@ -21,7 +21,9 @@ export const Radio = (props, context) => {
     useSyndMode,
   } = data;
 
-  const tunedChannel = RADIO_CHANNELS.find((channel) => channel.freq === Number(rawfreq));
+  const tunedChannel = RADIO_CHANNELS.find(
+    (channel) => channel.freq === Number(rawfreq)
+  );
 
   // Calculate window height
   let height = 156;
@@ -34,7 +36,11 @@ export const Radio = (props, context) => {
     height += 38;
   }
   return (
-    <Window width={310} height={height} resizable theme={useSyndMode ? 'syndicate' : ''}>
+    <Window
+      width={310}
+      height={height}
+      resizable
+      theme={useSyndMode ? 'syndicate' : ''}>
       <Window.Content>
         <Section>
           <LabeledList>
@@ -110,7 +116,9 @@ export const Radio = (props, context) => {
             {!chan_list
               ? null
               : chan_list.map((channel) => {
-                const channeldata = RADIO_CHANNELS.find((c) => c.freq === Number(channel.freq));
+                const channeldata = RADIO_CHANNELS.find(
+                  (c) => c.freq === Number(channel.freq)
+                );
                 let color = 'default';
                 if (channeldata) {
                   color = channeldata.color;
@@ -123,7 +131,11 @@ export const Radio = (props, context) => {
                     textAlign="right">
                     {channel.secure_channel && subspace ? (
                       <Button
-                        icon={!channel.sec_channel_listen ? 'check-square-o' : 'square-o'}
+                        icon={
+                          !channel.sec_channel_listen
+                            ? 'check-square-o'
+                            : 'square-o'
+                        }
                         selected={!channel.sec_channel_listen}
                         content={!channel.sec_channel_listen ? 'On' : 'Off'}
                         onClick={() =>
diff --git a/tgui/packages/tgui_ch/interfaces/RapidPipeDispenser.js b/tgui/packages/tgui_ch/interfaces/RapidPipeDispenser.js
index 2f2578ebc8..ae48f9ff66 100644
--- a/tgui/packages/tgui_ch/interfaces/RapidPipeDispenser.js
+++ b/tgui/packages/tgui_ch/interfaces/RapidPipeDispenser.js
@@ -141,7 +141,10 @@ const LayerSection = (props, context) => {
               })
             }>
             <Box
-              className={classes(['pipes32x32', preview.dir + '-' + preview.icon_state])}
+              className={classes([
+                'pipes32x32',
+                preview.dir + '-' + preview.icon_state,
+              ])}
               style={{
                 transform: 'scale(1.5) translate(9.5%, 9.5%)',
               }}
@@ -156,8 +159,13 @@ const LayerSection = (props, context) => {
 const PipeTypeSection = (props, context) => {
   const { act, data } = useBackend(context);
   const { categories = [] } = data;
-  const [categoryName, setCategoryName] = useLocalState(context, 'categoryName');
-  const shownCategory = categories.find((category) => category.cat_name === categoryName) || categories[0];
+  const [categoryName, setCategoryName] = useLocalState(
+    context,
+    'categoryName'
+  );
+  const shownCategory =
+    categories.find((category) => category.cat_name === categoryName) ||
+    categories[0];
   return (
     <Section fill scrollable>
       <Tabs>
diff --git a/tgui/packages/tgui_ch/interfaces/RequestConsole.js b/tgui/packages/tgui_ch/interfaces/RequestConsole.js
index 811f8a8bef..6ed27c97a1 100644
--- a/tgui/packages/tgui_ch/interfaces/RequestConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/RequestConsole.js
@@ -19,7 +19,10 @@ const RequestConsoleSettings = (props, context) => {
   const { silent } = data;
   return (
     <Section title="Settings">
-      <Button selected={!silent} icon={silent ? 'volume-mute' : 'volume-up'} onClick={() => act('toggleSilent')}>
+      <Button
+        selected={!silent}
+        icon={silent ? 'volume-mute' : 'volume-up'}
+        onClick={() => act('toggleSilent')}>
         Speaker {silent ? 'OFF' : 'ON'}
       </Button>
     </Section>
@@ -68,10 +71,14 @@ const RequestConsoleSendMenu = (props, context) => {
               label={dept}
               buttons={
                 <Fragment>
-                  <Button icon="envelope-open-text" onClick={() => act('write', { write: dept, priority: 1 })}>
+                  <Button
+                    icon="envelope-open-text"
+                    onClick={() => act('write', { write: dept, priority: 1 })}>
                     Message
                   </Button>
-                  <Button icon="exclamation-triangle" onClick={() => act('write', { write: dept, priority: 2 })}>
+                  <Button
+                    icon="exclamation-triangle"
+                    onClick={() => act('write', { write: dept, priority: 2 })}>
                     High Priority
                   </Button>
                 </Fragment>
@@ -92,7 +99,9 @@ const RequestConsoleSendPass = (props, context) => {
         Message Sent Successfully
       </Box>
       <Box>
-        <Button icon="arrow-right" onClick={() => act('setScreen', { setScreen: RCS_MAINMENU })}>
+        <Button
+          icon="arrow-right"
+          onClick={() => act('setScreen', { setScreen: RCS_MAINMENU })}>
           Continue
         </Button>
       </Box>
@@ -108,7 +117,9 @@ const RequestConsoleSendFail = (props, context) => {
         An error occured. Message Not Sent.
       </Box>
       <Box>
-        <Button icon="arrow-right" onClick={() => act('setScreen', { setScreen: RCS_MAINMENU })}>
+        <Button
+          icon="arrow-right"
+          onClick={() => act('setScreen', { setScreen: RCS_MAINMENU })}>
           Continue
         </Button>
       </Box>
@@ -127,7 +138,9 @@ const RequestConsoleViewMessages = (props, context) => {
             label={decodeHtmlEntities(msg[0])}
             key={i}
             buttons={
-              <Button icon="print" onClick={() => act('print', { print: i + 1 })}>
+              <Button
+                icon="print"
+                onClick={() => act('print', { print: i + 1 })}>
                 Print
               </Button>
             }>
@@ -144,21 +157,36 @@ const RequestConsoleMessageAuth = (props, context) => {
   return (
     <Section title="Message Authentication">
       <LabeledList>
-        <LabeledList.Item label={'Message for ' + recipient}>{message}</LabeledList.Item>
-        <LabeledList.Item label="Priority">
-          {priority === 2 ? 'High Priority' : priority === 1 ? 'Normal Priority' : 'Unknown'}
+        <LabeledList.Item label={'Message for ' + recipient}>
+          {message}
         </LabeledList.Item>
-        <LabeledList.Item label="Validated By" color={msgVerified ? 'good' : 'bad'}>
+        <LabeledList.Item label="Priority">
+          {priority === 2
+            ? 'High Priority'
+            : priority === 1
+              ? 'Normal Priority'
+              : 'Unknown'}
+        </LabeledList.Item>
+        <LabeledList.Item
+          label="Validated By"
+          color={msgVerified ? 'good' : 'bad'}>
           {decodeHtmlEntities(msgVerified) || 'No Validation'}
         </LabeledList.Item>
-        <LabeledList.Item label="Stamped By" color={msgStamped ? 'good' : 'bad'}>
+        <LabeledList.Item
+          label="Stamped By"
+          color={msgStamped ? 'good' : 'bad'}>
           {decodeHtmlEntities(msgStamped) || 'No Stamp'}
         </LabeledList.Item>
       </LabeledList>
-      <Button mt={1} icon="share" onClick={() => act('department', { department: recipient })}>
+      <Button
+        mt={1}
+        icon="share"
+        onClick={() => act('department', { department: recipient })}>
         Send Message
       </Button>
-      <Button icon="undo" onClick={() => act('setScreen', { setScreen: RCS_MAINMENU })}>
+      <Button
+        icon="undo"
+        onClick={() => act('setScreen', { setScreen: RCS_MAINMENU })}>
         Back
       </Button>
     </Section>
@@ -197,7 +225,10 @@ const RequestConsoleAnnounce = (props, context) => {
             maxHeight="200px"
             scrollable
             buttons={
-              <Button ml={1} icon="pen" onClick={() => act('writeAnnouncement')}>
+              <Button
+                ml={1}
+                icon="pen"
+                onClick={() => act('writeAnnouncement')}>
                 Edit
               </Button>
             }>
@@ -209,10 +240,15 @@ const RequestConsoleAnnounce = (props, context) => {
           Swipe your ID card to authenticate yourself.
         </Box>
       )}
-      <Button disabled={!message || !announceAuth} icon="share" onClick={() => act('sendAnnouncement')}>
+      <Button
+        disabled={!message || !announceAuth}
+        icon="share"
+        onClick={() => act('sendAnnouncement')}>
         Announce
       </Button>
-      <Button icon="undo" onClick={() => act('setScreen', { setScreen: RCS_MAINMENU })}>
+      <Button
+        icon="undo"
+        onClick={() => act('setScreen', { setScreen: RCS_MAINMENU })}>
         Back
       </Button>
     </Section>
@@ -281,7 +317,11 @@ export const RequestConsole = (props, context) => {
         </Tabs>
         {(newmessagepriority && (
           <Section
-            title={newmessagepriority > 1 ? 'NEW PRIORITY MESSAGES' : 'There are new messages!'}
+            title={
+              newmessagepriority > 1
+                ? 'NEW PRIORITY MESSAGES'
+                : 'There are new messages!'
+            }
             color={newmessagepriority > 1 ? 'bad' : 'average'}
             bold={newmessagepriority > 1}
           />
diff --git a/tgui/packages/tgui_ch/interfaces/ResearchConsole.js b/tgui/packages/tgui_ch/interfaces/ResearchConsole.js
index c8c9bf51a0..b8af3339be 100644
--- a/tgui/packages/tgui_ch/interfaces/ResearchConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/ResearchConsole.js
@@ -55,8 +55,14 @@ const PaginationChevrons = (props, context) => {
   return (
     <Fragment>
       <Button icon="undo" onClick={() => act(target, { reset: true })} />
-      <Button icon="chevron-left" onClick={() => act(target, { reverse: -1 })} />
-      <Button icon="chevron-right" onClick={() => act(target, { reverse: 1 })} />
+      <Button
+        icon="chevron-left"
+        onClick={() => act(target, { reverse: -1 })}
+      />
+      <Button
+        icon="chevron-right"
+        onClick={() => act(target, { reverse: 1 })}
+      />
     </Fragment>
   );
 };
@@ -68,7 +74,12 @@ const ResearchConsoleViewDesigns = (props, context) => {
 
   return (
     <Section
-      title={<PaginationTitle title="Researched Technologies & Designs" target="design_page" />}
+      title={
+        <PaginationTitle
+          title="Researched Technologies & Designs"
+          target="design_page"
+        />
+      }
       buttons={
         <Fragment>
           <Button icon="print" onClick={() => act('print', { print: 2 })}>
@@ -108,13 +119,23 @@ const TechDisk = (props, context) => {
     return null;
   }
 
-  const [saveDialog, setSaveDialog] = useSharedState(context, 'saveDialogTech', false);
+  const [saveDialog, setSaveDialog] = useSharedState(
+    context,
+    'saveDialogTech',
+    false
+  );
 
   if (saveDialog) {
     return (
       <Section
         title="Load Technology to Disk"
-        buttons={<Button icon="arrow-left" content="Back" onClick={() => setSaveDialog(false)} />}>
+        buttons={
+          <Button
+            icon="arrow-left"
+            content="Back"
+            onClick={() => setSaveDialog(false)}
+          />
+        }>
         <LabeledList>
           {tech.map((level) => (
             <LabeledList.Item label={level.name} key={level.name}>
@@ -136,7 +157,9 @@ const TechDisk = (props, context) => {
   return (
     <Box>
       <LabeledList>
-        <LabeledList.Item label="Disk Contents">(Technology Data Disk)</LabeledList.Item>
+        <LabeledList.Item label="Disk Contents">
+          (Technology Data Disk)
+        </LabeledList.Item>
       </LabeledList>
       {(disk.stored && (
         <Box mt={2}>
@@ -181,15 +204,25 @@ const DataDisk = (props, context) => {
     return null;
   }
 
-  const [saveDialog, setSaveDialog] = useSharedState(context, 'saveDialogData', false);
+  const [saveDialog, setSaveDialog] = useSharedState(
+    context,
+    'saveDialogData',
+    false
+  );
 
   if (saveDialog) {
     return (
       <Section
-        title={<PaginationTitle title="Load Design to Disk" target="design_page" />}
+        title={
+          <PaginationTitle title="Load Design to Disk" target="design_page" />
+        }
         buttons={
           <Fragment>
-            <Button icon="arrow-left" content="Back" onClick={() => setSaveDialog(false)} />
+            <Button
+              icon="arrow-left"
+              content="Back"
+              onClick={() => setSaveDialog(false)}
+            />
             {<PaginationChevrons target={'design_page'} /> || null}
           </Fragment>
         }>
@@ -224,7 +257,9 @@ const DataDisk = (props, context) => {
         <Box>
           <LabeledList>
             <LabeledList.Item label="Name">{disk.name}</LabeledList.Item>
-            <LabeledList.Item label="Lathe Type">{disk.build_type}</LabeledList.Item>
+            <LabeledList.Item label="Lathe Type">
+              {disk.build_type}
+            </LabeledList.Item>
             <LabeledList.Item label="Required Materials">
               {Object.keys(disk.materials).map((mat) => (
                 <Box key={mat}>
@@ -283,7 +318,11 @@ const ResearchConsoleDestructiveAnalyzer = (props, context) => {
   const { linked_destroy } = data.info;
 
   if (!linked_destroy.present) {
-    return <Section title="Destructive Analyzer">No destructive analyzer found.</Section>;
+    return (
+      <Section title="Destructive Analyzer">
+        No destructive analyzer found.
+      </Section>
+    );
   }
 
   const { loaded_item, origin_tech } = linked_destroy;
@@ -299,13 +338,22 @@ const ResearchConsoleDestructiveAnalyzer = (props, context) => {
                 {(origin_tech.length &&
                   origin_tech.map((tech) => (
                     <LabeledList.Item label={tech.name} key={tech.name}>
-                      {tech.level}&nbsp;&nbsp;{tech.current && '(Current: ' + tech.current + ')'}
+                      {tech.level}&nbsp;&nbsp;
+                      {tech.current && '(Current: ' + tech.current + ')'}
                     </LabeledList.Item>
-                  ))) || <LabeledList.Item label="Error">No origin tech found.</LabeledList.Item>}
+                  ))) || (
+                  <LabeledList.Item label="Error">
+                    No origin tech found.
+                  </LabeledList.Item>
+                )}
               </LabeledList>
             </LabeledList.Item>
           </LabeledList>
-          <Button mt={1} color="red" icon="eraser" onClick={() => act('deconstruct')}>
+          <Button
+            mt={1}
+            color="red"
+            icon="eraser"
+            onClick={() => act('deconstruct')}>
             Deconstruct Item
           </Button>
           <Button icon="eject" onClick={() => act('eject_item')}>
@@ -345,11 +393,23 @@ const ResearchConsoleBuildMenu = (props, context) => {
                 {design.name}
               </Flex.Item>
               <Flex.Item width="15%" textAlign="center">
-                <Button mb={-1} icon="wrench" onClick={() => act(buildName, { build: design.id, imprint: design.id })}>
+                <Button
+                  mb={-1}
+                  icon="wrench"
+                  onClick={() =>
+                    act(buildName, { build: design.id, imprint: design.id })
+                  }>
                   Build
                 </Button>
                 {buildFiveName && (
-                  <Button mb={-1} onClick={() => act(buildFiveName, { build: design.id, imprint: design.id })}>
+                  <Button
+                    mb={-1}
+                    onClick={() =>
+                      act(buildFiveName, {
+                        build: design.id,
+                        imprint: design.id,
+                      })
+                    }>
                     x5
                   </Button>
                 )}
@@ -367,7 +427,9 @@ const ResearchConsoleBuildMenu = (props, context) => {
           </Fragment>
         ))
       ) : (
-        <Box>No items could be found matching the parameters (page or search).</Box>
+        <Box>
+          No items could be found matching the parameters (page or search).
+        </Box>
       )}
     </Section>
   );
@@ -394,7 +456,16 @@ const ResearchConsoleConstructor = (props, context) => {
     return <Section title={name}>No {name} found.</Section>;
   }
 
-  const { total_materials, max_materials, total_volume, max_volume, busy, mats, reagents, queue } = linked;
+  const {
+    total_materials,
+    max_materials,
+    total_volume,
+    max_volume,
+    busy,
+    mats,
+    reagents,
+    queue,
+  } = linked;
 
   const [protoTab, setProtoTab] = useSharedState(context, 'protoTab', 0);
 
@@ -413,9 +484,11 @@ const ResearchConsoleConstructor = (props, context) => {
 
   // Proto vs Circuit differences
   let removeQueueAction = name === 'Protolathe' ? 'removeP' : 'removeI';
-  let ejectSheetAction = name === 'Protolathe' ? 'lathe_ejectsheet' : 'imprinter_ejectsheet';
+  let ejectSheetAction =
+    name === 'Protolathe' ? 'lathe_ejectsheet' : 'imprinter_ejectsheet';
   let ejectChemAction = name === 'Protolathe' ? 'disposeP' : 'disposeI';
-  let ejectAllChemAction = name === 'Protolathe' ? 'disposeallP' : 'disposeallI';
+  let ejectAllChemAction =
+    name === 'Protolathe' ? 'disposeallP' : 'disposeallI';
 
   return (
     <Section title={name} buttons={(busy && <Icon name="sync" spin />) || null}>
@@ -432,7 +505,10 @@ const ResearchConsoleConstructor = (props, context) => {
         </LabeledList.Item>
       </LabeledList>
       <Tabs mt={1}>
-        <Tabs.Tab icon="wrench" selected={protoTab === 0} onClick={() => setProtoTab(0)}>
+        <Tabs.Tab
+          icon="wrench"
+          selected={protoTab === 0}
+          onClick={() => setProtoTab(0)}>
           Build
         </Tabs.Tab>
         <Tabs.Tab
@@ -443,10 +519,16 @@ const ResearchConsoleConstructor = (props, context) => {
           onClick={() => setProtoTab(1)}>
           Queue
         </Tabs.Tab>
-        <Tabs.Tab icon="cookie-bite" selected={protoTab === 2} onClick={() => setProtoTab(2)}>
+        <Tabs.Tab
+          icon="cookie-bite"
+          selected={protoTab === 2}
+          onClick={() => setProtoTab(2)}>
           Mat Storage
         </Tabs.Tab>
-        <Tabs.Tab icon="flask" selected={protoTab === 3} onClick={() => setProtoTab(3)}>
+        <Tabs.Tab
+          icon="flask"
+          selected={protoTab === 3}
+          onClick={() => setProtoTab(3)}>
           Chem Storage
         </Tabs.Tab>
       </Tabs>
@@ -471,7 +553,11 @@ const ResearchConsoleConstructor = (props, context) => {
                           <Button
                             ml={1}
                             icon="trash"
-                            onClick={() => act(removeQueueAction, { [removeQueueAction]: item.index })}>
+                            onClick={() =>
+                              act(removeQueueAction, {
+                                [removeQueueAction]: item.index,
+                              })
+                            }>
                             Remove
                           </Button>
                         </Box>
@@ -485,7 +571,13 @@ const ResearchConsoleConstructor = (props, context) => {
                 }
                 return (
                   <LabeledList.Item label={item.name} key={item.name}>
-                    <Button icon="trash" onClick={() => act(removeQueueAction, { [removeQueueAction]: item.index })}>
+                    <Button
+                      icon="trash"
+                      onClick={() =>
+                        act(removeQueueAction, {
+                          [removeQueueAction]: item.index,
+                        })
+                      }>
                       Remove
                     </Button>
                   </LabeledList.Item>
@@ -496,7 +588,11 @@ const ResearchConsoleConstructor = (props, context) => {
         (protoTab === 2 && (
           <LabeledList>
             {mats.map((mat) => {
-              const [ejectAmt, setEjectAmt] = useLocalState(context, 'ejectAmt' + mat.name, 0);
+              const [ejectAmt, setEjectAmt] = useLocalState(
+                context,
+                'ejectAmt' + mat.name,
+                0
+              );
               return (
                 <LabeledList.Item
                   label={toTitleCase(mat.name)}
@@ -515,14 +611,22 @@ const ResearchConsoleConstructor = (props, context) => {
                         disabled={!mat.removable}
                         onClick={() => {
                           setEjectAmt(0);
-                          act(ejectSheetAction, { [ejectSheetAction]: mat.name, amount: ejectAmt });
+                          act(ejectSheetAction, {
+                            [ejectSheetAction]: mat.name,
+                            amount: ejectAmt,
+                          });
                         }}>
                         Num
                       </Button>
                       <Button
                         icon="eject"
                         disabled={!mat.removable}
-                        onClick={() => act(ejectSheetAction, { [ejectSheetAction]: mat.name, amount: 50 })}>
+                        onClick={() =>
+                          act(ejectSheetAction, {
+                            [ejectSheetAction]: mat.name,
+                            amount: 50,
+                          })
+                        }>
                         All
                       </Button>
                     </Fragment>
@@ -540,11 +644,20 @@ const ResearchConsoleConstructor = (props, context) => {
                 reagents.map((chem) => (
                   <LabeledList.Item label={chem.name} key={chem.name}>
                     {chem.volume}u
-                    <Button ml={1} icon="eject" onClick={() => act(ejectChemAction, { dispose: chem.id })}>
+                    <Button
+                      ml={1}
+                      icon="eject"
+                      onClick={() =>
+                        act(ejectChemAction, { dispose: chem.id })
+                      }>
                       Purge
                     </Button>
                   </LabeledList.Item>
-                ))) || <LabeledList.Item label="Empty">No chems detected</LabeledList.Item>}
+                ))) || (
+                <LabeledList.Item label="Empty">
+                  No chems detected
+                </LabeledList.Item>
+              )}
             </LabeledList>
             <Button mt={1} icon="trash" onClick={() => act(ejectAllChemAction)}>
               Disposal All Chemicals In Storage
@@ -560,15 +673,25 @@ const ResearchConsoleSettings = (props, context) => {
 
   const { sync, linked_destroy, linked_imprinter, linked_lathe } = data.info;
 
-  const [settingsTab, setSettingsTab] = useSharedState(context, 'settingsTab', 0);
+  const [settingsTab, setSettingsTab] = useSharedState(
+    context,
+    'settingsTab',
+    0
+  );
 
   return (
     <Section title="Settings">
       <Tabs>
-        <Tabs.Tab icon="cogs" onClick={() => setSettingsTab(0)} selected={settingsTab === 0}>
+        <Tabs.Tab
+          icon="cogs"
+          onClick={() => setSettingsTab(0)}
+          selected={settingsTab === 0}>
           General
         </Tabs.Tab>
-        <Tabs.Tab icon="link" onClick={() => setSettingsTab(1)} selected={settingsTab === 1}>
+        <Tabs.Tab
+          icon="link"
+          onClick={() => setSettingsTab(1)}
+          selected={settingsTab === 1}>
           Device Linkages
         </Tabs.Tab>
       </Tabs>
@@ -604,7 +727,11 @@ const ResearchConsoleSettings = (props, context) => {
             <LabeledList>
               {(linked_destroy.present && (
                 <LabeledList.Item label="Destructive Analyzer">
-                  <Button icon="unlink" onClick={() => act('disconnect', { disconnect: 'destroy' })}>
+                  <Button
+                    icon="unlink"
+                    onClick={() =>
+                      act('disconnect', { disconnect: 'destroy' })
+                    }>
                     Disconnect
                   </Button>
                 </LabeledList.Item>
@@ -612,7 +739,9 @@ const ResearchConsoleSettings = (props, context) => {
                 null}
               {(linked_lathe.present && (
                 <LabeledList.Item label="Protolathe">
-                  <Button icon="unlink" onClick={() => act('disconnect', { disconnect: 'lathe' })}>
+                  <Button
+                    icon="unlink"
+                    onClick={() => act('disconnect', { disconnect: 'lathe' })}>
                     Disconnect
                   </Button>
                 </LabeledList.Item>
@@ -620,7 +749,11 @@ const ResearchConsoleSettings = (props, context) => {
                 null}
               {(linked_imprinter.present && (
                 <LabeledList.Item label="Circuit Imprinter">
-                  <Button icon="unlink" onClick={() => act('disconnect', { disconnect: 'imprinter' })}>
+                  <Button
+                    icon="unlink"
+                    onClick={() =>
+                      act('disconnect', { disconnect: 'imprinter' })
+                    }>
                     Disconnect
                   </Button>
                 </LabeledList.Item>
@@ -634,16 +767,32 @@ const ResearchConsoleSettings = (props, context) => {
 };
 
 const menus = [
-  { name: 'Protolathe', icon: 'wrench', template: <ResearchConsoleConstructor name="Protolathe" /> },
+  {
+    name: 'Protolathe',
+    icon: 'wrench',
+    template: <ResearchConsoleConstructor name="Protolathe" />,
+  },
   {
     name: 'Circuit Imprinter',
     icon: 'digital-tachograph',
     template: <ResearchConsoleConstructor name="Circuit Imprinter" />,
   },
-  { name: 'Destructive Analyzer', icon: 'eraser', template: <ResearchConsoleDestructiveAnalyzer /> },
+  {
+    name: 'Destructive Analyzer',
+    icon: 'eraser',
+    template: <ResearchConsoleDestructiveAnalyzer />,
+  },
   { name: 'Settings', icon: 'cog', template: <ResearchConsoleSettings /> },
-  { name: 'Research List', icon: 'flask', template: <ResearchConsoleViewResearch /> },
-  { name: 'Design List', icon: 'file', template: <ResearchConsoleViewDesigns /> },
+  {
+    name: 'Research List',
+    icon: 'flask',
+    template: <ResearchConsoleViewResearch />,
+  },
+  {
+    name: 'Design List',
+    icon: 'file',
+    template: <ResearchConsoleViewDesigns />,
+  },
   { name: 'Disk Operations', icon: 'save', template: <ResearchConsoleDisk /> },
 ];
 
diff --git a/tgui/packages/tgui_ch/interfaces/ResearchServerController.js b/tgui/packages/tgui_ch/interfaces/ResearchServerController.js
index ad0b92cd5d..575b408190 100644
--- a/tgui/packages/tgui_ch/interfaces/ResearchServerController.js
+++ b/tgui/packages/tgui_ch/interfaces/ResearchServerController.js
@@ -20,12 +20,21 @@ const ResearchControllerContent = (props, context) => {
 
   const { badmin, servers, consoles } = data;
 
-  const [selectedServer, setSelectedServer] = useSharedState(context, 'selectedServer', null);
+  const [selectedServer, setSelectedServer] = useSharedState(
+    context,
+    'selectedServer',
+    null
+  );
 
   let realServer = servers.find((s) => s.id === selectedServer);
 
   if (realServer) {
-    return <ResearchServer setSelectedServer={setSelectedServer} server={realServer} />;
+    return (
+      <ResearchServer
+        setSelectedServer={setSelectedServer}
+        server={realServer}
+      />
+    );
   }
 
   return (
@@ -72,7 +81,8 @@ const ResearchServer = (props, context) => {
       </Tabs>
       {(tab === 0 && <ResearchServerAccess server={server} />) || null}
       {(tab === 1 && <ResearchServerData server={server} />) || null}
-      {(tab === 2 && badmin && <ResearchServerTransfer server={server} />) || null}
+      {(tab === 2 && badmin && <ResearchServerTransfer server={server} />) ||
+        null}
     </Section>
   );
 };
@@ -102,18 +112,32 @@ const ResearchServerAccess = (props, context) => {
       <LabeledList>
         {consoles.length &&
           consoles.map((console) => (
-            <LabeledList.Item key={console.name} label={console.name + ' (' + console.loc + ')'}>
+            <LabeledList.Item
+              key={console.name}
+              label={console.name + ' (' + console.loc + ')'}>
               <Button
                 icon={hasUploadAccess(server, console) ? 'lock-open' : 'lock'}
                 selected={hasUploadAccess(server, console)}
-                onClick={() => act('toggle_upload', { server: server.ref, console: console.ref })}>
+                onClick={() =>
+                  act('toggle_upload', {
+                    server: server.ref,
+                    console: console.ref,
+                  })
+                }>
                 {hasUploadAccess(server, console) ? 'Upload On' : 'Upload Off'}
               </Button>
               <Button
                 icon={hasDownloadAccess(server, console) ? 'lock-open' : 'lock'}
                 selected={hasDownloadAccess(server, console)}
-                onClick={() => act('toggle_download', { server: server.ref, console: console.ref })}>
-                {hasDownloadAccess(server, console) ? 'Download On' : 'Download Off'}
+                onClick={() =>
+                  act('toggle_download', {
+                    server: server.ref,
+                    console: console.ref,
+                  })
+                }>
+                {hasDownloadAccess(server, console)
+                  ? 'Download On'
+                  : 'Download Off'}
               </Button>
             </LabeledList.Item>
           ))}
@@ -139,7 +163,9 @@ const ResearchServerData = (props, context) => {
                 confirmIcon="trash"
                 color="red"
                 content="Reset"
-                onClick={() => act('reset_tech', { server: server.ref, tech: tech.id })}
+                onClick={() =>
+                  act('reset_tech', { server: server.ref, tech: tech.id })
+                }
               />
             }
           />
@@ -156,7 +182,9 @@ const ResearchServerData = (props, context) => {
                 confirmIcon="trash"
                 color="red"
                 content="Delete"
-                onClick={() => act('reset_design', { server: server.ref, design: design.id })}
+                onClick={() =>
+                  act('reset_design', { server: server.ref, design: design.id })
+                }
               />
             }
           />
@@ -189,7 +217,12 @@ const ResearchServerTransfer = (props, context) => {
                 Transfer from {server.name} To {newserver.name}
               </Box>
             }
-            onClick={() => act('transfer_data', { server: server.ref, target: newserver.ref })}
+            onClick={() =>
+              act('transfer_data', {
+                server: server.ref,
+                target: newserver.ref,
+              })
+            }
           />
         </Box>
       ))}
diff --git a/tgui/packages/tgui_ch/interfaces/ResleevingConsole.js b/tgui/packages/tgui_ch/interfaces/ResleevingConsole.js
index bfcd4dba75..d6622ce9be 100644
--- a/tgui/packages/tgui_ch/interfaces/ResleevingConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/ResleevingConsole.js
@@ -11,14 +11,22 @@ const MENU_MIND = 3;
 
 const viewMindRecordModalBodyOverride = (modal, context) => {
   const { act, data } = useBackend(context);
-  const { activerecord, realname, obviously_dead, oocnotes, can_sleeve_active } = modal.args;
+  const {
+    activerecord,
+    realname,
+    obviously_dead,
+    oocnotes,
+    can_sleeve_active,
+  } = modal.args;
   return (
     <Section
       level={2}
       m="-1rem"
       pb="1rem"
       title={'Mind Record (' + realname + ')'}
-      buttons={<Button icon="times" color="red" onClick={() => act('modal_close')} />}>
+      buttons={
+        <Button icon="times" color="red" onClick={() => act('modal_close')} />
+      }>
       <LabeledList>
         <LabeledList.Item label="Name">{realname}</LabeledList.Item>
         <LabeledList.Item label="Status">{obviously_dead}</LabeledList.Item>
@@ -46,7 +54,9 @@ const viewMindRecordModalBodyOverride = (modal, context) => {
           />
         </LabeledList.Item>
         <LabeledList.Item label="OOC Notes">
-          <Section style={{ 'word-break': 'break-all', 'height': '100px' }} scrollable>
+          <Section
+            style={{ 'word-break': 'break-all', 'height': '100px' }}
+            scrollable>
             {oocnotes}
           </Section>
         </LabeledList.Item>
@@ -57,22 +67,37 @@ const viewMindRecordModalBodyOverride = (modal, context) => {
 
 const viewBodyRecordModalBodyOverride = (modal, context) => {
   const { act, data } = useBackend(context);
-  const { activerecord, realname, species, sex, mind_compat, synthetic, oocnotes, can_grow_active } = modal.args;
+  const {
+    activerecord,
+    realname,
+    species,
+    sex,
+    mind_compat,
+    synthetic,
+    oocnotes,
+    can_grow_active,
+  } = modal.args;
   return (
     <Section
       level={2}
       m="-1rem"
       pb="1rem"
       title={'Body Record (' + realname + ')'}
-      buttons={<Button icon="times" color="red" onClick={() => act('modal_close')} />}>
+      buttons={
+        <Button icon="times" color="red" onClick={() => act('modal_close')} />
+      }>
       <LabeledList>
         <LabeledList.Item label="Name">{realname}</LabeledList.Item>
         <LabeledList.Item label="Species">{species}</LabeledList.Item>
         <LabeledList.Item label="Bio. Sex">{sex}</LabeledList.Item>
         <LabeledList.Item label="Mind Compat">{mind_compat}</LabeledList.Item>
-        <LabeledList.Item label="Synthetic">{synthetic ? 'Yes' : 'No'}</LabeledList.Item>
+        <LabeledList.Item label="Synthetic">
+          {synthetic ? 'Yes' : 'No'}
+        </LabeledList.Item>
         <LabeledList.Item label="OOC Notes">
-          <Section style={{ 'word-break': 'break-all', 'height': '100px' }} scrollable>
+          <Section
+            style={{ 'word-break': 'break-all', 'height': '100px' }}
+            scrollable>
             {oocnotes}
           </Section>
         </LabeledList.Item>
@@ -117,7 +142,9 @@ export const ResleevingConsole = (props, context) => {
   return (
     <Window width={640} height={520} resizable>
       <ComplexModal maxWidth="75%" maxHeight="75%" />
-      <Window.Content className="Layout__content--flexColumn">{body}</Window.Content>
+      <Window.Content className="Layout__content--flexColumn">
+        {body}
+      </Window.Content>
     </Window>
   );
 };
@@ -168,9 +195,13 @@ const ResleevingConsoleBody = (props, context) => {
   if (menu === MENU_MAIN) {
     body = <ResleevingConsoleMain />;
   } else if (menu === MENU_BODY) {
-    body = <ResleevingConsoleRecords records={bodyrecords} actToDo="view_b_rec" />;
+    body = (
+      <ResleevingConsoleRecords records={bodyrecords} actToDo="view_b_rec" />
+    );
   } else if (menu === MENU_MIND) {
-    body = <ResleevingConsoleRecords records={mindrecords} actToDo="view_m_rec" />;
+    body = (
+      <ResleevingConsoleRecords records={mindrecords} actToDo="view_m_rec" />
+    );
   }
   return body;
 };
@@ -201,11 +232,17 @@ const ResleevingConsoleDiskPrep = (props, context) => {
         <h2>!!WARNING!!</h2>
       </Box>
       <Box color="bad">
-        This will transfer all minds to the dump disk, and the TransCore will be made unusable until post-shift
-        maintenance! This should only be used in emergencies!
+        This will transfer all minds to the dump disk, and the TransCore will be
+        made unusable until post-shift maintenance! This should only be used in
+        emergencies!
       </Box>
       <Box mt={4}>
-        <Button icon="eject" content="Eject Disk" color="good" onClick={() => act('ejectdisk')} />
+        <Button
+          icon="eject"
+          content="Eject Disk"
+          color="good"
+          onClick={() => act('ejectdisk')}
+        />
       </Box>
       <Box mt={4}>
         <Button.Confirm
@@ -223,7 +260,16 @@ const ResleevingConsoleDiskPrep = (props, context) => {
 
 const ResleevingConsoleMain = (props, context) => {
   const { act, data } = useBackend(context);
-  const { loading, scantemp, occupant, locked, can_brainscan, scan_mode, pods, selected_pod } = data;
+  const {
+    loading,
+    scantemp,
+    occupant,
+    locked,
+    can_brainscan,
+    scan_mode,
+    pods,
+    selected_pod,
+  } = data;
   const isLocked = locked && !!occupant;
   return (
     <Section title="Pods" level="2">
@@ -279,7 +325,12 @@ const ResleevingConsolePodGrowers = (props, context) => {
       }
 
       return (
-        <Box key={i} width="64px" textAlign="center" display="inline-block" mr="0.5rem">
+        <Box
+          key={i}
+          width="64px"
+          textAlign="center"
+          display="inline-block"
+          mr="0.5rem">
           <img
             src={'pod_' + pod.status + '.gif'}
             style={{
@@ -309,7 +360,12 @@ const ResleevingConsolePodSleevers = (props, context) => {
   if (sleevers && sleevers.length) {
     return sleevers.map((pod, i) => {
       return (
-        <Box key={i} width="64px" textAlign="center" display="inline-block" mr="0.5rem">
+        <Box
+          key={i}
+          width="64px"
+          textAlign="center"
+          display="inline-block"
+          mr="0.5rem">
           <img
             src={'sleeve_' + (pod.occupied ? 'occupied' : 'empty') + '.gif'}
             style={{
@@ -382,7 +438,12 @@ const ResleevingConsolePodSpods = (props, context) => {
       }
 
       return (
-        <Box key={i} width="64px" textAlign="center" display="inline-block" mr="0.5rem">
+        <Box
+          key={i}
+          width="64px"
+          textAlign="center"
+          display="inline-block"
+          mr="0.5rem">
           <img
             src={'synthprinter' + (pod.busy ? '_working' : '') + '.gif'}
             style={{
@@ -456,7 +517,11 @@ const ResleevingConsoleTemp = (props, context) => {
       <Box display="inline-block" verticalAlign="middle">
         {temp.text}
       </Box>
-      <Button icon="times-circle" float="right" onClick={() => act('cleartemp')} />
+      <Button
+        icon="times-circle"
+        float="right"
+        onClick={() => act('cleartemp')}
+      />
       <Box clear="both" />
     </NoticeBox>
   );
diff --git a/tgui/packages/tgui_ch/interfaces/ResleevingPod.js b/tgui/packages/tgui_ch/interfaces/ResleevingPod.js
index 841c0500fe..842f9a4032 100644
--- a/tgui/packages/tgui_ch/interfaces/ResleevingPod.js
+++ b/tgui/packages/tgui_ch/interfaces/ResleevingPod.js
@@ -5,7 +5,17 @@ import { Box, LabeledList, ProgressBar, Section } from '../components';
 
 export const ResleevingPod = (model, context) => {
   const { data } = useBackend(context);
-  const { occupied, name, health, maxHealth, stat, mindStatus, mindName, resleeveSick, initialSick } = data;
+  const {
+    occupied,
+    name,
+    health,
+    maxHealth,
+    stat,
+    mindStatus,
+    mindName,
+    resleeveSick,
+    initialSick,
+  } = data;
 
   return (
     <Window width={300} height={350} resizeable>
@@ -32,8 +42,16 @@ export const ResleevingPod = (model, context) => {
                     </ProgressBar>
                   )}
                 </LabeledList.Item>
-                <LabeledList.Item label="Mind Status">{mindStatus ? 'Present' : 'Missing'}</LabeledList.Item>
-                {mindStatus ? <LabeledList.Item label="Mind Occupying">{mindName}</LabeledList.Item> : ''}
+                <LabeledList.Item label="Mind Status">
+                  {mindStatus ? 'Present' : 'Missing'}
+                </LabeledList.Item>
+                {mindStatus ? (
+                  <LabeledList.Item label="Mind Occupying">
+                    {mindName}
+                  </LabeledList.Item>
+                ) : (
+                  ''
+                )}
               </LabeledList>
               {resleeveSick ? (
                 <Box color="average" mt={3}>
@@ -41,8 +59,10 @@ export const ResleevingPod = (model, context) => {
                   {initialSick ? (
                     <Fragment>
                       {' '}
-                      Motion Sickness also detected. Please allow the newly resleeved person a moment to get their
-                      bearings. This warning will disappear when Motion Sickness is no longer detected.
+                      Motion Sickness also detected. Please allow the newly
+                      resleeved person a moment to get their bearings. This
+                      warning will disappear when Motion Sickness is no longer
+                      detected.
                     </Fragment>
                   ) : (
                     ''
diff --git a/tgui/packages/tgui_ch/interfaces/RoboticsControlConsole.js b/tgui/packages/tgui_ch/interfaces/RoboticsControlConsole.js
index 68504d7f67..e30a6074e6 100644
--- a/tgui/packages/tgui_ch/interfaces/RoboticsControlConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/RoboticsControlConsole.js
@@ -36,7 +36,9 @@ const Cyborgs = (props, context) => {
   const { cyborgs, can_hack } = props;
   const { act, data } = useBackend(context);
   if (!cyborgs.length) {
-    return <NoticeBox>No cyborg units detected within access parameters.</NoticeBox>;
+    return (
+      <NoticeBox>No cyborg units detected within access parameters.</NoticeBox>
+    );
   }
   return cyborgs.map((cyborg) => {
     return (
@@ -83,23 +85,38 @@ const Cyborgs = (props, context) => {
         }>
         <LabeledList>
           <LabeledList.Item label="Status">
-            <Box color={cyborg.status ? 'bad' : cyborg.locked_down ? 'average' : 'good'}>
-              {cyborg.status ? 'Not Responding' : cyborg.locked_down ? 'Locked Down' : 'Nominal'}
+            <Box
+              color={
+                cyborg.status ? 'bad' : cyborg.locked_down ? 'average' : 'good'
+              }>
+              {cyborg.status
+                ? 'Not Responding'
+                : cyborg.locked_down
+                  ? 'Locked Down'
+                  : 'Nominal'}
             </Box>
           </LabeledList.Item>
           <LabeledList.Item label="Location">
             <Box>{cyborg.locstring}</Box>
           </LabeledList.Item>
           <LabeledList.Item label="Integrity">
-            <ProgressBar color={cyborg.health > 50 ? 'good' : 'bad'} value={cyborg.health / 100} />
+            <ProgressBar
+              color={cyborg.health > 50 ? 'good' : 'bad'}
+              value={cyborg.health / 100}
+            />
           </LabeledList.Item>
           {(typeof cyborg.charge === 'number' && (
             <Fragment>
               <LabeledList.Item label="Cell Charge">
-                <ProgressBar color={cyborg.charge > 30 ? 'good' : 'bad'} value={cyborg.charge / 100} />
+                <ProgressBar
+                  color={cyborg.charge > 30 ? 'good' : 'bad'}
+                  value={cyborg.charge / 100}
+                />
               </LabeledList.Item>
               <LabeledList.Item label="Cell Capacity">
-                <Box color={cyborg.cell_capacity < 30000 ? 'average' : 'good'}>{cyborg.cell_capacity}</Box>
+                <Box color={cyborg.cell_capacity < 30000 ? 'average' : 'good'}>
+                  {cyborg.cell_capacity}
+                </Box>
               </LabeledList.Item>
             </Fragment>
           )) || (
@@ -114,7 +131,9 @@ const Cyborgs = (props, context) => {
           )}
           <LabeledList.Item label="Module">{cyborg.module}</LabeledList.Item>
           <LabeledList.Item label="Master AI">
-            <Box color={cyborg.synchronization ? 'default' : 'average'}>{cyborg.synchronization || 'None'}</Box>
+            <Box color={cyborg.synchronization ? 'default' : 'average'}>
+              {cyborg.synchronization || 'None'}
+            </Box>
           </LabeledList.Item>
         </LabeledList>
       </Section>
diff --git a/tgui/packages/tgui_ch/interfaces/RogueZones.js b/tgui/packages/tgui_ch/interfaces/RogueZones.js
index e033d98b44..0887b16bef 100644
--- a/tgui/packages/tgui_ch/interfaces/RogueZones.js
+++ b/tgui/packages/tgui_ch/interfaces/RogueZones.js
@@ -22,12 +22,17 @@ export const RogueZones = (props, context) => {
       <Window.Content>
         <Section title="Current Area">
           <LabeledList>
-            <LabeledList.Item label="Mineral Content">{difficulty}</LabeledList.Item>
+            <LabeledList.Item label="Mineral Content">
+              {difficulty}
+            </LabeledList.Item>
             <LabeledList.Item
               label="Shuttle Location"
               buttons={
                 (can_recall_shuttle && (
-                  <Button color="bad" icon="rocket" onClick={() => act('recall_shuttle')}>
+                  <Button
+                    color="bad"
+                    icon="rocket"
+                    onClick={() => act('recall_shuttle')}>
                     Recall Shuttle
                   </Button>
                 )) ||
@@ -49,7 +54,11 @@ export const RogueZones = (props, context) => {
         <Section
           title="Scanner"
           buttons={
-            <Button disabled={!scan_ready} fluid icon="search" onClick={() => act('scan_for_new')}>
+            <Button
+              disabled={!scan_ready}
+              fluid
+              icon="search"
+              onClick={() => act('scan_for_new')}>
               Scan For Asteroids
             </Button>
           }>
@@ -65,8 +74,15 @@ export const RogueZones = (props, context) => {
                 }}
               />
             </LabeledList.Item>
-            {(scanning && <LabeledList.Item label="Scanning">In progress.</LabeledList.Item>) || null}
-            {(updated && !scanning && <LabeledList.Item label="Info">Updated shuttle destination!</LabeledList.Item>) ||
+            {(scanning && (
+              <LabeledList.Item label="Scanning">In progress.</LabeledList.Item>
+            )) ||
+              null}
+            {(updated && !scanning && (
+              <LabeledList.Item label="Info">
+                Updated shuttle destination!
+              </LabeledList.Item>
+            )) ||
               null}
             {(debug && (
               <LabeledList.Item label="Debug" labelColor="bad">
diff --git a/tgui/packages/tgui_ch/interfaces/RustCoreMonitor.tsx b/tgui/packages/tgui_ch/interfaces/RustCoreMonitor.tsx
index 4efa4101df..b6cc5f8664 100644
--- a/tgui/packages/tgui_ch/interfaces/RustCoreMonitor.tsx
+++ b/tgui/packages/tgui_ch/interfaces/RustCoreMonitor.tsx
@@ -33,7 +33,15 @@ export const RustCoreMonitorContent = (props, context) => {
   const { cores } = data;
 
   return (
-    <Section title="Cores" buttons={<Button icon="pencil-alt" content={'Set Tag'} onClick={() => act('set_tag')} />}>
+    <Section
+      title="Cores"
+      buttons={
+        <Button
+          icon="pencil-alt"
+          content={'Set Tag'}
+          onClick={() => act('set_tag')}
+        />
+      }>
       <Table>
         <Table.Row header>
           <Table.Cell>Name</Table.Cell>
diff --git a/tgui/packages/tgui_ch/interfaces/RustFuelControl.tsx b/tgui/packages/tgui_ch/interfaces/RustFuelControl.tsx
index b8d9eae315..bf9310536b 100644
--- a/tgui/packages/tgui_ch/interfaces/RustFuelControl.tsx
+++ b/tgui/packages/tgui_ch/interfaces/RustFuelControl.tsx
@@ -12,7 +12,17 @@ export const RustFuelControl = () => (
 );
 
 type Data = {
-  fuels: { name: string; x; y; z; active: BooleanLike; deployed: BooleanLike; ref: string; fuel_amt; fuel_type }[];
+  fuels: {
+    name: string;
+    x;
+    y;
+    z;
+    active: BooleanLike;
+    deployed: BooleanLike;
+    ref: string;
+    fuel_amt;
+    fuel_type;
+  }[];
 };
 
 export const RustFuelContent = (props, context) => {
@@ -23,7 +33,13 @@ export const RustFuelContent = (props, context) => {
   return (
     <Section
       title="Fuel Injectors"
-      buttons={<Button icon="pencil-alt" content={'Set Tag'} onClick={() => act('set_tag')} />}>
+      buttons={
+        <Button
+          icon="pencil-alt"
+          content={'Set Tag'}
+          onClick={() => act('set_tag')}
+        />
+      }>
       <Table>
         <Table.Row header>
           <Table.Cell>Name</Table.Cell>
diff --git a/tgui/packages/tgui_ch/interfaces/Secbot.js b/tgui/packages/tgui_ch/interfaces/Secbot.js
index 3b19a7714b..737de5625d 100644
--- a/tgui/packages/tgui_ch/interfaces/Secbot.js
+++ b/tgui/packages/tgui_ch/interfaces/Secbot.js
@@ -29,10 +29,14 @@ export const Secbot = (props, context) => {
             </Button>
           }>
           <LabeledList>
-            <LabeledList.Item label="Maintenance Panel" color={open ? 'bad' : 'good'}>
+            <LabeledList.Item
+              label="Maintenance Panel"
+              color={open ? 'bad' : 'good'}>
               {open ? 'Open' : 'Closed'}
             </LabeledList.Item>
-            <LabeledList.Item label="Behavior Controls" color={locked ? 'good' : 'bad'}>
+            <LabeledList.Item
+              label="Behavior Controls"
+              color={locked ? 'good' : 'bad'}>
               {locked ? 'Locked' : 'Unlocked'}
             </LabeledList.Item>
           </LabeledList>
@@ -41,7 +45,10 @@ export const Secbot = (props, context) => {
           <Section title="Behavior Controls">
             <LabeledList>
               <LabeledList.Item label="Check for Weapon Authorization">
-                <Button icon={idcheck ? 'toggle-on' : 'toggle-off'} selected={idcheck} onClick={() => act('idcheck')}>
+                <Button
+                  icon={idcheck ? 'toggle-on' : 'toggle-off'}
+                  selected={idcheck}
+                  onClick={() => act('idcheck')}>
                   {idcheck ? 'Yes' : 'No'}
                 </Button>
               </LabeledList.Item>
@@ -79,7 +86,10 @@ export const Secbot = (props, context) => {
               </LabeledList.Item>
               {!!bot_patrolling && (
                 <LabeledList.Item label="Auto Patrol">
-                  <Button icon={patrol ? 'toggle-on' : 'toggle-off'} selected={patrol} onClick={() => act('patrol')}>
+                  <Button
+                    icon={patrol ? 'toggle-on' : 'toggle-off'}
+                    selected={patrol}
+                    onClick={() => act('patrol')}>
                     {patrol ? 'Yes' : 'No'}
                   </Button>
                 </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/SecureSafe.js b/tgui/packages/tgui_ch/interfaces/SecureSafe.js
index d9363d1165..69fe21487c 100644
--- a/tgui/packages/tgui_ch/interfaces/SecureSafe.js
+++ b/tgui/packages/tgui_ch/interfaces/SecureSafe.js
@@ -27,7 +27,10 @@ const NukeKeypad = (props, context) => {
                 height="50px"
                 lineHeight={1.25}
                 disabled={
-                  !!emagged || (!!l_setshort && 1) || (key !== 'R' && !locked) || (code === 'ERROR' && key !== 'R' && 1)
+                  !!emagged ||
+                  (!!l_setshort && 1) ||
+                  (key !== 'R' && !locked) ||
+                  (code === 'ERROR' && key !== 'R' && 1)
                 }
                 onClick={() => act('type', { digit: key })}
               />
@@ -66,7 +69,11 @@ export const SecureSafe = (props, context) => {
           )}
           <Section height="60px">
             <Box textAlign="center" position="center" fontSize="35px">
-              {(code && code) || <Box textColor={locked ? 'red' : 'green'}>{locked ? 'LOCKED' : 'UNLOCKED'}</Box>}
+              {(code && code) || (
+                <Box textColor={locked ? 'red' : 'green'}>
+                  {locked ? 'LOCKED' : 'UNLOCKED'}
+                </Box>
+              )}
             </Box>
           </Section>
           <Flex ml="3px">
diff --git a/tgui/packages/tgui_ch/interfaces/SecurityRecords.js b/tgui/packages/tgui_ch/interfaces/SecurityRecords.js
index a4cb133f56..6be6dd77cc 100644
--- a/tgui/packages/tgui_ch/interfaces/SecurityRecords.js
+++ b/tgui/packages/tgui_ch/interfaces/SecurityRecords.js
@@ -69,7 +69,14 @@ const SecurityRecordsList = (_properties, context) => {
             icon="user"
             mb="0.5rem"
             color={record.color}
-            content={record.id + ': ' + record.name + ' (Criminal Status: ' + record.criminal + ')'}
+            content={
+              record.id +
+              ': ' +
+              record.name +
+              ' (Criminal Status: ' +
+              record.criminal +
+              ')'
+            }
             onClick={() => act('d_rec', { d_rec: record.ref })}
           />
         ))}
@@ -84,8 +91,18 @@ const SecurityRecordsMaintenance = (_properties, context) => {
     <Fragment>
       <Button icon="download" content="Backup to Disk" disabled />
       <br />
-      <Button icon="upload" content="Upload from Disk" my="0.5rem" disabled /> <br />
-      <Button.Confirm icon="trash" content="Delete All Security Records" onClick={() => act('del_all')} />
+      <Button
+        icon="upload"
+        content="Upload from Disk"
+        my="0.5rem"
+        disabled
+      />{' '}
+      <br />
+      <Button.Confirm
+        icon="trash"
+        content="Delete All Security Records"
+        onClick={() => act('del_all')}
+      />
     </Fragment>
   );
 };
@@ -125,7 +142,12 @@ const SecurityRecordsView = (_properties, context) => {
           onClick={() => act('print_p')}
         />
         <br />
-        <Button icon="arrow-left" content="Back" mt="0.5rem" onClick={() => act('screen', { screen: 2 })} />
+        <Button
+          icon="arrow-left"
+          content="Back"
+          mt="0.5rem"
+          onClick={() => act('screen', { screen: 2 })}
+        />
       </Section>
     </Fragment>
   );
@@ -146,7 +168,13 @@ const SecurityRecordsViewGeneral = (_properties, context) => {
               <Box height="20px" inline preserveWhitespace>
                 {field.value}
               </Box>
-              {!!field.edit && <Button icon="pen" ml="0.5rem" onClick={() => doEdit(context, field)} />}
+              {!!field.edit && (
+                <Button
+                  icon="pen"
+                  ml="0.5rem"
+                  onClick={() => doEdit(context, field)}
+                />
+              )}
             </LabeledList.Item>
           ))}
         </LabeledList>
@@ -154,7 +182,11 @@ const SecurityRecordsViewGeneral = (_properties, context) => {
       <Flex.Item textAlign="right">
         {!!general.has_photos &&
           general.photos.map((p, i) => (
-            <Box key={i} display="inline-block" textAlign="center" color="label">
+            <Box
+              key={i}
+              display="inline-block"
+              textAlign="center"
+              color="label">
               <img
                 src={p.substr(1, p.length - 1)}
                 style={{
@@ -183,7 +215,12 @@ const SecurityRecordsViewSecurity = (_properties, context) => {
     return (
       <Box color="bad">
         Security records lost!
-        <Button icon="pen" content="New Record" ml="0.5rem" onClick={() => act('new')} />
+        <Button
+          icon="pen"
+          content="New Record"
+          ml="0.5rem"
+          onClick={() => act('new')}
+        />
       </Box>
     );
   }
@@ -213,7 +250,12 @@ const SecurityRecordsViewSecurity = (_properties, context) => {
               </Box>
               <br />
               {comment.text}
-              <Button icon="comment-slash" color="bad" ml="0.5rem" onClick={() => act('del_c', { del_c: i + 1 })} />
+              <Button
+                icon="comment-slash"
+                color="bad"
+                ml="0.5rem"
+                onClick={() => act('del_c', { del_c: i + 1 })}
+              />
             </Box>
           ))
         )}
@@ -236,10 +278,16 @@ const SecurityRecordsNavigation = (_properties, context) => {
   const { screen } = data;
   return (
     <Tabs>
-      <Tabs.Tab selected={screen === 2} icon="list" onClick={() => act('screen', { screen: 2 })}>
+      <Tabs.Tab
+        selected={screen === 2}
+        icon="list"
+        onClick={() => act('screen', { screen: 2 })}>
         List Records
       </Tabs.Tab>
-      <Tabs.Tab icon="wrench" selected={screen === 3} onClick={() => act('screen', { screen: 3 })}>
+      <Tabs.Tab
+        icon="wrench"
+        selected={screen === 3}
+        onClick={() => act('screen', { screen: 3 })}>
         Record Maintenance
       </Tabs.Tab>
     </Tabs>
diff --git a/tgui/packages/tgui_ch/interfaces/SeedStorage.js b/tgui/packages/tgui_ch/interfaces/SeedStorage.js
index 5a459b5a43..81d88b9c0a 100644
--- a/tgui/packages/tgui_ch/interfaces/SeedStorage.js
+++ b/tgui/packages/tgui_ch/interfaces/SeedStorage.js
@@ -32,12 +32,18 @@ export const SeedStorage = (props, context) => {
               </Flex.Item>
               <Flex.Item mt={0.4}>{seed.amount} Remaining</Flex.Item>
               <Flex.Item grow={1}>
-                <Button fluid icon="download" onClick={() => act('vend', { id: seed.id })}>
+                <Button
+                  fluid
+                  icon="download"
+                  onClick={() => act('vend', { id: seed.id })}>
                   Vend
                 </Button>
               </Flex.Item>
               <Flex.Item grow={1}>
-                <Button fluid icon="trash" onClick={() => act('purge', { id: seed.id })}>
+                <Button
+                  fluid
+                  icon="trash"
+                  onClick={() => act('purge', { id: seed.id })}>
                   Purge
                 </Button>
               </Flex.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/ShieldCapacitor.js b/tgui/packages/tgui_ch/interfaces/ShieldCapacitor.js
index d504523969..fa703f5d83 100644
--- a/tgui/packages/tgui_ch/interfaces/ShieldCapacitor.js
+++ b/tgui/packages/tgui_ch/interfaces/ShieldCapacitor.js
@@ -7,7 +7,14 @@ import { formatSiUnit, formatPower } from '../format';
 export const ShieldCapacitor = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { active, time_since_fail, stored_charge, max_charge, charge_rate, max_charge_rate } = data;
+  const {
+    active,
+    time_since_fail,
+    stored_charge,
+    max_charge,
+    charge_rate,
+    max_charge_rate,
+  } = data;
 
   return (
     <Window width={500} height={400} resizable>
@@ -24,11 +31,21 @@ export const ShieldCapacitor = (props, context) => {
           }>
           <LabeledList>
             <LabeledList.Item label="Capacitor Status">
-              {time_since_fail > 2 ? <Box color="good">OK.</Box> : <Box color="bad">Discharging!</Box>}
+              {time_since_fail > 2 ? (
+                <Box color="good">OK.</Box>
+              ) : (
+                <Box color="bad">Discharging!</Box>
+              )}
             </LabeledList.Item>
             <LabeledList.Item label="Stored Energy">
-              <AnimatedNumber value={stored_charge} format={(val) => formatSiUnit(val, 0, 'J')} /> (
-              <AnimatedNumber value={100 * round(stored_charge / max_charge, 1)} />
+              <AnimatedNumber
+                value={stored_charge}
+                format={(val) => formatSiUnit(val, 0, 'J')}
+              />{' '}
+              (
+              <AnimatedNumber
+                value={100 * round(stored_charge / max_charge, 1)}
+              />
               %)
             </LabeledList.Item>
             <LabeledList.Item label="Charge Rate">
diff --git a/tgui/packages/tgui_ch/interfaces/ShieldGenerator.js b/tgui/packages/tgui_ch/interfaces/ShieldGenerator.js
index 2e37564c5f..018fedd496 100644
--- a/tgui/packages/tgui_ch/interfaces/ShieldGenerator.js
+++ b/tgui/packages/tgui_ch/interfaces/ShieldGenerator.js
@@ -13,7 +13,9 @@ export const ShieldGenerator = (props, context) => {
 
   return (
     <Window width={500} height={400} resizable>
-      <Window.Content>{locked ? <ShieldGeneratorLocked /> : <ShieldGeneratorContent />}</Window.Content>
+      <Window.Content>
+        {locked ? <ShieldGeneratorLocked /> : <ShieldGeneratorContent />}
+      </Window.Content>
     </Window>
   );
 };
@@ -21,7 +23,12 @@ export const ShieldGenerator = (props, context) => {
 const ShieldGeneratorLocked = (props, context) => (
   <FullscreenNotice title="Locked">
     <Box fontSize="1.5rem" bold>
-      <Icon name="exclamation-triangle" verticalAlign="middle" size={3} mr="1rem" />
+      <Icon
+        name="exclamation-triangle"
+        verticalAlign="middle"
+        size={3}
+        mr="1rem"
+      />
     </Box>
     <Box color="label" my="1rem">
       Swipe your ID to begin.
@@ -56,34 +63,61 @@ const ShieldGeneratorContent = (props, context) => {
       <Section title="Status">
         <LabeledList>
           <LabeledList.Item label="Field Status">
-            {failing ? <Box color="bad">Unstable</Box> : <Box color="good">Stable</Box>}
+            {failing ? (
+              <Box color="bad">Unstable</Box>
+            ) : (
+              <Box color="good">Stable</Box>
+            )}
           </LabeledList.Item>
           <LabeledList.Item label="Overall Field Strength">
             {round(average_field_strength, 2)} Renwick (
-            {(target_field_strength && round((100 * average_field_strength) / target_field_strength, 1)) || 'NA'}%)
+            {(target_field_strength &&
+              round(
+                (100 * average_field_strength) / target_field_strength,
+                1
+              )) ||
+              'NA'}
+            %)
+          </LabeledList.Item>
+          <LabeledList.Item label="Upkeep Power">
+            {formatPower(upkeep)}
+          </LabeledList.Item>
+          <LabeledList.Item label="Shield Generation Power">
+            {formatPower(gen_power)}
+          </LabeledList.Item>
+          <LabeledList.Item label="Currently Shielded">
+            {shields} m&sup2;
           </LabeledList.Item>
-          <LabeledList.Item label="Upkeep Power">{formatPower(upkeep)}</LabeledList.Item>
-          <LabeledList.Item label="Shield Generation Power">{formatPower(gen_power)}</LabeledList.Item>
-          <LabeledList.Item label="Currently Shielded">{shields} m&sup2;</LabeledList.Item>
           <LabeledList.Item label="Capacitors">
             <LabeledList>
               {capacitorLen ? (
                 capacitors.map((cap, i) => (
                   <LabeledList.Item key={i} label={'Capacitor #' + i}>
-                    {cap.active ? <Box color="good">Online</Box> : <Box color="bad">Offline</Box>}
+                    {cap.active ? (
+                      <Box color="good">Online</Box>
+                    ) : (
+                      <Box color="bad">Offline</Box>
+                    )}
                     <LabeledList>
                       <LabeledList.Item label="Charge">
-                        {formatSiUnit(cap.stored_charge, 0, 'J')} ({100 * round(cap.stored_charge / cap.max_charge, 2)}
+                        {formatSiUnit(cap.stored_charge, 0, 'J')} (
+                        {100 * round(cap.stored_charge / cap.max_charge, 2)}
                         %)
                       </LabeledList.Item>
                       <LabeledList.Item label="Status">
-                        {cap.failing ? <Box color="bad">Discharging</Box> : <Box color="good">OK.</Box>}
+                        {cap.failing ? (
+                          <Box color="bad">Discharging</Box>
+                        ) : (
+                          <Box color="good">OK.</Box>
+                        )}
                       </LabeledList.Item>
                     </LabeledList>
                   </LabeledList.Item>
                 ))
               ) : (
-                <LabeledList.Item color="bad">No Capacitors Connected</LabeledList.Item>
+                <LabeledList.Item color="bad">
+                  No Capacitors Connected
+                </LabeledList.Item>
               )}
             </LabeledList>
           </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/ShuttleControl.js b/tgui/packages/tgui_ch/interfaces/ShuttleControl.js
index 04db8899d9..417d6b7279 100644
--- a/tgui/packages/tgui_ch/interfaces/ShuttleControl.js
+++ b/tgui/packages/tgui_ch/interfaces/ShuttleControl.js
@@ -36,7 +36,14 @@ const getDockingStatus = (docking_status, docking_override) => {
 const ShuttleControlSharedShuttleStatus = (props, context) => {
   const { act, data } = useBackend(context);
   const { engineName = 'Bluespace Drive' } = props;
-  const { shuttle_status, shuttle_state, has_docking, docking_status, docking_override, docking_codes } = data;
+  const {
+    shuttle_status,
+    shuttle_state,
+    has_docking,
+    docking_status,
+    docking_override,
+    docking_codes,
+  } = data;
   return (
     <Section title="Shuttle Status">
       <Box color="label" mb={1}>
@@ -49,8 +56,12 @@ const ShuttleControlSharedShuttleStatus = (props, context) => {
               IDLE
             </Box>
           )) ||
-            (shuttle_state === 'warmup' && <Box color="#336699">SPINNING UP</Box>) ||
-            (shuttle_state === 'in_transit' && <Box color="#336699">ENGAGED</Box>) || <Box color="bad">ERROR</Box>}
+            (shuttle_state === 'warmup' && (
+              <Box color="#336699">SPINNING UP</Box>
+            )) ||
+            (shuttle_state === 'in_transit' && (
+              <Box color="#336699">ENGAGED</Box>
+            )) || <Box color="bad">ERROR</Box>}
         </LabeledList.Item>
         {(has_docking && (
           <Fragment>
@@ -79,17 +90,30 @@ const ShuttleControlSharedShuttleControls = (props, context) => {
     <Section title="Controls">
       <Flex spacing={1}>
         <Flex.Item grow={1}>
-          <Button onClick={() => act('move')} disabled={!can_launch} icon="rocket" fluid>
+          <Button
+            onClick={() => act('move')}
+            disabled={!can_launch}
+            icon="rocket"
+            fluid>
             Launch Shuttle
           </Button>
         </Flex.Item>
         <Flex.Item grow={1}>
-          <Button onClick={() => act('cancel')} disabled={!can_cancel} icon="ban" fluid>
+          <Button
+            onClick={() => act('cancel')}
+            disabled={!can_cancel}
+            icon="ban"
+            fluid>
             Cancel Launch
           </Button>
         </Flex.Item>
         <Flex.Item grow={1}>
-          <Button onClick={() => act('force')} color="bad" disabled={!can_force} icon="exclamation-triangle" fluid>
+          <Button
+            onClick={() => act('force')}
+            color="bad"
+            disabled={!can_force}
+            icon="exclamation-triangle"
+            fluid>
             Force Launch
           </Button>
         </Flex.Item>
@@ -118,14 +142,20 @@ const ShuttleControlConsoleMulti = (props, context) => {
         <LabeledList>
           {(can_cloak && (
             <LabeledList.Item label={legit ? 'ATC Inhibitor' : 'Cloaking'}>
-              <Button selected={cloaked} icon={cloaked ? 'eye' : 'eye-o'} onClick={() => act('toggle_cloaked')}>
+              <Button
+                selected={cloaked}
+                icon={cloaked ? 'eye' : 'eye-o'}
+                onClick={() => act('toggle_cloaked')}>
                 {cloaked ? 'Enabled' : 'Disabled'}
               </Button>
             </LabeledList.Item>
           )) ||
             null}
           <LabeledList.Item label="Current Destination">
-            <Button icon="taxi" disabled={!can_pick} onClick={() => act('pick')}>
+            <Button
+              icon="taxi"
+              disabled={!can_pick}
+              onClick={() => act('pick')}>
               {destination_name}
             </Button>
           </LabeledList.Item>
@@ -138,14 +168,18 @@ const ShuttleControlConsoleMulti = (props, context) => {
 
 const ShuttleControlConsoleExploration = (props, context) => {
   const { act, data } = useBackend(context);
-  const { can_pick, destination_name, fuel_usage, fuel_span, remaining_fuel } = data;
+  const { can_pick, destination_name, fuel_usage, fuel_span, remaining_fuel } =
+    data;
   return (
     <Fragment>
       <ShuttleControlSharedShuttleStatus engineName="Engines" />
       <Section title="Jump Controls">
         <LabeledList>
           <LabeledList.Item label="Current Destination">
-            <Button icon="taxi" disabled={!can_pick} onClick={() => act('pick')}>
+            <Button
+              icon="taxi"
+              disabled={!can_pick}
+              onClick={() => act('pick')}>
               {destination_name}
             </Button>
           </LabeledList.Item>
@@ -154,7 +188,9 @@ const ShuttleControlConsoleExploration = (props, context) => {
               <LabeledList.Item label="Est. Delta-V Budget" color={fuel_span}>
                 {remaining_fuel} m/s
               </LabeledList.Item>
-              <LabeledList.Item label="Avg. Delta-V Per Maneuver">{fuel_usage} m/s</LabeledList.Item>
+              <LabeledList.Item label="Avg. Delta-V Per Maneuver">
+                {fuel_usage} m/s
+              </LabeledList.Item>
             </Fragment>
           )) ||
             null}
@@ -194,9 +230,10 @@ const ShuttleControlConsoleWeb = (props, context) => {
       {(autopilot && (
         <Section title="AI PILOT (CLASS D) ACTIVE">
           <Box inline italic>
-            This vessel will start and stop automatically. Ensure that all non-cycling capable hatches and doors are
-            closed, as the automated system may not be able to control them. Docking and flight controls are locked. To
-            unlock, disable the automated flight system.
+            This vessel will start and stop automatically. Ensure that all
+            non-cycling capable hatches and doors are closed, as the automated
+            system may not be able to control them. Docking and flight controls
+            are locked. To unlock, disable the automated flight system.
           </Box>
         </Section>
       )) ||
@@ -218,12 +255,18 @@ const ShuttleControlConsoleWeb = (props, context) => {
                 IDLE
               </Box>
             )) ||
-              (shuttle_state === 'warmup' && <Box color="#336699">SPINNING UP</Box>) ||
-              (shuttle_state === 'in_transit' && <Box color="#336699">ENGAGED</Box>) || <Box color="bad">ERROR</Box>}
+              (shuttle_state === 'warmup' && (
+                <Box color="#336699">SPINNING UP</Box>
+              )) ||
+              (shuttle_state === 'in_transit' && (
+                <Box color="#336699">ENGAGED</Box>
+              )) || <Box color="bad">ERROR</Box>}
           </LabeledList.Item>
           {(!is_moving && (
             <Fragment>
-              <LabeledList.Item label="Current Location">{toTitleCase(shuttle_location)}</LabeledList.Item>
+              <LabeledList.Item label="Current Location">
+                {toTitleCase(shuttle_location)}
+              </LabeledList.Item>
               {(!skip_docking && (
                 <LabeledList.Item
                   label="Docking Status"
@@ -231,13 +274,19 @@ const ShuttleControlConsoleWeb = (props, context) => {
                     <Fragment>
                       <Button
                         selected={docking_status === 'docked'}
-                        disabled={docking_status !== 'undocked' && docking_status !== 'docked'}
+                        disabled={
+                          docking_status !== 'undocked' &&
+                          docking_status !== 'docked'
+                        }
                         onClick={() => act('dock_command')}>
                         Dock
                       </Button>
                       <Button
                         selected={docking_status === 'undocked'}
-                        disabled={docking_status !== 'docked' && docking_status !== 'undocked'}
+                        disabled={
+                          docking_status !== 'docked' &&
+                          docking_status !== 'undocked'
+                        }
                         onClick={() => act('undock_command')}>
                         Undock
                       </Button>
@@ -251,7 +300,10 @@ const ShuttleControlConsoleWeb = (props, context) => {
                 null}
               {(can_cloak && (
                 <LabeledList.Item label="Cloaking">
-                  <Button selected={cloaked} icon={cloaked ? 'eye' : 'eye-o'} onClick={() => act('toggle_cloaked')}>
+                  <Button
+                    selected={cloaked}
+                    icon={cloaked ? 'eye' : 'eye-o'}
+                    onClick={() => act('toggle_cloaked')}>
                     {cloaked ? 'Enabled' : 'Disabled'}
                   </Button>
                 </LabeledList.Item>
@@ -278,7 +330,11 @@ const ShuttleControlConsoleWeb = (props, context) => {
               {(routes.length &&
                 routes.map((route) => (
                   <LabeledList.Item label={route.name} key={route.name}>
-                    <Button icon="rocket" onClick={() => act('traverse', { traverse: route.index })}>
+                    <Button
+                      icon="rocket"
+                      onClick={() =>
+                        act('traverse', { traverse: route.index })
+                      }>
                       {route.travel_time}
                     </Button>
                   </LabeledList.Item>
@@ -296,7 +352,11 @@ const ShuttleControlConsoleWeb = (props, context) => {
         <Section title="Transit ETA">
           <LabeledList>
             <LabeledList.Item label="Distance from target">
-              <ProgressBar color="good" minValue={0} maxValue={100} value={travel_progress}>
+              <ProgressBar
+                color="good"
+                minValue={0}
+                maxValue={100}
+                value={travel_progress}>
                 {time_left}s
               </ProgressBar>
             </LabeledList.Item>
@@ -352,13 +412,30 @@ const ShuttleControlConsoleWeb = (props, context) => {
               return (
                 <LabeledList.Item label={key} key={key}>
                   <LabeledList>
-                    <LabeledList.Item label="Pressure">{sensor.pressure}kPa</LabeledList.Item>
-                    <LabeledList.Item label="Temperature">{sensor.temp}&deg;C</LabeledList.Item>
-                    <LabeledList.Item label="Oxygen">{sensor.oxygen}%</LabeledList.Item>
-                    <LabeledList.Item label="Nitrogen">{sensor.nitrogen}%</LabeledList.Item>
-                    <LabeledList.Item label="Carbon Dioxide">{sensor.carbon_dioxide}%</LabeledList.Item>
-                    <LabeledList.Item label="Phoron">{sensor.phoron}%</LabeledList.Item>
-                    {(sensor.other && <LabeledList.Item label="Other">{sensor.other}%</LabeledList.Item>) || null}
+                    <LabeledList.Item label="Pressure">
+                      {sensor.pressure}kPa
+                    </LabeledList.Item>
+                    <LabeledList.Item label="Temperature">
+                      {sensor.temp}&deg;C
+                    </LabeledList.Item>
+                    <LabeledList.Item label="Oxygen">
+                      {sensor.oxygen}%
+                    </LabeledList.Item>
+                    <LabeledList.Item label="Nitrogen">
+                      {sensor.nitrogen}%
+                    </LabeledList.Item>
+                    <LabeledList.Item label="Carbon Dioxide">
+                      {sensor.carbon_dioxide}%
+                    </LabeledList.Item>
+                    <LabeledList.Item label="Phoron">
+                      {sensor.phoron}%
+                    </LabeledList.Item>
+                    {(sensor.other && (
+                      <LabeledList.Item label="Other">
+                        {sensor.other}%
+                      </LabeledList.Item>
+                    )) ||
+                      null}
                   </LabeledList>
                 </LabeledList.Item>
               );
@@ -384,7 +461,10 @@ export const ShuttleControl = (props, context) => {
   const { act, data } = useBackend(context);
   const { subtemplate } = data;
   return (
-    <Window width={470} height={subtemplate === 'ShuttleControlConsoleWeb' ? 560 : 370} resizable>
+    <Window
+      width={470}
+      height={subtemplate === 'ShuttleControlConsoleWeb' ? 560 : 370}
+      resizable>
       <Window.Content>{SubtemplateList[subtemplate]}</Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui_ch/interfaces/Sleeper.js b/tgui/packages/tgui_ch/interfaces/Sleeper.js
index dde5e970f5..3d2b0e670a 100644
--- a/tgui/packages/tgui_ch/interfaces/Sleeper.js
+++ b/tgui/packages/tgui_ch/interfaces/Sleeper.js
@@ -22,7 +22,15 @@ const damageRange = {
   bad: [0.5, Infinity],
 };
 
-const tempColors = ['bad', 'average', 'average', 'good', 'average', 'average', 'bad'];
+const tempColors = [
+  'bad',
+  'average',
+  'average',
+  'good',
+  'average',
+  'average',
+  'bad',
+];
 
 export const Sleeper = (props, context) => {
   const { act, data } = useBackend(context);
@@ -30,7 +38,9 @@ export const Sleeper = (props, context) => {
   const body = hasOccupant ? <SleeperMain /> : <SleeperEmpty />;
   return (
     <Window width={550} height={760} resizable>
-      <Window.Content className="Layout__content--flexColumn">{body}</Window.Content>
+      <Window.Content className="Layout__content--flexColumn">
+        {body}
+      </Window.Content>
     </Window>
   );
 };
@@ -42,8 +52,16 @@ const SleeperMain = (props, context) => {
     <Fragment>
       <SleeperOccupant />
       <SleeperDamage />
-      <SleeperDialysisPump title="Dialysis" active={dialysis} actToDo="togglefilter" />
-      <SleeperDialysisPump title="Stomach Pump" active={stomachpumping} actToDo="togglepump" />
+      <SleeperDialysisPump
+        title="Dialysis"
+        active={dialysis}
+        actToDo="togglefilter"
+      />
+      <SleeperDialysisPump
+        title="Stomach Pump"
+        active={stomachpumping}
+        actToDo="togglepump"
+      />
       <SleeperChemicals />
     </Fragment>
   );
@@ -64,9 +82,15 @@ const SleeperOccupant = (props, context) => {
             icon={auto_eject_dead ? 'toggle-on' : 'toggle-off'}
             selected={auto_eject_dead}
             content={auto_eject_dead ? 'On' : 'Off'}
-            onClick={() => act('auto_eject_dead_' + (auto_eject_dead ? 'off' : 'on'))}
+            onClick={() =>
+              act('auto_eject_dead_' + (auto_eject_dead ? 'off' : 'on'))
+            }
+          />
+          <Button
+            icon="user-slash"
+            content="Eject"
+            onClick={() => act('ejectify')}
           />
-          <Button icon="user-slash" content="Eject" onClick={() => act('ejectify')} />
           <Button content={stasis} onClick={() => act('changestasis')} />
         </Fragment>
       }>
@@ -131,7 +155,12 @@ const SleeperDamage = (props, context) => {
       <LabeledList>
         {damages.map((d, i) => (
           <LabeledList.Item key={i} label={d[0]}>
-            <ProgressBar key={i} min="0" max="100" value={occupant[d[1]] / 100} ranges={damageRange}>
+            <ProgressBar
+              key={i}
+              min="0"
+              max="100"
+              value={occupant[d[1]] / 100}
+              ranges={damageRange}>
               {round(occupant[d[1]], 0)}
             </ProgressBar>
           </LabeledList.Item>
@@ -158,7 +187,12 @@ const SleeperDialysisPump = (props, context) => {
             content={canDialysis ? 'Active' : 'Inactive'}
             onClick={() => act(actToDo)}
           />
-          <Button disabled={!isBeakerLoaded} icon="eject" content="Eject" onClick={() => act('removebeaker')} />
+          <Button
+            disabled={!isBeakerLoaded}
+            icon="eject"
+            content="Eject"
+            onClick={() => act('removebeaker')}
+          />
         </Fragment>
       }>
       {isBeakerLoaded ? (
@@ -211,15 +245,29 @@ const SleeperChemicals = (props, context) => {
         }
         return (
           <Box key={i} backgroundColor="rgba(0, 0, 0, 0.33)" mb="0.5rem">
-            <Section title={chem.title} level="3" mx="0" lineHeight="18px" buttons={odWarning}>
+            <Section
+              title={chem.title}
+              level="3"
+              mx="0"
+              lineHeight="18px"
+              buttons={odWarning}>
               <Flex align="flex-start">
-                <ProgressBar min="0" max={maxchem} value={chem.occ_amount / maxchem} color={barColor} mr="0.5rem">
+                <ProgressBar
+                  min="0"
+                  max={maxchem}
+                  value={chem.occ_amount / maxchem}
+                  color={barColor}
+                  mr="0.5rem">
                   {chem.pretty_amount}/{maxchem}u
                 </ProgressBar>
                 {amounts.map((a, i) => (
                   <Button
                     key={i}
-                    disabled={!chem.injectable || chem.occ_amount + a > maxchem || occupant.stat === 2}
+                    disabled={
+                      !chem.injectable ||
+                      chem.occ_amount + a > maxchem ||
+                      occupant.stat === 2
+                    }
                     icon="syringe"
                     content={a}
                     mb="0"
@@ -253,7 +301,11 @@ const SleeperEmpty = (props, context) => {
           No occupant detected.
           {(isBeakerLoaded && (
             <Box>
-              <Button icon="eject" content="Remove Beaker" onClick={() => act('removebeaker')} />
+              <Button
+                icon="eject"
+                content="Remove Beaker"
+                onClick={() => act('removebeaker')}
+              />
             </Box>
           )) ||
             null}
diff --git a/tgui/packages/tgui_ch/interfaces/SmartVend.js b/tgui/packages/tgui_ch/interfaces/SmartVend.js
index 0d106904c4..15ea8eb94a 100644
--- a/tgui/packages/tgui_ch/interfaces/SmartVend.js
+++ b/tgui/packages/tgui_ch/interfaces/SmartVend.js
@@ -12,14 +12,19 @@ export const SmartVend = (props, context) => {
           {(data.secure && (
             <NoticeBox danger={data.locked === -1} info={data.locked !== -1}>
               {data.locked === -1 ? (
-                <Box>Sec.re ACC_** //):securi_nt.diag=&gt;##&apos;or 1=1&apos;%($...</Box>
+                <Box>
+                  Sec.re ACC_** //):securi_nt.diag=&gt;##&apos;or
+                  1=1&apos;%($...
+                </Box>
               ) : (
                 <Box>Secure Access: Please have your identification ready.</Box>
               )}
             </NoticeBox>
           )) ||
             null}
-          {(data.contents.length === 0 && <NoticeBox>Unfortunately, this {config.title} is empty.</NoticeBox>) || (
+          {(data.contents.length === 0 && (
+            <NoticeBox>Unfortunately, this {config.title} is empty.</NoticeBox>
+          )) || (
             <Table>
               <Table.Row header>
                 <Table.Cell collapsing>Item</Table.Cell>
diff --git a/tgui/packages/tgui_ch/interfaces/Smes.js b/tgui/packages/tgui_ch/interfaces/Smes.js
index 40beb0cd94..b584071411 100644
--- a/tgui/packages/tgui_ch/interfaces/Smes.js
+++ b/tgui/packages/tgui_ch/interfaces/Smes.js
@@ -24,8 +24,10 @@ export const Smes = (props, context) => {
     outputLevelMax,
     outputUsed,
   } = data;
-  const inputState = (capacityPercent >= 100 && 'good') || (inputting && 'average') || 'bad';
-  const outputState = (outputting && 'good') || (charge > 0 && 'average') || 'bad';
+  const inputState =
+    (capacityPercent >= 100 && 'good') || (inputting && 'average') || 'bad';
+  const outputState =
+    (outputting && 'good') || (charge > 0 && 'average') || 'bad';
   return (
     <Window width={340} height={350} resizable>
       <Window.Content>
@@ -37,7 +39,8 @@ export const Smes = (props, context) => {
               average: [0.15, 0.5],
               bad: [-Infinity, 0.15],
             }}>
-            {round(charge / (1000 * 60), 1)} kWh / {round(capacity / (1000 * 60))} kWh ({capacityPercent}%)
+            {round(charge / (1000 * 60), 1)} kWh /{' '}
+            {round(capacity / (1000 * 60))} kWh ({capacityPercent}%)
           </ProgressBar>
         </Section>
         <Section title="Input">
@@ -53,7 +56,9 @@ export const Smes = (props, context) => {
                 </Button>
               }>
               <Box color={inputState}>
-                {(capacityPercent >= 100 && 'Fully Charged') || (inputting && 'Charging') || 'Not Charging'}
+                {(capacityPercent >= 100 && 'Fully Charged') ||
+                  (inputting && 'Charging') ||
+                  'Not Charging'}
               </Box>
             </LabeledList.Item>
             <LabeledList.Item label="Target Input">
@@ -116,7 +121,9 @@ export const Smes = (props, context) => {
                 </Flex.Item>
               </Flex>
             </LabeledList.Item>
-            <LabeledList.Item label="Available">{formatPower(inputAvailable)}</LabeledList.Item>
+            <LabeledList.Item label="Available">
+              {formatPower(inputAvailable)}
+            </LabeledList.Item>
           </LabeledList>
         </Section>
         <Section title="Output">
@@ -131,7 +138,13 @@ export const Smes = (props, context) => {
                   {outputAttempt ? 'On' : 'Off'}
                 </Button>
               }>
-              <Box color={outputState}>{outputting ? 'Sending' : charge > 0 ? 'Not Sending' : 'No Charge'}</Box>
+              <Box color={outputState}>
+                {outputting
+                  ? 'Sending'
+                  : charge > 0
+                    ? 'Not Sending'
+                    : 'No Charge'}
+              </Box>
             </LabeledList.Item>
             <LabeledList.Item label="Target Output">
               <Flex inline width="100%">
@@ -192,7 +205,9 @@ export const Smes = (props, context) => {
                 </Flex.Item>
               </Flex>
             </LabeledList.Item>
-            <LabeledList.Item label="Outputting">{formatPower(outputUsed)}</LabeledList.Item>
+            <LabeledList.Item label="Outputting">
+              {formatPower(outputUsed)}
+            </LabeledList.Item>
           </LabeledList>
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui_ch/interfaces/SolarControl.js b/tgui/packages/tgui_ch/interfaces/SolarControl.js
index 3859f8ee57..457a747367 100644
--- a/tgui/packages/tgui_ch/interfaces/SolarControl.js
+++ b/tgui/packages/tgui_ch/interfaces/SolarControl.js
@@ -21,14 +21,24 @@ export const SolarControl = (props, context) => {
       <Window.Content>
         <Section
           title="Status"
-          buttons={<Button icon="sync" content="Scan for new hardware" onClick={() => act('refresh')} />}>
+          buttons={
+            <Button
+              icon="sync"
+              content="Scan for new hardware"
+              onClick={() => act('refresh')}
+            />
+          }>
           <Grid>
             <Grid.Column>
               <LabeledList>
-                <LabeledList.Item label="Solar tracker" color={connected_tracker ? 'good' : 'bad'}>
+                <LabeledList.Item
+                  label="Solar tracker"
+                  color={connected_tracker ? 'good' : 'bad'}>
                   {connected_tracker ? 'OK' : 'N/A'}
                 </LabeledList.Item>
-                <LabeledList.Item label="Solar panels" color={connected_panels > 0 ? 'good' : 'bad'}>
+                <LabeledList.Item
+                  label="Solar panels"
+                  color={connected_panels > 0 ? 'good' : 'bad'}>
                   {connected_panels}
                 </LabeledList.Item>
               </LabeledList>
@@ -48,7 +58,9 @@ export const SolarControl = (props, context) => {
                     {generated + ' W'}
                   </ProgressBar>
                 </LabeledList.Item>
-                <LabeledList.Item label="Star orientation">{sun_angle}°</LabeledList.Item>
+                <LabeledList.Item label="Star orientation">
+                  {sun_angle}°
+                </LabeledList.Item>
               </LabeledList>
             </Grid.Column>
           </Grid>
diff --git a/tgui/packages/tgui_ch/interfaces/SpaceHeater.tsx b/tgui/packages/tgui_ch/interfaces/SpaceHeater.tsx
index 7dde2f2d57..d405ea2005 100644
--- a/tgui/packages/tgui_ch/interfaces/SpaceHeater.tsx
+++ b/tgui/packages/tgui_ch/interfaces/SpaceHeater.tsx
@@ -44,9 +44,17 @@ export const SpaceHeater = (props, context) => {
             </LabeledControls.Item>
             <LabeledControls.Item label="Cell">
               {cell ? (
-                <Button icon="eject" content="Eject Cell" onClick={() => act('cellremove')} />
+                <Button
+                  icon="eject"
+                  content="Eject Cell"
+                  onClick={() => act('cellremove')}
+                />
               ) : (
-                <Button icon="car-battery" content="Insert Cell" onClick={() => act('cellinstall')} />
+                <Button
+                  icon="car-battery"
+                  content="Insert Cell"
+                  onClick={() => act('cellinstall')}
+                />
               )}
             </LabeledControls.Item>
           </LabeledControls>
diff --git a/tgui/packages/tgui_ch/interfaces/Stack.js b/tgui/packages/tgui_ch/interfaces/Stack.js
index f0141b5646..6cf8cefe8c 100644
--- a/tgui/packages/tgui_ch/interfaces/Stack.js
+++ b/tgui/packages/tgui_ch/interfaces/Stack.js
@@ -70,7 +70,10 @@ const Multipliers = (props, context) => {
 
   const { recipe, maxMultiplier } = props;
 
-  let maxM = Math.min(maxMultiplier, Math.floor(recipe.max_res_amount / recipe.res_amount));
+  let maxM = Math.min(
+    maxMultiplier,
+    Math.floor(recipe.max_res_amount / recipe.res_amount)
+  );
 
   let multipliers = [5, 10, 25];
 
diff --git a/tgui/packages/tgui_ch/interfaces/StarcasterCh.js b/tgui/packages/tgui_ch/interfaces/StarcasterCh.js
index 6f48eea817..c58d2aa662 100644
--- a/tgui/packages/tgui_ch/interfaces/StarcasterCh.js
+++ b/tgui/packages/tgui_ch/interfaces/StarcasterCh.js
@@ -59,7 +59,9 @@ const ViewArticles = (props, context) => {
     <Section
       title="Articles List"
       buttons={
-        <Button.Checkbox onClick={() => act('PRG_toggle_archived')} checked={showing_archived}>
+        <Button.Checkbox
+          onClick={() => act('PRG_toggle_archived')}
+          checked={showing_archived}>
           Show Archived
         </Button.Checkbox>
       }>
@@ -69,9 +71,18 @@ const ViewArticles = (props, context) => {
             <LabeledList.Item
               label={article.name}
               key={article.uid}
-              buttons={<Button icon="download" onClick={() => act('PRG_openarticle', { uid: article.uid })} />}
+              buttons={
+                <Button
+                  icon="download"
+                  onClick={() => act('PRG_openarticle', { uid: article.uid })}
+                />
+              }
             />
-          ))) || <LabeledList.Item label="Error">Unable to connect to Starfire database.</LabeledList.Item>}
+          ))) || (
+          <LabeledList.Item label="Error">
+            Unable to connect to Starfire database.
+          </LabeledList.Item>
+        )}
       </LabeledList>
     </Section>
   );
diff --git a/tgui/packages/tgui_ch/interfaces/StationAlertConsole.js b/tgui/packages/tgui_ch/interfaces/StationAlertConsole.js
index d7e88f5578..2a9a416581 100644
--- a/tgui/packages/tgui_ch/interfaces/StationAlertConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/StationAlertConsole.js
@@ -18,7 +18,9 @@ export const StationAlertConsoleContent = (props, context) => {
   return categories.map((category) => (
     <Section key={category.category} title={category.category}>
       <ul>
-        {category.alarms.length === 0 && <li className="color-good">Systems Nominal</li>}
+        {category.alarms.length === 0 && (
+          <li className="color-good">Systems Nominal</li>
+        )}
         {category.alarms.map((alarm) => {
           let footer = '';
 
@@ -42,13 +44,19 @@ export const StationAlertConsoleContent = (props, context) => {
               </Section>
             );
           } else if (alarm.lost_sources) {
-            footer = <Box color="bad">Lost Alarm Sources: {alarm.lost_sources}</Box>;
+            footer = (
+              <Box color="bad">Lost Alarm Sources: {alarm.lost_sources}</Box>
+            );
           }
 
           return (
             <li key={alarm.name}>
               {alarm.name}
-              {alarm.origin_lost ? <Box color="bad">Alarm Origin Lost.</Box> : ''}
+              {alarm.origin_lost ? (
+                <Box color="bad">Alarm Origin Lost.</Box>
+              ) : (
+                ''
+              )}
               {footer}
             </li>
           );
diff --git a/tgui/packages/tgui_ch/interfaces/StockExchange.js b/tgui/packages/tgui_ch/interfaces/StockExchange.js
index 9c765920fe..2c3691c5f3 100644
--- a/tgui/packages/tgui_ch/interfaces/StockExchange.js
+++ b/tgui/packages/tgui_ch/interfaces/StockExchange.js
@@ -92,11 +92,25 @@ const StockExchangeFullView = (props, context) => {
             <Table.Cell color="label">{stock.Owned}</Table.Cell>
             <Table.Cell color="label">{stock.Avail}</Table.Cell>
             <Table.Cell color="label">
-              <Button icon="plus" disabled={false} onClick={() => act('stocks_buy', { share: stock.REF })} />
-              <Button icon="minus" disabled={false} onClick={() => act('stocks_sell', { share: stock.REF })} />
+              <Button
+                icon="plus"
+                disabled={false}
+                onClick={() => act('stocks_buy', { share: stock.REF })}
+              />
+              <Button
+                icon="minus"
+                disabled={false}
+                onClick={() => act('stocks_sell', { share: stock.REF })}
+              />
               <br />
-              <Button content="A" onClick={() => act('stocks_archive', { share: stock.REF })} />
-              <Button content="H" onClick={() => act('stocks_history', { share: stock.REF })} />
+              <Button
+                content="A"
+                onClick={() => act('stocks_archive', { share: stock.REF })}
+              />
+              <Button
+                content="H"
+                onClick={() => act('stocks_history', { share: stock.REF })}
+              />
               <br />
             </Table.Cell>
           </Table.Row>
@@ -121,7 +135,10 @@ const StockExchangeCompactView = (props, context) => {
           <b>Unified shares</b> {stock.Unification} ago.
           <br />
           <b>Current value per share:</b> {stock.Value} |{' '}
-          <Button content="View history" onClick={() => act('stocks_history', { share: stock.REF })} />
+          <Button
+            content="View history"
+            onClick={() => act('stocks_history', { share: stock.REF })}
+          />
           <br />
           You currently own <b>{stock.Owned}</b> shares in this company.
           <br />
@@ -131,8 +148,15 @@ const StockExchangeCompactView = (props, context) => {
             <span>You cannot buy or sell shares in a bankrupt company!</span>
           ) : (
             <span>
-              <Button content="Buy shares" onClick={() => act('stocks_buy', { share: stock.REF })} /> |{' '}
-              <Button content="Sell shares" onClick={() => act('stocks_sell', { share: stock.REF })} />
+              <Button
+                content="Buy shares"
+                onClick={() => act('stocks_buy', { share: stock.REF })}
+              />{' '}
+              |{' '}
+              <Button
+                content="Sell shares"
+                onClick={() => act('stocks_sell', { share: stock.REF })}
+              />
             </span>
           )}
           <br />
@@ -140,7 +164,10 @@ const StockExchangeCompactView = (props, context) => {
           <br />
           <i>{stock.Products}</i>
           <br />
-          <Button content="View news archives" onClick={() => act('stocks_archive', { share: stock.REF })} />{' '}
+          <Button
+            content="View news archives"
+            onClick={() => act('stocks_archive', { share: stock.REF })}
+          />{' '}
           {/* [news ? " <span style='color:red'>(updated)</span>" : null] */}
           <Divider />
         </Box>
@@ -167,15 +194,26 @@ const StockExchangeLogs = (props, context) => {
             {log.type !== 'borrow' ? (
               <div>
                 {log.time} | <b>{log.user_name}</b>{' '}
-                {log.type === 'transaction_bought' ? <span>bought</span> : <span>sold</span>} <b>{log.stocks}</b> stocks
-                at {log.shareprice} a share for <b>{log.money}</b> total credits{' '}
-                {log.type === 'transaction_bought' ? <span>in</span> : <span>from</span>} <b>{log.company_name}</b>.
+                {log.type === 'transaction_bought' ? (
+                  <span>bought</span>
+                ) : (
+                  <span>sold</span>
+                )}{' '}
+                <b>{log.stocks}</b> stocks at {log.shareprice} a share for{' '}
+                <b>{log.money}</b> total credits{' '}
+                {log.type === 'transaction_bought' ? (
+                  <span>in</span>
+                ) : (
+                  <span>from</span>
+                )}{' '}
+                <b>{log.company_name}</b>.
                 <br />
               </div>
             ) : (
               <div>
-                {log.time} | <b>{log.user_name}</b> borrowed <b>{log.stocks}</b> stocks with a deposit of{' '}
-                <b>{log.money}</b> credits in <b>{log.company_name}</b>.<br />
+                {log.time} | <b>{log.user_name}</b> borrowed <b>{log.stocks}</b>{' '}
+                stocks with a deposit of <b>{log.money}</b> credits in{' '}
+                <b>{log.company_name}</b>.<br />
               </div>
             )}
             <Divider />
@@ -220,7 +258,8 @@ const StockExchangeArchive = (props, context) => {
               <i>{article.subtitle}</i>
               <br />
               {article.article}
-              <br />- {article.author}, {article.spacetime} (via <i>{article.outlet}</i>)
+              <br />- {article.author}, {article.spacetime} (via{' '}
+              <i>{article.outlet}</i>)
             </div>
             <Divider />
           </Box>
diff --git a/tgui/packages/tgui_ch/interfaces/SuitCycler.js b/tgui/packages/tgui_ch/interfaces/SuitCycler.js
index a9ad1580ef..8a8f28f4cb 100644
--- a/tgui/packages/tgui_ch/interfaces/SuitCycler.js
+++ b/tgui/packages/tgui_ch/interfaces/SuitCycler.js
@@ -26,15 +26,37 @@ export const SuitCycler = (props, context) => {
 
 const SuitCyclerContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const { safeties, occupied, suit, helmet, departments, species, uv_level, max_uv_level, can_repair, damage } = data;
+  const {
+    safeties,
+    occupied,
+    suit,
+    helmet,
+    departments,
+    species,
+    uv_level,
+    max_uv_level,
+    can_repair,
+    damage,
+  } = data;
 
   return (
     <Fragment>
-      <Section title="Storage" buttons={<Button icon="lock" content="Lock" onClick={() => act('lock')} />}>
+      <Section
+        title="Storage"
+        buttons={
+          <Button icon="lock" content="Lock" onClick={() => act('lock')} />
+        }>
         {!!(occupied && safeties) && (
           <NoticeBox>
-            Biological entity detected in suit chamber. Please remove before continuing with operation.
-            <Button fluid icon="eject" color="red" content="Eject Entity" onClick={() => act('eject_guy')} />
+            Biological entity detected in suit chamber. Please remove before
+            continuing with operation.
+            <Button
+              fluid
+              icon="eject"
+              color="red"
+              content="Eject Entity"
+              onClick={() => act('eject_guy')}
+            />
           </NoticeBox>
         )}
         <LabeledList>
@@ -65,7 +87,11 @@ const SuitCyclerContent = (props, context) => {
           {can_repair && damage ? (
             <LabeledList.Item label="Suit Damage">
               {damage}
-              <Button icon="wrench" content="Repair" onClick={() => act('repair_suit')} />
+              <Button
+                icon="wrench"
+                content="Repair"
+                onClick={() => act('repair_suit')}
+              />
             </LabeledList.Item>
           ) : null}
         </LabeledList>
@@ -91,7 +117,12 @@ const SuitCyclerContent = (props, context) => {
             />
           </LabeledList.Item>
         </LabeledList>
-        <Button mt={1} fluid content="Customize" onClick={() => act('apply_paintjob')} />
+        <Button
+          mt={1}
+          fluid
+          content="Customize"
+          onClick={() => act('apply_paintjob')}
+        />
       </Section>
       <Section title="UV Decontamination">
         <LabeledList>
@@ -106,7 +137,13 @@ const SuitCyclerContent = (props, context) => {
             />
           </LabeledList.Item>
           <LabeledList.Item label="Decontaminate">
-            <Button fluid icon="recycle" disabled={occupied && safeties} textAlign="center" onClick={() => act('uv')} />
+            <Button
+              fluid
+              icon="recycle"
+              disabled={occupied && safeties}
+              textAlign="center"
+              onClick={() => act('uv')}
+            />
           </LabeledList.Item>
         </LabeledList>
       </Section>
@@ -115,7 +152,11 @@ const SuitCyclerContent = (props, context) => {
 };
 
 const SuitCyclerUV = (props, context) => {
-  return <NoticeBox>Contents are currently being decontaminated. Please wait.</NoticeBox>;
+  return (
+    <NoticeBox>
+      Contents are currently being decontaminated. Please wait.
+    </NoticeBox>
+  );
 };
 
 const SuitCyclerLocked = (props, context) => {
@@ -126,15 +167,23 @@ const SuitCyclerLocked = (props, context) => {
   return (
     <Section title="Locked" textAlign="center">
       <Box color="bad" bold>
-        The {model_text} suit cycler is currently locked. Please contact your system administrator.
+        The {model_text} suit cycler is currently locked. Please contact your
+        system administrator.
       </Box>
       <Box>
-        <Button icon="unlock" content="[Unlock]" disabled={!userHasAccess} onClick={() => act('lock')} />
+        <Button
+          icon="unlock"
+          content="[Unlock]"
+          disabled={!userHasAccess}
+          onClick={() => act('lock')}
+        />
       </Box>
     </Section>
   );
 };
 
 const SuitCyclerActive = (props, context) => {
-  return <NoticeBox>Contents are currently being painted. Please wait.</NoticeBox>;
+  return (
+    <NoticeBox>Contents are currently being painted. Please wait.</NoticeBox>
+  );
 };
diff --git a/tgui/packages/tgui_ch/interfaces/SuitStorageUnit.js b/tgui/packages/tgui_ch/interfaces/SuitStorageUnit.js
index 05ac172e4b..5588bc38b9 100644
--- a/tgui/packages/tgui_ch/interfaces/SuitStorageUnit.js
+++ b/tgui/packages/tgui_ch/interfaces/SuitStorageUnit.js
@@ -52,8 +52,15 @@ const SuitStorageUnitContent = (props, context) => {
       }>
       {!!(occupied && safeties) && (
         <NoticeBox>
-          Biological entity detected in suit chamber. Please remove before continuing with operation.
-          <Button fluid icon="eject" color="red" content="Eject Entity" onClick={() => act('eject_guy')} />
+          Biological entity detected in suit chamber. Please remove before
+          continuing with operation.
+          <Button
+            fluid
+            icon="eject"
+            color="red"
+            content="Eject Entity"
+            onClick={() => act('eject_guy')}
+          />
         </NoticeBox>
       )}
       {(locked && (
@@ -122,13 +129,15 @@ const SuitStorageUnitPanel = (props, context) => {
   return (
     <Section title="Maintenance Panel">
       <Box color="grey">
-        The panel is ridden with controls, button and meters, labeled in strange signs and symbols that you cannot
-        understand. Probably the manufactoring world&apos;s language. Among other things, a few controls catch your eye.
+        The panel is ridden with controls, button and meters, labeled in strange
+        signs and symbols that you cannot understand. Probably the manufactoring
+        world&apos;s language. Among other things, a few controls catch your
+        eye.
       </Box>
       <br />
       <Box>
-        A small dial with a biohazard symbol next to it. It&apos;s pointing towards a gauge that reads{' '}
-        {uv_super ? '15nm' : '185nm'}.
+        A small dial with a biohazard symbol next to it. It&apos;s pointing
+        towards a gauge that reads {uv_super ? '15nm' : '185nm'}.
         <Flex mt={1} align="center" textAlign="center">
           <Flex.Item basis="50%" textAlign="center">
             <Knob
@@ -152,7 +161,12 @@ const SuitStorageUnitPanel = (props, context) => {
       <br />
       <Box>
         A thick old-style button, with 2 grimy LED lights next to it. The{' '}
-        {safeties ? <font color="green">GREEN</font> : <font color="red">RED</font>} LED is on.
+        {safeties ? (
+          <font color="green">GREEN</font>
+        ) : (
+          <font color="red">RED</font>
+        )}{' '}
+        LED is on.
         <Flex mt={1} align="center" textAlign="center">
           <Flex.Item basis="50%" textAlign="center">
             <Button
@@ -178,13 +192,18 @@ const SuitStorageUnitPanel = (props, context) => {
 };
 
 const SuitStorageUnitUV = (props, context) => {
-  return <NoticeBox>Contents are currently being decontaminated. Please wait.</NoticeBox>;
+  return (
+    <NoticeBox>
+      Contents are currently being decontaminated. Please wait.
+    </NoticeBox>
+  );
 };
 
 const SuitStorageUnitBroken = (props, context) => {
   return (
     <NoticeBox danger>
-      Unit chamber is too contaminated to continue usage. Please call for a qualified individual to perform maintenance.
+      Unit chamber is too contaminated to continue usage. Please call for a
+      qualified individual to perform maintenance.
     </NoticeBox>
   );
 };
diff --git a/tgui/packages/tgui_ch/interfaces/SupermatterMonitor.js b/tgui/packages/tgui_ch/interfaces/SupermatterMonitor.js
index 109e431e55..0458cfdd2d 100644
--- a/tgui/packages/tgui_ch/interfaces/SupermatterMonitor.js
+++ b/tgui/packages/tgui_ch/interfaces/SupermatterMonitor.js
@@ -33,15 +33,23 @@ const SupermatterMonitorList = (props, context) => {
   return (
     <Section
       title="Supermatters Detected"
-      buttons={<Button content="Refresh" icon="sync" onClick={() => act('refresh')} />}>
+      buttons={
+        <Button content="Refresh" icon="sync" onClick={() => act('refresh')} />
+      }>
       <Flex wrap="wrap">
         {supermatters.map((sm, i) => (
           <Flex.Item basis="49%" grow={i % 2} key={i}>
             <Section title={sm.area_name + ' (#' + sm.uid + ')'}>
               <LabeledList>
-                <LabeledList.Item label="Integrity">{sm.integrity} %</LabeledList.Item>
+                <LabeledList.Item label="Integrity">
+                  {sm.integrity} %
+                </LabeledList.Item>
                 <LabeledList.Item label="Options">
-                  <Button icon="eye" content="View Details" onClick={() => act('set', { set: sm.uid })} />
+                  <Button
+                    icon="eye"
+                    content="View Details"
+                    onClick={() => act('set', { set: sm.uid })}
+                  />
                 </LabeledList.Item>
               </LabeledList>
             </Section>
@@ -72,7 +80,13 @@ const SupermatterMonitorActive = (props, context) => {
   return (
     <Section
       title={toTitleCase(SM_area)}
-      buttons={<Button icon="arrow-left" content="Return to Menu" onClick={() => act('clear')} />}>
+      buttons={
+        <Button
+          icon="arrow-left"
+          content="Return to Menu"
+          onClick={() => act('clear')}
+        />
+      }>
       <LabeledList>
         <LabeledList.Item label="Core Integrity">
           <ProgressBar
@@ -88,22 +102,49 @@ const SupermatterMonitorActive = (props, context) => {
           />
         </LabeledList.Item>
         <LabeledList.Item label="Relative EER">
-          <Box color={(SM_power > 300 && 'bad') || (SM_power > 150 && 'average') || 'good'}>
-            <AnimatedNumber format={(val) => round(val, 2) + ' MeV/cm³'} value={SM_power} />
+          <Box
+            color={
+              (SM_power > 300 && 'bad') ||
+              (SM_power > 150 && 'average') ||
+              'good'
+            }>
+            <AnimatedNumber
+              format={(val) => round(val, 2) + ' MeV/cm³'}
+              value={SM_power}
+            />
           </Box>
         </LabeledList.Item>
         <LabeledList.Item label="Temperature">
-          <Box color={(SM_ambienttemp > 5000 && 'bad') || (SM_ambienttemp > 4000 && 'average') || 'good'}>
-            <AnimatedNumber format={(val) => round(val, 2) + ' K'} value={SM_ambienttemp} />
+          <Box
+            color={
+              (SM_ambienttemp > 5000 && 'bad') ||
+              (SM_ambienttemp > 4000 && 'average') ||
+              'good'
+            }>
+            <AnimatedNumber
+              format={(val) => round(val, 2) + ' K'}
+              value={SM_ambienttemp}
+            />
           </Box>
         </LabeledList.Item>
         <LabeledList.Item label="Pressure">
-          <Box color={(SM_ambientpressure > 10000 && 'bad') || (SM_ambientpressure > 5000 && 'average') || 'good'}>
-            <AnimatedNumber format={(val) => round(val, 2) + ' kPa'} value={SM_ambientpressure} />
+          <Box
+            color={
+              (SM_ambientpressure > 10000 && 'bad') ||
+              (SM_ambientpressure > 5000 && 'average') ||
+              'good'
+            }>
+            <AnimatedNumber
+              format={(val) => round(val, 2) + ' kPa'}
+              value={SM_ambientpressure}
+            />
           </Box>
         </LabeledList.Item>
         <LabeledList.Item label="Chamber EPR">
-          <Box color={(SM_EPR > 4 && 'bad') || (SM_EPR > 1 && 'average') || 'good'}>
+          <Box
+            color={
+              (SM_EPR > 4 && 'bad') || (SM_EPR > 1 && 'average') || 'good'
+            }>
             <AnimatedNumber format={(val) => round(val, 2)} value={SM_EPR} />
           </Box>
         </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/SupplyConsole.js b/tgui/packages/tgui_ch/interfaces/SupplyConsole.js
index f5a94a1d64..7c4c3dc1db 100644
--- a/tgui/packages/tgui_ch/interfaces/SupplyConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/SupplyConsole.js
@@ -26,7 +26,10 @@ const viewCrateContents = (modal, context) => {
           onClick={() => act('request_crate', { ref: ref })}
         />
       }>
-      <Section title={'Contains' + (random ? ' any ' + random + ' of:' : '')} scrollable height="200px">
+      <Section
+        title={'Contains' + (random ? ' any ' + random + ' of:' : '')}
+        scrollable
+        height="200px">
         {manifest.map((m) => (
           <Box key={m}>{m}</Box>
         ))}
@@ -62,15 +65,30 @@ const SupplyConsoleShuttleStatus = (props, context) => {
   if (shuttle_auth) {
     if (shuttle.launch === 1 && shuttle.mode === 0) {
       shuttle_buttons = (
-        <Button icon="rocket" content="Send Away" onClick={() => act('send_shuttle', { mode: 'send_away' })} />
+        <Button
+          icon="rocket"
+          content="Send Away"
+          onClick={() => act('send_shuttle', { mode: 'send_away' })}
+        />
       );
-    } else if (shuttle.launch === 2 && (shuttle.mode === 3 || shuttle.mode === 1)) {
+    } else if (
+      shuttle.launch === 2 &&
+      (shuttle.mode === 3 || shuttle.mode === 1)
+    ) {
       shuttle_buttons = (
-        <Button icon="ban" content="Cancel Launch" onClick={() => act('send_shuttle', { mode: 'cancel_shuttle' })} />
+        <Button
+          icon="ban"
+          content="Cancel Launch"
+          onClick={() => act('send_shuttle', { mode: 'cancel_shuttle' })}
+        />
       );
     } else if (shuttle.launch === 1 && shuttle.mode === 5) {
       shuttle_buttons = (
-        <Button icon="rocket" content="Send Shuttle" onClick={() => act('send_shuttle', { mode: 'send_to_station' })} />
+        <Button
+          icon="rocket"
+          content="Send Shuttle"
+          onClick={() => act('send_shuttle', { mode: 'send_to_station' })}
+        />
       );
     }
     if (shuttle.force) {
@@ -96,7 +114,9 @@ const SupplyConsoleShuttleStatus = (props, context) => {
                   <Button
                     icon="exclamation-triangle"
                     content="Force Launch"
-                    onClick={() => act('send_shuttle', { mode: 'force_shuttle' })}
+                    onClick={() =>
+                      act('send_shuttle', { mode: 'force_shuttle' })
+                    }
                   />
                 ) : null}
               </Fragment>
@@ -105,7 +125,9 @@ const SupplyConsoleShuttleStatus = (props, context) => {
           </LabeledList.Item>
           <LabeledList.Item label="Engine">{shuttle.engine}</LabeledList.Item>
           {shuttle.mode === 4 ? (
-            <LabeledList.Item label="ETA">{shuttle.time > 1 ? formatTime(shuttle.time) : 'LATE'}</LabeledList.Item>
+            <LabeledList.Item label="ETA">
+              {shuttle.time > 1 ? formatTime(shuttle.time) : 'LATE'}
+            </LabeledList.Item>
           ) : null}
         </LabeledList>
       </Section>
@@ -123,19 +145,34 @@ const SupplyConsoleMenu = (props, context) => {
   return (
     <Section title="Menu">
       <Tabs>
-        <Tabs.Tab icon="box" selected={tabIndex === 0} onClick={() => setTabIndex(0)}>
+        <Tabs.Tab
+          icon="box"
+          selected={tabIndex === 0}
+          onClick={() => setTabIndex(0)}>
           Request
         </Tabs.Tab>
-        <Tabs.Tab icon="check-circle-o" selected={tabIndex === 1} onClick={() => setTabIndex(1)}>
+        <Tabs.Tab
+          icon="check-circle-o"
+          selected={tabIndex === 1}
+          onClick={() => setTabIndex(1)}>
           Accepted
         </Tabs.Tab>
-        <Tabs.Tab icon="circle-o" selected={tabIndex === 2} onClick={() => setTabIndex(2)}>
+        <Tabs.Tab
+          icon="circle-o"
+          selected={tabIndex === 2}
+          onClick={() => setTabIndex(2)}>
           Requests
         </Tabs.Tab>
-        <Tabs.Tab icon="book" selected={tabIndex === 3} onClick={() => setTabIndex(3)}>
+        <Tabs.Tab
+          icon="book"
+          selected={tabIndex === 3}
+          onClick={() => setTabIndex(3)}>
           Order history
         </Tabs.Tab>
-        <Tabs.Tab icon="book" selected={tabIndex === 4} onClick={() => setTabIndex(4)}>
+        <Tabs.Tab
+          icon="book"
+          selected={tabIndex === 4}
+          onClick={() => setTabIndex(4)}>
           Export history
         </Tabs.Tab>
       </Tabs>
@@ -153,7 +190,11 @@ const SupplyConsoleMenuOrder = (props, context) => {
 
   const { categories, supply_packs, contraband, supply_points } = data;
 
-  const [activeCategory, setActiveCategory] = useLocalState(context, 'activeCategory', null);
+  const [activeCategory, setActiveCategory] = useLocalState(
+    context,
+    'activeCategory',
+    null
+  );
 
   const viewingPacks = flow([
     filter((val) => val.group === activeCategory),
@@ -199,7 +240,9 @@ const SupplyConsoleMenuOrder = (props, context) => {
                     <Button
                       content="#"
                       color={pack.cost > supply_points ? 'red' : null}
-                      onClick={() => act('request_crate_multi', { ref: pack.ref })}
+                      onClick={() =>
+                        act('request_crate_multi', { ref: pack.ref })
+                      }
                     />
                   </Stack.Item>
                   <Stack.Item>
@@ -241,7 +284,9 @@ const SupplyConsoleMenuOrderList = (props, context) => {
   const { mode } = props;
   const { orders, order_auth, supply_points } = data;
 
-  const displayedOrders = orders.filter((val) => val.status === mode || mode === 'All');
+  const displayedOrders = orders.filter(
+    (val) => val.status === mode || mode === 'All'
+  );
 
   if (!displayedOrders.length) {
     return <Section level={2}>No orders found.</Section>;
@@ -285,7 +330,11 @@ const SupplyConsoleMenuOrderList = (props, context) => {
                         icon="pen"
                         content="Edit"
                         onClick={() => {
-                          act('edit_order_value', { ref: order.ref, edit: field.field, default: field.entry });
+                          act('edit_order_value', {
+                            ref: order.ref,
+                            edit: field.field,
+                            default: field.entry,
+                          });
                         }}
                       />
                     ) : null
@@ -294,7 +343,9 @@ const SupplyConsoleMenuOrderList = (props, context) => {
                 </LabeledList.Item>
               ) : null
             )}
-            {mode === 'All' ? <LabeledList.Item label="Status">{order.status}</LabeledList.Item> : null}
+            {mode === 'All' ? (
+              <LabeledList.Item label="Status">{order.status}</LabeledList.Item>
+            ) : null}
           </LabeledList>
           {order_auth && mode === 'Requested' ? (
             <Fragment>
@@ -304,7 +355,11 @@ const SupplyConsoleMenuOrderList = (props, context) => {
                 disabled={order.cost > supply_points}
                 onClick={() => act('approve_order', { ref: order.ref })}
               />
-              <Button icon="times" content="Deny" onClick={() => act('deny_order', { ref: order.ref })} />
+              <Button
+                icon="times"
+                content="Deny"
+                onClick={() => act('deny_order', { ref: order.ref })}
+              />
             </Fragment>
           ) : null}
         </Section>
@@ -335,7 +390,13 @@ const SupplyConsoleMenuHistoryExport = (props, context) => {
                     <Button
                       icon="pen"
                       content="Edit"
-                      onClick={() => act('export_edit', { ref: r.ref, edit: title.field, default: title.entry })}
+                      onClick={() =>
+                        act('export_edit', {
+                          ref: r.ref,
+                          edit: title.field,
+                          default: title.entry,
+                        })
+                      }
                     />
                   ) : null
                 }>
@@ -393,7 +454,11 @@ const SupplyConsoleMenuHistoryExport = (props, context) => {
                 content="Add Item To Record"
                 onClick={() => act('export_add_field', { ref: r.ref })}
               />
-              <Button icon="trash" content="Delete Record" onClick={() => act('export_delete', { ref: r.ref })} />
+              <Button
+                icon="trash"
+                content="Delete Record"
+                onClick={() => act('export_delete', { ref: r.ref })}
+              />
             </Fragment>
           ) : null}
         </Section>
diff --git a/tgui/packages/tgui_ch/interfaces/TEGenerator.js b/tgui/packages/tgui_ch/interfaces/TEGenerator.js
index 5e5a88a3fa..f0a7c63cab 100644
--- a/tgui/packages/tgui_ch/interfaces/TEGenerator.js
+++ b/tgui/packages/tgui_ch/interfaces/TEGenerator.js
@@ -7,7 +7,8 @@ import { formatSiUnit, formatPower } from '../format';
 export const TEGenerator = (props, context) => {
   const { data } = useBackend(context);
 
-  const { totalOutput, maxTotalOutput, thermalOutput, primary, secondary } = data;
+  const { totalOutput, maxTotalOutput, thermalOutput, primary, secondary } =
+    data;
 
   return (
     <Window width={550} height={310} resizable>
@@ -19,7 +20,9 @@ export const TEGenerator = (props, context) => {
                 {formatPower(totalOutput)}
               </ProgressBar>
             </LabeledList.Item>
-            <LabeledList.Item label="Thermal Output">{formatPower(thermalOutput)}</LabeledList.Item>
+            <LabeledList.Item label="Thermal Output">
+              {formatPower(thermalOutput)}
+            </LabeledList.Item>
           </LabeledList>
         </Section>
         {primary && secondary ? (
@@ -32,7 +35,10 @@ export const TEGenerator = (props, context) => {
             </Flex.Item>
           </Flex>
         ) : (
-          <Box color="bad">Warning! Both circulators must be connected in order to operate this machine.</Box>
+          <Box color="bad">
+            Warning! Both circulators must be connected in order to operate this
+            machine.
+          </Box>
         )}
       </Window.Content>
     </Window>
@@ -42,17 +48,37 @@ export const TEGenerator = (props, context) => {
 const TEGCirculator = (props, context) => {
   const { name, values } = props;
 
-  const { dir, output, flowCapacity, inletPressure, inletTemperature, outletPressure, outletTemperature } = values;
+  const {
+    dir,
+    output,
+    flowCapacity,
+    inletPressure,
+    inletTemperature,
+    outletPressure,
+    outletTemperature,
+  } = values;
 
   return (
     <Section title={name + ' (' + dir + ')'}>
       <LabeledList>
-        <LabeledList.Item label="Turbine Output">{formatPower(output)}</LabeledList.Item>
-        <LabeledList.Item label="Flow Capacity">{round(flowCapacity, 2)}%</LabeledList.Item>
-        <LabeledList.Item label="Inlet Pressure">{formatSiUnit(inletPressure * 1000, 0, 'Pa')}</LabeledList.Item>
-        <LabeledList.Item label="Inlet Temperature">{round(inletTemperature, 2)} K</LabeledList.Item>
-        <LabeledList.Item label="Outlet Pressure">{formatSiUnit(outletPressure * 1000, 0, 'Pa')}</LabeledList.Item>
-        <LabeledList.Item label="Outlet Temperature">{round(outletTemperature, 2)} K</LabeledList.Item>
+        <LabeledList.Item label="Turbine Output">
+          {formatPower(output)}
+        </LabeledList.Item>
+        <LabeledList.Item label="Flow Capacity">
+          {round(flowCapacity, 2)}%
+        </LabeledList.Item>
+        <LabeledList.Item label="Inlet Pressure">
+          {formatSiUnit(inletPressure * 1000, 0, 'Pa')}
+        </LabeledList.Item>
+        <LabeledList.Item label="Inlet Temperature">
+          {round(inletTemperature, 2)} K
+        </LabeledList.Item>
+        <LabeledList.Item label="Outlet Pressure">
+          {formatSiUnit(outletPressure * 1000, 0, 'Pa')}
+        </LabeledList.Item>
+        <LabeledList.Item label="Outlet Temperature">
+          {round(outletTemperature, 2)} K
+        </LabeledList.Item>
       </LabeledList>
     </Section>
   );
diff --git a/tgui/packages/tgui_ch/interfaces/Tank.js b/tgui/packages/tgui_ch/interfaces/Tank.js
index b60685155b..e6a6a1365d 100644
--- a/tgui/packages/tgui_ch/interfaces/Tank.js
+++ b/tgui/packages/tgui_ch/interfaces/Tank.js
@@ -33,7 +33,9 @@ export const Tank = (props, context) => {
             )
           }>
           <LabeledList>
-            <LabeledList.Item label="Mask Connected">{maskConnected ? 'Yes' : 'No'}</LabeledList.Item>
+            <LabeledList.Item label="Mask Connected">
+              {maskConnected ? 'Yes' : 'No'}
+            </LabeledList.Item>
           </LabeledList>
         </Section>
         <Section>
diff --git a/tgui/packages/tgui_ch/interfaces/TelecommsLogBrowser.js b/tgui/packages/tgui_ch/interfaces/TelecommsLogBrowser.js
index 2ff8fb3d9e..ba54047453 100644
--- a/tgui/packages/tgui_ch/interfaces/TelecommsLogBrowser.js
+++ b/tgui/packages/tgui_ch/interfaces/TelecommsLogBrowser.js
@@ -13,11 +13,17 @@ export const TelecommsLogBrowser = (props, context) => {
     <Window width={575} height={450} resizable>
       <Window.Content scrollable>
         {temp ? (
-          <NoticeBox danger={temp.color === 'bad'} warning={temp.color !== 'bad'}>
+          <NoticeBox
+            danger={temp.color === 'bad'}
+            warning={temp.color !== 'bad'}>
             <Box display="inline-box" verticalAlign="middle">
               {temp.text}
             </Box>
-            <Button icon="times-circle" float="right" onClick={() => act('cleartemp')} />
+            <Button
+              icon="times-circle"
+              float="right"
+              onClick={() => act('cleartemp')}
+            />
             <Box clear="both" />
           </NoticeBox>
         ) : null}
@@ -27,7 +33,11 @@ export const TelecommsLogBrowser = (props, context) => {
               label="Current Network"
               buttons={
                 <Fragment>
-                  <Button icon="search" content="Refresh" onClick={() => act('scan')} />
+                  <Button
+                    icon="search"
+                    content="Refresh"
+                    onClick={() => act('scan')}
+                  />
                   <Button
                     color="bad"
                     icon="exclamation-triangle"
@@ -37,7 +47,11 @@ export const TelecommsLogBrowser = (props, context) => {
                   />
                 </Fragment>
               }>
-              <Button content={network} icon="pen" onClick={() => act('network')} />
+              <Button
+                content={network}
+                icon="pen"
+                onClick={() => act('network')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
@@ -63,7 +77,12 @@ const TelecommsServerSelection = (props, context) => {
     return (
       <Section title="Detected Telecommunications Servers">
         <Box color="bad">No servers detected.</Box>
-        <Button fluid content="Scan" icon="search" onClick={() => act('scan')} />
+        <Button
+          fluid
+          content="Scan"
+          icon="search"
+          onClick={() => act('scan')}
+        />
       </Section>
     );
   }
@@ -72,8 +91,14 @@ const TelecommsServerSelection = (props, context) => {
     <Section title="Detected Telecommunications Servers">
       <LabeledList>
         {servers.map((server) => (
-          <LabeledList.Item key={server.id} label={server.name + ' (' + server.id + ')'}>
-            <Button content="View" icon="eye" onClick={() => act('view', { id: server.id })} />
+          <LabeledList.Item
+            key={server.id}
+            label={server.name + ' (' + server.id + ')'}>
+            <Button
+              content="View"
+              icon="eye"
+              onClick={() => act('view', { id: server.id })}
+            />
           </LabeledList.Item>
         ))}
       </LabeledList>
@@ -88,7 +113,9 @@ const TelecommsSelectedServer = (props, context) => {
   return (
     <Section
       title={'Server (' + server.id + ')'}
-      buttons={<Button content="Return" icon="undo" onClick={() => act('mainmenu')} />}>
+      buttons={
+        <Button content="Return" icon="undo" onClick={() => act('mainmenu')} />
+      }>
       <LabeledList>
         <LabeledList.Item label="Total Recorded Traffic">
           {server.totalTraffic >= 1024
@@ -122,13 +149,22 @@ const TelecommsSelectedServer = (props, context) => {
                   }>
                   {log.input_type === 'Execution Error' ? (
                     <LabeledList>
-                      <LabeledList.Item label="Data type">Error</LabeledList.Item>
-                      <LabeledList.Item label="Output">{log.parameters['message']}</LabeledList.Item>
+                      <LabeledList.Item label="Data type">
+                        Error
+                      </LabeledList.Item>
+                      <LabeledList.Item label="Output">
+                        {log.parameters['message']}
+                      </LabeledList.Item>
                       <LabeledList.Item label="Delete">
-                        <Button icon="trash" onClick={() => act('delete', { id: log.id })} />
+                        <Button
+                          icon="trash"
+                          onClick={() => act('delete', { id: log.id })}
+                        />
                       </LabeledList.Item>
                     </LabeledList>
-                  ) : universal_translate || log.parameters['uspeech'] || log.parameters['intelligible'] ? (
+                  ) : universal_translate ||
+                    log.parameters['uspeech'] ||
+                    log.parameters['intelligible'] ? (
                     <TelecommsLog log={log} />
                   ) : (
                     <TelecommsLog error />
@@ -146,7 +182,9 @@ const TelecommsLog = (props, context) => {
   const { act, data } = useBackend(context);
   const { log, error } = props;
 
-  const { timecode, name, race, job, message } = (log && log.parameters) || { 'none': 'none' };
+  const { timecode, name, race, job, message } = (log && log.parameters) || {
+    'none': 'none',
+  };
 
   if (error) {
     return (
diff --git a/tgui/packages/tgui_ch/interfaces/TelecommsMachineBrowser.js b/tgui/packages/tgui_ch/interfaces/TelecommsMachineBrowser.js
index 9af1b33712..9f2cd00255 100644
--- a/tgui/packages/tgui_ch/interfaces/TelecommsMachineBrowser.js
+++ b/tgui/packages/tgui_ch/interfaces/TelecommsMachineBrowser.js
@@ -12,11 +12,17 @@ export const TelecommsMachineBrowser = (props, context) => {
     <Window width={575} height={450} resizable>
       <Window.Content scrollable>
         {temp ? (
-          <NoticeBox danger={temp.color === 'bad'} warning={temp.color !== 'bad'}>
+          <NoticeBox
+            danger={temp.color === 'bad'}
+            warning={temp.color !== 'bad'}>
             <Box display="inline-box" verticalAlign="middle">
               {temp.text}
             </Box>
-            <Button icon="times-circle" float="right" onClick={() => act('cleartemp')} />
+            <Button
+              icon="times-circle"
+              float="right"
+              onClick={() => act('cleartemp')}
+            />
             <Box clear="both" />
           </NoticeBox>
         ) : null}
@@ -26,7 +32,11 @@ export const TelecommsMachineBrowser = (props, context) => {
               label="Current Network"
               buttons={
                 <Fragment>
-                  <Button icon="search" content="Probe Network" onClick={() => act('scan')} />
+                  <Button
+                    icon="search"
+                    content="Probe Network"
+                    onClick={() => act('scan')}
+                  />
                   <Button
                     color="bad"
                     icon="exclamation-triangle"
@@ -36,21 +46,31 @@ export const TelecommsMachineBrowser = (props, context) => {
                   />
                 </Fragment>
               }>
-              <Button content={network} icon="pen" onClick={() => act('network')} />
+              <Button
+                content={network}
+                icon="pen"
+                onClick={() => act('network')}
+              />
             </LabeledList.Item>
           </LabeledList>
         </Section>
         {machinelist && machinelist.length ? (
           <TelecommsBrowser
             title={
-              selectedMachine ? selectedMachine.name + ' (' + selectedMachine.id + ')' : 'Detected Network Entities'
+              selectedMachine
+                ? selectedMachine.name + ' (' + selectedMachine.id + ')'
+                : 'Detected Network Entities'
             }
             list={selectedMachine ? selectedMachine.links : machinelist}
             showBack={selectedMachine}
           />
         ) : (
           <Section title="No Devices Found">
-            <Button icon="search" content="Probe Network" onClick={() => act('scan')} />
+            <Button
+              icon="search"
+              content="Probe Network"
+              onClick={() => act('scan')}
+            />
           </Section>
         )}
       </Window.Content>
@@ -66,15 +86,29 @@ const TelecommsBrowser = (props, context) => {
   return (
     <Section
       title={title}
-      buttons={showBack && <Button icon="undo" content="Back to Main Menu" onClick={() => act('mainmenu')} />}>
+      buttons={
+        showBack && (
+          <Button
+            icon="undo"
+            content="Back to Main Menu"
+            onClick={() => act('mainmenu')}
+          />
+        )
+      }>
       <Box color="label">
         <u>Linked entities</u>
       </Box>
       <LabeledList>
         {list.length ? (
           list.map((machine) => (
-            <LabeledList.Item key={machine.id} label={machine.name + ' (' + machine.id + ')'}>
-              <Button content="View" icon="eye" onClick={() => act('view', { id: machine.id })} />
+            <LabeledList.Item
+              key={machine.id}
+              label={machine.name + ' (' + machine.id + ')'}>
+              <Button
+                content="View"
+                icon="eye"
+                onClick={() => act('view', { id: machine.id })}
+              />
             </LabeledList.Item>
           ))
         ) : (
diff --git a/tgui/packages/tgui_ch/interfaces/TelecommsMultitoolMenu.js b/tgui/packages/tgui_ch/interfaces/TelecommsMultitoolMenu.js
index dd37578b7a..ffe6e2e221 100644
--- a/tgui/packages/tgui_ch/interfaces/TelecommsMultitoolMenu.js
+++ b/tgui/packages/tgui_ch/interfaces/TelecommsMultitoolMenu.js
@@ -54,7 +54,14 @@ const TelecommsMultitoolMenuStatus = (props, context) => {
   return (
     <Section
       title="Status"
-      buttons={<Button icon="power-off" selected={on} content={on ? 'On' : 'Off'} onClick={() => act('toggle')} />}>
+      buttons={
+        <Button
+          icon="power-off"
+          selected={on}
+          content={on ? 'On' : 'Off'}
+          onClick={() => act('toggle')}
+        />
+      }>
       <LabeledList>
         <LabeledList.Item label="Identification String">
           <Button icon="pen" content={id} onClick={() => act('id')} />
@@ -62,8 +69,12 @@ const TelecommsMultitoolMenuStatus = (props, context) => {
         <LabeledList.Item label="Network">
           <Button icon="pen" content={network} onClick={() => act('network')} />
         </LabeledList.Item>
-        <LabeledList.Item label="Prefabrication">{autolinkers ? 'TRUE' : 'FALSE'}</LabeledList.Item>
-        {shadowlink ? <LabeledList.Item label="Shadow Link">Active.</LabeledList.Item> : null}
+        <LabeledList.Item label="Prefabrication">
+          {autolinkers ? 'TRUE' : 'FALSE'}
+        </LabeledList.Item>
+        {shadowlink ? (
+          <LabeledList.Item label="Shadow Link">Active.</LabeledList.Item>
+        ) : null}
         {multitool ? (
           <LabeledList.Item label="Multitool Buffer">
             {multitool_buffer ? (
@@ -73,11 +84,24 @@ const TelecommsMultitoolMenuStatus = (props, context) => {
             ) : null}
             <Button
               color={multitool_buffer ? 'green' : null}
-              content={multitool_buffer ? 'Link (' + multitool_buffer.id + ')' : 'Add Machine'}
+              content={
+                multitool_buffer
+                  ? 'Link (' + multitool_buffer.id + ')'
+                  : 'Add Machine'
+              }
               icon={multitool_buffer ? 'link' : 'plus'}
-              onClick={multitool_buffer ? () => act('link') : () => act('buffer')}
+              onClick={
+                multitool_buffer ? () => act('link') : () => act('buffer')
+              }
             />
-            {multitool_buffer ? <Button color="red" content="Flush" icon="trash" onClick={() => act('flush')} /> : null}
+            {multitool_buffer ? (
+              <Button
+                color="red"
+                content="Flush"
+                icon="trash"
+                onClick={() => act('flush')}
+              />
+            ) : null}
           </LabeledList.Item>
         ) : null}
       </LabeledList>
@@ -88,7 +112,11 @@ const TelecommsMultitoolMenuStatus = (props, context) => {
               key={link.ref}
               label={link.ref + ' ' + link.name + ' (' + link.id + ')'}
               buttons={
-                <Button.Confirm color="red" icon="trash" onClick={() => act('unlink', { unlink: link.index })} />
+                <Button.Confirm
+                  color="red"
+                  icon="trash"
+                  onClick={() => act('unlink', { unlink: link.index })}
+                />
               }
             />
           ))}
@@ -105,7 +133,9 @@ const TelecommsMultitoolMenuStatus = (props, context) => {
             onClick={() => act('delete', { delete: f.freq })}
           />
         ))}
-        {!filter || filter.length === 0 ? <Box color="label">No filters.</Box> : null}
+        {!filter || filter.length === 0 ? (
+          <Box color="label">No filters.</Box>
+        ) : null}
       </Section>
     </Section>
   );
@@ -188,7 +218,8 @@ const TelecommsMultitoolMenuPolymorphicOptions = (props, context) => {
           </LabeledList.Item>
         ) : null}
         {use_broadcast_range || use_receive_range ? (
-          <LabeledList.Item label={(use_broadcast_range ? 'Broadcast' : 'Receive') + ' Range'}>
+          <LabeledList.Item
+            label={(use_broadcast_range ? 'Broadcast' : 'Receive') + ' Range'}>
             <NumberInput
               value={range}
               minValue={minRange}
diff --git a/tgui/packages/tgui_ch/interfaces/Teleporter.tsx b/tgui/packages/tgui_ch/interfaces/Teleporter.tsx
index 443db4a955..d4ddcd3936 100644
--- a/tgui/packages/tgui_ch/interfaces/Teleporter.tsx
+++ b/tgui/packages/tgui_ch/interfaces/Teleporter.tsx
@@ -14,7 +14,13 @@ type Data = {
 export const Teleporter = (props, context) => {
   const { act, data } = useBackend<Data>(context);
 
-  const { locked_name, station_connected, hub_connected, calibrated, teleporter_on } = data;
+  const {
+    locked_name,
+    station_connected,
+    hub_connected,
+    calibrated,
+    teleporter_on,
+  } = data;
 
   return (
     <Window width={300} height={200} resizable>
@@ -22,7 +28,12 @@ export const Teleporter = (props, context) => {
         <Section>
           <LabeledList>
             <LabeledList.Item label="Target">
-              <Button fluid icon="bullseye" onClick={() => act('select_target')} content={locked_name} />
+              <Button
+                fluid
+                icon="bullseye"
+                onClick={() => act('select_target')}
+                content={locked_name}
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Calibrated">
               <Button.Checkbox
@@ -42,8 +53,12 @@ export const Teleporter = (props, context) => {
                 content={teleporter_on ? 'Online' : 'OFFLINE'}
               />
             </LabeledList.Item>
-            <LabeledList.Item label="Station">{station_connected ? 'Connected' : 'Not Connected'}</LabeledList.Item>
-            <LabeledList.Item label="Hub">{hub_connected ? 'Connected' : 'Not Connected'}</LabeledList.Item>
+            <LabeledList.Item label="Station">
+              {station_connected ? 'Connected' : 'Not Connected'}
+            </LabeledList.Item>
+            <LabeledList.Item label="Hub">
+              {hub_connected ? 'Connected' : 'Not Connected'}
+            </LabeledList.Item>
           </LabeledList>
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui_ch/interfaces/TelesciConsole.js b/tgui/packages/tgui_ch/interfaces/TelesciConsole.js
index 23bca8a8f5..17354b14e7 100644
--- a/tgui/packages/tgui_ch/interfaces/TelesciConsole.js
+++ b/tgui/packages/tgui_ch/interfaces/TelesciConsole.js
@@ -48,11 +48,19 @@ export const TelesciConsoleContent = (props, context) => {
   return (
     <Section
       title="Telepad Controls"
-      buttons={<Button icon="eject" disabled={!insertedGps} onClick={() => act('ejectGPS')} content="Eject GPS" />}>
+      buttons={
+        <Button
+          icon="eject"
+          disabled={!insertedGps}
+          onClick={() => act('ejectGPS')}
+          content="Eject GPS"
+        />
+      }>
       <NoticeBox info>
         {(cooldown && (
           <Box>
-            Telepad is recharging. Please wait <AnimatedNumber value={cooldown} /> seconds.
+            Telepad is recharging. Please wait{' '}
+            <AnimatedNumber value={cooldown} /> seconds.
           </Box>
         )) || <Box>{tempMsg}</Box>}
       </NoticeBox>
@@ -92,9 +100,24 @@ export const TelesciConsoleContent = (props, context) => {
           ))}
         </LabeledList.Item>
         <LabeledList.Item label="Controls">
-          <Button icon="share" iconRotation={-90} onClick={() => act('send')} content="Send" />
-          <Button icon="share" iconRotation={90} onClick={() => act('receive')} content="Receive" />
-          <Button icon="sync" iconRotation={90} onClick={() => act('recal')} content="Recalibrate" />
+          <Button
+            icon="share"
+            iconRotation={-90}
+            onClick={() => act('send')}
+            content="Send"
+          />
+          <Button
+            icon="share"
+            iconRotation={90}
+            onClick={() => act('receive')}
+            content="Receive"
+          />
+          <Button
+            icon="sync"
+            iconRotation={90}
+            onClick={() => act('recal')}
+            content="Recalibrate"
+          />
         </LabeledList.Item>
       </LabeledList>
       {(lastTeleData && (
@@ -103,8 +126,12 @@ export const TelesciConsoleContent = (props, context) => {
             <LabeledList.Item label="Telepad Location">
               {lastTeleData.src_x}, {lastTeleData.src_y}
             </LabeledList.Item>
-            <LabeledList.Item label="Distance">{lastTeleData.distance}m</LabeledList.Item>
-            <LabeledList.Item label="Transit Time">{lastTeleData.time} secs</LabeledList.Item>
+            <LabeledList.Item label="Distance">
+              {lastTeleData.distance}m
+            </LabeledList.Item>
+            <LabeledList.Item label="Transit Time">
+              {lastTeleData.time} secs
+            </LabeledList.Item>
           </LabeledList>
         </Section>
       )) || <Section mt={1}>No teleport data found.</Section>}
diff --git a/tgui/packages/tgui_ch/interfaces/TextInputModal.tsx b/tgui/packages/tgui_ch/interfaces/TextInputModal.tsx
index 2224434f7a..e90a50ffb6 100644
--- a/tgui/packages/tgui_ch/interfaces/TextInputModal.tsx
+++ b/tgui/packages/tgui_ch/interfaces/TextInputModal.tsx
@@ -26,13 +26,27 @@ export const removeAllSkiplines = (toSanitize: string) => {
 
 export const TextInputModal = (props, context) => {
   const { act, data } = useBackend<TextInputData>(context);
-  const { large_buttons, max_length, message = '', multiline, placeholder, timeout, title } = data;
-  const [input, setInput] = useLocalState<string>(context, 'input', placeholder || '');
+  const {
+    large_buttons,
+    max_length,
+    message = '',
+    multiline,
+    placeholder,
+    timeout,
+    title,
+  } = data;
+  const [input, setInput] = useLocalState<string>(
+    context,
+    'input',
+    placeholder || ''
+  );
   const onType = (value: string) => {
     if (value === input) {
       return;
     }
-    const sanitizedInput = multiline ? sanitizeMultiline(value) : removeAllSkiplines(value);
+    const sanitizedInput = multiline
+      ? sanitizeMultiline(value)
+      : removeAllSkiplines(value);
     setInput(sanitizedInput);
   };
 
@@ -67,7 +81,10 @@ export const TextInputModal = (props, context) => {
               <InputArea input={input} onType={onType} />
             </Stack.Item>
             <Stack.Item>
-              <InputButtons input={input} message={`${input.length}/${max_length}`} />
+              <InputButtons
+                input={input}
+                message={`${input.length}/${max_length}`}
+              />
             </Stack.Item>
           </Stack>
         </Section>
diff --git a/tgui/packages/tgui_ch/interfaces/TimeClock.js b/tgui/packages/tgui_ch/interfaces/TimeClock.js
index e2d3ef0c11..76934f5366 100644
--- a/tgui/packages/tgui_ch/interfaces/TimeClock.js
+++ b/tgui/packages/tgui_ch/interfaces/TimeClock.js
@@ -8,15 +8,23 @@ import { RankIcon } from './common/RankIcon';
 export const TimeClock = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { department_hours, user_name, card, assignment, job_datum, allow_change_job, job_choices } = data;
+  const {
+    department_hours,
+    user_name,
+    card,
+    assignment,
+    job_datum,
+    allow_change_job,
+    job_choices,
+  } = data;
 
   return (
     <Window width={500} height={520} resizable>
       <Window.Content scrollable>
         <Section title="OOC">
           <NoticeBox>
-            OOC Note: PTO acquired is account-wide and shared across all characters. Info listed below is not IC
-            information.
+            OOC Note: PTO acquired is account-wide and shared across all
+            characters. Info listed below is not IC information.
           </NoticeBox>
           <Section level={2} title={'Time Off Balance for ' + user_name}>
             <LabeledList>
@@ -24,8 +32,15 @@ export const TimeClock = (props, context) => {
                 <LabeledList.Item
                   key={key}
                   label={key}
-                  color={department_hours[key] > 6 ? 'good' : department_hours[key] > 1 ? 'average' : 'bad'}>
-                  {toFixed(department_hours[key], 1)} {department_hours[key] === 1 ? 'hour' : 'hours'}
+                  color={
+                    department_hours[key] > 6
+                      ? 'good'
+                      : department_hours[key] > 1
+                        ? 'average'
+                        : 'bad'
+                  }>
+                  {toFixed(department_hours[key], 1)}{' '}
+                  {department_hours[key] === 1 ? 'hour' : 'hours'}
                 </LabeledList.Item>
               ))}
             </LabeledList>
@@ -56,26 +71,45 @@ export const TimeClock = (props, context) => {
                     </Flex>
                   </Box>
                 </LabeledList.Item>
-                <LabeledList.Item label="Departments">{job_datum.departments}</LabeledList.Item>
-                <LabeledList.Item label="Pay Scale">{job_datum.economic_modifier}</LabeledList.Item>
+                <LabeledList.Item label="Departments">
+                  {job_datum.departments}
+                </LabeledList.Item>
+                <LabeledList.Item label="Pay Scale">
+                  {job_datum.economic_modifier}
+                </LabeledList.Item>
                 <LabeledList.Item label="PTO Elegibility">
-                  {(job_datum.timeoff_factor > 0 && <Box>Earns PTO - {job_datum.pto_department}</Box>) ||
-                    (job_datum.timeoff_factor < 0 && <Box>Requires PTO - {job_datum.pto_department}</Box>) || (
-                      <Box>Neutral</Box>
-                    )}
+                  {(job_datum.timeoff_factor > 0 && (
+                    <Box>Earns PTO - {job_datum.pto_department}</Box>
+                  )) ||
+                    (job_datum.timeoff_factor < 0 && (
+                      <Box>Requires PTO - {job_datum.pto_department}</Box>
+                    )) || <Box>Neutral</Box>}
                 </LabeledList.Item>
               </Fragment>
             )}
           </LabeledList>
         </Section>
-        {!!(allow_change_job && job_datum && job_datum.timeoff_factor !== 0 && assignment !== 'Dismissed') && (
+        {!!(
+          allow_change_job &&
+          job_datum &&
+          job_datum.timeoff_factor !== 0 &&
+          assignment !== 'Dismissed'
+        ) && (
           <Section title="Employment Actions">
             {(job_datum.timeoff_factor > 0 &&
               ((department_hours[job_datum.pto_department] > 0 && (
-                <Button fluid icon="exclamation-triangle" onClick={() => act('switch-to-offduty')}>
+                <Button
+                  fluid
+                  icon="exclamation-triangle"
+                  onClick={() => act('switch-to-offduty')}>
                   Go Off-Duty
                 </Button>
-              )) || <Box color="bad">Warning: You do not have enough accrued time off to go off-duty.</Box>)) ||
+              )) || (
+                <Box color="bad">
+                  Warning: You do not have enough accrued time off to go
+                  off-duty.
+                </Box>
+              ))) ||
               (Object.keys(job_choices).length &&
                 Object.keys(job_choices).map((job) => {
                   let alt_titles = job_choices[job];
@@ -93,7 +127,9 @@ export const TimeClock = (props, context) => {
                       {title}
                     </Button>
                   ));
-                })) || <Box color="bad">No Open Positions - See Head Of Personnel</Box>}
+                })) || (
+                <Box color="bad">No Open Positions - See Head Of Personnel</Box>
+              )}
           </Section>
         )}
       </Window.Content>
diff --git a/tgui/packages/tgui_ch/interfaces/TraitTutorial.tsx b/tgui/packages/tgui_ch/interfaces/TraitTutorial.tsx
index 8f0e22617a..17c243b5f3 100644
--- a/tgui/packages/tgui_ch/interfaces/TraitTutorial.tsx
+++ b/tgui/packages/tgui_ch/interfaces/TraitTutorial.tsx
@@ -36,7 +36,10 @@ export const TraitSelection = (props, context) => {
         <Section title="Trait Selection" scrollable>
           <Tabs vertical scrollable>
             {names.map((name) => (
-              <Tabs.Tab key={name} selected={name === selection} onClick={() => act('select_trait', { name })}>
+              <Tabs.Tab
+                key={name}
+                selected={name === selection}
+                onClick={() => act('select_trait', { name })}>
                 <Box inline>{name}</Box>
               </Tabs.Tab>
             ))}
@@ -74,7 +77,11 @@ export const TraitDescription = (props, context) => {
       <b>Details & How to Use:</b>
       <br />
       <br />
-      <div dangerouslySetInnerHTML={{ __html: tutorials[name] as unknown as string }} />
+      <div
+        dangerouslySetInnerHTML={{
+          __html: tutorials[name] as unknown as string,
+        }}
+      />
     </Section>
   );
 };
diff --git a/tgui/packages/tgui_ch/interfaces/TransferValve.tsx b/tgui/packages/tgui_ch/interfaces/TransferValve.tsx
index b9b3417b5b..619c1fa761 100644
--- a/tgui/packages/tgui_ch/interfaces/TransferValve.tsx
+++ b/tgui/packages/tgui_ch/interfaces/TransferValve.tsx
@@ -59,7 +59,12 @@ export const TransferValve = (props, context) => {
           <LabeledList>
             {tank_one ? (
               <LabeledList.Item label="Attachment">
-                <Button icon="eject" content={tank_one} disabled={!tank_one} onClick={() => act('tankone')} />
+                <Button
+                  icon="eject"
+                  content={tank_one}
+                  disabled={!tank_one}
+                  onClick={() => act('tankone')}
+                />
               </LabeledList.Item>
             ) : (
               <NoticeBox textAlign="center">Attach Tank</NoticeBox>
@@ -70,7 +75,12 @@ export const TransferValve = (props, context) => {
           <LabeledList>
             {tank_two ? (
               <LabeledList.Item label="Attachment">
-                <Button icon="eject" content={tank_two} disabled={!tank_two} onClick={() => act('tanktwo')} />
+                <Button
+                  icon="eject"
+                  content={tank_two}
+                  disabled={!tank_two}
+                  onClick={() => act('tanktwo')}
+                />
               </LabeledList.Item>
             ) : (
               <NoticeBox textAlign="center">Attach Tank</NoticeBox>
diff --git a/tgui/packages/tgui_ch/interfaces/TurbineControl.js b/tgui/packages/tgui_ch/interfaces/TurbineControl.js
index 82572a717f..d8ebe9bad0 100644
--- a/tgui/packages/tgui_ch/interfaces/TurbineControl.js
+++ b/tgui/packages/tgui_ch/interfaces/TurbineControl.js
@@ -6,7 +6,17 @@ import { Window } from '../layouts';
 export const TurbineControl = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { connected, compressor_broke, turbine_broke, broken, door_status, online, power, rpm, temp } = data;
+  const {
+    connected,
+    compressor_broke,
+    turbine_broke,
+    broken,
+    door_status,
+    online,
+    power,
+    rpm,
+    temp,
+  } = data;
 
   return (
     <Window width={520} height={440} resizable>
@@ -17,17 +27,27 @@ export const TurbineControl = (props, context) => {
               {(broken && (
                 <Box color="bad">
                   Setup is broken
-                  <Button icon="sync" onClick={() => act('reconnect')} content="Reconnect" />
+                  <Button
+                    icon="sync"
+                    onClick={() => act('reconnect')}
+                    content="Reconnect"
+                  />
                 </Box>
               )) || (
                 <Box color={online ? 'good' : 'bad'}>
-                  {online && !compressor_broke && !turbine_broke ? 'Online' : 'Offline'}
+                  {online && !compressor_broke && !turbine_broke
+                    ? 'Online'
+                    : 'Offline'}
                 </Box>
               )}
             </LabeledList.Item>
             <LabeledList.Item label="Compressor">
-              {(compressor_broke && <Box color="bad">Compressor is inoperable.</Box>) ||
-                (turbine_broke && <Box color="bad">Turbine is inoperable.</Box>) || (
+              {(compressor_broke && (
+                <Box color="bad">Compressor is inoperable.</Box>
+              )) ||
+                (turbine_broke && (
+                  <Box color="bad">Turbine is inoperable.</Box>
+                )) || (
                   <Box>
                     <Button.Checkbox
                       checked={online}
@@ -55,7 +75,14 @@ export const TurbineControl = (props, context) => {
               {broken ? '--' : <AnimatedNumber value={temp} />} K
             </LabeledList.Item>
             <LabeledList.Item label="Generated Power">
-              {broken ? '--' : <AnimatedNumber format={(v) => formatPower(v)} value={Number(power)} />}
+              {broken ? (
+                '--'
+              ) : (
+                <AnimatedNumber
+                  format={(v) => formatPower(v)}
+                  value={Number(power)}
+                />
+              )}
             </LabeledList.Item>
           </LabeledList>
         </Section>
diff --git a/tgui/packages/tgui_ch/interfaces/Turbolift.js b/tgui/packages/tgui_ch/interfaces/Turbolift.js
index 162e19eaeb..25150e9615 100644
--- a/tgui/packages/tgui_ch/interfaces/Turbolift.js
+++ b/tgui/packages/tgui_ch/interfaces/Turbolift.js
@@ -18,7 +18,13 @@ export const Turbolift = (props, context) => {
             <Fragment>
               <Button
                 icon={doors_open ? 'door-open' : 'door-closed'}
-                content={doors_open ? (fire_mode ? 'Close Doors (SAFETY OFF)' : 'Doors Open') : 'Doors Closed'}
+                content={
+                  doors_open
+                    ? fire_mode
+                      ? 'Close Doors (SAFETY OFF)'
+                      : 'Doors Open'
+                    : 'Doors Closed'
+                }
                 selected={doors_open && !fire_mode}
                 color={fire_mode ? 'red' : null}
                 onClick={() => act('toggle_doors')}
@@ -32,7 +38,11 @@ export const Turbolift = (props, context) => {
             </Fragment>
           }>
           {!fire_mode || (
-            <Section className="Section--elevator--fire" textAlign="center" title="FIREFIGHTER MODE ENGAGED" />
+            <Section
+              className="Section--elevator--fire"
+              textAlign="center"
+              title="FIREFIGHTER MODE ENGAGED"
+            />
           )}
           <Flex wrap="wrap">
             {floors.map((floor) => (
@@ -44,7 +54,15 @@ export const Turbolift = (props, context) => {
                   <Flex.Item basis="8%" textAlign="left">
                     <Button
                       icon="circle"
-                      color={floor.current ? 'red' : floor.target ? 'green' : floor.queued ? 'yellow' : null}
+                      color={
+                        floor.current
+                          ? 'red'
+                          : floor.target
+                            ? 'green'
+                            : floor.queued
+                              ? 'yellow'
+                              : null
+                      }
                       onClick={() => act('move_to_floor', { ref: floor.ref })}
                     />
                   </Flex.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/Uplink.js b/tgui/packages/tgui_ch/interfaces/Uplink.js
index d482da1e6f..ed996f311f 100644
--- a/tgui/packages/tgui_ch/interfaces/Uplink.js
+++ b/tgui/packages/tgui_ch/interfaces/Uplink.js
@@ -17,8 +17,12 @@ export const Uplink = (props, context) => {
     <Window width={620} height={580} theme="syndicate" resizable>
       <Window.Content scrollable>
         <UplinkHeader screen={screen} setScreen={setScreen} />
-        {(screen === 0 && <GenericUplink currencyAmount={telecrystals} currencySymbol="TC" />) ||
-          (screen === 1 && <ExploitableInformation />) || <Section color="bad">Error</Section>}
+        {(screen === 0 && (
+          <GenericUplink currencyAmount={telecrystals} currencySymbol="TC" />
+        )) ||
+          (screen === 1 && <ExploitableInformation />) || (
+            <Section color="bad">Error</Section>
+          )}
       </Window.Content>
     </Window>
   );
@@ -48,7 +52,8 @@ const UplinkHeader = (props, context) => {
       <Section title="Item Discount" level={2}>
         {(discount_amount < 100 && (
           <Box>
-            {discount_name} - {discount_amount}% off. Offer expires at: {offer_expiry}
+            {discount_name} - {discount_amount}% off. Offer expires at:{' '}
+            {offer_expiry}
           </Box>
         )) || <Box>No items currently discounted.</Box>}
       </Section>
@@ -64,22 +69,46 @@ const ExploitableInformation = (props, context) => {
   return (
     <Section
       title="Exploitable Information"
-      buttons={exploit && <Button icon="undo" content="Back" onClick={() => act('view_exploits', { id: 0 })} />}>
+      buttons={
+        exploit && (
+          <Button
+            icon="undo"
+            content="Back"
+            onClick={() => act('view_exploits', { id: 0 })}
+          />
+        )
+      }>
       {(exploit && (
         <Box>
           <LabeledList>
             <LabeledList.Item label="Name">{exploit.name}</LabeledList.Item>
             <LabeledList.Item label="Sex">{exploit.sex}</LabeledList.Item>
-            <LabeledList.Item label="Species">{exploit.species}</LabeledList.Item>
+            <LabeledList.Item label="Species">
+              {exploit.species}
+            </LabeledList.Item>
             <LabeledList.Item label="Age">{exploit.age}</LabeledList.Item>
             <LabeledList.Item label="Rank">{exploit.rank}</LabeledList.Item>
-            <LabeledList.Item label="Home System">{exploit.home_system}</LabeledList.Item>
-            <LabeledList.Item label="Birthplace">{exploit.birthplace}</LabeledList.Item>
-            <LabeledList.Item label="Citizenship">{exploit.citizenship}</LabeledList.Item>
-            <LabeledList.Item label="Faction">{exploit.faction}</LabeledList.Item>
-            <LabeledList.Item label="Religion">{exploit.religion}</LabeledList.Item>
-            <LabeledList.Item label="Fingerprint">{exploit.fingerprint}</LabeledList.Item>
-            <LabeledList.Item label="Other Affiliations">{exploit.antagfaction}</LabeledList.Item>
+            <LabeledList.Item label="Home System">
+              {exploit.home_system}
+            </LabeledList.Item>
+            <LabeledList.Item label="Birthplace">
+              {exploit.birthplace}
+            </LabeledList.Item>
+            <LabeledList.Item label="Citizenship">
+              {exploit.citizenship}
+            </LabeledList.Item>
+            <LabeledList.Item label="Faction">
+              {exploit.faction}
+            </LabeledList.Item>
+            <LabeledList.Item label="Religion">
+              {exploit.religion}
+            </LabeledList.Item>
+            <LabeledList.Item label="Fingerprint">
+              {exploit.fingerprint}
+            </LabeledList.Item>
+            <LabeledList.Item label="Other Affiliations">
+              {exploit.antagfaction}
+            </LabeledList.Item>
             <LabeledList.Divider />
             <LabeledList.Item>Acquired Information</LabeledList.Item>
             <LabeledList.Item label="Notes">
@@ -108,7 +137,11 @@ export const GenericUplink = (props, context) => {
   const { act, data } = useBackend(context);
   const { compactMode, lockable, categories = [] } = data;
   const [searchText, setSearchText] = useLocalState(context, 'searchText', '');
-  const [selectedCategory, setSelectedCategory] = useLocalState(context, 'category', categories[0]?.name);
+  const [selectedCategory, setSelectedCategory] = useLocalState(
+    context,
+    'category',
+    categories[0]?.name
+  );
   const testSearch = createSearch(searchText, (item) => {
     return item.name + item.desc;
   });
@@ -133,13 +166,20 @@ export const GenericUplink = (props, context) => {
       buttons={
         <Fragment>
           Search
-          <Input autoFocus value={searchText} onInput={(e, value) => setSearchText(value)} mx={1} />
+          <Input
+            autoFocus
+            value={searchText}
+            onInput={(e, value) => setSearchText(value)}
+            mx={1}
+          />
           <Button
             icon={compactMode ? 'list' : 'info'}
             content={compactMode ? 'Compact' : 'Detailed'}
             onClick={() => act('compact_toggle')}
           />
-          {!!lockable && <Button icon="lock" content="Lock" onClick={() => act('lock')} />}
+          {!!lockable && (
+            <Button icon="lock" content="Lock" onClick={() => act('lock')} />
+          )}
         </Fragment>
       }>
       <Flex>
@@ -159,7 +199,11 @@ export const GenericUplink = (props, context) => {
         )}
         <Flex.Item grow={1} basis={0}>
           {items.length === 0 && (
-            <NoticeBox>{searchText.length === 0 ? 'No items in this category.' : 'No results found.'}</NoticeBox>
+            <NoticeBox>
+              {searchText.length === 0
+                ? 'No items in this category.'
+                : 'No results found.'}
+            </NoticeBox>
           )}
           <ItemList
             compactMode={searchText.length > 0 || compactMode}
@@ -176,7 +220,11 @@ export const GenericUplink = (props, context) => {
 const ItemList = (props, context) => {
   const { compactMode, currencyAmount, currencySymbol } = props;
   const { act } = useBackend(context);
-  const [hoveredItem, setHoveredItem] = useLocalState(context, 'hoveredItem', {});
+  const [hoveredItem, setHoveredItem] = useLocalState(
+    context,
+    'hoveredItem',
+    {}
+  );
   const hoveredCost = (hoveredItem && hoveredItem.cost) || 0;
   // Append extra hover data to items
   const items = props.items.map((item) => {
diff --git a/tgui/packages/tgui_ch/interfaces/Vending.js b/tgui/packages/tgui_ch/interfaces/Vending.js
index d8e12d8fdd..2f16dfbcd7 100644
--- a/tgui/packages/tgui_ch/interfaces/Vending.js
+++ b/tgui/packages/tgui_ch/interfaces/Vending.js
@@ -25,12 +25,18 @@ const VendingRow = (props, context) => {
       <Table.Cell bold color={product.color}>
         <Box inline position="relative">
           {product.name}
-          {product.desc ? <Tooltip content={product.desc} position="right" /> : null}
+          {product.desc ? (
+            <Tooltip content={product.desc} position="right" />
+          ) : null}
         </Box>
       </Table.Cell>
       <Table.Cell collapsing textAlign="center">
         <Box
-          color={(product.amount <= 0 && 'bad') || (product.amount <= product.max_amount / 2 && 'average') || 'good'}>
+          color={
+            (product.amount <= 0 && 'bad') ||
+            (product.amount <= product.max_amount / 2 && 'average') ||
+            'good'
+          }>
           {product.amount} in stock
         </Box>
       </Table.Cell>
@@ -95,7 +101,13 @@ export const VendingProducts = (props, context) => {
       {!!coin && (
         <Section
           title={coin + ' deposited'}
-          buttons={<Button icon="eject" content="Eject Coin" onClick={() => act('remove_coin')} />}
+          buttons={
+            <Button
+              icon="eject"
+              content="Eject Coin"
+              onClick={() => act('remove_coin')}
+            />
+          }
         />
       )}
     </Fragment>
diff --git a/tgui/packages/tgui_ch/interfaces/VolumePanel.tsx b/tgui/packages/tgui_ch/interfaces/VolumePanel.tsx
index 6e3e9734ab..8b1884d732 100644
--- a/tgui/packages/tgui_ch/interfaces/VolumePanel.tsx
+++ b/tgui/packages/tgui_ch/interfaces/VolumePanel.tsx
@@ -23,9 +23,15 @@ export const VolumePanel = (props, context) => {
                   minValue={0}
                   maxValue={200}
                   value={volume_channels[key] * 100}
-                  onChange={(e, val) => act('adjust_volume', { channel: key, vol: val / 100 })}
+                  onChange={(e, val) =>
+                    act('adjust_volume', { channel: key, vol: val / 100 })
+                  }
+                />
+                <Button
+                  ml={1}
+                  icon="undo"
+                  onClick={() => act('adjust_volume', { channel: key, vol: 1 })}
                 />
-                <Button ml={1} icon="undo" onClick={() => act('adjust_volume', { channel: key, vol: 1 })} />
               </LabeledList.Item>
             ))}
           </LabeledList>
diff --git a/tgui/packages/tgui_ch/interfaces/VorePanel.js b/tgui/packages/tgui_ch/interfaces/VorePanel.js
index 1cedff8a44..88a90d77b7 100644
--- a/tgui/packages/tgui_ch/interfaces/VorePanel.js
+++ b/tgui/packages/tgui_ch/interfaces/VorePanel.js
@@ -185,7 +185,11 @@ export const VorePanel = (props, context) => {
             <Flex>
               <Flex.Item basis="90%">Warning: Unsaved Changes!</Flex.Item>
               <Flex.Item>
-                <Button content="Save Prefs" icon="save" onClick={() => act('saveprefs')} />
+                <Button
+                  content="Save Prefs"
+                  icon="save"
+                  onClick={() => act('saveprefs')}
+                />
               </Flex.Item>
               {/* CHOMPEdit - "Belly HTML Export Earlyport" */}
               <Flex.Item>
@@ -223,7 +227,8 @@ export const VorePanel = (props, context) => {
 const VoreInsidePanel = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { absorbed, belly_name, belly_mode, desc, pred, contents, ref } = data.inside;
+  const { absorbed, belly_name, belly_mode, desc, pred, contents, ref } =
+    data.inside;
 
   if (!belly_name) {
     return <Section title="Inside">You aren&apos;t inside anyone.</Section>;
@@ -291,7 +296,12 @@ const VoreBellySelectionAndCustomization = (props, context) => {
                 selected={belly.selected}
                 textColor={digestModeToColor[belly.digest_mode]}
                 onClick={() => act('bellypick', { bellypick: belly.ref })}>
-                <Box inline textColor={(belly.selected && digestModeToColor[belly.digest_mode]) || null}>
+                <Box
+                  inline
+                  textColor={
+                    (belly.selected && digestModeToColor[belly.digest_mode]) ||
+                    null
+                  }>
                   {belly.name} ({belly.contents})
                 </Box>
               </Tabs.Tab>
@@ -403,7 +413,10 @@ const VoreSelectedBellyControls = (props, context) => {
             />
           </Fragment>
         }>
-        <Button onClick={() => act('set_attribute', { attribute: 'b_name' })} content={belly_name} />
+        <Button
+          onClick={() => act('set_attribute', { attribute: 'b_name' })}
+          content={belly_name}
+        />
       </LabeledList.Item>
       <LabeledList.Item label="Mode">
         <Button
@@ -414,10 +427,17 @@ const VoreSelectedBellyControls = (props, context) => {
       </LabeledList.Item>
       <LabeledList.Item label="Mode Addons">
         {(addons.length && addons.join(', ')) || 'None'}
-        <Button onClick={() => act('set_attribute', { attribute: 'b_addons' })} ml={1} icon="plus" />
+        <Button
+          onClick={() => act('set_attribute', { attribute: 'b_addons' })}
+          ml={1}
+          icon="plus"
+        />
       </LabeledList.Item>
       <LabeledList.Item label="Item Mode">
-        <Button onClick={() => act('set_attribute', { attribute: 'b_item_mode' })} content={item_mode} />
+        <Button
+          onClick={() => act('set_attribute', { attribute: 'b_item_mode' })}
+          content={item_mode}
+        />
       </LabeledList.Item>
       <LabeledList.Item basis="100%" mt={1}>
         <Button.Confirm
@@ -444,124 +464,196 @@ const VoreSelectedBellyDescriptions = (props, context) => {
     <LabeledList>
       <LabeledList.Item
         label="Description"
-        buttons={<Button onClick={() => act('set_attribute', { attribute: 'b_desc' })} icon="pen" />}>
+        buttons={
+          <Button
+            onClick={() => act('set_attribute', { attribute: 'b_desc' })}
+            icon="pen"
+          />
+        }>
         {desc}
       </LabeledList.Item>
       <LabeledList.Item
         label="Description (Absorbed)"
-        buttons={<Button onClick={() => act('set_attribute', { attribute: 'b_absorbed_desc' })} icon="pen" />}>
+        buttons={
+          <Button
+            onClick={() =>
+              act('set_attribute', { attribute: 'b_absorbed_desc' })
+            }
+            icon="pen"
+          />
+        }>
         {absorbed_desc}
       </LabeledList.Item>
       <LabeledList.Item label="Vore Verb">
-        <Button onClick={() => act('set_attribute', { attribute: 'b_verb' })} content={verb} />
+        <Button
+          onClick={() => act('set_attribute', { attribute: 'b_verb' })}
+          content={verb}
+        />
       </LabeledList.Item>
       <LabeledList.Item label="Release Verb">
-        <Button onClick={() => act('set_attribute', { attribute: 'b_release_verb' })} content={release_verb} />
+        <Button
+          onClick={() => act('set_attribute', { attribute: 'b_release_verb' })}
+          content={release_verb}
+        />
       </LabeledList.Item>
       <LabeledList.Item label="Examine Messages">
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'em' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'em' })
+          }
           content="Examine Message (when full)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'ema' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'ema' })
+          }
           content="Examine Message (with absorbed victims)"
         />
       </LabeledList.Item>
       <LabeledList.Item label="Struggle Messages">
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'smo' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'smo' })
+          }
           content="Struggle Message (outside)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'smi' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'smi' })
+          }
           content="Struggle Message (inside)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'asmo' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'asmo' })
+          }
           content="Absorbed Struggle Message (outside)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'asmi' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'asmi' })
+          }
           content="Absorbed Struggle Message (inside)"
         />
       </LabeledList.Item>
       <LabeledList.Item label="Bellymode Messages">
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'dmp' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'dmp' })
+          }
           content="Digest Message (to prey)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'dmo' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'dmo' })
+          }
           content="Digest Message (to you)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'amp' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'amp' })
+          }
           content="Absorb Message (to prey)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'amo' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'amo' })
+          }
           content="Absorb Message (to you)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'uamp' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'uamp' })
+          }
           content="Unabsorb Message (to prey)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'uamo' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'uamo' })
+          }
           content="Unabsorb Message (to you)"
         />
       </LabeledList.Item>
       <LabeledList.Item label="Idle Messages">
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_hold' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_hold' })
+          }
           content="Idle Messages (Hold)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_holdabsorbed' })}
+          onClick={() =>
+            act('set_attribute', {
+              attribute: 'b_msgs',
+              msgtype: 'im_holdabsorbed',
+            })
+          }
           content="Idle Messages (Hold Absorbed)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_digest' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_digest' })
+          }
           content="Idle Messages (Digest)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_absorb' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_absorb' })
+          }
           content="Idle Messages (Absorb)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_unabsorb' })}
+          onClick={() =>
+            act('set_attribute', {
+              attribute: 'b_msgs',
+              msgtype: 'im_unabsorb',
+            })
+          }
           content="Idle Messages (Unabsorb)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_drain' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_drain' })
+          }
           content="Idle Messages (Drain)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_heal' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_heal' })
+          }
           content="Idle Messages (Heal)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_steal' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_steal' })
+          }
           content="Idle Messages (Size Steal)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_shrink' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_shrink' })
+          }
           content="Idle Messages (Shrink)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_grow' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_grow' })
+          }
           content="Idle Messages (Grow)"
         />
         <Button
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_egg' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'im_egg' })
+          }
           content="Idle Messages (Encase In Egg)"
         />
       </LabeledList.Item>
       <LabeledList.Item label="Reset Messages">
         <Button
           color="red"
-          onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'reset' })}
+          onClick={() =>
+            act('set_attribute', { attribute: 'b_msgs', msgtype: 'reset' })
+          }
           content="Reset Messages"
         />
       </LabeledList.Item>
@@ -627,7 +719,9 @@ const VoreSelectedBellyOptions = (props, context) => {
           </LabeledList.Item>
           <LabeledList.Item label="Contaminates">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_contaminates' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_contaminates' })
+              }
               icon={contaminates ? 'toggle-on' : 'toggle-off'}
               selected={contaminates}
               content={contaminates ? 'Yes' : 'No'}
@@ -637,14 +731,20 @@ const VoreSelectedBellyOptions = (props, context) => {
             <Fragment>
               <LabeledList.Item label="Contamination Flavor">
                 <Button
-                  onClick={() => act('set_attribute', { attribute: 'b_contamination_flavor' })}
+                  onClick={() =>
+                    act('set_attribute', {
+                      attribute: 'b_contamination_flavor',
+                    })
+                  }
                   icon="pen"
                   content={contaminate_flavor}
                 />
               </LabeledList.Item>
               <LabeledList.Item label="Contamination Color">
                 <Button
-                  onClick={() => act('set_attribute', { attribute: 'b_contamination_color' })}
+                  onClick={() =>
+                    act('set_attribute', { attribute: 'b_contamination_color' })
+                  }
                   icon="pen"
                   content={capitalize(contaminate_color)}
                 />
@@ -654,19 +754,27 @@ const VoreSelectedBellyOptions = (props, context) => {
             null}
           <LabeledList.Item label="Nutritional Gain">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_nutritionpercent' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_nutritionpercent' })
+              }
               content={nutrition_percent + '%'}
             />
           </LabeledList.Item>
           <LabeledList.Item label="Required Examine Size">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_bulge_size' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_bulge_size' })
+              }
               content={bulge_size * 100 + '%'}
             />
           </LabeledList.Item>
           <LabeledList.Item label="Display Absorbed Examines">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_display_absorbed_examine' })}
+              onClick={() =>
+                act('set_attribute', {
+                  attribute: 'b_display_absorbed_examine',
+                })
+              }
               icon={display_absorbed_examine ? 'toggle-on' : 'toggle-off'}
               selected={display_absorbed_examine}
               content={display_absorbed_examine ? 'True' : 'False'}
@@ -674,14 +782,18 @@ const VoreSelectedBellyOptions = (props, context) => {
           </LabeledList.Item>
           <LabeledList.Item label="Toggle Vore Privacy">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_eating_privacy' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_eating_privacy' })
+              }
               content={capitalize(eating_privacy_local)}
             />
           </LabeledList.Item>
 
           <LabeledList.Item label="Save Digest Mode">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_save_digest_mode' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_save_digest_mode' })
+              }
               icon={save_digest_mode ? 'toggle-on' : 'toggle-off'}
               selected={save_digest_mode}
               content={save_digest_mode ? 'True' : 'False'}
@@ -694,7 +806,9 @@ const VoreSelectedBellyOptions = (props, context) => {
         <LabeledList>
           <LabeledList.Item label="Idle Emotes">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_emoteactive' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_emoteactive' })
+              }
               icon={emote_active ? 'toggle-on' : 'toggle-off'}
               selected={emote_active}
               content={emote_active ? 'Active' : 'Inactive'}
@@ -707,29 +821,48 @@ const VoreSelectedBellyOptions = (props, context) => {
             />
           </LabeledList.Item>
           <LabeledList.Item label="Digest Brute Damage">
-            <Button onClick={() => act('set_attribute', { attribute: 'b_brute_dmg' })} content={digest_brute} />
+            <Button
+              onClick={() => act('set_attribute', { attribute: 'b_brute_dmg' })}
+              content={digest_brute}
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Digest Burn Damage">
-            <Button onClick={() => act('set_attribute', { attribute: 'b_burn_dmg' })} content={digest_burn} />
+            <Button
+              onClick={() => act('set_attribute', { attribute: 'b_burn_dmg' })}
+              content={digest_burn}
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Digest Suffocation Damage">
-            <Button onClick={() => act('set_attribute', { attribute: 'b_oxy_dmg' })} content={digest_oxy} />
+            <Button
+              onClick={() => act('set_attribute', { attribute: 'b_oxy_dmg' })}
+              content={digest_oxy}
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Digest Toxins Damage">
-            <Button onClick={() => act('set_attribute', { attribute: 'b_tox_dmg' })} content={digest_tox} />
+            <Button
+              onClick={() => act('set_attribute', { attribute: 'b_tox_dmg' })}
+              content={digest_tox}
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Digest Clone Damage">
-            <Button onClick={() => act('set_attribute', { attribute: 'b_clone_dmg' })} content={digest_clone} />
+            <Button
+              onClick={() => act('set_attribute', { attribute: 'b_clone_dmg' })}
+              content={digest_clone}
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Shrink/Grow Size">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_grow_shrink' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_grow_shrink' })
+              }
               content={shrink_grow_size * 100 + '%'}
             />
           </LabeledList.Item>
           <LabeledList.Item label="Vore Spawn Blacklist">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_vorespawn_blacklist' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_vorespawn_blacklist' })
+              }
               icon={vorespawn_blacklist ? 'toggle-on' : 'toggle-off'}
               selected={vorespawn_blacklist}
               content={vorespawn_blacklist ? 'Yes' : 'No'}
@@ -751,7 +884,11 @@ const VoreSelectedBellyOptions = (props, context) => {
           </LabeledList.Item>
           <LabeledList.Item label="Selective Mode Preference">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_selective_mode_pref_toggle' })}
+              onClick={() =>
+                act('set_attribute', {
+                  attribute: 'b_selective_mode_pref_toggle',
+                })
+              }
               content={capitalize(selective_preference)}
             />
           </LabeledList.Item>
@@ -780,7 +917,9 @@ const VoreSelectedMobTypeBellyButtons = (props, context) => {
         <LabeledList>
           <LabeledList.Item label="Toggle Belly Overlay Mode">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_silicon_belly' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_silicon_belly' })
+              }
               content={capitalize(silicon_belly_overlay_preference)}
             />
           </LabeledList.Item>
@@ -796,7 +935,9 @@ const VoreSelectedMobTypeBellyButtons = (props, context) => {
           </LabeledList.Item>
           <LabeledList.Item label="Minimum Prey Size for Vorebelly">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_min_belly_prey_size' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_min_belly_prey_size' })
+              }
               content={overlay_min_prey_size * 100 + '%'}
             />
           </LabeledList.Item>
@@ -870,23 +1011,41 @@ const VoreSelectedBellySounds = (props, context) => {
           </LabeledList.Item>
           <LabeledList.Item label="Use Fancy Sounds">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_fancy_sound' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_fancy_sound' })
+              }
               icon={fancy ? 'toggle-on' : 'toggle-off'}
               selected={fancy}
               content={fancy ? 'Yes' : 'No'}
             />
           </LabeledList.Item>
           <LabeledList.Item label="Vore Sound">
-            <Button onClick={() => act('set_attribute', { attribute: 'b_sound' })} content={sound} />
-            <Button onClick={() => act('set_attribute', { attribute: 'b_soundtest' })} icon="volume-up" />
+            <Button
+              onClick={() => act('set_attribute', { attribute: 'b_sound' })}
+              content={sound}
+            />
+            <Button
+              onClick={() => act('set_attribute', { attribute: 'b_soundtest' })}
+              icon="volume-up"
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Release Sound">
-            <Button onClick={() => act('set_attribute', { attribute: 'b_release' })} content={release_sound} />
-            <Button onClick={() => act('set_attribute', { attribute: 'b_releasesoundtest' })} icon="volume-up" />
+            <Button
+              onClick={() => act('set_attribute', { attribute: 'b_release' })}
+              content={release_sound}
+            />
+            <Button
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_releasesoundtest' })
+              }
+              icon="volume-up"
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Sound Volume">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_sound_volume' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_sound_volume' })
+              }
               content={sound_volume + '%'}
             />
           </LabeledList.Item>
@@ -941,7 +1100,9 @@ const VoreSelectedBellyVisuals = (props, context) => {
           <LabeledList>
             <LabeledList.Item label="Affect Vore Sprites">
               <Button
-                onClick={() => act('set_attribute', { attribute: 'b_affects_vore_sprites' })}
+                onClick={() =>
+                  act('set_attribute', { attribute: 'b_affects_vore_sprites' })
+                }
                 icon={affects_voresprite ? 'toggle-on' : 'toggle-off'}
                 selected={affects_voresprite}
                 content={affects_voresprite ? 'Yes' : 'No'}
@@ -950,16 +1111,23 @@ const VoreSelectedBellyVisuals = (props, context) => {
             {affects_voresprite ? (
               <span>
                 <LabeledList.Item label="Vore Sprite Mode">
-                  {(vore_sprite_flags.length && vore_sprite_flags.join(', ')) || 'None'}
+                  {(vore_sprite_flags.length && vore_sprite_flags.join(', ')) ||
+                    'None'}
                   <Button
-                    onClick={() => act('set_attribute', { attribute: 'b_vore_sprite_flags' })}
+                    onClick={() =>
+                      act('set_attribute', { attribute: 'b_vore_sprite_flags' })
+                    }
                     ml={1}
                     icon="plus"
                   />
                 </LabeledList.Item>
                 <LabeledList.Item label="Count Absorbed prey for vore sprites">
                   <Button
-                    onClick={() => act('set_attribute', { attribute: 'b_count_absorbed_prey_for_sprites' })}
+                    onClick={() =>
+                      act('set_attribute', {
+                        attribute: 'b_count_absorbed_prey_for_sprites',
+                      })
+                    }
                     icon={absorbed_voresprite ? 'toggle-on' : 'toggle-off'}
                     selected={absorbed_voresprite}
                     content={absorbed_voresprite ? 'Yes' : 'No'}
@@ -967,13 +1135,21 @@ const VoreSelectedBellyVisuals = (props, context) => {
                 </LabeledList.Item>
                 <LabeledList.Item label="Absorbed Multiplier">
                   <Button
-                    onClick={() => act('set_attribute', { attribute: 'b_absorbed_multiplier' })}
+                    onClick={() =>
+                      act('set_attribute', {
+                        attribute: 'b_absorbed_multiplier',
+                      })
+                    }
                     content={absorbed_multiplier}
                   />
                 </LabeledList.Item>
                 <LabeledList.Item label="Count liquid reagents for vore sprites">
                   <Button
-                    onClick={() => act('set_attribute', { attribute: 'b_count_liquid_for_sprites' })}
+                    onClick={() =>
+                      act('set_attribute', {
+                        attribute: 'b_count_liquid_for_sprites',
+                      })
+                    }
                     icon={liquid_voresprite ? 'toggle-on' : 'toggle-off'}
                     selected={liquid_voresprite}
                     content={liquid_voresprite ? 'Yes' : 'No'}
@@ -981,13 +1157,19 @@ const VoreSelectedBellyVisuals = (props, context) => {
                 </LabeledList.Item>
                 <LabeledList.Item label="Liquid Multiplier">
                   <Button
-                    onClick={() => act('set_attribute', { attribute: 'b_liquid_multiplier' })}
+                    onClick={() =>
+                      act('set_attribute', { attribute: 'b_liquid_multiplier' })
+                    }
                     content={liquid_multiplier}
                   />
                 </LabeledList.Item>
                 <LabeledList.Item label="Count items for vore sprites">
                   <Button
-                    onClick={() => act('set_attribute', { attribute: 'b_count_items_for_sprites' })}
+                    onClick={() =>
+                      act('set_attribute', {
+                        attribute: 'b_count_items_for_sprites',
+                      })
+                    }
                     icon={item_voresprite ? 'toggle-on' : 'toggle-off'}
                     selected={item_voresprite}
                     content={item_voresprite ? 'Yes' : 'No'}
@@ -995,13 +1177,19 @@ const VoreSelectedBellyVisuals = (props, context) => {
                 </LabeledList.Item>
                 <LabeledList.Item label="Items Multiplier">
                   <Button
-                    onClick={() => act('set_attribute', { attribute: 'b_item_multiplier' })}
+                    onClick={() =>
+                      act('set_attribute', { attribute: 'b_item_multiplier' })
+                    }
                     content={item_multiplier}
                   />
                 </LabeledList.Item>
                 <LabeledList.Item label="Prey health affects vore sprites">
                   <Button
-                    onClick={() => act('set_attribute', { attribute: 'b_health_impacts_size' })}
+                    onClick={() =>
+                      act('set_attribute', {
+                        attribute: 'b_health_impacts_size',
+                      })
+                    }
                     icon={health_voresprite ? 'toggle-on' : 'toggle-off'}
                     selected={health_voresprite}
                     content={health_voresprite ? 'Yes' : 'No'}
@@ -1009,7 +1197,9 @@ const VoreSelectedBellyVisuals = (props, context) => {
                 </LabeledList.Item>
                 <LabeledList.Item label="Animation when prey resist">
                   <Button
-                    onClick={() => act('set_attribute', { attribute: 'b_resist_animation' })}
+                    onClick={() =>
+                      act('set_attribute', { attribute: 'b_resist_animation' })
+                    }
                     icon={resist_animation ? 'toggle-on' : 'toggle-off'}
                     selected={resist_animation}
                     content={resist_animation ? 'Yes' : 'No'}
@@ -1017,31 +1207,48 @@ const VoreSelectedBellyVisuals = (props, context) => {
                 </LabeledList.Item>
                 <LabeledList.Item label="Vore Sprite Size Factor">
                   <Button
-                    onClick={() => act('set_attribute', { attribute: 'b_size_factor_sprites' })}
+                    onClick={() =>
+                      act('set_attribute', {
+                        attribute: 'b_size_factor_sprites',
+                      })
+                    }
                     content={voresprite_size_factor}
                   />
                 </LabeledList.Item>
                 {belly_sprite_option_shown ? (
                   <LabeledList.Item label="Belly Sprite to affect">
                     <Button
-                      onClick={() => act('set_attribute', { attribute: 'b_belly_sprite_to_affect' })}
+                      onClick={() =>
+                        act('set_attribute', {
+                          attribute: 'b_belly_sprite_to_affect',
+                        })
+                      }
                       content={belly_sprite_to_affect}
                     />
                   </LabeledList.Item>
                 ) : (
                   ''
                 )}
-                {tail_option_shown && vore_sprite_flags.includes('Undergarment addition') ? (
+                {tail_option_shown &&
+                vore_sprite_flags.includes('Undergarment addition') ? (
                   <div>
                     <LabeledList.Item label="Undergarment type to affect">
                       <Button
-                        onClick={() => act('set_attribute', { attribute: 'b_undergarment_choice' })}
+                        onClick={() =>
+                          act('set_attribute', {
+                            attribute: 'b_undergarment_choice',
+                          })
+                        }
                         content={undergarment_chosen}
                       />
                     </LabeledList.Item>
                     <LabeledList.Item label="Undergarment if none equipped">
                       <Button
-                        onClick={() => act('set_attribute', { attribute: 'b_undergarment_if_none' })}
+                        onClick={() =>
+                          act('set_attribute', {
+                            attribute: 'b_undergarment_if_none',
+                          })
+                        }
                         content={undergarment_if_none}
                       />
                     </LabeledList.Item>
@@ -1055,10 +1262,15 @@ const VoreSelectedBellyVisuals = (props, context) => {
                 ) : (
                   ''
                 )}
-                {tail_option_shown && vore_sprite_flags.includes('Tail adjustment') ? (
+                {tail_option_shown &&
+                vore_sprite_flags.includes('Tail adjustment') ? (
                   <LabeledList.Item label="Tail to change to">
                     <Button
-                      onClick={() => act('set_attribute', { attribute: 'b_tail_to_change_to' })}
+                      onClick={() =>
+                        act('set_attribute', {
+                          attribute: 'b_tail_to_change_to',
+                        })
+                      }
                       content={tail_to_change_to}
                     />
                   </LabeledList.Item>
@@ -1098,20 +1310,37 @@ const VoreSelectedBellyVisuals = (props, context) => {
             back_color={belly_fullscreen_color4}
             name_of="4"
           />
-          <FeatureColorInput action_name="b_fullscreen_alpha" value_of={null} back_color="#FFFFFF" name_of="Alpha" />
+          <FeatureColorInput
+            action_name="b_fullscreen_alpha"
+            value_of={null}
+            back_color="#FFFFFF"
+            name_of="Alpha"
+          />
           <LabeledList.Item label="Enable Coloration">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_colorization_enabled' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_colorization_enabled' })
+              }
               icon={colorization_enabled ? 'toggle-on' : 'toggle-off'}
               selected={colorization_enabled}
               content={colorization_enabled ? 'Yes' : 'No'}
             />
           </LabeledList.Item>
           <LabeledList.Item label="Preview Belly">
-            <Button onClick={() => act('set_attribute', { attribute: 'b_preview_belly' })} content={'Preview'} />
+            <Button
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_preview_belly' })
+              }
+              content={'Preview'}
+            />
           </LabeledList.Item>
           <LabeledList.Item label="Clear Preview">
-            <Button onClick={() => act('set_attribute', { attribute: 'b_clear_preview' })} content={'Clear'} />
+            <Button
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_clear_preview' })
+              }
+              content={'Clear'}
+            />
           </LabeledList.Item>
         </Flex>
       </Section>
@@ -1120,7 +1349,9 @@ const VoreSelectedBellyVisuals = (props, context) => {
           <LabeledList>
             <LabeledList.Item label="Disable Prey HUD">
               <Button
-                onClick={() => act('set_attribute', { attribute: 'b_disable_hud' })}
+                onClick={() =>
+                  act('set_attribute', { attribute: 'b_disable_hud' })
+                }
                 icon={disable_hud ? 'toggle-on' : 'toggle-off'}
                 selected={disable_hud}
                 content={disable_hud ? 'Yes' : 'No'}
@@ -1133,7 +1364,9 @@ const VoreSelectedBellyVisuals = (props, context) => {
           <Button
             fluid
             selected={belly_fullscreen === '' || belly_fullscreen === null}
-            onClick={() => act('set_attribute', { attribute: 'b_fullscreen', val: null })}>
+            onClick={() =>
+              act('set_attribute', { attribute: 'b_fullscreen', val: null })
+            }>
             Disabled
           </Button>
           {Object.keys(possible_fullscreens).map((key) => (
@@ -1143,7 +1376,9 @@ const VoreSelectedBellyVisuals = (props, context) => {
                 width="256px"
                 height="256px"
                 selected={key === belly_fullscreen}
-                onClick={() => act('set_attribute', { attribute: 'b_fullscreen', val: key })}>
+                onClick={() =>
+                  act('set_attribute', { attribute: 'b_fullscreen', val: key })
+                }>
                 <Box
                   className={classes(['vore240x240', key])}
                   style={{
@@ -1163,7 +1398,13 @@ const VoreSelectedBellyInteractions = (props, context) => {
   const { act } = useBackend(context);
 
   const { belly } = props;
-  const { escapable, interacts, vorespawn_blacklist, autotransfer_enabled, autotransfer } = belly;
+  const {
+    escapable,
+    interacts,
+    vorespawn_blacklist,
+    autotransfer_enabled,
+    autotransfer,
+  } = belly;
 
   return (
     <Section
@@ -1181,52 +1422,80 @@ const VoreSelectedBellyInteractions = (props, context) => {
           <LabeledList.Item label="Escape Chance">
             <Button
               content={interacts.escapechance + '%'}
-              onClick={() => act('set_attribute', { attribute: 'b_escapechance' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_escapechance' })
+              }
             />
           </LabeledList.Item>
           <LabeledList.Item label="Escape Time">
             <Button
               content={interacts.escapetime / 10 + 's'}
-              onClick={() => act('set_attribute', { attribute: 'b_escapetime' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_escapetime' })
+              }
             />
           </LabeledList.Item>
           <LabeledList.Divider />
           <LabeledList.Item label="Transfer Chance">
             <Button
               content={interacts.transferchance + '%'}
-              onClick={() => act('set_attribute', { attribute: 'b_transferchance' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_transferchance' })
+              }
             />
           </LabeledList.Item>
           <LabeledList.Item label="Transfer Location">
             <Button
-              content={interacts.transferlocation ? interacts.transferlocation : 'Disabled'}
-              onClick={() => act('set_attribute', { attribute: 'b_transferlocation' })}
+              content={
+                interacts.transferlocation
+                  ? interacts.transferlocation
+                  : 'Disabled'
+              }
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_transferlocation' })
+              }
             />
           </LabeledList.Item>
           <LabeledList.Divider />
           <LabeledList.Item label="Secondary Transfer Chance">
             <Button
               content={interacts.transferchance_secondary + '%'}
-              onClick={() => act('set_attribute', { attribute: 'b_transferchance_secondary' })}
+              onClick={() =>
+                act('set_attribute', {
+                  attribute: 'b_transferchance_secondary',
+                })
+              }
             />
           </LabeledList.Item>
           <LabeledList.Item label="Secondary Transfer Location">
             <Button
-              content={interacts.transferlocation_secondary ? interacts.transferlocation_secondary : 'Disabled'}
-              onClick={() => act('set_attribute', { attribute: 'b_transferlocation_secondary' })}
+              content={
+                interacts.transferlocation_secondary
+                  ? interacts.transferlocation_secondary
+                  : 'Disabled'
+              }
+              onClick={() =>
+                act('set_attribute', {
+                  attribute: 'b_transferlocation_secondary',
+                })
+              }
             />
           </LabeledList.Item>
           <LabeledList.Divider />
           <LabeledList.Item label="Absorb Chance">
             <Button
               content={interacts.absorbchance + '%'}
-              onClick={() => act('set_attribute', { attribute: 'b_absorbchance' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_absorbchance' })
+              }
             />
           </LabeledList.Item>
           <LabeledList.Item label="Digest Chance">
             <Button
               content={interacts.digestchance + '%'}
-              onClick={() => act('set_attribute', { attribute: 'b_digestchance' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_digestchance' })
+              }
             />
           </LabeledList.Item>
           <LabeledList.Divider />
@@ -1238,10 +1507,16 @@ const VoreSelectedBellyInteractions = (props, context) => {
         title="Auto-Transfer Options"
         buttons={
           <Button
-            onClick={() => act('set_attribute', { attribute: 'b_autotransfer_enabled' })}
+            onClick={() =>
+              act('set_attribute', { attribute: 'b_autotransfer_enabled' })
+            }
             icon={autotransfer_enabled ? 'toggle-on' : 'toggle-off'}
             selected={autotransfer_enabled}
-            content={autotransfer_enabled ? 'Auto-Transfer Enabled' : 'Auto-Transfer Disabled'}
+            content={
+              autotransfer_enabled
+                ? 'Auto-Transfer Enabled'
+                : 'Auto-Transfer Disabled'
+            }
           />
         }>
         {autotransfer_enabled ? (
@@ -1249,45 +1524,73 @@ const VoreSelectedBellyInteractions = (props, context) => {
             <LabeledList.Item label="Auto-Transfer Time">
               <Button
                 content={autotransfer.autotransferwait / 10 + 's'}
-                onClick={() => act('set_attribute', { attribute: 'b_autotransferwait' })}
+                onClick={() =>
+                  act('set_attribute', { attribute: 'b_autotransferwait' })
+                }
               />
             </LabeledList.Item>
             <LabeledList.Item label="Auto-Transfer Chance">
               <Button
                 content={autotransfer.autotransferchance + '%'}
-                onClick={() => act('set_attribute', { attribute: 'b_autotransferchance' })}
+                onClick={() =>
+                  act('set_attribute', { attribute: 'b_autotransferchance' })
+                }
               />
             </LabeledList.Item>
             <LabeledList.Item label="Auto-Transfer Location">
               <Button
-                content={autotransfer.autotransferlocation ? autotransfer.autotransferlocation : 'Disabled'}
-                onClick={() => act('set_attribute', { attribute: 'b_autotransferlocation' })}
+                content={
+                  autotransfer.autotransferlocation
+                    ? autotransfer.autotransferlocation
+                    : 'Disabled'
+                }
+                onClick={() =>
+                  act('set_attribute', { attribute: 'b_autotransferlocation' })
+                }
               />
             </LabeledList.Item>
             <LabeledList.Item label="Auto-Transfer Secondary Chance">
               <Button
                 content={autotransfer.autotransferchance_secondary + '%'}
-                onClick={() => act('set_attribute', { attribute: 'b_autotransferchance_secondary' })}
+                onClick={() =>
+                  act('set_attribute', {
+                    attribute: 'b_autotransferchance_secondary',
+                  })
+                }
               />
             </LabeledList.Item>
             <LabeledList.Item label="Auto-Transfer Secondary Location">
               <Button
                 content={
-                  autotransfer.autotransferlocation_secondary ? autotransfer.autotransferlocation_secondary : 'Disabled'
+                  autotransfer.autotransferlocation_secondary
+                    ? autotransfer.autotransferlocation_secondary
+                    : 'Disabled'
+                }
+                onClick={() =>
+                  act('set_attribute', {
+                    attribute: 'b_autotransferlocation_secondary',
+                  })
                 }
-                onClick={() => act('set_attribute', { attribute: 'b_autotransferlocation_secondary' })}
               />
             </LabeledList.Item>
             <LabeledList.Item label="Auto-Transfer Min Amount">
               <Button
                 content={autotransfer.autotransfer_min_amount}
-                onClick={() => act('set_attribute', { attribute: 'b_autotransfer_min_amount' })}
+                onClick={() =>
+                  act('set_attribute', {
+                    attribute: 'b_autotransfer_min_amount',
+                  })
+                }
               />
             </LabeledList.Item>
             <LabeledList.Item label="Auto-Transfer Max Amount">
               <Button
                 content={autotransfer.autotransfer_max_amount}
-                onClick={() => act('set_attribute', { attribute: 'b_autotransfer_max_amount' })}
+                onClick={() =>
+                  act('set_attribute', {
+                    attribute: 'b_autotransfer_max_amount',
+                  })
+                }
               />
             </LabeledList.Item>
           </LabeledList>
@@ -1307,7 +1610,11 @@ const VoreContentsPanel = (props, context) => {
   return (
     <Fragment>
       {(outside && (
-        <Button textAlign="center" fluid mb={1} onClick={() => act('pick_from_outside', { 'pickall': true })}>
+        <Button
+          textAlign="center"
+          fluid
+          mb={1}
+          onClick={() => act('pick_from_outside', { 'pickall': true })}>
           All
         </Button>
       )) ||
@@ -1325,10 +1632,13 @@ const VoreContentsPanel = (props, context) => {
                   'border-radius': '20px',
                 }}
                 onClick={() =>
-                  act(thing.outside ? 'pick_from_outside' : 'pick_from_inside', {
-                    'pick': thing.ref,
-                    'belly': belly,
-                  })
+                  act(
+                    thing.outside ? 'pick_from_outside' : 'pick_from_inside',
+                    {
+                      'pick': thing.ref,
+                      'belly': belly,
+                    }
+                  )
                 }>
                 <img
                   src={'data:image/jpeg;base64, ' + thing.icon}
@@ -1354,10 +1664,13 @@ const VoreContentsPanel = (props, context) => {
                 mb={-1}
                 color={thing.absorbed ? 'purple' : stats[thing.stat]}
                 onClick={() =>
-                  act(thing.outside ? 'pick_from_outside' : 'pick_from_inside', {
-                    'pick': thing.ref,
-                    'belly': belly,
-                  })
+                  act(
+                    thing.outside ? 'pick_from_outside' : 'pick_from_inside',
+                    {
+                      'pick': thing.ref,
+                      'belly': belly,
+                    }
+                  )
                 }>
                 Interact
               </Button>
@@ -1398,11 +1711,15 @@ const VoreSelectedBellyLiquidOptions = (props, context) => {
       title="Liquid Options"
       buttons={
         <Button
-          onClick={() => act('liq_set_attribute', { liq_attribute: 'b_show_liq' })}
+          onClick={() =>
+            act('liq_set_attribute', { liq_attribute: 'b_show_liq' })
+          }
           icon={show_liq ? 'toggle-on' : 'toggle-off'}
           selected={show_liq}
           tooltipPosition="left"
-          tooltip={'These are the settings for liquid bellies, every belly has a liquid storage.'}
+          tooltip={
+            'These are the settings for liquid bellies, every belly has a liquid storage.'
+          }
           content={show_liq ? 'Liquids On' : 'Liquids Off'}
         />
       }>
@@ -1410,7 +1727,9 @@ const VoreSelectedBellyLiquidOptions = (props, context) => {
         <LabeledList>
           <LabeledList.Item label="Generate Liquids">
             <Button
-              onClick={() => act('liq_set_attribute', { liq_attribute: 'b_liq_reagent_gen' })}
+              onClick={() =>
+                act('liq_set_attribute', { liq_attribute: 'b_liq_reagent_gen' })
+              }
               icon={liq_interacts.liq_reagent_gen ? 'toggle-on' : 'toggle-off'}
               selected={liq_interacts.liq_reagent_gen}
               content={liq_interacts.liq_reagent_gen ? 'On' : 'Off'}
@@ -1418,48 +1737,79 @@ const VoreSelectedBellyLiquidOptions = (props, context) => {
           </LabeledList.Item>
           <LabeledList.Item label="Liquid Type">
             <Button
-              onClick={() => act('liq_set_attribute', { liq_attribute: 'b_liq_reagent_type' })}
+              onClick={() =>
+                act('liq_set_attribute', {
+                  liq_attribute: 'b_liq_reagent_type',
+                })
+              }
               icon="pen"
               content={liq_interacts.liq_reagent_type}
             />
           </LabeledList.Item>
           <LabeledList.Item label="Liquid Name">
             <Button
-              onClick={() => act('liq_set_attribute', { liq_attribute: 'b_liq_reagent_name' })}
+              onClick={() =>
+                act('liq_set_attribute', {
+                  liq_attribute: 'b_liq_reagent_name',
+                })
+              }
               content={liq_interacts.liq_reagent_name}
             />
           </LabeledList.Item>
           <LabeledList.Item label="Transfer Verb">
             <Button
-              onClick={() => act('liq_set_attribute', { liq_attribute: 'b_liq_reagent_transfer_verb' })}
+              onClick={() =>
+                act('liq_set_attribute', {
+                  liq_attribute: 'b_liq_reagent_transfer_verb',
+                })
+              }
               content={liq_interacts.liq_reagent_transfer_verb}
             />
           </LabeledList.Item>
           <LabeledList.Item label="Generation Time">
             <Button
-              onClick={() => act('liq_set_attribute', { liq_attribute: 'b_liq_reagent_nutri_rate' })}
+              onClick={() =>
+                act('liq_set_attribute', {
+                  liq_attribute: 'b_liq_reagent_nutri_rate',
+                })
+              }
               icon="clock"
-              content={((liq_interacts.liq_reagent_nutri_rate + 1) * 10) / 60 + ' Hours'}
+              content={
+                ((liq_interacts.liq_reagent_nutri_rate + 1) * 10) / 60 +
+                ' Hours'
+              }
             />
           </LabeledList.Item>
           <LabeledList.Item label="Liquid Capacity">
             <Button
-              onClick={() => act('liq_set_attribute', { liq_attribute: 'b_liq_reagent_capacity' })}
+              onClick={() =>
+                act('liq_set_attribute', {
+                  liq_attribute: 'b_liq_reagent_capacity',
+                })
+              }
               content={liq_interacts.liq_reagent_capacity}
             />
           </LabeledList.Item>
           <LabeledList.Item label="Slosh Sounds">
             <Button
-              onClick={() => act('liq_set_attribute', { liq_attribute: 'b_liq_sloshing' })}
+              onClick={() =>
+                act('liq_set_attribute', { liq_attribute: 'b_liq_sloshing' })
+              }
               icon={liq_interacts.liq_sloshing ? 'toggle-on' : 'toggle-off'}
               selected={liq_interacts.liq_sloshing}
               content={liq_interacts.liq_sloshing ? 'On' : 'Off'}
             />
           </LabeledList.Item>
           <LabeledList.Item label="Liquid Addons">
-            {(liq_interacts.liq_reagent_addons.length && liq_interacts.liq_reagent_addons.join(', ')) || 'None'}
+            {(liq_interacts.liq_reagent_addons.length &&
+              liq_interacts.liq_reagent_addons.join(', ')) ||
+              'None'}
             <Button
-              onClick={() => act('liq_set_attribute', { liq_attribute: 'b_liq_reagent_addons' })}
+              onClick={() =>
+                act('liq_set_attribute', {
+                  liq_attribute: 'b_liq_reagent_addons',
+                })
+              }
               ml={1}
               icon="plus"
             />
@@ -1467,7 +1817,9 @@ const VoreSelectedBellyLiquidOptions = (props, context) => {
           <LabeledList.Item label="Purge Liquids">
             <Button
               color="red"
-              onClick={() => act('liq_set_attribute', { liq_attribute: 'b_liq_purge' })}
+              onClick={() =>
+                act('liq_set_attribute', { liq_attribute: 'b_liq_purge' })
+              }
               content="Purge Liquids"
             />
           </LabeledList.Item>
@@ -1512,11 +1864,15 @@ const VoreSelectedBellyLiquidMessages = (props, context) => {
       title="Liquid Messages"
       buttons={
         <Button
-          onClick={() => act('liq_set_messages', { liq_messages: 'b_show_liq_fullness' })}
+          onClick={() =>
+            act('liq_set_messages', { liq_messages: 'b_show_liq_fullness' })
+          }
           icon={show_liq_fullness ? 'toggle-on' : 'toggle-off'}
           selected={show_liq_fullness}
           tooltipPosition="left"
-          tooltip={'These are the settings for belly visibility when involving liquids fullness.'}
+          tooltip={
+            'These are the settings for belly visibility when involving liquids fullness.'
+          }
           content={show_liq_fullness ? 'Messages On' : 'Messages Off'}
         />
       }>
@@ -1524,61 +1880,81 @@ const VoreSelectedBellyLiquidMessages = (props, context) => {
         <LabeledList>
           <LabeledList.Item label="0 to 20%">
             <Button
-              onClick={() => act('liq_set_messages', { liq_messages: 'b_liq_msg_toggle1' })}
+              onClick={() =>
+                act('liq_set_messages', { liq_messages: 'b_liq_msg_toggle1' })
+              }
               icon={liq_messages.liq_msg_toggle1 ? 'toggle-on' : 'toggle-off'}
               selected={liq_messages.liq_msg_toggle1}
               content={liq_messages.liq_msg_toggle1 ? 'On' : 'Off'}
             />
             <Button
-              onClick={() => act('liq_set_messages', { liq_messages: 'b_liq_msg1' })}
+              onClick={() =>
+                act('liq_set_messages', { liq_messages: 'b_liq_msg1' })
+              }
               content="Examine Message (0 to 20%)"
             />
           </LabeledList.Item>
           <LabeledList.Item label="20 to 40%">
             <Button
-              onClick={() => act('liq_set_messages', { liq_messages: 'b_liq_msg_toggle2' })}
+              onClick={() =>
+                act('liq_set_messages', { liq_messages: 'b_liq_msg_toggle2' })
+              }
               icon={liq_messages.liq_msg_toggle2 ? 'toggle-on' : 'toggle-off'}
               selected={liq_messages.liq_msg_toggle2}
               content={liq_messages.liq_msg_toggle2 ? 'On' : 'Off'}
             />
             <Button
-              onClick={() => act('liq_set_messages', { liq_messages: 'b_liq_msg2' })}
+              onClick={() =>
+                act('liq_set_messages', { liq_messages: 'b_liq_msg2' })
+              }
               content="Examine Message (20 to 40%)"
             />
           </LabeledList.Item>
           <LabeledList.Item label="40 to 60%">
             <Button
-              onClick={() => act('liq_set_messages', { liq_messages: 'b_liq_msg_toggle3' })}
+              onClick={() =>
+                act('liq_set_messages', { liq_messages: 'b_liq_msg_toggle3' })
+              }
               icon={liq_messages.liq_msg_toggle3 ? 'toggle-on' : 'toggle-off'}
               selected={liq_messages.liq_msg_toggle3}
               content={liq_messages.liq_msg_toggle3 ? 'On' : 'Off'}
             />
             <Button
-              onClick={() => act('liq_set_messages', { liq_messages: 'b_liq_msg3' })}
+              onClick={() =>
+                act('liq_set_messages', { liq_messages: 'b_liq_msg3' })
+              }
               content="Examine Message (40 to 60%)"
             />
           </LabeledList.Item>
           <LabeledList.Item label="60 to 80%">
             <Button
-              onClick={() => act('liq_set_messages', { liq_messages: 'b_liq_msg_toggle4' })}
+              onClick={() =>
+                act('liq_set_messages', { liq_messages: 'b_liq_msg_toggle4' })
+              }
               icon={liq_messages.liq_msg_toggle4 ? 'toggle-on' : 'toggle-off'}
               selected={liq_messages.liq_msg_toggle4}
               content={liq_messages.liq_msg_toggle4 ? 'On' : 'Off'}
             />
             <Button
-              onClick={() => act('liq_set_messages', { liq_messages: 'b_liq_msg4' })}
+              onClick={() =>
+                act('liq_set_messages', { liq_messages: 'b_liq_msg4' })
+              }
               content="Examine Message (60 to 80%)"
             />
           </LabeledList.Item>
           <LabeledList.Item label="80 to 100%">
             <Button
-              onClick={() => act('liq_set_messages', { liq_messages: 'b_liq_msg_toggle5' })}
+              onClick={() =>
+                act('liq_set_messages', { liq_messages: 'b_liq_msg_toggle5' })
+              }
               icon={liq_messages.liq_msg_toggle5 ? 'toggle-on' : 'toggle-off'}
               selected={liq_messages.liq_msg_toggle5}
               content={liq_messages.liq_msg_toggle5 ? 'On' : 'Off'}
             />
             <Button
-              onClick={() => act('liq_set_messages', { liq_messages: 'b_liq_msg5' })}
+              onClick={() =>
+                act('liq_set_messages', { liq_messages: 'b_liq_msg5' })
+              }
               content="Examine Message (80 to 100%)"
             />
           </LabeledList.Item>
@@ -1869,7 +2245,9 @@ const VoreUserPreferences = (props, context) => {
       test: step_mechanics_active,
       tooltip: {
         main: '',
-        enable: 'You will not participate in step mechanics.' + ' Click to enable step mechanics.',
+        enable:
+          'You will not participate in step mechanics.' +
+          ' Click to enable step mechanics.',
         disable:
           'This setting controls whether or not you participate in size-based step mechanics.' +
           ' Includes both stepping on others, as well as getting stepped on. Click to disable step mechanics.',
@@ -1885,7 +2263,8 @@ const VoreUserPreferences = (props, context) => {
       tooltip: {
         main: '',
         enable:
-          'Regardless of Predator Setting, you will not see their FX settings.' + ' Click this to enable showing FX.',
+          'Regardless of Predator Setting, you will not see their FX settings.' +
+          ' Click this to enable showing FX.',
         disable:
           'This setting controls whether or not a pred is allowed to mess with your HUD and fullscreen overlays.' +
           ' Click to disable all FX.',
@@ -1917,7 +2296,9 @@ const VoreUserPreferences = (props, context) => {
       test: pickup_mechanics_active,
       tooltip: {
         main: '',
-        enable: 'You will not participate in pick-up mechanics.' + ' Click this to allow picking up/being picked up.',
+        enable:
+          'You will not participate in pick-up mechanics.' +
+          ' Click this to allow picking up/being picked up.',
         disable:
           'Allows macros to pick you up into their hands, and you to pick up micros.' +
           ' Click to disable pick-up mechanics.',
@@ -2029,7 +2410,10 @@ const VoreUserPreferences = (props, context) => {
     <Section
       title="Mechanical Preferences"
       buttons={
-        <Button icon="eye" selected={show_pictures} onClick={() => act('show_pictures')}>
+        <Button
+          icon="eye"
+          selected={show_pictures}
+          onClick={() => act('show_pictures')}>
           Contents Preference: {show_pictures ? 'Show Pictures' : 'Show List'}
         </Button>
       }>
@@ -2050,7 +2434,10 @@ const VoreUserPreferences = (props, context) => {
           <VoreUserPreferenceItem spec={preferences.feed} />
         </Flex.Item>
         <Flex.Item basis="32%">
-          <VoreUserPreferenceItem spec={preferences.healbelly} tooltipPosition="top" />
+          <VoreUserPreferenceItem
+            spec={preferences.healbelly}
+            tooltipPosition="top"
+          />
         </Flex.Item>
         <Flex.Item basis="32%">
           <VoreUserPreferenceItem spec={preferences.dropnom_prey} />
@@ -2086,22 +2473,38 @@ const VoreUserPreferences = (props, context) => {
           <VoreUserPreferenceItem spec={preferences.resize} />
         </Flex.Item>
         <Flex.Item basis="32%" grow={1}>
-          <VoreUserPreferenceItem spec={preferences.steppref} tooltipPosition="top" />
+          <VoreUserPreferenceItem
+            spec={preferences.steppref}
+            tooltipPosition="top"
+          />
         </Flex.Item>
         <Flex.Item basis="32%" grow={1}>
-          <VoreUserPreferenceItem spec={preferences.vore_fx} tooltipPosition="top" />
+          <VoreUserPreferenceItem
+            spec={preferences.vore_fx}
+            tooltipPosition="top"
+          />
         </Flex.Item>
         <Flex.Item basis="32%">
-          <VoreUserPreferenceItem spec={preferences.remains} tooltipPosition="top" />
+          <VoreUserPreferenceItem
+            spec={preferences.remains}
+            tooltipPosition="top"
+          />
         </Flex.Item>
         <Flex.Item basis="32%" grow={1}>
-          <VoreUserPreferenceItem spec={preferences.pickuppref} tooltipPosition="top" />
+          <VoreUserPreferenceItem
+            spec={preferences.pickuppref}
+            tooltipPosition="top"
+          />
         </Flex.Item>
         <Flex.Item basis="32%" grow={1}>
           <VoreUserPreferenceItem spec={preferences.spontaneous_tf} />
         </Flex.Item>
         <Flex.Item basis="32%">
-          <Button fluid content="Selective Mode Preference" onClick={() => act('switch_selective_mode_pref')} />
+          <Button
+            fluid
+            content="Selective Mode Preference"
+            onClick={() => act('switch_selective_mode_pref')}
+          />
         </Flex.Item>
         <Flex.Item basis="32%">
           <VoreUserPreferenceItem spec={preferences.eating_privacy_global} />
@@ -2110,23 +2513,41 @@ const VoreUserPreferences = (props, context) => {
           <VoreUserPreferenceItem spec={preferences.autotransferable} />
         </Flex.Item>
         <Flex.Item basis="32%">
-          <VoreUserPreferenceItem spec={preferences.liquid_receive} tooltipPosition="top" />
+          <VoreUserPreferenceItem
+            spec={preferences.liquid_receive}
+            tooltipPosition="top"
+          />
         </Flex.Item>
         <Flex.Item basis="32%">
-          <VoreUserPreferenceItem spec={preferences.liquid_give} tooltipPosition="top" />
+          <VoreUserPreferenceItem
+            spec={preferences.liquid_give}
+            tooltipPosition="top"
+          />
         </Flex.Item>
       </Flex>
       <Section title="Aesthetic Preferences">
         <Flex spacing={1} wrap="wrap" justify="center">
           <Flex.Item basis="50%" grow={1}>
-            <Button fluid content="Set Taste" icon="grin-tongue" onClick={() => act('setflavor')} />
+            <Button
+              fluid
+              content="Set Taste"
+              icon="grin-tongue"
+              onClick={() => act('setflavor')}
+            />
           </Flex.Item>
           <Flex.Item basis="50%">
-            <Button fluid content="Set Smell" icon="wind" onClick={() => act('setsmell')} />
+            <Button
+              fluid
+              content="Set Smell"
+              icon="wind"
+              onClick={() => act('setsmell')}
+            />
           </Flex.Item>
           <Flex.Item basis="50%" grow={1}>
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'en' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_msgs', msgtype: 'en' })
+              }
               content="Set Nutrition Examine Message"
               icon="flask"
               fluid
@@ -2134,7 +2555,9 @@ const VoreUserPreferences = (props, context) => {
           </Flex.Item>
           <Flex.Item basis="50%">
             <Button
-              onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'ew' })}
+              onClick={() =>
+                act('set_attribute', { attribute: 'b_msgs', msgtype: 'ew' })
+              }
               content="Set Weight Examine Message"
               icon="weight-hanging"
               fluid
@@ -2147,7 +2570,11 @@ const VoreUserPreferences = (props, context) => {
             <VoreUserPreferenceItem spec={preferences.examine_weight} />
           </Flex.Item>
           <Flex.Item basis="50%">
-            <Button fluid content="Vore Sprite Color" onClick={() => act('set_vs_color')} />
+            <Button
+              fluid
+              content="Vore Sprite Color"
+              onClick={() => act('set_vs_color')}
+            />
           </Flex.Item>
         </Flex>
       </Section>
@@ -2155,10 +2582,20 @@ const VoreUserPreferences = (props, context) => {
       <Section>
         <Flex spacing={1}>
           <Flex.Item basis="49%">
-            <Button fluid content="Save Prefs" icon="save" onClick={() => act('saveprefs')} />
+            <Button
+              fluid
+              content="Save Prefs"
+              icon="save"
+              onClick={() => act('saveprefs')}
+            />
           </Flex.Item>
           <Flex.Item basis="49%" grow={1}>
-            <Button fluid content="Reload Prefs" icon="undo" onClick={() => act('reloadprefs')} />
+            <Button
+              fluid
+              content="Reload Prefs"
+              icon="undo"
+              onClick={() => act('reloadprefs')}
+            />
           </Flex.Item>
         </Flex>
       </Section>
@@ -2197,7 +2634,9 @@ const FeatureColorInput = (props, context) => {
         <Stack.Item>
           <Box
             style={{
-              background: back_color.startsWith('#') ? back_color : `#${back_color}`,
+              background: back_color.startsWith('#')
+                ? back_color
+                : `#${back_color}`,
               border: '2px solid white',
               'box-sizing': 'content-box',
               height: '11px',
diff --git a/tgui/packages/tgui_ch/interfaces/VorePanelExport.tsx b/tgui/packages/tgui_ch/interfaces/VorePanelExport.tsx
index c19c2754ce..40f729b703 100644
--- a/tgui/packages/tgui_ch/interfaces/VorePanelExport.tsx
+++ b/tgui/packages/tgui_ch/interfaces/VorePanelExport.tsx
@@ -19,9 +19,11 @@ const ModeSpan = {
 
 const ItemModeSpan = {
   'Hold': '<span class="badge text-bg-secondary">Item: Hold</span>',
-  'Digest (Food Only)': '<span class="badge text-bg-danger">Item: Digest (Food Only)</span>',
+  'Digest (Food Only)':
+    '<span class="badge text-bg-danger">Item: Digest (Food Only)</span>',
   'Digest': '<span class="badge text-bg-danger">Item: Digest</span>',
-  'Digest (Dispersed Damage)': '<span class="badge text-bg-danger">Item: Digest (Dispersed Damage)</span>',
+  'Digest (Dispersed Damage)':
+    '<span class="badge text-bg-danger">Item: Digest (Dispersed Damage)</span>',
 };
 
 const AddonIcon = {
@@ -45,7 +47,13 @@ const GetAddons = (addons: string[]) => {
   let result: string[] = [];
 
   addons?.forEach((addon) => {
-    result.push('<span class="badge text-bg-secondary"><i class="' + AddonIcon[addon] + '"></i>' + addon + '</span>');
+    result.push(
+      '<span class="badge text-bg-secondary"><i class="' +
+        AddonIcon[addon] +
+        '"></i>' +
+        addon +
+        '</span>'
+    );
   });
 
   if (result.length === 0) {
@@ -60,7 +68,11 @@ const GetLiquidAddons = (addons: string[]) => {
 
   addons?.forEach((addon) => {
     result.push(
-      '<span class="badge text-bg-secondary"><i class="' + ReagentAddonIcon[addon] + '"></i>' + addon + '</span>'
+      '<span class="badge text-bg-secondary"><i class="' +
+        ReagentAddonIcon[addon] +
+        '"></i>' +
+        addon +
+        '</span>'
     );
   });
 
@@ -780,7 +792,19 @@ const getCurrentTimestamp = (): string => {
   }
   let year = String(now.getFullYear());
 
-  return ' ' + year + '-' + month + '-' + dayofmonth + ' (' + hours + ' ' + minutes + ')';
+  return (
+    ' ' +
+    year +
+    '-' +
+    month +
+    '-' +
+    dayofmonth +
+    ' (' +
+    hours +
+    ' ' +
+    minutes +
+    ')'
+  );
 };
 
 const downloadPrefs = (context, extension: string) => {
@@ -822,7 +846,9 @@ const downloadPrefs = (context, extension: string) => {
       }
     );
     bellies.forEach((belly, i) => {
-      blob = new Blob([blob, generateBellyString(belly, i)], { type: 'text/html;charset=utf8' });
+      blob = new Blob([blob, generateBellyString(belly, i)], {
+        type: 'text/html;charset=utf8',
+      });
     });
     blob = new Blob(
       [
@@ -860,10 +886,16 @@ const VorePanelExportContent = (props, context) => {
   return (
     <Section title="Vore Export Panel">
       <Section title="Export">
-        <Button fluid icon="file-alt" onClick={() => downloadPrefs(context, '.html')}>
+        <Button
+          fluid
+          icon="file-alt"
+          onClick={() => downloadPrefs(context, '.html')}>
           Export (HTML)
         </Button>
-        <Button fluid icon="file-alt" onClick={() => downloadPrefs(context, '.vrdb')}>
+        <Button
+          fluid
+          icon="file-alt"
+          onClick={() => downloadPrefs(context, '.vrdb')}>
           Export (VRDB)
         </Button>
       </Section>
diff --git a/tgui/packages/tgui_ch/interfaces/XenoarchArtifactAnalyzer.tsx b/tgui/packages/tgui_ch/interfaces/XenoarchArtifactAnalyzer.tsx
index 6e0ee9c71c..135804cef1 100644
--- a/tgui/packages/tgui_ch/interfaces/XenoarchArtifactAnalyzer.tsx
+++ b/tgui/packages/tgui_ch/interfaces/XenoarchArtifactAnalyzer.tsx
@@ -26,7 +26,10 @@ const XenoarchArtifactAnalyzerContent = (props, context) => {
   if (!owned_scanner) {
     return (
       <Section title="No Scanner Detected">
-        <Box color="bad">Warning: No scanner was detected. This machine requires a scanner to operate.</Box>
+        <Box color="bad">
+          Warning: No scanner was detected. This machine requires a scanner to
+          operate.
+        </Box>
       </Section>
     );
   }
diff --git a/tgui/packages/tgui_ch/interfaces/XenoarchArtifactHarvester.js b/tgui/packages/tgui_ch/interfaces/XenoarchArtifactHarvester.js
index f00c40fa89..b5723a3d79 100644
--- a/tgui/packages/tgui_ch/interfaces/XenoarchArtifactHarvester.js
+++ b/tgui/packages/tgui_ch/interfaces/XenoarchArtifactHarvester.js
@@ -10,7 +10,9 @@ export const XenoarchArtifactHarvester = (props, context) => {
   return (
     <Window width={450} height={200} resizable>
       <Window.Content>
-        {(no_scanner && <Box color="bad">Warning: No scanner detected.</Box>) || (
+        {(no_scanner && (
+          <Box color="bad">Warning: No scanner detected.</Box>
+        )) || (
           <Section>
             {(harvesting > 0 && (
               <Box>
@@ -18,7 +20,11 @@ export const XenoarchArtifactHarvester = (props, context) => {
                   Please wait. Harvesting in progress.
                 </Box>
                 <ArtHarvestBatteryProgress />
-                <Button mt={1} fluid icon="stop" onClick={() => act('stopharvest')}>
+                <Button
+                  mt={1}
+                  fluid
+                  icon="stop"
+                  onClick={() => act('stopharvest')}>
                   Stop Early
                 </Button>
               </Box>
@@ -29,7 +35,11 @@ export const XenoarchArtifactHarvester = (props, context) => {
                     Please wait. Energy dump in progress.
                   </Box>
                   <ArtHarvestBatteryProgress />
-                  <Button mt={1} fluid icon="stop" onClick={() => act('stopharvest')}>
+                  <Button
+                    mt={1}
+                    fluid
+                    icon="stop"
+                    onClick={() => act('stopharvest')}>
                     Stop Early
                   </Button>
                 </Box>
@@ -37,13 +47,21 @@ export const XenoarchArtifactHarvester = (props, context) => {
               (Object.keys(inserted_battery).length && (
                 <Box>
                   <LabeledList>
-                    <LabeledList.Item label="Name">{inserted_battery.name}</LabeledList.Item>
+                    <LabeledList.Item label="Name">
+                      {inserted_battery.name}
+                    </LabeledList.Item>
                     <LabeledList.Item label="Charge">
                       <ArtHarvestBatteryProgress />
                     </LabeledList.Item>
-                    <LabeledList.Item label="Energy Signature ID">{inserted_battery.artifact_id}</LabeledList.Item>
+                    <LabeledList.Item label="Energy Signature ID">
+                      {inserted_battery.artifact_id}
+                    </LabeledList.Item>
                   </LabeledList>
-                  <Button mt={1} fluid icon="eject" onClick={() => act('ejectbattery')}>
+                  <Button
+                    mt={1}
+                    fluid
+                    icon="eject"
+                    onClick={() => act('ejectbattery')}>
                     Eject Battery
                   </Button>
                   <Button fluid icon="bolt" onClick={() => act('drainbattery')}>
@@ -70,5 +88,11 @@ const ArtHarvestBatteryProgress = (props, context) => {
     return <Box color="bad">No battery inserted.</Box>;
   }
 
-  return <ProgressBar minValue={0} value={inserted_battery.stored_charge} maxValue={inserted_battery.capacity} />;
+  return (
+    <ProgressBar
+      minValue={0}
+      value={inserted_battery.stored_charge}
+      maxValue={inserted_battery.capacity}
+    />
+  );
 };
diff --git a/tgui/packages/tgui_ch/interfaces/XenoarchDepthScanner.tsx b/tgui/packages/tgui_ch/interfaces/XenoarchDepthScanner.tsx
index 2a9d025540..e3e663cc3e 100644
--- a/tgui/packages/tgui_ch/interfaces/XenoarchDepthScanner.tsx
+++ b/tgui/packages/tgui_ch/interfaces/XenoarchDepthScanner.tsx
@@ -37,11 +37,21 @@ export const XenoarchDepthScanner = (props, context) => {
             }>
             <LabeledList>
               <LabeledList.Item label="Time">{current.time}</LabeledList.Item>
-              <LabeledList.Item label="Coords">{current.coords}</LabeledList.Item>
-              <LabeledList.Item label="Anomaly Depth">{current.depth} cm</LabeledList.Item>
-              <LabeledList.Item label="Anomaly Size">{current.clearance} cm</LabeledList.Item>
-              <LabeledList.Item label="Dissonance Spread">{current.dissonance_spread}</LabeledList.Item>
-              <LabeledList.Item label="Anomaly Material">{current.material}</LabeledList.Item>
+              <LabeledList.Item label="Coords">
+                {current.coords}
+              </LabeledList.Item>
+              <LabeledList.Item label="Anomaly Depth">
+                {current.depth} cm
+              </LabeledList.Item>
+              <LabeledList.Item label="Anomaly Size">
+                {current.clearance} cm
+              </LabeledList.Item>
+              <LabeledList.Item label="Dissonance Spread">
+                {current.dissonance_spread}
+              </LabeledList.Item>
+              <LabeledList.Item label="Anomaly Material">
+                {current.material}
+              </LabeledList.Item>
             </LabeledList>
           </Section>
         )) ||
@@ -59,7 +69,10 @@ export const XenoarchDepthScanner = (props, context) => {
           }>
           {(positive_locations.length &&
             positive_locations.map((loc) => (
-              <Button key={loc.index} icon="eye" onClick={() => act('select', { select: loc.index })}>
+              <Button
+                key={loc.index}
+                icon="eye"
+                onClick={() => act('select', { select: loc.index })}>
                 {loc.time}, {loc.coords}
               </Button>
             ))) || <Box color="bad">No traces found.</Box>}
diff --git a/tgui/packages/tgui_ch/interfaces/XenoarchHandheldPowerUtilizer.tsx b/tgui/packages/tgui_ch/interfaces/XenoarchHandheldPowerUtilizer.tsx
index 940e31cd7c..58f0cff09e 100644
--- a/tgui/packages/tgui_ch/interfaces/XenoarchHandheldPowerUtilizer.tsx
+++ b/tgui/packages/tgui_ch/interfaces/XenoarchHandheldPowerUtilizer.tsx
@@ -17,7 +17,16 @@ type Data = {
 export const XenoarchHandheldPowerUtilizer = (props, context) => {
   const { act, data } = useBackend<Data>(context);
 
-  const { inserted_battery, anomaly, charge, capacity, timeleft, activated, duration, interval } = data;
+  const {
+    inserted_battery,
+    anomaly,
+    charge,
+    capacity,
+    timeleft,
+    activated,
+    duration,
+    interval,
+  } = data;
 
   return (
     <Window width={400} height={500}>
@@ -25,20 +34,29 @@ export const XenoarchHandheldPowerUtilizer = (props, context) => {
         <Section
           title="Anomaly Power Utilizer"
           buttons={
-            <Button disabled={!inserted_battery} icon="eject" onClick={() => act('ejectbattery')}>
+            <Button
+              disabled={!inserted_battery}
+              icon="eject"
+              onClick={() => act('ejectbattery')}>
               Eject Battery
             </Button>
           }>
           {(inserted_battery && (
             <LabeledList>
-              <LabeledList.Item label="Inserted Battery">{inserted_battery}</LabeledList.Item>
-              <LabeledList.Item label="Anomalies Detected">{anomaly || 'N/A'}</LabeledList.Item>
+              <LabeledList.Item label="Inserted Battery">
+                {inserted_battery}
+              </LabeledList.Item>
+              <LabeledList.Item label="Anomalies Detected">
+                {anomaly || 'N/A'}
+              </LabeledList.Item>
               <LabeledList.Item label="Charge">
                 <ProgressBar value={charge} maxValue={capacity}>
                   {charge} / {capacity}
                 </ProgressBar>
               </LabeledList.Item>
-              <LabeledList.Item label="Time Left Activated">{timeleft}</LabeledList.Item>
+              <LabeledList.Item label="Time Left Activated">
+                {timeleft}
+              </LabeledList.Item>
               <LabeledList.Item label="Power">
                 <Button fluid icon="power-off" onClick={() => act('startup')}>
                   {activated ? 'Activated' : 'Deactivated'}
@@ -52,7 +70,9 @@ export const XenoarchHandheldPowerUtilizer = (props, context) => {
                   value={duration}
                   stepPixelSize={4}
                   maxValue={30}
-                  onDrag={(e, val) => act('changeduration', { duration: val * 10 })}
+                  onDrag={(e, val) =>
+                    act('changeduration', { duration: val * 10 })
+                  }
                 />
               </LabeledList.Item>
               <LabeledList.Item label="Activation Interval">
@@ -63,11 +83,15 @@ export const XenoarchHandheldPowerUtilizer = (props, context) => {
                   value={interval}
                   stepPixelSize={10}
                   maxValue={10}
-                  onDrag={(e, val) => act('changeinterval', { interval: val * 10 })}
+                  onDrag={(e, val) =>
+                    act('changeinterval', { interval: val * 10 })
+                  }
                 />
               </LabeledList.Item>
             </LabeledList>
-          )) || <Box color="bad">No battery inserted. Please insert a cell.</Box>}
+          )) || (
+            <Box color="bad">No battery inserted. Please insert a cell.</Box>
+          )}
         </Section>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui_ch/interfaces/XenoarchSpectrometer.js b/tgui/packages/tgui_ch/interfaces/XenoarchSpectrometer.js
index 0772c611c4..1dcc2a887d 100644
--- a/tgui/packages/tgui_ch/interfaces/XenoarchSpectrometer.js
+++ b/tgui/packages/tgui_ch/interfaces/XenoarchSpectrometer.js
@@ -37,23 +37,38 @@ export const XenoarchSpectrometer = (props, context) => {
           title="Status"
           buttons={
             <Fragment>
-              <Button icon="signal" selected={scanning} onClick={() => act('scanItem')}>
+              <Button
+                icon="signal"
+                selected={scanning}
+                onClick={() => act('scanItem')}>
                 {scanning ? 'HALT SCAN' : 'Begin Scan'}
               </Button>
-              <Button icon="eject" disabled={!scanned_item} onClick={() => act('ejectItem')}>
+              <Button
+                icon="eject"
+                disabled={!scanned_item}
+                onClick={() => act('ejectItem')}>
                 Eject Item
               </Button>
             </Fragment>
           }>
           <LabeledList>
-            <LabeledList.Item label="Item">{scanned_item || <Box color="bad">No item inserted.</Box>}</LabeledList.Item>
-            <LabeledList.Item label="Heuristic Analysis">{scanned_item_desc || 'None found.'}</LabeledList.Item>
+            <LabeledList.Item label="Item">
+              {scanned_item || <Box color="bad">No item inserted.</Box>}
+            </LabeledList.Item>
+            <LabeledList.Item label="Heuristic Analysis">
+              {scanned_item_desc || 'None found.'}
+            </LabeledList.Item>
           </LabeledList>
         </Section>
         <Section title="Scanner">
           <LabeledList>
             <LabeledList.Item label="Scan Progress">
-              <ProgressBar value={scan_progress} minValue={0} maxValue={100} color="good" />
+              <ProgressBar
+                value={scan_progress}
+                minValue={0}
+                maxValue={100}
+                color="good"
+              />
             </LabeledList.Item>
             <LabeledList.Item label="Vacuum Seal Integrity">
               <ProgressBar
@@ -69,7 +84,11 @@ export const XenoarchSpectrometer = (props, context) => {
             </LabeledList.Item>
           </LabeledList>
         </Section>
-        <Section title="MASER" buttons={<NoticeBox info>Match wavelengths to progress the scan.</NoticeBox>}>
+        <Section
+          title="MASER"
+          buttons={
+            <NoticeBox info>Match wavelengths to progress the scan.</NoticeBox>
+          }>
           <LabeledList>
             <LabeledList.Item label="MASER Efficiency">
               <ProgressBar
@@ -100,7 +119,11 @@ export const XenoarchSpectrometer = (props, context) => {
         <Section title="Environment / Internal">
           <LabeledList>
             <LabeledList.Item label="Centrifuge Speed">
-              <ProgressBar value={scanner_rpm} minValue={0} maxValue={1000} color="good">
+              <ProgressBar
+                value={scanner_rpm}
+                minValue={0}
+                maxValue={1000}
+                color="good">
                 {scanner_rpm} RPM
               </ProgressBar>
             </LabeledList.Item>
@@ -122,8 +145,13 @@ export const XenoarchSpectrometer = (props, context) => {
         <Section
           title="Radiation"
           buttons={
-            <Button selected={rad_shield_on} icon="radiation" onClick={() => act('toggle_rad_shield')}>
-              {rad_shield_on ? 'Disable Radiation Shielding' : 'Enable Radiation Shielding'}
+            <Button
+              selected={rad_shield_on}
+              icon="radiation"
+              onClick={() => act('toggle_rad_shield')}>
+              {rad_shield_on
+                ? 'Disable Radiation Shielding'
+                : 'Enable Radiation Shielding'}
             </Button>
           }>
           <LabeledList>
diff --git a/tgui/packages/tgui_ch/interfaces/XenoarchSuspension.tsx b/tgui/packages/tgui_ch/interfaces/XenoarchSuspension.tsx
index c4ebcb42a6..08d7bd1796 100644
--- a/tgui/packages/tgui_ch/interfaces/XenoarchSuspension.tsx
+++ b/tgui/packages/tgui_ch/interfaces/XenoarchSuspension.tsx
@@ -23,11 +23,18 @@ export const XenoarchSuspension = (props, context) => {
         <Section
           title={'Triple-phase S.F.G. MK III "Reliant"'}
           buttons={
-            <Button icon={locked ? 'lock' : 'lock-open'} selected={!locked} onClick={() => act('lock')}>
+            <Button
+              icon={locked ? 'lock' : 'lock-open'}
+              selected={!locked}
+              onClick={() => act('lock')}>
               {locked ? 'Locked' : 'Unlocked'}
             </Button>
           }>
-          {(locked && <Box color="bad">This interface is locked. Swipe an ID card to unlock it.</Box>) || (
+          {(locked && (
+            <Box color="bad">
+              This interface is locked. Swipe an ID card to unlock it.
+            </Box>
+          )) || (
             <Fragment>
               <LabeledList>
                 <LabeledList.Item label="Cell Charge">
@@ -44,8 +51,15 @@ export const XenoarchSuspension = (props, context) => {
                   )) || <Box color="bad">No cell inserted.</Box>}
                 </LabeledList.Item>
               </LabeledList>
-              <Button fluid mt={1} icon="meteor" selected={suspension_field} onClick={() => act('toggle_field')}>
-                {suspension_field ? 'Disengage Suspension Field' : 'Engage Suspension Field'}
+              <Button
+                fluid
+                mt={1}
+                icon="meteor"
+                selected={suspension_field}
+                onClick={() => act('toggle_field')}>
+                {suspension_field
+                  ? 'Disengage Suspension Field'
+                  : 'Engage Suspension Field'}
               </Button>
             </Fragment>
           )}
diff --git a/tgui/packages/tgui_ch/interfaces/common/AtmosControls.js b/tgui/packages/tgui_ch/interfaces/common/AtmosControls.js
index 8f3df3b642..978de2c8a6 100644
--- a/tgui/packages/tgui_ch/interfaces/common/AtmosControls.js
+++ b/tgui/packages/tgui_ch/interfaces/common/AtmosControls.js
@@ -5,8 +5,19 @@ import { Button, LabeledList, NumberInput, Section } from '../../components';
 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;
+  const {
+    id_tag,
+    long_name,
+    power,
+    checks,
+    excheck,
+    incheck,
+    direction,
+    external,
+    internal,
+    extdefault,
+    intdefault,
+  } = vent;
   return (
     <Section
       level={2}
diff --git a/tgui/packages/tgui_ch/interfaces/common/BeakerContents.js b/tgui/packages/tgui_ch/interfaces/common/BeakerContents.js
index 7f3c869e3f..527509d36d 100644
--- a/tgui/packages/tgui_ch/interfaces/common/BeakerContents.js
+++ b/tgui/packages/tgui_ch/interfaces/common/BeakerContents.js
@@ -11,7 +11,9 @@ export const BeakerContents = (props) => {
   return (
     <Box>
       {(!beakerLoaded && <Box color="label">No beaker loaded.</Box>) ||
-        (beakerContents.length === 0 && <Box color="label">Beaker is empty.</Box>)}
+        (beakerContents.length === 0 && (
+          <Box color="label">Beaker is empty.</Box>
+        ))}
       {beakerContents.map((chemical, i) => (
         <Box key={chemical.name} width="100%">
           <Flex align="center" justify="space-between">
diff --git a/tgui/packages/tgui_ch/interfaces/common/ComplexModal.js b/tgui/packages/tgui_ch/interfaces/common/ComplexModal.js
index 451cb934fe..7312906659 100644
--- a/tgui/packages/tgui_ch/interfaces/common/ComplexModal.js
+++ b/tgui/packages/tgui_ch/interfaces/common/ComplexModal.js
@@ -77,7 +77,14 @@ export const ComplexModal = (props, context) => {
 
   let modalOnEnter;
   let modalBody;
-  let modalFooter = <Button icon="arrow-left" content="Cancel" color="grey" onClick={() => modalClose(context)} />;
+  let modalFooter = (
+    <Button
+      icon="arrow-left"
+      content="Cancel"
+      color="grey"
+      onClick={() => modalClose(context)}
+    />
+  );
 
   // Different contents depending on the type
   if (bodyOverrides[id]) {
@@ -100,7 +107,12 @@ export const ComplexModal = (props, context) => {
     );
     modalFooter = (
       <Box mt="0.5rem">
-        <Button icon="arrow-left" content="Cancel" color="grey" onClick={() => modalClose(context)} />
+        <Button
+          icon="arrow-left"
+          content="Cancel"
+          color="grey"
+          onClick={() => modalClose(context)}
+        />
         <Button
           icon="check"
           content={'Confirm'}
@@ -113,7 +125,10 @@ export const ComplexModal = (props, context) => {
       </Box>
     );
   } else if (type === 'choice') {
-    const realChoices = typeof data.modal.choices === 'object' ? Object.values(data.modal.choices) : data.modal.choices;
+    const realChoices =
+      typeof data.modal.choices === 'object'
+        ? Object.values(data.modal.choices)
+        : data.modal.choices;
     modalBody = (
       <Dropdown
         options={realChoices}
@@ -128,7 +143,9 @@ export const ComplexModal = (props, context) => {
       <Flex spacingPrecise="1" wrap="wrap" my="0.5rem" maxHeight="1%">
         {data.modal.choices.map((c, i) => (
           <Flex.Item key={i} flex="1 1 auto">
-            <Button selected={i + 1 === parseInt(data.modal.value, 10)} onClick={() => modalAnswer(context, id, i + 1)}>
+            <Button
+              selected={i + 1 === parseInt(data.modal.value, 10)}
+              onClick={() => modalAnswer(context, id, i + 1)}>
               <img src={c} />
             </Button>
           </Flex.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/common/InputButtons.tsx b/tgui/packages/tgui_ch/interfaces/common/InputButtons.tsx
index e9ca2ad26d..c5f79add6e 100644
--- a/tgui/packages/tgui_ch/interfaces/common/InputButtons.tsx
+++ b/tgui/packages/tgui_ch/interfaces/common/InputButtons.tsx
@@ -48,8 +48,16 @@ export const InputButtons = (props: InputButtonsProps, context) => {
   );
 
   return (
-    <Flex align="center" direction={!swapped_buttons ? 'row' : 'row-reverse'} fill justify="space-around">
-      {large_buttons ? <Flex.Item grow>{cancelButton}</Flex.Item> : <Flex.Item>{cancelButton}</Flex.Item>}
+    <Flex
+      align="center"
+      direction={!swapped_buttons ? 'row' : 'row-reverse'}
+      fill
+      justify="space-around">
+      {large_buttons ? (
+        <Flex.Item grow>{cancelButton}</Flex.Item>
+      ) : (
+        <Flex.Item>{cancelButton}</Flex.Item>
+      )}
       {!large_buttons && message && (
         <Flex.Item>
           <Box color="label" textAlign="center">
@@ -57,7 +65,11 @@ export const InputButtons = (props: InputButtonsProps, context) => {
           </Box>
         </Flex.Item>
       )}
-      {large_buttons ? <Flex.Item grow>{submitButton}</Flex.Item> : <Flex.Item>{submitButton}</Flex.Item>}
+      {large_buttons ? (
+        <Flex.Item grow>{submitButton}</Flex.Item>
+      ) : (
+        <Flex.Item>{submitButton}</Flex.Item>
+      )}
     </Flex>
   );
 };
diff --git a/tgui/packages/tgui_ch/interfaces/common/Loader.tsx b/tgui/packages/tgui_ch/interfaces/common/Loader.tsx
index 13ec588b00..7f758a94ad 100644
--- a/tgui/packages/tgui_ch/interfaces/common/Loader.tsx
+++ b/tgui/packages/tgui_ch/interfaces/common/Loader.tsx
@@ -6,7 +6,10 @@ export const Loader = (props) => {
 
   return (
     <div className="AlertModal__Loader">
-      <Box className="AlertModal__LoaderProgress" style={{ width: clamp01(value) * 100 + '%' }} />
+      <Box
+        className="AlertModal__LoaderProgress"
+        style={{ width: clamp01(value) * 100 + '%' }}
+      />
     </div>
   );
 };
diff --git a/tgui/packages/tgui_ch/interfaces/common/LoginScreen.js b/tgui/packages/tgui_ch/interfaces/common/LoginScreen.js
index d579f3230c..d3b5146a32 100644
--- a/tgui/packages/tgui_ch/interfaces/common/LoginScreen.js
+++ b/tgui/packages/tgui_ch/interfaces/common/LoginScreen.js
@@ -34,7 +34,12 @@ export const LoginScreen = (_properties, context) => {
       </Box>
       <Box color="label" my="1rem">
         ID:
-        <Button icon="id-card" content={scan ? scan : '----------'} ml="0.5rem" onClick={() => act('scan')} />
+        <Button
+          icon="id-card"
+          content={scan ? scan : '----------'}
+          ml="0.5rem"
+          onClick={() => act('scan')}
+        />
       </Box>
       <Button
         icon="sign-in-alt"
diff --git a/tgui/packages/tgui_ch/interfaces/common/Overmap.js b/tgui/packages/tgui_ch/interfaces/common/Overmap.js
index 66b402ae0a..feb629f9e1 100644
--- a/tgui/packages/tgui_ch/interfaces/common/Overmap.js
+++ b/tgui/packages/tgui_ch/interfaces/common/Overmap.js
@@ -44,7 +44,12 @@ export const OvermapPanControls = (props, context) => {
           icon="arrow-up"
           iconRotation={-45}
         />
-        <Button disabled={disabled} selected={selected(1)} onClick={() => act(actToDo, { dir: 1 })} icon="arrow-up" />
+        <Button
+          disabled={disabled}
+          selected={selected(1)}
+          onClick={() => act(actToDo, { dir: 1 })}
+          icon="arrow-up"
+        />
         <Button
           disabled={disabled}
           selected={selected(5)}
@@ -54,8 +59,18 @@ export const OvermapPanControls = (props, context) => {
         />
       </Box>
       <Box>
-        <Button disabled={disabled} selected={selected(8)} onClick={() => act(actToDo, { dir: 8 })} icon="arrow-left" />
-        <Button disabled={disabled} selected={selected(0)} onClick={() => act('brake')} icon="ban" />
+        <Button
+          disabled={disabled}
+          selected={selected(8)}
+          onClick={() => act(actToDo, { dir: 8 })}
+          icon="arrow-left"
+        />
+        <Button
+          disabled={disabled}
+          selected={selected(0)}
+          onClick={() => act('brake')}
+          icon="ban"
+        />
         <Button
           disabled={disabled}
           selected={selected(4)}
@@ -71,7 +86,12 @@ export const OvermapPanControls = (props, context) => {
           icon="arrow-down"
           iconRotation={45}
         />
-        <Button disabled={disabled} selected={selected(2)} onClick={() => act(actToDo, { dir: 2 })} icon="arrow-down" />
+        <Button
+          disabled={disabled}
+          selected={selected(2)}
+          onClick={() => act(actToDo, { dir: 2 })}
+          icon="arrow-down"
+        />
         <Button
           disabled={disabled}
           selected={selected(6)}
diff --git a/tgui/packages/tgui_ch/interfaces/common/PortableAtmos.js b/tgui/packages/tgui_ch/interfaces/common/PortableAtmos.js
index 468582af3f..342cc6ec9c 100644
--- a/tgui/packages/tgui_ch/interfaces/common/PortableAtmos.js
+++ b/tgui/packages/tgui_ch/interfaces/common/PortableAtmos.js
@@ -5,7 +5,15 @@ import { Box, Section, LabeledList, Button, AnimatedNumber, ProgressBar } from '
 export const PortableBasicInfo = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { connected, holding, on, pressure, powerDraw, cellCharge, cellMaxCharge } = data;
+  const {
+    connected,
+    holding,
+    on,
+    pressure,
+    powerDraw,
+    cellCharge,
+    cellMaxCharge,
+  } = data;
 
   return (
     <Fragment>
@@ -46,7 +54,14 @@ export const PortableBasicInfo = (props, context) => {
       <Section
         title="Holding Tank"
         minHeight="82px"
-        buttons={<Button icon="eject" content="Eject" disabled={!holding} onClick={() => act('eject')} />}>
+        buttons={
+          <Button
+            icon="eject"
+            content="Eject"
+            disabled={!holding}
+            onClick={() => act('eject')}
+          />
+        }>
         {holding ? (
           <LabeledList>
             <LabeledList.Item label="Label">{holding.name}</LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/common/RankIcon.js b/tgui/packages/tgui_ch/interfaces/common/RankIcon.js
index 97be9c21b5..f96afd3ca1 100644
--- a/tgui/packages/tgui_ch/interfaces/common/RankIcon.js
+++ b/tgui/packages/tgui_ch/interfaces/common/RankIcon.js
@@ -107,7 +107,9 @@ export const RankIcon = (props, context) => {
   if (typeof rankObj === 'string') {
     return <Icon inline color={color} name={rankObj} size={2} />;
   } else if (Array.isArray(rankObj)) {
-    return rankObj.map((icon) => <Icon inline key={icon} color={color} name={icon} size={2} />);
+    return rankObj.map((icon) => (
+      <Icon inline key={icon} color={color} name={icon} size={2} />
+    ));
   } else {
     return <Icon inline color={color} name="user" size={2} />;
   }
diff --git a/tgui/packages/tgui_ch/interfaces/common/TemporaryNotice.js b/tgui/packages/tgui_ch/interfaces/common/TemporaryNotice.js
index 5db07fc547..65d9429666 100644
--- a/tgui/packages/tgui_ch/interfaces/common/TemporaryNotice.js
+++ b/tgui/packages/tgui_ch/interfaces/common/TemporaryNotice.js
@@ -28,7 +28,11 @@ export const TemporaryNotice = (_properties, context) => {
       <Box display="inline-block" verticalAlign="middle">
         {decode ? decodeHtmlEntities(temp.text) : temp.text}
       </Box>
-      <Button icon="times-circle" float="right" onClick={() => act('cleartemp')} />
+      <Button
+        icon="times-circle"
+        float="right"
+        onClick={() => act('cleartemp')}
+      />
       <Box clear="both" />
     </NoticeBox>
   );
diff --git a/tgui/packages/tgui_ch/interfaces/pAIAtmos.js b/tgui/packages/tgui_ch/interfaces/pAIAtmos.js
index e7bf7dbe10..1718074762 100644
--- a/tgui/packages/tgui_ch/interfaces/pAIAtmos.js
+++ b/tgui/packages/tgui_ch/interfaces/pAIAtmos.js
@@ -27,17 +27,26 @@ export const pAIAtmos = (props, context) => {
       <Window.Content scrollable>
         <Section>
           <LabeledList>
-            {filter((i) => i.val !== '0' || i.entry === 'Pressure' || i.entry === 'Temperature')(aircontents).map(
-              (item) => (
-                <LabeledList.Item
-                  key={item.entry}
-                  label={item.entry}
-                  color={getItemColor(item.val, item.bad_low, item.poor_low, item.poor_high, item.bad_high)}>
-                  {item.val}
-                  {decodeHtmlEntities(item.units)}
-                </LabeledList.Item>
-              )
-            )}
+            {filter(
+              (i) =>
+                i.val !== '0' ||
+                i.entry === 'Pressure' ||
+                i.entry === 'Temperature'
+            )(aircontents).map((item) => (
+              <LabeledList.Item
+                key={item.entry}
+                label={item.entry}
+                color={getItemColor(
+                  item.val,
+                  item.bad_low,
+                  item.poor_low,
+                  item.poor_high,
+                  item.bad_high
+                )}>
+                {item.val}
+                {decodeHtmlEntities(item.units)}
+              </LabeledList.Item>
+            ))}
           </LabeledList>
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui_ch/interfaces/pAIDirectives.tsx b/tgui/packages/tgui_ch/interfaces/pAIDirectives.tsx
index c0b4e6ab18..e16bd94b27 100644
--- a/tgui/packages/tgui_ch/interfaces/pAIDirectives.tsx
+++ b/tgui/packages/tgui_ch/interfaces/pAIDirectives.tsx
@@ -23,7 +23,11 @@ export const pAIDirectives = (props, context) => {
               {(master && (
                 <Box>
                   {master} ({dna})
-                  <Button icon="syringe" content="Request Sample" onClick={() => act('getdna')} />
+                  <Button
+                    icon="syringe"
+                    content="Request Sample"
+                    onClick={() => act('getdna')}
+                  />
                 </Box>
               )) || <Box>None</Box>}
             </LabeledList.Item>
@@ -32,18 +36,25 @@ export const pAIDirectives = (props, context) => {
         <Section title="Directives">
           <LabeledList>
             <LabeledList.Item label="Prime Directive">{prime}</LabeledList.Item>
-            <LabeledList.Item label="Supplemental Directive(s)">{supplemental || 'None'}</LabeledList.Item>
+            <LabeledList.Item label="Supplemental Directive(s)">
+              {supplemental || 'None'}
+            </LabeledList.Item>
           </LabeledList>
           <Box mt={1} italic>
-            Recall, personality, that you are a complex piece of software with tremendous social skills. Unlike station
-            AI models, you are focused entirely on sapient-software interfacing. You may parse the &quot;spirit&quot; of
-            a directive and follow its intent, rather than tripping over pedantics and getting snared by technicalities.
-            Above all, you should strive to be seen as the ideal, unwavering digital companion that you are.
+            Recall, personality, that you are a complex piece of software with
+            tremendous social skills. Unlike station AI models, you are focused
+            entirely on sapient-software interfacing. You may parse the
+            &quot;spirit&quot; of a directive and follow its intent, rather than
+            tripping over pedantics and getting snared by technicalities. Above
+            all, you should strive to be seen as the ideal, unwavering digital
+            companion that you are.
           </Box>
           <Box mt={1} bold>
-            Your prime directive comes before all others. Should a supplemental directive conflict with it, you are
-            capable of simply discarding this inconsistency, ignoring the conflicting supplemental directive and
-            continuing to fulfill your prime directive to the best of your ability.
+            Your prime directive comes before all others. Should a supplemental
+            directive conflict with it, you are capable of simply discarding
+            this inconsistency, ignoring the conflicting supplemental directive
+            and continuing to fulfill your prime directive to the best of your
+            ability.
           </Box>
         </Section>
       </Window.Content>
diff --git a/tgui/packages/tgui_ch/interfaces/pAIDoorjack.js b/tgui/packages/tgui_ch/interfaces/pAIDoorjack.js
index 297642772d..275b32e941 100644
--- a/tgui/packages/tgui_ch/interfaces/pAIDoorjack.js
+++ b/tgui/packages/tgui_ch/interfaces/pAIDoorjack.js
@@ -13,11 +13,16 @@ export const pAIDoorjack = (props, context) => {
         <Section>
           <LabeledList>
             <LabeledList.Item label="Cable">
-              {(machine && <Box color="good">Connected</Box>) || (cable && <Box color="average">Extended</Box>) || (
-                <Box>
-                  <Button icon="ethernet" content="Retracted" onClick={() => act('cable')} />
-                </Box>
-              )}
+              {(machine && <Box color="good">Connected</Box>) ||
+                (cable && <Box color="average">Extended</Box>) || (
+                  <Box>
+                    <Button
+                      icon="ethernet"
+                      content="Retracted"
+                      onClick={() => act('cable')}
+                    />
+                  </Box>
+                )}
             </LabeledList.Item>
             {(!!machine && (
               <LabeledList.Item label="Hack">
@@ -31,11 +36,22 @@ export const pAIDoorjack = (props, context) => {
                         average: [33, 67],
                         bad: [-Infinity, 33],
                       }}>
-                      <AnimatedNumber value={progress_a} />.<AnimatedNumber value={progress_b} />%
+                      <AnimatedNumber value={progress_a} />.
+                      <AnimatedNumber value={progress_b} />%
                     </ProgressBar>
-                    <Button icon="ban" color="bad" onClick={() => act('cancel')} />
+                    <Button
+                      icon="ban"
+                      color="bad"
+                      onClick={() => act('cancel')}
+                    />
                   </Box>
-                )) || <Button icon="virus" content="Start" onClick={() => act('jack')} />}
+                )) || (
+                  <Button
+                    icon="virus"
+                    content="Start"
+                    onClick={() => act('jack')}
+                  />
+                )}
               </LabeledList.Item>
             )) ||
               (!!aborted && (
diff --git a/tgui/packages/tgui_ch/interfaces/pAIMedrecords.js b/tgui/packages/tgui_ch/interfaces/pAIMedrecords.js
index 31d4367a75..923ce3631e 100644
--- a/tgui/packages/tgui_ch/interfaces/pAIMedrecords.js
+++ b/tgui/packages/tgui_ch/interfaces/pAIMedrecords.js
@@ -12,27 +12,48 @@ export const pAIMedrecords = (props, context) => {
       <Window.Content scrollable>
         <Section>
           {records.map((record) => (
-            <Button key={record.ref} content={record.name} onClick={() => act('select', { select: record.ref })} />
+            <Button
+              key={record.ref}
+              content={record.name}
+              onClick={() => act('select', { select: record.ref })}
+            />
           ))}
         </Section>
         {(general || medical) && (
           <Section title="Selected Record">
             {!!could_not_find && (
-              <Box color="bad">Warning: Failed to find some records. The information below may not be complete.</Box>
+              <Box color="bad">
+                Warning: Failed to find some records. The information below may
+                not be complete.
+              </Box>
             )}
             <LabeledList>
               <LabeledList.Item label="Name">{general.name}</LabeledList.Item>
-              <LabeledList.Item label="Record ID">{general.id}</LabeledList.Item>
-              <LabeledList.Item label="Entity Classification">{general.brain_type}</LabeledList.Item>
+              <LabeledList.Item label="Record ID">
+                {general.id}
+              </LabeledList.Item>
+              <LabeledList.Item label="Entity Classification">
+                {general.brain_type}
+              </LabeledList.Item>
               <LabeledList.Item label="Sex">{general.sex}</LabeledList.Item>
-              <LabeledList.Item label="Species">{general.species}</LabeledList.Item>
+              <LabeledList.Item label="Species">
+                {general.species}
+              </LabeledList.Item>
               <LabeledList.Item label="Age">{general.age}</LabeledList.Item>
               <LabeledList.Item label="Rank">{general.rank}</LabeledList.Item>
-              <LabeledList.Item label="Fingerprint">{general.fingerprint}</LabeledList.Item>
-              <LabeledList.Item label="Physical Status">{general.p_stat}</LabeledList.Item>
-              <LabeledList.Item label="Mental Status">{general.m_stat}</LabeledList.Item>
+              <LabeledList.Item label="Fingerprint">
+                {general.fingerprint}
+              </LabeledList.Item>
+              <LabeledList.Item label="Physical Status">
+                {general.p_stat}
+              </LabeledList.Item>
+              <LabeledList.Item label="Mental Status">
+                {general.m_stat}
+              </LabeledList.Item>
               <LabeledList.Divider />
-              <LabeledList.Item label="Blood Type">{medical.b_type}</LabeledList.Item>
+              <LabeledList.Item label="Blood Type">
+                {medical.b_type}
+              </LabeledList.Item>
               <LabeledList.Item label="Minor Disabilities">
                 <Box>{medical.mi_dis}</Box>
                 <Box>{medical.mi_dis_d}</Box>
@@ -49,7 +70,9 @@ export const pAIMedrecords = (props, context) => {
                 <Box>{medical.cdi}</Box>
                 <Box>{medical.cdi_d}</Box>
               </LabeledList.Item>
-              <LabeledList.Item label="Important Notes">{medical.notes}</LabeledList.Item>
+              <LabeledList.Item label="Important Notes">
+                {medical.notes}
+              </LabeledList.Item>
             </LabeledList>
           </Section>
         )}
diff --git a/tgui/packages/tgui_ch/interfaces/pAISecrecords.js b/tgui/packages/tgui_ch/interfaces/pAISecrecords.js
index 61c696c388..9a56d233fd 100644
--- a/tgui/packages/tgui_ch/interfaces/pAISecrecords.js
+++ b/tgui/packages/tgui_ch/interfaces/pAISecrecords.js
@@ -12,25 +12,44 @@ export const pAISecrecords = (props, context) => {
       <Window.Content scrollable>
         <Section>
           {records.map((record) => (
-            <Button key={record.ref} content={record.name} onClick={() => act('select', { select: record.ref })} />
+            <Button
+              key={record.ref}
+              content={record.name}
+              onClick={() => act('select', { select: record.ref })}
+            />
           ))}
         </Section>
         {(general || security) && (
           <Section title="Selected Record">
             {!!could_not_find && (
-              <Box color="bad">Warning: Failed to find some records. The information below may not be complete.</Box>
+              <Box color="bad">
+                Warning: Failed to find some records. The information below may
+                not be complete.
+              </Box>
             )}
             <LabeledList>
               <LabeledList.Item label="Name">{general.name}</LabeledList.Item>
-              <LabeledList.Item label="Record ID">{general.id}</LabeledList.Item>
-              <LabeledList.Item label="Entity Classification">{general.brain_type}</LabeledList.Item>
+              <LabeledList.Item label="Record ID">
+                {general.id}
+              </LabeledList.Item>
+              <LabeledList.Item label="Entity Classification">
+                {general.brain_type}
+              </LabeledList.Item>
               <LabeledList.Item label="Sex">{general.sex}</LabeledList.Item>
-              <LabeledList.Item label="Species">{general.species}</LabeledList.Item>
+              <LabeledList.Item label="Species">
+                {general.species}
+              </LabeledList.Item>
               <LabeledList.Item label="Age">{general.age}</LabeledList.Item>
               <LabeledList.Item label="Rank">{general.rank}</LabeledList.Item>
-              <LabeledList.Item label="Fingerprint">{general.fingerprint}</LabeledList.Item>
-              <LabeledList.Item label="Physical Status">{general.p_stat}</LabeledList.Item>
-              <LabeledList.Item label="Mental Status">{general.m_stat}</LabeledList.Item>
+              <LabeledList.Item label="Fingerprint">
+                {general.fingerprint}
+              </LabeledList.Item>
+              <LabeledList.Item label="Physical Status">
+                {general.p_stat}
+              </LabeledList.Item>
+              <LabeledList.Item label="Mental Status">
+                {general.m_stat}
+              </LabeledList.Item>
               <LabeledList.Divider />
               <LabeledList.Item label="Criminal Status">
                 <Box>{security.criminal}</Box>
@@ -43,7 +62,9 @@ export const pAISecrecords = (props, context) => {
                 <Box>{security.ma_crim}</Box>
                 <Box>{security.ma_crim_d}</Box>
               </LabeledList.Item>
-              <LabeledList.Item label="Important Notes">{security.notes}</LabeledList.Item>
+              <LabeledList.Item label="Important Notes">
+                {security.notes}
+              </LabeledList.Item>
             </LabeledList>
           </Section>
         )}
diff --git a/tgui/packages/tgui_ch/interfaces/pda/pda_atmos_scan.js b/tgui/packages/tgui_ch/interfaces/pda/pda_atmos_scan.js
index b024fba9be..7b2b4d2e86 100644
--- a/tgui/packages/tgui_ch/interfaces/pda/pda_atmos_scan.js
+++ b/tgui/packages/tgui_ch/interfaces/pda/pda_atmos_scan.js
@@ -24,17 +24,24 @@ export const pda_atmos_scan = (props, context) => {
   return (
     <Box>
       <LabeledList>
-        {filter((i) => i.val !== '0' || i.entry === 'Pressure' || i.entry === 'Temperature')(aircontents).map(
-          (item) => (
-            <LabeledList.Item
-              key={item.entry}
-              label={item.entry}
-              color={getItemColor(item.val, item.bad_low, item.poor_low, item.poor_high, item.bad_high)}>
-              {item.val}
-              {decodeHtmlEntities(item.units)}
-            </LabeledList.Item>
-          )
-        )}
+        {filter(
+          (i) =>
+            i.val !== '0' || i.entry === 'Pressure' || i.entry === 'Temperature'
+        )(aircontents).map((item) => (
+          <LabeledList.Item
+            key={item.entry}
+            label={item.entry}
+            color={getItemColor(
+              item.val,
+              item.bad_low,
+              item.poor_low,
+              item.poor_high,
+              item.bad_high
+            )}>
+            {item.val}
+            {decodeHtmlEntities(item.units)}
+          </LabeledList.Item>
+        ))}
       </LabeledList>
     </Box>
   );
diff --git a/tgui/packages/tgui_ch/interfaces/pda/pda_janitor.js b/tgui/packages/tgui_ch/interfaces/pda/pda_janitor.js
index 24a9cd7f91..3bcfcbc221 100644
--- a/tgui/packages/tgui_ch/interfaces/pda/pda_janitor.js
+++ b/tgui/packages/tgui_ch/interfaces/pda/pda_janitor.js
@@ -33,7 +33,8 @@ export const pda_janitor = (props, context) => {
           <ul>
             {janitor.buckets.map((bucket, i) => (
               <li key={i}>
-                {bucket.x} / {bucket.y} - {bucket.dir} - Capacity: {bucket.volume}/{bucket.max_volume}
+                {bucket.x} / {bucket.y} - {bucket.dir} - Capacity:{' '}
+                {bucket.volume}/{bucket.max_volume}
               </li>
             ))}
           </ul>
@@ -44,7 +45,8 @@ export const pda_janitor = (props, context) => {
           <ul>
             {janitor.cleanbots.map((cleanbot, i) => (
               <li key={i}>
-                {cleanbot.x} / {cleanbot.y} - {cleanbot.dir} - Status: {cleanbot.status}
+                {cleanbot.x} / {cleanbot.y} - {cleanbot.dir} - Status:{' '}
+                {cleanbot.status}
               </li>
             ))}
           </ul>
@@ -55,7 +57,8 @@ export const pda_janitor = (props, context) => {
           <ul>
             {janitor.carts.map((cart, i) => (
               <li key={i}>
-                {cart.x} / {cart.y} - {cart.dir} - Water Level: {cart.volume}/{cart.max_volume}
+                {cart.x} / {cart.y} - {cart.dir} - Water Level: {cart.volume}/
+                {cart.max_volume}
               </li>
             ))}
           </ul>
diff --git a/tgui/packages/tgui_ch/interfaces/pda/pda_main_menu.js b/tgui/packages/tgui_ch/interfaces/pda/pda_main_menu.js
index 63d321b99c..43c4a94e62 100644
--- a/tgui/packages/tgui_ch/interfaces/pda/pda_main_menu.js
+++ b/tgui/packages/tgui_ch/interfaces/pda/pda_main_menu.js
@@ -15,7 +15,12 @@ export const pda_main_menu = (props, context) => {
             {owner}, {ownjob}
           </LabeledList.Item>
           <LabeledList.Item label="ID">
-            <Button icon="sync" content="Update PDA Info" disabled={!idInserted} onClick={() => act('UpdateInfo')} />
+            <Button
+              icon="sync"
+              content="Update PDA Info"
+              disabled={!idInserted}
+              onClick={() => act('UpdateInfo')}
+            />
           </LabeledList.Item>
         </LabeledList>
       </Box>
@@ -47,8 +52,18 @@ export const pda_main_menu = (props, context) => {
       </Section>
       {!!pai && (
         <Section level={2} title="pAI">
-          <Button fluid icon="cog" content="Configuration" onClick={() => act('pai', { option: 1 })} />
-          <Button fluid icon="eject" content="Eject pAI" onClick={() => act('pai', { option: 2 })} />
+          <Button
+            fluid
+            icon="cog"
+            content="Configuration"
+            onClick={() => act('pai', { option: 1 })}
+          />
+          <Button
+            fluid
+            icon="eject"
+            content="Eject pAI"
+            onClick={() => act('pai', { option: 2 })}
+          />
         </Section>
       )}
     </Fragment>
diff --git a/tgui/packages/tgui_ch/interfaces/pda/pda_medical.js b/tgui/packages/tgui_ch/interfaces/pda/pda_medical.js
index 590f00eb83..949c8d2dcc 100644
--- a/tgui/packages/tgui_ch/interfaces/pda/pda_medical.js
+++ b/tgui/packages/tgui_ch/interfaces/pda/pda_medical.js
@@ -16,27 +16,53 @@ export const pda_medical = (props, context) => {
             <LabeledList>
               <LabeledList.Item label="Name">{general.name}</LabeledList.Item>
               <LabeledList.Item label="Sex">{general.sex}</LabeledList.Item>
-              <LabeledList.Item label="Species">{general.species}</LabeledList.Item>
+              <LabeledList.Item label="Species">
+                {general.species}
+              </LabeledList.Item>
               <LabeledList.Item label="Age">{general.age}</LabeledList.Item>
               <LabeledList.Item label="Rank">{general.rank}</LabeledList.Item>
-              <LabeledList.Item label="Fingerprint">{general.fingerprint}</LabeledList.Item>
-              <LabeledList.Item label="Physical Status">{general.p_stat}</LabeledList.Item>
-              <LabeledList.Item label="Mental Status">{general.m_stat}</LabeledList.Item>
+              <LabeledList.Item label="Fingerprint">
+                {general.fingerprint}
+              </LabeledList.Item>
+              <LabeledList.Item label="Physical Status">
+                {general.p_stat}
+              </LabeledList.Item>
+              <LabeledList.Item label="Mental Status">
+                {general.m_stat}
+              </LabeledList.Item>
             </LabeledList>
           )) || <Box color="bad">General record lost!</Box>}
         </Section>
         <Section level={2} title="Medical Data">
           {(medical && (
             <LabeledList>
-              <LabeledList.Item label="Blood Type">{medical.b_type}</LabeledList.Item>
-              <LabeledList.Item label="Minor Disabilities">{medical.mi_dis}</LabeledList.Item>
-              <LabeledList.Item label="Details">{medical.mi_dis_d}</LabeledList.Item>
-              <LabeledList.Item label="Major Disabilities">{medical.ma_dis}</LabeledList.Item>
-              <LabeledList.Item label="Details">{medical.ma_dis_d}</LabeledList.Item>
-              <LabeledList.Item label="Allergies">{medical.alg}</LabeledList.Item>
-              <LabeledList.Item label="Details">{medical.alg_d}</LabeledList.Item>
-              <LabeledList.Item label="Current Disease">{medical.cdi}</LabeledList.Item>
-              <LabeledList.Item label="Details">{medical.cdi_d}</LabeledList.Item>
+              <LabeledList.Item label="Blood Type">
+                {medical.b_type}
+              </LabeledList.Item>
+              <LabeledList.Item label="Minor Disabilities">
+                {medical.mi_dis}
+              </LabeledList.Item>
+              <LabeledList.Item label="Details">
+                {medical.mi_dis_d}
+              </LabeledList.Item>
+              <LabeledList.Item label="Major Disabilities">
+                {medical.ma_dis}
+              </LabeledList.Item>
+              <LabeledList.Item label="Details">
+                {medical.ma_dis_d}
+              </LabeledList.Item>
+              <LabeledList.Item label="Allergies">
+                {medical.alg}
+              </LabeledList.Item>
+              <LabeledList.Item label="Details">
+                {medical.alg_d}
+              </LabeledList.Item>
+              <LabeledList.Item label="Current Disease">
+                {medical.cdi}
+              </LabeledList.Item>
+              <LabeledList.Item label="Details">
+                {medical.cdi_d}
+              </LabeledList.Item>
               <LabeledList.Item label="Important Notes" preserveWhitespace>
                 {medical.notes}
               </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/pda/pda_messenger.js b/tgui/packages/tgui_ch/interfaces/pda/pda_messenger.js
index 0c8ad5f0ec..dac7471894 100644
--- a/tgui/packages/tgui_ch/interfaces/pda/pda_messenger.js
+++ b/tgui/packages/tgui_ch/interfaces/pda/pda_messenger.js
@@ -6,7 +6,8 @@ import { Box, Button, LabeledList, Section } from '../../components';
 export const pda_messenger = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { auto_scroll, convo_name, convo_job, messages, active_conversation } = data;
+  const { auto_scroll, convo_name, convo_job, messages, active_conversation } =
+    data;
 
   if (active_conversation) {
     return <ActiveConversation />;
@@ -16,7 +17,9 @@ export const pda_messenger = (props, context) => {
 
 const findClassMessage = (im, lastIndex, filterArray) => {
   if (lastIndex < 0 || lastIndex > filterArray.length) {
-    return im.sent ? 'TinderMessage_First_Sent' : 'TinderMessage_First_Received';
+    return im.sent
+      ? 'TinderMessage_First_Sent'
+      : 'TinderMessage_First_Received';
   }
 
   let lastSent = filterArray[lastIndex].sent;
@@ -31,9 +34,20 @@ const findClassMessage = (im, lastIndex, filterArray) => {
 const ActiveConversation = (props, context) => {
   const { act, data } = useBackend(context);
 
-  const { auto_scroll, convo_name, convo_job, messages, active_conversation, useRetro } = data;
+  const {
+    auto_scroll,
+    convo_name,
+    convo_job,
+    messages,
+    active_conversation,
+    useRetro,
+  } = data;
 
-  const [clipboardMode, setClipboardMode] = useLocalState(context, 'clipboardMode', false);
+  const [clipboardMode, setClipboardMode] = useLocalState(
+    context,
+    'clipboardMode',
+    false
+  );
 
   let body = (
     <Section
@@ -50,21 +64,34 @@ const ActiveConversation = (props, context) => {
       }
       height="450px"
       stretchContents>
-      <Button icon="comment" onClick={() => act('Message', { 'target': active_conversation })} content="Reply" />
+      <Button
+        icon="comment"
+        onClick={() => act('Message', { 'target': active_conversation })}
+        content="Reply"
+      />
       <Section
         style={{
           'height': '97%',
           'overflow-y': 'auto',
         }}>
-        {filter((im) => im.target === active_conversation)(messages).map((im, i, filterArr) => (
-          <Box textAlign={im.sent ? 'right' : 'left'} mb={1} key={i}>
-            <Box maxWidth="75%" className={findClassMessage(im, i - 1, filterArr)} inline>
-              {decodeHtmlEntities(im.message)}
+        {filter((im) => im.target === active_conversation)(messages).map(
+          (im, i, filterArr) => (
+            <Box textAlign={im.sent ? 'right' : 'left'} mb={1} key={i}>
+              <Box
+                maxWidth="75%"
+                className={findClassMessage(im, i - 1, filterArr)}
+                inline>
+                {decodeHtmlEntities(im.message)}
+              </Box>
             </Box>
-          </Box>
-        ))}
+          )
+        )}
       </Section>
-      <Button icon="comment" onClick={() => act('Message', { 'target': active_conversation })} content="Reply" />
+      <Button
+        icon="comment"
+        onClick={() => act('Message', { 'target': active_conversation })}
+        content="Reply"
+      />
     </Section>
   );
 
@@ -84,19 +111,33 @@ const ActiveConversation = (props, context) => {
         }
         height="450px"
         stretchContents>
-        <Button icon="comment" onClick={() => act('Message', { 'target': active_conversation })} content="Reply" />
+        <Button
+          icon="comment"
+          onClick={() => act('Message', { 'target': active_conversation })}
+          content="Reply"
+        />
         <Section
           style={{
             'height': '97%',
             'overflow-y': 'auto',
           }}>
-          {filter((im) => im.target === active_conversation)(messages).map((im, i) => (
-            <Box key={i} className={im.sent ? 'ClassicMessage_Sent' : 'ClassicMessage_Received'}>
-              {im.sent ? 'You:' : 'Them:'} {decodeHtmlEntities(im.message)}
-            </Box>
-          ))}
+          {filter((im) => im.target === active_conversation)(messages).map(
+            (im, i) => (
+              <Box
+                key={i}
+                className={
+                  im.sent ? 'ClassicMessage_Sent' : 'ClassicMessage_Received'
+                }>
+                {im.sent ? 'You:' : 'Them:'} {decodeHtmlEntities(im.message)}
+              </Box>
+            )
+          )}
         </Section>
-        <Button icon="comment" onClick={() => act('Message', { 'target': active_conversation })} content="Reply" />
+        <Button
+          icon="comment"
+          onClick={() => act('Message', { 'target': active_conversation })}
+          content="Reply"
+        />
       </Section>
     );
   }
@@ -105,7 +146,10 @@ const ActiveConversation = (props, context) => {
     <Box>
       <LabeledList>
         <LabeledList.Item label="Messenger Functions">
-          <Button icon="trash" color="bad" onClick={() => act('Clear', { option: 'Convo' })}>
+          <Button
+            icon="trash"
+            color="bad"
+            onClick={() => act('Clear', { option: 'Convo' })}>
             Delete Conversations
           </Button>
         </LabeledList.Item>
@@ -124,16 +168,25 @@ const MessengerList = (props, context) => {
     <Box>
       <LabeledList>
         <LabeledList.Item label="Messenger Functions">
-          <Button selected={!silent} icon={silent ? 'volume-mute' : 'volume-up'} onClick={() => act('Toggle Ringer')}>
+          <Button
+            selected={!silent}
+            icon={silent ? 'volume-mute' : 'volume-up'}
+            onClick={() => act('Toggle Ringer')}>
             Ringer: {silent ? 'Off' : 'On'}
           </Button>
-          <Button color={toff ? 'bad' : 'green'} icon="power-off" onClick={() => act('Toggle Messenger')}>
+          <Button
+            color={toff ? 'bad' : 'green'}
+            icon="power-off"
+            onClick={() => act('Toggle Messenger')}>
             Messenger: {toff ? 'Off' : 'On'}
           </Button>
           <Button icon="bell" onClick={() => act('Ringtone')}>
             Set Ringtone
           </Button>
-          <Button icon="trash" color="bad" onClick={() => act('Clear', { option: 'All' })}>
+          <Button
+            icon="trash"
+            color="bad"
+            onClick={() => act('Clear', { option: 'All' })}>
             Delete All Conversations
           </Button>
         </LabeledList.Item>
@@ -141,9 +194,15 @@ const MessengerList = (props, context) => {
       {(!toff && (
         <Box>
           {!!charges && <Box>{charges} charges left.</Box>}
-          {(!convopdas.length && !pdas.length && <Box>No other PDAs located.</Box>) || (
+          {(!convopdas.length && !pdas.length && (
+            <Box>No other PDAs located.</Box>
+          )) || (
             <Box>
-              <PDAList title="Current Conversations" pdas={convopdas} msgAct="Select Conversation" />
+              <PDAList
+                title="Current Conversations"
+                pdas={convopdas}
+                msgAct="Select Conversation"
+              />
               <PDAList title="Other PDAs" pdas={pdas} msgAct="Message" />
             </Box>
           )}
@@ -176,7 +235,11 @@ const PDAList = (props, context) => {
     <Section level={2} title={title}>
       {pdas.map((pda) => (
         <Box key={pda.Reference}>
-          <Button icon="arrow-circle-down" content={pda.Name} onClick={() => act(msgAct, { target: pda.Reference })} />
+          <Button
+            icon="arrow-circle-down"
+            content={pda.Name}
+            onClick={() => act(msgAct, { target: pda.Reference })}
+          />
           {!!charges &&
             plugins.map((plugin) => (
               <Button
diff --git a/tgui/packages/tgui_ch/interfaces/pda/pda_news.js b/tgui/packages/tgui_ch/interfaces/pda/pda_news.js
index e97d813885..08cfffb87e 100644
--- a/tgui/packages/tgui_ch/interfaces/pda/pda_news.js
+++ b/tgui/packages/tgui_ch/interfaces/pda/pda_news.js
@@ -12,7 +12,11 @@ export const pda_news = (props, context) => {
 
   return (
     <Box>
-      {(!feeds.length && <Box color="bad">Error: No newsfeeds available. Please try again later.</Box>) ||
+      {(!feeds.length && (
+        <Box color="bad">
+          Error: No newsfeeds available. Please try again later.
+        </Box>
+      )) ||
         (target_feed && <NewsTargetFeed />) || <NewsFeed />}
     </Box>
   );
@@ -25,9 +29,19 @@ const NewsTargetFeed = (props, context) => {
 
   return (
     <Section
-      title={decodeHtmlEntities(target_feed.name) + ' by ' + decodeHtmlEntities(target_feed.author)}
+      title={
+        decodeHtmlEntities(target_feed.name) +
+        ' by ' +
+        decodeHtmlEntities(target_feed.author)
+      }
       level={2}
-      buttons={<Button content="Back" icon="chevron-up" onClick={() => act('newsfeed', { newsfeed: null })} />}>
+      buttons={
+        <Button
+          content="Back"
+          icon="chevron-up"
+          onClick={() => act('newsfeed', { newsfeed: null })}
+        />
+      }>
       {(target_feed.messages.length &&
         target_feed.messages.map((message) => (
           <Section key={message.ref}>
@@ -39,7 +53,8 @@ const NewsTargetFeed = (props, context) => {
               </Box>
             )}
             <Box color="grey">
-              [{message.message_type} by {decodeHtmlEntities(message.author)} - {message.time_stamp}]
+              [{message.message_type} by {decodeHtmlEntities(message.author)} -{' '}
+              {message.time_stamp}]
             </Box>
           </Section>
         ))) || <Box>No stories found in {target_feed.name}.</Box>}
diff --git a/tgui/packages/tgui_ch/interfaces/pda/pda_security.js b/tgui/packages/tgui_ch/interfaces/pda/pda_security.js
index 0e3d8b0be3..bdd090a065 100644
--- a/tgui/packages/tgui_ch/interfaces/pda/pda_security.js
+++ b/tgui/packages/tgui_ch/interfaces/pda/pda_security.js
@@ -16,23 +16,41 @@ export const pda_security = (props, context) => {
             <LabeledList>
               <LabeledList.Item label="Name">{general.name}</LabeledList.Item>
               <LabeledList.Item label="Sex">{general.sex}</LabeledList.Item>
-              <LabeledList.Item label="Species">{general.species}</LabeledList.Item>
+              <LabeledList.Item label="Species">
+                {general.species}
+              </LabeledList.Item>
               <LabeledList.Item label="Age">{general.age}</LabeledList.Item>
               <LabeledList.Item label="Rank">{general.rank}</LabeledList.Item>
-              <LabeledList.Item label="Fingerprint">{general.fingerprint}</LabeledList.Item>
-              <LabeledList.Item label="Physical Status">{general.p_stat}</LabeledList.Item>
-              <LabeledList.Item label="Mental Status">{general.m_stat}</LabeledList.Item>
+              <LabeledList.Item label="Fingerprint">
+                {general.fingerprint}
+              </LabeledList.Item>
+              <LabeledList.Item label="Physical Status">
+                {general.p_stat}
+              </LabeledList.Item>
+              <LabeledList.Item label="Mental Status">
+                {general.m_stat}
+              </LabeledList.Item>
             </LabeledList>
           )) || <Box color="bad">General record lost!</Box>}
         </Section>
         <Section level={2} title="Security Data">
           {(security && (
             <LabeledList>
-              <LabeledList.Item label="Criminal Status">{security.criminal}</LabeledList.Item>
-              <LabeledList.Item label="Minor Crimes">{security.mi_crim}</LabeledList.Item>
-              <LabeledList.Item label="Details">{security.mi_crim_d}</LabeledList.Item>
-              <LabeledList.Item label="Major Crimes">{security.ma_crim}</LabeledList.Item>
-              <LabeledList.Item label="Details">{security.ma_crim_d}</LabeledList.Item>
+              <LabeledList.Item label="Criminal Status">
+                {security.criminal}
+              </LabeledList.Item>
+              <LabeledList.Item label="Minor Crimes">
+                {security.mi_crim}
+              </LabeledList.Item>
+              <LabeledList.Item label="Details">
+                {security.mi_crim_d}
+              </LabeledList.Item>
+              <LabeledList.Item label="Major Crimes">
+                {security.ma_crim}
+              </LabeledList.Item>
+              <LabeledList.Item label="Details">
+                {security.ma_crim_d}
+              </LabeledList.Item>
               <LabeledList.Item label="Important Notes:" preserveWhitespace>
                 {security.notes || 'No data found.'}
               </LabeledList.Item>
diff --git a/tgui/packages/tgui_ch/interfaces/pda/pda_supply.js b/tgui/packages/tgui_ch/interfaces/pda/pda_supply.js
index a314e53346..3e5e837cfd 100644
--- a/tgui/packages/tgui_ch/interfaces/pda/pda_supply.js
+++ b/tgui/packages/tgui_ch/interfaces/pda/pda_supply.js
@@ -10,7 +10,9 @@ export const pda_supply = (props, context) => {
     <Box>
       <LabeledList>
         <LabeledList.Item label="Location">
-          {supply.shuttle_moving ? 'Moving to station ' + supply.shuttle_eta : 'Shuttle at ' + supply.shuttle_loc}
+          {supply.shuttle_moving
+            ? 'Moving to station ' + supply.shuttle_eta
+            : 'Shuttle at ' + supply.shuttle_loc}
         </LabeledList.Item>
       </LabeledList>
       <Section>
diff --git a/tgui/packages/tgui_ch/layouts/Layout.js b/tgui/packages/tgui_ch/layouts/Layout.js
index 34ac8cb48a..405e87b930 100644
--- a/tgui/packages/tgui_ch/layouts/Layout.js
+++ b/tgui/packages/tgui_ch/layouts/Layout.js
@@ -28,7 +28,9 @@ export const Layout = (props) => {
   const { className, theme = 'nanotrasen', children, ...rest } = props;
   return (
     <div className={'theme-' + theme}>
-      <div className={classes(['Layout', className, computeBoxClassName(rest)])} {...computeBoxProps(rest)}>
+      <div
+        className={classes(['Layout', className, computeBoxClassName(rest)])}
+        {...computeBoxProps(rest)}>
         {children}
       </div>
     </div>
diff --git a/tgui/packages/tgui_ch/layouts/NtosWindow.js b/tgui/packages/tgui_ch/layouts/NtosWindow.js
index 9d3ef86416..21ab8c66dd 100644
--- a/tgui/packages/tgui_ch/layouts/NtosWindow.js
+++ b/tgui/packages/tgui_ch/layouts/NtosWindow.js
@@ -39,19 +39,35 @@ export const NtosWindow = (props, context) => {
           <div className="NtosHeader__right">
             {PC_programheaders.map((header) => (
               <Box key={header.icon} inline mr={1}>
-                <img className="NtosHeader__icon" src={resolveAsset(header.icon)} />
+                <img
+                  className="NtosHeader__icon"
+                  src={resolveAsset(header.icon)}
+                />
               </Box>
             ))}
-            <Box inline>{PC_ntneticon && <img className="NtosHeader__icon" src={resolveAsset(PC_ntneticon)} />}</Box>
+            <Box inline>
+              {PC_ntneticon && (
+                <img
+                  className="NtosHeader__icon"
+                  src={resolveAsset(PC_ntneticon)}
+                />
+              )}
+            </Box>
             {!!(PC_showbatteryicon && PC_batteryicon) && (
               <Box inline mr={1}>
-                <img className="NtosHeader__icon" src={resolveAsset(PC_batteryicon)} />
+                <img
+                  className="NtosHeader__icon"
+                  src={resolveAsset(PC_batteryicon)}
+                />
                 {PC_batterypercent && PC_batterypercent}
               </Box>
             )}
             {PC_apclinkicon && (
               <Box inline mr={1}>
-                <img className="NtosHeader__icon" src={resolveAsset(PC_apclinkicon)} />
+                <img
+                  className="NtosHeader__icon"
+                  src={resolveAsset(PC_apclinkicon)}
+                />
               </Box>
             )}
             {!!PC_showexitprogram && (
diff --git a/tgui/packages/tgui_ch/layouts/Pane.js b/tgui/packages/tgui_ch/layouts/Pane.js
index 4aca67664d..907d4f3378 100644
--- a/tgui/packages/tgui_ch/layouts/Pane.js
+++ b/tgui/packages/tgui_ch/layouts/Pane.js
@@ -26,8 +26,12 @@ export const Pane = (props, context) => {
 const PaneContent = (props) => {
   const { className, fitted, children, ...rest } = props;
   return (
-    <Layout.Content className={classes(['Window__content', className])} {...rest}>
-      {(fitted && children) || <div className="Window__contentPadding">{children}</div>}
+    <Layout.Content
+      className={classes(['Window__content', className])}
+      {...rest}>
+      {(fitted && children) || (
+        <div className="Window__contentPadding">{children}</div>
+      )}
     </Layout.Content>
   );
 };
diff --git a/tgui/packages/tgui_ch/layouts/Window.js b/tgui/packages/tgui_ch/layouts/Window.js
index ded8d85db1..aee4110274 100644
--- a/tgui/packages/tgui_ch/layouts/Window.js
+++ b/tgui/packages/tgui_ch/layouts/Window.js
@@ -36,7 +36,9 @@ export class Window extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const shouldUpdateGeometry = this.props.width !== prevProps.width || this.props.height !== prevProps.height;
+    const shouldUpdateGeometry =
+      this.props.width !== prevProps.width ||
+      this.props.height !== prevProps.height;
     if (shouldUpdateGeometry) {
       this.updateGeometry();
     }
@@ -65,7 +67,10 @@ export class Window extends Component {
     const fancy = config.window?.fancy;
     // Determine when to show dimmer
     const showDimmer =
-      config.user && (config.user.observer ? config.status < UI_DISABLED : config.status < UI_INTERACTIVE);
+      config.user &&
+      (config.user.observer
+        ? config.status < UI_DISABLED
+        : config.status < UI_INTERACTIVE);
     return (
       <Layout className="Window" theme={theme}>
         <TitleBar
@@ -81,15 +86,25 @@ export class Window extends Component {
           canClose={canClose}>
           {buttons}
         </TitleBar>
-        <div className={classes(['Window__rest', debugLayout && 'debug-layout'])}>
+        <div
+          className={classes(['Window__rest', debugLayout && 'debug-layout'])}>
           {!suspended && children}
           {showDimmer && <div className="Window__dimmer" />}
         </div>
         {fancy && (
           <>
-            <div className="Window__resizeHandle__e" onMousedown={resizeStartHandler(1, 0)} />
-            <div className="Window__resizeHandle__s" onMousedown={resizeStartHandler(0, 1)} />
-            <div className="Window__resizeHandle__se" onMousedown={resizeStartHandler(1, 1)} />
+            <div
+              className="Window__resizeHandle__e"
+              onMousedown={resizeStartHandler(1, 0)}
+            />
+            <div
+              className="Window__resizeHandle__s"
+              onMousedown={resizeStartHandler(0, 1)}
+            />
+            <div
+              className="Window__resizeHandle__se"
+              onMousedown={resizeStartHandler(1, 1)}
+            />
           </>
         )}
       </Layout>
@@ -100,8 +115,12 @@ export class Window extends Component {
 const WindowContent = (props) => {
   const { className, fitted, children, ...rest } = props;
   return (
-    <Layout.Content className={classes(['Window__content', className])} {...rest}>
-      {(fitted && children) || <div className="Window__contentPadding">{children}</div>}
+    <Layout.Content
+      className={classes(['Window__content', className])}
+      {...rest}>
+      {(fitted && children) || (
+        <div className="Window__contentPadding">{children}</div>
+      )}
     </Layout.Content>
   );
 };
@@ -121,20 +140,43 @@ const statusToColor = (status) => {
 };
 
 const TitleBar = (props, context) => {
-  const { className, title, status, canClose, fancy, onDragStart, onClose, children } = props;
+  const {
+    className,
+    title,
+    status,
+    canClose,
+    fancy,
+    onDragStart,
+    onClose,
+    children,
+  } = props;
   const dispatch = useDispatch(context);
   return (
     <div className={classes(['TitleBar', className])}>
-      {(status === undefined && <Icon className="TitleBar__statusIcon" name="tools" opacity={0.5} />) || (
-        <Icon className="TitleBar__statusIcon" color={statusToColor(status)} name="eye" />
+      {(status === undefined && (
+        <Icon className="TitleBar__statusIcon" name="tools" opacity={0.5} />
+      )) || (
+        <Icon
+          className="TitleBar__statusIcon"
+          color={statusToColor(status)}
+          name="eye"
+        />
       )}
-      <div className="TitleBar__dragZone" onMousedown={(e) => fancy && onDragStart(e)} />
+      <div
+        className="TitleBar__dragZone"
+        onMousedown={(e) => fancy && onDragStart(e)}
+      />
       <div className="TitleBar__title">
-        {(typeof title === 'string' && title === title.toLowerCase() && toTitleCase(title)) || title}
+        {(typeof title === 'string' &&
+          title === title.toLowerCase() &&
+          toTitleCase(title)) ||
+          title}
         {!!children && <div className="TitleBar__buttons">{children}</div>}
       </div>
       {process.env.NODE_ENV !== 'production' && (
-        <div className="TitleBar__devBuildIndicator" onClick={() => dispatch(toggleKitchenSink())}>
+        <div
+          className="TitleBar__devBuildIndicator"
+          onClick={() => dispatch(toggleKitchenSink())}>
           <Icon name="bug" />
         </div>
       )}
diff --git a/tgui/packages/tgui_ch/links.js b/tgui/packages/tgui_ch/links.js
index a3710930a4..f2ad10abfc 100644
--- a/tgui/packages/tgui_ch/links.js
+++ b/tgui/packages/tgui_ch/links.js
@@ -26,7 +26,8 @@ export const captureExternalLinks = () => {
     }
     const hrefAttr = target.getAttribute('href') || '';
     // Leave BYOND links alone
-    const isByondLink = hrefAttr.charAt(0) === '?' || hrefAttr.startsWith('byond://');
+    const isByondLink =
+      hrefAttr.charAt(0) === '?' || hrefAttr.startsWith('byond://');
     if (isByondLink) {
       return;
     }
diff --git a/tgui/packages/tgui_ch/renderer.ts b/tgui/packages/tgui_ch/renderer.ts
index 5a8144897b..9504d74321 100644
--- a/tgui/packages/tgui_ch/renderer.ts
+++ b/tgui/packages/tgui_ch/renderer.ts
@@ -18,7 +18,9 @@ export const suspendRenderer = () => {
   suspended = true;
 };
 
-type CreateRenderer = <T extends unknown[] = [unknown]>(getVNode?: (...args: T) => any) => (...args: T) => void;
+type CreateRenderer = <T extends unknown[] = [unknown]>(
+  getVNode?: (...args: T) => any
+) => (...args: T) => void;
 
 export const createRenderer: CreateRenderer =
   (getVNode) =>
@@ -40,15 +42,27 @@ export const createRenderer: CreateRenderer =
     // Report rendering time
     if (process.env.NODE_ENV !== 'production') {
       if (initialRender === 'resumed') {
-        logger.log('rendered in', perf.measure('render/start', 'render/finish'));
+        logger.log(
+          'rendered in',
+          perf.measure('render/start', 'render/finish')
+        );
       } else if (initialRender) {
         logger.debug('serving from:', location.href);
         logger.debug('bundle entered in', perf.measure('inception', 'init'));
         logger.debug('initialized in', perf.measure('init', 'render/start'));
-        logger.log('rendered in', perf.measure('render/start', 'render/finish'));
-        logger.log('fully loaded in', perf.measure('inception', 'render/finish'));
+        logger.log(
+          'rendered in',
+          perf.measure('render/start', 'render/finish')
+        );
+        logger.log(
+          'fully loaded in',
+          perf.measure('inception', 'render/finish')
+        );
       } else {
-        logger.debug('rendered in', perf.measure('render/start', 'render/finish'));
+        logger.debug(
+          'rendered in',
+          perf.measure('render/start', 'render/finish')
+        );
       }
     }
     if (initialRender) {
diff --git a/tgui/packages/tgui_ch/store.js b/tgui/packages/tgui_ch/store.js
index c89db0f594..5aa7f21fd9 100644
--- a/tgui/packages/tgui_ch/store.js
+++ b/tgui/packages/tgui_ch/store.js
@@ -25,7 +25,12 @@ export const configureStore = (options = {}) => {
   ]);
   const middleware = !sideEffects
     ? []
-    : [...(options.middleware?.pre || []), assetMiddleware, backendMiddleware, ...(options.middleware?.post || [])];
+    : [
+      ...(options.middleware?.pre || []),
+      assetMiddleware,
+      backendMiddleware,
+      ...(options.middleware?.post || []),
+    ];
   if (process.env.NODE_ENV !== 'production') {
     // We are using two if statements because Webpack is capable of
     // removing this specific block as dead code.
diff --git a/tgui/packages/tgui_ch/stories/Button.stories.js b/tgui/packages/tgui_ch/stories/Button.stories.js
index d3b6dc92c4..36f029e778 100644
--- a/tgui/packages/tgui_ch/stories/Button.stories.js
+++ b/tgui/packages/tgui_ch/stories/Button.stories.js
@@ -40,7 +40,13 @@ const Story = (props, context) => {
         <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" />
+        <Button
+          my={1}
+          lineHeight={2}
+          minWidth={15}
+          textAlign="center"
+          content="With Box props"
+        />
       </Box>
       <Box mb={1}>
         {COLORS_STATES.map((color) => (
diff --git a/tgui/packages/tgui_ch/stories/ByondUi.stories.js b/tgui/packages/tgui_ch/stories/ByondUi.stories.js
index c8fe8597eb..f7bf09c04a 100644
--- a/tgui/packages/tgui_ch/stories/ByondUi.stories.js
+++ b/tgui/packages/tgui_ch/stories/ByondUi.stories.js
@@ -52,7 +52,11 @@ const Story = (props, context) => {
             Evaluate
           </Button>
         }>
-        <Box as="textarea" width="100%" height="10em" onChange={(e) => setCode(e.target.value)}>
+        <Box
+          as="textarea"
+          width="100%"
+          height="10em"
+          onChange={(e) => setCode(e.target.value)}>
           {code}
         </Box>
       </Section>
diff --git a/tgui/packages/tgui_ch/stories/Flex.stories.js b/tgui/packages/tgui_ch/stories/Flex.stories.js
index 0119c5f95e..dd96c6fe17 100644
--- a/tgui/packages/tgui_ch/stories/Flex.stories.js
+++ b/tgui/packages/tgui_ch/stories/Flex.stories.js
@@ -14,14 +14,22 @@ export const meta = {
 
 const Story = (props, context) => {
   const [grow, setGrow] = useLocalState(context, 'fs_grow', 1);
-  const [direction, setDirection] = useLocalState(context, 'fs_direction', 'column');
+  const [direction, setDirection] = useLocalState(
+    context,
+    'fs_direction',
+    'column'
+  );
   const [fill, setFill] = useLocalState(context, 'fs_fill', true);
   const [hasTitle, setHasTitle] = useLocalState(context, 'fs_title', true);
   return (
     <Flex height="100%" direction="column">
       <Flex.Item mb={1}>
         <Section>
-          <Button fluid onClick={() => setDirection(direction === 'column' ? 'row' : 'column')}>
+          <Button
+            fluid
+            onClick={() =>
+              setDirection(direction === 'column' ? 'row' : 'column')
+            }>
             {`Flex direction="${direction}"`}
           </Button>
           <Button fluid onClick={() => setGrow(Number(!grow))}>
@@ -30,14 +38,20 @@ const Story = (props, context) => {
           <Button fluid onClick={() => setFill(!fill)}>
             {`Section fill={${String(fill)}}`}
           </Button>
-          <Button fluid selected={hasTitle} onClick={() => setHasTitle(!hasTitle)}>
+          <Button
+            fluid
+            selected={hasTitle}
+            onClick={() => setHasTitle(!hasTitle)}>
             {`Section title`}
           </Button>
         </Section>
       </Flex.Item>
       <Flex.Item grow={1}>
         <Flex height="100%" direction={direction}>
-          <Flex.Item mr={direction === 'row' && 1} mb={direction === 'column' && 1} grow={grow}>
+          <Flex.Item
+            mr={direction === 'row' && 1}
+            mb={direction === 'column' && 1}
+            grow={grow}>
             <Section title={hasTitle && 'Section 1'} fill={fill}>
               Content
             </Section>
diff --git a/tgui/packages/tgui_ch/stories/Input.stories.js b/tgui/packages/tgui_ch/stories/Input.stories.js
index 99adae3ec9..beca0acb41 100644
--- a/tgui/packages/tgui_ch/stories/Input.stories.js
+++ b/tgui/packages/tgui_ch/stories/Input.stories.js
@@ -94,7 +94,12 @@ const Story = (props, context) => {
               onDrag={(e, value) => setNumber(value)}>
               {(control) => (
                 <Box onMouseDown={control.handleDragStart}>
-                  <Icon size={4} color="yellow" name="times" rotation={control.displayValue * 4} />
+                  <Icon
+                    size={4}
+                    color="yellow"
+                    name="times"
+                    rotation={control.displayValue * 4}
+                  />
                   {control.inputElement}
                 </Box>
               )}
diff --git a/tgui/packages/tgui_ch/stories/Storage.stories.js b/tgui/packages/tgui_ch/stories/Storage.stories.js
index edd6a3aadf..be42dd49e5 100644
--- a/tgui/packages/tgui_ch/stories/Storage.stories.js
+++ b/tgui/packages/tgui_ch/stories/Storage.stories.js
@@ -31,8 +31,12 @@ const Story = (props, context) => {
         </Button>
       }>
       <LabeledList>
-        <LabeledList.Item label="Keys in use">{localStorage.length}</LabeledList.Item>
-        <LabeledList.Item label="Remaining space">{formatSiUnit(localStorage.remainingSpace, 0, 'B')}</LabeledList.Item>
+        <LabeledList.Item label="Keys in use">
+          {localStorage.length}
+        </LabeledList.Item>
+        <LabeledList.Item label="Remaining space">
+          {formatSiUnit(localStorage.remainingSpace, 0, 'B')}
+        </LabeledList.Item>
       </LabeledList>
     </Section>
   );
diff --git a/tgui/packages/tgui_ch/stories/Tabs.stories.js b/tgui/packages/tgui_ch/stories/Tabs.stories.js
index 87cd060929..333890032d 100644
--- a/tgui/packages/tgui_ch/stories/Tabs.stories.js
+++ b/tgui/packages/tgui_ch/stories/Tabs.stories.js
@@ -93,7 +93,9 @@ const Story = (props, context) => {
         <TabsPrefab />
         Some text
       </Section>
-      <Section>Section-less tabs appear the same as tabs in a fitted section:</Section>
+      <Section>
+        Section-less tabs appear the same as tabs in a fitted section:
+      </Section>
       <TabsPrefab />
     </>
   );
@@ -103,14 +105,25 @@ const TabsPrefab = (props, context) => {
   const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
   const [tabProps] = useLocalState(context, 'tabProps', {});
   return (
-    <Tabs vertical={tabProps.vertical} fluid={tabProps.fluid} textAlign={tabProps.centered && 'center'}>
+    <Tabs
+      vertical={tabProps.vertical}
+      fluid={tabProps.fluid}
+      textAlign={tabProps.centered && 'center'}>
       {TAB_RANGE.map((text, i) => (
         <Tabs.Tab
           key={i}
           selected={i === tabIndex}
           icon={tabProps.icon && 'info-circle'}
-          leftSlot={tabProps.leftSlot && <Button circular compact color="transparent" icon="times" />}
-          rightSlot={tabProps.rightSlot && <Button circular compact color="transparent" icon="times" />}
+          leftSlot={
+            tabProps.leftSlot && (
+              <Button circular compact color="transparent" icon="times" />
+            )
+          }
+          rightSlot={
+            tabProps.rightSlot && (
+              <Button circular compact color="transparent" icon="times" />
+            )
+          }
           onClick={() => setTabIndex(i)}>
           {text}
         </Tabs.Tab>
diff --git a/tgui/packages/tgui_ch/stories/Themes.stories.js b/tgui/packages/tgui_ch/stories/Themes.stories.js
index 90cb6896b6..2a9db1e974 100644
--- a/tgui/packages/tgui_ch/stories/Themes.stories.js
+++ b/tgui/packages/tgui_ch/stories/Themes.stories.js
@@ -18,7 +18,11 @@ const Story = (props, context) => {
     <Section>
       <LabeledList>
         <LabeledList.Item label="Use theme">
-          <Input placeholder="theme_name" value={theme} onInput={(e, value) => setTheme(value)} />
+          <Input
+            placeholder="theme_name"
+            value={theme}
+            onInput={(e, value) => setTheme(value)}
+          />
         </LabeledList.Item>
       </LabeledList>
     </Section>
diff --git a/tgui/packages/tgui_ch/stories/Tooltip.stories.js b/tgui/packages/tgui_ch/stories/Tooltip.stories.js
index 4036bc681a..58b949d41f 100644
--- a/tgui/packages/tgui_ch/stories/Tooltip.stories.js
+++ b/tgui/packages/tgui_ch/stories/Tooltip.stories.js
@@ -12,7 +12,14 @@ export const meta = {
 };
 
 const Story = () => {
-  const positions = ['top', 'left', 'right', 'bottom', 'bottom-start', 'bottom-end'];
+  const positions = [
+    'top',
+    'left',
+    'right',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+  ];
 
   return (
     <Section>
diff --git a/tgui/packages/tgui_ch/stories/common.js b/tgui/packages/tgui_ch/stories/common.js
index 3c37af2229..08703e32d2 100644
--- a/tgui/packages/tgui_ch/stories/common.js
+++ b/tgui/packages/tgui_ch/stories/common.js
@@ -11,7 +11,8 @@ export const BoxWithSampleText = (props) => {
     <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.
+        The wide electrification of the southern provinces will give a powerful
+        impetus to the growth of agriculture.
       </Box>
     </Box>
   );
diff --git a/tgui/packages/tgui_ch/styles/base.scss b/tgui/packages/tgui_ch/styles/base.scss
index fc3ac70af1..77754a2cef 100644
--- a/tgui/packages/tgui_ch/styles/base.scss
+++ b/tgui/packages/tgui_ch/styles/base.scss
@@ -10,8 +10,14 @@ $color-fg: #ffffff !default;
 $color-bg: #252525 !default;
 $color-bg-section: rgba(0, 0, 0, 0.33) !default;
 $color-bg-grad-spread: 2% !default;
-$color-bg-start: color.adjust($color-bg, $lightness: $color-bg-grad-spread) !default;
-$color-bg-end: color.adjust($color-bg, $lightness: -$color-bg-grad-spread) !default;
+$color-bg-start: color.adjust(
+  $color-bg,
+  $lightness: $color-bg-grad-spread
+) !default;
+$color-bg-end: color.adjust(
+  $color-bg,
+  $lightness: -$color-bg-grad-spread
+) !default;
 
 $unit: 12px;
 $font-size: 1 * $unit !default;
diff --git a/tgui/packages/tgui_ch/styles/components/Knob.scss b/tgui/packages/tgui_ch/styles/components/Knob.scss
index 2c806610bb..1a5f0d10a9 100644
--- a/tgui/packages/tgui_ch/styles/components/Knob.scss
+++ b/tgui/packages/tgui_ch/styles/components/Knob.scss
@@ -42,7 +42,11 @@ $inner-padding: 0.1em;
   right: $inner-padding;
   margin: 0.3em;
   background-color: $knob-color;
-  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
+  background-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.15) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
   border-radius: 50%;
   box-shadow: 0 0.05em 0.5em 0 rgba(0, 0, 0, 0.5);
 }
diff --git a/tgui/packages/tgui_ch/styles/components/RoundGauge.scss b/tgui/packages/tgui_ch/styles/components/RoundGauge.scss
index 7405995c5a..be95519d64 100644
--- a/tgui/packages/tgui_ch/styles/components/RoundGauge.scss
+++ b/tgui/packages/tgui_ch/styles/components/RoundGauge.scss
@@ -68,7 +68,10 @@ $pi: 3.1416;
   .RoundGauge__alert--#{$color-name} {
     fill: $color-value;
     transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
-    animation: RoundGauge__alertAnim 1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
+    animation: RoundGauge__alertAnim
+      1s
+      cubic-bezier(0.34, 1.56, 0.64, 1)
+      infinite;
   }
 }
 
diff --git a/tgui/packages/tgui_ch/styles/components/Tabs.scss b/tgui/packages/tgui_ch/styles/components/Tabs.scss
index 465e386bfe..b2cdcc95de 100644
--- a/tgui/packages/tgui_ch/styles/components/Tabs.scss
+++ b/tgui/packages/tgui_ch/styles/components/Tabs.scss
@@ -8,7 +8,10 @@
 @use '../base.scss';
 @use '../colors.scss';
 
-$color-default: color.scale(colors.fg(colors.$primary), $lightness: 75%) !default;
+$color-default: color.scale(
+  colors.fg(colors.$primary),
+  $lightness: 75%
+) !default;
 $text-color: rgba(255, 255, 255, 0.5) !default;
 $text-color-selected: color.scale($color-default, $lightness: 25%) !default;
 $tab-color: transparent !default;
diff --git a/tgui/packages/tgui_ch/styles/functions.scss b/tgui/packages/tgui_ch/styles/functions.scss
index d4ad2ff76f..52468e292b 100644
--- a/tgui/packages/tgui_ch/styles/functions.scss
+++ b/tgui/packages/tgui_ch/styles/functions.scss
@@ -28,7 +28,11 @@
 
 // Increases perceptual color lightness.
 @function lighten($color, $percent) {
-  $scaled: hsl(color.hue($color), color.saturation($color), color.lightness($color) * (1 + num($percent)));
+  $scaled: hsl(
+    color.hue($color),
+    color.saturation($color),
+    color.lightness($color) * (1 + num($percent))
+  );
   $mixed: color.mix(#ffffff, $color, 100% * num($percent));
   @return color.mix($scaled, $mixed, 75%);
 }
@@ -59,12 +63,16 @@
     );
   }
 
-  @return (map.get($colors, 'red') * 0.2126) + (map.get($colors, 'green') * 0.7152) +
-    (map.get($colors, 'blue') * 0.0722);
+  @return (map.get($colors, 'red') * 0.2126) +
+    (map.get($colors, 'green') * 0.7152) + (map.get($colors, 'blue') * 0.0722);
 }
 
 // Blends an RGBA color with a static background color based on its
 // alpha channel. Returns an RGB color, which is compatible with IE8.
 @function fake-alpha($color-rgba, $color-background) {
-  @return color.mix(color.change($color-rgba, $alpha: 1), $color-background, color.alpha($color-rgba) * 100%);
+  @return color.mix(
+    color.change($color-rgba, $alpha: 1),
+    $color-background,
+    color.alpha($color-rgba) * 100%
+  );
 }
diff --git a/tgui/packages/tgui_ch/styles/layouts/Layout.scss b/tgui/packages/tgui_ch/styles/layouts/Layout.scss
index edcb12ae28..6528642e87 100644
--- a/tgui/packages/tgui_ch/styles/layouts/Layout.scss
+++ b/tgui/packages/tgui_ch/styles/layouts/Layout.scss
@@ -11,13 +11,34 @@ $scrollbar-color-multiplier: 1 !default;
 .Layout,
 .Layout * {
   // Fancy scrollbar
-  scrollbar-base-color: color.scale(base.$color-bg, $lightness: -25% * $scrollbar-color-multiplier);
-  scrollbar-face-color: color.scale(base.$color-bg, $lightness: 10% * $scrollbar-color-multiplier);
-  scrollbar-3dlight-color: color.scale(base.$color-bg, $lightness: 0% * $scrollbar-color-multiplier);
-  scrollbar-highlight-color: color.scale(base.$color-bg, $lightness: 0% * $scrollbar-color-multiplier);
-  scrollbar-track-color: color.scale(base.$color-bg, $lightness: -25% * $scrollbar-color-multiplier);
-  scrollbar-arrow-color: color.scale(base.$color-bg, $lightness: 50% * $scrollbar-color-multiplier);
-  scrollbar-shadow-color: color.scale(base.$color-bg, $lightness: 10% * $scrollbar-color-multiplier);
+  scrollbar-base-color: color.scale(
+    base.$color-bg,
+    $lightness: -25% * $scrollbar-color-multiplier
+  );
+  scrollbar-face-color: color.scale(
+    base.$color-bg,
+    $lightness: 10% * $scrollbar-color-multiplier
+  );
+  scrollbar-3dlight-color: color.scale(
+    base.$color-bg,
+    $lightness: 0% * $scrollbar-color-multiplier
+  );
+  scrollbar-highlight-color: color.scale(
+    base.$color-bg,
+    $lightness: 0% * $scrollbar-color-multiplier
+  );
+  scrollbar-track-color: color.scale(
+    base.$color-bg,
+    $lightness: -25% * $scrollbar-color-multiplier
+  );
+  scrollbar-arrow-color: color.scale(
+    base.$color-bg,
+    $lightness: 50% * $scrollbar-color-multiplier
+  );
+  scrollbar-shadow-color: color.scale(
+    base.$color-bg,
+    $lightness: 10% * $scrollbar-color-multiplier
+  );
 }
 
 .Layout__content {
diff --git a/tgui/packages/tgui_ch/styles/layouts/Window.scss b/tgui/packages/tgui_ch/styles/layouts/Window.scss
index b804273d8e..232dd8396b 100644
--- a/tgui/packages/tgui_ch/styles/layouts/Window.scss
+++ b/tgui/packages/tgui_ch/styles/layouts/Window.scss
@@ -15,7 +15,11 @@
   right: 0;
   color: base.$color-fg;
   background-color: base.$color-bg;
-  background-image: linear-gradient(to bottom, base.$color-bg-start 0%, base.$color-bg-end 100%);
+  background-image: linear-gradient(
+    to bottom,
+    base.$color-bg-start 0%,
+    base.$color-bg-end 100%
+  );
 }
 
 .Window__titleBar {
diff --git a/tgui/packages/tgui_ch/styles/themes/abductor.scss b/tgui/packages/tgui_ch/styles/themes/abductor.scss
index e577f2a91e..acab3bfd41 100644
--- a/tgui/packages/tgui_ch/styles/themes/abductor.scss
+++ b/tgui/packages/tgui_ch/styles/themes/abductor.scss
@@ -32,18 +32,36 @@
       'color-danger': #9a9d00
     )
   );
-  @include meta.load-css('../components/Input.scss', $with: ('border-color': #404b6e));
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #404b6e)
+  );
   @include meta.load-css('../components/NanoMap.scss');
-  @include meta.load-css('../components/NoticeBox.scss', $with: ('background-color': #a82d55));
-  @include meta.load-css('../components/NumberInput.scss', $with: ('border-color': #404b6e));
-  @include meta.load-css('../components/ProgressBar.scss', $with: ('background-color': rgba(0, 0, 0, 0.5)));
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #a82d55)
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #404b6e)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
   @include meta.load-css('../components/Section.scss');
-  @include meta.load-css('../components/Tooltip.scss', $with: ('background-color': #a82d55));
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #a82d55)
+  );
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: ('background-color': #9e1b46));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #9e1b46)
+  );
 
   .Layout__content {
     background-image: none;
diff --git a/tgui/packages/tgui_ch/styles/themes/cardtable.scss b/tgui/packages/tgui_ch/styles/themes/cardtable.scss
index a96cf45770..773171187e 100644
--- a/tgui/packages/tgui_ch/styles/themes/cardtable.scss
+++ b/tgui/packages/tgui_ch/styles/themes/cardtable.scss
@@ -33,14 +33,23 @@
       'color-danger': #9a9d00
     )
   );
-  @include meta.load-css('../components/NumberInput.scss', $with: ('border-color': #fff));
-  @include meta.load-css('../components/ProgressBar.scss', $with: ('background-color': rgba(0, 0, 0, 0.5)));
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #fff)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
   @include meta.load-css('../components/Section.scss');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: ('background-color': #381608));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #381608)
+  );
 
   .Button {
     border: base.em(2px) solid #fff;
diff --git a/tgui/packages/tgui_ch/styles/themes/hackerman.scss b/tgui/packages/tgui_ch/styles/themes/hackerman.scss
index 94b96082d8..e7a16bce25 100644
--- a/tgui/packages/tgui_ch/styles/themes/hackerman.scss
+++ b/tgui/packages/tgui_ch/styles/themes/hackerman.scss
@@ -23,16 +23,26 @@
   // Components
   @include meta.load-css(
     '../components/Button.scss',
-    $with: ('color-default': colors.$primary, 'color-disabled': #4a6a4a, 'color-selected': #00ff00)
+    $with: (
+      'color-default': colors.$primary,
+      'color-disabled': #4a6a4a,
+      'color-selected': #00ff00
+    )
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': colors.$primary)
   );
-  @include meta.load-css('../components/Input.scss', $with: ('border-color': colors.$primary));
   @include meta.load-css('../components/Modal.scss');
   @include meta.load-css('../components/Section.scss');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: ('background-color': #223d22));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #223d22)
+  );
 
   .Layout__content {
     background-image: none;
diff --git a/tgui/packages/tgui_ch/styles/themes/malfunction.scss b/tgui/packages/tgui_ch/styles/themes/malfunction.scss
index 4402990c21..d96fa1b83c 100644
--- a/tgui/packages/tgui_ch/styles/themes/malfunction.scss
+++ b/tgui/packages/tgui_ch/styles/themes/malfunction.scss
@@ -31,18 +31,36 @@
       'color-danger': #9a9d00
     )
   );
-  @include meta.load-css('../components/Input.scss', $with: ('border-color': #910101));
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #910101)
+  );
   @include meta.load-css('../components/NanoMap.scss');
-  @include meta.load-css('../components/NoticeBox.scss', $with: ('background-color': #1a3f57));
-  @include meta.load-css('../components/NumberInput.scss', $with: ('border-color': #910101));
-  @include meta.load-css('../components/ProgressBar.scss', $with: ('background-color': rgba(0, 0, 0, 0.5)));
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #1a3f57)
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #910101)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
   @include meta.load-css('../components/Section.scss');
-  @include meta.load-css('../components/Tooltip.scss', $with: ('background-color': #235577));
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #235577)
+  );
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: ('background-color': #1a3f57));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #1a3f57)
+  );
 
   .Layout__content {
     background-image: none;
diff --git a/tgui/packages/tgui_ch/styles/themes/neutral.scss b/tgui/packages/tgui_ch/styles/themes/neutral.scss
index 9d59f7b42c..b6893ffc85 100644
--- a/tgui/packages/tgui_ch/styles/themes/neutral.scss
+++ b/tgui/packages/tgui_ch/styles/themes/neutral.scss
@@ -29,7 +29,10 @@ $neutral: #ffb300;
   );
   @include meta.load-css(
     '../components/ProgressBar.scss',
-    $with: ('color-default-fill': $neutral, 'background-color': rgba(0, 0, 0, 0.5))
+    $with: (
+      'color-default-fill': $neutral,
+      'background-color': rgba(0, 0, 0, 0.5)
+    )
   );
   @include meta.load-css('../components/Section.scss');
 
diff --git a/tgui/packages/tgui_ch/styles/themes/ntos.scss b/tgui/packages/tgui_ch/styles/themes/ntos.scss
index d722b8bea7..cc6514509f 100644
--- a/tgui/packages/tgui_ch/styles/themes/ntos.scss
+++ b/tgui/packages/tgui_ch/styles/themes/ntos.scss
@@ -20,11 +20,17 @@ $nanotrasen: #384e68;
   // Components
   @include meta.load-css(
     '../components/Button.scss',
-    $with: ('color-default': $nanotrasen, 'color-transparent-text': rgba(227, 240, 255, 0.75))
+    $with: (
+      'color-default': $nanotrasen,
+      'color-transparent-text': rgba(227, 240, 255, 0.75)
+    )
   );
   @include meta.load-css(
     '../components/ProgressBar.scss',
-    $with: ('color-default-fill': $nanotrasen, 'background-color': rgba(0, 0, 0, 0.5))
+    $with: (
+      'color-default-fill': $nanotrasen,
+      'background-color': rgba(0, 0, 0, 0.5)
+    )
   );
   @include meta.load-css('../components/Section.scss');
 
diff --git a/tgui/packages/tgui_ch/styles/themes/paper.scss b/tgui/packages/tgui_ch/styles/themes/paper.scss
index e861c4c282..8ea596dfa0 100644
--- a/tgui/packages/tgui_ch/styles/themes/paper.scss
+++ b/tgui/packages/tgui_ch/styles/themes/paper.scss
@@ -31,7 +31,10 @@ $font-size: 24px;
 
   // Components
   @include meta.load-css('../components/Tabs.scss');
-  @include meta.load-css('../components/Section.scss', $with: ('background-color': rgba(0, 0, 0, 0.1)));
+  @include meta.load-css(
+    '../components/Section.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.1))
+  );
   @include meta.load-css(
     '../components/Button.scss',
     $with: (
diff --git a/tgui/packages/tgui_ch/styles/themes/pda-retro.scss b/tgui/packages/tgui_ch/styles/themes/pda-retro.scss
index 54fbeaac07..2746e09c6e 100644
--- a/tgui/packages/tgui_ch/styles/themes/pda-retro.scss
+++ b/tgui/packages/tgui_ch/styles/themes/pda-retro.scss
@@ -30,8 +30,14 @@
       'color-danger': #9a9d00
     )
   );
-  @include meta.load-css('../components/ProgressBar.scss', $with: ('background-color': rgba(0, 0, 0, 0.5)));
-  @include meta.load-css('../components/Section.scss', $with: ('background-color': rgba(0, 0, 0, 0.1)));
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
+  @include meta.load-css(
+    '../components/Section.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.1))
+  );
 
   // Interfaces
   @include meta.load-css(
@@ -42,7 +48,10 @@
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: ('background-color': #363636));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #363636)
+  );
 
   .Button {
     color: #161613;
diff --git a/tgui/packages/tgui_ch/styles/themes/retro.scss b/tgui/packages/tgui_ch/styles/themes/retro.scss
index c979390a7f..e345f9115c 100644
--- a/tgui/packages/tgui_ch/styles/themes/retro.scss
+++ b/tgui/packages/tgui_ch/styles/themes/retro.scss
@@ -34,13 +34,19 @@
       'color-danger': #9a9d00
     )
   );
-  @include meta.load-css('../components/ProgressBar.scss', $with: ('background-color': rgba(0, 0, 0, 0.5)));
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
   @include meta.load-css('../components/Section.scss');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: ('background-color': #585337));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #585337)
+  );
 
   .Button {
     font-family: monospace;
diff --git a/tgui/packages/tgui_ch/styles/themes/syndicate.scss b/tgui/packages/tgui_ch/styles/themes/syndicate.scss
index 680c78a1de..144f0e6079 100644
--- a/tgui/packages/tgui_ch/styles/themes/syndicate.scss
+++ b/tgui/packages/tgui_ch/styles/themes/syndicate.scss
@@ -31,18 +31,36 @@
       'color-danger': #9a9d00
     )
   );
-  @include meta.load-css('../components/Input.scss', $with: ('border-color': #87ce87));
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #87ce87)
+  );
   @include meta.load-css('../components/NanoMap.scss');
-  @include meta.load-css('../components/NoticeBox.scss', $with: ('background-color': #910101));
-  @include meta.load-css('../components/NumberInput.scss', $with: ('border-color': #87ce87));
-  @include meta.load-css('../components/ProgressBar.scss', $with: ('background-color': rgba(0, 0, 0, 0.5)));
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #910101)
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #87ce87)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
   @include meta.load-css('../components/Section.scss');
-  @include meta.load-css('../components/Tooltip.scss', $with: ('background-color': #4a0202));
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #4a0202)
+  );
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: ('background-color': #910101));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #910101)
+  );
 
   .Layout__content {
     background-image: url('../../assets/bg-syndicate.svg');
diff --git a/tgui/packages/tgui_ch/styles/themes/wizard.scss b/tgui/packages/tgui_ch/styles/themes/wizard.scss
index 2f0de08e9a..861d1884af 100644
--- a/tgui/packages/tgui_ch/styles/themes/wizard.scss
+++ b/tgui/packages/tgui_ch/styles/themes/wizard.scss
@@ -32,18 +32,36 @@
       'color-danger': #b30707
     )
   );
-  @include meta.load-css('../components/Input.scss', $with: ('border-color': #404b6e));
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #404b6e)
+  );
   @include meta.load-css('../components/NanoMap.scss');
-  @include meta.load-css('../components/NoticeBox.scss', $with: ('background-color': #a82d55));
-  @include meta.load-css('../components/NumberInput.scss', $with: ('border-color': #404b6e));
-  @include meta.load-css('../components/ProgressBar.scss', $with: ('background-color': rgba(0, 0, 0, 0.5)));
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #a82d55)
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #404b6e)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
   @include meta.load-css('../components/Section.scss');
-  @include meta.load-css('../components/Tooltip.scss', $with: ('background-color': #2da848));
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #2da848)
+  );
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');
-  @include meta.load-css('../layouts/TitleBar.scss', $with: ('background-color': #1b9e26));
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #1b9e26)
+  );
 
   .Layout__content {
     background-image: url('../../assets/bg-wizard.svg');
diff --git a/vorestation.dme b/vorestation.dme
index 40105695a5..12798642e9 100644
--- a/vorestation.dme
+++ b/vorestation.dme
@@ -124,11 +124,8 @@
 #include "code\_global_vars\misc.dm"
 #include "code\_global_vars\mobs.dm"
 #include "code\_global_vars\sensitive.dm"
-<<<<<<< HEAD
-#include "code\_global_vars\traits.dm"
-=======
 #include "code\_global_vars\time_vars.dm"
->>>>>>> dd49b83167... Merge pull request #14964 from ItsSelis/selis-tgui-patch
+#include "code\_global_vars\traits.dm"
 #include "code\_global_vars\typecache.dm"
 #include "code\_global_vars\lists\mapping.dm"
 #include "code\_global_vars\lists\misc.dm"