diff --git a/src/app.css b/src/app.css
index ed934950..cea60488 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,72 +1,11 @@
-@import 'animate.css/animate.min.css';
-@import 'noty/lib/noty.css';
-@import 'remixicon/fonts/remixicon.css';
-@import 'vue-sonner/style.css';
-@import 'vue-json-pretty/lib/styles.css';
-
-@import './styles/flags.css';
-@import './styles/animated-emoji.css';
-@import './styles/fonts.css';
-@import './styles/noty.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 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';
-}
-:root[lang='ja'] {
-    --font-primary-cjk:
-        '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';
-}
-:root[lang='zh-TW'] {
-    --font-primary-cjk:
-        'Noto Sans TC Variable', 'Noto Sans JP Variable',
-        'Noto Sans KR Variable', 'Noto Sans SC Variable';
-}
-
-
 html {
     overflow: hidden;
 }
 
-body {
-    font-family:
-        var(--font-western), var(--font-symbol), var(--font-primary-cjk),
-        var(--font-fallback-cjk);
-
-    margin: 0;
-}
-
-
 .lucide.is-loading {
     animation: rotating 2s linear infinite;
 }
 
-
-
-
-.x-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
 .x-app {
     display: flex;
     width: 100vw;
@@ -84,95 +23,6 @@ body {
     height: 100%;
 }
 
-.x-login-container {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-}
-
-.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;
-}
-
-.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;
-}
-
-.notify::after {
-    position: absolute;
-    top: 45%;
-    left: 8px;
-    width: 4px;
-    height: 4px;
-    content: '';
-    border-radius: 50%;
-}
-
-.pending-update {
-    height: 56px;
-    width: 64px;
-    cursor: pointer;
-}
-
-.x-aside-container {
-    display: flex;
-    flex: none;
-    flex-direction: column;
-    padding: 13px 5px 5px 5px;
-    order: 99;
-    height: 100%;
-    box-sizing: border-box;
-}
 
 .x-friend-list {
     padding: 0 10px;
@@ -183,10 +33,6 @@ hr.x-vertical-divider {
     transition: transform 0.3s;
 }
 
-.x-aside-container > .x-friend-list {
-    flex: 1;
-}
-
 .x-dialog .x-friend-list {
     display: flex;
     flex-wrap: wrap;
@@ -339,32 +185,15 @@ img.friends-list-avatar {
     line-height: 16px;
 }
 
-.x-friend-item > .detail > .extra,
-.extra {
+.x-friend-item > .detail > .extra {
     font-size: 12px;
-    & > span > span:first-child {
-        scale: 0.9;
-        margin-right: 2px;
-    }
 }
 
-.x-friend-item > .vrcplus-icon {
-    border-radius: 20px;
-    width: 200px;
-    height: 200px;
-    cursor: pointer;
+.x-friend-item > .detail > .extra > span > span:first-child {
+    scale: 0.9;
+    margin-right: 2px;
 }
 
-.x-friend-item > .current-vrcplus-icon {
-    cursor: default;
-}
-
-.x-friend-item > .vrcplus-icon > img {
-    width: 100%;
-    height: 100%;
-    border-radius: 15px;
-    object-fit: cover;
-}
 
 .x-friend-item:hover {
     border-radius: 8px;
@@ -381,31 +210,10 @@ img.friends-list-avatar {
     border-bottom-left-radius: 25px;
 }
 
-.x-aside-container > .x-friend-list > .x-friend-item:hover {
-}
-
 .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 {
-    border-radius: 2px;
-}
-
-
 
 i.x-user-status,
 i.x-status-icon {
@@ -470,7 +278,6 @@ i.x-status-icon.red {
     border-color: var(--color-amber-400) !important;
 }
 
-
 .x-tag-age-verification {
     color: #3b82f6;
     border-color: #3b82f6 !important;
@@ -483,13 +290,6 @@ i.x-status-icon.red {
     padding-bottom: 0.5px;
 }
 
-
-
-.x-popover-image {
-    max-width: 100%;
-    max-height: 100%;
-}
-
 .options-container {
     margin-top: 30px;
     padding: 0 10px 10px 10px;
@@ -522,77 +322,7 @@ i.x-status-icon.red {
     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;
-}
-
-.avatar-info {
-    cursor: pointer;
-    width: fit-content;
-    vertical-align: top;
-}
-
-
-
-.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;
-}
-
-.dialog-title {
-    font-weight: bold;
-}
-
-.vrc-instance-queue-message {
-    padding: 3px;
-    top: 0 !important;
-}
-
-
-
 .x-app > .x-container {
     padding-top: 15px;
 }
 
-.x-text-removed {
-    text-decoration: line-through;
-
-    padding: 2px 2px;
-    border-radius: 4px;
-}
-
-.x-text-added {
-    padding: 2px 2px;
-    border-radius: 4px;
-}
-
-
diff --git a/src/components/AvatarInfo.vue b/src/components/AvatarInfo.vue
index d78a9b3b..83606660 100644
--- a/src/components/AvatarInfo.vue
+++ b/src/components/AvatarInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <div @click="confirm" class="avatar-info">
+    <div @click="confirm" class="cursor-pointer w-fit align-top">
         <span v-if="avatarType" :class="color" class="mr-2">
             <Lock v-if="avatarType === '(own)'" class="h-4 w-4" />
             <Unlock v-else-if="avatarType === '(public)'" class="h-4 w-4" />
diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
index 26b359aa..df87dfd9 100644
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -743,4 +743,14 @@
         max-height: 360px;
         overflow: hidden auto;
     }
+
+    .notify::after {
+        position: absolute;
+        top: 45%;
+        left: 8px;
+        width: 4px;
+        height: 4px;
+        content: '';
+        border-radius: 50%;
+    }
 </style>
diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index 4ec6fe60..5cf1e4e5 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -16,7 +16,7 @@
                         <div style="flex: 1">
                             <div>
                                 <span
-                                    class="dialog-title"
+                                    class="font-bold"
                                     style="margin-right: 5px; cursor: pointer"
                                     v-text="avatarDialog.ref.name"
                                     @click="copyToClipboard(avatarDialog.ref.name)"></span>
@@ -76,18 +76,18 @@
                                 </TooltipWrapper>
                                 <TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
                                     <Badge
-                                        class="x-tag-platform-ios"
+                                        class="text-[#8e8e93] border-[#8e8e93]"
                                         variant="outline"
                                         style="margin-right: 5px; margin-top: 5px"
-                                        ><Apple class="h-4 w-4 x-tag-platform-ios" />
+                                        ><Apple class="h-4 w-4 text-[#8e8e93]" />
                                         <span
                                             v-if="avatarDialog.platformInfo.ios"
-                                            :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
+                                            :class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']"
                                             >{{ avatarDialog.platformInfo.ios.performanceRating }}</span
                                         >
                                         <span
                                             v-if="avatarDialog.bundleSizes['ios']"
-                                            :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
+                                            :class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']"
                                             >{{ avatarDialog.bundleSizes['ios'].fileSize }}</span
                                         >
                                     </Badge>
diff --git a/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue b/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
index 544ef16f..66aaa2d0 100644
--- a/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
+++ b/src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
@@ -27,7 +27,7 @@
                 {{ t('dialog.change_content_image.upload') }}
             </Button>
             <br />
-            <div class="x-change-image-item">
+            <div class="inline-block p-1 pb-0 hover:rounded-sm">
                 <img :src="previousImageUrl" class="img-size" loading="lazy" />
             </div>
             </div>
diff --git a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
index f14d3913..8e1fc355 100644
--- a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
+++ b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
@@ -78,14 +78,14 @@
                             <span class="name" v-text="avatar.name"></span>
                             <span
                                 v-if="avatar.releaseStatus === 'public'"
-                                class="extra"
+                                class="block truncate text-xs"
                                 v-text="avatar.releaseStatus"></span>
                             <span
                                 v-else-if="avatar.releaseStatus === 'private'"
-                                class="extra"
+                                class="block truncate text-xs"
                                 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>
+                            <span v-else class="block truncate text-xs" v-text="avatar.releaseStatus"></span>
+                            <span class="block truncate text-xs" v-text="avatarTagStrings.get(avatar.id)"></span>
                         </div>
                         <Button size="sm" variant="ghost" style="margin-left: 5px" @click.stop>
                             <Checkbox
diff --git a/src/components/dialogs/GroupDialog/GallerySelectDialog.vue b/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
index 60b1a255..3ebf9a3f 100644
--- a/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
+++ b/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
@@ -42,13 +42,13 @@
                     <template v-if="image.versions && image.versions.length > 0">
                         <div
                             v-if="image.versions[image.versions.length - 1].file.url"
-                            class="vrcplus-icon"
+                            class="h-[200px] w-[200px] rounded-[20px] cursor-pointer overflow-hidden"
                             @click="
                                 selectImageGallerySelect(image.versions[image.versions.length - 1].file.url, image.id)
                             ">
                             <img
                                 :src="image.versions[image.versions.length - 1].file.url"
-                                class="avatar"
+                                class="h-full w-full rounded-[15px] object-cover"
                                 loading="lazy" />
                         </div>
                     </template>
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 5019f695..36854c0f 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -22,7 +22,7 @@
                         <div class="group-header" style="flex: 1">
                             <span v-if="groupDialog.ref.ownerId === currentUser.id" style="margin-right: 5px">👑</span>
                             <span
-                                class="dialog-title"
+                                class="font-bold"
                                 style="margin-right: 5px; cursor: pointer"
                                 v-text="groupDialog.ref.name"
                                 @click="copyToClipboard(groupDialog.ref.name)"></span>
@@ -1133,7 +1133,7 @@
                                         class="p-0 overflow-hidden transition-shadow hover:shadow-md">
                                         <img
                                             :src="image.imageUrl"
-                                            :class="['x-link', 'x-popover-image']"
+                                            :class="['x-link', 'max-w-full', 'max-h-full']"
                                             @click="showFullscreenImageDialog(image.imageUrl)"
                                             loading="lazy" />
                                     </Card>
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index 0df5cfdc..70d535a9 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -444,7 +444,7 @@
                 <span class="name">{{ t('dialog.group_member_moderation.notes') }}</span>
                 <InputGroupTextareaField
                     v-model="note"
-                    class="extra"
+                    class="text-xs"
                     :rows="2"
                     :placeholder="t('dialog.group_member_moderation.note_placeholder')"
                     style="margin-top: 5px"
diff --git a/src/components/dialogs/SendBoopDialog.vue b/src/components/dialogs/SendBoopDialog.vue
index a229715c..de6200f3 100644
--- a/src/components/dialogs/SendBoopDialog.vue
+++ b/src/components/dialogs/SendBoopDialog.vue
@@ -50,7 +50,7 @@
                             image.versions.length > 0 &&
                             image.versions[image.versions.length - 1].file.url
                         "
-                        class="x-popover-image"
+                        class="max-w-full max-h-full"
                         style="padding: 8px">
                         <Emoji :imageUrl="image.versions[image.versions.length - 1].file.url" :size="100"></Emoji>
                     </div>
diff --git a/src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue b/src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue
index d31ba61c..d9165fe0 100644
--- a/src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue
+++ b/src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue
@@ -20,7 +20,7 @@
                     :maxlength="256"
                     :rows="6"
                     :placeholder="t('dialog.user.info.note_placeholder')"
-                    input-class="extra resize-none"
+                    input-class="text-xs resize-none"
                     class="my-2"
                     show-count />
             </template>
@@ -28,7 +28,7 @@
                 <span class="name">{{ t('dialog.user.info.memo') }}</span>
                 <InputGroupTextareaField
                     v-model="memo"
-                    class="extra mt-2"
+                    class="text-xs mt-2"
                     :rows="6"
                     :placeholder="t('dialog.user.info.memo_placeholder')"
                     input-class="resize-none min-h-0" />
diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
index 4bcafc69..1c30622a 100644
--- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue
+++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
@@ -44,7 +44,7 @@
                         </TooltipWrapper>
                     </template>
                     <span
-                        class="dialog-title"
+                        class="font-bold"
                         style="margin-left: 5px; margin-right: 5px; cursor: pointer"
                         v-text="userDialog.ref.displayName"
                         @click="copyUserDisplayName(userDialog.ref.displayName)"></span>
@@ -152,8 +152,11 @@
                         </Badge>
                     </TooltipWrapper>
                     <TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
-                        <Badge variant="outline" class="x-tag-platform-ios" style="margin-right: 5px; margin-top: 5px">
-                            <Apple class="h-4 w-4 x-tag-platform-ios" />
+                        <Badge
+                            variant="outline"
+                            class="text-[#8e8e93] border-[#8e8e93]"
+                            style="margin-right: 5px; margin-top: 5px">
+                            <Apple class="h-4 w-4 text-[#8e8e93]" />
                         </Badge>
                     </TooltipWrapper>
                     <Badge
@@ -185,7 +188,7 @@
                             <Popover>
                                 <PopoverTrigger asChild>
                                     <img
-                                        class="x-link x-user-badge"
+                                        class="x-link hover:grayscale-0"
                                         :src="badge.badgeImageUrl"
                                         style="
                                             flex: none;
@@ -196,13 +199,13 @@
                                             margin-top: 5px;
                                             margin-right: 5px;
                                         "
-                                        :class="{ 'x-user-badge-hidden': badge.hidden }"
+                                        :class="{ grayscale: badge.hidden }"
                                         loading="lazy" />
                                 </PopoverTrigger>
                                 <PopoverContent side="bottom" class="w-75">
                                     <img
                                         :src="badge.badgeImageUrl"
-                                        :class="['x-link', 'x-popover-image']"
+                                        :class="['x-link', 'max-w-full', 'max-h-full']"
                                         @click="showFullscreenImageDialog(badge.badgeImageUrl)"
                                         loading="lazy" />
                                     <br />
diff --git a/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue b/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
index d7ac5985..21789313 100644
--- a/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
+++ b/src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
@@ -25,7 +25,7 @@
                     {{ t('dialog.change_content_image.upload') }}
                 </Button>
                 <br />
-                <div class="x-change-image-item">
+                <div class="inline-block p-1 pb-0 hover:rounded-sm">
                     <img :src="previousImageUrl" class="img-size" loading="lazy" />
                 </div>
             </div>
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 67207b0d..3682906d 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -22,7 +22,7 @@
                         <div style="flex: 1">
                             <div>
                                 <span
-                                    class="dialog-title"
+                                    class="font-bold"
                                     style="margin-right: 5px; cursor: pointer"
                                     @click="copyWorldName">
                                     <Home
@@ -87,13 +87,13 @@
 
                                 <TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
                                     <Badge
-                                        class="x-tag-platform-ios"
+                                        class="text-[#8e8e93] border-[#8e8e93]"
                                         variant="outline"
                                         style="margin-right: 5px; margin-top: 5px">
-                                        <Apple class="h-4 w-4 x-tag-platform-ios" />
+                                        <Apple class="h-4 w-4 text-[#8e8e93]" />
                                         ><span
                                             v-if="worldDialog.bundleSizes['ios']"
-                                            :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']">
+                                            :class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']">
                                             {{ worldDialog.bundleSizes['ios'].fileSize }}
                                         </span>
                                     </Badge>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index d4c59bbc..6d110470 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,10 +1,20 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
+@import 'animate.css/animate.min.css';
+@import 'noty/lib/noty.css';
+@import 'remixicon/fonts/remixicon.css';
+@import 'vue-sonner/style.css';
+@import 'vue-json-pretty/lib/styles.css';
+
+@import './flags.css';
+@import './animated-emoji.css';
+@import './fonts.css';
+@import './noty.css';
+
 @custom-variant dark (&:is(.dark *));
 
 :root {
-
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);
     --card: oklch(1 0 0);
@@ -38,6 +48,38 @@
     --sidebar-accent-foreground: oklch(0.205 0 0);
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.708 0 0);
+    --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 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';
+}
+
+:root[lang='ja'] {
+    --font-primary-cjk:
+        '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';
+}
+
+:root[lang='zh-TW'] {
+    --font-primary-cjk:
+        'Noto Sans TC Variable', 'Noto Sans JP Variable',
+        'Noto Sans KR Variable', 'Noto Sans SC Variable';
 }
 
 .dark {
@@ -120,6 +162,10 @@
     }
     body {
         @apply bg-background text-foreground;
+        font-family:
+            var(--font-western), var(--font-symbol), var(--font-primary-cjk),
+            var(--font-fallback-cjk);
+        margin: 0;
     }
 }
 
diff --git a/src/styles/options.css b/src/styles/options.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/Charts/components/InstanceActivity.vue b/src/views/Charts/components/InstanceActivity.vue
index 84c3467a..aea673ce 100644
--- a/src/views/Charts/components/InstanceActivity.vue
+++ b/src/views/Charts/components/InstanceActivity.vue
@@ -189,6 +189,7 @@
 
     import InstanceActivityDetail from './InstanceActivityDetail.vue';
 
+
     import * as echarts from 'echarts';
 
     const appearanceSettingsStore = useAppearanceSettingsStore();
diff --git a/src/views/Charts/components/MutualFriends.vue b/src/views/Charts/components/MutualFriends.vue
index cb2d52c6..85eab2e9 100644
--- a/src/views/Charts/components/MutualFriends.vue
+++ b/src/views/Charts/components/MutualFriends.vue
@@ -166,6 +166,7 @@
     import { database } from '../../../service/database';
     import { userRequest } from '../../../api';
 
+
     import configRepository from '../../../service/config';
 
     import * as echarts from 'echarts';
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index de3fbb21..80022c79 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -435,7 +435,7 @@
                                                 <div class="favorites-search-card__title">
                                                     <span class="name">{{ favorite.name }}</span>
                                                 </div>
-                                                <span class="extra">{{ favorite.authorName }}</span>
+                                                <span class="text-xs">{{ favorite.authorName }}</span>
                                             </div>
                                         </div>
                                     </div>
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index 57dd7c14..2d658f00 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -292,7 +292,7 @@
                                                         :traveling="favorite.travelingToLocation"
                                                         :link="false" />
                                                 </div>
-                                                <span v-else class="extra">{{ favorite.statusDescription }}</span>
+                                                <span v-else class="text-xs">{{ favorite.statusDescription }}</span>
                                             </div>
                                         </div>
                                     </div>
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index 8f5b845d..9a927885 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -370,7 +370,7 @@
                                             </div>
                                             <div class="favorites-search-card__detail">
                                                 <span class="name">{{ favorite.name || favorite.id }}</span>
-                                                <span class="extra">
+                                                <span class="text-xs">
                                                     {{ favorite.authorName }}
                                                     <template v-if="favorite.occupants">
                                                         ({{ favorite.occupants }})
diff --git a/src/views/Favorites/components/FavoritesAvatarItem.vue b/src/views/Favorites/components/FavoritesAvatarItem.vue
index ffe6e132..92d75289 100644
--- a/src/views/Favorites/components/FavoritesAvatarItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarItem.vue
@@ -23,7 +23,7 @@
                             </TooltipWrapper>
                         </span>
                     </div>
-                    <span class="extra">{{ localFavFakeRef.authorName }}</span>
+                    <span class="text-xs">{{ localFavFakeRef.authorName }}</span>
                 </div>
             </div>
             <div class="favorites-search-card__actions">
diff --git a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
index 78ca3a69..b259b805 100644
--- a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
@@ -8,7 +8,7 @@
                 <div class="favorites-search-card__title">
                     <span class="name">{{ favorite.name }}</span>
                 </div>
-                <span class="extra">{{ favorite.authorName }}</span>
+                <span class="text-xs">{{ favorite.authorName }}</span>
             </div>
         </div>
         <div class="favorites-search-card__actions">
diff --git a/src/views/Favorites/components/FavoritesFriendItem.vue b/src/views/Favorites/components/FavoritesFriendItem.vue
index 31acfb4e..f9bad175 100644
--- a/src/views/Favorites/components/FavoritesFriendItem.vue
+++ b/src/views/Favorites/components/FavoritesFriendItem.vue
@@ -15,7 +15,7 @@
                             :traveling="favorite.ref.travelingToLocation"
                             :link="false" />
                     </div>
-                    <span v-else class="extra">{{ favorite.ref.statusDescription }}</span>
+                    <span v-else class="text-xs">{{ favorite.ref.statusDescription }}</span>
                 </div>
             </div>
             <div class="favorites-search-card__actions">
diff --git a/src/views/Favorites/components/FavoritesWorldItem.vue b/src/views/Favorites/components/FavoritesWorldItem.vue
index db765265..235dc89f 100644
--- a/src/views/Favorites/components/FavoritesWorldItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldItem.vue
@@ -29,7 +29,7 @@
                                 class="h-4 w-4" />
                         </span>
                     </div>
-                    <span class="extra">
+                    <span class="text-xs">
                         {{ props.favorite.ref.authorName }}
                         <template v-if="props.favorite.ref.occupants"> ({{ props.favorite.ref.occupants }}) </template>
                     </span>
diff --git a/src/views/Favorites/components/FavoritesWorldLocalItem.vue b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
index 03f9dd42..4ddf23ca 100644
--- a/src/views/Favorites/components/FavoritesWorldLocalItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
@@ -14,7 +14,7 @@
                     <div class="favorites-search-card__title">
                         <span class="name">{{ props.favorite.name }}</span>
                     </div>
-                    <span class="extra">
+                    <span class="text-xs">
                         {{ props.favorite.authorName }}
                         <template v-if="props.favorite.occupants"> ({{ props.favorite.occupants }}) </template>
                     </span>
diff --git a/src/views/Feed/Feed.vue b/src/views/Feed/Feed.vue
index 4bbc4185..f05a206b 100644
--- a/src/views/Feed/Feed.vue
+++ b/src/views/Feed/Feed.vue
@@ -135,9 +135,3 @@
         table.setPageSize(size);
     });
 </script>
-
-<style scoped>
-    .table-user {
-        color: var(--x-table-user-text-color) !important;
-    }
-</style>
diff --git a/src/views/FriendLog/FriendLog.vue b/src/views/FriendLog/FriendLog.vue
index 7f907575..55332071 100644
--- a/src/views/FriendLog/FriendLog.vue
+++ b/src/views/FriendLog/FriendLog.vue
@@ -210,9 +210,3 @@
         table.setPageSize(size);
     });
 </script>
