diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index 4be58114..9014396f 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -13,7 +13,7 @@
                         :src="avatarDialog.ref.thumbnailImageUrl"
                         class="cursor-pointer"
                         @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
-                        style="width: 160px; height: 120px; border-radius: 12px; object-fit: cover"
+                        style="width: 160px; height: 120px; border-radius: var(--radius-xl); object-fit: cover"
                         loading="lazy" />
                 </div>
                 <div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 19cf59b2..3877e652 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -12,7 +12,7 @@
                     <img
                         v-if="!groupDialog.loading"
                         :src="groupDialog.ref.iconUrl"
-                        style="width: 120px; height: 120px; border-radius: 12px"
+                        style="width: 120px; height: 120px; border-radius: var(--radius-xl)"
                         class="cursor-pointer"
                         @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
                         loading="lazy" />
@@ -349,7 +349,13 @@
                             v-if="!groupDialog.loading"
                             :src="groupDialog.ref.bannerUrl"
                             class="cursor-pointer"
-                            style="flex: none; width: 100%; aspect-ratio: 6/1; object-fit: cover; border-radius: 4px"
+                            style="
+                                flex: none;
+                                width: 100%;
+                                aspect-ratio: 6/1;
+                                object-fit: cover;
+                                border-radius: var(--radius-md);
+                            "
                             @click="showFullscreenImageDialog(groupDialog.ref.bannerUrl)"
                             loading="lazy" />
                     </div>
@@ -420,7 +426,7 @@
                                             flex: none;
                                             width: 60px;
                                             height: 60px;
-                                            border-radius: 4px;
+                                            border-radius: var(--radius-md);
                                             object-fit: cover;
                                         "
                                         @click="showFullscreenImageDialog(groupDialog.announcement.imageUrl)"
@@ -774,7 +780,7 @@
                                                 flex: none;
                                                 width: 60px;
                                                 height: 60px;
-                                                border-radius: 4px;
+                                                border-radius: var(--radius-md);
                                                 object-fit: cover;
                                             "
                                             @click="showFullscreenImageDialog(post.imageUrl)"
diff --git a/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue b/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
index 15688525..87d29c6f 100644
--- a/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
@@ -91,7 +91,7 @@
                                             flex: none;
                                             width: 60px;
                                             height: 60px;
-                                            border-radius: 4px;
+                                            border-radius: var(--radius-md);
                                             object-fit: cover;
                                         "
                                         @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)"
diff --git a/src/components/dialogs/SendBoopDialog.vue b/src/components/dialogs/SendBoopDialog.vue
index 5c25fe5d..5d905875 100644
--- a/src/components/dialogs/SendBoopDialog.vue
+++ b/src/components/dialogs/SendBoopDialog.vue
@@ -37,7 +37,7 @@
                     v-for="image in emojiTable"
                     :key="image.id"
                     :class="image.id === fileId ? 'x-image-selected' : ''"
-                    style="cursor: pointer; border: 1px solid transparent; border-radius: 8px"
+                    style="cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-xl)"
                     @click="fileId = image.id">
                     <div
                         v-if="
diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
index d6309eb6..059602da 100644
--- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue
+++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
@@ -8,14 +8,14 @@
                 "
                 class="cursor-pointer"
                 :src="userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride"
-                style="height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover"
+                style="height: 120px; width: 213.33px; border-radius: var(--radius-xl); object-fit: cover"
                 @click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)"
                 loading="lazy" />
             <img
                 v-else-if="!userDialog.loading"
                 class="cursor-pointer"
                 :src="userDialog.ref.currentAvatarThumbnailImageUrl"
-                style="height: 120px; width: 160px; border-radius: 12px; object-fit: cover"
+                style="height: 120px; width: 160px; border-radius: var(--radius-xl); object-fit: cover"
                 @click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)"
                 loading="lazy" />
         </div>
@@ -179,7 +179,7 @@
                                             flex: none;
                                             height: 32px;
                                             width: 32px;
-                                            border-radius: 3px;
+                                            border-radius: var(--radius-sm);
                                             object-fit: cover;
                                             margin-top: 5px;
                                             margin-right: 5px;
@@ -237,7 +237,7 @@
                 <img
                     class="cursor-pointer"
                     :src="userImage(userDialog.ref, true, '256', true)"
