diff --git a/code/game/machinery/atmoalter/area_atmos_computer.dm b/code/game/machinery/atmoalter/area_atmos_computer.dm
index a97a81c62ef..6ece95b844e 100644
--- a/code/game/machinery/atmoalter/area_atmos_computer.dm
+++ b/code/game/machinery/atmoalter/area_atmos_computer.dm
@@ -27,66 +27,59 @@
 	if(..(user))
 		return
 	src.add_fingerprint(usr)
-	var/header = {"<style type="text/css">
-				a.green:link
-				{
-					color:#00CC00;
-				}
-				a.green:visited
-				{
-					color:#00CC00;
-				}
-				a.green:hover
-				{
-					color:#00CC00;
-				}
-				a.green:active
-				{
-					color:#00CC00;
-				}
-				a.red:link
-				{
-					color:#FF0000;
-				}
-				a.red:visited
-				{
-					color:#FF0000;
-				}
-				a.red:hover
-				{
-					color:#FF0000;
-				}
-				a.red:active
-				{
-					color:#FF0000;
-				}
-			</style"}
-	var/dat = {"
-		<center><h1>Area Air Control</h1></center>
-		<font color="red">[status]</font><br>
-		<a href="byond://?src=\ref[src];scan=1">Scan</a>
-		<table border="1" width="90%">"}
+	ui_interact(user)
+
+/obj/machinery/computer/area_atmos/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "AreaAtmos", "Area Air Control")
+		ui.open()
+
+/obj/machinery/computer/area_atmos/ui_state(mob/user)
+	return GLOB.default_state
+
+/obj/machinery/computer/area_atmos/ui_data(mob/user)
+	var/list/data = list()
+
+	data["status"] = status
+	data["zone"] = zone
+
+	var/list/scrubber_data = list()
 	for(var/obj/machinery/portable_atmospherics/powered/scrubber/huge/scrubber in connectedscrubbers)
-		dat += {"
-				<tr>
-					<td>
-						[scrubber.name]<br>
-						Pressure: [round(scrubber.air_contents.return_pressure(), 0.01)] kPa<br>
-						Flow Rate: [round(scrubber.last_flow_rate,0.1)] L/s<br>
-					</td>
-					<td width="150">
-						<a class="green" href="byond://?src=\ref[src];scrub=\ref[scrubber];toggle=1">Turn On</a>
-						<a class="red" href="byond://?src=\ref[src];scrub=\ref[scrubber];toggle=0">Turn Off</a><br>
-						Load: [round(scrubber.last_power_draw)] W
-					</td>
-				</tr>"}
-
-	dat += {"
-			</table><br>
-			<i>[zone]</i>"}
-	user << browse(HTML_SKELETON_INTERNAL(header, dat), "window=miningshuttle;size=400x400")
+		scrubber_data += list(list(
+			"name" = scrubber.name,
+			"pressure" = round(scrubber.air_contents.return_pressure(), 0.01),
+			"flow_rate" = round(scrubber.last_flow_rate, 0.1),
+			"power_draw" = round(scrubber.last_power_draw),
+			"ref" = "\ref[scrubber]"
+		))
+
+	data["scrubbers"] = scrubber_data
+
+	// Clear status after displaying
 	status = ""
 
+	return data
+
+/obj/machinery/computer/area_atmos/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
+	. = ..()
+	if(.)
+		return TRUE
+
+	// Map TGUI actions to existing Topic parameters
+	var/list/href_list = list()
+
+	switch(action)
+		if("scan")
+			href_list["scan"] = "1"
+		if("toggle_scrubber")
+			href_list["scrub"] = params["ref"]
+			href_list["toggle"] = params["state"]
+
+	// Call existing Topic method
+	Topic("", href_list)
+	return TRUE
+
 /obj/machinery/computer/area_atmos/Topic(href, href_list)
 	if(..())
 		return
diff --git a/code/game/machinery/computer/aifixer.dm b/code/game/machinery/computer/aifixer.dm
index 27c847c37ed..3772d4eff23 100644
--- a/code/game/machinery/computer/aifixer.dm
+++ b/code/game/machinery/computer/aifixer.dm
@@ -59,35 +59,58 @@
 	..()
 	return
 
+// AI Fixer Computer TGUI Backend - Keep existing Topic logic, add TGUI frontend
 /obj/machinery/computer/aifixer/attack_hand(mob/user as mob)
 	if(..())
 		return
+	ui_interact(user)
 
-	user.set_machine(src)
-	var/dat = "<h3>AI System Integrity Restorer</h3><br><br>"
+/obj/machinery/computer/aifixer/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "AIFixer", "AI System Integrity Restorer")
+		ui.open()
 
-	if (src.occupant)
-		var/laws
-		dat += "Stored AI: [src.occupant.name]<br>System integrity: [src.occupant.hardware_integrity()]%<br>Backup Capacitor: [src.occupant.backup_capacitor()]%<br>"
+/obj/machinery/computer/aifixer/ui_state(mob/user)
+	return GLOB.default_state
 
-		for (var/datum/ai_law/law in occupant.laws.all_laws())
-			laws += "[law.get_index()]: [law.law]<BR>"
+/obj/machinery/computer/aifixer/ui_data(mob/user)
+	var/list/data = list()
 
-		dat += "Laws:<br>[laws]<br>"
+	data["hasOccupant"] = !!occupant
+	data["active"] = active
 
-		if (src.occupant.stat == 2)
-			dat += "<b>AI nonfunctional</b>"
-		else
-			dat += "<b>AI functional</b>"
-		if (!src.active)
-			dat += {"<br><br><A href='byond://?src=\ref[src];fix=1'>Begin Reconstruction</A>"}
-		else
-			dat += "<br><br>Reconstruction in process, please wait.<br>"
-	dat += {" <A href='byond://?src=\ref[user];mach_close=computer'>Close</A>"}
-
-	user << browse(HTML_SKELETON_TITLE("AI System Integrity Restorer", dat), "window=computer;size=400x500")
-	onclose(user, "computer")
-	return
+	if(occupant)
+		data["aiName"] = occupant.name
+		data["hardwareIntegrity"] = occupant.hardware_integrity()
+		data["backupCapacitor"] = occupant.backup_capacitor()
+		data["aiDead"] = occupant.stat == 2
+
+		var/list/laws_list = list()
+		for(var/datum/ai_law/law in occupant.laws.all_laws())
+			laws_list += list(list(
+				"index" = law.get_index(),
+				"law" = law.law
+			))
+		data["laws"] = laws_list
+
+	return data
+
+/obj/machinery/computer/aifixer/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
+	. = ..()
+	if(.)
+		return TRUE
+
+	// Map TGUI actions to existing Topic parameters
+	var/list/href_list = list()
+
+	switch(action)
+		if("fix")
+			href_list["fix"] = "1"
+
+	// Call existing Topic method
+	Topic("", href_list)
+	return TRUE
 
 /obj/machinery/computer/aifixer/Process()
 	if(..())
diff --git a/code/game/machinery/computer/message.dm b/code/game/machinery/computer/message.dm
index b5831bac1e7..031ba6cb58e 100644
--- a/code/game/machinery/computer/message.dm
+++ b/code/game/machinery/computer/message.dm
@@ -78,129 +78,99 @@
 		return
 	if(!istype(user))
 		return
-	//If the computer is being hacked or is emagged, display the reboot message.
+	ui_interact(user)
+
+/obj/machinery/computer/message_monitor/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "MessageMonitor", "Message Monitor Console")
+		ui.open()
+
+/obj/machinery/computer/message_monitor/ui_state(mob/user)
+	return GLOB.default_state
+
+/obj/machinery/computer/message_monitor/ui_data(mob/user)
+	var/list/data = list()
+
+	// If the computer is being hacked or is emagged, display the reboot message.
 	if(hacking || emag)
 		message = rebootmsg
-	var/dat = ""
-	dat += "<center><h2>Message Monitor Console</h2></center><hr>"
-	dat += "<center><h4><font color='blue'[message]</h5></center>"
 
-	if(auth)
-		dat += "<h4><dd><A href='byond://?src=\ref[src];auth=1'>&#09;<font color='green'>\[Authenticated\]</font></a>&#09;/"
-		dat += " Server Power: <A href='byond://?src=\ref[src];active=1'>[src.linkedServer && src.linkedServer.active ? "<font color='green'>\[On\]</font>":"<font color='red'>\[Off\]</font>"]</a></h4>"
-	else
-		dat += "<h4><dd><A href='byond://?src=\ref[src];auth=1'>&#09;<font color='red'>\[Unauthenticated\]</font></a>&#09;/"
-		dat += " Server Power: <u>[src.linkedServer && src.linkedServer.active ? "<font color='green'>\[On\]</font>":"<font color='red'>\[Off\]</font>"]</u></h4>"
+	data["message"] = message
+	data["auth"] = auth
+	data["hacking"] = hacking
+	data["emag"] = emag
+	data["serverActive"] = linkedServer && linkedServer.active
+	data["hasServer"] = !!linkedServer && !(linkedServer.stat & (NOPOWER|BROKEN))
+	data["isAI"] = isAI(user) || isrobot(user)
+	data["isMalfAI"] = (isAI(user) || isrobot(user)) && (user.mind.antagonist.len && user.mind.original == user)
 
+	// Determine screen state
 	if(hacking || emag)
-		screen = 2
+		data["screen"] = 2
 	else if(!auth || !linkedServer || (linkedServer.stat & (NOPOWER|BROKEN)))
-		if(!linkedServer || (linkedServer.stat & (NOPOWER|BROKEN))) message = noserver
-		screen = 0
-
-	switch(screen)
-		//Main menu
-		if(0)
-			//&#09; = TAB
-			var/i = 0
-			dat += "<dd><A href='byond://?src=\ref[src];find=1'>&#09;[++i]. Link To A Server</a></dd>"
-			if(auth)
-				if(!linkedServer || (linkedServer.stat & (NOPOWER|BROKEN)))
-					dat += "<dd><A>&#09;ERROR: Server not found!</A><br></dd>"
-				else
-					dat += "<dd><A href='byond://?src=\ref[src];viewr=1'>&#09;[++i]. View Request Console Logs </a></br></dd>"
-					dat += "<dd><A href='byond://?src=\ref[src];clearr=1'>&#09;[++i]. Clear Request Console Logs</a><br></dd>"
-					dat += "<dd><A href='byond://?src=\ref[src];pass=1'>&#09;[++i]. Set Custom Key</a><br></dd>"
-					dat += "<dd><A href='byond://?src=\ref[src];msg=1'>&#09;[++i]. Send Admin Message</a><br></dd>"
-			else
-				for(var/n = ++i; n <= optioncount; n++)
-					dat += "<dd><font color='blue'>&#09;[n]. ---------------</font><br></dd>"
-			if((isAI(user) || isrobot(user)) && (user.mind.antagonist.len && user.mind.original == user))
-				//Malf/Contractor AIs can bruteforce into the system to gain the Key.
-				dat += "<dd><A href='byond://?src=\ref[src];hack=1'><i><font color='Red'>*&@#. Bruteforce Key</font></i></font></a><br></dd>"
-			else
-				dat += "<br>"
+		if(!linkedServer || (linkedServer.stat & (NOPOWER|BROKEN)))
+			message = noserver
+		data["screen"] = 0
+	else
+		data["screen"] = screen
 
-			//Bottom message
-			if(!auth)
-				dat += "<br><hr><dd>[span_notice("Please authenticate with the server in order to show additional options.")]"
-			else
-				dat += "<br><hr><dd>[span_warning("Reg, #514 forbids sending messages to a Head of Staff containing Erotic Rendering Properties.")]"
+	// Request console logs data
+	if(screen == 4 && linkedServer)
+		var/list/logs = list()
+		var/index = 0
+		for(var/datum/data_rc_msg/rc in linkedServer.rc_msgs)
+			index++
+			if(index > 3000)
+				break
+			logs += list(list(
+				"ref" = "\ref[rc]",
+				"send_dpt" = rc.send_dpt,
+				"rec_dpt" = rc.rec_dpt,
+				"message" = rc.message,
+				"stamp" = rc.stamp,
+				"id_auth" = rc.id_auth,
+				"priority" = rc.priority
+			))
+		data["logs"] = logs
 
-		//Hacking screen.
-		if(2)
-			if(isAI(user) || isrobot(user))
-				dat += "Brute-forcing for server key.<br> It will take 20 seconds for every character that the password has."
-				dat += "In the meantime, this console can reveal your true intentions if you let someone access it. Make sure no humans enter the room during that time."
-			else
-				//It's the same message as the one above but in binary. Because robots understand binary and humans don't... well I thought it was clever.
-				dat += {"01000010011100100111010101110100011001010010110<br>
-				10110011001101111011100100110001101101001011011100110011<br>
-				10010000001100110011011110111001000100000011100110110010<br>
-				10111001001110110011001010111001000100000011010110110010<br>
-				10111100100101110001000000100100101110100001000000111011<br>
-				10110100101101100011011000010000001110100011000010110101<br>
-				10110010100100000001100100011000000100000011100110110010<br>
-				10110001101101111011011100110010001110011001000000110011<br>
-				00110111101110010001000000110010101110110011001010111001<br>
-				00111100100100000011000110110100001100001011100100110000<br>
-				10110001101110100011001010111001000100000011101000110100<br>
-				00110000101110100001000000111010001101000011001010010000<br>
-				00111000001100001011100110111001101110111011011110111001<br>
-				00110010000100000011010000110000101110011001011100010000<br>
-				00100100101101110001000000111010001101000011001010010000<br>
-				00110110101100101011000010110111001110100011010010110110<br>
-				10110010100101100001000000111010001101000011010010111001<br>
-				10010000001100011011011110110111001110011011011110110110<br>
-				00110010100100000011000110110000101101110001000000111001<br>
-				00110010101110110011001010110000101101100001000000111100<br>
-				10110111101110101011100100010000001110100011100100111010<br>
-				10110010100100000011010010110111001110100011001010110111<br>
-				00111010001101001011011110110111001110011001000000110100<br>
-				10110011000100000011110010110111101110101001000000110110<br>
-				00110010101110100001000000111001101101111011011010110010<br>
-				10110111101101110011001010010000001100001011000110110001<br>
-				10110010101110011011100110010000001101001011101000010111<br>
-				00010000001001101011000010110101101100101001000000111001<br>
-				10111010101110010011001010010000001101110011011110010000<br>
-				00110100001110101011011010110000101101110011100110010000<br>
-				00110010101101110011101000110010101110010001000000111010<br>
-				00110100001100101001000000111001001101111011011110110110<br>
-				10010000001100100011101010111001001101001011011100110011<br>
-				10010000001110100011010000110000101110100001000000111010<br>
-				001101001011011010110010100101110"}
-
-
-		//Request Console Logs
-		if(4)
-
-			var/index = 0
-			/* 	data_rc_msg
-				X												 - 5%
-				var/rec_dpt = "Unspecified" //name of the person - 15%
-				var/send_dpt = "Unspecified" //name of the sender- 15%
-				var/message = "Blank" //transferred message		 - 300px
-				var/stamp = "Unstamped"							 - 15%
-				var/id_auth = "Unauthenticated"					 - 15%
-				var/priority = "Normal"							 - 10%
-			*/
-			dat += "<center><A href='byond://?src=\ref[src];back=1'>Back</a> - <A href='byond://?src=\ref[src];refresh=1'>Refresh</center><hr>"
-			dat += {"<table border='1' width='100%'><tr><th width = '5%'>X</th><th width='15%'>Sending Dep.</th><th width='15%'>Receiving Dep.</th>
-			<th width='300px' word-wrap: break-word>Message</th><th width='15%'>Stamp</th><th width='15%'>ID Auth.</th><th width='15%'>Priority.</th></tr>"}
-			for(var/datum/data_rc_msg/rc in src.linkedServer.rc_msgs)
-				index++
-				if(index > 3000)
-					break
-				// Del - Sender   - Recepient - Message
-				// X   - Al Green - Your Mom  - WHAT UP!?
-				dat += {"<tr><td width = '5%'><center><A href='byond://?src=\ref[src];deleter=\ref[rc]' style='color: rgb(255,0,0)'>X</a></center></td><td width='15%'>[rc.send_dpt]</td>
-				<td width='15%'>[rc.rec_dpt]</td><td width='300px'>[rc.message]</td><td width='15%'>[rc.stamp]</td><td width='15%'>[rc.id_auth]</td><td width='15%'>[rc.priority]</td></tr>"}
-			dat += "</table>"
-
-	message = defaultmsg
-	user << browse(HTML_SKELETON_TITLE("Message Monitor Console", dat), "window=message;size=700x700")
-	onclose(user, "message")
-	return
+	return data
+
+/obj/machinery/computer/message_monitor/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
+	. = ..()
+	if(.)
+		return TRUE
+
+	// Map TGUI actions to existing Topic parameters
+	var/list/href_list = list()
+
+	switch(action)
+		if("auth")
+			href_list["auth"] = "1"
+		if("active")
+			href_list["active"] = "1"
+		if("find")
+			href_list["find"] = "1"
+		if("viewr")
+			href_list["viewr"] = "1"
+		if("clearr")
+			href_list["clearr"] = "1"
+		if("pass")
+			href_list["pass"] = "1"
+		if("msg")
+			href_list["msg"] = "1"
+		if("hack")
+			href_list["hack"] = "1"
+		if("back")
+			href_list["back"] = "1"
+		if("refresh")
+			href_list["refresh"] = "1"
+		if("deleter")
+			href_list["deleter"] = params["ref"]
+
+	// Call existing Topic method
+	Topic("", href_list)
+	return TRUE
 
 /obj/machinery/computer/message_monitor/proc/BruteForce(mob/user as mob)
 	if(isnull(linkedServer))
diff --git a/code/game/machinery/suit_storage_unit.dm b/code/game/machinery/suit_storage_unit.dm
index 32a867d18c3..fdd8e41516d 100644
--- a/code/game/machinery/suit_storage_unit.dm
+++ b/code/game/machinery/suit_storage_unit.dm
@@ -103,49 +103,72 @@
 	. = ..()
 
 /obj/machinery/suit_storage_unit/attack_hand(mob/user as mob)
-	var/dat
 	if(..())
 		return
 	if(stat & NOPOWER)
 		return
 	if(!user.IsAdvancedToolUser())
 		return 0
-	if(panel_open) //The maintenance panel is open. Time for some shady stuff
-		dat += "<HEAD><TITLE>Suit storage unit: Maintenance panel</TITLE></HEAD>"
-		dat += "<B>Maintenance panel controls</B><HR>"
-		dat += "A small dial with a small lambda symbol on it. It's pointing towards a gauge that reads [issuperUV ? "15nm" : "185nm"]</font>.<BR> <font color='blue'><A href='byond://?src=\ref[src];toggleUV=1'> Turn towards [issuperUV ? "185nm" : "15nm"]</A><BR>"
-		dat += "A thick old-style button, with 2 grimy LED lights next to it. The <B>[safeties? "<font color='green'>GREEN</font>" : "<font color='red'>RED</font>"]</B> LED is on.</font><BR><font color ='blue'><A href='byond://?src=\ref[src];togglesafeties=1'>Press button</a>"
-	else if(isUV) //The thing is running its cauterisation cycle. You have to wait.
-		dat += "<HEAD><TITLE>Suit storage unit</TITLE></HEAD>"
-		dat += "<font color ='red'><B>Unit is cauterising contents with selected UV ray intensity. Please wait.</font></B><BR>"
+	ui_interact(user)
 
-	else
-		dat += "<HEAD><TITLE>Suit storage unit</TITLE></HEAD>"
-		dat += "<font color='blue'><font size = 4><B>Suit Storage Unit</B></FONT><HR>"
-		dat += "Helmet storage compartment: <B>[HELMET ? HELMET.name : "<font color ='grey'>No helmet detected.</font>"]</B><BR>"
-		if(HELMET && isopen)
-			dat += "<A href='byond://?src=\ref[src];dispense_helmet=1'>Dispense helmet</A><BR>"
-		dat += "Suit storage compartment: <B>[SUIT ? SUIT.name : "<font color ='grey'>No exosuit detected.</font>"]</B><BR>"
-		if(SUIT && isopen)
-			dat += "<A href='byond://?src=\ref[src];dispense_suit=1'>Dispense suit</A><BR>"
-		dat += "Breathmask storage compartment: <B>[MASK ? MASK.name : "<font color ='grey'>No breathmask detected.</font>"]</B><BR>"
-		if(MASK && isopen)
-			dat += "<A href='byond://?src=\ref[src];dispense_mask=1'>Dispense mask</A><BR>"
-		if(OCCUPANT)
-			dat += "<HR><B><font color ='red'>WARNING: Biological entity detected inside the Unit's storage. Please remove.</B></font><BR>"
-			dat += "<A href='byond://?src=\ref[src];eject_guy=1'>Eject extra load</A>"
-		dat += "<HR><font color='black'>Unit is: [isopen ? "Open" : "Closed"] - <A href='byond://?src=\ref[src];toggle_open=1'>[isopen ? "Close" : "Open"] Unit</A></font>"
-		if(isopen)
-			dat += "<HR>"
-		else
-			dat += " - <A href='byond://?src=\ref[src];toggle_lock=1'><font color ='orange'>*[locked ? "Unlock" : "Lock"] Unit*</A></font><HR>"
-		dat += "Unit status: <B>[locked? "<font color ='red'>**LOCKED**</font>" : "<font color ='green'>**UNLOCKED**</font>"]</B><BR>"
-		dat += "<A href='byond://?src=\ref[src];start_UV=1'>Start Disinfection cycle</A><BR>"
+/obj/machinery/suit_storage_unit/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "SuitStorage", "Suit Storage Unit")
+		ui.open()
 
-	user << browse(HTML_SKELETON_TITLE("Suit Storage Unit",dat), "window=suit_storage_unit;size=400x500")
-	onclose(user, "suit_storage_unit")
-	return
+/obj/machinery/suit_storage_unit/ui_state(mob/user)
+	return GLOB.default_state
+
+/obj/machinery/suit_storage_unit/ui_data(mob/user)
+	var/list/data = list()
+
+	data["panelOpen"] = panel_open
+	data["isUV"] = isUV
+	data["isOpen"] = isopen
+	data["locked"] = locked
+	data["issuperUV"] = issuperUV
+	data["safeties"] = safeties
+	data["hasOccupant"] = !!OCCUPANT
+
+	// Equipment data
+	data["helmet"] = HELMET ? HELMET.name : null
+	data["suit"] = SUIT ? SUIT.name : null
+	data["mask"] = MASK ? MASK.name : null
+
+	return data
+
+/obj/machinery/suit_storage_unit/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
+	. = ..()
+	if(.)
+		return TRUE
 
+	// Map TGUI actions to existing Topic parameters
+	var/list/href_list = list()
+
+	switch(action)
+		if("toggleUV")
+			href_list["toggleUV"] = "1"
+		if("togglesafeties")
+			href_list["togglesafeties"] = "1"
+		if("dispense_helmet")
+			href_list["dispense_helmet"] = "1"
+		if("dispense_suit")
+			href_list["dispense_suit"] = "1"
+		if("dispense_mask")
+			href_list["dispense_mask"] = "1"
+		if("eject_guy")
+			href_list["eject_guy"] = "1"
+		if("toggle_open")
+			href_list["toggle_open"] = "1"
+		if("toggle_lock")
+			href_list["toggle_lock"] = "1"
+		if("start_UV")
+			href_list["start_UV"] = "1"
+
+	// Call existing Topic method
+	Topic("", href_list)
+	return TRUE
 
 /obj/machinery/suit_storage_unit/Topic(href, href_list) //I fucking HATE this proc
 	if(..())
diff --git a/code/game/objects/structures/tank_dispenser.dm b/code/game/objects/structures/tank_dispenser.dm
index 33f946153be..8cdf32669f6 100644
--- a/code/game/objects/structures/tank_dispenser.dm
+++ b/code/game/objects/structures/tank_dispenser.dm
@@ -1,6 +1,8 @@
-/obj/structure/dispenser
-	name = "tank storage unit"
-	desc = "A simple yet bulky storage device for gas tanks. Has room for up to ten oxygen tanks, and ten plasma tanks."
+#define TANK_DISPENSER_CAPACITY 10
+
+/obj/structure/tank_dispenser
+	name = "tank dispenser"
+	desc = "A simple yet bulky storage device for gas tanks. Holds up to 10 oxygen tanks and 10 plasma tanks."
 	icon = 'icons/obj/objects.dmi'
 	icon_state = "dispenser"
 	density = TRUE
@@ -9,112 +11,137 @@
 	layer = BELOW_OBJ_LAYER
 	spawn_tags = SPAWN_TAG_STRUCTURE_COMMON
 	rarity_value = 50
-	var/oxygentanks = 10
-	var/plasmatanks = 10
-	var/list/oxytanks = list()	//sorry for the similar var names
-	var/list/platanks = list()
+	var/oxygentanks = TANK_DISPENSER_CAPACITY
+	var/plasmatanks = TANK_DISPENSER_CAPACITY
 
 
-/obj/structure/dispenser/oxygen
+/obj/structure/tank_dispenser/oxygen
+	desc = "A simple yet bulky storage device for gas tanks. Holds up to 10 oxygen tanks"
 	plasmatanks = 0
 	rarity_value = 10
 
-/obj/structure/dispenser/plasma
+/obj/structure/tank_dispenser/plasma
+	desc = "A simple yet bulky storage device for gas tanks. Holds up to 10 plasma tanks."
 	oxygentanks = 0
 	rarity_value = 25
 
 
-/obj/structure/dispenser/Initialize()
+/obj/structure/tank_dispenser/Initialize()
 	. = ..()
 	update_icon()
 
 
-/obj/structure/dispenser/update_icon()
+/obj/structure/tank_dispenser/update_icon()
 	overlays.Cut()
 	switch(oxygentanks)
-		if(1 to 3)	overlays += "oxygen-[oxygentanks]"
-		if(4 to INFINITY) overlays += "oxygen-4"
+		if(1 to 3)
+			overlays += "oxygen-[oxygentanks]"
+		if(4 to TANK_DISPENSER_CAPACITY)
+			overlays += "oxygen-4"
 	switch(plasmatanks)
-		if(1 to 4)	overlays += "plasma-[plasmatanks]"
-		if(5 to INFINITY) overlays += "plasma-5"
+		if(1 to 4)
+			overlays += "plasma-[plasmatanks]"
+		if(5 to TANK_DISPENSER_CAPACITY)
+			overlays += "plasma-5"
 
-/obj/structure/dispenser/attack_ai(mob/user)
+/obj/structure/tank_dispenser/attack_ai(mob/user)
 	if(user.Adjacent(src))
 		return attack_hand(user)
 	..()
 
-/obj/structure/dispenser/attack_hand(mob/user)
+/obj/structure/tank_dispenser/attack_hand(mob/user)
 	user.set_machine(src)
-	var/dat = "[src]<br><br>"
-	dat += "Oxygen tanks: [oxygentanks] - [oxygentanks ? "<A href='byond://?src=\ref[src];oxygen=1'>Dispense</A>" : "empty"]<br>"
-	dat += "Plasma tanks: [plasmatanks] - [plasmatanks ? "<A href='byond://?src=\ref[src];plasma=1'>Dispense</A>" : "empty"]"
-	user << browse(HTML_SKELETON_TITLE("Tank storage", dat), "window=dispenser")
-	onclose(user, "dispenser")
-
-
-/obj/structure/dispenser/attackby(obj/item/I, mob/user)
-	if(istype(I, /obj/item/tank/oxygen) || istype(I, /obj/item/tank/air) || istype(I, /obj/item/tank/anesthetic))
-		if(oxygentanks < 10)
-			user.drop_item()
-			I.forceMove(src)
-			oxytanks.Add(I)
-			oxygentanks++
-			to_chat(user, span_notice("You put [I] in [src]."))
-			if(oxygentanks < 5)
-				update_icon()
-		else
-			to_chat(user, span_notice("[src] is full."))
-		updateUsrDialog()
-		return
-	if(istype(I, /obj/item/tank/plasma))
-		if(plasmatanks < 10)
-			user.drop_item()
-			I.forceMove(src)
-			platanks.Add(I)
-			plasmatanks++
-			to_chat(user, span_notice("You put [I] in [src]."))
-			if(plasmatanks < 6)
-				update_icon()
-		else
-			to_chat(user, span_notice("[src] is full."))
-		updateUsrDialog()
+	ui_interact(user)
+
+/obj/structure/tank_dispenser/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "TankDispenser", name)
+		ui.open()
+
+/obj/structure/tank_dispenser/ui_data(mob/user)
+	var/list/data = list()
+	data["oxygen"] = oxygentanks
+	data["plasma"] = plasmatanks
+
+	return data
+
+/obj/structure/tank_dispenser/ui_state(mob/user)
+	return GLOB.physical_state
+
+/obj/structure/tank_dispenser/ui_act(action, params)
+	. = ..()
+	if(.)
 		return
-	if(QUALITY_BOLT_TURNING in I.tool_qualities)
-		if(I.use_tool(user, src, WORKTIME_NORMAL, QUALITY_BOLT_TURNING, FAILCHANCE_EASY,  required_stat = STAT_MEC))
-			if(anchored)
-				to_chat(user, span_notice("You lean down and unwrench [src]."))
-				anchored = FALSE
-			else
-				to_chat(user, span_notice("You wrench [src] into place."))
-				anchored = TRUE
-			return
-
-/obj/structure/dispenser/Topic(href, href_list)
-	if(..())
-		return 1
+
+	var/obj/item/tank/dispensed_tank
+	switch(action)
+		if("plasma")
+			if (plasmatanks == 0)
+				return TRUE
+			dispensed_tank = dispense(/obj/item/tank/plasma, usr)
+			plasmatanks--
+		if("oxygen")
+			if (oxygentanks == 0)
+				return TRUE
+			dispensed_tank = dispense(/obj/item/tank/oxygen, usr)
+			oxygentanks--
+
+	to_chat(usr, span_notice("You take [dispensed_tank] out of [src]."))
+	playsound(src.loc, 'sound/machines/Custom_extout.ogg', 100, 1)
 
 	usr.set_machine(src)
+	update_icon()
+	return TRUE
+
 
-	var/obj/item/tank/tank
-	if(href_list["oxygen"] && oxygentanks > 0)
-		if(oxytanks.len)
-			tank = oxytanks[oxytanks.len]	// Last stored tank is always the first one to be dispensed
-			oxytanks.Remove(tank)
+/obj/structure/tank_dispenser/attackby(obj/item/attacking_item, mob/user)
+	var/full
+	if(istype(attacking_item, /obj/item/tank/plasma))
+		if(plasmatanks < TANK_DISPENSER_CAPACITY)
+			plasmatanks++
 		else
-			tank = new /obj/item/tank/oxygen(loc)
-		oxygentanks--
-	if(href_list["plasma"] && plasmatanks > 0)
-		if(platanks.len)
-			tank = platanks[platanks.len]
-			platanks.Remove(tank)
+			full = TRUE
+	else if(istype(attacking_item, /obj/item/tank/oxygen))
+		if(oxygentanks < TANK_DISPENSER_CAPACITY)
+			oxygentanks++
 		else
-			tank = new /obj/item/tank/plasma(loc)
-		plasmatanks--
+			full = TRUE
+	else if(!(user.a_intent & I_HURT) || (attacking_item.flags & NOBLUDGEON))
+		// TODO: REPLACE WITH balloon_alert(user, "can't insert!")
+		say_quote("can't insert!")
+		return
+	else
+		if(QUALITY_BOLT_TURNING in attacking_item.tool_qualities)
+			if(attacking_item.use_tool(user, src, WORKTIME_NORMAL, QUALITY_BOLT_TURNING, FAILCHANCE_EASY,  required_stat = STAT_MEC))
+				if(anchored)
+					to_chat(user, span_notice("You lean down and unwrench [src]."))
+					anchored = FALSE
+				else
+					to_chat(user, span_notice("You wrench [src] into place."))
+					anchored = TRUE
+				return
+		return ..()
+	if(full)
+		to_chat(user, span_notice("[src] can't hold any more of [attacking_item]."))
+		return
+
+	if(!user.unEquip(attacking_item, src))
+		return
+
+	playsound(src.loc, 'sound/machines/Custom_extin.ogg', 100, 1)
+	if (!do_after(user, 0.5 SECONDS, src, immobile = TRUE))
+		return
+
+	to_chat(user, span_notice("You put [attacking_item] in [src]."))
+	update_icon()
+
+/obj/structure/tank_dispenser/proc/dispense(tank_type, mob/receiver)
+	var/existing_tank = locate(tank_type) in src
+	if (isnull(existing_tank))
+		existing_tank = new tank_type
+	receiver.put_in_hands(existing_tank)
 
-	if(tank)
-		tank.forceMove(drop_location())
-		to_chat(usr, span_notice("You take [tank] out of [src]."))
-		update_icon()
+	return existing_tank
 
-	playsound(usr.loc, 'sound/machines/Custom_extout.ogg', 100, 1)
-	updateUsrDialog()
+#undef TANK_DISPENSER_CAPACITY
diff --git a/code/modules/economy/ATM.dm b/code/modules/economy/ATM.dm
index 9ac54a19b4f..f999bd7b93e 100644
--- a/code/modules/economy/ATM.dm
+++ b/code/modules/economy/ATM.dm
@@ -139,105 +139,7 @@ log transactions
 	if (..())
 		return
 	if(get_dist(src,user) <= 1)
-
-		//js replicated from obj/machinery/computer/card
-		var/dat = "<h1>Automatic Teller Machine</h1>"
-		dat += "For all your monetary needs!<br>"
-		dat += "<i>This terminal is</i> [machine_id]. <i>Report this code when contacting IT Support</i><br/>"
-
-		if(emagged > 0)
-			dat += "Card: <span style='color: red;'>LOCKED</span><br><br><span style='color: red;'>Unauthorized terminal access detected! This ATM has been locked. Please contact IT Support.</span>"
-		else
-			dat += "Card: <a href='byond://?src=\ref[src];choice=insert_card'>[held_card ? held_card.name : "------"]</a><br><br>"
-
-			if(ticks_left_locked_down > 0)
-				dat += span_alert("Maximum number of pin attempts exceeded! Access to this ATM has been temporarily disabled.")
-			else if(authenticated_account)
-				if(authenticated_account.suspended)
-					dat += span_red(span_bold("Access to this account has been suspended, and the funds within frozen."))
-				else
-					switch(view_screen)
-						if(CHANGE_SECURITY_LEVEL)
-							dat += "Select a new security level for this account:<br><hr>"
-							var/text = "Zero - Either the account number and pin, or card and pin are required to access this account. "
-							text += "Vending machine transactions will only require a card. EFTPOS transactions will require a card and ask for a pin, but not verify the pin is correct."
-
-							if(authenticated_account.security_level != 0)
-								text = "<A href='byond://?src=\ref[src];choice=change_security_level;new_security_level=0'>[text]</a>"
-							dat += "[text]<hr>"
-							text = "One - An account number and pin must be manually entered to access this account and process transactions. Vending machine transactions will require card and pin."
-							if(authenticated_account.security_level != 1)
-								text = "<A href='byond://?src=\ref[src];choice=change_security_level;new_security_level=1'>[text]</a>"
-							dat += "[text]<hr>"
-							text = "Two - In addition to account number and pin, a card is required to access this account and process transactions."
-							if(authenticated_account.security_level != 2)
-								text = "<A href='byond://?src=\ref[src];choice=change_security_level;new_security_level=2'>[text]</a>"
-							dat += "[text]<hr><br>"
-							dat += "<A href='byond://?src=\ref[src];choice=view_screen;view_screen=0'>Back</a>"
-						if(VIEW_TRANSACTION_LOGS)
-							dat += "<b>Transaction logs</b><br>"
-							dat += "<A href='byond://?src=\ref[src];choice=view_screen;view_screen=0'>Back</a>"
-							dat += "<table border=1 style='width:100%'>"
-							dat += "<tr>"
-							dat += "<td><b>Date</b></td>"
-							dat += "<td><b>Time</b></td>"
-							dat += "<td><b>Target</b></td>"
-							dat += "<td><b>Purpose</b></td>"
-							dat += "<td><b>Value</b></td>"
-							dat += "<td><b>Source terminal ID</b></td>"
-							dat += "</tr>"
-							for(var/datum/transaction/T in authenticated_account.transaction_log)
-								dat += "<tr>"
-								dat += "<td>[T.date]</td>"
-								dat += "<td>[T.time]</td>"
-								dat += "<td>[T.target_name]</td>"
-								dat += "<td>[T.purpose]</td>"
-								dat += "<td>[num2text(T.amount,12)][CREDS]</td>"
-								dat += "<td>[T.source_terminal]</td>"
-								dat += "</tr>"
-							dat += "</table>"
-							dat += "<A href='byond://?src=\ref[src];choice=print_transaction'>Print</a><br>"
-						if(TRANSFER_FUNDS)
-							dat += "<b>Account balance:</b> [num2text(authenticated_account.money,12)][CREDS]<br>"
-							dat += "<A href='byond://?src=\ref[src];choice=view_screen;view_screen=0'>Back</a><br><br>"
-							dat += "<form name='transfer' action='?src=\ref[src]' method='get'>"
-							dat += "<input type='hidden' name='src' value='\ref[src]'>"
-							dat += "<input type='hidden' name='choice' value='transfer'>"
-							dat += "Target account number: <input type='text' name='target_acc_number' value='' style='width:200px; background-color:white;'><br>"
-							dat += "Funds to transfer: <input type='text' name='funds_amount' value='' style='width:200px; background-color:white;'><br>"
-							dat += "Transaction purpose: <input type='text' name='purpose' value='Funds transfer' style='width:200px; background-color:white;'><br>"
-							dat += "<input type='submit' value='Transfer funds'><br>"
-							dat += "</form>"
-						else
-							dat += "Welcome, <b>[authenticated_account.owner_name].</b><br/>"
-							dat += "<b>Account balance:</b> [num2text(authenticated_account.money, 12)][CREDS]"
-							dat += "<form name='withdrawal' action='?src=\ref[src]' method='get'>"
-							dat += "<input type='hidden' name='src' value='\ref[src]'>"
-							dat += "<input type='radio' name='choice' value='withdrawal' checked> Cash  <input type='radio' name='choice' value='e_withdrawal'> Chargecard<br>"
-							dat += "<input type='text' name='funds_amount' value='' style='width:200px; background-color:white;'><input type='submit' value='Withdraw'>"
-							dat += "</form>"
-							dat += "<A href='byond://?src=\ref[src];choice=view_screen;view_screen=1'>Change account security level</a><br>"
-							dat += "<A href='byond://?src=\ref[src];choice=view_screen;view_screen=2'>Make transfer</a><br>"
-							dat += "<A href='byond://?src=\ref[src];choice=view_screen;view_screen=3'>View transaction log</a><br>"
-							dat += "<A href='byond://?src=\ref[src];choice=balance_statement'>Print balance statement</a><br>"
-							dat += "<A href='byond://?src=\ref[src];choice=logout'>Logout</a><br>"
-			else
-				dat += "<form name='atm_auth' action='?src=\ref[src]' method='get'>"
-				dat += "<input type='hidden' name='src' value='\ref[src]'>"
-				dat += "<input type='hidden' name='choice' value='attempt_auth'>"
-				dat += "<b>Account:</b> "
-
-
-				if(held_card && held_card.associated_account_number)
-					dat += "<input type='text' id='account_num' name='account_num' style='width:250px; background-color:white;' readonly=1 value='[held_card.associated_account_number]'>"
-				else
-					dat += "<input type='text' id='account_num' name='account_num' style='width:250px; background-color:white;'>"
-
-				dat += "<br><b>PIN:</b> <input type='text' id='account_pin' name='account_pin' style='width:250px; background-color:white;'><br>"
-				dat += "<input type='submit' value='Submit'><br>"
-				dat += "</form>"
-
-		user << browse(HTML_SKELETON_TITLE("ATM", dat),"window=atm;size=600x650")
+		ui_interact(user)
 	else
 		user << browse(null,"window=atm")
 
@@ -443,3 +345,56 @@ log transactions
 		human_user.put_in_hands(E)
 	E.worth = sum
 	E.owner_name = authenticated_account.owner_name
+
+/obj/machinery/atm/ui_interact(mob/user, datum/tgui/ui)
+    if(issilicon(user))
+        to_chat(user, span_red("[icon2html(src, user)] Artificial units do not currently receive monetary compensation, as per system banking regulation #1005."))
+        return
+
+    ui = SStgui.try_update_ui(user, src, ui)
+    if(!ui)
+        ui = new(user, src, "ATM", name)
+        ui.open()
+
+/obj/machinery/atm/ui_data(mob/user)
+    var/list/data = list()
+
+    data["machine_id"] = machine_id
+    data["held_card"] = held_card ? held_card.name : null
+    data["emagged"] = emagged
+    data["locked_down"] = ticks_left_locked_down > 0
+    data["authenticated"] = !!authenticated_account
+    data["screen"] = view_screen
+
+    if(authenticated_account)
+        data["account"] = list(
+            "owner_name" = authenticated_account.owner_name,
+            "money" = authenticated_account.money,
+            "security_level" = authenticated_account.security_level,
+            "suspended" = authenticated_account.suspended
+        )
+
+        var/list/transactions = list()
+        for(var/datum/transaction/T in authenticated_account.transaction_log)
+            transactions += list(list(
+                "date" = T.date,
+                "time" = T.time,
+                "target_name" = T.target_name,
+                "purpose" = T.purpose,
+                "amount" = T.amount,
+                "source_terminal" = T.source_terminal
+            ))
+        data["transactions"] = transactions
+
+    if(held_card)
+        data["default_account_number"] = held_card.associated_account_number
+
+    return data
+
+/obj/machinery/atm/ui_act(action, params)
+    . = ..()
+    if(.)
+        return
+
+    Topic(null, params)
+    return TRUE
diff --git a/code/modules/hydroponics/seed_storage.dm b/code/modules/hydroponics/seed_storage.dm
index 93ef2346f19..95e8388a8c3 100644
--- a/code/modules/hydroponics/seed_storage.dm
+++ b/code/modules/hydroponics/seed_storage.dm
@@ -134,119 +134,154 @@
 
 /obj/machinery/seed_storage/attack_hand(mob/user as mob)
 	user.set_machine(src)
-	interact(user)
+	ui_interact(user)
 
-/obj/machinery/seed_storage/interact(mob/user as mob)
-	if (..())
-		return
+/obj/machinery/seed_storage/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "SeedStorage", name)
+		ui.open()
 
-	var/dat = "<center><h1>Seed storage contents</h1></center>"
-	if (piles.len == 0)
-		dat += "<font color='red'>No seeds</font>"
-	else
-		dat += "<table style='text-align:center;border-style:solid;border-width:1px;padding:4px'><tr><td>Name</td>"
-		dat += "<td>Variety</td>"
-		if ("stats" in scanner)
-			dat += "<td>E</td><td>Y</td><td>M</td><td>Pr</td><td>Pt</td><td>Harvest</td>"
-		if ("temperature" in scanner)
-			dat += "<td>Temp</td>"
-		if ("light" in scanner)
-			dat += "<td>Light</td>"
-		if ("soil" in scanner)
-			dat += "<td>Nutri</td><td>Water</td>"
-		dat += "<td>Notes</td><td>Amount</td><td></td></tr>"
-		for (var/datum/seed_pile/S in piles)
-			var/datum/seed/seed = S.seed_type
-			if(!seed)
-				continue
-			dat += "<tr>"
-			dat += "<td>[seed.seed_name]</td>"
-			dat += "<td>#[seed.uid]</td>"
-			if ("stats" in scanner)
-				dat += "<td>[seed.get_trait(TRAIT_ENDURANCE)]</td><td>[seed.get_trait(TRAIT_YIELD)]</td><td>[seed.get_trait(TRAIT_MATURATION)]</td><td>[seed.get_trait(TRAIT_PRODUCTION)]</td><td>[seed.get_trait(TRAIT_POTENCY)]</td>"
-				if(seed.get_trait(TRAIT_HARVEST_REPEAT))
-					dat += "<td>Multiple</td>"
-				else
-					dat += "<td>Single</td>"
-			if ("temperature" in scanner)
-				dat += "<td>[seed.get_trait(TRAIT_IDEAL_HEAT)] K</td>"
-			if ("light" in scanner)
-				dat += "<td>[seed.get_trait(TRAIT_IDEAL_LIGHT)] L</td>"
-			if ("soil" in scanner)
-				if(seed.get_trait(TRAIT_REQUIRES_NUTRIENTS))
-					if(seed.get_trait(TRAIT_NUTRIENT_CONSUMPTION) < 0.05)
-						dat += "<td>Low</td>"
-					else if(seed.get_trait(TRAIT_NUTRIENT_CONSUMPTION) > 0.2)
-						dat += "<td>High</td>"
-					else
-						dat += "<td>Norm</td>"
+/obj/machinery/seed_storage/ui_data(mob/user)
+	var/list/data = list()
+
+	data["scanner"] = scanner
+
+	var/list/seed_list = list()
+	for(var/datum/seed_pile/S in piles)
+		var/datum/seed/seed = S.seed_type
+		if(!seed)
+			continue
+
+		var/list/seed_data = list(
+			"id" = S.ID,
+			"name" = seed.seed_name,
+			"variety" = seed.uid,
+			"amount" = S.amount
+		)
+
+		// Stats data
+		if("stats" in scanner)
+			seed_data["endurance"] = seed.get_trait(TRAIT_ENDURANCE)
+			seed_data["yield"] = seed.get_trait(TRAIT_YIELD)
+			seed_data["maturation"] = seed.get_trait(TRAIT_MATURATION)
+			seed_data["production"] = seed.get_trait(TRAIT_PRODUCTION)
+			seed_data["potency"] = seed.get_trait(TRAIT_POTENCY)
+			seed_data["harvest"] = seed.get_trait(TRAIT_HARVEST_REPEAT) ? "Multiple" : "Single"
+
+		// Temperature data
+		if("temperature" in scanner)
+			seed_data["ideal_heat"] = seed.get_trait(TRAIT_IDEAL_HEAT)
+
+		// Light data
+		if("light" in scanner)
+			seed_data["ideal_light"] = seed.get_trait(TRAIT_IDEAL_LIGHT)
+
+		// Soil data
+		if("soil" in scanner)
+			// Nutrient requirements
+			if(seed.get_trait(TRAIT_REQUIRES_NUTRIENTS))
+				var/consumption = seed.get_trait(TRAIT_NUTRIENT_CONSUMPTION)
+				if(consumption < 0.05)
+					seed_data["nutrients"] = "Low"
+				else if(consumption > 0.2)
+					seed_data["nutrients"] = "High"
 				else
-					dat += "<td>No</td>"
-				if(seed.get_trait(TRAIT_REQUIRES_WATER))
-					if(seed.get_trait(TRAIT_WATER_CONSUMPTION) < 1)
-						dat += "<td>Low</td>"
-					else if(seed.get_trait(TRAIT_WATER_CONSUMPTION) > 5)
-						dat += "<td>High</td>"
-					else
-						dat += "<td>Norm</td>"
+					seed_data["nutrients"] = "Norm"
+			else
+				seed_data["nutrients"] = "No"
+
+			// Water requirements
+			if(seed.get_trait(TRAIT_REQUIRES_WATER))
+				var/consumption = seed.get_trait(TRAIT_WATER_CONSUMPTION)
+				if(consumption < 1)
+					seed_data["water"] = "Low"
+				else if(consumption > 5)
+					seed_data["water"] = "High"
 				else
-					dat += "<td>No</td>"
-
-			dat += "<td>"
-			switch(seed.get_trait(TRAIT_CARNIVOROUS))
-				if(1)
-					dat += "CARN "
-				if(2)
-					dat	+= "<font color='red'>CARN </font>"
-			switch(seed.get_trait(TRAIT_SPREAD))
-				if(1)
-					dat += "VINE "
-				if(2)
-					dat	+= "<font color='red'>VINE </font>"
-			if ("pressure" in scanner)
-				if(seed.get_trait(TRAIT_LOWKPA_TOLERANCE) < 20)
-					dat += "LP "
-				if(seed.get_trait(TRAIT_HIGHKPA_TOLERANCE) > 220)
-					dat += "HP "
-			if ("temperature" in scanner)
-				if(seed.get_trait(TRAIT_HEAT_TOLERANCE) > 30)
-					dat += "TEMRES "
-				else if(seed.get_trait(TRAIT_HEAT_TOLERANCE) < 10)
-					dat += "TEMSEN "
-			if ("light" in scanner)
-				if(seed.get_trait(TRAIT_LIGHT_TOLERANCE) > 10)
-					dat += "LIGRES "
-				else if(seed.get_trait(TRAIT_LIGHT_TOLERANCE) < 3)
-					dat += "LIGSEN "
-			if(seed.get_trait(TRAIT_TOXINS_TOLERANCE) < 3)
-				dat += "TOXSEN "
-			else if(seed.get_trait(TRAIT_TOXINS_TOLERANCE) > 6)
-				dat += "TOXRES "
-			if(seed.get_trait(TRAIT_PEST_TOLERANCE) < 3)
-				dat += "PESTSEN "
-			else if(seed.get_trait(TRAIT_PEST_TOLERANCE) > 6)
-				dat += "PESTRES "
-			if(seed.get_trait(TRAIT_WEED_TOLERANCE) < 3)
-				dat += "WEEDSEN "
-			else if(seed.get_trait(TRAIT_WEED_TOLERANCE) > 6)
-				dat += "WEEDRES "
-			if(seed.get_trait(TRAIT_PARASITE))
-				dat += "PAR "
-			if ("temperature" in scanner)
-				if(seed.get_trait(TRAIT_ALTER_TEMP) > 0)
-					dat += "TEMP+ "
-				if(seed.get_trait(TRAIT_ALTER_TEMP) < 0)
-					dat += "TEMP- "
-			if(seed.get_trait(TRAIT_BIOLUM))
-				dat += "LUM "
-			dat += "</td>"
-			dat += "<td>[S.amount]</td>"
-			dat += "<td><a href='byond://?src=\ref[src];task=vend;id=[S.ID]'>Vend</a> <a href='byond://?src=\ref[src];task=purge;id=[S.ID]'>Purge</a></td>"
-			dat += "</tr>"
-		dat += "</table>"
-
-	user << browse(HTML_SKELETON_TITLE("Seed storage", dat), "window=seedstorage")
-	onclose(user, "seedstorage")
+					seed_data["water"] = "Norm"
+			else
+				seed_data["water"] = "No"
+
+		// Notes - special traits
+		var/list/notes = list()
+
+		switch(seed.get_trait(TRAIT_CARNIVOROUS))
+			if(1)
+				notes += "CARN"
+			if(2)
+				notes += "CARN!"
+
+		switch(seed.get_trait(TRAIT_SPREAD))
+			if(1)
+				notes += "VINE"
+			if(2)
+				notes += "VINE!"
+
+		if("pressure" in scanner)
+			if(seed.get_trait(TRAIT_LOWKPA_TOLERANCE) < 20)
+				notes += "LP"
+			if(seed.get_trait(TRAIT_HIGHKPA_TOLERANCE) > 220)
+				notes += "HP"
+
+		if("temperature" in scanner)
+			if(seed.get_trait(TRAIT_HEAT_TOLERANCE) > 30)
+				notes += "TEMRES"
+			else if(seed.get_trait(TRAIT_HEAT_TOLERANCE) < 10)
+				notes += "TEMSEN"
+			if(seed.get_trait(TRAIT_ALTER_TEMP) > 0)
+				notes += "TEMP+"
+			if(seed.get_trait(TRAIT_ALTER_TEMP) < 0)
+				notes += "TEMP-"
+
+		if("light" in scanner)
+			if(seed.get_trait(TRAIT_LIGHT_TOLERANCE) > 10)
+				notes += "LIGRES"
+			else if(seed.get_trait(TRAIT_LIGHT_TOLERANCE) < 3)
+				notes += "LIGSEN"
+
+		if(seed.get_trait(TRAIT_TOXINS_TOLERANCE) < 3)
+			notes += "TOXSEN"
+		else if(seed.get_trait(TRAIT_TOXINS_TOLERANCE) > 6)
+			notes += "TOXRES"
+
+		if(seed.get_trait(TRAIT_PEST_TOLERANCE) < 3)
+			notes += "PESTSEN"
+		else if(seed.get_trait(TRAIT_PEST_TOLERANCE) > 6)
+			notes += "PESTRES"
+
+		if(seed.get_trait(TRAIT_WEED_TOLERANCE) < 3)
+			notes += "WEEDSEN"
+		else if(seed.get_trait(TRAIT_WEED_TOLERANCE) > 6)
+			notes += "WEEDRES"
+
+		if(seed.get_trait(TRAIT_PARASITE))
+			notes += "PAR"
+
+		if(seed.get_trait(TRAIT_BIOLUM))
+			notes += "LUM"
+
+		seed_data["notes"] = notes.Join(" ")
+
+		seed_list += list(seed_data)
+
+	data["seeds"] = seed_list
+
+	return data
+
+/obj/machinery/seed_storage/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
+	. = ..()
+	if(.)
+		return TRUE
+
+	// Map TGUI actions to existing Topic parameters
+	var/list/href_list = list()
+	href_list["task"] = action
+	href_list["id"] = params["id"]
+
+	// Call existing Topic method with mapped parameters
+	Topic("", href_list)
+	return TRUE
 
 /obj/machinery/seed_storage/Topic(href, list/href_list)
 	if (..())
diff --git a/code/modules/mob/new_player/new_player.dm b/code/modules/mob/new_player/new_player.dm
index b26d0f46d60..8697b5edd14 100644
--- a/code/modules/mob/new_player/new_player.dm
+++ b/code/modules/mob/new_player/new_player.dm
@@ -204,7 +204,7 @@
 		var/datum/body_modification/mod = client.prefs.get_modification(BP_BRAIN)
 		if(istype(mod, /datum/body_modification/limb/amputation))
 			if(alert(src,"Are you sure you wish to spawn without a brain? This will likely cause you to do die immediately. \
-			              If not, go to the Augmentation section of Setup Character and change the \"brain\" slot from Removed to the desired kind of brain.", \
+						  If not, go to the Augmentation section of Setup Character and change the \"brain\" slot from Removed to the desired kind of brain.", \
 						  "Player Setup", "Yes", "No") == "No")
 				return FALSE
 
@@ -212,7 +212,7 @@
 		mod = client.prefs.get_modification(BP_EYES)
 		if(istype(mod, /datum/body_modification/limb/amputation))
 			if(alert(src,"Are you sure you wish to spawn without eyes? It will likely be difficult to see without them. \
-			              If not, go to the Augmentation section of Setup Character and change the \"eyes\" slot from Removed to the desired kind of eyes.", \
+						  If not, go to the Augmentation section of Setup Character and change the \"eyes\" slot from Removed to the desired kind of eyes.", \
 						  "Player Setup", "Yes", "No") == "No")
 				return FALSE
 
@@ -375,34 +375,61 @@
 	qdel(src)
 
 /mob/new_player/proc/LateChoices()
-	var/name = client.prefs.be_random_name ? "friend" : client.prefs.real_name
-
-	var/dat = ""
-	dat += "<b>Welcome, [name].<br></b>"
-	dat += "Round Duration: <B>[DisplayTimeText(world.time - SSticker.round_start_time)]</B><BR>"
-
-	if(evacuation_controller.has_evacuated()) //In case Nanotrasen decides reposess CentCom's shuttles.
-		dat += "<font color='red'><b>The vessel has been evacuated.</b></font><br>"
-	else if(evacuation_controller.is_evacuating())
-		if(evacuation_controller.emergency_evacuation) // Emergency shuttle is past the point of no recall
-			dat += "<font color='red'>The vessel is currently undergoing evacuation procedures.</font><br>"
-		else                                           // Crew transfer initiated
-			dat += "<font color='red'>The vessel is currently undergoing crew transfer procedures.</font><br>"
-
-	dat += "Choose from the following open/valid positions:<br>"
-	for(var/datum/job/job in SSjob.occupations)
-		if(job && IsJobAvailable(job.title))
-			if(job.is_restricted(client.prefs))
-				continue
-			var/active = 0
-			// Only players with the job assigned and AFK for less than 10 minutes count as active
-			for(var/mob/M in GLOB.player_list) if(M.mind && M.client && M.mind.assigned_role == job.title && M.client.inactivity <= 10 * 60 * 10)
-				active++
-			dat += "<a href='byond://?src=[REF(src)];SelectedJob=[job.title]'>[job.title] ([job.current_positions]) (Active: [active])</a><br>"
-
-	dat += "</center>"
-	src << browse(HTML_SKELETON_TITLE("Late join", dat), "window=latechoices;size=400x640;can_close=1")
-
+    var/datum/new_player/late_choices/LC = new()
+    LC.ui_interact(src)
+
+/datum/new_player/late_choices/ui_interact(mob/user, datum/tgui/ui)
+    ui = SStgui.try_update_ui(user, src, ui)
+    if(!ui)
+        ui = new(user, src, "LateJoin", "Late Join")
+        ui.open()
+
+/datum/new_player/late_choices/ui_data(mob/user)
+    var/list/data = list()
+    var/mob/new_player/player = user
+
+    data["name"] = player.client.prefs.be_random_name ? "friend" : player.client.prefs.real_name
+    data["roundDuration"] = DisplayTimeText(world.time - SSticker.round_start_time)
+
+    // Evacuation status
+    data["evacuated"] = evacuation_controller.has_evacuated()
+    data["evacuating"] = evacuation_controller.is_evacuating()
+    data["emergencyEvac"] = evacuation_controller.emergency_evacuation
+
+    // Available jobs
+    var/list/jobs = list()
+
+    for(var/datum/job/job in SSjob.occupations)
+        if(job && player.IsJobAvailable(job.title) && !job.is_restricted(player.client.prefs))
+            var/active = 0
+            // Count active players in this role
+            for(var/mob/M in GLOB.player_list)
+                if(M.mind && M.client && M.mind.assigned_role == job.title && M.client.inactivity <= 10 * 60 * 10)
+                    active++
+
+            jobs += list(list(
+                "title" = job.title,
+                "positions" = job.current_positions,
+                "active" = active
+            ))
+
+    data["jobs"] = jobs
+    return data
+
+/datum/new_player/late_choices/ui_act(action, params, datum/tgui/ui)
+    . = ..()
+    if(.)
+        return
+
+    var/mob/new_player/player = ui.user
+    switch(action)
+        if("select_job")
+            var/job_title = params["title"]
+            if(player.IsJobAvailable(job_title))
+                player.AttemptLateSpawn(job_title, player.client.prefs.spawnpoint)
+                return TRUE
+/datum/new_player/late_choices/ui_state(mob/user)
+	return GLOB.always_state
 
 /mob/new_player/proc/create_character()
 	spawning = 1
diff --git a/code/modules/paperwork/photocopier.dm b/code/modules/paperwork/photocopier.dm
index f7e3db01c87..37ea4bbc9b6 100644
--- a/code/modules/paperwork/photocopier.dm
+++ b/code/modules/paperwork/photocopier.dm
@@ -11,94 +11,97 @@
 	power_channel = STATIC_EQUIP
 	var/obj/item/copyitem = null	//what's in the copier!
 	var/copies = 1	//how many copies to print!
-	var/toner = 30 //how much toner is left! woooooo~
+	// TODO: Make toner an item instead of a value
+	var/obj/item/device/toner/toner
 	var/maxcopies = 10	//how many copies can be copied at once- idea shamelessly stolen from bs12's copier!
 
 /obj/machinery/photocopier/attack_hand(mob/user as mob)
-	user.set_machine(src)
-
-	var/dat = "Photocopier<BR><BR>"
-	if(copyitem)
-		dat += "<a href='byond://?src=\ref[src];remove=1'>Remove Item</a><BR>"
-		if(toner)
-			dat += "<a href='byond://?src=\ref[src];copy=1'>Copy</a><BR>"
-			dat += "Printing: [copies] copies."
-			dat += "<a href='byond://?src=\ref[src];min=1'>-</a> "
-			dat += "<a href='byond://?src=\ref[src];add=1'>+</a><BR><BR>"
-	else if(toner)
-		dat += "Please insert something to copy.<BR><BR>"
-	if(issilicon(user))
-		dat += "<a href='byond://?src=\ref[src];aipic=1'>Print photo from database</a><BR><BR>"
-	dat += "Current toner level: [toner]"
-	if(!toner)
-		dat +="<BR>Please insert a new toner cartridge!"
-	user << browse(HTML_SKELETON_TITLE("Photocopier", dat), "window=copier")
-	onclose(user, "copier")
-	return
+	ui_interact(user)
 
-/obj/machinery/photocopier/Topic(href, href_list)
-	if(href_list["copy"])
-		if(stat & (BROKEN|NOPOWER))
-			return
+/obj/machinery/photocopier/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "Photocopier", "Photocopier")
+		ui.open()
 