-
-<style scoped>
-    .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 bab8fe1a..c19d7677 100644
--- a/src/views/FriendsLocations/FriendsLocations.vue
+++ b/src/views/FriendsLocations/FriendsLocations.vue
@@ -71,7 +71,7 @@
                         <template v-if="virtualRows[vRow.index]?.type === 'header'">
                             <header class="friend-view__instance-header">
                                 <Location
-                                    class="extra"
+                                    class="text-xs"
                                     :location="virtualRows[vRow.index].instanceId"
                                     style="display: inline" />
                                 <span class="friend-view__instance-count">{{ virtualRows[vRow.index].count }}</span>
diff --git a/src/views/GameLog/GameLog.vue b/src/views/GameLog/GameLog.vue
index 7f6faf34..05836ae1 100644
--- a/src/views/GameLog/GameLog.vue
+++ b/src/views/GameLog/GameLog.vue
@@ -202,9 +202,3 @@
         table.setPageSize(size);
     });
 </script>
-
-<style scoped>
-    .table-user {
-        color: var(--x-table-user-text-color) !important;
-    }
-</style>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 7ece8737..a2c804e5 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -138,8 +138,8 @@
                                 </div>
                                 <div class="detail">
                                     <span class="name" v-text="user.user.displayName"></span>
-                                    <span class="extra" v-text="user.user.username"></span>
-                                    <span class="extra" v-text="user.loginParams.endpoint"></span>
+                                    <span class="block truncate text-xs" v-text="user.user.username"></span>
+                                    <span class="block truncate text-xs" v-text="user.loginParams.endpoint"></span>
                                 </div>
                                 <Button
                                     class="rounded-full"
