diff --git a/tgui/packages/tgui/interfaces/Biogenerator.tsx b/tgui/packages/tgui/interfaces/Biogenerator.tsx
index 92efeadd5a0..24597404396 100644
--- a/tgui/packages/tgui/interfaces/Biogenerator.tsx
+++ b/tgui/packages/tgui/interfaces/Biogenerator.tsx
@@ -6,6 +6,7 @@ import { useBackend } from '../backend';
 import {
   Box,
   Button,
+  Icon,
   LabeledList,
   NoticeBox,
   NumberInput,
@@ -17,161 +18,75 @@ import {
 } from '../components';
 import { Window } from '../layouts';
 
-type BiogeneratorData = {
-  processing: BooleanLike;
+type Data = {
   beaker: BooleanLike;
-  reagent_color: string;
-  biomass: number;
-  max_visual_biomass: number;
-  can_process: BooleanLike;
   beakerCurrentVolume: number;
   beakerMaxVolume: number;
-  max_output: number;
-  efficiency: number;
+  biomass: number;
+  can_process: BooleanLike;
   categories: Category[];
+  efficiency: number;
+  max_output: number;
+  max_visual_biomass: number;
+  processing: BooleanLike;
+  reagent_color: string;
 };
 
 type Category = {
-  name: string;
   items: Design[];
+  name: string;
 };
 
 type Design = {
-  id: number;
-  name: string;
-  is_reagent: BooleanLike;
-  disable: BooleanLike;
-  cost: number;
   amount: number;
+  cost: number;
+  disable: BooleanLike;
+  id: string;
+  is_reagent: BooleanLike;
+  name: string;
 };
 
-export const Biogenerator = (props) => {
-  const { act, data } = useBackend<BiogeneratorData>();
-  const {
-    processing,
-    beaker,
-    reagent_color,
-    biomass,
-    max_visual_biomass,
-    can_process,
-    beakerCurrentVolume,
-    beakerMaxVolume,
-    max_output,
-    efficiency,
-    categories,
-  } = data;
+export function Biogenerator(props) {
+  const { data } = useBackend<Data>();
+  const { beaker, beakerCurrentVolume, beakerMaxVolume, categories } = data;
+
   const [selectedCategory, setSelectedCategory] = useState(
     data.categories[0]?.name,
   );
+
   const items =
     categories.find((category) => category.name === selectedCategory)?.items ||
     [];
+
+  const space = beaker ? beakerMaxVolume - beakerCurrentVolume : 1;
+
   return (
     <Window width={400} height={500}>
       <Window.Content>
         <Stack vertical fill>
           <Stack.Item>
-            <Section fill>
-              <LabeledList>
-                <LabeledList.Item
-                  label="Biomass"
-                  buttons={
-                    <Button
-                      width={7}
-                      lineHeight={2}
-                      align="center"
-                      icon="cog"
-                      iconSpin={processing ? 1 : 0}
-                      content="Generate"
-                      disabled={!can_process || processing}
-                      onClick={() => act('activate')}
-                    />
-                  }
-                >
-                  <ProgressBar
-                    value={biomass}
-                    minValue={0}
-                    maxValue={max_visual_biomass}
-                    color="good"
-                  >
-                    <Box
-                      lineHeight={1.9}
-                      style={{
-                        textShadow: '1px 1px 0 black',
-                      }}
-                    >
-                      {`${parseFloat(biomass.toFixed(2))} units`}
-                    </Box>
-                  </ProgressBar>
-                </LabeledList.Item>
-                {!!beaker && (
-                  <LabeledList.Item
-                    label="Container"
-                    buttons={
-                      <Button
-                        width={7}
-                        lineHeight={2}
-                        align="center"
-                        icon="eject"
-                        content="Eject"
-                        onClick={() => act('eject')}
-                      />
-                    }
-                  >
-                    <ProgressBar
-                      value={beakerCurrentVolume}
-                      minValue={0}
-                      height={2}
-                      maxValue={beakerMaxVolume}
-                      color={reagent_color}
-                    >
-                      <Box
-                        lineHeight={1.9}
-                        style={{
-                          textShadow: '1px 1px 0 black',
-                        }}
-                      >
-                        {`${beakerCurrentVolume} of ${beakerMaxVolume} units`}
-                      </Box>
-                    </ProgressBar>
-                  </LabeledList.Item>
-                )}
-                {!beaker && (
-                  <LabeledList.Item label="Container">
-                    <NoticeBox m={0} height={2}>
-                      No liquid container
-                    </NoticeBox>
-                  </LabeledList.Item>
-                )}
-              </LabeledList>
-            </Section>
+            <Controls />
           </Stack.Item>
           <Stack.Item>
             <Tabs fluid>
-              {categories.map((category) => (
+              {categories.map(({ name }) => (
                 <Tabs.Tab
                   align="center"
-                  key={category.name}
-                  selected={category.name === selectedCategory}
-                  onClick={() => setSelectedCategory(category.name)}
+                  key={name}
+                  selected={name === selectedCategory}
+                  onClick={() => setSelectedCategory(name)}
                 >
-                  {category.name}
+                  {name}
                 </Tabs.Tab>
               ))}
             </Tabs>
           </Stack.Item>
-          <Stack.Item grow mt={'2px'}>
+          <Stack.Item grow mt="2px">
             <Section fill scrollable>
               <Table>
-                <ItemList
-                  processing={processing}
-                  biomass={biomass}
-                  items={items}
-                  beaker={beaker}
-                  efficiency={efficiency}
-                  max_output={max_output}
-                  space={beaker ? beakerMaxVolume - beakerCurrentVolume : 1}
-                />
+                {items.map((item) => (
+                  <Item key={item.id} item={item} space={space} />
+                ))}
               </Table>
             </Section>
           </Stack.Item>
@@ -179,67 +94,165 @@ export const Biogenerator = (props) => {
       </Window.Content>
     </Window>
   );
+}
+
+function Controls() {
+  const { act, data } = useBackend<Data>();
+  const {
+    beaker,
+    beakerCurrentVolume,
+    beakerMaxVolume,
+    biomass,
+    can_process,
+    max_visual_biomass,
+    processing,
+    reagent_color,
+  } = data;
+
+  return (
+    <Section fill>
+      <LabeledList>
+        <LabeledList.Item
+          label="Biomass"
+          buttons={
+            <Button
+              width={7}
+              lineHeight={2}
+              align="center"
+              icon="cog"
+              iconSpin={processing ? 1 : 0}
+              disabled={!can_process || processing}
+              onClick={() => act('activate')}
+            >
+              Generate
+            </Button>
+          }
+        >
+          <ProgressBar
+            value={biomass}
+            minValue={0}
+            maxValue={max_visual_biomass}
+            color="good"
+          >
+            <Box
+              lineHeight={1.9}
+              style={{
+                textShadow: '1px 1px 0 black',
+              }}
+            >
+              {`${parseFloat(biomass.toFixed(2))} units`}
+            </Box>
+          </ProgressBar>
+        </LabeledList.Item>
+        {!!beaker && (
+          <LabeledList.Item
+            label="Container"
+            buttons={
+              <Button
+                width={7}
+                lineHeight={2}
+                align="center"
+                icon="eject"
+                onClick={() => act('eject')}
+              >
+                Eject
+              </Button>
+            }
+          >
+            <ProgressBar
+              value={beakerCurrentVolume}
+              minValue={0}
+              height={2}
+              maxValue={beakerMaxVolume}
+              color={reagent_color}
+            >
+              <Box
+                lineHeight={1.9}
+                style={{
+                  textShadow: '1px 1px 0 black',
+                }}
+              >
+                {`${beakerCurrentVolume} of ${beakerMaxVolume} units`}
+              </Box>
+            </ProgressBar>
+          </LabeledList.Item>
+        )}
+        {!beaker && (
+          <LabeledList.Item label="Container">
+            <NoticeBox m={0} height={2}>
+              No liquid container
+            </NoticeBox>
+          </LabeledList.Item>
+        )}
+      </LabeledList>
+    </Section>
+  );
+}
+
+type Props = {
+  item: Design;
+  space: number;
 };
 
-const ItemList = (props) => {
-  const { act } = useBackend();
-  const items = props.items.map((item) => {
-    const [amount, setAmount] = useState(
-      item.is_reagent ? Math.min(Math.max(props.space, 1), 10) : 1,
-    );
-    const disabled =
-      props.processing ||
-      (item.is_reagent && !props.beaker) ||
-      (item.is_reagent && props.space < amount) ||
-      props.biomass < Math.ceil((item.cost * amount) / props.efficiency);
-    const max_possible = Math.floor(
-      (props.efficiency * props.biomass) / item.cost,
-    );
-    const max_capacity = item.is_reagent ? props.space : props.max_output;
-    const max_amount = Math.max(1, Math.min(max_capacity, max_possible));
-    return {
-      ...item,
-      disabled,
-      max_amount,
-      amount,
-      setAmount,
-    };
-  });
-  return items.map((item) => (
-    <Table.Row key={item.id}>
+function Item(props: Props) {
+  const { item, space } = props;
+  const { cost, id, is_reagent, name } = item;
+
+  const { act, data } = useBackend<Data>();
+  const { biomass, beaker, efficiency, max_output, processing } = data;
+
+  const minAmount = is_reagent ? Math.min(Math.max(space, 1), 10) : 1;
+
+  const [amount, setAmount] = useState(minAmount);
+
+  const disabled =
+    processing ||
+    (is_reagent && !beaker) ||
+    (is_reagent && space < amount) ||
+    biomass < Math.ceil((cost * amount) / efficiency);
+
+  const maxPossible = Math.floor((efficiency * biomass) / cost);
+
+  const maxCapacity = is_reagent ? space : max_output;
+  const maxAmount = Math.max(1, Math.min(maxCapacity, maxPossible));
+
+  return (
+    <Table.Row>
       <Table.Cell>
         <span
-          className={classes(['design32x32', item.id])}
+          className={classes(['design32x32', id])}
           style={{
             verticalAlign: 'middle',
           }}
         />{' '}
-        <b>{item.name}</b>
+        <b>{name}</b>
       </Table.Cell>
       <Table.Cell collapsing>
         <NumberInput
-          value={item.amount}
+          value={amount}
           step={1}
-          width="35px"
+          width="40px"
           minValue={1}
-          maxValue={item.max_amount}
-          onChange={(value) => item.setAmount(value)}
+          maxValue={maxAmount}
+          onChange={(value) => setAmount(value)}
         />
       </Table.Cell>
       <Table.Cell collapsing>
         <Button
-          fluid
           align="right"
-          content={parseFloat((item.cost * item.amount).toFixed(2)) + ' BIO'}
-          disabled={item.disabled}
+          width={5}
+          pr={0}
+          disabled={disabled}
           onClick={() =>
             act('create', {
-              id: item.id,
-              amount: item.amount,
+              id,
+              amount,
             })
           }
-        />
+        >
+          {parseFloat((cost * amount).toFixed(2))} <Icon name="leaf" />
+        </Button>
       </Table.Cell>
     </Table.Row>
-  ));
-};
+  );
+}