-		for(var/i = 0; i < copies; i++)
-			if(toner <= 0)
-				break
+/obj/machinery/photocopier/ui_state(mob/user)
+	return GLOB.default_state
 
-			if (istype(copyitem, /obj/item/paper))
-				copy(copyitem)
-				sleep(15)
-			else if (istype(copyitem, /obj/item/photo))
-				photocopy(copyitem)
-				sleep(15)
-			else if (istype(copyitem, /obj/item/paper_bundle))
-				var/obj/item/paper_bundle/B = bundlecopy(copyitem)
-				sleep(15*B.pages.len)
-			else
-				to_chat(usr, span_warning("\The [copyitem] can't be copied by \the [src]."))
-				break
-
-			use_power(active_power_usage)
-		updateUsrDialog()
-	else if(href_list["remove"])
-		if(copyitem)
-			copyitem.loc = usr.loc
-			usr.put_in_hands(copyitem)
-			to_chat(usr, span_notice("You take \the [copyitem] out of \the [src]."))
-			copyitem = null
-			updateUsrDialog()
-	else if(href_list["min"])
-		if(copies > 1)
-			copies--
-			updateUsrDialog()
-	else if(href_list["add"])
-		if(copies < maxcopies)
-			copies++
-			updateUsrDialog()
-	else if(href_list["aipic"])
-		if(!issilicon(usr))
-			return
-		if(stat & (BROKEN|NOPOWER))
-			return
+/obj/machinery/photocopier/ui_data(mob/user)
+	var/list/data = list()
+
+	data["hasCopyitem"] = !!copyitem
+	data["toner"] = toner.toner_amount
+	data["copies"] = copies
+	data["max_copies"] = maxcopies
+	data["isSilicon"] = issilicon(user)
 
