diff --git a/scss/westgate/_surfaces.scss b/scss/westgate/_surfaces.scss
index e9be80c..84d2885 100644
--- a/scss/westgate/_surfaces.scss
+++ b/scss/westgate/_surfaces.scss
@@ -172,6 +172,39 @@ li[component="category/topic"] .user-icon {
 	border-radius: 999px !important;
 }
 
+.status {
+	box-shadow:
+		0 0 0 2px var(--wg-status-ring),
+		0 0 0 3px rgba(216, 194, 138, 0.14),
+		0 0 12px rgba(0, 0, 0, 0.34);
+
+	&.online {
+		color: var(--wg-status-online) !important;
+		background-color: var(--wg-status-online) !important;
+	}
+
+	&.away {
+		color: var(--wg-status-away) !important;
+		background-color: var(--wg-status-away) !important;
+	}
+
+	&.dnd {
+		color: var(--wg-status-dnd) !important;
+		background-color: var(--wg-status-dnd) !important;
+	}
+
+	&.offline {
+		color: var(--wg-status-offline) !important;
+		background-color: var(--wg-status-offline) !important;
+	}
+}
+
+.fa-circle.status {
+	text-shadow:
+		0 0 0 2px var(--wg-status-ring),
+		0 0 10px rgba(0, 0, 0, 0.34);
+}
+
 .account,
 .account .profile,
 .account .cover,
diff --git a/scss/westgate/_tokens.scss b/scss/westgate/_tokens.scss
index 965c49e..fad5118 100644
--- a/scss/westgate/_tokens.scss
+++ b/scss/westgate/_tokens.scss
@@ -61,6 +61,11 @@
 	--wg-gold: #c2a35a;
 	--wg-gold-soft: #a8893f;
 	--wg-red: #8e3438;
+	--wg-status-online: #7fb86a;
+	--wg-status-away: #d9b44a;
+	--wg-status-dnd: #c55a5f;
+	--wg-status-offline: #b7b0a6;
+	--wg-status-ring: rgba(9, 8, 11, 0.9);
 	--wg-text: #e6e0d6;
 	--wg-text-soft: #b9b2a6;
 	--wg-text-muted: #9a9086;