diff --git a/code/modules/admin/modify_robot.dm b/code/modules/admin/modify_robot.dm
index 59da4550be3..98fd0fdcd1b 100644
--- a/code/modules/admin/modify_robot.dm
+++ b/code/modules/admin/modify_robot.dm
@@ -62,78 +62,11 @@
 				module_options += module
 			.["model_options"] = module_options
 			// Data for the upgrade options
-			var/list/whitelisted_upgrades = list()
-			var/list/blacklisted_upgrades = list()
-			for(var/datum/design/item/prosfab/robot_upgrade/restricted/upgrade)
-				if(!(initial(upgrade.build_path) in target.module.supported_upgrades))
-					whitelisted_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]"))
-				else
-					blacklisted_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]"))
-			.["target"]["whitelisted_upgrades"] = whitelisted_upgrades
-			.["target"]["blacklisted_upgrades"] = blacklisted_upgrades
-			var/list/utility_upgrades = list()
-			for(var/datum/design/item/prosfab/robot_upgrade/utility/upgrade)
-				if(!(target.has_upgrade(initial(upgrade.build_path))))
-					utility_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]"))
-			.["target"]["utility_upgrades"] = utility_upgrades
-			var/list/basic_upgrades = list()
-			for(var/datum/design/item/prosfab/robot_upgrade/basic/upgrade)
-				if(!(target.has_upgrade(initial(upgrade.build_path))))
-					basic_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 0))
-				else
-					basic_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 1))
-			.["target"]["basic_upgrades"] = basic_upgrades
-			var/list/advanced_upgrades = list()
-			for(var/datum/design/item/prosfab/robot_upgrade/advanced/upgrade)
-				if(!(target.has_upgrade(initial(upgrade.build_path))))
-					advanced_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 0))
-				else
-					advanced_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 1))
-			.["target"]["advanced_upgrades"] = advanced_upgrades
-			var/list/restricted_upgrades = list()
-			for(var/datum/design/item/prosfab/robot_upgrade/restricted/upgrade)
-				if(!(target.has_upgrade(initial(upgrade.build_path))))
-					if(!(initial(upgrade.build_path) in target.module.supported_upgrades))
-						restricted_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 2))
-						continue
-					restricted_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 0))
-				else
-					restricted_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 1))
-			.["target"]["restricted_upgrades"] = restricted_upgrades
+			.["target"] += get_upgrades()
+
 			var/obj/item/weapon/gun/energy/kinetic_accelerator/kin = locate() in target.module.modules
 			if(kin)
-				.["target"]["pka"] = list()
-				.["target"]["pka"]["name"] = kin.name
-				var/list/installed_modkits = list()
-				for(var/obj/item/borg/upgrade/modkit/modkit in kin.modkits)
-					installed_modkits += list(list("name" = modkit.name, "ref" = "\ref[modkit]", "costs" = modkit.cost))
-				.["target"]["pka"]["installed_modkits"] = installed_modkits
-				var/list/modkits = list()
-				for(var/modkit in typesof(/obj/item/borg/upgrade/modkit))
-					var/obj/item/borg/upgrade/modkit/single_modkit = modkit
-					if(single_modkit == /obj/item/borg/upgrade/modkit)
-						continue
-					if(kin.get_remaining_mod_capacity() < initial(single_modkit.cost))
-						modkits += list(list("name" = initial(single_modkit.name), "path" = single_modkit, "costs" = initial(single_modkit.cost), "denied" = TRUE, "denied_by" = "Insufficient capacity!"))
-						continue
-					if(initial(single_modkit.denied_type))
-						var/number_of_denied = 0
-						var/denied = FALSE
-						for(var/A in kin.get_modkits())
-							var/obj/item/borg/upgrade/modkit/M = A
-							if(istype(M, initial(single_modkit.denied_type)))
-								number_of_denied++
-							if(number_of_denied >= initial(single_modkit.maximum_of_type))
-								var/obj/item/denied_type = initial(single_modkit.denied_type)
-								modkits += list(list("name" = initial(single_modkit.name), "path" = single_modkit, "costs" = initial(single_modkit.cost), "denied" = TRUE, "denied_by" = "[initial(denied_type.name)]"))
-								denied = TRUE
-								break
-						if(denied)
-							continue
-					modkits += list(list("name" = initial(single_modkit.name), "path" = single_modkit, "costs" = initial(single_modkit.cost)))
-				.["target"]["pka"]["modkits"] = modkits
-				.["target"]["pka"]["capacity"] = kin.get_remaining_mod_capacity()
-				.["target"]["pka"]["max_capacity"] = kin.max_mod_capacity
+				.["target"]["pka"] += get_pka(kin)
 			// Radio section
 			var/list/radio_channels = list()
 			for(var/channel in target.radio.channels)
