From 00745b54f1d958c2aede388ed71b1229fe363cf8 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Fri, 2 Jan 2026 22:24:28 +0900
Subject: [PATCH] UI Refresh

---
 package-lock.json                             |   88 +-
 package.json                                  |    4 +-
 src/App.vue                                   |    6 +-
 src/app.css                                   | 1091 +++++++++++++----
 src/assets/scss/flags.css                     |    2 +-
 src/assets/scss/noty.css                      |   53 +
 src/assets/scss/themes/app_legacy.scss        | 1052 ++++++++++++++++
 src/components/AvatarInfo.vue                 |   12 +-
 src/components/DataTable.vue                  |    2 +-
 src/components/FullscreenImagePreview.vue     |    2 +-
 src/components/InstanceInfo.vue               |   12 +-
 src/components/Location.vue                   |   85 +-
 src/components/LocationWorld.vue              |   33 +-
 src/components/NativeTooltip.vue              |  537 --------
 src/components/NavMenu.vue                    |  627 +++++-----
 .../dialogs/AvatarDialog/AvatarDialog.vue     |    9 +-
 .../AvatarDialog/ChangeAvatarImageDialog.vue  |    2 +-
 .../AvatarDialog/SetAvatarTagsDialog.vue      |    4 +-
 src/components/dialogs/CustomNavDialog.vue    |    5 +-
 .../dialogs/GroupDialog/GroupDialog.vue       |   15 +-
 .../GroupMemberModerationDialog.vue           |    2 +-
 src/components/dialogs/NewInstanceDialog.vue  |    2 +-
 src/components/dialogs/SendBoopDialog.vue     |   12 +-
 .../dialogs/UserDialog/UserActionDropdown.vue |   16 +-
 .../dialogs/UserDialog/UserDialog.vue         |   72 +-
 .../WorldDialog/ChangeWorldImageDialog.vue    |    2 +-
 .../dialogs/WorldDialog/WorldDialog.vue       |   14 +-
 src/composables/useElementTheme.js            |  141 +++
 src/composables/useTableHeight.js             |   44 +
 src/index.html                                |    2 -
 src/localization/cs.json                      |    2 +
 src/localization/en.json                      |   19 +-
 src/localization/es.json                      |    2 +
 src/localization/fr.json                      |    2 +
 src/localization/hu.json                      |    2 +
 src/localization/ja.json                      |    2 +
 src/localization/ko.json                      |    2 +
 src/localization/pl.json                      |    2 +
 src/localization/pt.json                      |    2 +
 src/localization/ru.json                      |    2 +
 src/localization/th.json                      |    2 +
 src/localization/vi.json                      |    2 +
 src/localization/zh-CN.json                   |    2 +
 src/localization/zh-TW.json                   |    2 +
 src/plugin/components.js                      |    2 -
 src/plugin/noty.js                            |    2 +-
 src/plugin/router.js                          |    7 +
 src/{assets => public}/images/blank.png       |  Bin
 src/{assets => public}/images/flags.png       |  Bin
 src/{assets => public}/images/masks/askme.svg |    0
 src/{assets => public}/images/masks/busy.svg  |    0
 .../images/masks/joinme.svg                   |    0
 src/{assets => public}/images/masks/phone.svg |    0
 .../images/masks/usercutout.svg               |    0
 .../images/masks/usercutoutmobile.svg         |    0
 .../images/vr}/base_status_off.png            |  Bin
 .../images/vr}/base_status_ready.png          |  Bin
 .../images/vr}/controller_status_off.png      |  Bin
 .../images/vr}/controller_status_ready.png    |  Bin
 .../vr}/controller_status_ready_charging.png  |  Bin
 .../vr}/controller_status_ready_low.png       |  Bin
 .../images/vr}/headset_quest_status_off.png   |  Bin
 .../images/vr}/headset_quest_status_ready.png |  Bin
 .../headset_quest_status_ready_charging.png   |  Bin
 .../vr}/headset_quest_status_ready_low.png    |  Bin
 .../images/vr}/left_controller_status_off.png |  Bin
 .../vr}/left_controller_status_ready.png      |  Bin
 .../left_controller_status_ready_charging.png |  Bin
 .../vr}/left_controller_status_ready_low.png  |  Bin
 .../images/vr}/other_status_off.png           |  Bin
 .../images/vr}/other_status_ready.png         |  Bin
 .../vr}/other_status_ready_charging.png       |  Bin
 .../images/vr}/other_status_ready_low.png     |  Bin
 .../vr}/right_controller_status_off.png       |  Bin
 .../vr}/right_controller_status_ready.png     |  Bin
 ...right_controller_status_ready_charging.png |  Bin
 .../vr}/right_controller_status_ready_low.png |  Bin
 .../images/vr}/tracker_status_off.png         |  Bin
 .../images/vr}/tracker_status_ready.png       |  Bin
 .../vr}/tracker_status_ready_charging.png     |  Bin
 .../images/vr}/tracker_status_ready_low.png   |  Bin
 src/shared/constants/accessType.js            |   13 +
 src/shared/constants/index.js                 |    1 +
 src/shared/constants/themes.js                |   75 +-
 src/shared/constants/ui.js                    |    7 +
 src/shared/utils/base/ui.js                   |   69 +-
 src/stores/gallery.js                         |   14 +-
 src/stores/settings/appearance.js             |  121 +-
 src/views/Charts/Charts.vue                   |    7 +-
 .../Charts/components/InstanceActivity.vue    |   31 +-
 src/views/Charts/components/MutualFriends.vue |   25 +-
 src/views/Favorites/FavoritesAvatar.vue       |    1 +
 src/views/Favorites/FavoritesFriend.vue       |    1 +
 src/views/Favorites/FavoritesWorld.vue        |    1 +
 src/views/Feed/Feed.vue                       |   64 +-
 src/views/FriendList/FriendList.vue           |  289 +++--
 src/views/FriendLog/FriendLog.vue             |   44 +-
 .../FriendsLocations/FriendsLocations.vue     |   34 +-
 .../components/FriendsLocationsCard.vue       |   57 +-
 src/views/GameLog/GameLog.vue                 |   95 +-
 src/views/Layout/AuthenticatedLayout.vue      |   17 +-
 src/views/Moderation/Moderation.vue           |   18 +-
 src/views/Notifications/Notification.vue      |  182 ++-
 src/views/PlayerList/PlayerList.vue           |  239 ++--
 .../components/PhotonEventTable.vue           |   15 +-
 src/views/Search/Search.vue                   |    6 +-
 src/views/Settings/Settings.vue               |    2 +-
 .../Settings/components/SimpleSwitch.vue      |    2 +-
 .../components/Tabs/AppearanceTab.vue         |   14 +-
 src/views/Settings/components/ThemePicker.vue |  207 ++++
 src/views/Sidebar/Sidebar.vue                 |   24 +-
 src/views/Sidebar/components/FriendItem.vue   |   12 +-
 .../GalleryDialog.vue => Gallery.vue}         |  114 +-
 src/views/Tools/Tools.vue                     |   20 +-
 .../components/GroupCalendarEventCard.vue     |   10 +-
 .../Tools/dialogs/ExportFriendsListDialog.vue |    2 +-
 .../Tools/dialogs/GroupCalendarDialog.vue     |   17 +-
 .../dialogs/ScreenshotMetadataDialog.vue      |    6 +-
 src/vr/Vr.vue                                 |   44 +-
 src/vr/vr.css                                 |   42 +-
 120 files changed, 3931 insertions(+), 2015 deletions(-)
 create mode 100644 src/assets/scss/noty.css
 create mode 100644 src/assets/scss/themes/app_legacy.scss
 delete mode 100644 src/components/NativeTooltip.vue
 create mode 100644 src/composables/useElementTheme.js
 create mode 100644 src/composables/useTableHeight.js
 rename src/{assets => public}/images/blank.png (100%)
 rename src/{assets => public}/images/flags.png (100%)
 rename src/{assets => public}/images/masks/askme.svg (100%)
 rename src/{assets => public}/images/masks/busy.svg (100%)
 rename src/{assets => public}/images/masks/joinme.svg (100%)
 rename src/{assets => public}/images/masks/phone.svg (100%)
 rename src/{assets => public}/images/masks/usercutout.svg (100%)
 rename src/{assets => public}/images/masks/usercutoutmobile.svg (100%)
 rename src/{vr/images => public/images/vr}/base_status_off.png (100%)
 rename src/{vr/images => public/images/vr}/base_status_ready.png (100%)
 rename src/{vr/images => public/images/vr}/controller_status_off.png (100%)
 rename src/{vr/images => public/images/vr}/controller_status_ready.png (100%)
 rename src/{vr/images => public/images/vr}/controller_status_ready_charging.png (100%)
 rename src/{vr/images => public/images/vr}/controller_status_ready_low.png (100%)
 rename src/{vr/images => public/images/vr}/headset_quest_status_off.png (100%)
 rename src/{vr/images => public/images/vr}/headset_quest_status_ready.png (100%)
 rename src/{vr/images => public/images/vr}/headset_quest_status_ready_charging.png (100%)
 rename src/{vr/images => public/images/vr}/headset_quest_status_ready_low.png (100%)
 rename src/{vr/images => public/images/vr}/left_controller_status_off.png (100%)
 rename src/{vr/images => public/images/vr}/left_controller_status_ready.png (100%)
 rename src/{vr/images => public/images/vr}/left_controller_status_ready_charging.png (100%)
 rename src/{vr/images => public/images/vr}/left_controller_status_ready_low.png (100%)
 rename src/{vr/images => public/images/vr}/other_status_off.png (100%)
 rename src/{vr/images => public/images/vr}/other_status_ready.png (100%)
 rename src/{vr/images => public/images/vr}/other_status_ready_charging.png (100%)
 rename src/{vr/images => public/images/vr}/other_status_ready_low.png (100%)
 rename src/{vr/images => public/images/vr}/right_controller_status_off.png (100%)
 rename src/{vr/images => public/images/vr}/right_controller_status_ready.png (100%)
 rename src/{vr/images => public/images/vr}/right_controller_status_ready_charging.png (100%)
 rename src/{vr/images => public/images/vr}/right_controller_status_ready_low.png (100%)
 rename src/{vr/images => public/images/vr}/tracker_status_off.png (100%)
 rename src/{vr/images => public/images/vr}/tracker_status_ready.png (100%)
 rename src/{vr/images => public/images/vr}/tracker_status_ready_charging.png (100%)
 rename src/{vr/images => public/images/vr}/tracker_status_ready_low.png (100%)
 create mode 100644 src/shared/constants/accessType.js
 create mode 100644 src/views/Settings/components/ThemePicker.vue
 rename src/views/Tools/{dialogs/GalleryDialog.vue => Gallery.vue} (94%)

diff --git a/package-lock.json b/package-lock.json
index 2de06cfa..96d34d58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,10 +15,6 @@
                 "@element-plus/icons-vue": "^2.3.2",
                 "@eslint/js": "^9.39.2",
                 "@fontsource-variable/inter": "^5.2.8",
-                "@fontsource-variable/noto-sans-jp": "^5.2.9",
-                "@fontsource-variable/noto-sans-kr": "^5.2.9",
-                "@fontsource-variable/noto-sans-sc": "^5.2.9",
-                "@fontsource-variable/noto-sans-tc": "^5.2.9",
                 "@kamiya4047/eslint-plugin-pretty-import": "^0.1.6",
                 "@sentry/vite-plugin": "^4.6.1",
                 "@sentry/vue": "^10.32.1",
@@ -47,12 +43,12 @@
                 "noty": "^3.2.0-beta-deprecated",
                 "pinia": "^3.0.4",
                 "prettier": "^3.7.4",
-                "remixicon": "^4.7.0",
+                "remixicon": "^4.8.0",
                 "sass-embedded": "^1.97.1",
                 "tailwindcss": "^4.1.18",
                 "vite": "^7.3.0",
                 "vue": "^3.5.26",
-                "vue-i18n": "^11.2.2",
+                "vue-i18n": "^11.2.8",
                 "vue-marquee-text-component": "^2.0.1",
                 "vue-router": "^4.6.4",
                 "vue-showdown": "^4.2.0",
@@ -2351,46 +2347,6 @@
                 "url": "https://github.com/sponsors/ayuhito"
             }
         },
-        "node_modules/@fontsource-variable/noto-sans-jp": {
-            "version": "5.2.9",
-            "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans-jp/-/noto-sans-jp-5.2.9.tgz",
-            "integrity": "sha512-osPL5f7dvGDjuMuFwDTGPLG37030D8X5zk+3BWea6txAVDFeE/ZIrKW0DY0uSDfRn9+NiKbiFn/2QvZveKXTog==",
-            "dev": true,
-            "license": "OFL-1.1",
-            "funding": {
-                "url": "https://github.com/sponsors/ayuhito"
-            }
-        },
-        "node_modules/@fontsource-variable/noto-sans-kr": {
-            "version": "5.2.9",
-            "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans-kr/-/noto-sans-kr-5.2.9.tgz",
-            "integrity": "sha512-g1BnJdJbnAgRUP8YxyPIm8npZVUbtt6VgtLnkGR7poa/RVbVGd27i+9138DmwRvtbKhJG1fPLQ/V3BonvFykRQ==",
-            "dev": true,
-            "license": "OFL-1.1",
-            "funding": {
-                "url": "https://github.com/sponsors/ayuhito"
-            }
-        },
-        "node_modules/@fontsource-variable/noto-sans-sc": {
-            "version": "5.2.9",
-            "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans-sc/-/noto-sans-sc-5.2.9.tgz",
-            "integrity": "sha512-ZEEpZlxjYEIVdg85K38mqaoeBcorrN3Z6MaIkwK5w5Dqn/e9v5uVIYr0ukoLsFxaVyEXSi/c3caOeMHjbOMtfA==",
-            "dev": true,
-            "license": "OFL-1.1",
-            "funding": {
-                "url": "https://github.com/sponsors/ayuhito"
-            }
-        },
-        "node_modules/@fontsource-variable/noto-sans-tc": {
-            "version": "5.2.9",
-            "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans-tc/-/noto-sans-tc-5.2.9.tgz",
-            "integrity": "sha512-GhtbSE8IZTP3vZj7Fu1G/PERxguMe3jryAbHovSd22Rs7aYdbXQD8vBqkTT/tkHIUn6t2IFReTfgKUoQBPCe+w==",
-            "dev": true,
-            "license": "OFL-1.1",
-            "funding": {
-                "url": "https://github.com/sponsors/ayuhito"
-            }
-        },
         "node_modules/@gar/promisify": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -2451,14 +2407,14 @@
             }
         },
         "node_modules/@intlify/core-base": {
-            "version": "11.2.2",
-            "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.2.2.tgz",
-            "integrity": "sha512-0mCTBOLKIqFUP3BzwuFW23hYEl9g/wby6uY//AC5hTgQfTsM2srCYF2/hYGp+a5DZ/HIFIgKkLJMzXTt30r0JQ==",
+            "version": "11.2.8",
+            "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.2.8.tgz",
+            "integrity": "sha512-nBq6Y1tVkjIUsLsdOjDSJj4AsjvD0UG3zsg9Fyc+OivwlA/oMHSKooUy9tpKj0HqZ+NWFifweHavdljlBLTwdA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@intlify/message-compiler": "11.2.2",
-                "@intlify/shared": "11.2.2"
+                "@intlify/message-compiler": "11.2.8",
+                "@intlify/shared": "11.2.8"
             },
             "engines": {
                 "node": ">= 16"
@@ -2468,13 +2424,13 @@
             }
         },
         "node_modules/@intlify/message-compiler": {
-            "version": "11.2.2",
-            "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.2.2.tgz",
-            "integrity": "sha512-XS2p8Ff5JxWsKhgfld4/MRQzZRQ85drMMPhb7Co6Be4ZOgqJX1DzcZt0IFgGTycgqL8rkYNwgnD443Q+TapOoA==",
+            "version": "11.2.8",
+            "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.2.8.tgz",
+            "integrity": "sha512-A5n33doOjmHsBtCN421386cG1tWp5rpOjOYPNsnpjIJbQ4POF0QY2ezhZR9kr0boKwaHjbOifvyQvHj2UTrDFQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@intlify/shared": "11.2.2",
+                "@intlify/shared": "11.2.8",
                 "source-map-js": "^1.0.2"
             },
             "engines": {
@@ -2485,9 +2441,9 @@
             }
         },
         "node_modules/@intlify/shared": {
-            "version": "11.2.2",
-            "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.2.2.tgz",
-            "integrity": "sha512-OtCmyFpSXxNu/oET/aN6HtPCbZ01btXVd0f3w00YsHOb13Kverk1jzA2k47pAekM55qbUw421fvPF1yxZ+gicw==",
+            "version": "11.2.8",
+            "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.2.8.tgz",
+            "integrity": "sha512-l6e4NZyUgv8VyXXH4DbuucFOBmxLF56C/mqh2tvApbzl2Hrhi1aTDcuv5TKdxzfHYmpO3UB0Cz04fgDT9vszfw==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -15566,9 +15522,9 @@
             }
         },
         "node_modules/remixicon": {
-            "version": "4.7.0",
-            "resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.7.0.tgz",
-            "integrity": "sha512-g2pHOofQWARWpxdbrQu5+K3C8ZbqguQFzE54HIMWFCpFa63pumaAltIgZmFMRQpKKBScRWQASQfWxS9asNCcHQ==",
+            "version": "4.8.0",
+            "resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.8.0.tgz",
+            "integrity": "sha512-8qTM/bWkmsAWitvcL9XrVPVdqHRrdmnNp4zCFBdmIHBygxfHWwoK6NzitbiMyRzjcXKBMlS/ab5M65/ZlxJTVA==",
             "dev": true,
             "license": "Apache-2.0"
         },
@@ -18493,14 +18449,14 @@
             }
         },
         "node_modules/vue-i18n": {
-            "version": "11.2.2",
-            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.2.2.tgz",
-            "integrity": "sha512-ULIKZyRluUPRCZmihVgUvpq8hJTtOqnbGZuv4Lz+byEKZq4mU0g92og414l6f/4ju+L5mORsiUuEPYrAuX2NJg==",
+            "version": "11.2.8",
+            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.2.8.tgz",
+            "integrity": "sha512-vJ123v/PXCZntd6Qj5Jumy7UBmIuE92VrtdX+AXr+1WzdBHojiBxnAxdfctUFL+/JIN+VQH4BhsfTtiGsvVObg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@intlify/core-base": "11.2.2",
-                "@intlify/shared": "11.2.2",
+                "@intlify/core-base": "11.2.8",
+                "@intlify/shared": "11.2.8",
                 "@vue/devtools-api": "^6.5.0"
             },
             "engines": {
diff --git a/package.json b/package.json
index 6de730fb..b81ed436 100644
--- a/package.json
+++ b/package.json
@@ -68,12 +68,12 @@
         "noty": "^3.2.0-beta-deprecated",
         "pinia": "^3.0.4",
         "prettier": "^3.7.4",
-        "remixicon": "^4.7.0",
+        "remixicon": "^4.8.0",
         "sass-embedded": "^1.97.1",
         "tailwindcss": "^4.1.18",
         "vite": "^7.3.0",
         "vue": "^3.5.26",
-        "vue-i18n": "^11.2.2",
+        "vue-i18n": "^11.2.8",
         "vue-marquee-text-component": "^2.0.1",
         "vue-router": "^4.6.4",
         "vue-showdown": "^4.2.0",
diff --git a/src/App.vue b/src/App.vue
index f8769e53..928d8732 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -56,11 +56,7 @@
     });
 </script>
 
-<style lang="scss" scoped>
-    :deep(.el-splitter-bar__dragger) {
-        width: 4px !important;
-    }
-
+<style scoped>
     /* Add title bar spacing for macOS */
     .x-app.with-macos-titlebar {
         padding-top: 28px;
diff --git a/src/app.css b/src/app.css
index 98bf2475..ec85be88 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,15 +1,16 @@
 /*
-Copyright(c) 2019-2025 pypy and individual contributors.
-All rights reserved.
-
-This work is licensed under the terms of the MIT license.
-For a copy, see <https://opensource.org/licenses/MIT>. 
+/* Copyright(c) 2019-2025 pypy and individual contributors.
+/* All rights reserved.
+/*
+/* This work is licensed under the terms of the MIT license.
+/* For a copy, see <https://opensource.org/licenses/MIT>.
 */
 
 @import 'tailwindcss';
 
 @import 'element-plus/dist/index.css';
 @import 'element-plus/theme-chalk/dark/css-vars.css';
+
 @import 'animate.css/animate.min.css';
 @import 'noty/lib/noty.css';
 @import 'remixicon/fonts/remixicon.css';
@@ -17,11 +18,12 @@ For a copy, see <https://opensource.org/licenses/MIT>.
 @import './assets/scss/flags.css';
 @import './assets/scss/animated-emoji.css';
 @import './assets/scss/fonts.css';
+@import './assets/scss/noty.css';
 
 :root {
     --font-western:
-        'ellipsis-font', -apple-system, 'Inter Variable', 'Segoe UI', 'Roboto',
-        'Ubuntu', 'Cantarell', 'DejaVu Sans', sans-serif;
+        'ellipsis-font', -apple-system, 'Inter', 'Segoe UI', 'Roboto', 'Ubuntu',
+        'Cantarell', 'DejaVu Sans', sans-serif;
     --font-symbol: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
     --font-fallback-cjk: sans-serif;
     --font-primary-cjk:
@@ -43,120 +45,605 @@ For a copy, see <https://opensource.org/licenses/MIT>.
     --font-primary-cjk:
         'Noto Sans TC Variable', 'Noto Sans JP Variable', 'Noto Sans KR Variable', 'Noto Sans SC Variable';
 }
-body {
-    font-family:
-        var(--font-western), var(--font-symbol), var(--font-primary-cjk),
-        var(--font-fallback-cjk);
-    margin: 0;
-}
-
 :root {
-    text-autospace: normal;
-}
+    --el-color-primary-light-9: color-mix(
+        in oklch,
+        var(--el-color-primary) 12%,
+        transparent
+    );
+    --el-bg-color: var(--color-white);
+    --el-bg-color-page: var(--color-zinc-50);
+    --el-bg-color-overlay: var(--color-white);
 
-@font-face {
-    font-family: 'ellipsis-font';
-    src: local('Times New Roman');
-    unicode-range: U+2026;
+    --el-text-color-secondary: var(--color-zinc-500);
+    --el-text-color-placeholder: var(--color-zinc-400);
+    --el-text-color-disabled: var(--color-zinc-300);
+
+    --el-border-color: var(--color-zinc-200);
+    --el-border-color-light: var(--color-zinc-200);
+
+    --el-border-color-lighter: var(--color-zinc-100);
+    --el-border-color-extra-light: var(--color-zinc-50);
+
+    --el-border-color-dark: var(--color-zinc-300);
+    --el-border-color-darker: var(--color-zinc-400);
+
+    --el-fill-color: var(--color-zinc-50);
+    --el-fill-color-light: var(--color-zinc-50);
+    --el-fill-color-lighter: var(--color-white);
+    --el-fill-color-extra-light: var(--color-zinc-50);
+
+    --el-fill-color-dark: var(--color-zinc-100);
+    --el-fill-color-darker: var(--color-zinc-200);
+
+    --el-color-success: var(--color-emerald-500);
+    --el-color-success-light-3: var(--color-emerald-400);
+    --el-color-success-light-5: var(--color-emerald-300);
+    --el-color-success-light-7: var(--color-emerald-200);
+    --el-color-success-dark-2: var(--color-emerald-600);
+
+    --el-color-warning: var(--color-amber-500);
+    --el-color-warning-light-3: var(--color-amber-400);
+    --el-color-warning-light-5: var(--color-amber-300);
+    --el-color-warning-light-7: var(--color-amber-200);
+    --el-color-warning-dark-2: var(--color-amber-600);
+
+    --el-color-danger: var(--color-red-500);
+    --el-color-danger-light-3: var(--color-red-400);
+    --el-color-danger-light-5: var(--color-red-300);
+    --el-color-danger-light-7: var(--color-red-200);
+    --el-color-danger-dark-2: var(--color-red-600);
+
+    --el-color-info: var(--color-zinc-500);
+    --el-color-info-light-3: var(--color-zinc-400);
+    --el-color-info-light-5: var(--color-zinc-300);
+    --el-color-info-light-7: var(--color-zinc-200);
+    --el-color-info-dark-2: var(--color-zinc-600);
+
+    --el-border-radius-small: var(--radius-sm);
+    --el-border-radius-base: var(--radius-lg);
+    --el-border-radius-round: var(--radius-xl);
+
+    --el-box-shadow: var(--shadow-md);
+    --el-box-shadow-light: var(--shadow-sm);
+    --el-box-shadow-lighter: var(--shadow-xs);
+
+    --el-component-size-small: 30px;
+    --el-component-size: 36px;
+    --el-component-size-large: 40px;
+
+    --el-font-size-base: 14px;
+
+    --el-text-color-primary: var(--color-zinc-950);
+    --el-text-color-regular: var(--color-zinc-800);
+
+    --el-border-color-hover: var(--el-color-primary);
+    --el-input-focus-border-color: var(--el-color-primary);
+
+    --el-disabled-bg-color: var(--color-zinc-100);
+    --el-disabled-text-color: var(--color-zinc-400);
+    --el-disabled-border-color: var(--color-zinc-200);
+
+    --el-mask-color: color-mix(in oklch, var(--color-white) 72%, transparent);
+
+    --el-menu-hover-bg-color: color-mix(
+        in oklch,
+        var(--el-text-color-primary) 6%,
+        transparent
+    );
+
+    --x-scrollbar-size: 6px;
+    --x-scrollbar-radius: 4px;
+    --x-scrollbar-track-color: transparent;
+    --x-scrollbar-thumb-color: color-mix(
+        in oklch,
+        var(--el-text-color-secondary) 30%,
+        transparent
+    );
+    --x-scrollbar-thumb-hover-color: color-mix(
+        in oklch,
+        var(--el-text-color-secondary) 50%,
+        transparent
+    );
+    --x-scrollbar-thumb-active-color: color-mix(
+        in oklch,
+        var(--el-text-color-secondary) 60%,
+        transparent
+    );
+
+    --x-table-user-text-color: var(--color-zinc-900);
+
+    --x-popper-bg: var(--el-bg-color-overlay);
+    --x-popper-border-color: var(--el-border-color-light);
+    --x-popper-text-color: var(--el-text-color-regular);
+    --x-popper-shadow: var(--el-box-shadow-light);
+    --x-tooltip-border-color: var(--color-zinc-700);
+
+    --el-popover-bg-color: var(--x-popper-bg);
+    --el-popover-border-color: var(--x-popper-border-color);
+    --el-tooltip-bg-color: var(--color-zinc-900);
+    --el-tooltip-text-color: var(--color-zinc-100);
 }
 
 html {
     overflow: hidden;
 }
 
-a {
-    color: #409eff;
+body {
+    font-family:
+        var(--font-western), var(--font-symbol), var(--font-primary-cjk),
+        var(--font-fallback-cjk);
+    background-color: var(--el-bg-color-page);
+    background-image:
+        radial-gradient(
+            circle at 14% 18%,
+            color-mix(in oklch, var(--el-color-primary) 18%, transparent),
+            transparent 28%
+        ),
+        radial-gradient(
+            circle at 88% 4%,
+            color-mix(in oklch, var(--el-color-primary) 14%, transparent),
+            transparent 24%
+        ),
+        linear-gradient(
+            180deg,
+            color-mix(in oklch, var(--color-white) 70%, transparent),
+            color-mix(in oklch, var(--color-white) 92%, transparent)
+        );
+    color: var(--el-text-color-primary);
+    margin: 0;
 }
 
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+html.dark,
+:root.dark,
+:root[data-theme='dark'] {
+    --el-bg-color: var(--color-neutral-950);
+    --el-bg-color-page: var(--color-neutral-950);
+    --el-bg-color-overlay: var(--color-neutral-900);
+
+    --el-text-color-primary: var(--color-neutral-50);
+    --el-text-color-regular: var(--color-neutral-200);
+    --el-text-color-secondary: var(--color-neutral-400);
+    --el-text-color-placeholder: var(--color-neutral-500);
+    --el-text-color-disabled: var(--color-neutral-600);
+
+    --el-border-color: var(--color-neutral-800);
+    --el-border-color-light: var(--color-neutral-800);
+    --el-border-color-lighter: var(--color-neutral-900);
+    --el-border-color-extra-light: var(--color-neutral-950);
+    --el-border-color-dark: var(--color-neutral-700);
+    --el-border-color-darker: var(--color-neutral-600);
+    --el-border-color-hover: var(--el-color-primary-dark-2);
+    --el-input-focus-border-color: var(--el-color-primary-dark-2);
+
+    --el-fill-color: var(--color-neutral-900);
+    --el-fill-color-light: var(--color-neutral-800);
+    --el-fill-color-lighter: var(--color-neutral-700);
+    --el-fill-color-extra-light: var(--color-neutral-800);
+
+    --el-fill-color-dark: var(--color-neutral-950);
+    --el-fill-color-darker: var(--color-neutral-950);
+
+    --el-color-info: var(--color-neutral-300);
+    --el-color-info-light-3: var(--color-neutral-200);
+    --el-color-info-light-5: var(--color-neutral-300);
+    --el-color-info-light-7: var(--color-neutral-400);
+    --el-color-info-dark-2: var(--color-neutral-200);
+
+    --el-tooltip-bg-color: var(--color-neutral-100);
+    --el-tooltip-text-color: var(--color-neutral-900);
+    --x-tooltip-border-color: var(--color-neutral-300);
+
+    --el-disabled-bg-color: var(--color-neutral-900);
+    --el-disabled-text-color: var(--color-neutral-600);
+    --el-disabled-border-color: var(--color-neutral-800);
+
+    --el-menu-hover-bg-color: color-mix(
+        in oklch,
+        var(--color-white) 16%,
+        transparent
+    );
+
+    --el-mask-color: color-mix(
+        in oklch,
+        var(--color-neutral-950) 30%,
+        transparent
+    );
+
+    --x-el-hover-bg-color-dark: color-mix(
+        in oklch,
+        var(--el-color-primary-dark-2) 30%,
+        transparent
+    );
+
+    --x-scrollbar-thumb-color: color-mix(
+        in oklch,
+        var(--el-text-color-secondary) 40%,
+        transparent
+    );
+    --x-scrollbar-thumb-hover-color: color-mix(
+        in oklch,
+        var(--el-text-color-secondary) 60%,
+        transparent
+    );
+    --x-scrollbar-thumb-active-color: color-mix(
+        in oklch,
+        var(--el-text-color-secondary) 70%,
+        transparent
+    );
+
+    --x-table-user-text-color: var(--color-white);
+
+    .el-button {
+        --el-button-disabled-bg-color: var(--color-neutral-900);
+        --el-button-disabled-border-color: var(--color-neutral-800);
+        --el-button-hover-bg-color: var(--x-el-hover-bg-color-dark);
+        --el-button-hover-border-color: var(--el-color-primary-dark-2);
+        --el-button-hover-text-color: var(--el-color-primary-dark-2);
+        box-shadow: none;
+    }
+
+    --x-el-button-plain-border-color: color-mix(
+        in oklch,
+        var(--el-color-primary) 55%,
+        var(--el-bg-color) 45%
+    );
+
+    .el-button--primary.is-plain {
+        --el-button-border-color: var(--x-el-button-plain-border-color);
+    }
+
+    .el-menu-item {
+        color: var(--color-neutral-200);
+    }
+
+    .el-table .el-table__empty-block {
+        background-color: var(--el-bg-color-page);
+    }
+
+    --x-dark-surface-border-color: color-mix(
+        in oklch,
+        var(--color-white) 10%,
+        transparent
+    );
+
+    #x-app .x-container {
+        border-radius: var(--el-border-radius-round);
+        border: 0.666667px solid var(--x-dark-surface-border-color) !important;
+        box-shadow: none !important;
+    }
+
+    .el-dialog,
+    .el-message-box {
+        border: 0.666667px solid var(--x-dark-surface-border-color) !important;
+        box-shadow: none !important;
+    }
+
+    .el-dialog {
+        --el-dialog-border-radius: var(--el-border-radius-base);
+        background-color: var(--color-neutral-950) !important;
+    }
+
+    .el-message-box {
+        --el-messagebox-border-radius: var(--el-border-radius-small);
+        background-color: var(--color-neutral-950) !important;
+    }
+
+    .el-button:not(.is-disabled):not(.el-button--primary):not(
+            .el-button--success
+        ):not(.el-button--warning):not(.el-button--danger):not(
+            .el-button--info
+        ):not(.el-button--text):not(.el-button--link):not(.is-text):not(
+            .is-link
+        ):hover {
+        background-color: var(--el-button-hover-bg-color) !important;
+        border-color: var(--el-button-hover-border-color) !important;
+        color: var(--el-button-hover-text-color) !important;
+    }
+
+    .el-pagination .el-pager li.is-active {
+        background-color: color-mix(
+            in oklch,
+            var(--el-color-primary) 18%,
+            transparent
+        ) !important;
+        color: var(--el-color-primary) !important;
+    }
+
+    .el-select-dropdown__item.is-hovering,
+    .el-select-dropdown__item:hover {
+        background-color: var(--x-el-hover-bg-color-dark) !important;
+    }
+
+    .el-dropdown-menu__item:not(.is-disabled):hover,
+    .el-dropdown-menu__item:not(.is-disabled):focus,
+    .el-dropdown-menu__item:not(.is-disabled).is-focus {
+        background-color: color-mix(
+            in oklch,
+            var(--color-white) 8%,
+            transparent
+        ) !important;
+    }
+
+    .el-splitter-bar__dragger:hover:not(.is-disabled)::before {
+        background-color: var(--el-color-primary-dark-2);
+    }
+
+    .el-pagination .btn-prev:disabled,
+    .el-pagination .btn-next:disabled {
+        background-color: transparent;
+    }
 }
 
-::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.05);
+html.dark body,
+:root.dark body,
+:root[data-theme='dark'] body {
+    background-image:
+        radial-gradient(
+            circle at 14% 18%,
+            color-mix(in oklch, var(--el-color-primary) 16%, transparent),
+            transparent 30%
+        ),
+        radial-gradient(
+            circle at 88% 4%,
+            color-mix(in oklch, var(--el-color-primary) 12%, transparent),
+            transparent 26%
+        ),
+        linear-gradient(
+            180deg,
+            color-mix(in oklch, var(--color-neutral-950) 92%, transparent),
+            var(--color-neutral-950)
+        );
+}
+
+html.dark .el-overlay,
+:root.dark .el-overlay,
+:root[data-theme='dark'] .el-overlay {
+    background-color: var(--el-mask-color) !important;
+}
+
+html.dark .notify::after,
+:root.dark .notify::after,
+:root[data-theme='dark'] .notify::after {
+    background: var(--color-white);
+}
+
+html.dark .x-friend-item > .detail > .extra,
+:root.dark .x-friend-item > .detail > .extra,
+:root[data-theme='dark'] .x-friend-item > .detail > .extra {
+    color: var(--color-neutral-300);
+}
+
+#x-app {
+    background: var(--el-bg-color-page);
+    color: var(--el-text-color-primary);
+}
+
+#x-app .x-container {
+    padding: 14px;
     border-radius: 16px;
+    background-color: var(--el-bg-color);
+    height: calc(100% - 20px);
+    margin: 10px 6px 10px 1px;
+
+    --tw-shadow:
+        0 1px 3px 0
+            var(
+                --tw-shadow-color,
+                color-mix(in oklch, var(--color-zinc-950) 10%, transparent)
+            ),
+        0 1px 2px -1px
+            var(
+                --tw-shadow-color,
+                color-mix(in oklch, var(--color-zinc-950) 10%, transparent)
+            );
+    box-shadow:
+        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
-::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 16px;
+#x-app .x-aside-container {
+    background: var(--el-bg-color-page);
 }
 
-.color-palettes {
-    background: #409eff;
-    background: #67c23a;
-    background: #e6a23c;
-    background: #f56c6c;
-    background: #909399;
-    background: #fd9200;
-    background: #e6e6e6;
-    background: #c0c4cc;
+#x-app a {
+    color: var(--el-color-primary);
 }
 
-.el-icon.is-loading {
-    animation: rotating 2s linear infinite;
+#x-app a:hover {
+    color: var(--el-color-primary-dark-2);
 }
 
-.noty_layout {
-    word-break: break-all;
+.el-select__wrapper {
+    height: var(--el-component-size);
+    padding: 0 12px;
 }
 
-.noty_theme__mint.noty_bar {
-    position: relative;
-    margin: 4px 0;
+.el-table {
+    --el-table-row-hover-bg-color: color-mix(
+        in oklch,
+        var(--el-text-color-primary) 6%,
+        transparent
+    );
+    --el-table-border-color: var(--el-border-color);
+    background-color: var(--el-bg-color-overlay);
+    border: 1px solid var(--el-border-color);
+    border-radius: 10px;
     overflow: hidden;
-    border-radius: 2px;
 }
 
-.noty_theme__mint.noty_bar .noty_body {
-    padding: 10px;
-    font-size: 14px;
+.el-input__wrapper:focus-within,
+.el-textarea__inner:focus,
+.el-select__wrapper.is-focused,
+.el-select__wrapper:focus-within,
+.el-button:focus-visible {
+    border-color: var(--el-input-focus-border-color);
+    box-shadow: 0 0 0 1px
+        color-mix(in oklch, var(--el-input-focus-border-color) 70%, transparent);
 }
 
-.noty_theme__mint.noty_bar .noty_buttons {
-    padding: 10px;
+.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+    border-bottom: 1px solid var(--el-border-color-light);
 }
 
-.noty_theme__mint.noty_type__alert,
-.noty_theme__mint.noty_type__notification {
-    color: #2f2f2f;
-    background-color: #fff;
-    border-bottom: 1px solid #d1d1d1;
+.el-table__expand-column.el-table__cell {
+    padding: 8px 0 8px 12px !important;
+    & > .cell {
+        & i {
+            color: var(--el-text-color-placeholder);
+        }
+    }
 }
 
-.noty_theme__mint.noty_type__warning {
-    color: #fff;
-    background-color: #ffae42;
-    border-bottom: 1px solid #e89f3c;
+.el-table .el-table__cell:not(.el-table__expand-column.el-table__cell) {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--el-border-color-light);
+    font-size: 13px;
+    color: var(--el-text-color-regular);
 }
 
-.noty_theme__mint.noty_type__error {
-    color: #fff;
-    background-color: #de636f;
-    border-bottom: 1px solid #ca5a65;
+.el-message-box {
+    --el-messagebox-border-radius: var(--el-border-radius-base);
 }
 
-.noty_theme__mint.noty_type__info,
-.noty_theme__mint.noty_type__information {
-    color: #fff;
-    background-color: #7f7eff;
-    border-bottom: 1px solid #7473e8;
+.el-button {
+    --el-button-font-weight: 500;
+    --el-button-disabled-bg-color: var(--color-zinc-100);
+    --el-button-disabled-border-color: var(--color-zinc-200);
+
+    --el-button-hover-bg-color: var(--el-color-primary-light-9);
+    --el-button-hover-border-color: var(--el-color-primary);
+    --el-button-hover-text-color: var(--el-color-primary);
+
+    --tw-shadow: 0 1px 2px 0
+        var(
+            --tw-shadow-color,
+            color-mix(in oklch, var(--color-zinc-950) 5%, transparent)
+        );
+    box-shadow:
+        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
-.noty_theme__mint.noty_type__success {
-    color: #fff;
-    background-color: #afc765;
-    border-bottom: 1px solid #a0b55c;
+.el-button:not(.is-disabled):not(.el-button--primary):not(
+        .el-button--success
+    ):not(.el-button--warning):not(.el-button--danger):not(
+        .el-button--info
+    ):not(.el-button--text):not(.el-button--link):not(.is-text):not(
+        .is-link
+    ):hover {
+    background-color: var(--el-button-hover-bg-color) !important;
+    border-color: var(--el-button-hover-border-color) !important;
+    color: var(--el-button-hover-text-color) !important;
 }
 
-.el-table__expanded-cell[class*='cell'] {
-    padding: 20px 30px;
+.el-tag {
+    --el-tag-border-radius: var(--el-border-radius-round);
+    transition: none;
+    --el-tag-font-size: 12px;
+    border-color: var(--el-border-color);
 }
 
-.el-table--small .cell {
-    /* fix expand arrow position */
-    padding: 0px;
+.is-compact-table
+    .el-table
+    .el-table__cell:not(
+        .el-table_1_column_1.el-table__expand-column.el-table__cell
+    ) {
+    padding: 4px 10px !important;
+}
+
+.is-compact-table .el-table_1_column_1.el-table__expand-column.el-table__cell {
+    padding: 4px 0 4px 6px !important;
+}
+
+.el-menu-item {
+    color: var(--color-zinc-800);
+}
+
+.el-table .cell {
+    padding-left: 4px;
+    padding-right: 4px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+}
+
+.el-table th.el-table__cell {
+    font-weight: 400;
+    font-size: 13px;
+    color: var(--el-text-color-secondary);
+    letter-spacing: 0.3px;
+    background: var(--el-table-header-bg-color);
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: var(--el-table-row-hover-bg-color);
+}
+
+.el-table__row:hover > .el-table__cell,
+.el-table__row.hover-row > .el-table__cell {
+    background-color: var(--el-table-row-hover-bg-color) !important;
+}
+
+.el-table__row:hover .el-table__cell .cell {
+    display: revert;
+    -webkit-line-clamp: unset;
+    line-clamp: unset;
+}
+
+.el-tabs__content {
+    overflow-y: auto;
+}
+
+.el-dialog,
+.el-message-box {
+    word-break: break-word;
+}
+
+.el-card.x-image-selected {
+    border-color: var(--el-color-primary) !important;
+}
+
+.el-popper.x-quick-search .el-select-dropdown__item {
+    width: 100%;
+    height: auto;
+    padding: 0 10px;
+    font-size: 12px;
+    line-height: normal;
+}
+
+.el-menu {
+    background-color: transparent;
+}
+
+.el-menu-item i {
+    color: var(--el-text-color-primary);
+}
+
+.el-menu-item::before {
+    content: '';
+    position: absolute;
+    left: -4px;
+    top: 50%;
+    height: 36px;
+    width: 2px;
+    translate: 0 -50%;
+    border-radius: 4px;
+    background: color-mix(in oklch, var(--el-color-primary) 32%, transparent);
+    transition:
+        background-color 0.4s,
+        left 0.2s;
+}
+
+.el-menu-item.is-active::before {
+    left: 2px;
+    transition: left 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.552);
+}
+
+.el-sub-menu .el-menu-item.notify::after {
+    left: 18px;
 }
 
 .el-dialog__body {
@@ -165,18 +652,177 @@ a {
     overflow-wrap: break-word;
 }
 
+.el-dialog {
+    box-shadow: var(--shadow-md) !important;
+    overflow: hidden;
+    --el-dialog-border-radius: var(--el-border-radius-round);
+}
+
+.el-dialog__header {
+    margin-right: 0;
+    padding-bottom: 10px;
+    border-bottom: none !important;
+}
+
+.el-overlay {
+    backdrop-filter: blur(4px);
+    background-color: color-mix(
+        in oklch,
+        var(--color-zinc-950) 10%,
+        transparent
+    ) !important;
+}
+
+.el-loading-mask {
+    backdrop-filter: blur(4px);
+    background-color: var(--el-mask-color) !important;
+}
+
+.el-splitter-bar__dragger::before,
+.el-splitter-bar__dragger::after {
+    background-color: transparent;
+}
+
+.el-splitter-bar__dragger:hover:not(.is-disabled)::before {
+    background-color: var(--el-color-primary-light-3);
+}
+
+.el-splitter-bar__dragger-horizontal:hover:not(.is-disabled)::before {
+    width: 1px;
+}
+
+.el-splitter-bar__dragger-vertical:hover:not(.is-disabled)::before {
+    height: 1px;
+}
+
+.el-pagination {
+    --el-pagination-bg-color: transparent;
+    --el-pagination-button-bg-color: transparent;
+    font-weight: normal;
+}
+
+.el-pagination button {
+    border: none !important;
+}
+
+.el-pagination .el-pager li {
+    background: transparent !important;
+    border-radius: 6px;
+    border: none !important;
+    color: var(--el-text-color-secondary);
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+}
+
+.el-pagination .el-pager li.is-active {
+    background-color: var(--el-color-primary-light-9) !important;
+    color: var(--el-color-primary) !important;
+    font-weight: bold;
+}
+
+.el-popper__arrow {
+    display: none !important;
+}
+
+.el-tooltip__popper,
+.el-popper[role='tooltip'] {
+    border-radius: var(--el-border-radius-base);
+}
+
+.el-popover,
+.el-popover.el-popper,
+.el-popper[role='dialog'] {
+    background: var(--x-popper-bg) !important;
+    border: 1px solid var(--x-popper-border-color) !important;
+    color: var(--x-popper-text-color) !important;
+    box-shadow: var(--x-popper-shadow) !important;
+    border-radius: var(--el-border-radius-base);
+}
+
+.el-tooltip__popper .el-popper__arrow::before,
+.el-popper[role='tooltip'] .el-popper__arrow::before {
+    background: var(--el-tooltip-bg-color);
+    border: 1px solid var(--x-tooltip-border-color);
+}
+.el-popover .el-popper__arrow::before,
+.el-popover.el-popper .el-popper__arrow::before,
+.el-popper[role='dialog'] .el-popper__arrow::before {
+    background: var(--x-popper-bg);
+    border: 1px solid var(--x-popper-border-color);
+}
+
+.el-select__popper .el-select-dropdown,
+.el-dropdown__popper .el-dropdown-menu,
+.el-popper[role='listbox'] {
+    background: var(--el-bg-color-overlay) !important;
+    border: 1px solid var(--el-border-color-light) !important;
+    color: var(--el-text-color-primary) !important;
+}
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--x-scrollbar-thumb-color)
+        var(--x-scrollbar-track-color);
+}
+
+::-webkit-scrollbar {
+    width: var(--x-scrollbar-size);
+    height: var(--x-scrollbar-size);
+}
+
+::-webkit-scrollbar-track {
+    background: var(--x-scrollbar-track-color);
+    border-radius: var(--x-scrollbar-radius);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--x-scrollbar-thumb-color);
+    border-radius: var(--x-scrollbar-radius);
+    transition: background-color var(--el-transition-duration);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--x-scrollbar-thumb-hover-color);
+}
+
+::-webkit-scrollbar-thumb:active {
+    background-color: var(--x-scrollbar-thumb-active-color);
+}
+
+::-webkit-scrollbar-button {
+    display: none !important;
+    width: 0;
+    height: 0;
+}
+
+::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
+.color-palettes {
+    background: var(--el-color-primary);
+    background: var(--el-color-success);
+    background: var(--el-color-warning);
+    background: var(--el-color-danger);
+    background: var(--el-color-info);
+    background: var(--el-color-warning);
+    background: var(--color-zinc-200);
+    background: var(--color-zinc-300);
+}
+
+.el-icon.is-loading {
+    animation: rotating 2s linear infinite;
+}
+
 .el-dialog__footer > .el-button + .el-button {
-    margin-left: 5px;
+    margin-left: 8px;
 }
 
 .x-link {
     cursor: pointer;
 }
 
-.x-link:hover {
-    text-decoration: underline;
-}
-
 .x-ellipsis {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -196,21 +842,20 @@ a {
     flex: 1;
     padding: 10px;
     overflow: hidden auto;
-    background: #fff;
+    background: var(--el-bg-color-page);
     box-sizing: border-box;
     height: 100%;
 }
 
 .x-login-container {
     position: absolute;
-    /* modal 시작이 2000이라서 */
     z-index: 1999;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
-    background: #fff;
+    background: var(--el-bg-color-page);
 }
 
 .x-login {
@@ -249,7 +894,7 @@ hr.x-vertical-divider {
     width: 100%;
     margin: 0;
     border: 0;
-    background: rgb(255 255 255 / 16%);
+    background: var(--el-border-color-light);
 }
 
 .x-saved-account-list {
@@ -267,41 +912,17 @@ hr.x-vertical-divider {
 .x-menu-container {
     flex: none;
     overflow: hidden auto;
-    background: #f8f8f8;
+    background: var(--el-bg-color-page);
 }
 
-.el-menu-item i {
-    color: #000;
-}
-
-.el-menu-item::before {
-    content: '';
+.notify::after {
     position: absolute;
-    left: -4px;
-    top: 50%;
-    height: 36px;
-    width: 3px;
-    translate: 0 -50%;
-    border-radius: 4px;
-    background: #303133;
-    transition:
-        background-color 0.4s,
-        left 0.2s;
-}
-
-.el-menu-item.is-active::before {
-    left: 2px;
-    transition: left 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.552);
-}
-
-.el-menu-item.notify::after {
-    position: absolute;
-    top: 4px;
-    right: 4px;
+    top: 45%;
+    left: 8px;
     width: 4px;
     height: 4px;
     content: '';
-    background: #303133;
+    background: var(--el-text-color-placeholder);
     border-radius: 50%;
 }
 
@@ -315,21 +936,13 @@ hr.x-vertical-divider {
     display: flex;
     flex: none;
     flex-direction: column;
-    background: #f8f8f8;
-    padding: 5px;
+    background: var(--el-bg-color-page);
+    padding: 13px 5px 5px 5px;
     order: 99;
     height: 100%;
     box-sizing: border-box;
 }
 
-.el-popper.x-quick-search .el-select-dropdown__item {
-    width: 100%;
-    height: auto;
-    padding: 0 10px;
-    font-size: 12px;
-    line-height: normal;
-}
-
 .x-friend-list {
     padding: 0 10px;
     overflow: hidden auto;
@@ -355,52 +968,27 @@ hr.x-vertical-divider {
 }
 
 .x-friend-list > .x-friend-group {
-    padding: 20px 0 5px;
+    padding: 16px 0 5px;
     font-size: 12px;
-    font-weight: bold;
 }
 
 .x-friend-item {
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    padding: 5px;
+    padding: 6px;
     font-size: 12px;
     cursor: pointer;
 }
 
-.x-friend-item:hover {
-    background: #f0f0f0;
-    border-radius: 2px;
-}
-
-.x-friend-item-no-hover:hover {
-    background: unset !important;
-}
-
-.x-friend-item-border:hover {
-    border-top-left-radius: 25px;
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-bottom-left-radius: 25px;
-}
-
-.x-aside-container > .x-friend-list > .x-friend-item:hover {
-    background: #fff;
-    border-radius: 2px;
-}
-
-.x-dialog .x-friend-item {
-    width: 167px;
-}
-
 .x-friend-item > .avatar {
     position: relative;
     display: inline-block;
     flex: none;
-    width: 40px;
-    height: 40px;
-    margin-right: 8px;
+    width: 36px;
+    height: 36px;
+    margin-right: 10px;
+    background-color: transparent;
 }
 
 .x-friend-item > img.avatar,
@@ -417,6 +1005,7 @@ img.friends-list-avatar {
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
+    background-color: transparent;
 }
 
 .x-friend-item > .avatar.active > img {
@@ -428,19 +1017,11 @@ img.friends-list-avatar {
     filter: none;
 }
 
-.x-user-badge-hidden {
-    filter: grayscale(1);
-}
-
-.x-user-badge:hover {
-    filter: none;
-}
-
 .x-friend-item > .avatar.online.mobile > img,
 .x-friend-item > .avatar.joinme.mobile > img,
 .x-friend-item > .avatar.askme.mobile > img,
 .x-friend-item > .avatar.busy.mobile > img {
-    mask-image: url(./assets/images/masks/usercutoutmobile.svg);
+    mask-image: url(/images/masks/usercutoutmobile.svg);
 }
 
 .x-friend-item > .avatar.online.mobile::after,
@@ -454,7 +1035,7 @@ img.friends-list-avatar {
     height: 14px;
     content: '';
     border-radius: 0px;
-    mask-image: url(./assets/images/masks/phone.svg);
+    mask-image: url(/images/masks/phone.svg);
 }
 
 .x-friend-item > .avatar.active > img,
@@ -463,7 +1044,7 @@ img.friends-list-avatar {
 .x-friend-item > .avatar.askme > img,
 .x-friend-item > .avatar.busy > img,
 .x-friend-item > .avatar.offline > img {
-    mask-image: url(./assets/images/masks/usercutout.svg);
+    mask-image: url(/images/masks/usercutout.svg);
 }
 
 .x-friend-item > .avatar.active::after,
@@ -492,17 +1073,17 @@ img.friends-list-avatar {
 
 .x-friend-item > .avatar.joinme::after {
     background: #409eff;
-    mask-image: url(./assets/images/masks/joinme.svg);
+    mask-image: url(/images/masks/joinme.svg);
 }
 
 .x-friend-item > .avatar.askme::after {
     background: #ff9500;
-    mask-image: url(./assets/images/masks/askme.svg);
+    mask-image: url(/images/masks/askme.svg);
 }
 
 .x-friend-item > .avatar.busy::after {
     background: #ff2c2c;
-    mask-image: url(./assets/images/masks/busy.svg);
+    mask-image: url(/images/masks/busy.svg);
 }
 
 .x-friend-item > .avatar.offline::after {
@@ -527,18 +1108,23 @@ img.friends-list-avatar {
 }
 
 .x-friend-item > .detail > .name {
-    font-weight: bold;
-    color: #303133;
+    font-weight: 500;
+    color: var(--el-text-color-primary);
+    line-height: 16px;
 }
 
 .x-friend-item > .detail > .extra,
 .extra {
-    font-weight: normal;
-    color: #606266;
+    color: var(--el-text-color-secondary);
+    font-size: 11px;
+    & > span > span:first-child {
+        scale: 0.9;
+        margin-right: 2px;
+    }
 }
 
 .x-friend-item > .vrcplus-icon {
-    border: 4px solid #dcdfe6;
+    border: 4px solid var(--el-border-color);
     border-radius: 20px;
     width: 200px;
     height: 200px;
@@ -546,7 +1132,7 @@ img.friends-list-avatar {
 }
 
 .x-friend-item > .current-vrcplus-icon {
-    border: 4px solid #67c23a;
+    border: 4px solid var(--el-color-success);
     cursor: default;
 }
 
@@ -557,13 +1143,46 @@ img.friends-list-avatar {
     object-fit: cover;
 }
 
+.x-friend-item:hover {
+    background: var(--el-menu-hover-bg-color);
+    border-radius: 8px;
+}
+
+.x-friend-item-no-hover:hover {
+    background: unset !important;
+}
+
+.x-friend-item-border:hover {
+    border-top-left-radius: 25px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 25px;
+}
+
+.x-aside-container > .x-friend-list > .x-friend-item:hover {
+    background: var(--el-bg-color-overlay);
+    border-radius: var(--el-border-radius-base);
+}
+
+.x-dialog .x-friend-item {
+    width: 167px;
+}
+
+.x-user-badge-hidden {
+    filter: grayscale(1);
+}
+
+.x-user-badge:hover {
+    filter: none;
+}
+
 .x-change-image-item {
     display: inline-block;
     padding: 4px 4px 0 4px;
 }
 
 .x-change-image-item:hover {
-    background: #f0f0f0;
+    background: var(--el-menu-hover-bg-color);
     border-radius: 2px;
 }
 
@@ -594,17 +1213,17 @@ i.x-user-status.online {
 
 i.x-user-status.joinme {
     background: #409eff;
-    mask-image: url(./assets/images/masks/joinme.svg);
+    mask-image: url(/images/masks/joinme.svg);
 }
 
 i.x-user-status.askme {
     background: #ff9500;
-    mask-image: url(./assets/images/masks/askme.svg);
+    mask-image: url(/images/masks/askme.svg);
 }
 
 i.x-user-status.busy {
     background: #ff2c2c;
-    mask-image: url(./assets/images/masks/busy.svg);
+    mask-image: url(/images/masks/busy.svg);
 }
 
 i.x-status-icon.green {
@@ -624,23 +1243,23 @@ i.x-status-icon.red {
 }
 
 .x-tag-friend {
-    color: rgb(255, 208, 0);
-    border-color: rgb(255, 208, 0) !important;
+    color: var(--color-amber-400);
+    border-color: var(--color-amber-400) !important;
 }
 
 .x-tag-mutual-friend {
-    color: #67c23a;
-    border-color: #67c23a !important;
+    color: var(--el-color-success);
+    border-color: var(--el-color-success) !important;
 }
 
 .x-tag-platform-pc {
-    color: #409eff;
-    border-color: #409eff !important;
+    color: #0078d4;
+    border-color: #0078d4 !important;
 }
 
 .x-tag-platform-quest {
-    color: #67c23a;
-    border-color: #67c23a !important;
+    color: #3ddc84;
+    border-color: #3ddc84 !important;
 }
 
 .x-tag-platform-ios {
@@ -649,13 +1268,13 @@ i.x-status-icon.red {
 }
 
 .x-tag-platform-other {
-    color: #ff4177;
-    border-color: #ff4177 !important;
+    color: var(--el-color-danger);
+    border-color: var(--el-color-danger) !important;
 }
 
 .x-tag-age-verification {
-    color: #5c70ec;
-    border-color: #5c70ec !important;
+    color: var(--el-color-primary-dark-2);
+    border-color: var(--el-color-primary-dark-2) !important;
 }
 
 .x-tag-border-left {
@@ -666,7 +1285,7 @@ i.x-status-icon.red {
 }
 
 .x-grey {
-    color: #909399;
+    color: var(--el-text-color-secondary);
 }
 
 .x-popover-image {
@@ -674,13 +1293,9 @@ i.x-status-icon.red {
     max-height: 100%;
 }
 
-.el-card.x-image-selected {
-    border-color: var(--el-color-primary) !important;
-}
-
 .options-container {
     margin-top: 30px;
-    padding: 0px 10px 10px 10px;
+    padding: 0 10px 10px 10px;
 }
 
 .options-container .header-bar {
@@ -732,21 +1347,6 @@ i.x-status-icon.red {
     vertical-align: top;
 }
 
-.x-dialog .el-button--success {
-    background-color: #67c23a !important;
-    border-color: #67c23a !important;
-}
-
-.x-dialog .el-button--danger {
-    background-color: #f56c6c !important;
-    border-color: #f56c6c !important;
-}
-
-.x-dialog .el-button--warning {
-    background-color: #e6a23c !important;
-    border-color: #e6a23c !important;
-}
-
 .avatar-info {
     cursor: pointer;
     width: fit-content;
@@ -755,17 +1355,17 @@ i.x-status-icon.red {
 
 .avatar-info-own {
     display: inline-block;
-    color: #e6a23c;
+    color: var(--el-color-warning);
 }
 
 .avatar-info-public {
     display: inline-block;
-    color: #67c23a;
+    color: var(--el-color-success);
 }
 
 .avatar-info-unknown {
     display: inline-block;
-    color: #f56c6c;
+    color: var(--el-color-danger);
 }
 
 .photon-event-table {
@@ -782,12 +1382,6 @@ i.x-status-icon.red {
     margin-bottom: -1px;
 }
 
-.el-dialog,
-.el-message-box {
-    border-radius: 28px;
-    word-break: break-word;
-}
-
 .dialog-title {
     font-weight: bold;
 }
@@ -797,10 +1391,6 @@ i.x-status-icon.red {
     top: 0 !important;
 }
 
-.el-tabs__content {
-    overflow-y: auto;
-}
-
 .x-aside-container .el-tabs,
 .x-aside-container .el-tabs__nav-wrap,
 .x-aside-container .el-tabs__item {
@@ -808,47 +1398,48 @@ i.x-status-icon.red {
     font-size: 13px;
 }
 
+.x-app > .x-container {
+    padding-top: 15px;
+}
+
 .x-text-removed {
     text-decoration: line-through;
-    color: #ff0000;
-    background-color: rgba(255, 0, 0, 0.2);
+    color: var(--el-color-danger);
+    background-color: color-mix(
+        in oklch,
+        var(--el-color-danger) 20%,
+        transparent
+    );
     padding: 2px 2px;
     border-radius: 4px;
 }
 
 .x-text-added {
-    color: rgb(35, 188, 35);
-    background-color: rgba(76, 255, 80, 0.2);
+    color: var(--el-color-success);
+    background-color: color-mix(
+        in oklch,
+        var(--el-color-success) 20%,
+        transparent
+    );
     padding: 2px 2px;
     border-radius: 4px;
 }
 
-/* expand table cell on hover, TODO: replace with a better solution */
-.el-table .cell {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-}
-
-.el-table__row:hover .el-table__cell .cell {
-    display: revert;
-    -webkit-line-clamp: unset;
-}
-
 .el-carousel__mask {
     display: none;
 }
 
-.el-dropdown-menu__item:not(.is-disabled):focus {
-    /* dropdown item focus blue background looks bad */
-    background-color: unset;
+.el-dropdown-menu__item {
+    padding: 2px 12px;
+    font-size: 12px;
 }
 
-:root {
-    --el-overlay-color-lighter: rgba(0, 0, 0, 0.15);
+.el-dropdown-menu__item--divided {
+    margin: 0;
+    padding-top: 8px;
+    border-top-color: var(--el-border-color-light);
 }
 
-/* fix fullscreen image viewer colors in dark mode */
 .toolbar-icon,
 .el-image-viewer__actions,
 .el-image-viewer__close {
diff --git a/src/assets/scss/flags.css b/src/assets/scss/flags.css
index 30bfe4fb..70dcfebd 100644
--- a/src/assets/scss/flags.css
+++ b/src/assets/scss/flags.css
@@ -3,7 +3,7 @@
     --offy: 14.5px;
 }
 .flags {
-    background: url('../images/flags.png') no-repeat;
+    background: url('/images/flags.png') no-repeat;
     background-size: calc(var(--offx) * 6);
     width: var(--offx);
     height: calc(var(--offx) / 72 * 52);
diff --git a/src/assets/scss/noty.css b/src/assets/scss/noty.css
new file mode 100644
index 00000000..4ef65de9
--- /dev/null
+++ b/src/assets/scss/noty.css
@@ -0,0 +1,53 @@
+/* Noty.js */
+
+.noty_layout {
+    word-break: break-all;
+}
+
+.noty_theme__mint.noty_bar {
+    position: relative;
+    margin: 4px 0;
+    overflow: hidden;
+    border-radius: 2px;
+}
+
+.noty_theme__mint.noty_bar .noty_body {
+    padding: 10px;
+    font-size: 14px;
+}
+
+.noty_theme__mint.noty_bar .noty_buttons {
+    padding: 10px;
+}
+
+.noty_theme__mint.noty_type__alert,
+.noty_theme__mint.noty_type__notification {
+    color: #2f2f2f;
+    background-color: #fff;
+    border-bottom: 1px solid #d1d1d1;
+}
+
+.noty_theme__mint.noty_type__warning {
+    color: #fff;
+    background-color: #ffae42;
+    border-bottom: 1px solid #e89f3c;
+}
+
+.noty_theme__mint.noty_type__error {
+    color: #fff;
+    background-color: #de636f;
+    border-bottom: 1px solid #ca5a65;
+}
+
+.noty_theme__mint.noty_type__info,
+.noty_theme__mint.noty_type__information {
+    color: #fff;
+    background-color: #7f7eff;
+    border-bottom: 1px solid #7473e8;
+}
+
+.noty_theme__mint.noty_type__success {
+    color: #fff;
+    background-color: #afc765;
+    border-bottom: 1px solid #a0b55c;
+}
diff --git a/src/assets/scss/themes/app_legacy.scss b/src/assets/scss/themes/app_legacy.scss
new file mode 100644
index 00000000..12008bf1
--- /dev/null
+++ b/src/assets/scss/themes/app_legacy.scss
@@ -0,0 +1,1052 @@
+@charset "utf-8";
+
+//
+// Copyright(c) 2019-2025 pypy and individual contributors.
+// All rights reserved.
+//
+// This work is licensed under the terms of the MIT license.
+// For a copy, see <https://opensource.org/licenses/MIT>.
+//
+
+@use '../fonts.css';
+@use '../flags.css';
+@use '../animated-emoji.css';
+@use 'element-plus/theme-chalk/src/index.scss' as *;
+
+@use 'element-plus/theme-chalk/src/dark/css-vars.scss';
+@use 'animate.css/animate.min.css';
+@use 'noty/lib/noty.css';
+@use 'remixicon/fonts/remixicon.css';
+
+:root {
+    --font-western:
+        'ellipsis-font', -apple-system, 'Inter', 'Segoe UI', 'Roboto', 'Ubuntu',
+        'Cantarell', 'DejaVu Sans', sans-serif;
+    --font-symbol: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    --font-fallback-cjk: sans-serif;
+    --font-primary-cjk:
+        'Noto Sans JP', 'Noto Sans SC', 'Noto Sans KR', 'Noto Sans TC';
+}
+:root[lang='zh-CN'] {
+    --font-primary-cjk:
+        'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC';
+}
+:root[lang='ja'] {
+    --font-primary-cjk:
+        'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC';
+}
+:root[lang='ko'] {
+    --font-primary-cjk:
+        'Noto Sans KR', 'Noto Sans JP', 'Noto Sans TC', 'Noto Sans SC';
+}
+:root[lang='zh-TW'] {
+    --font-primary-cjk:
+        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC';
+}
+body {
+    font-family:
+        var(--font-western), var(--font-symbol), var(--font-primary-cjk),
+        var(--font-fallback-cjk);
+}
+
+:root {
+    text-autospace: normal;
+}
+
+html {
+    overflow: hidden;
+}
+
+body {
+    margin: 0;
+}
+
+a {
+    color: #409eff;
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 16px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 16px;
+}
+
+.color-palettes {
+    background: #409eff;
+    background: #67c23a;
+    background: #e6a23c;
+    background: #f56c6c;
+    background: #909399;
+    background: #fd9200;
+    background: #e6e6e6;
+    background: #c0c4cc;
+}
+
+.el-icon.is-loading {
+    animation: rotating 2s linear infinite;
+}
+
+.noty_layout {
+    word-break: break-all;
+}
+
+.noty_theme__mint.noty_bar {
+    position: relative;
+    margin: 4px 0;
+    overflow: hidden;
+    border-radius: 2px;
+}
+
+.noty_theme__mint.noty_bar .noty_body {
+    padding: 10px;
+    font-size: 14px;
+}
+
+.noty_theme__mint.noty_bar .noty_buttons {
+    padding: 10px;
+}
+
+.noty_theme__mint.noty_type__alert,
+.noty_theme__mint.noty_type__notification {
+    color: #2f2f2f;
+    background-color: #fff;
+    border-bottom: 1px solid #d1d1d1;
+}
+
+.noty_theme__mint.noty_type__warning {
+    color: #fff;
+    background-color: #ffae42;
+    border-bottom: 1px solid #e89f3c;
+}
+
+.noty_theme__mint.noty_type__error {
+    color: #fff;
+    background-color: #de636f;
+    border-bottom: 1px solid #ca5a65;
+}
+
+.noty_theme__mint.noty_type__info,
+.noty_theme__mint.noty_type__information {
+    color: #fff;
+    background-color: #7f7eff;
+    border-bottom: 1px solid #7473e8;
+}
+
+.noty_theme__mint.noty_type__success {
+    color: #fff;
+    background-color: #afc765;
+    border-bottom: 1px solid #a0b55c;
+}
+
+// .el-table + .pagination-bar {
+//     margin-top: 15px;
+// }
+
+.el-table__expanded-cell[class*='cell'] {
+    padding: 20px 30px;
+}
+
+.el-table--small .cell {
+    // fix expand arrow position
+    padding: 0px;
+}
+
+// .el-table--mini .el-table__cell {
+//     padding: 5px 0;
+// }
+
+// .el-table .cell {
+//     display: -webkit-box;
+//     -webkit-box-orient: vertical;
+//     -webkit-line-clamp: 1;
+// }
+
+// .el-table__row:hover .el-table__cell .cell {
+//     display: revert;
+//     -webkit-line-clamp: unset;
+// }
+
+// .el-table th.is-sortable .cell {
+//     display: flex;
+//     align-items: center;
+// }
+
+// .el-table .caret-wrapper {
+//     margin-top: 4.5px;
+// }
+
+// .notification-table .el-table .cell {
+//     -webkit-line-clamp: 2;
+// }
+
+.el-dialog__body {
+    padding: 20px;
+    word-break: break-word;
+    overflow-wrap: break-word;
+}
+
+.el-dialog__footer > .el-button + .el-button {
+    margin-left: 5px;
+}
+
+.x-link {
+    cursor: pointer;
+}
+
+.x-link:hover {
+    text-decoration: underline;
+}
+
+.x-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.x-app {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    cursor: default;
+}
+
+.x-container {
+    position: relative;
+    flex: 1;
+    padding: 10px;
+    overflow: hidden auto;
+    background: #fff;
+    box-sizing: border-box;
+    height: 100%;
+}
+
+.x-login-container {
+    position: absolute;
+    // modal 시작이 2000이라서
+    z-index: 1999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+}
+
+.x-login {
+    display: grid;
+    grid-template-rows: repeat(2, auto);
+    align-items: center;
+    max-width: clamp(600px, 60svw, 800px);
+}
+
+.x-login-form-container {
+    display: grid;
+    gap: 8px;
+    height: 380px;
+}
+
+.x-login-form-container:has(> div:nth-child(3)) {
+    grid-template-columns: 1fr 1px 1fr;
+}
+
+.x-login-form-container > div {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    padding: 16px;
+    overflow-y: auto;
+}
+
+.x-scroll-wrapper {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+}
+
+hr.x-vertical-divider {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    border: 0;
+    background: rgb(255 255 255 / 16%);
+}
+
+.x-saved-account-list {
+    display: grid;
+
+    > .x-friend-item {
+        width: 100%;
+    }
+}
+
+.x-legal-notice-container {
+    margin-top: 8px;
+}
+
+.x-menu-container {
+    flex: none;
+    overflow: hidden auto;
+    background: #f8f8f8;
+}
+
+.el-menu-item i {
+    color: #000;
+}
+
+.el-menu-item::before {
+    content: '';
+    position: absolute;
+    left: -4px;
+    top: 50%;
+    height: 36px;
+    width: 3px;
+    translate: 0 -50%;
+    border-radius: 4px;
+    background: #303133;
+    transition:
+        background-color 0.4s,
+        left 0.2s;
+}
+
+.el-menu-item.is-active::before {
+    left: 2px;
+    transition: left 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.552);
+}
+
+.el-menu-item.notify::after {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 4px;
+    height: 4px;
+    content: '';
+    background: #303133;
+    border-radius: 50%;
+}
+
+.pending-update {
+    height: 56px;
+    width: 64px;
+    cursor: pointer;
+}
+
+.x-aside-container {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    background: #f8f8f8;
+    padding: 5px;
+    order: 99;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+// .el-popper.x-quick-search {
+//     width: 225px;
+//     min-width: 0 !important;
+//     border: none;
+// }
+
+.el-popper.x-quick-search .el-select-dropdown__item {
+    width: 100%;
+    height: auto;
+    padding: 0 10px;
+    font-size: 12px;
+    line-height: normal;
+}
+
+.x-friend-list {
+    padding: 0 10px;
+    overflow: hidden auto;
+}
+
+.x-friend-group > .el-icon-arrow-right {
+    transition: transform 0.3s;
+}
+
+.x-friend-group > .el-icon-arrow-right.rotate {
+    transform: rotate(90deg);
+}
+
+.x-aside-container > .x-friend-list {
+    flex: 1;
+}
+
+.x-dialog .x-friend-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    max-height: 300px;
+}
+
+.x-friend-list > .x-friend-group {
+    padding: 20px 0 5px;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.x-friend-item {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.x-friend-item:hover {
+    background: #f0f0f0;
+    border-radius: 2px;
+}
+
+.x-friend-item-no-hover:hover {
+    background: unset !important;
+}
+
+.x-friend-item-border:hover {
+    border-top-left-radius: 25px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 25px;
+}
+
+.x-aside-container > .x-friend-list > .x-friend-item:hover {
+    background: #fff;
+    border-radius: 2px;
+}
+
+// .el-select-dropdown__item .x-friend-item:hover {
+//     background: none;
+//     border-radius: 0;
+// }
+
+.x-dialog .x-friend-item {
+    width: 167px;
+}
+
+.x-friend-item > .avatar {
+    position: relative;
+    display: inline-block;
+    flex: none;
+    width: 40px;
+    height: 40px;
+    margin-right: 8px;
+}
+
+.x-friend-item > img.avatar,
+img.friends-list-avatar {
+    width: unset;
+    height: 22.5px;
+    margin-right: 0;
+    margin-left: 5px;
+    border-radius: 2px;
+}
+
+.x-friend-item > .avatar > img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.x-friend-item > .avatar.active > img {
+    filter: grayscale(1);
+}
+
+.x-friend-item:hover > .avatar.offline > img,
+.x-friend-item:hover > .avatar.active > img {
+    filter: none;
+}
+
+.x-user-badge-hidden {
+    filter: grayscale(1);
+}
+
+.x-user-badge:hover {
+    filter: none;
+}
+
+.x-friend-item > .avatar.online.mobile > img,
+.x-friend-item > .avatar.joinme.mobile > img,
+.x-friend-item > .avatar.askme.mobile > img,
+.x-friend-item > .avatar.busy.mobile > img {
+    mask-image: url(./assets/images/masks/usercutoutmobile.svg);
+}
+
+.x-friend-item > .avatar.online.mobile::after,
+.x-friend-item > .avatar.joinme.mobile::after,
+.x-friend-item > .avatar.askme.mobile::after,
+.x-friend-item > .avatar.busy.mobile::after {
+    position: absolute;
+    right: -2px;
+    bottom: 0px;
+    width: 14px;
+    height: 14px;
+    content: '';
+    border-radius: 0px;
+    mask-image: url(./assets/images/masks/phone.svg);
+}
+
+.x-friend-item > .avatar.active > img,
+.x-friend-item > .avatar.online > img,
+.x-friend-item > .avatar.joinme > img,
+.x-friend-item > .avatar.askme > img,
+.x-friend-item > .avatar.busy > img,
+.x-friend-item > .avatar.offline > img {
+    mask-image: url(./assets/images/masks/usercutout.svg);
+}
+
+.x-friend-item > .avatar.active::after,
+.x-friend-item > .avatar.online::after,
+.x-friend-item > .avatar.joinme::after,
+.x-friend-item > .avatar.askme::after,
+.x-friend-item > .avatar.busy::after,
+.x-friend-item > .avatar.offline::after {
+    position: absolute;
+    right: 1px;
+    bottom: 1px;
+    width: 9px;
+    height: 9px;
+    content: '';
+    background: #909399;
+    border-radius: 50%;
+}
+
+.x-friend-item > .avatar.active::after {
+    background: #f4e05e;
+}
+
+.x-friend-item > .avatar.online::after {
+    background: #67c23a;
+}
+
+.x-friend-item > .avatar.joinme::after {
+    background: #409eff;
+    mask-image: url(./assets/images/masks/joinme.svg);
+}
+
+.x-friend-item > .avatar.askme::after {
+    background: #ff9500;
+    mask-image: url(./assets/images/masks/askme.svg);
+}
+
+.x-friend-item > .avatar.busy::after {
+    background: #ff2c2c;
+    mask-image: url(./assets/images/masks/busy.svg);
+}
+
+.x-friend-item > .avatar.offline::after {
+    background: #909399;
+}
+
+.x-friend-item.offline > .avatar::after {
+    display: none;
+}
+
+.x-friend-item > .detail {
+    flex: 1;
+    overflow: hidden;
+}
+
+.x-friend-item > .detail > .name,
+.x-friend-item > .detail > .extra {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.x-friend-item > .detail > .name {
+    font-weight: bold;
+    color: #303133;
+}
+
+.x-friend-item > .detail > .extra,
+.extra {
+    font-weight: normal;
+    color: #606266;
+}
+
+.x-friend-item > .vrcplus-icon {
+    border: 4px solid #dcdfe6;
+    border-radius: 20px;
+    width: 200px;
+    height: 200px;
+    cursor: pointer;
+}
+
+.x-friend-item > .current-vrcplus-icon {
+    border: 4px solid #67c23a;
+    cursor: default;
+}
+
+.x-friend-item > .vrcplus-icon > img {
+    width: 100%;
+    height: 100%;
+    border-radius: 15px;
+    object-fit: cover;
+}
+
+.x-change-image-item {
+    display: inline-block;
+    padding: 4px 4px 0 4px;
+}
+
+.x-change-image-item:hover {
+    background: #f0f0f0;
+    border-radius: 2px;
+}
+
+// .x-change-image-item > img,
+// .x-change-image-item > .el-popover__reference-wrapper > img {
+//     width: 240px;
+//     height: 180px;
+// }
+
+// .x-dialog {
+//     max-width: 100%;
+// }
+
+.x-user-dialog > .el-dialog__header,
+.x-world-dialog > .el-dialog__header,
+.x-avatar-dialog > .el-dialog__header,
+.x-group-dialog > .el-dialog__header {
+    display: none;
+    padding: 0;
+}
+
+// .x-user-dialog > .el-dialog__body,
+// .x-world-dialog > .el-dialog__body,
+// .x-avatar-dialog > .el-dialog__body,
+// .x-group-dialog > .el-dialog__body {
+//     padding: 20px;
+// }
+
+// .el-popper.hex {
+//     min-width: auto;
+//     padding: 10px;
+//     font-family: monospace;
+//     text-align: center;
+// }
+
+i.x-user-status,
+i.x-status-icon {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background: #808080;
+    border-radius: 50%;
+}
+
+i.x-user-status.active {
+    background: #f4e05e;
+}
+
+i.x-user-status.online {
+    background: #67c23a;
+}
+
+i.x-user-status.joinme {
+    background: #409eff;
+    mask-image: url(./assets/images/masks/joinme.svg);
+}
+
+i.x-user-status.askme {
+    background: #ff9500;
+    mask-image: url(./assets/images/masks/askme.svg);
+}
+
+i.x-user-status.busy {
+    background: #ff2c2c;
+    mask-image: url(./assets/images/masks/busy.svg);
+}
+
+i.x-status-icon.green {
+    background: #67c23a;
+}
+
+i.x-status-icon.blue {
+    background: #409eff;
+}
+
+i.x-status-icon.orange {
+    background: #ff9500;
+}
+
+i.x-status-icon.red {
+    background: #ff2c2c;
+}
+
+.x-tag-friend {
+    color: rgb(255, 208, 0);
+    border-color: rgb(255, 208, 0) !important;
+}
+
+.x-tag-mutual-friend {
+    color: #67c23a;
+    border-color: #67c23a !important;
+}
+
+.x-tag-platform-pc {
+    color: #409eff;
+    border-color: #409eff !important;
+}
+
+.x-tag-platform-quest {
+    color: #67c23a;
+    border-color: #67c23a !important;
+}
+
+.x-tag-platform-ios {
+    color: #c7c7ce;
+    border-color: #c7c7ce !important;
+}
+
+.x-tag-platform-other {
+    color: #ff4177;
+    border-color: #ff4177 !important;
+}
+
+.x-tag-age-verification {
+    color: #5c70ec;
+    border-color: #5c70ec !important;
+}
+
+.x-tag-border-left {
+    border-left: 0.8px solid;
+    margin-left: 5px;
+    padding-left: 5px;
+    padding-bottom: 0.5px;
+}
+
+.x-grey {
+    color: #909399;
+}
+
+.x-popover-image {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.el-card.x-image-selected {
+    border-color: var(--el-color-primary) !important;
+}
+
+// .el-tree-node {
+//     white-space: normal;
+// }
+
+// .el-tree-node__content {
+//     height: auto;
+// }
+
+// .el-progress-bar {
+//     padding-right: 80px;
+//     margin-right: -85px;
+// }
+
+// .el-progress__text {
+//     color: #c8c8c8;
+// }
+
+// .x-user-dialog .el-textarea__inner {
+//     padding: 0;
+//     background: none;
+//     border: 0;
+//     border-radius: 2px;
+// }
+
+.options-container {
+    margin-top: 30px;
+    padding: 0px 10px 10px 10px;
+}
+
+.options-container .header-bar {
+    display: flex;
+    align-items: center;
+}
+
+.options-container .header {
+    font-weight: bold;
+    font-size: 20px;
+}
+
+.options-container .sub-header {
+    font-weight: bold;
+    font-size: 15px;
+}
+
+.options-container-item {
+    font-size: 12px;
+    margin-top: 5px;
+}
+
+.options-container-item .name {
+    display: inline-block;
+    width: 235px;
+}
+
+.toggle-switch {
+    display: inline-block;
+}
+
+.toggle-list {
+    font-size: 15px;
+}
+
+.toggle-list .toggle-item {
+    margin-bottom: 5px;
+}
+
+.toggle-list .toggle-name {
+    display: inline-block;
+    min-width: 190px;
+    padding-right: 10px;
+    text-align: right;
+}
+
+.color-picker {
+    font-size: 18px;
+    vertical-align: top;
+}
+
+// .el-color-picker__trigger {
+//     border: unset;
+// }
+
+// .el-color-picker__color {
+//     border: 0.5px solid #999;
+// }
+
+.x-dialog .el-button--success {
+    background-color: #67c23a !important;
+    border-color: #67c23a !important;
+}
+
+.x-dialog .el-button--danger {
+    background-color: #f56c6c !important;
+    border-color: #f56c6c !important;
+}
+
+.x-dialog .el-button--warning {
+    background-color: #e6a23c !important;
+    border-color: #e6a23c !important;
+}
+
+.avatar-info {
+    cursor: pointer;
+    width: fit-content;
+    vertical-align: top;
+}
+
+.avatar-info-own {
+    display: inline-block;
+    color: #e6a23c;
+}
+
+.avatar-info-public {
+    display: inline-block;
+    color: #67c23a;
+}
+
+.avatar-info-unknown {
+    display: inline-block;
+    color: #f56c6c;
+}
+
+// .el-form-item {
+//     margin-bottom: 4px;
+// }
+
+// .photon-event-table .el-table--mini .el-table__cell,
+// .current-instance-table .el-table--mini .el-table__cell {
+//     padding: 0;
+// }
+
+.photon-event-table {
+    margin-top: 20px;
+}
+
+.current-instance-table img.friends-list-avatar {
+    width: unset;
+    height: 16px;
+    margin-right: 0;
+    margin-left: 1px;
+    margin-top: 4px;
+    border-radius: 2px;
+    margin-bottom: -1px;
+}
+
+// .el-pagination .el-select .el-input .el-input__inner,
+// .el-input--mini .el-input__icon {
+//     height: 22px;
+// }
+
+// .el-pagination .btn-next {
+//     margin-right: 10px;
+// }
+
+.el-dialog,
+.el-message-box {
+    border-radius: 28px;
+    word-break: break-word;
+}
+
+// .el-tabs__nav-wrap::after {
+//     background-color: #e4e7ed14;
+// }
+
+.dialog-title {
+    font-weight: bold;
+}
+
+.vrc-instance-queue-message {
+    padding: 3px;
+    top: 0 !important;
+}
+
+// .vrc-instance-queue-message .el-message__content {
+//     margin-right: 20px;
+// }
+
+// .el-tabs {
+//     display: flex;
+//     flex-direction: column;
+// }
+
+.el-tabs__content {
+    // flex: 1;
+    // max-height: 100%;
+    overflow-y: auto;
+}
+
+.x-aside-container .el-tabs,
+.x-aside-container .el-tabs__nav-wrap,
+.x-aside-container .el-tabs__item {
+    padding: 0 !important;
+    font-size: 13px;
+}
+
+// .el-tabs__header {
+//     padding: 0 1px;
+// }
+
+// .zero-margin-tabs .el-tabs__header {
+//     margin-bottom: 0;
+// }
+
+// .x-friend-item .el-checkbox__inner,
+// .el-table__row .el-checkbox__inner {
+//     width: 28px;
+//     height: 28px;
+//     border-radius: 4px;
+// }
+
+// .x-friend-item .el-checkbox__inner::after,
+// .el-table__row .el-checkbox__inner::after {
+//     width: 8px;
+//     height: 14px;
+//     left: 8px;
+//     top: 2px;
+// }
+
+// .el-pagination .el-input .el-input__icon {
+//     line-height: 22px;
+// }
+
+// .el-dialog__body .el-tag--mini {
+//     line-height: 17px;
+// }
+
+// .el-table__expanded-cell .el-tag--mini {
+//     line-height: 18px;
+// }
+
+// .x-friend-item:hover .el-input__count {
+//     background: #f0f0f0;
+// }
+
+.x-app > .x-container {
+    padding-top: 15px;
+}
+
+// .el-collapse-item .el-tag--mini {
+//     line-height: 17px;
+// }
+
+.x-text-removed {
+    text-decoration: line-through;
+    color: #ff0000;
+    background-color: rgba(255, 0, 0, 0.2);
+    padding: 2px 2px;
+    border-radius: 4px;
+}
+
+.x-text-added {
+    color: rgb(35, 188, 35);
+    background-color: rgba(76, 255, 80, 0.2);
+    padding: 2px 2px;
+    border-radius: 4px;
+}
+
+// expand table cell on hover, TODO: replace with a better solution
+.el-table .cell {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+}
+
+.el-table__row:hover .el-table__cell .cell {
+    display: revert;
+    -webkit-line-clamp: unset;
+}
+
+.el-carousel__mask {
+    // looks bad
+    display: none;
+}
+
+// FIXME
+// Something changed the CSS of element-ui
+// The other parts are the same
+// It feels like can't fundamentally modify it
+// And can only fix it bit by bit by overriding
+// .el-switch__core:after {
+//     top: 1.5px;
+// }
+
+// .el-popover {
+//     text-align: left;
+//     word-break: break-word;
+// }
+
+.el-dropdown-menu__item:not(.is-disabled):focus {
+    // dropdown item focus blue background looks bad
+    background-color: unset;
+}
+
+:root {
+    --el-overlay-color-lighter: rgba(0, 0, 0, 0.15);
+}
+
+// fix fullscreen image viewer colors in dark mode
+.toolbar-icon,
+.el-image-viewer__actions,
+.el-image-viewer__close {
+    color: var(--el-color-info-dark-2);
+    background-color: var(--el-bg-color);
+}
+
+.el-alert__title {
+    padding: 5px;
+}
diff --git a/src/components/AvatarInfo.vue b/src/components/AvatarInfo.vue
index 4d96f9c9..7d613b2b 100644
--- a/src/components/AvatarInfo.vue
+++ b/src/components/AvatarInfo.vue
@@ -1,8 +1,8 @@
 <template>
     <div @click="confirm" class="avatar-info">
-        <span style="margin-right: 5px">{{ avatarName }}</span>
-        <span v-if="avatarType" :class="color" style="margin-right: 5px"><i :class="avatarTypeIcons" /></span>
-        <span v-if="avatarTags" style="color: #909399; font-family: monospace; font-size: 12px">{{ avatarTags }}</span>
+        <span v-if="avatarType" :class="color" class="mr-2"><i :class="avatarTypeIcons" /></span>
+        <span class="mr-2">{{ avatarName }}</span>
+        <span v-if="avatarTags" style="color: var(--el-text-color-secondary); font-size: 12px">{{ avatarTags }}</span>
     </div>
 </template>
 
@@ -17,7 +17,7 @@
         imageurl: String,
         userid: String,
         hintownerid: String,
-        hintavatarname: String,
+        hintavatarname: [String, Object],
         avatartags: Array
     });
 
@@ -45,7 +45,9 @@
         if (!props.imageurl) {
             avatarName.value = '';
         } else if (props.hintownerid) {
-            avatarName.value = props.hintavatarname;
+            if (typeof props.hintavatarname === 'string') {
+                avatarName.value = props.hintavatarname;
+            }
             ownerId = props.hintownerid;
         } else {
             try {
diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 124e4529..b3cf05be 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -4,6 +4,7 @@
             v-loading="loading"
             :data="paginatedData"
             v-bind="mergedTableProps"
+            :stripe="false"
             :default-sort="resolvedDefaultSort"
             @row-click="handleRowClick">
             <slot></slot>
@@ -102,7 +103,6 @@
             delete rest.defaultSort;
         }
         return {
-            stripe: true,
             ...rest
         };
     });
diff --git a/src/components/FullscreenImagePreview.vue b/src/components/FullscreenImagePreview.vue
index d6d79dff..134ede8b 100644
--- a/src/components/FullscreenImagePreview.vue
+++ b/src/components/FullscreenImagePreview.vue
@@ -168,7 +168,7 @@
     }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
     .toolbar-icon:hover {
         opacity: 1;
     }
diff --git a/src/components/InstanceInfo.vue b/src/components/InstanceInfo.vue
index 11bef7f1..74320955 100644
--- a/src/components/InstanceInfo.vue
+++ b/src/components/InstanceInfo.vue
@@ -15,9 +15,13 @@
                             {{ t('dialog.user.info.close_instance') }} </el-button
                         ><br /><br />
                     </template>
-                    <span><span style="color: #409eff">PC: </span>{{ props.instance.platforms.standalonewindows }}</span
+                    <span
+                        ><span style="color: var(--el-color-primary)">PC: </span
+                        >{{ props.instance.platforms.standalonewindows }}</span
                     ><br />
-                    <span><span style="color: #67c23a">Android: </span>{{ props.instance.platforms.android }}</span
+                    <span
+                        ><span style="color: var(--el-color-success)">Android: </span
+                        >{{ props.instance.platforms.android }}</span
                     ><br />
                     <span>{{ t('dialog.user.info.instance_game_version') }} {{ props.instance.gameServerVersion }}</span
                     ><br />
@@ -46,13 +50,13 @@
         <span v-if="props.friendcount" style="margin-left: 5px">({{ props.friendcount }})</span>
         <span
             v-if="state.isValidInstance && !props.instance.hasCapacityForYou"
-            style="margin-left: 5px; color: lightcoral"
+            style="margin-left: 5px; color: var(--el-color-danger)"
             >{{ t('dialog.user.info.instance_full') }}</span
         >
         <span v-if="props.instance.queueSize" style="margin-left: 5px"
             >{{ t('dialog.user.info.instance_queue') }} {{ props.instance.queueSize }}</span
         >
-        <span v-if="state.isAgeGated" style="margin-left: 5px; color: lightcoral">{{
+        <span v-if="state.isAgeGated" style="margin-left: 5px; color: var(--el-color-danger)">{{
             t('dialog.user.info.instance_age_gated')
         }}</span>
     </div>
diff --git a/src/components/Location.vue b/src/components/Location.vue
index 90920557..691fea64 100644
--- a/src/components/Location.vue
+++ b/src/components/Location.vue
@@ -1,24 +1,33 @@
 <template>
     <div>
-        <span v-if="!text" class="transparent">-</span>
-        <span v-show="text">
-            <span
-                :class="{ 'x-link': link && location !== 'private' && location !== 'offline' }"
-                @click="handleShowWorldDialog">
-                <el-icon :class="['is-loading', 'inline-block']" style="margin-right: 3px" v-if="isTraveling"
-                    ><Loading
-                /></el-icon>
-                <span>{{ text }}</span>
-            </span>
-            <span v-if="groupName" :class="{ 'x-link': link }" @click="handleShowGroupDialog">({{ groupName }})</span>
-            <span
-                v-if="region"
-                :class="['flags', 'inline-block', 'ml-5', region, 'transform-[translateY(3px)]']"></span>
-            <NativeTooltip v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
+        <div v-if="!text" class="transparent">-</div>
+        <div v-show="text" class="flex items-center">
+            <div v-if="region" :class="['flags', 'mr-1.5', region]"></div>
+            <el-tooltip
+                :content="`${t('dialog.new_instance.instance_id')}: #${instanceName}`"
+                :disabled="!instanceName"
+                :show-after="300"
+                placement="top">
+                <div
+                    :class="['x-location', { 'x-link': link && location !== 'private' && location !== 'offline' }]"
+                    class="inline-flex min-w-0 flex-nowrap items-center overflow-hidden"
+                    @click="handleShowWorldDialog">
+                    <el-icon :class="['is-loading']" class="mr-1" v-if="isTraveling"><Loading /></el-icon>
+                    <span class="min-w-0 truncate">{{ text }}</span>
+                    <span
+                        v-if="groupName"
+                        class="ml-0.5 whitespace-nowrap"
+                        :class="{ 'x-link': link }"
+                        @click.stop="handleShowGroupDialog">
+                        ({{ groupName }})
+                    </span>
+                </div>
+            </el-tooltip>
+            <el-tooltip v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
                 <el-icon :class="['inline-block', 'ml-5']" style="color: lightcoral"><WarnTriangleFilled /></el-icon>
-            </NativeTooltip>
+            </el-tooltip>
             <el-icon v-if="strict" :class="['inline-block', 'ml-5']"><Lock /></el-icon>
-        </span>
+        </div>
     </div>
 </template>
 
@@ -30,6 +39,7 @@
 
     import { useGroupStore, useInstanceStore, useSearchStore, useWorldStore } from '../stores';
     import { getGroupName, getWorldName, parseLocation } from '../shared/utils';
+    import { accessTypeLocaleKeyMap } from '../shared/constants';
 
     const { t } = useI18n();
 
@@ -67,6 +77,7 @@
     const isTraveling = ref(false);
     const groupName = ref('');
     const isClosed = ref(false);
+    const instanceName = ref('');
 
     let isDisposed = false;
     onBeforeUnmount(() => {
@@ -108,7 +119,8 @@
             isTraveling.value = true;
         }
         const L = parseLocation(instanceId);
-        setText(L, L.instanceName);
+        setText(L);
+        instanceName.value = L.instanceName;
         if (!L.isRealInstance) {
             return;
         }
@@ -116,7 +128,8 @@
         const instanceRef = cachedInstances.get(L.tag);
         if (typeof instanceRef !== 'undefined') {
             if (instanceRef.displayName) {
-                setText(L, instanceRef.displayName);
+                setText(L);
+                instanceName.value = instanceRef.displayName;
             }
             if (instanceRef.closedAt) {
                 isClosed.value = true;
@@ -147,7 +160,9 @@
         strict.value = L.strict;
     }
 
-    function setText(L, instanceName) {
+    function setText(L) {
+        const accessTypeLabel = translateAccessType(L.accessTypeName);
+
         if (L.isOffline) {
             text.value = 'Offline';
         } else if (L.isPrivate) {
@@ -156,13 +171,13 @@
             text.value = 'Traveling';
         } else if (typeof props.hint === 'string' && props.hint !== '') {
             if (L.instanceId) {
-                text.value = `${props.hint} #${instanceName} ${L.accessTypeName}`;
+                text.value = `${props.hint} · ${accessTypeLabel}`;
             } else {
                 text.value = props.hint;
             }
         } else if (L.worldId) {
             if (L.instanceId) {
-                text.value = `${L.worldId} #${instanceName} ${L.accessTypeName}`;
+                text.value = `${L.worldId} · ${accessTypeLabel}`;
             } else {
                 text.value = L.worldId;
             }
@@ -172,7 +187,7 @@
                     .then((name) => {
                         if (!isDisposed && name && currentInstanceId() === L.tag) {
                             if (L.instanceId) {
-                                text.value = `${name} #${instanceName} ${L.accessTypeName}`;
+                                text.value = `${name} · ${translateAccessType(L.accessTypeName)}`;
                             } else {
                                 text.value = name;
                             }
@@ -182,13 +197,21 @@
                         console.error(e);
                     });
             } else if (L.instanceId) {
-                text.value = `${ref.name} #${instanceName} ${L.accessTypeName}`;
+                text.value = `${ref.name} · ${accessTypeLabel}`;
             } else {
                 text.value = ref.name;
             }
         }
     }
 
+    function translateAccessType(accessTypeName) {
+        const key = accessTypeLocaleKeyMap[accessTypeName];
+        if (!key) {
+            return accessTypeName;
+        }
+        return t(key);
+    }
+
     function handleShowWorldDialog() {
         if (props.link) {
             let instanceId = currentInstanceId();
@@ -218,15 +241,13 @@
 </script>
 
 <style scoped>
-    .inline-block {
-        display: inline-block;
-    }
-
-    .ml-5 {
-        margin-left: 5px;
-    }
-
     .transparent {
         color: transparent;
     }
+
+    :global(html.dark .x-location),
+    :global(:root.dark .x-location),
+    :global(:root[data-theme='dark'] .x-location) {
+        color: var(--color-zinc-300);
+    }
 </style>
diff --git a/src/components/LocationWorld.vue b/src/components/LocationWorld.vue
index 9acb4eec..86af7413 100644
--- a/src/components/LocationWorld.vue
+++ b/src/components/LocationWorld.vue
@@ -1,14 +1,14 @@
 <template>
-    <span>
+    <span class="x-location-world">
+        <span v-if="region" :class="['flags', 'inline-block', 'mr-1.25', region]"></span>
         <span @click="showLaunchDialog" class="x-link">
-            <el-icon v-if="isUnlocked" :class="['inline-block', 'mr-5']"><Unlock /></el-icon>
-            <span>#{{ instanceName }} {{ accessTypeName }}</span>
+            <el-icon v-if="isUnlocked" :class="['inline-block', 'mr-1.25']"><Unlock /></el-icon>
+            <span> {{ accessTypeName }} #{{ instanceName }}</span>
         </span>
         <span v-if="groupName" @click="showGroupDialog" class="x-link">({{ groupName }})</span>
-        <span v-if="region" :class="['flags', 'inline-block', 'ml-5', region, 'transform-[translateY(3px)]']"></span>
-        <NativeTooltip v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
+        <el-tooltip v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
             <el-icon :class="['inline-block', 'ml-5']" style="color: lightcoral"><WarnTriangleFilled /></el-icon>
-        </NativeTooltip>
+        </el-tooltip>
         <el-icon v-if="strict" style="display: inline-block; margin-left: 5px"><Lock /></el-icon>
     </span>
 </template>
@@ -21,6 +21,7 @@
 
     import { useGroupStore, useInstanceStore, useLaunchStore } from '../stores';
     import { getGroupName, parseLocation } from '../shared/utils';
+    import { accessTypeLocaleKeyMap } from '../shared/constants';
 
     const { t } = useI18n();
     const { cachedInstances } = useInstanceStore();
@@ -52,7 +53,7 @@
     function parse() {
         const locObj = props.locationobject;
         location.value = locObj.tag;
-        accessTypeName.value = locObj.accessTypeName;
+        accessTypeName.value = translateAccessType(locObj.accessTypeName);
         strict.value = locObj.strict;
         shortName.value = locObj.shortName;
 
@@ -97,6 +98,14 @@
         }
     }
 
+    function translateAccessType(accessTypeNameRaw) {
+        const key = accessTypeLocaleKeyMap[accessTypeNameRaw];
+        if (!key) {
+            return accessTypeNameRaw;
+        }
+        return t(key);
+    }
+
     watch(() => props.locationobject, parse, { immediate: true });
 
     watch(
@@ -126,11 +135,9 @@
         display: inline-block;
     }
 
-    .ml-5 {
-        margin-left: 5px;
-    }
-
-    .mr-5 {
-        margin-right: 5px;
+    :global(html.dark .x-location-world),
+    :global(:root.dark .x-location-world),
+    :global(:root[data-theme='dark'] .x-location-world) {
+        color: var(--color-zinc-100);
     }
 </style>
diff --git a/src/components/NativeTooltip.vue b/src/components/NativeTooltip.vue
deleted file mode 100644
index 9fdeee09..00000000
--- a/src/components/NativeTooltip.vue
+++ /dev/null
@@ -1,537 +0,0 @@
-<template>
-    <span
-        ref="triggerEl"
-        class="vrcx-native-tooltip__trigger"
-        :style="triggerStyle"
-        @mouseenter="onEnter"
-        @mouseleave="onLeave"
-        @focusin="onEnter"
-        @focusout="onLeave"
-        @keydown.esc="close">
-        <slot />
-    </span>
-
-    <div
-        ref="tooltipEl"
-        class="vrcx-native-tooltip__content"
-        :class="[
-            placementClass,
-            {
-                'has-arrow': props.showArrow,
-                'is-open': isOpen,
-                'is-closing': isClosing
-            }
-        ]"
-        :style="contentStyle"
-        popover="manual"
-        role="tooltip"
-        @mouseenter="cancelClose"
-        @mouseleave="onLeave">
-        <slot name="content">
-            <span class="vrcx-native-tooltip__text" v-text="content" />
-        </slot>
-    </div>
-</template>
-
-<script setup>
-    import { computed, onBeforeUnmount, ref } from 'vue';
-
-    const props = defineProps({
-        content: {
-            type: String,
-            default: ''
-        },
-        showAfter: {
-            type: Number,
-            default: 0
-        },
-        placement: {
-            type: String,
-            default: 'top'
-        },
-        enterMs: {
-            type: Number,
-            default: 120
-        },
-        exitMs: {
-            type: Number,
-            default: 100
-        },
-        offset: {
-            type: Number,
-            default: 8
-        },
-        maxWidth: {
-            type: String,
-            default: '260px'
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        showArrow: {
-            type: Boolean,
-            default: true
-        }
-    });
-
-    const ARROW_SIZE_PX = 10;
-
-    const triggerEl = ref(null);
-    const tooltipEl = ref(null);
-
-    const isOpen = ref(false);
-    const isClosing = ref(false);
-
-    const anchorName = `--vrcx-tt-${Math.random().toString(36).slice(2, 10)}`;
-
-    const triggerStyle = computed(() => {
-        return {
-            'anchor-name': anchorName
-        };
-    });
-
-    const contentStyle = computed(() => {
-        const effectiveOffsetPx = props.offset + (props.showArrow ? ARROW_SIZE_PX / 2 : 0);
-        return {
-            'position-anchor': anchorName,
-            '--vrcx-tt-enter': `${props.enterMs}ms`,
-            '--vrcx-tt-exit': `${props.exitMs}ms`,
-            '--vrcx-tt-offset': `${effectiveOffsetPx}px`,
-            '--vrcx-tt-max-width': props.maxWidth,
-            '--vrcx-tt-shift-x': `${shiftX.value}px`,
-            '--vrcx-tt-shift-y': `${shiftY.value}px`,
-            '--vrcx-tt-arrow-x': `${arrowX.value}px`,
-            '--vrcx-tt-arrow-y': `${arrowY.value}px`
-        };
-    });
-
-    const placementClass = computed(() => {
-        const normalized = String(props.placement || 'top').toLowerCase();
-        return `is-${normalized}`;
-    });
-
-    const shiftX = ref(0);
-    const shiftY = ref(0);
-    const arrowX = ref(0);
-    const arrowY = ref(0);
-
-    const timers = {
-        open: 0,
-        close: 0,
-        hide: 0
-    };
-
-    function clearTimer(key) {
-        const id = timers[key];
-        if (id) {
-            window.clearTimeout(id);
-            timers[key] = 0;
-        }
-    }
-
-    function clearAllTimers() {
-        clearTimer('open');
-        clearTimer('close');
-        clearTimer('hide');
-    }
-
-    function resetOffsets() {
-        shiftX.value = 0;
-        shiftY.value = 0;
-        arrowX.value = 0;
-        arrowY.value = 0;
-    }
-
-    function isPopoverOpen(el) {
-        return Boolean(el?.matches?.(':popover-open'));
-    }
-
-    function updateViewportShift() {
-        const el = tooltipEl.value;
-        if (!el) {
-            return;
-        }
-
-        shiftX.value = 0;
-        shiftY.value = 0;
-
-        const rect = el.getBoundingClientRect();
-        const margin = 8;
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-
-        let dx = 0;
-        let dy = 0;
-
-        if (rect.left < margin) {
-            dx += margin - rect.left;
-        }
-        if (rect.right > vw - margin) {
-            dx -= rect.right - (vw - margin);
-        }
-        if (rect.top < margin) {
-            dy += margin - rect.top;
-        }
-        if (rect.bottom > vh - margin) {
-            dy -= rect.bottom - (vh - margin);
-        }
-
-        shiftX.value = Math.round(dx);
-        shiftY.value = Math.round(dy);
-    }
-
-    function updateArrowPosition() {
-        if (!props.showArrow) {
-            return;
-        }
-
-        const trigger = triggerEl.value;
-        const tooltip = tooltipEl.value;
-        if (!trigger || !tooltip) {
-            return;
-        }
-
-        const placement = String(props.placement || 'top').toLowerCase();
-
-        const tr = trigger.getBoundingClientRect();
-        const tt = tooltip.getBoundingClientRect();
-
-        const cs = window.getComputedStyle(tooltip);
-        const padLeft = Number.parseFloat(cs.paddingLeft) || 0;
-        const padRight = Number.parseFloat(cs.paddingRight) || 0;
-        const padTop = Number.parseFloat(cs.paddingTop) || 0;
-        const padBottom = Number.parseFloat(cs.paddingBottom) || 0;
-
-        const padding = 12;
-        const half = ARROW_SIZE_PX / 2;
-
-        if (placement.startsWith('top') || placement.startsWith('bottom')) {
-            const desired = tr.left + tr.width / 2 - tt.left;
-
-            const edgeLeft = Math.max(padding, padLeft) + half;
-            const edgeRight = Math.max(padding, padRight) + half;
-            const min = edgeLeft;
-            const max = tt.width - edgeRight;
-
-            const clamped = min > max ? tt.width / 2 : Math.min(Math.max(desired, min), max);
-            arrowX.value = Math.round(clamped);
-            arrowY.value = 0;
-            return;
-        }
-
-        if (placement.startsWith('left') || placement.startsWith('right')) {
-            const desired = tr.top + tr.height / 2 - tt.top;
-
-            const edgeTop = Math.max(padding, padTop) + half;
-            const edgeBottom = Math.max(padding, padBottom) + half;
-            const min = edgeTop;
-            const max = tt.height - edgeBottom;
-
-            const clamped = min > max ? tt.height / 2 : Math.min(Math.max(desired, min), max);
-            arrowY.value = Math.round(clamped);
-            arrowX.value = 0;
-        }
-    }
-
-    function open() {
-        if (props.disabled) {
-            return;
-        }
-
-        const el = tooltipEl.value;
-        if (!el) {
-            return;
-        }
-
-        clearAllTimers();
-
-        const doOpen = () => {
-            timers.open = 0;
-
-            const tooltip = tooltipEl.value;
-            if (!tooltip) {
-                return;
-            }
-
-            const alreadyOpen = isPopoverOpen(tooltip);
-
-            isClosing.value = false;
-            if (!alreadyOpen) {
-                isOpen.value = false;
-                tooltip.showPopover();
-            }
-
-            window.requestAnimationFrame(() => {
-                updateViewportShift();
-                window.requestAnimationFrame(() => {
-                    updateArrowPosition();
-                    isOpen.value = true;
-                });
-            });
-        };
-
-        if (props.showAfter > 0) {
-            timers.open = window.setTimeout(doOpen, props.showAfter);
-            return;
-        }
-
-        doOpen();
-    }
-
-    function close(immediate = false) {
-        const el = tooltipEl.value;
-        if (!el) {
-            return;
-        }
-
-        clearAllTimers();
-
-        if (immediate) {
-            isOpen.value = false;
-            isClosing.value = false;
-            resetOffsets();
-            if (isPopoverOpen(el)) {
-                el.hidePopover();
-            }
-            return;
-        }
-
-        isOpen.value = false;
-        isClosing.value = true;
-        timers.hide = window.setTimeout(() => {
-            timers.hide = 0;
-            isClosing.value = false;
-            resetOffsets();
-            if (isPopoverOpen(el)) {
-                el.hidePopover();
-            }
-        }, props.exitMs);
-    }
-
-    function onEnter() {
-        open();
-    }
-
-    function onLeave() {
-        clearTimer('open');
-        clearTimer('close');
-        timers.close = window.setTimeout(() => {
-            timers.close = 0;
-            close();
-        }, 80);
-    }
-
-    function cancelClose() {
-        clearTimer('close');
-        clearTimer('hide');
-        if (isPopoverOpen(tooltipEl.value)) {
-            isClosing.value = false;
-            isOpen.value = true;
-        }
-    }
-
-    onBeforeUnmount(() => {
-        close(true);
-        clearAllTimers();
-    });
-</script>
-
-<style scoped>
-    .vrcx-native-tooltip__trigger {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .vrcx-native-tooltip__content {
-        position: fixed;
-        inset: auto;
-
-        overflow: visible;
-        clip-path: none;
-
-        inline-size: max-content;
-        max-inline-size: min(var(--vrcx-tt-max-width), calc(100vw - 16px));
-        min-inline-size: 0;
-        padding: 6px 10px;
-
-        border-radius: var(--el-border-radius-base);
-        border: 0;
-
-        background: var(--el-tooltip-bg-color, color-mix(in srgb, var(--el-color-black) 88%, transparent));
-        color: var(--el-tooltip-text-color, var(--el-color-white));
-
-        box-shadow: none;
-
-        font-size: 12px;
-        line-height: 1.35;
-
-        white-space: pre-line;
-        word-break: break-word;
-        overflow-wrap: anywhere;
-
-        opacity: 0;
-
-        transition-property: opacity;
-        transition-duration: var(--vrcx-tt-exit);
-        transition-timing-function: linear;
-        transition-behavior: allow-discrete;
-
-        pointer-events: auto;
-    }
-
-    :global(html.dark) .vrcx-native-tooltip__content {
-        background: var(--el-tooltip-bg-color, color-mix(in srgb, var(--el-color-black) 96%, transparent));
-    }
-
-    .vrcx-native-tooltip__content.has-arrow::before {
-        content: '';
-        position: absolute;
-        width: 10px;
-        height: 10px;
-        background: var(--el-tooltip-bg-color, color-mix(in srgb, var(--el-color-black) 88%, transparent));
-        transform: rotate(45deg);
-    }
-
-    :global(html.dark) .vrcx-native-tooltip__content.has-arrow::before {
-        background: var(--el-tooltip-bg-color, color-mix(in srgb, var(--el-color-black) 96%, transparent));
-    }
-
-    .vrcx-native-tooltip__content.has-arrow.is-top::before,
-    .vrcx-native-tooltip__content.has-arrow.is-top-start::before,
-    .vrcx-native-tooltip__content.has-arrow.is-top-end::before {
-        left: var(--vrcx-tt-arrow-x, 50%);
-        bottom: -5px;
-        translate: -50% 0;
-    }
-
-    .vrcx-native-tooltip__content.has-arrow.is-bottom::before,
-    .vrcx-native-tooltip__content.has-arrow.is-bottom-start::before,
-    .vrcx-native-tooltip__content.has-arrow.is-bottom-end::before {
-        left: var(--vrcx-tt-arrow-x, 50%);
-        top: -5px;
-        translate: -50% 0;
-    }
-
-    .vrcx-native-tooltip__content.has-arrow.is-left::before,
-    .vrcx-native-tooltip__content.has-arrow.is-left-start::before,
-    .vrcx-native-tooltip__content.has-arrow.is-left-end::before {
-        top: var(--vrcx-tt-arrow-y, 50%);
-        right: -5px;
-        translate: 0 -50%;
-    }
-
-    .vrcx-native-tooltip__content.has-arrow.is-right::before,
-    .vrcx-native-tooltip__content.has-arrow.is-right-start::before,
-    .vrcx-native-tooltip__content.has-arrow.is-right-end::before {
-        top: var(--vrcx-tt-arrow-y, 50%);
-        left: -5px;
-        translate: 0 -50%;
-    }
-
-    .vrcx-native-tooltip__content:popover-open.is-open {
-        opacity: 1;
-        transition-duration: var(--vrcx-tt-enter);
-    }
-
-    .vrcx-native-tooltip__content:popover-open.is-closing {
-        opacity: 0;
-        transition-duration: var(--vrcx-tt-exit);
-    }
-
-    .vrcx-native-tooltip__content.is-top {
-        left: anchor(center);
-        bottom: anchor(top);
-        translate: calc(-50% + var(--vrcx-tt-shift-x)) calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-y));
-        transform-origin: bottom center;
-    }
-
-    .vrcx-native-tooltip__content.is-top-start {
-        left: anchor(left);
-        bottom: anchor(top);
-        translate: var(--vrcx-tt-shift-x) calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-y));
-        transform-origin: bottom left;
-    }
-
-    .vrcx-native-tooltip__content.is-top-end {
-        right: anchor(right);
-        bottom: anchor(top);
-        translate: var(--vrcx-tt-shift-x) calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-y));
-        transform-origin: bottom right;
-    }
-
-    .vrcx-native-tooltip__content.is-bottom {
-        left: anchor(center);
-        top: anchor(bottom);
-        translate: calc(-50% + var(--vrcx-tt-shift-x)) calc(var(--vrcx-tt-offset) + var(--vrcx-tt-shift-y));
-        transform-origin: top center;
-    }
-
-    .vrcx-native-tooltip__content.is-bottom-start {
-        left: anchor(left);
-        top: anchor(bottom);
-        translate: var(--vrcx-tt-shift-x) calc(var(--vrcx-tt-offset) + var(--vrcx-tt-shift-y));
-        transform-origin: top left;
-    }
-
-    .vrcx-native-tooltip__content.is-bottom-end {
-        right: anchor(right);
-        top: anchor(bottom);
-        translate: var(--vrcx-tt-shift-x) calc(var(--vrcx-tt-offset) + var(--vrcx-tt-shift-y));
-        transform-origin: top right;
-    }
-
-    .vrcx-native-tooltip__content.is-left {
-        right: anchor(left);
-        top: anchor(center);
-        translate: calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-x)) calc(-50% + var(--vrcx-tt-shift-y));
-        transform-origin: center right;
-    }
-
-    .vrcx-native-tooltip__content.is-left-start {
-        right: anchor(left);
-        top: anchor(top);
-        translate: calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-x)) var(--vrcx-tt-shift-y);
-        transform-origin: top right;
-    }
-
-    .vrcx-native-tooltip__content.is-left-end {
-        right: anchor(left);
-        bottom: anchor(bottom);
-        translate: calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-x)) var(--vrcx-tt-shift-y);
-        transform-origin: bottom right;
-    }
-
-    .vrcx-native-tooltip__content.is-right {
-        left: anchor(right);
-        top: anchor(center);
-        translate: calc(var(--vrcx-tt-offset) + var(--vrcx-tt-shift-x)) calc(-50% + var(--vrcx-tt-shift-y));
-        transform-origin: center left;
-    }
-
-    .vrcx-native-tooltip__content.is-right-start {
-        left: anchor(right);
-        top: anchor(top);
-        translate: calc(var(--vrcx-tt-offset) + var(--vrcx-tt-shift-x)) var(--vrcx-tt-shift-y);
-        transform-origin: top left;
-    }
-
-    .vrcx-native-tooltip__content.is-right-end {
-        left: anchor(right);
-        bottom: anchor(bottom);
-        translate: calc(var(--vrcx-tt-offset) + var(--vrcx-tt-shift-x)) var(--vrcx-tt-shift-y);
-        transform-origin: bottom left;
-    }
-
-    .vrcx-native-tooltip__content:not([class*='is-']) {
-        left: anchor(center);
-        bottom: anchor(top);
-        translate: calc(-50% + var(--vrcx-tt-shift-x)) calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-y));
-    }
-
-    .vrcx-native-tooltip__text {
-        display: block;
-        white-space: pre-line;
-    }
-</style>
diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
index 8950b70a..a1fa3d18 100644
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="x-menu-container nav-menu-container">
+    <div class="x-menu-container nav-menu-container" :class="{ 'is-collapsed': isCollapsed }">
         <template v-if="navLayoutReady">
-            <div>
+            <div class="nav-menu-body mt-5">
                 <div v-if="updateInProgress" class="pending-update" @click="showVRCXUpdateDialog">
                     <el-progress
                         type="circle"
@@ -16,80 +16,71 @@
                         type="success"
                         plain
                         style="font-size: 19px; height: 36px; width: 44px; margin: 10px"
-                        @click="showVRCXUpdateDialog"
-                        ><i class="ri-download-line"></i
-                    ></el-button>
+                        @click="showVRCXUpdateDialog">
+                        <i class="ri-download-line"></i>
+                    </el-button>
                 </div>
 
-                <el-menu collapse :default-active="activeMenuIndex" :collapse-transition="false" ref="navMenuRef">
-                    <el-popover
-                        v-for="item in navMenuItems"
-                        :disabled="!item.entries?.length"
-                        :key="item.index"
-                        :ref="(el) => setNavPopoverRef(el, item.index)"
-                        placement="right-start"
-                        trigger="hover"
-                        :hide-after="isSteamVRRunning ? 400 : 150"
-                        :show-arrow="false"
-                        :offset="0"
-                        :width="navPopoverWidth"
-                        transition="nav-menu-slide"
-                        @before-enter="handleSubMenuBeforeEnter()"
-                        :popper-style="navPopoverStyle"
-                        popper-class="nav-menu-popover-popper">
-                        <div class="nav-menu-popover">
-                            <div class="nav-menu-popover__header">
-                                <i :class="item.icon"></i>
+                <el-menu ref="navMenuRef" class="nav-menu" :collapse="isCollapsed" :collapse-transition="false">
+                    <template v-for="item in menuItems" :key="item.index">
+                        <el-menu-item
+                            v-if="!item.children?.length"
+                            :index="item.index"
+                            :class="{ notify: isNavItemNotified(item) }"
+                            @click="handleMenuItemClick(item)">
+                            <i :class="item.icon"></i>
+                            <template #title>
                                 <span>{{ item.titleIsCustom ? item.title : t(item.title || '') }}</span>
-                            </div>
-
-                            <div class="nav-menu-popover__menu">
-                                <button
-                                    v-for="entry in item.entries"
-                                    :key="entry.label"
-                                    type="button"
-                                    :class="['nav-menu-popover__menu-item', { notify: isEntryNotified(entry) }]"
-                                    @click="handleSubmenuClick(entry, item.index)">
-                                    <i v-if="entry.icon" :class="entry.icon" class="nav-menu-popover__menu-icon"></i>
-                                    <span class="nav-menu-popover__menu-label">{{ t(entry.label) }}</span>
-                                </button>
-                            </div>
-                        </div>
-                        <template #reference>
+                            </template>
+                        </el-menu-item>
+                        <el-sub-menu v-else :index="item.index">
+                            <template #title>
+                                <div :class="{ notify: isNavItemNotified(item) }">
+                                    <i :class="item.icon"></i>
+                                    <span v-show="!isCollapsed">{{
+                                        item.titleIsCustom ? item.title : t(item.title || '')
+                                    }}</span>
+                                </div>
+                            </template>
                             <el-menu-item
-                                :index="item.index"
-                                :class="{ notify: isNavItemNotified(item) }"
-                                @click="handleMenuItemClick(item)">
-                                <i :class="item.icon"></i>
-                                <template #title v-if="item.tooltip">
-                                    <span>{{ item.tooltipIsCustom ? item.tooltip : t(item.tooltip) }}</span>
+                                v-for="entry in item.children"
+                                :key="entry.index"
+                                :index="entry.index"
+                                class="pl-8!"
+                                :class="{ notify: isEntryNotified(entry) }"
+                                @click="handleSubmenuClick(entry, item.index)">
+                                <i v-show="entry.icon" :class="entry.icon"></i>
+                                <template #title>
+                                    <span>{{ t(entry.label) }}</span>
                                 </template>
                             </el-menu-item>
-                        </template>
-                    </el-popover>
+                        </el-sub-menu>
+                    </template>
                 </el-menu>
-                <el-divider style="width: calc(100% - 18px); margin-left: 9px"></el-divider>
-                <NativeTooltip :content="t('prompt.direct_access_omni.header')" placement="right">
-                    <div class="bottom-button" @click="directAccessPaste"><i class="ri-compass-3-line"></i></div>
-                </NativeTooltip>
             </div>
 
-            <div class="nav-menu-container-bottom">
-                <NativeTooltip v-if="branch === 'Nightly'" :show-after="150" :content="'Feedback'" placement="right">
+            <div class="nav-menu-container-bottom mb-4">
+                <el-tooltip
+                    v-if="branch === 'Nightly'"
+                    :show-after="150"
+                    :content="'Feedback'"
+                    :disabled="!isCollapsed"
+                    placement="right">
                     <div
                         class="bottom-button"
                         id="feedback"
                         @click="!sentryErrorReporting && setSentryErrorReporting()">
                         <i class="ri-feedback-line"></i>
+                        <span v-show="!isCollapsed" class="bottom-button__label">Feedback</span>
                     </div>
-                </NativeTooltip>
+                </el-tooltip>
 
                 <el-popover
                     v-model:visible="supportMenuVisible"
                     placement="right"
                     trigger="click"
                     popper-style="padding:4px;border-radius:8px;"
-                    :offset="4"
+                    :offset="-10"
                     :show-arrow="false"
                     :width="200"
                     :hide-after="0">
@@ -119,11 +110,18 @@
                     </div>
                     <template #reference>
                         <div>
-                            <NativeTooltip :show-after="150" :content="t('nav_tooltip.help_support')" placement="right">
+                            <el-tooltip
+                                :show-after="150"
+                                :content="t('nav_tooltip.help_support')"
+                                placement="right"
+                                :disabled="!isCollapsed">
                                 <div class="bottom-button">
                                     <i class="ri-question-line"></i>
+                                    <span v-show="!isCollapsed" class="bottom-button__label">{{
+                                        t('nav_tooltip.help_support')
+                                    }}</span>
                                 </div>
-                            </NativeTooltip>
+                            </el-tooltip>
                         </div>
                     </template>
                 </el-popover>
@@ -133,7 +131,7 @@
                     placement="right"
                     trigger="click"
                     popper-style="padding:4px;border-radius:8px;"
-                    :offset="4"
+                    :offset="-10"
                     :show-arrow="false"
                     :width="200"
                     :hide-after="0">
@@ -143,7 +141,7 @@
                             <div class="nav-menu-settings__meta">
                                 <span class="nav-menu-settings__title" @click="openGithub"
                                     >VRCX
-                                    <i class="ri-heart-3-fill" style="color: #64cd8a; font-size: 14px"></i>
+                                    <i class="ri-heart-3-fill nav-menu-settings__heart"></i>
                                 </span>
                                 <span class="nav-menu-settings__version">{{ version }}</span>
                             </div>
@@ -170,7 +168,7 @@
                                     :class="{ 'is-active': themeMode === theme }"
                                     @click="handleThemeSelect(theme)">
                                     <span class="nav-menu-theme__label">{{ themeDisplayName(theme) }}</span>
-                                    <span v-if="themeMode === theme" class="nav-menu-theme__check">✔</span>
+                                    <span v-if="themeMode === theme" class="nav-menu-theme__check">✓</span>
                                 </button>
                             </div>
                             <template #reference>
@@ -190,9 +188,24 @@
                     <template #reference>
                         <div class="bottom-button">
                             <i class="ri-settings-3-line"></i>
+                            <span v-show="!isCollapsed" class="bottom-button__label">{{
+                                t('nav_tooltip.manage')
+                            }}</span>
                         </div>
                     </template>
                 </el-popover>
+                <el-tooltip
+                    :show-after="150"
+                    :content="t('nav_tooltip.expand_menu')"
+                    :disabled="!isCollapsed"
+                    placement="right">
+                    <div class="bottom-button" @click="toggleNavCollapse">
+                        <i class="ri-side-bar-line"></i>
+                        <span v-show="!isCollapsed" class="bottom-button__label">{{
+                            t('nav_tooltip.collapse_menu')
+                        }}</span>
+                    </div>
+                </el-tooltip>
             </div>
         </template>
     </div>
@@ -215,9 +228,9 @@
         useAdvancedSettingsStore,
         useAppearanceSettingsStore,
         useAuthStore,
-        useGameStore,
         useSearchStore,
         useUiStore,
+        useUserStore,
         useVRCXUpdaterStore
     } from '../stores';
     import { THEME_CONFIG, links, navDefinitions } from '../shared/constants';
@@ -226,8 +239,6 @@
 
     import configRepository from '../service/config';
 
-    import 'remixicon/fonts/remixicon.css';
-
     const CustomNavDialog = defineAsyncComponent(() => import('./dialogs/CustomNavDialog.vue'));
 
     const { t, locale } = useI18n();
@@ -257,26 +268,13 @@
         },
         { type: 'item', key: 'notification' },
         { type: 'item', key: 'charts' },
-        { type: 'item', key: 'tools' }
+        { type: 'item', key: 'tools' },
+        { type: 'item', key: 'direct-access' }
     ];
 
     const navDefinitionMap = new Map(navDefinitions.map((item) => [item.key, item]));
     const DEFAULT_FOLDER_ICON = 'ri-menu-fold-line';
 
-    const navPopoverWidth = 250;
-    const navPopoverStyle = {
-        zIndex: 500,
-        borderRadius: '0',
-        border: '1px solid var(--el-border-color)',
-        borderLeft: 'none',
-        borderBottom: 'none',
-        borderTop: 'none',
-        boxShadow: '0 8px 20px rgba(0,0,0,0.05)',
-        padding: '0',
-        background: 'var(--el-bg-color)',
-        height: '100vh'
-    };
-
     const VRCXUpdaterStore = useVRCXUpdaterStore();
     const { pendingVRCXUpdate, pendingVRCXInstall, updateInProgress, updateProgress, branch, appVersion } =
         storeToRefs(VRCXUpdaterStore);
@@ -288,18 +286,19 @@
     const { setSentryErrorReporting } = useAdvancedSettingsStore();
     const { logout } = useAuthStore();
     const appearanceSettingsStore = useAppearanceSettingsStore();
-    const { themeMode } = storeToRefs(appearanceSettingsStore);
-    const { isSteamVRRunning } = storeToRefs(useGameStore());
+    const { themeMode, isNavCollapsed: isCollapsed } = storeToRefs(appearanceSettingsStore);
+    const userStore = useUserStore();
+    const { currentUser } = storeToRefs(userStore);
+    const { showUserDialog } = userStore;
 
     const settingsMenuVisible = ref(false);
     const themeMenuVisible = ref(false);
     const supportMenuVisible = ref(false);
     const navMenuRef = ref(null);
-    const navPopoverRefs = new Map();
     const navLayout = ref([]);
     const navLayoutReady = ref(false);
 
-    const navMenuItems = computed(() => {
+    const menuItems = computed(() => {
         const items = [];
         navLayout.value.forEach((entry) => {
             if (entry.type === 'item') {
@@ -310,7 +309,7 @@
                 items.push({
                     ...definition,
                     index: definition.key,
-                    tooltipIsCustom: false,
+                    title: definition.tooltip || definition.labelKey,
                     titleIsCustom: false
                 });
                 return;
@@ -324,7 +323,6 @@
                         items.push({
                             ...definition,
                             index: definition.key,
-                            tooltipIsCustom: false,
                             titleIsCustom: false
                         });
                     });
@@ -334,83 +332,41 @@
                 const folderEntries = folderDefinitions.map((definition) => ({
                     label: definition.labelKey,
                     routeName: definition.routeName,
-                    key: definition.key,
-                    icon: definition.icon
+                    index: definition.key,
+                    icon: definition.icon,
+                    action: definition.action
                 }));
 
                 items.push({
                     index: entry.id,
                     icon: entry.icon || DEFAULT_FOLDER_ICON,
-                    tooltip: entry.name?.trim() || t('nav_menu.custom_nav.folder_name_placeholder'),
-                    tooltipIsCustom: true,
                     title: entry.name?.trim() || t('nav_menu.custom_nav.folder_name_placeholder'),
                     titleIsCustom: true,
-                    entries: folderEntries
+                    children: folderEntries
                 });
             }
         });
         return items;
     });
 
-    const folderCyclePointers = new Map();
-
-    const navigateToFolderEntry = (folderIndex, entry) => {
-        if (!entry) {
-            return;
-        }
-        if (entry.routeName) {
-            handleRouteChange(entry.routeName, folderIndex);
-            return;
-        }
-        if (entry.path) {
-            router.push(entry.path);
-            if (folderIndex) {
-                navMenuRef.value?.updateActiveIndex(folderIndex);
-            }
-        }
-    };
-
-    const handleFolderCycleNavigation = (item) => {
-        if (!item?.entries?.length) {
-            return;
-        }
-        const entries = item.entries.filter((entry) => Boolean(entry?.routeName || entry?.path));
-        if (!entries.length) {
-            return;
-        }
-        let pointer = folderCyclePointers.get(item.index) ?? 0;
-        if (pointer >= entries.length || pointer < 0) {
-            pointer = 0;
-        }
-        const entry = entries[pointer];
-        folderCyclePointers.set(item.index, (pointer + 1) % entries.length);
-        navigateToFolderEntry(item.index, entry);
-    };
-
     const activeMenuIndex = computed(() => {
-        const currentRouteName = router.currentRoute.value?.name;
-        if (!currentRouteName) {
-            const firstEntry = navLayout.value[0];
-            if (!firstEntry) {
-                return 'feed';
-            }
-            return firstEntry.type === 'folder' ? firstEntry.id : firstEntry.key;
+        const currentRoute = router.currentRoute.value;
+        const currentRouteName = currentRoute?.name;
+        const navKey = currentRoute?.meta?.navKey || currentRouteName;
+        if (!navKey) {
+            return getFirstNavRoute(navLayout.value) || 'feed';
         }
 
         for (const entry of navLayout.value) {
-            if (entry.type === 'item' && entry.key === currentRouteName) {
+            if (entry.type === 'item' && entry.key === navKey) {
                 return entry.key;
             }
-            if (entry.type === 'folder' && entry.items?.includes(currentRouteName)) {
-                return entry.id;
+            if (entry.type === 'folder' && entry.items?.includes(navKey)) {
+                return navKey;
             }
         }
 
-        const fallback = navLayout.value[0];
-        if (!fallback) {
-            return 'feed';
-        }
-        return fallback.type === 'folder' ? fallback.id : fallback.key;
+        return getFirstNavRoute(navLayout.value) || 'feed';
     });
 
     const version = computed(() => appVersion.value?.split('VRCX ')?.[1] || '-');
@@ -448,6 +404,10 @@
 
     const generateFolderId = () => `nav-folder-${dayjs().toISOString()}-${Math.random().toString().slice(2, 4)}`;
 
+    const showCurrentUserDialog = () => {
+        showUserDialog(currentUser.value?.id);
+    };
+
     const sanitizeLayout = (layout) => {
         const usedKeys = new Set();
         const normalized = [];
@@ -627,52 +587,47 @@
         if (notifiedMenus.value.includes(item.index)) {
             return true;
         }
-        if (item.entries?.length) {
-            return item.entries.some((entry) => isEntryNotified(entry));
+        if (item.children?.length) {
+            return item.children.some((entry) => isEntryNotified(entry));
         }
         return false;
     };
 
-    const setNavPopoverRef = (el, index) => {
-        if (!index) {
-            return;
-        }
-        if (el) {
-            navPopoverRefs.set(index, el);
-        } else {
-            navPopoverRefs.delete(index);
-        }
-    };
-
-    const closeNavPopover = (index) => {
-        navPopoverRefs.get(index)?.hide?.();
-    };
-
-    const handleSubmenuClick = (entry, index) => {
-        if (!entry) {
-            return;
-        }
-        const entries = navMenuItems.value.find((item) => item.index === index)?.entries || [];
-        const indexOfEntry = entries.findIndex((e) => e.label === entry.label);
-        folderCyclePointers.set(index, (indexOfEntry + 1) % entries.length);
-
-        if (entry.routeName) {
-            handleRouteChange(entry.routeName, index || entry.routeName);
-        } else if (entry.path) {
-            router.push(entry.path);
-            if (index) {
-                navMenuRef.value?.updateActiveIndex(index);
-            }
-        }
-        closeNavPopover(index);
-    };
-
-    const handleSubMenuBeforeEnter = () => {
+    const closeNavFlyouts = () => {
         settingsMenuVisible.value = false;
         supportMenuVisible.value = false;
         themeMenuVisible.value = false;
     };
 
+    const triggerNavAction = (entry, navIndex = entry?.index) => {
+        if (!entry) {
+            return;
+        }
+
+        if (entry.action === 'direct-access') {
+            closeNavFlyouts();
+            directAccessPaste();
+            if (navIndex) {
+                navMenuRef.value?.updateActiveIndex(navIndex);
+            }
+            return;
+        }
+
+        if (entry.routeName) {
+            handleRouteChange(entry.routeName, navIndex);
+            closeNavFlyouts();
+            return;
+        }
+
+        if (entry.path) {
+            router.push(entry.path);
+            if (navIndex) {
+                navMenuRef.value?.updateActiveIndex(navIndex);
+            }
+            closeNavFlyouts();
+        }
+    };
+
     const handleRouteChange = (routeName, navIndex = routeName) => {
         if (!routeName) {
             return;
@@ -697,17 +652,23 @@
         }
     });
 
-    const getFirstNavRoute = (layout) => {
+    function getFirstNavRoute(layout) {
         for (const entry of layout) {
             if (entry.type === 'item') {
-                return entry.key;
+                const definition = navDefinitionMap.get(entry.key);
+                if (definition?.routeName) {
+                    return definition.routeName;
+                }
             }
             if (entry.type === 'folder' && entry.items?.length) {
-                return entry.items[0];
+                const definition = entry.items.map((key) => navDefinitionMap.get(key)).find((def) => def?.routeName);
+                if (definition?.routeName) {
+                    return definition.routeName;
+                }
             }
         }
         return null;
-    };
+    }
 
     let hasNavigatedToInitialRoute = false;
     const navigateToFirstNavEntry = () => {
@@ -724,15 +685,17 @@
         }
     };
 
+    const handleSubmenuClick = (entry, index) => {
+        const navIndex = index || entry?.index;
+        triggerNavAction(entry, navIndex);
+    };
+
     const handleMenuItemClick = (item) => {
-        if (!item) {
-            return;
-        }
-        if (item.entries?.length) {
-            handleFolderCycleNavigation(item);
-            return;
-        }
-        handleRouteChange(item.routeName, item.index);
+        triggerNavAction(item, item?.index);
+    };
+
+    const toggleNavCollapse = () => {
+        appearanceSettingsStore.toggleNavCollapsed();
     };
 
     onMounted(async () => {
@@ -755,146 +718,147 @@
     :deep(.el-divider) {
         margin: 0;
     }
+
     .nav-menu-container {
         position: relative;
+        width: 240px;
         height: 100%;
         display: flex;
+        flex: 0 0 240px;
         flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
+        align-items: stretch;
+        justify-content: flex-start;
         z-index: 600;
-        background-color: var(--el-bg-color);
-        border-right: 1px solid var(--el-border-color);
+        background-color: var(--el-bg-color-page);
         box-shadow: none;
-        .el-menu {
-            background: 0;
-            border: 0;
-        }
-        .el-menu-item i[class*='ri-'] {
-            font-size: 19px;
-            width: 24px;
-            height: 24px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            vertical-align: middle;
-        }
-        .bottom-button {
-            font-size: 19px;
-            width: 64px;
-            height: 56px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            vertical-align: middle;
-            cursor: pointer;
-        }
-        .bottom-button:hover {
-            background-color: var(--el-menu-hover-bg-color);
-            transition:
-                border-color var(--el-transition-duration),
-                background-color var(--el-transition-duration),
-                color var(--el-transition-duration);
-        }
-        .nav-menu-container-bottom {
-            display: flex;
-            flex-direction: column;
+        backdrop-filter: blur(14px) saturate(130%);
+    }
+
+    .nav-menu-body {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow: hidden auto;
+        align-items: center;
+    }
+
+    .nav-menu {
+        background: transparent;
+        border: 0;
+        width: 100%;
+    }
+
+    .nav-menu :deep(.el-menu-item),
+    .nav-menu :deep(.el-sub-menu__title) {
+        height: 46px;
+        line-height: 46px;
+        display: flex;
+        align-items: center;
+        column-gap: 10px;
+        font-size: 13px;
+        padding: 0 20px !important;
+    }
+
+    .nav-menu :deep(.el-menu-item i[class*='ri-']),
+    .nav-menu :deep(.el-sub-menu__title i[class*='ri-']) {
+        font-size: 19px;
+        width: 24px;
+        height: 24px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        vertical-align: middle;
+        line-height: 1;
+        flex-shrink: 0;
+    }
+
+    .nav-menu :deep(.el-sub-menu__title > div) {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .nav-menu :deep(.el-sub-menu__icon-arrow) {
+        right: 8px;
+    }
+
+    .bottom-button {
+        font-size: 19px;
+        width: 100%;
+        height: 46px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 10px;
+        padding: 0 20px;
+        text-align: left;
+        vertical-align: middle;
+        cursor: pointer;
+        box-sizing: border-box;
+        & > span {
+            font-size: 13px;
         }
     }
 
-    .nav-menu-popover {
+    .bottom-button i {
+        width: 24px;
+        height: 24px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+    }
+
+    .bottom-button__label {
+        font-size: 13px;
+        color: var(--el-text-color-regular);
+        white-space: nowrap;
+    }
+
+    .bottom-button:hover {
+        background-color: var(--el-menu-hover-bg-color);
+        transition:
+            border-color var(--el-transition-duration),
+            background-color var(--el-transition-duration),
+            color var(--el-transition-duration);
+    }
+
+    .nav-menu-container-bottom {
         display: flex;
         flex-direction: column;
-        height: 100%;
-        min-width: 240px;
-        background-color: var(--el-bg-color);
-        border-left: 1px solid var(--el-border-color);
-        overflow: hidden;
+    }
 
-        .nav-menu-popover__header {
-            display: inline-flex;
-            align-items: center;
-            gap: 10px;
-            min-height: 52px;
-            padding: 0 20px;
-            border-bottom: 1px solid var(--el-border-color-light, var(--el-border-color));
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--el-text-color-primary);
-        }
+    .nav-menu-container.is-collapsed .nav-menu :deep(.el-menu-item),
+    .nav-menu-container.is-collapsed .nav-menu :deep(.el-sub-menu__title) {
+        column-gap: 0;
+        justify-content: center;
+        padding: 0;
+    }
 
-        .nav-menu-popover__header i {
-            font-size: 18px;
-            color: var(--el-color-primary);
-        }
+    .nav-menu-container.is-collapsed {
+        width: 64px;
+        flex-basis: 64px;
+    }
 
-        .nav-menu-popover__menu {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-            gap: 6px;
-            padding: 12px 12px 16px;
-            overflow-y: auto;
-            scrollbar-width: thin;
-        }
+    .nav-menu-container.is-collapsed .nav-menu :deep(.el-sub-menu__title > div) {
+        gap: 0;
+    }
 
-        .nav-menu-popover__menu::-webkit-scrollbar {
-            width: 6px;
-        }
+    .nav-menu-container.is-collapsed .bottom-button {
+        width: 100%;
+        justify-content: center;
+        gap: 0;
+        padding: 0;
+        text-align: center;
+    }
 
-        .nav-menu-popover__menu::-webkit-scrollbar-thumb {
-            background-color: rgba(0, 0, 0, 0.18);
-            border-radius: 3px;
-        }
+    :deep(.el-menu-item .el-menu-tooltip__trigger) {
+        justify-content: center;
+    }
 
-        .nav-menu-popover__menu::-webkit-scrollbar-track {
-            background: transparent;
-        }
-
-        .nav-menu-popover__menu-item {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            width: 100%;
-            padding: 10px 12px;
-            border: none;
-            background: transparent;
-            text-align: left;
-            color: var(--el-text-color-primary);
-            font-size: 13px;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: background-color var(--el-transition-duration);
-        }
-
-        .nav-menu-popover__menu-item.notify::after {
-            content: '';
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: var(--el-text-color-primary);
-            margin-left: auto;
-        }
-
-        .nav-menu-popover__menu-item:hover {
-            background-color: var(--el-menu-hover-bg-color);
-        }
-
-        .nav-menu-popover__menu-item:focus-visible {
-            outline: 2px solid var(--el-color-primary);
-            outline-offset: 2px;
-        }
-
-        .nav-menu-popover__menu-icon {
-            font-size: 16px;
-            color: var(--el-text-color-secondary);
-        }
-
-        .nav-menu-popover__menu-label {
-            font-weight: 600;
-        }
+    :deep(.el-button.is-text:not(.is-disabled):hover) {
+        background-color: var(--el-menu-hover-bg-color);
     }
 
     .nav-menu-settings {
@@ -930,6 +894,11 @@
                 cursor: pointer;
             }
 
+            .nav-menu-settings__heart {
+                font-size: 14px;
+                color: var(--el-color-success);
+            }
+
             .nav-menu-settings__version {
                 font-size: 11px;
             }
@@ -942,8 +911,8 @@
             width: 100%;
             border: none;
             background: transparent;
-            color: var(--el-text-color-primary);
-            font-size: 14px;
+            color: var(--el-text-color-regular);
+            font-size: 13px;
             border-radius: 4px;
             transition: background-color var(--el-transition-duration);
             cursor: pointer;
@@ -962,7 +931,7 @@
         }
 
         .nav-menu-settings__item--danger:hover {
-            background-color: rgba(245, 108, 108, 0.18);
+            background-color: color-mix(in oklch, var(--el-color-danger) 18%, transparent);
         }
     }
 
@@ -971,23 +940,6 @@
         flex-direction: column;
         gap: 8px;
 
-        .nav-menu-support__search {
-            padding: 10px 12px;
-            border-radius: 8px;
-            background: var(--el-fill-color-light);
-            color: var(--el-text-color-secondary);
-            font-size: 12px;
-            font-weight: 500;
-            line-height: 1.2;
-        }
-
-        .nav-menu-support__heading {
-            padding: 4px 12px 0;
-            font-size: 13px;
-            font-weight: 700;
-            color: var(--el-text-color-primary);
-        }
-
         .nav-menu-support__section {
             display: flex;
             flex-direction: column;
@@ -1015,7 +967,6 @@
             padding: 6px 10px;
             border: none;
             background: transparent;
-            color: var(--el-text-color-primary);
             font-size: 13px;
             border-radius: 6px;
             transition: background-color var(--el-transition-duration);
@@ -1031,18 +982,4 @@
             background-color: var(--el-menu-hover-bg-color);
         }
     }
-
-    :global(.nav-menu-slide-enter-active),
-    :global(.nav-menu-slide-leave-active) {
-        transition:
-            opacity 0.1s ease,
-            transform 0.1s ease;
-        transform-origin: left center;
-    }
-
-    :global(.nav-menu-slide-enter-from),
-    :global(.nav-menu-slide-leave-to) {
-        opacity: 0;
-        transform: translateX(-12px);
-    }
 </style>
diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index c3caf2c0..c9a3ab9e 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -4,7 +4,8 @@
         class="x-dialog x-avatar-dialog"
         v-model="avatarDialog.visible"
         :show-close="false"
-        width="700px">
+        top="10vh"
+        width="930px">
         <div v-loading="avatarDialog.loading">
             <div style="display: flex">
                 <img
@@ -246,11 +247,7 @@
                                 style="margin-left: 5px"
                                 @click="selectAvatarWithoutConfirmation(avatarDialog.id)"></el-button>
                         </el-tooltip>
-                        <el-dropdown
-                            trigger="click"
-                            size="small"
-                            style="margin-left: 5px"
-                            @command="avatarDialogCommand">
+                        <el-dropdown trigger="click" style="margin-left: 5px" @command="avatarDialogCommand">
                             <el-button
                                 :type="avatarDialog.isBlocked ? 'danger' : 'default'"
                                 :icon="MoreFilled"
diff --git a/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue b/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
index 0e257e85..bbf4f250 100644
--- a/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
+++ b/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
@@ -321,7 +321,7 @@
     }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
     .img-size {
         width: 500px;
         height: 375px;
diff --git a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
index e7a62554..2955cf68 100644
--- a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
+++ b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
@@ -68,12 +68,12 @@
                         <span
                             v-if="avatar.releaseStatus === 'public'"
                             class="extra"
-                            style="color: #67c23a"
+                            style="color: var(--el-color-success)"
                             v-text="avatar.releaseStatus"></span>
                         <span
                             v-else-if="avatar.releaseStatus === 'private'"
                             class="extra"
-                            style="color: #f56c6c"
+                            style="color: var(--el-color-danger)"
                             v-text="avatar.releaseStatus"></span>
                         <span v-else class="extra" v-text="avatar.releaseStatus"></span>
                         <span class="extra" v-text="avatarTagStrings.get(avatar.id)"></span>
diff --git a/src/components/dialogs/CustomNavDialog.vue b/src/components/dialogs/CustomNavDialog.vue
index 866fbe47..697a442a 100644
--- a/src/components/dialogs/CustomNavDialog.vue
+++ b/src/components/dialogs/CustomNavDialog.vue
@@ -329,8 +329,9 @@
     );
 
     const openFolderEditor = (index) => {
-        folderEditor.isEditing = !!index;
-        folderEditor.index = folderEditor.isEditing ? index : -1;
+        const isEditing = index !== undefined && index !== null;
+        folderEditor.isEditing = isEditing;
+        folderEditor.index = isEditing ? index : -1;
         if (folderEditor.isEditing) {
             const entry = localLayout.value[index];
             folderEditor.data = {
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 130935ae..d9a53970 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -3,7 +3,8 @@
         :z-index="groupDialogIndex"
         v-model="groupDialog.visible"
         :show-close="false"
-        width="770px"
+        top="10vh"
+        width="930px"
         class="x-dialog x-group-dialog">
         <div v-loading="groupDialog.loading" class="group-body">
             <div style="display: flex">
@@ -258,11 +259,7 @@
                                     @click="joinGroup(groupDialog.id)"></el-button>
                             </el-tooltip>
                         </template>
-                        <el-dropdown
-                            trigger="click"
-                            size="small"
-                            style="margin-left: 5px"
-                            @command="groupDialogCommand">
+                        <el-dropdown trigger="click" style="margin-left: 5px" @command="groupDialogCommand">
                             <el-button
                                 :type="groupDialog.ref.membershipStatus === 'userblocked' ? 'danger' : 'default'"
                                 :icon="MoreFilled"
@@ -616,7 +613,8 @@
                                 <span class="name">{{ t('dialog.group.info.links') }}</span>
                                 <div
                                     v-if="groupDialog.ref.links && groupDialog.ref.links.length > 0"
-                                    style="margin-top: 5px">
+                                    style="margin-top: 5px"
+                                    class="flex">
                                     <template v-for="(link, index) in groupDialog.ref.links" :key="index">
                                         <el-tooltip v-if="link">
                                             <template #content>
@@ -1086,7 +1084,6 @@
                     <el-tabs
                         v-model="groupDialogGalleryCurrentName"
                         v-loading="isGroupGalleryLoading"
-                        type="card"
                         style="margin-top: 10px">
                         <template v-for="(gallery, index) in groupDialog.ref.galleries" :key="index">
                             <el-tab-pane>
@@ -1839,7 +1836,7 @@
         }
     }
 </script>
-<style lang="scss" scoped>
+<style scoped>
     .time-group-container {
         display: flex;
         flex-direction: column;
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index e712a44b..1134562f 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -7,7 +7,7 @@
         width="90vw">
         <div>
             <h3>{{ groupMemberModeration.groupRef.name }}</h3>
-            <el-tabs type="card" style="height: 100%">
+            <el-tabs style="height: 100%">
                 <el-tab-pane :label="t('dialog.group_member_moderation.members')">
                     <div style="margin-top: 10px">
                         <el-button
diff --git a/src/components/dialogs/NewInstanceDialog.vue b/src/components/dialogs/NewInstanceDialog.vue
index 404e1468..71f68f7e 100644
--- a/src/components/dialogs/NewInstanceDialog.vue
+++ b/src/components/dialogs/NewInstanceDialog.vue
@@ -5,7 +5,7 @@
         :title="t('dialog.new_instance.header')"
         width="650px"
         append-to-body>
-        <el-tabs v-model="newInstanceDialog.selectedTab" type="card" @tab-click="newInstanceTabClick">
+        <el-tabs v-model="newInstanceDialog.selectedTab" @tab-click="newInstanceTabClick">
             <el-tab-pane name="Normal" :label="t('dialog.new_instance.normal')">
                 <el-form :model="newInstanceDialog" label-width="150px">
                     <el-form-item :label="t('dialog.new_instance.access_type')">
diff --git a/src/components/dialogs/SendBoopDialog.vue b/src/components/dialogs/SendBoopDialog.vue
index fc43c2e1..cff9def4 100644
--- a/src/components/dialogs/SendBoopDialog.vue
+++ b/src/components/dialogs/SendBoopDialog.vue
@@ -63,14 +63,7 @@
         </div>
 
         <template #footer>
-            <el-button
-                size="small"
-                @click="
-                    redirectToToolsTab();
-                    showGalleryDialog();
-                "
-                >{{ t('dialog.boop_dialog.emoji_manager') }}</el-button
-            >
+            <el-button size="small" @click="showGalleryPage">{{ t('dialog.boop_dialog.emoji_manager') }}</el-button>
             <el-button size="small" @click="closeDialog">{{ t('dialog.boop_dialog.cancel') }}</el-button>
             <el-button size="small" :disabled="!sendBoopDialog.userId" @click="sendBoop">{{
                 t('dialog.boop_dialog.send')
@@ -87,7 +80,6 @@
     import { notificationRequest, userRequest } from '../../api';
     import { miscRequest } from '../../api';
     import { photonEmojis } from '../../shared/constants/photon.js';
-    import { redirectToToolsTab } from '../../shared/utils/base/ui';
     import { useGalleryStore } from '../../stores';
     import { useNotificationStore } from '../../stores';
     import { useUserStore } from '../../stores/user.js';
@@ -98,7 +90,7 @@
 
     const { sendBoopDialog } = storeToRefs(useUserStore());
     const { notificationTable } = storeToRefs(useNotificationStore());
-    const { showGalleryDialog, refreshEmojiTable } = useGalleryStore();
+    const { showGalleryPage, refreshEmojiTable } = useGalleryStore();
     const { emojiTable } = storeToRefs(useGalleryStore());
     const { isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
 
diff --git a/src/components/dialogs/UserDialog/UserActionDropdown.vue b/src/components/dialogs/UserDialog/UserActionDropdown.vue
index f839ef88..d506a806 100644
--- a/src/components/dialogs/UserDialog/UserActionDropdown.vue
+++ b/src/components/dialogs/UserDialog/UserActionDropdown.vue
@@ -21,7 +21,7 @@
                     @click="userDialogCommand('Add Favorite')"></el-button>
             </el-tooltip>
         </template>
-        <el-dropdown trigger="click" size="small" @command="onCommand">
+        <el-dropdown trigger="click" @command="onCommand">
             <el-button
                 :type="
                     userDialog.incomingRequest || userDialog.outgoingRequest
@@ -132,7 +132,7 @@
                             :icon="CircleCheck"
                             command="Moderation Unblock"
                             divided
-                            style="color: #f56c6c">
+                            style="color: var(--el-color-danger)">
                             {{ t('dialog.user.actions.moderation_unblock') }}
                         </el-dropdown-item>
                         <el-dropdown-item
@@ -147,7 +147,7 @@
                             v-if="userDialog.isMute"
                             :icon="Microphone"
                             command="Moderation Unmute"
-                            style="color: #f56c6c">
+                            style="color: var(--el-color-danger)">
                             {{ t('dialog.user.actions.moderation_unmute') }}
                         </el-dropdown-item>
                         <el-dropdown-item
@@ -161,7 +161,7 @@
                             v-if="userDialog.isMuteChat"
                             :icon="ChatLineRound"
                             command="Moderation Enable Chatbox"
-                            style="color: #f56c6c">
+                            style="color: var(--el-color-danger)">
                             {{ t('dialog.user.actions.moderation_enable_chatbox') }}
                         </el-dropdown-item>
                         <el-dropdown-item v-else :icon="ChatDotRound" command="Moderation Disable Chatbox">
@@ -179,7 +179,7 @@
                             v-if="userDialog.isInteractOff"
                             :icon="Pointer"
                             command="Moderation Enable Avatar Interaction"
-                            style="color: #f56c6c">
+                            style="color: var(--el-color-danger)">
                             {{ t('dialog.user.actions.moderation_enable_avatar_interaction') }}
                         </el-dropdown-item>
                         <el-dropdown-item v-else :icon="CircleClose" command="Moderation Disable Avatar Interaction">
@@ -189,7 +189,11 @@
                             {{ t('dialog.user.actions.report_hacking') }}
                         </el-dropdown-item>
                         <template v-if="userDialog.isFriend">
-                            <el-dropdown-item :icon="Delete" command="Unfriend" divided style="color: #f56c6c">
+                            <el-dropdown-item
+                                :icon="Delete"
+                                command="Unfriend"
+                                divided
+                                style="color: var(--el-color-danger)">
                                 {{ t('dialog.user.actions.unfriend') }}
                             </el-dropdown-item>
                         </template>
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index 82fc81fa..a1537db3 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -5,7 +5,7 @@
         v-model="userDialog.visible"
         :show-close="false"
         top="10vh"
-        width="940px">
+        width="930px">
         <div v-loading="userDialog.loading">
             <UserSummaryHeader
                 :get-user-state-text="getUserStateText"
@@ -252,7 +252,7 @@
                                         style="margin-left: 5px; padding: 0"
                                         @click="showBioDialog"></el-button>
                                 </div>
-                                <div style="margin-top: 5px" class="flex">
+                                <div style="margin-top: 5px" class="flex items-center">
                                     <el-tooltip v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
                                         <template #content>
                                             <span v-text="link"></span>
@@ -426,10 +426,13 @@
                             <div class="x-friend-item" @click="toggleAvatarCopying">
                                 <div class="detail">
                                     <span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
-                                    <span v-if="currentUser.allowAvatarCopying" class="extra" style="color: #67c23a">{{
-                                        t('dialog.user.info.avatar_cloning_allow')
-                                    }}</span>
-                                    <span v-else class="extra" style="color: #f56c6c">{{
+                                    <span
+                                        v-if="currentUser.allowAvatarCopying"
+                                        class="extra"
+                                        style="color: var(--el-color-success)"
+                                        >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
+                                    >
+                                    <span v-else class="extra" style="color: var(--el-color-danger)">{{
                                         t('dialog.user.info.avatar_cloning_deny')
                                     }}</span>
                                 </div>
@@ -437,10 +440,13 @@
                             <div class="x-friend-item" @click="toggleAllowBooping">
                                 <div class="detail">
                                     <span class="name">{{ t('dialog.user.info.booping') }}</span>
-                                    <span v-if="currentUser.isBoopingEnabled" class="extra" style="color: #67c23a">{{
-                                        t('dialog.user.info.avatar_cloning_allow')
-                                    }}</span>
-                                    <span v-else class="extra" style="color: #f56c6c">{{
+                                    <span
+                                        v-if="currentUser.isBoopingEnabled"
+                                        class="extra"
+                                        style="color: var(--el-color-success)"
+                                        >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
+                                    >
+                                    <span v-else class="extra" style="color: var(--el-color-danger)">{{
                                         t('dialog.user.info.avatar_cloning_deny')
                                     }}</span>
                                 </div>
@@ -451,10 +457,10 @@
                                     <span
                                         v-if="!currentUser.hasSharedConnectionsOptOut"
                                         class="extra"
-                                        style="color: #67c23a"
+                                        style="color: var(--el-color-success)"
                                         >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
                                     >
-                                    <span v-else class="extra" style="color: #f56c6c">{{
+                                    <span v-else class="extra" style="color: var(--el-color-danger)">{{
                                         t('dialog.user.info.avatar_cloning_deny')
                                     }}</span>
                                 </div>
@@ -467,10 +473,10 @@
                                     <span
                                         v-if="userDialog.ref.allowAvatarCopying"
                                         class="extra"
-                                        style="color: #67c23a"
+                                        style="color: var(--el-color-success)"
                                         >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
                                     >
-                                    <span v-else class="extra" style="color: #f56c6c">{{
+                                    <span v-else class="extra" style="color: var(--el-color-danger)">{{
                                         t('dialog.user.info.avatar_cloning_deny')
                                     }}</span>
                                 </div>
@@ -634,9 +640,10 @@
                                 t('dialog.user.groups.total_count', { count: userGroups.groups.length })
                             }}</span>
                             <template v-if="userDialogGroupEditMode">
-                                <span style="margin-left: 10px; color: #909399; font-size: 10px">{{
-                                    t('dialog.user.groups.hold_shift')
-                                }}</span>
+                                <span
+                                    style="margin-left: 10px; color: var(--el-text-color-secondary); font-size: 10px"
+                                    >{{ t('dialog.user.groups.hold_shift') }}</span
+                                >
                             </template>
                         </div>
                         <div style="display: flex; align-items: center">
@@ -872,7 +879,7 @@
                                             size="small"
                                             :icon="Close"
                                             circle
-                                            style="color: #f56c6c; margin-left: 5px"
+                                            style="color: var(--el-color-danger); margin-left: 5px"
                                             @click.stop="leaveGroup(group.id)">
                                         </el-button>
                                         <el-button
@@ -892,7 +899,7 @@
                                 <span style="font-weight: bold; font-size: 16px">{{
                                     t('dialog.user.groups.own_groups')
                                 }}</span>
-                                <span style="color: #909399; font-size: 12px; margin-left: 5px"
+                                <span style="color: var(--el-text-color-secondary); font-size: 12px; margin-left: 5px"
                                     >{{ userGroups.ownGroups.length }}/{{
                                         cachedConfig?.constants?.GROUPS?.MAX_OWNED
                                     }}</span
@@ -936,9 +943,10 @@
                                 <span style="font-weight: bold; font-size: 16px">{{
                                     t('dialog.user.groups.mutual_groups')
                                 }}</span>
-                                <span style="color: #909399; font-size: 12px; margin-left: 5px">{{
-                                    userGroups.mutualGroups.length
-                                }}</span>
+                                <span
+                                    style="color: var(--el-text-color-secondary); font-size: 12px; margin-left: 5px"
+                                    >{{ userGroups.mutualGroups.length }}</span
+                                >
                                 <div
                                     class="x-friend-list"
                                     style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
@@ -978,7 +986,7 @@
                                 <span style="font-weight: bold; font-size: 16px">{{
                                     t('dialog.user.groups.groups')
                                 }}</span>
-                                <span style="color: #909399; font-size: 12px; margin-left: 5px">
+                                <span style="color: var(--el-text-color-secondary); font-size: 12px; margin-left: 5px">
                                     {{ userGroups.remainingGroups.length }}
                                     <template v-if="currentUser.id === userDialog.id">
                                         /
@@ -1143,7 +1151,12 @@
                                             :class="userFavoriteWorldsStatus(list[1])">
                                         </i>
                                         <span style="font-weight: bold; font-size: 14px" v-text="list[0]"></span>
-                                        <span style="color: #909399; font-size: 10px; margin-left: 5px"
+                                        <span
+                                            style="
+                                                color: var(--el-text-color-secondary);
+                                                font-size: 10px;
+                                                margin-left: 5px;
+                                            "
                                             >{{ list[2].length }}/{{ favoriteLimits.maxFavoritesPerGroup.world }}</span
                                         >
                                     </span>
@@ -1272,13 +1285,13 @@
                                 <span
                                     v-if="avatar.releaseStatus === 'public'"
                                     class="extra"
-                                    style="color: #67c23a"
+                                    style="color: var(--el-color-success)"
                                     v-text="avatar.releaseStatus">
                                 </span>
                                 <span
                                     v-else-if="avatar.releaseStatus === 'private'"
                                     class="extra"
-                                    style="color: #f56c6c"
+                                    style="color: var(--el-color-danger)"
                                     v-text="avatar.releaseStatus">
                                 </span>
                                 <span v-else class="extra" v-text="avatar.releaseStatus"></span>
@@ -1400,11 +1413,11 @@
         userRequest,
         worldRequest
     } from '../../../api';
-    import { getNextDialogIndex, redirectToToolsTab } from '../../../shared/utils/base/ui';
     import { processBulk, request } from '../../../service/request';
     import { userDialogGroupSortingOptions, userDialogMutualFriendSortingOptions } from '../../../shared/constants';
     import { userDialogWorldOrderOptions, userDialogWorldSortingOptions } from '../../../shared/constants/';
     import { database } from '../../../service/database';
+    import { getNextDialogIndex } from '../../../shared/utils/base/ui';
 
     import SendInviteDialog from '../InviteDialog/SendInviteDialog.vue';
     import UserSummaryHeader from './UserSummaryHeader.vue';
@@ -1455,7 +1468,7 @@
     const { refreshInviteMessageTableData } = useInviteStore();
     const { friendLogTable } = storeToRefs(useFriendStore());
     const { getFriendRequest, handleFriendDelete } = useFriendStore();
-    const { clearInviteImageUpload, showFullscreenImageDialog } = useGalleryStore();
+    const { clearInviteImageUpload, showFullscreenImageDialog, showGalleryPage } = useGalleryStore();
 
     const { logout } = useAuthStore();
     const { cachedConfig } = storeToRefs(useAuthStore());
@@ -1896,6 +1909,9 @@
             }
         } else if (command === 'Previous Instances') {
             showPreviousInstancesUserDialog(D.ref);
+        } else if (command === 'Manage Gallery') {
+            userDialog.value.visible = false;
+            showGalleryPage();
         } else if (command === 'Invite To Group') {
             showInviteGroupDialog('', D.id);
         } else if (command === 'Send Boop') {
diff --git a/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue b/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
index 591fe0ac..cce3ad67 100644
--- a/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
+++ b/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
@@ -316,7 +316,7 @@
     }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
     .img-size {
         width: 500px;
         height: 375px;
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 0cf69d19..098d4ded 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -3,8 +3,9 @@
         :z-index="worldDialogIndex"
         class="x-dialog x-world-dialog"
         v-model="isDialogVisible"
+        top="10vh"
         :show-close="false"
-        width="770px">
+        width="930px">
         <div v-loading="worldDialog.loading">
             <div style="display: flex">
                 <img
@@ -204,11 +205,7 @@
                                 style="margin-left: 5px"
                                 @click="worldDialogCommand('Add Favorite')" />
                         </el-tooltip>
-                        <el-dropdown
-                            trigger="click"
-                            size="small"
-                            style="margin-left: 5px"
-                            @command="worldDialogCommand">
+                        <el-dropdown trigger="click" style="margin-left: 5px" @command="worldDialogCommand">
                             <el-button type="default" :icon="MoreFilled" size="large" circle />
                             <template #dropdown>
                                 <el-dropdown-menu>
@@ -302,7 +299,10 @@
                                             command="Delete Persistent Data">
                                             {{ t('dialog.world.actions.delete_persistent_data') }}
                                         </el-dropdown-item>
-                                        <el-dropdown-item :icon="Delete" command="Delete" style="color: #f56c6c">
+                                        <el-dropdown-item
+                                            :icon="Delete"
+                                            command="Delete"
+                                            style="color: var(--el-color-danger)">
                                             {{ t('dialog.world.actions.delete') }}
                                         </el-dropdown-item>
                                     </template>
diff --git a/src/composables/useElementTheme.js b/src/composables/useElementTheme.js
new file mode 100644
index 00000000..770939fc
--- /dev/null
+++ b/src/composables/useElementTheme.js
@@ -0,0 +1,141 @@
+import { ref } from 'vue';
+
+import colors from 'tailwindcss/colors';
+
+import configRepository from '../service/config';
+
+// Tailwind indigo-500 in OKLCH
+const DEFAULT_PRIMARY = 'oklch(58.5% 0.233 277.117)';
+const DARK_WEIGHT = 0.2;
+const CONFIG_KEY = 'VRCX_elPrimaryColor';
+const STYLE_ID = 'el-dynamic-theme';
+
+let elementThemeInstance = null;
+
+/**
+ * Keep okLCH as-is; otherwise normalize hex; fallback to default.
+ * @param {string} color
+ * @param {string} fallback
+ */
+function toPrimaryColor(color, fallback = DEFAULT_PRIMARY) {
+    if (typeof color === 'string' && color.trim()) {
+        if (color.trim().startsWith('oklch(')) {
+            return color.trim();
+        }
+    }
+    return fallback;
+}
+
+/**
+ * Update Element Plus CSS variables based on a primary color.
+ * Light colors use Tailwind palette directly; only dark-2 is calculated.
+ * Dark mode overrides light-9 with a softer tint for better contrast.
+ * @param {string} primary
+ * @param {object|null} palette
+ */
+function setElementPlusColors(primary, palette = null) {
+    let styleEl = document.getElementById(STYLE_ID);
+    if (!styleEl) {
+        styleEl = document.createElement('style');
+        styleEl.id = STYLE_ID;
+        document.head.appendChild(styleEl);
+    }
+
+    // Derive Element Plus light steps either from a palette or by mixing with white.
+    const safePalette = palette || null;
+    const lightValues = safePalette
+        ? ['400', '300', '200', '100', '50', '50', '50', '50', '50'].map(
+              (key) => safePalette[key] || primary
+          )
+        : Array.from({ length: 9 }, (_, idx) => {
+              const whitePercent = (idx + 1) * 10;
+              const primaryPercent = 100 - whitePercent;
+              return `color-mix(in oklch, ${primary} ${primaryPercent}%, white ${whitePercent}%)`;
+          });
+
+    const lights = lightValues
+        .map(
+            (value, index) =>
+                `    --el-color-primary-light-${index + 1}: ${value};`
+        )
+        .join('\n');
+
+    const darkPercent = DARK_WEIGHT * 100;
+    const primaryPercent = 100 - darkPercent;
+    const darkValue = `color-mix(in oklch, ${primary} ${primaryPercent}%, black ${darkPercent}%)`;
+    const darkLight9 = `color-mix(in oklch, ${primary} 18%, transparent)`;
+
+    const baseSelector =
+        ":root, html.dark, :root.dark, :root[data-theme='dark']";
+    const darkSelector = "html.dark, :root.dark, :root[data-theme='dark']";
+    styleEl.textContent =
+        `${baseSelector} {\n    --el-color-primary: ${primary};\n${lights}\n    --el-color-primary-dark-2: ${darkValue};\n}\n` +
+        `${darkSelector} {\n    --el-color-primary-light-9: ${darkLight9};\n}`;
+}
+
+function findTailwindPalette(primary) {
+    const entries = Object.values(colors);
+    for (const palette of entries) {
+        if (
+            palette &&
+            typeof palette === 'object' &&
+            palette['500'] === primary
+        ) {
+            return palette;
+        }
+    }
+    return null;
+}
+
+/**
+ * Shared Element Plus theme controller.
+ * @param {string} defaultColor
+ */
+export function useElementTheme(defaultColor = DEFAULT_PRIMARY) {
+    if (elementThemeInstance) {
+        return elementThemeInstance;
+    }
+
+    const currentPrimary = ref(defaultColor);
+    const isApplying = ref(false);
+    let initialized = false;
+
+    const applyPrimaryColor = async (color, palette = null) => {
+        const nextColor = toPrimaryColor(color, currentPrimary.value);
+        const effectivePalette = palette || findTailwindPalette(nextColor);
+        isApplying.value = true;
+        setElementPlusColors(nextColor, effectivePalette);
+        currentPrimary.value = nextColor;
+        try {
+            await configRepository.setString(CONFIG_KEY, nextColor);
+        } catch (error) {
+            console.warn('Failed to persist theme color', error);
+        } finally {
+            isApplying.value = false;
+        }
+    };
+
+    const initPrimaryColor = async (fallbackColor = currentPrimary.value) => {
+        if (initialized) {
+            return;
+        }
+        initialized = true;
+
+        const storedColor =
+            (await configRepository.getString(CONFIG_KEY)) ||
+            fallbackColor ||
+            DEFAULT_PRIMARY;
+        await applyPrimaryColor(storedColor);
+    };
+
+    elementThemeInstance = {
+        currentPrimary,
+        isApplying,
+        applyPrimaryColor,
+        initPrimaryColor
+    };
+
+    return elementThemeInstance;
+}
+
+export { toPrimaryColor };
diff --git a/src/composables/useTableHeight.js b/src/composables/useTableHeight.js
new file mode 100644
index 00000000..880a1a16
--- /dev/null
+++ b/src/composables/useTableHeight.js
@@ -0,0 +1,44 @@
+import { onMounted, onUnmounted, ref } from 'vue';
+
+export function useTableHeight(tableRef, options = {}) {
+    const containerRef = ref(null);
+    const offset = options.offset ?? 127;
+    const immediate = options.immediate ?? true;
+
+    let resizeObserver;
+
+    const setTableHeight = () => {
+        if (!tableRef?.value || !containerRef.value) {
+            return;
+        }
+
+        tableRef.value.tableProps = {
+            ...(tableRef.value.tableProps || {}),
+            // @ts-ignore default is null
+            height: containerRef.value.clientHeight - offset
+        };
+    };
+
+    onMounted(() => {
+        if (immediate) {
+            setTableHeight();
+        }
+
+        resizeObserver = new ResizeObserver(() => {
+            setTableHeight();
+        });
+
+        if (containerRef.value) {
+            resizeObserver.observe(containerRef.value);
+        }
+    });
+
+    onUnmounted(() => {
+        resizeObserver?.disconnect();
+    });
+
+    return {
+        containerRef,
+        setTableHeight
+    };
+}
diff --git a/src/index.html b/src/index.html
index edd6e839..01fd50bc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,8 +11,6 @@
 
         <title>VRCX</title>
 
-        <!-- <link rel="stylesheet" href="app.css" /> -->
-
         <link rel="preconnect" href="https://api.vrchat.cloud" />
         <link rel="preconnect" href="https://files.vrchat.cloud" />
         <link rel="preconnect" href="https://d348imysud55la.cloudfront.net" />
diff --git a/src/localization/cs.json b/src/localization/cs.json
index e69f1250..9ea37e32 100644
--- a/src/localization/cs.json
+++ b/src/localization/cs.json
@@ -1782,6 +1782,8 @@
         "notification": {
             "date": "Date",
             "type": "Type",
+            "user": "User",
+            "group": "Group",
             "user_group": "User/Group",
             "photo": "Photo",
             "message": "Message",
diff --git a/src/localization/en.json b/src/localization/en.json
index dfb1ea94..3b66e659 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -21,7 +21,10 @@
         "about": "About",
         "profile": "Profile",
         "settings": "Settings",
-        "help_support": "Help & Support"
+        "manage": "Manage",
+        "help_support": "Help & Support",
+        "expand_menu": "Expand Menu",
+        "collapse_menu": "Collapse Menu"
     },
     "nav_menu": {
         "resources": "RESOURCES",
@@ -292,6 +295,10 @@
             "bulk_unfriend_selection": "Bulk Unfriend Selection",
             "load": "Load missing entries",
             "load_tooltip": "Load",
+            "load_dialog_title": "Load missing entries",
+            "load_dialog_message": "Retrieving missing profile fields for your friends.",
+            "load_cancel": "Cancel",
+            "load_complete": "Missing entries loaded",
             "favorites_only_tooltip": "Filter favorites only",
             "search_placeholder": "Search",
             "filter_placeholder": "Filter",
@@ -560,7 +567,8 @@
                     "table_max_size": "Table Max Size",
                     "table_page_sizes": "Table Page Sizes",
                     "table_page_sizes_error": "Page size must be a number between 1 and 1000",
-                    "show_notification_icon_dot": "Show Tray Notification Dot"
+                    "show_notification_icon_dot": "Show Tray Notification Dot",
+                    "compact_table_mode": "Compact Table Mode"
                 },
                 "timedate": {
                     "header": "Time/Date",
@@ -569,6 +577,9 @@
                     "time_format_12": "12 Hour",
                     "force_iso_date_format": "Force ISO Date Format"
                 },
+                "theme_color": {
+                    "header": "Theme Color"
+                },
                 "side_panel": {
                     "header": "Side Panel",
                     "sorting": {
@@ -873,7 +884,7 @@
         }
     },
     "side_panel": {
-        "search_placeholder": "Search",
+        "search_placeholder": "Search Friend",
         "search_result_active": "Offline",
         "search_result_offline": "Active",
         "search_result_more": "Search More:",
@@ -2254,6 +2265,8 @@
         "notification": {
             "date": "Date",
             "type": "Type",
+            "user": "User",
+            "group": "Group",
             "user_group": "User/Group",
             "photo": "Photo",
             "message": "Message",
diff --git a/src/localization/es.json b/src/localization/es.json
index 5edb5da9..c9647431 100644
--- a/src/localization/es.json
+++ b/src/localization/es.json
@@ -1899,6 +1899,8 @@
         "notification": {
             "date": "Fecha",
             "type": "Tipo",
+            "user": "Usuario",
+            "group": "Grupo",
             "user_group": "Usuario/Grupo",
             "photo": "Foto",
             "message": "Mensaje",
diff --git a/src/localization/fr.json b/src/localization/fr.json
index 2a91280b..d913f46e 100644
--- a/src/localization/fr.json
+++ b/src/localization/fr.json
@@ -1788,6 +1788,8 @@
         "notification": {
             "date": "Date",
             "type": "Type",
+            "user": "Utilisateur",
+            "group": "Groupe",
             "user_group": "Utilisateur/Groupe",
             "photo": "Photo",
             "message": "Message",
diff --git a/src/localization/hu.json b/src/localization/hu.json
index 3cc64b69..89794b69 100644
--- a/src/localization/hu.json
+++ b/src/localization/hu.json
@@ -1660,6 +1660,8 @@
         "notification": {
             "date": "Date",
             "type": "Type",
+            "user": "Felhasználó",
+            "group": "Csoport",
             "user_group": "User/Group",
             "photo": "Photo",
             "message": "Message",
diff --git a/src/localization/ja.json b/src/localization/ja.json
index 876dc595..6441b133 100644
--- a/src/localization/ja.json
+++ b/src/localization/ja.json
@@ -2082,6 +2082,8 @@
         "notification": {
             "date": "日付",
             "type": "種類",
+            "user": "ユーザー",
+            "group": "グループ",
             "user_group": "ユーザーまたはグループ",
             "photo": "画像",
             "message": "メッセージ",
diff --git a/src/localization/ko.json b/src/localization/ko.json
index 479d7608..a19f9749 100644
--- a/src/localization/ko.json
+++ b/src/localization/ko.json
@@ -1674,6 +1674,8 @@
         "notification": {
             "date": "날짜",
             "type": "유형",
+            "user": "유저",
+            "group": "그룹",
             "user_group": "User/Group",
             "photo": "사진",
             "message": "메시지",
diff --git a/src/localization/pl.json b/src/localization/pl.json
index 77cfbf88..af01425c 100644
--- a/src/localization/pl.json
+++ b/src/localization/pl.json
@@ -2225,6 +2225,8 @@
         "notification": {
             "date": "Data",
             "type": "Typ",
+            "user": "Użytkownik",
+            "group": "Grupa",
             "user_group": "Użytkownik/Grupa",
             "photo": "Obrazek",
             "message": "Wiadomość",
diff --git a/src/localization/pt.json b/src/localization/pt.json
index bee586a6..e91c5686 100644
--- a/src/localization/pt.json
+++ b/src/localization/pt.json
@@ -1660,6 +1660,8 @@
         "notification": {
             "date": "Data",
             "type": "Tipo",
+            "user": "Usuário",
+            "group": "Grupo",
             "user_group": "Usuário/Grupo",
             "photo": "Foto",
             "message": "Mensagem",
diff --git a/src/localization/ru.json b/src/localization/ru.json
index 0d104968..025f6de7 100644
--- a/src/localization/ru.json
+++ b/src/localization/ru.json
@@ -2069,6 +2069,8 @@
         "notification": {
             "date": "Дата",
             "type": "Тип",
+            "user": "Пользователь",
+            "group": "Группа",
             "user_group": "Пользователь/Группа",
             "photo": "Фото",
             "message": "Сообщение",
diff --git a/src/localization/th.json b/src/localization/th.json
index 96bbccd8..bc1eec02 100644
--- a/src/localization/th.json
+++ b/src/localization/th.json
@@ -1964,6 +1964,8 @@
         "notification": {
             "date": "วันที่",
             "type": "ประเภท",
+            "user": "ผู้ใช้",
+            "group": "กลุ่ม",
             "user_group": "ผู้ใช้/กลุ่ม",
             "photo": "รูปภาพ",
             "message": "ข้อความ",
diff --git a/src/localization/vi.json b/src/localization/vi.json
index 5bdeb952..9c716057 100644
--- a/src/localization/vi.json
+++ b/src/localization/vi.json
@@ -1660,6 +1660,8 @@
         "notification": {
             "date": "Date",
             "type": "Type",
+            "user": "Người chơi",
+            "group": "Nhóm",
             "user_group": "User/Group",
             "photo": "Photo",
             "message": "Message",
diff --git a/src/localization/zh-CN.json b/src/localization/zh-CN.json
index e37890a8..fa90d4bd 100644
--- a/src/localization/zh-CN.json
+++ b/src/localization/zh-CN.json
@@ -2207,6 +2207,8 @@
         "notification": {
             "date": "时间",
             "type": "类型",
+            "user": "玩家",
+            "group": "群组",
             "user_group": "玩家/群组",
             "photo": "封面",
             "message": "消息",
diff --git a/src/localization/zh-TW.json b/src/localization/zh-TW.json
index 7de86253..d343a9a1 100644
--- a/src/localization/zh-TW.json
+++ b/src/localization/zh-TW.json
@@ -2192,6 +2192,8 @@
         "notification": {
             "date": "時間",
             "type": "類型",
+            "user": "用戶",
+            "group": "群組",
             "user_group": "用戶/群組",
             "photo": "照片",
             "message": "訊息",
diff --git a/src/plugin/components.js b/src/plugin/components.js
index 57bbc4b7..8cf28671 100644
--- a/src/plugin/components.js
+++ b/src/plugin/components.js
@@ -8,12 +8,10 @@ import LastJoin from '../components/LastJoin.vue';
 import Launch from '../components/Launch.vue';
 import Location from '../components/Location.vue';
 import LocationWorld from '../components/LocationWorld.vue';
-import NativeTooltip from '../components/NativeTooltip.vue';
 import Timer from '../components/Timer.vue';
 
 export function initComponents(app) {
     app.component('Location', Location);
-    app.component('NativeTooltip', NativeTooltip);
     app.component('Timer', Timer);
     app.component('InstanceInfo', InstanceInfo);
     app.component('LastJoin', LastJoin);
diff --git a/src/plugin/noty.js b/src/plugin/noty.js
index e3df5974..1f37c456 100644
--- a/src/plugin/noty.js
+++ b/src/plugin/noty.js
@@ -19,7 +19,7 @@ export function initNoty(isVrOverlay = false) {
             },
             layout: 'bottomLeft',
             theme: 'mint',
-            timeout: 6000
+            timeout: 2000
         });
     }
 }
diff --git a/src/plugin/router.js b/src/plugin/router.js
index 9c9fefda..1f7efbca 100644
--- a/src/plugin/router.js
+++ b/src/plugin/router.js
@@ -19,6 +19,7 @@ import PlayerList from './../views/PlayerList/PlayerList.vue';
 import Search from './../views/Search/Search.vue';
 import Settings from './../views/Settings/Settings.vue';
 import Tools from './../views/Tools/Tools.vue';
+import Gallery from './../views/Tools/Gallery.vue';
 
 const routes = [
     {
@@ -83,6 +84,12 @@ const routes = [
                 component: Charts
             },
             { path: 'tools', name: 'tools', component: Tools },
+            {
+                path: 'tools/gallery',
+                name: 'gallery',
+                component: Gallery,
+                meta: { navKey: 'tools' }
+            },
             { path: 'settings', name: 'settings', component: Settings }
         ]
     }
diff --git a/src/assets/images/blank.png b/src/public/images/blank.png
similarity index 100%
rename from src/assets/images/blank.png
rename to src/public/images/blank.png
diff --git a/src/assets/images/flags.png b/src/public/images/flags.png
similarity index 100%
rename from src/assets/images/flags.png
rename to src/public/images/flags.png
diff --git a/src/assets/images/masks/askme.svg b/src/public/images/masks/askme.svg
similarity index 100%
rename from src/assets/images/masks/askme.svg
rename to src/public/images/masks/askme.svg
diff --git a/src/assets/images/masks/busy.svg b/src/public/images/masks/busy.svg
similarity index 100%
rename from src/assets/images/masks/busy.svg
rename to src/public/images/masks/busy.svg
diff --git a/src/assets/images/masks/joinme.svg b/src/public/images/masks/joinme.svg
similarity index 100%
rename from src/assets/images/masks/joinme.svg
rename to src/public/images/masks/joinme.svg
diff --git a/src/assets/images/masks/phone.svg b/src/public/images/masks/phone.svg
similarity index 100%
rename from src/assets/images/masks/phone.svg
rename to src/public/images/masks/phone.svg
diff --git a/src/assets/images/masks/usercutout.svg b/src/public/images/masks/usercutout.svg
similarity index 100%
rename from src/assets/images/masks/usercutout.svg
rename to src/public/images/masks/usercutout.svg
diff --git a/src/assets/images/masks/usercutoutmobile.svg b/src/public/images/masks/usercutoutmobile.svg
similarity index 100%
rename from src/assets/images/masks/usercutoutmobile.svg
rename to src/public/images/masks/usercutoutmobile.svg
diff --git a/src/vr/images/base_status_off.png b/src/public/images/vr/base_status_off.png
similarity index 100%
rename from src/vr/images/base_status_off.png
rename to src/public/images/vr/base_status_off.png
diff --git a/src/vr/images/base_status_ready.png b/src/public/images/vr/base_status_ready.png
similarity index 100%
rename from src/vr/images/base_status_ready.png
rename to src/public/images/vr/base_status_ready.png
diff --git a/src/vr/images/controller_status_off.png b/src/public/images/vr/controller_status_off.png
similarity index 100%
rename from src/vr/images/controller_status_off.png
rename to src/public/images/vr/controller_status_off.png
diff --git a/src/vr/images/controller_status_ready.png b/src/public/images/vr/controller_status_ready.png
similarity index 100%
rename from src/vr/images/controller_status_ready.png
rename to src/public/images/vr/controller_status_ready.png
diff --git a/src/vr/images/controller_status_ready_charging.png b/src/public/images/vr/controller_status_ready_charging.png
similarity index 100%
rename from src/vr/images/controller_status_ready_charging.png
rename to src/public/images/vr/controller_status_ready_charging.png
diff --git a/src/vr/images/controller_status_ready_low.png b/src/public/images/vr/controller_status_ready_low.png
similarity index 100%
rename from src/vr/images/controller_status_ready_low.png
rename to src/public/images/vr/controller_status_ready_low.png
diff --git a/src/vr/images/headset_quest_status_off.png b/src/public/images/vr/headset_quest_status_off.png
similarity index 100%
rename from src/vr/images/headset_quest_status_off.png
rename to src/public/images/vr/headset_quest_status_off.png
diff --git a/src/vr/images/headset_quest_status_ready.png b/src/public/images/vr/headset_quest_status_ready.png
similarity index 100%
rename from src/vr/images/headset_quest_status_ready.png
rename to src/public/images/vr/headset_quest_status_ready.png
diff --git a/src/vr/images/headset_quest_status_ready_charging.png b/src/public/images/vr/headset_quest_status_ready_charging.png
similarity index 100%
rename from src/vr/images/headset_quest_status_ready_charging.png
rename to src/public/images/vr/headset_quest_status_ready_charging.png
diff --git a/src/vr/images/headset_quest_status_ready_low.png b/src/public/images/vr/headset_quest_status_ready_low.png
similarity index 100%
rename from src/vr/images/headset_quest_status_ready_low.png
rename to src/public/images/vr/headset_quest_status_ready_low.png
diff --git a/src/vr/images/left_controller_status_off.png b/src/public/images/vr/left_controller_status_off.png
similarity index 100%
rename from src/vr/images/left_controller_status_off.png
rename to src/public/images/vr/left_controller_status_off.png
diff --git a/src/vr/images/left_controller_status_ready.png b/src/public/images/vr/left_controller_status_ready.png
similarity index 100%
rename from src/vr/images/left_controller_status_ready.png
rename to src/public/images/vr/left_controller_status_ready.png
diff --git a/src/vr/images/left_controller_status_ready_charging.png b/src/public/images/vr/left_controller_status_ready_charging.png
similarity index 100%
rename from src/vr/images/left_controller_status_ready_charging.png
rename to src/public/images/vr/left_controller_status_ready_charging.png
diff --git a/src/vr/images/left_controller_status_ready_low.png b/src/public/images/vr/left_controller_status_ready_low.png
similarity index 100%
rename from src/vr/images/left_controller_status_ready_low.png
rename to src/public/images/vr/left_controller_status_ready_low.png
diff --git a/src/vr/images/other_status_off.png b/src/public/images/vr/other_status_off.png
similarity index 100%
rename from src/vr/images/other_status_off.png
rename to src/public/images/vr/other_status_off.png
diff --git a/src/vr/images/other_status_ready.png b/src/public/images/vr/other_status_ready.png
similarity index 100%
rename from src/vr/images/other_status_ready.png
rename to src/public/images/vr/other_status_ready.png
diff --git a/src/vr/images/other_status_ready_charging.png b/src/public/images/vr/other_status_ready_charging.png
similarity index 100%
rename from src/vr/images/other_status_ready_charging.png
rename to src/public/images/vr/other_status_ready_charging.png
diff --git a/src/vr/images/other_status_ready_low.png b/src/public/images/vr/other_status_ready_low.png
similarity index 100%
rename from src/vr/images/other_status_ready_low.png
rename to src/public/images/vr/other_status_ready_low.png
diff --git a/src/vr/images/right_controller_status_off.png b/src/public/images/vr/right_controller_status_off.png
similarity index 100%
rename from src/vr/images/right_controller_status_off.png
rename to src/public/images/vr/right_controller_status_off.png
diff --git a/src/vr/images/right_controller_status_ready.png b/src/public/images/vr/right_controller_status_ready.png
similarity index 100%
rename from src/vr/images/right_controller_status_ready.png
rename to src/public/images/vr/right_controller_status_ready.png
diff --git a/src/vr/images/right_controller_status_ready_charging.png b/src/public/images/vr/right_controller_status_ready_charging.png
similarity index 100%
rename from src/vr/images/right_controller_status_ready_charging.png
rename to src/public/images/vr/right_controller_status_ready_charging.png
diff --git a/src/vr/images/right_controller_status_ready_low.png b/src/public/images/vr/right_controller_status_ready_low.png
similarity index 100%
rename from src/vr/images/right_controller_status_ready_low.png
rename to src/public/images/vr/right_controller_status_ready_low.png
diff --git a/src/vr/images/tracker_status_off.png b/src/public/images/vr/tracker_status_off.png
similarity index 100%
rename from src/vr/images/tracker_status_off.png
rename to src/public/images/vr/tracker_status_off.png
diff --git a/src/vr/images/tracker_status_ready.png b/src/public/images/vr/tracker_status_ready.png
similarity index 100%
rename from src/vr/images/tracker_status_ready.png
rename to src/public/images/vr/tracker_status_ready.png
diff --git a/src/vr/images/tracker_status_ready_charging.png b/src/public/images/vr/tracker_status_ready_charging.png
similarity index 100%
rename from src/vr/images/tracker_status_ready_charging.png
rename to src/public/images/vr/tracker_status_ready_charging.png
diff --git a/src/vr/images/tracker_status_ready_low.png b/src/public/images/vr/tracker_status_ready_low.png
similarity index 100%
rename from src/vr/images/tracker_status_ready_low.png
rename to src/public/images/vr/tracker_status_ready_low.png
diff --git a/src/shared/constants/accessType.js b/src/shared/constants/accessType.js
new file mode 100644
index 00000000..5b78f2ff
--- /dev/null
+++ b/src/shared/constants/accessType.js
@@ -0,0 +1,13 @@
+const accessTypeLocaleKeyMap = {
+    public: 'dialog.new_instance.access_type_public',
+    group: 'dialog.new_instance.access_type_group',
+    'friends+': 'dialog.new_instance.access_type_friend_plus',
+    friends: 'dialog.new_instance.access_type_friend',
+    'invite+': 'dialog.new_instance.access_type_invite_plus',
+    invite: 'dialog.new_instance.access_type_invite',
+    groupPublic: 'dialog.new_instance.group_access_type_public',
+    groupPlus: 'dialog.new_instance.group_access_type_plus',
+    groupMembers: 'dialog.new_instance.group_access_type_members'
+};
+
+export { accessTypeLocaleKeyMap };
diff --git a/src/shared/constants/index.js b/src/shared/constants/index.js
index d814b3bc..f3043fcf 100644
--- a/src/shared/constants/index.js
+++ b/src/shared/constants/index.js
@@ -10,3 +10,4 @@ export * from './moderation';
 export * from './themes';
 export * from './link';
 export * from './ui';
+export * from './accessType';
diff --git a/src/shared/constants/themes.js b/src/shared/constants/themes.js
index e6deee51..78a72fe9 100644
--- a/src/shared/constants/themes.js
+++ b/src/shared/constants/themes.js
@@ -1,52 +1,69 @@
-import amoled from '../../assets/scss/themes/theme.amoled.scss?url';
-import dark from '../../assets/scss/themes/theme.dark.scss?url';
-import darkblue from '../../assets/scss/themes/theme.darkblue.scss?url';
-import material3 from '../../assets/scss/themes/theme.material3.scss?url';
+import appCss from '../../app.css?url';
+// import appLegacy from '../../assets/scss/themes/app_legacy.scss?url';
+// import material3 from '../../assets/scss/themes/theme.material3.scss?url';
 
 export const THEME_CONFIG = {
     system: {
-        cssFile: '',
+        cssFiles: [appCss],
         isDark: 'system',
         name: 'System'
     },
     light: {
-        cssFile: '',
+        cssFiles: [appCss],
         isDark: false,
+        useDarkClass: false,
         name: 'Light'
     },
-    dark: { cssFile: dark, isDark: true, name: 'Dark' },
-    darkblue: {
-        cssFile: darkblue,
+    dark: {
+        cssFiles: [appCss],
         isDark: true,
-        name: 'Dark Blue'
-    },
-    amoled: {
-        cssFile: amoled,
-        isDark: true,
-        name: 'Amoled'
-    },
-    // darkvanillaold: {
-    //     cssFile: darkvanillaold,
+        useDarkClass: true,
+        name: 'Dark'
+    }
+    // darkold: {
+    //     cssFiles: [appLegacy, dark],
     //     isDark: true,
+    //     useDarkClass: false,
+    //     name: 'Dark (Old)'
+    // },
+    // darkblue: {
+    //     cssFiles: [appLegacy, darkblue],
+    //     isDark: true,
+    //     useDarkClass: false,
+    //     name: 'Dark Blue'
+    // },
+    // amoled: {
+    //     cssFiles: [appLegacy, amoled],
+    //     isDark: true,
+    //     useDarkClass: false,
+    //     name: 'Amoled'
+    // },
+    // darkvanillaold: {
+    //     cssFiles: [appLegacy, darkvanillaold],
+    //     isDark: true,
+    //     useDarkClass: false,
     //     name: 'Dark Vanilla Old'
     // },
     // darkvanilla: {
-    //     cssFile: darkvanilla,
+    //     cssFiles: [appLegacy, darkvanilla],
     //     isDark: true,
+    //     useDarkClass: false,
     //     name: 'Dark Vanilla'
     // },
     // pink: {
-    //     cssFile: pink,
+    //     cssFiles: [appLegacy, pink],
     //     isDark: true,
+    //     useDarkClass: false,
     //     name: 'Pink'
     // },
-    material3: {
-        cssFile: material3,
-        isDark: true,
-        name: 'Material 3',
-        fontLinks: [
-            'https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&family=Noto+Sans+TC:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&family=Roboto&display=swap',
-            'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'
-        ]
-    }
+    // material3: {
+    //     cssFiles: [appLegacy, material3],
+    //     isDark: true,
+    //     useDarkClass: false,
+    //     name: 'Material 3',
+    //     fontLinks: [
+    //         'https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&family=Noto+Sans+TC:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&family=Roboto&display=swap',
+    //         'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'
+    //     ]
+    // }
 };
diff --git a/src/shared/constants/ui.js b/src/shared/constants/ui.js
index 779c3590..4a82f94e 100644
--- a/src/shared/constants/ui.js
+++ b/src/shared/constants/ui.js
@@ -96,6 +96,13 @@ const navDefinitions = [
         tooltip: 'nav_tooltip.tools',
         labelKey: 'nav_tooltip.tools',
         routeName: 'tools'
+    },
+    {
+        key: 'direct-access',
+        icon: 'ri-compass-3-line',
+        tooltip: 'prompt.direct_access_omni.header',
+        labelKey: 'prompt.direct_access_omni.header',
+        action: 'direct-access'
     }
 ];
 
diff --git a/src/shared/utils/base/ui.js b/src/shared/utils/base/ui.js
index 241d0f70..c131f248 100644
--- a/src/shared/utils/base/ui.js
+++ b/src/shared/utils/base/ui.js
@@ -48,6 +48,25 @@ function applyThemeFonts(themeKey, fontLinks = []) {
     });
 }
 
+function ensureStylesheetLink(id) {
+    const linkEl = /** @type {HTMLLinkElement | null} */ (
+        document.getElementById(id)
+    );
+    if (!linkEl) {
+        const created = document.createElement('link');
+        created.setAttribute('id', id);
+        created.rel = 'stylesheet';
+        document.head.appendChild(created);
+        return created;
+    }
+    return linkEl;
+}
+
+function removeStylesheetLink(id) {
+    const linkEl = document.getElementById(id);
+    linkEl?.remove();
+}
+
 function changeAppThemeStyle(themeMode) {
     if (themeMode === 'system') {
         themeMode = systemIsDarkMode() ? 'dark' : 'light';
@@ -61,27 +80,35 @@ function changeAppThemeStyle(themeMode) {
         themeConfig = THEME_CONFIG[themeMode];
     }
 
-    let filePathPrefix = 'file://vrcx/';
-    if (LINUX) {
-        filePathPrefix = './';
-    }
-    if (process.env.NODE_ENV === 'development') {
-        filePathPrefix = 'http://localhost:9000/';
-        console.log('Using development file path prefix:', filePathPrefix);
+    const cssFiles = Array.isArray(themeConfig.cssFiles)
+        ? themeConfig.cssFiles.filter(Boolean)
+        : themeConfig.cssFile
+          ? [themeConfig.cssFile]
+          : [];
+
+    if (cssFiles.length > 0) {
+        const $appThemeStyle = ensureStylesheetLink('app-theme-style');
+        $appThemeStyle.href = cssFiles[0];
+    } else {
+        removeStylesheetLink('app-theme-style');
     }
 
-    let $appThemeStyle = document.getElementById('app-theme-style');
-    if (!$appThemeStyle) {
-        $appThemeStyle = document.createElement('link');
-        $appThemeStyle.setAttribute('id', 'app-theme-style');
-        $appThemeStyle.rel = 'stylesheet';
-        document.head.appendChild($appThemeStyle);
+    if (cssFiles.length > 1) {
+        const $appThemeOverlayStyle = ensureStylesheetLink(
+            'app-theme-overlay-style'
+        );
+        $appThemeOverlayStyle.href = cssFiles[1];
+    } else {
+        removeStylesheetLink('app-theme-overlay-style');
     }
-    $appThemeStyle.href = themeConfig.cssFile ? themeConfig.cssFile : '';
 
     applyThemeFonts(themeMode, themeConfig.fontLinks);
 
-    if (themeConfig.isDark) {
+    const shouldUseDarkClass =
+        typeof themeConfig.useDarkClass === 'boolean'
+            ? themeConfig.useDarkClass
+            : Boolean(themeConfig.isDark);
+    if (shouldUseDarkClass) {
         document.documentElement.classList.add('dark');
     } else {
         document.documentElement.classList.remove('dark');
@@ -258,19 +285,19 @@ function setLoginContainerStyle(isDarkMode) {
     loginContainerStyle.id = 'login-container-style';
     loginContainerStyle.type = 'text/css';
 
-    const backgroundColor = isDarkMode ? '#101010' : '#ffffff';
-    const inputBackgroundColor = isDarkMode ? '#333333' : '#ffffff';
-    const inputBorder = isDarkMode ? '1px solid #3b3b3b' : '1px solid #DCDFE6';
+    const backgroundFallback = isDarkMode ? '#101010' : '#ffffff';
+    const inputBackgroundFallback = isDarkMode ? '#1f1f1f' : '#ffffff';
+    const borderFallback = isDarkMode ? '#3b3b3b' : '#DCDFE6';
 
     loginContainerStyle.innerHTML = `
     .x-login-container {
-        background-color: ${backgroundColor} !important;
+        background-color: var(--el-bg-color-page, ${backgroundFallback}) !important;
         transition: background-color 0.3s ease;
     }
 
     .x-login-container .el-input__wrapper {
-        background-color: ${inputBackgroundColor} !important;
-        border: ${inputBorder} !important;
+        background-color: var(--el-bg-color, ${inputBackgroundFallback}) !important;
+        border: 1px solid var(--el-border-color, ${borderFallback}) !important;
         transition: background-color 0.3s ease, border-color 0.3s ease;
     }
         `;
diff --git a/src/stores/gallery.js b/src/stores/gallery.js
index db08a8ba..0a1d3187 100644
--- a/src/stores/gallery.js
+++ b/src/stores/gallery.js
@@ -21,6 +21,7 @@ import { AppDebug } from '../service/appConfig';
 import { handleImageUploadInput } from '../shared/utils/imageUpload';
 import { useAdvancedSettingsStore } from './settings/advanced';
 import { watchState } from '../service/watchState';
+import { router } from '../plugin/router';
 
 import miscReq from '../api/misc';
 
@@ -122,8 +123,16 @@ export const useGalleryStore = defineStore('Gallery', () => {
         }
     }
 
-    function showGalleryDialog() {
+    function showGalleryPage() {
         galleryDialogVisible.value = true;
+        if (router.currentRoute.value?.name === 'gallery') {
+            loadGalleryData();
+            return;
+        }
+        router.push({ name: 'gallery' });
+    }
+
+    function loadGalleryData() {
         refreshGalleryTable();
         refreshVRCPlusIconsTable();
         refreshEmojiTable();
@@ -572,7 +581,8 @@ export const useGalleryStore = defineStore('Gallery', () => {
         fullscreenImageDialog,
         cachedEmoji,
 
-        showGalleryDialog,
+        showGalleryPage,
+        loadGalleryData,
         refreshGalleryTable,
         refreshVRCPlusIconsTable,
         inviteImageUpload,
diff --git a/src/stores/settings/appearance.js b/src/stores/settings/appearance.js
index a74ad6dc..19ad8738 100644
--- a/src/stores/settings/appearance.js
+++ b/src/stores/settings/appearance.js
@@ -12,9 +12,12 @@ import {
     systemIsDarkMode,
     updateTrustColorClasses
 } from '../../shared/utils/base/ui';
+import { THEME_CONFIG } from '../../shared/constants';
 import { database } from '../../service/database';
 import { getNameColour } from '../../shared/utils';
+import { languageCodes } from '../../localization';
 import { loadLocalizedStrings } from '../../plugin';
+import { useElementTheme } from '../../composables/useElementTheme';
 import { useFeedStore } from '../feed';
 import { useGameLogStore } from '../gameLog';
 import { useUiStore } from '../ui';
@@ -24,7 +27,6 @@ import { useVrcxStore } from '../vrcx';
 import { watchState } from '../../service/watchState';
 
 import configRepository from '../../service/config';
-import { languageCodes } from '../../localization';
 
 export const useAppearanceSettingsStore = defineStore(
     'AppearanceSettings',
@@ -42,6 +44,7 @@ export const useAppearanceSettingsStore = defineStore(
 
         const MAX_TABLE_PAGE_SIZE = 1000;
         const DEFAULT_TABLE_PAGE_SIZES = [10, 15, 20, 25, 50, 100];
+        const { initPrimaryColor } = useElementTheme();
 
         const appLanguage = ref('en');
         const themeMode = ref('');
@@ -71,7 +74,8 @@ export const useAppearanceSettingsStore = defineStore(
         const hideUserMemos = ref(false);
         const hideUnfriends = ref(false);
         const randomUserColours = ref(false);
-        const trustColor = ref({
+        const compactTableMode = ref(false);
+        const TRUST_COLOR_DEFAULTS = Object.freeze({
             untrusted: '#CCCCCC',
             basic: '#1778FF',
             known: '#2BCF5C',
@@ -80,8 +84,10 @@ export const useAppearanceSettingsStore = defineStore(
             vip: '#FF2626',
             troll: '#782F2F'
         });
+        const trustColor = ref({ ...TRUST_COLOR_DEFAULTS });
         const currentCulture = ref('');
         const notificationIconDot = ref(false);
+        const isNavCollapsed = ref(true);
         const isSideBarTabShow = computed(() => {
             const currentRouteName = router.currentRoute.value?.name;
             return !(
@@ -118,8 +124,10 @@ export const useAppearanceSettingsStore = defineStore(
                 hideUserMemosConfig,
                 hideUnfriendsConfig,
                 randomUserColoursConfig,
+                compactTableModeConfig,
                 trustColorConfig,
-                notificationIconDotConfig
+                notificationIconDotConfig,
+                navIsCollapsedConfig
             ] = await Promise.all([
                 configRepository.getString('VRCX_appLanguage'),
                 configRepository.getString('VRCX_ThemeMode', 'system'),
@@ -163,19 +171,13 @@ export const useAppearanceSettingsStore = defineStore(
                 configRepository.getBool('VRCX_hideUserMemos', false),
                 configRepository.getBool('VRCX_hideUnfriends', false),
                 configRepository.getBool('VRCX_randomUserColours', false),
+                configRepository.getBool('VRCX_compactTableMode', false),
                 configRepository.getString(
                     'VRCX_trustColor',
-                    JSON.stringify({
-                        untrusted: '#CCCCCC',
-                        basic: '#1778FF',
-                        known: '#2BCF5C',
-                        trusted: '#FF7B42',
-                        veteran: '#B18FFF',
-                        vip: '#FF2626',
-                        troll: '#782F2F'
-                    })
+                    JSON.stringify(TRUST_COLOR_DEFAULTS)
                 ),
-                configRepository.getBool('VRCX_notificationIconDot', true)
+                configRepository.getBool('VRCX_notificationIconDot', true),
+                configRepository.getBool('VRCX_navIsCollapsed', true)
             ]);
 
             if (!appLanguageConfig) {
@@ -193,8 +195,18 @@ export const useAppearanceSettingsStore = defineStore(
                 await changeAppLanguage(appLanguageConfig);
             }
 
-            themeMode.value = themeModeConfig;
+            const normalizedThemeMode = normalizeThemeMode(themeModeConfig);
+            if (normalizedThemeMode !== themeModeConfig) {
+                configRepository.setString(
+                    'VRCX_ThemeMode',
+                    normalizedThemeMode
+                );
+            }
+
+            themeMode.value = normalizedThemeMode;
             applyThemeMode();
+            await changeAppThemeStyle(themeMode.value);
+            await initPrimaryColor();
 
             displayVRCPlusIconsAsAvatar.value =
                 displayVRCPlusIconsAsAvatarConfig;
@@ -222,7 +234,13 @@ export const useAppearanceSettingsStore = defineStore(
                 sidebarSortMethod3.value = sidebarSortMethods.value[2];
             }
 
-            trustColor.value = JSON.parse(trustColorConfig);
+            if (trustColorConfig !== JSON.stringify(TRUST_COLOR_DEFAULTS)) {
+                await configRepository.setString(
+                    'VRCX_trustColor',
+                    JSON.stringify(TRUST_COLOR_DEFAULTS)
+                );
+            }
+            trustColor.value = { ...TRUST_COLOR_DEFAULTS };
             asideWidth.value = asideWidthConfig;
             isSidebarGroupByInstance.value = isSidebarGroupByInstanceConfig;
             isHideFriendsInSameInstance.value =
@@ -234,6 +252,11 @@ export const useAppearanceSettingsStore = defineStore(
             hideUnfriends.value = hideUnfriendsConfig;
             randomUserColours.value = randomUserColoursConfig;
             notificationIconDot.value = notificationIconDotConfig;
+            compactTableMode.value = compactTableModeConfig;
+            applyCompactTableMode(compactTableMode.value);
+            isNavCollapsed.value = navIsCollapsedConfig;
+
+            await configRepository.remove('VRCX_navWidth');
 
             // Migrate old settings
             // Assume all exist if one does
@@ -256,6 +279,12 @@ export const useAppearanceSettingsStore = defineStore(
             { flush: 'sync' }
         );
 
+        function normalizeThemeMode(mode) {
+            return Object.prototype.hasOwnProperty.call(THEME_CONFIG, mode)
+                ? mode
+                : 'light';
+        }
+
         /**
          *
          * @param {string} language
@@ -421,8 +450,9 @@ export const useAppearanceSettingsStore = defineStore(
          * @param {string} mode
          */
         function setThemeMode(mode) {
-            themeMode.value = mode;
-            configRepository.setString('VRCX_ThemeMode', mode);
+            const normalizedThemeMode = normalizeThemeMode(mode);
+            themeMode.value = normalizedThemeMode;
+            configRepository.setString('VRCX_ThemeMode', normalizedThemeMode);
             applyThemeMode();
         }
         function applyThemeMode() {
@@ -557,18 +587,24 @@ export const useAppearanceSettingsStore = defineStore(
                 JSON.stringify(methods)
             );
         }
-        /**
-         * @param {number} panelNumber
-         * @param {Array<number>} widthArray
-         */
-        function setAsideWidth(panelNumber, widthArray) {
-            if (Array.isArray(widthArray) && widthArray[1]) {
+        function setNavCollapsed(collapsed) {
+            isNavCollapsed.value = collapsed;
+            configRepository.setBool('VRCX_navIsCollapsed', collapsed);
+        }
+        function toggleNavCollapsed() {
+            setNavCollapsed(!isNavCollapsed.value);
+        }
+        function setAsideWidth(widthOrArray) {
+            let width = null;
+            if (Array.isArray(widthOrArray) && widthOrArray.length) {
+                width = widthOrArray[widthOrArray.length - 1];
+            } else if (typeof widthOrArray === 'number') {
+                width = widthOrArray;
+            }
+            if (width) {
                 requestAnimationFrame(() => {
-                    asideWidth.value = widthArray[1];
-                    configRepository.setInt(
-                        'VRCX_sidePanelWidth',
-                        widthArray[1]
-                    );
+                    asideWidth.value = width;
+                    configRepository.setInt('VRCX_sidePanelWidth', width);
                 });
             }
         }
@@ -614,14 +650,22 @@ export const useAppearanceSettingsStore = defineStore(
                 randomUserColours.value
             );
         }
+        function setCompactTableMode() {
+            compactTableMode.value = !compactTableMode.value;
+            applyCompactTableMode(compactTableMode.value);
+            configRepository.setBool(
+                'VRCX_compactTableMode',
+                compactTableMode.value
+            );
+        }
         /**
          * @param {object} color
          */
         function setTrustColor(color) {
-            trustColor.value = color;
+            trustColor.value = { ...TRUST_COLOR_DEFAULTS };
             configRepository.setString(
                 'VRCX_trustColor',
-                JSON.stringify(color)
+                JSON.stringify(trustColor.value)
             );
         }
 
@@ -741,6 +785,15 @@ export const useAppearanceSettingsStore = defineStore(
             await userColourInit();
         }
 
+        function applyCompactTableMode(isCompact) {
+            const className = 'is-compact-table';
+            if (isCompact) {
+                document.documentElement.classList.add(className);
+            } else {
+                document.documentElement.classList.remove(className);
+            }
+        }
+
         return {
             appLanguage,
             themeMode,
@@ -766,10 +819,12 @@ export const useAppearanceSettingsStore = defineStore(
             hideUserMemos,
             hideUnfriends,
             randomUserColours,
+            compactTableMode,
             trustColor,
             currentCulture,
             isSideBarTabShow,
             notificationIconDot,
+            isNavCollapsed,
 
             setAppLanguage,
             setDisplayVRCPlusIconsAsAvatar,
@@ -793,6 +848,7 @@ export const useAppearanceSettingsStore = defineStore(
             setHideUserMemos,
             setHideUnfriends,
             setRandomUserColours,
+            setCompactTableMode,
             setTrustColor,
             saveThemeMode,
             tryInitUserColours,
@@ -802,7 +858,10 @@ export const useAppearanceSettingsStore = defineStore(
             applyUserTrustLevel,
             changeAppLanguage,
             promptMaxTableSizeDialog,
-            setNotificationIconDot
+            setNotificationIconDot,
+            applyCompactTableMode,
+            setNavCollapsed,
+            toggleNavCollapsed
         };
     }
 );
diff --git a/src/views/Charts/Charts.vue b/src/views/Charts/Charts.vue
index dead02e8..88efc3f0 100644
--- a/src/views/Charts/Charts.vue
+++ b/src/views/Charts/Charts.vue
@@ -1,8 +1,5 @@
 <template>
     <div id="chart" class="x-container">
-        <div class="options-container" style="margin-top: 0">
-            <span class="header">{{ t('view.charts.header') }}</span>
-        </div>
         <el-tabs v-model="activeTab" class="charts-tabs">
             <el-tab-pane :label="t('view.charts.instance_activity.header')" name="instance"></el-tab-pane>
             <el-tab-pane :label="t('view.charts.mutual_friend.tab_label')" name="mutual"></el-tab-pane>
@@ -33,7 +30,7 @@
 </script>
 
 <style scoped>
-    .charts-tabs {
-        margin-bottom: 12px;
+    :deep(.el-tabs__header) {
+        margin: 0;
     }
 </style>
diff --git a/src/views/Charts/components/InstanceActivity.vue b/src/views/Charts/components/InstanceActivity.vue
index 027fb09d..6a8e0d94 100644
--- a/src/views/Charts/components/InstanceActivity.vue
+++ b/src/views/Charts/components/InstanceActivity.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div ref="instanceActivityRef" class="pt-12">
         <div class="options-container instance-activity" style="margin-top: 0">
             <div>
                 <span>{{ t('view.charts.instance_activity.header') }}</span>
@@ -151,6 +151,33 @@
     const { currentUser } = storeToRefs(useUserStore());
     const { t } = useI18n();
 
+    const instanceActivityRef = ref(null);
+
+    const instanceActivityResizeObserver = new ResizeObserver(() => {
+        setInstanceActivityHeight();
+    });
+
+    function setInstanceActivityHeight() {
+        if (instanceActivityRef.value) {
+            const availableHeight = window.innerHeight - 100;
+            instanceActivityRef.value.style.height = `${availableHeight}px`;
+            instanceActivityRef.value.style.overflowY = 'auto';
+        }
+    }
+
+    onMounted(() => {
+        if (instanceActivityRef.value) {
+            instanceActivityResizeObserver.observe(instanceActivityRef.value);
+        }
+        setInstanceActivityHeight();
+    });
+
+    onBeforeUnmount(() => {
+        if (instanceActivityRef.value) {
+            instanceActivityResizeObserver.unobserve(instanceActivityRef.value);
+        }
+    });
+
     const {
         barWidth,
         isDetailVisible,
@@ -623,7 +650,7 @@
         align-items: center;
         justify-content: center;
         margin-top: 100px;
-        color: #5c5c5c;
+        color: var(--el-text-color-secondary);
     }
     .divider {
         padding: 0 400px;
diff --git a/src/views/Charts/components/MutualFriends.vue b/src/views/Charts/components/MutualFriends.vue
index 4d534514..c7710cc2 100644
--- a/src/views/Charts/components/MutualFriends.vue
+++ b/src/views/Charts/components/MutualFriends.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="mutual-graph">
+    <div class="mutual-graph pt-12" ref="mutualGraphRef">
         <div class="options-container mutual-graph__toolbar">
             <div class="mutual-graph__actions">
                 <el-tooltip :content="t('view.charts.mutual_friend.force_dialog.open_label')" placement="top">
@@ -207,6 +207,20 @@
         return parsed.invalid ? null : parsed.value;
     };
 
+    const mutualGraphRef = ref(null);
+
+    const mutualGraphResizeObserver = new ResizeObserver(() => {
+        setMutualGraphHeight();
+    });
+
+    function setMutualGraphHeight() {
+        if (mutualGraphRef.value) {
+            const availableHeight = window.innerHeight - 100;
+            mutualGraphRef.value.style.height = `${availableHeight}px`;
+            mutualGraphRef.value.style.overflowY = 'auto';
+        }
+    }
+
     onMounted(() => {
         nextTick(() => {
             if (!chartRef.value) {
@@ -215,6 +229,8 @@
             createChartInstance();
             resizeObserver = new ResizeObserver(() => chartInstance?.resize());
             resizeObserver.observe(chartRef.value);
+            mutualGraphResizeObserver.observe(mutualGraphRef.value);
+            setMutualGraphHeight();
         });
     });
 
@@ -227,6 +243,9 @@
             chartInstance.dispose();
             chartInstance = null;
         }
+        if (mutualGraphResizeObserver) {
+            mutualGraphResizeObserver.disconnect();
+        }
     });
 
     watch(
@@ -676,8 +695,8 @@
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        margin-top: 0;
-        margin-bottom: 8px;
+        margin-top: 8px;
+        margin-bottom: 0;
         background: transparent;
         border: none;
         box-shadow: none;
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index 595faa78..fb9b7cb4 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -1580,6 +1580,7 @@
         justify-content: space-between;
         font-weight: 600;
         font-size: 14px;
+        margin-bottom: 9px;
     }
 
     .group-section__list {
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index 2a13a2d6..1d111c1a 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -796,6 +796,7 @@
         justify-content: space-between;
         font-weight: 600;
         font-size: 14px;
+        margin-bottom: 9px;
     }
 
     .group-section__list {
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index 22b6b3ac..c8783716 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -1276,6 +1276,7 @@
         justify-content: space-between;
         font-weight: 600;
         font-size: 14px;
+        margin-bottom: 9px;
     }
 
     .group-section__list {
diff --git a/src/views/Feed/Feed.vue b/src/views/Feed/Feed.vue
index a6c0e165..7bcac2e5 100644
--- a/src/views/Feed/Feed.vue
+++ b/src/views/Feed/Feed.vue
@@ -1,14 +1,13 @@
 <template>
-    <div class="x-container feed">
+    <div class="x-container feed" ref="feedRef">
         <div style="margin: 0 0 10px; display: flex; align-items: center">
             <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
-                <NativeTooltip
-                    placement="bottom"
-                    :content="t('view.feed.favorites_only_tooltip')"
-                    :enter-ms="140"
-                    :exit-ms="120">
-                    <el-switch v-model="feedTable.vip" active-color="#13ce66" @change="feedTableLookup"></el-switch>
-                </NativeTooltip>
+                <el-tooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
+                    <el-switch
+                        v-model="feedTable.vip"
+                        active-color="var(--el-color-success)"
+                        @change="feedTableLookup"></el-switch>
+                </el-tooltip>
             </div>
             <el-select
                 v-model="feedTable.filter"
@@ -33,9 +32,9 @@
         </div>
 
         <DataTable v-bind="feedTable" :data="feedDisplayData">
-            <el-table-column type="expand" width="20">
+            <el-table-column type="expand" width="30">
                 <template #default="scope">
-                    <div style="position: relative; font-size: 14px">
+                    <div style="position: relative; font-size: 14px" class="pl-5">
                         <template v-if="scope.row.type === 'GPS'">
                             <Location
                                 v-if="scope.row.previousLocation"
@@ -45,9 +44,7 @@
                                 timeToText(scope.row.time)
                             }}</el-tag>
                             <br />
-                            <span style="margin-right: 5px">
-                                <el-icon><Right /></el-icon>
-                            </span>
+                            <span style="margin-right: 5px"> ↓ </span>
                             <Location
                                 v-if="scope.row.location"
                                 :location="scope.row.location"
@@ -91,7 +88,7 @@
                                     </template>
                                 </div>
                                 <span style="position: relative; margin: 0 10px">
-                                    <el-icon><Right /></el-icon>
+                                    {{ ' → ' }}
                                 </span>
 
                                 <div style="display: inline-block; vertical-align: top; width: 160px">
@@ -116,9 +113,7 @@
                             <i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
                             <span style="margin-left: 5px" v-text="scope.row.previousStatusDescription"></span>
                             <br />
-                            <span>
-                                <el-icon><Right /></el-icon>
-                            </span>
+                            <span> → </span>
 
                             <i class="x-user-status" :class="statusClass(scope.row.status)" style="margin: 0 5px"></i>
                             <span v-text="scope.row.statusDescription"></span>
@@ -132,27 +127,29 @@
                 </template>
             </el-table-column>
 
-            <el-table-column :label="t('table.feed.date')" prop="created_at" width="130">
+            <el-table-column :label="t('table.feed.date')" prop="created_at" width="140">
                 <template #default="scope">
-                    <NativeTooltip placement="right">
+                    <el-tooltip placement="right">
                         <template #content>
                             <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
                         </template>
                         <span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
-                    </NativeTooltip>
+                    </el-tooltip>
                 </template>
             </el-table-column>
 
-            <el-table-column :label="t('table.feed.type')" prop="type" width="80">
+            <el-table-column :label="t('table.feed.type')" prop="type" width="130">
                 <template #default="scope">
-                    <span v-text="t('view.feed.filters.' + scope.row.type)"></span>
+                    <el-tag type="info" effect="plain" size="small">{{
+                        t('view.feed.filters.' + scope.row.type)
+                    }}</el-tag>
                 </template>
             </el-table-column>
 
-            <el-table-column :label="t('table.feed.user')" prop="displayName" width="180">
+            <el-table-column :label="t('table.feed.user')" prop="displayName" width="190">
                 <template #default="scope">
                     <span
-                        class="x-link"
+                        class="x-link table-user"
                         style="padding-right: 10px"
                         @click="showUserDialog(scope.row.userId)"
                         v-text="scope.row.displayName"></span>
@@ -178,17 +175,12 @@
                     <template v-else-if="scope.row.type === 'Status'">
                         <template v-if="scope.row.statusDescription === scope.row.previousStatusDescription">
                             <i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
-                            <span style="margin: 0 5px">
-                                <el-icon><Right /></el-icon>
-                            </span>
+                            <span class="mx-2"> → </span>
 
                             <i class="x-user-status" :class="statusClass(scope.row.status)"></i>
                         </template>
                         <template v-else>
-                            <i
-                                class="x-user-status"
-                                :class="statusClass(scope.row.status)"
-                                style="margin-right: 3px"></i>
+                            <i class="x-user-status mr-2" :class="statusClass(scope.row.status)"></i>
                             <span v-text="scope.row.statusDescription"></span>
                         </template>
                     </template>
@@ -210,13 +202,13 @@
 </template>
 
 <script setup>
-    import { Right } from '@element-plus/icons-vue';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import { formatDateFilter, statusClass, timeToText } from '../../shared/utils';
     import { useFeedStore, useUserStore } from '../../stores';
+    import { useTableHeight } from '../../composables/useTableHeight';
 
     const { showUserDialog } = useUserStore();
     const { feedTable } = storeToRefs(useFeedStore());
@@ -226,6 +218,8 @@
 
     const { t } = useI18n();
 
+    const { containerRef: feedRef } = useTableHeight(feedTable);
+
     /**
      * Function that format the differences between two strings with HTML tags
      * markerStartTag and markerEndTag are optional, if emitted, the differences will be highlighted with yellow and underlined.
@@ -341,3 +335,9 @@
             .replace(/<br> /g, '<br>');
     }
 </script>
+
+<style scoped>
+    .table-user {
+        color: var(--x-table-user-text-color) !important;
+    }
+</style>
diff --git a/src/views/FriendList/FriendList.vue b/src/views/FriendList/FriendList.vue
index 019b607e..03e396d1 100644
--- a/src/views/FriendList/FriendList.vue
+++ b/src/views/FriendList/FriendList.vue
@@ -1,92 +1,59 @@
 <template>
-    <div class="x-container">
-        <div style="padding: 0 10px 0 10px">
+    <div class="x-container" ref="friendsListRef">
+        <div>
             <div style="display: flex; align-items: center; justify-content: space-between">
-                <span class="header">{{ t('view.friend_list.header') }}</span>
-                <div style="font-size: 13px; display: flex; align-items: center">
-                    <el-button size="small" @click="openChartsTab" style="margin-right: 10px">
-                        {{ t('view.friend_list.load_mutual_friends') }}
-                    </el-button>
-                    <div v-if="friendsListBulkUnfriendMode" style="display: inline-block; margin-right: 10px">
-                        <el-button size="small" @click="showBulkUnfriendSelectionConfirm">
-                            {{ t('view.friend_list.bulk_unfriend_selection') }}
-                        </el-button>
-                        <!-- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All-->
-                    </div>
-                    <div style="display: flex; align-items: center; margin-right: 10px">
-                        <span class="name">{{ t('view.friend_list.bulk_unfriend') }}</span>
-                        <el-switch
-                            v-model="friendsListBulkUnfriendMode"
-                            style="margin-left: 5px"
-                            @change="toggleFriendsListBulkUnfriendMode"></el-switch>
-                    </div>
-                    <span>{{ t('view.friend_list.load') }}</span>
-                    <template v-if="friendsListLoading">
-                        <span style="margin-left: 5px" v-text="friendsListLoadingProgress"></span>
-                        <el-tooltip placement="top" :content="t('view.friend_list.cancel_tooltip')">
-                            <el-button
-                                size="small"
-                                :icon="Loading"
-                                circle
-                                style="margin-left: 5px"
-                                @click="friendsListLoading = false"></el-button>
-                        </el-tooltip>
-                    </template>
-                    <template v-else>
-                        <el-tooltip placement="top" :content="t('view.friend_list.load_tooltip')">
-                            <el-button
-                                size="small"
-                                :icon="RefreshLeft"
-                                circle
-                                style="margin-left: 5px"
-                                @click="friendsListLoadUsers"></el-button>
-                        </el-tooltip>
-                    </template>
-                </div>
-            </div>
-
-            <div style="margin: 10px 0 0 10px; display: flex; align-items: center">
                 <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
                     <el-tooltip placement="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
                         <el-switch
                             v-model="friendsListSearchFilterVIP"
-                            active-color="#13ce66"
+                            active-color="var(--el-color-success)"
                             @change="friendsListSearchChange"></el-switch>
                     </el-tooltip>
+                    <el-select
+                        v-model="friendsListSearchFilters"
+                        multiple
+                        clearable
+                        collapse-tags
+                        style="margin: 0 10px; width: 150px"
+                        :placeholder="t('view.friend_list.filter_placeholder')"
+                        @change="friendsListSearchChange">
+                        <el-option
+                            v-for="type in ['Display Name', 'User Name', 'Rank', 'Status', 'Bio', 'Note', 'Memo']"
+                            :key="type"
+                            :label="type"
+                            :value="type"></el-option>
+                    </el-select>
+                    <el-input
+                        v-model="friendsListSearch"
+                        :placeholder="t('view.friend_list.search_placeholder')"
+                        clearable
+                        style="width: 250px"
+                        @change="friendsListSearchChange"></el-input>
+                </div>
+                <div class="flex items-center">
+                    <div v-if="friendsListBulkUnfriendMode" class="inline-block mr-10">
+                        <el-button @click="showBulkUnfriendSelectionConfirm">
+                            {{ t('view.friend_list.bulk_unfriend_selection') }}
+                        </el-button>
+                        <!-- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All-->
+                    </div>
+                    <div class="flex items-center mr-3">
+                        <span class="name mr-2 text-xs">{{ t('view.friend_list.bulk_unfriend') }}</span>
+                        <el-switch
+                            v-model="friendsListBulkUnfriendMode"
+                            @change="toggleFriendsListBulkUnfriendMode"></el-switch>
+                    </div>
+                    <div class="flex items-center">
+                        <el-button @click="openChartsTab">
+                            {{ t('view.friend_list.load_mutual_friends') }}
+                        </el-button>
+
+                        <el-button @click="friendsListLoadUsers">{{ t('view.friend_list.load') }}</el-button>
+                    </div>
                 </div>
-                <el-input
-                    v-model="friendsListSearch"
-                    :placeholder="t('view.friend_list.search_placeholder')"
-                    clearable
-                    style="flex: 1"
-                    @change="friendsListSearchChange"></el-input>
-                <el-select
-                    v-model="friendsListSearchFilters"
-                    multiple
-                    clearable
-                    collapse-tags
-                    style="flex: 0.3; margin: 0 10px"
-                    :placeholder="t('view.friend_list.filter_placeholder')"
-                    @change="friendsListSearchChange">
-                    <el-option
-                        v-for="type in ['Display Name', 'User Name', 'Rank', 'Status', 'Bio', 'Note', 'Memo']"
-                        :key="type"
-                        :label="type"
-                        :value="type"></el-option>
-                </el-select>
-                <el-tooltip placement="top" :content="t('view.friend_list.refresh_tooltip')">
-                    <el-button
-                        type="default"
-                        :icon="Refresh"
-                        circle
-                        style="flex: none"
-                        @click="friendsListSearchChange"></el-button>
-                </el-tooltip>
             </div>
             <DataTable
-                v-loading="friendsListLoading"
                 v-bind="friendsListTable"
-                :table-props="{ height: 'calc(100vh - 170px)', size: 'small' }"
                 style="margin-top: 10px; cursor: pointer"
                 @row-click="selectFriendsListRow">
                 <el-table-column v-if="friendsListBulkUnfriendMode" width="55">
@@ -98,39 +65,38 @@
                         </el-button>
                     </template>
                 </el-table-column>
-                <el-table-column :label="t('table.friendList.no')" width="70" prop="$friendNumber" :sortable="true">
+                <el-table-column width="20"></el-table-column>
+                <el-table-column
+                    :label="t('table.friendList.no')"
+                    width="70"
+                    prop="$friendNumber"
+                    :sortable="true"
+                    fixed="left">
                     <template #default="{ row }">
                         <span>{{ row.$friendNumber ? row.$friendNumber : '' }}</span>
                     </template>
                 </el-table-column>
-                <el-table-column :label="t('table.friendList.avatar')" width="70" prop="photo">
+                <el-table-column :label="t('table.friendList.avatar')" width="90" prop="photo">
                     <template #default="{ row }">
-                        <el-popover placement="right" :width="500" trigger="hover">
-                            <template #reference>
-                                <img :src="userImage(row, true)" class="friends-list-avatar" loading="lazy" />
-                            </template>
-                            <img
-                                :src="userImageFull(row)"
-                                :class="['friends-list-avatar', 'x-popover-image']"
-                                style="cursor: pointer"
-                                @click="showFullscreenImageDialog(userImageFull(row))"
-                                loading="lazy" />
-                        </el-popover>
+                        <div class="flex items-center">
+                            <img :src="userImage(row, true)" class="friends-list-avatar" loading="lazy" />
+                        </div>
                     </template>
                 </el-table-column>
                 <el-table-column
                     :label="t('table.friendList.displayName')"
-                    min-width="140"
+                    min-width="200"
                     prop="displayName"
                     sortable
-                    :sort-method="(a, b) => sortAlphabetically(a, b, 'displayName')">
+                    :sort-method="(a, b) => sortAlphabetically(a, b, 'displayName')"
+                    fixed="left">
                     <template #default="{ row }">
                         <span :style="{ color: randomUserColours ? row.$userColour : undefined }" class="name">{{
                             row.displayName
                         }}</span>
                     </template>
                 </el-table-column>
-                <el-table-column :label="t('table.friendList.rank')" width="110" prop="$trustSortNum" :sortable="true">
+                <el-table-column :label="t('table.friendList.rank')" width="140" prop="$trustSortNum" :sortable="true">
                     <template #default="{ row }">
                         <span
                             v-if="randomUserColours"
@@ -142,7 +108,7 @@
                 </el-table-column>
                 <el-table-column
                     :label="t('table.friendList.status')"
-                    min-width="180"
+                    min-width="200"
                     prop="status"
                     sortable
                     :sort-method="(a, b) => sortStatus(a.status, b.status)">
@@ -157,7 +123,7 @@
                 </el-table-column>
                 <el-table-column
                     :label="t('table.friendList.language')"
-                    width="110"
+                    width="130"
                     prop="$languages"
                     sortable
                     :sort-method="(a, b) => sortLanguages(a, b)">
@@ -173,7 +139,7 @@
                         </el-tooltip>
                     </template>
                 </el-table-column>
-                <el-table-column :label="t('table.friendList.bioLink')" width="100" prop="bioLinks">
+                <el-table-column :label="t('table.friendList.bioLink')" width="130" prop="bioLinks">
                     <template #default="{ row }">
                         <el-tooltip v-for="(link, index) in row.bioLinks.filter(Boolean)" :key="index">
                             <template #content>
@@ -197,8 +163,14 @@
                     :label="t('table.friendList.joinCount')"
                     width="120"
                     prop="$joinCount"
-                    sortable></el-table-column>
-                <el-table-column :label="t('table.friendList.timeTogether')" width="140" prop="$timeSpent" sortable>
+                    sortable
+                    align="right"></el-table-column>
+                <el-table-column
+                    :label="t('table.friendList.timeTogether')"
+                    width="140"
+                    prop="$timeSpent"
+                    sortable
+                    align="right">
                     <template #default="{ row }">
                         <span v-if="row.$timeSpent">{{ timeToText(row.$timeSpent) }}</span>
                     </template>
@@ -210,17 +182,26 @@
                     sortable
                     :sort-method="(a, b) => sortAlphabetically(a, b, '$lastSeen')">
                     <template #default="{ row }">
-                        <span>{{ formatDateFilter(row.$lastSeen, 'long') }}</span>
+                        <span>{{
+                            formatDateFilter(row.$lastSeen, 'long') === '-'
+                                ? ''
+                                : formatDateFilter(row.$lastSeen, 'long')
+                        }}</span>
                     </template>
                 </el-table-column>
-                <el-table-column :label="t('table.friendList.mutualFriends')" width="120" prop="$mutualCount" sortable>
+                <el-table-column
+                    :label="t('table.friendList.mutualFriends')"
+                    width="120"
+                    prop="$mutualCount"
+                    sortable
+                    align="right">
                     <template #default="{ row }">
                         <span v-if="row.$mutualCount">{{ row.$mutualCount }}</span>
                         <span v-else></span> </template
                 ></el-table-column>
                 <el-table-column
                     :label="t('table.friendList.lastActivity')"
-                    width="170"
+                    width="200"
                     prop="last_activity"
                     sortable
                     :sort-method="(a, b) => sortAlphabetically(a, b, 'last_activity')">
@@ -230,7 +211,7 @@
                 </el-table-column>
                 <el-table-column
                     :label="t('table.friendList.lastLogin')"
-                    width="170"
+                    width="200"
                     prop="last_login"
                     sortable
                     :sort-method="(a, b) => sortAlphabetically(a, b, 'last_login')">
@@ -246,23 +227,42 @@
                     :sort-method="(a, b) => sortAlphabetically(a, b, 'date_joined')"></el-table-column>
                 <el-table-column :label="t('table.friendList.unfriend')" width="100" align="center">
                     <template #default="{ row }">
-                        <el-button
-                            text
-                            :icon="Close"
+                        <i
+                            class="ri-user-unfollow-line"
                             style="color: #f56c6c"
-                            size="small"
-                            @click.stop="confirmDeleteFriend(row.id)"></el-button>
+                            @click.stop="confirmDeleteFriend(row.id)"></i>
                     </template>
                 </el-table-column>
             </DataTable>
+            <el-dialog
+                v-model="friendsListLoadDialogVisible"
+                :title="t('view.friend_list.load_dialog_title')"
+                width="420px"
+                :close-on-click-modal="false"
+                :close-on-press-escape="false"
+                :show-close="false"
+                align-center>
+                <div style="margin-bottom: 10px" v-text="t('view.friend_list.load_dialog_message')"></div>
+                <el-progress
+                    :percentage="friendsListLoadingPercent"
+                    :text-inside="true"
+                    :stroke-width="16"></el-progress>
+                <div style="margin-top: 10px; text-align: right">
+                    <span>{{ friendsListLoadingCurrent }} / {{ friendsListLoadingTotal }}</span>
+                </div>
+                <template #footer>
+                    <el-button @click="cancelFriendsListLoad">
+                        {{ t('view.friend_list.load_cancel') }}
+                    </el-button>
+                </template>
+            </el-dialog>
         </div>
     </div>
 </template>
 
 <script setup>
-    import { Close, Loading, Refresh, RefreshLeft } from '@element-plus/icons-vue';
-    import { nextTick, reactive, ref, watch } from 'vue';
-    import { ElMessageBox } from 'element-plus';
+    import { computed, nextTick, reactive, ref, watch } from 'vue';
+    import { ElMessage, ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
     import { useRoute } from 'vue-router';
@@ -276,19 +276,13 @@
         sortStatus,
         statusClass,
         timeToText,
-        userImage,
-        userImageFull
+        userImage
     } from '../../shared/utils';
-    import {
-        useAppearanceSettingsStore,
-        useFriendStore,
-        useGalleryStore,
-        useSearchStore,
-        useUserStore
-    } from '../../stores';
+    import { useAppearanceSettingsStore, useFriendStore, useSearchStore, useUserStore } from '../../stores';
     import { friendRequest, userRequest } from '../../api';
     import removeConfusables, { removeWhitespace } from '../../service/confusables';
     import { router } from '../../plugin/router';
+    import { useTableHeight } from '../../composables/useTableHeight';
 
     const { t } = useI18n();
 
@@ -299,21 +293,34 @@
     const { randomUserColours } = storeToRefs(useAppearanceSettingsStore());
     const { showUserDialog } = useUserStore();
     const { stringComparer, friendsListSearch } = storeToRefs(useSearchStore());
-    const { showFullscreenImageDialog } = useGalleryStore();
 
     const friendsListSearchFilters = ref([]);
     const friendsListTable = reactive({
         data: [],
-        tableProps: { stripe: true, size: 'small', defaultSort: { prop: '$friendNumber', order: 'descending' } },
+        tableProps: {
+            stripe: true,
+            size: 'small',
+            defaultSort: { prop: '$friendNumber', order: 'descending' },
+            scrollbarAlwaysOn: true
+        },
         pageSize: 100,
         paginationProps: { layout: 'sizes,prev,pager,next,total', pageSizes: [50, 100, 250, 500] }
     });
     const friendsListBulkUnfriendMode = ref(false);
     const friendsListLoading = ref(false);
-    const friendsListLoadingProgress = ref('');
+    const friendsListLoadingCurrent = ref(0);
+    const friendsListLoadingTotal = ref(0);
+    const friendsListLoadDialogVisible = ref(false);
     const friendsListSearchFilterVIP = ref(false);
     const selectedFriends = ref(new Set());
 
+    const friendsListLoadingPercent = computed(() => {
+        if (!friendsListLoadingTotal.value) return 0;
+        return Math.min(100, Math.round((friendsListLoadingCurrent.value / friendsListLoadingTotal.value) * 100));
+    });
+
+    const { containerRef: friendsListRef } = useTableHeight(ref(friendsListTable));
+
     const route = useRoute();
 
     watch(
@@ -432,27 +439,43 @@
     }
 
     async function friendsListLoadUsers() {
-        friendsListLoading.value = true;
-        let i = 0;
         const toFetch = Array.from(friends.value.values())
             .filter((ctx) => ctx.ref && !ctx.ref.date_joined)
             .map((ctx) => ctx.id);
         const total = toFetch.length;
+        friendsListLoadingTotal.value = total;
+        friendsListLoadingCurrent.value = 0;
+        if (!total) {
+            ElMessage.success(t('view.friend_list.load_complete'));
+            return;
+        }
+        friendsListLoading.value = true;
+        friendsListLoadDialogVisible.value = true;
+        let cancelled = false;
         for (const userId of toFetch) {
             if (!friendsListLoading.value) {
-                friendsListLoadingProgress.value = '';
-                return;
+                cancelled = true;
+                break;
             }
-            i++;
-            friendsListLoadingProgress.value = `${i}/${total}`;
+            friendsListLoadingCurrent.value += 1;
             try {
                 await userRequest.getUser({ userId });
             } catch (err) {
                 console.error(err);
             }
         }
-        friendsListLoadingProgress.value = '';
         friendsListLoading.value = false;
+        friendsListLoadDialogVisible.value = false;
+        friendsListLoadingCurrent.value = 0;
+        friendsListLoadingTotal.value = 0;
+        if (!cancelled) {
+            ElMessage.success(t('view.friend_list.load_complete'));
+        }
+    }
+
+    function cancelFriendsListLoad() {
+        friendsListLoading.value = false;
+        friendsListLoadDialogVisible.value = false;
     }
 
     function selectFriendsListRow(val) {
@@ -476,3 +499,11 @@
         router.push({ name: 'charts' });
     }
 </script>
+
+<style scoped>
+    .friends-list-avatar {
+        object-fit: cover;
+        height: 22px;
+        width: 22px;
+    }
+</style>
diff --git a/src/views/FriendLog/FriendLog.vue b/src/views/FriendLog/FriendLog.vue
index a9f17343..191d837f 100644
--- a/src/views/FriendLog/FriendLog.vue
+++ b/src/views/FriendLog/FriendLog.vue
@@ -1,6 +1,5 @@
 <template>
-    <div class="x-container">
-        <!-- 工具栏 -->
+    <div class="x-container" ref="friendLogRef">
         <div style="margin: 0 0 10px; display: flex; align-items: center">
             <el-select
                 v-model="friendLogTable.filters[0].value"
@@ -40,27 +39,25 @@
                 </template>
             </el-table-column>
 
-            <el-table-column :label="t('table.friendLog.type')" prop="type" width="150">
+            <el-table-column :label="t('table.friendLog.type')" prop="type" width="200">
                 <template #default="scope">
-                    <span v-text="t('view.friend_log.filters.' + scope.row.type)"></span>
+                    <el-tag type="info" effect="plain" size="small"
+                        ><span v-text="t('view.friend_log.filters.' + scope.row.type)"></span
+                    ></el-tag>
                 </template>
             </el-table-column>
 
             <el-table-column :label="t('table.friendLog.user')" prop="displayName">
                 <template #default="scope">
-                    <span v-if="scope.row.type === 'DisplayName'">
-                        {{ scope.row.previousDisplayName }} <el-icon><Right /></el-icon>&nbsp;
-                    </span>
+                    <span v-if="scope.row.type === 'DisplayName'">{{ scope.row.previousDisplayName }} → </span>
                     <span
-                        class="x-link"
+                        class="x-link table-user"
                         style="padding-right: 10px"
                         @click="showUserDialog(scope.row.userId)"
-                        v-text="scope.row.displayName || scope.row.userId"></span>
+                        >{{ scope.row.displayName || scope.row.userId }}
+                    </span>
                     <template v-if="scope.row.type === 'TrustLevel'">
-                        <span>
-                            ({{ scope.row.previousTrustLevel }} <el-icon><Right /></el-icon>
-                            {{ scope.row.trustLevel }})</span
-                        >
+                        <span>({{ scope.row.previousTrustLevel }} → {{ scope.row.trustLevel }})</span>
                     </template>
                 </template>
             </el-table-column>
@@ -69,28 +66,27 @@
                 <template #default="scope">
                     <el-button
                         v-if="shiftHeld"
-                        style="color: #f56c6c"
+                        style="color: var(--el-color-danger)"
                         text
                         :icon="Close"
                         size="small"
                         class="button-pd-0"
                         @click="deleteFriendLog(scope.row)"></el-button>
-                    <el-button
+                    <i
                         v-else
-                        text
-                        :icon="Delete"
-                        size="small"
-                        class="button-pd-0"
-                        @click="deleteFriendLogPrompt(scope.row)"></el-button>
+                        class="ri-delete-bin-line"
+                        style="opacity: 0.85"
+                        @click="deleteFriendLogPrompt(scope.row)"></i>
                 </template>
             </el-table-column>
+            <el-table-column width="5"></el-table-column>
         </DataTable>
     </div>
 </template>
 
 <script setup>
-    import { Close, Delete, Right } from '@element-plus/icons-vue';
     import { computed, watch } from 'vue';
+    import { Close } from '@element-plus/icons-vue';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -100,6 +96,7 @@
     import { useAppearanceSettingsStore, useFriendStore, useUiStore, useUserStore } from '../../stores';
     import { formatDateFilter, removeFromArray } from '../../shared/utils';
     import { database } from '../../service/database';
+    import { useTableHeight } from '../../composables/useTableHeight';
 
     import configRepository from '../../service/config';
 
@@ -108,6 +105,8 @@
     const { friendLogTable } = storeToRefs(useFriendStore());
     const { shiftHeld } = storeToRefs(useUiStore());
 
+    const { containerRef: friendLogRef } = useTableHeight(friendLogTable);
+
     const friendLogDisplayData = computed(() => {
         const data = friendLogTable.value.data;
         return data.slice().sort((a, b) => {
@@ -160,4 +159,7 @@
     .button-pd-0 {
         padding: 0 !important;
     }
+    .table-user {
+        color: var(--x-table-user-text-color);
+    }
 </style>
diff --git a/src/views/FriendsLocations/FriendsLocations.vue b/src/views/FriendsLocations/FriendsLocations.vue
index 24974258..d6b35caf 100644
--- a/src/views/FriendsLocations/FriendsLocations.vue
+++ b/src/views/FriendsLocations/FriendsLocations.vue
@@ -32,7 +32,7 @@
                             <el-slider
                                 v-model="cardScale"
                                 class="friend-view__slider"
-                                :min="0.6"
+                                :min="0.5"
                                 :max="1.0"
                                 :step="0.01"
                                 :show-tooltip="false" />
@@ -45,8 +45,8 @@
                             <el-slider
                                 v-model="cardSpacing"
                                 class="friend-view__slider"
-                                :min="0.5"
-                                :max="1.5"
+                                :min="0.25"
+                                :max="1.0"
                                 :step="0.05"
                                 :show-tooltip="false" />
                         </div>
@@ -688,7 +688,7 @@
     });
 </script>
 
-<style scoped lang="scss">
+<style scoped>
     .friend-view {
         display: grid;
         grid-template-rows: auto 1fr;
@@ -699,12 +699,12 @@
         display: flex;
         gap: 20px;
         align-items: center;
-        padding: 6px 10px 0 2px;
+        padding: 6px 2px 0 2px;
     }
 
     .friend-view__toolbar--loading {
         justify-content: flex-end;
-        color: rgba(15, 23, 42, 0.55);
+        color: var(--el-text-color-secondary);
         font-size: 13px;
         font-weight: 500;
     }
@@ -720,7 +720,7 @@
         flex: 1;
         flex-wrap: wrap;
         justify-content: flex-end;
-        color: rgba(15, 23, 42, 0.65);
+        color: var(--el-text-color-regular);
     }
 
     .friend-view__settings-label {
@@ -746,7 +746,7 @@
     .friend-view__scale-value {
         font-size: 12px;
         font-weight: 600;
-        color: rgba(15, 23, 42, 0.55);
+        color: var(--el-text-color-secondary);
         min-width: 42px;
         text-align: right;
     }
@@ -762,14 +762,14 @@
     }
 
     .friend-view__scroll {
-        padding: 2px 10px 2px 2px;
+        padding: 2px;
     }
 
     .friend-view__initial-loading {
         display: grid;
         place-items: center;
         min-height: 240px;
-        color: rgba(15, 23, 42, 0.45);
+        color: var(--el-text-color-secondary);
     }
 
     .friend-view__grid {
@@ -780,7 +780,7 @@
         );
         gap: var(--friend-card-gap, 18px);
         justify-content: start;
-        padding-right: 2px;
+        padding: 2px;
     }
 
     .friend-view__instances {
@@ -802,7 +802,7 @@
         margin: 5px 10px;
         font-weight: 600;
         font-size: 13px;
-        color: rgba(15, 23, 42, 0.75);
+        color: var(--el-text-color-primary);
     }
 
     .friend-view__divider {
@@ -810,7 +810,7 @@
         align-items: center;
         gap: 12px;
         margin: 16px 4px;
-        color: rgba(15, 23, 42, 0.6);
+        color: var(--el-text-color-regular);
         font-size: 13px;
         font-weight: 600;
     }
@@ -820,7 +820,7 @@
         content: '';
         flex: 1;
         height: 1px;
-        background: rgba(148, 163, 184, 0.35);
+        background: var(--el-border-color);
     }
 
     .friend-view__divider-text {
@@ -829,14 +829,14 @@
 
     .friend-view__instance-count {
         font-size: 12px;
-        color: rgba(15, 23, 42, 0.45);
+        color: var(--el-text-color-secondary);
     }
 
     .friend-view__empty {
         display: grid;
         place-items: center;
         min-height: 240px;
-        color: rgba(0, 0, 0, 0.45);
+        color: var(--el-text-color-secondary);
         font-size: 15px;
         letter-spacing: 0.5px;
     }
@@ -847,7 +847,7 @@
         justify-content: center;
         gap: 8px;
         padding: 18px 0 12px;
-        color: rgba(0, 0, 0, 0.55);
+        color: var(--el-text-color-secondary);
         font-size: 14px;
     }
 
diff --git a/src/views/FriendsLocations/components/FriendsLocationsCard.vue b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
index 8505d4aa..2206eaa6 100644
--- a/src/views/FriendsLocations/components/FriendsLocationsCard.vue
+++ b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
@@ -12,11 +12,11 @@
                 </el-avatar>
             </div>
             <span class="friend-card__status-dot" :class="statusDotClass"></span>
-            <div class="friend-card__name" :title="friend.name">{{ friend.name }}</div>
+            <div class="friend-card__name ml-0.5" :title="friend.name">{{ friend.name }}</div>
         </div>
         <div class="friend-card__body">
             <div class="friend-card__signature" :title="friend.ref?.statusDescription">
-                <i v-if="friend.ref?.statusDescription" class="ri-pencil-line" style="opacity: 0.7"></i>
+                <i v-if="friend.ref?.statusDescription" class="ri-pencil-line mr-0.5" style="opacity: 0.7"></i>
                 {{ friend.ref?.statusDescription || '&nbsp;' }}
             </div>
             <div v-if="displayInstanceInfo" @click.stop class="friend-card__world" :title="friend.worldName">
@@ -87,17 +87,17 @@
     });
 </script>
 
-<style scoped lang="scss">
+<style scoped>
     .friend-card {
         --card-scale: 1;
         --card-spacing: 1;
         position: relative;
         display: grid;
         gap: calc(14px * var(--card-scale) * var(--card-spacing));
-        border-radius: calc(8px * var(--card-scale));
-        background: #fff;
+        border-radius: 8px;
+        background: var(--el-bg-color-overlay);
         border: 1px solid var(--el-border-color);
-        box-shadow: 0 calc(6px * var(--card-scale)) calc(16px * var(--card-scale)) rgba(15, 23, 42, 0.04);
+        box-shadow: var(--el-box-shadow-lighter);
         transition:
             box-shadow 0.2s ease,
             transform 0.2s ease;
@@ -105,7 +105,7 @@
         min-width: var(--friend-card-min-width, 220px);
 
         &:hover {
-            box-shadow: 0 calc(10px * var(--card-scale)) calc(24px * var(--card-scale)) rgba(15, 23, 42, 0.07);
+            box-shadow: var(--el-box-shadow-light);
             transform: translateY(calc(-2px * var(--card-scale)));
         }
     }
@@ -123,8 +123,8 @@
     }
 
     .friend-card__avatar {
-        border: 1px solid rgba(255, 255, 255, 0.85);
-        box-shadow: 0 calc(5px * var(--card-scale)) calc(10px * var(--card-scale)) rgba(15, 23, 42, 0.14);
+        border: 1px solid var(--el-border-color);
+        box-shadow: var(--el-box-shadow-lighter);
     }
 
     .friend-card__status-dot {
@@ -134,8 +134,8 @@
         inline-size: calc(12px * var(--card-scale));
         block-size: calc(12px * var(--card-scale));
         border-radius: 999px;
-        border: calc(2px * var(--card-scale)) solid #fff;
-        box-shadow: 0 0 calc(4px * var(--card-scale)) rgba(15, 23, 42, 0.12);
+        border: calc(2px * var(--card-scale)) solid var(--el-bg-color-overlay);
+        box-shadow: var(--el-box-shadow-lighter);
         pointer-events: none;
     }
 
@@ -144,23 +144,23 @@
     }
 
     .friend-card__status-dot--online {
-        background: linear-gradient(145deg, #67c23a, #4aa12d);
-        box-shadow: 0 0 calc(8px * var(--card-scale)) rgba(103, 194, 58, 0.4);
+        background: #67c23a;
+        box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #67c23a 40%, transparent);
     }
 
     .friend-card__status-dot--join {
-        background: linear-gradient(145deg, #409eff, #2f7ed9);
-        box-shadow: 0 0 calc(8px * var(--card-scale)) rgba(64, 158, 255, 0.4);
+        background: #409eff;
+        box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #409eff 40%, transparent);
     }
 
     .friend-card__status-dot--busy {
-        background: linear-gradient(145deg, #ff2c2c, #d81f1f);
-        box-shadow: 0 0 calc(8px * var(--card-scale)) rgba(255, 44, 44, 0.4);
+        background: #ff2c2c;
+        box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff2c2c 40%, transparent);
     }
 
     .friend-card__status-dot--ask {
-        background: linear-gradient(145deg, #ff9500, #d97800);
-        box-shadow: 0 0 calc(8px * var(--card-scale)) rgba(255, 149, 0, 0.4);
+        background: #ff9500;
+        box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff9500 40%, transparent);
     }
 
     .friend-card__body {
@@ -171,7 +171,7 @@
     .friend-card__name {
         font-size: calc(17px * var(--card-scale));
         font-weight: 600;
-        color: #1f2937;
+        color: var(--el-text-color-primary);
         line-height: 1.2;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -181,7 +181,7 @@
     .friend-card__signature {
         margin-top: calc(6px * var(--card-spacing));
         font-size: calc(13px * var(--card-scale));
-        color: rgba(31, 41, 55, 0.7);
+        color: var(--el-text-color-secondary);
         line-height: 1.4;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -194,12 +194,21 @@
         justify-content: center;
         min-height: calc(40px * var(--card-scale));
         padding: calc(6px * var(--card-scale)) calc(10px * var(--card-scale));
-        border-radius: calc(12px * var(--card-scale));
-        background: rgba(148, 163, 184, 0.18);
-        color: rgba(71, 85, 105, 0.95);
+        border-radius: calc(10px * var(--card-scale));
+        background: var(--el-fill-color);
+        color: var(--el-text-color-regular);
         font-size: calc(12px * var(--card-scale));
         line-height: 1.3;
         box-sizing: border-box;
+        max-width: 100%;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    :global(html.dark) .friend-card__world,
+    :global(:root.dark) .friend-card__world,
+    :global(:root[data-theme='dark']) .friend-card__world {
+        color: var(--color-zinc-300);
     }
 
     .friend-card__location {
diff --git a/src/views/GameLog/GameLog.vue b/src/views/GameLog/GameLog.vue
index 5a61f58f..3ce9439a 100644
--- a/src/views/GameLog/GameLog.vue
+++ b/src/views/GameLog/GameLog.vue
@@ -1,13 +1,13 @@
 <template>
-    <div class="x-container">
+    <div class="x-container" ref="gameLogRef">
         <div style="margin: 0 0 10px; display: flex; align-items: center">
             <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
-                <NativeTooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
+                <el-tooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
                     <el-switch
                         v-model="gameLogTable.vip"
-                        active-color="#13ce66"
+                        active-color="var(--el-color-success)"
                         @change="gameLogTableLookup"></el-switch>
-                </NativeTooltip>
+                </el-tooltip>
             </div>
             <el-select
                 v-model="gameLogTable.filter"
@@ -41,46 +41,47 @@
         </div>
 
         <DataTable v-bind="gameLogTable" :data="gameLogDisplayData">
-            <el-table-column :label="t('table.gameLog.date')" prop="created_at" width="130">
+            <el-table-column :label="t('table.gameLog.date')" prop="created_at" width="140">
                 <template #default="scope">
-                    <NativeTooltip placement="right">
+                    <el-tooltip placement="right">
                         <template #content>
                             <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
                         </template>
                         <span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
-                    </NativeTooltip>
+                    </el-tooltip>
                 </template>
             </el-table-column>
 
-            <el-table-column :label="t('table.gameLog.type')" prop="type" width="120">
+            <el-table-column :label="t('table.gameLog.type')" prop="type" width="150">
+                <template #default="scope">
+                    <el-tag
+                        v-if="scope.row.location && scope.row.type !== 'Location'"
+                        type="info"
+                        effect="plain"
+                        size="small">
+                        <span
+                            class="x-link"
+                            @click="showWorldDialog(scope.row.location)"
+                            v-text="t('view.game_log.filters.' + scope.row.type)"></span>
+                    </el-tag>
+                    <el-tag v-else type="info" effect="plain" size="small">
+                        <span v-text="t('view.game_log.filters.' + scope.row.type)"></span>
+                    </el-tag>
+                </template>
+            </el-table-column>
+
+            <el-table-column :label="t('table.gameLog.user')" prop="displayName" width="200">
                 <template #default="scope">
                     <span
-                        v-if="scope.row.location && scope.row.type !== 'Location'"
-                        class="x-link"
-                        @click="showWorldDialog(scope.row.location)"
-                        v-text="t('view.game_log.filters.' + scope.row.type)"></span>
-                    <span v-else v-text="t('view.game_log.filters.' + scope.row.type)"></span>
-                </template>
-            </el-table-column>
-
-            <el-table-column :label="t('table.gameLog.icon')" prop="isFriend" width="70" align="center">
-                <template #default="scope">
+                        v-if="scope.row.displayName"
+                        class="x-link table-user"
+                        style="padding-right: 10px"
+                        @click="lookupUser(scope.row)"
+                        v-text="scope.row.displayName"></span>
                     <template v-if="gameLogIsFriend(scope.row)">
                         <span v-if="gameLogIsFavorite(scope.row)">⭐</span>
                         <span v-else>💚</span>
                     </template>
-                    <span v-else></span>
-                </template>
-            </el-table-column>
-
-            <el-table-column :label="t('table.gameLog.user')" prop="displayName" width="180">
-                <template #default="scope">
-                    <span
-                        v-if="scope.row.displayName"
-                        class="x-link"
-                        style="padding-right: 10px"
-                        @click="lookupUser(scope.row)"
-                        v-text="scope.row.displayName"></span>
                 </template>
             </el-table-column>
 
@@ -158,31 +159,38 @@
                             size="small"
                             class="small-button"
                             @click="deleteGameLogEntry(scope.row)"></el-button>
-                        <el-button
+                        <i
+                            class="ri-delete-bin-line small-button"
+                            style="opacity: 0.85"
                             v-else
-                            text
-                            :icon="Delete"
-                            size="small"
-                            class="small-button"
-                            @click="deleteGameLogEntryPrompt(scope.row)"></el-button>
+                            @click="deleteGameLogEntryPrompt(scope.row)"></i>
                     </template>
-                    <NativeTooltip placement="top" :content="t('dialog.previous_instances.info')">
+                    <el-tooltip
+                        v-if="scope.row.type === 'Location'"
+                        placement="top"
+                        :content="t('dialog.previous_instances.info')">
                         <el-button
-                            v-if="scope.row.type === 'Location'"
+                            v-if="shiftHeld"
                             text
                             :icon="DataLine"
                             size="small"
                             class="small-button"
                             @click="showPreviousInstancesInfoDialog(scope.row.location)"></el-button>
-                    </NativeTooltip>
+                        <i
+                            v-else
+                            style="opacity: 0.85"
+                            class="ri-file-list-2-line small-button"
+                            @click="showPreviousInstancesInfoDialog(scope.row.location)"></i>
+                    </el-tooltip>
                 </template>
             </el-table-column>
+            <el-table-column width="5"></el-table-column>
         </DataTable>
     </div>
 </template>
 
 <script setup>
-    import { Close, DataLine, Delete } from '@element-plus/icons-vue';
+    import { Close, DataLine } from '@element-plus/icons-vue';
     import { ElMessageBox } from 'element-plus';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
@@ -194,6 +202,7 @@
     import { formatDateFilter, openExternalLink, removeFromArray } from '../../shared/utils';
     import { database } from '../../service/database';
     import { useSharedFeedStore } from '../../stores';
+    import { useTableHeight } from '../../composables/useTableHeight';
 
     const { showWorldDialog } = useWorldStore();
     const { lookupUser } = useUserStore();
@@ -252,6 +261,8 @@
     const { t } = useI18n();
     const emit = defineEmits(['updateGameLogSessionTable']);
 
+    const { containerRef: gameLogRef } = useTableHeight(gameLogTable);
+
     function deleteGameLogEntry(row) {
         removeFromArray(gameLogTable.value.data, row);
         database.deleteGameLogEntry(row);
@@ -281,5 +292,9 @@
     .small-button {
         padding: 0;
         height: 18px;
+        cursor: pointer;
+    }
+    .table-user {
+        color: var(--x-table-user-text-color) !important;
     }
 </style>
diff --git a/src/views/Layout/AuthenticatedLayout.vue b/src/views/Layout/AuthenticatedLayout.vue
index 1f8411fd..baf7154d 100644
--- a/src/views/Layout/AuthenticatedLayout.vue
+++ b/src/views/Layout/AuthenticatedLayout.vue
@@ -1,8 +1,7 @@
 <template>
     <template v-if="watchState.isLoggedIn">
         <NavMenu></NavMenu>
-
-        <el-splitter @resize-end="setAsideWidth">
+        <el-splitter @resize-end="handleResizeEnd">
             <el-splitter-panel>
                 <RouterView></RouterView>
             </el-splitter-panel>
@@ -86,6 +85,20 @@
     const { setAsideWidth } = appearanceStore;
     const { asideWidth, isSideBarTabShow } = storeToRefs(appearanceStore);
 
+    const handleResizeEnd = (index, sizes) => {
+        if (!Array.isArray(sizes) || sizes.length < 2) {
+            return;
+        }
+        const asideSplitterIndex = sizes.length - 2;
+        if (index !== asideSplitterIndex) {
+            return;
+        }
+        const asideSize = sizes[sizes.length - 1];
+        if (Number.isFinite(asideSize) && asideSize > 0) {
+            setAsideWidth(asideSize);
+        }
+    };
+
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
diff --git a/src/views/Moderation/Moderation.vue b/src/views/Moderation/Moderation.vue
index cf934ad2..32ddfca1 100644
--- a/src/views/Moderation/Moderation.vue
+++ b/src/views/Moderation/Moderation.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="x-container">
+    <div class="x-container" ref="moderationRef">
         <!-- 工具栏 -->
         <div class="tool-slot">
             <el-select
@@ -30,7 +30,8 @@
         </div>
 
         <DataTable v-bind="playerModerationTable">
-            <el-table-column :label="t('table.moderation.date')" prop="created" :sortable="true" width="130">
+            <el-table-column width="20"></el-table-column>
+            <el-table-column :label="t('table.moderation.date')" prop="created" :sortable="true" width="150">
                 <template #default="scope">
                     <el-tooltip placement="right">
                         <template #content>
@@ -40,12 +41,14 @@
                     </el-tooltip>
                 </template>
             </el-table-column>
-            <el-table-column :label="t('table.moderation.type')" prop="type" width="100">
+            <el-table-column :label="t('table.moderation.type')" prop="type" width="150">
                 <template #default="scope">
-                    <span v-text="t('view.moderation.filters.' + scope.row.type)"></span>
+                    <el-tag type="info" effect="plain" size="small">
+                        <span v-text="t('view.moderation.filters.' + scope.row.type)"></span
+                    ></el-tag>
                 </template>
             </el-table-column>
-            <el-table-column :label="t('table.moderation.source')" prop="sourceDisplayName">
+            <el-table-column :label="t('table.moderation.source')" prop="sourceDisplayName" width="200">
                 <template #default="scope">
                     <span
                         class="x-link"
@@ -66,7 +69,7 @@
                     <template v-if="scope.row.sourceUserId === currentUser.id">
                         <el-button
                             v-if="shiftHeld"
-                            style="color: #f56c6c"
+                            style="color: var(--el-color-danger)"
                             text
                             :icon="Close"
                             size="small"
@@ -94,6 +97,7 @@
     import { formatDateFilter } from '../../shared/utils';
     import { moderationTypes } from '../../shared/constants';
     import { playerModerationRequest } from '../../api';
+    import { useTableHeight } from '../../composables/useTableHeight';
 
     import configRepository from '../../service/config.js';
 
@@ -104,6 +108,8 @@
     const { shiftHeld } = storeToRefs(useUiStore());
     const { currentUser } = storeToRefs(useUserStore());
 
+    const { containerRef: moderationRef } = useTableHeight(playerModerationTable);
+
     async function init() {
         playerModerationTable.value.filters[0].value = JSON.parse(
             await configRepository.getString('VRCX_playerModerationTableFilters', '[]')
diff --git a/src/views/Notifications/Notification.vue b/src/views/Notifications/Notification.vue
index a4a71684..86887bf1 100644
--- a/src/views/Notifications/Notification.vue
+++ b/src/views/Notifications/Notification.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-loading="isNotificationsLoading" class="x-container">
+    <div v-loading="isNotificationsLoading" class="x-container" ref="notificationsRef">
         <div style="margin: 0 0 10px; display: flex; align-items: center">
             <el-select
                 v-model="notificationTable.filters[0].value"
@@ -54,7 +54,7 @@
             :data="notificationDisplayData"
             ref="notificationTableRef"
             class="notification-table">
-            <el-table-column :label="t('table.notification.date')" prop="created_at" width="130">
+            <el-table-column :label="t('table.notification.date')" prop="created_at" width="110">
                 <template #default="scope">
                     <el-tooltip placement="right">
                         <template #content>
@@ -67,89 +67,121 @@
 
             <el-table-column :label="t('table.notification.type')" prop="type" width="180">
                 <template #default="scope">
-                    <span
-                        v-if="scope.row.type === 'invite'"
-                        class="x-link"
-                        @click="showWorldDialog(scope.row.details.worldId)"
-                        v-text="t('view.notification.filters.' + scope.row.type)"></span>
-                    <el-tooltip
-                        v-else-if="scope.row.type === 'group.queueReady' || scope.row.type === 'instance.closed'"
-                        placement="top">
-                        <template #content>
-                            <Location
-                                v-if="scope.row.location"
-                                :location="scope.row.location"
-                                :hint="scope.row.worldName"
-                                :grouphint="scope.row.groupName"
-                                :link="false" />
-                        </template>
+                    <el-tag type="info" effect="plain" size="small">
                         <span
-                            class="x-link"
-                            @click="showWorldDialog(scope.row.location)"
+                            v-if="scope.row.type === 'invite'"
                             v-text="t('view.notification.filters.' + scope.row.type)"></span>
-                    </el-tooltip>
-                    <el-tooltip v-else-if="scope.row.link" placement="top" :content="scope.row.linkText">
-                        <span
-                            class="x-link"
-                            @click="openNotificationLink(scope.row.link)"
-                            v-text="t('view.notification.filters.' + scope.row.type)"></span>
-                    </el-tooltip>
-                    <span v-else v-text="t('view.notification.filters.' + scope.row.type)"></span>
+                        <el-tooltip
+                            v-else-if="scope.row.type === 'group.queueReady' || scope.row.type === 'instance.closed'"
+                            placement="top">
+                            <template #content>
+                                <Location
+                                    v-if="scope.row.location"
+                                    :location="scope.row.location"
+                                    :hint="scope.row.worldName"
+                                    :grouphint="scope.row.groupName"
+                                    :link="false" />
+                            </template>
+                            <span
+                                class="x-link"
+                                @click="showWorldDialog(scope.row.location)"
+                                v-text="t('view.notification.filters.' + scope.row.type)"></span>
+                        </el-tooltip>
+                        <el-tooltip v-else-if="scope.row.link" placement="top" :content="scope.row.linkText">
+                            <span
+                                class="x-link"
+                                @click="openNotificationLink(scope.row.link)"
+                                v-text="t('view.notification.filters.' + scope.row.type)"></span>
+                        </el-tooltip>
+                        <span v-else v-text="t('view.notification.filters.' + scope.row.type)"></span>
+                    </el-tag>
                 </template>
             </el-table-column>
 
-            <el-table-column :label="t('table.notification.user_group')" prop="senderUsername" width="150">
+            <el-table-column :label="t('table.notification.user')" prop="senderUsername" width="150">
                 <template #default="scope">
-                    <template v-if="scope.row.type === 'groupChange'">
-                        <span
-                            class="x-link"
-                            @click="showGroupDialog(scope.row.senderUserId)"
-                            v-text="scope.row.senderUsername"></span>
-                    </template>
-                    <template v-else-if="scope.row.senderUserId">
-                        <span
-                            class="x-link"
-                            @click="showUserDialog(scope.row.senderUserId)"
-                            v-text="scope.row.senderUsername"></span>
-                    </template>
-                    <template v-else-if="scope.row.link && scope.row.data?.groupName">
-                        <span
-                            class="x-link"
-                            @click="openNotificationLink(scope.row.link)"
-                            v-text="scope.row.data?.groupName"></span>
-                    </template>
-                    <template v-else-if="scope.row.link">
-                        <span
-                            class="x-link"
-                            @click="openNotificationLink(scope.row.link)"
-                            v-text="scope.row.linkText"></span>
-                    </template>
+                    <div class="table-user-text">
+                        <template v-if="scope.row.senderUserId && !isGroupId(scope.row.senderUserId)">
+                            <span
+                                class="x-link"
+                                @click="showUserDialog(scope.row.senderUserId)"
+                                v-text="scope.row.senderUsername"></span>
+                        </template>
+                        <template v-else-if="scope.row.link?.startsWith('user:')">
+                            <span
+                                class="x-link"
+                                @click="openNotificationLink(scope.row.link)"
+                                v-text="scope.row.linkText || scope.row.senderUsername"></span>
+                        </template>
+                        <template v-else-if="scope.row.senderUsername && !isGroupId(scope.row.senderUserId)">
+                            <span v-text="scope.row.senderUsername"></span>
+                        </template>
+                    </div>
                 </template>
             </el-table-column>
 
-            <el-table-column :label="t('table.notification.photo')" width="100" prop="photo">
+            <el-table-column :label="t('table.notification.group')" prop="groupName" width="150">
+                <template #default="scope">
+                    <div class="table-user-text">
+                        <template
+                            v-if="
+                                scope.row.senderUserId &&
+                                (scope.row.type === 'groupChange' || isGroupId(scope.row.senderUserId))
+                            ">
+                            <span
+                                class="x-link"
+                                @click="showGroupDialog(scope.row.senderUserId)"
+                                v-text="scope.row.senderUsername || scope.row.groupName"></span>
+                        </template>
+                        <template v-else-if="scope.row.type === 'groupChange' && scope.row.senderUsername">
+                            <span v-text="scope.row.senderUsername"></span>
+                        </template>
+                        <template v-else-if="scope.row.link?.startsWith('group:')">
+                            <span
+                                class="x-link"
+                                @click="openNotificationLink(scope.row.link)"
+                                v-text="scope.row.data?.groupName || scope.row.linkText"></span>
+                        </template>
+                        <template v-else-if="scope.row.link?.startsWith('event:')">
+                            <span
+                                class="x-link"
+                                @click="openNotificationLink(scope.row.link)"
+                                v-text="scope.row.data?.groupName || scope.row.groupName || scope.row.linkText"></span>
+                        </template>
+                        <template v-else-if="scope.row.data?.groupName">
+                            <span v-text="scope.row.data.groupName"></span>
+                        </template>
+                        <template v-else-if="scope.row.details?.groupName">
+                            <span v-text="scope.row.details.groupName"></span>
+                        </template>
+                        <template v-else-if="scope.row.groupName">
+                            <span v-text="scope.row.groupName"></span>
+                        </template>
+                    </div>
+                </template>
+            </el-table-column>
+
+            <el-table-column :label="t('table.notification.photo')" width="80" prop="photo">
                 <template #default="scope">
                     <template v-if="scope.row.type === 'boop'">
                         <Emoji
-                            class="x-link"
+                            class="x-link notification-image"
                             @click="showFullscreenImageDialog(scope.row.details.imageUrl)"
                             v-if="scope.row.details?.imageUrl && !scope.row.details.imageUrl.startsWith('default_')"
                             :imageUrl="scope.row.details.imageUrl"
-                            :size="50"></Emoji>
+                            :size="30"></Emoji>
                     </template>
                     <template v-else-if="scope.row.details && scope.row.details.imageUrl">
                         <img
-                            class="x-link"
+                            class="x-link notification-image"
                             :src="getSmallThumbnailUrl(scope.row.details.imageUrl)"
-                            style="flex: none; height: 50px; border-radius: 4px"
                             @click="showFullscreenImageDialog(scope.row.details.imageUrl)"
                             loading="lazy" />
                     </template>
                     <template v-else-if="scope.row.imageUrl">
                         <img
-                            class="x-link"
+                            class="x-link notification-image"
                             :src="getSmallThumbnailUrl(scope.row.imageUrl)"
-                            style="flex: none; height: 50px; border-radius: 4px"
                             @click="showFullscreenImageDialog(scope.row.imageUrl)"
                             loading="lazy" />
                     </template>
@@ -193,7 +225,7 @@
                                 <el-button
                                     text
                                     :icon="Check"
-                                    style="color: #67c23a"
+                                    style="color: var(--el-color-success)"
                                     size="small"
                                     class="button-pd-0"
                                     @click="acceptFriendRequestNotification(scope.row)" />
@@ -216,7 +248,7 @@
                                     <el-button
                                         text
                                         :icon="Check"
-                                        style="color: #67c23a"
+                                        style="color: var(--el-color-success)"
                                         size="small"
                                         class="button-pd-0"
                                         @click="acceptRequestInvite(scope.row)" />
@@ -321,7 +353,7 @@
                             <el-tooltip placement="top" content="Decline">
                                 <el-button
                                     v-if="shiftHeld"
-                                    style="color: #f56c6c"
+                                    style="color: var(--el-color-danger)"
                                     text
                                     :icon="Close"
                                     size="small"
@@ -341,7 +373,7 @@
                         <el-tooltip placement="top" content="Delete log">
                             <el-button
                                 v-if="shiftHeld"
-                                style="color: #f56c6c"
+                                style="color: var(--el-color-danger)"
                                 text
                                 :icon="Delete"
                                 size="small"
@@ -367,7 +399,7 @@
                         <el-tooltip placement="top" content="Delete log">
                             <el-button
                                 v-if="shiftHeld"
-                                style="color: #f56c6c; margin-left: 5px"
+                                style="color: var(--el-color-danger); margin-left: 5px"
                                 text
                                 :icon="Close"
                                 size="small"
@@ -384,6 +416,7 @@
                     </template>
                 </template>
             </el-table-column>
+            <el-table-column width="5"></el-table-column>
         </DataTable>
         <SendInviteResponseDialog
             v-model:send-invite-response-dialog="sendInviteResponseDialog"
@@ -435,6 +468,7 @@
     } from '../../shared/utils';
     import { friendRequest, notificationRequest, worldRequest } from '../../api';
     import { database } from '../../service/database';
+    import { useTableHeight } from '../../composables/useTableHeight';
 
     import Emoji from '../../components/Emoji.vue';
     import SendInviteRequestResponseDialog from './dialogs/SendInviteRequestResponseDialog.vue';
@@ -456,6 +490,8 @@
 
     const { t } = useI18n();
 
+    const { containerRef: notificationsRef } = useTableHeight(notificationTable);
+
     function getNotificationCreatedAt(row) {
         if (typeof row?.created_at === 'string' && row.created_at.length > 0) {
             return row.created_at;
@@ -501,6 +537,8 @@
 
     const sendInviteRequestResponseDialogVisible = ref(false);
 
+    const isGroupId = (id) => typeof id === 'string' && id.startsWith('grp_');
+
     function saveTableFilters() {
         configRepository.setString(
             'VRCX_notificationTableFilters',
@@ -710,11 +748,21 @@
     }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
     .button-pd-0 {
         padding: 0;
     }
     .ml-5 {
-        margin-left: 5px !important; // due to ".el-button + .el-button"
+        margin-left: 5px !important; /* due to ".el-button + .el-button" */
+    }
+    .notification-image {
+        flex: none;
+        height: 30px;
+        width: 30px;
+        border-radius: 4px;
+        object-fit: cover;
+    }
+    .table-user-text {
+        color: var(--x-table-user-text-color);
     }
 </style>
diff --git a/src/views/PlayerList/PlayerList.vue b/src/views/PlayerList/PlayerList.vue
index 4247898f..370d91be 100644
--- a/src/views/PlayerList/PlayerList.vue
+++ b/src/views/PlayerList/PlayerList.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="x-container" style="padding-top: 5px">
+    <div class="x-container" ref="playerListRef">
         <div style="display: flex; flex-direction: column; height: 100%">
-            <div v-if="currentInstanceWorld.ref.id" style="display: flex">
+            <div v-if="currentInstanceWorld.ref.id" style="display: flex; height: 120px">
                 <img
                     :src="currentInstanceWorld.ref.thumbnailImageUrl"
                     class="x-link"
@@ -139,27 +139,8 @@
                     <div style="margin-top: 5px">
                         <span
                             v-show="currentInstanceWorld.ref.name !== currentInstanceWorld.ref.description"
-                            :style="{
-                                fontSize: '12px',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                display: '-webkit-box',
-                                WebkitBoxOrient: 'vertical',
-                                WebkitLineClamp: currentInstanceWorldDescriptionExpanded ? 'none' : '2'
-                            }"
+                            class="description"
                             v-text="currentInstanceWorld.ref.description"></span>
-                        <div style="display: flex; justify-content: end">
-                            <el-button
-                                v-if="
-                                    currentInstanceWorld.ref.description.length > 50 &&
-                                    !currentInstanceWorldDescriptionExpanded
-                                "
-                                text
-                                size="small"
-                                @click="currentInstanceWorldDescriptionExpanded = true"
-                                >{{ !currentInstanceWorldDescriptionExpanded && 'Show more' }}</el-button
-                            >
-                        </div>
                     </div>
                 </div>
                 <div style="display: flex; flex-direction: column; margin-left: 20px">
@@ -200,31 +181,61 @@
                     layout="table"
                     style="margin-top: 10px; cursor: pointer"
                     @row-click="selectCurrentInstanceRow">
-                    <el-table-column :label="t('table.playerList.avatar')" width="70" prop="photo">
+                    <el-table-column :label="t('table.playerList.avatar')" width="70" prop="photo" fixed>
                         <template #default="scope">
-                            <template v-if="userImage(scope.row.ref)">
-                                <el-popover placement="right" :width="500" trigger="hover">
-                                    <template #reference>
-                                        <img
-                                            :src="userImage(scope.row.ref)"
-                                            class="friends-list-avatar"
-                                            loading="lazy" />
-                                    </template>
-                                    <img
-                                        :src="userImageFull(scope.row.ref)"
-                                        :class="['friends-list-avatar', 'x-popover-image']"
-                                        style="cursor: pointer"
-                                        @click="showFullscreenImageDialog(userImageFull(scope.row.ref))"
-                                        loading="lazy" />
-                                </el-popover>
-                            </template>
+                            <div v-if="userImage(scope.row.ref)" class="flex items-center pl-2">
+                                <img :src="userImage(scope.row.ref)" class="friends-list-avatar" loading="lazy" />
+                            </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="t('table.playerList.timer')" width="90" prop="timer" sortable>
+                    <el-table-column :label="t('table.playerList.timer')" width="90" prop="timer" sortable fixed>
                         <template #default="scope">
                             <Timer :epoch="scope.row.timer" />
                         </template>
                     </el-table-column>
+                    <el-table-column
+                        class="table-user"
+                        :label="t('table.playerList.displayName')"
+                        width="200"
+                        prop="displayName"
+                        sortable
+                        :sort-method="(a, b) => sortAlphabetically(a, b, 'displayName')"
+                        fixed>
+                        <template #default="scope">
+                            <span
+                                v-if="randomUserColours"
+                                :style="{ color: scope.row.ref.$userColour }"
+                                v-text="scope.row.ref.displayName"></span>
+                            <span v-else v-text="scope.row.ref.displayName"></span>
+                        </template>
+                    </el-table-column>
+
+                    <el-table-column
+                        :label="t('table.playerList.rank')"
+                        width="110"
+                        prop="$trustSortNum"
+                        :sortable="true">
+                        <template #default="scope">
+                            <span
+                                class="name"
+                                :class="scope.row.ref.$trustClass"
+                                v-text="scope.row.ref.$trustLevel"></span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="t('table.playerList.status')" min-width="200" prop="ref.status">
+                        <template #default="scope">
+                            <template v-if="scope.row.ref.status">
+                                <i
+                                    class="x-user-status"
+                                    :class="statusClass(scope.row.ref.status)"
+                                    style="margin-right: 3px"></i>
+                                <span v-text="scope.row.ref.statusDescription"></span>
+                                <!--//- el-table-column(label="Group" min-width="180" prop="groupOnNameplate" sortable)-->
+                                <!--//-     template(v-once #default="scope")-->
+                                <!--//-         span(v-text="scope.row.groupOnNameplate")-->
+                            </template>
+                        </template>
+                    </el-table-column>
                     <el-table-column
                         v-if="photonLoggingEnabled"
                         :label="t('table.playerList.photonId')"
@@ -277,20 +288,20 @@
                                 <el-icon style="color: red"><CircleClose /></el-icon>
                             </el-tooltip>
                             <el-tooltip v-if="scope.row.isMuted" placement="left" content="Muted">
-                                <el-icon style="color: orange"><Mute /></el-icon>
+                                <el-icon style="color: var(--el-color-warning)"><Mute /></el-icon>
                             </el-tooltip>
                             <el-tooltip
                                 v-if="scope.row.isAvatarInteractionDisabled"
                                 placement="left"
                                 content="Avatar Interaction Disabled
                                     ">
-                                <el-icon style="color: orange"><Pointer /></el-icon>
+                                <el-icon style="color: var(--el-color-warning)"><Pointer /></el-icon>
                             </el-tooltip>
                             <el-tooltip v-if="scope.row.isChatBoxMuted" placement="left" content="Chatbox Muted">
-                                <el-icon style="color: orange"><ChatLineRound /></el-icon>
+                                <el-icon style="color: var(--el-color-warning)"><ChatLineRound /></el-icon>
                             </el-tooltip>
                             <el-tooltip v-if="scope.row.timeoutTime" placement="left" content="Timeout">
-                                <span style="color: red">🔴{{ scope.row.timeoutTime }}s</span>
+                                <span style="color: var(--el-color-danger)">🔴{{ scope.row.timeoutTime }}s</span>
                             </el-tooltip>
                             <el-tooltip v-if="scope.row.ageVerified" placement="left" content="18+ Verified">
                                 <i class="ri-id-card-line"></i>
@@ -300,13 +311,17 @@
                     <el-table-column :label="t('table.playerList.platform')" prop="inVRMode" width="90">
                         <template #default="scope">
                             <template v-if="scope.row.ref.$platform">
-                                <span v-if="scope.row.ref.$platform === 'standalonewindows'" style="color: #409eff"
+                                <span
+                                    v-if="scope.row.ref.$platform === 'standalonewindows'"
+                                    style="color: var(--el-color-primary)"
                                     ><i class="ri-computer-line"></i
                                 ></span>
-                                <span v-else-if="scope.row.ref.$platform === 'android'" style="color: #67c23a"
+                                <span
+                                    v-else-if="scope.row.ref.$platform === 'android'"
+                                    style="color: var(--el-color-success)"
                                     ><i class="ri-android-line"></i
                                 ></span>
-                                <span v-else-if="scope.row.ref.$platform === 'ios'" style="color: #c7c7ce"
+                                <span v-else-if="scope.row.ref.$platform === 'ios'" style="color: var(--el-color-info)"
                                     ><i class="ri-apple-line"></i
                                 ></span>
                                 <span v-else>{{ scope.row.ref.$platform }}</span>
@@ -324,46 +339,6 @@
                             </template>
                         </template>
                     </el-table-column>
-                    <el-table-column
-                        :label="t('table.playerList.displayName')"
-                        min-width="140"
-                        prop="displayName"
-                        sortable
-                        :sort-method="(a, b) => sortAlphabetically(a, b, 'displayName')">
-                        <template #default="scope">
-                            <span
-                                v-if="randomUserColours"
-                                :style="{ color: scope.row.ref.$userColour }"
-                                v-text="scope.row.ref.displayName"></span>
-                            <span v-else v-text="scope.row.ref.displayName"></span>
-                        </template>
-                    </el-table-column>
-                    <el-table-column :label="t('table.playerList.status')" min-width="180" prop="ref.status">
-                        <template #default="scope">
-                            <template v-if="scope.row.ref.status">
-                                <i
-                                    class="x-user-status"
-                                    :class="statusClass(scope.row.ref.status)"
-                                    style="margin-right: 3px"></i>
-                                <span v-text="scope.row.ref.statusDescription"></span>
-                                <!--//- el-table-column(label="Group" min-width="180" prop="groupOnNameplate" sortable)-->
-                                <!--//-     template(v-once #default="scope")-->
-                                <!--//-         span(v-text="scope.row.groupOnNameplate")-->
-                            </template>
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                        :label="t('table.playerList.rank')"
-                        width="110"
-                        prop="$trustSortNum"
-                        :sortable="true">
-                        <template #default="scope">
-                            <span
-                                class="name"
-                                :class="scope.row.ref.$trustClass"
-                                v-text="scope.row.ref.$trustLevel"></span>
-                        </template>
-                    </el-table-column>
                     <el-table-column :label="t('table.playerList.language')" width="100" prop="ref.$languages">
                         <template #default="scope">
                             <el-tooltip v-for="item in scope.row.ref.$languages" :key="item.key" placement="top">
@@ -401,7 +376,7 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="t('table.playerList.note')" width="150" prop="ref.note">
+                    <el-table-column :label="t('table.playerList.note')" width="400" prop="ref.note">
                         <template #default="scope">
                             <span v-text="scope.row.ref.note"></span>
                         </template>
@@ -417,7 +392,7 @@
 
 <script setup>
     import { ChatLineRound, CircleClose, HomeFilled, Microphone, Mute, Pointer } from '@element-plus/icons-vue';
-    import { defineAsyncComponent, ref } from 'vue';
+    import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -428,8 +403,7 @@
         languageClass,
         openExternalLink,
         statusClass,
-        userImage,
-        userImageFull
+        userImage
     } from '../../shared/utils';
     import {
         useAppearanceSettingsStore,
@@ -437,7 +411,6 @@
         useInstanceStore,
         useLocationStore,
         usePhotonStore,
-        useUiStore,
         useUserStore,
         useWorldStore
     } from '../../stores';
@@ -459,6 +432,63 @@
     const { showFullscreenImageDialog } = useGalleryStore();
     const { currentUser } = storeToRefs(useUserStore());
 
+    const playerListRef = ref(null);
+    const tableHeight = ref(0);
+
+    onMounted(() => {
+        if (playerListRef.value) {
+            resizeObserver.observe(playerListRef.value);
+        }
+    });
+
+    const resizeObserver = new ResizeObserver(() => {
+        setPlayerListTableHeight();
+    });
+
+    function setPlayerListTableHeight() {
+        if (currentInstanceWorld.value.ref.id) {
+            tableHeight.value = playerListRef.value.clientHeight - 110;
+            return;
+        }
+        if (currentInstanceUsersTable.value.data.length === 0) {
+            tableHeight.value = playerListRef.value.clientHeight;
+            return;
+        }
+        if (playerListRef.value) {
+            tableHeight.value = playerListRef.value.clientHeight - 110;
+        }
+    }
+
+    watch(
+        () => currentInstanceWorld.value.ref.id,
+        () => {
+            setPlayerListTableHeight();
+        }
+    );
+
+    onUnmounted(() => {
+        resizeObserver.disconnect();
+    });
+
+    const compactCellStyle = () => ({
+        padding: '4px 10px'
+    });
+
+    const compactInstanceUsersTable = computed(() => {
+        const baseTableConfig = currentInstanceUsersTable.value;
+        const tableProps = baseTableConfig.tableProps || {};
+
+        return {
+            ...baseTableConfig,
+            tableProps: {
+                ...tableProps,
+                cellStyle: compactCellStyle,
+                headerCellStyle: compactCellStyle,
+                height: tableHeight.value
+            }
+        };
+    });
+
     const { t } = useI18n();
 
     const chatboxBlacklistDialog = ref({
@@ -466,8 +496,6 @@
         loading: false
     });
 
-    const currentInstanceWorldDescriptionExpanded = ref(false);
-
     function showChatboxBlacklistDialog() {
         const D = chatboxBlacklistDialog.value;
         D.visible = true;
@@ -517,3 +545,26 @@
         return a[field].toLowerCase().localeCompare(b[field].toLowerCase());
     }
 </script>
+
+<style>
+    .description {
+        font-size: 12px;
+        display: inline-block;
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+    }
+    #x-app .current-instance-table .el-table .el-table__cell {
+        padding: 3px 10px !important;
+    }
+    .table-user {
+        color: var(--x-table-user-text-color);
+    }
+    .friends-list-avatar {
+        width: 16px !important;
+        height: 16px !important;
+        object-fit: cover;
+    }
+</style>
diff --git a/src/views/PlayerList/components/PhotonEventTable.vue b/src/views/PlayerList/components/PhotonEventTable.vue
index 2ac85339..2e9c930b 100644
--- a/src/views/PlayerList/components/PhotonEventTable.vue
+++ b/src/views/PlayerList/components/PhotonEventTable.vue
@@ -25,12 +25,7 @@
                 t('view.player_list.photon.chatbox_blacklist')
             }}</el-button>
             <el-tooltip placement="bottom" :content="t('view.player_list.photon.status_tooltip')">
-                <div
-                    style="
-                        display: inline-flex;
-                        align-items: center;
-                        font-size: 14px;
-                    ">
+                <div style="display: inline-flex; align-items: center; font-size: 14px">
                     <span v-if="ipcEnabled && !photonEventIcon">🟢</span>
                     <span v-else-if="ipcEnabled">⚪</span>
                     <span v-else>🔴</span>
@@ -170,11 +165,13 @@
                             </span>
                             <span v-else-if="scope.row.type === 'ChatBoxMessage'" v-text="scope.row.text"></span>
                             <span v-else-if="scope.row.type === 'OnPlayerJoined'">
-                                <span v-if="scope.row.platform === 'Desktop'" style="color: #409eff"
+                                <span v-if="scope.row.platform === 'Desktop'" style="color: var(--el-color-primary)"
                                     >Desktop&nbsp;</span
                                 >
-                                <span v-else-if="scope.row.platform === 'VR'" style="color: #409eff">VR&nbsp;</span>
-                                <span v-else-if="scope.row.platform === 'Quest'" style="color: #67c23a"
+                                <span v-else-if="scope.row.platform === 'VR'" style="color: var(--el-color-primary)"
+                                    >VR&nbsp;</span
+                                >
+                                <span v-else-if="scope.row.platform === 'Quest'" style="color: var(--el-color-success)"
                                     >Android&nbsp;</span
                                 >
                                 <span
diff --git a/src/views/Search/Search.vue b/src/views/Search/Search.vue
index 6dd968be..c39581fe 100644
--- a/src/views/Search/Search.vue
+++ b/src/views/Search/Search.vue
@@ -16,7 +16,7 @@
                     @click="handleClearSearch"></el-button>
             </el-tooltip>
         </div>
-        <el-tabs ref="searchTabRef" type="card" style="margin-top: 15px" @tab-click="searchText = ''">
+        <el-tabs ref="searchTabRef" style="margin-top: 15px" @tab-click="searchText = ''">
             <el-tab-pane v-loading="isSearchUserLoading" :label="t('view.search.user.header')" style="min-height: 60px">
                 <el-checkbox v-model="searchUserByBio" style="margin-left: 10px">{{
                     t('view.search.user.search_by_bio')
@@ -221,12 +221,12 @@
                             <span
                                 v-if="avatar.releaseStatus === 'public'"
                                 class="extra"
-                                style="color: #67c23a"
+                                style="color: var(--el-color-success)"
                                 v-text="avatar.releaseStatus"></span>
                             <span
                                 v-else-if="avatar.releaseStatus === 'private'"
                                 class="extra"
-                                style="color: #f56c6c"
+                                style="color: var(--el-color-danger)"
                                 v-text="avatar.releaseStatus"></span>
                             <span v-else class="extra" v-text="avatar.releaseStatus"></span>
                             <span class="extra" v-text="avatar.authorName"></span>
diff --git a/src/views/Settings/Settings.vue b/src/views/Settings/Settings.vue
index d7a35eeb..46800f0e 100644
--- a/src/views/Settings/Settings.vue
+++ b/src/views/Settings/Settings.vue
@@ -3,7 +3,7 @@
         <div class="options-container" style="margin-top: 0; padding: 5px">
             <span class="header">{{ t('view.settings.header') }}</span>
         </div>
-        <el-tabs type="card" style="height: calc(100% - 51px)">
+        <el-tabs style="height: calc(100% - 51px)">
             <el-tab-pane :label="t('view.settings.category.general')">
                 <GeneralTab />
             </el-tab-pane>
diff --git a/src/views/Settings/components/SimpleSwitch.vue b/src/views/Settings/components/SimpleSwitch.vue
index cc30ed43..fda221a2 100644
--- a/src/views/Settings/components/SimpleSwitch.vue
+++ b/src/views/Settings/components/SimpleSwitch.vue
@@ -1,4 +1,4 @@
-<template>
+<template>
     <div class="simple-switch">
         <div class="name" :style="{ width: longLabel ? '300px' : undefined }">
             {{ label }}
diff --git a/src/views/Settings/components/Tabs/AppearanceTab.vue b/src/views/Settings/components/Tabs/AppearanceTab.vue
index 7e8e8249..925bff3a 100644
--- a/src/views/Settings/components/Tabs/AppearanceTab.vue
+++ b/src/views/Settings/components/Tabs/AppearanceTab.vue
@@ -115,12 +115,19 @@
                     <el-option v-for="size in tablePageSizes" :key="size" :label="String(size)" :value="String(size)" />
                 </el-select>
             </div>
+            <simple-switch
+                :label="t('view.settings.appearance.appearance.compact_table_mode')"
+                :value="compactTableMode"
+                @change="setCompactTableMode" />
             <div class="options-container-item">
                 <el-button size="small" :icon="Notebook" style="margin-right: 10px" @click="promptMaxTableSizeDialog">{{
                     t('view.settings.appearance.appearance.table_max_size')
                 }}</el-button>
             </div>
         </div>
+        <div class="options-container">
+            <ThemePicker />
+        </div>
         <div class="options-container">
             <span class="header">{{ t('view.settings.appearance.timedate.header') }}</span>
             <div class="options-container-item">
@@ -387,6 +394,7 @@
     import { getLanguageName, languageCodes } from '../../../../localization';
 
     import SimpleSwitch from '../SimpleSwitch.vue';
+    import ThemePicker from '../ThemePicker.vue';
 
     const { t } = useI18n();
 
@@ -415,7 +423,8 @@
         randomUserColours,
         trustColor,
         notificationIconDot,
-        tablePageSizes
+        tablePageSizes,
+        compactTableMode
     } = storeToRefs(appearanceSettingsStore);
 
     const { saveSortFavoritesOption } = useFavoriteStore();
@@ -441,7 +450,8 @@
         changeAppLanguage,
         promptMaxTableSizeDialog,
         setNotificationIconDot,
-        setTablePageSizes
+        setTablePageSizes,
+        setCompactTableMode
     } = appearanceSettingsStore;
 
     const zoomLevel = ref(100);
diff --git a/src/views/Settings/components/ThemePicker.vue b/src/views/Settings/components/ThemePicker.vue
new file mode 100644
index 00000000..30f647db
--- /dev/null
+++ b/src/views/Settings/components/ThemePicker.vue
@@ -0,0 +1,207 @@
+<template>
+    <div class="theme-picker">
+        <div class="theme-picker__header">
+            <div>
+                <span class="header">{{ t('view.settings.appearance.theme_color.header') }}</span>
+            </div>
+            <div class="theme-picker__current ml-25">
+                <span class="theme-picker__chip" :style="{ backgroundColor: currentPrimary }"></span>
+                <button type="button" class="theme-picker__toggle" @click="isOpen = !isOpen">
+                    {{ isOpen ? 'Collapse' : 'Expand' }}
+                </button>
+            </div>
+        </div>
+
+        <div v-show="isOpen" class="theme-picker__panel">
+            <div class="theme-picker__grid">
+                <button
+                    v-for="color in colorFamilies"
+                    :key="color.name"
+                    type="button"
+                    class="theme-picker__item"
+                    :class="{ 'is-active': color.base === currentPrimary }"
+                    :disabled="isApplying"
+                    @click="selectColor(color)">
+                    <span class="theme-picker__swatch" :style="{ backgroundColor: color.base }"></span>
+                    <span class="theme-picker__badge">{{ color.name }}</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { computed, onMounted, ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+
+    import colors from 'tailwindcss/colors';
+
+    import { useElementTheme } from '../../../composables/useElementTheme';
+
+    // Tailwind indigo-500
+    const defaultPrimary = 'oklch(58.5% 0.233 277.117)';
+    const { currentPrimary, isApplying, applyPrimaryColor, initPrimaryColor } = useElementTheme(defaultPrimary);
+    const { t } = useI18n();
+
+    const invalidKeys = new Set([
+        'inherit',
+        'current',
+        'transparent',
+        'black',
+        'white',
+        'lightBlue',
+        'warmGray',
+        'trueGray',
+        'coolGray',
+        'blueGray'
+    ]);
+
+    const isOpen = ref(false);
+
+    const colorFamilies = computed(() =>
+        Object.entries(colors)
+            .filter(([name, palette]) => {
+                return !invalidKeys.has(name) && palette && typeof palette === 'object' && palette['500'];
+            })
+            .map(([name, palette]) => {
+                const base = palette['500'];
+                const light = palette['300'];
+                const vivid = palette['600'];
+                const dark = palette['700'];
+                return {
+                    name,
+                    base,
+                    light,
+                    vivid,
+                    dark,
+                    palette
+                };
+            })
+            .sort((a, b) => a.name.localeCompare(b.name))
+    );
+
+    const selectColor = async (color) => {
+        await applyPrimaryColor(color.base, color.palette);
+    };
+
+    onMounted(async () => {
+        await initPrimaryColor(defaultPrimary);
+    });
+</script>
+
+<style>
+    .theme-picker {
+        padding: 6px 0;
+        background: transparent;
+    }
+
+    .theme-picker__header {
+        display: flex;
+        justify-content: flex-start;
+        gap: 12px;
+        align-items: center;
+        margin-bottom: 10px;
+    }
+
+    .theme-picker__current {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        background: transparent;
+        color: var(--el-text-color-primary);
+        padding: 0;
+        border-radius: 0;
+        border: none;
+    }
+
+    .theme-picker__toggle {
+        border: none;
+        background: transparent;
+        color: var(--el-text-color-secondary);
+        font-size: 12px;
+        cursor: pointer;
+        padding: 0;
+    }
+
+    .theme-picker__toggle:hover {
+        color: var(--el-text-color-primary);
+    }
+
+    .theme-picker__chip {
+        width: 28px;
+        height: 28px;
+        border-radius: 6px;
+        border: 1px solid var(--color-zinc-100);
+    }
+
+    .theme-picker__panel {
+        max-width: 400px;
+    }
+
+    .theme-picker__grid {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        max-height: 360px;
+        gap: 10px 18px;
+    }
+
+    .theme-picker__item {
+        all: unset;
+        display: inline-flex;
+        align-items: center;
+        gap: 12px;
+        justify-content: space-between;
+        width: calc(50% - 9px);
+        min-width: 0;
+        cursor: pointer;
+        border: 1px solid var(--el-border-color-lighter);
+        border-radius: 10px;
+        padding: 8px 12px;
+        background: var(--el-bg-color);
+        transition: border-color 0.15s ease;
+    }
+
+    .theme-picker__item:hover {
+        border-color: var(--el-color-primary);
+    }
+
+    .theme-picker__item.is-active {
+        border-color: var(--el-color-primary);
+    }
+
+    .theme-picker__item:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+
+    .theme-picker__swatch {
+        width: 28px;
+        height: 28px;
+        border-radius: 6px;
+        border: 1px solid var(--color-zinc-100);
+        flex: none;
+    }
+
+    .theme-picker__badge {
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--el-text-color-primary);
+        text-transform: capitalize;
+        flex: 1;
+        min-width: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    @media (max-width: 768px) {
+        .theme-picker__header {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        .theme-picker__current {
+            align-self: flex-start;
+        }
+    }
+</style>
diff --git a/src/views/Sidebar/Sidebar.vue b/src/views/Sidebar/Sidebar.vue
index 287d9c9a..b8769118 100644
--- a/src/views/Sidebar/Sidebar.vue
+++ b/src/views/Sidebar/Sidebar.vue
@@ -8,7 +8,7 @@
                 remote
                 :remote-method="quickSearchRemoteMethod"
                 popper-class="x-quick-search"
-                style="flex: 1; padding: 10px"
+                style="flex: 1; padding: 10px; padding-left: 0"
                 @change="quickSearchChange">
                 <el-option v-for="item in quickSearchItems" :key="item.value" :value="item.value" :label="item.label">
                     <div class="x-friend-item">
@@ -41,7 +41,7 @@
                 </el-option>
             </el-select>
             <div>
-                <NativeTooltip placement="bottom" :content="t('side_panel.refresh_tooltip')">
+                <el-tooltip placement="bottom" :content="t('side_panel.refresh_tooltip')">
                     <el-button
                         type="default"
                         :loading="isRefreshFriendsLoading"
@@ -50,16 +50,14 @@
                         circle
                         style="margin-right: 10px"
                         @click="refreshFriendsList"></el-button>
-                </NativeTooltip>
+                </el-tooltip>
             </div>
         </div>
-        <el-tabs class="zero-margin-tabs" stretch style="height: calc(100% - 60px); margin-top: 5px">
+        <el-tabs class="zero-margin-tabs" stretch style="height: calc(100% - 70px); margin-top: 5px">
             <el-tab-pane>
                 <template #label>
                     <span>{{ t('side_panel.friends') }}</span>
-                    <span style="color: #909399; font-size: 12px; margin-left: 10px">
-                        ({{ onlineFriendCount }}/{{ friends.size }})
-                    </span>
+                    <span class="sidebar-tab-count"> ({{ onlineFriendCount }}/{{ friends.size }}) </span>
                 </template>
                 <el-backtop target=".zero-margin-tabs .el-tabs__content" :bottom="20" :right="20"></el-backtop>
                 <FriendsSidebar @confirm-delete-friend="confirmDeleteFriend" />
@@ -67,9 +65,7 @@
             <el-tab-pane lazy>
                 <template #label>
                     <span>{{ t('side_panel.groups') }}</span>
-                    <span style="color: #909399; font-size: 12px; margin-left: 10px">
-                        ({{ groupInstances.length }})
-                    </span>
+                    <span class="sidebar-tab-count"> ({{ groupInstances.length }}) </span>
                 </template>
                 <GroupsSidebar :group-instances="groupInstances" :group-order="inGameGroupOrder" />
             </el-tab-pane>
@@ -97,11 +93,17 @@
 </script>
 
 <style scoped>
+    .sidebar-tab-count {
+        color: var(--el-text-color-secondary);
+        font-size: 12px;
+        margin-left: 10px;
+    }
+
     .group-calendar-button {
         position: fixed;
         bottom: 20px;
         right: 20px;
-        box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+        box-shadow: var(--el-box-shadow-lighter);
         border: none;
         z-index: 5;
         width: 40px;
diff --git a/src/views/Sidebar/components/FriendItem.vue b/src/views/Sidebar/components/FriendItem.vue
index 14342748..2ce02aa3 100644
--- a/src/views/Sidebar/components/FriendItem.vue
+++ b/src/views/Sidebar/components/FriendItem.vue
@@ -6,7 +6,7 @@
                 :class="isFriendActiveOrOffline ? undefined : userStatusClass(friend.ref, friend.pendingOffline)">
                 <img :src="userImage(friend.ref, true)" loading="lazy" />
             </div>
-            <div class="detail">
+            <div class="detail h-9 flex flex-col justify-between">
                 <span v-if="!hideNicknames && friend.$nickName" class="name" :style="{ color: friend.ref.$userColour }">
                     {{ friend.ref.displayName }} ({{ friend.$nickName }})
                 </span>
@@ -16,9 +16,9 @@
 
                 <span v-if="isFriendActiveOrOffline" class="extra">{{ friend.ref.statusDescription }}</span>
                 <template v-else>
-                    <span v-if="friend.pendingOffline" class="extra">
+                    <div v-if="friend.pendingOffline" class="extra">
                         <el-icon><WarningFilled /></el-icon> {{ t('side_panel.pending_offline') }}
-                    </span>
+                    </div>
                     <template v-else-if="isGroupByInstance">
                         <el-icon v-if="isFriendTraveling" class="is-loading" style="margin-right: 3px"
                             ><Loading
@@ -87,7 +87,7 @@
     const travelingProp = computed(() => props.friend.ref?.travelingToLocation || '');
 </script>
 
-<style scoped>
+<style>
     .skeleton {
         height: 40px;
         width: 100%;
@@ -104,11 +104,11 @@
                 justify-content: center;
             }
         }
-        :deep(.el-skeleton__circle) {
+        .el-skeleton__circle {
             height: 40px;
             width: 40px;
         }
-        :deep(.el-skeleton__text) {
+        .el-skeleton__text {
             &:first-child {
                 height: 14px;
                 margin-bottom: 6px;
diff --git a/src/views/Tools/dialogs/GalleryDialog.vue b/src/views/Tools/Gallery.vue
similarity index 94%
rename from src/views/Tools/dialogs/GalleryDialog.vue
rename to src/views/Tools/Gallery.vue
index bd2e9cb7..f7a75e33 100644
--- a/src/views/Tools/dialogs/GalleryDialog.vue
+++ b/src/views/Tools/Gallery.vue
@@ -1,11 +1,11 @@
 <template>
-    <el-dialog
-        class="x-dialog"
-        :model-value="galleryDialogVisible"
-        :title="t('dialog.gallery_icons.header')"
-        width="97vw"
-        append-to-body
-        @close="closeGalleryDialog">
+    <div class="gallery-page x-container">
+        <div class="gallery-page__header">
+            <el-button text size="small" :icon="ArrowLeft" class="gallery-page__back" @click="goBack">
+                {{ t('nav_tooltip.tools') }}
+            </el-button>
+            <span class="header">{{ t('dialog.gallery_icons.header') }}</span>
+        </div>
         <el-progress
             v-if="isUploading"
             :show-text="false"
@@ -13,14 +13,12 @@
             :percentage="100"
             :stroke-width="3"
             style="margin-bottom: 12px" />
-        <el-tabs type="card" ref="galleryTabs">
+        <el-tabs>
             <el-tab-pane v-loading="galleryDialogGalleryLoading">
                 <template #label>
                     <span>
                         {{ t('dialog.gallery_icons.gallery') }}
-                        <span style="color: #909399; font-size: 12px; margin-left: 5px">
-                            {{ galleryTable.length }}/64
-                        </span>
+                        <span class="gallery-tab-count"> {{ galleryTable.length }}/64 </span>
                     </span>
                 </template>
                 <input
@@ -92,9 +90,7 @@
                 <template #label>
                     <span>
                         {{ t('dialog.gallery_icons.icons') }}
-                        <span style="color: #909399; font-size: 12px; margin-left: 5px">
-                            {{ VRCPlusIconsTable.length }}/64
-                        </span>
+                        <span class="gallery-tab-count"> {{ VRCPlusIconsTable.length }}/64 </span>
                     </span>
                 </template>
                 <input
@@ -166,7 +162,7 @@
                 <template #label>
                     <span>
                         {{ t('dialog.gallery_icons.emojis') }}
-                        <span style="color: #909399; font-size: 12px; margin-left: 5px">
+                        <span class="gallery-tab-count">
                             {{ emojiTable.length }}/{{ cachedConfig?.maxUserEmoji }}
                         </span>
                     </span>
@@ -308,7 +304,7 @@
                 <template #label>
                     <span>
                         {{ t('dialog.gallery_icons.stickers') }}
-                        <span style="color: #909399; font-size: 12px; margin-left: 5px">
+                        <span class="gallery-tab-count">
                             {{ stickerTable.length }}/{{ cachedConfig?.maxUserStickers }}
                         </span>
                     </span>
@@ -374,9 +370,7 @@
                 <template #label>
                     <span>
                         {{ t('dialog.gallery_icons.prints') }}
-                        <span style="color: #909399; font-size: 12px; margin-left: 5px">
-                            {{ printTable.length }}/64
-                        </span>
+                        <span class="gallery-tab-count"> {{ printTable.length }}/64 </span>
                     </span>
                 </template>
                 <input
@@ -438,16 +432,12 @@
                             style="display: block" />
                         <span v-else style="display: block">&nbsp;</span>
                         <DisplayName
-                            class="x-ellipsis"
+                            class="x-ellipsis gallery-meta"
                             v-if="image.authorId"
                             :userid="image.authorId"
-                            :hint="image.authorName"
-                            style="color: #909399; font-family: monospace; display: block" />
-                        <span v-else style="font-family: monospace; display: block">&nbsp;</span>
-                        <span
-                            class="x-ellipsis"
-                            v-if="image.createdAt"
-                            style="color: #909399; font-family: monospace; font-size: 11px; display: block">
+                            :hint="image.authorName" />
+                        <span v-else class="gallery-meta">&nbsp;</span>
+                        <span v-if="image.createdAt" class="x-ellipsis gallery-meta gallery-meta--small">
                             {{ formatDateFilter(image.createdAt, 'long') }}
                         </span>
                         <span v-else style="display: block">&nbsp;</span>
@@ -474,7 +464,7 @@
                 <template #label>
                     <span>
                         {{ t('dialog.gallery_icons.inventory') }}
-                        <span style="color: #909399; font-size: 12px; margin-left: 5px">
+                        <span class="gallery-tab-count">
                             {{ inventoryTable.length }}
                         </span>
                     </span>
@@ -508,9 +498,7 @@
                             v-text="item.description"
                             style="display: block"></span>
                         <span v-else style="display: block">&nbsp;</span>
-                        <span
-                            class="x-ellipsis"
-                            style="color: #909399; font-family: monospace; font-size: 11px; display: block">
+                        <span class="x-ellipsis gallery-meta gallery-meta--small">
                             {{ formatDateFilter(item.created_at, 'long') }}
                         </span>
                         <span v-if="item.itemType === 'prop'">{{ t('dialog.gallery_icons.item') }}</span>
@@ -533,15 +521,16 @@
                 </div>
             </el-tab-pane>
         </el-tabs>
-    </el-dialog>
+    </div>
 </template>
 
 <script setup>
-    import { Close, Delete, Link, Picture, Plus, Present, Refresh, Upload } from '@element-plus/icons-vue';
+    import { ArrowLeft, Close, Delete, Link, Picture, Plus, Present, Refresh, Upload } from '@element-plus/icons-vue';
+    import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
     import { ElMessage, ElMessageBox } from 'element-plus';
-    import { computed, ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
+    import { useRouter } from 'vue-router';
 
     import {
         extractFileId,
@@ -549,16 +538,17 @@
         getEmojiFileName,
         getPrintFileName,
         openExternalLink
-    } from '../../../shared/utils';
-    import { inventoryRequest, miscRequest, userRequest, vrcPlusIconRequest, vrcPlusImageRequest } from '../../../api';
-    import { useAdvancedSettingsStore, useAuthStore, useGalleryStore, useUserStore } from '../../../stores';
-    import { emojiAnimationStyleList, emojiAnimationStyleUrl } from '../../../shared/constants';
-    import { AppDebug } from '../../../service/appConfig';
-    import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
+    } from '../../shared/utils';
+    import { inventoryRequest, miscRequest, userRequest, vrcPlusIconRequest, vrcPlusImageRequest } from '../../api';
+    import { useAdvancedSettingsStore, useAuthStore, useGalleryStore, useUserStore } from '../../stores';
+    import { emojiAnimationStyleList, emojiAnimationStyleUrl } from '../../shared/constants';
+    import { AppDebug } from '../../service/appConfig';
+    import { handleImageUploadInput } from '../../shared/utils/imageUpload';
 
-    import Emoji from '../../../components/Emoji.vue';
+    import Emoji from '../../components/Emoji.vue';
 
     const { t } = useI18n();
+    const router = useRouter();
 
     const {
         galleryTable,
@@ -578,6 +568,7 @@
         inventoryTable
     } = storeToRefs(useGalleryStore());
     const {
+        loadGalleryData,
         refreshGalleryTable,
         refreshVRCPlusIconsTable,
         refreshStickerTable,
@@ -602,6 +593,15 @@
     const pendingUploads = ref(0);
     const isUploading = computed(() => pendingUploads.value > 0);
 
+    onMounted(() => {
+        galleryDialogVisible.value = true;
+        loadGalleryData();
+    });
+
+    onBeforeUnmount(() => {
+        galleryDialogVisible.value = false;
+    });
+
     function startUpload() {
         pendingUploads.value += 1;
     }
@@ -610,8 +610,9 @@
         pendingUploads.value = Math.max(0, pendingUploads.value - 1);
     }
 
-    function closeGalleryDialog() {
+    function goBack() {
         galleryDialogVisible.value = false;
+        router.push({ name: 'tools' });
     }
 
     function onFileChangeGallery(e) {
@@ -1116,3 +1117,32 @@
             .catch(() => {});
     }
 </script>
+
+<style scoped>
+    .gallery-page__header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 12px;
+    }
+
+    .gallery-tab-count {
+        color: var(--el-text-color-secondary);
+        font-size: 12px;
+        margin-left: 5px;
+    }
+
+    .gallery-meta {
+        color: var(--el-text-color-secondary);
+        font-family: monospace;
+        display: block;
+    }
+
+    .gallery-meta--small {
+        font-size: 11px;
+    }
+
+    .gallery-page__back {
+        padding-left: 0;
+    }
+</style>
diff --git a/src/views/Tools/Tools.vue b/src/views/Tools/Tools.vue
index a1168b62..b285307a 100644
--- a/src/views/Tools/Tools.vue
+++ b/src/views/Tools/Tools.vue
@@ -48,7 +48,7 @@
                             </div>
                         </el-card>
                         <el-card :body-style="{ padding: '0px' }" class="tool-card">
-                            <div class="tool-content" @click="showGalleryDialog">
+                            <div class="tool-content" @click="showGalleryPage">
                                 <div class="tool-icon">
                                     <i class="ri-multi-image-line"></i>
                                 </div>
@@ -191,7 +191,6 @@
             <NoteExportDialog
                 :isNoteExportDialogVisible="isNoteExportDialogVisible"
                 @close="isNoteExportDialogVisible = false" />
-            <GalleryDialog />
             <ExportDiscordNamesDialog
                 v-model:discordNamesDialogVisible="isExportDiscordNamesDialogVisible"
                 :friends="friends" />
@@ -207,7 +206,7 @@
 </template>
 
 <script setup>
-    import { computed, defineAsyncComponent, ref, watch } from 'vue';
+    import { computed, defineAsyncComponent, ref } from 'vue';
     import { ArrowRight } from '@element-plus/icons-vue';
     import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
@@ -219,22 +218,21 @@
     const GroupCalendarDialog = defineAsyncComponent(() => import('./dialogs/GroupCalendarDialog.vue'));
     const ScreenshotMetadataDialog = defineAsyncComponent(() => import('./dialogs/ScreenshotMetadataDialog.vue'));
     const NoteExportDialog = defineAsyncComponent(() => import('./dialogs/NoteExportDialog.vue'));
-    const GalleryDialog = defineAsyncComponent(() => import('./dialogs/GalleryDialog.vue'));
     const EditInviteMessageDialog = defineAsyncComponent(() => import('./dialogs/EditInviteMessagesDialog.vue'));
-
     const ExportDiscordNamesDialog = defineAsyncComponent(() => import('./dialogs/ExportDiscordNamesDialog.vue'));
     const ExportFriendsListDialog = defineAsyncComponent(() => import('./dialogs/ExportFriendsListDialog.vue'));
     const ExportAvatarsListDialog = defineAsyncComponent(() => import('./dialogs/ExportAvatarsListDialog.vue'));
 
     const { t } = useI18n();
 
-    const { showGalleryDialog } = useGalleryStore();
+    const { showGalleryPage } = useGalleryStore();
     const { friends } = storeToRefs(useFriendStore());
 
     const categoryCollapsed = ref({
         group: false,
         image: false,
-        user: false
+        user: false,
+        other: false
     });
 
     const isGroupCalendarDialogVisible = ref(false);
@@ -313,7 +311,7 @@
     }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
     .tool-categories {
         margin-top: 20px;
         padding: 0 20px;
@@ -329,7 +327,6 @@
             padding: 8px 12px;
             border-radius: 6px;
             margin-bottom: 12px;
-            background-color: var(--el-color-primary-light-9);
             transition: all 0.2s ease;
 
             &:hover {
@@ -347,7 +344,6 @@
                 margin-left: 5px;
                 font-size: 16px;
                 font-weight: 600;
-                color: var(--el-color-primary);
             }
         }
     }
@@ -368,7 +364,7 @@
 
         &:hover {
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            box-shadow: var(--el-box-shadow-light);
         }
 
         :deep(.el-card__body) {
@@ -389,7 +385,7 @@
                 background-color: var(--el-color-primary-light-9);
                 border-radius: 12px;
                 margin-right: 20px;
-                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                box-shadow: var(--el-box-shadow-lighter);
 
                 i {
                     font-size: 28px;
diff --git a/src/views/Tools/components/GroupCalendarEventCard.vue b/src/views/Tools/components/GroupCalendarEventCard.vue
index d6a4a39b..c9a99c33 100644
--- a/src/views/Tools/components/GroupCalendarEventCard.vue
+++ b/src/views/Tools/components/GroupCalendarEventCard.vue
@@ -188,7 +188,7 @@
     };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
     .event-card {
         transition: all 0.3s ease;
         position: relative;
@@ -196,7 +196,7 @@
         border-radius: 8px;
         &:hover {
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            box-shadow: var(--el-box-shadow-light);
         }
         &.grouped-card {
             margin-bottom: 0;
@@ -232,17 +232,17 @@
             height: 24px;
             border-radius: 50%;
             background-color: var(--el-text-color-regular);
-            color: #ffffff;
+            color: var(--el-bg-color);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 14px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            box-shadow: var(--el-box-shadow-lighter);
             z-index: 10;
             cursor: pointer;
         }
         .is-following {
-            background-color: var(--group-calendar-badge-following, #67c23a);
+            background-color: var(--group-calendar-badge-following, var(--el-color-success));
         }
         .event-content {
             font-size: 12px;
diff --git a/src/views/Tools/dialogs/ExportFriendsListDialog.vue b/src/views/Tools/dialogs/ExportFriendsListDialog.vue
index 1a97edb3..a2d90ed8 100644
--- a/src/views/Tools/dialogs/ExportFriendsListDialog.vue
+++ b/src/views/Tools/dialogs/ExportFriendsListDialog.vue
@@ -1,6 +1,6 @@
 <template>
     <el-dialog :title="t('dialog.export_friends_list.header')" v-model="isVisible" width="650px">
-        <el-tabs type="card">
+        <el-tabs>
             <el-tab-pane :label="t('dialog.export_friends_list.csv')">
                 <el-input
                     v-model="exportFriendsListCsv"
diff --git a/src/views/Tools/dialogs/GroupCalendarDialog.vue b/src/views/Tools/dialogs/GroupCalendarDialog.vue
index ca3279d0..579d8f31 100644
--- a/src/views/Tools/dialogs/GroupCalendarDialog.vue
+++ b/src/views/Tools/dialogs/GroupCalendarDialog.vue
@@ -467,7 +467,7 @@
     }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
     .x-dialog {
         :deep(.el-dialog) {
             max-height: 750px;
@@ -519,7 +519,10 @@
                             position: relative;
 
                             &.has-events {
-                                background-color: var(--group-calendar-event-bg, rgba(25, 102, 154, 0.05));
+                                background-color: var(
+                                    --group-calendar-event-bg,
+                                    color-mix(in oklch, var(--el-color-primary) 10%, transparent)
+                                );
                             }
                             .calendar-event-badge {
                                 position: absolute;
@@ -528,21 +531,21 @@
                                 min-width: 16px;
                                 height: 16px;
                                 border-radius: 8px;
-                                color: #ffffff;
+                                color: var(--el-color-white, #fff);
                                 display: flex;
                                 align-items: center;
                                 justify-content: center;
                                 font-size: 10px;
                                 font-weight: bold;
-                                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+                                box-shadow: var(--el-box-shadow-lighter);
                                 z-index: 10;
                                 padding: 0 4px;
                                 line-height: 16px;
                                 &.has-following {
-                                    background-color: var(--group-calendar-badge-following, #67c23a);
+                                    background-color: var(--group-calendar-badge-following, var(--el-color-success));
                                 }
                                 &.no-following {
-                                    background-color: var(--group-calendar-badge-normal, #409eff);
+                                    background-color: var(--group-calendar-badge-normal, var(--el-color-primary));
                                 }
                             }
                         }
@@ -606,7 +609,7 @@
         flex-direction: column;
         .search-container {
             padding: 2px 20px 12px 20px;
-            border-bottom: 1px solid #ebeef5;
+            border-bottom: 1px solid var(--el-border-color-lighter);
             display: flex;
             justify-content: flex-end;
             .search-input {
diff --git a/src/views/Tools/dialogs/ScreenshotMetadataDialog.vue b/src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
index a1ea5077..daaad53b 100644
--- a/src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
+++ b/src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
@@ -11,7 +11,7 @@
             @dragover.prevent
             @dragenter.prevent
             @drop="handleDrop">
-            <span style="margin-left: 5px; color: #909399; font-family: monospace">{{
+            <span style="margin-left: 5px; color: var(--el-text-color-secondary); font-family: monospace">{{
                 t('dialog.screenshot_metadata.drag')
             }}</span>
             <br />
@@ -105,7 +105,7 @@
                 v-if="screenshotMetadataDialog.metadata.author"
                 :userid="screenshotMetadataDialog.metadata.author.id"
                 :hint="screenshotMetadataDialog.metadata.author.displayName"
-                style="color: #909399; font-family: monospace" />
+                style="color: var(--el-text-color-secondary); font-family: monospace" />
             <br />
             <el-carousel
                 ref="screenshotMetadataCarouselRef"
@@ -147,7 +147,7 @@
                 <span class="x-link" @click="lookupUser(user)" v-text="user.displayName"></span>
                 <span
                     v-if="user.pos"
-                    style="margin-left: 5px; color: #909399; font-family: monospace"
+                    style="margin-left: 5px; color: var(--el-text-color-secondary); font-family: monospace"
                     v-text="'(' + user.pos.x + ', ' + user.pos.y + ', ' + user.pos.z + ')'"></span>
                 <br />
             </span>
diff --git a/src/vr/Vr.vue b/src/vr/Vr.vue
index 41cfa5ae..507698d9 100644
--- a/src/vr/Vr.vue
+++ b/src/vr/Vr.vue
@@ -1166,13 +1166,13 @@
                             <img
                                 v-if="device[1] !== 'connected'"
                                 class="tracker-device"
-                                src="./images/headset_quest_status_off.png"
+                                src="/images/vr/headset_quest_status_off.png"
                                 :class="trackingResultToClass(device[4])" />
                             <img
                                 v-else-if="device[2] === 'charging'"
-                                src="./images/headset_quest_status_ready_charging.png" />
-                            <img v-else-if="device[3] < 20" src="./images/headset_quest_status_ready_low.png" />
-                            <img v-else src="./images/headset_quest_status_ready.png" />
+                                src="/images/vr/headset_quest_status_ready_charging.png" />
+                            <img v-else-if="device[3] < 20" src="/images/vr/headset_quest_status_ready_low.png" />
+                            <img v-else src="/images/vr/headset_quest_status_ready.png" />
                             <span>{{ device[3] }}%</span>
                         </div>
                         <div
@@ -1182,57 +1182,57 @@
                             <img
                                 v-if="device[1] !== 'connected'"
                                 class="tracker-device"
-                                src="./images/left_controller_status_off.png"
+                                src="/images/vr/left_controller_status_off.png"
                                 :class="trackingResultToClass(device[4])" />
                             <img
                                 v-else-if="device[2] === 'charging'"
-                                src="./images/left_controller_status_ready_charging.png" />
-                            <img v-else-if="device[3] < 20" src="./images/left_controller_status_ready_low.png" />
-                            <img v-else src="./images/left_controller_status_ready.png" />
+                                src="/images/vr/left_controller_status_ready_charging.png" />
+                            <img v-else-if="device[3] < 20" src="/images/vr/left_controller_status_ready_low.png" />
+                            <img v-else src="/images/vr/left_controller_status_ready.png" />
                             <span>{{ device[3] }}%</span>
                         </div>
                         <div
                             v-else-if="device[0] === 'rightController'"
                             class="tracker-device"
                             :class="trackingResultToClass(device[4])">
-                            <img v-if="device[1] !== 'connected'" src="./images/right_controller_status_off.png" />
+                            <img v-if="device[1] !== 'connected'" src="/images/vr/right_controller_status_off.png" />
                             <img
                                 v-else-if="device[2] === 'charging'"
-                                src="./images/right_controller_status_ready_charging.png" />
-                            <img v-else-if="device[3] < 20" src="./images/right_controller_status_ready_low.png" />
-                            <img v-else src="./images/right_controller_status_ready.png" />
+                                src="/images/vr/right_controller_status_ready_charging.png" />
+                            <img v-else-if="device[3] < 20" src="/images/vr/right_controller_status_ready_low.png" />
+                            <img v-else src="/images/vr/right_controller_status_ready.png" />
                             <span>{{ device[3] }}%</span>
                         </div>
                         <div
                             v-else-if="device[0] === 'controller'"
                             class="tracker-device"
                             :class="trackingResultToClass(device[4])">
-                            <img v-if="device[1] !== 'connected'" src="./images/controller_status_off.png" />
+                            <img v-if="device[1] !== 'connected'" src="/images/vr/controller_status_off.png" />
                             <img
                                 v-else-if="device[2] === 'charging'"
-                                src="./images/controller_status_ready_charging.png" />
-                            <img v-else-if="device[3] < 20" src="./images/controller_status_ready_low.png" />
-                            <img v-else src="./images/controller_status_ready.png" />
+                                src="/images/vr/controller_status_ready_charging.png" />
+                            <img v-else-if="device[3] < 20" src="/images/vr/controller_status_ready_low.png" />
+                            <img v-else src="/images/vr/controller_status_ready.png" />
                             <span>{{ device[3] }}%</span>
                         </div>
                         <div
                             v-else-if="device[0] === 'tracker'"
                             class="tracker-device"
                             :class="trackingResultToClass(device[4])">
-                            <img v-if="device[1] !== 'connected'" src="./images/tracker_status_off.png" />
+                            <img v-if="device[1] !== 'connected'" src="/images/vr/tracker_status_off.png" />
                             <img
                                 v-else-if="device[2] === 'charging'"
-                                src="./images/tracker_status_ready_charging.png" />
-                            <img v-else-if="device[3] < 20" src="./images/tracker_status_ready_low.png" />
-                            <img v-else src="./images/tracker_status_ready.png" />
+                                src="/images/vr/tracker_status_ready_charging.png" />
+                            <img v-else-if="device[3] < 20" src="/images/vr/tracker_status_ready_low.png" />
+                            <img v-else src="/images/vr/tracker_status_ready.png" />
                             <span>{{ device[3] }}%</span>
                         </div>
                         <div
                             v-else-if="device[0] === 'base'"
                             class="tracker-device"
                             :class="trackingResultToClass(device[4])">
-                            <img v-if="device[1] !== 'connected'" src="./images/base_status_off.png" />
-                            <img v-else src="./images/base_status_ready.png" />
+                            <img v-if="device[1] !== 'connected'" src="/images/vr/base_status_off.png" />
+                            <img v-else src="/images/vr/base_status_ready.png" />
                             <span v-if="device[3] !== 100">{{ device[3] }}x</span>
                         </div>
                     </div>
diff --git a/src/vr/vr.css b/src/vr/vr.css
index fb743cbd..b217802f 100644
--- a/src/vr/vr.css
+++ b/src/vr/vr.css
@@ -1,9 +1,9 @@
 /*
-Copyright(c) 2019-2025 pypy and individual contributors.
-All rights reserved.
-
-This work is licensed under the terms of the MIT license.
-For a copy, see <https://opensource.org/licenses/MIT>. 
+/* Copyright(c) 2019-2025 pypy and individual contributors.
+/* All rights reserved.
+/*
+/* This work is licensed under the terms of the MIT license.
+/* For a copy, see <https://opensource.org/licenses/MIT>.
 */
 
 @import 'tailwindcss';
@@ -37,23 +37,28 @@ body {
     --font-symbol: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
     --font-fallback-cjk: sans-serif;
     --font-primary-cjk:
-        'Noto Sans JP Variable', 'Noto Sans SC Variable', 'Noto Sans KR Variable', 'Noto Sans TC Variable';
+        'Noto Sans JP Variable', 'Noto Sans SC Variable',
+        'Noto Sans KR Variable', 'Noto Sans TC Variable';
 }
 :root[lang='zh-CN'] {
     --font-primary-cjk:
-        'Noto Sans SC Variable', 'Noto Sans JP Variable', 'Noto Sans KR Variable', 'Noto Sans TC Variable';
+        'Noto Sans SC Variable', 'Noto Sans JP Variable',
+        'Noto Sans KR Variable', 'Noto Sans TC Variable';
 }
 :root[lang='ja'] {
     --font-primary-cjk:
-        'Noto Sans JP Variable', 'Noto Sans KR Variable', 'Noto Sans TC Variable', 'Noto Sans SC Variable';
+        'Noto Sans JP Variable', 'Noto Sans KR Variable',
+        'Noto Sans TC Variable', 'Noto Sans SC Variable';
 }
 :root[lang='ko'] {
     --font-primary-cjk:
-        'Noto Sans KR Variable', 'Noto Sans JP Variable', 'Noto Sans TC Variable', 'Noto Sans SC Variable';
+        'Noto Sans KR Variable', 'Noto Sans JP Variable',
+        'Noto Sans TC Variable', 'Noto Sans SC Variable';
 }
 :root[lang='zh-TW'] {
     --font-primary-cjk:
-        'Noto Sans TC Variable', 'Noto Sans JP Variable', 'Noto Sans KR Variable', 'Noto Sans SC Variable';
+        'Noto Sans TC Variable', 'Noto Sans JP Variable',
+        'Noto Sans KR Variable', 'Noto Sans SC Variable';
 }
 body {
     font-family:
@@ -212,20 +217,15 @@ body {
     border-radius: 16px;
 }
 
-@font-face {
-    font-family: 'ellipsis-font';
-    src: local('Times New Roman');
-    unicode-range: U+2026;
-}
-
 body,
 input,
 textarea,
 select,
 button {
     font-family:
-        'ellipsis-font', 'Noto Sans JP Variable', 'Noto Sans KR Variable', 'Noto Sans TC Variable',
-        'Noto Sans SC Variable', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', sans-serif;
+        'ellipsis-font', 'Noto Sans JP Variable', 'Noto Sans KR Variable',
+        'Noto Sans TC Variable', 'Noto Sans SC Variable', 'Meiryo UI',
+        'Malgun Gothic', 'Segoe UI', sans-serif;
     line-height: normal;
     text-shadow:
         #000 0px 0px 3px,
@@ -384,17 +384,17 @@ i.x-user-status.online {
 
 i.x-user-status.joinme {
     background: #409eff;
-    mask-image: url(../assets/images/masks/joinme.svg);
+    mask-image: url(/images/masks/joinme.svg);
 }
 
 i.x-user-status.askme {
     background: #ff9500;
-    mask-image: url(../assets/images/masks/askme.svg);
+    mask-image: url(/images/masks/askme.svg);
 }
 
 i.x-user-status.busy {
     background: #ff2c2c;
-    mask-image: url(../assets/images/masks/busy.svg);
+    mask-image: url(/images/masks/busy.svg);
 }
 
 .spin {