diff --git a/code/game/machinery/computer/aifixer.dm b/code/game/machinery/computer/aifixer.dm
index 0d715fe5759..b69c08c1b45 100644
--- a/code/game/machinery/computer/aifixer.dm
+++ b/code/game/machinery/computer/aifixer.dm
@@ -22,20 +22,19 @@
 		return ..()
 
 /obj/machinery/computer/aifixer/attack_ai(var/mob/user as mob)
-	ui_interact(user)
+	tgui_interact(user)
 
 /obj/machinery/computer/aifixer/attack_hand(var/mob/user as mob)
-	ui_interact(user)
+	tgui_interact(user)
 
-/obj/machinery/computer/aifixer/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, force_open)
+/obj/machinery/computer/aifixer/tgui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, datum/tgui/master_ui = null, datum/tgui_state/state = GLOB.tgui_default_state)
+	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
 
 	if(!ui)
-		ui = new(user, src, ui_key, "ai_fixer.tmpl", "AI System Integrity Restorer", 550, 500)
+		ui = new(user, src, ui_key, "ai_fixer", name, 550, 500, master_ui, state)
 		ui.open()
-		ui.set_auto_update(1)
 
-/obj/machinery/computer/aifixer/ui_data(mob/user, datum/topic_state/state)
+/obj/machinery/computer/aifixer/tgui_data(mob/user, datum/topic_state/state)
 	var/data[0]
 	if(occupant)
 		data["occupant"] = occupant.name
@@ -48,43 +47,43 @@
 
 		var/laws[0]
 		for(var/datum/ai_law/law in occupant.laws.all_laws())
-			laws.Add(list(list("law" = law.law, "number" = law.get_index())))
+			laws.Add(list("law" = law.law, "number" = law.get_index())))
 
 		data["laws"] = laws
 
 	return data
 
-/obj/machinery/computer/aifixer/Topic(href, href_list)
+/obj/machinery/computer/aifixer/tgui_act(action, params)
 	if(..())
-		return 1
+		return
+	switch(action)
+		if("fix")
+			active = 1
+			while(occupant.health < 100)
+				occupant.adjustOxyLoss(-1, FALSE)
+				occupant.adjustFireLoss(-1, FALSE)
+				occupant.adjustToxLoss(-1, FALSE)
+				occupant.adjustBruteLoss(-1, FALSE)
+				occupant.updatehealth()
+				if(occupant.health >= 0 && occupant.stat == DEAD)
+					occupant.update_revive()
+					occupant.lying = 0
+					update_icon()
+				sleep(10)
+			active = 0
+			add_fingerprint(usr)
 
-	if(href_list["fix"])
-		active = 1
-		while(occupant.health < 100)
-			occupant.adjustOxyLoss(-1, FALSE)
-			occupant.adjustFireLoss(-1, FALSE)
-			occupant.adjustToxLoss(-1, FALSE)
-			occupant.adjustBruteLoss(-1, FALSE)
-			occupant.updatehealth()
-			if(occupant.health >= 0 && occupant.stat == DEAD)
-				occupant.update_revive()
-				occupant.lying = 0
-				update_icon()
-			sleep(10)
-		active = 0
-		add_fingerprint(usr)
+		if("wireless")
+			var/wireless = text2num("wireless")
+			if(wireless == 0 || wireless == 1)
+				occupant.control_disabled = wireless
 
-	if(href_list["wireless"])
-		var/wireless = text2num(href_list["wireless"])
-		if(wireless == 0 || wireless == 1)
-			occupant.control_disabled = wireless
+		if("radio")
+			var/radio = text2num("radio")
+			if(radio == 0 || radio == 1)
+				occupant.aiRadio.disabledAi = radio
 
-	if(href_list["radio"])
-		var/radio = text2num(href_list["radio"])
-		if(radio == 0 || radio == 1)
-			occupant.aiRadio.disabledAi = radio
-
-	SSnanoui.update_uis(src)
+	SStgui.update_uis(src)
 	update_icon()
 	return
 