-		if(toner >= 5)
-			var/mob/living/silicon/tempAI = usr
-			var/obj/item/device/camera/siliconcam/camera = tempAI.aiCamera
+	return data
 
-			if(!camera)
+/obj/machinery/photocopier/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
+	. = ..()
+	if(.)
+		return TRUE
+
+	switch(action)
+		if("remove")
+			if(copyitem)
+				copyitem.loc = usr.loc
+				usr.put_in_hands(copyitem)
+				to_chat(usr, span_notice("You take \the [copyitem] out of \the [src]."))
+				copyitem = null
+		if("copy")
+			if(stat & (BROKEN|NOPOWER))
+				return
+
+			for(var/i = 0; i < copies; i++)
+				if(toner.toner_amount <= 0)
+					break
+
+				if (istype(copyitem, /obj/item/paper))
+					copy(copyitem)
+					sleep(15)
+				else if (istype(copyitem, /obj/item/photo))
+					photocopy(copyitem)
+					sleep(15)
+				else if (istype(copyitem, /obj/item/paper_bundle))
+					var/obj/item/paper_bundle/B = bundlecopy(copyitem)
+					sleep(15*B.pages.len)
+				else
+					to_chat(usr, span_warning("\The [copyitem] can't be copied by \the [src]."))
+					break
+
+				use_power(active_power_usage)
+		if("set_copies")
+			if(params["num_copies"] <= maxcopies)
+				copies = params["num_copies"]
+		if("aipic")
+
+			if(!issilicon(usr))
 				return
