diff --git a/code/modules/overmap/ships/computers/shuttle.dm b/code/modules/overmap/ships/computers/shuttle.dm
index 7e787fb4a65..bf6d93d45cf 100644
--- a/code/modules/overmap/ships/computers/shuttle.dm
+++ b/code/modules/overmap/ships/computers/shuttle.dm
@@ -1,7 +1,7 @@
 //Shuttle controller computer for shuttles going between sectors
 /obj/machinery/computer/shuttle_control/explore
 	name = "general shuttle control console"
-	ui_template = "shuttle_control_console_exploration.tmpl"
+	ui_template = "ShuttleControlConsoleMultiExplore"
 	var/obj/effect/overmap/visitable/ship/connected //Ship we're connected to
 
 /obj/machinery/computer/shuttle_control/explore/Initialize()
@@ -21,8 +21,10 @@
 		LAZYREMOVE(connected.consoles, src)
 	. = ..()
 
-/obj/machinery/computer/shuttle_control/explore/get_ui_data(var/datum/shuttle/autodock/overmap/shuttle)
+/obj/machinery/computer/shuttle_control/explore/ui_data(mob/user)
 	. = ..()
+
+	var/datum/shuttle/autodock/overmap/shuttle = SSshuttle.shuttles[shuttle_tag]
 	if(istype(shuttle))
 		var/total_gas = 0
 		for(var/obj/structure/fuel_port/FP in shuttle.fuel_ports) //loop through fuel ports
@@ -42,18 +44,18 @@
 			"fuel_span" = fuel_span
 		)
 
-/obj/machinery/computer/shuttle_control/explore/handle_topic_href(var/datum/shuttle/autodock/overmap/shuttle, var/list/href_list)
+/obj/machinery/computer/shuttle_control/explore/handle_topic_href(var/mob/user, var/datum/shuttle/autodock/overmap/shuttle, var/action, var/list/params)
 	. = ..()
 	if(. != null)
 		return
 
-	if(href_list["pick"])
+	if(action == "pick")
 		var/list/possible_d = shuttle.get_possible_destinations()
 		var/D
 		if(length(possible_d))
 			D = input("Choose shuttle destination", "Shuttle Destination") as null|anything in possible_d
 		else
-			to_chat(usr,"<span class='warning'>No valid landing sites in range.</span>")
-		if(CanInteract(usr, physical_state) && (D in possible_d))
+			to_chat(usr, SPAN_WARNING("No valid landing sites in range."))
+		if(CanInteract(user, physical_state) && (D in possible_d))
 			shuttle.set_destination(possible_d[D])
-		return TOPIC_REFRESH
+		return TRUE
diff --git a/code/modules/shuttles/shuttle_console.dm b/code/modules/shuttles/shuttle_console.dm
index 6a9cc3aabf0..b99345bdf7f 100644
--- a/code/modules/shuttles/shuttle_console.dm
+++ b/code/modules/shuttles/shuttle_console.dm
@@ -7,7 +7,7 @@
 	var/shuttle_tag      // Used to coordinate data in shuttle controller.
 	var/hacked = FALSE   // Has been emagged, no access restrictions.
 
-	var/ui_template = "shuttle_control_console.tmpl"
+	var/ui_template = "ShuttleControlConsole"
 	var/list/linked_helmets = list()
 	var/can_rename_ship = FALSE
 
@@ -52,26 +52,6 @@
 	if(check_rights(R_ADMIN, 0, user))
 		ui_interact(user)
 
-/obj/machinery/computer/shuttle_control/proc/get_ui_data(var/datum/shuttle/autodock/shuttle)
-	var/shuttle_state
-	switch(shuttle.moving_status)
-		if(SHUTTLE_IDLE) shuttle_state = "idle"
-		if(SHUTTLE_WARMUP) shuttle_state = "warmup"
-		if(SHUTTLE_INTRANSIT) shuttle_state = "in_transit"
-
-	return list(
-		"shuttle_status" = get_shuttle_status(shuttle),
-		"shuttle_state" = shuttle_state,
-		"has_docking" = shuttle.active_docking_controller? 1 : 0,
-		"docking_status" = shuttle.active_docking_controller? shuttle.active_docking_controller.get_docking_status() : null,
-		"docking_override" = shuttle.active_docking_controller? shuttle.active_docking_controller.override_enabled : null,
-		"can_launch" = shuttle.can_launch(),
-		"can_cancel" = shuttle.can_cancel(),
-		"can_force" = shuttle.can_force(),
-		"can_rename_ship" = can_rename_ship,
-		"ship_name" = shuttle.name,
-	)
-
 /obj/machinery/computer/shuttle_control/proc/get_shuttle_status(var/datum/shuttle/autodock/shuttle)
 	switch(shuttle.process_state)
 		if(IDLE_STATE)
@@ -101,50 +81,71 @@
 		return FALSE
 	return TRUE
 
-/obj/machinery/computer/shuttle_control/proc/handle_topic_href(var/datum/shuttle/autodock/shuttle, var/list/href_list, var/user)
-	if(!istype(shuttle))
-		return TOPIC_NOACTION
-
-	if(href_list["move"])
-		if(can_move(shuttle, user))
-			shuttle.launch(src)
-			return TOPIC_REFRESH
-		return TOPIC_HANDLED
-
-	if(href_list["force"])
-		if(can_move(shuttle, user))
-			shuttle.force_launch(src)
-			return TOPIC_REFRESH
-		return TOPIC_HANDLED
-
-	if(href_list["cancel"])
-		shuttle.cancel_launch(src)
-		return TOPIC_REFRESH
-
-	if(href_list["rename"])
-		var/new_name = input(usr, "Select new name for this ship.", "Rename this ship", shuttle.name)
-		if(new_name)
-			shuttle.name = new_name
-		return TOPIC_REFRESH
-
-/obj/machinery/computer/shuttle_control/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
+/obj/machinery/computer/shuttle_control/ui_interact(mob/user, datum/tgui/ui)
 	var/datum/shuttle/autodock/shuttle = SSshuttle.shuttles[shuttle_tag]
-	if (!istype(shuttle))
-		to_chat(user,"<span class='warning'>Unable to establish link with the shuttle.</span>")
+	if(!istype(shuttle))
+		to_chat(user, SPAN_WARNING("Unable to establish link with the shuttle."))
 		return
 
-	var/list/data = get_ui_data(shuttle)
-
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
+	ui = SStgui.try_update_ui(user, src, ui)
 	if(!ui)
-		ui = new(user, src, ui_key, ui_template, "[shuttle_tag] Shuttle Control", 470, 450)
-		ui.set_initial_data(data)
+		ui = new(user, src, ui_template, "[shuttle_tag] Shuttle Control", ui_x=470, ui_y=450)
 		ui.open()
-		ui.set_auto_update(1)
 