@@ -143,29 +76,38 @@
 				availalbe_channels += channel
 			.["target"]["radio_channels"] = radio_channels
 			.["target"]["availalbe_channels"] = availalbe_channels
-
+			// Components
+			var/list/components = list()
+			for(var/entry in target.components)
+				var/datum/robot_component/C = target.components[entry]
+				components += list(list("name" = C.name, "ref" = "\ref[C]", "brute_damage" = C.brute_damage, "electronics_damage" = C.electronics_damage, "max_damage" = C.max_damage, "installed" = C.installed, "exists" = (C.wrapped ? TRUE : FALSE)))
+			.["target"]["components"] = components
+			.["cell"] = target.cell?.name
+			var/list/cell_options = list()
+			for(var/cell in typesof(/obj/item/weapon/cell))
+				var/obj/item/weapon/cell/C = cell
+				if(initial(C.name) == "power cell")
+					continue
+				if(ispath(C, /obj/item/weapon/cell/standin))
+					continue
+				if(ispath(C, /obj/item/weapon/cell/device))
+					continue
+				if(ispath(C, /obj/item/weapon/cell/mech))
+					continue
+				if(cell_options[initial(C.name)]) // empty cells are defined after normal cells!
+					continue
+				cell_options += list(initial(C.name) = list("path" = "[C]", "charge" = initial(C.maxcharge), "max_charge" = initial(C.maxcharge), "charge_amount" = initial(C.charge_amount) , "self_charge" = initial(C.self_recharge))) // our cells do not have their charge predefined, they do it on init, so both maaxcharge for now
+			.["cell_options"] = cell_options
+			// Access
+			//.["target"]["id_icon"] = icon2html(target.idcard, user, sourceonly=TRUE)
 			// Section for source data for the module we might want to salvage
 			if(source)
-				.["source"] = list()
-				.["source"]["model"] = source.module
-				.["source"]["front"] = icon2base64(get_flat_icon(source,dir=SOUTH,no_anim=TRUE))
-				var/list/source_items = list()
-				for(var/obj/item in (source.module.modules | source.module.emag))
-					var/exists
-					for(var/obj/has_item in (target.module.modules + target.module.emag))
-						if(has_item.name == item.name)
-							exists = TRUE
-							break
-					if(exists)
-						continue
-					source_items += list(list("name" = item.name, "ref" = "\ref[item]", "icon" = icon2html(item, user, sourceonly=TRUE), "desc" = item.desc))
-				.["source"]["modules"] = source_items
+				.["source"] += get_module_source(user)
 	var/list/all_robots = list()
 	for(var/mob/living/silicon/robot/R in silicon_mob_list)
 		if(!R.loc)
 			continue
-		var/list/info = list("displayText" = "[R]", "value" = "\ref[R]")
-		all_robots.Add(list(info))
+		all_robots += list(list("displayText" = "[R]", "value" = "\ref[R]"))
 	.["all_robots"] = all_robots
 
 
@@ -368,3 +310,141 @@
 			radio_controller.remove_object(target.radio, radiochannels[selected_radio_channel])
 			target.radio.secure_radio_connections -= selected_radio_channel
 			return TRUE
