diff --git a/tgui/packages/tgui/interfaces/Colormate.js b/tgui/packages/tgui/interfaces/Colormate.js
index 79bc3543e9..02810f2943 100644
--- a/tgui/packages/tgui/interfaces/Colormate.js
+++ b/tgui/packages/tgui/interfaces/Colormate.js
@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Button, Flex, Icon, NoticeBox, NumberInput, Section, Tabs } from '../components';
+import { Button, Icon, NoticeBox, NumberInput, Section, Table, Tabs, Slider } from '../components';
 import { Window } from '../layouts';
 
 export const Colormate = (props, context) => {
@@ -9,34 +9,38 @@ export const Colormate = (props, context) => {
   return (
     <Window width="980" height="720" resizable>
       <Window.Content overflow="auto">
-        {temp ? (
-          <NoticeBox>{temp}</NoticeBox>
-        ) : (null)}
-        {Object.keys(item).length ? (
-          <>
-            <Flex fill>
-              <Section width="50%" height="20%">
-                <center>Item:</center>
-                <img
-                  src={"data:image/jpeg;base64, " + item.sprite}
-                  width="100%"
-                  height="100%"
-                  style={{
-                    '-ms-interpolation-mode': 'nearest-neighbor',
-                  }} />
-              </Section>
-              <Section width="50%" height="20%">
-                <center>Preview:</center>
-                <img
-                  src={"data:image/jpeg;base64, " + item.preview}
-                  width="100%"
-                  height="100%"
-                  style={{
-                    '-ms-interpolation-mode': 'nearest-neighbor',
-                  }} />
-              </Section>
-            </Flex>
-            <Section>
+        <Section>
+          {temp ? (
+            <NoticeBox>{temp}</NoticeBox>
+          ) : (null)}
+          {Object.keys(item).length ? (
+            <>
+              <Table>
+                <Table.Cell width="50%">
+                  <Section>
+                    <center>Item:</center>
+                    <img
+                      src={"data:image/jpeg;base64, " + item.sprite}
+                      width="100%"
+                      height="100%"
+                      style={{
+                        '-ms-interpolation-mode': 'nearest-neighbor',
+                      }} />
+                  </Section>
+                </Table.Cell>
+                <Table.Cell>
+                  <Section>
+                    <center>Preview:</center>
+                    <img
+                      src={"data:image/jpeg;base64, " + item.preview}
+                      width="100%"
+                      height="100%"
+                      style={{
+                        '-ms-interpolation-mode': 'nearest-neighbor',
+                      }} />
+                  </Section>
+                </Table.Cell>
+              </Table>
               <Tabs fluid>
                 <Tabs.Tab
                   key="1"
@@ -63,68 +67,54 @@ export const Colormate = (props, context) => {
                   Matrix coloring (Advanced)
                 </Tabs.Tab>
               </Tabs>
-              {}
-              {activemode === 3 ? (
-                <>
-                  <center>Coloring: {item.name}</center>
-                  <ColormateMatrix />
-                </>
-              ) : activemode === 2 ? (
-                <>
-                  <center>Coloring: {item.name}</center>
-                  <ColormateHSL />
-                </>
-              )
-                : (
-                  <>
-                    <center>Coloring: {item.name}</center>
-                    <ColormateNoMatrix />
-                  </>
-                )}
-            </Section>
-          </>
-        ) : (
-          <Section>
+              <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')} />
+                </Table.Cell>
+                <Table.Cell width="66%">
+                  {activemode === 1 ? (
+                    <ColormateTint />
+                  ) : activemode === 2 ? (
+                    <ColormateHSV />
+                  ) : (
+                    <ColormateMatrix />
+                  )}
+                </Table.Cell>
+              </Table>
+            </>
+          ) : (
             <center>No item inserted.</center>
-          </Section>
-        )}
+          )}
+        </Section>
       </Window.Content>
     </Window>
   );
 };
 
-export const ColormateNoMatrix = (props, context) => {
+export const ColormateTint = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Section>
-      <Flex grow={1} fill>
-        <Flex.Item 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')} />
-        </Flex.Item>
-        <Flex.Item width="66%">
-          <Button
-            fluid
-            height="100%"
-            content="Select new color"
-            icon="paint-brush"
-            onClick={() => act('choose_color')} />
-        </Flex.Item>
-      </Flex>
-    </Section>
+    <Button
+      fluid
+      content="Select new color"
+      icon="paint-brush"
+      onClick={() => act('choose_color')}
+    />
   );
 };
 
@@ -132,242 +122,211 @@ export const ColormateMatrix = (props, context) => {
   const { act, data } = useBackend(context);
   const matrixcolors = data.matrixcolors || [];
   return (
-    <Section>
-      <Flex>
-        <Flex.Item width="33%">
-          <Button
-            fluid
-            content="Paint"
-            icon="fill"
-            onClick={() => act('matrix_paint')} />
-          <Button
-            fluid
-            content="Clear"
-            icon="eraser"
-            onClick={() => act('clear')} />
-          <Button
-            fluid
-            content="Eject"
-            icon="eject"
-            onClick={() => act('drop')} />
-        </Flex.Item>
-        <Flex.Item>
-          <Flex.Item>
-            RR: <NumberInput
-              width="50px"
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={matrixcolors.rr}
-              onChange={(e, value) => act('set_matrix_color', {
-                color: 1,
-                value,
-              })} />
-          </Flex.Item>
-          <Flex.Item>
-            GR: <NumberInput
-              width="50px"
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={matrixcolors.gr}
-              onChange={(e, value) => act('set_matrix_color', {
-                color: 4,
-                value,
-              })} />
-          </Flex.Item>
-          <Flex.Item>
-            BR: <NumberInput
-              width="50px"
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={matrixcolors.br}
-              onChange={(e, value) => act('set_matrix_color', {
-                color: 7,
-                value,
-              })} />
-          </Flex.Item>
-        </Flex.Item>
-        <Flex.Item>
-          <Flex.Item>
-            RG: <NumberInput
-              width="50px"
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={matrixcolors.rg}
-              onChange={(e, value) => act('set_matrix_color', {
-                color: 2,
-                value,
-              })} />
-          </Flex.Item>
-          <Flex.Item>
-            GG: <NumberInput
-              width="50px"
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={matrixcolors.gg}
-              onChange={(e, value) => act('set_matrix_color', {
-                color: 5,
-                value,
-              })} />
-          </Flex.Item>
-          <Flex.Item>
-            BG: <NumberInput
-              width="50px"
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={matrixcolors.bg}
-              onChange={(e, value) => act('set_matrix_color', {
-                color: 8,
-                value,
-              })} />
-          </Flex.Item>
-        </Flex.Item>
-        <Flex.Item>
-          <Flex.Item>
-            RB: <NumberInput
-              width="50px"
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={matrixcolors.rb}
-              onChange={(e, value) => act('set_matrix_color', {
-                color: 3,
-                value,
-              })} />
-          </Flex.Item>
-          <Flex.Item>
-            GB: <NumberInput
-              width="50px"
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={matrixcolors.gb}
-              onChange={(e, value) => act('set_matrix_color', {
-                color: 6,
-                value,
-              })} />
-          </Flex.Item>
-          <Flex.Item>
-            BB: <NumberInput
-              width="50px"
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={matrixcolors.bb}
-              onChange={(e, value) => act('set_matrix_color', {
-                color: 9,
-                value,
-              })} />
-          </Flex.Item>
-        </Flex.Item>
-        <Flex.Item>
-          <Flex.Item>
-            CR: <NumberInput
-              width="50px"
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={matrixcolors.cr}
-              onChange={(e, value) => act('set_matrix_color', {
-                color: 10,
-                value,
-              })} />
-          </Flex.Item>
-          <Flex.Item>
-            CG: <NumberInput
-              width="50px"
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={matrixcolors.cg}
-              onChange={(e, value) => act('set_matrix_color', {
-                color: 11,
-                value,
-              })} />
-          </Flex.Item>
-          <Flex.Item>
-            CB: <NumberInput
-              width="50px"
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={matrixcolors.cb}
-              onChange={(e, value) => act('set_matrix_color', {
-                color: 12,
-                value,
-              })} />
-          </Flex.Item>
-        </Flex.Item>
-        <Flex.Item width="33%">
-          <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.
-        </Flex.Item>
-      </Flex>
-    </Section>
+    <Table>
+      <Table.Cell>
+        <Table.Row>
+          RR: <NumberInput
+            width="50px"
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={matrixcolors.rr}
+            onChange={(e, value) => act('set_matrix_color', {
+              color: 1,
+              value,
+            })} />
+        </Table.Row>
+        <Table.Row>
+          GR: <NumberInput
+            width="50px"
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={matrixcolors.gr}
+            onChange={(e, value) => act('set_matrix_color', {
+              color: 4,
+              value,
+            })} />
+        </Table.Row>
+        <Table.Row>
+          BR: <NumberInput
+            width="50px"
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={matrixcolors.br}
+            onChange={(e, value) => act('set_matrix_color', {
+              color: 7,
+              value,
+            })} />
+        </Table.Row>
+      </Table.Cell>
+      <Table.Cell>
+        <Table.Row>
+          RG: <NumberInput
+            width="50px"
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={matrixcolors.rg}
+            onChange={(e, value) => act('set_matrix_color', {
+              color: 2,
+              value,
+            })} />
+        </Table.Row>
+        <Table.Row>
+          GG: <NumberInput
+            width="50px"
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={matrixcolors.gg}
+            onChange={(e, value) => act('set_matrix_color', {
+              color: 5,
+              value,
+            })} />
+        </Table.Row>
+        <Table.Row>
+          BG: <NumberInput
+            width="50px"
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={matrixcolors.bg}
+            onChange={(e, value) => act('set_matrix_color', {
+              color: 8,
+              value,
+            })} />
+        </Table.Row>
+      </Table.Cell>
+      <Table.Cell>
+        <Table.Row>
+          RB: <NumberInput
+            width="50px"
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={matrixcolors.rb}
+            onChange={(e, value) => act('set_matrix_color', {
+              color: 3,
+              value,
+            })} />
+        </Table.Row>
+        <Table.Row>
+          GB: <NumberInput
+            width="50px"
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={matrixcolors.gb}
+            onChange={(e, value) => act('set_matrix_color', {
+              color: 6,
+              value,
+            })} />
+        </Table.Row>
+        <Table.Row>
+          BB: <NumberInput
+            width="50px"
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={matrixcolors.bb}
+            onChange={(e, value) => act('set_matrix_color', {
+              color: 9,
+              value,
+            })} />
+        </Table.Row>
+      </Table.Cell>
+      <Table.Cell>
+        <Table.Row>
+          CR: <NumberInput
+            width="50px"
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={matrixcolors.cr}
+            onChange={(e, value) => act('set_matrix_color', {
+              color: 10,
+              value,
+            })} />
+        </Table.Row>
+        <Table.Row>
+          CG: <NumberInput
+            width="50px"
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={matrixcolors.cg}
+            onChange={(e, value) => act('set_matrix_color', {
+              color: 11,
+              value,
+            })} />
+        </Table.Row>
+        <Table.Row>
+          CB: <NumberInput
+            width="50px"
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={matrixcolors.cb}
+            onChange={(e, value) => act('set_matrix_color', {
+              color: 12,
+              value,
+            })} />
+        </Table.Row>
+      </Table.Cell>
+      <Table.Cell width="40%">
+        <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.
+      </Table.Cell>
+    </Table>
   );
 };
 
-export const ColormateHSL = (props, context) => {
+export const ColormateHSV = (props, context) => {
   const { act, data } = useBackend(context);
   const { buildhue, buildsat, buildval } = data;
   return (
-    <Section>
-      <Flex grow={1} fill>
-        <Flex.Item 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')} />
-        </Flex.Item>
-        <Flex.Item width="66%">
-          <Flex.Item>
-            Hue: <NumberInput
-              minValue={0}
-              maxValue={360}
-              step={1}
-              value={buildhue}
-              onDrag={(e, value) => act('set_hue', {
-                buildhue: value,
-              })} />
-          </Flex.Item>
-          <Flex.Item>
-            Saturation: <NumberInput
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={buildsat}
-              onDrag={(e, value) => act('set_sat', {
-                buildsat: value,
-              })} />
-          </Flex.Item>
-          <Flex.Item>
-            Value: <NumberInput
-              minValue={-10}
-              maxValue={10}
-              step={0.01}
-              value={buildval}
-              onDrag={(e, value) => act('set_val', {
-                buildval: value,
-              })} />
-          </Flex.Item>
-        </Flex.Item>
-      </Flex>
-    </Section>
+    <Table>
+      <Table.Row>
+        <center>Hue:</center>
+        <Table.Cell width="85%">
+          <Slider
+            minValue={0}
+            maxValue={360}
+            step={1}
+            value={buildhue}
+            onDrag={(e, value) => act('set_hue', {
+              buildhue: value,
+            })} />
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <center>Saturation:</center>
+        <Table.Cell>
+          <Slider
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={buildsat}
+            onDrag={(e, value) => act('set_sat', {
+              buildsat: value,
+            })} />
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <center>Value:</center>
+        <Table.Cell>
+          <Slider
+            minValue={-10}
+            maxValue={10}
+            step={0.01}
+            value={buildval}
+            onDrag={(e, value) => act('set_val', {
+              buildval: value,
+            })} />
+        </Table.Cell>
+      </Table.Row>
+    </Table>
   );
-};
\ No newline at end of file
+};