diff --git a/html/src/app.js b/html/src/app.js
index 9984b3a1..6cdeae60 100644
--- a/html/src/app.js
+++ b/html/src/app.js
@@ -3536,17 +3536,15 @@ speechSynthesis.getVoices();
                         json.content = JSON.parse(json.content);
                     } catch (err) {
                     }
-                    if ($app.debugWebSocket) {
-                        var displayName = '';
-                        if (this.cachedUsers.has(json.content.userId)) {
-                            var user = this.cachedUsers.get(json.content.userId);
-                            displayName = user.displayName;
-                        }
-                        console.log('WebSocket', json.type, displayName, json.content);
-                    }
                     this.$emit('PIPELINE', {
                         json
                     });
+                    if (($app.debugWebSocket) && (json.content) && (this.cachedUsers.has(json.content.userId))) {
+                        var displayName = '';
+                        var user = this.cachedUsers.get(json.content.userId);
+                        displayName = user.displayName;
+                        console.log('WebSocket', json.type, displayName, json.content);
+                    }
                 } catch (err) {
                     console.error(err);
                 }
@@ -5825,9 +5823,16 @@ speechSynthesis.getVoices();
         if (a.ref.status === b.ref.status) {
             return 0;
         }
-        switch (b.ref.status) {
+        if (a.ref.state === 'offline') {
+            return 1;
+        }
+        return $app.sortStatus(a.ref.status, b.ref.status);
+    };
+
+    $app.methods.sortStatus = function (a, b) {
+        switch (b) {
             case 'join me':
-                switch (a.ref.status) {
+                switch (a) {
                     case 'active':
                         return 1;
                     case 'ask me':
@@ -5837,7 +5842,7 @@ speechSynthesis.getVoices();
                 }
                 break;
             case 'active':
-                switch (a.ref.status) {
+                switch (a) {
                     case 'join me':
                         return -1;
                     case 'ask me':
@@ -5847,7 +5852,7 @@ speechSynthesis.getVoices();
                 }
                 break;
             case 'ask me':
-                switch (a.ref.status) {
+                switch (a) {
                     case 'join me':
                         return -1;
                     case 'active':
@@ -5857,7 +5862,7 @@ speechSynthesis.getVoices();
                 }
                 break;
             case 'busy':
-                switch (a.ref.status) {
+                switch (a) {
                     case 'join me':
                         return -1;
                     case 'active':
@@ -5866,8 +5871,10 @@ speechSynthesis.getVoices();
                         return -1;
                 }
                 break;
+            default:
+                return 0;
+                break;
         }
-        return 0;
     };
 
     // location at
diff --git a/html/src/index.pug b/html/src/index.pug
index 19c62b46..490cdd62 100644
--- a/html/src/index.pug
+++ b/html/src/index.pug
@@ -624,7 +624,10 @@ html
                         el-table-column(label="Rank" width="110" prop="$trustNum" sortable="custom")
                             template(v-once #default="scope")
                                 span.name(v-text="scope.row.$trustLevel" :class="scope.row.$trustColor")
-                        el-table-column(label="Status" min-width="180" prop="statusDescription" sortable :sort-method="(a, b) => sortAlphabetically(a, b, 'statusDescription')")
+                        el-table-column(label="Status" min-width="180" prop="status" sortable :sort-method="(a, b) => sortStatus(a.status, b.status)")
+                            template(v-once #default="scope")
+                                i.x-user-status(v-if="scope.row.status !== 'offline'" :class="statusClass(scope.row.status)")
+                                span(v-text="scope.row.statusDescription")
                         el-table-column(label="Language" width="100" prop="$languages" sortable :sort-method="(a, b) => sortLanguages(a, b)")
                             template(v-once #default="scope")
                                 el-tooltip(v-for="item in scope.row.$languages" :key="item.key" placement="top")
@@ -1722,12 +1725,13 @@ html
                 template(#footer)
                     el-button(v-if="downloadQueue.size >= 1" size="small" @click="cancelAllVRChatCacheDownload") Cancel All
                     el-button(size="small" @click="downloadDialog.visible = false") Close
-                    
+
             //- dialog: update VRCX
             el-dialog.x-dialog(ref="VRCXUpdateDialog" :visible.sync="VRCXUpdateDialog.visible" title="VRCX Updater" width="400px")
                 div(v-loading="checkingForVRCXUpdate" style="margin-top:15px")
                     template(v-if="!VRCXUpdateDialog.updatePending && VRCXUpdateDialog.release === appVersion")
                         span VRCX is up to date.
+                        br
                     template(v-if="VRCXUpdateDialog.updatePending")
                         span Update ready for install, restart VRCX to apply.
                     template(v-else)