-                    style="flex: none; width: 120px; height: 120px; border-radius: 12px; object-fit: cover"
+                    style="flex: none; width: 120px; height: 120px; border-radius: var(--radius-xl); object-fit: cover"
                     @click="showFullscreenImageDialog(userDialog.ref.userIcon)"
                     loading="lazy" />
             </div>
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index f1cb7735..17cf12e9 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -13,7 +13,7 @@
                         v-if="!worldDialog.loading"
                         :src="worldDialog.ref.thumbnailImageUrl"
                         class="cursor-pointer"
-                        style="width: 160px; height: 120px; border-radius: 12px"
+                        style="width: 160px; height: 120px; border-radius: var(--radius-xl)"
                         @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
                         loading="lazy" />
                 </div>
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index ee3ea95f..cb293755 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -1708,7 +1708,7 @@
     }
 
     .group-item {
-        border-radius: 8px;
+        border-radius: var(--radius-lg);
         border: 1px solid var(--border);
         padding: 8px;
         cursor: pointer;
@@ -1913,7 +1913,7 @@
         align-items: center;
         box-sizing: border-box;
         border: 1px solid var(--border);
-        border-radius: calc(8px * var(--favorites-card-scale, 1));
+        border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
         padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
         cursor: pointer;
         transition: background-color 0.15s ease;
@@ -1940,7 +1940,7 @@
     :deep(.favorites-search-card__avatar) {
         width: calc(48px * var(--favorites-card-scale, 1));
         height: calc(48px * var(--favorites-card-scale, 1));
-        border-radius: calc(6px * var(--favorites-card-scale, 1));
+        border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
         overflow: hidden;
         flex-shrink: 0;
     }
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index 9edf14c7..eefdad66 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -1348,7 +1348,7 @@
     }
 
     .group-item {
-        border-radius: 8px;
+        border-radius: var(--radius-lg);
         border: 1px solid var(--border);
         padding: 8px;
         cursor: pointer;
@@ -1540,7 +1540,7 @@
         align-items: center;
         box-sizing: border-box;
         border: 1px solid var(--border);
-        border-radius: calc(8px * var(--favorites-card-scale, 1));
+        border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
         padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
         cursor: pointer;
         transition: background-color 0.15s ease;
@@ -1570,7 +1570,7 @@
     :deep(.favorites-search-card__avatar) {
         width: calc(48px * var(--favorites-card-scale, 1));
         height: calc(48px * var(--favorites-card-scale, 1));
-        border-radius: calc(6px * var(--favorites-card-scale, 1));
+        border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
         overflow: hidden;
         flex-shrink: 0;
     }
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index aa691c6a..ccd5e4e1 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -1579,7 +1579,7 @@
     }
 
     .group-item {
-        border-radius: 8px;
+        border-radius: var(--radius-lg);
         border: 1px solid var(--border);
         padding: 8px;
         cursor: pointer;
@@ -1829,7 +1829,7 @@
         align-items: center;
         box-sizing: border-box;
         border: 1px solid var(--border);
-        border-radius: calc(8px * var(--favorites-card-scale, 1));
+        border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
         padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
         cursor: pointer;
         transition: background-color 0.15s ease;
@@ -1859,7 +1859,7 @@
     :deep(.favorites-search-card__avatar) {
         width: calc(48px * var(--favorites-card-scale, 1));
         height: calc(48px * var(--favorites-card-scale, 1));
-        border-radius: calc(6px * var(--favorites-card-scale, 1));
+        border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
         overflow: hidden;
         flex-shrink: 0;
     }
diff --git a/src/views/FriendsLocations/components/FriendsLocationsCard.vue b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
index aa80f2f3..293791ad 100644
--- a/src/views/FriendsLocations/components/FriendsLocationsCard.vue
+++ b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
@@ -240,7 +240,7 @@
         position: relative;
         display: grid;
         gap: calc(14px * var(--card-scale) * var(--card-spacing));
-        border-radius: 8px;
+        border-radius: var(--radius-lg);
         transition: background-color 0.15s ease;
         width: 100%;
         max-width: var(--friend-card-target-width, 220px);
@@ -355,7 +355,7 @@
         justify-content: center;
         min-height: calc(40px * var(--card-scale));
         padding: calc(6px * var(--card-scale)) calc(10px * var(--card-scale));
-        border-radius: calc(10px * var(--card-scale));
+        border-radius: calc(var(--radius-lg) * var(--card-scale));
         font-size: calc(12px * var(--card-scale));
         line-height: 1.3;
         box-sizing: border-box;
diff --git a/src/views/PlayerList/PlayerList.vue b/src/views/PlayerList/PlayerList.vue
index e0becdfd..aa2825fd 100644
--- a/src/views/PlayerList/PlayerList.vue
+++ b/src/views/PlayerList/PlayerList.vue
@@ -9,7 +9,7 @@
                 <img
                     :src="currentInstanceWorld.ref.thumbnailImageUrl"
                     class="cursor-pointer"
-                    style="flex: none; width: 160px; height: 120px; border-radius: 4px"
+                    style="flex: none; width: 160px; height: 120px; border-radius: var(--radius-md)"
                     @click="showFullscreenImageDialog(currentInstanceWorld.ref.imageUrl)"
                     loading="lazy" />
                 <div style="margin-left: 10px; display: flex; flex-direction: column; min-width: 320px; width: 100%">
diff --git a/src/views/Tools/Tools.vue b/src/views/Tools/Tools.vue
index 0434a9c8..937a0e9c 100644
--- a/src/views/Tools/Tools.vue
+++ b/src/views/Tools/Tools.vue
@@ -501,7 +501,7 @@
             display: flex;
             align-items: center;
             padding: 8px 12px;
-            border-radius: 6px;
+            border-radius: var(--radius-lg);
             margin-bottom: 12px;
             transition: all 0.2s ease;
 
@@ -533,7 +533,7 @@
         transition: background-color 0.15s ease;
         position: relative;
         overflow: visible;
-        border-radius: 8px;
+        border-radius: var(--radius-lg);
         cursor: pointer;
         width: 100%;
 
@@ -555,7 +555,7 @@
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                border-radius: 12px;
+                border-radius: var(--radius-xl);
                 margin-right: 20px;
 
                 i {
diff --git a/src/views/Tools/components/GroupCalendarEventCard.vue b/src/views/Tools/components/GroupCalendarEventCard.vue
index 242fc7d6..3e1e1b33 100644
--- a/src/views/Tools/components/GroupCalendarEventCard.vue
+++ b/src/views/Tools/components/GroupCalendarEventCard.vue
@@ -258,7 +258,7 @@
         transition: background-color 0.15s ease;
         position: relative;
         overflow: visible;
-        border-radius: 8px;
+        border-radius: var(--radius-lg);
         width: 100%;
     }
 
@@ -287,7 +287,7 @@
         cursor: pointer;
         width: 100%;
         object-fit: cover;
-        border-radius: 8px 8px 0 0;
+        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     }
 
     .timeline-view .event-card .banner {
diff --git a/src/views/Tools/components/GroupCalendarMonth.vue b/src/views/Tools/components/GroupCalendarMonth.vue
index 1e32d4ac..a6b7a74c 100644
--- a/src/views/Tools/components/GroupCalendarMonth.vue
+++ b/src/views/Tools/components/GroupCalendarMonth.vue
@@ -178,7 +178,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        border-radius: 10px;
+        border-radius: var(--radius-lg);
         font-size: 18px;
         position: relative;
     }