-			var/obj/item/photo/selection = camera.selectpicture()
-			if (!selection)
+			if(stat & (BROKEN|NOPOWER))
 				return
 
-			var/obj/item/photo/p = photocopy(selection)
-			if (p.desc == "")
-				p.desc += "Copied by [tempAI.name]"
-			else
-				p.desc += " - Copied by [tempAI.name]"
-			toner -= 5
-			sleep(15)
-		updateUsrDialog()
+			if(toner.toner_amount >= 5)
+				var/mob/living/silicon/tempAI = usr
+				var/obj/item/device/camera/siliconcam/camera = tempAI.aiCamera
+
+				if(!camera)
+					return
+				var/obj/item/photo/selection = camera.selectpicture()
+				if (!selection)
+					return
+
+				var/obj/item/photo/p = photocopy(selection)
+				if (p.desc == "")
+					p.desc += "Copied by [tempAI.name]"
+				else
+					p.desc += " - Copied by [tempAI.name]"
+				toner.toner_amount -= 5
+				sleep(15)
+			return
+
+	return TRUE
 
 /obj/machinery/photocopier/attackby(obj/item/I, mob/user)
 	if(istype(I, /obj/item/paper) || istype(I, /obj/item/photo) || istype(I, /obj/item/paper_bundle))
@@ -108,7 +111,6 @@
 			I.loc = src
 			to_chat(user, span_notice("You insert \the [I] into \the [src]."))
 			flick(insert_anim, src)
-			updateUsrDialog()
 		else
 			to_chat(user, span_notice("There is already something in \the [src]."))
 	else if(istype(I, /obj/item/device/toner))
@@ -118,7 +120,6 @@
 			var/obj/item/device/toner/T = I
 			toner += T.toner_amount
 			qdel(I)
-			updateUsrDialog()
 		else
 			to_chat(user, span_notice("This cartridge is not yet ready for replacement! Use up the rest of the toner."))
 	if(QUALITY_BOLT_TURNING in I.tool_qualities)
@@ -194,8 +195,8 @@
 	return p
 
 //If need_toner is 0, the copies will still be lightened when low on toner, however it will not be prevented from printing. TODO: Implement print queues for fax machines and get rid of need_toner
-/obj/machinery/photocopier/proc/bundlecopy(obj/item/paper_bundle/bundle, need_toner=1)
-	var/obj/item/paper_bundle/p = new /obj/item/paper_bundle (src)
+/obj/machinery/photocopier/proc/bundlecopy(obj/item/paper_bundle/bundle, need_toner = TRUE)
+	var/obj/item/paper_bundle/p = new /obj/item/paper_bundle(src)
 	for(var/obj/item/W in bundle.pages)
 		if(toner <= 0 && need_toner)
 			toner = 0
diff --git a/code/modules/power/gravitygenerator.dm b/code/modules/power/gravitygenerator.dm
index 5ca606790c6..6039fe7ae6f 100644
--- a/code/modules/power/gravitygenerator.dm
+++ b/code/modules/power/gravitygenerator.dm
@@ -197,25 +197,39 @@ var/const/GRAV_NEEDS_WRENCH = 3
 /obj/machinery/gravity_generator/main/interact(mob/user as mob)
 	if(stat & BROKEN)
 		return
-	var/dat = "Gravity Generator Breaker: "
-	if(breaker)
-		dat += "[span_linkOn("ON")] <A href='byond://?src=\ref[src];gentoggle=1'>OFF</A>"
-	else
-		dat += "<A href='byond://?src=\ref[src];gentoggle=1'>ON</A> [span_linkOn("OFF")] "
+	ui_interact(user)
 
-	dat += "<br>Generator Status:<br><div class='statusDisplay'>"
-	if(charging_state != POWER_IDLE)
-		dat += "<font class='bad'>WARNING</font> Radiation Detected. <br>[charging_state == POWER_UP ? "Charging..." : "Discharging..."]"
-	else if(on)
-		dat += "Powered."
-	else
-		dat += "Unpowered."
+/obj/machinery/gravity_generator/main/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "GravityGenerator", name)
+		ui.open()
+
+/obj/machinery/gravity_generator/main/ui_data(mob/user)
+	var/list/data = list()
+
+	data["breaker"] = breaker
+	data["on"] = on
+	data["charging_state"] = charging_state
+	data["charge_count"] = charge_count
+	data["operational"] = !(stat & BROKEN)
+	return data
+
+/obj/machinery/gravity_generator/main/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
+	. = ..()
+	if(.)
+		return TRUE
+
+	// Map TGUI actions to existing Topic parameters
+	var/list/href_list = list()
 
-	dat += "<br>Gravity Charge: [charge_count]%</div>"
+	switch(action)
+		if("gentoggle")
+			href_list["gentoggle"] = "1"
 
-	var/datum/browser/popup = new(user, "gravgen", name)
-	popup.set_content(dat)
-	popup.open()
+	// Call existing Topic method
+	Topic("", href_list)
+	return TRUE
 
 
 /obj/machinery/gravity_generator/main/Topic(href, href_list)
diff --git a/code/modules/reagents/machinery/chem_master.dm b/code/modules/reagents/machinery/chem_master.dm
index 8d62d7b4f86..50a17037716 100644
--- a/code/modules/reagents/machinery/chem_master.dm
+++ b/code/modules/reagents/machinery/chem_master.dm
@@ -245,63 +245,108 @@
 /obj/machinery/chem_master/attack_hand(mob/user)
 	if(inoperable())
 		return