-/obj/machinery/computer/shuttle_control/Topic(href, href_list)
-	..()
-	handle_topic_href(SSshuttle.shuttles[shuttle_tag], href_list, usr)
+/obj/machinery/computer/shuttle_control/ui_data(mob/user)
+	var/datum/shuttle/autodock/shuttle = SSshuttle.shuttles[shuttle_tag]
+
+	var/shuttle_state
+	switch(shuttle.moving_status)
+		if(SHUTTLE_IDLE) shuttle_state = "idle"
+		if(SHUTTLE_WARMUP) shuttle_state = "warmup"
+		if(SHUTTLE_INTRANSIT) shuttle_state = "in_transit"
+
+	return list(
+		"shuttle_status" = get_shuttle_status(shuttle),
+		"shuttle_state" = shuttle_state,
+		"has_docking" = shuttle.active_docking_controller? 1 : 0,
+		"docking_status" = shuttle.active_docking_controller? shuttle.active_docking_controller.get_docking_status() : null,
+		"docking_override" = shuttle.active_docking_controller? shuttle.active_docking_controller.override_enabled : null,
+		"can_launch" = shuttle.can_launch(),
+		"can_cancel" = shuttle.can_cancel(),
+		"can_force" = shuttle.can_force(),
+		"can_rename_ship" = can_rename_ship,
+		"ship_name" = shuttle.name,
+	)
+
+/obj/machinery/computer/shuttle_control/ui_act(action, params)
+	. = ..()
+	if(.)
+		return
+
+	return handle_topic_href(usr, SSshuttle.shuttles[shuttle_tag], action, params)
+
+/obj/machinery/computer/shuttle_control/proc/handle_topic_href(var/mob/user, var/datum/shuttle/autodock/shuttle, var/action, var/list/params)
+	if(!istype(shuttle))
+		return FALSE
+
+	if(action == "move")
+		if(can_move(shuttle, user))
+			shuttle.launch(src)
+			return TRUE
+		return FALSE
+
+	if(action == "force")
+		if(can_move(shuttle, user))
+			shuttle.force_launch(src)
+			return TRUE
+		return FALSE
+
+	if(action == "cancel")
+		shuttle.cancel_launch(src)
+		return TRUE
+
+	if(action == "rename")
+		var/new_name = input(user, "Select new name for this ship.", "Rename this ship", shuttle.name)
+		if(new_name)
+			shuttle.name = new_name
+		return TRUE
 
 /obj/machinery/computer/shuttle_control/proc/update_helmets(var/datum/shuttle/autodock/shuttle)
 	var/shuttle_status = get_shuttle_status(shuttle)
diff --git a/code/modules/shuttles/shuttle_console_multi.dm b/code/modules/shuttles/shuttle_console_multi.dm
index 93a9c3c4abe..40ecc8c9999 100644
--- a/code/modules/shuttles/shuttle_console_multi.dm
+++ b/code/modules/shuttles/shuttle_console_multi.dm
@@ -1,39 +1,43 @@
 /obj/machinery/computer/shuttle_control/multi
-	ui_template = "shuttle_control_console_multi.tmpl"
+	ui_template = "ShuttleControlConsoleMulti"
 
-/obj/machinery/computer/shuttle_control/multi/get_ui_data(var/datum/shuttle/autodock/multi/shuttle)
+/obj/machinery/computer/shuttle_control/multi/ui_data(mob/user)
 	. = ..()
+
+	var/datum/shuttle/autodock/multi/shuttle = SSshuttle.shuttles[shuttle_tag]
 	if(istype(shuttle))
 		. += list(
 			"destination_name" = shuttle.next_location? shuttle.next_location.name : "No destination set.",
 			"can_pick" = shuttle.moving_status == SHUTTLE_IDLE,
 		)
 
-/obj/machinery/computer/shuttle_control/multi/handle_topic_href(var/datum/shuttle/autodock/multi/shuttle, var/list/href_list)
-	..()
-
-	if(href_list["pick"])
-		var/dest_key = input("Choose shuttle destination", "Shuttle Destination") as null|anything in shuttle.get_destinations()
+/obj/machinery/computer/shuttle_control/multi/handle_topic_href(var/mob/user, var/datum/shuttle/autodock/multi/shuttle, var/action, var/list/params)
+	if(action == "pick")
+		var/dest_key = input(user, "Choose shuttle destination", "Shuttle Destination") as null|anything in shuttle.get_destinations()
 		if(dest_key && (!use_check(usr) || (isobserver(usr) && check_rights(R_ADMIN, FALSE))))
 			shuttle.set_destination(dest_key, usr)
-		return TOPIC_REFRESH
+		return TRUE
+
+	return ..()
 
 /obj/machinery/computer/shuttle_control/multi/antag
-	ui_template = "shuttle_control_console_antag.tmpl"
+	ui_template = "ShuttleControlConsoleMultiAntag"
 
-/obj/machinery/computer/shuttle_control/multi/antag/get_ui_data(var/datum/shuttle/autodock/multi/antag/shuttle)
+/obj/machinery/computer/shuttle_control/multi/antag/ui_data(mob/user)
 	. = ..()
+
+	var/datum/shuttle/autodock/multi/antag/shuttle = SSshuttle.shuttles[shuttle_tag]
 	if(istype(shuttle))
 		. += list(
 			"cloaked" = shuttle.cloaked,
 		)
 
-/obj/machinery/computer/shuttle_control/multi/antag/handle_topic_href(var/datum/shuttle/autodock/multi/antag/shuttle, var/list/href_list)
-	..()
-
-	if(href_list["toggle_cloaked"])
+/obj/machinery/computer/shuttle_control/multi/antag/handle_topic_href(var/mob/user, var/datum/shuttle/autodock/multi/antag/shuttle, var/action, var/list/params)
+	if(action == "toggle_cloaked")
 		shuttle.cloaked = !shuttle.cloaked
-		return TOPIC_REFRESH
+		return TRUE
+
+	return ..()
 
 /obj/machinery/computer/shuttle_control/multi/can_move(var/datum/shuttle/autodock/shuttle, var/user)
 	if(istype(shuttle, /datum/shuttle/autodock/multi/antag))
diff --git a/code/modules/shuttles/shuttle_console_multi_lift.dm b/code/modules/shuttles/shuttle_console_multi_lift.dm
index 2b193141059..89ff63185fa 100644
--- a/code/modules/shuttles/shuttle_console_multi_lift.dm
+++ b/code/modules/shuttles/shuttle_console_multi_lift.dm
@@ -5,40 +5,40 @@
 	icon_screen = null
 	density = FALSE
 	req_access = null
-	ui_template = "shuttle_control_console_multi_lift.tmpl"
+	ui_template = "ShuttleControlConsoleMultiLift"
 
 /obj/machinery/computer/shuttle_control/multi/lift/wall
 	icon_state = "lift_wall"
 
-/obj/machinery/computer/shuttle_control/multi/lift/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
+/obj/machinery/computer/shuttle_control/multi/lift/ui_interact(mob/user, datum/tgui/ui)
 	var/datum/shuttle/autodock/multi/lift/shuttle = SSshuttle.shuttles[shuttle_tag]
 	if(!istype(shuttle))
 		to_chat(user, SPAN_WARNING("Unable to establish link with the shuttle."))
 		return
 
-	var/list/data = get_ui_data(shuttle)
-
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
+	ui = SStgui.try_update_ui(user, src, ui)
 	if(!ui)
-		ui = new(user, src, ui_key, ui_template, "[shuttle_tag] Control", 470, 300)
-		ui.set_initial_data(data)
+		ui = new(user, src, ui_template, "[shuttle_tag] Control", ui_x=470, ui_y=300)
 		ui.open()
-		ui.set_auto_update(TRUE)
 