+		if("add_component")
+			var/datum/robot_component/C = locate(params["component"])
+			if(C.wrapped)
+				qdel(C.wrapped)
+			if(istype(C, /datum/robot_component/actuator))
+				C.wrapped = new /obj/item/robot_parts/robot_component/actuator(target)
+			else if(istype(C, /datum/robot_component/radio))
+				C.wrapped = new /obj/item/robot_parts/robot_component/radio(target)
+			else if(istype(C, /datum/robot_component/cell))
+				var/new_cell = text2path(params["cell"])
+				target.cell = new new_cell(target)
+				C.wrapped = target.cell
+			else if(istype(C, /datum/robot_component/diagnosis_unit))
+				C.wrapped = new /obj/item/robot_parts/robot_component/diagnosis_unit(target)
+			else if(istype(C, /datum/robot_component/camera))
+				C.wrapped = new /obj/item/robot_parts/robot_component/camera(target)
+			else if(istype(C, /datum/robot_component/binary_communication))
+				C.wrapped = new /obj/item/robot_parts/robot_component/binary_communication_device(target)
+			else if(istype(C, /datum/robot_component/armour))
+				C.wrapped = new /obj/item/robot_parts/robot_component/armour(target)
+			C.install()
+			C.installed = 1
+			return TRUE
+		if("rem_component")
+			var/datum/robot_component/C = locate(params["component"])
+			if(!C.wrapped)
+				return FALSE
+			C.uninstall()
+			C.installed = 0
+			qdel(C.wrapped)
+			C.wrapped = null
+			if(istype(C, /datum/robot_component/cell))
+				target.cell = null
+			return TRUE
+
+/datum/eventkit/modify_robot/proc/get_module_source(var/mob/user)
+	var/list/source_list = list()
+	source_list["model"] = source.module
+	source_list["front"] = icon2base64(get_flat_icon(source,dir=SOUTH,no_anim=TRUE))
+	var/list/source_items = list()
+	for(var/obj/item in (source.module.modules | source.module.emag))
+		var/exists
+		for(var/obj/has_item in (target.module.modules + target.module.emag))
+			if(has_item.name == item.name)
+				exists = TRUE
+				break
+		if(exists)
+			continue
+		source_items += list(list("name" = item.name, "ref" = "\ref[item]", "icon" = icon2html(item, user, sourceonly=TRUE), "desc" = item.desc))
+	source_list["modules"] = source_items
+	return source_list
+
+/datum/eventkit/modify_robot/proc/get_upgrades()
+	var/list/all_upgrades = list()
+	var/list/whitelisted_upgrades = list()
+	var/list/blacklisted_upgrades = list()
+	for(var/datum/design/item/prosfab/robot_upgrade/restricted/upgrade)
+		if(!upgrade.name)
+			continue
+		if(!(initial(upgrade.build_path) in target.module.supported_upgrades))
+			whitelisted_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]"))
+		else
+			blacklisted_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]"))
+	all_upgrades["whitelisted_upgrades"] = whitelisted_upgrades
+	all_upgrades["blacklisted_upgrades"] = blacklisted_upgrades
+	var/list/utility_upgrades = list()
+	for(var/datum/design/item/prosfab/robot_upgrade/utility/upgrade)
+		if(!upgrade.name)
+			continue
+		if(!(target.has_upgrade(initial(upgrade.build_path))))
+			utility_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]"))
+	all_upgrades["utility_upgrades"] = utility_upgrades
+	var/list/basic_upgrades = list()
+	for(var/datum/design/item/prosfab/robot_upgrade/basic/upgrade)
+		if(!upgrade.name)
+			continue
+		if(!(target.has_upgrade(initial(upgrade.build_path))))
+			basic_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 0))
+		else
+			basic_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 1))
+	all_upgrades["basic_upgrades"] = basic_upgrades
+	var/list/advanced_upgrades = list()
+	for(var/datum/design/item/prosfab/robot_upgrade/advanced/upgrade)
+		if(!upgrade.name)
+			continue
+		if(!(target.has_upgrade(initial(upgrade.build_path))))
+			advanced_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 0))
+		else
+			advanced_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 1))
+	all_upgrades["advanced_upgrades"] = advanced_upgrades
+	var/list/restricted_upgrades = list()
+	for(var/datum/design/item/prosfab/robot_upgrade/restricted/upgrade)
+		if(!upgrade.name)
+			continue
+		if(!(target.has_upgrade(initial(upgrade.build_path))))
+			if(!(initial(upgrade.build_path) in target.module.supported_upgrades))
+				restricted_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 2))
+				continue
+			restricted_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 0))
+		else
+			restricted_upgrades += list(list("name" = initial(upgrade.name), "path" = "[initial(upgrade.build_path)]", "installed" = 1))
+	all_upgrades["restricted_upgrades"] = restricted_upgrades
+	return all_upgrades
+
+/datum/eventkit/modify_robot/proc/get_pka(var/obj/item/weapon/gun/energy/kinetic_accelerator/kin)
+	var/list/pka = list()
+	pka["name"] = kin.name
+	var/list/installed_modkits = list()
+	for(var/obj/item/borg/upgrade/modkit/modkit in kin.modkits)
+		installed_modkits += list(list("name" = modkit.name, "ref" = "\ref[modkit]", "costs" = modkit.cost))
+	pka["installed_modkits"] = installed_modkits
+	var/list/modkits = list()
+	for(var/modkit in typesof(/obj/item/borg/upgrade/modkit))
+		var/obj/item/borg/upgrade/modkit/single_modkit = modkit
+		if(single_modkit == /obj/item/borg/upgrade/modkit)
+			continue
+		if(kin.get_remaining_mod_capacity() < initial(single_modkit.cost))
+			modkits += list(list("name" = initial(single_modkit.name), "path" = single_modkit, "costs" = initial(single_modkit.cost), "denied" = TRUE, "denied_by" = "Insufficient capacity!"))
+			continue
+		if(initial(single_modkit.denied_type))
+			var/number_of_denied = 0
+			var/denied = FALSE
+			for(var/A in kin.get_modkits())
+				var/obj/item/borg/upgrade/modkit/M = A
+				if(istype(M, initial(single_modkit.denied_type)))
+					number_of_denied++
+				if(number_of_denied >= initial(single_modkit.maximum_of_type))
+					var/obj/item/denied_type = initial(single_modkit.denied_type)
+					modkits += list(list("name" = initial(single_modkit.name), "path" = single_modkit, "costs" = initial(single_modkit.cost), "denied" = TRUE, "denied_by" = "[initial(denied_type.name)]"))
+					denied = TRUE
+					break
+			if(denied)
+				continue
+		modkits += list(list("name" = initial(single_modkit.name), "path" = single_modkit, "costs" = initial(single_modkit.cost)))
+	pka["modkits"] = modkits
+	pka["capacity"] = kin.get_remaining_mod_capacity()
+	pka["max_capacity"] = kin.max_mod_capacity
+	return pka
diff --git a/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotComponent.tsx b/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotComponent.tsx
new file mode 100644
index 00000000000..109854f090d
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotComponent.tsx
@@ -0,0 +1,301 @@
+import { capitalize } from 'common/string';
+import { useState } from 'react';
+import { useBackend } from 'tgui/backend';
+import {
+  Box,
+  Button,
+  Divider,
+  Dropdown,
+  Flex,
+  Icon,
+  Image,
+  Input,
+  Section,
+  Stack,
+} from 'tgui/components';
+
+import { NoSpriteWarning } from '../components';
+import { prepareSearch } from '../functions';
+import { Cell, Component, Target } from '../types';
+
+export const ModifyRobotComponent = (props: {
+  target: Target;
+  cell: string | null;
+  cells: Record<string, Cell>;
+}) => {
+  const { target, cell, cells } = props;
+  const [searchComponentReplaceText, setSearchComponentReplaceText] =
+    useState<string>('');
+  const [searchComponentRemoveText, setSearchComponentRemoveText] =
+    useState<string>('');
+  const [selectedCell, setSelectedCell] = useState<string>(cell || '');
+  const cell_options = Object.keys(cells) as Array<string>;
+
+  return (
+    <>
+      {!target.active && <NoSpriteWarning name={target.name} />}
+      <Flex height={!target.active ? '80%' : '85%'}>
+        <Flex.Item width="40%" fill>
+          <ComponentSection
+            title="Repair Component"
+            searchText={searchComponentReplaceText}
+            onSearchText={setSearchComponentReplaceText}
+            components={target.components}
+            action="add_component"
+            buttonColor="green"
+            buttonIcon="arrows-spin"
+            celltype={cells[selectedCell]?.path}
+            selected_cell={selectedCell}
+            cell={cell || undefined}
+          />
+        </Flex.Item>
+        <Flex.Item width="30%">
+          <Stack vertical>
+            <Stack.Item>
+              <Image
+                src={'data:image/jpeg;base64, ' + target.side_alt}
+                style={{
+                  display: 'block',
+                  marginLeft: 'auto',
+                  marginRight: 'auto',
+                  width: '200px',
+                }}
+              />
+            </Stack.Item>
+            <Stack.Item>
+              <Section title="Powercell">
+                Current cell:{' '}
+                {cell ? (
+                  capitalize(cell)
+                ) : (
+                  <Box inline color="red">
+                    No cell installed!
+                  </Box>
+                )}
+                <Dropdown
+                  width="100%"
+                  selected={selectedCell}
+                  options={cell_options}
+                  onSelected={setSelectedCell}
+                />
+                <Stack vertical>
+                  <Stack.Item>
+                    Charge State: {cells[selectedCell]?.charge} /{' '}
+                    {cells[selectedCell]?.max_charge}
+                  </Stack.Item>
+                  <Stack.Item>
+                    Charge Rate: {cells[selectedCell]?.charge_amount}
+                  </Stack.Item>
+                  <Stack.Item>
+                    Self Charge:{' '}
+                    {cells[selectedCell]?.self_charge ? 'Yes' : 'No'}
+                  </Stack.Item>
+                </Stack>
+              </Section>
+            </Stack.Item>
+          </Stack>
+        </Flex.Item>
+        <Flex.Item width="30%" fill>
+          <ComponentSection
+            title="Remove Component"
+            searchText={searchComponentRemoveText}
+            onSearchText={setSearchComponentRemoveText}
+            components={target.components}
+            action="rem_component"
+            buttonColor="red"
+            buttonIcon="burst"
+          />
+        </Flex.Item>
+      </Flex>
+    </>
+  );
+};
+
+const ComponentSection = (props: {
+  title: string;
+  searchText: string;
+  onSearchText: Function;
+  components: Component[];
+  action: string;
+  buttonColor: string;
+  buttonIcon: string;
+  celltype?: string;
+  selected_cell?: string;
+  cell?: string;
+}) => {
+  const { act } = useBackend();
+  const {
+    title,
+    searchText,
+    onSearchText,
+    components,
+    action,
+    buttonColor,
+    buttonIcon,
+    celltype,
+    selected_cell,
+    cell,
+  } = props;
+  return (
+    <Section title={title} fill scrollable>
+      <Input
+        fluid
+        value={searchText}
+        placeholder="Search for components..."
+        onInput={(e, value: string) => onSearchText(value)}
+      />
+      <Divider />
+      <Stack>
+        <Stack.Item width="100%">
+          {prepareSearch(components, searchText).map((component, i) => {
+            return (
+              <Button
+                fluid
+                key={i}
+                tooltip={getComponentTooltip(
+                  component,
+                  action,
+                  selected_cell,
+                  cell,
+                )}
+                color={getComponentColor(component, action)}
+                disabled={checkDisabled(component, action, selected_cell, cell)}
+                onClick={() =>
+                  act(action, {
+                    component: component.ref,
+                    cell: celltype,
+                  })
+                }
+              >
+                <Stack vertical>
+                  <Stack.Item>
+                    <Flex varticalAlign="center">
+                      <Flex.Item>
+                        {capitalize(component.name)}{' '}
+                        {action === 'add_component' &&
+                          '(' + component.max_damage + ')'}
+                      </Flex.Item>
+                      <Flex.Item grow />
+                      <Flex.Item>
+                        <Icon
+                          name={buttonIcon}
+                          backgroundColor={buttonColor}
+                          size={1.5}
+                        />
+                      </Flex.Item>
+                    </Flex>
+                  </Stack.Item>
+                  <Stack.Item>
+                    {action === 'add_component' &&
+                      'Brute Damage: ' + component.brute_damage}
+                  </Stack.Item>
+                  {action === 'add_component' &&
+                    'Electronics Damage: ' + component.electronics_damage}
+                  <Stack.Item />
+                </Stack>
+              </Button>
+            );
+          })}
+        </Stack.Item>
+      </Stack>
+    </Section>
+  );
+};
+
+function checkDisabled(
+  component: Component,
+  action: string,
+  selected_cell: string | undefined,
+  cell: string | undefined,
+): boolean {
+  switch (action) {
+    case 'rem_component':
+      return !component.exists;
+    case 'add_component':
+      if (
+        selected_cell &&
+        cell &&
+        component.name === 'power cell' &&
+        selected_cell !== cell
+      ) {
+        return false;
+      }
+      return (
+        component.installed === 1 &&
+        !!component.exists &&
+        component.brute_damage === 0 &&
+        component.electronics_damage === 0
+      );
+  }
+  return false;
+}
+
+function getComponentTooltip(
+  component: Component,
+  action: string,
+  selected_cell: string | undefined,
+  cell: string | undefined,
+): string {
+  switch (action) {
+    case 'add_component':
+      if (component.installed === 0 || !component.exists) {
+        return 'Component missing!';
+      }
+      if (
+        component.installed === -1 ||
+        component.brute_damage + component.electronics_damage >=
+          component.max_damage
+      ) {
+        return 'Component destroyed!';
+      }
+      if (checkDisabled(component, action, selected_cell, cell)) {
+        return 'Disabled due to fully intact component!';
+      }
+      return '';
+    case 'rem_component':
+      return component.exists ? '' : 'Disabled due to missing component!';
+  }
+  return '';
+}
+
+function getComponentColor(
+  component: Component,
+  action: string,
+): string | undefined {
+  switch (action) {
+    case 'add_component':
+      if (
+        component.brute_damage + component.electronics_damage >=
+          component.max_damage ||
+        component.installed !== 1 ||
+        !component.exists
+      ) {
+        return 'black';
+      }
+      if (
+        (component.brute_damage + component.electronics_damage) /
+          component.max_damage >
+        0.66
+      ) {
+        return 'red';
+      }
+      if (
+        (component.brute_damage + component.electronics_damage) /
+          component.max_damage >
+        0.33
+      ) {
+        return 'orange';
+      }
+      if (
+        (component.brute_damage + component.electronics_damage) /
+          component.max_damage >
+        0
+      ) {
+        return 'yellow';
+      }
+      return undefined;
+    case 'rem_component':
+      return undefined;
+  }
+  return '';
+}
diff --git a/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotModules.tsx b/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotModules.tsx
index 460865679f4..1e6280675c7 100644
--- a/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotModules.tsx
+++ b/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotModules.tsx
@@ -1,3 +1,4 @@
+import { capitalize } from 'common/string';
 import { useState } from 'react';
 import { useBackend } from 'tgui/backend';
 import {
@@ -177,7 +178,9 @@ const SelectionField = (props: {
                   <Flex.Item>
                     <Image src={modul_option.icon} />
                   </Flex.Item>
-                  <Flex.Item ml="10px">{modul_option.name}</Flex.Item>
+                  <Flex.Item ml="10px">
+                    {capitalize(modul_option.name)}
+                  </Flex.Item>
                   <Flex.Item grow />
                   <Flex.Item>
                     <Icon
diff --git a/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotPKA.tsx b/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotPKA.tsx
index a700650ba6a..1662c8053ca 100644
--- a/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotPKA.tsx
+++ b/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotPKA.tsx
@@ -1,3 +1,4 @@
+import { capitalize } from 'common/string';
 import { useState } from 'react';
 import { useBackend } from 'tgui/backend';
 import {
@@ -11,8 +12,8 @@ import {
 } from 'tgui/components';
 
 import { NoSpriteWarning } from '../components';
-import { prepareSearch } from '../functions';
-import { Module, Target } from '../types';
+import { getModuleIcon, prepareSearch } from '../functions';
+import { Target } from '../types';
 
 export const ModifyRobotPKA = (props: { target: Target }) => {
   const { act } = useBackend();
@@ -57,7 +58,7 @@ export const ModifyRobotPKA = (props: { target: Target }) => {
                       })
                     }
                   >
-                    {modkit.name} {modkit.costs}
+                    {capitalize(modkit.name)} {modkit.costs}
                   </Button>
                 );
               },
@@ -66,7 +67,7 @@ export const ModifyRobotPKA = (props: { target: Target }) => {
           <Flex.Item grow />
           <Flex.Item>
             <Image
-              src={getPKAIcon(target.modules, target.pka.name)}
+              src={getModuleIcon(target.modules, target.pka.name)}
               width="150px"
             />
           </Flex.Item>
@@ -99,7 +100,7 @@ export const ModifyRobotPKA = (props: { target: Target }) => {
                     })
                   }
                 >