-	user.set_machine(src)
-	if(!(user.client in has_sprites))
-		spawn()
-			has_sprites += user.client
-			for(var/i = 1 to MAX_PILL_SPRITE)
-				usr << browse_rsc(icon('icons/obj/chemical.dmi', "pill" + num2text(i)), "pill[i].png")
-			for(var/sprite in BOTTLE_SPRITES)
-				usr << browse_rsc(icon('icons/obj/chemical.dmi', sprite), "[sprite].png")
-	var/dat = ""
-	if(!beaker)
-		dat = "Please insert beaker.<BR>"
-		dat += "<A href='byond://?src=\ref[src];close=1'>Close</A>"
-	else
-		var/datum/reagents/R = beaker:reagents
-		dat += "<A href='byond://?src=\ref[src];eject=1'>Eject beaker and Clear Buffer</A><BR>"
-		if(!R.total_volume)
-			dat += "Beaker is empty."
-		else
-			var/free_space = reagents.get_free_space()
-			dat += "Add to buffer:<BR>"
-			for(var/datum/reagent/G in R.reagent_list)
-				dat += "[G.name] , [G.volume] Units - "
-				dat += "<A href='byond://?src=\ref[src];analyze=1;desc=[G.description];name=[G.name]'>(Analyze)</A> "
-				for(var/volume in list(1, 5, 10))
-					if(free_space >= volume)
-						dat += "<A href='byond://?src=\ref[src];add=[G.id];amount=[volume]'>([volume])</A> "
-					else
-						dat += "([volume]) "
-				dat += "<A href='byond://?src=\ref[src];add=[G.id];amount=[G.volume]'>(All)</A> "
-				dat += "<A href='byond://?src=\ref[src];addcustom=[G.id]'>(Custom)</A><BR>"
-			if(free_space < 1)
-				dat += "The [name] is full!"
-
-		dat += "<HR>Transfer to <A href='byond://?src=\ref[src];toggle=1'>[(!mode ? "disposal" : "beaker")]:</A><BR>"
-		if(reagents.total_volume)
-			for(var/datum/reagent/N in reagents.reagent_list)
-				dat += "[N.name] , [N.volume] Units - "
-				dat += "<A href='byond://?src=\ref[src];analyze=1;desc=[N.description];name=[N.name]'>(Analyze)</A> "
-				dat += "<A href='byond://?src=\ref[src];remove=[N.id];amount=1'>(1)</A> "
-				dat += "<A href='byond://?src=\ref[src];remove=[N.id];amount=5'>(5)</A> "
-				dat += "<A href='byond://?src=\ref[src];remove=[N.id];amount=10'>(10)</A> "
-				dat += "<A href='byond://?src=\ref[src];remove=[N.id];amount=[N.volume]'>(All)</A> "
-				dat += "<A href='byond://?src=\ref[src];removecustom=[N.id]'>(Custom)</A><BR>"
-		else
-			dat += "Empty<BR>"
-		if(!condi)
-			dat += "<HR><BR><A href='byond://?src=\ref[src];createpill=1'>Create pill ([max_pill_count] units max)</A><a href=\"?src=\ref[src]&change_pill=1\"><img src=\"pill[pillsprite].png\" /></a><BR>"
-			dat += "<A href='byond://?src=\ref[src];createpill_multiple=1'>Create multiple pills</A><BR>"
-			dat += "<A href='byond://?src=\ref[src];createbottle=1'>Create bottle (60 units max)<a href=\"?src=\ref[src]&change_bottle=1\"><img src=\"[bottlesprite].png\" /></A>"
-		else
-			dat += "<A href='byond://?src=\ref[src];createbottle=1'>Create bottle (50 units max)</A>"
-	if(!condi)
-		user << browse(HTML_SKELETON_TITLE("Chemmaster 3000", "Chemmaster menu:<BR><BR>[dat]"), "window=chem_master;size=575x400")
-	else
-		user << browse(HTML_SKELETON_TITLE("Condimaster 3000", "Condimaster menu:<BR><BR>[dat]"), "window=chem_master;size=575x400")
-	onclose(user, "chem_master")
-	return
+	ui_interact(user)
+
+/obj/machinery/chem_master/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "ChemMaster", condi ? "CondiMaster 3000" : "ChemMaster 3000")
+		ui.open()
+
+/obj/machinery/chem_master/ui_data(mob/user)
+	var/list/data = list()
+
+	data["condi"] = condi
+	data["mode"] = mode
+	data["hasBeaker"] = !!beaker
+	data["useramount"] = useramount
+	data["pillamount"] = pillamount
+	data["pillsprite"] = pillsprite
+	data["bottlesprite"] = bottlesprite
+	data["maxPillCount"] = max_pill_count
+	data["maxPillVol"] = max_pill_vol
+
+	// Beaker contents
+	if(beaker)
+		var/datum/reagents/R = beaker.reagents
+		data["beakerVolume"] = R.total_volume
+		data["beakerMaxVolume"] = R.maximum_volume
+
+		var/list/beaker_reagents = list()
+		for(var/datum/reagent/G in R.reagent_list)
+			beaker_reagents += list(list(
+				"name" = G.name,
+				"id" = G.id,
+				"volume" = G.volume,
+				"description" = G.description
+			))
+		data["beakerReagents"] = beaker_reagents
+
+	// Buffer contents
+	data["bufferVolume"] = reagents.total_volume
+	data["bufferMaxVolume"] = reagents.maximum_volume
+	data["bufferFreeSpace"] = reagents.get_free_space()
+
+	var/list/buffer_reagents = list()
+	for(var/datum/reagent/N in reagents.reagent_list)
+		buffer_reagents += list(list(
+			"name" = N.name,
+			"id" = N.id,
+			"volume" = N.volume,
+			"description" = N.description
+		))
+	data["bufferReagents"] = buffer_reagents
+
+	return data
+
+/obj/machinery/chem_master/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
+	. = ..()
+	if(.)
+		return TRUE
+
+	// Map TGUI actions to existing Topic parameters and call Topic
+	var/list/href_list = list()
+
+	switch(action)
+		if("eject")
+			href_list["eject"] = "1"
+		if("toggle")
+			href_list["toggle"] = "1"
+		if("analyze")
+			href_list["analyze"] = "1"
+			href_list["name"] = params["name"]
+			href_list["desc"] = params["desc"]
+		if("add")
+			href_list["add"] = params["id"]
+			href_list["amount"] = params["amount"]
+		if("addcustom")
+			href_list["addcustom"] = params["id"]
+		if("remove")
+			href_list["remove"] = params["id"]
+			href_list["amount"] = params["amount"]
+		if("removecustom")
+			href_list["removecustom"] = params["id"]
+		if("createpill")
+			href_list["createpill"] = "1"
+		if("createpill_multiple")
+			href_list["createpill_multiple"] = "1"
+		if("createbottle")
+			href_list["createbottle"] = "1"
+		if("change_pill")
+			href_list["change_pill"] = "1"
+		if("change_bottle")
+			href_list["change_bottle"] = "1"
+		if("pill_sprite")
+			href_list["pill_sprite"] = params["sprite"]
+		if("bottle_sprite")
+			href_list["bottle_sprite"] = params["sprite"]
+
+	// Call existing Topic method with mapped parameters (I'm really really lazy okay)
+	Topic("", href_list)
+	return TRUE
+
+/obj/machinery/chem_master/ui_state(mob/user)
+	return GLOB.machinery_state
 
 /obj/machinery/chem_master/condimaster
 	name = "CondiMaster 3000"
diff --git a/maps/CEVEris/_CEV_Eris.dmm b/maps/CEVEris/_CEV_Eris.dmm
index 4cdc2e057cc..8f8814c8308 100644
--- a/maps/CEVEris/_CEV_Eris.dmm
+++ b/maps/CEVEris/_CEV_Eris.dmm
@@ -11285,7 +11285,7 @@
 /obj/machinery/light{
 	dir = 4
 	},
-/obj/structure/dispenser,
+/obj/structure/tank_dispenser,
 /turf/floor/tiled/dark/gray_platform,
 /area/eris/maintenance/junk)
 "aBF" = (
@@ -12574,7 +12574,7 @@
 /turf/floor/tiled/dark/danger,
 /area/eris/engineering/atmos)
 "aFg" = (
-/obj/structure/dispenser/plasma,
+/obj/structure/tank_dispenser/plasma,
 /obj/structure/sign/faction/technomancers{
 	pixel_y = 32
 	},
@@ -30149,7 +30149,7 @@
 /turf/floor/tiled/steel,
 /area/eris/command/teleporter)
 "bwg" = (
-/obj/structure/dispenser/oxygen,
+/obj/structure/tank_dispenser/oxygen,
 /turf/floor/tiled/steel,
 /area/eris/command/teleporter)
 "bwh" = (
@@ -47195,7 +47195,7 @@
 /turf/floor/tiled/white/gray_platform,
 /area/eris/rnd/mixing)
 "ckT" = (
-/obj/structure/dispenser,
+/obj/structure/tank_dispenser,
 /obj/item/device/radio/intercom{
 	dir = 4;
 	pixel_x = -22
@@ -51619,7 +51619,7 @@
 /turf/open,
 /area/eris/quartermaster/storage)
 "cwQ" = (
-/obj/structure/dispenser/oxygen,
+/obj/structure/tank_dispenser/oxygen,
 /obj/machinery/firealarm{
 	pixel_y = 28
 	},
@@ -52053,7 +52053,7 @@
 /turf/floor/tiled/steel/gray_perforated,
 /area/eris/hallway/side/cryo)
 "cxO" = (
-/obj/structure/dispenser/oxygen,
+/obj/structure/tank_dispenser/oxygen,
 /turf/floor/tiled/techmaint,
 /area/eris/maintenance/oldtele)
 "cxP" = (
@@ -53246,7 +53246,7 @@
 /turf/open,
 /area/eris/quartermaster/storage)
 "cAJ" = (
-/obj/structure/dispenser,
+/obj/structure/tank_dispenser,
 /turf/floor/tiled/steel/danger,
 /area/eris/quartermaster/storage)
 "cAK" = (
@@ -57137,7 +57137,7 @@
 /turf/floor/plating/under,
 /area/eris/maintenance/section2deck2starboard)
 "cKH" = (
-/obj/structure/dispenser/oxygen,
+/obj/structure/tank_dispenser/oxygen,
 /obj/structure/sign/faction/technomancers{
 	pixel_y = 32
 	},
@@ -57377,7 +57377,7 @@
 /turf/wall/low/with_glass/smart,
 /area/eris/hallway/main/section4)
 "cLp" = (
-/obj/structure/dispenser/oxygen,
+/obj/structure/tank_dispenser/oxygen,
 /turf/floor/tiled/steel/gray_platform,
 /area/eris/hallway/main/section4)
 "cLq" = (
@@ -68838,7 +68838,7 @@
 /turf/floor/plating/under,
 /area/eris/maintenance/section2deck2starboard)
 "dnz" = (
-/obj/structure/dispenser/oxygen,
+/obj/structure/tank_dispenser/oxygen,
 /turf/floor/tiled/white/gray_platform,
 /area/eris/medical/medeva)
 "dnA" = (
@@ -72023,7 +72023,7 @@
 /turf/floor/tiled/white/brown_perforated,
 /area/eris/medical/medbay/uppercor)
 "dvp" = (
-/obj/structure/dispenser/oxygen,
+/obj/structure/tank_dispenser/oxygen,
 /obj/machinery/status_display{
 	pixel_x = -32
 	},
@@ -83235,7 +83235,7 @@
 /turf/floor/tiled/steel/gray_platform,
 /area/eris/hallway/side/section3starboard)
 "dZg" = (
-/obj/structure/dispenser/oxygen,
+/obj/structure/tank_dispenser/oxygen,
 /turf/floor/tiled/steel/gray_platform,
 /area/eris/hallway/side/section3starboard)
 "dZh" = (
@@ -83398,7 +83398,7 @@
 /turf/floor/tiled/steel,
 /area/eris/hallway/side/section3starboard)
 "dZE" = (
-/obj/structure/dispenser/oxygen,
+/obj/structure/tank_dispenser/oxygen,
 /turf/floor/tiled/steel/gray_platform,
 /area/eris/crew_quarters/pubeva)
 "dZF" = (
@@ -88887,7 +88887,7 @@
 	},
 /area/shuttle/research/station)
 "enw" = (
-/obj/structure/dispenser/oxygen,
+/obj/structure/tank_dispenser/oxygen,
 /turf/shuttle/floor/science{
 	icon_state = "10,5"
 	},
@@ -96707,7 +96707,7 @@
 /turf/floor/tiled/steel/techfloor,
 /area/eris/engineering/propulsion/right)
 "eKM" = (
-/obj/structure/dispenser,
+/obj/structure/tank_dispenser,
 /turf/shuttle/floor/mining{
 	icon_state = "5,21"
 	},
diff --git a/maps/encounters/blacksite/blacksite_large_chunk.dmm b/maps/encounters/blacksite/blacksite_large_chunk.dmm
index 229e110cb7b..3264f12665b 100644
--- a/maps/encounters/blacksite/blacksite_large_chunk.dmm
+++ b/maps/encounters/blacksite/blacksite_large_chunk.dmm
@@ -803,7 +803,7 @@
 /turf/template_noop,
 /area/template_noop)
 "rN" = (
-/obj/structure/dispenser,
+/obj/structure/tank_dispenser,
 /turf/floor/tiled/dark/brown_perforated,
 /area/outpost/blacksite/large)
 "rQ" = (
diff --git a/maps/encounters/blacksite/blacksite_medium_chunk.dmm b/maps/encounters/blacksite/blacksite_medium_chunk.dmm
index 951bf8f7f10..b501ff48057 100644
--- a/maps/encounters/blacksite/blacksite_medium_chunk.dmm
+++ b/maps/encounters/blacksite/blacksite_medium_chunk.dmm
@@ -835,7 +835,7 @@
 /turf/template_noop,
 /area/template_noop)
 "rN" = (
-/obj/structure/dispenser,
+/obj/structure/tank_dispenser,
 /turf/floor/tiled/dark/brown_perforated,
 /area/outpost/blacksite/medium)
 "rQ" = (
diff --git a/maps/encounters/prisonhulk/prisonhulk.dmm b/maps/encounters/prisonhulk/prisonhulk.dmm
index e5855f762ef..0e249e1051d 100644
--- a/maps/encounters/prisonhulk/prisonhulk.dmm
+++ b/maps/encounters/prisonhulk/prisonhulk.dmm
@@ -691,7 +691,7 @@
 /turf/floor/tiled/steel,
 /area/outpost/prisonhulk/cells)
 "LG" = (
-/obj/structure/dispenser/oxygen,
+/obj/structure/tank_dispenser/oxygen,
 /turf/floor/tiled/techmaint,
 /area/outpost/prisonhulk/security)
 "LU" = (
diff --git a/maps/pulsar/pulsar.dmm b/maps/pulsar/pulsar.dmm
index a24f9de5f9f..9fd23056319 100644
--- a/maps/pulsar/pulsar.dmm
+++ b/maps/pulsar/pulsar.dmm
@@ -687,7 +687,7 @@
 /area/outpost/pulsar)
 "zu" = (
 /obj/machinery/light,
-/obj/structure/dispenser/plasma,
+/obj/structure/tank_dispenser/plasma,
 /turf/floor/tiled/dark,
 /area/outpost/pulsar)
 "zv" = (
@@ -1178,7 +1178,7 @@
 /turf/floor/tiled/steel/brown_platform,
 /area/outpost/pulsar/maintenance)
 "NZ" = (
-/obj/structure/dispenser/oxygen,
+/obj/structure/tank_dispenser/oxygen,
 /turf/floor/tiled/steel/brown_platform,
 /area/outpost/pulsar/maintenance)
 "Om" = (
diff --git a/maps/submaps/planetary_ruins/hydrobase/hydrobase.dmm b/maps/submaps/planetary_ruins/hydrobase/hydrobase.dmm
index 6b4d3748a9a..5a721b65ed8 100644
--- a/maps/submaps/planetary_ruins/hydrobase/hydrobase.dmm
+++ b/maps/submaps/planetary_ruins/hydrobase/hydrobase.dmm
@@ -2150,7 +2150,7 @@
 /turf/floor/tiled,
 /area/map_template/hydrobase/station/processing)
 "fu" = (
-/obj/structure/dispenser/oxygen,
+/obj/structure/tank_dispenser/oxygen,
 /obj/structure/catwalk,
 /turf/floor/alium,
 /area/map_template/hydrobase/station/processing)