-/obj/machinery/computer/shuttle_control/multi/lift/get_ui_data(var/datum/shuttle/autodock/multi/lift/shuttle)
+/obj/machinery/computer/shuttle_control/multi/lift/ui_data(mob/user)
 	. = ..()
+
+	var/datum/shuttle/autodock/multi/lift/shuttle = SSshuttle.shuttles[shuttle_tag]
 	if(istype(shuttle))
 		var/list/destination_keys = list()
-		for(var/key in shuttle.destinations_cache)
+		for(var/key in shuttle.get_destinations())
 			destination_keys.Add(key)
 		. += list(
 			"destinations" = destination_keys,
 		)
 
-/obj/machinery/computer/shuttle_control/multi/handle_topic_href(var/datum/shuttle/autodock/multi/lift/shuttle, var/list/href_list)
-	if(href_list["pick"] && href_list["destination"])
-		shuttle.set_destination(href_list["destination"], usr)
-		return TOPIC_REFRESH
-	if(href_list["cancel"])
+/obj/machinery/computer/shuttle_control/multi/lift/handle_topic_href(var/mob/user, var/datum/shuttle/autodock/multi/lift/shuttle, var/action, var/list/params)
+	if(action == "pick")
+		shuttle.set_destination(params["destination"], usr)
+		return TRUE
+
+	if(action == "cancel")
 		shuttle.final_location = null // no return so parent can handle it
-	..()
+
+	return ..()
diff --git a/code/modules/shuttles/shuttle_emergency.dm b/code/modules/shuttles/shuttle_emergency.dm
index 30c86ecbc00..04f1122a599 100644
--- a/code/modules/shuttles/shuttle_emergency.dm
+++ b/code/modules/shuttles/shuttle_emergency.dm
@@ -14,7 +14,7 @@
 
 /datum/shuttle/autodock/ferry/emergency/arrived()
 	. = ..()
-	
+
 	if(!emergency_controller.has_evacuated())
 		emergency_controller.finish_preparing_evac()
 
@@ -62,7 +62,7 @@
 
 		// If the emergency shuttle is waiting to leave the station and the world time exceeded the force time
 		if(evacuation_controller.is_prepared() && (world.time > emergency_controller.force_time))
-			return 0 
+			return 0
 
 	return ..()
 
@@ -176,8 +176,18 @@
 	read_authorization(W)
 	..()
 
-/obj/machinery/computer/shuttle_control/emergency/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	var/data[0]
+/obj/machinery/computer/shuttle_control/emergency/ui_interact(mob/user, datum/tgui/ui)
+	var/datum/shuttle/autodock/ferry/emergency/shuttle = SSshuttle.shuttles[shuttle_tag]
+	if(!istype(shuttle))
+		to_chat(user, SPAN_WARNING("Unable to establish link with the shuttle."))
+		return
+
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "EscapeShuttleControlConsole", "Escape Shuttle Control", ui_x=470, ui_y=420)
+		ui.open()
+
+/obj/machinery/computer/shuttle_control/emergency/ui_data(mob/user)
 	var/datum/shuttle/autodock/ferry/emergency/shuttle = SSshuttle.shuttles[shuttle_tag]
 	if (!istype(shuttle))
 		return
@@ -221,7 +231,7 @@
 
 	var/has_auth = has_authorization()
 