diff --git a/nano/templates/ai_fixer.tmpl b/nano/templates/ai_fixer.tmpl
deleted file mode 100644
index 4be6fee598d..00000000000
--- a/nano/templates/ai_fixer.tmpl
+++ /dev/null
@@ -1,58 +0,0 @@
-<!--
-Title: AI System Integrity Restorer
-Used In File(s): \code\game\machinery\computer\aifixer.dm
--->
-{{if data.occupant}}
-	<div class="item">
-		<h2>Stored AI: {{:data.occupant}}</h2>
-		<h3>Information</h3>
-		<div class="itemLabel">
-			Integrity
-		</div>
-		<div class="itemContent">
-			<span class="{{if data.integrity >= 75}}good{{else data.integrity >= 25}}average{{else}}bad{{/if}}">{{:data.integrity}}%</span>
-		</div>
-		<div class="itemLabel">
-			Status
-		</div>
-		<div class="itemContent">
-			{{if data.stat == 2}}
-				<span class="bad">Non-functional</span>
-			{{else}}
-				<span class="good">Functional</span>
-			{{/if}}
-		</div>
-		<div class="itemLabel">
-			Wireless Activity
-		</div>
-		<div class="itemContent">
-			{{:helper.link('Enabled','check',{'wireless' : 0},data.wireless == 0 ? 'selected' : '')}}
-			{{:helper.link('Disabled','close',{'wireless' : 1},data.wireless == 1 ? 'selected' : '')}}
-		</div>
-		<div class="itemLabel">
-			Subspace Transceiver
-		</div>
-		<div class="itemContent">
-			{{:helper.link('Enabled','check',{'radio' : 0},data.radio == 0 ? 'selected' : '')}}
-			{{:helper.link('Disabled','close',{'radio' : 1},data.radio == 1 ? 'selected' : '')}}
-		</div>
-		<h3>Laws</h3>
-		{{for data.laws}}
-			{{:value.number}}: {{:value.law}}<br />
-		{{empty}}
-			<span class='bad'>No laws detected!</span>
-		{{/for}}
-
-		<h3>Actions</h3>
-		{{if data.active}}
-			<b>Reconstruction in progress, please wait.</b>
-			{{:helper.displayBar(data.integrity, 0, 100, (data.integrity >= 75) ? 'good' : (data.integrity >= 25) ? 'average' : 'bad')}}
-			<span class="statusValue">{{:helper.smoothRound(data.integrity)}}%</span>
-		{{/if}}
-		<div class="item">
-			{{:helper.link('Reconstruct', 'wrench', {'fix' : 1}, data.active || data.integrity >= 100 ? 'disabled' : '')}}
-		</div>
-	</div>
-{{else}}
-	<h3>No artificial intelligence detected.</h3>
-{{/if}}
\ No newline at end of file
diff --git a/tgui/packages/tgui/interfaces/ai_fixer.js b/tgui/packages/tgui/interfaces/ai_fixer.js
new file mode 100644
index 00000000000..6539d9c8718
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ai_fixer.js
@@ -0,0 +1,94 @@
+import { useBackend } from "../backend";
+import { Button, ProgressBar, Box, LabeledList } from "../components";
+import { Window } from "../layouts";
+
+export const AIFixer = (props, context) => {
+  const { act, data } = useBackend(context);
+  const laws = data.laws || [];
+  if (data.occupant == null) {
+    return (
+      <Window>
+        <Window.Content>
+          <Box>
+            <h3>No artificial intelligence detected.</h3>
+          </Box>
+        </Window.Content>
+      </Window>
+    );
+  } else {
+    let workingAI = null;
+    if (data.stat == 2 || data.stat == null) {
+      workingAI = false;
+    } else { workingAI = true; }
+
+    let integrityColor = null;
+    if (data.integrity >= 75) {integrityColor = 'green';}
+    else if (data.integrity >= 25) {integrityColor = 'yellow';}
+    else {integrityColor = 'red';}
+
+    return (
+      <Window>
+        <Window.Content>
+          <Box bold>
+            <h3>Stored AI: {data.occupant}</h3>
+          </Box>
+
+          <Box lineHeight={2}>
+            <h3>Information</h3>
+          </Box>
+          <LabeledList>
+            <LabeledList.Item label="Integrity">
+              <ProgressBar color={integrityColor} value={data.integrity/100} />
+            </LabeledList.Item>
+            <LabeledList.Item label="Status"color={workingAI ? "green" : "red"}>
+              {workingAI ? "Functional" : "Non-Functional"}
+            </LabeledList.Item>
+          </LabeledList>
+
+          <Box lineHeight={2}>
+            <h3>Laws</h3>
+          </Box>
+          {/* <LabeledList>
+            for (let i = 0; i < lawsList.length; i++) {
+              <LabeledList.Item label={{data.laws}[1]} />
+            }
+          </LabeledList> */}
+
+          {/* {laws.map(law => (
+            {law.number} {law.law}
+          ))} */}
+
+          <Box>
+            <h3>Actions</h3>
+          </Box>
+          <LabeledList>
+            <LabeledList.Item label="Wireless Activity">
+              <Button
+                icon={data.wireless ? "times" : "check"}
+                content={data.wireless ? "Disabled" : "Enabled"}
+                color={data.wireless ? "red" : "green"}
+                onClick={() => act("wireless")} />
+            </LabeledList.Item>
+            <LabeledList.Item label="Subspace Transceiver">
+              <Button
+                icon={data.wireless ? "times" : "check"}
+                content={data.wireless ? "Disabled" : "Enabled"}
+                color={data.wireless ? "red" : "green"}
+                onClick={() => act("wireless")} />
+            </LabeledList.Item>
+            <LabeledList.Item label="Start Repairs">
+              <Button
+              icon='wrench'
+              disabled={data.integrity >= 100 || data.active}
+              content={data.integrity >= 100 ? 'Already Repaired' : 'Repair'}
+              onClick={() => act("fix")} />
+            </LabeledList.Item>
+          </LabeledList>
+          <Box color='green' lineHeight={2}>
+            {data.active ? "Reconstruction in progress." : ""}
+          </Box>
+        </Window.Content>
+      </Window>
+    );
+  }
+};