diff --git a/code/modules/plumbing/plumbers/reaction_chamber.dm b/code/modules/plumbing/plumbers/reaction_chamber.dm
index 5fb124d8d7c..2e9f05d6fc5 100644
--- a/code/modules/plumbing/plumbers/reaction_chamber.dm
+++ b/code/modules/plumbing/plumbers/reaction_chamber.dm
@@ -83,11 +83,14 @@
 /obj/machinery/plumbing/reaction_chamber/ui_data(mob/user)
 	var/list/data = list()
 
-	var/list/text_reagents = list()
+	var/list/reagents_data = list()
 	for(var/datum/reagent/required_reagent as anything in required_reagents) //make a list where the key is text, because that looks alot better in the ui than a typepath
-		text_reagents[initial(required_reagent.name)] = required_reagents[required_reagent]
+		var/list/reagent_data = list()
+		reagent_data["name"] = initial(required_reagent.name)
+		reagent_data["required_reagent"] = required_reagents[required_reagent]
+		reagents_data += list(reagent_data)
 
-	data["reagents"] = text_reagents
+	data["reagents"] = reagents_data
 	data["emptying"] = emptying
 	data["temperature"] = round(reagents.chem_temp, 0.1)
 	data["ph"] = round(reagents.ph, 0.01)
diff --git a/tgui/packages/tgui/interfaces/ChemReactionChamber.js b/tgui/packages/tgui/interfaces/ChemReactionChamber.js
index 0105b803358..1479750fa11 100644
--- a/tgui/packages/tgui/interfaces/ChemReactionChamber.js
+++ b/tgui/packages/tgui/interfaces/ChemReactionChamber.js
@@ -1,7 +1,5 @@
-import { map } from 'common/collections';
-import { classes } from 'common/react';
 import { useBackend, useLocalState } from '../backend';
-import { AnimatedNumber, Box, Button, Flex, Input, LabeledList, NumberInput, Section, RoundGauge } from '../components';
+import { AnimatedNumber, Box, Button, Input, LabeledList, NumberInput, Section, RoundGauge, Stack } from '../components';
 import { Window } from '../layouts';
 import { round, toFixed } from 'common/math';
 