@@ -189,7 +189,7 @@
         right: -4px;
         min-width: 14px;
         height: 16px;
-        border-radius: 9px;
+        border-radius: var(--radius-lg);
         display: flex;
         align-items: center;
         justify-content: center;
diff --git a/src/views/Tools/dialogs/GroupCalendarDialog.vue b/src/views/Tools/dialogs/GroupCalendarDialog.vue
index 8d4ae132..d5a6d35a 100644
--- a/src/views/Tools/dialogs/GroupCalendarDialog.vue
+++ b/src/views/Tools/dialogs/GroupCalendarDialog.vue
@@ -500,7 +500,7 @@
                             display: flex;
                             align-items: center;
                             justify-content: center;
-                            border-radius: 8px;
+                            border-radius: var(--radius-xl);
                             font-size: 18px;
                             position: relative;
 
@@ -513,7 +513,7 @@
                                 right: 2px;
                                 min-width: 16px;
                                 height: 16px;
-                                border-radius: 8px;
+                                border-radius: var(--radius-xl);
                                 display: flex;
                                 align-items: center;
                                 justify-content: center;
@@ -591,7 +591,7 @@
                         font-weight: bold;
                         padding: 4px 12px 10px 12px;
                         cursor: pointer;
-                        border-radius: 4px;
+                        border-radius: var(--radius-md);
                         margin: 0 -12px 10px -12px;
                         display: flex;
                         align-items: center;