@@ -310,3 +310,64 @@
         { deep: true }
     );
 </script>
+
+<style scoped>
+    .x-login-container {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+    }
+
+    .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;
+    }
+
+    .x-saved-account-list {
+        display: grid;
+    }
+
+    .x-saved-account-list > .x-friend-item {
+        width: 100%;
+    }
+
+    .x-legal-notice-container {
+        margin-top: 8px;
+    }
+</style>
diff --git a/src/views/Notifications/Notification.vue b/src/views/Notifications/Notification.vue
index cbbc8cb3..32bf4572 100644
--- a/src/views/Notifications/Notification.vue
+++ b/src/views/Notifications/Notification.vue
@@ -507,7 +507,4 @@
         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 b886ba1f..2ea1382b 100644
--- a/src/views/PlayerList/PlayerList.vue
+++ b/src/views/PlayerList/PlayerList.vue
@@ -78,11 +78,11 @@
                             </Badge>
                         </TooltipWrapper>
                         <TooltipWrapper v-if="currentInstanceWorld.isIos" side="top" content="iOS">
-                            <Badge class="x-tag-platform-ios" variant="outline" style="margin-right: 5px"
-                                ><Apple class="h-4 w-4" />
+                            <Badge class="text-[#8e8e93] border-[#8e8e93]" variant="outline" style="margin-right: 5px"
+                                ><Apple class="h-4 w-4 text-[#8e8e93]" />
                                 <span
                                     v-if="currentInstanceWorld.bundleSizes['ios']"