@@ -30,181 +28,206 @@ export const ChemReactionChamber = (props, context) => {
   return (
     <Window
       width={290}
-      height={280}>
-      <Window.Content scrollable>
-        <Section
-          title="Conditions"
-          buttons={(
-            <Flex>
-              <Box>
-                {"Target:"}
-              </Box>
-              <NumberInput
-                width="65px"
-                unit="K"
-                step={10}
-                stepPixelSize={3}
-                value={round(targetTemp)}
-                minValue={0}
-                maxValue={1000}
-                onDrag={(e, value) => act('temperature', {
-                  target: value,
-                })} />
-            </Flex>
-          )}>
-          <LabeledList>
-            <LabeledList.Item label="Current Temperature">
-              <AnimatedNumber
-                value={temperature}
-                format={value => toFixed(value) + ' K'} />
-            </LabeledList.Item>
-            <LabeledList.Item label="pH">
-              <Flex position="relative">
-                <AnimatedNumber value={ph}>
-                  {(_, value) => (
-                    <RoundGauge
-                      value={value}
+      height={400}>
+      <Window.Content>
+        <Stack vertical fill>
+          <Stack.Item>
+            <Section
+              title="Conditions"
+              buttons={(
+                <Stack>
+                  <Stack.Item mt={0.3}>
+                    {"Target:"}
+                  </Stack.Item>
+                  <Stack.Item>
+                    <NumberInput
+                      width="65px"
+                      unit="K"
+                      step={10}
+                      stepPixelSize={3}
+                      value={round(targetTemp)}
                       minValue={0}
-                      maxValue={14}
-                      format={value => null}
-                      left={-7.5}
-                      position="absolute"
-                      size={1.50}
-                      ranges={{
-                        "red": [-0.22, 1.5],
-                        "orange": [1.5, 3],
-                        "yellow": [3, 4.5],
-                        "olive": [4.5, 5],
-                        "good": [5, 6],
-                        "green": [6, 8.5],
-                        "teal": [8.5, 9.5],
-                        "blue": [9.5, 11],
-                        "purple": [11, 12.5],
-                        "violet": [12.5, 14],
-                      }} />
-                  )}
-                </AnimatedNumber>
-                <Flex position="relative"
-                  top={0.2}>
-                  <AnimatedNumber
-                    value={ph}
-                    format={value => round(value, 3)} />
-                </Flex>
-              </Flex>
-            </LabeledList.Item>
-          </LabeledList>
-        </Section>
-        <Section
-          title="Settings"
-          buttons={(
-            isReacting && (
-              <Box
-                inline
-                bold
-                color={"purple"}>
-                {"Reacting"}
-              </Box>
-            ) || (
-              <Box
-                inline
-                bold
-                color={emptying ? "bad" : "good"}>
-                {emptying ? "Emptying" : "Filling"}
-              </Box>
-            )
-          )}>
-          <LabeledList>
-            <tr className="LabledList__row">
-              <LabeledList.Item label="Acidic pH limit">
-                <td
-                  className={classes([
-                    "LabeledList__buttons",
-                    "LabeledList__cell",
-                  ])}>
-                  <NumberInput
-                    value={reagentAcidic}
-                    minValue={-1000}
-                    maxValue={1000}
-                    step={1}
-                    stepPixelSize={3}
-                    width="39px"
-                    onDrag={(e, value) => act('acidic', {
-                      target: value,
-                    })} />
-                  <Box inline mr={1} />
-                </td>
-              </LabeledList.Item>
-            </tr>
-            <tr className="LabledList__row">
-              <LabeledList.Item label="Alkaline pH limit">
-                <td
-                  className={classes([
-                    "LabeledList__buttons",
-                    "LabeledList__cell",
-                  ])}>
-                  <NumberInput
-                    value={reagentAlkaline}
-                    minValue={-1000}
-                    maxValue={1000}
-                    step={1}
-                    stepPixelSize={3}
-                    width="39px"
-                    onDrag={(e, value) => act('alkaline', {
-                      target: value,
-                    })} />
-                  <Box inline mr={1} />
-                </td>
-              </LabeledList.Item>
-            </tr>
-            <tr className="LabledList__row">
-              <td
-                colSpan="2"
-                className="LabeledList__cell">
-                <Input
-                  fluid
-                  value=""
-                  placeholder="Reagent Name"
-                  onInput={(e, value) => setReagentName(value)} />
-              </td>
-              <td
-                className={classes([
-                  "LabeledList__buttons",
-                  "LabeledList__cell",
-                ])}>
-                <NumberInput
-                  value={reagentQuantity}
-                  minValue={1}
-                  maxValue={100}
-                  step={1}
-                  stepPixelSize={3}
-                  width="39px"
-                  onDrag={(e, value) => setReagentQuantity(value)} />
-                <Box inline mr={1} />
-                <Button
-                  icon="plus"
-                  onClick={() => act('add', {
-                    chem: reagentName,
-                    amount: reagentQuantity,
-                  })} />
-              </td>
-            </tr>
-            {map((amount, reagent) => (
-              <LabeledList.Item
-                key={reagent}
-                label={reagent}
-                buttons={(
-                  <Button
-                    icon="minus"
-                    color="bad"
-                    onClick={() => act('remove', {
-                      chem: reagent,
-                    })} />
-                )}>
-                {amount}
-              </LabeledList.Item>
-            ))(reagents)}
-          </LabeledList>
-        </Section>
+                      maxValue={1000}
+                      onDrag={(e, value) => act('temperature', {
+                        target: value,
+                      })} />
+                  </Stack.Item>
+                </Stack>
+              )}>
+              <Stack vertical>
+                <Stack.Item>
+                  <Stack fill>
+                    <Stack.Item textColor="label">
+                      Current Temperature:
+                    </Stack.Item>
+                    <Stack.Item grow>
+                      <AnimatedNumber
+                        value={temperature}
+                        format={value => toFixed(value) + ' K'} />
+                    </Stack.Item>
+                    <Stack.Item grow>
+                      <RoundGauge
+                        value={ph}
+                        minValue={0}
+                        maxValue={14}
+                        format={() => null}
+                        position="absolute"
+                        size={1.50}
+                        top={0.5}
+                        right={0.5}
+                        ranges={{
+                          "red": [-0.22, 1.5],
+                          "orange": [1.5, 3],
+                          "yellow": [3, 4.5],
+                          "olive": [4.5, 5],
+                          "good": [5, 6],
+                          "green": [6, 8.5],
+                          "teal": [8.5, 9.5],
+                          "blue": [9.5, 11],
+                          "purple": [11, 12.5],
+                          "violet": [12.5, 14],
+                        }} />
+                    </Stack.Item>
+                  </Stack>
+                </Stack.Item>
+                <Stack.Item>
+                  <Stack fill>
+                    <Stack.Item textColor="label">
+                      {"ph:"}
+                    </Stack.Item>
+                    <Stack.Item grow={15}>
+                      {ph}
+                    </Stack.Item>
+                    <Stack.Item grow mt={1} mb={-0.5}>
+                      <Button
+                        color="transparent"
+                        icon="question"
+                        tooltip={multiline`
+                        In chemistry, pH is a scale used to specify
+                        the acidity or basicity of an aqueous solution.
+                        Acidic solutions are measured to have lower
+                        pH values than basic or alkaline solutions.
+                        The pH scale is logarithmic and inversely
+                        indicates the concentration of hydrogen ions
+                        in the solution.`}
+                        tooltipPosition="bottom-left" />
+                    </Stack.Item>
+                  </Stack>
+                </Stack.Item>
+              </Stack>
+            </Section>
+          </Stack.Item>
+          <Stack.Item grow>
+            <Section
+              title="Settings"
+              fill
+              scrollable
+              buttons={(
+                isReacting && (
+                  <Box
+                    inline
+                    bold
+                    color={"purple"}>
+                    {"Reacting"}
+                  </Box>
+                ) || (
+                  <Box
+                    fontSize="16px"
+                    inline
+                    bold
+                    color={emptying ? "bad" : "good"}>
+                    {emptying ? "Emptying" : "Filling"}
+                  </Box>
+                )
+              )}>
+              <Stack vertical fill>
+                <Stack.Item>
+                  <LabeledList>
+                    <LabeledList.Item label="Acidic pH limit">
+                      <NumberInput
+                        value={reagentAcidic}
+                        minValue={-1000}
+                        maxValue={1000}
+                        step={1}
+                        stepPixelSize={3}
+                        width="39px"
+                        onDrag={(e, value) => act('acidic', {
+                          target: value,
+                        })} />
+                    </LabeledList.Item>
+                    <LabeledList.Item label="Alkaline pH limit">
+                      <NumberInput
+                        value={reagentAlkaline}
+                        minValue={-1000}
+                        maxValue={1000}
+                        step={1}
+                        stepPixelSize={3}
+                        width="39px"
+                        onDrag={(e, value) => act('alkaline', {
+                          target: value,
+                        })} />
+                      <Box inline mr={1} />
+                    </LabeledList.Item>
+                  </LabeledList>
+                </Stack.Item>
+                <Stack.Item>
+                  <Stack fill>
+                    <Stack.Item grow>
+                      <Input
+                        fluid
+                        value=""
+                        placeholder="Reagent Name"
+                        onInput={(e, value) => setReagentName(value)} />
+                    </Stack.Item>
+                    <Stack.Item>
+                      <NumberInput
+                        value={reagentQuantity}
+                        minValue={1}
+                        maxValue={100}
+                        step={1}
+                        stepPixelSize={3}
+                        width="39px"
+                        onDrag={(e, value) => setReagentQuantity(value)} />
+                      <Box inline mr={1} />
+                    </Stack.Item>
+                    <Stack.Item>
+                      <Button
+                        icon="plus"
+                        onClick={() => act('add', {
+                          chem: reagentName,
+                          amount: reagentQuantity,
+                        })} />
+                    </Stack.Item>
+                  </Stack>
+                </Stack.Item>
+                <Stack.Item>
+                  <Stack vertical>
+                    {reagents.map(reagent => (
+                      <Stack.Item key={reagent}>
+                        <Stack fill>
+                          <Stack.Item mt={0.25} textColor="label">
+                            {reagent.name+":"}
+                          </Stack.Item>
+                          <Stack.Item mt={0.25} grow>
+                            {reagent.required_reagent}
+                          </Stack.Item>
+                          <Stack.Item>
+                            <Button
+                              icon="minus"
+                              color="bad"
+                              onClick={() => act('remove', {
+                                chem: reagent,
+                              })} />
+                          </Stack.Item>
+                        </Stack>
+                      </Stack.Item>
+                    ))}
+                  </Stack>
+                </Stack.Item>
+              </Stack>
+            </Section>
+          </Stack.Item>
+        </Stack>
       </Window.Content>
     </Window>
   );