diff --git a/html/app.css b/html/app.css
index 50bb96b1..d80d58a0 100644
--- a/html/app.css
+++ b/html/app.css
@@ -180,7 +180,7 @@ body, input, textarea, select, button {
 	transform: rotate(90deg);
 }
 
-.x-aside-container .x-friend-list {
+.x-aside-container>.x-friend-list {
 	flex: 1;
 }
 
@@ -211,7 +211,7 @@ body, input, textarea, select, button {
 	border-radius: 2px;
 }
 
-.x-aside-container .x-friend-item:hover {
+.x-aside-container>.x-friend-list>.x-friend-item:hover {
 	background: #fff;
 	border-radius: 2px;
 }
@@ -298,24 +298,26 @@ body, input, textarea, select, button {
 }
 
 .x-friend-item>.detail>.name {
+	color: #303133;
 	font-weight: bold;
 }
 
 .x-friend-item>.detail>.extra {
+	color: #606266;
 	font-weight: normal;
 }
 
-.x-dialog .el-dialog {
+.x-dialog>.el-dialog {
 	margin-bottom: 10px;
 	max-width: 100%;
 }
 
-.x-user-dialog .el-dialog__header, .x-world-dialog .el-dialog__header, .x-avatar-dialog .el-dialog__header {
+.x-user-dialog>.el-dialog>.el-dialog__header, .x-world-dialog>.el-dialog>.el-dialog__header, .x-avatar-dialog>.el-dialog>.el-dialog__header {
 	padding: 0;
 	display: none;
 }
 
-.x-user-dialog .el-dialog__body, .x-world-dialog .el-dialog__body, .x-avatar-dialog .el-dialog__body {
+.x-user-dialog>.el-dialog>.el-dialog__body, .x-world-dialog>.el-dialog>.el-dialog__body, .x-avatar-dialog>.el-dialog>.el-dialog__body {
 	padding: 20px;
 }
 
@@ -346,16 +348,8 @@ i.x-user-status.busy {
 	background: #F56C6C;
 }
 
-.el-tag.x-tag-vip {
-	border-color: rgb(181, 38, 38);
-	color: rgb(181, 38, 38);
-}
-
-.el-tag.x-tag-friend {
-	/*border-color: rgb(255, 255, 0);
-	color: rgb(255, 255, 0);*/
-	border-color: rgb(255, 208, 0);
-	color: rgb(255, 208, 0);
+.x-friend-item>.detail>.name.x-tag-untrusted {
+	color: rgb(204, 204, 204);
 }
 
 .el-tag.x-tag-untrusted {
@@ -363,26 +357,47 @@ i.x-user-status.busy {
 	color: rgb(204, 204, 204);
 }
 
+.x-friend-item>.detail>.name.x-tag-basic {
+	color: rgb(23, 120, 255);
+}
+
 .el-tag.x-tag-basic {
 	border-color: rgb(23, 120, 255);
 	color: rgb(23, 120, 255);
 }
 
+.x-friend-item>.detail>.name.x-tag-known {
+	color: rgb(43, 207, 92);
+}
+
 .el-tag.x-tag-known {
 	border-color: rgb(43, 207, 92);
 	color: rgb(43, 207, 92);
 }
 
+.x-friend-item>.detail>.name.x-tag-trusted {
+	color: rgb(255, 123, 66);
+}
+
 .el-tag.x-tag-trusted {
 	border-color: rgb(255, 123, 66);
 	color: rgb(255, 123, 66);
 }
 
+.x-friend-item>.detail>.name.x-tag-veteran {
+	color: rgb(129, 67, 230);
+}
+
 .el-tag.x-tag-veteran {
 	border-color: rgb(129, 67, 230);
 	color: rgb(129, 67, 230);
 }
 
+.x-friend-item>.detail>.name.x-tag-legend {
+	/*color: rgb(255, 255, 0);*/
+	color: rgb(255, 208, 0);
+}
+
 .el-tag.x-tag-legend {
 	/*border-color: rgb(255, 255, 0);
 	color: rgb(255, 255, 0);*/
@@ -390,9 +405,8 @@ i.x-user-status.busy {
 	color: rgb(255, 208, 0);
 }
 
-.el-tag.x-tag-troll {
-	border-color: rgb(120, 47, 47);
-	color: rgb(120, 47, 47);
+.x-friend-item>.detail>.name.x-tag-legendary {
+	color: rgb(0, 0, 0);
 }
 
 .el-tag.x-tag-legendary {
@@ -400,6 +414,36 @@ i.x-user-status.busy {
 	color: rgb(0, 0, 0);
 }
 
+.x-friend-item>.detail>.name.x-tag-vip {
+	color: rgb(181, 38, 38);
+}
+
+.el-tag.x-tag-vip {
+	border-color: rgb(181, 38, 38);
+	color: rgb(181, 38, 38);
+}
+
+.x-friend-item>.detail>.name.x-tag-troll {
+	color: rgb(120, 47, 47);
+}
+
+.el-tag.x-tag-troll {
+	border-color: rgb(120, 47, 47);
+	color: rgb(120, 47, 47);
+}
+
+.x-friend-item>.detail>.name.x-tag-friend {
+	/*color: rgb(255, 255, 0);*/
+	color: rgb(255, 208, 0);
+}
+
+.el-tag.x-tag-friend {
+	/*border-color: rgb(255, 255, 0);
+	color: rgb(255, 255, 0);*/
+	border-color: rgb(255, 208, 0);
+	color: rgb(255, 208, 0);
+}
+
 .el-tree-node {
 	white-space: normal;
 }
@@ -417,29 +461,4 @@ i.x-user-status.busy {
 
 .x-user-dialog .el-tag+.el-tag {
 	margin-left: 5px;
-}
-
-
-.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);
-}
+}
\ No newline at end of file
diff --git a/html/app.js b/html/app.js
index 4bdc1644..80d5b721 100644
--- a/html/app.js
+++ b/html/app.js
@@ -14,6 +14,10 @@ if (window.CefSharp) {
 		location = 'https://github.com/pypy-vrc/vrcx';
 	}).then(() => {
 
+		var $nameColorStyle = document.createElement('style');
+		$nameColorStyle.appendChild(document.createTextNode('.x-friend-item>.detail>.name { color: #303133 !important; }'));
+		document.head.appendChild($nameColorStyle);
+
 		document.addEventListener('keyup', (e) => {
 			if (e.ctrlKey) {
 				if (e.shiftKey && e.code === 'KeyI') {
@@ -947,6 +951,7 @@ if (window.CefSharp) {
 					admin_: false,
 					troll_: false,
 					trustLevel_: 'Visitor',
+					trustClass_: 'x-tag-untrusted',
 					//
 					...ref
 				};
@@ -959,22 +964,36 @@ if (window.CefSharp) {
 				ctx.admin_ = ctx.admin_ || ctx.tags.includes('admin_moderator');
 				ctx.troll_ = ctx.tags.includes('system_probable_troll') ||
 					ctx.tags.includes('system_troll');
-				if (ctx.tags.includes('system_legend')) {
+				if (ctx.troll_) {
+					ctx.trustLevel_ = 'Nuisance';
+					ctx.trustClass_ = 'x-tag-troll';
+				} else if (ctx.tags.includes('system_legend')) {
 					ctx.trustLevel_ = 'Legendary User';
+					ctx.trustClass_ = 'x-tag-legendary';
 				} else if (ctx.tags.includes('system_trust_legend')) {
 					ctx.trustLevel_ = 'Veteran User';
+					ctx.trustClass_ = 'x-tag-legend';
 				} else if (ctx.tags.includes('system_trust_veteran')) {
 					ctx.trustLevel_ = 'Trusted User';
+					ctx.trustClass_ = 'x-tag-veteran';
 				} else if (ctx.tags.includes('system_trust_trusted')) {
 					ctx.trustLevel_ = 'Known User';
+					ctx.trustClass_ = 'x-tag-trusted';
 				} else if (ctx.tags.includes('system_trust_known')) {
 					ctx.trustLevel_ = 'User';
+					ctx.trustClass_ = 'x-tag-known';
 				} else if (ctx.tags.includes('system_trust_basic')) {
 					ctx.trustLevel_ = 'New User';
+					ctx.trustClass_ = 'x-tag-basic';
 				} else {
 					ctx.trustLevel_ = 'Visitor';
+					ctx.trustClass_ = 'x-tag-untrusted';
 				}
 			}
+			if (ctx.admin_) {
+				ctx.trustLevel_ = 'VRChat Team';
+				ctx.trustClass_ = 'x-tag-vip';
+			}
 			return ctx;
 		};
 
@@ -4155,35 +4174,6 @@ 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 = '';
@@ -5081,7 +5071,6 @@ if (window.CefSharp) {
 			$app.deleteFriendship(args.param.userId);
 		});
 
-		// FIXME: table에서 accept, decline 한 경우 제대로 안남을지도 모름
 		API.$on('FRIEND:REQUEST', (args) => {
 			var ref = API.user[args.param.userId];
 			if (ref) {
@@ -5095,7 +5084,6 @@ if (window.CefSharp) {
 			}
 		});
 
-		// 여기도 그럼
 		API.$on('FRIEND:REQUEST:CANCEL', (args) => {
 			var ref = API.user[args.param.userId];
 			if (ref) {
@@ -5468,6 +5456,14 @@ if (window.CefSharp) {
 		};
 		$app.watch.openVR = saveOpenVROption;
 		$app.watch.openVRAlways = saveOpenVROption;
+		$app.data.showNameColor = VRCXStorage.GetBool('showNameColor');
+		$nameColorStyle.disabled = VRCXStorage.GetBool('showNameColor');
+		console.log('$nameColorStyle', $nameColorStyle);
+		$app.watch.showNameColor = function () {
+			VRCXStorage.SetBool('showNameColor', this.showNameColor);
+			$nameColorStyle.disabled = this.showNameColor;
+			console.log('$nameColorStyle', $nameColorStyle);
+		};
 
 		API.$on('LOGIN', () => {
 			$app.currentUserTreeData = [];
diff --git a/html/index.html b/html/index.html
index 7e20f452..ac5f62b9 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="userNameColorClass(favorite.ref)"></span>
+										<span v-text="favorite.ref.displayName" class="name" :class="favorite.ref.trustClass_"></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>
@@ -709,6 +709,13 @@
 				<el-switch v-model="orderFriendGroup3" inactive-text="by name" active-text="by state"></el-switch>
 			</div>
 		</div>
+		<div style="margin-top:30px">
+			<span style="font-weight:bold">Show name color by Trust level</span>
+			<div style="font-size:12px;margin-top:5px">
+				<span style="display:inline-block;min-width:150px">Enable</span>
+				<el-switch v-model="showNameColor"></el-switch>
+			</div>
+		</div>
 		<div style="margin-top:30px">
 			<span style="font-weight:bold">Discord Presence</span>
 			<div style="font-size:12px;margin-top:5px">
@@ -760,7 +767,7 @@
 				<div class="x-friend-item">
 					<template v-if="item.ref">
 						<div class="detail">
-							<span v-text="item.ref.displayName" :class="userNameColorClass(item.ref)"></span>
+							<span v-text="item.ref.displayName" class="name" :class="item.ref.trustClass_"></span>
 							<location :location="item.ref.location" :link="false" class="extra"></location>
 						</div>
 						<img v-lazy="item.ref.currentAvatarThumbnailImageUrl" class="avatar">
@@ -781,8 +788,8 @@
 							<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 						</div>
 						<div class="detail">
-							<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-if="friend.memo" class="name" :class="friend.ref.trustClass_">{{ friend.ref.displayName }} ({{ friend.memo }})</span>
+							<span v-else v-text="friend.ref.displayName" class="name" :class="friend.ref.trustClass_"></span>
 							<location :location="friend.ref.location" :link="false" class="extra"></location>
 						</div>
 					</template>
@@ -803,8 +810,8 @@
 							<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 						</div>
 						<div class="detail">
-							<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-if="friend.memo" class="name" :class="friend.ref.trustClass_">{{ friend.ref.displayName }} ({{ friend.memo }})</span>
+							<span v-else v-text="friend.ref.displayName" class="name" :class="friend.ref.trustClass_"></span>
 							<location :location="friend.ref.location" :link="false" class="extra"></location>
 						</div>
 					</template>
@@ -825,8 +832,8 @@
 							<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 						</div>
 						<div class="detail">
-							<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-if="friend.memo" class="name" :class="friend.ref.trustClass_">{{ friend.ref.displayName }} ({{ friend.memo }})</span>
+							<span v-else v-text="friend.ref.displayName" class="name" :class="friend.ref.trustClass_"></span>
 							<span v-text="friend.ref.statusDescription" :link="false" class="extra"></span>
 						</div>
 					</template>
@@ -847,8 +854,8 @@
 							<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 						</div>
 						<div class="detail">
-							<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-if="friend.memo" class="name" :class="friend.ref.trustClass_">{{ friend.ref.displayName }} ({{ friend.memo }})</span>
+							<span v-else v-text="friend.ref.displayName" class="name" :class="friend.ref.trustClass_"></span>
 							<span v-text="friend.ref.statusDescription" class="extra"></span>
 						</div>
 					</template>
@@ -891,6 +898,8 @@
 							</el-popover>
 						</div>
 						<div style="margin-top:5px">
+							<el-tag type="info" effect="plain" size="mini" class="name" :class="userDialog.ref.trustClass_" v-text="userDialog.ref.trustLevel_"></el-tag>
+							<!--
 							<el-tag v-if="userDialog.ref.admin_" type="info" effect="plain" size="mini" class="x-tag-vip">VRChat Team</el-tag>
 							<el-tag v-else-if="userDialog.ref.trustLevel_ === 'Legendary User'" type="info" effect="plain" size="mini" class="x-tag-legendary">Legendary User</el-tag>
 							<el-tag v-else-if="userDialog.ref.trustLevel_ === 'Veteran User'" type="info" effect="plain" size="mini" class="x-tag-legend">Veteran User</el-tag>
@@ -900,6 +909,7 @@
 							<el-tag v-else-if="userDialog.ref.trustLevel_ === 'New User'" type="info" effect="plain" size="mini" class="x-tag-basic">New User</el-tag>
 							<el-tag v-else type="info" effect="plain" size="mini" class="x-tag-untrusted">Visitor</el-tag>
 							<el-tag v-if="userDialog.ref.troll_" type="info" effect="plain" size="mini" class="x-tag-troll">Nuisance</el-tag>
+							-->
 							<el-tag v-if="userDialog.isFriend && userDialog.friend" type="info" effect="plain" size="mini" class="x-tag-friend">Friend No.{{userDialog.friend.no}}</el-tag>
 						</div>
 						<div style="margin-top:5px">
@@ -950,7 +960,7 @@
 										<img v-lazy="userDialog.location_.user.currentAvatarThumbnailImageUrl">
 									</div>
 									<div class="detail">
-										<span v-text="userDialog.location_.user.displayName" :class="userNameColorClass(userDialog.location_.user)"></span>
+										<span v-text="userDialog.location_.user.displayName" class="name" :class="userDialog.location_.user.trustClass_"></span>
 										<span class="extra">Instance Creator</span>
 									</div>
 								</template>
@@ -961,7 +971,7 @@
 									<img v-lazy="user.currentAvatarThumbnailImageUrl">
 								</div>
 								<div class="detail">
-									<span v-text="user.displayName" :class="userNameColorClass(user)"></span>
+									<span v-text="user.displayName" class="name" :class="user.trustClass_"></span>
 									<span class="extra"><timer :epoch="user.location_at_"></timer></span>
 								</div>
 							</div>
@@ -1100,7 +1110,7 @@
 										<img v-lazy="room.location_.user.currentAvatarThumbnailImageUrl">
 									</div>
 									<div class="detail">
-										<span v-text="room.location_.user.displayName" :class="userNameColorClass(room.location_.user)"></span>
+										<span v-text="room.location_.user.displayName" class="name" :class="room.location_.user.trustClass_"></span>
 										<span class="extra">Instance Creator</span>
 									</div>
 								</template>
@@ -1111,7 +1121,7 @@
 									<img v-lazy="user.currentAvatarThumbnailImageUrl">
 								</div>
 								<div class="detail">
-									<span v-text="user.displayName" :class="userNameColorClass(user)"></span>
+									<span v-text="user.displayName" class="name" :class="user.trustClass_"></span>
 									<span class="extra"><timer :epoch="user.location_at_"></timer></span>
 								</div>
 							</div>
@@ -1297,7 +1307,7 @@
 								<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 							</div>
 							<div class="detail">
-								<span v-text="friend.ref.displayName" :class="userNameColorClass(friend.ref)"></span>
+								<span v-text="friend.ref.displayName" class="name" :class="friend.ref.trustClass_"></span>
 							</div>
 						</template>
 						<span v-else v-text="friend.id"></span>
@@ -1310,7 +1320,7 @@
 								<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 							</div>
 							<div class="detail">
-								<span v-text="friend.ref.displayName" :class="userNameColorClass(friend.ref)"></span>
+								<span v-text="friend.ref.displayName" class="name" :class="friend.ref.trustClass_"></span>
 							</div>
 						</template>
 						<span v-else v-text="friend.id"></span>
@@ -1323,7 +1333,7 @@
 								<img v-lazy="friend.ref.currentAvatarThumbnailImageUrl">
 							</div>
 							<div class="detail">
-								<span v-text="friend.ref.displayName" :class="userNameColorClass(friend.ref)"></span>
+								<span v-text="friend.ref.displayName" class="name" :class="friend.ref.trustClass_"></span>
 							</div>
 						</template>
 						<span v-else v-text="friend.id"></span>
@@ -1369,7 +1379,7 @@
 	<el-dialog ref="newInstanceDialog" :visible.sync="newInstanceDialog.visible" title="New Instance" width="600px" class="x-dialog">
 		<el-form :model="newInstanceDialog" label-width="100px">
 			<el-form-item label="Access Type">
-				<el-radio-group v-model="newInstanceDialog.accessType" size="mini" @change="buildInstanceTag">
+				<el-radio-group v-model="newInstanceDialog.accessType" size="mini" @change="buildInstance">
 					<el-radio-button label="public"></el-radio-button>
 					<el-radio-button label="friends+"></el-radio-button>
 					<el-radio-button label="friends"></el-radio-button>