-                                    :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
+                                    :class="['x-grey', 'x-tag-border-left', 'text-[#8e8e93]', 'border-[#8e8e93]']"
                                     >{{ currentInstanceWorld.bundleSizes['ios'].fileSize }}</span
                                 >
                             </Badge>
@@ -110,7 +110,7 @@
                     <div style="margin-top: 5px">
                         <span
                             v-show="currentInstanceWorld.ref.name !== currentInstanceWorld.ref.description"
-                            class="description"
+                            class="inline-block max-w-full truncate align-middle text-xs"
                             v-text="currentInstanceWorld.ref.description"></span>
                     </div>
                 </div>
@@ -118,7 +118,7 @@
                     <div class="x-friend-item" style="cursor: default">
                         <div class="detail">
                             <span class="name">{{ t('dialog.world.info.capacity') }}</span>
-                            <span class="extra"
+                            <span class="block truncate text-xs"
                                 >{{ commaNumber(currentInstanceWorld.ref.recommendedCapacity) }} ({{
                                     commaNumber(currentInstanceWorld.ref.capacity)
                                 }})</span
@@ -128,13 +128,13 @@
                     <div class="x-friend-item" style="cursor: default">
                         <div class="detail">
                             <span class="name">{{ t('dialog.world.info.last_updated') }}</span>