-                  {modkit.name} {modkit.costs}
+                  {capitalize(modkit.name)} {modkit.costs}
                 </Button>
               );
             })}
@@ -109,13 +110,3 @@ export const ModifyRobotPKA = (props: { target: Target }) => {
     </>
   );
 };
-
-function getPKAIcon(modules: Module[], name: string) {
-  if (modules) {
-    const module = modules.filter((module) => module.name === name);
-    if (module.length > 0) {
-      return module[0].icon;
-    }
-  }
-  return '';
-}
diff --git a/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotRadio.tsx b/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotRadio.tsx
index 1c72109e382..5af3a8cd063 100644
--- a/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotRadio.tsx
+++ b/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotRadio.tsx
@@ -1,3 +1,4 @@
+import { capitalize } from 'common/string';
 import { useState } from 'react';
 import { useBackend } from 'tgui/backend';
 import {
@@ -105,7 +106,7 @@ const RadioSection = (props: {
                 }
               >
                 <Flex varticalAlign="center">
-                  <Flex.Item>{channel}</Flex.Item>
+                  <Flex.Item>{capitalize(channel)}</Flex.Item>
                   <Flex.Item grow />
                   <Flex.Item>
                     <Icon
diff --git a/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotUpgrades.tsx b/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotUpgrades.tsx
index 6bdd9a7eae7..d34337828a2 100644
--- a/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotUpgrades.tsx
+++ b/tgui/packages/tgui/interfaces/ModifyRobot/ModifyRobotTabs/ModifyRobotUpgrades.tsx
@@ -1,3 +1,4 @@
+import { capitalize } from 'common/string';
 import { useState } from 'react';
 import { useBackend } from 'tgui/backend';
 import {
@@ -142,7 +143,7 @@ const UpgradeSection = (props: {
                   })
                 }
               >
-                {upgrade.name}
+                {capitalize(upgrade.name)}
               </Button>
             );
           })}
