diff --git a/code/modules/mining/machine_vending.dm b/code/modules/mining/machine_vending.dm
index a29d8c778d6..02240037340 100644
--- a/code/modules/mining/machine_vending.dm
+++ b/code/modules/mining/machine_vending.dm
@@ -117,7 +117,7 @@ var/global/list/minevendor_list = list( //keep in order of price
 			if(!id_turf.Adjacent(loc))
 				scanned_id = null
 				get_user_id(user)
-	interact(user)
+	ui_interact(user)
 
 /obj/machinery/mineral/equipment_vendor/proc/get_user_id(var/mob/user)
 	if(isDrone(user))
@@ -129,46 +129,43 @@ var/global/list/minevendor_list = list( //keep in order of price
 		if(ID)
 			scanned_id = WEAKREF(ID)
 
-/obj/machinery/mineral/equipment_vendor/interact(mob/user)
-	var/dat
-	dat +="<div class='statusDisplay'>"
+/obj/machinery/mineral/equipment_vendor/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "MiningVendor", "Mining Equipment Vendor", ui_x=500, ui_y=500)
+		ui.autoupdate = FALSE
+		ui.open()
+
+/obj/machinery/mineral/equipment_vendor/ui_data(mob/user)
+	var/list/data = list()
 	var/obj/item/card/id/ID = scanned_id?.resolve()
 	if(ID)
-		dat += "You have [ID.mining_points ? ID.mining_points : 0] mining points collected. <A href='?src=\ref[src];choice=eject'>Eject ID.</A><br>"
+		data["hasId"] = TRUE
+		data["miningPoints"] = ID.mining_points ? ID.mining_points : 0
 	else
-		dat += "No ID inserted.  <A href='?src=\ref[src];choice=insert'>Insert ID.</A><br>"
-	dat += "</div>"
-	dat += "<br><b>Equipment point cost list:</b><BR><table border='0' width='300'>"
-	for(var/datum/data/mining_equipment/prize in minevendor_list)
-		if(prize.amount > 0)
-			dat += "<tr><td>[prize.equipment_name]</td><td>[prize.cost]</td><td><A href='?src=\ref[src];purchase=\ref[prize]'>Purchase</A> ([prize.amount])</td></tr>"
-		else if(prize.amount == -1)
-			dat += "<tr><td>[prize.equipment_name]</td><td>[prize.cost]</td><td><A href='?src=\ref[src];purchase=\ref[prize]'>Purchase</A> (No limit.)</td></tr>"
-		else
-			dat += "<tr><td>[prize.equipment_name]</td><td>(Out of stock!)</td></tr>"
-	dat += "</table>"
+		data["hasId"] = FALSE
+	var/list/prize_list = list()
+	for(var/datum/data/mining_equipment/prize as anything in minevendor_list)
+		prize_list += list(list("name" = prize.equipment_name, "cost" = prize.cost, "stock" = prize.amount, "ref" = "\ref[prize]"))
+	data["prizeList"] = prize_list
+	return data
 
-	var/datum/browser/popup = new(user, "miningvendor", "Mining Equipment Vendor", 400, 350)
-	popup.set_content(dat)
-	popup.open()
-	return
-
-/obj/machinery/mineral/equipment_vendor/Topic(href, href_list)
-	if(..())
+/obj/machinery/mineral/equipment_vendor/ui_act(action, params)
+	. = ..()
+	if(.)
 		return
-	if(href_list["choice"])
-		var/obj/item/card/id/ID = scanned_id.resolve()
-		if(ID)
-			if(href_list["choice"] == "eject")
-				scanned_id = null
-		else if(href_list["choice"] == "insert")
+
+	if(action == "choice")
+		if(params["choice"] == "scan")
 			var/obj/item/card/id/I = usr.get_active_hand()
 			if(istype(I))
 				scanned_id = WEAKREF(I)
-	if(href_list["purchase"])
+		return TRUE
+
+	if(action == "purchase")
 		var/obj/item/card/id/ID = scanned_id.resolve()
 		if(ID)
-			var/datum/data/mining_equipment/prize = locate(href_list["purchase"])
+			var/datum/data/mining_equipment/prize = locate(params["purchase"])
 			if(!prize || !(prize in minevendor_list))
 				return
 			if(prize.amount <= 0 && prize.amount != -1)
@@ -186,9 +183,7 @@ var/global/list/minevendor_list = list( //keep in order of price
 						prize.amount--
 					new prize.equipment_path(get_turf(src))
 					intent_message(MACHINE_SOUND)
-
-	updateUsrDialog()
-	return
+		return TRUE
 
 /obj/machinery/mineral/equipment_vendor/attackby(obj/item/I, mob/user, params)
 	if(istype(I, /obj/item/coin/mining))
diff --git a/html/changelogs/geeves-tgui_mining_vendor.yml b/html/changelogs/geeves-tgui_mining_vendor.yml
new file mode 100644
index 00000000000..a2cc3f5c518
--- /dev/null
+++ b/html/changelogs/geeves-tgui_mining_vendor.yml
@@ -0,0 +1,6 @@
+author: Geeves
+
+delete-after: True
+
+changes:
+  - rscadd: "Converted the mining vendor UI to TGUI."
diff --git a/tgui/packages/tgui/interfaces/MiningVendor.tsx b/tgui/packages/tgui/interfaces/MiningVendor.tsx
new file mode 100644
index 00000000000..50ea754641a
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/MiningVendor.tsx
@@ -0,0 +1,71 @@
+import { useBackend } from '../backend';
+import { Button, Section, Box, Table } from '../components';
+import { Window } from '../layouts';
+
+export type PrizeListData = {
+  name: string;
+  cost: number;
+  stock: number;
+  ref: string;
+};
+
+export type MiningVendorData = {
+  hasId: boolean;
+  miningPoints: number;
+  prizeList: PrizeListData[];
+};
+
+export const MiningVendor = (props, context) => {
+  const { act, data } = useBackend<MiningVendorData>(context);
+
+  return (
+    <Window resizable theme="hephaestus">
+      <Window.Content scrollable>
+        <Section title="Mining Points">
+          {data.hasId ? (
+            <Box>
+              <Box>You have {data.miningPoints} mining points collected.</Box>
+            </Box>
+          ) : (
+            <Box>
+              <Box>No ID detected.</Box>
+              <Button
+                content="Scan ID"
+                icon="plus"
+                onClick={() => act('choice', { choice: 'scan' })}
+              />
+            </Box>
+          )}
+        </Section>
+        <Section title="Mining Equipment">
+          <Table>
+            <Table.Row header>
+              <Table.Cell>Name</Table.Cell>
+              <Table.Cell>Cost</Table.Cell>
+              <Table.Cell>Stock</Table.Cell>
+              <Table.Cell>Action</Table.Cell>
+            </Table.Row>
+            {data.prizeList.map((prize) => (
+              <Table.Row key={prize.name}>
+                <Table.Cell>
+                  <Box pb={1}>{prize.name}</Box>
+                </Table.Cell>
+                <Table.Cell>{prize.cost}</Table.Cell>
+                <Table.Cell>
+                  {prize.stock === -1 ? '(No limit.)' : prize.stock}
+                </Table.Cell>
+                <Table.Cell>
+                  <Button
+                    content="Purchase"
+                    disabled={prize.stock === 0}
+                    onClick={() => act('purchase', { purchase: prize.ref })}
+                  />
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};