-                            <span class="extra">{{ formatDateFilter(currentInstanceWorld.lastUpdated, 'long') }}</span>
+                            <span class="block truncate text-xs">{{ formatDateFilter(currentInstanceWorld.lastUpdated, 'long') }}</span>
                         </div>
                     </div>
                     <div class="x-friend-item" style="cursor: default">
                         <div class="detail">
                             <span class="name">{{ t('dialog.world.info.created_at') }}</span>
-                            <span class="extra">{{
+                            <span class="block truncate text-xs">{{
                                 formatDateFilter(currentInstanceWorld.ref.created_at, 'long')
                             }}</span>
                         </div>
@@ -309,15 +309,3 @@
         getCurrentInstanceUserList();
     });
 </script>
-
-<style>
-    .description {
-        font-size: 12px;
-        display: inline-block;
-        max-width: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-    }
-</style>
diff --git a/src/views/PlayerList/columns.jsx b/src/views/PlayerList/columns.jsx
index 4f1f39f4..e215413e 100644
--- a/src/views/PlayerList/columns.jsx
+++ b/src/views/PlayerList/columns.jsx
@@ -115,14 +115,7 @@ export const createColumns = ({
                 const style = randomUserColours?.value
                     ? { color: userRef?.$userColour }
                     : null;
-                return (
-                    <span
-                        class="text-(--x-table-user-text-color)"
-                        style={style}
-                    >
-                        {userRef?.displayName ?? ''}
-                    </span>
-                );
+                return <span style={style}>{userRef?.displayName ?? ''}</span>;
             }
         },
         {
diff --git a/src/views/PlayerList/components/PhotonEventTable.vue b/src/views/PlayerList/components/PhotonEventTable.vue
index ea8b02a9..39ea00f1 100644
--- a/src/views/PlayerList/components/PhotonEventTable.vue
+++ b/src/views/PlayerList/components/PhotonEventTable.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="photon-event-table">
+    <div class="mt-5">
         <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap">
             <Select
                 :model-value="photonEventTableTypeFilter"
diff --git a/src/views/Search/Search.vue b/src/views/Search/Search.vue
index 444a079c..7593cf3d 100644
--- a/src/views/Search/Search.vue
+++ b/src/views/Search/Search.vue
@@ -43,12 +43,12 @@
                                 <span class="name" v-text="user.displayName"></span>
                                 <span
                                     v-if="randomUserColours"
-                                    class="extra"
+                                    class="block truncate text-xs"
                                     :class="user.$trustClass"
                                     v-text="user.$trustLevel"></span>
                                 <span
                                     v-else
-                                    class="extra"
+                                    class="block truncate text-xs"
                                     :style="{ color: user.$userColour }"
                                     v-text="user.$trustLevel"></span>
                             </div>
@@ -111,10 +111,10 @@
                             </div>
                             <div class="detail">
                                 <span class="name" v-text="world.name"></span>
-                                <span v-if="world.occupants" class="extra"
+                                <span v-if="world.occupants" class="block truncate text-xs"
                                     >{{ world.authorName }} ({{ world.occupants }})</span
                                 >
-                                <span v-else class="extra" v-text="world.authorName"></span>
+                                <span v-else class="block truncate text-xs" v-text="world.authorName"></span>
                             </div>
                         </div>
                     </div>
@@ -262,14 +262,14 @@
                                 <span class="name" v-text="avatar.name"></span>
                                 <span
                                     v-if="avatar.releaseStatus === 'public'"
-                                    class="extra"
+                                    class="block truncate text-xs"
                                     v-text="avatar.releaseStatus"></span>
                                 <span
                                     v-else-if="avatar.releaseStatus === 'private'"
-                                    class="extra"
+                                    class="block truncate text-xs"
                                     v-text="avatar.releaseStatus"></span>
-                                <span v-else class="extra" v-text="avatar.releaseStatus"></span>
-                                <span class="extra" v-text="avatar.authorName"></span>
+                                <span v-else class="block truncate text-xs" v-text="avatar.releaseStatus"></span>
+                                <span class="block truncate text-xs" v-text="avatar.authorName"></span>
                             </div>
                         </div>
                     </div>
@@ -322,7 +322,7 @@
                                         >{{ group.shortCode }}.{{ group.discriminator }}</span
                                     >
                                 </span>
-                                <span class="extra" v-text="group.description"></span>
+                                <span class="block truncate text-xs" v-text="group.description"></span>
                             </div>
                         </div>
                     </div>
diff --git a/src/views/Settings/Settings.vue b/src/views/Settings/Settings.vue
index 8e15448b..feb360ec 100644
--- a/src/views/Settings/Settings.vue
+++ b/src/views/Settings/Settings.vue
@@ -38,6 +38,7 @@
     import { TabsUnderline } from '@/components/ui/tabs';
     import { useI18n } from 'vue-i18n';
 
+
     import AdvancedTab from './components/Tabs/AdvancedTab.vue';
     import AppearanceTab from './components/Tabs/AppearanceTab.vue';
     import DiscordPresenceTab from './components/Tabs/DiscordPresenceTab.vue';
diff --git a/src/views/Settings/components/Tabs/AdvancedTab.vue b/src/views/Settings/components/Tabs/AdvancedTab.vue
index 046c40ad..b811fb6b 100644
--- a/src/views/Settings/components/Tabs/AdvancedTab.vue
+++ b/src/views/Settings/components/Tabs/AdvancedTab.vue
@@ -90,10 +90,10 @@
                 <div class="x-friend-item">
                     <div class="detail" @click="getVisits">
                         <span class="name">{{ t('view.profile.game_info.online_users') }}</span>
-                        <span v-if="visits" class="extra">{{
+                        <span v-if="visits" class="block truncate text-xs">{{
                             t('view.profile.game_info.user_online', { count: visits })
                         }}</span>
-                        <span v-else class="extra">{{ t('view.profile.game_info.refresh') }}</span>
+                        <span v-else class="block truncate text-xs">{{ t('view.profile.game_info.refresh') }}</span>
                     </div>
                 </div>
             </div>
diff --git a/src/views/Settings/components/Tabs/AppearanceTab.vue b/src/views/Settings/components/Tabs/AppearanceTab.vue
index 44206501..592a3d20 100644
--- a/src/views/Settings/components/Tabs/AppearanceTab.vue
+++ b/src/views/Settings/components/Tabs/AppearanceTab.vue
@@ -356,49 +356,49 @@
                         :model-value="trustColor.untrusted"
                         :presets="['#CCCCCC']"
                         @change="updateTrustColor('untrusted', $event)" />
-                    <span class="color-picker x-tag-untrusted">Visitor</span>
+                    <span class="text-[18px] align-top x-tag-untrusted">Visitor</span>
                 </div>
                 <div>
                     <PresetColorPicker
                         :model-value="trustColor.basic"
                         :presets="['#1778ff']"
                         @change="updateTrustColor('basic', $event)" />
-                    <span class="color-picker x-tag-basic">New User</span>
+                    <span class="text-[18px] align-top x-tag-basic">New User</span>
                 </div>
                 <div>
                     <PresetColorPicker
                         :model-value="trustColor.known"
                         :presets="['#2bcf5c']"
                         @change="updateTrustColor('known', $event)" />
-                    <span class="color-picker x-tag-known">User</span>
+                    <span class="text-[18px] align-top x-tag-known">User</span>
                 </div>
                 <div>
                     <PresetColorPicker
                         :model-value="trustColor.trusted"
                         :presets="['#ff7b42']"
                         @change="updateTrustColor('trusted', $event)" />
-                    <span class="color-picker x-tag-trusted">Known User</span>
+                    <span class="text-[18px] align-top x-tag-trusted">Known User</span>
                 </div>
                 <div>
                     <PresetColorPicker
                         :model-value="trustColor.veteran"
                         :presets="['#b18fff', '#8143e6', '#ff69b4', '#b52626', '#ffd000', '#abcdef']"
                         @change="updateTrustColor('veteran', $event)" />
-                    <span class="color-picker x-tag-veteran">Trusted User</span>
+                    <span class="text-[18px] align-top x-tag-veteran">Trusted User</span>
                 </div>
                 <div>
                     <PresetColorPicker
                         :model-value="trustColor.vip"
                         :presets="['#ff2626']"
                         @change="updateTrustColor('vip', $event)" />
-                    <span class="color-picker x-tag-vip">VRChat Team</span>
+                    <span class="text-[18px] align-top x-tag-vip">VRChat Team</span>
                 </div>
                 <div>
                     <PresetColorPicker
                         :model-value="trustColor.troll"
                         :presets="['#782f2f']"
                         @change="updateTrustColor('troll', $event)" />
-                    <span class="color-picker x-tag-troll">Nuisance</span>
+                    <span class="text-[18px] align-top x-tag-troll">Nuisance</span>
                 </div>
             </div>
         </div>
diff --git a/src/views/Settings/components/Tabs/GeneralTab.vue b/src/views/Settings/components/Tabs/GeneralTab.vue
index 9ea3000a..2f13976d 100644
--- a/src/views/Settings/components/Tabs/GeneralTab.vue
+++ b/src/views/Settings/components/Tabs/GeneralTab.vue
@@ -6,14 +6,14 @@
                 <div class="x-friend-item" style="cursor: default">
                     <div class="detail">
                         <span class="name">{{ t('view.settings.general.general.version') }}</span>
-                        <span class="extra" v-text="appVersion"></span>
+                        <span class="block truncate text-xs" v-text="appVersion"></span>
                     </div>
                 </div>
                 <div class="x-friend-item" @click="checkForVRCXUpdate">
                     <div class="detail">
                         <span class="name">{{ t('view.settings.general.general.latest_app_version') }}</span>
-                        <span v-if="latestAppVersion" class="extra" v-text="latestAppVersion"></span>
-                        <span v-else class="extra">{{
+                        <span v-if="latestAppVersion" class="block truncate text-xs" v-text="latestAppVersion"></span>
+                        <span v-else class="block truncate text-xs">{{
                             t('view.settings.general.general.latest_app_version_refresh')
                         }}</span>
                     </div>
@@ -21,13 +21,13 @@
                 <div class="x-friend-item" @click="openExternalLink(links.github)">
                     <div class="detail">
                         <span class="name">{{ t('view.settings.general.general.repository_url') }}</span>
-                        <span v-once class="extra">{{ links.github }}</span>
+                        <span v-once class="block truncate text-xs">{{ links.github }}</span>
                     </div>
                 </div>
                 <div class="x-friend-item" @click="openExternalLink(links.discord)">
                     <div class="detail">
                         <span class="name">{{ t('view.settings.general.general.support') }}</span>
-                        <span v-once class="extra">{{ links.discord }}</span>
+                        <span v-once class="block truncate text-xs">{{ links.discord }}</span>
                     </div>
                 </div>
             </div>
diff --git a/src/views/Settings/dialogs/FeedFiltersDialog.vue b/src/views/Settings/dialogs/FeedFiltersDialog.vue
index 73826ad7..64d247f3 100644
--- a/src/views/Settings/dialogs/FeedFiltersDialog.vue
+++ b/src/views/Settings/dialogs/FeedFiltersDialog.vue
@@ -4,9 +4,9 @@
             <DialogHeader>
                 <DialogTitle>{{ dialogTitle }}</DialogTitle>
             </DialogHeader>
-            <div class="toggle-list" style="height: 75vh; overflow-y: auto">
-                <div v-for="setting in currentOptions" :key="setting.key" class="toggle-item">
-                    <span class="toggle-name"
+            <div class="text-[15px] h-[75vh] overflow-y-auto">
+                <div v-for="setting in currentOptions" :key="setting.key" class="mb-[5px] flex items-center">
+                    <span class="inline-block min-w-[190px] pr-2.5 text-right"
                         >{{ setting.name
                         }}<TooltipWrapper
                             v-if="setting.tooltip"
@@ -38,11 +38,14 @@
 
                 <template v-if="photonLoggingEnabled">
                     <br />
-                    <div class="toggle-item">
-                        <span class="toggle-name">Photon Event Logging</span>
+                    <div class="mb-[5px] flex items-center">
+                        <span class="inline-block min-w-[190px] pr-2.5 text-right">Photon Event Logging</span>
                     </div>
-                    <div v-for="setting in photonFeedFiltersOptions" :key="setting.key" class="toggle-item">
-                        <span class="toggle-name">{{ setting.name }}</span>
+                    <div
+                        v-for="setting in photonFeedFiltersOptions"
+                        :key="setting.key"
+                        class="mb-[5px] flex items-center">
+                        <span class="inline-block min-w-[190px] pr-2.5 text-right">{{ setting.name }}</span>
                         <ToggleGroup
                             type="single"
                             required
@@ -154,11 +157,3 @@
         emit('update:feedFiltersDialogMode', '');
     }
 </script>
-
-<style scoped>
-    .toggle-list .toggle-item {
-        display: flex;
-        align-items: center;
-        margin-bottom: 8px;
-    }
-</style>
diff --git a/src/views/Sidebar/Sidebar.vue b/src/views/Sidebar/Sidebar.vue
index 65c170d2..f33b9c2a 100644
--- a/src/views/Sidebar/Sidebar.vue
+++ b/src/views/Sidebar/Sidebar.vue
@@ -26,16 +26,16 @@
                                             <span class="name" :style="{ color: item.ref.$userColour }">{{
                                                 item.ref.displayName
                                             }}</span>
-                                            <span v-if="!item.ref.isFriend" class="extra"></span>
-                                            <span v-else-if="item.ref.state === 'offline'" class="extra">{{
+                                            <span v-if="!item.ref.isFriend" class="block truncate text-xs"></span>
+                                            <span v-else-if="item.ref.state === 'offline'" class="block truncate text-xs">{{
                                                 t('side_panel.search_result_active')
                                             }}</span>
-                                            <span v-else-if="item.ref.state === 'active'" class="extra">{{
+                                            <span v-else-if="item.ref.state === 'active'" class="block truncate text-xs">{{
                                                 t('side_panel.search_result_offline')
                                             }}</span>
                                             <Location
                                                 v-else
-                                                class="extra"
+                                                class="text-xs"
                                                 :location="item.ref.location"
                                                 :traveling="item.ref.travelingToLocation"
                                                 :link="false" />
@@ -178,6 +178,16 @@
 </script>
 
 <style scoped>
+    .x-aside-container {
+        display: flex;
+        flex: none;
+        flex-direction: column;
+        padding: 13px 5px 5px 5px;
+        order: 99;
+        height: 100%;
+        box-sizing: border-box;
+    }
+
     .sidebar-tab-count {
         font-size: 12px;
         margin-left: 10px;
diff --git a/src/views/Sidebar/components/FriendItem.vue b/src/views/Sidebar/components/FriendItem.vue
index 0df6442d..121391f6 100644
--- a/src/views/Sidebar/components/FriendItem.vue
+++ b/src/views/Sidebar/components/FriendItem.vue
@@ -14,23 +14,23 @@
                     >{{ friend.ref.displayName }}{{ isGroupByInstance && friend.isVIP ? ' ⭐' : '' }}</span
                 >
 
-                <span v-if="isFriendActiveOrOffline" class="extra">{{ friend.ref.statusDescription }}</span>
+                <span v-if="isFriendActiveOrOffline" class="block truncate text-xs">{{ friend.ref.statusDescription }}</span>
                 <template v-else>
-                    <div v-if="friend.pendingOffline" class="extra">
+                    <div v-if="friend.pendingOffline" class="text-xs">
                         <AlertTriangle class="inline-block" /> {{ t('side_panel.pending_offline') }}
                     </div>
                     <template v-else-if="isGroupByInstance">
                         <div class="flex items-center">
                             <Loader2 v-if="isFriendTraveling" class="is-loading" style="margin-right: 3px" />
                             <Timer
-                                class="extra"
+                                class="text-xs"
                                 :epoch="epoch"
                                 :style="
                                     isFriendTraveling ? { display: 'inline-block', overflow: 'unset' } : undefined
                                 " />
                         </div>
                     </template>
-                    <Location v-else class="extra" :location="locationProp" :traveling="travelingProp" :link="false" />
+                    <Location v-else class="text-xs" :location="locationProp" :traveling="travelingProp" :link="false" />
                 </template>
             </div>
         </template>
@@ -89,23 +89,3 @@
     const locationProp = computed(() => props.friend.ref?.location || '');
     const travelingProp = computed(() => props.friend.ref?.travelingToLocation || '');
 </script>
-
-<style>
-    .skeleton {
-        height: 40px;
-        width: 100%;
-        & > div {
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            & > div {
-                width: calc(100% - 48px);
-                height: 100%;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-            }
-        }
-    }
-</style>
diff --git a/src/views/Sidebar/components/FriendsSidebar.vue b/src/views/Sidebar/components/FriendsSidebar.vue
index 77dee4d6..e25bb640 100644
--- a/src/views/Sidebar/components/FriendsSidebar.vue
+++ b/src/views/Sidebar/components/FriendsSidebar.vue
@@ -19,7 +19,7 @@
                     <span class="name" :style="{ color: currentUser.$userColour }">{{ currentUser.displayName }}</span>
                     <Location
                         v-if="isGameRunning && !gameLogDisabled"
-                        class="extra"
+                        class="text-xs"
                         :location="lastLocation.location"
                         :traveling="lastLocationDestination"
                         :link="false" />
@@ -27,12 +27,12 @@
                         v-else-if="
                             isRealInstance(currentUser.$locationTag) || isRealInstance(currentUser.$travelingToLocation)
                         "
-                        class="extra"
+                        class="text-xs"
                         :location="currentUser.$locationTag"
                         :traveling="currentUser.$travelingToLocation"
                         :link="false" />
 
-                    <span v-else class="extra">{{ currentUser.statusDescription }}</span>
+                    <span v-else class="text-xs">{{ currentUser.statusDescription }}</span>
                 </div>
             </div>
         </div>
@@ -54,8 +54,8 @@
                 <div v-for="group in vipFriendsDivideByGroup" :key="group[0].key">
                     <transition name="el-fade-in-linear">
                         <div v-show="group[0].groupName !== ''" style="margin-bottom: 3px">
-                            <span class="extra">{{ group[0].groupName }}</span>
-                            <span class="extra" style="margin-left: 5px">{{ `(${group.length})` }}</span>
+                            <span class="text-xs">{{ group[0].groupName }}</span>
+                            <span class="text-xs" style="margin-left: 5px">{{ `(${group.length})` }}</span>
                         </div>
                     </transition>
                     <div v-if="group.length" style="margin-bottom: 10px">
@@ -91,10 +91,10 @@
                 <div v-for="friendArr in friendsInSameInstance" :key="friendArr[0].ref.$location.tag">
                     <div class="mb-1 flex items-center">
                         <Location
-                            class="extra text-muted-foreground!"
+                            class="text-xs text-muted-foreground"
                             :location="getFriendsLocations(friendArr)"
                             style="display: inline" />
-                        <span class="extra" style="margin-left: 5px">{{ `(${friendArr.length})` }}</span>
+                        <span class="text-xs" style="margin-left: 5px">{{ `(${friendArr.length})` }}</span>
                     </div>
                     <div v-if="friendArr && friendArr.length">
                         <friend-item
diff --git a/src/views/Sidebar/components/GroupsSidebar.vue b/src/views/Sidebar/components/GroupsSidebar.vue
index dc8b656f..192204e4 100644
--- a/src/views/Sidebar/components/GroupsSidebar.vue
+++ b/src/views/Sidebar/components/GroupsSidebar.vue
@@ -27,7 +27,7 @@
                                     >({{ ref.instance.userCount }}/{{ ref.instance.capacity }})</span
                                 >
                             </span>
-                            <Location class="extra" :location="ref.instance.location" :link="false" />
+                            <Location class="text-xs" :location="ref.instance.location" :link="false" />
                         </div>
                     </template>
                 </div>
diff --git a/src/views/Tools/Gallery.vue b/src/views/Tools/Gallery.vue
index fe58abc4..38cff640 100644
--- a/src/views/Tools/Gallery.vue
+++ b/src/views/Tools/Gallery.vue
@@ -90,12 +90,12 @@
                         style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
                         <template v-if="image.versions && image.versions.length > 0">
                             <div
-                                class="vrcplus-icon"
+                                class="h-[200px] w-[200px] rounded-[20px] overflow-hidden"
                                 v-if="image.versions[image.versions.length - 1].file.url"
                                 @click="setProfilePicOverride(image.id)"
-                                :class="{ 'current-vrcplus-icon': compareCurrentProfilePic(image.id) }">
+                                :class="compareCurrentProfilePic(image.id) ? 'cursor-default' : 'cursor-pointer'">
                                 <img
-                                    class="avatar"
+                                    class="h-full w-full rounded-[15px] object-cover"
                                     :src="image.versions[image.versions.length - 1].file.url"
                                     loading="lazy" />
                             </div>
@@ -163,12 +163,12 @@
                         style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
                         <template v-if="image.versions && image.versions.length > 0"
                             ><div
-                                class="vrcplus-icon"
+                                class="h-[200px] w-[200px] rounded-[20px] overflow-hidden"
                                 v-if="image.versions[image.versions.length - 1].file.url"
                                 @click="setVRCPlusIcon(image.id)"
-                                :class="{ 'current-vrcplus-icon': compareCurrentVRCPlusIcon(image.id) }">
+                                :class="compareCurrentVRCPlusIcon(image.id) ? 'cursor-default' : 'cursor-pointer'">
                                 <img
-                                    class="avatar"
+                                    class="h-full w-full rounded-[15px] object-cover"
                                     :src="image.versions[image.versions.length - 1].file.url"
                                     loading="lazy" />
                             </div>
@@ -301,9 +301,8 @@
                         style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
                         <template v-if="image.versions && image.versions.length > 0">
                             <div
-                                class="vrcplus-icon"
+                                class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
                                 v-if="image.versions[image.versions.length - 1].file.url"
-                                style="overflow: hidden"
                                 @click="
                                     showFullscreenImageDialog(
                                         image.versions[image.versions.length - 1].file.url,
@@ -383,12 +382,11 @@
                         style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
                         <template v-if="image.versions && image.versions.length > 0">
                             <div
-                                class="vrcplus-icon"
+                                class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
                                 v-if="image.versions[image.versions.length - 1].file.url"
-                                style="overflow: hidden"
                                 @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)">
                                 <img
-                                    class="avatar"
+                                    class="h-full w-full rounded-[15px] object-cover"
                                     :src="image.versions[image.versions.length - 1].file.url"
                                     loading="lazy" />
                             </div>
@@ -459,35 +457,30 @@
                         :key="image.id"
                         style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
                         <div
-                            class="vrcplus-icon"
-                            style="overflow: hidden"
+                            class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
                             @click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))">
-                            <img class="avatar" :src="image.files.image" loading="lazy" />
+                            <img class="h-full w-full rounded-[15px] object-cover" :src="image.files.image" loading="lazy" />
                         </div>
                         <div style="margin-top: 5px; width: 208px">
-                            <span
-                                class="x-ellipsis"
-                                v-if="image.note"
-                                v-text="image.note"
-                                style="display: block"></span>
-                            <span v-else style="display: block">&nbsp;</span>
+                            <span class="block truncate" v-if="image.note" v-text="image.note"></span>
+                            <span v-else class="block">&nbsp;</span>
                             <Location
-                                class="x-ellipsis"
+                                class="block truncate"
                                 v-if="image.worldId"
                                 :location="image.worldId"
                                 :hint="image.worldName"
-                                style="display: block" />
-                            <span v-else style="display: block">&nbsp;</span>
+                                />
+                            <span v-else class="block">&nbsp;</span>
                             <DisplayName
-                                class="x-ellipsis gallery-meta"
+                                class="block truncate gallery-meta"
                                 v-if="image.authorId"
                                 :userid="image.authorId"
                                 :hint="image.authorName" />
                             <span v-else class="gallery-meta">&nbsp;</span>
-                            <span v-if="image.createdAt" class="x-ellipsis gallery-meta gallery-meta--small">
+                            <span v-if="image.createdAt" class="block truncate gallery-meta gallery-meta--small">
                                 {{ formatDateFilter(image.createdAt, 'long') }}
                             </span>
-                            <span v-else style="display: block">&nbsp;</span>
+                            <span v-else class="block">&nbsp;</span>
                         </div>
                         <div class="float-right">
                             <Button
@@ -531,18 +524,18 @@
                         v-for="item in inventoryTable"
                         :key="item.id"
                         style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
-                        <div class="vrcplus-icon" style="overflow: hidden; cursor: default">
-                            <img class="avatar" :src="item.imageUrl" loading="lazy" />
+                        <div class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-default">
+                            <img class="h-full w-full rounded-[15px] object-cover" :src="item.imageUrl" loading="lazy" />
                         </div>
                         <div style="margin-top: 5px; width: 208px">
-                            <span class="x-ellipsis" v-text="item.name" style="display: block"></span>
+                            <span class="block truncate" v-text="item.name"></span>
                             <span
                                 v-if="item.description"
-                                class="x-ellipsis"
+                                class="block truncate"
                                 v-text="item.description"
-                                style="display: block"></span>
-                            <span v-else style="display: block">&nbsp;</span>
-                            <span class="x-ellipsis gallery-meta gallery-meta--small">
+                                ></span>
+                            <span v-else class="block">&nbsp;</span>
+                            <span class="block truncate gallery-meta gallery-meta--small">
                                 {{ formatDateFilter(item.created_at, 'long') }}
                             </span>
                             <span v-if="item.itemType === 'prop'">{{ t('dialog.gallery_icons.item') }}</span>
diff --git a/src/views/Tools/Tools.vue b/src/views/Tools/Tools.vue
index 9a5ffd53..c970d593 100644
--- a/src/views/Tools/Tools.vue
+++ b/src/views/Tools/Tools.vue
@@ -220,6 +220,7 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
+
     import { useFriendStore, useGalleryStore } from '../../stores';
 
     const GroupCalendarDialog = defineAsyncComponent(() => import('./dialogs/GroupCalendarDialog.vue'));
diff --git a/src/vite.config.js b/src/vite.config.js
index 80982e75..c976ae69 100644
--- a/src/vite.config.js
+++ b/src/vite.config.js
@@ -20,7 +20,6 @@ function getAssetLanguage(assetId) {
     }
 
     const language =
-        assetId.split('element-plus/es/locale/lang/')[1]?.split('.')[0] ||
         // Font assets, e.g., noto-sans-jp-regular.woff2 mapped to language code.
         {
             jp: 'ja',