diff --git a/tgui/packages/tgui/interfaces/ModifyRobot/functions.ts b/tgui/packages/tgui/interfaces/ModifyRobot/functions.ts
index 8c0b1656515..81386eb291f 100644
--- a/tgui/packages/tgui/interfaces/ModifyRobot/functions.ts
+++ b/tgui/packages/tgui/interfaces/ModifyRobot/functions.ts
@@ -2,6 +2,8 @@ import { filter } from 'common/collections';
 import { flow } from 'common/fp';
 import { createSearch } from 'common/string';
 
+import { Module } from './types';
+
 type SearchObject = string | { name: string };
 
 export function prepareSearch<T extends SearchObject>(
@@ -26,3 +28,13 @@ export function prepareSearch<T extends SearchObject>(
     },
   ])(objects);
 }
+
+export function getModuleIcon(modules: Module[], name: string) {
+  if (modules) {
+    const module = modules.filter((module) => module.name === name);
+    if (module.length > 0) {
+      return module[0].icon;
+    }
+  }
+  return '';
+}
diff --git a/tgui/packages/tgui/interfaces/ModifyRobot/index.tsx b/tgui/packages/tgui/interfaces/ModifyRobot/index.tsx
index c1f3a854e47..fb077a2cbbe 100644
--- a/tgui/packages/tgui/interfaces/ModifyRobot/index.tsx
+++ b/tgui/packages/tgui/interfaces/ModifyRobot/index.tsx
@@ -14,6 +14,7 @@ import {
 import { Window } from 'tgui/layouts';
 
 import { ModifyRobotNoModule } from './ModifyRobotNoModule';
+import { ModifyRobotComponent } from './ModifyRobotTabs/ModifyRobotComponent';
 import { ModifyRobotModules } from './ModifyRobotTabs/ModifyRobotModules';
 import { ModifyRobotPKA } from './ModifyRobotTabs/ModifyRobotPKA';
 import { ModifyRobotRadio } from './ModifyRobotTabs/ModifyRobotRadio';
@@ -23,7 +24,8 @@ import { Data } from './types';
 export const ModifyRobot = (props) => {
   const { act, data } = useBackend<Data>();
 
-  const { target, all_robots, source, model_options } = data;
+  const { target, all_robots, source, model_options, cell, cell_options } =
+    data;
 
   const [tab, setTab] = useState<number>(0);
   const [robotName, setRobotName] = useState<string>(target ? target.name : '');
@@ -46,7 +48,9 @@ export const ModifyRobot = (props) => {
   tabs[1] = <ModifyRobotUpgrades target={target!} />;
   tabs[2] = <ModifyRobotPKA target={target!} />;
   tabs[3] = <ModifyRobotRadio target={target!} />;
-  tabs[4] = <Box />;
+  tabs[4] = (
+    <ModifyRobotComponent target={target!} cell={cell} cells={cell_options} />
+  );
   tabs[5] = <Box />;
   tabs[6] = <Box />;
   tabs[7] = <Box />;
diff --git a/tgui/packages/tgui/interfaces/ModifyRobot/types.ts b/tgui/packages/tgui/interfaces/ModifyRobot/types.ts
index 068cf7d2ca4..cd20ea649d5 100644
--- a/tgui/packages/tgui/interfaces/ModifyRobot/types.ts
+++ b/tgui/packages/tgui/interfaces/ModifyRobot/types.ts
@@ -5,6 +5,8 @@ export type Data = {
   target: Target | null;
   all_robots: DropdownEntry[];
   model_options: string[] | null;
+  cell: string | null;
+  cell_options: Record<string, Cell>;
 };
 
 export type DropdownEntry = {
@@ -33,21 +35,8 @@ export type Target = {
   restricted_upgrades: Upgrade[];
   radio_channels: string[];
   availalbe_channels: string[];
-  pka:
-    | {
-        name: string;
-        modkits: {
-          name: string;
-          path: string;
-          costs: number;
-          denied: BooleanLike;
-          denied_by: string;
-        }[];
-        installed_modkits: { name: string; ref: string; costs: number }[];
-        capacity: number;
-        max_capacity: number;
-      }
-    | undefined;
+  pka: PKA | undefined;
+  components: Component[];
 };
 
 export type Upgrade = {
@@ -63,3 +52,35 @@ export type Source = {
 } | null;
 
 export type Module = { name: string; ref: string; icon: string; desc: string };
+
+export type Component = {
+  name: string;
+  ref: string;
+  brute_damage: number;
+  electronics_damage: number;
+  max_damage: number;
+  installed: number;
+  exists: BooleanLike;
+};
+
+export type PKA = {
+  name: string;
+  modkits: {
+    name: string;
+    path: string;
+    costs: number;
+    denied: BooleanLike;
+    denied_by: string;
+  }[];
+  installed_modkits: { name: string; ref: string; costs: number }[];
+  capacity: number;
+  max_capacity: number;
+};
+
+export type Cell = {
+  path: string;
+  charge: number;
+  max_charge: number;
+  charge_amount: number;
+  self_charge: BooleanLike;
+};