diff --git a/code/game/machinery/embedded_controller/airlock_docking_controller.dm b/code/game/machinery/embedded_controller/airlock_docking_controller.dm
index 1aea8be5282..ed4226dac69 100644
--- a/code/game/machinery/embedded_controller/airlock_docking_controller.dm
+++ b/code/game/machinery/embedded_controller/airlock_docking_controller.dm
@@ -11,10 +11,14 @@
 	docking_program = new/datum/computer/file/embedded_program/docking/airlock(src, airlock_program)
 	program = docking_program
 
-/obj/machinery/embedded_controller/radio/airlock/docking_port/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	var/data[0]
+/obj/machinery/embedded_controller/radio/airlock/docking_port/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "DockingAirlockConsole", name, ui_x=470, ui_y=250)
+		ui.open()
 
-	data = list(
+/obj/machinery/embedded_controller/radio/airlock/docking_port/ui_data(mob/user)
+	return list(
 		"chamber_pressure" = round(airlock_program.memory["chamber_sensor_pressure"]),
 		"exterior_status" = airlock_program.memory["exterior_status"],
 		"interior_status" = airlock_program.memory["interior_status"],
@@ -24,42 +28,29 @@
 		"override_enabled" = docking_program.override_enabled
 	)
 
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
-
-	if (!ui)
-		ui = new(user, src, ui_key, "docking_airlock_console.tmpl", name, 470, 290)
-		ui.set_initial_data(data)
-		ui.open()
-		ui.set_auto_update(1)
-
-/obj/machinery/embedded_controller/radio/airlock/docking_port/Topic(href, href_list)
-	if(..())
+/obj/machinery/embedded_controller/radio/airlock/docking_port/ui_act(action, params)
+	. = ..()
+	if(.)
 		return
 
-	usr.set_machine(src)
-	src.add_fingerprint(usr)
-
-	var/clean = 0
-	switch(href_list["command"])	//anti-HTML-hacking checks
-		if("cycle_ext")
-			clean = 1
-		if("cycle_int")
-			clean = 1
-		if("force_ext")
-			clean = 1
-		if("force_int")
-			clean = 1
-		if("abort")
-			clean = 1
-		if("toggle_override")
-			clean = 1
-
-	if(clean)
-		program.receive_user_command(href_list["command"])
-
-	return 1
-
-
+	if(action == "command")
+		var/clean = FALSE
+		switch(params["command"])	//anti-HTML-hacking checks
+			if("cycle_ext")
+				clean = TRUE
+			if("cycle_int")
+				clean = TRUE
+			if("force_ext")
+				clean = TRUE
+			if("force_int")
+				clean = TRUE
+			if("abort")
+				clean = TRUE
+			if("toggle_override")
+				clean = TRUE
+		if(clean)
+			program.receive_user_command(params["command"])
+			return TRUE
 
 //A docking controller for an airlock based docking port
 /datum/computer/file/embedded_program/docking/airlock
diff --git a/code/game/machinery/embedded_controller/airlock_docking_controller_multi.dm b/code/game/machinery/embedded_controller/airlock_docking_controller_multi.dm
index 71882bb1235..a9d5c5a7208 100644
--- a/code/game/machinery/embedded_controller/airlock_docking_controller_multi.dm
+++ b/code/game/machinery/embedded_controller/airlock_docking_controller_multi.dm
@@ -22,32 +22,23 @@
 			child_names[tags[i]] = names[i]
 
 
-/obj/machinery/embedded_controller/radio/docking_port_multi/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	var/data[0]
+/obj/machinery/embedded_controller/radio/docking_port_multi/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "MultiDockingConsole", name, ui_x=470, ui_y=290)
+		ui.open()
 
+/obj/machinery/embedded_controller/radio/docking_port_multi/ui_data(mob/user)
 	var/list/airlocks[child_names.len]
 	var/i = 1
 	for (var/child_tag in child_names)
 		airlocks[i++] = list("name"=child_names[child_tag], "override_enabled"=(docking_program.children_override[child_tag] == "enabled"))
 
-	data = list(
+	return list(
 		"docking_status" = docking_program.get_docking_status(),
 		"airlocks" = airlocks
 	)
 
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
-
-	if (!ui)
-		ui = new(user, src, ui_key, "multi_docking_console.tmpl", name, 470, 290)
-		ui.set_initial_data(data)
-		ui.open()
-		ui.set_auto_update(1)
-
-/obj/machinery/embedded_controller/radio/docking_port_multi/Topic(href, href_list)
-	return
-
-
-
 //a docking port based on an airlock
 /obj/machinery/embedded_controller/radio/airlock/docking_port_multi
 	name = "docking port controller"
@@ -60,10 +51,14 @@
 	airlock_program = new/datum/computer/file/embedded_program/airlock/multi_docking(src)
 	program = airlock_program
 
-/obj/machinery/embedded_controller/radio/airlock/docking_port_multi/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	var/data[0]
+/obj/machinery/embedded_controller/radio/airlock/docking_port_multi/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "DockingAirlockConsole", name, ui_x=470, ui_y=250)
+		ui.open()
 
