diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
index 0238e8d9..c7c34ec5 100644
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -804,7 +804,7 @@
         right: 0;
         width: 6px;
         height: 6px;
-        background-color: #ef4444;
+        background-color: var(--color-red-500);
         border-radius: 50%;
         transform: translateY(-50%);
     }
@@ -815,7 +815,7 @@
         right: 0;
         width: 6px;
         height: 6px;
-        background-color: #ef4444;
+        background-color: var(--color-red-500);
         border-radius: 50%;
         transform: translateY(-50%);
     }
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index f819ffa0..7658a1cd 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -616,7 +616,7 @@
 
     .ws-sparkline {
         flex-shrink: 0;
-        border-radius: 2px;
+        border-radius: var(--radius-sm);
     }
 
     .status-bar-zoom-field {
diff --git a/src/components/dialogs/GroupDialog/GallerySelectDialog.vue b/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
index a501cc70..6f9596d6 100644
--- a/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
+++ b/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
@@ -7,7 +7,7 @@
 
             <div>
                 <span>{{ t('dialog.gallery_select.gallery') }}</span>
-                <span class="ml-1.5" style="color: #909399; font-size: 12px">{{ galleryTable.length }}/64</span>
+                <span class="ml-1.5 text-muted-foreground" style="font-size: 12px">{{ galleryTable.length }}/64</span>
                 <br />
                 <input
                     id="GalleryUploadButton"
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index cc77b812..5afc73c9 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -685,7 +685,8 @@
                         </div>
                         <div
                             v-if="groupDialog.ref.membershipStatus === 'member'"
-                            style="width: 100%; margin-top: 8px; border-top: 1px solid #e4e7ed14">
+                            class="border-t border-border"
+                            style="width: 100%; margin-top: 8px">
                             <div style="width: 100%; display: flex; margin-top: 8px">
                                 <div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
                                     <div class="flex-1 overflow-hidden">
@@ -1109,7 +1110,7 @@
                             v-slot:[`label-${index}`]>
                             <span style="font-weight: bold; font-size: 16px" v-text="gallery.name" />
                             <i class="x-status-icon" style="margin-left: 6px" :class="groupGalleryStatus(gallery)" />
-                            <span style="color: #909399; font-size: 12px; margin-left: 6px">{{
+                            <span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
                                 groupDialog.galleries[gallery.id] ? groupDialog.galleries[gallery.id].length : 0
                             }}</span>
                         </template>
@@ -1117,7 +1118,7 @@
                             v-for="(gallery, index) in groupDialog.ref.galleries"
                             :key="`content-${index}`"
                             v-slot:[String(index)]>
-                            <span style="color: #c7c7c7; padding: 8px" v-text="gallery.description" />
+                            <span class="text-muted-foreground" style="padding: 8px" v-text="gallery.description" />
                             <div
                                 style="
                                     display: grid;
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index d7fd682e..fa5ac303 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -206,7 +206,7 @@
                                     <span style="font-weight: bold; font-size: 16px">{{
                                         t('dialog.group_member_moderation.sent_invites')
                                     }}</span>
-                                    <span style="color: #909399; font-size: 12px; margin-left: 6px">{{
+                                    <span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
                                         groupInvitesModerationTable.data.length
                                     }}</span>
                                 </template>
@@ -214,7 +214,7 @@
                                     <span style="font-weight: bold; font-size: 16px">{{
                                         t('dialog.group_member_moderation.join_requests')
                                     }}</span>
-                                    <span style="color: #909399; font-size: 12px; margin-left: 6px">{{
+                                    <span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
                                         groupJoinRequestsModerationTable.data.length
                                     }}</span>
                                 </template>
@@ -222,7 +222,7 @@
                                     <span style="font-weight: bold; font-size: 16px">{{
                                         t('dialog.group_member_moderation.blocked_requests')
                                     }}</span>
-                                    <span style="color: #909399; font-size: 12px; margin-left: 6px">{{
+                                    <span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
                                         groupBlockedModerationTable.data.length
                                     }}</span>
                                 </template>
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index f7e58fa0..6f77ee61 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -21,9 +21,9 @@
             <template #Info>
                 <template v-if="isFriendOnline(userDialog.friend) || currentUser.id === userDialog.id">
                     <div
-                        class="mb-2 pb-2"
+                        class="mb-2 pb-2 border-b border-border"
                         v-if="userDialog.ref.location"
-                        style="display: flex; flex-direction: column; border-bottom: 1px solid #e4e7ed14">
+                        style="display: flex; flex-direction: column">
                         <div style="flex: none">
                             <template v-if="isRealInstance(userDialog.$location.tag)">
                                 <InstanceActionBar
@@ -185,7 +185,7 @@
                                     <Avatar
                                         class="cursor-pointer size-15! rounded-lg!"
                                         :style="{
-                                            background: userDialog.isRepresentedGroupLoading ? '#f5f7fa' : ''
+                                            background: userDialog.isRepresentedGroupLoading ? 'var(--muted)' : ''
                                         }"
                                         @click="showFullscreenImageDialog(userDialog.representedGroup.iconUrl)">
                                         <AvatarImage
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 229f0bbe..3851205c 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -228,7 +228,7 @@
 
 ::-webkit-scrollbar-thumb {
     background-color: var(--border);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     border: 2px solid transparent;
     background-clip: content-box;
 }
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index 9c8bad77..9ebda1a5 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -1784,7 +1784,7 @@
     .group-item__placeholder-tag {
         width: 64px;
         height: 18px;
-        border-radius: 999px;
+        border-radius: var(--radius-full);
     }
 
     .group-item--new {
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index b89d2e9f..4cb3ae16 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -1658,7 +1658,7 @@
     .group-item__placeholder-tag {
         width: 64px;
         height: 18px;
-        border-radius: 999px;
+        border-radius: var(--radius-full);
     }
 
     .group-item--new {
@@ -1759,7 +1759,7 @@
 
     .favorites-content__scroll--local::-webkit-scrollbar-thumb {
         background-color: var(--border);
-        border-radius: 999px;
+        border-radius: var(--radius-full);
         border: 2px solid transparent;
         background-clip: content-box;
     }
diff --git a/src/views/FriendsLocations/components/FriendsLocationsCard.vue b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
index 93cf60ca..f96d1391 100644
--- a/src/views/FriendsLocations/components/FriendsLocationsCard.vue
+++ b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
@@ -266,7 +266,7 @@
         right: calc(8px * var(--card-scale));
         inline-size: calc(12px * var(--card-scale));
         block-size: calc(12px * var(--card-scale));
-        border-radius: 999px;
+        border-radius: var(--radius-full);
         pointer-events: none;
     }
 
diff --git a/src/views/Search/Search.vue b/src/views/Search/Search.vue
index b90702cf..9b8e0ae3 100644
--- a/src/views/Search/Search.vue
+++ b/src/views/Search/Search.vue
@@ -334,9 +334,9 @@
                                     <span v-text="group.name"></span>
                                     <span style="margin-left: 6px; font-weight: normal">({{ group.memberCount }})</span>
                                     <span
+                                        class="text-muted-foreground"
                                         style="
                                             margin-left: 6px;
-                                            color: #909399;
                                             font-weight: normal;
                                             font-family: monospace;
                                             font-size: 12px;
diff --git a/src/views/Settings/components/Tabs/GeneralTab.vue b/src/views/Settings/components/Tabs/GeneralTab.vue
index 99e227ad..4a7f1dba 100644
--- a/src/views/Settings/components/Tabs/GeneralTab.vue
+++ b/src/views/Settings/components/Tabs/GeneralTab.vue
@@ -165,7 +165,7 @@
                     @click="openExternalLink('https://github.com/vrcx-team/VRCX/graphs/contributors')" />
             </div>
         </div>
-        <div class="options-container" style="margin-top: 45px; border-top: 1px solid #eee; padding-top: 30px">
+        <div class="options-container border-t border-border" style="margin-top: 45px; padding-top: 30px">
             <span class="header">{{ t('view.settings.general.legal_notice.header') }}</span>
             <div class="options-container-item" style="display: block">
                 <p>
diff --git a/src/views/Tools/components/GroupCalendarMonth.vue b/src/views/Tools/components/GroupCalendarMonth.vue
index e70c4d85..12b38473 100644
--- a/src/views/Tools/components/GroupCalendarMonth.vue
+++ b/src/views/Tools/components/GroupCalendarMonth.vue
@@ -230,7 +230,7 @@
         transform: translateX(-50%);
         width: 6px;
         height: 6px;
-        border-radius: 9999px;
+        border-radius: var(--radius-full);
         background-color: var(--group-calendar-event-dot, #ef4444);
         z-index: 5;
         pointer-events: none;