diff --git a/html/app.css b/html/app.css
index 43d910fe..50bb96b1 100644
--- a/html/app.css
+++ b/html/app.css
@@ -417,4 +417,29 @@ i.x-user-status.busy {
 
 .x-user-dialog .el-tag+.el-tag {
 	margin-left: 5px;
-}
\ No newline at end of file
+}
+
+
+.name.x-tag-untrusted {
+	color: rgb(204, 204, 204);
+}
+
+.name.x-tag-basic {
+	color: rgb(23, 120, 255);
+}
+
+.name.x-tag-user {
+	color: rgb(43, 207, 92);
+}
+
+.name.x-tag-known {
+	color: rgb(255, 123, 66);
+}
+
+.name.x-tag-trusted {
+	color: rgb(129, 67, 230);
+}
+
+.name.x-tag-veteran, .name.x-tag-legend {
+	color: rgb(255, 208, 0);
+}
diff --git a/html/app.js b/html/app.js
index 89fab1a2..4bdc1644 100644
--- a/html/app.js
+++ b/html/app.js
@@ -4155,6 +4155,35 @@ if (window.CefSharp) {
 			});
 		};
 
+		$app.methods.userNameColorClass = function (user) {
+			var style = { name: true };
+			if (!user) return style;
+
+			switch (user.trustLevel_) {
+				case "Legendary User":
+					style['x-tag-legendary'] = true;
+					break;
+				case "Veteran User":
+					style['x-tag-veteran'] = true;
+					break;
+				case "Trusted User":
+					style['x-tag-trusted'] = true;
+					break;
+				case "Known User":
+					style['x-tag-known'] = true;
+					break;
+				case "User":
+					style['x-tag-user'] = true;
+					break;
+				case "New User":
+					style['x-tag-basic'] = true;
+				case "Visitor":
+					style['x-tag-untrusted'] = true;
+			}
+
+			return style;
+		};
+
 		// App: Quick Search
 
 		$app.data.quickSearch = '';
diff --git a/html/index.html b/html/index.html
index 681e618e..7e20f452 100644
--- a/html/index.html
+++ b/html/index.html
@@ -328,7 +328,7 @@
 										<img v-lazy="favorite.ref.currentAvatarThumbnailImageUrl">
 									</div>
 									<div class="detail">
-										<span v-text="favorite.ref.displayName" class="name"></span>
+										<span v-text="favorite.ref.displayName" :class="userNameColorClass(favorite.ref)"></span>
 										<location v-if="favorite.ref.location !== 'offline'" :location="favorite.ref.location" :link="false" class="extra"></location>
 										<span v-else v-text="favorite.ref.statusDescription"></span>
 									</div>
@@ -760,7 +760,7 @@
 				<div class="x-friend-item">
 					<template v-if="item.ref">
 						<div class="detail">
-							<span v-text="item.ref.displayName" class="name"></span>
+							<span v-text="item.ref.displayName" :class="userNameColorClass(item.ref)"></span>
 							<location :location="item.ref.location" :link="false" class="extra"></location>
 						</div>
 						<img v-lazy="item.ref.currentAvatarThumbnailImageUrl" class="avatar">
@@ -781,8 +781,8 @@
 							<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 						</div>
 						<div class="detail">
-							<span v-if="friend.memo" class="name">{{ friend.ref.displayName }} ({{ friend.memo }})</span>
-							<span v-else v-text="friend.ref.displayName" class="name"></span>
+							<span v-if="friend.memo" :class="userNameColorClass(friend.ref)">{{ friend.ref.displayName }} ({{ friend.memo }})</span>
+							<span v-else v-text="friend.ref.displayName" :class="userNameColorClass(friend.ref)"></span>
 							<location :location="friend.ref.location" :link="false" class="extra"></location>
 						</div>
 					</template>
@@ -803,8 +803,8 @@
 							<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 						</div>
 						<div class="detail">
-							<span v-if="friend.memo" class="name">{{ friend.ref.displayName }} ({{ friend.memo }})</span>
-							<span v-else v-text="friend.ref.displayName" class="name"></span>
+							<span v-if="friend.memo" :class="userNameColorClass(friend.ref)">{{ friend.ref.displayName }} ({{ friend.memo }})</span>
+							<span v-else v-text="friend.ref.displayName" :class="userNameColorClass(friend.ref)"></span>
 							<location :location="friend.ref.location" :link="false" class="extra"></location>
 						</div>
 					</template>