-	data = list(
+	return list(
 		"shuttle_status" = shuttle_status,
 		"shuttle_state" = shuttle_state,
 		"has_docking" = shuttle.active_docking_controller? 1 : 0,
@@ -231,27 +241,19 @@
 		"can_cancel" = shuttle.can_cancel(src),
 		"can_force" = shuttle.can_force(src),
 		"auth_list" = auth_list,
-		"has_auth" = has_auth,
-		"user" = debug? user : null
+		"has_auth" = has_auth
 	)
 
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
+/obj/machinery/computer/shuttle_control/emergency/ui_act(action, params)
+	. = ..()
+	if(.)
+		return
 
-	if (!ui)
-		ui = new(user, src, ui_key, "escape_shuttle_control_console.tmpl", "Shuttle Control", 470, 420)
-		ui.set_initial_data(data)
-		ui.open()
-		ui.set_auto_update(1)
-
-/obj/machinery/computer/shuttle_control/emergency/Topic(href, href_list)
-	if(..())
-		return 1
-
-	if(href_list["removeid"])
-		var/dna_hash = href_list["removeid"]
+	if(action == "removeid")
+		var/dna_hash = params["removeid"]
 		authorized -= dna_hash
 
-	if(!emagged && href_list["scanid"])
+	if(!emagged && action == "scanid")
 		//They selected an empty entry. Try to scan their id.
 		if (ishuman(usr))
 			var/mob/living/carbon/human/H = usr
diff --git a/code/modules/shuttles/shuttle_lift.dm b/code/modules/shuttles/shuttle_lift.dm
index 04c7d5ff7ff..12763cba299 100644
--- a/code/modules/shuttles/shuttle_lift.dm
+++ b/code/modules/shuttles/shuttle_lift.dm
@@ -58,7 +58,7 @@
 
 /obj/machinery/computer/shuttle_control/lift
 	name = "lift controller"
-	ui_template = "shuttle_control_console_lift.tmpl"
+	ui_template = "ShuttleControlConsoleLift"
 	icon = 'icons/obj/computer.dmi'
 	icon_state = "lift"
 	icon_screen = null
diff --git a/html/changelogs/geeves-shuttle_tgui.yml b/html/changelogs/geeves-shuttle_tgui.yml
new file mode 100644
index 00000000000..d7030203aad
--- /dev/null
+++ b/html/changelogs/geeves-shuttle_tgui.yml
@@ -0,0 +1,6 @@
+author: Geeves
+
+delete-after: True
+
+changes:
+  - rscadd: "Converted shuttle UIs to TGUI."
diff --git a/nano/templates/escape_shuttle_control_console.tmpl b/nano/templates/escape_shuttle_control_console.tmpl
deleted file mode 100644
index f3331313ad0..00000000000
--- a/nano/templates/escape_shuttle_control_console.tmpl
+++ /dev/null
@@ -1,84 +0,0 @@
-<h3>Shuttle Status</h3>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		{{:data.shuttle_status}}
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Bluespace Drive:
-		</div>
-		<div class="itemContent">
-			{{if data.shuttle_state == "idle"}}
-				<span class="idle">IDLE</span>
-			{{else data.shuttle_state == "warmup"}}
-				<span style="font-weight: bold;color: #336699">SPINNING UP</span>
-			{{else data.shuttle_state == "in_transit"}}
-				<span style="font-weight: bold;color: #336699">ENGAGED</span>
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-{{if data.has_docking}}
-	<div class="item" style="padding-top: 10px">
-		<div class="item">
-			<div class="itemLabel">
-				Docking Status:
-			</div>
-			<div class="itemContent">
-				{{if data.docking_status == "docked"}}
-					<span class="good">DOCKED</span>
-				{{else data.docking_status == "docking"}}
-					{{if !data.docking_override}}
-						<span class="average">DOCKING</span>
-					{{else}}
-						<span class="average">DOCKING-MANUAL</span>
-					{{/if}}
-				{{else data.docking_status == "undocking"}}
-					{{if !data.docking_override}}
-						<span class="average">UNDOCKING</span>
-					{{else}}
-						<span class="average">UNDOCKING-MANUAL</span>
-					{{/if}}
-				{{else data.docking_status == "undocked"}}
-					<span class="idle">UNDOCKED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			</div>
-		</div>
-	</div>
-{{/if}}
-<h3>Shuttle Authorization</h3>
-<div class="item">
-	<div class="item">
-		{{if data.has_auth}}
-			Access Granted. Shuttle controls unlocked.
-		{{else}}
-			Additional authorization required.
-		{{/if}}
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	{{for data.auth_list}}
-		{{if value.auth_hash}}
-			{{:helper.link(value.auth_name, 'eject', {'removeid' : value.auth_hash}, null, 'itemContentWide')}}
-		{{else}}
-			{{:helper.link("", 'eject', {'scanid' : 1}, null, 'itemContentWide')}}
-		{{/if}}
-	{{/for}}
-</div>
-
-<h3>Shuttle Control</h3>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemContent" style="padding-top: 2px; width: 100%">
-			{{:helper.link('Launch Shuttle', 'arrowthickstop-1-e', {'move' : '1'}, data.can_launch ? null : 'disabled' , null)}}
-			{{:helper.link('Cancel Launch', 'cancel', {'cancel' : '1'}, data.can_cancel ? null : 'disabled' , null)}}
-			{{:helper.link('Force Launch', 'alert', {'force' : '1'}, data.can_force ? null : 'disabled' , data.can_force ? 'redButton' : null)}}
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/nano/templates/shuttle_control_console.tmpl b/nano/templates/shuttle_control_console.tmpl
deleted file mode 100644
index fee9acb453b..00000000000
--- a/nano/templates/shuttle_control_console.tmpl
+++ /dev/null
@@ -1,72 +0,0 @@
-<h3>Shuttle Status</h3>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		{{:data.shuttle_status}}
-	</div>
-  <div class="item">
-		Ship designation and name: {{:data.ship_name}}
-    {{if data.can_rename_ship}}
-      {{:helper.link('Rename', null, {'rename' : '1'}, null , null)}}
-    {{/if}}
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Engines:
-		</div>
-		<div class="itemContent">
-			{{if data.shuttle_state == "idle"}}
-				<span class="idle">IDLE</span>
-			{{else data.shuttle_state == "warmup"}}
-				<span style="font-weight: bold;color: #336699">STARTING IGNITION</span>
-			{{else data.shuttle_state == "in_transit"}}
-				<span style="font-weight: bold;color: #336699">ENGAGED</span>
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-{{if data.has_docking}}
-	<div class="item" style="padding-top: 10px">
-		<div class="item">
-			<div class="itemLabel">
-				Docking Status:
-			</div>
-			<div class="itemContent">
-				{{if data.docking_status == "docked"}}
-					<span class="good">DOCKED</span>
-				{{else data.docking_status == "docking"}}
-					{{if !data.docking_override}}
-						<span class="average">DOCKING</span>
-					{{else}}
-						<span class="average">DOCKING-MANUAL</span>
-					{{/if}}
-				{{else data.docking_status == "undocking"}}
-					{{if !data.docking_override}}
-						<span class="average">UNDOCKING</span>
-					{{else}}
-						<span class="average">UNDOCKING-MANUAL</span>
-					{{/if}}
-				{{else data.docking_status == "undocked"}}
-					<span class="idle">UNDOCKED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-
-			</div>
-		</div>
-	</div>
-{{/if}}
-
-<h3>Shuttle Control</h3>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemContent" style="padding-top: 2px; width: 100%">
-			{{:helper.link('Launch Shuttle', 'arrowthickstop-1-e', {'move' : '1'}, data.can_launch? null : 'disabled' , null)}}
-			{{:helper.link('Cancel Launch', 'cancel', {'cancel' : '1'}, data.can_cancel ? null : 'disabled' , null)}}
-			{{:helper.link('Force Launch', 'alert', {'force' : '1'}, data.can_force? null : 'disabled' , data.can_force ? 'redButton' : null)}}
-		</div>
-	</div>
-</div>
diff --git a/nano/templates/shuttle_control_console_antag.tmpl b/nano/templates/shuttle_control_console_antag.tmpl
deleted file mode 100644
index b0580d594a1..00000000000
--- a/nano/templates/shuttle_control_console_antag.tmpl
+++ /dev/null
@@ -1,82 +0,0 @@
-<h3>Shuttle Status</h3>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		{{:data.shuttle_status}}
-	</div>
-  <div class="item">
-		Ship designation and name: {{:data.ship_name}}
-    {{if data.can_rename_ship}}
-      {{:helper.link('Rename', null, {'rename' : '1'}, null , null)}}
-    {{/if}}
-	</div>
-	<div class="item">
-		Cloaking field is {{:data.cloaked ? "enabled" : "disabled" }}. {{:helper.link('Toggle', 'arrowreturn-1-s', {'toggle_cloaked' : '1'}) }}
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Drive:
-		</div>
-		<div class="itemContent">
-			{{if data.shuttle_state == "idle"}}
-				<span class="idle">IDLE</span>
-			{{else data.shuttle_state == "warmup"}}
-				<span style="font-weight: bold;color: #336699">SPINNING UP</span>
-			{{else data.shuttle_state == "in_transit"}}
-				<span style="font-weight: bold;color: #336699">ENGAGED</span>
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-{{if data.has_docking}}
-	<div class="item" style="padding-top: 10px">
-		<div class="item">
-			<div class="itemLabel">
-				Docking Status:
-			</div>
-			<div class="itemContent">
-				{{if data.docking_status == "docked"}}
-					<span class="good">DOCKED</span>
-				{{else data.docking_status == "docking"}}
-					{{if !data.docking_override}}
-						<span class="average">DOCKING</span>
-					{{else}}
-						<span class="average">DOCKING-MANUAL</span>
-					{{/if}}
-				{{else data.docking_status == "undocking"}}
-					{{if !data.docking_override}}
-						<span class="average">UNDOCKING</span>
-					{{else}}
-						<span class="average">UNDOCKING-MANUAL</span>
-					{{/if}}
-				{{else data.docking_status == "undocked"}}
-					<span class="idle">UNDOCKED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			</div>
-		</div>
-	</div>
-{{/if}}
-<div class="item" style="padding-top: 10px">
-	<div class="itemLabel">
-	    Current Destination:
-	</div>
-	<span class="average">{{:data.destination_name}}</span>
-	<div class="item">
-		{{:helper.link('Choose Destination', 'arrowreturn-1-s', {'pick' : '1'}, data.can_pick ? null : 'disabled' , null)}}
-	</div>
-</div>
-<h3>Shuttle Control</h3>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemContent" style="padding-top: 2px; width: 100%">
-			{{:helper.link('Launch Shuttle', 'arrowthickstop-1-e', {'move' : '1'}, data.can_launch ? null : 'disabled' , null)}}
-			{{:helper.link('Cancel Launch', 'cancel', {'cancel' : '1'}, data.can_cancel ? null : 'disabled' , null)}}
-			{{:helper.link('Force Launch', 'alert', {'force' : '1'}, data.can_force ? null : 'disabled' , data.can_force ? 'redButton' : null)}}
-		</div>
-	</div>
-</div>
diff --git a/nano/templates/shuttle_control_console_exploration.tmpl b/nano/templates/shuttle_control_console_exploration.tmpl
deleted file mode 100644
index 2b0596e4f55..00000000000
--- a/nano/templates/shuttle_control_console_exploration.tmpl
+++ /dev/null
@@ -1,89 +0,0 @@
-<h3>Shuttle Status</h3>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		{{:data.shuttle_status}}
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Engines:
-		</div>
-		<div class="itemContent">
-			{{if data.shuttle_state == "idle"}}
-				<span class="idle">IDLE</span>
-			{{else data.shuttle_state == "warmup"}}
-				<span style="font-weight: bold;color: #336699">STARTING IGNITION</span>
-			{{else data.shuttle_state == "in_transit"}}
-				<span style="font-weight: bold;color: #336699">ENGAGED</span>
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-{{if data.has_docking}}
-	<div class="item" style="padding-top: 10px">
-		<div class="item">
-			<div class="itemLabel">
-				Docking Status:
-			</div>
-			<div class="itemContent">
-				{{if data.docking_status == "docked"}}
-					<span class="good">DOCKED</span>
-				{{else data.docking_status == "docking"}}
-					{{if !data.docking_override}}
-						<span class="average">DOCKING</span>
-					{{else}}
-						<span class="average">DOCKING-MANUAL</span>
-					{{/if}}
-				{{else data.docking_status == "undocking"}}
-					{{if !data.docking_override}}
-						<span class="average">UNDOCKING</span>
-					{{else}}
-						<span class="average">UNDOCKING-MANUAL</span>
-					{{/if}}
-				{{else data.docking_status == "undocked"}}
-					<span class="idle">UNDOCKED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			</div>
-		</div>
-	</div>
-{{/if}}
-<div class="item" style="padding-top: 10px">
-	<div class="itemLabel">
-		Current Destination:
-	</div>
-	<span class="average">{{:data.destination_name}}</span>
-	<div class="item">
-		{{:helper.link('Choose Destination', 'arrowreturn-1-s', {'pick' : '1'}, data.can_pick ? null : 'disabled' , null)}}
-	</div>
-</div>
-{{if data.fuel_usage}}
-	<div class="item" style="padding-top: 10px">
-		<div class="itemLabel">
-			Est. Delta-V Budget:
-		</div>
-		<div class="itemContent">
-			<span class='{{:data.fuel_span}}'>{{:data.remaining_fuel}} m/s</span>
-		</div>
-		<div class="itemLabel">
-			Avg. Delta-V Per Maneuver:
-		</div>
-		<div class="itemContent">
-			 {{:data.fuel_usage}} m/s
-		</div>
-	</div>
-{{/if}}
-<h3>Shuttle Control</h3>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemContent" style="padding-top: 2px; width: 100%">
-			{{:helper.link('Launch Shuttle', 'arrowthickstop-1-e', {'move' : '1'}, data.can_launch ? null : 'disabled' , null)}}
-			{{:helper.link('Cancel Launch', 'cancel', {'cancel' : '1'}, data.can_cancel ? null : 'disabled' , null)}}
-			{{:helper.link('Force Launch', 'alert', {'force' : '1'}, data.can_force ? null : 'disabled' , data.can_force ? 'redButton' : null)}}
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/nano/templates/shuttle_control_console_lift.tmpl b/nano/templates/shuttle_control_console_lift.tmpl
deleted file mode 100644
index f3e809d57d2..00000000000
--- a/nano/templates/shuttle_control_console_lift.tmpl
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Lift status:
-		</div>
-		<div class="itemContent">
-			{{if data.shuttle_state == "idle"}}
-				<span class="idle">IDLE</span>
-			{{else data.shuttle_state == "warmup"}}
-				<span style="font-weight: bold;color: #336699">SPINNING UP</span>
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-
-<h3>Lift Controls</h3>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemContent" style="padding-top: 2px; width: 100%">
-			{{:helper.link('Move Lift', 'arrowthickstop-1-e', {'move' : '1'}, data.can_launch? null : 'disabled' , null)}}
-			{{:helper.link('Stop Lift', 'cancel', {'cancel' : '1'}, data.can_cancel ? null : 'disabled' , null)}}
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/nano/templates/shuttle_control_console_multi.tmpl b/nano/templates/shuttle_control_console_multi.tmpl
deleted file mode 100644
index 8249ba71768..00000000000
--- a/nano/templates/shuttle_control_console_multi.tmpl
+++ /dev/null
@@ -1,79 +0,0 @@
-<h3>Shuttle Status</h3>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		{{:data.shuttle_status}}
-	</div>
-  <div class="item">
-		Ship designation and name: {{:data.ship_name}}
-    {{if data.can_rename_ship}}
-      {{:helper.link('Rename', null, {'rename' : '1'}, null , null)}}
-    {{/if}}
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemLabel">
-			Drive:
-		</div>
-		<div class="itemContent">
-			{{if data.shuttle_state == "idle"}}
-				<span class="idle">IDLE</span>
-			{{else data.shuttle_state == "warmup"}}
-				<span style="font-weight: bold;color: #336699">SPINNING UP</span>
-			{{else data.shuttle_state == "in_transit"}}
-				<span style="font-weight: bold;color: #336699">ENGAGED</span>
-			{{else}}
-				<span class="bad">ERROR</span>
-			{{/if}}
-		</div>
-	</div>
-</div>
-{{if data.has_docking}}
-	<div class="item" style="padding-top: 10px">
-		<div class="item">
-			<div class="itemLabel">
-				Docking Status:
-			</div>
-			<div class="itemContent">
-				{{if data.docking_status == "docked"}}
-					<span class="good">DOCKED</span>
-				{{else data.docking_status == "docking"}}
-					{{if !data.docking_override}}
-						<span class="average">DOCKING</span>
-					{{else}}
-						<span class="average">DOCKING-MANUAL</span>
-					{{/if}}
-				{{else data.docking_status == "undocking"}}
-					{{if !data.docking_override}}
-						<span class="average">UNDOCKING</span>
-					{{else}}
-						<span class="average">UNDOCKING-MANUAL</span>
-					{{/if}}
-				{{else data.docking_status == "undocked"}}
-					<span class="idle">UNDOCKED</span>
-				{{else}}
-					<span class="bad">ERROR</span>
-				{{/if}}
-			</div>
-		</div>
-	</div>
-{{/if}}
-<div class="item" style="padding-top: 10px">
-	<div class="itemLabel">
-	    Current Destination:
-	</div>
-	<span class="average">{{:data.destination_name}}</span>
-	<div class="item">
-		{{:helper.link('Choose Destination', 'arrowreturn-1-s', {'pick' : '1'}, data.can_pick ? null : 'disabled' , null)}}
-	</div>
-</div>
-<h3>Shuttle Control</h3>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemContent" style="padding-top: 2px; width: 100%">
-			{{:helper.link('Launch Shuttle', 'arrowthickstop-1-e', {'move' : '1'}, data.can_launch ? null : 'disabled' , null)}}
-			{{:helper.link('Cancel Launch', 'cancel', {'cancel' : '1'}, data.can_cancel ? null : 'disabled' , null)}}
-			{{:helper.link('Force Launch', 'alert', {'force' : '1'}, data.can_force ? null : 'disabled' , data.can_force ? 'redButton' : null)}}
-		</div>
-	</div>
-</div>
diff --git a/nano/templates/shuttle_control_console_multi_lift.tmpl b/nano/templates/shuttle_control_console_multi_lift.tmpl
deleted file mode 100644
index 8ff479563a8..00000000000
--- a/nano/templates/shuttle_control_console_multi_lift.tmpl
+++ /dev/null
@@ -1,24 +0,0 @@
-<h3>Lift panel</h3>
-<div class="item" style="padding-top: 10px">
-  <div class="item">
-    {{:data.shuttle_status}}
-  </div>
-	<div class="itemLabel">
-	    Current Destination:
-	</div>
-	<span class="average">{{:data.destination_name}}</span>
-	<div class="item">
-    {{for data.destinations}}
-      {{:helper.link(value, null, {'pick' : '1', 'destination' : value}, data.can_pick ? null : 'disabled' , null)}}
-    {{empty}}
-    	{{:helper.link('Choose Destination', 'arrowreturn-1-s', {'pick' : '1'}, data.can_pick ? null : 'disabled' , null)}}
-    {{/for}}
-	</div>
-</div>
-<div class="item" style="padding-top: 10px">
-	<div class="item">
-		<div class="itemContent" style="padding-top: 2px; width: 100%">
-			{{:helper.link('Emergency Stop', 'cancel', {'cancel' : '1'}, data.can_cancel ? null : 'disabled' , null)}}
-		</div>
-	</div>
-</div>
diff --git a/tgui/packages/tgui/interfaces/EscapeShuttleControlConsole.tsx b/tgui/packages/tgui/interfaces/EscapeShuttleControlConsole.tsx
new file mode 100644
index 00000000000..5e263a3eb34
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/EscapeShuttleControlConsole.tsx
@@ -0,0 +1,104 @@
+import { useBackend } from '../backend';
+import { Button, Section, Box, LabeledList } from '../components';
+import { Window } from '../layouts';
+
+export type AuthData = {
+  auth_name: string;
+  auth_hash: string;
+};
+
+export type EscapeShuttleControlConsoleData = {
+  shuttle_status: string;
+  shuttle_state: string;
+  has_docking: boolean;
+  docking_status: string;
+  docking_override: boolean;
+  can_launch: boolean;
+  can_cancel: boolean;
+  can_force: boolean;
+  auth_list: AuthData[];
+  has_auth: boolean;
+};
+
+export const EscapeShuttleControlConsole = (props, context) => {
+  const { act, data } = useBackend<EscapeShuttleControlConsoleData>(context);
+
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <Section title="Shuttle Status">
+          <Box>{data.shuttle_status}</Box>
+          <Box>
+            <LabeledList>
+              <LabeledList.Item label="Bluespace Drive:">
+                {data.shuttle_state === 'idle'
+                  ? 'Idle'
+                  : data.shuttle_state === 'warmup'
+                    ? 'Spinning Up'
+                    : data.shuttle_state === 'in_transit'
+                      ? 'Engaged'
+                      : 'Error'}
+              </LabeledList.Item>
+              {data.has_docking ? (
+                <LabeledList.Item label="Docking Status:">
+                  {data.docking_status === 'docked'
+                    ? 'Docked'
+                    : data.docking_status === 'docking'
+                      ? data.docking_override
+                        ? 'Docking-Manual'
+                        : 'Docking'
+                      : data.docking_status === 'undocking'
+                        ? data.docking_override
+                          ? 'Undocking-Manual'
+                          : 'Undocking'
+                        : data.docking_status === 'undocked'
+                          ? 'Undocked'
+                          : 'Error'}
+                </LabeledList.Item>
+              ) : null}
+            </LabeledList>
+          </Box>
+        </Section>
+        <Section title="Shuttle Authorization">
+          {data.has_auth ? (
+            <Box>Access Granted. Shuttle controls unlocked.</Box>
+          ) : (
+            <Box>Additional authorization required.</Box>
+          )}
+          {data.auth_list.map((auth) =>
+            auth.auth_hash ? (
+              <Button
+                content={auth.auth_name}
+                icon="eject"
+                onClick={() => act('removeid', { removeid: auth.auth_hash })}
+              />
+            ) : (
+              <Button content="" icon="eject" onClick={() => act('scanid')} />
+            )
+          )}
+        </Section>
+        <Section title="Shuttle Control">
+          <Button
+            content="Launch Shuttle"
+            icon="rocket"
+            disabled={!data.can_launch}
+            onClick={() => act('move')}
+          />
+          <Button
+            content="Cancel Launch"
+            icon="ban"
+            disabled={!data.can_cancel}
+            onClick={() => act('cancel')}
+          />
+          <Button
+            content="Force Launch"
+            icon="triangle-exclamation"
+            color="red"
+            disabled={!data.can_force}
+            onClick={() => act('force')}
+          />
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/ShuttleControlConsole.tsx b/tgui/packages/tgui/interfaces/ShuttleControlConsole.tsx
new file mode 100644
index 00000000000..3429bbbc4e1
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ShuttleControlConsole.tsx
@@ -0,0 +1,91 @@
+import { useBackend } from '../backend';
+import { Button, Section, Box, LabeledList } from '../components';
+import { Window } from '../layouts';
+
+export type ShuttleControlConsoleData = {
+  shuttle_status: string;
+  shuttle_state: string;
+  has_docking: boolean;
+  docking_status: string;
+  docking_override: boolean;
+  can_launch: boolean;
+  can_cancel: boolean;
+  can_force: boolean;
+  can_rename_ship: boolean;
+  ship_name: string;
+};
+
+export const ShuttleControlConsole = (props, context) => {
+  const { act, data } = useBackend<ShuttleControlConsoleData>(context);
+
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <Section title="Shuttle Status">
+          <Box>{data.shuttle_status}</Box>
+          <Box>Ship designation and name: {data.ship_name}</Box>
+          {data.can_rename_ship ? (
+            <Box>
+              <Button
+                content="Rename"
+                icon="pen"
+                onClick={() => act('rename')}
+              />
+            </Box>
+          ) : null}
+          <Box>
+            <LabeledList>
+              <LabeledList.Item label="Engines">
+                {data.shuttle_state === 'idle'
+                  ? 'Idle'
+                  : data.shuttle_state === 'warmup'
+                    ? 'Starting Ignition'
+                    : data.shuttle_state === 'in_transit'
+                      ? 'Engaged'
+                      : 'Error'}
+              </LabeledList.Item>
+              {data.has_docking ? (
+                <LabeledList.Item label="Docking Status">
+                  {data.docking_status === 'docked'
+                    ? 'Docked'
+                    : data.docking_status === 'docking'
+                      ? data.docking_override
+                        ? 'Docking-Manual'
+                        : 'Docking'
+                      : data.docking_status === 'undocking'
+                        ? data.docking_override
+                          ? 'Undocking-Manual'
+                          : 'Undocking'
+                        : data.docking_status === 'undocked'
+                          ? 'Undocked'
+                          : 'Error'}
+                </LabeledList.Item>
+              ) : null}
+            </LabeledList>
+          </Box>
+        </Section>
+        <Section title="Shuttle Control">
+          <Button
+            content="Launch Shuttle"
+            icon="rocket"
+            disabled={!data.can_launch}
+            onClick={() => act('move')}
+          />
+          <Button
+            content="Cancel Launch"
+            icon="ban"
+            disabled={!data.can_cancel}
+            onClick={() => act('cancel')}
+          />
+          <Button
+            content="Force Launch"
+            icon="triangle-exclamation"
+            color="red"
+            disabled={!data.can_force}
+            onClick={() => act('force')}
+          />
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/ShuttleControlConsoleLift.tsx b/tgui/packages/tgui/interfaces/ShuttleControlConsoleLift.tsx
new file mode 100644
index 00000000000..c596bac8333
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ShuttleControlConsoleLift.tsx
@@ -0,0 +1,54 @@
+import { useBackend } from '../backend';
+import { Button, Section, LabeledList } from '../components';
+import { Window } from '../layouts';
+
+export type ShuttleControlConsoleLiftData = {
+  shuttle_status: string;
+  shuttle_state: string;
+  has_docking: boolean;
+  docking_status: string;
+  docking_override: boolean;
+  can_launch: boolean;
+  can_cancel: boolean;
+  can_force: boolean;
+  can_rename_ship: boolean;
+  ship_name: string;
+};
+
+export const ShuttleControlConsoleLift = (props, context) => {
+  const { act, data } = useBackend<ShuttleControlConsoleLiftData>(context);
+
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <Section title="Lift Status">
+          <LabeledList>
+            <LabeledList.Item label="Status">
+              {data.shuttle_state === 'idle'
+                ? 'Idle'
+                : data.shuttle_state === 'warmup'
+                  ? 'Spinning up'
+                  : data.shuttle_state === 'in_transit'
+                    ? 'Moving'
+                    : 'Error'}
+            </LabeledList.Item>
+          </LabeledList>
+        </Section>
+        <Section title="Lift Controls">
+          <Button
+            content="Move Lift"
+            icon="elevator"
+            disabled={!data.can_launch}
+            onClick={() => act('move')}
+          />
+          <Button
+            content="Stop Lift"
+            icon="ban"
+            disabled={!data.can_cancel}
+            onClick={() => act('cancel')}
+          />
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/ShuttleControlConsoleMulti.tsx b/tgui/packages/tgui/interfaces/ShuttleControlConsoleMulti.tsx
new file mode 100644
index 00000000000..66bc7f1a413
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ShuttleControlConsoleMulti.tsx
@@ -0,0 +1,108 @@
+import { useBackend } from '../backend';
+import { Button, Section, Box, LabeledList } from '../components';
+import { Window } from '../layouts';
+
+export type ShuttleControlConsoleMultiData = {
+  shuttle_status: string;
+  shuttle_state: string;
+  has_docking: boolean;
+  docking_status: string;
+  docking_override: boolean;
+  can_launch: boolean;
+  can_cancel: boolean;
+  can_force: boolean;
+  can_rename_ship: boolean;
+  can_pick: boolean;
+  ship_name: string;
+  destination_name: string;
+};
+
+export const ShuttleControlConsoleMulti = (props, context) => {
+  const { act, data } = useBackend<ShuttleControlConsoleMultiData>(context);
+
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <Section title="Shuttle Status">
+          <Box pb={2}>{data.shuttle_status}</Box>
+          <Box pb={1}>Ship designation and name: {data.ship_name}</Box>
+          {data.can_rename_ship ? (
+            <Box pb={2}>
+              <Button
+                content="Rename"
+                icon="pen"
+                onClick={() => act('rename')}
+              />
+            </Box>
+          ) : null}
+          <Box>
+            <LabeledList>
+              <LabeledList.Item label="Drive">
+                {data.shuttle_state === 'idle'
+                  ? 'Idle'
+                  : data.shuttle_state === 'warmup'
+                    ? 'Spinning up'
+                    : data.shuttle_state === 'in_transit'
+                      ? 'Engaged'
+                      : 'Error'}
+              </LabeledList.Item>
+              {data.has_docking ? (
+                <LabeledList.Item label="Docking Status">
+                  {data.docking_status === 'docked'
+                    ? 'Docked'
+                    : data.docking_status === 'docking'
+                      ? data.docking_override
+                        ? 'Docking-Manual'
+                        : 'Docking'
+                      : data.docking_status === 'undocking'
+                        ? data.docking_override
+                          ? 'Undocking-Manual'
+                          : 'Undocking'
+                        : data.docking_status === 'undocked'
+                          ? 'Undocked'
+                          : 'Error'}
+                </LabeledList.Item>
+              ) : null}
+            </LabeledList>
+          </Box>
+        </Section>
+        <Section title="Destination Control">
+          <Box pb={1}>
+            <LabeledList>
+              <LabeledList.Item label="Current Destination">
+                {data.destination_name}
+              </LabeledList.Item>
+            </LabeledList>
+          </Box>
+          <Button
+            content="Choose Destination"
+            icon="plane-arrival"
+            disabled={!data.can_pick}
+            onClick={() => act('pick')}
+          />
+        </Section>
+        <Section title="Shuttle Control">
+          <Button
+            content="Launch Shuttle"
+            icon="rocket"
+            disabled={!data.can_launch}
+            onClick={() => act('move')}
+          />
+          <Button
+            content="Cancel Launch"
+            icon="ban"
+            disabled={!data.can_cancel}
+            onClick={() => act('cancel')}
+          />
+          <Button
+            content="Force Launch"
+            icon="triangle-exclamation"
+            color="red"
+            disabled={!data.can_force}
+            onClick={() => act('force')}
+          />
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/ShuttleControlConsoleMultiAntag.tsx b/tgui/packages/tgui/interfaces/ShuttleControlConsoleMultiAntag.tsx
new file mode 100644
index 00000000000..93562ca51ed
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ShuttleControlConsoleMultiAntag.tsx
@@ -0,0 +1,120 @@
+import { useBackend } from '../backend';
+import { Button, Section, Box, LabeledList } from '../components';
+import { Window } from '../layouts';
+
+export type ShuttleControlConsoleMultiAntagData = {
+  shuttle_status: string;
+  shuttle_state: string;
+  has_docking: boolean;
+  docking_status: string;
+  docking_override: boolean;
+  can_launch: boolean;
+  can_cancel: boolean;
+  can_force: boolean;
+  can_rename_ship: boolean;
+  can_pick: boolean;
+  cloaked: boolean;
+  ship_name: string;
+  destination_name: string;
+};
+
+export const ShuttleControlConsoleMultiAntag = (props, context) => {
+  const { act, data } =
+    useBackend<ShuttleControlConsoleMultiAntagData>(context);
+
+  return (
+    <Window resizable theme="syndicate">
+      <Window.Content scrollable>
+        <Section title="Shuttle Status">
+          <Box pb={2}>{data.shuttle_status}</Box>
+          <Box pb={1}>Ship designation and name: {data.ship_name}</Box>
+          {data.can_rename_ship ? (
+            <Box pb={2}>
+              <Button
+                content="Rename"
+                icon="pen"
+                onClick={() => act('rename')}
+              />
+            </Box>
+          ) : null}
+          <Box pb={1}>
+            Cloaking field is {data.cloaked ? 'enabled' : 'disabled'}.
+          </Box>
+          <Box pb={2}>
+            <Button
+              content="Toggle"
+              icon={data.cloaked ? 'toggle-on' : 'toggle-off'}
+              onClick={() => act('toggle_cloaked')}
+            />
+          </Box>
+          <Box>
+            <LabeledList>
+              <LabeledList.Item label="Drive">
+                {data.shuttle_state === 'idle'
+                  ? 'Idle'
+                  : data.shuttle_state === 'warmup'
+                    ? 'Spinning up'
+                    : data.shuttle_state === 'in_transit'
+                      ? 'Engaged'
+                      : 'Error'}
+              </LabeledList.Item>
+              {data.has_docking ? (
+                <LabeledList.Item label="Docking Status">
+                  {data.docking_status === 'docked'
+                    ? 'Docked'
+                    : data.docking_status === 'docking'
+                      ? data.docking_override
+                        ? 'Docking-Manual'
+                        : 'Docking'
+                      : data.docking_status === 'undocking'
+                        ? data.docking_override
+                          ? 'Undocking-Manual'
+                          : 'Undocking'
+                        : data.docking_status === 'undocked'
+                          ? 'Undocked'
+                          : 'Error'}
+                </LabeledList.Item>
+              ) : null}
+            </LabeledList>
+          </Box>
+        </Section>
+        <Section title="Destination Control">
+          <Box pb={1}>
+            <LabeledList>
+              <LabeledList.Item label="Current Destination">
+                {data.destination_name}
+              </LabeledList.Item>
+            </LabeledList>
+          </Box>
+          <Button
+            content="Choose Destination"
+            icon="plane-arrival"
+            disabled={!data.can_pick}
+            onClick={() => act('pick')}
+          />
+        </Section>
+        <Section title="Shuttle Control">
+          <Button
+            content="Launch Shuttle"
+            icon="rocket"
+            disabled={!data.can_launch}
+            onClick={() => act('move')}
+          />
+          <Button
+            content="Cancel Launch"
+            icon="ban"
+            disabled={!data.can_cancel}
+            onClick={() => act('cancel')}
+          />
+          <Button
+            content="Force Launch"
+            icon="triangle-exclamation"
+            color="red"
+            disabled={!data.can_force}
+            onClick={() => act('force')}
+          />
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/ShuttleControlConsoleMultiExplore.tsx b/tgui/packages/tgui/interfaces/ShuttleControlConsoleMultiExplore.tsx
new file mode 100644
index 00000000000..e89e90c1187
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ShuttleControlConsoleMultiExplore.tsx
@@ -0,0 +1,114 @@
+import { useBackend } from '../backend';
+import { Button, Section, Box, LabeledList } from '../components';
+import { Window } from '../layouts';
+
+export type ShuttleControlConsoleMultiExploreData = {
+  shuttle_status: string;
+  shuttle_state: string;
+  has_docking: boolean;
+  docking_status: string;
+  docking_override: boolean;
+  can_launch: boolean;
+  can_cancel: boolean;
+  can_force: boolean;
+  can_pick: boolean;
+  destination_name: string;
+  fuel_usage: number;
+  remaining_fuel: number;
+  fuel_span: string;
+};
+
+export const ShuttleControlConsoleMultiExplore = (props, context) => {
+  const { act, data } =
+    useBackend<ShuttleControlConsoleMultiExploreData>(context);
+
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <Section title="Shuttle Status">
+          <Box pb={1}>{data.shuttle_status}</Box>
+          <Box>
+            <LabeledList>
+              <LabeledList.Item label="Engines">
+                {data.shuttle_state === 'idle'
+                  ? 'Idle'
+                  : data.shuttle_state === 'warmup'
+                    ? 'Starting Ignition'
+                    : data.shuttle_state === 'in_transit'
+                      ? 'Engaged'
+                      : 'Error'}
+              </LabeledList.Item>
+              {data.has_docking ? (
+                <LabeledList.Item label="Docking Status">
+                  {data.docking_status === 'docked'
+                    ? 'Docked'
+                    : data.docking_status === 'docking'
+                      ? data.docking_override
+                        ? 'Docking-Manual'
+                        : 'Docking'
+                      : data.docking_status === 'undocking'
+                        ? data.docking_override
+                          ? 'Undocking-Manual'
+                          : 'Undocking'
+                        : data.docking_status === 'undocked'
+                          ? 'Undocked'
+                          : 'Error'}
+                </LabeledList.Item>
+              ) : null}
+            </LabeledList>
+          </Box>
+        </Section>
+        <Section title="Destination Control">
+          <Box pb={1}>
+            <LabeledList>
+              <LabeledList.Item label="Current Destination">
+                {data.destination_name}
+              </LabeledList.Item>
+            </LabeledList>
+          </Box>
+          <Box pb={1}>
+            <Button
+              content="Choose Destination"
+              icon="plane-arrival"
+              disabled={!data.can_pick}
+              onClick={() => act('pick')}
+            />
+          </Box>
+          {data.fuel_usage ? (
+            <Box>
+              <LabeledList>
+                <LabeledList.Item label="Est. Delta-V Budget">
+                  {data.remaining_fuel} m/s
+                </LabeledList.Item>
+                <LabeledList.Item label="Avg. Delta-V Per Maneuver">
+                  {data.fuel_usage} m/s
+                </LabeledList.Item>
+              </LabeledList>
+            </Box>
+          ) : null}
+        </Section>
+        <Section title="Shuttle Control">
+          <Button
+            content="Launch Shuttle"
+            icon="rocket"
+            disabled={!data.can_launch}
+            onClick={() => act('move')}
+          />
+          <Button
+            content="Cancel Launch"
+            icon="ban"
+            disabled={!data.can_cancel}
+            onClick={() => act('cancel')}
+          />
+          <Button
+            content="Force Launch"
+            icon="triangle-exclamation"
+            color="red"
+            disabled={!data.can_force}
+            onClick={() => act('force')}
+          />
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
diff --git a/tgui/packages/tgui/interfaces/ShuttleControlConsoleMultiLift.tsx b/tgui/packages/tgui/interfaces/ShuttleControlConsoleMultiLift.tsx
new file mode 100644
index 00000000000..691da12b8ac
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/ShuttleControlConsoleMultiLift.tsx
@@ -0,0 +1,51 @@
+import { useBackend } from '../backend';
+import { Button, Section, Box, LabeledList } from '../components';
+import { Window } from '../layouts';
+
+export type ShuttleControlConsoleMultiLiftData = {
+  shuttle_status: string;
+  shuttle_state: string;
+  has_docking: boolean;
+  docking_status: string;
+  docking_override: boolean;
+  can_launch: boolean;
+  can_cancel: boolean;
+  can_force: boolean;
+  can_pick: boolean;
+  destination_name: string;
+  destinations: string[];
+};
+
+export const ShuttleControlConsoleMultiLift = (props, context) => {
+  const { act, data } = useBackend<ShuttleControlConsoleMultiLiftData>(context);
+
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <Section title="Lift Panel">
+          <Box pb={2}>{data.shuttle_status}</Box>
+          <LabeledList>
+            {data.destinations.reverse().map((destination) => (
+              <LabeledList.Item label={destination} key={destination}>
+                <Button
+                  content="Go To"
+                  icon="arrow-right-to-bracket"
+                  disabled={!data.can_pick}
+                  onClick={() => act('pick', { destination: destination })}
+                />
+              </LabeledList.Item>
+            ))}
+          </LabeledList>
+          <Box pt={2}>
+            <Button
+              content="STOP"
+              icon="triangle-exclamation"
+              disabled={!data.can_cancel}
+              onClick={() => act('cancel')}
+            />
+          </Box>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};