-	data = list(
+/obj/machinery/embedded_controller/radio/airlock/docking_port_multi/ui_data(mob/user)
+	return list(
 		"chamber_pressure" = round(airlock_program.memory["chamber_sensor_pressure"]),
 		"exterior_status" = airlock_program.memory["exterior_status"],
 		"interior_status" = airlock_program.memory["interior_status"],
@@ -73,40 +68,29 @@
 		"override_enabled" = airlock_program.override_enabled
 	)
 
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
-
-	if (!ui)
-		ui = new(user, src, ui_key, "docking_airlock_console.tmpl", name, 470, 290)
-		ui.set_initial_data(data)
-		ui.open()
-		ui.set_auto_update(1)
-
-/obj/machinery/embedded_controller/radio/airlock/docking_port_multi/Topic(href, href_list)
-	if(..())
+/obj/machinery/embedded_controller/radio/airlock/docking_port_multi/ui_act(action, params)
+	. = ..()
+	if(.)
 		return
 
-	usr.set_machine(src)
-	src.add_fingerprint(usr)
-
-	var/clean = 0
-	switch(href_list["command"])	//anti-HTML-hacking checks
-		if("cycle_ext")
-			clean = 1
-		if("cycle_int")
-			clean = 1
-		if("force_ext")
-			clean = 1
-		if("force_int")
-			clean = 1
-		if("abort")
-			clean = 1
-		if("toggle_override")
-			clean = 1
-
-	if(clean)
-		program.receive_user_command(href_list["command"])
-
-	return 1
+	if(action == "command")
+		var/clean = FALSE
+		switch(params["command"])	//anti-HTML-hacking checks
+			if("cycle_ext")
+				clean = TRUE
+			if("cycle_int")
+				clean = TRUE
+			if("force_ext")
+				clean = TRUE
+			if("force_int")
+				clean = TRUE
+			if("abort")
+				clean = TRUE
+			if("toggle_override")
+				clean = TRUE
+		if(clean)
+			program.receive_user_command(params["command"])
+			return TRUE
 
 
 
diff --git a/code/game/machinery/embedded_controller/simple_docking_controller.dm b/code/game/machinery/embedded_controller/simple_docking_controller.dm
index 21c9f88f353..a631513212e 100644
--- a/code/game/machinery/embedded_controller/simple_docking_controller.dm
+++ b/code/game/machinery/embedded_controller/simple_docking_controller.dm
@@ -9,42 +9,35 @@
 	docking_program = new/datum/computer/file/embedded_program/docking/simple(src)
 	program = docking_program
 
-/obj/machinery/embedded_controller/radio/simple_docking_controller/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	var/data[0]
+/obj/machinery/embedded_controller/radio/simple_docking_controller/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "SimpleDockingConsole", name, ui_x=470, ui_y=200)
+		ui.open()
 
-	data = list(
+/obj/machinery/embedded_controller/radio/simple_docking_controller/ui_data(mob/user)
+	return list(
 		"docking_status" = docking_program.get_docking_status(),
 		"override_enabled" = docking_program.override_enabled,
 		"door_state" = 	docking_program.memory["door_status"]["state"],
 		"door_lock" = 	docking_program.memory["door_status"]["lock"]
 	)
 
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
+/obj/machinery/embedded_controller/radio/simple_docking_controller/ui_act(action, params)
+	. = ..()
+	if(.)
+		return
 
-	if (!ui)
-		ui = new(user, src, ui_key, "simple_docking_console.tmpl", name, 470, 290)
-		ui.set_initial_data(data)
-		ui.open()
-		ui.set_auto_update(1)
-
-/obj/machinery/embedded_controller/radio/simple_docking_controller/Topic(href, href_list)
-	if(..())
-		return 1
-
-	usr.set_machine(src)
-	src.add_fingerprint(usr)
-
-	var/clean = 0
-	switch(href_list["command"])	//anti-HTML-hacking checks
-		if("force_door")
-			clean = 1
-		if("toggle_override")
-			clean = 1
-
-	if(clean)
-		program.receive_user_command(href_list["command"])
-
-	return 0
+	if(action == "command")
+		var/clean = FALSE
+		switch(params["command"])	//anti-HTML-hacking checks
+			if("force_door")
+				clean = TRUE
+			if("toggle_override")
+				clean = TRUE
+		if(clean)
+			program.receive_user_command(params["command"])
+			return TRUE
 
 
 //A docking controller program for a simple door based docking port
diff --git a/code/modules/shuttles/escape_pods.dm b/code/modules/shuttles/escape_pods.dm
index 3202544d3c6..e7d3f14dcf3 100644
--- a/code/modules/shuttles/escape_pods.dm
+++ b/code/modules/shuttles/escape_pods.dm
@@ -43,10 +43,14 @@ var/list/escape_pods_by_name = list()
 	name = "escape pod controller"
 	var/datum/shuttle/autodock/ferry/escape_pod/pod
 
-/obj/machinery/embedded_controller/radio/simple_docking_controller/escape_pod/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	var/data[0]
+/obj/machinery/embedded_controller/radio/simple_docking_controller/escape_pod/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "EscapePodConsole", name, ui_x=470, ui_y=270)
+		ui.open()
 
-	data = list(
+/obj/machinery/embedded_controller/radio/simple_docking_controller/escape_pod/ui_data(mob/user)
+	return list(
 		"docking_status" = docking_program.get_docking_status(),
 		"override_enabled" = docking_program.override_enabled,
 		"door_state" = 	docking_program.memory["door_status"]["state"],
@@ -55,28 +59,21 @@ var/list/escape_pods_by_name = list()
 		"is_armed" = pod.arming_controller.armed
 	)
 
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
-
-	if (!ui)
-		ui = new(user, src, ui_key, "escape_pod_console.tmpl", name, 470, 290)
-		ui.set_initial_data(data)
-		ui.open()
-		ui.set_auto_update(1)
-
-/obj/machinery/embedded_controller/radio/simple_docking_controller/escape_pod/Topic(href, href_list)
-	if(..())
-		return 1
-
-	if(href_list["manual_arm"])
-		pod.arming_controller.arm()
-	if(href_list["force_launch"])
-		if (pod.can_force())
-			pod.force_launch(src)
-		else if (evacuation_controller.has_evacuated() && pod.can_launch())	//allow players to manually launch ahead of time if the shuttle leaves
-			pod.launch(src)
-
-	return 0
+/obj/machinery/embedded_controller/radio/simple_docking_controller/escape_pod/ui_act(action, params)
+	. = ..()
+	if(.)
+		return
 
+	if(action == "command")
+		if(params["command"] == "manual_arm")
+			pod.arming_controller.arm()
+			return TRUE
+		if(params["command"] == "force_launch")
+			if (pod.can_force())
+				pod.force_launch(src)
+			else if (evacuation_controller.has_evacuated() && pod.can_launch())	//allow players to manually launch ahead of time if the shuttle leaves
+				pod.launch(src)
+			return TRUE
 
 
 //This controller is for the escape pod berth (station side)
@@ -88,28 +85,24 @@ var/list/escape_pods_by_name = list()
 	docking_program = new/datum/computer/file/embedded_program/docking/simple/escape_pod(src)
 	program = docking_program
 
-/obj/machinery/embedded_controller/radio/simple_docking_controller/escape_pod_berth/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	var/data[0]
+/obj/machinery/embedded_controller/radio/simple_docking_controller/escape_pod_berth/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "EscapePodBerthConsole", name, ui_x=470, ui_y=200)
+		ui.open()
 