@@ -825,8 +825,8 @@
 							<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 						</div>
 						<div class="detail">
-							<span v-if="friend.memo" class="name">{{ friend.ref.displayName }} ({{ friend.memo }})</span>
-							<span v-else v-text="friend.ref.displayName" class="name"></span>
+							<span v-if="friend.memo" :class="userNameColorClass(friend.ref)">{{ friend.ref.displayName }} ({{ friend.memo }})</span>
+							<span v-else v-text="friend.ref.displayName" :class="userNameColorClass(friend.ref)"></span>
 							<span v-text="friend.ref.statusDescription" :link="false" class="extra"></span>
 						</div>
 					</template>
@@ -847,8 +847,8 @@
 							<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 						</div>
 						<div class="detail">
-							<span v-if="friend.memo" class="name">{{ friend.ref.displayName }} ({{ friend.memo }})</span>
-							<span v-else v-text="friend.ref.displayName" class="name"></span>
+							<span v-if="friend.memo" :class="userNameColorClass(friend.ref)">{{ friend.ref.displayName }} ({{ friend.memo }})</span>
+							<span v-else v-text="friend.ref.displayName" :class="userNameColorClass(friend.ref)"></span>
 							<span v-text="friend.ref.statusDescription" class="extra"></span>
 						</div>
 					</template>
@@ -950,7 +950,7 @@
 										<img v-lazy="userDialog.location_.user.currentAvatarThumbnailImageUrl">
 									</div>
 									<div class="detail">
-										<span v-text="userDialog.location_.user.displayName" class="name"></span>
+										<span v-text="userDialog.location_.user.displayName" :class="userNameColorClass(userDialog.location_.user)"></span>
 										<span class="extra">Instance Creator</span>
 									</div>
 								</template>
@@ -961,7 +961,7 @@
 									<img v-lazy="user.currentAvatarThumbnailImageUrl">
 								</div>
 								<div class="detail">
-									<span v-text="user.displayName" class="name"></span>
+									<span v-text="user.displayName" :class="userNameColorClass(user)"></span>
 									<span class="extra"><timer :epoch="user.location_at_"></timer></span>
 								</div>
 							</div>
@@ -1100,7 +1100,7 @@
 										<img v-lazy="room.location_.user.currentAvatarThumbnailImageUrl">
 									</div>
 									<div class="detail">
-										<span v-text="room.location_.user.displayName" class="name"></span>
+										<span v-text="room.location_.user.displayName" :class="userNameColorClass(room.location_.user)"></span>
 										<span class="extra">Instance Creator</span>
 									</div>
 								</template>
@@ -1111,7 +1111,7 @@
 									<img v-lazy="user.currentAvatarThumbnailImageUrl">
 								</div>
 								<div class="detail">
-									<span v-text="user.displayName" class="name"></span>
+									<span v-text="user.displayName" :class="userNameColorClass(user)"></span>
 									<span class="extra"><timer :epoch="user.location_at_"></timer></span>
 								</div>
 							</div>
@@ -1297,7 +1297,7 @@
 								<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 							</div>
 							<div class="detail">
-								<span v-text="friend.ref.displayName" class="name"></span>
+								<span v-text="friend.ref.displayName" :class="userNameColorClass(friend.ref)"></span>
 							</div>
 						</template>
 						<span v-else v-text="friend.id"></span>
@@ -1310,7 +1310,7 @@
 								<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 							</div>
 							<div class="detail">
-								<span v-text="friend.ref.displayName" class="name"></span>
+								<span v-text="friend.ref.displayName" :class="userNameColorClass(friend.ref)"></span>
 							</div>
 						</template>
 						<span v-else v-text="friend.id"></span>
@@ -1323,7 +1323,7 @@
 								<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 							</div>
 							<div class="detail">
-								<span v-text="friend.ref.displayName" class="name"></span>
+								<span v-text="friend.ref.displayName" :class="userNameColorClass(friend.ref)"></span>
 							</div>
 						</template>
 						<span v-else v-text="friend.id"></span>