diff --git a/maps/submaps/planetary_ruins/playablecolony/colony.dmm b/maps/submaps/planetary_ruins/playablecolony/colony.dmm
index 1e702752352..fb15dfe65df 100644
--- a/maps/submaps/planetary_ruins/playablecolony/colony.dmm
+++ b/maps/submaps/planetary_ruins/playablecolony/colony.dmm
@@ -1246,7 +1246,7 @@
 /turf/floor/plating,
 /area/map_template/colony/atmospherics)
 "dA" = (
-/obj/structure/dispenser,
+/obj/structure/tank_dispenser,
 /obj/machinery/light{
 	dir = 4
 	},
diff --git a/tgui/packages/tgui/assets/bg-eris.svg b/tgui/packages/tgui/assets/bg-eris.svg
new file mode 100644
index 00000000000..109bb83aeaa
--- /dev/null
+++ b/tgui/packages/tgui/assets/bg-eris.svg
@@ -0,0 +1,16 @@
+<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+  <!-- Outer circle (background) -->
+  <circle cx="200" cy="200" r="200" fill="#666666"/>
+  
+  <!-- Eye white (sclera) -->
+  <ellipse cx="200" cy="220" rx="180" ry="110" fill="#f5f5f5"/>
+  
+  <!-- Iris -->
+  <ellipse cx="200" cy="220" rx="85" ry="85" fill="#333333"/>
+  
+  <!-- Highlight on iris -->
+  <circle cx="230" cy="190" r="18" fill="#cccccc"/>
+  
+  <!-- Pupil -->
+  <ellipse cx="190" cy="230" rx="35" ry="40" fill="#111111"/>
+</svg>
\ No newline at end of file
diff --git a/tgui/packages/tgui/interfaces/AIFixer.tsx b/tgui/packages/tgui/interfaces/AIFixer.tsx
new file mode 100644
index 00000000000..ac25dafeb52
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/AIFixer.tsx
@@ -0,0 +1,105 @@
+import {
+  Box,
+  Button,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Stack,
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+
+interface LawData {
+  index: number;
+  law: string;
+}
+
+interface AIFixerData {
+  hasOccupant: BooleanLike;
+  active: BooleanLike;
+  aiName?: string;
+  hardwareIntegrity?: number;
+  backupCapacitor?: number;
+  aiDead?: BooleanLike;
+  laws?: LawData[];
+}
+
+export const AIFixer = () => {
+  const { act, data } = useBackend<AIFixerData>();
+  const {
+    hasOccupant,
+    active,
+    aiName,
+    hardwareIntegrity,
+    backupCapacitor,
+    aiDead,
+    laws = [],
+  } = data;
+
+  return (
+    <Window width={400} height={500}>
+      <Window.Content>
+        <Section title="AI System Integrity Restorer">
+          <Stack vertical>
+            {hasOccupant ? (
+              <>
+                <Stack.Item>
+                  <LabeledList>
+                    <LabeledList.Item label="Stored AI">
+                      {aiName}
+                    </LabeledList.Item>
+                    <LabeledList.Item label="System integrity">
+                      {hardwareIntegrity}%
+                    </LabeledList.Item>
+                    <LabeledList.Item label="Backup Capacitor">
+                      {backupCapacitor}%
+                    </LabeledList.Item>
+                  </LabeledList>
+                </Stack.Item>
+
+                <Stack.Item>
+                  <Box bold mb={1}>
+                    Laws:
+                  </Box>
+                  <Box>
+                    {laws.map((law, index) => (
+                      <Box key={index} mb={0.5}>
+                        {law.index}: {law.law}
+                      </Box>
+                    ))}
+                  </Box>
+                </Stack.Item>
+
+                <Stack.Item>
+                  <Box bold color={aiDead ? 'red' : 'green'}>
+                    AI {aiDead ? 'nonfunctional' : 'functional'}
+                  </Box>
+                </Stack.Item>
+
+                <Stack.Item>
+                  {!active ? (
+                    <Button
+                      content="Begin Reconstruction"
+                      onClick={() => act('fix')}
+                      mt={2}
+                    />
+                  ) : (
+                    <NoticeBox>
+                      Reconstruction in process, please wait.
+                    </NoticeBox>
+                  )}
+                </Stack.Item>
+              </>
+            ) : (
+              <Stack.Item>
+                <NoticeBox>No AI detected. Please insert an AI core.</NoticeBox>
+              </Stack.Item>
+            )}
+          </Stack>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/ATM.tsx b/tgui/packages/tgui/interfaces/ATM.tsx
new file mode 100644
index 00000000000..6a399f247db
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ATM.tsx
@@ -0,0 +1,414 @@
+import { useState } from 'react';
+import {
+  Box,
+  Button,
+  Input,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Stack,
+  Table,
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+
+interface ATMData {
+  machine_id: string;
+  held_card: string | null;
+  emagged: BooleanLike;
+  locked_down: BooleanLike;
+  authenticated: BooleanLike;
+  screen: number;
+  account?: {
+    owner_name: string;
+    money: number;
+    security_level: number;
+    suspended: BooleanLike;
+  };
+  transactions?: Array<{
+    date: string;
+    time: string;
+    target_name: string;
+    purpose: string;
+    amount: number;
+    source_terminal: string;
+  }>;
+  default_account_number?: string;
+}
+
+export const ATM = () => {
+  const { act, data } = useBackend<ATMData>();
+  const [accountNum, setAccountNum] = useState(
+    data.default_account_number || '',
+  );
+  const [accountPin, setAccountPin] = useState('');
+  const [withdrawAmount, setWithdrawAmount] = useState('');
+  const [transferAmount, setTransferAmount] = useState('');
+  const [transferTarget, setTransferTarget] = useState('');
+  const [transferPurpose, setTransferPurpose] = useState('Funds transfer');
+  const { machine_id, held_card, authenticated, screen, account, locked_down } =
+    data;
+
+  // Render different screens based on view_screen
+  const renderScreen = () => {
+    switch (screen) {
+      case 1: // CHANGE_SECURITY_LEVEL
+        return (
+          <Section title="Security Level">
+            <Box mb={2}>Select a new security level for this account:</Box>
+            <LabeledList>
+              <LabeledList.Item label="Level 0">
+                <Button
+                  content="Either account number and pin, or card and pin"
+                  onClick={() =>
+                    act('choice', {
+                      choice: 'change_security_level',
+                      new_security_level: 0,
+                    })
+                  }
+                  disabled={account?.security_level === 0}
+                />
+              </LabeledList.Item>
+              <LabeledList.Item label="Level 1">
+                <Button
+                  content="Account number and pin required"
+                  onClick={() =>
+                    act('choice', {
+                      choice: 'change_security_level',
+                      new_security_level: 1,
+                    })
+                  }
+                  disabled={account?.security_level === 1}
+                />
+              </LabeledList.Item>
+              <LabeledList.Item label="Level 2">
+                <Button
+                  content="Card and pin required"
+                  onClick={() =>
+                    act('choice', {
+                      choice: 'change_security_level',
+                      new_security_level: 2,
+                    })
+                  }
+                  disabled={account?.security_level === 2}
+                />
+              </LabeledList.Item>
+            </LabeledList>
+            <Button
+              mt={2}
+              content="Back"
+              onClick={() =>
+                act('choice', {
+                  choice: 'view_screen',
+                  view_screen: 0,
+                })
+              }
+            />
+          </Section>
+        );
+      case 2: // TRANSFER_FUNDS
+        return (
+          <Section title="Transfer Funds">
+            <LabeledList>
+              <LabeledList.Item label="Target Account">
+                <Input
+                  value={transferTarget}
+                  onChange={(e, value) => setTransferTarget(value)}
+                />
+              </LabeledList.Item>
+              <LabeledList.Item label="Amount">
+                <Input
+                  value={transferAmount}
+                  onChange={(e, value) => setTransferAmount(value)}
+                />
+              </LabeledList.Item>
+              <LabeledList.Item label="Purpose">
+                <Input
+                  value={transferPurpose}
+                  onChange={(e, value) => setTransferPurpose(value)}
+                />
+              </LabeledList.Item>
+            </LabeledList>
+            <Button
+              mt={2}
+              content="Transfer"
+              onClick={() =>
+                act('choice', {
+                  choice: 'transfer',
+                  target_acc_number: transferTarget,
+                  funds_amount: transferAmount,
+                  purpose: transferPurpose,
+                })
+              }
+            />
+            <Button
+              mt={2}
+              ml={1}
+              content="Back"
+              onClick={() =>
+                act('choice', {
+                  choice: 'view_screen',
+                  view_screen: 0,
+                })
+              }
+            />
+          </Section>
+        );
+      case 3: // VIEW_TRANSACTION_LOGS
+        return (
+          <Section title="Transaction Log">
+            <Table>
+              <Table.Row header>
+                <Table.Cell>Date</Table.Cell>
+                <Table.Cell>Time</Table.Cell>
+                <Table.Cell>Target</Table.Cell>
+                <Table.Cell>Purpose</Table.Cell>
+                <Table.Cell>Amount</Table.Cell>
+                <Table.Cell>Terminal</Table.Cell>
+              </Table.Row>
+              {data.transactions?.map((T, i) => (
+                <Table.Row key={i}>
+                  <Table.Cell>{T.date}</Table.Cell>
+                  <Table.Cell>{T.time}</Table.Cell>
+                  <Table.Cell>{T.target_name}</Table.Cell>
+                  <Table.Cell>{T.purpose}</Table.Cell>
+                  <Table.Cell>{T.amount}</Table.Cell>
+                  <Table.Cell>{T.source_terminal}</Table.Cell>
+                </Table.Row>
+              ))}
+            </Table>
+            <Button
+              mt={2}
+              content="Print"
+              onClick={() =>
+                act('choice', {
+                  choice: 'print_transaction',
+                })
+              }
+            />
+            <Button
+              mt={2}
+              ml={1}
+              content="Back"
+              onClick={() =>
+                act('choice', {
+                  choice: 'view_screen',
+                  view_screen: 0,
+                })
+              }
+            />
+          </Section>
+        );
+      default:
+        return (
+          // Main screen with withdrawal controls
+          <Section title="Actions">
+            <Stack vertical>
+              <Stack.Item>
+                <Stack>
+                  <Stack.Item>
+                    <Input
+                      width="100px"
+                      placeholder="Amount"
+                      value={withdrawAmount}
+                      onChange={(e, value) => setWithdrawAmount(value)}
+                    />
+                  </Stack.Item>
+                  <Stack.Item>
+                    <Button
+                      mr={1}
+                      icon="money-bill"
+                      content="Withdraw Cash"
+                      onClick={() =>
+                        act('choice', {
+                          choice: 'withdrawal',
+                          funds_amount: withdrawAmount,
+                        })
+                      }
+                    />
+                    <Button
+                      icon="credit-card"
+                      content="E-Wallet"
+                      onClick={() =>
+                        act('choice', {
+                          choice: 'e_withdrawal',
+                          funds_amount: withdrawAmount,
+                        })
+                      }
+                    />
+                  </Stack.Item>
+                </Stack>
+              </Stack.Item>
+              <Stack.Item mt={1}>
+                <Box textAlign="center">
+                  <Button
+                    width="115px"
+                    mr={1}
+                    icon="exchange-alt"
+                    content="Transfer"
+                    onClick={() =>
+                      act('choice', {
+                        choice: 'view_screen',
+                        view_screen: 2,
+                      })
+                    }
+                  />
+                  <Button
+                    width="115px"
+                    mr={1}
+                    icon="list"
+                    content="Log"
+                    onClick={() =>
+                      act('choice', {
+                        choice: 'view_screen',
+                        view_screen: 3,
+                      })
+                    }
+                  />
+                  <Button
+                    width="115px"
+                    mr={1}
+                    icon="print"
+                    content="Statement"
+                    onClick={() =>
+                      act('choice', {
+                        choice: 'balance_statement',
+                      })
+                    }
+                  />
+                  <Button
+                    width="115px"
+                    icon="cog"
+                    content="Security"
+                    onClick={() =>
+                      act('choice', {
+                        choice: 'view_screen',
+                        view_screen: 1,
+                      })
+                    }
+                  />
+                </Box>
+                <Box mt={1} textAlign="center">
+                  <Button
+                    width="120px"
+                    color="bad"
+                    icon="sign-out-alt"
+                    content="Logout"
+                    onClick={() =>
+                      act('choice', {
+                        choice: 'logout',
+                      })
+                    }
+                  />
+                </Box>
+              </Stack.Item>
+            </Stack>
+          </Section>
+        );
+    }
+  };
+
+  return (
+    <Window width={770} height={550}>
+      <Window.Content>
+        <Stack vertical>
+          <Stack.Item>
+            <Section title="ATM Terminal">
+              <LabeledList>
+                <LabeledList.Item label="Terminal ID">
+                  {machine_id}
+                </LabeledList.Item>
+                <LabeledList.Item label="Card">
+                  {held_card ? (
+                    <>
+                      {held_card}
+                      <Button
+                        ml={1}
+                        icon="eject"
+                        content="Eject"
+                        onClick={() => act('choice', { choice: 'insert_card' })}
+                      />
+                    </>
+                  ) : (
+                    <Button
+                      icon="id-card"
+                      content="Insert Card"
+                      onClick={() => act('choice', { choice: 'insert_card' })}
+                    />
+                  )}
+                </LabeledList.Item>
+              </LabeledList>
+            </Section>
+          </Stack.Item>
+
+          {!!locked_down && (
+            <Stack.Item>
+              <NoticeBox>
+                Maximum number of pin attempts exceeded! Access temporarily
+                disabled.
+              </NoticeBox>
+            </Stack.Item>
+          )}
+
+          {!!authenticated && account && (
+            <>
+              <Stack.Item>
+                <Section title="Account Information">
+                  <LabeledList>
+                    <LabeledList.Item label="Account Holder">
+                      {account.owner_name}
+                    </LabeledList.Item>
+                    <LabeledList.Item label="Balance">
+                      {account.money} Credits
+                    </LabeledList.Item>
+                    <LabeledList.Item label="Security Level">
+                      Level {account.security_level}
+                    </LabeledList.Item>
+                  </LabeledList>
+                </Section>
+              </Stack.Item>
+
+              <Stack.Item>{renderScreen()}</Stack.Item>
+            </>
+          )}
+
+          {!authenticated && held_card && !locked_down && (
+            <Stack.Item>
+              <Section title="Authentication">
+                <LabeledList>
+                  <LabeledList.Item label="Account Number">
+                    <Input
+                      placeholder="Enter Account Number"
+                      value={accountNum}
+                      onChange={(e, value) => setAccountNum(value)}
+                    />
+                  </LabeledList.Item>
+                  <LabeledList.Item label="PIN">
+                    <Input
+                      placeholder="Enter PIN"
+                      value={accountPin}
+                      onChange={(e, value) => setAccountPin(value)}
+                    />
+                  </LabeledList.Item>
+                </LabeledList>
+                <Button
+                  mt={2}
+                  content="Login"
+                  onClick={() =>
+                    act('choice', {
+                      choice: 'attempt_auth',
+                      account_num: accountNum,
+                      account_pin: accountPin,
+                    })
+                  }
+                />
+              </Section>
+            </Stack.Item>
+          )}
+        </Stack>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/AreaAtmos.tsx b/tgui/packages/tgui/interfaces/AreaAtmos.tsx
new file mode 100644
index 00000000000..eec50b707f1
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/AreaAtmos.tsx
@@ -0,0 +1,103 @@
+import { Box, Button, Section, Stack, Table } from 'tgui-core/components';
+
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+
+interface ScrubberData {
+  name: string;
+  pressure: number;
+  flow_rate: number;
+  power_draw: number;
+  ref: string;
+}
+
+interface AreaAtmosData {
+  status: string;
+  zone: string;
+  scrubbers: ScrubberData[];
+}
+
+export const AreaAtmos = () => {
+  const { act, data } = useBackend<AreaAtmosData>();
+  const { status, zone, scrubbers } = data;
+
+  return (
+    <Window width={400} height={400}>
+      <Window.Content>
+        <Section title="Area Air Control">
+          <Stack vertical>
+            {status && (
+              <Stack.Item>
+                <Box color="red" mb={2}>
+                  {status}
+                </Box>
+              </Stack.Item>
+            )}
+
+            <Stack.Item>
+              <Button content="Scan" onClick={() => act('scan')} mb={2} />
+            </Stack.Item>
+
+            <Stack.Item>
+              <Table>
+                {scrubbers.map((scrubber, index) => (
+                  <Table.Row key={index}>
+                    <Table.Cell>
+                      <Stack vertical>
+                        <Stack.Item>
+                          <Box bold>{scrubber.name}</Box>
+                        </Stack.Item>
+                        <Stack.Item>
+                          <Box>Pressure: {scrubber.pressure} kPa</Box>
+                        </Stack.Item>
+                        <Stack.Item>
+                          <Box>Flow Rate: {scrubber.flow_rate} L/s</Box>
+                        </Stack.Item>
+                      </Stack>
+                    </Table.Cell>
+                    <Table.Cell width="150px">
+                      <Stack vertical>
+                        <Stack.Item>
+                          <Button
+                            content="Turn On"
+                            color="green"
+                            onClick={() =>
+                              act('toggle_scrubber', {
+                                ref: scrubber.ref,
+                                state: '1',
+                              })
+                            }
+                            mr={1}
+                          />
+                          <Button
+                            content="Turn Off"
+                            color="red"
+                            onClick={() =>
+                              act('toggle_scrubber', {
+                                ref: scrubber.ref,
+                                state: '0',
+                              })
+                            }
+                          />
+                        </Stack.Item>
+                        <Stack.Item>
+                          <Box>Load: {scrubber.power_draw} W</Box>
+                        </Stack.Item>
+                      </Stack>
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table>
+            </Stack.Item>
+
+            <Stack.Item>
+              <Box italic textAlign="center" mt={2}>
+                {zone}
+              </Box>
+            </Stack.Item>
+          </Stack>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/ChemMaster.tsx b/tgui/packages/tgui/interfaces/ChemMaster.tsx
new file mode 100644
index 00000000000..042fb3059aa
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ChemMaster.tsx
@@ -0,0 +1,276 @@
+import { useState } from 'react';
+import {
+  Box,
+  Button,
+  Flex,
+  NoticeBox,
+  Section,
+  Stack,
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+
+interface Reagent {
+  name: string;
+  id: string;
+  volume: number;
+  description: string;
+}
+
+interface ChemMasterData {
+  condi: BooleanLike;
+  mode: BooleanLike;
+  hasBeaker: BooleanLike;
+  useramount: number;
+  pillamount: number;
+  pillsprite: string;
+  bottlesprite: string;
+  maxPillCount: number;
+  maxPillVol: number;
+  beakerVolume?: number;
+  beakerMaxVolume?: number;
+  beakerReagents?: Reagent[];
+  bufferVolume: number;
+  bufferMaxVolume: number;
+  bufferFreeSpace: number;
+  bufferReagents: Reagent[];
+}
+
+interface ReagentControlsProps {
+  reagent: Reagent;
+  isBeaker: BooleanLike;
+}
+
+export const ChemMaster = () => {
+  const { act, data } = useBackend<ChemMasterData>();
+  const [customAmount, setCustomAmount] = useState('30');
+
+  const {
+    condi,
+    mode,
+    hasBeaker,
+    beakerReagents = [],
+    bufferReagents = [],
+    bufferFreeSpace,
+    bufferVolume,
+    maxPillCount,
+    maxPillVol,
+  } = data;
+
+  const title = condi ? 'CondiMaster 3000' : 'ChemMaster 3000';
+
+  const ReagentControls = ({ reagent, isBeaker }: ReagentControlsProps) => (
+    <Flex align="center" mb={1}>
+      <Flex.Item grow>
+        <Box>
+          {reagent.name}, {reagent.volume} Units
+        </Box>
+      </Flex.Item>
+      <Flex.Item>
+        <Button
+          content="Analyze"
+          onClick={() =>
+            act('analyze', {
+              name: reagent.name,
+              desc: reagent.description,
+            })
+          }
+          mr={1}
+        />
+        {isBeaker ? (
+          // Beaker reagent controls (Add to buffer)
+          <>
+            {[1, 5, 10].map((amount) => (
+              <Button
+                key={amount}
+                content={`${amount}`}
+                disabled={bufferFreeSpace < amount}
+                onClick={() =>
+                  act('add', {
+                    id: reagent.id,
+                    amount: amount,
+                  })
+                }
+                mr={0.5}
+              />
+            ))}
+            <Button
+              content="All"
+              onClick={() =>
+                act('add', {
+                  id: reagent.id,
+                  amount: reagent.volume,
+                })
+              }
+              mr={0.5}
+            />
+            <Button
+              content="Custom"
+              onClick={() => act('addcustom', { id: reagent.id })}
+            />
+          </>
+        ) : (
+          // Buffer reagent controls (Remove/Transfer)
+          <>
+            {[1, 5, 10].map((amount) => (
+              <Button
+                key={amount}
+                content={`${amount}`}
+                onClick={() =>
+                  act('remove', {
+                    id: reagent.id,
+                    amount: amount,
+                  })
+                }
+                mr={0.5}
+              />
+            ))}
+            <Button
+              content="All"
+              onClick={() =>
+                act('remove', {
+                  id: reagent.id,
+                  amount: reagent.volume,
+                })
+              }
+              mr={0.5}
+            />
+            <Button
+              content="Custom"
+              onClick={() => act('removecustom', { id: reagent.id })}
+            />
+          </>
+        )}
+      </Flex.Item>
+    </Flex>
+  );
+
+  return (
+    <Window width={600} height={700}>
+      <Window.Content scrollable>
+        <Stack vertical>
+          {!hasBeaker ? (
+            <Stack.Item>
+              <NoticeBox>Please insert beaker.</NoticeBox>
+            </Stack.Item>
+          ) : (
+            <>
+              <Stack.Item>
+                <Section title="Beaker Controls">
+                  <Button
+                    content="Eject beaker and Clear Buffer"
+                    onClick={() => act('eject')}
+                    mb={2}
+                  />
+
+                  {beakerReagents.length === 0 ? (
+                    <Box>Beaker is empty.</Box>
+                  ) : (
+                    <>
+                      <Box mb={2}>Add to buffer:</Box>
+                      {beakerReagents.map((reagent, index) => (
+                        <ReagentControls
+                          key={index}
+                          reagent={reagent}
+                          isBeaker
+                        />
+                      ))}
+                      {bufferFreeSpace < 1 && (
+                        <NoticeBox color="red">The {title} is full!</NoticeBox>
+                      )}
+                    </>
+                  )}
+                </Section>
+              </Stack.Item>
+
+              <Stack.Item>
+                <Section
+                  title={
+                    <>
+                      Transfer to{' '}
+                      <Button
+                        content={mode ? 'beaker' : 'disposal'}
+                        onClick={() => act('toggle')}
+                        color={mode ? 'good' : 'average'}
+                      />
+                    </>
+                  }
+                >
+                  {bufferReagents.length === 0 ? (
+                    <Box>Empty</Box>
+                  ) : (
+                    bufferReagents.map((reagent, index) => (
+                      <ReagentControls
+                        key={index}
+                        reagent={reagent}
+                        isBeaker={false}
+                      />
+                    ))
+                  )}
+                </Section>
+              </Stack.Item>
+
+              <Stack.Item>
+                <Section title="Create Items">
+                  {!condi ? (
+                    <Stack vertical>
+                      <Stack.Item>
+                        <Flex align="center">
+                          <Flex.Item>
+                            <Button
+                              content={`Create pill (${maxPillVol} units max)`}
+                              onClick={() => act('createpill')}
+                              disabled={bufferVolume === 0}
+                            />
+                          </Flex.Item>
+                          <Flex.Item ml={1}>
+                            <Button
+                              content="Change Style"
+                              onClick={() => act('change_pill')}
+                            />
+                          </Flex.Item>
+                        </Flex>
+                      </Stack.Item>
+                      <Stack.Item>
+                        <Button
+                          content="Create multiple pills"
+                          onClick={() => act('createpill_multiple')}
+                          disabled={bufferVolume === 0}
+                        />
+                      </Stack.Item>
+                      <Stack.Item>
+                        <Flex align="center">
+                          <Flex.Item>
+                            <Button
+                              content="Create bottle (60 units max)"
+                              onClick={() => act('createbottle')}
+                              disabled={bufferVolume === 0}
+                            />
+                          </Flex.Item>
+                          <Flex.Item ml={1}>
+                            <Button
+                              content="Change Style"
+                              onClick={() => act('change_bottle')}
+                            />
+                          </Flex.Item>
+                        </Flex>
+                      </Stack.Item>
+                    </Stack>
+                  ) : (
+                    <Button
+                      content="Create bottle (50 units max)"
+                      onClick={() => act('createbottle')}
+                      disabled={bufferVolume === 0}
+                    />
+                  )}
+                </Section>
+              </Stack.Item>
+            </>
+          )}
+        </Stack>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/CommandReport.tsx b/tgui/packages/tgui/interfaces/CommandReport.tsx
index 942d5cffaa5..5593b09c975 100644
--- a/tgui/packages/tgui/interfaces/CommandReport.tsx
+++ b/tgui/packages/tgui/interfaces/CommandReport.tsx
@@ -15,7 +15,7 @@ import { BooleanLike } from 'tgui-core/react';
 import { Window } from '../layouts';
 
 type Data = {
-  announce_to_all_mobs: boolean;
+  announce_to_all_mobs: BooleanLike;
   announcer_sounds: string[];
   command_name: string;
   command_name_presets: string[];
diff --git a/tgui/packages/tgui/interfaces/DisposalUnit.tsx b/tgui/packages/tgui/interfaces/DisposalUnit.tsx
index 5f35227fd9b..471495d79bf 100644
--- a/tgui/packages/tgui/interfaces/DisposalUnit.tsx
+++ b/tgui/packages/tgui/interfaces/DisposalUnit.tsx
@@ -6,6 +6,7 @@ import {
   Section,
   Stack,
 } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
 
 import { Window } from '../layouts';
 
@@ -17,11 +18,11 @@ const MODE2COLOR = {
 };
 
 type DisposalUnitData = {
-  isai: boolean;
+  isai: BooleanLike;
   mode: string;
-  panel: boolean;
-  eject: boolean;
-  handle: boolean;
+  panel: BooleanLike;
+  eject: BooleanLike;
+  handle: BooleanLike;
   pressure: number;
 };
 
diff --git a/tgui/packages/tgui/interfaces/GravityGenerator.tsx b/tgui/packages/tgui/interfaces/GravityGenerator.tsx
new file mode 100644
index 00000000000..bd2dbcdde9e
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/GravityGenerator.tsx
@@ -0,0 +1,71 @@
+import {
+  Box,
+  Button,
+  LabeledList,
+  NoticeBox,
+  ProgressBar,
+  Section,
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+
+interface GravityGeneratorData {
+  breaker: boolean;
+  on: BooleanLike;
+  charging_state: number;
+  charge_count: number;
+  operational: BooleanLike;
+}
+
+export const GravityGenerator = (props) => {
+  const { data } = useBackend<GravityGeneratorData>();
+  const { operational } = data;
+  return (
+    <Window width={400} height={155}>
+      <Window.Content>
+        {!operational && <NoticeBox>No data available</NoticeBox>}
+        {!!operational && <GravityGeneratorContent />}
+      </Window.Content>
+    </Window>
+  );
+};
+
+const GravityGeneratorContent = (props) => {
+  const { act, data } = useBackend<GravityGeneratorData>();
+  const { breaker, charge_count, charging_state, on, operational } = data;
+  return (
+    <Section>
+      <LabeledList>
+        <LabeledList.Item label="Power">
+          <Button
+            icon={breaker ? 'power-off' : 'times'}
+            content={breaker ? 'On' : 'Off'}
+            selected={breaker}
+            disabled={!operational}
+            onClick={() => act('gentoggle')}
+          />
+        </LabeledList.Item>
+        <LabeledList.Item label="Gravity Charge">
+          <ProgressBar
+            value={charge_count / 100}
+            ranges={{
+              good: [0.7, Infinity],
+              average: [0.3, 0.7],
+              bad: [-Infinity, 0.3],
+            }}
+          />
+        </LabeledList.Item>
+        <LabeledList.Item label="Charge Mode">
+          {charging_state === 0 &&
+            ((on && <Box color="good">Fully Charged</Box>) || (
+              <Box color="bad">Not Charging</Box>
+            ))}
+          {charging_state === 1 && <Box color="average">Charging</Box>}
+          {charging_state === 2 && <Box color="average">Discharging</Box>}
+        </LabeledList.Item>
+      </LabeledList>
+    </Section>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/LateJoin.tsx b/tgui/packages/tgui/interfaces/LateJoin.tsx
new file mode 100644
index 00000000000..ed8dfdd6b2d
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/LateJoin.tsx
@@ -0,0 +1,81 @@
+import { Box, Button, Section, Stack } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+
+interface LateJoinData {
+  name: string;
+  roundDuration: string | number;
+  evacuated: BooleanLike;
+  evacuating: BooleanLike;
+  emergencyEvac: BooleanLike;
+  jobs: Array<{
+    title: string;
+    positions: number;
+    active: number;
+  }>;
+}
+
+export const LateJoin = () => {
+  const { act, data } = useBackend<LateJoinData>();
+  const {
+    name,
+    roundDuration,
+    evacuated,
+    evacuating,
+    emergencyEvac,
+    jobs = [],
+  } = data;
+
+  return (
+    <Window width={400} height={640}>
+      <Window.Content scrollable>
+        <Section>
+          <Box mb={1}>Welcome, {name}.</Box>
+          <Box mb={2}>Round Duration: {roundDuration}</Box>
+
+          {!!evacuated && (
+            <Box color="red" mb={2}>
+              The vessel has been evacuated.
+            </Box>
+          )}
+          {!!evacuating && (
+            <Box color="red" mb={2}>
+              {emergencyEvac
+                ? 'The vessel is currently undergoing evacuation procedures.'
+                : 'The vessel is currently undergoing crew transfer procedures.'}
+            </Box>
+          )}
+        </Section>
+
+        <Section title="Available Positions">
+          <Stack vertical>
+            {jobs.map((job) => (
+              <Stack.Item key={job.title}>
+                <Button
+                  fluid
+                  onClick={() => act('select_job', { title: job.title })}
+                >
+                  <Box
+                    inline
+                    width="100%"
+                    textAlign="left"
+                    style={{
+                      display: 'grid',
+                      gridTemplateColumns: '2fr 1fr 1fr',
+                    }}
+                  >
+                    <Box>{job.title}</Box>
+                    <Box textAlign="center">({job.positions})</Box>
+                    <Box textAlign="right">Active: {job.active}</Box>
+                  </Box>
+                </Button>
+              </Stack.Item>
+            ))}
+          </Stack>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/MessageMonitor.tsx b/tgui/packages/tgui/interfaces/MessageMonitor.tsx
new file mode 100644
index 00000000000..f249260f3b2
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/MessageMonitor.tsx
@@ -0,0 +1,375 @@
+import {
+  Box,
+  Button,
+  Divider,
+  NoticeBox,
+  Section,
+  Stack,
+  Table,
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+
+interface LogEntry {
+  ref: string;
+  send_dpt: string;
+  rec_dpt: string;
+  message: string;
+  stamp: string;
+  id_auth: string;
+  priority: string;
+}
+
+interface MessageMonitorData {
+  message: string;
+  auth: boolean;
+  hacking: boolean;
+  emag: boolean;
+  serverActive: boolean;
+  hasServer: boolean;
+  isAI: boolean;
+  isMalfAI: boolean;
+  screen: number;
+  logs?: LogEntry[];
+}
+
+export const MessageMonitor = () => {
+  const { act, data } = useBackend<MessageMonitorData>();
+  const {
+    message,
+    auth,
+    hacking,
+    emag,
+    serverActive,
+    hasServer,
+    isAI,
+    isMalfAI,
+    screen,
+    logs = [],
+  } = data;
+
+  const renderMainMenu = () => {
+    let optionCount = 1;
+
+    return (
+      <Stack vertical>
+        <Stack.Item>
+          <Button
+            content={`${optionCount}. Link To A Server`}
+            onClick={() => act('find')}
+            mb={1}
+          />
+        </Stack.Item>
+
+        {auth ? (
+          !hasServer ? (
+            <Stack.Item>
+              <Box color="red">ERROR: Server not found!</Box>
+            </Stack.Item>
+          ) : (
+            <>
+              <Stack.Item>
+                <Button
+                  content={`${++optionCount}. View Request Console Logs`}
+                  onClick={() => act('viewr')}
+                  mb={1}
+                />
+              </Stack.Item>
+              <Stack.Item>
+                <Button
+                  content={`${++optionCount}. Clear Request Console Logs`}
+                  onClick={() => act('clearr')}
+                  mb={1}
+                />
+              </Stack.Item>
+              <Stack.Item>
+                <Button
+                  content={`${++optionCount}. Set Custom Key`}
+                  onClick={() => act('pass')}
+                  mb={1}
+                />
+              </Stack.Item>
+              <Stack.Item>
+                <Button
+                  content={`${++optionCount}. Send Admin Message`}
+                  onClick={() => act('msg')}
+                  mb={1}
+                />
+              </Stack.Item>
+            </>
+          )
+        ) : (
+          <>
+            {[2, 3, 4, 5].map((num) => (
+              <Stack.Item key={num}>
+                <Box color="blue" mb={1}>
+                  {num}. ---------------
+                </Box>
+              </Stack.Item>
+            ))}
+          </>
+        )}
+
+        {isMalfAI && (
+          <Stack.Item>
+            <Button
+              content="*&#@#. Bruteforce Key"
+              onClick={() => act('hack')}
+              color="red"
+              italic
+              mb={1}
+            />
+          </Stack.Item>
+        )}
+
+        <Stack.Item>
+          <Divider />
+          {!auth ? (
+            <NoticeBox>
+              Please authenticate with the server in order to show additional
+              options.
+            </NoticeBox>
+          ) : (
+            <NoticeBox color="orange">
+              Reg, #514 forbids sending messages to a Head of Staff containing
+              Erotic Rendering Properties.
+            </NoticeBox>
+          )}
+        </Stack.Item>
+      </Stack>
+    );
+  };
+
+  const renderHackingScreen = () => (
+    <Box>
+      {isAI ? (
+        <Stack vertical>
+          <Stack.Item>Brute-forcing for server key.</Stack.Item>
+          <Stack.Item>
+            It will take 20 seconds for every character that the password has.
+          </Stack.Item>
+          <Stack.Item>
+            In the meantime, this console can reveal your true intentions if you
+            let someone access it. Make sure no humans enter the room during
+            that time.
+          </Stack.Item>
+        </Stack>
+      ) : (
+        <Box
+          style={{
+            fontFamily: 'monospace',
+            fontSize: '10px',
+            wordBreak: 'break-all',
+          }}
+        >
+          <Stack vertical>
+            <Stack.Item>
+              01000010011100100111010101110100011001010010110
+            </Stack.Item>
+            <Stack.Item>
+              10110011001101111011100100110001101101001011011100110011
+            </Stack.Item>
+            <Stack.Item>
+              10010000001100110011011110111001000100000011100110110010
+            </Stack.Item>
+            <Stack.Item>
+              10111001001110110011001010111001000100000011010110110010
+            </Stack.Item>
+            <Stack.Item>
+              10111100100101110001000000100100101110100001000000111011
+            </Stack.Item>
+            <Stack.Item>
+              10110100101101100011011000010000001110100011000010110101
+            </Stack.Item>
+            <Stack.Item>
+              10110010100100000001100100011000000100000011100110110010
+            </Stack.Item>
+            <Stack.Item>
+              10110001101101111011011100110010001110011001000000110011
+            </Stack.Item>
+            <Stack.Item>
+              00110111101110010001000000110010101110110011001010111001
+            </Stack.Item>
+            <Stack.Item>
+              00111100100100000011000110110100001100001011100100110000
+            </Stack.Item>
+            <Stack.Item>
+              10110001101110100011001010111001000100000011101000110100
+            </Stack.Item>
+            <Stack.Item>
+              00110000101110100001000000111010001101000011001010010000
+            </Stack.Item>
+            <Stack.Item>
+              00111000001100001011100110111001101110111011011110111001
+            </Stack.Item>
+            <Stack.Item>
+              00110010000100000011010000110000101110011001011100010000
+            </Stack.Item>
+            <Stack.Item>
+              00100100101101110001000000111010001101000011001010010000
+            </Stack.Item>
+            <Stack.Item>
+              00110110101100101011000010110111001110100011010010110110
+            </Stack.Item>
+            <Stack.Item>
+              10110010100101100001000000111010001101000011010010111001
+            </Stack.Item>
+            <Stack.Item>
+              10010000001100011011011110110111001110011011011110110110
+            </Stack.Item>
+            <Stack.Item>
+              00110010100100000011000110110000101101110001000000111001
+            </Stack.Item>
+            <Stack.Item>
+              00110010101110110011001010110000101101100001000000111100
+            </Stack.Item>
+            <Stack.Item>
+              10110111101110101011100100010000001110100011100100111010
+            </Stack.Item>
+            <Stack.Item>
+              10110010100100000011010010110111001110100011001010110111
+            </Stack.Item>
+            <Stack.Item>
+              00111010001101001011011110110111001110011001000000110100
+            </Stack.Item>
+            <Stack.Item>
+              10110011000100000011110010110111101110101001000000110110
+            </Stack.Item>
+            <Stack.Item>
+              00110010101110100001000000111001101101111011011010110010
+            </Stack.Item>
+            <Stack.Item>
+              10110111101101110011001010010000001100001011000110110001
+            </Stack.Item>
+            <Stack.Item>
+              10110010101110011011100110010000001101001011101000010111
+            </Stack.Item>
+            <Stack.Item>
+              00010000001001101011000010110101101100101001000000111001
+            </Stack.Item>
+            <Stack.Item>
+              10111010101110010011001010010000001101110011011110010000
+            </Stack.Item>
+            <Stack.Item>
+              00110100001110101011011010110000101101110011100110010000
+            </Stack.Item>
+            <Stack.Item>
+              00110010101101110011101000110010101110010001000000111010
+            </Stack.Item>
+            <Stack.Item>
+              00110100001100101001000000111001001101111011011110110110
+            </Stack.Item>
+            <Stack.Item>
+              10010000001100100011101010111001001101001011011100110011
+            </Stack.Item>
+            <Stack.Item>
+              10010000001110100011010000110000101110100001000000111010
+            </Stack.Item>
+            <Stack.Item>001101001011011010110010100101110</Stack.Item>
+          </Stack>
+        </Box>
+      )}
+    </Box>
+  );
+
+  const renderLogsScreen = () => (
+    <Stack vertical>
+      <Stack.Item>
+        <Box textAlign="center" mb={2}>
+          <Button content="Back" onClick={() => act('back')} mr={2} />
+          <Button content="Refresh" onClick={() => act('refresh')} />
+        </Box>
+        <Divider />
+      </Stack.Item>
+
+      <Stack.Item>
+        <Table>
+          <Table.Row header>
+            <Table.Cell width="5%">X</Table.Cell>
+            <Table.Cell width="15%">Sending Dep.</Table.Cell>
+            <Table.Cell width="15%">Receiving Dep.</Table.Cell>
+            <Table.Cell width="40%">Message</Table.Cell>
+            <Table.Cell width="15%">Stamp</Table.Cell>
+            <Table.Cell width="15%">ID Auth.</Table.Cell>
+            <Table.Cell width="15%">Priority</Table.Cell>
+          </Table.Row>
+          {logs.map((log, index) => (
+            <Table.Row key={index}>
+              <Table.Cell>
+                <Button
+                  content="X"
+                  color="red"
+                  onClick={() => act('deleter', { ref: log.ref })}
+                />
+              </Table.Cell>
+              <Table.Cell>{log.send_dpt}</Table.Cell>
+              <Table.Cell>{log.rec_dpt}</Table.Cell>
+              <Table.Cell style={{ wordWrap: 'break-word' }}>
+                {log.message}
+              </Table.Cell>
+              <Table.Cell>{log.stamp}</Table.Cell>
+              <Table.Cell>{log.id_auth}</Table.Cell>
+              <Table.Cell>{log.priority}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table>
+      </Stack.Item>
+    </Stack>
+  );
+
+  return (
+    <Window width={700} height={700}>
+      <Window.Content scrollable>
+        <Section title="Message Monitor Console">
+          <Stack vertical>
+            <Stack.Item>
+              <Box textAlign="center" color="blue" fontSize="1.2em" mb={2}>
+                {message}
+              </Box>
+            </Stack.Item>
+
+            <Stack.Item>
+              <Stack>
+                <Stack.Item>
+                  <Button
+                    content={auth ? '[Authenticated]' : '[Unauthenticated]'}
+                    color={auth ? 'green' : 'red'}
+                    onClick={() => act('auth')}
+                  />
+                </Stack.Item>
+                <Stack.Item ml={2}>
+                  <Box inline mr={1}>
+                    Server Power:
+                  </Box>
+                  {auth ? (
+                    <Button
+                      content={serverActive ? '[On]' : '[Off]'}
+                      color={serverActive ? 'green' : 'red'}
+                      onClick={() => act('active')}
+                    />
+                  ) : (
+                    <Box
+                      inline
+                      color={serverActive ? 'green' : 'red'}
+                      style={{ textDecoration: 'underline' }}
+                    >
+                      {serverActive ? '[On]' : '[Off]'}
+                    </Box>
+                  )}
+                </Stack.Item>
+              </Stack>
+            </Stack.Item>
+
+            <Stack.Item>
+              <Divider />
+              {screen === 0 && renderMainMenu()}
+              {screen === 2 && renderHackingScreen()}
+              {screen === 4 && renderLogsScreen()}
+            </Stack.Item>
+          </Stack>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/Photocopier.tsx b/tgui/packages/tgui/interfaces/Photocopier.tsx
new file mode 100644
index 00000000000..cf8ff396ce2
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Photocopier.tsx
@@ -0,0 +1,154 @@
+import {
+  Box,
+  Button,
+  Flex,
+  LabeledList,
+  NoticeBox,
+  NumberInput,
+  Section,
+  Stack,
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+
+interface PhotocopierData {
+  hasCopyitem: BooleanLike;
+  toner: number;
+  copies: number;
+  isSilicon: BooleanLike;
+  max_copies: number;
+}
+
+export const Photocopier = () => {
+  const { act, data } = useBackend<PhotocopierData>();
+  const { hasCopyitem, toner, copies, max_copies, isSilicon } = data;
+
+  const has_enough_toner = !(toner <= 0);
+
+  return (
+    <Window width={400} height={350} title="Photocopier">
+      <Window.Content>
+        {hasCopyitem ? (
+          <Stack.Item>
+            <Button onClick={() => act('remove')} mb={2}>
+              Remove Item
+            </Button>
+
+            <Flex align="center" mb={2}>
+              <Flex.Item>
+                <NumberInput
+                  animated
+                  width={2.6}
+                  height={1.65}
+                  step={1}
+                  stepPixelSize={8}
+                  minValue={1}
+                  maxValue={max_copies}
+                  value={copies}
+                  onDrag={(value: number) =>
+                    act('set_copies', {
+                      num_copies: value,
+                    })
+                  }
+                />
+              </Flex.Item>
+              <Flex.Item>
+                <Button
+                  ml={0.2}
+                  icon="copy"
+                  textAlign="center"
+                  disabled={!has_enough_toner}
+                  onClick={() => act('copy')}
+                >
+                  Copy
+                </Button>
+              </Flex.Item>
+            </Flex>
+          </Stack.Item>
+        ) : (
+          toner > 0 && (
+            <Section title="Options">
+              <Box color="average">No inserted item.</Box>
+            </Section>
+          )
+        )}
+        <Section title="Toner">
+          <Stack>
+            <Stack.Item>
+              <LabeledList>
+                <LabeledList.Item label="Current toner level">
+                  <Box color={toner > 0 ? 'default' : 'red'}>{toner}</Box>
+                </LabeledList.Item>
+              </LabeledList>
+            </Stack.Item>
+            {toner === 0 && (
+              <Stack.Item>
+                <NoticeBox color="red" mt={1}>
+                  Please insert a new toner cartridge!
+                </NoticeBox>
+              </Stack.Item>
+            )}
+          </Stack>
+        </Section>
+        {!!isSilicon && <AIOptions />}
+      </Window.Content>
+    </Window>
+  );
+};
+
+// const Toner = (props) => {
+//   const { act, data } = useBackend();
+//   const { has_toner, max_toner, current_toner } = data;
+
+//   const average_toner = max_toner * 0.66;
+//   const bad_toner = max_toner * 0.33;
+
+//   return (
+//     <Section
+//       title="Toner"
+//       buttons={
+//         <Button
+//           disabled={!has_toner}
+//           onClick={() => act('remove_toner')}
+//           icon="eject"
+//         >
+//           Eject
+//         </Button>
+//       }
+//     >
+//       <ProgressBar
+//         ranges={{
+//           good: [average_toner, max_toner],
+//           average: [bad_toner, average_toner],
+//           bad: [0, bad_toner],
+//         }}
+//         value={current_toner}
+//         minValue={0}
+//         maxValue={max_toner}
+//       />
+//     </Section>
+//   );
+// };
+
+const AIOptions = (props) => {
+  const { act, data } = useBackend<PhotocopierData>();
+  const { isSilicon } = data;
+
+  return (
+    <Section title="AI Options">
+      <Box>
+        <Button
+          fluid
+          icon="images"
+          textAlign="center"
+          disabled={!isSilicon}
+          onClick={() => act('aipic')}
+        >
+          Print photo from database
+        </Button>
+      </Box>
+    </Section>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/SeedStorage.tsx b/tgui/packages/tgui/interfaces/SeedStorage.tsx
new file mode 100644
index 00000000000..7dc4251fa9d
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/SeedStorage.tsx
@@ -0,0 +1,144 @@
+import { Box, Button, NoticeBox, Section, Table } from 'tgui-core/components';
+
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+
+interface SeedData {
+  id: number;
+  name: string;
+  variety: number;
+  amount: number;
+  endurance?: number;
+  yield?: number;
+  maturation?: number;
+  production?: number;
+  potency?: number;
+  harvest?: string;
+  ideal_heat?: number;
+  ideal_light?: number;
+  nutrients?: string;
+  water?: string;
+  notes: string;
+}
+
+interface SeedStorageData {
+  scanner: string[];
+  seeds: SeedData[];
+}
+
+export const SeedStorage = () => {
+  const { act, data } = useBackend<SeedStorageData>();
+  const { scanner, seeds } = data;
+
+  const hasStats = scanner.includes('stats');
+  const hasTemperature = scanner.includes('temperature');
+  const hasLight = scanner.includes('light');
+  const hasSoil = scanner.includes('soil');
+
+  return (
+    <Window width={1000} height={600}>
+      <Window.Content scrollable>
+        <Section title="Seed Storage Contents">
+          {seeds.length === 0 ? (
+            <NoticeBox color="red">No seeds</NoticeBox>
+          ) : (
+            <Table>
+              <Table.Row header>
+                <Table.Cell>Name</Table.Cell>
+                <Table.Cell>Variety</Table.Cell>
+                {hasStats && (
+                  <>
+                    <Table.Cell>E</Table.Cell>
+                    <Table.Cell>Y</Table.Cell>
+                    <Table.Cell>M</Table.Cell>
+                    <Table.Cell>Pr</Table.Cell>
+                    <Table.Cell>Pt</Table.Cell>
+                    <Table.Cell>Harvest</Table.Cell>
+                  </>
+                )}
+                {hasTemperature && <Table.Cell>Temp</Table.Cell>}
+                {hasLight && <Table.Cell>Light</Table.Cell>}
+                {hasSoil && (
+                  <>
+                    <Table.Cell>Nutri</Table.Cell>
+                    <Table.Cell>Water</Table.Cell>
+                  </>
+                )}
+                <Table.Cell>Notes</Table.Cell>
+                <Table.Cell>Amount</Table.Cell>
+                <Table.Cell>Actions</Table.Cell>
+              </Table.Row>
+              {seeds.map((seed) => (
+                <Table.Row key={seed.id}>
+                  <Table.Cell>{seed.name}</Table.Cell>
+                  <Table.Cell>#{seed.variety}</Table.Cell>
+                  {hasStats && (
+                    <>
+                      <Table.Cell>{seed.endurance}</Table.Cell>
+                      <Table.Cell>{seed.yield}</Table.Cell>
+                      <Table.Cell>{seed.maturation}</Table.Cell>
+                      <Table.Cell>{seed.production}</Table.Cell>
+                      <Table.Cell>{seed.potency}</Table.Cell>
+                      <Table.Cell>{seed.harvest}</Table.Cell>
+                    </>
+                  )}
+                  {hasTemperature && (
+                    <Table.Cell>{seed.ideal_heat} K</Table.Cell>
+                  )}
+                  {hasLight && <Table.Cell>{seed.ideal_light} L</Table.Cell>}
+                  {hasSoil && (
+                    <>
+                      <Table.Cell>{seed.nutrients}</Table.Cell>
+                      <Table.Cell>{seed.water}</Table.Cell>
+                    </>
+                  )}
+                  <Table.Cell>
+                    <Box fontSize="0.9em">
+                      {seed.notes.split(' ').map((note, index) => {
+                        const isWarning =
+                          note.includes('!') ||
+                          note.includes('CARN') ||
+                          note.includes('VINE');
+                        return (
+                          <Box
+                            key={index}
+                            as="span"
+                            color={isWarning ? 'red' : 'default'}
+                            mr={0.5}
+                          >
+                            {note}
+                          </Box>
+                        );
+                      })}
+                    </Box>
+                  </Table.Cell>
+                  <Table.Cell>{seed.amount}</Table.Cell>
+                  <Table.Cell>
+                    <Button
+                      content="Vend"
+                      onClick={() =>
+                        act('vend', {
+                          id: seed.id,
+                        })
+                      }
+                    />
+                    <Button
+                      ml={1}
+                      content="Purge"
+                      color="red"
+                      onClick={() =>
+                        act('purge', {
+                          id: seed.id,
+                        })
+                      }
+                    />
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table>
+          )}
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/Stats.tsx b/tgui/packages/tgui/interfaces/Stats.tsx
index cbce5e61424..b6f53461af6 100644
--- a/tgui/packages/tgui/interfaces/Stats.tsx
+++ b/tgui/packages/tgui/interfaces/Stats.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useBackend } from 'tgui/backend';
 import { Box, Section, Stack, Tabs, Tooltip } from 'tgui-core/components';
-import { classes } from 'tgui-core/react';
+import { BooleanLike, classes } from 'tgui-core/react';
 import { capitalize } from 'tgui-core/string';
 
 import { Window } from '../layouts';
@@ -24,7 +24,7 @@ interface PerkData {
 
 interface StatsData {
   name: string;
-  hasPerks: boolean;
+  hasPerks: BooleanLike;
   stats: StatData[];
   perks: PerkData[];
 }
diff --git a/tgui/packages/tgui/interfaces/SuitStorage.tsx b/tgui/packages/tgui/interfaces/SuitStorage.tsx
new file mode 100644
index 00000000000..20fc4281e15
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/SuitStorage.tsx
@@ -0,0 +1,204 @@
+import {
+  Box,
+  Button,
+  Divider,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Stack,
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+
+interface SuitStorageData {
+  panelOpen: BooleanLike;
+  isUV: BooleanLike;
+  isOpen: BooleanLike;
+  locked: BooleanLike;
+  issuperUV: BooleanLike;
+  safeties: BooleanLike;
+  hasOccupant: BooleanLike;
+  helmet: string | null;
+  suit: string | null;
+  mask: string | null;
+}
+
+export const SuitStorage = () => {
+  const { act, data } = useBackend<SuitStorageData>();
+  const {
+    panelOpen,
+    isUV,
+    isOpen,
+    locked,
+    issuperUV,
+    safeties,
+    hasOccupant,
+    helmet,
+    suit,
+    mask,
+  } = data;
+
+  if (panelOpen) {
+    return (
+      <Window width={435} height={300}>
+        <Window.Content>
+          <Section title="Maintenance Panel Controls">
+            <Stack vertical>
+              <Stack.Item>
+                <Box mb={2}>
+                  A small dial with a small lambda symbol on it. It&apos;s
+                  pointing towards a gauge that reads{' '}
+                  <Box as="span" bold>
+                    {issuperUV ? '15nm' : '185nm'}
+                  </Box>
+                  .
+                </Box>
+                <Button onClick={() => act('toggleUV')} mb={2}>
+                  {`Turn towards ${issuperUV ? '185nm' : '15nm'}`}
+                </Button>
+              </Stack.Item>
+
+              <Stack.Item>
+                <Box mb={2}>
+                  A thick old-style button, with 2 grimy LED lights next to it.
+                  The{' '}
+                  <Box as="span" bold color={safeties ? 'green' : 'red'}>
+                    {safeties ? 'GREEN' : 'RED'}
+                  </Box>{' '}
+                  LED is on.
+                </Box>
+                <Button onClick={() => act('togglesafeties')}>
+                  Press button
+                </Button>
+              </Stack.Item>
+            </Stack>
+          </Section>
+        </Window.Content>
+      </Window>
+    );
+  }
+
+  if (isUV) {
+    return (
+      <Window width={400} height={200}>
+        <Window.Content>
+          <Section title="Suit Storage Unit">
+            <NoticeBox color="red">
+              <Box bold>
+                Unit is cauterising contents with selected UV ray intensity.
+                Please wait.
+              </Box>
+            </NoticeBox>
+          </Section>
+        </Window.Content>
+      </Window>
+    );
+  }
+
+  return (
+    <Window width={400} height={500}>
+      <Window.Content>
+        <Section title="Suit Storage Unit">
+          <Stack vertical>
+            <Stack.Item>
+              <LabeledList>
+                <LabeledList.Item label="Helmet storage compartment">
+                  <Box color={helmet ? 'default' : 'grey'}>
+                    {helmet || 'No helmet detected.'}
+                  </Box>
+                  {helmet && isOpen ? (
+                    <Button onClick={() => act('dispense_helmet')} mt={1}>
+                      Dispense helmet
+                    </Button>
+                  ) : undefined}
+                </LabeledList.Item>
+
+                <LabeledList.Item label="Suit storage compartment">
+                  <Box color={suit ? 'default' : 'grey'}>
+                    {suit || 'No exosuit detected.'}
+                  </Box>
+                  {suit && isOpen ? (
+                    <Button onClick={() => act('dispense_suit')} mt={1}>
+                      Dispense suit
+                    </Button>
+                  ) : undefined}
+                </LabeledList.Item>
+
+                <LabeledList.Item label="Breathmask storage compartment">
+                  <Box color={mask ? 'default' : 'grey'}>
+                    {mask || 'No breathmask detected.'}
+                  </Box>
+                  {mask && isOpen ? (
+                    <Button
+                      content="Dispense mask"
+                      onClick={() => act('dispense_mask')}
+                      mt={1}
+                    />
+                  ) : undefined}
+                </LabeledList.Item>
+              </LabeledList>
+            </Stack.Item>
+
+            {hasOccupant ? (
+              <Stack.Item>
+                <Divider />
+                <NoticeBox color="red">
+                  <Box bold>
+                    WARNING: Biological entity detected inside the Unit&apos;s
+                    storage. Please remove.
+                  </Box>
+                </NoticeBox>
+                <Button
+                  content="Eject extra load"
+                  onClick={() => act('eject_guy')}
+                  mt={1}
+                />
+              </Stack.Item>
+            ) : undefined}
+
+            <Stack.Item>
+              <Divider />
+              <LabeledList>
+                <LabeledList.Item label="Unit is">
+                  <Box inline mr={2}>
+                    {isOpen ? 'Open' : 'Closed'}
+                  </Box>
+                  <Button
+                    content={isOpen ? 'Close Unit' : 'Open Unit'}
+                    onClick={() => act('toggle_open')}
+                  />
+                  {isOpen ? undefined : (
+                    <Button
+                      onClick={() => act('toggle_lock')}
+                      color="orange"
+                      ml={1}
+                    >
+                      {locked ? 'Unlock Unit' : 'Lock Unit'}
+                    </Button>
+                  )}
+                </LabeledList.Item>
+
+                <LabeledList.Item label="Unit status">
+                  <Box bold color={locked ? 'red' : 'green'}>
+                    {locked ? '**LOCKED**' : '**UNLOCKED**'}
+                  </Box>
+                </LabeledList.Item>
+              </LabeledList>
+
+              <Button
+                onClick={() => act('start_UV')}
+                disabled={isOpen}
+                tooltip={isOpen ? 'Unit must be closed' : ''}
+                mt={2}
+              >
+                Start Disinfection cycle
+              </Button>
+            </Stack.Item>
+          </Stack>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/TankDispenser.tsx b/tgui/packages/tgui/interfaces/TankDispenser.tsx
new file mode 100644
index 00000000000..c70a84dd6e9
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/TankDispenser.tsx
@@ -0,0 +1,50 @@
+import { Button, LabeledList, Section } from 'tgui-core/components';
+
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+
+interface TankDispenserData {
+  name: string;
+  oxygen: number;
+  plasma: number;
+}
+
+export const TankDispenser = (props) => {
+  const { act, data } = useBackend<TankDispenserData>();
+  return (
+    <Window width={275} height={103}>
+      <Window.Content>
+        <Section>
+          <LabeledList>
+            <LabeledList.Item
+              label="Plasma"
+              buttons={
+                <Button
+                  icon={data.plasma ? 'square' : 'square-o'}
+                  content="Dispense"
+                  disabled={!data.plasma}
+                  onClick={() => act('plasma')}
+                />
+              }
+            >
+              {data.plasma}
+            </LabeledList.Item>
+            <LabeledList.Item
+              label="Oxygen"
+              buttons={
+                <Button
+                  icon={data.oxygen ? 'square' : 'square-o'}
+                  content="Dispense"
+                  disabled={!data.oxygen}
+                  onClick={() => act('oxygen')}
+                />
+              }
+            >
+              {data.oxygen}
+            </LabeledList.Item>
+          </LabeledList>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/styles/themes/eris.scss b/tgui/packages/tgui/styles/themes/eris.scss
new file mode 100644
index 00000000000..06e469f6600
--- /dev/null
+++ b/tgui/packages/tgui/styles/themes/eris.scss
@@ -0,0 +1,60 @@
+@use 'sass:color';
+@use '../colors.scss' as *;
+
+// Base colors
+$primary: #000000 !default;
+$good: #00ff00 !default;
+$average: #f0d862 !default;
+$bad: #ff0000 !default;
+$label: #24ace1 !default;
+
+// Background colors
+$background: rgba(0, 20, 40, 0.99) !default;
+$window-background: #131820 !default;
+$button-background: rgba(12, 24, 32, 0.5) !default;
+
+// Border colors
+$border-color: rgba(36, 172, 225) !default;
+$border-radius: 2px !default;
+
+// Text colors
+$text-color: rgba(255, 255, 255, 0.87) !default;
+$text-muted: rgba(255, 255, 255, 0.5) !default;
+
+// Custom Eris-specific elements
+.Layout__content {
+  // Background image setup
+  background-image: url('../../assets/bg-eris.png');
+  background-size: 70%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+// Button styling
+.Button {
+  color: $text-color;
+  background-color: $button-background;
+  border: 1px solid $border-color;
+
+  // Custom button styles
+  &:hover {
+    background-color: color.scale($button-background, $lightness: 20%);
+  }
+}
+
+// Window styling
+.Window {
+  background-color: $window-background;
+}
+
+// Section styling
+.Section {
+  background-color: rgba(0, 0, 0, 0.3);
+  color: $text-color;
+
+  &__title {
+    color: $label;
+  }
+}
+
+// Add any additional custom components below