diff --git a/packages/web_ui/src/components/InstanceList.jsx b/packages/web_ui/src/components/InstanceList.jsx
index 4a010ffa..39f77156 100644
--- a/packages/web_ui/src/components/InstanceList.jsx
+++ b/packages/web_ui/src/components/InstanceList.jsx
@@ -3,6 +3,7 @@ import { useHistory } from "react-router-dom";
 import { Table } from "antd";
 
 import { useSlaveList } from "../model/slave";
+import InstanceStatusTag from "./InstanceStatusTag";
 
 const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "base" }).compare;
 
@@ -35,6 +36,7 @@ export default function InstanceList(props) {
 		{
 			title: "Status",
 			dataIndex: "status",
+			render: status => <InstanceStatusTag status={status} />,
 			sorter: (a, b) => strcmp(a["status"], b["status"]),
 		},
 	];
diff --git a/packages/web_ui/src/components/InstanceStatusTag.jsx b/packages/web_ui/src/components/InstanceStatusTag.jsx
new file mode 100644
index 00000000..d3418fcf
--- /dev/null
+++ b/packages/web_ui/src/components/InstanceStatusTag.jsx
@@ -0,0 +1,21 @@
+import { Tag } from "antd";
+import React from "react";
+
+const statusColors = {
+	unknown: "#d46b08",
+	unassigned: "#d4380d",
+	stopped: "#cf1322",
+	starting: "#7cb305",
+	running: "#389e0d",
+	stopping: "#d48806",
+	creating_save: "#096dd9",
+	exporting_data: "#08979c",
+	deleted: "#cf1322",
+};
+
+
+export default function InstanceStatusTag(props) {
+	return <Tag color={statusColors[props.status]}>
+		{props.status}
+	</Tag>;
+}
diff --git a/packages/web_ui/src/components/InstanceViewPage.jsx b/packages/web_ui/src/components/InstanceViewPage.jsx
index c5a27cb5..58384ab4 100644
--- a/packages/web_ui/src/components/InstanceViewPage.jsx
+++ b/packages/web_ui/src/components/InstanceViewPage.jsx
@@ -18,6 +18,7 @@ import SavesList from "./SavesList";
 import { notifyErrorHandler } from "../util/notify";
 import { useInstance } from "../model/instance";
 import { useSlave } from "../model/slave";
+import InstanceStatusTag from "./InstanceStatusTag";
 
 const { Title, Paragraph } = Typography;
 
@@ -116,7 +117,7 @@ export default function InstanceViewPage(props) {
 					buttonContent={assigned ? "Reassign" : "Assign"}
 				/>}
 			</Descriptions.Item>
-			<Descriptions.Item label="Status">{instance["status"]}</Descriptions.Item>
+			<Descriptions.Item label="Status"><InstanceStatusTag status={instance["status"]} /></Descriptions.Item>
 		</Descriptions>
 
 		{