-	var/armed = null
+/obj/machinery/embedded_controller/radio/simple_docking_controller/escape_pod_berth/ui_data(mob/user)
+	var/armed = FALSE
 	if (istype(docking_program, /datum/computer/file/embedded_program/docking/simple/escape_pod))
 		var/datum/computer/file/embedded_program/docking/simple/escape_pod/P = docking_program
 		armed = P.armed
 
-	data = list(
+	return list(
 		"docking_status" = docking_program.get_docking_status(),
 		"override_enabled" = docking_program.override_enabled,
 		"armed" = armed
 	)
 
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
-
-	if (!ui)
-		ui = new(user, src, ui_key, "escape_pod_berth_console.tmpl", name, 470, 290)
-		ui.set_initial_data(data)
-		ui.open()
-		ui.set_auto_update(1)
-
 /obj/machinery/embedded_controller/radio/simple_docking_controller/escape_pod_berth/emag_act(var/remaining_charges, var/mob/user)
 	if (!emagged)
 		to_chat(user, "<span class='notice'>You emag the [src], arming the escape pod!</span>")
diff --git a/html/changelogs/geeves-docking_tgui.yml b/html/changelogs/geeves-docking_tgui.yml
new file mode 100644
index 00000000000..19ba017a8c0
--- /dev/null
+++ b/html/changelogs/geeves-docking_tgui.yml
@@ -0,0 +1,6 @@
+author: Geeves
+
+delete-after: True
+
+changes:
+  - rscadd: "Converted docking controllers and escape pod panels to TGUI."
diff --git a/nano/templates/docking_airlock_console.tmpl b/nano/templates/docking_airlock_console.tmpl
deleted file mode 100644
index 08d4dbf0e42..00000000000
--- a/nano/templates/docking_airlock_console.tmpl
+++ /dev/null
@@ -1,96 +0,0 @@
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Docking Port Status:
-		</div>
-		{{if data.docking_status == "docked"}}
-			<div class="itemContent" style="float:left">
-				{{if !data.override_enabled}}
-					<span class="good" style="float:left">DOCKED</span>
-				{{else}}
-					<span class="bad" style="float:left">DOCKED-OVERRIDE ENABLED</span>
-				{{/if}}
-				<span style="float:right">
-					{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, null, data.override_enabled ? 'redButton' : null)}}
-				</span>
-			</div>
-		{{else data.docking_status == "docking"}}
-			<div class="itemContent" style="float:left">
-				{{if !data.override_enabled}}
-					<span class="average" style="float:left">DOCKING</span>
-				{{else}}
-					<span class="bad" style="float:left">DOCKING-OVERRIDE ENABLED</span>
-				{{/if}}
-				<span style="float:right">
-					{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, null, data.override_enabled ? 'redButton' : null)}}
-				</span>
-			</div>
-		{{else data.docking_status == "undocking"}}
-			<div class="itemContent" style="float:left">
-				{{if !data.override_enabled}}
-					<span class="average" style="float:left">UNDOCKING</span>
-				{{else}}
-					<span class="bad" style="float:left">UNDOCKING-OVERRIDE ENABLED</span>
-				{{/if}}
-				<span style="float:right">
-					{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, null, data.override_enabled ? 'redButton' : null)}}
-				</span>
-			</div>
-		{{else data.docking_status == "undocked"}}
-			<div class="itemContent" style="float:left">
-				{{if !data.override_enabled}}
-					<span class="idle" style="float:left">NOT IN USE</span>
-				{{else}}
-					<span class="bad" style="float:left">OVERRIDE ENABLED</span>
-				{{/if}}
-				<span style="float:right">
-					{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, null, data.override_enabled ? 'redButton' : null)}}
-				</span>
-			</div>
-		{{else}}
-			<span class="bad">ERROR</span>
-			{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, null, data.override_enabled ? 'redButton' : null)}}
-		{{/if}}
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Chamber Pressure:
-		</div>
-		<div class="itemContent">
-			{{:helper.displayBar(data.chamber_pressure, 0, 200, (data.chamber_pressure < 80 || data.chamber_pressure > 120) ? 'bad' : (data.chamber_pressure < 95 || data.chamber_pressure > 110) ? 'average' : 'good')}}
-			<div class="statusValue">
-				{{:data.chamber_pressure}} kPa
-			</div>
-		</div>
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemContent" style="width: 100%">
-			{{:helper.link('Cycle to Exterior', 'arrowthickstop-1-w', {'command' : 'cycle_ext'}, (data.processing || data.airlock_disabled) ? 'disabled' : null)}}
-			{{:helper.link('Cycle to Interior', 'arrowthickstop-1-e', {'command' : 'cycle_int'}, (data.processing || data.airlock_disabled) ? 'disabled' : null)}}
-		</div>
-		<div class="itemContent" style="padding-top: 2px; width: 100%">
-		{{if data.airlock_disabled}}
-			{{:helper.link('Force exterior door', 'alert', {'command' : 'force_ext'}, 'disabled', null)}}
-			{{:helper.link('Force interior door', 'alert', {'command' : 'force_int'}, 'disabled', null)}}
-		{{else}}
-			{{if data.interior_status.state == "open"}}
-				{{:helper.link('Force exterior door', 'alert', {'command' : 'force_ext'}, null, 'redButton')}}
-			{{else}}
-				{{:helper.link('Force exterior door', 'alert', {'command' : 'force_ext'}, null, data.processing ? 'yellowButton' : null)}}
-			{{/if}}
-			{{if data.exterior_status.state == "open"}}
-				{{:helper.link('Force interior door', 'alert', {'command' : 'force_int'}, null, 'redButton')}}
-			{{else}}
-				{{:helper.link('Force interior door', 'alert', {'command' : 'force_int'}, null, data.processing ? 'yellowButton' : null)}}
-			{{/if}}
-		{{/if}}
-		</div>
-	</div>
-	<div class="item" style="padding-top: 10px; width: 100%">
-			{{:helper.link('Abort', 'cancel', {'command' : 'abort'}, (data.processing && !data.airlock_disabled) ? null : 'disabled', (data.processing && !data.airlock_disabled) ? 'redButton' : null)}}
-	</div>
-</div>
\ No newline at end of file
diff --git a/nano/templates/escape_pod_berth_console.tmpl b/nano/templates/escape_pod_berth_console.tmpl
deleted file mode 100644
index 434fa386cf1..00000000000
--- a/nano/templates/escape_pod_berth_console.tmpl
+++ /dev/null
@@ -1,42 +0,0 @@
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Escape Pod Status:
-		</div>
-		<div class="itemContent">
-			{{if data.docking_status == "docked"}}
-				{{if data.armed}}
-					<span class="average">ARMED</span>
-				{{else}}
-					<span class="good">SYSTEMS OK</span>
-				{{/if}}
-			{{else data.docking_status == "undocking"}}
-				<span class="average">EJECTING-STAND CLEAR!</span>
-			{{else data.docking_status == "undocked"}}
-				<span class="idle">POD EJECTED</span>
-			{{else data.docking_status == "docking"}}
-				<span class="good">INITIALIZING...</span>
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemContent" style="padding-top: 2px; width: 100%">
-		{{if data.armed}}
-			{{if data.docking_status == "docked"}}
-				{{:helper.link('Force exterior door', 'alert', {'command' : 'force_door'}, data.override_enabled ? null : 'disabled', null)}}
-				{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, null, data.override_enabled ? 'redButton' : null)}}
-			{{else}}
-				{{:helper.link('Force exterior door', 'alert', {'command' : 'force_door'}, data.override_enabled ? null : 'disabled', data.override_enabled ? 'redButton' : null)}}
-				{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, null, data.override_enabled ? 'redButton' : 'yellowButton')}}
-			{{/if}}
-		{{else}}
-			{{:helper.link('Force exterior door', 'alert', {'command' : 'force_door'}, 'disabled', null)}}
-			{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, 'disabled', null)}}
-		{{/if}}
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/nano/templates/escape_pod_console.tmpl b/nano/templates/escape_pod_console.tmpl
deleted file mode 100644
index aa24d3a9cef..00000000000
--- a/nano/templates/escape_pod_console.tmpl
+++ /dev/null
@@ -1,95 +0,0 @@
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Escape Pod Status:
-		</div>
-		<div class="itemContent">
-			{{if data.docking_status == "docked"}}
-				{{if data.is_armed}}
-					<span class="average">ARMED</span>
-				{{else}}
-					<span class="good">SYSTEMS OK</span>
-				{{/if}}
-			{{else data.docking_status == "undocking"}}
-				<span class="average">EJECTING</span>
-			{{else data.docking_status == "undocked"}}
-				<span class="idle">POD EJECTED</span>
-			{{else data.docking_status == "docking"}}
-				<span class="average">DOCKING</span>
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Docking Hatch:
-		</div>
-		<div class="itemContent">
-			{{if data.docking_status == "docked"}}
-				{{if data.door_state == "open"}}
-					<span class="good">OPEN</span>
-				{{else data.door_state == "closed"}}
-					<span class="good">CLOSED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			{{else data.docking_status == "docking"}}
-				{{if data.door_state == "open"}}
-					<span class="good">OPEN</span>
-				{{else data.door_state == "closed" && data.door_lock == "locked"}}
-					<span class="good">SECURED</span>
-				{{else data.door_state == "closed" && data.door_lock == "unlocked"}}
-					<span class="good">UNSECURED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			{{else data.docking_status == "undocking"}}
-				{{if data.door_state == "open"}}
-					<span class="average">OPEN</span>
-				{{else data.door_state == "closed" && data.door_lock == "locked"}}
-					<span class="good">SECURED</span>
-				{{else data.door_state == "closed" && data.door_lock == "unlocked"}}
-					<span class="average">UNSECURED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			{{else data.docking_status == "undocked"}}
-				{{if data.door_state == "open"}}
-					<span class="bad">OPEN</span>
-				{{else data.door_state == "closed" && data.door_lock == "locked"}}
-					<span class="good">SECURED</span>
-				{{else data.door_state == "closed" && data.door_lock == "unlocked"}}
-					<span class="bad">UNSECURED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemContent" style="padding-top: 2px; width: 100%">
-		{{if data.docking_status == "docked"}}
-			{{:helper.link('Force exterior door', 'alert', {'command' : 'force_door'}, data.override_enabled ? null : 'disabled', null)}}
-			{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, null, data.override_enabled ? 'redButton' : null)}}
-		{{else}}
-			{{:helper.link('Force exterior door', 'alert', {'command' : 'force_door'}, data.override_enabled ? null : 'disabled', data.override_enabled ? 'redButton' : null)}}
-			{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, null, data.override_enabled ? 'redButton' : 'yellowButton')}}
-		{{/if}}
-		</div>
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemContent" style="padding-top: 2px; width: 100%">
-		{{:helper.link('ARM', 'alert', {'command' : 'manual_arm'}, data.is_armed ? 'disabled' : null, data.is_armed ? 'redButton' : 'yellowButton')}}
-		{{:helper.link('MANUAL EJECT', 'alert', {'command' : 'force_launch'}, data.can_force ? null : 'disabled', data.can_force ? 'yellowButton' : null)}}
-		</div>
-	</div>
-</div>
diff --git a/nano/templates/multi_docking_console.tmpl b/nano/templates/multi_docking_console.tmpl
deleted file mode 100644
index 9515799644e..00000000000
--- a/nano/templates/multi_docking_console.tmpl
+++ /dev/null
@@ -1,37 +0,0 @@
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Docking Port Status:
-		</div>
-		<div class="itemContent">
-			{{if data.docking_status == "docked"}}
-				<span class="good">DOCKED</span>
-			{{else data.docking_status == "docking"}}
-				<span class="average">DOCKING</span>
-			{{else data.docking_status == "undocking"}}
-				<span class="average">UNDOCKING</span>
-			{{else data.docking_status == "undocked"}}
-				<span class="idle">NOT IN USE</span>
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-
-{{for data.airlocks}}
-	<div class="item" style="padding-top: 10px">
-		<div class="item">
-			<div class="itemLabel">
-				{{:value.name}}
-			</div>
-			<div class="itemContent">
-				{{if value.override_enabled}}
-					<span class="bad">OVERRIDE ENABLED</span>
-				{{else}}
-					<span class="good">STATUS OK</span>
-				{{/if}}
-			</div>
-		</div>
-	</div>
-{{/for}}
\ No newline at end of file
diff --git a/nano/templates/simple_docking_console.tmpl b/nano/templates/simple_docking_console.tmpl
deleted file mode 100644
index 73c8ff8e3e1..00000000000
--- a/nano/templates/simple_docking_console.tmpl
+++ /dev/null
@@ -1,99 +0,0 @@
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Docking Port Status:
-		</div>
-		<div class="itemContent">
-			{{if data.docking_status == "docked"}}
-				{{if !data.override_enabled}}
-					<span class="good">DOCKED</span>
-				{{else}}
-					<span class="bad">DOCKED-OVERRIDE ENABLED</span>
-				{{/if}}
-			{{else data.docking_status == "docking"}}
-				{{if !data.override_enabled}}
-					<span class="average">DOCKING</span>
-				{{else}}
-					<span class="bad">DOCKING-OVERRIDE ENABLED</span>
-				{{/if}}
-			{{else data.docking_status == "undocking"}}
-				{{if !data.override_enabled}}
-					<span class="average">UNDOCKING</span>
-				{{else}}
-					<span class="bad">UNDOCKING-OVERRIDE ENABLED</span>
-				{{/if}}
-			{{else data.docking_status == "undocked"}}
-				{{if !data.override_enabled}}
-					<span class="idle">NOT IN USE</span>
-				{{else}}
-					<span class="bad" style="float:left">OVERRIDE ENABLED</span>
-				{{/if}}
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Docking Hatch:
-		</div>
-		<div class="itemContent">
-			{{if data.docking_status == "docked"}}
-				{{if data.door_state == "open"}}
-					<span class="good">OPEN</span>
-				{{else data.door_state == "closed"}}
-					<span class="good">CLOSED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			{{else data.docking_status == "docking"}}
-				{{if data.door_state == "open"}}
-					<span class="good">OPEN</span>
-				{{else data.door_state == "closed" && data.door_lock == "locked"}}
-					<span class="good">SECURED</span>
-				{{else data.door_state == "closed" && data.door_lock == "unlocked"}}
-					<span class="good">UNSECURED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			{{else data.docking_status == "undocking"}}
-				{{if data.door_state == "open"}}
-					<span class="average">OPEN</span>
-				{{else data.door_state == "closed" && data.door_lock == "locked"}}
-					<span class="good">SECURED</span>
-				{{else data.door_state == "closed" && data.door_lock == "unlocked"}}
-					<span class="average">UNSECURED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			{{else data.docking_status == "undocked"}}
-				{{if data.door_state == "open"}}
-					<span class="bad">OPEN</span>
-				{{else data.door_state == "closed" && data.door_lock == "locked"}}
-					<span class="good">SECURED</span>
-				{{else data.door_state == "closed" && data.door_lock == "unlocked"}}
-					<span class="bad">UNSECURED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemContent" style="padding-top: 2px; width: 100%">
-		{{if data.docking_status == "docked"}}
-			{{:helper.link('Force exterior door', 'alert', {'command' : 'force_door'}, data.override_enabled ? null : 'disabled', null)}}
-			{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, null, data.override_enabled ? 'redButton' : null)}}
-		{{else}}
-			{{:helper.link('Force exterior door', 'alert', {'command' : 'force_door'}, data.override_enabled ? null : 'disabled', data.override_enabled ? 'redButton' : null)}}
-			{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, null, data.override_enabled ? 'redButton' : 'yellowButton')}}
-		{{/if}}
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/nano/templates/simple_docking_console_pod.tmpl b/nano/templates/simple_docking_console_pod.tmpl
deleted file mode 100644
index 07f055ea2cc..00000000000
--- a/nano/templates/simple_docking_console_pod.tmpl
+++ /dev/null
@@ -1,101 +0,0 @@
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Docking Port Status:
-		</div>
-		<div class="itemContent">
-			{{if data.docking_status == "docked"}}
-				{{if !data.override_enabled}}
-					<span class="good">DOCKED</span>
-				{{else}}
-					<span class="bad">DOCKED-OVERRIDE ENABLED</span>
-				{{/if}}
-			{{else data.docking_status == "docking"}}
-				{{if !data.override_enabled}}
-					<span class="average">DOCKING</span>
-				{{else}}
-					<span class="bad">DOCKING-OVERRIDE ENABLED</span>
-				{{/if}}
-			{{else data.docking_status == "undocking"}}
-				{{if !data.override_enabled}}
-					<span class="average">UNDOCKING</span>
-				{{else}}
-					<span class="bad">UNDOCKING-OVERRIDE ENABLED</span>
-				{{/if}}
-			{{else data.docking_status == "undocked"}}
-				{{if !data.override_enabled}}
-					<span class="idle">NOT IN USE</span>
-				{{else}}
-					<span class="bad" style="float:left">OVERRIDE ENABLED</span>
-				{{/if}}
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Docking Hatch:
-		</div>
-		<div class="itemContent">
-			{{if data.docking_status == "docked"}}
-				{{if data.door_state == "open"}}
-					<span class="good">OPEN</span>
-				{{else data.door_state == "closed"}}
-					<span class="good">CLOSED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			{{else data.docking_status == "docking"}}
-				{{if data.door_state == "open"}}
-					<span class="good">OPEN</span>
-				{{else data.door_state == "closed" && data.door_lock == "locked"}}
-					<span class="good">SECURED</span>
-				{{else data.door_state == "closed" && data.door_lock == "unlocked"}}
-					<span class="good">UNSECURED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			{{else data.docking_status == "undocking"}}
-				{{if data.door_state == "open"}}
-					<span class="average">OPEN</span>
-				{{else data.door_state == "closed" && data.door_lock == "locked"}}
-					<span class="good">SECURED</span>
-				{{else data.door_state == "closed" && data.door_lock == "unlocked"}}
-					<span class="average">UNSECURED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			{{else data.docking_status == "undocked"}}
-				{{if data.door_state == "open"}}
-					<span class="bad">OPEN</span>
-				{{else data.door_state == "closed" && data.door_lock == "locked"}}
-					<span class="good">SECURED</span>
-				{{else data.door_state == "closed" && data.door_lock == "unlocked"}}
-					<span class="bad">UNSECURED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemContent" style="padding-top: 2px; width: 100%">
-		{{if data.docking_status == "docked"}}
-			{{:helper.link('Force exterior door', 'alert', {'command' : 'force_door'}, data.override_enabled ? null : 'disabled', null)}}
-			{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, null, data.override_enabled ? 'redButton' : null)}}
-			{{:helper.link('MANUAL EJECT', 'alert', {'command' : 'toggle_override'}, 'disabled', null)}}
-		{{else}}
-			{{:helper.link('Force exterior door', 'alert', {'command' : 'force_door'}, data.override_enabled ? null : 'disabled', data.override_enabled ? 'redButton' : null)}}
-			{{:helper.link('Override', 'alert', {'command' : 'toggle_override'}, null, data.override_enabled ? 'redButton' : 'yellowButton')}}
-			{{:helper.link('MANUAL EJECT', 'alert', {'command' : 'toggle_override'}, data.can_force ? null : 'disabled', data.can_force ? 'redButton' : null)}}
-		{{/if}}
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/tgui/packages/tgui/interfaces/DockingAirlockConsole.tsx b/tgui/packages/tgui/interfaces/DockingAirlockConsole.tsx
new file mode 100644
index 00000000000..54d4ae73d28
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/DockingAirlockConsole.tsx
@@ -0,0 +1,128 @@
+import { useBackend } from '../backend';
+import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
+import { Window } from '../layouts';
+
+export type StatusData = {
+  state: string;
+  lock: string;
+};
+
+export type DockingAirlockConsoleData = {
+  chamber_pressure: number;
+  exterior_status: StatusData;
+  interior_status: StatusData;
+  processing: boolean;
+  docking_status: string;
+  airlock_disabled: boolean;
+  override_enabled: boolean;
+};
+
+export const DockingAirlockConsole = (props, context) => {
+  const { act, data } = useBackend<DockingAirlockConsoleData>(context);
+
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <Section title="Status">
+          <Box>
+            <LabeledList>
+              <LabeledList.Item label="Docking Port Status">
+                {data.docking_status === 'docked' ? (
+                  data.override_enabled ? (
+                    <Box>Docked - Override Enabled</Box>
+                  ) : (
+                    <Box>Docked</Box>
+                  )
+                ) : data.docking_status === 'docking' ? (
+                  data.override_enabled ? (
+                    <Box>Docking - Override Enabled</Box>
+                  ) : (
+                    <Box>Docking</Box>
+                  )
+                ) : data.docking_status === 'undocking' ? (
+                  data.override_enabled ? (
+                    <Box>Undocking - Override Enabled</Box>
+                  ) : (
+                    <Box>Undocking</Box>
+                  )
+                ) : data.docking_status === 'undocked' ? (
+                  data.override_enabled ? (
+                    <Box>Override Enabled</Box>
+                  ) : (
+                    <Box>Not in use</Box>
+                  )
+                ) : (
+                  <Box>Error</Box>
+                )}
+              </LabeledList.Item>
+              <LabeledList.Item label="Chamber Pressure">
+                <ProgressBar
+                  ranges={{
+                    average: [120, Infinity],
+                    good: [80, 120],
+                    bad: [-Infinity, 80],
+                  }}
+                  value={data.chamber_pressure}
+                  minValue={0}
+                  maxValue={200}>
+                  {data.chamber_pressure} kPa
+                </ProgressBar>
+              </LabeledList.Item>
+            </LabeledList>
+          </Box>
+        </Section>
+        <Section title="Controls">
+          <Box>
+            <Button
+              content="Cycle to Exterior"
+              icon="arrow-right-from-bracket"
+              onClick={() => act('command', { command: 'cycle_ext' })}
+            />
+            <Button
+              content="Cycle to Interior"
+              icon="arrow-right-to-bracket"
+              onClick={() => act('command', { command: 'cycle_int' })}
+            />
+          </Box>
+          <Box>
+            <Button
+              content="Force Exterior Door"
+              icon="circle-exclamation"
+              disabled={data.airlock_disabled || data.processing}
+              color={
+                data.airlock_disabled || data.processing
+                  ? null
+                  : data.interior_status.state === 'open'
+                    ? 'red'
+                    : 'yellow'
+              }
+              onClick={() => act('command', { command: 'force_ext' })}
+            />
+            <Button
+              content="Force Interior Door"
+              icon="circle-exclamation"
+              disabled={data.airlock_disabled || data.processing}
+              color={
+                data.airlock_disabled || data.processing
+                  ? null
+                  : data.exterior_status.state === 'open'
+                    ? 'red'
+                    : 'yellow'
+              }
+              onClick={() => act('command', { command: 'force_int' })}
+            />
+          </Box>
+          <Box>
+            <Button
+              content="Abort"
+              icon="ban"
+              disabled={data.airlock_disabled || data.processing}
+              color={data.airlock_disabled || data.processing ? null : 'red'}
+              onClick={() => act('command', { command: 'abort' })}
+            />
+          </Box>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/EscapePodBerthConsole.tsx b/tgui/packages/tgui/interfaces/EscapePodBerthConsole.tsx
new file mode 100644
index 00000000000..4ab7224301a
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EscapePodBerthConsole.tsx
@@ -0,0 +1,63 @@
+import { useBackend } from '../backend';
+import { Box, Button, LabeledList, Section } from '../components';
+import { Window } from '../layouts';
+
+export type EscapePodBerthConsoleData = {
+  docking_status: string;
+  override_enabled: boolean;
+  armed: boolean;
+};
+
+export const EscapePodBerthConsole = (props, context) => {
+  const { act, data } = useBackend<EscapePodBerthConsoleData>(context);
+
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <Section title="Status">
+          <Box>
+            <LabeledList>
+              <LabeledList.Item label="Escape Pod Status">
+                {data.docking_status === 'docked' ? (
+                  data.armed ? (
+                    <Box>Armed</Box>
+                  ) : (
+                    <Box>Systems OK - Awaiting Arming</Box>
+                  )
+                ) : data.docking_status === 'docking' ? (
+                  <Box>Initializing...</Box>
+                ) : data.docking_status === 'undocking' ? (
+                  <Box>Ejecting - STAND CLEAR!</Box>
+                ) : data.docking_status === 'undocked' ? (
+                  <Box>Pod Ejected</Box>
+                ) : (
+                  <Box>Error</Box>
+                )}
+              </LabeledList.Item>
+            </LabeledList>
+          </Box>
+        </Section>
+        <Section title="Controls">
+          <Box>
+            <Button
+              content="Force Exterior Door"
+              icon="circle-exclamation"
+              disabled={!data.armed || !data.override_enabled}
+              color={!data.armed || data.override_enabled ? 'red' : null}
+              onClick={() => act('command', { command: 'force_door' })}
+            />
+            <Button
+              content="Override"
+              icon="triangle-exclamation"
+              disabled={!data.armed}
+              color={
+                !data.armed ? null : data.override_enabled ? 'red' : 'yellow'
+              }
+              onClick={() => act('command', { command: 'toggle_override' })}
+            />
+          </Box>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/EscapePodConsole.tsx b/tgui/packages/tgui/interfaces/EscapePodConsole.tsx
new file mode 100644
index 00000000000..be75d82fff2
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EscapePodConsole.tsx
@@ -0,0 +1,140 @@
+import { useBackend } from '../backend';
+import { Box, Button, LabeledList, Section } from '../components';
+import { Window } from '../layouts';
+
+export type EscapePodConsoleData = {
+  docking_status: string;
+  override_enabled: boolean;
+  door_state: string;
+  door_lock: string;
+  can_force: boolean;
+  is_armed: boolean;
+};
+
+export const EscapePodConsole = (props, context) => {
+  const { act, data } = useBackend<EscapePodConsoleData>(context);
+
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <Section title="Status">
+          <Box>
+            <LabeledList>
+              <LabeledList.Item label="Escape Pod Status">
+                {data.docking_status === 'docked' ? (
+                  data.override_enabled ? (
+                    <Box>Docked - Override Enabled</Box>
+                  ) : (
+                    <Box>Docked</Box>
+                  )
+                ) : data.docking_status === 'docking' ? (
+                  data.override_enabled ? (
+                    <Box>Docking - Override Enabled</Box>
+                  ) : (
+                    <Box>Docking</Box>
+                  )
+                ) : data.docking_status === 'undocking' ? (
+                  data.override_enabled ? (
+                    <Box>Undocking - Override Enabled</Box>
+                  ) : (
+                    <Box>Undocking</Box>
+                  )
+                ) : data.docking_status === 'undocked' ? (
+                  data.override_enabled ? (
+                    <Box>Override Enabled</Box>
+                  ) : (
+                    <Box>Not in use</Box>
+                  )
+                ) : (
+                  <Box>Error</Box>
+                )}
+              </LabeledList.Item>
+              <LabeledList.Item label="Docking Hatch">
+                {data.docking_status === 'docked' ? (
+                  data.door_state === 'open' ? (
+                    <Box>Open</Box>
+                  ) : data.door_state === 'closed' ? (
+                    <Box>Closed</Box>
+                  ) : (
+                    <Box>Error</Box>
+                  )
+                ) : data.docking_status === 'docking' ? (
+                  data.door_state === 'open' ? (
+                    <Box>Open</Box>
+                  ) : data.door_state === 'closed' &&
+                    data.door_lock === 'locked' ? (
+                    <Box>Secured</Box>
+                  ) : data.door_state === 'closed' &&
+                    data.door_lock === 'unlocked' ? (
+                    <Box>Unsecured</Box>
+                  ) : (
+                    <Box>Error</Box>
+                  )
+                ) : data.docking_status === 'undocking' ? (
+                  data.door_state === 'open' ? (
+                    <Box>Open</Box>
+                  ) : data.door_state === 'closed' &&
+                    data.door_lock === 'locked' ? (
+                    <Box>Secured</Box>
+                  ) : data.door_state === 'closed' &&
+                    data.door_lock === 'unlocked' ? (
+                    <Box>Unsecured</Box>
+                  ) : (
+                    <Box>Error</Box>
+                  )
+                ) : data.docking_status === 'undocked' ? (
+                  data.door_state === 'open' ? (
+                    <Box>Open</Box>
+                  ) : data.door_state === 'closed' &&
+                    data.door_lock === 'locked' ? (
+                    <Box>Secured</Box>
+                  ) : data.door_state === 'closed' &&
+                    data.door_lock === 'unlocked' ? (
+                    <Box>Unsecured</Box>
+                  ) : (
+                    <Box>Error</Box>
+                  )
+                ) : (
+                  <Box>Error</Box>
+                )}
+              </LabeledList.Item>
+            </LabeledList>
+          </Box>
+        </Section>
+        <Section title="Controls">
+          <Box>
+            <Button
+              content="Force Exterior Door"
+              icon="circle-exclamation"
+              disabled={!data.override_enabled}
+              color={data.override_enabled ? 'red' : null}
+              onClick={() => act('command', { command: 'force_door' })}
+            />
+            <Button
+              content="Override"
+              icon="triangle-exclamation"
+              color={data.override_enabled ? 'red' : 'yellow'}
+              onClick={() => act('command', { command: 'toggle_override' })}
+            />
+          </Box>
+          <Box>
+            <Button
+              content={data.is_armed ? 'Armed' : 'Arm'}
+              icon="key"
+              disabled={data.is_armed}
+              color={data.is_armed ? null : 'red'}
+              onClick={() => act('command', { command: 'manual_arm' })}
+            />
+            <Button
+              content="Manual Eject"
+              icon="arrow-up-from-bracket"
+              disabled={!data.can_force}
+              color={data.can_force ? 'red' : null}
+              onClick={() => act('command', { command: 'force_launch' })}
+            />
+          </Box>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/MultiDockingConsole.tsx b/tgui/packages/tgui/interfaces/MultiDockingConsole.tsx
new file mode 100644
index 00000000000..f9dfed0bdd6
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/MultiDockingConsole.tsx
@@ -0,0 +1,56 @@
+import { useBackend } from '../backend';
+import { Box, LabeledList, Section } from '../components';
+import { Window } from '../layouts';
+
+export type AirlockData = {
+  name: string;
+  override_enabled: boolean;
+};
+
+export type MultiDockingConsoleData = {
+  docking_status: string;
+  airlocks: AirlockData[];
+};
+
+export const MultiDockingConsole = (props, context) => {
+  const { act, data } = useBackend<MultiDockingConsoleData>(context);
+
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <Section title="Status">
+          <Box>
+            <LabeledList>
+              <LabeledList.Item label="Docking Port Status">
+                {data.docking_status === 'docked' ? (
+                  <Box>Docked</Box>
+                ) : data.docking_status === 'docking' ? (
+                  <Box>Docking</Box>
+                ) : data.docking_status === 'undocking' ? (
+                  <Box>Undocking</Box>
+                ) : data.docking_status === 'undocked' ? (
+                  <Box>Not in use</Box>
+                ) : (
+                  <Box>Error</Box>
+                )}
+              </LabeledList.Item>
+            </LabeledList>
+          </Box>
+        </Section>
+        <Section title="Airlocks">
+          <LabeledList>
+            {data.airlocks.map((airlock) => (
+              <LabeledList.Item label={airlock.name} key={airlock.name}>
+                {airlock.override_enabled ? (
+                  <Box>Override Enabled</Box>
+                ) : (
+                  <Box>Status OK</Box>
+                )}
+              </LabeledList.Item>
+            ))}
+          </LabeledList>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/SimpleDockingConsole.tsx b/tgui/packages/tgui/interfaces/SimpleDockingConsole.tsx
new file mode 100644
index 00000000000..b8e21db5442
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/SimpleDockingConsole.tsx
@@ -0,0 +1,122 @@
+import { useBackend } from '../backend';
+import { Box, Button, LabeledList, Section } from '../components';
+import { Window } from '../layouts';
+
+export type SimpleDockingConsoleData = {
+  docking_status: string;
+  override_enabled: boolean;
+  door_state: string;
+  door_lock: string;
+};
+
+export const SimpleDockingConsole = (props, context) => {
+  const { act, data } = useBackend<SimpleDockingConsoleData>(context);
+
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <Section title="Status">
+          <Box>
+            <LabeledList>
+              <LabeledList.Item label="Docking Port Status">
+                {data.docking_status === 'docked' ? (
+                  data.override_enabled ? (
+                    <Box>Docked - Override Enabled</Box>
+                  ) : (
+                    <Box>Docked</Box>
+                  )
+                ) : data.docking_status === 'docking' ? (
+                  data.override_enabled ? (
+                    <Box>Docking - Override Enabled</Box>
+                  ) : (
+                    <Box>Docking</Box>
+                  )
+                ) : data.docking_status === 'undocking' ? (
+                  data.override_enabled ? (
+                    <Box>Undocking - Override Enabled</Box>
+                  ) : (
+                    <Box>Undocking</Box>
+                  )
+                ) : data.docking_status === 'undocked' ? (
+                  data.override_enabled ? (
+                    <Box>Override Enabled</Box>
+                  ) : (
+                    <Box>Not in use</Box>
+                  )
+                ) : (
+                  <Box>Error</Box>
+                )}
+              </LabeledList.Item>
+              <LabeledList.Item label="Docking Hatch">
+                {data.docking_status === 'docked' ? (
+                  data.door_state === 'open' ? (
+                    <Box>Open</Box>
+                  ) : data.door_state === 'closed' ? (
+                    <Box>Closed</Box>
+                  ) : (
+                    <Box>Error</Box>
+                  )
+                ) : data.docking_status === 'docking' ? (
+                  data.door_state === 'open' ? (
+                    <Box>Open</Box>
+                  ) : data.door_state === 'closed' &&
+                    data.door_lock === 'locked' ? (
+                    <Box>Secured</Box>
+                  ) : data.door_state === 'closed' &&
+                    data.door_lock === 'unlocked' ? (
+                    <Box>Unsecured</Box>
+                  ) : (
+                    <Box>Error</Box>
+                  )
+                ) : data.docking_status === 'undocking' ? (
+                  data.door_state === 'open' ? (
+                    <Box>Open</Box>
+                  ) : data.door_state === 'closed' &&
+                    data.door_lock === 'locked' ? (
+                    <Box>Secured</Box>
+                  ) : data.door_state === 'closed' &&
+                    data.door_lock === 'unlocked' ? (
+                    <Box>Unsecured</Box>
+                  ) : (
+                    <Box>Error</Box>
+                  )
+                ) : data.docking_status === 'undocked' ? (
+                  data.door_state === 'open' ? (
+                    <Box>Open</Box>
+                  ) : data.door_state === 'closed' &&
+                    data.door_lock === 'locked' ? (
+                    <Box>Secured</Box>
+                  ) : data.door_state === 'closed' &&
+                    data.door_lock === 'unlocked' ? (
+                    <Box>Unsecured</Box>
+                  ) : (
+                    <Box>Error</Box>
+                  )
+                ) : (
+                  <Box>Error</Box>
+                )}
+              </LabeledList.Item>
+            </LabeledList>
+          </Box>
+        </Section>
+        <Section title="Controls">
+          <Box>
+            <Button
+              content="Force Exterior Door"
+              icon="circle-exclamation"
+              disabled={!data.override_enabled}
+              color={data.override_enabled ? 'red' : null}
+              onClick={() => act('command', { command: 'force_door' })}
+            />
+            <Button
+              content="Override"
+              icon="triangle-exclamation"
+              color={data.override_enabled ? 'red' : 'yellow'}
+              onClick={() => act('command', { command: 'toggle_override' })}
+            />
+          </Box>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};